proto-plugin 0.1.0 → 0.1.2

package/src/components/prototypes/prototype-create-exploration-modal.tsx

@@ -1,22 +1,13 @@
 "use client";
 
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogTitle,
-} from "@prototype/components/ui/dialog";
+import { PrototypeToolDialog } from "@prototype/components/platform-ui/prototype-tool-dialog";
+import { PrototypeBriefTextarea } from "@prototype/components/prototypes/prototype-brief-field";
+import { Button } from "@prototype/components/ui/button";
+import { Switch } from "@prototype/components/ui/switch";
 import { buildCreateDesignExplorationCopyText } from "@prototype/lib/prototypes/design-exploration-types";
 import useCopyToClipboard from "@prototype/lib/use-copy-to-clipboard";
-import { X } from "lucide-react";
 import { useEffect, useState } from "react";
 
-const MODAL_CHROME_BUTTON_CLASS =
-  "text-muted-foreground hover:text-foreground inline-flex size-8 shrink-0 items-center justify-center rounded-sm border-0 bg-transparent p-0 opacity-70 transition-opacity duration-200 ease hover:opacity-100 outline-none focus:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-40 disabled:hover:opacity-40 disabled:hover:text-muted-foreground motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
-
-const BRIEF_TEXTAREA_CLASS =
-  "field-sizing-content min-h-[min(50vh,20rem)] w-full resize-y border-0 bg-transparent px-0 py-0 text-sm leading-relaxed text-foreground shadow-none outline-none placeholder:text-muted-foreground focus-visible:ring-0";
-
 export type PrototypeCreateExplorationModalProps = {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -31,6 +22,7 @@ export function PrototypeCreateExplorationModal({
   existingExplorations,
 }: PrototypeCreateExplorationModalProps) {
   const [brief, setBrief] = useState("");
+  const [includeMobbin, setIncludeMobbin] = useState(true);
   const { copy, icon, isCopied } = useCopyToClipboard();
   const canCopy = brief.trim().length > 0;
 
@@ -51,67 +43,52 @@ export function PrototypeCreateExplorationModal({
         existingExplorations,
         origin,
         briefText: brief,
+        includeMobbin,
       }),
     );
   };
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent
-        showCloseButton={false}
-        className="tool-dialog-surface flex max-h-[min(92svh,calc(100%-2rem))] w-[min(42rem,calc(100vw-2rem))] max-w-[min(42rem,calc(100vw-2rem))] flex-col gap-0 overflow-hidden border-0 p-0 sm:max-w-[min(42rem,calc(100vw-2rem))]"
-      >
-        <div className="flex items-start justify-between gap-3 px-5 py-4">
-          <div className="flex min-w-0 flex-col gap-1">
-            <DialogTitle className="text-base font-medium text-foreground">
-              New exploration
-            </DialogTitle>
-            <p className="text-sm text-muted-foreground">
-              Describe what you&apos;re trying to build, and we&apos;ll give you
-              a few different versions.
-            </p>
-          </div>
-          <DialogClose className={MODAL_CHROME_BUTTON_CLASS}>
-            <X />
-            <span className="sr-only">Close</span>
-          </DialogClose>
-        </div>
-
-        <div
-          className="h-px w-full shrink-0 bg-border"
-          role="separator"
-          aria-hidden
-        />
-
-        <div className="flex min-h-0 flex-1 flex-col overflow-y-auto px-5 py-4">
-          <textarea
-            value={brief}
-            onChange={(event) => setBrief(event.target.value)}
-            placeholder="e.g. Give me a settings page with a profile picture, name, plan, and bio"
-            aria-label="Exploration brief"
-            className={BRIEF_TEXTAREA_CLASS}
-          />
-        </div>
-
-        <div
-          className="h-px w-full shrink-0 bg-border"
-          role="separator"
-          aria-hidden
-        />
-
-        <div className="flex items-center justify-end gap-2 px-5 py-4">
-          <button
+    <PrototypeToolDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title="New exploration"
+      description="Describe what you're trying to build, and we'll give you a few different versions."
+      footerClassName="justify-between gap-4"
+      footer={
+        <>
+          <label className="flex cursor-pointer items-center gap-2">
+            <Switch
+              checked={includeMobbin}
+              onCheckedChange={setIncludeMobbin}
+              aria-label="Gather references from Mobbin"
+              className="data-[state=checked]:bg-foreground"
+            />
+            <span className="text-sm text-muted-foreground">
+              Gather references from Mobbin
+            </span>
+          </label>
+          <Button
             type="button"
+            variant="chrome"
+            size="sm"
+            className="h-8 gap-1.5"
             disabled={!canCopy}
             onClick={handleCopy}
-            className="inline-flex h-9 items-center gap-2 rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-colors duration-200 ease hover:bg-primary-dark disabled:pointer-events-none disabled:opacity-50"
             aria-label="Copy exploration brief and prompt"
           >
-            {isCopied ? "Copied" : "Copy prompt"}
+            {isCopied ? "Copied prompt" : "Copy prompt"}
             {icon}
-          </button>
-        </div>
-      </DialogContent>
-    </Dialog>
+          </Button>
+        </>
+      }
+    >
+      <PrototypeBriefTextarea
+        value={brief}
+        onChange={(event) => setBrief(event.target.value)}
+        placeholder="e.g. Give me a settings page with a profile picture, name, plan, and bio"
+        aria-label="Exploration brief"
+      />
+    </PrototypeToolDialog>
   );
 }

