@tangle-network/starter-foundry 0.1.0

package/registry/layers/capability/saas-teams/files/teams-config.json

@@ -0,0 +1,16 @@
+{
+  "roles": [
+    { "id": "owner", "permissions": ["*"] },
+    { "id": "admin", "permissions": ["manage-members", "manage-billing", "manage-settings", "read", "write"] },
+    { "id": "member", "permissions": ["read", "write"] },
+    { "id": "viewer", "permissions": ["read"] }
+  ],
+  "defaultRole": "{{defaultRole}}",
+  "invitationFlow": "email",
+  "maxTeamSize": 100,
+  "notes": [
+    "teams-middleware.mjs resolves team context from the request.",
+    "Permissions are checked against the role's permission set.",
+    "Invitation flow sends email with a signed join link."
+  ]
+}

package/registry/layers/capability/saas-teams/files/teams-guard.ts

@@ -0,0 +1,35 @@
+import type { Request, Response, NextFunction } from 'express'
+
+type Role = 'owner' | 'admin' | 'member' | 'viewer'
+
+const ROLE_HIERARCHY: Record<Role, number> = {
+  owner: 3,
+  admin: 2,
+  member: 1,
+  viewer: 0,
+}
+
+export function requireTeamRole(minRole: Role) {
+  return (req: Request, res: Response, next: NextFunction) => {
+    const teamRole = (req as any).teamRole as Role | undefined
+    if (!teamRole) {
+      return res.status(403).json({
+        error: 'team_role_required',
+        message: 'You must be a member of this team',
+      })
+    }
+    if (ROLE_HIERARCHY[teamRole] < ROLE_HIERARCHY[minRole]) {
+      return res.status(403).json({
+        error: 'insufficient_role',
+        message: `This action requires the ${minRole} role or higher`,
+        currentRole: teamRole,
+        requiredRole: minRole,
+      })
+    }
+    next()
+  }
+}
+
+export function requireTeamOwner() {
+  return requireTeamRole('owner')
+}

package/registry/layers/capability/saas-teams/files/teams-ui.tsx

