ai-design-system 0.1.51 → 0.1.53

package/components/ai-elements/file-tree.tsx

@@ -0,0 +1,304 @@
+"use client";
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+import {
+  ChevronRightIcon,
+  FileIcon,
+  FolderIcon,
+  FolderOpenIcon,
+} from "lucide-react";
+import type { HTMLAttributes, ReactNode } from "react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
+
+interface FileTreeContextType {
+  expandedPaths: Set<string>;
+  togglePath: (path: string) => void;
+  selectedPath?: string;
+  onSelect?: (path: string) => void;
+}
+
+// Default noop for context default value
+// oxlint-disable-next-line eslint(no-empty-function)
+const noop = () => {};
+
+const FileTreeContext = createContext<FileTreeContextType>({
+  // oxlint-disable-next-line eslint-plugin-unicorn(no-new-builtin)
+  expandedPaths: new Set(),
+  togglePath: noop,
+});
+
+export type FileTreeProps = Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> & {
+  expanded?: Set<string>;
+  defaultExpanded?: Set<string>;
+  selectedPath?: string;
+  onSelect?: (path: string) => void;
+  onExpandedChange?: (expanded: Set<string>) => void;
+};
+
+export const FileTree = ({
+  expanded: controlledExpanded,
+  defaultExpanded = new Set(),
+  selectedPath,
+  onSelect,
+  onExpandedChange,
+  className,
+  children,
+  ...props
+}: FileTreeProps) => {
+  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+  const expandedPaths = controlledExpanded ?? internalExpanded;
+
+  const togglePath = useCallback(
+    (path: string) => {
+      const newExpanded = new Set(expandedPaths);
+      if (newExpanded.has(path)) {
+        newExpanded.delete(path);
+      } else {
+        newExpanded.add(path);
+      }
+      setInternalExpanded(newExpanded);
+      onExpandedChange?.(newExpanded);
+    },
+    [expandedPaths, onExpandedChange]
+  );
+
+  const contextValue = useMemo(
+    () => ({ expandedPaths, onSelect, selectedPath, togglePath }),
+    [expandedPaths, onSelect, selectedPath, togglePath]
+  );
+
+  return (
+    <FileTreeContext.Provider value={contextValue}>
+      <div
+        className={cn(
+          "rounded-lg border bg-background font-mono text-sm",
+          className
+        )}
+        role="tree"
+        {...props}
+      >
+        <div className="p-2">{children}</div>
+      </div>
+    </FileTreeContext.Provider>
+  );
+};
+
+export type FileTreeIconProps = HTMLAttributes<HTMLSpanElement>;
+
+export const FileTreeIcon = ({
+  className,
+  children,
+  ...props
+}: FileTreeIconProps) => (
+  <span className={cn("shrink-0", className)} {...props}>
+    {children}
+  </span>
+);
+
+export type FileTreeNameProps = HTMLAttributes<HTMLSpanElement>;
+
+export const FileTreeName = ({
+  className,
+  children,
+  ...props
+}: FileTreeNameProps) => (
+  <span className={cn("truncate", className)} {...props}>
+    {children}
+  </span>
+);
+
+interface FileTreeFolderContextType {
+  path: string;
+  name: string;
+  isExpanded: boolean;
+}
+
+const FileTreeFolderContext = createContext<FileTreeFolderContextType>({
+  isExpanded: false,
+  name: "",
+  path: "",
+});
+
+export type FileTreeFolderProps = HTMLAttributes<HTMLDivElement> & {
+  path: string;
+  name: string;
+};
+
+export const FileTreeFolder = ({
+  path,
+  name,
+  className,
+  children,
+  ...props
+}: FileTreeFolderProps) => {
+  const { expandedPaths, togglePath, selectedPath, onSelect } =
+    useContext(FileTreeContext);
+  const isExpanded = expandedPaths.has(path);
+  const isSelected = selectedPath === path;
+
+  const handleOpenChange = useCallback(() => {
+    togglePath(path);
+  }, [togglePath, path]);
+
+  const handleSelect = useCallback(() => {
+    onSelect?.(path);
+  }, [onSelect, path]);
+
+  const folderContextValue = useMemo(
+    () => ({ isExpanded, name, path }),
+    [isExpanded, name, path]
+  );
+
+  return (
+    <FileTreeFolderContext.Provider value={folderContextValue}>
+      <Collapsible onOpenChange={handleOpenChange} open={isExpanded}>
+        <div
+          className={cn("", className)}
+          role="treeitem"
+          tabIndex={0}
+          {...props}
+        >
+          <div
+            className={cn(
+              "flex w-full items-center gap-1 rounded px-2 py-1 text-left transition-colors hover:bg-muted/50",
+              isSelected && "bg-muted"
+            )}
+          >
+            <CollapsibleTrigger asChild>
+              <button
+                className="flex shrink-0 cursor-pointer items-center border-none bg-transparent p-0"
+                type="button"
+              >
+                <ChevronRightIcon
+                  className={cn(
+                    "size-4 shrink-0 text-muted-foreground transition-transform",
+                    isExpanded && "rotate-90"
+                  )}
+                />
+              </button>
+            </CollapsibleTrigger>
+            <button
+              className="flex min-w-0 flex-1 cursor-pointer items-center gap-1 border-none bg-transparent p-0 text-left"
+              onClick={handleSelect}
+              type="button"
+            >
+              <FileTreeIcon>
+                {isExpanded ? (
+                  <FolderOpenIcon className="size-4 text-blue-500" />
+                ) : (
+                  <FolderIcon className="size-4 text-blue-500" />
+                )}
+              </FileTreeIcon>
+              <FileTreeName>{name}</FileTreeName>
+            </button>
+          </div>
+          <CollapsibleContent>
+            <div className="ml-4 border-l pl-2">{children}</div>
+          </CollapsibleContent>
+        </div>
+      </Collapsible>
+    </FileTreeFolderContext.Provider>
+  );
+};
+
+interface FileTreeFileContextType {
+  path: string;
+  name: string;
+}
+
+const FileTreeFileContext = createContext<FileTreeFileContextType>({
+  name: "",
+  path: "",
+});
+
+export type FileTreeFileProps = HTMLAttributes<HTMLDivElement> & {
+  path: string;
+  name: string;
+  icon?: ReactNode;
+};
+
+export const FileTreeFile = ({
+  path,
+  name,
+  icon,
+  className,
+  children,
+  ...props
+}: FileTreeFileProps) => {
+  const { selectedPath, onSelect } = useContext(FileTreeContext);
+  const isSelected = selectedPath === path;
+
+  const handleClick = useCallback(() => {
+    onSelect?.(path);
+  }, [onSelect, path]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter" || e.key === " ") {
+        onSelect?.(path);
+      }
+    },
+    [onSelect, path]
+  );
+
+  const fileContextValue = useMemo(() => ({ name, path }), [name, path]);
+
+  return (
+    <FileTreeFileContext.Provider value={fileContextValue}>
+      <div
+        className={cn(
+          "flex cursor-pointer items-center gap-1 rounded px-2 py-1 transition-colors hover:bg-muted/50",
+          isSelected && "bg-muted",
+          className
+        )}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        role="treeitem"
+        tabIndex={0}
+        {...props}
+      >
+        {children ?? (
+          <>
+            {/* Spacer for alignment */}
+            <span className="size-4 shrink-0" />
+            <FileTreeIcon>
+              {icon ?? <FileIcon className="size-4 text-muted-foreground" />}
+            </FileTreeIcon>
+            <FileTreeName>{name}</FileTreeName>
+          </>
+        )}
+      </div>
+    </FileTreeFileContext.Provider>
+  );
+};
+
+export type FileTreeActionsProps = HTMLAttributes<HTMLDivElement>;
+
+const stopPropagation = (e: React.SyntheticEvent) => e.stopPropagation();
+
+export const FileTreeActions = ({
+  className,
+  children,
+  ...props
+}: FileTreeActionsProps) => (
+  <div
+    className={cn("ml-auto flex items-center gap-1", className)}
+    onClick={stopPropagation}
+    onKeyDown={stopPropagation}
+    role="group"
+    {...props}
+  >
+    {children}
+  </div>
+);

