proto-plugin 0.1.0

package/src/components/prototypes/prototype-review-dropdown-menu-item.tsx

@@ -0,0 +1 @@
+export { ReviewDropdownMenuItem as PrototypeReviewDropdownMenuItem } from "@prototype/components/platform-ui/review-dropdown-menu";

package/src/components/prototypes/prototype-review-dropdown-menu-separator.tsx

@@ -0,0 +1 @@
+export { ReviewDropdownMenuSeparator as PrototypeReviewDropdownMenuSeparator } from "@prototype/components/platform-ui/review-dropdown-menu";

package/src/components/prototypes/prototype-review-panel-menu-item.tsx

@@ -0,0 +1 @@
+export { PanelMenuItem as PrototypeReviewPanelMenuItem } from "@prototype/components/platform-ui/panel-select";

package/src/components/prototypes/prototype-review-panel-menu-separator.tsx

@@ -0,0 +1 @@
+export { PanelMenuSeparator as PrototypeReviewPanelMenuSeparator } from "@prototype/components/platform-ui/panel-select";

package/src/components/prototypes/prototype-review-panel-select.tsx

@@ -0,0 +1,4 @@
+export {
+  PanelSelect as PrototypeReviewPanelSelect,
+  usePanelSelectClose as usePrototypeReviewPanelSelectClose,
+} from "@prototype/components/platform-ui/panel-select";

package/src/components/prototypes/prototype-review-sidebar.tsx

