@sovereignfs/ui 0.45.0 → 0.54.0

package/src/stories/SwipableMobileCarousel.stories.tsx

@@ -0,0 +1,304 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { SwipableMobileCarousel } from '../components/SwipableMobileCarousel/SwipableMobileCarousel';
+import { SwipableMobileCarouselSlide } from '../components/SwipableMobileCarousel/SwipableMobileCarouselSlide';
+import { SwipableMobileCarouselSlideHeader } from '../components/SwipableMobileCarousel/SwipableMobileCarouselSlideHeader';
+import { SwipableMobileCarouselSlideBody } from '../components/SwipableMobileCarousel/SwipableMobileCarouselSlideBody';
+import { SwipableMobileCarouselSlideFooter } from '../components/SwipableMobileCarousel/SwipableMobileCarouselSlideFooter';
+import { SwipableMobileCarouselDots } from '../components/SwipableMobileCarouselDots/SwipableMobileCarouselDots';
+
+const SLIDES = [
+  { key: 'lists', label: 'Lists' },
+  { key: 'groceries', label: 'Groceries' },
+  { key: 'errands', label: 'Errands' },
+  { key: 'work', label: 'Work' },
+];
+
+function slideBodyStyle(): React.CSSProperties {
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100%',
+    fontFamily: 'var(--sv-font-family)',
+    color: 'var(--sv-color-text-primary)',
+  };
+}
+
+function headerStyle(): React.CSSProperties {
+  return {
+    padding: 'var(--sv-space-4)',
+    fontFamily: 'var(--sv-font-family)',
+    fontWeight: 'var(--sv-font-weight-semibold)',
+    color: 'var(--sv-color-text-primary)',
+    borderBottom: '1px solid var(--sv-color-border)',
+  };
+}
+
+function CarouselFrame({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      style={{
+        height: 480,
+        maxWidth: 375,
+        margin: '0 auto',
+        border: '1px solid var(--sv-color-border)',
+        borderRadius: 'var(--sv-radius-md)',
+        overflow: 'hidden',
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+function DefaultDemo() {
+  const [activeIndex, setActiveIndex] = useState(0);
+  return (
+    <CarouselFrame>
+      <SwipableMobileCarousel
+        activeIndex={activeIndex}
+        onSettle={setActiveIndex}
+        aria-label="Task lists"
+      >
+        {SLIDES.map((slide) => (
+          <SwipableMobileCarouselSlide key={slide.key} slideKey={slide.key} label={slide.label}>
+            <SwipableMobileCarouselSlideHeader>
+              <div style={headerStyle()}>{slide.label}</div>
+            </SwipableMobileCarouselSlideHeader>
+            <SwipableMobileCarouselSlideBody>
+              <div style={slideBodyStyle()}>{slide.label} content</div>
+            </SwipableMobileCarouselSlideBody>
+          </SwipableMobileCarouselSlide>
+        ))}
+      </SwipableMobileCarousel>
+    </CarouselFrame>
+  );
+}
+
+function LazyLoadingBodyDemo() {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [loadedKeys, setLoadedKeys] = useState<Set<string>>(new Set(['lists']));
+
+  function simulateLoad(key: string) {
+    setTimeout(() => setLoadedKeys((s) => new Set(s).add(key)), 1200);
+  }
+
+  return (
+    <CarouselFrame>
+      <SwipableMobileCarousel
+        activeIndex={activeIndex}
+        onSettle={(i) => {
+          setActiveIndex(i);
+          const key = SLIDES[i]?.key;
+          if (key && !loadedKeys.has(key)) simulateLoad(key);
+        }}
+        aria-label="Task lists (simulated fetch)"
+      >
+        {SLIDES.map((slide) => (
+          <SwipableMobileCarouselSlide key={slide.key} slideKey={slide.key} label={slide.label}>
+            {/* The title renders immediately from already-known metadata —
+                only the Body below waits on its own simulated 1.2s fetch. */}
+            <SwipableMobileCarouselSlideHeader>
+              <div style={headerStyle()}>{slide.label}</div>
+            </SwipableMobileCarouselSlideHeader>
+            <SwipableMobileCarouselSlideBody loading={!loadedKeys.has(slide.key)}>
+              <div style={slideBodyStyle()}>{slide.label} content (loaded)</div>
+            </SwipableMobileCarouselSlideBody>
+          </SwipableMobileCarouselSlide>
+        ))}
+      </SwipableMobileCarousel>
+    </CarouselFrame>
+  );
+}
+
+function CustomIndicatorDemo() {
+  const [activeIndex, setActiveIndex] = useState(0);
+  return (
+    <CarouselFrame>
+      <SwipableMobileCarousel
+        activeIndex={activeIndex}
+        onSettle={setActiveIndex}
+        aria-label="Task lists"
+        renderIndicator={({ count, activeIndex: i, onJump }) => (
+          <div
+            style={{
+              position: 'absolute',
+              top: 8,
+              right: 8,
+              fontFamily: 'var(--sv-font-family)',
+              fontSize: 'var(--sv-font-size-sm)',
+              color: 'var(--sv-color-text-primary)',
+              background: 'var(--sv-color-surface-raised)',
+              borderRadius: 'var(--sv-radius-md)',
+              padding: 'var(--sv-space-1) var(--sv-space-2)',
+            }}
+          >
+            <button type="button" onClick={() => onJump(Math.max(0, i - 1))}>
+              ‹
+            </button>{' '}
+            {i + 1} / {count}{' '}
+            <button type="button" onClick={() => onJump(Math.min(count - 1, i + 1))}>
+              ›
+            </button>
+          </div>
+        )}
+      >
+        {SLIDES.map((slide) => (
+          <SwipableMobileCarouselSlide key={slide.key} slideKey={slide.key} label={slide.label}>
+            <SwipableMobileCarouselSlideHeader>
+              <div style={headerStyle()}>{slide.label}</div>
+            </SwipableMobileCarouselSlideHeader>
+            <SwipableMobileCarouselSlideBody>
+              <div style={slideBodyStyle()}>{slide.label} content</div>
+            </SwipableMobileCarouselSlideBody>
+          </SwipableMobileCarouselSlide>
+        ))}
+      </SwipableMobileCarousel>
+    </CarouselFrame>
+  );
+}
+
+function NoIndicatorDemo() {
+  const [activeIndex, setActiveIndex] = useState(0);
+  return (
+    <CarouselFrame>
+      <SwipableMobileCarousel
+        activeIndex={activeIndex}
+        onSettle={setActiveIndex}
+        aria-label="Task lists"
+        renderIndicator={null}
+      >
+        {SLIDES.map((slide) => (
+          <SwipableMobileCarouselSlide key={slide.key} slideKey={slide.key} label={slide.label}>
+            <SwipableMobileCarouselSlideHeader>
+              <div style={headerStyle()}>{slide.label}</div>
+            </SwipableMobileCarouselSlideHeader>
+            <SwipableMobileCarouselSlideBody>
+              <div style={slideBodyStyle()}>{slide.label} content</div>
+            </SwipableMobileCarouselSlideBody>
+          </SwipableMobileCarouselSlide>
+        ))}
+      </SwipableMobileCarousel>
+    </CarouselFrame>
+  );
+}
+
+function FooterDemo() {
+  const [activeIndex, setActiveIndex] = useState(0);
+  return (
+    <CarouselFrame>
+      <SwipableMobileCarousel
+        activeIndex={activeIndex}
+        onSettle={setActiveIndex}
+        aria-label="Task lists"
+      >
+        {SLIDES.map((slide) => (
+          <SwipableMobileCarouselSlide key={slide.key} slideKey={slide.key} label={slide.label}>
+            <SwipableMobileCarouselSlideHeader>
+              <div style={headerStyle()}>{slide.label}</div>
+            </SwipableMobileCarouselSlideHeader>
+            <SwipableMobileCarouselSlideBody>
+              <div style={slideBodyStyle()}>{slide.label} content</div>
+            </SwipableMobileCarouselSlideBody>
+            <SwipableMobileCarouselSlideFooter>
+              <div
+                style={{
+                  padding: 'var(--sv-space-3) var(--sv-space-4)',
+                  borderTop: '1px solid var(--sv-color-border)',
+                  fontFamily: 'var(--sv-font-family)',
+                  fontSize: 'var(--sv-font-size-sm)',
+                  color: 'var(--sv-color-text-muted)',
+                }}
+              >
+                + Add to {slide.label}
+              </div>
+            </SwipableMobileCarouselSlideFooter>
+          </SwipableMobileCarouselSlide>
+        ))}
+      </SwipableMobileCarousel>
+    </CarouselFrame>
+  );
+}
+
+function DotsStandaloneDemo() {
+  const [activeIndex, setActiveIndex] = useState(0);
+  return (
+    <SwipableMobileCarouselDots
+      count={4}
+      activeIndex={activeIndex}
+      onJump={setActiveIndex}
+      labels={['Lists', 'Groceries', 'Errands', 'Work']}
+      aria-label="Task lists"
+    />
+  );
+}
+
+const meta = {
+  title: 'Components/SwipableMobileCarousel',
+  component: SwipableMobileCarousel,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          "A compound component for swiping between full-width slides (each an independent route/view on mobile), wrapping useSnapCarousel. Owns rendering and mount-window mechanics only — it has no opinion on where slide data lives. Do NOT aggregate cross-slide data or mount a detail overlay (Sheet, Dialog) inside a Slide's children; see docs/design-system.md's carousel section.",
+      },
+    },
+  },
+  // Every story below supplies its own render(), which is stateful (activeIndex
+  // lives in useState) — these args only satisfy the required-prop typing.
+  args: {
+    activeIndex: 0,
+    onSettle: () => {},
+    'aria-label': 'Task lists',
+    children: null,
+  },
+} satisfies Meta<typeof SwipableMobileCarousel>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { render: () => <DefaultDemo /> };
+
+export const LazyLoadingBody: Story = {
+  render: () => <LazyLoadingBodyDemo />,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Swipe to a new slide — its title renders immediately from already-known metadata, while only the Body region shows a brief loading placeholder for its simulated 1.2s fetch. This is the fix for the "whole slide blanks out, title included, until its own fetch resolves" bug.',
+      },
+    },
+  },
+};
+
+export const CustomIndicator: Story = { render: () => <CustomIndicatorDemo /> };
+
+export const NoIndicator: Story = { render: () => <NoIndicatorDemo /> };
+
+export const WithFooter: Story = { render: () => <FooterDemo /> };
+
+export const MobileViewport: Story = {
+  render: () => <DefaultDemo />,
+  parameters: { viewport: { defaultViewport: 'mobile1' } },
+};
+
+// ---------------------------------------------------------------------------
+// SwipableMobileCarouselDots — standalone, also this carousel's default
+// indicator. Grouped in this file rather than its own (Table's sub-parts
+// share one story file too), though it has its own component subfolder and
+// barrel export for independent reuse.
+// ---------------------------------------------------------------------------
+
+export const DotsStandalone: Story = {
+  render: () => <DotsStandaloneDemo />,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'SwipableMobileCarouselDots used on its own, outside a carousel — a real role="tablist"/role="tab" component (tappable, labeled, focusable), unlike the aria-hidden decorative dots both sovereign-tasks and sovereign-shopper currently hand-roll.',
+      },
+    },
+  },
+};

