@tangle-network/starter-foundry 0.1.0

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

@@ -0,0 +1,72 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+type CommandContextValue = { search: string; onSearchChange: (v: string) => void }
+const CommandContext = React.createContext<CommandContextValue>({ search: "", onSearchChange: () => {} })
+
+const Command = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    const [search, setSearch] = React.useState("")
+    return (
+      <CommandContext.Provider value={{ search, onSearchChange: setSearch }}>
+        <div ref={ref} className={cn("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", className)} {...props}>
+          {children}
+        </div>
+      </CommandContext.Provider>
+    )
+  }
+)
+Command.displayName = "Command"
+
+const CommandInput = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
+  ({ className, ...props }, ref) => {
+    const ctx = React.useContext(CommandContext)
+    return (
+      <div className="flex items-center border-b px-3">
+        <span className="mr-2 h-4 w-4 shrink-0 opacity-50">⌕</span>
+        <input ref={ref} className={cn("flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", className)}
+          value={ctx.search} onChange={(e) => ctx.onSearchChange(e.target.value)} {...props}
+        />
+      </div>
+    )
+  }
+)
+CommandInput.displayName = "CommandInput"
+
+const CommandList = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)} {...props} />
+  )
+)
+CommandList.displayName = "CommandList"
+
+const CommandEmpty = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("py-6 text-center text-sm", className)} {...props} />
+  )
+)
+CommandEmpty.displayName = "CommandEmpty"
+
+const CommandGroup = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & { heading?: string }>(
+  ({ className, heading, children, ...props }, ref) => (
+    <div ref={ref} className={cn("overflow-hidden p-1 text-foreground", className)} {...props}>
+      {heading && <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">{heading}</div>}
+      {children}
+    </div>
+  )
+)
+CommandGroup.displayName = "CommandGroup"
+
+const CommandItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} role="option" className={cn("relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", className)} {...props} />
+  )
+)
+CommandItem.displayName = "CommandItem"
+
+const CommandSeparator = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn("-mx-1 h-px bg-border", className)} {...props} />
+)
+CommandSeparator.displayName = "CommandSeparator"
+
+export { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator }

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

@@ -0,0 +1,75 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+type DialogContextValue = { open: boolean; onOpenChange: (v: boolean) => void }
+const DialogContext = React.createContext<DialogContextValue>({ open: false, onOpenChange: () => {} })
+
+function Dialog({ open: controlledOpen, onOpenChange, children }: { open?: boolean; onOpenChange?: (v: boolean) => void; children: React.ReactNode }) {
+  const [internal, setInternal] = React.useState(false)
+  const open = controlledOpen ?? internal
+  const setter = onOpenChange ?? setInternal
+  return <DialogContext.Provider value={{ open, onOpenChange: setter }}>{children}</DialogContext.Provider>
+}
+
+const DialogTrigger = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
+  ({ onClick, ...props }, ref) => {
+    const ctx = React.useContext(DialogContext)
+    return <button ref={ref} type="button" onClick={(e) => { ctx.onOpenChange(true); onClick?.(e) }} {...props} />
+  }
+)
+DialogTrigger.displayName = "DialogTrigger"
+
+function DialogPortal({ children }: { children: React.ReactNode }) {
+  return <>{children}</>
+}
+
+const DialogOverlay = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className)} {...props} />
+  )
+)
+DialogOverlay.displayName = "DialogOverlay"
+
+const DialogContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    const ctx = React.useContext(DialogContext)
+    if (!ctx.open) return null
+    return (
+      <DialogPortal>
+        <DialogOverlay onClick={() => ctx.onOpenChange(false)} />
+        <div ref={ref} className={cn("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 sm:rounded-lg", className)} {...props}>
+          {children}
+          <button className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2" onClick={() => ctx.onOpenChange(false)}>
+            <span className="text-sm">✕</span>
+            <span className="sr-only">Close</span>
+          </button>
+        </div>
+      </DialogPortal>
+    )
+  }
+)
+DialogContent.displayName = "DialogContent"
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
+)
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
+)
+
+const DialogTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h2 ref={ref} className={cn("text-lg font-semibold leading-none tracking-tight", className)} {...props} />
+  )
+)
+DialogTitle.displayName = "DialogTitle"
+
+const DialogDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+  )
+)
+DialogDescription.displayName = "DialogDescription"
+
+export { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription }

package/registry/layers/capability/shadcn/files/dropdown-menu.tsx

@@ -0,0 +1,68 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+type DropdownContextValue = { open: boolean; onOpenChange: (v: boolean) => void }
+const DropdownContext = React.createContext<DropdownContextValue>({ open: false, onOpenChange: () => {} })
+
+function DropdownMenu({ open: controlledOpen, onOpenChange, children }: { open?: boolean; onOpenChange?: (v: boolean) => void; children: React.ReactNode }) {
+  const [internal, setInternal] = React.useState(false)
+  const open = controlledOpen ?? internal
+  const setter = onOpenChange ?? setInternal
+  return <DropdownContext.Provider value={{ open, onOpenChange: setter }}>{children}</DropdownContext.Provider>
+}
+
+const DropdownMenuTrigger = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
+  ({ onClick, ...props }, ref) => {
+    const ctx = React.useContext(DropdownContext)
+    return <button ref={ref} type="button" onClick={(e) => { ctx.onOpenChange(!ctx.open); onClick?.(e) }} {...props} />
+  }
+)
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger"
+
+const DropdownMenuContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const ctx = React.useContext(DropdownContext)
+    const contentRef = React.useRef<HTMLDivElement>(null)
+    React.useEffect(() => {
+      if (!ctx.open) return
+      const handler = (e: MouseEvent) => {
+        if (contentRef.current && !contentRef.current.contains(e.target as Node)) ctx.onOpenChange(false)
+      }
+      document.addEventListener("mousedown", handler)
+      return () => document.removeEventListener("mousedown", handler)
+    }, [ctx.open, ctx.onOpenChange])
+    if (!ctx.open) return null
+    return (
+      <div ref={(node) => { (contentRef as React.MutableRefObject<HTMLDivElement | null>).current = node; if (typeof ref === "function") ref(node); else if (ref) ref.current = node }}
+        className={cn("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md", className)} {...props}
+      />
+    )
+  }
+)
+DropdownMenuContent.displayName = "DropdownMenuContent"
+
+const DropdownMenuItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & { inset?: boolean }>(
+  ({ className, inset, onClick, ...props }, ref) => {
+    const ctx = React.useContext(DropdownContext)
+    return (
+      <div ref={ref} role="menuitem" className={cn("relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground", inset && "pl-8", className)}
+        onClick={(e) => { onClick?.(e); ctx.onOpenChange(false) }} {...props}
+      />
+    )
+  }
+)
+DropdownMenuItem.displayName = "DropdownMenuItem"
+
+const DropdownMenuSeparator = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
+)
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator"
+
+const DropdownMenuLabel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & { inset?: boolean }>(
+  ({ className, inset, ...props }, ref) => (
+    <div ref={ref} className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)} {...props} />
+  )
+)
+DropdownMenuLabel.displayName = "DropdownMenuLabel"
+
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuLabel }

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

@@ -0,0 +1,57 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+type FormFieldContextValue = { id: string; name: string; error?: string }
+const FormFieldContext = React.createContext<FormFieldContextValue>({ id: "", name: "" })
+
+function FormField({ name, children, error }: { name: string; children: React.ReactNode; error?: string }) {
+  const id = React.useId()
+  return <FormFieldContext.Provider value={{ id, name, error }}>{children}</FormFieldContext.Provider>
+}
+
+const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("space-y-2", className)} {...props} />
+  )
+)
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<HTMLLabelElement, React.LabelHTMLAttributes<HTMLLabelElement>>(
+  ({ className, ...props }, ref) => {
+    const { id, error } = React.useContext(FormFieldContext)
+    return <Label ref={ref} htmlFor={id} className={cn(error && "text-destructive", className)} {...props} />
+  }
+)
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ ...props }, ref) => {
+    const { id, error } = React.useContext(FormFieldContext)
+    return <div ref={ref} id={id} aria-invalid={!!error} aria-describedby={error ? `${id}-message` : undefined} {...props} />
+  }
+)
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("text-[0.8rem] text-muted-foreground", className)} {...props} />
+  )
+)
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, children, ...props }, ref) => {
+    const { id, error } = React.useContext(FormFieldContext)
+    const message = error || children
+    if (!message) return null
+    return (
+      <p ref={ref} id={`${id}-message`} className={cn("text-[0.8rem] font-medium text-destructive", className)} {...props}>
+        {message}
+      </p>
+    )
+  }
+)
+FormMessage.displayName = "FormMessage"
+
+export { FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage }

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

