pmx-canvas 0.7.0 → 0.7.2

package/src/client/canvas/IntentLayer.tsx

@@ -2,7 +2,7 @@ import { useEffect } from 'preact/hooks';
 import { nodes } from '../state/canvas-store';
 import { hoveredIntentId, intents, removeIntent, type ClientIntent } from '../state/intent-store';
 import { vetoGhostIntent } from '../state/intent-bridge';
-import { getNodeIcon } from '../icons';
+import { getNodeIcon, IconClose } from '../icons';
 import { TYPE_LABELS } from '../types';
 import type { CanvasNodeState } from '../types';
 
@@ -102,7 +102,7 @@ function GhostInfo({ intent }: { intent: ClientIntent }) {
               void vetoGhostIntent(intent);
             }}
           >
-            ✕
+            <IconClose size={14} />
           </button>
         )}
       </div>

package/src/client/canvas/Presentation.tsx

@@ -1,9 +1,10 @@
-import { useEffect, useState } from 'preact/hooks';
+import { useEffect, useRef, useState } from 'preact/hooks';
 import { cameraSchema, interpolateCamera, resolveStop, type Camera, type Tour } from '../../shared/tour.js';
 import { canvasArea } from './canvas-area';
 import { cancelViewportAnimation, hasInitialServerLayout, nodes, viewport } from '../state/canvas-store';
 import { presenting, recordingCamera } from '../state/presentation';
 import { requestJson } from '../state/intent-bridge';
