proto-plugin 0.1.0

package/src/components/shell/prototype-shell.module.scss

@@ -0,0 +1,194 @@
+.previewStage {
+  position: relative;
+  display: flex;
+  flex: 1 1 0;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  overflow: visible;
+  background: var(--prototype-ground);
+}
+
+.previewStageStateMap {
+  background: var(--tool-chrome-bg);
+
+  .viewportFrame {
+    background: var(--tool-chrome-bg);
+    border-color: transparent;
+  }
+
+  .viewport:not(.viewportMobile) {
+    background: var(--tool-chrome-bg);
+  }
+
+  &.previewStageMobile {
+    background: var(--tool-chrome-bg);
+  }
+}
+
+.previewStageMobile {
+  background: var(--prototype-ground);
+}
+
+.previewStageSidebarOpen {
+  border-right: 1px solid var(--border-faint);
+}
+
+.previewStageSidebarOpen .viewportFrame {
+  border-right: none;
+  border-top: none;
+}
+
+.previewStageBody {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex: 1 1 0;
+  min-height: 0;
+  min-width: 0;
+  align-items: stretch;
+  justify-content: center;
+  overflow: visible;
+  padding: 0;
+}
+
+.previewStageMobile .previewStageBody {
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+
+.viewportFrame {
+  display: flex;
+  flex: 1 1 0;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  align-self: stretch;
+  flex-direction: column;
+  background: var(--bg-main);
+  border: 1px solid var(--border-faint);
+}
+
+.viewportFrameMobile {
+  flex: 0 0 auto;
+  width: auto;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  box-shadow: none;
+}
+
+.viewport {
+  position: relative;
+  display: flex;
+  width: 100%;
+  align-self: stretch;
+  min-width: 0;
+  min-height: 0;
+  flex: 1 1 0;
+  flex-direction: column;
+  overflow: hidden;
+  // Contain position:fixed descendants (e.g. source app sidebar) inside the frame.
+  transform: translateZ(0);
+
+  // Source app shell uses h-svh — re-anchor to this preview frame (above review footer).
+  :global([data-slot="sidebar-wrapper"]),
+  :global([data-slot="sidebar-container"]) {
+    height: 100% !important;
+    max-height: 100%;
+  }
+
+  :global([data-slot="sidebar-container"]) {
+    top: 0;
+    bottom: 0;
+  }
+
+  :global([data-slot="sidebar-inset"]) {
+    min-height: 0;
+  }
+
+  &:not(.viewportMobile) {
+    position: relative;
+    z-index: 1;
+    background: transparent;
+    border: none;
+    border-radius: 0;
+  }
+}
+
+// Prototype pages must fill the device frame — unlike h-svh, which tracks the browser.
+.viewportContent {
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.viewportPage {
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+  width: 100%;
+  height: 100%;
+}
+
+// Prototype page root (e.g. PrototypeComponent id="page") — source app shells use h-full.
+.viewportPage > * {
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.viewportMobile {
+  flex: 0 0 auto;
+  width: var(--prototype-mobile-viewport-width, 390px);
+  max-width: 100%;
+  height: min(var(--prototype-mobile-viewport-height, 844px), 100%);
+  margin-inline: auto;
+  border-radius: 12px;
+  box-shadow:
+    0 8px 32px color-mix(in srgb, var(--color-gray-900) 12%, transparent);
+  container-type: inline-size;
+  container-name: prototype-viewport;
+
+  // Source app shell uses h-svh / fixed — re-anchor to this device frame.
+  :global([data-slot="sidebar-wrapper"]),
+  :global([data-slot="sidebar-container"]) {
+    height: 100% !important;
+    max-height: 100%;
+  }
+
+  :global([data-slot="sidebar-container"]) {
+    top: 0;
+    bottom: 0;
+  }
+}
+
+.reviewFooter {
+  position: relative;
+  z-index: 0;
+  flex: 0 0 auto;
+  width: 100%;
+  border-top: none;
+  background: var(--bg-ground);
+}
+
+.commentsSidebarRoot {
+  background: var(--bg-ground);
+}
+
+.commentsSidebarRootClosed {
+  width: 0;
+  min-width: 0;
+  overflow: hidden;
+}

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

@@ -0,0 +1,160 @@
+"use client";
+
+import type { PrototypeComponentRegistry } from "@prototype/lib/prototypes/prototype-component-registry";
+
+import { PrototypeCommentRoot } from "@prototype/components/prototypes/prototype-comment-provider";
+import { PrototypeCommentToolbar } from "@prototype/components/prototypes/prototype-comment-toolbar";
+import { PrototypeCommentReviewBridge } from "@prototype/lib/prototypes/prototype-comment-review-bridge";
+import {
+  PROTOTYPE_MOBILE_VIEWPORT_HEIGHT_PX,
+  PROTOTYPE_MOBILE_VIEWPORT_WIDTH_PX,
+  PrototypeReviewProvider,
+  usePrototypeReview,
+} from "@prototype/lib/prototypes/prototype-review-context";
+import {
+  PROTOTYPE_CHROME_ROOT_ID,
+  PROTOTYPE_COMMENTS_SIDEBAR_ROOT_ID,
+  PROTOTYPE_PREVIEW_STAGE_ID,
+  PROTOTYPE_VIEWPORT_ID,
+} from "@prototype/lib/tool-portal";
+import { cn } from "@prototype/lib/utils";
+
+import { PrototypeProvider } from "@prototype/components/prototype-provider";
+
+import { PrototypeScreenshotCapture } from "./prototype-screenshot-capture";
+import styles from "./prototype-shell.module.scss";
+import { usePathname } from "next/navigation";
+
+type PrototypeShellProps = {
+  slug: string;
+  componentRegistry?: PrototypeComponentRegistry;
+  children: React.ReactNode;
+};
+
+function PrototypeCommentsSidebarHost() {
+  const review = usePrototypeReview();
+  const isMobileViewport = review.viewportLayout === "mobile";
+  const hideWhenClosed = isMobileViewport && !review.open;
+
+  return (
+    <div
+      id={PROTOTYPE_COMMENTS_SIDEBAR_ROOT_ID}
+      className={cn(
+        styles.commentsSidebarRoot,
+        "flex h-full min-h-0 shrink-0 flex-col overflow-hidden",
+        hideWhenClosed && styles.commentsSidebarRootClosed,
+      )}
+    />
+  );
+}
+
+function useOnStateMapPage(): boolean {
+  const pathname = usePathname();
+  const review = usePrototypeReview();
+  const stateMapPath = review.stateCanvasPagePath;
+
+  if (stateMapPath != null) {
+    return pathname.startsWith(stateMapPath);
+  }
+
+  return /\/prototypes\/[^/]+\/states\/?$/.test(pathname);
+}
+
+function PrototypePreviewArea({
+  slug,
+  children,
+}: {
+  slug: string;
+  children: React.ReactNode;
+}) {
+  const review = usePrototypeReview();
+  const isMobileViewport = review.viewportLayout === "mobile";
+  const onStateMapPage = useOnStateMapPage();
+
+  return (
+    <div
+      id={PROTOTYPE_PREVIEW_STAGE_ID}
+      className={cn(
+        styles.previewStage,
+        onStateMapPage && styles.previewStageStateMap,
+        isMobileViewport && styles.previewStageMobile,
+        review.open && styles.previewStageSidebarOpen,
+      )}
+    >
+      <div className={styles.previewStageBody}>
+        <div
+          className={cn(
+            styles.viewportFrame,
+            isMobileViewport && styles.viewportFrameMobile,
+          )}
+        >
+          <div
+            id={PROTOTYPE_VIEWPORT_ID}
+            {...(onStateMapPage ? {} : { "data-prototype-screenshot": true })}
+            data-prototype-viewport-layout={review.viewportLayout}
+            className={cn(
+              styles.viewport,
+              isMobileViewport && styles.viewportMobile,
+            )}
+            style={
+              isMobileViewport
+                ? {
+                    ["--prototype-mobile-viewport-width" as string]: `${PROTOTYPE_MOBILE_VIEWPORT_WIDTH_PX}px`,
+                    ["--prototype-mobile-viewport-height" as string]: `${PROTOTYPE_MOBILE_VIEWPORT_HEIGHT_PX}px`,
+                  }
+                : undefined
+            }
+          >
+            <div className={styles.viewportContent}>
+              <div className={styles.viewportPage}>{children}</div>
+            </div>
+            {!onStateMapPage ? <PrototypeScreenshotCapture slug={slug} /> : null}
+          </div>
+        </div>
+      </div>
+      {!onStateMapPage ? (
+        <div
+          id={PROTOTYPE_CHROME_ROOT_ID}
+          className={styles.reviewFooter}
+          data-prototype-review-footer
+        />
+      ) : null}
+    </div>
+  );
+}
+
+function PrototypeShellLayout({ children }: { children: React.ReactNode }) {
+  const onStateMapPage = useOnStateMapPage();
+
+  return (
+    <PrototypeProvider
+      className={cn(
+        "flex h-svh w-full flex-col overflow-hidden",
+        onStateMapPage ? "bg-[var(--tool-chrome-bg)]" : "bg-[var(--bg-ground)]",
+      )}
+    >
+      {children}
+    </PrototypeProvider>
+  );
+}
+
+export function PrototypeShell({
+  slug,
+  componentRegistry,
+  children,
+}: PrototypeShellProps) {
+  return (
+    <PrototypeCommentRoot slug={slug} componentRegistry={componentRegistry}>
+      <PrototypeReviewProvider slug={slug}>
+        <PrototypeCommentReviewBridge />
+        <PrototypeShellLayout>
+          <div className="flex min-h-0 flex-1 overflow-hidden">
+            <PrototypePreviewArea slug={slug}>{children}</PrototypePreviewArea>
+            <PrototypeCommentsSidebarHost />
+          </div>
+          <PrototypeCommentToolbar />
+        </PrototypeShellLayout>
+      </PrototypeReviewProvider>
+    </PrototypeCommentRoot>
+  );
+}

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

@@ -0,0 +1,68 @@
+"use client";
+
+import { useEffect } from "react";
+
+import { capturePrototypeViewportPng } from "@prototype/lib/prototypes/capture-prototype-viewport";
+import { createStateScreenshotThumbnail } from "@prototype/lib/prototypes/create-state-screenshot-thumbnail";
+import { getStateScreenshotThumbSize } from "@prototype/lib/prototypes/prototype-state-canvas-constants";
+import { dispatchPrototypeStateScreenshotCaptured } from "@prototype/lib/prototypes/prototype-state-screenshot";
+
+const CAPTURE_DELAY_MS = 700;
+
+type PrototypeStateScreenshotCaptureProps = {
+  slug: string;
+  stateId: string | null;
+  enabled?: boolean;
+};
+
+export function PrototypeStateScreenshotCapture({
+  slug,
+  stateId,
+  enabled = true,
+}: PrototypeStateScreenshotCaptureProps) {
+  useEffect(() => {
+    if (!enabled || !stateId || process.env.NODE_ENV !== "development") return;
+
+    let cancelled = false;
+
+    const capture = async () => {
+      const dataUrl = await capturePrototypeViewportPng(CAPTURE_DELAY_MS);
+      if (cancelled || !dataUrl) return;
+
+      const { width, height } = getStateScreenshotThumbSize();
+      const thumbnail =
+        (await createStateScreenshotThumbnail(dataUrl, width, height)) ?? dataUrl;
+
+      try {
+        const response = await fetch(`/api/prototypes/${slug}/screenshot`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ image: thumbnail, stateId }),
+        });
+
+        if (!response.ok) {
+          throw new Error("Failed to save state screenshot");
+        }
+
+        const payload = (await response.json()) as { version?: number };
+        if (cancelled || payload.version == null) return;
+
+        dispatchPrototypeStateScreenshotCaptured({
+          slug,
+          stateId,
+          version: payload.version,
+        });
+      } catch (error) {
+        console.warn("[prototype-state-screenshot]", error);
+      }
+    };
+
+    void capture();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [enabled, slug, stateId]);
+
+  return null;
+}

package/src/components/ui/button.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@prototype/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/src/components/ui/dialog.module.scss

@@ -0,0 +1,81 @@
+$dialog-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
+
+.overlay {
+  &[data-state="open"] {
+    animation: dialogOverlayIn 200ms ease-out both;
+  }
+
+  &[data-state="closed"] {
+    animation: dialogOverlayOut 150ms ease both;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &[data-state="open"],
+    &[data-state="closed"] {
+      animation: none;
+    }
+  }
+}
+
+.content {
+  transform: translate(-50%, -50%);
+
+  &[data-state="open"] {
+    animation: dialogContentIn 220ms $dialog-ease-out both;
+  }
+
+  &[data-state="closed"] {
+    animation: dialogContentOut 160ms ease both;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &[data-state="open"],
+    &[data-state="closed"] {
+      animation: none;
+    }
+  }
+}
+
+@keyframes dialogOverlayIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes dialogOverlayOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes dialogContentIn {
+  from {
+    opacity: 0;
+    transform: translate(-50%, calc(-50% + 6px)) scale(0.97);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes dialogContentOut {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate(-50%, calc(-50% + 4px)) scale(0.97);
+  }
+}

package/src/components/ui/dialog.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import * as React from "react";
+
+import { getPrototypePortalContainer } from "@prototype/lib/tool-portal";
+import { cn } from "@prototype/lib/utils";
+
+import styles from "./dialog.module.scss";
+
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogClose = DialogPrimitive.Close;
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogOverlay = React.forwardRef<
+  React.ComponentRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      styles.overlay,
+      "fixed inset-0 z-50 bg-black/50",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ComponentRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+  }
+>(({ className, children, showCloseButton = true, ...props }, ref) => (
+  <DialogPortal container={getPrototypePortalContainer()}>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        styles.content,
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg gap-4 border bg-background p-6 shadow-lg sm:rounded-lg",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton ? (
+        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
+          <X className="size-4" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      ) : null}
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+function DialogHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col space-y-1.5 text-center sm:text-left",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const DialogTitle = React.forwardRef<
+  React.ComponentRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ComponentRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};