@sovereignfs/ui 0.54.0 → 0.89.1

package/dist/IconPicker.module.css

@@ -3,15 +3,17 @@
   align-items: center;
   gap: var(--sv-space-2);
   padding: var(--sv-space-2);
-  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);
   background: var(--sv-color-surface);
   color: var(--sv-color-text-primary);
   cursor: pointer;
 }
 
-.trigger:hover {
-  background: var(--sv-color-surface-sunken);
+@media (hover: hover) {
+  .trigger:hover {
+    background: var(--sv-color-surface-sunken);
+  }
 }
 
 .trigger:disabled {
@@ -54,10 +56,18 @@
   cursor: pointer;
 }
 
-.option:hover {
-  background: var(--sv-color-surface-sunken);
+@media (hover: hover) {
+  .option:hover {
+    background: var(--sv-color-surface-sunken);
+  }
 }
 
 .optionSelected {
   background: var(--sv-color-accent-subtle);
 }
+
+.trigger:focus-visible,
+.option:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: -2px;
+}

package/dist/Input.module.css

@@ -12,7 +12,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,
@@ -50,3 +50,9 @@
   opacity: 0.5;
   cursor: not-allowed;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .input {
+    transition: none;
+  }
+}

package/dist/Kbd.module.css

@@ -4,7 +4,7 @@
   justify-content: center;
   min-width: 1.5em;
   padding: var(--sv-space-1) var(--sv-space-2);
-  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-sm);
   background: var(--sv-color-surface-sunken);
   color: var(--sv-color-text-primary);

package/dist/LegalLinks.module.css

@@ -15,10 +15,17 @@
   text-decoration-color: var(--sv-color-border);
 }
 
-.link:hover {
-  color: var(--sv-color-text-primary);
+@media (hover: hover) {
+  .link:hover {
+    color: var(--sv-color-text-primary);
+  }
 }
 
 .dot {
   color: var(--sv-color-border);
 }
+
+.link:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+}

package/dist/Markdown.module.css

@@ -47,3 +47,32 @@
   padding: 0.1em 0.35em;
   border-radius: var(--sv-radius-sm);
 }
+
+/*
+ * Long lines scroll inside the block rather than widening the page — a code
+ * sample is the most likely thing in this component to overflow its
+ * container, and the surrounding prose should not reflow because of it.
+ */
+.codeBlock {
+  margin: 0;
+  padding: var(--sv-space-4);
+  background: var(--sv-color-surface-sunken);
+  border-radius: var(--sv-radius-md);
+  overflow-x: auto;
+}
+
+/* The block already carries the panel background and padding; the inline
+   `code` chrome would otherwise double up inside it. */
+.codeBlock code {
+  background: none;
+  padding: 0;
+  border-radius: 0;
+  font-size: var(--sv-font-size-sm);
+  line-height: 1.6;
+  white-space: pre;
+}
+
+.root a:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+}

package/dist/Menu.module.css

@@ -33,6 +33,7 @@
   font: inherit;
   font-size: var(--sv-font-size-sm);
   text-align: left;
+  text-decoration: none;
   cursor: pointer;
 }
 

package/dist/Message.module.css

@@ -32,7 +32,7 @@
 
 .assistant .bubble {
   background: var(--sv-color-surface-raised);
-  border: 1px solid var(--sv-color-border);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-border);
   color: var(--sv-color-text-primary);
   border-bottom-left-radius: var(--sv-radius-sm);
 }
@@ -45,8 +45,17 @@
   border-bottom-left-radius: var(--sv-radius-sm);
 }
 
+/*
+ * Wraps rather than overflowing. A turn can carry several actions plus a
+ * caption (which model answered, and when), and on a phone-width column
+ * that row is easily wider than the message list — an unwrapped row put a
+ * horizontal scrollbar on the conversation and clipped the last action off
+ * the edge, where it could not be reached at all.
+ */
 .actions {
   display: flex;
+  flex-wrap: wrap;
+  align-items: center;
   gap: var(--sv-space-2);
   margin-top: var(--sv-space-1);
   font-size: var(--sv-font-size-caption);

package/dist/MessageScroller.module.css

@@ -25,13 +25,24 @@
   border-radius: var(--sv-radius-full);
 }
 
+/* Bottom-anchors a conversation that doesn't fill the container: this
+   leading item claims all leftover main-axis space, pushing the real
+   messages down to the bottom edge. Once messages overflow, it has no
+   free space left to grow into and collapses to 0 — normal top-to-bottom
+   scrolling is unaffected either way, since `justify-content` never
+   changes from its default `flex-start`. */
+.spacer {
+  flex: 1 0 0%;
+  min-height: 0;
+}
+
 .jumpButton {
   position: absolute;
   bottom: var(--sv-space-3);
   left: 50%;
   transform: translateX(-50%);
   padding: var(--sv-space-1) var(--sv-space-3);
-  border: 1px solid var(--sv-color-border);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-border);
   border-radius: var(--sv-radius-full);
   background: var(--sv-color-surface-raised);
   box-shadow: var(--sv-shadow-popover);

package/dist/MobileAppsDrawer.module.css

