@sovereignfs/ui 0.45.0 → 0.83.1

package/dist/PageLayout.module.css

@@ -0,0 +1,51 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  min-width: 100%;
+  min-height: 100%;
+}
+
+.header {
+  flex-shrink: 0;
+}
+
+.content {
+  flex: 1;
+}
+
+/* ── Padding ────────────────────────────────────────────────────────────── */
+/* Same four-step scale and --sv-page-gutter stand-down hook as
+   PageContainer (see that component's own CSS comment for the full
+   rationale) — kept identical so this can absorb PageContainer's role
+   later without a behavior change for existing consumers. */
+
+.padNone {
+  padding: 0;
+}
+
+.padSm {
+  padding: var(--sv-page-gutter, var(--sv-space-4));
+}
+
+.padMd {
+  padding: var(--sv-page-gutter, var(--sv-space-8));
+}
+
+.padLg {
+  padding: var(--sv-page-gutter, var(--sv-space-12));
+}
+
+/* Matches the breakpoint Dialog, MobileHeader, and MobileFooter already use. */
+@media (max-width: 768px) {
+  .padSm {
+    padding: var(--sv-page-gutter, var(--sv-space-3));
+  }
+
+  .padMd {
+    padding: var(--sv-page-gutter, var(--sv-space-4));
+  }
+
+  .padLg {
+    padding: var(--sv-page-gutter, var(--sv-space-6));
+  }
+}

package/dist/Popover.module.css

@@ -8,7 +8,7 @@
   top: calc(100% + var(--sv-space-2));
   z-index: 60;
   background: var(--sv-color-surface);
-  border: 1px solid var(--sv-color-border);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-border);
   border-radius: var(--sv-radius-2xl);
   box-shadow: var(--sv-shadow-popover);
   /* auto, not hidden: Popover.tsx applies an inline max-height only when the

package/dist/QuantityStepper.module.css

@@ -3,7 +3,7 @@
   align-items: center;
   gap: var(--sv-space-1);
   padding: var(--sv-space-1);
-  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-full);
   background: var(--sv-color-surface-sunken);
 }

package/dist/Resizable.module.css

@@ -4,7 +4,7 @@
   width: 100%;
   height: 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);
@@ -27,7 +27,7 @@
   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);
 }
@@ -36,7 +36,7 @@
   width: 100%;
   height: 12px;
   border-inline: 0;
-  border-block: 1px solid var(--sv-color-border);
+  border-block: var(--sv-border-width-hairline) solid var(--sv-color-border);
   cursor: row-resize;
 }
 

package/dist/RootLayout.module.css

@@ -0,0 +1,12 @@
+/* A definite height, not min-height: ThreeColumnLayout/HeaderFooterLayout's
+   own .shell use height: 100% internally (fixed box, independently-
+   scrolling children via overflow-y: auto) — a percentage height only
+   resolves against an ancestor with a definite (not min-constrained)
+   height, so min-height here would leave their .shell unable to resolve
+   and collapse to content size. This doesn't clip taller content on its
+   own — nothing here sets overflow: hidden, so content taller than the
+   box simply overflows past it rather than being cut off. */
+.root {
+  width: 100%;
+  height: 100%;
+}

package/dist/SegmentedControl.module.css

@@ -2,7 +2,7 @@
   display: inline-flex;
   background: var(--sv-color-surface-sunken);
   border-radius: var(--sv-radius-full);
-  border: 1px solid var(--sv-color-border);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-border);
   padding: 2px;
   gap: 2px;
 }

package/dist/Select.module.css

@@ -18,7 +18,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);
   cursor: pointer;
   /* Remove native OS chevron */

package/dist/Sheet.module.css

