zidane-ui 9.0.4 → 9.1.3

package/src/chat/sidebar/SidebarHostProvider.tsx

@@ -1,51 +0,0 @@
-/**
- * Puts a `SidebarHost` in context for the sidebar's rows and every other
- * surface that offers a session's menu (the session header), with the way
- * the app tells the user a command's outcome (`notify`).
- */
-import { createContext, useContext, useMemo, type ReactNode } from 'react';
-
-import type { SidebarHost } from '../headless/sidebar/host';
-
-interface SidebarHostContextValue {
-  host: SidebarHost;
-  notify: (message: string) => void;
-}
-
-const browserAlert = (message: string): void => {
-  globalThis.alert?.(message);
-};
-
-const NO_HOST: SidebarHostContextValue = { host: {}, notify: browserAlert };
-
-const SidebarHostContext = createContext<SidebarHostContextValue>(NO_HOST);
-
-/** Props of {@link SidebarHostProvider}. */
-export interface SidebarHostProviderProps {
-  /** The platform's sidebar capabilities. */
-  host: SidebarHost;
-  /** Tells the user a command's outcome or failure. Default: the browser's `alert`. */
-  notify?: (message: string) => void;
-  /** The app's components. */
-  children: ReactNode;
-}
-
-/**
- * Provides a {@link SidebarHost} to the sidebar and the session menus below.
- *
- * @param props - The `host`, an optional `notify` and the `children`.
- */
-export function SidebarHostProvider({ host, notify = browserAlert, children }: SidebarHostProviderProps) {
-  const value = useMemo(() => ({ host, notify }), [host, notify]);
-  return <SidebarHostContext.Provider value={value}>{children}</SidebarHostContext.Provider>;
-}
-
-/** The nearest {@link SidebarHost}; an empty host (every capability left out) outside a provider. */
-export function useSidebarHost(): SidebarHost {
-  return useContext(SidebarHostContext).host;
-}
-
-/** How the nearest {@link SidebarHostProvider} tells the user something. */
-export function useSidebarNotice(): (message: string) => void {
-  return useContext(SidebarHostContext).notify;
-}

package/src/chat/sidebar/SidebarSearchRow.tsx

@@ -1,66 +0,0 @@
-/**
- * Search pinned above the session list: a well on the same column grid as
- * the rows (the magnifier sits in the 18px icon column, so the placeholder
- * starts where every title starts). Typing filters titles instantly and
- * kicks off the debounced content scan in the parent. Escape clears and
- * blurs, handing the arrows back to session navigation. The filter menu
- * sits beside the well, not in it, so opening it doesn't light the well's
- * focus edge.
- */
-import type { CSSProperties, ReactNode } from 'react';
-
-import { IconButton } from '../../components/IconButton';
-import { useSidebarLabels } from './useSidebarLabels';
-
-/** Props of {@link SidebarSearchRow}. */
-export interface SidebarSearchRowProps {
-  /** The query typed so far. */
-  value: string;
-  /** The query changed (cleared with Escape or the clear button). */
-  onChange: (next: string) => void;
-  /** Beside the well: the filter menu. */
-  filter?: ReactNode;
-  /** Extra classes on the row. */
-  className?: string;
-  /** Inline styles on the row. */
-  style?: CSSProperties;
-}
-
-/**
- * The search well above the session list, with the filter menu beside it.
- *
- * @param props - The {@link SidebarSearchRowProps}.
- */
-export function SidebarSearchRow({ value, onChange, filter, className, style }: SidebarSearchRowProps) {
-  const labels = useSidebarLabels();
-  return (
-    <div className={['flex items-center gap-1', className].filter(Boolean).join(' ')} style={style}>
-      {/* pl-[3px] + the 1px well border puts the 18px glyph slot at x=12, the rows' column. */}
-      <div className="zg-well group flex-1 min-w-0 flex items-center gap-1.5 h-7 pl-[3px] pr-1">
-        <span aria-hidden className="inline-flex items-center justify-center w-[18px] shrink-0">
-          <span className="i-ph-magnifying-glass text-sm text-[var(--zg-text-muted)] group-focus-within:text-[var(--zg-text)]" />
-        </span>
-        <input
-          type="text"
-          value={value}
-          onChange={(e) => onChange(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === 'Escape') {
-              e.preventDefault();
-              onChange('');
-              e.currentTarget.blur();
-            }
-          }}
-          placeholder={labels.searchSessions}
-          aria-label={labels.searchSessionsLabel}
-          spellCheck={false}
-          className="flex-1 min-w-0 bg-transparent border-0 outline-none p-0 text-sm text-[var(--zg-text)] placeholder:text-[var(--zg-text-muted)]"
-        />
-        {value.length > 0 && (
-          <IconButton icon="i-ph-x" label={labels.clearSearch} size="xs" onClick={() => onChange('')} />
-        )}
-      </div>
-      {filter}
-    </div>
-  );
-}

