@multiplatform.one/components 6.7.0 → 7.0.0

package/src/layouts/PaneScaffold.tsx

@@ -4,6 +4,11 @@
  * Devs declare pane roles; the scaffold picks 1 vs 2 columns from the
  * canonical layout size class (`expanded` @ 860 = FloatingPanel pivot).
  *
+ * Split geometry follows Linear / VS Code / Polaris Frame: flush panes, a
+ * device-pixel hairline at the seam (Axiom 15), and an optional sash
+ * (APG window splitter) instead of a semantic gap. `paneGap` ejects to
+ * gapped columns (Polaris Layout).
+ *
  * - **List-detail**: secondary (detail) is meaningful on its own.
  * - **Supporting-pane**: secondary is meaningful only relative to primary.
  * - **Feed**: equal-weight cards in a responsive grid.
@@ -13,16 +18,30 @@
 
 import {
   defaultMaxPanes,
+  ensureFocusVisibleRing,
+  ensureKeyboardModalityTracking,
+  hairline,
+  hairlineWidth,
+  pressTargetHitSlop,
   readingWidthStyle,
   useLayoutSizeClass,
   useMultiPane,
   useSemanticGaps,
+  wasKeyboardFocus,
   type LayoutSizeClass,
   READING_WIDTH_CH,
 } from "@multiplatform.one/theme";
-import { Children, type ReactNode } from "react";
+import { Children, useCallback, useEffect, useId, useRef, useState, type ReactNode } from "react";
 import type { XStackProps, YStackProps } from "tamagui";
-import { XStack, YStack } from "tamagui";
+import { isWeb, XStack, YStack } from "tamagui";
+import { useDirection } from "../hooks/useDirection";
+
+/** Visual sash hit (VS Code sash.size ≈ 4–8). Native expands to 44 via hitSlop. */
+const SASH_VISUAL = 8;
+const FRACTION_STEP = 0.02;
+const FRACTION_STEP_LARGE = 0.1;
+const DEFAULT_MIN_FRACTION = 0.2;
+const DEFAULT_MAX_FRACTION = 0.8;
 
 // ── PaneScaffold ──────────────────────────────────────────────────────────
 
@@ -40,11 +59,25 @@ export interface PaneScaffoldProps extends Omit<XStackProps, "children"> {
   maxPanes?: 1 | 2;
   /**
    * Flex grow for primary : secondary when side-by-side.
-   * List-detail defaults to `[1, 1]`; supporting-pane to `[2, 1]`.
+   * List-detail defaults to `[1, 2]`; supporting-pane to `[2, 1]`.
    */
   paneFlex?: [number, number];
-  /** Gap between panes — defaults to semantic `betweenGroups` (gapLg). */
+  /**
+   * Gap between panes. Default: none — a hairline sash (Linear / VS Code /
+   * Polaris Frame). Pass a gap to eject to spaced columns (Polaris Layout).
+   */
   paneGap?: XStackProps["gap"];
+  /**
+   * Drag-to-resize like VS Code / Linear. Default `true` when two panes and
+   * `paneGap` is unset. Keyboard: arrows / Home / End; double-press resets.
+   */
+  resizable?: boolean;
+  /** Clamp for the primary share (0–1). Default 0.2–0.8. */
+  minPaneFraction?: number;
+  maxPaneFraction?: number;
+  /** Controlled primary share (0–1). Omit for uncontrolled (from `paneFlex`). */
+  primaryFraction?: number;
+  onPrimaryFractionChange?: (fraction: number) => void;
   /** Optional size-class override (tests / Storybook viewports). */
   sizeClass?: LayoutSizeClass;
 }
