@flamingo-stack/openframe-frontend-core 0.0.839 → 0.0.841

package/dist/{tickets-board-PLYD2NSY.cjs → tickets-board-44HO3LR4.cjs}

@@ -10,9 +10,9 @@ var _chunkFDZOE5TLcjs = require('./chunk-FDZOE5TL.cjs');
 
 
 
-var _chunkSWMUW3RRcjs = require('./chunk-SWMUW3RR.cjs');
-require('./chunk-APOMNC7H.cjs');
-require('./chunk-5L3UKDC6.cjs');
+var _chunk744JXTDPcjs = require('./chunk-744JXTDP.cjs');
+require('./chunk-IUDBG3HJ.cjs');
+require('./chunk-6LDL3UZE.cjs');
 require('./chunk-YJZ7R3W5.cjs');
 require('./chunk-46547WQW.cjs');
 require('./chunk-LNUFH4E2.cjs');
@@ -1806,7 +1806,7 @@ require('./chunk-XIBCMGBW.cjs');
 require('./chunk-BUEEQD3G.cjs');
 require('./chunk-WWUSFOJ7.cjs');
 require('./chunk-SKI6NKOE.cjs');
-require('./chunk-GRHF5SWL.cjs');
+require('./chunk-NFNSPLGC.cjs');
 require('./chunk-JBTH3O2C.cjs');
 require('./chunk-S5C3OZCO.cjs');
 require('./chunk-32ASZMTV.cjs');
@@ -1815,7 +1815,7 @@ require('./chunk-4IYNDV3G.cjs');
 require('./chunk-6VOOPMP5.cjs');
 require('./chunk-ORO54HDF.cjs');
 require('./chunk-RUHKTWGB.cjs');
-require('./chunk-LC65AC6M.cjs');
+require('./chunk-COWMXUHN.cjs');
 require('./chunk-YSDB6HGQ.cjs');
 require('./chunk-FX35L4Y6.cjs');
 require('./chunk-JQCQCE6U.cjs');