package/src/stories/TokenGallery.stories.tsx

@@ -109,6 +109,20 @@ const FONT_SIZE_TOKENS = [
   '--sv-font-size-2xl',
 ];
 
+// Task 10.2 — in-app text-size control. --sv-text-size-scale is theme-stable
+// like --sv-radius-scale, but unlike radius (a calc() chain resolved once at
+// :root's declaration site — see the RADIUS_PRESETS comment below), rem units
+// genuinely re-resolve against the root element's live computed font-size, so
+// these swatches compute the result directly in JS rather than needing a real
+// [data-text-size] toggle on the document root.
+const TEXT_SIZE_PRESETS = [
+  { preset: 'default', scale: 1 },
+  { preset: 'large', scale: 1.125 },
+  { preset: 'larger', scale: 1.25 },
+] as const;
+
+const TEXT_SIZE_BASE_PX = { md: 16, lg: 18, '2xl': 24 };
+
 const FONT_WEIGHT_TOKENS = [
   '--sv-font-weight-normal',
   '--sv-font-weight-medium',
@@ -247,6 +261,44 @@ function RadiusScaleRow({ token }: { token: string }) {
   );
 }
 
+function TextSizePresetRow({ preset, scale }: { preset: string; scale: number }) {
+  return (
+    <div style={row}>
+      <div style={{ display: 'flex', gap: 12, alignItems: 'baseline', flexShrink: 0, width: 180 }}>
+        <span
+          style={{
+            fontSize: `${scale * TEXT_SIZE_BASE_PX.md}px`,
+            color: 'var(--sv-color-text-primary)',
+          }}
+          title="body (--sv-font-size-md)"
+        >
+          Aa
+        </span>
+        <span
+          style={{
+            fontSize: `${scale * TEXT_SIZE_BASE_PX.lg}px`,
+            color: 'var(--sv-color-text-primary)',
+          }}
+          title="large (--sv-font-size-lg)"
+        >
+          Aa
+        </span>
+        <span
+          style={{
+            fontSize: `${scale * TEXT_SIZE_BASE_PX['2xl']}px`,
+            color: 'var(--sv-color-text-primary)',
+          }}
+          title="heading (--sv-font-size-2xl)"
+        >
+          Aa
+        </span>
+      </div>
+      <span style={label}>{preset}</span>
+      <span style={value}>scale {scale}</span>
+    </div>
+  );
+}
+
 function RadiusPresetRow({ preset, scale }: { preset: string; scale: number }) {
   return (
     <div style={row}>
@@ -446,6 +498,19 @@ function TokenGalleryComponent() {
         ))}
       </Section>
 
