@ai-matrx/canvas 0.5.3 → 0.6.0

package/dist/styles.css

@@ -403,6 +403,20 @@
 
 /* ── tabs ───────────────────────────────────────────────────────────────── */
 
+/*
+ * THE STRIP takes what the header has: it is as wide as its tabs need (the
+ * leading slot after it has no basis), so "+" sits right after the last tab
+ * and only shrinks when the header runs out of room. Past the tabs' minimum
+ * the strip scrolls, and says so: the clipped edge fades and chevrons appear.
+ */
+.mxc-tabstrip {
+  flex: 0 1 auto;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+}
+
 .mxc-tabs {
   /* The tabs' offset parent, so "keep the active tab in view" measures in strip coordinates. */
   position: relative;
@@ -413,32 +427,50 @@
   gap: 0.125rem;
   overflow-x: auto;
   scrollbar-width: none;
+  --mxc-fade-start: 0px;
+  --mxc-fade-end: 0px;
 }
 
 .mxc-tabs::-webkit-scrollbar {
   display: none;
 }
 
+/* Overflow cue: the clipped edge(s) fade out. */
+.mxc-tabstrip[data-overflow-start] > .mxc-tabs {
+  --mxc-fade-start: 1.5rem;
+}
+
+.mxc-tabstrip[data-overflow-end] > .mxc-tabs {
+  --mxc-fade-end: 1.5rem;
+}
+
+.mxc-tabstrip[data-overflow] > .mxc-tabs {
+  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--mxc-fade-start), #000 calc(100% - var(--mxc-fade-end)), transparent 100%);
+  mask-image: linear-gradient(to right, transparent 0, #000 var(--mxc-fade-start), #000 calc(100% - var(--mxc-fade-end)), transparent 100%);
+}
+
+.mxc-tabs-scroll {
+  flex: none;
+}
+
 /*
  * TAB DENSITY (Claude Code / Codex): 12.5px text, a 14px icon, 6px side
- * padding. Tabs shrink evenly from 8rem to a 4.5rem floor, then the strip
- * scrolls (a tab is never squeezed to three letters). A background tab
- * narrower than 6rem drops its icon so its name keeps the room. The active
- * tab keeps icon + ~10 letters + its close.
- * The close button is OVERLAID on the tab's end and costs no width while
- * hidden; shown (hover, active, focus) the title fades under it.
+ * padding. A tab is as wide as its name (up to 12rem); tabs shrink evenly
+ * only when the header is out of room, to a 4.5rem floor (a tab is never
+ * squeezed to three letters), then the strip scrolls. The active tab keeps
+ * icon + ~10 letters. Every tab reserves the room of its close, so a name is
+ * never under the button; the close shows on hover, the active tab and focus.
  */
 .mxc-tab {
   position: relative;
-  flex: 1 1 8rem;
+  flex: 0 1 auto;
   min-width: 4.5rem;
   max-width: 12rem;
-  container: mxc-tab / inline-size;
   display: flex;
   align-items: center;
   gap: 0.3125rem;
   height: 1.625rem;
-  padding: 0 0.375rem;
+  padding: 0 1.375rem 0 0.375rem;
   border-radius: 0.375rem;
   font-size: 0.78125rem;
   line-height: 1rem;
@@ -449,6 +481,11 @@
   box-sizing: border-box;
 }
 
+/* A tab without a close (BrowserTabs with no onClose) keeps even padding. */
+.mxc-tab:not(:has(> .mxc-tab-close)) {
+  padding-right: 0.375rem;
+}
+
 .mxc-tab[data-active] {
   min-width: min(7.5rem, 100%);
   background: var(--mxc-tab-active-bg);
@@ -480,12 +517,6 @@
   opacity: 0.75;
 }
 
