@lostgradient/cinder 0.8.0 → 0.9.0

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

@@ -4,16 +4,10 @@ export {};
 
 <script lang="ts">
 import Badge from '../badge/badge.svelte';
-import CodeBlock from '../code-block/code-block.svelte';
 import CopyButton from '../copy-button/copy-button.svelte';
-import DescriptionList from '../description-list/description-list.svelte';
 import JsonViewer from '../json-viewer/json-viewer.svelte';
-import Tabs from '../tabs/tabs.svelte';
-import TabList from '../tab-list/tab-list.svelte';
-import Tab from '../tab/tab.svelte';
-import TabPanel from '../tab-panel/tab-panel.svelte';
 import { classNames } from '../../utilities/class-names.ts';
-let { value, truncated = false, maxBytes = 1_048_576, meta, format, parse, activeView = $bindable('summary'), label = 'Payload inspector', class: className, ...rest } = $props();
+let { value, truncated = false, maxBytes = 1_048_576, parse, label = 'Payload inspector', class: className, ...rest } = $props();
 function shouldParseString(raw) {
     const trimmed = raw.trim();
     if (/^[{\["]/.test(trimmed))
@@ -66,27 +60,6 @@ const byteLabel = $derived.by(() => {
         return `${(bytes / 1024).toFixed(1)} KB`;
     return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 });
-// --------------------------------------------------------------------------
-// Formatted raw text for the raw view.
-//
-// `format` controls how the raw view *displays* the payload — it is a
-// serializer (e.g. sorted keys, custom indentation) not a redaction hook.
-// Redaction should happen upstream: pass the already-redacted object as
-// `value` so every view (Summary, Tree, Raw) sees the redacted form.
-// --------------------------------------------------------------------------
-const rawText = $derived.by(() => {
-    if (!parseResult.ok) {
-        // Show the original string if we have one (so the user can see what failed to parse).
-        return typeof value === 'string' ? value : '';
-    }
-    try {
-        const formatter = format ?? ((v) => JSON.stringify(v, null, 2));
-        return formatter(parsedValue) ?? '';
-    }
-    catch {
-        return typeof value === 'string' ? value : '';
-    }
-});
 // True when the in-memory value cannot be round-tripped through JSON.stringify
 // (e.g. circular references, BigInt). Only fires for non-string values that
 // parsed successfully — string parse errors are handled by parseResult.ok.
@@ -101,115 +74,33 @@ const unserializable = $derived.by(() => {
         return true;
     }
 });
-// --------------------------------------------------------------------------
-// Summary metadata items for DescriptionList.
-// --------------------------------------------------------------------------
-const summaryItems = $derived.by(() => {
-    const items = [];
-    items.push({ term: 'Size', definition: byteLabel });
-    if (meta?.contentType) {
-        items.push({ term: 'Content type', definition: meta.contentType });
-    }
-    if (meta?.source) {
-        items.push({ term: 'Source', definition: meta.source });
-    }
-    if (meta?.timestamp) {
-        // Attempt to format as a locale string; fall back to raw string.
-        let displayTime = meta.timestamp;
-        try {
-            displayTime = new Date(meta.timestamp).toLocaleString();
-        }
-        catch {
-            // leave as-is
-        }
-        items.push({ term: 'Timestamp', definition: displayTime });
-    }
-    return items;
-});
-const valueKind = $derived.by(() => {
-    if (!parseResult.ok)
-        return 'invalid';
-    const v = parsedValue;
-    if (v === null)
-        return 'null';
-    if (v === undefined)
-        return 'undefined';
-    if (typeof v === 'boolean')
-        return 'boolean';
-    if (typeof v === 'number')
-        return 'number';
-    if (typeof v === 'string')
-        return 'string';
-    if (Array.isArray(v))
-        return 'array';
-    return 'object';
-});
-// --------------------------------------------------------------------------
-// Whether the value is a primitive (shown inline in the summary).
-// --------------------------------------------------------------------------
-const isPrimitive = $derived(valueKind === 'null' ||
-    valueKind === 'undefined' ||
-    valueKind === 'boolean' ||
-    valueKind === 'number' ||
-    valueKind === 'string');
 const isEmpty = $derived(parsedValue === undefined && value === undefined);
-// --------------------------------------------------------------------------
-// Copy targets for the header copy buttons.
-//
-// copy-raw  → "payload as received": the original string verbatim if value
-//             was a string, otherwise compact JSON (one-liner, no spaces).
-//             This is what you would paste into a message bus or log query.
-//
-// copy-formatted → pretty-printed JSON of the parsed value (2-space indent).
-//                  Ignores the `format` prop so it is always valid JSON.
-//                  This is what you would read or diff in an editor.
-// --------------------------------------------------------------------------
-const copyRawText = $derived.by(() => {
+const isPrimitive = $derived(parsedValue === null ||
+    typeof parsedValue === 'boolean' ||
+    typeof parsedValue === 'number' ||
+    typeof parsedValue === 'string');
+// Copy target: the original string verbatim whenever the payload itself was
+// a string — including a JSON-encoded string primitive like '"hello"',
+// which parses to the bare string `hello` but should still copy as the
+// original input, not the unquoted parsed result. Everything else copies
+// as pretty-printed JSON of the parsed value.
+const copyText = $derived.by(() => {
+    if (!parseResult.ok)
+        return typeof value === 'string' ? value : '';
     if (typeof value === 'string')
         return value;
-    if (!parseResult.ok)
-        return '';
-    try {
-        return JSON.stringify(parsedValue) ?? '';
-    }
-    catch {
-        return '';
-    }
-});
-const copyFormattedText = $derived.by(() => {
-    if (!parseResult.ok)
-        return rawText;
     try {
         return JSON.stringify(parsedValue, null, 2) ?? '';
     }
     catch {
-        return rawText;
+        return '';
     }
 });
-const canCopyFormatted = $derived(!isEmpty && parseResult.ok && !unserializable);
-const canCopyRaw = $derived(!isEmpty && (typeof value === 'string' || canCopyFormatted));
-// --------------------------------------------------------------------------
-// Helper: badge variant for the type tag.
-// --------------------------------------------------------------------------
-function kindVariant(kind) {
-    if (kind === 'invalid')
-        return 'danger';
-    if (kind === 'null' || kind === 'undefined')
-        return 'warning';
-    if (kind === 'object' || kind === 'array')
-        return 'info';
-    return 'neutral';
-}
-// --------------------------------------------------------------------------
-// Computed active view binding — keep activeView in sync with $bindable.
-// Because Tabs uses bind:value internally, we forward the $bindable to it
-// directly. The Tabs bind creates a two-way link that keeps activeView
-// updated when the user switches tabs, and respects external changes too.
-// --------------------------------------------------------------------------
+const canCopy = $derived(!isEmpty && copyText !== '');
 </script>
 
-<section {...rest} class={classNames('cinder-payload-inspector', className)} aria-label={label}>
-  <!-- Header bar: label, size, copy actions -->
+<div {...rest} class={classNames('cinder-payload-inspector', className)}>
+  <!-- Header bar: label, size, copy action -->
   <div class="cinder-payload-inspector__header">
     <span class="cinder-payload-inspector__label">{label}</span>
     <div class="cinder-payload-inspector__header-actions">
@@ -221,124 +112,40 @@ function kindVariant(kind) {
       {#if truncated}
         <Badge variant="warning" size="xs">Truncated</Badge>
       {/if}
-      {#if canCopyFormatted}
+      {#if canCopy}
         <CopyButton
-          value={copyFormattedText}
-          label="Copy formatted"
-          copiedLabel="Formatted copied"
-          title="Copy formatted payload"
-          iconOnly
-        />
-      {/if}
-      {#if canCopyRaw}
-        <CopyButton
-          value={copyRawText}
-          label="Copy raw"
-          copiedLabel="Raw copied"
-          title="Copy raw payload"
+          value={copyText}
+          label={`Copy ${label}`}
+          copiedLabel="Copied"
+          title={`Copy ${label}`}
           iconOnly
         />
       {/if}
     </div>
   </div>
 
-  <!-- Tab switcher: Summary / Tree / Raw -->
-  <div class="cinder-payload-inspector__tabs">
-    <Tabs bind:value={activeView}>
-      <TabList label="Inspector views">
-        <Tab value="summary">Summary</Tab>
-        <Tab value="tree">Tree</Tab>
-        <Tab value="raw">Raw</Tab>
-      </TabList>
-
-      <!-- Summary panel -->
-      <TabPanel value="summary">
-        <div class="cinder-payload-inspector__panel">
-          {#if isEmpty}
-            <div class="cinder-payload-inspector__empty" role="status">No payload</div>
-          {/if}
-          {#if !isEmpty}
-            <div class="cinder-payload-inspector__summary">
-              <div class="cinder-payload-inspector__summary-badges">
-                <Badge variant={kindVariant(valueKind)} size="xs" mono>{valueKind}</Badge>
-                {#if truncated}
-                  <Badge variant="warning" size="xs">Truncated</Badge>
-                {/if}
-              </div>
-              {#if summaryItems.length > 0}
-                <DescriptionList items={summaryItems} variant="two-column" />
-              {/if}
-              {#if !parseResult.ok}
-                <div
-                  class="cinder-payload-inspector__notice cinder-payload-inspector__notice--warning"
-                  role="alert"
-                >
-                  Parse error: {parseResult.error}
-                </div>
-              {/if}
-              {#if parseResult.ok && isPrimitive}
-                <div class="cinder-payload-inspector__summary-value">
-                  <span class="cinder-payload-inspector__summary-value-label">Value</span>
-                  <span class="cinder-payload-inspector__primitive">{String(parsedValue)}</span>
-                </div>
-              {/if}
-            </div>
-          {/if}
-        </div>
-      </TabPanel>
-
-      <!-- Tree panel -->
-      <TabPanel value="tree">
-        <div class="cinder-payload-inspector__panel">
-          {#if isEmpty}
-            <div class="cinder-payload-inspector__empty" role="status">No payload</div>
-          {/if}
-          {#if !isEmpty && !parseResult.ok}
-            <div
-              class="cinder-payload-inspector__notice cinder-payload-inspector__notice--warning"
-              role="alert"
-            >
-              Cannot render tree: {parseResult.error}
-            </div>
-          {/if}
-          {#if !isEmpty && parseResult.ok && unserializable}
-            <div class="cinder-payload-inspector__notice" role="status">
-              This value can't be serialized as JSON (it may contain circular references or BigInt
-              values).
-            </div>
-          {/if}
-          {#if !isEmpty && parseResult.ok && !unserializable}
-            <JsonViewer value={parsedValue} {maxBytes} />
-          {/if}
-        </div>
-      </TabPanel>
-
-      <!-- Raw panel -->
-      <TabPanel value="raw">
-        <div class="cinder-payload-inspector__panel cinder-payload-inspector__panel--code">
-          {#if isEmpty}
-            <div class="cinder-payload-inspector__empty" role="status">No payload</div>
-          {/if}
-          {#if !isEmpty && truncated}
-            <div class="cinder-payload-inspector__notice cinder-payload-inspector__notice--warning">
-              This payload has been truncated by the producer. The raw view shows only the received
-              portion.
-            </div>
-          {/if}
-          {#if !isEmpty && unserializable}
-            <div class="cinder-payload-inspector__notice" role="status">
-              This value can't be serialized as JSON (it may contain circular references or BigInt
-              values).
-            </div>
-          {/if}
-          {#if !isEmpty && !unserializable}
-            <!-- highlight={false} is an absolute off-switch: no Shiki import,
-                 guaranteed-escaped plaintext. Consumers who want highlighting can
-                 pass a `format` function and swap in a custom view. -->
-            <CodeBlock code={rawText} highlight={false} class="cinder-payload-inspector__raw" />
-          {/if}
-        </div>
-      </TabPanel>
-    </Tabs>
+  <div class="cinder-payload-inspector__panel">
+    {#if isEmpty}
+      <div class="cinder-payload-inspector__empty" role="status">No payload</div>
+    {:else if !parseResult.ok}
+      <div
+        class="cinder-payload-inspector__notice cinder-payload-inspector__notice--warning"
+        role="alert"
+      >
+        Parse error: {parseResult.error}
+      </div>
+      {#if typeof value === 'string'}
+        <pre class="cinder-payload-inspector__primitive">{value}</pre>
+      {/if}
+    {:else if unserializable}
+      <div class="cinder-payload-inspector__notice" role="status">
+        This value can't be serialized as JSON (it may contain circular references or BigInt
+        values).
+      </div>
+    {:else if isPrimitive}
+      <pre class="cinder-payload-inspector__primitive">{String(parsedValue)}</pre>
+    {:else}
+      <JsonViewer value={parsedValue} {maxBytes} />
+    {/if}
   </div>
-</section>
+</div>

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

@@ -1,22 +1,5 @@
 import type { HTMLAttributes } from 'svelte/elements';
 
-/** Active view tab for the inspector. */
-export type PayloadInspectorView = 'summary' | 'tree' | 'raw';
-
-/**
- * Structured metadata about the payload shown in the summary view.
- *
- * @schemaObject
- */
-export type PayloadInspectorMeta = {
-  /** Content type or serializer label, e.g. "application/json" or "Protobuf". */
-  contentType?: string;
-  /** Optional source label, e.g. a workflow name, activity name, or endpoint path. */
-  source?: string;
-  /** Optional ISO 8601 timestamp string rendered in the summary. */
-  timestamp?: string;
-};
-
 /** Schema-facing payload value. Kept permissive to match the runtime `unknown` prop. */
 export type PayloadInspectorSchemaValue = unknown;
 
@@ -33,29 +16,15 @@ export type PayloadInspectorProps = Omit<HTMLAttributes<HTMLElement>, 'class' |
   value?: unknown;
   /**
    * When true, the payload has been truncated by the producer (e.g. because it
-   * exceeded a wire size limit). The inspector renders a truncation badge in the
-   * summary and a notice above the raw view.
+   * exceeded a wire size limit). The inspector renders a truncation badge in
+   * the header.
    */
   truncated?: boolean;
   /**
    * Maximum byte size before the tree view is replaced with an oversize
-   * placeholder. Defaults to 1,048,576 (1 MB). Does not affect the raw view.
+   * placeholder. Defaults to 1,048,576 (1 MB).
    */
   maxBytes?: number;
-  /**
-   * Structured metadata shown in the summary panel. Pass contentType, source,
-   * and/or timestamp to populate the description list rows.
-   */
-  meta?: PayloadInspectorMeta;
-  /**
-   * Custom serializer for the Raw view display text. Receives the parsed value
-   * and must return a string. Defaults to JSON.stringify with 2-space
-   * indentation. Use this to customize key ordering, indentation, or
-   * alternative serialization formats. Does not affect the Summary or Tree
-   * views, or the copy buttons. For redaction, transform the value upstream and
-   * pass the already-redacted value as `value`.
-   */
-  format?: (value: unknown) => string;
   /**
    * Custom parser applied when `value` is a string. Receives the raw string
    * and must return a parsed value or throw. Defaults to JSON.parse. Use this
@@ -63,13 +32,7 @@ export type PayloadInspectorProps = Omit<HTMLAttributes<HTMLElement>, 'class' |
    */
   parse?: (raw: string) => unknown;
   /**
-   * Initially active view tab. Defaults to "summary". Bind to control
-   * the active tab from outside.
-   */
-  activeView?: PayloadInspectorView;
-  /**
-   * Label for the inspector region, used as the accessible name for the
-   * containing section. Defaults to "Payload inspector".
+   * Visible header label for the inspector. Defaults to "Payload inspector".
    */
   label?: string;
   /** Additional CSS classes applied to the root element. */
@@ -79,8 +42,8 @@ export type PayloadInspectorProps = Omit<HTMLAttributes<HTMLElement>, 'class' |
 /**
  * Cinder-specific schema surface for PayloadInspector.
  *
- * Parser and formatter callbacks are documented but marked unsupported because
- * functions cannot be represented as JSON Schema controls.
+ * The parser callback is documented but marked unsupported because functions
+ * cannot be represented as JSON Schema controls.
  */
 export type PayloadInspectorSchemaProps = {
   /**
@@ -94,28 +57,17 @@ export type PayloadInspectorSchemaProps = {
   value?: PayloadInspectorSchemaValue;
   /**
    * When true, the payload has been truncated by the producer (e.g. because it
-   * exceeded a wire size limit). The inspector renders a truncation badge in the
-   * summary and a notice above the raw view.
+   * exceeded a wire size limit). The inspector renders a truncation badge in
+   * the header.
    */
   truncated?: boolean;
   /**
    * Maximum byte size before the tree view is replaced with an oversize
-   * placeholder. Defaults to 1,048,576 (1 MB). Does not affect the raw view.
+   * placeholder. Defaults to 1,048,576 (1 MB).
    */
   maxBytes?: number;
   /**
-   * Structured metadata shown in the summary panel. Pass contentType, source,
-   * and/or timestamp to populate the description list rows.
-   */
-  meta?: PayloadInspectorMeta;
-  /**
-   * Initially active view tab. Defaults to "summary". Bind to control
-   * the active tab from outside.
-   */
-  activeView?: PayloadInspectorView;
-  /**
-   * Label for the inspector region, used as the accessible name for the
-   * containing section. Defaults to "Payload inspector".
+   * Visible header label for the inspector. Defaults to "Payload inspector".
    */
   label?: string;
   /** Additional CSS classes applied to the root element. */

package/src/components/tab/tab.schema.json

@@ -4,15 +4,19 @@
   "properties": {
     "value": {
       "type": "string",
-      "description": "Identifier — matches the value of the corresponding TabPanel."
+      "description": "Stable identifier used for tab selection; matches TabPanel in the default pattern."
     },
     "id": {
       "type": "string",
       "description": "Optional explicit id override; auto-generated otherwise for ARIA wiring."
     },
+    "controls": {
+      "type": "string",
+      "description": "Optional non-empty `aria-controls` target for caller-owned panels. Empty or\nwhitespace-only strings are treated as omitted. By default, Cinder points\nat the matching TabPanel id (`${baseId}-panel-${value}`)."
+    },
     "disabled": {
       "type": "boolean",
-      "description": "Disables this single tab. The panel content is hidden but its DOM stays."
+      "description": "Disables this single tab and removes it from keyboard activation."
     },
     "class": {
       "type": "string",

package/src/components/tab/tab.schema.ts

@@ -6,15 +6,21 @@ const schema = {
   properties: {
     value: {
       type: 'string',
-      description: 'Identifier — matches the value of the corresponding TabPanel.',
+      description:
+        'Stable identifier used for tab selection; matches TabPanel in the default pattern.',
     },
     id: {
       type: 'string',
       description: 'Optional explicit id override; auto-generated otherwise for ARIA wiring.',
     },
+    controls: {
+      type: 'string',
+      description:
+        'Optional non-empty `aria-controls` target for caller-owned panels. Empty or\nwhitespace-only strings are treated as omitted. By default, Cinder points\nat the matching TabPanel id (`${baseId}-panel-${value}`).',
+    },
     disabled: {
       type: 'boolean',
-      description: 'Disables this single tab. The panel content is hidden but its DOM stays.',
+      description: 'Disables this single tab and removes it from keyboard activation.',
     },
     class: {
       type: 'string',

package/src/components/tab/tab.svelte

@@ -7,12 +7,12 @@ import { untrack } from 'svelte';
 import { rovingTabIndex } from '../../_internal/collection.ts';
 import { getTabsContext } from '../tabs/tabs-context.ts';
 import { classNames } from '../../utilities/class-names.ts';
-let { value, id, disabled = false, class: className, children, trailing } = $props();
+let { value, id, controls, disabled = false, class: className, children, trailing, } = $props();
 const tabs = getTabsContext();
 // Derive both ids from the root's baseId and the tab's value so that two
-// Tabs instances sharing the same value produce distinct DOM ids. The panel
-// id is always computed from baseId and value; it does not track a custom
-// `id` prop on this Tab.
+// Tabs instances sharing the same value produce distinct DOM ids. The default
+// panel id does not track a custom `id` prop on this Tab. `controls` can
+// intentionally override the controlled panel id for caller-owned panels.
 //
 // ⚠️  Custom-id wiring: if you supply a custom `id` prop to override this
 // Tab's element id, the paired TabPanel's default `aria-labelledby` still
@@ -21,7 +21,11 @@ const tabs = getTabsContext();
 // to the paired TabPanel's `ariaLabelledby` prop. Removing the custom `id`
 // override restores fully automatic wiring.
 const tabId = $derived(id ?? `${tabs.baseId}-tab-${value}`);
-const panelId = $derived(`${tabs.baseId}-panel-${value}`);
+const panelId = $derived.by(() => {
+    // Caller-owned panels can provide a non-empty aria-controls override.
+    const controlsId = controls?.trim();
+    return controlsId ? controlsId : `${tabs.baseId}-panel-${value}`;
+});
 const isActive = $derived(tabs.isActive(value));
 const isFocusable = $derived(tabs.isFocusable(value));
 let buttonElement = $state();

package/src/components/tab/tab.types.ts

@@ -1,10 +1,16 @@
 import type { Snippet } from 'svelte';
 export type TabProps = {
-  /** Identifier — matches the value of the corresponding TabPanel. */
+  /** Stable identifier used for tab selection; matches TabPanel in the default pattern. */
   value: string;
   /** Optional explicit id override; auto-generated otherwise for ARIA wiring. */
   id?: string;
-  /** Disables this single tab. The panel content is hidden but its DOM stays. */
+  /**
+   * Optional non-empty `aria-controls` target for caller-owned panels. Empty or
+   * whitespace-only strings are treated as omitted. By default, Cinder points
+   * at the matching TabPanel id (`${baseId}-panel-${value}`).
+   */
+  controls?: string;
+  /** Disables this single tab and removes it from keyboard activation. */
   disabled?: boolean;
   /** Additional class names merged with `.cinder-tab`. */
   class?: string;

package/src/index.ts

@@ -24,6 +24,7 @@ export type { AlertDialogProps } from './components/alert-dialog/index.ts';
 export { default as ApprovalCard } from './components/approval-card/index.ts';
 export type {
   ApprovalCardCallbacks,
+  ApprovalCardHeadingLevel,
   ApprovalCardProps,
   ApprovalCardSchemaProps,
   ApprovalOperation,
@@ -155,6 +156,22 @@ export type {
 export { default as Chat } from './components/chat/index.ts';
 export type { ChatProps } from './components/chat/index.ts';
 
+export {
+  default as ChatComposerPopover,
+  filterFuzzySubsequence,
+  fuzzySubsequenceScore,
+} from './components/chat-composer-popover/index.ts';
+export type {
+  ChatComposerPopoverComposerProps,
+  ChatComposerPopoverItem,
+  ChatComposerPopoverItemSnippetContext,
+  ChatComposerPopoverProps,
+  ChatComposerPopoverSelection,
+  ChatComposerPopoverTriggerMatch,
+  FuzzyFilterItem,
+  FuzzyFilterResult,
+} from './components/chat-composer-popover/index.ts';
+
 export { default as ChatConversationHeader } from './components/chat-conversation-header/index.ts';
 export type {
   ChatConversationHeaderHeadingLevel,
@@ -629,11 +646,7 @@ export { default as PageHeader } from './components/page-header/index.ts';
 export type { PageHeaderProps } from './components/page-header/index.ts';
 
 export { default as PayloadInspector } from './components/payload-inspector/index.ts';
-export type {
-  PayloadInspectorMeta,
-  PayloadInspectorProps,
-  PayloadInspectorView,
-} from './components/payload-inspector/index.ts';
+export type { PayloadInspectorProps } from './components/payload-inspector/index.ts';
 
 export { default as PermissionMatrix } from './components/permission-matrix/index.ts';
 export type {

package/src/styles/components.css

@@ -38,6 +38,7 @@
 @import '../components/capability-gate/capability-gate.css';
 @import '../components/chat-conversation-header/chat-conversation-header.css';
 @import '../components/chat-conversation-list/chat-conversation-list.css';
+@import '../components/chat-composer-popover/chat-composer-popover.css';
 @import '../components/chat/chat.css';
 @import '../components/chip/chip.css';
 @import '../components/choice-grid/choice-grid.css';