@sovereignfs/ui 0.54.0 → 0.83.1

package/dist/SplitPane.module.css

@@ -5,7 +5,7 @@
     minmax(0, calc(100% - var(--split-pane-primary-size, 50%)));
   width: 100%;
   min-height: 320px;
-  border: 1px solid var(--sv-color-border);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-border);
   border-radius: var(--sv-radius-lg);
   overflow: hidden;
   background: var(--sv-color-surface);
@@ -25,7 +25,7 @@
 }
 
 .pane + .pane {
-  border-left: 1px solid var(--sv-color-border);
+  border-left: var(--sv-border-width-hairline) solid var(--sv-color-border);
 }
 
 .handle {
@@ -34,7 +34,7 @@
   min-width: 12px;
   padding: 0;
   border: 0;
-  border-inline: 1px solid var(--sv-color-border);
+  border-inline: var(--sv-border-width-hairline) solid var(--sv-color-border);
   cursor: col-resize;
   background: var(--sv-color-surface-sunken);
 }
@@ -79,7 +79,7 @@
   }
 
   .pane + .pane {
-    border-top: 1px solid var(--sv-color-border);
+    border-top: var(--sv-border-width-hairline) solid var(--sv-color-border);
     border-left: 0;
   }
 }

package/dist/StatusBadge.module.css

@@ -5,7 +5,7 @@
   min-height: 24px;
   gap: var(--sv-space-1);
   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/StepStrip.module.css

@@ -0,0 +1,53 @@
+.strip {
+  display: flex;
+  align-items: stretch;
+  overflow-x: auto;
+}
+
+.step {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.connector {
+  width: var(--sv-space-4);
+  height: 2px;
+  flex-shrink: 0;
+  background: var(--sv-color-border);
+}
+
+.connectorDashed {
+  background-image: repeating-linear-gradient(
+    to right,
+    var(--sv-color-border) 0,
+    var(--sv-color-border) 4px,
+    transparent 4px,
+    transparent 7px
+  );
+}
+
+.addChip {
+  all: unset;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-1);
+  padding: var(--sv-space-3) var(--sv-space-4);
+  border: var(--sv-border-width-hairline) dashed var(--sv-color-border);
+  border-radius: var(--sv-radius-lg);
+  color: var(--sv-color-text-muted);
+  font-size: var(--sv-font-size-sm);
+  cursor: pointer;
+}
+
+.addChip:hover {
+  background: var(--sv-color-surface-sunken);
+  color: var(--sv-color-text-primary);
+}
+
+.addChip:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+}

package/dist/SuggestionInput.module.css

@@ -7,7 +7,7 @@
   line-height: 1.5;
   color: var(--sv-color-text-primary);
   background-color: 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,
@@ -99,5 +99,5 @@
 
 .divider {
   margin: var(--sv-space-1) var(--sv-space-2);
-  border-top: 1px solid var(--sv-color-border);
+  border-top: var(--sv-border-width-hairline) solid var(--sv-color-border);
 }

package/dist/SwipableMobileCarousel.module.css

@@ -39,10 +39,19 @@
   flex-direction: column;
 }
 
