@jxsuite/studio 6.1.2 → 8.0.0

package/src/panels/styles-panel.ts

@@ -0,0 +1,327 @@
+/// <reference lib="dom" />
+/**
+ * The Styles panel — the Styles workspace's Navigator panel (`specs/studio.md` §7.1).
+ *
+ * The Styles workspace edits the project's styles in `project.json`, and this panel is the map of
+ * them, in the order a visit usually needs it:
+ *
+ * - **Variables.** Every CSS custom property in the root style block, by its real name, grouped as
+ *   the Variables view groups them (`style/project-styles.ts` `groupTokens`: Colors, Fonts, Sizes &
+ *   Spacing, and Other only when something is in it), each group with its count and each colour
+ *   with a swatch of what it resolves to. A group heading or a property switches the pane to the
+ *   Variables view and brings it on screen there (`style/variables-focus.ts`); **Add variable**
+ *   focuses the view's own add row, so a variable is added the one way the editor adds one.
+ * - **Elements.** The element defaults, by tag name: the specimen catalogue's tags
+ *   (`data/stylebook-meta.json`) and the project's components, a dot on each tag project.json
+ *   already styles. A row switches the pane to the Elements view and selects the tag there
+ *   (`selectStylebookTag`), with the Inspector open on Element › Style.
+ * - **Color schemes.** The schemes `$media` declares (`listTokenContexts`), and **Manage color
+ *   schemes…**, which opens Project Settings › Contexts, where they are defined.
+ *
+ * It replaces the Outline as the Styles workspace's Navigator. The Outline still lists the element
+ * catalogue beside a document's Elements view (`panels/stylebook-layers-panel.ts`), which is how a
+ * page or a component styles its own element defaults in Design; the variables list it drew beside
+ * the Variables view moved here, beside the variables' groups, counts and swatches.
+ *
+ * Nothing here writes a style. Every edit happens in the view the row leads to, under that view's
+ * own save rule (`style/variables-view.ts` `VARIABLES_SAVING`).
+ *
+ * @docs studio/design/tokens
+ */
+
+import { nothing } from "lit-html";
+import { effect, effectScope } from "../reactivity";
+import { projectState } from "../store";
+import { setDockCollapsed, shell } from "../shell";
+import { workspace } from "../workspace/workspace";
+import { PROJECT_CONFIG_PATH } from "../tabs/tab";
+import { componentRegistry } from "../files/components";
+import { runActiveReported } from "../commands/run-reported";
+import { showSettingsDocument } from "../settings/settings-document";
+import { groupIdOfToken, groupTokens, listTokenContexts } from "../style/project-styles";
+import { resolveTokenValue } from "../style/token-ref";
+import { requestVariablesFocus } from "../style/variables-focus";
+import { catalogueRows, hasTagStyle } from "./stylebook-doc";
+import { selectStylebookTag, stylebookMeta } from "./stylebook-panel";
+import { INDENT_BASE, INDENT_STEP } from "./stylebook-layers-panel";
+import { mountStylesPanelSurface } from "../surfaces/styles-panel";
+import { registerPanel } from "./panel-registry";
+import { isNonNullObject, isString } from "@jxsuite/schema/guards";
+import type { EffectScope } from "@vue/reactivity";
+import type { JxStyle } from "@jxsuite/schema/types";
+import type { StylebookEntry } from "./stylebook-panel";
+import type { TokenGroupId } from "../style/project-styles";
+import type {
+  StylesElementGroup,
+  StylesElementRow,
+  StylesPanelActions,
+  StylesPanelSurfaceHandle,
+  StylesPanelValues,
+  StylesSchemeRow,
+  StylesVariableGroup,
+} from "../surfaces/styles-panel";
+
+/** The `source` every command run from here reports under. */
+const SOURCE = "Styles";
+
+/** The catalogue the Elements section lists: the specimen sections. */
+export interface StylesCatalogue {
+  $sections: { label: string; elements: StylebookEntry[] }[];
+}
+
+/** What the panel is projected from. Injected so a test can hand in its own catalogue. */
+export interface StylesPanelInput {
+  /** `project.json` as the panel reads it, or `null` with no project open. */
+  config: { style?: JxStyle; $media?: Record<string, string> } | null;
+  catalogue: StylesCatalogue;
+  /** The project's components, by tag name. */
+  components: readonly { tagName: string }[];
+  /** The tag the Elements view has selected (`shell.stylebook.selection`). */
+  selection: string | null;
+  /** The custom property the Variables view is pointed at (`shell.stylebook.variable`). */
+  variable: string | null;
+}
+
+/**
+ * `project.json` as the panel reads it: the open tab's document when the tab is open (so an edit
+ * that has not been saved yet is what the panel lists), else the configuration the project was
+ * opened with.
+ */
+export function stylesConfig(): StylesPanelInput["config"] {
+  const tab = workspace.tabs.get(PROJECT_CONFIG_PATH);
+  return (tab ? tab.doc.document : projectState?.projectConfig) ?? null;
+}
+
+/** The input the live panel is drawn from. */
+function liveInput(): StylesPanelInput {
+  return {
+    catalogue: stylebookMeta,
+    components: componentRegistry,
+    config: projectState ? stylesConfig() : null,
+    selection: shell.stylebook.selection,
+    variable: shell.stylebook.variable,
+  };
+}
+
+/** "1 variable", "6 variables". */
+function counted(count: number, noun: string): string {
+  return `${count} ${noun}${count === 1 ? "" : "s"}`;
+}
+
+/** The variable groups, in the Variables view's order, the empty Other left out as it is there. */
+function variableGroups(style: JxStyle, current: string | null): StylesVariableGroup[] {
+  return groupTokens(style)
+    .filter(({ group, tokens }) => group.id !== "other" || tokens.length > 0)
+    .map(({ group, tokens }) => ({
+      count: String(tokens.length),
+      countLabel: counted(tokens.length, "variable"),
+      id: group.id,
+      title: group.title,
+      variables: tokens.map((token) => {
+        const resolved = group.id === "color" ? resolveTokenValue(style, token.value) : undefined;
+        return {
+          name: token.name,
+          selected: token.name === current,
+          swatch: resolved === undefined ? "" : String(resolved),
+          swatchState: group.id === "color" ? ("swatch" as const) : ("none" as const),
+          value: String(token.value),
+        };
+      }),
+    }));
+}
+
+/**
+ * The Elements section: one group per catalogue section, then the project's components. The rows
+ * are the stylebook's own walk (`stylebook-doc.ts` `catalogueRows`, which the Outline's catalogue
+ * draws from too); the dot reads the nested tag paths Stylebook edits write.
+ */
+function elementGroups(input: StylesPanelInput, style: JxStyle): StylesElementGroup[] {
+  const groups: StylesElementGroup[] = input.catalogue.$sections.map((section) => ({
+    key: section.label,
+    label: section.label,
+    rows: catalogueRows(section.elements, input.selection).map((row): StylesElementRow => ({
+      customized: hasTagStyle(style, row.path),
+      indent: `${INDENT_BASE + row.depth * INDENT_STEP}px`,
+      key: row.path,
+      selected: row.selected,
+      tag: row.tag,
+    })),
+  }));
+  if (input.components.length > 0) {
+    groups.push({
+      key: "components",
+      label: "Components",
+      rows: input.components.map((component) => ({
+        customized: hasTagStyle(style, component.tagName),
+        indent: `${INDENT_BASE}px`,
+        key: component.tagName,
+        selected: component.tagName === input.selection,
+        tag: component.tagName,
+      })),
+    });
+  }
+  return groups;
+}
+
+/** The color schemes `$media` declares, by name and by the query that selects each. */
+function schemeRows(media: Record<string, string> | undefined): StylesSchemeRow[] {
+  return listTokenContexts(media)
+    .filter((context) => context.kind === "scheme")
+    .map((context) => {
+      const query = media?.[context.name];
+      return { key: context.name, label: context.label, query: isString(query) ? query : "" };
+    });
+}
+
+/**
+ * What the panel shows. Pure over its input: the configuration, the catalogue, the components and
+ * the two current rows.
+ *
+ * @param {StylesPanelInput} [input] Defaults to the live project.
+ * @returns {StylesPanelValues}
+ */
+export function stylesPanelValues(input: StylesPanelInput = liveInput()): StylesPanelValues {
+  if (!input.config) {
+    return {
+      body: "none",
+      customizedCount: "0",
+      customizedLabel: "",
+      elementGroups: [],
+      groups: [],
+      schemes: [],
+      schemesState: "empty",
+      variableCount: "0",
+      variablesState: "empty",
+    };
+  }
+  const style: JxStyle = isNonNullObject(input.config.style) ? input.config.style : {};
+  const groups = variableGroups(style, input.variable);
+  const variableCount = groups.reduce((sum, group) => sum + group.variables.length, 0);
+  const elements = elementGroups(input, style);
+  const customized = elements.reduce(
+    (sum, group) => sum + group.rows.filter((row) => row.customized).length,
+    0,
+  );
+  const schemes = schemeRows(input.config.$media);
+  return {
+    body: "styles",
+    customizedCount: `${customized} styled`,
+    customizedLabel: `${counted(customized, "tag")} styled`,
+    elementGroups: elements,
+    groups,
+    schemes,
+    schemesState: schemes.length > 0 ? "listed" : "empty",
+    variableCount: String(variableCount),
+    variablesState: variableCount > 0 ? "listed" : "empty",
+  };
+}
+
+// ─── Actions ─────────────────────────────────────────────────────────────────
+
+/** Whether a string is a token group id. */
+function isTokenGroupId(value: string): value is TokenGroupId {
+  return value === "color" || value === "font" || value === "size" || value === "other";
+}
+
+/** The group "Add variable" adds to: the current property's, or Colors. */
+export function addTargetGroup(current: string | null = shell.stylebook.variable): TokenGroupId {
+  return current === null ? "color" : groupIdOfToken(current);
+}
+
+/**
+ * What the panel's controls do. Each one shows the view it leads to first, then asks that view to
+ * bring the row on screen, so a request made from Elements is served when Variables mounts.
+ */
+export const STYLES_PANEL_ACTIONS: StylesPanelActions = {
+  addVariable: () => {
+    showSettingsDocument("tokens");
+    requestVariablesFocus({ add: true, group: addTargetGroup(), kind: "group" });
+  },
+  manageSchemes: () => {
+    void runActiveReported("settings.open", { section: "contexts" }, SOURCE);
+  },
+  selectElement: (path) => {
+    showSettingsDocument("stylebook");
+    selectStylebookTag(path, undefined, { panCanvas: true });
+    // `selectStylebookTag` puts the Inspector on Element › Style; the Inspector has to be open.
+    setDockCollapsed("right", false);
+  },
+  selectVariable: (name) => {
+    showSettingsDocument("tokens");
+    requestVariablesFocus({ kind: "variable", name });
+  },
+  showGroup: (group) => {
+    if (!isTokenGroupId(group)) {
+      return;
+    }
+    showSettingsDocument("tokens");
+    requestVariablesFocus({ add: false, group, kind: "group" });
+  },
+};
+
+// ─── Mounting ────────────────────────────────────────────────────────────────
+
+interface StandingPanel {
+  host: HTMLElement;
+  handle: StylesPanelSurfaceHandle;
+  scope: EffectScope;
+}
+
+let _standing: StandingPanel | null = null;
+
+/**
+ * Mount the surface into `host`, or bring the one already there up to date.
+ *
+ * The projection runs in an effect of its own, because the Navigator repaints on a document's
+ * IDENTITY and a variable's value is a write deep inside it: an edit in the Variables view, an undo
+ * or a Code edit re-projects the panel through what the effect read.
+ */
+function mountInto(host: HTMLElement): void {
+  if (_standing && (_standing.host !== host || !_standing.handle.connected())) {
+    resetStylesPanel();
+  }
+  if (_standing) {
+    // A repaint of the Navigator: the component registry is not reactive, so it is read here.
+    _standing.handle.update(stylesPanelValues());
+    return;
+  }
+  const handle = mountStylesPanelSurface(host, stylesPanelValues(), STYLES_PANEL_ACTIONS);
+  const scope = effectScope();
+  scope.run(() => {
+    effect(() => {
+      handle.update(stylesPanelValues());
+    });
+  });
+  _standing = { handle, host, scope };
+}
+
+/** The Navigator's content area inside a panel body (`panels/collections-panel.ts` gives why). */
+function contentArea(body: HTMLElement): HTMLElement {
+  return body.querySelector<HTMLElement>(".panel-content") ?? body;
+}
+
+/**
+ * Contribute the Styles panel: project level (it lists the project's styles), no rail button
+ * (Styles has no rail), the Styles workspace's Navigator.
+ */
+export function registerStylesPanel(): void {
+  registerPanel({
+    id: "styles",
+    title: "Styles",
+    level: "project",
+    dock: "navigator",
+    icon: "paint-brush",
+    rail: false,
+    render: () => nothing,
+    afterRender: (_ctx, host) => {
+      mountInto(contentArea(host));
+    },
+  });
+}
+
+/** Forget the mounted panel: tests, a project switch, and a host the Navigator replaced. */
+export function resetStylesPanel(): void {
+  _standing?.scope.stop();
+  _standing?.handle.dispose();
+  _standing = null;
+}

