cursedbelt 5.78.0 → 5.79.0

package/src/react/components/ChipFilterStrip.tsx

@@ -1,6 +1,5 @@
-import type { ReactNode } from 'react';
-import { cn, RAW_BUTTON } from '../lib/cn.js';
-import { PRESS } from '../lib/press.js';
+import { cn } from '../lib/cn.js';
+import { Chip } from './filterChip.js';
 import { ScrollArea } from './ScrollArea.js';
 
 export interface ChipOption {
@@ -104,38 +103,3 @@ export function ChipFilterStrip({
     </fieldset>
   );
 }
-
-interface ChipProps {
-  active: boolean;
-  onClick: () => void;
-  children: ReactNode;
-}
-
-function Chip({ active, onClick, children }: ChipProps) {
-  return (
-    <button
-      // guardrails-ignore no-raw-action-button: presentational filter-chip toggle —
-      // reflects local filter state (aria-pressed), no destructive/mutating intent.
-      type='button'
-      onClick={onClick}
-      aria-pressed={active}
-      className={cn(
-        RAW_BUTTON,
-        // 44 px min tap target height via py + min-h (STANDARDS §4a). px-4 keeps every
-        // pill's internal padding identical regardless of label length.
-        'inline-flex min-h-11 shrink-0 cursor-pointer items-center rounded-full px-4 text-sm font-medium',
-        PRESS,
-        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-        // Soft active state — an accent tint + accent text (the standardized active
-        // treatment shared with nav items and the `accent` Badge tone), not a stark
-        // solid accent block. `text-accent-strong` (not plain `text-accent`) — the
-        // /15 tint only clears 4.43:1 with the base accent hue, under AA (cbux-101).
-        active
-          ? 'bg-accent/15 text-accent-strong ring-1 ring-inset ring-accent/30'
-          : 'bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground',
-      )}
-    >
-      {children}
-    </button>
-  );
-}

package/src/react/components/KanbanBoard.spec.tsx

@@ -0,0 +1,89 @@
+import { afterEach, describe, expect, it } from 'bun:test';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { KanbanBoard } from './KanbanBoard.js';
+
+afterEach(() => cleanup());
+
+interface Card {
+  id: string;
+  title: string;
+}
+const COLUMNS = [
+  { id: 'todo', title: 'To do', items: [{ id: 'a', title: 'Spec the API' }, { id: 'b', title: 'Pick colors' }] },
+  { id: 'done', title: 'Done', items: [] as Card[] },
+];
+
+function board(over: Partial<Parameters<typeof KanbanBoard<Card>>[0]> = {}) {
+  const opened: string[] = [];
+  const added: string[] = [];
+  render(
+    <KanbanBoard<Card>
+      aria-label='Work'
+      columns={COLUMNS}
+      getKey={(c) => c.id}
+      cardLabel={(c) => c.title}
+      renderCard={(c) => <span>{c.title}</span>}
+      onOpen={(c) => opened.push(c.id)}
+      onAdd={(id) => added.push(id)}
+      addLabel='Add task'
+      {...over}
+    />,
+  );
+  return { opened, added };
+}
+
+describe('KanbanBoard', () => {
+  it('draws each column with its name and count, and says so for an empty one', () => {
+    board();
+    expect(screen.getByRole('region', { name: 'To do, 2 cards' })).toBeTruthy();
+    expect(screen.getByRole('region', { name: 'Done, 0 cards' })).toBeTruthy();
+    expect(screen.getByText('Nothing here yet')).toBeTruthy();
+  });
+
+  it('a card is the tap target: click and Enter open it', () => {
+    const { opened } = board();
+    fireEvent.click(screen.getByRole('button', { name: 'Spec the API' }));
+    fireEvent.keyDown(screen.getByRole('button', { name: 'Pick colors' }), { key: 'Enter' });
+    expect(opened).toEqual(['a', 'b']);
+  });
+
+  it("the column's + starts a card IN that column, and names the column", () => {
+    const { added } = board();
+    fireEvent.click(screen.getByRole('button', { name: 'Add task to Done' }));
+    expect(added).toEqual(['done']);
+  });
+
+  it('marks the open card, and offers New column only when asked', () => {
+    board({ selectedKey: 'b' });
+    expect(document.querySelector('[data-cb-kanban-card="b"]')?.getAttribute('data-selected')).toBe('true');
+    expect(document.querySelector('[data-cb-kanban-card="a"]')?.hasAttribute('data-selected')).toBe(false);
+    expect(screen.queryByRole('button', { name: /New column/ })).toBeNull();
+    cleanup();
+    let made = 0;
+    board({ onNewColumn: () => made++ });
+    fireEvent.click(screen.getByRole('button', { name: /New column/ }));
+    expect(made).toBe(1);
+  });
+
+  it("a phone's tray names every column with its count; a pill glides to its column and lights", () => {
+    const glided: Element[] = [];
+    const original = Element.prototype.scrollIntoView;
+    Element.prototype.scrollIntoView = function (this: Element) {
+      glided.push(this);
+    };
+    try {
+      board();
+      const tray = screen.getByRole('navigation', { name: 'Work: columns' });
+      const done = Array.from(tray.querySelectorAll('button')).find((b) => b.textContent === 'Done0');
+      expect(Array.from(tray.querySelectorAll('button')).map((b) => [b.textContent, b.getAttribute('aria-pressed')])).toEqual([
+        ['To do2', 'true'],
+        ['Done0', 'false'],
+      ]);
+      fireEvent.click(done as HTMLButtonElement);
+      expect(glided.map((el) => el.getAttribute('data-cb-kanban-column'))).toEqual(['done']);
+      expect(done?.getAttribute('aria-pressed')).toBe('true');
+    } finally {
+      Element.prototype.scrollIntoView = original;
+    }
+  });
+});

package/src/react/components/KanbanBoard.tsx

@@ -0,0 +1,270 @@
+import { Plus } from 'lucide-react';
+import { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { registerAutoScroll } from '../hooks/pragmaticDnd.js';
+import { useCrossContainerDrag } from '../hooks/useCrossContainerDrag.js';
+import { cn } from '../lib/cn.js';
+import { Badge } from './Badge.js';
+import { Button } from './Button.js';
+import { CardTapTarget } from './CardTapTarget.js';
+import { Chip } from './filterChip.js';
+import { IconButton } from './IconButton.js';
+import { ScrollArea } from './ScrollArea.js';
+
+/** One column of a {@link KanbanBoard}: what it is called, and the cards in it, in order. */
+export interface KanbanColumn<T> {
+  id: string;
+  title: string;
+  items: readonly T[];
+  /** A glyph before the title. */
+  icon?: ReactNode;
+}
+
+export interface KanbanBoardProps<T> {
+  columns: readonly KanbanColumn<T>[];
+  /** A stable key per card, unique across every column. */
+  getKey: (item: T) => string;
+  /** What is ON the card — a glyph, a title, one detail line. The board draws the card around it. */
+  renderCard: (item: T) => ReactNode;
+  /** The card's accessible name, and the text of the ghost that follows a drag. */
+  cardLabel: (item: T) => string;
+  /** A card was clicked, tapped, or Enter'd. */
+  onOpen: (item: T) => void;
+  /** The card that is open — drawn as the active place (NAV-6). */
+  selectedKey?: string | null;
+  /**
+   * A card was dropped in ANOTHER column. Omit it and the board is read-only: nothing drags.
+   * Order within a column is the consumer's (the board never reorders), so a drop back into
+   * its own column is not a move.
+   */
+  onMove?: (itemKey: string, fromColumn: string, toColumn: string) => void;
+  /** The column's `+`: start a new card in it. */
+  onAdd?: (columnId: string) => void;
+  /** The `+`'s verb — "Add entry", "Add task". */
+  addLabel?: string;
+  /** A trailing "New column" button after the last column. */
+  onNewColumn?: () => void;
+  newColumnLabel?: string;
+  /** What an empty column says. */
+  emptyText?: string;
+  'aria-label': string;
+  className?: string;
+}
+
+/**
+ * Cards in columns, dragged between them — the board Linear and Trello settle on (forge task
+ * 3030, the vault's Kanban canvas). The columns scroll sideways as a strip and each column
+ * scrolls on its own; a card is the whole tap target (`CardTapTarget`) and drags through
+ * {@link useCrossContainerDrag} (pointer, touch, the edge indicator, auto-scroll).
+ *
+ * Under 768px a phone sees ONE column at a time: the strip snaps column by column, and the
+ * column titles become a pill tray above it — tap one to glide there, and the one in view is
+ * lit (forge task 3033, the redesign's "Pill Segmenter"). Under 1024px the strip snaps too.
+ *
+ * 🔴 Dragging is a PLUS. Every move a drag makes must also be reachable from the card's own
+ * detail (a folder or status picker): the hook's keyboard lift does not yet carry a card across
+ * columns, so the board never relies on it.
+ */
+export function KanbanBoard<T>({
+  columns,
+  getKey,
+  renderCard,
+  cardLabel,
+  onOpen,
+  selectedKey = null,
+  onMove,
+  onAdd,
+  addLabel = 'Add',
+  onNewColumn,
+  newColumnLabel = 'New column',
+  emptyText = 'Nothing here yet',
+  'aria-label': ariaLabel,
+  className,
+}: KanbanBoardProps<T>) {
+  const containers = useMemo(() => columns.map((c) => ({ id: c.id, items: [...c.items] })), [columns]);
+  const onDrop = useCallback(
+    (from: string, to: string, fromIndex: number) => {
+      if (from === to || !onMove) return;
+      const item = containers.find((c) => c.id === from)?.items[fromIndex];
+      if (item !== undefined) onMove(getKey(item), from, to);
+    },
+    [containers, getKey, onMove],
+  );
+  const { ContainerContext, Container, Item } = useCrossContainerDrag<T>({
+    containers,
+    getKey,
+    onMove: onDrop,
+    disabled: !onMove,
+    renderOverlay: (item) => (
+      <div className='max-w-64 truncate rounded-md bg-surface px-3 py-2 text-sm font-medium text-foreground shadow-2xl ring-1 ring-accent'>
+        {cardLabel(item)}
+      </div>
+    ),
+  });
+
+  // The phone's tray follows the column in view. Columns are the strip's full width there, so
+  // at most one is 60 % visible; wider, the tray is not drawn and this is unused.
+  const stripRef = useRef<HTMLDivElement | null>(null);
+  const columnEls = useRef(new Map<string, HTMLElement>());
+  const [inView, setInView] = useState<string | null>(null);
+  const columnIds = columns.map((c) => c.id).join('\n');
+  // biome-ignore lint/correctness/useExhaustiveDependencies: `columnIds` is the trigger — a column added or gone re-observes the set held in the ref.
+  useEffect(() => {
+    const root = stripRef.current;
+    if (!root || typeof IntersectionObserver === 'undefined') return;
+    const io = new IntersectionObserver(
+      (records) => {
+        for (const r of records) if (r.isIntersecting) setInView((r.target as HTMLElement).dataset.cbKanbanColumn ?? null);
+      },
+      { root, threshold: 0.6 },
+    );
+    for (const el of columnEls.current.values()) io.observe(el);
+    return () => io.disconnect();
+  }, [columnIds]);
+  // A card carried to the strip's edge scrolls the strip, for a mouse and a finger: the hook
+  // only registers each card's NEAREST scroller, which is its column.
+  useEffect(() => {
+    const strip = stripRef.current;
+    return strip && onMove ? registerAutoScroll(strip) : undefined;
+  }, [onMove]);
+  const current = columns.some((c) => c.id === inView) ? inView : (columns[0]?.id ?? null);
+  const showColumn = (id: string) => {
+    columnEls.current.get(id)?.scrollIntoView({ behavior: 'smooth', inline: 'start', block: 'nearest' });
+    setInView(id);
+  };
+
+  return (
+    <ContainerContext>
+      <div className={cn('flex min-h-0 min-w-0 flex-1 flex-col gap-2', className)} data-cb-kanban-frame>
+        <nav aria-label={`${ariaLabel}: columns`} data-cb-kanban-tray className='min-w-0 md:hidden'>
+          <ScrollArea
+            axis='x'
+            space='none'
+            safeArea={false}
+            className='flex items-center gap-1.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'
+          >
+            {columns.map((column) => (
+              <Chip key={column.id} active={column.id === current} onClick={() => showColumn(column.id)}>
+                {column.title}
+                <span className='ml-1 text-xs tabular-nums'>{column.items.length}</span>
+              </Chip>
+            ))}
+          </ScrollArea>
+        </nav>
+        <ScrollArea
+          axis='x'
+          fade
+          space='compact'
+          safeArea={false}
+          role='group'
+          aria-label={ariaLabel}
+          data-cb-kanban
+          scrollRef={stripRef}
+          className='min-h-0 flex-1 max-lg:snap-x max-lg:snap-mandatory'
+        >
+          <div className='flex h-full items-start gap-3'>
+            {columns.map((column) => (
+              <Container key={column.id} containerId={column.id}>
+                {({ setNodeRef, isOver, items }) => (
+                  <section
+                    ref={(node) => {
+                      setNodeRef(node);
+                      if (node) columnEls.current.set(column.id, node);
+                      else columnEls.current.delete(column.id);
+                    }}
+                    aria-label={`${column.title}, ${items.length} ${items.length === 1 ? 'card' : 'cards'}`}
+                    data-cb-kanban-column={column.id}
+                    className={cn(
+                      'flex max-h-full w-72 shrink-0 snap-start flex-col gap-2 rounded-lg bg-muted/40 p-2 transition-colors max-md:w-full',
+                      isOver && 'bg-muted ring-1 ring-inset ring-accent/50',
+                    )}
+                  >
+                    <header className='flex min-h-8 items-center gap-2 px-1'>
+                      {column.icon && (
+                        <span aria-hidden className='flex shrink-0 text-muted-foreground [&_svg]:size-4'>
+                          {column.icon}
+                        </span>
+                      )}
+                      <h3 className='m-0 min-w-0 truncate text-sm font-medium text-foreground'>{column.title}</h3>
+                      <Badge tone='neutral' className='tabular-nums'>
+                        {items.length}
+                      </Badge>
+                      {onAdd && (
+                        <IconButton
+                          size='sm'
+                          className='ml-auto'
+                          label={`${addLabel} to ${column.title}`}
+                          onClick={() => onAdd(column.id)}
+                        >
+                          <Plus />
+                        </IconButton>
+                      )}
+                    </header>
+                    {/* `overscroll-x-auto`: a y-scroller is a scroll container on BOTH axes, and the
+                      ScrollArea's `overscroll-contain` kept every sideways swipe and wheel that
+                      started on a card from reaching the strip (vault-stage at 390, 3033). */}
+                  <ScrollArea
+                    axis='y'
+                    space='compact'
+                    safeArea={false}
+                    fade
+                    className='flex flex-col gap-2 overscroll-x-auto'
+                  >
+                      {items.length === 0 ? (
+                        <p className='m-0 rounded-md border border-dashed border-border px-3 py-6 text-center text-caption text-muted-foreground'>
+                          {emptyText}
+                        </p>
+                      ) : (
+                        items.map((item) => {
+                          const key = getKey(item);
+                          const selected = key === selectedKey;
+                          return (
+                            <Item key={key} containerId={column.id} itemKey={key}>
+                              {({ setNodeRef: cardRef, isDragging }) => (
+                                <div
+                                  ref={cardRef}
+                                  data-cb-kanban-card={key}
+                                  data-selected={selected || undefined}
+                                  className={cn('relative isolate', isDragging && 'opacity-40')}
+                                >
+                                  <CardTapTarget
+                                    aria-label={cardLabel(item)}
+                                    onClick={() => onOpen(item)}
+                                    className={cn(
+                                      // A border, not a ring: the column scrolls, and a scroller clips the
+                                      // ring a card draws OUTSIDE itself (seen on vault-stage, 2026-10-13).
+                                      'flex w-full flex-col gap-1 rounded-md border border-border bg-surface px-3 py-2 text-sm transition-colors hover:border-border-strong focus-visible:border-accent focus-visible:outline-none',
+                                      onMove && 'cursor-grab active:cursor-grabbing',
+                                      selected && 'border-accent/70',
+                                    )}
+                                  >
+                                    {renderCard(item)}
+                                  </CardTapTarget>
+                                </div>
+                              )}
+                            </Item>
+                          );
+                        })
+                      )}
+                    </ScrollArea>
+                  </section>
+                )}
+              </Container>
+            ))}
+            {onNewColumn && (
+              <Button
+                variant='ghost'
+                size='sm'
+                className='shrink-0'
+                leftIcon={<Plus />}
+                tooltip={`${newColumnLabel} — a new column at the end`}
+                onClick={onNewColumn}
+              >
+                {newColumnLabel}
+              </Button>
+            )}
+          </div>
+        </ScrollArea>
+      </div>
+    </ContainerContext>
+  );
+}

package/src/react/components/ResponsiveWorkbench.spec.tsx

@@ -1,5 +1,6 @@
 import { afterEach, describe, expect, test } from 'bun:test';
 import { cleanup, fireEvent, render } from '@testing-library/react';
+import { Button } from './Button.js';
 import { ResponsiveWorkbench } from './ResponsiveWorkbench.js';
 
 // useMediaQuery reads window.matchMedia; stub it so the breakpoint is deterministic
@@ -168,4 +169,60 @@ describe('ResponsiveWorkbench — below breakpoint (mobile)', () => {
     );
     expect(getByText('+ Add')).toBeTruthy();
   });
+
+  test('sheets: the rails rise as bottom sheets and the bar floats as a handle, not a row', () => {
+    stubMatchMedia(false);
+    const { container } = render(
+      <ResponsiveWorkbench
+        mobilePanels='sheets'
+        right={<div>Inspector</div>}
+        rightOpen
+        onRightOpenChange={() => {}}
+        mobileUtilityBar={<Button tooltip='What is selected'>Details</Button>}
+      >
+        <div>Canvas</div>
+      </ResponsiveWorkbench>,
+    );
+    const handle = container.querySelector('[data-cb-workbench-sheet-handle]');
+    expect(handle?.textContent).toContain('Details');
+    expect(container.querySelector('[data-cb-workbench-utility-bar]')).toBeNull();
+    // Floated: absolutely placed over the main area, so the main area keeps the whole height.
+    expect(handle?.parentElement?.className).toContain('absolute');
+    expect(dialogs()[0]?.className).toContain('bottom-0');
+  });
+
+  test('sheets: a swipe up on the handle opens the right rail, and does not also click the button under it', () => {
+    stubMatchMedia(false);
+    const opened: string[] = [];
+    const clicked: string[] = [];
+    const { container, getByText } = render(
+      <ResponsiveWorkbench
+        mobilePanels='sheets'
+        left={<div>Palette</div>}
+        right={<div>Inspector</div>}
+        leftOpen={false}
+        onLeftOpenChange={(v) => v && opened.push('left')}
+        rightOpen={false}
+        onRightOpenChange={(v) => v && opened.push('right')}
+        mobileUtilityBar={
+          <Button tooltip='Flows and the legend' onClick={() => clicked.push('explore')}>Explore</Button>
+        }
+      >
+        <div>Canvas</div>
+      </ResponsiveWorkbench>,
+    );
+    const handle = container.querySelector('[data-cb-workbench-sheet-handle]') as HTMLElement;
+    const button = getByText('Explore');
+    fireEvent.pointerDown(button, { pointerId: 1, clientY: 300 });
+    fireEvent.pointerUp(button, { pointerId: 1, clientY: 240 });
+    fireEvent.click(button);
+    expect(opened).toEqual(['right']);
+    expect(clicked).toEqual([]);
+    // A plain tap is still a tap.
+    fireEvent.pointerDown(button, { pointerId: 2, clientY: 300 });
+    fireEvent.pointerUp(button, { pointerId: 2, clientY: 298 });
+    fireEvent.click(button);
+    expect(clicked).toEqual(['explore']);
+    expect(handle).not.toBeNull();
+  });
 });

