@vertebr/react 0.8.1 → 0.9.0

package/dist/styles/addon.css

@@ -0,0 +1,540 @@
+/* ── Add-ons (overview + editor + thumbnails) ────────── */
+
+.vertebr-addon-overview {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  padding: 1rem 1.25rem 1.35rem;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.vertebr-addon-overview-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  justify-content: space-between;
+  gap: 1rem 1.5rem;
+  padding: 0.95rem 1.1rem;
+  border: 1px solid var(--vb-border);
+  border-radius: 12px;
+  background:
+    linear-gradient(
+      135deg,
+      color-mix(in srgb, var(--vb-accent) 5%, var(--vb-surface-tint)),
+      var(--vb-bg-elevated)
+    );
+}
+
+.vertebr-addon-overview-intro {
+  flex: 1 1 16rem;
+  min-width: 0;
+}
+
+.vertebr-addon-overview-intro p {
+  margin: 0;
+  max-width: 36rem;
+  color: var(--vb-text-muted);
+  font-size: 0.88rem;
+  line-height: 1.55;
+}
+
+.vertebr-addon-overview-stats {
+  flex: 1 1 auto;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  justify-content: flex-end;
+  gap: 0.55rem;
+  min-width: min(100%, 22rem);
+}
+
+.vertebr-addon-stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.1rem;
+  min-width: 4.5rem;
+  padding: 0.55rem 0.75rem;
+  border: 1px solid var(--vb-border);
+  border-radius: 10px;
+  background: var(--vb-bg-elevated);
+}
+
+.vertebr-addon-stat strong {
+  font-size: 1.05rem;
+  font-weight: 640;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+}
+
+.vertebr-addon-stat span {
+  font-size: 0.64rem;
+  font-weight: 560;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--vb-text-subtle);
+}
+
+.vertebr-addon-stat[data-category="product"] strong {
+  color: #3b82f6;
+}
+
+.vertebr-addon-stat[data-category="engagement"] strong {
+  color: #8b5cf6;
+}
+
+.vertebr-addon-stat[data-category="sales"] strong {
+  color: #10b981;
+}
+
+.vertebr-addon-overview-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  min-width: 0;
+}
+
+.vertebr-addon-section-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 0.65rem 1rem;
+  padding-bottom: 0.15rem;
+}
+
+.vertebr-addon-section-title h3 {
+  margin: 0;
+  font-size: 0.95rem;
+  font-weight: 620;
+  letter-spacing: -0.01em;
+}
+
+.vertebr-addon-overview-section[data-category="product"] .vertebr-addon-section-title h3 {
+  color: color-mix(in srgb, #3b82f6 72%, var(--vb-text));
+}
+
+.vertebr-addon-overview-section[data-category="engagement"] .vertebr-addon-section-title h3 {
+  color: color-mix(in srgb, #8b5cf6 72%, var(--vb-text));
+}
+
+.vertebr-addon-overview-section[data-category="sales"] .vertebr-addon-section-title h3 {
+  color: color-mix(in srgb, #10b981 72%, var(--vb-text));
+}
+
+.vertebr-addon-section-title p {
+  margin: 0.2rem 0 0;
+  color: var(--vb-text-muted);
+  font-size: 0.8rem;
+  line-height: 1.45;
+}
+
+.vertebr-addon-section-count {
+  font-family: var(--vb-mono);
+  font-size: 0.68rem;
+  color: var(--vb-text-subtle);
+  border: 1px solid var(--vb-border);
+  border-radius: 999px;
+  padding: 0.18rem 0.55rem;
+  white-space: nowrap;
+}
+
+.vertebr-addon-scroll-wrap {
+  position: relative;
+  min-width: 0;
+}
+
+.vertebr-addon-scroll-wrap::before,
+.vertebr-addon-scroll-wrap::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0.65rem;
+  width: 2.25rem;
+  pointer-events: none;
+  z-index: 2;
+  opacity: 0;
+  transition: opacity 160ms ease;
+}
+
+.vertebr-addon-scroll-wrap.can-scroll-left::before,
+.vertebr-addon-scroll-wrap.can-scroll-right::after {
+  opacity: 1;
+}
+
+.vertebr-addon-scroll-wrap::before {
+  left: 0;
+  background: linear-gradient(
+    to right,
+    var(--vb-bg-elevated) 15%,
+    transparent
+  );
+}
+
+.vertebr-addon-scroll-wrap::after {
+  right: 0;
+  background: linear-gradient(
+    to left,
+    var(--vb-bg-elevated) 15%,
+    transparent
+  );
+}
+
+.vertebr-addon-scroll {
+  display: flex;
+  gap: 0.85rem;
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x proximity;
+  scroll-padding-inline: 0.25rem;
+  padding: 0.15rem 0.25rem 0.65rem;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--vb-text) 18%, transparent)
+    transparent;
+}
+
+.vertebr-addon-scroll:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--vb-accent) 55%, transparent);
+  outline-offset: 2px;
+  border-radius: 8px;
+}
+
+.vertebr-addon-scroll::-webkit-scrollbar {
+  height: 6px;
+}
+
+.vertebr-addon-scroll::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--vb-text) 16%, transparent);
+}
+
+.vertebr-addon-card {
+  flex: 0 0 17.5rem;
+  width: 17.5rem;
+  min-height: 21.5rem;
+  display: flex;
+  flex-direction: column;
+  scroll-snap-align: start;
+  overflow: hidden;
+  border: 1px solid var(--vb-border);
+  border-radius: 12px;
+  background: var(--vb-bg-elevated);
+  box-shadow: var(--vb-shadow-sm, 0 1px 2px rgb(0 0 0 / 0.04));
+  transition:
+    border-color 160ms ease,
+    box-shadow 160ms ease,
+    transform 160ms ease;
+}
+
+.vertebr-addon-card:hover {
+  border-color: color-mix(in srgb, var(--vb-accent) 35%, var(--vb-border));
+  box-shadow: var(--vb-shadow);
+  transform: translateY(-1px);
+}
+
+.vertebr-addon-card-body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 0.55rem;
+  padding: 0.85rem 0.95rem 0.95rem;
+}
+
+.vertebr-addon-card-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.vertebr-addon-card-head h4 {
+  margin: 0;
+  font-size: 0.95rem;
+  font-weight: 620;
+  line-height: 1.25;
+}
+
+.vertebr-addon-card-body p {
+  margin: 0;
+  flex: 1 1 auto;
+  color: var(--vb-text-muted);
+  font-size: 0.82rem;
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.vertebr-addon-card-foot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.65rem;
+  margin-top: auto;
+  padding-top: 0.35rem;
+}
+
+.vertebr-addon-route {
+  font-family: var(--vb-mono);
+  font-size: 0.68rem;
+  color: var(--vb-text-subtle);
+}
+
+.vertebr-addon-thumb {
+  position: relative;
+  aspect-ratio: 16 / 10;
+  overflow: hidden;
+  border-bottom: 1px solid var(--vb-border);
+  background:
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--vb-surface-tint) 80%, transparent),
+      var(--vb-bg)
+    );
+}
+
+.vertebr-addon-thumb-scale {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  transform-origin: top left;
+}
+
+.vertebr-addon-thumb iframe {
+  display: block;
+  width: 200%;
+  height: 200%;
+  border: 0;
+  pointer-events: none;
+  transform: scale(0.5);
+  transform-origin: top left;
+  background: #fff;
+}
+
+.vertebr-addon-thumb-loading,
+.vertebr-addon-thumb-empty,
+.vertebr-addon-thumb-fallback {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  padding: 1rem;
+  text-align: center;
+  color: var(--vb-text-muted);
+  font-size: 0.78rem;
+  background: var(--vb-surface-tint);
+}
+
+.vertebr-addon-thumb-loading {
+  background: color-mix(in srgb, var(--vb-bg) 70%, transparent);
+}
+
+/* ── Add-on editor header ────────────────────────────── */
+
+.vertebr-addon-editor {
+  flex: 1 1 0%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 0.85rem 1rem 1rem;
+}
+
+.vertebr-addon-editor-head {
+  flex: 0 0 auto;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem 1.25rem;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--vb-border);
+  border-radius: 12px;
+  background: var(--vb-surface-tint);
+  margin-bottom: 0.85rem;
+}
+
+.vertebr-addon-editor-head[data-category="product"] {
+  border-left: 3px solid #3b82f6;
+}
+
+.vertebr-addon-editor-head[data-category="engagement"] {
+  border-left: 3px solid #8b5cf6;
+}
+
+.vertebr-addon-editor-head[data-category="sales"] {
+  border-left: 3px solid #10b981;
+}
+
+.vertebr-addon-editor-head-start,
+.vertebr-addon-editor-head-end {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.55rem;
+}
+
+.vertebr-addon-editor-head-end {
+  margin-left: auto;
+  justify-content: flex-end;
+}
+
+.vertebr-addon-category {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  padding: 0.28rem 0.72rem;
+  font-size: 0.68rem;
+  font-weight: 620;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.vertebr-addon-category[data-category="product"] {
+  color: #bfdbfe;
+  background: color-mix(in srgb, #3b82f6 22%, transparent);
+}
+
+.vertebr-addon-category[data-category="engagement"] {
+  color: #ddd6fe;
+  background: color-mix(in srgb, #8b5cf6 22%, transparent);
+}
+
+.vertebr-addon-category[data-category="sales"] {
+  color: #a7f3d0;
+  background: color-mix(in srgb, #10b981 22%, transparent);
+}
+
+.vertebr-addon-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  border-radius: 999px;
+  padding: 0.28rem 0.72rem;
+  font-size: 0.72rem;
+  font-weight: 520;
+  color: var(--vb-text-muted);
+  background: color-mix(in srgb, var(--vb-bg) 55%, transparent);
+  border: 1px solid var(--vb-border);
+}
+
+.vertebr-addon-status-dot {
+  width: 0.42rem;
+  height: 0.42rem;
+  border-radius: 999px;
+  background: var(--vb-text-subtle);
+}
+
+.vertebr-addon-status[data-enabled="true"] {
+  color: #6ee7b7;
+  border-color: color-mix(in srgb, #10b981 35%, var(--vb-border));
+  background: color-mix(in srgb, #10b981 10%, transparent);
+}
+
+.vertebr-addon-status[data-enabled="true"] .vertebr-addon-status-dot {
+  background: #34d399;
+  box-shadow: 0 0 0 3px color-mix(in srgb, #10b981 22%, transparent);
+}
+
+.vertebr-addon-status[data-enabled="false"] .vertebr-addon-status-dot {
+  background: var(--vb-text-subtle);
+}
+
+.vertebr-addon-preview-label {
+  font-size: 0.66rem;
+  font-weight: 560;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--vb-text-subtle);
+}
+
+.vertebr-addon-preview-path {
+  font-family: var(--vb-mono);
+  font-size: 0.76rem;
+  color: var(--vb-text);
+  border: 1px solid var(--vb-border);
+  border-radius: 8px;
+  padding: 0.32rem 0.62rem;
+  background: var(--vb-bg-elevated);
+}
+
+.vertebr-addon-page-editor {
+  flex: 1 1 0%;
+  min-height: 0;
+}
+
+.vertebr-addon-editor-form-only {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.65fr);
+  gap: 1rem;
+  min-height: 0;
+}
+
+.vertebr-addon-preview-missing {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.45rem;
+  padding: 1.25rem;
+  border: 1px dashed var(--vb-border);
+  border-radius: 12px;
+  background: var(--vb-surface-tint);
+  color: var(--vb-text-muted);
+  font-size: 0.84rem;
+  line-height: 1.5;
+}
+
+.vertebr-addon-preview-missing strong {
+  color: var(--vb-text);
+  font-weight: 620;
+}
+
+.vertebr-addon-preview-missing code {
+  font-family: var(--vb-mono);
+  font-size: 0.78rem;
+}
+
+.vertebr-page-preview[data-preview-kind="addon"] .vertebr-page-preview-stage {
+  background:
+    radial-gradient(
+      circle at 50% 0%,
+      color-mix(in srgb, var(--vb-accent) 6%, transparent),
+      transparent 58%
+    ),
+    var(--vb-surface-tint);
+}
+
+@media (max-width: 1100px) {
+  .vertebr-addon-editor-form-only {
+    grid-template-columns: 1fr;
+  }
+
+  .vertebr-addon-editor-head-end {
+    width: 100%;
+    margin-left: 0;
+    justify-content: flex-start;
+  }
+}
+
+@media (max-width: 720px) {
+  .vertebr-addon-overview-toolbar {
+    padding: 0.85rem;
+  }
+
+  .vertebr-addon-overview-stats {
+    justify-content: flex-start;
+  }
+
+  .vertebr-addon-card {
+    flex-basis: 15.5rem;
+    width: 15.5rem;
+  }
+}

package/dist/styles/base.css

@@ -36,6 +36,7 @@ html:has(.vertebr-error) body {
   -webkit-font-smoothing: antialiased;
   isolation: isolate;
   overflow: clip;
+  transition: grid-template-columns var(--vb-duration-normal) var(--vb-ease);
 }
 
 .vertebr-root[data-sidebar-collapsed="true"] {

package/dist/styles/font-library.css

@@ -236,6 +236,7 @@
   place-items: center;
   padding: 1.5rem;
   background: rgb(0 0 0 / 45%);
+  animation: vb-fade-in var(--vb-duration-normal) var(--vb-ease);
 }
 
 .vertebr-font-picker-modal,
@@ -251,6 +252,7 @@
   background: var(--vb-bg);
   box-shadow: 0 24px 64px rgb(0 0 0 / 18%);
   overflow: hidden;
+  animation: vb-pop-in var(--vb-duration-normal) var(--vb-ease);
 }
 
 .vertebr-font-preview-modal {

package/dist/styles/index.css

@@ -20,5 +20,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 {

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;
+  }
+}