@developer_tribe/react-builder 1.2.44 → 1.2.46

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

@@ -94,7 +94,7 @@
   }
 }
 
-.editor-device-button span {
+.editor-device-button__platform {
   position: absolute;
   bottom: 4px;
   right: 4px;
@@ -106,7 +106,7 @@
   overflow: hidden;
 }
 
-.editor-device-button img {
+.editor-device-button__platform img {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -117,6 +117,16 @@
   height: auto;
 }
 
+.editor-device-button__edit {
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
+  &:hover {
+    opacity: 1 !important;
+    transform: scale(1.1);
+  }
+}
+
 .editor-header__actions {
   margin-left: auto; /* push actions to the far right */
   display: flex;

package/src/styles/index.scss

@@ -32,5 +32,6 @@
 @use './modals/benefit-presets-modal';
 @use './modals/inspect-modal';
 @use './modals/prompt-manager-modal';
+@use './modals/create-device';
 
 @use './utilities/carousel';

package/src/styles/modals/_create-device.scss

@@ -0,0 +1,113 @@
+@use '../foundation/colors' as colors;
+@use '../foundation/sizes' as sizes;
+@use '../foundation/typography' as typography;
+
+.create-device-modal {
+  width: 100%;
+  max-width: 480px;
+
+  .modal__body {
+    padding: sizes.$spaceComfy;
+    display: flex;
+    flex-direction: column;
+    gap: sizes.$spaceCozy;
+  }
+}
+
+.create-device-form {
+  &__group {
+    display: flex;
+    flex-direction: column;
+    gap: sizes.$spaceTight;
+  }
+
+  &__row {
+    display: flex;
+    gap: sizes.$spaceCozy;
+
+    > * {
+      flex: 1;
+    }
+  }
+
+  &__label {
+    font-size: sizes.$fontSizeSm;
+    font-weight: 600;
+    color: colors.$mutedTextColor;
+    text-transform: uppercase;
+    letter-spacing: sizes.$letterSpacingTight;
+  }
+
+  &__error {
+    color: colors.$dangerColor;
+    font-size: sizes.$fontSizeXs;
+    margin-top: 2px;
+  }
+
+  &__footer {
+    margin-top: sizes.$spaceCozy;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+
+// Global-ish classes but styled for this context if not already defined
+.editor-input {
+  height: sizes.$controlHeightMd;
+  padding: 0 sizes.$spaceInset;
+  border-radius: sizes.$radiusMid;
+  border: 1px solid colors.$borderColor;
+  background: colors.$surfaceColor;
+  color: colors.$textColor;
+  font-family: inherit;
+  font-size: sizes.$fontSizeBase;
+  width: 100%;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+
+  &:focus {
+    outline: none;
+    border-color: colors.$accentColor;
+    box-shadow: 0 0 0 3px hsl(var(--rb-primary) / 0.15);
+  }
+
+  &::placeholder {
+    color: colors.$mutedTextColor;
+    opacity: 0.5;
+  }
+}
+
+select.editor-input {
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 5 3 3 3-3'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right sizes.$spaceInset center;
+  padding-right: sizes.$spaceRoomy;
+}
+
+.editor-button--primary {
+  background: colors.$textColor;
+  color: colors.$surfaceColor;
+  font-weight: 600;
+  border-color: colors.$textColor;
+
+  &:hover {
+    background: colors.$accentColor;
+    border-color: colors.$accentColor;
+  }
+}
+
+.device-selector-modal__search-container {
+  padding: 0 sizes.$spaceComfy;
+  margin-top: sizes.$spaceComfy;
+  margin-bottom: sizes.$spaceCompact;
+  display: flex;
+  gap: sizes.$spaceCozy;
+  align-items: center;
+
+  .editor-input {
+    flex: 1;
+  }
+}

package/src/utils/__special_exceptions.ts

@@ -79,6 +79,14 @@ export function normalizeNodeForValidation(
     ? normalizeUnknownValue(attributes)
     : attributes;
 
+  if (
+    isPlainObject(attributes) &&
+    Array.isArray(attributes.styles) &&
+    attributes.styles.length === 0
+  ) {
+    attributes.styles = {};
+  }
+
   const children =
     recordData.children !== undefined
       ? (normalizeNodeForValidation(

package/src/utils/analyseNodeByPatterns.ts

@@ -14,6 +14,7 @@ import {
   isNodeNullOrUndefined,
   isNodeString,
 } from './nodeGuards';
+import { logger } from './logger';
 
 export type AnalyseResultWithPath = {
   valid: boolean;
@@ -407,7 +408,13 @@ function validateAttributesByPattern(
   // Validate nested `attributes.styles` (canonical store for AttributesEditor).
   if (maybeStyles != null) {
     if (!isPlainObject(maybeStyles)) {
-      return fail(`styles must be an object`, joinPath(path, 'styles'));
+      const msg = `styles must be an object`;
+      logger.error('analyseNodeByPatterns', msg, {
+        path: joinPath(path, 'styles'),
+        actualValue: maybeStyles,
+        actualType: Array.isArray(maybeStyles) ? 'array' : typeof maybeStyles,
+      });
+      return fail(msg, joinPath(path, 'styles'));
     }
     const stylesRecord = maybeStyles as Record<string, unknown>;
     for (const [styleKey, styleValue] of Object.entries(stylesRecord)) {