@multiplatform.one/components 6.1.0 → 6.4.0

package/src/layouts/Timeline.stories.tsx

@@ -1,3 +1,4 @@
+import { action } from "@multiplatform.one/storybook";
 import { YStack, Text, XStack } from "tamagui";
 import { Timeline, type TimelineEntry } from "./timeline";
 
@@ -17,6 +18,7 @@ export default {
   argTypes: {
     compact: { control: "boolean", description: "Use compact layout" },
     enableAddComment: { control: "boolean", description: "Allow adding comments" },
+    disabled: { control: "boolean", description: "Disable interactions (read-only)" },
   },
 };
 
@@ -61,12 +63,103 @@ const sampleEntries: TimelineEntry[] = [
   },
 ];
 
+// Timestamps relative to "now" so the default relative formatter reads naturally.
+const minutesAgo = (m: number) => new Date(Date.now() - m * 60_000).toISOString();
+
+const commentFeedEntries: TimelineEntry[] = [
+  {
+    id: "c-1",
+    type: "comment",
+    author: "sarah.chen@acme.com",
+    content:
+      "I walked the customer through the migration plan this morning. They want the cutover moved to the first week of November.",
+    timestamp: minutesAgo(120),
+  },
+  {
+    id: "c-1-r1",
+    type: "comment",
+    parentId: "c-1",
+    author: "marcus@acme.com",
+    authorName: "Marcus Wright",
+    content: "November works. I'll update the project schedule today.",
+    timestamp: minutesAgo(90),
+  },
+  {
+    id: "c-1-r2",
+    type: "comment",
+    parentId: "c-1-r1",
+    author: "dev.ops@acme.com",
+    content: "Reminder that the staging freeze starts Oct 28 — plan around it.",
+    timestamp: minutesAgo(45),
+  },
+  {
+    id: "s-1",
+    type: "version",
+    author: "sarah.chen@acme.com",
+    timestamp: minutesAgo(60 * 5),
+    changes: [
+      { field: "status", fieldLabel: "Status", old: "Draft", new: "In Review" },
+      { field: "priority", fieldLabel: "Priority", old: "Low", new: "High" },
+    ],
+  },
+  {
+    id: "s-2",
+    type: "attachment",
+    author: "marcus@acme.com",
+    authorName: "Marcus Wright",
+    content: "migration-plan-v2.pdf",
+    timestamp: minutesAgo(60 * 8),
+  },
+  {
+    id: "c-2",
+    type: "comment",
+    author: "priya_patel@acme.com",
+    content:
+      "Flagging that the customer's security review is still pending — it could slip the timeline.",
+    timestamp: minutesAgo(60 * 24 * 2),
+  },
+  {
+    id: "s-3",
+    type: "assignment",
+    author: "admin@acme.com",
+    content: "sarah.chen@acme.com",
+    timestamp: minutesAgo(60 * 24 * 10),
+  },
+];
+
+export const Comments = () => (
+  <Timeline
+    label="Activity"
+    entries={commentFeedEntries}
+    onCommentSubmit={action("onCommentSubmit")}
+  />
+);
+Comments.parameters = {
+  docs: {
+    description: {
+      story:
+        "Comment-section feed: comments show avatar + display name (emails are prettified, never rendered raw) + relative time + Reply with one-level threaded replies; system events render as compact muted rows. The inline composer at the top expands on focus and submits via onCommentSubmit(text, { parentId? }).",
+    },
+  },
+};
+
 export const Default = () => (
   <Timeline
     entries={sampleEntries}
     onCommentAdded={(content) => console.log("Comment:", content)}
   />
 );
