@stampui/blocks 1.0.0

package/dist/types.d.ts

@@ -0,0 +1,44 @@
+/**
+ * The tier of a block. Determines CLI install behavior and registry visibility.
+ * - free: Publicly installable by anyone.
+ * - pro: Requires a valid StampUI license key.
+ * - new: Recently published free block.
+ * - locked: Explicitly gated (e.g. not yet released).
+ */
+export type BlockStatus = "free" | "pro" | "new" | "locked";
+/**
+ * A single file reference included in a block install.
+ */
+export interface BlockFile {
+    path: string;
+    type: "block" | "util" | "hook" | "registry:ui";
+}
+/**
+ * The canonical manifest for a StampUI registry block.
+ * This is the single source of truth consumed by the CLI, web registry, and preview system.
+ */
+export interface BlockManifest {
+    slug: string;
+    title: string;
+    description: string;
+    category: string;
+    tags: string[];
+    version: string;
+    updatedAt: string;
+    minCliVersion?: string;
+    changelog?: string[];
+    status: BlockStatus;
+    licenseRequired?: boolean;
+    difficulty: "beginner" | "intermediate" | "advanced";
+    frameworks: string[];
+    dependencies: string[];
+    files: BlockFile[];
+    tokens: string[];
+    supportsDarkMode: boolean;
+    supportsLightMode: boolean;
+    promptReady: boolean;
+    /** Relative path to a local preview asset, e.g. /previews/token-stream.svg */
+    previewPath?: string;
+    /** CLI and Web specific logic, populated at runtime if needed */
+    source?: string;
+}

package/dist/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@stampui/blocks",
+  "version": "1.0.0",
+  "description": "StampUI blocks, registry, and source files",
+  "files": ["dist", "src"],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc -w",
+    "prepublishOnly": "tsc"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "lucide-react": "^0.475.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^19.2.14",
+    "typescript": "^5.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/blocks/ai-chat-shell.tsx

