@lostgradient/cinder 0.8.0 → 0.9.0

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/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"
     }
   ]
 }

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

@@ -7,38 +7,15 @@
     },
     "truncated": {
       "type": "boolean",
-      "description": "When true, the payload has been truncated by the producer (e.g. because it\nexceeded a wire size limit). The inspector renders a truncation badge in the\nsummary and a notice above the raw view."
+      "description": "When true, the payload has been truncated by the producer (e.g. because it\nexceeded a wire size limit). The inspector renders a truncation badge in\nthe header."
     },
     "maxBytes": {
       "type": "number",
-      "description": "Maximum byte size before the tree view is replaced with an oversize\nplaceholder. Defaults to 1,048,576 (1 MB). Does not affect the raw view."
-    },
-    "meta": {
-      "type": "object",
-      "properties": {
-        "contentType": {
-          "type": "string",
-          "description": "Content type or serializer label, e.g. \"application/json\" or \"Protobuf\"."
-        },
-        "source": {
-          "type": "string",
-          "description": "Optional source label, e.g. a workflow name, activity name, or endpoint path."
-        },
-        "timestamp": {
-          "type": "string",
-          "description": "Optional ISO 8601 timestamp string rendered in the summary."
-        }
-      },
-      "additionalProperties": false,
-      "description": "Structured metadata shown in the summary panel. Pass contentType, source,\nand/or timestamp to populate the description list rows."
-    },
-    "activeView": {
-      "enum": ["summary", "tree", "raw"],
-      "description": "Initially active view tab. Defaults to \"summary\". Bind to control\nthe active tab from outside."
+      "description": "Maximum byte size before the tree view is replaced with an oversize\nplaceholder. Defaults to 1,048,576 (1 MB)."
     },
     "label": {
       "type": "string",
-      "description": "Label for the inspector region, used as the accessible name for the\ncontaining section. Defaults to \"Payload inspector\"."
+      "description": "Visible header label for the inspector. Defaults to \"Payload inspector\"."
     },
     "class": {
       "type": "string",
@@ -48,11 +25,6 @@
   "additionalProperties": false,
   "metadata": {
     "unsupportedProps": [
-      {
-        "name": "format",
-        "reason": "function-or-snippet",
-        "description": "Custom serializer for the Raw view display text. Receives the parsed value\nand must return a string. Defaults to JSON.stringify with 2-space\nindentation. Use this to customize key ordering, indentation, or\nalternative serialization formats. Does not affect the Summary or Tree\nviews, or the copy buttons. For redaction, transform the value upstream and\npass the already-redacted value as `value`."
-      },
       {
         "name": "parse",
         "reason": "function-or-snippet",

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

@@ -11,43 +11,16 @@ const schema = {
     truncated: {
       type: 'boolean',
       description:
-        'When true, the payload has been truncated by the producer (e.g. because it\nexceeded a wire size limit). The inspector renders a truncation badge in the\nsummary and a notice above the raw view.',
+        'When true, the payload has been truncated by the producer (e.g. because it\nexceeded a wire size limit). The inspector renders a truncation badge in\nthe header.',
     },
     maxBytes: {
       type: 'number',
       description:
-        'Maximum byte size before the tree view is replaced with an oversize\nplaceholder. Defaults to 1,048,576 (1 MB). Does not affect the raw view.',
-    },
-    meta: {
-      type: 'object',
-      properties: {
-        contentType: {
-          type: 'string',
-          description: 'Content type or serializer label, e.g. "application/json" or "Protobuf".',
-        },
-        source: {
-          type: 'string',
-          description:
-            'Optional source label, e.g. a workflow name, activity name, or endpoint path.',
-        },
-        timestamp: {
-          type: 'string',
-          description: 'Optional ISO 8601 timestamp string rendered in the summary.',
-        },
-      },
-      additionalProperties: false,
-      description:
-        'Structured metadata shown in the summary panel. Pass contentType, source,\nand/or timestamp to populate the description list rows.',
-    },
-    activeView: {
-      enum: ['summary', 'tree', 'raw'],
-      description:
-        'Initially active view tab. Defaults to "summary". Bind to control\nthe active tab from outside.',
+        'Maximum byte size before the tree view is replaced with an oversize\nplaceholder. Defaults to 1,048,576 (1 MB).',
     },
     label: {
       type: 'string',
-      description:
-        'Label for the inspector region, used as the accessible name for the\ncontaining section. Defaults to "Payload inspector".',
+      description: 'Visible header label for the inspector. Defaults to "Payload inspector".',
     },
     class: {
       type: 'string',
@@ -57,12 +30,6 @@ const schema = {
   additionalProperties: false,
   metadata: {
     unsupportedProps: [
-      {
-        name: 'format',
-        reason: 'function-or-snippet',
-        description:
-          'Custom serializer for the Raw view display text. Receives the parsed value\nand must return a string. Defaults to JSON.stringify with 2-space\nindentation. Use this to customize key ordering, indentation, or\nalternative serialization formats. Does not affect the Summary or Tree\nviews, or the copy buttons. For redaction, transform the value upstream and\npass the already-redacted value as `value`.',
-      },
       {
         name: 'parse',
         reason: 'function-or-snippet',