@developer_tribe/react-builder 1.2.46 → 1.2.48

package/src/styles/components/_editor-shell.scss

@@ -73,27 +73,205 @@
   display: flex;
   flex-direction: row;
   align-items: stretch;
-  gap: 8px;
+  gap: 6px;
   overflow: auto;
   height: 60px;
   padding: sizes.$spaceTight;
+  min-width: 0;
 }
 
 .editor-device-button {
+  --device-preview-height: 30px;
   position: relative;
-  min-width: 160px;
+  min-width: 92px;
   height: 100%;
+  padding: 4px 8px 5px;
   border: 1px solid colors.$borderColor;
-  border-radius: 6px;
+  border-radius: sizes.$radiusRounded;
   background: colors.$surfaceColor;
   color: colors.$textColor;
   cursor: pointer;
-  font-size: 12px;
+  font-size: sizes.$fontSizeXs;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 4px;
+  overflow: hidden;
+  transition:
+    border-color 0.18s ease,
+    box-shadow 0.18s ease,
+    transform 0.12s ease;
+
+  &:hover {
+    border-color: hsl(
+      var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.35
+    );
+  }
+
+  &:focus-visible {
+    outline: none;
+    border-color: colors.$accentColor;
+    box-shadow: 0 0 0 2px
+      hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)) / 0.2);
+  }
+
   &.editor-device-button--selected {
-    border-color: colors.$textColor;
+    border-color: colors.$accentColor;
+    box-shadow: 0 0 0 1px
+      hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)) / 0.4) inset;
   }
 }
 
