@shepai/cli 1.116.3 → 1.117.0-pr377.9e8e17c

package/dist/src/presentation/web/components/ui/code-block.js

@@ -0,0 +1,103 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { Check, Copy } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+export function CodeBlock({ language, filename, code, highlightLines = [], tabs = [], }) {
+    const [copied, setCopied] = React.useState(false);
+    const [activeTab, setActiveTab] = React.useState(0);
+    const tabsExist = tabs.length > 0;
+    const copyToClipboard = async () => {
+        const textToCopy = tabsExist ? tabs[activeTab].code : code;
+        if (textToCopy) {
+            await navigator.clipboard.writeText(textToCopy);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+    };
+    const activeCode = tabsExist ? tabs[activeTab].code : code;
+    const activeLanguage = tabsExist ? (tabs[activeTab].language ?? language) : language;
+    const activeHighlightLines = tabsExist ? (tabs[activeTab].highlightLines ?? []) : highlightLines;
+    return (_jsxs("div", { className: cn('relative w-full rounded-lg bg-slate-950 p-4 font-mono text-sm'), children: [_jsxs("div", { className: "flex flex-col gap-2", children: [tabsExist ? (_jsx("div", { className: "flex overflow-x-auto", children: tabs.map((tab, index) => (_jsx("button", { type: "button", onClick: () => setActiveTab(index), className: cn('px-3 py-2 font-sans text-xs transition-colors', activeTab === index ? 'text-white' : 'text-zinc-400 hover:text-zinc-200'), children: tab.name }, tab.name))) })) : null, !tabsExist && filename ? (_jsxs("div", { className: "flex items-center justify-between py-2", children: [_jsx("div", { className: "text-xs text-zinc-400", children: filename }), _jsx("button", { type: "button", onClick: copyToClipboard, className: "flex items-center gap-1 font-sans text-xs text-zinc-400 transition-colors hover:text-zinc-200", children: copied ? _jsx(Check, { className: "h-3.5 w-3.5" }) : _jsx(Copy, { className: "h-3.5 w-3.5" }) })] })) : null] }), _jsx(SyntaxHighlighter, { language: activeLanguage, style: oneDark, customStyle: {
+                    margin: 0,
+                    padding: 0,
+                    background: 'transparent',
+                    fontSize: '0.8125rem',
+                }, wrapLines: true, showLineNumbers: true, lineProps: (lineNumber) => ({
+                    style: {
+                        backgroundColor: activeHighlightLines.includes(lineNumber)
+                            ? 'rgba(255,255,255,0.1)'
+                            : 'transparent',
+                        display: 'block',
+                        width: '100%',
+                    },
+                }), PreTag: "div", children: String(activeCode) })] }));
+}
+const DIFF_LINE_BG = {
+    added: 'rgba(34, 197, 94, 0.12)',
+    removed: 'rgba(239, 68, 68, 0.12)',
+    context: 'transparent',
+};
+export function DiffCodeBlock({ language, filename, hunks }) {
+    const [copied, setCopied] = React.useState(false);
+    const allLines = React.useMemo(() => {
+        const result = [];
+        for (const hunk of hunks) {
+            result.push({ line: { type: 'context', content: '' }, hunkHeader: hunk.header });
+            for (const line of hunk.lines) {
+                result.push({ line });
+            }
+        }
+        return result;
+    }, [hunks]);
+    const codeString = React.useMemo(() => allLines
+        .map((entry) => {
+        if (entry.hunkHeader != null)
+            return entry.hunkHeader;
+        return entry.line.content || ' ';
+    })
+        .join('\n'), [allLines]);
+    const copyToClipboard = async () => {
+        const text = hunks.flatMap((h) => h.lines.map((l) => l.content)).join('\n');
+        await navigator.clipboard.writeText(text);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    };
+    if (hunks.length === 0) {
+        return (_jsx("div", { className: "rounded-lg bg-slate-950 px-4 py-6 text-center font-mono text-xs text-zinc-500", children: "No diff content available" }));
+    }
+    return (_jsxs("div", { className: "relative w-full overflow-hidden rounded-lg bg-slate-950 font-mono text-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-800 px-4 py-2", children: [_jsx("div", { className: "text-xs text-zinc-400", children: filename }), _jsx("button", { type: "button", onClick: copyToClipboard, className: "flex items-center gap-1 font-sans text-xs text-zinc-400 transition-colors hover:text-zinc-200", children: copied ? _jsx(Check, { className: "h-3.5 w-3.5" }) : _jsx(Copy, { className: "h-3.5 w-3.5" }) })] }), _jsx("div", { className: "overflow-x-auto", children: _jsx(SyntaxHighlighter, { language: language, style: oneDark, customStyle: {
+                        margin: 0,
+                        padding: '0.5rem 0',
+                        background: 'transparent',
+                        fontSize: '0.75rem',
+                        lineHeight: '1.25rem',
+                    }, wrapLines: true, showLineNumbers: false, lineProps: (lineNumber) => {
+                        const idx = lineNumber - 1;
+                        const entry = allLines[idx];
+                        if (!entry)
+                            return { style: { display: 'block', width: '100%' } };
+                        if (entry.hunkHeader != null) {
+                            return {
+                                style: {
+                                    display: 'block',
+                                    width: '100%',
+                                    backgroundColor: 'rgba(100, 100, 200, 0.08)',
+                                    color: 'rgb(148, 163, 184)',
+                                    fontStyle: 'italic',
+                                    padding: '0 1rem',
+                                },
+                            };
+                        }
+                        return {
+                            style: {
+                                display: 'block',
+                                width: '100%',
+                                backgroundColor: DIFF_LINE_BG[entry.line.type],
+                                padding: '0 1rem',
+                            },
+                        };
+                    }, PreTag: "div", CodeTag: "div", children: codeString }) })] }));
+}

