// Stoneglass.org — homepage
// Editorial-antiquarian umbrella site for Stoneglass Editions + Stoneglass Cartography.

const { useState, useEffect } = React;

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#f4ede0", "#1a1612", "#7a3b2e", "#a89576"],
  "density": "comfortable",
  "heroVariant": "editorial"
}/*EDITMODE-END*/;

// Map a palette array (paper, ink, accent, gold) back to a name on <body>
const PALETTES = {
  cream:    ["#f4ede0", "#1a1612", "#7a3b2e", "#a89576"],
  midnight: ["#1a1614", "#f0e6d2", "#c4a576", "#8a6a4a"],
  forest:   ["#fbfaf7", "#15201a", "#2d4a3e", "#b89968"],
  bone:     ["#fbfaf7", "#0a0a0a", "#c93f1f", "#8a7d68"],
};
const paletteName = (arr) => {
  const key = JSON.stringify(arr).toLowerCase();
  return Object.entries(PALETTES).find(
    ([, v]) => JSON.stringify(v).toLowerCase() === key
  )?.[0] || "cream";
};

// ───────────────────────────── Nav ─────────────────────────────
const Nav = () => (
  <nav
    style={{
      position: "sticky",
      top: 0,
      zIndex: 40,
      background: "color-mix(in oklab, var(--paper) 88%, transparent)",
      backdropFilter: "blur(8px)",
      WebkitBackdropFilter: "blur(8px)",
      borderBottom: "1px solid var(--rule)",
    }}
  >
    <div
      className="container"
      style={{
        display: "grid",
        gridTemplateColumns: "1fr auto 1fr",
        alignItems: "center",
        padding: "18px 0",
      }}
    >
      <a href="#top" style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <Monogram size={32} />
        <span
          style={{
            fontFamily: "var(--font-display)",
            fontSize: 22,
            fontWeight: 500,
            letterSpacing: "-0.005em",
          }}
        >
          Stoneglass
        </span>
      </a>

      <div style={{ display: "flex", alignItems: "center", gap: 36, justifySelf: "center" }}>
        {[
          ["Editions", "#editions"],
          ["Cartography", "#cartography"],
          ["About", "#about"],
        ].map(([label, href]) => (
          <a
            key={label}
            href={href}
            style={{
              fontSize: 13,
              letterSpacing: "0.04em",
              color: "var(--ink-soft)",
              transition: "color 0.2s",
            }}
            onMouseEnter={(e) => (e.currentTarget.style.color = "var(--accent)")}
            onMouseLeave={(e) => (e.currentTarget.style.color = "var(--ink-soft)")}
          >
            {label}
          </a>
        ))}
      </div>

      {/* spacer to keep links centered */}
      <span aria-hidden="true" />


    </div>
  </nav>
);

