@vertebr/react 0.8.1 → 0.10.0

package/dist/styles/form.css

@@ -1002,3 +1002,146 @@
 .vertebr-modal-sm {
   width: min(100%, 520px);
 }
+
+/* ── Reference typeahead ─────────────────────────────── */
+
+.vertebr-reference {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.vertebr-reference-input {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.vertebr-reference-clear {
+  flex: 0 0 auto;
+}
+
+.vertebr-reference-menu {
+  position: absolute;
+  z-index: 20;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  margin: 0;
+  padding: 0.35rem;
+  list-style: none;
+  max-height: 14rem;
+  overflow: auto;
+  border: 1px solid var(--vb-border);
+  border-radius: 8px;
+  background: var(--vb-bg-elevated);
+  box-shadow: 0 8px 24px color-mix(in srgb, var(--vb-text) 12%, transparent);
+}
+
+.vertebr-reference-option {
+  appearance: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  width: 100%;
+  margin: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  padding: 0.45rem 0.55rem;
+  cursor: pointer;
+}
+
+.vertebr-reference-option:hover,
+.vertebr-reference-option[aria-selected="true"] {
+  background: var(--vb-surface-tint);
+}
+
+.vertebr-reference-option code {
+  font-family: var(--vb-mono);
+  font-size: 0.72rem;
+  color: var(--vb-text-subtle);
+}
+
+.vertebr-reference-empty {
+  padding: 0.55rem 0.65rem;
+  color: var(--vb-text-subtle);
+  font-size: 0.85rem;
+}
+
+/* ── Revision history ────────────────────────────────── */
+
+.vertebr-revisions {
+  margin-top: 1.25rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--vb-border);
+}
+
+.vertebr-revisions .vertebr-panel-head {
+  margin-bottom: 0.65rem;
+}
+
+.vertebr-revisions-empty {
+  margin: 0;
+  color: var(--vb-text-subtle);
+  font-size: 0.88rem;
+}
+
+.vertebr-revisions-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+}
+
+.vertebr-revisions-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.55rem 0.65rem;
+  border: 1px solid var(--vb-border);
+  border-radius: 8px;
+  background: var(--vb-bg-elevated);
+}
+
+.vertebr-revisions-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.4rem 0.65rem;
+  min-width: 0;
+}
+
+.vertebr-revisions-meta [data-status] {
+  font-family: var(--vb-mono);
+  font-size: 0.68rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--vb-text-subtle);
+}
+
+.vertebr-revisions-meta [data-status="published"] {
+  color: var(--vb-ok, #2f6f4e);
+}
+
+.vertebr-revisions-meta [data-status="draft"] {
+  color: var(--vb-warn, #9a6b2f);
+}
+
+.vertebr-revisions-when {
+  font-size: 0.78rem;
+  color: var(--vb-text-subtle);
+}
+
+.vertebr-revisions-actions {
+  display: flex;
+  gap: 0.35rem;
+  flex: 0 0 auto;
+}

package/dist/styles/index.css

@@ -9,6 +9,7 @@
 @import "./main.css";
 @import "./panel.css";
 @import "./metrics.css";
+@import "./audit.css";
 @import "./table.css";
 @import "./columns.css";
 @import "./cells.css";
@@ -20,5 +21,7 @@
 @import "./gallery.css";
 @import "./font-library.css";
 @import "./page-preview.css";
+@import "./addon.css";
 @import "./shell.css";
+@import "./sync.css";
 @import "./states.css";

package/dist/styles/main.css

@@ -32,13 +32,6 @@
   overflow: hidden;
 }
 
-.vertebr-heading-row {
-  display: flex;
-  align-items: center;
-  gap: 0.7rem;
-  flex-wrap: wrap;
-}
-
 .vertebr-header h1 {
   margin: 0;
   font-size: 1.55rem;
@@ -52,34 +45,3 @@
   color: var(--vb-text-muted);
   font-size: 0.9rem;
 }
-
-.vertebr-env-badge {
-  font-family: var(--vb-mono);
-  font-size: 0.68rem;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  border: 1px solid var(--vb-border);
-  border-radius: 999px;
-  padding: 0.22rem 0.6rem;
-  color: var(--vb-text-muted);
-  background: var(--vb-surface-tint);
-}
-
-.vertebr-env-badge[data-tone="danger"] {
-  color: var(--vb-danger-text);
-  border-color: color-mix(in srgb, var(--vb-danger) 45%, transparent);
-  background: var(--vb-danger-soft);
-}
-
-.vertebr-env-badge[data-tone="warn"],
-.vertebr-env-badge[data-tone="warning"] {
-  color: var(--vb-warn-text);
-  border-color: color-mix(in srgb, var(--vb-accent) 45%, transparent);
-  background: var(--vb-accent-soft);
-}
-
-.vertebr-env-badge[data-tone="neutral"] {
-  color: var(--vb-ok);
-  border-color: color-mix(in srgb, var(--vb-ok) 40%, transparent);
-  background: var(--vb-ok-soft);
-}

package/dist/styles/modal.css

@@ -9,6 +9,7 @@
   padding: 1.25rem;
   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-modal {
@@ -23,6 +24,7 @@
   box-shadow: var(--vb-shadow);
   color: var(--vb-text);
   font-family: var(--vb-font);
+  animation: vb-pop-in var(--vb-duration-normal) var(--vb-ease);
 }
 
 .vertebr-modal-form {
@@ -241,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/motion.css

@@ -0,0 +1,55 @@
+/* ── Motion ──────────────────────────────────────────── */
+
+@keyframes vb-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes vb-pop-in {
+  from {
+    opacity: 0;
+    transform: translateY(-6px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes vb-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes vb-slide-up-bar {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vertebr-root,
+  .vertebr-root *,
+  .vertebr-login,
+  .vertebr-login * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

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 {