package/dist/src/presentation/web/components/ui/code-block.stories.d.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CodeBlock, DiffCodeBlock } from './code-block.js';
+declare const codeBlockMeta: Meta<typeof CodeBlock>;
+export default codeBlockMeta;
+type Story = StoryObj<typeof CodeBlock>;
+/** Default code block with syntax highlighting */
+export declare const Default: Story;
+/** With highlighted lines */
+export declare const HighlightedLines: Story;
+/** With multiple tabs */
+export declare const WithTabs: Story;
+export declare const DiffDefault: StoryObj<typeof DiffCodeBlock>;
+export declare const DiffAdditionsOnly: StoryObj<typeof DiffCodeBlock>;
+export declare const DiffDeletionsOnly: StoryObj<typeof DiffCodeBlock>;
+export declare const DiffEmpty: StoryObj<typeof DiffCodeBlock>;
+//# sourceMappingURL=code-block.stories.d.ts.map

package/dist/src/presentation/web/components/ui/code-block.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/ui/code-block.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAoBxD,QAAA,MAAM,aAAa,EAAE,IAAI,CAAC,OAAO,SAAS,CAczC,CAAC;AAEF,eAAe,aAAa,CAAC;AAC7B,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAExC,kDAAkD;AAClD,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,6BAA6B;AAC7B,eAAO,MAAM,gBAAgB,EAAE,KAO9B,CAAC;AAEF,yBAAyB;AACzB,eAAO,MAAM,QAAQ,EAAE,KAiBtB,CAAC;AA0EF,eAAO,MAAM,WAAW,EAAE,QAAQ,CAAC,OAAO,aAAa,CAUtD,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,QAAQ,CAAC,OAAO,aAAa,CAM5D,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,QAAQ,CAAC,OAAO,aAAa,CAU5D,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,QAAQ,CAAC,OAAO,aAAa,CAMpD,CAAC"}

