@hyperframes/studio 0.1.0

package/src/components/ui/Button.tsx

@@ -0,0 +1,123 @@
+/**
+ * Button & IconButton — The most important primitive.
+ *
+ * Absorbs: active state (scale 0.98), hit target (min 32px),
+ * shadow anatomy (primary), focus ring, disabled state,
+ * loading state, reduced motion, proper timing tokens.
+ *
+ * Rules applied:
+ * - physics-active-state: scale(0.98) on :active
+ * - ux-fitts-target-size: min 32px hit target
+ * - visual-button-shadow-anatomy: 6-layer shadow on primary
+ * - duration-press-hover: 120ms press, 150ms hover
+ */
+
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
+
+// -- Button --
+
+type ButtonVariant = "primary" | "secondary" | "danger" | "ghost";
+type ButtonSize = "sm" | "md" | "lg";
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  loading?: boolean;
+  icon?: ReactNode;
+}
+
+const variantStyles: Record<ButtonVariant, string> = {
+  primary: [
+    "bg-white text-neutral-950 font-medium",
+    "shadow-btn-primary",
+    "hover:bg-neutral-200",
+    "active:scale-[0.97]",
+  ].join(" "),
+  secondary: [
+    "bg-transparent text-neutral-300 font-medium",
+    "border border-border",
+    "hover:bg-surface-hover hover:text-white hover:border-border-strong",
+    "active:scale-[0.98]",
+  ].join(" "),
+  danger: ["bg-accent-red text-white font-medium", "hover:bg-red-600", "active:scale-[0.97]"].join(" "),
+  ghost: ["bg-transparent text-neutral-400", "hover:bg-surface-hover hover:text-white", "active:scale-[0.98]"].join(
+    " ",
+  ),
+};
+
+const sizeStyles: Record<ButtonSize, string> = {
+  sm: "h-7 px-2.5 text-xs gap-1.5 rounded-button",
+  md: "h-8 px-3 text-sm gap-1.5 rounded-button",
+  lg: "h-9 px-4 text-base gap-2 rounded-button",
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ variant = "secondary", size = "md", loading, icon, children, className = "", disabled, ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        disabled={disabled || loading}
+        className={[
+          "inline-flex items-center justify-center",
+          "transition-all duration-press ease-standard",
+          "disabled:opacity-40 disabled:pointer-events-none",
+          "select-none cursor-pointer",
+          variantStyles[variant],
+          sizeStyles[size],
+          className,
+        ].join(" ")}
+        {...props}
+      >
+        {loading ? (
+          <svg className="animate-spin h-3.5 w-3.5" viewBox="0 0 24 24" fill="none">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+          </svg>
+        ) : icon ? (
+          <span className="flex-shrink-0">{icon}</span>
+        ) : null}
+        {children && <span>{children}</span>}
+      </button>
+    );
+  },
+);
+Button.displayName = "Button";
+
+// -- IconButton --
+// For icon-only buttons. Enforces min 32px hit target.
+
+interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  icon: ReactNode;
+  size?: ButtonSize;
+  variant?: ButtonVariant;
+  "aria-label": string; // REQUIRED for accessibility
+}
+
+const iconSizeStyles: Record<ButtonSize, string> = {
+  sm: "min-w-7 min-h-7 rounded-button", // 28px
+  md: "min-w-8 min-h-8 rounded-button", // 32px — minimum recommended
+  lg: "min-w-9 min-h-9 rounded-button", // 36px
+};
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  ({ icon, size = "md", variant = "ghost", className = "", ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        className={[
+          "inline-flex items-center justify-center",
+          "transition-all duration-press ease-standard",
+          "disabled:opacity-40 disabled:pointer-events-none",
+          "select-none cursor-pointer",
+          variantStyles[variant],
+          iconSizeStyles[size],
+          className,
+        ].join(" ")}
+        {...props}
+      >
+        {icon}
+      </button>
+    );
+  },
+);
+IconButton.displayName = "IconButton";

package/src/components/ui/index.ts

@@ -0,0 +1,2 @@
+// Minimal UI primitives for studio canvas components
+export { Button, IconButton } from "./Button";

package/src/hooks/useCodeEditor.ts

