@editora/ui-editor 0.1.4

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ajay Kumar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs.js

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("@editora/ui-core");class r extends i.ElementBase{constructor(){super(),this._portalEl=null,this._cleanup=void 0}static get observedAttributes(){return["anchor-id","open"]}connectedCallback(){super.connectedCallback()}attributeChangedCallback(){this.render()}showForAnchorId(t){this.setAttribute("anchor-id",t),this.setAttribute("open","")}hide(){this.removeAttribute("open")}render(){const t=this.getAttribute("anchor-id"),s=this.hasAttribute("open");if(this.setContent("<slot></slot>"),s&&t){const o=document.getElementById(t);if(!o){if(this._cleanup){try{this._cleanup()}catch{}this._cleanup=void 0}this._portalEl=null;return}this._portalEl||(this._portalEl=document.createElement("div")),this._portalEl.innerHTML="";const e=document.createElement("div");e.className="floating-toolbar";const n=this.querySelector('[slot="toolbar"]');n&&e.appendChild(n.cloneNode(!0)),this._portalEl.appendChild(e),this._cleanup=i.showPortalFor(o,this._portalEl,"top")}else this._cleanup&&(this._cleanup(),this._cleanup=void 0),this._portalEl=null}}typeof customElements<"u"&&!customElements.get("ui-floating-toolbar")&&customElements.define("ui-floating-toolbar",r);const m=`
+  .palette { width: 520px; max-width: 90vw; background: white; border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,0.12); padding: 8px; }
+  .list { max-height: 300px; overflow: auto; }
+  .item { padding: 8px; cursor: pointer; }
+`;class c extends i.ElementBase{static get observedAttributes(){return["open"]}constructor(){super()}open(){this.setAttribute("open","")}close(){this.removeAttribute("open")}render(){if(!this.hasAttribute("open")){this.setContent("");return}const s=`<div class="palette" role="dialog" aria-modal="true">
+      <input part="search" placeholder="Type a command..." />
+      <div class="list"><slot></slot></div>
+    </div>`;this.setContent(`<style>${m}</style>${s}`),Array.from(this.querySelectorAll('[slot="command"]')).forEach((e,n)=>{e.addEventListener("click",()=>this.dispatchEvent(new CustomEvent("select",{detail:{index:n}})))})}}typeof customElements<"u"&&!customElements.get("ui-command-palette")&&customElements.define("ui-command-palette",c);class a extends i.ElementBase{constructor(){super(),this._portalEl=null,this._cleanup=void 0}static get observedAttributes(){return["anchor-id","open"]}openFor(t){this.setAttribute("anchor-id",t),this.setAttribute("open","")}close(){this.removeAttribute("open")}openAt(t,s){const o={getBoundingClientRect:()=>({top:s,bottom:s,left:t,right:t,width:0,height:0})};this.setAttribute("open",""),this._portalEl||(this._portalEl=document.createElement("div")),this._portalEl.innerHTML="";const e=document.createElement("div");e.className="context-menu";const n=this.querySelector('[slot="content"]');n&&e.appendChild(n.cloneNode(!0)),this._portalEl.appendChild(e),this._cleanup=i.showPortalFor(o,this._portalEl,{placement:"bottom",shift:!0})}render(){const t=this.getAttribute("anchor-id"),s=this.hasAttribute("open");if(this.setContent("<slot></slot>"),s&&t){const o=document.getElementById(t);if(!o){if(this._cleanup){try{this._cleanup()}catch{}this._cleanup=void 0}this._portalEl=null;return}this._portalEl||(this._portalEl=document.createElement("div")),this._portalEl.innerHTML="";const e=document.createElement("div");e.className="context-menu";const n=this.querySelector('[slot="content"]');n&&e.appendChild(n.cloneNode(!0)),this._portalEl.appendChild(e),this._cleanup=i.showPortalFor(o,this._portalEl,"bottom")}else this._cleanup&&(this._cleanup(),this._cleanup=void 0),this._portalEl=null}}typeof customElements<"u"&&!customElements.get("ui-context-menu")&&customElements.define("ui-context-menu",a);class u extends i.ElementBase{static get observedAttributes(){return["open","position"]}constructor(){super()}open(){this.setAttribute("open","")}close(){this.removeAttribute("open")}render(){const t=this.hasAttribute("open"),s=this.getAttribute("position")||"right";if(!t){this.setContent("");return}const o=`<div class="panel panel-${s}"><slot></slot></div>`;this.setContent(o)}}typeof customElements<"u"&&!customElements.get("ui-plugin-panel")&&customElements.define("ui-plugin-panel",u);class p extends i.ElementBase{constructor(){super()}render(){this.setContent('<div class="block-controls"><slot></slot></div>')}}typeof customElements<"u"&&!customElements.get("ui-block-controls")&&customElements.define("ui-block-controls",p);class h extends i.ElementBase{constructor(){super(),this._portalEl=null,this._cleanup=void 0}static get observedAttributes(){return["anchor-id","open"]}openFor(t){this.setAttribute("anchor-id",t),this.setAttribute("open","")}close(){this.removeAttribute("open")}render(){const t=this.getAttribute("anchor-id"),s=this.hasAttribute("open");if(this.setContent("<slot></slot>"),s&&t){const o=document.getElementById(t);if(!o)return;this._portalEl||(this._portalEl=document.createElement("div")),this._portalEl.innerHTML="";const e=document.createElement("div");e.className="selection-popup";const n=this.querySelector('[slot="content"]');n&&e.appendChild(n.cloneNode(!0)),this._portalEl.appendChild(e),this._cleanup=i.showPortalFor(o,this._portalEl,"top")}else this._cleanup&&(this._cleanup(),this._cleanup=void 0),this._portalEl=null}}typeof customElements<"u"&&!customElements.get("ui-selection-popup")&&customElements.define("ui-selection-popup",h);exports.UIBlockControls=p;exports.UICommandPalette=c;exports.UIContextMenu=a;exports.UIFloatingToolbar=r;exports.UIPluginPanel=u;exports.UISelectionPopup=h;