package/src/panels/tab-strip.ts

@@ -54,6 +54,9 @@ import {
   workspace,
 } from "../workspace/workspace";
 import { gridTabLabel } from "../grid/grid-source";
+import { workspaceTabOrder } from "../workspace/tab-workspace";
+import { workspaceHomeLabel } from "../workspace/workspace-ids";
+import { shell, workspaceDrawsTabStrip } from "../shell";
 import { entryDraftPill } from "../content/entry-editor";
 import { DRAFT_FIELD, isDraftEntry } from "../content/draft-state";
 import { entryFields } from "../content/entry-fields";
@@ -246,7 +249,11 @@ export function mount(host: HTMLElement) {
            so a fact about a pane it does not draw — or about a tab in another pane's strip — has
            no reader inside this effect. */
       }
+      // The strip draws the workspace on screen's tabs alone, so a switch repaints every strip.
+      void shell.workspace;
       for (const tab of workspace.tabs.values()) {
+        // A tab's workspace follows its editor (`project.json` is Styles' in its stylebook only).
+        void tab.session.ui.canvasMode;
         void tab.doc.dirty;
         void tab.documentPath;
         void tab.pinned;
@@ -265,6 +272,7 @@ export function mount(host: HTMLElement) {
 }
 
 export function unmount() {
+  cancelMeasures();
   dismissOverflowMenu();
   dismissTabContextMenu();
   _scope?.stop();
@@ -301,6 +309,14 @@ function releaseHostDnD(host: HTMLElement): void {
 }
 
 function render() {
+  /* A workspace that draws no strip (Media, Styles, Publish) has its strips out of the grid
+     (`TAB_STRIP_HIDDEN_CLASS`), so painting them would be work nobody sees, and measuring a strip
+     that is not laid out reads zeros that flip the overflow chevron on every switch. They are left
+     standing as they were and repainted on the way back: this effect tracks `shell.workspace`.
+     A DERIVED pane is the exception. It follows the author into every workspace, and its row is
+     its derivation chip there (no tab of its own is the workspace's), which the frame keeps drawn
+     because it names the pane and holds the ✕ that closes it. So it is painted everywhere. */
+  const strips = workspaceDrawsTabStrip();
   /* One host draws ONE pane. While the shell has a single strip, both panes resolve to the same
      div — and the one whose tabs are on screen is the focused one, so it wins the tie. Without
      that rule the answer was render order, which is how the strip came to mark a tab active in a
@@ -314,7 +330,10 @@ function render() {
   }
   const drawn = new Set<string>();
   for (const [host, pane] of claims) {
-    paint(pane, host);
+    if (strips || pane.derived) {
+      paint(pane, host);
+    }
+    // Counted as drawn either way: a strip left standing is kept, not taken down below.
     _hosts.set(pane.id, host);
     drawn.add(pane.id);
   }
@@ -359,27 +378,81 @@ function paint(pane: Pane, host: HTMLElement): void {
 
   /* The strip is HELD — `surfaces/tab-strip.ts` takes it as the element is created — so this is an
      imperative USE of a node this module owns rather than a re-find of one it renders
-     (studio-ui-guidelines.md §9.4). The chip is asked for by the state the KIT puts on it, which is
-     the accessibility tree's own answer to "which tab is current".
+     (studio-ui-guidelines.md §9.4).
 
      THE REVEAL IS RECORDED ONLY WHEN THERE WAS A STRIP TO REVEAL IT IN. A mount is asynchronous,
      so the first paint into a fresh host has no document yet — and moving `_lastActive` there
      anyway would consume the transition and leave the chip off-screen with nothing left to notice.
      That is exactly the case a derived pane produces: its strip is created the moment its one tab
-     comes back. */
+     comes back.
+
+     The DECISION is taken here, in the paint that saw the transition, and only the scroll waits
+     for the frame: several paints can land in one task (a derivation and its return), and the
+     frame sees only the last of them, which may name the very tab `_lastActive` already held. */
   const strip = _strips.get(host)?.strip();
   if (strip && pane.activeTabId !== _lastActive.get(pane.id)) {
     _lastActive.set(pane.id, pane.activeTabId);
+    _revealPending.add(host);
+  }
+  scheduleMeasure(host);
+}
+
+/**
+ * The frame each host's strip is next read in: one per host, however many paints ask for it.
+ *
+ * Both reads the strip owes after a paint (bringing the active chip into view, and whether the
+ * chevron is needed) need LAYOUT, and both used to run inline at the tail of {@link paint}. A paint
+ * is never the last write of its task: a workspace switch or a tab activation goes on to swap the
+ * stage, the docks and the Inspector, so an inline read paid for a style recalculation of the whole
+ * half-written document (10 to 27 ms each, on every tab or workspace change in the perf trace), and
+ * the frame then paid again once the rest of the task had dirtied it. Read in the next frame, the
+ * strip shares the one layout the frame does anyway. The chevron already tolerated a lag (see
+ * {@link syncOverflow}), and the reveal still lands before that frame paints.
+ */
+const _measureFrames = new Map<HTMLElement, number>();
+
+/** Hosts whose active chip changed since their last frame, so the frame scrolls it into view. */
+const _revealPending = new Set<HTMLElement>();
+
+function scheduleMeasure(host: HTMLElement): void {
+  if (_measureFrames.has(host)) {
+    return;
+  }
+  _measureFrames.set(
+    host,
+    requestAnimationFrame(() => {
+      _measureFrames.delete(host);
+      const pane = drawnPane(host);
+      if (pane && workspaceDrawsTabStrip()) {
+        measureStrip(pane, host);
+      }
+      _revealPending.delete(host);
+    }),
+  );
+}
+
+/** Drop every pending read: the strips they would measure are going away. */
+function cancelMeasures(): void {
+  for (const frame of _measureFrames.values()) {
+    cancelAnimationFrame(frame);
+  }
+  _measureFrames.clear();
+  _revealPending.clear();
+}
+
+/** The reads {@link scheduleMeasure} runs for one host, in a frame of their own. */
+function measureStrip(pane: Pane, host: HTMLElement): void {
+  const strip = _strips.get(host)?.strip();
+  if (strip && _revealPending.has(host)) {
     /* Found by the id the DOCUMENT stamped, not by `aria-selected`. The kit is the single writer
        of a tab's selected state and it writes it on a MutationObserver when the tab SET moved — a
-       microtask later — so a strip whose one tab has just come back has no tab marked current at
-       the instant this runs. The flow already knows which chip it wants; asking the tree instead
-       is asking a question we have the answer to, and getting it one tick early. */
+       microtask later — so a strip whose one tab has just come back may have no tab marked current
+       yet. The flow already knows which chip it wants; asking the tree instead is asking a
+       question we have the answer to. */
     [...strip.children]
       .find((chip) => chip instanceof HTMLElement && chip.dataset.tab === pane.activeTabId)
       ?.scrollIntoView({ block: "nearest", inline: "nearest" });
   }
-
   syncOverflow(pane, host);
 }
 
@@ -518,23 +591,31 @@ function project(pane: Pane): TabStripValues {
      that could put one there (`moveTabToPane`, through `revealOpenTab`) is reached solely by
      `openFileInPane`, which the follow calls for COMPANIONS. So the second disjunct is already
      total over a lens and the first chose nothing. */
-  if (derived && pane.tabOrder.length === 0) {
+  /* The tabs of the workspace on screen, in strip order. A pane's other tabs are another
+     workspace's: they keep their slots in `pane.tabOrder` and are simply not drawn. */
+  const visible = workspaceTabOrder(pane);
+  /* A derived pane none of whose tabs is in the workspace on screen draws its derivation chip too.
+     A COMPANION owns real tabs, and after a switch to Media or Publish the one it follows is
+     another workspace's: filtered away, it left a stage drawing a document under a blank row, with
+     no chip, no ✕ and no way out of the derivation. */
+  if (derived && visible.length === 0) {
     /* A COMPANION whose rule has not resolved reaches this too, and it has to. Its `tabOrder` is
        empty for a different reason than a lens's — the document it wants is not open YET, or the
        selection has nothing under it — and the branch below drew nothing: a pane with no chip,
        no ✕ and no way out, which `paneIsEmpty` will not collapse because the derivation counts as
        a subject. The chip is the pane's name and its exit.
        NO `_lastActive` / `_overflowing` RESET HERE, and both were, until each was shown to be a
-       write nothing can read. `_overflowing` is measured by {@link syncOverflow} at the end of
-       every ordinary render, inside the same synchronous call, so a stale `true` carried through a
-       derivation is corrected before any frame sees it. `_lastActive` cannot survive the round trip
+       write nothing can read. `_overflowing` is measured by {@link syncOverflow} in the frame
+       after every ordinary render, before that frame paints, so a stale `true` carried through a
+       derivation is corrected before anybody sees it. `_lastActive` cannot survive the round trip
        either: a tab can only come back through `insertIntoPane` and then `activateTab`, which are
        two reactive writes and therefore two renders, and the first of them lands here with
        `tabOrder` full and `activeTabId` still `null` — which resets the field anyway. Both were
        written as bookkeeping and both were unfalsifiable; the branch below owns the answer. */
     return derivationValues(pane, derived);
   }
-  if (pane.tabOrder.length === 0) {
+  // A non-derived pane whose every tab belongs elsewhere draws the same blank row an empty one does.
+  if (visible.length === 0) {
     /* An empty, non-derived pane WHILE A DRAG IS LIVE draws a `tabs` row with no chips instead of
        going blank: `blankValues` hides the row outright, and a hidden row has no `jx-tabs` element
        for `adoptStrip` to make a target of — so a tab dragged toward the empty primary beside a
@@ -569,7 +650,8 @@ function project(pane: Pane): TabStripValues {
     preset: "",
     stripLabel: stripLabel(pane),
     subject: "",
-    tabs: pane.tabOrder.flatMap((id, index) => chipView(pane, id, index, labels)),
+    // The chip's index is its slot in the pane's FULL order, which is what a drop is measured in.
+    tabs: visible.flatMap((id) => chipView(pane, id, pane.tabOrder.indexOf(id), labels)),
     trailing: _overflowing.get(pane.id) === true,
     trailingGlyph: "⌄",
     // ONE accessible name (`studio-ui-guidelines.md` §10): the glyph is hidden, so `title` is both
@@ -758,11 +840,11 @@ function syncDrag(): void {
 /**
  * Re-measure a pane's strip and re-project once if the chevron's presence changed.
  *
- * Measurement can only happen after the document has written the DOM, so this runs at the tail of
- * {@link paint} and guards its own re-entry on the boolean actually flipping — the chevron cannot
- * oscillate. Before the mount resolves there is no strip to measure and nothing to correct: the
- * next repaint measures it, and a strip that overflows on its first frame has no hidden tab a
- * reader could be looking for yet.
+ * Measurement can only happen after the document has written the DOM, so this runs in the frame
+ * after a {@link paint} ({@link scheduleMeasure}) and guards its own re-entry on the boolean
+ * actually flipping — the chevron cannot oscillate. Before the mount resolves there is no strip to
+ * measure and nothing to correct: the next repaint measures it, and a strip that overflows on its
+ * first frame has no hidden tab a reader could be looking for yet.
  */
 function syncOverflow(pane: Pane, host: HTMLElement) {
   const surface = _strips.get(host);
@@ -837,11 +919,13 @@ export function hiddenTabIds(paneId: string = workspace.activePaneId): string[]
   const left = strip.scrollLeft;
   const right = left + strip.clientWidth;
   const hidden: string[] = [];
-  /* Typed, not filtered: a chip's position is what pairs it with `pane.tabOrder[index]`, so dropping
-     a node here would shift every later chip onto the wrong tab id. */
+  /* Typed, not filtered: a chip's position is what pairs it with the strip's drawn order, so dropping
+     a node here would shift every later chip onto the wrong tab id. The drawn order is the
+     workspace's tabs alone, which is what `project` drew. */
+  const drawn = workspaceTabOrder(pane);
   const chips = [...strip.querySelectorAll<HTMLElement>('[part="tab"]')];
   for (const [index, chip] of chips.entries()) {
-    const id = pane.tabOrder[index];
+    const id = drawn[index];
     if (id && (chip.offsetLeft < left || chip.offsetLeft + chip.offsetWidth > right)) {
       hidden.push(id);
     }
@@ -877,7 +961,7 @@ export function dismissOverflowMenu() {
 function openOverflowMenu(pane: Pane, labels: Map<string, string>, anchorEl: HTMLElement | null) {
   dismissOverflowMenu();
   const hidden = hiddenTabIds(pane.id);
-  const ids = hidden.length > 0 ? hidden : [...pane.tabOrder];
+  const ids = hidden.length > 0 ? hidden : workspaceTabOrder(pane);
   const anchor = rectOf(anchorEl ?? document.body);
   _overflowHandle = openMenu({
     /* The trigger says "Show hidden tabs" and this is the panel it opens, so it takes the same
@@ -1203,7 +1287,7 @@ function tabLabels(pane: Pane): Map<string, string> {
         ? [
             {
               documentPath: tab.documentPath,
-              fallback: gridTabLabel(tab.id) ?? "Untitled",
+              fallback: gridTabLabel(tab.id) ?? workspaceHomeLabel(tab.id) ?? "Untitled",
               id,
             },
           ]
@@ -1219,7 +1303,7 @@ function tabLabels(pane: Pane): Map<string, string> {
  * @returns {string}
  */
 function tabTooltip(tab: Tab): string {
-  const base = tab.documentPath || gridTabLabel(tab.id) || "Untitled";
+  const base = tab.documentPath || gridTabLabel(tab.id) || workspaceHomeLabel(tab.id) || "Untitled";
   const origin = tab.session.openedFrom;
   const withOrigin = origin?.documentPath ? `${base}\nOpened from ${origin.documentPath}` : base;
   return tab.preview ? `${withOrigin}\nPreview — double-click to keep open` : withOrigin;

package/src/platform.ts

@@ -37,7 +37,7 @@ export interface LauncherBootError {
  * window ran the dev-server adapter against a `views://` origin with nothing behind it.
  */
 export interface LauncherSignal {
-  /** Which launcher announced (`"electrobun"`, `"chromium"`), once its boot module's body ran. */
+  /** Which launcher announced (`"chromium"`), once its boot module's body ran. */
   launcher?: string | undefined;
   /** The first error the page raised during boot, or the adapter factory's own throw. */
   error?: LauncherBootError | undefined;

package/src/platforms/cloud.ts

@@ -855,6 +855,21 @@ export function createCloudPlatform(project: CloudProject | null): StudioPlatfor
     return okJson<ProjectInfoWire>(await api("/project-info"), "Failed to load project");
   }
 
+  /* The repository's default branch, asked once per session: it is what Send for review must never
+     commit to here, because a commit on this host lands on GitHub as it is made. A failed ask is
+     forgotten, so the next branch listing asks again. */
+  let defaultBranch: Promise<string> | null = null;
+  function repositoryDefaultBranch(): Promise<string> {
+    defaultBranch ??= projectInfo().then(
+      (info) => info.defaultBranch || "",
+      () => {
+        defaultBranch = null;
+        return "";
+      },
+    );
+    return defaultBranch;
+  }
+
   /** One file the old way: `GET /file`. What a single read, and the batch fallback, goes through. */
   async function readOne(path: string): Promise<string> {
     const data = await okJson<{ content: string }>(
@@ -953,6 +968,10 @@ export function createCloudPlatform(project: CloudProject | null): StudioPlatfor
   const platform: StudioPlatform = {
     id: "cloud",
     projectRoot: root,
+    /* Commits land on GitHub as they are made (`gitCommit`), a push is a sync check, and a branch
+       is a sibling session (`gitCheckout`), which is what the Publish workspace says before it
+       switches one (studio.md §22.8). */
+    gitHosted: true,
     canvasUrl: "/canvas.html",
     /* The projectRoot here is the IDENTIFIER "owner/repo@branch", not a served path, so the canvas's
        default base — <origin>/<projectRoot>/ — addressed nothing. Every component $ref fetch landed
@@ -1504,7 +1523,15 @@ export function createCloudPlatform(project: CloudProject | null): StudioPlatfor
     },
 
     async gitBranches() {
-      return okJson<GitBranchesResult>(await api("/git/branches"), "Failed to list branches");
+      const listed = await okJson<GitBranchesResult>(
+        await api("/git/branches"),
+        "Failed to list branches",
+      );
+      if (listed.defaultBranch) {
+        return listed;
+      }
+      const name = await repositoryDefaultBranch();
+      return name ? { ...listed, defaultBranch: name } : listed;
     },
 
     async gitLog(limit?: number) {

package/src/platforms/default-platform.ts

@@ -82,10 +82,10 @@ export interface BootEnvironment {
  * the HTTP protocol reuses the stock dev-server adapter unchanged, and a third-party shell may well
  * serve it through a custom scheme — `tauri://localhost` proxies to a real server. Refusing every
  * scheme that is not `http:` would break that host to cover a case the meta and the launcher signal
- * already cover for every host this repository ships. `views:` is Electrobun's own bundle scheme
- * and `file:` is a document opened from disk; neither can be proxying anything. happy-dom's
- * `about:` is absent for the same reason, which is also what lets a test import the entry without
- * inventing a URL.
+ * already cover for every host this repository ships. `views:` is a custom bundle scheme and
+ * `file:` is a document opened from disk; neither can be proxying anything. happy-dom's `about:` is
+ * absent for the same reason, which is also what lets a test import the entry without inventing a
+ * URL.
  */
 const BACKENDLESS_SCHEMES: ReadonlySet<string> = new Set(["views:", "file:"]);