@sovereignfs/ui 0.21.0

package/NOTICE

@@ -0,0 +1,24 @@
+Sovereign Design System (@sovereignfs/ui)
+Copyright (C) Sovereign contributors
+
+---
+
+This package includes icons derived from Lucide (https://lucide.dev).
+
+Lucide
+Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of
+Feather (MIT). All other copyright (c) for Lucide are held by Lucide Contributors 2022.
+
+ISC License
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.

package/dist/Avatar.module.css

@@ -0,0 +1,38 @@
+.avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: var(--sv-color-surface-raised);
+  border: 1px solid var(--sv-color-border);
+  overflow: hidden;
+  flex-shrink: 0;
+  font-weight: var(--sv-font-weight-medium);
+  color: var(--sv-color-text-primary);
+  font-family: var(--sv-font-family);
+}
+
+.sm {
+  width: 24px;
+  height: 24px;
+  font-size: var(--sv-font-size-label);
+}
+
+.md {
+  width: 32px;
+  height: 32px;
+  font-size: var(--sv-font-size-xs);
+}
+
+.lg {
+  width: 40px;
+  height: 40px;
+  font-size: var(--sv-font-size-sm);
+}
+
+.img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}

package/dist/Badge.module.css

@@ -0,0 +1,88 @@
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sv-space-1);
+  border-radius: var(--sv-radius-sm);
+  font-family: var(--sv-font-family);
+  font-size: var(--sv-font-size-xs);
+  line-height: 1;
+  white-space: nowrap;
+  user-select: none;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* role — neutral fill, border, title case */
+.role {
+  padding: 2px var(--sv-space-2);
+  background: var(--sv-color-surface-sunken);
+  border: 1px solid var(--sv-color-border);
+  color: var(--sv-color-text-primary);
+  font-size: var(--sv-font-size-label);
+  font-weight: var(--sv-font-weight-semibold);
+}
+
+/* status — tinted chip with leading colour dot; colour set by chip* classes below */
+.status {
+  padding: 2px var(--sv-space-2) 2px var(--sv-space-1);
+  font-weight: var(--sv-font-weight-medium);
+}
+
+.chipGreen {
+  background: var(--sv-color-success-surface);
+  border: 1px solid var(--sv-color-success-border);
+  color: var(--sv-color-success-text);
+}
+
+.chipAmber {
+  background: var(--sv-color-warning-surface);
+  border: 1px solid var(--sv-color-warning-border);
+  color: var(--sv-color-warning-text);
+}
+
+.chipRed {
+  background: var(--sv-color-error-surface);
+  border: 1px solid var(--sv-color-error-border);
+  color: var(--sv-color-error-text);
+}
+
+.chipNeutral {
+  background: var(--sv-color-surface-sunken);
+  border: 1px solid var(--sv-color-border);
+  color: var(--sv-color-text-muted);
+}
+
+/* mono — monospace font, neutral surface, for type tags / versions */
+.mono {
+  padding: 2px var(--sv-space-2);
+  background: var(--sv-color-surface-sunken);
+  border: 1px solid var(--sv-color-border);
+  color: var(--sv-color-text-muted);
+  font-family: var(--sv-font-family-mono);
+  font-size: var(--sv-font-size-xs);
+}
+
+/* Status dot */
+.dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: var(--sv-radius-full);
+  flex-shrink: 0;
+}
+
+.dotGreen {
+  background: var(--sv-color-success-text);
+}
+
+.dotRed {
+  background: var(--sv-color-error-text);
+}
+
+.dotAmber {
+  background: var(--sv-color-warning-text);
+}
+
+.dotGrey {
+  background: var(--sv-color-text-muted);
+}

package/dist/Button.module.css

