@juo/blocks 1.4.5 → 1.4.6

package/dist/editor/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/editor/components.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAgJ9C,qBAAa,YAAa,SAAQ,WAAW;IAC3C,OAAO,CAAC,KAAK,CAA8B;IAC3C,OAAO,CAAC,YAAY,CAAwB;IAC5C,OAAO,CAAC,WAAW,CAA4B;IAC/C,OAAO,CAAC,WAAW,CAA4B;IAC/C,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,uBAAuB,CAA0C;IAEzE,MAAM,KAAK,kBAAkB,aAE5B;;IASD,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,aAAa;IA0ErB,iBAAiB;IAWjB,oBAAoB;IAUpB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,QAAQ;IAahB,OAAO,CAAC,SAAS;IAWjB,QAAQ,CAAC,KAAK,EAAE,aAAa;IAQ7B,OAAO,CAAC,iBAAiB;IAazB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,iBAAiB;CAmD1B;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,0BAA0B,EAAE,YAAY,CAAC;KAC1C;CACF"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/editor/components.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AA6O9C,qBAAa,YAAa,SAAQ,WAAW;IAC3C,OAAO,CAAC,KAAK,CAA8B;IAC3C,OAAO,CAAC,YAAY,CAAwB;IAC5C,OAAO,CAAC,WAAW,CAA4B;IAC/C,OAAO,CAAC,WAAW,CAA4B;IAC/C,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,uBAAuB,CAA0C;IAEzE,MAAM,KAAK,kBAAkB,aAE5B;;IASD,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,aAAa;IAiFrB,iBAAiB;IAWjB,oBAAoB;IAUpB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,QAAQ;IAahB,OAAO,CAAC,SAAS;IAWjB,QAAQ,CAAC,KAAK,EAAE,aAAa;IAQ7B,OAAO,CAAC,iBAAiB;IASzB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,iBAAiB;CAmD1B;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,0BAA0B,EAAE,YAAY,CAAC;KAC1C;CACF"}

package/dist/editor/components.test.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=components.test.d.ts.map

package/dist/editor/components.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.test.d.ts","sourceRoot":"","sources":["../../src/editor/components.test.ts"],"names":[],"mappings":"AAEA,OAAO,cAAc,CAAC"}

package/dist/editor/main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../src/editor/main.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,aAAa,EAGnB,MAAM,aAAa,CAAC;AAQrB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAiD7B;;;;;;GAMG;AACH,wBAAsB,eAAe,CACnC,IAAI,EAAE;IAAE,aAAa,EAAE,aAAa,CAAC;IAAC,UAAU,EAAE,UAAU,CAAA;CAAE,GAC7D,OAAO,CAAC,MAAM,IAAI,CAAC,CAiCrB"}
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../src/editor/main.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,aAAa,EAGnB,MAAM,aAAa,CAAC;AAQrB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAoD7B;;;;;;GAMG;AACH,wBAAsB,eAAe,CACnC,IAAI,EAAE;IAAE,aAAa,EAAE,aAAa,CAAC;IAAC,UAAU,EAAE,UAAU,CAAA;CAAE,GAC7D,OAAO,CAAC,MAAM,IAAI,CAAC,CA4CrB"}

package/dist/editor.js