package/src/components/prototypes/prototype-create-prototype-modal.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { PrototypeToolDialog } from "@prototype/components/platform-ui/prototype-tool-dialog";
+import { Button } from "@prototype/components/ui/button";
+import { Input } from "@prototype/components/ui/input";
+import { Label } from "@prototype/components/ui/label";
+import {
+  PROTOTYPE_BRIEF_FIELD_BORDER_CLASS,
+  PrototypeBriefTextarea,
+} from "@prototype/components/prototypes/prototype-brief-field";
+import { buildCreatePrototypeCopyText } from "@prototype/lib/prototypes/create-prototype-prompt";
+import useCopyToClipboard from "@prototype/lib/use-copy-to-clipboard";
+import { useEffect, useId, useState } from "react";
+
+export type PrototypeCreatePrototypeModalProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+
+export function PrototypeCreatePrototypeModal({
+  open,
+  onOpenChange,
+}: PrototypeCreatePrototypeModalProps) {
+  const titleFieldId = useId();
+  const descriptionFieldId = useId();
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const { copy, icon, isCopied } = useCopyToClipboard();
+  const canCopy = title.trim().length > 0 && description.trim().length > 0;
+
+  useEffect(() => {
+    if (!open) {
+      setTitle("");
+      setDescription("");
+    }
+  }, [open]);
+
+  const handleCopy = () => {
+    if (!canCopy) return;
+
+    const origin =
+      typeof window !== "undefined" ? window.location.origin : undefined;
+
+    copy(
+      buildCreatePrototypeCopyText({
+        title,
+        description,
+        origin,
+      }),
+    );
+  };
+
+  return (
+    <PrototypeToolDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title="New prototype"
+      description="Name the prototype and describe what you want to build, then copy the prompt into your agent to scaffold it."
+      bodyClassName="gap-4"
+      footerClassName="justify-end"
+      footer={
+        <Button
+          type="button"
+          variant="chrome"
+          size="sm"
+          className="h-8 gap-1.5"
+          disabled={!canCopy}
+          onClick={handleCopy}
+          aria-label="Copy prototype brief and prompt"
+        >
+          {isCopied ? "Copied prompt" : "Copy prompt"}
+          {icon}
+        </Button>
+      }
+    >
+      <div className="flex flex-col gap-1.5">
+        <Label htmlFor={titleFieldId} className="text-foreground">
+          Title
+        </Label>
+        <Input
+          id={titleFieldId}
+          value={title}
+          onChange={(event) => setTitle(event.target.value)}
+          placeholder="ex. Team Settings"
+          className={PROTOTYPE_BRIEF_FIELD_BORDER_CLASS}
+        />
+      </div>
+      <div className="flex min-h-0 flex-1 flex-col gap-1.5">
+        <Label htmlFor={descriptionFieldId} className="text-foreground">
+          Description
+        </Label>
+        <PrototypeBriefTextarea
+          id={descriptionFieldId}
+          value={description}
+          onChange={(event) => setDescription(event.target.value)}
+          placeholder="ex. Replicate the team settings page from the source app — members list, invite flow, and role badges."
+          aria-label="Prototype description"
+        />
+      </div>
+    </PrototypeToolDialog>
+  );
+}

package/src/components/prototypes/prototype-create-state-modal.tsx

@@ -1,22 +1,12 @@
 "use client";
 
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogTitle,
-} from "@prototype/components/ui/dialog";
+import { PrototypeToolDialog } from "@prototype/components/platform-ui/prototype-tool-dialog";
+import { PrototypeBriefTextarea } from "@prototype/components/prototypes/prototype-brief-field";
+import { Button } from "@prototype/components/ui/button";
 import { buildCreatePreviewStateCopyText } from "@prototype/lib/prototypes/prototype-preview-state-types";
 import useCopyToClipboard from "@prototype/lib/use-copy-to-clipboard";
