@lostgradient/cinder 0.5.0 → 0.7.0

package/src/components/json-schema-editor/property-editor.svelte

@@ -1,25 +1,5 @@
 <script lang="ts" module>
-  import type { JsonSchemaTypeName, JsonSchemaValue } from './json-schema-editor-types.ts';
-
-  export type PropertyEditorProps = {
-    /** Stable identifier prefix for ARIA wiring. */
-    idPrefix: string;
-    /** The schema node being edited. */
-    value: JsonSchemaValue;
-    /** Path to this node within the root schema, for stable coalesce keys. */
-    path: string;
-    /** Recursion depth — used to collapse deeply-nested nodes by default. */
-    depth?: number;
-    /** Whether the editor is read-only. */
-    readonly?: boolean;
-    /** Called when nested form-only validation errors change. */
-    onvalidationerrorcount?: ((count: number) => void) | undefined;
-    /** Called whenever the value changes. */
-    onchange: (next: JsonSchemaValue, options?: { coalesceKey?: string; label?: string }) => void;
-    class?: string;
-  };
-
-  export const PRIMITIVE_TYPES: readonly JsonSchemaTypeName[] = [
+export const PRIMITIVE_TYPES = [
     'string',
     'number',
     'integer',
@@ -27,10 +7,9 @@
     'null',
     'object',
     'array',
-  ] as const;
-
-  /** Editable keywords with dedicated UI. Everything else is preserved-only. */
-  export const EDITABLE_KEYWORDS = new Set<string>([
+];
+/** Editable keywords with dedicated UI. Everything else is preserved-only. */
+export const EDITABLE_KEYWORDS = new Set([
     'type',
     'title',
     'description',
@@ -60,292 +39,249 @@
     'not',
     '$ref',
     '$schema',
-  ]);
-
-  /** Default render-collapsed depth for child nodes. */
-  export const DEFAULT_COLLAPSE_DEPTH = 3;
-
-  /** Hard recursion limit — deeper nodes show a placeholder. */
-  export const MAX_RENDER_DEPTH = 30;
-
-  export const NUMBER_CONSTRAINT_FIELDS = [
+]);
+/** Default render-collapsed depth for child nodes. */
+export const DEFAULT_COLLAPSE_DEPTH = 3;
+/** Hard recursion limit — deeper nodes show a placeholder. */
+export const MAX_RENDER_DEPTH = 30;
+export const NUMBER_CONSTRAINT_FIELDS = [
     { key: 'minimum', label: 'Minimum' },
     { key: 'maximum', label: 'Maximum' },
     { key: 'exclusiveMinimum', label: 'Exclusive minimum' },
     { key: 'exclusiveMaximum', label: 'Exclusive maximum' },
     { key: 'multipleOf', label: 'Multiple of' },
-  ] as const;
-
-  export type NumberConstraintKeyword = (typeof NUMBER_CONSTRAINT_FIELDS)[number]['key'];
-
-  // The branch-keying helper is extracted to a `.ts` sibling because TypeScript's
-  // ambient `*.svelte` shape doesn't surface module-block named exports cleanly,
-  // and we want it directly unit-testable.
-  export { reconcileCompositionBranchKeys } from './composition-branch-keys.ts';
+];
+// The branch-keying helper is extracted to a `.ts` sibling because TypeScript's
+// ambient `*.svelte` shape doesn't surface module-block named exports cleanly,
+// and we want it directly unit-testable.
+export { reconcileCompositionBranchKeys } from './composition-branch-keys.ts';
 </script>
 
 <script lang="ts">
