@developer_tribe/react-builder 1.2.7 → 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/extractImageStyle.ts

@@ -1,21 +1,50 @@
 import { ImagePropsGenerated } from '../build-components/Image/ImageProps.generated';
 import type { NodeData } from '../types/Node';
-import { extractViewStyle, ExtractViewStyleOptions } from './extractViewStyle';
+import {
+  extractViewStyle,
+  extractViewStyleNative,
+  ExtractViewStyleOptions,
+} from './extractViewStyle';
 
 export function extractImageStyle<T extends ImagePropsGenerated['attributes']>(
   node: NodeData<T>,
   options: ExtractViewStyleOptions = {},
 ) {
   const attributes = node.attributes;
+  const styleBag = (attributes as any)?.style as
+    | Record<string, unknown>
+    | undefined;
   const style: React.CSSProperties = {};
 
   if (!attributes) return style;
 
   // Map resizeMode to CSS object-fit
-  if (attributes.resizeMode === 'cover') style.objectFit = 'cover';
-  else if (attributes.resizeMode === 'contain') style.objectFit = 'contain';
-  else if (attributes.resizeMode === 'stretch') style.objectFit = 'fill';
-  else if (attributes.resizeMode === 'center') style.objectFit = 'none';
+  const resizeMode = ((attributes as any)?.resizeMode ??
+    styleBag?.resizeMode) as any;
+  if (resizeMode === 'cover') style.objectFit = 'cover';
+  else if (resizeMode === 'contain') style.objectFit = 'contain';
+  else if (resizeMode === 'stretch') style.objectFit = 'fill';
+  else if (resizeMode === 'center') style.objectFit = 'none';
 
   return { ...extractViewStyle(node, options), ...style };
 }
+
+export function extractImageStyleNative<
+  T extends ImagePropsGenerated['attributes'],
+>(node: NodeData<T>, options: ExtractViewStyleOptions = {}) {
+  const attributes = node.attributes;
+  const styleBag = (attributes as any)?.style as
+    | Record<string, unknown>
+    | undefined;
+  if (!attributes) return {};
+
+  const resizeMode = ((attributes as any)?.resizeMode ??
+    styleBag?.resizeMode) as any;
+
+  // In RN, resizeMode is usually an Image prop, but many codebases also accept it on ImageStyle.
+  // We return it here so consumers can pass it through as they prefer.
+  const nativeStyle: Record<string, unknown> = {};
+  if (resizeMode) nativeStyle.resizeMode = resizeMode;
+
+  return { ...extractViewStyleNative(node, options as any), ...nativeStyle };
+}

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);
@@ -93,12 +96,10 @@ export function extractTextStyle<T extends TextPropsGenerated['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 get = (key: string): unknown => {
     const direct = (attributes as any)?.[key];
     if (direct !== undefined && direct !== null) return direct;
-    return styleBag?.[key as unknown as string] as any;
+    return styleBag?.[key];
   };
   const resolvedAppConfig = options.appConfig ?? defaultAppConfig;
   const { screenStyle, theme } = resolvedAppConfig;
@@ -162,7 +163,7 @@ export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
   // If no fontFamily is set, keep previous behavior.
   if (!normalizedFontFamily && normalizedFontWeight)
     style.fontWeight = normalizedFontWeight;
-  const resolvedTextColor = parseColor(get('color'), {
+  const resolvedTextColor = parseColor(get('color') as any, {
     projectColors: options.projectColors,
     theme,
   });

package/src/utils/extractTextStyle/extractTextStyleNative.ts

@@ -0,0 +1,106 @@
+import type { NodeData } from '../../types/Node';
+import type { TextPropsGenerated } from '../../build-components/Text/TextProps.generated';
+import type { AppConfig } from '../../types/PreviewConfig';
+import { defaultAppConfig } from '../../types/PreviewConfig';
+import type { ProjectColors } from '../../types/Project';
+import type { Fonts } from '../../types/Fonts';
+import { fs, parseSize } from '../../size-matters';
+import { parseColor } from '../parseColor';
+import { extractViewStyleNative } from '../extractViewStyle';
+import { normalizeFontWeight } from '../fontWeight';
+import {
+  findFontDefinition,
+  resolveClosestFontWeightKey,
+} from '../loadFontFamily';
+
+export type ExtractTextStyleNativeOptions = {
+  appConfig?: AppConfig;
+  projectColors?: ProjectColors;
+  fonts?: Fonts;
+};
+
+function weightToNumericKey(weight: unknown): string | undefined {
+  const normalized = normalizeFontWeight(weight);
+  if (!normalized) return undefined;
+  if (normalized === 'normal') return '400';
+  if (normalized === 'bold') return '700';
+  return normalized;
+}
+
+/**
+ * React Native-friendly text style extraction.
+ * - Avoids web-only quoting of fontFamily.
+ * - Returns numeric fontSize (dp) when possible.
+ * - Merges with extractViewStyleNative so padding/margin/etc still work in RN.
+ */
+export function extractTextStyleNative<
+  T extends TextPropsGenerated['attributes'],
+>(node: NodeData<T>, options: ExtractTextStyleNativeOptions = {}) {
+  const attributes = node.attributes;
+  const styleBag = (attributes as any)?.style as
+    | Record<string, unknown>
+    | undefined;
+  const get = (key: string): unknown => {
+    const direct = (attributes as any)?.[key];
+    if (direct !== undefined && direct !== null) return direct;
+    return styleBag?.[key];
+  };
+
+  const resolvedAppConfig = options.appConfig ?? defaultAppConfig;
+  const { screenStyle, theme } = resolvedAppConfig;
+  const fallbackColor =
+    theme === 'light' ? screenStyle.light.color : screenStyle.dark.color;
+
+  const style: Record<string, unknown> = {};
+  if (!attributes) {
+    style.fontSize = fs(14);
+    style.color = fallbackColor;
+    return style;
+  }
+
+  const rawFontSize = get('fontSize') as any;
+  const parsedFontSize = parseSize(rawFontSize);
+  if (typeof parsedFontSize === 'number') style.fontSize = parsedFontSize;
+  else style.fontSize = fs(14);
+
+  const fontFamily = get('fontFamily') as any;
+  const fontWeight = get('fontWeight') as any;
+  const requestedWeight = weightToNumericKey(fontWeight);
+  const normalizedFontFamily =
+    typeof fontFamily === 'string' && fontFamily.trim().length > 0
+      ? fontFamily.trim()
+      : undefined;
+
+  if (normalizedFontFamily) {
+    const def = findFontDefinition(options.fonts ?? [], normalizedFontFamily);
+    const resolvedWeightKey =
+      def?.family && typeof def.family === 'object'
+        ? resolveClosestFontWeightKey(
+            def.family as Record<string, string>,
+            requestedWeight,
+          )
+        : requestedWeight;
+
+    style.fontFamily = normalizedFontFamily;
+    if (resolvedWeightKey) style.fontWeight = resolvedWeightKey;
+  }
+
+  const normalizedFontWeight = normalizeFontWeight(fontWeight);
+  if (!normalizedFontFamily && normalizedFontWeight)
+    style.fontWeight = normalizedFontWeight;
+
+  const resolvedTextColor = parseColor(get('color') as any, {
+    projectColors: options.projectColors,
+    theme,
+  });
+  style.color = resolvedTextColor ?? fallbackColor;
+
+  const textAlign = get('textAlign');
+  if (textAlign) style.textAlign = textAlign as any;
+
+  const viewStyle = extractViewStyleNative(node, {
+    projectColors: options.projectColors,
+    theme,
+  });
+  return { ...viewStyle, ...style };
+}