@adecore/ui 0.49.7 → 0.50.0

package/dist/workspace/WorkspaceTopRow.js

@@ -0,0 +1,81 @@
+import { c as _c } from "react/compiler-runtime";
+import { useContext } from 'react';
+import clsx from 'clsx';
+import { TopRowSlotContext } from './context.js';
+/**
+ * The 47 pixel band at the top of a `Workspace`'s sheet, as its `toolbar`: the project, and beside it the
+ * slot where the bar of a lone pane goes (`useTopRowSlot`, `PaneBar`'s `container`). The window drags by
+ * every part of it that is not a control.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function WorkspaceTopRow(t0) {
+  const $ = _c(17);
+  let children;
+  let className;
+  let leading;
+  let props;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      leading,
+      children,
+      slotless: t1,
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = leading;
+    $[4] = props;
+    $[5] = t1;
+  } else {
+    children = $[1];
+    className = $[2];
+    leading = $[3];
+    props = $[4];
+    t1 = $[5];
+  }
+  const slotless = t1 === undefined ? false : t1;
+  const {
+    register
+  } = useContext(TopRowSlotContext);
+  let t2;
+  if ($[6] !== className) {
+    t2 = clsx("ade-workspace-top-row relative flex h-[47px] shrink-0 items-center gap-2 bg-surface pr-1.5 pl-2 text-xs text-text-muted", className);
+    $[6] = className;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  let t3;
+  if ($[8] !== register || $[9] !== slotless) {
+    t3 = !slotless && /*#__PURE__*/_jsx("div", {
+      ref: register,
+      "data-top-row-slot": "",
+      className: "flex h-full min-w-0 grow items-center gap-2"
+    });
+    $[8] = register;
+    $[9] = slotless;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  let t4;
+  if ($[11] !== children || $[12] !== leading || $[13] !== props || $[14] !== t2 || $[15] !== t3) {
+    t4 = /*#__PURE__*/_jsxs("header", {
+      ...props,
+      className: t2,
+      children: [leading, children, t3]
+    });
+    $[11] = children;
+    $[12] = leading;
+    $[13] = props;
+    $[14] = t2;
+    $[15] = t3;
+    $[16] = t4;
+  } else {
+    t4 = $[16];
+  }
+  return t4;
+}

package/dist/workspace/context.d.ts

@@ -4,3 +4,7 @@ export declare const WorkspaceContext: import("react").Context<{
     layout: WorkspaceLayout;
     edges: SplitEdges;
 }>;
+export declare const TopRowSlotContext: import("react").Context<{
+    slot: HTMLElement | null;
+    register(element: HTMLElement | null): void;
+}>;

package/dist/workspace/context.js

@@ -7,4 +7,9 @@ export const WorkspaceContext = createContext({
     bottom: true,
     left: true
   }
+});
+/* The element of the top row a lone pane's bar goes into, which the row registers and every pane of the workspace reads. */
+export const TopRowSlotContext = createContext({
+  slot: null,
+  register: () => undefined
 });

package/dist/workspace/top-row-slot.d.ts

@@ -0,0 +1,2 @@
+/** The slot of the `Workspace`'s top row, for `PaneBar`'s `container`, or null while there is none. */
+export declare function useTopRowSlot(): HTMLElement | null;