// ───────────────────────────── Hero ─────────────────────────────
const Hero = ({ variant }) => {
  if (variant === "split") {
    return (
      <section
        id="top"
        style={{
          paddingTop: "calc(var(--pad-y) * 0.6)",
          paddingBottom: "var(--pad-y)",
        }}
      >
        <div
          className="container"
          style={{
            display: "grid",
            gridTemplateColumns: "1.2fr 1fr",
            gap: 80,
            alignItems: "center",
          }}
        >
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>
              ✦ Est. MMXXVI · An Imprint of Two Hands
            </div>
            <h1
              style={{
                fontSize: "clamp(56px, 7.5vw, 112px)",
                lineHeight: 0.96,
                letterSpacing: "-0.02em",
                marginBottom: 32,
              }}
            >
              Old classics,
              <br />
              <em style={{ color: "var(--accent)" }}>modern hands.</em>
            </h1>
            <p
              style={{
                fontSize: 19,
                lineHeight: 1.55,
                color: "var(--ink-soft)",
                maxWidth: 540,
                marginBottom: 36,
              }}
            >
              Stoneglass is a small house with two crafts — restoring forgotten
              literature, and reassembling the cartography of cities — bringing the
              quiet pleasures of the public domain into the present.
            </p>
            <div style={{ display: "flex", gap: 12 }}>
              <a href="https://www.etsy.com/shop/ThrillingGifts?ref=shop-header-name&listing_id=4505430342&from_page=listing&section_id=58549398" target="_blank" rel="noopener" className="pill">Shop on Etsy <span className="arrow">→</span></a>
              <a href="https://www.amazon.com/s?i=digital-text&rh=p_27%3AAustin%2BErkl&s=relevancerank&text=Austin+Erkl&ref=dp_byline_sr_ebooks_2" target="_blank" rel="noopener" className="pill">Shop on Amazon <span className="arrow">→</span></a>
            </div>
          </div>
          <div
            style={{
              borderLeft: "1px solid var(--rule)",
              paddingLeft: 56,
              display: "flex",
              flexDirection: "column",
              gap: 32,
              fontFamily: "var(--font-display)",
            }}
          >
            <div>
              <div className="eyebrow" style={{ marginBottom: 12 }}>№ 01 — The Press</div>
              <div style={{ fontSize: 28, fontStyle: "italic", lineHeight: 1.15 }}>
                Stoneglass Editions
              </div>
              <p style={{ margin: "10px 0 0", fontSize: 15, lineHeight: 1.55, color: "var(--ink-mute)", fontFamily: "var(--font-body)" }}>
                Classic literature, freshly edited and annotated — printed
                for the way you read now.
              </p>
            </div>
            <div style={{ height: 1, background: "var(--rule)" }} />
            <div>
              <div className="eyebrow" style={{ marginBottom: 12 }}>№ 02 — The Atelier</div>
              <div style={{ fontSize: 28, fontStyle: "italic", lineHeight: 1.15 }}>
                Stoneglass Cartography
              </div>
              <p style={{ margin: "10px 0 0", fontSize: 15, lineHeight: 1.55, color: "var(--ink-mute)", fontFamily: "var(--font-body)" }}>
                Antique city plans, pieced from period surveys and printed
                on heavyweight paper.
              </p>
            </div>
          </div>
        </div>
      </section>
    );
  }

  // editorial — large statement
  return (
    <section
      id="top"
      style={{
        paddingTop: "calc(var(--pad-y) * 0.5)",
        paddingBottom: "var(--pad-y)",
        position: "relative",
        overflow: "hidden",
      }}
    >
      {/* Watermark monogram */}
      <span
        className="watermark"
        style={{
          fontSize: "min(72vw, 1100px)",
          top: "-8%",
          left: "50%",
          transform: "translateX(-50%)",
        }}
      >
        S
      </span>

      <div className="container" style={{ position: "relative" }}>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "baseline",
            marginBottom: 56,
          }}
        >
          <div className="eyebrow">✦ Est. MMXXVI</div>
          <div className="eyebrow" style={{ textAlign: "right" }}>Volume I · No. 01</div>
        </div>

        <h1
          style={{
            fontSize: "clamp(72px, 12vw, 200px)",
            lineHeight: 0.92,
            letterSpacing: "-0.025em",
            textAlign: "center",
            marginBottom: 48,
            fontWeight: 500,
          }}
        >
          Old classics,
          <br />
          <em style={{ color: "var(--accent)", fontWeight: 500 }}>modern hands.</em>
        </h1>

        <div
          style={{
            display: "flex",
            alignItems: "flex-start",
            justifyContent: "space-between",
            gap: 60,
            maxWidth: 1100,
            margin: "0 auto",
          }}
        >
          <div
            style={{
              fontSize: 14,
              color: "var(--ink-mute)",
              fontFamily: "var(--font-mono)",
              letterSpacing: "0.06em",
              maxWidth: 260,
              lineHeight: 1.7,
            }}
          >
            A small house
            <br />
            with two crafts, working
            <br />
            the public domain.
          </div>

          <div style={{ display: "flex", gap: 12 }}>
            <a href="https://www.etsy.com/shop/ThrillingGifts?ref=shop-header-name&listing_id=4505430342&from_page=listing&section_id=58549398" target="_blank" rel="noopener" className="pill">Shop on Etsy <span className="arrow">→</span></a>
            <a href="https://www.amazon.com/s?i=digital-text&rh=p_27%3AAustin%2BErkl&s=relevancerank&text=Austin+Erkl&ref=dp_byline_sr_ebooks_2" target="_blank" rel="noopener" className="pill">Shop on Amazon <span className="arrow">→</span></a>
          </div>

          <div
            style={{
              fontSize: 14,
              color: "var(--ink-mute)",
              fontFamily: "var(--font-mono)",
              letterSpacing: "0.06em",
              maxWidth: 260,
              textAlign: "right",
              lineHeight: 1.7,
            }}
          >
            Restored literature,
            <br />
            rebuilt cities — quietly
            <br />
            remastered.
          </div>
        </div>

        {/* Featured shelf strip removed — typographic-only hero */}
      </div>
    </section>
  );
};

