proto-plugin 0.1.1 → 0.1.3

package/src/components/shell/prototype-link-source-modal.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { PrototypeToolDialog } from "@prototype/components/platform-ui/prototype-tool-dialog";
+import { Button } from "@prototype/components/ui/button";
+import { Input } from "@prototype/components/ui/input";
+import { Label } from "@prototype/components/ui/label";
+import { PROTOTYPE_BRIEF_FIELD_BORDER_CLASS } from "@prototype/components/prototypes/prototype-brief-field";
+import { buildLinkSourceCopyText } from "@prototype/lib/prototypes/link-source-prompt";
+import useCopyToClipboard from "@prototype/lib/use-copy-to-clipboard";
+import { useEffect, useId, useState } from "react";
+import { toast } from "sonner";
+
+export type PrototypeLinkSourceModalProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  currentSourcePath?: string;
+};
+
+export function PrototypeLinkSourceModal({
+  open,
+  onOpenChange,
+  currentSourcePath,
+}: PrototypeLinkSourceModalProps) {
+  const pathFieldId = useId();
+  const [sourcePath, setSourcePath] = useState("");
+  const [isCopying, setIsCopying] = useState(false);
+  const { copy, icon, isCopied } = useCopyToClipboard();
+  const canCopy = sourcePath.trim().length > 0;
+  const isUpdate = Boolean(currentSourcePath?.trim());
+
+  useEffect(() => {
+    if (!open) {
+      setSourcePath("");
+      return;
+    }
+
+    setSourcePath(currentSourcePath?.trim() ?? "");
+  }, [open, currentSourcePath]);
+
+  const handleCopy = async () => {
+    if (!canCopy || isCopying) return;
+
+    setIsCopying(true);
+
+    try {
+      await copy(
+        buildLinkSourceCopyText({
+          sourcePath,
+          currentSourcePath,
+        }),
+      );
+    } catch {
+      toast.error("Copy error", {
+        description: "Failed to copy link source prompt",
+      });
+    } finally {
+      setIsCopying(false);
+    }
+  };
+
+  return (
+    <PrototypeToolDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title={isUpdate ? "Change source app" : "Link source app"}
+      description="Set the codebase for which you're making prototypes."
+      bodyClassName="gap-4"
+      footerClassName="justify-end"
+      footer={
+        <Button
+          type="button"
+          variant="chrome"
+          size="sm"
+          className="h-8 gap-1.5"
+          disabled={!canCopy || isCopying}
+          onClick={() => {
+            void handleCopy();
+          }}
+          aria-label="Copy link source prompt"
+        >
+          {isCopied ? "Copied prompt" : isCopying ? "Copying…" : "Copy prompt"}
+          {icon}
+        </Button>
+      }
+    >
+      <div className="flex flex-col gap-1.5">
+        <Label htmlFor={pathFieldId} className="text-foreground">
+          Source path, description of folder, or folder name
+        </Label>
+        <Input
+          id={pathFieldId}
+          value={sourcePath}
+          onChange={(event) => setSourcePath(event.target.value)}
+          placeholder="ex. ../cal.diy, cal.diy, or sibling folder to this host app"
+          className={PROTOTYPE_BRIEF_FIELD_BORDER_CLASS}
+        />
+      </div>
+    </PrototypeToolDialog>
+  );
+}