@@ -60,6 +93,11 @@ export function PaneScaffold({
   maxPanes: maxPanesProp,
   paneFlex = [1, 1],
   paneGap,
+  resizable: resizableProp,
+  minPaneFraction = DEFAULT_MIN_FRACTION,
+  maxPaneFraction = DEFAULT_MAX_FRACTION,
+  primaryFraction: primaryFractionProp,
+  onPrimaryFractionChange,
   sizeClass: sizeClassProp,
   ...rest
 }: PaneScaffoldProps) {
@@ -69,8 +107,9 @@ export function PaneScaffold({
   const budget = maxPanesProp ?? defaultMaxPanes(sizeClass);
   const hasSecondary = secondary !== null && secondary !== undefined;
   const multi = budget >= 2 && hasSecondary;
-  const gaps = useSemanticGaps();
-  const gap = paneGap ?? gaps.betweenGroups.gap;
+  const gapped = paneGap !== undefined;
+  const gap = gapped ? paneGap : undefined;
+  const resizable = (resizableProp ?? !gapped) && multi && !gapped;
 
   // flexBasis auto, not the flex:1 shorthand's 0%: react-native-web resets
   // min-height to 0, so a 0% basis contributes zero intrinsic height inside
@@ -104,17 +143,299 @@ export function PaneScaffold({
       flexShrink={1}
       flexBasis="auto"
       minWidth={0}
+      minHeight={0}
       width="100%"
-      gap={gap}
+      alignItems="stretch"
+      gap={gap ?? 0}
+      position="relative"
       data-testid="pane-scaffold"
       data-panes="2"
       data-size-class={sizeClass}
+      data-sash={resizable ? "true" : "false"}
       {...rest}
     >
-      <YStack flex={primaryFlex} minWidth={0} data-testid="pane-primary">
+      {resizable ? (
+        <ResizablePanes
+          primary={primary}
+          secondary={secondary}
+          primaryFlex={primaryFlex}
+          secondaryFlex={secondaryFlex}
+          minFraction={minPaneFraction}
+          maxFraction={maxPaneFraction}
+          fraction={primaryFractionProp}
+          onFractionChange={onPrimaryFractionChange}
+        />
+      ) : (
+        <>
+          <YStack
+            flex={primaryFlex}
+            minWidth={0}
+            minHeight={0}
+            {...(gapped ? undefined : paneHairlineEnd)}
+            data-testid="pane-primary"
+          >
+            {primary}
+          </YStack>
+          <YStack flex={secondaryFlex} minWidth={0} minHeight={0} data-testid="pane-secondary">
+            {secondary}
+          </YStack>
+        </>
+      )}
+    </XStack>
+  );
+}
+
+const paneHairlineEnd = isWeb
+  ? {
+      borderInlineEndWidth: hairlineWidth,
+      borderInlineEndStyle: "solid" as const,
+      borderColor: "$borderColor",
+      className: "mp-hairline-ie",
+    }
+  : { borderEndWidth: hairlineWidth, borderColor: "$borderColor" };
+
+function clampFraction(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+function ResizablePanes({
+  primary,
+  secondary,
+  primaryFlex,
+  secondaryFlex,
+  minFraction,
+  maxFraction,
+  fraction: fractionProp,
+  onFractionChange,
+}: {
+  primary: ReactNode;
+  secondary: ReactNode;
+  primaryFlex: number;
+  secondaryFlex: number;
+  minFraction: number;
+  maxFraction: number;
+  fraction?: number;
+  onFractionChange?: (fraction: number) => void;
+}) {
+  const sashId = useId();
+  const rtl = useDirection() === "rtl";
+  const dirSign = rtl ? -1 : 1;
+  const defaultFraction = primaryFlex / Math.max(primaryFlex + secondaryFlex, 1);
+  const [uncontrolled, setUncontrolled] = useState(defaultFraction);
+  const fraction = clampFraction(fractionProp ?? uncontrolled, minFraction, maxFraction);
+  const [hot, setHot] = useState(false);
+  const [kbFocus, setKbFocus] = useState(false);
+  const [dragging, setDragging] = useState(false);
+  const widthRef = useRef(0);
+  const rowRef = useRef<any>(null);
+  const dragRef = useRef<{ startX: number; startFraction: number; moved: boolean } | null>(null);
+  const lastTapRef = useRef(0);
+
+  const measureWidth = () => {
+    const node = rowRef.current;
+    const rect = node?.getBoundingClientRect?.();
+    if (rect?.width) widthRef.current = rect.width;
+  };
+
+  ensureKeyboardModalityTracking();
+
+  const commit = useCallback(
+    (next: number) => {
+      const clamped = clampFraction(next, minFraction, maxFraction);
+      if (fractionProp === undefined) setUncontrolled(clamped);
+      onFractionChange?.(clamped);
+    },
+    [fractionProp, minFraction, maxFraction, onFractionChange],
+  );
+
+  const reset = useCallback(() => commit(defaultFraction), [commit, defaultFraction]);
+
+  const finishDrag = useCallback(() => {
+    const session = dragRef.current;
+    dragRef.current = null;
+    setDragging(false);
+    setHot(false);
+    if (session && !session.moved) {
+      const now = Date.now();
+      if (now - lastTapRef.current < 400) reset();
+      lastTapRef.current = now;
+    }
+  }, [reset]);
+
+  useEffect(() => {
+    if (!isWeb || !dragging || typeof window === "undefined") return;
+    const prevUserSelect = document.body.style.userSelect;
+    const prevCursor = document.documentElement.style.cursor;
+    document.body.style.userSelect = "none";
+    document.documentElement.style.cursor = "col-resize";
+
+    const onMove = (e: PointerEvent) => {
+      const session = dragRef.current;
+      let width = widthRef.current;
+      if (width <= 0) {
+        const rect = rowRef.current?.getBoundingClientRect?.();
+        if (rect?.width) {
+          width = rect.width;
+          widthRef.current = width;
+        }
+      }
+      if (!session || width <= 0) return;
+      const dx = (e.clientX - session.startX) * dirSign;
+      if (Math.abs(dx) > 2) session.moved = true;
+      commit(session.startFraction + dx / width);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", finishDrag);
+    window.addEventListener("pointercancel", finishDrag);
+    return () => {
+      document.body.style.userSelect = prevUserSelect;
+      document.documentElement.style.cursor = prevCursor;
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", finishDrag);
+      window.removeEventListener("pointercancel", finishDrag);
+    };
+  }, [commit, dirSign, dragging, finishDrag]);
+
+  const onSashPointerDown = (e: any) => {
+    if (e.button != null && e.button !== 0) return;
+    e.preventDefault?.();
+    e.stopPropagation?.();
+    try {
+      e.currentTarget?.setPointerCapture?.(e.pointerId);
+    } catch {
+      /* native / no capture */
+    }
+    measureWidth();
+    dragRef.current = {
+      startX: e.clientX ?? e.nativeEvent?.pageX ?? 0,
+      startFraction: fraction,
+      moved: false,
+    };
+    setDragging(true);
+    setHot(true);
+  };
+
+  const onSashPointerMove = (e: any) => {
+    if (!dragRef.current || isWeb) return;
+    const width = widthRef.current;
+    if (width <= 0) return;
+    const x = e.clientX ?? e.nativeEvent?.pageX ?? 0;
+    const dx = (x - dragRef.current.startX) * dirSign;
+    if (Math.abs(dx) > 2) dragRef.current.moved = true;
+    commit(dragRef.current.startFraction + dx / width);
+  };
+
+  const onSashKeyDown = (e: any) => {
+    const key = e.key as string;
+    const step = e.shiftKey ? FRACTION_STEP_LARGE : FRACTION_STEP;
+    if (key === "ArrowLeft") {
+      e.preventDefault?.();
+      commit(fraction - step * dirSign);
+    } else if (key === "ArrowRight") {
+      e.preventDefault?.();
+      commit(fraction + step * dirSign);
+    } else if (key === "Home") {
+      e.preventDefault?.();
+      commit(minFraction);
+    } else if (key === "End") {
+      e.preventDefault?.();
+      commit(maxFraction);
+    } else if (key === "Enter" || key === " ") {
+      e.preventDefault?.();
+      reset();
+    }
+  };
+
+  const percent = Math.round(fraction * 100);
+  const lineHot = hot || dragging || kbFocus;
+
+  return (
+    <XStack
+      ref={rowRef}
+      flexGrow={1}
+      flexShrink={1}
+      flexBasis="auto"
+      minWidth={0}
+      minHeight={0}
+      width="100%"
+      alignItems="stretch"
+      onLayout={(e) => {
+        widthRef.current = e.nativeEvent.layout.width;
+      }}
+    >
+      <YStack
+        flexGrow={fraction}
+        flexShrink={1}
+        flexBasis={0}
+        minWidth={0}
+        minHeight={0}
+        data-testid="pane-primary"
+      >
         {primary}
       </YStack>
-      <YStack flex={secondaryFlex} minWidth={0} data-testid="pane-secondary">
+      <YStack
+        width={hairlineWidth}
+        flexGrow={0}
+        flexShrink={0}
+        alignSelf="stretch"
+        position="relative"
+        zIndex={2}
+      >
+        <YStack
+          position="absolute"
+          top={0}
+          bottom={0}
+          width={SASH_VISUAL}
+          left={-(SASH_VISUAL - hairlineWidth) / 2}
+          alignItems="center"
+          cursor="col-resize"
+          userSelect="none"
+          tabIndex={0}
+          role="separator"
+          aria-orientation="vertical"
+          aria-controls={sashId}
+          aria-valuemin={Math.round(minFraction * 100)}
+          aria-valuemax={Math.round(maxFraction * 100)}
+          aria-valuenow={percent}
+          aria-label="Resize panes"
+          data-testid="pane-sash"
+          {...(!isWeb ? { hitSlop: pressTargetHitSlop(SASH_VISUAL) } : undefined)}
+          {...(kbFocus ? ensureFocusVisibleRing() : undefined)}
+          onPointerDown={onSashPointerDown}
+          onPointerMove={onSashPointerMove}
+          onPointerUp={isWeb ? undefined : finishDrag}
+          onPointerCancel={isWeb ? undefined : finishDrag}
+          // Tamagui forwards onHoverIn/onHoverOut at runtime; the RN-flavored
+          // View prop type omits them (house Record cast).
+          {...({
+            onHoverIn: () => setHot(true),
+            onHoverOut: () => {
+              if (!dragging) setHot(false);
+            },
+          } as Record<string, unknown>)}
+          onFocus={() => {
+            if (wasKeyboardFocus()) setKbFocus(true);
+          }}
+          onBlur={() => setKbFocus(false)}
+          onKeyDown={onSashKeyDown}
+        >
+          <YStack
+            flex={1}
+            width={lineHot ? 2 : hairlineWidth}
+            backgroundColor={lineHot ? "$accentBackground" : "$borderColor"}
+            {...(lineHot ? undefined : hairline.vline)}
+          />
+        </YStack>
+      </YStack>
+      <YStack
+        id={sashId}
+        flexGrow={1 - fraction}
+        flexShrink={1}
+        flexBasis={0}
+        minWidth={0}
+        minHeight={0}
+        data-testid="pane-secondary"
+      >
         {secondary}
       </YStack>
     </XStack>
@@ -135,7 +456,8 @@ export interface ListDetailLayoutProps extends Omit<
 
 /**
  * Canonical list-detail: explorative list + item detail. Detail remains
- * meaningful without the list (Material M-L4).
+ * meaningful without the list (Material M-L4). List is the narrower pane
+ * (Linear issue view / VS Code explorer), not a 50/50 split.
  */
 export function ListDetailLayout({
   list,
@@ -148,7 +470,7 @@ export function ListDetailLayout({
     <PaneScaffold
       primary={list}
       secondary={detail}
-      paneFlex={[1, 1]}
+      paneFlex={[1, 2]}
       activePane={activePane ?? (selected ? "secondary" : "primary")}
       data-canonical="list-detail"
       {...rest}
@@ -170,6 +492,7 @@ export interface SupportingPaneLayoutProps extends Omit<
 /**
  * Canonical supporting-pane: primary content + contextual support (~⅔ / ⅓).
  * Supporting content is only meaningful relative to primary (Material M-L4).
+ * Seam is a hairline (Polaris Frame navigation / Linear properties column).
  */
 export function SupportingPaneLayout({ children, supporting, ...rest }: SupportingPaneLayoutProps) {
   return (
@@ -193,7 +516,8 @@ export interface FeedLayoutProps extends YStackProps {
 
 /**
  * Canonical feed: equal-weight items in a responsive grid. Uses semantic
- * `betweenGroups` gap between cards.
+ * `betweenGroups` gap between cards. Web uses auto-fill tracks (Polaris
+ * card grid); native wraps at `minItemWidth`.
  */
 export function FeedLayout({ children, minItemWidth = 280, ...rest }: FeedLayoutProps) {
   const gaps = useSemanticGaps();
@@ -201,20 +525,32 @@ export function FeedLayout({ children, minItemWidth = 280, ...rest }: FeedLayout
 
   return (
     <YStack
-      flexDirection={multi ? "row" : "column"}
-      flexWrap={multi ? "wrap" : undefined}
+      flexDirection={multi && !isWeb ? "row" : "column"}
+      flexWrap={multi && !isWeb ? "wrap" : undefined}
       gap={gaps.betweenGroups.gap}
       data-testid="feed-layout"
       data-canonical="feed"
+      {...(isWeb && multi
+        ? {
+            style: {
+              display: "grid",
+              gridTemplateColumns: `repeat(auto-fill, minmax(${minItemWidth}px, 1fr))`,
+            },
+          }
+        : undefined)}
       {...rest}
     >
       {Children.map(children, (child, i) => (
         <YStack
           key={i}
-          flexGrow={1}
-          flexBasis={multi ? minItemWidth : undefined}
-          minWidth={multi ? minItemWidth : undefined}
-          maxWidth={multi ? "100%" : undefined}
+          {...(multi && !isWeb
+            ? {
+                flexGrow: 1,
+                flexBasis: minItemWidth,
+                minWidth: minItemWidth,
+                maxWidth: "100%",
+              }
+            : { minWidth: 0 })}
         >
           {child}
         </YStack>

package/src/layouts/ScreenToolbar.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 // Catalog Button (G-15 story honesty / LC-18): raw tamagui buttons pinned a
 // non-house radius and ignored every knob, poisoning the knob probes.
 import { Button } from "@multiplatform.one/forms";
+import { MIN_PRESS_TARGET } from "@multiplatform.one/theme";
 import { YStack } from "tamagui";
 import { ScreenToolbar } from "./page";
 
@@ -26,11 +27,18 @@ export const Default: Story = {
   name: "Main",
   render: () => (
     <ScreenToolbar
-      leading={<Button variant="outlined">Back</Button>}
+      minHeight={MIN_PRESS_TARGET}
+      leading={
+        <Button compact variant="outlined">
+          Back
+        </Button>
+      }
       trailing={
         <>
-          <Button variant="outlined">Cancel</Button>
-          <Button>Save</Button>
+          <Button compact variant="outlined">
+            Cancel
+          </Button>
+          <Button compact>Save</Button>
         </>
       }
     />
@@ -38,20 +46,24 @@ export const Default: Story = {
 };
 
 export const Empty: Story = {
-  render: () => <ScreenToolbar />,
+  render: () => <ScreenToolbar minHeight={MIN_PRESS_TARGET} />,
 };
 
 export const LeadingOnly: Story = {
-  render: () => <ScreenToolbar leading={<Button>Back</Button>} />,
+  render: () => (
+    <ScreenToolbar minHeight={MIN_PRESS_TARGET} leading={<Button compact>Back</Button>} />
+  ),
 };
 
 export const DisabledAndLoading: Story = {
   render: () => (
     <ScreenToolbar
+      minHeight={MIN_PRESS_TARGET}
       leading={
         // DG-ST-03: a disabled control explains itself; inline placement keeps
         // the toolbar row's shared control height.
         <Button
+          compact
           variant="outlined"
           disabled
           disabledReason="No screen to go back to"
@@ -63,7 +75,9 @@ export const DisabledAndLoading: Story = {
       trailing={
         // The house loading state: `loading` renders the spinner and is a
         // derived (never bare) disable.
-        <Button loading>Saving</Button>
+        <Button compact loading>
+          Saving
+        </Button>
       }
     />
   ),
@@ -73,13 +87,24 @@ export const ManyActionsNarrow: Story = {
   render: () => (
     <YStack maxWidth={320} borderWidth={1} borderColor="$color6" borderStyle="dashed">
       <ScreenToolbar
-        leading={<Button variant="outlined">Back to the previous screen</Button>}
+        minHeight={MIN_PRESS_TARGET}
+        leading={
+          <Button compact variant="outlined">
+            Back to the previous screen
+          </Button>
+        }
         trailing={
           <>
-            <Button variant="outlined">Duplicate</Button>
-            <Button variant="outlined">Archive</Button>
-            <Button variant="outlined">Delete permanently</Button>
-            <Button>Save changes</Button>
+            <Button compact variant="outlined">
+              Duplicate
+            </Button>
+            <Button compact variant="outlined">
+              Archive
+            </Button>
+            <Button compact variant="outlined">
+              Delete permanently
+            </Button>
+            <Button compact>Save changes</Button>
           </>
         }
       />

package/src/layouts/Sidebar.stories.tsx

@@ -1,4 +1,15 @@
 import { useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  ChatCircleIcon,
+  CheckSquareIcon,
+  CreditCardIcon,
+  FolderIcon,
+  GearIcon,
+  SquaresFourIcon,
+  UserIcon,
+} from "@phosphor-icons/react";
+import { useState } from "react";
+import type { ReactNode } from "react";
 import { Paragraph, XStack, YStack } from "tamagui";
 import { Sidebar } from "./sidebar";
 
@@ -12,6 +23,18 @@ export const Default = () => {
   // Demo app frame rides the outer-radius knob (G-15 story honesty): the
   // pinned $3 held a 7px arc at borderRadius:none (UX-P06).
   const { knobProps } = useResolvedKnobs();
+  const [active, setActive] = useState("dashboard");
+  const item = (
+    value: string,
+    label: string,
+    extras: { count?: number; icon?: ReactNode } = {},
+  ) => ({
+    label,
+    value,
+    active: active === value,
+    onPress: () => setActive(value),
+    ...extras,
+  });
   return (
     <XStack
       height={320}
@@ -25,18 +48,18 @@ export const Default = () => {
           {
             title: "Navigation",
             items: [
-              { label: "Dashboard", value: "dashboard", active: true, onPress: () => {} },
-              { label: "Projects", value: "projects", count: 5, onPress: () => {} },
-              { label: "Tasks", value: "tasks", count: 12, onPress: () => {} },
-              { label: "Messages", value: "messages", count: 3, onPress: () => {} },
+              item("dashboard", "Dashboard", { icon: <SquaresFourIcon size={18} /> }),
+              item("projects", "Projects", { count: 5, icon: <FolderIcon size={18} /> }),
+              item("tasks", "Tasks", { count: 12, icon: <CheckSquareIcon size={18} /> }),
+              item("messages", "Messages", { count: 3, icon: <ChatCircleIcon size={18} /> }),
             ],
           },
           {
             title: "Settings",
             items: [
-              { label: "Profile", value: "profile", onPress: () => {} },
-              { label: "Preferences", value: "preferences", onPress: () => {} },
-              { label: "Billing", value: "billing", onPress: () => {} },
+              item("profile", "Profile", { icon: <UserIcon size={18} /> }),
+              item("preferences", "Preferences", { icon: <GearIcon size={18} /> }),
+              item("billing", "Billing", { icon: <CreditCardIcon size={18} /> }),
             ],
           },
         ]}