@lostgradient/cinder 0.7.0 → 0.9.0

package/src/components/chat-composer-popover/chat-composer-popover.types.ts

@@ -0,0 +1,88 @@
+import type { Snippet } from 'svelte';
+
+import type { PopoverPlacement } from '../popover/popover.types.ts';
+
+export type ChatComposerPopoverItem = {
+  /** Stable submitted value surfaced through onselect. */
+  value: string;
+  /** Default visible and accessible label for the command row. */
+  label: string;
+  /** Optional secondary text for the command row. */
+  description?: string | undefined;
+  /** Optional fuzzy-search aliases. */
+  keywords?: readonly string[] | undefined;
+  /** Whether this row is skipped by keyboard navigation and activation. */
+  disabled?: boolean | undefined;
+};
+
+export type ChatComposerPopoverTriggerMatch = {
+  active: true;
+  trigger: string;
+  query: string;
+  start: number;
+  end: number;
+};
+
+export type ChatComposerPopoverSelection<TItem extends ChatComposerPopoverItem> = {
+  item: TItem;
+  value: string;
+  query: string;
+  trigger: string;
+  range: {
+    start: number;
+    end: number;
+  };
+};
+
+export type ChatComposerPopoverComposerProps = {
+  composerRole: 'combobox';
+  composerAriaExpanded: boolean;
+  composerAriaControls: string | undefined;
+  composerAriaActiveDescendant: string | undefined;
+  composerAriaAutocomplete: 'list';
+  oncomposerinput: (value: string, event?: Event) => void;
+  oncomposerkeydown: (event: KeyboardEvent) => void;
+  oncomposerselectionchange: (event: Event) => void;
+  oncomposerblur: (event: FocusEvent) => void;
+};
+
+export type ChatComposerPopoverItemSnippetContext<TItem extends ChatComposerPopoverItem> = {
+  item: TItem;
+  query: string;
+  trigger: string;
+};
+
+export type ChatComposerPopoverProps<TItem extends ChatComposerPopoverItem> = {
+  /** Unique identifier used for the listbox and item ids. */
+  id: string;
+  /** Current composer value. Bind this to the same value as ChatInput. */
+  value?: string;
+  /** Consumer-owned command or mention definitions. */
+  items: readonly TItem[];
+  /** Trigger characters that open the popover. Default `['/', '@']`. */
+  triggers?: readonly string[];
+  /** Accessible listbox label. Default `'Composer suggestions'`. */
+  label?: string;
+  /** Caret-relative placement. Default `'bottom-start'`. */
+  placement?: PopoverPlacement;
+  /** Distance in px between the caret and popover. Default `6`. */
+  offset?: number;
+  /** Render the ChatInput or compatible composer with the provided overlay props. */
+  composer: Snippet<[ChatComposerPopoverComposerProps]>;
+  /** Optional custom row contents. Defaults to the item label and description. */
+  item?: Snippet<[ChatComposerPopoverItemSnippetContext<TItem>]>;
+  /** Optional empty state rendered when filtering produces no matching rows. */
+  empty?: Snippet;
+  /** Override trigger detection. */
+  detectTrigger?: (
+    value: string,
+    selectionStart: number,
+    selectionEnd: number,
+  ) => ChatComposerPopoverTriggerMatch | null;
+  /** Override filtering. */
+  filter?: (items: readonly TItem[], query: string, trigger: string) => readonly TItem[];
+  /** Invoked when an enabled item is selected by keyboard or pointer. */
+  onselect?: (selection: ChatComposerPopoverSelection<TItem>) => void;
+  /** Invoked when Escape, trigger loss, or outside pointerdown dismisses the popover. */
+  ondismiss?: () => void;
+};

package/src/components/chat-composer-popover/chat-composer-popover.variables.json

@@ -0,0 +1 @@
+[]

package/src/components/chat-composer-popover/chat-composer-popover.variables.ts

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

package/src/components/chat-composer-popover/index.ts

