@agentskillmania/skill-ui-shared 0.1.0

package/dist/components/ExpandableItem.stories.js

@@ -0,0 +1,178 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { css, useTheme } from '@emotion/react';
+import { useState } from 'react';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { ExpandableItem } from './ExpandableItem.js';
+const meta = {
+    title: 'Shared/ExpandableItem',
+    component: ExpandableItem,
+    tags: ['autodocs'],
+    argTypes: {
+        renderSummary: { control: false },
+        renderDetail: { control: false },
+    },
+};
+export default meta;
+/** Colored type tag for event log entries. */
+function EventTypeTag({ type }) {
+    const theme = useTheme();
+    const colorMap = {
+        agent: { bg: 'rgba(34,197,94,0.1)', text: theme.color.success },
+        tool: { bg: 'rgba(67,97,238,0.1)', text: theme.color.primary },
+        context: { bg: 'rgba(234,179,8,0.1)', text: theme.color.warning },
+        error: { bg: 'rgba(239,68,68,0.1)', text: theme.color.error },
+        info: { bg: theme.color.fillSecondary, text: theme.color.textSecondary },
+    };
+    const colors = colorMap[type] || colorMap.info;
+    return (_jsx("span", { css: css `
+        font-size: ${theme.font.size.xs};
+        padding: 1px 8px;
+        border-radius: ${theme.radius.sm};
+        background: ${colors.bg};
+        color: ${colors.text};
+        font-weight: ${theme.font.weight.medium};
+        flex-shrink: 0;
+      `, children: type.charAt(0).toUpperCase() + type.slice(1) }));
+}
+/** Event log row with type tag, content, and timestamp. */
+function EventLogRow({ type, label, time, ctx, }) {
+    const theme = useTheme();
+    return (_jsxs("div", { css: css `
+        display: flex;
+        align-items: center;
+        gap: ${theme.spacing[2]};
+        padding: ${theme.spacing[2]} ${theme.spacing[3]};
+        cursor: pointer;
+        transition: background ${theme.motion.duration.fast};
+        &:hover {
+          background: ${theme.color.fillTertiary};
+        }
+      `, onClick: ctx.toggle, children: [_jsx("span", { css: css `
+          font-size: 10px;
+          color: ${theme.color.textTertiary};
+          width: 16px;
+          text-align: center;
+          transition: transform 150ms ${theme.motion.easing.out};
+          transform: rotate(${ctx.expanded ? 90 : 0}deg);
+          flex-shrink: 0;
+        `, children: "\u25B6" }), _jsx(EventTypeTag, { type: type }), _jsx("span", { css: css `
+          font-size: ${theme.font.size.sm};
+          color: ${theme.color.text};
+          flex: 1;
+          min-width: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        `, children: label }), _jsx("span", { css: css `
+          font-size: ${theme.font.size.xs};
+          color: ${theme.color.textTertiary};
+          flex-shrink: 0;
+        `, children: time })] }));
+}
+/** JSON detail block with monospace formatting. */
+function JsonDetail({ data }) {
+    const theme = useTheme();
+    return (_jsx("pre", { css: css `
+        margin: 0;
+        padding: ${theme.spacing[2]} ${theme.spacing[4]} ${theme.spacing[2]} 44px;
+        font-size: ${theme.font.size.xs};
+        background: ${theme.color.fillSecondary};
+        color: ${theme.color.textSecondary};
+        line-height: 1.5;
+        overflow-x: auto;
+        border-top: 1px solid ${theme.color.borderSecondary};
+      `, children: JSON.stringify(data, null, 2) }));
+}
+/** A list of expandable event log rows with colored type tags and JSON details. */
+export const EventLogItems = {
+    render: () => (_jsxs("div", { style: {
+            width: '100%',
+            border: '1px solid #e5e7eb',
+            borderRadius: '6px',
+            overflow: 'hidden',
+        }, children: [_jsx(ExpandableItem, { renderSummary: (ctx) => (_jsx(EventLogRow, { type: "agent", label: "Agent started", time: "10:01:23", ctx: ctx })), renderDetail: () => (_jsx(JsonDetail, { data: { pid: 8492, runtime: 'colts', version: '0.3.0' } })) }), _jsx(ExpandableItem, { renderSummary: (ctx) => (_jsx(EventLogRow, { type: "tool", label: "readFile('src/runner.ts')", time: "10:01:25", ctx: ctx })), renderDetail: () => (_jsx(JsonDetail, { data: { tool: 'readFile', args: { path: 'src/runner.ts' }, result: '142 lines' } })) }), _jsx(ExpandableItem, { renderSummary: (ctx) => (_jsx(EventLogRow, { type: "context", label: "Context compressed 12.4k \u2192 3.2k", time: "10:01:30", ctx: ctx })), renderDetail: () => (_jsx(JsonDetail, { data: {
+                        anchor: 'user-request-refactor',
+                        removed: 9200,
+                        summary: 'User requested JWT refactoring...',
+                    } })) }), _jsx(ExpandableItem, { renderSummary: (ctx) => (_jsx(EventLogRow, { type: "error", label: "Tool execution failed", time: "10:01:35", ctx: ctx })), renderDetail: () => (_jsx(JsonDetail, { data: { tool: 'runCommand', exitCode: 1, stderr: 'Permission denied' } })) }), _jsx(ExpandableItem, { renderSummary: (ctx) => (_jsx(EventLogRow, { type: "info", label: "Session completed", time: "10:02:01", ctx: ctx })) })] })),
+};
+/** Test case rows — passed items not expandable, failed ones show error details. */
+export const TestCaseItems = {
+    render: () => {
+        const theme = useTheme();
+        const tests = [
+            { name: 'should render header', passed: true },
+            { name: 'should apply theme colors', passed: true },
+            { name: 'should handle empty input', passed: false },
+            { name: 'should debounce onChange', passed: true },
+        ];
+        return (_jsx("div", { style: {
+                width: '100%',
+                border: '1px solid #e5e7eb',
+                borderRadius: '6px',
+                overflow: 'hidden',
+            }, children: tests.map((test, i) => (_jsx(ExpandableItem, { expandable: !test.passed, renderSummary: (ctx) => (_jsxs("div", { css: css `
+                  display: flex;
+                  align-items: center;
+                  gap: ${theme.spacing[2]};
+                  padding: ${theme.spacing[2]} ${theme.spacing[3]};
+                  font-size: ${theme.font.size.sm};
+                  color: ${test.passed ? theme.color.text : theme.color.error};
+                  cursor: ${test.passed ? 'default' : 'pointer'};
+                  &:hover {
+                    background: ${test.passed ? 'transparent' : theme.color.fillTertiary};
+                  }
+                `, children: [_jsx("span", { css: css `
+                    width: 20px;
+                    text-align: center;
+                    color: ${test.passed ? theme.color.success : theme.color.error};
+                    font-weight: ${theme.font.weight.bold};
+                  `, children: test.passed ? '✓' : '✗' }), _jsx("span", { css: css `flex: 1; color: ${test.passed ? theme.color.text : theme.color.error};`, children: test.name })] })), renderDetail: test.passed
+                    ? undefined
+                    : () => (_jsxs("div", { css: css `
+                        padding: ${theme.spacing[2]} ${theme.spacing[4]};
+                        font-size: ${theme.font.size.xs};
+                        color: ${theme.color.error};
+                        background: rgba(239, 68, 68, 0.04);
+                        border-top: 1px solid rgba(239, 68, 68, 0.1);
+                        font-family: ${theme.font.familyMono};
+                      `, children: ["AssertionError: expected \"\" to equal \"undefined\"", _jsx("br", {}), "at Context.<anonymous> (test/unit/input.test.ts:42:18)"] })) }, i))) }));
+    },
+};
+/** Single expandable item with controlled state via React.useState. */
+export const SingleItem = {
+    render: () => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const [expanded, setExpanded] = useState(false);
+        const theme = useTheme();
+        return (_jsx("div", { css: css `
+          border: 1px solid ${theme.color.border};
+          border-radius: ${theme.radius.md};
+          overflow: hidden;
+          width: 100%;
+        `, children: _jsx(ExpandableItem, { expanded: expanded, onToggle: (next) => setExpanded(next), renderSummary: (ctx) => (_jsxs("div", { css: css `
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                padding: ${theme.spacing[2]} ${theme.spacing[3]};
+                cursor: pointer;
+                transition: background ${theme.motion.duration.fast};
+                &:hover {
+                  background: ${theme.color.fillTertiary};
+                }
+              `, onClick: ctx.toggle, children: [_jsxs("div", { css: css `display: flex; align-items: center; gap: ${theme.spacing[2]};`, children: [ctx.expanded ? (_jsx(ChevronDown, { size: 14, css: css `color: ${theme.color.textTertiary};` })) : (_jsx(ChevronRight, { size: 14, css: css `color: ${theme.color.textTertiary};` })), _jsxs("span", { css: css `font-size: ${theme.font.size.sm}; color: ${theme.color.text};`, children: ["Click to ", ctx.expanded ? 'collapse' : 'expand'] })] }), _jsx("span", { css: css `
+                  font-size: ${theme.font.size.xs};
+                  color: ${theme.color.textTertiary};
+                  background: ${theme.color.fillSecondary};
+                  padding: 2px 8px;
+                  border-radius: ${theme.radius.sm};
+                `, children: expanded ? 'OPEN' : 'CLOSED' })] })), renderDetail: () => (_jsxs("div", { css: css `
+                padding: ${theme.spacing[3]};
+                background: ${theme.color.fillSecondary};
+                font-size: ${theme.font.size.sm};
+                color: ${theme.color.textSecondary};
+                border-top: 1px solid ${theme.color.borderSecondary};
+              `, children: ["This content is controlled via React.useState. The expanded state is:", ' ', _jsx("strong", { children: expanded ? 'true' : 'false' }), "."] })) }) }));
+    },
+};
+//# sourceMappingURL=ExpandableItem.stories.js.map

