@developer_tribe/react-builder 1.0.8 → 1.0.9

package/src/styles/layout/_project-validation.scss

@@ -0,0 +1,214 @@
+@use '../foundation/colors' as colors;
+@use '../foundation/sizes' as sizes;
+@use '../foundation/mixins' as *;
+
+.rb-project-debug {
+  display: flex;
+  width: 100%;
+  height: calc(100vh - 60px);
+  overflow: hidden;
+  background: colors.$canvasColor;
+}
+
+.rb-project-debug__json {
+  @include thin-scrollbar;
+  flex: 0 0 34%;
+  min-width: 320px;
+  max-width: 640px;
+  border-right: 1px solid colors.$borderColor;
+  overflow: auto;
+  padding: sizes.$spaceComfy;
+  background: colors.$surfaceColor;
+}
+
+.rb-project-debug__preview {
+  @include thin-scrollbar;
+  position: relative;
+  flex: 1 1 auto;
+  overflow: auto;
+  padding: sizes.$spaceComfy;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-image: var(--rb-canvas-bg, none);
+  background-position: center;
+  background-repeat: repeat;
+  background-size: 500px auto;
+}
+
+/* Hide the canvas grid background in dark theme (Tailwind/shadcn convention). */
+.dark .rb-project-debug__preview {
+  --rb-canvas-bg: none !important;
+}
+
+.rb-project-debug__error {
+  @include thin-scrollbar;
+  flex: 0 0 32%;
+  min-width: 280px;
+  max-width: 520px;
+  border-left: 1px solid colors.$borderColor;
+  overflow: auto;
+  padding: sizes.$spaceComfy;
+  background: colors.$surfaceColor;
+}
+
+.rb-project-debug__title {
+  margin: 0 0 sizes.$spaceTight 0;
+  font-size: 16px;
+  font-weight: 700;
+  color: colors.$textColor;
+}
+
+.rb-project-debug__error-block {
+  @include card;
+  padding: sizes.$spaceCozy;
+  margin: 0 0 sizes.$spaceCozy 0;
+  background: colors.$canvasColor;
+}
+
+.rb-project-debug__error-label {
+  font-size: 12px;
+  font-weight: 800;
+  color: colors.$textColor;
+  margin: 0 0 sizes.$spaceTight 0;
+}
+
+.rb-project-debug__error-pre {
+  margin: 0;
+  padding: sizes.$spaceTight;
+  border-radius: sizes.$radiusSoft;
+  background: colors.$surfaceColor;
+  border: 1px solid colors.$borderColor;
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+  font-size: 11px;
+  line-height: 1.45;
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow: auto;
+  max-height: 220px;
+}
+
+.rb-project-debug__meta {
+  margin: 0 0 sizes.$spaceCozy 0;
+  font-size: 12px;
+  color: colors.$mutedTextColor;
+}
+
+.rb-project-debug__meta-label {
+  font-weight: 700;
+  color: colors.$textColor;
+}
+
+.rb-project-debug__toolbar {
+  display: flex;
+  gap: sizes.$spaceTight;
+  align-items: center;
+  margin: 0 0 sizes.$spaceCozy 0;
+}
+
+.rb-project-debug__toolbar .editor-button {
+  min-width: 0;
+  height: 34px;
+  padding: 0 sizes.$spaceCozy;
+}
+
+.rb-project-debug__below-name {
+  margin: 0 0 sizes.$spaceCozy 0;
+}
+
+.rb-project-debug__error-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: sizes.$spaceCozy;
+  margin: 0 0 sizes.$spaceCozy 0;
+}
+
+.rb-project-debug__error-head .rb-project-debug__title {
+  margin: 0;
+}
+
+.rb-project-debug__error-head .editor-button {
+  min-width: 0;
+  height: 34px;
+  padding: 0 sizes.$spaceCozy;
+}
+
+.rb-project-validation__actions {
+  display: flex;
+  gap: sizes.$spaceTight;
+  align-items: center;
+}
+
+.rb-project-validation__actions .editor-button {
+  min-width: 0;
+  height: 34px;
+  padding: 0 sizes.$spaceCozy;
+}
+
+.rb-project-debug__code {
+  @include card;
+  margin: 0;
+  padding: sizes.$spaceCozy;
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: pre;
+  overflow: auto;
+  max-height: calc(100vh - 60px - 160px);
+  background: colors.$canvasColor;
+}
+
+/* Legacy selectors kept for backward compatibility (no-op if unused) */
+.rb-project-validation__error {
+  margin: 0 0 sizes.$spaceCozy 0;
+  font-size: 13px;
+  line-height: 1.4;
+  color: colors.$dangerColor;
+  font-weight: 600;
+}
+
+.rb-project-validation__error--render {
+  color: colors.$accentColor;
+}
+
+.rb-project-validation__error-label {
+  font-weight: 800;
+}
+
+@media (max-width: 1000px) {
+  .rb-project-debug {
+    flex-direction: column;
+    height: calc(100vh - 60px);
+  }
+
+  .rb-project-debug__json {
+    flex: 0 0 auto;
+    width: 100%;
+    min-width: 0;
+    max-width: none;
+    border-right: none;
+    border-bottom: 1px solid colors.$borderColor;
+    max-height: 45%;
+  }
+
+  .rb-project-debug__preview {
+    flex: 1 1 auto;
+    width: 100%;
+    min-height: 0;
+  }
+
+  .rb-project-debug__error {
+    flex: 0 0 auto;
+    width: 100%;
+    min-width: 0;
+    max-width: none;
+    border-left: none;
+    border-top: 1px solid colors.$borderColor;
+    max-height: 40%;
+  }
+}

