@flanksource/clicky-ui 0.2.8 → 0.2.10

package/dist/components/JsonSchemaForm.cjs

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../lib/utils.cjs");
+const jsonSchemaFormRender = require("./json-schema-form-render.cjs");
+const DEFAULT_LABEL_MAX_WIDTH = "40ch";
+const DEFAULT_VALUE_MAX_WIDTH = "400px";
+function resolveFormLayout(layout, inline) {
+  const base = layout ?? { mode: inline ? "inline" : "stacked" };
+  if (base.mode !== "inline") return { mode: "stacked" };
+  return {
+    mode: "inline",
+    labelMaxWidth: base.labelMaxWidth ?? DEFAULT_LABEL_MAX_WIDTH,
+    valueMaxWidth: base.valueMaxWidth ?? DEFAULT_VALUE_MAX_WIDTH
+  };
+}
+function JsonSchemaForm({
+  schema,
+  value,
+  onChange,
+  readOnly = false,
+  inline = false,
+  layout,
+  hideReadOnlyFields = false,
+  hiddenKeys,
+  requiredFirst = false,
+  title,
+  pre,
+  post
+}) {
+  const resolvedLayout = resolveFormLayout(layout, inline);
+  const ctx = {
+    readOnly,
+    hideReadOnlyFields,
+    layout: resolvedLayout,
+    requiredFirst,
+    pre: pre ?? [],
+    post: post ?? [],
+    depth: 0
+  };
+  const rows = jsonSchemaFormRender.renderObjectFields(schema, value, onChange, ctx, hiddenKeys ? { hiddenKeys } : void 0);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn(resolvedLayout.mode === "inline" ? "grid gap-2" : "grid gap-4"), children: rows })
+  ] });
+}
+exports.JsonSchemaForm = JsonSchemaForm;
+//# sourceMappingURL=JsonSchemaForm.cjs.map

package/dist/components/JsonSchemaForm.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"JsonSchemaForm.cjs","sources":["../../src/components/JsonSchemaForm.tsx"],"sourcesContent":["import { cn } from \"../lib/utils\";\nimport { renderObjectFields, type RenderContext } from \"./json-schema-form-render\";\nimport type { FormLayout, JsonSchemaFormProps } from \"./json-schema-form-types\";\n\nconst DEFAULT_LABEL_MAX_WIDTH = \"40ch\";\nconst DEFAULT_VALUE_MAX_WIDTH = \"400px\";\n\n// resolveFormLayout maps the `layout`/`inline` props to a single resolved\n// FormLayout. An explicit `layout` wins; otherwise `inline` selects the inline\n// preset. Width caps are only filled for inline mode.\nfunction resolveFormLayout(layout: FormLayout | undefined, inline: boolean): FormLayout {\n  const base = layout ?? { mode: inline ? \"inline\" : \"stacked\" };\n  if (base.mode !== \"inline\") return { mode: \"stacked\" };\n  return {\n    mode: \"inline\",\n    labelMaxWidth: base.labelMaxWidth ?? DEFAULT_LABEL_MAX_WIDTH,\n    valueMaxWidth: base.valueMaxWidth ?? DEFAULT_VALUE_MAX_WIDTH,\n  };\n}\n\n// JsonSchemaForm renders an object subschema as a form: one control per\n// (effective) property. It resolves if/then conditionals internally and recurses\n// through array items and object/map values; every other behaviour is layered on\n// by the pre/post extension functions the consumer supplies. The component holds\n// no domain knowledge.\nexport function JsonSchemaForm({\n  schema,\n  value,\n  onChange,\n  readOnly = false,\n  inline = false,\n  layout,\n  hideReadOnlyFields = false,\n  hiddenKeys,\n  requiredFirst = false,\n  title,\n  pre,\n  post,\n}: JsonSchemaFormProps) {\n  const resolvedLayout = resolveFormLayout(layout, inline);\n  const ctx: RenderContext = {\n    readOnly,\n    hideReadOnlyFields,\n    layout: resolvedLayout,\n    requiredFirst,\n    pre: pre ?? [],\n    post: post ?? [],\n    depth: 0,\n  };\n  const rows = renderObjectFields(schema, value, onChange, ctx, hiddenKeys ? { hiddenKeys } : undefined);\n\n  return (\n    <div className=\"space-y-3\">\n      {title && <h3 className=\"text-sm font-semibold\">{title}</h3>}\n      <div className={cn(resolvedLayout.mode === \"inline\" ? \"grid gap-2\" : \"grid gap-4\")}>{rows}</div>\n    </div>\n  );\n}\n"],"names":["renderObjectFields","jsxs","jsx","cn"],"mappings":";;;;;AAIA,MAAM,0BAA0B;AAChC,MAAM,0BAA0B;AAKhC,SAAS,kBAAkB,QAAgC,QAA6B;AACtF,QAAM,OAAO,UAAU,EAAE,MAAM,SAAS,WAAW,UAAA;AACnD,MAAI,KAAK,SAAS,SAAU,QAAO,EAAE,MAAM,UAAA;AAC3C,SAAO;AAAA,IACL,MAAM;AAAA,IACN,eAAe,KAAK,iBAAiB;AAAA,IACrC,eAAe,KAAK,iBAAiB;AAAA,EAAA;AAEzC;AAOO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,SAAS;AAAA,EACT;AAAA,EACA,qBAAqB;AAAA,EACrB;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AACF,GAAwB;AACtB,QAAM,iBAAiB,kBAAkB,QAAQ,MAAM;AACvD,QAAM,MAAqB;AAAA,IACzB;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA,KAAK,OAAO,CAAA;AAAA,IACZ,MAAM,QAAQ,CAAA;AAAA,IACd,OAAO;AAAA,EAAA;AAET,QAAM,OAAOA,qBAAAA,mBAAmB,QAAQ,OAAO,UAAU,KAAK,aAAa,EAAE,WAAA,IAAe,MAAS;AAErG,SACEC,2BAAAA,KAAC,OAAA,EAAI,WAAU,aACZ,UAAA;AAAA,IAAA,SAASC,2BAAAA,IAAC,MAAA,EAAG,WAAU,yBAAyB,UAAA,OAAM;AAAA,IACvDA,2BAAAA,IAAC,OAAA,EAAI,WAAWC,MAAAA,GAAG,eAAe,SAAS,WAAW,eAAe,YAAY,GAAI,UAAA,KAAA,CAAK;AAAA,EAAA,GAC5F;AAEJ;;"}