@@ -1,6 +1,9 @@
 /* Sheet — fills the same rect as a plugin's content area (between the shell's
  * sticky header and footer nav — see --sv-shell-header-height /
- * --sv-shell-footer-height, set by the shell), sliding in from an edge
+ * --sv-shell-footer-height, set by the platform shell or, for a plugin that
+ * self-renders MobileHeader/MobileFooter instead (shellConfig.mobileHeader/
+ * mobileFooter: false), by that component itself — see
+ * usePublishShellChromeHeight), sliding in from an edge
  * instead of Dialog's centered box or Drawer's partial-height sheet-over-
  * scrim. z-index matches Dialog/Drawer's scrim so it layers consistently
  * with any other overlay. No scrim of its own — see the component doc

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

@@ -0,0 +1,64 @@
+.wrap {
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+.scroller {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-snap-type: x mandatory;
+  /* Momentum + rubber-banding come from the browser's native scroll physics —
+     no hand-rolled pointer/touch dragging. Deliberately NOT
+     -webkit-overflow-scrolling: touch: that legacy iOS <13 hint promotes its
+     element to its own compositing layer for GPU-accelerated momentum
+     scroll, and that layer's paint order relative to siblings/fixed
+     descendants elsewhere in the tree isn't always reliable on real iOS
+     Safari (confirmed via sovereign-tasks' and sovereign-shopper's own
+     carousels, which hit and fixed this exact bug — a position:fixed
+     overlay opened above the scroller painted BEHIND it instead of above).
+     Removing it doesn't disable momentum scrolling on any iOS version this
+     platform realistically targets. */
+}
+
+.slide {
+  flex: 0 0 100%;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  overflow: hidden;
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+  /* Slide content is a flex column so Header/Footer stay their natural size
+     and Body (flex: 1 1 auto, min-height: 0) fills and scrolls the rest —
+     see SwipableMobileCarouselSlideParts.module.css. */
+  display: flex;
+  flex-direction: column;
+}
+
+.indicatorSlot {
+  /* Overlays the bottom of .wrap rather than taking its own layout row —
+     matches both sovereign-tasks' and sovereign-shopper's existing dots
+     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;
+  bottom: var(--sv-space-3);
+  pointer-events: none;
+}
+
+.indicatorSlot > * {
+  pointer-events: auto;
+}

package/dist/SwipableMobileCarouselDots.module.css

@@ -0,0 +1,64 @@
+.dots {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  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
+     centered inside, so tap area grows without changing the visible dot
+     size or the row's gap-based spacing math. */
+  position: relative;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
+
+.dot::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--sv-color-border-strong);
+  transform: translate(-50%, -50%);
+  transition: background 0.15s ease;
+}
+
+.dot:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+  border-radius: 50%;
+}
+
+.dotActive::before {
+  background: var(--sv-color-text-primary);
+}
+
+@media (hover: hover) {
+  .dot:not(.dotActive):hover::before {
+    background: var(--sv-color-text-muted);
+  }
+}

package/dist/SwipableMobileCarouselSlideParts.module.css

@@ -0,0 +1,29 @@
+.header,
+.footer {
+  flex: 0 0 auto;
+}
+
+.body {
+  flex: 1 1 auto;
+  min-height: 0; /* allow shrinking inside the slide's flex column, so it can scroll instead of overflowing */
+  overflow-y: auto;
+  overflow-x: hidden;
+  /* Deliberately does NOT set touch-action: pan-y here. touch-action's
+     effective value is the INTERSECTION of this element's and every
+     ancestor's value (docs/architecture-rules.md) — the ancestor .scroller
+     (SwipableMobileCarousel.module.css) needs the horizontal swipe gesture,
+     so pan-y here ∩ that horizontal handling would resolve to neither axis
+     working natively. Relying on the browser's default touch-action (auto)
+     here lets native gesture arbitration between the two nested scrollers
+     sort out which axis wins per-gesture — don't "fix" perceived nested-
+     scroll jank by adding pan-y; it silently breaks horizontal swipe instead. */
+}
+
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--sv-color-text-subtle);
+  font-size: var(--sv-font-size-sm);
+}

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);
+}