@shadow-garden/bapbong-ui 0.6.0 → 0.7.0

package/dist/index.cjs

@@ -1103,6 +1103,8 @@ var STYLE6 = `
 .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-icon{display:inline-flex;flex:none;opacity:.55}
+.bb-linkpanel-stale{opacity:.6;font-style:italic;color:inherit}
 .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}
@@ -1114,7 +1116,9 @@ var ICONS = {
   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>'
+  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>',
+  bookmark: '<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="M4 2.5h8v11l-4-3-4 3z"/></svg>',
+  goTo: '<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 8h9"/><path d="m8.5 4.5 4 3.5-4 3.5"/></svg>'
 };
 var current2 = null;
 var currentKey = null;
@@ -1190,26 +1194,50 @@ function showLinkPanel(opts) {
     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?.();
-      })
-    );
+    const internal = opts.internal;
+    if (internal) {
+      const icon = document.createElement("span");
+      icon.className = "bb-linkpanel-icon";
+      icon.innerHTML = ICONS.bookmark;
+      row.appendChild(icon);
+      const label = document.createElement("span");
+      label.className = "bb-linkpanel-href";
+      label.textContent = internal.label ?? "V\u1ECB tr\xED kh\xF4ng c\xF2n trong t\xE0i li\u1EC7u";
+      label.title = internal.label ?? existing.href;
+      if (!internal.label) label.classList.add("bb-linkpanel-stale");
+      row.appendChild(label);
+      if (internal.label) {
+        row.appendChild(
+          iconBtn(ICONS.goTo, "\u0110i t\u1EDBi v\u1ECB tr\xED n\xE0y", () => {
+            closeCurrent2();
+            internal.onGo();
+          })
+        );
+      }
+    } else {
+      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();
+        })
+      );
+    }
+    if (!internal?.generated) {
+      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);
   };

package/dist/index.js

@@ -1060,6 +1060,8 @@ var STYLE6 = `
 .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-icon{display:inline-flex;flex:none;opacity:.55}
+.bb-linkpanel-stale{opacity:.6;font-style:italic;color:inherit}
 .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}
@@ -1071,7 +1073,9 @@ var ICONS = {
   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>'
+  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>',
+  bookmark: '<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="M4 2.5h8v11l-4-3-4 3z"/></svg>',
+  goTo: '<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 8h9"/><path d="m8.5 4.5 4 3.5-4 3.5"/></svg>'
 };
 var current2 = null;
 var currentKey = null;
@@ -1147,26 +1151,50 @@ function showLinkPanel(opts) {
     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?.();
-      })
-    );
+    const internal = opts.internal;
+    if (internal) {
+      const icon = document.createElement("span");
+      icon.className = "bb-linkpanel-icon";
+      icon.innerHTML = ICONS.bookmark;
+      row.appendChild(icon);
+      const label = document.createElement("span");
+      label.className = "bb-linkpanel-href";
+      label.textContent = internal.label ?? "V\u1ECB tr\xED kh\xF4ng c\xF2n trong t\xE0i li\u1EC7u";
+      label.title = internal.label ?? existing.href;
+      if (!internal.label) label.classList.add("bb-linkpanel-stale");
+      row.appendChild(label);
+      if (internal.label) {
+        row.appendChild(
+          iconBtn(ICONS.goTo, "\u0110i t\u1EDBi v\u1ECB tr\xED n\xE0y", () => {
+            closeCurrent2();
+            internal.onGo();
+          })
+        );
+      }
+    } else {
+      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();
+        })
+      );
+    }
+    if (!internal?.generated) {
+      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);
   };

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

@@ -25,6 +25,17 @@ export interface LinkPanelOptions {
         href: string;
         text: string;
     } | null;
+    /** The existing link points inside the document (`#bookmark`). Word never
+     *  shows the raw anchor — it shows where the link GOES — so the panel
+     *  displays `label` and offers a jump instead of a copyable URL.
+     *  `generated` marks a link that is field output (a TOC entry): Word won't
+     *  let you edit or unlink those one by one, and neither do we — updating
+     *  the field is the way to change them. */
+    internal?: {
+        label: string | null;
+        generated: boolean;
+        onGo(): void;
+    } | null;
     /** A text range is selected → the Text field is hidden (the selection is
      *  the text). */
     hasSelection?: boolean;

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

@@ -1 +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"}
+{"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;;;;;+CAK2C;IAC3C,QAAQ,CAAC,EAAE;QACT,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;QACrB,SAAS,EAAE,OAAO,CAAC;QACnB,IAAI,IAAI,IAAI,CAAC;KACd,GAAG,IAAI,CAAC;IACT;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;AA6ED,wBAAgB,aAAa,CAAC,IAAI,EAAE,gBAAgB,GAAG,eAAe,CA8MrE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shadow-garden/bapbong-ui",
-  "version": "0.6.0",
+  "version": "0.7.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.5.0"
+    "@shadow-garden/bapbong-contracts": "^0.6.0"
   }
 }