@developer_tribe/react-builder 1.2.19 → 1.2.20

package/src/build-components/OnboardDot/OnboardDot.tsx

@@ -20,8 +20,12 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
   const attributeName = node.type ?? 'OnboardDot';
   const attributeKey = node.key ?? generatedId;
   const attrs = node.attributes;
-  const styleBag = attrs?.style;
-  const dotType = attrs?.dotType || 'normal_dot';
+  const stylesBag =
+    ((attrs as any)?.styles as Record<string, unknown> | undefined) ??
+    ((attrs as any)?.style as Record<string, unknown> | undefined) ??
+    undefined;
+  const dotType =
+    (stylesBag?.dotType as any) ?? (attrs as any)?.dotType ?? 'normal_dot';
   const GHOST_DOT_DARK_COLOR = '#E4E5E7';
   const GHOST_DOT_LIGHT_COLOR = '#F7F7F9';
   const {
@@ -37,12 +41,32 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
   const inactiveDotColor = isDark
     ? GHOST_DOT_DARK_COLOR
     : GHOST_DOT_LIGHT_COLOR;
-  const inactiveDotOpacity = attrs?.inactive_dot_opacity ?? 0.3;
-  const activeDotColor = attrs?.active_dot_color;
+  const inactiveDotOpacity =
+    (stylesBag?.inactive_dot_opacity as number | undefined) ??
+    (attrs as any)?.inactive_dot_opacity ??
+    0.3;
+  const inactiveDotColorOverride =
+    (stylesBag?.inactive_dot_color as string | undefined) ??
+    (attrs as any)?.inactive_dot_color;
+  const activeDotColor =
+    (stylesBag?.active_dot_color as string | undefined) ??
+    (attrs as any)?.active_dot_color;
   const resolvedActiveDotColor = useMemo(
     () => parseColor(activeDotColor, { theme: appConfig.theme, projectColors }),
     [activeDotColor, appConfig.theme, projectColors],
   );
+  const resolvedInactiveDotColor = useMemo(() => {
+    const parsed = parseColor(inactiveDotColorOverride, {
+      theme: appConfig.theme,
+      projectColors,
+    });
+    return parsed ?? inactiveDotColor;
+  }, [
+    inactiveDotColor,
+    inactiveDotColorOverride,
+    appConfig.theme,
+    projectColors,
+  ]);
 
   const extractedStyle = useExtractViewStyle(node);
   const baseStyle = useMemo(() => {
@@ -58,27 +82,31 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
     baseStyle,
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,
   );
-  const expandingDotWidthRaw = attrs?.expanding_dot_width;
-  const expandingDotWidthOverride = useMemo(() => {
-    const parsed = parseSize(expandingDotWidthRaw);
-    if (parsed === undefined) return undefined;
-
-    // `parseSize` may return number (px) or a string (e.g. "50%").
-    const cssWidth =
-      typeof parsed === 'number'
-        ? `${parsed}px`
-        : typeof parsed === 'string'
-          ? parsed
-          : undefined;
-
-    if (!cssWidth) return undefined;
-
-    return {
-      // Controls the actual dot diameter (`.embla__dot:after`).
-      '--embla-dot-size': cssWidth,
-    } as React.CSSProperties & Record<`--${string}`, string>;
-  }, [expandingDotWidthRaw]);
-  const containerStyle = useMergedStyle(style, expandingDotWidthOverride);
+  const dotThicknessRaw =
+    (stylesBag?.dot_thickness as any) ?? (attrs as any)?.dot_thickness;
+  const dotSizeCss = useMemo((): string => {
+    const parsed = parseSize(dotThicknessRaw);
+    if (parsed === undefined) return '10px';
+    if (typeof parsed === 'number') return `${parsed}px`;
+    if (typeof parsed === 'string' && parsed.trim()) return parsed;
+    return '10px';
+  }, [dotThicknessRaw]);
+  const dotGapCss = useMemo((): string => {
+    // Prefer px math when possible; otherwise fall back to 10px/3.
+    const px =
+      typeof dotSizeCss === 'string' && dotSizeCss.trim().endsWith('px')
+        ? Number.parseFloat(dotSizeCss)
+        : Number.NaN;
+    const n = Number.isFinite(px) ? px : 10;
+    return `${Math.max(0, n / 3)}px`;
+  }, [dotSizeCss]);
+  const gapValue = (style as any)?.gap ?? dotGapCss;
+  const containerStyle = useMergedStyle(style, {
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: gapValue,
+    alignItems: 'center',
+  });
 
   const onboardApi = useContext(onboardContext);
   const emblaApi = onboardApi?.emblaApi;
@@ -115,16 +143,12 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
     >
       {scrollSnaps.map((snap, index) => {
         const isDotSelected = selectedIndex === index;
-        const dotStyles: React.CSSProperties & Record<`--${string}`, string> = {
-          opacity: isDotSelected ? 1 : inactiveDotOpacity,
-        };
-
-        if (resolvedActiveDotColor && isDotSelected) {
-          // Style the actual visual dot (rendered via `.embla__dot:after`) using a CSS variable.
-          dotStyles['--embla-dot-color'] = resolvedActiveDotColor;
-        } else if (!isDotSelected) {
-          dotStyles['--embla-dot-color'] = inactiveDotColor;
-        }
+        const resolvedColor =
+          isDotSelected && resolvedActiveDotColor
+            ? resolvedActiveDotColor
+            : resolvedInactiveDotColor;
+        const activeFallback = '#007AFF';
+        const dotColor = resolvedColor ?? activeFallback;
 
         return (
           <button
@@ -132,13 +156,23 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
             onClick={() => {
               emblaApi?.scrollTo(snap);
             }}
-            className={`embla__dot ${isDotSelected ? 'embla__dot--selected' : ''}`}
-            style={dotStyles}
+            className="embla__dot"
+            style={{
+              width: dotSizeCss,
+              height: dotSizeCss,
+              backgroundColor: dotColor,
+              opacity: isDotSelected ? 1 : inactiveDotOpacity,
+              borderRadius: '9999px',
+              border: 0,
+              padding: 0,
+              margin: 0,
+              display: 'inline-block',
+              cursor: 'pointer',
+              boxSizing: 'border-box',
+            }}
             aria-label={`Go to slide ${index + 1}`}
             aria-current={isDotSelected ? 'true' : undefined}
-          >
-            {/* Dot visuals are rendered via CSS (`.embla__dot:after`). */}
-          </button>
+          />
         );
       })}
     </div>

package/src/build-components/OnboardDot/OnboardDotProps.generated.ts

@@ -69,8 +69,9 @@ export interface OnboardDotPropsGenerated {
     title?: string;
     description?: string;
     dotType?: DotTypeOptionType;
+    dot_thickness?: string;
     inactive_dot_opacity?: number;
-    expanding_dot_width?: string;
+    inactive_dot_color?: string;
     active_dot_color?: string;
     flexDirection?: never;
     alignItems?: never;

package/src/build-components/OnboardDot/pattern.json

@@ -15,18 +15,29 @@
         "sliding_dot",
         "liquid_like"
       ],
+      "dot_thickness": "size",
       "inactive_dot_opacity": "number",
-      "expanding_dot_width": "size",
+      "inactive_dot_color": "color",
       "active_dot_color": "color",
       "flexDirection": "never",
       "alignItems": "never",
       "justifyContent": "never"
     }
   },
