@sovereignfs/ui 0.54.0 → 0.89.1

package/NOTICE

@@ -22,3 +22,11 @@ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
 LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
+
+---
+
+This package includes the Hanken Grotesk typeface (src/fonts, Fontsource's build of the Google Fonts release).
+
+Copyright 2021 The Hanken Grotesk Project Authors (https://github.com/marcologous/hanken-grotesk)
+
+SIL Open Font License, Version 1.1. The full text is in fonts/OFL.txt, and at https://openfontlicense.org.

package/README.md

@@ -1,6 +1,6 @@
 # @sovereignfs/ui
 
-Sovereign Design System — design tokens and React components for building [Sovereign](https://github.com/sovereignfs/sovereign) plugins.
+Sovereign Design System — design tokens and React components for building [Sovereign](https://github.com/sovereignfs) apps.
 
 ## Installation
 
@@ -51,7 +51,7 @@ Primitive tokens   --sv-grey-50 … --sv-grey-950  /  --sv-space-1 … --sv-spac
 Semantic tokens    --sv-color-surface  /  --sv-color-text-primary  /  --sv-shadow-card
 ```
 
-Plugin developers reference **semantic tokens** — never primitive colours directly. Dark mode and instance theming work by swapping semantic token values; no component changes required.
+App developers reference **semantic tokens** — never primitive colours directly. Dark mode and instance theming work by swapping semantic token values; no component changes required.
 
 ## Icon component
 
@@ -66,10 +66,8 @@ Available icon names: `activity`, `alert-triangle`, `bell`, `check`, `chevron-do
 ## Documentation
 
 - [Storybook — live component & token gallery](https://sovereignfs.github.io/storybook)
-- [Design system reference](https://github.com/sovereignfs/sovereign/blob/main/docs/design-system.md)
-- [Plugin development guide](https://github.com/sovereignfs/sovereign/blob/main/docs/plugin-development.md)
-- [SDK stability & semver policy](https://github.com/sovereignfs/sovereign/blob/main/docs/sdk-stability.md)
+- [Design system reference](../../docs/design-system.md)
 
 ## License
 
-AGPL-3.0-or-later
+[MPL-2.0](LICENSE). The icons are derived from Lucide (ISC); see [NOTICE](NOTICE).

package/dist/Accordion.module.css

@@ -1,3 +1,3 @@
 .root {
-  border-top: 1px solid var(--sv-color-border);
+  border-top: var(--sv-border-width-hairline) solid var(--sv-color-border);
 }

package/dist/Alert.module.css

@@ -3,7 +3,7 @@
   align-items: flex-start;
   gap: var(--sv-space-2);
   padding: var(--sv-space-3) var(--sv-space-4);
-  border: 1px solid transparent;
+  border: var(--sv-border-width-hairline) solid transparent;
   border-radius: var(--sv-radius-md);
   font-size: var(--sv-font-size-sm);
 }

package/dist/AppsLauncher.module.css

@@ -0,0 +1,102 @@
+.trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: var(--sv-radius-md);
+  background: transparent;
+  color: var(--sv-color-text-primary);
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+  .trigger:hover {
+    background: var(--sv-color-surface-sunken);
+  }
+}
+
+.header {
+  padding: var(--sv-space-4) var(--sv-space-3) var(--sv-space-1);
+  font-size: var(--sv-font-size-sm);
+  font-weight: var(--sv-font-weight-semibold);
+  color: var(--sv-color-text-primary);
+}
+
+.loading {
+  display: flex;
+  justify-content: center;
+  padding: var(--sv-space-6);
+}
+
+.error {
+  margin: 0;
+  padding: 0 var(--sv-space-3) var(--sv-space-3);
+  color: var(--sv-color-error-text);
+  font-size: var(--sv-font-size-sm);
+}
+
+.grid {
+  display: grid;
+  /* minmax(0, 1fr), not a plain 1fr — a plain 1fr track can grow past the
+     grid's own available width to fit a tile name's min-content size
+     (nowrap), blowing the grid out past the popover's own width instead of
+     letting the name truncate with ellipsis as intended. */
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--sv-space-1);
+  padding: var(--sv-space-2);
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.tile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--sv-space-2);
+  padding: var(--sv-space-2);
+  border: none;
+  border-radius: var(--sv-radius-md);
+  background: transparent;
+  text-decoration: none;
+  color: var(--sv-color-text-primary);
+  text-align: center;
+  font: inherit;
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+  .tile:hover {
+    background: var(--sv-color-surface-sunken);
+  }
+}
+
+.tileIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--sv-radius-md);
+  background: var(--sv-color-surface-sunken);
+  font-size: var(--sv-font-size-xs);
+  font-weight: var(--sv-font-weight-semibold);
+  overflow: hidden;
+}
+
+.tileName {
+  font-size: var(--sv-font-size-caption);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.trigger:focus-visible,
+.tile:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+}

package/dist/Avatar.module.css

@@ -4,7 +4,7 @@
   justify-content: center;
   border-radius: 50%;
   background: var(--sv-color-surface-raised);
-  border: 1px solid var(--sv-color-border);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-border);
   overflow: hidden;
   flex-shrink: 0;
   font-weight: var(--sv-font-weight-medium);

package/dist/Badge.module.css

@@ -19,7 +19,7 @@
 /* role — neutral fill, border */
 .role {
   background: var(--sv-color-surface-sunken);
-  border: 1px solid var(--sv-color-border);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-border);
   color: var(--sv-color-text-primary);
   font-weight: var(--sv-font-weight-semibold);
 }
