@flanksource/clicky-ui 0.2.21 → 0.3.2

package/dist/components/json-schema-form-fields.js.map

@@ -1 +1 @@
-{"version":3,"file":"json-schema-form-fields.js","sources":["../../src/components/json-schema-form-fields.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { LabelIcon, type LabelIconSpec } from \"../data/Icon\";\nimport { formatDateTimeRelative } from \"../data/cells/timestamp-format\";\nimport { Combobox } from \"./Combobox\";\nimport { DateTimePicker } from \"./DateTimePicker\";\nimport type { FieldControl, FieldOption, FormLayout } from \"./json-schema-form-types\";\nimport {\n  defaultPlaceholder,\n  inputClass,\n  toText,\n  withSyntheticValue,\n} from \"./json-schema-form-utils\";\nimport {\n  controlHeightClass,\n  controlMinHeightClass,\n  fieldInnerGapClass,\n  inlineRowGapClass,\n  labelSizeClass,\n  stackedRowGapClass,\n  type FormSize,\n} from \"./json-schema-form-size\";\n\n// FieldsGrid is the container every group of field rows renders into — the\n// top-level form and each nested object/map. In inline mode it owns the single\n// 2-column track definition: `fit-content(labelMaxWidth)` for the label column,\n// `minmax(0, valueMaxWidth)` for the value column. Every field row is a\n// `subgrid` that inherits these tracks, so all labels share one column width and\n// every value lines up — a real form grid, not per-row independent grids.\n// (`fit-content()` is the only valid CSS for \"size to content, clamped to a max\"\n// — `min(w, max-content)` is rejected by the browser, which silently drops the\n// whole declaration and collapses every row to a stacked-looking column. The\n// template is an inline style because Tailwind can't interpolate runtime widths.)\n// Stacked mode is a plain single-column grid.\nexport function FieldsGrid({ layout, size, children }: { layout: FormLayout; size: FormSize; children: ReactNode }) {\n  if (layout.mode === \"inline\") {\n    const labelMaxWidth = layout.labelMaxWidth ?? \"40ch\";\n    const valueMaxWidth = layout.valueMaxWidth ?? \"600px\";\n    return (\n      <div\n        className={cn(\"grid\", inlineRowGapClass[size])}\n        style={{ gridTemplateColumns: `fit-content(${labelMaxWidth}) minmax(0, ${valueMaxWidth})` }}\n      >\n        {children}\n      </div>\n    );\n  }\n  return <div className={cn(\"grid\", stackedRowGapClass[size])}>{children}</div>;\n}\n\n// FieldWrapper lays out a single label + value (+ helper/error). In inline mode\n// it is a `subgrid` row spanning the parent FieldsGrid's two columns, so its\n// label and value snap to the shared label/value tracks (helper/error sit under\n// the value column). In stacked mode the label sits tight above its control as\n// one unit, capped at valueMaxWidth so controls don't stretch edge to edge.\nexport function FieldWrapper({\n  label,\n  value,\n  helper,\n  error,\n  layout,\n  size,\n}: {\n  label: ReactNode;\n  value: ReactNode;\n  helper?: ReactNode;\n  error?: ReactNode;\n  layout: FormLayout;\n  size: FormSize;\n}) {\n  if (layout.mode === \"inline\") {\n    return (\n      <div className=\"col-span-2 grid grid-cols-subgrid items-start gap-x-3 gap-y-0.5\">\n        <div className={cn(\"flex min-w-0 items-center\", controlMinHeightClass[size])}>{label}</div>\n        <div className=\"min-w-0\">{value}</div>\n        {helper && <p className=\"col-start-2 text-xs text-muted-foreground\">{helper}</p>}\n        {error && <p className=\"col-start-2 text-xs text-destructive\">{error}</p>}\n      </div>\n    );\n  }\n  return (\n    <div\n      className=\"flex w-full flex-col gap-1\"\n      style={{ maxWidth: layout.valueMaxWidth ?? \"600px\" }}\n    >\n      {label}\n      {value}\n      {helper && <p className=\"text-xs text-muted-foreground\">{helper}</p>}\n      {error && <p className=\"text-xs text-destructive\">{error}</p>}\n    </div>\n  );\n}\n\nexport function FieldLabel({ field, fieldId, size }: { field: FieldControl; fieldId: string; size: FormSize }) {\n  return (\n    <label htmlFor={fieldId} className={cn(\"flex min-w-0 items-center gap-2 font-medium\", labelSizeClass[size])}>\n      <LabelIcon icon={field.labelIcon} className=\"shrink-0 text-[15px] text-muted-foreground\" />\n      <span className=\"truncate\" title={field.label !== field.key ? field.key : undefined}>\n        {field.label}\n      </span>\n      {field.required && <span className=\"shrink-0 text-destructive\">*</span>}\n      {field.badge && (\n        <span className=\"shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\">\n          {field.badge}\n        </span>\n      )}\n    </label>\n  );\n}\n\n// ObjectSection renders a nested object as a labelled section: a header row\n// (the field label + required/badge) above its fields, which fill the full\n// width below. It replaces the inline label + bordered box so nested objects\n// read as flat, headed groups rather than indented sub-forms. `col-span-full`\n// makes it span both tracks of an inline FieldsGrid (full width, not crammed\n// into the value column); in a stacked single-column grid it is a no-op.\nexport function ObjectSection({\n  label,\n  required,\n  size,\n  badge,\n  helper,\n  labelIcon,\n  children,\n}: {\n  label: string;\n  required: boolean;\n  size: FormSize;\n  badge?: string;\n  helper?: string;\n  labelIcon?: LabelIconSpec;\n  children: ReactNode;\n}) {\n  return (\n    <div className={cn(\"col-span-full flex flex-col\", fieldInnerGapClass[size])}>\n      <div className={cn(\"flex items-center gap-2 border-b border-border pb-1 font-semibold\", labelSizeClass[size])}>\n        <LabelIcon icon={labelIcon} className=\"text-[15px] text-muted-foreground\" />\n        <span>{label}</span>\n        {required && <span className=\"text-destructive\">*</span>}\n        {badge && (\n          <span className=\"rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\">\n            {badge}\n          </span>\n        )}\n      </div>\n      {helper && <p className=\"text-xs text-muted-foreground\">{helper}</p>}\n      {children}\n    </div>\n  );\n}\n\n// ReadOnlyValue renders a `readOnly` field's current value as static text — no\n// input, no border, just the value (date/date-time formatted human-readably).\n// An empty value shows an em-dash. Carries the same id + data-jsf-input as the\n// editable controls so layout and queries stay uniform.\nexport function ReadOnlyValue({ field, fieldId, size }: { field: FieldControl; fieldId: string; size: FormSize }) {\n  const text = toText(field.value);\n  const display = field.kind === \"date\" && text ? formatDateTimeRelative(text) : text;\n  return (\n    <span\n      id={fieldId}\n      data-jsf-input\n      data-jsf-readonly\n      className={cn(\"flex items-center text-foreground\", controlHeightClass[size], labelSizeClass[size])}\n      title={text || undefined}\n    >\n      {display || <span className=\"text-muted-foreground\">—</span>}\n    </span>\n  );\n}\n\n// FieldAdornmentWrapper positions a field's leading/trailing in-field adornments\n// (FieldControl.prefix at the left edge, FieldControl.suffix at the right). The\n// container is tagged data-jsf-control so an adornment can locate its sibling\n// input[data-jsf-input] (e.g. for caret-aware insertion). With neither adornment\n// it renders the input bare, so unadorned fields are byte-for-byte unchanged.\nfunction FieldAdornmentWrapper({\n  prefix,\n  suffix,\n  children,\n}: {\n  prefix?: ReactNode;\n  suffix?: ReactNode;\n  children: ReactNode;\n}) {\n  if (!prefix && !suffix) return <>{children}</>;\n  return (\n    <div data-jsf-control className=\"relative\">\n      {prefix && <div className=\"absolute inset-y-0 left-1.5 flex items-center\">{prefix}</div>}\n      {children}\n      {suffix && <div className=\"absolute inset-y-0 right-1.5 flex items-center\">{suffix}</div>}\n    </div>\n  );\n}\n\nexport function StringControl({\n  field,\n  fieldId,\n  readOnly,\n  size,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  readOnly: boolean;\n  size: FormSize;\n}) {\n  return (\n    <FieldAdornmentWrapper prefix={field.prefix} suffix={field.suffix}>\n      <input\n        id={fieldId}\n        type=\"text\"\n        data-jsf-input\n        className={cn(inputClass(size), field.prefix && \"pl-8\", field.suffix && \"pr-8\")}\n        value={toText(field.value)}\n        disabled={readOnly}\n        placeholder={defaultPlaceholder(field.schema)}\n        onChange={(e) => field.onChange(e.target.value)}\n      />\n    </FieldAdornmentWrapper>\n  );\n}\n\nexport function NumberControl({\n  field,\n  fieldId,\n  readOnly,\n  size,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  readOnly: boolean;\n  size: FormSize;\n}) {\n  // type=\"text\" (not number) so non-numeric values a consumer permits — e.g.\n  // template tokens — are not silently dropped by the browser.\n  const coerce = field.coerceNumber !== false;\n  return (\n    <FieldAdornmentWrapper prefix={field.prefix} suffix={field.suffix}>\n      <input\n        id={fieldId}\n        type=\"text\"\n        inputMode=\"decimal\"\n        data-jsf-input\n        className={cn(inputClass(size), field.prefix && \"pl-8\", field.suffix && \"pr-8\")}\n        value={toText(field.value)}\n        disabled={readOnly}\n        placeholder={defaultPlaceholder(field.schema)}\n        onChange={(e) => {\n          const raw = e.target.value;\n          // Coerce mid-typing ONLY when the parse round-trips to the same text\n          // (e.g. \"100\", \"33.5\") — so an in-progress decimal like \"33.\" or a\n          // trailing-zero \"33.30\" keeps its raw text instead of collapsing to a\n          // number and stranding the caret. Non-numeric tokens fall through to\n          // the raw string. Blur finalizes any still-uncoerced numeric text.\n          if (coerce && raw.trim() !== \"\" && String(Number(raw)) === raw.trim()) {\n            field.onChange(Number(raw));\n          } else {\n            field.onChange(raw);\n          }\n        }}\n        onBlur={(e) => {\n          const raw = e.target.value;\n          if (coerce && raw.trim() !== \"\" && Number.isFinite(Number(raw))) {\n            field.onChange(Number(raw));\n          }\n        }}\n      />\n    </FieldAdornmentWrapper>\n  );\n}\n\n// DateControl edits a `format: date`/`date-time` string. Read-only, it shows the\n// human-readable absolute + relative form (e.g. \"Apr 15, 2026, 12:00 PM (2h\n// ago)\"); editable, a DateTimePicker. The raw string is committed unchanged so a\n// consumer-permitted template token in the field is preserved.\nexport function DateControl({\n  field,\n  fieldId,\n  readOnly,\n  size,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  readOnly: boolean;\n  size: FormSize;\n}) {\n  const text = toText(field.value);\n  if (readOnly) {\n    return (\n      <div\n        id={fieldId}\n        data-jsf-input\n        className={cn(\"flex items-center text-foreground\", controlHeightClass[size], labelSizeClass[size])}\n        title={text || undefined}\n      >\n        {text ? formatDateTimeRelative(text) : <span className=\"text-muted-foreground\">—</span>}\n      </div>\n    );\n  }\n  return (\n    <DateTimePicker\n      id={fieldId}\n      aria-label={field.label}\n      data-jsf-input\n      inputClassName={cn(inputClass(size), field.prefix && \"pl-8\", field.suffix ? \"pr-14\" : \"pr-8\")}\n      value={text}\n      onChange={(next) => field.onChange(next)}\n      placeholder={defaultPlaceholder(field.schema)}\n      prefix={field.prefix}\n      suffix={field.suffix}\n    />\n  );\n}\n\nexport function BooleanControl({\n  field,\n  fieldId,\n  readOnly,\n  size,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  readOnly: boolean;\n  size: FormSize;\n}) {\n  // Only render a checkbox when the value is genuinely boolean (or unset).\n  // A non-boolean value (e.g. a token a consumer left in place) renders as text\n  // so it is preserved and editable.\n  if (typeof field.value === \"boolean\" || field.value === undefined || field.value === null) {\n    return (\n      <div className={cn(\"flex items-center\", controlHeightClass[size])}>\n        <input\n          id={fieldId}\n          type=\"checkbox\"\n          className=\"h-4 w-4 accent-primary\"\n          checked={field.value === true}\n          disabled={readOnly}\n          onChange={(e) => field.onChange(e.target.checked)}\n        />\n      </div>\n    );\n  }\n  return <StringControl field={field} fieldId={fieldId} readOnly={readOnly} size={size} />;\n}\n\nexport function EnumControl({\n  field,\n  fieldId,\n  readOnly,\n  size,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  readOnly: boolean;\n  size: FormSize;\n}) {\n  const value = toText(field.value);\n  const options = withSyntheticValue(field.options ?? [], value);\n  if (field.display === \"radio\") {\n    return (\n      <RadioGroupControl field={field} fieldId={fieldId} readOnly={readOnly} options={options} value={value} size={size} />\n    );\n  }\n  return (\n    <Combobox\n      id={fieldId}\n      options={options}\n      value={value}\n      disabled={readOnly}\n      size={size}\n      allowCustomValue={field.allowCustomValue ?? false}\n      onChange={(v) => field.onChange(v)}\n      prefix={field.prefix}\n      suffix={field.suffix}\n      {...(defaultPlaceholder(field.schema) ? { placeholder: defaultPlaceholder(field.schema) } : {})}\n    />\n  );\n}\n\n// RadioGroupControl renders a small fixed enum as a segmented radio-button group\n// instead of a dropdown. It shares EnumControl's option list (any out-of-enum\n// value is already prepended, so a token still shows). One `radiogroup` role +\n// native radios keep it keyboard-navigable; the visible chip is a styled label.\nfunction RadioGroupControl({\n  field,\n  fieldId,\n  readOnly,\n  options,\n  value,\n  size,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  readOnly: boolean;\n  options: FieldOption[];\n  value: string;\n  size: FormSize;\n}) {\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={field.label}\n      id={fieldId}\n      data-jsf-input\n      className=\"inline-flex flex-wrap items-center gap-1 rounded-md border border-input bg-background p-0.5\"\n    >\n      {options.map((opt) => {\n        const checked = opt.value === value;\n        return (\n          <label\n            key={opt.value}\n            className={cn(\n              \"inline-flex cursor-pointer select-none items-center rounded px-2.5 py-1\",\n              labelSizeClass[size],\n              checked\n                ? \"bg-primary text-primary-foreground\"\n                : \"text-muted-foreground hover:bg-accent hover:text-foreground\",\n              readOnly && \"cursor-not-allowed opacity-60\",\n            )}\n          >\n            <input\n              type=\"radio\"\n              name={fieldId}\n              className=\"sr-only\"\n              value={opt.value}\n              checked={checked}\n              disabled={readOnly}\n              onChange={() => field.onChange(opt.value)}\n            />\n            {opt.label}\n          </label>\n        );\n      })}\n    </div>\n  );\n}\n\n// HMR probe\n// HMR probe 2\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"json-schema-form-fields.js","sources":["../../src/components/json-schema-form-fields.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { LabelIcon, type LabelIconSpec } from \"../data/Icon\";\nimport { formatDateTimeRelative } from \"../data/cells/timestamp-format\";\nimport { Combobox } from \"./Combobox\";\nimport { DateTimePicker } from \"./DateTimePicker\";\nimport { GridControl } from \"./json-schema-form-grid\";\nimport { resolveLookupScope, useLookupFetcher } from \"./form-lookup-context\";\nimport type { FieldControl, FieldOption, FormLayout } from \"./json-schema-form-types\";\nimport {\n  defaultPlaceholder,\n  inputClass,\n  toText,\n  withSyntheticValue,\n} from \"./json-schema-form-utils\";\nimport {\n  controlHeightClass,\n  controlMinHeightClass,\n  fieldInnerGapClass,\n  inlineRowGapClass,\n  labelSizeClass,\n  stackedRowGapClass,\n  type FormSize,\n} from \"./json-schema-form-size\";\n\n// FieldsGrid is the container every group of field rows renders into — the\n// top-level form and each nested object/map. In inline mode it owns the single\n// 2-column track definition: `fit-content(labelMaxWidth)` for the label column,\n// `minmax(0, valueMaxWidth)` for the value column. Every field row is a\n// `subgrid` that inherits these tracks, so all labels share one column width and\n// every value lines up — a real form grid, not per-row independent grids.\n// (`fit-content()` is the only valid CSS for \"size to content, clamped to a max\"\n// — `min(w, max-content)` is rejected by the browser, which silently drops the\n// whole declaration and collapses every row to a stacked-looking column. The\n// template is an inline style because Tailwind can't interpolate runtime widths.)\n// Stacked mode is a plain single-column grid.\nexport function FieldsGrid({ layout, size, children }: { layout: FormLayout; size: FormSize; children: ReactNode }) {\n  if (layout.mode === \"inline\") {\n    const labelMaxWidth = layout.labelMaxWidth ?? \"40ch\";\n    const valueMaxWidth = layout.valueMaxWidth ?? \"600px\";\n    return (\n      <div\n        className={cn(\"grid\", inlineRowGapClass[size])}\n        style={{ gridTemplateColumns: `fit-content(${labelMaxWidth}) minmax(0, ${valueMaxWidth})` }}\n      >\n        {children}\n      </div>\n    );\n  }\n  return <div className={cn(\"grid\", stackedRowGapClass[size])}>{children}</div>;\n}\n\n// FieldWrapper lays out a single label + value (+ helper/error). In inline mode\n// it is a `subgrid` row spanning the parent FieldsGrid's two columns, so its\n// label and value snap to the shared label/value tracks (helper/error sit under\n// the value column). In stacked mode the label sits tight above its control as\n// one unit, capped at valueMaxWidth so controls don't stretch edge to edge.\nexport function FieldWrapper({\n  label,\n  value,\n  helper,\n  error,\n  layout,\n  size,\n}: {\n  label: ReactNode;\n  value: ReactNode;\n  helper?: ReactNode;\n  error?: ReactNode;\n  layout: FormLayout;\n  size: FormSize;\n}) {\n  if (layout.mode === \"inline\") {\n    return (\n      <div className=\"col-span-2 grid grid-cols-subgrid items-start gap-x-3 gap-y-0.5\">\n        <div className={cn(\"flex min-w-0 items-center\", controlMinHeightClass[size])}>{label}</div>\n        <div className=\"min-w-0\">{value}</div>\n        {helper && <p className=\"col-start-2 text-xs text-muted-foreground\">{helper}</p>}\n        {error && <p className=\"col-start-2 text-xs text-destructive\">{error}</p>}\n      </div>\n    );\n  }\n  return (\n    <div\n      className=\"flex w-full flex-col gap-1\"\n      style={{ maxWidth: layout.valueMaxWidth ?? \"600px\" }}\n    >\n      {label}\n      {value}\n      {helper && <p className=\"text-xs text-muted-foreground\">{helper}</p>}\n      {error && <p className=\"text-xs text-destructive\">{error}</p>}\n    </div>\n  );\n}\n\nexport function FieldLabel({ field, fieldId, size }: { field: FieldControl; fieldId: string; size: FormSize }) {\n  return (\n    <label htmlFor={fieldId} className={cn(\"flex min-w-0 items-center gap-2 font-medium\", labelSizeClass[size])}>\n      <LabelIcon icon={field.labelIcon} className=\"shrink-0 text-[15px] text-muted-foreground\" />\n      <span className=\"truncate\" title={field.label !== field.key ? field.key : undefined}>\n        {field.label}\n      </span>\n      {field.required && <span className=\"shrink-0 text-destructive\">*</span>}\n      {field.badge && (\n        <span className=\"shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\">\n          {field.badge}\n        </span>\n      )}\n    </label>\n  );\n}\n\n// ObjectSection renders a nested object as a labelled section: a header row\n// (the field label + required/badge) above its fields, which fill the full\n// width below. It replaces the inline label + bordered box so nested objects\n// read as flat, headed groups rather than indented sub-forms. `col-span-full`\n// makes it span both tracks of an inline FieldsGrid (full width, not crammed\n// into the value column); in a stacked single-column grid it is a no-op.\nexport function ObjectSection({\n  label,\n  required,\n  size,\n  badge,\n  helper,\n  labelIcon,\n  children,\n}: {\n  label: string;\n  required: boolean;\n  size: FormSize;\n  badge?: string;\n  helper?: string;\n  labelIcon?: LabelIconSpec;\n  children: ReactNode;\n}) {\n  return (\n    <div className={cn(\"col-span-full flex flex-col\", fieldInnerGapClass[size])}>\n      <div className={cn(\"flex items-center gap-2 border-b border-border pb-1 font-semibold\", labelSizeClass[size])}>\n        <LabelIcon icon={labelIcon} className=\"text-[15px] text-muted-foreground\" />\n        <span>{label}</span>\n        {required && <span className=\"text-destructive\">*</span>}\n        {badge && (\n          <span className=\"rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\">\n            {badge}\n          </span>\n        )}\n      </div>\n      {helper && <p className=\"text-xs text-muted-foreground\">{helper}</p>}\n      {children}\n    </div>\n  );\n}\n\n// ReadOnlyValue renders a `readOnly` field's current value as static text — no\n// input, no border, just the value (date/date-time formatted human-readably).\n// An empty value shows an em-dash. Carries the same id + data-jsf-input as the\n// editable controls so layout and queries stay uniform.\nexport function ReadOnlyValue({ field, fieldId, size }: { field: FieldControl; fieldId: string; size: FormSize }) {\n  const text = toText(field.value);\n  const display = field.kind === \"date\" && text ? formatDateTimeRelative(text) : text;\n  return (\n    <span\n      id={fieldId}\n      data-jsf-input\n      data-jsf-readonly\n      className={cn(\"flex items-center text-foreground\", controlHeightClass[size], labelSizeClass[size])}\n      title={text || undefined}\n    >\n      {display || <span className=\"text-muted-foreground\">—</span>}\n    </span>\n  );\n}\n\n// FieldAdornmentWrapper positions a field's leading/trailing in-field adornments\n// (FieldControl.prefix at the left edge, FieldControl.suffix at the right). The\n// container is tagged data-jsf-control so an adornment can locate its sibling\n// input[data-jsf-input] (e.g. for caret-aware insertion). With neither adornment\n// it renders the input bare, so unadorned fields are byte-for-byte unchanged.\nfunction FieldAdornmentWrapper({\n  prefix,\n  suffix,\n  children,\n}: {\n  prefix?: ReactNode;\n  suffix?: ReactNode;\n  children: ReactNode;\n}) {\n  if (!prefix && !suffix) return <>{children}</>;\n  return (\n    <div data-jsf-control className=\"relative\">\n      {prefix && <div className=\"absolute inset-y-0 left-1.5 flex items-center\">{prefix}</div>}\n      {children}\n      {suffix && <div className=\"absolute inset-y-0 right-1.5 flex items-center\">{suffix}</div>}\n    </div>\n  );\n}\n\nexport function StringControl({\n  field,\n  fieldId,\n  readOnly,\n  size,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  readOnly: boolean;\n  size: FormSize;\n}) {\n  return (\n    <FieldAdornmentWrapper prefix={field.prefix} suffix={field.suffix}>\n      <input\n        id={fieldId}\n        type=\"text\"\n        data-jsf-input\n        className={cn(inputClass(size), field.prefix && \"pl-8\", field.suffix && \"pr-8\")}\n        value={toText(field.value)}\n        disabled={readOnly}\n        placeholder={defaultPlaceholder(field.schema)}\n        onChange={(e) => field.onChange(e.target.value)}\n      />\n    </FieldAdornmentWrapper>\n  );\n}\n\nexport function NumberControl({\n  field,\n  fieldId,\n  readOnly,\n  size,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  readOnly: boolean;\n  size: FormSize;\n}) {\n  // type=\"text\" (not number) so non-numeric values a consumer permits — e.g.\n  // template tokens — are not silently dropped by the browser.\n  const coerce = field.coerceNumber !== false;\n  // A static unit (e.g. \"%\") rides the right edge of the input as a display-only\n  // suffix; a consumer-set `suffix` (e.g. an insert-snippet button) wins if both\n  // are present (number insert triggers mount on the left as `prefix`).\n  const suffix = field.suffix ?? (field.unit ? (\n    <span className=\"pointer-events-none select-none text-muted-foreground\">{field.unit}</span>\n  ) : undefined);\n  return (\n    <FieldAdornmentWrapper prefix={field.prefix} suffix={suffix}>\n      <input\n        id={fieldId}\n        type=\"text\"\n        inputMode=\"decimal\"\n        data-jsf-input\n        className={cn(inputClass(size), field.prefix && \"pl-8\", suffix && \"pr-8\")}\n        value={toText(field.value)}\n        disabled={readOnly}\n        placeholder={defaultPlaceholder(field.schema)}\n        onChange={(e) => {\n          const raw = e.target.value;\n          // Coerce mid-typing ONLY when the parse round-trips to the same text\n          // (e.g. \"100\", \"33.5\") — so an in-progress decimal like \"33.\" or a\n          // trailing-zero \"33.30\" keeps its raw text instead of collapsing to a\n          // number and stranding the caret. Non-numeric tokens fall through to\n          // the raw string. Blur finalizes any still-uncoerced numeric text.\n          if (coerce && raw.trim() !== \"\" && String(Number(raw)) === raw.trim()) {\n            field.onChange(Number(raw));\n          } else {\n            field.onChange(raw);\n          }\n        }}\n        onBlur={(e) => {\n          const raw = e.target.value;\n          if (coerce && raw.trim() !== \"\" && Number.isFinite(Number(raw))) {\n            field.onChange(Number(raw));\n          }\n        }}\n      />\n    </FieldAdornmentWrapper>\n  );\n}\n\n// DateControl edits a `format: date`/`date-time` string. Read-only, it shows the\n// human-readable absolute + relative form (e.g. \"Apr 15, 2026, 12:00 PM (2h\n// ago)\"); editable, a DateTimePicker. The raw string is committed unchanged so a\n// consumer-permitted template token in the field is preserved.\nexport function DateControl({\n  field,\n  fieldId,\n  readOnly,\n  size,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  readOnly: boolean;\n  size: FormSize;\n}) {\n  const text = toText(field.value);\n  if (readOnly) {\n    return (\n      <div\n        id={fieldId}\n        data-jsf-input\n        className={cn(\"flex items-center text-foreground\", controlHeightClass[size], labelSizeClass[size])}\n        title={text || undefined}\n      >\n        {text ? formatDateTimeRelative(text) : <span className=\"text-muted-foreground\">—</span>}\n      </div>\n    );\n  }\n  return (\n    <DateTimePicker\n      id={fieldId}\n      aria-label={field.label}\n      data-jsf-input\n      inputClassName={cn(inputClass(size), field.prefix && \"pl-8\", field.suffix ? \"pr-14\" : \"pr-8\")}\n      value={text}\n      onChange={(next) => field.onChange(next)}\n      placeholder={defaultPlaceholder(field.schema)}\n      prefix={field.prefix}\n      suffix={field.suffix}\n    />\n  );\n}\n\nexport function BooleanControl({\n  field,\n  fieldId,\n  readOnly,\n  size,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  readOnly: boolean;\n  size: FormSize;\n}) {\n  // Only render a checkbox when the value is genuinely boolean (or unset).\n  // A non-boolean value (e.g. a token a consumer left in place) renders as text\n  // so it is preserved and editable.\n  if (typeof field.value === \"boolean\" || field.value === undefined || field.value === null) {\n    return (\n      <div className={cn(\"flex items-center\", controlHeightClass[size])}>\n        <input\n          id={fieldId}\n          type=\"checkbox\"\n          className=\"h-4 w-4 accent-primary\"\n          checked={field.value === true}\n          disabled={readOnly}\n          onChange={(e) => field.onChange(e.target.checked)}\n        />\n      </div>\n    );\n  }\n  return <StringControl field={field} fieldId={fieldId} readOnly={readOnly} size={size} />;\n}\n\nexport function EnumControl({\n  field,\n  fieldId,\n  readOnly,\n  size,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  readOnly: boolean;\n  size: FormSize;\n}) {\n  const value = toText(field.value);\n  const options = withSyntheticValue(field.options ?? [], value);\n  if (field.display === \"grid\") {\n    return <GridControl field={field} fieldId={fieldId} readOnly={readOnly} size={size} />;\n  }\n  if (field.display === \"radio\") {\n    return (\n      <RadioGroupControl field={field} fieldId={fieldId} readOnly={readOnly} options={options} value={value} size={size} />\n    );\n  }\n  return (\n    <Combobox\n      id={fieldId}\n      options={options}\n      value={value}\n      disabled={readOnly}\n      size={size}\n      allowCustomValue={field.allowCustomValue ?? false}\n      onChange={(v) => field.onChange(v)}\n      prefix={field.prefix}\n      suffix={field.suffix}\n      {...(defaultPlaceholder(field.schema) ? { placeholder: defaultPlaceholder(field.schema) } : {})}\n    />\n  );\n}\n\n// LookupControl is the async entity-reference picker for an `x-clicky-lookup`\n// field. It wraps Combobox and fetches options lazily through the form's\n// LookupFetcher (from context): the head set loads when the menu opens and the\n// (debounced) typed query drives server-side search. Single-select keeps\n// allowCustomValue on so a value outside the option set still commits (e.g. an\n// inline DSN). When no fetcher is wired it degrades to a free-text combobox.\nexport function LookupControl({\n  field,\n  fieldId,\n  readOnly,\n  size,\n  rootValue,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  readOnly: boolean;\n  size: FormSize;\n  rootValue?: Record<string, unknown>;\n}) {\n  const fetcher = useLookupFetcher();\n  const descriptor = field.lookup;\n  const value = toText(field.value);\n  const [options, setOptions] = useState<FieldOption[]>([]);\n  const [loading, setLoading] = useState(false);\n\n  // rootValue is read through a ref so onSearch stays referentially stable: a new\n  // onSearch each render would retrigger Combobox's search effect on every\n  // setOptions, looping. The scopeKey effect below re-fetches when scope changes.\n  const rootRef = useRef(rootValue);\n  rootRef.current = rootValue;\n\n  const onSearch = useCallback(\n    (query: string) => {\n      if (!descriptor || !fetcher) return;\n      setLoading(true);\n      const root = rootRef.current;\n      fetcher({ descriptor, query, ...(root ? { rootValue: root } : {}) })\n        .then((next) => setOptions(next))\n        .catch(() => setOptions([]))\n        .finally(() => setLoading(false));\n    },\n    [descriptor, fetcher],\n  );\n\n  // Re-fetch the head set when the scope (a sibling field, e.g. provider type)\n  // changes so the out-of-scope set is replaced rather than shown stale.\n  const scopeKey = descriptor ? JSON.stringify(resolveLookupScope(descriptor, rootValue)) : \"\";\n  useEffect(() => {\n    if (descriptor && fetcher) onSearch(\"\");\n    else setOptions([]);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [scopeKey, onSearch]);\n\n  if (!descriptor || !fetcher) {\n    return (\n      <Combobox\n        id={fieldId}\n        options={withSyntheticValue([], value)}\n        value={value}\n        disabled={readOnly}\n        size={size}\n        allowCustomValue\n        onChange={(v) => field.onChange(v)}\n        {...(defaultPlaceholder(field.schema) ? { placeholder: defaultPlaceholder(field.schema) } : {})}\n      />\n    );\n  }\n\n  return (\n    <Combobox\n      id={fieldId}\n      options={withSyntheticValue(options, value)}\n      value={value}\n      disabled={readOnly}\n      size={size}\n      loading={loading}\n      allowCustomValue={field.allowCustomValue ?? false}\n      onSearch={onSearch}\n      onChange={(v) => field.onChange(v)}\n      {...(defaultPlaceholder(field.schema) ? { placeholder: defaultPlaceholder(field.schema) } : {})}\n    />\n  );\n}\n\n// RadioGroupControl renders a small fixed enum as a segmented radio-button group\n// instead of a dropdown. It shares EnumControl's option list (any out-of-enum\n// value is already prepended, so a token still shows). One `radiogroup` role +\n// native radios keep it keyboard-navigable; the visible chip is a styled label.\nfunction RadioGroupControl({\n  field,\n  fieldId,\n  readOnly,\n  options,\n  value,\n  size,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  readOnly: boolean;\n  options: FieldOption[];\n  value: string;\n  size: FormSize;\n}) {\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={field.label}\n      id={fieldId}\n      data-jsf-input\n      className=\"inline-flex flex-wrap items-center gap-1 rounded-md border border-input bg-background p-0.5\"\n    >\n      {options.map((opt) => {\n        const checked = opt.value === value;\n        return (\n          <label\n            key={opt.value}\n            className={cn(\n              \"inline-flex cursor-pointer select-none items-center rounded px-2.5 py-1\",\n              labelSizeClass[size],\n              checked\n                ? \"bg-primary text-primary-foreground\"\n                : \"text-muted-foreground hover:bg-accent hover:text-foreground\",\n              readOnly && \"cursor-not-allowed opacity-60\",\n            )}\n          >\n            <input\n              type=\"radio\"\n              name={fieldId}\n              className=\"sr-only\"\n              value={opt.value}\n              checked={checked}\n              disabled={readOnly}\n              onChange={() => field.onChange(opt.value)}\n            />\n            {opt.label}\n          </label>\n        );\n      })}\n    </div>\n  );\n}\n\n// TextareaControl edits a long-form string in a multi-line box. Read-only, it\n// shows the value with line breaks preserved; editable, a resizable <textarea>.\n// The raw string is committed unchanged so a consumer-permitted template token\n// survives.\nexport function TextareaControl({\n  field,\n  fieldId,\n  readOnly,\n  size,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  readOnly: boolean;\n  size: FormSize;\n}) {\n  const text = toText(field.value);\n  if (readOnly) {\n    return (\n      <span\n        id={fieldId}\n        data-jsf-input\n        data-jsf-readonly\n        className={cn(\"block whitespace-pre-wrap break-words text-foreground\", labelSizeClass[size])}\n        title={text || undefined}\n      >\n        {text || <span className=\"text-muted-foreground\">—</span>}\n      </span>\n    );\n  }\n  return (\n    <FieldAdornmentWrapper prefix={field.prefix} suffix={field.suffix}>\n      <textarea\n        id={fieldId}\n        data-jsf-input\n        rows={4}\n        className={cn(inputClass(size), \"h-auto min-h-[5rem] resize-y\", field.prefix && \"pl-8\", field.suffix && \"pr-8\")}\n        value={text}\n        disabled={readOnly}\n        placeholder={defaultPlaceholder(field.schema)}\n        onChange={(e) => field.onChange(e.target.value)}\n      />\n    </FieldAdornmentWrapper>\n  );\n}\n\n// DisplayControl renders a static, non-editable presentation element:\n// Label/Title (heading), Message (info text), Line (divider), or Blank/Filler\n// (spacer). It never collects a value; the heading/text source is the field's\n// title (label) and, for \"text\", its description. Rendered identically in the\n// form and the read-only Viewer.\nexport function DisplayControl({ field, size }: { field: FieldControl; size: FormSize }) {\n  const variant = field.displayVariant ?? \"text\";\n  if (variant === \"divider\") {\n    return <hr data-jsf-input className=\"my-1 w-full border-t border-border\" />;\n  }\n  if (variant === \"spacer\") {\n    return <div data-jsf-input aria-hidden className=\"h-2\" />;\n  }\n  if (variant === \"heading\") {\n    return (\n      <div\n        data-jsf-input\n        className={cn(\"border-b border-border pb-1 font-semibold text-foreground\", labelSizeClass[size])}\n      >\n        {field.label}\n      </div>\n    );\n  }\n  const text = field.description ?? toText(field.value) ?? field.label;\n  return (\n    <p data-jsf-input className={cn(\"text-muted-foreground\", labelSizeClass[size])}>\n      {text || field.label}\n    </p>\n  );\n}\n\n// LinkControl renders a read-only external hyperlink. The\n// href is field.href, falling back to the value when it is an absolute URL; with\n// neither it degrades to a plain read-only value.\nexport function LinkControl({ field, fieldId, size }: { field: FieldControl; fieldId: string; size: FormSize }) {\n  const text = toText(field.value);\n  const href = field.href ?? (/^https?:\\/\\//i.test(text) ? text : undefined);\n  if (!href) {\n    return <ReadOnlyValue field={field} fieldId={fieldId} size={size} />;\n  }\n  return (\n    <a\n      id={fieldId}\n      data-jsf-input\n      href={href}\n      target=\"_blank\"\n      rel=\"noreferrer noopener\"\n      className={cn(\"inline-flex items-center text-primary underline underline-offset-2\", controlHeightClass[size], labelSizeClass[size])}\n    >\n      {text || field.label || href}\n    </a>\n  );\n}\n\n// HMR probe\n// HMR probe 2\n"],"names":[],"mappings":"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"}

