@agentskillmania/skill-ui-shared 0.1.0

package/dist/components/SectionLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionLabel.js","sourceRoot":"","sources":["../../src/components/SectionLabel.tsx"],"names":[],"mappings":";AAAA,sCAAsC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAOrC,6DAA6D;AAC7D,MAAM,UAAU,GAAG,CAAC,KAAkC,EAAE,EAAE,CAAC,GAAG,CAAA;eAC/C,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;iBAChB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ;WAChC,KAAK,CAAC,KAAK,CAAC,aAAa;;;mBAGjB,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;CAClC,CAAC;AAEF;;;GAGG;AACH,MAAM,UAAU,YAAY,CAAC,EAAE,QAAQ,EAAqB;IAC1D,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,cAAK,GAAG,EAAE,UAAU,CAAC,KAAK,CAAC,YAAG,QAAQ,GAAO,CAAC;AACvD,CAAC"}

package/dist/components/SplitDivider.d.ts

@@ -0,0 +1,13 @@
+export interface SplitDividerProps {
+    /** Called when drag ends with new sidebar width. */
+    onResize: (width: number) => void;
+    /** Disable drag interaction. */
+    disabled?: boolean;
+    /** Min pane width (default: 160). */
+    minWidth?: number;
+    /** Max pane width (default: window.innerWidth * 0.85). */
+    maxWidth?: number;
+}
+/** Renders a 4px draggable vertical divider. */
+export declare function SplitDivider({ onResize, disabled, minWidth, maxWidth, }: SplitDividerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SplitDivider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SplitDivider.d.ts","sourceRoot":"","sources":["../../src/components/SplitDivider.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,iBAAiB;IAChC,oDAAoD;IACpD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,gDAAgD;AAChD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,QAAgB,EAChB,QAAc,EACd,QAA0E,GAC3E,EAAE,iBAAiB,oDAiFnB"}

package/dist/components/SplitDivider.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { useTheme } from '@agentskillmania/skill-ui-theme';
+import { css } from '@emotion/react';
+import { useCallback, useEffect, useRef } from 'react';
+/** Renders a 4px draggable vertical divider. */
+export function SplitDivider({ onResize, disabled = false, minWidth = 160, maxWidth = typeof window !== 'undefined' ? window.innerWidth * 0.85 : 1200, }) {
+    const theme = useTheme();
+    // UI12: drag state lives in refs so the effect can read the latest values
+    // without re-registering listeners on every change. The effect cleanup
+    // guarantees listeners are removed on unmount even if mouseup never fires.
+    const dragState = useRef(null);
+    const handleMouseDown = useCallback((e) => {
+        if (disabled)
+            return;
+        const divider = e.currentTarget;
+        const sidebar = divider.nextElementSibling;
+        if (!sidebar)
+            return;
+        sidebar.classList.add('dragging');
+        document.body.style.cursor = 'col-resize';
+        dragState.current = {
+            sidebar,
+            startX: e.clientX,
+            startWidth: sidebar.offsetWidth,
+        };
+    }, [disabled]);
+    useEffect(() => {
+        const handleMouseMove = (ev) => {
+            const ds = dragState.current;
+            if (!ds?.sidebar)
+                return;
+            const delta = ds.startX - ev.clientX;
+            const newWidth = Math.max(minWidth, Math.min(maxWidth, ds.startWidth + delta));
+            ds.sidebar.style.width = `${newWidth}px`;
+        };
+        const handleMouseUp = () => {
+            const ds = dragState.current;
+            if (!ds?.sidebar)
+                return;
+            document.body.style.cursor = '';
+            ds.sidebar.classList.remove('dragging');
+            onResize(ds.sidebar.offsetWidth);
+            dragState.current = null;
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+            // Restore cursor if unmounting mid-drag
+            if (dragState.current) {
+                document.body.style.cursor = '';
+                dragState.current.sidebar?.classList.remove('dragging');
+                dragState.current = null;
+            }
+        };
+    }, [onResize, minWidth, maxWidth]);
+    return (_jsx("div", { onMouseDown: handleMouseDown, css: css `
+        width: 4px;
+        background: transparent;
+        cursor: ${disabled ? 'default' : 'col-resize'};
+        position: relative;
+        flex-shrink: 0;
+        transition: background ${theme.motion.duration.fast};
+        &:hover {
+          background: ${disabled ? 'transparent' : theme.color.borderHover};
+        }
+      ` }));
+}
+//# sourceMappingURL=SplitDivider.js.map

package/dist/components/SplitDivider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitDivider.js","sourceRoot":"","sources":["../../src/components/SplitDivider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAavD,gDAAgD;AAChD,MAAM,UAAU,YAAY,CAAC,EAC3B,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,GAAG,EACd,QAAQ,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,GACxD;IAClB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,0EAA0E;IAC1E,uEAAuE;IACvE,2EAA2E;IAC3E,MAAM,SAAS,GAAG,MAAM,CAId,IAAI,CAAC,CAAC;IAEhB,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,CAAmB,EAAE,EAAE;QACtB,IAAI,QAAQ;YAAE,OAAO;QAErB,MAAM,OAAO,GAAG,CAAC,CAAC,aAA+B,CAAC;QAClD,MAAM,OAAO,GAAG,OAAO,CAAC,kBAA2C,CAAC;QACpE,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QAClC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,YAAY,CAAC;QAE1C,SAAS,CAAC,OAAO,GAAG;YAClB,OAAO;YACP,MAAM,EAAE,CAAC,CAAC,OAAO;YACjB,UAAU,EAAE,OAAO,CAAC,WAAW;SAChC,CAAC;IACJ,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,eAAe,GAAG,CAAC,EAAc,EAAE,EAAE;YACzC,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,CAAC;YAC7B,IAAI,CAAC,EAAE,EAAE,OAAO;gBAAE,OAAO;YACzB,MAAM,KAAK,GAAG,EAAE,CAAC,MAAM,GAAG,EAAE,CAAC,OAAO,CAAC;YACrC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,EAAE,CAAC,UAAU,GAAG,KAAK,CAAC,CAAC,CAAC;YAC/E,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,QAAQ,IAAI,CAAC;QAC3C,CAAC,CAAC;QAEF,MAAM,aAAa,GAAG,GAAG,EAAE;YACzB,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,CAAC;YAC7B,IAAI,CAAC,EAAE,EAAE,OAAO;gBAAE,OAAO;YACzB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE,CAAC;YAChC,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;YACxC,QAAQ,CAAC,EAAE,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;YACjC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;QAC3B,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;QACxD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QAEpD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;YAC3D,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;YACvD,wCAAwC;YACxC,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;gBACtB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE,CAAC;gBAChC,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;gBACxD,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;YAC3B,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEnC,OAAO,CACL,cACE,WAAW,EAAE,eAAe,EAC5B,GAAG,EAAE,GAAG,CAAA;;;kBAGI,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY;;;iCAGpB,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI;;wBAEnC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW;;OAEnE,GACD,CACH,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,12 @@
+/** @jsxImportSource @emotion/react */
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { SplitDivider } from './SplitDivider.js';
+import type { SplitDividerProps } from './SplitDivider.js';
+declare const meta: Meta<typeof SplitDivider>;
+export default meta;
+type Story = StoryObj<SplitDividerProps>;
+/** Default split layout with a draggable divider between left and right panels. */
+export declare const Default: Story;
+/** Disabled divider — no drag interaction, appears as a static separator. */
+export declare const Disabled: Story;
+//# sourceMappingURL=SplitDivider.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SplitDivider.stories.d.ts","sourceRoot":"","sources":["../../src/components/SplitDivider.stories.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAE3D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAInC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;AAEzC,mFAAmF;AACnF,eAAO,MAAM,OAAO,EAAE,KAuDrB,CAAC;AAEF,6EAA6E;AAC7E,eAAO,MAAM,QAAQ,EAAE,KAoCtB,CAAC"}

package/dist/components/SplitDivider.stories.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { css, useTheme } from '@emotion/react';
+import { useState } from 'react';
+import { SplitDivider } from './SplitDivider.js';
+const meta = {
+    title: 'Shared/SplitDivider',
+    component: SplitDivider,
+    tags: ['autodocs'],
+};
+export default meta;
+/** Default split layout with a draggable divider between left and right panels. */
+export const Default = {
+    render: () => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const [rightWidth, setRightWidth] = useState(280);
+        const theme = useTheme();
+        return (_jsxs("div", { css: css `
+          height: 300px;
+          display: flex;
+          border: 1px solid ${theme.color.border};
+          border-radius: ${theme.radius.md};
+          overflow: hidden;
+        `, children: [_jsxs("div", { css: css `
+            flex: 1;
+            background: ${theme.color.fillSecondary};
+            padding: ${theme.spacing[4]};
+            display: flex;
+            flex-direction: column;
+            gap: ${theme.spacing[2]};
+          `, children: [_jsx("span", { css: css `font-size: ${theme.font.size.base}; font-weight: ${theme.font.weight.semibold};`, children: "Left Panel" }), _jsx("span", { css: css `font-size: ${theme.font.size.sm}; color: ${theme.color.textSecondary};`, children: "This panel takes remaining space. Drag the divider to resize." })] }), _jsx(SplitDivider, { onResize: setRightWidth }), _jsxs("div", { css: css `
+            width: ${rightWidth}px;
+            background: ${theme.color.bgBase};
+            padding: ${theme.spacing[4]};
+            display: flex;
+            flex-direction: column;
+            gap: ${theme.spacing[2]};
+            overflow: hidden;
+          `, children: [_jsx("span", { css: css `font-size: ${theme.font.size.base}; font-weight: ${theme.font.weight.semibold};`, children: "Right Panel" }), _jsxs("span", { css: css `font-size: ${theme.font.size.sm}; color: ${theme.color.textSecondary};`, children: ["Width: ", rightWidth, "px"] })] })] }));
+    },
+};
+/** Disabled divider — no drag interaction, appears as a static separator. */
+export const Disabled = {
+    render: () => {
+        const theme = useTheme();
+        return (_jsxs("div", { css: css `
+          height: 300px;
+          display: flex;
+          border: 1px solid ${theme.color.border};
+          border-radius: ${theme.radius.md};
+          overflow: hidden;
+        `, children: [_jsx("div", { css: css `
+            flex: 1;
+            background: ${theme.color.fillSecondary};
+            padding: ${theme.spacing[4]};
+          `, children: _jsx("span", { css: css `font-size: ${theme.font.size.base};`, children: "Left Panel" }) }), _jsx(SplitDivider, { onResize: () => { }, disabled: true }), _jsx("div", { css: css `
+            width: 200px;
+            background: ${theme.color.bgBase};
+            padding: ${theme.spacing[4]};
+          `, children: _jsx("span", { css: css `font-size: ${theme.font.size.base};`, children: "Right Panel" }) })] }));
+    },
+};
+//# sourceMappingURL=SplitDivider.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SplitDivider.stories.js","sourceRoot":"","sources":["../../src/components/SplitDivider.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGjD,MAAM,IAAI,GAA8B;IACtC,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,YAAY;IACvB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,mFAAmF;AACnF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,MAAM,EAAE,GAAG,EAAE;QACX,sDAAsD;QACtD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;QAClD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;QAEzB,OAAO,CACL,eACE,GAAG,EAAE,GAAG,CAAA;;;8BAGc,KAAK,CAAC,KAAK,CAAC,MAAM;2BACrB,KAAK,CAAC,MAAM,CAAC,EAAE;;SAEjC,aAED,eACE,GAAG,EAAE,GAAG,CAAA;;0BAEQ,KAAK,CAAC,KAAK,CAAC,aAAa;uBAC5B,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;;;mBAGpB,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;WACxB,aAED,eAAM,GAAG,EAAE,GAAG,CAAA,cAAc,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,kBAAkB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,GAAG,2BAExF,EACP,eAAM,GAAG,EAAE,GAAG,CAAA,cAAc,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,YAAY,KAAK,CAAC,KAAK,CAAC,aAAa,GAAG,8EAE/E,IACH,EACN,KAAC,YAAY,IAAC,QAAQ,EAAE,aAAa,GAAI,EACzC,eACE,GAAG,EAAE,GAAG,CAAA;qBACG,UAAU;0BACL,KAAK,CAAC,KAAK,CAAC,MAAM;uBACrB,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;;;mBAGpB,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;;WAExB,aAED,eAAM,GAAG,EAAE,GAAG,CAAA,cAAc,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,kBAAkB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,GAAG,4BAExF,EACP,gBAAM,GAAG,EAAE,GAAG,CAAA,cAAc,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,YAAY,KAAK,CAAC,KAAK,CAAC,aAAa,GAAG,wBAC5E,UAAU,UACb,IACH,IACF,CACP,CAAC;IACJ,CAAC;CACF,CAAC;AAEF,6EAA6E;AAC7E,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,GAAG,EAAE;QACX,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;QAEzB,OAAO,CACL,eACE,GAAG,EAAE,GAAG,CAAA;;;8BAGc,KAAK,CAAC,KAAK,CAAC,MAAM;2BACrB,KAAK,CAAC,MAAM,CAAC,EAAE;;SAEjC,aAED,cACE,GAAG,EAAE,GAAG,CAAA;;0BAEQ,KAAK,CAAC,KAAK,CAAC,aAAa;uBAC5B,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;WAC5B,YAED,eAAM,GAAG,EAAE,GAAG,CAAA,cAAc,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,2BAAmB,GAClE,EACN,KAAC,YAAY,IAAC,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,QAAQ,SAAG,EAC7C,cACE,GAAG,EAAE,GAAG,CAAA;;0BAEQ,KAAK,CAAC,KAAK,CAAC,MAAM;uBACrB,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;WAC5B,YAED,eAAM,GAAG,EAAE,GAAG,CAAA,cAAc,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,4BAAoB,GACnE,IACF,CACP,CAAC;IACJ,CAAC;CACF,CAAC"}

