@pipe0/react 0.0.2

package/dist/components/internal/multi-select-popover-trigger.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select-popover-trigger.mjs","names":[],"sources":["../../../src/components/internal/multi-select-popover-trigger.tsx"],"sourcesContent":["import type { WidgetsByKind } from \"@pipe0/base\";\nimport { type RankingInfo, rankItem } from \"@tanstack/match-sorter-utils\";\nimport type { KeyboardEvent, ReactNode, Ref } from \"react\";\nimport { cn } from \"../../lib/utils.js\";\n\nexport interface PayloadOption {\n  value: string;\n  label: string;\n  widgets?: WidgetsByKind;\n}\n\nexport type RankedOption = PayloadOption & { ranking: RankingInfo };\n\n/**\n * Rank-filter an option list using match-sorter-utils.\n * Returns options sorted by descending rank, empty `input` returns all options\n * (match-sorter assigns all passing).\n */\nexport function filterOptions(options: PayloadOption[], input: string): PayloadOption[] {\n  if (!input) return options;\n  return options\n    .map((option) => {\n      const labelRank = rankItem(option.label, input);\n      const valueRank = rankItem(option.value, input);\n      const ranking = labelRank.rank > valueRank.rank ? labelRank : valueRank;\n      return ranking.passed ? { ...option, ranking } : null;\n    })\n    .filter((o): o is RankedOption => o !== null)\n    .sort((a, b) => b.ranking.rank - a.ranking.rank);\n}\n\ninterface MultiSelectPopoverTriggerProps {\n  createdValues: string[];\n  labelFor?: (value: string) => string;\n  onRemove: (item: string) => void;\n  onAdd?: (item: string) => void;\n  onFocus?: () => void;\n  inputValue: string;\n  onInputValueChange: (v: string) => void;\n  placeholder?: string;\n  inputRef: Ref<HTMLInputElement>;\n  disableSearch?: boolean;\n  ariaInvalid?: boolean;\n  disabled?: boolean;\n  allowCreate?: boolean;\n  /**\n   * When provided the trigger renders the chip row only and delegates the\n   * search input to the caller (used when embedding inside `<Command>`).\n   */\n  children?: ReactNode;\n}\n\n/**\n * Chip row + embedded search input that triggers a Popover/Command.\n *\n * - Click anywhere to focus the embedded input and open the popover.\n * - Backspace on empty input removes the last chip.\n * - Enter adds the trimmed input (when `allowCreate` + `onAdd` provided).\n */\nexport function MultiSelectPopoverTrigger({\n  createdValues,\n  labelFor,\n  onRemove,\n  onAdd,\n  onFocus,\n  inputValue,\n  onInputValueChange,\n  placeholder,\n  inputRef,\n  disableSearch = false,\n  ariaInvalid,\n  disabled,\n  allowCreate = false,\n}: MultiSelectPopoverTriggerProps) {\n  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"Backspace\" && createdValues.length > 0 && inputValue === \"\") {\n      e.preventDefault();\n      onRemove(createdValues[createdValues.length - 1]);\n      return;\n    }\n    if (e.key === \"Enter\" && allowCreate && onAdd) {\n      const trimmed = inputValue.trim();\n      if (trimmed) {\n        e.preventDefault();\n        onAdd(trimmed);\n      }\n    }\n  };\n\n  return (\n    <div\n      role=\"combobox\"\n      aria-invalid={ariaInvalid || undefined}\n      aria-disabled={disabled || undefined}\n      className={cn(\n        \"pz:flex pz:flex-wrap pz:items-center pz:gap-1 pz:rounded-md pz:border pz:border-input pz:bg-transparent pz:min-h-9 pz:px-2 pz:py-1 pz:shadow-xs pz:cursor-text\",\n        \"pz:focus-within:ring-4 pz:focus-within:ring-ring/10 pz:focus-within:outline-1 pz:focus-within:outline-ring/50\",\n        \"pz:aria-invalid:border-destructive/60 pz:aria-invalid:ring-destructive/20\",\n        disabled && \"pz:opacity-60 pz:cursor-not-allowed\",\n      )}\n      onMouseDown={(e) => {\n        // avoid stealing focus from child remove buttons\n        if ((e.target as HTMLElement).closest(\"button\")) return;\n        if (disabled) return;\n        onFocus?.();\n        // Defer to the next tick so popover trigger registers the click first.\n        setTimeout(() => {\n          if (inputRef && \"current\" in inputRef && inputRef.current !== null) {\n            inputRef.current.focus();\n          }\n        }, 0);\n      }}\n    >\n      {createdValues.map((item) => (\n        <span\n          key={item}\n          className=\"pz:inline-flex pz:items-center pz:gap-1 pz:rounded-sm pz:bg-secondary pz:text-secondary-foreground pz:px-2 pz:py-0.5 pz:text-xs\"\n        >\n          {labelFor ? labelFor(item) : item}\n          <button\n            type=\"button\"\n            className=\"pz:opacity-60 pz:hover:opacity-100 pz:cursor-pointer\"\n            onClick={(e) => {\n              e.stopPropagation();\n              onRemove(item);\n            }}\n            aria-label={`Remove ${labelFor ? labelFor(item) : item}`}\n          >\n            ×\n          </button>\n        </span>\n      ))}\n      {!disableSearch && (\n        <input\n          ref={inputRef}\n          type=\"text\"\n          className=\"pz:flex-1 pz:min-w-[80px] pz:bg-transparent pz:text-sm pz:outline-none pz:placeholder:text-muted-foreground\"\n          value={inputValue}\n          onChange={(e) => onInputValueChange(e.target.value)}\n          onFocus={onFocus}\n          onKeyDown={handleKeyDown}\n          placeholder={createdValues.length === 0 ? placeholder : undefined}\n          disabled={disabled}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;AAkBA,SAAgB,cAAc,SAA0B,OAAgC;AACtF,KAAI,CAAC,MAAO,QAAO;AACnB,QAAO,QACJ,KAAK,WAAW;EACf,MAAM,YAAY,SAAS,OAAO,OAAO,MAAM;EAC/C,MAAM,YAAY,SAAS,OAAO,OAAO,MAAM;EAC/C,MAAM,UAAU,UAAU,OAAO,UAAU,OAAO,YAAY;AAC9D,SAAO,QAAQ,SAAS;GAAE,GAAG;GAAQ;GAAS,GAAG;GACjD,CACD,QAAQ,MAAyB,MAAM,KAAK,CAC5C,MAAM,GAAG,MAAM,EAAE,QAAQ,OAAO,EAAE,QAAQ,KAAK"}

