@lostgradient/cinder 0.8.0 → 0.11.0

package/dist/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/dist/components/payload-inspector/payload-inspector.schema.js

@@ -65,43 +65,17 @@ string values; strings that look like serialized JSON are parsed. Pass
     truncated: {
       type: "boolean",
       description: `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.`
     },
     maxBytes: {
       type: "number",
       description: `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.`
-    },
-    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,
-and/or timestamp to populate the description list rows.`
-    },
-    activeView: {
-      enum: ["summary", "tree", "raw"],
-      description: `Initially active view tab. Defaults to "summary". Bind to control
-the active tab from outside.`
+placeholder. Defaults to 1,048,576 (1 MB).`
     },
     label: {
       type: "string",
-      description: `Label for the inspector region, used as the accessible name for the
-containing section. Defaults to "Payload inspector".`
+      description: 'Visible header label for the inspector. Defaults to "Payload inspector".'
     },
     class: {
       type: "string",
@@ -111,16 +85,6 @@ containing section. Defaults to "Payload inspector".`
   additionalProperties: false,
   metadata: {
     unsupportedProps: [
-      {
-        name: "format",
-        reason: "function-or-snippet",
-        description: `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\`.`
-      },
       {
         name: "parse",
         reason: "function-or-snippet",
@@ -134,4 +98,4 @@ export {
   payload_inspector_schema_default as default
 };
 
-//# debugId=73A69749F4816F5B64756E2164756E21
+//# debugId=EA34362B199727DB64756E2164756E21

package/dist/components/payload-inspector/payload-inspector.svelte.d.ts

@@ -2,18 +2,18 @@
  * @cinder
  * @category data-display
  * @status stable
- * @purpose Composed inspector for structured payloads with summary, tree, and raw views, copy actions, and size/truncation status.
+ * @purpose Compact inspector for structured payloads: a labeled tree view with a copy action and size/truncation status.
  * @tag json
  * @tag inspector
  * @tag payload
  * @useWhen Inspecting workflow inputs, signal payloads, activity results, or API response bodies in a dashboard.
- * @useWhen Displaying a structured payload with metadata like content type, source, and timestamp.
+ * @useWhen Displaying a structured payload with a visible label, byte size, and copy affordance.
  * @avoidWhen Rendering a raw code block only — use code-block directly instead.
  * @avoidWhen Needing search, filtering, or virtualization over large collections — compose a custom viewer.
- * @related json-viewer, code-block, description-list, copy-button
+ * @related json-viewer, code-block, copy-button
  */
-export type { PayloadInspectorMeta, PayloadInspectorProps, PayloadInspectorSchemaProps, PayloadInspectorSchemaValue, PayloadInspectorView, } from './payload-inspector.types.ts';
+export type { PayloadInspectorProps, PayloadInspectorSchemaProps, PayloadInspectorSchemaValue, } from './payload-inspector.types.ts';
 import type { PayloadInspectorProps } from './payload-inspector.types.ts';
-declare const PayloadInspector: import("svelte").Component<PayloadInspectorProps, {}, "activeView">;
+declare const PayloadInspector: import("svelte").Component<PayloadInspectorProps, {}, "">;
 type PayloadInspector = ReturnType<typeof PayloadInspector>;
 export default PayloadInspector;

package/dist/components/payload-inspector/payload-inspector.types.d.ts

@@ -1,19 +1,4 @@
 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;
 /**
@@ -29,29 +14,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
@@ -59,13 +30,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. */
@@ -74,8 +39,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 = {
     /**
@@ -89,28 +54,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/dist/components/run-step-timeline/index.d.ts

@@ -1,5 +1,5 @@
 import './run-step-timeline.css';
 import RunStepTimeline from './run-step-timeline.svelte';
 export default RunStepTimeline;
-export type { RunStep, RunStepDetail, RunStepLink, RunStepStatus, RunStepTimelineProps, RunStepTimelineSchemaChildStep, RunStepTimelineSchemaGrandchildStep, RunStepTimelineSchemaGreatGrandchildStep, RunStepTimelineSchemaProps, RunStepTimelineSchemaStep, } from './run-step-timeline.types.ts';
+export type { RunStep, RunStepBranchGroup, RunStepBranchLane, RunStepBranchLaneOutcome, RunStepDetail, RunStepLink, RunStepStatus, RunStepTimelineEntry, RunStepTimelineProps, RunStepTimelineSchemaBranchGroup, RunStepTimelineSchemaBranchLane, RunStepTimelineSchemaChildStep, RunStepTimelineSchemaEntry, RunStepTimelineSchemaGrandchildStep, RunStepTimelineSchemaGreatGrandchildStep, RunStepTimelineSchemaLaneStep, RunStepTimelineSchemaProps, RunStepTimelineSchemaStep, } from './run-step-timeline.types.ts';
 export { RunStepTimeline };