@vertebr/react 0.7.0 → 0.8.1

package/dist/styles/shell.css

@@ -0,0 +1,324 @@
+/* ── Top bar ─────────────────────────────────────────── */
+
+.vertebr-topbar {
+  grid-column: 1 / -1;
+  grid-row: 1;
+  z-index: 40;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--vb-space-400);
+  height: var(--vb-topbar-height);
+  padding: 0 var(--vb-space-500);
+  border-bottom: 1px solid var(--vb-border-subdued);
+  background: var(--vb-topbar-bg);
+}
+
+.vertebr-topbar-start,
+.vertebr-topbar-end {
+  display: flex;
+  align-items: center;
+  gap: var(--vb-space-300);
+  min-width: 0;
+}
+
+/* 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-toggle {
+  appearance: none;
+  border: 1px solid var(--vb-border);
+  background: var(--vb-bg-elevated);
+  color: var(--vb-text);
+  border-radius: var(--vb-radius-sm);
+  width: 2rem;
+  height: 2rem;
+  cursor: pointer;
+}
+
+.vertebr-topbar-env {
+  display: flex;
+  align-items: center;
+  gap: var(--vb-space-200);
+}
+
+.vertebr-topbar-search {
+  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);
+  background: var(--vb-bg-muted);
+  color: var(--vb-text-subtle);
+  font-size: var(--vb-font-size-100);
+}
+
+.vertebr-topbar-search kbd {
+  margin-left: auto;
+  font-family: var(--vb-mono);
+  font-size: var(--vb-font-size-75);
+  opacity: 0.7;
+}
+
+.vertebr-topbar-token {
+  display: flex;
+  align-items: center;
+  gap: var(--vb-space-100);
+}
+
+.vertebr-topbar-user {
+  font-size: var(--vb-font-size-100);
+  color: var(--vb-text-muted);
+  max-width: 12rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (max-width: 900px) {
+  .vertebr-topbar-search {
+    display: none;
+  }
+}
+
+/* ── Save bar ────────────────────────────────────────── */
+
+.vertebr-savebar {
+  position: sticky;
+  bottom: 0;
+  z-index: 35;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--vb-space-400);
+  min-height: var(--vb-savebar-height);
+  padding: var(--vb-space-300) var(--vb-space-500);
+  padding-bottom: calc(var(--vb-space-300) + env(safe-area-inset-bottom, 0px));
+  border-top: 1px solid var(--vb-border);
+  background: color-mix(in srgb, var(--vb-bg-elevated) 92%, transparent);
+  backdrop-filter: blur(8px);
+}
+
+.vertebr-savebar-message {
+  font-size: var(--vb-font-size-200);
+  color: var(--vb-text-secondary);
+}
+
+.vertebr-savebar[data-tone="ok"] .vertebr-savebar-message {
+  color: var(--vb-ok);
+}
+
+.vertebr-savebar[data-tone="danger"] .vertebr-savebar-message {
+  color: var(--vb-danger-text);
+}
+
+.vertebr-savebar-actions {
+  display: flex;
+  gap: var(--vb-space-200);
+}
+
+/* ── Toasts ──────────────────────────────────────────── */
+
+.vertebr-toast-stack {
+  position: fixed;
+  right: var(--vb-space-500);
+  bottom: calc(var(--vb-space-500) + env(safe-area-inset-bottom, 0px));
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  gap: var(--vb-space-200);
+  pointer-events: none;
+}
+
+.vertebr-toast {
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  gap: var(--vb-space-300);
+  min-width: 16rem;
+  max-width: 24rem;
+  padding: var(--vb-space-300) var(--vb-space-400);
+  border: 1px solid var(--vb-border);
+  border-radius: var(--vb-radius-md);
+  background: var(--vb-bg-elevated);
+  box-shadow: var(--vb-shadow-lg);
+  font-size: var(--vb-font-size-200);
+}
+
+.vertebr-toast[data-tone="ok"] {
+  border-color: color-mix(in srgb, var(--vb-ok) 40%, var(--vb-border));
+}
+
+.vertebr-toast[data-tone="danger"] {
+  border-color: color-mix(in srgb, var(--vb-danger) 40%, var(--vb-border));
+}
+
+.vertebr-toast-dismiss {
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: var(--vb-text-muted);
+  font-size: 1.1rem;
+  cursor: pointer;
+  margin-left: auto;
+}
+
+/* ── UI primitives ───────────────────────────────────── */
+
+.vertebr-card {
+  border: 1px solid var(--vb-border-subdued);
+  border-radius: var(--vb-radius-lg);
+  background: var(--vb-bg-elevated);
+  box-shadow: var(--vb-shadow-sm);
+}
+
+.vertebr-card[data-subdued="true"] {
+  background: var(--vb-bg-subdued);
+  box-shadow: none;
+}
+
+.vertebr-card-head {
+  padding: var(--vb-space-400) var(--vb-space-500);
+  border-bottom: 1px solid var(--vb-border-subdued);
+  font-weight: var(--vb-font-weight-semibold);
+}
+
+.vertebr-card-body {
+  padding: var(--vb-space-500);
+}
+
+.vertebr-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.12rem 0.45rem;
+  border-radius: var(--vb-radius-full);
+  font-size: var(--vb-font-size-75);
+  font-weight: var(--vb-font-weight-medium);
+  border: 1px solid var(--vb-border);
+  color: var(--vb-text-secondary);
+  background: var(--vb-bg-muted);
+}
+
+.vertebr-badge[data-tone="ok"] {
+  color: var(--vb-ok);
+  border-color: color-mix(in srgb, var(--vb-ok) 35%, transparent);
+  background: var(--vb-ok-soft);
+}
+
+.vertebr-badge[data-tone="danger"] {
+  color: var(--vb-danger-text);
+  border-color: color-mix(in srgb, var(--vb-danger) 35%, transparent);
+  background: var(--vb-danger-soft);
+}
+
+.vertebr-banner {
+  padding: var(--vb-space-300) var(--vb-space-400);
+  border-radius: var(--vb-radius-md);
+  border: 1px solid var(--vb-border);
+  background: var(--vb-bg-muted);
+  font-size: var(--vb-font-size-200);
+}
+
+.vertebr-banner[data-tone="ok"] {
+  border-color: color-mix(in srgb, var(--vb-ok) 35%, transparent);
+  background: var(--vb-ok-soft);
+}
+
+.vertebr-banner[data-tone="danger"] {
+  border-color: color-mix(in srgb, var(--vb-danger) 35%, transparent);
+  background: var(--vb-danger-soft);
+}
+
+.vertebr-empty-state {
+  display: grid;
+  gap: var(--vb-space-200);
+  justify-items: start;
+  padding: var(--vb-space-800);
+  text-align: left;
+}
+
+.vertebr-empty-state h3 {
+  margin: 0;
+  font-size: var(--vb-font-size-400);
+}
+
+.vertebr-empty-state p {
+  margin: 0;
+  color: var(--vb-text-muted);
+  max-width: 28rem;
+}
+
+.vertebr-skeleton {
+  display: grid;
+  gap: var(--vb-space-200);
+}
+
+.vertebr-skeleton span {
+  display: block;
+  height: 0.85rem;
+  border-radius: var(--vb-radius-sm);
+  background: linear-gradient(
+    90deg,
+    var(--vb-bg-muted) 0%,
+    var(--vb-bg-hover) 50%,
+    var(--vb-bg-muted) 100%
+  );
+  background-size: 200% 100%;
+  animation: vb-skeleton 1.2s ease-in-out infinite;
+}
+
+@keyframes vb-skeleton {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: -100% 0;
+  }
+}
+
+/* ── Breadcrumbs ─────────────────────────────────────── */
+
+.vertebr-breadcrumbs {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.35rem;
+  margin: 0 0 var(--vb-space-200);
+  padding: 0;
+  list-style: none;
+  font-size: var(--vb-font-size-100);
+  color: var(--vb-text-muted);
+}
+
+.vertebr-breadcrumbs li {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.vertebr-breadcrumbs li:not(:last-child)::after {
+  content: "/";
+  opacity: 0.5;
+}
+
+.vertebr-breadcrumbs strong {
+  color: var(--vb-text);
+  font-weight: var(--vb-font-weight-medium);
+}

package/dist/styles/sidebar.css

@@ -1,15 +1,16 @@
 /* ── Sidebar ─────────────────────────────────────────── */
 
 .vertebr-sidebar {
+  grid-row: 2;
   position: sticky;
-  top: 0;
+  top: var(--vb-topbar-height);
   z-index: 30;
   align-self: start;
-  height: 100vh;
-  max-height: 100vh;
-  border-right: 1px solid var(--vb-border);
+  height: calc(100dvh - var(--vb-topbar-height));
+  max-height: calc(100dvh - var(--vb-topbar-height));
+  border-right: 1px solid var(--vb-border-subdued);
   background: var(--vb-sidebar-from);
-  padding: 1.35rem 0.9rem 1rem;
+  padding: var(--vb-space-400) var(--vb-space-300) var(--vb-space-400);
   display: flex;
   flex-direction: column;
   gap: 0;
@@ -17,6 +18,26 @@
   isolation: isolate;
 }
 
+.vertebr-sidebar[data-collapsed="true"] {
+  padding-inline: var(--vb-space-200);
+}
+
+.vertebr-sidebar[data-collapsed="true"] .vertebr-nav-label-text {
+  display: none;
+}
+
+.vertebr-sidebar[data-collapsed="true"] .vertebr-nav > button,
+.vertebr-sidebar[data-collapsed="true"] .vertebr-nav-parent-label {
+  justify-content: center;
+  padding-inline: var(--vb-space-200);
+}
+
+.vertebr-nav-icon {
+  flex: 0 0 auto;
+  width: 1.1rem;
+  height: 1.1rem;
+}
+
 .vertebr-sidebar-top {
   display: flex;
   flex-direction: column;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertebr/react",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "description": "Vertebr admin dashboard UI",
   "type": "module",
   "main": "./dist/index.js",