package/dist/components/StatusDot.d.ts

@@ -0,0 +1,11 @@
+/** Props for the StatusDot component. */
+export interface StatusDotProps {
+    /** Whether the status is active/enabled. Defaults to true. */
+    enabled?: boolean;
+}
+/**
+ * StatusDot — small colored circle indicating enabled/disabled state.
+ * Green for enabled, muted gray for disabled.
+ */
+export declare function StatusDot({ enabled }: StatusDotProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StatusDot.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatusDot.d.ts","sourceRoot":"","sources":["../../src/components/StatusDot.tsx"],"names":[],"mappings":"AAIA,yCAAyC;AACzC,MAAM,WAAW,cAAc;IAC7B,8DAA8D;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAWD;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EAAE,OAAc,EAAE,EAAE,cAAc,oDAG3D"}

package/dist/components/StatusDot.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { useTheme } from '@agentskillmania/skill-ui-theme';
+import { css } from '@emotion/react';
+/** Status dot style — 5px circle indicating enabled/disabled state. */
+const dotStyle = (theme, enabled) => css `
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: ${enabled ? theme.color.success : theme.color.textQuaternary};
+`;
+/**
+ * StatusDot — small colored circle indicating enabled/disabled state.
+ * Green for enabled, muted gray for disabled.
+ */
+export function StatusDot({ enabled = true }) {
+    const theme = useTheme();
+    return _jsx("div", { css: dotStyle(theme, enabled) });
+}
+//# sourceMappingURL=StatusDot.js.map

package/dist/components/StatusDot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusDot.js","sourceRoot":"","sources":["../../src/components/StatusDot.tsx"],"names":[],"mappings":";AAAA,sCAAsC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAQrC,uEAAuE;AACvE,MAAM,QAAQ,GAAG,CAAC,KAAkC,EAAE,OAAgB,EAAE,EAAE,CAAC,GAAG,CAAA;;;;;gBAK9D,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,cAAc;CACzE,CAAC;AAEF;;;GAGG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,OAAO,GAAG,IAAI,EAAkB;IAC1D,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,cAAK,GAAG,EAAE,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,GAAI,CAAC;AAChD,CAAC"}

package/dist/components/index.d.ts

@@ -0,0 +1,27 @@
+export { SectionHeader } from './SectionHeader.js';
+export type { SectionHeaderProps } from './SectionHeader.js';
+export { EmptyState } from './EmptyState.js';
+export type { EmptyStateProps } from './EmptyState.js';
+export { ExpandableItem } from './ExpandableItem.js';
+export type { ExpandableItemProps, ExpandableItemContext } from './ExpandableItem.js';
+export { CollapsibleCard } from './CollapsibleCard.js';
+export type { CollapsibleCardProps } from './CollapsibleCard.js';
+export { SplitDivider } from './SplitDivider.js';
+export type { SplitDividerProps } from './SplitDivider.js';
+export { Sidebar, SidebarPanel, SidebarIcons } from './sidebar/index.js';
+export type { SidebarProps, SidebarPanelProps, SidebarIconsProps, SidebarIconItem, } from './sidebar/index.js';
+export { MetricTile } from './MetricTile.js';
+export type { MetricTileProps } from './MetricTile.js';
+export { SectionLabel } from './SectionLabel.js';
+export type { SectionLabelProps } from './SectionLabel.js';
+export { StatusDot } from './StatusDot.js';
+export type { StatusDotProps } from './StatusDot.js';
+export { CopyValue } from './CopyValue.js';
+export type { CopyValueProps } from './CopyValue.js';
+export { InfoRow } from './InfoRow.js';
+export type { InfoRowProps } from './InfoRow.js';
+export { ExpandableRow } from './ExpandableRow.js';
+export type { ExpandableRowProps, DetailVariant } from './ExpandableRow.js';
+export { PaginationBar } from './PaginationBar.js';
+export type { PaginationBarProps } from './PaginationBar.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,YAAY,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,YAAY,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AACtF,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,YAAY,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,YAAY,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACzE,YAAY,EACV,YAAY,EACZ,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,GAChB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,YAAY,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,YAAY,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,YAAY,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,YAAY,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,YAAY,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/index.js

@@ -0,0 +1,14 @@
+export { SectionHeader } from './SectionHeader.js';
+export { EmptyState } from './EmptyState.js';
+export { ExpandableItem } from './ExpandableItem.js';
+export { CollapsibleCard } from './CollapsibleCard.js';
+export { SplitDivider } from './SplitDivider.js';
+export { Sidebar, SidebarPanel, SidebarIcons } from './sidebar/index.js';
+export { MetricTile } from './MetricTile.js';
+export { SectionLabel } from './SectionLabel.js';
+export { StatusDot } from './StatusDot.js';
+export { CopyValue } from './CopyValue.js';
+export { InfoRow } from './InfoRow.js';
+export { ExpandableRow } from './ExpandableRow.js';
+export { PaginationBar } from './PaginationBar.js';
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAOzE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/sidebar/Sidebar.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+import type { SidebarIconItem } from './SidebarIcons.js';
+export interface SidebarProps {
+    /** Sidebar width in pixels (ignored when collapsed). */
+    width: number;
+    /** Whether sidebar is collapsed to icon-only. */
+    isCollapsed: boolean;
+    /** Currently active panel key. */
+    activePanel: string;
+    /** Icon items for the icon bar. */
+    items?: SidebarIconItem[];
+    /** Toggle collapse/expand. */
+    onToggleCollapse: () => void;
+    /** Switch active panel. */
+    onSwitchPanel: (panel: string) => void;
+    /** Panel content (wrapped in SidebarPanel). */
+    children: ReactNode;
+}
+/** Renders a right-side collapsible sidebar with panel content and icon bar. */
+export declare const Sidebar: import("react").NamedExoticComponent<SidebarProps>;
+//# sourceMappingURL=Sidebar.d.ts.map

package/dist/components/sidebar/Sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/Sidebar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEzD,MAAM,WAAW,YAAY;IAC3B,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,WAAW,EAAE,OAAO,CAAC;IACrB,kCAAkC;IAClC,WAAW,EAAE,MAAM,CAAC;IACpB,mCAAmC;IACnC,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;IAC1B,8BAA8B;IAC9B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,2BAA2B;IAC3B,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,+CAA+C;IAC/C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,gFAAgF;AAChF,eAAO,MAAM,OAAO,oDA+DlB,CAAC"}

package/dist/components/sidebar/Sidebar.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { useTheme } from '@agentskillmania/skill-ui-theme';
+import { css } from '@emotion/react';
+import { memo } from 'react';
+import { SidebarIcons } from './SidebarIcons.js';
+/** Renders a right-side collapsible sidebar with panel content and icon bar. */
+export const Sidebar = memo(function Sidebar({ width, isCollapsed, activePanel, items = [], onToggleCollapse, onSwitchPanel, children, }) {
+    const theme = useTheme();
+    return (_jsxs("div", { className: isCollapsed ? 'collapsed' : '', css: css `
+        display: flex;
+        border-left: 1px solid ${theme.color.border};
+        background: ${theme.color.bgBase};
+        overflow: hidden;
+        width: ${isCollapsed ? '42px' : `${width}px`};
+        min-width: ${isCollapsed ? '42px' : '160px'};
+        transition: width ${theme.motion.duration.normal} ${theme.motion.easing.out};
+        &.dragging {
+          transition: none;
+        }
+      `, children: [_jsx("div", { css: css `
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+          transition:
+            opacity ${theme.motion.duration.fast} ${theme.motion.easing.out},
+            transform ${theme.motion.duration.fast} ${theme.motion.easing.out};
+          ${isCollapsed
+                    ? css `
+                opacity: 0;
+                transform: translateX(${theme.spacing[3]});
+                pointer-events: none;
+                width: 0;
+              `
+                    : css `
+                opacity: 1;
+                transform: translateX(0);
+              `}
+        `, children: children }), _jsx(SidebarIcons, { items: items, activeId: activePanel, isCollapsed: isCollapsed, onToggleCollapse: onToggleCollapse, onSwitchPanel: onSwitchPanel })] }));
+});
+//# sourceMappingURL=Sidebar.js.map

package/dist/components/sidebar/Sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.js","sourceRoot":"","sources":["../../../src/components/sidebar/Sidebar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAG7B,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAoBjD,gFAAgF;AAChF,MAAM,CAAC,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,OAAO,CAAC,EAC3C,KAAK,EACL,WAAW,EACX,WAAW,EACX,KAAK,GAAG,EAAE,EACV,gBAAgB,EAChB,aAAa,EACb,QAAQ,GACK;IACb,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,OAAO,CACL,eACE,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EACzC,GAAG,EAAE,GAAG,CAAA;;iCAEmB,KAAK,CAAC,KAAK,CAAC,MAAM;sBAC7B,KAAK,CAAC,KAAK,CAAC,MAAM;;iBAEvB,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI;qBAC/B,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;4BACvB,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG;;;;OAI5E,aAGD,cACE,GAAG,EAAE,GAAG,CAAA;;;;;;sBAMM,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG;wBACnD,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG;YACjE,WAAW;oBACX,CAAC,CAAC,GAAG,CAAA;;wCAEuB,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;;;eAGzC;oBACH,CAAC,CAAC,GAAG,CAAA;;;eAGF;SACN,YAEA,QAAQ,GACL,EAGN,KAAC,YAAY,IACX,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,WAAW,EACrB,WAAW,EAAE,WAAW,EACxB,gBAAgB,EAAE,gBAAgB,EAClC,aAAa,EAAE,aAAa,GAC5B,IACE,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/components/sidebar/Sidebar.stories.d.ts

@@ -0,0 +1,14 @@
+/** @jsxImportSource @emotion/react */
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Sidebar } from './Sidebar.js';
+import type { SidebarProps } from './Sidebar.js';
+declare const meta: Meta<typeof Sidebar>;
+export default meta;
+type Story = StoryObj<SidebarProps>;
+/** Fully expanded sidebar with panel content and icon bar. */
+export declare const Expanded: Story;
+/** Collapsed sidebar — only icon bar visible, panel content hidden. */
+export declare const Collapsed: Story;
+/** Fully interactive sidebar with collapse toggle, panel switching, and a split layout. */
+export declare const Interactive: Story;
+//# sourceMappingURL=Sidebar.stories.d.ts.map