package/dist/components/JsonSchemaForm.d.ts

@@ -0,0 +1,3 @@
+import { JsonSchemaFormProps } from './json-schema-form-types';
+export declare function JsonSchemaForm({ schema, value, onChange, readOnly, inline, layout, hideReadOnlyFields, hiddenKeys, requiredFirst, title, pre, post, }: JsonSchemaFormProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=JsonSchemaForm.d.ts.map

package/dist/components/JsonSchemaForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JsonSchemaForm.d.ts","sourceRoot":"","sources":["../../src/components/JsonSchemaForm.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAc,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAuBhF,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,MAAc,EACd,MAAM,EACN,kBAA0B,EAC1B,UAAU,EACV,aAAqB,EACrB,KAAK,EACL,GAAG,EACH,IAAI,GACL,EAAE,mBAAmB,2CAmBrB"}

package/dist/components/JsonSchemaForm.js

@@ -0,0 +1,48 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { renderObjectFields } from "./json-schema-form-render.js";
+const DEFAULT_LABEL_MAX_WIDTH = "40ch";
+const DEFAULT_VALUE_MAX_WIDTH = "400px";
+function resolveFormLayout(layout, inline) {
+  const base = layout ?? { mode: inline ? "inline" : "stacked" };
+  if (base.mode !== "inline") return { mode: "stacked" };
+  return {
+    mode: "inline",
+    labelMaxWidth: base.labelMaxWidth ?? DEFAULT_LABEL_MAX_WIDTH,
+    valueMaxWidth: base.valueMaxWidth ?? DEFAULT_VALUE_MAX_WIDTH
+  };
+}
+function JsonSchemaForm({
+  schema,
+  value,
+  onChange,
+  readOnly = false,
+  inline = false,
+  layout,
+  hideReadOnlyFields = false,
+  hiddenKeys,
+  requiredFirst = false,
+  title,
+  pre,
+  post
+}) {
+  const resolvedLayout = resolveFormLayout(layout, inline);
+  const ctx = {
+    readOnly,
+    hideReadOnlyFields,
+    layout: resolvedLayout,
+    requiredFirst,
+    pre: pre ?? [],
+    post: post ?? [],
+    depth: 0
+  };
+  const rows = renderObjectFields(schema, value, onChange, ctx, hiddenKeys ? { hiddenKeys } : void 0);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    title && /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: title }),
+    /* @__PURE__ */ jsx("div", { className: cn(resolvedLayout.mode === "inline" ? "grid gap-2" : "grid gap-4"), children: rows })
+  ] });
+}
+export {
+  JsonSchemaForm
+};
+//# sourceMappingURL=JsonSchemaForm.js.map

