proto-plugin 0.1.0

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

@@ -0,0 +1,117 @@
+"use client";
+
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogTitle,
+} from "@prototype/components/ui/dialog";
+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;
+  slug: string;
+  existingStates: Array<{ id: string; label: string }>;
+};
+
+export function PrototypeCreateStateModal({
+  open,
+  onOpenChange,
+  slug,
+  existingStates,
+}: PrototypeCreateStateModalProps) {
+  const [brief, setBrief] = useState("");
+  const { copy, icon, isCopied } = useCopyToClipboard();
+  const canCopy = brief.trim().length > 0;
+
+  useEffect(() => {
+    if (!open) {
+      setBrief("");
+    }
+  }, [open]);
+
+  const handleCopy = () => {
+    if (!canCopy) return;
+
+    const origin =
+      typeof window !== "undefined" ? window.location.origin : undefined;
+    copy(
+      buildCreatePreviewStateCopyText({
+        slug,
+        existingStates,
+        origin,
+        briefText: brief,
+      }),
+    );
+  };
+
+  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>
+  );
+}

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

@@ -0,0 +1,66 @@
+"use client";
+
+import { EmptyState } from "@prototype/components/platform-ui/empty-state";
+import { PrototypeStateCanvasRegistrar } from "@prototype/components/prototypes/prototype-state-canvas";
+import {
+  getDefaultPrototypeStateMapPath,
+  parseStateMapReturnTo,
+} from "@prototype/lib/prototypes/prototype-state-canvas-types";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import { useMemo } from "react";
+import { X } from "lucide-react";
+
+import styles from "./prototype-state-canvas-overlay.module.scss";
+
+type PrototypeDefaultStateMapPageProps = {
+  slug: string;
+};
+
+export function PrototypeDefaultStateMapPage({
+  slug,
+}: PrototypeDefaultStateMapPageProps) {
+  const searchParams = useSearchParams();
+  const pagePath = getDefaultPrototypeStateMapPath(slug);
+  const prototypePath = `/prototypes/${slug}`;
+
+  const backHref = useMemo(() => {
+    const returnTo = parseStateMapReturnTo(searchParams);
+    if (returnTo) return returnTo;
+    return prototypePath;
+  }, [prototypePath, searchParams]);
+
+  return (
+    <div
+      className={styles.page}
+      data-prototype-state-canvas
+      data-prototype-default-state-map
+    >
+      <PrototypeStateCanvasRegistrar pagePath={pagePath} />
+
+      <div className={styles.header}>
+        <div>
+          <p className={styles.headerTitle}>State map</p>
+          <p className={styles.headerHint}>
+            Map prototype preview states once this prototype defines them.
+          </p>
+        </div>
+        <Link
+          href={backHref}
+          className={styles.closeButton}
+          aria-label="Back to prototype"
+        >
+          <X size={16} strokeWidth={2} />
+        </Link>
+      </div>
+
+      <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.
+        </EmptyState>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,128 @@
+"use client";
+
+import { PrototypeComponent } from "@prototype/components/prototypes/prototype-target";
+import { PrototypeDesignBriefPanel } from "@prototype/components/prototypes/prototype-design-brief-panel";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogTitle,
+} from "@prototype/components/ui/dialog";
+import useCopyToClipboard from "@prototype/lib/use-copy-to-clipboard";
+import { buildBriefOverviewCopyText } from "@prototype/lib/prototypes/design-exploration-types";
+import type {
+  DesignExplorationBrief,
+  DesignExplorationContext,
+  DesignExplorationMobbin,
+  DesignExplorationRationale,
+  DesignExplorationVariantOption,
+  DesignExplorationVariantsSection,
+} from "@prototype/lib/prototypes/design-exploration-types";
+import { usePersistedLocalString } from "@prototype/lib/prototypes/use-persisted-local-state";
+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";
+
+type PrototypeDesignBriefModalProps<TVariant extends string> = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  componentIdPrefix: string;
+  galleryId: string;
+  storageKeyPrefix: string;
+  brief: DesignExplorationBrief;
+  context?: DesignExplorationContext;
+  mobbin?: DesignExplorationMobbin;
+  variantsSection?: DesignExplorationVariantsSection;
+  variant: TVariant;
+  onVariantChange: (variant: TVariant) => void;
+  options: DesignExplorationVariantOption<TVariant>[];
+  rationale: Record<TVariant, DesignExplorationRationale>;
+  renderers: Record<TVariant, () => ReactNode>;
+  defaultVariantValue?: TVariant;
+  onSetDefaultVariant?: (value: TVariant) => void;
+};
+
+export function PrototypeDesignBriefModal<TVariant extends string>({
+  open,
+  onOpenChange,
+  componentIdPrefix,
+  galleryId,
+  storageKeyPrefix,
+  brief,
+  context,
+  mobbin,
+  variantsSection,
+  variant,
+  onVariantChange,
+  options,
+  rationale,
+  renderers,
+  defaultVariantValue,
+  onSetDefaultVariant,
+}: PrototypeDesignBriefModalProps<TVariant>) {
+  const { copy: copyOverview, icon: copyIcon } = useCopyToClipboard();
+  const { value: title } = usePersistedLocalString(
+    `${storageKeyPrefix}-overview-title`,
+    brief.titleDefault,
+  );
+  const { value: description } = usePersistedLocalString(
+    `${storageKeyPrefix}-overview-description`,
+    brief.descriptionDefault,
+  );
+
+  const effectiveTitle = title.trim() || brief.titleDefault;
+  const effectiveDescription =
+    description.trim() || brief.descriptionDefault;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        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
+              type="button"
+              className={MODAL_CHROME_BUTTON_CLASS}
+              onClick={() =>
+                copyOverview(
+                  buildBriefOverviewCopyText(effectiveTitle, effectiveDescription),
+                )
+              }
+              aria-label="Copy overview"
+            >
+              {copyIcon}
+            </button>
+          </PrototypeComponent>
+          <DialogClose className={MODAL_CHROME_BUTTON_CLASS}>
+            <X />
+            <span className="sr-only">Close</span>
+          </DialogClose>
+        </div>
+
+        <DialogTitle className="sr-only">{effectiveTitle}</DialogTitle>
+
+        <PrototypeDesignBriefPanel
+          componentIdPrefix={componentIdPrefix}
+          galleryId={galleryId}
+          storageKeyPrefix={storageKeyPrefix}
+          brief={brief}
+          context={context}
+          mobbin={mobbin}
+          variantsSection={variantsSection}
+          variant={variant}
+          onVariantChange={onVariantChange}
+          options={options}
+          rationale={rationale}
+          renderers={renderers}
+          defaultVariantValue={defaultVariantValue}
+          onSetDefaultVariant={onSetDefaultVariant}
+          className="overflow-y-auto overscroll-contain"
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}