@sovereignfs/ui 0.54.0 → 0.89.1

package/dist/NotificationsPanel.module.css

@@ -0,0 +1,268 @@
+.trigger {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: var(--sv-radius-md);
+  background: transparent;
+  color: var(--sv-color-text-primary);
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+  .trigger:hover {
+    background: var(--sv-color-surface-sunken);
+  }
+}
+
+.badge {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  min-width: 14px;
+  height: 14px;
+  padding: 0 3px;
+  background: var(--sv-color-error-text);
+  color: white;
+  border-radius: var(--sv-radius-full);
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 14px;
+  text-align: center;
+  pointer-events: none;
+}
+
+/* ── Header ─────────────────────────────────────────────────────────────── */
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sv-space-2);
+  padding: var(--sv-space-3) var(--sv-space-3) var(--sv-space-3) var(--sv-space-4);
+  border-bottom: var(--sv-border-width-hairline) solid var(--sv-color-border);
+}
+
+.headerTitle {
+  font-size: var(--sv-font-size-sm);
+  font-weight: var(--sv-font-weight-semibold);
+  color: var(--sv-color-text-primary);
+  flex: 1;
+}
+
+.headerActions {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-2);
+}
+
+.actionBtn {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  font-size: var(--sv-font-size-caption);
+  color: var(--sv-color-text-muted);
+  white-space: nowrap;
+}
+
+@media (hover: hover) {
+  .actionBtn:hover {
+    color: var(--sv-color-text-primary);
+  }
+}
+
+.closeBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: var(--sv-radius-sm);
+  background: none;
+  color: var(--sv-color-text-muted);
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+  .closeBtn:hover {
+    color: var(--sv-color-text-primary);
+    background: var(--sv-color-surface-sunken);
+  }
+}
+
+/* ── List ───────────────────────────────────────────────────────────────── */
+
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  max-height: 420px;
+  overflow-y: auto;
+}
+
+/* ── Empty state ────────────────────────────────────────────────────────── */
+
+.empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--sv-space-3);
+  padding: var(--sv-space-10) var(--sv-space-4);
+}
+
+.emptyIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: var(--sv-radius-full);
+  background: var(--sv-color-surface-sunken);
+  color: var(--sv-color-text-muted);
+}
+
+.emptyText {
+  font-size: var(--sv-font-size-sm);
+  color: var(--sv-color-text-muted);
+}
+
+/* ── Notification item ─────────────────────────────────────────────────── */
+
+.item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--sv-space-3);
+  padding: var(--sv-space-3);
+  border-bottom: var(--sv-border-width-hairline) solid var(--sv-color-border);
+}
+
+.item:last-child {
+  border-bottom: none;
+}
+
+.categoryIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--sv-radius-full);
+  margin-top: 1px;
+  background: var(--sv-color-surface-sunken);
+  color: var(--sv-color-text-muted);
+}
+
+.itemBody {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.itemTitle {
+  display: block;
+  width: 100%;
+  border: none;
+  padding: 0;
+  background: none;
+  font: inherit;
+  font-size: var(--sv-font-size-sm);
+  font-weight: var(--sv-font-weight-semibold);
+  color: var(--sv-color-text-primary);
+  text-decoration: none;
+  text-align: left;
+  line-height: 1.4;
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+  a.itemTitle:hover,
+  button.itemTitle:hover {
+    text-decoration: underline;
+  }
+}
+
+.itemRead .itemTitle {
+  color: var(--sv-color-text-subtle);
+  cursor: default;
+}
+
+.itemTime {
+  font-size: var(--sv-font-size-caption);
+  color: var(--sv-color-text-muted);
+}
+
+.itemEnd {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-2);
+  flex: none;
+  padding-top: 2px;
+}
+
+.unreadDot {
+  display: block;
+  width: 7px;
+  height: 7px;
+  border-radius: var(--sv-radius-full);
+  background: var(--sv-color-accent);
+  flex: none;
+}
+
+.dismissBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  border-radius: var(--sv-radius-sm);
+  background: none;
+  color: var(--sv-color-text-muted);
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+  .dismissBtn:hover {
+    color: var(--sv-color-text-primary);
+    background: var(--sv-color-surface-sunken);
+  }
+}
+
+.viewAll {
+  display: block;
+  text-align: center;
+  padding: var(--sv-space-2) var(--sv-space-3);
+  border-top: var(--sv-border-width-hairline) solid var(--sv-color-border);
+  font-size: var(--sv-font-size-caption);
+  color: var(--sv-color-text-muted);
+  text-decoration: none;
+}
+
+@media (hover: hover) {
+  .viewAll:hover {
+    color: var(--sv-color-text-primary);
+    background: var(--sv-color-surface-sunken);
+  }
+}
+
+.trigger:focus-visible,
+.actionBtn:focus-visible,
+.closeBtn:focus-visible,
+.itemTitle:focus-visible,
+.dismissBtn:focus-visible,
+.viewAll:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+}

