@adecore/ui 0.49.7 → 0.50.0

package/dist/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;

package/dist/workspace/PaneBar.d.ts

@@ -0,0 +1,39 @@
+import { type ComponentProps, type DragEvent, type ReactNode } from 'react';
+import type { Shortcut } from '../shortcut.ts';
+export interface PaneBarProps extends Omit<ComponentProps<'header'>, 'title' | 'children' | 'onDragStart' | 'onDragEnd'> {
+    /** What the pane is: a glyph and a name, or a `TabStrip` when `tabs` is set. */
+    title: ReactNode;
+    /** The title is a strip of tabs, which takes the bar's room and keeps the bar whatever tab is in front. */
+    tabs?: boolean;
+    /** The pane's own controls. They fold into a "More actions" popover once the title has given way and they still do not fit. */
+    actions?: ReactNode;
+    /** Keeps the actions in the bar of a pane with tabs, rather than in a bar of their own under it. */
+    compactActions?: boolean;
+    /** A separator between the title and the actions of a pane without tabs. */
+    separated?: boolean;
+    /** Between the title and the actions, such as a mark that lives on the line over the body. */
+    accessory?: ReactNode;
+    /** Before the close button, such as a sign that the pane fills the view. */
+    trailing?: ReactNode;
+    focused?: boolean;
+    onClose?(): void;
+    closeLabel?: string;
+    closeShortcut?: Shortcut | string;
+    moreActionsLabel?: string;
+    /** The items of the bar's context menu. Leave it out for a bar without one. */
+    menu?: ReactNode;
+    /** With `onDragStart`, the bar is a handle that drags the pane; a press on a control in it never starts one. */
+    onDragStart?(event: DragEvent<HTMLElement>): void;
+    onDragEnd?(event: DragEvent<HTMLElement>): void;
+    /**
+     * An element to draw the bar in instead of over the pane, such as the slot of a `WorkspaceTopRow`. The bar
+     * stays the pane's in the tree, so its events still reach the pane's handlers. A separator leads it there.
+     */
+    container?: HTMLElement | null;
+}
+/**
+ * The bar over a pane: its title or its tabs, its actions and its close button. Drawn in a `container` it
+ * takes that element's height and background, and only its title answers the pointer, so a window can be
+ * dragged by the rest.
+ */
+export declare function PaneBar({ title, tabs, actions, compactActions, separated, accessory, trailing, focused, onClose, closeLabel, closeShortcut, moreActionsLabel, menu, onDragStart, onDragEnd, container, className, ...props }: PaneBarProps): import("react").JSX.Element;

package/dist/workspace/PaneBar.js

