@developer_tribe/react-builder 1.0.8 → 1.0.9

package/src/styles/base/_global.scss

@@ -44,12 +44,14 @@ body,
     border-color 0.2s ease,
     transform 0.1s ease,
     box-shadow 0.2s ease;
-  box-shadow: 0 1px 2px hsl(var(--foreground, 220.9 39.3% 11%) / 0.04);
+  box-shadow: 0 1px 2px
+    hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.04);
 
   &:hover {
     border-color: colors.$mutedTextColor;
     transform: translateY(-1px);
-    box-shadow: 0 6px 16px hsl(var(--foreground, 220.9 39.3% 11%) / 0.1);
+    box-shadow: 0 6px 16px
+      hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.1);
   }
 }
 
@@ -101,8 +103,10 @@ body,
   align-self: center;
   border: 1px solid colors.$borderColor;
   box-shadow:
-    0 18px 50px hsl(var(--foreground, 220.9 39.3% 11%) / 0.16),
-    0 6px 16px hsl(var(--foreground, 220.9 39.3% 11%) / 0.1);
+    0 18px 50px
+      hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.16),
+    0 6px 16px
+      hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.1);
   overflow: hidden;
   .scroll-container {
     /* Mobile-like scrollbar styling */
@@ -116,13 +120,18 @@ body,
     }
 
     &::-webkit-scrollbar-thumb {
-      background: hsl(var(--foreground, 220.9 39.3% 11%) / 0.25);
+      background: hsl(
+        var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.25
+      );
       border-radius: 8px;
     }
 
     /* For Firefox */
     scrollbar-width: thin;
-    scrollbar-color: hsl(var(--foreground, 220.9 39.3% 11%) / 0.25) transparent;
+    scrollbar-color: hsl(
+        var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.25
+      )
+      transparent;
   }
 }
 
@@ -276,7 +285,8 @@ body,
   background: colors.$textColor;
   color: colors.$surfaceColor;
   border-color: colors.$textColor;
-  box-shadow: 0 6px 16px hsl(var(--foreground, 220.9 39.3% 11%) / 0.15);
+  box-shadow: 0 6px 16px
+    hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.15);
 }
 
 .mobile-panel-toggle__icon {
@@ -301,7 +311,9 @@ body,
   right: sizes.$spaceCozy;
   border: none;
   border-radius: sizes.$radiusRounded;
-  background: hsl(var(--foreground, 220.9 39.3% 11%) / 0.7);
+  background: hsl(
+    var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.7
+  );
   color: colors.$surfaceColor;
   padding: sizes.$spaceSnug sizes.$spaceComfy;
   font-weight: 600;
@@ -330,7 +342,8 @@ body,
     width: 100%;
     height: 100%;
     background: colors.$canvasColor;
-    box-shadow: 0 25px 60px hsl(var(--foreground, 220.9 39.3% 11%) / 0.15);
+    box-shadow: 0 25px 60px
+      hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.15);
     transition:
       transform 0.3s ease,
       opacity 0.3s ease;
@@ -375,7 +388,9 @@ body,
     display: block;
     position: absolute;
     inset: 0;
-    background: hsl(var(--foreground, 220.9 39.3% 11%) / 0.35);
+    background: hsl(
+      var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.35
+    );
     border: none;
     padding: 0;
     margin: 0;
@@ -409,7 +424,7 @@ body,
   align-items: center;
   justify-content: center;
   pointer-events: none;
-  background: hsl(var(--card, 0 0% 100%) / 0.55);
+  background: hsl(var(--card, var(--rb-card, 0 0% 100%)) / 0.55);
   backdrop-filter: blur(1px);
 }
 
@@ -420,3 +435,35 @@ body,
   max-width: 360px;
   opacity: 0.95;
 }
