@sovereignfs/ui 0.41.0 → 0.54.0

package/dist/Item.module.css

@@ -0,0 +1,70 @@
+.root {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-3);
+  width: 100%;
+  padding: var(--sv-space-3);
+  border: none;
+  border-radius: var(--sv-radius-md);
+  background: transparent;
+  text-align: left;
+  font-family: var(--sv-font-family);
+  color: inherit;
+}
+
+.interactive {
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+  .interactive:not(:disabled):hover {
+    background: var(--sv-color-surface-sunken);
+  }
+}
+
+.interactive:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: -2px;
+}
+
+.interactive:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+@media (pointer: coarse) {
+  .root {
+    min-height: var(--sv-touch-target-min, 44px);
+  }
+}
+
+.leading,
+.trailing {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1;
+}
+
+.title {
+  font-size: var(--sv-font-size-sm);
+  font-weight: var(--sv-font-weight-medium);
+  color: var(--sv-color-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.description {
+  font-size: var(--sv-font-size-caption);
+  color: var(--sv-color-text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/Kbd.module.css

@@ -0,0 +1,14 @@
+.kbd {
+  display: inline-flex;
+  align-items: center;
+  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-radius: var(--sv-radius-sm);
+  background: var(--sv-color-surface-sunken);
+  color: var(--sv-color-text-primary);
+  font-family: var(--sv-font-family-mono);
+  font-size: var(--sv-font-size-xs);
+  line-height: 1;
+}

package/dist/Label.module.css

@@ -0,0 +1,11 @@
+.label {
+  font-size: var(--sv-font-size-sm);
+  font-weight: var(--sv-font-weight-medium);
+  color: var(--sv-color-text-primary);
+  cursor: default;
+}
+
+.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

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,49 @@
+/* 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);
+}

package/dist/Marker.module.css

@@ -0,0 +1,33 @@
+.marker {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  margin: 0 1px;
+  border: none;
+  border-radius: var(--sv-radius-full);
+  background: var(--sv-color-accent-subtle);
+  color: var(--sv-color-accent);
+  font-family: var(--sv-font-family);
+  font-size: var(--sv-font-size-label);
+  font-weight: var(--sv-font-weight-semibold);
+  line-height: 1;
+  vertical-align: super;
+}
+
+button.marker {
+  cursor: pointer;
+}
+
+button.marker:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 1px;
+}
+
+@media (hover: hover) {
+  button.marker:hover {
+    background: color-mix(in srgb, var(--sv-color-accent-subtle) 70%, var(--sv-color-accent) 30%);
+  }
+}

package/dist/Menu.module.css

@@ -1,6 +1,13 @@
 /* Menu — the item list shared by both presentations (Popover panel on
  * desktop, Drawer panel on mobile); the presentational chrome around it is
- * entirely owned by those two components, not duplicated here. */
+ * entirely owned by those two components, not duplicated here.
+ *
+ * Sizing audit: reviewed against this scale's other compact controls —
+ * --sv-radius-sm (6px) and --sv-font-size-sm (14px) already fit. The 44px
+ * min-height is a deliberate design choice, kept unconditional (not gated
+ * to pointer:coarse like Button/Checkbox) because this menu doubles as a
+ * full Drawer sheet on mobile, where every item must stay comfortably
+ * tappable. */
 
 .list {
   list-style: none;

package/dist/Message.module.css

@@ -0,0 +1,99 @@
+.row {
+  display: flex;
+  flex-direction: column;
+  max-width: 80%;
+}
+
+.user {
+  align-self: flex-end;
+  align-items: flex-end;
+}
+
+.assistant,
+.tool {
+  align-self: flex-start;
+  align-items: flex-start;
+}
+
+.bubble {
+  padding: var(--sv-space-2) var(--sv-space-3);
+  border-radius: var(--sv-radius-xl);
+  font-size: var(--sv-font-size-sm);
+  line-height: 1.5;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+}
+
+.user .bubble {
+  background: var(--sv-color-accent);
+  color: var(--sv-color-text-on-accent);
+  border-bottom-right-radius: var(--sv-radius-sm);
+}
+
+.assistant .bubble {
+  background: var(--sv-color-surface-raised);
+  border: 1px solid var(--sv-color-border);
+  color: var(--sv-color-text-primary);
+  border-bottom-left-radius: var(--sv-radius-sm);
+}
+
+.tool .bubble {
+  background: var(--sv-color-surface-sunken);
+  color: var(--sv-color-text-muted);
+  font-family: var(--sv-font-family-mono);
+  font-size: var(--sv-font-size-xs);
+  border-bottom-left-radius: var(--sv-radius-sm);
+}
+
+.actions {
+  display: flex;
+  gap: var(--sv-space-2);
+  margin-top: var(--sv-space-1);
+  font-size: var(--sv-font-size-caption);
+  color: var(--sv-color-text-muted);
+}
+
+/* Typing indicator — three dots, staggered pulse. */
+.typingDots {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: var(--sv-space-1) 0;
+}
+
+.dot {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--sv-radius-full);
+  background: currentColor;
+  opacity: 0.4;
+  animation: typing-pulse 1.2s ease-in-out infinite;
+}
+
+.dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.dot:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes typing-pulse {
+  0%,
+  80%,
+  100% {
+    opacity: 0.4;
+    transform: scale(0.85);
+  }
+  40% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dot {
+    animation: none;
+    opacity: 0.7;
+  }
+}

package/dist/MessageScroller.module.css

@@ -0,0 +1,54 @@
+.root {
+  position: relative;
+  height: 100%;
+  min-height: 0;
+}
+
+.scrollContainer {
+  height: 100%;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sv-space-3);
+  padding: var(--sv-space-3);
+  scrollbar-width: thin;
+  scrollbar-color: var(--sv-color-border-strong) transparent;
+}
+
+.scrollContainer::-webkit-scrollbar {
+  width: 8px;
+}
+
+.scrollContainer::-webkit-scrollbar-thumb {
+  background: var(--sv-color-border-strong);
+  border-radius: var(--sv-radius-full);
+}
+
+.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-radius: var(--sv-radius-full);
+  background: var(--sv-color-surface-raised);
+  box-shadow: var(--sv-shadow-popover);
+  color: var(--sv-color-text-primary);
+  font-family: var(--sv-font-family);
+  font-size: var(--sv-font-size-caption);
+  font-weight: var(--sv-font-weight-medium);
+  cursor: pointer;
+}
+
+.jumpButton:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+}
+
+@media (hover: hover) {
+  .jumpButton:hover {
+    background: var(--sv-color-surface-sunken);
+  }
+}

package/dist/MobileAppsDrawer.module.css

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

package/dist/MobileFooter.module.css

@@ -0,0 +1,73 @@
+.footer {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  /* Mobile-only component — never render wider than the platform's own
+     mobile breakpoint, even if a consumer accidentally mounts it in a wider
+     container (e.g. an un-gated preview). At real mobile widths this is a
+     no-op since the viewport itself is already narrower. */
+  max-width: 768px;
+  margin-inline: auto;
+  min-height: var(--sv-shell-footer-height, 60px);
+  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);
+  position: relative;
+  z-index: 101;
+}
+
+.navItem {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  min-height: 52px;
+  border: none;
+  background: transparent;
+  color: var(--sv-color-text-muted);
+  font: inherit;
+  cursor: pointer;
+  text-decoration: none;
+  border-radius: var(--sv-radius-md);
+  transition: color 0.1s;
+  outline: none;
+}
+
+@media (hover: hover) {
+  .navItem:hover {
+    color: var(--sv-color-text-primary);
+  }
+}
+
+.navItem:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: -2px;
+}
+
+.navItemActive {
+  color: var(--sv-color-text-primary);
+}
+
+.navItemApps {
+  position: relative;
+}
+
+.navItemAppsOpen {
+  color: var(--sv-color-text-primary);
+}
+
+.navItemAppsOpen::before {
+  content: '';
+  position: absolute;
+  width: 48px;
+  height: 48px;
+  border-radius: var(--sv-radius-full);
+  background: var(--sv-color-surface-sunken);
+}
+
+.navItemAppsOpen svg,
+.navItemAppsOpen img {
+  position: relative;
+  z-index: 1;
+}

