@vertebr/react 0.8.0 → 0.9.0

package/dist/styles/nav.css

@@ -20,6 +20,13 @@
   padding: 0.2rem 0.65rem 0.4rem;
   font-family: var(--vb-mono);
   font-weight: 500;
+  overflow: hidden;
+  max-height: 2rem;
+  opacity: 1;
+  transition:
+    opacity var(--vb-duration-normal) var(--vb-ease),
+    max-height var(--vb-duration-normal) var(--vb-ease),
+    padding var(--vb-duration-normal) var(--vb-ease);
 }
 
 .vertebr-nav button {
@@ -78,6 +85,30 @@
   letter-spacing: 0;
 }
 
+.vertebr-nav-chevron {
+  display: inline-block;
+  transition: transform var(--vb-duration-fast) var(--vb-ease);
+}
+
+.vertebr-nav-item[data-open="true"] .vertebr-nav-chevron {
+  transform: rotate(90deg);
+}
+
+.vertebr-nav-sub-wrap {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--vb-duration-normal) var(--vb-ease);
+}
+
+.vertebr-nav-sub-wrap[data-open="true"] {
+  grid-template-rows: 1fr;
+}
+
+.vertebr-nav-sub-inner {
+  overflow: hidden;
+  min-height: 0;
+}
+
 .vertebr-nav-parent-toggle:hover {
   background: var(--vb-bg-muted) !important;
   color: var(--vb-text) !important;
@@ -168,14 +199,16 @@
 
 .vertebr-sidebar::-webkit-scrollbar,
 .vertebr-main::-webkit-scrollbar,
-.vertebr-table-wrap::-webkit-scrollbar {
+.vertebr-table-wrap::-webkit-scrollbar,
+.vertebr-sync-scroll::-webkit-scrollbar {
   width: 10px;
   height: 10px;
 }
 
 .vertebr-sidebar::-webkit-scrollbar-thumb,
 .vertebr-main::-webkit-scrollbar-thumb,
-.vertebr-table-wrap::-webkit-scrollbar-thumb {
+.vertebr-table-wrap::-webkit-scrollbar-thumb,
+.vertebr-sync-scroll::-webkit-scrollbar-thumb {
   background: var(--vb-bg-muted);
   border: 2px solid transparent;
   background-clip: content-box;
@@ -184,13 +217,15 @@
 
 .vertebr-sidebar::-webkit-scrollbar-thumb:hover,
 .vertebr-main::-webkit-scrollbar-thumb:hover,
-.vertebr-table-wrap::-webkit-scrollbar-thumb:hover {
+.vertebr-table-wrap::-webkit-scrollbar-thumb:hover,
+.vertebr-sync-scroll::-webkit-scrollbar-thumb:hover {
   background: var(--vb-border-strong);
   background-clip: content-box;
 }
 
 .vertebr-sidebar::-webkit-scrollbar-track,
 .vertebr-main::-webkit-scrollbar-track,
-.vertebr-table-wrap::-webkit-scrollbar-track {
+.vertebr-table-wrap::-webkit-scrollbar-track,
+.vertebr-sync-scroll::-webkit-scrollbar-track {
   background: transparent;
 }

package/dist/styles/select.css

@@ -38,6 +38,12 @@
 .vertebr-select-trigger[data-tone="danger"] {
   border-color: color-mix(in srgb, var(--vb-danger) 45%, transparent);
   color: var(--vb-danger-text);
+  background: var(--vb-danger-soft);
+}
+
+.vertebr-select-trigger[data-tone="danger"]:hover {
+  border-color: color-mix(in srgb, var(--vb-danger) 60%, transparent);
+  background: color-mix(in srgb, var(--vb-danger-soft) 80%, var(--vb-bg-muted));
 }
 
 .vertebr-select-value {

package/dist/styles/shell.css

@@ -4,9 +4,9 @@
   grid-column: 1 / -1;
   grid-row: 1;
   z-index: 40;
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(12rem, 22rem) minmax(0, 1fr);
   align-items: center;
-  justify-content: space-between;
   gap: var(--vb-space-400);
   height: var(--vb-topbar-height);
   padding: 0 var(--vb-space-500);
@@ -22,12 +22,68 @@
   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;
+}
+
+/* Theme toggle lives in the top bar — hide sidebar-style labels. */
+.vertebr-topbar .vertebr-nav-label {
+  display: none;
+}
+
+.vertebr-topbar .vertebr-theme {
+  padding: 0;
+  gap: 0;
+}
+
 .vertebr-topbar-brand {
   font-size: var(--vb-font-size-200);
   font-weight: var(--vb-font-weight-semibold);
   white-space: nowrap;
 }
 
+.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.35rem;
+  min-width: 0;
+  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);
+}
+
+.vertebr-topbar-host-logo {
+  width: 1rem;
+  height: 1rem;
+  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;
   border: 1px solid var(--vb-border);
@@ -46,18 +102,28 @@
 }
 
 .vertebr-topbar-search {
+  appearance: none;
   display: flex;
   align-items: center;
   gap: var(--vb-space-200);
-  min-width: 12rem;
-  max-width: 22rem;
-  flex: 1;
+  width: 100%;
   padding: 0.45rem 0.75rem;
   border: 1px solid var(--vb-border);
   border-radius: var(--vb-radius-full);
   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;
+}
+
+.vertebr-topbar-search:hover {
+  border-color: var(--vb-border-strong, var(--vb-border));
+  background: var(--vb-bg-hover);
+  color: var(--vb-text-secondary);
 }
 
 .vertebr-topbar-search kbd {
@@ -67,6 +133,13 @@
   opacity: 0.7;
 }
 
+.vertebr-topbar-sync {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  white-space: nowrap;
+}
+
 .vertebr-topbar-token {
   display: flex;
   align-items: center;
@@ -83,9 +156,125 @@
 }
 
 @media (max-width: 900px) {
-  .vertebr-topbar-search {
+  .vertebr-topbar {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  .vertebr-topbar-center {
     display: none;
   }
+
+  .vertebr-topbar-sync span {
+    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 ────────────────────────────────────────── */
@@ -104,6 +293,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 {
@@ -150,6 +340,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"] {
@@ -218,6 +409,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);
+}