@getrheo/flow-runtime 1.0.0

package/dist/responsive/merge.d.ts

@@ -0,0 +1,19 @@
+import { StyleBreakpointKey } from './breakpoints.js';
+
+/**
+ * Deep-merge style-like objects: nested plain objects merge per-key; scalars
+ * and arrays replace. Suitable for padding/margin/border/shadow objects.
+ */
+declare const deepMergeStyle: <T extends Record<string, unknown>>(base: T | undefined, ...overrides: (Partial<T> | undefined)[]) => T | undefined;
+/**
+ * Mobile-first merge: `base` applies below `sm`; each breakpoint partial stacks
+ * from `sm` through the bucket implied by `widthPx`.
+ */
+declare const mergeResponsivePartial: <T extends Record<string, unknown>>(base: Partial<T> | undefined, breakpoints: Partial<Record<StyleBreakpointKey, Partial<T>>> | undefined, widthPx: number) => Partial<T> | undefined;
+/**
+ * Merge breakpoint partials up to and including `bucket` (not using viewport width).
+ * Use when editing a specific bucket's effective preview.
+ */
+declare const mergeResponsivePartialUpToBucket: <T extends Record<string, unknown>>(base: Partial<T> | undefined, breakpoints: Partial<Record<StyleBreakpointKey, Partial<T>>> | undefined, bucket: StyleBreakpointKey | "default") => Partial<T> | undefined;
+
+export { deepMergeStyle, mergeResponsivePartial, mergeResponsivePartialUpToBucket };

package/dist/responsive/merge.js

@@ -0,0 +1,74 @@
+// src/responsive/breakpoints.ts
+var TAILWIND_DEFAULT_BREAKPOINTS = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536
+};
+var STYLE_BREAKPOINT_MERGE_ORDER = ["sm", "md", "lg", "xl", "2xl"];
+var getScreenSizeBucketForWidth = (width) => {
+  const { sm, md, lg, xl, "2xl": xxl } = TAILWIND_DEFAULT_BREAKPOINTS;
+  if (width < sm) return "default";
+  if (width < md) return "sm";
+  if (width < lg) return "md";
+  if (width < xl) return "lg";
+  if (width < xxl) return "xl";
+  return "2xl";
+};
+var getActiveStyleBreakpointChain = (widthPx) => {
+  const bucket = getScreenSizeBucketForWidth(widthPx);
+  if (bucket === "default") return [];
+  const idx = STYLE_BREAKPOINT_MERGE_ORDER.indexOf(bucket);
+  if (idx < 0) return [];
+  return STYLE_BREAKPOINT_MERGE_ORDER.slice(0, idx + 1);
+};
+
+// src/responsive/merge.ts
+var isPlainObject = (v) => v !== null && typeof v === "object" && !Array.isArray(v);
+var deepMergeStyle = (base, ...overrides) => {
+  let acc = base ? { ...base } : void 0;
+  for (const o of overrides) {
+    if (!o) continue;
+    acc = acc ?? {};
+    for (const [k, v] of Object.entries(o)) {
+      if (v === void 0) continue;
+      const prev = acc[k];
+      if (isPlainObject(v) && isPlainObject(prev)) {
+        const merged = deepMergeStyle(prev, v);
+        if (merged !== void 0) acc[k] = merged;
+      } else {
+        acc[k] = v;
+      }
+    }
+  }
+  return acc;
+};
+var mergeResponsivePartial = (base, breakpoints, widthPx) => {
+  const chain = getActiveStyleBreakpointChain(widthPx);
+  if (chain.length === 0) return base ? { ...base } : void 0;
+  let acc = base ? { ...base } : void 0;
+  for (const key of chain) {
+    const patch = breakpoints?.[key];
+    if (!patch) continue;
+    acc = deepMergeStyle(acc, patch);
+  }
+  return acc;
+};
+var mergeResponsivePartialUpToBucket = (base, breakpoints, bucket) => {
+  if (bucket === "default") return base ? { ...base } : void 0;
+  const end = STYLE_BREAKPOINT_MERGE_ORDER.indexOf(bucket);
+  if (end < 0) return base ? { ...base } : void 0;
+  let acc = base ? { ...base } : void 0;
+  for (let i = 0; i <= end; i++) {
+    const key = STYLE_BREAKPOINT_MERGE_ORDER[i];
+    const patch = breakpoints?.[key];
+    if (!patch) continue;
+    acc = deepMergeStyle(acc, patch);
+  }
+  return acc;
+};
+
+export { deepMergeStyle, mergeResponsivePartial, mergeResponsivePartialUpToBucket };
+//# sourceMappingURL=merge.js.map
+//# sourceMappingURL=merge.js.map

