{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "app-creator", "title": "AppCreator", "description": "The describe-an-app bar: auto-growing prompt, free/paid plan segment, and a create action with an in-flight state.", "dependencies": [ "@hugeicons/react", "@hugeicons/core-free-icons" ], "registryDependencies": [ "utils", "https://ui.neon.com/r/neon-tokens.json", "https://ui.neon.com/r/button.json", "https://ui.neon.com/r/status-badge.json" ], "files": [ { "path": "src/components/app-creator/app-creator.tsx", "content": "\"use client\";\n\nimport type { ComponentProps, KeyboardEvent } from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport type { AppPlan } from \"@/components/status-badge/status-badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nexport type AppCreatorProps = Omit, \"onSubmit\"> & {\n /** Called with the prompt and plan when the user creates. */\n onCreate: (prompt: string, plan: AppPlan) => void;\n /** Show the in-flight state and lock the controls. */\n isCreating?: boolean;\n placeholder?: string;\n /**\n * Example prompts cycled through the placeholder with a typewriter\n * rhythm while the field is empty. Overrides `placeholder`.\n */\n placeholderPrompts?: string[];\n /** Uncontrolled initial plan. */\n defaultPlan?: AppPlan;\n /** Label for the create action. */\n actionLabel?: string;\n disabled?: boolean;\n};\n\n/* ─────────────────────────────────────────────────────────\n * The \"describe an app\" bar: one bordered surface whose\n * border warms neutrally while you type (color belongs to\n * the CTA and caret, never the frame). The prompt is an\n * auto-growing textarea; the foot holds a quiet free/paid\n * segment on the left and the create action on the right.\n * Enter creates (a quiet \"press ⏎\" hint appears once the\n * prompt is satisfied), Shift+Enter breaks a line. While\n * creating, everything locks and the CTA shimmers — the\n * prompt stays visible so the wait has context.\n * ───────────────────────────────────────────────────────── */\nconst PLANS: AppPlan[] = [\"free\", \"paid\"];\n\n/* ─────────────────────────────────────────────────────────\n * PLACEHOLDER STORYBOARD — \"the pitch\"\n *\n * While the field is empty, example prompts type themselves\n * out character by character, hold, then erase — the bar\n * keeps pitching ideas until you have your own. Typing a\n * single character stops the show instantly. Static first\n * prompt under reduced motion.\n * ───────────────────────────────────────────────────────── */\nconst TYPE_MS = 34;\nconst ERASE_MS = 12;\nconst HOLD_MS = 2200;\nconst BREATH_MS = 600;\nconst CARET = \"▍\";\n\n/** Cycles a typewriter placeholder through the given prompts. */\nconst useTypewriter = (prompts: string[] | undefined, active: boolean) => {\n const [text, setText] = useState(prompts?.[0] ?? \"\");\n\n useEffect(() => {\n if (!(prompts?.length && active)) {\n return;\n }\n\n const reduced = window.matchMedia(\n \"(prefers-reduced-motion: reduce)\"\n ).matches;\n\n if (reduced) {\n const timer = window.setTimeout(() => setText(prompts[0] ?? \"\"), 0);\n return () => window.clearTimeout(timer);\n }\n\n let index = 0;\n let length = 0;\n let erasing = false;\n let timer = 0;\n\n const tick = () => {\n const prompt = prompts[index % prompts.length] ?? \"\";\n\n if (erasing) {\n length -= 1;\n setText(prompt.slice(0, length) + CARET);\n\n if (length === 0) {\n erasing = false;\n index += 1;\n // A breath of empty field before the next pitch begins.\n timer = window.setTimeout(tick, BREATH_MS);\n return;\n }\n\n timer = window.setTimeout(tick, ERASE_MS);\n return;\n }\n\n length += 1;\n setText(prompt.slice(0, length) + CARET);\n\n if (length >= prompt.length) {\n erasing = true;\n timer = window.setTimeout(tick, HOLD_MS);\n return;\n }\n\n timer = window.setTimeout(tick, TYPE_MS);\n };\n\n timer = window.setTimeout(tick, 400);\n return () => window.clearTimeout(timer);\n }, [prompts, active]);\n\n return text;\n};\n\n/* ─────────────────────────────────────────────────────────\n * CTA STORYBOARD — \"ignition\"\n *\n * empty dormant ghost: hairline border, muted label\n * with the same slow shimmer drifting across —\n * the button breathes even before it's earned.\n * satisfied ignition: the button fills to neon on a\n * 300ms ramp, a soft primary glow blooms, and\n * a slow shimmer sweep loops across the label —\n * the moment the app becomes possible.\n * hover the glow leans brighter; color and shadow\n * only, nothing moves.\n * creating \"Creating…\" under the continuous shimmer\n * (the platform's working language); all\n * motion stops under reduced motion.\n * ───────────────────────────────────────────────────────── */\n/* The charged CTA speaks through color and the sweep alone — no glow. */\nconst CTA_GLOW = \"\";\n\n/** The ignition CTA: ghost until earned, neon + sweep after. */\nconst CreateAction = ({\n actionLabel,\n isCreating,\n locked,\n onCreate,\n state,\n}: {\n actionLabel: string;\n isCreating: boolean;\n locked: boolean;\n onCreate: () => void;\n state: \"off\" | \"ready\" | \"creating\";\n}) => (\n \n \n {isCreating ? \"Creating…\" : actionLabel}\n \n \n);\n\nexport const AppCreator = ({\n actionLabel = \"Create app\",\n className,\n defaultPlan = \"free\",\n disabled = false,\n isCreating = false,\n onCreate,\n placeholder = \"Describe the app you want to build…\",\n placeholderPrompts,\n ...props\n}: AppCreatorProps) => {\n const [prompt, setPrompt] = useState(\"\");\n const [plan, setPlan] = useState(defaultPlan);\n const textareaRef = useRef(null);\n const locked = disabled || isCreating;\n const typed = useTypewriter(\n placeholderPrompts,\n prompt.length === 0 && !locked\n );\n const livePlaceholder = placeholderPrompts?.length ? typed : placeholder;\n\n const autoGrow = useCallback(() => {\n const textarea = textareaRef.current;\n\n if (textarea) {\n textarea.style.height = \"auto\";\n textarea.style.height = `${Math.min(textarea.scrollHeight, 160)}px`;\n }\n }, []);\n\n const create = () => {\n const trimmed = prompt.trim();\n\n if (trimmed.length > 0 && !locked) {\n onCreate(trimmed, plan);\n }\n };\n\n const ctaState = (): \"off\" | \"ready\" | \"creating\" => {\n if (isCreating) {\n return \"creating\";\n }\n\n return prompt.trim().length > 0 ? \"ready\" : \"off\";\n };\n\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Enter\" && !event.shiftKey) {\n event.preventDefault();\n create();\n }\n };\n\n return (\n \n {\n setPrompt(event.target.value);\n autoGrow();\n }}\n onKeyDown={handleKeyDown}\n placeholder={livePlaceholder}\n ref={textareaRef}\n rows={2}\n value={prompt}\n />\n
\n \n Plan\n \n {PLANS.map((option) => (\n \n setPlan(option)}\n type=\"radio\"\n value={option}\n />\n {option}\n \n ))}\n \n \n press ⏎\n \n \n
\n \n );\n};\n", "type": "registry:component" } ], "type": "registry:component" }