package/components/blocks/InboxPanel/InboxPanel.tsx

@@ -40,7 +40,7 @@ export const InboxPanel = React.memo<InboxPanelProps>(
           </div>
         ) : null}
 
-        <div className="px-4 pb-2">
+        <div className="px-4 pt-4 pb-2">
           <Input
             aria-label="Search inbox items"
             className="h-8"

package/components/blocks/SectionLayout/SectionLayout.tsx

@@ -21,6 +21,7 @@ export const SectionLayout = React.memo<SectionLayoutProps>(
     resizable = true,
     dragHandleColor = "border",
     className,
+    padded = true,
     ...props 
   }) => {
     // Transform sections to include headers
@@ -47,6 +48,7 @@ export const SectionLayout = React.memo<SectionLayoutProps>(
         onSectionResize={onSectionResize}
         dragHandleColor={dragHandleColor}
         className={className}
+        padded={padded}
         {...props}
       />
     )

package/components/blocks/SectionLayout/interfaces.ts

@@ -20,4 +20,5 @@ export interface SectionLayoutProps extends React.ComponentPropsWithoutRef<"div"
   onSectionResize?: (sectionId: string, newSize: number) => void;
   resizable?: boolean;
   dragHandleColor?: "primary" | "secondary" | "accent" | "border" | "muted";
+  padded?: boolean;
 }