package/dist/responsive/merge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/responsive/breakpoints.ts","../../src/responsive/merge.ts"],"names":[],"mappings":"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","file":"merge.js","sourcesContent":["/**\n * Tailwind CSS default `screens` min-width values (px). Single source of truth\n * for preview buckets, manifest breakpoints, and runtime style resolution.\n *\n * @see https://tailwindcss.com/docs/screens\n */\nexport const TAILWIND_DEFAULT_BREAKPOINTS = {\n  sm: 640,\n  md: 768,\n  lg: 1024,\n  xl: 1280,\n  '2xl': 1536,\n} as const;\n\n/** Viewport classification used by preview UI and editing scope. */\nexport type ScreenSizeBucket = 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\n/** Ordered keys stored on layers (`styleBreakpoints`) and merged mobile-first. */\nexport const STYLE_BREAKPOINT_MERGE_ORDER = ['sm', 'md', 'lg', 'xl', '2xl'] as const;\nexport type StyleBreakpointKey = (typeof STYLE_BREAKPOINT_MERGE_ORDER)[number];\n\nexport const SCREEN_SIZE_BUCKET_ORDER: readonly ScreenSizeBucket[] = [\n  'default',\n  'sm',\n  'md',\n  'lg',\n  'xl',\n  '2xl',\n] as const;\n\n/** Buckets shown in the flow builder inspector (xl / 2xl omitted from authoring UI). */\nexport const BUILDER_INSPECTOR_BUCKET_ORDER: readonly ScreenSizeBucket[] = [\n  'default',\n  'sm',\n  'md',\n  'lg',\n] as const;\n\n/** Human-readable bucket titles; ranges lie between consecutive breakpoints. */\nexport const SCREEN_SIZE_BUCKET_LABEL: Record<ScreenSizeBucket, string> = {\n  default: 'Default (< 640px)',\n  sm: 'sm (640–767px)',\n  md: 'md (768–1023px)',\n  lg: 'lg (1024–1279px)',\n  xl: 'xl (1280–1535px)',\n  '2xl': '2xl (1536px+)',\n};\n\n/** Fallback viewport width when no `previewWidthPx` is passed (simulator / static previews). */\nexport const DEFAULT_PREVIEW_VIEWPORT_WIDTH_PX = 390;\n\n/** Maps viewport width (CSS px) to the Tailwind viewport bucket. */\nexport const getScreenSizeBucketForWidth = (width: number): ScreenSizeBucket => {\n  const { sm, md, lg, xl, '2xl': xxl } = TAILWIND_DEFAULT_BREAKPOINTS;\n  if (width < sm) return 'default';\n  if (width < md) return 'sm';\n  if (width < lg) return 'md';\n  if (width < xl) return 'lg';\n  if (width < xxl) return 'xl';\n  return '2xl';\n};\n\n/**\n * Breakpoint keys whose partials apply at this width (mobile-first), e.g.\n * width 800 → `['sm','md']`.\n */\nexport const getActiveStyleBreakpointChain = (widthPx: number): StyleBreakpointKey[] => {\n  const bucket = getScreenSizeBucketForWidth(widthPx);\n  if (bucket === 'default') return [];\n  const idx = STYLE_BREAKPOINT_MERGE_ORDER.indexOf(bucket as StyleBreakpointKey);\n  if (idx < 0) return [];\n  return STYLE_BREAKPOINT_MERGE_ORDER.slice(0, idx + 1) as StyleBreakpointKey[];\n};\n","import {\n  STYLE_BREAKPOINT_MERGE_ORDER,\n  getActiveStyleBreakpointChain,\n} from './breakpoints';\nimport type { StyleBreakpointKey } from './breakpoints';\n\nconst isPlainObject = (v: unknown): v is Record<string, unknown> =>\n  v !== null && typeof v === 'object' && !Array.isArray(v);\n\n/**\n * Deep-merge style-like objects: nested plain objects merge per-key; scalars\n * and arrays replace. Suitable for padding/margin/border/shadow objects.\n */\nexport const deepMergeStyle = <T extends Record<string, unknown>>(\n  base: T | undefined,\n  ...overrides: (Partial<T> | undefined)[]\n): T | undefined => {\n  let acc: T | undefined = base ? ({ ...base } as T) : undefined;\n  for (const o of overrides) {\n    if (!o) continue;\n    acc = acc ?? ({} as T);\n    for (const [k, v] of Object.entries(o) as [keyof T, T[keyof T] | undefined][]) {\n      if (v === undefined) continue;\n      const prev = acc[k as keyof T] as unknown;\n      if (isPlainObject(v) && isPlainObject(prev)) {\n        const merged = deepMergeStyle(prev as Record<string, unknown>, v as Partial<T>);\n        if (merged !== undefined) (acc as Record<string, unknown>)[k as string] = merged;\n      } else {\n        (acc as Record<string, unknown>)[k as string] = v as unknown;\n      }\n    }\n  }\n  return acc;\n};\n\n/**\n * Mobile-first merge: `base` applies below `sm`; each breakpoint partial stacks\n * from `sm` through the bucket implied by `widthPx`.\n */\nexport const mergeResponsivePartial = <T extends Record<string, unknown>>(\n  base: Partial<T> | undefined,\n  breakpoints: Partial<Record<StyleBreakpointKey, Partial<T>>> | undefined,\n  widthPx: number,\n): Partial<T> | undefined => {\n  const chain = getActiveStyleBreakpointChain(widthPx);\n  if (chain.length === 0) return base ? { ...base } : undefined;\n  let acc = base ? ({ ...base } as Partial<T>) : undefined;\n  for (const key of chain) {\n    const patch = breakpoints?.[key];\n    if (!patch) continue;\n    acc = deepMergeStyle(acc as Record<string, unknown> | undefined, patch as Partial<T>) as\n      | Partial<T>\n      | undefined;\n  }\n  return acc;\n};\n\n/**\n * Merge breakpoint partials up to and including `bucket` (not using viewport width).\n * Use when editing a specific bucket's effective preview.\n */\nexport const mergeResponsivePartialUpToBucket = <T extends Record<string, unknown>>(\n  base: Partial<T> | undefined,\n  breakpoints: Partial<Record<StyleBreakpointKey, Partial<T>>> | undefined,\n  bucket: StyleBreakpointKey | 'default',\n): Partial<T> | undefined => {\n  if (bucket === 'default') return base ? { ...base } : undefined;\n  const end = STYLE_BREAKPOINT_MERGE_ORDER.indexOf(bucket);\n  if (end < 0) return base ? { ...base } : undefined;\n  let acc = base ? ({ ...base } as Partial<T>) : undefined;\n  for (let i = 0; i <= end; i++) {\n    const key = STYLE_BREAKPOINT_MERGE_ORDER[i]!;\n    const patch = breakpoints?.[key];\n    if (!patch) continue;\n    acc = deepMergeStyle(acc as Record<string, unknown> | undefined, patch as Partial<T>) as\n      | Partial<T>\n      | undefined;\n  }\n  return acc;\n};\n"]}

package/dist/responsive/previewSafeAreaInsets.d.ts

@@ -0,0 +1,14 @@
+/** Preview / sim status bar + home-indicator insets (portrait phone). */
+type PreviewPhoneSystemUi = 'ios' | 'android';
+declare const previewPhoneSafeAreaInsetTopPx: (width: number) => number;
+declare const previewPhoneSafeAreaInsetBottomPx: (width: number, systemUi?: PreviewPhoneSystemUi) => number;
+/** Portrait phone preview: no horizontal inset (matches RN `SafeAreaView` in portrait). */
+declare const previewPhoneSafeAreaInsetHorizontalPx: (_width: number) => number;
+declare const previewPhoneSafeAreaPadding: (widthPx: number, systemUi?: PreviewPhoneSystemUi) => {
+    t: number;
+    r: number;
+    b: number;
+    l: number;
+};
+
+export { type PreviewPhoneSystemUi, previewPhoneSafeAreaInsetBottomPx, previewPhoneSafeAreaInsetHorizontalPx, previewPhoneSafeAreaInsetTopPx, previewPhoneSafeAreaPadding };

package/dist/responsive/previewSafeAreaInsets.js

@@ -0,0 +1,24 @@
+// src/responsive/previewSafeAreaInsets.ts
+var previewPhoneSafeAreaInsetTopPx = (width) => {
+  const statusChromePadY = Math.max(6, Math.round(width * 0.016));
+  const chromePadBottom = Math.max(4, Math.round(width * 0.01));
+  const padY = Math.max(5, Math.round(width * 0.012));
+  const statusH = Math.max(23, Math.round(width * 0.058));
+  return statusChromePadY + statusH + 2 * padY + chromePadBottom;
+};
+var previewPhoneSafeAreaInsetBottomPx = (width, systemUi = "ios") => {
+  const pad = systemUi === "ios" ? 8 : 10;
+  const pill = systemUi === "ios" ? 5 : 4;
+  return pad + pill + Math.max(6, Math.round(width * 0.014));
+};
+var previewPhoneSafeAreaInsetHorizontalPx = (_width) => 0;
+var previewPhoneSafeAreaPadding = (widthPx, systemUi = "ios") => ({
+  t: previewPhoneSafeAreaInsetTopPx(widthPx),
+  r: previewPhoneSafeAreaInsetHorizontalPx(),
+  b: previewPhoneSafeAreaInsetBottomPx(widthPx, systemUi),
+  l: previewPhoneSafeAreaInsetHorizontalPx()
+});
+
+export { previewPhoneSafeAreaInsetBottomPx, previewPhoneSafeAreaInsetHorizontalPx, previewPhoneSafeAreaInsetTopPx, previewPhoneSafeAreaPadding };
+//# sourceMappingURL=previewSafeAreaInsets.js.map
+//# sourceMappingURL=previewSafeAreaInsets.js.map