// ───────────────────────────── Manifesto ─────────────────────────────
const Manifesto = () => (
  <section id="about" className="reveal" style={{ padding: "var(--pad-y) 0", borderTop: "1px solid var(--rule)" }}>
    <div
      className="container"
      style={{
        display: "grid",
        gridTemplateColumns: "1fr 2fr",
        gap: 80,
        alignItems: "start",
      }}
    >
      <div>
        <div className="eyebrow">§ Manifesto</div>
        <h2
          style={{
            marginTop: 18,
            fontSize: "clamp(36px, 4vw, 52px)",
            lineHeight: 1.05,
            letterSpacing: "-0.015em",
          }}
        >
          The works are
          <br />
          not asleep —
          <br />
          <em style={{ color: "var(--accent)" }}>only waiting.</em>
        </h2>
      </div>
      <div
        style={{
          fontSize: 19,
          lineHeight: 1.65,
          color: "var(--ink-soft)",
          maxWidth: 680,
          fontFamily: "var(--font-display)",
        }}
      >
        <p className="dropcap" style={{ margin: 0, marginBottom: 22 }}>
          Stoneglass began with a simple suspicion: that the public domain is
          full of beautiful, useful things — books, maps, marginalia — kept out
          of circulation by nothing more than the friction of bad scans and
          tired editions.
        </p>
        <p style={{ margin: 0, marginBottom: 22 }}>
          We work two crafts in parallel. <strong style={{ color: "var(--ink)" }}>Stoneglass Editions</strong> takes
          out-of-copyright literature and gives it the kind of care a paperback
          rarely sees — clean typography, considered annotation, an editor's
          eye. <strong style={{ color: "var(--ink)" }}>Stoneglass Cartography</strong> takes the lithographs and surveys
          of the nineteenth-century city and rebuilds them as high-resolution
          digital prints — instant downloads you print at home, at the size
          you want.
        </p>
        <p style={{ margin: 0, color: "var(--ink-mute)" }}>
          Modern hands, old materials. Nothing fancier than that.
        </p>
      </div>
    </div>
  </section>
);

// ───────────────────────────── Section ornament ─────────────────────────────
const Ornament = ({ glyph = "❦" }) => (
  <div className="container">
    <div className="ornament">
      <span className="ornament__glyph">{glyph}</span>
    </div>
  </div>
);