@@ -0,0 +1,77 @@
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sv-space-2);
+  border: 1px solid transparent;
+  border-radius: var(--sv-radius-md);
+  font-family: var(--sv-font-family);
+  font-weight: var(--sv-font-weight-medium);
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.button:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+}
+
+.button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Sizes */
+.sm {
+  padding: var(--sv-space-1) var(--sv-space-3);
+  font-size: var(--sv-font-size-sm);
+}
+
+.md {
+  padding: 13px var(--sv-space-4);
+  font-size: var(--sv-font-size-sm);
+  font-weight: var(--sv-font-weight-semibold);
+}
+
+/* Variants */
+.primary {
+  background-color: var(--sv-color-accent);
+  color: var(--sv-color-text-on-accent);
+}
+
+.primary:hover:not(:disabled) {
+  background-color: var(--sv-color-accent-hover);
+}
+
+.secondary {
+  background-color: var(--sv-color-surface);
+  color: var(--sv-color-text-primary);
+  border-color: var(--sv-color-border-strong);
+}
+
+.secondary:hover:not(:disabled) {
+  background-color: var(--sv-color-surface-sunken);
+}
+
+.ghost {
+  background-color: transparent;
+  color: var(--sv-color-text-primary);
+}
+
+.ghost:hover:not(:disabled) {
+  background-color: var(--sv-color-surface-sunken);
+}
+
+.destructive {
+  background-color: transparent;
+  color: var(--sv-color-error-text);
+  border-color: var(--sv-color-error-border);
+}
+
+.destructive:hover:not(:disabled) {
+  background-color: var(--sv-color-error-surface);
+}

package/dist/Card.module.css

@@ -0,0 +1,34 @@
+.card {
+  background: var(--sv-color-surface-raised);
+  border: 1px solid var(--sv-color-border);
+  border-radius: var(--sv-radius-lg);
+  box-shadow: var(--sv-shadow-card);
+}
+
+.paddingSm {
+  padding: var(--sv-space-3);
+}
+
+.paddingMd {
+  padding: var(--sv-space-5);
+}
+
+.paddingLg {
+  padding: var(--sv-space-8);
+}
+
+.interactive {
+  cursor: pointer;
+  text-decoration: none;
+  display: block;
+  transition: border-color 0.15s ease;
+}
+
+.interactive:hover {
+  border-color: var(--sv-color-border-strong);
+}
+
+.interactive:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+}

package/dist/Dialog.module.css

