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

package/src/components/ui/panel-resize-handle.tsx

@@ -3,13 +3,37 @@
 import { type KeyboardEvent, type PointerEvent, type ReactNode, type RefObject, useEffect, useRef } from 'react';
 
 import { cn } from '../../utils/cn';
+import { Menu01Icon } from '../icons-v2-generated';
 
 /**
- * The drag-to-resize handle of a side or edge panel, shared by `Drawer` and
- * `AppLayoutDrawer`. A drag writes the panel's size to the DOM and reports it
- * once, on release; arrow keys, Home and End report at once.
+ * The drag-to-resize handle of a side or edge panel, shared by `Drawer`,
+ * `AppLayoutDrawer`, `ComposerSheet` and `NavigationSidebar`. A drag writes the
+ * panel's size to the DOM (or hands it to `onDrag`) and reports it once, on
+ * release; arrow keys, Home and End report at once; a double click asks for the
+ * default (`onReset`).
  */
 
+/**
+ * The grip the design draws on a resizable edge (its `resize-handle`): a 16×32
+ * pill in the page's background astride the panel's border, with a three-line
+ * mark. `NavigationSidebar` hands it to the handle as its `grip`, and
+ * `AppLayoutSidePanel`'s own handle draws it too.
+ */
+export function PanelResizeGrip({ className }: { className?: string }) {
+  return (
+    <span
+      aria-hidden
+      className={cn(
+        'flex h-8 w-4 items-center justify-center rounded-sm border border-ods-border bg-ods-bg text-ods-text-secondary transition-colors',
+        'group-hover:border-ods-border-hover group-focus-visible:border-ods-accent group-focus-visible:text-ods-accent',
+        className,
+      )}
+    >
+      <Menu01Icon size={12} />
+    </span>
+  );
+}
+
 type PanelSide = 'right' | 'left' | 'top' | 'bottom';
 
 const HORIZONTAL_SIDES: ReadonlySet<PanelSide> = new Set(['left', 'right']);
