@shadow-garden/bapbong-ui 0.1.2 → 0.3.0

package/dist/index.cjs

@@ -29,6 +29,7 @@ __export(index_exports, {
   openCellProperties: () => openCellProperties,
   promptDialog: () => promptDialog,
   showContextMenu: () => showContextMenu,
+  showLinkPanel: () => showLinkPanel,
   tableGridPicker: () => tableGridPicker
 });
 module.exports = __toCommonJS(index_exports);
@@ -287,6 +288,20 @@ var STYLE2 = `
 .bb-color-none{grid-column:1/-1;font:inherit;font-size:12px;padding:3px 0;border:1px solid var(--bb-ui-border,#e3e3e0);border-radius:5px;background:var(--bb-ui-bg,#fff);cursor:pointer}
 .bb-color-none:hover{background:var(--bb-ui-hover,#f1efe8)}
 .bb-i-bold{font-weight:700}.bb-i-italic{font-style:italic}.bb-i-underline{text-decoration:underline}.bb-i-strike{text-decoration:line-through}
+.bb-toolbar-split{display:flex;align-items:center;gap:0}
+.bb-toolbar-split .bb-toolbar-btn{min-width:26px;padding:0 5px}
+.bb-split-arrow{min-width:14px !important;width:15px;padding:0 !important}
+.bb-split-arrow svg{display:block}
+.bb-split-pop{position:absolute;z-index:1200;display:grid;grid-template-columns:repeat(3,auto);gap:8px;padding:10px;background:var(--bb-ui-menu-bg,#fff);-webkit-backdrop-filter:var(--bb-ui-pop-filter,none);backdrop-filter:var(--bb-ui-pop-filter,none);border:1px solid var(--bb-ui-pop-border,var(--bb-ui-border,#e3e3e0));border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.16)}
+.bb-split-pop[hidden]{display:none}
+.bb-split-card{display:flex;flex-direction:column;gap:6px;width:76px;padding:9px 8px;border:1px solid var(--bb-ui-border,#e3e3e0);border-radius:6px;background:transparent;cursor:pointer;font-family:inherit}
+.bb-split-card:hover{background:var(--bb-ui-hover,#f1efe8)}
+.bb-split-card.is-selected{background:var(--bb-ui-active-bg,#e6f1fb);border-color:var(--bb-ui-active-border,#b5d4f4)}
+.bb-split-row{display:flex;align-items:center;gap:4px}
+.bb-split-row[data-lvl="1"]{padding-left:9px}
+.bb-split-row[data-lvl="2"]{padding-left:18px}
+.bb-split-marker{flex:none;min-width:14px;font-size:9px;line-height:1.1;text-align:right;color:var(--bb-ui-fg,#2c2c2a);white-space:nowrap}
+.bb-split-bar{flex:1;height:3px;border-radius:2px;background:var(--bb-ui-border,#d9d9d4)}
 `;
 function defaultToolbarGroups(commands) {
   const names = [...commands].map((c) => c.name);
@@ -306,6 +321,7 @@ function mountToolbar(host, editor, options = {}) {
   const buttons = [];
   const selects = [];
   const colors = [];
+  const splits = [];
   let latest = null;
   for (const group of groups) {
     const entries = group.filter(
@@ -381,7 +397,7 @@ function mountToolbar(host, editor, options = {}) {
         btn2.addEventListener("mousedown", (e) => e.preventDefault());
         btn2.addEventListener("click", () => {
           const open = pop2.hidden;
-          wrap.querySelectorAll(".bb-color-pop").forEach((p) => p.hidden = true);
+          wrap.querySelectorAll(".bb-color-pop,.bb-split-pop").forEach((p) => p.hidden = true);
           pop2.hidden = !open;
           if (!pop2.hidden) {
             const wrapRect = wrap.getBoundingClientRect();
@@ -410,6 +426,94 @@ function mountToolbar(host, editor, options = {}) {
         colors.push({ spec: entry, bar });
         continue;
       }
+      if (typeof entry !== "string" && entry.kind === "split") {
+        const splitWrap = document.createElement("div");
+        splitWrap.className = "bb-toolbar-split";
+        const item2 = items[entry.name] ?? { title: entry.name };
+        const main = document.createElement("button");
+        main.type = "button";
+        main.className = "bb-toolbar-btn";
+        main.title = item2.title;
+        main.setAttribute("aria-label", item2.title);
+        if (item2.svg) main.innerHTML = item2.svg;
+        else main.textContent = item2.label ?? entry.name;
+        main.addEventListener("mousedown", (e) => e.preventDefault());
+        main.addEventListener("click", () => {
+          if (!latest) return;
+          editor.commands.get(entry.name)?.run(latest, (tr) => editor.dispatch(tr));
+          editor.focus();
+        });
+        buttons.push({ name: entry.name, el: main });
+        const arrow = document.createElement("button");
+        arrow.type = "button";
+        arrow.className = "bb-toolbar-btn bb-split-arrow";
+        arrow.title = `${item2.title} styles`;
+        arrow.setAttribute("aria-label", `${item2.title} styles`);
+        arrow.setAttribute("aria-haspopup", "true");
+        arrow.innerHTML = '<svg viewBox="0 0 8 8" width="8" height="8" fill="currentColor" aria-hidden="true"><path d="M1 2.5h6L4 6z"/></svg>';
+        const pop2 = document.createElement("div");
+        pop2.className = "bb-split-pop";
+        pop2.hidden = true;
+        const cards = [];
+        for (const opt of entry.options) {
+          const card = document.createElement("button");
+          card.type = "button";
+          card.className = "bb-split-card";
+          card.dataset["value"] = opt.value;
+          if (opt.title) card.title = opt.title;
+          opt.rows.forEach((marker, i) => {
+            const row = document.createElement("span");
+            row.className = "bb-split-row";
+            row.dataset["lvl"] = String(i);
+            const m = document.createElement("span");
+            m.className = "bb-split-marker";
+            m.textContent = marker;
+            const bar = document.createElement("span");
+            bar.className = "bb-split-bar";
+            row.append(m, bar);
+            card.appendChild(row);
+          });
+          card.addEventListener("mousedown", (e) => e.preventDefault());
+          card.addEventListener("click", () => {
+            entry.onSelect(opt.value);
+            pop2.hidden = true;
+            editor.focus();
+          });
+          pop2.appendChild(card);
+          cards.push(card);
+        }
+        arrow.addEventListener("mousedown", (e) => e.preventDefault());
+        arrow.addEventListener("click", () => {
+          const open = pop2.hidden;
+          wrap.querySelectorAll(".bb-split-pop,.bb-color-pop").forEach((p) => p.hidden = true);
+          pop2.hidden = !open;
+          if (!pop2.hidden) {
+            const wrapRect = wrap.getBoundingClientRect();
+            const btnRect = arrow.getBoundingClientRect();
+            pop2.style.top = `${btnRect.bottom - wrapRect.top + 4}px`;
+            const left = Math.max(
+              0,
+              Math.min(
+                btnRect.left - wrapRect.left,
+                wrap.clientWidth - pop2.offsetWidth - 4
+              )
+            );
+            pop2.style.left = `${left}px`;
+            const onDoc = (ev) => {
+              if (!splitWrap.contains(ev.target) && !pop2.contains(ev.target)) {
+                pop2.hidden = true;
+                document.removeEventListener("pointerdown", onDoc, true);
+              }
+            };
+            document.addEventListener("pointerdown", onDoc, true);
+          }
+        });
+        splitWrap.append(main, arrow);
+        wrap.appendChild(pop2);
+        groupEl.appendChild(splitWrap);
+        splits.push({ spec: entry, cards });
+        continue;
+      }
       const item = items[entry] ?? { title: entry };
       const btn = document.createElement("button");
       btn.type = "button";
@@ -461,7 +565,7 @@ function mountToolbar(host, editor, options = {}) {
     while (pop.firstChild) root.insertBefore(pop.firstChild, moreBtn);
     moreBtn.style.display = "none";
     closePop();
-    wrap.querySelectorAll(".bb-color-pop").forEach((p) => p.hidden = true);
+    wrap.querySelectorAll(".bb-color-pop,.bb-split-pop").forEach((p) => p.hidden = true);
     if (fits()) return;
     moreBtn.style.display = "";
     const groupEls = Array.from(root.children).filter(
@@ -491,6 +595,14 @@ function mountToolbar(host, editor, options = {}) {
     for (const { spec, el } of selects) el.value = spec.value(state);
     for (const { spec, bar } of colors)
       bar.style.background = spec.value(state) ?? "";
+    for (const { spec, cards } of splits) {
+      const selected = spec.value(state);
+      for (const card of cards)
+        card.classList.toggle(
+          "is-selected",
+          selected != null && card.dataset["value"] === selected
+        );
+    }
   };
   const off = editor.onChange((c) => refresh(c.state));
   try {
@@ -904,9 +1016,16 @@ function showContextMenu(entries, at) {
   }
   document.body.appendChild(el);
   const r = el.getBoundingClientRect();
-  el.style.left = `${Math.max(4, Math.min(at.x, window.innerWidth - r.width - 4))}px`;
-  el.style.top = `${Math.max(4, Math.min(at.y, window.innerHeight - r.height - 4))}px`;
-  const items = () => Array.from(el.querySelectorAll(".bb-ctx-item:not(:disabled)"));
+  const pad = 4;
+  const fitsX = (v) => v >= pad && v + r.width <= window.innerWidth - pad;
+  const fitsY = (v) => v >= pad && v + r.height <= window.innerHeight - pad;
+  const x = fitsX(at.x) ? at.x : fitsX(at.x - r.width) ? at.x - r.width : Math.max(pad, Math.min(at.x, window.innerWidth - r.width - pad));
+  const y = fitsY(at.y) ? at.y : fitsY(at.y - r.height) ? at.y - r.height : Math.max(pad, Math.min(at.y, window.innerHeight - r.height - pad));
+  el.style.left = `${x}px`;
+  el.style.top = `${y}px`;
+  const items = () => Array.from(
+    el.querySelectorAll(".bb-ctx-item:not(:disabled)")
+  );
   const onDown = (e) => {
     if (!el.contains(e.target)) closeCurrent();
   };
@@ -936,6 +1055,213 @@ function showContextMenu(entries, at) {
   return { close: closeCurrent };
 }
 
+// packages/ui/src/lib/link-panel.ts
+var STYLE6 = `
+.bb-linkpanel{position:fixed;z-index:1200;width:300px;padding:8px;background:var(--bb-ui-menu-bg,#fff);-webkit-backdrop-filter:var(--bb-ui-pop-filter,none);backdrop-filter:var(--bb-ui-pop-filter,none);color:var(--bb-ui-fg,#2c2c2a);border:1px solid var(--bb-ui-pop-border,var(--bb-ui-border,#e3e3e0));border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.16);font-family:var(--bb-ui-font,system-ui,-apple-system,sans-serif);box-sizing:border-box}
+.bb-linkpanel *{box-sizing:border-box}
+.bb-linkpanel-row{display:flex;align-items:center;gap:8px}
+.bb-linkpanel-form{display:flex;flex-direction:column;gap:8px}
+.bb-linkpanel-field{display:flex;align-items:center;gap:7px;border:1px solid var(--bb-ui-border,#e3e3e0);border-radius:7px;padding:0 9px;background:var(--bb-ui-bg,#fff)}
+.bb-linkpanel-field:focus-within{border-color:var(--bb-ui-accent,#d85a30)}
+.bb-linkpanel-field svg{flex:none;opacity:.55}
+.bb-linkpanel-input{flex:1;min-width:0;height:30px;border:0;background:transparent;color:inherit;font:inherit;font-size:13px;outline:none}
+.bb-linkpanel-href{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--bb-ui-accent,#d85a30)}
+.bb-linkpanel-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;border-radius:6px;background:transparent;color:inherit;cursor:pointer;flex:none}
+.bb-linkpanel-btn:hover{background:var(--bb-ui-hover,#f1efe8)}
+.bb-linkpanel-apply{font:inherit;font-size:13px;font-weight:600;color:var(--bb-ui-accent,#d85a30);background:transparent;border:0;border-radius:6px;padding:6px 8px;cursor:pointer;flex:none}
+.bb-linkpanel-apply:hover{background:var(--bb-ui-hover,#f1efe8)}
+.bb-linkpanel-apply:disabled{opacity:.4;cursor:default}
+`;
+var ICONS = {
+  link: '<svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.5 9.5 9.5 6.5"/><path d="M7.5 4.5 9 3a2.47 2.47 0 0 1 3.5 0L13 3.5a2.47 2.47 0 0 1 0 3.5l-1.5 1.5"/><path d="M8.5 11.5 7 13a2.47 2.47 0 0 1-3.5 0L3 12.5a2.47 2.47 0 0 1 0-3.5l1.5-1.5"/></svg>',
+  text: '<svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4V2.5h10V4M8 2.5v11M6 13.5h4"/></svg>',
+  copy: '<svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5.5" y="5.5" width="8" height="8" rx="1.5"/><path d="M10.5 5.5v-2a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2"/></svg>',
+  edit: '<svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9.5 3.5 3 3L6 13l-3.5.5L3 10z"/><path d="m11 2 .9-.9a1.55 1.55 0 0 1 2.2 0l.8.8a1.55 1.55 0 0 1 0 2.2L14 5"/></svg>',
+  unlink: '<svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7.5 4.5 9 3a2.47 2.47 0 0 1 3.5 0L13 3.5a2.47 2.47 0 0 1 0 3.5l-1.5 1.5"/><path d="M8.5 11.5 7 13a2.47 2.47 0 0 1-3.5 0L3 12.5a2.47 2.47 0 0 1 0-3.5l1.5-1.5"/><path d="m3 3 10 10"/></svg>'
+};
+var current2 = null;
+var currentKey = null;
+var currentHandle = null;
+var pendingClose = null;
+function cancelPendingClose() {
+  if (pendingClose !== null) {
+    clearTimeout(pendingClose);
+    pendingClose = null;
+  }
+}
+function closeCurrent2() {
+  cancelPendingClose();
+  if (current2) {
+    const dispose = current2;
+    current2 = null;
+    currentKey = null;
+    currentHandle = null;
+    dispose();
+  }
+}
+function place(el, anchor) {
+  const r = el.getBoundingClientRect();
+  const pad = 6;
+  const gap = 6;
+  const x = Math.max(
+    pad,
+    Math.min(anchor.x, window.innerWidth - r.width - pad)
+  );
+  const below = anchor.y + anchor.height + gap;
+  const above = anchor.y - gap - r.height;
+  const y = below + r.height <= window.innerHeight - pad || above < pad ? Math.min(below, window.innerHeight - r.height - pad) : above;
+  el.style.left = `${x}px`;
+  el.style.top = `${y}px`;
+}
+function showLinkPanel(opts) {
+  injectStyle("bb-ui-linkpanel-styles", STYLE6);
+  if (opts.key && current2 && currentKey === opts.key && currentHandle) {
+    cancelPendingClose();
+    return currentHandle;
+  }
+  closeCurrent2();
+  const el = document.createElement("div");
+  el.className = "bb-linkpanel";
+  el.setAttribute("role", "dialog");
+  el.setAttribute("aria-label", "Link");
+  const iconBtn = (svg, label, onClick) => {
+    const b = document.createElement("button");
+    b.type = "button";
+    b.className = "bb-linkpanel-btn";
+    b.title = label;
+    b.setAttribute("aria-label", label);
+    b.innerHTML = svg;
+    b.addEventListener("mousedown", (e) => e.preventDefault());
+    b.addEventListener("click", onClick);
+    return b;
+  };
+  const field = (icon, placeholder, value) => {
+    const wrap = document.createElement("div");
+    wrap.className = "bb-linkpanel-field";
+    wrap.innerHTML = icon;
+    const input = document.createElement("input");
+    input.className = "bb-linkpanel-input";
+    input.type = "text";
+    input.placeholder = placeholder;
+    input.value = value;
+    input.spellcheck = false;
+    input.autocomplete = "off";
+    wrap.appendChild(input);
+    return { wrap, input };
+  };
+  const renderView = (existing) => {
+    el.textContent = "";
+    const row = document.createElement("div");
+    row.className = "bb-linkpanel-row";
+    const href = document.createElement("span");
+    href.className = "bb-linkpanel-href";
+    href.textContent = existing.href;
+    href.title = existing.href;
+    row.appendChild(href);
+    row.appendChild(
+      iconBtn(ICONS.copy, "Copy link", () => {
+        void navigator.clipboard?.writeText(existing.href).catch(() => void 0);
+        closeCurrent2();
+      })
+    );
+    row.appendChild(
+      iconBtn(ICONS.edit, "Edit link", () => renderForm(existing))
+    );
+    row.appendChild(
+      iconBtn(ICONS.unlink, "Remove link", () => {
+        closeCurrent2();
+        opts.onUnlink?.();
+      })
+    );
+    el.appendChild(row);
+    place(el, opts.anchor);
+  };
+  const renderForm = (prefill) => {
+    el.textContent = "";
+    const form = document.createElement("div");
+    form.className = "bb-linkpanel-form";
+    const withText = !opts.hasSelection;
+    let textInput = null;
+    if (withText) {
+      const t = field(ICONS.text, "Text (optional)", prefill?.text ?? "");
+      textInput = t.input;
+      form.appendChild(t.wrap);
+    }
+    const u = field(ICONS.link, "Paste or type a link", prefill?.href ?? "");
+    const row = document.createElement("div");
+    row.className = "bb-linkpanel-row";
+    row.appendChild(u.wrap);
+    u.wrap.style.flex = "1";
+    const apply = document.createElement("button");
+    apply.type = "button";
+    apply.className = "bb-linkpanel-apply";
+    apply.textContent = "Apply";
+    apply.disabled = !u.input.value.trim();
+    u.input.addEventListener("input", () => {
+      apply.disabled = !u.input.value.trim();
+    });
+    const submit = () => {
+      const href = u.input.value.trim();
+      if (!href) return;
+      const text = textInput?.value ?? void 0;
+      closeCurrent2();
+      opts.onApply(href, text);
+    };
+    apply.addEventListener("click", submit);
+    for (const input of [textInput, u.input]) {
+      input?.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          submit();
+        }
+      });
+    }
+    row.appendChild(apply);
+    form.appendChild(row);
+    el.appendChild(form);
+    place(el, opts.anchor);
+    u.input.focus();
+    u.input.select();
+  };
+  document.body.appendChild(el);
+  if (opts.existing) renderView(opts.existing);
+  else renderForm(null);
+  const onDown = (e) => {
+    if (el.contains(e.target)) return;
+    if (opts.key) {
+      cancelPendingClose();
+      pendingClose = setTimeout(closeCurrent2, 80);
+    } else {
+      closeCurrent2();
+    }
+  };
+  const onKey = (e) => {
+    if (e.key === "Escape") closeCurrent2();
+  };
+  const onScroll = () => closeCurrent2();
+  setTimeout(() => {
+    document.addEventListener("pointerdown", onDown, true);
+    document.addEventListener("keydown", onKey, true);
+    window.addEventListener("scroll", onScroll, true);
+  }, 0);
+  const dispose = () => {
+    document.removeEventListener("pointerdown", onDown, true);
+    document.removeEventListener("keydown", onKey, true);
+    window.removeEventListener("scroll", onScroll, true);
+    el.remove();
+  };
+  current2 = dispose;
+  currentKey = opts.key ?? null;
+  const handle = {
+    close: () => {
+      if (current2 === dispose) closeCurrent2();
+    },
+    isOpen: () => current2 === dispose
+  };
+  currentHandle = handle;
+  return handle;
+}
+
 // packages/ui/src/lib/cell-properties.ts
 var FILL_PRESETS = ["#FCEBEB", "#FAEEDA", "#EAF3DE", "#E6F1FB", "#EEEDFE", "#FBEAF0", "#E1F5EE", "#F1EFE8", "#D3D1C7"];
 var PEN_COLORS = ["#000000", "#5F5E5A", "#B0B0B0", "#E24B4A", "#185FA5", "#1D9E75", "#BA7517"];
@@ -963,7 +1289,7 @@ var PRESETS = [
   { key: "insideH", label: "Inside horizontal", sides: [0, 0, 0, 0, 1, 0], inside: true },
   { key: "insideV", label: "Inside vertical", sides: [0, 0, 0, 0, 0, 1], inside: true }
 ];
-var STYLE6 = `
+var STYLE7 = `
 .bb-cp{display:flex;flex-direction:column;gap:16px;min-width:320px;color:var(--bb-ui-fg,#2c2c2a)}
 .bb-cp *{box-sizing:border-box}
 .bb-cp-label{font-size:12px;opacity:.7;margin-bottom:8px}
@@ -1004,7 +1330,7 @@ var section = (label) => {
   return sec;
 };
 function openCellProperties({ initial, singleCell, onApply }) {
-  injectStyle("bb-ui-cellprops-styles", STYLE6);
+  injectStyle("bb-ui-cellprops-styles", STYLE7);
   let background = initial.background;
   let vAlign = initial.vAlign;
   let penWidthPt = 1;
@@ -1177,7 +1503,7 @@ function openCellProperties({ initial, singleCell, onApply }) {
 }
 
 // packages/ui/src/lib/table-grid.ts
-var STYLE7 = `
+var STYLE8 = `
 .bb-grid{display:flex;flex-direction:column;gap:6px;user-select:none}
 .bb-grid-cells{display:grid;gap:2px}
 .bb-grid-cell{width:15px;height:15px;border:1px solid var(--bb-ui-border,#d8d6cf);border-radius:2px;background:var(--bb-ui-bg,#fff);cursor:pointer;padding:0}
@@ -1185,7 +1511,7 @@ var STYLE7 = `
 .bb-grid-label{font-size:12px;text-align:center;opacity:.7}
 `;
 function tableGridPicker(options) {
-  injectStyle("bb-ui-grid-styles", STYLE7);
+  injectStyle("bb-ui-grid-styles", STYLE8);
   const maxRows = options.maxRows ?? 8;
   const maxCols = options.maxCols ?? 10;
   const root = document.createElement("div");
@@ -1231,5 +1557,6 @@ function tableGridPicker(options) {
   openCellProperties,
   promptDialog,
   showContextMenu,
+  showLinkPanel,
   tableGridPicker
 });

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export * from './lib/toolbar.js';
 export * from './lib/menubar.js';
 export * from './lib/find.js';
 export * from './lib/context-menu.js';
+export * from './lib/link-panel.js';
 export * from './lib/cell-properties.js';
 export * from './lib/table-grid.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACrE,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACrE,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC"}

package/dist/index.js

@@ -252,6 +252,20 @@ var STYLE2 = `
 .bb-color-none{grid-column:1/-1;font:inherit;font-size:12px;padding:3px 0;border:1px solid var(--bb-ui-border,#e3e3e0);border-radius:5px;background:var(--bb-ui-bg,#fff);cursor:pointer}
 .bb-color-none:hover{background:var(--bb-ui-hover,#f1efe8)}
 .bb-i-bold{font-weight:700}.bb-i-italic{font-style:italic}.bb-i-underline{text-decoration:underline}.bb-i-strike{text-decoration:line-through}
+.bb-toolbar-split{display:flex;align-items:center;gap:0}
+.bb-toolbar-split .bb-toolbar-btn{min-width:26px;padding:0 5px}
+.bb-split-arrow{min-width:14px !important;width:15px;padding:0 !important}
+.bb-split-arrow svg{display:block}
+.bb-split-pop{position:absolute;z-index:1200;display:grid;grid-template-columns:repeat(3,auto);gap:8px;padding:10px;background:var(--bb-ui-menu-bg,#fff);-webkit-backdrop-filter:var(--bb-ui-pop-filter,none);backdrop-filter:var(--bb-ui-pop-filter,none);border:1px solid var(--bb-ui-pop-border,var(--bb-ui-border,#e3e3e0));border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.16)}
+.bb-split-pop[hidden]{display:none}
+.bb-split-card{display:flex;flex-direction:column;gap:6px;width:76px;padding:9px 8px;border:1px solid var(--bb-ui-border,#e3e3e0);border-radius:6px;background:transparent;cursor:pointer;font-family:inherit}
+.bb-split-card:hover{background:var(--bb-ui-hover,#f1efe8)}
+.bb-split-card.is-selected{background:var(--bb-ui-active-bg,#e6f1fb);border-color:var(--bb-ui-active-border,#b5d4f4)}
+.bb-split-row{display:flex;align-items:center;gap:4px}
+.bb-split-row[data-lvl="1"]{padding-left:9px}
+.bb-split-row[data-lvl="2"]{padding-left:18px}
+.bb-split-marker{flex:none;min-width:14px;font-size:9px;line-height:1.1;text-align:right;color:var(--bb-ui-fg,#2c2c2a);white-space:nowrap}
+.bb-split-bar{flex:1;height:3px;border-radius:2px;background:var(--bb-ui-border,#d9d9d4)}
 `;
 function defaultToolbarGroups(commands) {
   const names = [...commands].map((c) => c.name);
@@ -271,6 +285,7 @@ function mountToolbar(host, editor, options = {}) {
   const buttons = [];
   const selects = [];
   const colors = [];
+  const splits = [];
   let latest = null;
   for (const group of groups) {
     const entries = group.filter(
@@ -346,7 +361,7 @@ function mountToolbar(host, editor, options = {}) {
         btn2.addEventListener("mousedown", (e) => e.preventDefault());
         btn2.addEventListener("click", () => {
           const open = pop2.hidden;
-          wrap.querySelectorAll(".bb-color-pop").forEach((p) => p.hidden = true);
+          wrap.querySelectorAll(".bb-color-pop,.bb-split-pop").forEach((p) => p.hidden = true);
           pop2.hidden = !open;
           if (!pop2.hidden) {
             const wrapRect = wrap.getBoundingClientRect();
@@ -375,6 +390,94 @@ function mountToolbar(host, editor, options = {}) {
         colors.push({ spec: entry, bar });
         continue;
       }
+      if (typeof entry !== "string" && entry.kind === "split") {
+        const splitWrap = document.createElement("div");
+        splitWrap.className = "bb-toolbar-split";
+        const item2 = items[entry.name] ?? { title: entry.name };
+        const main = document.createElement("button");
+        main.type = "button";
+        main.className = "bb-toolbar-btn";
+        main.title = item2.title;
+        main.setAttribute("aria-label", item2.title);
+        if (item2.svg) main.innerHTML = item2.svg;
+        else main.textContent = item2.label ?? entry.name;
+        main.addEventListener("mousedown", (e) => e.preventDefault());
+        main.addEventListener("click", () => {
+          if (!latest) return;
+          editor.commands.get(entry.name)?.run(latest, (tr) => editor.dispatch(tr));
+          editor.focus();
+        });
+        buttons.push({ name: entry.name, el: main });
+        const arrow = document.createElement("button");
+        arrow.type = "button";
+        arrow.className = "bb-toolbar-btn bb-split-arrow";
+        arrow.title = `${item2.title} styles`;
+        arrow.setAttribute("aria-label", `${item2.title} styles`);
+        arrow.setAttribute("aria-haspopup", "true");
+        arrow.innerHTML = '<svg viewBox="0 0 8 8" width="8" height="8" fill="currentColor" aria-hidden="true"><path d="M1 2.5h6L4 6z"/></svg>';
+        const pop2 = document.createElement("div");
+        pop2.className = "bb-split-pop";
+        pop2.hidden = true;
+        const cards = [];
+        for (const opt of entry.options) {
+          const card = document.createElement("button");
+          card.type = "button";
+          card.className = "bb-split-card";
+          card.dataset["value"] = opt.value;
+          if (opt.title) card.title = opt.title;
+          opt.rows.forEach((marker, i) => {
+            const row = document.createElement("span");
+            row.className = "bb-split-row";
+            row.dataset["lvl"] = String(i);
+            const m = document.createElement("span");
+            m.className = "bb-split-marker";
+            m.textContent = marker;
+            const bar = document.createElement("span");
+            bar.className = "bb-split-bar";
+            row.append(m, bar);
+            card.appendChild(row);
+          });
+          card.addEventListener("mousedown", (e) => e.preventDefault());
+          card.addEventListener("click", () => {
+            entry.onSelect(opt.value);
+            pop2.hidden = true;
+            editor.focus();
+          });
+          pop2.appendChild(card);
+          cards.push(card);
+        }
+        arrow.addEventListener("mousedown", (e) => e.preventDefault());
+        arrow.addEventListener("click", () => {
+          const open = pop2.hidden;
+          wrap.querySelectorAll(".bb-split-pop,.bb-color-pop").forEach((p) => p.hidden = true);
+          pop2.hidden = !open;
+          if (!pop2.hidden) {
+            const wrapRect = wrap.getBoundingClientRect();
+            const btnRect = arrow.getBoundingClientRect();
+            pop2.style.top = `${btnRect.bottom - wrapRect.top + 4}px`;
+            const left = Math.max(
+              0,
+              Math.min(
+                btnRect.left - wrapRect.left,
+                wrap.clientWidth - pop2.offsetWidth - 4
+              )
+            );
+            pop2.style.left = `${left}px`;
+            const onDoc = (ev) => {
+              if (!splitWrap.contains(ev.target) && !pop2.contains(ev.target)) {
+                pop2.hidden = true;
+                document.removeEventListener("pointerdown", onDoc, true);
+              }
+            };
+            document.addEventListener("pointerdown", onDoc, true);
+          }
+        });
+        splitWrap.append(main, arrow);
+        wrap.appendChild(pop2);
+        groupEl.appendChild(splitWrap);
+        splits.push({ spec: entry, cards });
+        continue;
+      }
       const item = items[entry] ?? { title: entry };
       const btn = document.createElement("button");
       btn.type = "button";
@@ -426,7 +529,7 @@ function mountToolbar(host, editor, options = {}) {
     while (pop.firstChild) root.insertBefore(pop.firstChild, moreBtn);
     moreBtn.style.display = "none";
     closePop();
-    wrap.querySelectorAll(".bb-color-pop").forEach((p) => p.hidden = true);
+    wrap.querySelectorAll(".bb-color-pop,.bb-split-pop").forEach((p) => p.hidden = true);
     if (fits()) return;
     moreBtn.style.display = "";
     const groupEls = Array.from(root.children).filter(
@@ -456,6 +559,14 @@ function mountToolbar(host, editor, options = {}) {
     for (const { spec, el } of selects) el.value = spec.value(state);
     for (const { spec, bar } of colors)
       bar.style.background = spec.value(state) ?? "";
+    for (const { spec, cards } of splits) {
+      const selected = spec.value(state);
+      for (const card of cards)
+        card.classList.toggle(
+          "is-selected",
+          selected != null && card.dataset["value"] === selected
+        );
+    }
   };
   const off = editor.onChange((c) => refresh(c.state));
   try {
@@ -869,9 +980,16 @@ function showContextMenu(entries, at) {
   }
   document.body.appendChild(el);
   const r = el.getBoundingClientRect();
-  el.style.left = `${Math.max(4, Math.min(at.x, window.innerWidth - r.width - 4))}px`;
-  el.style.top = `${Math.max(4, Math.min(at.y, window.innerHeight - r.height - 4))}px`;
-  const items = () => Array.from(el.querySelectorAll(".bb-ctx-item:not(:disabled)"));
+  const pad = 4;
+  const fitsX = (v) => v >= pad && v + r.width <= window.innerWidth - pad;
+  const fitsY = (v) => v >= pad && v + r.height <= window.innerHeight - pad;
+  const x = fitsX(at.x) ? at.x : fitsX(at.x - r.width) ? at.x - r.width : Math.max(pad, Math.min(at.x, window.innerWidth - r.width - pad));
+  const y = fitsY(at.y) ? at.y : fitsY(at.y - r.height) ? at.y - r.height : Math.max(pad, Math.min(at.y, window.innerHeight - r.height - pad));
+  el.style.left = `${x}px`;
+  el.style.top = `${y}px`;
+  const items = () => Array.from(
+    el.querySelectorAll(".bb-ctx-item:not(:disabled)")
+  );
   const onDown = (e) => {
     if (!el.contains(e.target)) closeCurrent();
   };
@@ -901,6 +1019,213 @@ function showContextMenu(entries, at) {
   return { close: closeCurrent };
 }
 
+// packages/ui/src/lib/link-panel.ts
+var STYLE6 = `
+.bb-linkpanel{position:fixed;z-index:1200;width:300px;padding:8px;background:var(--bb-ui-menu-bg,#fff);-webkit-backdrop-filter:var(--bb-ui-pop-filter,none);backdrop-filter:var(--bb-ui-pop-filter,none);color:var(--bb-ui-fg,#2c2c2a);border:1px solid var(--bb-ui-pop-border,var(--bb-ui-border,#e3e3e0));border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.16);font-family:var(--bb-ui-font,system-ui,-apple-system,sans-serif);box-sizing:border-box}
+.bb-linkpanel *{box-sizing:border-box}
+.bb-linkpanel-row{display:flex;align-items:center;gap:8px}
+.bb-linkpanel-form{display:flex;flex-direction:column;gap:8px}
+.bb-linkpanel-field{display:flex;align-items:center;gap:7px;border:1px solid var(--bb-ui-border,#e3e3e0);border-radius:7px;padding:0 9px;background:var(--bb-ui-bg,#fff)}
+.bb-linkpanel-field:focus-within{border-color:var(--bb-ui-accent,#d85a30)}
+.bb-linkpanel-field svg{flex:none;opacity:.55}
+.bb-linkpanel-input{flex:1;min-width:0;height:30px;border:0;background:transparent;color:inherit;font:inherit;font-size:13px;outline:none}
+.bb-linkpanel-href{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--bb-ui-accent,#d85a30)}
+.bb-linkpanel-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;border-radius:6px;background:transparent;color:inherit;cursor:pointer;flex:none}
+.bb-linkpanel-btn:hover{background:var(--bb-ui-hover,#f1efe8)}
+.bb-linkpanel-apply{font:inherit;font-size:13px;font-weight:600;color:var(--bb-ui-accent,#d85a30);background:transparent;border:0;border-radius:6px;padding:6px 8px;cursor:pointer;flex:none}
+.bb-linkpanel-apply:hover{background:var(--bb-ui-hover,#f1efe8)}
+.bb-linkpanel-apply:disabled{opacity:.4;cursor:default}
+`;
+var ICONS = {
+  link: '<svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.5 9.5 9.5 6.5"/><path d="M7.5 4.5 9 3a2.47 2.47 0 0 1 3.5 0L13 3.5a2.47 2.47 0 0 1 0 3.5l-1.5 1.5"/><path d="M8.5 11.5 7 13a2.47 2.47 0 0 1-3.5 0L3 12.5a2.47 2.47 0 0 1 0-3.5l1.5-1.5"/></svg>',
+  text: '<svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4V2.5h10V4M8 2.5v11M6 13.5h4"/></svg>',
+  copy: '<svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5.5" y="5.5" width="8" height="8" rx="1.5"/><path d="M10.5 5.5v-2a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2"/></svg>',
+  edit: '<svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9.5 3.5 3 3L6 13l-3.5.5L3 10z"/><path d="m11 2 .9-.9a1.55 1.55 0 0 1 2.2 0l.8.8a1.55 1.55 0 0 1 0 2.2L14 5"/></svg>',
+  unlink: '<svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7.5 4.5 9 3a2.47 2.47 0 0 1 3.5 0L13 3.5a2.47 2.47 0 0 1 0 3.5l-1.5 1.5"/><path d="M8.5 11.5 7 13a2.47 2.47 0 0 1-3.5 0L3 12.5a2.47 2.47 0 0 1 0-3.5l1.5-1.5"/><path d="m3 3 10 10"/></svg>'
+};
+var current2 = null;
+var currentKey = null;
+var currentHandle = null;
+var pendingClose = null;
+function cancelPendingClose() {
+  if (pendingClose !== null) {
+    clearTimeout(pendingClose);
+    pendingClose = null;
+  }
+}
+function closeCurrent2() {
+  cancelPendingClose();
+  if (current2) {
+    const dispose = current2;
+    current2 = null;
+    currentKey = null;
+    currentHandle = null;
+    dispose();
+  }
+}
+function place(el, anchor) {
+  const r = el.getBoundingClientRect();
+  const pad = 6;
+  const gap = 6;
+  const x = Math.max(
+    pad,
+    Math.min(anchor.x, window.innerWidth - r.width - pad)
+  );
+  const below = anchor.y + anchor.height + gap;
+  const above = anchor.y - gap - r.height;
+  const y = below + r.height <= window.innerHeight - pad || above < pad ? Math.min(below, window.innerHeight - r.height - pad) : above;
+  el.style.left = `${x}px`;
+  el.style.top = `${y}px`;
+}
+function showLinkPanel(opts) {
+  injectStyle("bb-ui-linkpanel-styles", STYLE6);
+  if (opts.key && current2 && currentKey === opts.key && currentHandle) {
+    cancelPendingClose();
+    return currentHandle;
+  }
+  closeCurrent2();
+  const el = document.createElement("div");
+  el.className = "bb-linkpanel";
+  el.setAttribute("role", "dialog");
+  el.setAttribute("aria-label", "Link");
+  const iconBtn = (svg, label, onClick) => {
+    const b = document.createElement("button");
+    b.type = "button";
+    b.className = "bb-linkpanel-btn";
+    b.title = label;
+    b.setAttribute("aria-label", label);
+    b.innerHTML = svg;
+    b.addEventListener("mousedown", (e) => e.preventDefault());
+    b.addEventListener("click", onClick);
+    return b;
+  };
+  const field = (icon, placeholder, value) => {
+    const wrap = document.createElement("div");
+    wrap.className = "bb-linkpanel-field";
+    wrap.innerHTML = icon;
+    const input = document.createElement("input");
+    input.className = "bb-linkpanel-input";
+    input.type = "text";
+    input.placeholder = placeholder;
+    input.value = value;
+    input.spellcheck = false;
+    input.autocomplete = "off";
+    wrap.appendChild(input);
+    return { wrap, input };
+  };
+  const renderView = (existing) => {
+    el.textContent = "";
+    const row = document.createElement("div");
+    row.className = "bb-linkpanel-row";
+    const href = document.createElement("span");
+    href.className = "bb-linkpanel-href";
+    href.textContent = existing.href;
+    href.title = existing.href;
+    row.appendChild(href);
+    row.appendChild(
+      iconBtn(ICONS.copy, "Copy link", () => {
+        void navigator.clipboard?.writeText(existing.href).catch(() => void 0);
+        closeCurrent2();
+      })
+    );
+    row.appendChild(
+      iconBtn(ICONS.edit, "Edit link", () => renderForm(existing))
+    );
+    row.appendChild(
+      iconBtn(ICONS.unlink, "Remove link", () => {
+        closeCurrent2();
+        opts.onUnlink?.();
+      })
+    );
+    el.appendChild(row);
+    place(el, opts.anchor);
+  };
+  const renderForm = (prefill) => {
+    el.textContent = "";
+    const form = document.createElement("div");
+    form.className = "bb-linkpanel-form";
+    const withText = !opts.hasSelection;
+    let textInput = null;
+    if (withText) {
+      const t = field(ICONS.text, "Text (optional)", prefill?.text ?? "");
+      textInput = t.input;
+      form.appendChild(t.wrap);
+    }
+    const u = field(ICONS.link, "Paste or type a link", prefill?.href ?? "");
+    const row = document.createElement("div");
+    row.className = "bb-linkpanel-row";
+    row.appendChild(u.wrap);
+    u.wrap.style.flex = "1";
+    const apply = document.createElement("button");
+    apply.type = "button";
+    apply.className = "bb-linkpanel-apply";
+    apply.textContent = "Apply";
+    apply.disabled = !u.input.value.trim();
+    u.input.addEventListener("input", () => {
+      apply.disabled = !u.input.value.trim();
+    });
+    const submit = () => {
+      const href = u.input.value.trim();
+      if (!href) return;
+      const text = textInput?.value ?? void 0;
+      closeCurrent2();
+      opts.onApply(href, text);
+    };
+    apply.addEventListener("click", submit);
+    for (const input of [textInput, u.input]) {
+      input?.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          submit();
+        }
+      });
+    }
+    row.appendChild(apply);
+    form.appendChild(row);
+    el.appendChild(form);
+    place(el, opts.anchor);
+    u.input.focus();
+    u.input.select();
+  };
+  document.body.appendChild(el);
+  if (opts.existing) renderView(opts.existing);
+  else renderForm(null);
+  const onDown = (e) => {
+    if (el.contains(e.target)) return;
+    if (opts.key) {
+      cancelPendingClose();
+      pendingClose = setTimeout(closeCurrent2, 80);
+    } else {
+      closeCurrent2();
+    }
+  };
+  const onKey = (e) => {
+    if (e.key === "Escape") closeCurrent2();
+  };
+  const onScroll = () => closeCurrent2();
+  setTimeout(() => {
+    document.addEventListener("pointerdown", onDown, true);
+    document.addEventListener("keydown", onKey, true);
+    window.addEventListener("scroll", onScroll, true);
+  }, 0);
+  const dispose = () => {
+    document.removeEventListener("pointerdown", onDown, true);
+    document.removeEventListener("keydown", onKey, true);
+    window.removeEventListener("scroll", onScroll, true);
+    el.remove();
+  };
+  current2 = dispose;
+  currentKey = opts.key ?? null;
+  const handle = {
+    close: () => {
+      if (current2 === dispose) closeCurrent2();
+    },
+    isOpen: () => current2 === dispose
+  };
+  currentHandle = handle;
+  return handle;
+}
+
 // packages/ui/src/lib/cell-properties.ts
 var FILL_PRESETS = ["#FCEBEB", "#FAEEDA", "#EAF3DE", "#E6F1FB", "#EEEDFE", "#FBEAF0", "#E1F5EE", "#F1EFE8", "#D3D1C7"];
 var PEN_COLORS = ["#000000", "#5F5E5A", "#B0B0B0", "#E24B4A", "#185FA5", "#1D9E75", "#BA7517"];
@@ -928,7 +1253,7 @@ var PRESETS = [
   { key: "insideH", label: "Inside horizontal", sides: [0, 0, 0, 0, 1, 0], inside: true },
   { key: "insideV", label: "Inside vertical", sides: [0, 0, 0, 0, 0, 1], inside: true }
 ];
-var STYLE6 = `
+var STYLE7 = `
 .bb-cp{display:flex;flex-direction:column;gap:16px;min-width:320px;color:var(--bb-ui-fg,#2c2c2a)}
 .bb-cp *{box-sizing:border-box}
 .bb-cp-label{font-size:12px;opacity:.7;margin-bottom:8px}
@@ -969,7 +1294,7 @@ var section = (label) => {
   return sec;
 };
 function openCellProperties({ initial, singleCell, onApply }) {
-  injectStyle("bb-ui-cellprops-styles", STYLE6);
+  injectStyle("bb-ui-cellprops-styles", STYLE7);
   let background = initial.background;
   let vAlign = initial.vAlign;
   let penWidthPt = 1;
@@ -1142,7 +1467,7 @@ function openCellProperties({ initial, singleCell, onApply }) {
 }
 
 // packages/ui/src/lib/table-grid.ts
-var STYLE7 = `
+var STYLE8 = `
 .bb-grid{display:flex;flex-direction:column;gap:6px;user-select:none}
 .bb-grid-cells{display:grid;gap:2px}
 .bb-grid-cell{width:15px;height:15px;border:1px solid var(--bb-ui-border,#d8d6cf);border-radius:2px;background:var(--bb-ui-bg,#fff);cursor:pointer;padding:0}
@@ -1150,7 +1475,7 @@ var STYLE7 = `
 .bb-grid-label{font-size:12px;text-align:center;opacity:.7}
 `;
 function tableGridPicker(options) {
-  injectStyle("bb-ui-grid-styles", STYLE7);
+  injectStyle("bb-ui-grid-styles", STYLE8);
   const maxRows = options.maxRows ?? 8;
   const maxCols = options.maxCols ?? 10;
   const root = document.createElement("div");
@@ -1195,5 +1520,6 @@ export {
   openCellProperties,
   promptDialog,
   showContextMenu,
+  showLinkPanel,
   tableGridPicker
 };

package/dist/lib/context-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context-menu.d.ts","sourceRoot":"","sources":["../../src/lib/context-menu.ts"],"names":[],"mappings":"AAEA,mCAAmC;AACnC,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,IAAI,CAAC;IAChB,kCAAkC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AACD,MAAM,MAAM,gBAAgB,GAAG,eAAe,GAAG,WAAW,CAAC;AAE7D,MAAM,WAAW,iBAAiB;IAChC,KAAK,IAAI,IAAI,CAAC;CACf;AAuBD;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,gBAAgB,EAAE,EAAE,EAAE,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,iBAAiB,CA2E5G"}
+{"version":3,"file":"context-menu.d.ts","sourceRoot":"","sources":["../../src/lib/context-menu.ts"],"names":[],"mappings":"AAEA,mCAAmC;AACnC,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,IAAI,CAAC;IAChB,kCAAkC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AACD,MAAM,MAAM,gBAAgB,GAAG,eAAe,GAAG,WAAW,CAAC;AAE7D,MAAM,WAAW,iBAAiB;IAChC,KAAK,IAAI,IAAI,CAAC;CACf;AAuBD;;;;;GAKG;AACH,wBAAgB,eAAe,CAC7B,OAAO,EAAE,gBAAgB,EAAE,EAC3B,EAAE,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAC3B,iBAAiB,CAmGnB"}

package/dist/lib/link-panel.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Floating link panel, anchored at the caret / selection (Google Docs-style).
+ *
+ * Three modes:
+ * - **view** — the caret sits inside an existing link: the href plus three
+ *   icon actions (copy / edit / remove). Edit switches to the form.
+ * - **form with selection** — one URL field; Apply wraps the selection.
+ * - **form at a bare caret** — an optional "Text" field above the URL; left
+ *   empty, the URL itself becomes the inserted text.
+ *
+ * The panel is one-shot DOM (no framework), closes on Escape / outside click /
+ * scroll, and positions with connected pairs: below the anchor first, flipped
+ * above when the viewport runs out.
+ */
+export interface LinkPanelAnchor {
+    /** Caret top-left in viewport CSS px + the caret's rendered height. */
+    x: number;
+    y: number;
+    height: number;
+}
+export interface LinkPanelOptions {
+    anchor: LinkPanelAnchor;
+    /** Existing link under the caret → open in view mode (prefills the form). */
+    existing?: {
+        href: string;
+        text: string;
+    } | null;
+    /** A text range is selected → the Text field is hidden (the selection is
+     *  the text). */
+    hasSelection?: boolean;
+    /** Identity for keep-alive: with a key, an outside click defers the close
+     *  briefly, and re-showing the SAME key within that window keeps the
+     *  existing panel untouched — so a caret moving within one link never
+     *  re-creates it. Hosts pass e.g. the link's doc range. */
+    key?: string;
+    /** Apply: `text` is present only when the Text field was shown. */
+    onApply(href: string, text?: string): void;
+    onUnlink?(): void;
+}
+export interface LinkPanelHandle {
+    close(): void;
+    /** Whether this panel is still on screen (hosts skip redundant reopens —
+     *  e.g. the caret moving WITHIN the same link should not repaint). */
+    isOpen(): boolean;
+}
+export declare function showLinkPanel(opts: LinkPanelOptions): LinkPanelHandle;
+//# sourceMappingURL=link-panel.d.ts.map

package/dist/lib/link-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-panel.d.ts","sourceRoot":"","sources":["../../src/lib/link-panel.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AAEH,MAAM,WAAW,eAAe;IAC9B,uEAAuE;IACvE,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,eAAe,CAAC;IACxB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACjD;qBACiB;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;+DAG2D;IAC3D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mEAAmE;IACnE,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3C,QAAQ,CAAC,IAAI,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,IAAI,IAAI,CAAC;IACd;0EACsE;IACtE,MAAM,IAAI,OAAO,CAAC;CACnB;AAwED,wBAAgB,aAAa,CAAC,IAAI,EAAE,gBAAgB,GAAG,eAAe,CAgLrE"}

package/dist/lib/toolbar.d.ts

@@ -46,8 +46,28 @@ export interface ToolbarColor {
     /** Called with the picked colour (null = cleared). */
     onSelect: (color: string | null) => void;
 }
-/** A toolbar group entry: a command name (button) or a control (select/colour). */
-export type ToolbarEntry = string | ToolbarSelect | ToolbarColor;
+/** One style card in a split button's dropdown: three preview markers, one per
+ *  nesting level (e.g. ['1.', 'a.', 'i.']), rendered beside placeholder bars. */
+export interface ToolbarSplitOption {
+    value: string;
+    rows: [string, string, string];
+    title?: string;
+}
+/** A split button: the main button runs the command `name` (toggle, with its
+ *  active/enabled tracking and icon), and a narrow ▾ opens a dropdown of style
+ *  cards. The host owns the parameterized command each card runs. */
+export interface ToolbarSplit {
+    kind: 'split';
+    /** Command for the main button — also the icon/tooltip lookup key. */
+    name: string;
+    options: ToolbarSplitOption[];
+    /** Currently applied option value (highlights its card), or null. */
+    value: (state: EditorStateOf) => string | null;
+    /** Called when the user picks a card. */
+    onSelect: (value: string) => void;
+}
+/** A toolbar group entry: a command name (button) or a control (select/colour/split). */
+export type ToolbarEntry = string | ToolbarSelect | ToolbarColor | ToolbarSplit;
 export interface ToolbarOptions {
     /** Groups rendered as separated clusters — command names (buttons) and/or
      *  controls (selects). Defaults to marks then alignments, from the registry. */

package/dist/lib/toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../src/lib/toolbar.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EACL,KAAK,YAAY,EACjB,KAAK,aAAa,EAEnB,MAAM,eAAe,CAAC;AAEvB;wCACwC;AACxC,MAAM,WAAW,WAAW;IAC1B,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;wEAEwE;AACxE,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,QAAQ,CAAC;IACf,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC5C,qEAAqE;IACrE,KAAK,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,MAAM,CAAC;IACxC,0CAA0C;IAC1C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;8EAC8E;AAC9E,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,iFAAiF;IACjF,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6DAA6D;IAC7D,KAAK,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,MAAM,GAAG,IAAI,CAAC;IAC/C,sDAAsD;IACtD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC1C;AAED,mFAAmF;AACnF,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,aAAa,GAAG,YAAY,CAAC;AAEjE,MAAM,WAAW,cAAc;IAC7B;oFACgF;IAChF,MAAM,CAAC,EAAE,YAAY,EAAE,EAAE,CAAC;IAC1B,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;CACrC;AAED,+CAA+C;AAC/C,MAAM,WAAW,aAAa;IAC5B,OAAO,IAAI,IAAI,CAAC;CACjB;AA2GD;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,UAAU,CAAC,OAAO,CAAC,GAC5B,MAAM,EAAE,EAAE,CAKZ;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,WAAW,EACjB,MAAM,EAAE,YAAY,EACpB,OAAO,GAAE,cAAmB,GAC3B,aAAa,CA4Pf"}
+{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../src/lib/toolbar.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EACL,KAAK,YAAY,EACjB,KAAK,aAAa,EAEnB,MAAM,eAAe,CAAC;AAEvB;wCACwC;AACxC,MAAM,WAAW,WAAW;IAC1B,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;wEAEwE;AACxE,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,QAAQ,CAAC;IACf,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC5C,qEAAqE;IACrE,KAAK,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,MAAM,CAAC;IACxC,0CAA0C;IAC1C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;8EAC8E;AAC9E,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,iFAAiF;IACjF,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6DAA6D;IAC7D,KAAK,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,MAAM,GAAG,IAAI,CAAC;IAC/C,sDAAsD;IACtD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC1C;AAED;iFACiF;AACjF,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;qEAEqE;AACrE,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,sEAAsE;IACtE,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,qEAAqE;IACrE,KAAK,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,MAAM,GAAG,IAAI,CAAC;IAC/C,yCAAyC;IACzC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,yFAAyF;AACzF,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,aAAa,GAAG,YAAY,GAAG,YAAY,CAAC;AAEhF,MAAM,WAAW,cAAc;IAC7B;oFACgF;IAChF,MAAM,CAAC,EAAE,YAAY,EAAE,EAAE,CAAC;IAC1B,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;CACrC;AAED,+CAA+C;AAC/C,MAAM,WAAW,aAAa;IAC5B,OAAO,IAAI,IAAI,CAAC;CACjB;AAyHD;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,UAAU,CAAC,OAAO,CAAC,GAC5B,MAAM,EAAE,EAAE,CAKZ;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,WAAW,EACjB,MAAM,EAAE,YAAY,EACpB,OAAO,GAAE,cAAmB,GAC3B,aAAa,CAwWf"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shadow-garden/bapbong-ui",
-  "version": "0.1.2",
+  "version": "0.3.0",
   "description": "bapbong — framework-agnostic editor UI (toolbar/menubar) that mounts into a host element and binds to editor.commands",
   "license": "MIT",
   "repository": {
@@ -56,6 +56,6 @@
     }
   },
   "dependencies": {
-    "@shadow-garden/bapbong-contracts": "^0.1.1"
+    "@shadow-garden/bapbong-contracts": "^0.3.0"
   }
 }