@@ -31,32 +31,32 @@
 
 .chipGreen {
   background: var(--sv-color-success-surface);
-  border: 1px solid var(--sv-color-success-border);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-success-border);
   color: var(--sv-color-success-text);
 }
 
 .chipAmber {
   background: var(--sv-color-warning-surface);
-  border: 1px solid var(--sv-color-warning-border);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-warning-border);
   color: var(--sv-color-warning-text);
 }
 
 .chipRed {
   background: var(--sv-color-error-surface);
-  border: 1px solid var(--sv-color-error-border);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-error-border);
   color: var(--sv-color-error-text);
 }
 
 .chipNeutral {
   background: var(--sv-color-surface-sunken);
-  border: 1px solid var(--sv-color-border);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-border);
   color: var(--sv-color-text-muted);
 }
 
 /* mono — monospace font, neutral surface, for type tags / versions */
 .mono {
   background: var(--sv-color-surface-sunken);
-  border: 1px solid var(--sv-color-border);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-border);
   color: var(--sv-color-text-muted);
   font-family: var(--sv-font-family-mono);
 }
@@ -66,7 +66,15 @@
    composed partials fighting over the same properties. `.role.md`,
    `.status.md`, and `.mono.md` reproduce the badge's original (and, until
    now, only) sizing exactly, so the default (no `size` prop) renders
-   pixel-identical to before this scale existed. */
+   pixel-identical to before this scale existed. `xs` was added later, for a
+   badge sitting inline next to larger text where `sm` (already the smallest
+   type-scale token, `--sv-font-size-label`) still read oversized — it needed
+   a new, smaller primitive (`--sv-font-size-2xs`) rather than reusing one. */
+.role.xs {
+  padding: 1px 3px;
+  font-size: var(--sv-font-size-2xs);
+}
+
 .role.sm {
   padding: 1px var(--sv-space-1);
   font-size: var(--sv-font-size-label);
@@ -82,6 +90,11 @@
   font-size: var(--sv-font-size-sm);
 }
 