@@ -293,32 +293,126 @@ function createEditorHandler(options) {
 }
 const styles = `
 <style>
+  :host {
+    display: block;
+    position: relative;
+  }
+
   .block-wrapper {
     position: relative;
-    padding: 12px;
-    background-color: white;
-    border: 1px solid #B5B5B5;
-    border-radius: 8px;
     box-sizing: border-box;
   }
 
-  .block-wrapper:hover,
-  .block-wrapper.active {
-    border-color: #000000;
+  :host(:hover:not(.active)) .block-wrapper {
+    outline: 1px dashed #060606;
+    /* 4px gap between the block content and the dashed outline so the
+     * outline reads as a hover affordance rather than a touching border.
+     * Outline doesn't participate in layout, so this stays layout-neutral. */
+    outline-offset: 4px;
   }
 
-  .block-wrapper__name {
+  /*
+   * Stacking model for the active state (no negative z-index, no isolation):
+   *   - .block-wrapper__chrome   z-index: 100 → visual frame above neighbours
+   *                                              and any in-block UI that
+   *                                              creates its own stacking
+   *                                              context (overlays, sticky
+   *                                              headers, etc.)
+   *   - .block-wrapper__slot-host z-index: 101 → block content above chrome bg
+   *                                              so blocks without their own
+   *                                              background stay visible
+   *   - .block-wrapper__name     z-index: 102 → title bar above everything,
+   *                                              always clickable
+   *
+   * IMPORTANT: every z-index here is scoped to :host(.active). Otherwise
+   * inactive sibling wrappers' slot-host (z-index: 101) would create
+   * stacking contexts at root level and paint *above* the active wrapper's
+   * chrome (z-index: 100), hiding it. Scoping ensures only the active
+   * wrapper participates in this stacking layer.
+   * Neighbouring wrappers stay at default (auto / 0) and naturally sit below.
+   */
+
+  /*
+   * Active-mode chrome — a card frame that visually wraps the block
+   * (white bg, gray border, drop shadow, padding around the block, and
+   * room at the top for the title bar). Drawn as a position:absolute
+   * overlay extending beyond the wrapper bounds so adjacent blocks are
+   * never pushed (it overlays them with the shadow effect instead).
+   */
+  .block-wrapper__chrome {
+    display: none;
+    position: absolute;
+    /* Top extends 44px above the block to fit a 12px / 20px / 12px stack:
+     * 12px gap, 20px title bar, 12px gap to the block. Sides + bottom keep
+     * the original 12px gap around the block. */
+    top: -44px;
+    left: -12px;
+    right: -12px;
+    bottom: -12px;
+    background: #ffffff;
+    border: 0.5px solid #b5b5b5;
+    border-radius: 6px;
+    box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.10);
+    /* No pointer-events: none here — otherwise clicks on the chrome's
+     * overflow padding (the 12px ring around the block and the 44px
+     * title-bar strip above it) would fall through to whatever's behind:
+     * a sibling wrapper (re-targeting selection) or empty body
+     * (deselecting the current block). Block content still receives
+     * clicks because slot-host (z-index: 101) paints above the chrome
+     * (z-index: 100), and the title bar wins via its own z-index: 102. */
+  }
+
+  :host(.active) .block-wrapper__chrome {
+    display: block;
+    z-index: 100;
+  }
+
+  /*
+   * Wraps the slotted block content. Stays as a plain in-flow div when
+   * inactive (no stacking context). Only when the host is .active do we
+   * promote it to z-index: 101 so block content paints above the chrome's
+   * white fill. Without this scoping, every inactive neighbour's slot-host
+   * would also be at z-index: 101 and would cover the active chrome.
+   */
+  :host(.active) .block-wrapper__slot-host {
     position: relative;
-    display: flex;
-    justify-content: space-between;
+    z-index: 101;
+  }
+
+  /*
+   * Title bar lives in the top region of the chrome with symmetric 12px
+   * padding from every chrome edge it touches and from the block:
+   *   - top: -32 → 12px below chrome's top edge (-44),
+   *               12px above the block (height: 20 → bottom at -12)
+   *   - left/right: 0 → 12px inside chrome's -12 left/right edges,
+   *               visually flush with the block's horizontal edges
+   */
+  .block-wrapper__name {
+    position: absolute;
+    top: -32px;
+    left: 0;
+    right: 0;
+    display: none;
     align-items: center;
-    gap: 6.82px;
-    margin-bottom: 12px;
+    gap: 7px;
     font-size: 12px;
     font-weight: 500;
-    color: #8A8A8A;
+    color: #8a8a8a;
     line-height: 100%;
-    height: 15px
+    height: 20px;
+    box-sizing: border-box;
+    white-space: nowrap;
+    pointer-events: auto;
+  }
+
+  :host(.active) .block-wrapper__name {
+    display: flex;
+    z-index: 102;
+  }
+
+  .block-wrapper__icon {
+    display: inline-flex;
+    align-items: center;
   }
 
   .block-wrapper__actions {
@@ -326,7 +420,7 @@ const styles = `
     align-items: center;
     justify-content: flex-end;
     height: 100%;