@@ -0,0 +1,188 @@
+/* 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.
+ *
+ * `--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
+ * from the rail, not the viewport edge, and the rail stays visible/usable.
+ * `--sv-dialog-inset-top` (RFC 0013) mirrors this on the vertical axis: the
+ * shell sets it to the mobile header height so the header stays visible and
+ * interactive above the dialog sheet. Defaults to 0 for standalone use. */
+
+.scrim {
+  position: fixed;
+  top: var(--sv-dialog-inset-top, 0);
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* left edge always 0 so the backdrop covers the full viewport incl. sidebar.
+     padding-left offsets the panel's available area to start at the rail edge. */
+  padding: var(--sv-space-8);
+  padding-left: calc(var(--sv-dialog-inset-left, 0px) + var(--sv-space-8));
+  background: var(--sv-color-scrim);
+}
+
+.panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--sv-color-surface-raised);
+  color: var(--sv-color-text-primary);
+  border: 1px solid var(--sv-color-border);
+  border-radius: var(--sv-radius-lg);
+  box-shadow: var(--sv-shadow-overlay);
+}
+
+.content {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: var(--sv-space-6);
+}
+
+/* Fixed sizes. `max-*: 100%` caps to the scrim's content box (viewport minus
+ * margin) so a size never overflows a small viewport. */
+.sm {
+  width: 24rem;
+  height: 28rem;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.md {
+  width: 36rem;
+  height: 42rem;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.lg,
+.full {
+  width: 100%;
+  height: 100%;
+}
+
+.close {
+  position: absolute;
+  top: var(--sv-space-3);
+  right: var(--sv-space-3);
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sv-space-8);
+  height: var(--sv-space-8);
+  border: none;
+  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;
+}
+
+.close:hover {
+  background: var(--sv-color-surface-sunken);
+  color: var(--sv-color-text-primary);
+}
+
+.close:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+}
+
+/* Hidden on desktop; shown only on mobile where it replaces the close button. */
+.mobileBar {
+  display: none;
+}
+
+/* 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).
+ * The panel therefore fills height: 100% of the remaining space, not 100dvh. */
+@media (max-width: 768px) {
+  /* On mobile the overlay feels like a full-page push, not a floating modal.
+     Remove the dim scrim and panel chrome so it's indistinguishable from a
+     regular page render. router.back() still closes it correctly. */
+  .scrim {
+    padding: 0;
+    background: transparent;
+  }
+
+  .panel,
+  .sm,
+  .md,
+  .lg,
+  .full {
+    width: 100%;
+    height: 100%;
+    max-width: none;
+    max-height: none;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+    background: var(--sv-color-surface);
+  }
+
+  /* Desktop close button is replaced by mobileBar on mobile. */
+  .close {
+    display: none;
+  }
+
+  /* Title + close button in one solid row. Being a flex sibling before
+     .content means it never scrolls — the content area scrolls below it. */
+  .mobileBar {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    padding: var(--sv-space-3) var(--sv-space-4);
+    background: var(--sv-color-surface);
+    border-bottom: 1px solid var(--sv-color-border);
+  }
+
+  .mobileBarTitle {
+    flex: 1;
+    font-size: var(--sv-font-size-xl);
+    font-weight: var(--sv-font-weight-semibold);
+    color: var(--sv-color-text-primary);
+  }
+
+  .mobileBarClose {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--sv-space-8);
+    height: var(--sv-space-8);
+    flex-shrink: 0;
+    border: none;
+    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;
+  }
+
+  .mobileBarClose:hover {
+    background: var(--sv-color-surface-sunken);
+    color: var(--sv-color-text-primary);
+  }
+
+  /* Remove top padding so the sticky plugin header sits flush against the
+     mobileBar — no gap for scrolling content to bleed through. */
+  .content {
+    padding-top: 0;
+    padding-bottom: calc(var(--sv-shell-footer-height, 60px) + var(--sv-space-6, 24px));
+  }
+}

package/dist/Drawer.module.css

@@ -0,0 +1,30 @@
+/* Drawer — bottom-sheet surface (RFC 0013). Shares scrim/shadow tokens with
+ * Dialog but slides up from the bottom instead of centering. The panel has no
+ * fixed height — it sizes to content, capped at 80dvh so some page context
+ * remains visible above. Safe-area-aware: bottom padding clears the home
+ * indicator in standalone/fullscreen mode. */
+
+.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. */
+  bottom: var(--sv-shell-footer-height, 0);
+  z-index: 100;
+  display: flex;
+  align-items: flex-end;
+  background: var(--sv-color-scrim);
+}
+
+.panel {
+  width: 100%;
+  max-height: 80dvh;
+  overflow-y: auto;
+  background: var(--sv-color-surface-raised);
+  border-top: 1px 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;
+}

package/dist/EmptyState.module.css

@@ -0,0 +1,27 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sv-space-3);
+  padding: var(--sv-space-12) var(--sv-space-6);
+  text-align: center;
+}
+
+.icon {
+  color: var(--sv-color-text-subtle);
+}
+
+.heading {
+  margin: 0;
+  font-size: var(--sv-font-size-md);
+  font-weight: var(--sv-font-weight-semibold);
+  color: var(--sv-color-text-primary);
+}
+
+.description {
+  margin: 0;
+  font-size: var(--sv-font-size-sm);
+  color: var(--sv-color-text-muted);
+  max-width: 36ch;
+}

package/dist/FormField.module.css

