@petrarca/sonnet-playground 0.1.2

package/dist/chunk-CYNK2P2Q.js

@@ -0,0 +1,411 @@
+import {
+  PlaygroundSection
+} from "./chunk-FTN2A5YL.js";
+
+// src/pages/PlayTypography.tsx
+import { Separator } from "@petrarca/sonnet-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Specimen({
+  label,
+  className,
+  text
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsx("code", { className: "text-xs font-mono text-faint-foreground", children: label }),
+    /* @__PURE__ */ jsx("p", { className, children: text ?? "The quick brown fox jumps over the lazy dog" })
+  ] });
+}
+function ColorSwatch({
+  name,
+  className,
+  cssVar
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ jsxs("span", { className: `${className} text-sm`, children: [
+      name,
+      ": The quick brown fox jumps over the lazy dog"
+    ] }),
+    /* @__PURE__ */ jsx("code", { className: "text-xs font-mono text-faint-foreground ml-auto shrink-0", children: cssVar })
+  ] });
+}
+function PlayTypography() {
+  return /* @__PURE__ */ jsxs("div", { className: "w-full py-12 px-4 max-w-4xl space-y-12", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h1", { children: "Typography" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-base 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" }),
+        "."
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsx(
+      PlaygroundSection,
+      {
+        title: "Font Families",
+        description: "Inter (sans) for UI, JetBrains Mono (mono) for code and data IDs.",
+        children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx(Specimen, { label: "font-sans (Inter)", className: "font-sans text-base" }),
+          /* @__PURE__ */ jsx(
+            Specimen,
+            {
+              label: "font-mono (JetBrains Mono)",
+              className: "font-mono text-base"
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsx(
+      PlaygroundSection,
+      {
+        title: "Type Scale",
+        description: "Sanctioned sizes from text-xs (12px) to text-3xl (30px).",
+        children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsx(Specimen, { label: "text-3xl \u2014 30px", className: "text-3xl" }),
+          /* @__PURE__ */ jsx(Specimen, { label: "text-2xl \u2014 24px", className: "text-2xl" }),
+          /* @__PURE__ */ jsx(Specimen, { label: "text-xl \u2014 20px", className: "text-xl" }),
+          /* @__PURE__ */ jsx(Specimen, { label: "text-lg \u2014 18px", className: "text-lg" }),
+          /* @__PURE__ */ jsx(Specimen, { label: "text-base \u2014 16px", className: "text-base" }),
+          /* @__PURE__ */ jsx(Specimen, { label: "text-sm \u2014 14px (workhorse)", className: "text-sm" }),
+          /* @__PURE__ */ jsx(Specimen, { label: "text-xs \u2014 12px", className: "text-xs" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsxs(
+      PlaygroundSection,
+      {
+        title: "Font Weights",
+        description: "Three sanctioned weights. font-bold (700) and above are prohibited.",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsx(
+              Specimen,
+              {
+                label: "font-normal (400) \u2014 body text, paragraphs",
+                className: "text-base font-normal"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Specimen,
+              {
+                label: "font-medium (500) \u2014 labels, buttons, interactive elements",
+                className: "text-base font-medium"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Specimen,
+              {
+                label: "font-semibold (600) \u2014 headings, card titles (max weight)",
+                className: "text-base font-semibold"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-4 p-3 border border-destructive/20 bg-destructive/5 rounded-md", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive font-medium", children: "Prohibited weights" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-6 mt-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground line-through", children: "font-bold (700)" }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground line-through", children: "font-extrabold (800)" }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground line-through", children: "font-black (900)" })
+            ] })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsx(
+      PlaygroundSection,
+      {
+        title: "Heading Hierarchy",
+        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("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("h2", { children: "Section Heading" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx("code", { className: "text-xs font-mono text-faint-foreground", children: "h3 / .heading-sub \u2014 text-base font-medium" }),
+            /* @__PURE__ */ jsx("h3", { children: "Subsection Heading" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx("code", { className: "text-xs font-mono text-faint-foreground", children: "h4 / .heading-component \u2014 text-sm font-medium" }),
+            /* @__PURE__ */ jsx("h4", { children: "Component Heading" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx("code", { className: "text-xs font-mono text-faint-foreground", children: "h6 / .heading-compact \u2014 text-xs font-medium" }),
+            /* @__PURE__ */ jsx("h6", { children: "Compact Heading" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx("code", { className: "text-xs font-mono text-faint-foreground", children: ".heading-meta \u2014 text-xs font-medium font-mono uppercase tracking-wider" }),
+            /* @__PURE__ */ jsx("div", { className: "heading-meta", children: "Meta Heading" })
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsx(
+      PlaygroundSection,
+      {
+        title: "Text Color Hierarchy",
+        description: "Three semantic tiers. Never use hardcoded grays (text-gray-*, text-slate-*).",
+        children: /* @__PURE__ */ jsxs("div", { className: "space-y-3 border rounded-md p-6 bg-card", children: [
+          /* @__PURE__ */ jsx(
+            ColorSwatch,
+            {
+              name: "foreground",
+              className: "text-foreground",
+              cssVar: "--foreground"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ColorSwatch,
+            {
+              name: "muted-foreground",
+              className: "text-muted-foreground",
+              cssVar: "--muted-foreground"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ColorSwatch,
+            {
+              name: "faint-foreground",
+              className: "text-faint-foreground",
+              cssVar: "--faint-foreground"
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsx(
+      PlaygroundSection,
+      {
+        title: "Line Height & Letter Spacing",
+        description: "Sanctioned line-height and tracking classes.",
+        children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsx(
+            Specimen,
+            {
+              label: "leading-none (1.0) \u2014 compact labels, card titles",
+              className: "text-sm leading-none"
+            }
+          ),
+          /* @__PURE__ */ jsx(Specimen, { label: "default \u2014 most text", className: "text-sm" }),
+          /* @__PURE__ */ jsx(
+            Specimen,
+            {
+              label: "leading-relaxed (1.625) \u2014 multi-line descriptions",
+              className: "text-sm leading-relaxed",
+              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."
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Specimen,
+            {
+              label: "tracking-tight (-0.025em) \u2014 headings",
+              className: "text-2xl font-semibold tracking-tight",
+              text: "Page Title With Tracking"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Specimen,
+            {
+              label: "tracking-wider (0.05em) \u2014 meta headings",
+              className: "heading-meta",
+              text: "Category Label"
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsxs(
+      PlaygroundSection,
+      {
+        title: "Numeric Typography",
+        description: "tabular-nums for aligned digits. font-mono for IDs and codes.",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-6", children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2 border rounded-md p-4 bg-card", children: [
+              /* @__PURE__ */ jsx("code", { className: "text-xs font-mono text-faint-foreground", children: "Without tabular-nums" }),
+              /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-2xl font-semibold", children: "1,111" }),
+                /* @__PURE__ */ jsx("p", { className: "text-2xl font-semibold", children: "8,888" }),
+                /* @__PURE__ */ jsx("p", { className: "text-2xl font-semibold", children: "42.7%" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2 border rounded-md p-4 bg-card", children: [
+              /* @__PURE__ */ jsx("code", { className: "text-xs font-mono text-faint-foreground", children: "With tabular-nums" }),
+              /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-2xl font-semibold tabular-nums", children: "1,111" }),
+                /* @__PURE__ */ jsx("p", { className: "text-2xl font-semibold tabular-nums", children: "8,888" }),
+                /* @__PURE__ */ jsx("p", { className: "text-2xl font-semibold tabular-nums", children: "42.7%" })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-2", children: [
+            /* @__PURE__ */ jsx("code", { className: "text-xs font-mono text-faint-foreground", children: "font-mono for IDs and codes" }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-xs font-mono text-muted-foreground", children: "ent_a1b2c3d4e5f6" }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs font-mono text-muted-foreground", children: "sk_live_51O2jK2eZvKYlo2C0" }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs font-mono text-muted-foreground", children: "sha256:9f86d081884c7d659a2feaa0" })
+            ] })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsx(
+      PlaygroundSection,
+      {
+        title: "Text Overflow Handling",
+        description: "Patterns for dynamic content that can exceed its container.",
+        children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx("code", { className: "text-xs font-mono text-faint-foreground", children: "truncate \u2014 single-line ellipsis" }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm truncate max-w-xs border rounded px-2 py-1", children: "This is a very long sidebar item name that will definitely overflow its container and needs to be truncated with an ellipsis" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx("code", { className: "text-xs font-mono text-faint-foreground", children: "line-clamp-2 \u2014 multi-line clamp" }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm line-clamp-2 max-w-sm border rounded px-2 py-1", children: "This is a card description that can span multiple lines. It will be clamped to exactly two lines. Any content beyond two lines will be hidden and replaced with an ellipsis. This sentence should be hidden." })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx("code", { className: "text-xs font-mono text-faint-foreground", children: "whitespace-nowrap \u2014 prevent wrapping (buttons, badges)" }),
+            /* @__PURE__ */ jsx("span", { className: "text-sm whitespace-nowrap border rounded px-2 py-1 inline-block", children: "Badge text that never wraps" })
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsx(
+      PlaygroundSection,
+      {
+        title: "Component Typography Patterns",
+        description: "Standard text treatments for common UI components.",
+        children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "border rounded-lg p-4 bg-card space-y-1.5", children: [
+            /* @__PURE__ */ jsx("code", { className: "text-xs font-mono text-faint-foreground", children: "Card" }),
+            /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold leading-none tracking-tight", children: "Card Title" }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Card description with muted foreground color." }),
+            /* @__PURE__ */ jsx("p", { className: "text-2xl font-semibold tabular-nums mt-2", children: "$12,345" }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "+20.1% from last month" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "border rounded-lg p-4 bg-card space-y-1.5", children: [
+            /* @__PURE__ */ jsx("code", { className: "text-xs font-mono text-faint-foreground", children: "Dialog" }),
+            /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold leading-none tracking-tight", children: "Dialog Title" }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Dialog description providing context for the action." })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "border rounded-lg p-4 bg-card space-y-3", children: [
+            /* @__PURE__ */ jsx("code", { className: "text-xs font-mono text-faint-foreground", children: "Interactive Elements" }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium leading-none", children: "Form Label" }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Help text for the field." })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium bg-primary text-primary-foreground rounded-md px-3 py-1.5", children: "Button" }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium bg-secondary text-secondary-foreground rounded-full px-2.5 py-0.5", children: "Badge" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "border rounded-lg p-4 bg-card space-y-2", children: [
+            /* @__PURE__ */ jsx("code", { className: "text-xs font-mono text-faint-foreground", children: "Table" }),
+            /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
+              /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "border-b", children: [
+                /* @__PURE__ */ jsx("th", { className: "text-left font-medium text-foreground py-1", children: "Name" }),
+                /* @__PURE__ */ jsx("th", { className: "text-right font-medium text-foreground py-1", children: "Count" })
+              ] }) }),
+              /* @__PURE__ */ jsxs("tbody", { children: [
+                /* @__PURE__ */ jsxs("tr", { className: "border-b", children: [
+                  /* @__PURE__ */ jsx("td", { className: "py-1", children: "Entities" }),
+                  /* @__PURE__ */ jsx("td", { className: "text-right tabular-nums", children: "1,234" })
+                ] }),
+                /* @__PURE__ */ jsxs("tr", { className: "border-b", children: [
+                  /* @__PURE__ */ jsx("td", { className: "py-1", children: "Relations" }),
+                  /* @__PURE__ */ jsx("td", { className: "text-right tabular-nums", children: "567" })
+                ] }),
+                /* @__PURE__ */ jsxs("tr", { children: [
+                  /* @__PURE__ */ jsx("td", { className: "py-1", children: "Schemas" }),
+                  /* @__PURE__ */ jsx("td", { className: "text-right tabular-nums", children: "89" })
+                ] })
+              ] })
+            ] })
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsx(
+      PlaygroundSection,
+      {
+        title: "Responsive Typography",
+        description: "Patterns that adapt to viewport size.",
+        children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx(
+            Specimen,
+            {
+              label: "Responsive heading: text-xl md:text-2xl",
+              className: "text-xl md:text-2xl font-semibold tracking-tight",
+              text: "This heading scales up on wider viewports"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Specimen,
+            {
+              label: "Responsive input: text-base md:text-sm (prevents iOS zoom)",
+              className: "text-base md:text-sm border rounded px-2 py-1",
+              text: "Input text that's 16px on mobile, 14px on desktop"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Specimen,
+            {
+              label: "text-balance \u2014 prevents orphaned words",
+              className: "text-2xl font-semibold tracking-tight text-balance max-w-sm",
+              text: "This heading uses text-balance for better line breaks"
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsx(
+      PlaygroundSection,
+      {
+        title: "Font Rendering",
+        description: "Antialiased rendering is applied globally via the body class.",
+        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",
+            " ",
+            /* @__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" }),
+            "."
+          ] }),
+          /* @__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." })
+        ] })
+      }
+    )
+  ] });
+}
+
+export {
+  PlayTypography
+};
+//# sourceMappingURL=chunk-CYNK2P2Q.js.map

package/dist/chunk-CYNK2P2Q.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 py-12 px-4 max-w-4xl space-y-12\">\n      {/* ── Page header ──────────────────────────────────────────── */}\n      <div>\n        <h1>Typography</h1>\n        <p className=\"text-base 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-2xl 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-xl 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=\"Antialiased rendering is applied globally via the body class.\"\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            class on{\" \"}\n            <code className=\"font-mono text-xs bg-muted px-1 py-0.5 rounded\">\n              &lt;body&gt;\n            </code>{\" \"}\n            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            .\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-FTN2A5YL.js

@@ -0,0 +1,20 @@
+// src/PlaygroundSection.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function PlaygroundSection({
+  title,
+  description,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h2", { children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: description })
+    ] }),
+    children
+  ] });
+}
+
+export {
+  PlaygroundSection
+};
+//# sourceMappingURL=chunk-FTN2A5YL.js.map

package/dist/chunk-FTN2A5YL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/PlaygroundSection.tsx"],"sourcesContent":["/**\n * Shared section wrapper for playground pages.\n *\n * Provides a consistent titled section with optional description,\n * used across all playground demo pages.\n */\nimport React from \"react\";\n\ninterface PlaygroundSectionProps {\n  title: string;\n  description?: string;\n  children: React.ReactNode;\n}\n\n/** Titled section wrapper used across playground pages. */\nexport function PlaygroundSection({\n  title,\n  description,\n  children,\n}: PlaygroundSectionProps): React.ReactElement {\n  return (\n    <section className=\"space-y-4\">\n      <div>\n        <h2>{title}</h2>\n        {description && (\n          <p className=\"text-sm text-muted-foreground mt-1\">{description}</p>\n        )}\n      </div>\n      {children}\n    </section>\n  );\n}\n"],"mappings":";AAsBM,SACE,KADF;AAPC,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AACF,GAA+C;AAC7C,SACE,qBAAC,aAAQ,WAAU,aACjB;AAAA,yBAAC,SACC;AAAA,0BAAC,QAAI,iBAAM;AAAA,MACV,eACC,oBAAC,OAAE,WAAU,sCAAsC,uBAAY;AAAA,OAEnE;AAAA,IACC;AAAA,KACH;AAEJ;","names":[]}