package/dist/workspace/top-row-slot.js

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { TopRowSlotContext } from './context.js';
+/** The slot of the `Workspace`'s top row, for `PaneBar`'s `container`, or null while there is none. */
+export function useTopRowSlot() {
+  return useContext(TopRowSlotContext).slot;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/ui",
-  "version": "0.49.7",
+  "version": "0.50.0",
   "description": "React components, a theme, formatters and a settings dialog for desktop-grade apps on React 19, Base UI and Tailwind 4.",
   "license": "FSL-1.1-MIT",
   "author": "Bas Milius",

package/src/SlidingColumn.tsx

@@ -16,6 +16,9 @@ export interface SlidingColumnProps {
     /* Space before the surface, in pixels. Replaces the border and carries the resize handle. */
     gap?: number;
 
+    /* The line before the surface without a gap; off beside something that draws an edge of its own over that pixel, such as a workspace's sheet. */
+    edge?: boolean;
+
     bounds: { min: number; max(): number };
     onWidthChange(width: number): void;
 
@@ -40,7 +43,19 @@ export interface SlidingColumnProps {
  * The contents sit in an inner column of the stored width, so they do not reflow while the outer one
  * moves, and stay mounted until the slide is over, so a close plays out.
  */
-export function SlidingColumn({ open, width, gap = 0, bounds, onWidthChange, instant = false, body, className, ref, children }: SlidingColumnProps) {
+export function SlidingColumn({
+    open,
+    width,
+    gap = 0,
+    edge = true,
+    bounds,
+    onWidthChange,
+    instant = false,
+    body,
+    className,
+    ref,
+    children
+}: SlidingColumnProps) {
     /* Closed and done animating. */
     const [settled, setSettled] = useState(!open);
 
@@ -92,7 +107,11 @@ export function SlidingColumn({ open, width, gap = 0, bounds, onWidthChange, ins
                 <div
                     ref={body?.ref}
                     tabIndex={body ? -1 : undefined}
-                    className={clsx('relative flex h-full shrink-0 flex-col bg-surface outline-none', spacing === 0 && 'border-l border-border')}
+                    className={clsx(
+                        'relative flex h-full shrink-0 flex-col bg-surface outline-none',
+                        // Without its line the pixel stays, under the edge beside it, so the contents keep their place.
+                        spacing === 0 && clsx('border-l', edge ? 'border-border' : 'border-transparent')
+                    )}
                     style={{ width, marginLeft: spacing }}
                     onKeyDown={body?.onKeyDown}
                 >

package/src/index.ts

@@ -33,6 +33,7 @@ export type {
 export type { KeyValueListItemProps, KeyValueListNameProps, KeyValueListRootProps, KeyValueListValueProps } from './key-value-list/parts.tsx';
 export type { PopoverPopupProps, PopupVariant, PreviewCardPopupProps } from './popover/parts.tsx';
 export type { TabsCountProps, TabsListProps, TabsRootProps, TabsTabProps, TabsValue, TabsVariant } from './tabs/parts.tsx';
+export { tabDropIndex, useTabDrag, type TabDrag, type TabDragOptions } from './tabs/use-tab-drag.ts';
 
 export { AccentSwatches, type AccentSwatchesProps } from './AccentSwatches.tsx';
 export { Banner, type BannerProps, type BannerTone } from './Banner.tsx';
@@ -141,6 +142,10 @@ export type {
 } from './tree/parts.tsx';
 
 export { Workspace, type WorkspaceProps } from './workspace/Workspace.tsx';
+export { WorkspaceRail, WorkspaceRailSeparator, WorkspaceRailSpacer, type WorkspaceRailProps } from './workspace/WorkspaceRail.tsx';
+export { WorkspaceTopRow, type WorkspaceTopRowProps } from './workspace/WorkspaceTopRow.tsx';
+export { useTopRowSlot } from './workspace/top-row-slot.ts';
+export { PaneBar, type PaneBarProps } from './workspace/PaneBar.tsx';
 export type { WorkspaceLayout } from './workspace/context.ts';
 export { DocumentTab, TabStrip, type DocumentTabProps, type TabStripProps, type TabStripItem } from './workspace/TabStrip.tsx';
 export { SplitView, type SplitViewProps, type SplitViewInfo, type SplitViewBounds, type SplitDropTarget, type SplitDrag } from './workspace/SplitView.tsx';

package/src/locales/en.ts

@@ -86,6 +86,9 @@ export default {
         pane: 'Panel',
         movePane: 'Move panel',
         maximize: 'Maximize panel',
-        restore: 'Restore panels'
+        restore: 'Restore panels',
+        moreActions: 'More actions',
+        closePane: 'Close panel',
+        tools: 'Tools'
     }
 };

package/src/locales/nl.ts

@@ -86,6 +86,9 @@ export default {
         pane: 'Paneel',
         movePane: 'Paneel verplaatsen',
         maximize: 'Paneel maximaliseren',
-        restore: 'Panelen herstellen'
+        restore: 'Panelen herstellen',
+        moreActions: 'Meer acties',
+        closePane: 'Paneel sluiten',
+        tools: 'Gereedschappen'
     }
 };

package/src/tabs/use-tab-drag.ts

@@ -0,0 +1,256 @@
+import { useRef, useState, type PointerEvent, type RefObject } from 'react';
+
+/* How far a pressed tab moves before it is a drag rather than a click. */
+const DRAG_THRESHOLD_PX = 4;
+
+/* How far above or below the strip a dragged tab goes before it tears off. */
+const TEAR_DISTANCE_PX = 24;
+
+/* The width of `.ade-tab-insertion`, and how far outside the first or last tab it stands. */
+const INSERTION_WIDTH_PX = 2;
+const INSERTION_INSET_PX = 2;
+
+/* A pressed tab: still a click, moving along the strip, out of the strip, or moving the window itself. */
+interface Press {
+    key: string;
+    pointerId: number;
+    /* Where in the window the press began, which is where the pointer holds a window the tab goes into. */
+    grab: { x: number; y: number };
+    mode: 'press' | 'reorder' | 'out' | 'window';
+    /* Where among the other tabs a reorder lets the tab go, or null while it would stay where it is. */
+    landing: number | null;
+}
+
+export interface TabDragOptions {
+    /** The keys of the strip in their order, read when a drag needs them. */
+    keys(): readonly string[];
+
+    /** Where among the other tabs the tab lands for a drop before the `index`th of them, or null where it stays; pinned tabs keep their own run. */
+    landingOf(key: string, index: number): number | null;
+
+    onReorder(key: string, landing: number): void;
+
+    /**
+     * The tab leaves the strip while held: pulled `TEAR_DISTANCE` above or below it, or out of the window.
+     * `center` is where it is held, at the start of the strip; `width` is its width. Without it a tab stays in the strip.
+     */
+    onTearOut?(key: string, center: { x: number; y: number }, width: number): void;
+
+    /** A release outside the window, for a platform that cannot follow a tab out while it is held. `at` is where the window would stand on screen. */
+    onTearOff?(key: string, at: { x: number; y: number }): void;
+
+    /** Whether dragging this tab moves its window rather than the tab, as for the only tab of a window. */
+    dragsWindow?(key: string): boolean;
+
+    onWindowDrag?(key: string, grab: { x: number; y: number }): void;
+
+    /** The pointer let go after a tear-out or a window drag, wherever it was. `window` says it moved the window. */
+    onRelease?(key: string, window: boolean): void;
+}
+
+export interface TabDrag {
+    /** For the element around the tabs, whose box decides when a tab leaves the strip. */
+    strip: RefObject<HTMLDivElement | null>;
+
+    /** Where the line that says where the tab lands stands, from the strip's left, or null while there is none. */
+    insertion: number | null;
+
+    /** For each tab, which must also carry `data-tab-key`. */
+    tabProps(key: string): {
+        'data-tab-key': string;
+        onPointerDown(event: PointerEvent<HTMLElement>): void;
+        onPointerMove(event: PointerEvent<HTMLElement>): void;
+        onPointerUp(event: PointerEvent<HTMLElement>): void;
+        onPointerCancel(event: PointerEvent<HTMLElement>): void;
+        onLostPointerCapture(event: PointerEvent<HTMLElement>): void;
+    };
+}
+
+/** The place among the other tabs of a strip where a dragged tab lands: before the first one whose middle is right of `x`. */
+export function tabDropIndex(strip: Element, key: string, x: number): number {
+    const others = [...strip.querySelectorAll<HTMLElement>('[data-tab-key]')].filter((tab) => tab.dataset.tabKey !== key);
+
+    return others.filter((tab) => {
+        const box = tab.getBoundingClientRect();
+
+        return box.left + box.width / 2 < x;
+    }).length;
+}
+
+/* Where in the strip the insertion line stands for a tab landing at `landing` among the others: halfway the gap it goes in. */
+function insertionLeft(strip: Element, others: readonly string[], landing: number): number {
+    const boxOf = (key: string | undefined) =>
+        key === undefined ? null : (strip.querySelector<HTMLElement>(`[data-tab-key="${CSS.escape(key)}"]`)?.getBoundingClientRect() ?? null);
+    const before = boxOf(others[landing - 1]);
+    const after = boxOf(others[landing]);
+    const origin = strip.getBoundingClientRect().left;
+    const x =
+        before !== null && after !== null
+            ? (before.right + after.left) / 2
+            : after !== null
+              ? after.left - INSERTION_INSET_PX
+              : (before?.right ?? origin) + INSERTION_INSET_PX;
+
+    return Math.max(0, Math.round(x - origin - INSERTION_WIDTH_PX / 2));
+}
+
+function outsideViewport(x: number, y: number): boolean {
+    return x < 0 || y < 0 || x > window.innerWidth || y > window.innerHeight;
+}
+
+/**
+ * Pointer handling for a strip of tabs that a person reorders by dragging, and can drag out of the strip into
+ * a window of its own. The strip stays put while a tab is held, so the insertion line says where it lands and
+ * the drop moves it once. A press on a button inside a tab stays that button's.
+ */
+export function useTabDrag(options: TabDragOptions): TabDrag {
+    const [insertion, setInsertion] = useState<number | null>(null);
+    const press = useRef<Press | null>(null);
+    const strip = useRef<HTMLDivElement>(null);
+    const follows = options.onTearOut !== undefined;
+
+    /*
+     * Out of the strip the tab's element may go with it, so the release is heard on the window itself,
+     * which keeps the pointer for as long as it is down.
+     */
+    const awaitRelease = (held: Press): void => {
+        const types = ['pointerup', 'mouseup', 'pointercancel'] as const;
+        const release = (): void => {
+            for (const type of types) {
+                removeEventListener(type, release);
+            }
+
+            if (press.current === held) {
+                press.current = null;
+            }
+
+            options.onRelease?.(held.key, held.mode === 'window');
+        };
+
+        for (const type of types) {
+            addEventListener(type, release);
+        }
+    };
+
+    const onPointerDown = (event: PointerEvent<HTMLElement>, key: string): void => {
+        // A close button inside the tab is a press of its own.
+        if (event.button !== 0 || (event.target as Element).closest('button') !== null) {
+            return;
+        }
+
+        // Held, the pointer keeps reporting to this tab outside the window too, which is where a tab tears off.
+        event.currentTarget.setPointerCapture(event.pointerId);
+        press.current = { key, pointerId: event.pointerId, grab: { x: event.clientX, y: event.clientY }, mode: 'press', landing: null };
+    };
+
+    const onPointerMove = (event: PointerEvent<HTMLElement>): void => {
+        const held = press.current;
+
+        if (held === null || held.pointerId !== event.pointerId) {
+            return;
+        }
+
+        if (held.mode === 'press') {
+            if (Math.hypot(event.clientX - held.grab.x, event.clientY - held.grab.y) < DRAG_THRESHOLD_PX) {
+                return;
+            }
+
+            if (options.dragsWindow?.(held.key) === true && options.onWindowDrag !== undefined) {
+                held.mode = 'window';
+                awaitRelease(held);
+                options.onWindowDrag(held.key, held.grab);
+
+                return;
+            }
+
+            held.mode = 'reorder';
+        }
+
+        if (held.mode !== 'reorder') {
+            return;
+        }
+
+        const box = strip.current?.getBoundingClientRect();
+        const offStrip = box !== undefined && (event.clientY < box.top - TEAR_DISTANCE_PX || event.clientY > box.bottom + TEAR_DISTANCE_PX);
+
+        if (follows && (offStrip || outsideViewport(event.clientX, event.clientY))) {
+            held.mode = 'out';
+            held.landing = null;
+            setInsertion(null);
+            awaitRelease(held);
+
+            // Held by the middle of its tab, at the start of a strip like this one, until the window it goes into says where its strip is.
+            const tab = event.currentTarget.getBoundingClientRect();
+            const left = box?.left ?? tab.left;
+
+            options.onTearOut?.(held.key, { x: left + tab.width / 2, y: tab.top + tab.height / 2 }, tab.width);
+
+            return;
+        }
+
+        const row = event.currentTarget.parentElement;
+
+        if (row === null || strip.current === null) {
+            return;
+        }
+
+        held.landing = options.landingOf(held.key, tabDropIndex(row, held.key, event.clientX));
+
+        const others = options.keys().filter((one) => one !== held.key);
+
+        setInsertion(held.landing === null ? null : insertionLeft(strip.current, others, held.landing));
+    };
+
+    const onPointerEnd = (event: PointerEvent<HTMLElement>, cancelled: boolean): void => {
+        const held = press.current;
+
+        if (held === null || held.pointerId !== event.pointerId || held.mode === 'out' || held.mode === 'window') {
+            return;
+        }
+
+        press.current = null;
+        setInsertion(null);
+
+        if (held.mode !== 'reorder' || cancelled) {
+            return;
+        }
+
+        if (!follows && options.onTearOff !== undefined && outsideViewport(event.clientX, event.clientY)) {
+            options.onTearOff(held.key, { x: event.screenX - held.grab.x, y: event.screenY - held.grab.y });
+
+            return;
+        }
+
+        if (held.landing !== null) {
+            options.onReorder(held.key, held.landing);
+        }
+    };
+
+    // A held tab whose element moves, as when a tab from elsewhere drops into the strip, lets go of the capture; it is taken back.
+    const onLostPointerCapture = (event: PointerEvent<HTMLElement>): void => {
+        const held = press.current;
+
+        if (held === null || held.pointerId !== event.pointerId || (held.mode !== 'press' && held.mode !== 'reorder')) {
+            return;
+        }
+
+        try {
+            event.currentTarget.setPointerCapture(event.pointerId);
+        } catch {
+            press.current = null;
+        }
+    };
+
+    return {
+        strip,
+        insertion,
+        tabProps: (key) => ({
+            'data-tab-key': key,
+            onPointerDown: (event) => onPointerDown(event, key),
+            onPointerMove,
+            onPointerUp: (event) => onPointerEnd(event, false),
+            onPointerCancel: (event) => onPointerEnd(event, true),
+            onLostPointerCapture
+        })
+    };
+}

package/src/theme.css

@@ -91,6 +91,8 @@
     --media-handle-text: #18181b;
     --media-handle-edge: 0 0 0 1px rgb(0 0 0 / 0.3);
     --media-handle-shadow: 0 2px 12px rgb(0 0 0 / 0.35);
+    /* Around a workspace's sheet; light carries half the blur of dark. */
+    --sheet-shadow: 0 0 7px rgb(30 30 50 / 0.06);
     /* The file type palette. A file icon is the one thing in the interface that is not tinted by the
        theme: TypeScript is blue and Vue is green wherever the file shows up, which is what makes a
        row readable before the name is. The sprite of the file icons reads these, inside a tree's
@@ -151,6 +153,7 @@
     --thumb-shadow:
         0 1px 2px rgb(0 0 0 / 0.5),
         0 2px 4px -1px rgb(0 0 0 / 0.4);
+    --sheet-shadow: 0 0 14px rgb(0 0 0 / 0.3);
     --status-running: #60a5fa;
     --status-needs-you: #fbbf24;
     --status-idle: #4ade80;
@@ -818,16 +821,32 @@
 }
 
 @layer components {
+    /* The sidebar and the content lie on one sheet, which stands over the side panel and the rail with its
+       own edge and shadow; those two sit a step darker, in the well behind it. */
     .ade-workspace {
+        --workspace-well: color-mix(in srgb, var(--surface) 70%, var(--surface-sunken));
         display: flex;
         width: 100%;
         height: 100%;
         min-width: 0;
         min-height: 0;
         overflow: hidden;
-        background: var(--separator);
+        background: var(--workspace-well);
         --border: var(--separator);
     }
+    .ade-workspace-sheet {
+        position: relative;
+        z-index: 1;
+        display: flex;
+        flex: 1;
+        min-width: 0;
+        min-height: 0;
+        overflow: hidden;
+        border-radius: 0 12px 12px 0;
+        /* The surface its regions draw, so no lighter ground shows where the rounded edge cuts them. Roomy shows its gaps in it. */
+        background: var(--surface);
+        box-shadow: 0 0 0 1px var(--border), var(--sheet-shadow);
+    }
     .ade-workspace-center {
         display: flex;
         flex: 1;
@@ -843,7 +862,8 @@
         background: var(--surface);
     }
     .ade-workspace-sidebar { border-right: 1px solid var(--separator); }
-    .ade-workspace-side-panel { border-left: 1px solid var(--separator); }
+    /* What draws a surface inside the panel draws the well instead. Its left edge is the sheet's. */
+    .ade-workspace-side-panel { --surface: var(--workspace-well); }
     .ade-workspace-toolbar {
         flex: none;
         overflow: hidden;
@@ -858,15 +878,46 @@
         overflow: hidden;
         background: var(--surface);
     }
-    .ade-workspace[data-layout="roomy"] > .ade-workspace-center { gap: 8px; }
-    .ade-workspace[data-layout="roomy"] > .ade-workspace-sidebar:not([data-auto]) { margin-right: 8px; }
-    .ade-workspace[data-layout="roomy"] > .ade-workspace-side-panel:not([data-auto]) { margin-left: 8px; }
     .ade-workspace-sidebar[data-auto], .ade-workspace-side-panel[data-auto] { display: contents; }
-    .ade-workspace[data-layout="roomy"] > .ade-workspace-sidebar,
-    .ade-workspace[data-layout="roomy"] > .ade-workspace-side-panel,
-    .ade-workspace[data-layout="roomy"] > .ade-workspace-center > .ade-workspace-toolbar { border: 0; }
-    .ade-workspace[data-layout="roomy"][data-sidebar] > .ade-workspace-center > .ade-workspace-toolbar { border-bottom-left-radius: 8px; }
-    .ade-workspace[data-layout="roomy"][data-side-panel] > .ade-workspace-center > .ade-workspace-toolbar { border-bottom-right-radius: 8px; }
+    .ade-workspace[data-layout="roomy"],
+    .ade-workspace[data-layout="roomy"] > .ade-workspace-sheet { background: var(--separator); }
+    .ade-workspace[data-layout="roomy"] > .ade-workspace-sheet > .ade-workspace-center { gap: 8px; }
+    .ade-workspace[data-layout="roomy"] > .ade-workspace-sheet > .ade-workspace-sidebar:not([data-auto]) { margin-right: 8px; }
+    .ade-workspace[data-layout="roomy"] > .ade-workspace-side-panel:not([data-auto]) { margin-left: 8px; }
+    .ade-workspace[data-layout="roomy"] > .ade-workspace-sheet > .ade-workspace-sidebar,
+    .ade-workspace[data-layout="roomy"] > .ade-workspace-sheet > .ade-workspace-center > .ade-workspace-toolbar { border: 0; }
+    .ade-workspace[data-layout="roomy"] > .ade-workspace-sheet > .ade-workspace-center > .ade-workspace-toolbar { border-radius: 0 0 8px 8px; }
+    .ade-workspace[data-layout="roomy"][data-toolbar] > .ade-workspace-sheet > .ade-workspace-center > .ade-workspace-content { border-radius: 8px 8px 0 0; }
+
+    .ade-workspace-rail {
+        display: flex;
+        flex: none;
+        flex-direction: column;
+        align-items: center;
+        gap: 4px;
+        width: 48px;
+        min-height: 0;
+        /* The 7 pixels and the first separator's 3 put that separator on the bottom line of a 47 pixel toolbar. */
+        padding: 7px 0 8px;
+        background: var(--workspace-well, var(--surface));
+        /* As long as a sliding column takes to open, so the line comes and goes with the panel. */
+        transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
+    }
+    /* No line beside the sheet, whose rounded edge shows while the panel is closed; one beside an open panel. */
+    .ade-workspace[data-side-panel] > .ade-workspace-rail { box-shadow: inset 1px 0 var(--separator); }
+    .ade-workspace[data-layout="roomy"] > .ade-workspace-rail { margin-left: 8px; box-shadow: none; }
+    .ade-workspace-rail-separator {
+        flex: none;
+        width: 20px;
+        height: 1px;
+        margin: 4px 0;
+        background: var(--separator);
+    }
+    .ade-workspace-rail > :nth-child(1 of .ade-workspace-rail-separator) { margin-top: 3px; }
+    .ade-workspace-rail-spacer { flex: 1; }
+    /* The window drags by the top row, except where a control or a pane's title answers the pointer. */
+    .ade-workspace-top-row { -webkit-app-region: drag; }
+    .ade-workspace-top-row :is(button, input, a, [role="tab"], .ade-pane-title) { -webkit-app-region: no-drag; }
     .ade-split-view {
         position: relative;
         isolation: isolate;
@@ -915,8 +966,6 @@
     .ade-split-divider[aria-orientation="horizontal"]::after { inset-inline: 0; top: -1px; height: 2px; }
     .ade-split-view[data-layout="roomy"] > .ade-split-divider[aria-orientation="vertical"]::after { left: 3px; }
     .ade-split-view[data-layout="roomy"] > .ade-split-divider[aria-orientation="horizontal"]::after { top: 3px; }
-    .ade-workspace[data-layout="roomy"][data-toolbar][data-sidebar] > .ade-workspace-center > .ade-workspace-content { border-top-left-radius: 8px; }
-    .ade-workspace[data-layout="roomy"][data-toolbar][data-side-panel] > .ade-workspace-center > .ade-workspace-content { border-top-right-radius: 8px; }
     .ade-split-divider:is(:hover, :focus-visible, [data-resizing])::after { background: var(--accent); }
     .ade-drop-preview {
         position: absolute;
@@ -959,6 +1008,8 @@
         gap: 4px;
         padding: 0 8px 0 12px;
         color: var(--text-muted);
+        /* The weight of a pane's title, so a view reads the same as a tab and as the only view of its pane. */
+        font-weight: 500;
     }
     .ade-document-tab:hover { color: var(--text); background: var(--surface-raised); }
     .ade-document-tab[data-active] { color: var(--text); }
@@ -977,7 +1028,8 @@
         min-width: 0;
         max-width: 160px;
         align-items: center;
-        gap: 6px;
+        /* As far from its icon as a pane's title stands from its glyph. */
+        gap: 8px;
         font-size: var(--text-sm);
         color: inherit;
         outline-offset: -2px;