@@ -0,0 +1,167 @@
+"use client";
+
+import { filterAnnotationsByChannel } from "@prototype/lib/prototype-comments/core/annotation-channel";
+import { countUnresolvedAnnotations } from "@prototype/lib/prototype-comments/core/annotation-status";
+import { getRootAnnotations } from "@prototype/lib/prototype-comments/core/comment-threads";
+import { useCommentStore } from "@prototype/lib/prototype-comments/react/CommentProvider";
+import { CommentHeaderCount } from "@prototype/lib/prototype-comments/ui/CommentHeaderCount";
+import { CommentsGrid } from "@prototype/lib/prototype-comments/ui/CommentsGrid";
+import { usePrototypeReview } from "@prototype/lib/prototypes/prototype-review-context";
+import {
+  SIDEBAR_ICON_BUTTON_CLASS,
+  Sidebar,
+} from "@prototype/components/platform-ui/sidebar";
+import { IconButton } from "@prototype/components/platform-ui/icon-button";
+import { cn } from "@prototype/lib/utils";
+import { EmptyState } from "@prototype/components/platform-ui/empty-state";
+import { PrototypeChangeLogPanel } from "@prototype/components/prototypes/prototype-change-log-panel";
+import { miniPillTextFromLabel } from "@prototype/components/prototypes/mini-pill-label";
+import { MessageSquarePlus } from "lucide-react";
+import { useMemo } from "react";
+
+type PrototypeReviewSidebarProps = {
+  onSelect: (id: string) => void;
+  selectedId?: string | null;
+  onClose: () => void;
+  isCommentModeActive?: boolean;
+  onToggleCommentMode?: () => void;
+};
+
+export function PrototypeReviewSidebar({
+  onSelect,
+  selectedId,
+  onClose,
+  isCommentModeActive = false,
+  onToggleCommentMode,
+}: PrototypeReviewSidebarProps) {
+  const review = usePrototypeReview();
+  const { annotations, deleteAnnotation, updateAnnotation, resolveAnnotation, storageError, storageReady } = useCommentStore();
+  const isVariantsPanel = review.sidebarPanel === "variants";
+  const isChangeLogPanel = review.sidebarPanel === "change-log";
+  const isSpecPanel = review.sidebarPanel === "spec";
+
+  const activeVariantLabel = useMemo(() => {
+    if (!review.activeVariantSetId) return "Variants";
+    const label = review.variantSets.find(
+      (set) => set.id === review.activeVariantSetId,
+    )?.label;
+    return label ? miniPillTextFromLabel(label) : "Variants";
+  }, [review.activeVariantSetId, review.variantSets]);
+
+  const variantsContent = useMemo(() => {
+    if (!isVariantsPanel) return null;
+    if (review.activeVariantSetId) {
+      return review.getVariantSidebarContent(review.activeVariantSetId);
+    }
+    return review.getLegacyVariantSidebarContent();
+  }, [
+    isVariantsPanel,
+    review.activeVariantSetId,
+    review.variantSidebarRevision,
+    review.getVariantSidebarContent,
+    review.getLegacyVariantSidebarContent,
+  ]);
+
+  const commentAnnotations = useMemo(
+    () => filterAnnotationsByChannel(annotations, "comment"),
+    [annotations],
+  );
+  const unresolvedCount = countUnresolvedAnnotations(commentAnnotations);
+  const totalCount = getRootAnnotations(commentAnnotations).length;
+
+  const specContent = isSpecPanel ? review.specContentRef.current : null;
+
+  const isCommentsPanel =
+    !isVariantsPanel && !isChangeLogPanel && !isSpecPanel;
+
+  const sidebarText = isVariantsPanel
+    ? activeVariantLabel
+    : isChangeLogPanel
+      ? "Overview"
+      : isSpecPanel
+        ? "PRs"
+        : "Comments";
+
+  return (
+    <Sidebar
+      open={review.open}
+      text={sidebarText}
+      titleAddon={
+        isCommentsPanel ? (
+          <CommentHeaderCount
+            unresolved={unresolvedCount}
+            total={totalCount}
+          />
+        ) : undefined
+      }
+      headerActions={
+        isCommentsPanel && onToggleCommentMode ? (
+          <IconButton
+            type="button"
+            onClick={onToggleCommentMode}
+            onMouseDown={(event) => event.preventDefault()}
+            aria-label={
+              isCommentModeActive ? "Exit comment mode" : "Add comment"
+            }
+            aria-pressed={isCommentModeActive}
+            className={cn(
+              SIDEBAR_ICON_BUTTON_CLASS,
+              isCommentModeActive && "bg-accent text-accent-foreground",
+            )}
+          >
+            <MessageSquarePlus size={16} strokeWidth={2} />
+          </IconButton>
+        ) : undefined
+      }
+      onClose={
+        isVariantsPanel
+          ? review.closeVariants
+          : isSpecPanel
+            ? review.closeSidebar
+            : isChangeLogPanel
+              ? review.closeSidebar
+              : onClose
+      }
+      ariaLabel={
+        isVariantsPanel
+          ? "Variants panel"
+          : isChangeLogPanel
+            ? "Overview panel"
+            : isSpecPanel
+              ? "PRs panel"
+              : "Review panel"
+      }
+      dataAttribute="data-prototype-review-sidebar"
+      widthCssVar="--comments-sidebar-width"
+    >
+      {isSpecPanel ? (
+        specContent ?? (
+          <EmptyState>
+            No PRs configured yet. Add a PR split spec on this prototype to
+            see implementation cards here.
+          </EmptyState>
+        )
+      ) : isVariantsPanel ? (
+        variantsContent ?? (
+          <EmptyState>No variant overview available.</EmptyState>
+        )
+      ) : isChangeLogPanel ? (
+        <PrototypeChangeLogPanel onSelect={onSelect} selectedId={selectedId} />
+      ) : !storageReady ? (
+        <EmptyState>Loading comments…</EmptyState>
+      ) : storageError ? (
+        <EmptyState>{storageError}</EmptyState>
+      ) : (
+        <CommentsGrid
+          annotations={commentAnnotations}
+          layout="sidebar"
+          onSelect={onSelect}
+          onDelete={deleteAnnotation}
+          onUpdateComment={updateAnnotation}
+          onResolve={resolveAnnotation}
+          selectedId={selectedId}
+        />
+      )}
+    </Sidebar>
+  );
+}

