@lostgradient/cinder 0.8.0 → 0.11.0

package/src/components/invocation-rule-builder/invocation-rule-builder.types.ts

@@ -48,6 +48,27 @@ export type InvocationRule = {
   actions: InvocationRuleAction[];
 };
 
+/**
+ * The value type a condition field represents. Determines which typed value
+ * control renders for that field in conditions-only mode (`mode="conditions"`).
+ * Ignored in full mode, where the condition value is always a free-text input.
+ */
+export type InvocationRuleFieldType = 'string' | 'number' | 'boolean' | 'enum';
+
+/**
+ * A single selectable choice for an `'enum'`-typed field's value, rendered as
+ * a select in conditions-only mode. A flat value/label pair — enum choices do
+ * not nest further.
+ *
+ * @schemaObject
+ */
+export type InvocationRuleValueChoice = {
+  /** The value stored on the condition. */
+  value: string;
+  /** The human-readable label shown in the select. */
+  label: string;
+};
+
 /**
  * An option in a field, operator, or action-target select list.
  *
@@ -58,8 +79,41 @@ export type InvocationRuleOption = {
   value: string;
   /** The human-readable label shown in the select. */
   label: string;
+  /**
+   * The value type this option represents when used as a field option in
+   * conditions-only mode (`mode="conditions"`). Defaults to `'string'` when
+   * omitted. Ignored for operator and action-target options, and ignored
+   * entirely in full mode.
+   */
+  type?: InvocationRuleFieldType;
+  /**
+   * Enum choices for this field's value, rendered as a select in
+   * conditions-only mode when `type` is `'enum'`. Provide these for an enum
+   * field; if omitted or empty, the value select renders with no choices.
+   * Ignored for non-enum field types.
+   */
+  options?: InvocationRuleValueChoice[];
 };
 
+/**
+ * Rendering mode for InvocationRuleBuilder.
+ *
+ * - `'full'` (default) renders both conditions and actions, matching the
+ *   component's original behavior exactly.
+ * - `'conditions'` renders conditions only: action controls are hidden
+ *   entirely, rules never emit action descriptors, the operator set is
+ *   fixed to {@link InvocationRuleConditionsOnlyOperator}, and condition
+ *   value controls are inferred from each field option's `type`.
+ */
+export type InvocationRuleBuilderMode = 'full' | 'conditions';
+
+/**
+ * The fixed operator vocabulary used in conditions-only mode
+ * (`mode="conditions"`). Cinder supplies these five operators with default
+ * labels; the `operatorOptions` prop is not accepted in this mode.
+ */
+export type InvocationRuleConditionsOnlyOperator = 'eq' | 'gt' | 'lt' | 'gte' | 'lte';
+
 /**
  * Describes the change that caused an `onchange` call.
  * Consumers use the type to determine what to persist.
@@ -105,6 +159,34 @@ type InvocationRuleBuilderBaseProps = Omit<
    */
   fieldOptions: InvocationRuleOption[];
 
+  /**
+   * Label for the "Add rule" button. Defaults to "Add rule".
+   */
+  addRuleLabel?: string;
+
+  /**
+   * Label for the "Add condition" button. Defaults to "Add condition".
+   */
+  addConditionLabel?: string;
+
+  /** Accessible label for the entire rule builder region. */
+  label?: string;
+
+  /** Additional CSS classes applied to the root element. */
+  class?: string;
+};
+
+/**
+ * Mode-specific props for `mode="full"` (the default). Behavior and prop
+ * shape are unchanged from before conditions-only mode existed.
+ */
+type InvocationRuleBuilderFullModeProps = {
+  /**
+   * Rendering mode. Omit or pass `'full'` to render both conditions and
+   * actions — the component's original, unchanged behavior.
+   */
+  mode?: 'full';
+
   /**
    * Options for the condition operator selector. Consumer-provided list
    * of operators, e.g. "matches", "is", "is-not", "contains".
@@ -118,61 +200,78 @@ type InvocationRuleBuilderBaseProps = Omit<
   actionOptions: InvocationRuleOption[];
 
   /**
-   * Label for the "Add rule" button. Defaults to "Add rule".
+   * Label for the "Add action" button. Defaults to "Add action".
    */
-  addRuleLabel?: string;
+  addActionLabel?: string;
+};
 