package/dist/responsive/previewSafeAreaInsets.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/responsive/previewSafeAreaInsets.ts"],"names":[],"mappings":";AAIO,IAAM,8BAAA,GAAiC,CAAC,KAAA,KAA0B;AACvE,EAAA,MAAM,gBAAA,GAAmB,KAAK,GAAA,CAAI,CAAA,EAAG,KAAK,KAAA,CAAM,KAAA,GAAQ,KAAK,CAAC,CAAA;AAC9D,EAAA,MAAM,eAAA,GAAkB,KAAK,GAAA,CAAI,CAAA,EAAG,KAAK,KAAA,CAAM,KAAA,GAAQ,IAAI,CAAC,CAAA;AAC5D,EAAA,MAAM,IAAA,GAAO,KAAK,GAAA,CAAI,CAAA,EAAG,KAAK,KAAA,CAAM,KAAA,GAAQ,KAAK,CAAC,CAAA;AAClD,EAAA,MAAM,OAAA,GAAU,KAAK,GAAA,CAAI,EAAA,EAAI,KAAK,KAAA,CAAM,KAAA,GAAQ,KAAK,CAAC,CAAA;AACtD,EAAA,OAAO,gBAAA,GAAmB,OAAA,GAAU,CAAA,GAAI,IAAA,GAAO,eAAA;AACjD;AAEO,IAAM,iCAAA,GAAoC,CAC/C,KAAA,EACA,QAAA,GAAiC,KAAA,KACtB;AACX,EAAA,MAAM,GAAA,GAAM,QAAA,KAAa,KAAA,GAAQ,CAAA,GAAI,EAAA;AACrC,EAAA,MAAM,IAAA,GAAO,QAAA,KAAa,KAAA,GAAQ,CAAA,GAAI,CAAA;AACtC,EAAA,OAAO,GAAA,GAAM,OAAO,IAAA,CAAK,GAAA,CAAI,GAAG,IAAA,CAAK,KAAA,CAAM,KAAA,GAAQ,KAAK,CAAC,CAAA;AAC3D;AAGO,IAAM,qCAAA,GAAwC,CAAC,MAAA,KAA2B;AAE1E,IAAM,2BAAA,GAA8B,CACzC,OAAA,EACA,QAAA,GAAiC,KAAA,MACmB;AAAA,EACpD,CAAA,EAAG,+BAA+B,OAAO,CAAA;AAAA,EACzC,CAAA,EAAG,sCAA6C,CAAA;AAAA,EAChD,CAAA,EAAG,iCAAA,CAAkC,OAAA,EAAS,QAAQ,CAAA;AAAA,EACtD,CAAA,EAAG,sCAA6C;AAClD,CAAA","file":"previewSafeAreaInsets.js","sourcesContent":["/** Preview / sim status bar + home-indicator insets (portrait phone). */\n\nexport type PreviewPhoneSystemUi = 'ios' | 'android';\n\nexport const previewPhoneSafeAreaInsetTopPx = (width: number): number => {\n  const statusChromePadY = Math.max(6, Math.round(width * 0.016));\n  const chromePadBottom = Math.max(4, Math.round(width * 0.01));\n  const padY = Math.max(5, Math.round(width * 0.012));\n  const statusH = Math.max(23, Math.round(width * 0.058));\n  return statusChromePadY + statusH + 2 * padY + chromePadBottom;\n};\n\nexport const previewPhoneSafeAreaInsetBottomPx = (\n  width: number,\n  systemUi: PreviewPhoneSystemUi = 'ios',\n): number => {\n  const pad = systemUi === 'ios' ? 8 : 10;\n  const pill = systemUi === 'ios' ? 5 : 4;\n  return pad + pill + Math.max(6, Math.round(width * 0.014));\n};\n\n/** Portrait phone preview: no horizontal inset (matches RN `SafeAreaView` in portrait). */\nexport const previewPhoneSafeAreaInsetHorizontalPx = (_width: number): number => 0;\n\nexport const previewPhoneSafeAreaPadding = (\n  widthPx: number,\n  systemUi: PreviewPhoneSystemUi = 'ios',\n): { t: number; r: number; b: number; l: number } => ({\n  t: previewPhoneSafeAreaInsetTopPx(widthPx),\n  r: previewPhoneSafeAreaInsetHorizontalPx(widthPx),\n  b: previewPhoneSafeAreaInsetBottomPx(widthPx, systemUi),\n  l: previewPhoneSafeAreaInsetHorizontalPx(widthPx),\n});\n"]}

package/dist/responsive/screenContainerResolve.d.ts

@@ -0,0 +1,11 @@
+import { ScreenContainerStyle, ScreenContainerStyleBreakpoints, ScreenBackgroundFill } from '@getrheo/contracts';
+import { StyleBreakpointKey } from './breakpoints.js';
+
+declare const resolveScreenContainerStyleAtWidth: (base: ScreenContainerStyle | undefined, breakpoints: ScreenContainerStyleBreakpoints | undefined, widthPx: number) => ScreenContainerStyle | undefined;
+declare const screenBackgroundFillUsesMedia: (fill: ScreenBackgroundFill | undefined) => fill is Extract<ScreenBackgroundFill, {
+    kind: "image" | "video";
+}>;
+/** Effective shell style for builder inspector at a specific breakpoint bucket. */
+declare const resolveScreenContainerForEditBucket: (base: ScreenContainerStyle | undefined, breakpoints: ScreenContainerStyleBreakpoints | undefined, bucket: StyleBreakpointKey | "default") => ScreenContainerStyle | undefined;
+
+export { resolveScreenContainerForEditBucket, resolveScreenContainerStyleAtWidth, screenBackgroundFillUsesMedia };

package/dist/responsive/screenContainerResolve.js

