@workflow/web-shared 4.1.0-beta.52 → 4.1.0-beta.53

package/dist/components/ui/inspector-theme.d.ts

@@ -1,56 +1,71 @@
 /**
  * Shared theme configuration for react-inspector's ObjectInspector.
  *
- * Used by AttributePanel, EventListView, StreamViewer, and any other
- * component that renders data with ObjectInspector.
+ * Color choices are inspired by Node.js `util.inspect()` ANSI stylizing:
+ *   - property names: unstyled (default foreground — dark text on light, light text on dark)
+ *   - strings / symbols: green
+ *   - numbers / booleans / bigint: yellow
+ *   - null: bold (foreground)
+ *   - undefined: grey
+ *   - regexp: red
+ *   - functions (special): cyan
+ *   - date: magenta
+ *
+ * See: https://github.com/nodejs/node/blob/main/lib/internal/util/inspect.js
  */
+export interface InspectorThemeExtended {
+    /** Color for Date values (Node: 'magenta') */
+    OBJECT_VALUE_DATE_COLOR: string;
+}
+export declare const inspectorThemeExtendedLight: InspectorThemeExtended;
+export declare const inspectorThemeExtendedDark: InspectorThemeExtended;
 export declare const inspectorThemeLight: {
-    BASE_FONT_SIZE: string;
-    BASE_LINE_HEIGHT: number;
-    BASE_BACKGROUND_COLOR: string;
     BASE_COLOR: string;
-    OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: number;
-    OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: number;
     OBJECT_NAME_COLOR: string;
-    OBJECT_VALUE_NULL_COLOR: string;
-    OBJECT_VALUE_UNDEFINED_COLOR: string;
-    OBJECT_VALUE_REGEXP_COLOR: string;
     OBJECT_VALUE_STRING_COLOR: string;
     OBJECT_VALUE_SYMBOL_COLOR: string;
     OBJECT_VALUE_NUMBER_COLOR: string;
     OBJECT_VALUE_BOOLEAN_COLOR: string;
+    OBJECT_VALUE_NULL_COLOR: string;
+    OBJECT_VALUE_UNDEFINED_COLOR: string;
+    OBJECT_VALUE_REGEXP_COLOR: string;
     OBJECT_VALUE_FUNCTION_PREFIX_COLOR: string;
     HTML_TAG_COLOR: string;
     HTML_TAGNAME_COLOR: string;
-    HTML_TAGNAME_TEXT_TRANSFORM: string;
     HTML_ATTRIBUTE_NAME_COLOR: string;
     HTML_ATTRIBUTE_VALUE_COLOR: string;
     HTML_COMMENT_COLOR: string;
     HTML_DOCTYPE_COLOR: string;
     ARROW_COLOR: string;
+    TABLE_BORDER_COLOR: string;
+    TABLE_TH_BACKGROUND_COLOR: string;
+    TABLE_TH_HOVER_COLOR: string;
+    TABLE_SORT_ICON_COLOR: string;
+    BASE_FONT_SIZE: string;
+    BASE_LINE_HEIGHT: number;
+    BASE_BACKGROUND_COLOR: string;
+    OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: number;
+    OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: number;
+    HTML_TAGNAME_TEXT_TRANSFORM: "lowercase";
     ARROW_MARGIN_RIGHT: number;
     ARROW_FONT_SIZE: number;
     TREENODE_FONT_FAMILY: string;
     TREENODE_FONT_SIZE: string;
     TREENODE_LINE_HEIGHT: number;
     TREENODE_PADDING_LEFT: number;
-    TABLE_BORDER_COLOR: string;
-    TABLE_TH_BACKGROUND_COLOR: string;
-    TABLE_TH_HOVER_COLOR: string;
-    TABLE_SORT_ICON_COLOR: string;
     TABLE_DATA_BACKGROUND_IMAGE: string;
     TABLE_DATA_BACKGROUND_SIZE: string;
 };
 export declare const inspectorThemeDark: {
     BASE_COLOR: string;
     OBJECT_NAME_COLOR: string;
-    OBJECT_VALUE_NULL_COLOR: string;
-    OBJECT_VALUE_UNDEFINED_COLOR: string;
-    OBJECT_VALUE_REGEXP_COLOR: string;
     OBJECT_VALUE_STRING_COLOR: string;
     OBJECT_VALUE_SYMBOL_COLOR: string;
     OBJECT_VALUE_NUMBER_COLOR: string;
     OBJECT_VALUE_BOOLEAN_COLOR: string;
+    OBJECT_VALUE_NULL_COLOR: string;
+    OBJECT_VALUE_UNDEFINED_COLOR: string;
+    OBJECT_VALUE_REGEXP_COLOR: string;
     OBJECT_VALUE_FUNCTION_PREFIX_COLOR: string;
     HTML_TAG_COLOR: string;
     HTML_TAGNAME_COLOR: string;
@@ -58,23 +73,23 @@ export declare const inspectorThemeDark: {
     HTML_ATTRIBUTE_VALUE_COLOR: string;
     HTML_COMMENT_COLOR: string;
     HTML_DOCTYPE_COLOR: string;
+    ARROW_COLOR: string;
+    TABLE_BORDER_COLOR: string;
+    TABLE_TH_BACKGROUND_COLOR: string;
+    TABLE_TH_HOVER_COLOR: string;
+    TABLE_SORT_ICON_COLOR: string;
     BASE_FONT_SIZE: string;
     BASE_LINE_HEIGHT: number;
     BASE_BACKGROUND_COLOR: string;
     OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: number;
     OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: number;
-    HTML_TAGNAME_TEXT_TRANSFORM: string;
-    ARROW_COLOR: string;
+    HTML_TAGNAME_TEXT_TRANSFORM: "lowercase";
     ARROW_MARGIN_RIGHT: number;
     ARROW_FONT_SIZE: number;
     TREENODE_FONT_FAMILY: string;
     TREENODE_FONT_SIZE: string;
     TREENODE_LINE_HEIGHT: number;
     TREENODE_PADDING_LEFT: number;
-    TABLE_BORDER_COLOR: string;
-    TABLE_TH_BACKGROUND_COLOR: string;
-    TABLE_TH_HOVER_COLOR: string;
-    TABLE_SORT_ICON_COLOR: string;
     TABLE_DATA_BACKGROUND_IMAGE: string;
     TABLE_DATA_BACKGROUND_SIZE: string;
 };

package/dist/components/ui/inspector-theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inspector-theme.d.ts","sourceRoot":"","sources":["../../../src/components/ui/inspector-theme.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoC/B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkB9B,CAAC"}
+{"version":3,"file":"inspector-theme.d.ts","sourceRoot":"","sources":["../../../src/components/ui/inspector-theme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAOH,MAAM,WAAW,sBAAsB;IACrC,8CAA8C;IAC9C,uBAAuB,EAAE,MAAM,CAAC;CACjC;AAED,eAAO,MAAM,2BAA2B,EAAE,sBAEzC,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,sBAExC,CAAC;AA2BF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2C/B,CAAC;AAMF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2C9B,CAAC"}

package/dist/components/ui/inspector-theme.js

@@ -1,63 +1,115 @@
 /**
  * Shared theme configuration for react-inspector's ObjectInspector.
  *
- * Used by AttributePanel, EventListView, StreamViewer, and any other
- * component that renders data with ObjectInspector.
+ * Color choices are inspired by Node.js `util.inspect()` ANSI stylizing:
+ *   - property names: unstyled (default foreground — dark text on light, light text on dark)
+ *   - strings / symbols: green
+ *   - numbers / booleans / bigint: yellow
+ *   - null: bold (foreground)
+ *   - undefined: grey
+ *   - regexp: red
+ *   - functions (special): cyan
+ *   - date: magenta
+ *
+ * See: https://github.com/nodejs/node/blob/main/lib/internal/util/inspect.js
  */
-export const inspectorThemeLight = {
+export const inspectorThemeExtendedLight = {
+    OBJECT_VALUE_DATE_COLOR: '#a21caf', // fuchsia-700
+};
+export const inspectorThemeExtendedDark = {
+    OBJECT_VALUE_DATE_COLOR: '#e879f9', // fuchsia-400
+};
+// ---------------------------------------------------------------------------
+// Shared structural values (same in both themes)
+// ---------------------------------------------------------------------------
+const shared = {
     BASE_FONT_SIZE: '11px',
     BASE_LINE_HEIGHT: 1.4,
     BASE_BACKGROUND_COLOR: 'transparent',
-    BASE_COLOR: 'var(--ds-gray-1000)',
     OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
     OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
-    OBJECT_NAME_COLOR: 'rgb(136, 19, 145)',
-    OBJECT_VALUE_NULL_COLOR: 'rgb(128, 128, 128)',
-    OBJECT_VALUE_UNDEFINED_COLOR: 'rgb(128, 128, 128)',
-    OBJECT_VALUE_REGEXP_COLOR: 'rgb(196, 26, 22)',
-    OBJECT_VALUE_STRING_COLOR: 'rgb(196, 26, 22)',
-    OBJECT_VALUE_SYMBOL_COLOR: 'rgb(196, 26, 22)',
-    OBJECT_VALUE_NUMBER_COLOR: 'rgb(28, 0, 207)',
-    OBJECT_VALUE_BOOLEAN_COLOR: 'rgb(28, 0, 207)',
-    OBJECT_VALUE_FUNCTION_PREFIX_COLOR: 'rgb(13, 34, 170)',
-    HTML_TAG_COLOR: 'rgb(168, 148, 166)',
-    HTML_TAGNAME_COLOR: 'rgb(136, 18, 128)',
     HTML_TAGNAME_TEXT_TRANSFORM: 'lowercase',
-    HTML_ATTRIBUTE_NAME_COLOR: 'rgb(153, 69, 0)',
-    HTML_ATTRIBUTE_VALUE_COLOR: 'rgb(26, 26, 166)',
-    HTML_COMMENT_COLOR: 'rgb(35, 110, 37)',
-    HTML_DOCTYPE_COLOR: 'rgb(192, 192, 192)',
-    ARROW_COLOR: 'var(--ds-gray-600)',
     ARROW_MARGIN_RIGHT: 3,
     ARROW_FONT_SIZE: 12,
     TREENODE_FONT_FAMILY: 'var(--font-mono)',
     TREENODE_FONT_SIZE: '11px',
     TREENODE_LINE_HEIGHT: 1.4,
     TREENODE_PADDING_LEFT: 12,
+    TABLE_DATA_BACKGROUND_IMAGE: 'none',
+    TABLE_DATA_BACKGROUND_SIZE: '0',
+};
+// ---------------------------------------------------------------------------
+// Light theme
+// ---------------------------------------------------------------------------
+export const inspectorThemeLight = {
+    ...shared,
+    // Base text
+    BASE_COLOR: 'var(--ds-gray-1000)',
+    // Property names — unstyled, same as base foreground (Node: no style)
+    OBJECT_NAME_COLOR: 'var(--ds-gray-900)',
+    // Strings & symbols — green (Node: 'green')
+    OBJECT_VALUE_STRING_COLOR: '#16a34a', // green-600
+    OBJECT_VALUE_SYMBOL_COLOR: '#16a34a',
+    // Numbers & booleans — yellow/amber (Node: 'yellow')
+    OBJECT_VALUE_NUMBER_COLOR: '#b45309', // amber-700 (readable on white)
+    OBJECT_VALUE_BOOLEAN_COLOR: '#b45309',
+    // null — bold foreground (Node: 'bold')
+    OBJECT_VALUE_NULL_COLOR: 'var(--ds-gray-900)',
+    // undefined — grey (Node: 'grey')
+    OBJECT_VALUE_UNDEFINED_COLOR: 'var(--ds-gray-500)',
+    // RegExp — red (Node regexp base uses green/red/yellow palette)
+    OBJECT_VALUE_REGEXP_COLOR: '#dc2626', // red-600
+    // Functions — cyan (Node: 'special' → 'cyan')
+    OBJECT_VALUE_FUNCTION_PREFIX_COLOR: '#0891b2', // cyan-600
+    // HTML (less relevant for data inspection, but reasonable defaults)
+    HTML_TAG_COLOR: 'var(--ds-gray-500)',
+    HTML_TAGNAME_COLOR: '#0891b2',
+    HTML_ATTRIBUTE_NAME_COLOR: '#b45309',
+    HTML_ATTRIBUTE_VALUE_COLOR: '#16a34a',
+    HTML_COMMENT_COLOR: 'var(--ds-gray-400)',
+    HTML_DOCTYPE_COLOR: 'var(--ds-gray-400)',
+    // Structural
+    ARROW_COLOR: 'var(--ds-gray-500)',
     TABLE_BORDER_COLOR: 'var(--ds-gray-300)',
     TABLE_TH_BACKGROUND_COLOR: 'var(--ds-gray-100)',
     TABLE_TH_HOVER_COLOR: 'var(--ds-gray-200)',
     TABLE_SORT_ICON_COLOR: 'var(--ds-gray-500)',
-    TABLE_DATA_BACKGROUND_IMAGE: 'none',
-    TABLE_DATA_BACKGROUND_SIZE: '0',
 };
+// ---------------------------------------------------------------------------
+// Dark theme
+// ---------------------------------------------------------------------------
 export const inspectorThemeDark = {
-    ...inspectorThemeLight,
+    ...shared,
+    // Base text
     BASE_COLOR: 'var(--ds-gray-1000)',
-    OBJECT_NAME_COLOR: 'rgb(227, 110, 236)',
-    OBJECT_VALUE_NULL_COLOR: 'rgb(127, 127, 127)',
-    OBJECT_VALUE_UNDEFINED_COLOR: 'rgb(127, 127, 127)',
-    OBJECT_VALUE_REGEXP_COLOR: 'rgb(233, 63, 59)',
-    OBJECT_VALUE_STRING_COLOR: 'rgb(233, 63, 59)',
-    OBJECT_VALUE_SYMBOL_COLOR: 'rgb(233, 63, 59)',
-    OBJECT_VALUE_NUMBER_COLOR: 'hsl(252, 100%, 75%)',
-    OBJECT_VALUE_BOOLEAN_COLOR: 'hsl(252, 100%, 75%)',
-    OBJECT_VALUE_FUNCTION_PREFIX_COLOR: 'rgb(85, 106, 242)',
-    HTML_TAG_COLOR: 'rgb(93, 176, 215)',
-    HTML_TAGNAME_COLOR: 'rgb(93, 176, 215)',
-    HTML_ATTRIBUTE_NAME_COLOR: 'rgb(155, 187, 220)',
-    HTML_ATTRIBUTE_VALUE_COLOR: 'rgb(242, 151, 102)',
-    HTML_COMMENT_COLOR: 'rgb(137, 137, 137)',
-    HTML_DOCTYPE_COLOR: 'rgb(192, 192, 192)',
+    // Property names — white/light foreground (Node: unstyled = white in dark terminal)
+    OBJECT_NAME_COLOR: 'var(--ds-gray-900)',
+    // Strings & symbols — green (Node: 'green')
+    OBJECT_VALUE_STRING_COLOR: '#4ade80', // green-400
+    OBJECT_VALUE_SYMBOL_COLOR: '#4ade80',
+    // Numbers & booleans — yellow (Node: 'yellow')
+    OBJECT_VALUE_NUMBER_COLOR: '#facc15', // yellow-400
+    OBJECT_VALUE_BOOLEAN_COLOR: '#facc15',
+    // null — bold foreground / white (Node: 'bold')
+    OBJECT_VALUE_NULL_COLOR: 'var(--ds-gray-1000)',
+    // undefined — grey (Node: 'grey')
+    OBJECT_VALUE_UNDEFINED_COLOR: 'var(--ds-gray-500)',
+    // RegExp — red (Node regexp palette)
+    OBJECT_VALUE_REGEXP_COLOR: '#f87171', // red-400
+    // Functions — cyan (Node: 'special' → 'cyan')
+    OBJECT_VALUE_FUNCTION_PREFIX_COLOR: '#22d3ee', // cyan-400
+    // HTML
+    HTML_TAG_COLOR: 'var(--ds-gray-500)',
+    HTML_TAGNAME_COLOR: '#22d3ee',
+    HTML_ATTRIBUTE_NAME_COLOR: '#facc15',
+    HTML_ATTRIBUTE_VALUE_COLOR: '#4ade80',
+    HTML_COMMENT_COLOR: 'var(--ds-gray-500)',
+    HTML_DOCTYPE_COLOR: 'var(--ds-gray-500)',
+    // Structural
+    ARROW_COLOR: 'var(--ds-gray-500)',
+    TABLE_BORDER_COLOR: 'var(--ds-gray-300)',
+    TABLE_TH_BACKGROUND_COLOR: 'var(--ds-gray-100)',
+    TABLE_TH_HOVER_COLOR: 'var(--ds-gray-200)',
+    TABLE_SORT_ICON_COLOR: 'var(--ds-gray-500)',
 };
 //# sourceMappingURL=inspector-theme.js.map

package/dist/components/ui/inspector-theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"inspector-theme.js","sourceRoot":"","sources":["../../../src/components/ui/inspector-theme.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,cAAc,EAAE,MAAM;IACtB,gBAAgB,EAAE,GAAG;IACrB,qBAAqB,EAAE,aAAa;IACpC,UAAU,EAAE,qBAAqB;IACjC,mCAAmC,EAAE,EAAE;IACvC,oCAAoC,EAAE,CAAC;IACvC,iBAAiB,EAAE,mBAAmB;IACtC,uBAAuB,EAAE,oBAAoB;IAC7C,4BAA4B,EAAE,oBAAoB;IAClD,yBAAyB,EAAE,kBAAkB;IAC7C,yBAAyB,EAAE,kBAAkB;IAC7C,yBAAyB,EAAE,kBAAkB;IAC7C,yBAAyB,EAAE,iBAAiB;IAC5C,0BAA0B,EAAE,iBAAiB;IAC7C,kCAAkC,EAAE,kBAAkB;IACtD,cAAc,EAAE,oBAAoB;IACpC,kBAAkB,EAAE,mBAAmB;IACvC,2BAA2B,EAAE,WAAW;IACxC,yBAAyB,EAAE,iBAAiB;IAC5C,0BAA0B,EAAE,kBAAkB;IAC9C,kBAAkB,EAAE,kBAAkB;IACtC,kBAAkB,EAAE,oBAAoB;IACxC,WAAW,EAAE,oBAAoB;IACjC,kBAAkB,EAAE,CAAC;IACrB,eAAe,EAAE,EAAE;IACnB,oBAAoB,EAAE,kBAAkB;IACxC,kBAAkB,EAAE,MAAM;IAC1B,oBAAoB,EAAE,GAAG;IACzB,qBAAqB,EAAE,EAAE;IACzB,kBAAkB,EAAE,oBAAoB;IACxC,yBAAyB,EAAE,oBAAoB;IAC/C,oBAAoB,EAAE,oBAAoB;IAC1C,qBAAqB,EAAE,oBAAoB;IAC3C,2BAA2B,EAAE,MAAM;IACnC,0BAA0B,EAAE,GAAG;CAChC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,GAAG,mBAAmB;IACtB,UAAU,EAAE,qBAAqB;IACjC,iBAAiB,EAAE,oBAAoB;IACvC,uBAAuB,EAAE,oBAAoB;IAC7C,4BAA4B,EAAE,oBAAoB;IAClD,yBAAyB,EAAE,kBAAkB;IAC7C,yBAAyB,EAAE,kBAAkB;IAC7C,yBAAyB,EAAE,kBAAkB;IAC7C,yBAAyB,EAAE,qBAAqB;IAChD,0BAA0B,EAAE,qBAAqB;IACjD,kCAAkC,EAAE,mBAAmB;IACvD,cAAc,EAAE,mBAAmB;IACnC,kBAAkB,EAAE,mBAAmB;IACvC,yBAAyB,EAAE,oBAAoB;IAC/C,0BAA0B,EAAE,oBAAoB;IAChD,kBAAkB,EAAE,oBAAoB;IACxC,kBAAkB,EAAE,oBAAoB;CACzC,CAAC"}
+{"version":3,"file":"inspector-theme.js","sourceRoot":"","sources":["../../../src/components/ui/inspector-theme.ts"],"names":[],"mappings":"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"}

package/dist/components/ui/skeleton.d.ts

@@ -1,3 +1,3 @@
-declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare function Skeleton({ className, style, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
 export { Skeleton };
 //# sourceMappingURL=skeleton.d.ts.map

package/dist/components/ui/skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/ui/skeleton.tsx"],"names":[],"mappings":"AAEA,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,2CAOtC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/ui/skeleton.tsx"],"names":[],"mappings":"AAEA,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,2CAQtC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/ui/skeleton.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from '../../lib/utils';
-function Skeleton({ className, ...props }) {
-    return (_jsx("div", { className: cn('animate-pulse rounded-md bg-muted', className), ...props }));
+function Skeleton({ className, style, ...props }) {
+    return (_jsx("div", { ...props, className: cn('rounded-md', className), style: { backgroundColor: 'var(--ds-gray-200)', ...style } }));
 }
 export { Skeleton };
 //# sourceMappingURL=skeleton.js.map

package/dist/components/ui/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../../../src/components/ui/skeleton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAErC,SAAS,QAAQ,CAAC,EAChB,SAAS,EACT,GAAG,KAAK,EAC6B;IACrC,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CAAC,mCAAmC,EAAE,SAAS,CAAC,KACzD,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../../../src/components/ui/skeleton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAErC,SAAS,QAAQ,CAAC,EAChB,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EAC6B;IACrC,OAAO,CACL,iBACM,KAAK,EACT,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,EACtC,KAAK,EAAE,EAAE,eAAe,EAAE,oBAAoB,EAAE,GAAG,KAAK,EAAE,GAC1D,CACH,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/workflow-trace-view.d.ts

@@ -2,7 +2,7 @@ import type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
 import { type SpanSelectionInfo } from './sidebar/entity-detail-panel';
 /** Re-export SpanSelectionInfo for consumers */
 export type { SpanSelectionInfo };
-export declare const WorkflowTraceViewer: ({ run, steps, hooks, events, isLoading, error, spanDetailData, spanDetailLoading, spanDetailError, onWakeUpSleep, onResolveHook, onStreamClick, onSpanSelect, onLoadEventData, }: {
+export declare const WorkflowTraceViewer: ({ run, steps, hooks, events, isLoading, error, spanDetailData, spanDetailLoading, spanDetailError, onWakeUpSleep, onResolveHook, onCancelRun, onStreamClick, onSpanSelect, onLoadEventData, }: {
     run: WorkflowRun;
     steps: Step[];
     hooks: Hook[];
@@ -16,6 +16,8 @@ export declare const WorkflowTraceViewer: ({ run, steps, hooks, events, isLoadin
         stoppedCount: number;
     }>;
     onResolveHook?: (hookToken: string, payload: unknown, hook?: Hook) => Promise<void>;
+    /** Callback to cancel the current run */
+    onCancelRun?: (runId: string) => Promise<void>;
     /** Callback when a stream reference is clicked in the detail panel */
     onStreamClick?: (streamId: string) => void;
     /** Callback when a span is selected. */

package/dist/components/workflow-trace-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"workflow-trace-view.d.ts","sourceRoot":"","sources":["../../src/components/workflow-trace-view.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAKtE,OAAO,EAGL,KAAK,iBAAiB,EACvB,MAAM,+BAA+B,CAAC;AAiLvC,gDAAgD;AAChD,YAAY,EAAE,iBAAiB,EAAE,CAAC;AA2FlC,eAAO,MAAM,mBAAmB,GAAI,kLAejC;IACD,GAAG,EAAE,WAAW,CAAC;IACjB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,IAAI,CAAC;IAC1D,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IAC/B,aAAa,CAAC,EAAE,CACd,KAAK,EAAE,MAAM,EACb,aAAa,EAAE,MAAM,KAClB,OAAO,CAAC;QAAE,YAAY,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACvC,aAAa,CAAC,EAAE,CACd,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,OAAO,EAChB,IAAI,CAAC,EAAE,IAAI,KACR,OAAO,CAAC,IAAI,CAAC,CAAC;IACnB,sEAAsE;IACtE,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,wCAAwC;IACxC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACjD,iFAAiF;IACjF,eAAe,CAAC,EAAE,CAChB,aAAa,EAAE,MAAM,EACrB,OAAO,EAAE,MAAM,KACZ,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;CAC9B,4CAgKA,CAAC"}
+{"version":3,"file":"workflow-trace-view.d.ts","sourceRoot":"","sources":["../../src/components/workflow-trace-view.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAOtE,OAAO,EAGL,KAAK,iBAAiB,EACvB,MAAM,+BAA+B,CAAC;AAgsBvC,gDAAgD;AAChD,YAAY,EAAE,iBAAiB,EAAE,CAAC;AA2FlC,eAAO,MAAM,mBAAmB,GAAI,+LAgBjC;IACD,GAAG,EAAE,WAAW,CAAC;IACjB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,IAAI,CAAC;IAC1D,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IAC/B,aAAa,CAAC,EAAE,CACd,KAAK,EAAE,MAAM,EACb,aAAa,EAAE,MAAM,KAClB,OAAO,CAAC;QAAE,YAAY,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACvC,aAAa,CAAC,EAAE,CACd,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,OAAO,EAChB,IAAI,CAAC,EAAE,IAAI,KACR,OAAO,CAAC,IAAI,CAAC,CAAC;IACnB,yCAAyC;IACzC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/C,sEAAsE;IACtE,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,wCAAwC;IACxC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACjD,iFAAiF;IACjF,eAAe,CAAC,EAAE,CAChB,aAAa,EAAE,MAAM,EACrB,OAAO,EAAE,MAAM,KACZ,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;CAC9B,4CAkOA,CAAC"}