@sovereignfs/ui 0.54.0 → 0.83.1

package/dist/DatePicker.module.css

@@ -17,7 +17,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;
   transition:

package/dist/Dialog.module.css

@@ -1,13 +1,31 @@
 /* Dialog — scrim + centered panel. Tokens only (z-index is structural, not a
  * theming value, so it has no token).
  *
- * Each size is a FIXED box (width AND height) — the panel never grows or
- * shrinks with its content, so switching views inside it (e.g. overlay-plugin
- * tabs) keeps the dialog the exact same size. Overflow scrolls inside `.content`
- * while the panel and its close button stay put. The scrim's padding is the
- * fixed margin `lg` leaves around the viewport; `sm`/`md` are centered and cap
- * to that available space on short screens. On mobile every size becomes a
- * full-screen sheet.
+ * `sm`/`md` are a fixed WIDTH but a content-driven height, capped at a
+ * per-size max-height: the panel grows to fit its content and shrinks when
+ * content is sparse, only hitting the cap (and scrolling internally, inside
+ * `.content`) once content actually exceeds it. Before this, height was
+ * fixed too, which left short-content consumers (e.g. a two-field form in
+ * console/plugins/PluginAccessDialog.tsx) looking like a near-empty
+ * skeleton — see docs/architecture-rules.md. `auto` goes further — content-
+ * driven on BOTH width and height, each independently capped rather than
+ * either being fixed — for content whose natural footprint varies enough
+ * (a card detail modal with an optional checklist/comments section) that a
+ * single fixed width doesn't fit it well either short or long. `lg` is a
+ * true fixed box (100%/100% of the scrim's available area) — no current
+ * overlay-shell plugin renders into it (Console did until workstream 0022
+ * moved it to `shell: "default"`; Account never resized off `overlaySize:
+ * "lg"`'s original default until epic task 14.5, see `fixed` below).
+ * `fixed` (named after its own behavior, not after this file's always-
+ * applied `.panel` wrapper class below) is also a true fixed box, width
+ * AND height both set — same "content never resizes it" guarantee as `lg`
+ * — but capped rather than filling the viewport, for a plugin whose
+ * settings-panel-shaped content doesn't warrant `lg`'s full-screen footprint
+ * (Account's own case, epic task 14.5 round 3). The close button stays
+ * pinned top-right regardless. The scrim's padding is the fixed margin
+ * `lg`/`fixed` leave around the viewport; `sm`/`md`/`auto` are centered and
+ * cap to that available space on short screens too. On mobile every size
+ * becomes a full-screen sheet.
  *
  * `--sv-dialog-inset-left` lets a host inset the scrim past a fixed left nav
  * rail (e.g. the platform sidebar) so the overlay's left margin is measured
@@ -50,7 +68,7 @@
   overflow: hidden;
   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-lg);
   box-shadow: var(--sv-shadow-overlay);
   /* Desktop entrance: fade + gentle scale-up. Same two-phase-mount pattern as
@@ -86,7 +104,21 @@
   flex: 1 1 auto;
   overflow-y: auto;
   overflow-x: hidden;
+  /* Same slim, token-colored scrollbar as `ScrollArea`/`MessageScroller` —
+     without this, a `sm`/`md` dialog whose content exceeds its max-height
+     cap (e.g. on a short viewport where the cap itself shrinks to fit) gets
+     the browser's default OS scrollbar, which on non-overlay-scrollbar
+     platforms is wide enough to visually cut into `.panel`'s rounded
+     corner right where `.content` starts, reading as a layout bug rather
+     than an intentional scroll affordance. */
+  scrollbar-width: thin;
+  scrollbar-color: var(--sv-color-border-strong) transparent;
   padding: var(--sv-space-6);
+  /* This region already supplies the page gutter, so a PageContainer rendered
+     inside it stands its own down (see PageContainer.module.css). Without
+     this, an overlay plugin — one page tree rendered into both the Dialog and
+     the full-page shell fallback — would be padded twice here. */
+  --sv-page-gutter: 0px;
   /* Disable elastic overscroll within the dialog: `none` stops both scroll-
      chaining to the parent and the iOS rubber-band bounce inside the panel.
      `contain` only prevents chaining — the panel itself still bounces, which
@@ -96,33 +128,94 @@
   overscroll-behavior: none;
 }
 
-/* Fixed sizes. `max-*: 100%` caps to the scrim's content box (viewport minus
- * margin) so a size never overflows a small viewport. */
+.content::-webkit-scrollbar {
+  width: 8px;
+}
+
+.content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.content::-webkit-scrollbar-thumb {
+  background: var(--sv-color-border-strong);
+  border-radius: var(--sv-radius-full);
+}
+
+/* `sm`/`md`: fixed width, content-driven height up to the size's own cap
+ * (28rem/42rem — the box's old fixed heights, now a ceiling rather than a
+ * floor). `min(<cap>, 100%)` also still caps to the scrim's content box
+ * (viewport minus margin) so a size never overflows a short viewport. No
+ * explicit `height` — the panel's flex column sizes to `.content`'s natural
+ * height on its own; see the file-level comment above. */
 .sm {
   width: 24rem;
-  height: 28rem;
   max-width: 100%;
-  max-height: 100%;
+  max-height: min(28rem, 100%);
 }
 
 .md {
   width: 36rem;
-  height: 42rem;
   max-width: 100%;
-  max-height: 100%;
+  max-height: min(42rem, 100%);
 }
 
