@developer_tribe/react-builder 1.2.47 → 1.2.48

package/src/components/BottomBar.tsx

@@ -1,4 +1,10 @@
-import React, { useMemo, useState, useCallback, useRef } from 'react';
+import React, {
+  useMemo,
+  useState,
+  useCallback,
+  useRef,
+  useEffect,
+} from 'react';
 import { Icon } from './Icon.generated';
 import type { IconsType } from '../types/Icons';
 import { useRenderStore } from '../store';
@@ -9,6 +15,7 @@ import {
   Modal,
   PromptManagerModal,
 } from '../modals';
+import type { PromptManagerTab } from '../modals/PromptManagerModal';
 import type { Node } from '../types/Node';
 import type { Project } from '../types/Project';
 import { DebugJsonPage } from '../pages/DebugJsonPage';
@@ -46,6 +53,8 @@ export function BottomBar({
     setPreviewMode,
     setIsRtl,
     languageColumns,
+    quickActionConfig,
+    promptManagerConfig,
   } = useRenderStore((s) => ({
     localization: s.localization,
     setLocalization: s.setLocalization,
@@ -57,14 +66,23 @@ export function BottomBar({
     setPreviewMode: s.setPreviewMode,
     setIsRtl: s.setIsRtl,
     languageColumns: s.languageColumns,
+    quickActionConfig: s.quickActionConfig,
+    promptManagerConfig: s.promptManagerConfig,
   }));
+  const hasAiLayoutTool = Boolean(
+    promptManagerConfig?.generate && promptManagerConfig?.renderAiLayout,
+  );
 
   const [isDebugOpen, setIsDebugOpen] = useState(false);
   const [isLocalizationOpen, setIsLocalizationOpen] = useState(false);
   const [isInspectOpen, setIsInspectOpen] = useState(false);
-  const [isPromptManagerOpen, setIsPromptManagerOpen] = useState(false);
+  const [promptMenuOpen, setPromptMenuOpen] = useState(false);
+  const [promptModalTab, setPromptModalTab] = useState<PromptManagerTab | null>(
+    null,
+  );
   const [langDropdownOpen, setLangDropdownOpen] = useState(false);
   const langTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
+  const promptMenuTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
 
   // Use languageColumns from API, fallback to localization object keys
   const availableLanguages = useMemo(() => {
@@ -99,6 +117,34 @@ export function BottomBar({
     langTimeoutRef.current = setTimeout(() => setLangDropdownOpen(false), 200);
   };
 
+  const handlePromptMenuMouseEnter = () => {
+    if (promptMenuTimeoutRef.current) {
+      clearTimeout(promptMenuTimeoutRef.current);
+    }
+    setPromptMenuOpen(true);
+  };
+
+  const handlePromptMenuMouseLeave = () => {
+    promptMenuTimeoutRef.current = setTimeout(
+      () => setPromptMenuOpen(false),
+      200,
+    );
+  };
+
+  const openPromptModal = (tab: PromptManagerTab) => {
+    setPromptModalTab(tab);
+    setPromptMenuOpen(false);
+  };
+
+  useEffect(
+    () => () => {
+      if (langTimeoutRef.current) clearTimeout(langTimeoutRef.current);
+      if (promptMenuTimeoutRef.current)
+        clearTimeout(promptMenuTimeoutRef.current);
+    },
+    [],
+  );
+
   const handleLocalicationChange = (next: Localication) => {
     setLocalization(next);
   };
@@ -174,17 +220,86 @@ export function BottomBar({
           <Icon iconType={inspectIcon} size={20} color="currentColor" alt="" />
         </button>
 
-        <button
-          type="button"
-          className={`rb-bottom-bar__button${
-            isPromptManagerOpen ? ' is-active' : ''
-          }`}
-          aria-label="Prompt Manager"
-          aria-pressed={isPromptManagerOpen}
-          onClick={() => setIsPromptManagerOpen(true)}
+        <div
+          className="rb-bottom-bar__tool-menu-anchor"
+          onMouseEnter={handlePromptMenuMouseEnter}
+          onMouseLeave={handlePromptMenuMouseLeave}
         >
-          <Icon iconType={promptAiIcon} size={20} color="currentColor" alt="" />
-        </button>
+          <button
+            type="button"
+            className={`rb-bottom-bar__button${
+              promptMenuOpen || promptModalTab ? ' is-active' : ''
+            }`}
+            aria-label="Prompt Tools"
+            aria-pressed={promptMenuOpen || !!promptModalTab}
+            onClick={() => setPromptMenuOpen((prev) => !prev)}
+          >
+            <Icon
+              iconType={promptAiIcon}
+              size={20}
+              color="currentColor"
+              alt=""
+            />
+          </button>
+
+          {promptMenuOpen && (
+            <div className="rb-bottom-bar__tool-menu">
+              <div className="rb-bottom-bar__tool-menu-title">Prompt Tools</div>
+              {hasAiLayoutTool && (
+                <button
+                  type="button"
+                  className="rb-bottom-bar__tool-menu-item"
+                  onClick={() => openPromptModal('ai-layout')}
+                >
+                  <span className="rb-bottom-bar__tool-menu-item-label">
+                    AI Layout Studio
+                  </span>
+                  <span className="rb-bottom-bar__tool-menu-item-desc">
+                    Queue + realtime ile XML generate/edit
+                  </span>
+                </button>
+              )}
+              <button
+                type="button"
+                className="rb-bottom-bar__tool-menu-item"
+                onClick={() => openPromptModal('xml-editor')}
+              >
+                <span className="rb-bottom-bar__tool-menu-item-label">
+                  XML Editor
+                </span>
+                <span className="rb-bottom-bar__tool-menu-item-desc">
+                  XML'i manuel düzenle ve uygula
+                </span>
+              </button>
+              <button
+                type="button"
+                className="rb-bottom-bar__tool-menu-item"
+                onClick={() => openPromptModal('prompt-schema')}
+              >
+                <span className="rb-bottom-bar__tool-menu-item-label">
+                  Prompt Şeması
+                </span>
+                <span className="rb-bottom-bar__tool-menu-item-desc">
+                  Onboard/Paywall şema referansı
+                </span>
+              </button>
+            </div>
+          )}
+        </div>
+
+        {quickActionConfig && (
+          <button
+            type="button"
+            className="rb-bottom-bar__button"
+            aria-label={quickActionConfig.title || quickActionConfig.label}
+            title={quickActionConfig.title || quickActionConfig.label}
+            onClick={quickActionConfig.onClick}
+          >
+            <span style={{ fontSize: 11, fontWeight: 700 }}>
+              {quickActionConfig.label}
+            </span>
+          </button>
+        )}
 
         <div className="rb-bottom-bar__spacer" />
 
@@ -323,11 +438,16 @@ export function BottomBar({
         <InspectModal onClose={() => setIsInspectOpen(false)} />
       )}
 
-      {isPromptManagerOpen && (
+      {promptModalTab && (
         <PromptManagerModal
           data={data}
           setData={setData}
-          onClose={() => setIsPromptManagerOpen(false)}
+          initialTab={promptModalTab}
+          showTabs={promptModalTab !== 'ai-layout'}
+          title={
+            promptModalTab === 'ai-layout' ? 'AI Layout Studio' : undefined
+          }
+          onClose={() => setPromptModalTab(null)}
         />
       )}
     </>

package/src/components/DeviceButton.tsx

@@ -14,6 +14,40 @@ type DeviceButtonProps = {
   isFavorite?: boolean;
   onToggleFavorite?: (device: Device, e: React.MouseEvent) => void;
   onEdit?: (device: Device, e: React.MouseEvent) => void;
+  sizeVariant?: 'header' | 'modal';
+};
+
+const SHORT_NAME_PREFIXES = [
+  'samsung galaxy',
+  'google pixel',
+  'motorola',
+  'oneplus',
+  'huawei',
+  'xiaomi',
+  'redmi',
+  'galaxy',
+  'iphone',
+  'ipad',
+  'pixel',
+  'sony',
+  'nokia',
+  'oppo',
+  'vivo',
+];
+
+const clamp = (value: number, min: number, max: number): number =>
+  Math.min(max, Math.max(min, value));
+
+const getCompactDeviceName = (name: string): string => {
+  const trimmed = name.trim();
+  const lower = trimmed.toLowerCase();
+  const matchedPrefix = SHORT_NAME_PREFIXES.find((prefix) =>
+    lower.startsWith(`${prefix} `),
+  );
+
+  if (!matchedPrefix) return trimmed;
+  const compact = trimmed.slice(matchedPrefix.length).trim();
+  return compact || trimmed;
 };
 
 export function DeviceButton({
@@ -23,24 +57,37 @@ export function DeviceButton({
   isFavorite,
   onToggleFavorite,
   onEdit,
+  sizeVariant = 'header',
 }: DeviceButtonProps) {
   const platformIcon = platformIcons[device.platform];
-  const aspect =
-    device.aspect ??
-    (() => {
-      const r = device.height / device.width;
-      if (r >= 2.05) return 'tall' as const;
-      if (r <= 1.75) return 'wide' as const;
-      return 'regular' as const;
-    })();
+  const safeWidth = Math.max(1, Number(device.width) || 1);
+  const safeHeight = Math.max(1, Number(device.height) || 1);
+  const compactName = getCompactDeviceName(device.name);
+  const tooltipText = `${device.name} - ${safeWidth}x${safeHeight}`;
+  const longSide = Math.max(safeWidth, safeHeight);
+  const baseLongSide = sizeVariant === 'modal' ? 2600 : 2400;
+  const basePreviewHeight = sizeVariant === 'modal' ? 58 : 30;
+  const typeBoost = device.type === 'tablet' ? 1.12 : 1;
+  const previewScale = clamp(
+    Math.sqrt(longSide / baseLongSide) * typeBoost,
+    sizeVariant === 'modal' ? 0.82 : 0.78,
+    sizeVariant === 'modal' ? 1.25 : 1.18,
+  );
+  const previewHeight = Math.round(basePreviewHeight * previewScale);
+  const frameStyle = {
+    aspectRatio: `${safeWidth} / ${safeHeight}`,
+    '--device-preview-height': `${previewHeight}px`,
+  } as React.CSSProperties;
 
   return (
     <button
       type="button"
       className={`editor-device-button${
         selectedDevice === device ? ' editor-device-button--selected' : ''
-      }`}
+      } editor-device-button--${sizeVariant}`}
       onClick={() => onSelect(device)}
+      title={tooltipText}
+      aria-label={tooltipText}
     >
       {onToggleFavorite && (
         <span
@@ -51,10 +98,6 @@ export function DeviceButton({
           }}
           title={isFavorite ? 'Remove from favorites' : 'Add to favorites'}
           style={{
-            position: 'absolute',
-            top: 4,
-            right: 4,
-            cursor: 'pointer',
             opacity: isFavorite ? 1 : 0.3,
             color: isFavorite ? '#ecc538' : 'currentColor',
           }}
@@ -73,8 +116,30 @@ export function DeviceButton({
           </svg>
         </span>
       )}
-      {device.name} <br />
-      {device.width}×{device.height} ({aspect})
+
+      <span className="editor-device-button__popover" aria-hidden="true">
+        <span className="editor-device-button__popover-title">
+          {device.name}
+        </span>
+        <span className="editor-device-button__popover-meta">
+          {safeWidth}x{safeHeight}
+        </span>
+      </span>
+
+      <span className="editor-device-button__preview" aria-hidden="true">
+        <span
+          className="editor-device-button__frame"
+          data-platform={device.platform}
+          data-type={device.type}
+          style={frameStyle}
+        >
+          <span className="editor-device-button__screen" />
+          <span className="editor-device-button__notch" />
+        </span>
+      </span>
+
+      <span className="editor-device-button__name">{compactName}</span>
+
       {platformIcon && (
         <span className="editor-device-button__platform">
           <img src={platformIcon} alt="" aria-hidden="true" />
@@ -88,13 +153,7 @@ export function DeviceButton({
             onEdit(device, e);
           }}
           title="Edit device"
-          style={{
-            position: 'absolute',
-            bottom: 4,
-            left: 4,
-            cursor: 'pointer',
-            opacity: 0.5,
-          }}
+          style={{ opacity: 0.5 }}
         >
           <svg
             width="12"

package/src/components/EditorHeader.tsx

@@ -288,14 +288,15 @@ export function EditorHeader({
             device={deviceOption}
             isFavorite={favoriteDevices.includes(deviceOption.name)}
             onToggleFavorite={(d) => toggleFavoriteDevice(d.name)}
+            sizeVariant="header"
           />
         ))}
         <button
-          className="editor-device-button"
+          className="editor-device-button editor-device-button--header editor-device-button--more"
           aria-label="More devices"
           onClick={() => setIsDevicesModalOpen(true)}
         >
-          More devices
+          <span className="editor-device-button__more-label">More</span>
         </button>
       </div>
       <div className="editor-header__actions">

package/src/index.web.ts

@@ -14,11 +14,26 @@ export type { EventObjectGenerated } from './build-components/OnboardButton/Onbo
 
 // Host-app API: store (tema vb. builder içinde kullanılır; örn. tema toggle'ı builder'a senkronize etmek için).
 export { useRenderStore } from './store';
+export type {
+  BuilderPromptManagerAiLayoutProps,
+  BuilderPromptManagerConfig,
+  BuilderPromptManagerGenerateRequest,
+  BuilderPromptManagerGenerateResponse,
+  BuilderPromptManagerMode,
+  BuilderPromptManagerModel,
+  BuilderPromptSchemaType,
+} from './store';
 
 // Host-app API: let parent apps inject a custom "Text" field renderer.
 import { useRenderStore } from './store';
 import type { ComponentType } from 'react';
-import type { LocalizationApiConfig, LanguageColumn } from './store';
+import type {
+  BuilderMediaFieldProps,
+  BuilderPromptManagerConfig,
+  LocalizationApiConfig,
+  LanguageColumn,
+  QuickActionConfig,
+} from './store';
 
 export function setBuilderStringChildrenField(
   comp?: ComponentType<{ value: string; onChange: (v: string) => void }>,
@@ -33,3 +48,19 @@ export function setBuilderLocalizationConfig(config?: LocalizationApiConfig) {
 export function setBuilderLanguageColumns(cols: LanguageColumn[]) {
   useRenderStore.getState().setLanguageColumns(cols);
 }
+
+export function setBuilderQuickAction(config?: QuickActionConfig) {
+  useRenderStore.getState().setQuickActionConfig(config);
+}
+
+export function setBuilderMediaField(
+  comp?: ComponentType<BuilderMediaFieldProps>,
+) {
+  useRenderStore.getState().setRenderMediaField(comp);
+}
+
+export function setBuilderPromptManagerConfig(
+  config?: BuilderPromptManagerConfig,
+) {
+  useRenderStore.getState().setPromptManagerConfig(config);
+}

package/src/modals/DeviceSelectorModal.tsx

@@ -116,6 +116,7 @@ export function DeviceSelectorModal({
                   isFavorite={true}
                   onToggleFavorite={(d) => toggleFavoriteDevice(d.name)}
                   onEdit={(d) => setEditingDevice(d)}
+                  sizeVariant="modal"
                 />
               ))}
             </div>
@@ -147,6 +148,7 @@ export function DeviceSelectorModal({
                     ? (d) => setEditingDevice(d)
                     : undefined
                 }
+                sizeVariant="modal"
               />
             ))}
           </div>