-.dots {
+.indicatorSlot {
   /* Overlays the bottom of .wrap rather than taking its own layout row —
      matches both sovereign-tasks' and sovereign-shopper's existing dots
-     placement. */
+     placement. Applied by the carousel itself around WHATEVER
+     renderIndicator returns (the default SwipableMobileCarouselDots or a
+     caller-supplied override) — a custom renderIndicator has no way to
+     import this module's locally-scoped class itself (CSS Modules classnames
+     aren't cross-file importable), so positioning must live here, not be
+     something each indicator implementation opts into. Previously this class
+     was only ever applied to the *default* indicator branch, which silently
+     left any custom renderIndicator unpositioned — a static, in-flow sibling
+     pushed below the full-height .scroller and clipped out of view instead
+     of overlaid on top of it. */
   position: absolute;
   left: 0;
   right: 0;
@@ -50,6 +59,6 @@
   pointer-events: none;
 }
 
-.dots > * {
+.indicatorSlot > * {
   pointer-events: auto;
 }

package/dist/SwipableMobileCarouselDots.module.css

@@ -5,6 +5,21 @@
   gap: var(--sv-space-2);
 }
 
+/* Opt-in — see the `density` prop doc comment. Shrinks both the gap and each
+   dot's own hit target (20px -> 16px) — for a carousel with enough slides
+   that even the space-1 gap alone still read as too wide. The visible 6px
+   dot is unchanged; only the surrounding tap-target box shrinks, via the
+   descendant override below rather than a second dot variant, so this stays
+   a pure CSS opt-in with no JS/prop plumbing beyond `density` itself. */
+.dotsCompact {
+  gap: var(--sv-space-1);
+}
+
+.dotsCompact .dot {
+  width: 16px;
+  height: 16px;
+}
+
 .dot {
   /* A 6px visible dot is too small a hit target on its own — the button's
      real box is larger (20px) with the dot itself painted by ::before and

package/dist/SwipeStack.module.css

@@ -0,0 +1,101 @@
+.wrap {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sv-space-3);
+  height: 100%;
+  width: 100%;
+}
+
+.stack {
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.peek {
+  position: absolute;
+  inset: 0;
+  transform: scale(0.94) translateY(var(--sv-space-3));
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.cardSlot {
+  position: absolute;
+  inset: 0;
+}
+
+/* Styled directly rather than wrapping the Card component: Card doesn't
+   forward a ref, and this element must be the exact node useSwipeStack
+   translates/rotates as one unit — a Card wrapping an inner dragged div
+   would leave its own border/shadow visually static while only the inner
+   div moved. */
+.card {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  background: var(--sv-color-surface-raised);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-border);
+  border-radius: var(--sv-radius-lg);
+  box-shadow: var(--sv-shadow-card);
+  touch-action: none; /* always overridden inline with useSwipeStack's computed value */
+  user-select: none;
+  cursor: grab;
+}
+
+.card:active {
+  cursor: grabbing;
+}
+
+.stamp {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-1);
+  padding: var(--sv-space-1) var(--sv-space-3);
+  border: 2px solid var(--sv-color-text-primary);
+  border-radius: var(--sv-radius-md);
+  background: var(--sv-color-surface-raised);
+  color: var(--sv-color-text-primary);
+  font-family: var(--sv-font-family);
+  font-size: var(--sv-font-size-sm);
+  font-weight: var(--sv-font-weight-semibold);
+  pointer-events: none;
+}
+
+.stampUp {
+  top: var(--sv-space-4);
+  left: 50%;
+  transform: translateX(-50%);
+  opacity: var(--sv-stack-progress-up, 0);
+}
+
+.stampDown {
+  bottom: var(--sv-space-4);
+  left: 50%;
+  transform: translateX(-50%);
+  opacity: var(--sv-stack-progress-down, 0);
+}
+
+.stampLeft {
+  top: var(--sv-space-4);
+  left: var(--sv-space-4);
+  transform: rotate(-8deg);
+  opacity: var(--sv-stack-progress-left, 0);
+}
+
+.stampRight {
+  top: var(--sv-space-4);
+  right: var(--sv-space-4);
+  transform: rotate(8deg);
+  opacity: var(--sv-stack-progress-right, 0);
+}
+
+.actions {
+  display: flex;
+  justify-content: center;
+  gap: var(--sv-space-2);
+  flex: 0 0 auto;
+}

package/dist/SystemBanner.module.css

@@ -3,6 +3,16 @@
   top: 0;
   /* Sits above sidebar rail (z-index ~10) but below dialogs/overlays (z-index 100) */
   z-index: 50;
