@juo/blocks 1.8.0 → 1.8.2

package/dist/editor/components.d.ts

@@ -6,7 +6,6 @@ export declare class BlockWrapper extends HTMLElement {
     private menuElement;
     private isMenuOpen;
     private closeMenuOnOutsideClick;
-    private emptyObserver;
     private addButtons;
     private addRail;
     static get observedAttributes(): string[];
@@ -18,11 +17,23 @@ export declare class BlockWrapper extends HTMLElement {
     private clearAddButtonMenuState;
     connectedCallback(): void;
     /**
-     * Mirror `data-empty` from the slotted block wrapper onto this editor
-     * wrapper so page-level divider CSS (and live-data preview) treat empty
-     * blocks the same as in view mode.
+     * Resolve the slotted block's first painted descendant — the
+     * card-like surface we paint the hover outline on. We can't use
+     * ::slotted() (CE blocks' own :host rules win the cascade) and we
+     * can't put outline on .block-wrapper directly (it has no radius and
+     * adopting one is more code than this), so we apply outline as an
+     * inline style on the visible element. Skips:
+     *   - <style> nodes (Vue's defineCustomElement injects styles into
+     *     the CE shadow root next to the rendered tree).
+     *   - display:contents wrappers (Vue's <ContextProvider> sits between
+     *     the slotted div and the actual UiCard for createVueRenderer).
+     * Crosses one shadow-root boundary for createVueCeRenderer blocks
+     * whose slotted element is itself a CE host.
      */
-    private observeSlotEmptyState;
+    private static resolveOutlineTarget;
+    private hoverOutlineTarget;
+    private handleHoverEnter;
+    private handleHoverLeave;
     disconnectedCallback(): void;
     private toggleMenu;
     private openMenu;

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;AA2gB9C,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;IACzE,OAAO,CAAC,aAAa,CAAiC;IACtD,OAAO,CAAC,UAAU,CAA2B;IAC7C,OAAO,CAAC,OAAO,CAA4B;IAE3C,MAAM,KAAK,kBAAkB,aAE5B;;IASD,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,aAAa;IA8GrB,OAAO,CAAC,eAAe;IAsCvB,OAAO,CAAC,cAAc;IAgCtB,OAAO,CAAC,uBAAuB;IAO/B,iBAAiB;IAsCjB;;;;OAIG;IACH,OAAO,CAAC,qBAAqB;IAqC7B,oBAAoB;IAYpB,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"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/editor/components.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAygB9C,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;IACzE,OAAO,CAAC,UAAU,CAA2B;IAC7C,OAAO,CAAC,OAAO,CAA4B;IAE3C,MAAM,KAAK,kBAAkB,aAE5B;;IASD,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,aAAa;IA8GrB,OAAO,CAAC,eAAe;IAsCvB,OAAO,CAAC,cAAc;IAgCtB,OAAO,CAAC,uBAAuB;IAO/B,iBAAiB;IAuCjB;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,MAAM,CAAC,oBAAoB;IAuBnC,OAAO,CAAC,kBAAkB,CAA4B;IAEtD,OAAO,CAAC,gBAAgB,CAUtB;IAEF,OAAO,CAAC,gBAAgB,CAKtB;IAEF,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"}

package/dist/editor.js

@@ -309,14 +309,6 @@ const styles = `
     box-sizing: border-box;
   }
 
-  :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;
-  }
-
   /*
    * Stacking model for the active state (no negative z-index, no isolation):
    *   - .block-wrapper__chrome   z-index: 100 → visual frame above neighbours
@@ -725,7 +717,7 @@ const styles = `
   :host(.active:hover) .block-wrapper__add-btn:hover .block-wrapper__add-btn-surface,
   :host(.active) .block-wrapper__add-btn--menu-open .block-wrapper__add-btn-surface {
     width: 60px;
-    border-radius: 32px;
+    border-radius: 2px;
     padding: 0 6px;
   }
 
@@ -777,8 +769,14 @@ const styles = `
 </style>
 `;
 const blockIconSvg = `
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.36328 6.5459C4.96626 6.5459 5.4541 7.03374 5.4541 7.63672V10.9092C5.45405 11.5121 4.96623 12 4.36328 12H1.09082C0.96088 12 0.834934 11.9772 0.717773 11.9346C0.626296 11.9016 0.540642 11.8561 0.461914 11.8008C0.182984 11.6037 3.23667e-05 11.2776 0 10.9092V7.63672C0 7.03377 0.487878 6.54595 1.09082 6.5459H4.36328ZM10.9092 6.5459C11.5122 6.5459 12 7.03374 12 7.63672V10.9092C11.9999 11.5121 11.5121 12 10.9092 12H7.63672C7.50675 12 7.38086 11.9772 7.26367 11.9346C7.17215 11.9016 7.08658 11.8561 7.00781 11.8008C6.72883 11.6037 6.54593 11.2777 6.5459 10.9092V7.63672C6.5459 7.03374 7.03374 6.5459 7.63672 6.5459H10.9092ZM1.09082 7.63672V10.9092H4.36328V7.63672H1.09082ZM7.63672 10.9092H10.9092V7.63672H7.63672V10.9092ZM4.36328 0C4.96623 0 5.45405 0.487878 5.4541 1.09082V4.36328C5.4541 4.96626 4.96626 5.4541 4.36328 5.4541H1.09082C0.96088 5.45409 0.834934 5.43225 0.717773 5.38965C0.626233 5.35663 0.54069 5.31024 0.461914 5.25488C0.183079 5.05776 0 4.73167 0 4.36328V1.09082C4.77994e-05 0.487908 0.487908 4.79046e-05 1.09082 0H4.36328ZM10.9092 0C11.5121 0 12 0.487878 12 1.09082V4.36328C12 4.96626 11.5122 5.4541 10.9092 5.4541H7.63672C7.50675 5.4541 7.38086 5.43226 7.26367 5.38965C7.17208 5.35663 7.08662 5.31026 7.00781 5.25488C6.72893 5.05777 6.5459 4.73171 6.5459 4.36328V1.09082C6.54595 0.487878 7.03377 0 7.63672 0H10.9092ZM1.09082 4.36328H4.36328V1.09082H1.09082V4.36328ZM7.63672 4.36328H10.9092V1.09082H7.63672V4.36328Z" fill="currentColor"/>
+<svg width="14" height="12" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 9.34521H1V10.3452C1 11.4497 1.89453 12.3452 3 12.3452H4V11.3452H3C2.44727 11.3452 2 10.8979 2 10.3452V9.34521Z" fill="currentColor"/>
+<path d="M2 3.34521H1V2.34521C1 1.24072 1.89453 0.345215 3 0.345215H4V1.34521H3C2.44727 1.34521 2 1.79248 2 2.34521V3.34521Z" fill="currentColor"/>
+<path d="M10 1.34521V0.345215H11C12.1055 0.345215 13 1.24072 13 2.34521V3.34521H12V2.34521C12 2.24072 11.9844 2.14014 11.9551 2.04541C11.9023 1.87842 11.8066 1.72998 11.6816 1.61377C11.5039 1.44775 11.2637 1.34521 11 1.34521H10Z" fill="currentColor"/>
+<path d="M12 9.34521H13V10.3452C13 11.4497 12.1055 12.3452 11 12.3452H10V11.3452H11C11.5527 11.3452 12 10.8979 12 10.3452V9.34521Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 5.34521C0 4.79248 0.447266 4.34521 1 4.34521H13C13.5527 4.34521 14 4.79248 14 5.34521V7.34521C14 7.89795 13.5527 8.34521 13 8.34521H1C0.880859 8.34521 0.765625 8.32471 0.658203 8.28564C0.574219 8.25537 0.496094 8.21338 0.423828 8.1626C0.167969 7.98193 0 7.68311 0 7.34521V5.34521ZM1 5.34521H13V7.34521H1V5.34521Z" fill="currentColor"/>
+<path d="M5.5 0.345215H8.5V1.34521H5.5V0.345215Z" fill="currentColor"/>
+<path d="M8.5 11.3452H5.5V12.3452H8.5V11.3452Z" fill="currentColor"/>
 </svg>
 
 `;
@@ -812,9 +810,25 @@ class BlockWrapper extends HTMLElement {
     __publicField(this, "menuElement", null);
     __publicField(this, "isMenuOpen", false);
     __publicField(this, "closeMenuOnOutsideClick", null);
-    __publicField(this, "emptyObserver", null);
     __publicField(this, "addButtons", []);
     __publicField(this, "addRail", null);
+    __publicField(this, "hoverOutlineTarget", null);
+    __publicField(this, "handleHoverEnter", () => {
+      if (this.classList.contains("active")) return;
+      const slotted = this.firstElementChild;
+      if (!slotted || slotted.hasAttribute("data-empty")) return;
+      const target = BlockWrapper.resolveOutlineTarget(slotted);
+      if (!target) return;
+      this.hoverOutlineTarget = target;
+      target.style.outline = "1px solid #060606";
+      target.style.outlineOffset = "0";
+    });
+    __publicField(this, "handleHoverLeave", () => {
+      if (!this.hoverOutlineTarget) return;
+      this.hoverOutlineTarget.style.outline = "";
+      this.hoverOutlineTarget.style.outlineOffset = "";
+      this.hoverOutlineTarget = null;
+    });
     this.attachShadow({ mode: "open" });
     this.setupStyles();
     this.setupTemplate();
@@ -992,50 +1006,40 @@ class BlockWrapper extends HTMLElement {
     if (isWorkflowPreview && !isInOverlay) {
       this.style.pointerEvents = "none";
     }
-    this.observeSlotEmptyState();
+    this.addEventListener("mouseenter", this.handleHoverEnter);
+    this.addEventListener("mouseleave", this.handleHoverLeave);
   }
   /**
-   * Mirror `data-empty` from the slotted block wrapper onto this editor
-   * wrapper so page-level divider CSS (and live-data preview) treat empty
-   * blocks the same as in view mode.
+   * Resolve the slotted block's first painted descendant — the
+   * card-like surface we paint the hover outline on. We can't use
+   * ::slotted() (CE blocks' own :host rules win the cascade) and we
+   * can't put outline on .block-wrapper directly (it has no radius and
+   * adopting one is more code than this), so we apply outline as an
+   * inline style on the visible element. Skips:
+   *   - <style> nodes (Vue's defineCustomElement injects styles into
+   *     the CE shadow root next to the rendered tree).
+   *   - display:contents wrappers (Vue's <ContextProvider> sits between
+   *     the slotted div and the actual UiCard for createVueRenderer).
+   * Crosses one shadow-root boundary for createVueCeRenderer blocks
+   * whose slotted element is itself a CE host.
    */
-  observeSlotEmptyState() {
-    var _a;
-    (_a = this.emptyObserver) == null ? void 0 : _a.disconnect();
-    const sync = () => {
-      const slotted = this.firstElementChild;
-      const empty = slotted == null || slotted.hasAttribute("data-empty");
-      this.toggleAttribute("data-empty", empty);
-    };
-    const bindObservers = () => {
-      this.emptyObserver.observe(this, { childList: true });
-      const slotted = this.firstElementChild;
-      if (slotted) {
-        this.emptyObserver.observe(slotted, {
-          attributes: true,
-          attributeFilter: ["data-empty"]
-        });
+  static resolveOutlineTarget(slotted) {
+    const root = slotted.shadowRoot ?? slotted;
+    let el = root.firstElementChild;
+    while (el) {
+      if (el.tagName === "STYLE") {
+        el = el.nextElementSibling;
+        continue;
       }
-    };
-    sync();
-    this.emptyObserver = new MutationObserver((records) => {
-      const slottedChildChanged = records.some(
-        (record) => record.type === "childList" && record.target === this
-      );
-      if (slottedChildChanged) {
-        this.emptyObserver.disconnect();
-        sync();
-        bindObservers();
-        return;
+      if (getComputedStyle(el).display === "contents") {
+        el = el.firstElementChild;
+        continue;
       }
-      sync();
-    });
-    bindObservers();
+      return el;
+    }
+    return slotted.shadowRoot ? null : slotted;
   }
   disconnectedCallback() {
-    var _a;
-    (_a = this.emptyObserver) == null ? void 0 : _a.disconnect();
-    this.emptyObserver = null;
     this.closeMenu();
   }
   toggleMenu() {
@@ -1075,6 +1079,7 @@ class BlockWrapper extends HTMLElement {
   updateActiveState(isActive) {
     if (isActive) {
       this.classList.add("active");
+      this.handleHoverLeave();
     } else {
       this.classList.remove("active");
       this.closeMenu();
@@ -1168,7 +1173,7 @@ async function serializeBlock(block) {
     locales
   };
 }
-const EDITOR_BODY_TOP_PADDING_PX = 32;
+const EDITOR_BODY_TOP_PADDING_PX = 48;
 async function setupEditorMode(deps) {
   const { routerService, themeState } = deps;
   const padStyle = document.createElement("style");

package/package.json

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