@flanksource/clicky-ui 0.2.13 → 0.2.15

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

@@ -1 +1 @@
-{"version":3,"file":"json-schema-form-array.js","sources":["../../src/components/json-schema-form-array.tsx"],"sourcesContent":["import { type KeyboardEvent, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiAdd, UiChevronDown, UiChevronUp, UiClose, UiTrash } from \"../icons\";\nimport { Button } from \"./button\";\nimport { defaultPlaceholder } from \"./json-schema-form-fields\";\nimport { controlMinHeightClass, fieldInnerGapClass, labelSizeClass, type FormSize } from \"./json-schema-form-size\";\nimport { isScalarStringItems } from \"./json-schema-form-resolve\";\nimport {\n  moveItem,\n  removeIndex,\n  renderFieldNodes,\n  renderFieldRow,\n  seedFromSchema,\n  setIndex,\n  type RenderContext,\n} from \"./json-schema-form-render\";\nimport type { FieldControl, JsonSchemaProperty } from \"./json-schema-form-types\";\n\n// ArrayControl is a hybrid: plain string-item arrays keep the compact tag UI;\n// anything richer (objects, numbers, enums, nested arrays) renders one recursive\n// control per item with add / remove / reorder.\nexport function ArrayControl({\n  field,\n  fieldId,\n  ctx,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  ctx: RenderContext;\n}) {\n  // A read-only array marks its whole subtree non-editable: no add/remove/reorder\n  // and item inputs disabled (a child the schema marks readOnly still renders as\n  // a value span).\n  const readOnly = ctx.readOnly || field.readOnly === true;\n  if (isScalarStringItems(field.itemSchema)) {\n    return <TagArray field={field} fieldId={fieldId} readOnly={readOnly} size={ctx.size} />;\n  }\n  // `x-layout: table` renders object-item arrays as compact rows with one column\n  // per item property — a denser alternative to the per-item stacked sub-form.\n  if (field.layout === \"table\" && hasObjectItemProperties(field.itemSchema)) {\n    return <TableArray field={field} ctx={ctx} readOnly={readOnly} />;\n  }\n  const items = Array.isArray(field.value) ? field.value : [];\n  const itemSchema = field.itemSchema ?? { type: \"string\" };\n  const childCtx: RenderContext = { ...ctx, readOnly, depth: ctx.depth + 1 };\n\n  return (\n    <div className={cn(\"flex flex-col rounded-md border border-input p-2\", fieldInnerGapClass[ctx.size])}>\n      {items.map((item, i) => (\n        <div key={i} className=\"grid grid-cols-[1fr_auto] items-start gap-2\">\n          <div className=\"min-w-0\">\n            {renderFieldRow(\n              {\n                key: `${field.key}[${i}]`,\n                prop: itemSchema,\n                required: false,\n                value: item,\n                onChange: (next) => field.onChange(setIndex(items, i, next)),\n              },\n              childCtx,\n              { labelOverride: `Item ${i + 1}` },\n            )}\n          </div>\n          {!readOnly && (\n            <ItemControls\n              onUp={i > 0 ? () => field.onChange(moveItem(items, i, i - 1)) : undefined}\n              onDown={i < items.length - 1 ? () => field.onChange(moveItem(items, i, i + 1)) : undefined}\n              onRemove={() => field.onChange(removeIndex(items, i))}\n              index={i}\n            />\n          )}\n        </div>\n      ))}\n      {!readOnly && (\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          className=\"gap-1.5\"\n          onClick={() => field.onChange([...items, seedFromSchema(itemSchema)])}\n        >\n          <Icon icon={UiAdd} className=\"text-sm\" />\n          Add item\n        </Button>\n      )}\n    </div>\n  );\n}\n\n// hasObjectItemProperties reports whether the array's items are objects with a\n// fixed `properties` set — the precondition for a column-per-property table.\nfunction hasObjectItemProperties(items: JsonSchemaProperty | undefined): boolean {\n  return !!items && !!items.properties && Object.keys(items.properties).length > 0;\n}\n\n// TableArray renders an object-item array as a table: a header row of the item's\n// property names and one row per item with value-only controls, plus per-row\n// remove and an add button. Driven by `x-layout: table`.\nfunction TableArray({\n  field,\n  ctx,\n  readOnly,\n}: {\n  field: FieldControl;\n  ctx: RenderContext;\n  readOnly: boolean;\n}) {\n  const items = Array.isArray(field.value) ? field.value : [];\n  const itemSchema = field.itemSchema ?? { type: \"object\" };\n  const columns = Object.entries(itemSchema.properties ?? {});\n  const childCtx: RenderContext = { ...ctx, readOnly, depth: ctx.depth + 1 };\n\n  function cell(item: unknown, rowIndex: number, col: string, prop: JsonSchemaProperty): ReactNode {\n    const obj = isPlainObject(item) ? item : {};\n    const nodes = renderFieldNodes(\n      {\n        key: `${field.key}[${rowIndex}].${col}`,\n        prop,\n        required: false,\n        value: obj[col],\n        onChange: (next) => field.onChange(setIndex(items, rowIndex, { ...obj, [col]: next })),\n      },\n      childCtx,\n    );\n    return nodes?.value ?? null;\n  }\n\n  return (\n    <div className=\"overflow-x-auto rounded-md border border-input\">\n      <table className=\"w-full text-sm\">\n        <thead>\n          <tr className=\"border-b border-input bg-muted/40 text-left\">\n            {columns.map(([col, prop]) => (\n              <th key={col} className=\"px-2 py-1 text-xs font-medium text-muted-foreground\">\n                {typeof prop.title === \"string\" && prop.title ? prop.title : col}\n              </th>\n            ))}\n            {!readOnly && <th className=\"w-10 px-2 py-1\" />}\n          </tr>\n        </thead>\n        <tbody>\n          {items.map((item, i) => (\n            <tr key={i} className=\"border-b border-input last:border-b-0 align-top\">\n              {columns.map(([col, prop]) => (\n                <td key={col} className=\"px-2 py-1\">\n                  {cell(item, i, col, prop)}\n                </td>\n              ))}\n              {!readOnly && (\n                <td className=\"px-2 py-1\">\n                  <button\n                    type=\"button\"\n                    aria-label={`Remove item ${i + 1}`}\n                    className=\"inline-flex h-8 w-8 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground\"\n                    onClick={() => field.onChange(removeIndex(items, i))}\n                  >\n                    <Icon icon={UiTrash} className=\"text-sm\" />\n                  </button>\n                </td>\n              )}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n      {!readOnly && (\n        <div className=\"p-2\">\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"gap-1.5\"\n            onClick={() => field.onChange([...items, seedFromSchema(itemSchema)])}\n          >\n            <Icon icon={UiAdd} className=\"text-sm\" />\n            Add item\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction isPlainObject(value: unknown): value is Record<string, unknown> {\n  return typeof value === \"object\" && value !== null && !Array.isArray(value);\n}\n\nfunction ItemControls({\n  onUp,\n  onDown,\n  onRemove,\n  index,\n}: {\n  onUp: (() => void) | undefined;\n  onDown: (() => void) | undefined;\n  onRemove: () => void;\n  index: number;\n}) {\n  return (\n    <div className=\"flex items-center gap-1\">\n      <button\n        type=\"button\"\n        aria-label={`Move item ${index + 1} up`}\n        disabled={!onUp}\n        className=\"inline-flex h-8 w-8 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-30\"\n        onClick={onUp}\n      >\n        <Icon icon={UiChevronUp} className=\"text-sm\" />\n      </button>\n      <button\n        type=\"button\"\n        aria-label={`Move item ${index + 1} down`}\n        disabled={!onDown}\n        className=\"inline-flex h-8 w-8 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-30\"\n        onClick={onDown}\n      >\n        <Icon icon={UiChevronDown} className=\"text-sm\" />\n      </button>\n      <button\n        type=\"button\"\n        aria-label={`Remove item ${index + 1}`}\n        className=\"inline-flex h-8 w-8 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground\"\n        onClick={onRemove}\n      >\n        <Icon icon={UiTrash} className=\"text-sm\" />\n      </button>\n    </div>\n  );\n}\n\n// TagArray is the compact tag editor for plain string-item arrays.\nfunction TagArray({\n  field,\n  fieldId,\n  readOnly,\n  size,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  readOnly: boolean;\n  size: FormSize;\n}) {\n  const tags = toStringArray(field.value);\n\n  function commit(raw: string, input: HTMLInputElement) {\n    const next = raw\n      .split(\",\")\n      .map((p) => p.trim())\n      .filter(Boolean);\n    if (next.length === 0) return;\n    field.onChange([...tags, ...next]);\n    input.value = \"\";\n  }\n\n  function handleKeyDown(e: KeyboardEvent<HTMLInputElement>) {\n    const input = e.currentTarget;\n    if (e.key === \"Enter\" || e.key === \",\") {\n      e.preventDefault();\n      commit(input.value, input);\n      return;\n    }\n    if (e.key === \"Backspace\" && input.value === \"\" && tags.length > 0) {\n      field.onChange(tags.slice(0, -1));\n    }\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent px-2 py-1 shadow-sm\",\n        controlMinHeightClass[size],\n      )}\n    >\n      {tags.map((tag, i) => (\n        <span\n          key={`${tag}-${i}`}\n          className=\"inline-flex h-6 max-w-full items-center gap-1 rounded-md bg-muted px-2 text-xs\"\n        >\n          <span className=\"truncate\">{tag}</span>\n          {!readOnly && (\n            <button\n              type=\"button\"\n              className=\"text-muted-foreground hover:text-foreground\"\n              aria-label={`Remove ${tag}`}\n              onClick={() => field.onChange(tags.filter((_, idx) => idx !== i))}\n            >\n              <Icon icon={UiClose} />\n            </button>\n          )}\n        </span>\n      ))}\n      {!readOnly && (\n        <input\n          id={fieldId}\n          data-jsf-input\n          className={cn(\"min-w-32 flex-1 bg-transparent px-1 py-1 outline-none\", labelSizeClass[size])}\n          placeholder={tags.length === 0 ? defaultPlaceholder(field.schema) : \"\"}\n          onKeyDown={handleKeyDown}\n          onBlur={(e) => commit(e.currentTarget.value, e.currentTarget)}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction toStringArray(value: unknown): string[] {\n  if (Array.isArray(value)) return value.map(String);\n  return [];\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"json-schema-form-array.js","sources":["../../src/components/json-schema-form-array.tsx"],"sourcesContent":["import { type KeyboardEvent, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiAdd, UiChevronDown, UiChevronUp, UiClose, UiTrash } from \"../icons\";\nimport { Button } from \"./button\";\nimport { controlMinHeightClass, fieldInnerGapClass, labelSizeClass, type FormSize } from \"./json-schema-form-size\";\nimport { isScalarStringItems } from \"./json-schema-form-resolve\";\nimport {\n  defaultPlaceholder,\n  isPlainObject,\n  moveItem,\n  removeIndex,\n  seedFromSchema,\n  setIndex,\n} from \"./json-schema-form-utils\";\nimport type { FieldControl, JsonSchemaProperty, RenderContext } from \"./json-schema-form-types\";\n\n// ArrayControl is a hybrid: plain string-item arrays keep the compact tag UI;\n// anything richer (objects, numbers, enums, nested arrays) renders one recursive\n// control per item with add / remove / reorder. Recursion goes through\n// ctx.render so this module never imports the renderer (no import cycle).\nexport function ArrayControl({\n  field,\n  fieldId,\n  ctx,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  ctx: RenderContext;\n}) {\n  // A read-only array marks its whole subtree non-editable: no add/remove/reorder\n  // and item inputs disabled (a child the schema marks readOnly still renders as\n  // a value span).\n  const readOnly = ctx.readOnly || field.readOnly === true;\n  if (isScalarStringItems(field.itemSchema)) {\n    return <TagArray field={field} fieldId={fieldId} readOnly={readOnly} size={ctx.size} />;\n  }\n  // `x-layout: table` renders object-item arrays as compact rows with one column\n  // per item property — a denser alternative to the per-item stacked sub-form.\n  if (field.layout === \"table\" && hasObjectItemProperties(field.itemSchema)) {\n    return <TableArray field={field} ctx={ctx} readOnly={readOnly} />;\n  }\n  const items = Array.isArray(field.value) ? field.value : [];\n  const itemSchema = field.itemSchema ?? { type: \"string\" };\n  const childCtx: RenderContext = { ...ctx, readOnly, depth: ctx.depth + 1 };\n\n  return (\n    <div className={cn(\"flex flex-col rounded-md border border-input p-2\", fieldInnerGapClass[ctx.size])}>\n      {items.map((item, i) => (\n        <div key={i} className=\"grid grid-cols-[1fr_auto] items-start gap-2\">\n          <div className=\"min-w-0\">\n            {ctx.render.renderFieldRow(\n              {\n                key: `${field.key}[${i}]`,\n                prop: itemSchema,\n                required: false,\n                value: item,\n                onChange: (next) => field.onChange(setIndex(items, i, next)),\n              },\n              childCtx,\n              { labelOverride: `Item ${i + 1}` },\n            )}\n          </div>\n          {!readOnly && (\n            <ItemControls\n              onUp={i > 0 ? () => field.onChange(moveItem(items, i, i - 1)) : undefined}\n              onDown={i < items.length - 1 ? () => field.onChange(moveItem(items, i, i + 1)) : undefined}\n              onRemove={() => field.onChange(removeIndex(items, i))}\n              index={i}\n            />\n          )}\n        </div>\n      ))}\n      {!readOnly && (\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          className=\"gap-1.5\"\n          onClick={() => field.onChange([...items, seedFromSchema(itemSchema)])}\n        >\n          <Icon icon={UiAdd} className=\"text-sm\" />\n          Add item\n        </Button>\n      )}\n    </div>\n  );\n}\n\n// hasObjectItemProperties reports whether the array's items are objects with a\n// fixed `properties` set — the precondition for a column-per-property table.\nfunction hasObjectItemProperties(items: JsonSchemaProperty | undefined): boolean {\n  return !!items && !!items.properties && Object.keys(items.properties).length > 0;\n}\n\n// TableArray renders an object-item array as a table: a header row of the item's\n// property names and one row per item with value-only controls, plus per-row\n// remove and an add button. Driven by `x-layout: table`.\nfunction TableArray({\n  field,\n  ctx,\n  readOnly,\n}: {\n  field: FieldControl;\n  ctx: RenderContext;\n  readOnly: boolean;\n}) {\n  const items = Array.isArray(field.value) ? field.value : [];\n  const itemSchema = field.itemSchema ?? { type: \"object\" };\n  const columns = Object.entries(itemSchema.properties ?? {});\n  const childCtx: RenderContext = { ...ctx, readOnly, depth: ctx.depth + 1 };\n\n  function cell(item: unknown, rowIndex: number, col: string, prop: JsonSchemaProperty): ReactNode {\n    const obj = isPlainObject(item) ? item : {};\n    const nodes = ctx.render.renderFieldNodes(\n      {\n        key: `${field.key}[${rowIndex}].${col}`,\n        prop,\n        required: false,\n        value: obj[col],\n        onChange: (next) => field.onChange(setIndex(items, rowIndex, { ...obj, [col]: next })),\n      },\n      childCtx,\n    );\n    return nodes?.value ?? null;\n  }\n\n  return (\n    <div className=\"overflow-x-auto rounded-md border border-input\">\n      <table className=\"w-full text-sm\">\n        <thead>\n          <tr className=\"border-b border-input bg-muted/40 text-left\">\n            {columns.map(([col, prop]) => (\n              <th key={col} className=\"px-2 py-1 text-xs font-medium text-muted-foreground\">\n                {typeof prop.title === \"string\" && prop.title ? prop.title : col}\n              </th>\n            ))}\n            {!readOnly && <th className=\"w-10 px-2 py-1\" />}\n          </tr>\n        </thead>\n        <tbody>\n          {items.map((item, i) => (\n            <tr key={i} className=\"border-b border-input last:border-b-0 align-top\">\n              {columns.map(([col, prop]) => (\n                <td key={col} className=\"px-2 py-1\">\n                  {cell(item, i, col, prop)}\n                </td>\n              ))}\n              {!readOnly && (\n                <td className=\"px-2 py-1\">\n                  <button\n                    type=\"button\"\n                    aria-label={`Remove item ${i + 1}`}\n                    className=\"inline-flex h-8 w-8 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground\"\n                    onClick={() => field.onChange(removeIndex(items, i))}\n                  >\n                    <Icon icon={UiTrash} className=\"text-sm\" />\n                  </button>\n                </td>\n              )}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n      {!readOnly && (\n        <div className=\"p-2\">\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"gap-1.5\"\n            onClick={() => field.onChange([...items, seedFromSchema(itemSchema)])}\n          >\n            <Icon icon={UiAdd} className=\"text-sm\" />\n            Add item\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction ItemControls({\n  onUp,\n  onDown,\n  onRemove,\n  index,\n}: {\n  onUp: (() => void) | undefined;\n  onDown: (() => void) | undefined;\n  onRemove: () => void;\n  index: number;\n}) {\n  return (\n    <div className=\"flex items-center gap-1\">\n      <button\n        type=\"button\"\n        aria-label={`Move item ${index + 1} up`}\n        disabled={!onUp}\n        className=\"inline-flex h-8 w-8 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-30\"\n        onClick={onUp}\n      >\n        <Icon icon={UiChevronUp} className=\"text-sm\" />\n      </button>\n      <button\n        type=\"button\"\n        aria-label={`Move item ${index + 1} down`}\n        disabled={!onDown}\n        className=\"inline-flex h-8 w-8 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-30\"\n        onClick={onDown}\n      >\n        <Icon icon={UiChevronDown} className=\"text-sm\" />\n      </button>\n      <button\n        type=\"button\"\n        aria-label={`Remove item ${index + 1}`}\n        className=\"inline-flex h-8 w-8 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground\"\n        onClick={onRemove}\n      >\n        <Icon icon={UiTrash} className=\"text-sm\" />\n      </button>\n    </div>\n  );\n}\n\n// TagArray is the compact tag editor for plain string-item arrays.\nfunction TagArray({\n  field,\n  fieldId,\n  readOnly,\n  size,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  readOnly: boolean;\n  size: FormSize;\n}) {\n  const tags = toStringArray(field.value);\n\n  function commit(raw: string, input: HTMLInputElement) {\n    const next = raw\n      .split(\",\")\n      .map((p) => p.trim())\n      .filter(Boolean);\n    if (next.length === 0) return;\n    field.onChange([...tags, ...next]);\n    input.value = \"\";\n  }\n\n  function handleKeyDown(e: KeyboardEvent<HTMLInputElement>) {\n    const input = e.currentTarget;\n    if (e.key === \"Enter\" || e.key === \",\") {\n      e.preventDefault();\n      commit(input.value, input);\n      return;\n    }\n    if (e.key === \"Backspace\" && input.value === \"\" && tags.length > 0) {\n      field.onChange(tags.slice(0, -1));\n    }\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent px-2 py-1 shadow-sm\",\n        controlMinHeightClass[size],\n      )}\n    >\n      {tags.map((tag, i) => (\n        <span\n          key={`${tag}-${i}`}\n          className=\"inline-flex h-6 max-w-full items-center gap-1 rounded-md bg-muted px-2 text-xs\"\n        >\n          <span className=\"truncate\">{tag}</span>\n          {!readOnly && (\n            <button\n              type=\"button\"\n              className=\"text-muted-foreground hover:text-foreground\"\n              aria-label={`Remove ${tag}`}\n              onClick={() => field.onChange(tags.filter((_, idx) => idx !== i))}\n            >\n              <Icon icon={UiClose} />\n            </button>\n          )}\n        </span>\n      ))}\n      {!readOnly && (\n        <input\n          id={fieldId}\n          data-jsf-input\n          className={cn(\"min-w-32 flex-1 bg-transparent px-1 py-1 outline-none\", labelSizeClass[size])}\n          placeholder={tags.length === 0 ? defaultPlaceholder(field.schema) : \"\"}\n          onKeyDown={handleKeyDown}\n          onBlur={(e) => commit(e.currentTarget.value, e.currentTarget)}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction toStringArray(value: unknown): string[] {\n  if (Array.isArray(value)) return value.map(String);\n  return [];\n}\n"],"names":[],"mappings":"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"}

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