+
+/* RenderPage empty preview overlay */
+.rb-empty-preview {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.rb-empty-preview__card {
+  width: min(320px, calc(100% - 32px));
+  padding: 14px 16px;
+  border-radius: sizes.$radiusRounded;
+  border: 1px dashed colors.$borderColor;
+  background: hsl(var(--card, var(--rb-card, 0 0% 100%)) / 0.72);
+  backdrop-filter: blur(1px);
+  text-align: center;
+}
+
+.rb-empty-preview__title {
+  font-weight: 700;
+  color: colors.$textColor;
+  margin-bottom: 4px;
+}
+
+.rb-empty-preview__hint {
+  font-size: 13px;
+  color: colors.$mutedTextColor;
+}

package/src/styles/components/_attributes-editor.scss

@@ -177,7 +177,7 @@
 
   &__trigger:focus-visible {
     outline: sizes.$outlineWidthFocus solid
-      hsl(var(--foreground, 220.9 39.3% 11%) / 0.4);
+      hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.4);
     outline-offset: sizes.$outlineWidthFocus;
   }
 

package/src/styles/components/_bottom-bar.scss

@@ -3,7 +3,7 @@
 .rb-bottom-bar {
   position: fixed;
   left: 50%;
-  transform: translateX(-66%);
+  transform: translateX(-76%);
   bottom: 10px;
   z-index: 200;
 
@@ -22,7 +22,8 @@
   gap: 10px;
 
   border: 1px solid colors.$borderColor;
-  box-shadow: 0 8px 20px hsl(var(--foreground, 220.9 39.3% 11%) / 0.08);
+  box-shadow: 0 8px 20px
+    hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.08);
 }
 
 .rb-bottom-bar__button {
@@ -43,7 +44,8 @@
   color: colors.$accentColor;
   background: colors.$accentColor; /* Fallback */
   background: color-mix(in srgb, #{colors.$accentColor}, transparent 92%);
-  box-shadow: 0 0 10px hsl(var(--primary, 221.2 83.2% 53.3%) / 0.18);
+  box-shadow: 0 0 10px
+    hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)) / 0.18);
 }
 
 /* border between each tool button */
@@ -90,7 +92,8 @@
 
 .rb-bottom-bar__lang.is-active {
   color: colors.$accentColor;
-  text-shadow: 0 0 12px hsl(var(--primary, 221.2 83.2% 53.3%) / 0.25);
+  text-shadow: 0 0 12px
+    hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)) / 0.25);
 }
 
 /* border between each language button */

package/src/styles/components/_editor-shell.scss

@@ -109,6 +109,123 @@
   gap: 8px;
 }
 
