@petrarca/sonnet-playground 0.7.0 → 0.9.0

package/dist/chunk-O2QMWJZI.js

@@ -1,881 +0,0 @@
-import {
-  PlaygroundSection
-} from "./chunk-C2EZ2ECG.js";
-
-// 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,
-  SearchInput,
-  EntitySelect,
-  EntityTable,
-  createRenderer,
-  EntityTree,
-  PropertyList
-} from "@petrarca/sonnet-ui";
-import { FormTextarea } from "@petrarca/sonnet-forms";
-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 { useTreeExpansion } from "@petrarca/sonnet-core/hooks";
-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-primary" : "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 SUBMIT_COUNT_RESET = -1;
-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 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(SUBMIT_COUNT_RESET);
-      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 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(
-      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(
-            SearchInput,
-            {
-              value: simpleExpr,
-              onChange: setSimpleExpr,
-              mode: simpleMode,
-              minChars: simpleMinChars,
-              placeholder: "Search...",
-              className: "max-w-sm"
-            }
-          ),
-          /* @__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: 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__ */ 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("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(
-      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,
-                  {
-                    value: tableUiSchemaText,
-                    editablePaths: ["/"],
-                    onChange: handleTableUiSchemaTextChange,
-                    height: "280px",
-                    className: "rounded-md border overflow-hidden"
-                  }
-                ) })
-              ]
-            }
-          ) }) }) })
-        ]
-      }
-    ),
-    /* @__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,
-          {
-            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__ */ 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__ */ 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, {})
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      PlaygroundSection,
-      {
-        title: "PropertyList",
-        description: "Read-only, schema-OPTIONAL property display used by detail panels and graph node/edge cards. Stacked layout (uppercase muted key above value), click-to-copy. With no schema, values render by JS shape; an optional per-property schema refines rendering (date/datetime/boolean/number/x-ui-cell).",
-        variant: "card",
-        children: /* @__PURE__ */ jsx(PropertyListDemo, {})
-      }
-    )
-  ] });
-}
-var PROPERTY_LIST_SAMPLE = {
-  name: "lauro_server.api",
-  description: "Build tools (Maven, Gradle, Webpack, Vite, etc.)",
-  is_component: false,
-  tags: ["python", "fastapi", "graph"],
-  created_at: "2026-01-15T09:30:00Z",
-  empty_value: null,
-  // Real nested object -> collapsed JSON tree.
-  config: {
-    retries: 3,
-    timeout_s: 30,
-    endpoints: ["/a", "/b"],
-    nested: { enabled: true }
-  },
-  // Long text -> clamp + show more.
-  notes: "This module exposes the public API surface. It aggregates routers from submodules, wires middleware, and configures CORS. See the architecture doc for the full request lifecycle and the list of mounted sub-applications."
-};
-var PROPERTY_LIST_SCHEMA = {
-  is_component: { type: "boolean" },
-  created_at: { type: "string", format: "date-time" }
-};
-function PropertyListDemo() {
-  return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-6 sm:grid-cols-2", children: [
-    /* @__PURE__ */ jsxs(Card, { className: "p-4", children: [
-      /* @__PURE__ */ jsx("p", { className: "mb-3 text-xs font-medium uppercase tracking-wide text-muted-foreground", children: "No schema (value-shape)" }),
-      /* @__PURE__ */ jsx(PropertyList, { properties: PROPERTY_LIST_SAMPLE })
-    ] }),
-    /* @__PURE__ */ jsxs(Card, { className: "p-4", children: [
-      /* @__PURE__ */ jsx("p", { className: "mb-3 text-xs font-medium uppercase tracking-wide text-muted-foreground", children: "With optional schema (boolean / date-time)" }),
-      /* @__PURE__ */ jsx(
-        PropertyList,
-        {
-          properties: PROPERTY_LIST_SAMPLE,
-          propertySchemas: PROPERTY_LIST_SCHEMA,
-          showHeader: true
-        }
-      )
-    ] })
-  ] });
-}
-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: treeExpandedIds,
-    onExpand: onTreeExpand,
-    onCollapse: onTreeCollapse
-  } = useTreeExpansion();
-  const [selectedIds, setSelectedIds] = useState(/* @__PURE__ */ new Set());
-  const [activeId, setActiveId] = useState(null);
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsx(
-      EntityTree,
-      {
-        schema: ORG_TREE_SCHEMA,
-        nodes: ORG_NODES,
-        expandedIds: treeExpandedIds,
-        onExpand: onTreeExpand,
-        onCollapse: onTreeCollapse,
-        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-O2QMWJZI.js.map