package/src/components/prototypes/prototype-share-link-restore.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { usePrototypeCommentRegistry } from "@prototype/lib/prototypes/prototype-comment-registry";
+import { usePrototypeReviewOptional } from "@prototype/lib/prototypes/prototype-review-context";
+import {
+  clearShareComponentParams,
+  readShareLinkParams,
+  scrollPrototypeTargetIntoView,
+} from "@prototype/lib/prototypes/prototype-share-link";
+import { useEffect, useRef } from "react";
+
+const HANDLER_RETRY_MS = 50;
+const HANDLER_RETRY_LIMIT = 40;
+
+export function PrototypeShareLinkRestore() {
+  const { readHandlers } = usePrototypeCommentRegistry();
+  const review = usePrototypeReviewOptional();
+  const restoredRef = useRef(false);
+
+  useEffect(() => {
+    if (restoredRef.current || !review) return;
+
+    const shareParams = readShareLinkParams(
+      new URLSearchParams(window.location.search),
+    );
+    if (!shareParams) return;
+
+    let attempts = 0;
+
+    const completeRestore = () => {
+      restoredRef.current = true;
+
+      const targetId = shareParams.targetId;
+
+      window.requestAnimationFrame(() => {
+        window.requestAnimationFrame(() => {
+          scrollPrototypeTargetIntoView(targetId);
+          review.focusShareTarget(targetId);
+
+          const url = new URL(window.location.href);
+          clearShareComponentParams(url);
+          window.history.replaceState(null, "", url);
+        });
+      });
+    };
+
+    const tryRestore = () => {
+      if (restoredRef.current) return;
+
+      const handlers = readHandlers();
+      const needsStateRestore = shareParams.state != null;
+
+      if (needsStateRestore && !handlers?.onRestore) {
+        if (attempts >= HANDLER_RETRY_LIMIT) {
+          completeRestore();
+          return;
+        }
+
+        attempts += 1;
+        window.setTimeout(tryRestore, HANDLER_RETRY_MS);
+        return;
+      }
+
+      if (needsStateRestore && handlers?.onRestore) {
+        handlers.onRestore(shareParams.state);
+      }
+
+      completeRestore();
+    };
+
+    tryRestore();
+  }, [readHandlers, review]);
+
+  return null;
+}

package/src/components/prototypes/prototype-share-mode.tsx