+.editor-device-button--header {
+  min-width: 94px;
+  max-width: 112px;
+}
+
+.editor-device-button--modal {
+  --device-preview-height: 58px;
+  min-width: 152px;
+  min-height: 136px;
+  height: 136px;
+  padding: 10px 10px 8px;
+  gap: 8px;
+}
+
+.editor-device-button__preview {
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+.editor-device-button__frame {
+  position: relative;
+  height: var(--device-preview-height);
+  aspect-ratio: 9 / 19.5;
+  min-width: 10px;
+  max-width: calc(var(--device-preview-height) * 1.85);
+  border-radius: clamp(6px, calc(var(--device-preview-height) * 0.3), 16px);
+  border: 1px solid
+    hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.28);
+  background: linear-gradient(
+    160deg,
+    hsl(var(--muted, var(--rb-muted, 220 14.3% 95.9%))),
+    hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)))
+  );
+  box-shadow:
+    0 2px 6px hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.18),
+    inset 0 1px 0 hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)));
+  overflow: hidden;
+}
+
+.editor-device-button__frame[data-type='tablet'] {
+  border-radius: clamp(4px, calc(var(--device-preview-height) * 0.16), 10px);
+}
+
+.editor-device-button__frame[data-platform='ios'] {
+  background: linear-gradient(
+    160deg,
+    hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.18),
+    hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.06)
+  );
+}
+
+.editor-device-button__frame[data-platform='android'] {
+  background: linear-gradient(
+    160deg,
+    hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)) / 0.2),
+    hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.07)
+  );
+}
+
+.editor-device-button__screen {
+  position: absolute;
+  inset: 2px;
+  border-radius: inherit;
+  background: linear-gradient(
+    180deg,
+    hsl(var(--background, var(--rb-background, 220 14.3% 95.9%)) / 0.95),
+    hsl(var(--muted, var(--rb-muted, 220 14.3% 95.9%)) / 0.85)
+  );
+}
+
+.editor-device-button__notch {
+  position: absolute;
+  top: 2px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 34%;
+  max-width: 14px;
+  height: 3px;
+  border-radius: 0 0 4px 4px;
+  background: hsl(
+    var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.35
+  );
+}
+
+.editor-device-button--modal .editor-device-button__notch {
+  height: 4px;
+}
+
+.editor-device-button__frame[data-type='tablet'] .editor-device-button__notch {
+  display: none;
+}
+
+.editor-device-button__name {
+  width: 100%;
+  padding: 0 16px 0 12px;
+  text-align: center;
+  font-size: sizes.$fontSizeXs;
+  font-weight: 600;
+  line-height: 1.05;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.editor-device-button__popover {
+  position: absolute;
+  top: 6px;
+  left: 50%;
+  transform: translate(-50%, -6px) scale(0.98);
+  width: calc(100% - 12px);
+  padding: 4px 6px;
+  border-radius: sizes.$radiusMid;
+  border: 1px solid colors.$borderColor;
+  background: hsl(var(--card, var(--rb-card, 0 0% 100%)) / 0.98);
+  box-shadow: sizes.$shadowTooltip;
+  opacity: 0;
+  pointer-events: none;
+  z-index: 2;
+  transition:
+    opacity 0.16s ease,
+    transform 0.16s ease;
+}
+
+.editor-device-button:hover .editor-device-button__popover,
+.editor-device-button:focus-visible .editor-device-button__popover {
+  opacity: 1;
+  transform: translate(-50%, 0) scale(1);
+}
+
+.editor-device-button__popover-title {
+  display: block;
+  font-size: 10px;
+  font-weight: 700;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.editor-device-button__popover-meta {
+  display: block;
+  margin-top: 1px;
+  font-size: 10px;
+  color: colors.$mutedTextColor;
+}
+
 .editor-device-button__platform {
   position: absolute;
   bottom: 4px;
@@ -101,9 +279,10 @@
   background-color: colors.$muted;
   border-radius: 50%;
   display: block;
-  width: 22px;
-  height: 22px;
+  width: 16px;
+  height: 16px;
   overflow: hidden;
+  z-index: 3;
 }
 
 .editor-device-button__platform img {
@@ -111,13 +290,40 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  max-width: 11px;
-  max-height: 11px;
+  max-width: 9px;
+  max-height: 9px;
   width: auto;
   height: auto;
 }
 
+.editor-device-button--modal .editor-device-button__platform {
+  width: 18px;
+  height: 18px;
+}
+
+.editor-device-button--modal .editor-device-button__platform img {
+  max-width: 10px;
+  max-height: 10px;
+}
+
+.editor-device-button__favorite {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  cursor: pointer;
+  z-index: 3;
+  display: inline-flex;
+  line-height: 0;
+}
+
 .editor-device-button__edit {
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  cursor: pointer;
+  z-index: 3;
+  display: inline-flex;
+  line-height: 0;
   transition:
     opacity 0.2s ease,
     transform 0.2s ease;
@@ -127,6 +333,26 @@
   }
 }
 
+.editor-device-button--more {
+  min-width: 88px;
+  max-width: 102px;
+  justify-content: center;
+  gap: 0;
+  border-style: dashed;
+  background: hsl(var(--muted, var(--rb-muted, 220 14.3% 95.9%)) / 0.35);
+}
+
+.editor-device-button__more-label {
+  font-size: sizes.$fontSizeXs;
+  font-weight: 600;
+  line-height: 1.2;
+  color: colors.$mutedTextColor;
+}
+
+.editor-device-button--more:hover .editor-device-button__more-label {
+  color: colors.$textColor;
+}
+
 .editor-header__actions {
   margin-left: auto; /* push actions to the far right */
   display: flex;

package/src/styles/components/_global-provider.scss

@@ -0,0 +1,131 @@
+/* Page transition animations for GlobalProvider (platform-style names). */
+$page-transition-duration: 0.3s;
+$page-transition-easing: cubic-bezier(0.32, 0.72, 0, 1);
+
+.global-provider-page {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.global-provider-page--none {
+  animation: none;
+}
+
+.global-provider-page--default {
+  animation: global-provider-fade $page-transition-duration $page-transition-easing;
+}
+
+.global-provider-page--fade {
+  animation: global-provider-fade $page-transition-duration $page-transition-easing;
+}
+
+@keyframes global-provider-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.global-provider-page--fade_from_bottom {
+  animation: global-provider-fade-from-bottom $page-transition-duration $page-transition-easing;
+}
+
+@keyframes global-provider-fade-from-bottom {
+  from {
+    opacity: 0;
+    transform: translateY(24px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.global-provider-page--fade_from_right {
+  animation: global-provider-fade-from-right $page-transition-duration $page-transition-easing;
+}
+
+@keyframes global-provider-fade-from-right {
+  from {
+    opacity: 0;
+    transform: translateX(24px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.global-provider-page--reveal_from_bottom {
+  animation: global-provider-reveal-from-bottom $page-transition-duration $page-transition-easing;
+}
+
+@keyframes global-provider-reveal-from-bottom {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.global-provider-page--scale_from_center {
+  animation: global-provider-scale-from-center $page-transition-duration $page-transition-easing;
+}
+
+@keyframes global-provider-scale-from-center {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.global-provider-page--slide_from_right {
+  animation: global-provider-slide-from-right $page-transition-duration $page-transition-easing;
+}
+
+@keyframes global-provider-slide-from-right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+.global-provider-page--slide_from_left {
+  animation: global-provider-slide-from-left $page-transition-duration $page-transition-easing;
+}
+
+@keyframes global-provider-slide-from-left {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+.global-provider-page--slide_from_bottom {
+  animation: global-provider-slide-from-bottom $page-transition-duration $page-transition-easing;
+}
+
+@keyframes global-provider-slide-from-bottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}

package/src/styles/index.scss

@@ -16,6 +16,7 @@
 @use './components/mockos-router';
 @use './components/bottom-bar';
 @use './components/onboard';
+@use './components/global-provider';
 
 @use './components/webview';
 @use './components/checkbox';

package/src/styles/modals/_device-selector.scss

@@ -7,12 +7,12 @@
 .device-selector-modal__grid {
   padding: sizes.$spaceRoomy;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
   gap: sizes.$spaceCozy;
   overflow: auto;
 }
 
 .device-selector-modal__grid .editor-device-button {
-  height: 80px;
+  height: 136px;
   min-width: unset;
 }

package/src/styles/modals/_prompt-manager-modal.scss

@@ -3,15 +3,22 @@
 @use '../foundation/typography' as typography;
 
 .prompt-manager-modal__content {
-  width: calc(100vw - 32px);
-  height: calc(100vh - 32px);
-  max-width: 1400px;
-  max-height: calc(100vh - 32px);
+  width: calc(100vw - 48px);
+  height: calc(100vh - 48px);
+  max-width: 1240px;
+  max-height: calc(100vh - 48px);
   padding: 0;
   display: flex;
   flex-direction: column;
 }
 
+.prompt-manager-modal__content--ai-layout {
+  width: min(1320px, calc(100vw - 36px));
+  height: min(860px, calc(100vh - 28px));
+  max-height: calc(100vh - 28px);
+  border-radius: 14px;
+}
+
 .prompt-manager-modal__header {
   padding: sizes.$spaceComfy sizes.$spaceRoomy;
   border-bottom: 1px solid colors.$borderColor;
@@ -54,7 +61,11 @@
   padding: sizes.$spaceRoomy;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  overflow: auto;
+}
+
+.prompt-manager-modal__body--ai-layout {
+  padding: sizes.$spaceComfy;
 }
 
 .prompt-manager-modal__editor-wrap {
@@ -71,6 +82,65 @@
   justify-content: space-between;
 }
 
+.prompt-manager-modal__toolbar--stack {
+  flex-direction: column;
+  align-items: stretch;
+  gap: sizes.$spaceComfy;
+}
+
+.prompt-manager-modal__inline-row {
+  display: flex;
+  align-items: flex-end;
+  gap: sizes.$spaceComfy;
+  flex-wrap: wrap;
+}
+
+.prompt-manager-modal__inline-row--end {
+  justify-content: flex-end;
+}
+
+.prompt-manager-modal__label {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 12px;
+  color: colors.$mutedTextColor;
+}
+
+.prompt-manager-modal__select {
+  min-width: 170px;
+  border: 1px solid colors.$borderColor;
+  border-radius: sizes.$radiusRounded;
+  background: colors.$surfaceColor;
+  color: colors.$textColor;
+  padding: 8px 10px;
+  font-size: 13px;
+  outline: none;
+
+  &:focus {
+    border-color: colors.$primary;
+    box-shadow: 0 0 0 2px color-mix(in srgb, colors.$primary, transparent 90%);
+  }
+}
+
+.prompt-manager-modal__prompt-input {
+  min-height: 90px;
+  resize: vertical;
+  border: 1px solid colors.$borderColor;
+  border-radius: sizes.$radiusRounded;
+  background: colors.$surfaceColor;
+  color: colors.$textColor;
+  padding: sizes.$spaceComfy;
+  font-size: 13px;
+  line-height: 1.45;
+  outline: none;
+
+  &:focus {
+    border-color: colors.$primary;
+    box-shadow: 0 0 0 2px color-mix(in srgb, colors.$primary, transparent 90%);
+  }
+}
+
 .prompt-manager-modal__editor {
   flex: 1;
   width: 100%;

package/src/utils/analyseNodeByPatterns.ts

@@ -439,12 +439,15 @@ function validateAttributesByPattern(
       if (
         attrName === 'title' ||
         attrName === 'description' ||
-        attrName === 'testID'
+        attrName === 'testID' ||
+        attrName === 'animation'
       ) {
         const res = validateAttributeValue(
           pattern.pattern.type,
           attrValue,
-          attrName === 'testID' ? 'string' : attrName,
+          attrName === 'testID' || attrName === 'animation'
+            ? 'string'
+            : attrName,
           joinPath(path, attrName),
         );
         if (!res.valid) return res;

package/src/utils/nodeTree.ts

@@ -1,4 +1,5 @@
 import type { Node, NodeData } from '../types/Node';
+import eventConstants from '../patterns/event-constants.json';
 
 export function deleteNodeFromTree(root: Node, target: Node): Node {
   if (root === null || root === undefined) return root;
@@ -97,3 +98,117 @@ export function findNodeByKey(root: Node, key?: string): Node | null {
 
   return null;
 }
+
+export type ProjectOptions = {
+  pageKeys: string[];
+  conditionKeys: string[];
+  placementKeys: string[];
+  formFieldNames: string[];
+  eventTypes: string[];
+  validationTypes: string[];
+};
+
+/**
+ * Traverses the entire node tree to dynamically discover project-level metadata
+ * (page keys, condition keys, form field names, etc.) and merges them with
+ * central constants from event-constants.json.
+ *
+ * This enables the Attributes Editor to provide a complete list of valid options
+ * for dropdown fields, combining predefined standards with actually used keys
+ * in the current design.
+ */
+export function collectProjectMetadata(root: Node): ProjectOptions {
+  const pageKeys = new Set<string>();
+  const conditionKeys = new Set<string>();
+  const placementKeys = new Set<string>();
+  const formFieldNames = new Set<string>();
+  const eventTypes = new Set<string>();
+
+  function traverse(node: Node) {
+    if (!node || typeof node === 'string') return;
+
+    if (Array.isArray(node)) {
+      node.forEach(traverse);
+      return;
+    }
+
+    const data = node as NodeData;
+    const type = data.type;
+    const attrs = (data.attributes ?? {}) as Record<string, any>;
+
+    // Collect Page Keys
+    if (type === 'GlobalProvider' && Array.isArray(data.children)) {
+      data.children.forEach((child) => {
+        if (typeof child === 'object' && child !== null && 'key' in child) {
+          if (typeof child.key === 'string') pageKeys.add(child.key);
+        }
+      });
+    }
+    if (attrs.pageKey && typeof attrs.pageKey === 'string') {
+      pageKeys.add(attrs.pageKey);
+    }
+
+    // Collect Condition Keys
+    if (attrs.conditionKey && typeof attrs.conditionKey === 'string') {
+      conditionKeys.add(attrs.conditionKey);
+    }
+    if (Array.isArray(attrs.skipConditions)) {
+      attrs.skipConditions.forEach((entry: any) => {
+        if (entry?.conditionKey) conditionKeys.add(entry.conditionKey);
+      });
+    }
+
+    // Collect Placement Keys
+    if (attrs.placementKey && typeof attrs.placementKey === 'string') {
+      placementKeys.add(attrs.placementKey);
+    }
+
+    // Collect Form Field Names
+    if (type.startsWith('Form') && type !== 'FormProvider' && attrs.name) {
+      if (typeof attrs.name === 'string') formFieldNames.add(attrs.name);
+    }
+
+    // Collect from events
+    if (Array.isArray(attrs.events)) {
+      attrs.events.forEach((evt: any) => {
+        if (evt.type && typeof evt.type === 'string') eventTypes.add(evt.type);
+        if (evt.navigate_to) pageKeys.add(evt.navigate_to);
+        if (evt.placementKey) placementKeys.add(evt.placementKey);
+        if (evt.conditionKey) conditionKeys.add(evt.conditionKey);
+      });
+    }
+
+    if (data.children) {
+      traverse(data.children as Node);
+    }
+  }
+
+  traverse(root);
+
+  // Merge with central constants for a complete set of options
+  const result: ProjectOptions = {
+    pageKeys: Array.from(
+      new Set([...pageKeys, ...eventConstants.placementKeys]),
+    ).sort(),
+    conditionKeys: Array.from(
+      new Set([...conditionKeys, ...eventConstants.conditionKeys]),
+    ).sort(),
+    placementKeys: Array.from(
+      new Set([...placementKeys, ...eventConstants.placementKeys]),
+    ).sort(),
+    formFieldNames: Array.from(
+      new Set([
+        ...formFieldNames,
+        ...((eventConstants as any).formFieldNames as string[]),
+      ]),
+    ).sort(),
+    eventTypes: Array.from(
+      new Set([...eventTypes, ...eventConstants.eventTypes]),
+    ).sort(),
+    validationTypes: Array.from(
+      new Set((eventConstants as any).validationTypes as string[]),
+    ).sort(),
+  };
+
+  return result;
+}