@vertebr/react 0.9.0 → 0.11.0

package/dist/styles/modal.css

@@ -243,3 +243,114 @@
   font-size: 0.72rem;
   color: var(--vb-text-subtle);
 }
+
+/* ── Health modal ────────────────────────────────────── */
+
+.vertebr-health-modal-meta {
+  margin: 0.35rem 0 0;
+  font-size: var(--vb-font-size-100);
+  color: var(--vb-text-muted);
+}
+
+.vertebr-health-modal-error {
+  margin: 0;
+  padding: 0.65rem 0.75rem;
+  border-radius: var(--vb-radius-sm);
+  background: var(--vb-danger-soft, color-mix(in srgb, var(--vb-danger, #a33b3b) 12%, transparent));
+  color: var(--vb-danger, #a33b3b);
+  font-size: var(--vb-font-size-100);
+}
+
+.vertebr-health-modal-empty {
+  margin: 0;
+  color: var(--vb-text-muted);
+  font-size: var(--vb-font-size-100);
+}
+
+.vertebr-health-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+}
+
+.vertebr-health-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  padding: 0.75rem 0.85rem;
+  border: 1px solid var(--vb-border-subdued);
+  border-radius: var(--vb-radius-sm);
+  background: var(--vb-bg-muted);
+}
+
+.vertebr-health-item-top {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  min-width: 0;
+}
+
+.vertebr-health-item-label {
+  font-size: var(--vb-font-size-100);
+  font-weight: var(--vb-font-weight-semibold);
+  color: var(--vb-text);
+}
+
+.vertebr-health-item-detail {
+  margin: 0;
+  padding-left: calc(0.55rem + 0.45rem + 2.4rem);
+  font-size: var(--vb-font-size-100);
+  color: var(--vb-text-secondary);
+  line-height: 1.4;
+}
+
+.vertebr-health-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  flex: none;
+  min-width: 3.6rem;
+  padding: 0.15rem 0.45rem;
+  border-radius: 999px;
+  font-size: var(--vb-font-size-75);
+  font-weight: var(--vb-font-weight-medium);
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+.vertebr-health-badge-dot {
+  width: 0.4rem;
+  height: 0.4rem;
+  border-radius: 999px;
+  background: currentColor;
+}
+
+.vertebr-health-badge[data-status="ok"] {
+  color: var(--vb-ok, #2f6f4e);
+  background: var(--vb-ok-soft, color-mix(in srgb, var(--vb-ok, #2f6f4e) 12%, transparent));
+}
+
+.vertebr-health-badge[data-status="warn"] {
+  color: var(--vb-warn, #9a6b2f);
+  background: color-mix(in srgb, var(--vb-warn, #9a6b2f) 12%, transparent);
+}
+
+.vertebr-health-badge[data-status="error"] {
+  color: var(--vb-danger, #a33b3b);
+  background: var(--vb-danger-soft, color-mix(in srgb, var(--vb-danger, #a33b3b) 12%, transparent));
+}
+
+.vertebr-health-item[data-status="ok"] {
+  border-color: color-mix(in srgb, var(--vb-ok, #2f6f4e) 22%, var(--vb-border-subdued));
+}
+
+.vertebr-health-item[data-status="warn"] {
+  border-color: color-mix(in srgb, var(--vb-warn, #9a6b2f) 28%, var(--vb-border-subdued));
+}
+
+.vertebr-health-item[data-status="error"] {
+  border-color: color-mix(in srgb, var(--vb-danger, #a33b3b) 28%, var(--vb-border-subdued));
+}

package/dist/styles/page-preview.css

@@ -15,6 +15,71 @@
   min-height: 0;
 }
 
+.vertebr-page-related-addons {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.45rem 0.75rem;
+  padding: 0.55rem 1.15rem;
+  border-bottom: 1px solid var(--vb-border-subdued);
+  background: var(--vb-surface-tint);
+}
+
+.vertebr-page-related-addons-label {
+  font-family: var(--vb-mono);
+  font-size: 0.66rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--vb-text-subtle);
+}
+
+.vertebr-page-related-addons-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+
+.vertebr-page-related-addon {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  margin: 0;
+  padding: 0.25rem 0.55rem;
+  border: 1px solid var(--vb-border);
+  border-radius: 999px;
+  background: var(--vb-bg-elevated);
+  color: var(--vb-text-muted);
+  font: inherit;
+  font-size: 0.75rem;
+  font-weight: var(--vb-font-weight-medium);
+  cursor: pointer;
+}
+
+.vertebr-page-related-addon:hover {
+  border-color: var(--vb-border-strong);
+  color: var(--vb-text);
+}
+
+.vertebr-page-related-addon em {
+  font-style: normal;
+  font-family: var(--vb-mono);
+  font-size: 0.62rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--vb-text-subtle);
+}
+
+.vertebr-page-related-addon[data-enabled="true"] {
+  border-color: color-mix(in srgb, var(--vb-accent) 40%, var(--vb-border));
+  background: var(--vb-accent-soft);
+  color: var(--vb-accent-dim);
+}
+
+.vertebr-page-related-addon[data-enabled="true"] em {
+  color: var(--vb-accent);
+}
+
 .vertebr-page-editor {
   flex: 1 1 0%;
   min-width: 0;
@@ -94,6 +159,25 @@
   background: var(--vb-bg);
 }
 
+.vertebr-page-preview-back {
+  appearance: none;
+  margin: 0;
+  border: 1px solid var(--vb-border);
+  border-radius: 999px;
+  padding: 0.28rem 0.75rem;
+  font: inherit;
+  font-size: 0.74rem;
+  font-weight: 520;
+  color: var(--vb-text);
+  background: var(--vb-bg-elevated);
+  cursor: pointer;
+}
+
+.vertebr-page-preview-back:hover {
+  border-color: var(--vb-border-strong);
+  background: var(--vb-bg-muted);
+}
+
 .vertebr-page-preview-viewports button {
   appearance: none;
   margin: 0;

package/dist/styles/select.css

@@ -1,7 +1,10 @@
 /* ── Select ──────────────────────────────────────────── */
 
 .vertebr-select-trigger {
+  box-sizing: border-box;
   width: 100%;
+  max-width: 100%;
+  min-width: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -17,6 +20,7 @@
   font-weight: 500;
   line-height: 1.2;
   cursor: pointer;
+  overflow: hidden;
   transition:
     border-color 140ms ease,
     background 140ms ease,
@@ -50,8 +54,17 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
+}
+
+/* Radix Select.Value / label text — ellipsis needs a non-flex box. */
+.vertebr-select-value > span:not(.vertebr-select-dot),
+.vertebr-select-label {
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -78,6 +91,7 @@
 
 .vertebr-select-icon {
   display: flex;
+  flex: none;
   color: var(--vb-text-muted);
   transition: transform 140ms ease;
 }
@@ -127,6 +141,15 @@
   cursor: pointer;
   user-select: none;
   outline: none;
+  min-width: 0;
+}
+
+.vertebr-select-item > span:first-of-type {
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .vertebr-select-item[data-highlighted] {

package/dist/styles/shell.css

@@ -5,11 +5,11 @@
   grid-row: 1;
   z-index: 40;
   display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(12rem, 22rem) minmax(0, 1fr);
+  grid-template-columns: minmax(14rem, 1.15fr) minmax(11rem, 20rem) minmax(14rem, 1fr);
   align-items: center;
   gap: var(--vb-space-400);
   height: var(--vb-topbar-height);
-  padding: 0 var(--vb-space-500);
+  padding: 0 var(--vb-space-400);
   border-bottom: 1px solid var(--vb-border-subdued);
   background: var(--vb-topbar-bg);
 }
@@ -34,6 +34,33 @@
 
 .vertebr-topbar-end {
   justify-self: end;
+  gap: var(--vb-space-200);
+}
+
+.vertebr-topbar-cluster,
+.vertebr-topbar-account {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--vb-space-100);
+  min-width: 0;
+}
+
+.vertebr-topbar-cluster {
+  padding-right: var(--vb-space-200);
+  margin-right: var(--vb-space-100);
+  border-right: 1px solid var(--vb-border-subdued);
+}
+
+.vertebr-topbar-account {
+  max-width: 14rem;
+  padding-right: var(--vb-space-200);
+  margin-right: var(--vb-space-100);
+  border-right: 1px solid var(--vb-border-subdued);
+}
+
+.vertebr-topbar-cluster:empty,
+.vertebr-topbar-account:empty {
+  display: none;
 }
 
 /* Theme toggle lives in the top bar — hide sidebar-style labels. */
@@ -44,12 +71,26 @@
 .vertebr-topbar .vertebr-theme {
   padding: 0;
   gap: 0;
+  flex: none;
+}
+
+.vertebr-topbar .vertebr-theme[data-compact="true"] .vertebr-theme-toggle {
+  grid-template-columns: 1fr 1fr;
+  gap: 0.15rem;
+  padding: 0.15rem;
+}
+
+.vertebr-topbar .vertebr-theme[data-compact="true"] .vertebr-theme-option {
+  padding: 0.35rem 0.4rem;
+  min-width: 1.85rem;
 }
 
 .vertebr-topbar-brand {
   font-size: var(--vb-font-size-200);
   font-weight: var(--vb-font-weight-semibold);
+  letter-spacing: -0.01em;
   white-space: nowrap;
+  color: var(--vb-text);
 }
 
 .vertebr-topbar-brand-wrap {
@@ -62,18 +103,40 @@
 .vertebr-topbar-host {
   display: inline-flex;
   align-items: center;
-  gap: 0.35rem;
+  gap: 0.4rem;
   min-width: 0;
+  max-width: 12rem;
+  color: var(--vb-text-secondary);
+  font-size: var(--vb-font-size-200);
+  font-weight: var(--vb-font-weight-medium);
+}
+
+.vertebr-topbar-host[data-primary="true"] {
+  color: var(--vb-text);
+}
+
+.vertebr-topbar-host[data-primary="true"] .vertebr-topbar-host-label {
+  font-size: var(--vb-font-size-200);
+  font-weight: var(--vb-font-weight-semibold);
+  letter-spacing: -0.01em;
+}
+
+.vertebr-topbar-product {
+  display: inline-flex;
+  align-items: center;
   padding-left: var(--vb-space-200);
   border-left: 1px solid var(--vb-border-subdued);
   color: var(--vb-text-muted);
-  font-size: var(--vb-font-size-100);
-  font-weight: var(--vb-font-weight-regular);
+  font-size: var(--vb-font-size-75);
+  font-weight: var(--vb-font-weight-medium);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  white-space: nowrap;
 }
 
 .vertebr-topbar-host-logo {
-  width: 1rem;
-  height: 1rem;
+  width: 1.15rem;
+  height: 1.15rem;
   border-radius: var(--vb-radius-xs);
   object-fit: contain;
 }
@@ -86,19 +149,33 @@
 
 .vertebr-topbar-toggle {
   appearance: none;
+  display: inline-grid;
+  place-items: center;
   border: 1px solid var(--vb-border);
   background: var(--vb-bg-elevated);
-  color: var(--vb-text);
+  color: var(--vb-text-secondary);
   border-radius: var(--vb-radius-sm);
   width: 2rem;
   height: 2rem;
   cursor: pointer;
+  flex: none;
+  transition:
+    background 0.15s ease,
+    color 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.vertebr-topbar-toggle:hover {
+  background: var(--vb-bg-hover);
+  color: var(--vb-text);
+  border-color: var(--vb-border-strong, var(--vb-border));
 }
 
 .vertebr-topbar-env {
   display: flex;
   align-items: center;
   gap: var(--vb-space-200);
+  margin-left: var(--vb-space-100);
 }
 
 .vertebr-topbar-search {
@@ -107,9 +184,9 @@
   align-items: center;
   gap: var(--vb-space-200);
   width: 100%;
-  padding: 0.45rem 0.75rem;
-  border: 1px solid var(--vb-border);
-  border-radius: var(--vb-radius-full);
+  padding: 0.4rem 0.7rem;
+  border: 1px solid transparent;
+  border-radius: var(--vb-radius-md);
   background: var(--vb-bg-muted);
   color: var(--vb-text-subtle);
   font-size: var(--vb-font-size-100);
@@ -117,20 +194,55 @@
   text-align: left;
   transition:
     border-color 0.15s ease,
-    background 0.15s ease;
+    background 0.15s ease,
+    color 0.15s ease,
+    box-shadow 0.15s ease;
 }
 
 .vertebr-topbar-search:hover {
-  border-color: var(--vb-border-strong, var(--vb-border));
-  background: var(--vb-bg-hover);
+  border-color: var(--vb-border);
+  background: var(--vb-bg-elevated);
   color: var(--vb-text-secondary);
+  box-shadow: var(--vb-shadow-sm);
 }
 
 .vertebr-topbar-search kbd {
   margin-left: auto;
+  padding: 0.1rem 0.35rem;
+  border: 1px solid var(--vb-border-subdued);
+  border-radius: var(--vb-radius-xs);
+  background: var(--vb-bg-elevated);
   font-family: var(--vb-mono);
   font-size: var(--vb-font-size-75);
-  opacity: 0.7;
+  opacity: 0.85;
+}
+
+.vertebr-topbar-action {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  height: 2rem;
+  padding: 0 0.65rem;
+  border: 1px solid var(--vb-border);
+  border-radius: var(--vb-radius-sm);
+  background: var(--vb-bg-elevated);
+  color: var(--vb-text-secondary);
+  font: inherit;
+  font-size: var(--vb-font-size-100);
+  font-weight: var(--vb-font-weight-medium);
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    background 0.15s ease,
+    color 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.vertebr-topbar-action:hover {
+  background: var(--vb-bg-hover);
+  color: var(--vb-text);
+  border-color: var(--vb-border-strong, var(--vb-border));
 }
 
 .vertebr-topbar-sync {
@@ -140,6 +252,60 @@
   white-space: nowrap;
 }
 
+.vertebr-topbar-health {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  height: 2rem;
+  padding: 0 0.6rem;
+  border: 1px solid transparent;
+  border-radius: var(--vb-radius-sm);
+  font: inherit;
+  font-size: var(--vb-font-size-100);
+  font-weight: var(--vb-font-weight-medium);
+  color: var(--vb-text-muted);
+  background: transparent;
+  cursor: pointer;
+  transition:
+    background 0.15s ease,
+    border-color 0.15s ease,
+    filter 0.15s ease;
+}
+
+.vertebr-topbar-health:hover {
+  filter: brightness(0.97);
+  border-color: color-mix(in srgb, currentColor 28%, transparent);
+}
+
+.vertebr-topbar-health:focus-visible {
+  outline: 2px solid var(--vb-focus, currentColor);
+  outline-offset: 2px;
+}
+
+.vertebr-topbar-health-dot {
+  width: 0.45rem;
+  height: 0.45rem;
+  border-radius: 999px;
+  background: currentColor;
+  flex: none;
+}
+
+.vertebr-topbar-health[data-tone="ok"] {
+  color: var(--vb-ok, #2f6f4e);
+  background: var(--vb-ok-soft, color-mix(in srgb, var(--vb-ok, #2f6f4e) 12%, transparent));
+}
+
+.vertebr-topbar-health[data-tone="warn"] {
+  color: var(--vb-warn, #9a6b2f);
+  background: color-mix(in srgb, var(--vb-warn, #9a6b2f) 12%, transparent);
+}
+
+.vertebr-topbar-health[data-tone="error"] {
+  color: var(--vb-danger, #a33b3b);
+  background: var(--vb-danger-soft, color-mix(in srgb, var(--vb-danger, #a33b3b) 12%, transparent));
+}
+
 .vertebr-topbar-token {
   display: flex;
   align-items: center;
@@ -148,13 +314,48 @@
 
 .vertebr-topbar-user {
   font-size: var(--vb-font-size-100);
-  color: var(--vb-text-muted);
-  max-width: 12rem;
+  color: var(--vb-text-secondary);
+  max-width: 9rem;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.vertebr-topbar-signout {
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: var(--vb-text-muted);
+  font: inherit;
+  font-size: var(--vb-font-size-100);
+  font-weight: var(--vb-font-weight-medium);
+  padding: 0.25rem 0.35rem;
+  border-radius: var(--vb-radius-xs);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.vertebr-topbar-signout:hover {
+  color: var(--vb-text);
+  background: var(--vb-bg-hover);
+}
+
+@media (max-width: 1100px) {
+  .vertebr-topbar-health-text {
+    display: none;
+  }
+
+  .vertebr-topbar-health {
+    padding: 0;
+    width: 2rem;
+    justify-content: center;
+  }
+
+  .vertebr-topbar-user {
+    display: none;
+  }
+}
+
 @media (max-width: 900px) {
   .vertebr-topbar {
     grid-template-columns: minmax(0, 1fr) auto;
@@ -164,11 +365,26 @@
     display: none;
   }
 
-  .vertebr-topbar-sync span {
+  .vertebr-topbar-action span {
+    display: none;
+  }
+
+  .vertebr-topbar-action {
+    width: 2rem;
+    padding: 0;
+    justify-content: center;
+  }
+
+  .vertebr-topbar-host {
+    max-width: 7rem;
+  }
+
+  .vertebr-topbar-product {
     display: none;
   }
 }
 
+
 /* ── Command palette ─────────────────────────────────── */
 
 .vertebr-command-backdrop {