// ───────────────────────────── Slim imprint blurbs ─────────────────────────────
const Imprint = ({ id, label, name, body, colophonLabel, colophonItems, tone = "light" }) => {
  const dark = tone === "dark";
  const grid = tone === "grid";
  const paper = tone === "paper";

  return (
    <section
      id={id}
      className={`reveal ${grid ? "grid-paper" : ""}`.trim()}
      style={{
        padding: "calc(var(--pad-y) * 0.7) 0",
        background: dark
          ? "var(--ink)"
          : paper
          ? "var(--paper-2)"
          : "var(--paper)",
        color: dark ? "var(--paper)" : "var(--ink)",
        position: "relative",
        overflow: "hidden",
        borderTop: paper ? "4px double var(--accent)" : grid ? "1px solid var(--rule)" : "1px solid var(--rule)",
      }}
    >
      {/* Big serial mark in the corner */}
      <span
        aria-hidden="true"
        style={{
          position: "absolute",
          fontFamily: "var(--font-display)",
          fontStyle: "italic",
          fontSize: "clamp(180px, 22vw, 320px)",
          color: dark ? "var(--gold)" : "var(--accent)",
          opacity: dark ? 0.12 : 0.08,
          lineHeight: 0.8,
          top: -30,
          right: 32,
          fontWeight: 500,
          pointerEvents: "none",
        }}
      >
        {label.split("№ ")[1]?.split(" ")[0] || ""}
      </span>

      <div
        className="container"
        style={{
          display: "grid",
          gridTemplateColumns: "1fr 2fr",
          gap: 80,
          alignItems: "start",
          position: "relative",
        }}
      >
        <div>
          <div
            className="eyebrow"
            style={{ color: dark ? "var(--gold)" : "var(--ink-mute)" }}
          >
            {label}
          </div>
          <h2
            style={{
              marginTop: 14,
              fontSize: "clamp(40px, 4.6vw, 64px)",
              lineHeight: 0.98,
              letterSpacing: "-0.015em",
              color: dark ? "var(--paper)" : "var(--ink)",
            }}
          >
            Stoneglass{" "}
            <em style={{ color: dark ? "var(--gold)" : "var(--accent)" }}>
              {name}
            </em>
          </h2>
        </div>

        <div>
          <p
            className="dropcap"
            style={{
              margin: 0,
              fontFamily: "var(--font-display)",
              fontSize: 22,
              lineHeight: 1.55,
              color: dark ? "rgba(244,237,224,0.85)" : "var(--ink-soft)",
              maxWidth: 680,
            }}
          >
            {body}
          </p>

          {/* Colophon-style detail line */}
          {colophonItems && (
            <div
              style={{
                marginTop: 36,
                paddingTop: 18,
                borderTop: `1px solid ${dark ? "rgba(244,237,224,0.18)" : "var(--rule)"}`,
                display: "flex",
                gap: 32,
                flexWrap: "wrap",
                alignItems: "baseline",
                fontFamily: "var(--font-mono)",
                fontSize: 11,
                letterSpacing: "0.14em",
                textTransform: "uppercase",
                color: dark ? "rgba(244,237,224,0.55)" : "var(--ink-mute)",
              }}
            >
              <span style={{ color: dark ? "var(--gold)" : "var(--accent)" }}>
                {colophonLabel}
              </span>
              {colophonItems.map((it) => (
                <span key={it}>{it}</span>
              ))}
            </div>
          )}
        </div>
      </div>
    </section>
  );
};

// ───────────────────────────── Quote / Press ─────────────────────────────
const Pull = () => (
  <section
    className="reveal"
    style={{
      padding: "var(--pad-y) 0",
      borderTop: "1px solid var(--rule)",
      position: "relative",
      overflow: "hidden",
    }}
  >
    {/* Oversized opening quote watermark */}
    <span
      aria-hidden="true"
      className="watermark"
      style={{
        fontSize: "min(48vw, 720px)",
        top: "-12%",
        left: "4%",
        fontStyle: "normal",
      }}
    >
      “
    </span>

    <div className="container" style={{ position: "relative", textAlign: "center" }}>
      <div
        className="eyebrow"
        style={{ marginBottom: 28 }}
      >
        ❦ &nbsp; A Note from the Editors &nbsp; ❦
      </div>

      <blockquote
        style={{
          margin: 0,
          maxWidth: 980,
          marginLeft: "auto",
          marginRight: "auto",
          fontFamily: "var(--font-display)",
          fontSize: "clamp(32px, 4vw, 56px)",
          lineHeight: 1.18,
          fontStyle: "italic",
          color: "var(--ink)",
          letterSpacing: "-0.01em",
        }}
      >
        The past doesn't need
        <span style={{ color: "var(--accent)" }}> preserving</span>.
        It needs <span style={{ color: "var(--accent)" }}>reissuing</span>.
      </blockquote>

      <div
        style={{
          marginTop: 40,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          gap: 18,
          fontFamily: "var(--font-mono)",
          fontSize: 11,
          letterSpacing: "0.22em",
          textTransform: "uppercase",
          color: "var(--ink-mute)",
        }}
      >
        <span style={{ width: 40, height: 1, background: "var(--rule)" }} />
        <span>The Editors, Stoneglass House</span>
        <span style={{ width: 40, height: 1, background: "var(--rule)" }} />
      </div>
    </div>
  </section>
);

