@sovereignfs/ui 0.54.0 → 0.83.1

package/src/stories/SwipeStack.stories.tsx

@@ -0,0 +1,200 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { SwipeStack } from '../components/SwipeStack/SwipeStack';
+import { SwipeStackCard } from '../components/SwipeStack/SwipeStackCard';
+
+const AGENDA_TASKS = [
+  { id: 'water-plants', title: 'Water the plants', detail: 'Living room + balcony' },
+  { id: 'standup', title: 'Team standup', detail: '9:30am · 15 min' },
+  { id: 'groceries', title: 'Buy groceries', detail: 'Milk, eggs, bread' },
+  { id: 'review-pr', title: "Review teammate's PR", detail: 'sovereign/sovereign #482' },
+  { id: 'call-dentist', title: 'Call the dentist', detail: 'Reschedule cleaning' },
+];
+
+function taskCardStyle(): React.CSSProperties {
+  return {
+    height: '100%',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    padding: 'var(--sv-space-6)',
+    fontFamily: 'var(--sv-font-family)',
+  };
+}
+
+function TaskCardDemo({ title, detail }: { title: string; detail: string }) {
+  return (
+    <div style={taskCardStyle()}>
+      <div
+        style={{
+          fontSize: 'var(--sv-font-size-lg)',
+          fontWeight: 'var(--sv-font-weight-semibold)',
+          color: 'var(--sv-color-text-primary)',
+          marginBottom: 'var(--sv-space-2)',
+        }}
+      >
+        {title}
+      </div>
+      <div style={{ fontSize: 'var(--sv-font-size-sm)', color: 'var(--sv-color-text-muted)' }}>
+        {detail}
+      </div>
+    </div>
+  );
+}
+
+function StackFrame({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      style={{
+        height: 420,
+        maxWidth: 375,
+        margin: '0 auto',
+        padding: 'var(--sv-space-4)',
+        border: '1px solid var(--sv-color-border)',
+        borderRadius: 'var(--sv-radius-md)',
+        boxSizing: 'border-box',
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+function AgendaDemo() {
+  const [log, setLog] = useState<string[]>([]);
+  return (
+    <StackFrame>
+      <SwipeStack
+        aria-label="Today's agenda"
+        directions={{
+          up: { label: 'Done', icon: 'check' },
+          down: { label: 'Defer', icon: 'history' },
+          right: { label: 'Skip', icon: 'chevron-right' },
+        }}
+        onSwipe={(direction, cardId) =>
+          setLog((l) => [`${cardId} → ${direction}`, ...l].slice(0, 5))
+        }
+      >
+        {AGENDA_TASKS.map((task) => (
+          <SwipeStackCard key={task.id} cardId={task.id}>
+            <TaskCardDemo title={task.title} detail={task.detail} />
+          </SwipeStackCard>
+        ))}
+      </SwipeStack>
+      <div
+        style={{
+          marginTop: 'var(--sv-space-3)',
+          fontFamily: 'var(--sv-font-family)',
+          fontSize: 'var(--sv-font-size-xs)',
+          color: 'var(--sv-color-text-muted)',
+        }}
+      >
+        {log.map((entry, i) => (
+          <div key={i}>{entry}</div>
+        ))}
+      </div>
+    </StackFrame>
+  );
+}
+
+function TwoDirectionsDemo() {
+  return (
+    <StackFrame>
+      <SwipeStack
+        aria-label="Photo picker"
+        directions={{
+          left: { label: 'Skip' },
+          right: { label: 'Keep', icon: 'check' },
+        }}
+        onSwipe={() => {}}
+      >
+        {AGENDA_TASKS.map((task) => (
+          <SwipeStackCard key={task.id} cardId={task.id}>
+            <TaskCardDemo title={task.title} detail={task.detail} />
+          </SwipeStackCard>
+        ))}
+      </SwipeStack>
+    </StackFrame>
+  );
+}
+
+function EmptyDemo() {
+  return (
+    <StackFrame>
+      <SwipeStack
+        aria-label="Today's agenda"
+        directions={{ up: { label: 'Done', icon: 'check' } }}
+        onSwipe={() => {}}
+      >
+        {[]}
+      </SwipeStack>
+    </StackFrame>
+  );
+}
+
+const meta = {
+  title: 'Components/SwipeStack',
+  component: SwipeStack,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'A compound component for triaging one card at a time by dragging it left/right/up/down, plus an always-visible non-gesture fallback (a button per configured direction) wired to the identical commit path and exit animation as a real drag. Every direction is independently optional and has no baked-in meaning — the caller supplies label/icon per direction and reacts to onSwipe; once triggered, a direction always removes the card for good, there is no reversible "go back".',
+      },
+    },
+  },
+  // Every story below supplies its own render(), stateless or with its own
+  // useState — these args only satisfy the required-prop typing.
+  args: {
+    'aria-label': "Today's agenda",
+    directions: {},
+    onSwipe: () => {},
+    children: null,
+  },
+} satisfies Meta<typeof SwipeStack>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => <AgendaDemo />,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'up/down/right configured, left intentionally omitted — SwipeStack does not require all 4 directions. The log below the stack shows onSwipe firing with (direction, cardId) for both a drag and a fallback-button click.',
+      },
+    },
+  },
+};
+
+export const TwoDirections: Story = {
+  render: () => <TwoDirectionsDemo />,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Only left/right configured — up/down are a wall, not just an unreachable outcome, so the card never visually drifts vertically, and touch-action stays pan-y so a page can still scroll vertically through the stack.',
+      },
+    },
+  },
+};
+
+export const Empty: Story = {
+  render: () => <EmptyDemo />,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'No cards left — SwipeStack renders its empty region and disables the fallback button rather than showing any built-in empty-state copy; that vocabulary belongs to the caller, same as SwipableMobileCarousel has no opinion on where slide data lives.',
+      },
+    },
+  },
+};
+
+export const MobileViewport: Story = {
+  render: () => <AgendaDemo />,
+  parameters: { viewport: { defaultViewport: 'mobile1' } },
+};

