proto-plugin 0.1.0

package/src/components/prototypes/prototype-vercel-preview-modal.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogTitle,
+} from "@prototype/components/ui/dialog";
+import { ExternalLink, Loader2, 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 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";
+
+export type PrototypeVercelPreviewModalProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  previewUrl: string | null;
+  inspectorUrl?: string | null;
+  loading?: boolean;
+  error?: string | null;
+};
+
+export function PrototypeVercelPreviewModal({
+  open,
+  onOpenChange,
+  title,
+  previewUrl,
+  inspectorUrl,
+  loading = false,
+  error = null,
+}: PrototypeVercelPreviewModalProps) {
+  const [iframeLoaded, setIframeLoaded] = useState(false);
+
+  useEffect(() => {
+    if (!open) {
+      setIframeLoaded(false);
+    }
+  }, [open, previewUrl]);
+
+  const showIframe = Boolean(previewUrl) && !loading && !error;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        showCloseButton={false}
+        className="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 p-0 sm:max-w-[min(96rem,calc(100vw-2rem))]"
+      >
+        <div className="flex items-center justify-between gap-3 border-b border-border px-4 py-3">
+          <DialogTitle className="min-w-0 truncate text-sm font-medium">
+            {title}
+          </DialogTitle>
+          <div className="flex shrink-0 items-center gap-0.5">
+            {previewUrl ? (
+              <a
+                href={previewUrl}
+                target="_blank"
+                rel="noreferrer"
+                className={MODAL_CHROME_BUTTON_CLASS}
+                aria-label="Open preview in new tab"
+              >
+                <ExternalLink />
+              </a>
+            ) : null}
+            {inspectorUrl ? (
+              <a
+                href={inspectorUrl}
+                target="_blank"
+                rel="noreferrer"
+                className={MODAL_CHROME_BUTTON_CLASS}
+                aria-label="Open Vercel inspector"
+              >
+                <span className="text-[10px] font-medium uppercase tracking-wide">
+                  Vercel
+                </span>
+              </a>
+            ) : null}
+            <DialogClose className={MODAL_CHROME_BUTTON_CLASS}>
+              <X />
+              <span className="sr-only">Close</span>
+            </DialogClose>
+          </div>
+        </div>
+
+        <div className="relative min-h-0 flex-1 bg-[var(--bg-subtle)]">
+          {loading ? (
+            <div className="flex h-full items-center justify-center gap-2 text-sm text-muted-foreground">
+              <Loader2 className="size-4 animate-spin" />
+              Loading preview…
+            </div>
+          ) : null}
+
+          {!loading && error ? (
+            <div className="flex h-full items-center justify-center px-6 text-center text-sm text-muted-foreground">
+              {error}
+            </div>
+          ) : null}
+
+          {showIframe ? (
+            <>
+              {!iframeLoaded ? (
+                <div className="absolute inset-0 flex items-center justify-center gap-2 text-sm text-muted-foreground">
+                  <Loader2 className="size-4 animate-spin" />
+                  Loading deployment…
+                </div>
+              ) : null}
+              <iframe
+                title={title}
+                src={previewUrl ?? undefined}
+                className="h-full w-full border-0 bg-background"
+                onLoad={() => setIframeLoaded(true)}
+              />
+            </>
+          ) : null}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/prototypes/state-map-annotation-tooltip.module.scss

@@ -0,0 +1,89 @@
+$wireframe-bg: #ffffff;
+$wireframe-border: #edebeb;
+$enter-duration: 0.12s;
+$enter-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
+
+.tooltip {
+  position: absolute;
+  z-index: 2;
+  width: 220px;
+  padding: 0.625rem 0.75rem;
+  border: 1px solid $wireframe-border;
+  border-radius: 0.5rem;
+  background-color: $wireframe-bg;
+  pointer-events: none;
+  opacity: 0;
+  transform: translateX(-4px);
+  transition:
+    opacity $enter-duration $enter-ease,
+    transform $enter-duration $enter-ease;
+
+  @media (prefers-reduced-motion: reduce) {
+    transform: none;
+    transition: opacity 0.08s ease;
+  }
+}
+
+.tooltipVisible {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+
+  @media (prefers-reduced-motion: reduce) {
+    transform: none;
+  }
+}
+
+.lead {
+  margin: 0;
+  font-size: 0.6875rem;
+  line-height: 1.45;
+  color: var(--color-gray-500);
+  white-space: pre-wrap;
+}
+
+.bulletList {
+  margin: 0.4375rem 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.bulletItem {
+  position: relative;
+  margin: 0;
+  padding: 0.1875rem 0 0.1875rem 0.875rem;
+  font-size: 0.6875rem;
+  line-height: 1.45;
+  color: var(--color-gray-500);
+
+  &::before {
+    content: "•";
+    position: absolute;
+    left: 0;
+    color: var(--color-gray-400);
+  }
+
+  & + & {
+    margin-top: 0.0625rem;
+  }
+}
+
+.bulletItemInteractive {
+  margin-left: -0.375rem;
+  padding-left: 1.25rem;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  transition: background-color 0.2s ease, color 0.2s ease;
+
+  @media (hover: hover) and (pointer: fine) {
+    &:hover {
+      background: color-mix(in srgb, var(--tool-chrome-blue) 6%, $wireframe-bg);
+      color: var(--color-gray-700);
+    }
+  }
+}
+
+.bulletItemActive {
+  background: color-mix(in srgb, var(--tool-chrome-blue) 8%, $wireframe-bg);
+  color: var(--color-gray-700);
+}

package/src/components/prototypes/state-map-annotation-tooltip.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import type { PrototypeStateCanvasNode } from "@prototype/lib/prototypes/prototype-state-canvas-types";
+import {
+  getStateMapAnnotationTitleTop,
+  PROTOTYPE_STATE_NODE_WIDTH,
+} from "@prototype/lib/prototypes/prototype-state-canvas-constants";
+import {
+  parseStateMapAnnotation,
+  resolveBulletHighlightId,
+  stateMapAnnotationHasInteractiveBullets,
+} from "@prototype/lib/prototypes/state-map-annotation";
+import { cn } from "@prototype/lib/utils";
+import { useEffect } from "react";
+
+import styles from "./state-map-annotation-tooltip.module.scss";
+
+const TOOLTIP_GAP = 10;
+
+export type StateMapAnnotationTarget = {
+  id: string;
+  label: string;
+  parentLabel?: string;
+  annotation: string;
+  highlightRegions?: readonly string[];
+};
+
+export type StateMapAnnotationAnchor = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+type StateMapAnnotationTooltipProps = {
+  target: StateMapAnnotationTarget;
+  anchor: StateMapAnnotationAnchor;
+  visible: boolean;
+  activeHighlightId: string | null;
+  onHighlightChange: (highlightId: string | null) => void;
+  onDismiss: () => void;
+  onKeepOpen: () => void;
+};
+
+/** Anchor beside the hovered state or nested-state title row. */
+export function getStateMapAnnotationAnchor<T extends string>(
+  node: PrototypeStateCanvasNode<T>,
+  targetId: string,
+): StateMapAnnotationAnchor {
+  return {
+    x: node.x,
+    y: getStateMapAnnotationTitleTop(
+      node.y,
+      targetId,
+      node.id,
+      node.callouts,
+    ),
+    width: PROTOTYPE_STATE_NODE_WIDTH,
+    height: 0,
+  };
+}
+
+function computeCanvasTooltipPosition(
+  anchor: StateMapAnnotationAnchor,
+): { left: number; top: number } {
+  return {
+    left: anchor.x + anchor.width + TOOLTIP_GAP,
+    top: anchor.y,
+  };
+}
+
+export function StateMapAnnotationTooltip({
+  target,
+  anchor,
+  visible,
+  activeHighlightId,
+  onHighlightChange,
+  onDismiss,
+  onKeepOpen,
+}: StateMapAnnotationTooltipProps) {
+  const position = computeCanvasTooltipPosition(anchor);
+  const parsed = parseStateMapAnnotation(target.annotation);
+  const hasInteractiveBullets = stateMapAnnotationHasInteractiveBullets(
+    target.annotation,
+    target.highlightRegions,
+  );
+
+  useEffect(() => {
+    onHighlightChange(null);
+  }, [target.id, onHighlightChange]);
+
+  return (
+    <div
+      className={cn(styles.tooltip, visible && styles.tooltipVisible)}
+      role="tooltip"
+      style={{ left: position.left, top: position.top }}
+      onMouseEnter={onKeepOpen}
+      onMouseLeave={onDismiss}
+      onPointerDown={(event) => event.stopPropagation()}
+    >
+      {parsed.lead ? <p className={styles.lead}>{parsed.lead}</p> : null}
+      {parsed.bullets.length > 0 ? (
+        <ul className={styles.bulletList}>
+          {parsed.bullets.map((bullet) => {
+            const highlightId = resolveBulletHighlightId(
+              bullet,
+              target.highlightRegions,
+            );
+            const isInteractive = hasInteractiveBullets && highlightId != null;
+            return (
+              <li
+                key={bullet.index}
+                className={cn(
+                  styles.bulletItem,
+                  isInteractive && styles.bulletItemInteractive,
+                  isInteractive &&
+                    activeHighlightId === highlightId &&
+                    styles.bulletItemActive,
+                )}
+                onMouseEnter={
+                  isInteractive
+                    ? () => onHighlightChange(highlightId)
+                    : undefined
+                }
+                onMouseLeave={
+                  isInteractive ? () => onHighlightChange(null) : undefined
+                }
+              >
+                {bullet.text}
+              </li>
+            );
+          })}
+        </ul>
+      ) : null}
+    </div>
+  );
+}

package/src/components/prototypes/state-map-wireframe-highlight.module.scss

@@ -0,0 +1,25 @@
+.region {
+  border-radius: inherit;
+  transition:
+    background-color 0.2s ease-out,
+    box-shadow 0.2s ease-out;
+}
+
+.regionActive {
+  background: color-mix(in srgb, var(--prototype-comment-color-blue, #3b82f6) 8%, transparent);
+  box-shadow: inset 0 0 0 2px
+    color-mix(in srgb, var(--prototype-comment-color-blue, #3b82f6) 55%, transparent);
+}
+
+.previewOverlay {
+  position: absolute;
+  z-index: 2;
+  border: 2px solid;
+  border-radius: 0.25rem;
+  pointer-events: none;
+  transition: opacity 0.2s ease-out;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}

package/src/components/prototypes/state-map-wireframe-highlight.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import {
+  PR_TARGET_HIGHLIGHT_BORDER,
+  PR_TARGET_HIGHLIGHT_FILL,
+} from "@prototype/lib/pr-split/pr-split-highlight";
+import type { StateMapHighlightRect } from "@prototype/lib/prototypes/prototype-state-canvas-types";
+import { cn } from "@prototype/lib/utils";
+import {
+  createContext,
+  useContext,
+  type CSSProperties,
+  type ReactNode,
+} from "react";
+
+import styles from "./state-map-wireframe-highlight.module.scss";
+
+const StateMapHighlightContext = createContext<string | null>(null);
+
+export function StateMapHighlightProvider({
+  highlightId,
+  children,
+}: {
+  highlightId: string | null;
+  children: ReactNode;
+}) {
+  return (
+    <StateMapHighlightContext.Provider value={highlightId}>
+      {children}
+    </StateMapHighlightContext.Provider>
+  );
+}
+
+export function useStateMapHighlight(): string | null {
+  return useContext(StateMapHighlightContext);
+}
+
+export function StateMapHighlightRegion({
+  id,
+  children,
+  className,
+}: {
+  id: string;
+  children: ReactNode;
+  className?: string;
+}) {
+  const activeHighlightId = useStateMapHighlight();
+  const isActive = activeHighlightId === id;
+
+  return (
+    <div
+      data-state-map-highlight={id}
+      className={cn(styles.region, isActive && styles.regionActive, className)}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function StateMapPreviewHighlightOverlay({
+  rect,
+}: {
+  rect: StateMapHighlightRect;
+}) {
+  const style: CSSProperties = {
+    top: `${rect.top}%`,
+    left: `${rect.left}%`,
+    width: `${rect.width}%`,
+    height: `${rect.height}%`,
+    borderColor: PR_TARGET_HIGHLIGHT_BORDER,
+    backgroundColor: PR_TARGET_HIGHLIGHT_FILL,
+  };
+
+  return (
+    <div
+      aria-hidden
+      className={styles.previewOverlay}
+      style={style}
+      data-state-map-highlight-overlay
+    />
+  );
+}

package/src/components/shell/prototype-gallery-shell.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { PrototypeProvider } from "@prototype/components/prototype-provider";
+import { cn } from "@prototype/lib/utils";
+import type { ReactNode } from "react";
+
+type PrototypeGalleryShellProps = {
+  children: ReactNode;
+  footer?: ReactNode;
+};
+
+export function PrototypeGalleryShell({
+  children,
+  footer,
+}: PrototypeGalleryShellProps) {
+  return (
+    <PrototypeProvider className="bg-[var(--bg-ground)] flex h-svh w-full flex-col overflow-hidden">
+      {footer ? (
+        <div className="border-border flex shrink-0 items-center justify-end border-b px-10 py-3 lg:px-16">
+          {footer}
+        </div>
+      ) : null}
+
+      <main className="bg-background min-h-0 flex-1 overflow-y-auto">
+        {children}
+      </main>
+    </PrototypeProvider>
+  );
+}
+
+type PrototypeGalleryHeaderProps = {
+  eyebrow?: string;
+  title?: string;
+  description?: string;
+  className?: string;
+};
+
+export function PrototypeGalleryHeader({
+  eyebrow,
+  title = "Prototypes",
+  description = "UI experiments and concept explorations. Select a prototype to open it.",
+  className,
+}: PrototypeGalleryHeaderProps) {
+  return (
+    <div
+      className={cn(
+        "border-border -mx-10 mb-8 border-b px-10 py-6 lg:-mx-16 lg:px-16",
+        className,
+      )}
+    >
+      {eyebrow ? (
+        <p className="text-xs text-muted-foreground">{eyebrow}</p>
+      ) : null}
+      <h1 className="text-foreground mt-0 text-2xl font-medium tracking-tight">
+        {title}
+      </h1>
+      <p className="text-muted-foreground mt-2 max-w-2xl text-sm leading-relaxed">
+        {description}
+      </p>
+    </div>
+  );
+}
+
+export function PrototypeGalleryPage({
+  children,
+  footer,
+  header,
+}: PrototypeGalleryShellProps & {
+  header?: ReactNode;
+}) {
+  return (
+    <PrototypeGalleryShell footer={footer}>
+      <div className="px-10 lg:px-16">
+        {header ?? <PrototypeGalleryHeader />}
+        {children}
+      </div>
+    </PrototypeGalleryShell>
+  );
+}

package/src/components/shell/prototype-screenshot-capture.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { capturePrototypeViewportPng } from "@prototype/lib/prototypes/capture-prototype-viewport";
+import { useEffect } from "react";
+
+type PrototypeScreenshotCaptureProps = {
+  slug: string;
+};
+
+export function PrototypeScreenshotCapture({
+  slug,
+}: PrototypeScreenshotCaptureProps) {
+  useEffect(() => {
+    if (process.env.NODE_ENV !== "development") return;
+
+    let cancelled = false;
+
+    const capture = async () => {
+      const dataUrl = await capturePrototypeViewportPng();
+      if (cancelled || !dataUrl) return;
+
+      try {
+        const response = await fetch(`/api/prototypes/${slug}/screenshot`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ image: dataUrl }),
+        });
+
+        if (!response.ok) {
+          throw new Error("Failed to save screenshot");
+        }
+      } catch (error) {
+        console.warn("[prototype-screenshot]", error);
+      }
+    };
+
+    void capture();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [slug]);
+
+  return null;
+}