@developer_tribe/react-builder 1.2.18 → 1.2.20

package/src/pages/ProjectValidationPage.tsx

@@ -1,7 +1,10 @@
-import type { ReactNode } from 'react';
+import { type ReactNode, useEffect, useState } from 'react';
 import type { Product } from '../paywall/types/paywall-types';
 import type { PaywallBenefits } from '../paywall/types/benefits';
 import { ProjectDebug } from './ProjectDebug';
+import { safeJsonStringify } from '../utils/safeJsonStringify';
+import type { Node } from '../types/Node';
+import { wrapNodeInMain } from '../utils/wrapNodeInMain';
 
 export type ProjectValidationPageProps = {
   name: string;
@@ -13,6 +16,7 @@ export type ProjectValidationPageProps = {
   canvasBg?: string;
   belowName?: ReactNode;
   onContinueWithoutValidation?: () => void;
+  onSaveEditedRawData?: (nextRawData: unknown) => void;
 };
 
 export function ProjectValidationPage({
@@ -25,7 +29,40 @@ export function ProjectValidationPage({
   canvasBg,
   belowName,
   onContinueWithoutValidation,
+  onSaveEditedRawData,
 }: ProjectValidationPageProps) {
+  const [jsonText, setJsonText] = useState<string>(() =>
+    safeJsonStringify(rawData),
+  );
+  const [jsonParseError, setJsonParseError] = useState<string | null>(null);
+
+  const wrapInMain = () => {
+    try {
+      const parsed = JSON.parse(jsonText) as unknown;
+      const isRecord = (v: unknown): v is Record<string, unknown> =>
+        typeof v === 'object' && v !== null && !Array.isArray(v);
+
+      const nodeCandidate: unknown =
+        isRecord(parsed) && 'data' in parsed ? (parsed as any).data : parsed;
+
+      const wrapped = wrapNodeInMain(nodeCandidate as Node);
+      const nextValue =
+        isRecord(parsed) && 'data' in parsed
+          ? { ...(parsed as any), data: wrapped }
+          : wrapped;
+
+      setJsonText(JSON.stringify(nextValue, null, 2));
+      setJsonParseError(null);
+    } catch (e) {
+      setJsonParseError(e instanceof Error ? e.message : String(e));
+    }
+  };
+
+  useEffect(() => {
+    setJsonText(safeJsonStringify(rawData));
+    setJsonParseError(null);
+  }, [rawData]);
+
   return (
     <ProjectDebug
       name={name}
@@ -35,6 +72,25 @@ export function ProjectValidationPage({
       products={products}
       benefits={benefits}
       canvasBg={canvasBg}
+      jsonEditor={{
+        value: jsonText,
+        onChange: (next) => {
+          setJsonText(next);
+          setJsonParseError(null);
+        },
+        error: jsonParseError,
+        onSave: () => {
+          try {
+            const parsed = JSON.parse(jsonText) as unknown;
+            setJsonParseError(null);
+            onSaveEditedRawData?.(parsed);
+          } catch (e) {
+            setJsonParseError(e instanceof Error ? e.message : String(e));
+          }
+        },
+        saveDisabled: !onSaveEditedRawData,
+        saveLabel: 'Save JSON',
+      }}
       belowName={
         <>
           <div className="rb-project-validation__actions">
@@ -45,6 +101,13 @@ export function ProjectValidationPage({
             >
               Continue without validation
             </button>
+            <button
+              type="button"
+              className="editor-button"
+              onClick={() => wrapInMain()}
+            >
+              Wrap in Main
+            </button>
           </div>
           {belowName}
         </>

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

@@ -163,6 +163,35 @@
   background: colors.$canvasColor;
 }
 
+.rb-project-debug__code-editor {
+  @include card;
+  width: 100%;
+  margin: 0;
+  padding: sizes.$spaceCozy;
+  border: 1px solid colors.$borderColor;
+  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;
+  resize: vertical;
+  min-height: 220px;
+  max-height: calc(100vh - 60px - 160px);
+  background: colors.$canvasColor;
+  color: colors.$textColor;
+}
+
+.rb-project-debug__json-error {
+  margin: sizes.$spaceTight 0 0 0;
+  font-size: 12px;
+  line-height: 1.35;
+  color: colors.$dangerColor;
+  font-weight: 600;
+  word-break: break-word;
+}
+
 /* Legacy selectors kept for backward compatibility (no-op if unused) */
 .rb-project-validation__error {
   margin: 0 0 sizes.$spaceCozy 0;

package/src/styles/utilities/_carousel.scss

@@ -78,38 +78,6 @@
   height: 50px;
   margin: 0 auto;
 }
-.embla__dot {
-  -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
-  -webkit-appearance: none;
-  appearance: none;
-  background-color: transparent;
-  --embla-dot-color: var(--detail-medium-contrast);
-  touch-action: manipulation;
-  display: inline-flex;
-  text-decoration: none;
-  cursor: pointer;
-  border: 0;
-  padding: 0;
-  margin: 0;
-  /* Keep a reasonable hit-area, but allow bigger dots to grow it. */
-  width: max(2.6rem, calc(var(--embla-dot-size, 1.4rem) + 1.2rem));
-  height: max(2.6rem, calc(var(--embla-dot-size, 1.4rem) + 1.2rem));
-  display: flex;
-  align-items: center;
-  border-radius: 50%;
-}
-.embla__dot:after {
-  background-color: var(--embla-dot-color);
-  width: var(--embla-dot-size, 1.4rem);
-  height: var(--embla-dot-size, 1.4rem);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  content: '';
-}
-.embla__dot--selected {
-  --embla-dot-color: var(--text-body);
-}
 .carousel-provider {
   height: 100%;
 }

package/src/utils/__special_exceptions.ts

@@ -69,9 +69,15 @@ export function normalizeNodeForValidation(
 
   const recordData = node as NodeData<NodeDefaultAttribute>;
 
-  const attributes = isPlainObject(recordData.attributes)
-    ? (normalizeUnknownValue(recordData.attributes) as Record<string, unknown>)
-    : recordData.attributes;
+  let attributes: unknown = recordData.attributes;
+  // Common persisted mistake: attributes saved as an empty array (`[]`).
+  // Treat it as "no attributes" rather than failing validation.
+  if (Array.isArray(attributes) && attributes.length === 0) {
+    attributes = {};
+  }
+  attributes = isPlainObject(attributes)
+    ? (normalizeUnknownValue(attributes) as Record<string, unknown>)
+    : attributes;
 
   const children =
     recordData.children !== undefined

package/src/utils/analyseNodeByPatterns.ts

@@ -387,14 +387,24 @@ function validateAttributesByPattern(
     {}) as AttributeSchema;
   const styleSchema = getStyleSubSchema(schema);
 
-  // Validate nested `attributes.style` as an object; validate any style keys that also exist in schema.
   const maybeStyle = (attrs as Record<string, unknown>).style;
+  const maybeStyles = (attrs as Record<string, unknown>).styles;
+
+  // schemaVersion=2 requires `attributes.styles` (plural), not `attributes.style` (singular)
   if (maybeStyle != null) {
-    if (!isPlainObject(maybeStyle)) {
-      return fail(`style must be an object`, joinPath(path, 'style'));
+    return fail(
+      `Legacy attribute "style" detected. Use "styles" instead (schemaVersion=2). Found at ${joinPath(path, 'style')}`,
+      joinPath(path, 'style'),
+    );
+  }
+
+  // Validate nested `attributes.styles` (canonical store for AttributesEditor).
+  if (maybeStyles != null) {
+    if (!isPlainObject(maybeStyles)) {
+      return fail(`styles must be an object`, joinPath(path, 'styles'));
     }
     for (const [styleKey, styleValue] of Object.entries(
-      maybeStyle as Record<string, unknown>,
+      maybeStyles as Record<string, unknown>,
     )) {
       const spec = (styleSchema?.[styleKey] ?? schema?.[styleKey]) as
         | AttributeTypeSpec
@@ -404,14 +414,14 @@ function validateAttributesByPattern(
         pattern.pattern.type,
         styleValue,
         spec,
-        joinPath(joinPath(path, 'style'), styleKey),
+        joinPath(joinPath(path, 'styles'), styleKey),
       );
       if (!res.valid) return res;
     }
   }
 
   for (const [attrName, attrValue] of Object.entries(attrs)) {
-    if (attrName === 'style') continue;
+    if (attrName === 'style' || attrName === 'styles') continue;
     const attrSpec = schema?.[attrName] as AttributeTypeSpec | undefined;
     if (!attrSpec) {
       if (attrName === 'title' || attrName === 'description') {

package/src/utils/applyJsonTransform.ts

@@ -0,0 +1,19 @@
+export type ApplyJsonTransformResult =
+  | { ok: true; nextText: string; nextValue: unknown }
+  | { ok: false; error: string };
+
+export function applyJsonTransform(args: {
+  text: string;
+  transform: (value: unknown) => unknown;
+  indent?: number;
+}): ApplyJsonTransformResult {
+  const { text, transform, indent = 2 } = args;
+  try {
+    const parsed = JSON.parse(text) as unknown;
+    const nextValue = transform(parsed);
+    const nextText = JSON.stringify(nextValue, null, indent);
+    return { ok: true, nextText, nextValue };
+  } catch (e) {
+    return { ok: false, error: e instanceof Error ? e.message : String(e) };
+  }
+}

package/src/utils/novaToJson.ts

@@ -474,7 +474,7 @@ function mapDotsFromGeneralComponents(generalComponents: any[]): Node | null {
   };
 
   const inactiveDotOpacity = parseNumber(dotAttrs?.inactive_dot_opacity);
-  const expandingDotWidth = parseNumber(dotAttrs?.expanding_dot_width);
+  const dotThickness = parseNumber(dotAttrs?.dot_thickness);
   const dot_style =
     typeof dotAttrs?.dot_style === 'string'
       ? (dotAttrs.dot_style as string)
@@ -487,16 +487,20 @@ function mapDotsFromGeneralComponents(generalComponents: any[]): Node | null {
     typeof dotAttrs?.active_dot_color === 'string'
       ? (dotAttrs.active_dot_color as string)
       : undefined;
+  const inactive_dot_color =
+    typeof dotAttrs?.inactive_dot_color === 'string'
+      ? (dotAttrs.inactive_dot_color as string)
+      : undefined;
 
   const attributes: Record<string, unknown> = {};
   if (dotType) attributes.dotType = dotType;
   if (inactiveDotOpacity !== undefined)
     attributes.inactive_dot_opacity = inactiveDotOpacity;
-  if (expandingDotWidth !== undefined)
-    attributes.expanding_dot_width = expandingDotWidth;
+  if (dotThickness !== undefined) attributes.dot_thickness = dotThickness;
   if (dot_style) attributes.dot_style = dot_style;
   if (container_style) attributes.container_style = container_style;
   if (active_dot_color) attributes.active_dot_color = active_dot_color;
+  if (inactive_dot_color) attributes.inactive_dot_color = inactive_dot_color;
   return {
     type: 'OnboardDot',
     attributes: Object.keys(attributes).length ? attributes : undefined,

package/src/utils/repairNodeKeys.ts

@@ -0,0 +1,90 @@
+import type { Node, NodeData } from '../types/Node';
+import { generateRandomKeyForNode } from './generateRandomKeyForNode';
+
+function isNodeDataLike(value: unknown): value is NodeData {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    !Array.isArray(value) &&
+    'type' in (value as any) &&
+    'children' in (value as any)
+  );
+}
+
+function normalizeKey(value: unknown): string | undefined {
+  if (typeof value !== 'string') return undefined;
+  const trimmed = value.trim();
+  return trimmed.length > 0 ? trimmed : undefined;
+}
+
+function collectNodeKeysInto(node: Node, keys: Set<string>) {
+  if (node === null || node === undefined) return;
+  if (typeof node === 'string') return;
+  if (Array.isArray(node)) {
+    node.forEach((child) => collectNodeKeysInto(child, keys));
+    return;
+  }
+  if (!isNodeDataLike(node)) return;
+
+  const key = normalizeKey(node.key);
+  if (key) keys.add(key);
+  collectNodeKeysInto(node.children as Node, keys);
+}
+
+export function collectNodeKeys(root: Node): Set<string> {
+  const keys = new Set<string>();
+  collectNodeKeysInto(root, keys);
+  return keys;
+}
+
+function generateUniqueKey(type: string, usedKeys: Set<string>): string {
+  let next = '';
+  do {
+    next = generateRandomKeyForNode(type || 'Node');
+  } while (usedKeys.has(next));
+  return next;
+}
+
+/**
+ * Ensures that all NodeData-like records in the tree have unique non-empty `key`s.
+ * - Missing keys are generated.
+ * - Duplicate keys (against `usedKeys`) are repaired by generating a new unique key.
+ * - Non NodeData-like objects are left untouched.
+ *
+ * `usedKeys` is mutated by design (to track uniqueness across recursion).
+ */
+export function repairNodeKeys(
+  root: Node,
+  usedKeys: Set<string> = new Set(),
+): Node {
+  if (root === null || root === undefined) return root;
+  if (typeof root === 'string') return root;
+
+  if (Array.isArray(root)) {
+    let changed = false;
+    const next: Node[] = root.map((child): Node => {
+      const repaired: Node = repairNodeKeys(child, usedKeys);
+      if (repaired !== child) changed = true;
+      return repaired;
+    });
+    return changed ? next : root;
+  }
+
+  if (!isNodeDataLike(root)) return root;
+
+  const prev = root as NodeData;
+  const prevKey = normalizeKey(prev.key);
+  const needsNewKey = !prevKey || usedKeys.has(prevKey);
+  const nextKey = needsNewKey
+    ? generateUniqueKey(prev.type, usedKeys)
+    : prevKey;
+  usedKeys.add(nextKey);
+
+  const prevChildren = prev.children as Node;
+  const nextChildren = repairNodeKeys(prevChildren, usedKeys) as Node;
+
+  if (nextKey !== prevKey || nextChildren !== prevChildren) {
+    return { ...prev, key: nextKey, children: nextChildren } as Node;
+  }
+  return root;
+}

package/src/utils/safeJsonStringify.ts

@@ -0,0 +1,18 @@
+export function safeJsonStringify(value: unknown): string {
+  try {
+    const seen = new WeakSet<object>();
+    return JSON.stringify(
+      value,
+      (_key, v) => {
+        if (typeof v === 'object' && v !== null) {
+          if (seen.has(v as object)) return '[Circular]';
+          seen.add(v as object);
+        }
+        return v;
+      },
+      2,
+    );
+  } catch (e) {
+    return `<< Unable to stringify value: ${String(e)} >>`;
+  }
+}

package/src/utils/wrapNodeInMain.ts

@@ -0,0 +1,67 @@
+import type { Node, NodeData } from '../types/Node';
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+function isNodeData(value: unknown): value is NodeData {
+  return (
+    isRecord(value) && typeof value.type === 'string' && 'children' in value
+  );
+}
+
+function isMainLike(node: NodeData): boolean {
+  const t = node.type;
+  // Only treat actual Main nodes as "already wrapped".
+  // Some payloads may incorrectly carry `isMain: true` on non-Main nodes.
+  return t === 'Main' || t === 'main';
+}
+
+function stripNestedIsMain(node: Node, isRoot: boolean): Node {
+  if (node == null || typeof node === 'string') return node;
+
+  if (Array.isArray(node)) {
+    let changed = false;
+    const next = node.map((c) => {
+      const out = stripNestedIsMain(c, false);
+      if (out !== c) changed = true;
+      return out;
+    });
+    return changed ? next : node;
+  }
+
+  if (!isNodeData(node)) return node;
+
+  const prevChildren = node.children as Node;
+  const nextChildren = stripNestedIsMain(prevChildren, false);
+  const shouldDemote = node.isMain === true && !isRoot;
+
+  if (!shouldDemote && nextChildren === prevChildren) return node;
+
+  return {
+    ...(node as any),
+    ...(shouldDemote ? { isMain: false } : null),
+    children: nextChildren,
+  } as NodeData;
+}
+
+export function wrapNodeInMain(node: Node): NodeData {
+  if (isNodeData(node) && isMainLike(node)) {
+    // Ensure no nested nodes keep `isMain: true`.
+    const cleaned = stripNestedIsMain(node, true) as NodeData;
+    // Keep root as main.
+    if (cleaned.isMain !== true) return { ...(cleaned as any), isMain: true };
+    return cleaned;
+  }
+
+  const cleanedChild = stripNestedIsMain(node, false);
+  const children: Node =
+    node === null || typeof node === 'undefined' ? [] : cleanedChild;
+
+  return {
+    type: 'Main',
+    isMain: true,
+    attributes: {},
+    children,
+  };
+}