@@ -4,18 +4,25 @@ const jsxRuntime = require("react/jsx-runtime");
 require("react");
 const utils = require("../lib/utils.cjs");
 const Icon = require("../data/Icon.cjs");
-const Timestamp = require("../data/cells/Timestamp.cjs");
-const button = require("./button.cjs");
+const timestampFormat = require("../data/cells/timestamp-format.cjs");
 const Combobox = require("./Combobox.cjs");
 const DateTimePicker = require("./DateTimePicker.cjs");
-const jsonSchemaFormArray = require("./json-schema-form-array.cjs");
-const jsonSchemaFormRender = require("./json-schema-form-render.cjs");
+const jsonSchemaFormUtils = require("./json-schema-form-utils.cjs");
 const jsonSchemaFormSize = require("./json-schema-form-size.cjs");
-const UiAdd = require("../icons/components/UiAdd.cjs");
-const UiTrash = require("../icons/components/UiTrash.cjs");
-const INPUT_BASE = "w-full min-w-0 rounded-md border border-input bg-background text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:bg-muted/40 focus-visible:ring-2 focus-visible:ring-ring";
-function inputClass(size) {
-  return utils.cn(INPUT_BASE, jsonSchemaFormSize.inputSizeClass[size]);
+function FieldsGrid({ layout, size, children }) {
+  if (layout.mode === "inline") {
+    const labelMaxWidth = layout.labelMaxWidth ?? "40ch";
+    const valueMaxWidth = layout.valueMaxWidth ?? "600px";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: utils.cn("grid", jsonSchemaFormSize.inlineRowGapClass[size]),
+        style: { gridTemplateColumns: `fit-content(${labelMaxWidth}) minmax(0, ${valueMaxWidth})` },
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("grid", jsonSchemaFormSize.stackedRowGapClass[size]), children });
 }
 function FieldWrapper({
   label,
@@ -26,30 +33,26 @@ function FieldWrapper({
   size
 }) {
   if (layout.mode === "inline") {
-    const labelMaxWidth = layout.labelMaxWidth ?? "40ch";
-    const valueMaxWidth = layout.valueMaxWidth ?? "600px";
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: "grid items-start gap-x-3 gap-y-0.5",
-        style: {
-          gridTemplateColumns: `minmax(0, min(${labelMaxWidth}, max-content)) minmax(0, ${valueMaxWidth})`
-        },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("flex min-w-0 items-center", jsonSchemaFormSize.controlMinHeightClass[size]), children: label }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0", children: value }),
-          helper && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "col-start-2 text-xs text-muted-foreground", children: helper }),
-          error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "col-start-2 text-xs text-destructive", children: error })
-        ]
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-2 grid grid-cols-subgrid items-start gap-x-3 gap-y-0.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("flex min-w-0 items-center", jsonSchemaFormSize.controlMinHeightClass[size]), children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0", children: value }),
+      helper && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "col-start-2 text-xs text-muted-foreground", children: helper }),
+      error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "col-start-2 text-xs text-destructive", children: error })
+    ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex flex-col", jsonSchemaFormSize.fieldInnerGapClass[size]), children: [
-    label,
-    value,
-    helper && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: helper }),
-    error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-destructive", children: error })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "flex w-full flex-col gap-1",
+      style: { maxWidth: layout.valueMaxWidth ?? "600px" },
+      children: [
+        label,
+        value,
+        helper && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: helper }),
+        error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-destructive", children: error })
+      ]
+    }
+  );
 }
 function FieldLabel({ field, fieldId, size }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: fieldId, className: utils.cn("flex min-w-0 items-center gap-2 font-medium", jsonSchemaFormSize.labelSizeClass[size]), children: [
@@ -59,39 +62,29 @@ function FieldLabel({ field, fieldId, size }) {
     field.badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: field.badge })
   ] });
 }
