@developer_tribe/react-builder 1.2.8 → 1.2.9

package/src/styles/components/_mockos-router.scss

@@ -141,3 +141,391 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+// ------------------------------------------------------------
+// MockOS "OS alert" modals (Permission + Subscription)
+// - Theme-aware via builder tokens (see `foundation/_colors.scss`)
+// ------------------------------------------------------------
+
+.mockos-modal-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  z-index: 9999;
+  background-color: rgba(0, 0, 0, var(--mockos-overlay-alpha, 0.5));
+}
+
+.mockos-modal-overlay--ios {
+  --mockos-overlay-alpha: 0.4;
+}
+
+.mockos-modal-overlay--android {
+  --mockos-overlay-alpha: 0.5;
+}
+
+.mockos-modal-overlay--center {
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.mockos-modal-overlay--bottom {
+  align-items: flex-end;
+  justify-content: stretch;
+  padding: 0;
+}
+
+.mockos-permission-modal {
+  width: 100%;
+}
+
+.mockos-permission-modal--ios {
+  max-width: 270px;
+  overflow: hidden;
+  border-radius: 14px;
+  background-color: hsl(var(--card, var(--rb-card, 0 0% 100%)) / 0.95);
+  backdrop-filter: blur(20px);
+}
+
+.mockos-permission-modal--android {
+  max-width: 280px;
+  border-radius: 4px;
+  background-color: colors.$surfaceColor;
+  box-shadow:
+    0 11px 15px -7px rgba(0, 0, 0, 0.2),
+    0 24px 38px 3px rgba(0, 0, 0, 0.14);
+}
+
+.mockos-permission-modal__content {
+  padding: 20px 16px;
+}
+
+.mockos-permission-modal__content--center {
+  text-align: center;
+}
+
+.mockos-permission-modal__title {
+  font-size: 17px;
+  font-weight: 600;
+  color: colors.$textColor;
+  margin-bottom: 8px;
+  line-height: 1.3;
+}
+
+.mockos-permission-modal__title--android {
+  font-size: 20px;
+  font-weight: 500;
+  margin-bottom: 16px;
+  line-height: 1.2;
+}
+
+.mockos-permission-modal__message {
+  font-size: 13px;
+  line-height: 1.4;
+  color: hsl(
+    var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%))
+  );
+}
+
+.mockos-permission-modal__message--android {
+  font-size: 16px;
+  line-height: 1.5;
+}
+
+.mockos-permission-modal__actions {
+  display: flex;
+}
+
+.mockos-permission-modal__actions--ios {
+  border-top: 0.5px solid
+    hsl(var(--border, var(--rb-border, 220 13% 91%)) / 0.65);
+}
+
+.mockos-permission-modal__actions--android {
+  padding: 8px 8px 8px 0;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.mockos-permission-modal__button {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font: inherit;
+}
+
+.mockos-permission-modal__button--ios {
+  flex: 1;
+  padding: 11px 0;
+  font-size: 17px;
+  font-weight: 400;
+  color: hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));
+}
+
+.mockos-permission-modal__actions--ios
+  .mockos-permission-modal__button--ios:first-child {
+  border-right: 0.5px solid
+    hsl(var(--border, var(--rb-border, 220 13% 91%)) / 0.65);
+}
+
+.mockos-permission-modal__button--bold {
+  font-weight: 600;
+}
+
+.mockos-permission-modal__button--android {
+  padding: 8px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.mockos-permission-modal__button--deny {
+  color: hsl(
+    var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%))
+  );
+}
+
+.mockos-permission-modal__button--allow {
+  color: hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));
+}
+
+.mockos-subscription-sheet {
+  width: 100%;
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+  overflow: hidden;
+  padding-bottom: max(12px, env(safe-area-inset-bottom));
+  transform: translateY(0);
+  background-color: colors.$surfaceColor;
+}
+
+.mockos-subscription-sheet--ios {
+  background-color: hsl(var(--card, var(--rb-card, 0 0% 100%)) / 0.96);
+  backdrop-filter: blur(20px);
+  box-shadow:
+    0 -12px 30px rgba(0, 0, 0, 0.18),
+    0 -2px 6px rgba(0, 0, 0, 0.08);
+}
+
+.mockos-subscription-sheet--android {
+  box-shadow:
+    0 -10px 20px rgba(0, 0, 0, 0.22),
+    0 -2px 6px rgba(0, 0, 0, 0.14);
+}
+
+.mockos-subscription-sheet__handle {
+  width: 44px;
+  height: 5px;
+  border-radius: 999px;
+  background-color: hsl(
+    var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.18
+  );
+  margin: 10px auto 0;
+}
+
+.mockos-subscription-sheet__content {
+  padding: 14px 16px 10px;
+}
+
+.mockos-subscription-sheet__content--ios {
+  padding: 10px 16px 10px;
+  text-align: center;
+}
+
+.mockos-subscription-sheet__top-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 6px;
+}
+
+.mockos-subscription-sheet__android-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.mockos-subscription-sheet__close {
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  border: none;
+  background: hsl(
+    var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.06
+  );
+  color: hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.55);
+  font-size: 18px;
+  line-height: 28px;
+  cursor: pointer;
+}
+
+.mockos-subscription-sheet__title {
+  font-weight: 600;
+  color: colors.$textColor;
+}
+
+.mockos-subscription-sheet__title--ios {
+  font-size: 15px;
+  margin-bottom: 8px;
+  line-height: 1.3;
+  letter-spacing: 0.2px;
+}
+
+.mockos-subscription-sheet__title--android {
+  font-size: 16px;
+}
+
+.mockos-subscription-sheet__subtitle {
+  color: hsl(
+    var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%))
+  );
+  line-height: 1.5;
+}
+
+.mockos-subscription-sheet__subtitle--ios {
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.mockos-subscription-sheet__subtitle--android {
+  margin-top: 8px;
+  font-size: 14px;
+}
+
+.mockos-subscription-sheet__card {
+  margin-top: 12px;
+  padding: 10px 12px;
+  background: hsl(
+    var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.04
+  );
+  text-align: left;
+}
+
+.mockos-subscription-sheet__card--ios {
+  border-radius: 12px;
+}
+
+.mockos-subscription-sheet__card--android {
+  margin-top: 14px;
+  border-radius: 10px;
+  border: 1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)) / 0.7);
+}
+
+.mockos-subscription-sheet__row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.mockos-subscription-sheet__row--space-between {
+  justify-content: space-between;
+}
+
+.mockos-subscription-sheet__icon {
+  width: 38px;
+  height: 38px;
+  border-radius: 10px;
+  background: linear-gradient(
+    135deg,
+    rgba(0, 122, 255, 0.25),
+    rgba(88, 86, 214, 0.22)
+  );
+  border: 1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)) / 0.7);
+}
+
+.mockos-subscription-sheet__meta {
+  flex: 1;
+  min-width: 0;
+}
+
+.mockos-subscription-sheet__meta--android {
+  min-width: 0;
+}
+
+.mockos-subscription-sheet__product-id {
+  font-size: 14px;
+  font-weight: 600;
+  color: hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.9);
+  line-height: 1.2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mockos-subscription-sheet__meta-subtitle {
+  margin-top: 2px;
+  font-size: 12px;
+  color: hsl(
+    var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%)) / 0.95
+  );
+}
+
+.mockos-subscription-sheet__price {
+  font-size: 13px;
+  font-weight: 700;
+  color: hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.86);
+}
+
+.mockos-subscription-sheet__actions {
+  display: flex;
+}
+
+.mockos-subscription-sheet__actions--ios {
+  border-top: 0.5px solid
+    hsl(var(--border, var(--rb-border, 220 13% 91%)) / 0.6);
+}
+
+.mockos-subscription-sheet__actions--android {
+  padding: 10px 12px 12px;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.mockos-subscription-sheet__action {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font: inherit;
+}
+
+.mockos-subscription-sheet__action--ios {
+  flex: 1;
+  padding: 13px 0;
+  font-size: 17px;
+  font-weight: 400;
+  color: hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));
+}
+
+.mockos-subscription-sheet__actions--ios
+  .mockos-subscription-sheet__action--ios:first-child {
+  border-right: 0.5px solid
+    hsl(var(--border, var(--rb-border, 220 13% 91%)) / 0.6);
+}
+
+.mockos-subscription-sheet__action--bold {
+  font-weight: 600;
+}
+
+.mockos-subscription-sheet__action--android {
+  padding: 10px 16px;
+  font-size: 14px;
+  font-weight: 600;
+  border-radius: 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.mockos-subscription-sheet__action--cancel {
+  color: hsl(
+    var(--muted-foreground, var(--rb-muted-foreground, 220 8.9% 46.1%))
+  );
+}
+
+.mockos-subscription-sheet__action--primary {
+  color: hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)));
+  background: hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)) / 0.12);
+  border-radius: 999px;
+  font-weight: 700;
+}