package/src/stories/Textarea.stories.tsx

@@ -49,3 +49,15 @@ export const CustomRows: Story = {
 export const Disabled: Story = {
   render: (_args) => <Labeled label="Read-only field" defaultValue="Cannot be changed" disabled />,
 };
+
+export const AutoGrow: Story = {
+  render: (_args) => (
+    <Labeled
+      label="Title (grows with content)"
+      autoGrow
+      rows={1}
+      defaultValue="A short title"
+      placeholder="Add a title…"
+    />
+  ),
+};

package/src/stories/TokenGallery.stories.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '../components/Button/Button';
+import { Card } from '../components/Card/Card';
 
 // ---------------------------------------------------------------------------
 // Token Gallery — live rendering of every CSS custom property tier.
@@ -16,8 +18,11 @@ const SEMANTIC_COLORS = [
   '--sv-color-text-muted',
   '--sv-color-text-subtle',
   '--sv-color-text-on-accent',
+  '--sv-color-text-on-light-fill',
+  '--sv-color-text-on-dark-fill',
   '--sv-color-border',
   '--sv-color-border-strong',
+  '--sv-color-shadow-strong',
   '--sv-color-accent',
   '--sv-color-accent-hover',
   '--sv-color-accent-subtle',
@@ -99,6 +104,7 @@ const ICON_SIZE_TOKENS = [
 ];
 
 const FONT_SIZE_TOKENS = [
+  '--sv-font-size-2xs',
   '--sv-font-size-label',
   '--sv-font-size-xs',
   '--sv-font-size-caption',
@@ -107,6 +113,7 @@ const FONT_SIZE_TOKENS = [
   '--sv-font-size-lg',
   '--sv-font-size-xl',
   '--sv-font-size-2xl',
+  '--sv-font-size-3xl',
 ];
 
 // Task 10.2 — in-app text-size control. --sv-text-size-scale is theme-stable
@@ -138,6 +145,10 @@ const SHADOW_TOKENS = [
   '--sv-shadow-control',
 ];
 
+// RFC 0094 — theme-stable like the other scale tokens; a theme preset can
+// override it (e.g. neobrutalism's thicker outline).
+const BORDER_WIDTH_TOKENS = ['--sv-border-width-hairline'];
+
 // Realistic duration+easing pairings, not every combination — matches how
 // Dialog/Drawer actually use these tokens (see motion.ts).
 const MOTION_PAIRS: { durationToken: string; easeToken: string; use: string }[] = [
@@ -530,6 +541,45 @@ function TokenGalleryComponent() {
         ))}
       </Section>
 
+      <Section title="Border width">
+        {BORDER_WIDTH_TOKENS.map((t) => (
+          <ScaleRow
+            key={t}
+            token={t}
+            renderPreview={(_v) => (
+              <div
+                style={{
+                  width: 48,
+                  height: 28,
+                  background: 'var(--sv-color-surface-raised)',
+                  border: `var(${t}) solid var(--sv-color-border-strong)`,
+                  flexShrink: 0,
+                }}
+              />
+            )}
+          />
+        ))}
+      </Section>
+
+      <Section title="Theme presets (RFC 0094)">
+        <p style={{ color: 'var(--sv-color-text-muted)', fontSize: 13, marginBottom: 12 }}>
+          A closed, built-in set of full-identity presets — border width, shadow shape, corner
+          radius, and the <code>Button</code> press interaction (<code>--sv-button-shadow</code>,{' '}
+          <code>--sv-button-press-x/-y</code>) all move together. Use the{' '}
+          <strong>Theme preset</strong> toolbar above (next to Radius) to switch — these are live
+          components, not a static swatch, so they respond immediately.
+        </p>
+        <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start', flexWrap: 'wrap' }}>
+          <Button variant="primary">Primary button</Button>
+          <Button variant="secondary">Secondary button</Button>
+          <Card padding="md" style={{ width: 220 }}>
+            <p style={{ margin: 0, color: 'var(--sv-color-text-primary)', fontSize: 14 }}>
+              Card content
+            </p>
+          </Card>
+        </div>
+      </Section>
+
       <Section title="Icon sizes">
         {ICON_SIZE_TOKENS.map((t) => (
           <ScaleRow

package/src/tokens/primitives.css

@@ -64,6 +64,7 @@
     sans-serif;
   --sv-font-family-mono:
     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  --sv-font-size-2xs: 0.625rem; /* 10px — smallest badge size (Badge size="xs") */
   --sv-font-size-label: 0.6875rem; /* 11px — all-caps section labels */
   --sv-font-size-xs: 0.75rem; /* 12px — mono identifiers */
   --sv-font-size-caption: 0.8125rem; /* 13px — secondary / supporting copy */
@@ -72,6 +73,10 @@
   --sv-font-size-lg: 1.125rem; /* 18px */
   --sv-font-size-xl: 1.25rem; /* 20px */
   --sv-font-size-2xl: 1.5rem; /* 24px */
+  --sv-font-size-3xl: 2rem; /* 32px — document title style (RichTextEditor "Title" paragraph style). A
+     modest step above 2xl reads too close to Heading 1 at a glance (both
+     bold, only 4px apart) — this keeps roughly the same ~1.3x jump Google
+     Docs itself uses between its own Title and Heading 1 sizes. */
   --sv-font-weight-regular: 400;
   --sv-font-weight-medium: 500;
   --sv-font-weight-semibold: 600;
@@ -116,6 +121,12 @@
   ); /* 20px @ scale 1 — bottom sheet (Drawer top corners) */
   --sv-radius-full: 9999px; /* pill / avatar — unaffected by --sv-radius-scale */
 
+  /* Border width (RFC 0094). Theme-stable like the other scale tokens above —
+     a theme preset can override it (e.g. neobrutalism's thicker outline), but
+     it has no separate semantic tier. Every component references this by
+     name instead of a literal `1px`, the way --sv-radius-* etc. do. */
+  --sv-border-width-hairline: 1px;
+
   /* Touch targets — minimum hit-area dimension for interactive controls.
      44px follows the WCAG 2.5.5 / Apple HIG / Material guideline for reliable
      touch without a pointing device. Applied to icon-only controls on mobile

package/src/tokens/semantic.css

@@ -19,6 +19,17 @@
   --sv-color-text-muted: var(--sv-grey-500);
   --sv-color-text-subtle: var(--sv-grey-400);
   --sv-color-text-on-accent: var(--sv-white);
+  /* Guaranteed-contrast text pair for content painted directly on a
+     plugin-supplied literal background colour (data, not a design-system
+     token — e.g. a kanban board's own canvas colour). A consumer picks
+     whichever member actually contrasts with its own literal background;
+     neither can be theme-reactive the way --sv-color-text-primary is,
+     since the background itself doesn't react to the app's theme either.
+     Intentionally NOT overridden under [data-theme='dark'] below — same
+     "reads the same regardless of overall page theme" reasoning as
+     --sv-color-text-on-error/-success. */
+  --sv-color-text-on-light-fill: var(--sv-grey-950);
+  --sv-color-text-on-dark-fill: var(--sv-grey-50);
 
   --sv-color-border: var(--sv-grey-200);
   --sv-color-border-strong: var(--sv-grey-300);
@@ -68,6 +79,14 @@
      elevation shadow. Composed rgba layers, like --sv-shadow-card. */
   --sv-color-scrim: rgba(0, 0, 0, 0.5);
 
+  /* High-contrast shadow colour (RFC 0094). Distinct from --sv-color-border-strong
+     even though they resolve to the same monochrome scale — a theme preset's
+     hard offset shadows (e.g. neobrutalism) need a bolder, more saturated value
+     than a border does to read as "authentic," so this is its own token rather
+     than reusing border-strong. Unused by the default theme's soft rgba()
+     shadows above; only a preset that opts in (theme-presets.ts) references it. */
+  --sv-color-shadow-strong: var(--sv-grey-950);
+
   --sv-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.1);
   --sv-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.08); /* e1 — card hover lift */
   --sv-shadow-popover:
@@ -75,6 +94,17 @@
   --sv-shadow-overlay: 0 10px 38px rgba(0, 0, 0, 0.18), 0 6px 12px rgba(0, 0, 0, 0.12);
   --sv-shadow-control: 0 1px 3px rgba(0, 0, 0, 0.2); /* small interactive-control shadows, e.g. Toggle thumb */
 
+  /* Button press-interaction tokens (RFC 0094). Consumed unconditionally by
+     Button.module.css's :active rule — these defaults (none/0/0) make that
+     rule a no-op for today's default look. A theme preset (e.g.
+     neobrutalism) sets non-zero values to get a tactile "press into shadow"
+     effect. Not overridden under [data-theme='dark'] below — like the
+     shadow tokens above, a theme preset's own light/dark variants set these
+     directly rather than this file deriving a dark-mode default for them. */
+  --sv-button-shadow: none;
+  --sv-button-press-x: 0;
+  --sv-button-press-y: 0;
+
   /*
    * Instance identity tokens (RFC 0027 / RFC 0032 rename). Distinct namespace from --sv-color-*:
    * these hold URLs (not colours) and are set once by the operator, not swapped
@@ -122,6 +152,8 @@
 
   --sv-color-scrim: rgba(0, 0, 0, 0.65);
 
+  --sv-color-shadow-strong: var(--sv-grey-50);
+
   --sv-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5);
   --sv-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.3);
   --sv-shadow-popover: 0 4px 16px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);

package/src/tokens/theme-presets.css

@@ -0,0 +1,33 @@
+/*
+ * Generated by scripts/generate-theme-presets-css.ts — do not edit.
+ * Source of truth: packages/ui/src/tokens/theme-presets.ts
+ *
+ * For Storybook / standalone (non-runtime) use only — set data-theme-preset
+ * on the document root element (<html>), never a nested wrapper. See the
+ * generator script's doc comment for why.
+ */
+[data-theme-preset='neobrutalism'] {
+  --sv-radius-scale: 0;
+  --sv-border-width-hairline: 2px;
+  --sv-shadow-card: 4px 4px 0 0 var(--sv-color-shadow-strong);
+  --sv-shadow-hover: 6px 6px 0 0 var(--sv-color-shadow-strong);
+  --sv-shadow-popover: 4px 4px 0 0 var(--sv-color-shadow-strong);
+  --sv-shadow-overlay: 8px 8px 0 0 var(--sv-color-shadow-strong);
+  --sv-shadow-control: 2px 2px 0 0 var(--sv-color-shadow-strong);
+  --sv-button-shadow: 4px 4px 0 0 var(--sv-color-shadow-strong);
+  --sv-button-press-x: 4px;
+  --sv-button-press-y: 4px;
+}
+
+[data-theme-preset='neobrutalism'][data-theme='dark'] {
+  --sv-radius-scale: 0;
+  --sv-border-width-hairline: 2px;
+  --sv-shadow-card: 4px 4px 0 0 var(--sv-color-shadow-strong);
+  --sv-shadow-hover: 6px 6px 0 0 var(--sv-color-shadow-strong);
+  --sv-shadow-popover: 4px 4px 0 0 var(--sv-color-shadow-strong);
+  --sv-shadow-overlay: 8px 8px 0 0 var(--sv-color-shadow-strong);
+  --sv-shadow-control: 2px 2px 0 0 var(--sv-color-shadow-strong);
+  --sv-button-shadow: 4px 4px 0 0 var(--sv-color-shadow-strong);
+  --sv-button-press-x: 4px;
+  --sv-button-press-y: 4px;
+}

package/src/tokens/theme-presets.ts

@@ -0,0 +1,72 @@
+/**
+ * Sovereign Design System — theme presets (RFC 0094).
+ *
+ * The single source of truth for every built-in theme preset's token
+ * overrides. Deliberately plain data (no CSS-in-JS, no build dependency) so
+ * it can be consumed two ways with zero duplication:
+ *   - `scripts/generate-theme-presets-css.ts` (`pnpm generate:theme-presets`)
+ *     reads this file and emits `theme-presets.css` for Storybook/standalone
+ *     consumers.
+ *   - `runtime/src/instance-style.ts` (RFC 0095) imports `THEME_PRESETS`
+ *     directly and flattens the selected preset into the existing
+ *     `:root { ... }` instance-style injection — no CSS parsing, no second
+ *     copy of these values to drift out of sync.
+ *
+ * Presets are closed and built-in (RFC 0094's "Alternatives considered") —
+ * add a new one here and re-run the generator, never accept arbitrary
+ * operator-supplied values into this shape.
+ *
+ * `'default'` MUST stay `{ light: {}, dark: {} }` — an empty override set is
+ * what guarantees today's look stays byte-identical for every instance that
+ * never opts into a different preset.
+ */
+
+export type ThemePresetName = 'default' | 'neobrutalism';
+
+export const THEME_PRESET_NAMES: readonly ThemePresetName[] = ['default', 'neobrutalism'];
+
+export interface ThemePresetTokens {
+  /** Sparse — only tokens this preset overrides. Everything else falls through to the default. */
+  light: Record<string, string>;
+  dark: Record<string, string>;
+}
+
+export const THEME_PRESETS: Record<ThemePresetName, ThemePresetTokens> = {
+  default: { light: {}, dark: {} },
+  neobrutalism: {
+    light: {
+      // --sv-radius-scale is a calc()-chain root: --sv-radius-sm..-3xl are
+      // all `calc(var(--sv-radius-scale) * ...)`, declared once at :root
+      // (primitives.css). This ONLY cascades correctly if the selector this
+      // override lands under matches :root itself (<html>) — a scoped
+      // descendant selector would set --sv-radius-scale there, but the
+      // dependent --sv-radius-* tokens were never re-declared at that node,
+      // so they'd keep inheriting their :root-resolved value unchanged. See
+      // the `withRadius` decorator comment in `.storybook/preview.ts` for
+      // the same constraint, discovered independently while building RFC
+      // 0077's Token Gallery preset demo.
+      '--sv-radius-scale': '0',
+      '--sv-border-width-hairline': '2px',
+      '--sv-shadow-card': '4px 4px 0 0 var(--sv-color-shadow-strong)',
+      '--sv-shadow-hover': '6px 6px 0 0 var(--sv-color-shadow-strong)',
+      '--sv-shadow-popover': '4px 4px 0 0 var(--sv-color-shadow-strong)',
+      '--sv-shadow-overlay': '8px 8px 0 0 var(--sv-color-shadow-strong)',
+      '--sv-shadow-control': '2px 2px 0 0 var(--sv-color-shadow-strong)',
+      '--sv-button-shadow': '4px 4px 0 0 var(--sv-color-shadow-strong)',
+      '--sv-button-press-x': '4px',
+      '--sv-button-press-y': '4px',
+    },
+    dark: {
+      '--sv-radius-scale': '0',
+      '--sv-border-width-hairline': '2px',
+      '--sv-shadow-card': '4px 4px 0 0 var(--sv-color-shadow-strong)',
+      '--sv-shadow-hover': '6px 6px 0 0 var(--sv-color-shadow-strong)',
+      '--sv-shadow-popover': '4px 4px 0 0 var(--sv-color-shadow-strong)',
+      '--sv-shadow-overlay': '8px 8px 0 0 var(--sv-color-shadow-strong)',
+      '--sv-shadow-control': '2px 2px 0 0 var(--sv-color-shadow-strong)',
+      '--sv-button-shadow': '4px 4px 0 0 var(--sv-color-shadow-strong)',
+      '--sv-button-press-x': '4px',
+      '--sv-button-press-y': '4px',
+    },
+  },
+};