package/dist/components/ExpandableItem.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableItem.stories.js","sourceRoot":"","sources":["../../src/components/ExpandableItem.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/ExpandableRow.d.ts

@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react';
+/** Detail area style variant. */
+export type DetailVariant = 'default' | 'code';
+export interface ExpandableRowProps {
+    /** Whether this item can expand. Default: true */
+    expandable?: boolean;
+    /** Uncontrolled initial state. Default: false */
+    defaultExpanded?: boolean;
+    /** Controlled expand state. */
+    expanded?: boolean;
+    /** Expand state change callback. */
+    onToggle?: (expanded: boolean) => void;
+    /** Summary content — always visible. */
+    renderSummary: (ctx: {
+        expanded: boolean;
+        toggle: () => void;
+    }) => ReactNode;
+    /** Detail content — shown when expanded. */
+    renderDetail?: () => ReactNode;
+    /** Show chevron indicator. Default: false */
+    showChevron?: boolean;
+    /** Detail area style variant. Default: 'default' */
+    detailVariant?: DetailVariant;
+    /** Animation duration in ms. Default: 150 */
+    animationDuration?: number;
+    /** Additional className. */
+    className?: string;
+}
+/**
+ * ExpandableRow — visual shell for expandable list items.
+ * Wraps ExpandableItem (headless behavior) with container-highlight styling:
+ * left border + fillSubtle background when expanded, border-bottom separator, hover effect.
+ */
+export declare function ExpandableRow({ expandable, defaultExpanded, expanded: controlledExpanded, onToggle, renderSummary, renderDetail, showChevron, detailVariant, animationDuration, className, }: ExpandableRowProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ExpandableRow.d.ts.map

package/dist/components/ExpandableRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableRow.d.ts","sourceRoot":"","sources":["../../src/components/ExpandableRow.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,iCAAiC;AACjC,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,MAAM,CAAC;AAE/C,MAAM,WAAW,kBAAkB;IACjC,kDAAkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iDAAiD;IACjD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC,wCAAwC;IACxC,aAAa,EAAE,CAAC,GAAG,EAAE;QAAE,QAAQ,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,SAAS,CAAC;IAC7E,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,SAAS,CAAC;IAE/B,6CAA6C;IAC7C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oDAAoD;IACpD,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,6CAA6C;IAC7C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgDD;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC5B,UAAiB,EACjB,eAAuB,EACvB,QAAQ,EAAE,kBAAkB,EAC5B,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,WAAmB,EACnB,aAAyB,EACzB,iBAAuB,EACvB,SAAS,GACV,EAAE,kBAAkB,oDA2DpB"}

package/dist/components/ExpandableRow.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { useTheme } from '@agentskillmania/skill-ui-theme';
+import { css } from '@emotion/react';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { ExpandableItem } from './ExpandableItem.js';
+/** Container style — wraps both summary and detail. */
+const containerStyle = (theme, isExpanded) => css `
+  border-left: 2px solid ${isExpanded ? theme.color.primary : 'transparent'};
+  background: ${isExpanded ? theme.color.fillSubtle : 'transparent'};
+  border-bottom: 1px solid ${theme.color.borderSecondary};
+  transition:
+    border-color ${theme.motion.duration.normal} ${theme.motion.easing.out},
+    background ${theme.motion.duration.normal} ${theme.motion.easing.out};
+`;
+/** Summary row style — clickable with hover. */
+const summaryStyle = (theme, isExpanded) => css `
+  display: flex;
+  align-items: center;
+  padding: ${theme.spacing[1]} ${theme.spacing[2]};
+  cursor: pointer;
+  transition: background ${theme.motion.duration.normal} ${theme.motion.easing.out};
+
+  &:hover {
+    background: ${isExpanded ? 'transparent' : theme.color.fillSecondary};
+  }
+`;
+/** Detail area for default variant. */
+const detailDefaultStyle = (theme) => css `
+  padding: ${theme.spacing['0.5']} ${theme.spacing[2]} ${theme.spacing[2]} ${theme.spacing[2]};
+  font-size: ${theme.font.size.xs};
+  color: ${theme.color.textSecondary};
+  line-height: 1.5;
+`;
+/** Detail area for code variant. */
+const detailCodeStyle = (theme) => css `
+  margin: 0 ${theme.spacing[1]} ${theme.spacing[1]} ${theme.spacing[1]};
+  padding: ${theme.spacing[2]};
+  background: ${theme.color.fillSecondary};
+  border-radius: ${theme.radius.xs};
+  font-size: ${theme.font.size.xs};
+  font-family: ${theme.font.familyMono};
+  color: ${theme.color.textSecondary};
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: 200px;
+  overflow: auto;
+`;
+/**
+ * ExpandableRow — visual shell for expandable list items.
+ * Wraps ExpandableItem (headless behavior) with container-highlight styling:
+ * left border + fillSubtle background when expanded, border-bottom separator, hover effect.
+ */
+export function ExpandableRow({ expandable = true, defaultExpanded = false, expanded: controlledExpanded, onToggle, renderSummary, renderDetail, showChevron = false, detailVariant = 'default', animationDuration = 150, className, }) {
+    const theme = useTheme();
+    return (_jsx(ExpandableItem, { expandable: expandable, defaultExpanded: defaultExpanded, expanded: controlledExpanded, onToggle: onToggle, renderSummary: ({ expanded, toggle }) => (_jsx("div", { css: containerStyle(theme, expanded), children: _jsxs("div", { css: summaryStyle(theme, expanded), onClick: toggle, "data-testid": "expandable-summary", children: [showChevron && (_jsx("span", { css: css `
+                  flex-shrink: 0;
+                  margin-right: ${theme.spacing['0.5']};
+                  color: ${theme.color.textTertiary};
+                  display: flex;
+                  align-items: center;
+                `, children: expanded ? _jsx(ChevronDown, { size: 12 }) : _jsx(ChevronRight, { size: 12 }) })), _jsx("div", { css: css `
+                flex: 1;
+                min-width: 0;
+              `, children: renderSummary({ expanded, toggle }) })] }) })), renderDetail: renderDetail
+            ? () => (_jsx("div", { "data-testid": "expandable-detail", children: _jsx("div", { css: detailVariant === 'code' ? detailCodeStyle(theme) : detailDefaultStyle(theme), children: renderDetail() }) }))
+            : undefined, animationDuration: animationDuration, className: className }));
+}
+//# sourceMappingURL=ExpandableRow.js.map

package/dist/components/ExpandableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableRow.js","sourceRoot":"","sources":["../../src/components/ExpandableRow.tsx"],"names":[],"mappings":"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"}

package/dist/components/InfoRow.d.ts

@@ -0,0 +1,15 @@
+/** Props for the InfoRow component. */
+export interface InfoRowProps {
+    /** Label displayed on the left. */
+    label: string;
+    /** Text value passed to CopyValue for clipboard copy. */
+    text: string;
+    /** Value content rendered on the right (typically formatted value). */
+    children: React.ReactNode;
+}
+/**
+ * InfoRow — key-value display row with click-to-copy on the value.
+ * Label on left, CopyValue on right.
+ */
+export declare function InfoRow({ label, text, children }: InfoRowProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=InfoRow.d.ts.map

package/dist/components/InfoRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoRow.d.ts","sourceRoot":"","sources":["../../src/components/InfoRow.tsx"],"names":[],"mappings":"AAMA,uCAAuC;AACvC,MAAM,WAAW,YAAY;IAC3B,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,IAAI,EAAE,MAAM,CAAC;IACb,uEAAuE;IACvE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAiBD;;;GAGG;AACH,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,YAAY,oDAQ9D"}

package/dist/components/InfoRow.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { useTheme } from '@agentskillmania/skill-ui-theme';
+import { css } from '@emotion/react';
+import { CopyValue } from './CopyValue.js';
+/** Key-value row style. */
+const rowStyle = (theme) => css `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: ${theme.spacing['2']};
+  padding: 2px 0;
+  font-size: ${theme.font.size.sm};
+`;
+const labelStyle = (theme) => css `
+  color: ${theme.color.textSecondary};
+  flex-shrink: 0;
+`;
+/**
+ * InfoRow — key-value display row with click-to-copy on the value.
+ * Label on left, CopyValue on right.
+ */
+export function InfoRow({ label, text, children }) {
+    const theme = useTheme();
+    return (_jsxs("div", { css: rowStyle(theme), children: [_jsx("span", { css: labelStyle(theme), children: label }), _jsx(CopyValue, { text: text, children: children })] }));
+}
+//# sourceMappingURL=InfoRow.js.map

package/dist/components/InfoRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoRow.js","sourceRoot":"","sources":["../../src/components/InfoRow.tsx"],"names":[],"mappings":";AAAA,sCAAsC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAErC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAY3C,2BAA2B;AAC3B,MAAM,QAAQ,GAAG,CAAC,KAAkC,EAAE,EAAE,CAAC,GAAG,CAAA;;;;SAInD,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;;eAEZ,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;CAChC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,KAAkC,EAAE,EAAE,CAAC,GAAG,CAAA;WACnD,KAAK,CAAC,KAAK,CAAC,aAAa;;CAEnC,CAAC;AAEF;;;GAGG;AACH,MAAM,UAAU,OAAO,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAgB;IAC7D,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,CACL,eAAK,GAAG,EAAE,QAAQ,CAAC,KAAK,CAAC,aACvB,eAAM,GAAG,EAAE,UAAU,CAAC,KAAK,CAAC,YAAG,KAAK,GAAQ,EAC5C,KAAC,SAAS,IAAC,IAAI,EAAE,IAAI,YAAG,QAAQ,GAAa,IACzC,CACP,CAAC;AACJ,CAAC"}

package/dist/components/MetricTile.d.ts

@@ -0,0 +1,15 @@
+/** Props for the MetricTile component. */
+export interface MetricTileProps {
+    /** Statistic title label. */
+    title: string;
+    /** Statistic value — string for formatted values, number for raw counts. */
+    value: string | number;
+    /** Optional style override for the Statistic value (e.g. color: error). */
+    valueStyle?: React.CSSProperties;
+}
+/**
+ * MetricTile — small card wrapping antd Statistic with consistent styling.
+ * Used for displaying metric values (step count, token count, etc.).
+ */
+export declare function MetricTile({ title, value, valueStyle }: MetricTileProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MetricTile.d.ts.map

package/dist/components/MetricTile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricTile.d.ts","sourceRoot":"","sources":["../../src/components/MetricTile.tsx"],"names":[],"mappings":"AAMA,0CAA0C;AAC1C,MAAM,WAAW,eAAe;IAC9B,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,2EAA2E;IAC3E,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAClC;AAsBD;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,eAAe,oDAOvE"}

package/dist/components/MetricTile.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { useTheme } from '@agentskillmania/skill-ui-theme';
+import { css } from '@emotion/react';
+import { Statistic } from 'antd';
+/** Tile style — background card for a single antd Statistic. */
+const tileStyle = (theme) => css `
+  background: ${theme.color.fillSecondary};
+  border-radius: ${theme.radius.base};
+  padding: ${theme.spacing['2']};
+  text-align: center;
+
+  .ant-statistic-title {
+    font-size: 10px;
+    color: ${theme.color.textSecondary};
+    margin-bottom: 2px;
+  }
+
+  .ant-statistic-content {
+    font-size: ${theme.font.size.base};
+    font-weight: ${theme.font.weight.bold};
+    color: ${theme.color.text};
+  }
+`;
+/**
+ * MetricTile — small card wrapping antd Statistic with consistent styling.
+ * Used for displaying metric values (step count, token count, etc.).
+ */
+export function MetricTile({ title, value, valueStyle }) {
+    const theme = useTheme();
+    return (_jsx("div", { css: tileStyle(theme), children: _jsx(Statistic, { title: title, value: value, styles: { content: valueStyle } }) }));
+}
+//# sourceMappingURL=MetricTile.js.map

package/dist/components/MetricTile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricTile.js","sourceRoot":"","sources":["../../src/components/MetricTile.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,MAAM,CAAC;AAYjC,gEAAgE;AAChE,MAAM,SAAS,GAAG,CAAC,KAAY,EAAE,EAAE,CAAC,GAAG,CAAA;gBACvB,KAAK,CAAC,KAAK,CAAC,aAAa;mBACtB,KAAK,CAAC,MAAM,CAAC,IAAI;aACvB,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;;;;;aAKlB,KAAK,CAAC,KAAK,CAAC,aAAa;;;;;iBAKrB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI;mBAClB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI;aAC5B,KAAK,CAAC,KAAK,CAAC,IAAI;;CAE5B,CAAC;AAEF;;;GAGG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAmB;IACtE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,CACL,cAAK,GAAG,EAAE,SAAS,CAAC,KAAK,CAAC,YACxB,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,GAAI,GACtE,CACP,CAAC;AACJ,CAAC"}

package/dist/components/PaginationBar.d.ts

@@ -0,0 +1,17 @@
+/** Props for the PaginationBar component. */
+export interface PaginationBarProps {
+    /** 1-indexed current page. */
+    current: number;
+    /** Number of items per page. */
+    pageSize: number;
+    /** Total item count. */
+    total: number;
+    /** Callback fired when the page changes. */
+    onChange: (page: number) => void;
+}
+/**
+ * PaginationBar — antd Pagination hidden when total fits within a single page,
+ * wrapped in a right-aligned container with consistent top spacing.
+ */
+export declare function PaginationBar({ current, pageSize, total, onChange }: PaginationBarProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=PaginationBar.d.ts.map

package/dist/components/PaginationBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationBar.d.ts","sourceRoot":"","sources":["../../src/components/PaginationBar.tsx"],"names":[],"mappings":"AAIA,6CAA6C;AAC7C,MAAM,WAAW,kBAAkB;IACjC,8BAA8B;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAQD;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,kBAAkB,2DAOvF"}

package/dist/components/PaginationBar.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { Pagination } from 'antd';
+const barStyle = css `
+  margin-top: 24px;
+  display: flex;
+  justify-content: flex-end;
+`;
+/**
+ * PaginationBar — antd Pagination hidden when total fits within a single page,
+ * wrapped in a right-aligned container with consistent top spacing.
+ */
+export function PaginationBar({ current, pageSize, total, onChange }) {
+    if (total <= pageSize)
+        return null;
+    return (_jsx("div", { css: barStyle, children: _jsx(Pagination, { current: current, pageSize: pageSize, total: total, onChange: onChange }) }));
+}
+//# sourceMappingURL=PaginationBar.js.map

package/dist/components/PaginationBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationBar.js","sourceRoot":"","sources":["../../src/components/PaginationBar.tsx"],"names":[],"mappings":";AAAA,sCAAsC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAclC,MAAM,QAAQ,GAAG,GAAG,CAAA;;;;CAInB,CAAC;AAEF;;;GAGG;AACH,MAAM,UAAU,aAAa,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAsB;IACtF,IAAI,KAAK,IAAI,QAAQ;QAAE,OAAO,IAAI,CAAC;IACnC,OAAO,CACL,cAAK,GAAG,EAAE,QAAQ,YAChB,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,GAClF,CACP,CAAC;AACJ,CAAC"}

package/dist/components/SectionHeader.d.ts

@@ -0,0 +1,15 @@
+import type { LucideIcon } from 'lucide-react';
+import type { ReactNode } from 'react';
+export interface SectionHeaderProps {
+    /** Section icon (rendered at 14px). */
+    icon: LucideIcon;
+    /** Section label (rendered uppercase via CSS). */
+    title: string;
+    /** Right-aligned extra content. */
+    extra?: ReactNode;
+    /** Optional explicit icon color. Defaults to inheriting from container (textSecondary). */
+    iconColor?: string;
+}
+/** Renders a section header with icon, uppercase title, and optional extra content. */
+export declare function SectionHeader({ icon: Icon, title, extra, iconColor }: SectionHeaderProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SectionHeader.d.ts.map

package/dist/components/SectionHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHeader.d.ts","sourceRoot":"","sources":["../../src/components/SectionHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,kBAAkB;IACjC,uCAAuC;IACvC,IAAI,EAAE,UAAU,CAAC;IACjB,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,2FAA2F;IAC3F,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,uFAAuF;AACvF,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,kBAAkB,oDAoDxF"}

package/dist/components/SectionHeader.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { useTheme } from '@agentskillmania/skill-ui-theme';
+import { css } from '@emotion/react';
+/** Renders a section header with icon, uppercase title, and optional extra content. */
+export function SectionHeader({ icon: Icon, title, extra, iconColor }) {
+    const theme = useTheme();
+    return (_jsxs("div", { css: css `
+        display: flex;
+        align-items: center;
+        gap: ${theme.spacing[1]};
+        padding: ${theme.spacing[1]} 0;
+        font-size: ${theme.font.size.xs};
+        font-weight: ${theme.font.weight.bold};
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        color: ${theme.color.textSecondary};
+      `, children: [_jsx(Icon, { size: 14, css: iconColor
+                    ? css `
+                color: ${iconColor};
+                flex-shrink: 0;
+              `
+                    : css `
+                flex-shrink: 0;
+              ` }), title, _jsx("div", { css: css `
+          flex: 1;
+          height: 1px;
+          background: ${theme.color.borderSecondary};
+        ` }), extra && (_jsx("span", { "data-testid": "section-extra", css: css `
+            margin-left: auto;
+            font-size: ${theme.font.size.xs};
+            color: ${theme.color.textTertiary};
+          `, children: extra }))] }));
+}
+//# sourceMappingURL=SectionHeader.js.map

package/dist/components/SectionHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHeader.js","sourceRoot":"","sources":["../../src/components/SectionHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAerC,uFAAuF;AACvF,MAAM,UAAU,aAAa,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAsB;IACvF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,OAAO,CACL,eACE,GAAG,EAAE,GAAG,CAAA;;;eAGC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;mBACZ,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;qBACd,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;uBAChB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI;;;iBAG5B,KAAK,CAAC,KAAK,CAAC,aAAa;OACnC,aAED,KAAC,IAAI,IACH,IAAI,EAAE,EAAE,EACR,GAAG,EACD,SAAS;oBACP,CAAC,CAAC,GAAG,CAAA;yBACQ,SAAS;;eAEnB;oBACH,CAAC,CAAC,GAAG,CAAA;;eAEF,GAEP,EACD,KAAK,EACN,cACE,GAAG,EAAE,GAAG,CAAA;;;wBAGQ,KAAK,CAAC,KAAK,CAAC,eAAe;SAC1C,GACD,EACD,KAAK,IAAI,CACR,8BACc,eAAe,EAC3B,GAAG,EAAE,GAAG,CAAA;;yBAEO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;qBACtB,KAAK,CAAC,KAAK,CAAC,YAAY;WAClC,YAEA,KAAK,GACD,CACR,IACG,CACP,CAAC;AACJ,CAAC"}

package/dist/components/SectionHeader.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { SectionHeader } from './SectionHeader.js';
+import type { SectionHeaderProps } from './SectionHeader.js';
+declare const meta: Meta<typeof SectionHeader>;
+export default meta;
+type Story = StoryObj<SectionHeaderProps>;
+/** Default section header with icon and title. */
+export declare const Default: Story;
+/** Section header with extra content aligned to the right. */
+export declare const WithExtra: Story;
+/** Multiple headers stacked to demonstrate the divider pattern. */
+export declare const MultipleHeaders: Story;
+//# sourceMappingURL=SectionHeader.stories.d.ts.map

package/dist/components/SectionHeader.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHeader.stories.d.ts","sourceRoot":"","sources":["../../src/components/SectionHeader.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAE7D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CAOpC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,kBAAkB,CAAC,CAAC;AAE1C,kDAAkD;AAClD,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,8DAA8D;AAC9D,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,mEAAmE;AACnE,eAAO,MAAM,eAAe,EAAE,KAQ7B,CAAC"}

package/dist/components/SectionHeader.stories.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { Cpu, Wrench, Settings } from 'lucide-react';
+import { SectionHeader } from './SectionHeader.js';
+const meta = {
+    title: 'Shared/SectionHeader',
+    component: SectionHeader,
+    tags: ['autodocs'],
+    argTypes: {
+        icon: { control: false },
+    },
+};
+export default meta;
+/** Default section header with icon and title. */
+export const Default = {
+    args: {
+        icon: Cpu,
+        title: 'Agent State',
+    },
+};
+/** Section header with extra content aligned to the right. */
+export const WithExtra = {
+    args: {
+        icon: Wrench,
+        title: 'Skills',
+        extra: _jsx("span", { children: "3 active" }),
+    },
+};
+/** Multiple headers stacked to demonstrate the divider pattern. */
+export const MultipleHeaders = {
+    render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' }, children: [_jsx(SectionHeader, { icon: Cpu, title: "Agent State" }), _jsx(SectionHeader, { icon: Wrench, title: "Skills", extra: _jsx("span", { children: "3 active" }) }), _jsx(SectionHeader, { icon: Settings, title: "Configuration" })] })),
+};
+//# sourceMappingURL=SectionHeader.stories.js.map

package/dist/components/SectionHeader.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHeader.stories.js","sourceRoot":"","sources":["../../src/components/SectionHeader.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGnD,MAAM,IAAI,GAA+B;IACvC,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,aAAa;IACxB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;KACzB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,kDAAkD;AAClD,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,IAAI,EAAE,GAAG;QACT,KAAK,EAAE,aAAa;KACrB;CACF,CAAC;AAEF,8DAA8D;AAC9D,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,sCAAqB;KAC7B;CACF,CAAC;AAEF,mEAAmE;AACnE,MAAM,CAAC,MAAM,eAAe,GAAU;IACpC,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,aACnE,KAAC,aAAa,IAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAC,aAAa,GAAG,EAChD,KAAC,aAAa,IAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,sCAAqB,GAAI,EAC5E,KAAC,aAAa,IAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAC,eAAe,GAAG,IACnD,CACP;CACF,CAAC"}

package/dist/components/SectionLabel.d.ts

@@ -0,0 +1,10 @@
+/** Props for the SectionLabel component. */
+export interface SectionLabelProps {
+    children: React.ReactNode;
+}
+/**
+ * SectionLabel — muted uppercase label above a content block.
+ * Canonical style: xs, semibold, textSecondary, uppercase, 0.3px letter-spacing.
+ */
+export declare function SectionLabel({ children }: SectionLabelProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SectionLabel.d.ts.map

package/dist/components/SectionLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionLabel.d.ts","sourceRoot":"","sources":["../../src/components/SectionLabel.tsx"],"names":[],"mappings":"AAIA,4CAA4C;AAC5C,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAYD;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE,iBAAiB,oDAG3D"}

package/dist/components/SectionLabel.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { useTheme } from '@agentskillmania/skill-ui-theme';
+import { css } from '@emotion/react';
+/** Canonical section label style — uppercase muted label. */
+const labelStyle = (theme) => css `
+  font-size: ${theme.font.size.xs};
+  font-weight: ${theme.font.weight.semibold};
+  color: ${theme.color.textSecondary};
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  margin-bottom: ${theme.spacing[1]};
+`;
+/**
+ * SectionLabel — muted uppercase label above a content block.
+ * Canonical style: xs, semibold, textSecondary, uppercase, 0.3px letter-spacing.
+ */
+export function SectionLabel({ children }) {
+    const theme = useTheme();
+    return _jsx("div", { css: labelStyle(theme), children: children });
+}
+//# sourceMappingURL=SectionLabel.js.map