@vertebr/react 0.8.1 → 0.10.0

package/dist/styles/sync.css

@@ -0,0 +1,540 @@
+/* ── Environment sync ───────────────────────────────────── */
+
+.vertebr-sync-page {
+  flex: 1 1 auto;
+  min-height: 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.vertebr-sync-scroll {
+  flex: 1 1 auto;
+  min-height: 0;
+  min-width: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--vb-space-400);
+  padding: 1.15rem 1.35rem 1.35rem;
+  scrollbar-width: thin;
+}
+
+.vertebr-sync-scroll .vertebr-card {
+  flex: 0 0 auto;
+  min-width: 0;
+}
+
+.vertebr-sync-direction {
+  display: flex;
+  flex-direction: column;
+  gap: var(--vb-space-400);
+}
+
+.vertebr-sync-direction-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  align-items: end;
+  gap: var(--vb-space-400);
+}
+
+.vertebr-sync-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--vb-space-200);
+  min-width: 0;
+}
+
+.vertebr-sync-field-label {
+  font-size: var(--vb-font-size-75);
+  font-family: var(--vb-mono);
+  font-weight: 500;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--vb-text-subtle);
+}
+
+.vertebr-sync-connector {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  min-height: 2.35rem;
+  padding-bottom: 0.1rem;
+}
+
+.vertebr-sync-connector-arrow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--vb-radius-full);
+  border: 1px solid color-mix(in srgb, var(--vb-accent) 35%, var(--vb-border));
+  background: var(--vb-accent-soft);
+  color: var(--vb-accent);
+  font-size: 1rem;
+  line-height: 1;
+  font-weight: var(--vb-font-weight-semibold);
+}
+
+.vertebr-sync-direction-hint {
+  margin: 0;
+  padding: var(--vb-space-300) var(--vb-space-400);
+  border-radius: var(--vb-radius-md);
+  border: 1px dashed var(--vb-border);
+  background: var(--vb-bg-subdued);
+  color: var(--vb-text-muted);
+  font-size: var(--vb-font-size-100);
+}
+
+.vertebr-sync-preview {
+  padding: var(--vb-space-400);
+  border-radius: var(--vb-radius-md);
+  border: 1px solid var(--vb-border-subdued);
+  background:
+    linear-gradient(180deg, var(--vb-surface-tint) 0%, transparent 70%),
+    var(--vb-bg-muted);
+  min-width: 0;
+  overflow: hidden;
+}
+
+.vertebr-sync-preview-flow {
+  display: flex;
+  align-items: stretch;
+  gap: var(--vb-space-400);
+  min-width: 0;
+}
+
+.vertebr-sync-preview-col {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.4rem;
+  min-width: 0;
+}
+
+.vertebr-sync-preview-col-from {
+  flex: 0 0 auto;
+  justify-content: flex-end;
+}
+
+.vertebr-sync-preview-col-routes {
+  flex: 1 1 auto;
+  gap: var(--vb-space-200);
+}
+
+.vertebr-sync-preview-route {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--vb-space-300);
+  min-width: 0;
+}
+
+.vertebr-sync-preview-flow[data-dest-count="1"] {
+  align-items: flex-end;
+}
+
+.vertebr-sync-preview-flow[data-dest-count="1"] .vertebr-sync-preview-col-from,
+.vertebr-sync-preview-flow[data-dest-count="1"] .vertebr-sync-preview-col-routes {
+  flex: 0 1 auto;
+}
+
+.vertebr-sync-preview-flow:not([data-dest-count="1"]) {
+  align-items: center;
+}
+
+.vertebr-sync-preview-flow:not([data-dest-count="1"]) .vertebr-sync-preview-col-from {
+  justify-content: center;
+}
+
+.vertebr-sync-preview-arrow {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 2rem;
+  margin-bottom: 0.05rem;
+  color: var(--vb-accent);
+  font-size: 1.1rem;
+  font-weight: var(--vb-font-weight-semibold);
+  line-height: 1;
+}
+
+.vertebr-sync-env-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  padding: 0.4rem 0.75rem;
+  border-radius: var(--vb-radius-full);
+  border: 1px solid var(--vb-border);
+  background: var(--vb-bg-elevated);
+  font-size: var(--vb-font-size-100);
+  font-weight: var(--vb-font-weight-medium);
+  box-shadow: var(--vb-shadow-sm);
+}
+
+.vertebr-sync-env-badge[data-tone="danger"] {
+  border-color: color-mix(in srgb, var(--vb-danger) 40%, var(--vb-border));
+  color: var(--vb-danger-text);
+}
+
+.vertebr-sync-preview-caption {
+  display: block;
+  min-height: 0.95rem;
+  font-size: var(--vb-font-size-75);
+  font-family: var(--vb-mono);
+  font-weight: 500;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--vb-text-subtle);
+  line-height: 1;
+}
+
+.vertebr-sync-targets-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--vb-space-400);
+  margin-bottom: var(--vb-space-500);
+}
+
+.vertebr-sync-targets-copy {
+  margin: 0;
+  max-width: 34rem;
+  color: var(--vb-text-muted);
+  font-size: var(--vb-font-size-100);
+  line-height: 1.5;
+}
+
+.vertebr-sync-refresh {
+  flex: 0 0 auto;
+}
+
+.vertebr-sync-target-group + .vertebr-sync-target-group {
+  margin-top: var(--vb-space-500);
+  padding-top: var(--vb-space-500);
+  border-top: 1px solid var(--vb-border-subdued);
+}
+
+.vertebr-sync-target-group-label {
+  margin-bottom: var(--vb-space-300);
+  font-size: var(--vb-font-size-75);
+  font-family: var(--vb-mono);
+  font-weight: 500;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--vb-text-subtle);
+}
+
+.vertebr-sync-target-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--vb-space-200);
+}
+
+.vertebr-sync-target-row {
+  position: relative;
+  appearance: none;
+  width: 100%;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.1fr);
+  align-items: center;
+  gap: var(--vb-space-400);
+  padding: var(--vb-space-400);
+  border: 1px solid var(--vb-border-subdued);
+  border-radius: var(--vb-radius-md);
+  background:
+    linear-gradient(180deg, var(--vb-surface-tint) 0%, transparent 55%),
+    var(--vb-bg-elevated);
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  min-width: 0;
+  overflow: hidden;
+  transition:
+    border-color 140ms ease,
+    box-shadow 140ms ease,
+    background 140ms ease;
+}
+
+.vertebr-sync-target-row:hover {
+  border-color: var(--vb-border-strong);
+  background: var(--vb-bg-muted);
+}
+
+.vertebr-sync-target-row[data-selected="true"] {
+  border-color: color-mix(in srgb, var(--vb-accent) 45%, var(--vb-border));
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--vb-accent) 18%, transparent);
+}
+
+.vertebr-sync-target-row[data-selected="true"]::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 3px;
+  border-radius: var(--vb-radius-md) 0 0 var(--vb-radius-md);
+  background: var(--vb-accent);
+}
+
+.vertebr-sync-target-list li {
+  list-style: none;
+}
+
+.vertebr-sync-target-check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.15rem;
+  height: 1.15rem;
+  border-radius: var(--vb-radius-xs);
+  border: 1px solid var(--vb-border-strong);
+  background: var(--vb-bg-elevated);
+  color: var(--vb-accent-contrast);
+  font-size: 0.72rem;
+  font-weight: var(--vb-font-weight-semibold);
+  flex: 0 0 auto;
+}
+
+.vertebr-sync-target-row[data-selected="true"] .vertebr-sync-target-check {
+  border-color: var(--vb-accent-dim);
+  background: var(--vb-accent);
+  color: var(--vb-accent-contrast);
+}
+
+.vertebr-sync-target-main {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  min-width: 0;
+}
+
+.vertebr-sync-target-title {
+  font-size: var(--vb-font-size-200);
+  font-weight: var(--vb-font-weight-medium);
+  color: var(--vb-text);
+}
+
+.vertebr-sync-target-desc {
+  font-size: var(--vb-font-size-100);
+  color: var(--vb-text-muted);
+  line-height: 1.45;
+}
+
+.vertebr-sync-target-badges {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.25rem;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.vertebr-sync-target-dest {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.15rem;
+  max-width: 100%;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.vertebr-sync-target-summary {
+  font-size: var(--vb-font-size-75);
+  color: var(--vb-text-subtle);
+  text-align: right;
+  line-height: 1.35;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vertebr-sync-excluded-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: var(--vb-space-300);
+}
+
+.vertebr-sync-excluded-list li {
+  display: grid;
+  gap: 0.15rem;
+  padding-bottom: var(--vb-space-300);
+  border-bottom: 1px solid var(--vb-border-subdued);
+}
+
+.vertebr-sync-excluded-list li:last-child {
+  padding-bottom: 0;
+  border-bottom: 0;
+}
+
+.vertebr-sync-excluded-name {
+  font-size: var(--vb-font-size-100);
+  font-weight: var(--vb-font-weight-medium);
+}
+
+.vertebr-sync-excluded-reason {
+  font-size: var(--vb-font-size-100);
+  color: var(--vb-text-muted);
+  line-height: 1.45;
+}
+
+.vertebr-sync-footer {
+  flex: 0 0 auto;
+  margin-top: 0;
+  border-radius: 0;
+  border-top: 1px solid var(--vb-border);
+  box-shadow: none;
+  background: color-mix(in srgb, var(--vb-bg-elevated) 94%, transparent);
+}
+
+.vertebr-sync-run-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+.vertebr-sync-empty code {
+  font-family: var(--vb-mono);
+  font-size: 0.92em;
+}
+
+.vertebr-topbar-sync {
+  white-space: nowrap;
+}
+
+/* Env multi-select (shared with direction card) */
+
+.vertebr-env-multi {
+  position: relative;
+}
+
+.vertebr-env-multi-trigger {
+  width: 100%;
+  min-height: 2.35rem;
+}
+
+.vertebr-env-multi-value {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.vertebr-env-multi-placeholder {
+  color: var(--vb-text-subtle);
+}
+
+.vertebr-env-multi-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.15rem 0.5rem;
+  border-radius: var(--vb-radius-full);
+  border: 1px solid var(--vb-border-subdued);
+  background: var(--vb-bg-muted);
+  font-size: var(--vb-font-size-75);
+  font-weight: var(--vb-font-weight-medium);
+}
+
+.vertebr-env-multi-chip[data-tone="danger"] {
+  border-color: color-mix(in srgb, var(--vb-danger) 35%, transparent);
+  color: var(--vb-danger-text);
+}
+
+.vertebr-env-multi-menu {
+  position: absolute;
+  top: calc(100% + 0.35rem);
+  left: 0;
+  right: 0;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  padding: 0.35rem;
+  border: 1px solid var(--vb-border);
+  border-radius: var(--vb-radius-sm);
+  background: var(--vb-bg-elevated);
+  box-shadow: var(--vb-shadow-md);
+}
+
+.vertebr-env-multi-option {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.45rem 0.55rem;
+  border-radius: var(--vb-radius-sm);
+  cursor: pointer;
+  font-size: var(--vb-font-size-100);
+}
+
+.vertebr-env-multi-option:hover {
+  background: var(--vb-bg-hover);
+}
+
+.vertebr-env-multi-option input {
+  accent-color: var(--vb-accent);
+}
+
+@media (max-width: 860px) {
+  .vertebr-sync-direction-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .vertebr-sync-connector {
+    flex-direction: row;
+    min-height: 0;
+    padding: 0;
+  }
+
+  .vertebr-sync-target-row {
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto auto;
+  }
+
+  .vertebr-sync-target-badges {
+    grid-column: 1 / -1;
+    align-items: flex-start;
+  }
+
+  .vertebr-sync-target-dest {
+    align-items: flex-start;
+  }
+
+  .vertebr-sync-target-summary {
+    text-align: left;
+    white-space: normal;
+    overflow: visible;
+    text-overflow: unset;
+  }
+}
+
+@media (max-width: 640px) {
+  .vertebr-sync-targets-head {
+    flex-direction: column;
+  }
+
+  .vertebr-sync-footer {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .vertebr-savebar-actions {
+    width: 100%;
+  }
+
+  .vertebr-savebar-actions .vertebr-btn-primary {
+    width: 100%;
+    justify-content: center;
+  }
+}

package/dist/styles/table.css

@@ -12,6 +12,20 @@
   scrollbar-width: thin;
 }
 
+.vertebr-table-wrap[data-overflow-left="true"] {
+  box-shadow: inset 12px 0 16px -14px color-mix(in srgb, var(--vb-text) 35%, transparent);
+}
+
+.vertebr-table-wrap[data-overflow-right="true"] {
+  box-shadow: inset -12px 0 16px -14px color-mix(in srgb, var(--vb-text) 35%, transparent);
+}
+
+.vertebr-table-wrap[data-overflow-left="true"][data-overflow-right="true"] {
+  box-shadow:
+    inset 12px 0 16px -14px color-mix(in srgb, var(--vb-text) 35%, transparent),
+    inset -12px 0 16px -14px color-mix(in srgb, var(--vb-text) 35%, transparent);
+}
+
 .vertebr-table {
   width: max-content;
   min-width: 100%;
@@ -115,7 +129,6 @@
   padding-right: 0.85rem;
   background: var(--vb-bg-elevated);
   border-left: 1px solid var(--vb-border);
-  box-shadow: -12px 0 16px -14px color-mix(in srgb, var(--vb-text) 35%, transparent);
 }
 
 .vertebr-table th.vertebr-col-actions {
@@ -123,10 +136,7 @@
 }
 
 .vertebr-table tbody tr:hover td.vertebr-col-actions {
-  background: var(--vb-bg-elevated);
-  box-shadow:
-    inset 0 0 0 999px var(--vb-surface-tint),
-    -12px 0 16px -14px color-mix(in srgb, var(--vb-text) 35%, transparent);
+  box-shadow: inset 0 0 0 999px var(--vb-surface-tint);
 }
 
 .vertebr-sr-only {

package/dist/themes/dark.css

@@ -1,5 +1,5 @@
 /**
- * Vertebr dark theme (default) — neutral Shopify-inspired palette.
+ * Vertebr dark theme (default) — neutral shell with warm bronze accent.
  */
 :root,
 [data-vb-theme="dark"] {
@@ -18,10 +18,10 @@
   --vb-text-muted: #a8a8a8;
   --vb-text-subtle: #7a7a7a;
   --vb-text-secondary: #b5b5b5;
-  --vb-accent: #008060;
-  --vb-accent-dim: #006e52;
-  --vb-accent-soft: rgba(0, 128, 96, 0.14);
-  --vb-accent-contrast: #ffffff;
+  --vb-accent: #c9a66b;
+  --vb-accent-dim: #a8854a;
+  --vb-accent-soft: rgba(201, 166, 107, 0.14);
+  --vb-accent-contrast: #1a1408;
   --vb-interactive: #5c9eff;
   --vb-interactive-soft: rgba(92, 158, 255, 0.12);
   --vb-danger: #e51c00;
@@ -44,12 +44,12 @@
   --vb-actions-from: rgba(36, 36, 36, 0.95);
   --vb-actions-to: rgba(26, 26, 26, 0.98);
   --vb-input-focus-bg: #2e2e2e;
-  --vb-btn-primary-from: #008060;
-  --vb-btn-primary-to: #008060;
-  --vb-btn-primary-border: #006e52;
-  --vb-btn-primary-hover-from: #00966d;
-  --vb-btn-primary-hover-to: #00966d;
-  --vb-btn-primary-hover-border: #008060;
+  --vb-btn-primary-from: #c9a66b;
+  --vb-btn-primary-to: #b89558;
+  --vb-btn-primary-border: #a8854a;
+  --vb-btn-primary-hover-from: #d4b27a;
+  --vb-btn-primary-hover-to: #c9a66b;
+  --vb-btn-primary-hover-border: #b89558;
 
   --vb-radius: var(--vb-radius-md);
   --vb-radius-sm: var(--vb-radius-sm);

package/dist/themes/index.css

@@ -1,3 +1,4 @@
 @import "./tokens.css";
 @import "./dark.css";
 @import "./light.css";
+@import "../styles/motion.css";

package/dist/themes/light.css

@@ -1,5 +1,5 @@
 /**
- * Vertebr light theme — neutral Shopify-inspired palette.
+ * Vertebr light theme — neutral shell with warm bronze accent.
  */
 [data-vb-theme="light"] {
   color-scheme: light;
@@ -17,9 +17,9 @@
   --vb-text-muted: #6d7175;
   --vb-text-subtle: #8c9196;
   --vb-text-secondary: #5c5f62;
-  --vb-accent: #008060;
-  --vb-accent-dim: #006e52;
-  --vb-accent-soft: rgba(0, 128, 96, 0.08);
+  --vb-accent: #9a7340;
+  --vb-accent-dim: #7d5e32;
+  --vb-accent-soft: rgba(154, 115, 64, 0.1);
   --vb-accent-contrast: #ffffff;
   --vb-interactive: #005bd3;
   --vb-interactive-soft: rgba(0, 91, 211, 0.08);
@@ -43,12 +43,12 @@
   --vb-actions-from: rgba(255, 255, 255, 0.95);
   --vb-actions-to: rgba(255, 255, 255, 0.98);
   --vb-input-focus-bg: #ffffff;
-  --vb-btn-primary-from: #008060;
-  --vb-btn-primary-to: #008060;
-  --vb-btn-primary-border: #006e52;
-  --vb-btn-primary-hover-from: #006e52;
-  --vb-btn-primary-hover-to: #006e52;
-  --vb-btn-primary-hover-border: #005e46;
+  --vb-btn-primary-from: #9a7340;
+  --vb-btn-primary-to: #9a7340;
+  --vb-btn-primary-border: #7d5e32;
+  --vb-btn-primary-hover-from: #865f36;
+  --vb-btn-primary-hover-to: #865f36;
+  --vb-btn-primary-hover-border: #6b4c28;
 
   --vb-shadow: var(--vb-shadow-sm);
 }
@@ -70,9 +70,9 @@
     --vb-text-muted: #6d7175;
     --vb-text-subtle: #8c9196;
     --vb-text-secondary: #5c5f62;
-    --vb-accent: #008060;
-    --vb-accent-dim: #006e52;
-    --vb-accent-soft: rgba(0, 128, 96, 0.08);
+    --vb-accent: #9a7340;
+    --vb-accent-dim: #7d5e32;
+    --vb-accent-soft: rgba(154, 115, 64, 0.1);
     --vb-accent-contrast: #ffffff;
     --vb-interactive: #005bd3;
     --vb-interactive-soft: rgba(0, 91, 211, 0.08);
@@ -96,12 +96,12 @@
     --vb-actions-from: rgba(255, 255, 255, 0.95);
     --vb-actions-to: rgba(255, 255, 255, 0.98);
     --vb-input-focus-bg: #ffffff;
-    --vb-btn-primary-from: #008060;
-    --vb-btn-primary-to: #008060;
-    --vb-btn-primary-border: #006e52;
-    --vb-btn-primary-hover-from: #006e52;
-    --vb-btn-primary-hover-to: #006e52;
-    --vb-btn-primary-hover-border: #005e46;
+    --vb-btn-primary-from: #9a7340;
+    --vb-btn-primary-to: #9a7340;
+    --vb-btn-primary-border: #7d5e32;
+    --vb-btn-primary-hover-from: #865f36;
+    --vb-btn-primary-hover-to: #865f36;
+    --vb-btn-primary-hover-border: #6b4c28;
 
     --vb-shadow: var(--vb-shadow-sm);
   }

package/package.json

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