package/dist/index.esm.js

@@ -0,0 +1,197 @@
+import { ElementBase as i, showPortalFor as r } from "@editora/ui-core";
+class a extends i {
+  constructor() {
+    super(), this._portalEl = null, this._cleanup = void 0;
+  }
+  static get observedAttributes() {
+    return ["anchor-id", "open"];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  showForAnchorId(t) {
+    this.setAttribute("anchor-id", t), this.setAttribute("open", "");
+  }
+  hide() {
+    this.removeAttribute("open");
+  }
+  render() {
+    const t = this.getAttribute("anchor-id"), s = this.hasAttribute("open");
+    if (this.setContent("<slot></slot>"), s && t) {
+      const o = document.getElementById(t);
+      if (!o) {
+        if (this._cleanup) {
+          try {
+            this._cleanup();
+          } catch {
+          }
+          this._cleanup = void 0;
+        }
+        this._portalEl = null;
+        return;
+      }
+      this._portalEl || (this._portalEl = document.createElement("div")), this._portalEl.innerHTML = "";
+      const e = document.createElement("div");
+      e.className = "floating-toolbar";
+      const n = this.querySelector('[slot="toolbar"]');
+      n && e.appendChild(n.cloneNode(!0)), this._portalEl.appendChild(e), this._cleanup = r(o, this._portalEl, "top");
+    } else
+      this._cleanup && (this._cleanup(), this._cleanup = void 0), this._portalEl = null;
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-floating-toolbar") && customElements.define("ui-floating-toolbar", a);
+const p = `
+  .palette { width: 520px; max-width: 90vw; background: white; border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,0.12); padding: 8px; }
+  .list { max-height: 300px; overflow: auto; }
+  .item { padding: 8px; cursor: pointer; }
+`;
+class u extends i {
+  static get observedAttributes() {
+    return ["open"];
+  }
+  constructor() {
+    super();
+  }
+  open() {
+    this.setAttribute("open", "");
+  }
+  close() {
+    this.removeAttribute("open");
+  }
+  render() {
+    if (!this.hasAttribute("open")) {
+      this.setContent("");
+      return;
+    }
+    const s = `<div class="palette" role="dialog" aria-modal="true">
+      <input part="search" placeholder="Type a command..." />
+      <div class="list"><slot></slot></div>
+    </div>`;
+    this.setContent(`<style>${p}</style>${s}`), Array.from(this.querySelectorAll('[slot="command"]')).forEach((e, n) => {
+      e.addEventListener("click", () => this.dispatchEvent(new CustomEvent("select", { detail: { index: n } })));
+    });
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-command-palette") && customElements.define("ui-command-palette", u);
+class h extends i {
+  constructor() {
+    super(), this._portalEl = null, this._cleanup = void 0;
+  }
+  static get observedAttributes() {
+    return ["anchor-id", "open"];
+  }
+  openFor(t) {
+    this.setAttribute("anchor-id", t), this.setAttribute("open", "");
+  }
+  close() {
+    this.removeAttribute("open");
+  }
+  // open the context menu at arbitrary client coordinates (uses a virtual anchor)
+  openAt(t, s) {
+    const o = {
+      getBoundingClientRect: () => ({ top: s, bottom: s, left: t, right: t, width: 0, height: 0 })
+    };
+    this.setAttribute("open", ""), this._portalEl || (this._portalEl = document.createElement("div")), this._portalEl.innerHTML = "";
+    const e = document.createElement("div");
+    e.className = "context-menu";
+    const n = this.querySelector('[slot="content"]');
+    n && e.appendChild(n.cloneNode(!0)), this._portalEl.appendChild(e), this._cleanup = r(o, this._portalEl, { placement: "bottom", shift: !0 });
+  }
+  render() {
+    const t = this.getAttribute("anchor-id"), s = this.hasAttribute("open");
+    if (this.setContent("<slot></slot>"), s && t) {
+      const o = document.getElementById(t);
+      if (!o) {
+        if (this._cleanup) {
+          try {
+            this._cleanup();
+          } catch {
+          }
+          this._cleanup = void 0;
+        }
+        this._portalEl = null;
+        return;
+      }
+      this._portalEl || (this._portalEl = document.createElement("div")), this._portalEl.innerHTML = "";
+      const e = document.createElement("div");
+      e.className = "context-menu";
+      const n = this.querySelector('[slot="content"]');
+      n && e.appendChild(n.cloneNode(!0)), this._portalEl.appendChild(e), this._cleanup = r(o, this._portalEl, "bottom");
+    } else
+      this._cleanup && (this._cleanup(), this._cleanup = void 0), this._portalEl = null;
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-context-menu") && customElements.define("ui-context-menu", h);
+class d extends i {
+  static get observedAttributes() {
+    return ["open", "position"];
+  }
+  constructor() {
+    super();
+  }
+  open() {
+    this.setAttribute("open", "");
+  }
+  close() {
+    this.removeAttribute("open");
+  }
+  render() {
+    const t = this.hasAttribute("open"), s = this.getAttribute("position") || "right";
+    if (!t) {
+      this.setContent("");
+      return;
+    }
+    const o = `<div class="panel panel-${s}"><slot></slot></div>`;
+    this.setContent(o);
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-plugin-panel") && customElements.define("ui-plugin-panel", d);
+class m extends i {
+  constructor() {
+    super();
+  }
+  render() {
+    this.setContent('<div class="block-controls"><slot></slot></div>');
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-block-controls") && customElements.define("ui-block-controls", m);
+class E extends i {
+  constructor() {
+    super(), this._portalEl = null, this._cleanup = void 0;
+  }
+  static get observedAttributes() {
+    return ["anchor-id", "open"];
+  }
+  openFor(t) {
+    this.setAttribute("anchor-id", t), this.setAttribute("open", "");
+  }
+  close() {
+    this.removeAttribute("open");
+  }
+  render() {
+    const t = this.getAttribute("anchor-id"), s = this.hasAttribute("open");
+    if (this.setContent("<slot></slot>"), s && t) {
+      const o = document.getElementById(t);
+      if (!o)
+        return;
+      this._portalEl || (this._portalEl = document.createElement("div")), this._portalEl.innerHTML = "";
+      const e = document.createElement("div");
+      e.className = "selection-popup";
+      const n = this.querySelector('[slot="content"]');
+      n && e.appendChild(n.cloneNode(!0)), this._portalEl.appendChild(e), this._cleanup = r(o, this._portalEl, "top");
+    } else
+      this._cleanup && (this._cleanup(), this._cleanup = void 0), this._portalEl = null;
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-selection-popup") && customElements.define("ui-selection-popup", E);
+export {
+  m as UIBlockControls,
+  u as UICommandPalette,
+  h as UIContextMenu,
+  a as UIFloatingToolbar,
+  d as UIPluginPanel,
+  E as UISelectionPopup
+};

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@editora/ui-editor",
+  "version": "0.1.4",
+  "description": "Editor-focused UI extensions for Editora (floating toolbar, command palette, context menus)",
+  "author": "Ajay Kumar <ajaykr089@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ajaykr089/Editora.git",
+    "directory": "packages/ui-editor"
+  },
+  "homepage": "https://editora-ecosystem.netlify.app/docs/ui-react",
+  "bugs": {
+    "url": "https://github.com/ajaykr089/Editora/issues"
+  },
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "prepare": "npm run build"
+  },
+  "peerDependencies": {
+    "@editora/ui-core": "^0.1.17"
+  },
+  "dependencies": {
+    "@editora/ui-core": "^0.1.17"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "vite": "^4.5.14"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs.js",
+      "default": "./dist/index.esm.js"
+    }
+  },
+  "gitHead": "7883627e823aa99dd5ecb66a5201116df972f88b"
+}

package/src/components/ui-block-controls.ts

@@ -0,0 +1,10 @@
+import { ElementBase } from '@editora/ui-core';
+
+export class UIBlockControls extends ElementBase {
+  constructor() { super(); }
+  protected render() { this.setContent(`<div class="block-controls"><slot></slot></div>`); }
+}
+
+if (typeof customElements !== 'undefined' && !customElements.get('ui-block-controls')) {
+  customElements.define('ui-block-controls', UIBlockControls);
+}

package/src/components/ui-command-palette.ts

@@ -0,0 +1,34 @@
+import { ElementBase } from '@editora/ui-core';
+
+const style = `
+  .palette { width: 520px; max-width: 90vw; background: white; border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,0.12); padding: 8px; }
+  .list { max-height: 300px; overflow: auto; }
+  .item { padding: 8px; cursor: pointer; }
+`;
+
+export class UICommandPalette extends ElementBase {
+  static get observedAttributes() { return ['open']; }
+  constructor() { super(); }
+
+  open() { this.setAttribute('open',''); }
+  close() { this.removeAttribute('open'); }
+
+  protected render() {
+    const open = this.hasAttribute('open');
+    if (!open) { this.setContent(''); return; }
+    const html = `<div class="palette" role="dialog" aria-modal="true">
+      <input part="search" placeholder="Type a command..." />
+      <div class="list"><slot></slot></div>
+    </div>`;
+    this.setContent(`<style>${style}</style>${html}`);
+    // wire clicks from slotted items
+    const items = Array.from(this.querySelectorAll('[slot="command"]'));
+    items.forEach((it, i) => {
+      (it as HTMLElement).addEventListener('click', () => this.dispatchEvent(new CustomEvent('select', { detail: { index: i } })));
+    });
+  }
+}
+
+if (typeof customElements !== 'undefined' && !customElements.get('ui-command-palette')) {
+  customElements.define('ui-command-palette', UICommandPalette);
+}

package/src/components/ui-context-menu.ts

@@ -0,0 +1,61 @@
+import { ElementBase } from '@editora/ui-core';
+import { showPortalFor } from '@editora/ui-core';
+
+export class UIContextMenu extends ElementBase {
+  static get observedAttributes() { return ['anchor-id','open']; }
+  private _portalEl: HTMLElement | null = null;
+  private _cleanup: (() => void) | undefined = undefined;
+
+  constructor() { super(); }
+
+  openFor(anchorId: string) { this.setAttribute('anchor-id', anchorId); this.setAttribute('open',''); }
+  close() { this.removeAttribute('open'); }
+
+  // open the context menu at arbitrary client coordinates (uses a virtual anchor)
+  openAt(x: number, y: number) {
+    // create a very small virtual rect centered at the provided point
+    const virtual: any = {
+      getBoundingClientRect: () => ({ top: y, bottom: y, left: x, right: x, width: 0, height: 0 })
+    };
+    this.setAttribute('open','');
+    if (!this._portalEl) this._portalEl = document.createElement('div');
+    this._portalEl.innerHTML = '';
+    const panel = document.createElement('div');
+    panel.className = 'context-menu';
+    const sl = this.querySelector('[slot="content"]');
+    if (sl) panel.appendChild(sl.cloneNode(true));
+    this._portalEl.appendChild(panel);
+    this._cleanup = showPortalFor(virtual, this._portalEl, { placement: 'bottom', shift: true });
+  }
+
+  protected render() {
+    const anchorId = this.getAttribute('anchor-id');
+    const open = this.hasAttribute('open');
+    this.setContent(`<slot></slot>`);
+    if (open && anchorId) {
+      const anchor = document.getElementById(anchorId);
+      // anchor missing -> ensure any previous portal is cleaned up and bail out
+      if (!anchor) {
+        if (this._cleanup) { try { this._cleanup(); } catch (e) {} this._cleanup = undefined; }
+        this._portalEl = null;
+        return;
+      }
+
+      if (!this._portalEl) this._portalEl = document.createElement('div');
+      this._portalEl.innerHTML = '';
+      const panel = document.createElement('div');
+      panel.className = 'context-menu';
+      const sl = this.querySelector('[slot="content"]');
+      if (sl) panel.appendChild(sl.cloneNode(true));
+      this._portalEl.appendChild(panel);
+      this._cleanup = showPortalFor(anchor as HTMLElement, this._portalEl, 'bottom');
+    } else {
+      if (this._cleanup) { this._cleanup(); this._cleanup = undefined; }
+      this._portalEl = null;
+    }
+  }
+}
+
+if (typeof customElements !== 'undefined' && !customElements.get('ui-context-menu')) {
+  customElements.define('ui-context-menu', UIContextMenu);
+}

package/src/components/ui-floating-toolbar.ts

@@ -0,0 +1,49 @@
+import { ElementBase } from '@editora/ui-core';
+import { showPortalFor } from '@editora/ui-core';
+
+export class UIFloatingToolbar extends ElementBase {
+  static get observedAttributes() { return ['anchor-id','open']; }
+  private _portalEl: HTMLElement | null = null;
+  private _cleanup: (() => void) | undefined = undefined;
+
+  constructor() { super(); }
+
+  connectedCallback() { super.connectedCallback(); }
+
+  attributeChangedCallback() { this.render(); }
+
+  showForAnchorId(id: string) { this.setAttribute('anchor-id', id); this.setAttribute('open',''); }
+  hide() { this.removeAttribute('open'); }
+
+  protected render() {
+    const anchorId = this.getAttribute('anchor-id');
+    const open = this.hasAttribute('open');
+    this.setContent(`<slot></slot>`);
+    if (open && anchorId) {
+      const anchor = document.getElementById(anchorId);
+      // if anchor not present, cleanup any previous portal and bail out
+      if (!anchor) {
+        if (this._cleanup) { try { this._cleanup(); } catch (e) {} this._cleanup = undefined; }
+        this._portalEl = null;
+        return;
+      }
+
+      if (!this._portalEl) this._portalEl = document.createElement('div');
+      this._portalEl.innerHTML = '';
+      const panel = document.createElement('div');
+      panel.className = 'floating-toolbar';
+      // clone slot content into panel
+      const sl = this.querySelector('[slot="toolbar"]');
+      if (sl) panel.appendChild(sl.cloneNode(true));
+      this._portalEl.appendChild(panel);
+      this._cleanup = showPortalFor(anchor as HTMLElement, this._portalEl, 'top');
+    } else {
+      if (this._cleanup) { this._cleanup(); this._cleanup = undefined; }
+      this._portalEl = null;
+    }
+  }
+}
+
+if (typeof customElements !== 'undefined' && !customElements.get('ui-floating-toolbar')) {
+  customElements.define('ui-floating-toolbar', UIFloatingToolbar);
+}

package/src/components/ui-plugin-panel.ts

@@ -0,0 +1,21 @@
+import { ElementBase } from '@editora/ui-core';
+
+export class UIPluginPanel extends ElementBase {
+  static get observedAttributes() { return ['open','position']; }
+  constructor() { super(); }
+
+  open() { this.setAttribute('open',''); }
+  close() { this.removeAttribute('open'); }
+
+  protected render() {
+    const open = this.hasAttribute('open');
+    const position = this.getAttribute('position') || 'right';
+    if (!open) { this.setContent(''); return; }
+    const html = `<div class="panel panel-${position}"><slot></slot></div>`;
+    this.setContent(html);
+  }
+}
+
+if (typeof customElements !== 'undefined' && !customElements.get('ui-plugin-panel')) {
+  customElements.define('ui-plugin-panel', UIPluginPanel);
+}

package/src/components/ui-selection-popup.ts

@@ -0,0 +1,38 @@
+import { ElementBase } from '@editora/ui-core';
+import { showPortalFor } from '@editora/ui-core';
+
+export class UISelectionPopup extends ElementBase {
+  static get observedAttributes() { return ['anchor-id','open']; }
+  private _portalEl: HTMLElement | null = null;
+  private _cleanup: (() => void) | undefined = undefined;
+
+  constructor() { super(); }
+
+  openFor(anchorId: string) { this.setAttribute('anchor-id', anchorId); this.setAttribute('open',''); }
+  close() { this.removeAttribute('open'); }
+
+  protected render() {
+    const anchorId = this.getAttribute('anchor-id');
+    const open = this.hasAttribute('open');
+    this.setContent(`<slot></slot>`);
+    if (open && anchorId) {
+      const anchor = document.getElementById(anchorId);
+      if (!anchor) return;
+      if (!this._portalEl) this._portalEl = document.createElement('div');
+      this._portalEl.innerHTML = '';
+      const panel = document.createElement('div');
+      panel.className = 'selection-popup';
+      const sl = this.querySelector('[slot="content"]');
+      if (sl) panel.appendChild(sl.cloneNode(true));
+      this._portalEl.appendChild(panel);
+      this._cleanup = showPortalFor(anchor as HTMLElement, this._portalEl, 'top');
+    } else {
+      if (this._cleanup) { this._cleanup(); this._cleanup = undefined; }
+      this._portalEl = null;
+    }
+  }
+}
+
+if (typeof customElements !== 'undefined' && !customElements.get('ui-selection-popup')) {
+  customElements.define('ui-selection-popup', UISelectionPopup);
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+export * from './components/ui-floating-toolbar';
+export * from './components/ui-command-palette';
+export * from './components/ui-context-menu';
+export * from './components/ui-plugin-panel';
+export * from './components/ui-block-controls';
+export * from './components/ui-selection-popup';