package/components/composites/AdjustableLayout/AdjustableLayout.tsx

@@ -18,6 +18,7 @@ export interface AdjustableLayoutProps extends React.ComponentPropsWithoutRef<"d
   storageKey?: string // localStorage key for persistence
   onSectionResize?: (sectionId: string, newSize: number) => void
   dragHandleColor?: "primary" | "secondary" | "accent" | "border" | "muted"
+  padded?: boolean
 }
 
 /**
@@ -28,19 +29,20 @@ export interface AdjustableLayoutProps extends React.ComponentPropsWithoutRef<"d
  * Supports localStorage persistence and responsive behavior.
  */
 export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
-  ({ 
-    sections, 
-    orientation = "horizontal", 
+  ({
+    sections,
+    orientation = "horizontal",
     storageKey,
     onSectionResize,
     dragHandleColor = "border",
     className,
-    ...props 
+    padded = false,
+    ...props
   }) => {
     // Color mapping for drag handles
     const colorMap = {
       primary: "bg-primary hover:bg-primary/90",
-      secondary: "bg-secondary hover:bg-secondary/80", 
+      secondary: "bg-secondary hover:bg-secondary/80",
       accent: "bg-accent hover:bg-accent/80",
       border: "bg-border hover:bg-border/80",
       muted: "bg-muted hover:bg-muted/80"
@@ -49,7 +51,7 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
     const hoverColorMap = {
       primary: "group-hover:bg-primary/30",
       secondary: "group-hover:bg-secondary/30",
-      accent: "group-hover:bg-accent/30", 
+      accent: "group-hover:bg-accent/30",
       border: "group-hover:bg-border/30",
       muted: "group-hover:bg-muted/30"
     }
@@ -77,7 +79,7 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
       } catch {
         // ignore malformed storage
       }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [storageKey])
 
     const [draggingIndex, setDraggingIndex] = React.useState<number | null>(null)
@@ -119,33 +121,33 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
 
       const currentX = orientation === "horizontal" ? e.clientX : e.clientY
       const deltaX = currentX - startX
-      
+
       const deltaPercent = (deltaX / containerSize) * 100
-      
+
       const p1 = sections[draggingIndex]
       const p2 = sections[draggingIndex + 1]
-      
+
       const p1Start = startSizes[draggingIndex]
       const p2Start = startSizes[draggingIndex + 1]
-      
+
       const p1Min = p1.minSize ?? 10
       const p1Max = p1.maxSize ?? 80
       const p2Min = p2.minSize ?? 10
       const p2Max = p2.maxSize ?? 80
-      
+
       // Calculate how much we can actually change panel 1
       // If deltaPercent > 0, we are growing p1 and shrinking p2
       const maxPositiveDelta = Math.max(0, Math.min(
         p1Max - p1Start,       // Space p1 has to grow
         p2Start - p2Min        // Space p2 has to shrink
       ))
-      
+
       // If deltaPercent < 0, we are shrinking p1 and growing p2
       const maxNegativeDelta = Math.min(0, Math.max(
         p1Min - p1Start,       // Space p1 has to shrink (negative)
         p2Start - p2Max        // Space p2 has to grow (negative)
       ))
-      
+
       // Clamp the delta
       let clampedDelta = deltaPercent
       if (clampedDelta > 0) {
@@ -153,17 +155,17 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
       } else {
         clampedDelta = Math.max(clampedDelta, maxNegativeDelta)
       }
-      
+
       const newSizes = [...startSizes]
       newSizes[draggingIndex] = p1Start + clampedDelta
       newSizes[draggingIndex + 1] = p2Start - clampedDelta
-      
+
       // Normalize to 100% just in case of floating point drift
       const total = newSizes.reduce((sum, size) => sum + size, 0)
       const normalizedSizes = newSizes.map(size => (size / total) * 100)
-      
+
       setSizes(normalizedSizes)
-      
+
       // Notify parent
       if (onSectionResize) {
         onSectionResize(sections[draggingIndex].id, normalizedSizes[draggingIndex])
@@ -201,12 +203,12 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
           ? { flex: `0 0 ${section.fixedSize}`, width: section.fixedSize, minWidth: section.fixedSize }
           : { flex: `0 0 ${section.fixedSize}`, height: section.fixedSize, minHeight: section.fixedSize }
         : null
-      
+
       return (
         <React.Fragment key={section.id}>
           <div
             className={cn(
-              "min-h-0 overflow-hidden bg-card border border-border rounded-md",
+              "min-h-0 overflow-hidden bg-card border border-border rounded-xl",
               section.className
             )}
             style={{
@@ -217,27 +219,46 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
           >
             {section.content}
           </div>
-          
-          {/* Show drag handle after this panel if it's not the last one */}
-          {isResizable && (
-            <div
-              className={cn(
-                `${colorMap[dragHandleColor]} flex-shrink-0 transition-colors duration-200 relative group`,
-                orientation === "vertical" 
-                  ? "cursor-row-resize h-1 w-full" 
-                  : "cursor-col-resize w-1 h-full"
-              )}
-              onMouseDown={(e) => handleMouseDown(index, e)}
-            >
-              <div 
+
+          {/* Show drag handle or spacer after this panel if it's not the last one */}
+          {index < sections.length - 1 && (
+            isResizable ? (
+              <div
+                className={cn(
+                  "flex-shrink-0 flex items-center justify-center relative group",
+                  orientation === "vertical"
+                    ? "cursor-row-resize h-2 w-full"
+                    : "cursor-col-resize w-2 h-full"
+                )}
+                onMouseDown={(e) => handleMouseDown(index, e)}
+              >
+                {/* Visible pill */}
+                <div
+                  className={cn(
+                    `${colorMap[dragHandleColor]} transition-colors duration-200 rounded-full`,
+                    orientation === "vertical"
+                      ? "h-1 w-8"
+                      : "w-1 h-8"
+                  )}
+                />
+                {/* Invisible large hit area */}
+                <div
+                  className={cn(
+                    "absolute z-10",
+                    orientation === "vertical"
+                      ? "inset-x-0 -top-2 -bottom-2"
+                      : "inset-y-0 -left-2 -right-2"
+                  )}
+                />
+              </div>
+            ) : (
+              <div
                 className={cn(
-                  `absolute inset-0 ${hoverColorMap[dragHandleColor]}`,
-                  orientation === "vertical" 
-                    ? "h-3 -translate-y-1" 
-                    : "w-3 -translate-x-1"
-                )} 
+                  "flex-shrink-0",
+                  orientation === "vertical" ? "h-2 w-full" : "w-2 h-full"
+                )}
               />
-            </div>
+            )
           )}
         </React.Fragment>
       )
@@ -248,12 +269,13 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
         ref={containerRef}
         className={cn(
           "flex overflow-hidden h-full gap-1 min-w-0",
+          padded && "p-4",
           orientation === "horizontal" ? "flex-row" : "flex-col",
           className
         )}
         {...props}
       >
-        {sections.map((section, index) => 
+        {sections.map((section, index) =>
           renderPanel(section, sizes[index], index)
         )}
       </div>

package/components/composites/FileTreeExplorer/FileTreeExplorer.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { fn } from '@storybook/test'
+import { FileTreeExplorer } from './FileTreeExplorer'
+
+const sampleTree = [
+  {
+    name: 'src',
+    path: 'src',
+    type: 'folder' as const,
+    children: [
+      {
+        name: 'components',
+        path: 'src/components',
+        type: 'folder' as const,
+        children: [
+          { name: 'Button.tsx', path: 'src/components/Button.tsx', type: 'file' as const },
+          { name: 'Input.tsx', path: 'src/components/Input.tsx', type: 'file' as const },
+        ],
+      },
+      {
+        name: 'hooks',
+        path: 'src/hooks',
+        type: 'folder' as const,
+        children: [
+          { name: 'use-toast.ts', path: 'src/hooks/use-toast.ts', type: 'file' as const },
+        ],
+      },
+      { name: 'index.ts', path: 'src/index.ts', type: 'file' as const },
+    ],
+  },
+  { name: 'package.json', path: 'package.json', type: 'file' as const },
+]
+
+const meta = {
+  title: 'Composites/FileTreeExplorer',
+  component: FileTreeExplorer,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+  },
+} satisfies Meta<typeof FileTreeExplorer>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    tree: sampleTree,
+    defaultExpanded: new Set(['src', 'src/components']),
+    selectedPath: 'src/components/Button.tsx',
+    onSelect: fn(),
+    createButtonLabel: 'New File',
+  },
+}
+
+export const Empty: Story = {
+  args: {
+    tree: [],
+    createButtonLabel: 'New File',
+  },
+}
+
+export const DarkMode: Story = {
+  args: {
+    tree: sampleTree,
+    defaultExpanded: new Set(['src']),
+    selectedPath: 'src/index.ts',
+    onSelect: fn(),
+  },
+  parameters: {
+    backgrounds: { disable: true },
+  },
+}