@powerduck/schema-designer 0.1.0

package/dist/chunk-O6PTRJQ5.js

@@ -0,0 +1,1195 @@
+import { SettingsPanel, InlineSchemaEditor } from './chunk-2XUQB6BQ.js';
+import { schemaTypeOf, typeLabel, isPlainObject, verifyExternalSchema, cloneSchema, safeRun, flattenSchema, isValidKey, getIn, renameKey, setIn, requiredOwnerPath, renameRequired, remapExpanded, patchSchema, changeSchemaType, pruneExpanded, setRequired, deleteIn, uniqueKey, insertKeyAfter, defaultSchemaFor, reorderKeys, samePath } from './chunk-HI5FBHCO.js';
+import { VscSettingsCompact, VscTrash } from 'react-icons/vsc';
+import * as React from 'react';
+import { Input, createListCollection, Box, Button, Text, Select, Portal, Span, IconButton, Icon, Popover, Menu } from '@chakra-ui/react';
+import { LuLink2 } from 'react-icons/lu';
+import { BiGridVertical } from 'react-icons/bi';
+import { MdAdd } from 'react-icons/md';
+import { FaStarOfLife } from 'react-icons/fa6';
+import { FiChevronRight } from 'react-icons/fi';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/react/schemaTreeEditor/libs/types.ts
+var SCHEMA_TYPES = [
+  "string",
+  "number",
+  "integer",
+  "boolean",
+  "object",
+  "array",
+  "null"
+];
+
+// src/react/schemaTreeEditor/SchemaTreeEditor.module.css
+var SchemaTreeEditor_default = {
+  nameInput: "SchemaTreeEditor_nameInput",
+  descriptionInput: "SchemaTreeEditor_descriptionInput",
+  typeSelect: "SchemaTreeEditor_typeSelect",
+  root: "SchemaTreeEditor_root",
+  toolbar: "SchemaTreeEditor_toolbar",
+  toolbarTitle: "SchemaTreeEditor_toolbarTitle",
+  toolbarMeta: "SchemaTreeEditor_toolbarMeta",
+  toolbarSpacer: "SchemaTreeEditor_toolbarSpacer",
+  ghostButton: "SchemaTreeEditor_ghostButton",
+  header: "SchemaTreeEditor_header",
+  row: "SchemaTreeEditor_row",
+  headerCell: "SchemaTreeEditor_headerCell",
+  list: "SchemaTreeEditor_list",
+  requiredToggle: "SchemaTreeEditor_requiredToggle",
+  dropLine: "SchemaTreeEditor_dropLine",
+  grip: "SchemaTreeEditor_grip",
+  gripPlaceholder: "SchemaTreeEditor_gripPlaceholder",
+  nameCell: "SchemaTreeEditor_nameCell",
+  chevron: "SchemaTreeEditor_chevron",
+  chevronPlaceholder: "SchemaTreeEditor_chevronPlaceholder",
+  inputRejected: "SchemaTreeEditor_inputRejected",
+  refBadge: "SchemaTreeEditor_refBadge",
+  refBadgeIcon: "SchemaTreeEditor_refBadgeIcon",
+  refBadgeText: "SchemaTreeEditor_refBadgeText",
+  recursiveBadge: "SchemaTreeEditor_recursiveBadge",
+  recursiveBadgeText: "SchemaTreeEditor_recursiveBadgeText",
+  typeCell: "SchemaTreeEditor_typeCell",
+  typeSelectContent: "SchemaTreeEditor_typeSelectContent",
+  typeSelectItem: "SchemaTreeEditor_typeSelectItem",
+  typeSelectOption: "SchemaTreeEditor_typeSelectOption",
+  typeStatic: "SchemaTreeEditor_typeStatic",
+  requiredCell: "SchemaTreeEditor_requiredCell",
+  descriptionCell: "SchemaTreeEditor_descriptionCell",
+  actions: "SchemaTreeEditor_actions",
+  iconButton: "SchemaTreeEditor_iconButton",
+  dangerArmed: "SchemaTreeEditor_dangerArmed",
+  menu: "SchemaTreeEditor_menu",
+  empty: "SchemaTreeEditor_empty",
+  emptyTitle: "SchemaTreeEditor_emptyTitle",
+  emptyHint: "SchemaTreeEditor_emptyHint",
+  notice: "SchemaTreeEditor_notice",
+  noticeText: "SchemaTreeEditor_noticeText",
+  fallback: "SchemaTreeEditor_fallback",
+  fallbackTitle: "SchemaTreeEditor_fallbackTitle",
+  fallbackMessage: "SchemaTreeEditor_fallbackMessage",
+  referenceGroup: "SchemaTreeEditor_referenceGroup",
+  tableViewport: "SchemaTreeEditor_tableViewport"
+};
+var INDENT_STEP = 14;
+var DEFAULT_MAX_ROWS = 5e3;
+var CONFIRM_TIMEOUT = 2600;
+var REJECT_FLASH = 900;
+var SchemaErrorBoundary = class extends React.Component {
+  state = { failed: false, message: "", retryKey: 0 };
+  static getDerivedStateFromError(error) {
+    return {
+      failed: true,
+      message: error instanceof Error ? error.message : String(error),
+      retryKey: 0
+    };
+  }
+  componentDidCatch(error) {
+    try {
+      this.props.onError?.({
+        scope: "render",
+        message: error instanceof Error ? error.message : String(error),
+        cause: error
+      });
+    } catch {
+    }
+  }
+  handleRetry = () => {
+    this.setState((state) => ({
+      failed: false,
+      message: "",
+      retryKey: state.retryKey + 1
+    }));
+  };
+  render() {
+    if (!this.state.failed) {
+      return /* @__PURE__ */ jsx(React.Fragment, { children: this.props.children }, this.state.retryKey);
+    }
+    return /* @__PURE__ */ jsxs(Box, { className: SchemaTreeEditor_default.fallback, role: "alert", children: [
+      /* @__PURE__ */ jsx(Text, { className: SchemaTreeEditor_default.fallbackTitle, children: "Schema view stopped responding" }),
+      /* @__PURE__ */ jsx(Text, { className: SchemaTreeEditor_default.fallbackMessage, children: this.state.message }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          className: SchemaTreeEditor_default.ghostButton,
+          onClick: this.handleRetry,
+          size: "xs",
+          children: "Reload view"
+        }
+      )
+    ] });
+  }
+};
+var BufferedInput = React.memo(
+  ({
+    value,
+    placeholder,
+    className,
+    disabled,
+    invalidHint,
+    ariaLabel,
+    onCommit
+  }) => {
+    const [sync, setSync] = React.useState(() => ({
+      draft: value,
+      external: value
+    }));
+    const [rejected, setRejected] = React.useState(false);
+    const focused = React.useRef(false);
+    const cancelCommit = React.useRef(false);
+    const rejectTimer = React.useRef(null);
+    const focusExternal = React.useRef(value);
+    React.useEffect(() => {
+      if (focused.current) return;
+      setSync(
+        (current) => current.draft === value && current.external === value ? current : { draft: value, external: value }
+      );
+    }, [value]);
+    React.useEffect(
+      () => () => {
+        if (rejectTimer.current !== null) {
+          window.clearTimeout(rejectTimer.current);
+          rejectTimer.current = null;
+        }
+      },
+      []
+    );
+    const flashRejected = React.useCallback(() => {
+      setRejected(true);
+      if (rejectTimer.current !== null)
+        window.clearTimeout(rejectTimer.current);
+      rejectTimer.current = window.setTimeout(() => {
+        rejectTimer.current = null;
+        setRejected(false);
+      }, REJECT_FLASH);
+    }, []);
+    const handleFocus = React.useCallback(() => {
+      focused.current = true;
+      focusExternal.current = value;
+    }, [value]);
+    const handleBlur = React.useCallback(() => {
+      focused.current = false;
+      if (cancelCommit.current || disabled) {
+        cancelCommit.current = false;
+        setSync({ draft: value, external: value });
+        return;
+      }
+      if (focusExternal.current !== value) {
+        setSync({ draft: value, external: value });
+        return;
+      }
+      if (sync.draft === value) {
+        setSync({ draft: value, external: value });
+        return;
+      }
+      const accepted = onCommit(sync.draft);
+      if (accepted === false) {
+        setSync({ draft: value, external: value });
+        flashRejected();
+      } else {
+        setSync({ draft: sync.draft, external: value });
+      }
+    }, [sync.draft, value, onCommit, flashRejected, disabled]);
+    const handleChange = React.useCallback(
+      (event) => {
+        const draft = event.target.value;
+        setSync((current) => ({ ...current, draft }));
+      },
+      []
+    );
+    const handleKeyDown = React.useCallback(
+      (event) => {
+        if (event.nativeEvent.isComposing) return;
+        if (event.key === "Enter") {
+          event.preventDefault();
+          event.currentTarget.blur();
+        } else if (event.key === "Escape") {
+          event.preventDefault();
+          cancelCommit.current = true;
+          setSync({ draft: value, external: value });
+          event.stopPropagation();
+          event.currentTarget.blur();
+        }
+      },
+      [value]
+    );
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        className: [className, rejected ? SchemaTreeEditor_default.inputRejected : null].filter(Boolean).join(" "),
+        value: sync.draft,
+        placeholder,
+        disabled,
+        "aria-label": ariaLabel,
+        "aria-invalid": rejected || void 0,
+        title: rejected ? invalidHint : void 0,
+        spellCheck: false,
+        autoComplete: "off",
+        onFocus: handleFocus,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        onKeyDown: handleKeyDown,
+        onMouseDown: (event) => event.stopPropagation()
+      }
+    );
+  }
+);
+BufferedInput.displayName = "BufferedInput";
+var schemaTypeOptions = createListCollection({
+  items: SCHEMA_TYPES.map((t) => ({ label: t, value: t }))
+});
+var SchemaRow = React.memo(
+  ({ node, index, handlers }) => {
+    const [armed, setArmed] = React.useState(false);
+    const [draggable, setDraggable] = React.useState(false);
+    const confirmTimer = React.useRef(null);
+    const clearConfirmTimer = React.useCallback(() => {
+      if (confirmTimer.current !== null) {
+        window.clearTimeout(confirmTimer.current);
+        confirmTimer.current = null;
+      }
+    }, []);
+    React.useEffect(() => clearConfirmTimer, [clearConfirmTimer]);
+    const disarm = React.useCallback(() => {
+      clearConfirmTimer();
+      setArmed(false);
+    }, [clearConfirmTimer]);
+    React.useEffect(() => {
+      if (!armed) return;
+      const cancel = () => setArmed(false);
+      window.addEventListener("scroll", cancel, {
+        passive: true,
+        capture: true
+      });
+      window.addEventListener("resize", cancel);
+      window.addEventListener("blur", cancel);
+      document.addEventListener("visibilitychange", cancel);
+      return () => {
+        window.removeEventListener("scroll", cancel, {
+          capture: true
+        });
+        window.removeEventListener("resize", cancel);
+        window.removeEventListener("blur", cancel);
+        document.removeEventListener("visibilitychange", cancel);
+      };
+    }, [armed]);
+    const handleDeleteClick = React.useCallback(() => {
+      if (!armed) {
+        setArmed(true);
+        clearConfirmTimer();
+        confirmTimer.current = window.setTimeout(() => {
+          confirmTimer.current = null;
+          setArmed(false);
+        }, CONFIRM_TIMEOUT);
+        return;
+      }
+      disarm();
+      handlers.onDelete(node);
+    }, [armed, clearConfirmTimer, disarm, handlers, node]);
+    const rowEditable = handlers.editable && !node.readOnly;
+    const resolvedType = schemaTypeOf(node.resolved);
+    const canAddChild = rowEditable && resolvedType === "object" && !node.schema.$ref;
+    const handleRowKeyDown = React.useCallback(
+      (event) => {
+        if (!node.sortable || !rowEditable) return;
+        if (!event.metaKey && !event.ctrlKey) return;
+        if (event.key === "ArrowUp") {
+          event.preventDefault();
+          handlers.onKeyboardMove(node, -1);
+        } else if (event.key === "ArrowDown") {
+          event.preventDefault();
+          handlers.onKeyboardMove(node, 1);
+        }
+      },
+      [handlers, node, rowEditable]
+    );
+    const description = typeof node.resolved.description === "string" ? node.resolved.description : "";
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        className: SchemaTreeEditor_default.row,
+        style: { ["--row-depth"]: node.depth },
+        "data-ref-segment": node.refSegment,
+        "data-readonly": node.readOnly || void 0,
+        "data-required": node.required || void 0,
+        draggable: draggable || void 0,
+        "data-dragging": draggable || void 0,
+        onKeyDown: handleRowKeyDown,
+        onDragStart: (event) => handlers.onDragStart(node, index, event),
+        onDragOver: (event) => handlers.onDragOver(node, index, event),
+        onDrop: (event) => handlers.onDrop(node, index, event),
+        onDragEnd: () => setDraggable(false),
+        onMouseLeave: disarm,
+        role: "row",
+        children: [
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              className: SchemaTreeEditor_default.nameCell,
+              role: "cell",
+              style: { paddingLeft: node.depth * INDENT_STEP },
+              children: [
+                node.sortable && rowEditable ? /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    className: SchemaTreeEditor_default.grip,
+                    "aria-label": `Reorder ${node.key}`,
+                    title: "Drag to reorder, or Ctrl/Cmd with the arrow keys",
+                    role: "button",
+                    tabIndex: -1,
+                    onMouseDown: () => setDraggable(true),
+                    onMouseUp: () => setDraggable(false),
+                    children: /* @__PURE__ */ jsx(BiGridVertical, {})
+                  }
+                ) : /* @__PURE__ */ jsx(Box, { className: SchemaTreeEditor_default.gripPlaceholder }),
+                node.expandable ? /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    className: SchemaTreeEditor_default.chevron,
+                    "data-expanded": node.expanded || void 0,
+                    "aria-expanded": node.expanded,
+                    "aria-label": node.expanded ? `Collapse ${node.key}` : `Expand ${node.key}`,
+                    onClick: () => handlers.onToggle(node),
+                    size: "xs",
+                    variant: "ghost",
+                    children: /* @__PURE__ */ jsx(FiChevronRight, {})
+                  }
+                ) : /* @__PURE__ */ jsx(Box, { className: SchemaTreeEditor_default.chevronPlaceholder }),
+                /* @__PURE__ */ jsx(
+                  BufferedInput,
+                  {
+                    className: SchemaTreeEditor_default.nameInput,
+                    value: node.key,
+                    ariaLabel: "Field name",
+                    placeholder: "fieldName",
+                    disabled: !rowEditable || node.kind !== "property",
+                    invalidHint: "Name is invalid or already used",
+                    onCommit: (next) => handlers.onRename(node, next)
+                  }
+                ),
+                node.refName ? /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    className: SchemaTreeEditor_default.refBadge,
+                    title: `Reference: ${node.refName}`,
+                    children: [
+                      /* @__PURE__ */ jsx(LuLink2, { className: SchemaTreeEditor_default.refBadgeIcon, strokeWidth: 1.5 }),
+                      /* @__PURE__ */ jsx(Text, { className: SchemaTreeEditor_default.refBadgeText, children: node.refName })
+                    ]
+                  }
+                ) : null,
+                node.recursive ? /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    className: SchemaTreeEditor_default.recursiveBadge,
+                    title: "Recursive reference, expansion stopped",
+                    children: /* @__PURE__ */ jsx(Text, { className: SchemaTreeEditor_default.recursiveBadgeText, children: "recursive" })
+                  }
+                ) : null
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Box, { role: "cell", className: SchemaTreeEditor_default.typeCell, children: typeof node.resolvedValue === "boolean" ? /* @__PURE__ */ jsx(Text, { className: SchemaTreeEditor_default.typeStatic, children: node.resolvedValue ? "Any value" : "Never" }) : rowEditable ? /* @__PURE__ */ jsxs(
+            Select.Root,
+            {
+              collection: schemaTypeOptions,
+              size: "xs",
+              multiple: false,
+              className: SchemaTreeEditor_default.typeSelect,
+              value: [resolvedType],
+              onValueChange: (details) => {
+                const nextType = details.value[0];
+                if (!nextType || !SCHEMA_TYPES.includes(nextType)) {
+                  return;
+                }
+                handlers.onType(node, nextType);
+              },
+              children: [
+                /* @__PURE__ */ jsx(Select.HiddenSelect, {}),
+                /* @__PURE__ */ jsxs(Select.Control, { children: [
+                  /* @__PURE__ */ jsx(Select.Trigger, { className: `${SchemaTreeEditor_default.typeSelectItem}`, children: /* @__PURE__ */ jsx(
+                    Select.ValueText,
+                    {
+                      className: `${SchemaTreeEditor_default.typeSelectOption}`,
+                      placeholder: "Select a schema type"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(Select.IndicatorGroup, { children: /* @__PURE__ */ jsx(Select.Indicator, {}) })
+                ] }),
+                /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, { children: /* @__PURE__ */ jsx(Select.Content, { className: SchemaTreeEditor_default.typeSelectContent, children: schemaTypeOptions.items.map((item) => /* @__PURE__ */ jsxs(
+                  Select.Item,
+                  {
+                    "aria-label": "Field type",
+                    item,
+                    children: [
+                      /* @__PURE__ */ jsx(Span, { className: `${SchemaTreeEditor_default.typeSelectOption}`, children: item.label }),
+                      /* @__PURE__ */ jsx(Select.ItemIndicator, {})
+                    ]
+                  },
+                  item.value
+                )) }) }) })
+              ]
+            }
+          ) : /* @__PURE__ */ jsx(Text, { className: SchemaTreeEditor_default.typeStatic, children: typeLabel(node.resolved) }) }),
+          /* @__PURE__ */ jsx(Box, { role: "cell", className: SchemaTreeEditor_default.requiredCell, children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              className: `${SchemaTreeEditor_default.requiredToggle} ${node.required ? "required" : ""}`,
+              "data-on": node.required || void 0,
+              "aria-pressed": node.required,
+              "aria-label": node.required ? "Required, click to make optional" : "Optional, click to make required",
+              title: node.required ? "Required" : "Optional",
+              disabled: !rowEditable || node.kind !== "property",
+              onClick: () => handlers.onRequired(node, !node.required),
+              size: "xs",
+              variant: "ghost",
+              children: /* @__PURE__ */ jsx(Icon, { size: "xs", children: node.required ? /* @__PURE__ */ jsx(FaStarOfLife, {}) : /* @__PURE__ */ jsx(FaStarOfLife, {}) })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Box, { role: "cell", className: SchemaTreeEditor_default.descriptionCell, children: /* @__PURE__ */ jsx(
+            BufferedInput,
+            {
+              className: SchemaTreeEditor_default.descriptionInput,
+              value: description,
+              ariaLabel: "Field description",
+              placeholder: typeof node.value === "boolean" ? "Boolean schema" : "Describe this field",
+              disabled: !rowEditable || typeof node.value === "boolean",
+              onCommit: (next) => handlers.onDescription(node, next)
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(Box, { role: "cell", className: SchemaTreeEditor_default.actions, children: [
+            handlers.renderAdvanced ? /* @__PURE__ */ jsxs(
+              Popover.Root,
+              {
+                positioning: {
+                  placement: "bottom-end",
+                  strategy: "fixed",
+                  overflowPadding: 12
+                },
+                lazyMount: true,
+                unmountOnExit: true,
+                children: [
+                  /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      className: SchemaTreeEditor_default.iconButton,
+                      "aria-label": "Advanced settings",
+                      title: "Advanced settings",
+                      size: "xs",
+                      variant: "ghost",
+                      children: /* @__PURE__ */ jsx(VscSettingsCompact, { size: 16 })
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, { children: /* @__PURE__ */ jsx(SettingsPanel, { title: node.key, children: handlers.renderAdvanced({
+                    required: node.required,
+                    onRequiredChange: node.kind === "property" ? (value) => handlers.onRequired(node, value) : void 0,
+                    nested: node.depth > 0,
+                    schema: node.readOnly ? node.resolvedValue : node.value,
+                    schemaName: node.key,
+                    fullSchema: handlers.rootSchema,
+                    path: node.path,
+                    readOnly: !rowEditable,
+                    // Overwritten by the owner's row binding.
+                    update: () => void 0
+                  }) }) }) })
+                ]
+              }
+            ) : null,
+            rowEditable ? /* @__PURE__ */ jsxs(
+              Menu.Root,
+              {
+                positioning: {
+                  placement: "bottom-end",
+                  strategy: "fixed",
+                  overflowPadding: 12
+                },
+                lazyMount: true,
+                unmountOnExit: true,
+                children: [
+                  /* @__PURE__ */ jsx(Menu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      className: SchemaTreeEditor_default.iconButton,
+                      "aria-label": "Add field",
+                      title: "Add field",
+                      size: "xs",
+                      variant: "ghost",
+                      children: /* @__PURE__ */ jsx(MdAdd, {})
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { children: /* @__PURE__ */ jsxs(Menu.Content, { className: SchemaTreeEditor_default.menu, children: [
+                    /* @__PURE__ */ jsx(
+                      Menu.Item,
+                      {
+                        value: "sibling",
+                        disabled: node.kind !== "property",
+                        onSelect: () => handlers.onAdd(node, "sibling"),
+                        children: "Add field below"
+                      }
+                    ),
+                    canAddChild ? /* @__PURE__ */ jsx(
+                      Menu.Item,
+                      {
+                        value: "child",
+                        onSelect: () => handlers.onAdd(node, "child"),
+                        children: "Add nested field"
+                      }
+                    ) : null
+                  ] }) }) })
+                ]
+              }
+            ) : null,
+            rowEditable && node.kind !== "root" ? /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                className: [SchemaTreeEditor_default.iconButton, armed ? SchemaTreeEditor_default.dangerArmed : null].filter(Boolean).join(" "),
+                "aria-label": armed ? `Confirm delete ${node.key}` : `Delete ${node.key}`,
+                title: armed ? "Click again to confirm" : "Delete field",
+                onClick: handleDeleteClick,
+                size: "xs",
+                variant: "ghost",
+                children: /* @__PURE__ */ jsx(VscTrash, {})
+              }
+            ) : null
+          ] })
+        ]
+      }
+    );
+  }
+);
+var MemoRow = React.memo(SchemaRow, (prev, next) => {
+  const a = prev.node;
+  const b = next.node;
+  return a.id === b.id && a.key === b.key && a.schema === b.schema && a.resolved === b.resolved && a.required === b.required && a.expanded === b.expanded && a.expandable === b.expandable && a.depth === b.depth && a.refSegment === b.refSegment && a.readOnly === b.readOnly && a.sortable === b.sortable && a.recursive === b.recursive && prev.index === next.index && prev.handlers === next.handlers;
+});
+MemoRow.displayName = "SchemaRow";
+var IDLE_DRAG = Object.freeze({
+  active: false,
+  key: null,
+  ownerPath: null,
+  overIndex: null,
+  usedDataTransfer: false
+});
+var SchemaTreeEditorInner = React.memo(
+  ({
+    schema,
+    onChange,
+    className,
+    showType = true,
+    showRequired = false,
+    showDescription = false,
+    readOnly = false,
+    defaultExpanded,
+    maxRows = DEFAULT_MAX_ROWS,
+    renderAdvanced = defaultAdvancedEditor,
+    document: referenceDocument,
+    onError,
+    strictExternalSchema = true
+  }) => {
+    const reportError = React.useCallback(
+      (error) => {
+        try {
+          onError?.(error);
+        } catch {
+        }
+      },
+      [onError]
+    );
+    const signatureRef = React.useRef("");
+    const previousSchemaRef = React.useRef(void 0);
+    const safeSchema = React.useMemo(() => {
+      if (!strictExternalSchema) {
+        return isPlainObject(schema) ? schema : {};
+      }
+      const check = verifyExternalSchema(
+        schema,
+        previousSchemaRef.current,
+        signatureRef.current,
+        reportError
+      );
+      signatureRef.current = check.signature;
+      previousSchemaRef.current = check.schema;
+      if (check.mutated) {
+        reportError({
+          scope: "commit",
+          message: "schema prop was mutated in place, rebuilding the tree"
+        });
+        return cloneSchema(check.schema);
+      }
+      return check.schema;
+    }, [schema, strictExternalSchema, reportError]);
+    const [expanded, setExpanded] = React.useState(
+      () => new Set(defaultExpanded ?? [])
+    );
+    const dragRef = React.useRef(IDLE_DRAG);
+    const [dropLine, setDropLine] = React.useState(null);
+    const rafRef = React.useRef(null);
+    const cancelRaf = React.useCallback(() => {
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    }, []);
+    const resetDrag = React.useCallback(() => {
+      cancelRaf();
+      if (dragRef.current !== IDLE_DRAG) dragRef.current = IDLE_DRAG;
+      setDropLine((current) => current === null ? current : null);
+    }, [cancelRaf]);
+    const scheduleDropLine = React.useCallback((index) => {
+      if (rafRef.current !== null) return;
+      rafRef.current = requestAnimationFrame(() => {
+        rafRef.current = null;
+        setDropLine((current) => current === index ? current : index);
+      });
+    }, []);
+    React.useEffect(() => {
+      const abort = () => resetDrag();
+      const onKeyDown = (event) => {
+        if (event.key === "Escape") resetDrag();
+      };
+      const onVisibility = () => {
+        if (document.visibilityState === "hidden") resetDrag();
+      };
+      document.addEventListener("dragend", abort);
+      document.addEventListener("keydown", onKeyDown);
+      document.addEventListener("visibilitychange", onVisibility);
+      window.addEventListener("blur", abort);
+      return () => {
+        document.removeEventListener("dragend", abort);
+        document.removeEventListener("keydown", onKeyDown);
+        document.removeEventListener("visibilitychange", onVisibility);
+        window.removeEventListener("blur", abort);
+        cancelRaf();
+      };
+    }, [resetDrag, cancelRaf]);
+    const commit = React.useCallback(
+      (next) => {
+        if (readOnly || next === safeSchema) return;
+        safeRun(
+          "commit",
+          () => {
+            previousSchemaRef.current = next;
+            onChange(next);
+          },
+          void 0,
+          reportError
+        );
+      },
+      [onChange, safeSchema, reportError, readOnly]
+    );
+    const { nodes, overflow } = React.useMemo(
+      () => flattenSchema({
+        root: safeSchema,
+        document: referenceDocument,
+        expanded,
+        maxRows,
+        onError: reportError
+      }),
+      [safeSchema, referenceDocument, expanded, maxRows, reportError]
+    );
+    const rowGroups = React.useMemo(() => {
+      const groups = [];
+      nodes.forEach((node, index) => {
+        const last = groups[groups.length - 1];
+        if (last?.reference && node.depth > last.depth && node.refSegment !== "none") {
+          last.rows.push({ node, index });
+        } else {
+          groups.push({
+            id: node.id,
+            reference: !!node.refName,
+            depth: node.depth,
+            rows: [{ node, index }]
+          });
+        }
+      });
+      return groups;
+    }, [nodes]);
+    const propertyCount = React.useMemo(
+      () => isPlainObject(safeSchema.properties) ? Object.keys(safeSchema.properties).length : 0,
+      [safeSchema]
+    );
+    const editable = !readOnly;
+    const handleToggle = React.useCallback((node) => {
+      setExpanded((current) => {
+        const next = new Set(current);
+        if (next.has(node.id)) next.delete(node.id);
+        else next.add(node.id);
+        return next;
+      });
+    }, []);
+    const handleRename = React.useCallback(
+      (node, raw) => {
+        const nextKey = raw.trim();
+        if (!nextKey || nextKey === node.key) return nextKey === node.key;
+        if (!isValidKey(nextKey)) return false;
+        const owner = getIn(safeSchema, node.parentPath);
+        if (!isPlainObject(owner)) return false;
+        if (Object.prototype.hasOwnProperty.call(owner, nextKey)) return false;
+        const renamed = renameKey(owner, node.key, nextKey);
+        if (renamed === owner) return false;
+        let next = setIn(safeSchema, node.parentPath, renamed);
+        const ownerPath = requiredOwnerPath(node.parentPath);
+        if (ownerPath)
+          next = renameRequired(next, ownerPath, node.key, nextKey);
+        setExpanded(
+          (current) => remapExpanded(current, node.path, [...node.parentPath, nextKey])
+        );
+        commit(next);
+        return true;
+      },
+      [safeSchema, commit]
+    );
+    const handleDescription = React.useCallback(
+      (node, raw) => {
+        const value = raw.trim();
+        commit(
+          patchSchema(safeSchema, node.path, {
+            description: value || void 0
+          })
+        );
+      },
+      [safeSchema, commit]
+    );
+    const handleType = React.useCallback(
+      (node, nextType) => {
+        if (typeof node.value !== "boolean" && schemaTypeOf(node.resolved) === nextType)
+          return;
+        const current = isPlainObject(node.schema) ? node.schema : {};
+        const next = changeSchemaType(current, nextType);
+        setExpanded((existing) => pruneExpanded(existing, node.path));
+        commit(setIn(safeSchema, node.path, next));
+      },
+      [safeSchema, commit]
+    );
+    const handleRequired = React.useCallback(
+      (node, nextRequired) => {
+        const ownerPath = requiredOwnerPath(node.parentPath);
+        if (!ownerPath) return;
+        commit(setRequired(safeSchema, ownerPath, node.key, nextRequired));
+      },
+      [safeSchema, commit]
+    );
+    const handleDelete = React.useCallback(
+      (node) => {
+        let next = deleteIn(safeSchema, node.path);
+        if (readOnly || next === safeSchema) return;
+        const ownerPath = requiredOwnerPath(node.parentPath);
+        if (ownerPath) next = setRequired(next, ownerPath, node.key, false);
+        setExpanded((current) => pruneExpanded(current, node.path));
+        commit(next);
+      },
+      [safeSchema, commit]
+    );
+    const handleAdd = React.useCallback(
+      (node, mode) => {
+        if (mode === "child") {
+          const owner2 = getIn(safeSchema, [...node.path, "properties"]);
+          const container2 = isPlainObject(owner2) ? owner2 : {};
+          const key2 = uniqueKey(container2, "newField");
+          const nextProps2 = insertKeyAfter(
+            container2,
+            null,
+            key2,
+            defaultSchemaFor("string")
+          );
+          const next = setIn(safeSchema, node.path, {
+            ...isPlainObject(node.schema) ? node.schema : {},
+            type: "object",
+            properties: nextProps2
+          });
+          setExpanded((current) => new Set(current).add(node.id));
+          commit(next);
+          return;
+        }
+        const owner = getIn(safeSchema, node.parentPath);
+        const container = isPlainObject(owner) ? owner : {};
+        const key = uniqueKey(container, "newField");
+        const nextProps = insertKeyAfter(
+          container,
+          node.key,
+          key,
+          defaultSchemaFor("string")
+        );
+        commit(setIn(safeSchema, node.parentPath, nextProps));
+      },
+      [safeSchema, commit]
+    );
+    const moveKey = React.useCallback(
+      (ownerPath, key, targetIndex) => {
+        safeRun(
+          "reorder",
+          () => {
+            const owner = getIn(safeSchema, ownerPath);
+            if (!isPlainObject(owner)) return;
+            const reordered = reorderKeys(owner, key, targetIndex);
+            if (reordered === owner) return;
+            commit(setIn(safeSchema, ownerPath, reordered));
+          },
+          void 0,
+          reportError,
+          ownerPath
+        );
+      },
+      [safeSchema, commit, reportError]
+    );
+    const handleDragStart = React.useCallback(
+      (node, index, event) => {
+        if (!node.sortable || !editable) {
+          event.preventDefault();
+          return;
+        }
+        let usedDataTransfer = false;
+        try {
+          event.dataTransfer.effectAllowed = "move";
+          event.dataTransfer.setData("text/plain", node.key);
+          usedDataTransfer = true;
+        } catch {
+          usedDataTransfer = false;
+        }
+        dragRef.current = {
+          active: true,
+          key: node.key,
+          ownerPath: node.parentPath,
+          overIndex: index,
+          usedDataTransfer
+        };
+      },
+      [editable]
+    );
+    const handleDragOver = React.useCallback(
+      (node, index, event) => {
+        const drag = dragRef.current;
+        if (!drag.active || !drag.ownerPath) return;
+        if (!samePath(node.parentPath, drag.ownerPath)) return;
+        event.preventDefault();
+        event.dataTransfer.dropEffect = "move";
+        if (drag.overIndex !== index) drag.overIndex = index;
+        scheduleDropLine(index);
+      },
+      [scheduleDropLine]
+    );
+    const handleDrop = React.useCallback(
+      (node, _index, event) => {
+        const drag = dragRef.current;
+        if (!drag.active || !drag.ownerPath || !drag.key) {
+          resetDrag();
+          return;
+        }
+        event.preventDefault();
+        const ownerPath = drag.ownerPath;
+        const movingKey = drag.key;
+        resetDrag();
+        if (!samePath(node.parentPath, ownerPath)) return;
+        const owner = getIn(safeSchema, ownerPath);
+        if (!isPlainObject(owner)) return;
+        const targetIndex = Object.keys(owner).indexOf(node.key);
+        if (targetIndex < 0) return;
+        moveKey(ownerPath, movingKey, targetIndex);
+      },
+      [safeSchema, moveKey, resetDrag]
+    );
+    const handleKeyboardMove = React.useCallback(
+      (node, delta) => {
+        const owner = getIn(safeSchema, node.parentPath);
+        if (!isPlainObject(owner)) return;
+        const from = Object.keys(owner).indexOf(node.key);
+        if (from < 0) return;
+        moveKey(node.parentPath, node.key, from + delta);
+      },
+      [safeSchema, moveKey]
+    );
+    const handleAdvancedUpdate = React.useCallback(
+      (node, next) => {
+        if (typeof next !== "boolean" && !isPlainObject(next)) {
+          reportError({
+            scope: "commit",
+            message: "advanced editor returned a non-object schema",
+            path: node.path
+          });
+          return;
+        }
+        commit(setIn(safeSchema, node.path, next));
+      },
+      [safeSchema, commit, reportError]
+    );
+    const handleAddRoot = React.useCallback(() => {
+      const owner = isPlainObject(safeSchema.properties) ? safeSchema.properties : {};
+      const key = uniqueKey(owner, "newField");
+      const nextProps = insertKeyAfter(
+        owner,
+        null,
+        key,
+        defaultSchemaFor("string")
+      );
+      commit({ ...safeSchema, type: "object", properties: nextProps });
+    }, [safeSchema, commit]);
+    const handleToggleAll = React.useCallback(() => {
+      if (expanded.size > 0) {
+        setExpanded(/* @__PURE__ */ new Set());
+        return;
+      }
+      const result = flattenSchema({
+        root: safeSchema,
+        document: referenceDocument,
+        expanded: /* @__PURE__ */ new Set(),
+        expandAll: true,
+        maxRows,
+        onError: reportError
+      });
+      setExpanded(
+        new Set(
+          result.nodes.filter((node) => node.expandable).map((node) => node.id)
+        )
+      );
+    }, [expanded.size, safeSchema, referenceDocument, maxRows, reportError]);
+    const handlers = React.useMemo(
+      () => ({
+        onToggle: handleToggle,
+        onRename: handleRename,
+        onDescription: handleDescription,
+        onType: handleType,
+        onRequired: handleRequired,
+        onDelete: handleDelete,
+        onAdd: handleAdd,
+        onDragStart: handleDragStart,
+        onDragOver: handleDragOver,
+        onDrop: handleDrop,
+        onKeyboardMove: handleKeyboardMove,
+        renderAdvanced,
+        rootSchema: referenceDocument ?? safeSchema,
+        editable
+      }),
+      [
+        handleToggle,
+        handleRename,
+        handleDescription,
+        handleType,
+        handleRequired,
+        handleDelete,
+        handleAdd,
+        handleDragStart,
+        handleDragOver,
+        handleDrop,
+        handleKeyboardMove,
+        renderAdvanced,
+        referenceDocument,
+        safeSchema,
+        editable
+      ]
+    );
+    const advancedCacheRef = React.useRef({
+      owner: null,
+      byId: /* @__PURE__ */ new Map()
+    });
+    const rowHandlersFor = React.useCallback(
+      (base, node) => {
+        if (!base.renderAdvanced) return base;
+        const cache = advancedCacheRef.current;
+        if (cache.owner !== base) {
+          cache.owner = base;
+          cache.byId = /* @__PURE__ */ new Map();
+        }
+        const hit = cache.byId.get(node.id);
+        if (hit) return hit;
+        const inner = base.renderAdvanced;
+        const bound = {
+          ...base,
+          renderAdvanced: (context) => inner({
+            ...context,
+            update: (next) => {
+              if (base.editable && !node.readOnly)
+                handleAdvancedUpdate(node, next);
+            }
+          })
+        };
+        cache.byId.set(node.id, bound);
+        return bound;
+      },
+      [handleAdvancedUpdate]
+    );
+    React.useEffect(
+      () => () => {
+        advancedCacheRef.current = { owner: null, byId: /* @__PURE__ */ new Map() };
+      },
+      []
+    );
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        className: [SchemaTreeEditor_default.root, className].filter(Boolean).join(" "),
+        "data-show-type": showType,
+        "data-show-required": showRequired,
+        "data-show-description": showDescription,
+        style: {
+          "--grid-min-width": `${160 + (showType ? 120 : 0) + (showRequired ? 36 : 0) + (showDescription ? 168 : 0) + 150}px`,
+          "--grid-columns": [
+            "minmax(160px, 1fr)",
+            showType && "112px",
+            showRequired && "28px",
+            showDescription && "minmax(160px, 1fr)",
+            "80px"
+          ].filter(Boolean).join(" ")
+        },
+        children: [
+          /* @__PURE__ */ jsxs(Box, { className: SchemaTreeEditor_default.toolbar, children: [
+            /* @__PURE__ */ jsx(Text, { className: SchemaTreeEditor_default.toolbarTitle, children: "Schema" }),
+            /* @__PURE__ */ jsxs(Text, { className: SchemaTreeEditor_default.toolbarMeta, children: [
+              propertyCount,
+              " field",
+              propertyCount === 1 ? "" : "s"
+            ] }),
+            /* @__PURE__ */ jsx(Box, { className: SchemaTreeEditor_default.toolbarSpacer }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                className: SchemaTreeEditor_default.ghostButton,
+                onClick: handleToggleAll,
+                disabled: !nodes.some((node) => node.expandable),
+                size: "xs",
+                variant: "ghost",
+                children: expanded.size > 0 ? "Collapse all" : "Expand all"
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                className: SchemaTreeEditor_default.ghostButton,
+                onClick: handleAddRoot,
+                disabled: !editable,
+                size: "xs",
+                variant: "ghost",
+                children: [
+                  /* @__PURE__ */ jsx(MdAdd, {}),
+                  "Add field"
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              className: SchemaTreeEditor_default.tableViewport,
+              role: "table",
+              "aria-label": "Schema fields",
+              children: [
+                /* @__PURE__ */ jsxs(Box, { className: SchemaTreeEditor_default.header, role: "row", children: [
+                  /* @__PURE__ */ jsx(Text, { role: "columnheader", className: SchemaTreeEditor_default.headerCell, children: "Name" }),
+                  /* @__PURE__ */ jsx(Text, { role: "columnheader", className: SchemaTreeEditor_default.headerCell, children: "Type" }),
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      role: "columnheader",
+                      className: SchemaTreeEditor_default.headerCell,
+                      title: "Required or optional",
+                      children: "Req"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Text, { role: "columnheader", className: SchemaTreeEditor_default.headerCell, children: "Description" }),
+                  /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      role: "columnheader",
+                      className: SchemaTreeEditor_default.headerCell,
+                      "aria-label": "Actions"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    className: SchemaTreeEditor_default.list,
+                    role: "rowgroup",
+                    "data-dragging": dropLine !== null || void 0,
+                    onDragLeave: (event) => {
+                      if (event.currentTarget.contains(event.relatedTarget))
+                        return;
+                      scheduleDropLine(null);
+                    },
+                    children: nodes.length === 0 ? /* @__PURE__ */ jsxs(Box, { className: SchemaTreeEditor_default.empty, children: [
+                      /* @__PURE__ */ jsx(Text, { className: SchemaTreeEditor_default.emptyTitle, children: "No fields yet" }),
+                      /* @__PURE__ */ jsx(Text, { className: SchemaTreeEditor_default.emptyHint, children: "Add the first field to start describing this object." }),
+                      /* @__PURE__ */ jsxs(
+                        Button,
+                        {
+                          className: SchemaTreeEditor_default.ghostButton,
+                          onClick: handleAddRoot,
+                          disabled: !editable,
+                          size: "xs",
+                          children: [
+                            /* @__PURE__ */ jsx(MdAdd, {}),
+                            "Add field"
+                          ]
+                        }
+                      )
+                    ] }) : rowGroups.map((group) => /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: group.reference ? SchemaTreeEditor_default.referenceGroup : void 0,
+                        children: group.rows.map(({ node, index }) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+                          dropLine === index ? /* @__PURE__ */ jsx(Box, { className: SchemaTreeEditor_default.dropLine, "aria-hidden": "true" }) : null,
+                          /* @__PURE__ */ jsx(
+                            MemoRow,
+                            {
+                              node,
+                              index,
+                              handlers: rowHandlersFor(handlers, node)
+                            }
+                          )
+                        ] }, node.id))
+                      },
+                      group.id
+                    ))
+                  }
+                )
+              ]
+            }
+          ),
+          overflow ? /* @__PURE__ */ jsx(Box, { className: SchemaTreeEditor_default.notice, role: "status", children: /* @__PURE__ */ jsxs(Text, { className: SchemaTreeEditor_default.noticeText, children: [
+            "Showing the first ",
+            maxRows,
+            " rows. Collapse a branch to see the rest."
+          ] }) }) : null
+        ]
+      }
+    );
+  }
+);
+var SchemaTreeEditor = React.memo(
+  (props) => {
+    const value = props.value !== void 0 ? props.value : props.schema ?? {};
+    return /* @__PURE__ */ jsx(SchemaErrorBoundary, { onError: props.onError, children: typeof value === "boolean" ? /* @__PURE__ */ jsx(
+      InlineSchemaEditor,
+      {
+        value,
+        onChange: props.onChange,
+        disabled: props.readOnly,
+        nested: true
+      }
+    ) : /* @__PURE__ */ jsx(
+      SchemaTreeEditorInner,
+      {
+        ...props,
+        schema: value,
+        onChange: props.onChange
+      }
+    ) });
+  }
+);
+function defaultAdvancedEditor(context) {
+  return /* @__PURE__ */ jsx(
+    InlineSchemaEditor,
+    {
+      schema: context.schema,
+      fullSchema: context.fullSchema,
+      required: context.required,
+      onRequiredChange: context.onRequiredChange,
+      schemaName: context.schemaName,
+      path: context.path,
+      nested: true,
+      disabled: context.readOnly,
+      onChange: context.update
+    }
+  );
+}
+
+export { SCHEMA_TYPES, SchemaTreeEditor };