proto-plugin 0.1.0

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

@@ -0,0 +1,330 @@
+"use client";
+
+import { PrototypeComponent } from "@prototype/components/prototypes/prototype-target";
+import { Button } from "@prototype/components/ui/button";
+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";
+
+const GALLERY_SECTION_TITLE_CLASS = "tool-chip tool-chip-pink";
+
+const GALLERY_SECTION_DESC_CLASS = "tool-body max-w-2xl";
+
+const GALLERY_CARD_TITLE_CLASS = "text-sm font-medium text-foreground";
+
+const GALLERY_CARD_BODY_CLASS = "tool-body";
+
+type PrototypeMobbinGalleryLayout = "default" | "sidebar";
+
+type PrototypeMobbinGalleryProps = {
+  componentIdPrefix: string;
+  galleryId: string;
+  references: MobbinReference[];
+  title?: string;
+  description?: string;
+  imagePathForReference?: (id: string) => string;
+  layout?: PrototypeMobbinGalleryLayout;
+};
+
+function resolveReferenceImageUrl(
+  reference: MobbinReference,
+  imagePathForReference?: (id: string) => string,
+) {
+  return imagePathForReference?.(reference.id) ?? reference.imageUrl;
+}
+
+function MobbinReferenceCard({
+  reference,
+  imageUrl,
+  componentId,
+  onOpen,
+  compact = false,
+}: {
+  reference: MobbinReference;
+  imageUrl: string;
+  componentId: string;
+  onOpen: () => void;
+  compact?: boolean;
+}) {
+  const cardTitleClass = compact
+    ? "text-sm text-foreground font-medium"
+    : GALLERY_CARD_TITLE_CLASS;
+  const cardBodyClass = compact
+    ? "text-sm text-muted-foreground leading-relaxed"
+    : GALLERY_CARD_BODY_CLASS;
+
+  return (
+    <PrototypeComponent id={componentId} className="flex flex-col gap-2">
+      <div className="flex flex-wrap items-center gap-x-2 gap-y-1 px-0.5">
+        <p className={cardTitleClass}>{reference.appName}</p>
+        {reference.variantHint ? (
+          <span className="text-sm text-muted-foreground bg-muted rounded px-1.5 py-0.5 text-[13px]">
+            {reference.variantHint}
+          </span>
+        ) : null}
+      </div>
+
+      <button
+        type="button"
+        onClick={onOpen}
+        className={cn(
+          "bg-card ring-border group relative block w-full cursor-zoom-in overflow-hidden rounded-xl text-left shadow-lg ring-[0.5px]",
+          "focus-visible:ring-border focus-visible:outline-none focus-visible:ring-2",
+        )}
+      >
+        {/* eslint-disable-next-line @next/next/no-img-element -- Mobbin CDN URLs are ephemeral; local assets preferred when available. */}
+        <img
+          src={imageUrl}
+          alt={`${reference.appName} reference on Mobbin`}
+          className="aspect-[16/10] w-full object-cover object-top transition-opacity duration-200 ease group-hover:opacity-90"
+          loading="lazy"
+        />
+        <span className="bg-background/90 text-muted-foreground text-sm absolute right-2 top-2 inline-flex items-center gap-1 rounded-md px-2 py-1 opacity-0 backdrop-blur-sm transition-opacity duration-200 ease group-hover:opacity-100">
+          <ZoomIn className="size-3" />
+          View larger
+        </span>
+      </button>
+
+      <div className="px-0.5">
+        <p className={cardBodyClass}>{reference.relevance}</p>
+      </div>
+    </PrototypeComponent>
+  );
+}
+
+function MobbinReferenceLightbox({
+  references,
+  imageUrls,
+  activeIndex,
+  onClose,
+  onNavigate,
+  galleryId,
+}: {
+  references: MobbinReference[];
+  imageUrls: string[];
+  activeIndex: number;
+  onClose: () => void;
+  onNavigate: (index: number) => void;
+  galleryId: string;
+}) {
+  const reference = references[activeIndex];
+  const imageUrl = imageUrls[activeIndex];
+  const total = references.length;
+  const hasPrev = activeIndex > 0;
+  const hasNext = activeIndex < total - 1;
+
+  const goPrev = useCallback(() => {
+    if (hasPrev) onNavigate(activeIndex - 1);
+  }, [activeIndex, hasPrev, onNavigate]);
+
+  const goNext = useCallback(() => {
+    if (hasNext) onNavigate(activeIndex + 1);
+  }, [activeIndex, hasNext, onNavigate]);
+
+  useEffect(() => {
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        onClose();
+      } else if (event.key === "ArrowLeft") {
+        goPrev();
+      } else if (event.key === "ArrowRight") {
+        goNext();
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [goNext, goPrev, onClose]);
+
+  useEffect(() => {
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previousOverflow;
+    };
+  }, []);
+
+  return (
+    <PrototypeComponent
+      id={`${galleryId}.lightbox`}
+      className="fixed inset-0 z-(--z-modal) flex items-center justify-center p-4 sm:p-8"
+      role="dialog"
+      aria-modal="true"
+      aria-label={`${reference.appName} Mobbin reference`}
+      data-mobbin-lightbox-open=""
+    >
+      <button
+        type="button"
+        aria-label="Close lightbox"
+        className="bg-muted/70 absolute inset-0 backdrop-blur-[6px] transition-opacity duration-200 ease-(--ease-out-cubic) motion-reduce:transition-none"
+        onClick={onClose}
+      />
+
+      <div className="pointer-events-none relative z-10 flex max-h-full w-full max-w-6xl flex-col gap-4">
+        <div className="pointer-events-auto flex items-center justify-between gap-4">
+          <p className="text-sm text-muted-foreground">
+            {activeIndex + 1} of {total}
+          </p>
+          <PrototypeComponent id={`${galleryId}.lightbox.close`}>
+            <Button
+              type="button"
+              variant="secondary"
+              size="icon"
+              aria-label="Close"
+              onClick={onClose}
+            >
+              <X />
+            </Button>
+          </PrototypeComponent>
+        </div>
+
+        <div className="relative flex min-h-0 flex-1 items-center justify-center">
+          {hasPrev ? (
+            <PrototypeComponent
+              id={`${galleryId}.lightbox.prev`}
+              className="pointer-events-auto absolute left-0 z-10 -translate-x-1/2 sm:-translate-x-full sm:pr-3"
+            >
+              <Button
+                type="button"
+                variant="secondary"
+                size="icon"
+                aria-label="Previous reference"
+                onClick={goPrev}
+              >
+                <ChevronLeft />
+              </Button>
+            </PrototypeComponent>
+          ) : null}
+
+          <div className="bg-card ring-border pointer-events-auto max-h-[min(75vh,900px)] w-full overflow-hidden rounded-xl shadow-lg ring-[0.5px]">
+            {/* eslint-disable-next-line @next/next/no-img-element -- Mobbin CDN URLs are ephemeral; local assets preferred when available. */}
+            <img
+              src={imageUrl}
+              alt={`${reference.appName} reference on Mobbin`}
+              className="max-h-[min(75vh,900px)] w-full object-contain object-top"
+            />
+          </div>
+
+          {hasNext ? (
+            <PrototypeComponent
+              id={`${galleryId}.lightbox.next`}
+              className="pointer-events-auto absolute right-0 z-10 translate-x-1/2 sm:translate-x-full sm:pl-3"
+            >
+              <Button
+                type="button"
+                variant="secondary"
+                size="icon"
+                aria-label="Next reference"
+                onClick={goNext}
+              >
+                <ChevronRight />
+              </Button>
+            </PrototypeComponent>
+          ) : null}
+        </div>
+
+        <div className="bg-card/95 ring-border pointer-events-auto rounded-xl px-4 py-3 shadow-lg ring-[0.5px] backdrop-blur-sm sm:px-5 sm:py-4">
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+            <div className="flex min-w-0 flex-col gap-1">
+              <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
+                <p className={GALLERY_CARD_TITLE_CLASS}>{reference.appName}</p>
+                {reference.variantHint ? (
+                  <span className="text-sm text-muted-foreground bg-muted rounded px-1.5 py-0.5">
+                    {reference.variantHint}
+                  </span>
+                ) : null}
+              </div>
+              <p className={GALLERY_CARD_BODY_CLASS}>{reference.relevance}</p>
+            </div>
+            <a
+              href={reference.mobbinUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className={cn(
+                GALLERY_CARD_BODY_CLASS,
+                "hover:text-foreground inline-flex shrink-0 items-center gap-1.5 transition-colors duration-200 ease",
+              )}
+            >
+              View on Mobbin
+              <ExternalLink className="size-3.5" />
+            </a>
+          </div>
+        </div>
+      </div>
+    </PrototypeComponent>
+  );
+}
+
+export function PrototypeMobbinGallery({
+  componentIdPrefix,
+  galleryId,
+  references,
+  title = "Mobbin references",
+  description = "Reference screens from B2B and developer dashboards.",
+  imagePathForReference,
+  layout = "default",
+}: PrototypeMobbinGalleryProps) {
+  const isSidebar = layout === "sidebar";
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+  const imageUrls = references.map((reference) =>
+    resolveReferenceImageUrl(reference, imagePathForReference),
+  );
+
+  const sectionTitleClass = isSidebar
+    ? "text-xs font-medium text-muted-foreground uppercase tracking-wide"
+    : GALLERY_SECTION_TITLE_CLASS;
+  const sectionDescClass = isSidebar
+    ? "text-sm text-muted-foreground leading-relaxed"
+    : GALLERY_SECTION_DESC_CLASS;
+
+  return (
+    <PrototypeComponent id={galleryId}>
+      <PrototypeComponent
+        id={`${componentIdPrefix}.mobbin-references`}
+        className={cn(
+          isSidebar
+            ? "flex flex-col gap-3"
+            : "border-border border-t px-6 py-8",
+        )}
+      >
+        <div className={cn("flex flex-col gap-2", !isSidebar && "mb-6")}>
+          <p className={sectionTitleClass}>{title}</p>
+          {!isSidebar && <p className={sectionDescClass}>{description}</p>}
+        </div>
+
+        <div
+          className={cn(
+            "grid grid-cols-1",
+            isSidebar ? "gap-4" : "gap-10",
+            !isSidebar &&
+              references.length > 1 &&
+              "lg:grid-cols-2 lg:gap-x-8 lg:gap-y-12",
+          )}
+        >
+          {references.map((reference, index) => (
+            <MobbinReferenceCard
+              key={reference.id}
+              reference={reference}
+              imageUrl={imageUrls[index]}
+              componentId={`${componentIdPrefix}.mobbin-reference.${reference.id}`}
+              onOpen={() => setActiveIndex(index)}
+              compact={isSidebar}
+            />
+          ))}
+        </div>
+      </PrototypeComponent>
+
+      {activeIndex !== null ? (
+        <MobbinReferenceLightbox
+          references={references}
+          imageUrls={imageUrls}
+          activeIndex={activeIndex}
+          onClose={() => setActiveIndex(null)}
+          onNavigate={setActiveIndex}
+          galleryId={galleryId}
+        />
+      ) : null}
+    </PrototypeComponent>
+  );
+}

package/src/components/prototypes/prototype-reference-docs.tsx

@@ -0,0 +1,222 @@
+"use client";
+
+import { ToolbarIconButton } from "@prototype/components/platform-ui/toolbar-icon-button";
+import { Button } from "@prototype/components/ui/button";
+import { Input } from "@prototype/components/ui/input";
+import { Label } from "@prototype/components/ui/label";
+import {
+  buildAddReferenceDocCopyText,
+  defaultReferenceDocsConfigPath,
+  isValidReferenceDocInput,
+  type PrototypeReferenceDoc,
+} from "@prototype/lib/prototypes/reference-docs";
+import { usePrototypeReviewOptional } from "@prototype/lib/prototypes/prototype-review-context";
+import useCopyToClipboard from "@prototype/lib/use-copy-to-clipboard";
+import { cn } from "@prototype/lib/utils";
+import { ChevronDown, ExternalLink, Plus } from "lucide-react";
+import { useId, useState } from "react";
+
+const REFERENCE_DOC_CONTENT_FIELD_CLASS =
+  "field-sizing-content min-h-[5rem] w-full resize-y rounded-md border border-[var(--tool-chrome-border)] bg-[var(--tool-chrome-surface-muted)] px-2.5 py-2 text-sm text-[var(--tool-chrome-text)] leading-relaxed shadow-none outline-none placeholder:text-[var(--tool-chrome-text-muted)] focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-0";
+
+function ReferenceDocItem({ doc }: { doc: PrototypeReferenceDoc }) {
+  const [expanded, setExpanded] = useState(false);
+  const hasContent = doc.content.trim().length > 0;
+
+  return (
+    <li className="overflow-hidden rounded-md border border-[var(--tool-chrome-border)] bg-[var(--tool-chrome-surface-muted)]">
+      <div className="flex items-stretch">
+        <a
+          href={doc.link}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex min-w-0 flex-1 items-center gap-1.5 px-2.5 py-2 text-sm text-[var(--tool-chrome-text)] transition-colors duration-200 ease hover:bg-[var(--tool-chrome-gray-highlight)] hover:text-[var(--tool-chrome-text-heading)]"
+        >
+          <ExternalLink className="size-3.5 shrink-0" aria-hidden />
+          <span className="truncate">{doc.name}</span>
+        </a>
+        {hasContent ? (
+          <button
+            type="button"
+            className="inline-flex size-9 shrink-0 items-center justify-center border-l border-[var(--tool-chrome-border)] text-[var(--tool-chrome-text-muted)] transition-colors duration-200 ease hover:bg-[var(--tool-chrome-gray-highlight)] hover:text-[var(--tool-chrome-text)]"
+            aria-expanded={expanded}
+            aria-label={expanded ? "Hide content" : "Show content"}
+            onClick={() => setExpanded((current) => !current)}
+          >
+            <ChevronDown
+              className={cn(
+                "tool-panel-section-chevron size-3.5",
+                expanded && "is-expanded",
+              )}
+              aria-hidden
+            />
+          </button>
+        ) : null}
+      </div>
+      {hasContent ? (
+        <div
+          className={cn(
+            "tool-panel-section-content border-t border-[var(--tool-chrome-border)]",
+            expanded && "is-expanded",
+          )}
+        >
+          <div className="overflow-hidden">
+            <p className="px-2.5 py-2 text-xs leading-relaxed whitespace-pre-wrap text-[var(--tool-chrome-text-muted)]">
+              {doc.content}
+            </p>
+          </div>
+        </div>
+      ) : null}
+    </li>
+  );
+}
+
+type PrototypeReferenceDocsProps = {
+  slug?: string;
+  docs?: PrototypeReferenceDoc[];
+  configFilePath?: string;
+  className?: string;
+};
+
+export function PrototypeReferenceDocs({
+  slug: slugProp,
+  docs: docsProp,
+  configFilePath: configFilePathProp,
+  className,
+}: PrototypeReferenceDocsProps) {
+  const review = usePrototypeReviewOptional();
+  const slug = slugProp ?? review?.slug;
+  const docs = docsProp ?? review?.referenceDocs ?? [];
+  const configFilePath =
+    configFilePathProp ??
+    review?.referenceDocsConfigFilePath ??
+    (slug ? defaultReferenceDocsConfigPath(slug) : undefined);
+  const nameFieldId = useId();
+  const linkFieldId = useId();
+  const contentFieldId = useId();
+  const [showForm, setShowForm] = useState(false);
+  const [name, setName] = useState("");
+  const [link, setLink] = useState("");
+  const [content, setContent] = useState("");
+  const { copy, icon, isCopied } = useCopyToClipboard();
+
+  const canCopy = Boolean(slug) && isValidReferenceDocInput(name, link, content);
+
+  const handleCopyPrompt = () => {
+    if (!slug || !canCopy) return;
+
+    const origin =
+      typeof window !== "undefined" ? window.location.origin : undefined;
+
+    copy(
+      buildAddReferenceDocCopyText({
+        slug,
+        name,
+        link,
+        content,
+        existingDocs: docs,
+        configFilePath,
+        origin,
+      }),
+    );
+  };
+
+  return (
+    <div className={cn("flex flex-col gap-2", className)}>
+      <div className="flex items-center justify-between gap-2">
+        <span className="tool-section-label">Reference docs</span>
+        <ToolbarIconButton
+          onClick={() => setShowForm((current) => !current)}
+          aria-label={showForm ? "Cancel adding doc" : "Add doc"}
+          aria-expanded={showForm}
+        >
+          <Plus size={16} strokeWidth={2} aria-hidden />
+        </ToolbarIconButton>
+      </div>
+
+      {showForm ? (
+        <div className="flex flex-col gap-3 rounded-md border border-[var(--tool-chrome-border)] bg-[var(--tool-chrome-surface-muted)] p-3">
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor={nameFieldId} className="text-foreground">
+              Doc name
+            </Label>
+            <Input
+              id={nameFieldId}
+              value={name}
+              onChange={(event) => setName(event.target.value)}
+              placeholder="Design spec"
+            />
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor={linkFieldId} className="text-foreground">
+              Doc link
+            </Label>
+            <Input
+              id={linkFieldId}
+              value={link}
+              onChange={(event) => setLink(event.target.value)}
+              placeholder="https://docs.google.com/..."
+            />
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor={contentFieldId} className="text-foreground">
+              Content
+            </Label>
+            <textarea
+              id={contentFieldId}
+              value={content}
+              onChange={(event) => setContent(event.target.value)}
+              placeholder="Summarize what this doc covers and why it matters…"
+              aria-label="Doc content"
+              rows={4}
+              className={REFERENCE_DOC_CONTENT_FIELD_CLASS}
+            />
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              type="button"
+              size="default"
+              disabled={!canCopy}
+              onClick={handleCopyPrompt}
+              aria-label="Copy reference doc prompt"
+            >
+              {isCopied ? "Copied" : "Copy prompt"}
+              {icon}
+            </Button>
+            <Button
+              type="button"
+              variant="ghost"
+              size="default"
+              onClick={() => {
+                setShowForm(false);
+                setName("");
+                setLink("");
+                setContent("");
+              }}
+            >
+              Cancel
+            </Button>
+          </div>
+        </div>
+      ) : null}
+
+      {docs.length === 0 ? (
+        <p className="text-xs text-muted-foreground">
+          No reference docs yet. Add one in{" "}
+          {configFilePath ? (
+            <code className="text-[11px]">{configFilePath}</code>
+          ) : (
+            "the prototype codebase"
+          )}
+          .
+        </p>
+      ) : (
+        <ul className="flex flex-col gap-1.5">
+          {docs.map((doc) => (
+            <ReferenceDocItem key={`${doc.name}:${doc.link}`} doc={doc} />
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}