@ai-matrx/canvas 0.5.3 → 0.6.1

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## 0.6.1
+
+Live measurement of 0.6.0 (a 756px pane, five tabs, Quick Chat's header actions present):
+
+- **The strip takes the header's free width** (`flex: 1`). Sized to its own intrinsic width, the browser undercut every text tab by 2–3px and cut each name; now tabs lay out in real room ("+" sits at the strip's end).
+- **No ellipsis.** System fonts overflow their intrinsic width by a fraction of a pixel, which put "…" on names that fit ("Quick Ch…"). Titles clip; a name really cut (`data-truncated` on the tab, measured: more than 1px) fades at its end.
+- **Room for names:** only the active tab reserves its (always shown) close's room — a background tab's close overlays on hover with the name fading under it; icon gap 4px; an empty leading slot takes no room and no gap (the actions keep the end with `margin-left: auto`).
+
+### Consumer action
+
+- None.
+
+## 0.6.0
+
+Independent live sweep (admin, clone):
+
+- **Tabs read fully.** A 751px pane showed "Quic", "Messa" while 363px of header sat empty: `.mxc-tab`'s `container: inline-size` made every tab's intrinsic width ignore its text, so the strip sized to nothing. Tabs are now as wide as their names (max 12rem), shrink evenly only when the header is out of room (floor 4.5rem), then the strip scrolls with a visible cue — the clipped edge fades and "Scroll tabs left/right" chevrons page it. The active tab stays in view. Every tab reserves its close's room, so a name is never under the button (ellipsis when squeezed). The narrow-tab icon drop (container query) is gone.
+- **Back keeps the body.** History entries carry the body's `instance`; Back returns the SAME live body, and the content Back leaves is kept in `CanvasItem.kept` (newest last) — navigating to it again revives its body ("+" → Quick Chat → type → Back → Quick Chat finds the draft). The newest `CANVAS_KEEP_ALIVE_DEPTH` (5) back steps and the kept steps stay mounted-hidden in the body layer; closing the tab disposes them. Bodies are ordered by birth, so Back never reorders the DOM.
+- **Phones present one pane.** At `CANVAS_PHONE_MAX_WIDTH` (767px) a restored multi-pane layout shows ONE pane (the focused one) whose strip carries every pane's tabs; choosing another pane's tab presents that pane. The layout tree is untouched.
+- **`CanvasToggle` is a pressed toggle** (`pressed` → `aria-pressed` + the tap-target pressed look) while the canvas is open.
+- **Double-clicking a launcher item** no longer lands in the tab it opens: the rest of that multi-click is swallowed; launcher items are `user-select: none`.
+
+### Consumer action
+
+- Code that builds `CanvasHistoryEntry` objects itself may pass `instance`; code that reads `CanvasItem` can ignore the new `kept`.
+- CSS that targeted `.mxc-tabs` as the header's direct child: the strip is now `.mxc-tabstrip > .mxc-tabs`.
+
 ## 0.5.3
 
 - A kind's `HeaderAction` renders in its own gapless row (`.mxc-kind-actions`): tap-target buttons space themselves, and the pane's 2px action gap tripped the tap-target misuse guard over the tab strip (seen live with Quick Chat).

package/README.md

@@ -62,6 +62,12 @@ canvas.back(item.id);
 
 Navigating to something already open elsewhere focuses it there (a launcher tab closes; any other tab keeps what it shows). History is plain JSON and persists. A lone tab shown as a title keeps its own close.
 