package/src/react/components/ResponsiveWorkbench.tsx

@@ -1,4 +1,4 @@
-import { type ReactNode, useState } from 'react';
+import { type ReactNode, useRef, useState } from 'react';
 import { useMediaQuery } from '../hooks/useMediaQuery.js';
 import { cn } from '../lib/cn.js';
 import { Drawer } from './Drawer.js';
@@ -71,9 +71,26 @@ export interface ResponsiveWorkbenchProps {
    */
   mobileUtilityBar?: ReactNode;
 
+  /**
+   * How the rails come in below the breakpoint.
+   *
+   * - `drawers` (default): each rail slides in from its own side, and `mobileUtilityBar` is a
+   *   row under the main area.
+   * - `sheets`: each rail rises as a bottom sheet, and `mobileUtilityBar` FLOATS over the bottom
+   *   of the main area as a handle (a grabber over the caller's buttons) instead of taking a row —
+   *   a canvas keeps the whole height, the way Apple Maps' and Figma's phone panels do. Swiping
+   *   the handle up opens `mobileSwipeOpens`.
+   */
+  mobilePanels?: 'drawers' | 'sheets';
+  /** The rail a swipe up on the `sheets` handle opens. Default `right` (or `left` when there is no right). */
+  mobileSwipeOpens?: 'left' | 'right';
+
   className?: string;
 }
 