// ───────────────────────────── FAQ ─────────────────────────────
const FAQ = () => {
  const items = [
    {
      q: "Are the Stoneglass maps physical prints or digital?",
      a: "Digital. Stoneglass Cartography sells high-resolution downloads — you print them at home, or through any print shop, at whatever size you like.",
    },
    {
      q: "Aren't these works already free in the public domain?",
      a: "The source texts and maps are, yes. What you're paying for is the work on top — fresh editing, annotation, redrawn linework and clean typesetting that makes them a pleasure to actually read and hang.",
    },
    {
      q: "Who is behind Stoneglass?",
      a: "Stoneglass is the independent press of Austin Erkl, who edits the Editions titles and assembles the Cartography plates.",
    },
  ];

  const [open, setOpen] = useState(0);

  return (
    <section
      id="faq"
      className="reveal"
      style={{
        padding: "var(--pad-y) 0",
        borderTop: "1px solid var(--rule)",
        background: "var(--paper-2)",
      }}
    >
      <div
        className="container"
        style={{
          display: "grid",
          gridTemplateColumns: "1fr 2fr",
          gap: 80,
          alignItems: "start",
        }}
      >
        <div>
          <div className="eyebrow">§ Questions</div>
          <h2
            style={{
              marginTop: 14,
              fontSize: "clamp(36px, 4vw, 56px)",
              lineHeight: 1,
              letterSpacing: "-0.015em",
            }}
          >
            A few things
            <br />
            <em style={{ color: "var(--accent)" }}>worth knowing.</em>
          </h2>
        </div>

        <div style={{ borderTop: "1px solid var(--ink)" }}>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ borderBottom: "1px solid var(--rule)" }}>
                <button
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  aria-expanded={isOpen}
                  style={{
                    width: "100%",
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "baseline",
                    gap: 24,
                    padding: "26px 0",
                    textAlign: "left",
                  }}
                >
                  <span
                    style={{
                      fontFamily: "var(--font-display)",
                      fontSize: "clamp(21px, 2.2vw, 28px)",
                      lineHeight: 1.2,
                      color: "var(--ink)",
                      letterSpacing: "-0.005em",
                    }}
                  >
                    {it.q}
                  </span>
                  <span
                    aria-hidden="true"
                    style={{
                      fontFamily: "var(--font-display)",
                      fontSize: 30,
                      lineHeight: 1,
                      color: "var(--accent)",
                      transform: isOpen ? "rotate(45deg)" : "none",
                      transition: "transform 0.3s ease",
                      flexShrink: 0,
                    }}
                  >
                    +
                  </span>
                </button>
                <div
                  style={{
                    overflow: "hidden",
                    maxHeight: isOpen ? 240 : 0,
                    opacity: isOpen ? 1 : 0,
                    transition: "max-height 0.4s ease, opacity 0.3s ease",
                  }}
                >
                  <p
                    style={{
                      margin: 0,
                      paddingBottom: 28,
                      maxWidth: 620,
                      fontSize: 17,
                      lineHeight: 1.6,
                      color: "var(--ink-soft)",
                    }}
                  >
                    {it.a}
                  </p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