+.editor-actions-dropdown {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.editor-actions-dropdown__trigger {
+  min-width: auto;
+  gap: 8px;
+}
+
+.editor-actions-dropdown__caret {
+  font-size: 16px;
+  line-height: 1;
+  opacity: 0.8;
+}
+
+.editor-actions-dropdown__menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 20;
+  min-width: 220px;
+  padding: 6px;
+  margin: 0;
+  list-style: none;
+  background: colors.$surfaceColor;
+  border: 1px solid colors.$borderColor;
+  border-radius: 10px;
+  box-shadow: 0 10px 30px hsl(0 0% 0% / 0.18);
+}
+
+.editor-actions-dropdown__submenu-root {
+  position: relative;
+}
+
+.editor-actions-dropdown__submenu-root::after {
+  /* "Hover bridge" so moving into the left submenu doesn't close the menu */
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 100%;
+  width: 12px;
+  height: 100%;
+}
+
+.editor-actions-dropdown__submenu {
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 100%; /* open to the left (no gap) */
+  z-index: 21;
+  min-width: 240px;
+  max-height: 320px;
+  overflow: auto;
+  padding: 6px;
+  margin: 0;
+  list-style: none;
+  background: colors.$surfaceColor;
+  border: 1px solid colors.$borderColor;
+  border-radius: 10px;
+  box-shadow: 0 10px 30px hsl(0 0% 0% / 0.18);
+}
+
+.editor-actions-dropdown__submenu-root:hover
+  > .editor-actions-dropdown__submenu,
+.editor-actions-dropdown__submenu-root:focus-within
+  > .editor-actions-dropdown__submenu {
+  display: block;
+}
+
+.editor-actions-dropdown__submenu-caret {
+  margin-left: auto;
+  font-size: 14px;
+  line-height: 1;
+  opacity: 0.7;
+}
+
+.editor-actions-dropdown__item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  height: 36px;
+  padding: 0 10px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  color: colors.$textColor;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 600;
+  text-align: left;
+}
+
+.editor-actions-dropdown__item--compact {
+  height: 32px;
+  font-weight: 500;
+}
+
+.editor-actions-dropdown__item:hover {
+  background: colors.$canvasColor;
+  border-color: hsl(
+    var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.12
+  );
+}
+
+.editor-actions-dropdown__item:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.editor-actions-dropdown__item:focus-visible {
+  outline: 2px solid colors.$accentColor;
+  outline-offset: 2px;
+}
+
 .editor-button {
   display: inline-flex;
   align-items: center;
@@ -130,14 +247,19 @@
   font-size: 12px;
   line-height: 1.2;
   border-radius: 999px;
-  background: hsl(var(--card, 0 0% 100%) / 0.95);
-  border-color: hsl(var(--foreground, 220.9 39.3% 11%) / 0.15);
-  box-shadow: 0 2px 4px hsl(var(--foreground, 220.9 39.3% 11%) / 0.08);
+  background: hsl(var(--card, var(--rb-card, 0 0% 100%)) / 0.95);
+  border-color: hsl(
+    var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.15
+  );
+  box-shadow: 0 2px 4px
+    hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.08);
 }
 
 .debug-button:hover {
   background: colors.$surfaceColor;
-  border-color: hsl(var(--foreground, 220.9 39.3% 11%) / 0.3);
+  border-color: hsl(
+    var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.3
+  );
 }
 
 .editor-button:disabled {

package/src/styles/components/_mockos-router.scss

@@ -109,7 +109,7 @@
   transition: background-color 0.2s;
 
   &:hover {
-    background-color: hsl(var(--card, 0 0% 100%) / 0.1);
+    background-color: hsl(var(--card, var(--rb-card, 0 0% 100%)) / 0.1);
   }
 
   &:active {
@@ -122,7 +122,8 @@
   height: 60px;
   border-radius: 13px;
   overflow: hidden;
-  box-shadow: 0 2px 8px hsl(var(--foreground, 220.9 39.3% 11%) / 0.3);
+  box-shadow: 0 2px 8px
+    hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.3);
 
   svg {
     width: 100%;

package/src/styles/components/_ui-components.scss

@@ -42,7 +42,8 @@
 
   &:hover {
     background: colors.$canvasColor;
-    box-shadow: 0 6px 16px hsl(var(--foreground, 220.9 39.3% 11%) / 0.06);
+    box-shadow: 0 6px 16px
+      hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.06);
   }
 }
 
@@ -64,7 +65,8 @@
 
   &:focus {
     border-color: colors.$borderColor;
-    box-shadow: 0 0 0 3px hsl(var(--foreground, 220.9 39.3% 11%) / 0.04);
+    box-shadow: 0 0 0 3px
+      hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.04);
   }
 }
 
@@ -128,7 +130,8 @@
     border-color 0.2s ease,
     box-shadow 0.2s ease,
     transform 0.2s ease;