@@ -0,0 +1,21 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

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

@@ -0,0 +1,18 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Label = React.forwardRef<HTMLLabelElement, React.LabelHTMLAttributes<HTMLLabelElement>>(
+  ({ className, ...props }, ref) => (
+    <label
+      ref={ref}
+      className={cn(
+        "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Label.displayName = "Label"
+
+export { Label }

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

@@ -0,0 +1,28 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Progress = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & { value?: number; max?: number }
+>(({ className, value = 0, max = 100, ...props }, ref) => {
+  const pct = Math.min(100, Math.max(0, (value / max) * 100))
+  return (
+    <div
+      ref={ref}
+      role="progressbar"
+      aria-valuemin={0}
+      aria-valuemax={max}
+      aria-valuenow={value}
+      className={cn("relative h-2 w-full overflow-hidden rounded-full bg-primary/20", className)}
+      {...props}
+    >
+      <div
+        className="h-full w-full flex-1 bg-primary transition-all"
+        style={{ transform: `translateX(-${100 - pct}%)` }}
+      />
+    </div>
+  )
+})
+Progress.displayName = "Progress"
+
+export { Progress }

package/registry/layers/capability/shadcn/files/scroll-area.tsx

@@ -0,0 +1,32 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => (
+    <div ref={ref} className={cn("relative overflow-hidden", className)} {...props}>
+      <div className="h-full w-full overflow-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-border">
+        {children}
+      </div>
+    </div>
+  )
+)
+ScrollArea.displayName = "ScrollArea"
+
+const ScrollBar = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & { orientation?: "vertical" | "horizontal" }
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  />
+))
+ScrollBar.displayName = "ScrollBar"
+
+export { ScrollArea, ScrollBar }

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

@@ -0,0 +1,80 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+type SelectContextValue = { value: string; onValueChange: (v: string) => void; open: boolean; onOpenChange: (v: boolean) => void }
+const SelectContext = React.createContext<SelectContextValue>({ value: "", onValueChange: () => {}, open: false, onOpenChange: () => {} })
+
+function Select({ value: controlledValue, onValueChange, defaultValue = "", children }: { value?: string; onValueChange?: (v: string) => void; defaultValue?: string; children: React.ReactNode }) {
+  const [internal, setInternal] = React.useState(defaultValue)
+  const [open, setOpen] = React.useState(false)
+  const value = controlledValue ?? internal
+  const setter = onValueChange ?? setInternal
+  return <SelectContext.Provider value={{ value, onValueChange: setter, open, onOpenChange: setOpen }}>{children}</SelectContext.Provider>
+}
+
+const SelectTrigger = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
+  ({ className, children, ...props }, ref) => {
+    const ctx = React.useContext(SelectContext)
+    return (
+      <button ref={ref} type="button" className={cn("flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", className)}
+        onClick={() => ctx.onOpenChange(!ctx.open)} {...props}
+      >
+        {children}
+        <span className="ml-2 text-xs opacity-50">▼</span>
+      </button>
+    )
+  }
+)
+SelectTrigger.displayName = "SelectTrigger"
+
+function SelectValue({ placeholder }: { placeholder?: string }) {
+  const ctx = React.useContext(SelectContext)
+  return <span>{ctx.value || placeholder}</span>
+}
+
+const SelectContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    const ctx = React.useContext(SelectContext)
+    React.useEffect(() => {
+      if (!ctx.open) return
+      const handler = () => ctx.onOpenChange(false)
+      document.addEventListener("mousedown", handler)
+      return () => document.removeEventListener("mousedown", handler)
+    }, [ctx.open, ctx.onOpenChange])
+    if (!ctx.open) return null
+    return (
+      <div ref={ref} className={cn("relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md", className)}
+        onMouseDown={(e) => e.stopPropagation()} {...props}
+      >
+        <div className="p-1">{children}</div>
+      </div>
+    )
+  }
+)
+SelectContent.displayName = "SelectContent"
+
+const SelectItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & { value: string }>(
+  ({ className, value, children, ...props }, ref) => {
+    const ctx = React.useContext(SelectContext)
+    return (
+      <div ref={ref} role="option" aria-selected={ctx.value === value}
+        className={cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent", ctx.value === value && "bg-accent", className)}
+        onClick={() => { ctx.onValueChange(value); ctx.onOpenChange(false) }} {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+)
+SelectItem.displayName = "SelectItem"
+
+function SelectGroup({ children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div role="group" {...props}>{children}</div>
+}
+
+const SelectLabel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn("px-2 py-1.5 text-sm font-semibold", className)} {...props} />
+)
+SelectLabel.displayName = "SelectLabel"
+
+export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectLabel }

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

@@ -0,0 +1,21 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & { orientation?: "horizontal" | "vertical"; decorative?: boolean }>(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
+    <div
+      ref={ref}
+      role={decorative ? "none" : "separator"}
+      aria-orientation={!decorative ? orientation : undefined}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = "Separator"
+
+export { Separator }

package/registry/layers/capability/shadcn/files/shadcn-config.json

@@ -0,0 +1,26 @@
+{
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "hooks": "@/hooks",
+    "lib": "@/lib"
+  },
+  "registryUrl": "https://ui.shadcn.com",
+  "baseComponents": ["button", "card", "input", "label", "badge", "separator", "skeleton"],
+  "utilities": {
+    "cn": "import { clsx, type ClassValue } from 'clsx'; import { twMerge } from 'tailwind-merge'; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); }"
+  },
+  "notes": [
+    "Generate components.json at project root with these settings.",
+    "Create src/lib/utils.ts with the cn() utility function.",
+    "Configure tsconfig.json paths: { '@/*': ['./src/*'] }.",
+    "Install: clsx, tailwind-merge, class-variance-authority, @radix-ui/react-slot.",
+    "Add components via: npx shadcn@latest add <component>.",
+    "For SvelteKit use shadcn-svelte. For Vue use shadcn-vue. Adjust imports accordingly.",
+    "The new-york style uses smaller radius and tighter spacing — preferred for professional apps."
+  ]
+}

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

@@ -0,0 +1,71 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+type SheetContextValue = { open: boolean; onOpenChange: (v: boolean) => void }
+const SheetContext = React.createContext<SheetContextValue>({ open: false, onOpenChange: () => {} })
+
+function Sheet({ open: controlledOpen, onOpenChange, children }: { open?: boolean; onOpenChange?: (v: boolean) => void; children: React.ReactNode }) {
+  const [internal, setInternal] = React.useState(false)
+  const open = controlledOpen ?? internal
+  const setter = onOpenChange ?? setInternal
+  return <SheetContext.Provider value={{ open, onOpenChange: setter }}>{children}</SheetContext.Provider>
+}
+
+const SheetTrigger = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
+  ({ onClick, ...props }, ref) => {
+    const ctx = React.useContext(SheetContext)
+    return <button ref={ref} type="button" onClick={(e) => { ctx.onOpenChange(true); onClick?.(e) }} {...props} />
+  }
+)
+SheetTrigger.displayName = "SheetTrigger"
+
+const sheetSideStyles = {
+  top: "inset-x-0 top-0 border-b",
+  bottom: "inset-x-0 bottom-0 border-t",
+  left: "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+  right: "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+} as const
+
+const SheetContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & { side?: keyof typeof sheetSideStyles }>(
+  ({ className, side = "right", children, ...props }, ref) => {
+    const ctx = React.useContext(SheetContext)
+    if (!ctx.open) return null
+    return (
+      <>
+        <div className="fixed inset-0 z-50 bg-black/80" onClick={() => ctx.onOpenChange(false)} />
+        <div ref={ref} className={cn("fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out", sheetSideStyles[side], className)} {...props}>
+          {children}
+          <button className="absolute right-4 top-4 rounded-sm opacity-70 hover:opacity-100" onClick={() => ctx.onOpenChange(false)}>
+            <span className="text-sm">✕</span>
+            <span className="sr-only">Close</span>
+          </button>
+        </div>
+      </>
+    )
+  }
+)
+SheetContent.displayName = "SheetContent"
+
+const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+)
+
+const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
+)
+
+const SheetTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h2 ref={ref} className={cn("text-lg font-semibold text-foreground", className)} {...props} />
+  )
+)
+SheetTitle.displayName = "SheetTitle"
+
+const SheetDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+  )
+)
+SheetDescription.displayName = "SheetDescription"
+
+export { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription }

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

