proto-plugin 0.1.0

package/src/components/platform-ui/panel.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { cn } from "@prototype/lib/utils";
+import { ChevronDown } from "lucide-react";
+import type { ReactNode } from "react";
+
+type PanelProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export function Panel({ children, className }: PanelProps) {
+  return (
+    <div className={cn("flex flex-col gap-0", className)}>{children}</div>
+  );
+}
+
+type PanelSectionProps = {
+  title: ReactNode;
+  expanded: boolean;
+  onExpandedChange: (expanded: boolean) => void;
+  children: ReactNode;
+  className?: string;
+  headerClassName?: string;
+};
+
+export function PanelSection({
+  title,
+  expanded,
+  onExpandedChange,
+  children,
+  className,
+  headerClassName,
+}: PanelSectionProps) {
+  return (
+    <section className={cn("border-t border-border", className)}>
+      <button
+        type="button"
+        className={cn(
+          "flex w-full items-center justify-between gap-2 px-3 py-2.5 text-left text-xs font-medium uppercase tracking-wide text-foreground transition-colors duration-200 ease hover:text-foreground",
+          headerClassName,
+        )}
+        aria-expanded={expanded}
+        onClick={() => onExpandedChange(!expanded)}
+      >
+        {title}
+        <ChevronDown
+          className={cn(
+            "tool-panel-section-chevron size-4 shrink-0 text-muted-foreground",
+            expanded && "is-expanded",
+          )}
+          aria-hidden
+        />
+      </button>
+      <div
+        className={cn("tool-panel-section-content", expanded && "is-expanded")}
+      >
+        <div className="overflow-hidden">
+          <PanelBody>{children}</PanelBody>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export function PanelBody({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn("px-3 pb-3 text-sm text-muted-foreground", className)}>
+      {children}
+    </div>
+  );
+}
+
+export function PanelHeader({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "text-lg font-semibold tracking-tight text-foreground",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

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

@@ -0,0 +1,35 @@
+"use client";
+
+import { DropdownMenuItem } from "@prototype/components/ui/dropdown-menu";
+import { Separator } from "@prototype/components/ui/separator";
+import { cn } from "@prototype/lib/utils";
+import type { ComponentProps, ReactNode } from "react";
+
+type ReviewDropdownMenuItemProps = ComponentProps<typeof DropdownMenuItem> & {
+  selected?: boolean;
+  children: ReactNode;
+};
+
+export function ReviewDropdownMenuItem({
+  selected = false,
+  className,
+  children,
+  ...props
+}: ReviewDropdownMenuItemProps) {
+  return (
+    <DropdownMenuItem
+      className={cn(selected && "bg-accent", className)}
+      {...props}
+    >
+      {children}
+    </DropdownMenuItem>
+  );
+}
+
+export function ReviewDropdownMenuSeparator({
+  className,
+}: {
+  className?: string;
+}) {
+  return <Separator className={cn("my-1", className)} />;
+}

package/src/components/platform-ui/sidebar.tsx

@@ -0,0 +1,293 @@
+"use client";
+
+import { cn } from "@prototype/lib/utils";
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type PointerEvent as ReactPointerEvent,
+  type ReactNode,
+} from "react";
+
+import { IconButton } from "./icon-button";
+
+export const DEFAULT_SIDEBAR_WIDTH = 400;
+export const MIN_SIDEBAR_WIDTH = 280;
+export const MAX_SIDEBAR_WIDTH = 720;
+
+export function clampSidebarWidth(width: number) {
+  return Math.min(MAX_SIDEBAR_WIDTH, Math.max(MIN_SIDEBAR_WIDTH, width));
+}
+
+const SIDEBAR_TITLE_CLASS =
+  "font-display truncate text-sm font-semibold text-[var(--tool-chrome-icon-hover)]";
+
+export const SIDEBAR_ICON_BUTTON_CLASS =
+  "text-[var(--tool-chrome-icon)] hover:bg-[var(--tool-chrome-gray-highlight)] hover:text-[var(--tool-chrome-icon-hover)] focus:outline-none focus-visible:ring-0 focus-visible:ring-offset-0";
+
+type SidebarProps = {
+  open: boolean;
+  text: string;
+  onClose: () => void;
+  children: ReactNode;
+  titleAddon?: ReactNode;
+  headerActions?: ReactNode;
+  ariaLabel?: string;
+  dataAttribute?: string;
+  widthCssVar?: string;
+  className?: string;
+  /**
+   * When true, the panel floats over page content instead of reserving inline
+   * layout width. It is taken out of flow (clipped, transform slide-in) so
+   * opening/closing it never reflows or squishes the parent. Use this for
+   * selector-style panels that should overlay, not push, the page.
+   */
+  overlay?: boolean;
+};
+
+export function Sidebar({
+  open,
+  text,
+  onClose,
+  children,
+  titleAddon,
+  headerActions,
+  ariaLabel = "Sidebar",
+  dataAttribute = "data-platform-sidebar",
+  widthCssVar = "--platform-sidebar-width",
+  className,
+  overlay = false,
+}: SidebarProps) {
+  const [sidebarWidth, setSidebarWidth] = useState(DEFAULT_SIDEBAR_WIDTH);
+  const [isResizing, setIsResizing] = useState(false);
+  const resizeStartRef = useRef<{ startX: number; startWidth: number } | null>(
+    null,
+  );
+
+  const applySidebarWidth = useCallback(
+    (width: number) => {
+      const clampedWidth = clampSidebarWidth(width);
+      setSidebarWidth((current) =>
+        current === clampedWidth ? current : clampedWidth,
+      );
+      document.documentElement.style.setProperty(
+        widthCssVar,
+        `${clampedWidth}px`,
+      );
+    },
+    [widthCssVar],
+  );
+
+  useEffect(() => {
+    document.documentElement.setAttribute("data-platform-sidebar-inline", "");
+    document.documentElement.style.setProperty(
+      widthCssVar,
+      `${DEFAULT_SIDEBAR_WIDTH}px`,
+    );
+
+    return () => {
+      document.documentElement.style.removeProperty(widthCssVar);
+      document.documentElement.removeAttribute("data-platform-sidebar-open");
+      document.documentElement.removeAttribute("data-platform-sidebar-resizing");
+      document.documentElement.removeAttribute("data-platform-sidebar-inline");
+    };
+  }, [widthCssVar]);
+
+  useEffect(() => {
+    document.documentElement.toggleAttribute("data-platform-sidebar-open", open);
+  }, [open]);
+
+  useEffect(() => {
+    document.documentElement.toggleAttribute(
+      "data-platform-sidebar-resizing",
+      isResizing,
+    );
+  }, [isResizing]);
+
+  const handleResizeStart = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      if (!open) return;
+      event.preventDefault();
+      resizeStartRef.current = {
+        startX: event.clientX,
+        startWidth: sidebarWidth,
+      };
+      setIsResizing(true);
+      event.currentTarget.setPointerCapture(event.pointerId);
+    },
+    [open, sidebarWidth],
+  );
+
+  const handleResizeMove = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      if (!resizeStartRef.current) return;
+      const { startX, startWidth } = resizeStartRef.current;
+      applySidebarWidth(startWidth + (startX - event.clientX));
+    },
+    [applySidebarWidth],
+  );
+
+  const handleResizeEnd = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      if (!resizeStartRef.current) return;
+      resizeStartRef.current = null;
+      setIsResizing(false);
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    },
+    [],
+  );
+
+  const aside = (
+    <aside
+      {...{ [dataAttribute]: "" }}
+      aria-hidden={!open}
+      aria-label={ariaLabel}
+      style={
+        overlay
+          ? {
+              width: sidebarWidth,
+              transform: open ? "translateX(0)" : "translateX(100%)",
+            }
+          : { width: open ? sidebarWidth : 0 }
+      }
+      className={cn(
+        "flex h-full shrink-0 flex-col overflow-hidden bg-[var(--tool-chrome-ground)] text-[var(--tool-chrome-icon)]",
+        isResizing && "select-none transition-none",
+        overlay
+          ? "absolute inset-y-0 right-0 shadow-2xl transition-transform duration-200 ease-out"
+          : "relative transition-[width] duration-200 ease-out",
+        overlay && (open ? "pointer-events-auto" : "pointer-events-none"),
+        className,
+      )}
+    >
+      {open ? (
+        <SidebarResizeHandle
+          open={open}
+          sidebarWidth={sidebarWidth}
+          isResizing={isResizing}
+          onResizeStart={handleResizeStart}
+          onResizeMove={handleResizeMove}
+          onResizeEnd={handleResizeEnd}
+        />
+      ) : null}
+      {open ? (
+        <SidebarHeader
+          text={text}
+          titleAddon={titleAddon}
+          actions={
+            <>
+              {headerActions}
+              <IconButton
+                type="button"
+                onClick={onClose}
+                aria-label="Close sidebar"
+                className={SIDEBAR_ICON_BUTTON_CLASS}
+              >
+                <CloseIcon />
+              </IconButton>
+            </>
+          }
+        />
+      ) : null}
+      {open ? (
+        <SidebarContent>
+          <div className="px-4 pt-4">{children}</div>
+        </SidebarContent>
+      ) : null}
+    </aside>
+  );
+
+  if (!overlay) return aside;
+
+  // Clip layer: full-viewport, click-through, hides the panel off the right
+  // edge while it is closed so it never produces horizontal overflow. Sits
+  // below the floating review pill (z-index 1050) so its variant switcher
+  // stays usable while the panel is open.
+  return (
+    <div
+      aria-hidden={!open}
+      className="pointer-events-none fixed inset-0 z-40 overflow-hidden"
+    >
+      {aside}
+    </div>
+  );
+}
+
+type SidebarResizeHandleProps = {
+  open: boolean;
+  sidebarWidth: number;
+  isResizing: boolean;
+  onResizeStart: (event: ReactPointerEvent<HTMLDivElement>) => void;
+  onResizeMove: (event: ReactPointerEvent<HTMLDivElement>) => void;
+  onResizeEnd: (event: ReactPointerEvent<HTMLDivElement>) => void;
+};
+
+export function SidebarResizeHandle({
+  open,
+  sidebarWidth,
+  onResizeStart,
+  onResizeMove,
+  onResizeEnd,
+}: SidebarResizeHandleProps) {
+  return (
+    <div
+      className="absolute top-0 left-[-4px] z-[1] h-full w-2 cursor-col-resize touch-none before:absolute before:top-0 before:left-[3px] before:h-full before:w-0.5 before:bg-transparent before:transition-colors hover:before:bg-border [[data-platform-sidebar-resizing]_&]:before:bg-border"
+      onPointerDown={onResizeStart}
+      onPointerMove={onResizeMove}
+      onPointerUp={onResizeEnd}
+      onPointerCancel={onResizeEnd}
+      role="separator"
+      aria-orientation="vertical"
+      aria-label="Resize sidebar"
+      aria-valuemin={MIN_SIDEBAR_WIDTH}
+      aria-valuemax={MAX_SIDEBAR_WIDTH}
+      aria-valuenow={open ? sidebarWidth : MIN_SIDEBAR_WIDTH}
+    />
+  );
+}
+
+export function SidebarHeader({
+  text,
+  titleAddon,
+  actions,
+}: {
+  text: string;
+  titleAddon?: ReactNode;
+  actions?: ReactNode;
+}) {
+  return (
+    <div className="flex h-[3.25rem] max-h-[3.25rem] min-h-[3.25rem] shrink-0 items-center justify-between gap-3 border-b border-[var(--tool-chrome-border)] px-4">
+      <div className="flex min-w-0 flex-1 items-baseline gap-0">
+        <span className={cn(SIDEBAR_TITLE_CLASS, "truncate")}>{text}</span>
+        {titleAddon}
+      </div>
+      {actions ? (
+        <div className="flex shrink-0 items-center gap-1">{actions}</div>
+      ) : null}
+    </div>
+  );
+}
+
+export function SidebarContent({ children }: { children: ReactNode }) {
+  return (
+    <div className="min-h-0 flex-1 overflow-y-auto pb-4">{children}</div>
+  );
+}
+
+function CloseIcon() {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      aria-hidden
+    >
+      <path d="M6 6l12 12M18 6L6 18" />
+    </svg>
+  );
+}

