@1agh/maude 1.2.0 → 1.3.0

package/apps/studio/client/app.jsx

@@ -33,6 +33,8 @@ import { sizingModeOf, sizingModePatch } from '../sizing-mode.ts';
 // above (a type-only SyncStatusSnapshot import that Bun erases).
 import { syncPresentation } from '../sync/presentation.ts';
 import { canvasUrl } from './canvas-url.js';
+import { applyEditRequest } from './apply-edit-request.ts';
+import { createIndexLoader } from './index-loader.ts';
 import {
   BROWSER_CAPTURE_FORMATS,
   BROWSER_SERVABLE_FORMATS,
@@ -50,6 +52,8 @@ import GitPanel from './panels/GitPanel.jsx';
 import SyncConsentDialog from './panels/SyncConsentDialog.jsx';
 import SyncPanel from './panels/SyncPanel.jsx';
 import CloudBar from './panels/CloudBar.jsx';
+import { buildShareLinks, normalizeOpenPath, readOpenParam, withOpenParam } from './share-link.js';
+import { ShareDialog, copyShareLink } from './share-dialog.jsx';
 import IdentityBar from './panels/IdentityBar.jsx';
 import OnboardingWizard from './panels/OnboardingWizard.jsx';
 import { ReadinessDialog } from './panels/ReadinessList.jsx';
@@ -119,6 +123,8 @@ import { COLLAB_TOUR } from './tour/collab-tour.js';
 import { TourOverlay } from './tour/overlay.jsx';
 import { QUICK_SETUP_TOUR } from './tour/quick-setup-tour.js';
 import { USAGE_TOUR } from './tour/usage-tour.js';
+import { dismissNotice, NotificationHost, notify, notifyCanvasText } from '../notifications.tsx';
+import { acceptCanvasNotice } from '../canvas-notice-message.ts';
 import { ExportBadge, ExportPanel, ExportToast, useExportCenter } from './export-center.jsx';
 import { ReportBugDialog } from './report-bug.jsx';
 import { useWhatsNew, WhatsNewPanel, WhatsNewToast } from './whats-new.jsx';
@@ -202,6 +208,7 @@ function DockSlot({ side, width, open, ids, activeId, onPick, children, labels =
               key={id}
               type="button"
               role="tab"
+              data-testid={`dock-tab-${id}`}
               aria-selected={activeId === id}
               className={'st-docktab' + (activeId === id ? ' is-active' : '')}
               onClick={() => onPick(id)}
@@ -245,6 +252,18 @@ function pathTestIdSlug(p) {
     .toLowerCase()
     .replace(/^-+|-+$/g, '');
 }
+// A layers tree's identity: its element ids in document order. Two trees with
+// the same signature are the same DOM as far as positional ids go.
+function layersTreeSig(nodes) {
+  const ids = [];
+  (function walk(list) {
+    for (const n of list || []) {
+      ids.push(n?.id ?? '');
+      walk(n?.children);
+    }
+  })(nodes);
+  return ids.join(',');
+}
 // Bun's `define` substitutes this at build time (see build.ts); falls back when
 // the bundle is consumed in a context that hasn't run the build.
 const MDCC_VERSION = typeof __MDCC_VERSION__ !== 'undefined' ? __MDCC_VERSION__ : 'dev';
@@ -331,58 +350,9 @@ function basename(p) {
   return p.split('/').pop();
 }
 
-// DDR-150 dogfood — a transient shell toast for timeline/inline-edit op results.
-// The clip ops used to console.warn their failures (a 422 "series clip can't
-// move" looked like "the button does nothing"). Self-contained DOM (no React
-// state), mirrors the canvas-side showCanvasToast.
-// `action` (feature-file-tree-drag-drop-folders, Task 10) — optional
-// `{ label, onClick }` for an inline undo affordance (the move toast). Absent
-// for every other caller, so their toast stays the plain auto-dismissing text
-// bubble this always was.
+// Keep call sites (including Undo actions) on the shared notification stack.
 function shellToast(message, ok = false, action) {
-  if (typeof document === 'undefined') return;
-  let el = document.getElementById('st-op-toast');
-  if (!el) {
-    el = document.createElement('div');
-    el.id = 'st-op-toast';
-    el.setAttribute('role', 'status');
-    el.style.cssText =
-      'position:fixed;left:50%;bottom:64px;transform:translateX(-50%);z-index:80;' +
-      'display:flex;align-items:center;gap:10px;max-width:440px;padding:8px 14px;' +
-      'border-radius:8px;font:12px/1.45 var(--font-mono,monospace);' +
-      'box-shadow:0 8px 28px rgba(0,0,0,.34);pointer-events:none;opacity:0;transition:opacity 140ms ease;';
-    document.body.appendChild(el);
-  }
-  el.style.background = ok ? '#1d3524' : '#3a1d1d';
-  el.style.color = ok ? '#b7e4c0' : '#f1b8b8';
-  el.textContent = '';
-  const text = document.createElement('span');
-  text.textContent = message;
-  el.appendChild(text);
-  if (action) {
-    const btn = document.createElement('button');
-    btn.type = 'button';
-    btn.textContent = action.label;
-    btn.style.cssText =
-      'pointer-events:auto;background:none;border:0;text-decoration:underline;' +
-      'color:inherit;font:inherit;cursor:pointer;padding:0;';
-    btn.onclick = () => {
-      action.onClick();
-      el.style.opacity = '0';
-      el.style.pointerEvents = 'none';
-    };
-    el.appendChild(btn);
-  }
-  el.style.opacity = '1';
-  el.style.pointerEvents = action ? 'auto' : 'none';
-  clearTimeout(shellToast._t);
-  shellToast._t = setTimeout(
-    () => {
-      el.style.opacity = '0';
-      el.style.pointerEvents = 'none';
-    },
-    action ? 6000 : 3200
-  );
+  notify({ title: message, kind: ok ? 'success' : 'error', action });
 }
 
 // DDR-223 (issue #93, supersedes DDR-187's boot half) — one-time first-run
@@ -402,48 +372,24 @@ function browseFirstRunHint(readOnly = false) {
   } catch {
     return;
   }
-  if (document.getElementById('st-browse-hint')) return;
-  const el = document.createElement('div');
-  el.id = 'st-browse-hint';
-  el.setAttribute('role', 'status');
-  el.style.cssText =
-    'position:fixed;left:50%;bottom:64px;transform:translateX(-50%);z-index:81;' +
-    'display:flex;align-items:center;gap:10px;max-width:520px;padding:10px 14px;border-radius:10px;' +
-    'font:12px/1.5 var(--font-ui,system-ui,sans-serif);background:var(--surface-2,#1b1e24);' +
-    'color:var(--text-1,#e7eaf0);border:1px solid var(--border-1,#333a45);' +
-    'box-shadow:0 10px 34px rgba(0,0,0,.42);opacity:0;transition:opacity 160ms ease;';
-  const kbd =
-    '<kbd style="padding:1px 6px;border-radius:5px;border:1px solid var(--border-1,#333a45);' +
-    'background:var(--surface-3,#262b33);font-family:var(--font-mono,monospace)">V</kbd>';
-  el.innerHTML =
-    // Cloud Phase 25 C2 — a viewer selects to inspect, never to edit; the
-    // hint must not promise an editor the role doesn't have.
-    (readOnly
-      ? `<span>Your mock is <strong>live</strong> — click things to try it. Press ${kbd} to select &amp; inspect.</span>`
-      : '<span>You’re in <strong>Edit</strong> — click selects, like Figma. ' +
-        'Switch to <strong>Preview</strong> in the toolbar to use the live mock.</span>') +
-    '<button type="button" aria-label="Dismiss" style="background:none;border:none;color:inherit;' +
-    'cursor:pointer;font-size:15px;line-height:1;opacity:.65;padding:2px">×</button>';
+  if (browseFirstRunHint.active) return;
+  browseFirstRunHint.active = true;
   const dismiss = () => {
-    try {
-      localStorage.setItem(MODE_HINT_SEEN, '1');
-    } catch {
-      /* private mode */
-    }
-    el.style.opacity = '0';
-    setTimeout(() => el.remove(), 200);
+    browseFirstRunHint.active = false;
+    try { localStorage.setItem(MODE_HINT_SEEN, '1'); } catch {}
     document.removeEventListener('keydown', onV, true);
   };
   const onV = (e) => {
-    if ((e.key === 'v' || e.key === 'V') && !e.metaKey && !e.ctrlKey && !e.altKey) dismiss();
+    if ((e.key === 'v' || e.key === 'V') && !e.metaKey && !e.ctrlKey && !e.altKey) {
+      dismissNotice('mode-hint');
+      dismiss();
+    }
   };
-  el.querySelector('button')?.addEventListener('click', dismiss);
   if (readOnly) document.addEventListener('keydown', onV, true);
-  document.body.appendChild(el);
-  requestAnimationFrame(() => {
-    el.style.opacity = '1';
-  });
-  setTimeout(dismiss, 9000);
+  notify({ id: 'mode-hint', title: readOnly ? 'Your mock is live' : 'You’re in Edit',
+    description: readOnly ? 'Click things to try it. Press V to select & inspect.'
+      : 'Click selects, like Figma. Switch to Preview in the toolbar to use the live mock.',
+    onDismiss: dismiss });
 }
 
 // Strip canvas extensions for display. `Canvas Viewport.tsx` → `Canvas Viewport`.
@@ -2368,6 +2314,10 @@ function FileRow({
   // feature-file-tree-drag-drop-folders (Task 9) — the KEYBOARD path for
   // "Move to…" (drag-only fails WCAG 2.1.1). Same eligibility as dragging.
   const canMove = draggableRow && typeof menu !== 'undefined';
+  // Plan T17/L03 — a supporting file (notes, styles, images, media) in a
+  // canvas folder gets the same ⋯ menu: rename, move, delete.
+  const supporting = !isCanvas && !!pKind && !sidecar && typeof menu !== 'undefined';
+  const canShare = typeof menu !== 'undefined' && kind !== 'runtime';
   const fileDir = file.path.split('/').slice(0, -1).join('/');
   // Stable hook for the desktop E2E harness (data-testid convention — see the
   // `desktop-e2e` skill): canvas rows only, slug derived from the relative path
@@ -2385,7 +2335,7 @@ function FileRow({
     <button
       type="button"
       role="treeitem"
-      data-testid={testId}
+      data-testid={testId ?? (supporting ? `file-row-${pathTestIdSlug(file.path)}` : undefined)}
       aria-selected={isSel}
       aria-disabled={inert ? 'true' : undefined}
       aria-busy={isBusy || undefined}
@@ -2404,7 +2354,17 @@ function FileRow({
         else if (pKind) onPreview?.(file.path);
       }}
       onContextMenu={
-        canMove ? (e) => menu.openAt(e, { kind: 'file', path: file.path, dir: fileDir }) : undefined
+        canShare
+          ? (e) =>
+              menu.openAt(e, {
+                kind: 'file',
+                path: file.path,
+                dir: fileDir,
+                canMove: canMove || supporting,
+                supporting,
+                name: file.name,
+              })
+          : undefined
       }
       {...dragHandlers}
     >
@@ -2438,21 +2398,30 @@ function FileRow({
       {oc > 0 && <span className="st-row-badge">{oc}</span>}
     </button>
   );
-  if (!canDelete && !canMove) return row;
+  if (!canDelete && !canShare) return row;
   // Sibling menu/delete buttons (can't nest a button in the row button). The
   // wrapper is presentational so the treeitem stays the tree's child for a11y.
   return (
     <div className="st-row-wrap" role="none">
       {row}
-      {canMove && (
+      {canShare && (
         <button
           type="button"
           className={'st-row-menu-btn' + (canDelete ? ' has-delete-sibling' : '')}
           data-testid={`tree-row-menu-${pathTestIdSlug(file.path)}`}
-          title={`Move ${label}…`}
+          title={`Actions for ${label}`}
           aria-label={`Actions for ${label}`}
           aria-haspopup="menu"
-          onClick={(e) => menu.openAt(e, { kind: 'file', path: file.path, dir: fileDir })}
+          onClick={(e) =>
+            menu.openAt(e, {
+              kind: 'file',
+              path: file.path,
+              dir: fileDir,
+              canMove: canMove || supporting,
+              supporting,
+              name: file.name,
+            })
+          }
         >
           <Icon d="M12 6a1 1 0 100-2 1 1 0 000 2zM12 13a1 1 0 100-2 1 1 0 000 2zM12 20a1 1 0 100-2 1 1 0 000 2z" size={12} />
         </button>
@@ -2526,6 +2495,7 @@ function CanvasRow({
   const isDragging = drag?.draggedPath === primary.path;
   const isBusy = drag?.busyPath === primary.path;
   const canMove = draggableRow && typeof menu !== 'undefined';
+  const canShare = typeof menu !== 'undefined' && kind !== 'runtime';
   const primaryDir = primary.path.split('/').slice(0, -1).join('/');
   const row = (
     <button
@@ -2552,7 +2522,7 @@ function CanvasRow({
         onOpen(primary.path);
       }}
       onContextMenu={
-        canMove ? (e) => menu.openAt(e, { kind: 'file', path: primary.path, dir: primaryDir }) : undefined
+        canShare ? (e) => menu.openAt(e, { kind: 'file', path: primary.path, dir: primaryDir, canMove }) : undefined
       }
       {...dragHandlers}
     >
@@ -2594,17 +2564,17 @@ function CanvasRow({
   );
   return (
     <Fragment>
-      {canMove ? (
+      {canShare ? (
         <div className="st-row-wrap" role="none">
           {row}
           <button
             type="button"
             className="st-row-menu-btn"
             data-testid={`tree-row-menu-${pathTestIdSlug(primary.path)}`}
-            title={`Move ${displayName(primary.name)}…`}
+            title={`Actions for ${displayName(primary.name)}`}
             aria-label={`Actions for ${displayName(primary.name)}`}
             aria-haspopup="menu"
-            onClick={(e) => menu.openAt(e, { kind: 'file', path: primary.path, dir: primaryDir })}
+            onClick={(e) => menu.openAt(e, { kind: 'file', path: primary.path, dir: primaryDir, canMove })}
           >
             <Icon d="M12 6a1 1 0 100-2 1 1 0 000 2zM12 13a1 1 0 100-2 1 1 0 000 2zM12 20a1 1 0 100-2 1 1 0 000 2z" size={12} />
           </button>
@@ -2617,6 +2587,7 @@ function CanvasRow({
           <FileRow
             key={sc.path}
             file={sc}
+            menu={menu}
             activePath={activePath}
             previewPath={previewPath}
             onOpen={onOpen}
@@ -2723,6 +2694,7 @@ function Tree({
         <FileRow
           key={entry.primary.path}
           file={entry.primary}
+          menu={menu}
           activePath={activePath}
           previewPath={previewPath}
           onOpen={onOpen}
@@ -2737,6 +2709,7 @@ function Tree({
           <FileRow
             key={entry.primary.path}
             file={entry.primary}
+            menu={menu}
             activePath={activePath}
             previewPath={previewPath}
             onOpen={onOpen}
@@ -2795,7 +2768,7 @@ function Tree({
             defaultOpen={true}
             dirPath={childPath}
             drag={drag}
-            menu={menu}
+            menu={drag ? menu : undefined}
           >
             {childTree}
           </DirRow>
@@ -2868,12 +2841,20 @@ function Sidebar({
   onMoveCanvas,
   onNewFolder,
   onDeleteFolder,
+  onRenameFolder,
+  onRenameCanvas,
+  onDuplicateCanvas,
+  onDeleteFile,
   // Passed through to CloudBar only — the live `sync:status` payload that makes
   // the connect note follow the link instead of freezing at attach time.
   syncStatus,
   // Passed through to CloudBar only — lifts linkedHub changes to the app shell
   // so the GitPanel's cloud-managed posture (DDR-218) reacts live.
   onLinkedHub,
+  onLocalProject,
+  onOpenLinkedFile,
+  filesReady,
+  onShare,
   // feature-cloud-managed-git-posture — the widened DDR-218 gate, resolved once
   // in App and handed down. Withdraws the drafts switcher: a local branch
   // switch moves a HEAD the cell knows nothing about.
@@ -2909,7 +2890,67 @@ function Sidebar({
   const menuExtra = rowMenu.state?.extra;
   const rowMenuRootItems =
     menuExtra?.kind === 'file'
-      ? [{ id: 'move-to', label: 'Move to…', onSelect: () => rowMenu.showMoveTo() }]
+      ? [
+          { id: 'share', label: 'Share…', onSelect: () => { rowMenu.close(); onShare(menuExtra.path); } },
+          ...(onRenameCanvas && /\.tsx$/i.test(menuExtra.path)
+            ? [
+                {
+                  id: 'rename-canvas',
+                  label: 'Rename…',
+                  onSelect: () => {
+                    rowMenu.close();
+                    const current = displayName(menuExtra.path.split('/').pop());
+                    const name = window.prompt('Rename canvas to:', current);
+                    if (name?.trim() && name.trim() !== current) onRenameCanvas(menuExtra.path, name.trim());
+                  },
+                },
+              ]
+            : []),
+          ...(onDuplicateCanvas && /\.tsx$/i.test(menuExtra.path)
+            ? [
+                {
+                  id: 'duplicate-canvas',
+                  label: 'Duplicate',
+                  onSelect: () => {
+                    rowMenu.close();
+                    onDuplicateCanvas(menuExtra.path);
+                  },
+                },
+              ]
+            : []),
+          // Plan T17/L03 — a supporting file renames as itself (the extension
+          // stays: a rename is not a conversion).
+          ...(menuExtra.supporting && onRenameCanvas
+            ? [
+                {
+                  id: 'rename-file',
+                  label: 'Rename…',
+                  onSelect: () => {
+                    rowMenu.close();
+                    const n = menuExtra.name ?? menuExtra.path.split('/').pop();
+                    const ext = n.includes('.') ? n.slice(n.lastIndexOf('.')) : '';
+                    const current = ext ? n.slice(0, -ext.length) : n;
+                    const name = window.prompt(`Rename ${n} to:`, current);
+                    if (name?.trim() && name.trim() !== current) onRenameCanvas(menuExtra.path, name.trim());
+                  },
+                },
+              ]
+            : []),
+          ...(menuExtra.canMove ? [{ id: 'move-to', label: 'Move to…', onSelect: () => rowMenu.showMoveTo() }] : []),
+          ...(menuExtra.supporting && onDeleteFile
+            ? [
+                {
+                  id: 'delete-file',
+                  label: 'Delete',
+                  destructive: true,
+                  onSelect: () => {
+                    rowMenu.close();
+                    onDeleteFile(menuExtra.path, menuExtra.name ?? menuExtra.path.split('/').pop());
+                  },
+                },
+              ]
+            : []),
+        ]
       : menuExtra?.kind === 'dir'
         ? [
             {
@@ -2921,6 +2962,16 @@ function Sidebar({
                 if (name?.trim()) onNewFolder(menuExtra.dirPath, name.trim());
               },
             },
+            {
+              id: 'rename-folder',
+              label: 'Rename folder',
+              onSelect: () => {
+                rowMenu.close();
+                const current = menuExtra.dirPath.split('/').pop();
+                const name = window.prompt('Rename folder to:', current);
+                if (name?.trim() && name.trim() !== current) onRenameFolder(menuExtra.dirPath, name.trim());
+              },
+            },
             {
               id: 'delete-folder',
               label: 'Delete folder',
@@ -2933,7 +2984,7 @@ function Sidebar({
           ]
         : [];
   const rowMenuDestinations =
-    menuExtra?.kind === 'file'
+    menuExtra?.kind === 'file' || menuExtra?.kind === 'supporting'
       ? destinations.filter((d) => d.path !== menuExtra.dir)
       : [];
 
@@ -3225,7 +3276,7 @@ function Sidebar({
                     canvasKinds={canvasKinds}
                     dirPath={g.fullPath}
                     drag={!isDs && g.kind === 'canvas' && !readOnly ? treeDrag : undefined}
-                    menu={!isDs && g.kind === 'canvas' && !readOnly ? rowMenu : undefined}
+                    menu={rowMenu}
                   />
                 ) : (
                   <div className="st-tree-empty">{search ? 'No matches.' : 'Empty.'}</div>
@@ -3253,9 +3304,9 @@ function Sidebar({
           and `/_api/git/checkout` keep exactly their old gates, and a terminal
           `git checkout` still works (and still flushes into Yjs via DDR-051's
           watcher). Absent, not disabled — there is nothing to explain here. */}
-      {!savingIsManaged && (
-        <RepoBranchSwitcher project={project} liveBranch={gitBranch} remoteSync={remoteSync} onGetLatest={onGetLatest} />
-      )}
+      {/* Plan T22 — withdrawn means the BRANCH half. A managed project still
+          needs the way to another project, so the dock stays, project-only. */}
+      <RepoBranchSwitcher project={project} liveBranch={gitBranch} remoteSync={remoteSync} onGetLatest={onGetLatest} projectOnly={savingIsManaged} />
       {/* Cloud Phase 23 C3 — Maude Cloud sign-in + remote-project attach, docked
           above the GitHub identity. Dev-server-backed, so it works in the desktop
           shell AND a plain browser. */}
@@ -3264,7 +3315,7 @@ function Sidebar({
           Absent rather than disabled, because unlike the agent chat there is
           nothing here to explain — the capability is not missing, it is
           already satisfied. */}
-      {cloud === null ? <CloudBar syncStatus={syncStatus} onLinkedHub={onLinkedHub} /> : null}
+      {cloud === null ? <CloudBar syncStatus={syncStatus} onLinkedHub={onLinkedHub} onLocalProject={onLocalProject} onOpenFile={onOpenLinkedFile} filesReady={filesReady} /> : null}
       {/* Phase 28 (E3) — GitHub identity as a compact avatar docked at the BOTTOM:
           sign in, connected account + New/Pull/Share, sign out. Self-contained
           (owns its device-code + CreateProject dialogs). Renders nothing in browser. */}
@@ -3973,12 +4024,13 @@ function ToolsDropdown({ onAction, onClose, readOnly = false }) {
 
 // Plan C follow-up — File + Edit menus, previously inert. Both dispatch to real
 // shell flows (File) or the in-canvas undo stack / selection bridges (Edit).
-function FileDropdown({ onAction, onClose, hasCanvas, readOnly = false }) {
+function FileDropdown({ onAction, onClose, hasCanvas, hasSharePath, readOnly = false }) {
   // Cloud Phase 25 C2 — a viewer keeps the reads (export, handoff, reload,
   // close); create / assemble / generate / settings are absent.
   const items = readOnly
     ? [
         { id: 'export', label: 'Export…', shortcut: '⇧⌘E' },
+        { id: 'share', label: 'Share link…', disabled: !hasSharePath },
         { id: 'handoff', label: 'Handoff to production', shortcut: '⇧⌘H' },
         { sep: true },
         { id: 'reload', label: 'Reload canvas', shortcut: '⌘R', disabled: !hasCanvas },
@@ -3991,6 +4043,7 @@ function FileDropdown({ onAction, onClose, hasCanvas, readOnly = false }) {
         // dropped as reference chips on the active canvas.
         { id: 'assemble', label: 'Assemble dropped clips → video', disabled: !hasCanvas },
         { id: 'export', label: 'Export…', shortcut: '⇧⌘E' },
+        { id: 'share', label: 'Share link…', disabled: !hasSharePath },
         { id: 'handoff', label: 'Handoff to production', shortcut: '⇧⌘H' },
         { sep: true },
         // feature-ai-media-generation (DDR-16x) — BYOK generate action + settings.
@@ -4052,6 +4105,8 @@ function EditDropdown({ onAction, onClose, hasCanvas, readOnly = false }) {
 
 function Menubar({
   activePath,
+  sharePath,
+  onShare,
   project,
   /** `{ dashboardUrl?, projectName }` when this is a cloud tab, else null. */
   // Tri-state (see the note where this value is created): `undefined` until
@@ -4390,6 +4445,7 @@ function Menubar({
               type="button"
               className="st-menu"
               role="menuitem"
+              data-testid={`menu-${key}`}
               data-tour={key === 'help' ? 'help' : undefined}
               aria-haspopup={hasDropdown ? 'menu' : undefined}
               aria-expanded={hasDropdown ? open : undefined}
@@ -4409,10 +4465,12 @@ function Menubar({
         <FileDropdown
           readOnly={readOnly}
           hasCanvas={!!activePath}
+          hasSharePath={!!sharePath}
           onAction={(id) => {
             if (id === 'new') onNewCanvas?.();
             else if (id === 'assemble') onAssembleVideo?.();
             else if (id === 'export') onOpenExport?.('export');
+            else if (id === 'share') { document.querySelector('[data-testid="menu-file"]')?.focus(); onShare?.(); }
             else if (id === 'handoff') onOpenExport?.('handoff');
             else if (id === 'generate') onOpenGenerate?.();
             else if (id === 'settings') onOpenSettings?.();
@@ -4556,6 +4614,7 @@ function Menubar({
             <StIcon name="sparkle" size={15} />
           </button>
         )}
+        <button type="button" className="st-mb-icon st-share-btn" data-testid="share-btn" data-tip={sharePath ? 'Share link' : 'Open a canvas to share it'} aria-label="Share link" disabled={!sharePath} onClick={onShare}><StIcon name="share" size={15} /></button>
         {exportCenter && <ExportBadge center={exportCenter} />}
         <button
           type="button"
@@ -5620,6 +5679,11 @@ const CSS_JUSTIFY = [
   'space-evenly',
 ];
 const CSS_WEIGHTS = ['300', '400', '500', '600', '700', '800'];
+/** What an edit route says the write replaced (`previous`, read under the file
+ *  lock) — the value an undo must restore. `fallback` only when the route could
+ *  not name it (an expression, or an older server). */
+const replacedValue = (j, fallback) =>
+  j && Object.hasOwn(j, 'previous') ? j.previous : fallback;
 const CSS_FONTS = [
   'inherit',
   'system-ui',
@@ -6512,12 +6576,16 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoR
   // no longer triggers a reselect that would re-post fresh `authored` values — so
   // the panel must reflect its own commits immediately or it shows the stale
   // pre-edit value until the user re-selects. Each commit/reset writes here;
-  // `null` marks a removed key. Cleared when a different element is selected.
+  // `null` marks a removed key. Cleared when a different element is selected —
+  // and whenever the canvas re-posts this selection's maps. A re-post carries
+  // the source as it is NOW (a teammate's change reloads the canvas); keeping
+  // our older commit over it showed a stale value and recorded it as the next
+  // undo's `before`, so Cmd+Z restored a value nobody had on screen.
   const [overlay, setOverlay] = useState({ a: {}, c: {}, t: {} });
-  // biome-ignore lint/correctness/useExhaustiveDependencies: clear only on element change.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: clear on a fresh selection payload only.
   useEffect(() => {
     setOverlay({ a: {}, c: {}, t: {} });
-  }, [el.id]);
+  }, [el.id, el.authored, el.customStyles, el.attrs]);
   const mergeOverlay = (base, ov) => {
     const out = { ...(base || {}) };
     for (const [k, v] of Object.entries(ov)) {
@@ -6602,10 +6670,27 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoR
         ...s,
         [key]: !res.ok || !j.ok ? `err:${(j && j.error) || `HTTP ${res.status}`}` : 'saved',
       }));
+      return res.ok ? j : null;
     } catch (err) {
       setStatus((s) => ({ ...s, [key]: `err:${err && err.message ? err.message : String(err)}` }));
+      return null;
     }
   }
+  // Write, THEN record the undo entry from what the write actually replaced
+  // (`previous`, read server-side under the file lock). The panel's own value
+  // can be a teammate's edit old — it is not re-posted when a peer changes the
+  // source — and recording it made Cmd+Z restore a value nobody had on screen.
+  // Serialized so the stack keeps edit order; a failed write records nothing.
+  const writeChainRef = useRef(Promise.resolve());
+  const writeAndRecord = (url, payload, key, op, prop, fallbackBefore, after) => {
+    writeChainRef.current = writeChainRef.current.then(async () => {
+      const j = await post(url, payload, key);
+      if (!j?.ok) return;
+      const before = Object.hasOwn(j, 'previous') ? j.previous : fallbackBefore;
+      if ((before ?? null) === (after ?? null)) return; // nothing changed to undo
+      record(op, prop, before, after);
+    });
+  };
   // Optimistic preview: nudge the live element so the change shows before the
   // edit → HMR reload lands. `value` null = remove (reset path). No-op when the
   // selection has no stable id (can't be resolved in the canvas).
@@ -6639,8 +6724,15 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoR
     if (value === (before ?? '').trim()) return; // no-op
     optimistic(property, value);
     setA(property, value); // reflect in the panel immediately (no reload → no reselect)
-    post('/_api/edit-css', { canvas: el.file, id: el.id, property, value }, property);
-    record('css', property, before, value);
+    writeAndRecord(
+      '/_api/edit-css',
+      { canvas: el.file, id: el.id, property, value },
+      property,
+      'css',
+      property,
+      before,
+      value
+    );
   };
   // A custom CSS property (Advanced) — same write, but the panel surfaces it from
   // the customStyles map, so overlay THERE.
@@ -6651,8 +6743,15 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoR
     const before = customStyles[prop] ?? null;
     optimistic(prop, value);
     setC(prop, value);
-    post('/_api/edit-css', { canvas: el.file, id: el.id, property: prop, value }, prop);
-    record('css', prop, before, value);
+    writeAndRecord(
+      '/_api/edit-css',
+      { canvas: el.file, id: el.id, property: prop, value },
+      prop,
+      'css',
+      prop,
+      before,
+      value
+    );
   };
   const commitAttr = (attr, raw) => {
     const a = (attr || '').trim();
@@ -6660,8 +6759,15 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoR
     if (!editable || !a || !value) return;
     const before = attrs[a] ?? null;
     setT(a, value);
-    post('/_api/edit-attr', { canvas: el.file, id: el.id, attr: a, value }, `@${a}`);
-    record('attr', a, before, value);
+    writeAndRecord(
+      '/_api/edit-attr',
+      { canvas: el.file, id: el.id, attr: a, value },
+      `@${a}`,
+      'attr',
+      a,
+      before,
+      value
+    );
   };
   // Phase 12.3 — reset (remove the inline prop / attr → back to class/inherited).
   const reset = (property) => {
@@ -6669,23 +6775,44 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoR
     const before = authored[property] ?? null;
     optimistic(property, null);
     setA(property, null);
-    post('/_api/edit-css', { canvas: el.file, id: el.id, property, reset: true }, property);
-    record('css', property, before, null);
+    writeAndRecord(
+      '/_api/edit-css',
+      { canvas: el.file, id: el.id, property, reset: true },
+      property,
+      'css',
+      property,
+      before,
+      null
+    );
   };
   const resetCustom = (property) => {
     if (!editable) return;
     const before = customStyles[property] ?? null;
     optimistic(property, null);
     setC(property, null);
-    post('/_api/edit-css', { canvas: el.file, id: el.id, property, reset: true }, property);
-    record('css', property, before, null);
+    writeAndRecord(
+      '/_api/edit-css',
+      { canvas: el.file, id: el.id, property, reset: true },
+      property,
+      'css',
+      property,
+      before,
+      null
+    );
   };
   const resetAttr = (attr) => {
     if (!editable) return;
     const before = attrs[attr] ?? null;
     setT(attr, null);
-    post('/_api/edit-attr', { canvas: el.file, id: el.id, attr, reset: true }, `@${attr}`);
-    record('attr', attr, before, null);
+    writeAndRecord(
+      '/_api/edit-attr',
+      { canvas: el.file, id: el.id, attr, reset: true },
+      `@${attr}`,
+      'attr',
+      attr,
+      before,
+      null
+    );
   };
   // Stage M1 — apply a Fixed / Hug / Fill sizing mode to one axis. The pure
   // `sizingModePatch` returns the exact writes (context-aware Fill: flex main axis
@@ -9714,6 +9841,9 @@ function InspectorPanel({
 
 function App() {
   const [groups, setGroups] = useState([]);
+  const [treeLoaded, setTreeLoaded] = useState(false);
+  const addressMode = useRef('push');
+  const previousAddressPath = useRef(null);
   const [project, setProject] = useState('Design');
   const [tabs, setTabs] = useState([]);
   const [activePath, setActivePath] = useState(null);
@@ -9723,6 +9853,7 @@ function App() {
   // state, or iframe registration that openTab()/openSystem() drive.
   const [previewPath, setPreviewPath] = useState(null);
   const onPreview = useCallback((path) => {
+    addressMode.current = 'push';
     setPreviewPath(path);
   }, []);
   const [selected, setSelected] = useState(null);
@@ -9829,6 +9960,30 @@ function App() {
   // after it) renumbers. Stash the re-settle target { file, movedId, artboardId }
   // so the dgn:'loaded' handler re-selects the moved element by its NEW id.
   const pendingReorderRef = useRef(null);
+  // The last layers tree the canvas posted, and its id signature. A duplicate
+  // or insert renumbers every later positional id, so the copy's NEW id already
+  // names another element (the next sibling) in the pre-write tree: settling
+  // on the first tree that merely contains it selected the wrong node. The
+  // pending entry records the signature at request time and waits for a tree
+  // that differs from it.
+  const lastLayersTreeRef = useRef(null);
+  const settlePendingSelectionRef = useRef(null);
+  settlePendingSelectionRef.current = (tree, sig, artboardId) => {
+    const pend = pendingReorderRef.current;
+    if (!pend || !pend.movedId) return;
+    if (pend.staleSig != null && sig === pend.staleSig) return; // still the pre-write DOM
+    const has = (function find(nodes) {
+      return (nodes || []).some((n) => n.id === pend.movedId || find(n.children));
+    })(tree);
+    if (!has) return;
+    pendingReorderRef.current = null;
+    const win = activePath ? iframesRef.current.get(activePath)?.contentWindow : null;
+    if (win) {
+      try {
+        win.postMessage({ dgn: 'select-by-id', id: pend.movedId, artboardId, index: 0 }, '*');
+      } catch {}
+    }
+  };
   // Latest `reorderLayer` (defined far below), read from the stale-closure
   // onMessage handler when the in-canvas grip posts dgn:'reorder-request'
   // (same freshness idiom as selectedRef; avoids a render-time TDZ on the
@@ -9924,6 +10079,7 @@ function App() {
   // CloudBar (status resolve / attach / detach). Gates the GitPanel's
   // cloud-managed posture; linked-but-uncredentialed keeps the full panel.
   const [cloudLinkedHub, setCloudLinkedHub] = useState(null);
+  const [localProjectName, setLocalProjectName] = useState(null);
   // Phase 27 (E2) — in-UI git layer. `gitStatus` is the live dirty-state the
   // server broadcasts on `git-status`; `changesOpen` toggles the Changes panel;
   // `diffTarget` opens the before/after DiffView ({ file, conflict }).
@@ -10247,6 +10403,7 @@ function App() {
   const [paletteOpen, setPaletteOpen] = useState(false);
   // T5/T6 (Plan C) — shell-level export/handoff dialog + inspector panel state.
   // The palette (T4) drives them; the dialog (T5) + panel (T6) consume them.
+  const [shareDialog, setShareDialog] = useState(null);
   const [exportDialog, setExportDialog] = useState(null); // null | { mode: 'export'|'handoff', scope? }
   // feature-ai-media-generation (DDR-16x) — BYOK provider-key Settings modal +
   // the AI generate action.
@@ -11589,37 +11746,47 @@ function App() {
   }, []);
 
   // ----- Tree -----
-  const loadTree = useCallback(async () => {
-    try {
-      const r = await fetch('/_index-data');
-      const data = await r.json();
-      setProject(data.project || 'Design');
-      const built = data.groups.map((g) => ({
-        ...g,
-        tree: buildTree(g.paths, g.stripPrefix, g.dirs),
-      }));
-      setGroups(built);
-      // DDR-093 — fold the server-resolved per-canvas DS map into cfg so
-      // canvasUrl() injects each UI canvas's OWN design-system tokens instead of
-      // always designSystems[0]. Functional merge to coexist with the /_config
-      // fetch (either may land first). `?? {}` keeps older servers (no map) on
-      // the ds0 fallback. Re-runs on every tree reload, so adding/retargeting a
-      // canvas refreshes the map.
-      setCfg((prev) => ({
-        ...prev,
-        canvasDesignSystems: data.canvasDesignSystems ?? {},
-        // DDR-174 (T15) — per-canvas notable `.meta.json` `kind` values (today:
-        // only `reconstructed-experimental`), folded in the same way + for the
-        // same reason as canvasDesignSystems above.
-        canvasKinds: data.canvasKinds ?? {},
-      }));
-    } catch (e) {
-      console.error('failed to load tree', e);
-    }
-  }, []);
-
+  const treeLoaderRef = useRef(null);
+  const loadTree = useCallback(() => treeLoaderRef.current?.reload() ?? Promise.resolve(), []);
   useEffect(() => {
+    const loader = createIndexLoader({
+      read: async (signal) => {
+        const r = await fetch('/_index-data', { signal, cache: 'no-store' });
+        if (!r.ok) throw Object.assign(new Error(`Project index request failed: ${r.status}`), { status: r.status });
+        const data = await r.json();
+        const built = data.groups.map((g) => ({
+          ...g,
+          tree: buildTree(g.paths, g.stripPrefix, g.dirs),
+        }));
+        return { data, built };
+      },
+      apply: ({ data, built }) => {
+        setProject(data.project || 'Design');
+        setGroups(built);
+        setTreeLoaded(true);
+        // DDR-093 — fold the server-resolved per-canvas DS map into cfg so
+        // canvasUrl() injects each UI canvas's OWN design-system tokens instead of
+        // always designSystems[0]. Functional merge to coexist with the /_config
+        // fetch (either may land first). `?? {}` keeps older servers (no map) on
+        // the ds0 fallback. Re-runs on every tree reload, so adding/retargeting a
+        // canvas refreshes the map.
+        setCfg((prev) => ({
+          ...prev,
+          canvasDesignSystems: data.canvasDesignSystems ?? {},
+          // DDR-174 (T15) — per-canvas notable `.meta.json` `kind` values (today:
+          // only `reconstructed-experimental`), folded in the same way + for the
+          // same reason as canvasDesignSystems above.
+          canvasKinds: data.canvasKinds ?? {},
+        }));
+      },
+      onError: (error) => console.error('failed to load tree', error),
+    });
+    treeLoaderRef.current = loader;
     loadTree();
+    return () => {
+      treeLoaderRef.current = null;
+      loader.dispose();
+    };
   }, [loadTree]);
 
   // ----- System data (lazy) -----
@@ -11668,6 +11835,7 @@ function App() {
   }, [loadAllComments]);
 
   // ----- WebSocket -----
+  const canvasListChangeRef = useRef(() => {});
   useEffect(() => {
     // KEEPALIVE. The inspector feed only pushes on events (a comment, a
     // selection, sync:status), so an idle designer's socket exchanges nothing
@@ -11779,26 +11947,8 @@ function App() {
             // Phase 9 Task 8 — hub connection state for the offline banner.
             setSyncStatus(m.payload);
           } else if (m.type === 'canvas-list-update') {
-            // Phase 30 — a canvas was created/deleted on THIS dev-server; re-read
-            // the branch-scoped tree so other open tabs reflect it without a
-            // reload. Cross-machine peers get a new canvas via git "Get latest".
             loadTree();
-            // feature-file-tree-drag-drop-folders (Task 10) — a canvas moved.
-            // moveCanvasReq already retargets the INITIATING tab locally (no
-            // need to wait for this broadcast to round-trip); this branch is
-            // for every OTHER open tab on the same dev-server, so a canvas
-            // that was open there doesn't go dead pointing at a path that no
-            // longer exists.
-            if (m.payload?.action === 'moved' && m.payload.fromRel && m.payload.rel) {
-              const designRel = (cfg?.designRel || cfg?.designRoot || '.design').replace(
-                /^\/+|\/+$/g,
-                ''
-              );
-              const fromFile = `${designRel}/${m.payload.fromRel}`;
-              const toFile = `${designRel}/${m.payload.rel}`;
-              setTabs((prev) => prev.map((t) => (t.path === fromFile ? { path: toFile } : t)));
-              setActivePath((prev) => (prev === fromFile ? toFile : prev));
-            }
+            canvasListChangeRef.current(m.payload);
           } else if (m.type === 'config-updated') {
             // Server hot-reloaded .design/config.json (/design:setup-ds rewrote
             // it) — refetch /_config so designSystems / tokensCssRel / groups
@@ -12001,6 +12151,39 @@ function App() {
     }
   }, []);
 
+  // ACCEPTED REVISIONS — the project's own history (DDR-241, T27). When the
+  // project saves through accepted revisions the History tab lists logical
+  // actions (who did what, when), not Git commits; a row previews as `r<rev>`
+  // through the same version preview. `'legacy'` means "use Git history".
+  const [projectHistoryOn, setProjectHistoryOn] = useState(false);
+  const loadAcceptedLog = useCallback(async (path) => {
+    try {
+      const qs =
+        '/_api/project/history?limit=40' + (path ? `&path=${encodeURIComponent(path)}` : '');
+      const r = await fetch(qs);
+      if (!r.ok) return 'legacy';
+      const data = await r.json();
+      if (!data?.ok) return data?.reason === 'legacy' ? 'legacy' : null;
+      return (data.history || []).map((a) => {
+        const where = path ? '' : (a.canvases || []).map((c) => c.split('/').pop()).join(', ');
+        return {
+          sha: `r${a.revision}`,
+          message: [a.label || a.kind, where].filter(Boolean).join(' · '),
+          author: a.actor,
+          date: new Date(a.committedAt).toISOString(),
+          accepted: {
+            revision: a.revision,
+            actionId: a.actionId,
+            mine: !!a.mine,
+            undo: a.kind === 'undo' || a.kind === 'redo',
+          },
+        };
+      });
+    } catch {
+      return null;
+    }
+  }, []);
+
   // Repo-relative path → M/A/D/U badge for the tree (paths match: both the tree
   // and gitStatus use `.design/ui/Foo.tsx`). Keyed off gitStatus so it updates
   // live with the WS broadcast.
@@ -12044,20 +12227,85 @@ function App() {
   // (iframesRef, comments push, WS `tabs` message) doesn't need refactoring.
   // ARTBOARDS slot in the menubar reads `tabs.length` and reports 0 or 1.
   const openTab = useCallback((path) => {
+    addressMode.current = 'push';
+    setFocusedCommentId(null);
+    setPreviewPath(null);
+    // The same path keeps its mounted iframe. It will not emit a new loaded
+    // event, so keep its current loading/error state until an actual retry.
+    if (path === activePath) return;
     setTabs((prev) => {
       // Drop the previously-open iframe so we don't leak DOM nodes.
       for (const t of prev) if (t.path !== path) iframesRef.current.delete(t.path);
       return [{ path }];
     });
     setActivePath(path);
-    setFocusedCommentId(null);
-    setPreviewPath(null);
     setCanvasError(null);
     setLoadedPath(null);
     // Canvas-compile skeleton — cleared by the iframe's dgn:'loaded' message,
     // the onLoad fallback timer (legacy .html), or a hard 15s cap.
     if (path !== SYSTEM_TAB) setLoadingPath(path);
-  }, []);
+  }, [activePath]);
+
+  // Resolve URL identities against the loaded tree, including non-canvas previews.
+  const openLinkedFile = useCallback((rel, mode = 'push') => {
+    const path = groups.flatMap((g) => g.paths || []).find((p) => normalizeOpenPath(p, cfg.designRel) === rel);
+    if (path && CANVAS_EXT_RE.test(path)) openTab(path);
+    else if (path && previewKind(basename(path))) onPreview(path);
+    else {
+      setTabs([]);
+      setActivePath(null);
+      setPreviewPath(null);
+      notify({ title: 'Not here yet', description: `${rel} is not in this project (not synced yet?)`, kind: 'info' });
+    }
+    addressMode.current = mode;
+  }, [groups, cfg.designRel, openTab, onPreview]);
+
+  const addressBooted = useRef(false);
+  useEffect(() => {
+    if (!treeLoaded || cfg.cloud === undefined || addressBooted.current) return;
+    addressBooted.current = true;
+    const rel = readOpenParam(location, cfg.designRel);
+    if (rel) openLinkedFile(rel, 'none');
+  }, [treeLoaded, cfg.cloud, cfg.designRel, openLinkedFile]);
+
+  useEffect(() => {
+    if (!treeLoaded || cfg.cloud === undefined) return;
+    const navigate = () => {
+      const rel = readOpenParam(location, cfg.designRel);
+      if (rel) openLinkedFile(rel, 'none');
+      else {
+        addressMode.current = 'none';
+        setTabs([]);
+        setActivePath(null);
+        setPreviewPath(null);
+      }
+    };
+    window.addEventListener('popstate', navigate);
+    return () => window.removeEventListener('popstate', navigate);
+  }, [treeLoaded, cfg.cloud, cfg.designRel, openLinkedFile]);
+
+  useEffect(() => {
+    const visible = previewPath || (activePath === SYSTEM_TAB ? null : activePath);
+    if (visible === previousAddressPath.current) return;
+    previousAddressPath.current = visible;
+    const rel = normalizeOpenPath(visible, cfg.designRel);
+    if (addressMode.current !== 'none' && readOpenParam(location, cfg.designRel) !== rel) {
+      history[rel ? 'pushState' : 'replaceState'](rel ? { open: rel } : null, '', withOpenParam(location, rel));
+    }
+    addressMode.current = 'push';
+  }, [activePath, previewPath, cfg.designRel]);
+
+  const sharePath = previewPath || (activePath === SYSTEM_TAB ? null : activePath);
+  const shareShell = cfg.cloud ? 'cloud' : isNativeApp() ? 'native' : 'local';
+  const shareLinksFor = (path) => buildShareLinks({
+    rel: normalizeOpenPath(path, cfg.designRel), shell: shareShell, location,
+    linkedHubUrl: cloudLinkedHub?.url, project: cfg.cloud ? project : localProjectName,
+    localUrl: location.origin,
+  });
+  const showShare = (path = sharePath) => {
+    const rel = normalizeOpenPath(path, cfg.designRel);
+    if (rel) setShareDialog({ path, rel, label: basename(path) });
+  };
 
   // Retry from the #115 error panel: re-read /_config FIRST (the stale
   // `canvasOrigin` is the likeliest reason we are here at all), then remount the
@@ -12089,6 +12337,7 @@ function App() {
   useEffect(() => {
     if (autoOpened.current) return;
     if (!cfg.cloud) return; // desktop / unknown-yet
+    if (new URLSearchParams(location.search).has('open')) { autoOpened.current = true; return; }
     if (tabs.length > 0) return;
     if (!groups.length) return; // tree not loaded
     // The first canvas that is somebody's WORK — a design-system specimen is a
@@ -12149,6 +12398,23 @@ function App() {
     [activePath]
   );
 
+  // The socket stays connected while this ref follows the current config and
+  // active tab. Structural events apply to local and remote users alike.
+  canvasListChangeRef.current = (change) => {
+    if (!change?.rel) return;
+    const designRel = (cfg?.designRel || cfg?.designRoot || '.design').replace(/^\/+|\/+$/g, '');
+    const file = `${designRel}/${change.rel}`;
+    if (change.action === 'removed') {
+      closeTab(file);
+    } else if (change.action === 'moved' && change.fromRel) {
+      const fromFile = `${designRel}/${change.fromRel}`;
+      setTabs((prev) => prev.map((t) => t.path === fromFile ? { ...t, path: file } : t));
+      setActivePath((prev) => prev === fromFile ? file : prev);
+      setLoadingPath((prev) => prev === fromFile ? null : prev);
+      iframesRef.current.delete(fromFile);
+    }
+  };
+
   const reloadActive = useCallback(() => {
     if (!activePath || activePath === SYSTEM_TAB) {
       if (activePath === SYSTEM_TAB) loadSystemData();
@@ -12533,6 +12799,100 @@ function App() {
     [loadTree]
   );
 
+  // Plan T17 — rename a folder: a move to a new name in the same parent (one
+  // dir.move action in accepted mode, carrying every canvas inside).
+  const renameFolderReq = useCallback(
+    async (dirPath, name) => {
+      const parent = dirPath.split('/').slice(0, -1).join('/');
+      try {
+        const r = await fetch('/_api/fs-move', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ file: dirPath, toDir: parent, toName: name }),
+        });
+        const j = await r.json().catch(() => ({}));
+        if (!r.ok || !j.ok) {
+          shellToast(`Could not rename folder: ${j.error || `error ${r.status}`}`);
+          return;
+        }
+        await loadTree();
+      } catch (e) {
+        shellToast(`Rename failed: ${e instanceof Error ? e.message : 'network error'}`);
+      }
+    },
+    [loadTree]
+  );
+
+  // Plan T25/L04 — rename a canvas in place (its sidecars follow; an open tab
+  // follows the new path) and duplicate one beside itself.
+  const renameCanvasReq = useCallback(
+    async (filePath, name) => {
+      try {
+        const r = await fetch('/_api/fs-move', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ file: filePath, toName: name }),
+        });
+        const j = await r.json().catch(() => ({}));
+        if (!r.ok || !j.ok) {
+          shellToast(`Could not rename: ${j.error || `error ${r.status}`}`);
+          return;
+        }
+        const designRel = (cfg?.designRel || cfg?.designRoot || '.design').replace(
+          /^\/+|\/+$/g,
+          ''
+        );
+        const fromFile = `${designRel}/${j.fromRel}`;
+        const toFile = `${designRel}/${j.toRel}`;
+        await loadTree();
+        setTabs((prev) => prev.map((t) => (t.path === fromFile ? { path: toFile } : t)));
+        setActivePath((prev) => (prev === fromFile ? toFile : prev));
+      } catch (e) {
+        shellToast(`Rename failed: ${e instanceof Error ? e.message : 'network error'}`);
+      }
+    },
+    [loadTree, cfg]
+  );
+  const duplicateCanvasReq = useCallback(
+    async (filePath) => {
+      try {
+        const r = await fetch('/_api/canvas', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ duplicateOf: filePath }),
+        });
+        const j = await r.json().catch(() => ({}));
+        if (!r.ok || !j.ok) {
+          shellToast(`Could not duplicate: ${j.error || `error ${r.status}`}`);
+          return;
+        }
+        await loadTree();
+        shellToast(`Duplicated as ${j.rel.split('/').pop().replace(/\.tsx$/i, '')}`, true);
+      } catch (e) {
+        shellToast(`Duplicate failed: ${e instanceof Error ? e.message : 'network error'}`);
+      }
+    },
+    [loadTree]
+  );
+
+  const deleteFileReq = useCallback(
+    async (filePath, name) => {
+      if (!window.confirm(`Move “${name}” to trash?\n\nYou can restore it from .design/_trash/.`)) return;
+      try {
+        const r = await fetch(`/_api/canvas?file=${encodeURIComponent(filePath)}`, { method: 'DELETE' });
+        const j = await r.json().catch(() => ({}));
+        if (!r.ok || !j.ok) {
+          shellToast(`Could not delete: ${j.error || `error ${r.status}`}`);
+          return;
+        }
+        await loadTree();
+      } catch (e) {
+        shellToast(`Delete failed: ${e instanceof Error ? e.message : 'network error'}`);
+      }
+    },
+    [loadTree]
+  );
+
   const clearSelected = useCallback(() => {
     wsSend({ type: 'clear-select' });
     setSelected(null);
@@ -12582,6 +12942,13 @@ function App() {
       if (e.origin !== expectedOrigin) return;
       const m = e.data;
       if (!m || typeof m !== 'object' || !m.dgn) return;
+      if (m.dgn === 'canvas-notice') {
+        const activeWin = activePath && activePath !== SYSTEM_TAB
+          ? iframesRef.current.get(activePath)?.contentWindow : null;
+        const notice = acceptCanvasNotice(e, expectedOrigin, activeWin);
+        if (notice) notifyCanvasText(notice.title, notice.kind);
+        return;
+      }
       if (m.dgn === 'tool-cursor') {
         // Phase 24 — show the active canvas tool's cursor across the WHOLE app
         // shell (sidebar, top bar, everything) so the custom cursor is visible
@@ -12723,55 +13090,48 @@ function App() {
         // Inline-edit undo/redo (DDR-103/104 follow-up). The canvas iframe's
         // `edit-source` command can't call the main-origin-only `/_api/edit-*`
         // routes (DDR-054), so it asks us to re-apply the before/after value.
-        // `value` null = reset (remove the inline prop / attr). For CSS we also
-        // optimistically repaint so the revert shows before the HMR reload.
-        const op = m.op;
+        // `value` null = reset (remove the inline prop / attr). The css/attr
+        // request carries the command's expected current value, so an undo can
+        // never overwrite a teammate's newer value (audit 2026-09-13 P1 #5);
+        // the outcome goes back to the canvas so a refused undo/redo does not
+        // advance its stack.
+        const req = applyEditRequest(m);
+        if (!req) return;
+        const replyTo = e.source;
+        const reply = (result) => {
+          if (typeof m.requestId !== 'string') return;
+          try {
+            replyTo?.postMessage({ dgn: 'apply-edit-result', requestId: m.requestId, ...result }, '*');
+          } catch {}
+        };
         const value = typeof m.value === 'string' ? m.value : null;
-        let url;
-        let body;
-        if (op === 'css') {
-          url = '/_api/edit-css';
-          body =
-            value == null
-              ? { canvas: m.canvas, id: m.id, property: m.key, reset: true }
-              : { canvas: m.canvas, id: m.id, property: m.key, value };
-          applyOptimisticStyle({ id: m.id, prop: m.key, value });
-        } else if (op === 'attr') {
-          url = '/_api/edit-attr';
-          body =
-            value == null
-              ? { canvas: m.canvas, id: m.id, attr: m.key, reset: true }
-              : { canvas: m.canvas, id: m.id, attr: m.key, value };
-        } else {
-          url = '/_api/edit-text';
-          body = { canvas: m.canvas, id: m.id, text: value ?? '' };
-          // Undo/redo of a `{variable}` text edit needs to re-target the source
-          // string: the occurrence + the value currently on disk (`from` — the
-          // side we're replacing FROM). Harmless for literal text.
-          if (typeof m.occurrence === 'number') body.occurrence = m.occurrence;
-          if (typeof m.from === 'string') body.before = m.from;
-        }
         editApplyChainRef.current = editApplyChainRef.current
           .catch(() => {})
           .then(() =>
-            fetch(url, {
+            fetch(req.url, {
               method: 'POST',
               headers: { 'content-type': 'application/json' },
-              body: JSON.stringify(body),
+              body: JSON.stringify(req.body),
             })
               .then((r) => r.json().catch(() => ({})))
               .then((j) => {
-                // Undo/redo lane (Cmd+Z/Cmd+Shift+Z re-application). The primary
-                // edit-text lane above owns the user-facing revert + toast; a
-                // refusal here is logged. (DDR-150 P1 kept this a warn after the
-                // setStatus-scope fix — setStatus is not in App's scope.)
-                if (!j.ok) console.warn('[apply-edit]', op, j.error || 'failed');
+                if (j.ok) {
+                  // Repaint only once the source accepted it: a refused undo
+                  // must not show a value the file does not hold.
+                  if (req.op === 'css') applyOptimisticStyle({ id: m.id, prop: m.key, value });
+                  reply({ ok: true });
+                  return;
+                }
+                console.warn('[apply-edit]', req.op, j.error || 'failed');
+                reply({ ok: false, error: j.error || 'failed', conflict: j.conflict === true });
               })
-              .catch(() => {})
+              .catch(() => reply({ ok: false, error: 'network error' }))
           );
       } else if (m.dgn === 'layers-tree') {
         // Phase 12 Task 4 — browsable layers tree for the active artboard.
         setLayersTree({ artboardId: m.artboardId, nodes: Array.isArray(m.tree) ? m.tree : [] });
+        const sig = layersTreeSig(m.tree);
+        lastLayersTreeRef.current = { tree: m.tree, sig, artboardId: m.artboardId ?? null };
         // fresh tree (correct ids) landed — drags OK again
         layersBusyRef.current = false;
         if (layersBusyTimerRef.current) {
@@ -12787,24 +13147,7 @@ function App() {
         // actually CONTAINS movedId — an in-canvas drag posts a PREVIEW tree
         // first (old ids, pre-write); consuming then would re-select nothing and
         // burn the pending ref before the real post-HMR tree lands.
-        const pend = pendingReorderRef.current;
-        if (pend && pend.movedId) {
-          const has = (function find(nodes) {
-            return (nodes || []).some((n) => n.id === pend.movedId || find(n.children));
-          })(m.tree);
-          if (has) {
-            pendingReorderRef.current = null;
-            const win = activePath ? iframesRef.current.get(activePath)?.contentWindow : null;
-            if (win) {
-              try {
-                win.postMessage(
-                  { dgn: 'select-by-id', id: pend.movedId, artboardId: m.artboardId ?? null, index: 0 },
-                  '*'
-                );
-              } catch {}
-            }
-          }
-        }
+        settlePendingSelectionRef.current?.(m.tree, sig, m.artboardId ?? null);
       } else if (m.dgn === 'reorder-revert') {
         // Phase 12.1 follow-up — Cmd+Z/Cmd+Shift+Z on a reorder. The canvas undo
         // stack (untrusted iframe) can't reach the main-origin-only
@@ -13128,6 +13471,23 @@ function App() {
         if (e.source === activeWin && typeof m.artboardId === 'string') {
           deleteArtboardShellRef.current?.(m.artboardId);
         }
+      } else if (m.dgn === 'rename-artboard-request') {
+        // Plan T25/L08 — double-click an artboard's name to rename it. Same
+        // confused-deputy guard: the canvas asks, the shell writes the active
+        // canvas only.
+        const activeWin = activePath ? iframesRef.current.get(activePath)?.contentWindow : null;
+        if (
+          e.source === activeWin &&
+          typeof m.artboardId === 'string' &&
+          typeof m.label === 'string' &&
+          m.label.trim()
+        ) {
+          structuralWriteRef.current?.(
+            '/_api/set-artboard-label',
+            { artboardId: m.artboardId, label: m.label.slice(0, 80) },
+            { label: 'rename artboard' }
+          );
+        }
       } else if (m.dgn === 'set-artboard-kind-request') {
         // feature-1-artboard-kinds-foundation, T8 — context-menu "Artboard
         // kind" submenu (inside the untrusted iframe). `kind: null` clears
@@ -13774,6 +14134,7 @@ function App() {
       // fix as resizeElement; also covers the keyboard nudge (L1) which reuses this.
       applyOptimisticStyle({ id, prop: 'left', value: `${left}px` });
       applyOptimisticStyle({ id, prop: 'top', value: `${top}px` });
+      let j1ref = null;
       const writeProp = (property, value) =>
         fetch('/_api/edit-css', {
           method: 'POST',
@@ -13785,6 +14146,7 @@ function App() {
         .then(() => writeProp('left', left))
         .then((j1) => {
           if (!j1.ok) throw new Error(j1.error || 'left write failed');
+          j1ref = j1;
           return writeProp('top', top);
         })
         .then((j2) => {
@@ -13796,7 +14158,7 @@ function App() {
             canvas,
             id,
             key: 'left',
-            before: `${beforeLeft}px`,
+            before: replacedValue(j1ref, `${beforeLeft}px`),
             after: `${left}px`,
           });
           recordSourceEdit({
@@ -13804,7 +14166,7 @@ function App() {
             canvas,
             id,
             key: 'top',
-            before: `${beforeTop}px`,
+            before: replacedValue(j2, `${beforeTop}px`),
             after: `${top}px`,
           });
         })
@@ -13892,11 +14254,15 @@ function App() {
           headers: { 'content-type': 'application/json' },
           body: JSON.stringify({ canvas, id, property, value, idIndex: occ }),
         }).then((r) => r.json().catch(() => ({})));
+      const replies = {};
       let chain = editApplyChainRef.current.catch(() => {});
       for (const p of props) {
         chain = chain.then((prev) => {
           if (prev && prev.ok === false) throw new Error(prev.error || `${p} write failed`);
-          return writeProp(p, patch[p]);
+          return writeProp(p, patch[p]).then((j) => {
+            replies[p] = j;
+            return j;
+          });
         });
       }
       editApplyChainRef.current = chain
@@ -13904,7 +14270,14 @@ function App() {
           if (last && last.ok === false) throw new Error(last.error || 'resize write failed');
           // Record one undo entry per written property (each Cmd+Z reverts one).
           for (const p of props) {
-            recordSourceEdit({ op: 'css', canvas, id, key: p, before: b[p] ?? null, after: patch[p] });
+            recordSourceEdit({
+              op: 'css',
+              canvas,
+              id,
+              key: p,
+              before: replacedValue(replies[p], b[p] ?? null),
+              after: patch[p],
+            });
           }
           // Dogfood 2026-07-07 — belt-and-suspenders reselect, mirroring the
           // structural ops' `pendingReorderRef` re-settle. The DDR-105 suppression
@@ -13936,9 +14309,18 @@ function App() {
   // inverse descriptor goes stale (same reason reorder uses the server seq log).
   const structuralWriteRef = useRef(null);
   const structuralWrite = useCallback(
-    (route, body, { label, onOk, onFail } = {}) => {
+    (route, body, { label, onOk, onFail: failed } = {}) => {
       if (!activePath) return;
       const canvas = activePath;
+      // A refused structural edit used to vanish into the console: the
+      // designer pressed Delete and nothing happened. Say so in the canvas.
+      const onFail =
+        failed ??
+        ((j) =>
+          postToActiveCanvas({
+            dgn: 'op-toast',
+            message: `Couldn't ${label || 'apply the edit'}${j?.error ? ` — ${j.error}` : ''}.`,
+          }));
       editApplyChainRef.current = editApplyChainRef.current
         .catch(() => {})
         .then(() =>
@@ -13985,6 +14367,7 @@ function App() {
 
   const insertElementShell = useCallback(
     (refId, position, kind, opts = {}) => {
+      const staleSig = lastLayersTreeRef.current?.sig ?? null;
       structuralWrite(
         '/_api/insert-element',
         {
@@ -14000,7 +14383,10 @@ function App() {
           // Select the new element once the HMR reload lands (its id is stamped
           // on transpile — best-effort, like reorder's pendingReorderRef).
           onOk: (j, canvas) => {
-            if (j.newId) pendingReorderRef.current = { file: canvas, movedId: j.newId, artboardId: null };
+            if (!j.newId) return;
+            pendingReorderRef.current = { file: canvas, movedId: j.newId, artboardId: null, staleSig };
+            const last = lastLayersTreeRef.current;
+            if (last) settlePendingSelectionRef.current?.(last.tree, last.sig, last.artboardId);
           },
         }
       );
@@ -14064,14 +14450,19 @@ function App() {
 
   const duplicateElementShell = useCallback(
     (id, idIndex) => {
+      const staleSig = lastLayersTreeRef.current?.sig ?? null;
       structuralWrite(
         '/_api/duplicate-element',
         { id, idIndex: Number.isInteger(idIndex) ? idIndex : undefined },
         {
           label: 'duplicate element',
-          // Select the copy once the HMR reload lands (best-effort, like insert).
+          // Select the copy once the post-write tree lands — not the pre-write
+          // one, where the copy's id still names the next sibling.
           onOk: (j, canvas) => {
-            if (j.newId) pendingReorderRef.current = { file: canvas, movedId: j.newId, artboardId: null };
+            if (!j.newId) return;
+            pendingReorderRef.current = { file: canvas, movedId: j.newId, artboardId: null, staleSig };
+            const last = lastLayersTreeRef.current;
+            if (last) settlePendingSelectionRef.current?.(last.tree, last.sig, last.artboardId);
           },
         }
       );
@@ -14141,7 +14532,14 @@ function App() {
             .then((r) => r.json().catch(() => ({})))
             .then((j) => {
               if (j.ok)
-                recordSourceEdit({ op: 'css', canvas, id, key: property, before: null, after: value });
+                recordSourceEdit({
+                  op: 'css',
+                  canvas,
+                  id,
+                  key: property,
+                  before: replacedValue(j, null),
+                  after: value,
+                });
             })
             .catch(() => {})
         );
@@ -14481,7 +14879,7 @@ function App() {
                     canvas,
                     id: req.id,
                     key: 'src',
-                    before: req.before ?? null,
+                    before: replacedValue(j, req.before ?? null),
                     after: pickedPath,
                   });
                 } else {
@@ -14945,11 +15343,18 @@ function App() {
         kbd: '⇧⌘E',
         run: () => setExportDialog({ mode: 'export' }),
       },
+      {
+        id: 'share-link',
+        group: 'Canvas',
+        label: 'Copy share link',
+        icon: 'link',
+        run: () => { const links = shareLinksFor(sharePath); const link = links.web ?? links.app ?? links.local; if (link) copyShareLink(link); },
+      },
       {
         id: 'handoff',
         group: 'Canvas',
         label: 'Handoff to production',
-        icon: 'share',
+        icon: 'external',
         kbd: '⇧⌘H',
         run: () => setExportDialog({ mode: 'handoff' }),
       },
@@ -15054,7 +15459,7 @@ function App() {
         run: () => setReportBugOpen(true),
       },
     ],
-    [openSystem, toggleTheme, reloadActive, whatsNew, createVideo]
+    [openSystem, toggleTheme, reloadActive, whatsNew, createVideo, sharePath, shareShell, cloudLinkedHub, localProjectName, cfg.designRel]
   );
 
   // feature-configurable-panel-docking — resolve, for each slot, the panels
@@ -15133,6 +15538,9 @@ function App() {
           activeDsName={activePath === SYSTEM_TAB ? (systemData?.ds?.name ?? null) : null}
           onOpen={openTab}
           onPreview={onPreview}
+          onOpenLinkedFile={openLinkedFile}
+          filesReady={treeLoaded}
+          onShare={showShare}
           onOpenSystem={openSystem}
           wsConnected={wsConnected}
           search={search}
@@ -15146,6 +15554,10 @@ function App() {
           onMoveCanvas={moveCanvasReq}
           onNewFolder={newFolderReq}
           onDeleteFolder={deleteFolderReq}
+          onRenameFolder={renameFolderReq}
+          onRenameCanvas={renameCanvasReq}
+          onDuplicateCanvas={duplicateCanvasReq}
+          onDeleteFile={deleteFileReq}
           onRefresh={refreshTree}
           refreshing={treeRefreshing}
           collapsed={false}
@@ -15159,6 +15571,7 @@ function App() {
           canvasKinds={cfg?.canvasKinds}
           syncStatus={syncStatus}
           onLinkedHub={setCloudLinkedHub}
+          onLocalProject={setLocalProjectName}
           savingIsManaged={savingIsManaged}
         />
       );
@@ -15199,8 +15612,35 @@ function App() {
           // WHICH HISTORY, decided at the ONE place the posture is named — not
           // inside the panel, which would be a second derivation of the rule
           // `cloud-managed-save-surfaces.test.ts` exists to keep singular.
-          loadLog={cloudManaged ? gitLoadCloudLog : gitLoadLog}
-          historySource={cloudManaged ? 'cloud' : 'local'}
+          loadLog={async (path) => {
+            // The project's accepted history when it has one; Git otherwise.
+            const accepted = await loadAcceptedLog(path);
+            setProjectHistoryOn(accepted !== 'legacy');
+            if (accepted !== 'legacy') return accepted;
+            return (cloudManaged ? gitLoadCloudLog : gitLoadLog)(path);
+          }}
+          historySource={projectHistoryOn ? 'project' : cloudManaged ? 'cloud' : 'local'}
+          onRestoreVersion={async (revision) => {
+            const r = await fetch('/_api/project/restore', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ path: activePath, revision }),
+            }).catch(() => null);
+            const j = r ? await r.json().catch(() => null) : null;
+            return !!j?.ok;
+          }}
+          // Not through a cell's door: every browser editor proposes under the
+          // studio's one credential there, so "your own action" is not
+          // knowable and the hub refuses the route (studio-manifest.mjs).
+          onUndoAction={cellManaged ? undefined : async (actionId) => {
+            const r = await fetch('/_api/project/undo', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ actionId }),
+            }).catch(() => null);
+            const j = r ? await r.json().catch(() => null) : null;
+            return !!j?.ok;
+          }}
           // What the cloud half of the header names. The cell reports its own
           // project and branch with the log; the hub host is the fallback,
           // because a header that names the LOCAL folder while listing the
@@ -15317,8 +15757,10 @@ function App() {
           only appears if you happen to open the Sync panel is not consent.
           Skipped during first-run onboarding so two flows don't stack. */}
       {!firstRun && <SyncConsentDialog status={syncStatus} cloud={cfg.cloud} />}
-      {!usageNudge && !tourSteps && <WhatsNewToast wn={whatsNew} />}
-      {!usageNudge && !tourSteps && <ExportToast center={exportCenter} />}
+      <NotificationHost paused={!!usageNudge || !!tourSteps}
+        hiddenGroups={exportCenter.panelOpen ? ['exports'] : []} />
+      <WhatsNewToast wn={whatsNew} />
+      <ExportToast center={exportCenter} />
       {gitLifecycle && (
         <div role="status" aria-live="polite" className="st-banner st-banner--info">
           <span className="st-banner-dot" aria-hidden="true" />
@@ -15341,6 +15783,8 @@ function App() {
       )}
       <div className="st-shell">
         <Menubar
+          sharePath={sharePath}
+          onShare={() => showShare()}
           readOnly={viewerMode}
           // Cloud Phase 27 C2/C4 — the ONE cloud-only input the shared chrome
           // takes. A prop, not the whole `cfg`: the Menubar needs to know it is
@@ -16353,6 +16797,7 @@ function App() {
           </div>
         </div>
       )}
+      {shareDialog && <ShareDialog target={shareDialog} links={shareLinksFor(shareDialog.path)} shell={shareShell} onClose={() => setShareDialog(null)} Icon={StIcon} />}
       {exportDialog && (
         <ExportDialog
           mode={exportDialog.mode}