-  box-shadow: 0 2px 6px hsl(var(--foreground, 220.9 39.3% 11%) / 0.12);
+  box-shadow: 0 2px 6px
+    hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.12);
 
   &::after {
     content: '';
@@ -149,13 +152,15 @@
 }
 
 .builder-checkbox__native:focus-visible + .builder-checkbox__control {
-  box-shadow: 0 0 0 3px hsl(var(--primary, 221.2 83.2% 53.3%) / 0.3);
+  box-shadow: 0 0 0 3px
+    hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)) / 0.3);
 }
 
 .builder-checkbox__native:checked + .builder-checkbox__control {
   background: linear-gradient(135deg, colors.$textColor, colors.$accentColor);
   border-color: transparent;
-  box-shadow: 0 6px 14px hsl(var(--primary, 221.2 83.2% 53.3%) / 0.35);
+  box-shadow: 0 6px 14px
+    hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)) / 0.35);
 }
 
 .builder-checkbox__native:checked + .builder-checkbox__control::after {

package/src/styles/foundation/_colors.scss

@@ -6,17 +6,84 @@
  * - If the host doesn't define a token, we fall back to the builder defaults.
  */
 
-$background: hsl(var(--background, 220 14.3% 95.9%));
-$foreground: hsl(var(--foreground, 220.9 39.3% 11%));
-$card: hsl(var(--card, 0 0% 100%));
-$cardForeground: hsl(var(--card-foreground, 220.9 39.3% 11%));
-$muted: hsl(var(--muted, 220 14.3% 95.9%));
-$mutedForeground: hsl(var(--muted-foreground, 220 8.9% 46.1%));
-$primary: hsl(var(--primary, 221.2 83.2% 53.3%));
-$primaryForeground: hsl(var(--primary-foreground, 0 0% 100%));
-$destructive: hsl(var(--destructive, 0 84.2% 60.2%));
-$destructiveForeground: hsl(var(--destructive-foreground, 0 0% 100%));
-$border: hsl(var(--border, 220 13% 91%));
+/* ------------------------------------------------------------
+ * Default tokens (scoped via --rb-* to avoid overriding host apps)
+ *
+ * - Host apps can override by defining `--background`, `--foreground`, etc.
+ * - Builder provides defaults via `--rb-background`, `--rb-foreground`, etc.
+ * - Dark mode defaults are provided via `.dark` and `prefers-color-scheme`.
+ * ------------------------------------------------------------ */
+
+:root {
+  --rb-background: 220 14.3% 95.9%;
+  --rb-foreground: 220.9 39.3% 11%;
+  --rb-card: 0 0% 100%;
+  --rb-card-foreground: 220.9 39.3% 11%;
+  --rb-muted: 220 14.3% 95.9%;
+  --rb-muted-foreground: 220 8.9% 46.1%;
+  --rb-primary: 221.2 83.2% 53.3%;
+  --rb-primary-foreground: 0 0% 100%;
+  --rb-destructive: 0 84.2% 60.2%;
+  --rb-destructive-foreground: 0 0% 100%;
+  --rb-border: 220 13% 91%;
+  color-scheme: light;
+}
+
+.dark {
+  --rb-background: 222.2 84% 4.9%;
+  --rb-foreground: 210 40% 98%;
+  --rb-card: 222.2 84% 4.9%;
+  --rb-card-foreground: 210 40% 98%;
+  --rb-muted: 217.2 32.6% 17.5%;
+  --rb-muted-foreground: 215 20.2% 65.1%;
+  --rb-primary: 217.2 91.2% 59.8%;
+  --rb-primary-foreground: 222.2 84% 4.9%;
+  --rb-destructive: 0 62.8% 30.6%;
+  --rb-destructive-foreground: 210 40% 98%;
+  --rb-border: 217.2 32.6% 17.5%;
+  color-scheme: dark;
+}
+
+/* Automatic dark mode if the app doesn't explicitly set `.light`/`.dark`. */
+@media (prefers-color-scheme: dark) {
+  :root:not(.light):not(.dark) {
+    --rb-background: 222.2 84% 4.9%;
+    --rb-foreground: 210 40% 98%;
+    --rb-card: 222.2 84% 4.9%;
+    --rb-card-foreground: 210 40% 98%;
+    --rb-muted: 217.2 32.6% 17.5%;
+    --rb-muted-foreground: 215 20.2% 65.1%;
+    --rb-primary: 217.2 91.2% 59.8%;
+    --rb-primary-foreground: 222.2 84% 4.9%;
+    --rb-destructive: 0 62.8% 30.6%;
+    --rb-destructive-foreground: 210 40% 98%;
+    --rb-border: 217.2 32.6% 17.5%;
+    color-scheme: dark;
+  }
+}
+
+$background: hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)));
+$foreground: hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)));
+$card: hsl(var(--card, var(--rb-card, 0 0% 100%)));
+$cardForeground: hsl(
+  var(--card-foreground, var(--rb-card-foreground, 220.9 39.3% 11%))
+);
+$muted: hsl(var(--muted, var(--rb-muted, 220 14.3% 95.9%)));
+$mutedForeground: hsl(
+  var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%))
+);
+$primary: hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));
+$primaryForeground: hsl(
+  var(--primary-foreground, var(--rb-primary-foreground, 0 0% 100%))
+);
+$destructive: hsl(var(--destructive, var(--rb-destructive, 0 84.2% 60.2%)));
+$destructiveForeground: hsl(
+  var(
+    --destructive-foreground,
+    var(--rb-destructive-foreground, 0 0% 100%)
+  )
+);
+$border: hsl(var(--border, var(--rb-border, 220 13% 91%)));
 
 /* Back-compat aliases used by the existing SCSS. */
 $textColor: $foreground;