-function fieldInputId(key, prefix) {
-  const safe = key.replace(/[^a-zA-Z0-9_-]/g, "_");
-  return prefix ? `jsf-${prefix}-${safe}` : `jsf-${safe}`;
-}
-function renderValueControl(field, ctx) {
-  const fieldId = fieldInputId(field.key, ctx.idPrefix);
-  if (field.readOnly && field.kind !== "array" && field.kind !== "object" && field.kind !== "string-map") {
-    return /* @__PURE__ */ jsxRuntime.jsx(ReadOnlyValue, { field, fieldId, size: ctx.size });
-  }
-  const readOnly = ctx.readOnly;
-  const size = ctx.size;
-  switch (field.kind) {
-    case "enum":
-      return /* @__PURE__ */ jsxRuntime.jsx(EnumControl, { field, fieldId, readOnly, size });
-    case "boolean":
-      return /* @__PURE__ */ jsxRuntime.jsx(BooleanControl, { field, fieldId, readOnly, size });
-    case "number":
-      return /* @__PURE__ */ jsxRuntime.jsx(NumberControl, { field, fieldId, readOnly, size });
-    case "date":
-      return /* @__PURE__ */ jsxRuntime.jsx(DateControl, { field, fieldId, readOnly, size });
-    case "array":
-      return /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormArray.ArrayControl, { field, fieldId, ctx });
-    case "object":
-      return /* @__PURE__ */ jsxRuntime.jsx(ObjectControl, { field, ctx });
-    case "string-map":
-      return /* @__PURE__ */ jsxRuntime.jsx(StringMapControl, { field, ctx });
-    default:
-      return /* @__PURE__ */ jsxRuntime.jsx(StringControl, { field, fieldId, readOnly, size });
-  }
+function ObjectSection({
+  label,
+  required,
+  size,
+  badge,
+  helper,
+  labelIcon,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("col-span-full flex flex-col", jsonSchemaFormSize.fieldInnerGapClass[size]), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex items-center gap-2 border-b border-border pb-1 font-semibold", jsonSchemaFormSize.labelSizeClass[size]), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Icon.LabelIcon, { icon: labelIcon, className: "text-[15px] text-muted-foreground" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
+      required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive", children: "*" }),
+      badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: badge })
+    ] }),
+    helper && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: helper }),
+    children
+  ] });
 }
 function ReadOnlyValue({ field, fieldId, size }) {
-  const text = toText(field.value);
-  const display = field.kind === "date" && text ? Timestamp.formatDateTimeRelative(text) : text;
+  const text = jsonSchemaFormUtils.toText(field.value);
+  const display = field.kind === "date" && text ? timestampFormat.formatDateTimeRelative(text) : text;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
@@ -104,25 +97,32 @@ function ReadOnlyValue({ field, fieldId, size }) {
     }
   );
 }
