@sovereignfs/ui 0.45.0 → 0.54.0

package/dist/LegalLinks.module.css

@@ -0,0 +1,24 @@
+.root {
+  margin: var(--sv-space-5) 0 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sv-space-2);
+  font-size: var(--sv-font-size-xs);
+  color: var(--sv-color-text-muted);
+}
+
+.link {
+  color: var(--sv-color-text-muted);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  text-decoration-color: var(--sv-color-border);
+}
+
+.link:hover {
+  color: var(--sv-color-text-primary);
+}
+
+.dot {
+  color: var(--sv-color-border);
+}

package/dist/Markdown.module.css

@@ -0,0 +1,49 @@
+/* Spacing lives on this wrapper div, not on the Typography-rendered tag
+   inside it — Typography's own variants reset margin: 0, which would tie
+   for CSS specificity against a bare `.root > * + *` sibling rule and make
+   the outcome depend on module load order. A dedicated class avoids that. */
+.block {
+  margin-top: var(--sv-space-4);
+}
+
+.block:first-child {
+  margin-top: 0;
+}
+
+.block[data-heading] {
+  margin-top: var(--sv-space-8);
+}
+
+.block[data-heading]:first-child {
+  margin-top: 0;
+}
+
+.blockquote {
+  margin: 0;
+  padding: var(--sv-space-4);
+  border-left: 3px solid var(--sv-color-border);
+  background: var(--sv-color-surface-sunken);
+  border-radius: var(--sv-radius-sm);
+}
+
+.list {
+  margin: 0;
+  padding-left: var(--sv-space-6);
+  display: flex;
+  flex-direction: column;
+  gap: var(--sv-space-2);
+}
+
+.root a {
+  color: var(--sv-color-text-primary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.root code {
+  font-family: var(--sv-font-family-mono);
+  font-size: 0.9em;
+  background: var(--sv-color-surface-sunken);
+  padding: 0.1em 0.35em;
+  border-radius: var(--sv-radius-sm);
+}

package/dist/MobileAppsDrawer.module.css

@@ -0,0 +1,81 @@
+/* Matches the runtime shell's own Apps drawer grid exactly
+   (runtime/app/(platform)/_components/MobileNav.module.css's .drawerGrid/
+   .drawerGridItem/.drawerGridIcon/.drawerGridName) — this component is
+   meant to replace that hand-rolled markup for any consumer building its
+   own Apps-style launcher. No header row — see the component's own doc
+   comment for why. */
+
+.grid {
+  list-style: none;
+  margin: 0;
+  /* Drawer's own grab handle already reserves a 44px touch target above this
+     — no extra top padding needed beyond a touch of breathing room. Bottom
+     gets noticeably more: with no header row to separate the grid from the
+     handle, a tight top/bottom balance read as top-heavy (grid crowding the
+     handle isn't the issue; the *last* row crowding the panel's bottom
+     edge/safe-area is). Drawer's own panel already adds
+     env(safe-area-inset-bottom) below everything, so this is on top of that,
+     not instead of it. */
+  padding: var(--sv-space-1) var(--sv-space-4) var(--sv-space-10);
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  row-gap: var(--sv-space-5);
+}
+
+.gridItem {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--sv-space-2);
+  padding: var(--sv-space-1);
+  border: none;
+  background: none;
+  text-decoration: none;
+  color: var(--sv-color-text-primary);
+  font: inherit;
+  cursor: pointer;
+  width: 100%;
+}
+
+@media (hover: hover) {
+  .gridItem:hover .gridIcon {
+    background: var(--sv-color-border);
+  }
+}
+
+.gridItem:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+  border-radius: var(--sv-radius-md);
+}
+
+/* color: text-primary, not text-muted — the reference's own drawerGridIcon
+   uses text-muted only as its monogram-fallback text color for <img>-less
+   plugin icons (raster <img> icons don't inherit CSS color at all, so that
+   value never actually painted a real icon). Every tile here renders a real
+   stroke icon via the Icon component (currentColor), which does inherit —
+   matching the reference's own explicit override for that exact case
+   (.drawerGridIconSettings, used by its Console tile) rather than the
+   fallback default. */
+.gridIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  border-radius: 14px;
+  background: var(--sv-color-surface-sunken);
+  font-size: var(--sv-font-size-sm);
+  font-weight: var(--sv-font-weight-semibold);
+  color: var(--sv-color-text-primary);
+  transition: background 0.1s;
+}
+
+.gridName {
+  font-size: var(--sv-font-size-sm);
+  text-align: center;
+  color: var(--sv-color-text-primary);
+  line-height: 1.3;
+  word-break: break-word;
+  max-width: 80px;
+}

