@sovereignfs/ui 0.54.0 → 0.89.1

package/src/stories/NavTabs.stories.tsx

@@ -1,53 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { NavTabs } from '../components/NavTabs/NavTabs';
-
-const items = [
-  { label: 'Overview', href: '#overview', active: true },
-  { label: 'Users', href: '#users' },
-  { label: 'Plugins', href: '#plugins' },
-  { label: 'Settings', href: '#settings' },
-];
-
-const meta = {
-  title: 'Components/NavTabs',
-  component: NavTabs,
-  parameters: { layout: 'padded' },
-  args: { items },
-} satisfies Meta<typeof NavTabs>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const ManyTabs: Story = {
-  args: {
-    items: [
-      { label: 'Profile', href: '#profile', active: true },
-      { label: 'Security', href: '#security' },
-      { label: 'Notifications', href: '#notifications' },
-      { label: 'Preferences', href: '#preferences' },
-      { label: 'Data & Privacy', href: '#data' },
-      { label: 'Sessions', href: '#sessions' },
-    ],
-  },
-  parameters: { viewport: { defaultViewport: 'mobile' } },
-};
-
-/** Simulates a consumer swapping in a client-side router link (e.g. Next's
- * `<Link replace>` inside an overlay-shell plugin) instead of a plain `<a>`. */
-export const WithCustomLinkRenderer: Story = {
-  args: {
-    renderLink: (item, linkProps) => (
-      <button
-        type="button"
-        className={linkProps.className}
-        aria-current={linkProps['aria-current']}
-        onClick={() => console.log(`client-side navigate to ${item.href}`)}
-        style={{ background: 'none', border: 'none', cursor: 'pointer', font: 'inherit' }}
-      >
-        {linkProps.children}
-      </button>
-    ),
-  },
-};

package/src/stories/OfflineGate.stories.tsx

@@ -1,42 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { OfflineGate } from '../components/OfflineGate/OfflineGate';
-import { EmptyState } from '../components/EmptyState/EmptyState';
-
-const sampleContent = (
-  <div style={{ padding: 'var(--sv-space-4)' }}>
-    <p style={{ margin: 0, fontFamily: 'var(--sv-font-family)' }}>
-      The wrapped content — a user list, a settings form, anything that shouldn&rsquo;t operate
-      against a stale cached snapshot.
-    </p>
-  </div>
-);
-
-const meta = {
-  title: 'Components/OfflineGate',
-  component: OfflineGate,
-  parameters: { layout: 'padded' },
-} satisfies Meta<typeof OfflineGate>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// `OfflineGate` reads the live `useIsOffline()` hook, which Storybook can't
-// drive via args — toggle DevTools > Network > Offline (or throttling) in this
-// preview to see it swap `children` for the blocked state below.
-export const Default: Story = {
-  args: { children: sampleContent, surfaceName: 'Console' },
-};
-
-// The offline state is not independently controllable here (same reason as
-// Default), so this renders the exact EmptyState output OfflineGate produces
-// when useIsOffline() is true, for visual review without a live toggle.
-export const OfflineState: Story = {
-  args: { children: sampleContent, surfaceName: 'Console' },
-  render: () => (
-    <EmptyState
-      icon="alert-triangle"
-      heading="You're offline"
-      description="Console needs a connection — reconnect to continue."
-    />
-  ),
-};

package/src/stories/PageContainer.stories.tsx

@@ -1,37 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { PageContainer } from '../components/PageContainer/PageContainer';
-
-const demoBlock = (
-  <div
-    style={{
-      background: 'var(--sv-color-surface-raised)',
-      border: '1px dashed var(--sv-color-border)',
-      borderRadius: 'var(--sv-radius-md)',
-      padding: 'var(--sv-space-4)',
-    }}
-  >
-    Page content goes here. The runtime shell already pads this area — this component only
-    constrains and centers width, it adds no padding of its own.
-  </div>
-);
-
-const meta = {
-  title: 'Components/PageContainer',
-  component: PageContainer,
-  parameters: { layout: 'fullscreen' },
-  args: { children: demoBlock },
-} satisfies Meta<typeof PageContainer>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Medium: Story = {};
-
-export const Small: Story = { args: { maxWidth: 'sm' } };
-export const Large: Story = { args: { maxWidth: 'lg' } };
-export const Full: Story = { args: { maxWidth: 'full' } };
-
-export const MobileViewport: Story = {
-  args: { maxWidth: 'md' },
-  parameters: { viewport: { defaultViewport: 'mobile1' } },
-};

package/src/stories/PageHeader.stories.tsx

