proto-plugin 0.1.0

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

@@ -0,0 +1,71 @@
+"use client";
+
+import { cn } from "@prototype/lib/utils";
+import { Check } from "lucide-react";
+import type { ReactNode } from "react";
+
+/** Flat option list for the review toolbar controls panel (no nested dropdown). */
+export function ControlsPanelOptionGroup({
+  title,
+  children,
+  className,
+}: {
+  title?: string;
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn("flex flex-col gap-0.5", className)}>
+      {title ? (
+        <p className="px-2.5 pb-0.5 text-[11px] font-medium tracking-wide text-black/45 uppercase">
+          {title}
+        </p>
+      ) : null}
+      {children}
+    </div>
+  );
+}
+
+type ControlsPanelOptionProps = {
+  children: ReactNode;
+  selected?: boolean;
+  onSelect?: () => void;
+  className?: string;
+};
+
+export function ControlsPanelOption({
+  children,
+  selected = false,
+  onSelect,
+  className,
+}: ControlsPanelOptionProps) {
+  return (
+    <button
+      type="button"
+      className={cn(
+        "flex w-full cursor-pointer items-center justify-between gap-2 rounded-md px-2.5 py-1.5 text-left text-sm text-black/88 outline-none transition-colors duration-200 ease hover:bg-black/[0.06] hover:text-black/92 focus-visible:ring-2 focus-visible:ring-black/20",
+        selected && "bg-black/[0.08] font-medium text-black/92",
+        className,
+      )}
+      onClick={(event) => {
+        event.stopPropagation();
+        onSelect?.();
+      }}
+      onPointerDown={(event) => event.stopPropagation()}
+    >
+      <span className="min-w-0 flex-1 truncate">{children}</span>
+      {selected ? (
+        <Check className="size-3.5 shrink-0 text-black/55" strokeWidth={2.5} aria-hidden />
+      ) : null}
+    </button>
+  );
+}
+
+export function ControlsPanelOptionSeparator({ className }: { className?: string }) {
+  return (
+    <div
+      role="separator"
+      className={cn("my-1 h-px bg-black/10", className)}
+    />
+  );
+}

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