+.mono.xs {
+  padding: 1px 3px;
+  font-size: var(--sv-font-size-2xs);
+}
+
 .mono.sm {
   padding: 1px var(--sv-space-1);
   font-size: var(--sv-font-size-label);
@@ -100,6 +113,11 @@
 /* status keeps a tighter left edge than right at every size — the dot +
    gap already read as space before the text, so a full padding-inline-start
    would double it up. */
+.status.xs {
+  padding: 1px 3px 1px 2px;
+  font-size: var(--sv-font-size-2xs);
+}
+
 .status.sm {
   padding: 1px var(--sv-space-1) 1px 3px;
   font-size: var(--sv-font-size-label);
@@ -122,6 +140,11 @@
   flex-shrink: 0;
 }
 
+.xs .dot {
+  width: 4px;
+  height: 4px;
+}
+
 .sm .dot {
   width: 5px;
   height: 5px;

package/dist/BalanceChip.module.css

@@ -4,7 +4,7 @@
   max-width: 100%;
   min-height: 24px;
   padding: 2px var(--sv-space-2);
-  border: 1px solid var(--sv-color-border);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-border);
   border-radius: var(--sv-radius-full);
   font-family: var(--sv-font-family);
   font-size: var(--sv-font-size-xs);

package/dist/Button.module.css

@@ -3,7 +3,7 @@
   align-items: center;
   justify-content: center;
   gap: var(--sv-space-2);
-  border: 1px solid transparent;
+  border: var(--sv-border-width-hairline) solid transparent;
   border-radius: var(--sv-radius-md);
   font-family: var(--sv-font-family);
   font-weight: var(--sv-font-weight-medium);
@@ -12,10 +12,15 @@
   /* Removes the ~300ms double-tap-to-zoom delay on touch — this is a tap
      target, never a pinch-zoom surface. */
   touch-action: manipulation;
+  /* --sv-button-shadow defaults to `none` (semantic.css) — this box-shadow
+     line is a no-op for every theme that doesn't set it (RFC 0094). */
+  box-shadow: var(--sv-button-shadow);
   transition:
     background-color 0.15s ease,
     border-color 0.15s ease,
-    color 0.15s ease;
+    color 0.15s ease,
+    transform 0.1s ease,
+    box-shadow 0.1s ease;
 }
 
 .button:focus-visible {
@@ -28,6 +33,17 @@
   cursor: not-allowed;
 }
 
+/* --sv-button-press-x/-y default to 0 (semantic.css) — translate(0, 0) is a
+   no-op, so this rule only produces a visible "press into shadow" effect
+   for a theme preset that sets non-zero values (RFC 0094). Unguarded by
+   (hover: hover) deliberately: :active press feedback is wanted on every
+   input type, the same reasoning documented for Button's existing
+   color-mix() :active background changes below. */
+.button:active:not(:disabled) {
+  transform: translate(var(--sv-button-press-x), var(--sv-button-press-y));
+  box-shadow: none;
+}
+
 /* Touch target: gated to (pointer: coarse) — the *primary* pointer, not
    (any-pointer: coarse) — so a touchscreen laptop with mouse/trackpad as
    primary keeps desktop density (see mobile design-system plan, Part 4 #5). */
@@ -151,3 +167,8 @@
 .destructive:active:not(:disabled) {
   background-color: color-mix(in srgb, var(--sv-color-error-surface) 85%, black);
 }
+
+/* A `ButtonLink` is an anchor in a button's clothes: no underline, and the same height as the button beside it. */
+.link {
+  text-decoration: none;
+}

package/dist/Card.module.css

@@ -6,7 +6,7 @@
    exists. */
 .card {
   background: var(--sv-color-surface-raised);
-  border: 1px solid var(--sv-color-border);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-border);
   border-radius: var(--sv-radius-lg);
   box-shadow: var(--sv-shadow-card);
 }
@@ -40,3 +40,9 @@
   outline: 2px solid var(--sv-color-focus-ring);
   outline-offset: 2px;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .interactive {
+    transition: none;
+  }
+}

package/dist/CardTile.module.css

