@petrarca/sonnet-playground 0.2.0 → 0.4.0

package/dist/chunk-CQ6PGFRV.js

@@ -0,0 +1,341 @@
+import {
+  PlaygroundSection
+} from "./chunk-C2EZ2ECG.js";
+
+// src/pages/PlayShellApi.tsx
+import { Button } from "@petrarca/sonnet-ui";
+import {
+  notification,
+  dialog,
+  navigation,
+  panel,
+  sidePane
+} from "@petrarca/sonnet-shell";
+import { jsx, jsxs } from "react/jsx-runtime";
+function PlayShellApi() {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsx(
+      PlaygroundSection,
+      {
+        title: "notification",
+        description: "Toasts via the shell notification API \u2014 wraps Sonner.",
+        variant: "card",
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: () => notification.success("Operation completed."),
+              children: "success()"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: () => notification.error("Something went wrong."),
+              children: "error()"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: () => notification.warning("Proceed with caution."),
+              children: "warning()"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: () => notification.info("Here is some information."),
+              children: "info()"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: () => notification.promise(
+                new Promise((resolve) => setTimeout(resolve, 2e3)),
+                {
+                  loading: "Loading...",
+                  success: "Done!",
+                  error: "Failed."
+                }
+              ),
+              children: "promise()"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: () => notification.dismiss(),
+              children: "dismiss()"
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PlaygroundSection,
+      {
+        title: "dialog",
+        description: "Confirmation dialog via the shell dialog API.",
+        variant: "card",
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: async () => {
+                const confirmed = await dialog.confirm({
+                  title: "Delete Resource",
+                  description: "This will permanently delete the resource. Are you sure?",
+                  confirmLabel: "Delete",
+                  variant: "destructive"
+                });
+                notification.info(
+                  confirmed ? "User confirmed." : "User cancelled."
+                );
+              },
+              children: "confirm() \u2014 destructive"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: async () => {
+                const confirmed = await dialog.confirm({
+                  title: "Save Changes",
+                  description: "Do you want to save your changes?"
+                });
+                notification.info(
+                  confirmed ? "User confirmed." : "User cancelled."
+                );
+              },
+              children: "confirm() \u2014 default"
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PlaygroundSection,
+      {
+        title: "navigation",
+        description: "Programmatic navigation via the shell navigation API.",
+        variant: "card",
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: () => navigation.goTo("/home"),
+              children: 'goTo("/home")'
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: () => navigation.goTo("/playground"),
+              children: 'goTo("/playground")'
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: () => navigation.openCommandMenu(),
+              children: "openCommandMenu()"
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => navigation.back(), children: "back()" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PlaygroundSection,
+      {
+        title: "panel",
+        description: "Shell-managed slide-over panel \u2014 renders content inside a Sheet owned by the shell.",
+        variant: "card",
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: () => panel.open({
+                title: "Panel Demo",
+                description: "This is a shell-managed slide-over panel.",
+                content: /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-3", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-sm", children: "This content is rendered inside the shell's Sheet component." }),
+                  /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+                    "Use ",
+                    /* @__PURE__ */ jsx("code", { children: "panel.open()" }),
+                    " to show any React content in a slide-over panel."
+                  ] })
+                ] })
+              }),
+              children: "open() \u2014 narrow"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: () => panel.open({
+                title: "Wide Panel",
+                content: /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-3", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Wide panel (default)" }),
+                  /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: 'width="default" gives a wider panel for more complex content.' })
+                ] }),
+                width: "default"
+              }),
+              children: "open() \u2014 default width"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: () => panel.open({
+                title: "Full Coverage",
+                content: /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-3", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Full coverage panel" }),
+                  /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: 'coverage="full" overlays the entire content area.' })
+                ] }),
+                width: "default",
+                coverage: "full"
+              }),
+              children: "open() \u2014 full coverage"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: () => panel.open({
+                title: "Resizable Panel",
+                description: "Drag the left edge to resize. Double-click to reset.",
+                content: /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-3", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Resizable panel" }),
+                  /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "resizable=true \xB7 defaultWidth=640 \xB7 minWidth=320 \xB7 maxWidth=1000" })
+                ] }),
+                width: "default",
+                resizable: true,
+                minWidth: 320,
+                maxWidth: 1e3
+              }),
+              children: "open() \u2014 resizable"
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PlaygroundSection,
+      {
+        title: "sidePane",
+        description: "Persistent inline resizable panel. Sits beside the content area \u2014 the main view shrinks rather than being overlaid. Drag the edge to resize; double-click to reset.",
+        variant: "card",
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: () => sidePane.open({
+                moduleId: "shell-demo-narrow",
+                defaultWidth: 240,
+                minWidth: 180,
+                maxWidth: 400,
+                content: /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-3", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Narrow pane (240px)" }),
+                  /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "defaultWidth=240 minWidth=180 maxWidth=400" })
+                ] })
+              }),
+              children: "open() \u2014 narrow"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: () => sidePane.open({
+                moduleId: "shell-demo-wide",
+                defaultWidth: 480,
+                minWidth: 320,
+                maxWidth: 800,
+                content: /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-3", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Wide pane (480px)" }),
+                  /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "defaultWidth=480 minWidth=320 maxWidth=800" })
+                ] })
+              }),
+              children: "open() \u2014 wide"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: () => sidePane.toggle({
+                moduleId: "shell-demo-toggle",
+                defaultWidth: 320,
+                content: /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-3", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Toggle pane" }),
+                  /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Click again to close. Same moduleId toggles." })
+                ] })
+              }),
+              children: "toggle()"
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => sidePane.close(), children: "close()" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PlaygroundSection,
+      {
+        title: "CommandMenu (Cmd+K)",
+        description: "Open the command palette programmatically. Modules can register commands that appear here via the commands array in their ShellModule definition.",
+        variant: "card",
+        children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: () => navigation.openCommandMenu(),
+            children: "Open CommandMenu"
+          }
+        )
+      }
+    )
+  ] });
+}
+
+export {
+  PlayShellApi
+};
+//# sourceMappingURL=chunk-CQ6PGFRV.js.map