package/dist/components/json-schema-form-grid.cjs

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const utils = require("../lib/utils.cjs");
+const Icon = require("../data/Icon.cjs");
+const jsonSchemaFormUtils = require("./json-schema-form-utils.cjs");
+const jsonSchemaFormSize = require("./json-schema-form-size.cjs");
+function GridControl({
+  field,
+  fieldId,
+  readOnly,
+  size
+}) {
+  const value = jsonSchemaFormUtils.toText(field.value);
+  const [query, setQuery] = react.useState("");
+  const options = jsonSchemaFormUtils.withSyntheticValue(field.options ?? [], value);
+  if (readOnly) {
+    const selected = options.find((o) => o.value === value);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { id: fieldId, "data-jsf-input": true, children: /* @__PURE__ */ jsxRuntime.jsx(GridCard, { option: selected ?? { value, label: value }, checked: true, readOnly: true, size, onSelect: () => {
+    } }) });
+  }
+  const q = query.trim().toLowerCase();
+  const visible = q ? options.filter((o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q)) : options;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "search",
+        "aria-label": `Filter ${field.label}`,
+        placeholder: "Filter…",
+        value: query,
+        onChange: (e) => setQuery(e.target.value),
+        className: jsonSchemaFormUtils.inputClass(size)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        role: "radiogroup",
+        "aria-label": field.label,
+        id: fieldId,
+        "data-jsf-input": true,
+        className: "grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4",
+        children: [
+          visible.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
+            GridCard,
+            {
+              option: opt,
+              checked: opt.value === value,
+              readOnly: false,
+              size,
+              onSelect: () => field.onChange(opt.value)
+            },
+            opt.value
+          )),
+          visible.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("col-span-full py-4 text-center text-muted-foreground", jsonSchemaFormSize.labelSizeClass[size]), children: "No matches" })
+        ]
+      }
+    )
+  ] });
+}
+function GridCard({
+  option,
+  checked,
+  readOnly,
+  size,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      role: "radio",
+      "aria-checked": checked,
+      disabled: readOnly,
+      onClick: onSelect,
+      className: utils.cn(
+        "flex flex-col items-center justify-center gap-1.5 rounded-md border p-3 text-center transition-colors",
+        jsonSchemaFormSize.labelSizeClass[size],
+        checked ? "border-primary bg-primary/5 ring-1 ring-primary" : "border-input hover:border-primary/50 hover:bg-accent",
+        readOnly && "cursor-default opacity-80"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icon.LabelIcon, { icon: option.icon, className: "text-2xl text-foreground" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "break-words leading-tight", children: option.label })
+      ]
+    }
+  );
+}
+exports.GridControl = GridControl;
+//# sourceMappingURL=json-schema-form-grid.cjs.map