@@ -0,0 +1,438 @@
+"use client";
+
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown } from "lucide-react";
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type PointerEvent as ReactPointerEvent,
+} from "react";
+
+import pillStyles from "@prototype/components/prototypes/prototype-floating-pill.module.scss";
+import { MiniPillLabel } from "@prototype/components/prototypes/mini-pill-label";
+import { usePrototypeReviewOptional } from "@prototype/lib/prototypes/prototype-review-context";
+import { usePrototypeToolTheme } from "@prototype/lib/prototypes/use-prototype-tool-theme";
+import {
+  DropdownMenuItem,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+} from "@prototype/components/ui/dropdown-menu";
+import { cn } from "@prototype/lib/utils";
+
+import { ControlsPanelOptionSeparator } from "./controls-panel-options";
+
+export type ControlsPanelSelectOption<T extends string = string> = {
+  value: T;
+  label: string;
+};
+
+export type ControlsPanelSelectSeparator = {
+  type: "separator";
+};
+
+export type ControlsPanelSelectSubmenuOption = {
+  value: string;
+  label: string;
+};
+
+export type ControlsPanelSelectSubmenu<T extends string = string> = {
+  type: "submenu";
+  value: T;
+  label: string;
+  options: ControlsPanelSelectSubmenuOption[];
+};
+
+export type ControlsPanelSelectEntry<T extends string = string> =
+  | ControlsPanelSelectOption<T>
+  | ControlsPanelSelectSeparator
+  | ControlsPanelSelectSubmenu<T>;
+
+function isControlsPanelSelectSeparator<T extends string>(
+  entry: ControlsPanelSelectEntry<T>,
+): entry is ControlsPanelSelectSeparator {
+  return "type" in entry && entry.type === "separator";
+}
+
+function isControlsPanelSelectSubmenu<T extends string>(
+  entry: ControlsPanelSelectEntry<T>,
+): entry is ControlsPanelSelectSubmenu<T> {
+  return "type" in entry && entry.type === "submenu";
+}
+
+function getSelectableOptions<T extends string>(
+  entries: ControlsPanelSelectEntry<T>[],
+): ControlsPanelSelectOption<T>[] {
+  return entries.flatMap((entry) => {
+    if (isControlsPanelSelectSeparator(entry)) return [];
+    if (isControlsPanelSelectSubmenu(entry)) {
+      return [{ value: entry.value, label: entry.label }];
+    }
+    return [entry];
+  });
+}
+
+type ControlsPanelSelectProps<T extends string = string> = {
+  value: T;
+  onValueChange: (value: T) => void;
+  options: ControlsPanelSelectEntry<T>[];
+  className?: string;
+  /** Renders as a half-height pill for the review chrome control row. */
+  appearance?: "panel" | "miniPill" | "menuList";
+  /** Overrides the mini pill trigger label (dropdown options are unchanged). */
+  miniPillLabel?: string;
+  /** Active nested option when the current value matches a submenu entry. */
+  submenuValue?: string;
+  onSubmenuValueChange?: (submenuValue: string) => void;
+};
+
+/**
+ * Marks the portaled select surface so the surrounding review controls menu
+ * can keep itself open while the user interacts with this select.
+ */
+export const CONTROLS_PANEL_SELECT_CONTENT_ATTR =
+  "data-controls-panel-select-content";
+
+/**
+ * Select for the review controls panel, built on Radix Select. The option
+ * list is portaled to document.body and positioned over page content, so opening
+ * it overlays rather than reflowing the surrounding menu.
+ */
+export function ControlsPanelSelect<T extends string>({
+  value,
+  onValueChange,
+  options,
+  className,
+  appearance = "panel",
+  miniPillLabel,
+  submenuValue,
+  onSubmenuValueChange,
+}: ControlsPanelSelectProps<T>) {
+  const selectableOptions = getSelectableOptions(options);
+  const activeLabel =
+    selectableOptions.find((option) => option.value === value)?.label ?? "Select";
+  const isMiniPill = appearance === "miniPill";
+  const isMenuList = appearance === "menuList";
+  const review = usePrototypeReviewOptional();
+  const { commentTheme } = usePrototypeToolTheme();
+  const triggerLabel = isMiniPill ? (miniPillLabel ?? activeLabel) : activeLabel;
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (!isMenuList || !review) return;
+
+    review.registerPreviewStates(
+      getSelectableOptions(options).map((option) => ({
+        id: option.value,
+        label: option.label,
+      })),
+    );
+  }, [isMenuList, options, review]);
+
+  const selectSubmenuEntry = useCallback(
+    (
+      entry: ControlsPanelSelectSubmenu<T>,
+      submenuOption: ControlsPanelSelectSubmenuOption,
+    ) => {
+      onValueChange(entry.value);
+      onSubmenuValueChange?.(submenuOption.value);
+    },
+    [onSubmenuValueChange, onValueChange],
+  );
+
+  const handleValueChange = useCallback(
+    (next: T) => {
+      onValueChange(next);
+
+      const submenuEntry = options.find(
+        (entry) => isControlsPanelSelectSubmenu(entry) && entry.value === next,
+      );
+      if (submenuEntry && isControlsPanelSelectSubmenu(submenuEntry)) {
+        const firstOption = submenuEntry.options[0];
+        if (firstOption) {
+          onSubmenuValueChange?.(firstOption.value);
+        }
+      }
+    },
+    [onSubmenuValueChange, onValueChange, options],
+  );
+
+  const closeSelect = useCallback(() => {
+    setOpen(false);
+    requestAnimationFrame(() => triggerRef.current?.blur());
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+
+    const handlePointerDown = (event: PointerEvent) => {
+      const target = event.target;
+      if (!(target instanceof Element)) return;
+      if (triggerRef.current?.contains(target)) return;
+      if (target.closest(`[${CONTROLS_PANEL_SELECT_CONTENT_ATTR}]`)) return;
+      closeSelect();
+    };
+
+    document.addEventListener("pointerdown", handlePointerDown, true);
+    return () => document.removeEventListener("pointerdown", handlePointerDown, true);
+  }, [closeSelect, open]);
+
+  const handleOpenChange = (next: boolean) => {
+    setOpen(next);
+    if (!next) {
+      requestAnimationFrame(() => triggerRef.current?.blur());
+    }
+  };
+
+  const handleTriggerPointerDown = (event: ReactPointerEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+  };
+
+  if (isMenuList) {
+    return (
+      <div className={cn(pillStyles.controlsPanelMenuList, className)}>
+        {options.map((entry, index) => {
+          if (isControlsPanelSelectSeparator(entry)) {
+            return (
+              <ControlsPanelOptionSeparator
+                key={`separator-${index}`}
+                className={pillStyles.dropdownMenuSeparator}
+              />
+            );
+          }
+          if (isControlsPanelSelectSubmenu(entry)) {
+            const parentSelected = entry.value === value;
+            const firstOption = entry.options[0];
+
+            return (
+              <DropdownMenuSub key={entry.value}>
+                <DropdownMenuSubTrigger
+                  className={cn(
+                    pillStyles.dropdownMenuItem,
+                    pillStyles.dropdownMenuSubTrigger,
+                    parentSelected && pillStyles.dropdownMenuItemSelected,
+                  )}
+                  onClick={(event) => {
+                    if (parentSelected) {
+                      // Hover opens the sub-layout; suppress click-to-open submenu.
+                      event.preventDefault();
+                      return;
+                    }
+                    if (!firstOption) return;
+                    event.preventDefault();
+                    selectSubmenuEntry(entry, firstOption);
+                    requestAnimationFrame(() => {
+                      event.currentTarget.ownerDocument.dispatchEvent(
+                        new KeyboardEvent("keydown", {
+                          key: "Escape",
+                          code: "Escape",
+                          bubbles: true,
+                          cancelable: true,
+                        }),
+                      );
+                    });
+                  }}
+                >
+                  <span>{entry.label}</span>
+                  {parentSelected ? (
+                    <Check
+                      className={cn(
+                        "size-3.5 shrink-0",
+                        pillStyles.dropdownMenuItemCheck,
+                      )}
+                      strokeWidth={2.5}
+                      aria-hidden
+                    />
+                  ) : null}
+                </DropdownMenuSubTrigger>
+                <DropdownMenuSubContent
+                  sideOffset={6}
+                  collisionPadding={{ top: 12, right: 12, bottom: 88, left: 12 }}
+                  data-prototype-comment-theme={commentTheme}
+                  className={cn(
+                    pillStyles.dropdownSubContent,
+                    "border-0 bg-transparent p-0 text-foreground ring-0",
+                  )}
+                >
+                  {entry.options.map((subOption) => {
+                    const selected =
+                      parentSelected && submenuValue === subOption.value;
+                    return (
+                      <DropdownMenuItem
+                        key={subOption.value}
+                        className={cn(
+                          pillStyles.dropdownMenuItem,
+                          selected && pillStyles.dropdownMenuItemSelected,
+                        )}
+                        onSelect={() => selectSubmenuEntry(entry, subOption)}
+                      >
+                        <span>{subOption.label}</span>
+                        {selected ? (
+                          <Check
+                            className={cn(
+                              "size-3.5 shrink-0",
+                              pillStyles.dropdownMenuItemCheck,
+                            )}
+                            strokeWidth={2.5}
+                            aria-hidden
+                          />
+                        ) : null}
+                      </DropdownMenuItem>
+                    );
+                  })}
+                </DropdownMenuSubContent>
+              </DropdownMenuSub>
+            );
+          }
+
+          const selected = entry.value === value;
+          return (
+            <DropdownMenuItem
+              key={entry.value}
+              className={cn(
+                pillStyles.dropdownMenuItem,
+                selected && pillStyles.dropdownMenuItemSelected,
+              )}
+              onSelect={() => handleValueChange(entry.value)}
+            >
+              <span>{entry.label}</span>
+              {selected ? (
+                <Check
+                  className={cn("size-3.5 shrink-0", pillStyles.dropdownMenuItemCheck)}
+                  strokeWidth={2.5}
+                  aria-hidden
+                />
+              ) : null}
+            </DropdownMenuItem>
+          );
+        })}
+      </div>
+    );
+  }
+
+  return (
+    <SelectPrimitive.Root
+      value={value}
+      open={open}
+      onOpenChange={handleOpenChange}
+      onValueChange={(next) => handleValueChange(next as T)}
+    >
+      {isMiniPill ? (
+        <SelectPrimitive.Trigger
+          ref={triggerRef}
+          className={cn(
+            pillStyles.panelSelectTriggerMiniPill,
+            "justify-center gap-1",
+            className,
+          )}
+          onPointerDown={handleTriggerPointerDown}
+        >
+          <span className={pillStyles.miniPillLabelGroup}>
+            <MiniPillLabel label={triggerLabel} />
+          </span>
+          <SelectPrimitive.Icon asChild>
+            <ChevronDown
+              className="size-3 shrink-0 opacity-60"
+              aria-hidden
+            />
+          </SelectPrimitive.Icon>
+        </SelectPrimitive.Trigger>
+      ) : (
+        <div
+          className={cn(
+            pillStyles.panelSelect,
+            pillStyles.controlsPanelSelect,
+            className,
+          )}
+        >
+          <SelectPrimitive.Trigger
+            ref={triggerRef}
+            className={cn(pillStyles.panelSelectTrigger, "justify-between gap-2")}
+            onPointerDown={handleTriggerPointerDown}
+          >
+            <span className={pillStyles.panelSelectValue}>{activeLabel}</span>
+            <SelectPrimitive.Icon asChild>
+              <ChevronDown
+                className={cn("size-3.5", pillStyles.panelSelectChevron)}
+                aria-hidden
+              />
+            </SelectPrimitive.Icon>
+          </SelectPrimitive.Trigger>
+        </div>
+      )}
+
+      <SelectPrimitive.Portal>
+        <SelectPrimitive.Content
+          {...{ [CONTROLS_PANEL_SELECT_CONTENT_ATTR]: "" }}
+          data-prototype-root
+          data-prototype-comment-theme={commentTheme}
+          position="popper"
+          side="top"
+          align="start"
+          sideOffset={4}
+          onCloseAutoFocus={(event) => event.preventDefault()}
+          className={cn(
+            pillStyles.dropdownContent,
+            "border-0 bg-transparent p-0 text-foreground ring-0",
+          )}
+          style={{
+            // Above review chrome toolbar (prototype-review-chrome.module.scss z-index: 1050).
+            zIndex: 1051,
+            minWidth: "max(var(--radix-select-trigger-width), 12rem)",
+          }}
+        >
+          <SelectPrimitive.Viewport className="flex max-h-[min(20rem,60vh)] flex-col gap-0.5">
+            {options.map((entry, index) => {
+              if (isControlsPanelSelectSeparator(entry)) {
+                return (
+                  <ControlsPanelOptionSeparator
+                    key={`separator-${index}`}
+                    className={pillStyles.dropdownMenuSeparator}
+                  />
+                );
+              }
+              if (isControlsPanelSelectSubmenu(entry)) {
+                return (
+                  <SelectPrimitive.Item
+                    key={entry.value}
+                    value={entry.value}
+                    className={pillStyles.dropdownMenuItem}
+                  >
+                    <SelectPrimitive.ItemText>{entry.label}</SelectPrimitive.ItemText>
+                    <SelectPrimitive.ItemIndicator asChild>
+                      <Check
+                        className={cn("size-3.5 shrink-0", pillStyles.dropdownMenuItemCheck)}
+                        strokeWidth={2.5}
+                        aria-hidden
+                      />
+                    </SelectPrimitive.ItemIndicator>
+                  </SelectPrimitive.Item>
+                );
+              }
+
+              return (
+                <SelectPrimitive.Item
+                  key={entry.value}
+                  value={entry.value}
+                  className={pillStyles.dropdownMenuItem}
+                >
+                  <SelectPrimitive.ItemText>{entry.label}</SelectPrimitive.ItemText>
+                  <SelectPrimitive.ItemIndicator asChild>
+                    <Check
+                      className={cn("size-3.5 shrink-0", pillStyles.dropdownMenuItemCheck)}
+                      strokeWidth={2.5}
+                      aria-hidden
+                    />
+                  </SelectPrimitive.ItemIndicator>
+                </SelectPrimitive.Item>
+              );
+            })}
+          </SelectPrimitive.Viewport>
+        </SelectPrimitive.Content>
+      </SelectPrimitive.Portal>
+    </SelectPrimitive.Root>
+  );
+}