@@ -0,0 +1,206 @@
+"use client";
+
+import {
+  getPrototypeTargetElement,
+  getPrototypeTargetIdFromElement,
+} from "@prototype/components/prototypes/prototype-target";
+import { buildCommentCaptureCursorStyles, isCommentCaptureBlockedTarget } from "@prototype/lib/prototype-comments/core/comment-capture-blocked";
+import { deepElementFromPoint } from "@prototype/lib/prototype-comments/core/annotation-target";
+import { injectCaptureColorTokens } from "@prototype/lib/prototype-comments/core/capture-theme";
+import { useCommentCaptureBridgeOptional } from "@prototype/lib/prototype-comments/react/CommentCaptureToolbar";
+import styles from "@prototype/lib/prototype-comments/ui/capture-styles.module.scss";
+import { usePrototypeCommentRegistry } from "@prototype/lib/prototypes/prototype-comment-registry";
+import { usePrototypeReview } from "@prototype/lib/prototypes/prototype-review-context";
+import { usePrototypeToolTheme } from "@prototype/lib/prototypes/use-prototype-tool-theme";
+import { buildComponentShareLink } from "@prototype/lib/prototypes/prototype-share-link";
+import { cn } from "@prototype/lib/utils";
+import { X } from "lucide-react";
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { toast } from "sonner";
+
+const SHARE_BORDER =
+  "color-mix(in srgb, var(--prototype-comment-color-blue) 60%, transparent)";
+const SHARE_FILL =
+  "color-mix(in srgb, var(--prototype-comment-color-blue) 5%, transparent)";
+
+export function PrototypeShareMode() {
+  const review = usePrototypeReview();
+  const { commentTheme } = usePrototypeToolTheme();
+  const bridge = useCommentCaptureBridgeOptional();
+  const { readHandlers } = usePrototypeCommentRegistry();
+  const [mounted, setMounted] = useState(false);
+  const [hoverRect, setHoverRect] = useState<DOMRect | null>(null);
+  const [hoverLabel, setHoverLabel] = useState<string | null>(null);
+
+  useEffect(() => {
+    setMounted(true);
+    injectCaptureColorTokens();
+  }, []);
+
+  useEffect(() => {
+    if (!review.shareModeActive) return;
+    if (bridge?.isCommentModeActive) {
+      bridge.onEnterCommentMode();
+    }
+  }, [bridge, review.shareModeActive]);
+
+  useEffect(() => {
+    if (bridge?.isCommentModeActive && review.shareModeActive) {
+      review.exitShareMode();
+    }
+  }, [bridge, review]);
+
+  useEffect(() => {
+    if (!review.shareModeActive) {
+      setHoverRect(null);
+      setHoverLabel(null);
+      return;
+    }
+
+    const handleMouseMove = (event: MouseEvent) => {
+      const target = (event.composedPath()[0] || event.target) as HTMLElement;
+      if (isCommentCaptureBlockedTarget(target)) {
+        setHoverRect(null);
+        setHoverLabel(null);
+        return;
+      }
+
+      const elementUnder = deepElementFromPoint(event.clientX, event.clientY);
+      if (!elementUnder || isCommentCaptureBlockedTarget(elementUnder)) {
+        setHoverRect(null);
+        setHoverLabel(null);
+        return;
+      }
+
+      const anchor = getPrototypeTargetElement(elementUnder);
+      if (!anchor) {
+        setHoverRect(null);
+        setHoverLabel(null);
+        return;
+      }
+
+      setHoverRect(anchor.getBoundingClientRect());
+      setHoverLabel(anchor.getAttribute("data-element"));
+    };
+
+    document.addEventListener("mousemove", handleMouseMove);
+    return () => document.removeEventListener("mousemove", handleMouseMove);
+  }, [review.shareModeActive]);
+
+  useEffect(() => {
+    if (!review.shareModeActive) return;
+
+    const handleClick = (event: MouseEvent) => {
+      const target = (event.composedPath()[0] || event.target) as HTMLElement;
+      if (isCommentCaptureBlockedTarget(target)) return;
+
+      const elementUnder = deepElementFromPoint(event.clientX, event.clientY);
+      if (!elementUnder || isCommentCaptureBlockedTarget(elementUnder)) return;
+
+      const anchor = getPrototypeTargetElement(elementUnder);
+      const targetId = getPrototypeTargetIdFromElement(elementUnder);
+      if (!anchor || !targetId) {
+        toast.error("Select a prototype component to share");
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      const handlers = readHandlers();
+      const liveState = handlers?.getLiveState() ?? {};
+      const shareLink = buildComponentShareLink(targetId, liveState, {
+        commentId: bridge?.selectedId,
+      });
+
+      void navigator.clipboard
+        .writeText(shareLink)
+        .then(() => {
+          toast.success("Component link copied", {
+            description: "Paste the link to share this view.",
+            duration: 3000,
+          });
+          review.exitShareMode();
+        })
+        .catch(() => {
+          toast.error("Could not copy to clipboard");
+        });
+    };
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        review.exitShareMode();
+      }
+    };
+
+    document.addEventListener("click", handleClick, true);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("click", handleClick, true);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [readHandlers, review]);
+
+  useEffect(() => {
+    if (!review.shareModeActive) return;
+
+    const style = document.createElement("style");
+    style.id = "prototype-share-mode-cursor";
+    style.textContent = buildCommentCaptureCursorStyles();
+    document.head.appendChild(style);
+
+    return () => {
+      style.remove();
+    };
+  }, [review.shareModeActive]);
+
+  if (!mounted || !review.shareModeActive) return null;
+
+  return createPortal(
+    <>
+      <div
+        data-prototype-comment-theme={commentTheme}
+        data-prototype-comment-accent="blue"
+        data-prototype-comment-root=""
+        data-prototype-share-overlay=""
+        className={styles.targetHighlightLayer}
+      >
+        {hoverRect ? (
+          <div
+            aria-hidden
+            className={cn(styles.singleSelectOutline, styles.enter)}
+            style={{
+              left: hoverRect.left,
+              top: hoverRect.top,
+              width: hoverRect.width,
+              height: hoverRect.height,
+              borderColor: SHARE_BORDER,
+              backgroundColor: SHARE_FILL,
+            }}
+          />
+        ) : null}
+      </div>
+
+      <div
+        data-prototype-share-hint
+        className="pointer-events-auto fixed bottom-20 left-1/2 z-[1051] flex -translate-x-1/2 items-center gap-2 rounded-lg bg-card px-3 py-2 shadow-md ring-[0.5px] ring-border"
+      >
+        <span className="text-xs text-foreground">
+          {hoverLabel
+            ? `Click to copy link to ${hoverLabel}`
+            : "Click a component to copy its link"}
+        </span>
+        <button
+          type="button"
+          aria-label="Exit share mode"
+          className="text-muted-foreground hover:text-foreground rounded p-1 transition-colors duration-200 ease"
+          onClick={review.exitShareMode}
+        >
+          <X size={14} />
+        </button>
+      </div>
+    </>,
+    document.body,
+  );
+}