+  "defaults": {
+    "dotType": "expanding_dot",
+    "dot_thickness": 10,
+    "inactive_dot_opacity": 0.3,
+    "active_dot_color": "#007AFF",
+    "style": {
+      "flexDirection": "row",
+      "alignItems": "center",
+      "justifyContent": "center",
+      "gap": "12@s"
+    }
+  },
   "meta": {
-    "desiredParent": [
-      ">OnboardProvider"
-    ],
+    "desiredParent": [">OnboardProvider"],
     "label": "Onboard Dot",
     "description": "Renders onboarding progress dots.",
     "styles": {
@@ -42,21 +53,28 @@
         "description": "Opacity for inactive dots.",
         "category": "style",
         "specialCategory": null,
-        "sort": 2
+        "sort": 3
       },
-      "expanding_dot_width": {
-        "label": "Expanding Dot Width",
-        "description": "Width used while expanding.",
+      "inactive_dot_color": {
+        "label": "Inactive Dot Color",
+        "description": "Color of inactive dots.",
         "category": "style",
         "specialCategory": null,
-        "sort": 3
+        "sort": 4
+      },
+      "dot_thickness": {
+        "label": "Dot Thickness",
+        "description": "Dot size/diameter.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 2
       },
       "active_dot_color": {
         "label": "Active Dot Color",
         "description": "Color of the active dot.",
         "category": "style",
         "specialCategory": null,
-        "sort": 4
+        "sort": 5
       }
     }
   }

