@sovereignfs/ui 0.45.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/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,73 @@
+/* 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);
+}
+
+/*
+ * 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

@@ -0,0 +1,82 @@
+/* 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;
+  /* 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);
+}
+
+.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;
+}