package/dist/chunk-CQ6PGFRV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pages/PlayShellApi.tsx"],"sourcesContent":["import { Button } from \"@petrarca/sonnet-ui\";\nimport {\n  notification,\n  dialog,\n  navigation,\n  panel,\n  sidePane,\n} from \"@petrarca/sonnet-shell\";\nimport { PlaygroundSection } from \"../PlaygroundSection\";\n\n/**\n * PlayShellApi -- playground page that exercises the shell API surface.\n *\n * Covers: notification, dialog, navigation, panel, sidePane,\n * and the command menu (Cmd+K).\n */\nexport default function PlayShellApi() {\n  return (\n    <div className=\"space-y-6\">\n      {/* ── notification ─────────────────────────────────────────── */}\n      <PlaygroundSection\n        title=\"notification\"\n        description=\"Toasts via the shell notification API — wraps Sonner.\"\n        variant=\"card\"\n      >\n        <div className=\"flex flex-wrap gap-2\">\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => notification.success(\"Operation completed.\")}\n          >\n            success()\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => notification.error(\"Something went wrong.\")}\n          >\n            error()\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => notification.warning(\"Proceed with caution.\")}\n          >\n            warning()\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => notification.info(\"Here is some information.\")}\n          >\n            info()\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() =>\n              notification.promise(\n                new Promise((resolve) => setTimeout(resolve, 2000)),\n                {\n                  loading: \"Loading...\",\n                  success: \"Done!\",\n                  error: \"Failed.\",\n                },\n              )\n            }\n          >\n            promise()\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => notification.dismiss()}\n          >\n            dismiss()\n          </Button>\n        </div>\n      </PlaygroundSection>\n\n      {/* ── dialog ───────────────────────────────────────────────── */}\n      <PlaygroundSection\n        title=\"dialog\"\n        description=\"Confirmation dialog via the shell dialog API.\"\n        variant=\"card\"\n      >\n        <div className=\"flex flex-wrap gap-2\">\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={async () => {\n              const confirmed = await dialog.confirm({\n                title: \"Delete Resource\",\n                description:\n                  \"This will permanently delete the resource. Are you sure?\",\n                confirmLabel: \"Delete\",\n                variant: \"destructive\",\n              });\n              notification.info(\n                confirmed ? \"User confirmed.\" : \"User cancelled.\",\n              );\n            }}\n          >\n            confirm() — destructive\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={async () => {\n              const confirmed = await dialog.confirm({\n                title: \"Save Changes\",\n                description: \"Do you want to save your changes?\",\n              });\n              notification.info(\n                confirmed ? \"User confirmed.\" : \"User cancelled.\",\n              );\n            }}\n          >\n            confirm() — default\n          </Button>\n        </div>\n      </PlaygroundSection>\n\n      {/* ── navigation ───────────────────────────────────────────── */}\n      <PlaygroundSection\n        title=\"navigation\"\n        description=\"Programmatic navigation via the shell navigation API.\"\n        variant=\"card\"\n      >\n        <div className=\"flex flex-wrap gap-2\">\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => navigation.goTo(\"/home\")}\n          >\n            goTo(\"/home\")\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => navigation.goTo(\"/playground\")}\n          >\n            goTo(\"/playground\")\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => navigation.openCommandMenu()}\n          >\n            openCommandMenu()\n          </Button>\n          <Button variant=\"outline\" size=\"sm\" onClick={() => navigation.back()}>\n            back()\n          </Button>\n        </div>\n      </PlaygroundSection>\n\n      {/* ── panel ────────────────────────────────────────────────── */}\n      <PlaygroundSection\n        title=\"panel\"\n        description=\"Shell-managed slide-over panel — renders content inside a Sheet owned by the shell.\"\n        variant=\"card\"\n      >\n        <div className=\"flex flex-wrap gap-2\">\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() =>\n              panel.open({\n                title: \"Panel Demo\",\n                description: \"This is a shell-managed slide-over panel.\",\n                content: (\n                  <div className=\"p-4 space-y-3\">\n                    <p className=\"text-sm\">\n                      This content is rendered inside the shell's Sheet\n                      component.\n                    </p>\n                    <p className=\"text-xs text-muted-foreground\">\n                      Use <code>panel.open()</code> to show any React content in\n                      a slide-over panel.\n                    </p>\n                  </div>\n                ),\n              })\n            }\n          >\n            open() — narrow\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() =>\n              panel.open({\n                title: \"Wide Panel\",\n                content: (\n                  <div className=\"p-4 space-y-3\">\n                    <p className=\"text-sm font-medium\">Wide panel (default)</p>\n                    <p className=\"text-xs text-muted-foreground\">\n                      width=\"default\" gives a wider panel for more complex\n                      content.\n                    </p>\n                  </div>\n                ),\n                width: \"default\",\n              })\n            }\n          >\n            open() — default width\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() =>\n              panel.open({\n                title: \"Full Coverage\",\n                content: (\n                  <div className=\"p-4 space-y-3\">\n                    <p className=\"text-sm font-medium\">Full coverage panel</p>\n                    <p className=\"text-xs text-muted-foreground\">\n                      coverage=\"full\" overlays the entire content area.\n                    </p>\n                  </div>\n                ),\n                width: \"default\",\n                coverage: \"full\",\n              })\n            }\n          >\n            open() — full coverage\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() =>\n              panel.open({\n                title: \"Resizable Panel\",\n                description:\n                  \"Drag the left edge to resize. Double-click to reset.\",\n                content: (\n                  <div className=\"p-4 space-y-3\">\n                    <p className=\"text-sm font-medium\">Resizable panel</p>\n                    <p className=\"text-xs text-muted-foreground\">\n                      resizable=true · defaultWidth=640 · minWidth=320 ·\n                      maxWidth=1000\n                    </p>\n                  </div>\n                ),\n                width: \"default\",\n                resizable: true,\n                minWidth: 320,\n                maxWidth: 1000,\n              })\n            }\n          >\n            open() — resizable\n          </Button>\n        </div>\n      </PlaygroundSection>\n\n      {/* ── sidePane ─────────────────────────────────────────────── */}\n      <PlaygroundSection\n        title=\"sidePane\"\n        description=\"Persistent inline resizable panel. Sits beside the content area — the main view shrinks rather than being overlaid. Drag the edge to resize; double-click to reset.\"\n        variant=\"card\"\n      >\n        <div className=\"flex flex-wrap gap-2\">\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() =>\n              sidePane.open({\n                moduleId: \"shell-demo-narrow\",\n                defaultWidth: 240,\n                minWidth: 180,\n                maxWidth: 400,\n                content: (\n                  <div className=\"p-4 space-y-3\">\n                    <p className=\"text-sm font-medium\">Narrow pane (240px)</p>\n                    <p className=\"text-xs text-muted-foreground\">\n                      defaultWidth=240 minWidth=180 maxWidth=400\n                    </p>\n                  </div>\n                ),\n              })\n            }\n          >\n            open() — narrow\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() =>\n              sidePane.open({\n                moduleId: \"shell-demo-wide\",\n                defaultWidth: 480,\n                minWidth: 320,\n                maxWidth: 800,\n                content: (\n                  <div className=\"p-4 space-y-3\">\n                    <p className=\"text-sm font-medium\">Wide pane (480px)</p>\n                    <p className=\"text-xs text-muted-foreground\">\n                      defaultWidth=480 minWidth=320 maxWidth=800\n                    </p>\n                  </div>\n                ),\n              })\n            }\n          >\n            open() — wide\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() =>\n              sidePane.toggle({\n                moduleId: \"shell-demo-toggle\",\n                defaultWidth: 320,\n                content: (\n                  <div className=\"p-4 space-y-3\">\n                    <p className=\"text-sm font-medium\">Toggle pane</p>\n                    <p className=\"text-xs text-muted-foreground\">\n                      Click again to close. Same moduleId toggles.\n                    </p>\n                  </div>\n                ),\n              })\n            }\n          >\n            toggle()\n          </Button>\n          <Button variant=\"outline\" size=\"sm\" onClick={() => sidePane.close()}>\n            close()\n          </Button>\n        </div>\n      </PlaygroundSection>\n\n      {/* ── CommandMenu (Cmd+K) ──────────────────────────────────── */}\n      <PlaygroundSection\n        title=\"CommandMenu (Cmd+K)\"\n        description=\"Open the command palette programmatically. Modules can register commands that appear here via the commands array in their ShellModule definition.\"\n        variant=\"card\"\n      >\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          onClick={() => navigation.openCommandMenu()}\n        >\n          Open CommandMenu\n        </Button>\n      </PlaygroundSection>\n    </div>\n  );\n}\n"],"mappings":"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","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":[]}