package/src/components/platform-ui/empty-state.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@prototype/lib/utils";
+import type { ReactNode } from "react";
+
+type EmptyStateProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export function EmptyState({ children, className }: EmptyStateProps) {
+  return (
+    <p className={cn("px-1 py-2 text-sm text-muted-foreground", className)}>
+      {children}
+    </p>
+  );
+}

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

@@ -0,0 +1,18 @@
+"use client";
+
+import { Button } from "@prototype/components/ui/button";
+import { cn } from "@prototype/lib/utils";
+import type { ComponentProps } from "react";
+
+type IconButtonProps = ComponentProps<typeof Button>;
+
+export function IconButton({ className, size = "icon", variant = "ghost", ...props }: IconButtonProps) {
+  return (
+    <Button
+      size={size}
+      variant={variant}
+      className={cn("shrink-0", className)}
+      {...props}
+    />
+  );
+}

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

@@ -0,0 +1,123 @@
+"use client";
+
+import { cn } from "@prototype/lib/utils";
+import { Check, ChevronDown } from "lucide-react";
+import {
+  createContext,
+  useContext,
+  useState,
+  type ButtonHTMLAttributes,
+  type ReactNode,
+} from "react";
+
+const PanelSelectContext = createContext<(() => void) | null>(null);
+
+export function usePanelSelectClose() {
+  return useContext(PanelSelectContext);
+}
+
+type PanelSelectProps = {
+  label: string;
+  valueLabel: string;
+  children: ReactNode;
+  className?: string;
+  defaultOpen?: boolean;
+};
+
+export function PanelSelect({
+  label,
+  valueLabel,
+  children,
+  className,
+  defaultOpen = false,
+}: PanelSelectProps) {
+  const [open, setOpen] = useState(defaultOpen);
+  const close = () => setOpen(false);
+
+  return (
+    <PanelSelectContext.Provider value={close}>
+      <div className={cn("relative", className)}>
+        <button
+          type="button"
+          aria-expanded={open}
+          aria-haspopup="listbox"
+          className="flex h-8 min-w-0 items-center gap-2 rounded-md border border-border bg-background px-2.5 text-sm text-foreground shadow-sm transition-colors duration-200 ease hover:bg-muted"
+          onClick={(event) => {
+            event.stopPropagation();
+            setOpen((current) => !current);
+          }}
+          onPointerDown={(event) => event.stopPropagation()}
+        >
+          <span className="text-xs text-muted-foreground">{label}</span>
+          <span className="truncate font-medium">{valueLabel}</span>
+          <ChevronDown
+            className={cn(
+              "size-4 shrink-0 text-muted-foreground transition-transform duration-200 ease",
+              open && "rotate-180",
+            )}
+            aria-hidden
+          />
+        </button>
+        {open ? (
+          <div
+            role="listbox"
+            className="absolute top-full left-0 z-50 mt-1 min-w-[10rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md"
+            onPointerDown={(event) => event.stopPropagation()}
+          >
+            {children}
+          </div>
+        ) : null}
+      </div>
+    </PanelSelectContext.Provider>
+  );
+}
+
+type PanelMenuItemProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "type" | "onSelect"
+> & {
+  selected?: boolean;
+  onSelect?: () => void;
+  children: ReactNode;
+};
+
+export function PanelMenuItem({
+  selected = false,
+  className,
+  children,
+  onSelect,
+  onClick,
+  ...props
+}: PanelMenuItemProps) {
+  const closePanelSelect = usePanelSelectClose();
+
+  return (
+    <button
+      type="button"
+      role="option"
+      aria-selected={selected}
+      className={cn(
+        "flex w-full cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground",
+        selected && "bg-accent text-accent-foreground",
+        className,
+      )}
+      onClick={(event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) {
+          onSelect?.();
+          closePanelSelect?.();
+        }
+      }}
+      {...props}
+    >
+      <span className="min-w-0 flex-1 truncate text-left">{children}</span>
+      {selected ? (
+        <Check className="size-3.5 shrink-0" strokeWidth={2.5} aria-hidden />
+      ) : null}
+    </button>
+  );
+}
+
+export function PanelMenuSeparator({ className }: { className?: string }) {
+  return <div className={cn("-mx-1 my-1 h-px bg-border", className)} role="separator" />;
+}