package/dist/MobileFooter.module.css

@@ -0,0 +1,73 @@
+.footer {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  /* Mobile-only component — never render wider than the platform's own
+     mobile breakpoint, even if a consumer accidentally mounts it in a wider
+     container (e.g. an un-gated preview). At real mobile widths this is a
+     no-op since the viewport itself is already narrower. */
+  max-width: 768px;
+  margin-inline: auto;
+  min-height: var(--sv-shell-footer-height, 60px);
+  padding: 0 var(--sv-space-4);
+  padding-bottom: max(var(--sv-space-2), env(safe-area-inset-bottom));
+  background-color: var(--sv-color-surface);
+  border-top: 1px solid var(--sv-color-border);
+  position: relative;
+  z-index: 101;
+}
+
+.navItem {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  min-height: 52px;
+  border: none;
+  background: transparent;
+  color: var(--sv-color-text-muted);
+  font: inherit;
+  cursor: pointer;
+  text-decoration: none;
+  border-radius: var(--sv-radius-md);
+  transition: color 0.1s;
+  outline: none;
+}
+
+@media (hover: hover) {
+  .navItem:hover {
+    color: var(--sv-color-text-primary);
+  }
+}
+
+.navItem:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: -2px;
+}
+
+.navItemActive {
+  color: var(--sv-color-text-primary);
+}
+
+.navItemApps {
+  position: relative;
+}
+
+.navItemAppsOpen {
+  color: var(--sv-color-text-primary);
+}
+
+.navItemAppsOpen::before {
+  content: '';
+  position: absolute;
+  width: 48px;
+  height: 48px;
+  border-radius: var(--sv-radius-full);
+  background: var(--sv-color-surface-sunken);
+}
+
+.navItemAppsOpen svg,
+.navItemAppsOpen img {
+  position: relative;
+  z-index: 1;
+}

package/dist/MobileHeader.module.css

@@ -0,0 +1,63 @@
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sv-space-3);
+  width: 100%;
+  /* Mobile-only component — never render wider than the platform's own
+     mobile breakpoint, even if a consumer accidentally mounts it in a wider
+     container (e.g. an un-gated preview). At real mobile widths this is a
+     no-op since the viewport itself is already narrower. */
+  max-width: 768px;
+  margin-inline: auto;
+  min-height: var(--sv-shell-header-height, 60px);
+  padding: var(--sv-space-3) var(--sv-space-4);
+  padding-top: max(var(--sv-space-3), env(safe-area-inset-top));
+  padding-right: max(var(--sv-space-4), env(safe-area-inset-right));
+  padding-left: max(var(--sv-space-4), env(safe-area-inset-left));
+  background-color: var(--sv-color-surface);
+  border-bottom: 1px solid var(--sv-color-border);
+  position: sticky;
+  top: 0;
+  z-index: 101;
+}
+
+.brandGroup {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-3);
+  min-width: 0;
+}
+
+/* Matches the runtime shell's own .mobileBrandIcon (shell.module.css) — the
+   default logo shown when the consumer doesn't supply one. */
+.defaultLogo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 36px;
+  height: 36px;
+  border-radius: var(--sv-radius-md);
+  background-color: var(--sv-color-accent);
+  color: var(--sv-color-text-on-accent);
+  font-weight: var(--sv-font-weight-semibold);
+  overflow: hidden;
+}
+
+.title {
+  font-size: var(--sv-font-size-md);
+  font-weight: var(--sv-font-weight-semibold);
+  color: var(--sv-color-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.right {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-2);
+  margin-left: auto;
+  flex-shrink: 0;
+}

package/dist/PageContainer.module.css

@@ -0,0 +1,20 @@
+.container {
+  width: 100%;
+  margin-inline: auto;
+}
+
+.sm {
+  max-width: 640px;
+}
+
+.md {
+  max-width: 960px;
+}
+
+.lg {
+  max-width: 1200px;
+}
+
+.full {
+  max-width: none;
+}

package/dist/SwipableMobileCarousel.module.css

@@ -0,0 +1,55 @@
+.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;
+}
+
+.dots {
+  /* Overlays the bottom of .wrap rather than taking its own layout row —
+     matches both sovereign-tasks' and sovereign-shopper's existing dots
+     placement. */
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: var(--sv-space-3);
+  pointer-events: none;
+}
+
+.dots > * {
+  pointer-events: auto;
+}

package/dist/SwipableMobileCarouselDots.module.css

@@ -0,0 +1,49 @@
+.dots {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sv-space-2);
+}
+
+.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);
+}