package/dist/src/presentation/web/components/ui/code-block.stories.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CodeBlock, DiffCodeBlock } from './code-block.js';
+/* ─── CodeBlock stories ─── */
+const sampleCode = `import { useState } from 'react';
+import { Button } from '../ui/button.js';
+
+export function Counter() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="flex items-center gap-2">
+      <Button onClick={() => setCount(count - 1)}>-</Button>
+      <span>{count}</span>
+      <Button onClick={() => setCount(count + 1)}>+</Button>
+    </div>
+  );
+}`;
+const codeBlockMeta = {
+    title: 'Primitives/CodeBlock',
+    component: CodeBlock,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: '600px' }, children: _jsx(Story, {}) })),
+    ],
+};
+export default codeBlockMeta;
+/** Default code block with syntax highlighting */
+export const Default = {
+    args: {
+        language: 'tsx',
+        filename: 'Counter.tsx',
+        code: sampleCode,
+    },
+};
+/** With highlighted lines */
+export const HighlightedLines = {
+    args: {
+        language: 'tsx',
+        filename: 'Counter.tsx',
+        code: sampleCode,
+        highlightLines: [4, 5, 6],
+    },
+};
+/** With multiple tabs */
+export const WithTabs = {
+    args: {
+        language: 'tsx',
+        filename: 'example',
+        tabs: [
+            {
+                name: 'Component.tsx',
+                code: sampleCode,
+                language: 'tsx',
+            },
+            {
+                name: 'styles.css',
+                code: `.counter {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}`,
+                language: 'css',
+            },
+        ],
+    },
+};
+/* ─── DiffCodeBlock stories ─── */
+const sampleHunks = [
+    {
+        header: '@@ -1,8 +1,12 @@',
+        lines: [
+            { type: 'context', content: "import { useState } from 'react';", oldNumber: 1, newNumber: 1 },
+            {
+                type: 'context',
+                content: "import { Button } from '../ui/button.js';",
+                oldNumber: 2,
+                newNumber: 2,
+            },
+            { type: 'added', content: "import { Input } from '../ui/input.js';", newNumber: 3 },
+            { type: 'added', content: "import { Label } from '../ui/label.js';", newNumber: 4 },
+            { type: 'context', content: '', oldNumber: 3, newNumber: 5 },
+            { type: 'removed', content: 'export function LoginForm() {', oldNumber: 4 },
+            {
+                type: 'added',
+                content: 'export function LoginForm({ onSubmit }: LoginFormProps) {',
+                newNumber: 6,
+            },
+            {
+                type: 'context',
+                content: "  const [email, setEmail] = useState('');",
+                oldNumber: 5,
+                newNumber: 7,
+            },
+            {
+                type: 'context',
+                content: "  const [password, setPassword] = useState('');",
+                oldNumber: 6,
+                newNumber: 8,
+            },
+            {
+                type: 'added',
+                content: '  const [isLoading, setIsLoading] = useState(false);',
+                newNumber: 9,
+            },
+        ],
+    },
+];
+const additionsOnlyHunks = [
+    {
+        header: '@@ -0,0 +1,5 @@',
+        lines: [
+            { type: 'added', content: "import { hash } from 'bcrypt';", newNumber: 1 },
+            { type: 'added', content: '', newNumber: 2 },
+            {
+                type: 'added',
+                content: 'export async function hashPassword(password: string) {',
+                newNumber: 3,
+            },
+            { type: 'added', content: '  return hash(password, 10);', newNumber: 4 },
+            { type: 'added', content: '}', newNumber: 5 },
+        ],
+    },
+];
+const deletionsOnlyHunks = [
+    {
+        header: '@@ -1,5 +0,0 @@',
+        lines: [
+            { type: 'removed', content: '// Legacy auth utilities', oldNumber: 1 },
+            { type: 'removed', content: 'export function oldLogin() {', oldNumber: 2 },
+            { type: 'removed', content: "  return fetch('/api/login');", oldNumber: 3 },
+            { type: 'removed', content: '}', oldNumber: 4 },
+        ],
+    },
+];
+export const DiffDefault = {
+    render: () => (_jsx("div", { style: { width: '600px' }, children: _jsx(DiffCodeBlock, { language: "tsx", filename: "src/components/auth/login-form.tsx", hunks: sampleHunks }) })),
+};
+export const DiffAdditionsOnly = {
+    render: () => (_jsx("div", { style: { width: '600px' }, children: _jsx(DiffCodeBlock, { language: "typescript", filename: "src/lib/auth.ts", hunks: additionsOnlyHunks }) })),
+};
+export const DiffDeletionsOnly = {
+    render: () => (_jsx("div", { style: { width: '600px' }, children: _jsx(DiffCodeBlock, { language: "typescript", filename: "src/utils/legacy-auth.ts", hunks: deletionsOnlyHunks }) })),
+};
+export const DiffEmpty = {
+    render: () => (_jsx("div", { style: { width: '600px' }, children: _jsx(DiffCodeBlock, { language: "typescript", filename: "empty-file.ts", hunks: [] }) })),
+};