+  /* WebKit momentum-scroll re-tiling quirk: a position: sticky element with
+     no compositing layer of its own can go stale/blank for a stretch of
+     frames during a fast scroll on iOS Safari instead of repainting at its
+     stuck position. translateZ(0) promotes it to its own layer, rasterized
+     independently of the scroller's tile grid. See
+     docs/architecture-rules.md — found and fixed across three sticky
+     elements in sovereign-tasks, applied here proactively since this
+     component is exactly the same pattern (sticky, inside scrolling
+     content). */
+  transform: translateZ(0);
   display: flex;
   align-items: center;
   justify-content: center;

package/dist/Table.module.css

@@ -20,11 +20,11 @@
 }
 
 .head .row {
-  border-bottom: 1px solid var(--sv-color-border-strong);
+  border-bottom: var(--sv-border-width-hairline) solid var(--sv-color-border-strong);
 }
 
 .body .row {
-  border-bottom: 1px solid var(--sv-color-border);
+  border-bottom: var(--sv-border-width-hairline) solid var(--sv-color-border);
 }
 
 .body .row:last-child {

package/dist/Tabs.module.css

@@ -1,6 +1,6 @@
 .tablist {
   display: flex;
-  border-bottom: 1px solid var(--sv-color-border);
+  border-bottom: var(--sv-border-width-hairline) solid var(--sv-color-border);
   /* Horizontal scroll on mobile — scrollbar hidden for clean appearance */
   overflow-x: auto;
   scrollbar-width: none;

package/dist/TagInput.module.css

@@ -15,7 +15,7 @@
   padding: 5px var(--sv-space-2);
   color: var(--sv-color-text-primary);
   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,
@@ -50,7 +50,7 @@
   padding-inline: var(--sv-space-2) 2px;
   color: var(--sv-color-text-primary);
   background: var(--sv-color-surface-sunken);
-  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/Textarea.module.css

@@ -7,7 +7,7 @@
   line-height: 1.5;
   color: var(--sv-color-text-primary);
   background-color: 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);
   resize: vertical;
   transition:
@@ -37,3 +37,11 @@
   cursor: not-allowed;
   resize: none;
 }
+
+/* Height is driven by the `autoGrow` layout effect (Textarea.tsx), not the
+   user — resize: none avoids a drag handle that would fight it; overflow
+   hidden avoids a scrollbar flashing on between the old and new height. */
+.textareaAutoGrow {
+  overflow: hidden;
+  resize: none;
+}

package/dist/ThreeColumnLayout.module.css

@@ -0,0 +1,35 @@
+.shell {
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+}
+
+.sidebar {
+  flex-shrink: 0;
+  overflow-y: auto;
+  background: var(--sv-color-surface-raised);
+  border-right: var(--sv-border-width-hairline) solid var(--sv-color-border);
+}
+
+/*
+ * `display: none`, not `width: 0` — a zero-width flex item still paints its
+ * own `border-right` as a 1px hairline down the edge of the viewport, which
+ * reads as a stray line rather than a hidden column.
+ */
+.sidebarHidden {
+  display: none;
+}
+
+.main {
+  flex: 1;
+  min-width: 0;
+  overflow-y: auto;
+  background: var(--sv-color-surface);
+}
+
+.detail {
+  flex-shrink: 0;
+  overflow-y: auto;
+  background: var(--sv-color-surface-raised);
+  border-left: var(--sv-border-width-hairline) solid var(--sv-color-border);
+}

package/dist/Toast.module.css

