@tangle-network/starter-foundry 0.1.0

package/registry/layers/capability/layout-dashboard/variants/sidebar/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/variants/topnav/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 — 4 columns on large screens (wider layout, no sidebar) */}
+      <div className="grid gap-4 sm:grid-cols-2 xl: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/topnav/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/topnav/nav-config.ts

@@ -0,0 +1,26 @@
+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 const navConfig: NavItem[] = [
+  { title: 'Dashboard', href: '/dashboard', icon: Home },
+  { title: 'Analytics', href: '/dashboard/analytics', icon: BarChart3 },
+  { title: 'Users', href: '/dashboard/users', icon: Users },
+  { title: 'Documents', href: '/dashboard/documents', icon: FileText },
+  { title: 'Notifications', href: '/dashboard/notifications', icon: Bell, badge: '3' },
+  { title: 'Settings', href: '/dashboard/settings', icon: Settings },
+  { title: 'Help', href: '/dashboard/help', icon: HelpCircle },
+]

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

@@ -0,0 +1,157 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Avatar } from '@/components/ui/avatar'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { navConfig } from '@/config/nav'
+import { Menu, Moon, Sun, Search, Bell, X } from 'lucide-react'
+
+interface TopnavLayoutProps {
+  children: React.ReactNode
+}
+
+export function TopnavLayout({ children }: TopnavLayoutProps) {
+  const [mobileOpen, setMobileOpen] = React.useState(false)
+  const [dark, setDark] = React.useState(false)
+
+  React.useEffect(() => {
+    document.documentElement.classList.toggle('dark', dark)
+  }, [dark])
+
+  React.useEffect(() => {
+    if (!mobileOpen) return
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setMobileOpen(false)
+    }
+    document.addEventListener('keydown', handler)
+    return () => document.removeEventListener('keydown', handler)
+  }, [mobileOpen])
+
+  return (
+    <div className="flex min-h-screen flex-col bg-background">
+      {/* Top navigation bar */}
+      <header className="sticky top-0 z-50 w-full border-b bg-card">
+        <div className="mx-auto flex h-14 max-w-screen-2xl items-center gap-4 px-4 lg:px-6">
+          {/* Logo */}
+          <a href="/dashboard" className="shrink-0 text-lg font-semibold">
+            {'{{headline}}'}
+          </a>
+
+          {/* Desktop nav */}
+          <nav className="hidden flex-1 items-center gap-1 md:flex">
+            {navConfig.map((item) => (
+              <a
+                key={item.href}
+                href={item.href}
+                className={cn(
+                  'relative flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors',
+                  'hover:bg-accent hover:text-accent-foreground',
+                  'text-muted-foreground'
+                )}
+              >
+                <item.icon className="h-4 w-4 shrink-0" />
+                <span>{item.title}</span>
+                {item.badge && (
+                  <Badge variant="secondary" className="ml-1 text-xs">
+                    {item.badge}
+                  </Badge>
+                )}
+              </a>
+            ))}
+          </nav>
+
+          {/* Spacer for mobile */}
+          <div className="flex-1 md:hidden" />
+
+          {/* Right actions */}
+          <div className="flex items-center gap-1">
+            <Button variant="ghost" size="icon">
+              <Search className="h-4 w-4" />
+            </Button>
+            <Button variant="ghost" size="icon" className="relative">
+              <Bell className="h-4 w-4" />
+              <span className="absolute right-1.5 top-1.5 h-2 w-2 rounded-full bg-red-500" />
+            </Button>
+            <Button variant="ghost" size="icon" onClick={() => setDark(!dark)}>
+              {dark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+            </Button>
+
+            {/* User menu */}
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="icon" className="ml-1">
+                  <Avatar className="h-7 w-7 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-xs font-medium">
+                    U
+                  </Avatar>
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-48">
+                <div className="px-2 py-1.5">
+                  <p className="text-sm font-medium">User</p>
+                  <p className="text-xs text-muted-foreground">user@example.com</p>
+                </div>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>Profile</DropdownMenuItem>
+                <DropdownMenuItem>Settings</DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>Sign out</DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            {/* Mobile hamburger */}
+            <Button
+              variant="ghost"
+              size="icon"
+              className="md:hidden"
+              onClick={() => setMobileOpen(!mobileOpen)}
+            >
+              {mobileOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+            </Button>
+          </div>
+        </div>
+
+        {/* Mobile dropdown nav */}
+        {mobileOpen && (
+          <div className="border-t bg-card md:hidden">
+            <nav className="mx-auto max-w-screen-2xl space-y-1 px-4 py-3">
+              {navConfig.map((item) => (
+                <a
+                  key={item.href}
+                  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'
+                  )}
+                  onClick={() => setMobileOpen(false)}
+                >
+                  <item.icon className="h-4 w-4 shrink-0" />
+                  <span>{item.title}</span>
+                  {item.badge && (
+                    <Badge variant="secondary" className="ml-auto text-xs">
+                      {item.badge}
+                    </Badge>
+                  )}
+                </a>
+              ))}
+            </nav>
+          </div>
+        )}
+      </header>
+
+      {/* Page content */}
+      <main className="flex-1 p-4 lg:p-6">
+        <div className="mx-auto max-w-screen-2xl">{children}</div>
+      </main>
+    </div>
+  )
+}