@@ -0,0 +1,82 @@
+import { useState, useCallback } from "react";
+
+export interface OpenFile {
+  path: string;
+  content: string;
+  savedContent: string;
+  isDirty: boolean;
+}
+
+export interface UseCodeEditorReturn {
+  openFiles: OpenFile[];
+  activeFilePath: string | null;
+  activeFile: OpenFile | null;
+  openFile: (path: string, content: string) => void;
+  closeFile: (path: string) => void;
+  setActiveFile: (path: string) => void;
+  updateContent: (content: string) => void;
+  markSaved: (path: string) => void;
+  /** External update from agent — updates saved content, shows reload indicator */
+  externalUpdate: (path: string, content: string) => void;
+}
+
+export function useCodeEditor(): UseCodeEditorReturn {
+  const [openFiles, setOpenFiles] = useState<OpenFile[]>([]);
+  const [activeFilePath, setActiveFilePath] = useState<string | null>(null);
+
+  const activeFile = openFiles.find((f) => f.path === activeFilePath) ?? null;
+
+  const openFile = useCallback((path: string, content: string) => {
+    setOpenFiles((prev) => {
+      const existing = prev.find((f) => f.path === path);
+      if (existing) return prev;
+      return [...prev, { path, content, savedContent: content, isDirty: false }];
+    });
+    setActiveFilePath(path);
+  }, []);
+
+  const closeFile = useCallback(
+    (path: string) => {
+      setOpenFiles((prev) => prev.filter((f) => f.path !== path));
+      setActiveFilePath((prev) => {
+        if (prev === path) {
+          const remaining = openFiles.filter((f) => f.path !== path);
+          return remaining.length > 0 ? remaining[remaining.length - 1].path : null;
+        }
+        return prev;
+      });
+    },
+    [openFiles],
+  );
+
+  const updateContent = useCallback(
+    (content: string) => {
+      setOpenFiles((prev) =>
+        prev.map((f) => (f.path === activeFilePath ? { ...f, content, isDirty: content !== f.savedContent } : f)),
+      );
+    },
+    [activeFilePath],
+  );
+
+  const markSaved = useCallback((path: string) => {
+    setOpenFiles((prev) => prev.map((f) => (f.path === path ? { ...f, savedContent: f.content, isDirty: false } : f)));
+  }, []);
+
+  const externalUpdate = useCallback((path: string, content: string) => {
+    setOpenFiles((prev) =>
+      prev.map((f) => (f.path === path ? { ...f, savedContent: content, content, isDirty: false } : f)),
+    );
+  }, []);
+
+  return {
+    openFiles,
+    activeFilePath,
+    activeFile,
+    openFile,
+    closeFile,
+    setActiveFile: setActiveFilePath,
+    updateContent,
+    markSaved,
+    externalUpdate,
+  };
+}

package/src/hooks/useElementPicker.ts

