@petrarca/sonnet-playground 0.1.6 → 0.3.0

package/dist/{chunk-CYNK2P2Q.js → chunk-7IBZEHLI.js}

@@ -1,6 +1,6 @@
 import {
   PlaygroundSection
-} from "./chunk-FTN2A5YL.js";
+} from "./chunk-C2EZ2ECG.js";
 
 // src/pages/PlayTypography.tsx
 import { Separator } from "@petrarca/sonnet-ui";
@@ -29,10 +29,10 @@ function ColorSwatch({
   ] });
 }
 function PlayTypography() {
-  return /* @__PURE__ */ jsxs("div", { className: "w-full py-12 px-4 max-w-4xl space-y-12", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "w-full max-w-4xl space-y-6", children: [
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("h1", { children: "Typography" }),
-      /* @__PURE__ */ jsxs("p", { className: "text-base text-muted-foreground mt-1 text-balance", children: [
+      /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground mt-1 text-balance", children: [
         "Living style-guide for the typography system. Every specimen uses the sanctioned classes from",
         " ",
         /* @__PURE__ */ jsx("code", { className: "text-xs font-mono bg-muted px-1.5 py-0.5 rounded", children: "docs/design/typography.md" }),
@@ -123,11 +123,11 @@ function PlayTypography() {
         description: "Named utility classes mapped to HTML heading elements via the base layer.",
         children: /* @__PURE__ */ jsxs("div", { className: "space-y-4 border rounded-md p-6 bg-card", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ jsx("code", { className: "text-xs font-mono text-faint-foreground", children: "h1 / .heading-page \u2014 text-2xl font-semibold tracking-tight" }),
+            /* @__PURE__ */ jsx("code", { className: "text-xs font-mono text-faint-foreground", children: "h1 / .heading-page \u2014 text-xl font-semibold tracking-tight" }),
             /* @__PURE__ */ jsx("h1", { children: "Page Title" })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ jsx("code", { className: "text-xs font-mono text-faint-foreground", children: "h2 / .heading-section \u2014 text-xl font-semibold" }),
+            /* @__PURE__ */ jsx("code", { className: "text-xs font-mono text-faint-foreground", children: "h2 / .heading-section \u2014 text-base font-semibold" }),
             /* @__PURE__ */ jsx("h2", { children: "Section Heading" })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
@@ -378,25 +378,26 @@ function PlayTypography() {
       PlaygroundSection,
       {
         title: "Font Rendering",
-        description: "Antialiased rendering is applied globally via the body class.",
+        description: "Apply antialiased manually where needed \u2014 it is not set globally on body.",
         children: /* @__PURE__ */ jsxs("div", { className: "space-y-2 text-sm", children: [
           /* @__PURE__ */ jsxs("p", { children: [
             "The",
             " ",
             /* @__PURE__ */ jsx("code", { className: "font-mono text-xs bg-muted px-1 py-0.5 rounded", children: "antialiased" }),
             " ",
-            "class on",
-            " ",
-            /* @__PURE__ */ jsx("code", { className: "font-mono text-xs bg-muted px-1 py-0.5 rounded", children: "<body>" }),
-            " ",
-            "enables",
+            "utility enables",
             " ",
             /* @__PURE__ */ jsx("code", { className: "font-mono text-xs bg-muted px-1 py-0.5 rounded", children: "-webkit-font-smoothing: antialiased" }),
             " ",
             "and",
             " ",
             /* @__PURE__ */ jsx("code", { className: "font-mono text-xs bg-muted px-1 py-0.5 rounded", children: "-moz-osx-font-smoothing: grayscale" }),
-            "."
+            ". It is ",
+            /* @__PURE__ */ jsx("strong", { children: "not" }),
+            " applied globally in",
+            " ",
+            /* @__PURE__ */ jsx("code", { className: "font-mono text-xs bg-muted px-1 py-0.5 rounded", children: "styles.css" }),
+            "; add it explicitly to elements where thinner rendering is desired."
           ] }),
           /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "This makes text render thinner and crisper, matching the look of polished dashboard UIs like Supabase and shadcn/ui." })
         ] })
@@ -408,4 +409,4 @@ function PlayTypography() {
 export {
   PlayTypography
 };
-//# sourceMappingURL=chunk-CYNK2P2Q.js.map
+//# sourceMappingURL=chunk-7IBZEHLI.js.map

package/dist/chunk-7IBZEHLI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pages/PlayTypography.tsx"],"sourcesContent":["// Typography Playground\n//\n// Living style-guide for the typography system defined in\n// docs/design/typography.md. Every specimen uses the sanctioned\n// classes so it doubles as a visual regression surface.\nimport React from \"react\";\nimport { Separator } from \"@petrarca/sonnet-ui\";\nimport { PlaygroundSection as Section } from \"../PlaygroundSection\";\n\nfunction Specimen({\n  label,\n  className,\n  text,\n}: {\n  label: string;\n  className: string;\n  text?: string;\n}) {\n  return (\n    <div className=\"flex flex-col gap-1\">\n      <code className=\"text-xs font-mono text-faint-foreground\">{label}</code>\n      <p className={className}>\n        {text ?? \"The quick brown fox jumps over the lazy dog\"}\n      </p>\n    </div>\n  );\n}\n\nfunction ColorSwatch({\n  name,\n  className,\n  cssVar,\n}: {\n  name: string;\n  className: string;\n  cssVar: string;\n}) {\n  return (\n    <div className=\"flex items-center gap-3\">\n      <span className={`${className} text-sm`}>\n        {name}: The quick brown fox jumps over the lazy dog\n      </span>\n      <code className=\"text-xs font-mono text-faint-foreground ml-auto shrink-0\">\n        {cssVar}\n      </code>\n    </div>\n  );\n}\n\nexport default function PlayTypography(): React.ReactElement {\n  return (\n    <div className=\"w-full max-w-4xl space-y-6\">\n      {/* ── Page header ──────────────────────────────────────────── */}\n      <div>\n        <h1>Typography</h1>\n        <p className=\"text-sm text-muted-foreground mt-1 text-balance\">\n          Living style-guide for the typography system. Every specimen uses the\n          sanctioned classes from{\" \"}\n          <code className=\"text-xs font-mono bg-muted px-1.5 py-0.5 rounded\">\n            docs/design/typography.md\n          </code>\n          .\n        </p>\n      </div>\n\n      <Separator />\n\n      {/* ── 1. Font Families ─────────────────────────────────────── */}\n      <Section\n        title=\"Font Families\"\n        description=\"Inter (sans) for UI, JetBrains Mono (mono) for code and data IDs.\"\n      >\n        <div className=\"space-y-3\">\n          <Specimen label=\"font-sans (Inter)\" className=\"font-sans text-base\" />\n          <Specimen\n            label=\"font-mono (JetBrains Mono)\"\n            className=\"font-mono text-base\"\n          />\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* ── 2. Type Scale ────────────────────────────────────────── */}\n      <Section\n        title=\"Type Scale\"\n        description=\"Sanctioned sizes from text-xs (12px) to text-3xl (30px).\"\n      >\n        <div className=\"space-y-4\">\n          <Specimen label=\"text-3xl — 30px\" className=\"text-3xl\" />\n          <Specimen label=\"text-2xl — 24px\" className=\"text-2xl\" />\n          <Specimen label=\"text-xl — 20px\" className=\"text-xl\" />\n          <Specimen label=\"text-lg — 18px\" className=\"text-lg\" />\n          <Specimen label=\"text-base — 16px\" className=\"text-base\" />\n          <Specimen label=\"text-sm — 14px (workhorse)\" className=\"text-sm\" />\n          <Specimen label=\"text-xs — 12px\" className=\"text-xs\" />\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* ── 3. Font Weights ──────────────────────────────────────── */}\n      <Section\n        title=\"Font Weights\"\n        description=\"Three sanctioned weights. font-bold (700) and above are prohibited.\"\n      >\n        <div className=\"space-y-3\">\n          <Specimen\n            label=\"font-normal (400) — body text, paragraphs\"\n            className=\"text-base font-normal\"\n          />\n          <Specimen\n            label=\"font-medium (500) — labels, buttons, interactive elements\"\n            className=\"text-base font-medium\"\n          />\n          <Specimen\n            label=\"font-semibold (600) — headings, card titles (max weight)\"\n            className=\"text-base font-semibold\"\n          />\n        </div>\n\n        <div className=\"mt-4 p-3 border border-destructive/20 bg-destructive/5 rounded-md\">\n          <p className=\"text-sm text-destructive font-medium\">\n            Prohibited weights\n          </p>\n          <div className=\"flex gap-6 mt-2\">\n            <span className=\"text-sm text-muted-foreground line-through\">\n              font-bold (700)\n            </span>\n            <span className=\"text-sm text-muted-foreground line-through\">\n              font-extrabold (800)\n            </span>\n            <span className=\"text-sm text-muted-foreground line-through\">\n              font-black (900)\n            </span>\n          </div>\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* ── 4. Heading Hierarchy ─────────────────────────────────── */}\n      <Section\n        title=\"Heading Hierarchy\"\n        description=\"Named utility classes mapped to HTML heading elements via the base layer.\"\n      >\n        <div className=\"space-y-4 border rounded-md p-6 bg-card\">\n          <div className=\"flex flex-col gap-1\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              h1 / .heading-page — text-xl font-semibold tracking-tight\n            </code>\n            <h1>Page Title</h1>\n          </div>\n\n          <div className=\"flex flex-col gap-1\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              h2 / .heading-section — text-base font-semibold\n            </code>\n            <h2>Section Heading</h2>\n          </div>\n\n          <div className=\"flex flex-col gap-1\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              h3 / .heading-sub — text-base font-medium\n            </code>\n            <h3>Subsection Heading</h3>\n          </div>\n\n          <div className=\"flex flex-col gap-1\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              h4 / .heading-component — text-sm font-medium\n            </code>\n            <h4>Component Heading</h4>\n          </div>\n\n          <div className=\"flex flex-col gap-1\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              h6 / .heading-compact — text-xs font-medium\n            </code>\n            <h6>Compact Heading</h6>\n          </div>\n\n          <div className=\"flex flex-col gap-1\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              .heading-meta — text-xs font-medium font-mono uppercase\n              tracking-wider\n            </code>\n            <div className=\"heading-meta\">Meta Heading</div>\n          </div>\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* ── 5. Text Color Hierarchy ──────────────────────────────── */}\n      <Section\n        title=\"Text Color Hierarchy\"\n        description=\"Three semantic tiers. Never use hardcoded grays (text-gray-*, text-slate-*).\"\n      >\n        <div className=\"space-y-3 border rounded-md p-6 bg-card\">\n          <ColorSwatch\n            name=\"foreground\"\n            className=\"text-foreground\"\n            cssVar=\"--foreground\"\n          />\n          <ColorSwatch\n            name=\"muted-foreground\"\n            className=\"text-muted-foreground\"\n            cssVar=\"--muted-foreground\"\n          />\n          <ColorSwatch\n            name=\"faint-foreground\"\n            className=\"text-faint-foreground\"\n            cssVar=\"--faint-foreground\"\n          />\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* ── 6. Line Height & Letter Spacing ──────────────────────── */}\n      <Section\n        title=\"Line Height & Letter Spacing\"\n        description=\"Sanctioned line-height and tracking classes.\"\n      >\n        <div className=\"space-y-4\">\n          <Specimen\n            label=\"leading-none (1.0) — compact labels, card titles\"\n            className=\"text-sm leading-none\"\n          />\n          <Specimen label=\"default — most text\" className=\"text-sm\" />\n          <Specimen\n            label=\"leading-relaxed (1.625) — multi-line descriptions\"\n            className=\"text-sm leading-relaxed\"\n            text=\"This is a longer paragraph to demonstrate relaxed line height. It should feel airy and comfortable to read, especially in descriptions and body content that spans multiple lines.\"\n          />\n          <Specimen\n            label=\"tracking-tight (-0.025em) — headings\"\n            className=\"text-2xl font-semibold tracking-tight\"\n            text=\"Page Title With Tracking\"\n          />\n          <Specimen\n            label=\"tracking-wider (0.05em) — meta headings\"\n            className=\"heading-meta\"\n            text=\"Category Label\"\n          />\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* ── 7. Numeric Typography ────────────────────────────────── */}\n      <Section\n        title=\"Numeric Typography\"\n        description=\"tabular-nums for aligned digits. font-mono for IDs and codes.\"\n      >\n        <div className=\"grid grid-cols-2 gap-6\">\n          <div className=\"space-y-2 border rounded-md p-4 bg-card\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              Without tabular-nums\n            </code>\n            <div className=\"space-y-0.5\">\n              <p className=\"text-2xl font-semibold\">1,111</p>\n              <p className=\"text-2xl font-semibold\">8,888</p>\n              <p className=\"text-2xl font-semibold\">42.7%</p>\n            </div>\n          </div>\n          <div className=\"space-y-2 border rounded-md p-4 bg-card\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              With tabular-nums\n            </code>\n            <div className=\"space-y-0.5\">\n              <p className=\"text-2xl font-semibold tabular-nums\">1,111</p>\n              <p className=\"text-2xl font-semibold tabular-nums\">8,888</p>\n              <p className=\"text-2xl font-semibold tabular-nums\">42.7%</p>\n            </div>\n          </div>\n        </div>\n\n        <div className=\"mt-4 space-y-2\">\n          <code className=\"text-xs font-mono text-faint-foreground\">\n            font-mono for IDs and codes\n          </code>\n          <div className=\"space-y-1\">\n            <p className=\"text-xs font-mono text-muted-foreground\">\n              ent_a1b2c3d4e5f6\n            </p>\n            <p className=\"text-xs font-mono text-muted-foreground\">\n              sk_live_51O2jK2eZvKYlo2C0\n            </p>\n            <p className=\"text-xs font-mono text-muted-foreground\">\n              sha256:9f86d081884c7d659a2feaa0\n            </p>\n          </div>\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* ── 8. Text Overflow ─────────────────────────────────────── */}\n      <Section\n        title=\"Text Overflow Handling\"\n        description=\"Patterns for dynamic content that can exceed its container.\"\n      >\n        <div className=\"space-y-4\">\n          <div className=\"space-y-1\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              truncate — single-line ellipsis\n            </code>\n            <p className=\"text-sm truncate max-w-xs border rounded px-2 py-1\">\n              This is a very long sidebar item name that will definitely\n              overflow its container and needs to be truncated with an ellipsis\n            </p>\n          </div>\n\n          <div className=\"space-y-1\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              line-clamp-2 — multi-line clamp\n            </code>\n            <p className=\"text-sm line-clamp-2 max-w-sm border rounded px-2 py-1\">\n              This is a card description that can span multiple lines. It will\n              be clamped to exactly two lines. Any content beyond two lines will\n              be hidden and replaced with an ellipsis. This sentence should be\n              hidden.\n            </p>\n          </div>\n\n          <div className=\"space-y-1\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              whitespace-nowrap — prevent wrapping (buttons, badges)\n            </code>\n            <span className=\"text-sm whitespace-nowrap border rounded px-2 py-1 inline-block\">\n              Badge text that never wraps\n            </span>\n          </div>\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* ── 9. Component Patterns ────────────────────────────────── */}\n      <Section\n        title=\"Component Typography Patterns\"\n        description=\"Standard text treatments for common UI components.\"\n      >\n        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n          {/* Card pattern */}\n          <div className=\"border rounded-lg p-4 bg-card space-y-1.5\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              Card\n            </code>\n            <p className=\"text-lg font-semibold leading-none tracking-tight\">\n              Card Title\n            </p>\n            <p className=\"text-sm text-muted-foreground\">\n              Card description with muted foreground color.\n            </p>\n            <p className=\"text-2xl font-semibold tabular-nums mt-2\">$12,345</p>\n            <p className=\"text-xs text-muted-foreground\">\n              +20.1% from last month\n            </p>\n          </div>\n\n          {/* Dialog pattern */}\n          <div className=\"border rounded-lg p-4 bg-card space-y-1.5\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              Dialog\n            </code>\n            <p className=\"text-lg font-semibold leading-none tracking-tight\">\n              Dialog Title\n            </p>\n            <p className=\"text-sm text-muted-foreground\">\n              Dialog description providing context for the action.\n            </p>\n          </div>\n\n          {/* Button / Label pattern */}\n          <div className=\"border rounded-lg p-4 bg-card space-y-3\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              Interactive Elements\n            </code>\n            <div className=\"space-y-1\">\n              <p className=\"text-sm font-medium leading-none\">Form Label</p>\n              <p className=\"text-sm text-muted-foreground\">\n                Help text for the field.\n              </p>\n            </div>\n            <div className=\"flex gap-2\">\n              <span className=\"text-sm font-medium bg-primary text-primary-foreground rounded-md px-3 py-1.5\">\n                Button\n              </span>\n              <span className=\"text-xs font-medium bg-secondary text-secondary-foreground rounded-full px-2.5 py-0.5\">\n                Badge\n              </span>\n            </div>\n          </div>\n\n          {/* Table pattern */}\n          <div className=\"border rounded-lg p-4 bg-card space-y-2\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              Table\n            </code>\n            <table className=\"w-full text-sm\">\n              <thead>\n                <tr className=\"border-b\">\n                  <th className=\"text-left font-medium text-foreground py-1\">\n                    Name\n                  </th>\n                  <th className=\"text-right font-medium text-foreground py-1\">\n                    Count\n                  </th>\n                </tr>\n              </thead>\n              <tbody>\n                <tr className=\"border-b\">\n                  <td className=\"py-1\">Entities</td>\n                  <td className=\"text-right tabular-nums\">1,234</td>\n                </tr>\n                <tr className=\"border-b\">\n                  <td className=\"py-1\">Relations</td>\n                  <td className=\"text-right tabular-nums\">567</td>\n                </tr>\n                <tr>\n                  <td className=\"py-1\">Schemas</td>\n                  <td className=\"text-right tabular-nums\">89</td>\n                </tr>\n              </tbody>\n            </table>\n          </div>\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* ── 10. Responsive Typography ────────────────────────────── */}\n      <Section\n        title=\"Responsive Typography\"\n        description=\"Patterns that adapt to viewport size.\"\n      >\n        <div className=\"space-y-3\">\n          <Specimen\n            label=\"Responsive heading: text-xl md:text-2xl\"\n            className=\"text-xl md:text-2xl font-semibold tracking-tight\"\n            text=\"This heading scales up on wider viewports\"\n          />\n          <Specimen\n            label=\"Responsive input: text-base md:text-sm (prevents iOS zoom)\"\n            className=\"text-base md:text-sm border rounded px-2 py-1\"\n            text=\"Input text that's 16px on mobile, 14px on desktop\"\n          />\n          <Specimen\n            label=\"text-balance — prevents orphaned words\"\n            className=\"text-2xl font-semibold tracking-tight text-balance max-w-sm\"\n            text=\"This heading uses text-balance for better line breaks\"\n          />\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* ── 11. Font Rendering ───────────────────────────────────── */}\n      <Section\n        title=\"Font Rendering\"\n        description=\"Apply antialiased manually where needed — it is not set globally on body.\"\n      >\n        <div className=\"space-y-2 text-sm\">\n          <p>\n            The{\" \"}\n            <code className=\"font-mono text-xs bg-muted px-1 py-0.5 rounded\">\n              antialiased\n            </code>{\" \"}\n            utility enables{\" \"}\n            <code className=\"font-mono text-xs bg-muted px-1 py-0.5 rounded\">\n              -webkit-font-smoothing: antialiased\n            </code>{\" \"}\n            and{\" \"}\n            <code className=\"font-mono text-xs bg-muted px-1 py-0.5 rounded\">\n              -moz-osx-font-smoothing: grayscale\n            </code>\n            . It is <strong>not</strong> applied globally in{\" \"}\n            <code className=\"font-mono text-xs bg-muted px-1 py-0.5 rounded\">\n              styles.css\n            </code>\n            ; add it explicitly to elements where thinner rendering is desired.\n          </p>\n          <p className=\"text-muted-foreground\">\n            This makes text render thinner and crisper, matching the look of\n            polished dashboard UIs like Supabase and shadcn/ui.\n          </p>\n        </div>\n      </Section>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-C2EZ2ECG.js

@@ -0,0 +1,40 @@
+// src/PlaygroundSection.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ExampleBlock({
+  label,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-md border bg-muted/30 p-4", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-[10px] font-semibold text-muted-foreground uppercase tracking-widest mb-3", children: label }),
+    children
+  ] });
+}
+function PlaygroundSection({
+  title,
+  description,
+  children,
+  variant = "default"
+}) {
+  if (variant === "card") {
+    return /* @__PURE__ */ jsxs("section", { className: "bg-card rounded-lg border p-4 space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h2", { className: "mb-1", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description })
+      ] }),
+      children
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("section", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h2", { children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-0.5", children: description })
+    ] }),
+    children
+  ] });
+}
+
+export {
+  ExampleBlock,
+  PlaygroundSection
+};
+//# sourceMappingURL=chunk-C2EZ2ECG.js.map