package/src/styles/foundation/_mixins.scss

@@ -14,7 +14,10 @@
 
 @mixin thin-scrollbar {
   scrollbar-width: thin;
-  scrollbar-color: hsl(var(--foreground, 220.9 39.3% 11%) / 0.25) transparent;
+  scrollbar-color: hsl(
+      var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.25
+    )
+    transparent;
   &::-webkit-scrollbar {
     width: 8px;
     height: 4px;

package/src/styles/foundation/_sizes.scss

@@ -18,8 +18,10 @@ $radiusPill: 12px;
 $borderWidthHairline: 1px;
 $outlineWidthFocus: 2px;
 
-$cardShadow: 0 10px 30px hsl(var(--foreground, 220.9 39.3% 11%) / 0.12);
-$shadowTooltip: 0 6px 16px hsl(var(--foreground, 220.9 39.3% 11%) / 0.2);
+$cardShadow: 0 10px 30px
+  hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.12);
+$shadowTooltip: 0 6px 16px
+  hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.2);
 
 $fontSizeXs: 11px;
 $fontSizeSm: 12px;

package/src/styles/index.scss

@@ -8,6 +8,7 @@
 @use './base/global';
 @use './layout/pages';
 @use './layout/builder';
+@use './layout/project-validation';
 
 @use './components/ui-components';
 @use './components/editor-shell';

package/src/styles/layout/_builder.scss

@@ -55,9 +55,70 @@
     overflow: hidden;
     text-overflow: ellipsis;
     cursor: pointer;
+    border: none;
+    text-align: left;
   }
 }
 
+.builder__button-actions {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+}
+
+.builder__button-actions-trigger {
+  @include card;
+  height: sizes.$buttonHeight;
+  width: sizes.$buttonHeight;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  margin-left: sizes.$spaceTight;
+  background: colors.$canvasColor;
+  color: colors.$mutedTextColor;
+  cursor: pointer;
+  box-shadow: inset 0 0 0 1px colors.$borderColor;
+}
+
+.builder__button-actions-menu {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 6px);
+  min-width: 160px;
+  padding: 6px;
+  margin: 0;
+  list-style: none;
+  background: colors.$surfaceColor;
+  border-radius: sizes.$radiusSoft;
+  box-shadow: 0 10px 25px hsl(0 0% 0% / 0.15);
+  border: 1px solid colors.$borderColor;
+  z-index: 20;
+}
+
+.builder__button-actions-item {
+  width: 100%;
+  text-align: left;
+  border: none;
+  background: transparent;
+  padding: 8px 10px;
+  border-radius: sizes.$radiusSoft;
+  cursor: pointer;
+  font-size: 12px;
+  color: colors.$textColor;
+  &:hover {
+    background: colors.$canvasColor;
+  }
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.builder__button-actions-item--danger {
+  color: colors.$dangerColor;
+}
+
 .builder__sort-controls {
   display: flex;
   flex-direction: column;