@@ -0,0 +1,73 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+type SidebarContextValue = { open: boolean; onOpenChange: (v: boolean) => void }
+const SidebarContext = React.createContext<SidebarContextValue>({ open: true, onOpenChange: () => {} })
+const useSidebar = () => React.useContext(SidebarContext)
+
+function SidebarProvider({ defaultOpen = true, children }: { defaultOpen?: boolean; children: React.ReactNode }) {
+  const [open, setOpen] = React.useState(defaultOpen)
+  return <SidebarContext.Provider value={{ open, onOpenChange: setOpen }}>{children}</SidebarContext.Provider>
+}
+
+const Sidebar = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    const { open } = useSidebar()
+    return (
+      <aside ref={ref} data-state={open ? "open" : "closed"}
+        className={cn("flex h-full flex-col border-r bg-sidebar text-sidebar-foreground transition-[width] duration-200", open ? "w-64" : "w-0 overflow-hidden", className)} {...props}
+      >
+        {children}
+      </aside>
+    )
+  }
+)
+Sidebar.displayName = "Sidebar"
+
+const SidebarHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn("flex flex-col gap-2 p-4", className)} {...props} />
+)
+SidebarHeader.displayName = "SidebarHeader"
+
+const SidebarContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn("flex-1 overflow-auto p-4", className)} {...props} />
+)
+SidebarContent.displayName = "SidebarContent"
+
+const SidebarFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn("flex flex-col gap-2 p-4", className)} {...props} />
+)
+SidebarFooter.displayName = "SidebarFooter"
+
+const SidebarMenu = React.forwardRef<HTMLUListElement, React.HTMLAttributes<HTMLUListElement>>(
+  ({ className, ...props }, ref) => <ul ref={ref} className={cn("flex w-full min-w-0 flex-col gap-1", className)} {...props} />
+)
+SidebarMenu.displayName = "SidebarMenu"
+
+const SidebarMenuItem = React.forwardRef<HTMLLIElement, React.LiHTMLAttributes<HTMLLIElement>>(
+  ({ className, ...props }, ref) => <li ref={ref} className={cn("group/menu-item relative", className)} {...props} />
+)
+SidebarMenuItem.displayName = "SidebarMenuItem"
+
+const SidebarMenuButton = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement> & { isActive?: boolean }>(
+  ({ className, isActive, ...props }, ref) => (
+    <button ref={ref} type="button" data-active={isActive}
+      className={cn("flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring", isActive && "bg-sidebar-accent text-sidebar-accent-foreground font-medium", className)} {...props}
+    />
+  )
+)
+SidebarMenuButton.displayName = "SidebarMenuButton"
+
+function SidebarTrigger({ className, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  const { open, onOpenChange } = useSidebar()
+  return (
+    <button type="button" className={cn("inline-flex items-center justify-center rounded-md text-sm font-medium h-9 w-9 hover:bg-accent hover:text-accent-foreground", className)}
+      onClick={() => onOpenChange(!open)} {...props}
+    >
+      <span className="text-lg">{open ? "◀" : "▶"}</span>
+      <span className="sr-only">Toggle Sidebar</span>
+    </button>
+  )
+}
+
+export { Sidebar, SidebarProvider, SidebarHeader, SidebarContent, SidebarFooter, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarTrigger, useSidebar }

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

@@ -0,0 +1,7 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("animate-pulse rounded-md bg-primary/10", className)} {...props} />
+}
+
+export { Skeleton }