@@ -0,0 +1,19 @@
+import './chat-composer-popover.css';
+import ChatComposerPopover from './chat-composer-popover.svelte';
+
+export default ChatComposerPopover;
+export {
+  filterFuzzySubsequence,
+  fuzzySubsequenceScore,
+  type FuzzyFilterItem,
+  type FuzzyFilterResult,
+} from './chat-composer-popover-filter.ts';
+export type {
+  ChatComposerPopoverComposerProps,
+  ChatComposerPopoverItem,
+  ChatComposerPopoverItemSnippetContext,
+  ChatComposerPopoverProps,
+  ChatComposerPopoverSelection,
+  ChatComposerPopoverTriggerMatch,
+} from './chat-composer-popover.types.ts';
+export { ChatComposerPopover };

package/src/components/code-block/code-block.schema.json

@@ -18,6 +18,10 @@
       "type": "boolean",
       "description": "When true, render a copy button in the header."
     },
+    "showLanguageLabel": {
+      "type": "boolean",
+      "description": "Whether to render the language label in the header. Default `true`.\nPass `false` to keep `language`-driven highlighting without the visible\nheader chip; with `copyable` also unset, no header renders at all."
+    },
     "class": {
       "type": "string",
       "description": "Additional class names merged with `.cinder-code-block`."

package/src/components/code-block/code-block.schema.ts

@@ -22,6 +22,11 @@ const schema = {
       type: 'boolean',
       description: 'When true, render a copy button in the header.',
     },
+    showLanguageLabel: {
+      type: 'boolean',
+      description:
+        'Whether to render the language label in the header. Default `true`.\nPass `false` to keep `language`-driven highlighting without the visible\nheader chip; with `copyable` also unset, no header renders at all.',
+    },
     class: {
       type: 'string',
       description: 'Additional class names merged with `.cinder-code-block`.',

package/src/components/code-block/code-block.svelte

@@ -7,7 +7,7 @@ import { loadDefaultHighlighter } from './code-block-default-highlighter.ts';
 import { classNames } from '../../utilities/class-names.ts';
 import { devWarn } from '../../utilities/dev-warn.ts';
 import CopyButton from '../copy-button/copy-button.svelte';
-let { code, language, highlight, highlighter, copyable = false, class: className, } = $props();
+let { code, language, highlight, highlighter, copyable = false, showLanguageLabel = true, class: className, } = $props();
 let highlighted = $state(null);
 // Two-phase render contract: the server (and the first client paint) emits
 // the plain `<pre><code>` fallback because `$effect` never runs during SSR.
@@ -70,9 +70,9 @@ $effect(() => {
 </script>
 
 <div class={classNames('cinder-code-block', className)}>
-  {#if language || copyable}
+  {#if (language && showLanguageLabel) || copyable}
     <header class="cinder-code-block__header">
-      {#if language}
+      {#if language && showLanguageLabel}
         <span class="cinder-code-block__language">{language}</span>
       {/if}
       {#if copyable}

package/src/components/code-block/code-block.types.ts

@@ -49,6 +49,12 @@ export type CodeBlockProps = {
   highlighter?: Highlighter;
   /** When true, render a copy button in the header. */
   copyable?: boolean;
+  /**
+   * Whether to render the language label in the header. Default `true`.
+   * Pass `false` to keep `language`-driven highlighting without the visible
+   * header chip; with `copyable` also unset, no header renders at all.
+   */
+  showLanguageLabel?: boolean;
   /** Additional class names merged with `.cinder-code-block`. */
   class?: string;
 };

package/src/components/command-item/command-item.svelte

@@ -15,8 +15,9 @@ const commandList = getCommandListContext();
 // CommandMenu items can opt into parent-owned activation. Read untracked
 // because this is a one-time discard, not a reactive dependency.
 void untrack(() => selectionMode);
-// Stable id assigned by the palette on registration.
-let itemId = $state(null);
+// Live id assigned by the parent command list on registration.
+let registrationHandle = $state(null);
+const itemId = $derived(registrationHandle?.id ?? null);
 // Register with the palette at attach time, unregister on detach. Using an
 // attachment (rather than onMount) means the DOM node is available at
 // registration, so the palette can sort items by document order for
@@ -26,15 +27,15 @@ const registerWithPalette = (node) => {
     // call mutates the palette's $state registrations list, which feeds derived
     // values the attachment indirectly depends on — producing an update cycle.
     return untrack(() => {
-        const { id, unregister } = commandList.register({
+        const registeredItem = commandList.register({
             getValue: () => value,
             getOnselect: () => onselect,
             getDisabled: () => disabled,
         }, node);
-        itemId = id;
+        registrationHandle = registeredItem;
         return () => {
-            unregister();
-            itemId = null;
+            registeredItem.unregister();
+            registrationHandle = null;
         };
     });
 };

package/src/components/command-menu/command-menu.schema.json

@@ -2,6 +2,10 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "type": "object",
   "properties": {
+    "listboxId": {
+      "type": "string",
+      "description": "Stable listbox id. Defaults to a generated component id."
+    },
     "open": {
       "type": "boolean",
       "description": "Open state. Bindable. Default `false`."

package/src/components/command-menu/command-menu.schema.ts

@@ -4,6 +4,10 @@ const schema = {
   $schema: 'https://json-schema.org/draft/2020-12/schema',
   type: 'object',
   properties: {
+    listboxId: {
+      type: 'string',
+      description: 'Stable listbox id. Defaults to a generated component id.',
+    },
     open: {
       type: 'boolean',
       description: 'Open state. Bindable. Default `false`.',

package/src/components/command-menu/command-menu.svelte

@@ -10,8 +10,8 @@ import { classNames } from '../../utilities/class-names.ts';
 import { setCommandListContext } from '../_internal/command-list-context.ts';
 import { createCommandListState } from '../_internal/create-command-list-state.svelte.ts';
 import { createPortalAttachment } from '../portal/index.ts';
-const listboxId = $props.id();
-let { open = $bindable(false), anchor, caretIndex, query = $bindable(''), items, empty, placement = 'bottom-start', offset = 6, label = 'Commands', onselect, ondismiss, onstatechange, class: className, } = $props();
+const fallbackListboxId = $props.id();
+let { listboxId = fallbackListboxId, open = $bindable(false), anchor, caretIndex, query = $bindable(''), items, empty, placement = 'bottom-start', offset = 6, label = 'Commands', onselect, ondismiss, onstatechange, class: className, } = $props();
 const portalAttachment = createPortalAttachment({
     target: () => document.body,
     inheritAttributes: true,
@@ -19,7 +19,7 @@ const portalAttachment = createPortalAttachment({
 });
 let mounted = $state(false);
 let listElement = $state();
-const commandList = createCommandListState(listboxId);
+const commandList = createCommandListState(() => listboxId);
 const showEmpty = $derived(mounted && open && commandList.registrationsReady && commandList.registrations.length === 0);
 const caretAnchor = $derived.by(() => {
     const anchorElement = anchor;
@@ -43,6 +43,9 @@ const anchoredOverlay = createAnchoredOverlay({
 $effect(() => {
     mounted = true;
 });
+$effect(() => {
+    commandList.syncListboxId(listboxId);
+});
 $effect(() => {
     if (!open) {
         commandList.resetActiveItem();
@@ -54,7 +57,10 @@ $effect(() => {
     commandList.refreshRegistrationsReady();
 });
 $effect(() => {
-    onstatechange?.({ listboxId, activeItemId: open ? commandList.activeItemId : null });
+    onstatechange?.({
+        listboxId: commandList.listboxId,
+        activeItemId: open ? commandList.activeItemId : null,
+    });
 });
 $effect(() => {
     commandList.scrollActiveItemIntoView();
@@ -117,7 +123,12 @@ $effect(() => {
     data-cinder-position-ready={anchoredOverlay.positionReady}
     style={anchoredOverlay.positionStyle}
   >
-    <ul id={listboxId} role="listbox" aria-label={label} class="cinder-command-menu__listbox">
+    <ul
+      id={commandList.listboxId}
+      role="listbox"
+      aria-label={label}
+      class="cinder-command-menu__listbox"
+    >
       {@render items({ query })}
     </ul>
     {#if showEmpty && empty}

package/src/components/command-menu/command-menu.types.ts

@@ -20,6 +20,8 @@ export type CommandMenuState = {
 };
 
 export type CommandMenuProps = {
+  /** Stable listbox id. Defaults to a generated component id. */
+  listboxId?: string;
   /** Open state. Bindable. Default `false`. */
   open?: boolean;
   /** Text field used as the caret-position anchor. */

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

@@ -62,7 +62,21 @@ function valueClass(v) {
       {#if keyName !== undefined}
         <span class="cinder-json-viewer__key">{keyName}:</span>
       {/if}
-      <span class="cinder-json-viewer__caret" data-cinder-collapsed={collapsed || undefined}></span>
+      <svg
+        class="cinder-json-viewer__caret"
+        data-cinder-collapsed={collapsed || undefined}
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        aria-hidden="true"
+        focusable="false"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06z"
+          clip-rule="evenodd"
+        ></path>
+      </svg>
       <span class="cinder-json-viewer__brace">
         {isArray ? '[' : '{'}
       </span>

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

@@ -80,12 +80,10 @@
   }
 
   .cinder-json-viewer__caret {
-    display: inline-block;
-    width: 0;
-    height: 0;
-    border-inline-start: 0.25rem solid transparent;
-    border-inline-end: 0.25rem solid transparent;
-    border-top: 0.375rem solid currentColor;
+    flex: 0 0 auto;
+    width: 0.75rem;
+    height: 0.75rem;
+    color: var(--cinder-text-muted);
     transition: transform var(--cinder-duration-fast) var(--cinder-ease-standard);
   }
 
@@ -93,6 +91,12 @@
     transform: rotate(-90deg);
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    .cinder-json-viewer__caret {
+      transition: none;
+    }
+  }
+
   .cinder-json-viewer__brace {
     color: var(--cinder-text-muted);
   }

package/src/components/navigation-bar/navigation-bar.svelte

@@ -10,8 +10,9 @@ const FALLBACK_ROOT_FONT_SIZE_PX = 16;
 const regionId = $props.id();
 let { class: className, placement = 'top', showLabels = 'always', menuTogglePlacement = 'after-brand', brand, items, actions, menuToggle, mobileMenuOpen = $bindable(false), label = 'Main navigation', 
 // Strip these from rest so they cannot collide with internal attributes.
-'aria-label': _ariaLabel, 'data-collapsible': _dataCollapsible, 'data-cinder-placement': _dataCinderPlacement, 'data-cinder-label-visibility': _dataCinderLabelVisibility, 'data-cinder-menu-toggle-placement': _dataCinderMenuTogglePlacement, onkeydown: consumerOnKeyDown, ...rest } = $props();
+'aria-label': _ariaLabel, 'data-collapsible': _dataCollapsible, 'data-cinder-placement': _dataCinderPlacement, 'data-cinder-label-visibility': _dataCinderLabelVisibility, 'data-cinder-menu-toggle-placement': _dataCinderMenuTogglePlacement, onclick: consumerOnClick, onkeydown: consumerOnKeyDown, ...rest } = $props();
 const navigationItemSelector = '[data-cinder-navigation-item]';
+const toggleFocusSelector = '.cinder-navigation-bar__menu-toggle button, .cinder-navigation-bar__menu-toggle [href], .cinder-navigation-bar__menu-toggle input, .cinder-navigation-bar__menu-toggle select, .cinder-navigation-bar__menu-toggle textarea, .cinder-navigation-bar__menu-toggle [tabindex]:not([tabindex="-1"])';
 const isCollapsible = $derived(placement === 'top' && menuToggle !== undefined);
 let isMobileLayout = $state(false);
 const variant = $derived(placement === 'bottom'
@@ -95,15 +96,56 @@ function isEnabledNavigationItem(item) {
     return item.getAttribute('aria-disabled') !== 'true' && !item.hasAttribute('disabled');
 }
 function getEventNavigationItem(event) {
-    if (!(event.target instanceof HTMLElement) || !itemsRegionElement)
+    if (!(event.target instanceof Element) || !itemsRegionElement)
         return null;
     const navigationItem = event.target.closest(navigationItemSelector);
     if (!navigationItem || !itemsRegionElement.contains(navigationItem))
         return null;
-    if (navigationItem !== event.target)
-        return null;
     return navigationItem;
 }
+function isModifiedClick(event) {
+    return event.button !== 0 || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+}
+function opensOutsideCurrentPage(item) {
+    if (!(item instanceof HTMLAnchorElement))
+        return false;
+    const target = item.getAttribute('target');
+    return (item.hasAttribute('download') ||
+        (target !== null && target.trim() !== '' && target.trim().toLowerCase() !== '_self'));
+}
+function canCloseAfterItemActivation(item, event) {
+    return (isCollapsible &&
+        isMobileLayout &&
+        mobileMenuOpen &&
+        isEnabledNavigationItem(item) &&
+        !isModifiedClick(event) &&
+        !opensOutsideCurrentPage(item));
+}
+function moveFocusBeforeClosingItemsRegion() {
+    if (!browser || !itemsRegionElement)
+        return;
+    const activeElement = document.activeElement;
+    if (activeElement instanceof Element && itemsRegionElement.contains(activeElement)) {
+        focusMenuToggle();
+    }
+}
+function focusMenuToggle() {
+    const focusTarget = toggleElement ?? navigationBarElement?.querySelector(toggleFocusSelector);
+    focusTarget?.focus();
+}
+function handleClick(event) {
+    if (consumerOnClick) {
+        const currentTarget = event.currentTarget instanceof HTMLElement ? event.currentTarget : navigationBarElement;
+        consumerOnClick.call(currentTarget, event);
+    }
+    if (event.defaultPrevented)
+        return;
+    const navigationItem = getEventNavigationItem(event);
+    if (!navigationItem || !canCloseAfterItemActivation(navigationItem, event))
+        return;
+    moveFocusBeforeClosingItemsRegion();
+    mobileMenuOpen = false;
+}
 function focusAdjacentNavigationItem(currentItem, direction) {
     const items = getNavigationItems();
     if (items.length === 0)
@@ -129,12 +171,11 @@ function handleKeyDown(event) {
         return;
     if (event.key === 'Escape' && isCollapsible && isMobileLayout && mobileMenuOpen) {
         mobileMenuOpen = false;
-        // Return focus synchronously — toggleElement is captured on each click.
-        toggleElement?.focus();
+        focusMenuToggle();
         return;
     }
     const navigationItem = getEventNavigationItem(event);
-    if (!navigationItem)
+    if (!navigationItem || navigationItem !== event.target)
         return;
     if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
         event.preventDefault();
@@ -159,6 +200,7 @@ function handleKeyDown(event) {
   data-cinder-placement={placement}
   data-cinder-label-visibility={showLabels}
   data-cinder-menu-toggle-placement={menuTogglePlacement}
+  onclick={handleClick}
   onkeydown={handleKeyDown}
 >
   {#if isCollapsible && menuToggle && menuTogglePlacement === 'before-brand'}

package/src/components/payload-inspector/index.ts

@@ -3,10 +3,8 @@ import PayloadInspector from './payload-inspector.svelte';
 
 export default PayloadInspector;
 export type {
-  PayloadInspectorMeta,
   PayloadInspectorProps,
   PayloadInspectorSchemaProps,
   PayloadInspectorSchemaValue,
-  PayloadInspectorView,
 } from './payload-inspector.types.ts';
 export { PayloadInspector };

package/src/components/payload-inspector/payload-inspector.css

@@ -1,16 +1,12 @@
 @layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
 @import '../badge/badge.css';
-@import '../code-block/code-block.css';
 @import '../copy-button/copy-button.css';
-@import '../description-list/description-list.css';
 @import '../json-viewer/json-viewer.css';
-@import '../tabs/tabs.css';
 
 @layer cinder.components {
   .cinder-payload-inspector {
     display: flex;
     flex-direction: column;
-    gap: var(--cinder-space-0);
     border: 1px solid var(--cinder-border-muted);
     border-radius: var(--cinder-radius-md);
     overflow: hidden;
@@ -27,7 +23,7 @@
     align-items: center;
     justify-content: space-between;
     gap: var(--cinder-space-2);
-    padding: var(--cinder-space-2) var(--cinder-space-3);
+    padding: var(--cinder-space-1) var(--cinder-space-2) var(--cinder-space-1) var(--cinder-space-3);
     background: var(--cinder-surface-raised);
     border-bottom: 1px solid var(--cinder-border-muted);
     flex-wrap: wrap;
@@ -55,71 +51,29 @@
   }
 
   /* ----------------------------------------
-   * Tab list within inspector
-   * ---------------------------------------- */
-
-  .cinder-payload-inspector__tabs {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    min-block-size: 0;
-  }
-
-  /* ----------------------------------------
-   * Panel content areas
+   * Panel content
    * ---------------------------------------- */
 
   .cinder-payload-inspector__panel {
-    padding: var(--cinder-space-4);
-    overflow: auto;
-  }
-
-  .cinder-payload-inspector__panel--code {
-    padding: var(--cinder-space-0);
-  }
-
-  /* ----------------------------------------
-   * Raw view (CodeBlock wrapper)
-   * ---------------------------------------- */
-
-  .cinder-payload-inspector__raw {
-    /* Remove the built-in CodeBlock rounded corners so the block sits flush
-       inside the panel. Border radius is handled by the outer inspector. */
-    border-radius: 0;
-  }
-
-  /* ----------------------------------------
-   * Summary view
-   * ---------------------------------------- */
-
-  .cinder-payload-inspector__summary {
-    display: flex;
-    flex-direction: column;
-    gap: var(--cinder-space-4);
-  }
-
-  .cinder-payload-inspector__summary-badges {
-    display: flex;
-    align-items: center;
-    gap: var(--cinder-space-2);
-    flex-wrap: wrap;
-  }
-
-  .cinder-payload-inspector__summary-value {
     display: flex;
     flex-direction: column;
     gap: var(--cinder-space-2);
+    padding: var(--cinder-space-2);
+    overflow: auto;
   }
 
-  .cinder-payload-inspector__summary-value-label {
-    font-size: var(--cinder-text-xs);
-    font-weight: var(--cinder-font-medium);
-    color: var(--cinder-text-muted);
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
+  /* JsonViewer carries its own border/background/padding for standalone use,
+     but nested here it would double the framing this component's own header
+     bar + outer border already provide — strip it back to flush content. */
+  .cinder-payload-inspector__panel .cinder-json-viewer {
+    padding: 0;
+    border: none;
+    border-radius: 0;
+    background: transparent;
   }
 
   .cinder-payload-inspector__primitive {
+    margin: 0;
     font-family: var(--cinder-font-mono);
     font-size: var(--cinder-text-sm);
     color: var(--cinder-text);
@@ -127,6 +81,7 @@
     padding: var(--cinder-space-2) var(--cinder-space-3);
     border-radius: var(--cinder-radius-sm);
     border: 1px solid var(--cinder-border-muted);
+    white-space: pre-wrap;
     word-break: break-all;
   }
 
@@ -156,24 +111,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: var(--cinder-space-8) var(--cinder-space-4);
+    padding: var(--cinder-space-4);
     color: var(--cinder-text-disabled);
     font-size: var(--cinder-text-sm);
     font-style: italic;
   }
-
-  /* ----------------------------------------
-   * Focus ring on focusable elements we own
-   * ---------------------------------------- */
-
-  .cinder-payload-inspector:focus-visible {
-    outline: var(--cinder-ring-width) solid transparent;
-    box-shadow: var(--_cinder-focus-ring-shadow);
-  }
-
-  @media (forced-colors: active) {
-    .cinder-payload-inspector:focus-visible {
-      outline: var(--cinder-ring-width) solid ButtonText;
-    }
-  }
 }

package/src/components/payload-inspector/payload-inspector.examples.json

@@ -6,26 +6,26 @@
     {
       "id": "basic",
       "title": "Basic payload inspector",
-      "description": "Inspect a structured object payload with summary metadata, interactive tree, and raw JSON views.",
-      "code": "<script lang=\"ts\">\n  import { PayloadInspector } from '@lostgradient/cinder/payload-inspector';\n\n  const payload = {\n    userId: 'u_8f2a3b',\n    action: 'checkout',\n    cart: {\n      items: [\n        { id: 'p_001', name: 'Widget', qty: 2, price: 19.99 },\n        { id: 'p_002', name: 'Gadget', qty: 1, price: 49.95 },\n      ],\n      total: 89.93,\n    },\n    timestamp: '2026-06-11T14:22:00Z',\n    flags: { guestCheckout: false, promoApplied: true },\n  };\n</script>\n\n<PayloadInspector\n  value={payload}\n  meta={{\n    contentType: 'application/json',\n    source: 'checkout-workflow',\n    timestamp: '2026-06-11T14:22:00Z',\n  }}\n/>\n"
+      "description": "Inspect a structured object payload as an interactive tree with a copy action and byte size.",
+      "code": "<script lang=\"ts\">\n  import { PayloadInspector } from '@lostgradient/cinder/payload-inspector';\n\n  const payload = {\n    userId: 'u_8f2a3b',\n    action: 'checkout',\n    cart: {\n      items: [\n        { id: 'p_001', name: 'Widget', qty: 2, price: 19.99 },\n        { id: 'p_002', name: 'Gadget', qty: 1, price: 49.95 },\n      ],\n      total: 89.93,\n    },\n    timestamp: '2026-06-11T14:22:00Z',\n    flags: { guestCheckout: false, promoApplied: true },\n  };\n</script>\n\n<PayloadInspector value={payload} label=\"Checkout payload\" />\n"
     },
     {
       "id": "edge-cases",
       "title": "Edge cases",
       "description": "Demonstrates null, invalid JSON, and empty payload states in the inspector.",
-      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { PayloadInspector } from '@lostgradient/cinder/payload-inspector';\n\n  type Scenario = 'empty' | 'null' | 'invalid-json' | 'truncated' | 'primitive';\n\n  let scenario = $state<Scenario>('empty');\n\n  const scenarios: Record<Scenario, { value?: unknown; truncated?: boolean; label: string }> = {\n    empty: { value: undefined, label: 'No payload' },\n    null: { value: null, label: 'Null value' },\n    'invalid-json': { value: '{ not valid json at all', label: 'Invalid JSON string' },\n    truncated: { value: { partial: 'data', more: '...' }, truncated: true, label: 'Truncated' },\n    primitive: { value: 42, label: 'Number primitive' },\n  };\n\n  const current = $derived(scenarios[scenario]);\n</script>\n\n<div style=\"display: flex; flex-direction: column; gap: 1rem;\">\n  <div style=\"display: flex; gap: 0.5rem; flex-wrap: wrap;\">\n    {#each Object.keys(scenarios) as key (key)}\n      <Button\n        variant={scenario === key ? 'primary' : 'secondary'}\n        size=\"sm\"\n        onclick={() => (scenario = key as Scenario)}\n      >\n        {scenarios[key as Scenario].label}\n      </Button>\n    {/each}\n  </div>\n\n  <PayloadInspector\n    value={current.value}\n    truncated={current.truncated ?? false}\n    meta={{ source: 'edge-case-demo' }}\n  />\n</div>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { PayloadInspector } from '@lostgradient/cinder/payload-inspector';\n\n  type Scenario = 'empty' | 'null' | 'invalid-json' | 'truncated' | 'primitive';\n\n  let scenario = $state<Scenario>('empty');\n\n  const scenarios: Record<Scenario, { value?: unknown; truncated?: boolean; label: string }> = {\n    empty: { value: undefined, label: 'No payload' },\n    null: { value: null, label: 'Null value' },\n    'invalid-json': { value: '{ not valid json at all', label: 'Invalid JSON string' },\n    truncated: { value: { partial: 'data', more: '...' }, truncated: true, label: 'Truncated' },\n    primitive: { value: 42, label: 'Number primitive' },\n  };\n\n  const current = $derived(scenarios[scenario]);\n</script>\n\n<div style=\"display: flex; flex-direction: column; gap: 1rem;\">\n  <div style=\"display: flex; gap: 0.5rem; flex-wrap: wrap;\">\n    {#each Object.keys(scenarios) as key (key)}\n      <Button\n        variant={scenario === key ? 'primary' : 'secondary'}\n        size=\"sm\"\n        onclick={() => (scenario = key as Scenario)}\n      >\n        {scenarios[key as Scenario].label}\n      </Button>\n    {/each}\n  </div>\n\n  <PayloadInspector value={current.value} truncated={current.truncated ?? false} />\n</div>\n"
     },
     {
       "id": "signal-payload",
       "title": "Signal payload",
       "description": "Inspect a workflow signal payload — a common pattern in activity result dashboards.",
-      "code": "<script lang=\"ts\">\n  import { PayloadInspector } from '@lostgradient/cinder/payload-inspector';\n\n  const signalPayload = {\n    signalName: 'PaymentConfirmed',\n    data: {\n      transactionId: 'txn_5e8b2a',\n      amount: 89.93,\n      currency: 'USD',\n      provider: 'stripe',\n      confirmedAt: '2026-06-11T14:23:01Z',\n      metadata: {\n        statementDescriptor: 'ACME STORE',\n        riskScore: 0.12,\n      },\n    },\n    sentAt: '2026-06-11T14:23:01.543Z',\n    correlationId: 'ord_9c4e1f',\n  };\n</script>\n\n<PayloadInspector\n  value={signalPayload}\n  meta={{\n    contentType: 'application/json',\n    source: 'payment-service',\n    timestamp: '2026-06-11T14:23:01Z',\n  }}\n/>\n"
+      "code": "<script lang=\"ts\">\n  import { PayloadInspector } from '@lostgradient/cinder/payload-inspector';\n\n  const signalPayload = {\n    signalName: 'PaymentConfirmed',\n    data: {\n      transactionId: 'txn_5e8b2a',\n      amount: 89.93,\n      currency: 'USD',\n      provider: 'stripe',\n      confirmedAt: '2026-06-11T14:23:01Z',\n      metadata: {\n        statementDescriptor: 'ACME STORE',\n        riskScore: 0.12,\n      },\n    },\n    sentAt: '2026-06-11T14:23:01.543Z',\n    correlationId: 'ord_9c4e1f',\n  };\n</script>\n\n<PayloadInspector value={signalPayload} label=\"Signal payload\" />\n"
     },
     {
       "id": "workflow-input",
       "title": "Workflow input",
       "description": "Inspecting a workflow launch payload with signal input, retry policy, and schedule metadata.",
-      "code": "<script lang=\"ts\">\n  import { PayloadInspector } from '@lostgradient/cinder/payload-inspector';\n\n  const workflowInput = {\n    workflowType: 'OrderFulfillment',\n    input: {\n      orderId: 'ord_9c4e1f',\n      customerId: 'cust_221a',\n      priority: 'express',\n      items: ['sku-100', 'sku-201', 'sku-303'],\n      shipTo: {\n        name: 'Alex Rivera',\n        address: '42 Elm St',\n        city: 'Springfield',\n        zip: '12345',\n      },\n    },\n    retryPolicy: {\n      maximumAttempts: 3,\n      initialInterval: '1s',\n      maximumInterval: '30s',\n      backoffCoefficient: 2,\n    },\n    searchAttributes: {\n      OrderStatus: 'pending',\n      CustomerId: 'cust_221a',\n    },\n  };\n</script>\n\n<PayloadInspector\n  value={workflowInput}\n  meta={{\n    contentType: 'application/json',\n    source: 'order-service',\n    timestamp: '2026-06-11T09:15:42Z',\n  }}\n/>\n"
+      "code": "<script lang=\"ts\">\n  import { PayloadInspector } from '@lostgradient/cinder/payload-inspector';\n\n  const workflowInput = {\n    workflowType: 'OrderFulfillment',\n    input: {\n      orderId: 'ord_9c4e1f',\n      customerId: 'cust_221a',\n      priority: 'express',\n      items: ['sku-100', 'sku-201', 'sku-303'],\n      shipTo: {\n        name: 'Alex Rivera',\n        address: '42 Elm St',\n        city: 'Springfield',\n        zip: '12345',\n      },\n    },\n    retryPolicy: {\n      maximumAttempts: 3,\n      initialInterval: '1s',\n      maximumInterval: '30s',\n      backoffCoefficient: 2,\n    },\n    searchAttributes: {\n      OrderStatus: 'pending',\n      CustomerId: 'cust_221a',\n    },\n  };\n</script>\n\n<PayloadInspector value={workflowInput} label=\"Workflow input\" />\n"
     }
   ]
 }