dynim-core 1.0.10 → 1.0.12

package/dist/builder/builder.d.ts

@@ -32,6 +32,10 @@ export interface Builder {
     enter: () => void;
     exit: () => void;
     isActive: () => boolean;
+    isPreviewMode: () => boolean;
+    togglePreview: () => void;
+    enterPreviewMode: () => void;
+    exitPreviewMode: () => void;
     getEditorState: () => unknown;
     getTreeState: () => unknown;
     destroy: () => void;

package/dist/builder/builder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"builder.d.ts","sourceRoot":"","sources":["../../src/builder/builder.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAA6B,KAAK,YAAY,EAAE,MAAM,UAAU,CAAC;AAQxE,OAAO,EAAoB,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AAIlE,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uCAAuC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qCAAqC;IACrC,UAAU,CAAC,EAAE,MAAM,OAAO,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACrE,+FAA+F;IAC/F,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,mEAAmE;IACnE,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACnD;AAED,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,QAAQ,EAAE,MAAM,OAAO,CAAC;IACxB,cAAc,EAAE,MAAM,OAAO,CAAC;IAC9B,YAAY,EAAE,MAAM,OAAO,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,MAAM,GAAE,aAAkB,GAAG,OAAO,CAyejE;;;;AAMD,wBAAyC"}
+{"version":3,"file":"builder.d.ts","sourceRoot":"","sources":["../../src/builder/builder.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAA6B,KAAK,YAAY,EAAE,MAAM,UAAU,CAAC;AAQxE,OAAO,EAAoB,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AAIlE,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uCAAuC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qCAAqC;IACrC,UAAU,CAAC,EAAE,MAAM,OAAO,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACrE,+FAA+F;IAC/F,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,mEAAmE;IACnE,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACnD;AAED,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,QAAQ,EAAE,MAAM,OAAO,CAAC;IACxB,aAAa,EAAE,MAAM,OAAO,CAAC;IAC7B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,cAAc,EAAE,MAAM,OAAO,CAAC;IAC9B,YAAY,EAAE,MAAM,OAAO,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,MAAM,GAAE,aAAkB,GAAG,OAAO,CAikBjE;;;;AAMD,wBAAyC"}

package/dist/builder/builder.js

@@ -17,6 +17,7 @@ import { buildElementIdentifier, getRelevantStyles } from './element-utils';
 export function createBuilder(config = {}) {
     const { logo = 'Builder', onExit, onEnter, onExitStart, chatConfig = {}, contentRoot = document.body, pageId = window.location.pathname, apiBase = 'http://localhost:8080', sessionToken, refreshToken, getSession, codeClient: externalCodeClient, loadBundle } = config;
     let isActive = false;
+    let isPreviewMode = false;
     let chatWidget = null;
     let state = null;
     let client = null;
@@ -37,12 +38,18 @@ export function createBuilder(config = {}) {
         <span>${logo}</span>
       </div>
       <div class="builder-bar__divider"></div>
+      <span class="builder-bar__preview-badge" style="display: none;">
+        <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
+          <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
+        </svg>
+        PREVIEWING
+      </span>
       <div class="builder-bar__actions">
         <button class="builder-bar__btn builder-bar__btn--preview">
           <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
             <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
           </svg>
-          Preview
+          <span class="builder-bar__btn-text">Preview</span>
         </button>
         <button class="builder-bar__btn builder-bar__btn--save" disabled>
           <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
@@ -318,6 +325,11 @@ export function createBuilder(config = {}) {
     async function exit() {
         if (!isActive)
             return;
+        // Exit preview mode first if active
+        if (isPreviewMode) {
+            isPreviewMode = false;
+            updateBarForPreviewMode(false);
+        }
         isActive = false;
         // Notify IMMEDIATELY before any async work
         // This allows BuilderProvider to set isExitingRef before streaming events can interfere
@@ -404,6 +416,63 @@ export function createBuilder(config = {}) {
             console.error('[Builder] Save failed:', error);
         }
     }
+    function updateBarForPreviewMode(isPreviewing) {
+        const btnText = root.querySelector('.builder-bar__btn--preview .builder-bar__btn-text');
+        const previewBadge = root.querySelector('.builder-bar__preview-badge');
+        if (btnText) {
+            btnText.textContent = isPreviewing ? 'Edit' : 'Preview';
+        }
+        if (previewBadge) {
+            previewBadge.style.display = isPreviewing ? 'flex' : 'none';
+        }
+        // Add/remove preview mode class for styling
+        root.classList.toggle('builder-bar--preview-mode', isPreviewing);
+    }
+    function enterPreviewMode() {
+        if (!isActive || isPreviewMode)
+            return;
+        isPreviewMode = true;
+        console.log('[Builder] Entering preview mode');
+        // Hide editing UI
+        freezeOverlay?.unmount();
+        overlays?.hideAll();
+        interactionEngine?.detach();
+        aiPromptPopover?.unmount();
+        // Hide chat
+        chatWidget?.close();
+        if (chatWidget?.root) {
+            chatWidget.root.style.display = 'none';
+        }
+        // Clear any selection
+        editorState?.clearSelection();
+        // Update bar UI
+        updateBarForPreviewMode(true);
+    }
+    function exitPreviewMode() {
+        if (!isActive || !isPreviewMode)
+            return;
+        isPreviewMode = false;
+        console.log('[Builder] Exiting preview mode');
+        // Restore editing UI
+        freezeOverlay?.mount();
+        overlays?.mount();
+        interactionEngine?.attach();
+        aiPromptPopover?.mount();
+        // Show chat
+        if (chatWidget?.root) {
+            chatWidget.root.style.display = '';
+        }
+        // Update bar UI
+        updateBarForPreviewMode(false);
+    }
+    function togglePreview() {
+        if (isPreviewMode) {
+            exitPreviewMode();
+        }
+        else {
+            enterPreviewMode();
+        }
+    }
     root.addEventListener('click', (e) => {
         const target = e.target;
         if (target.closest('.builder-bar__btn--exit')) {
@@ -413,7 +482,7 @@ export function createBuilder(config = {}) {
         }
         if (target.closest('.builder-bar__btn--preview')) {
             e.stopPropagation();
-            handlePreview();
+            togglePreview();
             return;
         }
         if (target.closest('.builder-bar__btn--save')) {
@@ -435,6 +504,10 @@ export function createBuilder(config = {}) {
         enter,
         exit,
         isActive: () => isActive,
+        isPreviewMode: () => isPreviewMode,
+        togglePreview,
+        enterPreviewMode,
+        exitPreviewMode,
         getEditorState: () => editorState?.getState(),
         getTreeState: () => treeState?.getState(),
         destroy: () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dynim-core",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/styles/builder.css

@@ -70,6 +70,32 @@
   margin: 0 4px;
 }
 
+/* Preview badge */
+.builder-bar__preview-badge {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 12px;
+  background: #3b82f6;
+  color: white;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.builder-bar__preview-badge svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* Preview mode bar styling */
+.builder-bar--preview-mode .builder-bar {
+  background: linear-gradient(to right, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95));
+  border-bottom: 2px solid #3b82f6;
+}
+
 /* Actions section */
 .builder-bar__actions {
   display: flex;