@@ -1,7 +1,9 @@
 /* Toast — transient notification snackbar.
  *
- * Fixed top-right, 320px. Slides in from above. Each toast auto-dismisses
- * after `duration` ms. Leading status icon reinforces category at a glance.
+ * Desktop: fixed top-right, 320px, slides in from above. Mobile floats
+ * bottom-center instead (see the media query near the bottom of this file
+ * for why). Each toast auto-dismisses after `duration` ms. Leading status
+ * icon reinforces category at a glance.
  *
  * Category variants map to the semantic status tokens (info/success/warning/
  * error) so the visual language is consistent with banners and badges.
@@ -28,7 +30,7 @@
   padding: var(--sv-space-3) var(--sv-space-4);
   background: var(--sv-color-surface-raised);
   color: var(--sv-color-text-primary);
-  border: 1px solid var(--sv-color-border);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-border);
   border-radius: var(--sv-radius-md);
   box-shadow: var(--sv-shadow-overlay);
   pointer-events: all;
@@ -124,6 +126,63 @@
   }
 }
 
+/* Mobile (<=768px, the design system's canonical breakpoint): float
+ * bottom-center instead of top-right. Clears any mobile footer/tab bar
+ * (--sv-shell-footer-height) and the home-indicator safe area, plus extra
+ * breathing room so it visibly floats above the edge rather than sitting
+ * flush against it — matches the platform convention (Android Toast,
+ * Material 3's "floating" Snackbar). Deliberately not threaded through
+ * --sv-shell-header-height instead: a toast can appear on a page with or
+ * without a self-rendered mobile header, and bottom-anchoring sidesteps that
+ * entirely rather than requiring every call site to account for it.
+ * Each toast is centered and content-sized (capped at 360px) rather than
+ * stretched to the region's full width, and slides up from below instead of
+ * down from above to match its new anchor. */
+@media (max-width: 768px) {
+  .region {
+    top: auto;
+    left: var(--sv-space-4);
+    right: var(--sv-space-4);
+    bottom: calc(
+      var(--sv-shell-footer-height, 0px) + env(safe-area-inset-bottom, 0px) + var(--sv-space-4)
+    );
+    width: auto;
+    align-items: center;
+  }
+
+  .toast {
+    width: 100%;
+    max-width: 360px;
+    animation-name: toastInMobile;
+  }
+
+  .toast.exiting {
+    animation-name: toastOutMobile;
+  }
+}
+
+@keyframes toastInMobile {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes toastOutMobile {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .toast,
   .toast.exiting {

package/dist/Tooltip.module.css

@@ -9,7 +9,7 @@
   white-space: nowrap;
   padding: var(--sv-space-1) var(--sv-space-2);
   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-md);
   box-shadow: var(--sv-shadow-popover);
   font-size: var(--sv-font-size-xs);

package/dist/UserMenu.module.css

@@ -0,0 +1,90 @@
+.trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: var(--sv-border-width-hairline) solid var(--sv-color-accent);
+  border-radius: var(--sv-radius-full);
+  background-color: var(--sv-color-accent);
+  color: var(--sv-color-text-on-accent);
+  font-size: var(--sv-font-size-xs);
+  font-weight: var(--sv-font-weight-semibold);
+  overflow: hidden;
+  cursor: pointer;
+}
+
+/* The compact `Header` top-bar context's own avatar size. */
+.triggerSm {
+  width: 32px;
+  height: 32px;
+}
+
+.triggerImg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.panelHeader {
+  padding: var(--sv-space-1) var(--sv-space-1) 0;
+}
+
+.userHeader {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-3);
+  padding: var(--sv-space-2) var(--sv-space-3);
+}
+
+.menuAvatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 38px;
+  height: 38px;
+  border-radius: var(--sv-radius-full);
+  background-color: var(--sv-color-accent);
+  color: var(--sv-color-text-on-accent);
+  font-size: var(--sv-font-size-sm);
+  font-weight: var(--sv-font-weight-semibold);
+  overflow: hidden;
+}
+
+.menuAvatarImg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.userInfo {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.userName {
+  font-size: var(--sv-font-size-sm);
+  font-weight: var(--sv-font-weight-semibold);
+  color: var(--sv-color-text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.userEmail {
+  font-size: var(--sv-font-size-caption);
+  color: var(--sv-color-text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.divider {
+  margin: var(--sv-space-1) 0 0;
+  border: none;
+  border-top: var(--sv-border-width-hairline) solid var(--sv-color-border);
+}