@@ -37,8 +61,18 @@ export interface PanelResizeHandleProps {
   onSize: (next: number) => void;
   /** Clamp a candidate size to the min/max and the container. */
   clampSize: (next: number) => number;
-  /** The panel the size applies to — written directly while dragging. */
-  panelRef: RefObject<HTMLDivElement | null>;
+  /** The panel the size applies to — written directly while dragging. Omit for a
+   *  panel sized by other means (`onDrag`). */
+  panelRef?: RefObject<HTMLDivElement | null>;
+  /**
+   * Every size the drag reaches, in place of writing `panelRef`'s inline size:
+   * for a panel whose width is a custom property or a class rather than an
+   * inline style, or one that marks itself while dragged. `onSize` still
+   * reports once, on release.
+   */
+  onDrag?: (next: number) => void;
+  /** A double click on the handle: back to the default size. */
+  onReset?: () => void;
   /** `overlay` is the body-level `Drawer`'s handle, `inLayout` the wider one of
    *  `AppLayoutDrawer`. They differ in track width and grip colour only. */
   variant: 'overlay' | 'inLayout';
@@ -57,6 +91,8 @@ export function PanelResizeHandle({
   onSize,
   clampSize,
   panelRef,
+  onDrag,
+  onReset,
   variant,
   ariaLabel,
   className,
@@ -95,12 +131,17 @@ export function PanelResizeHandle({
   // the size is unchanged, so it leaves the style alone.
   const handlePointerMove = (e: PointerEvent<HTMLDivElement>) => {
     const start = startRef.current;
-    const panel = panelRef.current;
-    if (!start || !panel) return;
+    if (!start) return;
+    if (!onDrag && !panelRef?.current) return;
     const delta = isHorizontal ? e.clientX - start.x : e.clientY - start.y;
     const next = clampSize(start.size + delta * direction);
     dragSizeRef.current = next;
-    panel.style[isHorizontal ? 'width' : 'height'] = `${next}px`;
+    if (onDrag) {
+      onDrag(next);
+    } else if (panelRef) {
+      const panel = panelRef.current;
+      if (panel) panel.style[isHorizontal ? 'width' : 'height'] = `${next}px`;
+    }
     e.currentTarget.setAttribute('aria-valuenow', String(Math.round(next)));
   };
 
@@ -174,6 +215,7 @@ export function PanelResizeHandle({
       onPointerCancel={endDrag}
       onLostPointerCapture={endDrag}
       onKeyDown={handleKeyDown}
+      onDoubleClick={onReset}
       className={cn(
         'group absolute z-20 flex touch-none select-none',
         'outline-none ring-0 focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0',

package/src/hooks/ui/index.ts

@@ -9,6 +9,7 @@ export * from './use-header-height';
 export * from './use-sticky-toolbar';
 export * from './use-horizontal-scrollbar';
 export * from './use-image-edge-color';
+export * from './use-clipped-label-tooltip';
 export * from './use-is-truncated';
 export * from './use-isomorphic-layout-effect';
 export * from './use-keyboard-collision-padding';

package/src/hooks/ui/use-clipped-label-tooltip.ts

@@ -0,0 +1,20 @@
+'use client';
+
+import { useIsTruncated } from './use-is-truncated';
+import { useMediaQuery } from './use-media-query';
+
+/** A pointer that can hover: where a tooltip on a clipped label is reachable. A touch screen has none. */
+export const HOVER_MEDIA_QUERY = '(hover: hover) and (pointer: fine)';
+
+/**
+ * A clipped label's "full text" tooltip: `ref` goes on the clipped element (see
+ * {@link useIsTruncated}), `enabled` says whether the tooltip may open — only
+ * while the text IS clipped, and only on a device whose pointer can hover. A
+ * phone or tablet has no hover to reach it with, so it offers none there; the
+ * rows keep their accessible names. Pass the rendered text as `value`.
+ */
+export function useClippedLabelTooltip<T extends HTMLElement>(value: unknown) {
+  const { ref, isTruncated } = useIsTruncated<T>(value);
+  const canHover = useMediaQuery(HOVER_MEDIA_QUERY) === true;
+  return { ref, enabled: isTruncated && canHover };
+}

package/src/hooks/ui/use-is-truncated.ts

@@ -52,6 +52,8 @@ export function useIsTruncated<T extends HTMLElement>(value: unknown, options?:
       );
     };
     check();
+    // An environment without ResizeObserver (jsdom in a consumer's tests) measures once.
+    if (typeof ResizeObserver === 'undefined') return undefined;
     const observer = new ResizeObserver(check);
     observer.observe(element);
     return () => observer.disconnect();

package/src/hooks/ui/use-media-query.ts

@@ -13,6 +13,8 @@ export function useMediaQuery(query: string): boolean | undefined {
   const [matches, setMatches] = useState<boolean | undefined>(undefined);
 
   useIsomorphicLayoutEffect(() => {
+    // An environment without matchMedia (jsdom in a consumer's tests) never answers: `undefined` throughout.
+    if (typeof window.matchMedia !== 'function') return undefined;
     const matchMedia = window.matchMedia(query);
 
     const handleChange = () => {

package/src/hooks/ui/use-resizable-panel-size.ts

@@ -110,5 +110,11 @@ export function useResizablePanelSize({
     [clampSize, storage],
   );
 
-  return { size, setSize, clampSize };
+  /** Back to `defaultSize`: the choice is forgotten and its stored entry removed. */
+  const resetSize = useCallback(() => {
+    setChosen({ storage, size: null });
+    storage?.clear();
+  }, [storage]);
+
+  return { size, setSize, resetSize, clampSize };
 }

package/src/types/navigation.ts

@@ -115,6 +115,35 @@ export interface SlidingSidebarConfig {
   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
  */
@@ -237,6 +266,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. */