@petrarca/sonnet-playground 0.1.2

package/dist/chunk-TZGJH7YS.js

@@ -0,0 +1,837 @@
+// src/pages/PlayDataComponents.tsx
+import { useState, useMemo, useCallback } from "react";
+import { ArrowRight, ArrowUp } from "lucide-react";
+import {
+  Badge,
+  Button,
+  Card,
+  SimpleTooltip,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger
+} from "@petrarca/sonnet-ui";
+import { FormTextarea } from "@petrarca/sonnet-forms";
+import {
+  SearchInput,
+  EntitySelect,
+  EntityTable,
+  createRenderer,
+  EntityTree
+} from "@petrarca/sonnet-ui";
+import { JsonEditor } from "@petrarca/sonnet-ui/json-editor";
+import {
+  EMPTY_FILTER,
+  flattenFilterExpr,
+  isEmptyFilterExpr,
+  serializeFilterExpr
+} from "@petrarca/sonnet-core/search";
+import { toJsonSchema } from "@petrarca/sonnet-core/schema";
+import { z } from "zod/v4";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var MOCK_PATIENTS = [
+  { value: "pat_001", label: "Alice Hartmann" },
+  { value: "pat_002", label: "Bob Nguyen" },
+  { value: "pat_003", label: "Carol Smith" },
+  { value: "pat_004", label: "David Okafor" },
+  { value: "pat_005", label: "Eva Larsson" },
+  { value: "pat_006", label: "Frank Torres" },
+  { value: "pat_007", label: "Grace Kim" },
+  { value: "pat_008", label: "Henry Bauer" }
+];
+var patientFetcher = ({ search } = {}) => {
+  const q = search?.toLowerCase() ?? "";
+  const results = q ? MOCK_PATIENTS.filter((p) => p.label.toLowerCase().includes(q)) : MOCK_PATIENTS;
+  return Promise.resolve(results);
+};
+var ALL_ROWS = [
+  {
+    id: "u-001",
+    name: "Alice Hartmann",
+    status: "active",
+    role: "admin",
+    joined: "2024-01-15"
+  },
+  {
+    id: "u-002",
+    name: "Bob Nguyen",
+    status: "active",
+    role: "editor",
+    joined: "2024-02-03"
+  },
+  {
+    id: "u-003",
+    name: "Carol Smith",
+    status: "inactive",
+    role: "viewer",
+    joined: "2024-03-20"
+  },
+  {
+    id: "u-004",
+    name: "David Okafor",
+    status: "pending",
+    role: "editor",
+    joined: "2024-04-11"
+  },
+  {
+    id: "u-005",
+    name: "Eva Larsson",
+    status: "active",
+    role: "admin",
+    joined: "2024-05-08"
+  },
+  {
+    id: "u-006",
+    name: "Frank Torres",
+    status: "inactive",
+    role: "viewer",
+    joined: "2024-06-22"
+  },
+  {
+    id: "u-007",
+    name: "Grace Kim",
+    status: "active",
+    role: "editor",
+    joined: "2024-07-14"
+  },
+  {
+    id: "u-008",
+    name: "Henry Bauer",
+    status: "pending",
+    role: "viewer",
+    joined: "2024-08-30"
+  }
+];
+var STATUS_COLOR = {
+  active: "green",
+  inactive: "violet",
+  pending: "yellow"
+};
+var PlaygroundFacets = z.object({
+  search: z.string().meta({ "x-ui-title": "Name" }),
+  status: z.enum(["active", "inactive", "pending"]).optional().meta({
+    "x-ui-title": "Status",
+    "x-ui-options": {
+      enumNames: {
+        active: "Active",
+        inactive: "Inactive",
+        pending: "Pending"
+      }
+    }
+  }),
+  role: z.string().optional().meta({ "x-ui-title": "Role" })
+});
+var SEARCH_FACET_SCHEMA = toJsonSchema(PlaygroundFacets);
+var SAMPLE_SCHEMA = {
+  title: "User",
+  type: "object",
+  properties: {
+    name: {
+      type: "string",
+      title: "Name",
+      "x-ui-column": { order: 0 },
+      "x-ui-cell": "bold"
+    },
+    status: {
+      type: "string",
+      title: "Status",
+      "x-ui-column": { order: 1 },
+      "x-ui-cell": "badge",
+      "x-ui-cell-options": { colors: STATUS_COLOR }
+    },
+    role: {
+      type: "string",
+      title: "Role",
+      "x-ui-column": { order: 2 },
+      "x-ui-cell": "muted"
+    },
+    id: {
+      type: "string",
+      title: "ID",
+      "x-ui-column": { order: 3 },
+      "x-ui-cell": "code"
+    },
+    joined: {
+      type: "string",
+      format: "date",
+      title: "Joined",
+      "x-ui-column": { order: 4 }
+    }
+  }
+};
+var SAMPLE_UI_SCHEMA = {};
+var ROLE_ICONS = {
+  admin: "A",
+  editor: "E",
+  viewer: "V"
+};
+var CUSTOM_RENDERERS = {
+  // Extract initials from the name, display as avatar circle + name.
+  "x-play-initials": createRenderer((row) => {
+    const initials = row.name.split(" ").map((w) => w[0]).join("");
+    return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center h-7 w-7 rounded-full bg-muted text-xs font-medium shrink-0", children: initials }),
+      /* @__PURE__ */ jsx("span", { className: "font-medium", children: row.name })
+    ] });
+  }),
+  // Role with a letter prefix read from options.icons.
+  "x-play-role-icon": createRenderer((row, options) => {
+    const icons = options.icons ?? {};
+    const icon = icons[row.role] ?? "?";
+    return /* @__PURE__ */ jsxs("span", { children: [
+      /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center h-5 w-5 rounded bg-muted text-xs font-mono mr-1.5", children: icon }),
+      row.role
+    ] });
+  }),
+  // Compute days since joined, color-coded by threshold from options.
+  "x-play-tenure": createRenderer((row, options) => {
+    const threshold = options.recentDays ?? 365;
+    const days = Math.floor(
+      (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: [
+      days,
+      "d"
+    ] });
+  })
+};
+var CUSTOM_RENDERER_SCHEMA = {
+  title: "User (custom renderers)",
+  type: "object",
+  properties: {
+    name: {
+      type: "string",
+      title: "Name",
+      "x-ui-column": { order: 0 },
+      "x-ui-cell": "x-play-initials"
+    },
+    role: {
+      type: "string",
+      title: "Role",
+      "x-ui-column": { order: 1 },
+      "x-ui-cell": "x-play-role-icon",
+      "x-ui-cell-options": { icons: ROLE_ICONS }
+    },
+    status: {
+      type: "string",
+      title: "Status",
+      "x-ui-column": { order: 2 },
+      "x-ui-cell": "badge",
+      "x-ui-cell-options": { colors: STATUS_COLOR }
+    },
+    joined: {
+      type: "string",
+      title: "Tenure",
+      "x-ui-column": { order: 3 },
+      "x-ui-cell": "x-play-tenure",
+      "x-ui-cell-options": { recentDays: 500 }
+    },
+    id: {
+      type: "string",
+      title: "ID",
+      "x-ui-column": { order: 4 },
+      "x-ui-cell": "code"
+    }
+  }
+};
+var SEARCH_FIELD_PRESETS = [
+  { label: "name, role", fields: ["name", "role"] },
+  { label: "name (single)", fields: ["name"] },
+  { label: "name, role, status", fields: ["name", "role", "status"] }
+];
+function ToggleStrip({
+  label,
+  options,
+  value,
+  onChange,
+  format,
+  containerClassName
+}) {
+  const fmt = format ?? String;
+  return /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-3 ${containerClassName ?? ""}`, children: [
+    /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+      label,
+      ":"
+    ] }),
+    options.map((opt) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onChange(opt),
+        className: [
+          "px-3 py-1 rounded-full text-xs font-medium transition-colors",
+          value === opt ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:text-foreground"
+        ].join(" "),
+        children: fmt(opt)
+      },
+      String(opt)
+    ))
+  ] });
+}
+var MODE_OPTIONS = ["explicit", "debounce"];
+var MODE_LABELS = {
+  explicit: "Explicit (Enter)",
+  debounce: "Debounce (300 ms)"
+};
+var MIN_CHARS_OPTIONS = [0, 1, 2, 3];
+var FIELD_PRESET_INDICES = SEARCH_FIELD_PRESETS.map(
+  (_, i) => i
+);
+function FilterExprInspector({ 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(expr, null, 2) });
+}
+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");
+  const [simpleMinChars, setSimpleMinChars] = useState(0);
+  const [fieldsExpr, setFieldsExpr] = useState(EMPTY_FILTER);
+  const [fieldsMode, setFieldsMode] = useState("explicit");
+  const [fieldsMinChars, setFieldsMinChars] = useState(0);
+  const [fieldsPresetIdx, setFieldsPresetIdx] = useState(0);
+  const activeSearchFields = SEARCH_FIELD_PRESETS[fieldsPresetIdx].fields;
+  const [facetedExpr, setFacetedExpr] = useState(EMPTY_FILTER);
+  const [facetedSubmitCount, setFacetedSubmitCount] = useState(0);
+  const handleFacetedChange = useCallback((expr) => {
+    setFacetedExpr(expr);
+    setFacetedSubmitCount((n) => n + 1);
+  }, []);
+  const [schemaText, setSchemaText] = useState(
+    () => JSON.stringify(toJsonSchema(PlaygroundFacets), null, 2)
+  );
+  const [schemaError, setSchemaError] = useState("");
+  const [activeSchema, setActiveSchema] = useState(SEARCH_FACET_SCHEMA);
+  const handleSchemaTextChange = useCallback((value) => {
+    setSchemaText(value);
+    try {
+      JSON.parse(value);
+      setSchemaError("");
+    } catch {
+      setSchemaError("Invalid JSON");
+    }
+  }, []);
+  const handleLoadSchema = useCallback(() => {
+    try {
+      const parsed = JSON.parse(schemaText);
+      setActiveSchema(parsed);
+      setFacetedExpr(EMPTY_FILTER);
+      setFacetedSubmitCount(-1);
+      setSchemaError("");
+    } catch {
+      setSchemaError("Invalid JSON -- cannot load");
+    }
+  }, [schemaText]);
+  const [tableSchemaText, setTableSchemaText] = useState(
+    () => JSON.stringify(SAMPLE_SCHEMA, null, 2)
+  );
+  const [tableUiSchemaText, setTableUiSchemaText] = useState(
+    () => JSON.stringify(SAMPLE_UI_SCHEMA, null, 2)
+  );
+  const [tableSchemaError, setTableSchemaError] = useState("");
+  const [activeTableSchema, setActiveTableSchema] = useState(SAMPLE_SCHEMA);
+  const [activeTableUiSchema, setActiveTableUiSchema] = useState(SAMPLE_UI_SCHEMA);
+  const [tableSchemaTab, setTableSchemaTab] = useState("schema");
+  const handleTableSchemaTextChange = useCallback((value) => {
+    setTableSchemaText(value);
+    try {
+      JSON.parse(value);
+      setTableSchemaError("");
+    } catch {
+      setTableSchemaError("Invalid JSON");
+    }
+  }, []);
+  const handleTableUiSchemaTextChange = useCallback((value) => {
+    setTableUiSchemaText(value);
+    try {
+      JSON.parse(value);
+      setTableSchemaError("");
+    } catch {
+      setTableSchemaError("Invalid JSON");
+    }
+  }, []);
+  const handleApplyTableSchema = useCallback(() => {
+    try {
+      const schema = JSON.parse(tableSchemaText);
+      const uiSchema = JSON.parse(tableUiSchemaText);
+      setActiveTableSchema(schema);
+      setActiveTableUiSchema(uiSchema);
+      setTableSchemaError("");
+    } catch {
+      setTableSchemaError("Invalid JSON -- cannot apply");
+    }
+  }, [tableSchemaText, tableUiSchemaText]);
+  const [tableExpr, setTableExpr] = useState(EMPTY_FILTER);
+  const filteredRows = useMemo(() => {
+    const terms = flattenFilterExpr(tableExpr);
+    if (terms.length === 0) return ALL_ROWS;
+    return ALL_ROWS.filter(
+      (row) => terms.every(({ key, value }) => {
+        const v = value.toLowerCase();
+        if (key === "status") return row.status.toLowerCase().includes(v);
+        if (key === "role") return row.role.toLowerCase().includes(v);
+        return row.name.toLowerCase().includes(v);
+      })
+    );
+  }, [tableExpr]);
+  const tableData = useMemo(
+    () => ({
+      data: filteredRows,
+      meta: {
+        total: filteredRows.length,
+        limit: filteredRows.length,
+        offset: 0,
+        has_next: false,
+        has_prev: false
+      }
+    }),
+    [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) })
+        ] })
+      ] })
+    ] }),
+    /* @__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__ */ jsx(
+            FormTextarea,
+            {
+              value: schemaText,
+              onChange: (e) => handleSchemaTextChange(e.target.value),
+              className: "font-mono text-xs",
+              rows: 18
+            }
+          )
+        ] }),
+        /* @__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,
+                  {
+                    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,
+              {
+                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,
+          {
+            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, {})
+    ] })
+  ] });
+}
+var OrgSchema = z.object({
+  name: z.string().meta({ title: "Name", "x-ui-column": { order: 0 } }),
+  type: z.string().meta({ title: "Type", "x-ui-column": { order: 1 } }),
+  headcount: z.number().meta({ title: "Headcount", "x-ui-column": { order: 2 } })
+});
+var ORG_TREE_SCHEMA = toJsonSchema(OrgSchema);
+var ORG_NODES = [
+  {
+    id: "eng",
+    data: { name: "Engineering", type: "Division", headcount: 120 },
+    hasChildren: true,
+    children: [
+      {
+        id: "frontend",
+        data: { name: "Frontend", type: "Team", headcount: 18 },
+        hasChildren: true,
+        children: [
+          {
+            id: "design-sys",
+            data: { name: "Design System", type: "Squad", headcount: 5 },
+            hasChildren: false
+          }
+        ]
+      },
+      {
+        id: "backend",
+        data: { name: "Backend", type: "Team", headcount: 32 },
+        hasChildren: false
+      },
+      {
+        id: "infra",
+        data: { name: "Infrastructure", type: "Team", headcount: 14 },
+        hasChildren: false
+      }
+    ]
+  },
+  {
+    id: "product",
+    data: { name: "Product", type: "Division", headcount: 45 },
+    hasChildren: true,
+    children: [
+      {
+        id: "research",
+        data: { name: "Research", type: "Team", headcount: 8 },
+        hasChildren: false
+      },
+      {
+        id: "pm",
+        data: { name: "Product Management", type: "Team", headcount: 12 },
+        hasChildren: false
+      }
+    ]
+  },
+  {
+    id: "ops",
+    data: { name: "Operations", type: "Division", headcount: 30 },
+    hasChildren: false
+  }
+];
+function EntityTreeDemo() {
+  const [expandedIds, setExpandedIds] = useState(/* @__PURE__ */ new Set());
+  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,
+        onNodeSelect: (node) => setActiveId(node.id),
+        onNodeEdit: (node) => setActiveId(node.id),
+        activeNodeId: activeId ?? void 0,
+        selectedIds,
+        onSelectionChange: (id, selected) => setSelectedIds((prev) => {
+          const next = new Set(prev);
+          if (selected) next.add(id);
+          else next.delete(id);
+          return next;
+        }),
+        entityLabel: "departments"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-6 text-xs text-muted-foreground", children: [
+      activeId && /* @__PURE__ */ jsxs("span", { children: [
+        "Active: ",
+        /* @__PURE__ */ jsx("span", { className: "font-mono", children: activeId })
+      ] }),
+      selectedIds.size > 0 && /* @__PURE__ */ jsxs("span", { children: [
+        "Selected:",
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "font-mono", children: [...selectedIds].join(", ") })
+      ] })
+    ] })
+  ] });
+}
+
+export {
+  PlayDataComponents
+};
+//# sourceMappingURL=chunk-TZGJH7YS.js.map