package/dist/components/internal/schema-editor/SchemaEditor.mjs

@@ -0,0 +1,468 @@
+import { cn } from "../../../lib/utils.mjs";
+import { Button } from "../../ui/button.mjs";
+import { IconChevronDown, IconLock, IconPencil, IconPlus, IconTrash } from "../icons.mjs";
+import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover.mjs";
+import { addPlaceholderToPath, addPlaceholderToSchema, addRequiredToProperty, changePropertyName, changeType, findComposedKey, getPathProperty, isArraySchema, isComposedSchema, isNonArraySchemaObject, isObjectSchema, isSimpleSchema, moveUpLevel, removePathFromSchema, removeRequiredForProperty, schemaInputRegex } from "./schema-utils.mjs";
+import { generateSchemaRows } from "./generate-schema-rows.mjs";
+import { SchemaEditorContextProvider, useSchemaEditorContext } from "./schema-editor-context.mjs";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useForm } from "react-hook-form";
+import { Command } from "cmdk";
+
+//#region src/components/internal/schema-editor/SchemaEditor.tsx
+function InlineIconButton({ icon, children, ...rest }) {
+	return /* @__PURE__ */ jsxs(Button, {
+		type: "button",
+		size: "icon",
+		variant: "ghost",
+		className: "pz:size-5",
+		...rest,
+		children: [icon, /* @__PURE__ */ jsx("span", {
+			className: "pz:sr-only",
+			children: children ?? "Action"
+		})]
+	});
+}
+function AddButton(props) {
+	return /* @__PURE__ */ jsx(InlineIconButton, {
+		icon: /* @__PURE__ */ jsx(IconPlus, {
+			width: 12,
+			height: 12
+		}),
+		...props,
+		children: "Add"
+	});
+}
+function EditButton(props) {
+	return /* @__PURE__ */ jsx(InlineIconButton, {
+		icon: /* @__PURE__ */ jsx(IconPencil, {
+			width: 12,
+			height: 12
+		}),
+		...props,
+		children: "Edit"
+	});
+}
+function DeleteButton(props) {
+	return /* @__PURE__ */ jsx(InlineIconButton, {
+		icon: /* @__PURE__ */ jsx(IconTrash, {
+			width: 12,
+			height: 12
+		}),
+		...props,
+		children: "Delete"
+	});
+}
+function SelectTypePopover({ children, typeOptions, onSelect, isDisabled }) {
+	const [open, setOpen] = useState(false);
+	if (isDisabled) return children;
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: children }), /* @__PURE__ */ jsx(PopoverContent, {
+			align: "start",
+			sideOffset: 4,
+			className: "pz:w-auto pz:min-w-[140px] pz:p-0",
+			children: /* @__PURE__ */ jsx(Command, {
+				className: "pz:flex pz:flex-col pz:p-1",
+				children: /* @__PURE__ */ jsx(Command.List, {
+					className: "pz:flex pz:flex-col pz:gap-0.5 pz:max-h-[240px] pz:overflow-y-auto",
+					children: /* @__PURE__ */ jsx(Command.Group, { children: typeOptions.propertyTypes.map((t) => /* @__PURE__ */ jsx(Command.Item, {
+						className: "pz:flex pz:w-full pz:items-center pz:rounded-sm pz:px-2 pz:py-1.5 pz:text-sm pz:cursor-pointer pz:hover:bg-accent pz:hover:text-accent-foreground pz:data-[selected=true]:bg-accent pz:data-[selected=true]:text-accent-foreground",
+						onSelect: () => {
+							onSelect(t);
+							setOpen(false);
+						},
+						children: t
+					}, t)) })
+				})
+			})
+		})]
+	});
+}
+function getTagColorClass(type) {
+	switch (type) {
+		case "string": return "pz:text-blue-700 pz:dark:text-blue-400";
+		case "object": return "pz:text-purple-700 pz:dark:text-purple-400";
+		case "oneOf": return "pz:text-orange-700 pz:dark:text-orange-400";
+		case "anyOf": return "pz:text-yellow-700 pz:dark:text-yellow-400";
+		case "allOf": return "pz:text-red-700 pz:dark:text-red-400";
+		case "array": return "pz:text-indigo-700 pz:dark:text-indigo-400";
+		case "integer": return "pz:text-green-700 pz:dark:text-green-400";
+		case "number": return "pz:text-cyan-700 pz:dark:text-cyan-400";
+		case "boolean": return "pz:text-amber-700 pz:dark:text-amber-400";
+		case "$ref": return "pz:text-sky-700 pz:dark:text-sky-400";
+		default: return "pz:text-gray-700 pz:dark:text-gray-400";
+	}
+}
+const Tag = forwardRef(function Tag({ children, className, onAdd, isDisabled, isReadOnly, type, innerTag, ...rest }, ref) {
+	const colorClass = isDisabled ? "pz:text-muted-foreground" : getTagColorClass(type);
+	const interactive = !isDisabled && !isReadOnly;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "pz:inline-flex pz:items-center",
+		title: "Open type options",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				ref,
+				className: cn("pz:inline-flex pz:items-center pz:gap-[2px] pz:rounded-md pz:px-1 pz:font-mono", colorClass, interactive ? "pz:cursor-pointer pz:hover:bg-accent pz:hover:underline" : "pz:cursor-default", className),
+				...rest,
+				children: [children, innerTag && /* @__PURE__ */ jsx("span", {
+					className: "pz:mx-0.5",
+					children: "["
+				})]
+			}),
+			innerTag,
+			innerTag && /* @__PURE__ */ jsx("span", {
+				className: cn(colorClass),
+				children: "]"
+			}),
+			onAdd && interactive && /* @__PURE__ */ jsx(AddButton, {
+				onClick: onAdd,
+				title: "Add property"
+			})
+		]
+	});
+});
+function useChangeType(path, rootSchema, onChange) {
+	return useCallback((type) => {
+		onChange(changeType(structuredClone(rootSchema), path, type));
+	}, [
+		path,
+		rootSchema,
+		onChange
+	]);
+}
+function ExpandChevron({ isDisabled }) {
+	if (isDisabled) return null;
+	return /* @__PURE__ */ jsx(IconChevronDown, {
+		width: 11,
+		height: 11
+	});
+}
+function SimpleTag({ schema, path, typeOptions, isDisabled, isReadOnly, rootSchema, onChange }) {
+	const onSelect = useChangeType(path, rootSchema, onChange);
+	const label = schema.type === "string" && schema.enum?.length ? `enum(${schema.enum.slice(0, 2).map(String).join(" | ")}${schema.enum.length > 2 ? ` | +${schema.enum.length - 2} more` : ""})` : String(schema.type ?? "any");
+	return /* @__PURE__ */ jsx(SelectTypePopover, {
+		typeOptions,
+		onSelect,
+		isDisabled: isDisabled || isReadOnly,
+		children: /* @__PURE__ */ jsxs(Tag, {
+			isDisabled,
+			isReadOnly,
+			type: String(schema.type ?? "null"),
+			children: [/* @__PURE__ */ jsx("span", { children: label }), !isReadOnly && /* @__PURE__ */ jsx(ExpandChevron, { isDisabled })]
+		})
+	});
+}
+function ObjectTag({ path, typeOptions, isDisabled, isReadOnly, rootSchema, onChange }) {
+	const [, dispatch] = useSchemaEditorContext();
+	const onSelect = useChangeType(path, rootSchema, onChange);
+	const isAnyObject = useMemo(() => {
+		const property = getPathProperty(rootSchema, path);
+		if (!isObjectSchema(property)) return false;
+		return !property.properties;
+	}, [path, rootSchema]);
+	const handleAdd = () => {
+		const property = getPathProperty(rootSchema, path);
+		if (!isNonArraySchemaObject(property)) return;
+		if (Object.keys(property.properties || {}).some((k) => k.startsWith("%%%"))) return;
+		const [newSchema, placeholderId] = addPlaceholderToPath(rootSchema, path);
+		if (placeholderId) dispatch({
+			type: "SET_LATEST_ADDED_PLACEHOLDER",
+			payload: placeholderId
+		});
+		onChange(newSchema);
+	};
+	return /* @__PURE__ */ jsx(SelectTypePopover, {
+		typeOptions,
+		onSelect,
+		isDisabled: isDisabled || isReadOnly,
+		children: /* @__PURE__ */ jsxs(Tag, {
+			onAdd: handleAdd,
+			isDisabled,
+			isReadOnly,
+			type: "object",
+			children: [/* @__PURE__ */ jsx("span", { children: isAnyObject ? "AnyObject" : "object" }), !isReadOnly && /* @__PURE__ */ jsx(ExpandChevron, { isDisabled })]
+		})
+	});
+}
+function ArrayTag({ schema, path, typeOptions, isDisabled, isReadOnly, rootSchema, onChange }) {
+	const onSelect = useChangeType(path, rootSchema, onChange);
+	const innerTypeOptions = typeOptions.innerArrayTypeOptions;
+	if (!innerTypeOptions) throw new Error("ArrayTag has no innerArrayTypeOptions");
+	const childPath = path === "" ? "items" : path + ".items";
+	const itemsSchema = schema.items;
+	return /* @__PURE__ */ jsx(SelectTypePopover, {
+		typeOptions,
+		onSelect,
+		isDisabled: isDisabled || isReadOnly,
+		children: /* @__PURE__ */ jsxs(Tag, {
+			isDisabled,
+			isReadOnly,
+			type: "array",
+			innerTag: itemsSchema ? /* @__PURE__ */ jsx(RootTag, {
+				schema: itemsSchema,
+				path: childPath,
+				typeOptions: {
+					...innerTypeOptions,
+					innerArrayTypeOptions: innerTypeOptions
+				},
+				onChange,
+				isDisabled,
+				isReadOnly,
+				rootSchema
+			}) : void 0,
+			children: [/* @__PURE__ */ jsx("span", { children: "array" }), !isReadOnly && /* @__PURE__ */ jsx(ExpandChevron, { isDisabled })]
+		})
+	});
+}
+function ComposedTag({ schema, path, typeOptions, isDisabled, isReadOnly, rootSchema, onChange }) {
+	const composedKey = useMemo(() => findComposedKey(schema), [schema]);
+	const onSelect = useChangeType(path, rootSchema, onChange);
+	const handleAdd = () => {
+		const [newSchema] = addPlaceholderToPath(rootSchema, path);
+		onChange(newSchema);
+	};
+	return /* @__PURE__ */ jsx(SelectTypePopover, {
+		typeOptions,
+		onSelect,
+		isDisabled: isDisabled || isReadOnly,
+		children: /* @__PURE__ */ jsxs(Tag, {
+			onAdd: handleAdd,
+			isDisabled,
+			isReadOnly,
+			type: composedKey,
+			children: [/* @__PURE__ */ jsx("span", { children: composedKey }), !isReadOnly && /* @__PURE__ */ jsx(ExpandChevron, { isDisabled })]
+		})
+	});
+}
+function RootTag(props) {
+	if (isArraySchema(props.schema)) return /* @__PURE__ */ jsx(ArrayTag, { ...props });
+	if (isSimpleSchema(props.schema)) return /* @__PURE__ */ jsx(SimpleTag, { ...props });
+	if (isObjectSchema(props.schema)) return /* @__PURE__ */ jsx(ObjectTag, { ...props });
+	if (isComposedSchema(props.schema)) return /* @__PURE__ */ jsx(ComposedTag, { ...props });
+	return /* @__PURE__ */ jsx(SimpleTag, { ...props });
+}
+function renderTag(rowType, props) {
+	switch (rowType) {
+		case "simple-row": return /* @__PURE__ */ jsx(SimpleTag, { ...props });
+		case "composed-row": return /* @__PURE__ */ jsx(ComposedTag, { ...props });
+		case "array-row": return /* @__PURE__ */ jsx(ArrayTag, { ...props });
+		case "object-row": return /* @__PURE__ */ jsx(ObjectTag, { ...props });
+		default: return /* @__PURE__ */ jsx(SimpleTag, { ...props });
+	}
+}
+function PropertyNameInput({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("input", {
+		ref,
+		className: cn("pz:flex pz:w-20 pz:bg-background pz:text-foreground pz:outline-none pz:placeholder:text-muted-foreground pz:disabled:cursor-not-allowed pz:disabled:opacity-50", className),
+		...props
+	});
+}
+function RowPropertyName({ row, onChange, handleRemove, isReadOnly, isDisabled }) {
+	const [isEditing, setIsEditing] = useState(() => row.propertyName.startsWith("%%%"));
+	const inputRef = useRef(null);
+	const submitButtonRef = useRef(null);
+	const [, dispatch] = useSchemaEditorContext();
+	const { register, handleSubmit } = useForm({ defaultValues: { propertyName: row.propertyName && !row.propertyName.startsWith("%%%") ? row.propertyName : "" } });
+	const onSubmit = (data, submitMode) => {
+		try {
+			if (data.propertyName === "") return handleRemove();
+			let newSchema = changePropertyName(row.rootSchema, row.path, data.propertyName);
+			if (row.propertyName.startsWith("%%%")) newSchema = addRequiredToProperty(newSchema, moveUpLevel(row.path) + `.${data.propertyName}`);
+			setIsEditing(false);
+			if (submitMode === "enter") {
+				const { schema, placeholderId } = addPlaceholderToSchema({
+					schema: newSchema,
+					path: moveUpLevel(moveUpLevel(row.path))
+				});
+				newSchema = schema;
+				if (placeholderId) dispatch({
+					type: "SET_LATEST_ADDED_PLACEHOLDER",
+					payload: placeholderId
+				});
+			}
+			onChange(newSchema);
+		} catch {}
+	};
+	const { ref, ...registerValues } = register("propertyName", { pattern: {
+		value: schemaInputRegex.propertyName.expression,
+		message: schemaInputRegex.propertyName.message
+	} });
+	const curriedSubmit = (submitMode) => handleSubmit((v) => onSubmit(v, submitMode));
+	const handleOnBlur = () => {
+		submitButtonRef.current?.click();
+	};
+	const showInput = isEditing;
+	const showText = row.propertyName && !isEditing;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
+		"aria-hidden": !showInput,
+		className: cn("pz:inline-flex", { "pz:sr-only": !showInput }),
+		children: [/* @__PURE__ */ jsxs("div", {
+			role: "form",
+			onKeyDown: async (e) => {
+				if (e.currentTarget.contains(document.activeElement) && e.code === "Enter") {
+					e.preventDefault();
+					e.stopPropagation();
+					await curriedSubmit("enter")();
+				}
+			},
+			children: [/* @__PURE__ */ jsx(PropertyNameInput, {
+				id: "id-" + row.propertyName.slice(3),
+				autoComplete: "off",
+				placeholder: "name",
+				...registerValues,
+				ref: (e) => {
+					ref(e);
+					inputRef.current = e;
+				},
+				onBlur: handleOnBlur
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => curriedSubmit("blur")(),
+				className: "pz:sr-only",
+				ref: submitButtonRef,
+				children: "Submit"
+			})]
+		}), /* @__PURE__ */ jsx("span", { children: ":\xA0\xA0\xA0" })]
+	}), /* @__PURE__ */ jsxs("span", {
+		"aria-hidden": !showText,
+		className: cn("pz:flex pz:items-center pz:gap-1", { "pz:sr-only": !showText }),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: cn("pz:whitespace-nowrap", isDisabled ? "pz:text-muted-foreground" : "pz:text-foreground"),
+				children: row.propertyName
+			}),
+			!isReadOnly && !isDisabled && /* @__PURE__ */ jsx(EditButton, {
+				onClick: () => {
+					setIsEditing(true);
+					setTimeout(() => inputRef.current?.focus(), 0);
+				},
+				title: "Edit name"
+			}),
+			/* @__PURE__ */ jsx("span", { children: ":\xA0" })
+		]
+	})] });
+}
+function RequiredTag({ row, onChange }) {
+	return /* @__PURE__ */ jsx(InlineIconButton, {
+		icon: /* @__PURE__ */ jsx(IconLock, {
+			width: 12,
+			height: 12
+		}),
+		onClick: () => onChange(removeRequiredForProperty(row.rootSchema, row.path)),
+		title: "Make optional"
+	});
+}
+function RequiredToggle({ row, onChange }) {
+	return /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "ghost",
+		className: "pz:h-5 pz:px-1.5 pz:font-normal pz:text-muted-foreground",
+		onClick: () => onChange(addRequiredToProperty(row.rootSchema, row.path)),
+		title: "Make required",
+		children: "or null"
+	});
+}
+function Row({ row, onChange, isReadOnly }) {
+	const handleRemove = useCallback(() => {
+		let newSchema = removeRequiredForProperty(row.rootSchema, row.path);
+		newSchema = removePathFromSchema(newSchema, row.path);
+		onChange(newSchema);
+	}, [
+		onChange,
+		row.rootSchema,
+		row.path
+	]);
+	const isDisabled = row.isDisabled;
+	const isPlaceholder = row.propertyName?.startsWith("%%%");
+	const showRequiredToggle = !row.isRequired && !row.hideRequiredToggle && !isDisabled && !isPlaceholder && !isReadOnly;
+	const showOptionalIndicator = !row.isRequired && !row.hideRequiredToggle && !isDisabled && !isPlaceholder && isReadOnly;
+	const showRequiredTag = row.isRequired && !row.hideRequiredToggle && !isDisabled && !isReadOnly;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "pz:schema-row pz:flex pz:items-center pz:gap-0 pz:text-sm",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "pz:whitespace-pre pz:font-mono pz:text-sm pz:font-thin pz:text-border",
+				children: row.prefix
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "pz:flex pz:items-center",
+				children: [row.propertyName && /* @__PURE__ */ jsx(RowPropertyName, {
+					row,
+					onChange,
+					handleRemove,
+					isReadOnly,
+					isDisabled
+				}), renderTag(row.rowType, {
+					schema: row.schema,
+					path: row.path,
+					typeOptions: row.typeOptions,
+					isDisabled: row.isDisabled,
+					isReadOnly: row.isReadOnly,
+					rootSchema: row.rootSchema,
+					onChange
+				})]
+			}),
+			showOptionalIndicator && /* @__PURE__ */ jsx("span", {
+				className: "pz:ml-1 pz:text-muted-foreground",
+				children: "or null"
+			}),
+			showRequiredToggle && /* @__PURE__ */ jsx(RequiredToggle, {
+				row,
+				onChange
+			}),
+			showRequiredTag && /* @__PURE__ */ jsx(RequiredTag, {
+				row,
+				onChange
+			}),
+			row.isRemovable && !isDisabled && !isReadOnly && /* @__PURE__ */ jsx(DeleteButton, {
+				onClick: handleRemove,
+				title: "Delete property"
+			})
+		]
+	});
+}
+function PlaceholderFocuser() {
+	const [state, dispatch] = useSchemaEditorContext();
+	useEffect(() => {
+		if (!state.latestPlaceholderId) return;
+		const selector = `input[id=${"id-" + state.latestPlaceholderId.slice(3)}]`;
+		const input = document.querySelector(selector);
+		if (input == null || document.activeElement === input) return;
+		input.focus();
+		dispatch({
+			type: "SET_LATEST_ADDED_PLACEHOLDER",
+			payload: ""
+		});
+	}, [state.latestPlaceholderId, dispatch]);
+	return null;
+}
+function SchemaEditorWrapper({ value, onChange, isDisabled = false, isReadOnly = false }) {
+	const rows = useMemo(() => generateSchemaRows({
+		schema: value,
+		isDisabled,
+		isReadOnly,
+		initialLevel: 0
+	}), [
+		value,
+		isDisabled,
+		isReadOnly
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "pz:items-stretch pz:whitespace-nowrap pz:text-sm",
+		children: [/* @__PURE__ */ jsx(PlaceholderFocuser, {}), rows.map((r, i) => /* @__PURE__ */ jsx(Row, {
+			row: r,
+			isReadOnly,
+			onChange
+		}, `${r.level}-${r.propertyName}-${r.path}-${i}`))]
+	});
+}
+function SchemaEditor(props) {
+	return /* @__PURE__ */ jsx(SchemaEditorContextProvider, { children: /* @__PURE__ */ jsx(SchemaEditorWrapper, { ...props }) });
+}
+
+//#endregion
+export { SchemaEditor };
+//# sourceMappingURL=SchemaEditor.mjs.map