package/dist/components/json-schema-form-grid.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-form-grid.cjs","sources":["../../src/components/json-schema-form-grid.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { LabelIcon } from \"../data/Icon\";\nimport type { FieldControl, FieldOption } from \"./json-schema-form-types\";\nimport { inputClass, toText, withSyntheticValue } from \"./json-schema-form-utils\";\nimport { labelSizeClass, type FormSize } from \"./json-schema-form-size\";\n\n// GridControl renders an enum as a filterable grid of selectable icon cards\n// (instead of a dropdown). It is the presentation for enums carrying\n// x-enum-icons — e.g. the connection \"type\" picker. The current value is always\n// selectable even if it is outside the enum (a template token still shows).\n// Read-only: only the selected card renders, disabled.\nexport function GridControl({\n  field,\n  fieldId,\n  readOnly,\n  size,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  readOnly: boolean;\n  size: FormSize;\n}) {\n  const value = toText(field.value);\n  const [query, setQuery] = useState(\"\");\n  const options = withSyntheticValue(field.options ?? [], value);\n\n  if (readOnly) {\n    const selected = options.find((o) => o.value === value);\n    return (\n      <div id={fieldId} data-jsf-input>\n        <GridCard option={selected ?? { value, label: value }} checked readOnly size={size} onSelect={() => {}} />\n      </div>\n    );\n  }\n\n  const q = query.trim().toLowerCase();\n  const visible = q\n    ? options.filter((o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q))\n    : options;\n\n  return (\n    <div className=\"flex w-full flex-col gap-2\">\n      <input\n        type=\"search\"\n        aria-label={`Filter ${field.label}`}\n        placeholder=\"Filter…\"\n        value={query}\n        onChange={(e) => setQuery(e.target.value)}\n        className={inputClass(size)}\n      />\n      <div\n        role=\"radiogroup\"\n        aria-label={field.label}\n        id={fieldId}\n        data-jsf-input\n        className=\"grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4\"\n      >\n        {visible.map((opt) => (\n          <GridCard\n            key={opt.value}\n            option={opt}\n            checked={opt.value === value}\n            readOnly={false}\n            size={size}\n            onSelect={() => field.onChange(opt.value)}\n          />\n        ))}\n        {visible.length === 0 && (\n          <div className={cn(\"col-span-full py-4 text-center text-muted-foreground\", labelSizeClass[size])}>\n            No matches\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\n// GridCard is one selectable option in the grid: its icon over its label, with a\n// selected (primary ring) state. A native button with role=\"radio\" keeps it\n// keyboard-navigable and screen-reader-correct.\nfunction GridCard({\n  option,\n  checked,\n  readOnly,\n  size,\n  onSelect,\n}: {\n  option: FieldOption;\n  checked: boolean;\n  readOnly: boolean;\n  size: FormSize;\n  onSelect: () => void;\n}) {\n  return (\n    <button\n      type=\"button\"\n      role=\"radio\"\n      aria-checked={checked}\n      disabled={readOnly}\n      onClick={onSelect}\n      className={cn(\n        \"flex flex-col items-center justify-center gap-1.5 rounded-md border p-3 text-center transition-colors\",\n        labelSizeClass[size],\n        checked\n          ? \"border-primary bg-primary/5 ring-1 ring-primary\"\n          : \"border-input hover:border-primary/50 hover:bg-accent\",\n        readOnly && \"cursor-default opacity-80\",\n      )}\n    >\n      <LabelIcon icon={option.icon} className=\"text-2xl text-foreground\" />\n      <span className=\"break-words leading-tight\">{option.label}</span>\n    </button>\n  );\n}\n"],"names":["toText","useState","withSyntheticValue","jsx","jsxs","inputClass","cn","labelSizeClass","LabelIcon"],"mappings":";;;;;;;;AAYO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,QAAQA,oBAAAA,OAAO,MAAM,KAAK;AAChC,QAAM,CAAC,OAAO,QAAQ,IAAIC,MAAAA,SAAS,EAAE;AACrC,QAAM,UAAUC,oBAAAA,mBAAmB,MAAM,WAAW,CAAA,GAAI,KAAK;AAE7D,MAAI,UAAU;AACZ,UAAM,WAAW,QAAQ,KAAK,CAAC,MAAM,EAAE,UAAU,KAAK;AACtD,WACEC,+BAAC,SAAI,IAAI,SAAS,kBAAc,MAC9B,UAAAA,+BAAC,YAAS,QAAQ,YAAY,EAAE,OAAO,OAAO,SAAS,SAAO,MAAC,UAAQ,MAAC,MAAY,UAAU,MAAM;AAAA,IAAC,GAAG,EAAA,CAC1G;AAAA,EAEJ;AAEA,QAAM,IAAI,MAAM,KAAA,EAAO,YAAA;AACvB,QAAM,UAAU,IACZ,QAAQ,OAAO,CAAC,MAAM,EAAE,MAAM,YAAA,EAAc,SAAS,CAAC,KAAK,EAAE,MAAM,YAAA,EAAc,SAAS,CAAC,CAAC,IAC5F;AAEJ,SACEC,2BAAAA,KAAC,OAAA,EAAI,WAAU,8BACb,UAAA;AAAA,IAAAD,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAY,UAAU,MAAM,KAAK;AAAA,QACjC,aAAY;AAAA,QACZ,OAAO;AAAA,QACP,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,QACxC,WAAWE,oBAAAA,WAAW,IAAI;AAAA,MAAA;AAAA,IAAA;AAAA,IAE5BD,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAY,MAAM;AAAA,QAClB,IAAI;AAAA,QACJ,kBAAc;AAAA,QACd,WAAU;AAAA,QAET,UAAA;AAAA,UAAA,QAAQ,IAAI,CAAC,QACZD,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cAEC,QAAQ;AAAA,cACR,SAAS,IAAI,UAAU;AAAA,cACvB,UAAU;AAAA,cACV;AAAA,cACA,UAAU,MAAM,MAAM,SAAS,IAAI,KAAK;AAAA,YAAA;AAAA,YALnC,IAAI;AAAA,UAAA,CAOZ;AAAA,UACA,QAAQ,WAAW,KAClBA,2BAAAA,IAAC,OAAA,EAAI,WAAWG,SAAG,wDAAwDC,mBAAAA,eAAe,IAAI,CAAC,GAAG,UAAA,aAAA,CAElG;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,GACF;AAEJ;AAKA,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,SACEH,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL,gBAAc;AAAA,MACd,UAAU;AAAA,MACV,SAAS;AAAA,MACT,WAAWE,MAAAA;AAAAA,QACT;AAAA,QACAC,mBAAAA,eAAe,IAAI;AAAA,QACnB,UACI,oDACA;AAAA,QACJ,YAAY;AAAA,MAAA;AAAA,MAGd,UAAA;AAAA,QAAAJ,2BAAAA,IAACK,KAAAA,WAAA,EAAU,MAAM,OAAO,MAAM,WAAU,4BAA2B;AAAA,QACnEL,2BAAAA,IAAC,QAAA,EAAK,WAAU,6BAA6B,iBAAO,MAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGhE;;"}

