@neynar/ui 0.1.1

package/src/components/ui/stories/menubar.stories.tsx

@@ -0,0 +1,764 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import React from "react";
+import {
+  FileText,
+  Folder,
+  Save,
+  Download,
+  Upload,
+  Copy,
+  ClipboardPaste,
+  Scissors,
+  Undo,
+  Redo,
+  Bold,
+  Italic,
+  Underline,
+  Settings,
+  HelpCircle,
+  Info,
+  Zap,
+  Search,
+  Plus,
+  Minus,
+  Maximize,
+  Minimize,
+  RotateCcw,
+  RefreshCw,
+  Clock,
+  Filter,
+} from "lucide-react";
+import {
+  Menubar,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarTrigger,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarLabel,
+} from "../menubar";
+
+const meta = {
+  title: "Navigation & Menus/Menubar",
+  component: Menubar,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A visually persistent menu common in desktop applications that provides access to a consistent set of commands. Built on Radix UI Menubar primitive with full keyboard navigation and accessibility support.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    className: {
+      control: "text",
+      description: "Additional CSS classes to apply to the menubar",
+    },
+  },
+} satisfies Meta<typeof Menubar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground for testing all menubar features and configurations.
+ * Experiment with different combinations of menu items, shortcuts, and interactions.
+ */
+export const Interactive: Story = {
+  render: function InteractiveMenubar() {
+    const [showToolbar, setShowToolbar] = React.useState(true);
+    const [showSidebar, setShowSidebar] = React.useState(false);
+    const [showFooter, setShowFooter] = React.useState(true);
+    const [theme, setTheme] = React.useState("light");
+    const [fontSize, setFontSize] = React.useState("medium");
+    const [recentFiles] = React.useState([
+      "project1.json",
+      "document.pdf", 
+      "spreadsheet.xlsx",
+    ]);
+
+    return (
+      <div className="w-full max-w-4xl">
+        <Menubar>
+          <MenubarMenu>
+            <MenubarTrigger>File</MenubarTrigger>
+            <MenubarContent>
+              <MenubarItem>
+                <FileText className="mr-2 h-4 w-4" />
+                New File
+                <MenubarShortcut>⌘N</MenubarShortcut>
+              </MenubarItem>
+              <MenubarItem>
+                <Folder className="mr-2 h-4 w-4" />
+                Open
+                <MenubarShortcut>⌘O</MenubarShortcut>
+              </MenubarItem>
+              <MenubarSub>
+                <MenubarSubTrigger>
+                  <Clock className="mr-2 h-4 w-4" />
+                  Recent Files
+                </MenubarSubTrigger>
+                <MenubarSubContent className="w-48">
+                  {recentFiles.map((file, index) => (
+                    <MenubarItem key={index}>
+                      <FileText className="mr-2 h-4 w-4" />
+                      {file}
+                    </MenubarItem>
+                  ))}
+                  <MenubarSeparator />
+                  <MenubarItem>Clear Recent Files</MenubarItem>
+                </MenubarSubContent>
+              </MenubarSub>
+              <MenubarSeparator />
+              <MenubarItem>
+                <Save className="mr-2 h-4 w-4" />
+                Save
+                <MenubarShortcut>⌘S</MenubarShortcut>
+              </MenubarItem>
+              <MenubarItem disabled>
+                <Upload className="mr-2 h-4 w-4" />
+                Import (Coming Soon)
+              </MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem variant="destructive">
+                Delete File
+                <MenubarShortcut>⌫</MenubarShortcut>
+              </MenubarItem>
+            </MenubarContent>
+          </MenubarMenu>
+          
+          <MenubarMenu>
+            <MenubarTrigger>Edit</MenubarTrigger>
+            <MenubarContent>
+              <MenubarItem>
+                <Undo className="mr-2 h-4 w-4" />
+                Undo
+                <MenubarShortcut>⌘Z</MenubarShortcut>
+              </MenubarItem>
+              <MenubarItem>
+                <Redo className="mr-2 h-4 w-4" />
+                Redo
+                <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+              </MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem>
+                <Scissors className="mr-2 h-4 w-4" />
+                Cut
+                <MenubarShortcut>⌘X</MenubarShortcut>
+              </MenubarItem>
+              <MenubarItem>
+                <Copy className="mr-2 h-4 w-4" />
+                Copy
+                <MenubarShortcut>⌘C</MenubarShortcut>
+              </MenubarItem>
+              <MenubarItem>
+                <ClipboardPaste className="mr-2 h-4 w-4" />
+                Paste
+                <MenubarShortcut>⌘V</MenubarShortcut>
+              </MenubarItem>
+              <MenubarSeparator />
+              <MenubarSub>
+                <MenubarSubTrigger>Text Style</MenubarSubTrigger>
+                <MenubarSubContent>
+                  <MenubarItem>
+                    <Bold className="mr-2 h-4 w-4" />
+                    Bold
+                    <MenubarShortcut>⌘B</MenubarShortcut>
+                  </MenubarItem>
+                  <MenubarItem>
+                    <Italic className="mr-2 h-4 w-4" />
+                    Italic
+                    <MenubarShortcut>⌘I</MenubarShortcut>
+                  </MenubarItem>
+                  <MenubarItem>
+                    <Underline className="mr-2 h-4 w-4" />
+                    Underline
+                    <MenubarShortcut>⌘U</MenubarShortcut>
+                  </MenubarItem>
+                </MenubarSubContent>
+              </MenubarSub>
+            </MenubarContent>
+          </MenubarMenu>
+
+          <MenubarMenu>
+            <MenubarTrigger>View</MenubarTrigger>
+            <MenubarContent>
+              <MenubarLabel>Interface</MenubarLabel>
+              <MenubarSeparator />
+              <MenubarCheckboxItem
+                checked={showToolbar}
+                onCheckedChange={setShowToolbar}
+              >
+                Show Toolbar
+                <MenubarShortcut>⌘T</MenubarShortcut>
+              </MenubarCheckboxItem>
+              <MenubarCheckboxItem
+                checked={showSidebar}
+                onCheckedChange={setShowSidebar}
+              >
+                Show Sidebar
+                <MenubarShortcut>⌘B</MenubarShortcut>
+              </MenubarCheckboxItem>
+              <MenubarCheckboxItem
+                checked={showFooter}
+                onCheckedChange={setShowFooter}
+              >
+                Show Footer
+              </MenubarCheckboxItem>
+              <MenubarSeparator />
+              <MenubarItem>
+                <Maximize className="mr-2 h-4 w-4" />
+                Zoom In
+                <MenubarShortcut>⌘+</MenubarShortcut>
+              </MenubarItem>
+              <MenubarItem>
+                <Minimize className="mr-2 h-4 w-4" />
+                Zoom Out
+                <MenubarShortcut>⌘-</MenubarShortcut>
+              </MenubarItem>
+              <MenubarItem>
+                <RefreshCw className="mr-2 h-4 w-4" />
+                Refresh
+                <MenubarShortcut>⌘R</MenubarShortcut>
+              </MenubarItem>
+            </MenubarContent>
+          </MenubarMenu>
+
+          <MenubarMenu>
+            <MenubarTrigger>Preferences</MenubarTrigger>
+            <MenubarContent>
+              <MenubarLabel>Theme</MenubarLabel>
+              <MenubarSeparator />
+              <MenubarRadioGroup value={theme} onValueChange={setTheme}>
+                <MenubarRadioItem value="light">Light</MenubarRadioItem>
+                <MenubarRadioItem value="dark">Dark</MenubarRadioItem>
+                <MenubarRadioItem value="auto">Auto</MenubarRadioItem>
+              </MenubarRadioGroup>
+              <MenubarSeparator />
+              <MenubarLabel>Font Size</MenubarLabel>
+              <MenubarSeparator />
+              <MenubarRadioGroup value={fontSize} onValueChange={setFontSize}>
+                <MenubarRadioItem value="small">Small</MenubarRadioItem>
+                <MenubarRadioItem value="medium">Medium</MenubarRadioItem>
+                <MenubarRadioItem value="large">Large</MenubarRadioItem>
+              </MenubarRadioGroup>
+              <MenubarSeparator />
+              <MenubarItem>
+                <Settings className="mr-2 h-4 w-4" />
+                Advanced Settings
+                <MenubarShortcut>⌘,</MenubarShortcut>
+              </MenubarItem>
+            </MenubarContent>
+          </MenubarMenu>
+
+          <MenubarMenu>
+            <MenubarTrigger>Help</MenubarTrigger>
+            <MenubarContent>
+              <MenubarItem>
+                <HelpCircle className="mr-2 h-4 w-4" />
+                Documentation
+              </MenubarItem>
+              <MenubarItem>
+                Keyboard Shortcuts
+                <MenubarShortcut>⌘/</MenubarShortcut>
+              </MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem>
+                <Info className="mr-2 h-4 w-4" />
+                About
+              </MenubarItem>
+            </MenubarContent>
+          </MenubarMenu>
+        </Menubar>
+        
+        <div className="mt-6 p-4 rounded-md border bg-muted/50">
+          <p className="text-sm text-muted-foreground">
+            State: Toolbar: {showToolbar ? 'On' : 'Off'}, Sidebar: {showSidebar ? 'On' : 'Off'}, 
+            Footer: {showFooter ? 'On' : 'Off'}, Theme: {theme}, Font: {fontSize}
+          </p>
+        </div>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "A comprehensive interactive example showcasing all menubar features including basic items, shortcuts, checkboxes, radio groups, submenus, disabled items, and destructive variants. Use this to test different configurations and interactions.",
+      },
+    },
+  },
+};
+
+/**
+ * Systematic showcase of all menubar variants and combinations.
+ * Demonstrates different menu types, item styles, and layout patterns.
+ */
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-8">
+      {/* Basic Menubar */}
+      <div>
+        <h3 className="text-sm font-medium mb-2">Basic Application Menu</h3>
+        <Menubar>
+          <MenubarMenu>
+            <MenubarTrigger>File</MenubarTrigger>
+            <MenubarContent>
+              <MenubarItem>
+                <FileText className="mr-2 h-4 w-4" />
+                New
+                <MenubarShortcut>⌘N</MenubarShortcut>
+              </MenubarItem>
+              <MenubarItem>
+                <Folder className="mr-2 h-4 w-4" />
+                Open
+                <MenubarShortcut>⌘O</MenubarShortcut>
+              </MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem>
+                <Save className="mr-2 h-4 w-4" />
+                Save
+                <MenubarShortcut>⌘S</MenubarShortcut>
+              </MenubarItem>
+            </MenubarContent>
+          </MenubarMenu>
+          <MenubarMenu>
+            <MenubarTrigger>Edit</MenubarTrigger>
+            <MenubarContent>
+              <MenubarItem>
+                <Undo className="mr-2 h-4 w-4" />
+                Undo
+                <MenubarShortcut>⌘Z</MenubarShortcut>
+              </MenubarItem>
+              <MenubarItem>
+                <Redo className="mr-2 h-4 w-4" />
+                Redo
+                <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+              </MenubarItem>
+            </MenubarContent>
+          </MenubarMenu>
+        </Menubar>
+      </div>
+
+      {/* Single Menu */}
+      <div>
+        <h3 className="text-sm font-medium mb-2">Single Menu</h3>
+        <Menubar>
+          <MenubarMenu>
+            <MenubarTrigger>Actions</MenubarTrigger>
+            <MenubarContent>
+              <MenubarItem>
+                <Plus className="mr-2 h-4 w-4" />
+                Add Item
+              </MenubarItem>
+              <MenubarItem>
+                <Minus className="mr-2 h-4 w-4" />
+                Remove Item
+              </MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem>
+                <Settings className="mr-2 h-4 w-4" />
+                Settings
+              </MenubarItem>
+            </MenubarContent>
+          </MenubarMenu>
+        </Menubar>
+      </div>
+
+      {/* With Submenus */}
+      <div>
+        <h3 className="text-sm font-medium mb-2">With Nested Submenus</h3>
+        <Menubar>
+          <MenubarMenu>
+            <MenubarTrigger>Tools</MenubarTrigger>
+            <MenubarContent>
+              <MenubarItem>
+                <Search className="mr-2 h-4 w-4" />
+                Quick Search
+                <MenubarShortcut>⌘K</MenubarShortcut>
+              </MenubarItem>
+              <MenubarSub>
+                <MenubarSubTrigger>
+                  <Download className="mr-2 h-4 w-4" />
+                  Export
+                </MenubarSubTrigger>
+                <MenubarSubContent>
+                  <MenubarItem>Export as PDF</MenubarItem>
+                  <MenubarItem>Export as CSV</MenubarItem>
+                  <MenubarItem>Export as JSON</MenubarItem>
+                </MenubarSubContent>
+              </MenubarSub>
+              <MenubarSub>
+                <MenubarSubTrigger>
+                  <Filter className="mr-2 h-4 w-4" />
+                  Filters
+                </MenubarSubTrigger>
+                <MenubarSubContent>
+                  <MenubarSub>
+                    <MenubarSubTrigger>By Date</MenubarSubTrigger>
+                    <MenubarSubContent>
+                      <MenubarItem>Today</MenubarItem>
+                      <MenubarItem>This Week</MenubarItem>
+                      <MenubarItem>This Month</MenubarItem>
+                    </MenubarSubContent>
+                  </MenubarSub>
+                  <MenubarSub>
+                    <MenubarSubTrigger>By Type</MenubarSubTrigger>
+                    <MenubarSubContent>
+                      <MenubarItem>Documents</MenubarItem>
+                      <MenubarItem>Images</MenubarItem>
+                      <MenubarItem>Videos</MenubarItem>
+                    </MenubarSubContent>
+                  </MenubarSub>
+                </MenubarSubContent>
+              </MenubarSub>
+            </MenubarContent>
+          </MenubarMenu>
+        </Menubar>
+      </div>
+
+      {/* Destructive Variants */}
+      <div>
+        <h3 className="text-sm font-medium mb-2">With Destructive Actions</h3>
+        <Menubar>
+          <MenubarMenu>
+            <MenubarTrigger>Actions</MenubarTrigger>
+            <MenubarContent>
+              <MenubarItem>
+                <Copy className="mr-2 h-4 w-4" />
+                Duplicate
+              </MenubarItem>
+              <MenubarItem>
+                <Settings className="mr-2 h-4 w-4" />
+                Edit Properties
+              </MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem variant="destructive">
+                Delete Item
+                <MenubarShortcut>⌫</MenubarShortcut>
+              </MenubarItem>
+              <MenubarItem variant="destructive">
+                Clear All Data
+                <MenubarShortcut>⇧⌫</MenubarShortcut>
+              </MenubarItem>
+            </MenubarContent>
+          </MenubarMenu>
+        </Menubar>
+      </div>
+
+      {/* Disabled States */}
+      <div>
+        <h3 className="text-sm font-medium mb-2">With Disabled Items</h3>
+        <Menubar>
+          <MenubarMenu>
+            <MenubarTrigger>File</MenubarTrigger>
+            <MenubarContent>
+              <MenubarItem>
+                <FileText className="mr-2 h-4 w-4" />
+                New File
+                <MenubarShortcut>⌘N</MenubarShortcut>
+              </MenubarItem>
+              <MenubarItem disabled>
+                <Save className="mr-2 h-4 w-4" />
+                Save (No changes)
+                <MenubarShortcut>⌘S</MenubarShortcut>
+              </MenubarItem>
+              <MenubarItem disabled>
+                <Upload className="mr-2 h-4 w-4" />
+                Import (Coming Soon)
+              </MenubarItem>
+            </MenubarContent>
+          </MenubarMenu>
+          <MenubarMenu>
+            <MenubarTrigger disabled>Premium Features</MenubarTrigger>
+          </MenubarMenu>
+        </Menubar>
+      </div>
+
+      {/* Inset Items */}
+      <div>
+        <h3 className="text-sm font-medium mb-2">With Inset Alignment</h3>
+        <Menubar>
+          <MenubarMenu>
+            <MenubarTrigger>View</MenubarTrigger>
+            <MenubarContent>
+              <MenubarLabel inset>Display Options</MenubarLabel>
+              <MenubarSeparator />
+              <MenubarItem inset>List View</MenubarItem>
+              <MenubarItem>
+                <Settings className="mr-2 h-4 w-4" />
+                Grid View
+              </MenubarItem>
+              <MenubarItem inset>Compact View</MenubarItem>
+            </MenubarContent>
+          </MenubarMenu>
+        </Menubar>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Comprehensive showcase of all menubar variants including basic menus, single menus, nested submenus, destructive actions, disabled states, and inset alignment patterns.",
+      },
+    },
+  },
+};
+
+/**
+ * Real-world context showing menubar in a typical application interface.
+ * Demonstrates how menubar fits within a complete UI layout.
+ */
+export const InContext: Story = {
+  render: function ContextualMenubar() {
+    const [currentProject, setCurrentProject] = React.useState("My Project");
+    const [isProjectSaved, setIsProjectSaved] = React.useState(true);
+    
+    const handleSave = () => {
+      setIsProjectSaved(true);
+    };
+    
+    const handleEdit = () => {
+      setIsProjectSaved(false);
+    };
+
+    return (
+      <div className="w-full max-w-5xl mx-auto border rounded-lg overflow-hidden bg-background">
+        {/* Application Header with Menubar */}
+        <div className="border-b bg-muted/30 p-2">
+          <Menubar>
+            <MenubarMenu>
+              <MenubarTrigger>File</MenubarTrigger>
+              <MenubarContent>
+                <MenubarItem onClick={() => setCurrentProject("New Project")}>
+                  <FileText className="mr-2 h-4 w-4" />
+                  New Project
+                  <MenubarShortcut>⌘N</MenubarShortcut>
+                </MenubarItem>
+                <MenubarItem>
+                  <Folder className="mr-2 h-4 w-4" />
+                  Open Project
+                  <MenubarShortcut>⌘O</MenubarShortcut>
+                </MenubarItem>
+                <MenubarSeparator />
+                <MenubarItem 
+                  onClick={handleSave}
+                  disabled={isProjectSaved}
+                >
+                  <Save className="mr-2 h-4 w-4" />
+                  Save Project
+                  <MenubarShortcut>⌘S</MenubarShortcut>
+                </MenubarItem>
+                <MenubarSub>
+                  <MenubarSubTrigger>
+                    <Download className="mr-2 h-4 w-4" />
+                    Export
+                  </MenubarSubTrigger>
+                  <MenubarSubContent>
+                    <MenubarItem>Export as ZIP</MenubarItem>
+                    <MenubarItem>Export as JSON</MenubarItem>
+                    <MenubarItem>Export to Cloud</MenubarItem>
+                  </MenubarSubContent>
+                </MenubarSub>
+                <MenubarSeparator />
+                <MenubarItem>
+                  Project Settings
+                  <MenubarShortcut>⌘,</MenubarShortcut>
+                </MenubarItem>
+              </MenubarContent>
+            </MenubarMenu>
+
+            <MenubarMenu>
+              <MenubarTrigger>Edit</MenubarTrigger>
+              <MenubarContent>
+                <MenubarItem onClick={handleEdit}>
+                  <Undo className="mr-2 h-4 w-4" />
+                  Undo
+                  <MenubarShortcut>⌘Z</MenubarShortcut>
+                </MenubarItem>
+                <MenubarItem onClick={handleEdit}>
+                  <Redo className="mr-2 h-4 w-4" />
+                  Redo
+                  <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+                </MenubarItem>
+                <MenubarSeparator />
+                <MenubarItem onClick={handleEdit}>
+                  <Copy className="mr-2 h-4 w-4" />
+                  Copy Selection
+                  <MenubarShortcut>⌘C</MenubarShortcut>
+                </MenubarItem>
+                <MenubarItem onClick={handleEdit}>
+                  <ClipboardPaste className="mr-2 h-4 w-4" />
+                  Paste
+                  <MenubarShortcut>⌘V</MenubarShortcut>
+                </MenubarItem>
+                <MenubarSeparator />
+                <MenubarItem>
+                  <Search className="mr-2 h-4 w-4" />
+                  Find in Project
+                  <MenubarShortcut>⌘F</MenubarShortcut>
+                </MenubarItem>
+              </MenubarContent>
+            </MenubarMenu>
+
+            <MenubarMenu>
+              <MenubarTrigger>View</MenubarTrigger>
+              <MenubarContent>
+                <MenubarCheckboxItem checked={true}>
+                  Show Sidebar
+                  <MenubarShortcut>⌘B</MenubarShortcut>
+                </MenubarCheckboxItem>
+                <MenubarCheckboxItem checked={false}>
+                  Show Minimap
+                  <MenubarShortcut>⌘M</MenubarShortcut>
+                </MenubarCheckboxItem>
+                <MenubarSeparator />
+                <MenubarItem>
+                  <Maximize className="mr-2 h-4 w-4" />
+                  Zoom In
+                  <MenubarShortcut>⌘+</MenubarShortcut>
+                </MenubarItem>
+                <MenubarItem>
+                  <Minimize className="mr-2 h-4 w-4" />
+                  Zoom Out
+                  <MenubarShortcut>⌘-</MenubarShortcut>
+                </MenubarItem>
+                <MenubarItem>
+                  <RotateCcw className="mr-2 h-4 w-4" />
+                  Reset Zoom
+                  <MenubarShortcut>⌘0</MenubarShortcut>
+                </MenubarItem>
+              </MenubarContent>
+            </MenubarMenu>
+
+            <MenubarMenu>
+              <MenubarTrigger>Tools</MenubarTrigger>
+              <MenubarContent>
+                <MenubarItem>
+                  <Zap className="mr-2 h-4 w-4" />
+                  Quick Actions
+                  <MenubarShortcut>⌘K</MenubarShortcut>
+                </MenubarItem>
+                <MenubarItem>
+                  <Filter className="mr-2 h-4 w-4" />
+                  Filter Results
+                </MenubarItem>
+                <MenubarSeparator />
+                <MenubarItem>
+                  <Settings className="mr-2 h-4 w-4" />
+                  Preferences
+                  <MenubarShortcut>⌘,</MenubarShortcut>
+                </MenubarItem>
+              </MenubarContent>
+            </MenubarMenu>
+
+            <MenubarMenu>
+              <MenubarTrigger>Help</MenubarTrigger>
+              <MenubarContent>
+                <MenubarItem>
+                  <HelpCircle className="mr-2 h-4 w-4" />
+                  Documentation
+                </MenubarItem>
+                <MenubarItem>
+                  <Info className="mr-2 h-4 w-4" />
+                  Keyboard Shortcuts
+                  <MenubarShortcut>⌘/</MenubarShortcut>
+                </MenubarItem>
+                <MenubarSeparator />
+                <MenubarItem>
+                  Contact Support
+                </MenubarItem>
+                <MenubarItem>
+                  <Info className="mr-2 h-4 w-4" />
+                  About
+                </MenubarItem>
+              </MenubarContent>
+            </MenubarMenu>
+          </Menubar>
+        </div>
+
+        {/* Application Content */}
+        <div className="flex">
+          {/* Sidebar */}
+          <div className="w-48 border-r bg-muted/20 p-4">
+            <h3 className="font-medium text-sm mb-3">Project Files</h3>
+            <div className="space-y-1 text-sm">
+              <div className="flex items-center gap-2 p-1 rounded hover:bg-muted/50">
+                <FileText className="h-4 w-4 text-muted-foreground" />
+                index.html
+              </div>
+              <div className="flex items-center gap-2 p-1 rounded hover:bg-muted/50">
+                <FileText className="h-4 w-4 text-muted-foreground" />
+                styles.css
+              </div>
+              <div className="flex items-center gap-2 p-1 rounded hover:bg-muted/50">
+                <FileText className="h-4 w-4 text-muted-foreground" />
+                script.js
+              </div>
+            </div>
+          </div>
+
+          {/* Main Content */}
+          <div className="flex-1 p-6">
+            <div className="mb-4 flex items-center justify-between">
+              <h1 className="text-xl font-semibold">
+                {currentProject}
+                {!isProjectSaved && <span className="text-muted-foreground ml-2">•</span>}
+              </h1>
+              <div className="text-sm text-muted-foreground">
+                {isProjectSaved ? "All changes saved" : "Unsaved changes"}
+              </div>
+            </div>
+
+            <div className="space-y-4">
+              <div className="border rounded-lg p-4 bg-muted/10">
+                <h3 className="font-medium mb-2">Welcome to your project</h3>
+                <p className="text-sm text-muted-foreground">
+                  Use the menubar above to create, edit, and manage your project files. 
+                  All standard keyboard shortcuts are supported for efficient workflow.
+                </p>
+              </div>
+
+              <div className="border rounded-lg p-4 bg-muted/10">
+                <h3 className="font-medium mb-2">Quick Actions</h3>
+                <div className="text-sm text-muted-foreground space-y-1">
+                  <p>• Press <kbd className="px-1 py-0.5 text-xs bg-muted rounded">⌘N</kbd> to create a new project</p>
+                  <p>• Press <kbd className="px-1 py-0.5 text-xs bg-muted rounded">⌘S</kbd> to save your work</p>
+                  <p>• Press <kbd className="px-1 py-0.5 text-xs bg-muted rounded">⌘K</kbd> for quick actions</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Status Bar */}
+        <div className="border-t bg-muted/30 px-4 py-2 text-xs text-muted-foreground flex items-center justify-between">
+          <div>Ready</div>
+          <div className="flex items-center gap-4">
+            <span>Line 1, Column 1</span>
+            <span>UTF-8</span>
+            <span>JavaScript</span>
+          </div>
+        </div>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "A complete application interface showing how menubar integrates with other UI elements. This example demonstrates a project management application with file operations, state management, and real-world interactions that designers and business teams would encounter.",
+      },
+    },
+  },
+};