package/src/styles/components/_onboard.scss

@@ -0,0 +1,23 @@
+/* Onboard components */
+
+.onboard__separator {
+  height: 1px;
+  width: 100%;
+}
+
+.onboard__buttons {
+  display: flex;
+  height: 40px;
+  gap: 12px;
+  align-items: center;
+  justify-content: center;
+  margin: 12px 24px;
+}
+
+.onboard__buttons--row {
+  flex-direction: row;
+}
+
+.onboard__buttons--column {
+  flex-direction: column;
+}

package/src/styles/index.scss

@@ -15,6 +15,7 @@
 @use './components/attributes-editor';
 @use './components/mockos-router';
 @use './components/bottom-bar';
+@use './components/onboard';
 
 @use './modals/modal-shell';
 @use './modals/add-component';

package/src/types/PreviewConfig.ts

@@ -21,8 +21,4 @@ export const defaultAppConfig: AppConfig = {
   baseSize: { width: 375, height: 812 },
 };
 
-export type Localication = {
-  [key: string]: {
-    [key: string]: string;
-  };
-};
+export type Localication = Record<string, Record<string, string>>;

package/src/utils/analyseNodeByPatterns.ts

@@ -22,7 +22,12 @@ export type AnalyseResultWithPath = {
 };
 
 type AttributeTypeSpec = string | string[];
