proto-plugin 0.1.0

package/src/lib/prototypes/use-toolbar-hover-panel.ts

@@ -0,0 +1,98 @@
+"use client";
+
+import { useCallback, useEffect, useRef } from "react";
+import type {
+  MouseEvent as ReactMouseEvent,
+  PointerEvent as ReactPointerEvent,
+} from "react";
+
+export const TOOLBAR_PANEL_HOVER_OPEN_DELAY_MS = 100;
+export const TOOLBAR_PANEL_HOVER_CLOSE_DELAY_MS = 150;
+
+export function preventToolbarHoverButtonActivation(
+  event:
+    | ReactMouseEvent<HTMLButtonElement>
+    | ReactPointerEvent<HTMLButtonElement>,
+) {
+  event.preventDefault();
+  event.stopPropagation();
+}
+
+export const TOOLBAR_HOVER_ONLY_BUTTON_PROPS = {
+  onClick: preventToolbarHoverButtonActivation,
+  onPointerDown: preventToolbarHoverButtonActivation,
+} as const;
+
+type UseToolbarHoverPanelOptions = {
+  onOpen: () => void;
+  onClose: () => void;
+  openDelayMs?: number;
+  closeDelayMs?: number;
+};
+
+export function useToolbarHoverPanel({
+  onOpen,
+  onClose,
+  openDelayMs = TOOLBAR_PANEL_HOVER_OPEN_DELAY_MS,
+  closeDelayMs = TOOLBAR_PANEL_HOVER_CLOSE_DELAY_MS,
+}: UseToolbarHoverPanelOptions) {
+  const openTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const clearOpenTimer = useCallback(() => {
+    if (openTimerRef.current) {
+      clearTimeout(openTimerRef.current);
+      openTimerRef.current = null;
+    }
+  }, []);
+
+  const clearCloseTimer = useCallback(() => {
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+  }, []);
+
+  const cancelClose = useCallback(() => {
+    clearCloseTimer();
+  }, [clearCloseTimer]);
+
+  const scheduleOpen = useCallback(
+    (event: ReactPointerEvent<HTMLElement>) => {
+      if (event.pointerType === "touch") return;
+
+      clearCloseTimer();
+      clearOpenTimer();
+      openTimerRef.current = setTimeout(() => {
+        onOpen();
+      }, openDelayMs);
+    },
+    [clearCloseTimer, clearOpenTimer, onOpen, openDelayMs],
+  );
+
+  const scheduleClose = useCallback(() => {
+    clearOpenTimer();
+    clearCloseTimer();
+    closeTimerRef.current = setTimeout(() => {
+      onClose();
+    }, closeDelayMs);
+  }, [clearCloseTimer, clearOpenTimer, closeDelayMs, onClose]);
+
+  useEffect(() => {
+    return () => {
+      clearOpenTimer();
+      clearCloseTimer();
+    };
+  }, [clearCloseTimer, clearOpenTimer]);
+
+  return {
+    triggerProps: {
+      onPointerEnter: scheduleOpen,
+      onPointerLeave: scheduleClose,
+    },
+    panelProps: {
+      onPointerEnter: cancelClose,
+      onPointerLeave: scheduleClose,
+    },
+  };
+}

package/src/lib/prototypes/variant-set-lucide-icon.tsx