@@ -0,0 +1,235 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
+} from '@/components/ui/table'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import {
+  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+} from '@/components/ui/select'
+import {
+  Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle,
+} from '@/components/ui/dialog'
+import {
+  DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { MoreHorizontal, UserMinus, Shield } from 'lucide-react'
+
+type Role = 'owner' | 'admin' | 'member' | 'viewer'
+
+interface Member {
+  id: string
+  name: string
+  email: string
+  role: Role
+  avatarUrl?: string
+  joinedAt: string
+}
+
+interface Invitation {
+  id: string
+  email: string
+  role: Role
+  expiresAt: string
+}
+
+interface TeamMembersProps {
+  teamId: string
+  members: Member[]
+  invitations: Invitation[]
+  currentUserRole: Role
+  onRoleChange: (userId: string, role: Role) => void
+  onRemove: (userId: string) => void
+  onInvite: (email: string, role: Role) => void
+  onCancelInvite: (invitationId: string) => void
+}
+
+const ROLE_COLORS: Record<Role, string> = {
+  owner: 'bg-amber-100 text-amber-800',
+  admin: 'bg-blue-100 text-blue-800',
+  member: 'bg-green-100 text-green-800',
+  viewer: 'bg-gray-100 text-gray-800',
+}
+
+const ROLE_RANK: Record<Role, number> = { owner: 3, admin: 2, member: 1, viewer: 0 }
+
+const ROLES: Role[] = ['admin', 'member', 'viewer']
+
+export function TeamMembers({
+  teamId, members, invitations, currentUserRole,
+  onRoleChange, onRemove, onInvite, onCancelInvite,
+}: TeamMembersProps) {
+  const [inviteEmail, setInviteEmail] = useState('')
+  const [inviteRole, setInviteRole] = useState<Role>('member')
+  const [removeTarget, setRemoveTarget] = useState<Member | null>(null)
+  const canManage = ROLE_RANK[currentUserRole] >= ROLE_RANK.admin
+
+  function handleInvite(e: React.FormEvent) {
+    e.preventDefault()
+    if (!inviteEmail.trim()) return
+    onInvite(inviteEmail.trim(), inviteRole)
+    setInviteEmail('')
+  }
+
+  function initials(name: string) {
+    return name.split(' ').map((w) => w[0]).join('').toUpperCase().slice(0, 2)
+  }
+
+  return (
+    <div className="space-y-6">
+      {canManage && (
+        <form onSubmit={handleInvite} className="flex gap-3">
+          <Input
+            type="email"
+            placeholder="Email address"
+            value={inviteEmail}
+            onChange={(e) => setInviteEmail(e.target.value)}
+            className="max-w-xs"
+          />
+          <Select value={inviteRole} onValueChange={(v) => setInviteRole(v as Role)}>
+            <SelectTrigger className="w-32">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {ROLES.filter((r) => ROLE_RANK[r] < ROLE_RANK[currentUserRole]).map((r) => (
+                <SelectItem key={r} value={r}>{r}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <Button type="submit">Send Invite</Button>
+        </form>
+      )}
+
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Member</TableHead>
+            <TableHead>Role</TableHead>
+            <TableHead>Joined</TableHead>
+            {canManage && <TableHead className="w-12" />}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {members.map((m) => (
+            <TableRow key={m.id}>
+              <TableCell>
+                <div className="flex items-center gap-3">
+                  <Avatar className="h-8 w-8">
+                    <AvatarImage src={m.avatarUrl} />
+                    <AvatarFallback>{initials(m.name)}</AvatarFallback>
+                  </Avatar>
+                  <div>
+                    <div className="font-medium text-sm">{m.name}</div>
+                    <div className="text-xs text-muted-foreground">{m.email}</div>
+                  </div>
+                </div>
+              </TableCell>
+              <TableCell>
+                <Badge variant="secondary" className={ROLE_COLORS[m.role]}>{m.role}</Badge>
+              </TableCell>
+              <TableCell className="text-sm text-muted-foreground">
+                {new Date(m.joinedAt).toLocaleDateString()}
+              </TableCell>
+              {canManage && (
+                <TableCell>
+                  {m.role !== 'owner' && ROLE_RANK[currentUserRole] > ROLE_RANK[m.role] && (
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="icon" className="h-8 w-8">
+                          <MoreHorizontal className="h-4 w-4" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        {ROLES.filter((r) => r !== m.role && ROLE_RANK[r] < ROLE_RANK[currentUserRole]).map((r) => (
+                          <DropdownMenuItem key={r} onClick={() => onRoleChange(m.id, r)}>
+                            <Shield className="mr-2 h-4 w-4" />
+                            Change to {r}
+                          </DropdownMenuItem>
+                        ))}
+                        <DropdownMenuItem
+                          className="text-destructive"
+                          onClick={() => setRemoveTarget(m)}
+                        >
+                          <UserMinus className="mr-2 h-4 w-4" />
+                          Remove
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  )}
+                </TableCell>
+              )}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+
+      {invitations.length > 0 && (
+        <div className="space-y-2">
+          <h3 className="text-sm font-medium">Pending Invitations</h3>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Email</TableHead>
+                <TableHead>Role</TableHead>
+                <TableHead>Expires</TableHead>
+                {canManage && <TableHead className="w-12" />}
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {invitations.map((inv) => (
+                <TableRow key={inv.id}>
+                  <TableCell className="text-sm">{inv.email}</TableCell>
+                  <TableCell>
+                    <Badge variant="secondary" className={ROLE_COLORS[inv.role]}>{inv.role}</Badge>
+                  </TableCell>
+                  <TableCell className="text-sm text-muted-foreground">
+                    {new Date(inv.expiresAt).toLocaleDateString()}
+                  </TableCell>
+                  {canManage && (
+                    <TableCell>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="text-destructive"
+                        onClick={() => onCancelInvite(inv.id)}
+                      >
+                        Cancel
+                      </Button>
+                    </TableCell>
+                  )}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+
+      <Dialog open={!!removeTarget} onOpenChange={() => setRemoveTarget(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Remove Member</DialogTitle>
+            <DialogDescription>
+              Remove {removeTarget?.name} ({removeTarget?.email}) from this team? This action cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setRemoveTarget(null)}>Cancel</Button>
+            <Button
+              variant="destructive"
+              onClick={() => {
+                if (removeTarget) onRemove(removeTarget.id)
+                setRemoveTarget(null)
+              }}
+            >
+              Remove
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}

package/registry/layers/capability/saas-teams/manifest.json

@@ -0,0 +1,74 @@
+{
+  "id": "saas-teams",
+  "description": "Adds multi-tenant teams with roles, invitations, and permission boundaries.",
+  "appliesTo": [
+    "nextjs-ts",
+    "fullstack-ts",
+    "api-service"
+  ],
+  "defaults": {
+    "defaultRole": "member"
+  },
+  "files": [
+    {
+      "source": "files/teams-config.json",
+      "target": "teams-config.json"
+    },
+    {
+      "source": "files/teams-api.ts",
+      "target": "lib/teams-api.ts"
+    },
+    {
+      "source": "files/teams-guard.ts",
+      "target": "lib/teams-guard.ts"
+    },
+    {
+      "source": "files/teams-ui.tsx",
+      "target": "components/team-members.tsx"
+    }
+  ],
+  "contextHints": {
+    "extensionPoints": [
+      "teams-config.json",
+      "lib/teams-api.ts",
+      "lib/teams-guard.ts"
+    ]
+  },
+  "keywords": [
+    "team management",
+    "multi-tenant",
+    "organization management",
+    "team roles",
+    "invitation system",
+    "rbac",
+    "workspace management"
+  ],
+  "buildHints": {
+    "pages": [
+      "/settings/team",
+      "/settings/members",
+      "/invite"
+    ],
+    "apiRoutes": [
+      "/api/team/invite",
+      "/api/team/members",
+      "/api/team/roles"
+    ],
+    "components": [
+      "TeamMemberList",
+      "InviteForm",
+      "RoleSelector",
+      "TeamSwitcher"
+    ],
+    "dataModels": [
+      "Team",
+      "TeamMember",
+      "Invitation",
+      "Role"
+    ],
+    "integrations": [
+      "Email invitations",
+      "Role-based access control"
+    ]
+  }
+}

package/registry/layers/capability/shadcn/files/alert.tsx

@@ -0,0 +1,39 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: { variant: "default" },
+  }
+)
+
+const Alert = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>>(
+  ({ className, variant, ...props }, ref) => (
+    <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+  )
+)
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h5 ref={ref} className={cn("mb-1 font-medium leading-none tracking-tight", className)} {...props} />
+  )
+)
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
+  )
+)
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }

package/registry/layers/capability/shadcn/files/avatar.tsx

@@ -0,0 +1,33 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
+      {...props}
+    />
+  )
+)
+Avatar.displayName = "Avatar"
+
+const AvatarImage = React.forwardRef<HTMLImageElement, React.ImgHTMLAttributes<HTMLImageElement>>(
+  ({ className, ...props }, ref) => (
+    <img ref={ref} className={cn("aspect-square h-full w-full", className)} {...props} />
+  )
+)
+AvatarImage.displayName = "AvatarImage"
+
+const AvatarFallback = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
+      {...props}
+    />
+  )
+)
+AvatarFallback.displayName = "AvatarFallback"
+
+export { Avatar, AvatarImage, AvatarFallback }

package/registry/layers/capability/shadcn/files/badge.tsx

@@ -0,0 +1,28 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
+}
+
+export { Badge, badgeVariants }

package/registry/layers/capability/shadcn/files/breadcrumb.tsx

@@ -0,0 +1,45 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Breadcrumb = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
+  ({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />
+)
+Breadcrumb.displayName = "Breadcrumb"
+
+const BreadcrumbList = React.forwardRef<HTMLOListElement, React.OlistHTMLAttributes<HTMLOListElement>>(
+  ({ className, ...props }, ref) => (
+    <ol ref={ref} className={cn("flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5", className)} {...props} />
+  )
+)
+BreadcrumbList.displayName = "BreadcrumbList"
+
+const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.LiHTMLAttributes<HTMLLIElement>>(
+  ({ className, ...props }, ref) => (
+    <li ref={ref} className={cn("inline-flex items-center gap-1.5", className)} {...props} />
+  )
+)
+BreadcrumbItem.displayName = "BreadcrumbItem"
+
+const BreadcrumbLink = React.forwardRef<HTMLAnchorElement, React.AnchorHTMLAttributes<HTMLAnchorElement>>(
+  ({ className, ...props }, ref) => (
+    <a ref={ref} className={cn("transition-colors hover:text-foreground", className)} {...props} />
+  )
+)
+BreadcrumbLink.displayName = "BreadcrumbLink"
+
+const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(
+  ({ className, ...props }, ref) => (
+    <span ref={ref} role="link" aria-disabled="true" aria-current="page" className={cn("font-normal text-foreground", className)} {...props} />
+  )
+)
+BreadcrumbPage.displayName = "BreadcrumbPage"
+
+function BreadcrumbSeparator({ children, className, ...props }: React.LiHTMLAttributes<HTMLLIElement>) {
+  return (
+    <li role="presentation" aria-hidden="true" className={cn("[&>svg]:h-3.5 [&>svg]:w-3.5", className)} {...props}>
+      {children ?? <span className="text-muted-foreground">/</span>}
+    </li>
+  )
+}
+
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator }

package/registry/layers/capability/shadcn/files/button.tsx

@@ -0,0 +1,44 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

package/registry/layers/capability/shadcn/files/card.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("rounded-xl border bg-card text-card-foreground shadow", className)} {...props} />
+  )
+)
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  )
+)
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("font-semibold leading-none tracking-tight", className)} {...props} />
+  )
+)
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+  )
+)
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  )
+)
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+  )
+)
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

package/registry/layers/capability/shadcn/files/checkbox.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  HTMLInputElement,
+  Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & { onCheckedChange?: (checked: boolean) => void }
+>(({ className, onCheckedChange, onChange, ...props }, ref) => {
+  return (
+    <input
+      type="checkbox"
+      ref={ref}
+      className={cn(
+        "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 accent-primary",
+        className
+      )}
+      onChange={(e) => {
+        onChange?.(e)
+        onCheckedChange?.(e.target.checked)
+      }}
+      {...props}
+    />
+  )
+})
+Checkbox.displayName = "Checkbox"
+
+export { Checkbox }