+function FieldSuffixWrapper({ suffix, children }) {
+  if (!suffix) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-jsf-control": true, className: "relative", children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-1.5 flex items-center", children: suffix })
+  ] });
+}
 function StringControl({
   field,
   fieldId,
   readOnly,
   size
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(FieldSuffixWrapper, { suffix: field.suffix, children: /* @__PURE__ */ jsxRuntime.jsx(
     "input",
     {
       id: fieldId,
       type: "text",
       "data-jsf-input": true,
-      className: inputClass(size),
-      value: toText(field.value),
+      className: utils.cn(jsonSchemaFormUtils.inputClass(size), field.suffix && "pr-8"),
+      value: jsonSchemaFormUtils.toText(field.value),
       disabled: readOnly,
-      placeholder: defaultPlaceholder(field.schema),
+      placeholder: jsonSchemaFormUtils.defaultPlaceholder(field.schema),
       onChange: (e) => field.onChange(e.target.value)
     }
-  );
+  ) });
 }
 function NumberControl({
   field,
@@ -130,17 +130,17 @@ function NumberControl({
   readOnly,
   size
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(FieldSuffixWrapper, { suffix: field.suffix, children: /* @__PURE__ */ jsxRuntime.jsx(
     "input",
     {
       id: fieldId,
       type: "text",
       inputMode: "decimal",
       "data-jsf-input": true,
-      className: inputClass(size),
-      value: toText(field.value),
+      className: utils.cn(jsonSchemaFormUtils.inputClass(size), field.suffix && "pr-8"),
+      value: jsonSchemaFormUtils.toText(field.value),
       disabled: readOnly,
-      placeholder: defaultPlaceholder(field.schema),
+      placeholder: jsonSchemaFormUtils.defaultPlaceholder(field.schema),
       onChange: (e) => {
         const raw = e.target.value;
         const coerce = field.coerceNumber !== false;
@@ -151,7 +151,7 @@ function NumberControl({
         }
       }
     }
-  );
+  ) });
 }
 function DateControl({
   field,
@@ -159,7 +159,7 @@ function DateControl({
   readOnly,
   size
 }) {
-  const text = toText(field.value);
+  const text = jsonSchemaFormUtils.toText(field.value);
   if (readOnly) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -168,7 +168,7 @@ function DateControl({
         "data-jsf-input": true,
         className: utils.cn("flex items-center text-foreground", jsonSchemaFormSize.controlHeightClass[size], jsonSchemaFormSize.labelSizeClass[size]),
         title: text || void 0,
-        children: text ? Timestamp.formatDateTimeRelative(text) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "—" })
+        children: text ? timestampFormat.formatDateTimeRelative(text) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "—" })
       }
     );
   }
@@ -178,10 +178,11 @@ function DateControl({
       id: fieldId,
       "aria-label": field.label,
       "data-jsf-input": true,
-      inputClassName: utils.cn(inputClass(size), "pr-8"),
+      inputClassName: utils.cn(jsonSchemaFormUtils.inputClass(size), field.suffix ? "pr-14" : "pr-8"),
       value: text,
       onChange: (next) => field.onChange(next),
-      placeholder: defaultPlaceholder(field.schema)
+      placeholder: jsonSchemaFormUtils.defaultPlaceholder(field.schema),
+      suffix: field.suffix
     }
   );
 }
