@021.is/brand-studio 0.3.0

package/dist/chunk-Z2DJJJDC.js

@@ -0,0 +1,1196 @@
+import { BrandStudioSection, SpinnerLoadingMark } from './chunk-55AYEWNQ.js';
+import { generateScheme, schemeToCssText, ROLE_GROUPS, contrastBadge, contrastRatio } from './chunk-JQV3ASME.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useState } from 'react';
+
+var ITEMS = [
+  { section: BrandStudioSection.Overview, label: "Overview" },
+  { section: BrandStudioSection.Logo, label: "Logo" },
+  { section: BrandStudioSection.Colors, label: "Colors" },
+  { section: BrandStudioSection.Typography, label: "Type" },
+  { section: BrandStudioSection.Icons, label: "Icons" },
+  { section: BrandStudioSection.Motion, label: "Motion" },
+  { section: BrandStudioSection.Download, label: "Download" }
+];
+function buildNavigation(basePath) {
+  return ITEMS.map((it) => ({
+    section: it.section,
+    label: it.label,
+    href: it.section === BrandStudioSection.Overview ? basePath : `${basePath}/${it.section}`
+  }));
+}
+function Navigation({ current, basePath, renderLink }) {
+  const items = buildNavigation(basePath);
+  return /* @__PURE__ */ jsx("nav", { style: { borderBottom: "1px solid var(--bs-border, #D8DAD0)" }, children: /* @__PURE__ */ jsx(
+    "ul",
+    {
+      style: {
+        display: "flex",
+        gap: "1.5rem",
+        listStyle: "none",
+        margin: 0,
+        padding: "0 0 0.75rem 0",
+        fontFamily: "var(--bs-mono, ui-monospace, monospace)",
+        fontSize: "0.78rem",
+        letterSpacing: "0.12em",
+        textTransform: "uppercase"
+      },
+      children: items.map((it) => /* @__PURE__ */ jsx("li", { children: renderLink({
+        href: it.href,
+        children: it.label,
+        isActive: it.section === current
+      }) }, it.section))
+    }
+  ) });
+}
+var eyebrow = {
+  fontFamily: "var(--bs-mono)",
+  fontSize: "0.72rem",
+  letterSpacing: "0.18em",
+  textTransform: "uppercase",
+  color: "var(--md-primary)",
+  margin: 0
+};
+function Swatch({
+  colors,
+  bg,
+  on
+}) {
+  const bgHex = colors[bg];
+  const onHex = colors[on];
+  const badge = contrastBadge(contrastRatio(onHex, bgHex));
+  const failing = badge.tier === "fail";
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      style: {
+        borderRadius: "0.6rem",
+        border: "1px solid var(--md-outline-variant)",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { background: bgHex, color: onHex, padding: "1rem 1.1rem", minHeight: "5.5rem" }, children: [
+          /* @__PURE__ */ jsx("p", { style: { margin: 0, fontWeight: 600, fontSize: "0.9rem" }, children: String(bg) }),
+          /* @__PURE__ */ jsxs(
+            "p",
+            {
+              style: {
+                margin: "0.15rem 0 0",
+                fontFamily: "var(--bs-mono)",
+                fontSize: "0.68rem",
+                letterSpacing: "0.04em",
+                opacity: 0.85
+              },
+              children: [
+                bgHex,
+                " \xB7 on ",
+                onHex
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              padding: "0.5rem 1.1rem",
+              fontFamily: "var(--bs-mono)",
+              fontSize: "0.68rem",
+              color: failing ? "var(--md-error)" : "var(--md-on-surface-variant)",
+              background: "var(--md-surface-container-low)"
+            },
+            children: [
+              badge.label,
+              " \xB7 ",
+              badge.tier
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function SchemeGrid({ colors }) {
+  return /* @__PURE__ */ jsx("div", { style: { display: "grid", gap: "1.5rem" }, children: ROLE_GROUPS.map((group) => /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      "p",
+      {
+        style: {
+          fontFamily: "var(--bs-mono)",
+          fontSize: "0.68rem",
+          letterSpacing: "0.12em",
+          textTransform: "uppercase",
+          color: "var(--md-on-surface-variant)",
+          margin: "0 0 0.6rem"
+        },
+        children: group.title
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gap: "0.6rem",
+          gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))"
+        },
+        children: group.pairs.map(([bg, on]) => /* @__PURE__ */ jsx(Swatch, { colors, bg, on }, String(bg)))
+      }
+    )
+  ] }, group.title)) });
+}
+function ColorsSection({ scheme }) {
+  return /* @__PURE__ */ jsxs("section", { children: [
+    /* @__PURE__ */ jsxs("header", { children: [
+      /* @__PURE__ */ jsx("p", { style: eyebrow, children: "Colors" }),
+      /* @__PURE__ */ jsx(
+        "h2",
+        {
+          style: {
+            fontSize: "clamp(1.5rem, 3vw, 2.25rem)",
+            letterSpacing: "-0.02em",
+            margin: "0.4rem 0 0",
+            fontWeight: 600,
+            color: "var(--md-on-surface)"
+          },
+          children: "One seed. A complete system."
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          style: { maxWidth: "52ch", color: "var(--md-on-surface-variant)", marginTop: "0.75rem" },
+          children: "A Material Design 3 tonal palette derived from the brand seed. Every on-color is contrast-checked against its surface per WCAG 2.1, in both light and dark."
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { marginTop: "2.25rem", display: "grid", gap: "2.5rem" }, children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { style: { ...eyebrow, fontSize: "0.7rem", marginBottom: "1rem" }, children: "Light scheme" }),
+        /* @__PURE__ */ jsx(SchemeGrid, { colors: scheme.light })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { style: { ...eyebrow, fontSize: "0.7rem", marginBottom: "1rem" }, children: "Dark scheme" }),
+        /* @__PURE__ */ jsx(SchemeGrid, { colors: scheme.dark })
+      ] })
+    ] })
+  ] });
+}
+var ICON_SIZES = [64, 128, 256, 512, 1024];
+var WORDMARK_HEIGHTS = [32, 48, 64, 96, 128];
+function triggerDownload(svgString, filename) {
+  const blob = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 1e3);
+}
+function DownloadSection({
+  config,
+  staticLogo,
+  staticLogoDark
+}) {
+  const iconLightRef = useRef(null);
+  const iconDarkRef = useRef(null);
+  const measureRef = useRef(null);
+  const [iconSize, setIconSize] = useState(256);
+  const [wmHeight, setWmHeight] = useState(64);
+  const scheme = config.scheme ?? generateScheme(config.color);
+  const sans = config.type.sans;
+  const lightBg = scheme.light.surfaceContainer;
+  const darkBg = scheme.dark.surfaceContainer;
+  const lightInk = scheme.light.onSurface;
+  const darkInk = scheme.dark.onSurface;
+  const lightLabel = scheme.light.onSurfaceVariant;
+  const darkLabel = scheme.dark.onSurfaceVariant;
+  const iconDarkNode = staticLogoDark ?? staticLogo;
+  const hasDistinctDark = staticLogoDark !== void 0 && staticLogoDark !== null;
+  function downloadIcon(mode) {
+    const ref = mode === "light" ? iconLightRef : iconDarkRef;
+    const svg = ref.current?.querySelector("svg");
+    if (!svg) return;
+    const clone = svg.cloneNode(true);
+    clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+    clone.setAttribute("width", String(iconSize));
+    clone.setAttribute("height", String(iconSize));
+    triggerDownload(
+      new XMLSerializer().serializeToString(clone),
+      `${config.name}-icon-${iconSize}-${mode}.svg`
+    );
+  }
+  async function downloadWordmark(mode) {
+    await document.fonts?.ready;
+    const text = measureRef.current?.querySelector("text");
+    if (!text) return;
+    const bbox = text.getBBox();
+    const pad = bbox.height * 0.14;
+    const vbW = bbox.width + pad * 2;
+    const vbH = bbox.height + pad * 2;
+    const scale = wmHeight / vbH;
+    const fill = mode === "light" ? lightInk : darkInk;
+    const out = [
+      `<svg xmlns="http://www.w3.org/2000/svg" width="${Math.round(vbW * scale)}" height="${wmHeight}" viewBox="0 0 ${vbW.toFixed(1)} ${vbH.toFixed(1)}" role="img" aria-label="${config.name}">`,
+      `<text x="${(pad - bbox.x).toFixed(1)}" y="${pad.toFixed(1)}" dominant-baseline="text-before-edge" font-family="${sans}, system-ui, sans-serif" font-weight="600" font-size="100" letter-spacing="-3" fill="${fill}">${config.name}</text>`,
+      "</svg>"
+    ].join("");
+    triggerDownload(out, `${config.name}-wordmark-${wmHeight}-${mode}.svg`);
+  }
+  return /* @__PURE__ */ jsxs("section", { children: [
+    /* @__PURE__ */ jsx(
+      "h2",
+      {
+        style: {
+          fontSize: "1.6rem",
+          fontWeight: 600,
+          color: "var(--md-on-surface)",
+          margin: "0 0 0.5rem"
+        },
+        children: "Download"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "p",
+      {
+        style: {
+          color: "var(--md-on-surface-variant)",
+          maxWidth: "40rem",
+          margin: "0 0 2.5rem",
+          lineHeight: 1.6
+        },
+        children: "Export the app icon and wordmark as standalone SVGs in light and dark variants. Pick a size, download, drop into your console branding page."
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gap: "1.5rem",
+          gridTemplateColumns: "repeat(auto-fit, minmax(20rem, 1fr))"
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { style: cardStyle, children: [
+            /* @__PURE__ */ jsx("p", { style: eyebrowStyle, children: "App icon \xB7 square" }),
+            /* @__PURE__ */ jsxs("div", { style: previewRow, children: [
+              /* @__PURE__ */ jsx(PreviewPane, { bg: lightBg, label: "Light", labelColor: lightLabel, children: /* @__PURE__ */ jsx("div", { ref: iconLightRef, style: { width: 80, height: 80 }, children: staticLogo ?? /* @__PURE__ */ jsx(NoAsset, {}) }) }),
+              /* @__PURE__ */ jsx(PreviewPane, { bg: darkBg, label: "Dark", labelColor: darkLabel, children: /* @__PURE__ */ jsx("div", { ref: iconDarkRef, style: { width: 80, height: 80 }, children: iconDarkNode ?? /* @__PURE__ */ jsx(NoAsset, {}) }) })
+            ] }),
+            /* @__PURE__ */ jsx(Dropdown, { value: iconSize, onChange: setIconSize, options: ICON_SIZES, unit: "px" }),
+            /* @__PURE__ */ jsxs(ButtonRow, { children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => downloadIcon("light"),
+                  disabled: !staticLogo,
+                  style: buttonStyle(!staticLogo, "primary"),
+                  children: "Light SVG"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => downloadIcon("dark"),
+                  disabled: !iconDarkNode,
+                  style: buttonStyle(!iconDarkNode, "secondary"),
+                  children: "Dark SVG"
+                }
+              )
+            ] }),
+            staticLogo && !hasDistinctDark ? /* @__PURE__ */ jsxs(Note, { children: [
+              "No dark icon supplied \u2014 dark export reuses the light mark. Pass",
+              " ",
+              /* @__PURE__ */ jsx("code", { style: mono, children: "staticLogoDark" }),
+              " for a true dark variant."
+            ] }) : null
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: cardStyle, children: [
+            /* @__PURE__ */ jsx("p", { style: eyebrowStyle, children: "Wordmark \xB7 logo text" }),
+            /* @__PURE__ */ jsxs("div", { style: previewRow, children: [
+              /* @__PURE__ */ jsx(PreviewPane, { bg: lightBg, label: "Light", labelColor: lightLabel, children: /* @__PURE__ */ jsx(WordmarkPreview, { name: config.name, sans, color: lightInk }) }),
+              /* @__PURE__ */ jsx(PreviewPane, { bg: darkBg, label: "Dark", labelColor: darkLabel, children: /* @__PURE__ */ jsx(WordmarkPreview, { name: config.name, sans, color: darkInk }) })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Dropdown,
+              {
+                value: wmHeight,
+                onChange: setWmHeight,
+                options: WORDMARK_HEIGHTS,
+                unit: "px tall"
+              }
+            ),
+            /* @__PURE__ */ jsxs(ButtonRow, { children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => downloadWordmark("light"),
+                  style: buttonStyle(false, "primary"),
+                  children: "Light SVG"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => downloadWordmark("dark"),
+                  style: buttonStyle(false, "secondary"),
+                  children: "Dark SVG"
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "p",
+      {
+        style: {
+          color: "var(--md-on-surface-variant)",
+          fontSize: "0.78rem",
+          marginTop: "1.5rem",
+          lineHeight: 1.6
+        },
+        children: [
+          "SVG is vector \u2014 the size just sets the export width/height. The wordmark references the",
+          " ",
+          /* @__PURE__ */ jsx("code", { style: mono, children: sans }),
+          " font; targets without it fall back to the system sans."
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        ref: measureRef,
+        "aria-hidden": "true",
+        width: "1000",
+        height: "300",
+        style: { position: "absolute", left: "-9999px", top: 0, opacity: 0, pointerEvents: "none" },
+        children: /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: "0",
+            y: "0",
+            dominantBaseline: "text-before-edge",
+            fontFamily: `${sans}, system-ui, sans-serif`,
+            fontWeight: 600,
+            fontSize: 100,
+            letterSpacing: "-3",
+            children: config.name
+          }
+        )
+      }
+    )
+  ] });
+}
+var mono = { fontFamily: "var(--bs-mono)" };
+function NoAsset() {
+  return /* @__PURE__ */ jsx("span", { style: { color: "var(--md-on-surface-variant)", fontSize: "0.8rem" }, children: "no icon" });
+}
+function WordmarkPreview({ name, sans, color }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      style: {
+        fontFamily: `${sans}, system-ui, sans-serif`,
+        fontWeight: 600,
+        fontSize: "1.9rem",
+        letterSpacing: "-0.03em",
+        color
+      },
+      children: name
+    }
+  );
+}
+function PreviewPane({
+  bg,
+  label,
+  labelColor,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "relative",
+        flex: 1,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "8rem",
+        borderRadius: "0.6rem",
+        background: bg,
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              position: "absolute",
+              top: "0.4rem",
+              left: "0.55rem",
+              fontFamily: "var(--bs-mono, ui-monospace, monospace)",
+              fontSize: "0.62rem",
+              letterSpacing: "0.12em",
+              textTransform: "uppercase",
+              color: labelColor,
+              opacity: 0.85
+            },
+            children: label
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+var previewRow = {
+  display: "flex",
+  gap: "0.6rem",
+  margin: "0.75rem 0 1rem"
+};
+function ButtonRow({ children }) {
+  return /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "0.5rem", marginTop: "0.6rem" }, children });
+}
+function Note({ children }) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      style: {
+        marginTop: "0.7rem",
+        fontSize: "0.72rem",
+        color: "var(--md-on-surface-variant)",
+        lineHeight: 1.5
+      },
+      children
+    }
+  );
+}
+function Dropdown({
+  value,
+  onChange,
+  options,
+  unit
+}) {
+  return /* @__PURE__ */ jsx(
+    "select",
+    {
+      value,
+      onChange: (e) => onChange(Number(e.target.value)),
+      style: {
+        width: "100%",
+        padding: "0.55rem 0.7rem",
+        borderRadius: "0.5rem",
+        border: "1px solid var(--md-outline-variant)",
+        background: "var(--md-surface-container-low)",
+        color: "var(--md-on-surface)",
+        fontFamily: "var(--bs-mono, ui-monospace, monospace)",
+        fontSize: "0.8rem",
+        cursor: "pointer"
+      },
+      children: options.map((o) => /* @__PURE__ */ jsxs("option", { value: o, children: [
+        o,
+        " ",
+        unit
+      ] }, o))
+    }
+  );
+}
+var cardStyle = {
+  border: "1px solid var(--md-outline-variant)",
+  borderRadius: "0.85rem",
+  padding: "1.25rem",
+  background: "var(--md-surface-container-low)"
+};
+var eyebrowStyle = {
+  fontFamily: "var(--bs-mono, ui-monospace, monospace)",
+  fontSize: "0.7rem",
+  letterSpacing: "0.14em",
+  textTransform: "uppercase",
+  color: "var(--md-primary)",
+  margin: 0
+};
+function buttonStyle(disabled, kind) {
+  const isPrimary = kind === "primary";
+  return {
+    flex: 1,
+    padding: "0.6rem 0.9rem",
+    borderRadius: "0.5rem",
+    border: isPrimary ? "none" : "1px solid var(--md-primary)",
+    background: disabled ? "var(--md-surface-variant)" : isPrimary ? "var(--md-primary)" : "transparent",
+    color: disabled ? "var(--md-on-surface-variant)" : isPrimary ? "var(--md-on-primary)" : "var(--md-primary)",
+    fontSize: "0.82rem",
+    fontWeight: 600,
+    cursor: disabled ? "not-allowed" : "pointer",
+    whiteSpace: "nowrap"
+  };
+}
+var eyebrow2 = {
+  fontFamily: "var(--bs-mono)",
+  fontSize: "0.72rem",
+  letterSpacing: "0.18em",
+  textTransform: "uppercase",
+  color: "var(--md-primary)",
+  margin: 0
+};
+function Tile({ label, children }) {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "0.6rem" }, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: "6rem",
+          height: "6rem",
+          borderRadius: "0.75rem",
+          background: "var(--md-surface-container-low)",
+          border: "1px solid var(--md-outline-variant)"
+        },
+        children: /* @__PURE__ */ jsx("div", { style: { width: 56, height: 56 }, children })
+      }
+    ),
+    label ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        style: {
+          fontFamily: "var(--bs-mono)",
+          fontSize: "0.7rem",
+          color: "var(--md-on-surface-variant)"
+        },
+        children: label
+      }
+    ) : null
+  ] });
+}
+function IconsSection({ staticLogo, icons }) {
+  const items = icons ?? [];
+  const hasAny = Boolean(staticLogo) || items.length > 0;
+  return /* @__PURE__ */ jsxs("section", { children: [
+    /* @__PURE__ */ jsxs("header", { children: [
+      /* @__PURE__ */ jsx("p", { style: eyebrow2, children: "Icons" }),
+      /* @__PURE__ */ jsx(
+        "h2",
+        {
+          style: {
+            fontSize: "clamp(1.5rem, 3vw, 2.25rem)",
+            letterSpacing: "-0.02em",
+            margin: "0.4rem 0 0",
+            fontWeight: 600,
+            color: "var(--md-on-surface)"
+          },
+          children: "Brand glyphs."
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "p",
+        {
+          style: { maxWidth: "52ch", color: "var(--md-on-surface-variant)", marginTop: "0.75rem" },
+          children: [
+            "Your brand's own marks and glyphs. brand-studio ships no icon set \u2014 pass yours via the",
+            " ",
+            /* @__PURE__ */ jsx("code", { style: { fontFamily: "var(--bs-mono)" }, children: "icons" }),
+            " prop."
+          ]
+        }
+      )
+    ] }),
+    hasAny ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          marginTop: "2rem",
+          display: "flex",
+          flexWrap: "wrap",
+          gap: "1.5rem"
+        },
+        children: [
+          staticLogo ? /* @__PURE__ */ jsx(Tile, { label: "logo", children: staticLogo }) : null,
+          items.map((it, i) => /* @__PURE__ */ jsx(Tile, { label: it.label, children: it.node }, it.label ?? `icon-${i}`))
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs(
+      "p",
+      {
+        style: {
+          marginTop: "2rem",
+          padding: "2.5rem",
+          borderRadius: "0.75rem",
+          border: "1px dashed var(--md-outline-variant)",
+          color: "var(--md-on-surface-variant)",
+          textAlign: "center",
+          fontSize: "0.9rem"
+        },
+        children: [
+          "No glyphs supplied. Pass ",
+          /* @__PURE__ */ jsx("code", { style: { fontFamily: "var(--bs-mono)" }, children: "staticLogo" }),
+          " ",
+          "or ",
+          /* @__PURE__ */ jsx("code", { style: { fontFamily: "var(--bs-mono)" }, children: "icons" }),
+          " to",
+          " ",
+          /* @__PURE__ */ jsx("code", { style: { fontFamily: "var(--bs-mono)" }, children: "<BrandStudio>" }),
+          "."
+        ]
+      }
+    )
+  ] });
+}
+var eyebrow3 = {
+  fontFamily: "var(--bs-mono)",
+  fontSize: "0.7rem",
+  letterSpacing: "0.16em",
+  textTransform: "uppercase",
+  color: "var(--md-primary)",
+  margin: 0
+};
+var caption = {
+  marginTop: "0.75rem",
+  fontSize: "0.9rem",
+  lineHeight: 1.55,
+  color: "var(--md-on-surface-variant)",
+  maxWidth: "60ch"
+};
+function LogoSection({ staticLogo, animatedLogo }) {
+  const sizes = [16, 24, 32, 48, 64, 128, 200];
+  return /* @__PURE__ */ jsxs("section", { style: { display: "grid", gap: "3rem" }, children: [
+    /* @__PURE__ */ jsxs("header", { children: [
+      /* @__PURE__ */ jsx("p", { style: eyebrow3, children: "Logo" }),
+      /* @__PURE__ */ jsx(
+        "h2",
+        {
+          style: {
+            fontSize: "clamp(1.5rem, 3vw, 2.25rem)",
+            letterSpacing: "-0.02em",
+            margin: "0.4rem 0 0",
+            fontWeight: 600,
+            color: "var(--md-on-surface)"
+          },
+          children: "Mark, scale, motion."
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { style: eyebrow3, children: "Animated \xB7 loading" }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            marginTop: "0.75rem",
+            display: "flex",
+            justifyContent: "center",
+            padding: "3rem",
+            borderRadius: "0.75rem",
+            background: "var(--md-surface-container)",
+            border: "1px solid var(--md-outline-variant)",
+            color: "var(--md-primary)"
+          },
+          children: animatedLogo ?? /* @__PURE__ */ jsx(SpinnerLoadingMark, { size: 220, foreground: "var(--md-primary)" })
+        }
+      ),
+      /* @__PURE__ */ jsx("p", { style: caption, children: "The loading-state mark. Loops indefinitely." })
+    ] }),
+    staticLogo ? /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { style: eyebrow3, children: "Static \xB7 size scale" }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            marginTop: "0.75rem",
+            display: "flex",
+            flexWrap: "wrap",
+            gap: "2rem",
+            alignItems: "flex-end",
+            padding: "2rem",
+            borderRadius: "0.75rem",
+            background: "var(--md-surface-container-low)",
+            border: "1px solid var(--md-outline-variant)"
+          },
+          children: sizes.map((s) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                gap: "0.5rem"
+              },
+              children: [
+                /* @__PURE__ */ jsx("div", { style: { width: s, height: s }, children: staticLogo }),
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    style: {
+                      fontFamily: "var(--bs-mono)",
+                      fontSize: "0.7rem",
+                      color: "var(--md-on-surface-variant)"
+                    },
+                    children: [
+                      s,
+                      "px"
+                    ]
+                  }
+                )
+              ]
+            },
+            s
+          ))
+        }
+      )
+    ] }) : null
+  ] });
+}
+var eyebrow4 = {
+  fontFamily: "var(--bs-mono)",
+  fontSize: "0.72rem",
+  letterSpacing: "0.18em",
+  textTransform: "uppercase",
+  color: "var(--md-primary)",
+  margin: 0
+};
+var PRIMITIVES = [
+  ["Sweep", "Wipe a highlight across a mark"],
+  ["Drift", "Gentle idle float"],
+  ["PulseLoop", "Scale + fade breathing"],
+  ["RingDraw", "Stroke a ring into place"],
+  ["Wobble", "Playful rotate-settle"],
+  ["AppearGrow", "Pop in from nothing"],
+  ["Sequence", "Compose steps, persist + loop"],
+  ["Strikethrough", "Draw a line through"]
+];
+function MotionPlaygroundSection({
+  animatedLogo
+}) {
+  return /* @__PURE__ */ jsxs("section", { children: [
+    /* @__PURE__ */ jsxs("header", { children: [
+      /* @__PURE__ */ jsx("p", { style: eyebrow4, children: "Motion" }),
+      /* @__PURE__ */ jsx(
+        "h2",
+        {
+          style: {
+            fontSize: "clamp(1.5rem, 3vw, 2.25rem)",
+            letterSpacing: "-0.02em",
+            margin: "0.4rem 0 0",
+            fontWeight: 600,
+            color: "var(--md-on-surface)"
+          },
+          children: "Loading."
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "p",
+        {
+          style: { maxWidth: "56ch", color: "var(--md-on-surface-variant)", marginTop: "0.75rem" },
+          children: [
+            "The brand mark as a loading state. Pass your own animated mark via",
+            " ",
+            /* @__PURE__ */ jsx("code", { style: { fontFamily: "var(--bs-mono)" }, children: "animatedLogo" }),
+            "; otherwise a neutral spinner stands in."
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          marginTop: "2rem",
+          display: "flex",
+          justifyContent: "center",
+          padding: "3rem",
+          borderRadius: "0.75rem",
+          background: "var(--md-surface-container)",
+          border: "1px solid var(--md-outline-variant)",
+          color: "var(--md-primary)"
+        },
+        children: animatedLogo ?? /* @__PURE__ */ jsx(SpinnerLoadingMark, { size: 220, foreground: "var(--md-primary)" })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: { marginTop: "2.5rem" }, children: [
+      /* @__PURE__ */ jsx("p", { style: { ...eyebrow4, fontSize: "0.7rem", marginBottom: "1rem" }, children: "Motion primitives" }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            display: "grid",
+            gap: "0.6rem",
+            gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))"
+          },
+          children: PRIMITIVES.map(([name, desc]) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                padding: "0.9rem 1.1rem",
+                borderRadius: "0.6rem",
+                border: "1px solid var(--md-outline-variant)",
+                background: "var(--md-surface-container-low)"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    style: {
+                      margin: 0,
+                      fontFamily: "var(--bs-mono)",
+                      fontSize: "0.82rem",
+                      color: "var(--md-on-surface)"
+                    },
+                    children: name
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    style: {
+                      margin: "0.3rem 0 0",
+                      fontSize: "0.8rem",
+                      color: "var(--md-on-surface-variant)"
+                    },
+                    children: desc
+                  }
+                )
+              ]
+            },
+            name
+          ))
+        }
+      )
+    ] })
+  ] });
+}
+var eyebrow5 = {
+  fontFamily: "var(--bs-mono)",
+  fontSize: "0.72rem",
+  letterSpacing: "0.18em",
+  textTransform: "uppercase",
+  color: "var(--md-primary)",
+  margin: 0
+};
+function OverviewSection({ config }) {
+  return /* @__PURE__ */ jsxs("section", { children: [
+    /* @__PURE__ */ jsx("p", { style: eyebrow5, children: "Brand kit" }),
+    /* @__PURE__ */ jsxs(
+      "h1",
+      {
+        style: {
+          fontSize: "clamp(2rem, 4vw, 3.25rem)",
+          letterSpacing: "-0.025em",
+          margin: "0.5rem 0 0",
+          fontWeight: 600,
+          color: "var(--md-on-surface)"
+        },
+        children: [
+          config.name,
+          /* @__PURE__ */ jsx("span", { style: { color: "var(--md-primary)" }, children: "." })
+        ]
+      }
+    ),
+    config.tagline ? /* @__PURE__ */ jsx(
+      "p",
+      {
+        style: {
+          margin: "1rem 0 0",
+          fontSize: "1.05rem",
+          color: "var(--md-on-surface-variant)",
+          maxWidth: "44ch"
+        },
+        children: config.tagline
+      }
+    ) : null,
+    config.voice && config.voice.length > 0 ? /* @__PURE__ */ jsxs("div", { style: { marginTop: "2.5rem" }, children: [
+      /* @__PURE__ */ jsx("p", { style: { ...eyebrow5, fontSize: "0.7rem", letterSpacing: "0.16em" }, children: "Voice" }),
+      /* @__PURE__ */ jsx(
+        "ul",
+        {
+          style: {
+            margin: "0.75rem 0 0",
+            padding: 0,
+            listStyle: "none",
+            display: "grid",
+            gap: "0.5rem"
+          },
+          children: config.voice.map((v) => /* @__PURE__ */ jsx(
+            "li",
+            {
+              style: {
+                color: "var(--md-on-surface)",
+                fontFamily: "var(--bs-mono)",
+                fontSize: "0.92rem"
+              },
+              children: v
+            },
+            v
+          ))
+        }
+      )
+    ] }) : null
+  ] });
+}
+function TypographySection({ config }) {
+  const sans = config.type.sans;
+  const mono2 = config.type.mono;
+  return /* @__PURE__ */ jsxs("section", { children: [
+    /* @__PURE__ */ jsxs("header", { children: [
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          style: {
+            fontFamily: "var(--bs-mono)",
+            fontSize: "0.72rem",
+            letterSpacing: "0.18em",
+            textTransform: "uppercase",
+            color: "var(--md-primary)",
+            margin: 0
+          },
+          children: "Typography"
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "h2",
+        {
+          style: {
+            fontSize: "clamp(1.5rem, 3vw, 2.25rem)",
+            letterSpacing: "-0.02em",
+            margin: "0.4rem 0 0",
+            fontWeight: 600,
+            color: "var(--md-on-surface)"
+          },
+          children: [
+            sans,
+            mono2 ? ` + ${mono2}` : null
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { marginTop: "2.5rem", display: "grid", gap: "2rem" }, children: [
+      /* @__PURE__ */ jsx(Card, { label: "Display \xB7 72/1.05 \xB7 -0.025em", children: /* @__PURE__ */ jsxs(
+        "p",
+        {
+          style: {
+            fontFamily: sans,
+            fontSize: "4.5rem",
+            fontWeight: 600,
+            letterSpacing: "-0.025em",
+            lineHeight: 1.05,
+            margin: 0,
+            color: "var(--md-on-surface)"
+          },
+          children: [
+            config.name,
+            /* @__PURE__ */ jsx("span", { style: { color: "var(--md-primary)" }, children: "." })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Card, { label: "Headings", children: /* @__PURE__ */ jsx("div", { style: { display: "grid", gap: "0.75rem" }, children: [
+        { size: "3rem", label: "h1 \xB7 48" },
+        { size: "2.25rem", label: "h2 \xB7 36" },
+        { size: "1.5rem", label: "h3 \xB7 24" },
+        { size: "1.125rem", label: "h4 \xB7 18" }
+      ].map((h) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: "1.5rem" }, children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontFamily: "var(--bs-mono)",
+              fontSize: "0.7rem",
+              color: "var(--md-on-surface-variant)",
+              minWidth: "5rem"
+            },
+            children: h.label
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontFamily: sans,
+              fontSize: h.size,
+              fontWeight: 600,
+              letterSpacing: "-0.015em",
+              color: "var(--md-on-surface)"
+            },
+            children: "The quick brown fox jumps."
+          }
+        )
+      ] }, h.label)) }) }),
+      /* @__PURE__ */ jsx(Card, { label: "Body \xB7 16/1.55", children: /* @__PURE__ */ jsx(
+        "p",
+        {
+          style: {
+            fontFamily: sans,
+            fontSize: "1rem",
+            lineHeight: 1.55,
+            color: "var(--md-on-surface)",
+            maxWidth: "62ch",
+            margin: 0
+          },
+          children: "Pack my box with five dozen liquor jugs. The quick brown fox jumps over the lazy dog, then waltzes back to set the body copy at a comfortable measure for sustained reading."
+        }
+      ) }),
+      mono2 ? /* @__PURE__ */ jsx(Card, { label: `Mono \xB7 ${mono2} \xB7 captions, eyebrows`, children: /* @__PURE__ */ jsx(
+        "p",
+        {
+          style: {
+            fontFamily: mono2,
+            fontSize: "0.9rem",
+            letterSpacing: "0.04em",
+            color: "var(--md-on-surface-variant)",
+            margin: 0
+          },
+          children: "const scheme = generateScheme({ seed })"
+        }
+      ) }) : null
+    ] })
+  ] });
+}
+function Card({ label, children }) {
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      style: {
+        padding: "2rem",
+        borderRadius: "0.75rem",
+        border: "1px solid var(--md-outline-variant)",
+        background: "var(--md-surface-container-low)"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            style: {
+              margin: "0 0 1rem",
+              fontFamily: "var(--bs-mono)",
+              fontSize: "0.7rem",
+              letterSpacing: "0.16em",
+              textTransform: "uppercase",
+              color: "var(--md-primary)"
+            },
+            children: label
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function resolveSection(route) {
+  const head = route?.[0];
+  switch (head) {
+    case BrandStudioSection.Logo:
+    case BrandStudioSection.Colors:
+    case BrandStudioSection.Typography:
+    case BrandStudioSection.Icons:
+    case BrandStudioSection.Motion:
+    case BrandStudioSection.Download:
+      return head;
+    default:
+      return BrandStudioSection.Overview;
+  }
+}
+function BrandStudio({
+  config,
+  route,
+  basePath = "/brand",
+  staticLogo,
+  staticLogoDark,
+  animatedLogo,
+  icons
+}) {
+  const section = resolveSection(route);
+  const scheme = config.scheme ?? generateScheme(config.color);
+  const cssText = schemeToCssText(scheme, {
+    lightSelector: "[data-brand-studio]",
+    darkSelector: ".dark [data-brand-studio], [data-brand-studio].dark"
+  });
+  const link = ({
+    href,
+    children,
+    isActive
+  }) => /* @__PURE__ */ jsx(
+    "a",
+    {
+      href,
+      style: {
+        color: isActive ? "var(--md-primary)" : "var(--md-on-surface-variant)",
+        textDecoration: "none",
+        fontWeight: isActive ? 600 : 400,
+        borderBottom: isActive ? "2px solid var(--md-primary)" : "2px solid transparent",
+        paddingBottom: "0.4rem"
+      },
+      children
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "main",
+    {
+      "data-brand-studio": "",
+      style: {
+        maxWidth: "72rem",
+        margin: "0 auto",
+        padding: "4rem 1.5rem 6rem",
+        fontFamily: `var(--bs-sans, ${config.type.sans})`,
+        color: "var(--md-on-surface)",
+        ["--bs-sans"]: config.type.sans,
+        ["--bs-mono"]: config.type.mono ?? "ui-monospace, monospace",
+        ["--bs-serif"]: config.type.serif ?? "Georgia, serif",
+        ["--bs-border"]: "var(--md-outline-variant)"
+      },
+      children: [
+        /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: cssText } }),
+        /* @__PURE__ */ jsx(Navigation, { current: section, basePath, renderLink: link }),
+        /* @__PURE__ */ jsxs("div", { style: { marginTop: "3rem" }, children: [
+          section === BrandStudioSection.Overview && /* @__PURE__ */ jsx(OverviewSection, { config }),
+          section === BrandStudioSection.Logo && /* @__PURE__ */ jsx(LogoSection, { config, staticLogo, animatedLogo }),
+          section === BrandStudioSection.Colors && /* @__PURE__ */ jsx(ColorsSection, { scheme }),
+          section === BrandStudioSection.Typography && /* @__PURE__ */ jsx(TypographySection, { config }),
+          section === BrandStudioSection.Icons && /* @__PURE__ */ jsx(IconsSection, { staticLogo, icons }),
+          section === BrandStudioSection.Motion && /* @__PURE__ */ jsx(MotionPlaygroundSection, { animatedLogo, staticLogo }),
+          section === BrandStudioSection.Download && /* @__PURE__ */ jsx(
+            DownloadSection,
+            {
+              config,
+              staticLogo,
+              staticLogoDark
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "footer",
+          {
+            style: {
+              marginTop: "5rem",
+              paddingTop: "1.5rem",
+              borderTop: "1px solid var(--md-outline-variant)",
+              fontFamily: "var(--bs-mono)",
+              fontSize: "0.72rem",
+              color: "var(--md-on-surface-variant)",
+              display: "flex",
+              flexWrap: "wrap",
+              gap: "1.5rem",
+              justifyContent: "space-between"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("span", { children: [
+                "Powered by ",
+                /* @__PURE__ */ jsx("span", { style: { color: "var(--md-primary)" }, children: "@021.is/brand-studio" })
+              ] }),
+              config.operator ? /* @__PURE__ */ jsx("span", { children: config.operator }) : null,
+              config.domain ? /* @__PURE__ */ jsx("span", { children: config.domain }) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { BrandStudio, Navigation, buildNavigation };