@@ -0,0 +1,399 @@
+import { c as _c } from "react/compiler-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import clsx from 'clsx';
+import { MoreHorizontal } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { CloseButton } from "../CloseButton.js";
+import * as ContextMenu from '../context-menu/index.parts.js';
+import { IconButton } from "../IconButton.js";
+import * as Popover from '../popover/index.parts.js';
+import { Separator } from "../Separator.js";
+/* What the bar holds that is not the bar: a press on one of these is not the start of a drag. */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const CONTROLS = 'input, textarea, select, button, a, [contenteditable=""], [contenteditable="true"], [role="button"]';
+/* Without this margin, a bar right at the fold point would fold and unfold on every pixel of a splitter drag. */
+const UNFOLD_MARGIN = 24;
+/*
+ * Whether the actions are folded into the overflow menu: only once the title has shrunk to its glyph and
+ * the actions still do not fit. The width where that happened is remembered, since a folded bar fits by
+ * definition and can no longer tell by overflowing when there is room again.
+ */
+function useFolded(bar, actions, enabled) {
+  const $ = _c(9);
+  const [foldedAt, setFoldedAt] = useState(null);
+  let t0;
+  if ($[0] !== actions || $[1] !== bar.current || $[2] !== enabled) {
+    t0 = () => {
+      const element = bar.current;
+      if (!enabled || element === null || typeof ResizeObserver === "undefined") {
+        return;
+      }
+      const measure = () => {
+        const width = element.clientWidth;
+        setFoldedAt(current => {
+          if (current !== null) {
+            return width > current + UNFOLD_MARGIN ? null : current;
+          }
+          return element.scrollWidth > width + 1 ? width : null;
+        });
+      };
+      const observer = new ResizeObserver(measure);
+      observer.observe(element);
+      if (actions.current) {
+        observer.observe(actions.current);
+      }
+      measure();
+      return () => observer.disconnect();
+    };
+    $[0] = actions;
+    $[1] = bar.current;
+    $[2] = enabled;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  let t1;
+  if ($[4] !== actions || $[5] !== bar || $[6] !== enabled || $[7] !== foldedAt) {
+    t1 = [bar, actions, enabled, foldedAt];
+    $[4] = actions;
+    $[5] = bar;
+    $[6] = enabled;
+    $[7] = foldedAt;
+    $[8] = t1;
+  } else {
+    t1 = $[8];
+  }
+  useEffect(t0, t1);
+  return enabled && foldedAt !== null;
+}
+/**
+ * The bar over a pane: its title or its tabs, its actions and its close button. Drawn in a `container` it
+ * takes that element's height and background, and only its title answers the pointer, so a window can be
+ * dragged by the rest.
+ */
+export function PaneBar(t0) {
+  const $ = _c(86);
+  let accessory;
+  let actions;
+  let className;
+  let closeLabel;
+  let closeShortcut;
+  let menu;
+  let moreActionsLabel;
+  let onClose;
+  let onDragEnd;
+  let onDragStart;
+  let props;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  let title;
+  let trailing;
+  if ($[0] !== t0) {
+    ({
+      title,
+      tabs: t1,
+      actions,
+      compactActions: t2,
+      separated: t3,
+      accessory,
+      trailing,
+      focused: t4,
+      onClose,
+      closeLabel,
+      closeShortcut,
+      moreActionsLabel,
+      menu,
+      onDragStart,
+      onDragEnd,
+      container: t5,
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = accessory;
+    $[2] = actions;
+    $[3] = className;
+    $[4] = closeLabel;
+    $[5] = closeShortcut;
+    $[6] = menu;
+    $[7] = moreActionsLabel;
+    $[8] = onClose;
+    $[9] = onDragEnd;
+    $[10] = onDragStart;
+    $[11] = props;
+    $[12] = t1;
+    $[13] = t2;
+    $[14] = t3;
+    $[15] = t4;
+    $[16] = t5;
+    $[17] = title;
+    $[18] = trailing;
+  } else {
+    accessory = $[1];
+    actions = $[2];
+    className = $[3];
+    closeLabel = $[4];
+    closeShortcut = $[5];
+    menu = $[6];
+    moreActionsLabel = $[7];
+    onClose = $[8];
+    onDragEnd = $[9];
+    onDragStart = $[10];
+    props = $[11];
+    t1 = $[12];
+    t2 = $[13];
+    t3 = $[14];
+    t4 = $[15];
+    t5 = $[16];
+    title = $[17];
+    trailing = $[18];
+  }
+  const tabs = t1 === undefined ? false : t1;
+  const compactActions = t2 === undefined ? false : t2;
+  const separated = t3 === undefined ? false : t3;
+  const focused = t4 === undefined ? false : t4;
+  const container = t5 === undefined ? null : t5;
+  const {
+    t
+  } = useTranslation("ui");
+  const [grabbable, setGrabbable] = useState(true);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const bar = useRef(null);
+  const actionsBar = useRef(null);
+  const actionsRef = useRef(null);
+  const hasActions = actions !== undefined && actions !== null && actions !== false;
+  const separate = tabs && !compactActions;
+  const folded = useFolded(separate ? actionsBar : bar, actionsRef, hasActions);
+  const inContainer = container !== null;
+  const draggable = onDragStart !== undefined;
+  let t6;
+  if ($[19] !== actions || $[20] !== compactActions || $[21] !== folded || $[22] !== hasActions || $[23] !== menuOpen || $[24] !== moreActionsLabel || $[25] !== separated || $[26] !== t || $[27] !== tabs) {
+    t6 = hasActions && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [!folded && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [!tabs && separated && /*#__PURE__*/_jsx(Separator, {}), /*#__PURE__*/_jsx("span", {
+          ref: actionsRef,
+          className: clsx("flex min-w-min items-center", tabs && compactActions ? "shrink-0" : "grow"),
+          children: actions
+        })]
+      }), folded && /*#__PURE__*/_jsxs(Popover.Root, {
+        open: menuOpen,
+        onOpenChange: setMenuOpen,
+        children: [/*#__PURE__*/_jsx(IconButton, {
+          icon: MoreHorizontal,
+          size: "sm",
+          label: moreActionsLabel ?? t("workspace.moreActions"),
+          className: "cursor-default",
+          render: /*#__PURE__*/_jsx(Popover.Trigger, {})
+        }), /*#__PURE__*/_jsx(Popover.Popup, {
+          sideOffset: 6,
+          align: "end",
+          className: "flex min-w-72 items-center gap-2 p-2 text-xs",
+          children: actions
+        })]
+      }), folded && !menuOpen && /*#__PURE__*/_jsx("span", {
+        hidden: true,
+        className: "hidden",
+        children: actions
+      })]
+    });
+    $[19] = actions;
+    $[20] = compactActions;
+    $[21] = folded;
+    $[22] = hasActions;
+    $[23] = menuOpen;
+    $[24] = moreActionsLabel;
+    $[25] = separated;
+    $[26] = t;
+    $[27] = tabs;
+    $[28] = t6;
+  } else {
+    t6 = $[28];
+  }
+  const actionsPart = t6;
+  const t7 = inContainer ? "container" : undefined;
+  const t8 = draggable && grabbable;
+  const t9 = draggable && "cursor-grab active:cursor-grabbing";
+  let t10;
+  if ($[29] !== className || $[30] !== focused || $[31] !== inContainer || $[32] !== t9 || $[33] !== tabs) {
+    t10 = clsx("ade-pane-bar flex items-center gap-2 overflow-hidden text-xs", t9, inContainer ? "h-full min-w-0 grow text-text" : clsx("h-10 shrink-0 border-b border-border pr-1.5", !tabs && "pl-2", focused ? "bg-surface text-text" : "bg-surface-idle text-text-muted"), className);
+    $[29] = className;
+    $[30] = focused;
+    $[31] = inContainer;
+    $[32] = t9;
+    $[33] = tabs;
+    $[34] = t10;
+  } else {
+    t10 = $[34];
+  }
+  let t11;
+  let t12;
+  if ($[35] !== props) {
+    t11 = event => {
+      setGrabbable(!event.target?.closest(CONTROLS));
+      props.onPointerDown?.(event);
+    };
+    t12 = event_0 => {
+      setGrabbable(true);
+      props.onPointerUp?.(event_0);
+    };
+    $[35] = props;
+    $[36] = t11;
+    $[37] = t12;
+  } else {
+    t11 = $[36];
+    t12 = $[37];
+  }
+  const t13 = tabs ? "min-w-24 self-stretch" : "min-w-5";
+  const t14 = inContainer ? tabs ? "-ml-1" : "pl-2" : !tabs && "pl-1";
+  const t15 = tabs || (folded || !hasActions) && !inContainer ? "grow" : "shrink-100";
+  let t16;
+  if ($[38] !== t13 || $[39] !== t14 || $[40] !== t15) {
+    t16 = clsx("ade-pane-title flex items-center gap-2", t13, t14, t15);
+    $[38] = t13;
+    $[39] = t14;
+    $[40] = t15;
+    $[41] = t16;
+  } else {
+    t16 = $[41];
+  }
+  let t17;
+  if ($[42] !== t16 || $[43] !== title) {
+    t17 = /*#__PURE__*/_jsx("span", {
+      "data-pane-title": "",
+      className: t16,
+      children: title
+    });
+    $[42] = t16;
+    $[43] = title;
+    $[44] = t17;
+  } else {
+    t17 = $[44];
+  }
+  const t18 = !separate && actionsPart;
+  let t19;
+  if ($[45] !== folded || $[46] !== hasActions || $[47] !== inContainer || $[48] !== tabs) {
+    t19 = inContainer && !tabs && (folded || !hasActions) && /*#__PURE__*/_jsx("span", {
+      "aria-hidden": "true",
+      className: "grow self-stretch"
+    });
+    $[45] = folded;
+    $[46] = hasActions;
+    $[47] = inContainer;
+    $[48] = tabs;
+    $[49] = t19;
+  } else {
+    t19 = $[49];
+  }
+  let t20;
+  if ($[50] !== closeLabel || $[51] !== closeShortcut || $[52] !== onClose || $[53] !== t) {
+    t20 = onClose && /*#__PURE__*/_jsx(CloseButton, {
+      label: closeLabel ?? t("workspace.closePane"),
+      kbd: closeShortcut,
+      size: "sm",
+      className: "cursor-default",
+      onClick: onClose
+    });
+    $[50] = closeLabel;
+    $[51] = closeShortcut;
+    $[52] = onClose;
+    $[53] = t;
+    $[54] = t20;
+  } else {
+    t20 = $[54];
+  }
+  let t21;
+  if ($[55] !== accessory || $[56] !== onDragEnd || $[57] !== onDragStart || $[58] !== props || $[59] !== t10 || $[60] !== t11 || $[61] !== t12 || $[62] !== t17 || $[63] !== t18 || $[64] !== t19 || $[65] !== t20 || $[66] !== t7 || $[67] !== t8 || $[68] !== trailing) {
+    t21 = /*#__PURE__*/_jsxs("header", {
+      ...props,
+      ref: bar,
+      "data-pane-bar": "",
+      "data-placement": t7,
+      draggable: t8,
+      className: t10,
+      onPointerDown: t11,
+      onPointerUp: t12,
+      onDragStart: onDragStart,
+      onDragEnd: onDragEnd,
+      children: [t17, accessory, t18, t19, trailing, t20]
+    });
+    $[55] = accessory;
+    $[56] = onDragEnd;
+    $[57] = onDragStart;
+    $[58] = props;
+    $[59] = t10;
+    $[60] = t11;
+    $[61] = t12;
+    $[62] = t17;
+    $[63] = t18;
+    $[64] = t19;
+    $[65] = t20;
+    $[66] = t7;
+    $[67] = t8;
+    $[68] = trailing;
+    $[69] = t21;
+  } else {
+    t21 = $[69];
+  }
+  const header = t21;
+  let t22;
+  if ($[70] !== header || $[71] !== menu) {
+    t22 = menu === undefined ? header : /*#__PURE__*/_jsxs(ContextMenu.Root, {
+      children: [/*#__PURE__*/_jsx(ContextMenu.Trigger, {
+        render: header
+      }), /*#__PURE__*/_jsx(ContextMenu.Popup, {
+        children: menu
+      })]
+    });
+    $[70] = header;
+    $[71] = menu;
+    $[72] = t22;
+  } else {
+    t22 = $[72];
+  }
+  const placed = t22;
+  let t23;
+  if ($[73] !== container || $[74] !== inContainer || $[75] !== placed) {
+    t23 = inContainer ? createPortal(/*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Separator, {}), placed]
+    }), container) : placed;
+    $[73] = container;
+    $[74] = inContainer;
+    $[75] = placed;
+    $[76] = t23;
+  } else {
+    t23 = $[76];
+  }
+  let t24;
+  if ($[77] !== actionsPart || $[78] !== focused || $[79] !== folded || $[80] !== hasActions || $[81] !== separate) {
+    t24 = separate && hasActions && /*#__PURE__*/_jsx("div", {
+      ref: actionsBar,
+      "data-pane-actions": "",
+      className: clsx("flex h-10 shrink-0 items-center gap-2 overflow-hidden border-b border-border px-2 text-xs", folded && "justify-end", focused ? "bg-surface text-text" : "bg-surface-idle text-text-muted"),
+      children: actionsPart
+    });
+    $[77] = actionsPart;
+    $[78] = focused;
+    $[79] = folded;
+    $[80] = hasActions;
+    $[81] = separate;
+    $[82] = t24;
+  } else {
+    t24 = $[82];
+  }
+  let t25;
+  if ($[83] !== t23 || $[84] !== t24) {
+    t25 = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [t23, t24]
+    });
+    $[83] = t23;
+    $[84] = t24;
+    $[85] = t25;
+  } else {
+    t25 = $[85];
+  }
+  return t25;
+}

package/dist/workspace/Workspace.d.ts

@@ -6,10 +6,13 @@ export interface WorkspaceProps extends useRender.ComponentProps<'div'> {
     toolbar?: ReactNode;
     sidebar?: ReactNode;
     sidePanel?: ReactNode;
+    /** A column at the window's right edge, after the side panel, usually a `WorkspaceRail`. */
+    rail?: ReactNode;
     /** Auto-sized regions keep their own width, separators and opening animation. */
     sidebarWidth?: number | 'auto';
     sidePanelWidth?: number | 'auto';
     sidebarOpen?: boolean;
     sidePanelOpen?: boolean;
 }
-export declare function Workspace({ layout, toolbar, sidebar, sidePanel, sidebarWidth, sidePanelWidth, sidebarOpen, sidePanelOpen, children, className, ref, render, style, ...props }: WorkspaceProps): import("react").JSX.Element;
+/** The sidebar, the toolbar and the content on one raised sheet, with the side panel and the rail behind it. */
+export declare function Workspace({ layout, toolbar, sidebar, sidePanel, rail, sidebarWidth, sidePanelWidth, sidebarOpen, sidePanelOpen, children, className, ref, render, style, ...props }: WorkspaceProps): import("react").JSX.Element;