@@ -212,8 +213,8 @@ function EnumControl({
   readOnly,
   size
 }) {
-  const value = toText(field.value);
-  const options = withSyntheticValue(field.options ?? [], value);
+  const value = jsonSchemaFormUtils.toText(field.value);
+  const options = jsonSchemaFormUtils.withSyntheticValue(field.options ?? [], value);
   if (field.display === "radio") {
     return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupControl, { field, fieldId, readOnly, options, value, size });
   }
@@ -227,7 +228,8 @@ function EnumControl({
       size,
       allowCustomValue: field.allowCustomValue ?? false,
       onChange: (v) => field.onChange(v),
-      ...defaultPlaceholder(field.schema) ? { placeholder: defaultPlaceholder(field.schema) } : {}
+      suffix: field.suffix,
+      ...jsonSchemaFormUtils.defaultPlaceholder(field.schema) ? { placeholder: jsonSchemaFormUtils.defaultPlaceholder(field.schema) } : {}
     }
   );
 }
@@ -280,158 +282,14 @@ function RadioGroupControl({
     }
   );
 }
-function ObjectControl({ field, ctx }) {
-  const obj = isPlainObject(field.value) ? field.value : {};
-  const subSchema = {
-    properties: field.objectProperties ?? {},
-    ...field.objectRequired ? { required: field.objectRequired } : {},
-    ...Array.isArray(field.schema.allOf) ? { allOf: field.schema.allOf } : {}
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("grid", jsonSchemaFormSize.stackedRowGapClass[ctx.size]), children: jsonSchemaFormRender.renderObjectFields(subSchema, obj, (next) => field.onChange(next), {
-    ...ctx,
-    readOnly: ctx.readOnly || field.readOnly === true,
-    depth: ctx.depth + 1
-  }) });
-}
-function StringMapControl({ field, ctx }) {
-  const readOnly = ctx.readOnly || field.readOnly === true;
-  const map = isPlainObject(field.value) ? field.value : {};
-  const known = field.knownProperties ?? {};
-  const knownKeys = Object.keys(known);
-  const extraKeys = Object.keys(map).filter((k) => !(k in known));
-  const childCtx = { ...ctx, readOnly, depth: ctx.depth + 1 };
-  function valueSchemaForKey(key) {
-    for (const { pattern, schema } of field.valuePatternSchemas ?? []) {
-      let re;
-      try {
-        re = new RegExp(pattern);
-      } catch {
-        re = void 0;
-      }
-      if (re == null ? void 0 : re.test(key)) return schema;
-    }
-    return field.valueSchema ?? { type: "string" };
-  }
-  function entryIsStacked(key) {
-    return valueSchemaForKey(key)["x-layout"] === "stack";
-  }
-  function setEntry(key, next) {
-    field.onChange({ ...map, [key]: next });
-  }
-  function renameEntry(oldKey, newKey) {
-    if (newKey === oldKey) return;
-    const next = {};
-    for (const [k, v] of Object.entries(map)) next[k === oldKey ? newKey : k] = v;
-    field.onChange(next);
-  }
-  function removeEntry(key) {
-    const next = { ...map };
-    delete next[key];
-    field.onChange(next);
-  }
-  function addEntry() {
-    if ("" in map) return;
-    field.onChange({ ...map, "": "" });
-  }
-  function valueControlFor(key, valueSchema) {
-    const nodes = jsonSchemaFormRender.renderFieldNodes(
-      {
-        key,
-        prop: valueSchema,
-        required: false,
-        value: map[key] ?? "",
-        onChange: (next) => setEntry(key, next)
-      },
-      childCtx
-    );
-    return (nodes == null ? void 0 : nodes.value) ?? null;
-  }
-  function valueControlForKey(key) {
-    return valueControlFor(key, valueSchemaForKey(key));
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex flex-col rounded-md border border-input p-2", jsonSchemaFormSize.fieldInnerGapClass[childCtx.size]), children: [
-    knownKeys.map((key) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[10rem_1fr] items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: fieldInputId(key, childCtx.idPrefix), className: "truncate text-xs text-muted-foreground", title: key, children: key }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0", children: valueControlFor(key, known[key] ?? { type: "string" }) })
-    ] }, `known-${key}`)),
-    extraKeys.map((key) => {
-      const keyControl = field.keyOptions ? /* @__PURE__ */ jsxRuntime.jsx(
-        Combobox.Combobox,
-        {
-          options: keyPickerOptions(field.keyOptions, extraKeys, key),
-          value: key,
-          disabled: readOnly,
-          size: childCtx.size,
-          allowCustomValue: false,
-          onChange: (next) => renameEntry(key, next),
-          placeholder: "Select…"
-        }
-      ) : /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          type: "text",
-          "aria-label": "Field name",
-          className: utils.cn(inputClass(childCtx.size), "font-mono"),
-          value: key,
-          disabled: readOnly,
-          onChange: (e) => renameEntry(key, e.target.value)
-        }
-      );
-      const removeButton = !readOnly ? /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          "aria-label": `Remove ${key}`,
-          className: "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground",
-          onClick: () => removeEntry(key),
-          children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiTrash.UiTrash, className: "text-sm" })
-        }
-      ) : null;
-      if (entryIsStacked(key)) {
-        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5 rounded-md border border-input p-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: keyControl }),
-            removeButton
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0", children: valueControlForKey(key) })
-        ] }, `extra-${key}`);
-      }
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[10rem_1fr_auto] items-center gap-2", children: [
-        keyControl,
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0", children: valueControlForKey(key) }),
-        removeButton
-      ] }, `extra-${key}`);
-    }),
-    !readOnly && field.allowExtraKeys !== false && /* @__PURE__ */ jsxRuntime.jsxs(button.Button, { type: "button", variant: "outline", size: "sm", onClick: addEntry, className: "gap-1.5", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiAdd.UiAdd, className: "text-sm" }),
-      "Add field"
-    ] })
-  ] });
-}
-function withSyntheticValue(options, value) {
-  if (!value || options.some((o) => o.value === value)) return options;
-  return [{ value, label: value }, ...options];
-}
-function keyPickerOptions(options, usedKeys, currentKey) {
-  const taken = new Set(usedKeys.filter((k) => k !== currentKey));
-  return options.filter((o) => !taken.has(o.value));
-}
-function toText(value) {
-  if (value === void 0 || value === null) return "";
-  if (typeof value === "object") return "";
-  return String(value);
-}
-function isPlainObject(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-function defaultPlaceholder(schema) {
-  if (schema.default != null && typeof schema.default !== "object") return String(schema.default);
-  return "";
-}
+exports.BooleanControl = BooleanControl;
+exports.DateControl = DateControl;
+exports.EnumControl = EnumControl;
 exports.FieldLabel = FieldLabel;
 exports.FieldWrapper = FieldWrapper;
-exports.defaultPlaceholder = defaultPlaceholder;
-exports.fieldInputId = fieldInputId;
-exports.inputClass = inputClass;
-exports.renderValueControl = renderValueControl;
+exports.FieldsGrid = FieldsGrid;
+exports.NumberControl = NumberControl;
+exports.ObjectSection = ObjectSection;
+exports.ReadOnlyValue = ReadOnlyValue;
+exports.StringControl = StringControl;
 //# sourceMappingURL=json-schema-form-fields.cjs.map