@tangle-network/ui 1.0.0

package/src/primitives/drop-zone.stories.tsx

@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Upload, FileText, ImageIcon } from 'lucide-react'
+import { DropZone } from './drop-zone'
+
+const AppContent = () => (
+  <div className="w-[600px] h-[380px] flex items-center justify-center rounded-xl border border-dashed border-border text-muted-foreground text-sm bg-muted">
+    App content area — drag files over this window
+  </div>
+)
+
+const meta: Meta<typeof DropZone> = {
+  title: 'Primitives/DropZone',
+  component: DropZone,
+  parameters: { layout: 'centered', backgrounds: { default: 'dark' } },
+  args: {
+    onDrop: (files) => console.log('dropped', files),
+    children: <AppContent />,
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof DropZone>
+
+export const Idle: Story = {
+  name: 'Idle (no drag)',
+}
+
+export const WithAcceptFilter: Story = {
+  name: 'With Accept Filter (.pdf, .csv)',
+  args: {
+    accept: '.pdf,.csv',
+    title: 'Drop CSV or PDF files',
+    description: 'Only .pdf and .csv files will be accepted.',
+  },
+}
+
+export const Disabled: Story = {
+  name: 'Disabled',
+  args: { disabled: true },
+}
+
+/** Static render of the default drop overlay — the real one only mounts during dragenter. */
+export const OverlayDefault: Story = {
+  name: 'Overlay — Default',
+  render: () => (
+    <div className="relative w-[600px] h-[380px]">
+      <AppContent />
+      <div className="absolute inset-0 z-10 flex items-center justify-center rounded-xl bg-background/80">
+        <div className="rounded-2xl border-2 border-dashed border-border bg-card p-12 text-center max-w-sm w-full mx-4">
+          <div className="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-2xl border border-border bg-[var(--accent-surface-soft)]">
+            <Upload className="h-8 w-8 text-[var(--accent-text)]" />
+          </div>
+          <h2 className="text-xl font-bold text-foreground">Drop files to upload</h2>
+          <p className="mt-2 text-sm text-muted-foreground">Your files will be securely stored in the workspace.</p>
+        </div>
+      </div>
+    </div>
+  ),
+}
+
+export const OverlayFiltered: Story = {
+  name: 'Overlay — Accept filter (.pdf, .csv)',
+  render: () => (
+    <div className="relative w-[600px] h-[380px]">
+      <AppContent />
+      <div className="absolute inset-0 z-10 flex items-center justify-center rounded-xl bg-background/80">
+        <div className="rounded-2xl border-2 border-dashed border-border bg-card p-12 text-center max-w-sm w-full mx-4">
+          <div className="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-2xl border border-border bg-[var(--accent-surface-soft)]">
+            <FileText className="h-8 w-8 text-[var(--accent-text)]" />
+          </div>
+          <h2 className="text-xl font-bold text-foreground">Drop CSV or PDF files</h2>
+          <p className="mt-2 text-sm text-muted-foreground">Only .pdf and .csv files will be accepted.</p>
+          <div className="mt-4 flex items-center justify-center gap-2">
+            <span className="rounded-full border border-border bg-[var(--accent-surface-soft)] px-2.5 py-1 text-[11px] font-mono text-[var(--accent-text)]">.pdf</span>
+            <span className="rounded-full border border-border bg-[var(--accent-surface-soft)] px-2.5 py-1 text-[11px] font-mono text-[var(--accent-text)]">.csv</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+}
+
+export const OverlayImages: Story = {
+  name: 'Overlay — Images',
+  render: () => (
+    <div className="relative w-[600px] h-[380px]">
+      <AppContent />
+      <div className="absolute inset-0 z-10 flex items-center justify-center rounded-xl bg-background/80">
+        <div className="rounded-2xl border-2 border-dashed border-emerald-500/40 bg-card p-12 text-center max-w-sm w-full mx-4">
+          <div className="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-2xl border border-emerald-500/30 bg-emerald-500/10">
+            <ImageIcon className="h-8 w-8 text-emerald-400" />
+          </div>
+          <h2 className="text-xl font-bold text-foreground">Drop images here</h2>
+          <p className="mt-2 text-sm text-muted-foreground">Accepts .png, .jpg, .webp, .gif</p>
+        </div>
+      </div>
+    </div>
+  ),
+}
+
+export const OverlayCustom: Story = {
+  name: 'Overlay — Custom content',
+  render: () => (
+    <div className="relative w-[600px] h-[380px]">
+      <AppContent />
+      <DropZone
+        onDrop={(files) => console.log('dropped', files)}
+        overlay={
+          <div className="fixed inset-0 z-[100] flex items-center justify-center pointer-events-none bg-background/80">
+            <div className="rounded-2xl border-2 border-dashed border-[var(--brand-emerald)]/50 bg-card p-14 text-center">
+              <p className="text-2xl font-bold text-[var(--brand-emerald)]">Custom overlay</p>
+              <p className="mt-2 text-muted-foreground text-sm">Replace default drop UI with anything.</p>
+            </div>
+          </div>
+        }
+      >
+        <div className="w-[600px] h-[380px] flex items-center justify-center rounded-xl border border-dashed border-border text-muted-foreground text-sm bg-muted">
+          Drag a real file here to trigger custom overlay
+        </div>
+      </DropZone>
+    </div>
+  ),
+}

package/src/primitives/drop-zone.tsx

@@ -0,0 +1,131 @@
+/**
+ * DropZone — full-window drag-and-drop file upload overlay.
+ *
+ * Detects when files are dragged over the browser window and shows a
+ * customizable overlay. Products provide the onDrop handler and optional
+ * custom overlay content.
+ *
+ * Usage:
+ *   <DropZone onDrop={files => uploadToR2(files)} accept=".pdf,.csv">
+ *     <YourApp />
+ *   </DropZone>
+ */
+
+import { useCallback, useRef, useState, type DragEvent, type ReactNode } from "react";
+import { cn } from "../lib/utils";
+
+export interface DropZoneProps {
+  /** Called with dropped files */
+  onDrop: (files: File[]) => void;
+  /** Accepted file types (e.g. ".pdf,.csv,.xlsx") */
+  accept?: string;
+  /** Whether drop zone is active */
+  disabled?: boolean;
+  /** Custom overlay content (replaces default) */
+  overlay?: ReactNode;
+  /** Overlay title */
+  title?: string;
+  /** Overlay description */
+  description?: string;
+  /** Overlay icon (Material Symbols name or ReactNode) */
+  icon?: string | ReactNode;
+  /** Children wrapped by the drop zone */
+  children: ReactNode;
+  className?: string;
+}
+
+export function DropZone({
+  onDrop,
+  accept,
+  disabled,
+  overlay,
+  title = "Drop files to upload",
+  description = "Your files will be securely stored in the workspace.",
+  icon = "cloud_upload",
+  children,
+  className,
+}: DropZoneProps) {
+  const [dragOver, setDragOver] = useState(false);
+  const counter = useRef(0);
+
+  const isAccepted = useCallback(
+    (file: File) => {
+      if (!accept) return true;
+      const extensions = accept.split(",").map((ext) => ext.trim().toLowerCase());
+      const fileName = file.name.toLowerCase();
+      return extensions.some((ext) => fileName.endsWith(ext));
+    },
+    [accept],
+  );
+
+  const handleDragEnter = useCallback(
+    (e: DragEvent) => {
+      e.preventDefault();
+      if (disabled) return;
+      counter.current++;
+      if (e.dataTransfer?.types.includes("Files")) setDragOver(true);
+    },
+    [disabled],
+  );
+
+  const handleDragLeave = useCallback((e: DragEvent) => {
+    e.preventDefault();
+    counter.current--;
+    if (counter.current === 0) setDragOver(false);
+  }, []);
+
+  const handleDragOver = useCallback(
+    (e: DragEvent) => {
+      e.preventDefault();
+      if (!disabled) e.dataTransfer.dropEffect = "copy";
+    },
+    [disabled],
+  );
+
+  const handleDrop = useCallback(
+    (e: DragEvent) => {
+      e.preventDefault();
+      counter.current = 0;
+      setDragOver(false);
+      if (disabled) return;
+
+      const allFiles = Array.from(e.dataTransfer?.files || []);
+      const accepted = accept ? allFiles.filter(isAccepted) : allFiles;
+      if (accepted.length > 0) onDrop(accepted);
+    },
+    [disabled, accept, isAccepted, onDrop],
+  );
+
+  return (
+    <div
+      onDragEnter={handleDragEnter}
+      onDragLeave={handleDragLeave}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+      className={cn("relative", className)}
+    >
+      {dragOver &&
+        (overlay || (
+          <div className="fixed inset-0 z-[100] flex items-center justify-center pointer-events-none bg-background">
+            <div className="rounded-2xl border-2 border-dashed border-border bg-card p-16 text-center shadow-[var(--shadow-dropdown)] max-w-lg mx-auto">
+              <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-2xl border border-border bg-[var(--accent-surface-soft)]">
+                {typeof icon === "string" ? (
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="h-10 w-10 text-[var(--accent-text)]">
+                    <title>Upload</title>
+                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                    <polyline points="17 8 12 3 7 8" />
+                    <line x1="12" x2="12" y1="3" y2="15" />
+                  </svg>
+                ) : (
+                  icon
+                )}
+              </div>
+              <h2 className="text-2xl font-bold text-foreground">{title}</h2>
+              <p className="mt-2 text-sm text-muted-foreground">{description}</p>
+            </div>
+          </div>
+        ))}
+      {children}
+    </div>
+  );
+}

package/src/primitives/dropdown-menu.stories.tsx

@@ -0,0 +1,122 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ChevronDown, MoreHorizontal, Settings, Terminal } from 'lucide-react'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from './dropdown-menu'
+
+const meta: Meta = {
+  title: 'Primitives/DropdownMenu',
+  parameters: { layout: 'centered', backgrounds: { default: 'dark' } },
+}
+
+export default meta
+type Story = StoryObj
+
+export const Default: Story = {
+  name: 'Default',
+  render: () => (
+    <DropdownMenu defaultOpen>
+      <DropdownMenuTrigger asChild>
+        <button className="flex items-center gap-1.5 rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground hover:bg-muted">
+          Options
+          <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-48">
+        <DropdownMenuLabel>Session</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <Terminal className="mr-2 h-4 w-4" />
+            Open terminal
+            <DropdownMenuShortcut>⌘T</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <Settings className="mr-2 h-4 w-4" />
+            Configure
+            <DropdownMenuShortcut>⌘,</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem className="text-red-400 focus:text-red-400">
+          Terminate session
+          <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+}
+
+export const SessionRowMenu: Story = {
+  name: 'Session Row Menu',
+  render: () => (
+    <DropdownMenu defaultOpen>
+      <DropdownMenuTrigger asChild>
+        <button className="flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground">
+          <MoreHorizontal className="h-4 w-4" />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-44" align="end">
+        <DropdownMenuItem>View logs</DropdownMenuItem>
+        <DropdownMenuItem>Open shell</DropdownMenuItem>
+        <DropdownMenuItem>Copy session ID</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>Restart</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem className="text-red-400 focus:text-red-400">
+          Terminate
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+}
+
+export const RegionSelector: Story = {
+  name: 'Region Selector',
+  render: () => (
+    <DropdownMenu defaultOpen>
+      <DropdownMenuTrigger asChild>
+        <button className="flex items-center gap-2 rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground hover:bg-muted">
+          <span className="h-2 w-2 rounded-full bg-green-400" />
+          us-east-1
+          <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-52">
+        <DropdownMenuLabel className="text-xs text-muted-foreground font-normal tracking-widest uppercase">
+          Regions
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <span className="mr-2 h-2 w-2 rounded-full bg-green-400" />
+            us-east-1
+            <DropdownMenuShortcut className="text-green-400">Online</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <span className="mr-2 h-2 w-2 rounded-full bg-green-400" />
+            us-west-2
+            <DropdownMenuShortcut className="text-green-400">Online</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <span className="mr-2 h-2 w-2 rounded-full bg-green-400" />
+            eu-central-1
+            <DropdownMenuShortcut className="text-green-400">Online</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem disabled>
+            <span className="mr-2 h-2 w-2 rounded-full bg-muted-foreground" />
+            ap-southeast-1
+            <DropdownMenuShortcut>Soon</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+}

package/src/primitives/dropdown-menu.tsx

@@ -0,0 +1,214 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none",
+      "focus:bg-accent data-[state=open]:bg-muted/50",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-card p-1 text-foreground shadow-[var(--shadow-card)]",
+      "data-[state=closed]:animate-out data-[state=open]:animate-in",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+      "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+      "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-card p-1 text-foreground shadow-[var(--shadow-card)]",
+        "data-[state=closed]:animate-out data-[state=open]:animate-in",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+        "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 text-sm outline-none transition-colors",
+      "focus:bg-muted/50 focus:text-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm outline-none transition-colors",
+      "focus:bg-muted/50 focus:text-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm outline-none transition-colors",
+      "focus:bg-muted/50 focus:text-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 font-semibold text-sm",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};

package/src/primitives/empty-state.stories.tsx

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Box, Clock, Search, Terminal, Zap } from 'lucide-react'
+import { EmptyState } from './empty-state'
+
+const meta: Meta<typeof EmptyState> = {
+  title: 'Primitives/EmptyState',
+  component: EmptyState,
+  parameters: { layout: 'centered', backgrounds: { default: 'dark' } },
+}
+
+export default meta
+type Story = StoryObj<typeof EmptyState>
+
+export const NoSessions: Story = {
+  name: 'No Sessions',
+  args: {
+    icon: <Terminal className="h-6 w-6" />,
+    title: 'No active sessions',
+    description:
+      'Provision a sandbox to run code in an isolated container. Sessions spin up in under a second.',
+    action: (
+      <button className="rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground hover:bg-primary/90">
+        New session
+      </button>
+    ),
+  },
+}
+
+export const NoResults: Story = {
+  name: 'No Search Results',
+  args: {
+    icon: <Search className="h-6 w-6" />,
+    title: 'No sessions found',
+    description: 'No sessions match your current filters. Try adjusting the status or date range.',
+    action: (
+      <button className="rounded-md border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-muted">
+        Clear filters
+      </button>
+    ),
+  },
+}
+
+export const NoLogs: Story = {
+  name: 'No Logs',
+  args: {
+    icon: <Clock className="h-6 w-6" />,
+    title: 'No logs yet',
+    description: 'Logs will appear here once the session starts executing commands.',
+  },
+}
+
+export const NoSnapshots: Story = {
+  name: 'No Snapshots',
+  args: {
+    icon: <Box className="h-6 w-6" />,
+    title: 'No snapshots',
+    description:
+      'Snapshots capture the full filesystem state of a session. Create one to resume from a known point.',
+    action: (
+      <button className="rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground hover:bg-primary/90">
+        Create snapshot
+      </button>
+    ),
+  },
+}
+
+export const BillingIdle: Story = {
+  name: 'Idle — No Usage',
+  args: {
+    icon: <Zap className="h-6 w-6" />,
+    title: 'No usage this period',
+    description: 'You have not run any sandbox sessions in the current billing cycle.',
+  },
+}
+
+export const TitleOnly: Story = {
+  name: 'Title Only',
+  args: {
+    title: 'Nothing here yet',
+  },
+}