@jxsuite/studio 1.0.0 → 1.2.0

package/src/panels/style-panel.ts

@@ -22,7 +22,8 @@ import {
 } from "../tabs/transact";
 import { inferInputType, propLabel } from "../utils/studio-utils";
 import { renderFieldRow } from "../ui/field-row";
-import { parseMediaEntries } from "../utils/canvas-media";
+import { renderDynamicSlot } from "../ui/dynamic-slot";
+import { parseMediaEntries, schemeOfQuery } from "../utils/canvas-media";
 import { getEffectiveMedia, getEffectiveStyle } from "../site-context";
 import { computeInheritedStyle } from "../utils/inherited-style";
 import { mediaDisplayName } from "./shared";
@@ -41,6 +42,7 @@ import { widgetForType } from "./style-inputs";
 
 import type { Tab } from "../tabs/tab";
 import type { JxPath } from "../state";
+import type { JsonValue } from "../types";
 import type { JxMutableNode, JxStyle } from "@jxsuite/schema/types";
 
 interface CssLonghand {
@@ -96,17 +98,29 @@ function renderStyleRow(
   isWarning: boolean,
   gridMode: boolean,
   inheritedValue: string | undefined,
+  templateSignals: string[] = [],
+  fieldKey: string = prop,
 ) {
   const type = inferInputType(entry);
   const hasVal = value !== undefined && value !== "";
   const placeholder = !hasVal && inheritedValue ? String(inheritedValue) : "";
   const spanVal = gridMode && (entry as Record<string, unknown>).$span === 2 ? 2 : undefined;
+  // Style values are schema-legal at two rungs: literal and ${} template (no $ref in JxStyle).
+  const slot = renderDynamicSlot({
+    caps: ["literal", "template"],
+    fieldKey,
+    onChange: (v?: JsonValue) => onCommit(v === undefined || v === "" ? undefined : String(v)),
+    staticWidget: widgetForType(type, entry, prop, value, onCommit, { placeholder }),
+    stateDefs: templateSignals,
+    value,
+  });
   return renderFieldRow({
     prop,
     label: propLabel(entry, prop),
     hasValue: hasVal,
     onClear: onDelete,
-    widget: widgetForType(type, entry, prop, value, onCommit, { placeholder }),
+    widget: slot.widget,
+    labelExtra: slot.modeButton,
     ...(spanVal != null && { span: spanVal }),
     warning: isWarning,
   });
@@ -287,10 +301,32 @@ function styleSidebarTemplate(
   const tab = activeTab.value!;
   const sel = tab.session.selection as JxPath;
   const style = effectiveStyle || node.style || {};
+  // Signals seeding the ${} template default when a style value escalates (no $ref in JxStyle).
+  const templateSignals = Object.entries(tab.doc.document.state || {})
+    .filter(
+      ([, d]) =>
+        !(d as Record<string, unknown>)?.$handler &&
+        (d as Record<string, unknown>)?.$prototype !== "Function",
+    )
+    .map(([defName]) => defName);
   const { sizeBreakpoints } = parseMediaEntries(getEffectiveMedia(tab.doc.document.$media));
   const mediaNames = sizeBreakpoints.map((bp) => bp.name);
   const mediaTab = activeMediaTab || null;
 
+  // ── Scheme-layer routing (spec §9.5) ────────────────────────────────────────
+  // With the tab-bar scheme control forcing a scheme that has a matching declared scheme query,
+  // Base-context edits target that scheme's `@--name` block — no extra sidebar tabs. Breakpoint
+  // Tabs stay breakpoint-scoped (scheme × breakpoint compound blocks are unsupported).
+  const forcedScheme = tab.session.ui.previewColorScheme;
+  const schemeLayer =
+    mediaTab === null && (forcedScheme === "light" || forcedScheme === "dark")
+      ? (Object.entries(getEffectiveMedia(tab.doc.document.$media) ?? {}).find(
+          ([, q]) => schemeOfQuery(String(q)) === forcedScheme,
+        )?.[0] ?? null)
+      : null;
+  // The media context edits actually target: a valid breakpoint tab, else the scheme layer.
+  const editMedia = mediaTab && mediaNames.length > 0 ? mediaTab : schemeLayer;
+
   // ── Media tabs template ──────────────────────────────────────────────────
   const mediaTabsT =
     mediaNames.length > 0
@@ -315,7 +351,9 @@ function styleSidebarTemplate(
       : nothing;
 
   // ── Selector dropdown ──────────────────────────────────────────────────────
-  const contextStyle = mediaTab ? (style[`@${mediaTab}`] as Record<string, unknown>) || {} : style;
+  const contextStyle = editMedia
+    ? (style[`@${editMedia}`] as Record<string, unknown>) || {}
+    : style;
   const existingSelectors = Object.keys(contextStyle).filter((s) => isNestedSelector(s));
   const existingSet = new Set(existingSelectors);
   const commonSet = new Set(COMMON_SELECTORS);
@@ -391,10 +429,21 @@ function styleSidebarTemplate(
     </sp-picker>
   `;
 
-  // ── Combined toolbar (media tabs + selector) ───────────────────────────────
+  // ── Combined toolbar (media tabs + scheme badge + selector) ────────────────
+  // No scheme tabs — the tab-bar control is the one switch; the badge shows where edits land.
+  const schemeBadgeT = schemeLayer
+    ? html`
+        <span
+          class="style-scheme-badge"
+          title="Edits target the @${schemeLayer} variant — set the tab-bar scheme control to Auto to edit base styles"
+        >
+          ${mediaDisplayName(schemeLayer)} variant
+        </span>
+      `
+    : nothing;
   const toolbarT = html`
     <div class="style-toolbar">
-      <div class="style-toolbar-tabs">${mediaTabsT}</div>
+      <div class="style-toolbar-tabs">${mediaTabsT} ${schemeBadgeT}</div>
       ${selectorT}
     </div>
   `;
@@ -428,15 +477,15 @@ function styleSidebarTemplate(
   // ── Determine the active style object ──────────────────────────────────────
   let activeStyle: JxStyle;
   let commitMutate: StyleMutateFn;
-  if (activeSelector && isTagPath(activeSelector) && mediaTab && mediaNames.length > 0) {
-    const mediaObj = getNestedStyle(style, `@${mediaTab}`) ?? {};
+  if (activeSelector && isTagPath(activeSelector) && editMedia) {
+    const mediaObj = getNestedStyle(style, `@${editMedia}`) ?? {};
     activeStyle = resolveNestedTagStyle(mediaObj, activeSelector);
     const stylePath = activeSelector.split(" ");
     commitMutate = (t: Tab, prop: string, val: string | Record<string, unknown> | undefined) =>
       mutateUpdateMediaNestedStylePath(
         t,
         sel,
-        mediaTab,
+        editMedia,
         stylePath,
         prop,
         val as string | undefined,
@@ -446,14 +495,14 @@ function styleSidebarTemplate(
     const stylePath = activeSelector.split(" ");
     commitMutate = (t: Tab, prop: string, val: string | Record<string, unknown> | undefined) =>
       mutateUpdateNestedStylePath(t, sel, stylePath, prop, val as string | undefined);
-  } else if (activeSelector && mediaTab && mediaNames.length > 0) {
-    const mediaObj = getNestedStyle(style, `@${mediaTab}`) ?? {};
+  } else if (activeSelector && editMedia) {
+    const mediaObj = getNestedStyle(style, `@${editMedia}`) ?? {};
     activeStyle = getNestedStyle(mediaObj, activeSelector) ?? {};
     commitMutate = (t: Tab, prop: string, val: string | Record<string, unknown> | undefined) =>
       mutateUpdateMediaNestedStyle(
         t,
         sel,
-        mediaTab,
+        editMedia,
         activeSelector,
         prop,
         val as string | undefined,
@@ -464,29 +513,32 @@ function styleSidebarTemplate(
       mutateUpdateNestedStyle(t, sel, activeSelector, prop, val as string | undefined);
   } else {
     activeStyle = {};
-    const inMediaTab = mediaTab !== null && mediaNames.length > 0;
-    const flatSource = inMediaTab ? (getNestedStyle(style, `@${mediaTab}`) ?? {}) : style;
+    const inMediaCtx = editMedia !== null;
+    const flatSource = inMediaCtx ? (getNestedStyle(style, `@${editMedia}`) ?? {}) : style;
     for (const [p, v] of Object.entries(flatSource)) {
       if (typeof v !== "object") {
         activeStyle[p] = v;
       }
     }
-    commitMutate = inMediaTab
+    commitMutate = inMediaCtx
       ? (t: Tab, prop: string, val: string | Record<string, unknown> | undefined) =>
-          mutateUpdateMediaStyle(t, sel, mediaTab, prop, val as string | undefined)
+          mutateUpdateMediaStyle(t, sel, editMedia, prop, val as string | undefined)
       : (t: Tab, prop: string, val: string | Record<string, unknown> | undefined) =>
           mutateUpdateStyle(t, sel, prop, val as string | undefined);
   }
   const commitStyle = (prop: string, val?: string | Record<string, unknown> | undefined) =>
     transactDoc(activeTab.value, (t) => commitMutate(t, prop, val));
 
-  // ── Compute inherited style from higher breakpoints ──────────────────────
-  const inheritedStyle: Record<string, string | number> = computeInheritedStyle(
-    style,
-    mediaNames,
-    mediaTab,
-    activeSelector,
-  );
+  // ── Compute inherited style ────────────────────────────────────────────────
+  // Scheme layer: the base styles show through as inherited (placeholders); breakpoint tabs
+  // Inherit from higher breakpoints as before.
+  const inheritedStyle: Record<string, string | number> = schemeLayer
+    ? (Object.fromEntries(
+        Object.entries(
+          activeSelector ? (getNestedStyle(style, activeSelector) ?? {}) : style,
+        ).filter(([, v]) => typeof v !== "object"),
+      ) as Record<string, string | number>)
+    : computeInheritedStyle(style, mediaNames, mediaTab, activeSelector);
 
   // Auto-open sections that have properties
   const newSections = autoOpenSections({ style: activeStyle }, tab.session.ui.styleSections);
@@ -660,6 +712,8 @@ function styleSidebarTemplate(
                 isWarning,
                 sec.$layout === "grid",
                 inheritedStyle[prop] as string | undefined,
+                templateSignals,
+                `style|${sel.join("/")}|${editMedia ?? ""}|${activeSelector ?? ""}|${prop}`,
               ),
             );
           }

package/src/panels/stylebook-panel.ts

@@ -43,7 +43,6 @@ interface StylebookCtx {
   ) => { tpl: TemplateResult; panel: CanvasPanel };
   applyTransform: () => void;
   observeCenterUntilStable: () => void;
-  renderZoomIndicator: () => void;
   updateActivePanelHeaders: () => void;
 }
 
@@ -182,7 +181,6 @@ export function renderStylebookMode(ctx: StylebookCtx) {
 
   ctx.applyTransform();
   ctx.observeCenterUntilStable();
-  ctx.renderZoomIndicator();
 }
 
 /**

package/src/panels/tab-bar.ts

@@ -13,12 +13,15 @@ import { html, render as litRender, nothing } from "lit-html";
 import { projectState, updateUi } from "../store";
 import { effect, effectScope } from "../reactivity";
 import { activeTab } from "../workspace/workspace";
+import { applyTransform, fitToScreen, resetZoom, setEditZoom } from "../canvas/canvas-utils";
 import { getEffectiveLayoutPath, getEffectiveMedia } from "../site-context";
+import { isSchemeQuery } from "../utils/canvas-media";
 import { dynamicRouteParams, loadParamValues, pagePathsDef } from "../page-params";
+import { componentPropEntries, isComponentDoc } from "../component-props";
 import { mediaDisplayName } from "./shared";
 import type { ParamValues } from "../page-params";
 import type { Tab } from "../tabs/tab";
-import type { DocumentStackEntry, FunctionEditDef } from "../types";
+import type { DocumentStackEntry, FormulaEditDef, FunctionEditDef, JsonValue } from "../types";
 import type { EffectScope } from "@vue/reactivity";
 import type { TemplateResult } from "lit-html";
 
@@ -26,6 +29,7 @@ interface TabBarCtx {
   navigateBack: () => void;
   navigateToLevel: (level: number) => void;
   closeFunctionEditor: () => void;
+  closeFormulaWorkspace: () => void;
   exportFile: () => void;
   getCanvasMode: () => string;
   parseMediaEntries: (media: Record<string, string> | null | undefined) => {
@@ -67,11 +71,16 @@ export function mount(host: HTMLElement, ctx: TabBarCtx) {
         void tab.documentPath;
         void tab.session.documentStack.length;
         void tab.session.ui.canvasMode;
+        void tab.session.ui.editZoom;
+        void tab.session.ui.editingFormula;
         void tab.session.ui.editingFunction;
         void tab.session.ui.featureToggles;
         void tab.session.ui.preview;
+        void tab.session.ui.previewColorScheme;
         void tab.session.ui.previewParams;
+        void tab.session.ui.previewProps;
         void tab.session.ui.showLayout;
+        void tab.session.ui.zoom;
       }
       render();
     });
@@ -110,9 +119,13 @@ function tabBarTemplate(ctx: TabBarCtx): TemplateResult | typeof nothing {
   };
   const canvasMode = ctx.getCanvasMode();
   const editing = S.ui.editingFunction as FunctionEditDef | null;
+  const formulaEditing = S.ui.editingFormula as FormulaEditDef | null;
+  // Any full-screen canvas takeover (function editor or formula workspace) suppresses the zoom
+  // Widget, the view-settings cluster, and the Export action below.
+  const takeover = Boolean(editing) || Boolean(formulaEditing);
   const hasStack = S.documentStack && S.documentStack.length > 0;
 
-  // ── Left region: navigation context (function editor takes precedence over the stack) ──
+  // ── Left region: navigation context (function editor > formula workspace > document stack) ──
   let navTpl: TemplateResult | typeof nothing = nothing;
   if (editing) {
     const docName = S.documentPath?.split("/").pop() || S.document?.tagName || "document";
@@ -128,6 +141,27 @@ function tabBarTemplate(ctx: TabBarCtx): TemplateResult | typeof nothing {
         <span class="breadcrumb-item current">${funcLabel}</span>
       </div>
     `;
+  } else if (formulaEditing) {
+    const docName = S.documentPath?.split("/").pop() || S.document?.tagName || "document";
+    const formulaLabel =
+      formulaEditing.type === "def"
+        ? `fx ${formulaEditing.defName}`
+        : `fx ${formulaEditing.eventKey}`;
+    navTpl = html`
+      <div class="breadcrumb">
+        <sp-action-button
+          size="s"
+          title="Close formula workspace"
+          @click=${ctx.closeFormulaWorkspace}
+        >
+          <sp-icon-back slot="icon"></sp-icon-back>
+          Back
+        </sp-action-button>
+        <span class="breadcrumb-item">${docName}</span>
+        <span class="breadcrumb-sep"> › </span>
+        <span class="breadcrumb-item current">${formulaLabel}</span>
+      </div>
+    `;
   } else if (hasStack) {
     navTpl = html`
       <div class="breadcrumb">
@@ -150,6 +184,82 @@ function tabBarTemplate(ctx: TabBarCtx): TemplateResult | typeof nothing {
     `;
   }
 
+  // ── Left region: zoom widget (every mode with a zoom concept) ──
+  // Gates on the EFFECTIVE mode: edit drives the content-reflow `editZoom`, while design /
+  // Stylebook / git-diff / preview all render on the panzoom surface and drive `ui.zoom` (with the
+  // Panzoom-only fit-to-screen action).
+  let zoomTpl: TemplateResult | typeof nothing = nothing;
+  if (!takeover && canvasMode === "edit") {
+    const editZoom = S.ui.editZoom ?? 1;
+    zoomTpl = html`
+      <sp-action-group compact size="s" class="tb-zoom">
+        <sp-action-button
+          size="s"
+          title="Zoom out (Ctrl+-)"
+          @click=${() => setEditZoom((tab.session.ui.editZoom ?? 1) / 1.2)}
+        >
+          −
+        </sp-action-button>
+        <sp-action-button
+          size="s"
+          class="tb-zoom-label"
+          title="Reset to 100% (Ctrl+0)"
+          @click=${() => setEditZoom(1)}
+        >
+          ${Math.round(editZoom * 100)}%
+        </sp-action-button>
+        <sp-action-button
+          size="s"
+          title="Zoom in (Ctrl+=)"
+          @click=${() => setEditZoom((tab.session.ui.editZoom ?? 1) * 1.2)}
+        >
+          +
+        </sp-action-button>
+      </sp-action-group>
+    `;
+  } else if (
+    !takeover &&
+    (canvasMode === "design" ||
+      canvasMode === "stylebook" ||
+      canvasMode === "git-diff" ||
+      canvasMode === "preview")
+  ) {
+    const zoom = S.ui.zoom ?? 1;
+    const setPanZoom = (next: number) => {
+      tab.session.ui.zoom = Math.min(5, Math.max(0.05, next));
+      applyTransform();
+    };
+    zoomTpl = html`
+      <sp-action-group compact size="s" class="tb-zoom">
+        <sp-action-button
+          size="s"
+          title="Zoom out (Ctrl+-)"
+          @click=${() => setPanZoom((tab.session.ui.zoom ?? 1) / 1.2)}
+        >
+          −
+        </sp-action-button>
+        <sp-action-button
+          size="s"
+          class="tb-zoom-label"
+          title="Reset to 100% (Ctrl+0)"
+          @click=${() => resetZoom()}
+        >
+          ${Math.round(zoom * 100)}%
+        </sp-action-button>
+        <sp-action-button
+          size="s"
+          title="Zoom in (Ctrl+=)"
+          @click=${() => setPanZoom((tab.session.ui.zoom ?? 1) * 1.2)}
+        >
+          +
+        </sp-action-button>
+        <sp-action-button size="s" title="Fit to screen" @click=${() => fitToScreen()}>
+          Fit
+        </sp-action-button>
+      </sp-action-group>
+    `;
+  }
+
   // ── Right region: view settings cluster (edit/design base modes only) ──
   // Gates on the BASE mode (not the effective mode): the cluster stays visible while the preview
   // Toggle is on so it can be toggled back off.
@@ -160,10 +270,11 @@ function tabBarTemplate(ctx: TabBarCtx): TemplateResult | typeof nothing {
     (S.documentPath.startsWith("pages/") || S.documentPath.startsWith("./pages/")),
   );
   let settingsTpl: TemplateResult | typeof nothing = nothing;
-  if (!editing && (baseMode === "edit" || baseMode === "design")) {
+  if (!takeover && (baseMode === "edit" || baseMode === "design")) {
     const canPreview = tab.capabilities.modes.includes("preview");
     const hasLayout = isPage && Boolean(getEffectiveLayoutPath(S.document?.$layout));
-    const pickersTpl = isPage ? paramPickersTpl(tab) : nothing;
+    // Pages get route-param pickers; component docs get test-prop fields (M6) — same slot.
+    const pickersTpl = isPage ? paramPickersTpl(tab) : propFieldsTpl(tab);
     const previewTpl = canPreview
       ? html`
           <sp-action-button
@@ -199,13 +310,46 @@ function tabBarTemplate(ctx: TabBarCtx): TemplateResult | typeof nothing {
     }
   }
 
-  // ── Right region: media feature toggles ──
+  // ── Right region: color-scheme preview (projects that declare a scheme query, spec §9.5) ──
+  // One switch per tab: drives the canvas data-color-scheme attribute and (in the style
+  // Sidebar) which scheme layer edits target. Ungated — works in every canvas mode.
   const { featureQueries } = ctx.parseMediaEntries(getEffectiveMedia(S.document?.$media));
+  const schemeQueries = featureQueries.filter(({ query }) => isSchemeQuery(query));
+  const plainQueries = featureQueries.filter(({ query }) => !isSchemeQuery(query));
+  const scheme = S.ui.previewColorScheme ?? "auto";
+  const schemeTpl =
+    schemeQueries.length > 0
+      ? html`
+          <sp-action-group compact size="s" class="tb-scheme">
+            ${(
+              [
+                ["auto", "Auto", "Follow the OS color scheme"],
+                ["light", "Light", "Force the light scheme"],
+                ["dark", "Dark", "Force the dark scheme"],
+              ] as const
+            ).map(
+              ([value, label, title]) => html`
+                <sp-action-button
+                  toggles
+                  size="s"
+                  title=${title}
+                  ?selected=${scheme === value}
+                  @click=${() => updateUi("previewColorScheme", value)}
+                >
+                  ${label}
+                </sp-action-button>
+              `,
+            )}
+          </sp-action-group>
+        `
+      : nothing;
+
+  // ── Right region: media feature toggles (non-scheme queries) ──
   const togglesTpl =
-    featureQueries.length > 0
+    plainQueries.length > 0
       ? html`
           <sp-action-group compact size="s">
-            ${featureQueries.map(
+            ${plainQueries.map(
               ({ name, query }: { name: string; query: string }) => html`
                 <sp-action-button
                   toggles
@@ -230,7 +374,7 @@ function tabBarTemplate(ctx: TabBarCtx): TemplateResult | typeof nothing {
 
   // ── Right region: mode actions (Code-mode Export) ──
   const exportTpl =
-    !editing && canvasMode === "source"
+    !takeover && canvasMode === "source"
       ? html`
           <sp-action-button size="s" @click=${ctx.exportFile}>
             <sp-icon-export slot="icon"></sp-icon-export>
@@ -241,9 +385,9 @@ function tabBarTemplate(ctx: TabBarCtx): TemplateResult | typeof nothing {
 
   return html`
     <div class="tab-bar">
-      ${navTpl}
+      ${navTpl} ${zoomTpl}
       <div class="tb-spacer"></div>
-      ${settingsTpl} ${togglesTpl} ${exportTpl}
+      ${settingsTpl} ${schemeTpl} ${togglesTpl} ${exportTpl}
     </div>
   `;
 }
@@ -342,3 +486,63 @@ function paramPickersTpl(tab: Tab): TemplateResult | typeof nothing {
     )}
   `;
 }
+
+// ── Component test-prop fields (M6) ──────────────────────────────────────────
+// The previewParams mirror for component docs: one small field per prop entry (the doc's
+// Plain-data state entries), committed on change so typing never re-renders the bar mid-edit. A
+// Value parses as JSON when it can (numbers, booleans, arrays) and falls back to the raw string;
+// Clearing a field removes the override so the prop returns to its authored default.
+
+/**
+ * @param {string} raw
+ * @returns {JsonValue}
+ */
+function parsePropValue(raw: string): JsonValue {
+  try {
+    return JSON.parse(raw) as JsonValue;
+  } catch {
+    return raw;
+  }
+}
+
+/**
+ * @param {Tab} tab
+ * @returns {TemplateResult | typeof nothing}
+ */
+function propFieldsTpl(tab: Tab): TemplateResult | typeof nothing {
+  const doc = tab.doc.document;
+  if (!isComponentDoc(doc)) {
+    return nothing;
+  }
+  const entries = componentPropEntries(doc);
+  if (entries.length === 0) {
+    return nothing;
+  }
+  const { previewProps } = tab.session.ui;
+  const display = (v: JsonValue | undefined) =>
+    v === undefined ? "" : typeof v === "string" ? v : JSON.stringify(v);
+  return html`
+    ${entries.map(
+      ({ name }) => html`
+        <sp-textfield
+          size="s"
+          quiet
+          class="tab-bar-prop"
+          placeholder=${name}
+          title=${`Test value for ${name}`}
+          .value=${display(previewProps?.[name])}
+          @change=${(e: Event) => {
+            const raw = (e.target as HTMLInputElement).value;
+            const next = { ...tab.session.ui.previewProps };
+            if (raw === "") {
+              delete next[name];
+            } else {
+              next[name] = parsePropValue(raw);
+            }
+            updateUi("previewProps", Object.keys(next).length > 0 ? next : null);
+          }}
+        ></sp-textfield>
+      `,
+    )}
+  `;
+}

package/src/panels/tab-strip.ts

@@ -11,14 +11,18 @@ import { classMap } from "lit-html/directives/class-map.js";
 import { repeat } from "lit-html/directives/repeat.js";
 import { effect, effectScope } from "../reactivity";
 import { activateTab, closeTab, workspace } from "../workspace/workspace";
+import { gridTabLabel } from "../grid/grid-source";
 import type { Tab } from "../tabs/tab";
 import { showConfirmDialog } from "../ui/layers";
+import { collabState } from "../collab/collab-state";
 import type { EffectScope } from "@vue/reactivity";
 
 let _host: HTMLElement | null = null;
 
 let _scope: EffectScope | null = null;
 
+let _lastActiveId: string | null = null;
+
 /**
  * Mount the tab strip into the given host element.
  *
@@ -26,6 +30,7 @@ let _scope: EffectScope | null = null;
  */
 export function mount(host: HTMLElement) {
   _host = host;
+  _lastActiveId = null;
   _scope = effectScope();
   _scope.run(() => {
     effect(() => {
@@ -52,13 +57,14 @@ function render() {
   }
 
   if (workspace.tabOrder.length === 0) {
+    _lastActiveId = null;
     litRender(nothing, _host);
     return;
   }
 
   litRender(
     html`
-      <div class="tab-strip">
+      <div class="tab-strip" @wheel=${onWheel}>
         ${repeat(
           workspace.tabOrder,
           (id) => id,
@@ -80,7 +86,7 @@ function render() {
                     void requestClose(id);
                   }
                 }}
-                title=${tab.documentPath || "Untitled"}
+                title=${tab.documentPath || gridTabLabel(tab.id) || "Untitled"}
               >
                 <span class="tab-strip-label">${label}</span>
                 ${isDirty ? html`<span class="tab-strip-dirty">●</span>` : nothing}
@@ -101,10 +107,40 @@ function render() {
     `,
     _host,
   );
+
+  if (workspace.activeTabId !== _lastActiveId) {
+    _lastActiveId = workspace.activeTabId;
+    _host
+      .querySelector(".tab-strip-tab.active")
+      ?.scrollIntoView({ block: "nearest", inline: "nearest" });
+  }
+}
+
+/**
+ * Scroll the strip horizontally from wheel motion so overflowed tabs stay reachable — a plain mouse
+ * wheel only emits deltaY, which does nothing in an overflow-x container. The scrollbar is hidden
+ * by design, so the wheel is the primary way to reach off-screen tabs.
+ *
+ * @param {WheelEvent} e
+ */
+function onWheel(e: WheelEvent) {
+  if (e.ctrlKey) {
+    return;
+  }
+  const el = e.currentTarget as HTMLElement;
+  if (el.scrollWidth <= el.clientWidth) {
+    return;
+  }
+  const delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
+  if (!delta) {
+    return;
+  }
+  e.preventDefault();
+  el.scrollLeft += delta;
 }
 
 /**
- * Derive a short label from the tab's documentPath.
+ * Derive a short label from the tab's documentPath (virtual grid tabs label from their id).
  *
  * @param {Tab} tab
  * @returns {string}
@@ -112,14 +148,34 @@ function render() {
 function tabLabel(tab: Tab) {
   const path = tab.documentPath;
   if (!path) {
-    return "Untitled";
+    return gridTabLabel(tab.id) ?? "Untitled";
   }
   const parts = path.split("/");
   return parts.at(-1);
 }
 
 /**
- * Close a tab, prompting if dirty.
+ * True when closing this tab would lose unsaved work the user must be warned about: the tab is
+ * dirty AND either it is not co-edited, or this client is the last active collaborator on the doc
+ * (no other peer is focused on its path). When peers remain, the shared session lives on and the
+ * edits are still on the server, so closing is safe.
+ *
+ * @param {Tab} tab
+ */
+export function shouldWarnOnClose(tab: Tab): boolean {
+  if (!tab.doc.dirty) {
+    return false;
+  }
+  const state = collabState(tab);
+  if (!state.active) {
+    return true;
+  }
+  const peersHere = state.peers.filter((p) => p.state?.focusedPath === tab.documentPath);
+  return peersHere.length === 0;
+}
+
+/**
+ * Close a tab, prompting if closing would lose unsaved work.
  *
  * @param {string} id
  */
@@ -128,7 +184,7 @@ async function requestClose(id: string) {
   if (!tab) {
     return;
   }
-  if (tab.doc.dirty) {
+  if (shouldWarnOnClose(tab)) {
     const confirmed = await showConfirmDialog(
       "Unsaved Changes",
       `"${tabLabel(tab)}" has unsaved changes. Close without saving?`,