@developer_tribe/react-builder 1.0.8 → 1.0.9

package/src/components/ParamsProvider.tsx

@@ -6,6 +6,11 @@ export type OtherParams = Record<string, string | boolean | number>;
 export type ParamsContextValue = {
   localizationParams: LocalizationParams;
   otherParams: OtherParams;
+  /**
+   * `true` when the value comes from an actual `<ParamsProvider />` in the tree.
+   * Used to detect nesting vs the default context value.
+   */
+  isProvided: boolean;
 };
 
 export type ParamsProviderProps = {
@@ -17,6 +22,7 @@ export type ParamsProviderProps = {
 export const ParamsContext = createContext<ParamsContextValue>({
   localizationParams: {},
   otherParams: {},
+  isProvided: false,
 });
 
 export function ParamsProvider({
@@ -28,6 +34,7 @@ export function ParamsProvider({
     () => ({
       localizationParams: localizationParams ?? {},
       otherParams: otherParams ?? {},
+      isProvided: true,
     }),
     [localizationParams, otherParams],
   );

package/src/components/RenderErrorBoundary.tsx

@@ -0,0 +1,200 @@
+import React from 'react';
+
+export type RenderErrorBoundaryProps = {
+  children: React.ReactNode;
+  /**
+   * Optional label to show under the title, to help identify which preview crashed
+   * (e.g. "caught by BuilderProvider" vs "caught by ProjectDebug").
+   */
+  subtitle?: string;
+  /** Optional callback invoked when an error is caught. */
+  onError?: (error: Error, componentStack?: string) => void;
+};
+
+type RenderErrorBoundaryState = {
+  error: Error | null;
+  errorStack?: string;
+  componentStack?: string;
+  copied?: boolean;
+  copyError?: string | null;
+};
+
+export class RenderErrorBoundary extends React.Component<
+  RenderErrorBoundaryProps,
+  RenderErrorBoundaryState
+> {
+  state: RenderErrorBoundaryState = {
+    error: null,
+    errorStack: undefined,
+    componentStack: undefined,
+    copied: false,
+    copyError: null,
+  };
+
+  static getDerivedStateFromError(
+    error: Error,
+  ): Partial<RenderErrorBoundaryState> {
+    return {
+      error,
+      errorStack: error?.stack,
+      copied: false,
+      copyError: null,
+    };
+  }
+
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
+    const componentStack =
+      (info as unknown as { componentStack?: string })?.componentStack ??
+      undefined;
+
+    this.setState({
+      error,
+      errorStack: error?.stack,
+      componentStack,
+    });
+
+    this.props.onError?.(error, componentStack);
+  }
+
+  private buildDetails(): string {
+    const { error, errorStack, componentStack } = this.state;
+    return [
+      `Error: ${error?.message ?? ''}`,
+      '',
+      errorStack ? `Stack:\n${errorStack}` : 'Stack: (missing)',
+      '',
+      componentStack
+        ? `React component stack:\n${componentStack}`
+        : 'React component stack: (missing)',
+    ].join('\n');
+  }
+
+  private copyDetails = async () => {
+    const details = this.buildDetails();
+
+    try {
+      if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(details);
+        this.setState({ copied: true, copyError: null });
+        window.setTimeout(() => this.setState({ copied: false }), 900);
+        return;
+      }
+    } catch {
+      // fall through to legacy method
+    }
+
+    try {
+      if (typeof document === 'undefined') {
+        this.setState({ copied: false, copyError: 'Copy failed' });
+        return;
+      }
+      const el = document.createElement('textarea');
+      el.value = details;
+      el.setAttribute('readonly', 'true');
+      el.style.position = 'fixed';
+      el.style.opacity = '0';
+      document.body.appendChild(el);
+      el.select();
+      const ok = document.execCommand('copy');
+      document.body.removeChild(el);
+      if (!ok) {
+        this.setState({ copied: false, copyError: 'Copy failed' });
+        return;
+      }
+      this.setState({ copied: true, copyError: null });
+      window.setTimeout(() => this.setState({ copied: false }), 900);
+    } catch (e) {
+      this.setState({
+        copied: false,
+        copyError: e instanceof Error ? e.message : 'Copy failed',
+      });
+    }
+  };
+
+  private reset = () => {
+    this.setState({
+      error: null,
+      errorStack: undefined,
+      componentStack: undefined,
+      copied: false,
+      copyError: null,
+    });
+  };
+
+  render() {
+    const { error, copied, copyError } = this.state;
+    if (!error) return this.props.children;
+
+    const details = this.buildDetails();
+
+    return (
+      <div
+        role="alert"
+        style={{
+          padding: 16,
+          borderRadius: 12,
+          background: 'hsl(var(--card, var(--rb-card, 0 0% 100%)))',
+          color:
+            'hsl(var(--card-foreground, var(--rb-card-foreground, 220.9 39.3% 11%)))',
+          border:
+            '1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)) / 0.9)',
+        }}
+      >
+        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+          <div style={{ fontWeight: 700 }}>Preview crashed</div>
+          {this.props.subtitle && (
+            <div style={{ opacity: 0.8, fontSize: 12 }}>
+              ({this.props.subtitle})
+            </div>
+          )}
+          <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
+            <button
+              type="button"
+              className="editor-button"
+              onClick={this.copyDetails}
+            >
+              {copied ? 'Copied' : 'Copy details'}
+            </button>
+            <button
+              type="button"
+              className="editor-button"
+              onClick={this.reset}
+            >
+              Try again
+            </button>
+          </div>
+        </div>
+
+        {copyError && (
+          <div
+            style={{
+              marginTop: 8,
+              color:
+                'hsl(var(--destructive, var(--rb-destructive, 0 84.2% 60.2%)))',
+              fontSize: 12,
+            }}
+          >
+            {copyError}
+          </div>
+        )}
+
+        <pre
+          style={{
+            marginTop: 12,
+            whiteSpace: 'pre-wrap',
+            wordBreak: 'break-word',
+            fontSize: 12,
+            lineHeight: 1.4,
+            background: 'hsl(var(--muted, var(--rb-muted, 220 14.3% 95.9%)))',
+            padding: 12,
+            borderRadius: 10,
+            overflow: 'auto',
+            maxHeight: 360,
+          }}
+        >
+          {details}
+        </pre>
+      </div>
+    );
+  }
+}

package/src/hooks/useParams.ts

@@ -3,6 +3,10 @@ import { ParamsContext } from '../components/ParamsProvider';
 
 export function useParams() {
   return (
-    useContext(ParamsContext) ?? { localizationParams: {}, otherParams: {} }
+    useContext(ParamsContext) ?? {
+      localizationParams: {},
+      otherParams: {},
+      isProvided: false,
+    }
   );
 }

package/src/hooks/useSyncHtmlThemeClass.ts

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+import { useRenderStore } from '../store';
+
+/**
+ * Syncs the builder's `appConfig.theme` to the DOM so CSS can react to `.dark`.
+ *
+ * - Uses `html.dark` as the toggle (shadcn/tailwind convention).
+ * - Also toggles `html.light` so system dark can be overridden back to light.
+ */
+export function useSyncHtmlThemeClass() {
+  const theme = useRenderStore((s) => s.appConfig.theme);
+
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+    const root = document.documentElement;
+    root.classList.toggle('dark', theme === 'dark');
+    root.classList.toggle('light', theme === 'light');
+  }, [theme]);
+}

package/src/index.native.ts

@@ -57,6 +57,13 @@ export {
 export { novaToJson } from './utils/novaToJson';
 export { getDevices, getDefaultDevice } from './utils/getDevices';
 export { querySelector } from './utils/querySelector';
+export {
+  getImage,
+  TRIBE_ASSETS_BASE_URL,
+  TribeAssetName,
+  parseTribeAssetName,
+  resolveImageSrc,
+} from './utils/getImage';
 export {
   getPatternByType,
   getAttributeSchema,

package/src/index.ts

@@ -8,6 +8,7 @@ export {
 } from './components/BuilderProvider';
 export { ParamsProvider } from './components/ParamsProvider';
 export { LocalizationParamsProvider } from './components/LocalizationParamsProvider';
+export { RenderErrorBoundary } from './components/RenderErrorBoundary';
 export { useParams } from './hooks/useParams';
 export { useLocalizationParams } from './hooks/useLocalizationParams';
 export { useLocalize } from './hooks/useLocalize';
@@ -39,6 +40,13 @@ export { querySelector } from './utils/querySelector';
 export { extractViewStyle } from './utils/extractViewStyle';
 export { extractImageStyle } from './utils/extractImageStyle';
 export { extractTextStyle } from './utils/extractTextStyle';
+export {
+  getImage,
+  TRIBE_ASSETS_BASE_URL,
+  TribeAssetName,
+  parseTribeAssetName,
+  resolveImageSrc,
+} from './utils/getImage';
 export { ProjectPage } from './pages/ProjectPage';
 export type { ProjectPageProps } from './pages/ProjectPage';
 export { copyNode } from './utils/copyNode';

package/src/migrations/migratePipe.ts

@@ -0,0 +1,59 @@
+import type { Project } from '../types/Project';
+import type { Migration } from './types';
+import { isSemverLess } from './semver';
+import { migration_1_1_0_normalize_style_attributes } from './migrations/1.1.0_normalize_style_attributes';
+
+export const CURRENT_PROJECT_VERSION = '1.1.0';
+
+const MIGRATIONS: Migration[] = [migration_1_1_0_normalize_style_attributes];
+
+export type MigrationPipe = {
+  projectVersion: string;
+  requiredVersion: string;
+  required: boolean;
+  pending: Migration[];
+};
+
+export function getMigrationPipe(
+  project: Pick<Project, 'version'>,
+): MigrationPipe {
+  const projectVersion =
+    typeof project?.version === 'string' && project.version.trim()
+      ? project.version
+      : '0.0.0';
+
+  const required = isSemverLess(projectVersion, CURRENT_PROJECT_VERSION);
+
+  const pending = required
+    ? MIGRATIONS.filter((m) => isSemverLess(projectVersion, m.toVersion))
+    : [];
+
+  return {
+    projectVersion,
+    requiredVersion: CURRENT_PROJECT_VERSION,
+    required,
+    pending,
+  };
+}
+
+export function runProjectMigrations(project: Project): {
+  project: Project;
+  applied: Migration[];
+} {
+  const pipe = getMigrationPipe(project);
+  let next = project;
+  const applied: Migration[] = [];
+
+  for (const m of pipe.pending) {
+    if (isSemverLess(next.version, m.toVersion)) {
+      next = m.run(next);
+      applied.push(m);
+    }
+  }
+
+  if (isSemverLess(next.version, CURRENT_PROJECT_VERSION)) {
+    next = { ...next, version: CURRENT_PROJECT_VERSION };
+  }
+
+  return { project: next, applied };
+}

package/src/migrations/migrations/1.1.0_normalize_style_attributes.ts

@@ -0,0 +1,80 @@
+import type { Project } from '../../types/Project';
+import type { Node, NodeData, NodeDefaultAttribute } from '../../types/Node';
+import {
+  isEmptyObject,
+  isNodeArray,
+  isNodeNullOrUndefined,
+  isNodeString,
+} from '../../utils/nodeGuards';
+import { getAttributeSchema } from '../../utils/patterns';
+import type { Migration } from '../types';
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+function buildStyleKeySet(): Set<string> {
+  const viewSchema = getAttributeSchema('View') ?? {};
+  const textSchema = getAttributeSchema('Text') ?? {};
+  return new Set([...Object.keys(viewSchema), ...Object.keys(textSchema)]);
+}
+
+function migrateNode(node: Node, styleKeys: Set<string>): Node {
+  if (
+    isNodeNullOrUndefined(node) ||
+    isNodeString(node) ||
+    isEmptyObject(node)
+  ) {
+    return node;
+  }
+  if (isNodeArray(node)) {
+    return (node as Node[]).map((n) => migrateNode(n, styleKeys));
+  }
+
+  const record = node as NodeData<NodeDefaultAttribute>;
+  const nextChildren = migrateNode(record.children as Node, styleKeys);
+
+  if (!isPlainObject(record.attributes)) {
+    return { ...record, children: nextChildren };
+  }
+
+  const nextAttrs: Record<string, unknown> = { ...(record.attributes ?? {}) };
+
+  const prevStyle = isPlainObject(nextAttrs.style) ? nextAttrs.style : {};
+  const nextStyle: Record<string, unknown> = { ...prevStyle };
+
+  for (const [k, v] of Object.entries(nextAttrs)) {
+    if (k === 'style') continue;
+    if (!styleKeys.has(k)) continue;
+
+    // If already set in style, prefer style (drop legacy flat key).
+    if (!(k in nextStyle)) nextStyle[k] = v;
+    delete nextAttrs[k];
+  }
+
+  if (Object.keys(nextStyle).length > 0) {
+    nextAttrs.style = nextStyle;
+  }
+
+  return {
+    ...record,
+    children: nextChildren,
+    attributes: nextAttrs as NodeDefaultAttribute,
+  };
+}
+
+export const migration_1_1_0_normalize_style_attributes: Migration = {
+  id: '1.1.0-normalize-style-attributes',
+  title: 'Normalize legacy style attributes into attributes.style',
+  fromVersion: '0.0.0',
+  toVersion: '1.1.0',
+  run: (project: Project): Project => {
+    const styleKeys = buildStyleKeySet();
+    const nextData = migrateNode(project.data as unknown as Node, styleKeys);
+    return {
+      ...project,
+      version: '1.1.0',
+      data: nextData as any,
+    };
+  },
+};

package/src/migrations/semver.ts

@@ -0,0 +1,24 @@
+export type Semver = { major: number; minor: number; patch: number };
+
+export function parseSemver(input?: string | null): Semver {
+  const raw = typeof input === 'string' ? input.trim() : '';
+  const [maj, min, pat] = raw.split('.').slice(0, 3);
+  const toNum = (v?: string) => {
+    const n = Number(String(v ?? '').replace(/[^\d].*$/, ''));
+    return Number.isFinite(n) ? n : 0;
+  };
+  return { major: toNum(maj), minor: toNum(min), patch: toNum(pat) };
+}
+
+export function compareSemver(a: string, b: string): number {
+  const A = parseSemver(a);
+  const B = parseSemver(b);
+  if (A.major !== B.major) return A.major < B.major ? -1 : 1;
+  if (A.minor !== B.minor) return A.minor < B.minor ? -1 : 1;
+  if (A.patch !== B.patch) return A.patch < B.patch ? -1 : 1;
+  return 0;
+}
+
+export function isSemverLess(a: string, b: string): boolean {
+  return compareSemver(a, b) < 0;
+}

package/src/migrations/types.ts

@@ -0,0 +1,9 @@
+import type { Project } from '../types/Project';
+
+export type Migration = {
+  id: string;
+  title: string;
+  fromVersion: string;
+  toVersion: string;
+  run: (project: Project) => Project;
+};

package/src/mockOS/components/PermissionModal.tsx

@@ -84,7 +84,8 @@ export const PermissionModal: React.FC<PermissionModalProps> = ({
       >
         <div
           style={{
-            backgroundColor: 'rgba(255, 255, 255, 0.95)',
+            backgroundColor:
+              'hsl(var(--card, var(--rb-card, 0 0% 100%)) / 0.95)',
             borderRadius: 14,
             width: '100%',
             maxWidth: 270,
@@ -187,7 +188,7 @@ export const PermissionModal: React.FC<PermissionModalProps> = ({
     >
       <div
         style={{
-          backgroundColor: '#FFFFFF',
+          backgroundColor: 'hsl(var(--card, var(--rb-card, 0 0% 100%)))',
           borderRadius: 4,
           width: '100%',
           maxWidth: 280,