@juo/blocks 1.8.0 → 1.8.1

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;AAmgB9C,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
@@ -812,9 +804,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 +1000,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 +1073,7 @@ class BlockWrapper extends HTMLElement {
   updateActiveState(isActive) {
     if (isActive) {
       this.classList.add("active");
+      this.handleHoverLeave();
     } else {
       this.classList.remove("active");
       this.closeMenu();

package/package.json

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