// ───────────────────────────── Footer ─────────────────────────────
const Footer = () => (
  <footer
    id="shop"
    className="reveal"
    style={{
      padding: "60px 0 40px",
      borderTop: "1px solid var(--rule)",
    }}
  >
    <div className="container">
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "1.6fr 1fr",
          gap: 56,
          alignItems: "start",
          marginBottom: 56,
        }}
      >
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
            <Monogram size={36} />
            <span
              style={{
                fontFamily: "var(--font-display)",
                fontSize: 28,
                fontWeight: 500,
              }}
            >
              Stoneglass
            </span>
          </div>
          <p
            style={{
              margin: 0,
              fontFamily: "var(--font-display)",
              fontStyle: "italic",
              fontSize: 17,
              color: "var(--ink-mute)",
              maxWidth: 320,
              lineHeight: 1.5,
            }}
          >
            Old classics, modern hands. A small house at the edge of the public
            domain.
          </p>
        </div>

        <FootCol
          label="House"
          items={[
            { label: "About", href: "#about" },
            { label: "contact@stoneglass.org", href: "mailto:contact@stoneglass.org" },
          ]}
        />
      </div>

      <div className="rule" />
      <div
        style={{
          marginTop: 24,
          display: "flex",
          justifyContent: "space-between",
          fontFamily: "var(--font-mono)",
          fontSize: 11,
          letterSpacing: "0.14em",
          textTransform: "uppercase",
          color: "var(--ink-mute)",
        }}
      >
        <span>© MMXXVI Stoneglass · All rights reserved on new material</span>
        <span>Stoneglass.org</span>
      </div>
    </div>
  </footer>
);

const FootCol = ({ label, items }) => (
  <div>
    <div
      className="eyebrow"
      style={{ marginBottom: 16, color: "var(--accent)" }}
    >
      {label}
    </div>
    <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
      {items.map((it) => {
        const item = typeof it === "string" ? { label: it, href: "#" } : it;
        return (
          <li
            key={item.label}
            style={{
              fontFamily: "var(--font-display)",
              fontSize: 17,
              color: "var(--ink-soft)",
            }}
          >
            <a href={item.href} {...(item.external ? { target: "_blank", rel: "noopener" } : {})}>{item.label}</a>
          </li>
        );
      })}
    </ul>
  </div>
);

// ───────────────────────────── App ─────────────────────────────
const App = () => {
  const [tweaks, setTweak] = useTweaks(DEFAULTS);

  useEffect(() => {
    document.body.dataset.palette = paletteName(tweaks.palette);
    document.body.dataset.density = tweaks.density;
  }, [tweaks.palette, tweaks.density]);

  // Scroll-reveal: fade/rise sections as they enter the viewport
  useEffect(() => {
    const obs = new IntersectionObserver(
      (entries) => {
        for (const entry of entries) {
          if (entry.isIntersecting) {
            entry.target.classList.add("in");
            obs.unobserve(entry.target);
          }
        }
      },
      { threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
    );
    document.querySelectorAll(".reveal").forEach((el) => obs.observe(el));
    return () => obs.disconnect();
  }, []);

  return (
    <>
      <Nav />
      <Hero variant={tweaks.heroVariant} />
      <Manifesto />
      <Ornament glyph="❦" />
      <Imprint
        id="editions"
        label="№ 01 — The Press"
        name="Editions"
        tone="paper"
        body="We take public-domain literature — mysteries, adventures, children's classics — and reissue it the way it deserves to be read. Clean typography, careful annotation, an editor who actually read the book. Available on Kindle, paperback, and hardcover."
        colophonLabel="Now in the press"
        colophonItems={["Christie, A.", "Ransome, A.", "Grahame, K. · forthcoming"]}
      />
      <Imprint
        id="cartography"
        label="№ 02 — The Atelier"
        name="Cartography"
        tone="grid"
        body="We piece nineteenth-century city plans back together from period surveys and lithographs — redrawn, retouched, and released as high-resolution digital prints. Instant download, print at home at the size you want."
        colophonLabel="Plates in the atelier"
        colophonItems={["Vienna, 1889", "Paris, 1878", "Lisbon, 1862", "Edinburgh, 1845"]}
      />
      <Pull />
      <FAQ />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette">
          <TweakColor
            value={tweaks.palette}
            onChange={(v) => setTweak("palette", v)}
            options={Object.values(PALETTES)}
          />
        </TweakSection>

        <TweakSection label="Hero layout">
          <TweakRadio
            value={tweaks.heroVariant}
            onChange={(v) => setTweak("heroVariant", v)}
            options={[
              ["editorial", "Editorial"],
              ["split", "Split"],
            ]}
          />
        </TweakSection>

        <TweakSection label="Density">
          <TweakRadio
            value={tweaks.density}
            onChange={(v) => setTweak("density", v)}
            options={[
              ["comfortable", "Comfortable"],
              ["compact", "Compact"],
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<App />);
