@stampui/blocks 1.0.0

package/dist/components/ai-chat-shell.d.ts

@@ -0,0 +1 @@
+export declare function AIChatShell(): import("react/jsx-runtime").JSX.Element;

package/dist/components/ai-chat-shell.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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) => {
+        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 (_jsxs("div", { className: "flex h-[600px] w-full overflow-hidden rounded-xl border border-border bg-background shadow-xl", children: [_jsxs("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"), children: [_jsxs("div", { className: "flex h-14 items-center justify-between px-4 border-b border-border", children: [_jsx("span", { className: "font-semibold text-sm", children: "Chats" }), _jsx(Button, { variant: "quiet", size: "icon", className: "h-8 w-8", children: _jsx(Plus, { className: "h-4 w-4" }) })] }), _jsxs("div", { className: "flex-1 overflow-y-auto p-2 space-y-1", children: [_jsxs(Button, { variant: "quiet", className: "w-full justify-start font-normal text-sm text-muted-foreground hover:text-foreground", children: [_jsx(MessageSquare, { className: "mr-2 h-4 w-4" }), " E-commerce Data Model"] }), _jsxs(Button, { variant: "quiet", className: "w-full justify-start font-normal text-sm text-muted-foreground hover:text-foreground", children: [_jsx(MessageSquare, { className: "mr-2 h-4 w-4" }), " Fix Next.js Hydration Error"] })] }), _jsx("div", { className: "p-2 border-t border-border", children: _jsxs(Button, { variant: "quiet", className: "w-full justify-start text-sm", children: [_jsx(Settings, { className: "mr-2 h-4 w-4" }), " Settings"] }) })] }), _jsxs("div", { className: "flex flex-1 flex-col bg-background", children: [_jsxs("div", { className: "flex h-14 items-center border-b border-border px-4", children: [_jsx(Button, { variant: "quiet", size: "icon", className: "h-8 w-8 mr-2 md:hidden", onClick: () => setSidebarOpen(!sidebarOpen), children: _jsx(Menu, { className: "h-4 w-4" }) }), _jsx("span", { className: "font-medium text-sm", children: "New Chat" })] }), _jsx("div", { className: "flex-1 overflow-y-auto p-4 md:p-6 space-y-6", children: messages.map((m, i) => (_jsx("div", { className: cx("flex w-full", m.role === "user" ? "justify-end" : "justify-start"), children: _jsx("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"), children: m.role === "assistant" && i === messages.length - 1 ? (_jsx(TokenStream, { content: m.content, speed: 20 })) : (_jsx("span", { className: "whitespace-pre-wrap", children: m.content })) }) }, i))) }), _jsx("div", { className: "p-4 md:p-6 pt-0", children: _jsxs("div", { className: "mx-auto max-w-3xl", children: [_jsx(PromptInput, { onSubmit: handleSubmit }), _jsx("div", { className: "mt-2 text-center text-xs text-muted-foreground", children: "AI can make mistakes. Verify important information." })] }) })] })] }));
+}