package/dist/components/json-schema-form-grid.d.ts

@@ -0,0 +1,9 @@
+import { FieldControl } from './json-schema-form-types';
+import { FormSize } from './json-schema-form-size';
+export declare function GridControl({ field, fieldId, readOnly, size, }: {
+    field: FieldControl;
+    fieldId: string;
+    readOnly: boolean;
+    size: FormSize;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=json-schema-form-grid.d.ts.map

package/dist/components/json-schema-form-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-form-grid.d.ts","sourceRoot":"","sources":["../../src/components/json-schema-form-grid.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAe,MAAM,0BAA0B,CAAC;AAE1E,OAAO,EAAkB,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAOxE,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAO,EACP,QAAQ,EACR,IAAI,GACL,EAAE;IACD,KAAK,EAAE,YAAY,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,QAAQ,CAAC;CAChB,2CAsDA"}

package/dist/components/json-schema-form-grid.js

@@ -0,0 +1,92 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../lib/utils.js";
+import { LabelIcon } from "../data/Icon.js";
+import { toText, withSyntheticValue, inputClass } from "./json-schema-form-utils.js";
+import { labelSizeClass } from "./json-schema-form-size.js";
+function GridControl({
+  field,
+  fieldId,
+  readOnly,
+  size
+}) {
+  const value = toText(field.value);
+  const [query, setQuery] = useState("");
+  const options = withSyntheticValue(field.options ?? [], value);
+  if (readOnly) {
+    const selected = options.find((o) => o.value === value);
+    return /* @__PURE__ */ jsx("div", { id: fieldId, "data-jsf-input": true, children: /* @__PURE__ */ jsx(GridCard, { option: selected ?? { value, label: value }, checked: true, readOnly: true, size, onSelect: () => {
+    } }) });
+  }
+  const q = query.trim().toLowerCase();
+  const visible = q ? options.filter((o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q)) : options;
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-2", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "search",
+        "aria-label": `Filter ${field.label}`,
+        placeholder: "Filter…",
+        value: query,
+        onChange: (e) => setQuery(e.target.value),
+        className: inputClass(size)
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "radiogroup",
+        "aria-label": field.label,
+        id: fieldId,
+        "data-jsf-input": true,
+        className: "grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4",
+        children: [
+          visible.map((opt) => /* @__PURE__ */ jsx(
+            GridCard,
+            {
+              option: opt,
+              checked: opt.value === value,
+              readOnly: false,
+              size,
+              onSelect: () => field.onChange(opt.value)
+            },
+            opt.value
+          )),
+          visible.length === 0 && /* @__PURE__ */ jsx("div", { className: cn("col-span-full py-4 text-center text-muted-foreground", labelSizeClass[size]), children: "No matches" })
+        ]
+      }
+    )
+  ] });
+}
+function GridCard({
+  option,
+  checked,
+  readOnly,
+  size,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      role: "radio",
+      "aria-checked": checked,
+      disabled: readOnly,
+      onClick: onSelect,
+      className: cn(
+        "flex flex-col items-center justify-center gap-1.5 rounded-md border p-3 text-center transition-colors",
+        labelSizeClass[size],
+        checked ? "border-primary bg-primary/5 ring-1 ring-primary" : "border-input hover:border-primary/50 hover:bg-accent",
+        readOnly && "cursor-default opacity-80"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(LabelIcon, { icon: option.icon, className: "text-2xl text-foreground" }),
+        /* @__PURE__ */ jsx("span", { className: "break-words leading-tight", children: option.label })
+      ]
+    }
+  );
+}
+export {
+  GridControl
+};
+//# sourceMappingURL=json-schema-form-grid.js.map