+import { usePanZoom } from './use-pan-zoom';
 
 declare global {
   interface Window {
@@ -22,6 +23,17 @@ export function Presentation() {
   const [error, setError] = useState('');
   const active = presenting.value;
   const ready = hasInitialServerLayout.value;
+  const frame = useRef(0);
+  const moveCamera = (camera: Camera) => {
+    cancelAnimationFrame(frame.current);
+    viewport.value = camera;
+  };
+  // A separate gesture surface keeps cards read-only and camera changes local.
+  const navigationRef = usePanZoom({
+    viewport,
+    onViewportChange: moveCamera,
+    onViewportCommit: moveCamera,
+  });
   useEffect(() => {
     const params = new URLSearchParams(location.search);
     presenting.value = params.get('present') === '1';
@@ -76,20 +88,20 @@ export function Presentation() {
     const from = { ...viewport.value };
     const start = performance.now();
     const duration = (stop.duration ?? 1) * 1000;
-    let frame = 0;
     const tick = (now: number) => {
       if (recordingCamera.value) return;
       const t = duration === 0 ? 1 : Math.min(1, (now - start) / duration);
       viewport.value = interpolateCamera(from, target, t, area.width, area.height, stop.easing, stop.pullback);
-      if (t < 1) frame = requestAnimationFrame(tick);
+      if (t < 1) frame.current = requestAnimationFrame(tick);
     };
-    frame = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(frame);
+    frame.current = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frame.current);
   }, [active, index, tour]);
   useEffect(() => {
     if (!active) return;
     const key = (event: KeyboardEvent) => {
       event.stopImmediatePropagation();
+      if (event.target instanceof HTMLButtonElement && ['Enter', ' '].includes(event.key)) return;
       if (['Escape', 'ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp', ' '].includes(event.key))
         event.preventDefault();
       if (event.key === 'Escape') presenting.value = false;
@@ -100,9 +112,27 @@ export function Presentation() {
     document.addEventListener('keydown', key, true);
     return () => document.removeEventListener('keydown', key, true);
   }, [active, tour]);
-  return active && error ? (
-    <div class="presentation-error" role="alert">
-      {error}
-    </div>
+  return active ? (
+    <>
+      {!recordingCamera.value && (
+        <div
+          class="presentation-navigation"
+          ref={navigationRef}
+          onPointerDown={(event) => {
+            if (event.button === 1 || event.button === 2) cancelAnimationFrame(frame.current);
+          }}
+          onContextMenu={(event) => event.preventDefault()}
+        >
+          <button type="button" class="presentation-exit" onClick={() => (presenting.value = false)}>
+            Exit presentation
+          </button>
+        </div>
+      )}
+      {error && (
+        <div class="presentation-error" role="alert">
+          {error}
+        </div>
+      )}
+    </>
   ) : null;
 }

package/src/client/canvas/SelectionBar.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from 'preact/hooks';
-import { IconArrange } from '../icons';
+import { IconArrange, IconClose } from '../icons';
 import { attentionHistoryOpen } from '../state/attention-store';
 import {
   addContextPins,
@@ -8,7 +8,6 @@ import {
   clearSelection,
   contextPinnedNodeIds,
   distributeSelection,
-  removeNode,
   selectedNodeIds,
 } from '../state/canvas-store';
 import { createEdgeFromClient, createGroupFromClient, removeNodeFromClient } from '../state/intent-bridge';
@@ -51,7 +50,6 @@ export function SelectionBar() {
   const handleDelete = useCallback(() => {
     const ids = Array.from(selectedNodeIds.value);
     for (const id of ids) {
-      removeNode(id);
       void removeNodeFromClient(id);
     }
     clearSelection();
@@ -206,7 +204,7 @@ export function SelectionBar() {
       </BarHint>
       <BarHint label="Clear selection" shortcut="Esc" side="up">
         <button type="button" class="selection-bar-icon" onClick={clearSelection} aria-label="Clear selection">
-          ×
+          <IconClose size={14} />
         </button>
       </BarHint>
     </div>

package/src/client/canvas/SessionPanel.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'preact/hooks';
+import { IconChevronRight, IconUndo } from '../icons';
 import { useNow } from './use-now';
 import { agentIdentityHue, agentPhaseLabel } from '../../shared/agent-presence.js';
 import { formatCountdown, gateRemainingMs } from '../../shared/approval-gates.js';
@@ -301,7 +302,7 @@ function TimelineRow({ entry }: { entry: TimelineEntry }) {
             data-testid="timeline-undo"
             onClick={() => void undoAgentEdit(entry)}
           >
-            ↩ undo this edit
+            <IconUndo size={14} /> undo this edit
           </button>
         )}
         {undone && <div class="session-timeline-undone">undone · steering sent</div>}
@@ -387,8 +388,9 @@ export function SessionPanel() {
           class="session-collapse"
           onClick={() => setManuallyOpened(false)}
           title="Collapse session panel"
+          aria-label="Collapse session panel"
         >
-          ›
+          <IconChevronRight />
         </button>
       </header>
 
@@ -406,7 +408,7 @@ export function SessionPanel() {
               Agent edit on top: {undoable.body}
             </span>
             <button type="button" class="session-undo-btn" onClick={() => void undoAgentEdit(undoable)}>
-              ↩ Undo
+              <IconUndo size={14} /> Undo
             </button>
           </div>
         );
@@ -455,7 +457,7 @@ export function SessionPanel() {
                     {summary}
                   </span>
                   <span class={`session-section-chevron${showList ? ' is-open' : ''}`} aria-hidden="true">
-                    ›
+                    <IconChevronRight size={14} />
                   </span>
                 </button>
                 {showList &&

package/src/client/canvas/SessionReceipt.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'preact/hooks';
 import { dismissSessionReceipt, sessionReceipt } from '../state/session-store';
+import { IconClose } from '../icons';
 
 /**
  * Session receipt (rail-chrome-v2 phase 5, design item 2): a dismissible card
@@ -74,7 +75,7 @@ export function SessionReceipt({ onOpenSnapshots }: { onOpenSnapshots: () => voi
           onClick={dismissSessionReceipt}
           aria-label="Dismiss receipt"
         >
-          ×
+          <IconClose />
         </button>
       </div>
       <div class="session-receipt-tiles">

package/src/client/canvas/SnapshotPanel.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { IconClose } from '../icons';
 import {
   type CanvasSnapshotInfo,
   deleteSnapshot,
@@ -183,7 +184,7 @@ export function SnapshotPanel({
           aria-label="Delete snapshot"
           disabled={restoringId !== null}
         >
-          ✕
+          <IconClose size={14} />
         </button>
       </>
     );
@@ -195,7 +196,7 @@ export function SnapshotPanel({
         <span class="snapshot-panel-sub">snapshots + sessions</span>
         <span class="snapshot-panel-spacer" />
         <button type="button" class="snapshot-panel-close" onClick={onClose} title="Close" aria-label="Close history">
-          ×
+          <IconClose />
         </button>
       </div>
 

package/src/client/canvas/ToolRail.tsx

@@ -21,6 +21,7 @@ import {
   IconSun,
   IconTextAnnotation,
   IconTrace,
+  IconUpload,
 } from '../icons';
 import {
   autoArrange,
@@ -337,7 +338,7 @@ export function ToolRail({
           <IconNodeFile size={15} />
         </RailButton>
         <RailButton label="Attach document" onClick={() => documentInput.current?.click()}>
-          <span aria-hidden="true">↥</span>
+          <IconUpload size={15} />
         </RailButton>
         <input
           ref={documentInput}

package/src/client/canvas/TopBar.tsx

@@ -4,7 +4,7 @@ import { BoardSwitcher } from './BoardSwitcher';
 import type { ComponentChildren } from 'preact';
 import { presenting } from '../state/presentation';
 import { useEffect, useState } from 'preact/hooks';
-import { IconFitAll, IconZoomIn, IconZoomOut } from '../icons';
+import { IconFitAll, IconZoomIn, IconZoomOut, IconClose } from '../icons';
 import {
   animateViewport,
   connectionStatus,
@@ -121,7 +121,7 @@ function AgentChip() {
                     void endSession({ source: session.source, agentId: session.agentId });
                   }}
                 >
-                  ×
+                  <IconClose size={14} />
                 </button>
               </span>
             </BarHint>

package/src/client/icons.tsx

@@ -11,16 +11,133 @@ const defaults = {
   'stroke-width': '1.5',
   'stroke-linecap': 'round',
   'stroke-linejoin': 'round',
+  'aria-hidden': 'true',
 } as const;
 
 function Icon({ size = 16, children, ...rest }: IconProps & { children: JSX.Element | JSX.Element[] }): JSX.Element {
   return (
-    <svg width={size} height={size} viewBox="0 0 16 16" {...defaults} {...rest}>
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      style={{ verticalAlign: 'middle', flexShrink: 0 }}
+      {...defaults}
+      {...rest}
+    >
       {children}
     </svg>
   );
 }
 
+export function IconClose(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <path d="m4 4 8 8M12 4l-8 8" />
+    </Icon>
+  );
+}
+
+export function IconPlus(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <path d="M8 2v12M2 8h12" />
+    </Icon>
+  );
+}
+
+export function IconPlusCircle(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <circle cx="8" cy="8" r="6" />
+      <path d="M8 5v6M5 8h6" />
+    </Icon>
+  );
+}
+
+export function IconChevronRight(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <polyline points="6 3 11 8 6 13" />
+    </Icon>
+  );
+}
+
+export function IconMore(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <circle cx="3" cy="8" r="0.75" />
+      <circle cx="8" cy="8" r="0.75" />
+      <circle cx="13" cy="8" r="0.75" />
+    </Icon>
+  );
+}
+
+export function IconExternalLink(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <path d="M9 2h5v5M14 2 7 9M6 3H2v11h11v-4" />
+    </Icon>
+  );
+}
+
+export function IconExpand(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <path d="M9 2h5v5M14 2l-5 5M7 14H2V9M2 14l5-5" />
+    </Icon>
+  );
+}
+
+export function IconArrowLeft(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <path d="M14 8H2m5-5-5 5 5 5" />
+    </Icon>
+  );
+}
+
+export function IconRefresh(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <path d="M13.5 6A5.5 5.5 0 1 0 13 11M14 2v4h-4" />
+    </Icon>
+  );
+}
+
+export function IconUndo(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <path d="M6 2 2 6l4 4M2 6h7a4 4 0 0 1 0 8" />
+    </Icon>
+  );
+}
+
+export function IconSparkle(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <path d="m8 1 2 5 5 2-5 2-2 5-2-5-5-2 5-2Z" />
+    </Icon>
+  );
+}
+
+/** Upload into a tray — attach a document. */
+export function IconUpload(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <path d="M8 10V2M4.5 5.5 8 2l3.5 3.5M2 10v3.5h12V10" />
+    </Icon>
+  );
+}
+
+/** Dropdown disclosure, sized like the other toolbar icons. */
+export function IconChevronDown(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <polyline points="3 6 8 11 13 6" />
+    </Icon>
+  );
+}
+
 /** Expand-arrows — fit all nodes */
 export function IconFitAll(p: IconProps): JSX.Element {
   return (

package/src/client/nodes/AttachmentNode.tsx

@@ -11,7 +11,6 @@ export function AttachmentNode({ node, expanded = false }: { node: CanvasNodeSta
   const boardId = activeBoardId.value;
   const [job, setJob] = useState<DocumentImport | null>(null);
   const [review, setReview] = useState(expanded);
-  const [consent, setConsent] = useState(false);
   const [busy, setBusy] = useState(false);
   useEffect(() => {
     let current = true;
@@ -53,7 +52,6 @@ export function AttachmentNode({ node, expanded = false }: { node: CanvasNodeSta
     setBusy(false);
     if (result?.import) {
       setJob(result.import);
-      setConsent(false);
       setReview(false);
       if (expanded && action === 'commit') collapseExpandedNode();
     }
@@ -74,22 +72,19 @@ export function AttachmentNode({ node, expanded = false }: { node: CanvasNodeSta
         Download original · {Math.ceil(Number(node.data.size ?? 0) / 1024)} KB
       </a>
       {job?.reason && <p>{job.reason}</p>}
-      {canRequest && !consent && (
-        <button type="button" class="home-board-action" onClick={() => setConsent(true)}>
-          Ask agent to import
-        </button>
-      )}
-      {consent && (
+      {canRequest && (
         <>
-          <p>
-            The connected agent may send this file to its model provider. It needs file-reading tools and access to the
-            original. Canvas does not convert files itself.
+          <p id={`import-consent-${node.id}`}>
+            Asking the agent to import allows it to process this file with its tools and model provider.
           </p>
-          <button type="button" class="home-board-action" disabled={busy} onClick={() => void act('request')}>
-            Allow processing & request
-          </button>
-          <button type="button" class="home-board-action" onClick={() => setConsent(false)}>
-            Not now
+          <button
+            type="button"
+            class="attachment-button is-primary"
+            aria-describedby={`import-consent-${node.id}`}
+            disabled={busy}
+            onClick={() => void act('request')}
+          >
+            Ask agent to import
           </button>
         </>
       )}
@@ -98,17 +93,17 @@ export function AttachmentNode({ node, expanded = false }: { node: CanvasNodeSta
           No automatic extraction. Ask your connected agent to check its pending steering or use canvas_import list.
         </p>
       )}
-      {job?.status === 'drafted' && (
+      {job?.status === 'drafted' && !review && (
         <button
           type="button"
-          class="home-board-action"
+          class="attachment-button is-primary"
           onClick={() => (expanded ? setReview(true) : expandNode(node.id))}
         >
           Review Markdown · {job.sections.length} {job.sections.length === 1 ? 'card' : 'cards'}
         </button>
       )}
       {job && ['requested', 'drafted'].includes(job.status) && (
-        <button type="button" class="home-board-action" disabled={busy} onClick={() => void act('cancel')}>
+        <button type="button" class="attachment-button" disabled={busy} onClick={() => void act('cancel')}>
           Cancel import
         </button>
       )}
@@ -130,17 +125,19 @@ export function AttachmentNode({ node, expanded = false }: { node: CanvasNodeSta
               <pre>{section.markdown}</pre>
             </section>
           ))}
-          <button type="button" class="home-board-action" onClick={() => setReview(false)}>
-            Close review
-          </button>
-          <button
-            type="button"
-            class="home-view-new"
-            disabled={busy || boardId !== job.boardId}
-            onClick={() => void act('commit')}
-          >
-            Add to board
-          </button>
+          <div class="attachment-review-actions">
+            <button type="button" class="attachment-button" onClick={() => setReview(false)}>
+              Close review
+            </button>
+            <button
+              type="button"
+              class="attachment-button is-primary"
+              disabled={busy || boardId !== job.boardId}
+              onClick={() => void act('commit')}
+            >
+              Add to board
+            </button>
+          </div>
         </div>
       )}
     </div>

package/src/client/nodes/BoardNode.tsx

@@ -1,5 +1,6 @@
 import type { CanvasNodeState } from '../types';
 import { boardList, openBoard } from '../state/boards-store';
+import { IconExternalLink } from '../icons';
 
 /** Native text-only cross-board link. Target identity is the durable board id. */
 export function BoardNode({ node }: { node: CanvasNodeState }) {
@@ -28,7 +29,7 @@ export function BoardNode({ node }: { node: CanvasNodeState }) {
         onClick={() => target && void openBoard(target.id)}
       >
         {target ? 'Open board' : 'Target unavailable'}
-        {target && <span aria-hidden="true">↗</span>}
+        {target && <IconExternalLink size={14} />}
       </button>
     </div>
   );

package/src/client/nodes/ExtAppFrame.tsx

@@ -2,6 +2,7 @@ import type { CallToolResult, ListToolsResult, RequestId, Tool } from '@modelcon
 import { ListToolsRequestSchema } from '@modelcontextprotocol/sdk/types.js';
 import { AppBridge, PostMessageTransport, buildAllowAttribute } from '@modelcontextprotocol/ext-apps/app-bridge';
 import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { IconClose } from '../icons';
 import {
   AX_SURFACE_ACK_SOURCE,
   AX_SURFACE_EMIT_SOURCE,
@@ -1429,6 +1430,7 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
           <button
             type="button"
             onClick={() => setError(null)}
+            aria-label="Dismiss error"
             style={{
               background: 'none',
               border: 'none',
@@ -1438,7 +1440,7 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
               padding: '0 2px',
             }}
           >
-            ×
+            <IconClose size={14} />
           </button>
         </div>
       )}

package/src/client/nodes/FileNode.tsx

@@ -1,4 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'preact/hooks';
+import { IconPlusCircle, IconRefresh } from '../icons';
+import { delimiterForPath, parseDelimitedText } from '../../shared/delimited-text';
 import { updateNodeData } from '../state/canvas-store';
 import { iframeMode } from '../state/iframe-mode';
 import { fetchFile, updateNodeFromClient } from '../state/intent-bridge';
@@ -44,82 +46,6 @@ function langFromPath(path: string): string {
 /** Rendered-row ceiling for delimited files — a 200k-row CSV must not lock the browser. */
 const MAX_TABLE_ROWS = 500;
 
-export interface DelimitedTable {
-  header: string[];
-  /** Rectangular: every row padded (short) or truncated (long) to the header width. */
-  rows: string[][];
-}
-
-/** Column delimiter for a delimited-data path, or null when the file is not one. */
-function delimiterForPath(path: string): string | null {
-  const lower = path.toLowerCase();
-  if (lower.endsWith('.csv')) return ',';
-  if (lower.endsWith('.tsv')) return '\t';
-  return null;
-}
-
-/**
- * RFC4180-ish delimited-text parser. Quoted fields may contain the delimiter,
- * newlines, and `""` escapes; CRLF, LF and lone CR all end a record; a trailing
- * newline produces no phantom empty row. Ragged records are squared off against
- * the header width instead of throwing.
- */
-export function parseDelimitedText(text: string, delimiter: string): DelimitedTable {
-  const records: string[][] = [];
-  let row: string[] = [];
-  let field = '';
-  let quoted = false;
-  // Tracks whether the current record consumed anything — distinguishes a real
-  // empty-quoted record from the dangling state after a terminating newline.
-  let started = false;
-
-  for (let i = 0; i < text.length; i++) {
-    const char = text[i];
-    started = true;
-    if (quoted) {
-      if (char === '"') {
-        if (text[i + 1] === '"') {
-          field += '"';
-          i++;
-        } else {
-          quoted = false;
-        }
-      } else if (char === '\r' && text[i + 1] === '\n') {
-        field += '\n';
-        i++;
-      } else {
-        field += char;
-      }
-      continue;
-    }
-    if (char === '"' && field === '') {
-      quoted = true;
-    } else if (char === delimiter) {
-      row.push(field);
-      field = '';
-    } else if (char === '\n' || char === '\r') {
-      if (char === '\r' && text[i + 1] === '\n') i++;
-      row.push(field);
-      field = '';
-      records.push(row);
-      row = [];
-      started = false;
-    } else {
-      field += char;
-    }
-  }
-  if (started) {
-    row.push(field);
-    records.push(row);
-  }
-
-  const header = records.shift() ?? [];
-  return {
-    header,
-    rows: records.map((record) => Array.from({ length: header.length }, (_, i) => record[i] ?? '')),
-  };
-}
-
 /** Human-readable byte size, e.g. `4.2 MB`. */
 export function formatBytes(bytes: number): string {
   if (!Number.isFinite(bytes) || bytes < 0) return '';
@@ -349,7 +275,7 @@ function TextFileNode({ node, expanded = false }: { node: CanvasNodeState; expan
             flexShrink: 0,
           }}
         >
-          ⊕
+          <IconPlusCircle size={14} />
         </button>
         <button
           type="button"
@@ -365,7 +291,7 @@ function TextFileNode({ node, expanded = false }: { node: CanvasNodeState; expan
             flexShrink: 0,
           }}
         >
-          ↻
+          <IconRefresh size={14} />
         </button>
       </div>
 

package/src/client/nodes/ImageNode.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { IconRefresh } from '../icons';
 import type { CanvasNodeState } from '../types';
 import { getImageNodeWarnings } from './image-warnings';
 
@@ -140,7 +141,7 @@ export function ImageNode({ node, expanded = false }: { node: CanvasNodeState; e
             {sizeLabel && <span>{sizeLabel}</span>}
             {zoom !== 1 && (
               <button type="button" class="image-node-zoom-reset" onClick={resetView} title="Reset zoom">
-                {zoomPct}% ↺
+                {zoomPct}% <IconRefresh size={14} />
               </button>
             )}
           </span>

package/src/client/nodes/MarkdownNode.tsx

@@ -1,5 +1,6 @@
 import type { JSX } from 'preact';
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { IconArrowLeft } from '../icons';
 import { expandNode, updateNodeData } from '../state/canvas-store';
 import { fetchFile, renderMarkdown, saveFile, updateNodeFromClient } from '../state/intent-bridge';
 import type { CanvasNodeState } from '../types';
@@ -254,7 +255,7 @@ export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState
       <div class="md-editor-expanded" onKeyDown={handleKeyDown}>
         <div class="md-editor-toolbar">
           <button type="button" class="md-toolbar-btn" onClick={() => setSourceMode(false)}>
-            ← Back to document
+            <IconArrowLeft size={14} /> Back to document
           </button>
           <div style={{ display: 'flex', gap: '6px', alignItems: 'center' }}>
             {path && <span class="md-toolbar-path">{path.split('/').pop()}</span>}