-type AttributeSchema = Record<string, AttributeTypeSpec>;
+// schema v2 supports nesting style specs under `attributes.style` (one level deep)
+type NestedAttributeSchema = Record<string, AttributeTypeSpec>;
+type AttributeSchema = Record<
+  string,
+  AttributeTypeSpec | NestedAttributeSchema
+>;
 
 type PatternLike = {
   pattern: {
@@ -51,6 +56,16 @@ function isPlainObject(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null && !Array.isArray(value);
 }
 
+function getStyleSubSchema(
+  schema: AttributeSchema | undefined,
+): AttributeSchema {
+  if (!schema) return {};
+  const maybe = schema.style;
+  if (!maybe) return {};
+  if (typeof maybe === 'string' || Array.isArray(maybe)) return {};
+  return (maybe ?? {}) as AttributeSchema;
+}
+
 function isNodeDataLike(
   value: unknown,
 ): value is NodeData<NodeDefaultAttribute> {
@@ -359,6 +374,7 @@ function validateAttributesByPattern(
   const schema: AttributeSchema = (getAttributeSchema(pattern.pattern.type) ??
     pattern.pattern.attributes ??
     {}) 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;
@@ -369,7 +385,9 @@ function validateAttributesByPattern(
     for (const [styleKey, styleValue] of Object.entries(
       maybeStyle as Record<string, unknown>,
     )) {
-      const spec = schema?.[styleKey];
+      const spec = (styleSchema?.[styleKey] ?? schema?.[styleKey]) as
+        | AttributeTypeSpec
+        | undefined;
       if (!spec) continue; // allow unknown style keys (free-form CSSProperties)
       const res = validateAttributeValue(
         pattern.pattern.type,
@@ -383,9 +401,26 @@ function validateAttributesByPattern(
 
   for (const [attrName, attrValue] of Object.entries(attrs)) {
     if (attrName === 'style') continue;
-    const attrSpec = schema?.[attrName];
+    const attrSpec = schema?.[attrName] as AttributeTypeSpec | undefined;
     if (!attrSpec) {
-      return fail(`Unknown attribute "${attrName}"`, joinPath(path, attrName));
+      // Back-compat: allow legacy flat style keys even when the schema nests them.
+      const legacyStyleSpec = styleSchema?.[attrName] as
+        | AttributeTypeSpec
+        | undefined;
+      if (!legacyStyleSpec) {
+        return fail(
+          `Unknown attribute "${attrName}"`,
+          joinPath(path, attrName),
+        );
+      }
+      const res = validateAttributeValue(
+        pattern.pattern.type,
+        attrValue,
+        legacyStyleSpec,
+        joinPath(path, attrName),
+      );
+      if (!res.valid) return res;
+      continue;
     }
     const res = validateAttributeValue(
       pattern.pattern.type,

package/src/utils/extractTextStyle/extractTextStyle.ts

@@ -15,7 +15,10 @@ import {
 } from '../loadFontFamily';
 import { fontsDebug } from '../fontsDebug';
 
-const inFlightFontLoads: Map<string, Promise<void>> = new Map();
+const inFlightFontLoads: Map<string, Promise<void>> = new Map<
+  string,
+  Promise<void>
+>();
 
 function weightToNumericKey(weight: unknown): string | undefined {
   const normalized = normalizeFontWeight(weight);

package/src/utils/getMeta.ts

@@ -0,0 +1,15 @@
+import metaJson from '../assets/meta.json';
+
+export type BuilderMeta = {
+  supportedProjectVersion: string;
+  reactBuilderVersion: string;
+};
+
+const meta: BuilderMeta = {
+  supportedProjectVersion: metaJson.supportedProjectVersion,
+  reactBuilderVersion: metaJson.reactBuilderVersion,
+};
+
+export function getMeta(): BuilderMeta {
+  return { ...meta };
+}

package/src/utils/patterns.ts

@@ -66,6 +66,38 @@ function normalizePlatform(platform?: BuilderPlatform | null): BuilderPlatform {
   return platform === 'native' ? 'native' : 'web';
 }
 
+/**
+ * Keys that conceptually behave like component props (behavior/flags) rather than
+ * style properties. These should NOT be normalized into `attributes.style`.
+ */
+export const NON_STYLE_ATTRIBUTE_KEYS = new Set<string>([
+  'scrollable',
+  'showEllipsis',
+  'adjustsFontSizeToFit',
+]);
+
+/**
+ * schemaVersion=2 stores style-like keys inside `attributes.style`.
+ *
+ * We treat View+Text schema keys as style-like by default, but explicitly exclude
+ * known non-style props (behavior flags).
+ */
+export function getStyleAttributeKeySet(): Set<string> {
+  const viewSchema = getAttributeSchema('View') ?? {};
+  const textSchema = getAttributeSchema('Text') ?? {};
+  const viewStyle =
+    typeof (viewSchema as any)?.style === 'object' && (viewSchema as any)?.style
+      ? Object.keys((viewSchema as any).style)
+      : Object.keys(viewSchema);
+  const textStyle =
+    typeof (textSchema as any)?.style === 'object' && (textSchema as any)?.style
+      ? Object.keys((textSchema as any).style)
+      : Object.keys(textSchema);
+  const out = new Set<string>([...viewStyle, ...textStyle]);
+  for (const k of NON_STYLE_ATTRIBUTE_KEYS) out.delete(k);
+  return out;
+}
+
 function adjustMetaForPlatform(
   meta: Record<string, AttributeMeta> | undefined,
   platform?: BuilderPlatform,
@@ -113,7 +145,7 @@ function adjustMetaForPlatform(
 }
 
 // Build a fast lookup map without normalization for direct access
-const patternIndex: Map<string, Pattern> = new Map(
+const patternIndex: Map<string, Pattern> = new Map<string, Pattern>(
   patterns.map((p) => [p.pattern.type, p]),
 );
 
@@ -131,7 +163,7 @@ function pascalToKebabCase(s: string): string {
     .toLowerCase();
 }
 
-const typeAliases: Map<string, string> = new Map();
+const typeAliases: Map<string, string> = new Map<string, string>();
 for (const p of patterns) {
   const canonical = p?.pattern?.type;
   if (typeof canonical !== 'string' || !canonical) continue;
@@ -176,8 +208,19 @@ export function getAttributeMeta(
   platform?: BuilderPlatform,
 ): Record<string, AttributeMeta> | undefined {
   const p = getPatternByType(type);
-  const meta = p?.meta?.styles ?? p?.meta?.attributes;
-  return adjustMetaForPlatform(meta, platform);
+  const styles = p?.meta?.styles;
+  const attributes = p?.meta?.attributes;
+
+  // schemaVersion=2 prefers `meta.styles` but some repos split UI meta into:
+  // - meta.styles: style-tab fields
+  // - meta.attributes: non-style fields (container/other)
+  // Merge both to keep the editor + platform adjustments working.
+  const merged =
+    styles && attributes
+      ? { ...attributes, ...styles }
+      : (styles ?? attributes);
+
+  return adjustMetaForPlatform(merged, platform);
 }
 
 /** Returns defaults block (if any) for a given component type */

package/dist/hooks/useExtractImageStyle.d.ts

@@ -1,5 +0,0 @@
-import type { NodeData } from '../types/Node';
-import type { ImagePropsGenerated } from '../build-components/Image/ImageProps.generated';
-export declare function useExtractImageStyle<T extends ImagePropsGenerated['attributes']>(node: NodeData<T>): {
-    [x: string]: unknown;
-} | import("react").CSSProperties;

package/dist/hooks/useExtractTextStyle.d.ts

@@ -1,3 +0,0 @@
-import type { NodeData } from '../types/Node';
-import type { TextPropsGenerated } from '../build-components/Text/TextProps.generated';
-export declare function useExtractTextStyle<T extends TextPropsGenerated['attributes']>(node: NodeData<T>): Record<string, unknown> | import("react").CSSProperties;

package/dist/hooks/useExtractViewStyle.d.ts

@@ -1,3 +0,0 @@
-import type { NodeData } from '../types/Node';
-import type { ViewPropsGenerated } from '../build-components/View/ViewProps.generated';
-export declare function useExtractViewStyle<T extends ViewPropsGenerated['attributes']>(node: NodeData<T>): Record<string, unknown> | import("react").CSSProperties;

package/src/hooks/useExtractImageStyle.ts

@@ -1,30 +0,0 @@
-import { useMemo } from 'react';
-import type { NodeData } from '../types/Node';
-import type { ImagePropsGenerated } from '../build-components/Image/ImageProps.generated';
-import { useBuilderParams } from '../components/BuilderProvider';
-import {
-  extractImageStyle,
-  extractImageStyleNative,
-} from '../utils/extractImageStyle';
-import { defaultAppConfig } from '../types/PreviewConfig';
-
-export function useExtractImageStyle<
-  T extends ImagePropsGenerated['attributes'],
->(node: NodeData<T>) {
-  const {
-    appConfig,
-    projectColors: builderProjectColors,
-    platform,
-  } = useBuilderParams();
-  const theme = appConfig?.theme ?? defaultAppConfig.theme;
-  const projectColors = builderProjectColors;
-  const isNative = platform === 'native';
-
-  return useMemo(
-    () =>
-      isNative
-        ? extractImageStyleNative(node, { theme, projectColors })
-        : extractImageStyle(node, { theme, projectColors }),
-    [node, theme, projectColors, isNative],
-  );
-}

package/src/hooks/useExtractTextStyle.ts

@@ -1,34 +0,0 @@
-import { useMemo } from 'react';
-import type { NodeData } from '../types/Node';
-import type { TextPropsGenerated } from '../build-components/Text/TextProps.generated';
-import { defaultAppConfig } from '../types/PreviewConfig';
-import { useBuilderParams } from '../components/BuilderProvider';
-import {
-  extractTextStyle,
-  extractTextStyleNative,
-} from '../utils/extractTextStyle';
-
-export function useExtractTextStyle<T extends TextPropsGenerated['attributes']>(
-  node: NodeData<T>,
-) {
-  const {
-    appConfig: builderAppConfig,
-    projectColors: builderProjectColors,
-    fonts: builderFonts,
-    platform,
-  } = useBuilderParams();
-
-  const appConfig = builderAppConfig ?? defaultAppConfig;
-  const projectColors = builderProjectColors;
-  const fonts = builderFonts;
-  const isNative = platform === 'native';
-
-  return useMemo(
-    () =>
-      isNative
-        ? extractTextStyleNative(node, { appConfig, projectColors, fonts })
-        : extractTextStyle(node, { appConfig, projectColors, fonts }),
-    // fonts is intentionally included: extractTextStyle resolves weights via font definitions.
-    [node, appConfig, projectColors, fonts, isNative],
-  );
-}