package/dist/components/json-schema-form-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-form-grid.js","sources":["../../src/components/json-schema-form-grid.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { LabelIcon } from \"../data/Icon\";\nimport type { FieldControl, FieldOption } from \"./json-schema-form-types\";\nimport { inputClass, toText, withSyntheticValue } from \"./json-schema-form-utils\";\nimport { labelSizeClass, type FormSize } from \"./json-schema-form-size\";\n\n// GridControl renders an enum as a filterable grid of selectable icon cards\n// (instead of a dropdown). It is the presentation for enums carrying\n// x-enum-icons — e.g. the connection \"type\" picker. The current value is always\n// selectable even if it is outside the enum (a template token still shows).\n// Read-only: only the selected card renders, disabled.\nexport function GridControl({\n  field,\n  fieldId,\n  readOnly,\n  size,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  readOnly: boolean;\n  size: FormSize;\n}) {\n  const value = toText(field.value);\n  const [query, setQuery] = useState(\"\");\n  const options = withSyntheticValue(field.options ?? [], value);\n\n  if (readOnly) {\n    const selected = options.find((o) => o.value === value);\n    return (\n      <div id={fieldId} data-jsf-input>\n        <GridCard option={selected ?? { value, label: value }} checked readOnly size={size} onSelect={() => {}} />\n      </div>\n    );\n  }\n\n  const q = query.trim().toLowerCase();\n  const visible = q\n    ? options.filter((o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q))\n    : options;\n\n  return (\n    <div className=\"flex w-full flex-col gap-2\">\n      <input\n        type=\"search\"\n        aria-label={`Filter ${field.label}`}\n        placeholder=\"Filter…\"\n        value={query}\n        onChange={(e) => setQuery(e.target.value)}\n        className={inputClass(size)}\n      />\n      <div\n        role=\"radiogroup\"\n        aria-label={field.label}\n        id={fieldId}\n        data-jsf-input\n        className=\"grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4\"\n      >\n        {visible.map((opt) => (\n          <GridCard\n            key={opt.value}\n            option={opt}\n            checked={opt.value === value}\n            readOnly={false}\n            size={size}\n            onSelect={() => field.onChange(opt.value)}\n          />\n        ))}\n        {visible.length === 0 && (\n          <div className={cn(\"col-span-full py-4 text-center text-muted-foreground\", labelSizeClass[size])}>\n            No matches\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\n// GridCard is one selectable option in the grid: its icon over its label, with a\n// selected (primary ring) state. A native button with role=\"radio\" keeps it\n// keyboard-navigable and screen-reader-correct.\nfunction GridCard({\n  option,\n  checked,\n  readOnly,\n  size,\n  onSelect,\n}: {\n  option: FieldOption;\n  checked: boolean;\n  readOnly: boolean;\n  size: FormSize;\n  onSelect: () => void;\n}) {\n  return (\n    <button\n      type=\"button\"\n      role=\"radio\"\n      aria-checked={checked}\n      disabled={readOnly}\n      onClick={onSelect}\n      className={cn(\n        \"flex flex-col items-center justify-center gap-1.5 rounded-md border p-3 text-center transition-colors\",\n        labelSizeClass[size],\n        checked\n          ? \"border-primary bg-primary/5 ring-1 ring-primary\"\n          : \"border-input hover:border-primary/50 hover:bg-accent\",\n        readOnly && \"cursor-default opacity-80\",\n      )}\n    >\n      <LabelIcon icon={option.icon} className=\"text-2xl text-foreground\" />\n      <span className=\"break-words leading-tight\">{option.label}</span>\n    </button>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAYO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,QAAQ,OAAO,MAAM,KAAK;AAChC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,UAAU,mBAAmB,MAAM,WAAW,CAAA,GAAI,KAAK;AAE7D,MAAI,UAAU;AACZ,UAAM,WAAW,QAAQ,KAAK,CAAC,MAAM,EAAE,UAAU,KAAK;AACtD,WACE,oBAAC,SAAI,IAAI,SAAS,kBAAc,MAC9B,UAAA,oBAAC,YAAS,QAAQ,YAAY,EAAE,OAAO,OAAO,SAAS,SAAO,MAAC,UAAQ,MAAC,MAAY,UAAU,MAAM;AAAA,IAAC,GAAG,EAAA,CAC1G;AAAA,EAEJ;AAEA,QAAM,IAAI,MAAM,KAAA,EAAO,YAAA;AACvB,QAAM,UAAU,IACZ,QAAQ,OAAO,CAAC,MAAM,EAAE,MAAM,YAAA,EAAc,SAAS,CAAC,KAAK,EAAE,MAAM,YAAA,EAAc,SAAS,CAAC,CAAC,IAC5F;AAEJ,SACE,qBAAC,OAAA,EAAI,WAAU,8BACb,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAY,UAAU,MAAM,KAAK;AAAA,QACjC,aAAY;AAAA,QACZ,OAAO;AAAA,QACP,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,QACxC,WAAW,WAAW,IAAI;AAAA,MAAA;AAAA,IAAA;AAAA,IAE5B;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAY,MAAM;AAAA,QAClB,IAAI;AAAA,QACJ,kBAAc;AAAA,QACd,WAAU;AAAA,QAET,UAAA;AAAA,UAAA,QAAQ,IAAI,CAAC,QACZ;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,QAAQ;AAAA,cACR,SAAS,IAAI,UAAU;AAAA,cACvB,UAAU;AAAA,cACV;AAAA,cACA,UAAU,MAAM,MAAM,SAAS,IAAI,KAAK;AAAA,YAAA;AAAA,YALnC,IAAI;AAAA,UAAA,CAOZ;AAAA,UACA,QAAQ,WAAW,KAClB,oBAAC,OAAA,EAAI,WAAW,GAAG,wDAAwD,eAAe,IAAI,CAAC,GAAG,UAAA,aAAA,CAElG;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,GACF;AAEJ;AAKA,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL,gBAAc;AAAA,MACd,UAAU;AAAA,MACV,SAAS;AAAA,MACT,WAAW;AAAA,QACT;AAAA,QACA,eAAe,IAAI;AAAA,QACnB,UACI,oDACA;AAAA,QACJ,YAAY;AAAA,MAAA;AAAA,MAGd,UAAA;AAAA,QAAA,oBAAC,WAAA,EAAU,MAAM,OAAO,MAAM,WAAU,4BAA2B;AAAA,QACnE,oBAAC,QAAA,EAAK,WAAU,6BAA6B,iBAAO,MAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGhE;"}