+
+export const Playground = {
+  args: { compact: false, disabled: false, enableAddComment: true },
+  render: (args: { compact?: boolean; disabled?: boolean; enableAddComment?: boolean }) => (
+    <Timeline
+      entries={sampleEntries}
+      onCommentAdded={(content) => console.log("Comment:", content)}
+      {...args}
+    />
+  ),
+};
 Default.storyName = "Main";
 Default.parameters = {
   docs: {
@@ -116,6 +209,36 @@ Empty.parameters = {
   },
 };
 
+export const Loading = () => (
+  <Timeline label="Activity" entries={[]} isLoading onCommentSubmit={action("onCommentSubmit")} />
+);
+Loading.parameters = {
+  docs: {
+    description: {
+      story:
+        "Entries still loading — the comment-row skeleton twin (avatar block + name/body lines) renders instead of the feed, never the empty chrome (LC-20 / DG-ST-02).",
+    },
+  },
+};
+
+export const Error = () => (
+  <Timeline
+    label="Activity"
+    entries={[]}
+    error="The activity feed could not be loaded."
+    onRetry={action("onRetry")}
+    onCommentSubmit={action("onCommentSubmit")}
+  />
+);
+Error.parameters = {
+  docs: {
+    description: {
+      story:
+        'Failed load wins over empty — error chrome with Retry, never "No activity yet"; the composer and entry count hide so a failed feed can\'t invite comments or lie about counts (DG-ST-01 / DG-ST-04 / Axiom 6).',
+    },
+  },
+};
+
 export const CustomEntryRenderer = () => (
   <Timeline
     entries={sampleEntries}

package/src/layouts/Toolbar.stories.tsx

@@ -10,7 +10,7 @@ export default {
 export const Default = () => (
   <YStack gap="$4">
     <Paragraph size="$3" color="$color10">
-      Top toolbar with actions:
+      Independent actions with gap; destructive separated from neutral:
     </Paragraph>
     <Toolbar
       primaryActions={[
@@ -26,6 +26,7 @@ export const Default = () => (
 );
 
 Default.storyName = "Main";
+
 export const Loading = () => (
   <YStack gap="$4">
     <Paragraph size="$3" color="$color10">
@@ -36,8 +37,36 @@ export const Loading = () => (
         { label: "Saving...", onPress: () => {}, variant: "primary", loading: true },
       ]}
       secondaryActions={[
-        { label: "Cancel", onPress: () => {}, variant: "outlined", disabled: true },
+        {
+          label: "Cancel",
+          onPress: () => {},
+          variant: "outlined",
+          disabled: true,
+          disabledReason: "Locked while the save finishes",
+        },
       ]}
     />
   </YStack>
 );
+
+export const FusedSegment = () => (
+  <YStack gap="$4">
+    <Paragraph size="$3" color="$color10">
+      True segments stay fused via <code>fused</code>; independent actions keep gap:
+    </Paragraph>
+    <Toolbar
+      primaryActions={[
+        { label: "Day", onPress: () => {}, fused: true },
+        { label: "Week", onPress: () => {}, fused: true },
+        { label: "Month", onPress: () => {}, fused: true },
+        { label: "Refresh", onPress: () => {}, variant: "outlined" },
+      ]}
+      secondaryActions={[
+        { label: "Export", onPress: () => {}, variant: "outlined" },
+        { label: "Delete", onPress: () => {}, variant: "destructive" },
+      ]}
+    />
+  </YStack>
+);
+
+FusedSegment.storyName = "Fused Segment";

package/src/layouts/ViewSwitcher.stories.tsx

@@ -9,12 +9,45 @@ const views: ViewOption[] = [
   { type: "kanban", label: "Kanban" },
 ];
 
-function ViewSwitcherExample() {
-  const [current, setCurrent] = useState("list");
+function ListIcon({ size = 16 }: { size?: number }) {
   return (
-    <YStack gap="$4" padding="$4">
-      <ViewSwitcher views={views} currentView={current} onViewChange={setCurrent} />
+    <Text fontSize={size} lineHeight={size} aria-hidden>
+      ≡
+    </Text>
+  );
+}
+
+function GridIcon({ size = 16 }: { size?: number }) {
+  return (
+    <Text fontSize={size} lineHeight={size} aria-hidden>
+      ▦
+    </Text>
+  );
+}
+
+function KanbanIcon({ size = 16 }: { size?: number }) {
+  return (
+    <Text fontSize={size} lineHeight={size} aria-hidden>
+      ▯
+    </Text>
+  );
+}
+
+const viewsWithIcons: ViewOption[] = [
+  { type: "list", label: "List", icon: ListIcon },
+  { type: "grid", label: "Grid", icon: GridIcon },
+  { type: "kanban", label: "Kanban", icon: KanbanIcon },
+];
+
+function ViewSwitcherExample({ options = views }: { options?: ViewOption[] }) {
+  const [current, setCurrent] = useState(options[0]?.type ?? "list");
+  return (
+    <YStack gap="$4" padding="$4" alignItems="flex-start">
+      <ViewSwitcher views={options} currentView={current} onViewChange={setCurrent} />
       <Text>Current view: {current}</Text>
+      <Text fontSize="$2" color="$color10">
+        Segment padding tracks the size knob (~$3 at medium).
+      </Text>
     </YStack>
   );
 }
@@ -34,3 +67,8 @@ export const Default: Story = {
   name: "Main",
   render: () => <ViewSwitcherExample />,
 };
+
+export const WithIcons: Story = {
+  name: "With icons",
+  render: () => <ViewSwitcherExample options={viewsWithIcons} />,
+};

package/src/layouts/ViewSwitcher.tsx

@@ -1,6 +1,15 @@
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  MIN_PRESS_TARGET,
+  ensureFocusVisibleRing,
+  ensureKeyboardModalityTracking,
+  keyboardFocusRingProps,
+  pressTargetHitSlop,
+  useResolvedKnobs,
+  wasKeyboardFocus,
+} from "@multiplatform.one/theme";
 import type React from "react";
-import { Text, ToggleGroup } from "tamagui";
+import { useState } from "react";
+import { Text, ToggleGroup, XStack, isWeb } from "tamagui";
 
 export interface ViewOption {
   /** Unique identifier for this view type */
@@ -28,25 +37,108 @@ export interface ViewSwitcherProps {
  */
 export function ViewSwitcher({ views, currentView, onViewChange }: ViewSwitcherProps) {
   const { knobProps } = useResolvedKnobs();
+  // Chromium drops keyboard modality on tamagui's group focus redirect, so
+  // :focus-visible can miss the first item — paint the ring manually on
+  // keyboard-origin focus (see theme keyboardFocusRing).
+  const [kbFocusValue, setKbFocusValue] = useState<string | null>(null);
+  // Roving anchor: while a segment is focused, IT owns the group's single
+  // tab stop (so Shift+Tab exits instead of hopping to the selected
+  // segment); when focus leaves, the anchor returns to the selection.
+  const [focusValue, setFocusValue] = useState<string | null>(null);
+  if (isWeb) ensureKeyboardModalityTracking();
+  const sz = knobProps.sizeToken;
+  // Segment inset ~$3 at medium; size knob steps it (small→$2, large→$4).
+  // Vertical pad is floored so the segment hits DG-LAY-04 (≥44) even at small.
+  // SP-PAD exemption (Chip precedent): this is a control-tier segmented
+  // group — its padding is the size-derived control padding sanctioned by
+  // the SP-PAD definition, so the space knob has no separate target here
+  // (fused R-OUTER segments also carry no gap; ToggleGroup contract).
+  const padH = sz === "$3" ? ("$2" as const) : sz === "$5" ? ("$4" as const) : ("$3" as const);
+  const padV = sz === "$3" ? ("$1.5" as const) : sz === "$5" ? ("$2.5" as const) : ("$2" as const);
+  const labelSize = sz === "$3" ? ("$2" as const) : sz === "$5" ? ("$4" as const) : ("$3" as const);
+  const rowGap =
+    sz === "$3" ? ("$1.5" as const) : sz === "$5" ? ("$2.5" as const) : ("$2" as const);
+  const iconPx = sz === "$3" ? 14 : sz === "$5" ? 18 : 16;
+  // Pre-floor measured medium segment height was 32px.
+  const segmentHitSlop = pressTargetHitSlop(32);
+  // DG-A11Y-01: the role=group container is a focusable tab entry point that
+  // redirects focus to a segment — paint the ring synchronously while focus
+  // is WITHIN (CellWrapper focusWithin pattern) and on its own :focus.
+  const groupRing = ensureFocusVisibleRing();
 
   return (
     <ToggleGroup
       type="single"
       orientation="horizontal"
       flexDirection="row"
+      alignSelf="flex-start"
       value={currentView}
       onValueChange={(val) => {
         if (val) onViewChange(val);
       }}
       {...knobProps.borderRadius}
       {...knobProps.inputSurface}
+      // R-OUTER (LC-18): the outer frame owns the radius; clip so the inner
+      // square segment seams stay square inside the rounded frame instead of
+      // poking past it at high radius (DF-09). Segment keyboard rings are
+      // inset (outlineOffset -2), so they survive the clip; the group ring is
+      // an outline (never clipped by the element's own overflow).
+      overflow="hidden"
+      focusStyle={groupRing}
+      focusVisibleStyle={groupRing}
+      focusWithinStyle={groupRing}
     >
-      {views.map((view) => {
+      {views.map((view, viewIndex) => {
         const Icon = view.icon;
+        // Roving tabindex (DG-A11Y single-tab-stop): tamagui's vendored
+        // roving-focus item hardcodes tabIndex=0 on every segment, turning a
+        // 3-view switcher into 3 tab stops. Exactly one segment stays in the
+        // page tab order — the focused one while focus is inside the group,
+        // else the active one (or the first when nothing matches); arrows
+        // move within the group.
+        const anchorIndex = (() => {
+          const focusIdx = focusValue ? views.findIndex((v) => v.type === focusValue) : -1;
+          if (focusIdx >= 0) return focusIdx;
+          const activeIdx = views.findIndex((v) => v.type === currentView);
+          return activeIdx >= 0 ? activeIdx : 0;
+        })();
+        const isTabStop = viewIndex === anchorIndex;
         return (
-          <ToggleGroup.Item key={view.type} value={view.type} size={knobProps.sizeToken}>
-            {Icon && <Icon size={16} />}
-            <Text fontSize={knobProps.sizeToken}>{view.label}</Text>
+          // no size prop: ToggleGroup.Item's size makes square icon-buttons
+          // (fixed width) that clip text labels -- let content + pad size the item.
+          <ToggleGroup.Item
+            key={view.type}
+            value={view.type}
+            {...(isWeb ? { tabIndex: isTabStop ? 0 : -1 } : undefined)}
+            paddingHorizontal={padH}
+            paddingVertical={padV}
+            width="auto"
+            height="auto"
+            minHeight={MIN_PRESS_TARGET}
+            hitSlop={segmentHitSlop}
+            flexGrow={0}
+            alignItems="center"
+            justifyContent="center"
+            {...(isWeb
+              ? {
+                  onFocus: () => {
+                    setFocusValue(view.type);
+                    if (wasKeyboardFocus()) setKbFocusValue(view.type);
+                  },
+                  onBlur: () => {
+                    setFocusValue((prev) => (prev === view.type ? null : prev));
+                    setKbFocusValue((prev) => (prev === view.type ? null : prev));
+                  },
+                }
+              : undefined)}
+            {...(kbFocusValue === view.type ? keyboardFocusRingProps : undefined)}
+          >
+            <XStack alignItems="center" gap={rowGap} flexShrink={0}>
+              {Icon && <Icon size={iconPx} />}
+              <Text fontSize={labelSize} numberOfLines={1}>
+                {view.label}
+              </Text>
+            </XStack>
           </ToggleGroup.Item>
         );
       })}