package/dist/components/JsonSchemaForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JsonSchemaForm.js","sources":["../../src/components/JsonSchemaForm.tsx"],"sourcesContent":["import { cn } from \"../lib/utils\";\nimport { renderObjectFields, type RenderContext } from \"./json-schema-form-render\";\nimport type { FormLayout, JsonSchemaFormProps } from \"./json-schema-form-types\";\n\nconst DEFAULT_LABEL_MAX_WIDTH = \"40ch\";\nconst DEFAULT_VALUE_MAX_WIDTH = \"400px\";\n\n// resolveFormLayout maps the `layout`/`inline` props to a single resolved\n// FormLayout. An explicit `layout` wins; otherwise `inline` selects the inline\n// preset. Width caps are only filled for inline mode.\nfunction resolveFormLayout(layout: FormLayout | undefined, inline: boolean): FormLayout {\n  const base = layout ?? { mode: inline ? \"inline\" : \"stacked\" };\n  if (base.mode !== \"inline\") return { mode: \"stacked\" };\n  return {\n    mode: \"inline\",\n    labelMaxWidth: base.labelMaxWidth ?? DEFAULT_LABEL_MAX_WIDTH,\n    valueMaxWidth: base.valueMaxWidth ?? DEFAULT_VALUE_MAX_WIDTH,\n  };\n}\n\n// JsonSchemaForm renders an object subschema as a form: one control per\n// (effective) property. It resolves if/then conditionals internally and recurses\n// through array items and object/map values; every other behaviour is layered on\n// by the pre/post extension functions the consumer supplies. The component holds\n// no domain knowledge.\nexport function JsonSchemaForm({\n  schema,\n  value,\n  onChange,\n  readOnly = false,\n  inline = false,\n  layout,\n  hideReadOnlyFields = false,\n  hiddenKeys,\n  requiredFirst = false,\n  title,\n  pre,\n  post,\n}: JsonSchemaFormProps) {\n  const resolvedLayout = resolveFormLayout(layout, inline);\n  const ctx: RenderContext = {\n    readOnly,\n    hideReadOnlyFields,\n    layout: resolvedLayout,\n    requiredFirst,\n    pre: pre ?? [],\n    post: post ?? [],\n    depth: 0,\n  };\n  const rows = renderObjectFields(schema, value, onChange, ctx, hiddenKeys ? { hiddenKeys } : undefined);\n\n  return (\n    <div className=\"space-y-3\">\n      {title && <h3 className=\"text-sm font-semibold\">{title}</h3>}\n      <div className={cn(resolvedLayout.mode === \"inline\" ? \"grid gap-2\" : \"grid gap-4\")}>{rows}</div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AAIA,MAAM,0BAA0B;AAChC,MAAM,0BAA0B;AAKhC,SAAS,kBAAkB,QAAgC,QAA6B;AACtF,QAAM,OAAO,UAAU,EAAE,MAAM,SAAS,WAAW,UAAA;AACnD,MAAI,KAAK,SAAS,SAAU,QAAO,EAAE,MAAM,UAAA;AAC3C,SAAO;AAAA,IACL,MAAM;AAAA,IACN,eAAe,KAAK,iBAAiB;AAAA,IACrC,eAAe,KAAK,iBAAiB;AAAA,EAAA;AAEzC;AAOO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,SAAS;AAAA,EACT;AAAA,EACA,qBAAqB;AAAA,EACrB;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AACF,GAAwB;AACtB,QAAM,iBAAiB,kBAAkB,QAAQ,MAAM;AACvD,QAAM,MAAqB;AAAA,IACzB;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA,KAAK,OAAO,CAAA;AAAA,IACZ,MAAM,QAAQ,CAAA;AAAA,IACd,OAAO;AAAA,EAAA;AAET,QAAM,OAAO,mBAAmB,QAAQ,OAAO,UAAU,KAAK,aAAa,EAAE,WAAA,IAAe,MAAS;AAErG,SACE,qBAAC,OAAA,EAAI,WAAU,aACZ,UAAA;AAAA,IAAA,SAAS,oBAAC,MAAA,EAAG,WAAU,yBAAyB,UAAA,OAAM;AAAA,IACvD,oBAAC,OAAA,EAAI,WAAW,GAAG,eAAe,SAAS,WAAW,eAAe,YAAY,GAAI,UAAA,KAAA,CAAK;AAAA,EAAA,GAC5F;AAEJ;"}

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