package/dist/components/json-schema-form-refs.cjs

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const DEFS_PREFIX = "#/$defs/";
+function rehydrateRefs(schema) {
+  const defs = schema["$defs"];
+  if (!defs || Object.keys(defs).length === 0) return schema;
+  const cache = /* @__PURE__ */ new Map();
+  const resolving = /* @__PURE__ */ new Set();
+  const resolveDef = (key) => {
+    const cached = cache.get(key);
+    if (cached) return cached;
+    if (resolving.has(key)) return { type: "object", description: "↻ recursive schema" };
+    const body = defs[key];
+    if (body === void 0) return {};
+    resolving.add(key);
+    const resolved = walk(body);
+    resolving.delete(key);
+    cache.set(key, resolved);
+    return resolved;
+  };
+  const walk = (node) => {
+    if (Array.isArray(node)) {
+      let changed = false;
+      const out = node.map((v) => {
+        const w = walk(v);
+        if (w !== v) changed = true;
+        return w;
+      });
+      return changed ? out : node;
+    }
+    if (node && typeof node === "object") {
+      const obj = node;
+      const ref = obj["$ref"];
+      if (typeof ref === "string" && ref.startsWith(DEFS_PREFIX)) {
+        const resolved = resolveDef(ref.slice(DEFS_PREFIX.length));
+        const siblings = {};
+        let hasSiblings = false;
+        for (const [k, v] of Object.entries(obj)) {
+          if (k === "$ref") continue;
+          siblings[k] = walk(v);
+          hasSiblings = true;
+        }
+        return hasSiblings ? { ...resolved, ...siblings } : resolved;
+      }
+      let changed = false;
+      const out = {};
+      for (const [k, v] of Object.entries(obj)) {
+        const w = walk(v);
+        out[k] = w;
+        if (w !== v) changed = true;
+      }
+      return changed ? out : node;
+    }
+    return node;
+  };
+  const { $defs: _defs, ...rest } = schema;
+  return walk(rest);
+}
+exports.rehydrateRefs = rehydrateRefs;
+//# sourceMappingURL=json-schema-form-refs.cjs.map