package/dist/OverlayHeader.module.css

@@ -6,7 +6,7 @@
 .header {
   flex-shrink: 0;
   background: var(--sv-color-surface);
-  border-bottom: 1px solid var(--sv-color-border);
+  border-bottom: var(--sv-border-width-hairline) solid var(--sv-color-border);
 }
 
 .row {

package/dist/PageContainer.module.css

@@ -1,8 +1,20 @@
 .container {
   width: 100%;
   margin-inline: auto;
+  /* Declared explicitly rather than inherited from a host reset: `maxWidth`
+     and `padding` land on this same element, so whether the max-width bound
+     includes the padding must not depend on whether the consuming app ships
+     a global `box-sizing` reset. @sovereignfs/ui is usable standalone
+     (task 9.17), where no such reset is guaranteed. Same reason Input,
+     Select, Combobox, DatePicker, and FileDropzone each set it locally. */
+  box-sizing: border-box;
 }
 
+/* ── Max width ──────────────────────────────────────────────────────────── */
+
+/* Outer bound, padding included (see box-sizing above): `md` + `padding="md"`
+   yields a 960px box with 896px of content, not 1024px. */
+
 .sm {
   max-width: 640px;
 }
@@ -18,3 +30,53 @@
 .full {
   max-width: none;
 }
+
+/* ── Padding ────────────────────────────────────────────────────────────── */
+
+/* The page gutter, owned by the plugin rather than the runtime shell
+   (task 9.25). `md` reproduces the exact values the shell used to apply
+   (--sv-space-8 desktop / --sv-space-4 mobile), so a bare <PageContainer>
+   renders identically to a pre-9.25 plugin that relied on the shell.
+
+   A fixed four-step scale, deliberately: the review behind task 9.18 found
+   four different ad-hoc padding combinations across plugins, and a free-form
+   value would relocate that inconsistency from CSS modules into JSX.
+
+   --sv-page-gutter is the stand-down hook for an ancestor that *already*
+   supplies the gutter: Dialog sets it to 0 on its content region, so an
+   overlay plugin whose page is one tree rendered into two hosts — the
+   Dialog on soft navigation, the runtime shell on a hard load — is padded
+   exactly once in both, with no prop threading and no knowledge of which
+   host it is in. Setting it to anything other than 0 defeats the fixed
+   scale above and is not a supported use. */
+
+.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/PageHeader.module.css

@@ -13,6 +13,17 @@
   min-width: 0;
 }
 