@@ -0,0 +1,338 @@
+import { useState, useCallback, useRef } from "react";
+import { useMountEffect } from "./useMountEffect";
+import { resolveSourceFile, applyPatch } from "../utils/sourcePatcher";
+
+export interface PickedElement {
+  id: string | null;
+  tagName: string;
+  selector: string;
+  label: string;
+  boundingBox: { x: number; y: number; width: number; height: number };
+  textContent: string | null;
+  src: string | null;
+  dataAttributes: Record<string, string>;
+  computedStyles: Record<string, string>;
+}
+
+interface UseElementPickerReturn {
+  isPickMode: boolean;
+  pickedElement: PickedElement | null;
+  enablePick: () => void;
+  disablePick: () => void;
+  clearPick: () => void;
+  /** Update a CSS property on the picked element live + persist to source */
+  setStyle: (prop: string, value: string) => void;
+  /** Update a data attribute on the picked element + persist to source */
+  setDataAttr: (attr: string, value: string) => void;
+  /** Update the text content of the picked element + persist to source */
+  setTextContent: (text: string) => void;
+  /** Override the active iframe (for zoomed canvas view). Pass null to restore primary. */
+  setActiveIframe: (el: HTMLIFrameElement | null) => void;
+  /** Ref that always points to the active iframe (focused canvas frame or preview panel) */
+  activeIframeRef: React.RefObject<HTMLIFrameElement | null>;
+}
+
+interface PickerOptions {
+  /** Workspace files for source patching */
+  workspaceFiles?: Record<string, string>;
+  /** Callback to sync patched files to the project */
+  onSyncFiles?: (files: Record<string, string>) => void;
+}
+
+/**
+ * Hook for element picking via the HyperFrame runtime's picker API.
+ * Communicates with the iframe via postMessage.
+ */
+export function useElementPicker(
+  iframeRef: React.RefObject<HTMLIFrameElement | null>,
+  options?: PickerOptions,
+): UseElementPickerReturn {
+  const [isPickMode, setIsPickMode] = useState(false);
+  const [pickedElement, setPickedElement] = useState<PickedElement | null>(null);
+
+  // Secondary/override iframe ref — set when a zoomed frame is active.
+  // When set, all postMessage sends and DOM reads go to this ref instead.
+  const activeOverrideRef = useRef<HTMLIFrameElement | null>(null);
+
+  const getActiveIframe = useCallback((): HTMLIFrameElement | null => {
+    return activeOverrideRef.current ?? iframeRef.current;
+  }, [iframeRef]);
+
+  // Exposed so the host page can wire the focused view's iframe into the picker
+  const setActiveIframe = useCallback((el: HTMLIFrameElement | null) => {
+    activeOverrideRef.current = el;
+  }, []);
+
+  const enablePick = useCallback(() => {
+    try {
+      getActiveIframe()?.contentWindow?.postMessage(
+        { source: "hf-parent", type: "control", action: "enable-pick-mode" },
+        "*",
+      );
+      setIsPickMode(true);
+    } catch {
+      /* cross-origin */
+    }
+  }, [getActiveIframe]);
+
+  const disablePick = useCallback(() => {
+    try {
+      getActiveIframe()?.contentWindow?.postMessage(
+        { source: "hf-parent", type: "control", action: "disable-pick-mode" },
+        "*",
+      );
+    } catch {
+      /* cross-origin */
+    }
+    setIsPickMode(false);
+  }, [getActiveIframe]);
+
+  const clearPick = useCallback(() => {
+    setPickedElement(null);
+  }, []);
+
+  // Listen for picker messages from the iframe
+  useMountEffect(() => {
+    const handleMessage = (e: MessageEvent) => {
+      const data = e.data;
+      if (data?.source !== "hf-preview") return;
+      // Accept events from either the primary iframe or the active override
+      const activeIframe = getActiveIframe();
+      if (!activeIframe) return;
+      if (e.source !== activeIframe.contentWindow && e.source !== iframeRef.current?.contentWindow) return;
+
+      if (data.type === "element-picked") {
+        const el = data.elementInfo;
+        if (el) {
+          const styles = readComputedStyles(activeIframe, el.selector);
+          setPickedElement({
+            id: el.id ?? null,
+            tagName: el.tagName ?? "div",
+            selector: el.selector ?? "",
+            label: el.label ?? el.tagName ?? "Element",
+            boundingBox: el.boundingBox ?? { x: 0, y: 0, width: 0, height: 0 },
+            textContent: el.textContent ?? null,
+            src: el.src ?? null,
+            dataAttributes: el.dataAttributes ?? {},
+            computedStyles: styles,
+          });
+          setIsPickMode(false);
+        }
+      } else if (data.type === "element-pick-candidates") {
+        // Multiple candidates at click point — pick the first one
+        const el = data.candidates?.[data.selectedIndex ?? 0];
+        if (el) {
+          const styles = readComputedStyles(activeIframe, el.selector);
+          setPickedElement({
+            id: el.id ?? null,
+            tagName: el.tagName ?? "div",
+            selector: el.selector ?? "",
+            label: el.label ?? el.tagName ?? "Element",
+            boundingBox: el.boundingBox ?? { x: 0, y: 0, width: 0, height: 0 },
+            textContent: el.textContent ?? null,
+            src: el.src ?? null,
+            dataAttributes: el.dataAttributes ?? {},
+            computedStyles: styles,
+          });
+        }
+      }
+
+      if (data.type === "pick-mode-cancelled") {
+        setIsPickMode(false);
+      }
+    };
+
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  });
+
+  // Ref for options to avoid stale closures in debounced callback
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+
+  // Sync immediately (not debounced) — save on every change for reliability
+  const syncToSource = useCallback(
+    (
+      elementId: string,
+      selector: string,
+      op: { type: "inline-style" | "attribute" | "text-content"; property: string; value: string },
+    ) => {
+      const opts = optionsRef.current;
+      if (!opts?.workspaceFiles || !opts.onSyncFiles || !elementId) return;
+      const files = opts.workspaceFiles;
+      const sourceFile = resolveSourceFile(elementId, selector, files);
+      if (!sourceFile || !files[sourceFile]) {
+        return;
+      }
+      const patched = applyPatch(files[sourceFile], elementId, op);
+      if (patched !== files[sourceFile]) {
+        opts.onSyncFiles({ [sourceFile]: patched });
+      }
+    },
+    [],
+  );
+
+  const setStyle = useCallback(
+    (prop: string, value: string) => {
+      const activeIframe = getActiveIframe();
+      if (!pickedElement?.selector || !activeIframe) return;
+      try {
+        const doc = activeIframe.contentDocument;
+        const el = doc?.querySelector(pickedElement.selector) as HTMLElement | null;
+        if (el) {
+          el.style.setProperty(prop, value);
+          setPickedElement((prev) =>
+            prev
+              ? {
+                  ...prev,
+                  computedStyles: { ...prev.computedStyles, [prop]: value },
+                }
+              : null,
+          );
+          // Persist to source file
+          if (pickedElement.id) {
+            // ID-based patching — surgical edit of just the element's style
+            syncToSource(pickedElement.id, pickedElement.selector, { type: "inline-style", property: prop, value });
+          } else {
+            // No ID — save the full composition HTML from the iframe
+            // This captures ALL inline style changes, not just the targeted one
+            try {
+              const fullHtml = activeIframe.contentDocument?.documentElement.outerHTML;
+              if (fullHtml && optionsRef.current?.onSyncFiles) {
+                // Determine which file this iframe represents
+                const src = activeIframe.getAttribute("src") ?? "";
+                const compMatch = src.match(/\/comp\/(.+?)(?:\?|$)/);
+                const filePath = compMatch ? compMatch[1] : "index.html";
+                optionsRef.current.onSyncFiles({ [filePath]: `<!DOCTYPE html>\n<html>${fullHtml.replace(/<html[^>]*>/, "")}`  });
+              }
+            } catch { /* cross-origin */ }
+          }
+        }
+      } catch {
+        /* cross-origin */
+      }
+    },
+    [pickedElement, getActiveIframe, syncToSource],
+  );
+
+  const setDataAttr = useCallback(
+    (attr: string, value: string) => {
+      const activeIframe = getActiveIframe();
+      if (!pickedElement?.selector || !activeIframe) return;
+      try {
+        const doc = activeIframe.contentDocument;
+        const el = doc?.querySelector(pickedElement.selector);
+        if (el) {
+          el.setAttribute(`data-${attr}`, value);
+          setPickedElement((prev) =>
+            prev
+              ? {
+                  ...prev,
+                  dataAttributes: { ...prev.dataAttributes, [attr]: value },
+                }
+              : null,
+          );
+          // Persist to source file immediately
+          if (pickedElement.id) {
+            syncToSource(pickedElement.id, pickedElement.selector, { type: "attribute", property: attr, value });
+          }
+        }
+      } catch {
+        /* cross-origin */
+      }
+    },
+    [pickedElement, getActiveIframe, syncToSource],
+  );
+
+  const setTextContent = useCallback(
+    (text: string) => {
+      const activeIframe = getActiveIframe();
+      if (!pickedElement?.selector || !activeIframe) return;
+      try {
+        const doc = activeIframe.contentDocument;
+        const el = doc?.querySelector(pickedElement.selector);
+        if (el) {
+          el.textContent = text;
+          setPickedElement((prev) => (prev ? { ...prev, textContent: text } : null));
+          // Persist to source file
+          if (pickedElement.id) {
+            syncToSource(pickedElement.id, pickedElement.selector, {
+              type: "text-content",
+              property: "textContent",
+              value: text,
+            });
+          }
+        }
+      } catch {
+        /* cross-origin */
+      }
+    },
+    [pickedElement, getActiveIframe, syncToSource],
+  );
+
+  // Ref-like object that always points to the active iframe (override or primary)
+  const activeIframeRef = useRef<HTMLIFrameElement | null>(null);
+  activeIframeRef.current = getActiveIframe();
+
+  return {
+    isPickMode,
+    pickedElement,
+    enablePick,
+    disablePick,
+    clearPick,
+    setStyle,
+    setDataAttr,
+    setTextContent,
+    setActiveIframe,
+    /** Ref that always points to the active iframe (focused canvas frame or preview panel) */
+    activeIframeRef,
+  };
+}
+
+/** Read a subset of computed styles from an element in the iframe */
+function readComputedStyles(iframe: HTMLIFrameElement, selector: string): Record<string, string> {
+  const styles: Record<string, string> = {};
+  try {
+    const doc = iframe.contentDocument;
+    const el = doc?.querySelector(selector);
+    if (!el) return styles;
+    const computed = iframe.contentWindow?.getComputedStyle(el);
+    if (!computed) return styles;
+
+    const props = [
+      "position",
+      "top",
+      "left",
+      "right",
+      "bottom",
+      "width",
+      "height",
+      "margin-top",
+      "margin-right",
+      "margin-bottom",
+      "margin-left",
+      "padding-top",
+      "padding-right",
+      "padding-bottom",
+      "padding-left",
+      "font-size",
+      "font-weight",
+      "font-family",
+      "color",
+      "background-color",
+      "background",
+      "opacity",
+      "border-radius",
+      "transform",
+      "z-index",
+    ];
+
+    for (const prop of props) {
+      const val = computed.getPropertyValue(prop);
+      if (val) styles[prop] = val;
+    }
+  } catch {
+    /* cross-origin */
+  }
+  return styles;
+}

