@petrarca/sonnet-playground 0.1.6 → 0.3.0

package/dist/chunk-DKLALDHR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pages/PlayDataComponents.tsx"],"sourcesContent":["/**\n * Playground page for SearchInput, EntitySelect, EntityTable, and EntityTree.\n * Accessible at /playground/data-components\n *\n * Six sections:\n *   1. Simple mode      -- single freetext search, no field picker\n *   2. Faceted mode     -- two-column: schema editor left, live search + output right\n *   3. EntityTable      -- static sample data wired to faceted SearchInput\n *   4. Local renderers  -- same data with x- prefixed custom cell renderers\n *   5. EntitySelect     -- async searchable select backed by a static mock fetcher\n *   6. EntityTree       -- schema-driven tree with static nested data\n */\n\nimport React, { useState, useMemo, useCallback } from \"react\";\nimport { ArrowRight, ArrowUp } from \"lucide-react\";\nimport {\n  Badge,\n  Button,\n  Card,\n  SimpleTooltip,\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n  SearchInput,\n  type SearchMode,\n  EntitySelect,\n  EntityTable,\n  createRenderer,\n  EntityTree,\n  type TreeNode,\n  type TableUiSchema,\n} from \"@petrarca/sonnet-ui\";\nimport { FormTextarea } from \"@petrarca/sonnet-forms\";\nimport { JsonEditor } from \"@petrarca/sonnet-ui/json-editor\";\nimport { PlaygroundSection } from \"../PlaygroundSection\";\nimport {\n  EMPTY_FILTER,\n  flattenFilterExpr,\n  isEmptyFilterExpr,\n  serializeFilterExpr,\n  type FilterExpr,\n} from \"@petrarca/sonnet-core/search\";\nimport { toJsonSchema, type JsonSchema } from \"@petrarca/sonnet-core/schema\";\nimport { useTreeExpansion } from \"@petrarca/sonnet-core/hooks\";\nimport type { EntityOptionFetcher } from \"@petrarca/sonnet-core/entityOptions\";\nimport { z } from \"zod/v4\";\n\n// Static mock patient data for the EntitySelect playground demo.\n// Uses a local fetcher so the playground has no dependency on a live API.\nconst MOCK_PATIENTS = [\n  { value: \"pat_001\", label: \"Alice Hartmann\" },\n  { value: \"pat_002\", label: \"Bob Nguyen\" },\n  { value: \"pat_003\", label: \"Carol Smith\" },\n  { value: \"pat_004\", label: \"David Okafor\" },\n  { value: \"pat_005\", label: \"Eva Larsson\" },\n  { value: \"pat_006\", label: \"Frank Torres\" },\n  { value: \"pat_007\", label: \"Grace Kim\" },\n  { value: \"pat_008\", label: \"Henry Bauer\" },\n];\n\nconst patientFetcher: EntityOptionFetcher = ({ search } = {}) => {\n  const q = search?.toLowerCase() ?? \"\";\n  const results = q\n    ? MOCK_PATIENTS.filter((p) => p.label.toLowerCase().includes(q))\n    : MOCK_PATIENTS;\n  return Promise.resolve(results);\n};\n\ninterface SampleRow {\n  id: string;\n  name: string;\n  status: \"active\" | \"inactive\" | \"pending\";\n  role: string;\n  joined: string;\n}\n\nconst ALL_ROWS: SampleRow[] = [\n  {\n    id: \"u-001\",\n    name: \"Alice Hartmann\",\n    status: \"active\",\n    role: \"admin\",\n    joined: \"2024-01-15\",\n  },\n  {\n    id: \"u-002\",\n    name: \"Bob Nguyen\",\n    status: \"active\",\n    role: \"editor\",\n    joined: \"2024-02-03\",\n  },\n  {\n    id: \"u-003\",\n    name: \"Carol Smith\",\n    status: \"inactive\",\n    role: \"viewer\",\n    joined: \"2024-03-20\",\n  },\n  {\n    id: \"u-004\",\n    name: \"David Okafor\",\n    status: \"pending\",\n    role: \"editor\",\n    joined: \"2024-04-11\",\n  },\n  {\n    id: \"u-005\",\n    name: \"Eva Larsson\",\n    status: \"active\",\n    role: \"admin\",\n    joined: \"2024-05-08\",\n  },\n  {\n    id: \"u-006\",\n    name: \"Frank Torres\",\n    status: \"inactive\",\n    role: \"viewer\",\n    joined: \"2024-06-22\",\n  },\n  {\n    id: \"u-007\",\n    name: \"Grace Kim\",\n    status: \"active\",\n    role: \"editor\",\n    joined: \"2024-07-14\",\n  },\n  {\n    id: \"u-008\",\n    name: \"Henry Bauer\",\n    status: \"pending\",\n    role: \"viewer\",\n    joined: \"2024-08-30\",\n  },\n];\n\nconst STATUS_COLOR = {\n  active: \"green\",\n  inactive: \"violet\",\n  pending: \"yellow\",\n} as const;\n\nconst PlaygroundFacets = z.object({\n  search: z.string().meta({ \"x-ui-title\": \"Name\" }),\n  status: z\n    .enum([\"active\", \"inactive\", \"pending\"])\n    .optional()\n    .meta({\n      \"x-ui-title\": \"Status\",\n      \"x-ui-options\": {\n        enumNames: {\n          active: \"Active\",\n          inactive: \"Inactive\",\n          pending: \"Pending\",\n        },\n      },\n    }),\n  role: z.string().optional().meta({ \"x-ui-title\": \"Role\" }),\n});\n\nconst SEARCH_FACET_SCHEMA = toJsonSchema(PlaygroundFacets);\n\nconst SAMPLE_SCHEMA: JsonSchema = {\n  title: \"User\",\n  type: \"object\",\n  properties: {\n    name: {\n      type: \"string\",\n      title: \"Name\",\n      \"x-ui-column\": { order: 0 },\n      \"x-ui-cell\": \"bold\",\n    },\n    status: {\n      type: \"string\",\n      title: \"Status\",\n      \"x-ui-column\": { order: 1 },\n      \"x-ui-cell\": \"badge\",\n      \"x-ui-cell-options\": { colors: STATUS_COLOR },\n    },\n    role: {\n      type: \"string\",\n      title: \"Role\",\n      \"x-ui-column\": { order: 2 },\n      \"x-ui-cell\": \"muted\",\n    },\n    id: {\n      type: \"string\",\n      title: \"ID\",\n      \"x-ui-column\": { order: 3 },\n      \"x-ui-cell\": \"code\",\n    },\n    joined: {\n      type: \"string\",\n      format: \"date\",\n      title: \"Joined\",\n      \"x-ui-column\": { order: 4 },\n    },\n  },\n};\n\nconst SAMPLE_UI_SCHEMA: TableUiSchema = {}; // mutable via the live schema editor below\n\n// Local renderer demo: three x- prefixed renderers using the same SampleRow data.\nconst ROLE_ICONS: Record<string, string> = {\n  admin: \"A\",\n  editor: \"E\",\n  viewer: \"V\",\n};\n\nconst CUSTOM_RENDERERS = {\n  // Extract initials from the name, display as avatar circle + name.\n  \"x-play-initials\": createRenderer<SampleRow>((row) => {\n    const initials = row.name\n      .split(\" \")\n      .map((w) => w[0])\n      .join(\"\");\n    return (\n      <span className=\"inline-flex items-center gap-2\">\n        <span className=\"inline-flex items-center justify-center h-7 w-7 rounded-full bg-muted text-xs font-medium shrink-0\">\n          {initials}\n        </span>\n        <span className=\"font-medium\">{row.name}</span>\n      </span>\n    );\n  }),\n\n  // Role with a letter prefix read from options.icons.\n  \"x-play-role-icon\": createRenderer<SampleRow>((row, options) => {\n    const icons = (options.icons as Record<string, string>) ?? {};\n    const icon = icons[row.role] ?? \"?\";\n    return (\n      <span>\n        <span className=\"inline-flex items-center justify-center h-5 w-5 rounded bg-muted text-xs font-mono mr-1.5\">\n          {icon}\n        </span>\n        {row.role}\n      </span>\n    );\n  }),\n\n  // Compute days since joined, color-coded by threshold from options.\n  \"x-play-tenure\": createRenderer<SampleRow>((row, options) => {\n    const threshold = (options.recentDays as number) ?? 365;\n    const days = Math.floor(\n      (Date.now() - new Date(row.joined).getTime()) / 86_400_000,\n    );\n    const isRecent = days < threshold;\n    return (\n      <span className={isRecent ? \"text-primary\" : \"text-muted-foreground\"}>\n        {days}d\n      </span>\n    );\n  }),\n};\n\nconst CUSTOM_RENDERER_SCHEMA: JsonSchema = {\n  title: \"User (custom renderers)\",\n  type: \"object\",\n  properties: {\n    name: {\n      type: \"string\",\n      title: \"Name\",\n      \"x-ui-column\": { order: 0 },\n      \"x-ui-cell\": \"x-play-initials\",\n    },\n    role: {\n      type: \"string\",\n      title: \"Role\",\n      \"x-ui-column\": { order: 1 },\n      \"x-ui-cell\": \"x-play-role-icon\",\n      \"x-ui-cell-options\": { icons: ROLE_ICONS },\n    },\n    status: {\n      type: \"string\",\n      title: \"Status\",\n      \"x-ui-column\": { order: 2 },\n      \"x-ui-cell\": \"badge\",\n      \"x-ui-cell-options\": { colors: STATUS_COLOR },\n    },\n    joined: {\n      type: \"string\",\n      title: \"Tenure\",\n      \"x-ui-column\": { order: 3 },\n      \"x-ui-cell\": \"x-play-tenure\",\n      \"x-ui-cell-options\": { recentDays: 500 },\n    },\n    id: {\n      type: \"string\",\n      title: \"ID\",\n      \"x-ui-column\": { order: 4 },\n      \"x-ui-cell\": \"code\",\n    },\n  },\n};\n\n// Sentinel value meaning \"schema was reloaded, next submit resets the counter to 0\".\nconst SUBMIT_COUNT_RESET = -1;\n\n// Presets for the searchFields demo (Section 1b). Uses the same user domain\n// as the rest of the playground (name, role, status).\nconst SEARCH_FIELD_PRESETS: { label: string; fields: string[] }[] = [\n  { label: \"name, role\", fields: [\"name\", \"role\"] },\n  { label: \"name (single)\", fields: [\"name\"] },\n  { label: \"name, role, status\", fields: [\"name\", \"role\", \"status\"] },\n];\n\n// Reusable toggle-button strip for playground controls.\n// Renders a label followed by a set of pill buttons. className applies to\n// the wrapping fragment's implicit container -- callers place it inside a\n// flex row, so use ml-* on the caller side via the containerClassName prop.\nfunction ToggleStrip<T extends string | number>({\n  label,\n  options,\n  value,\n  onChange,\n  format,\n  containerClassName,\n}: {\n  label: string;\n  options: readonly T[];\n  value: T;\n  onChange: (v: T) => void;\n  format?: (v: T) => string;\n  containerClassName?: string;\n}) {\n  const fmt = format ?? String;\n  return (\n    <div className={`flex items-center gap-3 ${containerClassName ?? \"\"}`}>\n      <span className=\"text-xs text-muted-foreground\">{label}:</span>\n      {options.map((opt) => (\n        <button\n          key={String(opt)}\n          type=\"button\"\n          onClick={() => onChange(opt)}\n          className={[\n            \"px-3 py-1 rounded-full text-xs font-medium transition-colors\",\n            value === opt\n              ? \"bg-primary text-primary-foreground\"\n              : \"bg-muted text-muted-foreground hover:text-foreground\",\n          ].join(\" \")}\n        >\n          {fmt(opt)}\n        </button>\n      ))}\n    </div>\n  );\n}\n\nconst MODE_OPTIONS = [\"explicit\", \"debounce\"] as const;\nconst MODE_LABELS: Record<string, string> = {\n  explicit: \"Explicit (Enter)\",\n  debounce: \"Debounce (300 ms)\",\n};\nconst MIN_CHARS_OPTIONS = [0, 1, 2, 3] as const;\nconst FIELD_PRESET_INDICES = SEARCH_FIELD_PRESETS.map(\n  (_, i) => i,\n) as readonly number[];\n\nfunction FilterExprInspector({ expr }: { expr: FilterExpr }) {\n  return (\n    <pre className=\"mt-3 rounded-md bg-muted px-4 py-3 text-xs overflow-auto max-h-40\">\n      {JSON.stringify(expr, null, 2)}\n    </pre>\n  );\n}\n\nfunction FlatTermsInspector({ expr }: { expr: FilterExpr }) {\n  const terms = flattenFilterExpr(expr);\n  return (\n    <pre className=\"mt-3 rounded-md bg-muted px-4 py-3 text-xs overflow-auto max-h-40\">\n      {JSON.stringify(terms, null, 2)}\n    </pre>\n  );\n}\n\n/** Playground sandbox for SearchInput, EntitySelect, and EntityTable. */\nexport default function PlayDataComponents(): React.ReactElement {\n  // Section 1: simple mode\n  const [simpleExpr, setSimpleExpr] = useState<FilterExpr>(EMPTY_FILTER);\n  const [simpleMode, setSimpleMode] = useState<SearchMode>(\"explicit\");\n  const [simpleMinChars, setSimpleMinChars] = useState(0);\n\n  // Section 1b: searchFields mode (multi-field OR)\n  const [fieldsExpr, setFieldsExpr] = useState<FilterExpr>(EMPTY_FILTER);\n  const [fieldsMode, setFieldsMode] = useState<SearchMode>(\"explicit\");\n  const [fieldsMinChars, setFieldsMinChars] = useState(0);\n  const [fieldsPresetIdx, setFieldsPresetIdx] = useState(0);\n  const activeSearchFields = SEARCH_FIELD_PRESETS[fieldsPresetIdx].fields;\n\n  // Section 2: faceted mode with live schema editor\n  const [facetedExpr, setFacetedExpr] = useState<FilterExpr>(EMPTY_FILTER);\n  const [facetedSubmitCount, setFacetedSubmitCount] = useState(0);\n  const handleFacetedChange = useCallback((expr: FilterExpr) => {\n    setFacetedExpr(expr);\n    setFacetedSubmitCount((n) => n + 1);\n  }, []);\n  const [schemaText, setSchemaText] = useState(() =>\n    JSON.stringify(toJsonSchema(PlaygroundFacets), null, 2),\n  );\n  const [schemaError, setSchemaError] = useState(\"\");\n  const [activeSchema, setActiveSchema] =\n    useState<JsonSchema>(SEARCH_FACET_SCHEMA);\n\n  const handleSchemaTextChange = useCallback((value: string) => {\n    setSchemaText(value);\n    try {\n      JSON.parse(value);\n      setSchemaError(\"\");\n    } catch {\n      setSchemaError(\"Invalid JSON\");\n    }\n  }, []);\n\n  const handleLoadSchema = useCallback(() => {\n    try {\n      const parsed = JSON.parse(schemaText) as JsonSchema;\n      setActiveSchema(parsed);\n      setFacetedExpr(EMPTY_FILTER);\n      setFacetedSubmitCount(SUBMIT_COUNT_RESET);\n      setSchemaError(\"\");\n    } catch {\n      setSchemaError(\"Invalid JSON -- cannot load\");\n    }\n  }, [schemaText]);\n\n  // Section 3: schema + UI schema editors for the table.\n  const [tableSchemaText, setTableSchemaText] = useState(() =>\n    JSON.stringify(SAMPLE_SCHEMA, null, 2),\n  );\n  const [tableUiSchemaText, setTableUiSchemaText] = useState(() =>\n    JSON.stringify(SAMPLE_UI_SCHEMA, null, 2),\n  );\n  const [tableSchemaError, setTableSchemaError] = useState(\"\");\n  const [activeTableSchema, setActiveTableSchema] =\n    useState<JsonSchema>(SAMPLE_SCHEMA);\n  const [activeTableUiSchema, setActiveTableUiSchema] =\n    useState<TableUiSchema>(SAMPLE_UI_SCHEMA);\n  const [tableSchemaTab, setTableSchemaTab] = useState(\"schema\");\n\n  const handleTableSchemaTextChange = useCallback((value: string) => {\n    setTableSchemaText(value);\n    try {\n      JSON.parse(value);\n      setTableSchemaError(\"\");\n    } catch {\n      setTableSchemaError(\"Invalid JSON\");\n    }\n  }, []);\n\n  const handleTableUiSchemaTextChange = useCallback((value: string) => {\n    setTableUiSchemaText(value);\n    try {\n      JSON.parse(value);\n      setTableSchemaError(\"\");\n    } catch {\n      setTableSchemaError(\"Invalid JSON\");\n    }\n  }, []);\n\n  const handleApplyTableSchema = useCallback(() => {\n    try {\n      const schema = JSON.parse(tableSchemaText) as JsonSchema;\n      const uiSchema = JSON.parse(tableUiSchemaText) as TableUiSchema;\n      setActiveTableSchema(schema);\n      setActiveTableUiSchema(uiSchema);\n      setTableSchemaError(\"\");\n    } catch {\n      setTableSchemaError(\"Invalid JSON -- cannot apply\");\n    }\n  }, [tableSchemaText, tableUiSchemaText]);\n\n  // Section 3: faceted mode wired to EntityTable.\n  // onChange fires only on submit -- filteredRows updates when the user presses Enter.\n  const [tableExpr, setTableExpr] = useState<FilterExpr>(EMPTY_FILTER);\n\n  const filteredRows = useMemo(() => {\n    const terms = flattenFilterExpr(tableExpr);\n    if (terms.length === 0) return ALL_ROWS;\n\n    return ALL_ROWS.filter((row) =>\n      terms.every(({ key, value }) => {\n        const v = value.toLowerCase();\n        if (key === \"status\") return row.status.toLowerCase().includes(v);\n        if (key === \"role\") return row.role.toLowerCase().includes(v);\n        // default: search by name\n        return row.name.toLowerCase().includes(v);\n      }),\n    );\n  }, [tableExpr]);\n\n  const tableData = useMemo(\n    () => ({\n      data: filteredRows,\n      meta: {\n        total: filteredRows.length,\n        limit: filteredRows.length,\n        offset: 0,\n        has_next: false,\n        has_prev: false,\n      },\n    }),\n    [filteredRows],\n  );\n\n  // Section 5: EntitySelect\n  const [selectedPatient, setSelectedPatient] = useState<string | null>(null);\n\n  return (\n    <div className=\"w-full max-w-4xl space-y-6\">\n      <div>\n        <h1>Data Components</h1>\n        <p className=\"text-sm text-muted-foreground mt-1\">\n          Interactive sandbox for SearchInput, EntitySelect, and EntityTable.\n        </p>\n      </div>\n\n      {/* Section 1: simple mode */}\n      <PlaygroundSection\n        title=\"SearchInput — simple mode\"\n        description=\"No fields prop. Produces a single search term under the key 'search'.\"\n        variant=\"card\"\n      >\n        <div className=\"flex flex-wrap gap-4 mb-3\">\n          <ToggleStrip\n            label=\"Mode\"\n            options={MODE_OPTIONS}\n            value={simpleMode}\n            onChange={(m) => {\n              setSimpleMode(m);\n              setSimpleExpr(EMPTY_FILTER);\n            }}\n            format={(m) => MODE_LABELS[m]}\n          />\n          <ToggleStrip\n            label=\"Min chars\"\n            options={MIN_CHARS_OPTIONS}\n            value={simpleMinChars}\n            onChange={setSimpleMinChars}\n            format={(n) => (n === 0 ? \"off\" : String(n))}\n          />\n        </div>\n        <SearchInput\n          value={simpleExpr}\n          onChange={setSimpleExpr}\n          mode={simpleMode}\n          minChars={simpleMinChars}\n          placeholder=\"Search...\"\n          className=\"max-w-sm\"\n        />\n        <FlatTermsInspector expr={simpleExpr} />\n      </PlaygroundSection>\n\n      {/* Section 1b: searchFields mode */}\n      <PlaygroundSection\n        title=\"SearchInput — searchFields (multi-field OR)\"\n        description=\"Produces a FilterOr with one term per field. Toggle field sets, mode, and minChars to explore different behaviours.\"\n        variant=\"card\"\n      >\n        <div className=\"flex flex-wrap gap-4 mb-3\">\n          <ToggleStrip\n            label=\"Fields\"\n            options={FIELD_PRESET_INDICES}\n            value={fieldsPresetIdx}\n            onChange={(idx) => {\n              setFieldsPresetIdx(idx);\n              setFieldsExpr(EMPTY_FILTER);\n            }}\n            format={(idx) => SEARCH_FIELD_PRESETS[idx].label}\n          />\n          <ToggleStrip\n            label=\"Mode\"\n            options={MODE_OPTIONS}\n            value={fieldsMode}\n            onChange={(m) => {\n              setFieldsMode(m);\n              setFieldsExpr(EMPTY_FILTER);\n            }}\n            format={(m) => MODE_LABELS[m]}\n          />\n          <ToggleStrip\n            label=\"Min chars\"\n            options={MIN_CHARS_OPTIONS}\n            value={fieldsMinChars}\n            onChange={setFieldsMinChars}\n            format={(n) => (n === 0 ? \"off\" : String(n))}\n          />\n        </div>\n        <SearchInput\n          value={fieldsExpr}\n          onChange={setFieldsExpr}\n          searchFields={activeSearchFields}\n          mode={fieldsMode}\n          minChars={fieldsMinChars}\n          placeholder={`Search by ${activeSearchFields.join(\" or \")}...`}\n          className=\"max-w-sm\"\n        />\n        <div className=\"mt-3 space-y-2\">\n          <p className=\"text-xs text-muted-foreground\">\n            searchFields: [{activeSearchFields.map((f) => `\"${f}\"`).join(\", \")}]\n          </p>\n          <p className=\"text-xs text-muted-foreground\">FilterExpr AST:</p>\n          <FilterExprInspector expr={fieldsExpr} />\n          {!isEmptyFilterExpr(fieldsExpr) && (\n            <>\n              <p className=\"text-xs text-muted-foreground\">\n                Serialized q= string:\n              </p>\n              <pre className=\"rounded-md bg-muted px-4 py-3 text-xs overflow-auto\">\n                {serializeFilterExpr(fieldsExpr)}\n              </pre>\n            </>\n          )}\n        </div>\n      </PlaygroundSection>\n\n      {/* Section 2: faceted mode -- two-column schema editor */}\n      <PlaygroundSection\n        title=\"SearchInput — faceted mode\"\n        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.\"\n        variant=\"card\"\n      >\n        <div className=\"flex gap-4 items-start\">\n          {/* Left: schema editor */}\n          <Card className=\"flex-1 min-w-0 p-3 flex flex-col gap-2\">\n            <p className=\"text-xs font-medium text-muted-foreground\">\n              JSON Schema\n            </p>\n            {schemaError && (\n              <Badge variant=\"destructive\" className=\"text-xs self-start\">\n                {schemaError}\n              </Badge>\n            )}\n            <FormTextarea\n              value={schemaText}\n              onChange={(e) => handleSchemaTextChange(e.target.value)}\n              className=\"font-mono text-xs\"\n              rows={18}\n            />\n          </Card>\n\n          {/* Load button */}\n          <div className=\"flex items-center self-center\">\n            <SimpleTooltip label=\"Load schema into search\">\n              <Button\n                variant=\"default\"\n                size=\"icon\"\n                onClick={handleLoadSchema}\n                disabled={!!schemaError}\n              >\n                <ArrowRight size={18} />\n              </Button>\n            </SimpleTooltip>\n          </div>\n\n          {/* Right: live search + output */}\n          <Card className=\"flex-1 min-w-0 p-3 flex flex-col gap-3\">\n            <p className=\"text-xs font-medium text-muted-foreground\">\n              Live search\n            </p>\n            <SearchInput\n              value={facetedExpr}\n              onChange={handleFacetedChange}\n              schema={activeSchema}\n              mode=\"explicit\"\n              placeholder=\"Add filter...\"\n            />\n            <div className=\"flex items-center gap-2 text-xs text-muted-foreground\">\n              <span>onChange fired:</span>\n              <span className=\"font-mono font-medium text-foreground\">\n                {facetedSubmitCount}x\n              </span>\n            </div>\n            <FilterExprInspector expr={facetedExpr} />\n          </Card>\n        </div>\n      </PlaygroundSection>\n\n      {/* Section 3: faceted mode + EntityTable wired together */}\n      <PlaygroundSection\n        title=\"EntityTable with SearchInput\"\n        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.\"\n        variant=\"card\"\n      >\n        <SearchInput\n          value={tableExpr}\n          onChange={setTableExpr}\n          schema={SEARCH_FACET_SCHEMA}\n          mode=\"explicit\"\n          placeholder=\"Filter users... (press Enter to apply)\"\n          className=\"mb-4 max-w-sm\"\n        />\n        <EntityTable<SampleRow>\n          schema={activeTableSchema}\n          uiSchema={activeTableUiSchema}\n          data={tableData}\n          isLoading={false}\n          isError={false}\n          entityLabel=\"users\"\n          isFiltered={!isEmptyFilterExpr(tableExpr)}\n        />\n\n        {/* Schema editor below the table */}\n        <div className=\"mt-4\">\n          <Card className=\"border shadow-sm p-4 flex flex-col\">\n            <div className=\"flex items-center justify-between mb-2\">\n              <Tabs\n                value={tableSchemaTab}\n                onValueChange={setTableSchemaTab}\n                className=\"flex flex-col flex-1\"\n              >\n                <div className=\"flex items-center justify-between\">\n                  <TabsList>\n                    <TabsTrigger value=\"schema\">JSON Schema</TabsTrigger>\n                    <TabsTrigger value=\"uischema\">UI Schema</TabsTrigger>\n                  </TabsList>\n                  <div className=\"flex items-center gap-2\">\n                    {tableSchemaError && (\n                      <Badge variant=\"destructive\" className=\"text-xs\">\n                        {tableSchemaError}\n                      </Badge>\n                    )}\n                    <SimpleTooltip label=\"Apply schema to table above\">\n                      <Button\n                        variant=\"default\"\n                        size=\"icon\"\n                        onClick={handleApplyTableSchema}\n                        disabled={!!tableSchemaError}\n                      >\n                        <ArrowUp size={18} />\n                      </Button>\n                    </SimpleTooltip>\n                  </div>\n                </div>\n                <TabsContent value=\"schema\" className=\"mt-2\">\n                  <JsonEditor\n                    value={tableSchemaText}\n                    editablePaths={[\"/\"]}\n                    onChange={handleTableSchemaTextChange}\n                    height=\"280px\"\n                    className=\"rounded-md border overflow-hidden\"\n                  />\n                </TabsContent>\n                <TabsContent value=\"uischema\" className=\"mt-2\">\n                  <JsonEditor\n                    value={tableUiSchemaText}\n                    editablePaths={[\"/\"]}\n                    onChange={handleTableUiSchemaTextChange}\n                    height=\"280px\"\n                    className=\"rounded-md border overflow-hidden\"\n                  />\n                </TabsContent>\n              </Tabs>\n            </div>\n          </Card>\n        </div>\n      </PlaygroundSection>\n\n      {/* Section 4: Local renderers demo */}\n      <PlaygroundSection\n        title=\"EntityTable with Local Renderers\"\n        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).\"\n        variant=\"card\"\n      >\n        <EntityTable<SampleRow>\n          schema={CUSTOM_RENDERER_SCHEMA}\n          renderers={CUSTOM_RENDERERS}\n          data={{\n            data: ALL_ROWS,\n            meta: {\n              total: ALL_ROWS.length,\n              limit: ALL_ROWS.length,\n              offset: 0,\n              has_next: false,\n              has_prev: false,\n            },\n          }}\n          isLoading={false}\n          isError={false}\n          entityLabel=\"users\"\n        />\n      </PlaygroundSection>\n\n      {/* Section 5: EntitySelect -- searchable select with mock fetcher */}\n      <PlaygroundSection\n        title=\"EntitySelect\"\n        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'.\"\n        variant=\"card\"\n      >\n        <div className=\"flex gap-6 items-start\">\n          <EntitySelect\n            fetcher={patientFetcher}\n            queryKey=\"playground-patients\"\n            value={selectedPatient}\n            onChange={setSelectedPatient}\n            label=\"Patient\"\n            placeholder=\"Select patient...\"\n            searchPlaceholder=\"Search patients...\"\n            className=\"max-w-xs\"\n          />\n          <Card className=\"flex-1 min-w-0 p-3\">\n            <p className=\"text-xs font-medium text-muted-foreground mb-2\">\n              Selected value\n            </p>\n            <pre className=\"rounded-md bg-muted px-4 py-3 text-xs overflow-auto\">\n              {JSON.stringify(selectedPatient, null, 2)}\n            </pre>\n          </Card>\n        </div>\n      </PlaygroundSection>\n\n      {/* Section 6: EntityTree -- schema-driven tree with static nested data */}\n      <PlaygroundSection\n        title=\"EntityTree\"\n        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.\"\n        variant=\"card\"\n      >\n        <EntityTreeDemo />\n      </PlaygroundSection>\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// EntityTree demo\n// ---------------------------------------------------------------------------\n\ninterface OrgRow extends Record<string, unknown> {\n  name: string;\n  type: string;\n  headcount: number;\n}\n\nconst OrgSchema = z.object({\n  name: z.string().meta({ title: \"Name\", \"x-ui-column\": { order: 0 } }),\n  type: z.string().meta({ title: \"Type\", \"x-ui-column\": { order: 1 } }),\n  headcount: z\n    .number()\n    .meta({ title: \"Headcount\", \"x-ui-column\": { order: 2 } }),\n});\n\nconst ORG_TREE_SCHEMA = toJsonSchema(OrgSchema);\n\nconst ORG_NODES: TreeNode<OrgRow>[] = [\n  {\n    id: \"eng\",\n    data: { name: \"Engineering\", type: \"Division\", headcount: 120 },\n    hasChildren: true,\n    children: [\n      {\n        id: \"frontend\",\n        data: { name: \"Frontend\", type: \"Team\", headcount: 18 },\n        hasChildren: true,\n        children: [\n          {\n            id: \"design-sys\",\n            data: { name: \"Design System\", type: \"Squad\", headcount: 5 },\n            hasChildren: false,\n          },\n        ],\n      },\n      {\n        id: \"backend\",\n        data: { name: \"Backend\", type: \"Team\", headcount: 32 },\n        hasChildren: false,\n      },\n      {\n        id: \"infra\",\n        data: { name: \"Infrastructure\", type: \"Team\", headcount: 14 },\n        hasChildren: false,\n      },\n    ],\n  },\n  {\n    id: \"product\",\n    data: { name: \"Product\", type: \"Division\", headcount: 45 },\n    hasChildren: true,\n    children: [\n      {\n        id: \"research\",\n        data: { name: \"Research\", type: \"Team\", headcount: 8 },\n        hasChildren: false,\n      },\n      {\n        id: \"pm\",\n        data: { name: \"Product Management\", type: \"Team\", headcount: 12 },\n        hasChildren: false,\n      },\n    ],\n  },\n  {\n    id: \"ops\",\n    data: { name: \"Operations\", type: \"Division\", headcount: 30 },\n    hasChildren: false,\n  },\n];\n\nfunction EntityTreeDemo() {\n  const {\n    expandedIds: treeExpandedIds,\n    onExpand: onTreeExpand,\n    onCollapse: onTreeCollapse,\n  } = useTreeExpansion();\n  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());\n  const [activeId, setActiveId] = useState<string | null>(null);\n\n  return (\n    <div className=\"space-y-4\">\n      <EntityTree<OrgRow>\n        schema={ORG_TREE_SCHEMA}\n        nodes={ORG_NODES}\n        expandedIds={treeExpandedIds}\n        onExpand={onTreeExpand}\n        onCollapse={onTreeCollapse}\n        onNodeSelect={(node) => setActiveId(node.id)}\n        onNodeEdit={(node) => setActiveId(node.id)}\n        activeNodeId={activeId ?? undefined}\n        selectedIds={selectedIds}\n        onSelectionChange={(id, selected) =>\n          setSelectedIds((prev) => {\n            const next = new Set(prev);\n            if (selected) next.add(id);\n            else next.delete(id);\n            return next;\n          })\n        }\n        entityLabel=\"departments\"\n      />\n      <div className=\"flex gap-6 text-xs text-muted-foreground\">\n        {activeId && (\n          <span>\n            Active: <span className=\"font-mono\">{activeId}</span>\n          </span>\n        )}\n        {selectedIds.size > 0 && (\n          <span>\n            Selected:{\" \"}\n            <span className=\"font-mono\">{[...selectedIds].join(\", \")}</span>\n          </span>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-DZB6WFHA.js

