@vertebr/react 0.5.0 → 0.6.0

package/dist/styles/page-preview.css

@@ -0,0 +1,208 @@
+/* ── Page preview (host iframe + live drafts) ────────── */
+
+.vertebr-config-editor {
+  flex: 1 1 0%;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.vertebr-config-editor > .vertebr-form,
+.vertebr-config-editor > .vertebr-page-editor {
+  flex: 1 1 0%;
+  min-height: 0;
+}
+
+.vertebr-page-editor {
+  flex: 1 1 0%;
+  min-width: 0;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
+  gap: 0;
+  overflow: hidden;
+}
+
+.vertebr-page-editor-form {
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-right: 1px solid var(--vb-border);
+}
+
+.vertebr-page-editor-form .vertebr-form {
+  flex: 1 1 0%;
+  min-height: 0;
+  height: 100%;
+  border-radius: 0;
+}
+
+.vertebr-page-preview {
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--vb-surface-tint);
+}
+
+.vertebr-page-preview-meta {
+  flex: 0 0 auto;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem 1.25rem;
+  padding: 0.7rem 1rem;
+  border-bottom: 1px solid var(--vb-border);
+  background: var(--vb-bg-elevated);
+}
+
+.vertebr-page-preview-meta p {
+  margin: 0;
+  display: flex;
+  align-items: baseline;
+  gap: 0.45rem;
+  font-size: 0.78rem;
+  color: var(--vb-text-muted);
+}
+
+.vertebr-page-preview-meta span {
+  font-family: var(--vb-mono);
+  font-size: 0.66rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--vb-text-subtle);
+}
+
+.vertebr-page-preview-meta strong {
+  font-weight: 560;
+  color: var(--vb-text);
+}
+
+.vertebr-page-preview-viewports {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.15rem;
+  padding: 0.15rem;
+  border: 1px solid var(--vb-border);
+  border-radius: 999px;
+  background: var(--vb-bg);
+}
+
+.vertebr-page-preview-viewports button {
+  appearance: none;
+  margin: 0;
+  border: 0;
+  border-radius: 999px;
+  padding: 0.28rem 0.7rem;
+  font: inherit;
+  font-size: 0.74rem;
+  font-weight: 520;
+  color: var(--vb-text-muted);
+  background: transparent;
+  cursor: pointer;
+}
+
+.vertebr-page-preview-viewports button:hover {
+  color: var(--vb-text);
+}
+
+.vertebr-page-preview-viewports button[data-active="true"] {
+  color: var(--vb-text);
+  background: var(--vb-surface-tint);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--vb-border) 80%, transparent);
+}
+
+.vertebr-page-preview-stage {
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: 0.75rem;
+  display: flex;
+  justify-content: stretch;
+  align-items: stretch;
+}
+
+.vertebr-page-preview-stage[data-viewport="mobile"] {
+  justify-content: center;
+  align-items: center;
+  overflow: auto;
+  background:
+    radial-gradient(
+      circle at 50% 0%,
+      color-mix(in srgb, var(--vb-text) 4%, transparent),
+      transparent 55%
+    ),
+    var(--vb-surface-tint);
+}
+
+.vertebr-page-preview-shell {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+}
+
+.vertebr-page-preview-stage[data-viewport="mobile"] .vertebr-page-preview-shell {
+  flex: 0 0 auto;
+}
+
+.vertebr-page-preview-frame {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  border: 1px solid var(--vb-border);
+  border-radius: 10px;
+  overflow: hidden;
+  background: var(--vb-bg);
+  box-shadow: var(--vb-shadow);
+}
+
+.vertebr-page-preview-stage[data-viewport="mobile"] .vertebr-page-preview-frame {
+  flex: 0 0 auto;
+  border-radius: 28px;
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--vb-border) 90%, transparent),
+    0 18px 40px color-mix(in srgb, var(--vb-text) 12%, transparent);
+}
+
+.vertebr-page-preview-frame iframe {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: #fff;
+}
+
+.vertebr-page-preview-empty {
+  height: 100%;
+  display: grid;
+  place-items: center;
+  padding: 1.5rem;
+  text-align: center;
+  color: var(--vb-text-muted);
+  font-size: 0.88rem;
+}
+
+@media (max-width: 1100px) {
+  .vertebr-page-editor {
+    grid-template-columns: 1fr;
+    grid-template-rows: minmax(240px, 42%) minmax(0, 1fr);
+    overflow: hidden;
+  }
+
+  .vertebr-page-editor-form {
+    border-right: 0;
+    border-bottom: 1px solid var(--vb-border);
+    max-height: none;
+    min-height: 0;
+  }
+
+  .vertebr-page-preview-stage {
+    min-height: 280px;
+  }
+}

package/dist/styles/panel.css

@@ -1,7 +1,7 @@
 /* ── Panel ───────────────────────────────────────────── */
 
 .vertebr-panel {
-  flex: 1 1 auto;
+  flex: 1 1 0%;
   min-width: 0;
   min-height: 0;
   display: flex;
@@ -112,13 +112,18 @@
 }
 
 .vertebr-resource-edit {
-  flex: 1 1 auto;
+  flex: 1 1 0%;
   min-height: 0;
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }
 
+.vertebr-resource-edit > .vertebr-form {
+  flex: 1 1 0%;
+  min-height: 0;
+}
+
 .vertebr-resource-edit-head {
   flex: 0 0 auto;
   display: flex;

package/dist/styles/states.css

@@ -125,6 +125,7 @@
   .vertebr-actions {
     flex-wrap: wrap;
     padding: 0.85rem 1rem;
+    padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px) + 4.75rem);
   }
 
   .vertebr-resource-edit-head {
@@ -150,17 +151,19 @@
 
   .vertebr-main {
     height: auto;
-    overflow: visible;
+    min-height: 0;
+    overflow: hidden;
     padding: 0;
   }
 
   .vertebr-content {
-    overflow: visible;
-    padding: 1.25rem 1rem 2rem;
+    overflow: hidden;
+    padding: 1.25rem 1rem 1rem;
   }
 
   .vertebr-panel {
     min-height: min(70vh, 640px);
+    max-height: calc(100dvh - 8rem);
   }
 
   .vertebr-table-wrap {

package/dist/styles/table.css

@@ -75,6 +75,24 @@
   cursor: pointer;
 }
 
+.vertebr-visibility-check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2rem;
+  padding: 0.1rem;
+  border-radius: 6px;
+}
+
+.vertebr-visibility-check[data-dirty="true"] {
+  background: color-mix(in srgb, var(--vb-accent) 14%, transparent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--vb-accent) 35%, transparent);
+}
+
+.vertebr-visibility-check .vertebr-visibility-btn[data-dirty="true"] {
+  color: var(--vb-accent);
+}
+
 .vertebr-table-row-clickable {
   cursor: pointer;
 }

package/package.json

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