-import { X } from "lucide-react";
 import { useEffect, useState } from "react";
 
-const MODAL_CHROME_BUTTON_CLASS =
-  "text-muted-foreground hover:text-foreground inline-flex size-8 shrink-0 items-center justify-center rounded-sm border-0 bg-transparent p-0 opacity-70 transition-opacity duration-200 ease hover:opacity-100 outline-none focus:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-40 disabled:hover:opacity-40 disabled:hover:text-muted-foreground motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
-
-const BRIEF_TEXTAREA_CLASS =
-  "field-sizing-content min-h-[min(50vh,20rem)] w-full resize-y border-0 bg-transparent px-0 py-0 text-sm leading-relaxed text-foreground shadow-none outline-none placeholder:text-muted-foreground focus-visible:ring-0";
-
 export type PrototypeCreateStateModalProps = {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -56,62 +46,33 @@ export function PrototypeCreateStateModal({
   };
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent
-        showCloseButton={false}
-        className="tool-dialog-surface flex max-h-[min(92svh,calc(100%-2rem))] w-[min(42rem,calc(100vw-2rem))] max-w-[min(42rem,calc(100vw-2rem))] flex-col gap-0 overflow-hidden border-0 p-0 sm:max-w-[min(42rem,calc(100vw-2rem))]"
-      >
-        <div className="flex items-start justify-between gap-3 px-5 py-4">
-          <div className="flex min-w-0 flex-col gap-1">
-            <DialogTitle className="text-base font-medium text-foreground">
-              New state
-            </DialogTitle>
-            <p className="text-sm text-muted-foreground">
-              Describe a page state to add — loading, empty, error, or any other
-              preview mode.
-            </p>
-          </div>
-          <DialogClose className={MODAL_CHROME_BUTTON_CLASS}>
-            <X />
-            <span className="sr-only">Close</span>
-          </DialogClose>
-        </div>
-
-        <div
-          className="h-px w-full shrink-0 bg-border"
-          role="separator"
-          aria-hidden
-        />
-
-        <div className="flex min-h-0 flex-1 flex-col overflow-y-auto px-5 py-4">
-          <textarea
-            value={brief}
-            onChange={(event) => setBrief(event.target.value)}
-            placeholder="e.g. Add an empty state when the user has no API keys yet"
-            aria-label="State brief"
-            className={BRIEF_TEXTAREA_CLASS}
-          />
-        </div>
-
-        <div
-          className="h-px w-full shrink-0 bg-border"
-          role="separator"
-          aria-hidden
-        />
-
-        <div className="flex items-center justify-end gap-2 px-5 py-4">
-          <button
-            type="button"
-            disabled={!canCopy}
-            onClick={handleCopy}
-            className="inline-flex h-9 items-center gap-2 rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-colors duration-200 ease hover:bg-primary-dark disabled:pointer-events-none disabled:opacity-50"
-            aria-label="Copy state brief and prompt"
-          >
-            {isCopied ? "Copied" : "Copy prompt"}
-            {icon}
-          </button>
-        </div>
-      </DialogContent>
-    </Dialog>
+    <PrototypeToolDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title="New state"
+      description="Describe a page state to add — loading, empty, error, or any other preview mode."
+      footerClassName="justify-end"
+      footer={
+        <Button
+          type="button"
+          variant="chrome"
+          size="sm"
+          className="h-8 gap-1.5"
+          disabled={!canCopy}
+          onClick={handleCopy}
+          aria-label="Copy state brief and prompt"
+        >
+          {isCopied ? "Copied prompt" : "Copy prompt"}
+          {icon}
+        </Button>
+      }
+    >
+      <PrototypeBriefTextarea
+        value={brief}
+        onChange={(event) => setBrief(event.target.value)}
+        placeholder="e.g. Add an empty state when the user has no API keys yet"
+        aria-label="State brief"
+      />
+    </PrototypeToolDialog>
   );
 }

package/src/components/prototypes/prototype-default-state-map-page.tsx