@@ -0,0 +1,97 @@
+"use client"
+
+import * as React from "react"
+import { Menu, Plus, MessageSquare, Settings } from "lucide-react"
+import { cx } from "@/lib/cx"
+import { Button } from "@/components/core/button"
+import { PromptInput } from "@/components/blocks/prompt-input"
+import { TokenStream } from "@/components/blocks/token-stream"
+
+export function AIChatShell() {
+  const [sidebarOpen, setSidebarOpen] = React.useState(true)
+  const [messages, setMessages] = React.useState([
+    { role: "assistant", content: "Hello! I am ready to help you build your next app. What would you like to create today?" }
+  ])
+
+  const handleSubmit = (val: string) => {
+    setMessages([...messages, { role: "user", content: val }])
+    setTimeout(() => {
+      setMessages(prev => [...prev, { role: "assistant", content: "I can certainly help with that! Let's break down the requirements..." }])
+    }, 600)
+  }
+
+  return (
+    <div className="flex h-[600px] w-full overflow-hidden rounded-xl border border-border bg-background shadow-xl">
+      {/* Sidebar */}
+      <div 
+        className={cx(
+          "flex flex-col border-r border-border bg-muted/20 transition-all duration-300",
+          sidebarOpen ? "w-64" : "w-0 overflow-hidden border-r-0"
+        )}
+      >
+        <div className="flex h-14 items-center justify-between px-4 border-b border-border">
+          <span className="font-semibold text-sm">Chats</span>
+          <Button variant="ghost" size="icon" className="h-8 w-8">
+            <Plus className="h-4 w-4" />
+          </Button>
+        </div>
+        <div className="flex-1 overflow-y-auto p-2 space-y-1">
+          <Button variant="ghost" className="w-full justify-start font-normal text-sm text-muted-foreground hover:text-foreground">
+            <MessageSquare className="mr-2 h-4 w-4" /> E-commerce Data Model
+          </Button>
+          <Button variant="ghost" className="w-full justify-start font-normal text-sm text-muted-foreground hover:text-foreground">
+            <MessageSquare className="mr-2 h-4 w-4" /> Fix Next.js Hydration Error
+          </Button>
+        </div>
+        <div className="p-2 border-t border-border">
+          <Button variant="ghost" className="w-full justify-start text-sm">
+            <Settings className="mr-2 h-4 w-4" /> Settings
+          </Button>
+        </div>
+      </div>
+
+      {/* Main Chat Area */}
+      <div className="flex flex-1 flex-col bg-background">
+        <div className="flex h-14 items-center border-b border-border px-4">
+          <Button 
+            variant="ghost" 
+            size="icon" 
+            className="h-8 w-8 mr-2 md:hidden"
+            onClick={() => setSidebarOpen(!sidebarOpen)}
+          >
+            <Menu className="h-4 w-4" />
+          </Button>
+          <span className="font-medium text-sm">New Chat</span>
+        </div>
+
+        <div className="flex-1 overflow-y-auto p-4 md:p-6 space-y-6">
+          {messages.map((m, i) => (
+            <div key={i} className={cx("flex w-full", m.role === "user" ? "justify-end" : "justify-start")}>
+              <div className={cx(
+                "max-w-[80%] rounded-2xl px-5 py-3 text-sm",
+                m.role === "user" 
+                  ? "bg-primary text-primary-foreground" 
+                  : "bg-muted/50 text-foreground border border-border/50"
+              )}>
+                {m.role === "assistant" && i === messages.length - 1 ? (
+                  <TokenStream content={m.content} speed={20} />
+                ) : (
+                  <span className="whitespace-pre-wrap">{m.content}</span>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="p-4 md:p-6 pt-0">
+          <div className="mx-auto max-w-3xl">
+            <PromptInput onSubmit={handleSubmit} />
+            <div className="mt-2 text-center text-xs text-muted-foreground">
+              AI can make mistakes. Verify important information.
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/blocks/auth-panel.tsx

@@ -0,0 +1,203 @@
+"use client"
+
+import * as React from "react"
+import { Eye, EyeOff } from "lucide-react"
+import { cx } from "@/lib/cx"
+
+type AuthMode = "login" | "register"
+
+interface AuthPanelProps {
+  defaultMode?: AuthMode
+  onLogin?: (email: string, password: string) => Promise<void> | void
+  onRegister?: (email: string, password: string, name: string) => Promise<void> | void
+  onGithub?: () => void
+  onGoogle?: () => void
+}
+
+const GitHubIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z" />
+  </svg>
+)
+
+const GoogleIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24">
+    <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" />
+    <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
+    <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
+    <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
+  </svg>
+)
+
+const INPUT_CLS = "h-9 w-full rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm outline-none transition-colors placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background"
+
+export function AuthPanel({
+  defaultMode = "login",
+  onLogin,
+  onRegister,
+  onGithub,
+  onGoogle,
+}: AuthPanelProps) {
+  const [mode, setMode] = React.useState<AuthMode>(defaultMode)
+  const [email, setEmail] = React.useState("")
+  const [password, setPassword] = React.useState("")
+  const [name, setName] = React.useState("")
+  const [showPassword, setShowPassword] = React.useState(false)
+  const [loading, setLoading] = React.useState(false)
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setLoading(true)
+    try {
+      if (mode === "login") {
+        await onLogin?.(email, password)
+      } else {
+        await onRegister?.(email, password, name)
+      }
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="w-full max-w-sm rounded-2xl border border-border bg-card p-8">
+      <div className="mb-6">
+        <h1 className="text-xl font-semibold tracking-tight">
+          {mode === "login" ? "Sign in" : "Create account"}
+        </h1>
+        <p className="text-sm text-muted-foreground mt-1">
+          {mode === "login"
+            ? "Welcome back. Enter your credentials to continue."
+            : "Get started in seconds. No credit card required."}
+        </p>
+      </div>
+
+      <div className="flex gap-2 mb-6">
+        {onGithub && (
+          <button
+            type="button"
+            onClick={onGithub}
+            className="flex flex-1 items-center justify-center gap-2 rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm font-medium transition-colors hover:bg-surface-3 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border-strong"
+          >
+            <GitHubIcon />
+            GitHub
+          </button>
+        )}
+        {onGoogle && (
+          <button
+            type="button"
+            onClick={onGoogle}
+            className="flex flex-1 items-center justify-center gap-2 rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm font-medium transition-colors hover:bg-surface-3 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border-strong"
+          >
+            <GoogleIcon />
+            Google
+          </button>
+        )}
+      </div>
+
+      {(onGithub || onGoogle) && (
+        <div className="relative flex items-center justify-center mb-6">
+          <div className="absolute inset-0 flex items-center">
+            <div className="w-full border-t border-border" />
+          </div>
+          <span className="relative bg-card px-3 text-xs text-muted-foreground">or continue with email</span>
+        </div>
+      )}
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        {mode === "register" && (
+          <div className="space-y-1.5">
+            <label className="text-xs font-medium text-foreground">Name</label>
+            <input
+              type="text"
+              placeholder="Your name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              required
+              autoComplete="name"
+              className={INPUT_CLS}
+            />
+          </div>
+        )}
+
+        <div className="space-y-1.5">
+          <label className="text-xs font-medium text-foreground">Email</label>
+          <input
+            type="email"
+            placeholder="you@example.com"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+            autoComplete="email"
+            className={INPUT_CLS}
+          />
+        </div>
+
+        <div className="space-y-1.5">
+          <div className="flex items-center justify-between">
+            <label className="text-xs font-medium text-foreground">Password</label>
+            {mode === "login" && (
+              <button type="button" className="text-xs text-muted-foreground hover:text-foreground transition-colors">
+                Forgot password?
+              </button>
+            )}
+          </div>
+          <div className="relative">
+            <input
+              type={showPassword ? "text" : "password"}
+              placeholder="••••••••"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              minLength={8}
+              autoComplete={mode === "login" ? "current-password" : "new-password"}
+              className={cx(INPUT_CLS, "pr-9")}
+            />
+            <button
+              type="button"
+              onClick={() => setShowPassword(!showPassword)}
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
+              aria-label={showPassword ? "Hide password" : "Show password"}
+            >
+              {showPassword ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
+            </button>
+          </div>
+        </div>
+
+        <button
+          type="submit"
+          disabled={loading}
+          className="w-full rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          {loading ? "Loading…" : mode === "login" ? "Sign in" : "Create account"}
+        </button>
+      </form>
+
+      <p className="mt-5 text-center text-xs text-muted-foreground">
+        {mode === "login" ? (
+          <>
+            Don&apos;t have an account?{" "}
+            <button
+              type="button"
+              onClick={() => setMode("register")}
+              className="font-medium text-foreground hover:underline underline-offset-2"
+            >
+              Sign up
+            </button>
+          </>
+        ) : (
+          <>
+            Already have an account?{" "}
+            <button
+              type="button"
+              onClick={() => setMode("login")}
+              className="font-medium text-foreground hover:underline underline-offset-2"
+            >
+              Sign in
+            </button>
+          </>
+        )}
+      </p>
+    </div>
+  )
+}

package/src/components/blocks/feature-grid.tsx

@@ -0,0 +1,122 @@
+import * as React from "react"
+import { cx } from "@/lib/cx"
+
+export interface Feature {
+  icon: React.ReactNode
+  title: string
+  description: string
+}
+
+export interface FeatureGridProps {
+  eyebrow?: string
+  headline?: string
+  subtext?: string
+  features?: Feature[]
+  columns?: 2 | 3 | 4
+  className?: string
+}
+
+const defaultFeatures: Feature[] = [
+  {
+    icon: (
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
+      </svg>
+    ),
+    title: "Instant Install",
+    description: "One CLI command stamps any block directly into your project. No config, no setup, no runtime dependency.",
+  },
+  {
+    icon: (
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+        <rect width="18" height="18" x="3" y="3" rx="2" />
+        <path d="M3 9h18M9 21V9" />
+      </svg>
+    ),
+    title: "Full Source Ownership",
+    description: "The code lands in your repo. No dependency to maintain, no upstream surprises. Customize it freely.",
+  },
+  {
+    icon: (
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+        <circle cx="12" cy="12" r="3" />
+        <path d="M12 2v3M12 19v3M4.22 4.22l2.12 2.12M17.66 17.66l2.12 2.12M2 12h3M19 12h3M4.22 19.78l2.12-2.12M17.66 6.34l2.12-2.12" />
+      </svg>
+    ),
+    title: "AI-Ready Prompts",
+    description: "Every block ships with optimized prompts for Cursor, Claude, v0, and Bolt. Describe what you want, get it built.",
+  },
+  {
+    icon: (
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+      </svg>
+    ),
+    title: "Accessible by Default",
+    description: "Built on Radix UI primitives. Keyboard navigation, ARIA attributes, and screen reader support out of the box.",
+  },
+  {
+    icon: (
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+        <circle cx="12" cy="8" r="6" />
+        <path d="M15.477 12.89 17 22l-5-3-5 3 1.523-9.11" />
+      </svg>
+    ),
+    title: "Dark Mode Native",
+    description: "Every component is built with CSS variables and supports dark mode out of the box. No extra config.",
+  },
+  {
+    icon: (
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
+      </svg>
+    ),
+    title: "Themeable",
+    description: "Token-based design system. Change one CSS variable, every component updates. Consistent without effort.",
+  },
+]
+
+const colClass: Record<2 | 3 | 4, string> = {
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-2 lg:grid-cols-3",
+  4: "sm:grid-cols-2 lg:grid-cols-4",
+}
+
+export function FeatureGrid({
+  eyebrow = "Why StampUI",
+  headline = "Built for how you actually ship",
+  subtext,
+  features = defaultFeatures,
+  columns = 3,
+  className,
+}: FeatureGridProps) {
+  return (
+    <section className={cx("w-full py-24 px-6", className)}>
+      <div className="mx-auto max-w-5xl">
+        <div className="mb-16 text-center">
+          {eyebrow && (
+            <p className="text-xs font-mono text-muted-foreground uppercase tracking-widest mb-4">{eyebrow}</p>
+          )}
+          <h2 className="text-3xl sm:text-4xl font-bold tracking-tight text-foreground">{headline}</h2>
+          {subtext && (
+            <p className="mt-4 text-base text-muted-foreground max-w-xl mx-auto">{subtext}</p>
+          )}
+        </div>
+
+        <div className={cx("grid grid-cols-1 gap-8", colClass[columns])}>
+          {features.map((feature, i) => (
+            <div key={i} className="flex flex-col gap-4">
+              <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-border bg-surface-2 text-foreground">
+                {feature.icon}
+              </div>
+              <div>
+                <h3 className="text-sm font-semibold text-foreground mb-1.5">{feature.title}</h3>
+                <p className="text-sm text-muted-foreground leading-relaxed">{feature.description}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/components/blocks/hero-section.tsx

@@ -0,0 +1,73 @@
+import * as React from "react"
+import { Badge } from "@/components/core/badge"
+import { Button } from "@/components/core/button"
+import { cx } from "@/lib/cx"
+
+export interface HeroSectionProps {
+  eyebrow?: string
+  headline?: string
+  subtext?: string
+  primaryCta?: { label: string; href?: string; onClick?: () => void }
+  secondaryCta?: { label: string; href?: string; onClick?: () => void }
+  align?: "left" | "center"
+  className?: string
+}
+
+export function HeroSection({
+  eyebrow = "Now in public beta",
+  headline = "Your app works.\nNow make it look shipped.",
+  subtext = "Production-ready UI blocks stamped directly into your project. No runtime, no lock-in — just clean code you own.",
+  primaryCta = { label: "Browse Blocks", href: "/blocks" },
+  secondaryCta = { label: "View Components", href: "/blocks/components" },
+  align = "center",
+  className,
+}: HeroSectionProps) {
+  return (
+    <section
+      className={cx(
+        "w-full py-24 px-6",
+        align === "center" && "flex flex-col items-center text-center",
+        align === "left" && "flex flex-col items-start text-left max-w-2xl",
+        className
+      )}
+    >
+      {eyebrow && (
+        <Badge variant="neutral" className="mb-6 font-mono text-xs tracking-wider">
+          {eyebrow}
+        </Badge>
+      )}
+
+      <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-foreground leading-tight whitespace-pre-line max-w-3xl">
+        {headline}
+      </h1>
+
+      {subtext && (
+        <p className="mt-6 text-base sm:text-lg text-muted-foreground max-w-xl leading-relaxed">
+          {subtext}
+        </p>
+      )}
+
+      <div className={cx("mt-10 flex flex-wrap gap-3", align === "center" && "justify-center")}>
+        {primaryCta && (
+          <Button
+            asChild={!!primaryCta.href}
+            onClick={primaryCta.onClick}
+            size="lg"
+          >
+            {primaryCta.href ? <a href={primaryCta.href}>{primaryCta.label}</a> : <span>{primaryCta.label}</span>}
+          </Button>
+        )}
+        {secondaryCta && (
+          <Button
+            asChild={!!secondaryCta.href}
+            onClick={secondaryCta.onClick}
+            variant="outline"
+            size="lg"
+          >
+            {secondaryCta.href ? <a href={secondaryCta.href}>{secondaryCta.label}</a> : <span>{secondaryCta.label}</span>}
+          </Button>
+        )}
+      </div>
+    </section>
+  )
+}