-@container mxc-tab (max-width: 6rem) {
-  .mxc-tab:not([data-active]) .mxc-tab-icon {
-    display: none;
-  }
-}
-
 .mxc-tab-icon svg,
 .mxc-favicon {
   width: 0.875rem;
@@ -497,26 +528,13 @@
 }
 
 .mxc-tab-title {
-  flex: 1 1 auto;
+  flex: 0 1 auto;
   min-width: 0;
   overflow: hidden;
-  text-overflow: clip;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-/* The close shows: the title's end fades out from under it. */
-.mxc-tab:hover .mxc-tab-title,
-.mxc-tab[data-active] .mxc-tab-title,
-.mxc-tab:focus-within .mxc-tab-title {
-  -webkit-mask-image: linear-gradient(to left, transparent 1.125rem, #000 1.875rem);
-  mask-image: linear-gradient(to left, transparent 1.125rem, #000 1.875rem);
-}
-
-.mxc-tab:not(:hover):not([data-active]):not(:focus-within) .mxc-tab-title {
-  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 0.75rem);
-  mask-image: linear-gradient(to left, transparent 0, #000 0.75rem);
-}
-
 .mxc-tab-note {
   flex: none;
   font-size: 0.6875rem;
@@ -754,6 +772,9 @@
 }
 
 .mxc-launcher-item {
+  /* A double-click must never select the label (or the new tab under it). */
+  user-select: none;
+  -webkit-user-select: none;
   display: flex;
   align-items: center;
   gap: 0.5rem;

package/dist/{toggleKind-BD78LnMB.d.cts → toggleKind-DhDmWExm.d.cts}

@@ -46,11 +46,24 @@ interface CanvasHistoryEntry {
     readonly key: string;
     readonly title: string | null;
     readonly data: CanvasJson;
+    /**
+     * The body this content had (its item's `instance`). Back and a navigate to
+     * a kept step reuse it, so the SAME live body comes back (a typed draft, a
+     * scroll position) while the layer still holds it mounted.
+     */
+    readonly instance?: string | undefined;
 }
 /** The built-in "New tab" item: the launcher, shown as a tab. Never registered as a kind. */
 declare const CANVAS_LAUNCHER_KIND = "canvas.launcher";
 /** How many steps Back can go in one tab. Older entries fall off. */
 declare const CANVAS_HISTORY_LIMIT = 50;
+/**
+ * How many earlier contents of one tab keep their body MOUNTED (hidden), in
+ * each direction: the newest steps Back reaches, and the contents Back left
+ * (`CanvasItem.kept`). Older steps still work — their body mounts fresh.
+ * Only closing the tab disposes the kept bodies.
+ */
+declare const CANVAS_KEEP_ALIVE_DEPTH = 5;
 interface CanvasItem {
     readonly id: CanvasItemId;
     /** Registered kind id (see `registerCanvasKind`). */
@@ -64,6 +77,13 @@ interface CanvasItem {
     readonly updatedAt: number;
     /** Earlier contents of this tab, oldest first (navigate in place). Absent = no Back. */
     readonly history?: readonly CanvasHistoryEntry[] | undefined;
+    /**
+     * Contents this tab showed that Back has stepped away from (newest last, at
+     * most CANVAS_KEEP_ALIVE_DEPTH). Navigating to one again brings back its
+     * live body instead of a new one: "+" → Quick Chat → type → Back → Quick
+     * Chat finds the draft.
+     */
+    readonly kept?: readonly CanvasHistoryEntry[] | undefined;
     /**
      * The mounted body's identity. Minted when the item is created and kept by
      * `rekey`, so a draft that receives its durable id keeps its live body.
@@ -661,6 +681,12 @@ interface CanvasPresentation {
     /** How many panes the window's canvas shows right now. */
     readonly paneCount: number;
 }
+/**
+ * THE phone breakpoint: a viewport at most this wide (CSS px) is a phone —
+ * the canvas is a full-screen layer and presents ONE pane at a time. Same
+ * number as styles.css `@media (max-width: 767px)`.
+ */
+declare const CANVAS_PHONE_MAX_WIDTH = 767;
 /** Under this width (px) a body is narrow. */
 declare const CANVAS_NARROW_WIDTH = 480;
 declare function canvasOrientation(width: number, height: number): CanvasPresentationOrientation;
@@ -706,4 +732,4 @@ interface ToggleKindInput {
 /** Returns what the item is after the click. */
 declare function toggleKind(controller: CanvasController, input: ToggleKindInput): CanvasKindVisibility;
 
-export { canvasPresentation as $, type CanvasErrorSink as A, type CanvasKeyValueStore as B, type CanvasItemId as C, type CanvasKindVisibility as D, type CanvasLayoutRules as E, type CanvasNavigateInput as F, type CanvasOpenInput as G, type CanvasOpenTarget as H, type CanvasOrientation as I, type CanvasPersistencePort as J, type CanvasPreferredTarget as K, type CanvasPresentation as L, type CanvasPresentationOrientation as M, type CanvasRect as N, type CanvasSessionAttachReason as O, type CanvasSessionDetachReason as P, type CanvasSessionEvent as Q, type CanvasSessionHooks as R, type CanvasSplitId as S, type CanvasWindowCloseMode as T, type CanvasWindowFrame as U, type CanvasWindowPorts as V, type ReduxStoreLike as W, type ToggleKindInput as X, bindCanvasToReduxStore as Y, canvasActions as Z, canvasOrientation as _, type CanvasWindowId as a, canvasReducer as a0, canvasWindowFrame as a1, canvasWindowOfPane as a2, clampDraggedCanvasWidth as a3, consoleCanvasErrorSink as a4, createCanvasController as a5, createCanvasStore as a6, createInitialCanvasState as a7, createKeyValueCanvasPersistence as a8, createLocalStorageCanvasPersistence as a9, defaultCanvasWidth as aa, fitCanvasWidth as ab, foldCanvasWindows as ac, isCanvasAction as ad, listCanvasWindowIds as ae, preferredFlowDirection as af, resolveCanvasLayoutRules as ag, sanitizeCanvasSnapshot as ah, selectCanvasKindVisibility as ai, shouldStackSplit as aj, toPersistableSnapshot as ak, toggleKind as al, type CanvasJson as b, type CanvasLayoutNode as c, type CanvasPaneId as d, type CanvasStoreBinding as e, type CanvasState as f, type CanvasAction as g, type CanvasController as h, type CanvasItem as i, type CanvasExtraWindow as j, type CanvasHistoryEntry as k, type CanvasPane as l, canvasWindowOfItem as m, CANVAS_DEFAULT_KEY as n, CANVAS_DEFAULT_WIDTH as o, CANVAS_DESKTOP_LAYOUT_RULES as p, CANVAS_HISTORY_LIMIT as q, CANVAS_LAUNCHER_KIND as r, CANVAS_MAIN_WINDOW as s, CANVAS_MIN_SPLIT_FRACTION as t, CANVAS_MIN_WIDTH as u, CANVAS_NARROW_WIDTH as v, CANVAS_STORAGE_KEY as w, CANVAS_WEB_LAYOUT_RULES as x, type CanvasControllerOptions as y, type CanvasErrorReport as z };
+export { canvasActions as $, type CanvasControllerOptions as A, type CanvasErrorReport as B, type CanvasItemId as C, type CanvasErrorSink as D, type CanvasKeyValueStore as E, type CanvasKindVisibility as F, type CanvasLayoutRules as G, type CanvasNavigateInput as H, type CanvasOpenInput as I, type CanvasOpenTarget as J, type CanvasOrientation as K, type CanvasPersistencePort as L, type CanvasPreferredTarget as M, type CanvasPresentation as N, type CanvasPresentationOrientation as O, type CanvasRect as P, type CanvasSessionAttachReason as Q, type CanvasSessionDetachReason as R, type CanvasSessionEvent as S, type CanvasSessionHooks as T, type CanvasSplitId as U, type CanvasWindowCloseMode as V, type CanvasWindowFrame as W, type CanvasWindowPorts as X, type ReduxStoreLike as Y, type ToggleKindInput as Z, bindCanvasToReduxStore as _, type CanvasWindowId as a, canvasOrientation as a0, canvasPresentation as a1, canvasReducer as a2, canvasWindowFrame as a3, canvasWindowOfPane as a4, clampDraggedCanvasWidth as a5, consoleCanvasErrorSink as a6, createCanvasController as a7, createCanvasStore as a8, createInitialCanvasState as a9, createKeyValueCanvasPersistence as aa, createLocalStorageCanvasPersistence as ab, defaultCanvasWidth as ac, fitCanvasWidth as ad, foldCanvasWindows as ae, isCanvasAction as af, listCanvasWindowIds as ag, preferredFlowDirection as ah, resolveCanvasLayoutRules as ai, sanitizeCanvasSnapshot as aj, selectCanvasKindVisibility as ak, shouldStackSplit as al, toPersistableSnapshot as am, toggleKind as an, type CanvasJson as b, type CanvasLayoutNode as c, type CanvasPaneId as d, type CanvasStoreBinding as e, type CanvasState as f, type CanvasAction as g, type CanvasController as h, type CanvasItem as i, type CanvasExtraWindow as j, type CanvasHistoryEntry as k, type CanvasPane as l, canvasWindowOfItem as m, CANVAS_DEFAULT_KEY as n, CANVAS_DEFAULT_WIDTH as o, CANVAS_DESKTOP_LAYOUT_RULES as p, CANVAS_HISTORY_LIMIT as q, CANVAS_KEEP_ALIVE_DEPTH as r, CANVAS_LAUNCHER_KIND as s, CANVAS_MAIN_WINDOW as t, CANVAS_MIN_SPLIT_FRACTION as u, CANVAS_MIN_WIDTH as v, CANVAS_NARROW_WIDTH as w, CANVAS_PHONE_MAX_WIDTH as x, CANVAS_STORAGE_KEY as y, CANVAS_WEB_LAYOUT_RULES as z };

package/dist/{toggleKind-BD78LnMB.d.ts → toggleKind-DhDmWExm.d.ts}

@@ -46,11 +46,24 @@ interface CanvasHistoryEntry {
     readonly key: string;
     readonly title: string | null;
     readonly data: CanvasJson;
+    /**
+     * The body this content had (its item's `instance`). Back and a navigate to
+     * a kept step reuse it, so the SAME live body comes back (a typed draft, a
+     * scroll position) while the layer still holds it mounted.
+     */
+    readonly instance?: string | undefined;
 }
 /** The built-in "New tab" item: the launcher, shown as a tab. Never registered as a kind. */
 declare const CANVAS_LAUNCHER_KIND = "canvas.launcher";
 /** How many steps Back can go in one tab. Older entries fall off. */
 declare const CANVAS_HISTORY_LIMIT = 50;
+/**
+ * How many earlier contents of one tab keep their body MOUNTED (hidden), in
+ * each direction: the newest steps Back reaches, and the contents Back left
+ * (`CanvasItem.kept`). Older steps still work — their body mounts fresh.
+ * Only closing the tab disposes the kept bodies.
+ */
+declare const CANVAS_KEEP_ALIVE_DEPTH = 5;
 interface CanvasItem {
     readonly id: CanvasItemId;
     /** Registered kind id (see `registerCanvasKind`). */
@@ -64,6 +77,13 @@ interface CanvasItem {
     readonly updatedAt: number;
     /** Earlier contents of this tab, oldest first (navigate in place). Absent = no Back. */
     readonly history?: readonly CanvasHistoryEntry[] | undefined;
+    /**
+     * Contents this tab showed that Back has stepped away from (newest last, at
+     * most CANVAS_KEEP_ALIVE_DEPTH). Navigating to one again brings back its
+     * live body instead of a new one: "+" → Quick Chat → type → Back → Quick
+     * Chat finds the draft.
+     */
+    readonly kept?: readonly CanvasHistoryEntry[] | undefined;
     /**
      * The mounted body's identity. Minted when the item is created and kept by
      * `rekey`, so a draft that receives its durable id keeps its live body.
@@ -661,6 +681,12 @@ interface CanvasPresentation {
     /** How many panes the window's canvas shows right now. */
     readonly paneCount: number;
 }
+/**
+ * THE phone breakpoint: a viewport at most this wide (CSS px) is a phone —
+ * the canvas is a full-screen layer and presents ONE pane at a time. Same
+ * number as styles.css `@media (max-width: 767px)`.
+ */
+declare const CANVAS_PHONE_MAX_WIDTH = 767;
 /** Under this width (px) a body is narrow. */
 declare const CANVAS_NARROW_WIDTH = 480;
 declare function canvasOrientation(width: number, height: number): CanvasPresentationOrientation;
@@ -706,4 +732,4 @@ interface ToggleKindInput {
 /** Returns what the item is after the click. */
 declare function toggleKind(controller: CanvasController, input: ToggleKindInput): CanvasKindVisibility;
 
-export { canvasPresentation as $, type CanvasErrorSink as A, type CanvasKeyValueStore as B, type CanvasItemId as C, type CanvasKindVisibility as D, type CanvasLayoutRules as E, type CanvasNavigateInput as F, type CanvasOpenInput as G, type CanvasOpenTarget as H, type CanvasOrientation as I, type CanvasPersistencePort as J, type CanvasPreferredTarget as K, type CanvasPresentation as L, type CanvasPresentationOrientation as M, type CanvasRect as N, type CanvasSessionAttachReason as O, type CanvasSessionDetachReason as P, type CanvasSessionEvent as Q, type CanvasSessionHooks as R, type CanvasSplitId as S, type CanvasWindowCloseMode as T, type CanvasWindowFrame as U, type CanvasWindowPorts as V, type ReduxStoreLike as W, type ToggleKindInput as X, bindCanvasToReduxStore as Y, canvasActions as Z, canvasOrientation as _, type CanvasWindowId as a, canvasReducer as a0, canvasWindowFrame as a1, canvasWindowOfPane as a2, clampDraggedCanvasWidth as a3, consoleCanvasErrorSink as a4, createCanvasController as a5, createCanvasStore as a6, createInitialCanvasState as a7, createKeyValueCanvasPersistence as a8, createLocalStorageCanvasPersistence as a9, defaultCanvasWidth as aa, fitCanvasWidth as ab, foldCanvasWindows as ac, isCanvasAction as ad, listCanvasWindowIds as ae, preferredFlowDirection as af, resolveCanvasLayoutRules as ag, sanitizeCanvasSnapshot as ah, selectCanvasKindVisibility as ai, shouldStackSplit as aj, toPersistableSnapshot as ak, toggleKind as al, type CanvasJson as b, type CanvasLayoutNode as c, type CanvasPaneId as d, type CanvasStoreBinding as e, type CanvasState as f, type CanvasAction as g, type CanvasController as h, type CanvasItem as i, type CanvasExtraWindow as j, type CanvasHistoryEntry as k, type CanvasPane as l, canvasWindowOfItem as m, CANVAS_DEFAULT_KEY as n, CANVAS_DEFAULT_WIDTH as o, CANVAS_DESKTOP_LAYOUT_RULES as p, CANVAS_HISTORY_LIMIT as q, CANVAS_LAUNCHER_KIND as r, CANVAS_MAIN_WINDOW as s, CANVAS_MIN_SPLIT_FRACTION as t, CANVAS_MIN_WIDTH as u, CANVAS_NARROW_WIDTH as v, CANVAS_STORAGE_KEY as w, CANVAS_WEB_LAYOUT_RULES as x, type CanvasControllerOptions as y, type CanvasErrorReport as z };
+export { canvasActions as $, type CanvasControllerOptions as A, type CanvasErrorReport as B, type CanvasItemId as C, type CanvasErrorSink as D, type CanvasKeyValueStore as E, type CanvasKindVisibility as F, type CanvasLayoutRules as G, type CanvasNavigateInput as H, type CanvasOpenInput as I, type CanvasOpenTarget as J, type CanvasOrientation as K, type CanvasPersistencePort as L, type CanvasPreferredTarget as M, type CanvasPresentation as N, type CanvasPresentationOrientation as O, type CanvasRect as P, type CanvasSessionAttachReason as Q, type CanvasSessionDetachReason as R, type CanvasSessionEvent as S, type CanvasSessionHooks as T, type CanvasSplitId as U, type CanvasWindowCloseMode as V, type CanvasWindowFrame as W, type CanvasWindowPorts as X, type ReduxStoreLike as Y, type ToggleKindInput as Z, bindCanvasToReduxStore as _, type CanvasWindowId as a, canvasOrientation as a0, canvasPresentation as a1, canvasReducer as a2, canvasWindowFrame as a3, canvasWindowOfPane as a4, clampDraggedCanvasWidth as a5, consoleCanvasErrorSink as a6, createCanvasController as a7, createCanvasStore as a8, createInitialCanvasState as a9, createKeyValueCanvasPersistence as aa, createLocalStorageCanvasPersistence as ab, defaultCanvasWidth as ac, fitCanvasWidth as ad, foldCanvasWindows as ae, isCanvasAction as af, listCanvasWindowIds as ag, preferredFlowDirection as ah, resolveCanvasLayoutRules as ai, sanitizeCanvasSnapshot as aj, selectCanvasKindVisibility as ak, shouldStackSplit as al, toPersistableSnapshot as am, toggleKind as an, type CanvasJson as b, type CanvasLayoutNode as c, type CanvasPaneId as d, type CanvasStoreBinding as e, type CanvasState as f, type CanvasAction as g, type CanvasController as h, type CanvasItem as i, type CanvasExtraWindow as j, type CanvasHistoryEntry as k, type CanvasPane as l, canvasWindowOfItem as m, CANVAS_DEFAULT_KEY as n, CANVAS_DEFAULT_WIDTH as o, CANVAS_DESKTOP_LAYOUT_RULES as p, CANVAS_HISTORY_LIMIT as q, CANVAS_KEEP_ALIVE_DEPTH as r, CANVAS_LAUNCHER_KIND as s, CANVAS_MAIN_WINDOW as t, CANVAS_MIN_SPLIT_FRACTION as u, CANVAS_MIN_WIDTH as v, CANVAS_NARROW_WIDTH as w, CANVAS_PHONE_MAX_WIDTH as x, CANVAS_STORAGE_KEY as y, CANVAS_WEB_LAYOUT_RULES as z };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-matrx/canvas",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "description": "The AI Matrx canvas: a docked right-hand column with split panes, tabs, full screen, a kind registry, Redux-compatible state and persistence.",
   "type": "module",
   "main": "./dist/index.cjs",