package/dist/components/json-schema-form-refs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-form-refs.cjs","sources":["../../src/components/json-schema-form-refs.ts"],"sourcesContent":["import type { JsonSchemaObject, JsonSchemaProperty } from \"./json-schema-form-types\";\n\nconst DEFS_PREFIX = \"#/$defs/\";\n\n// rehydrateRefs resolves a BUNDLED schema — one whose components live under\n// `$defs` and are referenced by local `#/$defs/<key>` pointers (the shape the\n// server's refs=inline bundling emits) — into a self-contained tree the existing\n// renderer walks directly. It is the read-side counterpart of bundling: where\n// bundling collapses a component referenced N times to one `$defs` entry + N\n// local pointers, this expands those pointers back to the (shared, by-reference)\n// component, so the component's bytes still cost O(1) in memory, not O(N).\n//\n// Each unique `$defs` entry is resolved once and shared by reference; a cyclic\n// ref is broken with a non-recursive stub, so the result is always a finite DAG\n// the recursive renderer can traverse without a depth cap. A schema with no\n// `$defs` is returned unchanged (the common, already-self-contained case), so\n// this is a no-op for non-bundled schemas.\nexport function rehydrateRefs(schema: JsonSchemaObject): JsonSchemaObject {\n  const defs = (schema as Record<string, unknown>)[\"$defs\"] as\n    | Record<string, JsonSchemaProperty>\n    | undefined;\n  if (!defs || Object.keys(defs).length === 0) return schema;\n\n  const cache = new Map<string, JsonSchemaProperty>();\n  const resolving = new Set<string>();\n\n  const resolveDef = (key: string): JsonSchemaProperty => {\n    const cached = cache.get(key);\n    if (cached) return cached;\n    // A ref to a def already on the resolution stack is a cycle: break it with a\n    // permissive stub rather than building a self-referential object graph.\n    if (resolving.has(key)) return { type: \"object\", description: \"↻ recursive schema\" };\n    const body = defs[key];\n    if (body === undefined) return {}; // dangling local ref → permissive object\n    resolving.add(key);\n    const resolved = walk(body) as JsonSchemaProperty;\n    resolving.delete(key);\n    cache.set(key, resolved);\n    return resolved;\n  };\n\n  // walk rewrites local `#/$defs` refs and otherwise REUSES the input node by\n  // reference when nothing beneath it changed (structural sharing). This is what\n  // keeps rehydration cheap: a ref-free component — e.g. address-form.json, which\n  // is 5.6MB with no internal refs — is returned as-is, never deep-rebuilt, so\n  // only the (small) ref-bearing spine of the document is reallocated.\n  const walk = (node: unknown): unknown => {\n    if (Array.isArray(node)) {\n      let changed = false;\n      const out = node.map((v) => {\n        const w = walk(v);\n        if (w !== v) changed = true;\n        return w;\n      });\n      return changed ? out : node;\n    }\n    if (node && typeof node === \"object\") {\n      const obj = node as Record<string, unknown>;\n      const ref = obj[\"$ref\"];\n      if (typeof ref === \"string\" && ref.startsWith(DEFS_PREFIX)) {\n        const resolved = resolveDef(ref.slice(DEFS_PREFIX.length));\n        // A `$ref` alongside siblings: the siblings are local keywords that win\n        // over the referenced body (JSON Schema 2020-12 semantics), e.g.\n        // `allOf:[{$ref, title}]`.\n        const siblings: Record<string, unknown> = {};\n        let hasSiblings = false;\n        for (const [k, v] of Object.entries(obj)) {\n          if (k === \"$ref\") continue;\n          siblings[k] = walk(v);\n          hasSiblings = true;\n        }\n        return hasSiblings ? { ...resolved, ...siblings } : resolved;\n      }\n      let changed = false;\n      const out: Record<string, unknown> = {};\n      for (const [k, v] of Object.entries(obj)) {\n        const w = walk(v);\n        out[k] = w;\n        if (w !== v) changed = true;\n      }\n      return changed ? out : node;\n    }\n    return node;\n  };\n\n  // Drop `$defs` from the rendered root — every reference to it is now resolved\n  // inline (by shared reference), so it is dead weight the renderer would ignore.\n  const { $defs: _defs, ...rest } = schema as Record<string, unknown>;\n  void _defs;\n  return walk(rest) as JsonSchemaObject;\n}\n"],"names":[],"mappings":";;AAEA,MAAM,cAAc;AAeb,SAAS,cAAc,QAA4C;AACxE,QAAM,OAAQ,OAAmC,OAAO;AAGxD,MAAI,CAAC,QAAQ,OAAO,KAAK,IAAI,EAAE,WAAW,EAAG,QAAO;AAEpD,QAAM,4BAAY,IAAA;AAClB,QAAM,gCAAgB,IAAA;AAEtB,QAAM,aAAa,CAAC,QAAoC;AACtD,UAAM,SAAS,MAAM,IAAI,GAAG;AAC5B,QAAI,OAAQ,QAAO;AAGnB,QAAI,UAAU,IAAI,GAAG,UAAU,EAAE,MAAM,UAAU,aAAa,qBAAA;AAC9D,UAAM,OAAO,KAAK,GAAG;AACrB,QAAI,SAAS,OAAW,QAAO,CAAA;AAC/B,cAAU,IAAI,GAAG;AACjB,UAAM,WAAW,KAAK,IAAI;AAC1B,cAAU,OAAO,GAAG;AACpB,UAAM,IAAI,KAAK,QAAQ;AACvB,WAAO;AAAA,EACT;AAOA,QAAM,OAAO,CAAC,SAA2B;AACvC,QAAI,MAAM,QAAQ,IAAI,GAAG;AACvB,UAAI,UAAU;AACd,YAAM,MAAM,KAAK,IAAI,CAAC,MAAM;AAC1B,cAAM,IAAI,KAAK,CAAC;AAChB,YAAI,MAAM,EAAG,WAAU;AACvB,eAAO;AAAA,MACT,CAAC;AACD,aAAO,UAAU,MAAM;AAAA,IACzB;AACA,QAAI,QAAQ,OAAO,SAAS,UAAU;AACpC,YAAM,MAAM;AACZ,YAAM,MAAM,IAAI,MAAM;AACtB,UAAI,OAAO,QAAQ,YAAY,IAAI,WAAW,WAAW,GAAG;AAC1D,cAAM,WAAW,WAAW,IAAI,MAAM,YAAY,MAAM,CAAC;AAIzD,cAAM,WAAoC,CAAA;AAC1C,YAAI,cAAc;AAClB,mBAAW,CAAC,GAAG,CAAC,KAAK,OAAO,QAAQ,GAAG,GAAG;AACxC,cAAI,MAAM,OAAQ;AAClB,mBAAS,CAAC,IAAI,KAAK,CAAC;AACpB,wBAAc;AAAA,QAChB;AACA,eAAO,cAAc,EAAE,GAAG,UAAU,GAAG,aAAa;AAAA,MACtD;AACA,UAAI,UAAU;AACd,YAAM,MAA+B,CAAA;AACrC,iBAAW,CAAC,GAAG,CAAC,KAAK,OAAO,QAAQ,GAAG,GAAG;AACxC,cAAM,IAAI,KAAK,CAAC;AAChB,YAAI,CAAC,IAAI;AACT,YAAI,MAAM,EAAG,WAAU;AAAA,MACzB;AACA,aAAO,UAAU,MAAM;AAAA,IACzB;AACA,WAAO;AAAA,EACT;AAIA,QAAM,EAAE,OAAO,OAAO,GAAG,SAAS;AAElC,SAAO,KAAK,IAAI;AAClB;;"}

package/dist/components/json-schema-form-refs.d.ts

@@ -0,0 +1,3 @@
+import { JsonSchemaObject } from './json-schema-form-types';
+export declare function rehydrateRefs(schema: JsonSchemaObject): JsonSchemaObject;
+//# sourceMappingURL=json-schema-form-refs.d.ts.map

package/dist/components/json-schema-form-refs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-form-refs.d.ts","sourceRoot":"","sources":["../../src/components/json-schema-form-refs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAsB,MAAM,0BAA0B,CAAC;AAiBrF,wBAAgB,aAAa,CAAC,MAAM,EAAE,gBAAgB,GAAG,gBAAgB,CAyExE"}

package/dist/components/json-schema-form-refs.js

@@ -0,0 +1,60 @@
+const DEFS_PREFIX = "#/$defs/";
+function rehydrateRefs(schema) {
+  const defs = schema["$defs"];
+  if (!defs || Object.keys(defs).length === 0) return schema;
+  const cache = /* @__PURE__ */ new Map();
+  const resolving = /* @__PURE__ */ new Set();
+  const resolveDef = (key) => {
+    const cached = cache.get(key);
+    if (cached) return cached;
+    if (resolving.has(key)) return { type: "object", description: "↻ recursive schema" };
+    const body = defs[key];
+    if (body === void 0) return {};
+    resolving.add(key);
+    const resolved = walk(body);
+    resolving.delete(key);
+    cache.set(key, resolved);
+    return resolved;
+  };
+  const walk = (node) => {
+    if (Array.isArray(node)) {
+      let changed = false;
+      const out = node.map((v) => {
+        const w = walk(v);
+        if (w !== v) changed = true;
+        return w;
+      });
+      return changed ? out : node;
+    }
+    if (node && typeof node === "object") {
+      const obj = node;
+      const ref = obj["$ref"];
+      if (typeof ref === "string" && ref.startsWith(DEFS_PREFIX)) {
+        const resolved = resolveDef(ref.slice(DEFS_PREFIX.length));
+        const siblings = {};
+        let hasSiblings = false;
+        for (const [k, v] of Object.entries(obj)) {
+          if (k === "$ref") continue;
+          siblings[k] = walk(v);
+          hasSiblings = true;
+        }
+        return hasSiblings ? { ...resolved, ...siblings } : resolved;
+      }
+      let changed = false;
+      const out = {};
+      for (const [k, v] of Object.entries(obj)) {
+        const w = walk(v);
+        out[k] = w;
+        if (w !== v) changed = true;
+      }
+      return changed ? out : node;
+    }
+    return node;
+  };
+  const { $defs: _defs, ...rest } = schema;
+  return walk(rest);
+}
+export {
+  rehydrateRefs
+};
+//# sourceMappingURL=json-schema-form-refs.js.map

