@gogitcms/design-system 0.16.0-next.13 → 0.16.0-next.15

package/src/components/Input.tsx

@@ -21,6 +21,11 @@ export type InputProps = {
   // error highlights the field with the danger border color (e.g. a failed save
   // or validation naming this field).
   error?: boolean;
+  // prefix renders a fixed, read-only fragment ahead of the editable text, as
+  // one control — for a value whose start is decided elsewhere (a branch name
+  // under the repository's prefix). It is display only: `value` is the part
+  // after it, and the caller composes the whole.
+  prefix?: string;
   style?: StyleProp<ViewStyle>;
   testID?: string;
   // Optional focus/blur passthroughs (used by collaborative presence tracking).
@@ -45,6 +50,7 @@ export function Input({
   keyboardType,
   editable = true,
   error = false,
+  prefix,
   style,
   testID,
   onFocus,
@@ -58,6 +64,12 @@ export function Input({
     if (focusSignal) ref.current?.focus();
   }, [focusSignal]);
 
+  const borderColor = error
+    ? t.color.diffDelFg
+    : focused && editable
+    ? t.color.borderStrong
+    : t.color.borderDefault;
+
   return (
     <View style={[{ gap: t.space(2) }, style]}>
       {label ? (
@@ -65,6 +77,26 @@ export function Input({
           {label}
         </Text>
       ) : null}
+      <View style={{ flexDirection: "row", alignItems: "stretch" }}>
+      {prefix ? (
+        <View
+          testID={testID ? `${testID}-prefix` : undefined}
+          accessibilityLabel={`Prefix ${prefix}`}
+          style={{
+            height: t.control[size],
+            paddingHorizontal: t.space(3),
+            justifyContent: "center",
+            borderWidth: 1,
+            borderRightWidth: 0,
+            borderColor,
+            borderTopLeftRadius: t.radius.md,
+            borderBottomLeftRadius: t.radius.md,
+            backgroundColor: t.color.surfaceSunken,
+          }}
+        >
+          <Text variant="mono" color="secondary" style={{ fontSize: t.type.mono.size }}>{prefix}</Text>
+        </View>
+      ) : null}
       <TextInput
         ref={ref}
         testID={testID}
@@ -85,15 +117,14 @@ export function Input({
         // has no outlineStyle, and the mismatch is reported on the whole style
         // object rather than on the property, so the suppression belongs here.
         style={{
+          flex: 1,
           height: t.control[size],
           paddingHorizontal: t.space(3),
           borderRadius: t.radius.md,
+          borderTopLeftRadius: prefix ? 0 : t.radius.md,
+          borderBottomLeftRadius: prefix ? 0 : t.radius.md,
           borderWidth: 1,
-          borderColor: error
-            ? t.color.diffDelFg
-            : focused && editable
-            ? t.color.borderStrong
-            : t.color.borderDefault,
+          borderColor,
           backgroundColor: editable ? t.color.surfaceRaised : t.color.surfaceSunken,
           color: editable ? t.color.textPrimary : t.color.textSecondary,
           fontFamily: mono ? t.font.mono : t.font.sans,
@@ -101,6 +132,7 @@ export function Input({
           outlineStyle: "none",
         }}
       />
+      </View>
     </View>
   );
 }

package/src/components/Notifications.tsx

@@ -8,7 +8,7 @@ import type { IconName } from "../icons";
 import { Spinner } from "./Spinner";
 
 // One notification, shaped for display. Transport-agnostic: the frontend/mobile
-// apps map GraphQL rows and the desktop and dashboard map REST rows into this.
+// apps map GraphQL rows and the dashboard maps REST rows into this.
 export type NotificationItem = {
   id: string;
   title: string;

package/src/components/ProjectMenu.tsx

@@ -1,13 +1,41 @@
 import React, { useState } from "react";
 import { View, Pressable } from "react-native";
 import { useTheme } from "../ThemeProvider";
+import type { IconName } from "../icons";
 import { Text } from "./Text";
 import { Icon } from "./Icon";
+import { Divider } from "./primitives";
 
-export type ProjectRef = { name: string; label: string };
+export type ProjectRef = {
+  name: string;
+  label: string;
+  /**
+   * Identifies the project within the list. Defaults to the name, which is
+   * unique within one repository; a list spanning repositories (one covering
+   * a whole workspace) sets its own, since two of them may each have a
+   * "docs".
+   */
+  key?: string;
+  /**
+   * The line under the label. Defaults to the name when it differs from the
+   * label; a workspace-wide list uses it to say which repository a project is
+   * in.
+   */
+  detail?: string;
+};
+
+// A row under the project list that does something other than switch.
+export type ProjectMenuAction = {
+  label: string;
+  icon?: IconName;
+  onSelect: () => void;
+  testID?: string;
+};
+
+const refKey = (p: ProjectRef) => p.key ?? p.name;
 
 export type ProjectMenuProps = {
-  /** The project currently being edited, by manifest name. */
+  /** The project currently being edited: its key, which is the manifest name unless the list sets keys. */
   current?: string;
   /**
    * Every project of the repository. Omitted, empty, or a single entry renders
@@ -22,6 +50,13 @@ export type ProjectMenuProps = {
    * broken picker.
    */
   locked?: boolean;
+  /**
+   * Offers each project in a window of its own, beside switching this one to
+   * it. Only a host with windows to open passes it.
+   */
+  onOpenInNewWindow?: (project: ProjectRef) => void;
+  /** Rows under the list, divided from it. */
+  actions?: ProjectMenuAction[];
   testID?: string;
 };
 
@@ -40,7 +75,7 @@ export type ProjectMenuProps = {
  * Project names are identifiers (they appear in URLs and in cms.config.js), so
  * the name renders mono; the human label renders alongside it when it differs.
  */
-export function ProjectMenu({ current, projects, onSelect, locked, testID = "project" }: ProjectMenuProps) {
+export function ProjectMenu({ current, projects, onSelect, locked, onOpenInNewWindow, actions, testID = "project" }: ProjectMenuProps) {
   const t = useTheme();
   const [open, setOpen] = useState(false);
 
@@ -49,7 +84,7 @@ export function ProjectMenu({ current, projects, onSelect, locked, testID = "pro
   if (list.length === 0) return null;
   if (list.length < 2 && !locked) return null;
 
-  const active = list.find((p) => p.name === current);
+  const active = list.find((p) => refKey(p) === current);
   const shown = active?.label || active?.name || current || "";
 
   const badge = (
@@ -87,35 +122,74 @@ export function ProjectMenu({ current, projects, onSelect, locked, testID = "pro
           />
           <View
             style={{
-              position: "absolute", top: t.control.sm + 4, left: 0, minWidth: 220,
+              position: "absolute", top: t.control.sm + 4, left: 0, minWidth: onOpenInNewWindow ? 280 : 220,
               backgroundColor: t.color.surfaceRaised, borderRadius: t.radius.md,
               borderWidth: 1, borderColor: t.color.borderDefault,
               paddingVertical: t.space(1), zIndex: 50,
             }}
           >
-            {list.map((p) => (
-              <Pressable
-                key={p.name}
-                onPress={() => { setOpen(false); onSelect(p); }}
-                style={{
-                  flexDirection: "row", alignItems: "center", gap: 8,
-                  paddingHorizontal: t.space(3), paddingVertical: t.space(2),
-                }}
-                testID={`${testID}-option-${p.name || "default"}`}
-              >
-                <Icon
-                  name={p.name === current ? "check" : "folder"}
-                  size={13}
-                  color={p.name === current ? t.color.textPrimary : t.color.textTertiary}
-                />
-                <View style={{ flex: 1 }}>
-                  <Text variant="sm" numberOfLines={1}>{p.label || p.name}</Text>
-                  {p.label && p.label !== p.name ? (
-                    <Text variant="monoSm" color="tertiary" numberOfLines={1}>{p.name}</Text>
+            {list.map((p) => {
+              const key = refKey(p);
+              const detail = p.detail ?? (p.label && p.label !== p.name ? p.name : undefined);
+              return (
+                <View key={key} style={{ flexDirection: "row", alignItems: "center" }}>
+                  <Pressable
+                    onPress={() => { setOpen(false); onSelect(p); }}
+                    style={{
+                      flex: 1, flexDirection: "row", alignItems: "center", gap: 8,
+                      paddingHorizontal: t.space(3), paddingVertical: t.space(2),
+                    }}
+                    testID={`${testID}-option-${key || "default"}`}
+                  >
+                    <Icon
+                      name={key === current ? "check" : "folder"}
+                      size={13}
+                      color={key === current ? t.color.textPrimary : t.color.textTertiary}
+                    />
+                    <View style={{ flex: 1, minWidth: 0 }}>
+                      <Text variant="sm" numberOfLines={1}>{p.label || p.name}</Text>
+                      {detail ? (
+                        <Text variant="monoSm" color="tertiary" numberOfLines={1}>{detail}</Text>
+                      ) : null}
+                    </View>
+                  </Pressable>
+                  {onOpenInNewWindow ? (
+                    <Pressable
+                      onPress={() => { setOpen(false); onOpenInNewWindow(p); }}
+                      accessibilityRole="button"
+                      accessibilityLabel={`Open ${p.label || p.name} in a new window`}
+                      style={({ pressed, hovered }: { pressed: boolean; hovered?: boolean }) => ({
+                        width: 28, height: 28, marginRight: t.space(1.5),
+                        alignItems: "center", justifyContent: "center", borderRadius: t.radius.md,
+                        backgroundColor: hovered || pressed ? t.color.surfaceHover : "transparent",
+                      })}
+                      testID={`${testID}-new-window-${key || "default"}`}
+                    >
+                      <Icon name="externalLink" size={13} color={t.color.textTertiary} />
+                    </Pressable>
                   ) : null}
                 </View>
-              </Pressable>
-            ))}
+              );
+            })}
+            {actions?.length ? (
+              <>
+                <Divider style={{ marginVertical: t.space(1) }} />
+                {actions.map((a, i) => (
+                  <Pressable
+                    key={`${a.label}-${i}`}
+                    onPress={() => { setOpen(false); a.onSelect(); }}
+                    style={{
+                      flexDirection: "row", alignItems: "center", gap: 8,
+                      paddingHorizontal: t.space(3), paddingVertical: t.space(2),
+                    }}
+                    testID={a.testID ?? `${testID}-action-${i}`}
+                  >
+                    <Icon name={a.icon ?? "grid"} size={13} color={t.color.textTertiary} />
+                    <Text variant="sm" numberOfLines={1}>{a.label}</Text>
+                  </Pressable>
+                ))}
+              </>
+            ) : null}
           </View>
         </>
       ) : null}

package/src/components/ProtectedBranchModal.tsx

@@ -17,8 +17,17 @@ export type ProtectedBranchModalProps = {
   busy?: boolean;
   /** The server's message, when the attempt failed. */
   error?: string | null;
-  /** Create `name` from `branch` and save the pending edit onto it. */
+  /**
+   * Create `name` from `branch` and save the pending edit onto it. `name` is
+   * the full branch name, prefix applied.
+   */
   onCreate: (name: string) => void;
+  /**
+   * The repository's branch prefix ("cms/"), shown read-only ahead of the
+   * field — see BranchMenu. A suggestion that already carries it is shown
+   * without it, so the prefix is never doubled.
+   */
+  prefix?: string;
   /** Dismiss. The edit stays as an unsaved draft on the protected branch. */
   onCancel: () => void;
 };
@@ -36,21 +45,23 @@ export type ProtectedBranchModalProps = {
  * branch name later. It stays in storage exactly as any other unsaved work does.
  */
 export function ProtectedBranchModal({
-  branch, documentLabel, suggestedName, busy, error, onCreate, onCancel,
+  branch, documentLabel, suggestedName, busy, error, onCreate, onCancel, prefix,
 }: ProtectedBranchModalProps) {
   const t = useTheme();
-  const [name, setName] = useState(suggestedName ?? "");
+  const stripPrefix = (s: string) => (prefix && s.startsWith(prefix) ? s.slice(prefix.length) : s);
+  const [name, setName] = useState(stripPrefix(suggestedName ?? ""));
   // The suggestion is derived from the document, which the host may resolve a
   // render after the modal opens. Adopted only while the field is untouched.
   const [touched, setTouched] = useState(false);
   useEffect(() => {
-    if (!touched && suggestedName) setName(suggestedName);
-  }, [suggestedName, touched]);
+    if (!touched && suggestedName) setName(stripPrefix(suggestedName));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [suggestedName, touched, prefix]);
 
   const trimmed = name.trim();
   const submit = () => {
     if (!trimmed || busy) return;
-    onCreate(trimmed);
+    onCreate((prefix ?? "") + trimmed);
   };
 
   return (
@@ -98,12 +109,13 @@ export function ProtectedBranchModal({
           value={name}
           onChangeText={(v) => { setTouched(true); setName(v); }}
           onSubmitEditing={submit}
-          placeholder="feat/my-change"
+          placeholder={prefix ? "my-change" : "feat/my-change"}
           autoCapitalize="none"
           autoFocus
           mono
           editable={!busy}
           error={!!error}
+          prefix={prefix}
           testID="protected-branch-name"
         />
         <Text variant="monoSm" color="tertiary">{`Branched from ${branch}`}</Text>

package/src/components/Skeleton.tsx

@@ -121,30 +121,22 @@ function DesktopSkeleton() {
         />
       }
     >
-      {/* nav */}
-      <Pane width={t.layout.sidebar} testID="skeleton-pane-nav">
-        <SectionLabel><SkeletonBox width={60} height={9} /></SectionLabel>
-        {[0, 1, 2].map((i) => <NavRowSkeleton key={i} />)}
-        <View style={{ height: t.space(2) }} />
-        <SectionLabel><SkeletonBox width={72} height={9} /></SectionLabel>
-        {[0, 1].map((i) => <NavRowSkeleton key={i} />)}
-      </Pane>
-
-      {/* entries */}
+      {/* master: the sections list, which is what the editor opens on */}
       <Pane
-        width={340}
-        testID="skeleton-pane-entries"
+        width={t.layout.master}
+        testID="skeleton-pane-master"
         header={
           <>
-            <View style={{ flex: 1 }}><SkeletonBox width={120} height={16} /></View>
-            <SkeletonBox width={72} height={t.control.sm} radius={t.radius.md} />
+            <View style={{ flex: 1 }}><SkeletonBox width={72} height={16} /></View>
+            <SkeletonBox width={t.control.sm} height={t.control.sm} radius={t.radius.md} />
           </>
         }
       >
-        <View style={{ paddingHorizontal: t.space(4), paddingVertical: t.space(2) }}>
-          <SkeletonBox width={150} height={10} />
-        </View>
-        {[0, 1, 2, 3, 4, 5].map((i) => <EntryRowSkeleton key={i} />)}
+        <SectionLabel><SkeletonBox width={60} height={9} /></SectionLabel>
+        {[0, 1, 2].map((i) => <NavRowSkeleton key={i} />)}
+        <View style={{ height: t.space(2) }} />
+        <SectionLabel><SkeletonBox width={72} height={9} /></SectionLabel>
+        {[0, 1].map((i) => <NavRowSkeleton key={i} />)}
       </Pane>
 
       {/* detail */}
@@ -204,7 +196,8 @@ function MobileSkeleton() {
 
 /**
  * Full-shell loading placeholder shown while an autologin token is being
- * exchanged. Mirrors the ContentBrowser layout (same panes, widths, and borders)
+ * exchanged. Mirrors the ContentBrowser layout (the master pane and the detail
+ * region, at the same widths and with the same borders)
  * so the real content mounts into place without a jarring layout shift — and the
  * login form never flashes on the way in.
  */

package/src/components/WorkspaceMenu.tsx

@@ -0,0 +1,162 @@
+import React, { useState } from "react";
+import { View, Pressable } from "react-native";
+import { useTheme } from "../ThemeProvider";
+import type { IconName } from "../icons";
+import { Text } from "./Text";
+import { Icon } from "./Icon";
+import { Avatar, Divider } from "./primitives";
+
+export type WorkspaceRef = { id: string; name: string; slug?: string };
+
+// A row under the workspace list that does something other than switch, e.g.
+// opening the workspace's overview.
+export type WorkspaceMenuAction = {
+  label: string;
+  icon?: IconName;
+  onSelect: () => void;
+  testID?: string;
+};
+
+export type WorkspaceMenuProps = {
+  /** Every workspace the signed-in user belongs to. */
+  workspaces: WorkspaceRef[];
+  /** The workspace being shown, by id. */
+  current?: string;
+  onSelect: (workspace: WorkspaceRef) => void;
+  /** Rows under the list, divided from it. */
+  actions?: WorkspaceMenuAction[];
+  /**
+   * What the menu is of. "folder" is a folder on disk standing where a
+   * workspace would (an app's local mode): drawn with a folder
+   * rather than a monogram, its path (given as the slug) under its name.
+   */
+  kind?: "workspace" | "folder";
+  testID?: string;
+};
+
+// workspaceInitials builds the one or two letter monogram the avatar shows.
+export function workspaceInitials(name: string): string {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "?";
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+
+/**
+ * The top bar's workspace switcher: the workspace's monogram and name, which
+ * opens the list of every workspace the user belongs to. It takes the place of
+ * the static workspace tag for a host that can move between workspaces; the
+ * web editor is addressed to one workspace by its URL and keeps the tag.
+ *
+ * It is a menu even with one workspace: the list confirms where you are, and
+ * the actions below it still apply.
+ */
+export function WorkspaceMenu({ workspaces, current, onSelect, actions, kind = "workspace", testID = "workspace" }: WorkspaceMenuProps) {
+  const t = useTheme();
+  const [open, setOpen] = useState(false);
+  const active = workspaces.find((w) => w.id === current);
+  const folder = kind === "folder";
+  const name = active?.name ?? (folder ? "Folder" : "Workspace");
+
+  const rowStyle = ({ pressed, hovered }: { pressed: boolean; hovered?: boolean }) => ({
+    flexDirection: "row" as const, alignItems: "center" as const, gap: t.space(2),
+    paddingHorizontal: t.space(3), paddingVertical: t.space(2),
+    backgroundColor: hovered || pressed ? t.color.surfaceHover : "transparent",
+  });
+
+  return (
+    <View style={{ position: "relative" }}>
+      <Pressable
+        testID={`${testID}-menu`}
+        accessibilityRole="button"
+        accessibilityLabel={folder ? `Folder ${name}` : `Workspace ${name}. Switch workspace`}
+        onPress={() => setOpen((v) => !v)}
+        style={({ pressed }) => ({
+          flexDirection: "row", alignItems: "center", gap: 8,
+          opacity: pressed ? 0.6 : 1,
+        })}
+      >
+        {folder ? (
+          <View
+            style={{
+              width: 24, height: 24, borderRadius: t.radius.sm, borderWidth: 1, borderColor: t.color.borderDefault,
+              backgroundColor: t.color.surfaceSunken, alignItems: "center", justifyContent: "center",
+            }}
+          >
+            <Icon name="folder" size={13} color={t.color.textSecondary} />
+          </View>
+        ) : (
+          <Avatar initials={workspaceInitials(name)} size={24} />
+        )}
+        <Text variant="body" weight="semibold" numberOfLines={1} testID={`${testID}-name`}>{name}</Text>
+        <Icon name="chevronDown" size={12} color={t.color.textTertiary} />
+      </Pressable>
+      {open ? (
+        <>
+          {/* Full-screen catcher so a click anywhere dismisses, matching how the
+              other top-bar menus close. */}
+          <Pressable
+            onPress={() => setOpen(false)}
+            style={{ position: "absolute", top: -2000, left: -2000, right: -2000, bottom: -2000 }}
+            testID={`${testID}-backdrop`}
+          />
+          <View
+            testID={`${testID}-menu-list`}
+            style={{
+              position: "absolute", top: 24 + 8, left: 0, minWidth: 240, maxWidth: 420, zIndex: 50,
+              backgroundColor: t.color.surfaceRaised, borderWidth: 1, borderColor: t.color.borderDefault,
+              borderRadius: t.radius.md, paddingVertical: t.space(1),
+            }}
+          >
+            <View style={{ paddingHorizontal: t.space(3), paddingTop: t.space(1.5), paddingBottom: t.space(1) }}>
+              <Text variant="label" color="tertiary">{folder ? "Folder" : "Workspaces"}</Text>
+            </View>
+            {workspaces.map((w) => (
+              <Pressable
+                key={w.id}
+                testID={`${testID}-option-${w.slug || w.id}`}
+                accessibilityRole="menuitem"
+                accessibilityState={{ selected: w.id === current }}
+                onPress={() => {
+                  setOpen(false);
+                  if (w.id !== current) onSelect(w);
+                }}
+                style={rowStyle}
+              >
+                <Icon
+                  name={w.id === current ? "check" : folder ? "folder" : "building"}
+                  size={13}
+                  color={w.id === current ? t.color.textPrimary : t.color.textTertiary}
+                />
+                <View style={{ flex: 1, minWidth: 0 }}>
+                  <Text variant="sm" numberOfLines={1}>{w.name}</Text>
+                  {w.slug ? <Text variant="monoSm" color="tertiary" numberOfLines={1}>{w.slug}</Text> : null}
+                </View>
+              </Pressable>
+            ))}
+            {actions?.length ? (
+              <>
+                <Divider style={{ marginVertical: t.space(1) }} />
+                {actions.map((a, i) => (
+                  <Pressable
+                    key={`${a.label}-${i}`}
+                    testID={a.testID ?? `${testID}-action-${i}`}
+                    accessibilityRole="menuitem"
+                    onPress={() => {
+                      setOpen(false);
+                      a.onSelect();
+                    }}
+                    style={rowStyle}
+                  >
+                    <Icon name={a.icon ?? "grid"} size={13} color={t.color.textTertiary} />
+                    <Text variant="sm" numberOfLines={1}>{a.label}</Text>
+                  </Pressable>
+                ))}
+              </>
+            ) : null}
+          </View>
+        </>
+      ) : null}
+    </View>
+  );
+}

package/src/components/documentDrafts.ts

@@ -28,6 +28,9 @@ export type DocumentDraft = {
 
 const PREFIX = "gitcms.draft.v1:";
 
+// The key the store is probed with, which is never a draft.
+const PROBE = PREFIX + "probe";
+
 // The in-memory fallback, also the store under a browser that refuses
 // localStorage (Safari in private mode throws on write, not on access).
 const memory = new Map<string, string>();
@@ -39,16 +42,26 @@ type Store = {
   keys(): string[];
 };
 
+// The store, chosen once. The probe below writes to localStorage, and every
+// write is a storage event in the origin's other pages. Probed on every read,
+// two open editors answered each other forever: the event invalidated the
+// list, whose re-render read the store, which probed again.
+let chosen: Store | null = null;
+
 function store(): Store {
+  if (!chosen) chosen = choose();
+  return chosen;
+}
+
+function choose(): Store {
   try {
     const ls = typeof localStorage !== "undefined" ? localStorage : null;
     if (ls) {
       // Probed rather than assumed: private-mode Safari exposes localStorage and
       // throws QuotaExceededError on the first write, and finding that out on
       // the user's first keystroke is worse than finding it out now.
-      const probe = PREFIX + "probe";
-      ls.setItem(probe, "1");
-      ls.removeItem(probe);
+      ls.setItem(PROBE, "1");
+      ls.removeItem(PROBE);
       return {
         get: (k) => ls.getItem(k),
         set: (k, v) => ls.setItem(k, v),
@@ -95,7 +108,7 @@ function ids(): Set<string> {
     cache = new Set(
       store()
         .keys()
-        .filter((k) => k.startsWith(PREFIX))
+        .filter((k) => k.startsWith(PREFIX) && k !== PROBE)
         .map((k) => k.slice(PREFIX.length)),
     );
   }
@@ -118,6 +131,8 @@ export function subscribeDrafts(onChange: () => void): () => void {
   if (!storageBound && typeof window !== "undefined" && typeof window.addEventListener === "function") {
     storageBound = true;
     window.addEventListener("storage", (e) => {
+      // Another page probing its store has written no draft.
+      if (e.key === PROBE) return;
       if (!e.key || e.key.startsWith(PREFIX)) invalidate();
     });
   }

package/src/components/layout.tsx

@@ -39,24 +39,50 @@ export function Screen({
   );
 }
 
+/**
+ * What a host that draws its own window chrome needs from the top bar: room at
+ * the leading edge for the platform's window controls (the macOS traffic
+ * lights, when the app hides the title bar), and the bar marked as the place
+ * the window is dragged by. The web and mobile apps have a browser or an OS
+ * doing this for them and pass nothing.
+ */
+export type WindowChrome = {
+  /** Width, in px, kept clear at the bar's leading edge. */
+  leadingInset?: number;
+  /**
+   * The bar's height, when it has to match the platform's title bar: the
+   * controls drawn over it are centred on that, not on the bar.
+   */
+  height?: number;
+};
+
 /** Horizontal top bar with left / center / right slots. */
 export function TopBar({
   left,
   center,
   right,
+  windowChrome,
 }: {
   left?: React.ReactNode;
   center?: React.ReactNode;
   right?: React.ReactNode;
+  windowChrome?: WindowChrome;
 }) {
   const t = useTheme();
   return (
     <View
+      // The bar is where a chromeless window is dragged from. The host reads
+      // this attribute (data-window-drag) on mousedown, and only over the bar
+      // itself: the controls on it stay controls.
+      // @ts-expect-error react-native-web accepts dataSet -> data-* attributes
+      dataSet={windowChrome ? { windowDrag: "true" } : undefined}
+      testID="top-bar"
       style={{
-        height: t.layout.topbar,
+        height: windowChrome?.height ?? t.layout.topbar,
         flexDirection: "row",
         alignItems: "center",
         paddingHorizontal: t.space(3),
+        paddingLeft: t.space(3) + (windowChrome?.leadingInset ?? 0),
         gap: t.space(3),
         borderBottomWidth: 1,
         // Hairline appropriate to the dark chrome in both modes.
@@ -176,6 +202,12 @@ export function Pane({
             gap: t.space(2),
             borderBottomWidth: 1,
             borderBottomColor: t.color.borderSubtle,
+            // Above the body, so a menu opened from the header (the master
+            // pane's title switcher) paints over the list beneath it rather
+            // than under it. Views stack in tree order otherwise, and the body
+            // comes second.
+            position: "relative",
+            zIndex: 10,
           }}
         >
           {header}