@bendyline/squisq-editor-react 2.2.0 → 2.3.0

package/dist/chunk-54UGTQBO.js

@@ -0,0 +1,862 @@
+import {
+  markdownToTiptap,
+  tiptapToMarkdown
+} from "./chunk-NITZVAXL.js";
+
+// src/jsonEditor/JsonEditorContext.tsx
+import { createContext, useContext, useEffect, useMemo } from "react";
+import { setByPointer } from "@bendyline/squisq/jsonForm";
+import { jsx } from "react/jsx-runtime";
+var JsonEditorContext = createContext(null);
+function JsonEditorProvider(props) {
+  const { rootSchema, rootData, onRootChange, density, validate, onValidate, children } = props;
+  const validationErrors = useMemo(
+    () => validate ? validate(rootData, rootSchema) : [],
+    [validate, rootData, rootSchema]
+  );
+  const errors = useMemo(() => {
+    const grouped = /* @__PURE__ */ new Map();
+    for (const e of validationErrors) {
+      const arr = grouped.get(e.path) ?? [];
+      arr.push(e);
+      grouped.set(e.path, arr);
+    }
+    return grouped;
+  }, [validationErrors]);
+  useEffect(() => {
+    if (!onValidate) return;
+    onValidate(validationErrors);
+  }, [validationErrors, onValidate]);
+  const setAtPath = useMemo(
+    () => (pointer, value2) => {
+      const next = setByPointer(rootData, pointer, value2);
+      onRootChange(next);
+    },
+    [rootData, onRootChange]
+  );
+  const value = useMemo(
+    () => ({ rootSchema, rootData, setAtPath, density, errors }),
+    [rootSchema, rootData, setAtPath, density, errors]
+  );
+  return /* @__PURE__ */ jsx(JsonEditorContext.Provider, { value, children });
+}
+function useJsonEditor() {
+  const ctx = useContext(JsonEditorContext);
+  if (!ctx) throw new Error("useJsonEditor must be used inside <JsonEditor>");
+  return ctx;
+}
+
+// src/jsonEditor/RenderNode.tsx
+import {
+  chooseControl,
+  resolveFlag,
+  resolveRef
+} from "@bendyline/squisq/jsonForm";
+import { useId as useId2 } from "react";
+
+// src/jsonEditor/editors.tsx
+import { useEffect as useEffect3, useId, useRef as useRef2, useState } from "react";
+import {
+  appendPointer,
+  arrayItemKind
+} from "@bendyline/squisq/jsonForm";
+
+// src/jsonEditor/EmbeddedRichTextField.tsx
+import { useEffect as useEffect2, useRef } from "react";
+import { useEditor, EditorContent } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Table from "@tiptap/extension-table";
+import TableRow from "@tiptap/extension-table-row";
+import TableCell from "@tiptap/extension-table-cell";
+import TableHeader from "@tiptap/extension-table-header";
+import TaskList from "@tiptap/extension-task-list";
+import TaskItem from "@tiptap/extension-task-item";
+import Placeholder from "@tiptap/extension-placeholder";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function EmbeddedRichTextField(props) {
+  const { value, onChange, readOnly = false, placeholder, className } = props;
+  const isExternalUpdate = useRef(false);
+  const lastValueRef = useRef(value);
+  const editor = useEditor({
+    editable: !readOnly,
+    extensions: [
+      StarterKit.configure({
+        codeBlock: { HTMLAttributes: { class: "squisq-code-block" } }
+      }),
+      Table.configure({ resizable: false }),
+      TableRow,
+      TableCell,
+      TableHeader,
+      TaskList,
+      TaskItem.configure({ nested: true }),
+      Placeholder.configure({ placeholder: placeholder ?? "" })
+    ],
+    content: markdownToTiptap(value),
+    onUpdate: ({ editor: ed }) => {
+      if (isExternalUpdate.current) return;
+      const html = ed.getHTML();
+      const md = tiptapToMarkdown(html);
+      lastValueRef.current = md;
+      onChange(md);
+    },
+    editorProps: {
+      attributes: {
+        class: "squisq-jf-richtext-prose"
+      }
+    }
+  });
+  useEffect2(() => {
+    if (!editor) return;
+    if (value === lastValueRef.current) return;
+    isExternalUpdate.current = true;
+    try {
+      editor.commands.setContent(markdownToTiptap(value), false);
+      lastValueRef.current = value;
+    } finally {
+      isExternalUpdate.current = false;
+    }
+  }, [editor, value]);
+  useEffect2(() => {
+    if (editor) editor.setEditable(!readOnly);
+  }, [editor, readOnly]);
+  const cls = "squisq-jf-richtext" + (className ? ` ${className}` : "");
+  return /* @__PURE__ */ jsx2(EditorContent, { editor, className: cls });
+}
+
+// src/jsonEditor/editors.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function accessibilityProps(props) {
+  return {
+    id: props.controlId,
+    "aria-labelledby": props.labelledBy,
+    "aria-describedby": props.describedBy,
+    "aria-invalid": props.invalid || void 0
+  };
+}
+function asString(v) {
+  if (v === void 0 || v === null) return "";
+  return String(v);
+}
+function asNumber(v) {
+  if (v === void 0 || v === null || v === "") return "";
+  const n = Number(v);
+  return Number.isFinite(n) ? n : "";
+}
+function TextEditor(props) {
+  const { value, schema, pointer, disabled } = props;
+  const { setAtPath } = useJsonEditor();
+  return /* @__PURE__ */ jsx3(
+    "input",
+    {
+      ...accessibilityProps(props),
+      type: "text",
+      className: "squisq-jf-input",
+      value: asString(value),
+      placeholder: schema.squisq?.placeholder,
+      disabled,
+      onChange: (e) => setAtPath(pointer, e.target.value)
+    }
+  );
+}
+function MultilineEditor(props) {
+  const { value, schema, pointer, disabled } = props;
+  const { setAtPath } = useJsonEditor();
+  const ref = useRef2(null);
+  useEffect3(() => {
+    const ta = ref.current;
+    if (!ta) return;
+    ta.style.height = "auto";
+    ta.style.height = `${ta.scrollHeight + 2}px`;
+  }, [value]);
+  return /* @__PURE__ */ jsx3(
+    "textarea",
+    {
+      ...accessibilityProps(props),
+      ref,
+      className: "squisq-jf-textarea",
+      value: asString(value),
+      placeholder: schema.squisq?.placeholder,
+      disabled,
+      onChange: (e) => setAtPath(pointer, e.target.value)
+    }
+  );
+}
+function RichTextEditor({ value, schema, pointer, disabled }) {
+  const { setAtPath } = useJsonEditor();
+  return /* @__PURE__ */ jsx3(
+    EmbeddedRichTextField,
+    {
+      value: asString(value),
+      placeholder: schema.squisq?.placeholder,
+      readOnly: disabled,
+      onChange: (md) => setAtPath(pointer, md)
+    }
+  );
+}
+function NumberStepperEditor(props) {
+  const { value, schema, pointer, disabled } = props;
+  const { setAtPath } = useJsonEditor();
+  const isInt = schema.type === "integer";
+  const step = schema.squisq?.step ?? schema.multipleOf ?? (isInt ? 1 : 0.1);
+  const num = asNumber(value);
+  const update = (next) => {
+    const min = schema.minimum ?? schema.exclusiveMinimum;
+    const max = schema.maximum ?? schema.exclusiveMaximum;
+    let clamped = next;
+    if (typeof min === "number") clamped = Math.max(min, clamped);
+    if (typeof max === "number") clamped = Math.min(max, clamped);
+    setAtPath(pointer, isInt ? Math.round(clamped) : clamped);
+  };
+  return /* @__PURE__ */ jsxs("span", { className: "squisq-jf-stepper", children: [
+    /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        className: "squisq-jf-stepper__btn",
+        disabled,
+        onClick: () => update((typeof num === "number" ? num : 0) - step),
+        "aria-label": "Decrease",
+        children: "\u2212"
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      "input",
+      {
+        ...accessibilityProps(props),
+        className: "squisq-jf-stepper__input",
+        type: "number",
+        value: num === "" ? "" : num,
+        step,
+        disabled,
+        onChange: (e) => {
+          if (e.target.value === "") {
+            setAtPath(pointer, void 0);
+            return;
+          }
+          const n = Number(e.target.value);
+          if (Number.isFinite(n)) update(n);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        className: "squisq-jf-stepper__btn",
+        disabled,
+        onClick: () => update((typeof num === "number" ? num : 0) + step),
+        "aria-label": "Increase",
+        children: "+"
+      }
+    )
+  ] });
+}
+function SliderEditor(props) {
+  const { value, schema, pointer, disabled } = props;
+  const { setAtPath } = useJsonEditor();
+  const min = schema.minimum ?? schema.exclusiveMinimum ?? 0;
+  const max = schema.maximum ?? schema.exclusiveMaximum ?? 100;
+  const step = schema.squisq?.step ?? schema.multipleOf ?? (schema.type === "integer" ? 1 : 1);
+  const num = asNumber(value);
+  const display = typeof num === "number" ? num : min;
+  return /* @__PURE__ */ jsxs("span", { className: "squisq-jf-slider-row", children: [
+    /* @__PURE__ */ jsx3(
+      "input",
+      {
+        ...accessibilityProps(props),
+        type: "range",
+        className: "squisq-jf-slider",
+        min,
+        max,
+        step,
+        value: display,
+        disabled,
+        onChange: (e) => setAtPath(pointer, Number(e.target.value))
+      }
+    ),
+    /* @__PURE__ */ jsx3("span", { className: "squisq-jf-slider-readout", children: display })
+  ] });
+}
+function ToggleEditor(props) {
+  const { value, schema, pointer, disabled } = props;
+  const { setAtPath } = useJsonEditor();
+  const on = Boolean(value);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...accessibilityProps(props),
+      type: "button",
+      className: `squisq-jf-toggle${on ? " squisq-jf-toggle--on" : ""}`,
+      disabled,
+      onClick: () => setAtPath(pointer, !on),
+      "aria-pressed": on,
+      children: [
+        /* @__PURE__ */ jsx3("span", { className: "squisq-jf-toggle__track", children: /* @__PURE__ */ jsx3("span", { className: "squisq-jf-toggle__thumb" }) }),
+        /* @__PURE__ */ jsx3("span", { className: "squisq-jf-toggle__label", children: on ? schema.squisq?.label ? `${schema.squisq.label}: On` : "On" : schema.squisq?.label ? `${schema.squisq.label}: Off` : "Off" })
+      ]
+    }
+  );
+}
+function CheckboxEditor(props) {
+  const { value, schema, pointer, disabled } = props;
+  const { setAtPath } = useJsonEditor();
+  const generatedId = useId();
+  const id = props.controlId ?? generatedId;
+  return /* @__PURE__ */ jsxs("label", { htmlFor: id, className: "squisq-jf-toggle", children: [
+    /* @__PURE__ */ jsx3(
+      "input",
+      {
+        "aria-labelledby": props.labelledBy,
+        "aria-describedby": props.describedBy,
+        "aria-invalid": props.invalid || void 0,
+        id,
+        type: "checkbox",
+        checked: Boolean(value),
+        disabled,
+        onChange: (e) => setAtPath(pointer, e.target.checked)
+      }
+    ),
+    schema.squisq?.label ?? schema.title ?? ""
+  ] });
+}
+function enumOptions(schema) {
+  const labels = schema.squisq?.enumLabels;
+  return (schema.enum ?? []).map((v) => ({
+    value: v,
+    label: labels && typeof v === "string" ? labels[v] ?? String(v) : String(v)
+  }));
+}
+function SegmentedEditor(props) {
+  const { value, schema, pointer, disabled } = props;
+  const { setAtPath } = useJsonEditor();
+  const options = enumOptions(schema);
+  return /* @__PURE__ */ jsx3("span", { ...accessibilityProps(props), className: "squisq-jf-segmented", role: "group", children: options.map((opt, i) => {
+    const active = value === opt.value;
+    return /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        className: `squisq-jf-segmented__btn${active ? " squisq-jf-segmented__btn--active" : ""}`,
+        disabled,
+        onClick: () => setAtPath(pointer, opt.value),
+        "aria-pressed": active,
+        children: opt.label
+      },
+      i
+    );
+  }) });
+}
+function RadioEditor(props) {
+  const { value, schema, pointer, disabled } = props;
+  const { setAtPath } = useJsonEditor();
+  const options = enumOptions(schema);
+  const name = useId();
+  return /* @__PURE__ */ jsx3("div", { ...accessibilityProps(props), className: "squisq-jf-radio", role: "radiogroup", children: options.map((opt, i) => {
+    const active = value === opt.value;
+    return /* @__PURE__ */ jsxs("label", { className: "squisq-jf-radio__option", children: [
+      /* @__PURE__ */ jsx3(
+        "input",
+        {
+          type: "radio",
+          name,
+          checked: active,
+          disabled,
+          onChange: () => setAtPath(pointer, opt.value)
+        }
+      ),
+      opt.label
+    ] }, i);
+  }) });
+}
+function ComboboxEditor(props) {
+  const { value, schema, pointer, disabled } = props;
+  const { setAtPath } = useJsonEditor();
+  const options = enumOptions(schema);
+  return /* @__PURE__ */ jsx3(
+    "select",
+    {
+      ...accessibilityProps(props),
+      className: "squisq-jf-select",
+      value: asString(value),
+      disabled,
+      onChange: (e) => {
+        const raw = e.target.value;
+        const matched = options.find((opt) => String(opt.value) === raw);
+        setAtPath(pointer, matched ? matched.value : raw);
+      },
+      children: options.map((opt, i) => /* @__PURE__ */ jsx3("option", { value: String(opt.value), children: opt.label }, i))
+    }
+  );
+}
+function ColorEditor(props) {
+  const { value, pointer, disabled } = props;
+  const { setAtPath } = useJsonEditor();
+  const hex = typeof value === "string" && /^#[0-9a-f]{6}$/i.test(value) ? value : "#000000";
+  return /* @__PURE__ */ jsxs("span", { className: "squisq-jf-color", children: [
+    /* @__PURE__ */ jsx3(
+      "input",
+      {
+        ...accessibilityProps(props),
+        type: "color",
+        className: "squisq-jf-color__input",
+        value: hex,
+        disabled,
+        onChange: (e) => setAtPath(pointer, e.target.value)
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      "input",
+      {
+        type: "text",
+        className: "squisq-jf-input squisq-jf-color__hex",
+        value: asString(value),
+        disabled,
+        onChange: (e) => setAtPath(pointer, e.target.value)
+      }
+    )
+  ] });
+}
+function DateEditor(props) {
+  const { value, schema, pointer, disabled } = props;
+  const { setAtPath } = useJsonEditor();
+  const fmt = schema.format;
+  const inputType = fmt === "time" ? "time" : fmt === "date" ? "date" : "datetime-local";
+  const display = inputType === "datetime-local" && typeof value === "string" && value.includes("T") ? value.replace(/Z$|:\d{2}\.\d+Z?$/, "").slice(0, 16) : asString(value);
+  return /* @__PURE__ */ jsx3(
+    "input",
+    {
+      ...accessibilityProps(props),
+      type: inputType,
+      className: "squisq-jf-input",
+      value: display,
+      disabled,
+      onChange: (e) => setAtPath(pointer, e.target.value)
+    }
+  );
+}
+function GroupEditor(props) {
+  const { value, schema, pointer, disabled, suppressTitle } = props;
+  const title = !suppressTitle ? schema.squisq?.label ?? schema.title : void 0;
+  const help = schema.squisq?.help ?? schema.description;
+  const obj = (value && typeof value === "object" ? value : {}) ?? {};
+  const propEntries = Object.entries(schema.properties ?? {});
+  return /* @__PURE__ */ jsxs("section", { className: "squisq-jf-group", children: [
+    title ? /* @__PURE__ */ jsx3("h3", { className: "squisq-jf-group__title", children: title }) : null,
+    help ? /* @__PURE__ */ jsx3("p", { className: "squisq-jf-group__help", children: help }) : null,
+    propEntries.map(([key, propSchema]) => /* @__PURE__ */ jsx3(
+      RenderNode,
+      {
+        value: obj[key],
+        schema: propSchema,
+        pointer: appendPointer(pointer, key),
+        parentDisabled: disabled
+      },
+      key
+    ))
+  ] });
+}
+function ChipBinEditor({ value, schema, pointer, disabled }) {
+  const { setAtPath } = useJsonEditor();
+  const items = Array.isArray(value) ? value : [];
+  const itemSchema = (Array.isArray(schema.items) ? schema.items[0] : schema.items) ?? {
+    type: "string"
+  };
+  const labels = itemSchema.squisq?.enumLabels;
+  const enumOpts = itemSchema.enum;
+  const [draft, setDraft] = useState("");
+  const remove = (index) => {
+    const next = items.slice();
+    next.splice(index, 1);
+    setAtPath(pointer, next);
+  };
+  const add = (raw) => {
+    if (raw === "") return;
+    const coerced = coerceToSchema(raw, itemSchema);
+    setAtPath(pointer, [...items, coerced]);
+    setDraft("");
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "squisq-jf-chip-bin", children: [
+    items.map((item, i) => {
+      const display = labels && typeof item === "string" ? labels[item] ?? String(item) : String(item);
+      return /* @__PURE__ */ jsxs("span", { className: "squisq-jf-chip", children: [
+        display,
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            className: "squisq-jf-chip__remove",
+            disabled,
+            onClick: () => remove(i),
+            "aria-label": `Remove ${display}`,
+            children: "\xD7"
+          }
+        )
+      ] }, i);
+    }),
+    !disabled && enumOpts && enumOpts.length > 0 ? /* @__PURE__ */ jsxs(
+      "select",
+      {
+        className: "squisq-jf-select",
+        value: "",
+        onChange: (e) => add(e.target.value),
+        style: { width: "auto" },
+        children: [
+          /* @__PURE__ */ jsx3("option", { value: "", disabled: true, children: schema.squisq?.addLabel ?? "+ Add" }),
+          enumOpts.filter((v) => !items.includes(v)).map((v, i) => /* @__PURE__ */ jsx3("option", { value: String(v), children: labels && typeof v === "string" ? labels[v] ?? String(v) : String(v) }, i))
+        ]
+      }
+    ) : !disabled ? /* @__PURE__ */ jsx3(
+      "input",
+      {
+        type: "text",
+        className: "squisq-jf-chip-bin__add-input",
+        placeholder: schema.squisq?.addLabel ?? "+ Add",
+        value: draft,
+        onChange: (e) => setDraft(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === ",") {
+            e.preventDefault();
+            add(draft.trim());
+          }
+        },
+        onBlur: () => add(draft.trim())
+      }
+    ) : null
+  ] });
+}
+function coerceToSchema(raw, schema) {
+  switch (schema.type) {
+    case "integer":
+      return parseInt(raw, 10);
+    case "number":
+      return Number(raw);
+    case "boolean":
+      return raw === "true" || raw === "1";
+    default:
+      return raw;
+  }
+}
+function CardStackEditor({ value, schema, pointer, disabled }) {
+  const { setAtPath } = useJsonEditor();
+  const items = Array.isArray(value) ? value : [];
+  const itemSchema = (Array.isArray(schema.items) ? schema.items[0] : schema.items) ?? {
+    type: "object"
+  };
+  const itemLabel = itemSchema.squisq?.itemLabel;
+  const addLabel = schema.squisq?.addLabel ?? "+ Add";
+  const updateItems = (next) => setAtPath(pointer, next);
+  const addItem = () => updateItems([...items, defaultForSchema(itemSchema)]);
+  const removeItem = (i) => {
+    const next = items.slice();
+    next.splice(i, 1);
+    updateItems(next);
+  };
+  const moveItem = (i, delta) => {
+    const j = i + delta;
+    if (j < 0 || j >= items.length) return;
+    const next = items.slice();
+    [next[i], next[j]] = [next[j], next[i]];
+    updateItems(next);
+  };
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx3("div", { className: "squisq-jf-card-stack", children: items.map((item, i) => {
+      const title = resolveItemTitle(itemLabel, item, i);
+      return /* @__PURE__ */ jsxs("div", { className: "squisq-jf-card", children: [
+        /* @__PURE__ */ jsxs("div", { className: "squisq-jf-card__header", children: [
+          /* @__PURE__ */ jsx3("h4", { className: "squisq-jf-card__title", children: title }),
+          !disabled ? /* @__PURE__ */ jsxs("span", { className: "squisq-jf-card__actions", children: [
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                className: "squisq-jf-icon-btn",
+                onClick: () => moveItem(i, -1),
+                disabled: i === 0,
+                "aria-label": "Move up",
+                title: "Move up",
+                children: "\u2191"
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                className: "squisq-jf-icon-btn",
+                onClick: () => moveItem(i, 1),
+                disabled: i === items.length - 1,
+                "aria-label": "Move down",
+                title: "Move down",
+                children: "\u2193"
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                className: "squisq-jf-icon-btn squisq-jf-icon-btn--danger",
+                onClick: () => removeItem(i),
+                "aria-label": schema.squisq?.removeLabel ?? "Remove",
+                title: schema.squisq?.removeLabel ?? "Remove",
+                children: "\xD7"
+              }
+            )
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ jsx3(
+          RenderNode,
+          {
+            value: item,
+            schema: itemSchema,
+            pointer: `${pointer}/${i}`,
+            parentDisabled: disabled,
+            suppressTopGroupTitle: true
+          }
+        )
+      ] }, i);
+    }) }),
+    !disabled ? /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        className: "squisq-jf-add-btn",
+        onClick: addItem,
+        style: { marginTop: 8 },
+        children: addLabel
+      }
+    ) : null
+  ] });
+}
+function resolveItemTitle(spec, item, index) {
+  if (!spec) return `Item ${index + 1}`;
+  if (typeof spec === "string") return spec;
+  if (item && typeof item === "object") {
+    const v = item[spec.fromField];
+    if (typeof v === "string" && v !== "") return v;
+    if (typeof v === "number") return String(v);
+  }
+  return `Item ${index + 1}`;
+}
+function defaultForSchema(schema) {
+  if (schema.default !== void 0) return schema.default;
+  const t = Array.isArray(schema.type) ? schema.type.find((x) => x !== "null") : schema.type;
+  switch (t) {
+    case "object": {
+      const out = {};
+      for (const [k, v] of Object.entries(schema.properties ?? {})) {
+        out[k] = defaultForSchema(v);
+      }
+      return out;
+    }
+    case "array":
+      return [];
+    case "string":
+      return "";
+    case "number":
+    case "integer":
+      return schema.minimum ?? 0;
+    case "boolean":
+      return false;
+    default:
+      return void 0;
+  }
+}
+function TabsEditor(props) {
+  const { value, schema, pointer, disabled } = props;
+  const tabsId = useId().replace(/:/g, "");
+  const branches = schema.oneOf ?? schema.anyOf ?? [];
+  const initial = pickMatchingBranch(branches, value);
+  const [active, setActive] = useState(initial);
+  useEffect3(() => {
+    setActive(pickMatchingBranch(branches, value));
+  }, [value]);
+  const branch = branches[active];
+  if (!branch) return null;
+  const activateTab = (index) => {
+    const next = (index + branches.length) % branches.length;
+    setActive(next);
+    requestAnimationFrame(() => document.getElementById(`${tabsId}-tab-${next}`)?.focus());
+  };
+  return /* @__PURE__ */ jsxs("div", { ...accessibilityProps(props), children: [
+    /* @__PURE__ */ jsx3("div", { className: "squisq-jf-tabs__strip", role: "tablist", children: branches.map((b, i) => /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        className: `squisq-jf-tabs__tab${i === active ? " squisq-jf-tabs__tab--active" : ""}`,
+        disabled,
+        onClick: () => setActive(i),
+        onKeyDown: (event) => {
+          if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+            event.preventDefault();
+            activateTab(i + 1);
+          } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+            event.preventDefault();
+            activateTab(i - 1);
+          } else if (event.key === "Home") {
+            event.preventDefault();
+            activateTab(0);
+          } else if (event.key === "End") {
+            event.preventDefault();
+            activateTab(branches.length - 1);
+          }
+        },
+        role: "tab",
+        id: `${tabsId}-tab-${i}`,
+        "aria-selected": i === active,
+        "aria-controls": `${tabsId}-panel`,
+        tabIndex: i === active ? 0 : -1,
+        children: b.squisq?.label ?? b.title ?? `Option ${i + 1}`
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsx3("div", { id: `${tabsId}-panel`, role: "tabpanel", "aria-labelledby": `${tabsId}-tab-${active}`, children: /* @__PURE__ */ jsx3(RenderNode, { value, schema: branch, pointer, parentDisabled: disabled }) })
+  ] });
+}
+function pickMatchingBranch(branches, value) {
+  for (let i = 0; i < branches.length; i++) {
+    if (matchesShape(branches[i], value)) return i;
+  }
+  return 0;
+}
+function matchesShape(schema, value) {
+  const t = schema.type;
+  const target = Array.isArray(t) ? t.find((x) => x !== "null") : t;
+  if (!target) return true;
+  switch (target) {
+    case "string":
+      return typeof value === "string";
+    case "number":
+    case "integer":
+      return typeof value === "number";
+    case "boolean":
+      return typeof value === "boolean";
+    case "null":
+      return value === null;
+    case "array":
+      return Array.isArray(value);
+    case "object":
+      return value !== null && typeof value === "object" && !Array.isArray(value);
+    default:
+      return false;
+  }
+}
+var EDITORS = {
+  text: TextEditor,
+  multiline: MultilineEditor,
+  richtext: RichTextEditor,
+  color: ColorEditor,
+  date: DateEditor,
+  time: DateEditor,
+  datetime: DateEditor,
+  slider: SliderEditor,
+  stepper: NumberStepperEditor,
+  segmented: SegmentedEditor,
+  radio: RadioEditor,
+  combobox: ComboboxEditor,
+  toggle: ToggleEditor,
+  checkbox: CheckboxEditor,
+  card: GroupEditor,
+  group: GroupEditor,
+  "card-stack": CardStackEditor,
+  "chip-bin": ChipBinEditor,
+  tabs: TabsEditor
+};
+function isCompositeControl(kind, schema) {
+  if (kind === "group" || kind === "card" || kind === "tabs" || kind === "card-stack") return true;
+  if (kind === "richtext") return true;
+  if (kind === "chip-bin") return arrayItemKind(schema) === "object";
+  return false;
+}
+
+// src/jsonEditor/RenderNode.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function RenderNode(props) {
+  const generatedId = useId2().replace(/:/g, "");
+  const { rootSchema, rootData, errors } = useJsonEditor();
+  const resolved = resolveRef(props.schema, rootSchema) ?? props.schema;
+  if (resolveFlag(resolved.squisq?.hidden, rootData)) return null;
+  const disabled = (props.parentDisabled ?? false) || resolveFlag(resolved.squisq?.disabled, rootData);
+  const kind = chooseControl(resolved);
+  const Editor = EDITORS[kind];
+  const label = resolved.squisq?.label ?? resolved.title;
+  const help = resolved.squisq?.help ?? resolved.description;
+  const fieldErrors = errors.get(props.pointer) ?? [];
+  const controlId = `squisq-json-control-${generatedId}`;
+  const labelId = label ? `${controlId}-label` : void 0;
+  const helpId = help ? `${controlId}-help` : void 0;
+  const errorId = fieldErrors.length > 0 ? `${controlId}-error` : void 0;
+  const describedBy = [helpId, errorId].filter(Boolean).join(" ") || void 0;
+  const editorEl = /* @__PURE__ */ jsx4(
+    Editor,
+    {
+      value: props.value,
+      schema: resolved,
+      pointer: props.pointer,
+      disabled,
+      controlId,
+      labelledBy: labelId,
+      describedBy,
+      invalid: fieldErrors.length > 0,
+      suppressTitle: props.suppressTopGroupTitle
+    }
+  );
+  if (isCompositeControl(kind, resolved)) {
+    return editorEl;
+  }
+  return /* @__PURE__ */ jsxs2("div", { className: `squisq-jf-field${disabled ? " squisq-jf-field--disabled" : ""}`, children: [
+    label ? /* @__PURE__ */ jsx4("label", { id: labelId, htmlFor: controlId, className: "squisq-jf-field__label", children: label }) : null,
+    editorEl,
+    help ? /* @__PURE__ */ jsx4("p", { id: helpId, className: "squisq-jf-field__help", children: help }) : null,
+    fieldErrors.length > 0 ? /* @__PURE__ */ jsx4("p", { id: errorId, className: "squisq-jf-field__error", role: "alert", children: fieldErrors[0].message }) : null
+  ] });
+}
+
+// src/jsonEditor/useJsonEditorTokens.ts
+import { useMemo as useMemo2 } from "react";
+import { buildJsonFormTokens, resolveJsonFormTheme } from "@bendyline/squisq/jsonForm";
+import { useAutoSurface } from "@bendyline/squisq-react";
+function useJsonEditorTokens(theme, surface) {
+  const auto = useAutoSurface(surface === "auto");
+  const effectiveSurface = surface === "auto" ? auto : surface ?? void 0;
+  return useMemo2(() => {
+    const style = buildJsonFormTokens(theme, effectiveSurface, {
+      prefix: "--squisq-jsonform"
+    });
+    return { style, theme: resolveJsonFormTheme(theme, effectiveSurface) };
+  }, [theme, effectiveSurface]);
+}
+
+// src/jsonEditor/JsonEditor.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function JsonEditor(props) {
+  const {
+    schema,
+    value,
+    onChange,
+    theme,
+    surface,
+    density = "comfortable",
+    validate,
+    onValidate,
+    className
+  } = props;
+  const { style } = useJsonEditorTokens(theme, surface);
+  const handleChange = onChange ?? (() => {
+  });
+  const cls = "squisq-jsonform" + (density === "compact" ? " squisq-jsonform--compact" : "") + (className ? ` ${className}` : "");
+  return /* @__PURE__ */ jsx5("div", { className: cls, style, children: /* @__PURE__ */ jsx5(
+    JsonEditorProvider,
+    {
+      rootSchema: schema,
+      rootData: value,
+      onRootChange: handleChange,
+      density,
+      validate,
+      onValidate,
+      children: /* @__PURE__ */ jsx5(RenderNode, { value, schema, pointer: "", parentDisabled: !onChange })
+    }
+  ) });
+}
+
+export {
+  JsonEditor
+};