proto-plugin 0.1.0 → 0.1.2

package/src/components/prototypes/prototype-mobbin-gallery.tsx

@@ -2,10 +2,15 @@
 
 import { PrototypeComponent } from "@prototype/components/prototypes/prototype-target";
 import { Button } from "@prototype/components/ui/button";
+import { getPrototypePortalContainer } from "@prototype/lib/tool-portal";
 import { cn } from "@prototype/lib/utils";
 import type { MobbinReference } from "@prototype/lib/prototypes/design-exploration-types";
 import { ChevronLeft, ChevronRight, ExternalLink, X, ZoomIn } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+
+/** Above prototype preview + design brief dialog (z-50), below review chrome (1050). */
+const MOBBIN_LIGHTBOX_Z_INDEX = 1040;
 
 const GALLERY_SECTION_TITLE_CLASS = "tool-chip tool-chip-pink";
 
@@ -137,6 +142,12 @@ function MobbinReferenceLightbox({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [goNext, goPrev, onClose]);
 
+  const [portalTarget, setPortalTarget] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    setPortalTarget(getPrototypePortalContainer() ?? null);
+  }, []);
+
   useEffect(() => {
     const previousOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -145,10 +156,11 @@ function MobbinReferenceLightbox({
     };
   }, []);
 
-  return (
+  const lightbox = (
     <PrototypeComponent
       id={`${galleryId}.lightbox`}
-      className="fixed inset-0 z-(--z-modal) flex items-center justify-center p-4 sm:p-8"
+      className="fixed inset-0 flex items-center justify-center p-4 sm:p-8"
+      style={{ zIndex: MOBBIN_LIGHTBOX_Z_INDEX }}
       role="dialog"
       aria-modal="true"
       aria-label={`${reference.appName} Mobbin reference`}
@@ -254,6 +266,10 @@ function MobbinReferenceLightbox({
       </div>
     </PrototypeComponent>
   );
+
+  if (!portalTarget) return null;
+
+  return createPortal(lightbox, portalTarget);
 }
 
 export function PrototypeMobbinGallery({

package/src/components/prototypes/prototype-review-sidebar.tsx

@@ -7,16 +7,13 @@ import { useCommentStore } from "@prototype/lib/prototype-comments/react/Comment
 import { CommentHeaderCount } from "@prototype/lib/prototype-comments/ui/CommentHeaderCount";
 import { CommentsGrid } from "@prototype/lib/prototype-comments/ui/CommentsGrid";
 import { usePrototypeReview } from "@prototype/lib/prototypes/prototype-review-context";
-import {
-  SIDEBAR_ICON_BUTTON_CLASS,
-  Sidebar,
-} from "@prototype/components/platform-ui/sidebar";
-import { IconButton } from "@prototype/components/platform-ui/icon-button";
-import { cn } from "@prototype/lib/utils";
+import { CommentModeToggleButton } from "@prototype/lib/prototype-comments/ui/CommentModeToggleButton";
+import { Sidebar } from "@prototype/components/platform-ui/sidebar";
 import { EmptyState } from "@prototype/components/platform-ui/empty-state";
 import { PrototypeChangeLogPanel } from "@prototype/components/prototypes/prototype-change-log-panel";
+import { PrototypeCommentStorageEmptyState } from "@prototype/components/prototypes/prototype-comment-storage-empty-state";
+import { PrototypeSpecPanelEmptyState } from "@prototype/components/prototypes/prototype-spec-panel-empty-state";
 import { miniPillTextFromLabel } from "@prototype/components/prototypes/mini-pill-label";
-import { MessageSquarePlus } from "lucide-react";
 import { useMemo } from "react";
 
 type PrototypeReviewSidebarProps = {
@@ -35,7 +32,7 @@ export function PrototypeReviewSidebar({
   onToggleCommentMode,
 }: PrototypeReviewSidebarProps) {
   const review = usePrototypeReview();
-  const { annotations, deleteAnnotation, updateAnnotation, resolveAnnotation, storageError, storageReady } = useCommentStore();
+  const { annotations, deleteAnnotation, updateAnnotation, resolveAnnotation, storageError, storageReady, storageConfigured } = useCommentStore();
   const isVariantsPanel = review.sidebarPanel === "variants";
   const isChangeLogPanel = review.sidebarPanel === "change-log";
   const isSpecPanel = review.sidebarPanel === "spec";
@@ -96,21 +93,10 @@ export function PrototypeReviewSidebar({
       }
       headerActions={
         isCommentsPanel && onToggleCommentMode ? (
-          <IconButton
-            type="button"
+          <CommentModeToggleButton
+            isActive={isCommentModeActive}
             onClick={onToggleCommentMode}
-            onMouseDown={(event) => event.preventDefault()}
-            aria-label={
-              isCommentModeActive ? "Exit comment mode" : "Add comment"
-            }
-            aria-pressed={isCommentModeActive}
-            className={cn(
-              SIDEBAR_ICON_BUTTON_CLASS,
-              isCommentModeActive && "bg-accent text-accent-foreground",
-            )}
-          >
-            <MessageSquarePlus size={16} strokeWidth={2} />
-          </IconButton>
+          />
         ) : undefined
       }
       onClose={
@@ -135,12 +121,7 @@ export function PrototypeReviewSidebar({
       widthCssVar="--comments-sidebar-width"
     >
       {isSpecPanel ? (
-        specContent ?? (
-          <EmptyState>
-            No PRs configured yet. Add a PR split spec on this prototype to
-            see implementation cards here.
-          </EmptyState>
-        )
+        specContent ?? <PrototypeSpecPanelEmptyState />
       ) : isVariantsPanel ? (
         variantsContent ?? (
           <EmptyState>No variant overview available.</EmptyState>
@@ -149,6 +130,8 @@ export function PrototypeReviewSidebar({
         <PrototypeChangeLogPanel onSelect={onSelect} selectedId={selectedId} />
       ) : !storageReady ? (
         <EmptyState>Loading comments…</EmptyState>
+      ) : storageConfigured === false ? (
+        <PrototypeCommentStorageEmptyState message={storageError ?? undefined} />
       ) : storageError ? (
         <EmptyState>{storageError}</EmptyState>
       ) : (

package/src/components/prototypes/prototype-spec-panel-content.tsx

@@ -63,7 +63,7 @@ function CopyPrPrompt<TWireframeId extends string, TLiveState>({
       type="button"
       aria-label="Copy PR prompt"
       onClick={handleCopy}
-      className="inline-flex size-[13px] shrink-0 items-center justify-center text-muted-foreground/60 transition-colors duration-200 ease hover:text-muted-foreground"
+      className="inline-flex size-[13px] shrink-0 cursor-pointer items-center justify-center text-muted-foreground/60 transition-colors duration-200 ease hover:text-muted-foreground"
     >
       {copied ? (
         <Check className="size-3 text-[var(--text-primary)]" />
@@ -227,7 +227,7 @@ function CopyPreviewLink<TWireframeId extends string, TLiveState>({
             : "Preview unavailable"
       }
       onClick={handleCopy}
-      className="group inline-flex h-6 shrink-0 items-center gap-1 rounded-md border border-[var(--border-solid)] bg-[var(--bg-subtle)] px-2 text-[11px] text-[var(--text-secondary)] transition-colors duration-150 ease hover:bg-[var(--bg-layered)] hover:text-[var(--text-primary)] disabled:cursor-not-allowed disabled:opacity-60"
+      className="group inline-flex h-6 shrink-0 cursor-pointer items-center gap-1 rounded-md border border-[var(--border-solid)] bg-[var(--bg-subtle)] px-2 text-[11px] text-[var(--text-secondary)] transition-colors duration-150 ease hover:bg-[var(--bg-layered)] hover:text-[var(--text-primary)] disabled:cursor-not-allowed disabled:opacity-60"
     >
       <Monitor
         className="size-3 shrink-0 text-[var(--text-tertiary)] transition-colors duration-150 ease group-hover:text-[var(--text-secondary)] group-disabled:opacity-60"
@@ -275,7 +275,7 @@ function PrStatusLink({
       rel="noopener noreferrer"
       aria-label={`Open pull request (${config.label})`}
       onClick={(e) => e.stopPropagation()}
-      className={`inline-flex shrink-0 items-center gap-1.5 transition-opacity duration-200 ease hover:opacity-80 ${config.className}`}
+      className={`inline-flex shrink-0 cursor-pointer items-center gap-1.5 transition-opacity duration-200 ease hover:opacity-80 ${config.className}`}
     >
       {config.icon}
       <span className="text-[12px] font-medium">{config.label}</span>
@@ -337,7 +337,7 @@ function PrPreviewCard<TWireframeId extends string, TLiveState>({
       }}
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
-      className="tool-review-card flex w-full flex-col overflow-hidden text-left"
+      className="tool-review-card flex w-full cursor-pointer flex-col overflow-hidden text-left"
       style={{
         borderRadius: 6,
         border: `1px solid ${reviewSidebarCardBorder(selected, hovered)}`,
@@ -392,7 +392,7 @@ function PrPreviewCard<TWireframeId extends string, TLiveState>({
                     setExpanded((v) => !v);
                   }
                 }}
-                className="inline-flex size-5 items-center justify-center rounded text-[var(--text-tertiary)] transition-colors duration-200 ease hover:text-[var(--text-secondary)]"
+                className="inline-flex size-5 cursor-pointer items-center justify-center rounded text-[var(--text-tertiary)] transition-colors duration-200 ease hover:text-[var(--text-secondary)]"
               >
                 <ChevronDown
                   className="size-4 transition-transform duration-200 ease"

package/src/components/prototypes/prototype-spec-panel-empty-state.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { Button } from "@prototype/components/ui/button";
+import { usePrototypeSlug } from "@prototype/components/prototypes/prototype-target";
+import {
+  buildPrSplitPlanCopyText,
+  type PrSplitPlanPromptOptions,
+} from "@prototype/lib/pr-split/build-pr-split-plan-prompt";
+import useCopyToClipboard from "@prototype/lib/use-copy-to-clipboard";
+
+type PrototypeSpecPanelEmptyStateProps = {
+  promptOptions?: Omit<PrSplitPlanPromptOptions, "slug">;
+};
+
+export function PrototypeSpecPanelEmptyState({
+  promptOptions,
+}: PrototypeSpecPanelEmptyStateProps) {
+  const slug = usePrototypeSlug();
+  const { copy, icon, isCopied } = useCopyToClipboard();
+
+  const canCopy = Boolean(slug);
+
+  return (
+    <div className="px-1 py-2">
+      <p className="text-sm text-muted-foreground">
+        No PRs configured yet. Copy the prompt below to have an agent audit what
+        changed on this prototype and create a merge-ordered PR split spec.
+      </p>
+      <div className="mt-3">
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          className="h-8 cursor-pointer gap-1.5"
+          disabled={!canCopy}
+          onClick={() => {
+            if (!slug) return;
+            copy(
+              buildPrSplitPlanCopyText({
+                slug,
+                ...promptOptions,
+              }),
+            );
+          }}
+          aria-label="Copy PR split planning prompt"
+        >
+          {isCopied ? "Copied prompt" : "Copy planning prompt"}
+          {icon}
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/components/prototypes/prototype-state-canvas-overlay.module.scss

@@ -1,19 +1,21 @@
-$canvas-chrome-bg: var(--tool-chrome-bg);
-$canvas-chrome-muted: var(--tool-chrome-surface-muted, #252525);
+$canvas-chrome-bg: var(--prototype-state-map-canvas-bg, var(--tool-chrome-bg));
+$canvas-chrome-muted: var(--tool-chrome-surface-muted, #fafafa);
 $canvas-border: var(--tool-chrome-border);
 $canvas-border-strong: var(--tool-chrome-border-strong);
 $canvas-text: var(--tool-chrome-text);
 $canvas-text-muted: var(--tool-chrome-text-muted);
-$canvas-text-tertiary: var(--tool-chrome-icon-hover, #a3a3a3);
-$canvas-edge-base: var(--prototype-state-canvas-edge, var(--tool-chrome-icon-hover, #a3a3a3));
+$canvas-text-tertiary: var(--tool-chrome-icon-hover, rgba(0, 0, 0, 0.45));
+$canvas-edge-base: var(--prototype-state-canvas-edge, rgba(0, 0, 0, 0.22));
 // Pre-blend to canvas bg so edges stay subtle without semi-transparent layering at corners/arrowheads.
 $canvas-edge-color: color-mix(in srgb, $canvas-edge-base 50%, $canvas-chrome-bg);
 
-$wireframe-bg: #ffffff;
-$wireframe-subtle: var(--color-gray-50);
-$wireframe-border: #edebeb;
-$wireframe-border-medium: var(--color-gray-300);
-$wireframe-text: var(--color-gray-900);
+$wireframe-bg: var(--prototype-state-map-node-surface, var(--tool-chrome-surface));
+$wireframe-subtle: var(--prototype-state-map-node-preview-bg, var(--tool-chrome-surface-muted));
+$wireframe-border: var(--tool-chrome-border);
+$wireframe-border-medium: var(--tool-chrome-border-strong);
+$wireframe-footer-bg: var(--prototype-state-map-node-footer-bg, var(--tool-chrome-surface-muted));
+$wireframe-footer-border: var(--prototype-state-map-node-footer-border, var(--tool-chrome-border-strong));
+$wireframe-footer-text: var(--prototype-state-map-node-footer-text, var(--tool-chrome-text-heading));
 
 .page {
   display: flex;
@@ -193,10 +195,6 @@ $wireframe-text: var(--color-gray-900);
   }
 }
 
-.nodeGroupSelected {
-  border-color: color-mix(in srgb, var(--tool-chrome-blue) 55%, transparent);
-}
-
 .node {
   display: flex;
   flex-direction: column;
@@ -224,20 +222,9 @@ $wireframe-text: var(--color-gray-900);
   }
 }
 
-.nodeSelected {
-  background: color-mix(in srgb, var(--tool-chrome-blue) 6%, $wireframe-bg);
-
-  @media (hover: hover) and (pointer: fine) {
-    .nodeGroup:hover & {
-      background: color-mix(in srgb, var(--tool-chrome-blue) 8%, $wireframe-bg);
-    }
-  }
-}
-
 .nodePreview {
   height: 132px;
   overflow: hidden;
-  border-bottom: 1px solid $wireframe-border;
   background: $wireframe-subtle;
   pointer-events: none;
 }
@@ -253,20 +240,16 @@ $wireframe-text: var(--color-gray-900);
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
-  min-height: 36px;
-  padding: 0 0.625rem;
-  background: $wireframe-bg;
+  min-height: 40px;
+  padding: 0 0.75rem;
+  border-top: 1px solid $wireframe-footer-border;
+  background: $wireframe-footer-bg;
 }
 
 .nodeLabelText {
   font-size: 0.75rem;
-  font-weight: 500;
-  color: $wireframe-text;
-}
-
-.nodeSelectedIcon {
-  flex-shrink: 0;
-  color: var(--tool-chrome-blue);
+  font-weight: 600;
+  color: $wireframe-footer-text;
 }
 
 .calloutTray {
@@ -297,7 +280,7 @@ $wireframe-text: var(--color-gray-900);
   @media (hover: hover) and (pointer: fine) {
     &:hover {
       border-color: $wireframe-border-medium;
-      background: color-mix(in srgb, var(--color-gray-900) 4%, $wireframe-bg);
+      background: var(--tool-chrome-gray-highlight);
     }
   }
 
@@ -311,26 +294,16 @@ $wireframe-text: var(--color-gray-900);
   }
 }
 
-.calloutSelected {
-  border-color: color-mix(in srgb, var(--tool-chrome-blue) 45%, transparent);
-  background: color-mix(in srgb, var(--tool-chrome-blue) 6%, $wireframe-bg);
-}
-
 .calloutLabel {
   flex: 1 1 auto;
   min-width: 0;
   font-size: 0.6875rem;
   font-weight: 500;
-  color: $wireframe-text;
+  color: $wireframe-footer-text;
 }
 
 .calloutHint {
   flex-shrink: 0;
   font-size: 0.625rem;
-  color: var(--color-gray-500);
-}
-
-.calloutSelectedIcon {
-  flex-shrink: 0;
-  color: var(--tool-chrome-blue);
+  color: var(--tool-chrome-text-muted);
 }

package/src/components/prototypes/prototype-state-canvas-overlay.tsx

@@ -13,7 +13,7 @@ import {
   getStateCanvasNodeHeight,
 } from "@prototype/lib/prototypes/prototype-state-canvas-constants";
 import { cn } from "@prototype/lib/utils";
-import { Check, Maximize2, Minus, Plus, X } from "lucide-react";
+import { Maximize2, Minus, Plus, X } from "lucide-react";
 import Link from "next/link";
 import {
   useCallback,
@@ -285,15 +285,6 @@ function deriveCanvasSize<T extends string>(
   };
 }
 
-function isNodeActive<T extends string>(
-  node: PrototypeStateCanvasNode<T>,
-  activeStateId: T | undefined,
-): boolean {
-  if (activeStateId == null) return false;
-  if (node.id === activeStateId) return true;
-  return node.callouts?.some((callout) => callout.id === activeStateId) ?? false;
-}
-
 type HoverAnnotationSource<T extends string> = {
   id: T;
   label: string;
@@ -354,7 +345,6 @@ export function PrototypeStateCanvasView<T extends string>({
   onClose,
 }: PrototypeStateCanvasViewProps<T>) {
   const {
-    activeStateId,
     onStateSelect,
     nodes,
     edges,
@@ -877,7 +867,6 @@ export function PrototypeStateCanvasView<T extends string>({
           ))}
 
           {nodes.map((node) => {
-            const selected = isNodeActive(node, activeStateId);
             const hoverSource = resolveHoverAnnotationSource(node, hoverTarget);
             const previewNodeId = resolveNodePreviewId(node, hoverTarget);
             const previewHighlights = getHighlightRegions?.(previewNodeId);
@@ -893,18 +882,12 @@ export function PrototypeStateCanvasView<T extends string>({
             return (
               <div
                 key={node.id}
-                className={cn(styles.nodeGroup, selected && styles.nodeGroupSelected)}
+                className={styles.nodeGroup}
                 style={{ left: node.x, top: node.y, width: NODE_WIDTH }}
               >
                 <button
                   type="button"
-                  className={cn(
-                    styles.node,
-                    selected && node.id === activeStateId && styles.nodeSelected,
-                  )}
-                  aria-current={
-                    node.id === activeStateId ? "true" : undefined
-                  }
+                  className={styles.node}
                   onPointerDown={(event) => event.stopPropagation()}
                   onClick={() => handleNodeSelect(node.id)}
                   onMouseEnter={() => {
@@ -934,30 +917,17 @@ export function PrototypeStateCanvasView<T extends string>({
                   </div>
                   <div className={styles.nodeLabel}>
                     <span className={styles.nodeLabelText}>{node.label}</span>
-                    {node.id === activeStateId ? (
-                      <Check
-                        size={14}
-                        strokeWidth={2}
-                        className={styles.nodeSelectedIcon}
-                        aria-hidden
-                      />
-                    ) : null}
                   </div>
                 </button>
 
                 {node.callouts?.length ? (
                   <div className={styles.calloutTray}>
                     {node.callouts.map((callout) => {
-                      const calloutSelected = callout.id === activeStateId;
                       return (
                         <button
                           key={callout.id}
                           type="button"
-                          className={cn(
-                            styles.callout,
-                            calloutSelected && styles.calloutSelected,
-                          )}
-                          aria-current={calloutSelected ? "true" : undefined}
+                          className={styles.callout}
                           onPointerDown={(event) => event.stopPropagation()}
                           onClick={() => handleNodeSelect(callout.id)}
                           onMouseEnter={() => {
@@ -981,14 +951,6 @@ export function PrototypeStateCanvasView<T extends string>({
                               {callout.hint}
                             </span>
                           ) : null}
-                          {calloutSelected ? (
-                            <Check
-                              size={12}
-                              strokeWidth={2}
-                              className={styles.calloutSelectedIcon}
-                              aria-hidden
-                            />
-                          ) : null}
                         </button>
                       );
                     })}