@editora/ui-core 0.1.9 → 0.1.10

package/dist/command-palette.cjs.js

@@ -0,0 +1,67 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("./ElementBase-1b301e7f.js"),n=require("./overlayManager-ece06517.js");require("./command.cjs.js");require("./scroll-lock-48793569.js");require("./listbox-ef2f708e.js");require("./collection-a2969ad2.js");require("./collection.cjs.js");const r=`
+  :host {
+    position: fixed;
+    inset: 0;
+    z-index: var(--ui-command-z, 1300);
+    display: none;
+    color-scheme: light dark;
+    --ui-command-backdrop: rgba(2, 6, 23, 0.52);
+  }
+
+  :host([open]) {
+    display: grid;
+    place-items: start center;
+    padding-top: min(16vh, 120px);
+    box-sizing: border-box;
+  }
+
+  .overlay {
+    position: absolute;
+    inset: 0;
+    background: var(--ui-command-backdrop);
+    backdrop-filter: blur(4px) saturate(1.05);
+  }
+
+  .panel {
+    position: relative;
+    width: min(680px, calc(100vw - 24px));
+    max-height: min(76vh, 720px);
+    transform: translateY(8px) scale(0.985);
+    opacity: 0;
+    transition: transform 170ms ease, opacity 170ms ease;
+  }
+
+  :host([open]) .panel {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+  }
+
+  .command {
+    max-height: min(76vh, 720px);
+  }
+
+  :host([headless]) .overlay,
+  :host([headless]) .panel {
+    display: none !important;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .panel {
+      transition: none !important;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-command-backdrop: rgba(0, 0, 0, 0.72);
+    }
+  }
+`;class o extends a.ElementBase{constructor(){super(),this._command=null,this._globalListenersBound=!1,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onSelect=this._onSelect.bind(this)}static get observedAttributes(){return["open","headless","placeholder","empty-text","query"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onClick),this._syncOpenState()}disconnectedCallback(){var e;this.root.removeEventListener("click",this._onClick),(e=this._command)==null||e.removeEventListener("select",this._onSelect),this._unbindGlobalListeners();try{n.OverlayManager.unregister(this),n.OverlayManager.releaseLock()}catch{}super.disconnectedCallback()}attributeChangedCallback(e,t,s){if(t!==s){if(e==="open"){this._syncOpenState(),this.dispatchEvent(new CustomEvent(s!=null?"open":"close",{bubbles:!0}));return}if(e==="placeholder"||e==="empty-text"){this.isConnected&&this.requestRender();return}if(e==="query"){const i=s||"";this._command&&this._command.query!==i&&(this._command.query=i);return}e==="headless"&&this.isConnected&&this.requestRender()}}openPalette(){this.setAttribute("open","")}closePalette(){this.removeAttribute("open")}get query(){var t;const e=this.getAttribute("query");return typeof e=="string"?e:((t=this._command)==null?void 0:t.query)??""}set query(e){const t=e||"";t?this.setAttribute("query",t):this.removeAttribute("query"),this._command&&this._command.query!==t&&(this._command.query=t)}focusSearch(){var e;(e=this._command)==null||e.focusSearch()}clearQuery(){this.query=""}_syncOpenState(){var e;if(this.hasAttribute("open")){this._bindGlobalListeners();try{n.OverlayManager.register(this),n.OverlayManager.acquireLock()}catch{}setTimeout(()=>{var t;(t=this._command)==null||t.focusSearch()},0)}else{this._unbindGlobalListeners(),(e=this._command)==null||e.clearQuery();try{n.OverlayManager.unregister(this),n.OverlayManager.releaseLock()}catch{}}}render(){var i;const e=this.getAttribute("placeholder")||"Search commands...",t=this.getAttribute("empty-text")||"No commands found.";this.setContent(`
+      <style>${r}</style>
+      <div class="overlay" part="overlay"></div>
+      <section class="panel" part="panel" role="dialog" aria-modal="true" aria-label="Command palette">
+        <ui-command class="command" part="command" placeholder="${e}" empty-text="${t}">
+          <slot slot="command" name="command"></slot>
+        </ui-command>
+      </section>
+    `);const s=this.root.querySelector("ui-command");this._command&&this._command!==s&&this._command.removeEventListener("select",this._onSelect),this._command=s,(i=this._command)==null||i.addEventListener("select",this._onSelect),this._command&&this._command.query!==this.query&&(this._command.query=this.query)}_bindGlobalListeners(){this._globalListenersBound||(document.addEventListener("keydown",this._onKeyDown),this._globalListenersBound=!0)}_unbindGlobalListeners(){this._globalListenersBound&&(document.removeEventListener("keydown",this._onKeyDown),this._globalListenersBound=!1)}_onClick(e){const t=e.target;t!=null&&t.classList.contains("overlay")&&this.closePalette()}_onSelect(e){this.closePalette()}_onKeyDown(e){this.hasAttribute("open")&&e.key==="Escape"&&(e.preventDefault(),this.closePalette())}}typeof customElements<"u"&&!customElements.get("ui-command-palette")&&customElements.define("ui-command-palette",o);exports.UICommandPalette=o;