@@ -0,0 +1,169 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+require("react");
+const Icon = require("../data/Icon.cjs");
+const button = require("./button.cjs");
+const jsonSchemaFormFields = require("./json-schema-form-fields.cjs");
+const jsonSchemaFormResolve = require("./json-schema-form-resolve.cjs");
+const jsonSchemaFormRender = require("./json-schema-form-render.cjs");
+const UiAdd = require("../icons/components/UiAdd.cjs");
+const UiClose = require("../icons/components/UiClose.cjs");
+const UiChevronUp = require("../icons/components/UiChevronUp.cjs");
+const UiChevronDown = require("../icons/components/UiChevronDown.cjs");
+const UiTrash = require("../icons/components/UiTrash.cjs");
+function ArrayControl({
+  field,
+  fieldId,
+  ctx
+}) {
+  const readOnly = ctx.readOnly || field.readOnly === true;
+  if (jsonSchemaFormResolve.isScalarStringItems(field.itemSchema)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(TagArray, { field, fieldId, readOnly });
+  }
+  const items = Array.isArray(field.value) ? field.value : [];
+  const itemSchema = field.itemSchema ?? { type: "string" };
+  const childCtx = { ...ctx, readOnly, depth: ctx.depth + 1 };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 rounded-md border border-input p-2", children: [
+    items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[1fr_auto] items-start gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0", children: jsonSchemaFormRender.renderFieldRow(
+        {
+          key: `${field.key}[${i}]`,
+          prop: itemSchema,
+          required: false,
+          value: item,
+          onChange: (next) => field.onChange(jsonSchemaFormRender.setIndex(items, i, next))
+        },
+        childCtx,
+        { labelOverride: `Item ${i + 1}` }
+      ) }),
+      !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
+        ItemControls,
+        {
+          onUp: i > 0 ? () => field.onChange(jsonSchemaFormRender.moveItem(items, i, i - 1)) : void 0,
+          onDown: i < items.length - 1 ? () => field.onChange(jsonSchemaFormRender.moveItem(items, i, i + 1)) : void 0,
+          onRemove: () => field.onChange(jsonSchemaFormRender.removeIndex(items, i)),
+          index: i
+        }
+      )
+    ] }, i)),
+    !readOnly && /* @__PURE__ */ jsxRuntime.jsxs(
+      button.Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        className: "gap-1.5",
+        onClick: () => field.onChange([...items, jsonSchemaFormRender.seedFromSchema(itemSchema)]),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiAdd.UiAdd, className: "text-sm" }),
+          "Add item"
+        ]
+      }
+    )
+  ] });
+}
+function ItemControls({
+  onUp,
+  onDown,
+  onRemove,
+  index
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": `Move item ${index + 1} up`,
+        disabled: !onUp,
+        className: "inline-flex h-8 w-8 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-30",
+        onClick: onUp,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiChevronUp.UiChevronUp, className: "text-sm" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": `Move item ${index + 1} down`,
+        disabled: !onDown,
+        className: "inline-flex h-8 w-8 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-30",
+        onClick: onDown,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiChevronDown.UiChevronDown, className: "text-sm" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": `Remove item ${index + 1}`,
+        className: "inline-flex h-8 w-8 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground",
+        onClick: onRemove,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiTrash.UiTrash, className: "text-sm" })
+      }
+    )
+  ] });
+}
+function TagArray({
+  field,
+  fieldId,
+  readOnly
+}) {
+  const tags = toStringArray(field.value);
+  function commit(raw, input) {
+    const next = raw.split(",").map((p) => p.trim()).filter(Boolean);
+    if (next.length === 0) return;
+    field.onChange([...tags, ...next]);
+    input.value = "";
+  }
+  function handleKeyDown(e) {
+    const input = e.currentTarget;
+    if (e.key === "Enter" || e.key === ",") {
+      e.preventDefault();
+      commit(input.value, input);
+      return;
+    }
+    if (e.key === "Backspace" && input.value === "" && tags.length > 0) {
+      field.onChange(tags.slice(0, -1));
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent px-2 py-1 shadow-sm", children: [
+    tags.map((tag, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        className: "inline-flex h-6 max-w-full items-center gap-1 rounded-md bg-muted px-2 text-xs",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: tag }),
+          !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "text-muted-foreground hover:text-foreground",
+              "aria-label": `Remove ${tag}`,
+              onClick: () => field.onChange(tags.filter((_, idx) => idx !== i)),
+              children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiClose.UiClose })
+            }
+          )
+        ]
+      },
+      `${tag}-${i}`
+    )),
+    !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        id: fieldId,
+        "data-jsf-input": true,
+        className: "min-w-32 flex-1 bg-transparent px-1 py-1 text-sm outline-none",
+        placeholder: tags.length === 0 ? jsonSchemaFormFields.defaultPlaceholder(field.schema) : "",
+        onKeyDown: handleKeyDown,
+        onBlur: (e) => commit(e.currentTarget.value, e.currentTarget)
+      }
+    )
+  ] });
+}
+function toStringArray(value) {
+  if (Array.isArray(value)) return value.map(String);
+  return [];
+}
+exports.ArrayControl = ArrayControl;
+//# sourceMappingURL=json-schema-form-array.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-form-array.cjs","sources":["../../src/components/json-schema-form-array.tsx"],"sourcesContent":["import { type KeyboardEvent } from \"react\";\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 { isScalarStringItems } from \"./json-schema-form-resolve\";\nimport {\n  moveItem,\n  removeIndex,\n  renderFieldRow,\n  seedFromSchema,\n  setIndex,\n  type RenderContext,\n} from \"./json-schema-form-render\";\nimport type { FieldControl } 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} />;\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=\"space-y-2 rounded-md border border-input p-2\">\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\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}: {\n  field: FieldControl;\n  fieldId: string;\n  readOnly: boolean;\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 className=\"flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent px-2 py-1 shadow-sm\">\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=\"min-w-32 flex-1 bg-transparent px-1 py-1 text-sm outline-none\"\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":["isScalarStringItems","jsx","jsxs","renderFieldRow","setIndex","moveItem","removeIndex","Button","seedFromSchema","Icon","UiAdd","UiChevronUp","UiChevronDown","UiTrash","UiClose","defaultPlaceholder"],"mappings":"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"}

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