@@ -1,22 +1,21 @@
-/* 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
+/* Matches the shell's own Apps drawer grid exactly — this component is
+   meant to replace 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);
+  /* Matches the reference `.drawerGrid`'s own padding exactly — its
+     surrounding `Drawer` also has no header row (no `title` passed either),
+     so "no header row" can't actually explain padding this component used
+     to carry well past the reference's own (`--sv-space-1`/`--sv-space-10`
+     vs the reference's `--sv-space-2`/`--sv-space-6`) — found live, this
+     component's grid visibly read as more tightly hugging the handle and
+     noticeably more padded at the bottom than the reference's side by side.
+     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-2) var(--sv-space-4) var(--sv-space-6);
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   row-gap: var(--sv-space-5);
@@ -79,3 +78,9 @@
   word-break: break-word;
   max-width: 80px;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .gridIcon {
+    transition: none;
+  }
+}

package/dist/MobileFooter.module.css

@@ -12,7 +12,7 @@
   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);
+  border-top: var(--sv-border-width-hairline) solid var(--sv-color-border);
   position: relative;
   z-index: 101;
 }
@@ -71,3 +71,9 @@
   position: relative;
   z-index: 1;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .navItem {
+    transition: none;
+  }
+}

package/dist/MobileHeader.module.css

@@ -16,10 +16,23 @@
   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);
+  border-bottom: var(--sv-border-width-hairline) solid var(--sv-color-border);
   position: sticky;
   top: 0;
   z-index: 101;
+  /* 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 — only reachable when a consumer mounts this component
+     inside its own scrolling container (the platform shell's own mobile
+     header sits in a separate, non-scrolling grid row, so this is a no-op
+     there; a plugin self-rendering this via shellConfig.mobileHeader: false
+     inside a scrollable page is exactly the case this protects). Found and
+     fixed across three sticky elements in sovereign-tasks before being
+     applied here proactively — see docs/architecture-rules.md.
+     translateZ(0) promotes it to its own layer, rasterized independently of
+     the scroller's tile grid. */
+  transform: translateZ(0);
 }
 
 .brandGroup {

package/dist/NavList.module.css

@@ -0,0 +1,139 @@
+.nav {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sv-space-5);
+  width: 100%;
+}
+
+.group {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.groupLabel {
+  padding: 0 var(--sv-space-3);
+  margin-bottom: var(--sv-space-1);
+  font-size: var(--sv-font-size-xs);
+  font-weight: var(--sv-font-weight-semibold);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--sv-color-text-muted);
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-3);
+  min-height: var(--sv-touch-target-min);
+  padding: var(--sv-space-2) var(--sv-space-3);
+  border-radius: var(--sv-radius-md);
+  color: var(--sv-color-text-muted);
+  text-decoration: none;
+  font-size: var(--sv-font-size-sm);
+  font-weight: var(--sv-font-weight-medium);
+}
+
+.icon {
+  flex-shrink: 0;
+}
+
+.label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.badge {
+  flex-shrink: 0;
+  color: var(--sv-color-text-muted);
+  font-size: var(--sv-font-size-xs);
+}
+
+.chevron {
+  flex-shrink: 0;
+  color: var(--sv-color-text-muted);
+}
+
+/* ── static (desktop sidebar) ─────────────────────────────────────────── */
+
+.static .row {
+  transition:
+    background-color 0.1s ease,
+    color 0.1s ease;
+}
+
+/* The sidebar this sits in is the raised surface, which in a dark theme is the sunken surface's own colour, so
+   neither the hover nor the current row could be told from the rest with it: both are a tint of the accent,
+   which shows on either. */
+@media (hover: hover) {
+  .static .row:hover {
+    background-color: color-mix(in srgb, var(--sv-color-accent) 6%, transparent);
+    color: var(--sv-color-text-primary);
+  }
+}
+
+.static .row:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: -2px;
+}
+
+.static .rowActive {
+  background-color: var(--sv-color-accent-subtle);
+  color: var(--sv-color-text-primary);
+  font-weight: var(--sv-font-weight-semibold);
+}
+
+.static .rowActive .icon {
+  color: var(--sv-color-text-primary);
+}
+
+/* Only meaningful combined with .static — see NavListProps.density's own
+   doc comment for why .drilldown rows never shrink. */
+.compact.static .row {
+  min-height: 0;
+  padding: var(--sv-space-2) var(--sv-space-3);
+}
+
+/* ── drilldown (mobile index) — grouped card, native-Settings-app rows ──── */
+
+.drilldown .group {
+  gap: 0;
+  border: 1px solid var(--sv-color-border);
+  border-radius: var(--sv-radius-lg);
+  overflow: hidden;
+  background-color: var(--sv-color-surface-raised);
+}
+
+.drilldown .row {
+  border-radius: 0;
+  padding: var(--sv-space-3) var(--sv-space-4);
+  color: var(--sv-color-text-primary);
+}
+
+.drilldown .row:not(:last-child) {
+  border-bottom: var(--sv-border-width-hairline) solid var(--sv-color-border);
+}
+
+@media (hover: hover) {
+  .drilldown .row:hover {
+    background-color: var(--sv-color-surface-sunken);
+  }
+}
+
+.drilldown .row:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: -2px;
+}
+
+.drilldown .icon {
+  color: var(--sv-color-text-muted);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .static .row {
+    transition: none;
+  }
+}

package/dist/NavTabs.module.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-wrap: wrap;
   gap: 0;
-  border-bottom: 1px solid var(--sv-color-border);
+  border-bottom: var(--sv-border-width-hairline) solid var(--sv-color-border);
 }
 
 .link {
@@ -35,7 +35,7 @@
   border-bottom-color: var(--sv-color-text-primary);
 }
 
-@media (max-width: 640px) {
+@media (max-width: 768px) {
   .nav {
     flex-wrap: nowrap;
     overflow-x: auto;
@@ -48,3 +48,9 @@
     display: none;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .link {
+    transition: none;
+  }
+}