package/dist/src/presentation/web/components/ui/file-tree.d.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+export interface TreeViewElement {
+    id: string;
+    name: string;
+    type?: 'file' | 'folder';
+    isSelectable?: boolean;
+    children?: TreeViewElement[];
+}
+export type TreeSortMode = 'default' | 'none' | ((a: TreeViewElement, b: TreeViewElement) => number);
+interface TreeContextProps {
+    selectedId: string | undefined;
+    expandedItems: string[] | undefined;
+    indicator: boolean;
+    handleExpand: (id: string) => void;
+    selectItem: (id: string) => void;
+    setExpandedItems?: React.Dispatch<React.SetStateAction<string[] | undefined>>;
+    openIcon?: React.ReactNode;
+    closeIcon?: React.ReactNode;
+    direction: 'rtl' | 'ltr';
+}
+declare const useTree: () => TreeContextProps;
+interface TreeViewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'defaultValue'> {
+    initialSelectedId?: string;
+    indicator?: boolean;
+    elements?: TreeViewElement[];
+    initialExpandedItems?: string[];
+    openIcon?: React.ReactNode;
+    closeIcon?: React.ReactNode;
+    dir?: 'rtl' | 'ltr';
+    onSelect?: (id: string) => void;
+    sort?: TreeSortMode;
+}
+declare const Tree: React.ForwardRefExoticComponent<TreeViewProps & React.RefAttributes<HTMLDivElement>>;
+interface FolderComponentProps {
+    element: string;
+    value: string;
+    isSelectable?: boolean;
+    isSelect?: boolean;
+}
+declare const Folder: React.ForwardRefExoticComponent<FolderComponentProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const File: React.ForwardRefExoticComponent<{
+    value: string;
+    handleSelect?: (id: string) => void;
+    isSelectable?: boolean;
+    isSelect?: boolean;
+    fileIcon?: React.ReactNode;
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+declare const CollapseButton: React.ForwardRefExoticComponent<{
+    elements: TreeViewElement[];
+    expandAll?: boolean;
+} & React.HTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+export { CollapseButton, File, Folder, Tree, useTree };
+//# sourceMappingURL=file-tree.d.ts.map

package/dist/src/presentation/web/components/ui/file-tree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-tree.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/ui/file-tree.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAC;CAC9B;AAED,MAAM,MAAM,YAAY,GACpB,SAAS,GACT,MAAM,GACN,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,CAAC,EAAE,eAAe,KAAK,MAAM,CAAC,CAAC;AAEzD,UAAU,gBAAgB;IACxB,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,aAAa,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IACpC,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,gBAAgB,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,CAAC,CAAC;IAC9E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,SAAS,EAAE,KAAK,GAAG,KAAK,CAAC;CAC1B;AAID,QAAA,MAAM,OAAO,wBAMZ,CAAC;AAqEF,UAAU,aACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC;IAC/E,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAC;IAC7B,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED,QAAA,MAAM,IAAI,sFA8GT,CAAC;AAwBF,UAAU,oBAAoB;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,MAAM,oIAqDV,CAAC;AAIH,QAAA,MAAM,IAAI;WAGC,MAAM;mBACE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI;mBACpB,OAAO;eACX,OAAO;eACP,KAAK,CAAC,SAAS;2FA6C7B,CAAC;AAIF,QAAA,MAAM,cAAc;cAGN,eAAe,EAAE;gBACf,OAAO;qFAiDrB,CAAC;AAIH,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC"}

package/dist/src/presentation/web/components/ui/file-tree.js

@@ -0,0 +1,185 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Accordion as AccordionPrimitive } from 'radix-ui';
+import { FileIcon, FolderIcon, FolderOpenIcon, ChevronsDownUp, ChevronsUpDown } from 'lucide-react';
+import { ScrollArea } from '../ui/scroll-area.js';
+import { cn } from '../../lib/utils.js';
+const TreeContext = React.createContext(null);
+const useTree = () => {
+    const context = React.useContext(TreeContext);
+    if (!context) {
+        throw new Error('useTree must be used within a TreeProvider');
+    }
+    return context;
+};
+const isFolderElement = (element) => {
+    if (element.type) {
+        return element.type === 'folder';
+    }
+    return Array.isArray(element.children);
+};
+const mergeExpandedItems = (currentItems, nextItems) => [
+    ...new Set([...(currentItems ?? []), ...nextItems]),
+];
+const treeCollator = new Intl.Collator('en', {
+    numeric: true,
+    sensitivity: 'base',
+});
+const defaultTreeComparator = (a, b) => {
+    const aIsFolder = isFolderElement(a);
+    const bIsFolder = isFolderElement(b);
+    if (aIsFolder !== bIsFolder) {
+        return aIsFolder ? -1 : 1;
+    }
+    return treeCollator.compare(a.name, b.name);
+};
+const getTreeComparator = (sort) => {
+    if (sort === 'none')
+        return undefined;
+    if (sort === 'default')
+        return defaultTreeComparator;
+    return sort;
+};
+const sortTreeElements = (elements, sort) => {
+    const comparator = getTreeComparator(sort);
+    const nextElements = elements.map((element) => {
+        if (!Array.isArray(element.children))
+            return element;
+        return { ...element, children: sortTreeElements(element.children, sort) };
+    });
+    if (!comparator)
+        return nextElements;
+    return [...nextElements].sort(comparator);
+};
+const renderTreeElements = (elements, sort) => sortTreeElements(elements, sort).map((element) => {
+    if (isFolderElement(element)) {
+        return (_jsx(Folder, { value: element.id, element: element.name, isSelectable: element.isSelectable, children: Array.isArray(element.children) ? renderTreeElements(element.children, sort) : null }, element.id));
+    }
+    return (_jsx(File, { value: element.id, isSelectable: element.isSelectable, children: _jsx("span", { children: element.name }) }, element.id));
+});
+const Tree = React.forwardRef(({ className, elements, initialSelectedId, initialExpandedItems, children, indicator = true, openIcon, closeIcon, dir, onSelect, sort = 'default', ...props }, ref) => {
+    const [selectedId, setSelectedId] = React.useState(initialSelectedId);
+    const [expandedItems, setExpandedItems] = React.useState(initialExpandedItems);
+    const selectItem = React.useCallback((id) => {
+        setSelectedId(id);
+        onSelect?.(id);
+    }, [onSelect]);
+    const handleExpand = React.useCallback((id) => {
+        setExpandedItems((prev) => {
+            if (prev?.includes(id)) {
+                return prev.filter((item) => item !== id);
+            }
+            return [...(prev ?? []), id];
+        });
+    }, []);
+    const expandSpecificTargetedElements = React.useCallback((elems, selectId) => {
+        if (!elems || !selectId)
+            return;
+        const findParent = (currentElement, currentPath = []) => {
+            const isSelectable = currentElement.isSelectable ?? true;
+            const newPath = [...currentPath, currentElement.id];
+            if (currentElement.id === selectId) {
+                if (isSelectable) {
+                    setExpandedItems((prev) => mergeExpandedItems(prev, newPath));
+                }
+                else {
+                    if (newPath.includes(currentElement.id)) {
+                        newPath.pop();
+                        setExpandedItems((prev) => mergeExpandedItems(prev, newPath));
+                    }
+                }
+                return;
+            }
+            if (Array.isArray(currentElement.children) && currentElement.children.length > 0) {
+                currentElement.children.forEach((child) => {
+                    findParent(child, newPath);
+                });
+            }
+        };
+        elems.forEach((element) => {
+            findParent(element);
+        });
+    }, []);
+    React.useEffect(() => {
+        if (initialSelectedId) {
+            expandSpecificTargetedElements(elements, initialSelectedId);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [initialSelectedId, elements]);
+    const direction = dir === 'rtl' ? 'rtl' : 'ltr';
+    const treeChildren = children ?? (elements ? renderTreeElements(elements, sort) : null);
+    return (_jsx(TreeContext.Provider, { value: {
+            selectedId,
+            expandedItems,
+            handleExpand,
+            selectItem,
+            setExpandedItems,
+            indicator,
+            openIcon,
+            closeIcon,
+            direction,
+        }, children: _jsx("div", { className: cn('size-full', className), children: _jsx(ScrollArea, { ref: ref, className: "relative h-full px-2", dir: dir, children: _jsx(AccordionPrimitive.Root, { ...props, type: "multiple", value: expandedItems, className: "flex flex-col gap-1", dir: dir, children: treeChildren }) }) }) }));
+});
+Tree.displayName = 'Tree';
+const TreeIndicator = React.forwardRef(({ className, ...props }, ref) => {
+    const { direction } = useTree();
+    return (_jsx("div", { dir: direction, ref: ref, className: cn('bg-muted absolute left-1.5 h-full w-px rounded-md py-3 duration-300 ease-in-out hover:bg-slate-300 rtl:right-1.5', className), ...props }));
+});
+TreeIndicator.displayName = 'TreeIndicator';
+const Folder = React.forwardRef(({ className, element, value, isSelectable = true, isSelect, children, ...props }, ref) => {
+    const { direction, handleExpand, expandedItems, indicator, selectedId, selectItem, openIcon, closeIcon, } = useTree();
+    const isSelected = isSelect ?? selectedId === value;
+    return (_jsxs(AccordionPrimitive.Item, { ...props, ref: ref, value: value, className: "relative h-full overflow-hidden", children: [_jsxs(AccordionPrimitive.Trigger, { className: cn('flex items-center gap-1 rounded-md text-sm', className, {
+                    'bg-muted rounded-md': isSelected && isSelectable,
+                    'cursor-pointer': isSelectable,
+                    'cursor-not-allowed opacity-50': !isSelectable,
+                }), disabled: !isSelectable, onClick: () => {
+                    selectItem(value);
+                    handleExpand(value);
+                }, children: [expandedItems?.includes(value)
+                        ? (openIcon ?? _jsx(FolderOpenIcon, { className: "size-4" }))
+                        : (closeIcon ?? _jsx(FolderIcon, { className: "size-4" })), _jsx("span", { children: element })] }), _jsxs(AccordionPrimitive.Content, { className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down relative h-full overflow-hidden text-sm", children: [element && indicator ? _jsx(TreeIndicator, { "aria-hidden": "true" }) : null, _jsx(AccordionPrimitive.Root, { dir: direction, type: "multiple", className: "ml-5 flex flex-col gap-1 py-1 rtl:mr-5", value: expandedItems, children: children })] })] }));
+});
+Folder.displayName = 'Folder';
+const File = React.forwardRef(({ value, className, handleSelect, onClick, isSelectable = true, isSelect, fileIcon, children, ...props }, ref) => {
+    const { direction, selectedId, selectItem } = useTree();
+    const isSelected = isSelect ?? selectedId === value;
+    return (_jsxs("button", { ref: ref, type: "button", disabled: !isSelectable, className: cn('flex w-fit items-center gap-1 rounded-md pr-1 text-sm duration-200 ease-in-out rtl:pr-0 rtl:pl-1', {
+            'bg-muted': isSelected && isSelectable,
+        }, isSelectable ? 'cursor-pointer' : 'cursor-not-allowed opacity-50', direction === 'rtl' ? 'rtl' : 'ltr', className), onClick: (event) => {
+            selectItem(value);
+            handleSelect?.(value);
+            onClick?.(event);
+        }, ...props, children: [fileIcon ?? _jsx(FileIcon, { className: "size-4" }), children] }));
+});
+File.displayName = 'File';
+const CollapseButton = React.forwardRef(({ className, elements, expandAll = false, children, ...props }, ref) => {
+    const { expandedItems, setExpandedItems } = useTree();
+    const expandAllTree = React.useCallback((elems) => {
+        const ids = [];
+        const walk = (el) => {
+            if ((el.isSelectable ?? true) && el.children && el.children.length > 0) {
+                ids.push(el.id);
+                for (const child of el.children)
+                    walk(child);
+            }
+        };
+        for (const el of elems)
+            walk(el);
+        return [...new Set(ids)];
+    }, []);
+    const closeAll = React.useCallback(() => {
+        setExpandedItems?.([]);
+    }, [setExpandedItems]);
+    React.useEffect(() => {
+        if (expandAll) {
+            setExpandedItems?.(expandAllTree(elements));
+        }
+    }, [expandAll, elements, expandAllTree, setExpandedItems]);
+    const isExpanded = expandedItems && expandedItems.length > 0;
+    return (_jsxs("button", { type: "button", className: cn('text-muted-foreground hover:text-foreground flex items-center gap-1 rounded-md p-1 text-xs transition-colors', className), onClick: isExpanded ? closeAll : () => setExpandedItems?.(expandAllTree(elements)), ref: ref, ...props, children: [children ??
+                (isExpanded ? (_jsx(ChevronsDownUp, { className: "h-3.5 w-3.5" })) : (_jsx(ChevronsUpDown, { className: "h-3.5 w-3.5" }))), _jsx("span", { className: "sr-only", children: "Toggle" })] }));
+});
+CollapseButton.displayName = 'CollapseButton';
+export { CollapseButton, File, Folder, Tree, useTree };

package/dist/src/presentation/web/components/ui/file-tree.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Tree } from './file-tree.js';
+declare const meta: Meta<typeof Tree>;
+export default meta;
+type Story = StoryObj<typeof Tree>;
+/** Default file tree with auto-rendered elements */
+export declare const Default: Story;
+/** Custom-rendered tree nodes with status icons */
+export declare const WithStatusIcons: Story;
+/** Collapsed by default */
+export declare const Collapsed: Story;
+/** With a collapse/expand all button */
+export declare const WithCollapseButton: Story;
+//# sourceMappingURL=file-tree.stories.d.ts.map

package/dist/src/presentation/web/components/ui/file-tree.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-tree.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/ui/file-tree.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAgB,IAAI,EAAwC,MAAM,aAAa,CAAC;AA8CvF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAsB3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,oDAAoD;AACpD,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,mDAAmD;AACnD,eAAO,MAAM,eAAe,EAAE,KA8B7B,CAAC;AAEF,2BAA2B;AAC3B,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,wCAAwC;AACxC,eAAO,MAAM,kBAAkB,EAAE,KAoChC,CAAC"}

package/dist/src/presentation/web/components/ui/file-tree.stories.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { File, Folder, Tree, CollapseButton } from './file-tree.js';
+import { FilePlus, FileEdit, FileMinus } from 'lucide-react';
+const sampleElements = [
+    {
+        id: 'src',
+        name: 'src',
+        children: [
+            {
+                id: 'src/components',
+                name: 'components',
+                children: [
+                    { id: 'src/components/button.tsx', name: 'button.tsx' },
+                    { id: 'src/components/input.tsx', name: 'input.tsx' },
+                    { id: 'src/components/dialog.tsx', name: 'dialog.tsx' },
+                ],
+            },
+            {
+                id: 'src/lib',
+                name: 'lib',
+                children: [
+                    { id: 'src/lib/utils.ts', name: 'utils.ts' },
+                    { id: 'src/lib/auth.ts', name: 'auth.ts' },
+                ],
+            },
+            { id: 'src/index.ts', name: 'index.ts' },
+        ],
+    },
+    { id: 'package.json', name: 'package.json' },
+    { id: 'tsconfig.json', name: 'tsconfig.json' },
+];
+const allIds = [
+    'src',
+    'src/components',
+    'src/components/button.tsx',
+    'src/components/input.tsx',
+    'src/components/dialog.tsx',
+    'src/lib',
+    'src/lib/utils.ts',
+    'src/lib/auth.ts',
+    'src/index.ts',
+    'package.json',
+    'tsconfig.json',
+];
+const meta = {
+    title: 'Primitives/FileTree',
+    component: Tree,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: {
+                width: '300px',
+                height: '400px',
+                border: '1px solid var(--color-border)',
+                borderRadius: '8px',
+                padding: '8px',
+            }, children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+/** Default file tree with auto-rendered elements */
+export const Default = {
+    args: {
+        elements: sampleElements,
+        initialExpandedItems: allIds,
+    },
+};
+/** Custom-rendered tree nodes with status icons */
+export const WithStatusIcons = {
+    render: () => (_jsxs(Tree, { initialExpandedItems: allIds, elements: sampleElements, sort: "none", children: [_jsxs(Folder, { element: "src", value: "src", children: [_jsxs(Folder, { element: "components", value: "src/components", children: [_jsxs(File, { value: "src/components/button.tsx", fileIcon: _jsx(FileEdit, { className: "h-4 w-4 text-amber-600" }), children: [_jsx("span", { className: "text-xs", children: "button.tsx" }), _jsx("span", { className: "ml-auto pl-2 text-[10px] text-green-600", children: "+12" })] }), _jsxs(File, { value: "src/components/input.tsx", fileIcon: _jsx(FilePlus, { className: "h-4 w-4 text-green-600" }), children: [_jsx("span", { className: "text-xs", children: "input.tsx" }), _jsx("span", { className: "ml-auto pl-2 text-[10px] text-green-600", children: "+45" })] })] }), _jsx(Folder, { element: "lib", value: "src/lib", children: _jsxs(File, { value: "src/lib/utils.ts", fileIcon: _jsx(FileMinus, { className: "h-4 w-4 text-red-600" }), children: [_jsx("span", { className: "text-xs", children: "utils.ts" }), _jsx("span", { className: "ml-auto pl-2 text-[10px] text-red-600", children: "-8" })] }) })] }), _jsx(CollapseButton, { elements: sampleElements, className: "mt-1" })] })),
+};
+/** Collapsed by default */
+export const Collapsed = {
+    args: {
+        elements: sampleElements,
+        initialExpandedItems: [],
+    },
+};
+/** With a collapse/expand all button */
+export const WithCollapseButton = {
+    render: () => (_jsxs(Tree, { elements: sampleElements, initialExpandedItems: allIds, sort: "default", children: [_jsxs(Folder, { element: "src", value: "src", children: [_jsxs(Folder, { element: "components", value: "src/components", children: [_jsx(File, { value: "src/components/button.tsx", children: _jsx("span", { className: "text-xs", children: "button.tsx" }) }), _jsx(File, { value: "src/components/input.tsx", children: _jsx("span", { className: "text-xs", children: "input.tsx" }) }), _jsx(File, { value: "src/components/dialog.tsx", children: _jsx("span", { className: "text-xs", children: "dialog.tsx" }) })] }), _jsxs(Folder, { element: "lib", value: "src/lib", children: [_jsx(File, { value: "src/lib/utils.ts", children: _jsx("span", { className: "text-xs", children: "utils.ts" }) }), _jsx(File, { value: "src/lib/auth.ts", children: _jsx("span", { className: "text-xs", children: "auth.ts" }) })] }), _jsx(File, { value: "src/index.ts", children: _jsx("span", { className: "text-xs", children: "index.ts" }) })] }), _jsx(File, { value: "package.json", children: _jsx("span", { className: "text-xs", children: "package.json" }) }), _jsx(File, { value: "tsconfig.json", children: _jsx("span", { className: "text-xs", children: "tsconfig.json" }) }), _jsx(CollapseButton, { elements: sampleElements, className: "mt-2" })] })),
+};

package/dist/src/presentation/web/components/ui/slider.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Slider as SliderPrimitive } from 'radix-ui';
+declare function Slider({ className, defaultValue, value, min, max, ...props }: React.ComponentProps<typeof SliderPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { Slider };
+//# sourceMappingURL=slider.d.ts.map

package/dist/src/presentation/web/components/ui/slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/ui/slider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AAIrD,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,YAAY,EACZ,KAAK,EACL,GAAO,EACP,GAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAyCnD;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/src/presentation/web/components/ui/slider.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Slider as SliderPrimitive } from 'radix-ui';
+import { cn } from '../../lib/utils.js';
+function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }) {
+    const _values = React.useMemo(() => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]), [value, defaultValue, min, max]);
+    return (_jsxs(SliderPrimitive.Root, { "data-slot": "slider", defaultValue: defaultValue, value: value, min: min, max: max, className: cn('relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col', className), ...props, children: [_jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: cn('bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5'), children: _jsx(SliderPrimitive.Range, { "data-slot": "slider-range", className: cn('bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full') }) }), Array.from({ length: _values.length }, (_, index) => (_jsx(SliderPrimitive.Thumb, { "data-slot": "slider-thumb", className: "border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50" }, index)))] }));
+}
+export { Slider };

package/dist/src/presentation/web/components/ui/slider.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Slider } from './slider.js';
+declare const meta: Meta<typeof Slider>;
+export default meta;
+type Story = StoryObj<typeof Slider>;
+export declare const Default: Story;
+//# sourceMappingURL=slider.stories.d.ts.map