@@ -0,0 +1,28 @@
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sv-space-1);
+}
+
+.label {
+  font-size: var(--sv-font-size-sm);
+  font-weight: var(--sv-font-weight-medium);
+  color: var(--sv-color-text-primary);
+}
+
+.required {
+  color: var(--sv-color-error-text);
+  margin-left: var(--sv-space-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: var(--sv-font-size-xs);
+  color: var(--sv-color-text-muted);
+}
+
+.error {
+  margin: 0;
+  font-size: var(--sv-font-size-xs);
+  color: var(--sv-color-error-text);
+}

package/dist/Icon.module.css

@@ -0,0 +1,22 @@
+.root {
+  display: inline-block;
+  flex-shrink: 0;
+  /* Prevent the inline-block from adding line-height whitespace below the SVG. */
+  line-height: 0;
+  /* Color follows the surrounding text via currentColor — no token needed. */
+}
+
+.sm {
+  width: var(--sv-icon-size-sm);
+  height: var(--sv-icon-size-sm);
+}
+
+.md {
+  width: var(--sv-icon-size-md);
+  height: var(--sv-icon-size-md);
+}
+
+.lg {
+  width: var(--sv-icon-size-lg);
+  height: var(--sv-icon-size-lg);
+}

package/dist/Input.module.css

@@ -0,0 +1,37 @@
+.input {
+  display: block;
+  width: 100%;
+  padding: var(--sv-space-2) var(--sv-space-3);
+  font-family: var(--sv-font-family);
+  font-size: var(--sv-font-size-sm);
+  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-radius: var(--sv-radius-md);
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.input::placeholder {
+  color: var(--sv-color-text-muted);
+}
+
+.input:focus-visible {
+  outline: none;
+  border-color: var(--sv-color-accent);
+  box-shadow: 0 0 0 2px var(--sv-color-focus-ring);
+}
+
+.input:read-only {
+  background-color: var(--sv-color-surface-sunken);
+  color: var(--sv-color-text-muted);
+  border-color: var(--sv-color-border);
+  cursor: default;
+}
+
+.input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/dist/NavTabs.module.css

@@ -0,0 +1,48 @@
+.nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0;
+  border-bottom: 1px solid var(--sv-color-border);
+}
+
+.link {
+  padding: var(--sv-space-2) var(--sv-space-3);
+  padding-bottom: calc(var(--sv-space-2) + 2px);
+  border-bottom: 2px solid transparent;
+  font-size: var(--sv-font-size-sm);
+  font-weight: var(--sv-font-weight-medium);
+  color: var(--sv-color-text-muted);
+  text-decoration: none;
+  white-space: nowrap;
+  transition: color 0.1s ease;
+}
+
+.link:hover {
+  color: var(--sv-color-text-primary);
+}
+
+.link:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: -2px;
+  border-radius: var(--sv-radius-sm);
+}
+
+.active {
+  color: var(--sv-color-text-primary);
+  font-weight: var(--sv-font-weight-semibold);
+  border-bottom-color: var(--sv-color-text-primary);
+}
+
+@media (max-width: 640px) {
+  .nav {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    scrollbar-width: none;
+    -webkit-overflow-scrolling: touch;
+    mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
+  }
+
+  .nav::-webkit-scrollbar {
+    display: none;
+  }
+}

package/dist/PageHeader.module.css

@@ -0,0 +1,32 @@
+.header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--sv-space-4);
+  margin-bottom: var(--sv-space-6);
+}
+
+.text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sv-space-1);
+  min-width: 0;
+}
+
+.title {
+  margin: 0;
+  font-size: var(--sv-font-size-2xl);
+  font-weight: var(--sv-font-weight-semibold);
+  color: var(--sv-color-text-primary);
+  line-height: 1.2;
+}
+
+.description {
+  margin: 0;
+  font-size: var(--sv-font-size-sm);
+  color: var(--sv-color-text-muted);
+}
+
+.action {
+  flex-shrink: 0;
+}