+/* Wraps the optional icon + `.title` so the icon sizes/aligns itself
+   without touching `.title`'s own rules — every existing icon-less usage
+   renders identically, since a single flex child behaves the same as a
+   non-flex one. */
+.titleRow {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-2);
+  color: var(--sv-color-text-primary);
+}
+
 .title {
   margin: 0;
   font-size: var(--sv-font-size-2xl);
@@ -30,3 +41,46 @@
 .action {
   flex-shrink: 0;
 }
+
+/* ── Mobile ─────────────────────────────────────────────────────────────── */
+/* A compact single row — back (optional) + title + action (optional) —
+   generalized from Kanban's own hand-rolled MobileBoardHeader. Deliberately
+   no description handling and no border; stays consistent with .header's
+   own minimal, borderless treatment, just tighter. */
+
+.mobileHeader {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-2);
+  margin-bottom: var(--sv-space-3);
+}
+
+.mobileBack {
+  flex-shrink: 0;
+}
+
+.mobileTitleIcon {
+  flex-shrink: 0;
+  color: var(--sv-color-text-primary);
+}
+
+.mobileTitle {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--sv-font-size-md);
+  font-weight: var(--sv-font-weight-semibold);
+  color: var(--sv-color-text-primary);
+  line-height: 1.2;
+}
+
+.mobileAction {
+  flex-shrink: 0;
+}
+
+.mobileMenu {
+  flex-shrink: 0;
+}

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

@@ -0,0 +1,17 @@
+/* A QR code is read by a camera, not a person, so it is black on white in every theme. */
+.qr {
+  display: inline-block;
+  padding: var(--sv-space-2);
+  border-radius: var(--sv-radius-md);
+  background: var(--sv-white);
+  line-height: 0;
+}
+
+.qr svg {
+  width: 11rem;
+  height: 11rem;
+}
+
+.qr path {
+  fill: var(--sv-black);
+}

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);
 }
@@ -22,8 +22,10 @@
   cursor: pointer;
 }
 
-.button:hover:not(:disabled) {
-  background: var(--sv-color-surface);
+@media (hover: hover) {
+  .button:hover:not(:disabled) {
+    background: var(--sv-color-surface);
+  }
 }
 
 .button:disabled {

package/dist/RadioGroup.module.css

@@ -86,3 +86,9 @@
   opacity: 0.5;
   cursor: not-allowed;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .circle {
+    transition: none;
+  }
+}

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;
 }
@@ -53,3 +53,9 @@
     color: var(--sv-color-text-primary);
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .segment {
+    transition: none;
+  }
+}

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 */
@@ -80,3 +80,9 @@
   width: 10px;
   height: 10px;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .select {
+    transition: none;
+  }
+}

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
@@ -51,5 +54,20 @@
 .content {
   flex: 1 1 auto;
   overflow-y: auto;
-  overscroll-behavior: contain;
+  /* `none`, not `contain`: `contain` only stops scroll *chaining* to the
+     parent — the panel itself still rubber-bands, which is a real bug for
+     any caller-supplied content that puts a sticky element inside this
+     scroll container (a documented, supported pattern — see this file's own
+     `.content` comment above and Sheet.tsx's remark that "any content-owned
+     internal sticky positioning... resolves against this same scrolling
+     ancestor"). Confirmed live: sovereign-tasks' TaskDetailPane renders a
+     `position: sticky` header inside a Sheet on mobile, and pulling down at
+     the top of its scroll content dragged that header down with the bounce,
+     exposing blank panel background above it — the identical symptom
+     Dialog.module.css's own `.content` already documents and fixes with
+     `none` ("the panel itself still bounces, which reveals white
+     panel-background between OverlayHeader and the sticky tab strip on iOS
+     PWA"). A bounded overlay panel has no legitimate reason to bounce at
+     all, so `none` costs nothing functionally — same reasoning as Dialog. */
+  overscroll-behavior: none;
 }

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);
 }
@@ -63,7 +63,7 @@
   outline-offset: -2px;
 }
 
-@media (max-width: 720px) {
+@media (max-width: 768px) {
   .splitPane,
   .splitPane:not(:has(.handle)) {
     grid-template-columns: 1fr;
@@ -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);