package/src/hooks/useMountEffect.ts

@@ -0,0 +1,18 @@
+import { useEffect } from "react";
+
+/**
+ * Run an effect exactly once on mount (and optional cleanup on unmount).
+ * This is the ONLY sanctioned way to call useEffect in this codebase.
+ *
+ * If you need to react to prop/state changes, use one of:
+ * - Derived state (compute inline, no hook needed)
+ * - Event handlers (onClick, onChange, etc.)
+ * - `key` prop to force remount
+ * - Data-fetching library (useQuery, useSWR)
+ *
+ * @see https://react.dev/learn/you-might-not-need-an-effect
+ */
+export function useMountEffect(effect: () => void | (() => void)) {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(effect, []);
+}

package/src/icons/SystemIcons.tsx

@@ -0,0 +1,130 @@
+import {
+  WarningCircle,
+  Warning,
+  ArrowLeft as PhArrowLeft,
+  Check as PhCheck,
+  CheckCircle as PhCheckCircle,
+  Circle as PhCircle,
+  Clock as PhClock,
+  Code as PhCode,
+  DownloadSimple,
+  Pencil as PhPencil,
+  ArrowSquareOut,
+  Eye as PhEye,
+  EyeClosed,
+  File as PhFile,
+  FileCode as PhFileCode,
+  FileText as PhFileText,
+  FilmStrip,
+  Heart as PhHeart,
+  Image as PhImage,
+  Info as PhInfo,
+  Stack,
+  SpinnerGap,
+  ArrowsOut,
+  CornersOut,
+  ChatCircle,
+  ChatCenteredText,
+  Cursor,
+  ArrowsOutCardinal,
+  MusicNote,
+  Palette as PhPalette,
+  Paperclip as PhPaperclip,
+  Pause as PhPause,
+  Play as PhPlay,
+  Plus as PhPlus,
+  MagnifyingGlass,
+  PaperPlaneRight,
+  SkipBack as PhSkipBack,
+  SkipForward as PhSkipForward,
+  Square as PhSquare,
+  Trash,
+  TextT,
+  UploadSimple,
+  User as PhUser,
+  UsersThree,
+  VideoCamera,
+  X as PhX,
+  Lightning,
+  MagnifyingGlassPlus,
+  MagnifyingGlassMinus,
+  Terminal as PhTerminal,
+  CaretDown,
+  CaretRight,
+  ClipboardText,
+  ArrowCounterClockwise,
+  Gear,
+} from "@phosphor-icons/react";
+import type { Icon as PhosphorIcon, IconProps as PhosphorIconProps } from "@phosphor-icons/react";
+
+type IconProps = PhosphorIconProps & { title?: string };
+
+const makeIcon = (Icon: PhosphorIcon) => {
+  const Wrapped = ({ title, ...props }: IconProps) => (
+    <Icon alt={title} aria-label={title} aria-hidden={title ? undefined : true} {...props} />
+  );
+  return Wrapped;
+};
+
+// Lucide name → Phosphor equivalent
+export const AlertCircle = makeIcon(WarningCircle);
+export const AlertTriangle = makeIcon(Warning);
+export const ArrowLeft = makeIcon(PhArrowLeft);
+export const Check = makeIcon(PhCheck);
+export const CheckCircle = makeIcon(PhCheckCircle);
+/** CheckCircle2 in lucide is visually identical to CheckCircle */
+export const CheckCircle2 = makeIcon(PhCheckCircle);
+export const Circle = makeIcon(PhCircle);
+export const Clock = makeIcon(PhClock);
+export const Code = makeIcon(PhCode);
+export const Download = makeIcon(DownloadSimple);
+export const Edit2 = makeIcon(PhPencil);
+export const ExternalLink = makeIcon(ArrowSquareOut);
+export const Eye = makeIcon(PhEye);
+export const EyeOff = makeIcon(EyeClosed);
+export const File = makeIcon(PhFile);
+export const FileCode = makeIcon(PhFileCode);
+// FileIcon alias (lucide exports both `File` and `FileIcon`)
+export const FileIcon = makeIcon(PhFile);
+export const FileText = makeIcon(PhFileText);
+export const Film = makeIcon(FilmStrip);
+export const Heart = makeIcon(PhHeart);
+export const Image = makeIcon(PhImage);
+export const Info = makeIcon(PhInfo);
+export const Layers = makeIcon(Stack);
+export const Loader2 = makeIcon(SpinnerGap);
+export const Maximize = makeIcon(ArrowsOut);
+export const Maximize2 = makeIcon(CornersOut);
+export const MessageCircle = makeIcon(ChatCircle);
+export const MessageSquare = makeIcon(ChatCenteredText);
+export const MousePointer = makeIcon(Cursor);
+export const Move = makeIcon(ArrowsOutCardinal);
+export const Music = makeIcon(MusicNote);
+export const Palette = makeIcon(PhPalette);
+export const Paperclip = makeIcon(PhPaperclip);
+export const Pause = makeIcon(PhPause);
+export const Pencil = makeIcon(PhPencil);
+export const Play = makeIcon(PhPlay);
+export const Plus = makeIcon(PhPlus);
+export const Search = makeIcon(MagnifyingGlass);
+export const Send = makeIcon(PaperPlaneRight);
+export const SkipBack = makeIcon(PhSkipBack);
+export const SkipForward = makeIcon(PhSkipForward);
+export const Square = makeIcon(PhSquare);
+export const Trash2 = makeIcon(Trash);
+export const Type = makeIcon(TextT);
+export const Upload = makeIcon(UploadSimple);
+export const User = makeIcon(PhUser);
+export const Users = makeIcon(UsersThree);
+export const Video = makeIcon(VideoCamera);
+export const X = makeIcon(PhX);
+export const Zap = makeIcon(Lightning);
+export const ZoomIn = makeIcon(MagnifyingGlassPlus);
+export const ZoomOut = makeIcon(MagnifyingGlassMinus);
+// Extra icons used in this project (not in lucide's default mapping above)
+export const Terminal = makeIcon(PhTerminal);
+export const ChevronDown = makeIcon(CaretDown);
+export const ChevronRight = makeIcon(CaretRight);
+export const ClipboardList = makeIcon(ClipboardText);
+export const RotateCcw = makeIcon(ArrowCounterClockwise);
+export const Settings = makeIcon(Gear);