package/src/build-components/patterns.generated.ts

@@ -6103,8 +6103,9 @@ export const patterns = [
           'sliding_dot',
           'liquid_like',
         ],
+        dot_thickness: 'size',
         inactive_dot_opacity: 'number',
-        expanding_dot_width: 'size',
+        inactive_dot_color: 'color',
         active_dot_color: 'color',
         flexDirection: 'never',
         alignItems: 'never',
@@ -6169,21 +6170,28 @@ export const patterns = [
           description: 'Opacity for inactive dots.',
           category: 'style',
           specialCategory: null,
-          sort: 2,
+          sort: 3,
         },
-        expanding_dot_width: {
-          label: 'Expanding Dot Width',
-          description: 'Width used while expanding.',
+        inactive_dot_color: {
+          label: 'Inactive Dot Color',
+          description: 'Color of inactive dots.',
           category: 'style',
           specialCategory: null,
-          sort: 3,
+          sort: 4,
+        },
+        dot_thickness: {
+          label: 'Dot Thickness',
+          description: 'Dot size/diameter.',
+          category: 'style',
+          specialCategory: null,
+          sort: 2,
         },
         active_dot_color: {
           label: 'Active Dot Color',
           description: 'Color of the active dot.',
           category: 'style',
           specialCategory: null,
-          sort: 4,
+          sort: 5,
         },
       },
       attributes: {
@@ -6440,13 +6448,20 @@ export const patterns = [
     },
     defaults: {
       style: {
-        flexDirection: 'column',
+        flexDirection: 'row',
         position: 'relative',
         zIndex: 1,
         alignSelf: 'flex-start',
         flexGrow: 0,
         flexShrink: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '12@s',
       },
+      dotType: 'expanding_dot',
+      dot_thickness: 10,
+      inactive_dot_opacity: 0.3,
+      active_dot_color: '#007AFF',
     },
     types: {},
   },

package/src/build-components/useNode.ts

@@ -9,18 +9,33 @@ export default function useNode<
   if (!defaults) return node;
   const nodeAttributes = ((node.attributes as T) ?? ({} as T)) as T & {
     style?: Record<string, unknown>;
+    styles?: Record<string, unknown>;
   };
   const defaultAttributes = defaults as T as T & {
     style?: Record<string, unknown>;
+    styles?: Record<string, unknown>;
+  };
+  // Merge style from both defaults.style and defaults.styles (for schemaVersion=2 compatibility)
+  const defaultStyle = {
+    ...(defaultAttributes?.styles ?? {}),
+    ...(defaultAttributes?.style ?? {}),
+  };
+  // Merge node style from both node.attributes.style and node.attributes.styles
+  const nodeStyle = {
+    ...(nodeAttributes?.styles ?? {}),
+    ...(nodeAttributes?.style ?? {}),
+  };
+  const mergedStyle = {
+    ...defaultStyle,
+    ...nodeStyle,
   };
   const mergedAttributes: T = {
     ...(defaultAttributes as T),
     ...(nodeAttributes as T),
     // Deep merge `style` so default style values aren't lost when the node provides partial style overrides.
-    style: {
-      ...(defaultAttributes?.style ?? {}),
-      ...(nodeAttributes?.style ?? {}),
-    },
+    // Keep both `style` (for runtime back-compat) and `styles` (for editor schemaVersion=2) in sync.
+    style: mergedStyle,
+    styles: mergedStyle,
   } as T;
   if (
     mergedAttributes &&
@@ -29,6 +44,7 @@ export default function useNode<
     Object.keys((mergedAttributes as any).style).length === 0
   ) {
     delete (mergedAttributes as any).style;
+    delete (mergedAttributes as any).styles;
   }
   return { ...node, attributes: mergedAttributes };
 }