package/dist/components/internal/schema-editor/SchemaEditor.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SchemaEditor.mjs","names":[],"sources":["../../../../src/components/internal/schema-editor/SchemaEditor.tsx"],"sourcesContent":["import { Command } from \"cmdk\";\nimport {\n  type ComponentProps,\n  forwardRef,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport type { JSONSchema } from \"zod/v4/core\";\nimport { cn } from \"../../../lib/utils.js\";\nimport { Button } from \"../../ui/button.js\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../../ui/popover.js\";\nimport { IconChevronDown, IconLock, IconPencil, IconPlus, IconTrash } from \"../icons.js\";\nimport { generateSchemaRows, type SchemaRow, type SchemaRowType } from \"./generate-schema-rows.js\";\nimport { SchemaEditorContextProvider, useSchemaEditorContext } from \"./schema-editor-context.js\";\nimport {\n  type AllPropertyTypes,\n  addPlaceholderToPath,\n  addPlaceholderToSchema,\n  addRequiredToProperty,\n  changePropertyName,\n  changeType,\n  EDITOR_PLACEHOLDER_TOKEN,\n  findComposedKey,\n  getPathProperty,\n  isArraySchema,\n  isComposedSchema,\n  isNonArraySchemaObject,\n  isObjectSchema,\n  isSimpleSchema,\n  moveUpLevel,\n  type NonArraySchemaObject,\n  removePathFromSchema,\n  removeRequiredForProperty,\n  schemaInputRegex,\n  type TypeOptions,\n} from \"./schema-utils.js\";\n\n// ─── Inline buttons ─────────────────────────────────────────────\n\ntype InlineIconButtonProps = ComponentProps<typeof Button> & {\n  icon: ReactNode;\n};\n\nfunction InlineIconButton({ icon, children, ...rest }: InlineIconButtonProps) {\n  return (\n    <Button type=\"button\" size=\"icon\" variant=\"ghost\" className=\"pz:size-5\" {...rest}>\n      {icon}\n      <span className=\"pz:sr-only\">{children ?? \"Action\"}</span>\n    </Button>\n  );\n}\n\nfunction AddButton(props: ComponentProps<typeof Button>) {\n  return (\n    <InlineIconButton icon={<IconPlus width={12} height={12} />} {...props}>\n      Add\n    </InlineIconButton>\n  );\n}\n\nfunction EditButton(props: ComponentProps<typeof Button>) {\n  return (\n    <InlineIconButton icon={<IconPencil width={12} height={12} />} {...props}>\n      Edit\n    </InlineIconButton>\n  );\n}\n\nfunction DeleteButton(props: ComponentProps<typeof Button>) {\n  return (\n    <InlineIconButton icon={<IconTrash width={12} height={12} />} {...props}>\n      Delete\n    </InlineIconButton>\n  );\n}\n\n// ─── Type Selection ──────────────────────────────────────────────\n\nfunction SelectTypePopover({\n  children,\n  typeOptions,\n  onSelect,\n  isDisabled,\n}: {\n  children: ReactElement;\n  typeOptions: TypeOptions;\n  onSelect: (type: AllPropertyTypes) => void;\n  isDisabled: boolean;\n}) {\n  const [open, setOpen] = useState(false);\n  if (isDisabled) return children;\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger render={children} />\n      <PopoverContent align=\"start\" sideOffset={4} className=\"pz:w-auto pz:min-w-[140px] pz:p-0\">\n        <Command className=\"pz:flex pz:flex-col pz:p-1\">\n          <Command.List className=\"pz:flex pz:flex-col pz:gap-0.5 pz:max-h-[240px] pz:overflow-y-auto\">\n            <Command.Group>\n              {typeOptions.propertyTypes.map((t) => (\n                <Command.Item\n                  key={t}\n                  className=\"pz:flex pz:w-full pz:items-center pz:rounded-sm pz:px-2 pz:py-1.5 pz:text-sm pz:cursor-pointer pz:hover:bg-accent pz:hover:text-accent-foreground pz:data-[selected=true]:bg-accent pz:data-[selected=true]:text-accent-foreground\"\n                  onSelect={() => {\n                    onSelect(t);\n                    setOpen(false);\n                  }}\n                >\n                  {t}\n                </Command.Item>\n              ))}\n            </Command.Group>\n          </Command.List>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  );\n}\n\n// ─── Tag Colors ──────────────────────────────────────────────────\n\ntype TagType = string;\n\nfunction getTagColorClass(type: TagType): string {\n  switch (type) {\n    case \"string\":\n      return \"pz:text-blue-700 pz:dark:text-blue-400\";\n    case \"object\":\n      return \"pz:text-purple-700 pz:dark:text-purple-400\";\n    case \"oneOf\":\n      return \"pz:text-orange-700 pz:dark:text-orange-400\";\n    case \"anyOf\":\n      return \"pz:text-yellow-700 pz:dark:text-yellow-400\";\n    case \"allOf\":\n      return \"pz:text-red-700 pz:dark:text-red-400\";\n    case \"array\":\n      return \"pz:text-indigo-700 pz:dark:text-indigo-400\";\n    case \"integer\":\n      return \"pz:text-green-700 pz:dark:text-green-400\";\n    case \"number\":\n      return \"pz:text-cyan-700 pz:dark:text-cyan-400\";\n    case \"boolean\":\n      return \"pz:text-amber-700 pz:dark:text-amber-400\";\n    case \"$ref\":\n      return \"pz:text-sky-700 pz:dark:text-sky-400\";\n    case \"null\":\n    default:\n      return \"pz:text-gray-700 pz:dark:text-gray-400\";\n  }\n}\n\n// ─── Tag Component ──────────────────────────────────────────────\n\ntype TagElementProps = {\n  children: ReactNode;\n  onAdd?: () => void;\n  isDisabled: boolean;\n  isReadOnly: boolean;\n  type: TagType;\n  innerTag?: ReactNode;\n} & Omit<ComponentProps<\"div\">, \"type\" | \"children\">;\n\nconst Tag = forwardRef<HTMLDivElement, TagElementProps>(function Tag(\n  { children, className, onAdd, isDisabled, isReadOnly, type, innerTag, ...rest },\n  ref,\n) {\n  const colorClass = isDisabled ? \"pz:text-muted-foreground\" : getTagColorClass(type);\n  const interactive = !isDisabled && !isReadOnly;\n\n  return (\n    <div className=\"pz:inline-flex pz:items-center\" title=\"Open type options\">\n      <div\n        ref={ref}\n        className={cn(\n          \"pz:inline-flex pz:items-center pz:gap-[2px] pz:rounded-md pz:px-1 pz:font-mono\",\n          colorClass,\n          interactive\n            ? \"pz:cursor-pointer pz:hover:bg-accent pz:hover:underline\"\n            : \"pz:cursor-default\",\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n        {innerTag && <span className=\"pz:mx-0.5\">[</span>}\n      </div>\n      {innerTag}\n      {innerTag && <span className={cn(colorClass)}>]</span>}\n      {onAdd && interactive && <AddButton onClick={onAdd} title=\"Add property\" />}\n    </div>\n  );\n});\n\n// ─── Type Tags ──────────────────────────────────────────────────\n\ntype TagProps = {\n  schema: JSONSchema.BaseSchema;\n  path: string;\n  typeOptions: TypeOptions;\n  isDisabled: boolean;\n  isReadOnly: boolean;\n  rootSchema: JSONSchema.BaseSchema;\n  onChange: (schema: JSONSchema.BaseSchema) => void;\n};\n\nfunction useChangeType(\n  path: string,\n  rootSchema: JSONSchema.BaseSchema,\n  onChange: TagProps[\"onChange\"],\n) {\n  return useCallback(\n    (type: AllPropertyTypes) => {\n      const cp = structuredClone(rootSchema);\n      const newSchema = changeType(cp, path, type);\n      onChange(newSchema);\n    },\n    [path, rootSchema, onChange],\n  );\n}\n\nfunction ExpandChevron({ isDisabled }: { isDisabled: boolean }) {\n  if (isDisabled) return null;\n  return <IconChevronDown width={11} height={11} />;\n}\n\nfunction SimpleTag({\n  schema,\n  path,\n  typeOptions,\n  isDisabled,\n  isReadOnly,\n  rootSchema,\n  onChange,\n}: TagProps) {\n  const onSelect = useChangeType(path, rootSchema, onChange);\n  const label =\n    schema.type === \"string\" && schema.enum?.length\n      ? `enum(${schema.enum.slice(0, 2).map(String).join(\" | \")}${schema.enum.length > 2 ? ` | +${schema.enum.length - 2} more` : \"\"})`\n      : String(schema.type ?? \"any\");\n\n  return (\n    <SelectTypePopover\n      typeOptions={typeOptions}\n      onSelect={onSelect}\n      isDisabled={isDisabled || isReadOnly}\n    >\n      <Tag isDisabled={isDisabled} isReadOnly={isReadOnly} type={String(schema.type ?? \"null\")}>\n        <span>{label}</span>\n        {!isReadOnly && <ExpandChevron isDisabled={isDisabled} />}\n      </Tag>\n    </SelectTypePopover>\n  );\n}\n\nfunction ObjectTag({ path, typeOptions, isDisabled, isReadOnly, rootSchema, onChange }: TagProps) {\n  const [, dispatch] = useSchemaEditorContext();\n  const onSelect = useChangeType(path, rootSchema, onChange);\n\n  const isAnyObject = useMemo(() => {\n    const property = getPathProperty(rootSchema, path);\n    if (!isObjectSchema(property)) return false;\n    return !property.properties;\n  }, [path, rootSchema]);\n\n  const handleAdd = () => {\n    const property = getPathProperty(rootSchema, path);\n    if (!isNonArraySchemaObject(property)) return;\n    const existingKeys = Object.keys(property.properties || {});\n    if (existingKeys.some((k) => k.startsWith(\"%%%\"))) return;\n    const [newSchema, placeholderId] = addPlaceholderToPath(rootSchema, path);\n    if (placeholderId)\n      dispatch({\n        type: \"SET_LATEST_ADDED_PLACEHOLDER\",\n        payload: placeholderId,\n      });\n    onChange(newSchema);\n  };\n\n  return (\n    <SelectTypePopover\n      typeOptions={typeOptions}\n      onSelect={onSelect}\n      isDisabled={isDisabled || isReadOnly}\n    >\n      <Tag onAdd={handleAdd} isDisabled={isDisabled} isReadOnly={isReadOnly} type=\"object\">\n        <span>{isAnyObject ? \"AnyObject\" : \"object\"}</span>\n        {!isReadOnly && <ExpandChevron isDisabled={isDisabled} />}\n      </Tag>\n    </SelectTypePopover>\n  );\n}\n\nfunction ArrayTag({\n  schema,\n  path,\n  typeOptions,\n  isDisabled,\n  isReadOnly,\n  rootSchema,\n  onChange,\n}: TagProps) {\n  const onSelect = useChangeType(path, rootSchema, onChange);\n  const innerTypeOptions = typeOptions.innerArrayTypeOptions;\n  if (!innerTypeOptions) throw new Error(\"ArrayTag has no innerArrayTypeOptions\");\n\n  const childPath = path === \"\" ? \"items\" : path + \".items\";\n  const itemsSchema = (schema as JSONSchema.ArraySchema).items as JSONSchema.BaseSchema | undefined;\n\n  return (\n    <SelectTypePopover\n      typeOptions={typeOptions}\n      onSelect={onSelect}\n      isDisabled={isDisabled || isReadOnly}\n    >\n      <Tag\n        isDisabled={isDisabled}\n        isReadOnly={isReadOnly}\n        type=\"array\"\n        innerTag={\n          itemsSchema ? (\n            <RootTag\n              schema={itemsSchema}\n              path={childPath}\n              typeOptions={{\n                ...innerTypeOptions,\n                innerArrayTypeOptions: innerTypeOptions,\n              }}\n              onChange={onChange}\n              isDisabled={isDisabled}\n              isReadOnly={isReadOnly}\n              rootSchema={rootSchema}\n            />\n          ) : undefined\n        }\n      >\n        <span>array</span>\n        {!isReadOnly && <ExpandChevron isDisabled={isDisabled} />}\n      </Tag>\n    </SelectTypePopover>\n  );\n}\n\nfunction ComposedTag({\n  schema,\n  path,\n  typeOptions,\n  isDisabled,\n  isReadOnly,\n  rootSchema,\n  onChange,\n}: TagProps) {\n  const composedKey = useMemo(() => findComposedKey(schema as NonArraySchemaObject), [schema]);\n  const onSelect = useChangeType(path, rootSchema, onChange);\n\n  const handleAdd = () => {\n    const [newSchema] = addPlaceholderToPath(rootSchema, path);\n    onChange(newSchema);\n  };\n\n  return (\n    <SelectTypePopover\n      typeOptions={typeOptions}\n      onSelect={onSelect}\n      isDisabled={isDisabled || isReadOnly}\n    >\n      <Tag onAdd={handleAdd} isDisabled={isDisabled} isReadOnly={isReadOnly} type={composedKey}>\n        <span>{composedKey}</span>\n        {!isReadOnly && <ExpandChevron isDisabled={isDisabled} />}\n      </Tag>\n    </SelectTypePopover>\n  );\n}\n\nfunction RootTag(props: TagProps) {\n  if (isArraySchema(props.schema)) return <ArrayTag {...props} />;\n  if (isSimpleSchema(props.schema)) return <SimpleTag {...props} />;\n  if (isObjectSchema(props.schema)) return <ObjectTag {...props} />;\n  if (isComposedSchema(props.schema)) return <ComposedTag {...props} />;\n  return <SimpleTag {...props} />;\n}\n\nfunction renderTag(rowType: SchemaRowType, props: TagProps) {\n  switch (rowType) {\n    case \"simple-row\":\n      return <SimpleTag {...props} />;\n    case \"composed-row\":\n      return <ComposedTag {...props} />;\n    case \"array-row\":\n      return <ArrayTag {...props} />;\n    case \"object-row\":\n      return <ObjectTag {...props} />;\n    case \"any-row\":\n    case \"unsupported-row\":\n    default:\n      return <SimpleTag {...props} />;\n  }\n}\n\n// ─── Property Name ──────────────────────────────────────────────\n\ntype PropertyNameFormValues = { propertyName: string };\n\nfunction PropertyNameInput({\n  className,\n  ref,\n  ...props\n}: ComponentProps<\"input\"> & { ref?: Ref<HTMLInputElement> }) {\n  return (\n    <input\n      ref={ref}\n      className={cn(\n        \"pz:flex pz:w-20 pz:bg-background pz:text-foreground pz:outline-none pz:placeholder:text-muted-foreground pz:disabled:cursor-not-allowed pz:disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction RowPropertyName({\n  row,\n  onChange,\n  handleRemove,\n  isReadOnly,\n  isDisabled,\n}: {\n  row: SchemaRow & { propertyName: string };\n  onChange: (schema: JSONSchema.BaseSchema) => void;\n  isReadOnly: boolean;\n  isDisabled: boolean;\n  handleRemove: () => void;\n}) {\n  const [isEditing, setIsEditing] = useState(() =>\n    row.propertyName.startsWith(EDITOR_PLACEHOLDER_TOKEN),\n  );\n  const inputRef = useRef<HTMLInputElement>(null);\n  const submitButtonRef = useRef<HTMLButtonElement>(null);\n  const [, dispatch] = useSchemaEditorContext();\n\n  const { register, handleSubmit } = useForm<PropertyNameFormValues>({\n    defaultValues: {\n      propertyName:\n        row.propertyName && !row.propertyName.startsWith(EDITOR_PLACEHOLDER_TOKEN)\n          ? row.propertyName\n          : \"\",\n    },\n  });\n\n  type SubmitMode = \"enter\" | \"blur\";\n  const onSubmit = (data: PropertyNameFormValues, submitMode: SubmitMode) => {\n    try {\n      if (data.propertyName === \"\") return handleRemove();\n      let newSchema = changePropertyName(row.rootSchema, row.path, data.propertyName);\n      if (row.propertyName.startsWith(EDITOR_PLACEHOLDER_TOKEN)) {\n        newSchema = addRequiredToProperty(\n          newSchema,\n          moveUpLevel(row.path) + `.${data.propertyName}`,\n        );\n      }\n      setIsEditing(false);\n      if (submitMode === \"enter\") {\n        const { schema, placeholderId } = addPlaceholderToSchema({\n          schema: newSchema,\n          path: moveUpLevel(moveUpLevel(row.path)),\n        });\n        newSchema = schema;\n        if (placeholderId)\n          dispatch({\n            type: \"SET_LATEST_ADDED_PLACEHOLDER\",\n            payload: placeholderId,\n          });\n      }\n      onChange(newSchema);\n    } catch {\n      // validation errors handled silently\n    }\n  };\n\n  const { ref, ...registerValues } = register(\"propertyName\", {\n    pattern: {\n      value: schemaInputRegex.propertyName.expression,\n      message: schemaInputRegex.propertyName.message,\n    },\n  });\n\n  const curriedSubmit = (submitMode: SubmitMode) => handleSubmit((v) => onSubmit(v, submitMode));\n\n  const handleOnBlur = () => {\n    submitButtonRef.current?.click();\n  };\n\n  const showInput = isEditing;\n  const showText = row.propertyName && !isEditing;\n\n  return (\n    <>\n      <span\n        aria-hidden={!showInput}\n        className={cn(\"pz:inline-flex\", {\n          \"pz:sr-only\": !showInput,\n        })}\n      >\n        <div\n          role=\"form\"\n          onKeyDown={async (e) => {\n            if (e.currentTarget.contains(document.activeElement) && e.code === \"Enter\") {\n              e.preventDefault();\n              e.stopPropagation();\n              await curriedSubmit(\"enter\")();\n            }\n          }}\n        >\n          <PropertyNameInput\n            id={\"id-\" + row.propertyName.slice(3)}\n            autoComplete=\"off\"\n            placeholder=\"name\"\n            {...registerValues}\n            ref={(e) => {\n              ref(e);\n              (inputRef as { current: HTMLInputElement | null }).current = e;\n            }}\n            onBlur={handleOnBlur}\n          />\n          <button\n            type=\"button\"\n            onClick={() => curriedSubmit(\"blur\")()}\n            className=\"pz:sr-only\"\n            ref={submitButtonRef}\n          >\n            Submit\n          </button>\n        </div>\n        <span>:&nbsp;&nbsp;&nbsp;</span>\n      </span>\n      <span\n        aria-hidden={!showText}\n        className={cn(\"pz:flex pz:items-center pz:gap-1\", {\n          \"pz:sr-only\": !showText,\n        })}\n      >\n        <span\n          className={cn(\n            \"pz:whitespace-nowrap\",\n            isDisabled ? \"pz:text-muted-foreground\" : \"pz:text-foreground\",\n          )}\n        >\n          {row.propertyName}\n        </span>\n        {!isReadOnly && !isDisabled && (\n          <EditButton\n            onClick={() => {\n              setIsEditing(true);\n              setTimeout(() => inputRef.current?.focus(), 0);\n            }}\n            title=\"Edit name\"\n          />\n        )}\n        <span>:&nbsp;</span>\n      </span>\n    </>\n  );\n}\n\n// ─── Required toggle ────────────────────────────────────────────\n\nfunction RequiredTag({\n  row,\n  onChange,\n}: {\n  row: SchemaRow;\n  onChange: (schema: JSONSchema.BaseSchema) => void;\n}) {\n  return (\n    <InlineIconButton\n      icon={<IconLock width={12} height={12} />}\n      onClick={() => onChange(removeRequiredForProperty(row.rootSchema, row.path))}\n      title=\"Make optional\"\n    />\n  );\n}\n\nfunction RequiredToggle({\n  row,\n  onChange,\n}: {\n  row: SchemaRow;\n  onChange: (schema: JSONSchema.BaseSchema) => void;\n}) {\n  return (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      className=\"pz:h-5 pz:px-1.5 pz:font-normal pz:text-muted-foreground\"\n      onClick={() => onChange(addRequiredToProperty(row.rootSchema, row.path))}\n      title=\"Make required\"\n    >\n      or null\n    </Button>\n  );\n}\n\n// ─── Row Component ──────────────────────────────────────────────\n\nfunction Row({\n  row,\n  onChange,\n  isReadOnly,\n}: {\n  row: SchemaRow;\n  onChange: (schema: JSONSchema.BaseSchema) => void;\n  isReadOnly: boolean;\n}) {\n  const handleRemove = useCallback(() => {\n    let newSchema = removeRequiredForProperty(row.rootSchema, row.path);\n    newSchema = removePathFromSchema(newSchema, row.path);\n    onChange(newSchema);\n  }, [onChange, row.rootSchema, row.path]);\n\n  const isDisabled = row.isDisabled;\n  const isPlaceholder = row.propertyName?.startsWith(EDITOR_PLACEHOLDER_TOKEN);\n\n  const showRequiredToggle =\n    !row.isRequired && !row.hideRequiredToggle && !isDisabled && !isPlaceholder && !isReadOnly;\n  const showOptionalIndicator =\n    !row.isRequired && !row.hideRequiredToggle && !isDisabled && !isPlaceholder && isReadOnly;\n  const showRequiredTag = row.isRequired && !row.hideRequiredToggle && !isDisabled && !isReadOnly;\n\n  return (\n    <div className=\"pz:schema-row pz:flex pz:items-center pz:gap-0 pz:text-sm\">\n      <span className=\"pz:whitespace-pre pz:font-mono pz:text-sm pz:font-thin pz:text-border\">\n        {row.prefix}\n      </span>\n      <div className=\"pz:flex pz:items-center\">\n        {row.propertyName && (\n          <RowPropertyName\n            row={row as SchemaRow & { propertyName: string }}\n            onChange={onChange}\n            handleRemove={handleRemove}\n            isReadOnly={isReadOnly}\n            isDisabled={isDisabled}\n          />\n        )}\n        {renderTag(row.rowType, {\n          schema: row.schema,\n          path: row.path,\n          typeOptions: row.typeOptions,\n          isDisabled: row.isDisabled,\n          isReadOnly: row.isReadOnly,\n          rootSchema: row.rootSchema,\n          onChange,\n        })}\n      </div>\n      {showOptionalIndicator && <span className=\"pz:ml-1 pz:text-muted-foreground\">or null</span>}\n      {showRequiredToggle && <RequiredToggle row={row} onChange={onChange} />}\n      {showRequiredTag && <RequiredTag row={row} onChange={onChange} />}\n      {row.isRemovable && !isDisabled && !isReadOnly && (\n        <DeleteButton onClick={handleRemove} title=\"Delete property\" />\n      )}\n    </div>\n  );\n}\n\n// ─── Auto-focus for new placeholders ────────────────────────────\n\nfunction PlaceholderFocuser() {\n  const [state, dispatch] = useSchemaEditorContext();\n  useEffect(() => {\n    if (!state.latestPlaceholderId) return;\n    const selector = `input[id=${\"id-\" + state.latestPlaceholderId.slice(3)}]`;\n    const input = document.querySelector<HTMLInputElement>(selector);\n    if (input == null || document.activeElement === input) return;\n    input.focus();\n    dispatch({ type: \"SET_LATEST_ADDED_PLACEHOLDER\", payload: \"\" });\n  }, [state.latestPlaceholderId, dispatch]);\n  return null;\n}\n\n// ─── Main SchemaEditor ──────────────────────────────────────────\n\ninterface SchemaEditorProps {\n  value: JSONSchema.BaseSchema;\n  onChange: (schema: JSONSchema.BaseSchema) => void;\n  isDisabled?: boolean;\n  isReadOnly?: boolean;\n}\n\nfunction SchemaEditorWrapper({\n  value,\n  onChange,\n  isDisabled = false,\n  isReadOnly = false,\n}: SchemaEditorProps) {\n  const rows = useMemo(\n    () =>\n      generateSchemaRows({\n        schema: value,\n        isDisabled,\n        isReadOnly,\n        initialLevel: 0,\n      }),\n    [value, isDisabled, isReadOnly],\n  );\n\n  return (\n    <div className=\"pz:items-stretch pz:whitespace-nowrap pz:text-sm\">\n      <PlaceholderFocuser />\n      {rows.map((r, i) => (\n        <Row\n          key={`${r.level}-${r.propertyName}-${r.path}-${i}`}\n          row={r}\n          isReadOnly={isReadOnly}\n          onChange={onChange}\n        />\n      ))}\n    </div>\n  );\n}\n\nexport function SchemaEditor(props: SchemaEditorProps) {\n  return (\n    <SchemaEditorContextProvider>\n      <SchemaEditorWrapper {...props} />\n    </SchemaEditorContextProvider>\n  );\n}\n"],"mappings":"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"}