+      <Section title="Text-size presets (task 10.2)">
+        <p style={{ color: 'var(--sv-color-text-muted)', fontSize: 13, marginBottom: 12 }}>
+          Account → Preferences → Appearance. Overrides <code>--sv-text-size-scale</code> via{' '}
+          <code>[data-text-size]</code> on <code>&lt;html&gt;</code> — every rem-based token above
+          (font sizes, but also spacing and radii) scales with it, since the root element&apos;s
+          font-size is what rem resolves against. Discharges the accessibility debt from disabling
+          pinch-zoom (<code>runtime/app/layout.tsx</code>).
+        </p>
+        {TEXT_SIZE_PRESETS.map((p) => (
+          <TextSizePresetRow key={p.preset} preset={p.preset} scale={p.scale} />
+        ))}
+      </Section>
+
       <Section title="Radius scale">
         {RADIUS_TOKENS.map((t) => (
           <RadiusScaleRow key={t} token={t} />

package/src/tokens/primitives.css

@@ -77,6 +77,16 @@
   --sv-font-weight-semibold: 600;
   --sv-font-weight-bold: 700;
 
+  /* In-app text-size control (task 10.2), discharging the pinch-zoom-disabled
+     accessibility debt (runtime/app/layout.tsx sets userScalable: false).
+     Every --sv-font-size-* above is rem-based, so scaling the root font size
+     scales the whole type system with no per-component changes. Driven by
+     [data-text-size] on <html>, set pre-paint by runtime/src/theme-script.ts
+     from the `sv-text-size` cookie — same mechanism as [data-theme]. Like
+     --sv-radius-scale, this is a theme-stable scale token with no separate
+     semantic tier. */
+  --sv-text-size-scale: 1;
+
   /* Icon sizes — scale tokens used directly by the Icon component */
   --sv-icon-size-xs: 0.75rem; /* 12px — inline metadata (e.g. a due-date badge) */
   --sv-icon-size-sm: 1rem; /* 16px — inline with body text */
@@ -130,3 +140,18 @@
     1
   ); /* slight overshoot — playful emphasis, use sparingly */
 }
+
+/* Root font size scales with --sv-text-size-scale — see the token comment
+   above. calc(...  * 100%) keeps the browser/OS text-zoom default intact at
+   scale 1 rather than hardcoding a px value. */
+html {
+  font-size: calc(var(--sv-text-size-scale) * 100%);
+}
+
+:root[data-text-size='large'] {
+  --sv-text-size-scale: 1.125; /* +12.5% */
+}
+
+:root[data-text-size='larger'] {
+  --sv-text-size-scale: 1.25; /* +25% */
+}