package/dist/chunk-C2EZ2ECG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/PlaygroundSection.tsx"],"sourcesContent":["/**\n * Shared section wrapper for playground pages.\n *\n * variant=\"default\" — bare section with space-y-4, used for full-width\n *   pages like Shell API and Graph that manage their own layout.\n *\n * variant=\"card\" — elevated card section with border, used for component\n *   showcase pages (Core, Advanced) where each section is visually contained.\n */\nimport React from \"react\";\n\ninterface PlaygroundSectionProps {\n  title: string;\n  description?: string;\n  children: React.ReactNode;\n  variant?: \"default\" | \"card\";\n}\n\ninterface ExampleBlockProps {\n  label: string;\n  children: React.ReactNode;\n}\n\n/** Labeled divider wrapper for individual component examples within a section. */\nexport function ExampleBlock({\n  label,\n  children,\n}: ExampleBlockProps): React.ReactElement {\n  return (\n    <div className=\"rounded-md border bg-muted/30 p-4\">\n      <p className=\"text-[10px] font-semibold text-muted-foreground uppercase tracking-widest mb-3\">\n        {label}\n      </p>\n      {children}\n    </div>\n  );\n}\n\n/** Titled section wrapper used across playground pages. */\nexport function PlaygroundSection({\n  title,\n  description,\n  children,\n  variant = \"default\",\n}: PlaygroundSectionProps): React.ReactElement {\n  if (variant === \"card\") {\n    return (\n      <section className=\"bg-card rounded-lg border p-4 space-y-4\">\n        <div>\n          <h2 className=\"mb-1\">{title}</h2>\n          {description && (\n            <p className=\"text-sm text-muted-foreground\">{description}</p>\n          )}\n        </div>\n        {children}\n      </section>\n    );\n  }\n\n  return (\n    <section className=\"space-y-2\">\n      <div>\n        <h2>{title}</h2>\n        {description && (\n          <p className=\"text-sm text-muted-foreground mt-0.5\">{description}</p>\n        )}\n      </div>\n      {children}\n    </section>\n  );\n}\n"],"mappings":";AA6BI,SACE,KADF;AALG,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AACF,GAA0C;AACxC,SACE,qBAAC,SAAI,WAAU,qCACb;AAAA,wBAAC,OAAE,WAAU,kFACV,iBACH;AAAA,IACC;AAAA,KACH;AAEJ;AAGO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AACZ,GAA+C;AAC7C,MAAI,YAAY,QAAQ;AACtB,WACE,qBAAC,aAAQ,WAAU,2CACjB;AAAA,2BAAC,SACC;AAAA,4BAAC,QAAG,WAAU,QAAQ,iBAAM;AAAA,QAC3B,eACC,oBAAC,OAAE,WAAU,iCAAiC,uBAAY;AAAA,SAE9D;AAAA,MACC;AAAA,OACH;AAAA,EAEJ;AAEA,SACE,qBAAC,aAAQ,WAAU,aACjB;AAAA,yBAAC,SACC;AAAA,0BAAC,QAAI,iBAAM;AAAA,MACV,eACC,oBAAC,OAAE,WAAU,wCAAwC,uBAAY;AAAA,OAErE;AAAA,IACC;AAAA,KACH;AAEJ;","names":[]}

