@vertebr/react 0.8.1 → 0.10.0

package/dist/styles/shell.css

@@ -4,12 +4,12 @@
   grid-column: 1 / -1;
   grid-row: 1;
   z-index: 40;
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(14rem, 1.15fr) minmax(11rem, 20rem) minmax(14rem, 1fr);
   align-items: center;
-  justify-content: space-between;
   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);
 }
@@ -22,6 +22,47 @@
   min-width: 0;
 }
 
+.vertebr-topbar-start {
+  justify-self: start;
+}
+
+.vertebr-topbar-center {
+  justify-self: center;
+  width: 100%;
+  min-width: 0;
+}
+
+.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. */
 .vertebr-topbar .vertebr-nav-label {
   display: none;
@@ -30,51 +71,239 @@
 .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 {
+  display: flex;
+  align-items: center;
+  gap: var(--vb-space-200);
+  min-width: 0;
+}
+
+.vertebr-topbar-host {
+  display: inline-flex;
+  align-items: center;
+  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-75);
+  font-weight: var(--vb-font-weight-medium);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.vertebr-topbar-host-logo {
+  width: 1.15rem;
+  height: 1.15rem;
+  border-radius: var(--vb-radius-xs);
+  object-fit: contain;
+}
+
+.vertebr-topbar-host-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .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 {
+  appearance: none;
   display: flex;
   align-items: center;
   gap: var(--vb-space-200);
-  min-width: 12rem;
-  max-width: 22rem;
-  flex: 1;
-  padding: 0.45rem 0.75rem;
-  border: 1px solid var(--vb-border);
-  border-radius: var(--vb-radius-full);
+  width: 100%;
+  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);
+  cursor: pointer;
+  text-align: left;
+  transition:
+    border-color 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);
+  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 {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  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 {
@@ -85,19 +314,185 @@
 
 .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-search {
+  .vertebr-topbar {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  .vertebr-topbar-center {
+    display: none;
+  }
+
+  .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 {
+  position: fixed;
+  inset: 0;
+  z-index: 90;
+  display: grid;
+  place-items: start center;
+  padding: min(12vh, 6rem) 1rem 1rem;
+  background: color-mix(in srgb, var(--vb-bg) 55%, rgba(0, 0, 0, 0.45));
+  backdrop-filter: blur(6px);
+  animation: vb-fade-in var(--vb-duration-normal) var(--vb-ease);
+}
+
+.vertebr-command {
+  width: min(100%, 34rem);
+  overflow: hidden;
+  border: 1px solid var(--vb-border);
+  border-radius: var(--vb-radius-lg);
+  background: var(--vb-bg-elevated);
+  box-shadow: var(--vb-shadow-lg);
+  animation: vb-pop-in var(--vb-duration-normal) var(--vb-ease);
+}
+
+.vertebr-command-input-wrap {
+  display: flex;
+  align-items: center;
+  gap: var(--vb-space-200);
+  padding: var(--vb-space-300) var(--vb-space-400);
+  border-bottom: 1px solid var(--vb-border-subdued);
+  color: var(--vb-text-muted);
+}
+
+.vertebr-command-input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  background: transparent;
+  color: var(--vb-text);
+  font: inherit;
+  font-size: var(--vb-font-size-200);
+  outline: none;
+}
+
+.vertebr-command-input-wrap kbd {
+  font-family: var(--vb-mono);
+  font-size: var(--vb-font-size-75);
+  color: var(--vb-text-muted);
+}
+
+.vertebr-command-results {
+  max-height: min(50vh, 24rem);
+  overflow: auto;
+  padding: var(--vb-space-200);
+}
+
+.vertebr-command-empty {
+  padding: var(--vb-space-400);
+  color: var(--vb-text-muted);
+  font-size: var(--vb-font-size-200);
+  text-align: center;
+}
+
+.vertebr-command-group + .vertebr-command-group {
+  margin-top: var(--vb-space-200);
+}
+
+.vertebr-command-group-label {
+  padding: var(--vb-space-100) var(--vb-space-200);
+  color: var(--vb-text-muted);
+  font-size: var(--vb-font-size-75);
+  font-weight: var(--vb-font-weight-medium);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.vertebr-command-item {
+  appearance: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--vb-space-300);
+  width: 100%;
+  padding: var(--vb-space-200) var(--vb-space-300);
+  border: none;
+  border-radius: var(--vb-radius-md);
+  background: transparent;
+  color: var(--vb-text);
+  font: inherit;
+  font-size: var(--vb-font-size-200);
+  text-align: left;
+  cursor: pointer;
+}
+
+.vertebr-command-item[data-active] {
+  background: var(--vb-bg-hover);
+}
+
+.vertebr-command-item-label {
+  font-weight: var(--vb-font-weight-medium);
+}
+
+.vertebr-command-item-hint {
+  color: var(--vb-text-muted);
+  font-size: var(--vb-font-size-100);
+  white-space: nowrap;
+}
+
 /* ── Save bar ────────────────────────────────────────── */
 
 .vertebr-savebar {
@@ -114,6 +509,7 @@
   border-top: 1px solid var(--vb-border);
   background: color-mix(in srgb, var(--vb-bg-elevated) 92%, transparent);
   backdrop-filter: blur(8px);
+  animation: vb-slide-up-bar var(--vb-duration-normal) var(--vb-ease);
 }
 
 .vertebr-savebar-message {
@@ -160,6 +556,7 @@
   background: var(--vb-bg-elevated);
   box-shadow: var(--vb-shadow-lg);
   font-size: var(--vb-font-size-200);
+  animation: vb-slide-up var(--vb-duration-normal) var(--vb-ease);
 }
 
 .vertebr-toast[data-tone="ok"] {
@@ -228,6 +625,12 @@
   background: var(--vb-danger-soft);
 }
 
+.vertebr-badge[data-tone="warn"] {
+  color: var(--vb-accent);
+  border-color: color-mix(in srgb, var(--vb-accent) 35%, transparent);
+  background: var(--vb-accent-soft);
+}
+
 .vertebr-banner {
   padding: var(--vb-space-300) var(--vb-space-400);
   border-radius: var(--vb-radius-md);

package/dist/styles/sidebar.css

@@ -16,6 +16,7 @@
   gap: 0;
   overflow: hidden;
   isolation: isolate;
+  transition: padding-inline var(--vb-duration-normal) var(--vb-ease);
 }
 
 .vertebr-sidebar[data-collapsed="true"] {
@@ -23,13 +24,32 @@
 }
 
 .vertebr-sidebar[data-collapsed="true"] .vertebr-nav-label-text {
-  display: none;
+  opacity: 0;
+  max-width: 0;
 }
 
-.vertebr-sidebar[data-collapsed="true"] .vertebr-nav > button,
-.vertebr-sidebar[data-collapsed="true"] .vertebr-nav-parent-label {
+.vertebr-sidebar[data-collapsed="true"] .vertebr-nav-label {
+  opacity: 0;
+  max-height: 0;
+  padding-block: 0;
+  margin: 0;
+  overflow: hidden;
+}
+
+.vertebr-nav-label-text {
+  overflow: hidden;
+  white-space: nowrap;
+  opacity: 1;
+  max-width: 12rem;
+  transition:
+    opacity var(--vb-duration-normal) var(--vb-ease),
+    max-width var(--vb-duration-normal) var(--vb-ease);
+}
+
+.vertebr-sidebar[data-collapsed="true"] .vertebr-nav-group > button {
   justify-content: center;
   padding-inline: var(--vb-space-200);
+  gap: 0;
 }
 
 .vertebr-nav-icon {
@@ -61,3 +81,43 @@
   flex-direction: column;
   gap: 1rem;
 }
+
+.vertebr-powered-by {
+  font-size: var(--vb-font-size-75);
+  color: var(--vb-text-subtle);
+  line-height: 1.35;
+}
+
+.vertebr-powered-by a {
+  color: inherit;
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+
+.vertebr-powered-by a:hover {
+  color: var(--vb-accent);
+}
+
+.vertebr-powered-by strong {
+  color: var(--vb-text-muted);
+  font-weight: var(--vb-font-weight-semibold);
+}
+
+.vertebr-powered-by[data-collapsed="true"] {
+  display: flex;
+  justify-content: center;
+}
+
+.vertebr-powered-by[data-collapsed="true"] a {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border: 1px solid var(--vb-border);
+  border-radius: var(--vb-radius-sm);
+  font-size: var(--vb-font-size-100);
+  font-weight: var(--vb-font-weight-semibold);
+  color: var(--vb-accent);
+  background: var(--vb-bg-elevated);
+}