package/registry/layers/capability/layout-landing/files/features-section.tsx

@@ -0,0 +1,98 @@
+import { Zap, Shield, BarChart3, Layers, Globe, Lock } from 'lucide-react'
+
+const primaryFeatures = [
+  {
+    icon: Zap,
+    title: 'Lightning Fast',
+    description:
+      'Optimized for speed with edge-first architecture. Sub-second response times out of the box with automatic CDN distribution.',
+  },
+  {
+    icon: Shield,
+    title: 'Secure by Default',
+    description:
+      'Enterprise-grade security with end-to-end encryption, SOC 2 compliance, and role-based access controls baked into every layer.',
+  },
+  {
+    icon: BarChart3,
+    title: 'Built-in Analytics',
+    description:
+      'Real-time dashboards and custom reports so you always know what is working. Track every metric that matters to your business.',
+  },
+]
+
+const secondaryFeatures = [
+  { icon: Layers, label: 'Composable modules — pick only the pieces you need' },
+  { icon: Globe, label: 'Deploy to 30+ regions with a single command' },
+  { icon: Lock, label: 'SSO, SAML, and audit logs for compliance' },
+]
+
+export function FeaturesSection() {
+  return (
+    <section className="relative bg-muted/30 py-24 dark:bg-muted/10 sm:py-32">
+      <style>{`
+        @keyframes fadeInUp {
+          from {
+            opacity: 0;
+            transform: translateY(20px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+      `}</style>
+
+      <div className="mx-auto max-w-6xl px-6 lg:px-8">
+        <div className="mx-auto max-w-2xl text-center">
+          <h2 className="text-3xl font-semibold tracking-tight text-foreground sm:text-4xl">
+            Everything you need to ship
+          </h2>
+          <p className="mt-4 text-lg leading-relaxed text-muted-foreground">
+            A complete toolkit so your team can focus on building product, not plumbing.
+          </p>
+        </div>
+
+        <div className="mx-auto mt-16 grid max-w-5xl gap-6 lg:grid-cols-3">
+          {primaryFeatures.map((feature, i) => (
+            <div
+              key={feature.title}
+              className="relative rounded-xl border border-border/50 bg-card p-8 opacity-0 transition-all duration-200 hover:border-border hover:shadow-md [animation:fadeInUp_0.5s_ease_forwards]"
+              style={{ animationDelay: `${0.1 + i * 0.15}s` }}
+            >
+              {/* Gradient top border */}
+              <div
+                aria-hidden="true"
+                className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/50 to-transparent"
+              />
+              <div className="flex h-11 w-11 items-center justify-center rounded-lg bg-gradient-to-br from-primary/20 to-primary/5 text-primary">
+                <feature.icon className="h-5 w-5" />
+              </div>
+              <h3 className="mt-5 text-lg font-semibold text-foreground">
+                {feature.title}
+              </h3>
+              <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
+                {feature.description}
+              </p>
+            </div>
+          ))}
+        </div>
+
+        <div className="mx-auto mt-12 max-w-3xl border-t pt-10">
+          <div className="grid gap-6 sm:grid-cols-3">
+            {secondaryFeatures.map((feature) => (
+              <div key={feature.label} className="flex items-start gap-3">
+                <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-primary/20 to-primary/5 text-primary">
+                  <feature.icon className="h-4 w-4" />
+                </div>
+                <p className="text-sm leading-snug text-muted-foreground">
+                  {feature.label}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}