+**Back never throws a body away.** The newest `CANVAS_KEEP_ALIVE_DEPTH` (5) steps Back can reach, and the 5 most recent contents Back stepped away from (`item.kept`), keep their bodies mounted and hidden. Back returns the SAME live body; choosing a content Back left (Quick Chat again from the launcher) revives its body — a typed draft is still there. Older steps still work but mount fresh. Closing the tab disposes every kept body.
+
+**The strip.** A tab is as wide as its name (up to 12rem); tabs shrink evenly only when the header runs out of room (floor 4.5rem), then the strip scrolls — the clipped edge fades and chevrons page it. The active tab stays in view.
+
+**Phones** (`CANVAS_PHONE_MAX_WIDTH`, 767px): the column presents ONE pane — the focused one — whose strip carries every pane's tabs; choosing a tab from another pane presents that pane. The layout tree is untouched, so a wider screen gets its split back.
+
 ## A page's own launcher entries
 
 ```tsx

package/dist/index.cjs

@@ -24,11 +24,13 @@ __export(src_exports, {
   CANVAS_DEFAULT_WIDTH: () => CANVAS_DEFAULT_WIDTH,
   CANVAS_DESKTOP_LAYOUT_RULES: () => CANVAS_DESKTOP_LAYOUT_RULES,
   CANVAS_HISTORY_LIMIT: () => CANVAS_HISTORY_LIMIT,
+  CANVAS_KEEP_ALIVE_DEPTH: () => CANVAS_KEEP_ALIVE_DEPTH,
   CANVAS_LAUNCHER_KIND: () => CANVAS_LAUNCHER_KIND,
   CANVAS_MAIN_WINDOW: () => CANVAS_MAIN_WINDOW,
   CANVAS_MIN_SPLIT_FRACTION: () => CANVAS_MIN_SPLIT_FRACTION,
   CANVAS_MIN_WIDTH: () => CANVAS_MIN_WIDTH,
   CANVAS_NARROW_WIDTH: () => CANVAS_NARROW_WIDTH,
+  CANVAS_PHONE_MAX_WIDTH: () => CANVAS_PHONE_MAX_WIDTH,
   CANVAS_SHORTCUTS: () => CANVAS_SHORTCUTS,
   CANVAS_STORAGE_KEY: () => CANVAS_STORAGE_KEY,
   CANVAS_WEB_LAYOUT_RULES: () => CANVAS_WEB_LAYOUT_RULES,
@@ -95,6 +97,7 @@ module.exports = __toCommonJS(src_exports);
 var CANVAS_MAIN_WINDOW = "main";
 var CANVAS_LAUNCHER_KIND = "canvas.launcher";
 var CANVAS_HISTORY_LIMIT = 50;
+var CANVAS_KEEP_ALIVE_DEPTH = 5;
 var CANVAS_MIN_WIDTH = 360;
 var CANVAS_DEFAULT_WIDTH = 640;
 var CANVAS_MIN_SPLIT_FRACTION = 0.12;
@@ -460,8 +463,10 @@ function sendHome(state, itemId, home, activate) {
   next = insertInto(next, homeFrame.focusedPaneId, itemId, activate);
   return activate ? withFrame(next, target, { focusedPaneId: homeFrame.focusedPaneId }) : next;
 }
-function newItem(kind, key, title, data, now, history) {
+function newItem(kind, key, title, data, now, steps) {
   const id = canvasItemId(kind, key);
+  const history = steps?.history ?? [];
+  const kept = steps?.kept ?? [];
   return {
     id,
     kind,
@@ -470,12 +475,14 @@ function newItem(kind, key, title, data, now, history) {
     data,
     openedAt: now,
     updatedAt: now,
-    instance: `${now.toString(36)}:${id}`,
-    ...history && history.length > 0 ? { history: history.slice(-CANVAS_HISTORY_LIMIT) } : {}
+    // A reused instance is the SAME live body coming back (Back, or returning to a kept step).
+    instance: steps?.instance ?? `${now.toString(36)}:${id}`,
+    ...history.length > 0 ? { history: history.slice(-CANVAS_HISTORY_LIMIT) } : {},
+    ...kept.length > 0 ? { kept: kept.slice(-CANVAS_KEEP_ALIVE_DEPTH) } : {}
   };
 }
 function historyEntry(item) {
-  return { kind: item.kind, key: item.key, title: item.title, data: item.data };
+  return { kind: item.kind, key: item.key, title: item.title, data: item.data, ...item.instance ? { instance: item.instance } : {} };
 }
 function replaceInPlace(state, current, next) {
   const pane = paneOf(state, current.id);
@@ -504,17 +511,25 @@ function sanitizeHistory(raw) {
     if (!entry || typeof entry !== "object") continue;
     const e = entry;
     if (typeof e.kind !== "string" || typeof e.key !== "string") continue;
-    out.push({ kind: e.kind, key: e.key, title: typeof e.title === "string" ? e.title : null, data: e.data ?? null });
+    out.push({
+      kind: e.kind,
+      key: e.key,
+      title: typeof e.title === "string" ? e.title : null,
+      data: e.data ?? null,
+      ...typeof e.instance === "string" && e.instance ? { instance: e.instance } : {}
+    });
   }
   return out.slice(-CANVAS_HISTORY_LIMIT);
 }
 function sanitizeItem(item) {
   const history = sanitizeHistory(item.history);
-  const { history: _history, instance, ...rest } = item;
+  const kept = sanitizeHistory(item.kept).slice(-CANVAS_KEEP_ALIVE_DEPTH);
+  const { history: _history, kept: _kept, instance, ...rest } = item;
   return {
     ...rest,
     ...typeof instance === "string" && instance ? { instance } : {},
-    ...history.length > 0 ? { history } : {}
+    ...history.length > 0 ? { history } : {},
+    ...kept.length > 0 ? { kept } : {}
   };
 }
 function clampWidth(width) {
@@ -701,7 +716,22 @@ function canvasReducer(state = createInitialCanvasState(), action) {
         return current.kind === CANVAS_LAUNCHER_KIND ? canvasReducer(focused, canvasActions.closeItem(itemId)) : focused;
       }
       const history = [...current.history ?? [], historyEntry(current)];
-      return replaceInPlace(state, current, newItem(to.kind, to.key, to.title ?? null, to.data ?? null, now, history));
+      const keptAll = current.kept ?? [];
+      const keptIndex = keptAll.findIndex((entry) => canvasItemId(entry.kind, entry.key) === targetId);
+      const revived = keptIndex >= 0 ? keptAll[keptIndex] : void 0;
+      const kept = keptAll.filter((_, i) => i !== keptIndex);
+      return replaceInPlace(
+        state,
+        current,
+        newItem(
+          to.kind,
+          to.key,
+          to.title !== void 0 ? to.title : revived?.title ?? null,
+          to.data !== void 0 ? to.data : revived?.data ?? null,
+          now,
+          { history, kept, instance: revived?.instance }
+        )
+      );
     }
     case `${P}back`: {
       const { itemId, now } = action.payload;
@@ -714,7 +744,12 @@ function canvasReducer(state = createInitialCanvasState(), action) {
       if (state.items[targetId]) {
         return focusExisting(canvasReducer(state, canvasActions.closeItem(itemId)), targetId);
       }
-      return replaceInPlace(state, current, newItem(entry.kind, entry.key, entry.title, entry.data, now, history.slice(0, -1)));
+      const kept = [...(current.kept ?? []).filter((k) => canvasItemId(k.kind, k.key) !== itemId), historyEntry(current)];
+      return replaceInPlace(
+        state,
+        current,
+        newItem(entry.kind, entry.key, entry.title, entry.data, now, { history: history.slice(0, -1), kept, instance: entry.instance })
+      );
     }
     case `${P}closeItem`: {
       const { itemId } = action.payload;
@@ -1551,6 +1586,7 @@ function selectCanvasItemHistory(s, itemId) {
 var selectCanvasCanGoBack = (s, itemId) => (s.items[itemId]?.history?.length ?? 0) > 0;
 
 // src/core/presentation.ts
+var CANVAS_PHONE_MAX_WIDTH = 767;
 var CANVAS_NARROW_WIDTH = 480;
 var SQUARE_BAND = 1.2;
 function canvasOrientation(width, height) {