@tangle-network/starter-foundry 0.1.0

package/registry/layers/capability/layout-dashboard/files/dashboard-page.tsx

@@ -0,0 +1,113 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Separator } from "@/components/ui/separator"
+import { ArrowUpRight, ArrowDownRight, TrendingUp, Users, DollarSign, Activity, MoreHorizontal } from "lucide-react"
+
+const kpis = [
+  { label: "Total Revenue", value: "$45,231.89", change: "+20.1%", trend: "up", icon: DollarSign },
+  { label: "Active Users", value: "2,350", change: "+180.1%", trend: "up", icon: Users },
+  { label: "Conversion Rate", value: "3.2%", change: "-4.5%", trend: "down", icon: TrendingUp },
+  { label: "Active Sessions", value: "573", change: "+12.4%", trend: "up", icon: Activity },
+]
+
+const recentActivity = [
+  { user: "Sarah Chen", action: "Created new project", time: "2 min ago" },
+  { user: "Marcus Johnson", action: "Completed onboarding", time: "5 min ago" },
+  { user: "Emily Rodriguez", action: "Upgraded to Pro", time: "12 min ago" },
+  { user: "David Kim", action: "Invited 3 team members", time: "24 min ago" },
+  { user: "Lisa Wang", action: "Published API documentation", time: "1 hour ago" },
+]
+
+export default function DashboardPage() {
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
+          <p className="text-muted-foreground">Overview of your project metrics and recent activity.</p>
+        </div>
+        <Button>
+          Download Report
+          <ArrowUpRight className="ml-2 h-4 w-4" />
+        </Button>
+      </div>
+
+      {/* KPI Cards */}
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        {kpis.map((kpi) => (
+          <Card key={kpi.label}>
+            <CardHeader className="flex flex-row items-center justify-between pb-2">
+              <CardDescription className="text-sm font-medium">{kpi.label}</CardDescription>
+              <kpi.icon className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">{kpi.value}</div>
+              <div className="flex items-center gap-1 text-xs">
+                {kpi.trend === "up" ? (
+                  <ArrowUpRight className="h-3 w-3 text-emerald-500" />
+                ) : (
+                  <ArrowDownRight className="h-3 w-3 text-red-500" />
+                )}
+                <span className={kpi.trend === "up" ? "text-emerald-500" : "text-red-500"}>
+                  {kpi.change}
+                </span>
+                <span className="text-muted-foreground">from last month</span>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-7">
+        {/* Chart placeholder */}
+        <Card className="lg:col-span-4">
+          <CardHeader>
+            <CardTitle>Revenue Over Time</CardTitle>
+            <CardDescription>Monthly revenue for the current year</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="flex h-64 items-center justify-center rounded-lg border border-dashed bg-muted/50">
+              <div className="text-center text-muted-foreground">
+                <TrendingUp className="mx-auto mb-2 h-8 w-8" />
+                <p className="text-sm font-medium">Chart Area</p>
+                <p className="text-xs">Add recharts, tremor, or nivo for interactive charts</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Recent Activity */}
+        <Card className="lg:col-span-3">
+          <CardHeader>
+            <div className="flex items-center justify-between">
+              <CardTitle>Recent Activity</CardTitle>
+              <Button variant="ghost" size="icon">
+                <MoreHorizontal className="h-4 w-4" />
+              </Button>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              {recentActivity.map((item, i) => (
+                <div key={i}>
+                  <div className="flex items-center gap-3">
+                    <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-medium text-primary">
+                      {item.user.split(" ").map((n) => n[0]).join("")}
+                    </div>
+                    <div className="flex-1 truncate">
+                      <p className="text-sm font-medium">{item.user}</p>
+                      <p className="text-xs text-muted-foreground">{item.action}</p>
+                    </div>
+                    <span className="text-xs text-muted-foreground whitespace-nowrap">{item.time}</span>
+                  </div>
+                  {i < recentActivity.length - 1 && <Separator className="mt-4" />}
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}

package/registry/layers/capability/layout-dashboard/files/media-manifest.json

@@ -0,0 +1,34 @@
+{
+  "slots": [
+    {
+      "id": "user-avatar",
+      "path": "public/images/avatar-placeholder.png",
+      "width": 96,
+      "height": 96,
+      "purpose": "Default user avatar in sidebar and header",
+      "prompt": "Neutral gray avatar silhouette on transparent background",
+      "fallback": "initials",
+      "usedIn": "src/components/layout/sidebar-layout.tsx"
+    },
+    {
+      "id": "logo-icon",
+      "path": "public/images/logo-icon.svg",
+      "width": 32,
+      "height": 32,
+      "purpose": "Small logo icon for collapsed sidebar",
+      "prompt": "Simple geometric icon in primary brand color, works at 32x32",
+      "fallback": "text",
+      "usedIn": "src/components/layout/sidebar-layout.tsx"
+    },
+    {
+      "id": "empty-state",
+      "path": "public/images/empty-state.svg",
+      "width": 240,
+      "height": 200,
+      "purpose": "Illustration shown when dashboard has no data",
+      "prompt": "Minimal line illustration of empty charts and graphs, muted colors",
+      "fallback": "icon",
+      "usedIn": "src/app/dashboard/page.tsx"
+    }
+  ]
+}

package/registry/layers/capability/layout-dashboard/files/nav-config.ts

@@ -0,0 +1,46 @@
+import {
+  BarChart3,
+  Home,
+  Settings,
+  Users,
+  FileText,
+  Bell,
+  HelpCircle,
+} from "lucide-react"
+
+export interface NavItem {
+  title: string
+  href: string
+  icon: React.ComponentType<{ className?: string }>
+  badge?: string
+}
+
+export interface NavSection {
+  label: string
+  items: NavItem[]
+}
+
+export const navConfig: NavSection[] = [
+  {
+    label: "Overview",
+    items: [
+      { title: "Dashboard", href: "/dashboard", icon: Home },
+      { title: "Analytics", href: "/dashboard/analytics", icon: BarChart3 },
+    ],
+  },
+  {
+    label: "Management",
+    items: [
+      { title: "Users", href: "/dashboard/users", icon: Users },
+      { title: "Documents", href: "/dashboard/documents", icon: FileText },
+      { title: "Notifications", href: "/dashboard/notifications", icon: Bell, badge: "3" },
+    ],
+  },
+  {
+    label: "System",
+    items: [
+      { title: "Settings", href: "/dashboard/settings", icon: Settings },
+      { title: "Help", href: "/dashboard/help", icon: HelpCircle },
+    ],
+  },
+]

package/registry/layers/capability/layout-dashboard/files/sidebar-layout.tsx

@@ -0,0 +1,149 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Separator } from "@/components/ui/separator"
+import { Badge } from "@/components/ui/badge"
+import { Avatar } from "@/components/ui/avatar"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
+import { navConfig } from "@/config/nav"
+import { Menu, PanelLeftClose, PanelLeft, Moon, Sun, Search, Bell } from "lucide-react"
+
+interface SidebarLayoutProps {
+  children: React.ReactNode
+}
+
+export function SidebarLayout({ children }: SidebarLayoutProps) {
+  const [collapsed, setCollapsed] = React.useState(false)
+  const [mobileOpen, setMobileOpen] = React.useState(false)
+  const [dark, setDark] = React.useState(false)
+
+  React.useEffect(() => {
+    document.documentElement.classList.toggle("dark", dark)
+  }, [dark])
+
+  const sidebarContent = (
+    <div className="flex h-full flex-col">
+      <div className="flex h-14 items-center border-b px-4">
+        {!collapsed && <span className="text-lg font-semibold">{{headline}}</span>}
+        <Button
+          variant="ghost"
+          size="icon"
+          className={cn("ml-auto hidden lg:flex", collapsed && "mx-auto")}
+          onClick={() => setCollapsed(!collapsed)}
+        >
+          {collapsed ? <PanelLeft className="h-4 w-4" /> : <PanelLeftClose className="h-4 w-4" />}
+        </Button>
+      </div>
+
+      <ScrollArea className="flex-1 px-2 py-4">
+        {navConfig.map((section, i) => (
+          <div key={section.label} className={cn(i > 0 && "mt-4")}>
+            {!collapsed && (
+              <p className="mb-2 px-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                {section.label}
+              </p>
+            )}
+            <div className="space-y-1">
+              {section.items.map((item) => (
+                <TooltipProvider key={item.href} delayDuration={0}>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <a
+                        href={item.href}
+                        className={cn(
+                          "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
+                          "hover:bg-accent hover:text-accent-foreground",
+                          "text-muted-foreground",
+                          collapsed && "justify-center px-2"
+                        )}
+                      >
+                        <item.icon className="h-4 w-4 shrink-0" />
+                        {!collapsed && <span className="truncate">{item.title}</span>}
+                        {!collapsed && item.badge && (
+                          <Badge variant="secondary" className="ml-auto text-xs">
+                            {item.badge}
+                          </Badge>
+                        )}
+                      </a>
+                    </TooltipTrigger>
+                    {collapsed && <TooltipContent side="right">{item.title}</TooltipContent>}
+                  </Tooltip>
+                </TooltipProvider>
+              ))}
+            </div>
+          </div>
+        ))}
+      </ScrollArea>
+
+      <Separator />
+      <div className={cn("flex items-center gap-3 p-4", collapsed && "justify-center")}>
+        <Avatar className="h-8 w-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-sm font-medium">
+          U
+        </Avatar>
+        {!collapsed && (
+          <div className="flex-1 truncate">
+            <p className="text-sm font-medium">User</p>
+            <p className="text-xs text-muted-foreground">user@example.com</p>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+
+  return (
+    <div className="flex h-screen bg-background">
+      {/* Desktop sidebar */}
+      <aside
+        className={cn(
+          "hidden lg:flex flex-col border-r bg-card transition-all duration-200",
+          collapsed ? "w-16" : "w-64"
+        )}
+      >
+        {sidebarContent}
+      </aside>
+
+      {/* Mobile sidebar */}
+      <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
+        <SheetContent side="left" className="w-64 p-0">
+          {sidebarContent}
+        </SheetContent>
+      </Sheet>
+
+      {/* Main content */}
+      <div className="flex flex-1 flex-col overflow-hidden">
+        {/* Header */}
+        <header className="flex h-14 items-center gap-4 border-b bg-card px-4 lg:px-6">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="lg:hidden"
+            onClick={() => setMobileOpen(true)}
+          >
+            <Menu className="h-5 w-5" />
+          </Button>
+
+          <div className="flex-1" />
+
+          <Button variant="ghost" size="icon">
+            <Search className="h-4 w-4" />
+          </Button>
+          <Button variant="ghost" size="icon">
+            <Bell className="h-4 w-4" />
+          </Button>
+          <Button variant="ghost" size="icon" onClick={() => setDark(!dark)}>
+            {dark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+          </Button>
+        </header>
+
+        {/* Page content */}
+        <main className="flex-1 overflow-y-auto p-4 lg:p-6">
+          <div className="mx-auto max-w-7xl">{children}</div>
+        </main>
+      </div>
+    </div>
+  )
+}

package/registry/layers/capability/layout-dashboard/manifest.json

@@ -0,0 +1,33 @@
+{
+  "id": "layout-dashboard",
+  "description": "Pre-built dashboard layout with collapsible sidebar, sticky header, chart cards, and activity feed.",
+  "appliesTo": ["nextjs-ts", "react-vite-ts", "fullstack-ts", "remix-ts", "sveltekit-ts", "vue-ts", "angular-ts"],
+  "files": [
+    { "source": "files/sidebar-layout.tsx", "target": "src/components/layout/sidebar-layout.tsx" },
+    { "source": "files/dashboard-page.tsx", "target": "app/dashboard/page.tsx" },
+    { "source": "files/dashboard-page.tsx", "target": "src/App.tsx" },
+    { "source": "files/nav-config.ts", "target": "src/config/nav.ts" },
+    { "source": "files/media-manifest.json", "target": "media-manifest.json" }
+  ],
+  "contextHints": {
+    "extensionPoints": [
+      "src/config/nav.ts",
+      "src/components/layout/"
+    ]
+  },
+  "variants": ["sidebar", "topnav"],
+  "keywords": ["dashboard", "analytics", "metrics", "admin panel", "control panel", "overview", "stats", "sidebar layout", "dashboard layout", "admin layout", "collapsible sidebar", "navigation sidebar", "admin", "sidebar", "navigation"],
+  "capabilityRequires": ["tailwind"],
+  "buildHints": {
+    "pages": ["/dashboard", "/dashboard/analytics", "/dashboard/settings"],
+    "components": ["SidebarLayout", "ChartCard", "KPICard", "RecentActivity", "NavConfig", "Sidebar", "SidebarNav", "Header", "BreadcrumbTrail", "ThemeToggle", "UserMenu", "CommandPalette"],
+    "architectureNotes": [
+      "Dashboard layout is pre-built. Customize nav items in src/config/nav.ts.",
+      "Replace chart card placeholder data with real data sources.",
+      "Sidebar collapses to icon-only on mobile (Sheet/Drawer pattern).",
+      "Add new dashboard sections by extending the grid in dashboard-page.tsx.",
+      "Collapsible sidebar with mobile sheet drawer",
+      "Sticky header with breadcrumbs"
+    ]
+  }
+}

package/registry/layers/capability/layout-dashboard/variants/sidebar/dashboard-page.tsx

@@ -0,0 +1,113 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Separator } from "@/components/ui/separator"
+import { ArrowUpRight, ArrowDownRight, TrendingUp, Users, DollarSign, Activity, MoreHorizontal } from "lucide-react"
+
+const kpis = [
+  { label: "Total Revenue", value: "$45,231.89", change: "+20.1%", trend: "up", icon: DollarSign },
+  { label: "Active Users", value: "2,350", change: "+180.1%", trend: "up", icon: Users },
+  { label: "Conversion Rate", value: "3.2%", change: "-4.5%", trend: "down", icon: TrendingUp },
+  { label: "Active Sessions", value: "573", change: "+12.4%", trend: "up", icon: Activity },
+]
+
+const recentActivity = [
+  { user: "Sarah Chen", action: "Created new project", time: "2 min ago" },
+  { user: "Marcus Johnson", action: "Completed onboarding", time: "5 min ago" },
+  { user: "Emily Rodriguez", action: "Upgraded to Pro", time: "12 min ago" },
+  { user: "David Kim", action: "Invited 3 team members", time: "24 min ago" },
+  { user: "Lisa Wang", action: "Published API documentation", time: "1 hour ago" },
+]
+
+export default function DashboardPage() {
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
+          <p className="text-muted-foreground">Overview of your project metrics and recent activity.</p>
+        </div>
+        <Button>
+          Download Report
+          <ArrowUpRight className="ml-2 h-4 w-4" />
+        </Button>
+      </div>
+
+      {/* KPI Cards */}
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        {kpis.map((kpi) => (
+          <Card key={kpi.label}>
+            <CardHeader className="flex flex-row items-center justify-between pb-2">
+              <CardDescription className="text-sm font-medium">{kpi.label}</CardDescription>
+              <kpi.icon className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">{kpi.value}</div>
+              <div className="flex items-center gap-1 text-xs">
+                {kpi.trend === "up" ? (
+                  <ArrowUpRight className="h-3 w-3 text-emerald-500" />
+                ) : (
+                  <ArrowDownRight className="h-3 w-3 text-red-500" />
+                )}
+                <span className={kpi.trend === "up" ? "text-emerald-500" : "text-red-500"}>
+                  {kpi.change}
+                </span>
+                <span className="text-muted-foreground">from last month</span>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-7">
+        {/* Chart placeholder */}
+        <Card className="lg:col-span-4">
+          <CardHeader>
+            <CardTitle>Revenue Over Time</CardTitle>
+            <CardDescription>Monthly revenue for the current year</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="flex h-64 items-center justify-center rounded-lg border border-dashed bg-muted/50">
+              <div className="text-center text-muted-foreground">
+                <TrendingUp className="mx-auto mb-2 h-8 w-8" />
+                <p className="text-sm font-medium">Chart Area</p>
+                <p className="text-xs">Add recharts, tremor, or nivo for interactive charts</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Recent Activity */}
+        <Card className="lg:col-span-3">
+          <CardHeader>
+            <div className="flex items-center justify-between">
+              <CardTitle>Recent Activity</CardTitle>
+              <Button variant="ghost" size="icon">
+                <MoreHorizontal className="h-4 w-4" />
+              </Button>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              {recentActivity.map((item, i) => (
+                <div key={i}>
+                  <div className="flex items-center gap-3">
+                    <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-medium text-primary">
+                      {item.user.split(" ").map((n) => n[0]).join("")}
+                    </div>
+                    <div className="flex-1 truncate">
+                      <p className="text-sm font-medium">{item.user}</p>
+                      <p className="text-xs text-muted-foreground">{item.action}</p>
+                    </div>
+                    <span className="text-xs text-muted-foreground whitespace-nowrap">{item.time}</span>
+                  </div>
+                  {i < recentActivity.length - 1 && <Separator className="mt-4" />}
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}

package/registry/layers/capability/layout-dashboard/variants/sidebar/media-manifest.json

@@ -0,0 +1,34 @@
+{
+  "slots": [
+    {
+      "id": "user-avatar",
+      "path": "public/images/avatar-placeholder.png",
+      "width": 96,
+      "height": 96,
+      "purpose": "Default user avatar in sidebar and header",
+      "prompt": "Neutral gray avatar silhouette on transparent background",
+      "fallback": "initials",
+      "usedIn": "src/components/layout/sidebar-layout.tsx"
+    },
+    {
+      "id": "logo-icon",
+      "path": "public/images/logo-icon.svg",
+      "width": 32,
+      "height": 32,
+      "purpose": "Small logo icon for collapsed sidebar",
+      "prompt": "Simple geometric icon in primary brand color, works at 32x32",
+      "fallback": "text",
+      "usedIn": "src/components/layout/sidebar-layout.tsx"
+    },
+    {
+      "id": "empty-state",
+      "path": "public/images/empty-state.svg",
+      "width": 240,
+      "height": 200,
+      "purpose": "Illustration shown when dashboard has no data",
+      "prompt": "Minimal line illustration of empty charts and graphs, muted colors",
+      "fallback": "icon",
+      "usedIn": "src/app/dashboard/page.tsx"
+    }
+  ]
+}

package/registry/layers/capability/layout-dashboard/variants/sidebar/nav-config.ts

@@ -0,0 +1,46 @@
+import {
+  BarChart3,
+  Home,
+  Settings,
+  Users,
+  FileText,
+  Bell,
+  HelpCircle,
+} from "lucide-react"
+
+export interface NavItem {
+  title: string
+  href: string
+  icon: React.ComponentType<{ className?: string }>
+  badge?: string
+}
+
+export interface NavSection {
+  label: string
+  items: NavItem[]
+}
+
+export const navConfig: NavSection[] = [
+  {
+    label: "Overview",
+    items: [
+      { title: "Dashboard", href: "/dashboard", icon: Home },
+      { title: "Analytics", href: "/dashboard/analytics", icon: BarChart3 },
+    ],
+  },
+  {
+    label: "Management",
+    items: [
+      { title: "Users", href: "/dashboard/users", icon: Users },
+      { title: "Documents", href: "/dashboard/documents", icon: FileText },
+      { title: "Notifications", href: "/dashboard/notifications", icon: Bell, badge: "3" },
+    ],
+  },
+  {
+    label: "System",
+    items: [
+      { title: "Settings", href: "/dashboard/settings", icon: Settings },
+      { title: "Help", href: "/dashboard/help", icon: HelpCircle },
+    ],
+  },
+]