package/dist/components/sidebar/Sidebar.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/Sidebar.stories.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAIjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAgB9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;AAuDpC,8DAA8D;AAC9D,eAAO,MAAM,QAAQ,EAAE,KAoBtB,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,SAAS,EAAE,KAevB,CAAC;AAEF,2FAA2F;AAC3F,eAAO,MAAM,WAAW,EAAE,KA4DzB,CAAC"}

package/dist/components/sidebar/Sidebar.stories.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { css, useTheme } from '@emotion/react';
+import { useState } from 'react';
+import { Activity, Terminal, Wrench, FileText } from 'lucide-react';
+import { Sidebar } from './Sidebar.js';
+import { SidebarPanel } from './SidebarPanel.js';
+import { SplitDivider } from '../SplitDivider.js';
+const meta = {
+    title: 'Shared/Sidebar',
+    component: Sidebar,
+    tags: ['autodocs'],
+    argTypes: {
+        items: { control: false },
+        onToggleCollapse: { control: false },
+        onSwitchPanel: { control: false },
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { height: '500px', display: 'flex', justifyContent: 'flex-end' }, children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+const sidebarItems = [
+    { id: 'event-log', icon: Activity, label: 'Event Log' },
+    { id: 'terminal', icon: Terminal, label: 'Terminal' },
+    { id: 'skills', icon: Wrench, label: 'Skills' },
+    { id: 'files', icon: FileText, label: 'Files' },
+];
+/** Mock event log rows for panel content. */
+function MockEventLogContent() {
+    const theme = useTheme();
+    const events = [
+        { id: '1', label: 'Agent started', time: '10:01:23', status: 'ok' },
+        { id: '2', label: 'Executed ReadFile', time: '10:01:25', status: 'ok' },
+        { id: '3', label: 'Retry attempt 2/3', time: '10:01:30', status: 'warn' },
+        { id: '4', label: 'Tool execution failed', time: '10:01:35', status: 'error' },
+        { id: '5', label: 'Session completed', time: '10:02:01', status: 'ok' },
+    ];
+    return (_jsx("div", { children: events.map((event) => (_jsxs("div", { css: css `
+            display: flex;
+            align-items: center;
+            gap: ${theme.spacing[2]};
+            padding: ${theme.spacing[1]} ${theme.spacing[3]};
+            font-size: ${theme.font.size.xs};
+          `, children: [_jsx("span", { css: css `
+              width: 6px;
+              height: 6px;
+              border-radius: 50%;
+              background: ${event.status === 'ok'
+                        ? theme.color.success
+                        : event.status === 'warn'
+                            ? theme.color.warning
+                            : theme.color.error};
+              flex-shrink: 0;
+            ` }), _jsx("span", { css: css `flex: 1; color: ${theme.color.text};`, children: event.label }), _jsx("span", { css: css `color: ${theme.color.textTertiary};`, children: event.time })] }, event.id))) }));
+}
+/** Fully expanded sidebar with panel content and icon bar. */
+export const Expanded = {
+    render: () => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const [activePanel, setActivePanel] = useState('event-log');
+        return (_jsx(Sidebar, { width: 320, isCollapsed: false, activePanel: activePanel, items: sidebarItems, onToggleCollapse: () => { }, onSwitchPanel: (id) => setActivePanel(id), children: _jsx(SidebarPanel, { title: "Event Log", icon: Activity, children: _jsx(MockEventLogContent, {}) }) }));
+    },
+};
+/** Collapsed sidebar — only icon bar visible, panel content hidden. */
+export const Collapsed = {
+    render: () => (_jsx(Sidebar, { width: 320, isCollapsed: true, activePanel: "event-log", items: sidebarItems, onToggleCollapse: () => { }, onSwitchPanel: () => { }, children: _jsx(SidebarPanel, { title: "Event Log", icon: Activity, children: _jsx(MockEventLogContent, {}) }) })),
+};
+/** Fully interactive sidebar with collapse toggle, panel switching, and a split layout. */
+export const Interactive = {
+    render: () => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const [isCollapsed, setIsCollapsed] = useState(false);
+        const [activePanel, setActivePanel] = useState('event-log');
+        const [sidebarWidth, setSidebarWidth] = useState(380);
+        const theme = useTheme();
+        return (_jsxs("div", { css: css `
+          height: 500px;
+          display: flex;
+          border: 1px solid ${theme.color.border};
+          border-radius: ${theme.radius.md};
+          overflow: hidden;
+        `, children: [_jsxs("div", { css: css `
+            flex: 1;
+            background: ${theme.color.fillSecondary};
+            padding: ${theme.spacing[4]};
+            display: flex;
+            flex-direction: column;
+            gap: ${theme.spacing[2]};
+          `, children: [_jsx("span", { css: css `font-size: ${theme.font.size.base}; font-weight: ${theme.font.weight.semibold};`, children: "Main Content" }), _jsx("span", { css: css `font-size: ${theme.font.size.sm}; color: ${theme.color.textSecondary};`, children: "Use the divider to resize. Click icons to switch panels." }), _jsxs("span", { css: css `font-size: ${theme.font.size.xs}; color: ${theme.color.textTertiary};`, children: ["Active panel: ", activePanel, " | Sidebar width: ", sidebarWidth, "px | Collapsed: ", isCollapsed ? 'yes' : 'no'] })] }), _jsx(SplitDivider, { onResize: setSidebarWidth, disabled: isCollapsed }), _jsx(Sidebar, { width: sidebarWidth, isCollapsed: isCollapsed, activePanel: activePanel, items: sidebarItems, onToggleCollapse: () => setIsCollapsed((prev) => !prev), onSwitchPanel: (id) => setActivePanel(id), children: _jsx(SidebarPanel, { title: "Event Log", icon: Activity, children: _jsx(MockEventLogContent, {}) }) })] }));
+    },
+};
+//# sourceMappingURL=Sidebar.stories.js.map