@@ -0,0 +1,55 @@
+import type { LucideIcon, LucideProps } from "lucide-react";
+import {
+  ArrowDownUp,
+  CalendarDays,
+  Clock,
+  FilterX,
+  Inbox,
+  LayoutGrid,
+  PanelBottom,
+  Shapes,
+  Smartphone,
+  Table,
+} from "lucide-react";
+
+type VariantSetIconRule = {
+  test: RegExp;
+  icon: LucideIcon;
+};
+
+/** First match wins — order rules from most specific to broadest. */
+const VARIANT_SET_ICON_RULES: VariantSetIconRule[] = [
+  { test: /retention|expir|before/i, icon: Clock },
+  { test: /calendar|date.?picker|date-range/i, icon: CalendarDays },
+  { test: /mobile/i, icon: Smartphone },
+  { test: /order|sort/i, icon: ArrowDownUp },
+  { test: /filter/i, icon: FilterX },
+  { test: /no.?data|empty/i, icon: Inbox },
+  { test: /table|row/i, icon: Table },
+  { test: /footer|dock/i, icon: PanelBottom },
+  { test: /icon/i, icon: Shapes },
+];
+
+export function resolveVariantSetLucideIcon(id: string, label: string): LucideIcon {
+  const haystack = `${id} ${label}`.toLowerCase();
+
+  for (const rule of VARIANT_SET_ICON_RULES) {
+    if (rule.test.test(haystack)) return rule.icon;
+  }
+
+  return LayoutGrid;
+}
+
+type VariantSetLucideIconProps = LucideProps & {
+  variantSetId: string;
+  variantSetLabel: string;
+};
+
+export function VariantSetLucideIcon({
+  variantSetId,
+  variantSetLabel,
+  ...props
+}: VariantSetLucideIconProps) {
+  const Icon = resolveVariantSetLucideIcon(variantSetId, variantSetLabel);
+  return <Icon {...props} />;
+}

package/src/lib/tool-portal.ts

@@ -0,0 +1,33 @@
+export const PROTOTYPE_ROOT_ID = "prototype-root";
+
+export const PROTOTYPE_PREVIEW_STAGE_ID = "prototype-preview-stage";
+
+export const PROTOTYPE_CHROME_ROOT_ID = "prototype-chrome-root";
+
+export const PROTOTYPE_VIEWPORT_ID = "prototype-viewport";
+
+export const PROTOTYPE_SCREENSHOT_ATTR = "data-prototype-screenshot";
+
+export const PROTOTYPE_COMMENTS_SIDEBAR_ROOT_ID =
+  "prototype-comments-sidebar-root";
+
+export function getPrototypePortalContainer(): HTMLElement | undefined {
+  if (typeof document === "undefined") return undefined;
+  return document.getElementById(PROTOTYPE_ROOT_ID) ?? undefined;
+}
+
+export function getPrototypePreviewStage(): HTMLElement | undefined {
+  if (typeof document === "undefined") return undefined;
+  return document.getElementById(PROTOTYPE_PREVIEW_STAGE_ID) ?? undefined;
+}
+
+export function getPrototypeChromeRoot(): HTMLElement | undefined {
+  if (typeof document === "undefined") return undefined;
+  return document.getElementById(PROTOTYPE_CHROME_ROOT_ID) ?? undefined;
+}
+
+export function getPrototypeScreenshotRoot(): HTMLElement | undefined {
+  if (typeof document === "undefined") return undefined;
+  const root = document.querySelector(`[${PROTOTYPE_SCREENSHOT_ATTR}]`);
+  return root instanceof HTMLElement ? root : undefined;
+}

package/src/lib/use-copy-to-clipboard.ts