-    flex-grow: 1;
+    margin-left: auto;
   }
 
   .block-wrapper__actions button {
@@ -347,7 +441,6 @@ const styles = `
     color: #8A8A8A;
   }
 
-
   .block-wrapper__menu {
     display: none;
     position: absolute;
@@ -451,6 +544,8 @@ class BlockWrapper extends HTMLElement {
   setupTemplate() {
     const wrapper = document.createElement("div");
     wrapper.className = "block-wrapper";
+    const chrome = document.createElement("div");
+    chrome.className = "block-wrapper__chrome";
     const nameDiv = document.createElement("div");
     nameDiv.className = "block-wrapper__name";
     const iconContainer = document.createElement("div");
@@ -493,9 +588,13 @@ class BlockWrapper extends HTMLElement {
     nameDiv.appendChild(nameSpan);
     nameDiv.appendChild(actionsDiv);
     nameDiv.appendChild(menuEl);
+    wrapper.appendChild(chrome);
     wrapper.appendChild(nameDiv);
+    const slotHost = document.createElement("div");
+    slotHost.className = "block-wrapper__slot-host";
     const slot = document.createElement("slot");
-    wrapper.appendChild(slot);
+    slotHost.appendChild(slot);
+    wrapper.appendChild(slotHost);
     this.shadowRoot.appendChild(wrapper);
     this.nameElement = nameSpan;
     this.menuElement = menuEl;
@@ -509,10 +608,10 @@ class BlockWrapper extends HTMLElement {
   connectedCallback() {
     const isInOverlay = this.closest('juo-extension-root[surface="overlay"]') !== null;
     if (isInOverlay) {
-      const actions = this.shadowRoot.querySelector(
-        ".block-wrapper__actions"
+      const name = this.shadowRoot.querySelector(
+        ".block-wrapper__name"
       );
-      if (actions) actions.style.visibility = "hidden";
+      if (name) name.style.visibility = "hidden";
     }
   }
   disconnectedCallback() {
@@ -553,14 +652,11 @@ class BlockWrapper extends HTMLElement {
     }
   }
   updateActiveState(isActive) {
-    const wrapper = this.shadowRoot.querySelector(
-      ".block-wrapper"
-    );
-    if (!wrapper) return;
     if (isActive) {
-      wrapper.classList.add("active");
+      this.classList.add("active");
     } else {
-      wrapper.classList.remove("active");
+      this.classList.remove("active");
+      this.closeMenu();
     }
   }
   /**
@@ -651,8 +747,12 @@ async function serializeBlock(block) {
     locales
   };
 }
+const EDITOR_BODY_TOP_PADDING_PX = 32;
 async function setupEditorMode(deps) {
   const { routerService, themeState } = deps;
+  const padStyle = document.createElement("style");
+  padStyle.textContent = `body { padding-top: ${EDITOR_BODY_TOP_PADDING_PX}px; }`;
+  document.head.appendChild(padStyle);
   const editor = createEditorBridge();
   const handler = createEditorHandler({
     themeState
@@ -676,6 +776,7 @@ async function setupEditorMode(deps) {
     );
   });
   return () => {
+    padStyle.remove();
     unsubscribe();
     editor.destroy();
   };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@juo/blocks",
   "private": false,
-  "version": "1.4.5",
+  "version": "1.4.6",
   "type": "module",
   "files": [
     "dist"