package/dist/{chunk-A3IK3CVW.js → chunk-DA3BIB5N.js}

@@ -1,6 +1,6 @@
 import {
   PlaygroundSection
-} from "./chunk-FTN2A5YL.js";
+} from "./chunk-C2EZ2ECG.js";
 
 // src/pages/PlayColorPalette.tsx
 import { Separator, Badge } from "@petrarca/sonnet-ui";
@@ -31,32 +31,31 @@ function PaletteRow({
     ] }, shade)) })
   ] });
 }
-var BADGE_COLORS = [
-  "teal",
-  "indigo",
-  "blue",
-  "violet",
-  "grape",
-  "cyan",
-  "green",
-  "orange",
-  "yellow",
-  "red",
-  "pink"
-];
-var ICON_COLORS = [
-  { name: "teal", bg: "bg-teal-100", fg: "text-teal-600" },
-  { name: "violet", bg: "bg-violet-100", fg: "text-violet-600" },
-  { name: "indigo", bg: "bg-indigo-100", fg: "text-indigo-600" },
-  { name: "blue", bg: "bg-blue-100", fg: "text-blue-600" },
-  { name: "grape", bg: "bg-purple-100", fg: "text-purple-600" },
-  { name: "amber", bg: "bg-amber-100", fg: "text-amber-600" }
+var COLOR_REGISTRY = [
+  { name: "teal", tailwind: "teal", badge: true, icon: true },
+  { name: "indigo", tailwind: "indigo", badge: true, icon: true },
+  { name: "blue", tailwind: "blue", badge: true, icon: true },
+  { name: "violet", tailwind: "violet", badge: true, icon: true },
+  { name: "grape", tailwind: "purple", badge: true, icon: true },
+  { name: "cyan", tailwind: "cyan", badge: true, icon: false },
+  { name: "green", tailwind: "green", badge: true, icon: false },
+  { name: "orange", tailwind: "orange", badge: true, icon: false },
+  { name: "yellow", tailwind: "yellow", badge: true, icon: false },
+  { name: "red", tailwind: "red", badge: true, icon: false },
+  { name: "pink", tailwind: "pink", badge: true, icon: false },
+  { name: "amber", tailwind: "amber", badge: false, icon: true }
 ];
+var BADGE_COLORS = COLOR_REGISTRY.filter((c) => c.badge);
+var ICON_COLORS = COLOR_REGISTRY.filter((c) => c.icon).map((c) => ({
+  name: c.name,
+  bg: `bg-${c.tailwind}-100`,
+  fg: `text-${c.tailwind}-600`
+}));
 function PlayColorPalette() {
-  return /* @__PURE__ */ jsxs("div", { className: "w-full py-12 px-4 max-w-4xl space-y-12", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "w-full max-w-4xl space-y-6", children: [
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("h1", { children: "Color Palette" }),
-      /* @__PURE__ */ jsx("p", { className: "text-base text-muted-foreground mt-1 text-balance", children: "Living reference for the color system. Semantic tokens, extended palette, badge colors, icon accents, and usage guidance." })
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1 text-balance", children: "Living reference for the color system. Semantic tokens, extended palette, badge colors, icon accents, and usage guidance." })
     ] }),
     /* @__PURE__ */ jsx(Separator, {}),
     /* @__PURE__ */ jsx(
@@ -147,7 +146,7 @@ function PlayColorPalette() {
       {
         title: "Badge Colors",
         description: "All valid badgeColor variants on the Badge component. Note: amber has no badge variant \u2014 use orange for a warm inactive state.",
-        children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 border rounded-md p-6 bg-card", children: BADGE_COLORS.map((color) => /* @__PURE__ */ jsx(Badge, { badgeColor: color, children: color }, color)) })
+        children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 border rounded-md p-6 bg-card", children: BADGE_COLORS.map(({ name }) => /* @__PURE__ */ jsx(Badge, { badgeColor: name, children: name }, name)) })
       }
     ),
     /* @__PURE__ */ jsx(Separator, {}),
@@ -209,4 +208,4 @@ function PlayColorPalette() {
 export {
   PlayColorPalette
 };
-//# sourceMappingURL=chunk-A3IK3CVW.js.map
+//# sourceMappingURL=chunk-DA3BIB5N.js.map

package/dist/{chunk-A3IK3CVW.js.map → chunk-DA3BIB5N.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/pages/PlayColorPalette.tsx"],"sourcesContent":["// Color Palette Playground\n//\n// Living reference for the color system. Shows semantic design tokens,\n// the extended badge color palette, and usage guidance.\nimport React from \"react\";\nimport { Separator, Badge } from \"@petrarca/sonnet-ui\";\nimport { PlaygroundSection as Section } from \"../PlaygroundSection\";\n\nfunction Swatch({\n  name,\n  bgClass,\n  tailwind,\n}: {\n  name: string;\n  bgClass: string;\n  tailwind: string;\n}): React.ReactElement {\n  return (\n    <div className=\"flex items-center gap-3\">\n      <div className={`w-10 h-10 rounded-md shrink-0 ${bgClass}`} />\n      <div className=\"min-w-0\">\n        <p className=\"text-sm font-medium\">{name}</p>\n        <code className=\"text-xs font-mono text-faint-foreground\">\n          {tailwind}\n        </code>\n      </div>\n    </div>\n  );\n}\n\nfunction PaletteRow({\n  color,\n  label,\n}: {\n  color: string;\n  label?: string;\n}): React.ReactElement {\n  const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900] as const;\n  return (\n    <div className=\"space-y-1.5\">\n      <p className=\"text-xs font-mono text-faint-foreground\">\n        {label ?? color}\n      </p>\n      <div className=\"flex gap-1.5\">\n        {shades.map((shade) => (\n          <div key={shade} className=\"flex flex-col items-center gap-1\">\n            <div className={`w-10 h-10 rounded-md bg-${color}-${shade}`} />\n            <span className=\"text-[10px] font-mono text-faint-foreground\">\n              {shade}\n            </span>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\n// All valid badgeColor values on the Badge component.\nconst BADGE_COLORS = [\n  \"teal\",\n  \"indigo\",\n  \"blue\",\n  \"violet\",\n  \"grape\",\n  \"cyan\",\n  \"green\",\n  \"orange\",\n  \"yellow\",\n  \"red\",\n  \"pink\",\n] as const;\n\n// Icon accent pairings (bg-*-100 / text-*-600) used on cards and feature indicators.\nconst ICON_COLORS: { name: string; bg: string; fg: string }[] = [\n  { name: \"teal\", bg: \"bg-teal-100\", fg: \"text-teal-600\" },\n  { name: \"violet\", bg: \"bg-violet-100\", fg: \"text-violet-600\" },\n  { name: \"indigo\", bg: \"bg-indigo-100\", fg: \"text-indigo-600\" },\n  { name: \"blue\", bg: \"bg-blue-100\", fg: \"text-blue-600\" },\n  { name: \"grape\", bg: \"bg-purple-100\", fg: \"text-purple-600\" },\n  { name: \"amber\", bg: \"bg-amber-100\", fg: \"text-amber-600\" },\n];\n\n/** Color Palette playground -- living reference for the design system color tokens. */\nexport default function PlayColorPalette(): React.ReactElement {\n  return (\n    <div className=\"w-full py-12 px-4 max-w-4xl space-y-12\">\n      <div>\n        <h1>Color Palette</h1>\n        <p className=\"text-base text-muted-foreground mt-1 text-balance\">\n          Living reference for the color system. Semantic tokens, extended\n          palette, badge colors, icon accents, and usage guidance.\n        </p>\n      </div>\n\n      <Separator />\n\n      {/* Semantic design tokens */}\n      <Section\n        title=\"Semantic Tokens\"\n        description=\"CSS custom properties from index.css. These adapt to light/dark mode automatically. Never use raw Tailwind colors for surfaces or text.\"\n      >\n        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n          <div className=\"space-y-3 border rounded-md p-4 bg-card\">\n            <p className=\"heading-compact text-muted-foreground\">Surfaces</p>\n            <Swatch\n              name=\"background\"\n              bgClass=\"bg-background border\"\n              tailwind=\"bg-background\"\n            />\n            <Swatch name=\"card\" bgClass=\"bg-card border\" tailwind=\"bg-card\" />\n            <Swatch name=\"muted\" bgClass=\"bg-muted\" tailwind=\"bg-muted\" />\n            <Swatch name=\"accent\" bgClass=\"bg-accent\" tailwind=\"bg-accent\" />\n            <Swatch\n              name=\"popover\"\n              bgClass=\"bg-popover border\"\n              tailwind=\"bg-popover\"\n            />\n          </div>\n          <div className=\"space-y-3 border rounded-md p-4 bg-card\">\n            <p className=\"heading-compact text-muted-foreground\">Interactive</p>\n            <Swatch name=\"primary\" bgClass=\"bg-primary\" tailwind=\"bg-primary\" />\n            <Swatch\n              name=\"secondary\"\n              bgClass=\"bg-secondary\"\n              tailwind=\"bg-secondary\"\n            />\n            <Swatch\n              name=\"destructive\"\n              bgClass=\"bg-destructive\"\n              tailwind=\"bg-destructive\"\n            />\n            <Swatch\n              name=\"border\"\n              bgClass=\"bg-border\"\n              tailwind=\"border / bg-border\"\n            />\n            <Swatch name=\"ring\" bgClass=\"bg-ring\" tailwind=\"ring / bg-ring\" />\n          </div>\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* Extended palette */}\n      <Section\n        title=\"Extended Palette\"\n        description=\"Full shade ramps for colors used as accents, badges, and status indicators. Preferred range: 100 background, 600-800 text.\"\n      >\n        <div className=\"space-y-6 border rounded-md p-6 bg-card\">\n          <PaletteRow color=\"teal\" />\n          <PaletteRow color=\"indigo\" />\n          <PaletteRow color=\"blue\" />\n          <PaletteRow color=\"violet\" />\n          <PaletteRow color=\"purple\" label=\"purple (grape)\" />\n          <PaletteRow color=\"amber\" />\n          <PaletteRow color=\"orange\" />\n          <PaletteRow color=\"cyan\" />\n          <PaletteRow color=\"green\" />\n          <PaletteRow color=\"red\" />\n          <PaletteRow color=\"pink\" />\n          <PaletteRow color=\"yellow\" />\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* Badge colors */}\n      <Section\n        title=\"Badge Colors\"\n        description=\"All valid badgeColor variants on the Badge component. Note: amber has no badge variant — use orange for a warm inactive state.\"\n      >\n        <div className=\"flex flex-wrap gap-2 border rounded-md p-6 bg-card\">\n          {BADGE_COLORS.map((color) => (\n            <Badge key={color} badgeColor={color}>\n              {color}\n            </Badge>\n          ))}\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* Icon accent colors */}\n      <Section\n        title=\"Icon Accent Colors\"\n        description=\"The 100/600 bg/text pairings used for card icons and feature indicators. amber is only used as an icon accent, not a badge color.\"\n      >\n        <div className=\"flex flex-wrap gap-4 border rounded-md p-6 bg-card\">\n          {ICON_COLORS.map(({ name, bg, fg }) => (\n            <div key={name} className=\"flex flex-col items-center gap-2\">\n              <div\n                className={`flex items-center justify-center w-12 h-12 rounded-md ${bg} ${fg}`}\n              >\n                <span className=\"text-lg font-semibold\">Aa</span>\n              </div>\n              <span className=\"text-xs font-mono text-faint-foreground\">\n                {name}\n              </span>\n            </div>\n          ))}\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* Status mapping */}\n      <Section\n        title=\"Status Colors\"\n        description=\"Canonical badge color assignments for organization lifecycle status.\"\n      >\n        <div className=\"flex gap-3 border rounded-md p-6 bg-card\">\n          <Badge badgeColor=\"teal\">active</Badge>\n          <Badge badgeColor=\"indigo\">created</Badge>\n          <Badge badgeColor=\"orange\">inactive</Badge>\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* Usage guidance */}\n      <Section title=\"Usage Guidance\">\n        <div className=\"space-y-3 text-sm\">\n          <div className=\"border rounded-md p-4 bg-card space-y-1\">\n            <p className=\"font-medium\">\n              Use semantic tokens for surfaces and text\n            </p>\n            <p className=\"text-muted-foreground\">\n              Always use{\" \"}\n              <code className=\"text-xs font-mono bg-muted px-1 rounded\">\n                bg-background\n              </code>\n              ,{\" \"}\n              <code className=\"text-xs font-mono bg-muted px-1 rounded\">\n                bg-card\n              </code>\n              ,{\" \"}\n              <code className=\"text-xs font-mono bg-muted px-1 rounded\">\n                text-foreground\n              </code>\n              , etc. for layout surfaces and body text. Never use raw Tailwind\n              grays (text-gray-*, bg-slate-*).\n            </p>\n          </div>\n          <div className=\"border rounded-md p-4 bg-card space-y-1\">\n            <p className=\"font-medium\">Use extended palette for accents only</p>\n            <p className=\"text-muted-foreground\">\n              Badges, status indicators, and icon containers are the only\n              sanctioned uses of raw Tailwind palette colors. Stick to the\n              100/600-800 range for the muted, autumn-like feel.\n            </p>\n          </div>\n        </div>\n      </Section>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/pages/PlayColorPalette.tsx"],"sourcesContent":["// Color Palette Playground\n//\n// Living reference for the color system. Shows semantic design tokens,\n// the extended badge color palette, and usage guidance.\nimport React from \"react\";\nimport { Separator, Badge } from \"@petrarca/sonnet-ui\";\nimport { PlaygroundSection as Section } from \"../PlaygroundSection\";\n\nfunction Swatch({\n  name,\n  bgClass,\n  tailwind,\n}: {\n  name: string;\n  bgClass: string;\n  tailwind: string;\n}): React.ReactElement {\n  return (\n    <div className=\"flex items-center gap-3\">\n      <div className={`w-10 h-10 rounded-md shrink-0 ${bgClass}`} />\n      <div className=\"min-w-0\">\n        <p className=\"text-sm font-medium\">{name}</p>\n        <code className=\"text-xs font-mono text-faint-foreground\">\n          {tailwind}\n        </code>\n      </div>\n    </div>\n  );\n}\n\nfunction PaletteRow({\n  color,\n  label,\n}: {\n  color: string;\n  label?: string;\n}): React.ReactElement {\n  const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900] as const;\n  return (\n    <div className=\"space-y-1.5\">\n      <p className=\"text-xs font-mono text-faint-foreground\">\n        {label ?? color}\n      </p>\n      <div className=\"flex gap-1.5\">\n        {shades.map((shade) => (\n          <div key={shade} className=\"flex flex-col items-center gap-1\">\n            <div className={`w-10 h-10 rounded-md bg-${color}-${shade}`} />\n            <span className=\"text-[10px] font-mono text-faint-foreground\">\n              {shade}\n            </span>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\n// Single source of truth for the extended color palette.\n// badge: valid as a badgeColor prop value.\n// icon:  valid as an icon accent (bg-*-100 / text-*-600 pairing).\n// Note: amber is icon-only (no badge variant — use orange for warm inactive states).\n//       grape maps to the purple Tailwind scale.\nconst COLOR_REGISTRY = [\n  { name: \"teal\", tailwind: \"teal\", badge: true, icon: true },\n  { name: \"indigo\", tailwind: \"indigo\", badge: true, icon: true },\n  { name: \"blue\", tailwind: \"blue\", badge: true, icon: true },\n  { name: \"violet\", tailwind: \"violet\", badge: true, icon: true },\n  { name: \"grape\", tailwind: \"purple\", badge: true, icon: true },\n  { name: \"cyan\", tailwind: \"cyan\", badge: true, icon: false },\n  { name: \"green\", tailwind: \"green\", badge: true, icon: false },\n  { name: \"orange\", tailwind: \"orange\", badge: true, icon: false },\n  { name: \"yellow\", tailwind: \"yellow\", badge: true, icon: false },\n  { name: \"red\", tailwind: \"red\", badge: true, icon: false },\n  { name: \"pink\", tailwind: \"pink\", badge: true, icon: false },\n  { name: \"amber\", tailwind: \"amber\", badge: false, icon: true },\n] as const;\n\nconst BADGE_COLORS = COLOR_REGISTRY.filter((c) => c.badge);\nconst ICON_COLORS = COLOR_REGISTRY.filter((c) => c.icon).map((c) => ({\n  name: c.name,\n  bg: `bg-${c.tailwind}-100`,\n  fg: `text-${c.tailwind}-600`,\n}));\n\n/** Color Palette playground -- living reference for the design system color tokens. */\nexport default function PlayColorPalette(): React.ReactElement {\n  return (\n    <div className=\"w-full max-w-4xl space-y-6\">\n      <div>\n        <h1>Color Palette</h1>\n        <p className=\"text-sm text-muted-foreground mt-1 text-balance\">\n          Living reference for the color system. Semantic tokens, extended\n          palette, badge colors, icon accents, and usage guidance.\n        </p>\n      </div>\n\n      <Separator />\n\n      {/* Semantic design tokens */}\n      <Section\n        title=\"Semantic Tokens\"\n        description=\"CSS custom properties from index.css. These adapt to light/dark mode automatically. Never use raw Tailwind colors for surfaces or text.\"\n      >\n        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n          <div className=\"space-y-3 border rounded-md p-4 bg-card\">\n            <p className=\"heading-compact text-muted-foreground\">Surfaces</p>\n            <Swatch\n              name=\"background\"\n              bgClass=\"bg-background border\"\n              tailwind=\"bg-background\"\n            />\n            <Swatch name=\"card\" bgClass=\"bg-card border\" tailwind=\"bg-card\" />\n            <Swatch name=\"muted\" bgClass=\"bg-muted\" tailwind=\"bg-muted\" />\n            <Swatch name=\"accent\" bgClass=\"bg-accent\" tailwind=\"bg-accent\" />\n            <Swatch\n              name=\"popover\"\n              bgClass=\"bg-popover border\"\n              tailwind=\"bg-popover\"\n            />\n          </div>\n          <div className=\"space-y-3 border rounded-md p-4 bg-card\">\n            <p className=\"heading-compact text-muted-foreground\">Interactive</p>\n            <Swatch name=\"primary\" bgClass=\"bg-primary\" tailwind=\"bg-primary\" />\n            <Swatch\n              name=\"secondary\"\n              bgClass=\"bg-secondary\"\n              tailwind=\"bg-secondary\"\n            />\n            <Swatch\n              name=\"destructive\"\n              bgClass=\"bg-destructive\"\n              tailwind=\"bg-destructive\"\n            />\n            <Swatch\n              name=\"border\"\n              bgClass=\"bg-border\"\n              tailwind=\"border / bg-border\"\n            />\n            <Swatch name=\"ring\" bgClass=\"bg-ring\" tailwind=\"ring / bg-ring\" />\n          </div>\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* Extended palette */}\n      <Section\n        title=\"Extended Palette\"\n        description=\"Full shade ramps for colors used as accents, badges, and status indicators. Preferred range: 100 background, 600-800 text.\"\n      >\n        <div className=\"space-y-6 border rounded-md p-6 bg-card\">\n          <PaletteRow color=\"teal\" />\n          <PaletteRow color=\"indigo\" />\n          <PaletteRow color=\"blue\" />\n          <PaletteRow color=\"violet\" />\n          <PaletteRow color=\"purple\" label=\"purple (grape)\" />\n          <PaletteRow color=\"amber\" />\n          <PaletteRow color=\"orange\" />\n          <PaletteRow color=\"cyan\" />\n          <PaletteRow color=\"green\" />\n          <PaletteRow color=\"red\" />\n          <PaletteRow color=\"pink\" />\n          <PaletteRow color=\"yellow\" />\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* Badge colors */}\n      <Section\n        title=\"Badge Colors\"\n        description=\"All valid badgeColor variants on the Badge component. Note: amber has no badge variant — use orange for a warm inactive state.\"\n      >\n        <div className=\"flex flex-wrap gap-2 border rounded-md p-6 bg-card\">\n          {BADGE_COLORS.map(({ name }) => (\n            <Badge key={name} badgeColor={name}>\n              {name}\n            </Badge>\n          ))}\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* Icon accent colors */}\n      <Section\n        title=\"Icon Accent Colors\"\n        description=\"The 100/600 bg/text pairings used for card icons and feature indicators. amber is only used as an icon accent, not a badge color.\"\n      >\n        <div className=\"flex flex-wrap gap-4 border rounded-md p-6 bg-card\">\n          {ICON_COLORS.map(({ name, bg, fg }) => (\n            <div key={name} className=\"flex flex-col items-center gap-2\">\n              <div\n                className={`flex items-center justify-center w-12 h-12 rounded-md ${bg} ${fg}`}\n              >\n                <span className=\"text-lg font-semibold\">Aa</span>\n              </div>\n              <span className=\"text-xs font-mono text-faint-foreground\">\n                {name}\n              </span>\n            </div>\n          ))}\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* Status mapping */}\n      <Section\n        title=\"Status Colors\"\n        description=\"Canonical badge color assignments for organization lifecycle status.\"\n      >\n        <div className=\"flex gap-3 border rounded-md p-6 bg-card\">\n          <Badge badgeColor=\"teal\">active</Badge>\n          <Badge badgeColor=\"indigo\">created</Badge>\n          <Badge badgeColor=\"orange\">inactive</Badge>\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* Usage guidance */}\n      <Section title=\"Usage Guidance\">\n        <div className=\"space-y-3 text-sm\">\n          <div className=\"border rounded-md p-4 bg-card space-y-1\">\n            <p className=\"font-medium\">\n              Use semantic tokens for surfaces and text\n            </p>\n            <p className=\"text-muted-foreground\">\n              Always use{\" \"}\n              <code className=\"text-xs font-mono bg-muted px-1 rounded\">\n                bg-background\n              </code>\n              ,{\" \"}\n              <code className=\"text-xs font-mono bg-muted px-1 rounded\">\n                bg-card\n              </code>\n              ,{\" \"}\n              <code className=\"text-xs font-mono bg-muted px-1 rounded\">\n                text-foreground\n              </code>\n              , etc. for layout surfaces and body text. Never use raw Tailwind\n              grays (text-gray-*, bg-slate-*).\n            </p>\n          </div>\n          <div className=\"border rounded-md p-4 bg-card space-y-1\">\n            <p className=\"font-medium\">Use extended palette for accents only</p>\n            <p className=\"text-muted-foreground\">\n              Badges, status indicators, and icon containers are the only\n              sanctioned uses of raw Tailwind palette colors. Stick to the\n              100/600-800 range for the muted, autumn-like feel.\n            </p>\n          </div>\n        </div>\n      </Section>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}