@@ -0,0 +1,81 @@
+"use client";
+
+import { cn } from "@prototype/lib/utils";
+import { CheckIcon, CopyIcon, SaveIcon } from "lucide-react";
+import { createElement, useCallback, useRef, useState } from "react";
+import { toast } from "sonner";
+
+type CopyState = "idle" | "scaling-out" | "copied" | "reverting-out" | null;
+
+const SCALE_OUT_MS = 200;
+const COPIED_MS = 1500;
+
+// Hook to copy text to clipboard with a cooldown. the cooldownTime is the time
+// in milliseconds before the isCopied state is reset to false. This is useful
+// to display UI that the value was copied.
+export default function useCopyToClipboard({
+  cooldownTime = COPIED_MS,
+  idleIcon = "copy",
+}: {
+  cooldownTime?: number;
+  idleIcon?: "copy" | "save";
+} = {}) {
+  const [state, setState] = useState<CopyState>("idle");
+  const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const isCopied = state === "copied" || state === "reverting-out";
+
+  const copy = useCallback(
+    (text: string) => {
+      clearTimeout(timerRef.current);
+      setState("idle");
+
+      const idle = () => {
+        setState("idle");
+      };
+
+      const revert = () => {
+        setState("reverting-out");
+        timerRef.current = setTimeout(idle, SCALE_OUT_MS);
+      };
+
+      const copied = () => {
+        setState("copied");
+        timerRef.current = setTimeout(revert, cooldownTime);
+      };
+
+      navigator.clipboard
+        .writeText(text)
+        .catch(() => {
+          toast.error("Copy error", {
+            description: "Failed to copy value to clipboard",
+          });
+        })
+        .finally(() => {
+          setState("scaling-out");
+          timerRef.current = setTimeout(copied, SCALE_OUT_MS);
+        });
+    },
+    [cooldownTime],
+  );
+
+  const icon = isCopied
+    ? createElement(CheckIcon, {
+        size: 13,
+        strokeWidth: 2,
+        className: cn(
+          "motion-reduce:animate-none",
+          state === "copied" && "animate-blur-scale-in",
+          state === "reverting-out" && "animate-blur-scale-out",
+        ),
+      })
+    : createElement(idleIcon === "save" ? SaveIcon : CopyIcon, {
+        size: 13,
+        className: cn(
+          "motion-reduce:animate-none",
+          state === "idle" && "animate-blur-scale-in",
+          state === "scaling-out" && "animate-blur-scale-out",
+        ),
+      });
+
+  return { isCopied, copy, icon };
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/lib/vercel-preview/parse-vercel-github-comment.ts

@@ -0,0 +1,81 @@
+export type VercelPreviewProject = {
+  name: string;
+  previewUrl: string;
+  inspectorUrl?: string;
+  status?: string;
+};
+
+export type VercelPreviewFromPr = {
+  projects: VercelPreviewProject[];
+  requestReviewUrl?: string;
+};
+
+type VercelGithubCommentPayload = {
+  projects?: Array<{
+    name?: string;
+    previewUrl?: string;
+    inspectorUrl?: string;
+    nextCommitStatus?: string;
+  }>;
+  requestReviewUrl?: string;
+};
+
+const VERCEL_COMMENT_PATTERN = /\[vc\]:\s*#[^:]+:([A-Za-z0-9+/=]+)/;
+
+export function parseGithubPrUrl(
+  prUrl: string,
+): { owner: string; repo: string; number: number } | null {
+  try {
+    const url = new URL(prUrl);
+    const match = url.pathname.match(/^\/([^/]+)\/([^/]+)\/pull\/(\d+)\/?$/);
+    if (!match) return null;
+    const number = Number(match[3]);
+    if (!Number.isInteger(number) || number < 1) return null;
+    return { owner: match[1], repo: match[2], number };
+  } catch {
+    return null;
+  }
+}
+
+export function parseVercelGithubCommentBody(
+  body: string,
+): VercelPreviewFromPr | null {
+  const match = body.match(VERCEL_COMMENT_PATTERN);
+  if (!match) return null;
+
+  try {
+    const payload = JSON.parse(
+      Buffer.from(match[1], "base64").toString("utf8"),
+    ) as VercelGithubCommentPayload;
+
+    const projects = (payload.projects ?? [])
+      .filter((project) => typeof project.previewUrl === "string")
+      .map((project) => ({
+        name: project.name ?? "preview",
+        previewUrl: project.previewUrl as string,
+        inspectorUrl: project.inspectorUrl,
+        status: project.nextCommitStatus,
+      }));
+
+    if (projects.length === 0) return null;
+
+    return {
+      projects,
+      requestReviewUrl: payload.requestReviewUrl,
+    };
+  } catch {
+    return null;
+  }
+}
+
+export function buildVercelPreviewPageUrl(
+  previewHostOrUrl: string,
+  previewPath = "/",
+): string {
+  const normalized = previewHostOrUrl.startsWith("http")
+    ? previewHostOrUrl
+    : `https://${previewHostOrUrl}`;
+  const url = new URL(normalized);
+  url.pathname = previewPath;
+  return url.toString();
+}

package/src/server/create-host-api-route.ts

@@ -0,0 +1,100 @@
+import { NextRequest, NextResponse } from "next/server";
+
+import type { PrototypeConfig } from "@prototype/lib/prototypes/prototype-config-types";
+
+import {
+  createPrototypeChangelogMetaRoute,
+  createPrototypeCommentIdRoute,
+  createPrototypeCommentsRoute,
+  createPrototypeDesignExplorationDefaultRoute,
+  createPrototypeScreenshotRoute,
+} from "./create-prototype-api-routes";
+import { createGalleryApi } from "./gallery/create-gallery-api";
+import { GET as getPrVercelPreview } from "./pr-vercel-preview-route";
+
+type ApiRouteContext = {
+  params: Promise<{ path: string[] }>;
+};
+
+export function createPrototypeApiRoute(_config: PrototypeConfig) {
+  const commentsRoute = createPrototypeCommentsRoute(_config);
+  const commentIdRoute = createPrototypeCommentIdRoute(_config);
+  const changelogMetaRoute = createPrototypeChangelogMetaRoute(_config);
+  const designExplorationDefaultRoute =
+    createPrototypeDesignExplorationDefaultRoute(_config);
+  const screenshotRoute = createPrototypeScreenshotRoute(_config);
+  const galleryApi =
+    _config.gallery === false ? null : createGalleryApi(_config.gallery);
+
+  async function dispatch(
+    request: NextRequest,
+    context: ApiRouteContext,
+  ): Promise<Response> {
+    const { path } = await context.params;
+    const method = request.method;
+
+    if (path[0] === "pr-vercel-preview" && path.length === 1 && method === "GET") {
+      return getPrVercelPreview(request);
+    }
+
+    if (galleryApi) {
+      const galleryResponse = await galleryApi.dispatch(request, path);
+      if (galleryResponse) {
+        return galleryResponse;
+      }
+    }
+
+    if (path[0] === "prototypes" && path.length >= 2) {
+      const slug = path[1]!;
+
+      if (path.length === 3 && path[2] === "comments") {
+        if (method === "GET") {
+          return commentsRoute.GET(request, { params: Promise.resolve({ slug }) });
+        }
+        if (method === "PUT") {
+          return commentsRoute.PUT(request, { params: Promise.resolve({ slug }) });
+        }
+      }
+
+      if (path.length === 4 && path[2] === "comments" && method === "PUT") {
+        const id = path[3]!;
+        return commentIdRoute.PUT(request, {
+          params: Promise.resolve({ slug, id }),
+        });
+      }
+
+      if (path.length === 3 && path[2] === "changelog-meta") {
+        if (method === "GET") {
+          return changelogMetaRoute.GET(request, { params: Promise.resolve({ slug }) });
+        }
+        if (method === "PUT") {
+          return changelogMetaRoute.PUT(request, { params: Promise.resolve({ slug }) });
+        }
+      }
+
+      if (path.length === 3 && path[2] === "design-exploration-default") {
+        if (method === "GET") {
+          return designExplorationDefaultRoute.GET(request, {
+            params: Promise.resolve({ slug }),
+          });
+        }
+        if (method === "PUT") {
+          return designExplorationDefaultRoute.PUT(request, {
+            params: Promise.resolve({ slug }),
+          });
+        }
+      }
+
+      if (path.length === 3 && path[2] === "screenshot" && method === "POST") {
+        return screenshotRoute.POST(request, { params: Promise.resolve({ slug }) });
+      }
+    }
+
+    return NextResponse.json({ error: "Not found" }, { status: 404 });
+  }
+
+  return { dispatch };
+}
+
+/** @deprecated Use createPrototypeApiRoute */
+export const createHostApiRoute = createPrototypeApiRoute;