@@ -0,0 +1,401 @@
+import {
+  ExampleBlock
+} from "./chunk-C2EZ2ECG.js";
+
+// src/pages/PlayFormWidgets.tsx
+import {
+  useCallback,
+  useMemo,
+  useState
+} from "react";
+import { SimpleStack, Card } from "@petrarca/sonnet-ui";
+import {
+  TextInputWidget,
+  TextareaWidget,
+  NumberWidget,
+  CheckboxWidget,
+  SelectWidget,
+  QuantityWidget,
+  DEFAULT_WIDGETS
+} from "@petrarca/sonnet-forms";
+import { jsx, jsxs } from "react/jsx-runtime";
+var dummySchema = {
+  title: "Form Widgets Demo",
+  type: "object",
+  properties: {},
+  "x-entity": {
+    type: "entity",
+    label: "Demo",
+    relations: []
+  }
+};
+function makeQuantityHandler(set) {
+  return (v) => {
+    if (v != null && typeof v === "object" && !Array.isArray(v)) {
+      set(v);
+    }
+  };
+}
+function PlayFormWidgets() {
+  const [textValue, setTextValue] = useState("");
+  const [textareaValue, setTextareaValue] = useState("");
+  const [numberValue, setNumberValue] = useState(void 0);
+  const [checkboxValue, setCheckboxValue] = useState(false);
+  const [selectValue, setSelectValue] = useState("");
+  const [multiSelectValue, setMultiSelectValue] = useState([]);
+  const [multiSelectColorValue, setMultiSelectColorValue] = useState(
+    []
+  );
+  const [tempValue, setTempValue] = useState({
+    value: 37,
+    unit: "degC"
+  });
+  const [weightValue, setWeightValue] = useState({
+    value: void 0,
+    unit: "kg"
+  });
+  const [bpValue, setBpValue] = useState({
+    value: 72,
+    unit: "bpm"
+  });
+  const [priceValue, setPriceValue] = useState({
+    value: 49.99,
+    unit: "EUR"
+  });
+  const onTextChange = useCallback(
+    (v) => setTextValue(typeof v === "string" ? v : ""),
+    []
+  );
+  const onTextareaChange = useCallback(
+    (v) => setTextareaValue(typeof v === "string" ? v : ""),
+    []
+  );
+  const onNumberChange = useCallback(
+    (v) => setNumberValue(typeof v === "number" ? v : void 0),
+    []
+  );
+  const onCheckboxChange = useCallback(
+    (v) => setCheckboxValue(typeof v === "boolean" ? v : false),
+    []
+  );
+  const onSelectChange = useCallback(
+    (v) => setSelectValue(typeof v === "string" ? v : ""),
+    []
+  );
+  const onMultiSelectChange = useCallback(
+    (v) => setMultiSelectValue(Array.isArray(v) ? v : []),
+    []
+  );
+  const onMultiSelectColorChange = useCallback(
+    (v) => setMultiSelectColorValue(Array.isArray(v) ? v : []),
+    []
+  );
+  const onTempChange = useMemo(() => makeQuantityHandler(setTempValue), []);
+  const onWeightChange = useMemo(() => makeQuantityHandler(setWeightValue), []);
+  const onBpChange = useMemo(() => makeQuantityHandler(setBpValue), []);
+  const onPriceChange = useMemo(() => makeQuantityHandler(setPriceValue), []);
+  return /* @__PURE__ */ jsxs("div", { className: "w-full max-w-4xl space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h1", { children: "Basic Form Widgets Playground" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-3", children: "Interactive demonstration of all basic form widgets" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(SimpleStack, { gap: "md", style: { maxWidth: "900px" }, children: [
+      /* @__PURE__ */ jsx(Card, { className: "border shadow-sm p-4", children: /* @__PURE__ */ jsxs(SimpleStack, { gap: "sm", children: [
+        /* @__PURE__ */ jsx("h2", { children: "TextInputWidget" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Single-line text input with support for various HTML input types (text, email, password, url, etc.)" }),
+        /* @__PURE__ */ jsx(
+          TextInputWidget,
+          {
+            id: "text-input-demo",
+            name: "textInput",
+            value: textValue,
+            onChange: onTextChange,
+            label: "Text Input",
+            description: "Enter some text",
+            placeholder: "Type here...",
+            propertySchema: { type: "string" },
+            schema: dummySchema,
+            registry: DEFAULT_WIDGETS
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TextInputWidget,
+          {
+            id: "text-input-email",
+            name: "emailInput",
+            value: textValue,
+            onChange: onTextChange,
+            label: "Email Input",
+            description: "Input type: email",
+            placeholder: "user@example.com",
+            propertySchema: { type: "string", format: "email" },
+            schema: dummySchema,
+            registry: DEFAULT_WIDGETS,
+            options: { inputType: "email" }
+          }
+        ),
+        /* @__PURE__ */ jsx("pre", { className: "text-[11px] bg-muted p-2 rounded overflow-x-auto", children: /* @__PURE__ */ jsx("code", { children: JSON.stringify({ value: textValue }, null, 2) }) })
+      ] }) }),
+      /* @__PURE__ */ jsx(Card, { className: "border shadow-sm p-4", children: /* @__PURE__ */ jsxs(SimpleStack, { gap: "sm", children: [
+        /* @__PURE__ */ jsx("h2", { children: "TextareaWidget" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Multi-line text input with configurable rows and autosize support" }),
+        /* @__PURE__ */ jsx(
+          TextareaWidget,
+          {
+            id: "textarea-demo",
+            name: "textarea",
+            value: textareaValue,
+            onChange: onTextareaChange,
+            label: "Textarea",
+            description: "Enter multiple lines",
+            placeholder: "Type here...",
+            propertySchema: { type: "string" },
+            schema: dummySchema,
+            registry: DEFAULT_WIDGETS,
+            options: { rows: 4 }
+          }
+        ),
+        /* @__PURE__ */ jsx("pre", { className: "text-[11px] bg-muted p-2 rounded overflow-x-auto", children: /* @__PURE__ */ jsx("code", { children: JSON.stringify({ value: textareaValue }, null, 2) }) })
+      ] }) }),
+      /* @__PURE__ */ jsx(Card, { className: "border shadow-sm p-4", children: /* @__PURE__ */ jsxs(SimpleStack, { gap: "sm", children: [
+        /* @__PURE__ */ jsx("h2", { children: "NumberWidget" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Number input with support for min, max, and step constraints" }),
+        /* @__PURE__ */ jsx(
+          NumberWidget,
+          {
+            id: "number-demo",
+            name: "number",
+            value: numberValue,
+            onChange: onNumberChange,
+            label: "Number Input",
+            description: "Enter a number (0-100, step: 5)",
+            placeholder: "0",
+            propertySchema: { type: "number", minimum: 0, maximum: 100 },
+            schema: dummySchema,
+            registry: DEFAULT_WIDGETS,
+            options: { step: 5 }
+          }
+        ),
+        /* @__PURE__ */ jsx("pre", { className: "text-[11px] bg-muted p-2 rounded overflow-x-auto", children: /* @__PURE__ */ jsx("code", { children: JSON.stringify({ value: numberValue }, null, 2) }) })
+      ] }) }),
+      /* @__PURE__ */ jsx(Card, { className: "border shadow-sm p-4", children: /* @__PURE__ */ jsxs(SimpleStack, { gap: "sm", children: [
+        /* @__PURE__ */ jsx("h2", { children: "CheckboxWidget" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Boolean checkbox for true/false values" }),
+        /* @__PURE__ */ jsx(
+          CheckboxWidget,
+          {
+            id: "checkbox-demo",
+            name: "checkbox",
+            value: checkboxValue,
+            onChange: onCheckboxChange,
+            label: "Enable Feature",
+            description: "Check to enable",
+            propertySchema: { type: "boolean" },
+            schema: dummySchema,
+            registry: DEFAULT_WIDGETS
+          }
+        ),
+        /* @__PURE__ */ jsx("pre", { className: "text-[11px] bg-muted p-2 rounded overflow-x-auto", children: /* @__PURE__ */ jsx("code", { children: JSON.stringify({ value: checkboxValue }, null, 2) }) })
+      ] }) }),
+      /* @__PURE__ */ jsx(Card, { className: "border shadow-sm p-4", children: /* @__PURE__ */ jsxs(SimpleStack, { gap: "sm", children: [
+        /* @__PURE__ */ jsx("h2", { children: "SelectWidget" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Dropdown select for enum values with single-select, multi-select, and custom badge colors" }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 pt-2", children: [
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "Single select", children: /* @__PURE__ */ jsx(
+            SelectWidget,
+            {
+              id: "select-demo",
+              name: "select",
+              value: selectValue,
+              onChange: onSelectChange,
+              label: "Select Status",
+              description: "Choose a status",
+              placeholder: "Select one...",
+              propertySchema: {
+                type: "string",
+                enum: ["active", "inactive", "pending", "archived"]
+              },
+              schema: dummySchema,
+              registry: DEFAULT_WIDGETS,
+              options: {
+                enumNames: {
+                  active: "Active",
+                  inactive: "Inactive",
+                  pending: "Pending",
+                  archived: "Archived"
+                },
+                searchable: true,
+                clearable: true
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "Multi select", children: /* @__PURE__ */ jsx(
+            SelectWidget,
+            {
+              id: "multiselect-demo",
+              name: "multiselect",
+              value: multiSelectValue,
+              onChange: onMultiSelectChange,
+              label: "Select Tags",
+              description: "Choose multiple tags",
+              placeholder: "Select tags...",
+              propertySchema: {
+                type: "array",
+                items: { type: "string" },
+                enum: [
+                  "frontend",
+                  "backend",
+                  "database",
+                  "devops",
+                  "testing",
+                  "security"
+                ]
+              },
+              schema: dummySchema,
+              registry: DEFAULT_WIDGETS,
+              options: { searchable: true, clearable: true }
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "Custom badge color", children: /* @__PURE__ */ jsx(
+            SelectWidget,
+            {
+              id: "multiselect-color-demo",
+              name: "multiselectColor",
+              value: multiSelectColorValue,
+              onChange: onMultiSelectColorChange,
+              label: "Select Categories",
+              description: "Custom grape-colored badges",
+              placeholder: "Select categories...",
+              propertySchema: {
+                type: "array",
+                items: { type: "string" },
+                enum: [
+                  "feature",
+                  "bugfix",
+                  "enhancement",
+                  "documentation",
+                  "refactor"
+                ]
+              },
+              schema: dummySchema,
+              registry: DEFAULT_WIDGETS,
+              options: {
+                searchable: true,
+                clearable: true,
+                badgeColor: "grape",
+                enumNames: {
+                  feature: "Feature",
+                  bugfix: "Bug Fix",
+                  enhancement: "Enhancement",
+                  documentation: "Documentation",
+                  refactor: "Refactor"
+                }
+              }
+            }
+          ) })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx(Card, { className: "border shadow-sm p-4", children: /* @__PURE__ */ jsxs(SimpleStack, { gap: "sm", children: [
+        /* @__PURE__ */ jsx("h2", { children: "QuantityWidget" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Compound numeric value + unit selector. Multi-unit shows a dropdown, single-unit shows static text, prefix mode places the unit before the value." }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 pt-2", children: [
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "Multi-unit suffix (Temperature)", children: /* @__PURE__ */ jsx(
+            QuantityWidget,
+            {
+              id: "quantity-temp",
+              name: "temperature",
+              value: tempValue,
+              onChange: onTempChange,
+              label: "Temperature",
+              description: "Body temperature with per-unit validation",
+              placeholder: "0.0",
+              propertySchema: { type: "object" },
+              schema: dummySchema,
+              registry: DEFAULT_WIDGETS,
+              options: {
+                precision: 1,
+                units: [
+                  { value: "degC", label: "C", min: 35, max: 42 },
+                  { value: "degF", label: "F", min: 95, max: 108 }
+                ]
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "Single-unit suffix (Weight)", children: /* @__PURE__ */ jsx(
+            QuantityWidget,
+            {
+              id: "quantity-weight",
+              name: "weight",
+              value: weightValue,
+              onChange: onWeightChange,
+              label: "Weight",
+              description: "Single unit, global min/max from schema",
+              placeholder: "0",
+              propertySchema: {
+                type: "object",
+                minimum: 0,
+                maximum: 500
+              },
+              schema: dummySchema,
+              registry: DEFAULT_WIDGETS,
+              options: {
+                precision: 1,
+                units: [{ value: "kg", label: "kg" }]
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "Integer mode (Heart Rate)", children: /* @__PURE__ */ jsx(
+            QuantityWidget,
+            {
+              id: "quantity-hr",
+              name: "heartRate",
+              value: bpValue,
+              onChange: onBpChange,
+              label: "Heart Rate",
+              description: "Integer with per-unit validation (30-250 bpm)",
+              placeholder: "0",
+              propertySchema: { type: "object" },
+              schema: dummySchema,
+              registry: DEFAULT_WIDGETS,
+              options: {
+                precision: 0,
+                units: [
+                  { value: "bpm", label: "bpm", min: 30, max: 250 }
+                ]
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "Multi-unit prefix (Currency)", children: /* @__PURE__ */ jsx(
+            QuantityWidget,
+            {
+              id: "quantity-price",
+              name: "price",
+              value: priceValue,
+              onChange: onPriceChange,
+              label: "Price",
+              description: "Currency symbol as prefix, multi-unit selector",
+              placeholder: "0.00",
+              propertySchema: { type: "object", minimum: 0 },
+              schema: dummySchema,
+              registry: DEFAULT_WIDGETS,
+              options: {
+                precision: 2,
+                unitPosition: "prefix",
+                units: [
+                  { value: "EUR", label: "EUR" },
+                  { value: "USD", label: "$" },
+                  { value: "GBP", label: "GBP" }
+                ]
+              }
+            }
+          ) })
+        ] })
+      ] }) })
+    ] }) })
+  ] });
+}
+
+export {
+  PlayFormWidgets
+};
+//# sourceMappingURL=chunk-DZB6WFHA.js.map

package/dist/chunk-DZB6WFHA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pages/PlayFormWidgets.tsx"],"sourcesContent":["/**\n * Playground page for testing form widgets\n * Accessible at /playground/form-widgets\n */\n\nimport {\n  type Dispatch,\n  type SetStateAction,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\nimport { SimpleStack, Card } from \"@petrarca/sonnet-ui\";\nimport { ExampleBlock } from \"../PlaygroundSection\";\nimport {\n  TextInputWidget,\n  TextareaWidget,\n  NumberWidget,\n  CheckboxWidget,\n  SelectWidget,\n  QuantityWidget,\n  DEFAULT_WIDGETS,\n  type QuantityValue,\n} from \"@petrarca/sonnet-forms\";\nimport type { JsonSchema } from \"@petrarca/sonnet-core/schema\";\n\nconst dummySchema: JsonSchema = {\n  title: \"Form Widgets Demo\",\n  type: \"object\",\n  properties: {},\n  \"x-entity\": {\n    type: \"entity\",\n    label: \"Demo\",\n    relations: [],\n  },\n};\n\nfunction makeQuantityHandler(\n  set: Dispatch<SetStateAction<QuantityValue>>,\n): (v: unknown) => void {\n  return (v: unknown) => {\n    if (v != null && typeof v === \"object\" && !Array.isArray(v)) {\n      set(v as QuantityValue);\n    }\n  };\n}\n\nexport default function PlayFormWidgets() {\n  // State for each widget\n  const [textValue, setTextValue] = useState<string>(\"\");\n  const [textareaValue, setTextareaValue] = useState<string>(\"\");\n  const [numberValue, setNumberValue] = useState<number | undefined>(undefined);\n  const [checkboxValue, setCheckboxValue] = useState<boolean>(false);\n  const [selectValue, setSelectValue] = useState<string>(\"\");\n  const [multiSelectValue, setMultiSelectValue] = useState<string[]>([]);\n  const [multiSelectColorValue, setMultiSelectColorValue] = useState<string[]>(\n    [],\n  );\n  const [tempValue, setTempValue] = useState<QuantityValue>({\n    value: 37.0,\n    unit: \"degC\",\n  });\n  const [weightValue, setWeightValue] = useState<QuantityValue>({\n    value: undefined,\n    unit: \"kg\",\n  });\n  const [bpValue, setBpValue] = useState<QuantityValue>({\n    value: 72,\n    unit: \"bpm\",\n  });\n  const [priceValue, setPriceValue] = useState<QuantityValue>({\n    value: 49.99,\n    unit: \"EUR\",\n  });\n\n  // Narrowing adapters: WidgetProps.onChange is (value: unknown) => void.\n  // All quantity adapters have stable identity (empty deps) -- the fallback\n  // branch is dropped so the state setter is not captured in the closure.\n  const onTextChange = useCallback(\n    (v: unknown) => setTextValue(typeof v === \"string\" ? v : \"\"),\n    [],\n  );\n  const onTextareaChange = useCallback(\n    (v: unknown) => setTextareaValue(typeof v === \"string\" ? v : \"\"),\n    [],\n  );\n  const onNumberChange = useCallback(\n    (v: unknown) => setNumberValue(typeof v === \"number\" ? v : undefined),\n    [],\n  );\n  const onCheckboxChange = useCallback(\n    (v: unknown) => setCheckboxValue(typeof v === \"boolean\" ? v : false),\n    [],\n  );\n  const onSelectChange = useCallback(\n    (v: unknown) => setSelectValue(typeof v === \"string\" ? v : \"\"),\n    [],\n  );\n  const onMultiSelectChange = useCallback(\n    (v: unknown) =>\n      setMultiSelectValue(Array.isArray(v) ? (v as string[]) : []),\n    [],\n  );\n  const onMultiSelectColorChange = useCallback(\n    (v: unknown) =>\n      setMultiSelectColorValue(Array.isArray(v) ? (v as string[]) : []),\n    [],\n  );\n  // Quantity adapters: QuantityWidget passes unknown, guard narrows to QuantityValue.\n  const onTempChange = useMemo(() => makeQuantityHandler(setTempValue), []);\n  const onWeightChange = useMemo(() => makeQuantityHandler(setWeightValue), []);\n  const onBpChange = useMemo(() => makeQuantityHandler(setBpValue), []);\n  const onPriceChange = useMemo(() => makeQuantityHandler(setPriceValue), []);\n\n  return (\n    <div className=\"w-full max-w-4xl space-y-6\">\n      <div>\n        <h1>Basic Form Widgets Playground</h1>\n        <p className=\"text-sm text-muted-foreground mb-3\">\n          Interactive demonstration of all basic form widgets\n        </p>\n      </div>\n\n      <div>\n        <SimpleStack gap=\"md\" style={{ maxWidth: \"900px\" }}>\n          {/* TextInputWidget */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <h2>TextInputWidget</h2>\n              <p className=\"text-sm text-muted-foreground\">\n                Single-line text input with support for various HTML input types\n                (text, email, password, url, etc.)\n              </p>\n\n              <TextInputWidget\n                id=\"text-input-demo\"\n                name=\"textInput\"\n                value={textValue}\n                onChange={onTextChange}\n                label=\"Text Input\"\n                description=\"Enter some text\"\n                placeholder=\"Type here...\"\n                propertySchema={{ type: \"string\" }}\n                schema={dummySchema}\n                registry={DEFAULT_WIDGETS}\n              />\n\n              <TextInputWidget\n                id=\"text-input-email\"\n                name=\"emailInput\"\n                value={textValue}\n                onChange={onTextChange}\n                label=\"Email Input\"\n                description=\"Input type: email\"\n                placeholder=\"user@example.com\"\n                propertySchema={{ type: \"string\", format: \"email\" }}\n                schema={dummySchema}\n                registry={DEFAULT_WIDGETS}\n                options={{ inputType: \"email\" }}\n              />\n\n              <pre className=\"text-[11px] bg-muted p-2 rounded overflow-x-auto\">\n                <code>{JSON.stringify({ value: textValue }, null, 2)}</code>\n              </pre>\n            </SimpleStack>\n          </Card>\n\n          {/* TextareaWidget */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <h2>TextareaWidget</h2>\n              <p className=\"text-sm text-muted-foreground\">\n                Multi-line text input with configurable rows and autosize\n                support\n              </p>\n\n              <TextareaWidget\n                id=\"textarea-demo\"\n                name=\"textarea\"\n                value={textareaValue}\n                onChange={onTextareaChange}\n                label=\"Textarea\"\n                description=\"Enter multiple lines\"\n                placeholder=\"Type here...\"\n                propertySchema={{ type: \"string\" }}\n                schema={dummySchema}\n                registry={DEFAULT_WIDGETS}\n                options={{ rows: 4 }}\n              />\n\n              <pre className=\"text-[11px] bg-muted p-2 rounded overflow-x-auto\">\n                <code>{JSON.stringify({ value: textareaValue }, null, 2)}</code>\n              </pre>\n            </SimpleStack>\n          </Card>\n\n          {/* NumberWidget */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <h2>NumberWidget</h2>\n              <p className=\"text-sm text-muted-foreground\">\n                Number input with support for min, max, and step constraints\n              </p>\n\n              <NumberWidget\n                id=\"number-demo\"\n                name=\"number\"\n                value={numberValue}\n                onChange={onNumberChange}\n                label=\"Number Input\"\n                description=\"Enter a number (0-100, step: 5)\"\n                placeholder=\"0\"\n                propertySchema={{ type: \"number\", minimum: 0, maximum: 100 }}\n                schema={dummySchema}\n                registry={DEFAULT_WIDGETS}\n                options={{ step: 5 }}\n              />\n\n              <pre className=\"text-[11px] bg-muted p-2 rounded overflow-x-auto\">\n                <code>{JSON.stringify({ value: numberValue }, null, 2)}</code>\n              </pre>\n            </SimpleStack>\n          </Card>\n\n          {/* CheckboxWidget */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <h2>CheckboxWidget</h2>\n              <p className=\"text-sm text-muted-foreground\">\n                Boolean checkbox for true/false values\n              </p>\n\n              <CheckboxWidget\n                id=\"checkbox-demo\"\n                name=\"checkbox\"\n                value={checkboxValue}\n                onChange={onCheckboxChange}\n                label=\"Enable Feature\"\n                description=\"Check to enable\"\n                propertySchema={{ type: \"boolean\" }}\n                schema={dummySchema}\n                registry={DEFAULT_WIDGETS}\n              />\n\n              <pre className=\"text-[11px] bg-muted p-2 rounded overflow-x-auto\">\n                <code>{JSON.stringify({ value: checkboxValue }, null, 2)}</code>\n              </pre>\n            </SimpleStack>\n          </Card>\n\n          {/* SelectWidget - All Variations */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <h2>SelectWidget</h2>\n              <p className=\"text-sm text-muted-foreground\">\n                Dropdown select for enum values with single-select,\n                multi-select, and custom badge colors\n              </p>\n\n              <div className=\"grid grid-cols-2 gap-3 pt-2\">\n                <ExampleBlock label=\"Single select\">\n                  <SelectWidget\n                    id=\"select-demo\"\n                    name=\"select\"\n                    value={selectValue}\n                    onChange={onSelectChange}\n                    label=\"Select Status\"\n                    description=\"Choose a status\"\n                    placeholder=\"Select one...\"\n                    propertySchema={{\n                      type: \"string\",\n                      enum: [\"active\", \"inactive\", \"pending\", \"archived\"],\n                    }}\n                    schema={dummySchema}\n                    registry={DEFAULT_WIDGETS}\n                    options={{\n                      enumNames: {\n                        active: \"Active\",\n                        inactive: \"Inactive\",\n                        pending: \"Pending\",\n                        archived: \"Archived\",\n                      },\n                      searchable: true,\n                      clearable: true,\n                    }}\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Multi select\">\n                  <SelectWidget\n                    id=\"multiselect-demo\"\n                    name=\"multiselect\"\n                    value={multiSelectValue}\n                    onChange={onMultiSelectChange}\n                    label=\"Select Tags\"\n                    description=\"Choose multiple tags\"\n                    placeholder=\"Select tags...\"\n                    propertySchema={{\n                      type: \"array\",\n                      items: { type: \"string\" },\n                      enum: [\n                        \"frontend\",\n                        \"backend\",\n                        \"database\",\n                        \"devops\",\n                        \"testing\",\n                        \"security\",\n                      ],\n                    }}\n                    schema={dummySchema}\n                    registry={DEFAULT_WIDGETS}\n                    options={{ searchable: true, clearable: true }}\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Custom badge color\">\n                  <SelectWidget\n                    id=\"multiselect-color-demo\"\n                    name=\"multiselectColor\"\n                    value={multiSelectColorValue}\n                    onChange={onMultiSelectColorChange}\n                    label=\"Select Categories\"\n                    description=\"Custom grape-colored badges\"\n                    placeholder=\"Select categories...\"\n                    propertySchema={{\n                      type: \"array\",\n                      items: { type: \"string\" },\n                      enum: [\n                        \"feature\",\n                        \"bugfix\",\n                        \"enhancement\",\n                        \"documentation\",\n                        \"refactor\",\n                      ],\n                    }}\n                    schema={dummySchema}\n                    registry={DEFAULT_WIDGETS}\n                    options={{\n                      searchable: true,\n                      clearable: true,\n                      badgeColor: \"grape\",\n                      enumNames: {\n                        feature: \"Feature\",\n                        bugfix: \"Bug Fix\",\n                        enhancement: \"Enhancement\",\n                        documentation: \"Documentation\",\n                        refactor: \"Refactor\",\n                      },\n                    }}\n                  />\n                </ExampleBlock>\n              </div>\n            </SimpleStack>\n          </Card>\n\n          {/* QuantityWidget */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <h2>QuantityWidget</h2>\n              <p className=\"text-sm text-muted-foreground\">\n                Compound numeric value + unit selector. Multi-unit shows a\n                dropdown, single-unit shows static text, prefix mode places the\n                unit before the value.\n              </p>\n\n              <div className=\"grid grid-cols-2 gap-3 pt-2\">\n                <ExampleBlock label=\"Multi-unit suffix (Temperature)\">\n                  <QuantityWidget\n                    id=\"quantity-temp\"\n                    name=\"temperature\"\n                    value={tempValue}\n                    onChange={onTempChange}\n                    label=\"Temperature\"\n                    description=\"Body temperature with per-unit validation\"\n                    placeholder=\"0.0\"\n                    propertySchema={{ type: \"object\" }}\n                    schema={dummySchema}\n                    registry={DEFAULT_WIDGETS}\n                    options={{\n                      precision: 1,\n                      units: [\n                        { value: \"degC\", label: \"C\", min: 35, max: 42 },\n                        { value: \"degF\", label: \"F\", min: 95, max: 108 },\n                      ],\n                    }}\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Single-unit suffix (Weight)\">\n                  <QuantityWidget\n                    id=\"quantity-weight\"\n                    name=\"weight\"\n                    value={weightValue}\n                    onChange={onWeightChange}\n                    label=\"Weight\"\n                    description=\"Single unit, global min/max from schema\"\n                    placeholder=\"0\"\n                    propertySchema={{\n                      type: \"object\",\n                      minimum: 0,\n                      maximum: 500,\n                    }}\n                    schema={dummySchema}\n                    registry={DEFAULT_WIDGETS}\n                    options={{\n                      precision: 1,\n                      units: [{ value: \"kg\", label: \"kg\" }],\n                    }}\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Integer mode (Heart Rate)\">\n                  <QuantityWidget\n                    id=\"quantity-hr\"\n                    name=\"heartRate\"\n                    value={bpValue}\n                    onChange={onBpChange}\n                    label=\"Heart Rate\"\n                    description=\"Integer with per-unit validation (30-250 bpm)\"\n                    placeholder=\"0\"\n                    propertySchema={{ type: \"object\" }}\n                    schema={dummySchema}\n                    registry={DEFAULT_WIDGETS}\n                    options={{\n                      precision: 0,\n                      units: [\n                        { value: \"bpm\", label: \"bpm\", min: 30, max: 250 },\n                      ],\n                    }}\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Multi-unit prefix (Currency)\">\n                  <QuantityWidget\n                    id=\"quantity-price\"\n                    name=\"price\"\n                    value={priceValue}\n                    onChange={onPriceChange}\n                    label=\"Price\"\n                    description=\"Currency symbol as prefix, multi-unit selector\"\n                    placeholder=\"0.00\"\n                    propertySchema={{ type: \"object\", minimum: 0 }}\n                    schema={dummySchema}\n                    registry={DEFAULT_WIDGETS}\n                    options={{\n                      precision: 2,\n                      unitPosition: \"prefix\",\n                      units: [\n                        { value: \"EUR\", label: \"EUR\" },\n                        { value: \"USD\", label: \"$\" },\n                        { value: \"GBP\", label: \"GBP\" },\n                      ],\n                    }}\n                  />\n                </ExampleBlock>\n              </div>\n            </SimpleStack>\n          </Card>\n        </SimpleStack>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-KAT24CQQ.js → chunk-FZ3ZC7VM.js}

@@ -60,12 +60,14 @@ function PlayJsonEditor() {
       setParseError(e.message);
     }
   };
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("h1", { children: "JSON Editor" }),
-    /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-6", children: "A constrained JSON editor with selectively editable regions using JSON Pointer (RFC 6901). Blue-tinted regions are readonly, white regions are editable." }),
+  return /* @__PURE__ */ jsxs("div", { className: "w-full max-w-4xl space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h1", { children: "JSON Editor" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "A constrained JSON editor with selectively editable regions using JSON Pointer (RFC 6901). Blue-tinted regions are readonly, white regions are editable." })
+    ] }),
     /* @__PURE__ */ jsxs("div", { className: "grid gap-6 lg:grid-cols-[1fr_320px]", children: [
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h3", { className: "mb-2", children: "Patient Schema" }),
+        /* @__PURE__ */ jsx("h4", { className: "mb-2", children: "Patient Schema" }),
         /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground mb-3", children: [
           "Editable paths:",
           " ",
@@ -84,7 +86,7 @@ function PlayJsonEditor() {
         !parseError && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-2", children: "Valid JSON" })
       ] }),
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h3", { className: "mb-2", children: "Configuration" }),
+        /* @__PURE__ */ jsx("h4", { className: "mb-2", children: "Configuration" }),
         /* @__PURE__ */ jsxs("div", { className: "rounded-lg border p-4 space-y-3", children: [
           /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Editable Paths" }),
@@ -122,4 +124,4 @@ function PlayJsonEditor() {
 export {
   PlayJsonEditor
 };
-//# sourceMappingURL=chunk-KAT24CQQ.js.map
+//# sourceMappingURL=chunk-FZ3ZC7VM.js.map

package/dist/chunk-FZ3ZC7VM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pages/PlayJsonEditor.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { JsonEditor } from \"@petrarca/sonnet-ui/json-editor\";\nimport { Separator } from \"@petrarca/sonnet-ui\";\n\nconst SAMPLE_SCHEMA = JSON.stringify(\n  {\n    $schema: \"https://json-schema.org/draft/2020-12/schema\",\n    $id: \"https://example.com/schemas/patient.json\",\n    title: \"Patient\",\n    type: \"object\",\n    metadata: {\n      version: \"1.0.0\",\n      description: \"Core patient demographic record\",\n      tags: [\"healthcare\", \"demographics\", \"mpi\"],\n      owner: \"platform-team\",\n    },\n    properties: {\n      patient_id: {\n        type: \"string\",\n        format: \"uuid\",\n        description: \"Unique patient identifier\",\n      },\n      first_name: {\n        type: \"string\",\n        minLength: 1,\n        maxLength: 100,\n      },\n      last_name: {\n        type: \"string\",\n        minLength: 1,\n        maxLength: 100,\n      },\n      date_of_birth: {\n        type: \"string\",\n        format: \"date\",\n      },\n      gender: {\n        type: \"string\",\n        enum: [\"male\", \"female\", \"other\", \"unknown\"],\n      },\n    },\n    required: [\"patient_id\", \"first_name\", \"last_name\"],\n  },\n  null,\n  2,\n);\n\nconst EDITABLE_PATHS = [\"/metadata\"];\n\n/**\n * Playground page for the JsonEditor component.\n *\n * Demonstrates a JSON Schema where only the /metadata section\n * is editable. The rest of the schema (properties, required, etc.)\n * is visible but locked.\n */\nexport default function PlayJsonEditor() {\n  const [value, setValue] = useState(SAMPLE_SCHEMA);\n  const [lastValid, setLastValid] = useState(SAMPLE_SCHEMA);\n  const [parseError, setParseError] = useState<string | null>(null);\n\n  const handleChange = (newValue: string) => {\n    setValue(newValue);\n    try {\n      JSON.parse(newValue);\n      setLastValid(newValue);\n      setParseError(null);\n    } catch (e) {\n      setParseError((e as Error).message);\n    }\n  };\n\n  return (\n    <div className=\"w-full max-w-4xl space-y-6\">\n      <div>\n        <h1>JSON Editor</h1>\n        <p className=\"text-sm text-muted-foreground mt-1\">\n          A constrained JSON editor with selectively editable regions using JSON\n          Pointer (RFC 6901). Blue-tinted regions are readonly, white regions\n          are editable.\n        </p>\n      </div>\n\n      <div className=\"grid gap-6 lg:grid-cols-[1fr_320px]\">\n        <div>\n          <h4 className=\"mb-2\">Patient Schema</h4>\n          <p className=\"text-xs text-muted-foreground mb-3\">\n            Editable paths:{\" \"}\n            <code className=\"text-xs bg-muted px-1 py-0.5 rounded\">\n              {EDITABLE_PATHS.join(\", \")}\n            </code>\n          </p>\n          <JsonEditor\n            value={value}\n            editablePaths={EDITABLE_PATHS}\n            onChange={handleChange}\n            height=\"500px\"\n          />\n          {parseError && (\n            <p className=\"text-xs text-destructive mt-2\">{parseError}</p>\n          )}\n          {!parseError && (\n            <p className=\"text-xs text-muted-foreground mt-2\">Valid JSON</p>\n          )}\n        </div>\n\n        <div>\n          <h4 className=\"mb-2\">Configuration</h4>\n          <div className=\"rounded-lg border p-4 space-y-3\">\n            <div>\n              <p className=\"text-xs font-medium text-muted-foreground mb-1\">\n                Editable Paths\n              </p>\n              <ul className=\"space-y-1\">\n                {EDITABLE_PATHS.map((p) => (\n                  <li key={p}>\n                    <code className=\"text-xs bg-muted px-1.5 py-0.5 rounded\">\n                      {p}\n                    </code>\n                  </li>\n                ))}\n              </ul>\n            </div>\n\n            <Separator />\n\n            <div>\n              <p className=\"text-xs font-medium text-muted-foreground mb-1\">\n                How it works\n              </p>\n              <ul className=\"text-xs text-muted-foreground space-y-1\">\n                <li>Blue-tinted background = readonly (locked)</li>\n                <li>White background = editable</li>\n                <li>\n                  You can add, edit, and delete lines within the editable region\n                </li>\n                <li>Changes outside editable regions are silently blocked</li>\n                <li>JSON syntax is validated on every keystroke</li>\n              </ul>\n            </div>\n\n            <Separator />\n\n            <div>\n              <p className=\"text-xs font-medium text-muted-foreground mb-1\">\n                Parsed metadata\n              </p>\n              <pre className=\"text-xs bg-muted rounded p-2 overflow-auto max-h-48\">\n                {(() => {\n                  try {\n                    const parsed = JSON.parse(lastValid);\n                    return JSON.stringify(parsed.metadata, null, 2);\n                  } catch {\n                    return \"Parse error\";\n                  }\n                })()}\n              </pre>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}