@@ -0,0 +1,122 @@
+// src/responsive/breakpoints.ts
+var TAILWIND_DEFAULT_BREAKPOINTS = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536
+};
+var STYLE_BREAKPOINT_MERGE_ORDER = ["sm", "md", "lg", "xl", "2xl"];
+var getScreenSizeBucketForWidth = (width) => {
+  const { sm, md, lg, xl, "2xl": xxl } = TAILWIND_DEFAULT_BREAKPOINTS;
+  if (width < sm) return "default";
+  if (width < md) return "sm";
+  if (width < lg) return "md";
+  if (width < xl) return "lg";
+  if (width < xxl) return "xl";
+  return "2xl";
+};
+var getActiveStyleBreakpointChain = (widthPx) => {
+  const bucket = getScreenSizeBucketForWidth(widthPx);
+  if (bucket === "default") return [];
+  const idx = STYLE_BREAKPOINT_MERGE_ORDER.indexOf(bucket);
+  if (idx < 0) return [];
+  return STYLE_BREAKPOINT_MERGE_ORDER.slice(0, idx + 1);
+};
+
+// src/responsive/merge.ts
+var isPlainObject = (v) => v !== null && typeof v === "object" && !Array.isArray(v);
+var deepMergeStyle = (base, ...overrides) => {
+  let acc = base ? { ...base } : void 0;
+  for (const o of overrides) {
+    if (!o) continue;
+    acc = acc ?? {};
+    for (const [k, v] of Object.entries(o)) {
+      if (v === void 0) continue;
+      const prev = acc[k];
+      if (isPlainObject(v) && isPlainObject(prev)) {
+        const merged = deepMergeStyle(prev, v);
+        if (merged !== void 0) acc[k] = merged;
+      } else {
+        acc[k] = v;
+      }
+    }
+  }
+  return acc;
+};
+
+// src/responsive/screenContainerResolve.ts
+var mergeBackgroundFillPatch = (fill, patch) => {
+  if (fill.kind === "color") {
+    return {
+      ...fill,
+      kind: "color",
+      ...patch.color !== void 0 ? { color: patch.color } : {},
+      ...patch.opacity !== void 0 ? { opacity: patch.opacity } : {}
+    };
+  }
+  const scrim = patch.scrim !== void 0 ? deepMergeStyle(fill.scrim, patch.scrim) : fill.scrim;
+  const shared = {
+    ...fill,
+    ...patch.fit !== void 0 ? { fit: patch.fit } : {},
+    ...patch.opacity !== void 0 ? { opacity: patch.opacity } : {},
+    ...scrim !== void 0 ? { scrim } : {}
+  };
+  if (fill.kind === "image") {
+    return shared;
+  }
+  return {
+    ...shared,
+    ...patch.loop !== void 0 ? { loop: patch.loop } : {},
+    ...patch.autoPlay !== void 0 ? { autoPlay: patch.autoPlay } : {},
+    ...patch.triggerLayerId !== void 0 ? { triggerLayerId: patch.triggerLayerId } : {},
+    ...patch.onComplete !== void 0 ? { onComplete: patch.onComplete } : {},
+    ...patch.audioEnabled !== void 0 ? { audioEnabled: patch.audioEnabled } : {}
+  };
+};
+var resolveScreenContainerStyleAtWidth = (base, breakpoints, widthPx) => {
+  const chain = getActiveStyleBreakpointChain(widthPx);
+  let acc = base ? { ...base } : void 0;
+  for (const key of chain) {
+    const patch = breakpoints?.[key];
+    if (!patch) continue;
+    acc = acc ?? {};
+    if (patch.padding !== void 0) acc = { ...acc, padding: patch.padding };
+    if (patch.margin !== void 0) acc = { ...acc, margin: patch.margin };
+    if (patch.insetSafeArea !== void 0) acc = { ...acc, insetSafeArea: patch.insetSafeArea };
+    if (patch.backgroundFillPatch && acc.backgroundFill) {
+      acc = {
+        ...acc,
+        backgroundFill: mergeBackgroundFillPatch(acc.backgroundFill, patch.backgroundFillPatch)
+      };
+    }
+  }
+  return acc;
+};
+var screenBackgroundFillUsesMedia = (fill) => fill?.kind === "image" || fill?.kind === "video";
+var resolveScreenContainerForEditBucket = (base, breakpoints, bucket) => {
+  if (bucket === "default") return base ? { ...base } : void 0;
+  const end = STYLE_BREAKPOINT_MERGE_ORDER.indexOf(bucket);
+  if (end < 0) return base ? { ...base } : void 0;
+  let acc = base ? { ...base } : {};
+  for (let i = 0; i <= end; i++) {
+    const patch = breakpoints?.[STYLE_BREAKPOINT_MERGE_ORDER[i]];
+    if (!patch) continue;
+    acc = acc ?? {};
+    if (patch.padding !== void 0) acc = { ...acc, padding: patch.padding };
+    if (patch.margin !== void 0) acc = { ...acc, margin: patch.margin };
+    if (patch.insetSafeArea !== void 0) acc = { ...acc, insetSafeArea: patch.insetSafeArea };
+    if (patch.backgroundFillPatch && acc.backgroundFill) {
+      acc = {
+        ...acc,
+        backgroundFill: mergeBackgroundFillPatch(acc.backgroundFill, patch.backgroundFillPatch)
+      };
+    }
+  }
+  const hasKeys = acc && (acc.padding !== void 0 || acc.margin !== void 0 || acc.insetSafeArea !== void 0 || acc.backgroundFill !== void 0);
+  return hasKeys ? acc : void 0;
+};
+
+export { resolveScreenContainerForEditBucket, resolveScreenContainerStyleAtWidth, screenBackgroundFillUsesMedia };
+//# sourceMappingURL=screenContainerResolve.js.map
+//# sourceMappingURL=screenContainerResolve.js.map

