@lostgradient/cinder 0.6.0 → 0.8.0

package/src/components/json-schema-editor/json-schema-editor.variables.ts

@@ -0,0 +1,3 @@
+const variables: readonly string[] = [];
+
+export default variables;

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

@@ -0,0 +1,175 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import { untrack } from 'svelte';
+import { classNames } from '../../utilities/class-names.ts';
+import { handleRovingKeydown } from '../../utilities/roving-tabindex.ts';
+import Badge from '../badge/badge.svelte';
+import Button from '../button/button.svelte';
+import CopyButton from '../copy-button/copy-button.svelte';
+let { state: editorState, localValidationErrorCount = 0, onUndo, onRedo, onRevert, class: className, } = $props();
+const validationBadgeVariant = $derived.by(() => {
+    if (localValidationErrorCount > 0)
+        return 'danger';
+    switch (editorState.validationStatus) {
+        case 'valid':
+            return 'success';
+        case 'invalid':
+            return 'danger';
+        case 'pending':
+            return 'neutral';
+    }
+});
+const validationBadgeText = $derived.by(() => {
+    if (localValidationErrorCount > 0) {
+        return `Invalid — ${localValidationErrorCount} field ${localValidationErrorCount === 1 ? 'error' : 'errors'}`;
+    }
+    switch (editorState.validationStatus) {
+        case 'valid':
+            return `Valid (${editorState.activeDraft})`;
+        case 'invalid':
+            return `Invalid${editorState.validationResult.errors.length > 0 ? ` — ${editorState.validationResult.errors.length} errors` : ''}`;
+        case 'pending':
+            return 'Validating…';
+    }
+});
+// ---- Roving tabindex ----
+let toolbarRightElement = $state();
+let rovingIndex = $state(0);
+/** Return the currently enabled action buttons inside the right toolbar slot. */
+function getActionButtons() {
+    if (!toolbarRightElement)
+        return [];
+    return Array.from(toolbarRightElement.querySelectorAll('button:not(:disabled)'));
+}
+/**
+ * Apply roving tabindex: exactly one enabled button gets tabindex=0, all
+ * others get tabindex=-1. When the current rovingIndex goes out of range
+ * (e.g. the previously-roved button becomes disabled), reset to the first
+ * enabled action and move DOM focus there only if focus was inside the
+ * toolbar.
+ */
+$effect(() => {
+    // Read each state field that can change which actions are enabled directly.
+    // Getters on the `editorState` prop track correctly because they read the
+    // closure's $state internally — no signature-string or `void` workaround is
+    // needed. The reads must stay in the reactive scope so the effect re-runs
+    // when participation changes.
+    void editorState.canUndo;
+    void editorState.canRedo;
+    void editorState.hasChanges;
+    void editorState.readonly;
+    void editorState.copyValue;
+    // Track `rovingIndex` too so a keydown/focusin handler moving the roved
+    // button re-applies the DOM tabindex on the next flush.
+    const currentRovingIndex = rovingIndex;
+    const buttons = getActionButtons();
+    if (buttons.length === 0) {
+        // No enabled actions: nothing to rove. Reset the index so a future
+        // re-enable starts from the first action rather than a stale offset.
+        // Write untracked: the effect already depends on `rovingIndex`, so an
+        // untracked write avoids re-triggering itself purely from its own reset.
+        untrack(() => {
+            rovingIndex = 0;
+        });
+        return;
+    }
+    // Clamp the roving index to the current participant count.
+    let activeIndex = currentRovingIndex;
+    if (activeIndex >= buttons.length) {
+        const wasFocusedInsideToolbar = toolbarRightElement?.contains(document.activeElement) ?? false;
+        activeIndex = 0;
+        untrack(() => {
+            rovingIndex = 0;
+        });
+        if (wasFocusedInsideToolbar) {
+            buttons[0]?.focus();
+        }
+    }
+    for (let index = 0; index < buttons.length; index += 1) {
+        const button = buttons[index];
+        if (button) {
+            button.tabIndex = index === activeIndex ? 0 : -1;
+        }
+    }
+});
+function handleKeydown(event) {
+    const buttons = getActionButtons();
+    if (buttons.length === 0)
+        return;
+    const currentIndex = buttons.findIndex((button) => button === document.activeElement);
+    if (currentIndex === -1)
+        return;
+    const nextIndex = handleRovingKeydown(event, currentIndex, buttons.length, {
+        isDisabled: () => false, // already filtered to enabled buttons only
+        vertical: true,
+        horizontal: true,
+    });
+    if (nextIndex !== null && nextIndex !== currentIndex) {
+        event.preventDefault();
+        rovingIndex = nextIndex;
+        buttons[nextIndex]?.focus();
+    }
+}
+function handleRightFocusin(event) {
+    const buttons = getActionButtons();
+    const index = buttons.findIndex((button) => button === event.target);
+    if (index !== -1) {
+        rovingIndex = index;
+    }
+}
+</script>
+
+<div
+  class={classNames('cinder-jse-toolbar', className)}
+  role="toolbar"
+  tabindex="-1"
+  aria-label="Schema editor actions"
+  onkeydown={handleKeydown}
+>
+  <div class="cinder-jse-toolbar__left">
+    <Badge variant={validationBadgeVariant}>{validationBadgeText}</Badge>
+    {#if editorState.validationResult.compileError}
+      <Badge variant="warning" title={editorState.validationResult.compileError}
+        >Compile warning</Badge
+      >
+    {/if}
+  </div>
+
+  <div
+    bind:this={toolbarRightElement}
+    class="cinder-jse-toolbar__right"
+    onfocusin={handleRightFocusin}
+  >
+    <Button
+      variant="ghost"
+      size="sm"
+      disabled={!editorState.canUndo || editorState.readonly}
+      onclick={() => onUndo?.()}
+    >
+      Undo
+    </Button>
+    <Button
+      variant="ghost"
+      size="sm"
+      disabled={!editorState.canRedo || editorState.readonly}
+      onclick={() => onRedo?.()}
+    >
+      Redo
+    </Button>
+    <CopyButton value={editorState.copyValue}>
+      {#snippet children()}Copy JSON{/snippet}
+      {#snippet confirmation()}Copied{/snippet}
+    </CopyButton>
+    <Button
+      variant="secondary"
+      size="sm"
+      disabled={!editorState.hasChanges || editorState.readonly}
+      onclick={() => onRevert?.()}
+    >
+      Revert
+    </Button>
+  </div>
+</div>

package/src/components/json-schema-editor/json-schema-validator.ts

@@ -0,0 +1,345 @@
+/**
+ * Ajv wrappers for JSON Schema meta-schema validation, compilability checks,
+ * and input normalisation.
+ *
+ * Two distinct validation signals are exposed:
+ *  - validateMetaSchema: does the document conform to the JSON Schema
+ *    meta-schema for the chosen draft?
+ *  - tryCompile: can Ajv compile this schema into a validator? Catches
+ *    issues meta-schema validation misses (unresolved $ref, unsupported
+ *    format, etc.).
+ *
+ * tryCompile uses a fresh Ajv instance per call so iterating on a schema
+ * with a stable $id never trips the "schema already exists" cache error.
+ */
+
+import Ajv from 'ajv';
+import Ajv2019 from 'ajv/dist/2019.js';
+import Ajv2020 from 'ajv/dist/2020.js';
+
+import type {
+  JsonSchemaDraft,
+  JsonSchemaKnownDraft,
+  JsonSchemaValidationError,
+  JsonSchemaValue,
+} from './json-schema-editor-types.ts';
+
+const DRAFT_2020_IDS = new Set([
+  'https://json-schema.org/draft/2020-12/schema',
+  'http://json-schema.org/draft/2020-12/schema',
+]);
+const DRAFT_2019_IDS = new Set([
+  'https://json-schema.org/draft/2019-09/schema',
+  'http://json-schema.org/draft/2019-09/schema',
+]);
+const DRAFT_07_IDS = new Set([
+  'http://json-schema.org/draft-07/schema#',
+  'http://json-schema.org/draft-07/schema',
+  'https://json-schema.org/draft-07/schema',
+  'https://json-schema.org/draft-07/schema#',
+]);
+
+function isObject(value: unknown): value is Record<string, unknown> {
+  return value !== null && typeof value === 'object' && !Array.isArray(value);
+}
+
+function getSchemaId(schema: unknown): string | undefined {
+  if (!isObject(schema)) return undefined;
+  const id = schema['$schema'];
+  return typeof id === 'string' ? id : undefined;
+}
+
+/**
+ * Detect which draft a schema declares via $schema. Returns '2020-12' when
+ * absent (newest stable). Returns 'unknown' for unrecognised values so
+ * callers can fall back deliberately.
+ */
+export function detectDraft(schema: unknown): JsonSchemaDraft {
+  const id = getSchemaId(schema);
+  if (!id) return '2020-12';
+  if (DRAFT_2020_IDS.has(id)) return '2020-12';
+  if (DRAFT_2019_IDS.has(id)) return '2019-09';
+  if (DRAFT_07_IDS.has(id)) return 'draft-07';
+  return 'unknown';
+}
+
+function resolveDraft(draft: JsonSchemaDraft | undefined): JsonSchemaKnownDraft {
+  if (!draft || draft === 'unknown') return '2020-12';
+  return draft;
+}
+
+// Long-lived meta-schema validators. Safe to share — they don't compile the
+// user's schema, only validate against the meta-schema.
+let metaAjv2020: Ajv2020 | null = null;
+let metaAjv2019: Ajv2019 | null = null;
+let metaAjv07: Ajv | null = null;
+
+function getMetaValidator(draft: JsonSchemaKnownDraft): Ajv | Ajv2020 | Ajv2019 {
+  if (draft === '2020-12') {
+    if (!metaAjv2020) metaAjv2020 = new Ajv2020({ strict: false, allErrors: true });
+    return metaAjv2020;
+  }
+  if (draft === '2019-09') {
+    if (!metaAjv2019) metaAjv2019 = new Ajv2019({ strict: false, allErrors: true });
+    return metaAjv2019;
+  }
+  if (!metaAjv07) metaAjv07 = new Ajv({ strict: false, allErrors: true });
+  return metaAjv07;
+}
+
+function ajvErrorsToValidationErrors(
+  errors: { instancePath?: string; message?: string; keyword?: string }[] | null | undefined,
+): JsonSchemaValidationError[] {
+  if (!errors) return [];
+  return errors.map((error) => ({
+    path: error.instancePath ?? '',
+    message: error.message ?? 'Validation error',
+    keyword: error.keyword ?? '',
+  }));
+}
+
+/**
+ * Validate a schema document against the meta-schema for the chosen draft.
+ * Boolean schemas (true / false) are always valid full-document schemas.
+ */
+export function validateMetaSchema(
+  schema: unknown,
+  draft?: JsonSchemaDraft,
+): { valid: boolean; errors: JsonSchemaValidationError[] } {
+  if (typeof schema === 'boolean') return { valid: true, errors: [] };
+  if (!isObject(schema)) {
+    return {
+      valid: false,
+      errors: [{ path: '', message: 'Schema must be an object or boolean', keyword: '' }],
+    };
+  }
+
+  const resolved = resolveDraft(draft ?? detectDraft(schema));
+  const ajv = getMetaValidator(resolved);
+  try {
+    const valid = ajv.validateSchema(schema);
+    return {
+      valid: Boolean(valid),
+      errors: ajvErrorsToValidationErrors(ajv.errors),
+    };
+  } catch (error) {
+    // Ajv throws synchronously when a schema references a meta-schema URI the
+    // instance doesn't know about (e.g. cross-draft $schema references). Treat
+    // as an invalid schema rather than an unhandled exception — the editor
+    // should surface this as a validation error, not crash the host.
+    return {
+      valid: false,
+      errors: [
+        {
+          path: '',
+          message: error instanceof Error ? error.message : 'Meta-schema validation failed',
+          keyword: '',
+        },
+      ],
+    };
+  }
+}
+
+/**
+ * Try to compile the schema. Surfaces unresolved $refs, unsupported formats,
+ * and other compile-time errors that meta-schema validation misses.
+ *
+ * Each call uses a fresh Ajv instance so repeated compilation of a schema
+ * with a stable $id does not collide with Ajv's internal cache.
+ */
+export function tryCompile(
+  schema: unknown,
+  draft?: JsonSchemaDraft,
+): { ok: true } | { ok: false; error: string } {
+  if (typeof schema === 'boolean') return { ok: true };
+  if (!isObject(schema)) {
+    return { ok: false, error: 'Schema must be an object or boolean' };
+  }
+
+  const resolved = resolveDraft(draft ?? detectDraft(schema));
+  let ajv: Ajv | Ajv2020 | Ajv2019;
+  if (resolved === '2020-12') {
+    ajv = new Ajv2020({ strict: false, addUsedSchema: false });
+  } else if (resolved === '2019-09') {
+    ajv = new Ajv2019({ strict: false, addUsedSchema: false });
+  } else {
+    ajv = new Ajv({ strict: false, addUsedSchema: false });
+  }
+
+  try {
+    ajv.compile(schema);
+    return { ok: true };
+  } catch (error) {
+    return {
+      ok: false,
+      error: error instanceof Error ? error.message : String(error),
+    };
+  }
+}
+
+export type ParsePosition = { line: number; column: number };
+
+function extractParsePosition(error: SyntaxError, source: string): ParsePosition | undefined {
+  // V8/Bun: SyntaxError.message often includes "at position N" or
+  // "in JSON at position N". Best-effort extraction; tests assert message
+  // presence only, not line/col.
+  const positionMatch = error.message.match(/position (\d+)/);
+  const positionString = positionMatch?.[1];
+  if (!positionString) return undefined;
+  const offset = Number.parseInt(positionString, 10);
+  if (Number.isNaN(offset) || offset < 0 || offset > source.length) return undefined;
+
+  let line = 1;
+  let column = 1;
+  for (let i = 0; i < offset; i += 1) {
+    if (source[i] === '\n') {
+      line += 1;
+      column = 1;
+    } else {
+      column += 1;
+    }
+  }
+  return { line, column };
+}
+
+export function tryParseJson(
+  text: string,
+):
+  | { ok: true; value: unknown }
+  | { ok: false; error: { message: string; line?: number; column?: number } } {
+  try {
+    return { ok: true, value: JSON.parse(text) };
+  } catch (error) {
+    if (error instanceof SyntaxError) {
+      const position = extractParsePosition(error, text);
+      const errorPayload: { message: string; line?: number; column?: number } = {
+        message: error.message,
+      };
+      if (position) {
+        errorPayload.line = position.line;
+        errorPayload.column = position.column;
+      }
+      return { ok: false, error: errorPayload };
+    }
+    return {
+      ok: false,
+      error: {
+        message: error instanceof Error ? error.message : String(error),
+      },
+    };
+  }
+}
+
+/**
+ * Strict JSON-compatibility check. Returns the offending path when the value
+ * cannot be safely round-tripped through JSON.stringify without loss.
+ *
+ * This catches what JSON.stringify would silently drop or reject:
+ * undefined, functions, symbols, BigInt, NaN, ±Infinity, and cycles.
+ */
+function findJsonIncompatibility(value: unknown, path: string, seen: Set<unknown>): string | null {
+  if (value === null) return null;
+
+  const valueType = typeof value;
+  if (valueType === 'string' || valueType === 'boolean') return null;
+  if (valueType === 'number') {
+    if (typeof value === 'number' && !Number.isFinite(value)) {
+      return `non-finite number at ${path || 'root'}`;
+    }
+    return null;
+  }
+  if (valueType === 'undefined') return `undefined at ${path || 'root'}`;
+  if (valueType === 'function') return `function at ${path || 'root'}`;
+  if (valueType === 'symbol') return `symbol at ${path || 'root'}`;
+  if (valueType === 'bigint') return `bigint at ${path || 'root'}`;
+
+  if (seen.has(value)) return `cycle at ${path || 'root'}`;
+  seen.add(value);
+
+  if (Array.isArray(value)) {
+    for (let i = 0; i < value.length; i += 1) {
+      const error = findJsonIncompatibility(value[i], `${path}[${i}]`, seen);
+      if (error) return error;
+    }
+    seen.delete(value);
+    return null;
+  }
+
+  if (!isObject(value)) return null;
+
+  const proto = Object.getPrototypeOf(value);
+  if (proto !== null && proto !== Object.prototype) {
+    const constructorName: string =
+      typeof proto.constructor?.name === 'string' ? proto.constructor.name : 'unknown';
+    return `non-plain object (${constructorName}) at ${path || 'root'}`;
+  }
+  for (const [key, child] of Object.entries(value)) {
+    const error = findJsonIncompatibility(child, `${path}.${key}`, seen);
+    if (error) return error;
+  }
+  seen.delete(value);
+  return null;
+}
+
+const PRETTY_INDENT = 2;
+
+/**
+ * Single entry point for accepting a schema input from a parent. Handles
+ * both string and object inputs and returns the raw + canonical text views
+ * the editor needs.
+ */
+export function normaliseSchemaInput(
+  input: JsonSchemaValue | string,
+):
+  | { ok: true; rawText: string; canonicalText: string; schema: JsonSchemaValue }
+  | { ok: false; rawText: string; error: string } {
+  if (typeof input === 'string') {
+    const parsed = tryParseJson(input);
+    if (!parsed.ok) {
+      return { ok: false, rawText: input, error: parsed.error.message };
+    }
+    if (typeof parsed.value !== 'boolean' && !isObject(parsed.value)) {
+      return {
+        ok: false,
+        rawText: input,
+        error: 'Top-level schema must be an object or boolean',
+      };
+    }
+    const schema = parsed.value as JsonSchemaValue;
+    return {
+      ok: true,
+      rawText: input,
+      canonicalText: JSON.stringify(schema, null, PRETTY_INDENT),
+      schema,
+    };
+  }
+
+  if (typeof input === 'boolean') {
+    return {
+      ok: true,
+      rawText: JSON.stringify(input),
+      canonicalText: JSON.stringify(input, null, PRETTY_INDENT),
+      schema: input,
+    };
+  }
+
+  if (!isObject(input)) {
+    return {
+      ok: false,
+      rawText: '',
+      error: 'Top-level schema must be an object or boolean',
+    };
+  }
+
+  const incompatibility = findJsonIncompatibility(input, '', new Set());
+  if (incompatibility) {
+    return { ok: false, rawText: '', error: incompatibility };
+  }
+
+  return {
+    ok: true,
+    rawText: JSON.stringify(input),
+    canonicalText: JSON.stringify(input, null, PRETTY_INDENT),
+    schema: input,
+  };
+}

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

@@ -0,0 +1,68 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+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 Textarea from '../textarea/textarea.svelte';
+import { tryParseJson, validateMetaSchema } from './json-schema-validator.ts';
+let { state, idPrefix, class: className } = $props();
+// Live (synchronous) parse + meta-schema status for the current draft.
+// The state container only debounces validation against the *committed*
+// schema; the JSON view runs an immediate cheap check on the *draft* so
+// the user gets instant feedback while typing.
+const draftParse = $derived(tryParseJson(state.jsonDraftText));
+const draftMeta = $derived.by(() => {
+    if (!draftParse.ok)
+        return null;
+    return validateMetaSchema(draftParse.value, state.activeDraft);
+});
+const draftErrorMessage = $derived.by(() => {
+    if (!draftParse.ok)
+        return draftParse.error.message;
+    if (draftMeta && !draftMeta.valid) {
+        return draftMeta.errors.map((e) => `${e.path || '(root)'}: ${e.message}`).join('\n');
+    }
+    return null;
+});
+const canApply = $derived(!state.readonly && state.jsonDraftIsDirty && draftParse.ok && draftMeta?.valid === true);
+const canDiscard = $derived(state.jsonDraftIsDirty && !state.readonly);
+</script>
+
+<div class={classNames('cinder-jse-json-view', className)}>
+  <div class="cinder-jse-json-view__toolbar">
+    {#if state.jsonDraftIsDirty}
+      <Badge variant="warning">Draft modified — Apply to commit</Badge>
+    {/if}
+    <Button variant="primary" size="sm" disabled={!canApply} onclick={() => state.applyJsonDraft()}>
+      Apply
+    </Button>
+    <Button
+      variant="secondary"
+      size="sm"
+      disabled={!canDiscard}
+      onclick={() => state.discardJsonDraft()}
+    >
+      Discard
+    </Button>
+  </div>
+
+  <Textarea
+    id={`${idPrefix}-textarea`}
+    label="JSON"
+    value={state.jsonDraftText}
+    disabled={state.readonly}
+    rows={20}
+    class="cinder-jse-json-view__textarea"
+    oninput={(event: Event) => state.setJsonDraftText((event.target as HTMLTextAreaElement).value)}
+  />
+
+  {#if draftErrorMessage}
+    <Alert variant="danger">
+      <pre class="cinder-jse-json-view__errors">{draftErrorMessage}</pre>
+    </Alert>
+  {/if}
+</div>