@@ -0,0 +1,187 @@
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--sv-card-tile-min-width, 200px), 1fr));
+  gap: var(--sv-space-4);
+}
+
+/* A fixed column width (not `1fr`, and — as important — not `max-content`
+   either) — every real consumer of `dense` mode (Docs' folder/document
+   tiles, this file's own Storybook gallery) pairs it with `variant="icon"`
+   tiles carrying a name of unpredictable length that must ellipsis-truncate
+   past a point. `max-content` was tried first, on the reasoning that "a
+   tile keeps its own natural width instead of stretching to fill leftover
+   row space, so the empty area around a small icon tile stays roughly
+   square" — but `max-content` track sizing through this grid's nested
+   grid → flex → block(/inline-block) → text chain did not reliably account
+   for a descendant label's true content width in practice: measured live,
+   a 110px-wide label landed in a track that resolved to 97px, silently
+   overflowing with no ellipsis ever triggering (not the intended "grows to
+   fit," and not truncated either — just broken). A uniform fixed width
+   sidesteps that whole class of bug: every tile in a `dense` grid is
+   exactly `--sv-card-tile-min-width` wide, full stop, and the descendant
+   label (an `overflow: hidden; text-overflow: ellipsis` `inline-block` with
+   `max-width: 100%`) truncates reliably against that always-known width —
+   short names still read as compact/square, long ones truncate cleanly
+   instead of bleeding past their tile. Tighter gap to match. */
+.gridDense {
+  grid-template-columns: repeat(auto-fill, var(--sv-card-tile-min-width, 200px));
+  gap: var(--sv-space-2);
+}
+
+/* Chrome (border/radius/shadow/background) lives on this outer box, same
+   tokens `Card` itself uses — but padding-free, so `.banner` below can
+   bleed all the way to the edges, which `Card`'s single padded box can't
+   do. */
+.tile {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  border: 1px solid var(--sv-color-border);
+  border-radius: var(--sv-radius-lg);
+  background: var(--sv-color-surface-raised);
+  box-shadow: var(--sv-shadow-card);
+}
+
+.banner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  color: var(--sv-color-text-subtle);
+  /* Neutral default when no `bannerColor` is supplied — an inline style
+     on the element overrides this. */
+  background-color: var(--sv-color-surface-sunken);
+}
+
+.footer {
+  padding: var(--sv-space-3) var(--sv-space-4);
+}
+
+/* `variant="icon"` modifier — a plain "Finder icon" tile: no card chrome,
+   just a large centered icon with a label beneath it. `.banner`/`.footer`
+   are the same two elements the card variant uses, restyled here rather
+   than duplicated, so both variants stay structurally identical. */
+.tileIcon {
+  align-items: center;
+  border: none;
+  border-radius: var(--sv-radius-md);
+  background: none;
+  box-shadow: none;
+  padding: var(--sv-space-3) var(--sv-space-2);
+}
+
+@media (hover: hover) {
+  .tileIcon:hover {
+    background: var(--sv-color-surface-sunken);
+  }
+}
+
+.tileIcon .banner {
+  height: auto;
+  background: none;
+  color: var(--sv-color-text-muted);
+}
+
+.tileIcon .banner svg {
+  width: 48px;
+  height: 48px;
+}
+
+/* `width: 100%` is load-bearing, not decorative — `.tile` sets
+   `align-items: center` (so the icon banner centers itself horizontally),
+   and cross-axis `center` alignment sizes a flex item to its own preferred
+   (content-based) width and centers *that* within the container, rather
+   than clamping it to the container's width the way `stretch` would.
+   Without an explicit width here, a `nowrap` + `text-overflow: ellipsis`
+   label inside (a consumer's own truncation CSS) keeps its full
+   content-driven preferred width and gets centered straddling both edges of
+   `.tile` — `overflow: hidden` on `.tile` doesn't help, since this child's
+   box is genuinely laid out wider than its own container, not merely
+   painting past an already-settled one. `min-width: 0` alone (the more
+   common flex-truncation fix) does NOT fix this specific case: that only
+   lifts the auto-min-size floor that blocks *shrinking under stretch*, and
+   this axis was never being stretched to begin with. Confirmed live at a
+   viewport narrow enough that `.tile`'s own resolved width is well under
+   the label's preferred width — only `width: 100%` actually constrains it;
+   a wider test viewport had accidentally masked the bug by giving `.tile`
+   enough natural room that the oversized `.footer` fit anyway. */
+.tileIcon .footer {
+  width: 100%;
+  min-width: 0;
+  padding: var(--sv-space-2) 0 0;
+  color: var(--sv-color-text-primary);
+  text-align: center;
+  text-decoration: none;
+}
+
+/* Plain centered placeholder — no banner strip, so a ghost "add new" tile
+   reads as an empty slot rather than mimicking a real tile's anatomy.
+   `min-height` matches a real `.tile`'s own natural height (banner +
+   single-line footer) so the two read as the same size. */
+.newTile {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sv-space-2);
+  min-height: 87px;
+  width: 100%;
+  height: 100%;
+  color: var(--sv-color-text-muted);
+  border: 1px dashed var(--sv-color-border-strong);
+  border-radius: var(--sv-radius-lg);
+  background: none;
+  cursor: pointer;
+  transition:
+    border-color 0.15s ease,
+    color 0.15s ease;
+}
+
+@media (hover: hover) {
+  .newTile:hover {
+    border-color: var(--sv-color-text-muted);
+    color: var(--sv-color-text-primary);
+  }
+}
+
+.newTile:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+}
+
+/* `variant="icon"` modifier — matches a `variant="icon"` `CardTile`'s own
+   footprint. Icon-only, no visible label (see `NewCardTile`'s own doc
+   comment) — a plain "+" at the DS's own `size="md"` (unlike
+   `.tileIcon .banner svg`'s real-content 48px override, deliberately not
+   repeated here) reads as self-explanatory once every sibling tile in the
+   grid is already an unlabeled icon.
+   `width`/`height: 100%` (not `auto`, despite this being a "shrink to
+   content" variant conceptually) — a real `CardTile` sibling in the same
+   `dense` grid fills its grid cell via the grid's own item-stretch, which
+   only reaches an `auto`-sized *direct* grid child; wrapping this trigger
+   in a `Menu`/`Popover` (`HomeWorkbooksList.tsx`'s "add workbook" tile)
+   inserts an intermediate `display: inline-flex` container between this
+   button and the grid, and a flex container's default cross/main-axis
+   sizing does not itself relay grid-stretch through to a `width: auto`
+   flex child — confirmed live: the button rendered full-height but only
+   as wide as its own icon+padding (~38px) inside a 160px cell. Explicit
+   100% percentages resolve against whichever immediate parent box is
+   sized to the grid cell — the grid track directly, or the intermediate
+   flex container once IT has already been stretched to that width — so
+   this works correctly either way, unlike relying on stretch alone. */
+.newTileIcon {
+  flex-direction: column;
+  justify-content: center;
+  gap: 0;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  padding: var(--sv-space-3) var(--sv-space-2);
+  border-radius: var(--sv-radius-md);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .newTile {
+    transition: none;
+  }
+}

package/dist/CheckableListRow.module.css

@@ -93,3 +93,11 @@
 .trailing {
   flex-shrink: 0;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .box,
+  .label,
+  .label::after {
+    transition: none;
+  }
+}

package/dist/Checkbox.module.css

@@ -109,3 +109,11 @@
   opacity: 0.5;
   cursor: not-allowed;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .box,
+  .label,
+  .label::after {
+    transition: none;
+  }
+}

package/dist/CodeTextarea.module.css

@@ -13,7 +13,7 @@
   overflow: auto;
   resize: vertical;
   background: var(--sv-color-surface);
-  border: 1px solid var(--sv-color-border-strong);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-border-strong);
   border-radius: var(--sv-radius-md);
   transition:
     border-color 0.15s ease,
@@ -51,3 +51,9 @@
   border-color: var(--sv-color-error-border);
   box-shadow: 0 0 0 2px var(--sv-color-error-border);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .textarea {
+    transition: none;
+  }
+}

package/dist/Collapsible.module.css

@@ -1,5 +1,5 @@
 .root {
-  border-bottom: 1px solid var(--sv-color-border);
+  border-bottom: var(--sv-border-width-hairline) solid var(--sv-color-border);
 }
 
 .trigger {