package/src/components/platform-ui/toolbar-icon-button.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { IconButton } from "@prototype/components/platform-ui/icon-button";
+import { cn } from "@prototype/lib/utils";
+import type { ComponentProps, ReactNode } from "react";
+
+type ToolbarIconButtonProps = ComponentProps<typeof IconButton> & {
+  children: ReactNode;
+  wrapperClassName?: string;
+};
+
+/** Sidebar / panel icon control — shadcn ghost button. */
+export function ToolbarIconButton({
+  className,
+  wrapperClassName,
+  children,
+  ...props
+}: ToolbarIconButtonProps) {
+  return (
+    <div className={cn("inline-flex shrink-0", wrapperClassName)}>
+      <IconButton
+        variant="ghost"
+        size="icon"
+        className={cn(
+          "size-8 text-[var(--tool-chrome-icon)] hover:bg-[var(--tool-chrome-gray-highlight)] hover:text-[var(--tool-chrome-icon-hover)]",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </IconButton>
+    </div>
+  );
+}

package/src/components/platform-ui/toolbar.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { cn } from "@prototype/lib/utils";
+import type { ReactNode } from "react";
+
+export function Toolbar({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "inline-flex items-center gap-1 rounded-full border border-border bg-card p-1 shadow-sm",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function ToolbarGroup({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn("flex items-center gap-0.5", className)}>{children}</div>
+  );
+}
+
+export { IconButton as ToolbarButton } from "./icon-button";

package/src/components/prototype-gallery-client.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+
+import type { PrototypeMetadata } from "@prototype/lib/prototypes/prototype-config-types";
+import { screenshotSrc } from "@prototype/lib/prototypes/screenshot-src";
+import { cn } from "@prototype/lib/utils";
+
+type PrototypeGalleryClientProps = {
+  prototypes: PrototypeMetadata[];
+  screenshotVersions: Record<string, number>;
+};
+
+export function PrototypeGalleryClient({
+  prototypes,
+  screenshotVersions,
+}: PrototypeGalleryClientProps) {
+  return (
+    <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+      {prototypes.map((prototype) => (
+        <Link
+          key={prototype.slug}
+          href={`/prototypes/${prototype.slug}`}
+          className="group"
+        >
+          <div
+            className={cn(
+              "rounded-xl",
+              "shadow-[0_1px_3px_0_rgb(0_0_0/0.06)]",
+              "translate-y-0 transition-[translate,box-shadow] duration-300 ease-out will-change-[translate]",
+              "group-hover:-translate-y-1 group-hover:shadow-[0_4px_12px_-4px_rgb(0_0_0/0.10)]",
+            )}
+          >
+            <div className="border-border bg-background relative aspect-video overflow-hidden rounded-xl border">
+              <Image
+                src={screenshotSrc(
+                  prototype.screenshot,
+                  screenshotVersions[prototype.slug],
+                )}
+                alt={prototype.title}
+                width={1600}
+                height={900}
+                quality={90}
+                sizes="(min-width: 1024px) 33vw, (min-width: 768px) 50vw, 100vw"
+                className="h-full w-full object-cover object-top"
+              />
+            </div>
+          </div>
+          <p className="text-sm text-muted-foreground group-hover:text-foreground mt-2 transition-colors duration-300 ease-out">
+            {prototype.title}
+          </p>
+        </Link>
+      ))}
+    </div>
+  );
+}

package/src/components/prototype-provider.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { PrototypeToolThemeProvider } from "@prototype/lib/prototypes/use-prototype-tool-theme";
+import type { ReactNode } from "react";
+
+type PrototypeProviderProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export function PrototypeProvider({
+  children,
+  className,
+}: PrototypeProviderProps) {
+  return (
+    <PrototypeToolThemeProvider className={className}>
+      {children}
+    </PrototypeToolThemeProvider>
+  );
+}

package/src/components/prototypes/mini-pill-label.tsx

@@ -0,0 +1,37 @@
+import pillStyles from "@prototype/components/prototypes/prototype-floating-pill.module.scss";
+
+type MiniPillLabelProps = {
+  label: string;
+};
+
+/** Text after a leading symbol/emoji token in legacy "↕️ Label" mini pill copy. */
+export function miniPillTextFromLabel(label: string): string {
+  const spaceIndex = label.indexOf(" ");
+  if (spaceIndex <= 0) return label;
+
+  const prefix = label.slice(0, spaceIndex);
+  if (!/[\p{L}\p{N}]/u.test(prefix)) {
+    return label.slice(spaceIndex + 1);
+  }
+
+  return label;
+}
+
+/** Renders "emoji Label" mini pill copy with spacing between icon and text. */
+export function MiniPillLabel({ label }: MiniPillLabelProps) {
+  const spaceIndex = label.indexOf(" ");
+  if (spaceIndex <= 0) {
+    return <>{label}</>;
+  }
+
+  return (
+    <>
+      <span className={pillStyles.miniPillEmoji} aria-hidden>
+        {label.slice(0, spaceIndex)}
+      </span>
+      <span className={pillStyles.miniPillText}>
+        {miniPillTextFromLabel(label)}
+      </span>
+    </>
+  );
+}