-  import { onDestroy } from 'svelte';
-  import { classNames } from '../../utilities/class-names.ts';
-  import Alert from '../alert/alert.svelte';
-  import Badge from '../badge/badge.svelte';
-  import Button from '../button/button.svelte';
-  import Checkbox from '../checkbox/checkbox.svelte';
-  import Input from '../input/input.svelte';
-  import Tooltip from '../tooltip/tooltip.svelte';
-
-  import { reconcileCompositionBranchKeys } from './composition-branch-keys.ts';
-  import type { JsonSchemaObject } from './json-schema-editor-types.ts';
-  import PropertyEditor from './property-editor.svelte';
-  import PropertyList from './property-list.svelte';
-
-  let {
-    idPrefix,
-    value,
-    path,
-    depth = 0,
-    readonly = false,
-    onvalidationerrorcount,
-    onchange,
-    class: className,
-  }: PropertyEditorProps = $props();
-
-  // ===== Boolean schema short-circuit =====
-  const isBooleanSchema = $derived(typeof value === 'boolean');
-
-  // ===== Object-shape derivations =====
-  const objectValue = $derived.by<JsonSchemaObject>(() => {
-    if (typeof value === 'boolean') return {};
+import { onDestroy } from 'svelte';
+import { classNames } from '../../utilities/class-names.ts';
+import Alert from '../alert/alert.svelte';
+import Badge from '../badge/badge.svelte';
+import Button from '../button/button.svelte';
+import Checkbox from '../checkbox/checkbox.svelte';
+import Input from '../input/input.svelte';
+import Tooltip from '../tooltip/tooltip.svelte';
+import { reconcileCompositionBranchKeys } from './composition-branch-keys.ts';
+import PropertyEditor from './property-editor.svelte';
+import PropertyList from './property-list.svelte';
+let { idPrefix, value, path, depth = 0, readonly = false, onvalidationerrorcount, onchange, class: className, } = $props();
+// ===== Boolean schema short-circuit =====
+const isBooleanSchema = $derived(typeof value === 'boolean');
+// ===== Object-shape derivations =====
+const objectValue = $derived.by(() => {
+    if (typeof value === 'boolean')
+        return {};
     return value;
-  });
-
-  // Preserve original `type` representation: scalar vs single-element array.
-  const originalTypeRepresentation = $derived<'scalar' | 'array' | 'absent'>(
-    objectValue.type === undefined
-      ? 'absent'
-      : Array.isArray(objectValue.type)
+});
+// Preserve original `type` representation: scalar vs single-element array.
+const originalTypeRepresentation = $derived(objectValue.type === undefined
+    ? 'absent'
+    : Array.isArray(objectValue.type)
         ? 'array'
-        : 'scalar',
-  );
-
-  const selectedTypes = $derived.by<JsonSchemaTypeName[]>(() => {
+        : 'scalar');
+const selectedTypes = $derived.by(() => {
     const t = objectValue.type;
-    if (t === undefined) return [];
+    if (t === undefined)
+        return [];
     return Array.isArray(t) ? [...t] : [t];
-  });
-
-  const isAnyType = $derived(selectedTypes.length === 0);
-
-  const preservedKeys = $derived.by(() => {
+});
+const isAnyType = $derived(selectedTypes.length === 0);
+const preservedKeys = $derived.by(() => {
     return Object.keys(objectValue).filter((key) => !EDITABLE_KEYWORDS.has(key));
-  });
-
-  // ===== Mutation helpers =====
-  function patch(
-    edits: Partial<JsonSchemaObject>,
-    opts: { coalesceKey?: string; label?: string } | undefined = undefined,
-  ) {
-    if (readonly) return;
-    const next: JsonSchemaObject = { ...objectValue, ...edits };
+});
+// ===== Mutation helpers =====
+function patch(edits, opts = undefined) {
+    if (readonly)
+        return;
+    const next = { ...objectValue, ...edits };
     // Drop keys whose new value is undefined so we don't accumulate noise.
     for (const key of Object.keys(edits)) {
-      if (next[key] === undefined) delete next[key];
+        if (next[key] === undefined)
+            delete next[key];
     }
     onchange(next, opts);
-  }
-
-  function setTypeFromCheckboxes(types: JsonSchemaTypeName[]) {
-    if (readonly) return;
+}
+function setTypeFromCheckboxes(types) {
+    if (readonly)
+        return;
     if (types.length === 0) {
-      patch({ type: undefined }, { label: 'change type' });
-      return;
+        patch({ type: undefined }, { label: 'change type' });
+        return;
     }
     if (types.length === 1) {
-      // Preserve original representation when going back to a single type.
-      const next = originalTypeRepresentation === 'array' ? types : types[0]!;
-      patch({ type: next }, { label: 'change type' });
-      return;
+        // Preserve original representation when going back to a single type.
+        const next = originalTypeRepresentation === 'array' ? types : types[0];
+        patch({ type: next }, { label: 'change type' });
+        return;
     }
     patch({ type: types }, { label: 'change type' });
-  }
-
-  function toggleType(type: JsonSchemaTypeName, checked: boolean) {
+}
+function toggleType(type, checked) {
     const current = new Set(selectedTypes);
-    if (checked) current.add(type);
-    else current.delete(type);
+    if (checked)
+        current.add(type);
+    else
+        current.delete(type);
     setTypeFromCheckboxes([...current]);
-  }
-
-  function setAny(any: boolean) {
+}
+function setAny(any) {
     if (any) {
-      setTypeFromCheckboxes([]);
-    } else {
-      // Unchecking "Any" with no specific type selected would leave the schema
-      // typeless again — default to 'object' so the user has something to work with.
-      if (selectedTypes.length === 0) setTypeFromCheckboxes(['object']);
+        setTypeFromCheckboxes([]);
     }
-  }
-
-  function convertBooleanToObject() {
-    if (readonly) return;
+    else {
+        // Unchecking "Any" with no specific type selected would leave the schema
+        // typeless again — default to 'object' so the user has something to work with.
+        if (selectedTypes.length === 0)
+            setTypeFromCheckboxes(['object']);
+    }
+}
+function convertBooleanToObject() {
+    if (readonly)
+        return;
     onchange({}, { label: 'convert to object schema' });
-  }
-
-  function parseOptionalFiniteNumber(raw: string): number | undefined {
-    if (raw === '') return undefined;
+}
+function parseOptionalFiniteNumber(raw) {
+    if (raw === '')
+        return undefined;
     const parsed = Number(raw);
     return Number.isFinite(parsed) ? parsed : undefined;
-  }
-
-  function numberConstraintValue(key: NumberConstraintKeyword): string {
+}
+function numberConstraintValue(key) {
     const value = objectValue[key];
     return typeof value === 'number' ? value.toString() : '';
-  }
-
-  function patchNumberConstraint(key: NumberConstraintKeyword, raw: string) {
-    patch({ [key]: parseOptionalFiniteNumber(raw) } as Partial<JsonSchemaObject>, {
-      coalesceKey: `${key}:${path}`,
-      label: `edit ${key}`,
+}
+function patchNumberConstraint(key, raw) {
+    patch({ [key]: parseOptionalFiniteNumber(raw) }, {
+        coalesceKey: `${key}:${path}`,
+        label: `edit ${key}`,
     });
-  }
-
-  // ===== Visibility flags for type-specific sections =====
-  const showStringConstraints = $derived(selectedTypes.includes('string'));
-  const showNumberConstraints = $derived(
-    selectedTypes.includes('number') || selectedTypes.includes('integer'),
-  );
-  const showObjectConstraints = $derived(selectedTypes.includes('object'));
-  const showArrayConstraints = $derived(selectedTypes.includes('array'));
-
-  // ===== Recursion guard =====
-  const tooDeep = $derived(depth >= MAX_RENDER_DEPTH);
-  // Keep the root expanded; child nodes start collapsed at depth >= DEFAULT_COLLAPSE_DEPTH.
-  let userExpanded = $state(false);
-  const collapsedByDefault = $derived(depth >= DEFAULT_COLLAPSE_DEPTH);
-  const collapsed = $derived(collapsedByDefault && !userExpanded);
-
-  function summaryLine(): string {
+}
+// ===== Visibility flags for type-specific sections =====
+const showStringConstraints = $derived(selectedTypes.includes('string'));
+const showNumberConstraints = $derived(selectedTypes.includes('number') || selectedTypes.includes('integer'));
+const showObjectConstraints = $derived(selectedTypes.includes('object'));
+const showArrayConstraints = $derived(selectedTypes.includes('array'));
+// ===== Recursion guard =====
+const tooDeep = $derived(depth >= MAX_RENDER_DEPTH);
+// Keep the root expanded; child nodes start collapsed at depth >= DEFAULT_COLLAPSE_DEPTH.
+let userExpanded = $state(false);
+const collapsedByDefault = $derived(depth >= DEFAULT_COLLAPSE_DEPTH);
+const collapsed = $derived(collapsedByDefault && !userExpanded);
+function summaryLine() {
     if (typeof value === 'boolean')
-      return value ? 'true (allow anything)' : 'false (allow nothing)';
-    const parts: string[] = [];
+        return value ? 'true (allow anything)' : 'false (allow nothing)';
+    const parts = [];
     if (objectValue.type !== undefined) {
-      parts.push(Array.isArray(objectValue.type) ? objectValue.type.join('|') : objectValue.type);
-    } else {
-      parts.push('any');
+        parts.push(Array.isArray(objectValue.type) ? objectValue.type.join('|') : objectValue.type);
+    }
+    else {
+        parts.push('any');
     }
     if (objectValue.properties) {
-      parts.push(`${Object.keys(objectValue.properties).length} props`);
+        parts.push(`${Object.keys(objectValue.properties).length} props`);
     }
-    if (objectValue.title) parts.push(`"${objectValue.title}"`);
+    if (objectValue.title)
+        parts.push(`"${objectValue.title}"`);
     return parts.join(' · ');
-  }
-
-  // ===== Children (object/array) =====
-  let childValidationCounts = $state<Record<string, number>>({});
-  const validationErrorCount = $derived(
-    Object.values(childValidationCounts).reduce((total, count) => total + count, 0),
-  );
-
-  $effect(() => {
+}
+// ===== Children (object/array) =====
+let childValidationCounts = $state({});
+const validationErrorCount = $derived(Object.values(childValidationCounts).reduce((total, count) => total + count, 0));
+$effect(() => {
     onvalidationerrorcount?.(validationErrorCount);
-  });
-
-  onDestroy(() => {
+});
+onDestroy(() => {
     onvalidationerrorcount?.(0);
-  });
-
-  function setChildValidationErrorCount(key: string, count: number): void {
-    if ((childValidationCounts[key] ?? 0) === count) return;
+});
+function setChildValidationErrorCount(key, count) {
+    if ((childValidationCounts[key] ?? 0) === count)
+        return;
     if (count === 0) {
-      const { [key]: _removedChildCount, ...remainingChildCounts } = childValidationCounts;
-      childValidationCounts = remainingChildCounts;
-      return;
+        const { [key]: _removedChildCount, ...remainingChildCounts } = childValidationCounts;
+        childValidationCounts = remainingChildCounts;
+        return;
     }
     childValidationCounts = { ...childValidationCounts, [key]: count };
-  }
-
-  function patchProperties(properties: Record<string, JsonSchemaValue>, required: string[]) {
-    const edits: Partial<JsonSchemaObject> = { properties };
+}
+function patchProperties(properties, required) {
+    const edits = { properties };
     edits.required = required.length > 0 ? required : undefined;
     patch(edits, { label: 'edit properties' });
-  }
-
-  function setItems(items: JsonSchemaValue) {
+}
+function setItems(items) {
     patch({ items }, { label: 'edit items' });
-  }
-
-  // ===== Composition =====
-  function patchComposition(
-    keyword: 'oneOf' | 'anyOf' | 'allOf' | 'not',
-    next: JsonSchemaValue[] | JsonSchemaValue | undefined,
-  ) {
-    patch({ [keyword]: next } as Partial<JsonSchemaObject>, {
-      label: `edit ${keyword}`,
+}
+// ===== Composition =====
+function patchComposition(keyword, next) {
+    patch({ [keyword]: next }, {
+        label: `edit ${keyword}`,
     });
-  }
-
-  // Stable identity keys for composition branches. Plain counter (not $state) so
-  // generating a new key never writes reactive state.
-  let nextCompositionBranchKey = 1;
-  function createCompositionBranchKey(): string {
+}
+// Stable identity keys for composition branches. Plain counter (not $state) so
+// generating a new key never writes reactive state.
+let nextCompositionBranchKey = 1;
+function createCompositionBranchKey() {
     return `branch-${nextCompositionBranchKey++}`;
-  }
-
-  // Per-keyword key arrays as separate $state values so the template reacts to
-  // add/remove operations. $effect.pre reconciles them before the DOM updates.
-  // Writing only when the count actually changed avoids an infinite loop.
-  let allOfKeys = $state<string[]>([]);
-  let anyOfKeys = $state<string[]>([]);
-  let oneOfKeys = $state<string[]>([]);
-
-  $effect.pre(() => {
+}
+// Per-keyword key arrays as separate $state values so the template reacts to
+// add/remove operations. $effect.pre reconciles them before the DOM updates.
+// Writing only when the count actually changed avoids an infinite loop.
+let allOfKeys = $state([]);
+let anyOfKeys = $state([]);
+let oneOfKeys = $state([]);
+$effect.pre(() => {
     const allOfCount = objectValue.allOf?.length ?? 0;
     if (allOfKeys.length !== allOfCount) {
-      allOfKeys = reconcileCompositionBranchKeys(allOfKeys, allOfCount, createCompositionBranchKey);
+        allOfKeys = reconcileCompositionBranchKeys(allOfKeys, allOfCount, createCompositionBranchKey);
     }
-  });
-  $effect.pre(() => {
+});
+$effect.pre(() => {
     const anyOfCount = objectValue.anyOf?.length ?? 0;
     if (anyOfKeys.length !== anyOfCount) {
-      anyOfKeys = reconcileCompositionBranchKeys(anyOfKeys, anyOfCount, createCompositionBranchKey);
+        anyOfKeys = reconcileCompositionBranchKeys(anyOfKeys, anyOfCount, createCompositionBranchKey);
     }
-  });
-  $effect.pre(() => {
+});
+$effect.pre(() => {
     const oneOfCount = objectValue.oneOf?.length ?? 0;
     if (oneOfKeys.length !== oneOfCount) {
-      oneOfKeys = reconcileCompositionBranchKeys(oneOfKeys, oneOfCount, createCompositionBranchKey);
+        oneOfKeys = reconcileCompositionBranchKeys(oneOfKeys, oneOfCount, createCompositionBranchKey);
     }
-  });
-
-  const compositionBranchKeys = $derived({
+});
+const compositionBranchKeys = $derived({
     allOf: allOfKeys,
     anyOf: anyOfKeys,
     oneOf: oneOfKeys,
-  });
-
-  function setKeywordKeys(keyword: 'allOf' | 'anyOf' | 'oneOf', keys: string[]) {
-    if (keyword === 'allOf') allOfKeys = keys;
-    else if (keyword === 'anyOf') anyOfKeys = keys;
-    else oneOfKeys = keys;
-  }
-
-  function removeCompositionBranch(keyword: 'allOf' | 'anyOf' | 'oneOf', branchIndex: number) {
-    const list = Array.isArray(objectValue[keyword]) ? [...objectValue[keyword]!] : [];
+});
+function setKeywordKeys(keyword, keys) {
+    if (keyword === 'allOf')
+        allOfKeys = keys;
+    else if (keyword === 'anyOf')
+        anyOfKeys = keys;
+    else
+        oneOfKeys = keys;
+}
+function removeCompositionBranch(keyword, branchIndex) {
+    const list = Array.isArray(objectValue[keyword]) ? [...objectValue[keyword]] : [];
     const removedBranchKey = compositionBranchKeys[keyword][branchIndex];
     const nextBranchKeys = [...compositionBranchKeys[keyword]];
     list.splice(branchIndex, 1);
     nextBranchKeys.splice(branchIndex, 1);
     setKeywordKeys(keyword, nextBranchKeys);
-    if (removedBranchKey) setChildValidationErrorCount(`${keyword}:${removedBranchKey}`, 0);
+    if (removedBranchKey)
+        setChildValidationErrorCount(`${keyword}:${removedBranchKey}`, 0);
     patchComposition(keyword, list.length > 0 ? list : undefined);
-  }
-
-  function addCompositionBranch(keyword: 'allOf' | 'anyOf' | 'oneOf') {
-    const list = Array.isArray(objectValue[keyword]) ? [...objectValue[keyword]!] : [];
+}
+function addCompositionBranch(keyword) {
+    const list = Array.isArray(objectValue[keyword]) ? [...objectValue[keyword]] : [];
     list.push({});
     setKeywordKeys(keyword, [...compositionBranchKeys[keyword], createCompositionBranchKey()]);
     patchComposition(keyword, list);
-  }
+}
 </script>
 
 <div class={classNames('cinder-jse-property-editor', className)} data-cinder-jse-depth={depth}>