package/src/chat/sidebar/SidebarSessionRow.tsx

@@ -1,293 +0,0 @@
-/**
- * One chat in the sidebar list: status dot, editable title (badges where it
- * names something), what its run is doing or how long ago it was active,
- * its host, project, environment and artifacts on a second line, and the
- * actions menu (3-dots or right-click; the rows are `sessionMenuItems`).
- *
- * The row itself is `SessionListRow`; the live parts come from the app's
- * {@link SidebarLive} (`createSidebarLive`), the platform menu rows from the
- * `SidebarHost` in context.
- */
-import { Fragment, memo, useCallback, useMemo, useState, type CSSProperties } from 'react';
-import type { SessionEnvironmentSummary } from 'zidane/chat';
-import { highlightSegments, searchHighlightRanges, type Space } from 'zidane/chat/pure';
-
-import { SessionListRow } from '../SessionListRow';
-import { ReferenceText } from '../transcript/ReferenceText';
-import { useReferenceMatches } from '../transcript/references';
-import type { RowProject } from './RowChips';
-import { sessionMenuItems, useEnvironmentActions } from './session-menu';
-import type { SidebarLive } from './sidebar-live';
-import { useSidebarHost } from './SidebarHostProvider';
-import { useSidebarLabels } from './useSidebarLabels';
-
-/**
- * Excerpt line with the query occurrences as accent `<mark>` spans. Ranges come from the TUI's highlighter
- * (`searchHighlightRanges`) so emphasis matches it exactly.
- */
-const ExcerptHighlight = memo(({ text, query }: { text: string; query: string }) => {
-  const segments = useMemo(() => highlightSegments(text, searchHighlightRanges(text, query)), [text, query]);
-  return (
-    <>
-      {segments.map((segment, i) =>
-        segment.highlighted ? (
-          <mark key={i} className="bg-transparent text-[var(--zg-accent)] font-medium">
-            {segment.text}
-          </mark>
-        ) : (
-          <Fragment key={i}>{segment.text}</Fragment>
-        ),
-      )}
-    </>
-  );
-});
-
-ExcerptHighlight.displayName = 'ExcerptHighlight';
-
-/** What a row does; one stable bag for every row of a list, so the rows' memo holds. */
-export interface SidebarRowHandlers {
-  /** Opens the session. */
-  onSelect: (sessionId: string) => void;
-  /** The rename field's text changed. */
-  onRenameValueChange: (value: string) => void;
-  /** Confirms the rename. */
-  onRenameCommit: () => void | Promise<void>;
-  /** Abandons the rename. */
-  onRenameCancel: () => void;
-  /** Starts renaming the session. */
-  onStartRename: (sessionId: string, currentTitle: string) => void;
-  /** Deletes the session (after a confirmation). */
-  onDelete: (sessionId: string, title: string, environment?: SessionEnvironmentSummary) => void;
-  /** Archives or restores it. */
-  onSetArchived: (sessionId: string, archived: boolean) => void;
-  /** Stars or unstars it. */
-  onSetFavorite: (sessionId: string, favorite: boolean) => void;
-  /** Sets its failed environment up again. */
-  onRetryEnvironment: (sessionId: string) => void;
-  /** Runs one of its environment's commands. */
-  onRunEnvironmentAction: (sessionId: string, actionId: string, label: string) => void;
-  /** Moves it to a space. */
-  onMoveToSpace: (sessionId: string, spaceId: string) => void;
-  /** Moves it to another environment of its host ("Move to…"). Absent: no row. */
-  onMoveSession?: (sessionId: string) => void;
-  /** Its menu opened. */
-  onOpenMenu: (sessionId: string) => void;
-  /** Its menu closed. */
-  onCloseMenu: (sessionId: string) => void;
-}
-
-/** Props of {@link SidebarSessionRow}. */
-export interface SidebarSessionRowProps extends SidebarRowHandlers {
-  /** The session's key. */
-  sessionId: string;
-  /** Its title. */
-  title: string;
-  /** The session's folder (`''`: none): which extensions' references its title shows. */
-  cwd?: string;
-  /** A remote host's id: no Finder for its folder. */
-  hostId?: string;
-  /** Show the host chip on the badge line (off under a header that already names the host). */
-  hostBadge?: boolean;
-  /** The space it is in. */
-  spaceId?: string;
-  /** The orchestration Main: in every space, never moved. */
-  isMain?: boolean;
-  /** The open session. */
-  isActive: boolean;
-  /** Its title is being edited. */
-  isRenaming: boolean;
-  /** Archived. */
-  archived: boolean;
-  /** Starred. */
-  favorite?: boolean;
-  /** The rename field's text. */
-  renameValue: string;
-  /** Its menu is the open one. */
-  menuOpen: boolean;
-  /** A content-search excerpt under the title, with the query highlighted. Regular rows keep their 28px. */
-  excerpt?: string;
-  /** The query the excerpt highlights. */
-  excerptQuery?: string;
-  /** In the favorites section: the project, first on the badge line (keep its identity stable for the memo). */
-  project?: RowProject;
-  /** Last activity (ms): the trailing relative time. Absent for search results. */
-  updatedAt?: number;
-  /** Non-local execution environment: badge, plus a retry action once it failed. */
-  environment?: SessionEnvironmentSummary;
-  /** Run details in the trailing slot; off: "Working". */
-  runDetails: boolean;
-  /** Artifacts on a second line (run details and artifacts both on). */
-  artifactBadges: boolean;
-  /** The spaces to move it between while Spaces is on; `null` off. */
-  spaces: readonly Space[] | null;
-  /** The app's live row parts (`createSidebarLive`, built once). */
-  live: SidebarLive;
-  /** Extra classes on the row. */
-  className?: string;
-  /** Inline styles on the row. */
-  style?: CSSProperties;
-}
-
-/** Renders one session of the sidebar list. Memoized: keep every prop stable. */
-export const SidebarSessionRow = memo(
-  ({
-    sessionId,
-    title,
-    cwd,
-    hostId,
-    hostBadge = true,
-    spaceId,
-    isMain,
-    isActive,
-    isRenaming,
-    archived,
-    favorite = false,
-    renameValue,
-    menuOpen,
-    onSelect,
-    onRenameValueChange,
-    onRenameCommit,
-    onRenameCancel,
-    onStartRename,
-    onDelete,
-    onSetArchived,
-    onSetFavorite,
-    onRetryEnvironment,
-    onRunEnvironmentAction,
-    onMoveToSpace,
-    onMoveSession,
-    onOpenMenu,
-    onCloseMenu,
-    excerpt,
-    excerptQuery,
-    project,
-    updatedAt,
-    environment,
-    runDetails,
-    artifactBadges,
-    spaces,
-    live,
-    className,
-    style,
-  }: SidebarSessionRowProps) => {
-    const { SessionStatusDot, RowMeta, RowArtifacts } = live;
-    const host = useSidebarHost();
-    const labels = useSidebarLabels();
-    /** A new commit or pull request just arrived: the row sweeps once. */
-    const [arrived, setArrived] = useState(false);
-
-    const environmentActions = useEnvironmentActions(sessionId, menuOpen && environment?.state === 'ready');
-
-    const menuItems = useMemo(
-      () =>
-        sessionMenuItems(
-          {
-            id: sessionId,
-            title,
-            cwd: cwd ?? '',
-            archived,
-            favorite,
-            ...(hostId ? { hostId } : {}),
-            ...(spaceId ? { spaceId } : {}),
-            ...(isMain ? { isMain } : {}),
-            ...(environment ? { environment } : {}),
-          },
-          { spaces, environmentActions, host },
-          {
-            rename: () => onStartRename(sessionId, title),
-            setFavorite: (next) => onSetFavorite(sessionId, next),
-            setArchived: (next) => onSetArchived(sessionId, next),
-            remove: () => onDelete(sessionId, title, environment),
-            retryEnvironment: () => onRetryEnvironment(sessionId),
-            runEnvironmentAction: (actionId, label) => onRunEnvironmentAction(sessionId, actionId, label),
-            moveToSpace: (space) => onMoveToSpace(sessionId, space),
-            ...(onMoveSession ? { moveSession: () => onMoveSession(sessionId) } : {}),
-          },
-          labels,
-        ),
-      [
-        sessionId,
-        title,
-        cwd,
-        hostId,
-        spaceId,
-        isMain,
-        archived,
-        favorite,
-        environment,
-        spaces,
-        environmentActions,
-        host,
-        labels,
-        onStartRename,
-        onDelete,
-        onSetArchived,
-        onSetFavorite,
-        onRetryEnvironment,
-        onRunEnvironmentAction,
-        onMoveToSpace,
-        onMoveSession,
-      ],
-    );
-
-    const handleSelect = useCallback(() => onSelect(sessionId), [sessionId, onSelect]);
-    const handleOpenMenu = useCallback(() => onOpenMenu(sessionId), [sessionId, onOpenMenu]);
-    const handleCloseMenu = useCallback(() => onCloseMenu(sessionId), [sessionId, onCloseMenu]);
-    const onStartRenameRow = useCallback(() => onStartRename(sessionId, title), [sessionId, title, onStartRename]);
-    // Badges only when the title names something; a plain title stays text, so a new one writes in word by word.
-    const hasReferences = useReferenceMatches(title, cwd ?? '', 'title').length > 0;
-
-    return (
-      <SessionListRow
-        id={sessionId}
-        title={title}
-        active={isActive}
-        archived={archived}
-        status={archived ? undefined : <SessionStatusDot sessionId={sessionId} />}
-        titleDisplay={
-          hasReferences ? <ReferenceText text={title} cwd={cwd ?? ''} surface="title" links={false} /> : undefined
-        }
-        meta={
-          typeof updatedAt === 'number' ? (
-            <RowMeta sessionId={sessionId} updatedAt={updatedAt} details={runDetails} />
-          ) : undefined
-        }
-        sub={
-          excerpt ? (
-            <ExcerptHighlight text={excerpt} query={excerptQuery ?? ''} />
-          ) : isRenaming ? undefined : (
-            <RowArtifacts
-              sessionId={sessionId}
-              enabled={artifactBadges}
-              onArrival={setArrived}
-              onSelect={onSelect}
-              {...(cwd !== undefined ? { cwd } : {})}
-              {...(hostId && hostBadge ? { hostId } : {})}
-              {...(project ? { project } : {})}
-              {...(environment ? { environment } : {})}
-            />
-          )
-        }
-        subClassName={
-          excerpt ? 'text-xs leading-4 pt-0.5 whitespace-nowrap overflow-hidden text-[var(--zg-text-muted)]' : undefined
-        }
-        onSelect={handleSelect}
-        renaming={isRenaming}
-        renameValue={renameValue}
-        onStartRename={onStartRenameRow}
-        onRenameChange={onRenameValueChange}
-        onRenameCommit={onRenameCommit}
-        onRenameCancel={onRenameCancel}
-        menuItems={menuItems}
-        menuOpen={menuOpen}
-        onOpenMenu={handleOpenMenu}
-        onCloseMenu={handleCloseMenu}
-        arrived={arrived}
-        {...(className ? { className } : {})}
-        {...(style ? { style } : {})}
-      />
-    );
-  },
-);
-
-SidebarSessionRow.displayName = 'SidebarSessionRow';