@@ -0,0 +1,8 @@
+import { RenderContext } from './json-schema-form-render';
+import { FieldControl } from './json-schema-form-types';
+export declare function ArrayControl({ field, fieldId, ctx, }: {
+    field: FieldControl;
+    fieldId: string;
+    ctx: RenderContext;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=json-schema-form-array.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-form-array.d.ts","sourceRoot":"","sources":["../../src/components/json-schema-form-array.tsx"],"names":[],"mappings":"AAMA,OAAO,EAML,KAAK,aAAa,EACnB,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAK7D,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,OAAO,EACP,GAAG,GACJ,EAAE;IACD,KAAK,EAAE,YAAY,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,aAAa,CAAC;CACpB,2CAqDA"}

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

@@ -0,0 +1,169 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Icon } from "../data/Icon.js";
+import { Button } from "./button.js";
+import { defaultPlaceholder } from "./json-schema-form-fields.js";
+import { isScalarStringItems } from "./json-schema-form-resolve.js";
+import { renderFieldRow, setIndex, removeIndex, moveItem, seedFromSchema } from "./json-schema-form-render.js";
+import { UiAdd } from "../icons/components/UiAdd.js";
+import { UiClose } from "../icons/components/UiClose.js";
+import { UiChevronUp } from "../icons/components/UiChevronUp.js";
+import { UiChevronDown } from "../icons/components/UiChevronDown.js";
+import { UiTrash } from "../icons/components/UiTrash.js";
+function ArrayControl({
+  field,
+  fieldId,
+  ctx
+}) {
+  const readOnly = ctx.readOnly || field.readOnly === true;
+  if (isScalarStringItems(field.itemSchema)) {
+    return /* @__PURE__ */ jsx(TagArray, { field, fieldId, readOnly });
+  }
+  const items = Array.isArray(field.value) ? field.value : [];
+  const itemSchema = field.itemSchema ?? { type: "string" };
+  const childCtx = { ...ctx, readOnly, depth: ctx.depth + 1 };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2 rounded-md border border-input p-2", children: [
+    items.map((item, i) => /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1fr_auto] items-start gap-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "min-w-0", children: renderFieldRow(
+        {
+          key: `${field.key}[${i}]`,
+          prop: itemSchema,
+          required: false,
+          value: item,
+          onChange: (next) => field.onChange(setIndex(items, i, next))
+        },
+        childCtx,
+        { labelOverride: `Item ${i + 1}` }
+      ) }),
+      !readOnly && /* @__PURE__ */ jsx(
+        ItemControls,
+        {
+          onUp: i > 0 ? () => field.onChange(moveItem(items, i, i - 1)) : void 0,
+          onDown: i < items.length - 1 ? () => field.onChange(moveItem(items, i, i + 1)) : void 0,
+          onRemove: () => field.onChange(removeIndex(items, i)),
+          index: i
+        }
+      )
+    ] }, i)),
+    !readOnly && /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        className: "gap-1.5",
+        onClick: () => field.onChange([...items, seedFromSchema(itemSchema)]),
+        children: [
+          /* @__PURE__ */ jsx(Icon, { icon: UiAdd, className: "text-sm" }),
+          "Add item"
+        ]
+      }
+    )
+  ] });
+}
+function ItemControls({
+  onUp,
+  onDown,
+  onRemove,
+  index
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": `Move item ${index + 1} up`,
+        disabled: !onUp,
+        className: "inline-flex h-8 w-8 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-30",
+        onClick: onUp,
+        children: /* @__PURE__ */ jsx(Icon, { icon: UiChevronUp, className: "text-sm" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": `Move item ${index + 1} down`,
+        disabled: !onDown,
+        className: "inline-flex h-8 w-8 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-30",
+        onClick: onDown,
+        children: /* @__PURE__ */ jsx(Icon, { icon: UiChevronDown, className: "text-sm" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": `Remove item ${index + 1}`,
+        className: "inline-flex h-8 w-8 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground",
+        onClick: onRemove,
+        children: /* @__PURE__ */ jsx(Icon, { icon: UiTrash, className: "text-sm" })
+      }
+    )
+  ] });
+}
+function TagArray({
+  field,
+  fieldId,
+  readOnly
+}) {
+  const tags = toStringArray(field.value);
+  function commit(raw, input) {
+    const next = raw.split(",").map((p) => p.trim()).filter(Boolean);
+    if (next.length === 0) return;
+    field.onChange([...tags, ...next]);
+    input.value = "";
+  }
+  function handleKeyDown(e) {
+    const input = e.currentTarget;
+    if (e.key === "Enter" || e.key === ",") {
+      e.preventDefault();
+      commit(input.value, input);
+      return;
+    }
+    if (e.key === "Backspace" && input.value === "" && tags.length > 0) {
+      field.onChange(tags.slice(0, -1));
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent px-2 py-1 shadow-sm", children: [
+    tags.map((tag, i) => /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: "inline-flex h-6 max-w-full items-center gap-1 rounded-md bg-muted px-2 text-xs",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: tag }),
+          !readOnly && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "text-muted-foreground hover:text-foreground",
+              "aria-label": `Remove ${tag}`,
+              onClick: () => field.onChange(tags.filter((_, idx) => idx !== i)),
+              children: /* @__PURE__ */ jsx(Icon, { icon: UiClose })
+            }
+          )
+        ]
+      },
+      `${tag}-${i}`
+    )),
+    !readOnly && /* @__PURE__ */ jsx(
+      "input",
+      {
+        id: fieldId,
+        "data-jsf-input": true,
+        className: "min-w-32 flex-1 bg-transparent px-1 py-1 text-sm outline-none",
+        placeholder: tags.length === 0 ? defaultPlaceholder(field.schema) : "",
+        onKeyDown: handleKeyDown,
+        onBlur: (e) => commit(e.currentTarget.value, e.currentTarget)
+      }
+    )
+  ] });
+}
+function toStringArray(value) {
+  if (Array.isArray(value)) return value.map(String);
+  return [];
+}
+export {
+  ArrayControl
+};
+//# sourceMappingURL=json-schema-form-array.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-form-array.js","sources":["../../src/components/json-schema-form-array.tsx"],"sourcesContent":["import { type KeyboardEvent } from \"react\";\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 { isScalarStringItems } from \"./json-schema-form-resolve\";\nimport {\n  moveItem,\n  removeIndex,\n  renderFieldRow,\n  seedFromSchema,\n  setIndex,\n  type RenderContext,\n} from \"./json-schema-form-render\";\nimport type { FieldControl } 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} />;\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=\"space-y-2 rounded-md border border-input p-2\">\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\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}: {\n  field: FieldControl;\n  fieldId: string;\n  readOnly: boolean;\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 className=\"flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent px-2 py-1 shadow-sm\">\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=\"min-w-32 flex-1 bg-transparent px-1 py-1 text-sm outline-none\"\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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"}