@tangle-network/starter-foundry 0.1.0

package/registry/layers/capability/layout-landing/variants/minimal-clean/media-manifest.json

@@ -0,0 +1,44 @@
+{
+  "slots": [
+    {
+      "id": "hero-product",
+      "path": "public/images/hero-product.png",
+      "width": 1200,
+      "height": 800,
+      "purpose": "Product screenshot shown in the hero section browser mockup frame",
+      "prompt": "Clean SaaS dashboard screenshot showing analytics charts, user activity feed, and sidebar navigation on white background",
+      "fallback": "gradient",
+      "usedIn": "src/components/landing/hero-section.tsx"
+    },
+    {
+      "id": "og-image",
+      "path": "public/og-image.png",
+      "width": 1200,
+      "height": 630,
+      "purpose": "Open Graph social sharing image",
+      "prompt": "Marketing banner with product name, tagline, and abstract gradient background",
+      "fallback": "none",
+      "usedIn": "app/layout.tsx"
+    },
+    {
+      "id": "favicon",
+      "path": "public/favicon.svg",
+      "width": 32,
+      "height": 32,
+      "purpose": "Browser tab icon",
+      "prompt": "Simple geometric logo mark in primary brand color on transparent background",
+      "fallback": "none",
+      "usedIn": "index.html"
+    },
+    {
+      "id": "logo-wordmark",
+      "path": "public/images/logo.svg",
+      "width": 120,
+      "height": 32,
+      "purpose": "Logo wordmark in the navigation header",
+      "prompt": "Clean sans-serif wordmark logo for a SaaS product",
+      "fallback": "text",
+      "usedIn": "src/components/landing/landing-page.tsx"
+    }
+  ]
+}

package/registry/layers/capability/layout-landing/variants/minimal-clean/pricing-section.tsx

