@petrarca/sonnet-playground 0.2.0 → 0.4.0

package/dist/{chunk-TZGJH7YS.js → chunk-YEBK2TUW.js}

@@ -1,3 +1,7 @@
+import {
+  PlaygroundSection
+} from "./chunk-C2EZ2ECG.js";
+
 // src/pages/PlayDataComponents.tsx
 import { useState, useMemo, useCallback } from "react";
 import { ArrowRight, ArrowUp } from "lucide-react";
@@ -9,16 +13,14 @@ import {
   Tabs,
   TabsContent,
   TabsList,
-  TabsTrigger
-} from "@petrarca/sonnet-ui";
-import { FormTextarea } from "@petrarca/sonnet-forms";
-import {
+  TabsTrigger,
   SearchInput,
   EntitySelect,
   EntityTable,
   createRenderer,
   EntityTree
 } from "@petrarca/sonnet-ui";
+import { FormTextarea } from "@petrarca/sonnet-forms";
 import { JsonEditor } from "@petrarca/sonnet-ui/json-editor";
 import {
   EMPTY_FILTER,
@@ -27,6 +29,7 @@ import {
   serializeFilterExpr
 } from "@petrarca/sonnet-core/search";
 import { toJsonSchema } from "@petrarca/sonnet-core/schema";
+import { useTreeExpansion } from "@petrarca/sonnet-core/hooks";
 import { z } from "zod/v4";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var MOCK_PATIENTS = [
@@ -190,7 +193,7 @@ var CUSTOM_RENDERERS = {
       (Date.now() - new Date(row.joined).getTime()) / 864e5
     );
     const isRecent = days < threshold;
-    return /* @__PURE__ */ jsxs("span", { className: isRecent ? "text-blue-600" : "text-muted-foreground", children: [
+    return /* @__PURE__ */ jsxs("span", { className: isRecent ? "text-primary" : "text-muted-foreground", children: [
       days,
       "d"
     ] });
@@ -235,6 +238,7 @@ var CUSTOM_RENDERER_SCHEMA = {
     }
   }
 };
+var SUBMIT_COUNT_RESET = -1;
 var SEARCH_FIELD_PRESETS = [
   { label: "name, role", fields: ["name", "role"] },
   { label: "name (single)", fields: ["name"] },
@@ -285,15 +289,6 @@ function FlatTermsInspector({ expr }) {
   const terms = flattenFilterExpr(expr);
   return /* @__PURE__ */ jsx("pre", { className: "mt-3 rounded-md bg-muted px-4 py-3 text-xs overflow-auto max-h-40", children: JSON.stringify(terms, null, 2) });
 }
-function SectionHeader({
-  title,
-  description
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-    /* @__PURE__ */ jsx("h2", { className: "heading-section mb-1", children: title }),
-    /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description })
-  ] });
-}
 function PlayDataComponents() {
   const [simpleExpr, setSimpleExpr] = useState(EMPTY_FILTER);
   const [simpleMode, setSimpleMode] = useState("explicit");
@@ -328,7 +323,7 @@ function PlayDataComponents() {
       const parsed = JSON.parse(schemaText);
       setActiveSchema(parsed);
       setFacetedExpr(EMPTY_FILTER);
-      setFacetedSubmitCount(-1);
+      setFacetedSubmitCount(SUBMIT_COUNT_RESET);
       setSchemaError("");
     } catch {
       setSchemaError("Invalid JSON -- cannot load");
@@ -400,330 +395,331 @@ function PlayDataComponents() {
     [filteredRows]
   );
   const [selectedPatient, setSelectedPatient] = useState(null);
-  return /* @__PURE__ */ jsxs("div", { className: "w-full py-12 px-4 max-w-4xl", children: [
-    /* @__PURE__ */ jsx("h1", { className: "mb-1", children: "Data Components" }),
-    /* @__PURE__ */ jsx("p", { className: "text-lg text-muted-foreground mb-10", children: "Interactive sandbox for SearchInput, EntitySelect, and EntityTable." }),
-    /* @__PURE__ */ jsxs("section", { className: "mb-12", children: [
-      /* @__PURE__ */ jsx(
-        SectionHeader,
-        {
-          title: "SearchInput \u2014 simple mode",
-          description: "No fields prop. Produces a single search term under the key 'search'."
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-4 mb-3", children: [
-        /* @__PURE__ */ jsx(
-          ToggleStrip,
-          {
-            label: "Mode",
-            options: MODE_OPTIONS,
-            value: simpleMode,
-            onChange: (m) => {
-              setSimpleMode(m);
-              setSimpleExpr(EMPTY_FILTER);
-            },
-            format: (m) => MODE_LABELS[m]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ToggleStrip,
-          {
-            label: "Min chars",
-            options: MIN_CHARS_OPTIONS,
-            value: simpleMinChars,
-            onChange: setSimpleMinChars,
-            format: (n) => n === 0 ? "off" : String(n)
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx(
-        SearchInput,
-        {
-          value: simpleExpr,
-          onChange: setSimpleExpr,
-          mode: simpleMode,
-          minChars: simpleMinChars,
-          placeholder: "Search...",
-          className: "max-w-sm"
-        }
-      ),
-      /* @__PURE__ */ jsx(FlatTermsInspector, { expr: simpleExpr })
-    ] }),
-    /* @__PURE__ */ jsxs("section", { className: "mb-12", children: [
-      /* @__PURE__ */ jsx(
-        SectionHeader,
-        {
-          title: "SearchInput \u2014 searchFields (multi-field OR)",
-          description: "Simple mode with searchFields prop. Typing text produces a FilterOr with one term per field. buildListParams serializes it as a q= expression for the server. Toggle field sets, mode, and minChars to explore different behaviours."
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-4 mb-2", children: /* @__PURE__ */ jsx(
-        ToggleStrip,
-        {
-          label: "Fields",
-          options: FIELD_PRESET_INDICES,
-          value: fieldsPresetIdx,
-          onChange: (idx) => {
-            setFieldsPresetIdx(idx);
-            setFieldsExpr(EMPTY_FILTER);
-          },
-          format: (idx) => SEARCH_FIELD_PRESETS[idx].label
-        }
-      ) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-4 mb-3", children: [
-        /* @__PURE__ */ jsx(
-          ToggleStrip,
-          {
-            label: "Mode",
-            options: MODE_OPTIONS,
-            value: fieldsMode,
-            onChange: (m) => {
-              setFieldsMode(m);
-              setFieldsExpr(EMPTY_FILTER);
-            },
-            format: (m) => MODE_LABELS[m]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ToggleStrip,
-          {
-            label: "Min chars",
-            options: MIN_CHARS_OPTIONS,
-            value: fieldsMinChars,
-            onChange: setFieldsMinChars,
-            format: (n) => n === 0 ? "off" : String(n)
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx(
-        SearchInput,
-        {
-          value: fieldsExpr,
-          onChange: setFieldsExpr,
-          searchFields: activeSearchFields,
-          mode: fieldsMode,
-          minChars: fieldsMinChars,
-          placeholder: `Search by ${activeSearchFields.join(" or ")}...`,
-          className: "max-w-sm"
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-2", children: [
-        /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
-          "searchFields: [",
-          activeSearchFields.map((f) => `"${f}"`).join(", "),
-          "]"
-        ] }),
-        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "FilterExpr AST:" }),
-        /* @__PURE__ */ jsx(FilterExprInspector, { expr: fieldsExpr }),
-        !isEmptyFilterExpr(fieldsExpr) && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Serialized q= string:" }),
-          /* @__PURE__ */ jsx("pre", { className: "rounded-md bg-muted px-4 py-3 text-xs overflow-auto", children: serializeFilterExpr(fieldsExpr) })
-        ] })
-      ] })
+  return /* @__PURE__ */ jsxs("div", { className: "w-full max-w-4xl space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h1", { children: "Data Components" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Interactive sandbox for SearchInput (simple, multi-field, faceted), EntityTable (with schema editor and custom renderers), EntitySelect, and EntityTree." })
     ] }),
-    /* @__PURE__ */ jsxs("section", { className: "mb-12", children: [
-      /* @__PURE__ */ jsx(
-        SectionHeader,
-        {
-          title: "SearchInput \u2014 faceted mode",
-          description: "Edit the JSON Schema on the left and load it into the search input. Add chips by picking a field and typing a value. Press Enter on empty input to fire onChange."
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "flex gap-4 items-start", children: [
-        /* @__PURE__ */ jsxs(Card, { className: "flex-1 min-w-0 p-3 flex flex-col gap-2", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground", children: "JSON Schema" }),
-          schemaError && /* @__PURE__ */ jsx(Badge, { variant: "destructive", className: "text-xs self-start", children: schemaError }),
+    /* @__PURE__ */ jsxs(
+      PlaygroundSection,
+      {
+        title: "SearchInput \u2014 simple mode",
+        description: "No fields prop. Produces a single search term under the key 'search'.",
+        variant: "card",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-4 mb-3", children: [
+            /* @__PURE__ */ jsx(
+              ToggleStrip,
+              {
+                label: "Mode",
+                options: MODE_OPTIONS,
+                value: simpleMode,
+                onChange: (m) => {
+                  setSimpleMode(m);
+                  setSimpleExpr(EMPTY_FILTER);
+                },
+                format: (m) => MODE_LABELS[m]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ToggleStrip,
+              {
+                label: "Min chars",
+                options: MIN_CHARS_OPTIONS,
+                value: simpleMinChars,
+                onChange: setSimpleMinChars,
+                format: (n) => n === 0 ? "off" : String(n)
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsx(
-            FormTextarea,
+            SearchInput,
             {
-              value: schemaText,
-              onChange: (e) => handleSchemaTextChange(e.target.value),
-              className: "font-mono text-xs",
-              rows: 18
+              value: simpleExpr,
+              onChange: setSimpleExpr,
+              mode: simpleMode,
+              minChars: simpleMinChars,
+              placeholder: "Search...",
+              className: "max-w-sm"
             }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "flex items-center self-center", children: /* @__PURE__ */ jsx(SimpleTooltip, { label: "Load schema into search", children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "default",
-            size: "icon",
-            onClick: handleLoadSchema,
-            disabled: !!schemaError,
-            children: /* @__PURE__ */ jsx(ArrowRight, { size: 18 })
-          }
-        ) }) }),
-        /* @__PURE__ */ jsxs(Card, { className: "flex-1 min-w-0 p-3 flex flex-col gap-3", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground", children: "Live search" }),
+          ),
+          /* @__PURE__ */ jsx(FlatTermsInspector, { expr: simpleExpr })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      PlaygroundSection,
+      {
+        title: "SearchInput \u2014 searchFields (multi-field OR)",
+        description: "Produces a FilterOr with one term per field. Toggle field sets, mode, and minChars to explore different behaviours.",
+        variant: "card",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-4 mb-3", children: [
+            /* @__PURE__ */ jsx(
+              ToggleStrip,
+              {
+                label: "Fields",
+                options: FIELD_PRESET_INDICES,
+                value: fieldsPresetIdx,
+                onChange: (idx) => {
+                  setFieldsPresetIdx(idx);
+                  setFieldsExpr(EMPTY_FILTER);
+                },
+                format: (idx) => SEARCH_FIELD_PRESETS[idx].label
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ToggleStrip,
+              {
+                label: "Mode",
+                options: MODE_OPTIONS,
+                value: fieldsMode,
+                onChange: (m) => {
+                  setFieldsMode(m);
+                  setFieldsExpr(EMPTY_FILTER);
+                },
+                format: (m) => MODE_LABELS[m]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ToggleStrip,
+              {
+                label: "Min chars",
+                options: MIN_CHARS_OPTIONS,
+                value: fieldsMinChars,
+                onChange: setFieldsMinChars,
+                format: (n) => n === 0 ? "off" : String(n)
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsx(
             SearchInput,
             {
-              value: facetedExpr,
-              onChange: handleFacetedChange,
-              schema: activeSchema,
-              mode: "explicit",
-              placeholder: "Add filter..."
+              value: fieldsExpr,
+              onChange: setFieldsExpr,
+              searchFields: activeSearchFields,
+              mode: fieldsMode,
+              minChars: fieldsMinChars,
+              placeholder: `Search by ${activeSearchFields.join(" or ")}...`,
+              className: "max-w-sm"
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
-            /* @__PURE__ */ jsx("span", { children: "onChange fired:" }),
-            /* @__PURE__ */ jsxs("span", { className: "font-mono font-medium text-foreground", children: [
-              facetedSubmitCount,
-              "x"
+          /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-2", children: [
+            /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+              "searchFields: [",
+              activeSearchFields.map((f) => `"${f}"`).join(", "),
+              "]"
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "FilterExpr AST:" }),
+            /* @__PURE__ */ jsx(FilterExprInspector, { expr: fieldsExpr }),
+            !isEmptyFilterExpr(fieldsExpr) && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Serialized q= string:" }),
+              /* @__PURE__ */ jsx("pre", { className: "rounded-md bg-muted px-4 py-3 text-xs overflow-auto", children: serializeFilterExpr(fieldsExpr) })
             ] })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PlaygroundSection,
+      {
+        title: "SearchInput \u2014 faceted mode",
+        description: "Edit the JSON Schema on the left and load it into the search input. Add chips by picking a field and typing a value. Press Enter on empty input to fire onChange.",
+        variant: "card",
+        children: /* @__PURE__ */ jsxs("div", { className: "flex gap-4 items-start", children: [
+          /* @__PURE__ */ jsxs(Card, { className: "flex-1 min-w-0 p-3 flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground", children: "JSON Schema" }),
+            schemaError && /* @__PURE__ */ jsx(Badge, { variant: "destructive", className: "text-xs self-start", children: schemaError }),
+            /* @__PURE__ */ jsx(
+              FormTextarea,
+              {
+                value: schemaText,
+                onChange: (e) => handleSchemaTextChange(e.target.value),
+                className: "font-mono text-xs",
+                rows: 18
+              }
+            )
           ] }),
-          /* @__PURE__ */ jsx(FilterExprInspector, { expr: facetedExpr })
+          /* @__PURE__ */ jsx("div", { className: "flex items-center self-center", children: /* @__PURE__ */ jsx(SimpleTooltip, { label: "Load schema into search", children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "default",
+              size: "icon",
+              onClick: handleLoadSchema,
+              disabled: !!schemaError,
+              children: /* @__PURE__ */ jsx(ArrowRight, { size: 18 })
+            }
+          ) }) }),
+          /* @__PURE__ */ jsxs(Card, { className: "flex-1 min-w-0 p-3 flex flex-col gap-3", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground", children: "Live search" }),
+            /* @__PURE__ */ jsx(
+              SearchInput,
+              {
+                value: facetedExpr,
+                onChange: handleFacetedChange,
+                schema: activeSchema,
+                mode: "explicit",
+                placeholder: "Add filter..."
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsx("span", { children: "onChange fired:" }),
+              /* @__PURE__ */ jsxs("span", { className: "font-mono font-medium text-foreground", children: [
+                facetedSubmitCount,
+                "x"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(FilterExprInspector, { expr: facetedExpr })
+          ] })
         ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("section", { className: "mb-12", children: [
-      /* @__PURE__ */ jsx(
-        SectionHeader,
-        {
-          title: "EntityTable with SearchInput",
-          description: "Faceted search wired to EntityTable. onChange fires only on submit (Enter on empty input) -- table filters when the user presses Enter. Edit the JSON Schema or UI Schema below and press Apply to see column changes live."
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        SearchInput,
-        {
-          value: tableExpr,
-          onChange: setTableExpr,
-          schema: SEARCH_FACET_SCHEMA,
-          mode: "explicit",
-          placeholder: "Filter users... (press Enter to apply)",
-          className: "mb-4 max-w-sm"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        EntityTable,
-        {
-          schema: activeTableSchema,
-          uiSchema: activeTableUiSchema,
-          data: tableData,
-          isLoading: false,
-          isError: false,
-          entityLabel: "users",
-          isFiltered: !isEmptyFilterExpr(tableExpr)
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(Card, { className: "border shadow-sm p-4 flex flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between mb-2", children: /* @__PURE__ */ jsxs(
-        Tabs,
-        {
-          value: tableSchemaTab,
-          onValueChange: setTableSchemaTab,
-          className: "flex flex-col flex-1",
-          children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ jsxs(TabsList, { children: [
-                /* @__PURE__ */ jsx(TabsTrigger, { value: "schema", children: "JSON Schema" }),
-                /* @__PURE__ */ jsx(TabsTrigger, { value: "uischema", children: "UI Schema" })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                tableSchemaError && /* @__PURE__ */ jsx(Badge, { variant: "destructive", className: "text-xs", children: tableSchemaError }),
-                /* @__PURE__ */ jsx(SimpleTooltip, { label: "Apply schema to table above", children: /* @__PURE__ */ jsx(
-                  Button,
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      PlaygroundSection,
+      {
+        title: "EntityTable with SearchInput",
+        description: "Faceted search wired to EntityTable. onChange fires only on submit (Enter on empty input) -- table filters when the user presses Enter. Edit the JSON Schema or UI Schema below and press Apply to see column changes live.",
+        variant: "card",
+        children: [
+          /* @__PURE__ */ jsx(
+            SearchInput,
+            {
+              value: tableExpr,
+              onChange: setTableExpr,
+              schema: SEARCH_FACET_SCHEMA,
+              mode: "explicit",
+              placeholder: "Filter users... (press Enter to apply)",
+              className: "mb-4 max-w-sm"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            EntityTable,
+            {
+              schema: activeTableSchema,
+              uiSchema: activeTableUiSchema,
+              data: tableData,
+              isLoading: false,
+              isError: false,
+              entityLabel: "users",
+              isFiltered: !isEmptyFilterExpr(tableExpr)
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(Card, { className: "border shadow-sm p-4 flex flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between mb-2", children: /* @__PURE__ */ jsxs(
+            Tabs,
+            {
+              value: tableSchemaTab,
+              onValueChange: setTableSchemaTab,
+              className: "flex flex-col flex-1",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxs(TabsList, { children: [
+                    /* @__PURE__ */ jsx(TabsTrigger, { value: "schema", children: "JSON Schema" }),
+                    /* @__PURE__ */ jsx(TabsTrigger, { value: "uischema", children: "UI Schema" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                    tableSchemaError && /* @__PURE__ */ jsx(Badge, { variant: "destructive", className: "text-xs", children: tableSchemaError }),
+                    /* @__PURE__ */ jsx(SimpleTooltip, { label: "Apply schema to table above", children: /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "default",
+                        size: "icon",
+                        onClick: handleApplyTableSchema,
+                        disabled: !!tableSchemaError,
+                        children: /* @__PURE__ */ jsx(ArrowUp, { size: 18 })
+                      }
+                    ) })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx(TabsContent, { value: "schema", className: "mt-2", children: /* @__PURE__ */ jsx(
+                  JsonEditor,
+                  {
+                    value: tableSchemaText,
+                    editablePaths: ["/"],
+                    onChange: handleTableSchemaTextChange,
+                    height: "280px",
+                    className: "rounded-md border overflow-hidden"
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(TabsContent, { value: "uischema", className: "mt-2", children: /* @__PURE__ */ jsx(
+                  JsonEditor,
                   {
-                    variant: "default",
-                    size: "icon",
-                    onClick: handleApplyTableSchema,
-                    disabled: !!tableSchemaError,
-                    children: /* @__PURE__ */ jsx(ArrowUp, { size: 18 })
+                    value: tableUiSchemaText,
+                    editablePaths: ["/"],
+                    onChange: handleTableUiSchemaTextChange,
+                    height: "280px",
+                    className: "rounded-md border overflow-hidden"
                   }
                 ) })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx(TabsContent, { value: "schema", className: "mt-2", children: /* @__PURE__ */ jsx(
-              JsonEditor,
-              {
-                value: tableSchemaText,
-                editablePaths: ["/"],
-                onChange: handleTableSchemaTextChange,
-                height: "280px",
-                className: "rounded-md border overflow-hidden"
-              }
-            ) }),
-            /* @__PURE__ */ jsx(TabsContent, { value: "uischema", className: "mt-2", children: /* @__PURE__ */ jsx(
-              JsonEditor,
-              {
-                value: tableUiSchemaText,
-                editablePaths: ["/"],
-                onChange: handleTableUiSchemaTextChange,
-                height: "280px",
-                className: "rounded-md border overflow-hidden"
-              }
-            ) })
-          ]
-        }
-      ) }) }) })
-    ] }),
-    /* @__PURE__ */ jsxs("section", { className: "mb-12", children: [
-      /* @__PURE__ */ jsx(
-        SectionHeader,
-        {
-          title: "EntityTable with Local Renderers",
-          description: "Same sample data rendered with x- prefixed local renderers passed via the renderers prop. The schema is pure data -- renderer functions live in code and are resolved by name. Three custom renderers: x-play-initials (avatar from name), x-play-role-icon (letter prefix from options), x-play-tenure (computed days with threshold)."
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        EntityTable,
-        {
-          schema: CUSTOM_RENDERER_SCHEMA,
-          renderers: CUSTOM_RENDERERS,
-          data: {
-            data: ALL_ROWS,
-            meta: {
-              total: ALL_ROWS.length,
-              limit: ALL_ROWS.length,
-              offset: 0,
-              has_next: false,
-              has_prev: false
+              ]
             }
-          },
-          isLoading: false,
-          isError: false,
-          entityLabel: "users"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("section", { className: "mb-12", children: [
-      /* @__PURE__ */ jsx(
-        SectionHeader,
-        {
-          title: "EntitySelect",
-          description: "Searchable single-select backed by a static mock patient fetcher. Search text is filtered client-side. Available as a form widget via x-ui-widget: 'entity-select'."
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "flex gap-6 items-start", children: [
-        /* @__PURE__ */ jsx(
-          EntitySelect,
+          ) }) }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PlaygroundSection,
+      {
+        title: "EntityTable with Local Renderers",
+        description: "Same sample data rendered with x- prefixed local renderers passed via the renderers prop. The schema is pure data -- renderer functions live in code and are resolved by name. Three custom renderers: x-play-initials (avatar from name), x-play-role-icon (letter prefix from options), x-play-tenure (computed days with threshold).",
+        variant: "card",
+        children: /* @__PURE__ */ jsx(
+          EntityTable,
           {
-            fetcher: patientFetcher,
-            queryKey: "playground-patients",
-            value: selectedPatient,
-            onChange: setSelectedPatient,
-            label: "Patient",
-            placeholder: "Select patient...",
-            searchPlaceholder: "Search patients...",
-            className: "max-w-xs"
+            schema: CUSTOM_RENDERER_SCHEMA,
+            renderers: CUSTOM_RENDERERS,
+            data: {
+              data: ALL_ROWS,
+              meta: {
+                total: ALL_ROWS.length,
+                limit: ALL_ROWS.length,
+                offset: 0,
+                has_next: false,
+                has_prev: false
+              }
+            },
+            isLoading: false,
+            isError: false,
+            entityLabel: "users"
           }
-        ),
-        /* @__PURE__ */ jsxs(Card, { className: "flex-1 min-w-0 p-3", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-2", children: "Selected value" }),
-          /* @__PURE__ */ jsx("pre", { className: "rounded-md bg-muted px-4 py-3 text-xs overflow-auto", children: JSON.stringify(selectedPatient, null, 2) })
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PlaygroundSection,
+      {
+        title: "EntitySelect",
+        description: "Searchable single-select backed by a static mock patient fetcher. Search text is filtered client-side. Available as a form widget via x-ui-widget: 'entity-select'.",
+        variant: "card",
+        children: /* @__PURE__ */ jsxs("div", { className: "flex gap-6 items-start", children: [
+          /* @__PURE__ */ jsx(
+            EntitySelect,
+            {
+              fetcher: patientFetcher,
+              queryKey: "playground-patients",
+              value: selectedPatient,
+              onChange: setSelectedPatient,
+              label: "Patient",
+              placeholder: "Select patient...",
+              searchPlaceholder: "Search patients...",
+              className: "max-w-xs"
+            }
+          ),
+          /* @__PURE__ */ jsxs(Card, { className: "flex-1 min-w-0 p-3", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-2", children: "Selected value" }),
+            /* @__PURE__ */ jsx("pre", { className: "rounded-md bg-muted px-4 py-3 text-xs overflow-auto", children: JSON.stringify(selectedPatient, null, 2) })
+          ] })
         ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("section", { className: "mb-12", children: [
-      /* @__PURE__ */ jsx(
-        SectionHeader,
-        {
-          title: "EntityTree",
-          description: "Schema-driven tree component built on TreeView. Columns are resolved from a JSON Schema using the same resolveColumns pipeline as EntityTable. Supports expand/collapse, row selection, loading/error/empty states, and custom cell renderers."
-        }
-      ),
-      /* @__PURE__ */ jsx(EntityTreeDemo, {})
-    ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PlaygroundSection,
+      {
+        title: "EntityTree",
+        description: "Schema-driven tree component built on TreeView. Columns are resolved from a JSON Schema using the same resolveColumns pipeline as EntityTable. Supports expand/collapse, row selection, loading/error/empty states, and custom cell renderers.",
+        variant: "card",
+        children: /* @__PURE__ */ jsx(EntityTreeDemo, {})
+      }
+    )
   ] });
 }
 var OrgSchema = z.object({
@@ -786,24 +782,22 @@ var ORG_NODES = [
   }
 ];
 function EntityTreeDemo() {
-  const [expandedIds, setExpandedIds] = useState(/* @__PURE__ */ new Set());
+  const {
+    expandedIds: treeExpandedIds,
+    onExpand: onTreeExpand,
+    onCollapse: onTreeCollapse
+  } = useTreeExpansion();
   const [selectedIds, setSelectedIds] = useState(/* @__PURE__ */ new Set());
   const [activeId, setActiveId] = useState(null);
-  const handleExpand = (id) => setExpandedIds((prev) => /* @__PURE__ */ new Set([...prev, id]));
-  const handleCollapse = (id) => setExpandedIds((prev) => {
-    const next = new Set(prev);
-    next.delete(id);
-    return next;
-  });
   return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsx(
       EntityTree,
       {
         schema: ORG_TREE_SCHEMA,
         nodes: ORG_NODES,
-        expandedIds,
-        onExpand: handleExpand,
-        onCollapse: handleCollapse,
+        expandedIds: treeExpandedIds,
+        onExpand: onTreeExpand,
+        onCollapse: onTreeCollapse,
         onNodeSelect: (node) => setActiveId(node.id),
         onNodeEdit: (node) => setActiveId(node.id),
         activeNodeId: activeId ?? void 0,
@@ -834,4 +828,4 @@ function EntityTreeDemo() {
 export {
   PlayDataComponents
 };
-//# sourceMappingURL=chunk-TZGJH7YS.js.map
+//# sourceMappingURL=chunk-YEBK2TUW.js.map