@petrarca/sonnet-playground 0.8.0 → 0.9.0

package/dist/chunk-YTGQRDD2.js

@@ -0,0 +1,343 @@
+import {
+  PlaygroundSection
+} from "./chunk-C2EZ2ECG.js";
+
+// src/pages/PlayAdvancedComponents.tsx
+import { useState as useState2 } from "react";
+import {
+  TreeView as TreeView2,
+  Button,
+  Separator,
+  Stepper,
+  StepperContent,
+  StepperDescription,
+  StepperIndicator,
+  StepperItem,
+  StepperList,
+  StepperNext,
+  StepperPrev,
+  StepperSeparator,
+  StepperTitle,
+  StepperTrigger
+} from "@petrarca/sonnet-ui";
+import { useTreeExpansion } from "@petrarca/sonnet-core/hooks";
+
+// src/pages/TreeLargeLevelsDemo.tsx
+import { useMemo, useState } from "react";
+import { TreeView } from "@petrarca/sonnet-ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var PRODUCTS = 5e3;
+var NODES = [
+  {
+    id: "product",
+    data: { label: `product (${PRODUCTS})` },
+    hasChildren: true,
+    children: Array.from({ length: PRODUCTS }, (_, i) => ({
+      id: `product-${i}`,
+      data: { label: `product-${String(i).padStart(4, "0")}` },
+      hasChildren: false
+    }))
+  },
+  {
+    id: "source",
+    data: { label: "source (3)" },
+    hasChildren: true,
+    children: ["billing", "portal", "search"].map((name) => ({
+      id: `source-${name}`,
+      data: { label: name },
+      hasChildren: false
+    }))
+  }
+];
+function TreeLargeLevelsDemo() {
+  const [virtualize, setVirtualize] = useState(true);
+  const [expandedIds, setExpandedIds] = useState(/* @__PURE__ */ new Set(["product"]));
+  const [activeId, setActiveId] = useState();
+  const [rendered, setRendered] = useState(0);
+  const countRef = useMemo(
+    () => (el) => {
+      if (!el) return;
+      const observer = new MutationObserver(
+        () => setRendered(el.querySelectorAll('[role="treeitem"]').length)
+      );
+      observer.observe(el, { childList: true, subtree: true });
+      setRendered(el.querySelectorAll('[role="treeitem"]').length);
+    },
+    []
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: virtualize,
+          onChange: (e) => setVirtualize(e.target.checked)
+        }
+      ),
+      "virtualize"
+    ] }),
+    /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+      'Click a row, then type a name -- "product-4321" -- to jump to it; the parent stays pinned at the top, a click away; Home/End. Rows in the DOM:',
+      " ",
+      /* @__PURE__ */ jsx("span", { className: "font-mono", children: rendered }),
+      activeId && /* @__PURE__ */ jsxs(Fragment, { children: [
+        " ",
+        "-- open: ",
+        /* @__PURE__ */ jsx("span", { className: "font-mono", children: activeId })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: countRef,
+        className: "h-80 max-w-sm overflow-y-auto rounded-md border p-1",
+        children: /* @__PURE__ */ jsx(
+          TreeView,
+          {
+            nodes: NODES,
+            expandedIds,
+            onExpand: (id) => setExpandedIds((s) => /* @__PURE__ */ new Set([...s, id])),
+            onCollapse: (id) => setExpandedIds((s) => new Set([...s].filter((x) => x !== id))),
+            onNodeClick: (node) => setActiveId(node.id),
+            activeId,
+            virtualize,
+            getTypeAheadLabel: (node) => node.data.label,
+            stickyParents: true,
+            label: "Products",
+            renderNode: (node) => /* @__PURE__ */ jsx("span", { className: "truncate", children: node.data.label })
+          },
+          String(virtualize)
+        )
+      }
+    )
+  ] });
+}
+
+// src/pages/PlayAdvancedComponents.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function PlayAdvancedComponents() {
+  return /* @__PURE__ */ jsxs2("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs2("div", { children: [
+      /* @__PURE__ */ jsx2("h1", { children: "Advanced Components" }),
+      /* @__PURE__ */ jsx2("p", { className: "text-sm text-muted-foreground mt-1", children: "Multi-step workflows and hierarchical data structures." })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx2(
+        PlaygroundSection,
+        {
+          title: "Stepper",
+          description: "Dice UI Stepper \u2014 horizontal, controlled via built-in Prev/Next or external state.",
+          variant: "card",
+          children: /* @__PURE__ */ jsxs2("div", { className: "space-y-6", children: [
+            /* @__PURE__ */ jsxs2("div", { children: [
+              /* @__PURE__ */ jsx2("h4", { className: "mb-4", children: "Interactive (built-in navigation)" }),
+              /* @__PURE__ */ jsxs2(Stepper, { defaultValue: "step-1", className: "max-w-lg", children: [
+                /* @__PURE__ */ jsx2(StepperList, { className: "gap-2", children: ["step-1", "step-2", "step-3"].map((value, i) => /* @__PURE__ */ jsxs2(StepperItem, { value, children: [
+                  /* @__PURE__ */ jsxs2(StepperTrigger, { children: [
+                    /* @__PURE__ */ jsx2(StepperIndicator, {}),
+                    /* @__PURE__ */ jsxs2("div", { className: "flex flex-col min-w-16", children: [
+                      /* @__PURE__ */ jsxs2(StepperTitle, { children: [
+                        "Step ",
+                        i + 1
+                      ] }),
+                      /* @__PURE__ */ jsx2(StepperDescription, { children: "Description" })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx2(StepperSeparator, {})
+                ] }, value)) }),
+                /* @__PURE__ */ jsx2(StepperContent, { value: "step-1", children: /* @__PURE__ */ jsx2("p", { className: "text-sm text-muted-foreground", children: "Content for step 1." }) }),
+                /* @__PURE__ */ jsx2(StepperContent, { value: "step-2", children: /* @__PURE__ */ jsx2("p", { className: "text-sm text-muted-foreground", children: "Content for step 2." }) }),
+                /* @__PURE__ */ jsx2(StepperContent, { value: "step-3", children: /* @__PURE__ */ jsx2("p", { className: "text-sm text-muted-foreground", children: "Content for step 3." }) }),
+                /* @__PURE__ */ jsxs2("div", { className: "flex justify-between max-w-lg", children: [
+                  /* @__PURE__ */ jsx2(StepperPrev, { asChild: true, children: /* @__PURE__ */ jsx2(Button, { variant: "outline", size: "sm", children: "Back" }) }),
+                  /* @__PURE__ */ jsx2(StepperNext, { asChild: true, children: /* @__PURE__ */ jsx2(Button, { size: "sm", children: "Next" }) })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx2(Separator, {}),
+            /* @__PURE__ */ jsxs2("div", { children: [
+              /* @__PURE__ */ jsx2("h4", { className: "mb-4", children: "Non-interactive (controlled)" }),
+              /* @__PURE__ */ jsx2(StepperControlled, {})
+            ] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        PlaygroundSection,
+        {
+          title: "TreeView",
+          description: "Generic accessible tree component with expand/collapse, keyboard navigation (ArrowUp/Down/Left/Right, Enter/Space), and optional row selection.",
+          variant: "card",
+          children: /* @__PURE__ */ jsx2(TreeViewDemo, {})
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        PlaygroundSection,
+        {
+          title: "TreeView -- a large level",
+          description: "5,000 children under one node. With virtualize, only the rows in view are in the DOM; the tree scrolls itself in a box of bounded height, and focus and the open node follow rows out of view. Typing a name jumps to it (type-to-find).",
+          variant: "card",
+          children: /* @__PURE__ */ jsx2(TreeLargeLevelsDemo, {})
+        }
+      )
+    ] })
+  ] });
+}
+var CONTROLLED_STEPS = [
+  { value: "account", title: "Account", description: "Your details" },
+  { value: "profile", title: "Profile", description: "About you" },
+  { value: "review", title: "Review", description: "Confirm" }
+];
+function StepperControlled() {
+  const [step, setStep] = useState2("account");
+  return /* @__PURE__ */ jsxs2(
+    Stepper,
+    {
+      value: step,
+      onValueChange: setStep,
+      nonInteractive: true,
+      className: "max-w-lg",
+      children: [
+        /* @__PURE__ */ jsx2(StepperList, { className: "gap-2", children: CONTROLLED_STEPS.map((s) => /* @__PURE__ */ jsxs2(StepperItem, { value: s.value, children: [
+          /* @__PURE__ */ jsxs2(StepperTrigger, { children: [
+            /* @__PURE__ */ jsx2(StepperIndicator, {}),
+            /* @__PURE__ */ jsxs2("div", { className: "flex flex-col min-w-16", children: [
+              /* @__PURE__ */ jsx2(StepperTitle, { children: s.title }),
+              /* @__PURE__ */ jsx2(StepperDescription, { children: s.description })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx2(StepperSeparator, {})
+        ] }, s.value)) }),
+        CONTROLLED_STEPS.map((s) => /* @__PURE__ */ jsx2(StepperContent, { value: s.value, children: /* @__PURE__ */ jsxs2("p", { className: "text-sm text-muted-foreground", children: [
+          "Content for ",
+          s.title,
+          "."
+        ] }) }, s.value)),
+        /* @__PURE__ */ jsxs2("div", { className: "flex justify-between max-w-lg", children: [
+          /* @__PURE__ */ jsx2(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              disabled: step === CONTROLLED_STEPS[0].value,
+              onClick: () => {
+                const i = CONTROLLED_STEPS.findIndex((s) => s.value === step);
+                if (i > 0) setStep(CONTROLLED_STEPS[i - 1].value);
+              },
+              children: "Back"
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            Button,
+            {
+              size: "sm",
+              disabled: step === CONTROLLED_STEPS[CONTROLLED_STEPS.length - 1].value,
+              onClick: () => {
+                const i = CONTROLLED_STEPS.findIndex((s) => s.value === step);
+                if (i < CONTROLLED_STEPS.length - 1)
+                  setStep(CONTROLLED_STEPS[i + 1].value);
+              },
+              children: "Next"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+var TREE_NODES = [
+  {
+    id: "fruits",
+    data: { label: "Fruits" },
+    hasChildren: true,
+    children: [
+      {
+        id: "citrus",
+        data: { label: "Citrus" },
+        hasChildren: true,
+        children: [
+          { id: "lemon", data: { label: "Lemon" }, hasChildren: false },
+          { id: "orange", data: { label: "Orange" }, hasChildren: false }
+        ]
+      },
+      { id: "apple", data: { label: "Apple" }, hasChildren: false },
+      { id: "banana", data: { label: "Banana" }, hasChildren: false }
+    ]
+  },
+  {
+    id: "vegetables",
+    data: { label: "Vegetables" },
+    hasChildren: true,
+    children: [
+      { id: "carrot", data: { label: "Carrot" }, hasChildren: false },
+      { id: "broccoli", data: { label: "Broccoli" }, hasChildren: false }
+    ]
+  },
+  {
+    id: "grains",
+    data: { label: "Grains" },
+    hasChildren: false
+  }
+];
+function TreeViewDemo() {
+  const { expandedIds, onExpand, onCollapse } = useTreeExpansion();
+  const [selectedIds, setSelectedIds] = useState2(/* @__PURE__ */ new Set());
+  const [lastClicked, setLastClicked] = useState2(null);
+  const handleSelectionChange = (id, selected) => setSelectedIds((prev) => {
+    const next = new Set(prev);
+    if (selected) next.add(id);
+    else next.delete(id);
+    return next;
+  });
+  return /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-8", children: [
+    /* @__PURE__ */ jsxs2("div", { children: [
+      /* @__PURE__ */ jsx2("h4", { className: "mb-3", children: "Default (click to activate)" }),
+      /* @__PURE__ */ jsx2("p", { className: "text-sm text-muted-foreground mb-3", children: "Keyboard: ArrowUp/Down to move, ArrowRight to expand, ArrowLeft to collapse or go to parent, Enter/Space to activate." }),
+      /* @__PURE__ */ jsx2(
+        TreeView2,
+        {
+          nodes: TREE_NODES,
+          expandedIds,
+          onExpand,
+          onCollapse,
+          onNodeClick: (node) => setLastClicked(node.id),
+          onNodeActivate: (node) => setLastClicked(node.id),
+          renderNode: (node) => /* @__PURE__ */ jsx2("span", { className: "text-sm", children: node.data.label }),
+          className: "max-w-xs"
+        }
+      ),
+      lastClicked && /* @__PURE__ */ jsxs2("p", { className: "mt-3 text-xs text-muted-foreground", children: [
+        "Last activated: ",
+        /* @__PURE__ */ jsx2("span", { className: "font-mono", children: lastClicked })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { children: [
+      /* @__PURE__ */ jsx2("h4", { className: "mb-3", children: "With row selection" }),
+      /* @__PURE__ */ jsx2("p", { className: "text-sm text-muted-foreground mb-3", children: "Checkboxes appear when onSelectionChange is provided. State is independent of expand/collapse." }),
+      /* @__PURE__ */ jsx2(
+        TreeView2,
+        {
+          nodes: TREE_NODES,
+          expandedIds,
+          onExpand,
+          onCollapse,
+          selectedIds,
+          onSelectionChange: handleSelectionChange,
+          renderNode: (node) => /* @__PURE__ */ jsx2("span", { className: "text-sm", children: node.data.label }),
+          className: "max-w-xs"
+        }
+      ),
+      selectedIds.size > 0 && /* @__PURE__ */ jsxs2("p", { className: "mt-3 text-xs text-muted-foreground", children: [
+        "Selected:",
+        " ",
+        /* @__PURE__ */ jsx2("span", { className: "font-mono", children: [...selectedIds].join(", ") })
+      ] })
+    ] })
+  ] });
+}
+
+export {
+  PlayAdvancedComponents
+};
+//# sourceMappingURL=chunk-YTGQRDD2.js.map

package/dist/chunk-YTGQRDD2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pages/PlayAdvancedComponents.tsx","../src/pages/TreeLargeLevelsDemo.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport {\n  TreeView,\n  type TreeNode,\n  Button,\n  Separator,\n  Stepper,\n  StepperContent,\n  StepperDescription,\n  StepperIndicator,\n  StepperItem,\n  StepperList,\n  StepperNext,\n  StepperPrev,\n  StepperSeparator,\n  StepperTitle,\n  StepperTrigger,\n} from \"@petrarca/sonnet-ui\";\nimport { useTreeExpansion } from \"@petrarca/sonnet-core/hooks\";\nimport { PlaygroundSection } from \"../PlaygroundSection\";\nimport { TreeLargeLevelsDemo } from \"./TreeLargeLevelsDemo\";\n\n/**\n * PlayAdvancedComponents — Stepper and TreeView demos.\n *\n * Split from PlayCoreComponents to keep files manageable.\n */\nexport default function PlayAdvancedComponents() {\n  return (\n    <div className=\"space-y-6\">\n      <div>\n        <h1>Advanced Components</h1>\n        <p className=\"text-sm text-muted-foreground mt-1\">\n          Multi-step workflows and hierarchical data structures.\n        </p>\n      </div>\n\n      <div className=\"space-y-6\">\n        {/* Stepper */}\n        <PlaygroundSection\n          title=\"Stepper\"\n          description=\"Dice UI Stepper — horizontal, controlled via built-in Prev/Next or external state.\"\n          variant=\"card\"\n        >\n          <div className=\"space-y-6\">\n            {/* Interactive — uses built-in StepperPrev / StepperNext */}\n            <div>\n              <h4 className=\"mb-4\">Interactive (built-in navigation)</h4>\n              <Stepper defaultValue=\"step-1\" className=\"max-w-lg\">\n                <StepperList className=\"gap-2\">\n                  {[\"step-1\", \"step-2\", \"step-3\"].map((value, i) => (\n                    <StepperItem key={value} value={value}>\n                      <StepperTrigger>\n                        <StepperIndicator />\n                        <div className=\"flex flex-col min-w-16\">\n                          <StepperTitle>Step {i + 1}</StepperTitle>\n                          <StepperDescription>Description</StepperDescription>\n                        </div>\n                      </StepperTrigger>\n                      <StepperSeparator />\n                    </StepperItem>\n                  ))}\n                </StepperList>\n                <StepperContent value=\"step-1\">\n                  <p className=\"text-sm text-muted-foreground\">\n                    Content for step 1.\n                  </p>\n                </StepperContent>\n                <StepperContent value=\"step-2\">\n                  <p className=\"text-sm text-muted-foreground\">\n                    Content for step 2.\n                  </p>\n                </StepperContent>\n                <StepperContent value=\"step-3\">\n                  <p className=\"text-sm text-muted-foreground\">\n                    Content for step 3.\n                  </p>\n                </StepperContent>\n                <div className=\"flex justify-between max-w-lg\">\n                  <StepperPrev asChild>\n                    <Button variant=\"outline\" size=\"sm\">\n                      Back\n                    </Button>\n                  </StepperPrev>\n                  <StepperNext asChild>\n                    <Button size=\"sm\">Next</Button>\n                  </StepperNext>\n                </div>\n              </Stepper>\n            </div>\n\n            <Separator />\n\n            {/* Non-interactive — controlled externally */}\n            <div>\n              <h4 className=\"mb-4\">Non-interactive (controlled)</h4>\n              <StepperControlled />\n            </div>\n          </div>\n        </PlaygroundSection>\n\n        {/* TreeView */}\n        <PlaygroundSection\n          title=\"TreeView\"\n          description=\"Generic accessible tree component with expand/collapse, keyboard navigation (ArrowUp/Down/Left/Right, Enter/Space), and optional row selection.\"\n          variant=\"card\"\n        >\n          <TreeViewDemo />\n        </PlaygroundSection>\n\n        {/* TreeView on a large level */}\n        <PlaygroundSection\n          title=\"TreeView -- a large level\"\n          description=\"5,000 children under one node. With virtualize, only the rows in view are in the DOM; the tree scrolls itself in a box of bounded height, and focus and the open node follow rows out of view. Typing a name jumps to it (type-to-find).\"\n          variant=\"card\"\n        >\n          <TreeLargeLevelsDemo />\n        </PlaygroundSection>\n      </div>\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Stepper — controlled demo\n// ---------------------------------------------------------------------------\n\nconst CONTROLLED_STEPS = [\n  { value: \"account\", title: \"Account\", description: \"Your details\" },\n  { value: \"profile\", title: \"Profile\", description: \"About you\" },\n  { value: \"review\", title: \"Review\", description: \"Confirm\" },\n];\n\nfunction StepperControlled() {\n  const [step, setStep] = useState(\"account\");\n  return (\n    <Stepper\n      value={step}\n      onValueChange={setStep}\n      nonInteractive\n      className=\"max-w-lg\"\n    >\n      <StepperList className=\"gap-2\">\n        {CONTROLLED_STEPS.map((s) => (\n          <StepperItem key={s.value} value={s.value}>\n            <StepperTrigger>\n              <StepperIndicator />\n              <div className=\"flex flex-col min-w-16\">\n                <StepperTitle>{s.title}</StepperTitle>\n                <StepperDescription>{s.description}</StepperDescription>\n              </div>\n            </StepperTrigger>\n            <StepperSeparator />\n          </StepperItem>\n        ))}\n      </StepperList>\n      {CONTROLLED_STEPS.map((s) => (\n        <StepperContent key={s.value} value={s.value}>\n          <p className=\"text-sm text-muted-foreground\">\n            Content for {s.title}.\n          </p>\n        </StepperContent>\n      ))}\n      <div className=\"flex justify-between max-w-lg\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          disabled={step === CONTROLLED_STEPS[0].value}\n          onClick={() => {\n            const i = CONTROLLED_STEPS.findIndex((s) => s.value === step);\n            if (i > 0) setStep(CONTROLLED_STEPS[i - 1].value);\n          }}\n        >\n          Back\n        </Button>\n        <Button\n          size=\"sm\"\n          disabled={\n            step === CONTROLLED_STEPS[CONTROLLED_STEPS.length - 1].value\n          }\n          onClick={() => {\n            const i = CONTROLLED_STEPS.findIndex((s) => s.value === step);\n            if (i < CONTROLLED_STEPS.length - 1)\n              setStep(CONTROLLED_STEPS[i + 1].value);\n          }}\n        >\n          Next\n        </Button>\n      </div>\n    </Stepper>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// TreeView demo\n// ---------------------------------------------------------------------------\n\ninterface DemoData extends Record<string, unknown> {\n  label: string;\n}\n\nconst TREE_NODES: TreeNode<DemoData>[] = [\n  {\n    id: \"fruits\",\n    data: { label: \"Fruits\" },\n    hasChildren: true,\n    children: [\n      {\n        id: \"citrus\",\n        data: { label: \"Citrus\" },\n        hasChildren: true,\n        children: [\n          { id: \"lemon\", data: { label: \"Lemon\" }, hasChildren: false },\n          { id: \"orange\", data: { label: \"Orange\" }, hasChildren: false },\n        ],\n      },\n      { id: \"apple\", data: { label: \"Apple\" }, hasChildren: false },\n      { id: \"banana\", data: { label: \"Banana\" }, hasChildren: false },\n    ],\n  },\n  {\n    id: \"vegetables\",\n    data: { label: \"Vegetables\" },\n    hasChildren: true,\n    children: [\n      { id: \"carrot\", data: { label: \"Carrot\" }, hasChildren: false },\n      { id: \"broccoli\", data: { label: \"Broccoli\" }, hasChildren: false },\n    ],\n  },\n  {\n    id: \"grains\",\n    data: { label: \"Grains\" },\n    hasChildren: false,\n  },\n];\n\nfunction TreeViewDemo() {\n  const { expandedIds, onExpand, onCollapse } = useTreeExpansion();\n  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());\n  const [lastClicked, setLastClicked] = useState<string | null>(null);\n\n  const handleSelectionChange = (id: string, selected: boolean) =>\n    setSelectedIds((prev) => {\n      const next = new Set(prev);\n      if (selected) next.add(id);\n      else next.delete(id);\n      return next;\n    });\n\n  return (\n    <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-8\">\n      {/* Without selection */}\n      <div>\n        <h4 className=\"mb-3\">Default (click to activate)</h4>\n        <p className=\"text-sm text-muted-foreground mb-3\">\n          Keyboard: ArrowUp/Down to move, ArrowRight to expand, ArrowLeft to\n          collapse or go to parent, Enter/Space to activate.\n        </p>\n        <TreeView<DemoData>\n          nodes={TREE_NODES}\n          expandedIds={expandedIds}\n          onExpand={onExpand}\n          onCollapse={onCollapse}\n          onNodeClick={(node) => setLastClicked(node.id)}\n          onNodeActivate={(node) => setLastClicked(node.id)}\n          renderNode={(node) => (\n            <span className=\"text-sm\">{node.data.label}</span>\n          )}\n          className=\"max-w-xs\"\n        />\n        {lastClicked && (\n          <p className=\"mt-3 text-xs text-muted-foreground\">\n            Last activated: <span className=\"font-mono\">{lastClicked}</span>\n          </p>\n        )}\n      </div>\n\n      {/* With row selection */}\n      <div>\n        <h4 className=\"mb-3\">With row selection</h4>\n        <p className=\"text-sm text-muted-foreground mb-3\">\n          Checkboxes appear when onSelectionChange is provided. State is\n          independent of expand/collapse.\n        </p>\n        <TreeView<DemoData>\n          nodes={TREE_NODES}\n          expandedIds={expandedIds}\n          onExpand={onExpand}\n          onCollapse={onCollapse}\n          selectedIds={selectedIds}\n          onSelectionChange={handleSelectionChange}\n          renderNode={(node) => (\n            <span className=\"text-sm\">{node.data.label}</span>\n          )}\n          className=\"max-w-xs\"\n        />\n        {selectedIds.size > 0 && (\n          <p className=\"mt-3 text-xs text-muted-foreground\">\n            Selected:{\" \"}\n            <span className=\"font-mono\">{[...selectedIds].join(\", \")}</span>\n          </p>\n        )}\n      </div>\n    </div>\n  );\n}\n","/**\n * TreeView on a large level: an entity type with 5,000 products under one node,\n * in a box of fixed height -- with virtualize (only the rows in view are in the\n * DOM) or without, to compare. A click opens a node (activeId); the arrow keys\n * move through rows out of view; typing a name (\"product-4321\") jumps to it;\n * scrolled deep, the parent stays pinned at the top (stickyParents), one click\n * away; Home and End go to the first and the last row.\n */\nimport React, { useMemo, useState } from \"react\";\nimport { TreeView, type TreeNode } from \"@petrarca/sonnet-ui\";\n\ninterface Item {\n  label: string;\n}\n\nconst PRODUCTS = 5000;\n\nconst NODES: TreeNode<Item>[] = [\n  {\n    id: \"product\",\n    data: { label: `product (${PRODUCTS})` },\n    hasChildren: true,\n    children: Array.from({ length: PRODUCTS }, (_, i) => ({\n      id: `product-${i}`,\n      data: { label: `product-${String(i).padStart(4, \"0\")}` },\n      hasChildren: false,\n    })),\n  },\n  {\n    id: \"source\",\n    data: { label: \"source (3)\" },\n    hasChildren: true,\n    children: [\"billing\", \"portal\", \"search\"].map((name) => ({\n      id: `source-${name}`,\n      data: { label: name },\n      hasChildren: false,\n    })),\n  },\n];\n\nexport function TreeLargeLevelsDemo(): React.ReactElement {\n  const [virtualize, setVirtualize] = useState(true);\n  const [expandedIds, setExpandedIds] = useState(new Set([\"product\"]));\n  const [activeId, setActiveId] = useState<string>();\n  // How many rows the DOM holds, to see what virtualize saves.\n  const [rendered, setRendered] = useState(0);\n  const countRef = useMemo(\n    () => (el: HTMLDivElement | null) => {\n      if (!el) return;\n      const observer = new MutationObserver(() =>\n        setRendered(el.querySelectorAll('[role=\"treeitem\"]').length),\n      );\n      observer.observe(el, { childList: true, subtree: true });\n      setRendered(el.querySelectorAll('[role=\"treeitem\"]').length);\n    },\n    [],\n  );\n\n  return (\n    <div className=\"space-y-3\">\n      <label className=\"flex items-center gap-2 text-sm\">\n        <input\n          type=\"checkbox\"\n          checked={virtualize}\n          onChange={(e) => setVirtualize(e.target.checked)}\n        />\n        virtualize\n      </label>\n      <p className=\"text-xs text-muted-foreground\">\n        Click a row, then type a name -- \"product-4321\" -- to jump to it; the\n        parent stays pinned at the top, a click away; Home/End. Rows in the DOM:{\" \"}\n        <span className=\"font-mono\">{rendered}</span>\n        {activeId && (\n          <>\n            {\" \"}\n            -- open: <span className=\"font-mono\">{activeId}</span>\n          </>\n        )}\n      </p>\n      <div\n        ref={countRef}\n        className=\"h-80 max-w-sm overflow-y-auto rounded-md border p-1\"\n      >\n        <TreeView<Item>\n          key={String(virtualize)}\n          nodes={NODES}\n          expandedIds={expandedIds}\n          onExpand={(id) => setExpandedIds((s) => new Set([...s, id]))}\n          onCollapse={(id) =>\n            setExpandedIds((s) => new Set([...s].filter((x) => x !== id)))\n          }\n          onNodeClick={(node) => setActiveId(node.id)}\n          activeId={activeId}\n          virtualize={virtualize}\n          getTypeAheadLabel={(node) => node.data.label}\n          stickyParents\n          label=\"Products\"\n          renderNode={(node) => (\n            <span className=\"truncate\">{node.data.label}</span>\n          )}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["useState","TreeView","jsx","jsxs","useState","TreeView"]}

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { LucideIcon } from 'lucide-react';
 import { ShellModule } from '@petrarca/sonnet-shell';
-import React$1 from 'react';
+import react__default from 'react';
 
 /**
  * Playground entry types.
@@ -17,6 +17,8 @@ interface PlaygroundEntry {
     id: string;
     /** Display title on the overview tile. */
     title: string;
+    /** A shorter label for the navigation; default: the title. */
+    navLabel?: string;
     /** Short description shown below the title. */
     description: string;
     /** Lucide icon component for the tile. */
@@ -116,7 +118,7 @@ interface PlaygroundOverviewProps {
     grouped?: boolean;
 }
 /** Developer playground overview -- card grid linking to all registered pages. */
-declare function PlaygroundOverview({ registry, basePath, title, subtitle, grouped: initialGrouped, }: PlaygroundOverviewProps): React$1.ReactElement;
+declare function PlaygroundOverview({ registry, basePath, title, subtitle, grouped: initialGrouped, }: PlaygroundOverviewProps): react__default.ReactElement;
 
 /**
  * Shared section wrapper for playground pages.
@@ -131,17 +133,17 @@ declare function PlaygroundOverview({ registry, basePath, title, subtitle, group
 interface PlaygroundSectionProps {
     title: string;
     description?: string;
-    children: React$1.ReactNode;
+    children: react__default.ReactNode;
     variant?: "default" | "card";
 }
 interface ExampleBlockProps {
     label: string;
-    children: React$1.ReactNode;
+    children: react__default.ReactNode;
 }
 /** Labeled divider wrapper for individual component examples within a section. */
-declare function ExampleBlock({ label, children, }: ExampleBlockProps): React$1.ReactElement;
+declare function ExampleBlock({ label, children, }: ExampleBlockProps): react__default.ReactElement;
 /** Titled section wrapper used across playground pages. */
-declare function PlaygroundSection({ title, description, children, variant, }: PlaygroundSectionProps): React$1.ReactElement;
+declare function PlaygroundSection({ title, description, children, variant, }: PlaygroundSectionProps): react__default.ReactElement;
 
 /**
  * Playground-scoped settings (locale, ...).
@@ -166,9 +168,9 @@ interface PlaygroundSettingsContextValue {
     setSettings: (next: Partial<PlaygroundSettings>) => void;
 }
 interface PlaygroundSettingsProviderProps {
-    children: React$1.ReactNode;
+    children: react__default.ReactNode;
 }
-declare function PlaygroundSettingsProvider({ children, }: PlaygroundSettingsProviderProps): React$1.ReactElement;
+declare function PlaygroundSettingsProvider({ children, }: PlaygroundSettingsProviderProps): react__default.ReactElement;
 /** Access playground settings. Returns defaults when no provider is present. */
 declare function usePlaygroundSettings(): PlaygroundSettingsContextValue;
 
@@ -180,7 +182,7 @@ declare function usePlaygroundSettings(): PlaygroundSettingsContextValue;
  * playground routes.
  */
 
-declare function PlaygroundSettingsPanel(): React$1.ReactElement;
+declare function PlaygroundSettingsPanel(): react__default.ReactElement;
 
 declare const builtinEntries: PlaygroundEntry[];
 
@@ -210,4 +212,5 @@ declare const builtinEntries: PlaygroundEntry[];
  */
 declare function createPlaygroundRegistry(): PlaygroundRegistry;
 
-export { ExampleBlock, type PlaygroundColor, type PlaygroundEntry, type PlaygroundModuleOptions, PlaygroundOverview, PlaygroundRegistry, PlaygroundSection, type PlaygroundSettings, PlaygroundSettingsPanel, PlaygroundSettingsProvider, builtinEntries, createPlaygroundModule, createPlaygroundRegistry, usePlaygroundSettings };
+export { ExampleBlock, PlaygroundOverview, PlaygroundRegistry, PlaygroundSection, PlaygroundSettingsPanel, PlaygroundSettingsProvider, builtinEntries, createPlaygroundModule, createPlaygroundRegistry, usePlaygroundSettings };
+export type { PlaygroundColor, PlaygroundEntry, PlaygroundModuleOptions, PlaygroundSettings };

package/dist/index.js

@@ -113,6 +113,8 @@ import {
   Grid,
   Layers,
   Braces,
+  FileCode,
+  FileText,
   Check,
   Edit,
   Package,
@@ -120,7 +122,10 @@ import {
   Network,
   SquareTerminal,
   PencilRuler,
-  ShieldCheck
+  ClipboardList,
+  ShieldCheck,
+  FileJson,
+  ListTree
 } from "lucide-react";
 var builtinEntries = [
   {
@@ -152,7 +157,7 @@ var builtinEntries = [
     icon: Grid,
     color: "indigo",
     path: "core-components",
-    component: lazy(() => import("./PlayCoreComponents-YTEAS3GL.js")),
+    component: lazy(() => import("./PlayCoreComponents-EQ2BMY2S.js")),
     group: "Components",
     order: 0
   },
@@ -163,7 +168,7 @@ var builtinEntries = [
     icon: Layers,
     color: "emerald",
     path: "advanced-components",
-    component: lazy(() => import("./PlayAdvancedComponents-ZYK66UII.js")),
+    component: lazy(() => import("./PlayAdvancedComponents-VMUI472R.js")),
     group: "Components",
     order: 1
   },
@@ -175,7 +180,29 @@ var builtinEntries = [
     color: "amber",
     path: "json-editor",
     component: lazy(() => import("./PlayJsonEditor-SYZYEJEA.js")),
-    group: "Components",
+    group: "Content",
+    order: 0
+  },
+  {
+    id: "sonnet.code-editor",
+    title: "Code Editor",
+    description: "CodeMirror with the sonnet look: code read-only (full and compact), and text editing. Languages load on demand; large files draw only the visible lines.",
+    icon: FileCode,
+    color: "amber",
+    path: "code-editor",
+    component: lazy(() => import("./PlayCodeEditor-AMTFE5SW.js")),
+    group: "Content",
+    order: 1
+  },
+  {
+    id: "sonnet.markdown-viewer",
+    title: "Markdown Viewer",
+    description: "Markdown for reading: GitHub-flavoured, code blocks in the code editor, Mermaid diagrams, untrusted content sanitized; also streamed, for a chat.",
+    icon: FileText,
+    color: "amber",
+    path: "markdown-viewer",
+    component: lazy(() => import("./PlayMarkdownViewer-X6AIFO2U.js")),
+    group: "Content",
     order: 2
   },
   {
@@ -196,7 +223,7 @@ var builtinEntries = [
     icon: Edit,
     color: "purple",
     path: "forms",
-    component: lazy(() => import("./PlayForms-U2TWUX5L.js")),
+    component: lazy(() => import("./PlayForms-4CQNEBLS.js")),
     group: "Forms",
     order: 1
   },
@@ -207,10 +234,21 @@ var builtinEntries = [
     icon: Package,
     color: "indigo",
     path: "form-widgets",
-    component: lazy(() => import("./PlayFormWidgets-6JYFRTAL.js")),
+    component: lazy(() => import("./PlayFormWidgets-HP3VF2LK.js")),
     group: "Forms",
     order: 2
   },
+  {
+    id: "sonnet.coded-values",
+    title: "Coded Values",
+    description: "Codes from a list a terminology service serves: the coded-value widget -- a list or a search, a code or a coding, one or several -- its display, the coding table cell, and the codeable concept: one answer coded in several lists.",
+    icon: ListTree,
+    color: "indigo",
+    path: "coded-values",
+    component: lazy(() => import("./PlayCodedValues-G2EVIVMO.js")),
+    group: "Forms",
+    order: 3
+  },
   {
     id: "sonnet.schema-designer",
     title: "Schema Designer",
@@ -218,10 +256,21 @@ var builtinEntries = [
     icon: PencilRuler,
     color: "teal",
     path: "schema-designer",
-    component: lazy(() => import("./PlaySchemaDesigner-S4DBB53G.js")),
+    component: lazy(() => import("./PlaySchemaDesigner-ZQBA7AYO.js")),
     group: "Schemas",
     order: 0
   },
+  {
+    id: "sonnet.questionnaire-designer",
+    title: "Questionnaire Designer",
+    description: "Author a questionnaire as sections and questions, over the same JSON Schema and uiSchema as the Schema Designer. Parts it does not understand are kept as they are.",
+    icon: ClipboardList,
+    color: "teal",
+    path: "questionnaire-designer",
+    component: lazy(() => import("./PlayQuestionnaireDesigner-IR7TKSOT.js")),
+    group: "Schemas",
+    order: 1
+  },
   {
     id: "sonnet.data-components",
     title: "Data Components",
@@ -229,7 +278,7 @@ var builtinEntries = [
     icon: Table2,
     color: "teal",
     path: "data-components",
-    component: lazy(() => import("./PlayDataComponents-W44OITT5.js")),
+    component: lazy(() => import("./PlayDataComponents-W2KQHOI7.js")),
     group: "Data",
     order: 0
   },
@@ -240,7 +289,7 @@ var builtinEntries = [
     icon: Network,
     color: "cyan",
     path: "graph",
-    component: lazy(() => import("./PlayGraph-M4KQSFI7.js")),
+    component: lazy(() => import("./PlayGraph-25ZKQAQR.js")),
     group: "Graph",
     order: 0
   },
@@ -251,7 +300,7 @@ var builtinEntries = [
     icon: SquareTerminal,
     color: "orange",
     path: "shell-api",
-    component: lazy(() => import("./PlayShellApi-5O6VYR2X.js")),
+    component: lazy(() => import("./PlayShellApi-MMCQ2AKK.js")),
     group: "Shell",
     order: 0
   },
@@ -265,6 +314,18 @@ var builtinEntries = [
     component: lazy(() => import("./PlayAuth-SOEYPOOL.js")),
     group: "Shell",
     order: 1
+  },
+  {
+    id: "sonnet.fhir-questionnaire",
+    title: "HL7 FHIR Questionnaire",
+    navLabel: "FHIR Questionnaire",
+    description: "End to end, in FHIR R4 and R5: read a Questionnaire as a questionnaire on JSON Schema, fill its form, submit it as a QuestionnaireResponse, and read a response back.",
+    icon: FileJson,
+    color: "teal",
+    path: "fhir-questionnaire",
+    component: lazy(() => import("./PlayFhirQuestionnaire-TO35Q7CP.js")),
+    group: "HL7 FHIR",
+    order: 0
   }
 ];
 
@@ -514,7 +575,7 @@ function buildNavigation(registry, basePath) {
       id: `playground-${groupLabel.toLowerCase().replace(/\s+/g, "-")}`,
       heading: groupLabel,
       links: entries.map((e) => ({
-        label: e.title,
+        label: e.navLabel ?? e.title,
         path: `${basePath}/${e.path}`
       }))
     });