@@ -0,0 +1,162 @@
+'use client'
+
+import * as React from 'react'
+import { Button } from '@/components/ui/button'
+import { Check } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+const tiers = [
+  {
+    name: 'Free',
+    price: { monthly: '$0', yearly: '$0' },
+    description: 'For side projects and experimentation.',
+    features: [
+      'Up to 3 projects',
+      '1 GB storage',
+      'Community support',
+      'Basic analytics',
+    ],
+    cta: 'Get Started',
+    highlighted: false,
+  },
+  {
+    name: 'Pro',
+    price: { monthly: '$29', yearly: '$24' },
+    description: 'For growing teams that need more power.',
+    features: [
+      'Unlimited projects',
+      '100 GB storage',
+      'Priority support',
+      'Advanced analytics',
+      'Custom domains',
+      'Team roles',
+    ],
+    cta: 'Start Free Trial',
+    highlighted: true,
+  },
+  {
+    name: 'Enterprise',
+    price: { monthly: 'Custom', yearly: 'Custom' },
+    description: 'For organizations with advanced needs.',
+    features: [
+      'Everything in Pro',
+      'Unlimited storage',
+      'Dedicated support engineer',
+      'SSO / SAML',
+      'SLA guarantees',
+      'Audit logs',
+    ],
+    cta: 'Contact Sales',
+    highlighted: false,
+  },
+]
+
+export function PricingSection() {
+  const [yearly, setYearly] = React.useState(false)
+
+  return (
+    <section className="py-24 sm:py-32">
+      <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-light tracking-tight text-foreground sm:text-4xl">
+            Simple, transparent pricing
+          </h2>
+          <p className="mt-4 text-lg font-light leading-relaxed text-muted-foreground">
+            Choose your plan. Start free, upgrade when you are ready.
+          </p>
+
+          <div className="mt-8 inline-flex items-center gap-3 text-sm">
+            <button
+              type="button"
+              onClick={() => setYearly(false)}
+              className={cn(
+                'pb-1 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',
+                !yearly ? 'border-b-2 border-foreground text-foreground' : 'text-muted-foreground hover:text-foreground'
+              )}
+            >
+              Monthly
+            </button>
+            <span className="text-muted-foreground/40">/</span>
+            <button
+              type="button"
+              onClick={() => setYearly(true)}
+              className={cn(
+                'inline-flex items-center gap-2 pb-1 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',
+                yearly ? 'border-b-2 border-foreground text-foreground' : 'text-muted-foreground hover:text-foreground'
+              )}
+            >
+              Yearly
+              {!yearly && <span className="text-xs font-medium text-primary">Save 20%</span>}
+            </button>
+          </div>
+        </div>
+
+        <div className="mx-auto mt-16 grid max-w-5xl gap-8 lg:grid-cols-3">
+          {tiers.map((tier) => (
+            <div
+              key={tier.name}
+              className={cn(
+                'flex flex-col rounded-lg p-8',
+                tier.highlighted
+                  ? 'relative bg-muted/40 ring-1 ring-border dark:bg-muted/15'
+                  : 'bg-transparent'
+              )}
+            >
+              {tier.highlighted && (
+                <div className="absolute -top-4 left-1/2 -translate-x-1/2 rounded-full bg-foreground px-4 py-1 text-xs font-medium text-background">
+                  Most Popular
+                </div>
+              )}
+
+              <div className="space-y-8">
+                <div>
+                  <h3 className="text-sm font-medium text-foreground">{tier.name}</h3>
+                  <p className="mt-1 text-sm font-light text-muted-foreground">
+                    {tier.description}
+                  </p>
+                </div>
+
+                <div className="flex items-baseline gap-1">
+                  <span className="text-4xl font-light tracking-tight text-foreground">
+                    {yearly ? tier.price.yearly : tier.price.monthly}
+                  </span>
+                  {tier.price.monthly !== 'Custom' && (
+                    <span className="text-sm text-muted-foreground">/mo</span>
+                  )}
+                </div>
+
+                <div className="border-t border-border/50" />
+
+                <ul className="flex-1 space-y-4">
+                  {tier.features.map((feature) => (
+                    <li key={feature} className="flex items-start gap-2.5 text-sm">
+                      <Check className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
+                      <span className="font-light text-muted-foreground">{feature}</span>
+                    </li>
+                  ))}
+                </ul>
+
+                <div>
+                  <Button
+                    variant={tier.highlighted ? 'default' : 'outline'}
+                    className={cn(
+                      'h-12 w-full rounded-lg font-medium transition-all focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',
+                      tier.highlighted && 'shadow-lg shadow-primary/25'
+                    )}
+                  >
+                    {tier.cta}
+                  </Button>
+                  {tier.name === 'Free' && (
+                    <p className="mt-3 text-center text-xs text-muted-foreground">
+                      No credit card required
+                    </p>
+                  )}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,165 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Separator } from "@/components/ui/separator"
+import { Badge } from "@/components/ui/badge"
+import { Avatar } from "@/components/ui/avatar"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Switch } from "@/components/ui/switch"
+import { User, CreditCard, Users, Mail, Shield, Bell } from "lucide-react"
+
+const teamMembers = [
+  { name: "You", email: "you@example.com", role: "Owner", initials: "YO" },
+  { name: "Sarah Chen", email: "sarah@example.com", role: "Admin", initials: "SC" },
+  { name: "Marcus Johnson", email: "marcus@example.com", role: "Member", initials: "MJ" },
+]
+
+export default function SettingsPage() {
+  const [activeTab, setActiveTab] = React.useState("profile")
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">Settings</h1>
+        <p className="text-muted-foreground">Manage your account, billing, and team preferences.</p>
+      </div>
+
+      <Tabs value={activeTab} onValueChange={setActiveTab}>
+        <TabsList>
+          <TabsTrigger value="profile" className="gap-2">
+            <User className="h-4 w-4" /> Profile
+          </TabsTrigger>
+          <TabsTrigger value="billing" className="gap-2">
+            <CreditCard className="h-4 w-4" /> Billing
+          </TabsTrigger>
+          <TabsTrigger value="team" className="gap-2">
+            <Users className="h-4 w-4" /> Team
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="profile" className="mt-6 space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Profile Information</CardTitle>
+              <CardDescription>Update your name, email, and profile photo.</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="flex items-center gap-4">
+                <Avatar className="h-16 w-16 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-xl font-medium">
+                  U
+                </Avatar>
+                <Button variant="outline" size="sm">Change Photo</Button>
+              </div>
+              <Separator />
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div className="space-y-2">
+                  <Label htmlFor="name">Full Name</Label>
+                  <Input id="name" defaultValue="John Doe" />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="settings-email">Email</Label>
+                  <Input id="settings-email" type="email" defaultValue="john@example.com" />
+                </div>
+              </div>
+              <Button>Save Changes</Button>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Notifications</CardTitle>
+              <CardDescription>Choose what you get notified about.</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {[
+                { label: "Email notifications", description: "Receive emails about account activity", icon: Mail },
+                { label: "Security alerts", description: "Get notified about security events", icon: Shield },
+                { label: "Product updates", description: "Hear about new features and improvements", icon: Bell },
+              ].map((item) => (
+                <div key={item.label} className="flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    <item.icon className="h-4 w-4 text-muted-foreground" />
+                    <div>
+                      <p className="text-sm font-medium">{item.label}</p>
+                      <p className="text-xs text-muted-foreground">{item.description}</p>
+                    </div>
+                  </div>
+                  <Switch defaultChecked />
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="billing" className="mt-6 space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Current Plan</CardTitle>
+              <CardDescription>You are currently on the Pro plan.</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="flex items-center justify-between rounded-lg border p-4">
+                <div>
+                  <div className="flex items-center gap-2">
+                    <span className="text-lg font-bold">Pro Plan</span>
+                    <Badge>Current</Badge>
+                  </div>
+                  <p className="text-sm text-muted-foreground">$29/month · Billed monthly</p>
+                </div>
+                <Button variant="outline">Change Plan</Button>
+              </div>
+              <Separator />
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium">Next billing date</p>
+                  <p className="text-sm text-muted-foreground">April 15, 2026</p>
+                </div>
+                <Button variant="ghost" size="sm" className="text-destructive hover:text-destructive">
+                  Cancel Subscription
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="team" className="mt-6 space-y-6">
+          <Card>
+            <CardHeader>
+              <div className="flex items-center justify-between">
+                <div>
+                  <CardTitle>Team Members</CardTitle>
+                  <CardDescription>Manage who has access to this workspace.</CardDescription>
+                </div>
+                <Button size="sm">Invite Member</Button>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                {teamMembers.map((member) => (
+                  <div key={member.email} className="flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                      <Avatar className="h-8 w-8 rounded-full bg-primary/10 text-primary flex items-center justify-center text-xs font-medium">
+                        {member.initials}
+                      </Avatar>
+                      <div>
+                        <p className="text-sm font-medium">{member.name}</p>
+                        <p className="text-xs text-muted-foreground">{member.email}</p>
+                      </div>
+                    </div>
+                    <Badge variant={member.role === "Owner" ? "default" : "secondary"}>
+                      {member.role}
+                    </Badge>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}

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

@@ -0,0 +1,45 @@
+{
+  "id": "layout-settings",
+  "description": "Pre-built settings page with tabbed navigation for profile, billing, and team management.",
+  "appliesTo": [
+    "nextjs-ts",
+    "react-vite-ts",
+    "fullstack-ts",
+    "remix-ts"
+  ],
+  "files": [
+    {
+      "source": "files/settings-page.tsx",
+      "target": "app/settings/page.tsx"
+    }
+  ],
+  "keywords": [
+    "settings page",
+    "profile settings",
+    "account settings",
+    "preferences",
+    "settings",
+    "billing settings",
+    "team settings",
+    "preferences page"
+  ],
+  "buildHints": {
+    "pages": [
+      "/settings",
+      "/settings/billing",
+      "/settings/team"
+    ],
+    "components": [
+      "SettingsPage",
+      "ProfileForm",
+      "BillingSection",
+      "TeamSection"
+    ],
+    "architectureNotes": [
+      "Settings page is pre-built with tabs for Profile, Billing, and Team.",
+      "Connect form submissions to your API or auth provider.",
+      "Billing tab shows plan info — connect to Stripe or your billing provider.",
+      "Team tab has member list and invite form — connect to your team management API."
+    ]
+  }
+}

package/registry/layers/capability/logging/files/error-handler.ts

@@ -0,0 +1,35 @@
+import { createLogger } from './logger'
+
+const logger = createLogger('error-handler')
+const isProduction = () => process.env.NODE_ENV === 'production'
+
+interface ErrorResponseBody {
+  error: string
+  requestId?: string
+  status: number
+}
+
+export function errorHandler(
+  err: Error & { statusCode?: number; status?: number },
+  req: { headers?: Record<string, string | string[] | undefined> } & Record<string, unknown>,
+  res: { statusCode: number; json: (body: ErrorResponseBody) => void },
+  _next: () => void,
+) {
+  const status = err.statusCode ?? err.status ?? 500
+  const requestId =
+    (req as any).requestId ??
+    (req.headers?.['x-request-id'] as string | undefined)
+
+  logger.error(err.message, {
+    stack: err.stack,
+    status,
+    ...(requestId && { requestId }),
+  })
+
+  res.statusCode = status
+  res.json({
+    error: isProduction() && status >= 500 ? 'Internal Server Error' : err.message,
+    ...(requestId && { requestId }),
+    status,
+  })
+}

package/registry/layers/capability/logging/files/logger.ts

@@ -0,0 +1,78 @@
+import { randomUUID } from 'node:crypto'
+
+type LogLevel = 'debug' | 'info' | 'warn' | 'error'
+
+interface LogEntry {
+  level: LogLevel
+  message: string
+  timestamp: string
+  service: string
+  requestId?: string
+  duration?: number
+  meta?: Record<string, unknown>
+}
+
+interface Logger {
+  debug(message: string, meta?: Record<string, unknown>): void
+  info(message: string, meta?: Record<string, unknown>): void
+  warn(message: string, meta?: Record<string, unknown>): void
+  error(message: string, meta?: Record<string, unknown>): void
+  withRequestId(id: string): Logger
+}
+
+const LEVEL_PRIORITY: Record<LogLevel, number> = {
+  debug: 0,
+  info: 1,
+  warn: 2,
+  error: 3,
+}
+
+const isProduction = () => process.env.NODE_ENV === 'production'
+
+function formatEntry(entry: LogEntry): string {
+  if (isProduction()) {
+    return JSON.stringify(entry)
+  }
+  const prefix = entry.requestId ? ` [${entry.requestId}]` : ''
+  const dur = entry.duration !== undefined ? ` ${entry.duration}ms` : ''
+  const meta = entry.meta ? ` ${JSON.stringify(entry.meta)}` : ''
+  return `${entry.timestamp} ${entry.level.toUpperCase().padEnd(5)} [${entry.service}]${prefix} ${entry.message}${dur}${meta}`
+}
+
+function makeLogger(service: string, requestId?: string): Logger {
+  const minLevel = isProduction() ? 'info' : 'debug'
+
+  const log = (level: LogLevel, message: string, meta?: Record<string, unknown>) => {
+    if (LEVEL_PRIORITY[level] < LEVEL_PRIORITY[minLevel]) return
+    const entry: LogEntry = {
+      level,
+      message,
+      timestamp: new Date().toISOString(),
+      service,
+      ...(requestId && { requestId }),
+      ...(meta?.duration !== undefined && { duration: meta.duration as number }),
+      ...(meta && { meta }),
+    }
+    const output = formatEntry(entry)
+    if (level === 'error') process.stderr.write(output + '\n')
+    else process.stdout.write(output + '\n')
+  }
+
+  return {
+    debug: (msg, meta) => log('debug', msg, meta),
+    info: (msg, meta) => log('info', msg, meta),
+    warn: (msg, meta) => log('warn', msg, meta),
+    error: (msg, meta) => log('error', msg, meta),
+    withRequestId: (id: string) => makeLogger(service, id),
+  }
+}
+
+export function createLogger(service: string): Logger {
+  return makeLogger(service)
+}
+
+export function generateRequestId(): string {
+  return randomUUID()
+}
+
+export type { Logger, LogEntry, LogLevel }

package/registry/layers/capability/logging/files/request-logger.ts

@@ -0,0 +1,52 @@
+import { createLogger, generateRequestId, type Logger } from './logger'
+
+const SKIP_PATHS = new Set(['/health', '/ready'])
+
+interface RequestLike {
+  method: string
+  url: string
+  headers: Record<string, string | string[] | undefined>
+}
+
+interface ResponseLike {
+  statusCode: number
+}
+
+interface ContextLike {
+  logger?: Logger
+  requestId?: string
+}
+
+export function requestLogger(service = 'http') {
+  const logger = createLogger(service)
+
+  return (req: RequestLike, res: ResponseLike, next: () => void) => {
+    const path = new URL(req.url, 'http://localhost').pathname
+    if (SKIP_PATHS.has(path)) return next()
+
+    const requestId =
+      (req.headers['x-request-id'] as string) ?? generateRequestId()
+    const reqLogger = logger.withRequestId(requestId)
+    const start = performance.now()
+
+    const ctx = req as unknown as ContextLike
+    ctx.logger = reqLogger
+    ctx.requestId = requestId
+
+    const originalEnd = (res as any).end
+    ;(res as any).end = function (...args: unknown[]) {
+      const duration = Math.round(performance.now() - start)
+      reqLogger.info(`${req.method} ${path} ${res.statusCode}`, {
+        method: req.method,
+        path,
+        status: res.statusCode,
+        duration,
+      })
+      return originalEnd.apply(this, args)
+    }
+
+    next()
+  }
+}
+
+export type { RequestLike, ResponseLike, ContextLike }

package/registry/layers/capability/logging/manifest.json

@@ -0,0 +1,47 @@
+{
+  "id": "logging",
+  "description": "Structured JSON logging with request middleware and error handling for backend services.",
+  "appliesTo": [
+    "api-service",
+    "worker-job",
+    "fullstack-ts"
+  ],
+  "files": [
+    {
+      "source": "files/logger.ts",
+      "target": "lib/logger.ts"
+    },
+    {
+      "source": "files/request-logger.ts",
+      "target": "middleware/request-logger.ts"
+    },
+    {
+      "source": "files/error-handler.ts",
+      "target": "middleware/error-handler.ts"
+    }
+  ],
+  "keywords": [
+    "request logging",
+    "access logs",
+    "structured logging",
+    "log middleware",
+    "error handling",
+    "json logging"
+  ],
+  "buildHints": {
+    "architecture": [
+      "createLogger(service) → tagged Logger instance with .withRequestId() for child loggers",
+      "requestLogger middleware → attaches logger + requestId to request context, logs method/path/status/duration on response end",
+      "errorHandler middleware → catches errors, logs stack at error level, returns sanitized JSON response in production"
+    ],
+    "middlewareChain": [
+      "requestLogger (first — sets up context)",
+      "...route handlers...",
+      "errorHandler (last — catches thrown errors)"
+    ],
+    "environmentBehavior": {
+      "development": "Human-readable log lines to stdout",
+      "production": "JSON lines to stdout/stderr, debug level suppressed, error messages sanitized"
+    }
+  }
+}

package/registry/layers/capability/market-sim/files/market-feed.json

@@ -0,0 +1,16 @@
+{
+  "ticks": [
+    {
+      "symbol": "BTC-USD",
+      "price": 68210.12
+    },
+    {
+      "symbol": "BTC-USD",
+      "price": 68219.75
+    },
+    {
+      "symbol": "BTC-USD",
+      "price": 68230.44
+    }
+  ]
+}

package/registry/layers/capability/market-sim/manifest.json

@@ -0,0 +1,19 @@
+{
+  "id": "market-sim",
+  "description": "Adds a dry-run market feed for worker and bot flows.",
+  "appliesTo": [
+    "worker-job"
+  ],
+  "files": [
+    {
+      "source": "files/market-feed.json",
+      "target": "market-feed.json"
+    }
+  ],
+  "keywords": [
+    "market stream",
+    "market feed",
+    "price feed simulation",
+    "trading simulation"
+  ]
+}