package/dist/components/sidebar/Sidebar.stories.js.map

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

package/dist/components/sidebar/SidebarIcons.d.ts

@@ -0,0 +1,25 @@
+import type { LucideIcon } from 'lucide-react';
+/** Configuration for a single icon button in the bar. */
+export interface SidebarIconItem {
+    /** Unique panel identifier. */
+    id: string;
+    /** Icon component to render. */
+    icon: LucideIcon;
+    /** Accessible label / tooltip text. */
+    label: string;
+}
+export interface SidebarIconsProps {
+    /** Icon items to display (excluding collapse button). */
+    items: SidebarIconItem[];
+    /** Currently active panel key. */
+    activeId: string;
+    /** Whether sidebar is collapsed. */
+    isCollapsed: boolean;
+    /** Toggle collapse/expand. */
+    onToggleCollapse: () => void;
+    /** Switch active panel. */
+    onSwitchPanel: (id: string) => void;
+}
+/** Renders a vertical icon bar with collapse toggle and panel switch buttons. */
+export declare const SidebarIcons: import("react").NamedExoticComponent<SidebarIconsProps>;
+//# sourceMappingURL=SidebarIcons.d.ts.map

package/dist/components/sidebar/SidebarIcons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarIcons.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/SidebarIcons.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM/C,yDAAyD;AACzD,MAAM,WAAW,eAAe;IAC9B,+BAA+B;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,gCAAgC;IAChC,IAAI,EAAE,UAAU,CAAC;IACjB,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC,yDAAyD;IACzD,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,kCAAkC;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,oCAAoC;IACpC,WAAW,EAAE,OAAO,CAAC;IACrB,8BAA8B;IAC9B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,2BAA2B;IAC3B,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAED,iFAAiF;AACjF,eAAO,MAAM,YAAY,yDAqFvB,CAAC"}

