4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T29f5,"use client"; import type { ComponentProps, KeyboardEvent } from "react"; import { useCallback, useEffect, useRef, useState } from "react"; import type { AppPlan } from "@/components/status-badge/status-badge"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; export type AppCreatorProps = Omit, "onSubmit"> & { /** Called with the prompt and plan when the user creates. */ onCreate: (prompt: string, plan: AppPlan) => void; /** Show the in-flight state and lock the controls. */ isCreating?: boolean; placeholder?: string; /** * Example prompts cycled through the placeholder with a typewriter * rhythm while the field is empty. Overrides `placeholder`. */ placeholderPrompts?: string[]; /** Uncontrolled initial plan. */ defaultPlan?: AppPlan; /** Label for the create action. */ actionLabel?: string; disabled?: boolean; }; /* ───────────────────────────────────────────────────────── * The "describe an app" bar: one bordered surface whose * border warms neutrally while you type (color belongs to * the CTA and caret, never the frame). The prompt is an * auto-growing textarea; the foot holds a quiet free/paid * segment on the left and the create action on the right. * Enter creates (a quiet "press ⏎" hint appears once the * prompt is satisfied), Shift+Enter breaks a line. While * creating, everything locks and the CTA shimmers — the * prompt stays visible so the wait has context. * ───────────────────────────────────────────────────────── */ const PLANS: AppPlan[] = ["free", "paid"]; /* ───────────────────────────────────────────────────────── * PLACEHOLDER STORYBOARD — "the pitch" * * While the field is empty, example prompts type themselves * out character by character, hold, then erase — the bar * keeps pitching ideas until you have your own. Typing a * single character stops the show instantly. Static first * prompt under reduced motion. * ───────────────────────────────────────────────────────── */ const TYPE_MS = 34; const ERASE_MS = 12; const HOLD_MS = 2200; const BREATH_MS = 600; const CARET = "▍"; /** Cycles a typewriter placeholder through the given prompts. */ const useTypewriter = (prompts: string[] | undefined, active: boolean) => { const [text, setText] = useState(prompts?.[0] ?? ""); useEffect(() => { if (!(prompts?.length && active)) { return; } const reduced = window.matchMedia( "(prefers-reduced-motion: reduce)" ).matches; if (reduced) { const timer = window.setTimeout(() => setText(prompts[0] ?? ""), 0); return () => window.clearTimeout(timer); } let index = 0; let length = 0; let erasing = false; let timer = 0; const tick = () => { const prompt = prompts[index % prompts.length] ?? ""; if (erasing) { length -= 1; setText(prompt.slice(0, length) + CARET); if (length === 0) { erasing = false; index += 1; // A breath of empty field before the next pitch begins. timer = window.setTimeout(tick, BREATH_MS); return; } timer = window.setTimeout(tick, ERASE_MS); return; } length += 1; setText(prompt.slice(0, length) + CARET); if (length >= prompt.length) { erasing = true; timer = window.setTimeout(tick, HOLD_MS); return; } timer = window.setTimeout(tick, TYPE_MS); }; timer = window.setTimeout(tick, 400); return () => window.clearTimeout(timer); }, [prompts, active]); return text; }; /* ───────────────────────────────────────────────────────── * CTA STORYBOARD — "ignition" * * empty dormant ghost: hairline border, muted label * with the same slow shimmer drifting across — * the button breathes even before it's earned. * satisfied ignition: the button fills to neon on a * 300ms ramp, a soft primary glow blooms, and * a slow shimmer sweep loops across the label — * the moment the app becomes possible. * hover the glow leans brighter; color and shadow * only, nothing moves. * creating "Creating…" under the continuous shimmer * (the platform's working language); all * motion stops under reduced motion. * ───────────────────────────────────────────────────────── */ /* The charged CTA speaks through color and the sweep alone — no glow. */ const CTA_GLOW = ""; /** The ignition CTA: ghost until earned, neon + sweep after. */ const CreateAction = ({ actionLabel, isCreating, locked, onCreate, state, }: { actionLabel: string; isCreating: boolean; locked: boolean; onCreate: () => void; state: "off" | "ready" | "creating"; }) => ( ); export const AppCreator = ({ actionLabel = "Create app", className, defaultPlan = "free", disabled = false, isCreating = false, onCreate, placeholder = "Describe the app you want to build…", placeholderPrompts, ...props }: AppCreatorProps) => { const [prompt, setPrompt] = useState(""); const [plan, setPlan] = useState(defaultPlan); const textareaRef = useRef(null); const locked = disabled || isCreating; const typed = useTypewriter( placeholderPrompts, prompt.length === 0 && !locked ); const livePlaceholder = placeholderPrompts?.length ? typed : placeholder; const autoGrow = useCallback(() => { const textarea = textareaRef.current; if (textarea) { textarea.style.height = "auto"; textarea.style.height = `${Math.min(textarea.scrollHeight, 160)}px`; } }, []); const create = () => { const trimmed = prompt.trim(); if (trimmed.length > 0 && !locked) { onCreate(trimmed, plan); } }; const ctaState = (): "off" | "ready" | "creating" => { if (isCreating) { return "creating"; } return prompt.trim().length > 0 ? "ready" : "off"; }; const handleKeyDown = (event: KeyboardEvent) => { if (event.key === "Enter" && !event.shiftKey) { event.preventDefault(); create(); } }; return (

{
          setPrompt(event.target.value);
          autoGrow();
        }}
        onKeyDown={handleKeyDown}
        placeholder={livePlaceholder}
        ref={textareaRef}
        rows={2}
        value={prompt}
      />
      <div className="flex items-center gap-1.5 border-border/40 border-t p-2">
        <fieldset
          className="relative isolate grid grid-cols-2 rounded-sm border border-border/60 p-0.5"
          data-slot="app-creator-plans"
          disabled={locked}
        >
          <legend className="sr-only">Plan</legend>
          <span
            aria-hidden="true"
            className={cn(
              // Nested radius: container 4px minus the 2px gap.
              "-z-10 absolute inset-y-0.5 left-0.5 w-[calc(50%-2px)] rounded-[2px] transition-[translate,background-color,border-color] duration-300 ease-[cubic-bezier(0.34,1.3,0.64,1)] motion-reduce:transition-none",
              plan === "paid"
                ? "translate-x-full border border-primary/40 bg-primary/10"
                : "border border-transparent bg-muted/40"
            )}
            data-slot="app-creator-plan-thumb"
          />
          {PLANS.map((option) => (
            <label
              className={cn(
                "cursor-pointer px-3 py-1 text-center font-mono text-xs transition-colors duration-200 focus-within:outline focus-within:outline-primary",
                locked && "cursor-not-allowed",
                plan === option && option === "paid" && "text-primary",
                plan === option && option === "free" && "text-foreground",
                plan !== option && "text-muted-foreground hover:text-foreground"
              )}
              key={option}
            >
              <input
                checked={plan === option}
                className="sr-only"
                name="app-creator-plan"
                onChange={() => setPlan(option)}
                type="radio"
                value={option}
              />
              {option}
            </label>
          ))}
        </fieldset>
        <span
          aria-hidden="true"
          className={cn(
            "ml-auto font-mono text-[10px] text-muted-foreground/60 transition-opacity duration-300",
            ctaState() === "ready" ? "opacity-100" : "opacity-0"
          )}
        >
          press ⏎
        </span>
        <CreateAction
          actionLabel={actionLabel}
          isCreating={isCreating}
          locked={locked}
          onCreate={create}
          state={ctaState()}
        />
      </div>
    </div>
  );
};
4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@hugeicons/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@hugeicons/react"}]]}]}],["$","li","@hugeicons/core-free-icons",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Fcore-free-icons","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@hugeicons/core-free-icons"}]]}]}]]}],["$","$L4e",null,{"namespace":"@neon-ui","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"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/components/app-creator/app-creator.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>