+/** Travel, in px, that turns a press on the sheets handle into a swipe up. */
+const SWIPE_UP = 32;
+
 /**
  * The three-pane workbench (left rail / main / right rail) used by builder-style apps.
  * At/above `breakpoint` (default 1024, Tailwind `lg`) both rails render as persistent,
@@ -107,11 +124,20 @@ export function ResponsiveWorkbench({
   rightCollapsedRail,
   breakpoint = DEFAULT_BREAKPOINT,
   mobileUtilityBar,
+  mobilePanels = 'drawers',
+  mobileSwipeOpens,
   className,
 }: ResponsiveWorkbenchProps) {
   const isDesktop = useWorkbenchBreakpoint(breakpoint);
   const [leftOpen, setLeftOpen] = useOpenState(leftOpenProp, onLeftOpenChange, defaultLeftOpen);
   const [rightOpen, setRightOpen] = useOpenState(rightOpenProp, onRightOpenChange, defaultRightOpen);
+  const sheets = mobilePanels === 'sheets';
+
+  // The handle's swipe up. A swipe that starts on one of the caller's buttons must not ALSO click
+  // it (Explore opening on top of the sheet the swipe opened), so the click after a swipe is eaten.
+  const swipe = useRef<{ id: number; y: number } | null>(null);
+  const swiped = useRef(false);
+  const swipeTarget = mobileSwipeOpens ?? (right ? 'right' : 'left');
 
   return (
     // A workbench spans the screen by design — LAY-1's `full` row (canvas, studio, workbench),
@@ -135,7 +161,8 @@ export function ResponsiveWorkbench({
             <Drawer
               open={leftOpen}
               onClose={() => setLeftOpen(false)}
-              side='left'
+              side={sheets ? 'bottom' : 'left'}
+              size={sheets ? 'lg' : undefined}
               title={leftTitle}
               scrollBody={false}
             >
@@ -167,7 +194,8 @@ export function ResponsiveWorkbench({
             <Drawer
               open={rightOpen}
               onClose={() => setRightOpen(false)}
-              side='right'
+              side={sheets ? 'bottom' : 'right'}
+              size={sheets ? 'lg' : undefined}
               title={rightTitle}
               scrollBody={false}
             >
@@ -176,7 +204,44 @@ export function ResponsiveWorkbench({
           ))}
       </div>
 
-      {!isDesktop && mobileUtilityBar && (
+      {!isDesktop && mobileUtilityBar && sheets && (
+        // Floats over the main area: the canvas runs to the bottom edge under it.
+        <div className='pointer-events-none absolute inset-x-3 bottom-[max(env(safe-area-inset-bottom,0px),0.75rem)] flex justify-center'>
+          <div
+            data-cb-workbench-sheet-handle=''
+            className={cn(
+              'pointer-events-auto flex w-full max-w-md touch-none flex-col items-stretch gap-1.5',
+              'rounded-2xl border border-border/60 bg-background/85 px-2 pt-1.5 pb-2 shadow-raised backdrop-blur-md',
+            )}
+            onPointerDown={(e) => {
+              swipe.current = { id: e.pointerId, y: e.clientY };
+              swiped.current = false;
+            }}
+            onPointerUp={(e) => {
+              const start = swipe.current;
+              swipe.current = null;
+              if (!start || start.id !== e.pointerId || start.y - e.clientY < SWIPE_UP) return;
+              swiped.current = true;
+              if (swipeTarget === 'right') setRightOpen(true);
+              else setLeftOpen(true);
+            }}
+            onPointerCancel={() => {
+              swipe.current = null;
+            }}
+            onClickCapture={(e) => {
+              if (!swiped.current) return;
+              swiped.current = false;
+              e.preventDefault();
+              e.stopPropagation();
+            }}
+          >
+            <span aria-hidden className='mx-auto h-1 w-9 shrink-0 rounded-full bg-border' />
+            {mobileUtilityBar}
+          </div>
+        </div>
+      )}
+
+      {!isDesktop && mobileUtilityBar && !sheets && (
         <div
           data-cb-workbench-utility-bar=''
           className={cn(