+/**
+ * Mode-specific props for `mode="conditions"`. Actions are not rendered, so
+ * action-related props are not accepted — cinder owns the operator
+ * vocabulary and there is nothing to configure for actions.
+ */
+type InvocationRuleBuilderConditionsOnlyModeProps = {
   /**
-   * Label for the "Add condition" button. Defaults to "Add condition".
+   * Renders conditions only: action controls are hidden entirely and rules
+   * never emit action descriptors.
    */
-  addConditionLabel?: string;
+  mode: 'conditions';
 
   /**
-   * Label for the "Add action" button. Defaults to "Add action".
+   * Not accepted in conditions-only mode. Cinder supplies the fixed
+   * eq/gt/lt/gte/lte operator set internally; see
+   * {@link InvocationRuleConditionsOnlyOperator}.
    */
-  addActionLabel?: string;
+  operatorOptions?: never;
 
-  /** Accessible label for the entire rule builder region. */
-  label?: string;
+  /** Not accepted in conditions-only mode — action controls are not rendered. */
+  actionOptions?: never;
 
-  /** Additional CSS classes applied to the root element. */
-  class?: string;
+  /** Not accepted in conditions-only mode — action controls are not rendered. */
+  addActionLabel?: never;
 };
 
+type InvocationRuleBuilderModeProps =
+  | InvocationRuleBuilderFullModeProps
+  | InvocationRuleBuilderConditionsOnlyModeProps;
+
 type InvocationRuleBuilderChangeHandler = (
   nextRules: InvocationRule[],
   change: InvocationRuleChange,
 ) => void;
 
-export type InvocationRuleBuilderProps =
-  | (InvocationRuleBuilderBaseProps & {
-      /**
-       * Called whenever the user makes any edit. Required for editable runtime
-       * usage because editable controls must commit controlled state changes.
-       * Receives the next rule array (pure, not mutated) and a change descriptor.
-       * Consumer owns persistence, validation, and execution.
-       */
-      onchange: InvocationRuleBuilderChangeHandler;
-
-      /**
-       * When false or omitted, renders editable controls. Editable mode requires
-       * `onchange` so controls cannot become interactive-but-no-op.
-       */
-      readonly?: false;
-    })
-  | (InvocationRuleBuilderBaseProps & {
-      /**
-       * Optional in readonly usage because no edit controls are rendered.
-       * Runtime consumers may still pass it when sharing props between modes.
-       */
-      onchange?: InvocationRuleBuilderChangeHandler;
-
-      /**
-       * When true, renders a readonly summary of each rule instead of editable
-       * controls.
-       */
-      readonly: true;
-    });
+export type InvocationRuleBuilderProps = InvocationRuleBuilderBaseProps &
+  InvocationRuleBuilderModeProps &
+  (
+    | {
+        /**
+         * Called whenever the user makes any edit. Required for editable runtime
+         * usage because editable controls must commit controlled state changes.
+         * Receives the next rule array (pure, not mutated) and a change descriptor.
+         * Consumer owns persistence, validation, and execution.
+         */
+        onchange: InvocationRuleBuilderChangeHandler;
+
+        /**
+         * When false or omitted, renders editable controls. Editable mode requires
+         * `onchange` so controls cannot become interactive-but-no-op.
+         */
+        readonly?: false;
+      }
+    | {
+        /**
+         * Optional in readonly usage because no edit controls are rendered.
+         * Runtime consumers may still pass it when sharing props between modes.
+         */
+        onchange?: InvocationRuleBuilderChangeHandler;
+
+        /**
+         * When true, renders a readonly summary of each rule instead of editable
+         * controls.
+         */
+        readonly: true;
+      }
+  );
 
 /**
  * Cinder-specific schema surface for InvocationRuleBuilder.
@@ -193,17 +292,32 @@ export type InvocationRuleBuilderSchemaProps = {
    */
   fieldOptions: InvocationRuleOption[];
 
+  /**
+   * Rendering mode. Omit or pass `'full'` for the original conditions +
+   * actions behavior; pass `'conditions'` to render conditions only. Not
+   * expressible as a schema-driven discriminant here because JSON Schema
+   * validation of this component is documented, not enforced at runtime
+   * against `operatorOptions`/`actionOptions` presence; see the component
+   * types for the full mode-discriminated prop shape.
+   */
+  mode?: InvocationRuleBuilderMode;
+
   /**
    * Options for the condition operator selector. Consumer-provided list
-   * of operators, e.g. "matches", "is", "is-not", "contains".
+   * of operators, e.g. "matches", "is", "is-not", "contains". Required in
+   * full mode; optional (and ignored) when `mode` is `'conditions'`, since
+   * cinder supplies a fixed operator set in that mode — so a conditions-only
+   * configuration validates without it.
    */
-  operatorOptions: InvocationRuleOption[];
+  operatorOptions?: InvocationRuleOption[];
 
   /**
    * Options for the action target selector. Consumer-provided list of
-   * targets, e.g. review-agent slugs or step identifiers.
+   * targets, e.g. review-agent slugs or step identifiers. Required in full
+   * mode; optional (and ignored) when `mode` is `'conditions'`, since actions
+   * are not rendered — so a conditions-only configuration validates without it.
    */
-  actionOptions: InvocationRuleOption[];
+  actionOptions?: InvocationRuleOption[];
 
   /**
    * Must be true for schema-driven usage because editable mode requires

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',