package/dist/components/prompt-input.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+export interface PromptInputProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onSubmit"> {
+    onValueSubmit?: (value: string) => void;
+}
+export declare const PromptInput: React.ForwardRefExoticComponent<PromptInputProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/prompt-input.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Paperclip, ArrowUp } from "lucide-react";
+import { cx } from "@/lib/cx";
+import { Button } from "@/components/core/button";
+export const PromptInput = React.forwardRef(({ className, onValueSubmit, ...props }, ref) => {
+    const internalRef = React.useRef(null);
+    const [value, setValue] = React.useState("");
+    const handleInput = (e) => {
+        setValue(e.target.value);
+        if (internalRef.current) {
+            internalRef.current.style.height = "auto";
+            internalRef.current.style.height = `${internalRef.current.scrollHeight}px`;
+        }
+        if (props.onChange)
+            props.onChange(e);
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            if (value.trim() && onValueSubmit) {
+                onValueSubmit(value);
+                setValue("");
+                if (internalRef.current)
+                    internalRef.current.style.height = "auto";
+            }
+        }
+        if (props.onKeyDown)
+            props.onKeyDown(e);
+    };
+    return (_jsxs("div", { className: cx("relative flex w-full flex-col rounded-xl border border-border bg-card shadow-sm transition-colors focus-within:border-primary/50 focus-within:ring-1 focus-within:ring-primary/50", className), children: [_jsx("textarea", { ref: (node) => {
+                    internalRef.current = node;
+                    if (typeof ref === "function")
+                        ref(node);
+                    else if (ref)
+                        ref.current = node;
+                }, value: value, onChange: handleInput, onKeyDown: handleKeyDown, rows: 1, placeholder: "Send a message...", className: "max-h-64 min-h-[56px] w-full resize-none bg-transparent px-4 py-4 pr-24 text-sm text-foreground outline-none placeholder:text-muted-foreground", ...props }), _jsxs("div", { className: "absolute bottom-2 right-2 flex items-center gap-1", children: [_jsxs(Button, { variant: "quiet", size: "icon", className: "h-8 w-8 rounded-lg text-muted-foreground hover:text-foreground", children: [_jsx(Paperclip, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Attach file" })] }), _jsxs(Button, { variant: value.trim() ? "solid" : "soft", size: "icon", className: "h-8 w-8 rounded-lg transition-colors", disabled: !value.trim(), onClick: () => {
+                            if (value.trim() && onValueSubmit) {
+                                onValueSubmit(value);
+                                setValue("");
+                                if (internalRef.current)
+                                    internalRef.current.style.height = "auto";
+                            }
+                        }, children: [_jsx(ArrowUp, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Send message" })] })] })] }));
+});
+PromptInput.displayName = "PromptInput";

package/dist/components/registry-card.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import type { BlockManifest } from "../types";
+export interface RegistryCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    block: BlockManifest;
+}
+export declare function RegistryCard({ block, className, ...props }: RegistryCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/registry-card.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { Terminal, Zap, ArrowRight, Lock } from "lucide-react";
+import { Badge } from "@/components/core/badge";
+import { cx } from "@/lib/cx";
+import { CopyButton } from "@/components/core/copy-button";
+/** Intentional fallback for blocks without a generated preview asset. */
+function BlockPreviewFallback({ slug }) {
+    return (_jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-3 bg-surface-2", children: [_jsxs("div", { className: "w-32 h-20 rounded-lg border border-border-soft bg-surface flex flex-col gap-2 p-3", children: [_jsx("div", { className: "h-2 w-3/4 rounded-sm bg-border-strong/60" }), _jsx("div", { className: "h-2 w-1/2 rounded-sm bg-border-strong/40" }), _jsx("div", { className: "mt-auto h-5 w-full rounded-md bg-border-strong/30" })] }), _jsxs("span", { className: "text-[10px] font-mono text-muted-foreground/60", children: [slug, ".tsx"] })] }));
+}
+export function RegistryCard({ block, className, ...props }) {
+    const { title, slug, description, category, status, previewPath, difficulty, frameworks, dependencies, promptReady, version, licenseRequired } = block;
+    const isGated = licenseRequired || status === "pro" || status === "locked";
+    return (_jsxs("div", { className: cx("group flex flex-col overflow-hidden rounded-xl border border-border bg-surface text-card-foreground transition-all hover:border-border-strong", className), ...props, children: [_jsxs(Link, { href: `/blocks/${slug}`, className: "block relative aspect-video w-full overflow-hidden border-b border-border bg-surface-2 outline-none focus-visible:ring-2 focus-visible:ring-border-strong", children: [previewPath ? (_jsx("img", { src: previewPath, alt: `${title} preview`, className: "object-contain w-full h-full p-3" })) : (_jsx(BlockPreviewFallback, { slug: slug })), _jsxs("div", { className: "absolute top-3 right-3 flex gap-1.5", children: [isGated && (_jsxs(Badge, { variant: "signal", className: "bg-surface/80 backdrop-blur-sm uppercase text-[10px] tracking-wider font-mono flex items-center gap-1", children: [_jsx(Lock, { className: "h-2.5 w-2.5" }), " Pro"] })), status === "new" && !isGated && (_jsx(Badge, { variant: "new", className: "bg-surface/80 backdrop-blur-sm uppercase text-[10px] tracking-wider", children: "New" })), promptReady && (_jsxs(Badge, { variant: "neutral", className: "bg-surface/80 backdrop-blur-sm text-[10px] font-mono hidden group-hover:flex items-center gap-1", children: [_jsx(Zap, { className: "h-2.5 w-2.5" }), " Prompt Ready"] }))] })] }), _jsxs("div", { className: "flex flex-1 flex-col p-4", children: [_jsx(Link, { href: `/blocks/${slug}`, className: "outline-none focus-visible:underline", children: _jsx("h3", { className: "font-semibold text-sm leading-tight tracking-tight text-foreground group-hover:text-primary transition-colors", children: title }) }), _jsx("p", { className: "text-xs text-muted-foreground line-clamp-1 mt-1", children: description }), _jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1.5 mt-4 text-[10px] font-mono text-muted-foreground", children: [_jsxs("span", { className: "text-border-strong", children: ["v", version] }), _jsx("span", { className: "text-border-strong", children: "\u00B7" }), _jsx("span", { children: category }), _jsx("span", { className: "text-border-strong", children: "\u00B7" }), _jsx("span", { children: difficulty }), _jsx("span", { className: "text-border-strong", children: "\u00B7" }), _jsx("span", { children: frameworks?.[0] || "react" }), _jsx("span", { className: "text-border-strong", children: "\u00B7" }), _jsxs("span", { children: [dependencies?.length ?? 0, " deps"] })] }), _jsxs("div", { className: "mt-4 pt-4 border-t border-border flex items-center justify-between gap-2", children: [_jsxs("div", { className: "flex items-center gap-2 bg-surface-2 border border-border rounded-md px-2.5 py-1.5 min-w-0 flex-1 max-w-[210px] group/cmd cursor-text", children: [_jsx(Terminal, { className: "h-3 w-3 text-muted-foreground flex-shrink-0" }), _jsxs("code", { className: "text-[10px] font-mono text-muted-foreground truncate flex-1", children: ["floyka add ", slug] }), _jsx(CopyButton, { value: `pnpm dlx floyka add ${slug}`, className: "h-5 w-5 opacity-0 group-hover/cmd:opacity-100 transition-opacity flex-shrink-0" })] }), _jsxs(Link, { href: `/blocks/${slug}`, className: "text-xs font-medium text-foreground flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-all duration-200 ease-out translate-x-1 group-hover:translate-x-0 flex-shrink-0", children: ["View ", _jsx(ArrowRight, { className: "h-3 w-3" })] })] })] })] }));
+}

package/dist/components/registry-explorer.d.ts

@@ -0,0 +1,8 @@
+import type { BlockManifest } from "../types";
+export interface RegistryExplorerProps {
+    initialBlocks: (BlockManifest & {
+        name?: string;
+        previewThumbnail?: string;
+    })[];
+}
+export declare function RegistryExplorer({ initialBlocks }: RegistryExplorerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/registry-explorer.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Search, Check, Command } from "lucide-react";
+import { Input } from "@/components/core/input";
+import { cx } from "@/lib/cx";
+import { RegistryCard } from "./registry-card";
+export function RegistryExplorer({ initialBlocks }) {
+    const [search, setSearch] = React.useState("");
+    const [activeCategory, setActiveCategory] = React.useState("All");
+    const [activeDifficulty, setActiveDifficulty] = React.useState("All");
+    const [activeStatus, setActiveStatus] = React.useState("All");
+    const categories = ["All", ...Array.from(new Set(initialBlocks.map(b => b.category)))];
+    const difficulties = ["All", "beginner", "intermediate", "advanced"];
+    const statuses = ["All", "free", "pro", "new"];
+    const filteredBlocks = React.useMemo(() => {
+        return initialBlocks.filter((block) => {
+            const matchesSearch = block.title.toLowerCase().includes(search.toLowerCase()) ||
+                block.slug.toLowerCase().includes(search.toLowerCase()) ||
+                block.description.toLowerCase().includes(search.toLowerCase());
+            const matchesCategory = activeCategory === "All" || block.category === activeCategory;
+            const matchesDifficulty = activeDifficulty === "All" || block.difficulty === activeDifficulty;
+            const matchesStatus = activeStatus === "All" || block.status === activeStatus;
+            return matchesSearch && matchesCategory && matchesDifficulty && matchesStatus;
+        });
+    }, [initialBlocks, search, activeCategory, activeDifficulty, activeStatus]);
+    return (_jsxs("div", { className: "flex flex-col md:flex-row w-full max-w-[1400px] mx-auto px-6 py-12 gap-10", children: [_jsxs("aside", { className: "w-full md:w-64 flex-shrink-0 flex flex-col gap-8", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("h2", { className: "text-sm font-semibold text-foreground px-2", children: "Registry Search" }), _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "absolute left-3 top-2.5 h-4 w-4 text-muted-foreground" }), _jsx(Input, { type: "text", placeholder: "Search blocks...", value: search, onChange: (e) => setSearch(e.target.value), className: "pl-9 bg-surface-2 border-border h-9 text-sm" }), _jsx("div", { className: "absolute right-2 top-2 text-[10px] text-muted-foreground font-mono bg-surface border border-border px-1.5 py-0.5 rounded", children: "\u2318K" })] })] }), _jsx(FilterGroup, { title: "Categories", items: categories, activeItem: activeCategory, onChange: setActiveCategory }), _jsx(FilterGroup, { title: "Difficulty", items: difficulties, activeItem: activeDifficulty, onChange: setActiveDifficulty }), _jsx(FilterGroup, { title: "Status", items: statuses, activeItem: activeStatus, onChange: setActiveStatus })] }), _jsxs("main", { className: "flex-1 flex flex-col gap-6", children: [_jsx("div", { className: "flex items-center justify-between border-b border-border pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("h1", { className: "text-2xl font-semibold tracking-tight", children: "Blocks Registry" }), _jsxs("span", { className: "text-xs font-mono bg-surface-2 text-muted-foreground px-2 py-0.5 rounded-full border border-border", children: [filteredBlocks.length, " items"] })] }) }), filteredBlocks.length > 0 ? (_jsx("div", { className: "grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3", children: filteredBlocks.map((block) => (_jsx(RegistryCard, { block: block }, block.slug))) })) : (_jsxs("div", { className: "flex flex-col items-center justify-center py-24 text-center border border-dashed border-border rounded-xl", children: [_jsx(Command, { className: "h-8 w-8 text-muted-foreground mb-4 opacity-50" }), _jsx("h3", { className: "text-lg font-medium", children: "No blocks found" }), _jsx("p", { className: "text-sm text-muted-foreground mt-1 max-w-sm", children: "We couldn't find any blocks matching your current filters. Try adjusting your search or clearing filters." }), _jsx("button", { onClick: () => {
+                                    setSearch("");
+                                    setActiveCategory("All");
+                                    setActiveDifficulty("All");
+                                    setActiveStatus("All");
+                                }, className: "mt-6 text-sm text-foreground font-medium underline underline-offset-4 decoration-border-strong hover:decoration-foreground", children: "Clear all filters" })] }))] })] }));
+}
+function FilterGroup({ title, items, activeItem, onChange }) {
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("h3", { className: "text-xs font-medium text-muted-foreground px-2 uppercase tracking-wider", children: title }), _jsx("div", { className: "flex flex-col gap-0.5", children: items.map((item) => (_jsxs("button", { onClick: () => onChange(item), className: cx("flex items-center justify-between px-2 py-1.5 text-sm rounded-md transition-colors text-left", activeItem === item
+                        ? "bg-surface-2 text-foreground font-medium"
+                        : "text-muted-foreground hover:bg-surface-2/50 hover:text-foreground"), children: [_jsx("span", { className: "capitalize", children: item }), activeItem === item && _jsx(Check, { className: "h-3.5 w-3.5 text-foreground" })] }, item))) })] }));
+}

package/dist/components/token-stream.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+export interface TokenStreamProps extends React.HTMLAttributes<HTMLDivElement> {
+    content: string;
+    speed?: number;
+    onComplete?: () => void;
+}
+export declare function TokenStream({ content, speed, onComplete, className, ...props }: TokenStreamProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/token-stream.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cx } from "@/lib/cx";
+export function TokenStream({ content, speed = 15, onComplete, className, ...props }) {
+    const [displayedContent, setDisplayedContent] = React.useState("");
+    const [currentIndex, setCurrentIndex] = React.useState(0);
+    React.useEffect(() => {
+        if (currentIndex < content.length) {
+            const timeout = setTimeout(() => {
+                setDisplayedContent((prev) => prev + content[currentIndex]);
+                setCurrentIndex((prev) => prev + 1);
+            }, speed);
+            return () => clearTimeout(timeout);
+        }
+        else if (onComplete) {
+            onComplete();
+        }
+    }, [content, currentIndex, speed, onComplete]);
+    return (_jsxs("div", { className: cx("relative inline-block", className), ...props, children: [_jsx("span", { className: "whitespace-pre-wrap", children: displayedContent }), currentIndex < content.length && (_jsx("span", { className: "ml-1 inline-block h-4 w-1 animate-pulse bg-primary align-middle" }))] }));
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./types";
+export * from "./manifests";

package/dist/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// Data and type exports — compiled by tsc into dist/
+__exportStar(require("./types"), exports);
+__exportStar(require("./manifests"), exports);
+// UI component exports — consumed directly by Next.js via transpilePackages.
+// These are NOT compiled by tsc (they import from web app internals).
+// Import paths for UI: "@stampui/blocks/src/components/registry-card"
+// or via the web app's tsconfig path alias "@stampui/blocks" -> src/index.ts

package/dist/manifests.d.ts

@@ -0,0 +1,3 @@
+import { BlockManifest } from "./types";
+export declare const manifests: Record<string, BlockManifest>;
+export declare const blockList: BlockManifest[];