package/src/styles/modals/_add-component.scss

@@ -49,7 +49,8 @@
   border-radius: 12px;
   padding: sizes.$spaceComfy;
   margin-bottom: sizes.$spaceCozy;
-  box-shadow: 0 10px 20px hsl(var(--foreground, 220.9 39.3% 11%) / 0.05);
+  box-shadow: 0 10px 20px
+    hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.05);
 }
 
 .add-component-modal__group-title {
@@ -86,7 +87,8 @@
 
 .add-component-modal__card:hover {
   border-color: colors.$accentColor;
-  box-shadow: 0 10px 25px hsl(var(--primary, 221.2 83.2% 53.3%) / 0.15);
+  box-shadow: 0 10px 25px
+    hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)) / 0.15);
   transform: translateY(-2px);
 }
 

package/src/styles/modals/_color-modal.scss

@@ -30,7 +30,8 @@
   width: 32px;
   height: 32px;
   border-radius: 6px;
-  border: 1px solid hsl(var(--foreground, 220.9 39.3% 11%) / 0.1);
+  border: 1px solid
+    hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.1);
 }
 
 .color-modal__selected-label {
@@ -158,7 +159,8 @@
 }
 
 .color-modal__swatch-preview--light {
-  border: 1px solid hsl(var(--foreground, 220.9 39.3% 11%) / 0.1);
+  border: 1px solid
+    hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.1);
 }
 
 .color-modal__swatch-label {

package/src/styles/modals/_modal-shell.scss

@@ -10,7 +10,9 @@
 .modal__overlay {
   position: absolute;
   inset: 0;
-  background: hsl(var(--foreground, 220.9 39.3% 11%) / 0.4);
+  background: hsl(
+    var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.4
+  );
   z-index: 0;
 }
 

package/src/types/Device.ts

@@ -3,6 +3,11 @@ export interface Device {
   platform: string; // ios, android
   width: number;
   height: number;
+  /**
+   * High-level screen shape bucket derived from portrait aspect ratio (height / width).
+   * Useful for quickly filtering "tall" vs "wide-ish" devices without hardcoding sizes.
+   */
+  aspect?: 'tall' | 'regular' | 'wide';
   type: 'phone' | 'tablet';
   /**
    * Optional physical corner radius of the device screen area in CSS pixels.

package/src/utils/__special_exceptions.ts

@@ -0,0 +1,88 @@
+import type { Node, NodeData, NodeDefaultAttribute } from '../types/Node';
+import { isNodeArray, isNodeNullOrUndefined, isNodeString } from './nodeGuards';
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+function looksLikeSelectOptionObject(
+  value: unknown,
+): value is { value: unknown } {
+  if (!isPlainObject(value)) return false;
+  // Avoid unwrapping actual node-like objects or typed objects that use `type`.
+  if ('type' in value || 'children' in value || 'attributes' in value) {
+    return false;
+  }
+  if (!('value' in value)) return false;
+  const keys = Object.keys(value);
+  // Typical shapes: { value }, { value, label }, { value, label, id }
+  if (keys.length < 1 || keys.length > 3) return false;
+  const allowed = new Set(['value', 'label', 'id']);
+  for (const k of keys) if (!allowed.has(k)) return false;
+  const v = (value as Record<string, unknown>).value;
+  return (
+    v == null ||
+    typeof v === 'string' ||
+    typeof v === 'number' ||
+    typeof v === 'boolean'
+  );
+}
+
+function normalizeUnknownValue(value: unknown): unknown {
+  if (value == null) return value;
+
+  if (Array.isArray(value)) {
+    return value.map(normalizeUnknownValue);
+  }
+
+  if (!isPlainObject(value)) return value;
+
+  if (looksLikeSelectOptionObject(value)) {
+    return normalizeUnknownValue((value as { value: unknown }).value);
+  }
+
+  const out: Record<string, unknown> = {};
+  for (const [k, v] of Object.entries(value)) {
+    out[k] = normalizeUnknownValue(v);
+  }
+  return out;
+}
+
+/**
+ * Special-case normalization for persisted JSON before validation.
+ *
+ * Keep "exceptions" here rather than inside the core validation logic.
+ */
+export function normalizeNodeForValidation(
+  node: Node<NodeDefaultAttribute>,
+): Node<NodeDefaultAttribute> {
+  if (isNodeNullOrUndefined(node) || isNodeString(node)) {
+    return node;
+  }
+
+  if (isNodeArray(node)) {
+    const nodeArray = node as unknown as Node<NodeDefaultAttribute>[];
+    return nodeArray.map(
+      normalizeNodeForValidation,
+    ) as unknown as Node<NodeDefaultAttribute>;
+  }
+
+  const recordData = node as NodeData<NodeDefaultAttribute>;
+
+  const attributes = isPlainObject(recordData.attributes)
+    ? (normalizeUnknownValue(recordData.attributes) as Record<string, unknown>)
+    : recordData.attributes;
+
+  const children =
+    recordData.children !== undefined
+      ? (normalizeNodeForValidation(
+          recordData.children as Node<NodeDefaultAttribute>,
+        ) as Node<NodeDefaultAttribute>)
+      : recordData.children;
+
+  return {
+    ...recordData,
+    attributes: attributes as any,
+    children,
+  };
+}

package/src/utils/analyseNode.ts

@@ -3,6 +3,7 @@ import { generateRandomKeyForNode } from './generateRandomKeyForNode';
 import { analyseNodeByPatterns } from './analyseNodeByPatterns';
 import { analyseNodeStructural } from './analyseNodeStructural';
 import { isNodeArray, isNodeNullOrUndefined, isNodeString } from './nodeGuards';
+import { normalizeNodeForValidation } from './__special_exceptions';
 
 export {
   isEmptyObject,
@@ -78,11 +79,16 @@ export function analyseAndProccess(
     return null;
   }
 
-  const { valid, message } = analyseNode(node);
+  // Normalize persisted JSON "select option" objects into primitives before
+  // validation (e.g. { label, value } -> value). This commonly appears in
+  // attributes like events[].navigate_to.
+  const normalized = normalizeNodeForValidation(node);
+
+  const { valid, message } = analyseNode(normalized);
   if (!valid) {
     throw new Error(message ?? 'Node is not valid');
   }
 
   const usedKeys = new Set<string>();
-  return assignMissingKeys(node, usedKeys);
+  return assignMissingKeys(normalized, usedKeys);
 }

package/src/utils/analyseNodeByPatterns.ts

@@ -24,7 +24,6 @@ type AttributeTypeSpec = string | string[];
 type AttributeSchema = Record<string, AttributeTypeSpec>;
 
 type PatternLike = {
-  allowUnknownAttributes: boolean;
   pattern: {
     type: string;
     children: unknown;
@@ -56,7 +55,10 @@ function isNodeDataLike(
 ): value is NodeData<NodeDefaultAttribute> {
   if (!isPlainObject(value)) return false;
   const maybeType = (value as Record<string, unknown>).type;
-  return typeof maybeType === 'string' && 'children' in value;
+  // `children` is optional in persisted JSON; treat missing as `undefined`.
+  // The structural validator handles overall shape; the pattern validator should
+  // focus on types/attributes/children rules, not require the key to exist.
+  return typeof maybeType === 'string';
 }
 
 function normalizeTypeOrFallback(type: string): string {
@@ -71,14 +73,19 @@ function getChildrenSpecTokens(pattern: PatternLike): string[] {
 }
 
 function splitChildrenSpec(tokens: string[]): {
-  baseKinds: Set<'never' | 'string' | 'node' | 'array'>;
+  baseKinds: Set<'never' | 'string' | 'node'>;
   allowedComponentTypes: Set<string>;
 } {
-  const baseKinds = new Set<'never' | 'string' | 'node' | 'array'>();
+  const baseKinds = new Set<'never' | 'string' | 'node'>();
   const allowedComponentTypes = new Set<string>();
   for (const t of tokens) {
-    if (t === 'never' || t === 'string' || t === 'node' || t === 'array') {
+    // NOTE: pattern.children no longer uses the 'array' token.
+    // 'node' means "a node OR an array of nodes".
+    if (t === 'never' || t === 'string' || t === 'node') {
       baseKinds.add(t);
+    } else if (t === 'array') {
+      // Backwards-compat: treat 'array' as 'node'
+      baseKinds.add('node');
     } else if (typeof t === 'string' && t) {
       allowedComponentTypes.add(normalizeTypeOrFallback(t));
     }
@@ -88,7 +95,7 @@ function splitChildrenSpec(tokens: string[]): {
 
 function validateChildrenNeverRule(
   children: Node<NodeDefaultAttribute>,
-  baseKinds: Set<'never' | 'string' | 'node' | 'array'>,
+  baseKinds: Set<'never' | 'string' | 'node'>,
   path: string,
 ): AnalyseResultWithPath {
   if (!baseKinds.has('never')) return ok();
@@ -98,7 +105,7 @@ function validateChildrenNeverRule(
 
 function validateChildrenKindRule(
   children: Node<NodeDefaultAttribute>,
-  baseKinds: Set<'never' | 'string' | 'node' | 'array'>,
+  baseKinds: Set<'never' | 'string' | 'node'>,
   allowedComponentTypes: Set<string>,
   path: string,
 ): AnalyseResultWithPath {
@@ -122,7 +129,8 @@ function validateChildrenKindRule(
       : fail(`Children must not be a string`, path);
   }
   if (isNodeArray(children)) {
-    return baseKinds.has('array')
+    // 'node' allows both a single node and an array of nodes
+    return baseKinds.has('node')
       ? ok()
       : fail(`Children must not be an array`, path);
   }
@@ -295,6 +303,11 @@ function validateAttributeValue(
   spec: AttributeTypeSpec,
   path: string,
 ): AnalyseResultWithPath {
+  // Pattern validation does not enforce requiredness (it only validates types for
+  // keys that exist). Treat null/undefined as "unset" so persisted JSON can use
+  // null to clear fields (e.g. events[].navigate_to = null).
+  if (value == null) return ok();
+
   if (Array.isArray(spec)) {
     return validateEnumValue(value, spec, path);
   }
@@ -338,10 +351,31 @@ function validateAttributesByPattern(
     pattern.pattern.attributes ??
     {}) as AttributeSchema;
 
+  // Validate nested `attributes.style` as an object; validate any style keys that also exist in schema.
+  const maybeStyle = (attrs as Record<string, unknown>).style;
+  if (maybeStyle != null) {
+    if (!isPlainObject(maybeStyle)) {
+      return fail(`style must be an object`, joinPath(path, 'style'));
+    }
+    for (const [styleKey, styleValue] of Object.entries(
+      maybeStyle as Record<string, unknown>,
+    )) {
+      const spec = schema?.[styleKey];
+      if (!spec) continue; // allow unknown style keys (free-form CSSProperties)
+      const res = validateAttributeValue(
+        pattern.pattern.type,
+        styleValue,
+        spec,
+        joinPath(joinPath(path, 'style'), styleKey),
+      );
+      if (!res.valid) return res;
+    }
+  }
+
   for (const [attrName, attrValue] of Object.entries(attrs)) {
+    if (attrName === 'style') continue;
     const attrSpec = schema?.[attrName];
     if (!attrSpec) {
-      if (pattern.allowUnknownAttributes) continue;
       return fail(`Unknown attribute "${attrName}"`, joinPath(path, attrName));
     }
     const res = validateAttributeValue(

package/src/utils/extractTextStyle.ts

@@ -17,6 +17,16 @@ export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
   options: ExtractTextStyleOptions = {},
 ) {
   const attributes = node.attributes;
+  const styleBag = (attributes as any)?.style as
+    | Record<string, unknown>
+    | undefined;
+  const get = <K extends keyof TextPropsGenerated['attributes']>(
+    key: K,
+  ): TextPropsGenerated['attributes'][K] | undefined => {
+    const direct = (attributes as any)?.[key];
+    if (direct !== undefined && direct !== null) return direct;
+    return styleBag?.[key as unknown as string] as any;
+  };
   const resolvedAppConfig = options.appConfig ?? defaultAppConfig;
   const { screenStyle, theme } = resolvedAppConfig;
   const fallbackColor =
@@ -31,20 +41,23 @@ export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
   }
 
   // Typography
-  if (attributes.fontSize !== undefined) {
-    const parsed = parseSize(attributes.fontSize);
+  const fontSize = get('fontSize') as any;
+  if (fontSize !== undefined) {
+    const parsed = parseSize(fontSize);
     style.fontSize = parsed as React.CSSProperties['fontSize'];
   } else {
     style.fontSize = fs(14);
   }
-  if (attributes.fontWeight) style.fontWeight = attributes.fontWeight;
-  const resolvedTextColor = parseColor(attributes.color, {
+  const fontWeight = get('fontWeight') as any;
+  if (fontWeight) style.fontWeight = fontWeight;
+  const resolvedTextColor = parseColor(get('color') as any, {
     projectColors: options.projectColors,
     appConfig: resolvedAppConfig,
   });
   style.color = resolvedTextColor ?? fallbackColor;
-  if (attributes.textAlign)
-    style.textAlign = attributes.textAlign as React.CSSProperties['textAlign'];
+  const textAlign = get('textAlign') as any;
+  if (textAlign)
+    style.textAlign = textAlign as React.CSSProperties['textAlign'];
 
   return { ...extractViewStyle(node, options), ...style };
 }