@petrarca/sonnet-playground 0.7.0 → 0.9.0

package/dist/chunk-3FYM6B3E.js

@@ -0,0 +1,1163 @@
+import {
+  PlaygroundSection
+} from "./chunk-C2EZ2ECG.js";
+
+// src/pages/PlayDataComponents.tsx
+import React2, { useState as useState2, useMemo as useMemo2, useCallback as useCallback2 } from "react";
+import { ArrowRight, ArrowUp } from "lucide-react";
+import {
+  Badge,
+  Button,
+  Card,
+  SimpleTooltip,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  SearchInput,
+  EntitySelect,
+  EntityTable as EntityTable2,
+  createRenderer,
+  EntityTree,
+  PropertyList
+} from "@petrarca/sonnet-ui";
+import { FormTextarea } from "@petrarca/sonnet-forms";
+import { JsonEditor } from "@petrarca/sonnet-ui/json-editor";
+
+// src/pages/EntityTableLongListDemo.tsx
+import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  EntityTable
+} from "@petrarca/sonnet-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TOTAL = 5e3;
+var PAGE_SIZE = 100;
+var DELAY_MS = 300;
+var ROWS = Array.from({ length: TOTAL }, (_, i) => ({
+  id: `f-${i}`,
+  name: `file-${String(i).padStart(4, "0")}.ts`,
+  folder: `src/module-${i % 37}/part-${i % 7}`,
+  size: i * 7919 % 400
+}));
+var SCHEMA = {
+  title: "File",
+  type: "object",
+  properties: {
+    name: { type: "string", title: "Name", "x-ui-cell": "code" },
+    size: { type: "number", title: "Chunks" },
+    folder: { type: "string", title: "Folder", "x-ui-cell": "muted" }
+  }
+};
+var PAGINGS = ["pages", "load more", "on scroll"];
+var page = (rows) => ({
+  data: rows,
+  meta: {
+    total: TOTAL,
+    limit: rows.length,
+    offset: 0,
+    has_next: rows.length < TOTAL,
+    has_prev: false
+  }
+});
+function useProgressiveRows(paging) {
+  const [loaded, setLoaded] = useState(PAGE_SIZE);
+  const [isLoading, setIsLoading] = useState(false);
+  useEffect(() => setLoaded(PAGE_SIZE), [paging]);
+  const onLoadMore = useCallback(() => {
+    setIsLoading(true);
+    window.setTimeout(() => {
+      setLoaded((n) => Math.min(n + PAGE_SIZE, TOTAL));
+      setIsLoading(false);
+    }, DELAY_MS);
+  }, []);
+  return {
+    rows: ROWS.slice(0, loaded),
+    loadMore: {
+      hasMore: loaded < TOTAL,
+      isLoading,
+      onLoadMore,
+      auto: paging === "on scroll"
+    }
+  };
+}
+function Toggle({
+  label,
+  options,
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", role: "group", "aria-label": label, children: [
+    /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+      label,
+      ":"
+    ] }),
+    options.map((option) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": option === value,
+        onClick: () => onChange(option),
+        className: option === value ? "rounded-full bg-primary px-3 py-1 text-xs font-medium text-primary-foreground" : "rounded-full bg-muted px-3 py-1 text-xs font-medium text-muted-foreground hover:text-foreground",
+        children: option
+      },
+      option
+    ))
+  ] });
+}
+function EntityTableLongListDemo() {
+  const [paging, setPaging] = useState("on scroll");
+  const [virtual, setVirtual] = useState("on");
+  const [pagination, setPagination] = useState({
+    pageIndex: 0,
+    pageSize: PAGE_SIZE
+  });
+  const progressive = useProgressiveRows(paging);
+  const paged = useMemo(() => {
+    const from = pagination.pageIndex * pagination.pageSize;
+    return ROWS.slice(from, from + pagination.pageSize);
+  }, [pagination]);
+  const byPages = paging === "pages";
+  return /* @__PURE__ */ jsxs(
+    PlaygroundSection,
+    {
+      title: "EntityTable on a long list",
+      description: "5,000 rows in a fill box (compact). Pages: the page controls. Load more: a footer button adds the next 100 rows. On scroll: the next rows load as the end comes into view (no button needed). Virtual rows: only the rows in view are rendered -- open the DOM inspector and scroll.",
+      variant: "card",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-4 flex flex-wrap gap-6", children: [
+          /* @__PURE__ */ jsx(
+            Toggle,
+            {
+              label: "Rows",
+              options: PAGINGS,
+              value: paging,
+              onChange: setPaging
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Toggle,
+            {
+              label: "Virtual rows",
+              options: ["off", "on"],
+              value: virtual,
+              onChange: setVirtual
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "h-80", children: /* @__PURE__ */ jsx(
+          EntityTable,
+          {
+            schema: SCHEMA,
+            data: page(byPages ? paged : progressive.rows),
+            isLoading: false,
+            isError: false,
+            entityLabel: "files",
+            density: "compact",
+            fill: true,
+            virtualize: virtual === "on",
+            getRowId: (row) => row.id,
+            ...byPages ? { pagination, onPaginationChange: setPagination } : { loadMore: progressive.loadMore }
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/pages/PlayDataComponents.tsx
+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 as jsx2, jsxs as jsxs2 } 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"
+      }
+    }
+  }),
+  // An array facet is repeatable: one chip per role, matching any of them.
+  roles: z.array(z.enum(["admin", "editor", "viewer"])).optional().meta({ "x-ui-title": "Role" }),
+  joined_from: z.string().optional().meta({
+    "x-ui-title": "Joined from",
+    "x-ui-widget": "date"
+  })
+});
+var SEARCH_FACET_SCHEMA = toJsonSchema(PlaygroundFacets);
+var SAMPLE_SCHEMA = {
+  title: "User",
+  type: "object",
+  properties: {
+    name: {
+      type: "string",
+      title: "Name",
+      "x-ui-column": { order: 0, sortable: true },
+      "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, sortable: true }
+    }
+  }
+};
+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__ */ jsxs2("span", { className: "inline-flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx2("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__ */ jsx2("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__ */ jsxs2("span", { children: [
+      /* @__PURE__ */ jsx2("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__ */ jsxs2("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__ */ jsxs2("div", { className: `flex items-center gap-3 ${containerClassName ?? ""}`, children: [
+    /* @__PURE__ */ jsxs2("span", { className: "text-xs text-muted-foreground", children: [
+      label,
+      ":"
+    ] }),
+    options.map((opt) => /* @__PURE__ */ jsx2(
+      "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 DENSITY_OPTIONS = [
+  "default",
+  "compact"
+];
+var LAYOUT_OPTIONS = ["flow", "fill"];
+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__ */ jsx2("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__ */ jsx2("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) });
+}
+var FREE_TEXT_FACETS = toJsonSchema(
+  z.object({
+    source: z.enum(["billing-api", "billing-web", "handbook"]).optional().meta({ "x-ui-title": "Source" }),
+    tags: z.array(z.string()).optional().meta({ "x-ui-title": "Tag" }),
+    ranking: z.enum(["rerank", "none"]).optional().meta({
+      "x-ui-title": "Ranking",
+      "x-ui-options": { enumNames: { rerank: "Rerank", none: "No rerank" } }
+    })
+  })
+);
+function PlayDataComponents() {
+  const [simpleExpr, setSimpleExpr] = useState2(EMPTY_FILTER);
+  const [simpleMode, setSimpleMode] = useState2("explicit");
+  const [simpleMinChars, setSimpleMinChars] = useState2(0);
+  const [fieldsExpr, setFieldsExpr] = useState2(EMPTY_FILTER);
+  const [fieldsMode, setFieldsMode] = useState2("explicit");
+  const [fieldsMinChars, setFieldsMinChars] = useState2(0);
+  const [fieldsPresetIdx, setFieldsPresetIdx] = useState2(0);
+  const activeSearchFields = SEARCH_FIELD_PRESETS[fieldsPresetIdx].fields;
+  const [freeTextExpr, setFreeTextExpr] = useState2(EMPTY_FILTER);
+  const [freeTextMode, setFreeTextMode] = useState2("explicit");
+  const [facetedExpr, setFacetedExpr] = useState2(EMPTY_FILTER);
+  const [facetedSubmitCount, setFacetedSubmitCount] = useState2(0);
+  const handleFacetedChange = useCallback2((expr) => {
+    setFacetedExpr(expr);
+    setFacetedSubmitCount((n) => n + 1);
+  }, []);
+  const [schemaText, setSchemaText] = useState2(
+    () => JSON.stringify(toJsonSchema(PlaygroundFacets), null, 2)
+  );
+  const [schemaError, setSchemaError] = useState2("");
+  const [activeSchema, setActiveSchema] = useState2(SEARCH_FACET_SCHEMA);
+  const handleSchemaTextChange = useCallback2((value) => {
+    setSchemaText(value);
+    try {
+      JSON.parse(value);
+      setSchemaError("");
+    } catch {
+      setSchemaError("Invalid JSON");
+    }
+  }, []);
+  const handleLoadSchema = useCallback2(() => {
+    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] = useState2(
+    () => JSON.stringify(SAMPLE_SCHEMA, null, 2)
+  );
+  const [tableUiSchemaText, setTableUiSchemaText] = useState2(
+    () => JSON.stringify(SAMPLE_UI_SCHEMA, null, 2)
+  );
+  const [tableSchemaError, setTableSchemaError] = useState2("");
+  const [activeTableSchema, setActiveTableSchema] = useState2(SAMPLE_SCHEMA);
+  const [activeTableUiSchema, setActiveTableUiSchema] = useState2(SAMPLE_UI_SCHEMA);
+  const [tableSchemaTab, setTableSchemaTab] = useState2("schema");
+  const handleTableSchemaTextChange = useCallback2((value) => {
+    setTableSchemaText(value);
+    try {
+      JSON.parse(value);
+      setTableSchemaError("");
+    } catch {
+      setTableSchemaError("Invalid JSON");
+    }
+  }, []);
+  const handleTableUiSchemaTextChange = useCallback2((value) => {
+    setTableUiSchemaText(value);
+    try {
+      JSON.parse(value);
+      setTableSchemaError("");
+    } catch {
+      setTableSchemaError("Invalid JSON");
+    }
+  }, []);
+  const handleApplyTableSchema = useCallback2(() => {
+    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] = useState2(EMPTY_FILTER);
+  const [tableSorting, setTableSorting] = useState2([]);
+  const [tableDensity, setTableDensity] = useState2("default");
+  const [tableLayout, setTableLayout] = useState2("flow");
+  const filteredRows = useMemo2(() => {
+    const terms = flattenFilterExpr(tableExpr);
+    const roles = terms.filter((t) => t.key === "roles").map((t) => t.value);
+    const rows = ALL_ROWS.filter(
+      (row) => (roles.length === 0 || roles.includes(row.role)) && terms.every(({ key, value }) => {
+        const v = value.toLowerCase();
+        if (key === "roles") return true;
+        if (key === "status") return row.status.toLowerCase().includes(v);
+        if (key === "joined_from") return row.joined >= value;
+        return row.name.toLowerCase().includes(v);
+      })
+    );
+    const [order] = tableSorting;
+    if (!order) return rows;
+    const field = order.id;
+    const sorted = [...rows].sort((a, b) => a[field].localeCompare(b[field]));
+    return order.desc ? sorted.reverse() : sorted;
+  }, [tableExpr, tableSorting]);
+  const tableData = useMemo2(
+    () => ({
+      data: filteredRows,
+      meta: {
+        total: filteredRows.length,
+        limit: filteredRows.length,
+        offset: 0,
+        has_next: false,
+        has_prev: false
+      }
+    }),
+    [filteredRows]
+  );
+  const [selectedPatient, setSelectedPatient] = useState2(null);
+  return /* @__PURE__ */ jsxs2("div", { className: "w-full max-w-4xl space-y-6", children: [
+    /* @__PURE__ */ jsxs2("div", { children: [
+      /* @__PURE__ */ jsx2("h1", { children: "Data Components" }),
+      /* @__PURE__ */ jsx2("p", { className: "text-sm text-muted-foreground mt-1", children: "Interactive sandbox for SearchInput (simple, multi-field, faceted, free text with filters), EntityTable (with schema editor and custom renderers), EntitySelect, and EntityTree." })
+    ] }),
+    /* @__PURE__ */ jsxs2(
+      PlaygroundSection,
+      {
+        title: "SearchInput \u2014 simple mode",
+        description: "No fields prop. Produces a single search term under the key 'search'.",
+        variant: "card",
+        children: [
+          /* @__PURE__ */ jsxs2("div", { className: "flex flex-wrap gap-4 mb-3", children: [
+            /* @__PURE__ */ jsx2(
+              ToggleStrip,
+              {
+                label: "Mode",
+                options: MODE_OPTIONS,
+                value: simpleMode,
+                onChange: (m) => {
+                  setSimpleMode(m);
+                  setSimpleExpr(EMPTY_FILTER);
+                },
+                format: (m) => MODE_LABELS[m]
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              ToggleStrip,
+              {
+                label: "Min chars",
+                options: MIN_CHARS_OPTIONS,
+                value: simpleMinChars,
+                onChange: setSimpleMinChars,
+                format: (n) => n === 0 ? "off" : String(n)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx2(
+            SearchInput,
+            {
+              value: simpleExpr,
+              onChange: setSimpleExpr,
+              mode: simpleMode,
+              minChars: simpleMinChars,
+              placeholder: "Search...",
+              className: "max-w-sm"
+            }
+          ),
+          /* @__PURE__ */ jsx2(FlatTermsInspector, { expr: simpleExpr })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs2(
+      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__ */ jsxs2("div", { className: "flex flex-wrap gap-4 mb-3", children: [
+            /* @__PURE__ */ jsx2(
+              ToggleStrip,
+              {
+                label: "Fields",
+                options: FIELD_PRESET_INDICES,
+                value: fieldsPresetIdx,
+                onChange: (idx) => {
+                  setFieldsPresetIdx(idx);
+                  setFieldsExpr(EMPTY_FILTER);
+                },
+                format: (idx) => SEARCH_FIELD_PRESETS[idx].label
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              ToggleStrip,
+              {
+                label: "Mode",
+                options: MODE_OPTIONS,
+                value: fieldsMode,
+                onChange: (m) => {
+                  setFieldsMode(m);
+                  setFieldsExpr(EMPTY_FILTER);
+                },
+                format: (m) => MODE_LABELS[m]
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              ToggleStrip,
+              {
+                label: "Min chars",
+                options: MIN_CHARS_OPTIONS,
+                value: fieldsMinChars,
+                onChange: setFieldsMinChars,
+                format: (n) => n === 0 ? "off" : String(n)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx2(
+            SearchInput,
+            {
+              value: fieldsExpr,
+              onChange: setFieldsExpr,
+              searchFields: activeSearchFields,
+              mode: fieldsMode,
+              minChars: fieldsMinChars,
+              placeholder: `Search by ${activeSearchFields.join(" or ")}...`,
+              className: "max-w-sm"
+            }
+          ),
+          /* @__PURE__ */ jsxs2("div", { className: "mt-3 space-y-2", children: [
+            /* @__PURE__ */ jsxs2("p", { className: "text-xs text-muted-foreground", children: [
+              "searchFields: [",
+              activeSearchFields.map((f) => `"${f}"`).join(", "),
+              "]"
+            ] }),
+            /* @__PURE__ */ jsx2("p", { className: "text-xs text-muted-foreground", children: "FilterExpr AST:" }),
+            /* @__PURE__ */ jsx2(FilterExprInspector, { expr: fieldsExpr }),
+            !isEmptyFilterExpr(fieldsExpr) && /* @__PURE__ */ jsxs2(Fragment, { children: [
+              /* @__PURE__ */ jsx2("p", { className: "text-xs text-muted-foreground", children: "Serialized q= string:" }),
+              /* @__PURE__ */ jsx2("pre", { className: "rounded-md bg-muted px-4 py-3 text-xs overflow-auto", children: serializeFilterExpr(fieldsExpr) })
+            ] })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      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__ */ jsxs2("div", { className: "flex gap-4 items-start", children: [
+          /* @__PURE__ */ jsxs2(Card, { className: "flex-1 min-w-0 p-3 flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx2("p", { className: "text-xs font-medium text-muted-foreground", children: "JSON Schema" }),
+            schemaError && /* @__PURE__ */ jsx2(Badge, { variant: "destructive", className: "text-xs self-start", children: schemaError }),
+            /* @__PURE__ */ jsx2(
+              FormTextarea,
+              {
+                value: schemaText,
+                onChange: (e) => handleSchemaTextChange(e.target.value),
+                className: "font-mono text-xs",
+                rows: 18
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx2("div", { className: "flex items-center self-center", children: /* @__PURE__ */ jsx2(SimpleTooltip, { label: "Load schema into search", children: /* @__PURE__ */ jsx2(
+            Button,
+            {
+              variant: "default",
+              size: "icon",
+              onClick: handleLoadSchema,
+              disabled: !!schemaError,
+              children: /* @__PURE__ */ jsx2(ArrowRight, { size: 18 })
+            }
+          ) }) }),
+          /* @__PURE__ */ jsxs2(Card, { className: "flex-1 min-w-0 p-3 flex flex-col gap-3", children: [
+            /* @__PURE__ */ jsx2("p", { className: "text-xs font-medium text-muted-foreground", children: "Live search" }),
+            /* @__PURE__ */ jsx2(
+              SearchInput,
+              {
+                value: facetedExpr,
+                onChange: handleFacetedChange,
+                schema: activeSchema,
+                mode: "explicit",
+                placeholder: "Add filter..."
+              }
+            ),
+            /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsx2("span", { children: "onChange fired:" }),
+              /* @__PURE__ */ jsxs2("span", { className: "font-mono font-medium text-foreground", children: [
+                facetedSubmitCount,
+                "x"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx2(FilterExprInspector, { expr: facetedExpr })
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      PlaygroundSection,
+      {
+        title: "SearchInput \u2014 free text with filters (textKey)",
+        description: "One field for a query and its filters. Type the query; pick filters with the chevron or ArrowDown. Explicit: Enter submits the text (as the textKey term) with the chips. Debounce: they fire as typing pauses. A removed chip reruns at once; enum chips show their labels.",
+        variant: "card",
+        children: /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-3 max-w-2xl", children: [
+          /* @__PURE__ */ jsx2(
+            ToggleStrip,
+            {
+              label: "Mode",
+              options: MODE_OPTIONS,
+              value: freeTextMode,
+              onChange: setFreeTextMode,
+              format: (m) => MODE_LABELS[m]
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            SearchInput,
+            {
+              value: freeTextExpr,
+              onChange: setFreeTextExpr,
+              schema: FREE_TEXT_FACETS,
+              textKey: "q",
+              mode: freeTextMode,
+              showSearchButton: true,
+              placeholder: "Search for code or content..."
+            }
+          ),
+          /* @__PURE__ */ jsx2(FilterExprInspector, { expr: freeTextExpr })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs2(
+      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. Role is a repeatable facet (one chip per role) and Joined from uses the date widget. Name and Joined are sortable: click a header -- the table reports the order and the page's query applies it. Density compact tightens the rows and drops the lines between them; layout fill puts the table in a fixed-height box where the rows scroll under a header that stays on top. Edit the JSON Schema or UI Schema below and press Apply to see column changes live.",
+        variant: "card",
+        children: [
+          /* @__PURE__ */ jsx2(
+            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__ */ jsxs2("div", { className: "mb-4 flex flex-wrap gap-6", children: [
+            /* @__PURE__ */ jsx2(
+              ToggleStrip,
+              {
+                label: "Density",
+                options: DENSITY_OPTIONS,
+                value: tableDensity,
+                onChange: setTableDensity
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              ToggleStrip,
+              {
+                label: "Layout",
+                options: LAYOUT_OPTIONS,
+                value: tableLayout,
+                onChange: setTableLayout
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx2("div", { className: tableLayout === "fill" ? "h-64" : void 0, children: /* @__PURE__ */ jsx2(
+            EntityTable2,
+            {
+              schema: activeTableSchema,
+              uiSchema: activeTableUiSchema,
+              data: tableData,
+              isLoading: false,
+              isError: false,
+              entityLabel: "users",
+              isFiltered: !isEmptyFilterExpr(tableExpr),
+              sorting: tableSorting,
+              onSortingChange: setTableSorting,
+              density: tableDensity,
+              fill: tableLayout === "fill"
+            }
+          ) }),
+          /* @__PURE__ */ jsx2("div", { className: "mt-4", children: /* @__PURE__ */ jsx2(Card, { className: "border shadow-sm p-4 flex flex-col", children: /* @__PURE__ */ jsx2("div", { className: "flex items-center justify-between mb-2", children: /* @__PURE__ */ jsxs2(
+            Tabs,
+            {
+              value: tableSchemaTab,
+              onValueChange: setTableSchemaTab,
+              className: "flex flex-col flex-1",
+              children: [
+                /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxs2(TabsList, { children: [
+                    /* @__PURE__ */ jsx2(TabsTrigger, { value: "schema", children: "JSON Schema" }),
+                    /* @__PURE__ */ jsx2(TabsTrigger, { value: "uischema", children: "UI Schema" })
+                  ] }),
+                  /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+                    tableSchemaError && /* @__PURE__ */ jsx2(Badge, { variant: "destructive", className: "text-xs", children: tableSchemaError }),
+                    /* @__PURE__ */ jsx2(SimpleTooltip, { label: "Apply schema to table above", children: /* @__PURE__ */ jsx2(
+                      Button,
+                      {
+                        variant: "default",
+                        size: "icon",
+                        onClick: handleApplyTableSchema,
+                        disabled: !!tableSchemaError,
+                        children: /* @__PURE__ */ jsx2(ArrowUp, { size: 18 })
+                      }
+                    ) })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx2(TabsContent, { value: "schema", className: "mt-2", children: /* @__PURE__ */ jsx2(
+                  JsonEditor,
+                  {
+                    value: tableSchemaText,
+                    editablePaths: ["/"],
+                    onChange: handleTableSchemaTextChange,
+                    height: "280px",
+                    className: "rounded-md border overflow-hidden"
+                  }
+                ) }),
+                /* @__PURE__ */ jsx2(TabsContent, { value: "uischema", className: "mt-2", children: /* @__PURE__ */ jsx2(
+                  JsonEditor,
+                  {
+                    value: tableUiSchemaText,
+                    editablePaths: ["/"],
+                    onChange: handleTableUiSchemaTextChange,
+                    height: "280px",
+                    className: "rounded-md border overflow-hidden"
+                  }
+                ) })
+              ]
+            }
+          ) }) }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx2(EntityTableLongListDemo, {}),
+    /* @__PURE__ */ jsx2(
+      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__ */ jsx2(
+          EntityTable2,
+          {
+            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__ */ jsx2(
+      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__ */ jsxs2("div", { className: "flex gap-6 items-start", children: [
+          /* @__PURE__ */ jsx2(
+            EntitySelect,
+            {
+              fetcher: patientFetcher,
+              queryKey: "playground-patients",
+              value: selectedPatient,
+              onChange: setSelectedPatient,
+              label: "Patient",
+              placeholder: "Select patient...",
+              searchPlaceholder: "Search patients...",
+              className: "max-w-xs"
+            }
+          ),
+          /* @__PURE__ */ jsxs2(Card, { className: "flex-1 min-w-0 p-3", children: [
+            /* @__PURE__ */ jsx2("p", { className: "text-xs font-medium text-muted-foreground mb-2", children: "Selected value" }),
+            /* @__PURE__ */ jsx2("pre", { className: "rounded-md bg-muted px-4 py-3 text-xs overflow-auto", children: JSON.stringify(selectedPatient, null, 2) })
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      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__ */ jsx2(EntityTreeDemo, {})
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      PlaygroundSection,
+      {
+        title: "PropertyList",
+        description: "Read-only property display used by detail pages, panels and graph node/edge cards. With no schema, values render by JS shape; an optional per-property schema refines rendering (date/datetime/boolean/number/x-ui-cell). With an object schema, the schema decides the fields, their order, labels (x-ui-title) and cells (x-ui-cell, or a local x- renderer), as for EntityTable. Density: compact (an inspector) or comfortable (a detail page: label column, no rules between rows).",
+        variant: "card",
+        children: /* @__PURE__ */ jsx2(PropertyListDemo, {})
+      }
+    )
+  ] });
+}
+var PROPERTY_LIST_SAMPLE = {
+  name: "acme_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__ */ jsxs2("div", { className: "grid grid-cols-1 gap-6 sm:grid-cols-2", children: [
+    /* @__PURE__ */ jsxs2(Card, { className: "p-4", children: [
+      /* @__PURE__ */ jsx2("p", { className: "mb-3 text-xs font-medium uppercase tracking-wide text-muted-foreground", children: "No schema (value-shape)" }),
+      /* @__PURE__ */ jsx2(PropertyList, { properties: PROPERTY_LIST_SAMPLE })
+    ] }),
+    /* @__PURE__ */ jsxs2(Card, { className: "p-4", children: [
+      /* @__PURE__ */ jsx2("p", { className: "mb-3 text-xs font-medium uppercase tracking-wide text-muted-foreground", children: "With optional schema (boolean / date-time)" }),
+      /* @__PURE__ */ jsx2(
+        PropertyList,
+        {
+          properties: PROPERTY_LIST_SAMPLE,
+          propertySchemas: PROPERTY_LIST_SCHEMA,
+          showHeader: true
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs2(Card, { className: "p-4 sm:col-span-2", children: [
+      /* @__PURE__ */ jsx2("p", { className: "mb-3 text-xs font-medium uppercase tracking-wide text-muted-foreground", children: "Object schema, comfortable (a detail page)" }),
+      /* @__PURE__ */ jsx2(
+        PropertyList,
+        {
+          properties: DETAIL_SAMPLE,
+          schema: DETAIL_SCHEMA,
+          renderers: DETAIL_RENDERERS,
+          density: "comfortable",
+          copyable: false
+        }
+      )
+    ] })
+  ] });
+}
+var DetailSchema = z.object({
+  program: z.string().meta({ "x-ui-title": "Program", "x-ui-cell": "code" }),
+  status: z.string().meta({
+    "x-ui-title": "Status",
+    "x-ui-cell": "badge",
+    "x-ui-cell-options": { colors: { available: "green", missing: "red" } }
+  }),
+  exit_codes: z.array(z.number()).meta({ "x-ui-title": "Success exit codes" }),
+  version_args: z.array(z.string()).meta({
+    "x-ui-title": "Version check",
+    "x-ui-cell": "join",
+    "x-ui-cell-options": { separator: " " }
+  }),
+  used_by: z.array(z.string()).meta({ "x-ui-title": "Run by", "x-ui-cell": "x-links" }),
+  updated_at: z.string().meta({ "x-ui-title": "Updated", format: "date-time" }),
+  internal_id: z.string().meta({ "x-ui-column": { hidden: true } })
+});
+var DETAIL_SCHEMA = toJsonSchema(DetailSchema);
+var DETAIL_SAMPLE = {
+  program: "trivy",
+  status: "available",
+  exit_codes: [0, 1],
+  version_args: ["--version"],
+  used_by: ["acme.scan", "acme.nightly"],
+  updated_at: "2026-10-30T14:05:00Z",
+  internal_id: "not shown"
+};
+var DETAIL_RENDERERS = {
+  "x-links": createRenderer((row) => {
+    const items = row.used_by ?? [];
+    if (!items.length)
+      return /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground", children: "none" });
+    return items.map((item, i) => /* @__PURE__ */ jsxs2(React2.Fragment, { children: [
+      i > 0 && ", ",
+      /* @__PURE__ */ jsx2("a", { href: "#", className: "text-primary hover:underline", children: item })
+    ] }, item));
+  })
+};
+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] = useState2(/* @__PURE__ */ new Set());
+  const [activeId, setActiveId] = useState2(null);
+  return /* @__PURE__ */ jsxs2("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx2(
+      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__ */ jsxs2("div", { className: "flex gap-6 text-xs text-muted-foreground", children: [
+      activeId && /* @__PURE__ */ jsxs2("span", { children: [
+        "Active: ",
+        /* @__PURE__ */ jsx2("span", { className: "font-mono", children: activeId })
+      ] }),
+      selectedIds.size > 0 && /* @__PURE__ */ jsxs2("span", { children: [
+        "Selected:",
+        " ",
+        /* @__PURE__ */ jsx2("span", { className: "font-mono", children: [...selectedIds].join(", ") })
+      ] })
+    ] })
+  ] });
+}
+
+export {
+  PlayDataComponents
+};
+//# sourceMappingURL=chunk-3FYM6B3E.js.map