@@ -1,42 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { PageHeader } from '../components/PageHeader/PageHeader';
-import { Button } from '../components/Button/Button';
-
-const meta = {
-  title: 'Components/PageHeader',
-  component: PageHeader,
-  parameters: { layout: 'padded' },
-} satisfies Meta<typeof PageHeader>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { title: 'Users' },
-};
-
-export const WithDescription: Story = {
-  args: {
-    title: 'Users',
-    description: 'Manage who has access to this instance.',
-  },
-};
-
-export const WithAction: Story = {
-  args: {
-    title: 'Users',
-    description: 'Manage who has access to this instance.',
-    action: <Button size="sm">Invite user</Button>,
-  },
-};
-
-/** For use under a shell/plugin that already renders its own `<h1>` — e.g.
- * Console's per-page headers sitting below `<h1>Console</h1>`. Visually
- * identical to the default story; only the rendered tag changes. */
-export const NestedHeadingLevel: Story = {
-  args: {
-    title: 'Users',
-    description: 'Manage who has access to this instance.',
-    headingLevel: 2,
-  },
-};

package/src/stories/ResponsiveSurface.stories.tsx

@@ -1,47 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { ResponsiveSurface } from '../components/ResponsiveSurface/ResponsiveSurface';
-
-function demoTree(label: string) {
-  return (
-    <div
-      style={{
-        padding: 'var(--sv-space-6)',
-        textAlign: 'center',
-        fontFamily: 'var(--sv-font-family)',
-        fontSize: 'var(--sv-font-size-sm)',
-        color: 'var(--sv-color-text-primary)',
-        border: '1px dashed var(--sv-color-border)',
-        borderRadius: 'var(--sv-radius-md)',
-      }}
-    >
-      {label}
-    </div>
-  );
-}
-
-const meta = {
-  title: 'Components/ResponsiveSurface',
-  component: ResponsiveSurface,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'Renders an entirely different component tree below a breakpoint, not a CSS squeeze of the same one — only the active side is ever mounted. See also the useResponsiveLayout hook for non-JSX values.',
-      },
-    },
-  },
-  args: {
-    web: demoTree('Web tree — e.g. a three-column layout'),
-    mobile: demoTree('Mobile tree — an entirely different component'),
-  },
-} satisfies Meta<typeof ResponsiveSurface>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const MobileViewport: Story = {
-  parameters: { viewport: { defaultViewport: 'mobile1' } },
-};

package/src/stories/Spinner.stories.tsx

@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Spinner } from '../components/Spinner/Spinner';
-
-const meta = {
-  title: 'Components/Spinner',
-  component: Spinner,
-  parameters: { layout: 'centered' },
-} satisfies Meta<typeof Spinner>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-export const Small: Story = { args: { size: 'sm' } };
-export const Large: Story = { args: { size: 'lg' } };
-
-export const AllSizes: Story = {
-  render: () => (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
-      <Spinner size="sm" />
-      <Spinner size="md" />
-      <Spinner size="lg" />
-    </div>
-  ),
-};

package/src/stories/SwipableMobileCarousel.stories.tsx

@@ -1,304 +0,0 @@
-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/Textarea.stories.tsx

@@ -1,51 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Textarea } from '../components/Textarea/Textarea';
-
-// Wrap in a label so a11y checks pass (Textarea is a bare <textarea> — no
-// built-in label association).
-function Labeled({ label, ...props }: React.ComponentProps<typeof Textarea> & { label: string }) {
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 6, width: 280 }}>
-      <label
-        htmlFor="sb-textarea"
-        style={{ fontSize: 14, color: 'var(--sv-color-text-primary)', fontFamily: 'system-ui' }}
-      >
-        {label}
-      </label>
-      <Textarea id="sb-textarea" {...props} />
-    </div>
-  );
-}
-
-const meta = {
-  title: 'Components/Textarea',
-  component: Textarea,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'The primitive multi-line text field. RSC-safe; forwards all native `<textarea>` props. No label is built-in — always pair with a `<label>` (or `FormField`) for accessibility.',
-      },
-    },
-  },
-} satisfies Meta<typeof Textarea>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (_args) => <Labeled label="Description" placeholder="Add a description…" />,
-};
-
-export const WithValue: Story = {
-  render: (_args) => <Labeled label="Notes" defaultValue="Follow up next week." />,
-};
-
-export const CustomRows: Story = {
-  render: (_args) => <Labeled label="Message" rows={8} placeholder="Write your message…" />,
-};
-
-export const Disabled: Story = {
-  render: (_args) => <Labeled label="Read-only field" defaultValue="Cannot be changed" disabled />,
-};