@pinkpixel/marzipan 1.1.0 → 1.1.2

package/dist/plugins/accentSwatchPlugin.js

@@ -1,142 +1,223 @@
-const x = "marzipan.accent.colors";
-function d(t) {
-  if (!t) return null;
-  let n = t.trim().toLowerCase();
-  return n.startsWith("#") || (n = "#" + n), /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/.test(n) ? (n.length === 4 && (n = "#" + [...n.slice(1)].map((p) => p + p).join("")), n) : null;
+const k = "marzipan.accent.colors";
+function f(e) {
+  if (!e) return null;
+  let o = e.trim().toLowerCase();
+  return o.startsWith("#") || (o = "#" + o), /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/.test(o) ? (o.length === 4 && (o = "#" + [...o.slice(1)].map((m) => m + m).join("")), o) : null;
 }
-function A() {
+function j() {
   try {
-    return JSON.parse(localStorage.getItem(x) || "[]");
+    return JSON.parse(localStorage.getItem(k) || "[]");
   } catch {
     return [];
   }
 }
-function g(t) {
+function x(e) {
   try {
-    localStorage.setItem(x, JSON.stringify(t));
+    localStorage.setItem(k, JSON.stringify(e));
   } catch {
   }
 }
-async function P() {
-  const t = window;
-  if (!t.EyeDropper) return null;
+async function A() {
+  const e = window;
+  if (!e.EyeDropper) return null;
   try {
-    const p = await new t.EyeDropper().open();
-    return d(p.sRGBHex);
+    const m = await new e.EyeDropper().open();
+    return f(m.sRGBHex);
   } catch {
     return null;
   }
 }
-function z(t, n) {
-  typeof t.setAccent == "function" && t.setAccent(n), document.documentElement.style.setProperty("--mz-accent", n), t.container.style.setProperty("--mz-accent", n), t.container.dispatchEvent(new CustomEvent("marzipan:accent", { detail: { color: n } }));
+function h(e, o) {
+  typeof e.setAccent == "function" && e.setAccent(o), document.documentElement.style.setProperty("--mz-accent", o), e.container.style.setProperty("--mz-accent", o), e.container.dispatchEvent(new CustomEvent("marzipan:accent", { detail: { color: o } }));
 }
-function R(t) {
-  const n = Math.max(1, t?.max ?? 12), p = t?.title ?? "Accent color", E = t?.label ?? "⭘";
-  return (s) => {
-    const k = s.container.querySelector(".marzipan-toolbar") ?? s.container, i = document.createElement("button");
-    i.type = "button", i.className = "marzipan-toolbar-button mz-btn-accent", i.title = p, i.textContent = E, i.setAttribute("aria-label", p);
-    let c = null, r = A();
-    !r.length && t?.defaults?.length && (r = t.defaults.map(d).filter((e) => !!e).slice(0, n), g(r));
-    function h() {
-      const y = getComputedStyle(s.container).getPropertyValue("--mz-accent").trim() || getComputedStyle(document.documentElement).getPropertyValue("--mz-accent").trim();
-      return d(y) || "#8b5cf6";
+function L(e) {
+  const o = Math.max(1, e?.max ?? 12), m = e?.title ?? "Accent color", E = e?.label ?? "⭘";
+  return (p) => {
+    const C = p.container.querySelector(".marzipan-toolbar") ?? p.container, s = document.createElement("button");
+    s.type = "button", s.className = "marzipan-toolbar-button mz-btn-accent", s.title = m, s.textContent = E, s.setAttribute("aria-label", m);
+    let t = null, r = j();
+    !r.length && e?.defaults?.length && (r = e.defaults.map(f).filter((n) => !!n).slice(0, o), x(r));
+    function w() {
+      const u = getComputedStyle(p.container).getPropertyValue("--mz-accent").trim() || getComputedStyle(document.documentElement).getPropertyValue("--mz-accent").trim();
+      return f(u) || "#8b5cf6";
     }
-    function w(e) {
-      r = [e, ...r.filter((y) => y !== e)].slice(0, n), g(r);
+    function y(n) {
+      r = [n, ...r.filter((u) => u !== n)].slice(0, o), x(r);
     }
-    function m() {
-      c && (c.remove(), c = null, document.removeEventListener("click", v, !0), window.removeEventListener("resize", m), window.removeEventListener("scroll", m, !0));
+    function b() {
+      t && (t.remove(), t = null, document.removeEventListener("click", S, !0), window.removeEventListener("resize", b), window.removeEventListener("scroll", b, !0));
     }
-    function v(e) {
-      c && (e.target instanceof Node && (c.contains(e.target) || i.contains(e.target)) || m());
+    function S(n) {
+      t && (n.target instanceof Node && (t.contains(n.target) || s.contains(n.target)) || b());
     }
-    function u() {
-      if (!c) return;
-      const e = c.querySelector(".mz-accent-grid");
-      e.innerHTML = "";
-      const y = h();
-      r.forEach((a, l) => {
-        const o = document.createElement("button");
-        o.type = "button", o.className = "mz-swatch", o.style.setProperty("--sw", a), o.title = a, a === y && o.classList.add("sel"), o.onclick = () => {
-          z(s, a), w(a), u();
-        }, o.oncontextmenu = (b) => {
-          b.preventDefault(), r.splice(l, 1), g(r), u();
-        }, e.appendChild(o);
+    function d() {
+      if (!t) return;
+      const n = t.querySelector(".mz-accent-grid");
+      n.innerHTML = "";
+      const u = w();
+      r.forEach((i, l) => {
+        const c = document.createElement("button");
+        c.type = "button", c.className = "mz-swatch", Object.assign(c.style, {
+          width: "28px",
+          height: "28px",
+          borderRadius: "50%",
+          border: "1px solid #333",
+          background: i,
+          cursor: "pointer",
+          boxShadow: "inset 0 0 0 2px rgba(0,0,0,.2)",
+          padding: "0",
+          margin: "0",
+          boxSizing: "border-box"
+        }), i === u && (c.style.outline = "2px solid var(--mz-accent, #8b5cf6)"), c.title = i, c.onclick = () => {
+          h(p, i), y(i), d();
+        }, c.oncontextmenu = (g) => {
+          g.preventDefault(), r.splice(l, 1), x(r), d();
+        }, n.appendChild(c);
       });
-      const f = document.createElement("button");
-      f.type = "button", f.className = "mz-swatch mz-swatch-add", f.textContent = "+", f.title = "Add color (click to pick, ⇧click to type, ⌥click eyedropper)", f.onclick = async (a) => {
+      const a = document.createElement("button");
+      a.type = "button", a.className = "mz-swatch mz-swatch-add", a.textContent = "+", a.title = "Add color (click to pick, ⇧click to type, ⌥click eyedropper)", Object.assign(a.style, {
+        width: "28px",
+        height: "28px",
+        borderRadius: "50%",
+        background: "linear-gradient(135deg, #222, #2b2f36)",
+        color: "#e7e7e7",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontWeight: "700",
+        fontSize: "16px",
+        cursor: "pointer",
+        border: "1px solid #333",
+        padding: "0",
+        margin: "0",
+        boxSizing: "border-box"
+      }), a.onclick = async (i) => {
         let l = null;
-        if (a.shiftKey)
-          l = d(prompt("Enter hex color (#RRGGBB or RRGGBB):") || "");
-        else if (a.altKey)
-          l = await P(), l || (l = d(prompt("Enter hex color:") || ""));
+        if (i.shiftKey)
+          l = f(prompt("Enter hex color (#RRGGBB or RRGGBB):") || "");
+        else if (i.altKey)
+          l = await A(), l || (l = f(prompt("Enter hex color:") || ""));
         else {
-          const o = document.createElement("input");
-          o.type = "color", o.value = h(), o.onchange = () => {
-            const b = d(o.value);
-            b && (z(s, b), w(b), u());
-          }, o.click();
+          const c = document.createElement("input");
+          c.type = "color", c.value = w(), c.onchange = () => {
+            const g = f(c.value);
+            g && (h(p, g), y(g), d());
+          }, c.click();
           return;
         }
-        l && (z(s, l), w(l), u());
-      }, e.appendChild(f);
-      const C = c.querySelector(".mz-accent-usecur");
-      C.onclick = () => {
-        const a = h();
-        w(a), u();
+        l && (h(p, l), y(l), d());
+      }, n.appendChild(a);
+      const z = t.querySelector(".mz-accent-usecur");
+      z.onclick = () => {
+        const i = w();
+        y(i), d();
       };
-      const L = c.querySelector(".mz-accent-reset");
-      L.onclick = () => {
-        if (!t?.defaults?.length) {
-          r = [], g(r), u();
+      const v = t.querySelector(".mz-accent-reset");
+      v.onclick = () => {
+        if (!e?.defaults?.length) {
+          r = [], x(r), d();
           return;
         }
-        r = t.defaults.map(d).filter(Boolean), g(r), u();
+        r = e.defaults.map(f).filter(Boolean), x(r), d();
       };
     }
-    function S() {
-      if (c) {
-        m();
+    function R() {
+      if (t) {
+        b();
         return;
       }
-      c = document.createElement("div"), c.className = "mz-pop mz-accent-pop", c.innerHTML = `
+      t = document.createElement("div"), t.className = "mz-pop mz-accent-pop", t.innerHTML = `
         <div class="mz-accent-grid"></div>
         <div class="mz-accent-row">
           <button type="button" class="mz-accent-usecur">Add current</button>
           <button type="button" class="mz-accent-reset">Reset</button>
         </div>
         <div class="mz-accent-hint">Tip: Right-click a swatch to remove. Alt-click “+” for eyedropper.</div>
-      `, document.body.appendChild(c);
-      const e = i.getBoundingClientRect();
-      c.style.position = "absolute", c.style.left = `${Math.round(window.scrollX + e.left)}px`, c.style.top = `${Math.round(window.scrollY + e.bottom + 6)}px`, u(), setTimeout(() => {
-        document.addEventListener("click", v, !0), window.addEventListener("resize", m), window.addEventListener("scroll", m, !0);
+      `, document.body.appendChild(t);
+      const n = s.getBoundingClientRect();
+      Object.assign(t.style, {
+        position: "absolute",
+        left: `${Math.round(window.scrollX + n.left)}px`,
+        top: `${Math.round(window.scrollY + n.bottom + 6)}px`,
+        width: "280px",
+        maxWidth: "calc(100vw - 24px)",
+        background: "#1a1e24",
+        border: "1px solid #333",
+        borderRadius: "10px",
+        boxShadow: "0 4px 16px rgba(0,0,0,.35)",
+        zIndex: "10000",
+        padding: "8px",
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        fontSize: "14px",
+        color: "#e7e7e7",
+        boxSizing: "border-box"
+      });
+      const u = t.querySelector(".mz-accent-grid");
+      u && Object.assign(u.style, {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, 28px)",
+        gap: "8px",
+        padding: "6px"
+      });
+      const a = t.querySelector(".mz-accent-row");
+      a && Object.assign(a.style, { display: "flex", gap: "8px", padding: "6px" }), t.querySelectorAll(".mz-accent-row button").forEach((v) => {
+        Object.assign(v.style, {
+          flex: "1",
+          padding: "6px 8px",
+          borderRadius: "8px",
+          border: "1px solid #2b2f36",
+          background: "#1a1e24",
+          color: "#e7e7e7",
+          cursor: "pointer",
+          fontSize: "13px",
+          fontFamily: "inherit"
+        });
+      });
+      const z = t.querySelector(".mz-accent-hint");
+      z && Object.assign(z.style, { fontSize: "12px", opacity: "0.7", padding: "0 6px 6px" }), d(), setTimeout(() => {
+        document.addEventListener("click", S, !0), window.addEventListener("resize", b), window.addEventListener("scroll", b, !0);
       }, 0);
     }
-    if (i.onclick = S, k.appendChild(i), !getComputedStyle(s.container).getPropertyValue("--mz-accent").trim()) {
-      const e = r[0] || t?.defaults?.[0] || "#8b5cf6";
-      z(s, e);
+    if (s.onclick = R, C.appendChild(s), !getComputedStyle(p.container).getPropertyValue("--mz-accent").trim()) {
+      const n = r[0] || e?.defaults?.[0] || "#8b5cf6";
+      h(p, n);
     }
   };
 }
 const B = `
-.mz-accent-pop { width: 280px; max-width: calc(100vw - 24px); }
-.mz-accent-grid { display: grid; grid-template-columns: repeat(8, 28px); gap: 8px; padding: 6px; }
+.mz-accent-pop {
+  width: 280px; max-width: calc(100vw - 24px);
+  background: var(--mz-pop-bg, #1a1e24);
+  border: 1px solid var(--mz-pop-bd, #333);
+  border-radius: 10px;
+  box-shadow: 0 4px 16px rgba(0,0,0,.35);
+  z-index: 10000;
+  padding: 8px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-size: 14px;
+  color: var(--mz-pop-fg, #e7e7e7);
+}
+.mz-accent-grid { display: grid; grid-template-columns: repeat(auto-fill, 28px); gap: 8px; padding: 6px; }
 .mz-swatch {
   width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--mz-pop-bd, #333);
   background: var(--sw, #777); cursor: pointer; box-shadow: inset 0 0 0 2px rgba(0,0,0,.2);
+  transition: transform .1s;
 }
+.mz-swatch:hover { transform: scale(1.15); }
 .mz-swatch.sel { outline: 2px solid var(--mz-accent, #8b5cf6); outline-offset: 2px; }
 .mz-swatch-add { background: linear-gradient(135deg, #222, #2b2f36); color: #e7e7e7;
-  display:flex; align-items:center; justify-content:center; font-weight:700; }
+  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; }
 .mz-accent-row { display:flex; gap:8px; padding: 6px; }
 .mz-accent-row button {
   flex:1; padding:6px 8px; border-radius:8px; border:1px solid var(--mz-bd, #2b2f36);
   background: var(--mz-btn-bg, #1a1e24); color: var(--mz-btn-fg, #e7e7e7); cursor:pointer;
+  font-size: 13px; transition: background .15s;
 }
+.mz-accent-row button:hover { background: var(--mz-btn-hover, #2b2f36); }
 .mz-accent-hint { font-size: 12px; opacity: .7; padding: 0 6px 6px; }
 `;
 export {
-  R as accentSwatchPlugin,
+  L as accentSwatchPlugin,
   B as accentSwatchStyles
 };
 //# sourceMappingURL=accentSwatchPlugin.js.map

package/dist/plugins/accentSwatchPlugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"accentSwatchPlugin.js","sources":["../../src/plugins/accentSwatchPlugin.ts"],"sourcesContent":["// plugins/accentSwatchPlugin.ts\n// Tiny recent-colors palette with Eyedropper support (if available).\n// Persists to localStorage. No deps.\n\ntype MzEditor = {\n  container: HTMLElement;\n  textarea: HTMLTextAreaElement;\n  updatePreview: () => void;\n  // Optional if your core exposes it\n  setAccent?: (hex: string) => void;\n};\n\nconst LS_KEY = 'marzipan.accent.colors';\n\nfunction normHex(hex: string): string | null {\n  if (!hex) return null;\n  let h = hex.trim().toLowerCase();\n  if (!h.startsWith('#')) h = '#' + h;\n  if (!/^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/.test(h)) return null;\n  // Expand #abc -> #aabbcc\n  if (h.length === 4) h = '#' + [...h.slice(1)].map(c => c + c).join('');\n  return h;\n}\n\nfunction load(): string[] {\n  try { return JSON.parse(localStorage.getItem(LS_KEY) || '[]'); } catch { return []; }\n}\nfunction save(arr: string[]) {\n  try { localStorage.setItem(LS_KEY, JSON.stringify(arr)); } catch { /* localStorage not available */ }\n}\n\nasync function pickWithEyedropper(): Promise<string | null> {\n  const anyWin = window as any;\n  if (!anyWin.EyeDropper) return null;\n  try {\n    const eye = new anyWin.EyeDropper();\n    const res = await eye.open();\n    return normHex(res.sRGBHex);\n  } catch { return null; }\n}\n\nfunction setAccent(editor: MzEditor, hex: string) {\n  // Prefer core hook if you have one\n  if (typeof editor.setAccent === 'function') editor.setAccent(hex);\n  // Always set CSS var as a fallback\n  document.documentElement.style.setProperty('--mz-accent', hex);\n  editor.container.style.setProperty('--mz-accent', hex);\n  // Broadcast (optional) for any listeners\n  editor.container.dispatchEvent(new CustomEvent('marzipan:accent', { detail: { color: hex } }));\n}\n\nexport function accentSwatchPlugin(opts?: {\n  max?: number;              // max swatches to keep (default 12)\n  defaults?: string[];       // seed colors if none saved\n  title?: string;            // toolbar tooltip\n  label?: string;            // toolbar button label/icon\n}) {\n  const max = Math.max(1, opts?.max ?? 12);\n  const title = opts?.title ?? 'Accent color';\n  const label = opts?.label ?? '⭘';\n\n  return (editor: MzEditor) => {\n    const bar = editor.container.querySelector('.marzipan-toolbar') as HTMLElement ?? editor.container;\n\n    // Button that opens the palette popover\n    const btn = document.createElement('button');\n    btn.type = 'button';\n    btn.className = 'marzipan-toolbar-button mz-btn-accent';\n    btn.title = title;\n    btn.textContent = label;\n    btn.setAttribute('aria-label', title);\n\n    // Popover elements\n    let pop: HTMLElement | null = null;\n    let colors: string[] = load();\n    if (!colors.length && opts?.defaults?.length) {\n      colors = opts.defaults\n        .map(normHex)\n        .filter((x): x is string => !!x)\n        .slice(0, max);\n      save(colors);\n    }\n\n    function currentAccent(): string {\n      const css = getComputedStyle(editor.container);\n      const v = css.getPropertyValue('--mz-accent').trim() ||\n                getComputedStyle(document.documentElement).getPropertyValue('--mz-accent').trim();\n      return normHex(v) || '#8b5cf6'; // fallback purple\n    }\n\n    function ensureFront(hex: string) {\n      colors = [hex, ...colors.filter(c => c !== hex)].slice(0, max);\n      save(colors);\n    }\n\n    function closePop() {\n      if (!pop) return;\n      pop.remove(); pop = null;\n      document.removeEventListener('click', outsideClose, true);\n      window.removeEventListener('resize', closePop);\n      window.removeEventListener('scroll', closePop, true);\n    }\n\n    function outsideClose(e: MouseEvent) {\n      if (!pop) return;\n      if (e.target instanceof Node && (pop.contains(e.target) || btn.contains(e.target))) return;\n      closePop();\n    }\n\n    function render() {\n      if (!pop) return;\n      const grid = pop.querySelector('.mz-accent-grid') as HTMLElement;\n      grid.innerHTML = '';\n\n      const cur = currentAccent();\n\n      // Existing swatches\n      colors.forEach((hex, i) => {\n        const sw = document.createElement('button');\n        sw.type = 'button';\n        sw.className = 'mz-swatch';\n        sw.style.setProperty('--sw', hex);\n        sw.title = hex;\n        if (hex === cur) sw.classList.add('sel');\n        sw.onclick = () => {\n          setAccent(editor, hex);\n          ensureFront(hex);\n          render();\n        };\n        sw.oncontextmenu = (e) => {\n          e.preventDefault();\n          colors.splice(i, 1);\n          save(colors);\n          render();\n        };\n        grid.appendChild(sw);\n      });\n\n      // “+” swatch to add new color\n      const plus = document.createElement('button');\n      plus.type = 'button';\n      plus.className = 'mz-swatch mz-swatch-add';\n      plus.textContent = '+';\n      plus.title = 'Add color (click to pick, ⇧click to type, ⌥click eyedropper)';\n      plus.onclick = async (e) => {\n        let hex: string | null = null;\n\n        if (e.shiftKey) {\n          hex = normHex(prompt('Enter hex color (#RRGGBB or RRGGBB):') || '');\n        } else if (e.altKey) {\n          hex = await pickWithEyedropper();\n          if (!hex) hex = normHex(prompt('Enter hex color:') || '');\n        } else {\n          // Native color input for broad support\n          const input = document.createElement('input');\n          input.type = 'color';\n          input.value = currentAccent();\n          input.onchange = () => {\n            const v = normHex(input.value);\n            if (!v) return;\n            setAccent(editor, v);\n            ensureFront(v);\n            render();\n          };\n          input.click();\n          return;\n        }\n\n        if (hex) {\n          setAccent(editor, hex);\n          ensureFront(hex);\n          render();\n        }\n      };\n      grid.appendChild(plus);\n\n      // Controls: “Use current”, “Reset”\n      const useCur = pop.querySelector('.mz-accent-usecur') as HTMLButtonElement;\n      useCur.onclick = () => {\n        const hex = currentAccent();\n        ensureFront(hex);\n        render();\n      };\n\n      const reset = pop.querySelector('.mz-accent-reset') as HTMLButtonElement;\n      reset.onclick = () => {\n        if (!opts?.defaults?.length) { colors = []; save(colors); render(); return; }\n        colors = opts.defaults.map(normHex).filter(Boolean) as string[];\n        save(colors);\n        render();\n      };\n    }\n\n    function openPop() {\n      if (pop) { closePop(); return; }\n\n      pop = document.createElement('div');\n      pop.className = 'mz-pop mz-accent-pop';\n      pop.innerHTML = `\n        <div class=\"mz-accent-grid\"></div>\n        <div class=\"mz-accent-row\">\n          <button type=\"button\" class=\"mz-accent-usecur\">Add current</button>\n          <button type=\"button\" class=\"mz-accent-reset\">Reset</button>\n        </div>\n        <div class=\"mz-accent-hint\">Tip: Right-click a swatch to remove. Alt-click “+” for eyedropper.</div>\n      `;\n      document.body.appendChild(pop);\n\n      const r = btn.getBoundingClientRect();\n      pop.style.position = 'absolute';\n      pop.style.left = `${Math.round(window.scrollX + r.left)}px`;\n      pop.style.top  = `${Math.round(window.scrollY + r.bottom + 6)}px`;\n\n      render();\n\n      setTimeout(() => {\n        document.addEventListener('click', outsideClose, true);\n        window.addEventListener('resize', closePop);\n        window.addEventListener('scroll', closePop, true);\n      }, 0);\n    }\n\n    btn.onclick = openPop;\n    bar.appendChild(btn);\n\n    // Initialize CSS var if missing\n    if (!getComputedStyle(editor.container).getPropertyValue('--mz-accent').trim()) {\n      const seed = colors[0] || opts?.defaults?.[0] || '#8b5cf6';\n      setAccent(editor, seed);\n    }\n  };\n}\n\n// Minimal CSS you can inject once in your app\nexport const accentSwatchStyles = `\n.mz-accent-pop { width: 280px; max-width: calc(100vw - 24px); }\n.mz-accent-grid { display: grid; grid-template-columns: repeat(8, 28px); gap: 8px; padding: 6px; }\n.mz-swatch {\n  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--mz-pop-bd, #333);\n  background: var(--sw, #777); cursor: pointer; box-shadow: inset 0 0 0 2px rgba(0,0,0,.2);\n}\n.mz-swatch.sel { outline: 2px solid var(--mz-accent, #8b5cf6); outline-offset: 2px; }\n.mz-swatch-add { background: linear-gradient(135deg, #222, #2b2f36); color: #e7e7e7;\n  display:flex; align-items:center; justify-content:center; font-weight:700; }\n.mz-accent-row { display:flex; gap:8px; padding: 6px; }\n.mz-accent-row button {\n  flex:1; padding:6px 8px; border-radius:8px; border:1px solid var(--mz-bd, #2b2f36);\n  background: var(--mz-btn-bg, #1a1e24); color: var(--mz-btn-fg, #e7e7e7); cursor:pointer;\n}\n.mz-accent-hint { font-size: 12px; opacity: .7; padding: 0 6px 6px; }\n`;"],"names":["LS_KEY","normHex","hex","h","c","load","save","arr","pickWithEyedropper","anyWin","res","setAccent","editor","accentSwatchPlugin","opts","max","title","label","bar","btn","pop","colors","x","currentAccent","v","ensureFront","closePop","outsideClose","render","grid","cur","i","sw","e","plus","input","useCur","reset","openPop","r","seed","accentSwatchStyles"],"mappings":"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"}
+{"version":3,"file":"accentSwatchPlugin.js","sources":["../../src/plugins/accentSwatchPlugin.ts"],"sourcesContent":["// plugins/accentSwatchPlugin.ts\n// Tiny recent-colors palette with Eyedropper support (if available).\n// Persists to localStorage. No deps.\n\ntype MzEditor = {\n  container: HTMLElement;\n  textarea: HTMLTextAreaElement;\n  updatePreview: () => void;\n  // Optional if your core exposes it\n  setAccent?: (hex: string) => void;\n};\n\nconst LS_KEY = 'marzipan.accent.colors';\n\nfunction normHex(hex: string): string | null {\n  if (!hex) return null;\n  let h = hex.trim().toLowerCase();\n  if (!h.startsWith('#')) h = '#' + h;\n  if (!/^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/.test(h)) return null;\n  // Expand #abc -> #aabbcc\n  if (h.length === 4) h = '#' + [...h.slice(1)].map(c => c + c).join('');\n  return h;\n}\n\nfunction load(): string[] {\n  try { return JSON.parse(localStorage.getItem(LS_KEY) || '[]'); } catch { return []; }\n}\nfunction save(arr: string[]) {\n  try { localStorage.setItem(LS_KEY, JSON.stringify(arr)); } catch { /* localStorage not available */ }\n}\n\nasync function pickWithEyedropper(): Promise<string | null> {\n  const anyWin = window as any;\n  if (!anyWin.EyeDropper) return null;\n  try {\n    const eye = new anyWin.EyeDropper();\n    const res = await eye.open();\n    return normHex(res.sRGBHex);\n  } catch { return null; }\n}\n\nfunction setAccent(editor: MzEditor, hex: string) {\n  // Prefer core hook if you have one\n  if (typeof editor.setAccent === 'function') editor.setAccent(hex);\n  // Always set CSS var as a fallback\n  document.documentElement.style.setProperty('--mz-accent', hex);\n  editor.container.style.setProperty('--mz-accent', hex);\n  // Broadcast (optional) for any listeners\n  editor.container.dispatchEvent(new CustomEvent('marzipan:accent', { detail: { color: hex } }));\n}\n\nexport function accentSwatchPlugin(opts?: {\n  max?: number;              // max swatches to keep (default 12)\n  defaults?: string[];       // seed colors if none saved\n  title?: string;            // toolbar tooltip\n  label?: string;            // toolbar button label/icon\n}) {\n  const max = Math.max(1, opts?.max ?? 12);\n  const title = opts?.title ?? 'Accent color';\n  const label = opts?.label ?? '⭘';\n\n  return (editor: MzEditor) => {\n    const bar = editor.container.querySelector('.marzipan-toolbar') as HTMLElement ?? editor.container;\n\n    // Button that opens the palette popover\n    const btn = document.createElement('button');\n    btn.type = 'button';\n    btn.className = 'marzipan-toolbar-button mz-btn-accent';\n    btn.title = title;\n    btn.textContent = label;\n    btn.setAttribute('aria-label', title);\n\n    // Popover elements\n    let pop: HTMLElement | null = null;\n    let colors: string[] = load();\n    if (!colors.length && opts?.defaults?.length) {\n      colors = opts.defaults\n        .map(normHex)\n        .filter((x): x is string => !!x)\n        .slice(0, max);\n      save(colors);\n    }\n\n    function currentAccent(): string {\n      const css = getComputedStyle(editor.container);\n      const v = css.getPropertyValue('--mz-accent').trim() ||\n                getComputedStyle(document.documentElement).getPropertyValue('--mz-accent').trim();\n      return normHex(v) || '#8b5cf6'; // fallback purple\n    }\n\n    function ensureFront(hex: string) {\n      colors = [hex, ...colors.filter(c => c !== hex)].slice(0, max);\n      save(colors);\n    }\n\n    function closePop() {\n      if (!pop) return;\n      pop.remove(); pop = null;\n      document.removeEventListener('click', outsideClose, true);\n      window.removeEventListener('resize', closePop);\n      window.removeEventListener('scroll', closePop, true);\n    }\n\n    function outsideClose(e: MouseEvent) {\n      if (!pop) return;\n      if (e.target instanceof Node && (pop.contains(e.target) || btn.contains(e.target))) return;\n      closePop();\n    }\n\n    function render() {\n      if (!pop) return;\n      const grid = pop.querySelector('.mz-accent-grid') as HTMLElement;\n      grid.innerHTML = '';\n\n      const cur = currentAccent();\n\n      // Existing swatches\n      colors.forEach((hex, i) => {\n        const sw = document.createElement('button');\n        sw.type = 'button';\n        sw.className = 'mz-swatch';\n        Object.assign(sw.style, {\n          width: '28px', height: '28px', borderRadius: '50%',\n          border: '1px solid #333', background: hex, cursor: 'pointer',\n          boxShadow: 'inset 0 0 0 2px rgba(0,0,0,.2)',\n          padding: '0', margin: '0', boxSizing: 'border-box',\n        });\n        if (hex === cur) sw.style.outline = '2px solid var(--mz-accent, #8b5cf6)';\n        sw.title = hex;\n        sw.onclick = () => {\n          setAccent(editor, hex);\n          ensureFront(hex);\n          render();\n        };\n        sw.oncontextmenu = (e) => {\n          e.preventDefault();\n          colors.splice(i, 1);\n          save(colors);\n          render();\n        };\n        grid.appendChild(sw);\n      });\n\n      // “+” swatch to add new color\n      const plus = document.createElement('button');\n      plus.type = 'button';\n      plus.className = 'mz-swatch mz-swatch-add';\n      plus.textContent = '+';\n      plus.title = 'Add color (click to pick, ⇧click to type, ⌥click eyedropper)';\n      Object.assign(plus.style, {\n        width: '28px', height: '28px', borderRadius: '50%',\n        background: 'linear-gradient(135deg, #222, #2b2f36)', color: '#e7e7e7',\n        display: 'flex', alignItems: 'center', justifyContent: 'center',\n        fontWeight: '700', fontSize: '16px', cursor: 'pointer',\n        border: '1px solid #333', padding: '0', margin: '0', boxSizing: 'border-box',\n      });\n      plus.onclick = async (e) => {\n        let hex: string | null = null;\n\n        if (e.shiftKey) {\n          hex = normHex(prompt('Enter hex color (#RRGGBB or RRGGBB):') || '');\n        } else if (e.altKey) {\n          hex = await pickWithEyedropper();\n          if (!hex) hex = normHex(prompt('Enter hex color:') || '');\n        } else {\n          // Native color input for broad support\n          const input = document.createElement('input');\n          input.type = 'color';\n          input.value = currentAccent();\n          input.onchange = () => {\n            const v = normHex(input.value);\n            if (!v) return;\n            setAccent(editor, v);\n            ensureFront(v);\n            render();\n          };\n          input.click();\n          return;\n        }\n\n        if (hex) {\n          setAccent(editor, hex);\n          ensureFront(hex);\n          render();\n        }\n      };\n      grid.appendChild(plus);\n\n      // Controls: “Use current”, “Reset”\n      const useCur = pop.querySelector('.mz-accent-usecur') as HTMLButtonElement;\n      useCur.onclick = () => {\n        const hex = currentAccent();\n        ensureFront(hex);\n        render();\n      };\n\n      const reset = pop.querySelector('.mz-accent-reset') as HTMLButtonElement;\n      reset.onclick = () => {\n        if (!opts?.defaults?.length) { colors = []; save(colors); render(); return; }\n        colors = opts.defaults.map(normHex).filter(Boolean) as string[];\n        save(colors);\n        render();\n      };\n    }\n\n    function openPop() {\n      if (pop) { closePop(); return; }\n\n      pop = document.createElement('div');\n      pop.className = 'mz-pop mz-accent-pop';\n      pop.innerHTML = `\n        <div class=\"mz-accent-grid\"></div>\n        <div class=\"mz-accent-row\">\n          <button type=\"button\" class=\"mz-accent-usecur\">Add current</button>\n          <button type=\"button\" class=\"mz-accent-reset\">Reset</button>\n        </div>\n        <div class=\"mz-accent-hint\">Tip: Right-click a swatch to remove. Alt-click “+” for eyedropper.</div>\n      `;\n      document.body.appendChild(pop);\n\n      // Apply critical styles inline to avoid CSS framework resets (e.g. Tailwind)\n      const r = btn.getBoundingClientRect();\n      Object.assign(pop.style, {\n        position: 'absolute',\n        left: `${Math.round(window.scrollX + r.left)}px`,\n        top: `${Math.round(window.scrollY + r.bottom + 6)}px`,\n        width: '280px',\n        maxWidth: 'calc(100vw - 24px)',\n        background: '#1a1e24',\n        border: '1px solid #333',\n        borderRadius: '10px',\n        boxShadow: '0 4px 16px rgba(0,0,0,.35)',\n        zIndex: '10000',\n        padding: '8px',\n        fontFamily: '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif',\n        fontSize: '14px',\n        color: '#e7e7e7',\n        boxSizing: 'border-box',\n      });\n\n      // Style inner elements inline to survive CSS resets\n      const grid = pop.querySelector('.mz-accent-grid') as HTMLElement;\n      if (grid) Object.assign(grid.style, {\n        display: 'grid',\n        gridTemplateColumns: 'repeat(auto-fill, 28px)',\n        gap: '8px',\n        padding: '6px',\n      });\n      const row = pop.querySelector('.mz-accent-row') as HTMLElement;\n      if (row) Object.assign(row.style, { display: 'flex', gap: '8px', padding: '6px' });\n      pop.querySelectorAll('.mz-accent-row button').forEach(b => {\n        Object.assign((b as HTMLElement).style, {\n          flex: '1',\n          padding: '6px 8px',\n          borderRadius: '8px',\n          border: '1px solid #2b2f36',\n          background: '#1a1e24',\n          color: '#e7e7e7',\n          cursor: 'pointer',\n          fontSize: '13px',\n          fontFamily: 'inherit',\n        });\n      });\n      const hint = pop.querySelector('.mz-accent-hint') as HTMLElement;\n      if (hint) Object.assign(hint.style, { fontSize: '12px', opacity: '0.7', padding: '0 6px 6px' });\n\n      render();\n\n      setTimeout(() => {\n        document.addEventListener('click', outsideClose, true);\n        window.addEventListener('resize', closePop);\n        window.addEventListener('scroll', closePop, true);\n      }, 0);\n    }\n\n    btn.onclick = openPop;\n    bar.appendChild(btn);\n\n    // Initialize CSS var if missing\n    if (!getComputedStyle(editor.container).getPropertyValue('--mz-accent').trim()) {\n      const seed = colors[0] || opts?.defaults?.[0] || '#8b5cf6';\n      setAccent(editor, seed);\n    }\n  };\n}\n\n// Minimal CSS you can inject once in your app\nexport const accentSwatchStyles = `\n.mz-accent-pop {\n  width: 280px; max-width: calc(100vw - 24px);\n  background: var(--mz-pop-bg, #1a1e24);\n  border: 1px solid var(--mz-pop-bd, #333);\n  border-radius: 10px;\n  box-shadow: 0 4px 16px rgba(0,0,0,.35);\n  z-index: 10000;\n  padding: 8px;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n  font-size: 14px;\n  color: var(--mz-pop-fg, #e7e7e7);\n}\n.mz-accent-grid { display: grid; grid-template-columns: repeat(auto-fill, 28px); gap: 8px; padding: 6px; }\n.mz-swatch {\n  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--mz-pop-bd, #333);\n  background: var(--sw, #777); cursor: pointer; box-shadow: inset 0 0 0 2px rgba(0,0,0,.2);\n  transition: transform .1s;\n}\n.mz-swatch:hover { transform: scale(1.15); }\n.mz-swatch.sel { outline: 2px solid var(--mz-accent, #8b5cf6); outline-offset: 2px; }\n.mz-swatch-add { background: linear-gradient(135deg, #222, #2b2f36); color: #e7e7e7;\n  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; }\n.mz-accent-row { display:flex; gap:8px; padding: 6px; }\n.mz-accent-row button {\n  flex:1; padding:6px 8px; border-radius:8px; border:1px solid var(--mz-bd, #2b2f36);\n  background: var(--mz-btn-bg, #1a1e24); color: var(--mz-btn-fg, #e7e7e7); cursor:pointer;\n  font-size: 13px; transition: background .15s;\n}\n.mz-accent-row button:hover { background: var(--mz-btn-hover, #2b2f36); }\n.mz-accent-hint { font-size: 12px; opacity: .7; padding: 0 6px 6px; }\n`;"],"names":["LS_KEY","normHex","hex","h","c","load","save","arr","pickWithEyedropper","anyWin","res","setAccent","editor","accentSwatchPlugin","opts","max","title","label","bar","btn","pop","colors","x","currentAccent","v","ensureFront","closePop","outsideClose","e","render","grid","cur","i","sw","plus","input","useCur","reset","openPop","r","row","b","hint","seed","accentSwatchStyles"],"mappings":"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"}

package/dist/plugins/block-handles.d.ts

@@ -36,11 +36,13 @@ export declare class BlockHandlesPlugin {
     private config;
     private blocks;
     private selectedBlockId;
+    private activeBlockId;
     private handleContainer;
     private _boundMouseMove;
     private _boundMouseLeave;
     private _boundClick;
     private _boundKeyDown;
+    private _boundCursorUpdate;
     constructor(editor: HTMLTextAreaElement, preview: HTMLElement, config?: BlockHandlesConfig);
     /**
      * Initialize the plugin
@@ -91,7 +93,8 @@ export declare class BlockHandlesPlugin {
      */
     private handleMouseMove;
     /**
-     * Handle mouse leave event
+     * Handle mouse leave event.
+     * Checks relatedTarget so handles don't disappear when mouse moves to a handle.
      */
     private handleMouseLeave;
     /**
@@ -105,12 +108,17 @@ export declare class BlockHandlesPlugin {
      * Handle keyboard shortcuts
      */
     private handleKeyDown;
+    /**
+     * Update the active block handle based on the cursor position in the textarea.
+     * Shows the handle for the block containing the current editing line (Notion-like behavior).
+     */
+    private updateActiveBlock;
     /**
      * Show a specific handle
      */
     private showHandle;
     /**
-     * Hide all handles except selected
+     * Hide all handles except selected and active cursor block
      */
     private hideAllHandles;
     /**

package/dist/plugins/block-handles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"block-handles.d.ts","sourceRoot":"","sources":["../../src/plugins/block-handles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,WAAW,CAAC;IACrB,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;CACnC;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;CACH;AAED,qBAAa,kBAAkB;IAC7B,OAAO,CAAC,MAAM,CAAsB;IACpC,OAAO,CAAC,OAAO,CAAc;IAC7B,OAAO,CAAC,MAAM,CAA+B;IAC7C,OAAO,CAAC,MAAM,CAA2B;IACzC,OAAO,CAAC,eAAe,CAAgB;IACvC,OAAO,CAAC,eAAe,CAAqB;IAG5C,OAAO,CAAC,eAAe,CAA0B;IACjD,OAAO,CAAC,gBAAgB,CAAa;IACrC,OAAO,CAAC,WAAW,CAA0B;IAC7C,OAAO,CAAC,aAAa,CAA6B;gBAEtC,MAAM,EAAE,mBAAmB,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,GAAE,kBAAuB;IA2B9F;;OAEG;IACH,OAAO,CAAC,UAAU;IAalB;;;;OAIG;IACH,OAAO,CAAC,qBAAqB;IAoB7B;;;;OAIG;IACH,OAAO,CAAC,mBAAmB;IAe3B;;OAEG;IACI,UAAU,IAAI,IAAI;IAkCzB;;OAEG;IACH,OAAO,CAAC,YAAY;IA6CpB;;OAEG;IACH,OAAO,CAAC,aAAa;IAerB;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IAc5B;;OAEG;IACI,wBAAwB,IAAI,IAAI;IAMvC;;;;OAIG;IACH,OAAO,CAAC,gBAAgB;IAYxB;;;OAGG;IACH,OAAO,CAAC,eAAe;IAwBvB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAKxB;;;;;OAKG;IACH,OAAO,CAAC,WAAW;IAuBnB;;OAEG;IACH,OAAO,CAAC,aAAa;IAqBrB;;OAEG;IACH,OAAO,CAAC,UAAU;IAQlB;;OAEG;IACH,OAAO,CAAC,cAAc;IAStB;;OAEG;IACH,OAAO,CAAC,cAAc;IAQtB;;OAEG;IACH,OAAO,CAAC,cAAc;IAQtB;;OAEG;IACH,OAAO,CAAC,WAAW;IAsBnB;;OAEG;IACH,OAAO,CAAC,aAAa;IAcrB;;OAEG;YACW,SAAS;IAevB;;OAEG;IACH,OAAO,CAAC,WAAW;IAqBnB;;OAEG;IACH,OAAO,CAAC,eAAe;IASvB;;OAEG;IACH,OAAO,CAAC,eAAe;IAuEvB;;OAEG;IACH,OAAO,CAAC,SAAS;IA2BjB;;OAEG;IACI,MAAM,IAAI,IAAI;IAMrB;;OAEG;IACI,OAAO,IAAI,IAAI;IAgBtB;;OAEG;IACI,OAAO,IAAI,IAAI;IAItB;;OAEG;IACI,gBAAgB,IAAI,WAAW,GAAG,IAAI;IAI7C;;OAEG;IACI,YAAY,IAAI,WAAW,EAAE;IAIpC;;OAEG;IACI,OAAO,IAAI,IAAI;CAGvB"}
+{"version":3,"file":"block-handles.d.ts","sourceRoot":"","sources":["../../src/plugins/block-handles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,WAAW,CAAC;IACrB,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;CACnC;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;CACH;AAED,qBAAa,kBAAkB;IAC7B,OAAO,CAAC,MAAM,CAAsB;IACpC,OAAO,CAAC,OAAO,CAAc;IAC7B,OAAO,CAAC,MAAM,CAA+B;IAC7C,OAAO,CAAC,MAAM,CAA2B;IACzC,OAAO,CAAC,eAAe,CAAgB;IACvC,OAAO,CAAC,aAAa,CAAgB;IACrC,OAAO,CAAC,eAAe,CAAqB;IAG5C,OAAO,CAAC,eAAe,CAA0B;IACjD,OAAO,CAAC,gBAAgB,CAA0B;IAClD,OAAO,CAAC,WAAW,CAA0B;IAC7C,OAAO,CAAC,aAAa,CAA6B;IAClD,OAAO,CAAC,kBAAkB,CAAa;gBAE3B,MAAM,EAAE,mBAAmB,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,GAAE,kBAAuB;IA6B9F;;OAEG;IACH,OAAO,CAAC,UAAU;IAalB;;;;OAIG;IACH,OAAO,CAAC,qBAAqB;IAoB7B;;;;OAIG;IACH,OAAO,CAAC,mBAAmB;IAoB3B;;OAEG;IACI,UAAU,IAAI,IAAI;IAsCzB;;OAEG;IACH,OAAO,CAAC,YAAY;IAwDpB;;OAEG;IACH,OAAO,CAAC,aAAa;IAerB;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IAc5B;;OAEG;IACI,wBAAwB,IAAI,IAAI;IAMvC;;;;OAIG;IACH,OAAO,CAAC,gBAAgB;IAYxB;;;OAGG;IACH,OAAO,CAAC,eAAe;IAwBvB;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAUxB;;;;;OAKG;IACH,OAAO,CAAC,WAAW;IAuBnB;;OAEG;IACH,OAAO,CAAC,aAAa;IAqBrB;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAiCzB;;OAEG;IACH,OAAO,CAAC,UAAU;IAQlB;;OAEG;IACH,OAAO,CAAC,cAAc;IAStB;;OAEG;IACH,OAAO,CAAC,cAAc;IAQtB;;OAEG;IACH,OAAO,CAAC,cAAc;IAQtB;;OAEG;IACH,OAAO,CAAC,WAAW;IAsBnB;;OAEG;IACH,OAAO,CAAC,aAAa;IAcrB;;OAEG;YACW,SAAS;IAevB;;OAEG;IACH,OAAO,CAAC,WAAW;IAqBnB;;OAEG;IACH,OAAO,CAAC,eAAe;IASvB;;OAEG;IACH,OAAO,CAAC,eAAe;IAuEvB;;OAEG;IACH,OAAO,CAAC,SAAS;IA2BjB;;OAEG;IACI,MAAM,IAAI,IAAI;IAMrB;;OAEG;IACI,OAAO,IAAI,IAAI;IAqBtB;;OAEG;IACI,OAAO,IAAI,IAAI;IAItB;;OAEG;IACI,gBAAgB,IAAI,WAAW,GAAG,IAAI;IAI7C;;OAEG;IACI,YAAY,IAAI,WAAW,EAAE;IAIpC;;OAEG;IACI,OAAO,IAAI,IAAI;CAGvB"}