package/src/components/shell/prototype-plugin-update-popup.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { Button } from "@prototype/components/ui/button";
+import { buildUpgradeProtoPluginCopyText } from "@prototype/lib/prototypes/upgrade-proto-plugin-prompt";
+import { useProtoPluginVersionCheck } from "@prototype/lib/prototypes/use-proto-plugin-version-check";
+import useCopyToClipboard from "@prototype/lib/use-copy-to-clipboard";
+import { cn } from "@prototype/lib/utils";
+import { X } from "lucide-react";
+import { toast } from "sonner";
+
+export function PrototypePluginUpdatePopup() {
+  const { status, shouldShowPopup, dismiss } = useProtoPluginVersionCheck();
+  const { copy, icon, isCopied } = useCopyToClipboard();
+
+  if (!shouldShowPopup || !status?.installed || !status.latest) {
+    return null;
+  }
+
+  const handleCopy = async () => {
+    try {
+      await copy(
+        buildUpgradeProtoPluginCopyText({
+          installed: status.installed!,
+          latest: status.latest!,
+        }),
+      );
+    } catch {
+      toast.error("Copy error", {
+        description: "Failed to copy upgrade prompt",
+      });
+    }
+  };
+
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      className={cn(
+        "border-border bg-card ring-border pointer-events-auto fixed bottom-4 left-4 z-[1050] flex w-[min(20rem,calc(100vw-2rem))] flex-col gap-3 rounded-xl border p-4 shadow-lg ring-[0.5px]",
+      )}
+    >
+      <div className="flex items-start justify-between gap-2">
+        <div className="min-w-0 flex-1">
+          <p className="text-sm font-medium text-foreground">Update proto-plugin</p>
+          <p className="mt-1 text-sm text-muted-foreground">
+            v{status.latest} is available. You&apos;re on v{status.installed}.
+          </p>
+        </div>
+        <button
+          type="button"
+          aria-label="Dismiss update notification"
+          className="text-muted-foreground hover:text-foreground shrink-0 rounded p-1 transition-colors duration-200 ease"
+          onClick={dismiss}
+        >
+          <X size={14} />
+        </button>
+      </div>
+
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        className="h-8 w-fit cursor-pointer gap-1.5"
+        onClick={() => {
+          void handleCopy();
+        }}
+        aria-label="Copy upgrade prompt"
+      >
+        {isCopied ? "Copied prompt" : "Copy prompt"}
+        {icon}
+      </Button>
+    </div>
+  );
+}

package/src/components/ui/button.tsx

@@ -4,10 +4,10 @@ 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";
+import { cn } from "../../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",
+  "inline-flex cursor-pointer 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:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -18,6 +18,8 @@ const buttonVariants = cva(
           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        chrome:
+          "border-0 bg-[var(--tool-chrome-button-bg)] text-[var(--tool-chrome-button-text)] shadow-none hover:bg-[var(--tool-chrome-button-bg-hover)] hover:text-[var(--tool-chrome-button-text-hover)]",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },

package/src/components/ui/dialog.tsx

@@ -4,8 +4,12 @@ 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 { isCommentCaptureBlockedTarget } from "../../lib/prototype-comments/core/comment-capture-blocked";
+import {
+  getPrototypeDialogPortalContainer,
+  getPrototypeToolDialogPortalContainer,
+} from "../../lib/tool-portal";
+import { cn } from "../../lib/utils";
 
 import styles from "./dialog.module.scss";
 
@@ -14,6 +18,19 @@ const DialogTrigger = DialogPrimitive.Trigger;
 const DialogClose = DialogPrimitive.Close;
 const DialogPortal = DialogPrimitive.Portal;
 
+function isPrototypeToolOutsideEventTarget(target: EventTarget | null): boolean {
+  return target instanceof HTMLElement && isCommentCaptureBlockedTarget(target);
+}
+
+function ignorePrototypeToolOutsideEvent(event: {
+  preventDefault: () => void;
+  target: EventTarget | null;
+}): void {
+  if (isPrototypeToolOutsideEventTarget(event.target)) {
+    event.preventDefault();
+  }
+}
+
 const DialogOverlay = React.forwardRef<
   React.ComponentRef<typeof DialogPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
@@ -30,14 +47,24 @@ const DialogOverlay = React.forwardRef<
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
+export type DialogPortalScope = "viewport" | "tool";
+
 const DialogContent = React.forwardRef<
   React.ComponentRef<typeof DialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
     showCloseButton?: boolean;
+    overlayClassName?: string;
+    portalScope?: DialogPortalScope;
   }