package/dist/responsive/screenContainerResolve.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/responsive/breakpoints.ts","../../src/responsive/merge.ts","../../src/responsive/screenContainerResolve.ts"],"names":[],"mappings":"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","file":"screenContainerResolve.js","sourcesContent":["/**\n * Tailwind CSS default `screens` min-width values (px). Single source of truth\n * for preview buckets, manifest breakpoints, and runtime style resolution.\n *\n * @see https://tailwindcss.com/docs/screens\n */\nexport const TAILWIND_DEFAULT_BREAKPOINTS = {\n  sm: 640,\n  md: 768,\n  lg: 1024,\n  xl: 1280,\n  '2xl': 1536,\n} as const;\n\n/** Viewport classification used by preview UI and editing scope. */\nexport type ScreenSizeBucket = 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\n/** Ordered keys stored on layers (`styleBreakpoints`) and merged mobile-first. */\nexport const STYLE_BREAKPOINT_MERGE_ORDER = ['sm', 'md', 'lg', 'xl', '2xl'] as const;\nexport type StyleBreakpointKey = (typeof STYLE_BREAKPOINT_MERGE_ORDER)[number];\n\nexport const SCREEN_SIZE_BUCKET_ORDER: readonly ScreenSizeBucket[] = [\n  'default',\n  'sm',\n  'md',\n  'lg',\n  'xl',\n  '2xl',\n] as const;\n\n/** Buckets shown in the flow builder inspector (xl / 2xl omitted from authoring UI). */\nexport const BUILDER_INSPECTOR_BUCKET_ORDER: readonly ScreenSizeBucket[] = [\n  'default',\n  'sm',\n  'md',\n  'lg',\n] as const;\n\n/** Human-readable bucket titles; ranges lie between consecutive breakpoints. */\nexport const SCREEN_SIZE_BUCKET_LABEL: Record<ScreenSizeBucket, string> = {\n  default: 'Default (< 640px)',\n  sm: 'sm (640–767px)',\n  md: 'md (768–1023px)',\n  lg: 'lg (1024–1279px)',\n  xl: 'xl (1280–1535px)',\n  '2xl': '2xl (1536px+)',\n};\n\n/** Fallback viewport width when no `previewWidthPx` is passed (simulator / static previews). */\nexport const DEFAULT_PREVIEW_VIEWPORT_WIDTH_PX = 390;\n\n/** Maps viewport width (CSS px) to the Tailwind viewport bucket. */\nexport const getScreenSizeBucketForWidth = (width: number): ScreenSizeBucket => {\n  const { sm, md, lg, xl, '2xl': xxl } = TAILWIND_DEFAULT_BREAKPOINTS;\n  if (width < sm) return 'default';\n  if (width < md) return 'sm';\n  if (width < lg) return 'md';\n  if (width < xl) return 'lg';\n  if (width < xxl) return 'xl';\n  return '2xl';\n};\n\n/**\n * Breakpoint keys whose partials apply at this width (mobile-first), e.g.\n * width 800 → `['sm','md']`.\n */\nexport const getActiveStyleBreakpointChain = (widthPx: number): StyleBreakpointKey[] => {\n  const bucket = getScreenSizeBucketForWidth(widthPx);\n  if (bucket === 'default') return [];\n  const idx = STYLE_BREAKPOINT_MERGE_ORDER.indexOf(bucket as StyleBreakpointKey);\n  if (idx < 0) return [];\n  return STYLE_BREAKPOINT_MERGE_ORDER.slice(0, idx + 1) as StyleBreakpointKey[];\n};\n","import {\n  STYLE_BREAKPOINT_MERGE_ORDER,\n  getActiveStyleBreakpointChain,\n} from './breakpoints';\nimport type { StyleBreakpointKey } from './breakpoints';\n\nconst isPlainObject = (v: unknown): v is Record<string, unknown> =>\n  v !== null && typeof v === 'object' && !Array.isArray(v);\n\n/**\n * Deep-merge style-like objects: nested plain objects merge per-key; scalars\n * and arrays replace. Suitable for padding/margin/border/shadow objects.\n */\nexport const deepMergeStyle = <T extends Record<string, unknown>>(\n  base: T | undefined,\n  ...overrides: (Partial<T> | undefined)[]\n): T | undefined => {\n  let acc: T | undefined = base ? ({ ...base } as T) : undefined;\n  for (const o of overrides) {\n    if (!o) continue;\n    acc = acc ?? ({} as T);\n    for (const [k, v] of Object.entries(o) as [keyof T, T[keyof T] | undefined][]) {\n      if (v === undefined) continue;\n      const prev = acc[k as keyof T] as unknown;\n      if (isPlainObject(v) && isPlainObject(prev)) {\n        const merged = deepMergeStyle(prev as Record<string, unknown>, v as Partial<T>);\n        if (merged !== undefined) (acc as Record<string, unknown>)[k as string] = merged;\n      } else {\n        (acc as Record<string, unknown>)[k as string] = v as unknown;\n      }\n    }\n  }\n  return acc;\n};\n\n/**\n * Mobile-first merge: `base` applies below `sm`; each breakpoint partial stacks\n * from `sm` through the bucket implied by `widthPx`.\n */\nexport const mergeResponsivePartial = <T extends Record<string, unknown>>(\n  base: Partial<T> | undefined,\n  breakpoints: Partial<Record<StyleBreakpointKey, Partial<T>>> | undefined,\n  widthPx: number,\n): Partial<T> | undefined => {\n  const chain = getActiveStyleBreakpointChain(widthPx);\n  if (chain.length === 0) return base ? { ...base } : undefined;\n  let acc = base ? ({ ...base } as Partial<T>) : undefined;\n  for (const key of chain) {\n    const patch = breakpoints?.[key];\n    if (!patch) continue;\n    acc = deepMergeStyle(acc as Record<string, unknown> | undefined, patch as Partial<T>) as\n      | Partial<T>\n      | undefined;\n  }\n  return acc;\n};\n\n/**\n * Merge breakpoint partials up to and including `bucket` (not using viewport width).\n * Use when editing a specific bucket's effective preview.\n */\nexport const mergeResponsivePartialUpToBucket = <T extends Record<string, unknown>>(\n  base: Partial<T> | undefined,\n  breakpoints: Partial<Record<StyleBreakpointKey, Partial<T>>> | undefined,\n  bucket: StyleBreakpointKey | 'default',\n): Partial<T> | undefined => {\n  if (bucket === 'default') return base ? { ...base } : undefined;\n  const end = STYLE_BREAKPOINT_MERGE_ORDER.indexOf(bucket);\n  if (end < 0) return base ? { ...base } : undefined;\n  let acc = base ? ({ ...base } as Partial<T>) : undefined;\n  for (let i = 0; i <= end; i++) {\n    const key = STYLE_BREAKPOINT_MERGE_ORDER[i]!;\n    const patch = breakpoints?.[key];\n    if (!patch) continue;\n    acc = deepMergeStyle(acc as Record<string, unknown> | undefined, patch as Partial<T>) as\n      | Partial<T>\n      | undefined;\n  }\n  return acc;\n};\n","import type {\n  ScreenBackgroundFill,\n  ScreenBackgroundFillPatch,\n  ScreenContainerStyle,\n  ScreenContainerStyleBreakpoints,\n} from '@getrheo/contracts';\nimport type { StyleBreakpointKey } from './breakpoints';\nimport { getActiveStyleBreakpointChain, STYLE_BREAKPOINT_MERGE_ORDER } from './breakpoints';\nimport { deepMergeStyle } from './merge';\n\nconst mergeBackgroundFillPatch = (\n  fill: ScreenBackgroundFill,\n  patch: ScreenBackgroundFillPatch,\n): ScreenBackgroundFill => {\n  if (fill.kind === 'color') {\n    return {\n      ...fill,\n      kind: 'color',\n      ...(patch.color !== undefined ? { color: patch.color } : {}),\n      ...(patch.opacity !== undefined ? { opacity: patch.opacity } : {}),\n    };\n  }\n  const scrim =\n    patch.scrim !== undefined\n      ? deepMergeStyle(fill.scrim as Record<string, unknown> | undefined, patch.scrim)\n      : fill.scrim;\n  const shared = {\n    ...fill,\n    ...(patch.fit !== undefined ? { fit: patch.fit } : {}),\n    ...(patch.opacity !== undefined ? { opacity: patch.opacity } : {}),\n    ...(scrim !== undefined ? { scrim } : {}),\n  };\n  if (fill.kind === 'image') {\n    return shared as ScreenBackgroundFill;\n  }\n  return {\n    ...shared,\n    ...(patch.loop !== undefined ? { loop: patch.loop } : {}),\n    ...(patch.autoPlay !== undefined ? { autoPlay: patch.autoPlay } : {}),\n    ...(patch.triggerLayerId !== undefined ? { triggerLayerId: patch.triggerLayerId } : {}),\n    ...(patch.onComplete !== undefined ? { onComplete: patch.onComplete } : {}),\n    ...(patch.audioEnabled !== undefined ? { audioEnabled: patch.audioEnabled } : {}),\n  } as ScreenBackgroundFill;\n};\n\nexport const resolveScreenContainerStyleAtWidth = (\n  base: ScreenContainerStyle | undefined,\n  breakpoints: ScreenContainerStyleBreakpoints | undefined,\n  widthPx: number,\n): ScreenContainerStyle | undefined => {\n  const chain = getActiveStyleBreakpointChain(widthPx);\n  let acc: ScreenContainerStyle | undefined = base ? { ...base } : undefined;\n  for (const key of chain) {\n    const patch = breakpoints?.[key as StyleBreakpointKey];\n    if (!patch) continue;\n    acc = acc ?? {};\n    if (patch.padding !== undefined) acc = { ...acc, padding: patch.padding };\n    if (patch.margin !== undefined) acc = { ...acc, margin: patch.margin };\n    if (patch.insetSafeArea !== undefined) acc = { ...acc, insetSafeArea: patch.insetSafeArea };\n    if (patch.backgroundFillPatch && acc.backgroundFill) {\n      acc = {\n        ...acc,\n        backgroundFill: mergeBackgroundFillPatch(acc.backgroundFill, patch.backgroundFillPatch),\n      };\n    }\n  }\n  return acc;\n};\n\nexport const screenBackgroundFillUsesMedia = (\n  fill: ScreenBackgroundFill | undefined,\n): fill is Extract<ScreenBackgroundFill, { kind: 'image' | 'video' }> =>\n  fill?.kind === 'image' || fill?.kind === 'video';\n\n/** Effective shell style for builder inspector at a specific breakpoint bucket. */\nexport const resolveScreenContainerForEditBucket = (\n  base: ScreenContainerStyle | undefined,\n  breakpoints: ScreenContainerStyleBreakpoints | undefined,\n  bucket: StyleBreakpointKey | 'default',\n): ScreenContainerStyle | undefined => {\n  if (bucket === 'default') return base ? { ...base } : undefined;\n  const end = STYLE_BREAKPOINT_MERGE_ORDER.indexOf(bucket);\n  if (end < 0) return base ? { ...base } : undefined;\n  let acc: ScreenContainerStyle | undefined = base ? { ...base } : {};\n  for (let i = 0; i <= end; i++) {\n    const patch = breakpoints?.[STYLE_BREAKPOINT_MERGE_ORDER[i]!];\n    if (!patch) continue;\n    acc = acc ?? {};\n    if (patch.padding !== undefined) acc = { ...acc, padding: patch.padding };\n    if (patch.margin !== undefined) acc = { ...acc, margin: patch.margin };\n    if (patch.insetSafeArea !== undefined) acc = { ...acc, insetSafeArea: patch.insetSafeArea };\n    if (patch.backgroundFillPatch && acc.backgroundFill) {\n      acc = {\n        ...acc,\n        backgroundFill: mergeBackgroundFillPatch(acc.backgroundFill, patch.backgroundFillPatch),\n      };\n    }\n  }\n  const hasKeys =\n    acc &&\n    (acc.padding !== undefined ||\n      acc.margin !== undefined ||\n      acc.insetSafeArea !== undefined ||\n      acc.backgroundFill !== undefined);\n  return hasKeys ? acc : undefined;\n};\n"]}

