@syscore/ui-library 1.17.0 → 1.18.0

package/client/components/ui/mobile-nav.tsx

@@ -4,11 +4,12 @@ import {
   useCallback,
   useMemo,
   useEffect,
+  useLayoutEffect,
   ReactNode,
   createContext,
   useContext,
 } from "react";
-import { motion, useMotionValue, animate, type PanInfo } from "motion/react";
+import { motion, useMotionValue, animate } from "motion/react";
 import { cn } from "@/lib/utils";
 
 interface MobileNavContextValue {
@@ -99,10 +100,8 @@ const MobileNavPanel = ({ className, children }: MobileNavPanelProps) => {
   const heightMV = useMotionValue(0);
   const stopAnimation = useRef<(() => void) | null>(null);
 
-  // Track which state the panel is in: "closed" | "initial" | "full"
+  // Panel state: "closed" | "initial" | "full"
   const stateRef = useRef<"closed" | "initial" | "full">("closed");
-
-  // Cache the initial content height so returning from full → initial is consistent
   const cachedInitialHeight = useRef(0);
 
   const getNavBarHeight = () => {
@@ -111,15 +110,12 @@ const MobileNavPanel = ({ className, children }: MobileNavPanelProps) => {
   };
 
   const getAvailableHeight = () => {
-    const parent = panelRef.current?.parentElement;
-    const container = parent?.clientHeight ?? window.innerHeight;
-    return container - getNavBarHeight();
+    return window.innerHeight - getNavBarHeight();
   };
 
   const measureContentHeight = () => {
     const content = contentRef.current;
     if (!content) return 0;
-    // Measure the first child to get true content height without triggering reflow
     const child = content.firstElementChild as HTMLElement | null;
     const raw = (child?.offsetHeight ?? content.scrollHeight) + 40; // +40 for handle area
     const max = getAvailableHeight() * 0.7;
@@ -136,78 +132,111 @@ const MobileNavPanel = ({ className, children }: MobileNavPanelProps) => {
   };
 
   // Animate open/close
-  useEffect(() => {
-    let cancelled = false;
+  useLayoutEffect(() => {
     if (open) {
       stateRef.current = "initial";
-      requestAnimationFrame(() => {
-        if (cancelled) return;
-        const h = measureContentHeight();
-        cachedInitialHeight.current = h;
-        springTo(h);
-      });
+      const h = measureContentHeight();
+      cachedInitialHeight.current = h;
+      springTo(h);
     } else {
       stateRef.current = "closed";
       cachedInitialHeight.current = 0;
       springTo(0);
     }
-    return () => {
-      cancelled = true;
-    };
   }, [open]);
 
-  // Re-measure when content changes (e.g. switching tabs)
-  useEffect(() => {
+  // Re-measure when switching tabs while panel is already open
+  useLayoutEffect(() => {
     if (!open) return;
-    let cancelled = false;
-    // Double rAF ensures new children have rendered before measuring
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        if (cancelled) return;
-        const h = measureContentHeight();
-        cachedInitialHeight.current = h;
-        if (stateRef.current === "initial" || stateRef.current === "closed") {
-          stateRef.current = "initial";
-          springTo(h);
-        }
-      });
-    });
-    return () => {
-      cancelled = true;
-    };
+    const h = measureContentHeight();
+    cachedInitialHeight.current = h;
+    if (stateRef.current !== "full") {
+      stateRef.current = "initial";
+      springTo(h);
+    }
   }, [activeKey]);
 
-  // Track drag direction via ref for reliable gesture detection
-  const dragDirection = useRef<"up" | "down" | null>(null);
-
-  const handlePanStart = () => {
-    dragDirection.current = null;
+  // Close on Escape key
+  useEffect(() => {
+    if (!open) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") close();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open, close]);
+
+  // --- Pointer-based drag (bypasses motion's gesture detection) ---
+  const isDragging = useRef(false);
+  const lastY = useRef(0);
+  const dragStartY = useRef(0);
+  const dragStartTime = useRef(0);
+  const dragMaxHeight = useRef(0);
+
+  const handlePointerDown = (e: React.PointerEvent) => {
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+    stopAnimation.current?.();
+    isDragging.current = true;
+    lastY.current = e.clientY;
+    dragStartY.current = e.clientY;
+    dragStartTime.current = Date.now();
+    dragMaxHeight.current = getAvailableHeight();
   };
 
-  const handlePan = (_: unknown, info: PanInfo) => {
-    // Continuously track the latest direction during drag
-    dragDirection.current = info.offset.y < 0 ? "up" : "down";
+  const handlePointerMove = (e: React.PointerEvent) => {
+    if (!isDragging.current) return;
+    const dy = e.clientY - lastY.current;
+    lastY.current = e.clientY;
+    const current = heightMV.get();
+    const next = Math.max(0, current - dy);
+    heightMV.set(Math.min(next, dragMaxHeight.current));
   };
 
-  const handlePanEnd = () => {
-    const dir = dragDirection.current;
-    if (!dir) return;
+  const handlePointerUp = (e: React.PointerEvent) => {
+    if (!isDragging.current) return;
+    isDragging.current = false;
 
-    if (dir === "up") {
-      if (stateRef.current === "initial") {
-        stateRef.current = "full";
-        springTo(getAvailableHeight());
-      }
-    } else {
-      // dir === "down"
+    const currentHeight = heightMV.get();
+    const initial = cachedInitialHeight.current;
+    const full = dragMaxHeight.current;
+
+    // Calculate velocity (px/s) — positive = downward
+    const elapsed = Date.now() - dragStartTime.current;
+    const totalDy = e.clientY - dragStartY.current;
+    const velocity = elapsed > 0 ? (totalDy / elapsed) * 1000 : 0;
+
+    const VELOCITY_THRESHOLD = 500;
+
+    if (velocity > VELOCITY_THRESHOLD) {
+      // Fast downward flick
       if (stateRef.current === "full") {
         stateRef.current = "initial";
-        springTo(cachedInitialHeight.current);
-      } else if (stateRef.current === "initial") {
+        springTo(initial);
+      } else {
         stateRef.current = "closed";
         springTo(0);
         close();
       }
+    } else if (velocity < -VELOCITY_THRESHOLD) {
+      // Fast upward flick
+      stateRef.current = "full";
+      springTo(full);
+    } else {
+      // Slow drag — snap to nearest
+      const midInitial = initial / 2;
+      const midFull = (initial + full) / 2;
+
+      if (currentHeight < midInitial) {
+        stateRef.current = "closed";
+        springTo(0);
+        close();
+      } else if (currentHeight < midFull) {
+        stateRef.current = "initial";
+        springTo(initial);
+      } else {
+        stateRef.current = "full";
+        springTo(full);
+      }
     }
   };
 
@@ -222,14 +251,15 @@ const MobileNavPanel = ({ className, children }: MobileNavPanelProps) => {
         data-closed={!open || undefined}
         style={{ height: heightMV }}
       >
-        <motion.div
+        <div
           className="mobile-nav-handle"
-          onPanStart={handlePanStart}
-          onPan={handlePan}
-          onPanEnd={handlePanEnd}
+          onPointerDown={handlePointerDown}
+          onPointerMove={handlePointerMove}
+          onPointerUp={handlePointerUp}
+          onPointerCancel={handlePointerUp}
         >
           <div className="mobile-nav-handle-bar" />
-        </motion.div>
+        </div>
 
         <div ref={contentRef} className="mobile-nav-content">
           {activeKey ? children(activeKey) : null}
@@ -269,6 +299,7 @@ const MobileNavTrigger = ({
       onClick={handleClick}
       disabled={disabled}
       data-active={activeKey === value || undefined}
+      aria-expanded={activeKey === value && open}
       className={cn("mobile-nav-trigger group", className)}
       aria-label={label}
     >

package/client/global.css

@@ -3852,21 +3852,25 @@ body {
 
 /* MobileNav Styles */
 .mobile-nav {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 50;
   display: flex;
   flex-direction: column;
-  position: relative;
 }
 
 .mobile-nav-overlay {
-  position: absolute;
+  position: fixed;
   inset: 0;
   background-color: rgba(0, 0, 0, 0.08);
-  z-index: 10;
+  z-index: 40;
 }
 
 .mobile-nav-panel {
   position: relative;
-  z-index: 20;
+  z-index: 50;
   background-color: white;
   border-radius: 32px 32px 0 0;
   box-shadow:
@@ -3906,7 +3910,7 @@ body {
 
 .mobile-nav-bar {
   position: relative;
-  z-index: 20;
+  z-index: 50;
   border-top: 1px solid var(--color-gray-100);
   background-color: var(--color-gray-50);
   flex-shrink: 0;
@@ -3920,7 +3924,7 @@ body {
   align-items: center;
   justify-content: space-around;
   padding-top: 0.5rem;
-  padding-bottom: 2rem;
+  padding-bottom: 0.5rem;
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 }
@@ -6992,6 +6996,38 @@ body {
   text-underline-offset: 2px;
 }
 
+/* Responsive Typography - Mobile */
+@media (max-width: 640px) {
+  .heading-xlarge {
+    font-size: 36px;
+    line-height: 40px;
+  }
+  .heading-large {
+    font-size: 28px;
+    line-height: 32px;
+  }
+  .heading-medium {
+    font-size: 26px;
+    line-height: 30px;
+  }
+  .heading-small {
+    font-size: 24px;
+    line-height: 28px;
+  }
+  .heading-xsmall {
+    font-size: 20px;
+    line-height: 24px;
+  }
+  .heading-xxsmall {
+    font-size: 18px;
+    line-height: 22px;
+  }
+  .body-large {
+    font-size: 16px;
+    line-height: 22.4px;
+  }
+}
+
 /* Standard Table Styles */
 .standard-table {
   border: 1px solid var(--color-blue-200, #cbe0f1);
@@ -7105,6 +7141,14 @@ body {
   gap: 1rem;
 }
 
+@media (max-width: 640px) {
+  .standard-table-row-header,
+  .standard-table-list-row {
+    height: auto;
+    min-height: 5rem;
+  }
+}
+
 /* PageHeader Styles */
 .page-header {
   margin-bottom: 1.5rem;
@@ -7142,6 +7186,12 @@ body {
   padding-right: 10rem;
 }
 
+@media (max-width: 640px) {
+  .page-header-description {
+    padding-right: 0;
+  }
+}
+
 /* Navigation Styles */
 .navigation {
   position: absolute;

package/client/ui/MobileNav.stories.tsx

@@ -17,6 +17,7 @@ import { UtilityText } from "../components/icons/UtilityText";
 import { UtilityCompare } from "../components/icons/UtilityCompare";
 import { UtilityRevisionsShow } from "../components/icons/UtilityRevisionsShow";
 import { UtilityFeedback } from "../components/icons/UtilityFeedback";
+import { Button } from "@/components/ui/button";
 
 const meta = {
   title: "Review/MobileNav",
@@ -24,6 +25,9 @@ const meta = {
   tags: ["autodocs"],
   parameters: {
     layout: "fullscreen",
+    viewport: {
+      defaultViewport: "mobile1",
+    },
     docs: {
       description: {
         component: `
@@ -41,20 +45,26 @@ Mobile navigation with a spring-animated slide-up panel. Built as a **compound c
 ## Basic Usage
 
 \`\`\`tsx
-<MobileNav className="h-screen">
-  <MobileNavPanel>
-    {(activeKey) => <MyContent tab={activeKey} />}
-  </MobileNavPanel>
-
-  <MobileNavBar>
-    <MobileNavTrigger value="home" label="Home">
-      <HomeIcon className="size-6" />
-    </MobileNavTrigger>
-    <MobileNavTrigger value="search" label="Search">
-      <SearchIcon className="size-6" />
-    </MobileNavTrigger>
-  </MobileNavBar>
-</MobileNav>
+<section>
+  {/* Your page content */}
+  <MyPageContent />
+
+  {/* Fixed bottom nav */}
+  <MobileNav>
+    <MobileNavPanel>
+      {(activeKey) => <MyContent tab={activeKey} />}
+    </MobileNavPanel>
+
+    <MobileNavBar>
+      <MobileNavTrigger value="home" label="Home">
+        <HomeIcon className="size-6" />
+      </MobileNavTrigger>
+      <MobileNavTrigger value="search" label="Search">
+        <SearchIcon className="size-6" />
+      </MobileNavTrigger>
+    </MobileNavBar>
+  </MobileNav>
+</section>
 \`\`\`
 
 ## Styling Active State
@@ -224,35 +234,43 @@ export const Default: Story = {
   args: { children: null },
 
   render: () => (
-    <MobileNav className="h-screen w-full bg-gray-50">
+    <div className="h-screen w-full bg-white">
       {/* Main content area */}
-      <div className="flex-1 p-6 overflow-y-auto">
+      <div className="p-6">
         <p className="text-sm text-gray-400">
           Tap an icon below to open the panel.
         </p>
+        <Button
+          size="large"
+          variant="general-primary"
+          onClick={() => alert("Hello")}
+        >
+          Open panel
+        </Button>
       </div>
 
-      {/* Panel slides up above the nav */}
-      <MobileNavPanel>
-        {(activeKey) => <PanelContent activeKey={activeKey} />}
-      </MobileNavPanel>
-
-      {/* Nav — always visible */}
-      <MobileNavBar>
-        <MobileNavTrigger value="list" label="Changes">
-          <UtilityText className="size-6 text-gray-500 group-data-active:text-gray-900" />
-        </MobileNavTrigger>
-        <MobileNavTrigger value="workflow" label="Workflow">
-          <UtilityCompare className="size-6 text-gray-500 group-data-active:text-gray-900" />
-        </MobileNavTrigger>
-        <MobileNavTrigger value="edit" label="Edits">
-          <UtilityRevisionsShow className="size-6 text-gray-500 group-data-active:text-gray-900" />
-        </MobileNavTrigger>
-        <MobileNavTrigger value="comments" label="Comments">
-          <UtilityFeedback className="size-6 text-gray-500 group-data-active:text-gray-900" />
-        </MobileNavTrigger>
-      </MobileNavBar>
-    </MobileNav>
+      {/* Fixed bottom nav */}
+      <MobileNav>
+        <MobileNavPanel>
+          {(activeKey) => <PanelContent activeKey={activeKey} />}
+        </MobileNavPanel>
+
+        <MobileNavBar>
+          <MobileNavTrigger value="list" label="Changes">
+            <UtilityText className="size-6 text-gray-500 group-data-active:text-gray-900" />
+          </MobileNavTrigger>
+          <MobileNavTrigger value="workflow" label="Workflow">
+            <UtilityCompare className="size-6 text-gray-500 group-data-active:text-gray-900" />
+          </MobileNavTrigger>
+          <MobileNavTrigger value="edit" label="Edits">
+            <UtilityRevisionsShow className="size-6 text-gray-500 group-data-active:text-gray-900" />
+          </MobileNavTrigger>
+          <MobileNavTrigger value="comments" label="Comments">
+            <UtilityFeedback className="size-6 text-gray-500 group-data-active:text-gray-900" />
+          </MobileNavTrigger>
+        </MobileNavBar>
+      </MobileNav>
+    </div>
   ),
 };
 
@@ -260,38 +278,40 @@ const WithCustomActionRender = () => {
   const [modalOpen, setModalOpen] = useState(false);
 
   return (
-    <MobileNav className="relative h-screen w-full bg-gray-50">
-      <div className="flex-1 p-6 overflow-y-auto">
+    <div className="relative h-screen w-full bg-white">
+      <div className="p-6">
         <p className="text-sm text-gray-400">
           The &ldquo;Edits&rdquo; trigger opens a modal instead of the panel.
         </p>
       </div>
 
-      <MobileNavPanel>
-        {(activeKey) => <PanelContent activeKey={activeKey} />}
-      </MobileNavPanel>
-
-      <MobileNavBar>
-        <MobileNavTrigger value="list" label="Changes">
-          <UtilityText className="size-6 text-gray-500 group-data-active:text-gray-900" />
-        </MobileNavTrigger>
-        <MobileNavTrigger value="workflow" label="Workflow">
-          <UtilityCompare className="size-8 text-gray-500 group-data-active:text-gray-900" />
-        </MobileNavTrigger>
-        <MobileNavTrigger
-          value="edit"
-          label="Edits"
-          onAction={() => setModalOpen(true)}
-        >
-          <UtilityRevisionsShow className="size-6 text-gray-500" />
-        </MobileNavTrigger>
-        <MobileNavTrigger value="comments" label="Comments">
-          <UtilityFeedback className="size-6 text-gray-500 group-data-active:text-gray-900" />
-        </MobileNavTrigger>
-      </MobileNavBar>
+      <MobileNav>
+        <MobileNavPanel>
+          {(activeKey) => <PanelContent activeKey={activeKey} />}
+        </MobileNavPanel>
+
+        <MobileNavBar>
+          <MobileNavTrigger value="list" label="Changes">
+            <UtilityText className="size-6 text-gray-500 group-data-active:text-gray-900" />
+          </MobileNavTrigger>
+          <MobileNavTrigger value="workflow" label="Workflow">
+            <UtilityCompare className="size-8 text-gray-500 group-data-active:text-gray-900" />
+          </MobileNavTrigger>
+          <MobileNavTrigger
+            value="edit"
+            label="Edits"
+            onAction={() => setModalOpen(true)}
+          >
+            <UtilityRevisionsShow className="size-6 text-gray-500" />
+          </MobileNavTrigger>
+          <MobileNavTrigger value="comments" label="Comments">
+            <UtilityFeedback className="size-6 text-gray-500 group-data-active:text-gray-900" />
+          </MobileNavTrigger>
+        </MobileNavBar>
+      </MobileNav>
 
       {modalOpen && (
-        <div className="absolute inset-0 z-50 flex items-center justify-center bg-black/20">
+        <div className="fixed inset-0 z-60 flex items-center justify-center bg-black/20">
           <div className="relative rounded-xl bg-white p-6 shadow-lg w-72">
             <button
               onClick={() => setModalOpen(false)}
@@ -307,7 +327,7 @@ const WithCustomActionRender = () => {
           </div>
         </div>
       )}
-    </MobileNav>
+    </div>
   );
 };
 
@@ -320,32 +340,34 @@ export const WithDisabledTrigger: Story = {
   args: { children: null },
 
   render: () => (
-    <MobileNav className="h-screen w-full bg-gray-50">
-      <div className="flex-1 p-6 overflow-y-auto">
+    <div className="h-screen w-full bg-white">
+      <div className="p-6">
         <p className="text-sm text-gray-400">
           The &ldquo;Comments&rdquo; trigger is disabled because there are no
           comments.
         </p>
       </div>
 
-      <MobileNavPanel>
-        {(activeKey) => <PanelContent activeKey={activeKey} />}
-      </MobileNavPanel>
-
-      <MobileNavBar>
-        <MobileNavTrigger value="list" label="Changes">
-          <UtilityText className="size-6 text-gray-500 group-data-active:text-gray-900" />
-        </MobileNavTrigger>
-        <MobileNavTrigger value="workflow" label="Workflow">
-          <UtilityCompare className="size-6 text-gray-500 group-data-active:text-gray-900" />
-        </MobileNavTrigger>
-        <MobileNavTrigger value="edit" label="Edits">
-          <UtilityRevisionsShow className="size-6 text-gray-500 group-data-active:text-gray-900" />
-        </MobileNavTrigger>
-        <MobileNavTrigger value="comments" label="Comments" disabled>
-          <UtilityFeedback className="size-6 text-gray-500 group-data-active:text-gray-900" />
-        </MobileNavTrigger>
-      </MobileNavBar>
-    </MobileNav>
+      <MobileNav>
+        <MobileNavPanel>
+          {(activeKey) => <PanelContent activeKey={activeKey} />}
+        </MobileNavPanel>
+
+        <MobileNavBar>
+          <MobileNavTrigger value="list" label="Changes">
+            <UtilityText className="size-6 text-gray-500 group-data-active:text-gray-900" />
+          </MobileNavTrigger>
+          <MobileNavTrigger value="workflow" label="Workflow">
+            <UtilityCompare className="size-6 text-gray-500 group-data-active:text-gray-900" />
+          </MobileNavTrigger>
+          <MobileNavTrigger value="edit" label="Edits">
+            <UtilityRevisionsShow className="size-6 text-gray-500 group-data-active:text-gray-900" />
+          </MobileNavTrigger>
+          <MobileNavTrigger value="comments" label="Comments" disabled>
+            <UtilityFeedback className="size-6 text-gray-500 group-data-active:text-gray-900" />
+          </MobileNavTrigger>
+        </MobileNavBar>
+      </MobileNav>
+    </div>
   ),
 };