package/dist/command-palette.esm.js

@@ -0,0 +1,181 @@
+import { E as o } from "./ElementBase-909688f3.mjs";
+import { O as i } from "./overlayManager-86454af7.mjs";
+import "./command.esm.js";
+import "./scroll-lock-9de6d328.mjs";
+import "./listbox-308789a0.mjs";
+import "./collection-a1aac0c6.mjs";
+import "./collection.esm.js";
+const r = `
+  :host {
+    position: fixed;
+    inset: 0;
+    z-index: var(--ui-command-z, 1300);
+    display: none;
+    color-scheme: light dark;
+    --ui-command-backdrop: rgba(2, 6, 23, 0.52);
+  }
+
+  :host([open]) {
+    display: grid;
+    place-items: start center;
+    padding-top: min(16vh, 120px);
+    box-sizing: border-box;
+  }
+
+  .overlay {
+    position: absolute;
+    inset: 0;
+    background: var(--ui-command-backdrop);
+    backdrop-filter: blur(4px) saturate(1.05);
+  }
+
+  .panel {
+    position: relative;
+    width: min(680px, calc(100vw - 24px));
+    max-height: min(76vh, 720px);
+    transform: translateY(8px) scale(0.985);
+    opacity: 0;
+    transition: transform 170ms ease, opacity 170ms ease;
+  }
+
+  :host([open]) .panel {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+  }
+
+  .command {
+    max-height: min(76vh, 720px);
+  }
+
+  :host([headless]) .overlay,
+  :host([headless]) .panel {
+    display: none !important;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .panel {
+      transition: none !important;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-command-backdrop: rgba(0, 0, 0, 0.72);
+    }
+  }
+`;
+class a extends o {
+  constructor() {
+    super(), this._command = null, this._globalListenersBound = !1, this._onClick = this._onClick.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onSelect = this._onSelect.bind(this);
+  }
+  static get observedAttributes() {
+    return ["open", "headless", "placeholder", "empty-text", "query"];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.root.addEventListener("click", this._onClick), this._syncOpenState();
+  }
+  disconnectedCallback() {
+    var e;
+    this.root.removeEventListener("click", this._onClick), (e = this._command) == null || e.removeEventListener("select", this._onSelect), this._unbindGlobalListeners();
+    try {
+      i.unregister(this), i.releaseLock();
+    } catch {
+    }
+    super.disconnectedCallback();
+  }
+  attributeChangedCallback(e, t, s) {
+    if (t !== s) {
+      if (e === "open") {
+        this._syncOpenState(), this.dispatchEvent(new CustomEvent(s != null ? "open" : "close", { bubbles: !0 }));
+        return;
+      }
+      if (e === "placeholder" || e === "empty-text") {
+        this.isConnected && this.requestRender();
+        return;
+      }
+      if (e === "query") {
+        const n = s || "";
+        this._command && this._command.query !== n && (this._command.query = n);
+        return;
+      }
+      e === "headless" && this.isConnected && this.requestRender();
+    }
+  }
+  openPalette() {
+    this.setAttribute("open", "");
+  }
+  closePalette() {
+    this.removeAttribute("open");
+  }
+  get query() {
+    var t;
+    const e = this.getAttribute("query");
+    return typeof e == "string" ? e : ((t = this._command) == null ? void 0 : t.query) ?? "";
+  }
+  set query(e) {
+    const t = e || "";
+    t ? this.setAttribute("query", t) : this.removeAttribute("query"), this._command && this._command.query !== t && (this._command.query = t);
+  }
+  focusSearch() {
+    var e;
+    (e = this._command) == null || e.focusSearch();
+  }
+  clearQuery() {
+    this.query = "";
+  }
+  _syncOpenState() {
+    var e;
+    if (this.hasAttribute("open")) {
+      this._bindGlobalListeners();
+      try {
+        i.register(this), i.acquireLock();
+      } catch {
+      }
+      setTimeout(() => {
+        var t;
+        (t = this._command) == null || t.focusSearch();
+      }, 0);
+    } else {
+      this._unbindGlobalListeners(), (e = this._command) == null || e.clearQuery();
+      try {
+        i.unregister(this), i.releaseLock();
+      } catch {
+      }
+    }
+  }
+  render() {
+    var n;
+    const e = this.getAttribute("placeholder") || "Search commands...", t = this.getAttribute("empty-text") || "No commands found.";
+    this.setContent(`
+      <style>${r}</style>
+      <div class="overlay" part="overlay"></div>
+      <section class="panel" part="panel" role="dialog" aria-modal="true" aria-label="Command palette">
+        <ui-command class="command" part="command" placeholder="${e}" empty-text="${t}">
+          <slot slot="command" name="command"></slot>
+        </ui-command>
+      </section>
+    `);
+    const s = this.root.querySelector("ui-command");
+    this._command && this._command !== s && this._command.removeEventListener("select", this._onSelect), this._command = s, (n = this._command) == null || n.addEventListener("select", this._onSelect), this._command && this._command.query !== this.query && (this._command.query = this.query);
+  }
+  _bindGlobalListeners() {
+    this._globalListenersBound || (document.addEventListener("keydown", this._onKeyDown), this._globalListenersBound = !0);
+  }
+  _unbindGlobalListeners() {
+    this._globalListenersBound && (document.removeEventListener("keydown", this._onKeyDown), this._globalListenersBound = !1);
+  }
+  _onClick(e) {
+    const t = e.target;
+    t != null && t.classList.contains("overlay") && this.closePalette();
+  }
+  _onSelect(e) {
+    this.closePalette();
+  }
+  _onKeyDown(e) {
+    this.hasAttribute("open") && e.key === "Escape" && (e.preventDefault(), this.closePalette());
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-command-palette") && customElements.define("ui-command-palette", a);
+export {
+  a as UICommandPalette
+};

package/dist/command.cjs.js

@@ -0,0 +1,130 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("./ElementBase-1b301e7f.js");require("./listbox-ef2f708e.js");require("./collection-a2969ad2.js");require("./collection.cjs.js");const u=`
+  :host {
+    display: grid;
+    grid-template-rows: auto 1fr;
+    min-inline-size: 0;
+    min-block-size: 0;
+    color-scheme: light dark;
+    --ui-command-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
+    --ui-command-text: var(--ui-color-text, #0f172a);
+    --ui-command-muted: var(--ui-color-muted, #64748b);
+    --ui-command-border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 68%, transparent);
+    --ui-command-accent: var(--ui-color-primary, #2563eb);
+    --ui-command-focus: var(--ui-color-focus-ring, #2563eb);
+    --ui-command-radius: 16px;
+    --ui-command-shadow: none;
+    border: var(--ui-command-border);
+    border-radius: var(--ui-command-radius);
+    background: var(--ui-command-bg);
+    color: var(--ui-command-text);
+    box-shadow: var(--ui-command-shadow);
+    overflow: hidden;
+  }
+
+  .search {
+    border: none;
+    outline: none;
+    background: transparent;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 14px 16px;
+    font-size: 15px;
+    border-bottom: 1px solid rgba(15, 23, 42, 0.1);
+    color: inherit;
+  }
+
+  .search:focus-visible {
+    outline: 2px solid var(--ui-command-focus);
+    outline-offset: -2px;
+  }
+
+  .list {
+    overflow: auto;
+    padding: 8px;
+    display: grid;
+    gap: 4px;
+    min-block-size: 0;
+  }
+
+  ::slotted([slot="command"]) {
+    display: block;
+    border-radius: 10px;
+    padding: 10px 10px;
+    font-size: 13px;
+    color: var(--ui-command-text);
+    line-height: 1.35;
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+    transition: background-color 120ms ease;
+  }
+
+  ::slotted([slot="command"]:hover),
+  ::slotted([slot="command"]:focus-visible),
+  ::slotted([slot="command"][data-active="true"]) {
+    background: color-mix(in srgb, var(--ui-command-accent) 14%, transparent);
+  }
+
+  ::slotted([slot="command"][hidden]) {
+    display: none !important;
+  }
+
+  .empty {
+    padding: 12px 10px 14px;
+    color: var(--ui-command-muted);
+    font-size: 12px;
+    text-align: center;
+  }
+
+  .empty[hidden] {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    ::slotted([slot="command"]) {
+      transition: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    :host {
+      border-width: 2px;
+      box-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-command-bg: Canvas;
+      --ui-command-text: CanvasText;
+      --ui-command-muted: CanvasText;
+      --ui-command-border: 1px solid CanvasText;
+      --ui-command-accent: Highlight;
+      --ui-command-focus: Highlight;
+      --ui-command-shadow: none;
+    }
+
+    :host,
+    .search,
+    ::slotted([slot="command"]) {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+      box-shadow: none;
+    }
+
+    ::slotted([slot="command"]:hover),
+    ::slotted([slot="command"]:focus-visible),
+    ::slotted([slot="command"][data-active="true"]) {
+      border-color: Highlight;
+    }
+  }
+`;function r(o){return o.trim().toLowerCase()}function d(o){return r(o.getAttribute("aria-label")||o.getAttribute("data-label")||[o.getAttribute("data-value")||"",o.getAttribute("data-keywords")||"",o.textContent||""].join(" "))}function a(o){if(!o)return[];const t=o.assignedElements({flatten:!0}),e=[];for(const i of t){if(i instanceof HTMLSlotElement){e.push(...a(i));continue}i instanceof HTMLElement&&i.getAttribute("slot")==="command"&&e.push(i)}return e}class l extends c.ElementBase{constructor(){super(),this._commands=[],this._visible=[],this._active=-1,this._input=null,this._listbox=null,this._slot=null,this._query="",this._onSlotChange=this._onSlotChange.bind(this),this._onInput=this._onInput.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onClick=this._onClick.bind(this)}static get observedAttributes(){return["placeholder","empty-text"]}get query(){return this._query}set query(t){const e=t||"";if(e===this._query)return;const i=this._query;this._query=e,this._input&&(this._input.value=e),this._applyFilter(),this.dispatchEvent(new CustomEvent("query-change",{detail:{value:e,previousValue:i},bubbles:!0,composed:!0}))}focusSearch(){var t;(t=this._input)==null||t.focus()}clearQuery(){this.query=""}refreshCommands(){this._collectCommands(),this._applyFilter()}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onClick),this._syncSlotListener(),this.refreshCommands()}disconnectedCallback(){var t,e;this.root.removeEventListener("click",this._onClick),(t=this._input)==null||t.removeEventListener("input",this._onInput),(e=this._input)==null||e.removeEventListener("keydown",this._onKeyDown),this._slot&&this._slot.removeEventListener("slotchange",this._onSlotChange),this._slot=null,this._input=null,super.disconnectedCallback()}attributeChangedCallback(t,e,i){if(e!==i){if(t==="placeholder"){this._input&&(this._input.placeholder=i||"Search commands...");return}if(t==="empty-text"){const s=this.root.querySelector(".empty");s&&(s.textContent=i||"No commands found.")}}}render(){this._input&&(this._input.removeEventListener("input",this._onInput),this._input.removeEventListener("keydown",this._onKeyDown));const t=this.getAttribute("placeholder")||"Search commands...",e=this.getAttribute("empty-text")||"No commands found.";this.setContent(`
+      <style>${u}</style>
+      <input class="search" part="search" type="text" placeholder="${t}" />
+      <ui-listbox class="list" part="list" role="listbox" aria-label="Command options" item-selector="[slot=&quot;command&quot;]" item-role="option" active-attribute="data-active">
+        <slot name="command"></slot>
+        <div class="empty" part="empty" hidden>${e}</div>
+      </ui-listbox>
+    `),this._input=this.root.querySelector(".search"),this._listbox=this.root.querySelector("ui-listbox"),this._listbox&&(this._listbox.container=this),this._input&&(this._input.value=this._query,this._input.addEventListener("input",this._onInput),this._input.addEventListener("keydown",this._onKeyDown)),this._syncSlotListener(),this.refreshCommands()}_syncSlotListener(){const t=this.root.querySelector('slot[name="command"]');this._slot&&this._slot!==t&&this._slot.removeEventListener("slotchange",this._onSlotChange),t&&this._slot!==t&&t.addEventListener("slotchange",this._onSlotChange),this._slot=t}_onSlotChange(){this.refreshCommands()}_collectCommands(){var t;this._commands=a(this._slot),this._commands.forEach((e,i)=>{e.setAttribute("data-index",String(i))}),this._listbox&&(this._listbox.items=this._commands),(t=this._listbox)==null||t.refresh()}_applyFilter(){var i,s;const t=r(this._query);this._visible=this._commands.filter(n=>!t||d(n).includes(t)),this._commands.forEach(n=>{this._visible.includes(n)?n.removeAttribute("hidden"):n.setAttribute("hidden","")}),this._visible.length>0?(this._active=Math.max(0,Math.min(this._active,this._visible.length-1)),(i=this._listbox)==null||i.setActiveItem(this._visible[this._active],{focus:!1,owner:this._input,scroll:!0})):(this._active=-1,(s=this._listbox)==null||s.clearActive(),this._input&&this._input.removeAttribute("aria-activedescendant"));const e=this.root.querySelector(".empty");e&&(this._visible.length===0?e.removeAttribute("hidden"):e.setAttribute("hidden",""))}_selectCommand(t){if(!t)return;const e=t.getAttribute("data-index"),i=e==null?-1:Number(e);this.dispatchEvent(new CustomEvent("select",{detail:{index:i,item:t,label:t.getAttribute("data-label")||(t.textContent||"").trim(),value:t.getAttribute("data-value")||void 0},bubbles:!0,composed:!0}))}_move(t){var s;if(this._visible.length===0)return;const e=this._active>=0?this._visible[this._active]:null,i=((s=this._listbox)==null?void 0:s.move(t,{current:e,focus:!1,owner:this._input,scroll:!0}))||null;i&&(this._active=this._visible.indexOf(i))}_onInput(t){this.query=t.target.value||""}_onKeyDown(t){var e,i;if(t.key==="ArrowDown"){t.preventDefault(),this._move(1);return}if(t.key==="ArrowUp"){t.preventDefault(),this._move(-1);return}if(t.key==="Home"){t.preventDefault();const s=((e=this._listbox)==null?void 0:e.focusBoundary("first",{focus:!1,owner:this._input,scroll:!0}))||null;s&&(this._active=this._visible.indexOf(s));return}if(t.key==="End"){t.preventDefault();const s=((i=this._listbox)==null?void 0:i.focusBoundary("last",{focus:!1,owner:this._input,scroll:!0}))||null;s&&(this._active=this._visible.indexOf(s));return}t.key==="Enter"&&(t.preventDefault(),this._selectCommand(this._active>=0?this._visible[this._active]:null))}_onClick(t){const e=t.composedPath(),i=this._commands.find(s=>e.includes(s));!i||i.hasAttribute("hidden")||this._selectCommand(i)}}typeof customElements<"u"&&!customElements.get("ui-command")&&customElements.define("ui-command",l);exports.UICommand=l;