@withmata/blueprints 0.3.5 → 0.5.0

package/blueprints/features/ui-shared-components/files/ui/components/ui/tag-input.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import { Button } from "#components/ui/button";
+import { cn } from "#utils/cn";
+import { PlusIcon, X } from "@phosphor-icons/react";
+import { type KeyboardEvent, useRef, useState } from "react";
+
+export interface TagInputProps {
+  value: string[];
+  onChange: (value: string[]) => void;
+  maxItems: number;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  hideCounter?: boolean;
+}
+
+export function TagInput({
+  value,
+  onChange,
+  maxItems,
+  placeholder = "Type and press Enter...",
+  disabled = false,
+  className,
+  hideCounter = false,
+}: TagInputProps) {
+  const [inputValue, setInputValue] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const isAtMax = value.length >= maxItems;
+
+  const addTag = () => {
+    const trimmed = inputValue.trim();
+    if (!trimmed || value.length >= maxItems) return;
+
+    // Check for duplicates (case-insensitive)
+    if (value.some((v) => v.toLowerCase() === trimmed.toLowerCase())) {
+      setInputValue("");
+      return;
+    }
+
+    onChange([...value, trimmed]);
+    setInputValue("");
+    inputRef.current?.focus();
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" && inputValue.trim()) {
+      e.preventDefault();
+      addTag();
+    }
+  };
+
+  // Handle removing a tag
+  const handleRemove = (indexToRemove: number) => {
+    onChange(value.filter((_, index) => index !== indexToRemove));
+  };
+
+  return (
+    <div className={cn("space-y-2", className)}>
+      {/* Input field */}
+      {!isAtMax && (
+        <div
+          className={cn(
+            "bg-input/30 border-input focus-within:border-primary/90 flex min-h-9 items-center gap-1.5 rounded-4xl border bg-clip-padding px-2.5 py-1.5 text-sm transition-colors",
+            disabled && "opacity-60 cursor-not-allowed",
+          )}
+        >
+          <input
+            ref={inputRef}
+            type="text"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={value.length === 0 ? placeholder : "Add another..."}
+            disabled={disabled}
+            className="min-w-16 flex-1 outline-none bg-transparent"
+          />
+          {inputValue.trim() && (
+            <button
+              type="button"
+              onClick={addTag}
+              disabled={disabled}
+              className="flex items-center gap-0.5 shrink-0 rounded-full bg-primary/10 text-primary px-2 py-0.5 text-xs font-medium hover:bg-primary/20 transition-colors"
+            >
+              <PlusIcon className="size-3" weight="bold" />
+              Add
+            </button>
+          )}
+        </div>
+      )}
+
+      {/* Tags */}
+      {value.length > 0 && (
+        <div className="flex flex-wrap gap-1.5">
+          {value.map((tag, index) => (
+            <div
+              key={`${tag}-${index}`}
+              className="bg-muted-foreground/10 text-foreground flex h-7 w-fit items-center justify-center gap-1 rounded-4xl px-2.5 pr-0.5 text-sm font-medium whitespace-nowrap"
+            >
+              {tag}
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon-xs"
+                aria-label={`Remove ${tag}`}
+                onClick={() => handleRemove(index)}
+                disabled={disabled}
+                className="-ml-1 opacity-50 hover:opacity-100"
+              >
+                <X className="pointer-events-none size-3" />
+              </Button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Counter */}
+      {!hideCounter && (
+        <p
+          className={cn(
+            "text-xs text-muted-foreground",
+            isAtMax && "text-destructive font-medium",
+          )}
+        >
+          {value.length}/{maxItems} items{isAtMax && " (max)"}
+        </p>
+      )}
+    </div>
+  );
+}

package/blueprints/features/ui-shared-components/files/ui/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import type * as React from "react";
+
+import { cn } from "#utils/cn";
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input bg-input/30 focus-visible:border-primary/90 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 resize-none rounded-xl border px-3 py-2 text-base transition-colors md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };

package/blueprints/features/ui-shared-components/files/ui/components/ui/user-menu.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "#components/ui/dropdown-menu";
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "#components/ui/sidebar";
+import { Avatar } from "#components/ui/avatar";
+import { cn } from "#utils/cn";
+import { CaretUpDownIcon } from "@phosphor-icons/react/CaretUpDown";
+import { GearIcon } from "@phosphor-icons/react/Gear";
+import { SignOutIcon } from "@phosphor-icons/react/SignOut";
+import { UserIcon } from "@phosphor-icons/react/User";
+import type * as React from "react";
+
+export interface UserMenuUser {
+  name: string;
+  email: string;
+  image?: string | null;
+}
+
+export interface UserMenuItem {
+  label: string;
+  icon: React.ReactNode;
+  onClick: () => void;
+}
+
+export interface UserMenuProps {
+  user: UserMenuUser | null;
+  isLoading?: boolean;
+  items?: UserMenuItem[];
+  onSignOut?: () => void;
+  onSettingsClick?: () => void;
+  onProfileClick?: () => void;
+  className?: string;
+}
+
+export function UserMenu({
+  user,
+  isLoading = false,
+  items,
+  onSignOut,
+  onSettingsClick,
+  onProfileClick,
+  className,
+}: UserMenuProps) {
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+
+  if (isLoading) {
+    return (
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton size="lg" className="animate-pulse">
+            <div className="size-8 rounded-lg bg-sidebar-accent" />
+            {!isCollapsed && (
+              <div className="flex-1 space-y-1">
+                <div className="h-3 w-20 rounded bg-sidebar-accent" />
+                <div className="h-2 w-24 rounded bg-sidebar-accent" />
+              </div>
+            )}
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    );
+  }
+
+  if (!user) return null;
+
+  return (
+    <SidebarMenu className={cn(className)}>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={
+              <SidebarMenuButton
+                size="lg"
+                className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+              >
+                <Avatar
+                  name={user.name}
+                  image={user.image}
+                  size="default"
+                  className="bg-sidebar-primary text-sidebar-primary-foreground"
+                />
+                {!isCollapsed && (
+                  <>
+                    <div className="grid flex-1 text-left text-sm leading-tight overflow-hidden">
+                      <span className="truncate font-semibold">
+                        {user.name}
+                      </span>
+                      <span className="truncate text-xs text-sidebar-foreground/70">
+                        {user.email}
+                      </span>
+                    </div>
+                    <CaretUpDownIcon className="ml-auto size-4 shrink-0" />
+                  </>
+                )}
+              </SidebarMenuButton>
+            }
+          />
+          <DropdownMenuContent
+            side={isCollapsed ? "right" : "top"}
+            align="start"
+          >
+            <DropdownMenuGroup>
+              {onProfileClick && (
+                <DropdownMenuItem onClick={onProfileClick}>
+                  <UserIcon className="size-4" />
+                  <span>Profile</span>
+                </DropdownMenuItem>
+              )}
+              {onSettingsClick && (
+                <DropdownMenuItem onClick={onSettingsClick}>
+                  <GearIcon className="size-4" />
+                  <span>Settings</span>
+                </DropdownMenuItem>
+              )}
+              {items?.map((item) => (
+                <DropdownMenuItem key={item.label} onClick={item.onClick}>
+                  {item.icon}
+                  <span>{item.label}</span>
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuGroup>
+            {onSignOut && (
+              <>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onClick={onSignOut}>
+                  <SignOutIcon className="size-4" />
+                  <span>Sign out</span>
+                </DropdownMenuItem>
+              </>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}

package/blueprints/features/ui-shared-components/files/ui/components.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
+  "style": "base-maia",
   "rsc": true,
   "tsx": true,
   "tailwind": {
@@ -10,12 +10,15 @@
     "cssVariables": true,
     "prefix": ""
   },
-  "iconLibrary": "lucide",
+  "iconLibrary": "phosphor",
   "aliases": {
-    "components": "#components",
-    "utils": "#utils",
-    "ui": "#components/ui",
-    "lib": "#utils",
-    "hooks": "#hooks"
-  }
+    "components": "components",
+    "utils": "utils",
+    "ui": "components/ui",
+    "lib": "utils",
+    "hooks": "hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
 }

package/blueprints/features/ui-shared-components/files/ui/package.json

@@ -3,33 +3,42 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "ui:add": "pnpm dlx shadcn@latest add"
+    "ui:add": "bunx shadcn@latest add"
   },
   "imports": {
     "#components/*": "./components/*.tsx",
     "#components/ui/*": "./components/ui/*.tsx",
+    "#components/base/*": "./components/base/*.tsx",
+    "#components/structure/*": "./components/structure/*.tsx",
     "#utils/*": "./utils/*.ts",
-    "#hooks/*": "./hooks/*.ts",
     "#types/*": "./types/*.ts"
   },
   "exports": {
     "./components/*": "./components/*.tsx",
     "./components/ui/*": "./components/ui/*.tsx",
+    "./components/base/*": "./components/base/*.tsx",
+    "./components/structure/*": "./components/structure/*.tsx",
     "./utils/*": "./utils/*.ts",
+    "./types/*": "./types/*.ts",
     "./styles": "./styles/globals.css",
     "./icons/*": "./icons/*.tsx",
-    "./icons/logos/*": "./icons/logos/*.tsx"
+    "./icons/logos/*": "./icons/logos/*.tsx",
+    "./icons/company-assets/*": "./icons/company-assets/*.tsx"
   },
   "dependencies": {
     "{{SCOPE}}/tailwind-config": "workspace:*",
-    "@radix-ui/react-slot": "^1.2",
-    "class-variance-authority": "^0.7",
-    "clsx": "^2.1",
-    "react": "^19",
-    "react-dom": "^19",
-    "shadcn": "^3",
-    "tailwind-merge": "^3",
-    "tw-animate-css": "^1"
+    "@base-ui/react": "^1.0.0",
+    "@phosphor-icons/react": "^2.1.10",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-slot": "^1.2.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "shadcn": "^3.6.2",
+    "tailwind-merge": "^3.4.0",
+    "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
     "{{SCOPE}}/typescript-config": "workspace:*",

package/blueprints/foundation/monorepo-turbo/BLUEPRINT.md

@@ -1,4 +1,4 @@
-# Monorepo Foundation Blueprint — Turborepo + pnpm
+# Monorepo Foundation Blueprint — Turborepo + bun
 
 ## Tier
 
@@ -49,8 +49,7 @@ This blueprint generates the project skeleton:
 ├── packages/                             # Empty — feature blueprints add packages here
 ├── .gitignore
 ├── biome.json                            # Linting + formatting
-├── package.json                          # Root workspace scripts
-├── pnpm-workspace.yaml                   # Workspace patterns
+├── package.json                          # Root workspace scripts + workspaces field
 └── turbo.json                            # Task orchestration
 ```
 
@@ -64,9 +63,9 @@ This blueprint generates the project skeleton:
 
 ## Architecture
 
-### Monorepo Tool: Turborepo + pnpm
+### Monorepo Tool: Turborepo + bun
 
-- **pnpm workspaces** — Fast, disk-efficient, strict dependency isolation. Hoists shared deps while preventing phantom dependencies.
+- **bun workspaces** — Fast, all-in-one JavaScript runtime with built-in package management, workspace support, and near-instant installs. Workspaces are declared in the root `package.json` `workspaces` field.
 - **Turborepo** — Task orchestration with dependency-aware caching. `dev` runs all workspaces in parallel. `build` respects dependency order via `^build`.
 - **Workspace protocol** — Internal deps use `workspace:*` for automatic linking. No manual version tracking between packages.
 
@@ -195,10 +194,10 @@ apps/web/
 | Choice | Default | Alternatives |
 |--------|---------|-------------|
 | npm scope | Derived from product name | Any valid npm scope |
-| Package manager | pnpm | bun (documented alternative) |
+| Package manager | bun | pnpm (documented alternative) |
 | Node.js version | `>=22` | Any LTS version |
 
-**Note on bun:** If using bun instead of pnpm, replace `pnpm-workspace.yaml` with a `workspaces` field in root `package.json`, and update the `packageManager` field. The workspace protocol (`workspace:*`) works the same way.
+**Note on pnpm:** If using pnpm instead of bun, create a `pnpm-workspace.yaml` with workspace patterns, add a `"packageManager": "pnpm@9.x"` field to the root `package.json`, and remove the `workspaces` field (pnpm reads its own config file). Replace `bun install` with `pnpm install`, `bunx` with `pnpm dlx`, and `bun add -d` with `pnpm add -D`. The workspace protocol (`workspace:*`) works the same way.
 
 ---
 
@@ -206,7 +205,7 @@ apps/web/
 
 These are locked-down decisions. The blueprint doesn't offer alternatives for these:
 
-- **pnpm** as package manager (bun documented as alternative, but npm and yarn are not supported)
+- **bun** as package manager (pnpm documented as alternative, but npm and yarn are not supported)
 - **Turborepo** for monorepo task orchestration (not Nx, Lerna, or Rush)
 - **Biome** for linting + formatting (not ESLint + Prettier)
 - **Strict TypeScript** — `strict: true` and `noUncheckedIndexedAccess: true` in every package
@@ -277,9 +276,8 @@ If no discovery was run, the foundation asks these questions directly.
 
 | Blueprint File | Target Location | Description |
 |----------------|-----------------|-------------|
-| `files/root/package.json` | `package.json` | Root monorepo package.json with workspace scripts |
+| `files/root/package.json` | `package.json` | Root monorepo package.json with workspace scripts and workspaces field |
 | `files/root/turbo.json` | `turbo.json` | Turborepo task configuration |
-| `files/root/pnpm-workspace.yaml` | `pnpm-workspace.yaml` | Workspace patterns |
 | `files/root/biome.json` | `biome.json` | Biome linter + formatter config |
 | `files/root/gitignore` | `.gitignore` | Git ignore patterns |
 | `files/config/typescript-config/package.json` | `config/typescript-config/package.json` | TypeScript config package |
@@ -332,20 +330,20 @@ The lefthook config is minimal by design. Feature blueprints may add their own c
 
 | When you... | Then run... | Why |
 |---|---|---|
-| Add a new workspace package to `apps/`, `apis/`, `packages/`, or `config/` | Verify `pnpm-workspace.yaml` patterns cover it, then run `pnpm install` | New workspaces need to be discovered by pnpm |
-| Change a shared config package (`config/typescript-config/` or `config/tailwind-config/`) | Run `pnpm dev` and verify all consuming packages still build | Shared config changes cascade to all consumers |
-| Add a workspace dependency (e.g., `"@scope/ui": "workspace:*"`) | Run `pnpm install` then verify imports resolve | Workspace links need pnpm to wire them up |
-| Modify `turbo.json` task definitions | Verify `pnpm turbo run <task>` executes in the expected order | Task dependency changes affect build orchestration |
-| Change the TypeScript `base.json` config | Run typecheck across all workspaces: `pnpm turbo typecheck` | Base config changes affect every package |
+| Add a new workspace package to `apps/`, `apis/`, `packages/`, or `config/` | Verify the `workspaces` field in root `package.json` covers it, then run `bun install` | New workspaces need to be discovered by bun |
+| Change a shared config package (`config/typescript-config/` or `config/tailwind-config/`) | Run `bun dev` and verify all consuming packages still build | Shared config changes cascade to all consumers |
+| Add a workspace dependency (e.g., `"@scope/ui": "workspace:*"`) | Run `bun install` then verify imports resolve | Workspace links need bun to wire them up |
+| Modify `turbo.json` task definitions | Verify `bun turbo run <task>` executes in the expected order | Task dependency changes affect build orchestration |
+| Change the TypeScript `base.json` config | Run typecheck across all workspaces: `bun turbo typecheck` | Base config changes affect every package |
 
 ### Condensed Rules for CLAUDE.md
 ```markdown
 ### Monorepo maintenance
-- After every code change: format with Biome (`pnpm biome check --write .`) before considering work complete
-- After adding new workspace packages: verify `pnpm-workspace.yaml` patterns match, run `pnpm install`
+- After every code change: format with Biome (`bun biome check --write .`) before considering work complete
+- After adding new workspace packages: verify `workspaces` field in root `package.json` includes the pattern, run `bun install`
 - After modifying shared configs (`config/typescript-config/`, `config/tailwind-config/`): verify all consumers still build
-- After changing `turbo.json`: verify task ordering with `pnpm turbo run <task> --dry`
-- After adding workspace dependencies: run `pnpm install` to create workspace links
+- After changing `turbo.json`: verify task ordering with `bun turbo run <task> --dry`
+- After adding workspace dependencies: run `bun install` to create workspace links
 - Keep `turbo.json` tasks with `cache: false` for any task with side effects (migrations, code generation)
 ```
 
@@ -358,7 +356,7 @@ After completion, appends to `.claude/project-context.md`:
 ```yaml
 ## Foundation
 monorepo_tool: turborepo
-package_manager: pnpm
+package_manager: bun
 npm_scope: "{{SCOPE}}"
 node_version: ">=22"
 workspaces:
@@ -376,3 +374,4 @@ installed_at: <date>
 ```
 
 
+</output>

package/blueprints/foundation/monorepo-turbo/files/root/package.json

@@ -2,6 +2,7 @@
   "name": "{{SCOPE}}",
   "version": "0.1.0",
   "private": true,
+  "workspaces": ["apps/*", "apis/*", "packages/*", "config/*"],
   "scripts": {
     "dev": "turbo run dev",
     "build": "turbo run build",
@@ -18,7 +19,6 @@
     "turbo": "^2",
     "typescript": "^5.9"
   },
-  "packageManager": "pnpm@9.12.2",
   "engines": {
     "node": ">=22"
   }

package/dist/index.js

@@ -6,7 +6,7 @@ import pc4 from "picocolors";
 
 // src/constants.ts
 var API_URL = process.env["WITHMATA_API_URL"] || "https://blueprints.withmata.dev";
-var VERSION = "0.3.5";
+var VERSION = "0.5.0";
 
 // src/lib/install-state.ts
 import { existsSync, readdirSync, lstatSync, readlinkSync } from "fs";
@@ -430,19 +430,28 @@ var SKILL_GROUPS = [
     ]
   },
   {
-    title: "Add to Your Project",
+    title: "Marketing & Design",
     skills: [
       {
-        command: "/scaffold-foundation",
-        description: "Set up a monorepo with Turborepo and shared tooling"
+        command: "/copywrite",
+        description: "Write conversion-focused marketing page copy (pricing, about, features)"
       },
       {
-        command: "/scaffold-db",
-        description: "Add a database with Drizzle ORM and PostgreSQL"
+        command: "/copywrite-landing",
+        description: "Write high-converting landing page copy with CRO frameworks"
       },
       {
-        command: "/scaffold-auth",
-        description: "Add authentication, sessions, and organization support"
+        command: "/design-system",
+        description: "Define visual identity and generate custom Tailwind v4 tokens"
+      }
+    ]
+  },
+  {
+    title: "Scaffold Your Project",
+    skills: [
+      {
+        command: "/scaffold-foundation",
+        description: "Set up a monorepo with Turborepo and shared tooling"
       },
       {
         command: "/scaffold-env",
@@ -450,11 +459,19 @@ var SKILL_GROUPS = [
       },
       {
         command: "/scaffold-tailwind",
-        description: "Add a design system with Tailwind v4 tokens and animations"
+        description: "Add Tailwind v4 design system (auto-detects custom design tokens)"
       },
       {
         command: "/scaffold-ui",
-        description: "Add a component library powered by shadcn/ui"
+        description: "Add 31 Base UI components with Phosphor icons and form system"
+      },
+      {
+        command: "/scaffold-db",
+        description: "Add a database with Drizzle ORM and PostgreSQL"
+      },
+      {
+        command: "/scaffold-auth",
+        description: "Add authentication, sessions, and organization support"
       }
     ]
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@withmata/blueprints",
-  "version": "0.3.5",
+  "version": "0.5.0",
   "description": "Set up AI-powered project blueprints for Claude Code, OpenCode, and Cursor",
   "type": "module",
   "bin": {

package/blueprints/features/tailwind-v4/files/tailwind-config/package.json

@@ -1,20 +0,0 @@
-{
-  "name": "{{SCOPE}}/tailwind-config",
-  "version": "0.0.0",
-  "type": "module",
-  "private": true,
-  "exports": {
-    ".": "./shared-styles.css",
-    "./postcss": "./postcss.config.mjs"
-  },
-  "dependencies": {
-    "@tailwindcss/typography": "^0.5",
-    "shadcn": "^3",
-    "tailwind-scrollbar-hide": "^4",
-    "tw-animate-css": "^1"
-  },
-  "devDependencies": {
-    "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4"
-  }
-}

package/blueprints/foundation/monorepo-turbo/files/root/pnpm-workspace.yaml

@@ -1,5 +0,0 @@
-packages:
-  - "apps/*"
-  - "apis/*"
-  - "packages/*"
-  - "config/*"