@cosxai/ui 1.0.0-alpha.11 → 1.0.0-alpha.12

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 1.0.0-alpha.12 (2026-10-04)
+
+From the Metaroom app (Motion & Native Feel §04, Account):
+
+- BottomSheet: rises in 280ms and now leaves in 220ms instead of vanishing
+  (it stays mounted for its exit; the scrim fades with it and carries
+  `data-leaving` while it goes). `detents="two"`: half (60%) and full —
+  typing in it, scrolling its list or dragging up lifts it to full,
+  dragging down from full goes back to half; dragging above its top gives
+  way at 0.3×. `action` (the title row's button) and `footer` (pinned below
+  the list). The rise starts when Radix puts the content on the page, so it
+  always plays. Buttons and fields in the title row don't start a drag.
+- Avatar: size 64 (Account's profile photo), initials at 20px.
+
 ## 1.0.0-alpha.11 (2026-10-01)
 
 App shell for the Agent module (Metaroom Agent, desktop and phone):

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosxai/ui",
-  "version": "1.0.0-alpha.11",
+  "version": "1.0.0-alpha.12",
   "description": "COSX Design System 3.0 \u2014 tokens, Tailwind v4 theme and React components",
   "license": "UNLICENSED",
   "type": "module",

package/src/components/Avatar.tsx

@@ -3,11 +3,11 @@ import { forwardRef, useEffect, useRef, useState, type ComponentProps } from 're
 import { cn } from '../lib/cn';
 import { initialsOf } from './ActivityTimeline';
 
-export type AvatarSize = 20 | 24 | 28 | 32 | 36 | 40 | 52;
+export type AvatarSize = 20 | 24 | 28 | 32 | 36 | 40 | 52 | 64;
 
 // Initials size per avatar size (Metaroom Agent / Account: 22→9, 28→10,
-// 32→11, 40→13, 52→16).
-const TYPE: Record<AvatarSize, number> = { 20: 9, 24: 9, 28: 10, 32: 11, 36: 12, 40: 13, 52: 16 };
+// 32→11, 40→13, 52→16, Account's profile photo 64→20).
+const TYPE: Record<AvatarSize, number> = { 20: 9, 24: 9, 28: 10, 32: 11, 36: 12, 40: 13, 52: 16, 64: 20 };
 
 export type AvatarProps = Omit<ComponentProps<'span'>, 'children'> & {
   /** The person's name: gives the initials (two Latin initials, or the first hanzi). */
@@ -29,8 +29,8 @@ export type AvatarProps = Omit<ComponentProps<'span'>, 'children'> & {
 
 /**
  * Avatar — a person: their photo, or their initials on a round disc. Sizes
- * 20–52 as the Metaroom app uses them (rail account 32, phone tab 24, lists
- * 28–40, profile 52). For the Agent use MetaAvatar (@cosxai/chat); for a
+ * 20–64 as the Metaroom app uses them (rail account 32, phone tab 24, lists
+ * 28–40, Me card 52, Account's profile photo 64). For the Agent use MetaAvatar (@cosxai/chat); for a
  * workspace, WorkspaceMark.
  *
  * Compose with: AppRail `account` slot (inside a button), BottomTabs item

package/src/components/BottomSheet.tsx

@@ -1,5 +1,5 @@
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { useCallback, useEffect, useRef, useState, type ComponentProps, type PointerEvent as ReactPointerEvent, type ReactElement, type ReactNode } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, type ComponentProps, type PointerEvent as ReactPointerEvent, type ReactElement, type ReactNode } from 'react';
 
 import { cn } from '../lib/cn';
 import { useReducedMotion } from './status-motion';
@@ -11,6 +11,17 @@ export type BottomSheetProps = Omit<ComponentProps<typeof DialogPrimitive.Conten
   hideTitle?: boolean | undefined;
   /** A line under the title, read out with it. */
   description?: ReactNode;
+  /** The main button, at the end of the title row (seen at half height too). */
+  action?: ReactNode;
+  /** Pinned below the scrolling content, above the home indicator (a Done or Add button). */
+  footer?: ReactNode;
+  /**
+   * "content": as tall as what it holds, up to half the screen — menus and
+   * confirmations. "two": half (60%) and full — browsing and picking;
+   * typing in it, scrolling its list or dragging it up lifts it to full,
+   * dragging down from full goes back to half. @default "content"
+   */
+  detents?: 'content' | 'two' | undefined;
   children?: ReactNode;
   open?: boolean | undefined;
   defaultOpen?: boolean | undefined;
@@ -21,18 +32,37 @@ export type BottomSheetProps = Omit<ComponentProps<typeof DialogPrimitive.Conten
   closeLabel?: string | undefined;
 };
 
-// A drag past this share of the sheet's height, or a flick, closes it.
+// Motion & Native Feel §04: rises in 280ms, leaves in 220ms (a quarter faster).
+const ENTER_MS = 280;
+const EXIT_MS = 220;
+const ENTER = 'cubic-bezier(.16,1,.3,1)';
+const EXIT = 'cubic-bezier(.4,0,1,1)';
+const RELEASE = 'cubic-bezier(.2,.8,.2,1)';
+// A drag past this share of the sheet's height (at most CLOSE_MAX), or a flick, closes it.
 const CLOSE_SHARE = 0.25;
 const CLOSE_MAX = 120;
 const FLICK = 0.6; // px per ms
+// Dragged above its top, the sheet gives way at this rate.
+const OVERSHOOT = 0.3;
+const HALF = 0.6;
+
+const currentY = (el: HTMLElement) => {
+  try {
+    return new DOMMatrixReadOnly(getComputedStyle(el).transform).m42 || 0;
+  } catch {
+    return 0;
+  }
+};
 
 /**
- * BottomSheet — the phone's light choice: a page-coloured sheet rising from
- * the bottom with a drag handle and a title (Metaroom Agent phone: switch
- * workspace, language). 20px top corners over the scrim; the bottom padding
- * clears the home indicator (safe area). Drag the handle or the title down,
- * or flick, to close; Esc, a tap on the scrim and the screen-reader close
- * button close it too. Built on Radix Dialog: focus moves in, is trapped and
+ * BottomSheet — the phone's sheet: a page-coloured sheet rising from the
+ * bottom with a drag handle and a title (Metaroom Agent phone: switch
+ * workspace, language, an object's menu; link files, with two heights).
+ * 20px top corners over the scrim; the bottom padding clears the home
+ * indicator (safe area). Rises in 280ms and leaves in 220ms. Drag the
+ * handle or the title row down, or flick, to close (from full height: back
+ * to half); Esc, a tap on the scrim and the screen-reader close button
+ * close it too. Built on Radix Dialog: focus moves in, is trapped and
  * returns to the opener.
  *
  * Compose with: BottomTabs (the Me tab opens it), rows of 48–56px buttons
@@ -42,6 +72,9 @@ export function BottomSheet({
   title,
   hideTitle = false,
   description,
+  action,
+  footer,
+  detents = 'content',
   children,
   open: openProp,
   defaultOpen = false,
@@ -51,6 +84,7 @@ export function BottomSheet({
   className,
   style,
   onOpenAutoFocus,
+  onFocusCapture,
   ...rest
 }: BottomSheetProps) {
   const [openState, setOpenState] = useState(defaultOpen);
@@ -64,64 +98,121 @@ export function BottomSheet({
   );
 
   const reduce = useReducedMotion();
+  // Mounted while open and while leaving (the exit plays before it goes)
+  const [mounted, setMounted] = useState(open);
+  const [full, setFull] = useState(false);
   const sheet = useRef<HTMLDivElement | null>(null);
+  const scrim = useRef<HTMLDivElement | null>(null);
   const drag = useRef<{ y0: number; t0: number } | null>(null);
-  const [dy, setDy] = useState(0);
-  const [settling, setSettling] = useState(false);
+  const entering = useRef(open);
 
-  useEffect(() => {
-    if (!open) setDy(0);
+  useLayoutEffect(() => {
+    if (open) {
+      entering.current = true;
+      setMounted(true);
+      setFull(false);
+      return;
+    }
+    if (!mounted) return;
+    const el = sheet.current;
+    if (!el || reduce || typeof el.animate !== 'function') {
+      setMounted(false);
+      return;
+    }
+    // The scrim's leaving is a CSS animation: listeners (a status bar
+    // following the page) hear it start, as with Dialog's
+    scrim.current?.setAttribute('data-leaving', '');
+    const from = currentY(el) || parseFloat(el.style.transform.replace(/[^\d.-]/g, '')) || 0;
+    el.style.transform = '';
+    el.animate([{ transform: `translateY(${from}px)` }, { transform: 'translateY(100%)' }], { duration: EXIT_MS, easing: EXIT, fill: 'forwards' }).onfinish = () => setMounted(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open]);
 
+  // Radix puts the content on the page a render after ours: the rise starts when it arrives
+  const setSheet = (el: HTMLDivElement | null) => {
+    sheet.current = el;
+    if (!el || !entering.current) return;
+    entering.current = false;
+    if (reduce || typeof el.animate !== 'function') return;
+    el.animate([{ transform: 'translateY(100%)' }, { transform: 'translateY(0)' }], { duration: ENTER_MS, easing: ENTER });
+  };
+
+  useEffect(() => () => void (drag.current = null), []);
+
+  const height = () => sheet.current?.offsetHeight ?? 0;
+  const settle = () => {
+    const el = sheet.current;
+    if (!el) return;
+    const from = el.style.transform;
+    el.style.transform = '';
+    if (from && !reduce && typeof el.animate === 'function') {
+      el.animate([{ transform: from }, { transform: 'translateY(0)' }], { duration: 200, easing: RELEASE });
+    }
+  };
   const onDown = (e: ReactPointerEvent<HTMLDivElement>) => {
     if (e.button !== 0) return;
+    if ((e.target as HTMLElement).closest('button, a, input, textarea, select')) return;
     drag.current = { y0: e.clientY, t0: performance.now() };
-    setSettling(false);
     e.currentTarget.setPointerCapture?.(e.pointerId);
   };
   const onMove = (e: ReactPointerEvent<HTMLDivElement>) => {
-    if (drag.current) setDy(Math.max(0, e.clientY - drag.current.y0));
+    const d = drag.current;
+    if (!d || !sheet.current) return;
+    const raw = e.clientY - d.y0;
+    const dy = raw < 0 ? raw * OVERSHOOT : raw;
+    sheet.current.style.transform = `translateY(${dy}px)`;
   };
   const onUp = (e: ReactPointerEvent<HTMLDivElement>) => {
     const d = drag.current;
     drag.current = null;
     if (!d) return;
-    const dist = Math.max(0, e.clientY - d.y0);
+    const dist = e.clientY - d.y0;
     const speed = dist / Math.max(1, performance.now() - d.t0);
-    const height = sheet.current?.offsetHeight ?? 0;
-    const limit = height > 0 ? Math.min(CLOSE_MAX, height * CLOSE_SHARE) : CLOSE_MAX;
-    setSettling(true);
-    if (dist > limit || (dist > 8 && speed > FLICK)) setOpen(false);
-    else setDy(0);
+    const h = height();
+    const limit = h > 0 ? Math.min(CLOSE_MAX, h * CLOSE_SHARE) : CLOSE_MAX;
+    const down = dist > limit || (dist > 8 && speed > FLICK);
+    if (down && detents === 'two' && full) {
+      setFull(false);
+      settle();
+    } else if (down) {
+      setOpen(false);
+    } else {
+      if (detents === 'two' && !full && (dist < -24 || speed < -FLICK)) setFull(true);
+      settle();
+    }
   };
 
+  const two = detents === 'two';
   return (
-    <DialogPrimitive.Root open={open} onOpenChange={setOpen}>
+    // Open while shown, leaving included; the trigger stays the same element throughout
+    <DialogPrimitive.Root open={mounted} onOpenChange={(o) => (o ? setOpen(true) : open && setOpen(false))}>
       {trigger && <DialogPrimitive.Trigger asChild>{trigger}</DialogPrimitive.Trigger>}
+      {mounted && (
       <DialogPrimitive.Portal>
-        <DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-scrim" />
+        <DialogPrimitive.Overlay ref={scrim} className="cosx-sheet-scrim fixed inset-0 z-50 bg-scrim" />
         <DialogPrimitive.Content
-          ref={sheet}
+          ref={setSheet}
           {...(description ? {} : { 'aria-describedby': undefined })}
           onOpenAutoFocus={(e) => {
             onOpenAutoFocus?.(e);
             if (e.defaultPrevented) return;
             // The sheet itself takes focus (read out by its title), not the first row.
             e.preventDefault();
-            const el = e.currentTarget as HTMLElement | null;
-            el?.focus();
-            if (!reduce && el && typeof el.animate === 'function') {
-              el.animate([{ transform: 'translateY(100%)' }, { transform: 'translateY(0)' }], { duration: 240, easing: 'cubic-bezier(.16,1,.3,1)' });
-            }
+            (e.currentTarget as HTMLElement | null)?.focus();
+          }}
+          // Typing lifts a two-height sheet to full (the keyboard needs the room)
+          onFocusCapture={(e) => {
+            onFocusCapture?.(e);
+            if (two && (e.target as HTMLElement).matches('input, textarea')) setFull(true);
           }}
           className={cn(
-            'fixed inset-x-0 bottom-0 z-50 flex max-h-[90dvh] flex-col rounded-t-[20px] bg-page px-4 pt-2 font-sans text-fg outline-none',
-            settling && !reduce && 'transition-transform duration-200 ease-out',
+            'fixed inset-x-0 bottom-0 z-50 flex flex-col rounded-t-[20px] bg-page px-4 pt-2 font-sans text-fg outline-none',
+            two ? 'transition-[height] duration-300 ease-[cubic-bezier(.2,0,0,1)]' : 'max-h-[90dvh]',
             className,
           )}
           style={{
-            paddingBottom: 'max(30px, calc(env(safe-area-inset-bottom, 0px) + 12px))',
-            ...(dy ? { transform: `translateY(${dy}px)` } : {}),
+            paddingBottom: footer ? 'max(16px, calc(env(safe-area-inset-bottom, 0px) + 8px))' : 'max(30px, calc(env(safe-area-inset-bottom, 0px) + 12px))',
+            ...(two ? { height: full ? 'calc(100dvh - env(safe-area-inset-top, 0px) - 8px)' : `${HALF * 100}dvh` } : {}),
             ...style,
           }}
           {...rest}
@@ -134,18 +225,29 @@ export function BottomSheet({
             onPointerUp={onUp}
             onPointerCancel={() => {
               drag.current = null;
-              setSettling(true);
-              setDy(0);
+              settle();
             }}
           >
             <span aria-hidden className="mb-2.5 h-1 w-9 self-center rounded-pill bg-rule" />
-            <DialogPrimitive.Title className={cn('m-0 px-1 pb-2 text-[17px] leading-[1.3] font-medium', hideTitle && 'sr-only')}>{title}</DialogPrimitive.Title>
+            <div className="flex items-center gap-3">
+              <DialogPrimitive.Title className={cn('m-0 min-w-0 flex-1 truncate px-1 pb-2 text-[17px] leading-[1.3] font-medium', hideTitle && 'sr-only')}>{title}</DialogPrimitive.Title>
+              {action && <div className="shrink-0 pb-2">{action}</div>}
+            </div>
             {description && <DialogPrimitive.Description className="m-0 px-1 pb-2 text-small text-fg-secondary">{description}</DialogPrimitive.Description>}
           </div>
-          <div className="flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto">{children}</div>
+          <div
+            className={cn('flex min-h-0 flex-1 flex-col gap-0.5', two && !full ? 'overflow-hidden' : 'overflow-y-auto overscroll-contain')}
+            // At half height, a pull up on the list lifts the sheet first
+            onWheel={(e) => two && !full && e.deltaY > 0 && setFull(true)}
+            onTouchMove={() => two && !full && setFull(true)}
+          >
+            {children}
+          </div>
+          {footer && <div className="shrink-0 border-t border-rule-soft pt-2.5">{footer}</div>}
           <DialogPrimitive.Close className="sr-only">{closeLabel}</DialogPrimitive.Close>
         </DialogPrimitive.Content>
       </DialogPrimitive.Portal>
+      )}
     </DialogPrimitive.Root>
   );
 }

package/src/components.css

@@ -0,0 +1,10 @@
+/* Component motion that has to be CSS (listeners hear animationstart):
+   BottomSheet's scrim fades in with the sheet (280ms) and out as it
+   leaves (220ms, data-leaving) — Motion & Native Feel §04. */
+@keyframes cosx-sheet-scrim-in { from { opacity: 0; } }
+@keyframes cosx-sheet-scrim-out { to { opacity: 0; } }
+.cosx-sheet-scrim { animation: cosx-sheet-scrim-in 280ms cubic-bezier(.16,1,.3,1); }
+.cosx-sheet-scrim[data-leaving] { animation: cosx-sheet-scrim-out 220ms cubic-bezier(.4,0,1,1) forwards; }
+@media (prefers-reduced-motion: reduce) {
+  .cosx-sheet-scrim, .cosx-sheet-scrim[data-leaving] { animation: none; }
+}

package/src/styles.css

@@ -17,3 +17,4 @@
 @import "./brand.css";
 @import "./modes.css";
 @import "./fonts.css";
+@import "./components.css";