package/dist/responsive/screenShellInsets.d.ts

@@ -0,0 +1,11 @@
+import { Padding } from '@getrheo/contracts';
+
+/** Per-edge sum of two padding objects; omits zero edges. */
+declare const addPadding: (a?: Padding, b?: Padding) => Padding | undefined;
+declare const resolveEffectiveScreenShellPadding: (opts: {
+    manual?: Padding;
+    insetSafeArea?: boolean;
+    safeAreaInsets: Padding;
+}) => Padding | undefined;
+
+export { addPadding, resolveEffectiveScreenShellPadding };

package/dist/responsive/screenShellInsets.js

@@ -0,0 +1,26 @@
+// src/responsive/screenShellInsets.ts
+var edge = (a, b) => {
+  const sum = (a ?? 0) + (b ?? 0);
+  return sum === 0 ? void 0 : sum;
+};
+var addPadding = (a, b) => {
+  if (!a && !b) return void 0;
+  const out = {
+    t: edge(a?.t, b?.t),
+    r: edge(a?.r, b?.r),
+    b: edge(a?.b, b?.b),
+    l: edge(a?.l, b?.l)
+  };
+  const cleaned = Object.fromEntries(
+    Object.entries(out).filter(([, v]) => v !== void 0)
+  );
+  return Object.keys(cleaned).length === 0 ? void 0 : cleaned;
+};
+var resolveEffectiveScreenShellPadding = (opts) => {
+  if (!opts.insetSafeArea) return opts.manual;
+  return addPadding(opts.manual, opts.safeAreaInsets);
+};
+
+export { addPadding, resolveEffectiveScreenShellPadding };
+//# sourceMappingURL=screenShellInsets.js.map
+//# sourceMappingURL=screenShellInsets.js.map

package/dist/responsive/screenShellInsets.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/responsive/screenShellInsets.ts"],"names":[],"mappings":";AAEA,IAAM,IAAA,GAAO,CAAC,CAAA,EAAuB,CAAA,KAA8C;AACjF,EAAA,MAAM,GAAA,GAAA,CAAO,CAAA,IAAK,CAAA,KAAM,CAAA,IAAK,CAAA,CAAA;AAC7B,EAAA,OAAO,GAAA,KAAQ,IAAI,MAAA,GAAY,GAAA;AACjC,CAAA;AAGO,IAAM,UAAA,GAAa,CAAC,CAAA,EAAa,CAAA,KAAqC;AAC3E,EAAA,IAAI,CAAC,CAAA,IAAK,CAAC,CAAA,EAAG,OAAO,MAAA;AACrB,EAAA,MAAM,GAAA,GAAe;AAAA,IACnB,CAAA,EAAG,IAAA,CAAK,CAAA,EAAG,CAAA,EAAG,GAAG,CAAC,CAAA;AAAA,IAClB,CAAA,EAAG,IAAA,CAAK,CAAA,EAAG,CAAA,EAAG,GAAG,CAAC,CAAA;AAAA,IAClB,CAAA,EAAG,IAAA,CAAK,CAAA,EAAG,CAAA,EAAG,GAAG,CAAC,CAAA;AAAA,IAClB,CAAA,EAAG,IAAA,CAAK,CAAA,EAAG,CAAA,EAAG,GAAG,CAAC;AAAA,GACpB;AACA,EAAA,MAAM,UAAU,MAAA,CAAO,WAAA;AAAA,IACrB,MAAA,CAAO,OAAA,CAAQ,GAAG,CAAA,CAAE,MAAA,CAAO,CAAC,GAAG,CAAC,CAAA,KAAM,CAAA,KAAM,MAAS;AAAA,GACvD;AACA,EAAA,OAAO,OAAO,IAAA,CAAK,OAAO,CAAA,CAAE,MAAA,KAAW,IAAI,MAAA,GAAY,OAAA;AACzD;AAEO,IAAM,kCAAA,GAAqC,CAAC,IAAA,KAIxB;AACzB,EAAA,IAAI,CAAC,IAAA,CAAK,aAAA,EAAe,OAAO,IAAA,CAAK,MAAA;AACrC,EAAA,OAAO,UAAA,CAAW,IAAA,CAAK,MAAA,EAAQ,IAAA,CAAK,cAAc,CAAA;AACpD","file":"screenShellInsets.js","sourcesContent":["import type { Padding } from '@getrheo/contracts';\n\nconst edge = (a: number | undefined, b: number | undefined): number | undefined => {\n  const sum = (a ?? 0) + (b ?? 0);\n  return sum === 0 ? undefined : sum;\n};\n\n/** Per-edge sum of two padding objects; omits zero edges. */\nexport const addPadding = (a?: Padding, b?: Padding): Padding | undefined => {\n  if (!a && !b) return undefined;\n  const out: Padding = {\n    t: edge(a?.t, b?.t),\n    r: edge(a?.r, b?.r),\n    b: edge(a?.b, b?.b),\n    l: edge(a?.l, b?.l),\n  };\n  const cleaned = Object.fromEntries(\n    Object.entries(out).filter(([, v]) => v !== undefined),\n  ) as Padding;\n  return Object.keys(cleaned).length === 0 ? undefined : cleaned;\n};\n\nexport const resolveEffectiveScreenShellPadding = (opts: {\n  manual?: Padding;\n  insetSafeArea?: boolean;\n  safeAreaInsets: Padding;\n}): Padding | undefined => {\n  if (!opts.insetSafeArea) return opts.manual;\n  return addPadding(opts.manual, opts.safeAreaInsets);\n};\n"]}