package/dist/components/json-schema-form-refs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-form-refs.js","sources":["../../src/components/json-schema-form-refs.ts"],"sourcesContent":["import type { JsonSchemaObject, JsonSchemaProperty } from \"./json-schema-form-types\";\n\nconst DEFS_PREFIX = \"#/$defs/\";\n\n// rehydrateRefs resolves a BUNDLED schema — one whose components live under\n// `$defs` and are referenced by local `#/$defs/<key>` pointers (the shape the\n// server's refs=inline bundling emits) — into a self-contained tree the existing\n// renderer walks directly. It is the read-side counterpart of bundling: where\n// bundling collapses a component referenced N times to one `$defs` entry + N\n// local pointers, this expands those pointers back to the (shared, by-reference)\n// component, so the component's bytes still cost O(1) in memory, not O(N).\n//\n// Each unique `$defs` entry is resolved once and shared by reference; a cyclic\n// ref is broken with a non-recursive stub, so the result is always a finite DAG\n// the recursive renderer can traverse without a depth cap. A schema with no\n// `$defs` is returned unchanged (the common, already-self-contained case), so\n// this is a no-op for non-bundled schemas.\nexport function rehydrateRefs(schema: JsonSchemaObject): JsonSchemaObject {\n  const defs = (schema as Record<string, unknown>)[\"$defs\"] as\n    | Record<string, JsonSchemaProperty>\n    | undefined;\n  if (!defs || Object.keys(defs).length === 0) return schema;\n\n  const cache = new Map<string, JsonSchemaProperty>();\n  const resolving = new Set<string>();\n\n  const resolveDef = (key: string): JsonSchemaProperty => {\n    const cached = cache.get(key);\n    if (cached) return cached;\n    // A ref to a def already on the resolution stack is a cycle: break it with a\n    // permissive stub rather than building a self-referential object graph.\n    if (resolving.has(key)) return { type: \"object\", description: \"↻ recursive schema\" };\n    const body = defs[key];\n    if (body === undefined) return {}; // dangling local ref → permissive object\n    resolving.add(key);\n    const resolved = walk(body) as JsonSchemaProperty;\n    resolving.delete(key);\n    cache.set(key, resolved);\n    return resolved;\n  };\n\n  // walk rewrites local `#/$defs` refs and otherwise REUSES the input node by\n  // reference when nothing beneath it changed (structural sharing). This is what\n  // keeps rehydration cheap: a ref-free component — e.g. address-form.json, which\n  // is 5.6MB with no internal refs — is returned as-is, never deep-rebuilt, so\n  // only the (small) ref-bearing spine of the document is reallocated.\n  const walk = (node: unknown): unknown => {\n    if (Array.isArray(node)) {\n      let changed = false;\n      const out = node.map((v) => {\n        const w = walk(v);\n        if (w !== v) changed = true;\n        return w;\n      });\n      return changed ? out : node;\n    }\n    if (node && typeof node === \"object\") {\n      const obj = node as Record<string, unknown>;\n      const ref = obj[\"$ref\"];\n      if (typeof ref === \"string\" && ref.startsWith(DEFS_PREFIX)) {\n        const resolved = resolveDef(ref.slice(DEFS_PREFIX.length));\n        // A `$ref` alongside siblings: the siblings are local keywords that win\n        // over the referenced body (JSON Schema 2020-12 semantics), e.g.\n        // `allOf:[{$ref, title}]`.\n        const siblings: Record<string, unknown> = {};\n        let hasSiblings = false;\n        for (const [k, v] of Object.entries(obj)) {\n          if (k === \"$ref\") continue;\n          siblings[k] = walk(v);\n          hasSiblings = true;\n        }\n        return hasSiblings ? { ...resolved, ...siblings } : resolved;\n      }\n      let changed = false;\n      const out: Record<string, unknown> = {};\n      for (const [k, v] of Object.entries(obj)) {\n        const w = walk(v);\n        out[k] = w;\n        if (w !== v) changed = true;\n      }\n      return changed ? out : node;\n    }\n    return node;\n  };\n\n  // Drop `$defs` from the rendered root — every reference to it is now resolved\n  // inline (by shared reference), so it is dead weight the renderer would ignore.\n  const { $defs: _defs, ...rest } = schema as Record<string, unknown>;\n  void _defs;\n  return walk(rest) as JsonSchemaObject;\n}\n"],"names":[],"mappings":"AAEA,MAAM,cAAc;AAeb,SAAS,cAAc,QAA4C;AACxE,QAAM,OAAQ,OAAmC,OAAO;AAGxD,MAAI,CAAC,QAAQ,OAAO,KAAK,IAAI,EAAE,WAAW,EAAG,QAAO;AAEpD,QAAM,4BAAY,IAAA;AAClB,QAAM,gCAAgB,IAAA;AAEtB,QAAM,aAAa,CAAC,QAAoC;AACtD,UAAM,SAAS,MAAM,IAAI,GAAG;AAC5B,QAAI,OAAQ,QAAO;AAGnB,QAAI,UAAU,IAAI,GAAG,UAAU,EAAE,MAAM,UAAU,aAAa,qBAAA;AAC9D,UAAM,OAAO,KAAK,GAAG;AACrB,QAAI,SAAS,OAAW,QAAO,CAAA;AAC/B,cAAU,IAAI,GAAG;AACjB,UAAM,WAAW,KAAK,IAAI;AAC1B,cAAU,OAAO,GAAG;AACpB,UAAM,IAAI,KAAK,QAAQ;AACvB,WAAO;AAAA,EACT;AAOA,QAAM,OAAO,CAAC,SAA2B;AACvC,QAAI,MAAM,QAAQ,IAAI,GAAG;AACvB,UAAI,UAAU;AACd,YAAM,MAAM,KAAK,IAAI,CAAC,MAAM;AAC1B,cAAM,IAAI,KAAK,CAAC;AAChB,YAAI,MAAM,EAAG,WAAU;AACvB,eAAO;AAAA,MACT,CAAC;AACD,aAAO,UAAU,MAAM;AAAA,IACzB;AACA,QAAI,QAAQ,OAAO,SAAS,UAAU;AACpC,YAAM,MAAM;AACZ,YAAM,MAAM,IAAI,MAAM;AACtB,UAAI,OAAO,QAAQ,YAAY,IAAI,WAAW,WAAW,GAAG;AAC1D,cAAM,WAAW,WAAW,IAAI,MAAM,YAAY,MAAM,CAAC;AAIzD,cAAM,WAAoC,CAAA;AAC1C,YAAI,cAAc;AAClB,mBAAW,CAAC,GAAG,CAAC,KAAK,OAAO,QAAQ,GAAG,GAAG;AACxC,cAAI,MAAM,OAAQ;AAClB,mBAAS,CAAC,IAAI,KAAK,CAAC;AACpB,wBAAc;AAAA,QAChB;AACA,eAAO,cAAc,EAAE,GAAG,UAAU,GAAG,aAAa;AAAA,MACtD;AACA,UAAI,UAAU;AACd,YAAM,MAA+B,CAAA;AACrC,iBAAW,CAAC,GAAG,CAAC,KAAK,OAAO,QAAQ,GAAG,GAAG;AACxC,cAAM,IAAI,KAAK,CAAC;AAChB,YAAI,CAAC,IAAI;AACT,YAAI,MAAM,EAAG,WAAU;AAAA,MACzB;AACA,aAAO,UAAU,MAAM;AAAA,IACzB;AACA,WAAO;AAAA,EACT;AAIA,QAAM,EAAE,OAAO,OAAO,GAAG,SAAS;AAElC,SAAO,KAAK,IAAI;AAClB;"}

package/dist/components/json-schema-form-render.cjs

@@ -12,20 +12,37 @@ const jsonSchemaFormUtils = require("./json-schema-form-utils.cjs");
 const jsonSchemaFormSize = require("./json-schema-form-size.cjs");
 function renderValueControl(field, ctx) {
   const fieldId = jsonSchemaFormUtils.fieldInputId(field.key, ctx.idPrefix);
-  if (field.readOnly && field.kind !== "array" && field.kind !== "object" && field.kind !== "string-map") {
+  if (field.readOnly && !ownsReadOnlyRendering(field.kind)) {
     return /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormFields.ReadOnlyValue, { field, fieldId, size: ctx.size });
   }
-  const readOnly = ctx.readOnly;
+  const readOnly = ctx.readOnly || field.readOnly === true;
   const size = ctx.size;
   switch (field.kind) {
     case "enum":
       return /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormFields.EnumControl, { field, fieldId, readOnly, size });
+    case "lookup":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        jsonSchemaFormFields.LookupControl,
+        {
+          field,
+          fieldId,
+          readOnly,
+          size,
+          ...ctx.rootValue ? { rootValue: ctx.rootValue } : {}
+        }
+      );
     case "boolean":
       return /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormFields.BooleanControl, { field, fieldId, readOnly, size });
     case "number":
       return /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormFields.NumberControl, { field, fieldId, readOnly, size });
     case "date":
       return /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormFields.DateControl, { field, fieldId, readOnly, size });
+    case "textarea":
+      return /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormFields.TextareaControl, { field, fieldId, readOnly, size });
+    case "display":
+      return /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormFields.DisplayControl, { field, size });
+    case "link":
+      return /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormFields.LinkControl, { field, fieldId, size });
     case "array":
       return /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormArray.ArrayControl, { field, fieldId, ctx });
     case "object":
@@ -36,12 +53,20 @@ function renderValueControl(field, ctx) {
       return /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormFields.StringControl, { field, fieldId, readOnly, size });
   }
 }
+function ownsReadOnlyRendering(kind) {
+  return kind === "array" || kind === "object" || kind === "string-map" || kind === "textarea" || kind === "display" || kind === "link";
+}
 function buildField(args, ctx) {
   const base = jsonSchemaFormResolve.resolveControl(args);
   let field = base;
   for (const ext of ctx.pre) {
     if (!field) break;
-    field = ext(field, { key: args.key, prop: args.prop, value: args.value });
+    field = ext(field, {
+      key: args.key,
+      prop: args.prop,
+      value: args.value,
+      ...ctx.rootValue ? { rootValue: ctx.rootValue } : {}
+    });
   }
   if (!field) return null;
   if (ctx.hideReadOnlyFields && field.readOnly) return null;
@@ -50,8 +75,9 @@ function buildField(args, ctx) {
   const overrideMode = field.layout === "inline" ? "inline" : field.layout === "stack" ? "stacked" : void 0;
   const valueCtx = overrideMode ? { ...ctx, layout: { ...ctx.layout, mode: overrideMode } } : ctx;
   let value = renderValueControl(field, valueCtx);
+  const postCtx = ctx.rootValue ? { rootValue: ctx.rootValue } : {};
   for (const ext of ctx.post) {
-    const next = ext(field, { label, value });
+    const next = ext(field, { label, value }, postCtx);
     label = next.label;
     value = next.value;
   }
@@ -80,6 +106,9 @@ function renderFieldRow(args, ctx, opts) {
       }
     );
   }
+  if (field.kind === "display") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-full", children: built.value });
+  }
   const label = (opts == null ? void 0 : opts.labelOverride) ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: utils.cn("flex items-center gap-2 font-medium", jsonSchemaFormSize.labelSizeClass[ctx.size]), children: [
     /* @__PURE__ */ jsxRuntime.jsx(Icon.LabelIcon, { icon: field.labelIcon, className: "text-[15px] text-muted-foreground" }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { children: opts.labelOverride }),
@@ -102,7 +131,7 @@ function renderFieldRow(args, ctx, opts) {
 function renderObjectFields(schema, value, onChange, ctx, opts) {
   const { properties, required } = jsonSchemaFormResolve.effectiveProperties(schema, value);
   const hidden = new Set((opts == null ? void 0 : opts.hiddenKeys) ?? []);
-  const ordered = jsonSchemaFormUtils.orderByXOrder(Object.entries(properties), schema["x-order"]);
+  const ordered = jsonSchemaFormUtils.orderByClickyOrder(jsonSchemaFormUtils.orderByXOrder(Object.entries(properties), schema["x-order"]));
   const entries = ctx.sortMode === "required-first" ? jsonSchemaFormUtils.orderRequiredFirst(ordered, required) : ctx.sortMode === "priority" ? jsonSchemaFormUtils.orderByPriority(ordered, required, value) : ordered;
   return entries.flatMap(([key, prop]) => {
     if (hidden.has(key)) return [];