package/src/chat/sidebar/SidebarToggleButton.tsx

@@ -1,48 +0,0 @@
-/**
- * The one sidebar toggle, for both states. An app renders it fixed next to
- * the window's native controls so it never moves or re-mounts while the
- * aside animates. Its name follows a budget-forced collapse too, so it never
- * lies about the state.
- */
-import type { CSSProperties } from 'react';
-
-import { IconButton } from '../../components/IconButton';
-import { useLayoutBudgetOptional } from '../../workspace/LayoutBudget';
-import { useSidebarLabels } from './useSidebarLabels';
-
-/** Props of {@link SidebarToggleButton}. */
-export interface SidebarToggleButtonProps {
-  /** The user collapsed the sidebar: the name says Expand. */
-  collapsed: boolean;
-  /** Toggles it. */
-  onClick: () => void;
-  /** Positioning and drag-region classes. */
-  className?: string;
-  /** Inline positioning. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders the sidebar toggle.
- *
- * @param props - The state, the toggle, `className` and `style`.
- */
-export function SidebarToggleButton({
-  collapsed: collapsedProp,
-  onClick,
-  className = '',
-  style,
-}: SidebarToggleButtonProps) {
-  const labels = useSidebarLabels();
-  const budget = useLayoutBudgetOptional();
-  const collapsed = collapsedProp || (budget?.sidebarForcedCollapsed ?? false);
-  return (
-    <IconButton
-      icon="i-ph-sidebar"
-      label={collapsed ? labels.expandSidebar : labels.collapseSidebar}
-      onClick={onClick}
-      style={style}
-      className={`zg-hit-extend ${className}`}
-    />
-  );
-}

package/src/chat/sidebar/SpaceSwitcher.tsx

@@ -1,232 +0,0 @@
-/**
- * Spaces switcher — one icon per space, centered in the sidebar's footer
- * strip (Arc style). Clicking an icon shows that space's conversations; the
- * list slides in from the side of the space it came from (`spaceSlide` in
- * `SessionsContext`).
- *
- * Rendered only while Spaces is on (`settings.spaces`, opt-in). Each icon has
- * a tooltip: the space's name, and the shortcut that reaches it for the
- * spaces next to the shown one (`tabNext` / `tabPrev`, ⌥⌘→ / ⌥⌘← by default;
- * they wrap, so the first and last spaces are neighbours).
- * Roving focus: ←/→ (and Home/End) move between icons, Enter/Space selects.
- *
- * The raised chip under the shown space is ONE element in the toolbar, below
- * every icon, springing to the shown icon's offset: a chip inside the active
- * button (a `layoutId` handoff) painted over the icons it crossed, and they
- * blinked out as it slid past.
- */
-import { useEffect, useLayoutEffect, useRef, useState, type CSSProperties } from 'react';
-import { motion } from 'motion/react';
-
-import type { Space, SpaceIcon } from 'zidane/chat/pure';
-
-import { Tooltip } from '../../components/Tooltip';
-import { useMotionTransition } from '../../motion/springs';
-import { KeyHint } from '../../keybindings/KeyHint';
-import { useMergedKeybindings } from '../../keybindings/KeybindingsProvider';
-import { useSidebarLabels } from './useSidebarLabels';
-
-/** Props of {@link SpaceGlyph}. */
-export interface SpaceGlyphProps {
-  /** The space whose icon (or first letter) shows. */
-  space: Pick<Space, 'name' | 'icon'>;
-  /** Side of the square in px. Defaults to 18. */
-  size?: number;
-}
-
-/**
- * A space's glyph: its emoji or image, else the first letter of its name.
- *
- * @param props - The {@link SpaceGlyphProps}.
- */
-export function SpaceGlyph({ space, size = 18 }: SpaceGlyphProps) {
-  return <IconGlyph icon={space.icon} fallback={space.name} size={size} />;
-}
-
-function IconGlyph({ icon, fallback, size }: { icon?: SpaceIcon; fallback: string; size: number }) {
-  const box = { width: size, height: size };
-
-  if (icon?.kind === 'image') {
-    return (
-      <img src={icon.value} alt="" draggable={false} style={box} className="object-cover rounded-zg-sm shrink-0" />
-    );
-  }
-
-  return (
-    <span
-      aria-hidden
-      style={box}
-      className={
-        icon?.kind === 'emoji'
-          ? 'inline-flex items-center justify-center shrink-0 text-zg-ui leading-none'
-          : 'inline-flex items-center justify-center shrink-0 rounded-zg-sm text-zg-badge font-semibold uppercase bg-[var(--zg-row-hover)] text-[var(--zg-text-muted)]'
-      }
-    >
-      {icon?.kind === 'emoji' ? icon.value : (Array.from(fallback.trim())[0] ?? '?')}
-    </span>
-  );
-}
-
-/**
- * `node`'s left offset inside `row`, summed up the offset parents: each button
- * sits in its tooltip's trigger wrapper. Offsets, not rects, so the pressed
- * icon's tap scale doesn't shift where the chip lands.
- */
-function offsetIn(row: HTMLElement | null, node: HTMLElement | null): number | null {
-  if (!row || !node) return null;
-  let x = 0;
-  for (let el: HTMLElement | null = node; el && el !== row; el = el.offsetParent as HTMLElement | null) {
-    if (!row.contains(el)) return null;
-    x += el.offsetLeft;
-  }
-  return x;
-}
-
-/** Props of {@link SpaceSwitcher}. */
-export interface SpaceSwitcherProps {
-  /** The spaces in switcher order. */
-  spaces: readonly Space[];
-  /** The space shown. */
-  activeId: string;
-  /** Show another space. */
-  onSelect: (spaceId: string) => void;
-  /** Extra classes on the toolbar. */
-  className?: string;
-  /** Inline styles on the toolbar. */
-  style?: CSSProperties;
-}
-
-/**
- * The row of space icons: one raised chip slides to the shown space; arrows, Home and End move between them.
- *
- * @param props - The {@link SpaceSwitcherProps}.
- */
-export function SpaceSwitcher({ spaces, activeId, onSelect, className, style }: SpaceSwitcherProps) {
-  const labels = useSidebarLabels();
-  const toolbar = useRef<HTMLDivElement>(null);
-  const buttons = useRef<(HTMLButtonElement | null)[]>([]);
-  const activeIndex = spaces.findIndex((s) => s.id === activeId);
-  // The Keybindings panel's overrides apply on the next paint.
-  const bindings = useMergedKeybindings();
-  const snap = useMotionTransition('snap');
-  const pop = useMotionTransition('pop');
-  /*
-   * Each icon's offset in the toolbar, measured when the icons change, never on a switch: reading
-   * layout in the switch's commit forced a reflow while the new conversation was still mounting.
-   * `null` until measured. The chip mounts in place (`initial={false}`), then springs.
-   */
-  const [offsets, setOffsets] = useState<readonly (number | null)[] | null>(null);
-  const iconsKey = spaces.map((s) => s.id).join('\u0000');
-  useLayoutEffect(() => {
-    setOffsets(buttons.current.slice(0, spaces.length).map((node) => offsetIn(toolbar.current, node)));
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- the icons, by id: a new array of the same spaces measures nothing
-  }, [iconsKey]);
-  const chipX = offsets?.[activeIndex] ?? null;
-
-  /*
-   * The roving tab stop and focus on an icon follow the shown space (a click, ⌥⌘←/→), so the keys
-   * chain from where it lands. Both after the switch has painted: changing the focused icon's
-   * `tabindex` or calling `focus()` makes the browser restyle (and lay out) at once, which in the
-   * switch's commit cost the whole new conversation's style a second time.
-   */
-  const [tabStop, setTabStop] = useState(activeIndex);
-  useEffect(() => {
-    let timer = 0;
-    const frame = requestAnimationFrame(() => {
-      timer = window.setTimeout(() => {
-        setTabStop(activeIndex);
-        const target = buttons.current[activeIndex];
-        if (target && target !== document.activeElement && toolbar.current?.contains(document.activeElement)) {
-          target.focus({ preventScroll: true });
-        }
-      }, 0);
-    });
-    return () => {
-      cancelAnimationFrame(frame);
-      clearTimeout(timer);
-    };
-  }, [activeIndex]);
-
-  const focusAt = (index: number) => {
-    const count = spaces.length;
-    const next = ((index % count) + count) % count;
-    buttons.current[next]?.focus();
-  };
-
-  return (
-    <div
-      ref={toolbar}
-      role="toolbar"
-      aria-label={labels.spaces}
-      data-testid="space-switcher"
-      className={['relative isolate flex items-center gap-0.5 min-w-0', className].filter(Boolean).join(' ')}
-      style={style}
-    >
-      {chipX !== null && (
-        <motion.span
-          aria-hidden
-          data-testid="space-chip"
-          className="absolute left-0 top-0 w-7 h-7 z-[-1] pointer-events-none rounded-zg-md bg-[var(--zg-raised)] [box-shadow:var(--zg-shadow-raised)]"
-          initial={false}
-          animate={{ x: chipX }}
-          transition={snap}
-        />
-      )}
-      {spaces.map((space, index) => {
-        const active = space.id === activeId;
-        // The shortcut that reaches this space from the shown one: its neighbours, wrapping at the ends.
-        const count = spaces.length;
-        const chord =
-          count < 2 || index === activeIndex
-            ? null
-            : index === (activeIndex + 1) % count
-              ? bindings.tabNext
-              : index === (activeIndex - 1 + count) % count
-                ? bindings.tabPrev
-                : null;
-
-        return (
-          <Tooltip
-            key={space.id}
-            portal
-            side="top"
-            label={
-              <span className="inline-flex items-center gap-2" data-testid={`space-tooltip-${space.id}`}>
-                {space.name}
-                {chord && <KeyHint spec={chord} size="sm" />}
-              </span>
-            }
-          >
-            <motion.button
-              whileTap={{ scale: 0.88 }}
-              transition={pop}
-              ref={(node) => {
-                buttons.current[index] = node;
-              }}
-              type="button"
-              aria-label={labels.spaceNamed(space.name)}
-              aria-pressed={active}
-              tabIndex={index === tabStop ? 0 : -1}
-              data-active={active ? 'true' : undefined}
-              onClick={() => onSelect(space.id)}
-              onKeyDown={(event) => {
-                // ⌥⌘←/→ belong to the space keys (focus follows the shown icon), not the roving focus.
-                if (event.metaKey || event.altKey || event.ctrlKey) return;
-                if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
-                  event.preventDefault();
-                  focusAt(index + (event.key === 'ArrowRight' ? 1 : -1));
-                } else if (event.key === 'Home' || event.key === 'End') {
-                  event.preventDefault();
-                  focusAt(event.key === 'Home' ? 0 : spaces.length - 1);
-                }
-              }}
-              className="relative inline-flex items-center justify-center w-7 h-7 shrink-0 p-0 rounded-zg-md border-0 bg-transparent cursor-pointer opacity-60 hover:opacity-100 hover:bg-[var(--zg-row-hover)] data-[active=true]:opacity-100 data-[active=true]:hover:bg-transparent transition-[background-color,opacity] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--zg-ring)]"
-            >
-              <SpaceGlyph space={space} />
-            </motion.button>
-          </Tooltip>
-        );
-      })}
-    </div>
-  );
-}