@stigmer/react 1.0.3 → 2.0.0

package/src/skill/SkillFileBrowser.tsx

@@ -1,11 +1,11 @@
 "use client";
 
-import { useCallback, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import Markdown from "react-markdown";
 import { cn } from "@stigmer/theme";
 import { MARKDOWN_COMPONENTS, REMARK_PLUGINS, stripFrontmatter } from "../internal/markdown-components";
+import { buildFileTree, FileTreeNode } from "../internal/file-tree";
 import { useSkillArtifact } from "./useSkillArtifact";
-import type { SkillFileEntry } from "./useSkillUpload";
 
 // ---------------------------------------------------------------------------
 // Public types
@@ -148,80 +148,6 @@ export function SkillFileBrowser({
   );
 }
 
-// ---------------------------------------------------------------------------
-// File tree node
-// ---------------------------------------------------------------------------
-
-interface TreeNode {
-  name: string;
-  path: string;
-  children?: TreeNode[];
-}
-
-function FileTreeNode({
-  node,
-  selectedPath,
-  onSelect,
-  depth,
-}: {
-  readonly node: TreeNode;
-  readonly selectedPath: string;
-  readonly onSelect: (path: string) => void;
-  readonly depth: number;
-}) {
-  const [expanded, setExpanded] = useState(true);
-  const isFolder = !!node.children;
-  const isSelected = node.path === selectedPath;
-
-  const handleClick = useCallback(() => {
-    if (isFolder) {
-      setExpanded((prev) => !prev);
-    } else {
-      onSelect(node.path);
-    }
-  }, [isFolder, node.path, onSelect]);
-
-  return (
-    <li role="treeitem" aria-expanded={isFolder ? expanded : undefined}>
-      <button
-        type="button"
-        onClick={handleClick}
-        className={cn(
-          "flex w-full items-center gap-1.5 px-3 py-1 text-left text-xs transition-colors",
-          "hover:bg-muted",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
-          isSelected && !isFolder && "bg-muted text-foreground font-medium",
-          !isSelected && "text-muted-foreground",
-        )}
-        style={{ paddingLeft: `${12 + depth * 12}px` }}
-        aria-current={isSelected ? "true" : undefined}
-      >
-        {isFolder && (
-          <span className="text-[10px] text-muted-foreground-subtle">
-            {expanded ? "▼" : "▶"}
-          </span>
-        )}
-        <span className={cn("truncate", isFolder && "font-medium text-foreground")}>
-          {node.name}
-        </span>
-      </button>
-      {isFolder && expanded && node.children && (
-        <ul role="group">
-          {node.children.map((child) => (
-            <FileTreeNode
-              key={child.path}
-              node={child}
-              selectedPath={selectedPath}
-              onSelect={onSelect}
-              depth={depth + 1}
-            />
-          ))}
-        </ul>
-      )}
-    </li>
-  );
-}
-
 // ---------------------------------------------------------------------------
 // Content viewer
 // ---------------------------------------------------------------------------
@@ -250,40 +176,3 @@ function FileContentViewer({
   );
 }
 
-// ---------------------------------------------------------------------------
-// Tree building utility
-// ---------------------------------------------------------------------------
-
-function buildFileTree(files: SkillFileEntry[]): TreeNode[] {
-  const root: TreeNode[] = [];
-
-  const sorted = [...files].sort((a, b) => a.path.localeCompare(b.path));
-
-  for (const file of sorted) {
-    const parts = file.path.split("/");
-
-    if (parts.length === 1) {
-      root.push({ name: parts[0], path: file.path });
-    } else {
-      let currentLevel = root;
-      for (let i = 0; i < parts.length - 1; i++) {
-        const folderName = parts[i];
-        let folder = currentLevel.find(
-          (n) => n.name === folderName && n.children,
-        );
-        if (!folder) {
-          folder = {
-            name: folderName,
-            path: parts.slice(0, i + 1).join("/") + "/",
-            children: [],
-          };
-          currentLevel.push(folder);
-        }
-        currentLevel = folder.children!;
-      }
-      currentLevel.push({ name: parts[parts.length - 1], path: file.path });
-    }
-  }
-
-  return root;
-}

package/src/styles.css

@@ -7,6 +7,12 @@
 @import "tailwindcss/utilities.css" layer(stgm);
 @import "@stigmer/theme/tokens.css" layer(stgm);
 
+/* React Flow base styles for workflow graphs. Imported centrally (rather than
+   as a per-component side effect) so the headless @stigmer/react entry stays
+   loadable under Node/tsx — e.g. the @stigmer/ink terminal CLI — which cannot
+   resolve `.css` imports. */
+@import "@xyflow/react/dist/style.css";
+
 @custom-variant dark (&:is([data-stgm-color-mode="dark"] *));
 
 @theme inline {
@@ -140,6 +146,31 @@
 }
 
 @layer stgm {
+  /* T06: Active edge animation (marching ants for currently-flowing edges) */
+  @keyframes stgm-marching-ants {
+    to {
+      stroke-dashoffset: -12;
+    }
+  }
+
+  .stgm-edge-active path {
+    animation: stgm-marching-ants 0.6s linear infinite;
+  }
+
+  /* T16: Running node border pulse — subtle glow to indicate active execution */
+  @keyframes stgm-running-pulse {
+    0%, 100% {
+      box-shadow: 0 0 0 0 var(--stgm-primary, #6366f1);
+    }
+    50% {
+      box-shadow: 0 0 0 4px color-mix(in srgb, var(--stgm-primary, #6366f1) 20%, transparent);
+    }
+  }
+
+  .stgm-exec-running {
+    animation: stgm-running-pulse 2s ease-in-out infinite;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .stgm {
       --stgm-motion-duration: 0ms;

package/src/tabs/Tabs.tsx

@@ -149,6 +149,7 @@ export function Tabs({
               {tab.label}
               {tab.badge != null && tab.badge > 0 && (
                 <span
+                  aria-hidden="true"
                   className={cn(
                     "inline-flex min-w-[1.25rem] items-center justify-center rounded-full px-1 py-px text-[10px] font-medium leading-none",
                     isActive
@@ -175,7 +176,7 @@ export function Tabs({
         role="tabpanel"
         aria-labelledby={tabId(activeTab)}
         tabIndex={0}
-        className="pt-4 focus-visible:outline-none"
+        className="min-h-0 flex-1 pt-4 focus-visible:outline-none"
       >
         {children}
       </div>

package/src/workflow/CanvasActionsContext.ts

@@ -1,12 +1,26 @@
 "use client";
 
 import { createContext } from "react";
+import type { WorkflowGraphModel } from "./workflow-graph-model";
 
 export interface CanvasActions {
   insertTaskOnEdge: (edgeId: string, kindString: string) => void;
   deleteNode: (nodeId: string) => void;
   addSuccessorTask: (sourceNodeId: string, kindString: string) => void;
   duplicateNode: (nodeId: string) => void;
+  addSwitchCase: (switchNodeId: string, caseName: string, condition: string) => void;
+  addForkBranch: (forkNodeId: string, branchName: string) => void;
+  addCatchHandler: (tryCatchNodeId: string, errorType: string) => void;
+  removeSwitchCase: (switchNodeId: string, caseName: string) => void;
+  reorderSwitchCases: (switchNodeId: string, newOrder: readonly string[]) => void;
+  removeForkBranch: (forkNodeId: string, branchName: string) => void;
+  reorderForkBranches: (forkNodeId: string, newOrder: readonly string[]) => void;
+  renameForkBranch: (forkNodeId: string, oldName: string, newName: string) => void;
+  setForkCompete: (forkNodeId: string, compete: boolean) => void;
+  updateCatchConfig: (tryCatchNodeId: string, updates: { as?: string; compensate?: boolean }) => void;
+  removeCatchBlock: (tryCatchNodeId: string) => void;
+  updateForEachConfig: (forEachNodeId: string, updates: Partial<{ each: string; in: string; max_parallelism: number; batch_size: number; on_error: string }>) => void;
+  getGraphModel: () => WorkflowGraphModel;
 }
 
 export const CanvasActionsContext = createContext<CanvasActions | null>(null);

package/src/workflow/CanvasContextMenu.tsx

@@ -6,6 +6,7 @@ import { Separator } from "@base-ui/react/separator";
 import { cn } from "@stigmer/theme";
 import { useStigmerPortalContainer } from "../portal-container";
 import { TrashIcon, DuplicateIcon, PlusIcon } from "./canvas-icons";
+import { getShortcutHint } from "./shortcut-registry";
 
 // ---------------------------------------------------------------------------
 // Types
@@ -15,7 +16,8 @@ import { TrashIcon, DuplicateIcon, PlusIcon } from "./canvas-icons";
 export type CanvasContextMenuTarget =
   | { readonly type: "node"; readonly id: string; readonly taskName: string }
   | { readonly type: "edge"; readonly id: string }
-  | { readonly type: "pane" };
+  | { readonly type: "pane" }
+  | { readonly type: "selection"; readonly count: number };
 
 /** Props for {@link CanvasContextMenu}. */
 export interface CanvasContextMenuProps {
@@ -33,6 +35,16 @@ export interface CanvasContextMenuProps {
   readonly onDuplicateNode?: (nodeId: string) => void;
   /** Called to trigger the "add task after" flow (opens TaskPicker). */
   readonly onAddTaskAfter?: (nodeId: string) => void;
+  /** Called to toggle disabled state on a node. */
+  readonly onToggleDisabled?: (nodeId: string) => void;
+  /** Called to wrap a node in try/catch. */
+  readonly onWrapInTryCatch?: (nodeId: string) => void;
+  /** Called to copy a single node to clipboard. */
+  readonly onCopyNode?: (nodeId: string) => void;
+  /** Called to rename a node (triggers inline rename in inspector). */
+  readonly onRenameNode?: (nodeId: string) => void;
+  /** Called to view a node's YAML representation. */
+  readonly onViewYaml?: (nodeId: string) => void;
   /** Called to delete an edge. */
   readonly onDeleteEdge?: (edgeId: string) => void;
   /** Called to trigger the "insert task on edge" flow (opens TaskPicker). */
@@ -43,26 +55,24 @@ export interface CanvasContextMenuProps {
   readonly onSelectAll?: () => void;
   /** Called to trigger auto-layout. */
   readonly onAutoLayout?: () => void;
+  /** Called to paste from clipboard at current position. */
+  readonly onPaste?: () => void;
+  /** Whether the internal clipboard has content available to paste. */
+  readonly hasClipboard?: boolean;
+  /** Called to zoom/fit the canvas. */
+  readonly onFitView?: () => void;
+  /** Called to copy the current selection (multi-select). */
+  readonly onCopySelection?: () => void;
+  /** Called to duplicate the current selection (multi-select). */
+  readonly onDuplicateSelection?: () => void;
+  /** Called to disable/enable the current selection (multi-select). */
+  readonly onDisableSelection?: () => void;
+  /** Called to delete the current selection (multi-select). */
+  readonly onDeleteSelection?: () => void;
   /** Additional CSS class names for the popup. */
   readonly className?: string;
 }
 
-// ---------------------------------------------------------------------------
-// Platform detection & shortcut labels
-// ---------------------------------------------------------------------------
-
-const isMac =
-  typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/.test(navigator.platform);
-
-const MOD_LABEL = isMac ? "\u2318" : "Ctrl+";
-
-const SHORTCUT_LABELS = {
-  duplicate: `${MOD_LABEL}D`,
-  selectAll: `${MOD_LABEL}A`,
-  delete: isMac ? "\u232B" : "Del",
-  addTask: "N",
-} as const;
-
 // ---------------------------------------------------------------------------
 // Styling constants
 // ---------------------------------------------------------------------------
@@ -82,6 +92,11 @@ const DESTRUCTIVE_ITEM_CLASS = cn(
   "data-[highlighted]:bg-[var(--stgm-destructive,#ef4444)]/10",
 );
 
+const DISABLED_ITEM_CLASS = cn(
+  "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-xs text-[var(--stgm-muted-foreground,#737373)] outline-none",
+  "opacity-50",
+);
+
 const SHORTCUT_HINT_CLASS =
   "ml-auto pl-4 text-[10px] tracking-wide text-[var(--stgm-muted-foreground,#737373)]";
 
@@ -114,11 +129,23 @@ export const CanvasContextMenu = memo(function CanvasContextMenu({
   onDeleteNode,
   onDuplicateNode,
   onAddTaskAfter,
+  onToggleDisabled,
+  onWrapInTryCatch,
+  onCopyNode,
+  onRenameNode,
+  onViewYaml,
   onDeleteEdge,
   onInsertTaskOnEdge,
   onAddTaskAtPosition,
   onSelectAll,
   onAutoLayout,
+  onPaste,
+  hasClipboard,
+  onFitView,
+  onCopySelection,
+  onDuplicateSelection,
+  onDisableSelection,
+  onDeleteSelection,
   className,
 }: CanvasContextMenuProps) {
   const portalContainer = useStigmerPortalContainer();
@@ -161,6 +188,11 @@ export const CanvasContextMenu = memo(function CanvasContextMenu({
                 onDelete={onDeleteNode}
                 onDuplicate={onDuplicateNode}
                 onAddTaskAfter={onAddTaskAfter}
+                onToggleDisabled={onToggleDisabled}
+                onWrapInTryCatch={onWrapInTryCatch}
+                onCopy={onCopyNode}
+                onRename={onRenameNode}
+                onViewYaml={onViewYaml}
               />
             )}
             {target.type === "edge" && (
@@ -175,6 +207,18 @@ export const CanvasContextMenu = memo(function CanvasContextMenu({
                 onAddTask={onAddTaskAtPosition}
                 onSelectAll={onSelectAll}
                 onAutoLayout={onAutoLayout}
+                onPaste={onPaste}
+                hasClipboard={hasClipboard}
+                onFitView={onFitView}
+              />
+            )}
+            {target.type === "selection" && (
+              <SelectionMenuItems
+                count={target.count}
+                onCopy={onCopySelection}
+                onDuplicate={onDuplicateSelection}
+                onDisable={onDisableSelection}
+                onDelete={onDeleteSelection}
               />
             )}
           </Menu.Popup>
@@ -194,15 +238,35 @@ function NodeMenuItems({
   onDelete,
   onDuplicate,
   onAddTaskAfter,
+  onToggleDisabled,
+  onWrapInTryCatch,
+  onCopy,
+  onRename,
+  onViewYaml,
 }: {
   nodeId: string;
   taskName: string;
   onDelete?: (nodeId: string) => void;
   onDuplicate?: (nodeId: string) => void;
   onAddTaskAfter?: (nodeId: string) => void;
+  onToggleDisabled?: (nodeId: string) => void;
+  onWrapInTryCatch?: (nodeId: string) => void;
+  onCopy?: (nodeId: string) => void;
+  onRename?: (nodeId: string) => void;
+  onViewYaml?: (nodeId: string) => void;
 }) {
   return (
     <>
+      {onRename && (
+        <Menu.Item
+          className={ITEM_CLASS}
+          onClick={() => onRename(nodeId)}
+          label="Rename task"
+        >
+          <RenameIcon />
+          Rename
+        </Menu.Item>
+      )}
       {onDuplicate && (
         <Menu.Item
           className={ITEM_CLASS}
@@ -211,7 +275,18 @@ function NodeMenuItems({
         >
           <DuplicateIcon />
           Duplicate
-          <span className={SHORTCUT_HINT_CLASS}>{SHORTCUT_LABELS.duplicate}</span>
+          <span className={SHORTCUT_HINT_CLASS}>{getShortcutHint("duplicate")}</span>
+        </Menu.Item>
+      )}
+      {onCopy && (
+        <Menu.Item
+          className={ITEM_CLASS}
+          onClick={() => onCopy(nodeId)}
+          label="Copy task"
+        >
+          <CopyIcon />
+          Copy
+          <span className={SHORTCUT_HINT_CLASS}>{getShortcutHint("copy")}</span>
         </Menu.Item>
       )}
       {onAddTaskAfter && (
@@ -222,11 +297,41 @@ function NodeMenuItems({
         >
           <PlusIcon />
           Add task after…
+          <span className={SHORTCUT_HINT_CLASS}>{getShortcutHint("addTaskAfter")}</span>
         </Menu.Item>
       )}
-      {(onDuplicate || onAddTaskAfter) && onDelete && (
-        <Separator className={SEPARATOR_CLASS} />
+      <Separator className={SEPARATOR_CLASS} />
+      {onToggleDisabled && (
+        <Menu.Item
+          className={ITEM_CLASS}
+          onClick={() => onToggleDisabled(nodeId)}
+          label="Toggle disabled"
+        >
+          <DisableIcon />
+          Disable / Bypass
+        </Menu.Item>
+      )}
+      {onWrapInTryCatch && (
+        <Menu.Item
+          className={ITEM_CLASS}
+          onClick={() => onWrapInTryCatch(nodeId)}
+          label="Wrap in try/catch"
+        >
+          <ShieldIcon />
+          Wrap in Try/Catch
+        </Menu.Item>
+      )}
+      {onViewYaml && (
+        <Menu.Item
+          className={ITEM_CLASS}
+          onClick={() => onViewYaml(nodeId)}
+          label="View YAML"
+        >
+          <CodeIcon />
+          View YAML
+        </Menu.Item>
       )}
+      <Separator className={SEPARATOR_CLASS} />
       {onDelete && (
         <Menu.Item
           className={DESTRUCTIVE_ITEM_CLASS}
@@ -236,7 +341,7 @@ function NodeMenuItems({
         >
           <TrashIcon />
           Delete
-          <span className={SHORTCUT_HINT_CLASS}>{SHORTCUT_LABELS.delete}</span>
+          <span className={SHORTCUT_HINT_CLASS}>{getShortcutHint("delete")}</span>
         </Menu.Item>
       )}
     </>
@@ -293,10 +398,16 @@ function PaneMenuItems({
   onAddTask,
   onSelectAll,
   onAutoLayout,
+  onPaste,
+  hasClipboard,
+  onFitView,
 }: {
   onAddTask?: () => void;
   onSelectAll?: () => void;
   onAutoLayout?: () => void;
+  onPaste?: () => void;
+  hasClipboard?: boolean;
+  onFitView?: () => void;
 }) {
   return (
     <>
@@ -308,12 +419,22 @@ function PaneMenuItems({
         >
           <PlusIcon />
           Add task…
-          <span className={SHORTCUT_HINT_CLASS}>{SHORTCUT_LABELS.addTask}</span>
+          <span className={SHORTCUT_HINT_CLASS}>{getShortcutHint("addTaskAfter")}</span>
         </Menu.Item>
       )}
-      {onAddTask && (onSelectAll || onAutoLayout) && (
-        <Separator className={SEPARATOR_CLASS} />
+      {onPaste && (
+        <Menu.Item
+          className={hasClipboard ? ITEM_CLASS : DISABLED_ITEM_CLASS}
+          onClick={hasClipboard ? onPaste : undefined}
+          label="Paste"
+          aria-disabled={!hasClipboard}
+        >
+          <PasteIcon />
+          Paste
+          <span className={SHORTCUT_HINT_CLASS}>{getShortcutHint("paste")}</span>
+        </Menu.Item>
       )}
+      <Separator className={SEPARATOR_CLASS} />
       {onSelectAll && (
         <Menu.Item
           className={ITEM_CLASS}
@@ -322,7 +443,7 @@ function PaneMenuItems({
         >
           <SelectAllIcon />
           Select all
-          <span className={SHORTCUT_HINT_CLASS}>{SHORTCUT_LABELS.selectAll}</span>
+          <span className={SHORTCUT_HINT_CLASS}>{getShortcutHint("selectAll")}</span>
         </Menu.Item>
       )}
       {onAutoLayout && (
@@ -335,6 +456,74 @@ function PaneMenuItems({
           Auto-layout
         </Menu.Item>
       )}
+      {onFitView && (
+        <Menu.Item
+          className={ITEM_CLASS}
+          onClick={onFitView}
+          label="Zoom to fit"
+        >
+          <FitViewIcon />
+          Zoom to fit
+        </Menu.Item>
+      )}
+    </>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Selection menu items (multi-select right-click)
+// ---------------------------------------------------------------------------
+
+function SelectionMenuItems({
+  count,
+  onCopy,
+  onDuplicate,
+  onDisable,
+  onDelete,
+}: {
+  count: number;
+  onCopy?: () => void;
+  onDuplicate?: () => void;
+  onDisable?: () => void;
+  onDelete?: () => void;
+}) {
+  const label = `${count} task${count > 1 ? "s" : ""}`;
+  return (
+    <>
+      {onCopy && (
+        <Menu.Item className={ITEM_CLASS} onClick={onCopy} label={`Copy ${label}`}>
+          <CopyIcon />
+          Copy {label}
+          <span className={SHORTCUT_HINT_CLASS}>{getShortcutHint("copy")}</span>
+        </Menu.Item>
+      )}
+      {onDuplicate && (
+        <Menu.Item className={ITEM_CLASS} onClick={onDuplicate} label={`Duplicate ${label}`}>
+          <DuplicateIcon />
+          Duplicate {label}
+          <span className={SHORTCUT_HINT_CLASS}>{getShortcutHint("duplicate")}</span>
+        </Menu.Item>
+      )}
+      {onDisable && (
+        <Menu.Item className={ITEM_CLASS} onClick={onDisable} label={`Disable ${label}`}>
+          <DisableIcon />
+          Disable {label}
+        </Menu.Item>
+      )}
+      {(onCopy || onDuplicate || onDisable) && onDelete && (
+        <Separator className={SEPARATOR_CLASS} />
+      )}
+      {onDelete && (
+        <Menu.Item
+          className={DESTRUCTIVE_ITEM_CLASS}
+          onClick={onDelete}
+          label={`Delete ${label}`}
+        >
+          <TrashIcon />
+          Delete {label}
+          <span className={SHORTCUT_HINT_CLASS}>{getShortcutHint("delete")}</span>
+        </Menu.Item>
+      )}
     </>
   );
 }
@@ -362,3 +551,63 @@ function LayoutIcon() {
     </svg>
   );
 }
+
+function CopyIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <rect x="5" y="5" width="7" height="7" rx="1" />
+      <path d="M9 5V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h2" />
+    </svg>
+  );
+}
+
+function PasteIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M5.5 2H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H8.5" />
+      <rect x="5" y="1" width="4" height="2.5" rx="0.5" />
+    </svg>
+  );
+}
+
+function RenameIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M8.5 2.5l3 3M2 12l.7-2.8L9.6 2.3a1 1 0 0 1 1.4 0l1.7 1.7a1 1 0 0 1 0 1.4L5.8 12.3 3 13z" />
+    </svg>
+  );
+}
+
+function DisableIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <circle cx="7" cy="7" r="5" />
+      <path d="M3.5 10.5l7-7" />
+    </svg>
+  );
+}
+
+function ShieldIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M7 1.5L2 3.5v3c0 3.5 2.2 5.5 5 6.5 2.8-1 5-3 5-6.5v-3L7 1.5z" />
+    </svg>
+  );
+}
+
+function CodeIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M4.5 4L1.5 7l3 3M9.5 4l3 3-3 3M8 2l-2 10" />
+    </svg>
+  );
+}
+
+function FitViewIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M1.5 5V2.5a1 1 0 0 1 1-1H5M9 1.5h2.5a1 1 0 0 1 1 1V5M12.5 9v2.5a1 1 0 0 1-1 1H9M5 12.5H2.5a1 1 0 0 1-1-1V9" />
+      <rect x="4" y="4" width="6" height="6" rx="0.5" />
+    </svg>
+  );
+}