proto-plugin 0.1.1 → 0.1.2

package/src/lib/prototypes/use-prototype-tool-theme.tsx

@@ -28,7 +28,7 @@ type PrototypeToolThemeContextValue = {
 const PrototypeToolThemeContext =
   createContext<PrototypeToolThemeContextValue | null>(null);
 
-const DEFAULT_THEME: PrototypeToolTheme = "dark";
+const DEFAULT_THEME: PrototypeToolTheme = "light";
 
 function normalizeTheme(value: string): PrototypeToolTheme {
   return value === "light" ? "light" : "dark";

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

@@ -8,12 +8,21 @@ import type {
 
 export const TOOLBAR_PANEL_HOVER_OPEN_DELAY_MS = 100;
 export const TOOLBAR_PANEL_HOVER_CLOSE_DELAY_MS = 150;
+export const TOOLBAR_HOVER_CAPABLE_MEDIA_QUERY =
+  "(hover: hover) and (pointer: fine)";
+
+export function supportsToolbarHover() {
+  if (typeof window === "undefined") return true;
+  return window.matchMedia(TOOLBAR_HOVER_CAPABLE_MEDIA_QUERY).matches;
+}
 
 export function preventToolbarHoverButtonActivation(
   event:
     | ReactMouseEvent<HTMLButtonElement>
     | ReactPointerEvent<HTMLButtonElement>,
 ) {
+  if (!supportsToolbarHover()) return;
+
   event.preventDefault();
   event.stopPropagation();
 }
@@ -59,7 +68,7 @@ export function useToolbarHoverPanel({
 
   const scheduleOpen = useCallback(
     (event: ReactPointerEvent<HTMLElement>) => {
-      if (event.pointerType === "touch") return;
+      if (!supportsToolbarHover() || event.pointerType === "touch") return;
 
       clearCloseTimer();
       clearOpenTimer();
@@ -71,6 +80,8 @@ export function useToolbarHoverPanel({
   );
 
   const scheduleClose = useCallback(() => {
+    if (!supportsToolbarHover()) return;
+
     clearOpenTimer();
     clearCloseTimer();
     closeTimerRef.current = setTimeout(() => {

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

@@ -1,14 +1,24 @@
 import type { LucideIcon, LucideProps } from "lucide-react";
 import {
   ArrowDownUp,
+  BadgeCheck,
   CalendarDays,
   Clock,
   FilterX,
+  Hexagon,
   Inbox,
   LayoutGrid,
+  LayoutList,
+  LayoutTemplate,
+  PanelsTopLeft,
+  MessageSquareText,
+  Palette,
   PanelBottom,
+  PanelBottomOpen,
+  Send,
   Shapes,
   Smartphone,
+  Sparkles,
   Table,
 } from "lucide-react";
 
@@ -19,6 +29,20 @@ type VariantSetIconRule = {
 
 /** First match wins — order rules from most specific to broadest. */
 const VARIANT_SET_ICON_RULES: VariantSetIconRule[] = [
+  { test: /event-types-page-layout|event types page layout/i, icon: PanelsTopLeft },
+  // proto-partner-page explorations
+  { test: /creator-attribution|creator attribution/i, icon: BadgeCheck },
+  { test: /submit-modal|submit modal/i, icon: Send },
+  { test: /mobile-panel-motion|mobile panel motion/i, icon: PanelBottomOpen },
+  { test: /mobile-picker-layout|mobile picker layout/i, icon: LayoutList },
+  {
+    test: /invite-follow-up-shape-layout|follow-up shape layout/i,
+    icon: LayoutTemplate,
+  },
+  { test: /invite-animations|invite animations/i, icon: Sparkles },
+  { test: /shape-color-picker|shape & color picker/i, icon: Palette },
+  { test: /proto-shapes|proto shapes/i, icon: Hexagon },
+  { test: /invite-copy|invite copy/i, icon: MessageSquareText },
   { test: /retention|expir|before/i, icon: Clock },
   { test: /calendar|date.?picker|date-range/i, icon: CalendarDays },
   { test: /mobile/i, icon: Smartphone },

package/src/lib/tool-portal.ts

@@ -8,6 +8,9 @@ export const PROTOTYPE_VIEWPORT_ID = "prototype-viewport";
 
 export const PROTOTYPE_SCREENSHOT_ATTR = "data-prototype-screenshot";
 
+/** Synced source-app previews (component library, etc.) — fixed product tokens, not tool theme. */
+export const PROTOTYPE_SOURCE_SURFACE_ATTR = "data-prototype-source-surface";
+
 export const PROTOTYPE_COMMENTS_SIDEBAR_ROOT_ID =
   "prototype-comments-sidebar-root";
 
@@ -16,6 +19,27 @@ export function getPrototypePortalContainer(): HTMLElement | undefined {
   return document.getElementById(PROTOTYPE_ROOT_ID) ?? undefined;
 }
 
+/** Dialogs/overlays inside prototype content — scoped to the preview viewport, not the review sidebar. */
+export function getPrototypeDialogPortalContainer(): HTMLElement | undefined {
+  if (typeof document === "undefined") return undefined;
+  return (
+    document.getElementById(PROTOTYPE_VIEWPORT_ID) ??
+    document.getElementById(PROTOTYPE_PREVIEW_STAGE_ID) ??
+    document.getElementById(PROTOTYPE_ROOT_ID) ??
+    undefined
+  );
+}
+
+/** Tool chrome modals (prompt copy, link source, etc.) — outside the screenshot surface so dark/light tool theme applies. */
+export function getPrototypeToolDialogPortalContainer(): HTMLElement | undefined {
+  if (typeof document === "undefined") return undefined;
+  return (
+    document.getElementById(PROTOTYPE_ROOT_ID) ??
+    document.getElementById(PROTOTYPE_PREVIEW_STAGE_ID) ??
+    undefined
+  );
+}
+
 export function getPrototypePreviewStage(): HTMLElement | undefined {
   if (typeof document === "undefined") return undefined;
   return document.getElementById(PROTOTYPE_PREVIEW_STAGE_ID) ?? undefined;

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

@@ -1,9 +1,9 @@
 "use client";
 
+import { copyTextWithAttachments } from "@prototype/lib/copy-text-with-attachments";
 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;
 
@@ -25,7 +25,7 @@ export default function useCopyToClipboard({
   const isCopied = state === "copied" || state === "reverting-out";
 
   const copy = useCallback(
-    (text: string) => {
+    async (text: string) => {
       clearTimeout(timerRef.current);
       setState("idle");
 
@@ -43,17 +43,11 @@ export default function useCopyToClipboard({
         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);
-        });
+      const didCopy = await copyTextWithAttachments(text);
+      if (!didCopy) return;
+
+      setState("scaling-out");
+      timerRef.current = setTimeout(copied, SCALE_OUT_MS);
     },
     [cooldownTime],
   );

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

@@ -6,10 +6,10 @@ import {
   createPrototypeChangelogMetaRoute,
   createPrototypeCommentIdRoute,
   createPrototypeCommentsRoute,
-  createPrototypeDesignExplorationDefaultRoute,
   createPrototypeScreenshotRoute,
 } from "./create-prototype-api-routes";
 import { createGalleryApi } from "./gallery/create-gallery-api";
+import { GET as getPrototypeStorageStatus } from "./prototype-storage-status-route";
 import { GET as getPrVercelPreview } from "./pr-vercel-preview-route";
 
 type ApiRouteContext = {
@@ -20,8 +20,6 @@ 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);
@@ -44,6 +42,12 @@ export function createPrototypeApiRoute(_config: PrototypeConfig) {
       }
     }
 
+    if (path[0] === "prototypes" && path.length === 2 && path[1] === "storage-status") {
+      if (method === "GET") {
+        return getPrototypeStorageStatus();
+      }
+    }
+
     if (path[0] === "prototypes" && path.length >= 2) {
       const slug = path[1]!;
 
@@ -72,19 +76,6 @@ export function createPrototypeApiRoute(_config: PrototypeConfig) {
         }
       }
 
-      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 }) });
       }

package/src/server/create-prototype-api-routes.ts

@@ -25,18 +25,10 @@ import {
   mergePrototypeComments,
   upsertPrototypeComment,
 } from "./redis/prototype-comments";
-import {
-  isValidDesignExplorationDefaultRecord,
-  normalizeDesignExplorationDefaultPayload,
-} from "@prototype/lib/prototypes/design-exploration-default";
 import {
   getPrototypeChangelogMeta,
   setPrototypeChangelogMeta,
 } from "./redis/prototype-changelog-meta";
-import {
-  getPrototypeDesignExplorationDefault,
-  setPrototypeDesignExplorationDefault,
-} from "./redis/prototype-design-exploration-default";
 
 type SlugRouteContext = {
   params: Promise<{ slug: string }>;
@@ -68,17 +60,6 @@ function changelogStorageUnavailableResponse() {
   );
 }
 
-function designDefaultStorageUnavailableResponse() {
-  const status = getRedisStatus();
-  return NextResponse.json(
-    {
-      error: "Design default storage is not configured.",
-      missing: status.missing,
-    },
-    { status: 503 },
-  );
-}
-
 export function createPrototypeCommentsRoute(config: PrototypeConfig) {
   const registry = createPrototypeRegistry(config);
 
@@ -270,102 +251,6 @@ export function createPrototypeChangelogMetaRoute(config: PrototypeConfig) {
   return { GET, PUT };
 }
 
-export function createPrototypeDesignExplorationDefaultRoute(
-  config: PrototypeConfig,
-) {
-  const registry = createPrototypeRegistry(config);
-
-  async function GET(request: NextRequest, { params }: SlugRouteContext) {
-    const { slug } = await params;
-    const prototype = registry.getPrototype(slug);
-
-    if (!prototype) {
-      return NextResponse.json({ error: "Unknown prototype" }, { status: 404 });
-    }
-
-    const storageKeyPrefix = request.nextUrl.searchParams.get("key")?.trim();
-    if (!storageKeyPrefix) {
-      return NextResponse.json(
-        { error: "Missing key query parameter." },
-        { status: 400 },
-      );
-    }
-
-    const redisStatus = getRedisStatus();
-    if (!redisStatus.ok) {
-      return designDefaultStorageUnavailableResponse();
-    }
-
-    try {
-      const record = await getPrototypeDesignExplorationDefault(storageKeyPrefix);
-      return NextResponse.json(record);
-    } catch (error) {
-      console.error("Prototype design-exploration-default GET error:", error);
-      return NextResponse.json(
-        { error: "Failed to load design default variant" },
-        { status: 500 },
-      );
-    }
-  }
-
-  async function PUT(request: NextRequest, { params }: SlugRouteContext) {
-    const { slug } = await params;
-    const prototype = registry.getPrototype(slug);
-
-    if (!prototype) {
-      return NextResponse.json({ error: "Unknown prototype" }, { status: 404 });
-    }
-
-    const storageKeyPrefix = request.nextUrl.searchParams.get("key")?.trim();
-    if (!storageKeyPrefix) {
-      return NextResponse.json(
-        { error: "Missing key query parameter." },
-        { status: 400 },
-      );
-    }
-
-    const redisStatus = getRedisStatus();
-    if (!redisStatus.ok) {
-      return designDefaultStorageUnavailableResponse();
-    }
-
-    let body: unknown;
-    try {
-      body = await request.json();
-    } catch {
-      return NextResponse.json({ error: "Invalid JSON body" }, { status: 400 });
-    }
-
-    if (!isValidDesignExplorationDefaultRecord(body)) {
-      return NextResponse.json(
-        { error: "Invalid design default record body" },
-        { status: 400 },
-      );
-    }
-
-    const record = normalizeDesignExplorationDefaultPayload(body);
-    if (!record) {
-      return NextResponse.json(
-        { error: "Invalid design default record body" },
-        { status: 400 },
-      );
-    }
-
-    try {
-      await setPrototypeDesignExplorationDefault(storageKeyPrefix, record);
-      return NextResponse.json({ ok: true });
-    } catch (error) {
-      console.error("Prototype design-exploration-default PUT error:", error);
-      return NextResponse.json(
-        { error: "Failed to save design default variant" },
-        { status: 500 },
-      );
-    }
-  }
-
-  return { GET, PUT };
-}
-
 export function createPrototypeScreenshotRoute(config: PrototypeConfig) {
   const registry = createPrototypeRegistry(config);
 

package/src/server/prototype-storage-status-route.ts

@@ -0,0 +1,29 @@
+import { NextResponse } from "next/server";
+
+import {
+  getGalleryKvStatus,
+  getGalleryStorageStatus,
+  normalizeGalleryEnv,
+} from "./gallery/gallery-env";
+import { getRedisStatus, normalizeRedisEnv } from "./redis/client";
+
+export function GET() {
+  normalizeRedisEnv();
+  normalizeGalleryEnv();
+
+  const comments = getRedisStatus();
+  const galleryKv = getGalleryKvStatus();
+  const gallery = getGalleryStorageStatus();
+
+  return NextResponse.json({
+    comments: {
+      configured: comments.ok,
+      missing: comments.missing,
+    },
+    gallery: {
+      kvConfigured: galleryKv.ok,
+      storageConfigured: gallery.ok,
+      missing: gallery.missing,
+    },
+  });
+}

package/src/server.ts

@@ -12,7 +12,6 @@ export {
   createPrototypeChangelogMetaRoute,
   createPrototypeCommentIdRoute,
   createPrototypeCommentsRoute,
-  createPrototypeDesignExplorationDefaultRoute,
   createPrototypeScreenshotRoute,
 } from "./server/create-prototype-api-routes";
 
@@ -42,10 +41,3 @@ export {
   getPrototypeChangelogMeta,
   setPrototypeChangelogMeta,
 } from "./server/redis/prototype-changelog-meta";
-
-export {
-  getPrototypeDesignExplorationDefault,
-  setPrototypeDesignExplorationDefault,
-} from "./server/redis/prototype-design-exploration-default";
-
-export { prototypeDesignExplorationDefaultRedisKey } from "./lib/prototypes/design-exploration-default";