->(({ className, children, showCloseButton = true, ...props }, ref) => (
-  <DialogPortal container={getPrototypePortalContainer()}>
-    <DialogOverlay />
+>(({ className, children, showCloseButton = true, overlayClassName, portalScope = "viewport", onPointerDownOutside, onInteractOutside, onFocusOutside, ...props }, ref) => (
+  <DialogPortal
+    container={
+      portalScope === "tool"
+        ? getPrototypeToolDialogPortalContainer()
+        : getPrototypeDialogPortalContainer()
+    }
+  >
+    <DialogOverlay className={overlayClassName} />
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
@@ -45,6 +72,18 @@ const DialogContent = React.forwardRef<
         "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,
       )}
+      onPointerDownOutside={(event) => {
+        ignorePrototypeToolOutsideEvent(event);
+        onPointerDownOutside?.(event);
+      }}
+      onInteractOutside={(event) => {
+        ignorePrototypeToolOutsideEvent(event);
+        onInteractOutside?.(event);
+      }}
+      onFocusOutside={(event) => {
+        ignorePrototypeToolOutsideEvent(event);
+        onFocusOutside?.(event);
+      }}
       {...props}
     >
       {children}

package/src/components/ui/dropdown-menu.tsx

@@ -4,8 +4,8 @@ import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check, ChevronRight, Circle } from "lucide-react";
 import * as React from "react";
 
-import { getPrototypePortalContainer } from "@prototype/lib/tool-portal";
-import { cn } from "@prototype/lib/utils";
+import { getPrototypePortalContainer } from "../../lib/tool-portal";
+import { cn } from "../../lib/utils";
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;

package/src/components/ui/input.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "@prototype/lib/utils";
+import { cn } from "../../lib/utils";
 
 const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
   ({ className, type, ...props }, ref) => {

package/src/components/ui/label.tsx

@@ -4,7 +4,7 @@ import * as LabelPrimitive from "@radix-ui/react-label";
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
-import { cn } from "@prototype/lib/utils";
+import { cn } from "../../lib/utils";
 
 const labelVariants = cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",

package/src/components/ui/option-select.tsx

@@ -3,14 +3,14 @@
 import { ChevronDown } from "lucide-react";
 import type { ReactNode } from "react";
 
-import { Button } from "@prototype/components/ui/button";
+import { Button } from "./button";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@prototype/components/ui/dropdown-menu";
-import { cn } from "@prototype/lib/utils";
+} from "./dropdown-menu";
+import { cn } from "../../lib/utils";
 
 export type OptionSelectItem<T extends string = string> = {
   value: T;

package/src/components/ui/scroll-area.tsx

@@ -3,7 +3,7 @@
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import * as React from "react";
 
-import { cn } from "@prototype/lib/utils";
+import { cn } from "../../lib/utils";
 
 const ScrollArea = React.forwardRef<
   React.ComponentRef<typeof ScrollAreaPrimitive.Root>,

package/src/components/ui/separator.tsx

@@ -3,7 +3,7 @@
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import * as React from "react";
 
-import { cn } from "@prototype/lib/utils";
+import { cn } from "../../lib/utils";
 
 const Separator = React.forwardRef<
   React.ComponentRef<typeof SeparatorPrimitive.Root>,

package/src/components/ui/slider.tsx

@@ -3,7 +3,7 @@
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import * as React from "react";
 
-import { cn } from "@prototype/lib/utils";
+import { cn } from "../../lib/utils";
 
 const Slider = React.forwardRef<
   React.ComponentRef<typeof SliderPrimitive.Root>,

package/src/components/ui/switch.tsx

@@ -3,7 +3,7 @@
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 import * as React from "react";
 
-import { cn } from "@prototype/lib/utils";
+import { cn } from "../../lib/utils";
 
 const Switch = React.forwardRef<
   React.ComponentRef<typeof SwitchPrimitives.Root>,

package/src/components/ui/tabs.tsx

@@ -3,7 +3,7 @@
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import * as React from "react";
 
-import { cn } from "@prototype/lib/utils";
+import { cn } from "../../lib/utils";
 
 const Tabs = TabsPrimitive.Root;
 

package/src/components/ui/toggle-group.tsx

@@ -4,7 +4,7 @@ import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import { type VariantProps, cva } from "class-variance-authority";
 import * as React from "react";
 
-import { cn } from "@prototype/lib/utils";
+import { cn } from "../../lib/utils";
 
 const toggleVariants = cva(
   "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",

package/src/components/ui/tooltip.tsx

@@ -3,8 +3,8 @@
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import * as React from "react";
 
-import { getPrototypePortalContainer } from "@prototype/lib/tool-portal";
-import { cn } from "@prototype/lib/utils";
+import { getPrototypePortalContainer } from "../../lib/tool-portal";
+import { cn } from "../../lib/utils";
 
 const TooltipProvider = TooltipPrimitive.Provider;
 

package/src/config/create-prototype-component-library-page.tsx

@@ -0,0 +1,74 @@
+import {
+  PrototypeGalleryHeader,
+  PrototypeGalleryPageLayout,
+} from "@prototype/components/shell/prototype-gallery-shell";
+import { PrototypeComponentLibraryEmptyState } from "@prototype/components/shell/prototype-component-library-empty-state";
+import { formatSourceDirectoryName } from "@prototype/lib/format-source-directory-name";
+import { PROTOTYPE_SOURCE_SURFACE_ATTR } from "@prototype/lib/tool-portal";
+import type { ReactNode } from "react";
+
+type PrototypeComponentLibraryPageOptions = {
+  title?: string;
+  description?: string;
+  eyebrow?: string;
+  children?: ReactNode;
+  sourcePath?: string;
+  syncConfigPath?: string;
+  componentLibraryPagePath?: string;
+};
+
+export function createPrototypeComponentLibraryPage(
+  options: PrototypeComponentLibraryPageOptions = {},
+) {
+  const {
+    title = "Component Library",
+    description = "Shared UI primitives and building blocks used across prototypes.",
+    eyebrow,
+    children,
+    sourcePath = process.env.SOURCE_PATH,
+    syncConfigPath,
+    componentLibraryPagePath,
+  } = options;
+
+  const sourceDirectoryName = formatSourceDirectoryName(sourcePath);
+  const isEmpty = !children;
+
+  function ComponentLibraryPage() {
+    return (
+      <PrototypeGalleryPageLayout
+        header={
+          <PrototypeGalleryHeader
+            eyebrow={eyebrow}
+            title={title}
+            description={description}
+            className="mb-0"
+          />
+        }
+      >
+        {isEmpty ? (
+          <div className="px-10 pt-8 pb-16 lg:px-16">
+            <PrototypeComponentLibraryEmptyState
+              sourcePath={sourceDirectoryName ?? sourcePath}
+              syncConfigPath={syncConfigPath}
+              componentLibraryPagePath={componentLibraryPagePath}
+            />
+          </div>
+        ) : (
+          // Isolate synced host design-system components from the tool chrome
+          // theme scoped to [data-prototype-root]. This surface pins neutral
+          // product tokens (see packages/prototype/src/styles/globals.css), so
+          // previews never inherit tool-chrome --primary/--font-sans. Hosts layer
+          // their brand token values by scoping to [data-prototype-source-surface].
+          <div
+            className="px-10 pt-8 pb-16 lg:px-16"
+            {...{ [PROTOTYPE_SOURCE_SURFACE_ATTR]: "" }}
+          >
+            {children}
+          </div>
+        )}
+      </PrototypeGalleryPageLayout>
+    );
+  }
+
+  return ComponentLibraryPage;
+}

package/src/config/create-prototype-gallery-page.tsx

@@ -1,11 +1,15 @@
 import "server-only";
 
 import { PrototypeGalleryClient } from "@prototype/components/prototype-gallery-client";
-import { PrototypeGalleryHeader } from "@prototype/components/shell/prototype-gallery-shell";
+import {
+  PrototypeGalleryHeader,
+  PrototypeGalleryPageLayout,
+} from "@prototype/components/shell/prototype-gallery-shell";
 import { createPrototypeRegistry } from "@prototype/lib/prototypes/create-prototype-registry";
 import type { PrototypeConfig } from "@prototype/lib/prototypes/prototype-config-types";
 
 import { readScreenshotManifest } from "../lib/prototypes/screenshot-manifest";
+import { sortPrototypesByCreationDate } from "../lib/prototypes/sort-prototypes-by-creation-date";
 
 type PrototypeGalleryPageOptions = {
   title?: string;
@@ -25,24 +29,17 @@ export function createPrototypeGalleryPage(
   } = options;
 
   async function PrototypeGallery() {
-    const prototypes = registry.getAllPrototypes();
+    const [prototypes, screenshotManifest] = await Promise.all([
+      Promise.resolve(registry.getAllPrototypes()),
+      readScreenshotManifest(),
+    ]);
+    const sortedPrototypes = await sortPrototypesByCreationDate(prototypes);
     const screenshotVersions =
-      process.env.NODE_ENV === "development"
-        ? await readScreenshotManifest()
-        : {};
-
-    if (prototypes.length === 0) {
-      return (
-        <p className="text-muted-foreground py-12 text-sm">
-          No prototypes yet. Add one in{" "}
-          <code className="text-foreground">prototype.config.ts</code>.
-        </p>
-      );
-    }
+      process.env.NODE_ENV === "development" ? screenshotManifest : {};
 
     return (
       <PrototypeGalleryClient
-        prototypes={prototypes}
+        prototypes={sortedPrototypes}
         screenshotVersions={screenshotVersions}
       />
     );
@@ -50,14 +47,20 @@ export function createPrototypeGalleryPage(
 
   function HomePage() {
     return (
-      <div className="px-10 lg:px-16">
-        <PrototypeGalleryHeader
-          eyebrow={eyebrow}
-          title={title}
-          description={description}
-        />
-        <PrototypeGallery />
-      </div>
+      <PrototypeGalleryPageLayout
+        header={
+          <PrototypeGalleryHeader
+            eyebrow={eyebrow}
+            title={title}
+            description={description}
+            className="mb-0"
+          />
+        }
+      >
+        <div className="px-10 pt-8 pb-16 lg:px-16">
+          <PrototypeGallery />
+        </div>
+      </PrototypeGalleryPageLayout>
     );
   }
 

package/src/config/create-prototype-host-app.tsx

@@ -4,7 +4,6 @@ import { notFound } from "next/navigation";
 import { Suspense } from "react";
 
 import { PrototypeShell } from "@prototype/components/shell/prototype-shell";
-import { PrototypeDefaultStateMapPage } from "@prototype/components/prototypes/prototype-default-state-map-page";
 import { createPrototypeRegistry } from "@prototype/lib/prototypes/create-prototype-registry";
 import type {
   PrototypeConfig,
@@ -12,6 +11,7 @@ import type {
 } from "@prototype/lib/prototypes/prototype-config-types";
 
 import { createPrototypePage } from "./create-prototype-page";
+import { createPrototypeStateMapPage } from "./create-prototype-state-map-page";
 
 function matchExtraRoute(
   path: string[],
@@ -51,6 +51,7 @@ function findExtraRoute(
 export function createPrototypeCatchAllPage(config: PrototypeConfig) {
   const registry = createPrototypeRegistry(config);
   const prototypePage = createPrototypePage(config);
+  const stateMapPage = createPrototypeStateMapPage(config);
 
   function generateStaticParams() {
     const prototypePaths = prototypePage.generateStaticParams().map(({ slug }) => ({
@@ -98,20 +99,7 @@ export function createPrototypeCatchAllPage(config: PrototypeConfig) {
 
     if (path.length === 3 && path[0] === "prototypes" && path[2] === "states") {
       const slug = path[1]!;
-      const prototype = registry.getPrototype(slug);
-      const componentRegistry = registry.getPrototypeComponentRegistryForSlug(slug);
-
-      if (!prototype) {
-        notFound();
-      }
-
-      return (
-        <Suspense fallback={null}>
-          <PrototypeShell slug={slug} componentRegistry={componentRegistry}>
-            <PrototypeDefaultStateMapPage slug={slug} />
-          </PrototypeShell>
-        </Suspense>
-      );
+      return stateMapPage.default({ params: Promise.resolve({ slug }) });
     }
 
     notFound();

package/src/config/create-prototype-site-layout.tsx

@@ -2,15 +2,22 @@ import type { ComponentType, ReactNode } from "react";
 
 import { PrototypeGalleryShell } from "@prototype/components/shell/prototype-gallery-shell";
 
+import { formatSourceDirectoryName } from "@prototype/lib/format-source-directory-name";
+
 import { PrototypeSiteLayoutClient } from "./prototype-site-layout-client";
 
 type PrototypeSiteLayoutOptions = {
   toaster?: ReactNode;
+  sourceDirectoryName?: string;
 };
 
 export function createPrototypeSiteLayout(
   options: PrototypeSiteLayoutOptions = {},
 ) {
+  const sourcePath = process.env.SOURCE_PATH;
+  const sourceDirectoryName =
+    options.sourceDirectoryName ?? formatSourceDirectoryName(sourcePath);
+
   return function PrototypeSiteLayout({
     children,
   }: Readonly<{
@@ -18,7 +25,13 @@ export function createPrototypeSiteLayout(
   }>) {
     return (
       <PrototypeSiteLayoutClient
-        galleryShell={PrototypeGalleryShell as ComponentType<{ children: ReactNode }>}
+        galleryShell={PrototypeGalleryShell as ComponentType<{
+          children: ReactNode;
+          sourceDirectoryName?: string;
+          sourcePath?: string;
+        }>}
+        sourceDirectoryName={sourceDirectoryName}
+        sourcePath={sourcePath}
         toaster={options.toaster}
       >
         {children}