{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ai-prompt-flow",
  "title": "UI AI Prompt Flow",
  "description": "An AI prompt composition: a prompt types into the field, the Generate button runs hover → press → loading, a skeleton shimmer reveals, then crossfades into the generated answer, and a ready toast slides in. A pure orchestrator — the shimmer is owned by the skeleton-block motion atom; every other channel comes from a composed primitive's hook.",
  "dependencies": ["remotion"],
  "registryDependencies": [
    "@remocn/remocn-ui",
    "@remocn/input",
    "@remocn/button",
    "@remocn/skeleton",
    "@remocn/skeleton-block",
    "@remocn/toast"
  ],
  "files": [
    {
      "path": "registry/remocn-ui/ai-prompt-flow/index.tsx",
      "content": "\"use client\";\n\nimport { Button } from \"@/components/remocn/button\";\nimport { Input } from \"@/components/remocn/input\";\nimport { Skeleton } from \"@/components/remocn/skeleton\";\nimport { SkeletonBlock } from \"@/components/remocn/skeleton-block\";\nimport { Toast } from \"@/components/remocn/toast\";\nimport { useButtonTransition } from \"@/components/remocn/use-button-transition\";\nimport { useInputTransition } from \"@/components/remocn/use-input-transition\";\nimport { useSkeletonTransition } from \"@/components/remocn/use-skeleton-transition\";\nimport { useToastTransition } from \"@/components/remocn/use-toast-transition\";\nimport { type RemocnTheme, useRemocnTheme } from \"@/lib/remocn-ui\";\n\nexport interface AiPromptFlowProps {\n  prompt?: string;\n  buttonLabel?: string;\n  answerLines?: string[];\n  toastTitle?: string;\n  theme?: Partial<RemocnTheme>;\n}\n\nconst STAGE_W = 1280;\nconst PROMPT_W = 520;\nconst PROMPT_LEFT = (STAGE_W - PROMPT_W) / 2;\nconst PROMPT_TOP = 168;\nconst PROMPT_H = 92;\n\nconst BTN_W = 200;\nconst BTN_LEFT = (STAGE_W - BTN_W) / 2;\nconst BTN_TOP = 278;\nconst BTN_H = 64;\n\nconst ANSWER_W = 560;\nconst ANSWER_LEFT = (STAGE_W - ANSWER_W) / 2;\nconst ANSWER_TOP = 380;\n\nconst DEFAULT_ANSWER = [\n  \"The thread debates the Q3 roadmap: ship the editor first,\",\n  \"defer billing to Q4, and pull the migration forward so\",\n  \"infra is unblocked before the team scales next quarter.\",\n];\n\nexport function AiPromptFlow({\n  prompt = \"Summarize this thread\",\n  buttonLabel = \"Generate\",\n  answerLines = DEFAULT_ANSWER,\n  toastTitle = \"Response ready\",\n  theme,\n}: AiPromptFlowProps) {\n  const resolved = useRemocnTheme(theme);\n  const opts = { theme };\n\n  const inputStyle = useInputTransition(\n    [\n      { at: 0, state: \"active\", duration: 1 },\n      { at: 0, state: \"typing\", duration: 50 },\n    ],\n    opts,\n  );\n\n  const buttonStyle = useButtonTransition(\n    [\n      { at: 52, state: \"hover\", duration: 6 },\n      { at: 58, state: \"press\", duration: 4 },\n      { at: 62, state: \"loading\", duration: 4 },\n    ],\n    opts,\n  );\n\n  const skeletonStyle = useSkeletonTransition(\n    [\n      { at: 64, state: \"loading\", duration: 1 },\n      { at: 150, state: \"loaded\", duration: 16 },\n    ],\n    {},\n  );\n\n  const panelOpacity = buttonStyle.spinnerOpacity;\n\n  const toastStyle = useToastTransition(\n    [\n      { at: 160, state: \"visible\", duration: 14 },\n      { at: 220, state: \"hidden\", duration: 14 },\n    ],\n    {},\n  );\n\n  return (\n    <div\n      style={{\n        position: \"relative\",\n        width: \"100%\",\n        height: \"100%\",\n        background: \"transparent\",\n      }}\n    >\n      {}\n      <div\n        style={{\n          position: \"absolute\",\n          left: PROMPT_LEFT,\n          top: PROMPT_TOP,\n          width: PROMPT_W,\n          height: PROMPT_H,\n        }}\n      >\n        <Input\n          placeholder=\"Ask anything…\"\n          value={prompt}\n          style={inputStyle}\n          theme={theme}\n        />\n      </div>\n\n      {}\n      <div\n        style={{\n          position: \"absolute\",\n          left: BTN_LEFT,\n          top: BTN_TOP,\n          width: BTN_W,\n          height: BTN_H,\n        }}\n      >\n        <Button label={buttonLabel} style={buttonStyle} theme={theme} />\n      </div>\n\n      {}\n      <div\n        style={{\n          position: \"absolute\",\n          left: ANSWER_LEFT,\n          top: ANSWER_TOP,\n          width: ANSWER_W,\n          display: \"flex\",\n          justifyContent: \"center\",\n          opacity: panelOpacity,\n        }}\n      >\n        <Skeleton\n          style={skeletonStyle}\n          theme={theme}\n          placeholder={\n            <div\n              style={{\n                display: \"flex\",\n                flexDirection: \"column\",\n                gap: 14,\n                width: ANSWER_W,\n              }}\n            >\n              {answerLines.map((_, i) => (\n                <SkeletonBlock\n                  key={i}\n                  width={i === answerLines.length - 1 ? \"70%\" : \"100%\"}\n                  height={18}\n                  baseColor={resolved.muted}\n                />\n              ))}\n            </div>\n          }\n        >\n          <div\n            style={{\n              display: \"flex\",\n              flexDirection: \"column\",\n              gap: 8,\n              width: ANSWER_W,\n              fontFamily:\n                \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\",\n              fontSize: 18,\n              lineHeight: 1.45,\n              letterSpacing: \"-0.01em\",\n              color: resolved.foreground,\n            }}\n          >\n            {answerLines.map((line, i) => (\n              <span key={i}>{line}</span>\n            ))}\n          </div>\n        </Skeleton>\n      </div>\n\n      {}\n      <div style={{ position: \"absolute\", right: 32, bottom: 32 }}>\n        <Toast\n          title={toastTitle}\n          variant=\"success\"\n          style={toastStyle}\n          theme={theme}\n        />\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/ai-prompt-flow.tsx"
    }
  ],
  "type": "registry:component"
}