package/dist/restingMotion.d.ts

@@ -0,0 +1,167 @@
+import { RestingMotionPreset, RestingMotion, RestingMotionEntry } from '@getrheo/contracts/layers';
+import { Screen } from '@getrheo/contracts/screens';
+
+type RuntimeStyle = Record<string, string | number | undefined>;
+declare const RESTING_MOTION_DEFAULT_DURATION_MS: Record<RestingMotionPreset, number>;
+/** Matches {@link RestingMotionSchema} `durationMs` / `scalePatternDurationMs` bounds. */
+declare const RESTING_MOTION_SEGMENT_DURATION_MS_MIN = 200;
+declare const RESTING_MOTION_SEGMENT_DURATION_MS_MAX = 20000;
+declare const clampRestingMotionSegmentDurationMs: (ms: number) => number;
+/** Synthetic id for manifests that only had {@link Layer.restingMotion} (no `restingMotions`). */
+declare const LEGACY_RESTING_MOTION_ID: "__legacy";
+/**
+ * Canonical list of motion segments for a layer (array wins; legacy single field becomes one entry).
+ */
+declare const layerRestingMotionEntries: (layer: {
+    restingMotion?: RestingMotion;
+    restingMotions?: RestingMotionEntry[] | null;
+}) => RestingMotionEntry[];
+/** Persist motion segments; clears legacy single field when using the array. */
+declare const layerWithRestingMotionEntries: <L extends {
+    restingMotion?: RestingMotion;
+    restingMotions?: RestingMotionEntry[];
+}>(layer: L, entries: RestingMotionEntry[]) => L;
+/**
+ * Non-loop scale: keep timeline segment and pattern duration identical in saved state.
+ * Call when updating motion speed or clip length from the builder.
+ */
+declare const restingMotionSyncScaleNonLoopClipAndPattern: (r: RestingMotion, ms: number) => RestingMotion;
+/** Align stored fields after paste/import when scale is one-shot. */
+declare const restingMotionNormalizeScaleNonLoopClip: (r: RestingMotion) => RestingMotion;
+/** Timeline segment length: motion runs from start until start + this value. */
+declare const restingMotionEffectiveDurationMs: (r: RestingMotion) => number;
+/** One full pattern cycle (ms), used when looping. */
+declare const restingMotionCycleDurationMs: (r: RestingMotion) => number;
+/**
+ * Value for the Motion speed slider: one-shot → clip length ({@link restingMotionEffectiveDurationMs});
+ * looping → one repeat ({@link restingMotionCycleDurationMs}).
+ */
+declare const restingMotionMotionSpeedSliderMs: (r: RestingMotion) => number;
+declare const restingMotionIntensity: (r: RestingMotion) => number;
+declare const restingMotionDelayAfterMountEndMs: (r: RestingMotion) => number;
+
+/**
+ * Latest end time (ms from screen mount) of mount/stagger clips for a layer.
+ * `0` when none — layer motion may run immediately.
+ */
+declare const layerMountClipsEndMs: (screen: Screen, layerId: string) => number;
+/**
+ * Absolute time (ms from screen mount) when layer motion should begin: after all
+ * mount/stagger clips end, plus optional author delay.
+ */
+declare const layerRestingMotionStartMs: (screen: Screen, layerId: string, cfg: RestingMotion) => number;
+/** Latest end (ms) of any layer motion segment (start + segment duration) — for timeline rulers. */
+declare const screenRestingTimelineExtentMs: (screen: Screen) => number;
+/**
+ * Upper bound for editor scrub time (ms from screen mount). Mount/unmount clips
+ * alone cap at {@link screenAnimationsDurationMs}; layer motion may start and
+ * end later, so the scrub clock must allow times up to this value or motion
+ * never becomes "allowed" in the preview.
+ */
+declare const motionTimelineScrubClampMs: (screen: Screen) => number;
+/** Default ruler span when the screen has no timed motion content yet. */
+declare const DEFAULT_WORKBENCH_TIMELINE_MS = 10000;
+/**
+ * Animation workbench ruler/scrub length (ms). Grows with clips, resting motion,
+ * and timed loader segments; never capped. Uses
+ * {@link DEFAULT_WORKBENCH_TIMELINE_MS} only when nothing is scheduled yet.
+ */
+declare const workbenchTimelineTotalMs: (screen: Screen) => number;
+declare const layerRestingMotionEndMs: (screen: Screen, layerId: string, cfg: RestingMotion) => number;
+/** Pure gate for tests and web scrub (no React): inside the motion segment [start, end). */
+declare const restingMotionAllowedAtTime: (screen: Screen, layerId: string, tMs: number, cfg: RestingMotion) => boolean;
+/** Elapsed ms inside the motion segment, or null if outside [start, end). */
+declare const restingMotionLocalElapsedMs: (screen: Screen, layerId: string, cfg: RestingMotion, tMs: number) => number | null;
+
+/** Peak lift (px) matched to legacy `14 * intensity` when {@link RestingMotion.bounceAmplitudePx} is unset. */
+declare const RESTING_MOTION_BOUNCE_BASE_PX = 14;
+declare const restingMotionBounceAmplitudePx: (r: RestingMotion) => number;
+/** Single bounce arc: 0 → peak → 0 over phase ∈ [0, 1]. Negative Y is upward. */
+declare const bouncePhaseToTranslateY: (ph: number, amplitudePx: number) => number;
+/** Default scale magnitude (%), used when {@link RestingMotion.scalePercent} / legacy fields omitted. */
+declare const RESTING_MOTION_DEFAULT_SCALE_UP_PERCENT = 8;
+declare const RESTING_MOTION_DEFAULT_SCALE_DOWN_PERCENT = 0;
+declare const RESTING_MOTION_DEFAULT_SCALE_PERCENT = 8;
+/** Default peak Y (% of layer box) when translate percent peaks omitted (no legacy px). */
+declare const RESTING_MOTION_DEFAULT_TRANSLATE_PEAK_Y_PERCENT = 6;
+/** Default legacy peak Y in px when only deprecated {@link RestingMotion.translateRangePx} applies. */
+declare const RESTING_MOTION_DEFAULT_TRANSLATE_PEAK_Y_PX = 6;
+/** @deprecated Use {@link RESTING_MOTION_DEFAULT_TRANSLATE_PEAK_Y_PX}. */
+declare const RESTING_MOTION_DEFAULT_TRANSLATE_RANGE_PX = 6;
+/** Default peak rotation (°) from rest when {@link RestingMotion.rotateMaxDeg} is omitted. */
+declare const RESTING_MOTION_DEFAULT_ROTATE_DEG = 5;
+declare const RESTING_MOTION_PULSE_DIP_BASE = 0.38;
+/** Scale preset: ms for one rest → peak → rest cycle (authoring + native + web fallback). */
+declare const restingMotionScalePatternDurationMs: (r: RestingMotion) => number;
+/**
+ * Phase 0..1 for the current motion pattern. Non-loop: one full pattern stretched over segment.
+ * Loop: pattern repeats every cycle duration within the segment.
+ */
+declare const restingMotionPhase01: (cfg: RestingMotion, localMs: number) => number;
+declare const restingMotionScaleDirection: (r: RestingMotion) => "up" | "down";
+declare const restingMotionScalePercentResolved: (r: RestingMotion) => number;
+declare const restingMotionScaleAmountFraction: (r: RestingMotion) => number;
+/** Scale preset: return to rest after the peak (default). If false, ramp to peak and hold (per cycle when looping). */
+declare const restingMotionScaleSpringBack: (r: RestingMotion) => boolean;
+/** @deprecated Prefer {@link restingMotionScaleAmountFraction} / {@link restingMotionScalePeakMultiplier}. */
+declare const restingMotionScaleUpFraction: (r: RestingMotion) => number;
+/** @deprecated Prefer {@link restingMotionScaleAmountFraction} / {@link restingMotionScalePeakMultiplier}. */
+declare const restingMotionScaleDownFraction: (r: RestingMotion) => number;
+/** Peak scale multiplier (1±amount) for CSS vars and authoring; independent of {@link restingMotionScaleSpringBack}. */
+declare const restingMotionScalePeakMultiplier: (cfg: RestingMotion) => number;
+/**
+ * One scale cycle over ph ∈ [0,1]: rest (1) → peak (1±amount) → rest when spring back is on;
+ * linear rest → peak when off (matches rotate ramp semantics).
+ */
+declare const restingMotionScaleAtPhase: (cfg: RestingMotion, ph: number) => number;
+/**
+ * Authoring translate peaks in % of the layer box (−200–200) for the editor. Maps legacy px fields
+ * to a comparable % for display (old ±80 px range → full ±200% scale).
+ */
+declare const restingMotionTranslateAuthoringPeakPercent: (r: RestingMotion) => {
+    x: number;
+    y: number;
+};
+/** @deprecated Use {@link restingMotionTranslateAuthoringPeakPercent} or {@link restingMotionTranslatePeakResolved}. */
+declare const restingMotionTranslateAuthoringPeakPx: (r: RestingMotion) => {
+    x: number;
+    y: number;
+};
+/** Resolved peak translation for transform: % of layer box, or legacy px. After intensity; clamped. */
+declare const restingMotionTranslatePeakResolved: (r: RestingMotion) => {
+    unit: "percent" | "px";
+    x: number;
+    y: number;
+};
+/** @deprecated Use {@link restingMotionTranslatePeakResolved}. */
+declare const restingMotionTranslatePeakPx: (r: RestingMotion) => {
+    x: number;
+    y: number;
+};
+/** Translate preset: spring back to origin after the peak (default). */
+declare const restingMotionTranslateSpringBack: (r: RestingMotion) => boolean;
+/** Resolved peak rotation (°), clamped to [0, 360]. Intensity scales the authored angle. */
+declare const restingMotionRotateMaxDeg: (r: RestingMotion) => number;
+/** Rotate preset: oscillate back to 0° after the peak (default). If false, ramp to peak and hold (per cycle when looping). */
+declare const restingMotionRotateSpringBack: (r: RestingMotion) => boolean;
+/** Rotate preset: authored spin direction (default clockwise). */
+declare const restingMotionRotateDirection: (r: RestingMotion) => "clockwise" | "counterclockwise";
+/** +1 for clockwise, −1 for counter-clockwise (anti-clockwise). */
+declare const restingMotionRotateSign: (r: RestingMotion) => 1 | -1;
+declare const restingMotionPulseMinOpacity: (r: RestingMotion) => number;
+/** Sample motion at phase 0..1 (same geometry as web keyframes / native worklets). */
+declare const restingMotionSampleStyle: (cfg: RestingMotion, ph: number) => RuntimeStyle;
+/** Driven by timeline clock (editor / scrub). Returns null outside the motion segment. */
+declare const restingMotionStyleAtTime: (screen: Screen, layerId: string, cfg: RestingMotion, tMs: number) => RuntimeStyle | null;
+/**
+ * Injected once in web sim DOM. Intensity scales via `--ob-rm-i` on the
+ * animated element (default 1).
+ */
+declare const RESTING_MOTION_KEYFRAMES_CSS: string;
+/**
+ * Fallback when no motion clock is available (e.g. static export). Prefer
+ * {@link restingMotionStyleAtTime} in the editor where the timeline drives sampling.
+ */
+declare const restingMotionWebStyle: (config: RestingMotion) => RuntimeStyle | null;
+
+export { DEFAULT_WORKBENCH_TIMELINE_MS, LEGACY_RESTING_MOTION_ID, RESTING_MOTION_BOUNCE_BASE_PX, RESTING_MOTION_DEFAULT_DURATION_MS, RESTING_MOTION_DEFAULT_ROTATE_DEG, RESTING_MOTION_DEFAULT_SCALE_DOWN_PERCENT, RESTING_MOTION_DEFAULT_SCALE_PERCENT, RESTING_MOTION_DEFAULT_SCALE_UP_PERCENT, RESTING_MOTION_DEFAULT_TRANSLATE_PEAK_Y_PERCENT, RESTING_MOTION_DEFAULT_TRANSLATE_PEAK_Y_PX, RESTING_MOTION_DEFAULT_TRANSLATE_RANGE_PX, RESTING_MOTION_KEYFRAMES_CSS, RESTING_MOTION_PULSE_DIP_BASE, RESTING_MOTION_SEGMENT_DURATION_MS_MAX, RESTING_MOTION_SEGMENT_DURATION_MS_MIN, type RuntimeStyle, bouncePhaseToTranslateY, clampRestingMotionSegmentDurationMs, layerMountClipsEndMs, layerRestingMotionEndMs, layerRestingMotionEntries, layerRestingMotionStartMs, layerWithRestingMotionEntries, motionTimelineScrubClampMs, restingMotionAllowedAtTime, restingMotionBounceAmplitudePx, restingMotionCycleDurationMs, restingMotionDelayAfterMountEndMs, restingMotionEffectiveDurationMs, restingMotionIntensity, restingMotionLocalElapsedMs, restingMotionMotionSpeedSliderMs, restingMotionNormalizeScaleNonLoopClip, restingMotionPhase01, restingMotionPulseMinOpacity, restingMotionRotateDirection, restingMotionRotateMaxDeg, restingMotionRotateSign, restingMotionRotateSpringBack, restingMotionSampleStyle, restingMotionScaleAmountFraction, restingMotionScaleAtPhase, restingMotionScaleDirection, restingMotionScaleDownFraction, restingMotionScalePatternDurationMs, restingMotionScalePeakMultiplier, restingMotionScalePercentResolved, restingMotionScaleSpringBack, restingMotionScaleUpFraction, restingMotionStyleAtTime, restingMotionSyncScaleNonLoopClipAndPattern, restingMotionTranslateAuthoringPeakPercent, restingMotionTranslateAuthoringPeakPx, restingMotionTranslatePeakPx, restingMotionTranslatePeakResolved, restingMotionTranslateSpringBack, restingMotionWebStyle, screenRestingTimelineExtentMs, workbenchTimelineTotalMs };