@@ -1841,7 +1841,7 @@ function buildTicketsBoardFixture(cast) {
   const dana = assignee(cast.person("dana"));
   const alex = assignee(cast.person("alex"));
   return [
-    _chunkSWMUW3RRcjs.columnFromTicketStatus.call(void 0, "ACTIVE", [
+    _chunk744JXTDPcjs.columnFromTicketStatus.call(void 0, "ACTIVE", [
       ticket("tk-1051", "Printer offline at the front desk", "ACTIVE", {
         ticketNumber: "1051",
         agent: "fae",
@@ -1859,7 +1859,7 @@ function buildTicketsBoardFixture(cast) {
         tags: ["onboarding"]
       })
     ]),
-    _chunkSWMUW3RRcjs.columnFromTicketStatus.call(void 0, "TECH_REQUIRED", [
+    _chunk744JXTDPcjs.columnFromTicketStatus.call(void 0, "TECH_REQUIRED", [
       ticket("tk-1049", "Acrobat Pro for Maya", "TECH_REQUIRED", {
         ticketNumber: "1049",
         agent: "fae",
@@ -1883,7 +1883,7 @@ function buildTicketsBoardFixture(cast) {
         escalatedByUser: true
       })
     ]),
-    _chunkSWMUW3RRcjs.columnFromTicketStatus.call(void 0, "ON_HOLD", [
+    _chunk744JXTDPcjs.columnFromTicketStatus.call(void 0, "ON_HOLD", [
       ticket("tk-1046", "Replace the conference room display", "ON_HOLD", {
         ticketNumber: "1046",
         organizationName: _chunkFDZOE5TLcjs.DEMO_ORGANIZATIONS.acme.name,
@@ -1892,7 +1892,7 @@ function buildTicketsBoardFixture(cast) {
         activity: { kind: "waiting-external" }
       })
     ]),
-    _chunkSWMUW3RRcjs.columnFromTicketStatus.call(void 0, 
+    _chunk744JXTDPcjs.columnFromTicketStatus.call(void 0, 
       "RESOLVED",
       [
         ticket("tk-1048", "Slow laptop", "RESOLVED", {
@@ -1928,7 +1928,7 @@ function TicketsBoardScreen({ compact = false }) {
   const cast = _chunkLHV2R6QUcjs.useProductDemoCast.call(void 0, );
   const board = _react.useMemo.call(void 0, () => buildTicketsBoardFixture(cast), [cast]);
   const columns = compact ? board.filter((column) => column.id !== "ON_HOLD") : board;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg p-[var(--spacing-system-m)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkSWMUW3RRcjs.Board, { columns, onChange: noop, initialCollapsed: compact ? void 0 : FOLDED }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg p-[var(--spacing-system-m)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk744JXTDPcjs.Board, { columns, onChange: noop, initialCollapsed: compact ? void 0 : FOLDED }) });
 }
 
 

package/dist/types/navigation.d.ts

@@ -126,6 +126,34 @@ export interface SlidingSidebarConfig {
     position?: 'left' | 'right';
     className?: string;
 }
+/**
+ * `NavigationSidebarConfig.resizable`: the user drags the expanded sidebar's
+ * right edge on desktop (`lg` and up). The 56px rail is not resizable, nor are
+ * the tablet overlay and the burger menu; the overlay opens to the chosen width.
+ */
+export interface NavigationSidebarResizeConfig {
+    /**
+     * Narrowest expanded width, in px. Raised to 141px when lower: the rows read
+     * 140px and up as expanded (`@[140px]/of-nav-sidebar`).
+     */
+    minWidth: number;
+    /** Widest expanded width, in px. Also kept to the room there is (`minContentWidth`). */
+    maxWidth: number;
+    /**
+     * Px of the row the content beside the sidebar always keeps, so a wide sidebar
+     * cannot crowd the page out of a narrow desktop window. Default 720, the lib's
+     * `content-md` breakpoint.
+     */
+    minContentWidth?: number;
+    /**
+     * `localStorage` key for the width the user chose: `{ size }` under
+     * `<storageKey>:chosen` (see `useResizablePanelSize`). Only a drag or a key
+     * press on the handle writes it, never the default or a clamped width; a double
+     * click removes it. Omit to keep the choice for the mount only. A host that seeds
+     * `NAVIGATION_SIDEBAR_WIDTH_VAR` before first paint reads the same entry.
+     */
+    storageKey?: string;
+}
 /**
  * Configuration for the navigation sidebar component
  */
@@ -253,6 +281,14 @@ export interface NavigationSidebarConfig {
      * chat search in `sectionSlot`.
      */
     revealSignal?: number;
+    /**
+     * Let the user resize the expanded sidebar on desktop: a drag handle astride
+     * its right edge (the grip the Mingo chat drawer had), arrow keys, Home and
+     * End on it, a double click back to the default. The default stays
+     * `expandedWidth` (grouped) or 224px (flat); both variants. Omitted: the fixed
+     * widths, as before.
+     */
+    resizable?: NavigationSidebarResizeConfig;
 }
 /** What a slot render function is told about the place it is drawn in. */
 export interface NavigationSidebarSlotState {

package/dist/types/navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../src/types/navigation.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../src/types/navigation.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.839",
+  "version": "0.0.841",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "sideEffects": [

package/src/components/chat/chat-nav-sidebar.tsx

@@ -1,9 +1,11 @@
 'use client';
 
 import { forwardRef, type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react';
+import { useClippedLabelTooltip } from '../../hooks/ui/use-clipped-label-tooltip';
 import { cn } from '../../utils/cn';
 import { MediaSkeleton, TextLineSkeleton } from '../loading/unified-skeleton';
 import { BUTTON_KIND_CLASS, Button } from '../ui/button';
+import { FloatingTooltip } from '../ui/floating-tooltip';
 import { LoadingItems, loadingItemProps, useLoadingScope } from '../ui/loading-scope';
 import { ScrollFadeOverlay, useScrollFade } from '../ui/scroll-fade';
 
@@ -157,6 +159,8 @@ const ChatListItem = forwardRef<HTMLButtonElement, ChatListItemProps>(
     ref,
   ) => {
     const loading = useLoadingScope() || loadingProp;
+    // A title the list clips: its full text in a tooltip over it, only while clipped and where a pointer can hover.
+    const { ref: titleRef, enabled: titleTooltip } = useClippedLabelTooltip<HTMLSpanElement>(title);
     const content = (
       <>
         <span className="flex min-w-0 flex-1 flex-col">
@@ -165,11 +169,20 @@ const ChatListItem = forwardRef<HTMLButtonElement, ChatListItemProps>(
             {loading ? (
               <TextLineSkeleton type="h4" className={SKELETON_TITLE_WIDTHS[index % SKELETON_TITLE_WIDTHS.length]} />
             ) : (
-              <span
-                className={cn('min-w-0 flex-1 truncate text-h4', active ? 'text-ods-accent' : 'text-ods-text-primary')}
+              <FloatingTooltip
+                content={title}
+                side="top"
+                as="span"
+                disabled={!titleTooltip}
+                triggerClassName="min-w-0 flex-1"
               >
-                {title}
-              </span>
+                <span
+                  ref={titleRef}
+                  className={cn('block min-w-0 truncate text-h4', active ? 'text-ods-accent' : 'text-ods-text-primary')}
+                >
+                  {title}
+                </span>
+              </FloatingTooltip>
             )}
           </span>
           {subtitle != null &&

package/src/components/navigation/account-popover.tsx

@@ -2,9 +2,11 @@
 
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import type { ReactNode } from 'react';
+import { useClippedLabelTooltip } from '../../hooks/ui/use-clipped-label-tooltip';
 import { cn } from '../../utils';
 import { Chevron02DownIcon } from '../icons-v2-generated';
 import { ActionsMenuDropdown, type ActionsMenuGroup, type ActionsMenuItem } from '../ui/actions-menu';
+import { FloatingTooltip } from '../ui/floating-tooltip';
 import { SquareAvatar } from '../ui/square-avatar';
 import { UnreadCountBadge, UnreadDot } from './unread-dot';
 
@@ -124,6 +126,11 @@ export function AccountPopover({
   className,
 }: AccountPopoverProps) {
   const unread = items.some(entry => entry.type !== 'divider' && (entry.count ?? 0) > 0);
+  // The name and subtitle a narrow sidebar clips: their full text in a tooltip
+  // over them, only while clipped and where a pointer can hover. The rail's
+  // tooltip is the trigger's `title`.
+  const { ref: nameRef, enabled: nameTooltip } = useClippedLabelTooltip<HTMLSpanElement>(name);
+  const { ref: subtitleRef, enabled: subtitleTooltip } = useClippedLabelTooltip<HTMLSpanElement>(subtitle);
   const [open = false, setOpen] = useControllableState({
     prop: openProp,
     defaultProp: false,
@@ -182,14 +189,36 @@ export function AccountPopover({
             {/* The chevron follows the name, so it reads as this row's menu and not
                 as one more of the buttons a host sets at the row's end. */}
             <span className="flex min-w-0 items-center gap-[var(--spacing-system-xxs)]">
-              <span className="truncate text-ods-text-primary text-h4">{name}</span>
+              <FloatingTooltip
+                content={name}
+                side="top"
+                as="span"
+                disabled={collapsed || !nameTooltip}
+                triggerClassName="min-w-0"
+              >
+                <span ref={nameRef} className="block truncate text-ods-text-primary text-h4">
+                  {name}
+                </span>
+              </FloatingTooltip>
               <Chevron02DownIcon
                 size={16}
                 className="shrink-0 text-ods-text-secondary transition-transform duration-200 group-data-[state=open]/account:rotate-180"
                 aria-hidden="true"
               />
             </span>
-            {subtitle && <span className="truncate text-ods-text-secondary text-code">{subtitle}</span>}
+            {subtitle && (
+              <FloatingTooltip
+                content={subtitle}
+                side="top"
+                as="span"
+                disabled={collapsed || !subtitleTooltip}
+                triggerClassName="min-w-0"
+              >
+                <span ref={subtitleRef} className="block truncate text-ods-text-secondary text-code">
+                  {subtitle}
+                </span>
+              </FloatingTooltip>
+            )}
           </span>
         </button>
       }

package/src/components/navigation/app-layout-side-panel.tsx

@@ -13,7 +13,7 @@ import {
 import { useIsomorphicLayoutEffect } from '../../hooks/ui/use-isomorphic-layout-effect';
 import { breakpoints, useMediaQuery } from '../../hooks/ui/use-media-query';
 import { cn } from '../../utils/cn';
-import { Menu01Icon } from '../icons-v2-generated';
+import { PanelResizeGrip } from '../ui/panel-resize-handle';
 
 /**
  * - `docked`: a column beside the content, resizable.
@@ -523,12 +523,7 @@ function SidePanelResizeHandle({ state, label, controls }: SidePanelResizeHandle
       onKeyDown={handleKeyDown}
       className="group absolute inset-y-0 left-0 z-10 flex w-4 -translate-x-1/2 cursor-col-resize touch-none select-none items-center justify-center outline-none"
     >
-      <span
-        aria-hidden
-        className="flex h-8 w-4 items-center justify-center rounded-sm border border-ods-border bg-ods-card text-ods-text-secondary transition-colors group-hover:border-ods-border-hover group-focus-visible:border-ods-accent group-focus-visible:text-ods-accent"
-      >
-        <Menu01Icon size={12} />
-      </span>
+      <PanelResizeGrip />
     </div>
   );
 }

package/src/components/navigation/navigation-sidebar-grouped.tsx

@@ -2,9 +2,11 @@
 
 import { cloneElement, isValidElement, type MouseEvent, type ReactNode, useId, useState } from 'react';
 import Link from '../../embed-shims/next-link';
+import { useClippedLabelTooltip } from '../../hooks/ui/use-clipped-label-tooltip';
 import type { NavigationSidebarItem } from '../../types/navigation';
 import { cn } from '../../utils';
 import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { FloatingTooltip } from '../ui/floating-tooltip';
 import { NavigationItemBadge } from './navigation-item-badge';
 import { UnreadDot } from './unread-dot';
 
@@ -150,8 +152,15 @@ function RowEnd({ count }: { count: number }) {
   return count > 0 ? <CountPill count={count} className="ml-auto" /> : null;
 }
 
-function RowLabel({ item }: { item: NavigationSidebarItem }) {
+/**
+ * The row's label column. A label the expanded sidebar clips (a narrow width,
+ * a long label) shows its full text in a tooltip over it, as `TruncateText`
+ * offers it — only while it IS clipped, and only where a pointer can hover.
+ * The rail (`showLabel` false) has its own: the row's `title`.
+ */
+function RowLabel({ item, showLabel = true }: { item: NavigationSidebarItem; showLabel?: boolean }) {
   const unreadCount = item.unreadCount ?? 0;
+  const { ref: labelRef, enabled: labelTooltip } = useClippedLabelTooltip<HTMLSpanElement>(item.label);
   return (
     <span
       className={cn(
@@ -159,7 +168,17 @@ function RowLabel({ item }: { item: NavigationSidebarItem }) {
         EXPANDED_ONLY,
       )}
     >
-      <span className="min-w-0 truncate text-h4">{item.label}</span>
+      <FloatingTooltip
+        content={item.label}
+        side="top"
+        as="span"
+        disabled={!showLabel || !labelTooltip}
+        triggerClassName="min-w-0"
+      >
+        <span ref={labelRef} className="block min-w-0 truncate text-h4">
+          {item.label}
+        </span>
+      </FloatingTooltip>
       {item.badge && <NavigationItemBadge label={item.badge} compact />}
       <RowEnd count={unreadCount} />
     </span>
@@ -204,7 +223,7 @@ function GroupedLeafRow({
   const content = (
     <>
       <RowIcon item={item} size={20} className={lit ? 'text-ods-accent' : idleIcon('row')} />
-      <RowLabel item={item} />
+      <RowLabel item={item} showLabel={showLabel} />
     </>
   );
   const shared = {
@@ -248,6 +267,8 @@ function GroupedChildRow({
 }) {
   const name = accessibleName(item);
   const lit = isActive && !disabled;
+  // The clipped label's tooltip, as `RowLabel` offers it.
+  const { ref: labelRef, enabled: labelTooltip } = useClippedLabelTooltip<HTMLSpanElement>(item.label);
   const className = cn(
     // The icon column flush, under the parent's icon at both widths.
     'group/nav-child relative flex h-11 w-full items-stretch gap-[var(--spacing-system-xxs)] rounded-md text-left',
@@ -276,7 +297,17 @@ function GroupedChildRow({
           !lit && !disabled && isPending && 'after:opacity-100',
         )}
       >
-        <span className="min-w-0 truncate text-h4">{item.label}</span>
+        <FloatingTooltip
+          content={item.label}
+          side="top"
+          as="span"
+          disabled={!showLabel || !labelTooltip}
+          triggerClassName="min-w-0"
+        >
+          <span ref={labelRef} className="block min-w-0 truncate text-h4">
+            {item.label}
+          </span>
+        </FloatingTooltip>
         {item.badge && <NavigationItemBadge label={item.badge} compact />}
         <RowEnd count={item.unreadCount ?? 0} />
       </span>
@@ -365,7 +396,7 @@ function GroupedGroup({
         )}
       >
         <RowIcon item={item} size={20} className={lit ? 'text-ods-accent' : idleIcon('row')} />
-        <RowLabel item={item} />
+        <RowLabel item={item} showLabel={showLabel} />
       </button>
       <div
         id={groupDomId}
@@ -517,7 +548,7 @@ export function NavigationSidebarActionRow({
   const content = (
     <>
       <RowIcon item={entry} size={20} className={lit || (outline && !disabled) ? 'text-ods-accent' : idleIcon('row')} />
-      <RowLabel item={entry} />
+      <RowLabel item={entry} showLabel={!minimized} />
     </>
   );
   const shared = { className: classes, title: minimized ? name : undefined, 'aria-label': name };

package/src/components/navigation/navigation-sidebar-item.tsx

@@ -2,10 +2,12 @@
 
 import { cloneElement, memo, type ReactElement, type ReactNode, type MouseEvent } from 'react';
 import Link from '../../embed-shims/next-link';
+import { useClippedLabelTooltip } from '../../hooks/ui/use-clipped-label-tooltip';
 import type { NavigationSidebarItem } from '../../types/navigation';
 import { cn } from '../../utils';
 import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { BUTTON_KIND_CLASS, Button } from '../ui/button';
+import { FloatingTooltip } from '../ui/floating-tooltip';
 import { useLoadingScope } from '../ui/loading-scope';
 import { NavigationItemBadge } from './navigation-item-badge';
 import { UnreadDot } from './unread-dot';
@@ -76,6 +78,11 @@ function LoadedNavigationSidebarItemButton({
   // The accessible name carries the stamp — "Devices (Beta)" — because `aria-label`
   // replaces the content; the rail's tooltip is the same string.
   const name = item.badge ? `${item.label} (${item.badge})` : item.label;
+  // A label the expanded sidebar clips (a narrow width, a long label): its full
+  // text in a tooltip over it, as `TruncateText` offers it — only while it IS
+  // clipped, since a label that fits would only repeat itself, and only where a
+  // pointer can hover. The rail's tooltip is the row's `title` below.
+  const { ref: labelRef, enabled: labelTooltip } = useClippedLabelTooltip<HTMLSpanElement>(item.label);
 
   const content: ReactNode = (
     <>
@@ -98,7 +105,17 @@ function LoadedNavigationSidebarItemButton({
         )}
         aria-hidden={!showLabel}
       >
-        <span className="min-w-0 truncate text-h4">{item.label}</span>
+        <FloatingTooltip
+          content={item.label}
+          side="top"
+          as="span"
+          disabled={!showLabel || !labelTooltip}
+          triggerClassName="min-w-0"
+        >
+          <span ref={labelRef} className="block min-w-0 truncate text-h4">
+            {item.label}
+          </span>
+        </FloatingTooltip>
         {item.badge && <NavigationItemBadge label={item.badge} className="ml-[var(--spacing-system-xs)] shrink-0" />}
       </span>
 

package/src/components/navigation/navigation-sidebar.tsx

@@ -1,13 +1,15 @@
 'use client';
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import type { CSSProperties, MouseEvent, ReactNode } from 'react';
+import type { CSSProperties, MouseEvent, ReactNode, RefObject } from 'react';
 import { useIsHydrated } from '../../hooks/ui/use-is-hydrated';
 import { useIsomorphicLayoutEffect } from '../../hooks/ui/use-isomorphic-layout-effect';
 import { useLocalStorage } from '../../hooks/ui/use-local-storage';
 import { useLgUp, useMdUp } from '../../hooks/ui/use-media-query';
+import { useResizablePanelSize } from '../../hooks/ui/use-resizable-panel-size';
 import type { NavigationSidebarConfig, NavigationSidebarItem } from '../../types/navigation';
 import { cn } from '../../utils';
+import { PanelResizeGrip, PanelResizeHandle } from '../ui/panel-resize-handle';
 import { NAVIGATION_SIDEBAR_ATTRIBUTE } from './app-layout-context';
 import {
   NavigationSidebarGroupedEntries,
@@ -24,6 +26,12 @@ const MINIMIZED_WIDTH = 56; // 3.5rem = 56px
 const EXPANDED_WIDTH = 224; // 14rem = 224px — the default; a grouped config may set its own
 /** The narrowest custom `expandedWidth`: the rows read 140px and up as expanded. */
 const MIN_CUSTOM_EXPANDED_WIDTH = 141;
+/**
+ * Px of its row a resizable sidebar leaves to the content beside it
+ * (`NavigationSidebarResizeConfig.minContentWidth`): the `content-md`
+ * breakpoint, under which page content lays out for a phone.
+ */
+const DEFAULT_MIN_CONTENT_WIDTH = 720;
 const STORAGE_KEY = 'of.navigationSidebar.minimized';
 
 /**
@@ -146,6 +154,27 @@ const SIDEBAR_TABLET_WIDTH = {
   customOverlay: 'md:w-[var(--of-navigation-sidebar-expanded-width)]',
 } as const;
 
+/**
+ * The width of the sidebar's row — its parent, the room it shares with the
+ * content — for the resize clamp. 0 until measured, and when there is nothing to
+ * measure (not resizable, no parent, the server).
+ */
+function useRowWidth(asideRef: RefObject<HTMLElement | null>, enabled: boolean): number {
+  const [width, setWidth] = useState(0);
+  useEffect(() => {
+    const row = enabled ? asideRef.current?.parentElement : null;
+    if (!row) return undefined;
+    const update = () => setWidth(row.clientWidth);
+    update();
+    // An environment without ResizeObserver (jsdom in a consumer's tests) measures once.
+    if (typeof ResizeObserver === 'undefined') return undefined;
+    const observer = new ResizeObserver(update);
+    observer.observe(row);
+    return () => observer.disconnect();
+  }, [asideRef, enabled]);
+  return width;
+}
+
 /** A click the browser will resolve itself — new tab, new window, middle button. */
 export const isModifiedClick = (event?: MouseEvent): boolean =>
   !!event && (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0);
@@ -255,18 +284,74 @@ export function NavigationSidebar({
 
   // A grouped config's own expanded width (`expandedWidth`); `null` = the
   // default 224px through the literal classes, exactly as before.
-  const customExpandedWidth =
+  const configExpandedWidth =
     config.variant === 'grouped' && config.expandedWidth !== undefined
       ? Math.max(config.expandedWidth, MIN_CUSTOM_EXPANDED_WIDTH)
       : null;
-  const expandedWidth = customExpandedWidth ?? EXPANDED_WIDTH;
+
+  // `config.resizable`: the expanded width is the user's — dragged or stepped on
+  // the handle below, kept under the config's storage key — and the config width
+  // is where it starts. Clamped to the config's bounds and to the row, so the
+  // content beside the rail keeps `minContentWidth`. Not resizable: the config
+  // width, and the hook reads and writes nothing.
+  const resize = config.resizable;
+  const asideRef = useRef<HTMLElement>(null);
+  const rowWidth = useRowWidth(asideRef, resize !== undefined);
+  const resizeMinWidth = Math.max(resize?.minWidth ?? MIN_CUSTOM_EXPANDED_WIDTH, MIN_CUSTOM_EXPANDED_WIDTH);
+  const {
+    size: chosenExpandedWidth,
+    setSize: setChosenExpandedWidth,
+    resetSize: resetChosenExpandedWidth,
+    clampSize: clampExpandedWidth,
+  } = useResizablePanelSize({
+    enabled: resize !== undefined,
+    minSize: resizeMinWidth,
+    maxSize: resize?.maxWidth ?? Number.POSITIVE_INFINITY,
+    defaultSize: configExpandedWidth ?? EXPANDED_WIDTH,
+    available: rowWidth,
+    reserve: resize?.minContentWidth ?? DEFAULT_MIN_CONTENT_WIDTH,
+    storageKey: resize?.storageKey,
+  });
+
+  // The desktop width — what the effect below publishes. The chosen width may
+  // be used here as soon as it is known: an effect never runs into the SSR HTML.
+  const expandedWidth = resize !== undefined ? chosenExpandedWidth : (configExpandedWidth ?? EXPANDED_WIDTH);
+  // The width in the MARKUP — the inline custom property on the rail and its
+  // tablet slot, which the tablet overlay opens to and the desktop rule falls
+  // back on, and the handle's `aria-valuenow`: the chosen width only once
+  // hydrated. The server could not read it, and a first client render that
+  // differs is a hydration mismatch, which React reports and leaves in the DOM.
+  // Until then the config width stands, as for a sidebar that is not resizable;
+  // on desktop the seeded width shows throughout, so nothing moves.
+  const markupExpandedWidth = hydrated ? chosenExpandedWidth : (configExpandedWidth ?? EXPANDED_WIDTH);
+  const customExpandedWidth = resize !== undefined ? markupExpandedWidth : configExpandedWidth;
   const expandedWidthStyle =
     customExpandedWidth === null ? undefined : ({ [EXPANDED_WIDTH_VAR]: `${customExpandedWidth}px` } as CSSProperties);
 
+  // A drag moves the rail's own width property on every pointer move and marks
+  // the rail (`data-resizing`, read by a class on it) so its width transition
+  // does not trail the pointer; the choice is committed once, on release, which
+  // also lifts the mark. Neither write concerns hydration: both run on the
+  // client only, once the user has the handle.
+  const dragExpandedWidth = useCallback((next: number) => {
+    const aside = asideRef.current;
+    if (!aside) return;
+    aside.setAttribute('data-resizing', '');
+    aside.style.setProperty(NAVIGATION_SIDEBAR_WIDTH_VAR, `${Math.round(next)}px`);
+  }, []);
+  const commitExpandedWidth = useCallback(
+    (next: number) => {
+      asideRef.current?.removeAttribute('data-resizing');
+      setChosenExpandedWidth(next);
+    },
+    [setChosenExpandedWidth],
+  );
+
   // A new expanded width (the host swapped configs — e.g. a placeholder for
-  // the grouped tree) is a different sidebar, not a toggle: it snaps instead of
-  // animating. The transition is dropped in the same commit that moves the
-  // width and comes back a frame later (the effect below).
+  // the grouped tree; a resize committed, stepped or reset on the handle) is a
+  // different sidebar, not a toggle: it snaps instead of animating. The
+  // transition is dropped in the same commit that moves the width and comes
+  // back a frame later (the effect below).
   const [widthFor, setWidthFor] = useState(expandedWidth);
   if (widthFor !== expandedWidth) {
     setWidthFor(expandedWidth);
@@ -447,7 +532,6 @@ export function NavigationSidebar({
   // On the rail, not on `<html>` where the seed sits: the rail is its only reader,
   // and an inherited custom property on the root made WebKit restyle the whole
   // document on every toggle. Its own value overrides the inherited seed.
-  const asideRef = useRef<HTMLElement>(null);
   useIsomorphicLayoutEffect(() => {
     asideRef.current?.style.setProperty(NAVIGATION_SIDEBAR_WIDTH_VAR, sidebarWidth);
   }, [sidebarWidth]);
@@ -555,6 +639,9 @@ export function NavigationSidebar({
               ? SIDEBAR_TABLET_WIDTH.overlay
               : SIDEBAR_TABLET_WIDTH.customOverlay,
           transitionsEnabled && widthTransition,
+          // A drag on the resize handle in progress: the width follows the
+          // pointer, with no transition trailing it (`dragExpandedWidth`).
+          'data-[resizing]:transition-none',
           // Snaps where its width moves the content: the desktop rail, and the
           // tablet overlay too when it pushes (its slot above snaps with it).
           !animateWidth && (pushOnTablet ? 'transition-none' : 'lg:transition-none'),
@@ -632,6 +719,28 @@ export function NavigationSidebar({
           onToggle={handleToggle}
           compact={grouped}
         />
+
+        {/* The resize handle (`config.resizable`), astride the rail's right edge —
+            the grip the Mingo chat drawer had — on desktop while expanded: the
+            56px rail has nothing to resize, and below `lg` the width is the
+            tablet's. The 24px track straddles the border, half of it over the
+            content's edge; the grip marks the border as draggable. */}
+        {resize !== undefined && !minimized && (
+          <PanelResizeHandle
+            side="left"
+            variant="inLayout"
+            size={markupExpandedWidth}
+            minSize={resizeMinWidth}
+            maxSize={clampExpandedWidth(Number.POSITIVE_INFINITY)}
+            clampSize={clampExpandedWidth}
+            onSize={commitExpandedWidth}
+            onDrag={dragExpandedWidth}
+            onReset={resetChosenExpandedWidth}
+            ariaLabel="Resize navigation sidebar"
+            className="inset-y-0 hidden w-6 -translate-x-1/2 justify-center pl-0 lg:flex"
+            grip={<PanelResizeGrip />}
+          />
+        )}
       </aside>
     </>
   );