package/src/pages/DebugJsonPage.tsx

@@ -1,11 +1,17 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import type { Node } from '../types/Node';
+import type { NodeData, NodeDefaultAttribute } from '../types/Node';
 import type { AppConfig } from '../types/PreviewConfig';
 import { Checkbox } from '../components/Checkbox';
 import { JsonTextEditor } from '../components/JsonTextEditor';
 import { analyseAndProccess } from '../utils/analyseNode';
 import { logRenderStore } from '../utils/logRenderStore';
 import { useRenderStore } from '../store';
+import {
+  isNodeArray,
+  isNodeNullOrUndefined,
+  isNodeString,
+} from '../utils/nodeGuards';
 
 export type DebugJsonPageProps = {
   data: Node | null | undefined;
@@ -58,6 +64,68 @@ export function DebugJsonPage({
     return value as Node;
   };
 
+  function isPlainObject(value: unknown): value is Record<string, unknown> {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+  }
+
+  function migrateStyleToStyles(node: Node): Node {
+    if (isNodeNullOrUndefined(node) || isNodeString(node)) {
+      return node;
+    }
+    if (isNodeArray(node)) {
+      const arr = node as Node[];
+      return arr.map((n) => migrateStyleToStyles(n));
+    }
+    if (!isPlainObject(node)) {
+      return node;
+    }
+
+    const record = node as unknown as NodeData<NodeDefaultAttribute>;
+    const nextChildren = migrateStyleToStyles(record.children);
+
+    if (!isPlainObject(record.attributes)) {
+      return { ...record, children: nextChildren };
+    }
+
+    const attrs = { ...record.attributes };
+    if ('style' in attrs && isPlainObject(attrs.style)) {
+      attrs.styles = attrs.style;
+      delete attrs.style;
+    }
+
+    return {
+      ...record,
+      children: nextChildren,
+      attributes: attrs,
+    };
+  }
+
+  const hasStyleAttribute = useMemo(() => {
+    function checkNode(n: Node): boolean {
+      if (isNodeNullOrUndefined(n) || isNodeString(n)) return false;
+      if (isNodeArray(n)) {
+        const arr = n as Node[];
+        return arr.some(checkNode);
+      }
+      if (!isPlainObject(n)) return false;
+      const record = n as unknown as NodeData<NodeDefaultAttribute>;
+      if (isPlainObject(record.attributes) && 'style' in record.attributes) {
+        return true;
+      }
+      return checkNode(record.children);
+    }
+    return checkNode(data);
+  }, [data]);
+
+  const handleFixStyleToStyles = () => {
+    if (!data) return;
+    const migrated = migrateStyleToStyles(data);
+    // Don't call analyseAndProccess here - let the user apply changes manually
+    // This avoids validation errors for unknown attributes that may exist
+    setData(migrated as Node);
+    setCurrent(migrated as Node);
+  };
+
   return (
     <>
       <div className="modal__header localication-modal__header">
@@ -87,6 +155,17 @@ export function DebugJsonPage({
           Log store
         </button>
 
+        {hasStyleAttribute ? (
+          <button
+            type="button"
+            className="editor-button"
+            title="Migrate attributes.style to attributes.styles (schemaVersion=2)"
+            onClick={handleFixStyleToStyles}
+          >
+            Fix style → styles
+          </button>
+        ) : null}
+
         {onClose ? (
           <button
             type="button"

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/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/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,