-.lg,
-.full {
+/* Content-driven on both axes, unlike `sm`/`md` (width fixed, only height
+ * content-driven) — for a dialog whose natural footprint varies a lot (a
+ * card detail modal with labels/due-date/assignees/description/checklist/
+ * comments, the case that originally motivated the now-removed `xl` size
+ * this replaces). `width: fit-content` shrink-wraps to the panel's own
+ * content (bounded by min/max-width below) the same way a flex item
+ * centered in `.scrim` naturally would with no explicit `width` at all —
+ * `min-width` just keeps sparse content (e.g. a short message) from reading
+ * as an oddly narrow sliver. Caps chosen to span roughly what `sm`/`xl`
+ * used to cover between them. */
+.auto {
+  width: fit-content;
+  min-width: min(24rem, 100%);
+  max-width: min(48rem, 100%);
+  max-height: min(48rem, 100%);
+}
+
+/* `lg`: a true fixed box, unaffected by the above — see the file-level
+ * comment. */
+.lg {
   width: 100%;
   height: 100%;
 }
 
+/* `fixed`: also a true fixed box (width AND height both set, like `lg`) but
+ * capped rather than filling the viewport — see the file-level comment.
+ * Named distinctly from the dialog's own always-applied `.panel` wrapper
+ * class above (every size gets `styles.panel` + `styles[size]` together —
+ * see Dialog.tsx) to avoid colliding with it. `max-width`/`max-height` are
+ * still needed despite `width`/`height` being fixed rem values, exactly
+ * like `sm`/`md`'s own `max-width: 100%` — a short or narrow viewport (a
+ * resized desktop window, not yet at the mobile breakpoint) must still be
+ * able to shrink this below its rem values instead of overflowing the
+ * scrim. */
+.fixed {
+  width: 64rem;
+  max-width: 100%;
+  height: 44rem;
+  max-height: 100%;
+}
+
 .close {
   position: absolute;
   top: var(--sv-space-3);
   right: var(--sv-space-3);
-  z-index: 1;
+  /* 2, not 1: a plugin's own sticky in-body header (e.g. a card detail
+     modal's title row) needs to paint above ordinary scrolling content, so
+     it sits at z-index: 1 — if `.close` also sat at 1, tree order would
+     decide the tie, and `.close` (rendered earlier in this component's own
+     JSX, before `.content` and everything a plugin nests inside it) would
+     lose to the plugin's later-in-tree header, disappearing underneath it
+     once they overlap on scroll. 2 keeps `.close` unambiguously on top
+     without relying on a tie-break plugin authors have no visibility into.
+     Found live in `sovereign-plugin-kanban`'s card detail modal — see that
+     repo's `kanban.module.css` `.cardHeader` comment for the matching half
+     of this fix and the Popover-stacking bug that motivated it. */
+  z-index: 2;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -132,8 +225,6 @@
   border-radius: var(--sv-radius-md);
   background: transparent;
   color: var(--sv-color-text-muted);
-  font-size: var(--sv-font-size-xl);
-  line-height: 1;
   cursor: pointer;
 }
 
@@ -151,11 +242,27 @@
 
 /* Hidden on desktop; shown only on mobile where it replaces the close button.
  * OverlayHeader owns its own background/border/padding — this wrapper class
- * only toggles visibility per breakpoint. */
+ * only toggles visibility per breakpoint. Not used at all when the `header`
+ * prop is active — that OverlayHeader instance renders with no wrapper
+ * class, so it shows unconditionally on both breakpoints (see Dialog.tsx). */
 .mobileHeader {
   display: none;
 }
 
+/* The optional `footer` prop's row — shown on both desktop and mobile (no
+ * breakpoint gating, unlike `.mobileHeader`), a flex sibling after `.content`
+ * so it never scrolls, mirroring OverlayHeader's own `.header`/`.row`
+ * treatment (border on the opposite edge, same padding scale) so header and
+ * footer read as a matched pair when both are present. Layout-agnostic
+ * beyond that — the footer's own content decides its internal arrangement
+ * (e.g. a flex row with `justify-content: flex-end` for action buttons). */
+.footer {
+  flex-shrink: 0;
+  background: var(--sv-color-surface);
+  border-top: var(--sv-border-width-hairline) solid var(--sv-color-border);
+  padding: var(--sv-space-3) var(--sv-space-4);
+}
+
 /* Mobile: full-screen sheet (RFC 0001 §3, breakpoint unified to 768px per
  * RFC 0013). Every size fills the scrim's available area (which is already
  * inset from the top by --sv-dialog-inset-top when a fixed header is shown).
@@ -177,9 +284,11 @@
   .sm,
   .md,
   .lg,
-  .full {
+  .auto,
+  .fixed {
     width: 100%;
     height: 100%;
+    min-width: 0;
     max-width: none;
     max-height: none;
     border: none;

package/dist/Drawer.module.css

@@ -7,8 +7,10 @@
 .scrim {
   position: fixed;
   inset: 0;
-  /* When the shell declares --sv-shell-footer-height (mobile nav bar), stop the
-     scrim above the footer so the panel never hides behind it. */
+  /* When --sv-shell-footer-height is set (mobile nav bar — by the platform
+     shell, or by a self-rendered MobileFooter via usePublishShellChromeHeight
+     for a shellConfig.mobileFooter: false plugin), stop the scrim above the
+     footer so the panel never hides behind it. */
   bottom: var(--sv-shell-footer-height, 0);
   z-index: 100;
   display: flex;
@@ -27,14 +29,21 @@
 .panel {
   width: 100%;
   max-height: 80dvh;
-  overflow-y: auto;
-  overscroll-behavior: contain;
+  /* The panel itself no longer scrolls — see .body below. display: flex
+     (column) lets .handle (and OverlayHeader, when title is set) stay
+     fixed while .body's own overflow-y handles content taller than the
+     80dvh cap, the same fixed-header/scrollable-body split Sheet.module.css
+     already establishes (its .panel/.content pair). Before this, the whole
+     .panel scrolled as one block, so a tall drawer (e.g. many installed
+     plugins in the Apps grid) scrolled the grab handle itself out of view
+     along with the content — reachable in the DOM, invisible on screen. */
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
   background: var(--sv-color-surface-raised);
-  border-top: 1px solid var(--sv-color-border);
+  border-top: var(--sv-border-width-hairline) solid var(--sv-color-border);
   border-radius: var(--sv-radius-3xl) var(--sv-radius-3xl) 0 0;
   box-shadow: var(--sv-shadow-overlay);
-  /* Pull content above the home indicator / bottom bar in standalone mode. */
-  padding-bottom: env(safe-area-inset-bottom);
   outline: none;
   /* Slide up from below the viewport. Always a bottom sheet, so unlike Dialog
      there's no desktop-vs-mobile fork here. */
@@ -42,6 +51,26 @@
   transition: transform var(--sv-motion-duration-base) var(--sv-motion-ease-out);
 }
 
+/* The scroll container — everything below the fixed handle/OverlayHeader.
+   Scrollbar hidden (not overflow removed) the same way Tabs.module.css's
+   .tablist already does for this design system; scroll-driven UI here reads
+   as a native swipe list, not a document needing a visible scroll affordance. */
+.body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+  /* Pull content above the home indicator / bottom bar in standalone mode —
+     moved here from .panel now that this is the element whose bottom edge
+     is the actual scrollable content boundary. */
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.body::-webkit-scrollbar {
+  display: none;
+}
+
 .panelOpen {
   transform: translateY(0);
 }

package/dist/Header.module.css

@@ -0,0 +1,62 @@
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 48px;
+  padding: var(--sv-space-2) var(--sv-space-4);
+  border-bottom: var(--sv-border-width-hairline) solid var(--sv-color-border);
+  background-color: var(--sv-color-surface);
+}
+
+.left {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-2);
+  min-width: 0;
+}
+
+.right {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-1);
+  flex-shrink: 0;
+}
+
+.brandBadge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--sv-radius-md);
+  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);
+  text-decoration: none;
+  overflow: hidden;
+}
+
+.brandLogoImg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.plugin {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-1);
+  min-width: 0;
+  text-decoration: none;
+  color: var(--sv-color-text-primary);
+}
+
+.pluginName {
+  font-size: var(--sv-font-size-md);
+  font-weight: var(--sv-font-weight-semibold);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/HeaderFooterLayout.module.css

@@ -0,0 +1,21 @@
+.shell {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.header {
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.main {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.footer {
+  flex-shrink: 0;
+  overflow: hidden;
+}

package/dist/IconPicker.module.css

@@ -3,7 +3,7 @@
   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);

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,

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/Markdown.module.css

@@ -47,3 +47,27 @@
   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;
+}

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

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

@@ -8,15 +8,16 @@
 .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);

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

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 {