package/dist/MobileHeader.module.css

@@ -0,0 +1,63 @@
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sv-space-3);
+  width: 100%;
+  /* Mobile-only component — never render wider than the platform's own
+     mobile breakpoint, even if a consumer accidentally mounts it in a wider
+     container (e.g. an un-gated preview). At real mobile widths this is a
+     no-op since the viewport itself is already narrower. */
+  max-width: 768px;
+  margin-inline: auto;
+  min-height: var(--sv-shell-header-height, 60px);
+  padding: var(--sv-space-3) var(--sv-space-4);
+  padding-top: max(var(--sv-space-3), env(safe-area-inset-top));
+  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);
+  position: sticky;
+  top: 0;
+  z-index: 101;
+}
+
+.brandGroup {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-3);
+  min-width: 0;
+}
+
+/* Matches the runtime shell's own .mobileBrandIcon (shell.module.css) — the
+   default logo shown when the consumer doesn't supply one. */
+.defaultLogo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 36px;
+  height: 36px;
+  border-radius: var(--sv-radius-md);
+  background-color: var(--sv-color-accent);
+  color: var(--sv-color-text-on-accent);
+  font-weight: var(--sv-font-weight-semibold);
+  overflow: hidden;
+}
+
+.title {
+  font-size: var(--sv-font-size-md);
+  font-weight: var(--sv-font-weight-semibold);
+  color: var(--sv-color-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.right {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-2);
+  margin-left: auto;
+  flex-shrink: 0;
+}

package/dist/NavigationMenu.module.css

@@ -0,0 +1,53 @@
+.nav {
+  min-width: 0;
+}
+
+.list {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.link,
+.trigger {
+  display: inline-flex;
+  align-items: center;
+  height: 36px;
+  padding: 0 var(--sv-space-3);
+  border: none;
+  border-radius: var(--sv-radius-md);
+  background: transparent;
+  color: var(--sv-color-text-primary);
+  font-family: var(--sv-font-family);
+  font-size: var(--sv-font-size-sm);
+  font-weight: var(--sv-font-weight-medium);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+  .link:hover,
+  .trigger:hover {
+    background: var(--sv-color-surface-sunken);
+  }
+}
+
+.link:focus-visible,
+.trigger:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+}
+
+.triggerOpen {
+  background: var(--sv-color-surface-sunken);
+}
+
+@media (pointer: coarse) {
+  .link,
+  .trigger {
+    min-height: var(--sv-touch-target-min, 44px);
+  }
+}

package/dist/PageContainer.module.css

@@ -0,0 +1,20 @@
+.container {
+  width: 100%;
+  margin-inline: auto;
+}
+
+.sm {
+  max-width: 640px;
+}
+
+.md {
+  max-width: 960px;
+}
+
+.lg {
+  max-width: 1200px;
+}
+
+.full {
+  max-width: none;
+}