flexdesk 0.7.0 → 0.8.0

package/README.md

@@ -121,6 +121,7 @@ await createShell({
     promoteInPlace: true,    // a window floated out of a tile stays inside that tile's pane
     backToOpenList: true,    // Back in a record opened beside its list closes onto that list
     floatActiveTab: true,    // floating a tile takes the tab on screen, not the whole pane
+    tabLayout: 'header',     // tabs in the tile header, in place of its title, with a + (0.8.0)
     chrome: {
         topNav: document.getElementById('nav'),
         zoom:   document.getElementById('status-bar'),   // content zoom, 50–200%
@@ -151,6 +152,18 @@ views of one pane. The float button, Alt+F and the tile menu take only the tab
 on screen and leave its siblings in the tile, so the window holds one tab and
 draws no strip. Without it the whole pane floats, strip and all.
 
+**`tabLayout`** says where a tile draws its tabs. `'bottom'` (the default) is
+the spreadsheet strip under the body, shown from two tabs. `'top'` is the
+editor tab bar between the header and the body, also from two tabs.
+`'header'` (0.8.0) puts that tab bar inside the header in place of the title,
+on every tile, one tab included, with a `+` after the last tab that opens the
+taxonomy root in a new tab (`wm.newTab(leafId)`, the same seed a split uses).
+A panel tile has no tabs and keeps its title. Under `'header'` the tab, not
+the header, is what you drag to move a single-tab pane; the empty part of the
+header still floats the pane on a pull-down or a double-click. Set
+`data-twm-tabs` on the shell's root, or call `wm.setTabLayout()`, to switch
+live; nothing mounted in a tile is unmounted.
+
 **Back and the breadcrumb are one rule.** `wm.navigateBack()` (Backspace) and
 `wm.navigateUp(kind, props, { ctx })` (every breadcrumb crumb) share it. With
 `backToOpenList`, a record whose section has a list open closes onto that list;

package/css/base.css

@@ -4844,6 +4844,81 @@ button.twm-about-dialog__btn--close:focus {
 .twm-window-body { flex: 1 1 auto; min-height: 0; min-width: 0; }
 
 
+/* ══ C38. THE TABS ARE THE TITLE ═════════════════════════════════════
+ *
+ * `tabLayout: 'header'` mounts the same strip INSIDE the chrome, in place of
+ * the title, on every content tile (`tile_renderer.js`, C38). The renderer
+ * marks such a leaf `twm-leaf--tabs-in-header`; a panel, which has no tabs,
+ * is not marked and keeps its title.
+ *
+ * Every selector here is two classes or more, so none of it depends on
+ * whether this sheet or the one holding `.twm-leaf__chrome` loads first.
+ *
+ * The chrome grows to the editor strip's 26px rather than the strip shrinking
+ * to 22: one 26px row replaces a 22px row plus a 26px one. */
+.twm-leaf--tabs-in-header > .twm-leaf__chrome {
+    height: 26px;
+    padding-left: 0;
+    gap: var(--space-sm);
+}
+.twm-leaf--tabs-in-header > .twm-leaf__chrome > .twm-leaf__title,
+.twm-leaf--tabs-in-header > .twm-leaf__chrome > .twm-leaf__icon.material-symbols-outlined {
+    display: none;
+}
+
+/* The strip takes the room the title had, and the actions keep the right. */
+.twm-leaf__tabbar.twm-leaf__tabbar--header {
+    flex: 1 1 auto;
+    align-self: stretch;
+    min-width: 0;
+    height: auto;
+    padding: 0;
+    border: none;
+    background: transparent;
+    overflow: hidden;
+}
+
+/* `0 1 auto`, not the top strip's `1 1 auto`: the list is only as wide as
+ * its tabs, so the `+` sits right after the last one rather than at the far
+ * end of the chrome. It still shrinks, and scrolls, when the tabs outgrow it. */
+.twm-leaf__tabbar--header > .tabs.notebook-tabs {
+    flex: 0 1 auto;
+    min-width: 0;
+    background: transparent;
+}
+
+/* An inactive tab is the chrome's colour, focused or not, so the active one —
+ * the body's colour — is the only box in the row. */
+.twm-leaf__tabbar--header .notebook-tabs > .tab:not(.active) { background: transparent; }
+.twm-leaf__tabbar--header .notebook-tabs > .tab:not(.active):hover {
+    background: var(--state-hover);
+    color: var(--text-primary);
+}
+
+.twm-leaf__tabbar--header > .twm-leaf__tab-new {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    padding: 0;
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    color: var(--text-muted);
+    cursor: pointer;
+}
+.twm-leaf__tabbar--header > .twm-leaf__tab-new:hover {
+    background: var(--state-hover);
+    color: var(--text-primary);
+}
+/* Two classes, for the Material Symbols tie — see `.twm-leaf__icon`. */
+.twm-leaf__tab-new .material-symbols-outlined {
+    font-size: 16px;
+    line-height: 1;
+}
+
+
 /* ══ NotebookTabBar ══════════════════════════════════════════════════
  *
  * A CLASS ONE SIDE KNOWS AND THE OTHER HAD NEVER HEARD OF — the fifth in this

package/css/flexdesk.css

@@ -5971,6 +5971,81 @@ body.twm-dragging * { user-select: none; }
  * strip is pushed off the bottom edge. */
 .twm-window-body { flex: 1 1 auto; min-height: 0; min-width: 0; }
 
+
+/* ══ C38. THE TABS ARE THE TITLE ═════════════════════════════════════
+ *
+ * `tabLayout: 'header'` mounts the same strip INSIDE the chrome, in place of
+ * the title, on every content tile (`tile_renderer.js`, C38). The renderer
+ * marks such a leaf `twm-leaf--tabs-in-header`; a panel, which has no tabs,
+ * is not marked and keeps its title.
+ *
+ * Every selector here is two classes or more, so none of it depends on
+ * whether this sheet or the one holding `.twm-leaf__chrome` loads first.
+ *
+ * The chrome grows to the editor strip's 26px rather than the strip shrinking
+ * to 22: one 26px row replaces a 22px row plus a 26px one. */
+.twm-leaf--tabs-in-header > .twm-leaf__chrome {
+    height: 26px;
+    padding-left: 0;
+    gap: var(--space-sm);
+}
+.twm-leaf--tabs-in-header > .twm-leaf__chrome > .twm-leaf__title,
+.twm-leaf--tabs-in-header > .twm-leaf__chrome > .twm-leaf__icon.material-symbols-outlined {
+    display: none;
+}
+
+/* The strip takes the room the title had, and the actions keep the right. */
+.twm-leaf__tabbar.twm-leaf__tabbar--header {
+    flex: 1 1 auto;
+    align-self: stretch;
+    min-width: 0;
+    height: auto;
+    padding: 0;
+    border: none;
+    background: transparent;
+    overflow: hidden;
+}
+
+/* `0 1 auto`, not the top strip's `1 1 auto`: the list is only as wide as
+ * its tabs, so the `+` sits right after the last one rather than at the far
+ * end of the chrome. It still shrinks, and scrolls, when the tabs outgrow it. */
+.twm-leaf__tabbar--header > .tabs.notebook-tabs {
+    flex: 0 1 auto;
+    min-width: 0;
+    background: transparent;
+}
+
+/* An inactive tab is the chrome's colour, focused or not, so the active one —
+ * the body's colour — is the only box in the row. */
+.twm-leaf__tabbar--header .notebook-tabs > .tab:not(.active) { background: transparent; }
+.twm-leaf__tabbar--header .notebook-tabs > .tab:not(.active):hover {
+    background: var(--state-hover);
+    color: var(--text-primary);
+}
+
+.twm-leaf__tabbar--header > .twm-leaf__tab-new {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    padding: 0;
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    color: var(--text-muted);
+    cursor: pointer;
+}
+.twm-leaf__tabbar--header > .twm-leaf__tab-new:hover {
+    background: var(--state-hover);
+    color: var(--text-primary);
+}
+/* Two classes, for the Material Symbols tie — see `.twm-leaf__icon`. */
+.twm-leaf__tab-new .material-symbols-outlined {
+    font-size: 16px;
+    line-height: 1;
+}
+
 /* ══ NotebookTabBar ══════════════════════════════════════════════════
  *
  * A CLASS ONE SIDE KNOWS AND THE OTHER HAD NEVER HEARD OF — the fifth in this

package/dist/flexdesk.css

@@ -5971,6 +5971,81 @@ body.twm-dragging * { user-select: none; }
  * strip is pushed off the bottom edge. */
 .twm-window-body { flex: 1 1 auto; min-height: 0; min-width: 0; }
 
+
+/* ══ C38. THE TABS ARE THE TITLE ═════════════════════════════════════
+ *
+ * `tabLayout: 'header'` mounts the same strip INSIDE the chrome, in place of
+ * the title, on every content tile (`tile_renderer.js`, C38). The renderer
+ * marks such a leaf `twm-leaf--tabs-in-header`; a panel, which has no tabs,
+ * is not marked and keeps its title.
+ *
+ * Every selector here is two classes or more, so none of it depends on
+ * whether this sheet or the one holding `.twm-leaf__chrome` loads first.
+ *
+ * The chrome grows to the editor strip's 26px rather than the strip shrinking
+ * to 22: one 26px row replaces a 22px row plus a 26px one. */
+.twm-leaf--tabs-in-header > .twm-leaf__chrome {
+    height: 26px;
+    padding-left: 0;
+    gap: var(--space-sm);
+}
+.twm-leaf--tabs-in-header > .twm-leaf__chrome > .twm-leaf__title,
+.twm-leaf--tabs-in-header > .twm-leaf__chrome > .twm-leaf__icon.material-symbols-outlined {
+    display: none;
+}
+
+/* The strip takes the room the title had, and the actions keep the right. */
+.twm-leaf__tabbar.twm-leaf__tabbar--header {
+    flex: 1 1 auto;
+    align-self: stretch;
+    min-width: 0;
+    height: auto;
+    padding: 0;
+    border: none;
+    background: transparent;
+    overflow: hidden;
+}
+
+/* `0 1 auto`, not the top strip's `1 1 auto`: the list is only as wide as
+ * its tabs, so the `+` sits right after the last one rather than at the far
+ * end of the chrome. It still shrinks, and scrolls, when the tabs outgrow it. */
+.twm-leaf__tabbar--header > .tabs.notebook-tabs {
+    flex: 0 1 auto;
+    min-width: 0;
+    background: transparent;
+}
+
+/* An inactive tab is the chrome's colour, focused or not, so the active one —
+ * the body's colour — is the only box in the row. */
+.twm-leaf__tabbar--header .notebook-tabs > .tab:not(.active) { background: transparent; }
+.twm-leaf__tabbar--header .notebook-tabs > .tab:not(.active):hover {
+    background: var(--state-hover);
+    color: var(--text-primary);
+}
+
+.twm-leaf__tabbar--header > .twm-leaf__tab-new {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    padding: 0;
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    color: var(--text-muted);
+    cursor: pointer;
+}
+.twm-leaf__tabbar--header > .twm-leaf__tab-new:hover {
+    background: var(--state-hover);
+    color: var(--text-primary);
+}
+/* Two classes, for the Material Symbols tie — see `.twm-leaf__icon`. */
+.twm-leaf__tab-new .material-symbols-outlined {
+    font-size: 16px;
+    line-height: 1;
+}
+
 /* ══ NotebookTabBar ══════════════════════════════════════════════════
  *
  * A CLASS ONE SIDE KNOWS AND THE OTHER HAD NEVER HEARD OF — the fifth in this

package/dist/wm.js

@@ -2689,7 +2689,7 @@ function createPageFactories({ eventBus = null, events = {}, refreshOn = {} } =
 
 // src/tiling/tile_renderer.js
 var SPLITTER_PX = 4;
-var TAB_LAYOUTS = ["bottom", "top"];
+var TAB_LAYOUTS = ["bottom", "top", "header"];
 var DEFAULT_TAB_LAYOUT = "bottom";
 function _normalizeTabLayout(value) {
   return TAB_LAYOUTS.includes(value) ? value : DEFAULT_TAB_LAYOUT;
@@ -2702,7 +2702,7 @@ function _tabKeyIndex(key) {
   return Number.isInteger(n) && n >= 0 ? n : -1;
 }
 var TILE_LIFT_PX = 24;
-var CHROME_NO_FLOAT = "button, .twm-leaf__tab";
+var CHROME_NO_FLOAT = "button, .twm-leaf__tab, .notebook-tabs .tab";
 function _isDownwardPull(down, sideways) {
   return down > 0 && sideways <= down;
 }
@@ -2877,6 +2877,7 @@ var TileRenderer = class {
     if (entry && entry.kindKey === kindKey) {
       entry.titleEl.textContent = leaf.title || (leaf.content ? leaf.content.kind : "empty");
       _paintLeafIcon(entry.iconEl, leaf, entry.content, this.ctx);
+      if (this.tabLayout === "header") this._refreshHeaderLabels(leaf, entry);
       return entry.wrapEl;
     }
     if (entry) {
@@ -2928,7 +2929,14 @@ var TileRenderer = class {
     if (!Array.isArray(leaf.tabs) || leaf.tabs.length <= 1) {
       tabBar.classList.add("twm-leaf__tabbar--hidden");
     }
-    wrap.append(chrome, ...this.tabLayout === "top" ? [tabBar, body] : [body, tabBar]);
+    wrap.append(chrome, body, tabBar);
+    this._placeTabBar({
+      wrapEl: wrap,
+      bodyEl: body,
+      chromeEl: chrome,
+      titleEl: title,
+      tabBarEl: tabBar
+    });
     wrap.addEventListener("mousedown", (e) => {
       if (e.target.closest(".twm-splitter")) return;
       this.tree.focus(leaf.id);
@@ -3148,9 +3156,10 @@ var TileRenderer = class {
    *  attached element is a re-parent, not a rebuild — the body keeps its
    *  DOM, its listeners and its scroll. */
   _placeTabBar(entry) {
-    const { wrapEl, bodyEl, tabBarEl } = entry;
+    const { wrapEl, bodyEl, tabBarEl, chromeEl, titleEl } = entry;
     if (!wrapEl || !tabBarEl || !bodyEl) return;
-    if (this.tabLayout === "top") wrapEl.insertBefore(tabBarEl, bodyEl);
+    if (this.tabLayout === "header" && chromeEl && titleEl) titleEl.after(tabBarEl);
+    else if (this.tabLayout === "top") wrapEl.insertBefore(tabBarEl, bodyEl);
     else wrapEl.appendChild(tabBarEl);
   }
   /** Tear down the `top` layout's component, if this leaf has one. Safe to
@@ -3173,16 +3182,42 @@ var TileRenderer = class {
     const bar = entry.tabBarEl;
     if (!bar) return;
     const tabs = Array.isArray(leaf.tabs) ? leaf.tabs : [];
+    const header = this.tabLayout === "header";
     bar.classList.toggle("twm-leaf__tabbar--top", this.tabLayout === "top");
-    if (tabs.length <= 1) {
+    bar.classList.toggle("twm-leaf__tabbar--header", header);
+    const isPanel = String(leaf.content?.kind || "").startsWith("panel:");
+    const inHeader = header && !isPanel && !!leaf.content && tabs.length >= 1;
+    entry.wrapEl?.classList.toggle("twm-leaf--tabs-in-header", inHeader);
+    if (!inHeader && tabs.length <= 1) {
       bar.classList.add("twm-leaf__tabbar--hidden");
       this._disposeTabStrip(entry);
       bar.innerHTML = "";
       return;
     }
     bar.classList.remove("twm-leaf__tabbar--hidden");
-    if (this.tabLayout === "top") this._renderTopTabBar(leaf, entry, tabs);
-    else this._renderBottomTabBar(leaf, entry, tabs);
+    if (this.tabLayout === "bottom") this._renderBottomTabBar(leaf, entry, tabs);
+    else this._renderTopTabBar(leaf, entry, tabs);
+  }
+  /** C38. The labels the `header` strip shows for `leaf`, in one string, so
+   *  a repaint can tell whether anything it draws has changed. */
+  _headerLabels(leaf, entry) {
+    const tabs = Array.isArray(leaf.tabs) ? leaf.tabs : [];
+    const activeIdx = Math.max(0, Math.min(tabs.length - 1, leaf.activeTabIdx || 0));
+    return tabs.map((t, i) => this._tabLabel(t, i === activeIdx, entry)).join("\n");
+  }
+  /** C38. A cached leaf is not re-mounted, so a tab renamed in the tree
+   *  (`TileTree.renameMatchingTabs`) reaches the strip only through here. */
+  _refreshHeaderLabels(leaf, entry) {
+    const labels = this._headerLabels(leaf, entry);
+    if (entry.headerLabels === labels) return;
+    this._renderTabBar(leaf, entry);
+  }
+  /** What a tab in the `top` or `header` strip is called. A tab with no
+   *  title of its own falls back, when it is the active one, to the title
+   *  its content gave at mount — the string the chrome title would have
+   *  shown, and under `header` the chrome title is hidden (C38). */
+  _tabLabel(t, active, entry) {
+    return t.title || active && entry?.content?.title || t.kind || "";
   }
   /**
    * C33. THE CHROME IS THE DRAG SOURCE FOR A LEAF THAT HAS ONE TAB.
@@ -3218,12 +3253,13 @@ var TileRenderer = class {
     const tabs = Array.isArray(leaf.tabs) ? leaf.tabs : [];
     const isPanel = String(leaf.content?.kind || "").startsWith("panel:");
     const vetoed = this.leafChrome(leaf.id)?.promote === false;
-    const on = tabs.length === 1 && !isPanel && !vetoed;
+    const on = tabs.length === 1 && !isPanel && !vetoed && this.tabLayout !== "header";
     if (on) chrome.setAttribute("draggable", "true");
     else chrome.removeAttribute("draggable");
     if (chrome.__twmTabDragBound) return;
     chrome.__twmTabDragBound = true;
     chrome.addEventListener("dragstart", (ev) => {
+      if (entry.tabBarEl?.contains(ev.target)) return;
       if (ev.target?.closest?.(CHROME_NO_FLOAT)) {
         ev.preventDefault();
         return;
@@ -3282,11 +3318,27 @@ var TileRenderer = class {
         );
       }, true);
     }
+    if (this.tabLayout === "header" && !bar.querySelector(".twm-leaf__tab-new")) {
+      const add = document.createElement("button");
+      add.type = "button";
+      add.className = "twm-leaf__tab-new";
+      add.dataset.action = "tab-new";
+      add.title = "New tab";
+      add.setAttribute("aria-label", "New tab");
+      add.innerHTML = '<span class="material-symbols-outlined">add</span>';
+      add.addEventListener("click", (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.ctx.onLeafTabAction?.(leaf.id, "new", {});
+      });
+      bar.appendChild(add);
+    }
     const activeIdx = Math.max(0, Math.min(tabs.length - 1, leaf.activeTabIdx || 0));
+    entry.headerLabels = this._headerLabels(leaf, entry);
     entry.tabStrip.update(
       tabs.map((t, i) => ({
         filePath: _tabKey(i),
-        label: t.title || t.kind || "",
+        label: this._tabLabel(t, i === activeIdx, entry),
         // The component's `fileType` picks a glyph out of a static map
         // of FILE kinds. A tile's kinds are the embedder's, and the
         // taxonomy already answers for them — see `_paintTopTabs`.
@@ -3299,7 +3351,7 @@ var TileRenderer = class {
       })),
       _tabKey(activeIdx)
     );
-    this._paintTopTabs(entry.tabStripHostEl, tabs);
+    this._paintTopTabs(entry.tabStripHostEl, tabs, activeIdx, entry);
   }
   /**
    * The two things `NotebookTabBar` derives from a vocabulary a tile does not
@@ -3318,13 +3370,13 @@ var TileRenderer = class {
    * rendered last. The class names used here are the component's published
    * contract, stated in its header comment.
    */
-  _paintTopTabs(hostEl, tabs) {
+  _paintTopTabs(hostEl, tabs, activeIdx = -1, entry = null) {
     if (!hostEl) return;
     const els = hostEl.querySelectorAll(".tab");
     els.forEach((el, i) => {
       const spec = tabs[i];
       if (!spec) return;
-      el.title = spec.title || spec.kind || "";
+      el.title = this._tabLabel(spec, i === activeIdx, entry);
       const icon = spec.kind ? this.ctx?.taxonomy?.meta?.(spec.kind)?.icon : null;
       const glyph = el.querySelector(".tab-icon");
       if (glyph && icon) glyph.textContent = icon;
@@ -4089,6 +4141,23 @@ var WindowManager = class _WindowManager {
   setTabLayout(layout) {
     this.renderer.setTabLayout(layout);
   }
+  /** C38. Open a new tab in a tile and show it. It holds the taxonomy root —
+   *  what a split seeds its new pane with, so "a new tab" and "a new pane"
+   *  start in the same place. Defaults to the focused tile. A panel tile
+   *  grows no tabs (`TileTree.appendLeafTab`); then this does nothing and
+   *  answers -1, else the new tab's index. */
+  newTab(leafId = null) {
+    const tree = this._tree();
+    const id = leafId ?? tree.focusedLeafId;
+    const seed = this._rootLeaf();
+    const idx = tree.appendLeafTab(id, seed.content, seed.title);
+    if (idx < 0) return -1;
+    tree.focus(id);
+    this.renderer.render();
+    this._persist();
+    this._notifyChange("tab-new");
+    return idx;
+  }
   /** Emit on bus + call onChange. Use this instead of the bare callback
    *  so other surfaces (palette, top-bar toggles, page shortcuts) can
    *  subscribe through the existing event system. */
@@ -6706,6 +6775,10 @@ var WindowManager = class _WindowManager {
       this._notifyChange("twm-tab-close");
       return;
     }
+    if (action === "new") {
+      this.newTab(leafId);
+      return;
+    }
     if (action === "move") {
       tree.moveLeafTab(leafId, data.from, data.to);
       this.renderer.render();