@lostgradient/cinder 0.6.0 → 0.7.0

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

@@ -0,0 +1,306 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import { onDestroy } from 'svelte';
+import Alert from '../alert/alert.svelte';
+import Button from '../button/button.svelte';
+import Chip from '../chip/chip.svelte';
+import Input from '../input/input.svelte';
+import PropertyEditor from './property-editor.svelte';
+import { calculatePropertyValidationErrorCount } from './property-list-validation.ts';
+let { idPrefix, properties, required, path, depth = 0, readonly = false, onvalidationerrorcount, onchange, } = $props();
+const propertyNames = $derived(Object.keys(properties));
+const requiredOnly = $derived(required.filter((name) => !propertyNames.includes(name)));
+// Per-row draft names so a partial typed name doesn't reshape the parent.
+let draftNames = $state({});
+let renameError = $state(null);
+let expanded = $state({});
+let childValidationCounts = $state({});
+const validationErrorCount = $derived(calculatePropertyValidationErrorCount(propertyNames, childValidationCounts, renameError !== null));
+$effect(() => {
+    onvalidationerrorcount?.(validationErrorCount);
+});
+onDestroy(() => {
+    onvalidationerrorcount?.(0);
+});
+function getDraftName(key) {
+    return draftNames[key] ?? key;
+}
+function uniqueNewKey() {
+    let suffix = 1;
+    let candidate = 'newField';
+    while (Object.prototype.hasOwnProperty.call(properties, candidate)) {
+        suffix += 1;
+        candidate = `newField${suffix}`;
+    }
+    return candidate;
+}
+function commitRename(oldKey) {
+    if (readonly)
+        return;
+    const draft = getDraftName(oldKey).trim();
+    if (!draft) {
+        renameError = 'Property name cannot be empty';
+        return;
+    }
+    if (draft === oldKey) {
+        renameError = null;
+        return;
+    }
+    if (Object.prototype.hasOwnProperty.call(properties, draft)) {
+        renameError = `Duplicate property name: ${draft}`;
+        return;
+    }
+    renameError = null;
+    const next = {};
+    for (const k of propertyNames) {
+        next[k === oldKey ? draft : k] = properties[k];
+    }
+    const nextRequired = required.map((name) => (name === oldKey ? draft : name));
+    delete draftNames[oldKey];
+    if (expanded[oldKey]) {
+        expanded[draft] = true;
+        delete expanded[oldKey];
+    }
+    const childCount = childValidationCounts[oldKey];
+    if (childCount !== undefined) {
+        const { [oldKey]: _removedChildCount, ...remainingChildCounts } = childValidationCounts;
+        childValidationCounts = { ...remainingChildCounts, [draft]: childCount };
+    }
+    onchange(next, nextRequired);
+}
+function deleteProperty(key) {
+    if (readonly)
+        return;
+    const next = { ...properties };
+    delete next[key];
+    const nextRequired = required.filter((name) => name !== key);
+    delete draftNames[key];
+    delete expanded[key];
+    const { [key]: _removedChildCount, ...remainingChildCounts } = childValidationCounts;
+    childValidationCounts = remainingChildCounts;
+    onchange(next, nextRequired);
+}
+function setChildValidationErrorCount(key, count) {
+    if ((childValidationCounts[key] ?? 0) === count)
+        return;
+    if (count === 0) {
+        const { [key]: _removedChildCount, ...remainingChildCounts } = childValidationCounts;
+        childValidationCounts = remainingChildCounts;
+        return;
+    }
+    childValidationCounts = { ...childValidationCounts, [key]: count };
+}
+function toggleExpanded(key, isOpen) {
+    expanded[key] = !isOpen;
+    if (isOpen)
+        setChildValidationErrorCount(key, 0);
+}
+function moveProperty(key, direction) {
+    if (readonly)
+        return;
+    const index = propertyNames.indexOf(key);
+    const target = index + direction;
+    if (target < 0 || target >= propertyNames.length)
+        return;
+    const reordered = [...propertyNames];
+    [reordered[index], reordered[target]] = [reordered[target], reordered[index]];
+    const next = {};
+    for (const name of reordered)
+        next[name] = properties[name];
+    onchange(next, required);
+}
+function toggleRequired(key) {
+    if (readonly)
+        return;
+    const set = new Set(required);
+    if (set.has(key))
+        set.delete(key);
+    else
+        set.add(key);
+    onchange(properties, [...set]);
+}
+function setPropertySchema(key, schema) {
+    if (readonly)
+        return;
+    onchange({ ...properties, [key]: schema }, required);
+}
+function addProperty() {
+    if (readonly)
+        return;
+    const key = uniqueNewKey();
+    onchange({ ...properties, [key]: { type: 'string' } }, required);
+    expanded[key] = true;
+}
+function summariseType(schema) {
+    if (typeof schema === 'boolean')
+        return schema ? 'true' : 'false';
+    const t = schema.type;
+    if (t === undefined)
+        return 'any';
+    if (Array.isArray(t))
+        return t.join(' | ');
+    return t;
+}
+// ===== Required-only chip editing =====
+let newRequiredOnlyName = $state('');
+function addRequiredOnly() {
+    if (readonly)
+        return;
+    const name = newRequiredOnlyName.trim();
+    if (!name) {
+        newRequiredOnlyName = '';
+        return;
+    }
+    if (required.includes(name)) {
+        newRequiredOnlyName = '';
+        return;
+    }
+    onchange(properties, [...required, name]);
+    newRequiredOnlyName = '';
+}
+function removeRequiredOnly(name) {
+    if (readonly)
+        return;
+    onchange(properties, required.filter((entry) => entry !== name));
+}
+</script>
+
+<div class="cinder-jse-property-list">
+  {#if renameError}
+    <Alert variant="danger">{renameError}</Alert>
+  {/if}
+
+  {#if propertyNames.length === 0}
+    <p class="cinder-jse-property-list__empty">No properties yet.</p>
+  {/if}
+
+  {#each propertyNames as key (key)}
+    {@const isRequired = required.includes(key)}
+    {@const isOpen = expanded[key] === true}
+    {@const panelId = `${idPrefix}-${key}-panel`}
+    <!--
+      Custom disclosure (not <details>/<summary>) so the action buttons can
+      live as siblings of the trigger rather than nested inside it.
+      <button> inside <summary> creates an ARIA "interactive within
+      interactive" violation.
+    -->
+    <div class="cinder-jse-property-row" data-cinder-required={isRequired ? '' : undefined}>
+      <div class="cinder-jse-property-row__summary" style={`--cinder-jse-property-depth: ${depth}`}>
+        <button
+          type="button"
+          class="cinder-jse-property-row__trigger"
+          aria-label={`${isOpen ? 'Collapse' : 'Expand'} ${key} property`}
+          aria-expanded={isOpen}
+          aria-controls={panelId}
+          onclick={() => toggleExpanded(key, isOpen)}
+        >
+          <span class="cinder-jse-property-row__chevron" aria-hidden="true">▸</span>
+          <span class="cinder-jse-property-row__name">{key}</span>
+          <span class="cinder-jse-property-row__type">{summariseType(properties[key] ?? {})}</span>
+        </button>
+        <span class="cinder-jse-property-row__spacer"></span>
+        <Button
+          variant={isRequired ? 'primary' : 'ghost'}
+          size="xs"
+          disabled={readonly}
+          aria-pressed={isRequired}
+          aria-label={isRequired ? 'Required (toggle off)' : 'Optional (toggle required)'}
+          onclick={() => toggleRequired(key)}
+        >
+          {isRequired ? 'Required' : 'Optional'}
+        </Button>
+        <Button
+          variant="ghost"
+          size="xs"
+          disabled={readonly}
+          aria-label="Move up"
+          onclick={() => moveProperty(key, -1)}
+        >
+          ↑
+        </Button>
+        <Button
+          variant="ghost"
+          size="xs"
+          disabled={readonly}
+          aria-label="Move down"
+          onclick={() => moveProperty(key, 1)}
+        >
+          ↓
+        </Button>
+        <Button
+          variant="ghost-danger"
+          size="xs"
+          disabled={readonly}
+          aria-label={`Delete ${key}`}
+          onclick={() => deleteProperty(key)}
+        >
+          Delete
+        </Button>
+      </div>
+
+      {#if isOpen}
+        <div id={panelId} class="cinder-jse-property-row__panel">
+          <Input
+            id={`${idPrefix}-${key}-name`}
+            label="Name"
+            value={getDraftName(key)}
+            disabled={readonly}
+            oninput={(event: Event) => (draftNames[key] = (event.target as HTMLInputElement).value)}
+            onblur={() => commitRename(key)}
+          />
+          <PropertyEditor
+            idPrefix={`${idPrefix}-${key}-schema`}
+            path={`${path}/${key}`}
+            depth={depth + 1}
+            {readonly}
+            value={properties[key] ?? {}}
+            onvalidationerrorcount={(count) => setChildValidationErrorCount(key, count)}
+            onchange={(next) => setPropertySchema(key, next)}
+          />
+        </div>
+      {/if}
+    </div>
+  {/each}
+
+  <Button variant="secondary" size="sm" disabled={readonly} onclick={addProperty}>
+    Add property
+  </Button>
+
+  {#if !readonly || requiredOnly.length > 0}
+    <details class="cinder-jse-required-only" open={requiredOnly.length > 0}>
+      <summary class="cinder-jse-required-only__summary">
+        Required without property schema ({requiredOnly.length})
+      </summary>
+      <div class="cinder-jse-required-only__panel">
+        {#each requiredOnly as name (name)}
+          <Chip
+            mode="removable"
+            label={name}
+            disabled={readonly}
+            onremove={() => removeRequiredOnly(name)}
+          />
+        {/each}
+        <Input
+          id={`${idPrefix}-required-only-add`}
+          label="Add required name"
+          value={newRequiredOnlyName}
+          disabled={readonly}
+          oninput={(event: Event) =>
+            (newRequiredOnlyName = (event.target as HTMLInputElement).value)}
+          onkeydown={(event: KeyboardEvent) => {
+            if (event.key === 'Enter') {
+              event.preventDefault();
+              addRequiredOnly();
+            }
+          }}
+        />
+        <Button variant="secondary" size="sm" disabled={readonly} onclick={addRequiredOnly}>
+          Add required name
+        </Button>
+      </div>
+    </details>
+  {/if}
+</div>

package/src/components/json-viewer/_json-viewer-node.svelte

@@ -0,0 +1,134 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import { untrack } from 'svelte';
+import Self from './_json-viewer-node.svelte';
+import { classNames } from '../../utilities/class-names.ts';
+let { value, keyName, depth, initialDepth, maxDepth, position, setSize, root = false, } = $props();
+const isObject = $derived(value !== null && typeof value === 'object');
+const isArray = $derived(Array.isArray(value));
+const tooDeep = $derived(depth >= maxDepth);
+// Seeded once from the initial depth vs. the configured initialDepth.
+let collapsed = $state(untrack(() => depth >= initialDepth));
+const entries = $derived.by(() => {
+    if (!isObject || tooDeep)
+        return [];
+    if (isArray) {
+        return value.map((item, i) => [i, item]);
+    }
+    return Object.entries(value);
+});
+// The key label renders inside the <button> so the focus ring encloses the
+// full row label + caret. The aria-label on the button provides a distinguishing
+// accessible name from the key (when present) and the collection shape so
+// sibling toggles are tellable apart.
+const itemCount = $derived(entries.length);
+const collectionLabel = $derived(`${isArray ? 'array' : 'object'}, ${itemCount} ${itemCount === 1 ? 'item' : 'items'}`);
+const toggleLabel = $derived(keyName === undefined ? collectionLabel : `${keyName}: ${collectionLabel}`);
+function valueClass(v) {
+    if (v === null)
+        return 'null';
+    if (typeof v === 'string')
+        return 'string';
+    if (typeof v === 'number')
+        return 'number';
+    if (typeof v === 'boolean')
+        return 'boolean';
+    return 'unknown';
+}
+</script>
+
+{#if isObject && !tooDeep}
+  <!-- svelte-ignore a11y_role_has_required_aria_props -->
+  <span
+    class={classNames('cinder-json-viewer__node')}
+    role="treeitem"
+    aria-expanded={!collapsed}
+    aria-label={toggleLabel}
+    aria-level={depth + 1}
+    aria-posinset={position}
+    aria-setsize={setSize}
+    tabindex={root ? 0 : -1}
+  >
+    <button
+      type="button"
+      class="cinder-json-viewer__toggle"
+      aria-label={toggleLabel}
+      tabindex="-1"
+      onclick={() => (collapsed = !collapsed)}
+    >
+      {#if keyName !== undefined}
+        <span class="cinder-json-viewer__key">{keyName}:</span>
+      {/if}
+      <span class="cinder-json-viewer__caret" data-cinder-collapsed={collapsed || undefined}></span>
+      <span class="cinder-json-viewer__brace">
+        {isArray ? '[' : '{'}
+      </span>
+      {#if collapsed}
+        <span class="cinder-json-viewer__summary"
+          >{itemCount} {itemCount === 1 ? 'item' : 'items'}</span
+        >
+        <span class="cinder-json-viewer__brace">{isArray ? ']' : '}'}</span>
+      {/if}
+    </button>
+    {#if !collapsed}
+      <ul class="cinder-json-viewer__children" role="group">
+        <!--
+          For objects `k` is the property name — a stable, correct key. For arrays
+          `k` is the index: JSON array elements carry no intrinsic identity, so if
+          the consumer swaps in a different array each child's collapsed $state
+          stays associated with its position rather than its value. This is an
+          accepted tradeoff given arrays have no stable per-item key.
+        -->
+        {#each entries as [k, v], index (k)}
+          <li role="none">
+            <Self
+              value={v}
+              keyName={k}
+              depth={depth + 1}
+              {initialDepth}
+              {maxDepth}
+              position={index + 1}
+              setSize={entries.length}
+            />
+          </li>
+        {/each}
+      </ul>
+      <span class="cinder-json-viewer__brace">{isArray ? ']' : '}'}</span>
+    {/if}
+  </span>
+{:else if isObject && tooDeep}
+  <!-- svelte-ignore a11y_role_has_required_aria_props -->
+  <span
+    class="cinder-json-viewer__node"
+    role="treeitem"
+    tabindex={root ? 0 : -1}
+    aria-level={depth + 1}
+    aria-posinset={position}
+    aria-setsize={setSize}
+  >
+    {#if keyName !== undefined}
+      <span class="cinder-json-viewer__key">{keyName}:</span>
+    {/if}
+    <span class="cinder-json-viewer__too-deep">…</span>
+  </span>
+{:else}
+  <!-- svelte-ignore a11y_role_has_required_aria_props -->
+  <span
+    class="cinder-json-viewer__node"
+    role="treeitem"
+    tabindex={root ? 0 : -1}
+    aria-level={depth + 1}
+    aria-posinset={position}
+    aria-setsize={setSize}
+  >
+    {#if keyName !== undefined}
+      <span class="cinder-json-viewer__key">{keyName}:</span>
+    {/if}
+    <span class="cinder-json-viewer__value" data-cinder-type={valueClass(value)}>
+      {#if typeof value === 'string'}"{value}"{:else}{String(value)}{/if}
+    </span>
+  </span>
+{/if}

package/src/components/json-viewer/index.ts

@@ -0,0 +1,6 @@
+import './json-viewer.css';
+import JsonViewer from './json-viewer.svelte';
+
+export default JsonViewer;
+export type { JsonViewerProps } from './json-viewer.types.ts';
+export { JsonViewer };

package/src/components/json-viewer/json-viewer.schema.ts

@@ -0,0 +1,38 @@
+import type { ComponentSchema } from '../../schema-types';
+
+const schema = {
+  $schema: 'https://json-schema.org/draft/2020-12/schema',
+  type: 'object',
+  properties: {
+    initialDepth: {
+      type: 'number',
+      description: 'Initial collapse depth. Nodes deeper than this start collapsed. Default 1.',
+    },
+    maxDepth: {
+      type: 'number',
+      description:
+        'Hard depth cap. Nodes deeper than this never render their children. Default 50.',
+    },
+    maxBytes: {
+      type: 'number',
+      description: 'Hard byte cap on the serialized payload. Default 1_048_576 (1 MB).',
+    },
+    class: {
+      type: 'string',
+      description: 'Additional class names merged with `.cinder-json-viewer`.',
+    },
+  },
+  additionalProperties: false,
+  metadata: {
+    unsupportedProps: [
+      {
+        name: 'value',
+        reason: 'unknown-shape',
+        required: true,
+        description: 'The value to render. Any JSON-serializable structure.',
+      },
+    ],
+  },
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;

package/src/components/json-viewer/json-viewer.svelte

@@ -0,0 +1,113 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import JsonViewerNode from './_json-viewer-node.svelte';
+import { classNames } from '../../utilities/class-names.ts';
+let { value, initialDepth = 1, maxDepth = 50, maxBytes = 1_048_576, class: className, } = $props();
+// Compute serialized size up front so we can short-circuit oversized payloads
+// before walking the tree. `JSON.stringify` can throw (circular references) or
+// throw on `BigInt`; distinguish that from "too large" so the fallback shows a
+// meaningful message instead of a garbage "~Infinity KB" size.
+const serialized = $derived.by(() => {
+    try {
+        const json = JSON.stringify(value);
+        // `JSON.stringify` returns `undefined` (not a throw) for top-level
+        // `undefined`, a `Symbol`, or a function — none of which are valid JSON.
+        // Treat those as unserializable rather than measuring the string "undefined".
+        if (typeof json !== 'string')
+            return { ok: false };
+        return { ok: true, size: new Blob([json]).size };
+    }
+    catch {
+        return { ok: false };
+    }
+});
+const unserializable = $derived(!serialized.ok);
+const tooLarge = $derived(serialized.ok && serialized.size > maxBytes);
+function handleTreeKeydown(event) {
+    const tree = event.currentTarget;
+    const items = Array.from(tree.querySelectorAll('[role="treeitem"]'));
+    const eventTarget = event.target instanceof HTMLElement ? event.target : null;
+    const current = eventTarget?.closest('[role="treeitem"]') ?? null;
+    const targetIsToggle = eventTarget?.closest('.cinder-json-viewer__toggle') !== null;
+    const currentIndex = current ? items.indexOf(current) : -1;
+    function focusItem(index) {
+        const item = items[index];
+        item?.focus();
+    }
+    if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        focusItem(Math.min(currentIndex + 1, items.length - 1));
+    }
+    else if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        focusItem(Math.max(currentIndex - 1, 0));
+    }
+    else if (event.key === 'Home') {
+        event.preventDefault();
+        focusItem(0);
+    }
+    else if (event.key === 'End') {
+        event.preventDefault();
+        focusItem(items.length - 1);
+    }
+    else if (event.key === 'ArrowRight' && current && !targetIsToggle) {
+        if (current.getAttribute('aria-expanded') === 'false') {
+            event.preventDefault();
+            current.querySelector('.cinder-json-viewer__toggle')?.click();
+        }
+        else if (current.getAttribute('aria-expanded') === 'true') {
+            const firstChild = current.querySelector('.cinder-json-viewer__children [role="treeitem"]');
+            if (firstChild) {
+                event.preventDefault();
+                firstChild.focus();
+            }
+        }
+    }
+    else if (event.key === 'ArrowLeft' && current && !targetIsToggle) {
+        if (current.getAttribute('aria-expanded') === 'true') {
+            event.preventDefault();
+            current.querySelector('.cinder-json-viewer__toggle')?.click();
+        }
+        else {
+            const parent = current.parentElement?.closest('[role="treeitem"]');
+            if (parent) {
+                event.preventDefault();
+                parent.focus();
+            }
+        }
+    }
+    else if ((event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') &&
+        current &&
+        !targetIsToggle) {
+        event.preventDefault();
+        const toggle = current.querySelector('.cinder-json-viewer__toggle');
+        toggle?.click();
+    }
+}
+</script>
+
+<div class={classNames('cinder-json-viewer', className)}>
+  {#if unserializable}
+    <div class="cinder-json-viewer__fallback" role="status">
+      <p>
+        This value can't be serialized as JSON (it may contain a circular reference or a BigInt).
+      </p>
+      <p>Pass a plain JSON-serializable value, or use the consumer's download or copy action.</p>
+    </div>
+  {:else if tooLarge}
+    <div class="cinder-json-viewer__fallback" role="status">
+      <p>
+        Payload too large to render (~{Math.round((serialized.ok ? serialized.size : 0) / 1024)} KB; cap
+        is {Math.round(maxBytes / 1024)} KB).
+      </p>
+      <p>Use the consumer's download or copy action to inspect the raw JSON.</p>
+    </div>
+  {:else}
+    <div role="tree" aria-label="JSON tree" tabindex="-1" onkeydown={handleTreeKeydown}>
+      <JsonViewerNode {value} depth={0} {initialDepth} {maxDepth} position={1} setSize={1} root />
+    </div>
+  {/if}
+</div>

package/src/components/json-viewer/json-viewer.types.ts

@@ -0,0 +1,25 @@
+/**
+ * Collapsible tree visualization of a JSON value. Hard caps from
+ * COMPONENT-COVERAGE-PLAN.md:
+ *
+ * - Synchronous render only — no virtualization, no chunking.
+ * - Payloads larger than `maxBytes` (default 1MB serialized) render a
+ *   fallback with copy/download actions instead of attempting the tree.
+ * - Maximum nested depth `maxDepth` (default 50). Deeper nodes render
+ *   "…" with a hint to inspect via a different tool.
+ *
+ * Consumers needing more (search, filter, virtualization, schema-aware
+ * rendering) should compose their own viewer.
+ */
+export type JsonViewerProps = {
+  /** The value to render. Any JSON-serializable structure. */
+  value: unknown;
+  /** Initial collapse depth. Nodes deeper than this start collapsed. Default 1. */
+  initialDepth?: number;
+  /** Hard depth cap. Nodes deeper than this never render their children. Default 50. */
+  maxDepth?: number;
+  /** Hard byte cap on the serialized payload. Default 1_048_576 (1 MB). */
+  maxBytes?: number;
+  /** Additional class names merged with `.cinder-json-viewer`. */
+  class?: string;
+};

package/src/components/json-viewer/json-viewer.variables.ts

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

package/src/components/kanban-board/index.ts

@@ -0,0 +1,15 @@
+import './kanban-board.css';
+import KanbanBoard from './kanban-board.svelte';
+
+export default KanbanBoard;
+export type {
+  KanbanBoardCardContext,
+  KanbanBoardCardMoveChange,
+  KanbanBoardChange,
+  KanbanBoardCollapseChange,
+  KanbanBoardColumn,
+  KanbanBoardColumnContext,
+  KanbanBoardColumnMoveChange,
+  KanbanBoardProps,
+} from './kanban-board.types.ts';
+export { KanbanBoard };