@@ -42,7 +42,7 @@ export function PrototypeDefaultStateMapPage({
         <div>
           <p className={styles.headerTitle}>State map</p>
           <p className={styles.headerHint}>
-            Map prototype preview states once this prototype defines them.
+            Preview states appear here once this prototype defines a state map.
           </p>
         </div>
         <Link
@@ -56,9 +56,9 @@ export function PrototypeDefaultStateMapPage({
 
       <div className="flex flex-1 items-center justify-center px-6">
         <EmptyState className="max-w-md text-center">
-          No states mapped yet. Add a state canvas config and register this route
-          in `prototype.config.ts`, or follow the example-feature reference in
-          AGENTS.md.
+          No preview states yet. When this prototype adds a `*-preview-states.ts`
+          registry, wire a state map page per AGENTS.md — until then this map stays
+          empty.
         </EmptyState>
       </div>
     </div>

package/src/components/prototypes/prototype-design-brief-modal.tsx

@@ -8,13 +8,14 @@ import {
   DialogContent,
   DialogTitle,
 } from "@prototype/components/ui/dialog";
+import { PROTOTYPE_TOOL_MODAL_CLOSE_CLASS } from "@prototype/components/platform-ui/prototype-tool-dialog";
 import useCopyToClipboard from "@prototype/lib/use-copy-to-clipboard";
 import { buildBriefOverviewCopyText } from "@prototype/lib/prototypes/design-exploration-types";
 import type {
+  DesignExplorationBaselineOption,
   DesignExplorationBrief,
   DesignExplorationContext,
   DesignExplorationMobbin,
-  DesignExplorationRationale,
   DesignExplorationVariantOption,
   DesignExplorationVariantsSection,
 } from "@prototype/lib/prototypes/design-exploration-types";
@@ -22,8 +23,7 @@ import { usePersistedLocalString } from "@prototype/lib/prototypes/use-persisted
 import type { ReactNode } from "react";
 import { X } from "lucide-react";
 
-const MODAL_CHROME_BUTTON_CLASS =
-  "text-muted-foreground hover:text-foreground inline-flex size-8 shrink-0 items-center justify-center rounded-sm border-0 bg-transparent p-0 opacity-70 transition-opacity hover:opacity-100 outline-none focus:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-40 disabled:hover:opacity-40 disabled:hover:text-muted-foreground motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+const MODAL_CHROME_BUTTON_CLASS = PROTOTYPE_TOOL_MODAL_CLOSE_CLASS;
 
 type PrototypeDesignBriefModalProps<TVariant extends string> = {
   open: boolean;
@@ -38,10 +38,10 @@ type PrototypeDesignBriefModalProps<TVariant extends string> = {
   variant: TVariant;
   onVariantChange: (variant: TVariant) => void;
   options: DesignExplorationVariantOption<TVariant>[];
-  rationale: Record<TVariant, DesignExplorationRationale>;
   renderers: Record<TVariant, () => ReactNode>;
+  baseline: DesignExplorationBaselineOption<TVariant>;
   defaultVariantValue?: TVariant;
-  onSetDefaultVariant?: (value: TVariant) => void;
+  briefConfigFilePath?: string;
 };
 
 export function PrototypeDesignBriefModal<TVariant extends string>({
@@ -57,10 +57,10 @@ export function PrototypeDesignBriefModal<TVariant extends string>({
   variant,
   onVariantChange,
   options,
-  rationale,
   renderers,
+  baseline,
   defaultVariantValue,
-  onSetDefaultVariant,
+  briefConfigFilePath,
 }: PrototypeDesignBriefModalProps<TVariant>) {
   const { copy: copyOverview, icon: copyIcon } = useCopyToClipboard();
   const { value: title } = usePersistedLocalString(
@@ -79,9 +79,9 @@ export function PrototypeDesignBriefModal<TVariant extends string>({
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent
+        portalScope="tool"
         className="tool-dialog-surface flex h-[min(92svh,calc(100%-2rem))] max-h-[min(92svh,calc(100%-2rem))] w-[min(96rem,calc(100vw-2rem))] max-w-[min(96rem,calc(100vw-2rem))] flex-col gap-0 overflow-hidden border-0 p-0 sm:max-w-[min(96rem,calc(100vw-2rem))]"
       >
-        <div className="tool-dialog-accent" aria-hidden />
         <div className="absolute top-4 right-4 z-10 flex items-center gap-0.5">
           <PrototypeComponent id={`${componentIdPrefix}.overview-copy-brief`}>
             <button
@@ -116,10 +116,10 @@ export function PrototypeDesignBriefModal<TVariant extends string>({
           variant={variant}
           onVariantChange={onVariantChange}
           options={options}
-          rationale={rationale}
           renderers={renderers}
+          baseline={baseline}
           defaultVariantValue={defaultVariantValue}
-          onSetDefaultVariant={onSetDefaultVariant}
+          briefConfigFilePath={briefConfigFilePath}
           className="overflow-y-auto overscroll-contain"
         />
       </DialogContent>