package/dist/components/sidebar/SidebarIcons.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { useTheme } from '@agentskillmania/skill-ui-theme';
+import { css } from '@emotion/react';
+import { Tooltip } from 'antd';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { NAMESPACE } from '../../locales/index.js';
+/** Renders a vertical icon bar with collapse toggle and panel switch buttons. */
+export const SidebarIcons = memo(function SidebarIcons({ items, activeId, isCollapsed, onToggleCollapse, onSwitchPanel, }) {
+    const theme = useTheme();
+    const { t } = useTranslation(NAMESPACE);
+    const CollapseIcon = isCollapsed ? ChevronRight : ChevronLeft;
+    return (_jsxs("div", { css: css `
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: ${theme.spacing[2]} ${theme.spacing[1]};
+        gap: ${theme.spacing[1]};
+        border-left: 1px solid ${theme.color.border};
+        background: ${theme.color.fillSecondary};
+        flex-shrink: 0;
+      `, children: [_jsx(Tooltip, { title: isCollapsed ? t('sidebar.expand') : t('sidebar.collapse'), placement: "left", children: _jsx("button", { onClick: onToggleCollapse, css: css `
+            width: 32px;
+            height: 32px;
+            border-radius: ${theme.radius.md};
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            background: transparent;
+            color: ${theme.color.textSecondary};
+            border: none;
+            transition:
+              background ${theme.motion.duration.fast},
+              color ${theme.motion.duration.fast};
+            &:hover {
+              background: ${theme.color.fillTertiary};
+              color: ${theme.color.text};
+            }
+          `, children: _jsx(CollapseIcon, { size: 18 }) }) }), items.map((item) => {
+                const isActive = item.id === activeId && !isCollapsed;
+                const Icon = item.icon;
+                return (_jsx(Tooltip, { title: item.label, placement: "left", children: _jsx("button", { onClick: () => onSwitchPanel(item.id), css: css `
+                width: 32px;
+                height: 32px;
+                border-radius: ${theme.radius.md};
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                cursor: pointer;
+                background: ${isActive ? theme.color.primaryBg : 'transparent'};
+                color: ${isActive ? theme.color.primary : theme.color.textSecondary};
+                border: none;
+                transition:
+                  background ${theme.motion.duration.fast},
+                  color ${theme.motion.duration.fast};
+                &:hover {
+                  background: ${theme.color.fillTertiary};
+                  color: ${theme.color.text};
+                }
+              `, children: _jsx(Icon, { size: 18 }) }) }, item.id));
+            })] }));
+});
+//# sourceMappingURL=SidebarIcons.js.map

package/dist/components/sidebar/SidebarIcons.js.map

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

package/dist/components/sidebar/SidebarPanel.d.ts

@@ -0,0 +1,13 @@
+import type { LucideIcon } from 'lucide-react';
+import type { ReactNode } from 'react';
+export interface SidebarPanelProps {
+    /** Panel title (rendered uppercase via CSS). */
+    title: string;
+    /** Panel icon. */
+    icon: LucideIcon;
+    /** Scrollable panel content. */
+    children: ReactNode;
+}
+/** Renders a panel with icon + uppercase title header and scrollable body. */
+export declare const SidebarPanel: import("react").NamedExoticComponent<SidebarPanelProps>;
+//# sourceMappingURL=SidebarPanel.d.ts.map

package/dist/components/sidebar/SidebarPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarPanel.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/SidebarPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,iBAAiB;IAChC,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB;IAClB,IAAI,EAAE,UAAU,CAAC;IACjB,gCAAgC;IAChC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,8EAA8E;AAC9E,eAAO,MAAM,YAAY,yDAiDvB,CAAC"}