@lostgradient/cinder 0.5.0 → 0.6.0

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

@@ -1,341 +0,0 @@
-<script lang="ts" module>
-  import type { JsonSchemaValue } from './json-schema-editor-types.ts';
-
-  export type PropertyListProps = {
-    idPrefix: string;
-    properties: Record<string, JsonSchemaValue>;
-    required: string[];
-    path: string;
-    depth?: number;
-    readonly?: boolean;
-    onvalidationerrorcount?: ((count: number) => void) | undefined;
-    onchange: (properties: Record<string, JsonSchemaValue>, required: string[]) => void;
-  };
-</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,
-  }: PropertyListProps = $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<Record<string, string>>({});
-  let renameError = $state<string | null>(null);
-  let expanded = $state<Record<string, boolean>>({});
-  let childValidationCounts = $state<Record<string, number>>({});
-
-  const validationErrorCount = $derived(
-    calculatePropertyValidationErrorCount(
-      propertyNames,
-      childValidationCounts,
-      renameError !== null,
-    ),
-  );
-
-  $effect(() => {
-    onvalidationerrorcount?.(validationErrorCount);
-  });
-
-  onDestroy(() => {
-    onvalidationerrorcount?.(0);
-  });
-
-  function getDraftName(key: string): string {
-    return draftNames[key] ?? key;
-  }
-
-  function uniqueNewKey(): string {
-    let suffix = 1;
-    let candidate = 'newField';
-    while (Object.prototype.hasOwnProperty.call(properties, candidate)) {
-      suffix += 1;
-      candidate = `newField${suffix}`;
-    }
-    return candidate;
-  }
-
-  function commitRename(oldKey: string) {
-    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: Record<string, JsonSchemaValue> = {};
-    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: string) {
-    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: string, count: number): void {
-    if ((childValidationCounts[key] ?? 0) === count) return;
-    if (count === 0) {
-      const { [key]: _removedChildCount, ...remainingChildCounts } = childValidationCounts;
-      childValidationCounts = remainingChildCounts;
-      return;
-    }
-    childValidationCounts = { ...childValidationCounts, [key]: count };
-  }
-
-  function toggleExpanded(key: string, isOpen: boolean): void {
-    expanded[key] = !isOpen;
-    if (isOpen) setChildValidationErrorCount(key, 0);
-  }
-
-  function moveProperty(key: string, direction: -1 | 1) {
-    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: Record<string, JsonSchemaValue> = {};
-    for (const name of reordered) next[name] = properties[name]!;
-    onchange(next, required);
-  }
-
-  function toggleRequired(key: string) {
-    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: string, schema: JsonSchemaValue) {
-    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: JsonSchemaValue): string {
-    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: string) {
-    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

@@ -1,161 +0,0 @@
-<script lang="ts" module>
-  /**
-   * Internal recursive node for JsonViewer. Not part of the public API;
-   * consumers import JsonViewer directly.
-   */
-  export type JsonViewerNodeProps = {
-    value: unknown;
-    keyName?: string | number;
-    depth: number;
-    initialDepth: number;
-    maxDepth: number;
-    position: number;
-    setSize: number;
-    root?: boolean;
-  };
-</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,
-  }: JsonViewerNodeProps = $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 as unknown[]).map((item, i) => [i, item] as const);
-    }
-    return Object.entries(value as Record<string, unknown>);
-  });
-
-  // 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: unknown): string {
-    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

@@ -1,6 +0,0 @@
-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.svelte

@@ -1,134 +0,0 @@
-<script lang="ts" module>
-  /**
-   * @cinder
-   * @category data-display
-   * @status stable
-   * @purpose Collapsible tree visualization of an arbitrary JSON value with hard depth and byte caps and a fallback for oversized payloads.
-   * @tag json
-   * @tag inspector
-   * @tag tree
-   * @useWhen Inspecting structured API responses, debug payloads, or configuration documents inside an admin or developer surface.
-   * @useWhen Rendering a JSON-serializable value with predictable initial-collapse behavior and no virtualization needs.
-   * @avoidWhen The payload is large enough to need search, filter, or virtualization — compose a custom viewer instead.
-   * @avoidWhen Showing arbitrary source code rather than a JSON value — code-block is the right surface for that.
-   * @related code-block, tree
-   */
-  export type { JsonViewerProps } from './json-viewer.types.ts';
-</script>
-
-<script lang="ts">
-  import type { JsonViewerProps } from './json-viewer.types.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,
-  }: JsonViewerProps = $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((): { ok: true; size: number } | { ok: false } => {
-    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: KeyboardEvent): void {
-    const tree = event.currentTarget as HTMLElement;
-    const items = Array.from(tree.querySelectorAll<HTMLElement>('[role="treeitem"]'));
-    const eventTarget = event.target instanceof HTMLElement ? event.target : null;
-    const current = eventTarget?.closest<HTMLElement>('[role="treeitem"]') ?? null;
-    const targetIsToggle = eventTarget?.closest('.cinder-json-viewer__toggle') !== null;
-    const currentIndex = current ? items.indexOf(current) : -1;
-
-    function focusItem(index: number): void {
-      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<HTMLButtonElement>('.cinder-json-viewer__toggle')?.click();
-      } else if (current.getAttribute('aria-expanded') === 'true') {
-        const firstChild = current.querySelector<HTMLElement>(
-          '.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<HTMLButtonElement>('.cinder-json-viewer__toggle')?.click();
-      } else {
-        const parent = current.parentElement?.closest<HTMLElement>('[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<HTMLButtonElement>('.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

@@ -1,25 +0,0 @@
-/**
- * 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/kanban-board/index.ts

@@ -1,15 +0,0 @@
-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 };