npm - @verbb/plugin-kit-web - Versions diffs - 2.0.25 → 2.0.27 - Mend

@verbb/plugin-kit-web 2.0.25 → 2.0.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/dist-loader/chunks/{tiptap.styles-CZUkf2K6.js → tiptap.styles-CJqK0Wft.js} RENAMED Viewed

@@ -442,6 +442,11 @@ var REMOVE_ICON = `
 </svg>
 `.trim();
 var PK_VARIABLE_TAG_CONFIGURE_EVENT = "pk-variable-tag-configure";
+var PRESENTATION_CHANGE_EVENT = "pk-variable-tag-presentation-change";
+/** Refresh labels without changing the editor document or its selection. */
+function refreshVariableTagPresentation(host) {
+	host.dispatchEvent(new Event(PRESENTATION_CHANGE_EVENT));
+}
 var findTiptapHost = (viewDom) => {
 	let node = viewDom;
 	while (node) {
@@ -510,7 +515,8 @@ function createVariableTagDomNodeView() {
 		const { editor, getPos } = props;
 		const { deleteNode, updateAttributes, resolvePos } = createNodeViewCommands(editor, getPos);
 		let currentNode = props.node;
-		const syncUnresolvedPresentation = (attrs) => {
+		const host = findTiptapHost(props.view.dom);
+		const syncPresentation = (attrs) => {
 			const unresolved = Boolean(attrs.unresolved);
 			const token = String(attrs.value ?? "");
 			const chipLabel = String(attrs.label || attrs.value || "");
@@ -525,7 +531,15 @@ function createVariableTagDomNodeView() {
 				dom.removeAttribute("aria-description");
 				label.removeAttribute("aria-invalid");
 			}
-			label.textContent = chipLabel;
+			labelText.textContent = chipLabel;
+			const transformerId = String(attrs.transformerId ?? "").trim();
+			const registry = host?.variableTransformerRegistry ?? {};
+			const transformer = Object.values(registry).flat().find((entry) => entry.id === transformerId);
+			transformBadge.textContent = transformer?.label || transformerId;
+			transformBadge.hidden = !transformerId;
+			if (transformerId) transformBadge.setAttribute("aria-label", `Transform: ${transformBadge.textContent}`);
+			else transformBadge.removeAttribute("aria-label");
+			defaultMarker.hidden = String(attrs.default ?? "").trim() === "";
 		};
 		const dom = document.createElement("span");
 		dom.className = "pk-variable-tag";
@@ -538,8 +552,19 @@ function createVariableTagDomNodeView() {
 		label.type = "button";
 		label.className = "pk-variable-tag__label";
 		label.draggable = false;
+		const labelText = document.createElement("span");
+		labelText.className = "pk-variable-tag__text";
+		const transformBadge = document.createElement("span");
+		transformBadge.className = "pk-variable-tag__transform";
+		const defaultMarker = document.createElement("span");
+		defaultMarker.className = "pk-variable-tag__default";
+		defaultMarker.setAttribute("role", "img");
+		defaultMarker.setAttribute("aria-label", "Has default value");
+		label.append(defaultMarker, labelText, transformBadge);
 		dom.append(label);
-		syncUnresolvedPresentation(currentNode.attrs);
+		syncPresentation(currentNode.attrs);
+		const refreshPresentation = () => syncPresentation(currentNode.attrs);
+		host?.addEventListener(PRESENTATION_CHANGE_EVENT, refreshPresentation);
 		let removeButton = null;
 		let openOnInsertHandled = false;
 		let openedAt = 0;
@@ -611,6 +636,7 @@ function createVariableTagDomNodeView() {
 		}
 		return {
 			dom,
+			destroy: () => host?.removeEventListener(PRESENTATION_CHANGE_EVENT, refreshPresentation),
 			stopEvent: (event) => {
 				const target = event.target;
 				if (!(target instanceof Element)) return false;
@@ -629,7 +655,7 @@ function createVariableTagDomNodeView() {
 				currentNode = updatedNode;
 				dom.dataset.label = String(updatedNode.attrs.label ?? "");
 				dom.dataset.variableValue = String(updatedNode.attrs.value ?? "");
-				syncUnresolvedPresentation(updatedNode.attrs);
+				syncPresentation(updatedNode.attrs);
 				syncRemoveButton(editor.isEditable);
 				return true;
 			}
@@ -640,7 +666,7 @@ function createVariableTagDomNodeView() {
 //#region src/components/tiptap/tiptap.styles.ts
 /**
 * Indigo chip matching kit v1 VariableTagView (`bg-[#5C6BC0] text-white rounded-[2px]`).
-* Shared by rich editor + single-line input ProseMirror hosts.
+* Shared by rich editor, single-line input, and read-only content hosts.
 */
 var variableTagStyles = i`
     .pk-variable-tag {
@@ -685,7 +711,8 @@ var variableTagStyles = i`
     .pk-variable-tag__label {
         display: inline-flex;
         align-items: center;
-        max-width: 220px;
+        min-width: 0;
+        max-width: 320px;
         margin: 0;
         padding: 4px 5px;
         border: 0;
@@ -701,6 +728,41 @@ var variableTagStyles = i`
         user-select: none;
     }
+    .pk-variable-tag__text {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .pk-variable-tag__transform {
+        flex-shrink: 0;
+        max-width: 140px;
+        margin-inline-start: 4px;
+        padding: 1px 3px;
+        border-radius: 2px;
+        background: rgb(255 255 255 / 20%);
+        font-size: 9px;
+        line-height: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .pk-variable-tag__default {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 0;
+        height: 0;
+        border-top: 8px solid var(--pk-color-orange-400, #fb923c);
+        border-right: 8px solid transparent;
+        pointer-events: none;
+    }
+    .pk-variable-tag__transform[hidden],
+    .pk-variable-tag__default[hidden] {
+        display: none;
+    }
     .pk-variable-tag__remove {
         display: inline-flex;
         align-items: center;
@@ -909,7 +971,9 @@ var tiptapContentProseMirrorStyles = i`
         .ProseMirror p {
             margin: 0;
         }
+        ${variableTagStyles}
     }
 `;
 //#endregion
-export { resolveTiptapTextStyleToolbarConfig as a, getRegisteredTiptapToolbarControl as c, createVariableTagDomNodeView as i, isRegisteredTiptapToolbarControl as l, tiptapInputProseMirrorStyles as n, createTiptapExtensions as o, tiptapProseMirrorStyles as r, createTiptapInputExtensions as s, tiptapContentProseMirrorStyles as t };
+export { refreshVariableTagPresentation as a, createTiptapInputExtensions as c, createVariableTagDomNodeView as i, getRegisteredTiptapToolbarControl as l, tiptapInputProseMirrorStyles as n, resolveTiptapTextStyleToolbarConfig as o, tiptapProseMirrorStyles as r, createTiptapExtensions as s, tiptapContentProseMirrorStyles as t, isRegisteredTiptapToolbarControl as u };

package/dist-loader/components/connect/connect.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { c as __decorate } from "../../chunks/pk-base-BGegy7-X.js";
 import "../../chunks/pk-button-DV9Tk5Pd.js";
 import "../../chunks/pk-icon-B7ywfPb6.js";
 import "../../chunks/pk-state-panel-BhdZGllL.js";
-import "../../chunks/pk-dialog-BJs5fVHS.js";
+import "../../chunks/pk-dialog-ChX96jyg.js";
 import { a as sendCpConnectRequest, c as watchCpFormDirty, i as resolveConnectError, n as buildConnectPayload, o as serializeCpForm, r as escapeCpHtml, t as pkConnectStyles } from "../../chunks/pk-connect.styles-B5qe5yQB.js";
 import "../../chunks/pk-status-D3qVwWlR.js";
 //#region src/components/connect/pk-connect.ts

package/dist-loader/components/dialog/dialog.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import { t as PkDialog } from "../../chunks/pk-dialog-BJs5fVHS.js";
+import { t as PkDialog } from "../../chunks/pk-dialog-ChX96jyg.js";
 export { PkDialog };

package/dist-loader/components/tiptap/tiptap-content.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { a as e, c as customElement, m as i, p as b, s as n } from "../../chunks/lit-B6nFKgbW.js";
 import { c as __decorate, l as PkElement } from "../../chunks/pk-base-BGegy7-X.js";
 import { A as Editor } from "../../chunks/tiptap-DYSRDaas.js";
-import { i as createVariableTagDomNodeView, o as createTiptapExtensions, t as tiptapContentProseMirrorStyles } from "../../chunks/tiptap.styles-CZUkf2K6.js";
+import { a as refreshVariableTagPresentation, i as createVariableTagDomNodeView, s as createTiptapExtensions, t as tiptapContentProseMirrorStyles } from "../../chunks/tiptap.styles-CJqK0Wft.js";
 import { r as valueToContent } from "../../chunks/editor-CS16rBkM.js";
 //#region src/components/tiptap/pk-tiptap-content.styles.ts
 var pkTiptapContentStyles = i`
@@ -29,6 +29,7 @@ var PkTiptapContent = class PkTiptapContent extends PkElement {
 		super(..._args);
 		this.editor = null;
 		this.value = "";
+		this.variableTransformerRegistry = {};
 	}
 	static {
 		this.styles = [pkTiptapContentStyles, tiptapContentProseMirrorStyles];
@@ -39,6 +40,7 @@ var PkTiptapContent = class PkTiptapContent extends PkElement {
 		super.disconnectedCallback();
 	}
 	updated(changed) {
+		if (changed.has("variableTransformerRegistry")) refreshVariableTagPresentation(this);
 		if (changed.has("value") && this.editor) this.syncContent();
 		super.updated(changed);
 	}
@@ -71,6 +73,7 @@ var PkTiptapContent = class PkTiptapContent extends PkElement {
 };
 __decorate([e(".editor-mount")], PkTiptapContent.prototype, "editorMount", void 0);
 __decorate([n({ attribute: "value" })], PkTiptapContent.prototype, "value", void 0);
+__decorate([n({ attribute: false })], PkTiptapContent.prototype, "variableTransformerRegistry", void 0);
 PkTiptapContent = __decorate([customElement("pk-tiptap-content")], PkTiptapContent);
 //#endregion
 export { PkTiptapContent };

package/dist-loader/components/tiptap/tiptap-editor.js CHANGED Viewed

@@ -9,9 +9,9 @@ import { t as MirrorValidator } from "../../chunks/mirror-validator-BkZlEv1Z.js"
 import "../../chunks/pk-checkbox-DhP0iMoP.js";
 import "../../chunks/pk-input-Cj5s8eBT.js";
 import { A as Editor, N as getMarkRange, P as posToDOMRect } from "../../chunks/tiptap-DYSRDaas.js";
-import { a as resolveTiptapTextStyleToolbarConfig, c as getRegisteredTiptapToolbarControl, i as createVariableTagDomNodeView, l as isRegisteredTiptapToolbarControl, o as createTiptapExtensions, r as tiptapProseMirrorStyles } from "../../chunks/tiptap.styles-CZUkf2K6.js";
+import { a as refreshVariableTagPresentation, i as createVariableTagDomNodeView, l as getRegisteredTiptapToolbarControl, o as resolveTiptapTextStyleToolbarConfig, r as tiptapProseMirrorStyles, s as createTiptapExtensions, u as isRegisteredTiptapToolbarControl } from "../../chunks/tiptap.styles-CJqK0Wft.js";
 import { n as normalizeContentArray, r as valueToContent, t as getFatalTiptapContentError } from "../../chunks/editor-CS16rBkM.js";
-import "../../chunks/pk-dialog-BJs5fVHS.js";
+import "../../chunks/pk-dialog-ChX96jyg.js";
 import "../../chunks/pk-dropdown-item-Bs5NZDRh.js";
 import "../../chunks/pk-dropdown-label-Cpl9-bzB.js";
 import "../../chunks/pk-dropdown-menu-CLrfuD3i.js";
@@ -1168,6 +1168,7 @@ var PkTiptapEditor = class PkTiptapEditor extends PkFormAssociatedElement {
 		this.placeholder = "";
 		this.readonly = false;
 		this.invalid = false;
+		this.variableTransformerRegistry = {};
 		this.variableTagConfigure = null;
 		this.invalidContentMessage = "";
 		this.toolbarTooltips = true;
@@ -1301,6 +1302,7 @@ var PkTiptapEditor = class PkTiptapEditor extends PkFormAssociatedElement {
 		super.disconnectedCallback();
 	}
 	updated(changed) {
+		if (changed.has("variableTransformerRegistry")) refreshVariableTagPresentation(this);
 		if (changed.has("value") && !changed.has("defaultValue")) this.syncEditorContent();
 		if (changed.has("defaultValue") && !this.valueHasChanged) this.syncEditorContent();
 		if (changed.has("disabled") || changed.has("readonly")) this.host.editor?.setEditable(!this.disabled && !this.readonly);
@@ -1953,6 +1955,7 @@ __decorate([n({
 	type: Boolean,
 	reflect: true
 })], PkTiptapEditor.prototype, "invalid", void 0);
+__decorate([n({ attribute: false })], PkTiptapEditor.prototype, "variableTransformerRegistry", void 0);
 __decorate([n({ attribute: false })], PkTiptapEditor.prototype, "variableTagConfigure", void 0);
 __decorate([n({ attribute: "invalid-content-message" })], PkTiptapEditor.prototype, "invalidContentMessage", void 0);
 __decorate([n({

package/dist-loader/components/tiptap/tiptap-input.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { a as e, c as customElement, m as i, o as r, p as b, s as n } from "../.
 import { c as __decorate, i as PkFormAssociatedElement, n as formControlStyles } from "../../chunks/pk-base-BGegy7-X.js";
 import { t as MirrorValidator } from "../../chunks/mirror-validator-BkZlEv1Z.js";
 import { A as Editor } from "../../chunks/tiptap-DYSRDaas.js";
-import { i as createVariableTagDomNodeView, n as tiptapInputProseMirrorStyles, s as createTiptapInputExtensions } from "../../chunks/tiptap.styles-CZUkf2K6.js";
+import { a as refreshVariableTagPresentation, c as createTiptapInputExtensions, i as createVariableTagDomNodeView, n as tiptapInputProseMirrorStyles } from "../../chunks/tiptap.styles-CJqK0Wft.js";
 //#region ../plugin-kit-tiptap-core/dist/serialization/input.js
 var TRANSFORMER_ID_PREFIX = "transform=";
 function parseTokenMetadata(tokenValue) {
@@ -353,6 +353,7 @@ var PkTiptapInput = class PkTiptapInput extends PkFormAssociatedElement {
 		this.suppressUpdateEmission = false;
 		this._value = null;
 		this.variableCategories = {};
+		this.variableTransformerRegistry = {};
 		this.variableTagConfigure = null;
 		this.readonly = false;
 		this.invalid = false;
@@ -416,6 +417,7 @@ var PkTiptapInput = class PkTiptapInput extends PkFormAssociatedElement {
 		super.disconnectedCallback();
 	}
 	updated(changed) {
+		if (changed.has("variableTransformerRegistry")) refreshVariableTagPresentation(this);
 		if (changed.has("value") && !changed.has("defaultValue")) this.syncEditorContent();
 		if (changed.has("defaultValue") && !this.valueHasChanged) this.syncEditorContent();
 		if (changed.has("variableCategories") && this.editor) this.syncEditorContent(true);
@@ -488,6 +490,7 @@ var PkTiptapInput = class PkTiptapInput extends PkFormAssociatedElement {
 __decorate([e(".editor-mount")], PkTiptapInput.prototype, "editorMount", void 0);
 __decorate([e(".mirror-input")], PkTiptapInput.prototype, "input", void 0);
 __decorate([n({ attribute: false })], PkTiptapInput.prototype, "variableCategories", void 0);
+__decorate([n({ attribute: false })], PkTiptapInput.prototype, "variableTransformerRegistry", void 0);
 __decorate([n({ attribute: false })], PkTiptapInput.prototype, "variableTagConfigure", void 0);
 __decorate([n({
 	type: Boolean,

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@verbb/plugin-kit-web",
-    "version": "2.0.25",
+    "version": "2.0.27",
     "repository": {
         "url": "git+https://github.com/verbb/plugin-kit.git"
     },
@@ -1067,18 +1067,18 @@
     },
     "peerDependencies": {
         "@floating-ui/dom": "^1.7.3",
-        "@verbb/plugin-kit-core": "^2.0.25",
-        "@verbb/plugin-kit-icons": "^2.0.25",
+        "@verbb/plugin-kit-core": "^2.0.27",
+        "@verbb/plugin-kit-icons": "^2.0.27",
         "lit": "^3.3.0"
     },
     "license": "MIT",
     "dependencies": {
         "@floating-ui/dom": "^1.7.3",
         "@tiptap/core": "3.31.4",
-        "@verbb/plugin-kit-codemirror-core": "2.0.25",
-        "@verbb/plugin-kit-core": "^2.0.25",
-        "@verbb/plugin-kit-icons": "^2.0.25",
-        "@verbb/plugin-kit-tiptap-core": "^2.0.25",
+        "@verbb/plugin-kit-codemirror-core": "2.0.27",
+        "@verbb/plugin-kit-core": "^2.0.27",
+        "@verbb/plugin-kit-icons": "^2.0.27",
+        "@verbb/plugin-kit-tiptap-core": "^2.0.27",
         "composed-offset-position": "^0.0.6",
         "lit": "^3.3.0"
     },

package/dist/chunks/pk-dialog-C7KZGpQs.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"pk-dialog-C7KZGpQs.js","names":["xmark","_decorate"],"sources":["../../src/utils/craft-host-modal.ts","../../src/components/dialog/pk-dialog.styles.ts","../../src/components/dialog/pk-dialog.ts"],"sourcesContent":["/**\n * Craft CP Garnish modals (element selector, asset picker, …) live in normal\n * document stacking — not the browser top layer. Native `<dialog>.showModal()`\n * always paints above them, so open kit dialogs must briefly yield.\n */\n\nconst HOST_MODAL_SELECTOR = '.modal-shade, .modal';\n\nconst isVisiblyShown = (element: HTMLElement): boolean => {\n const style = getComputedStyle(element);\n\n return style.display !== 'none'\n && style.visibility !== 'hidden'\n && Number.parseFloat(style.opacity || '1') > 0;\n};\n\n/** True when a Craft/Garnish modal or shade is present and visible. */\nexport function isCraftHostModalOpen(root: ParentNode = document): boolean {\n const nodes = root.querySelectorAll(HOST_MODAL_SELECTOR);\n\n for (const node of nodes) {\n if (!(node instanceof HTMLElement)) {\n continue;\n }\n\n // Ignore kit chrome that happens to reuse `.modal` inside a dialog.\n if (node.closest('pk-dialog')) {\n continue;\n }\n\n if (isVisiblyShown(node)) {\n return true;\n }\n }\n\n return false;\n}\n\nexport type CraftHostModalObserver = {\n disconnect: () => void;\n};\n\n/**\n * Watch the document for Craft modal mount/unmount and invoke `onChange`\n * whenever presence flips. Used by `pk-dialog` to leave/re-enter the top layer.\n */\nexport function observeCraftHostModal(\n onChange: (open: boolean) => void,\n options: { root?: ParentNode; getDocument?: () => Document } = {},\n): CraftHostModalObserver {\n const doc = options.getDocument?.() ?? document;\n const root = options.root ?? doc.body;\n let lastOpen = isCraftHostModalOpen(doc);\n\n const emit = () => {\n const next = isCraftHostModalOpen(doc);\n if (next === lastOpen) {\n return;\n }\n lastOpen = next;\n onChange(next);\n };\n\n const observer = new MutationObserver(() => {\n emit();\n });\n\n observer.observe(root, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: ['class', 'style', 'hidden'],\n });\n\n // Craft sometimes toggles visibility a frame after insert.\n const intervalId = window.setInterval(emit, 250);\n\n return {\n disconnect: () => {\n observer.disconnect();\n window.clearInterval(intervalId);\n },\n };\n}\n","import { css } from 'lit';\n\nexport const pkDialogStyles = css`\n @layer pk-component {\n :host {\n /* Not display:contents — that flattens the trigger slot into flex parents\n (e.g. playground cards) and stretches pk-button full width, same class of\n bug as the dropdown host. Dialog host is display none/block, not contents. */\n display: inline-block;\n width: fit-content;\n max-width: 100%;\n align-self: flex-start;\n flex: none;\n vertical-align: middle;\n }\n\n /*\n * Controlled dialogs (no slot=\"trigger\") — panel is top-layer / fixed while\n * yielding. An inline-block host still sizes to the open <dialog> box in some\n * engines and expands parents (Formie nested field cards grow a blank gap).\n *\n * Zero box ≠ gone from the tree: Tailwind space-y-* uses :not(:last-child) on\n * DOM siblings, so an in-tree host still steals last-child and margins the\n * previous sibling. Prefer flex/grid gap-* (skips out-of-flow children), or\n * mount overlays outside the spaced stack. True light-DOM portal would also fix it.\n */\n :host(:not([data-has-trigger])) {\n position: absolute;\n width: 0;\n height: 0;\n max-width: none;\n margin: 0;\n padding: 0;\n overflow: visible;\n vertical-align: unset;\n }\n\n .dialog {\n display: flex;\n flex-direction: column;\n width: min(100%, var(--pk-dialog-width, var(--pk-dialog-max-width, 32rem)));\n min-width: var(--pk-dialog-min-width, 0);\n /* Keep UA :modal inset (0) — that + margin:auto centers the panel. Do not\n * unset inset; it breaks centering (field edit landed top-left). */\n height: var(--pk-dialog-height, fit-content);\n min-height: var(--pk-dialog-min-height, 0);\n max-height: var(--pk-dialog-max-height, calc(100vh - 2rem));\n margin: auto;\n padding: 0;\n /* v1 DialogContent: no CSS border — edge is the 1px ring inside --pk-shadow-modal. */\n border: 0;\n border-radius: var(--pk-radius-lg);\n background: var(--pk-color-white);\n box-shadow: var(--pk-shadow-modal);\n color: var(--pk-color-gray-900);\n overflow: hidden;\n opacity: 1;\n transform: scale(1);\n }\n\n .dialog:focus,\n .dialog:focus-visible {\n outline: none;\n }\n\n .dialog:not([open]) {\n display: none;\n }\n\n .dialog--wide {\n --pk-dialog-max-width: 42rem;\n }\n\n /* motion only via animateWithClass — never auto-animate on [open] alone. */\n .dialog.show {\n animation: pk-dialog-in 0.15s ease;\n }\n\n .dialog.hide {\n animation: pk-dialog-out 0.15s ease forwards;\n }\n\n .dialog.pulse {\n animation: pk-dialog-pulse 0.25s ease;\n }\n\n @keyframes pk-dialog-in {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n @keyframes pk-dialog-out {\n from {\n opacity: 1;\n transform: scale(1);\n }\n\n to {\n opacity: 0;\n transform: scale(0.95);\n }\n }\n\n @keyframes pk-dialog-pulse {\n 0%, 100% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(0.98);\n }\n }\n\n .dialog.show::backdrop {\n animation: pk-dialog-backdrop-in 0.15s ease;\n }\n\n .dialog.hide::backdrop {\n animation: pk-dialog-backdrop-in 0.15s ease reverse;\n }\n\n .dialog::backdrop {\n background: hsl(from var(--pk-color-gray-900) h s l / 0.2);\n opacity: 1;\n }\n\n @keyframes pk-dialog-backdrop-in {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n }\n\n .header {\n position: relative;\n display: flex;\n flex-shrink: 0;\n flex-direction: column;\n gap: 0.2rem;\n padding: 1rem;\n border-bottom: 1px solid var(--pk-color-gray-150);\n border-radius: var(--pk-radius-lg) var(--pk-radius-lg) 0 0;\n background: #f3f7fb;\n text-align: left;\n }\n\n .title {\n margin: 0;\n padding-inline-end: 2rem;\n font-size: 0.9375rem;\n font-weight: 600;\n line-height: 1.2;\n color: var(--pk-color-gray-900);\n }\n\n .description {\n margin: 0;\n padding-inline-end: 2rem;\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.4;\n color: var(--pk-color-gray-500);\n }\n\n .close {\n --pk-dialog-close-focus-padding: 0.25rem;\n position: absolute;\n top: calc(1rem - var(--pk-dialog-close-focus-padding));\n right: calc(1rem - var(--pk-dialog-close-focus-padding));\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: calc(1.125rem + 2 * var(--pk-dialog-close-focus-padding));\n height: calc(1.125rem + 2 * var(--pk-dialog-close-focus-padding));\n margin: 0;\n padding: var(--pk-dialog-close-focus-padding);\n border: 0;\n border-radius: var(--pk-radius-sm);\n background: transparent;\n color: var(--pk-color-gray-600);\n cursor: pointer;\n line-height: 0;\n opacity: 0.7;\n transition: opacity 0.12s ease;\n box-sizing: border-box;\n }\n\n .close-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n line-height: 0;\n }\n\n .close-icon svg {\n display: block;\n width: 1.125rem;\n height: 1.125rem;\n }\n\n .close:hover {\n opacity: 1;\n background: transparent;\n }\n\n .close:focus-visible {\n opacity: 1;\n box-shadow: 0 0 0 2px var(--pk-color-gray-600);\n }\n\n .body {\n flex: 1 1 auto;\n min-height: 0;\n overflow: auto;\n padding: 0;\n /* v1 DialogContent inherited CP text defaults (14px / gray-700) — do not\n * downshift body copy to sm/gray-600 or slotted content reads smaller than v1. */\n font-size: var(--pk-font-size-base);\n line-height: 1.5;\n color: var(--pk-color-gray-700);\n }\n\n .body--padded {\n padding: 1rem;\n }\n\n .footer {\n display: flex;\n flex-shrink: 0;\n flex-direction: row;\n justify-content: flex-end;\n gap: 0.5rem;\n padding: 0.625rem 1rem;\n border-top: 1px solid var(--pk-color-gray-150);\n border-radius: 0 0 var(--pk-radius-lg) var(--pk-radius-lg);\n background: #e4edf6;\n }\n }\n`;\n","import { html, nothing } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from '../../decorators.js';\nimport type { PropertyValues } from 'lit';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\n\nimport { isTopDismissible, registerDismissible, unregisterDismissible } from '../../a11y/dismissible-stack.js';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../a11y/scroll-lock.js';\nimport { PkElement } from '../../base/pk-element.js';\nimport { xmark, renderIconHtml } from '../../icons/index.js';\nimport {\n PkAfterHideEvent,\n PkAfterShowEvent,\n PkHideEvent,\n PkShowEvent,\n type PkOverlaySource,\n} from '../../events/overlay-lifecycle.js';\nimport { animateWithClass } from '../../utils/animate-with-class.js';\nimport { observeCraftHostModal, isCraftHostModalOpen, type CraftHostModalObserver } from '../../utils/craft-host-modal.js';\nimport { pkDialogStyles } from './pk-dialog.styles.js';\n\nconst CLOSE_ICON = renderIconHtml(xmark);\n\n/**\n * Modal dialog — literal `pk-dialog` lifecycle with Plugin Kit styling.\n *\n * Craft CP Garnish modals (asset/element selectors) are not top-layer. While one\n * is open, this dialog temporarily uses `show()` instead of `showModal()` so the\n * Craft UI can stack above — same interop intent as v1 Base UI dialog + `.modal`.\n *\n * @slot trigger - Opens the dialog (optional — use `open` for declarative control)\n * @slot header - Custom header region (replaces the built-in `label` header)\n * @slot label - Dialog title\n * @slot footer - Dialog footer actions\n * @slot - Dialog body\n *\n * @csspart panel - Native dialog element\n * @csspart header - Header region\n * @csspart body - Body region\n * @csspart footer - Footer region\n */\n@customElement('pk-dialog')\nexport class PkDialog extends PkElement {\n static override styles = pkDialogStyles;\n\n @property({ type: Boolean, reflect: true })\n open = false;\n\n @property()\n label = '';\n\n /** Optional subtitle under the title in the built-in header (v1 DialogDescription). */\n @property()\n description = '';\n\n /** Maps to `light-dismiss` (inverted). */\n @property({ attribute: 'disable-pointer-dismissal', type: Boolean, reflect: true })\n disablePointerDismissal = false;\n\n @property({ attribute: 'without-header', type: Boolean, reflect: true })\n withoutHeader = false;\n\n /**\n * Opt out of the default 1rem body padding applied when the built-in header is shown.\n * Use for flush layouts (sidebars, full-bleed pickers) that own their own inset.\n */\n @property({ attribute: 'without-body-padding', type: Boolean, reflect: true })\n withoutBodyPadding = false;\n\n /**\n * Skip document scroll lock while open. Useful for labs / rare cases where the\n * page should keep scrolling under the modal (native dialog still traps focus).\n */\n @property({ attribute: 'disable-scroll-lock', type: Boolean, reflect: true })\n disableScrollLock = false;\n\n @property({ reflect: true })\n size: 'default' | 'wide' = 'default';\n\n @query('dialog')\n private dialogElement!: HTMLDialogElement;\n\n @state()\n private triggerElement: HTMLElement | null = null;\n\n private previouslyFocused: HTMLElement | null = null;\n\n /** True while demoted from `showModal` so a Craft Garnish modal can stack above. */\n private yieldingToHostModal = false;\n\n private hostModalObserver: CraftHostModalObserver | null = null;\n\n /** Inline box captured before yield — cleared on restore. */\n private yieldBox: { top: number; left: number; width: number; height: number } | null = null;\n\n /** Light-DOM `slot=\"header\"` only — ignore built-in header fallback inside the shadow slot. */\n private hasCustomHeaderSlot(): boolean {\n return this.querySelector(':scope > [slot=\"header\"]') !== null;\n }\n\n private handleDocumentKeyDown = (event: KeyboardEvent): void => {\n // Craft modal owns Escape while we have yielded the top layer.\n if (this.yieldingToHostModal) {\n return;\n }\n\n if (event.key === 'Escape' && this.open && isTopDismissible(this)) {\n event.preventDefault();\n event.stopPropagation();\n void this.requestClose('escape');\n }\n };\n\n /** Pin modeless dialog to the viewport box it had under `showModal`. */\n private applyYieldPosition(box: { top: number; left: number; width: number; height: number }): void {\n const el = this.dialogElement;\n el.style.position = 'fixed';\n el.style.top = `${box.top}px`;\n el.style.left = `${box.left}px`;\n el.style.width = `${box.width}px`;\n el.style.height = `${box.height}px`;\n el.style.margin = '0';\n el.style.maxHeight = 'none';\n // Below typical Garnish.Modal z-index (≥100); keeps page chrome from covering us.\n el.style.zIndex = '99';\n el.toggleAttribute('data-yielding', true);\n }\n\n private clearYieldPosition(): void {\n const el = this.dialogElement;\n if (!el) {\n return;\n }\n\n el.style.position = '';\n el.style.top = '';\n el.style.left = '';\n el.style.width = '';\n el.style.height = '';\n el.style.margin = '';\n el.style.maxHeight = '';\n el.style.zIndex = '';\n el.removeAttribute('data-yielding');\n this.yieldBox = null;\n }\n\n /** Demote `showModal` → `show` so Craft Garnish can paint above (not inert/under). */\n private yieldToHostModal(): void {\n if (this.yieldingToHostModal || !this.open || !this.dialogElement?.open) {\n return;\n }\n\n // Capture centered modal box before leaving the top layer — `show()` is\n // in-flow and would otherwise jump to the host's layout position.\n const rect = this.dialogElement.getBoundingClientRect();\n this.yieldBox = {\n top: rect.top,\n left: rect.left,\n width: rect.width,\n height: rect.height,\n };\n this.yieldingToHostModal = true;\n\n try {\n this.dialogElement.close();\n this.dialogElement.show();\n this.applyYieldPosition(this.yieldBox);\n } catch {\n this.yieldingToHostModal = false;\n this.clearYieldPosition();\n }\n }\n\n /** Restore top-layer modal after Craft Garnish closes. */\n private restoreFromHostModal(): void {\n if (!this.yieldingToHostModal) {\n return;\n }\n\n this.yieldingToHostModal = false;\n this.clearYieldPosition();\n\n if (!this.open || !this.dialogElement) {\n return;\n }\n\n try {\n if (this.dialogElement.open) {\n this.dialogElement.close();\n }\n this.dialogElement.showModal();\n } catch {\n /* noop — next open cycle will recover */\n }\n }\n\n private onHostModalPresenceChange = (hostModalOpen: boolean): void => {\n if (hostModalOpen) {\n this.yieldToHostModal();\n } else {\n this.restoreFromHostModal();\n }\n };\n\n override firstUpdated(): void {\n // Mount-with-open (React `{open && <Dialog open>}` / `<Dialog open>`) must\n // use show() so the enter animation runs. A bare showModal() here used to\n // open instantly, then updated()→show() no-op'd because dialogElement.open\n // was already true — page-settings (always mounted, open toggled) still\n // animated because it only went through show().\n if (this.open) {\n void this.show();\n }\n }\n\n override disconnectedCallback(): void {\n if (!this.disableScrollLock) {\n unlockBodyScrolling(this);\n }\n\n this.removeOpenListeners();\n super.disconnectedCallback();\n }\n\n override updated(changed: PropertyValues): void {\n super.updated(changed);\n\n if (!changed.has('open') || !this.hasUpdated) {\n return;\n }\n\n this.handleOpenChange();\n }\n\n /** `handleOpenChange` — declarative `open` drives show/close. */\n private handleOpenChange(): void {\n if (this.open && !this.dialogElement.open) {\n void this.show();\n } else if (!this.open && this.dialogElement.open) {\n this.open = true;\n void this.requestClose('api');\n }\n }\n\n private showing = false;\n\n /** Shows the dialog — `show()`. */\n async show(_source: PkOverlaySource = 'api'): Promise<void> {\n if (this.showing || this.dialogElement?.open) {\n return;\n }\n\n this.showing = true;\n\n try {\n const showEvent = new PkShowEvent();\n\n if (!this.dispatchEvent(showEvent)) {\n this.open = false;\n return;\n }\n\n this.addOpenListeners();\n this.previouslyFocused = document.activeElement as HTMLElement | null;\n this.open = true;\n this.dialogElement.showModal();\n\n if (!this.disableScrollLock) {\n lockBodyScrolling(this);\n }\n\n requestAnimationFrame(() => {\n const elementToFocus = this.querySelector<HTMLElement>('[autofocus]');\n\n if (elementToFocus) {\n const innerControl = elementToFocus.shadowRoot?.querySelector<HTMLElement>(\n 'input, textarea, select, button',\n );\n\n (innerControl ?? elementToFocus).focus({ preventScroll: true });\n return;\n }\n\n this.dialogElement.focus({ preventScroll: true });\n });\n\n await animateWithClass(this.dialogElement, 'show');\n\n this.dispatchEvent(new CustomEvent('pk-open-change', {\n detail: { open: true },\n bubbles: true,\n composed: true,\n }));\n this.dispatchEvent(new PkAfterShowEvent());\n } finally {\n this.showing = false;\n }\n }\n\n async hide(source: PkOverlaySource = 'unknown'): Promise<void> {\n await this.requestClose(source);\n }\n\n closeDialog(): void {\n void this.requestClose('close-button');\n }\n\n /** `requestClose()`. */\n async requestClose(source: PkOverlaySource | EventTarget = 'unknown'): Promise<void> {\n const overlaySource: PkOverlaySource = typeof source === 'string'\n ? source\n : 'close-button';\n\n const hideEvent = new PkHideEvent(overlaySource);\n\n if (!this.dispatchEvent(hideEvent)) {\n this.open = true;\n await animateWithClass(this.dialogElement, 'pulse');\n return;\n }\n\n this.removeOpenListeners();\n await animateWithClass(this.dialogElement, 'hide');\n this.open = false;\n this.dialogElement.close();\n\n if (!this.disableScrollLock) {\n unlockBodyScrolling(this);\n }\n\n const restoreFocus = this.previouslyFocused;\n this.previouslyFocused = null;\n\n if (restoreFocus?.isConnected) {\n window.setTimeout(() => {\n restoreFocus.focus({ preventScroll: true });\n }, 0);\n }\n\n this.dispatchEvent(new PkAfterHideEvent());\n this.dispatchEvent(new CustomEvent('pk-open-change', {\n detail: { open: false },\n bubbles: true,\n composed: true,\n }));\n }\n\n /** Recovery hook — clears hung modal state from overlay races. */\n forceOverlayReset(): void {\n this.open = false;\n this.yieldingToHostModal = false;\n this.clearYieldPosition();\n this.removeOpenListeners();\n\n if (this.dialogElement?.open) {\n try {\n this.dialogElement.close();\n } catch {\n /* noop */\n }\n }\n\n this.dialogElement?.classList.remove('hide', 'show', 'pulse');\n\n if (!this.disableScrollLock) {\n unlockBodyScrolling(this);\n }\n }\n\n private addOpenListeners(): void {\n document.addEventListener('keydown', this.handleDocumentKeyDown);\n registerDismissible(this);\n this.hostModalObserver?.disconnect();\n this.hostModalObserver = observeCraftHostModal(this.onHostModalPresenceChange);\n // Craft modal may already be open when this dialog mounts (rare).\n this.onHostModalPresenceChange(isCraftHostModalOpen());\n }\n\n private removeOpenListeners(): void {\n document.removeEventListener('keydown', this.handleDocumentKeyDown);\n unregisterDismissible(this);\n this.hostModalObserver?.disconnect();\n this.hostModalObserver = null;\n this.yieldingToHostModal = false;\n this.clearYieldPosition();\n }\n\n private handleDialogCancel = (event: Event): void => {\n event.preventDefault();\n\n if (!this.dialogElement.classList.contains('hide') && isTopDismissible(this)) {\n void this.requestClose('escape');\n }\n };\n\n private handleDialogClick = (event: Event): void => {\n const closeViaPath = event.composedPath().some(\n (node): node is Element =>\n node instanceof Element && node.matches('[data-dialog=\"close\"], [data-dialog-close]'),\n );\n\n if (closeViaPath) {\n event.stopPropagation();\n void this.requestClose('close-button');\n }\n };\n\n private handleDialogPointerDown = async (event: Event): Promise<void> => {\n if (event.target !== this.dialogElement) {\n return;\n }\n\n // Nested overlays (dropdown / select / combobox) register above us on the\n // dismissible stack. Their capture-phase light-dismiss runs first; skip closing\n // the dialog for the same click so “click off the menu” doesn’t also dismiss us.\n if (!isTopDismissible(this)) {\n return;\n }\n\n if (!this.disablePointerDismissal) {\n void this.requestClose('pointer-dismiss');\n return;\n }\n\n await animateWithClass(this.dialogElement, 'pulse');\n };\n\n private syncHasTriggerAttribute(): void {\n // Drives :host(:not([data-has-trigger])) zero-footprint layout (see styles).\n this.toggleAttribute('data-has-trigger', Boolean(this.triggerElement));\n }\n\n private onTriggerSlotChange(event: Event): void {\n const slot = event.target as HTMLSlotElement;\n const [trigger] = slot.assignedElements({ flatten: true }) as HTMLElement[];\n\n if (this.triggerElement) {\n this.triggerElement.removeEventListener('click', this.onTriggerClick);\n }\n\n this.triggerElement = trigger ?? null;\n this.syncHasTriggerAttribute();\n\n if (this.triggerElement) {\n this.triggerElement.addEventListener('click', this.onTriggerClick);\n }\n }\n\n private onTriggerClick = (event: Event): void => {\n event.preventDefault();\n this.open = true;\n };\n\n /** Re-render when footer actions are added/removed so the footer is not shown empty. */\n private onFooterSlotChange = (): void => {\n this.requestUpdate();\n };\n\n override render() {\n const showBuiltInHeader = !this.hasCustomHeaderSlot()\n && !this.withoutHeader\n && Boolean(this.label);\n const padBody = showBuiltInHeader && !this.withoutBodyPadding;\n const hasFooter = this.querySelector(':scope > [slot=\"footer\"]') !== null;\n\n return html`\n <slot name=\"trigger\" @slotchange=${this.onTriggerSlotChange}></slot>\n <dialog\n part=\"panel\"\n class=${classMap({\n dialog: true,\n open: this.open,\n 'dialog--wide': this.size === 'wide',\n })}\n tabindex=\"-1\"\n @cancel=${this.handleDialogCancel}\n @click=${this.handleDialogClick}\n @pointerdown=${this.handleDialogPointerDown}\n >\n <slot name=\"header\">\n ${showBuiltInHeader\n ? html`\n <header part=\"header\" class=\"header\">\n <h2 part=\"title\" class=\"title\">\n <slot name=\"label\">${this.label}</slot>\n </h2>\n ${this.description\n ? html`\n <p part=\"description\" class=\"description\">\n <slot name=\"description\">${this.description}</slot>\n </p>\n `\n : html`<slot name=\"description\" hidden></slot>`}\n <button type=\"button\" class=\"close\" data-dialog=\"close\" aria-label=\"Close\">\n <span class=\"close-icon\" aria-hidden=\"true\">${unsafeSVG(CLOSE_ICON)}</span>\n </button>\n </header>\n `\n : nothing}\n </slot>\n <div\n part=\"body\"\n class=${classMap({\n body: true,\n 'body--padded': padBody,\n })}\n >\n <slot></slot>\n </div>\n ${hasFooter\n ? html`\n <footer part=\"footer\" class=\"footer\">\n <slot name=\"footer\" @slotchange=${this.onFooterSlotChange}></slot>\n </footer>\n `\n : html`<slot name=\"footer\" @slotchange=${this.onFooterSlotChange} hidden></slot>`}\n </dialog>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-dialog': PkDialog;\n }\n}\n"],"mappings":"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"}

package/dist/chunks/pk-tiptap-content-DmS_2EUi.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"pk-tiptap-content-DmS_2EUi.js","names":["_decorate"],"sources":["../../src/components/tiptap/pk-tiptap-content.styles.ts","../../src/components/tiptap/pk-tiptap-content.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkTiptapContentStyles = css`\n @layer pk-component {\n :host {\n display: block;\n width: 100%;\n /* Inherit light-DOM color/size (warning banners, badges). Tokens override when set. */\n color: var(--pk-tiptap-content-color, inherit);\n font-family: var(--pk-font-family);\n font-size: var(--pk-tiptap-content-font-size, inherit);\n line-height: var(--pk-tiptap-content-line-height, 1.4);\n }\n }\n`;\n","import { html } from 'lit';\nimport { customElement, property, query } from '../../decorators.js';\nimport type { PropertyValues } from 'lit';\nimport { Editor } from '@tiptap/core';\nimport {\n createTiptapExtensions,\n valueToContent,\n} from '@verbb/plugin-kit-tiptap-core';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { createVariableTagDomNodeView } from './variable-tag-node-view.js';\nimport { pkTiptapContentStyles } from './pk-tiptap-content.styles.js';\nimport { tiptapContentProseMirrorStyles } from './tiptap.styles.js';\n\nfunction serializeContent(doc: ReturnType<typeof valueToContent>): string {\n if (!doc) {\n return '[]';\n }\n\n if (Array.isArray(doc.content)) {\n return JSON.stringify(doc.content);\n }\n\n return JSON.stringify(doc);\n}\n\n/**\n * Read-only TipTap / ProseMirror renderer.\n *\n * Pass the same `value` shapes as TiptapEditor: node array, doc object, or JSON string.\n */\n@customElement('pk-tiptap-content')\nexport class PkTiptapContent extends PkElement {\n static override styles = [pkTiptapContentStyles, tiptapContentProseMirrorStyles];\n\n @query('.editor-mount')\n private editorMount!: HTMLDivElement;\n\n private editor: Editor | null = null;\n\n @property({ attribute: 'value' })\n value = '';\n\n override disconnectedCallback(): void {\n this.editor?.destroy();\n this.editor = null;\n super.disconnectedCallback();\n }\n\n override updated(changed: PropertyValues): void {\n if (changed.has('value') && this.editor) {\n this.syncContent();\n }\n\n super.updated(changed);\n }\n\n override firstUpdated(): void {\n this.mountEditor();\n }\n\n private mountEditor(): void {\n this.editor = new Editor({\n element: this.editorMount,\n extensions: createTiptapExtensions({\n variableTagNodeView: createVariableTagDomNodeView(),\n surface: 'content',\n }),\n content: valueToContent(this.value),\n editable: false,\n });\n }\n\n private syncContent(): void {\n if (!this.editor) {\n return;\n }\n\n const doc = valueToContent(this.value) ?? { type: 'doc', content: [] };\n const incoming = serializeContent(valueToContent(this.value));\n const current = serializeContent(this.editor.getJSON() as ReturnType<typeof valueToContent>);\n\n if (incoming === current) {\n return;\n }\n\n this.editor.commands.setContent(doc);\n }\n\n override render() {\n return html`<div class=\"editor-mount\" part=\"content\"></div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-tiptap-content': PkTiptapContent;\n }\n}\n"],"mappings":";;;;;;;AAEA,IAAa,wBAAwB,GAAG;;;;;;;;;;;;;;;ACYxC,SAAS,iBAAiB,KAAgD;CACtE,IAAI,CAAC,KACD,OAAO;CAGX,IAAI,MAAM,QAAQ,IAAI,OAAO,GACzB,OAAO,KAAK,UAAU,IAAI,OAAO;CAGrC,OAAO,KAAK,UAAU,GAAG;AAC7B;AAQO,IAAM,kBAAN,MAAM,wBAAwB,UAAU;;;EAMX,KAAA,SAAA;EAGxB,KAAA,QAAA;;;EARiB,KAAA,SAAA,CAAC,uBAAuB,8BAA8B;;CAU/E,uBAAsC;EAClC,KAAK,QAAQ,QAAQ;EACrB,KAAK,SAAS;EACd,MAAM,qBAAqB;CAC/B;CAEA,QAAiB,SAA+B;EAC5C,IAAI,QAAQ,IAAI,OAAO,KAAK,KAAK,QAC7B,KAAK,YAAY;EAGrB,MAAM,QAAQ,OAAO;CACzB;CAEA,eAA8B;EAC1B,KAAK,YAAY;CACrB;CAEA,cAA4B;EACxB,KAAK,SAAS,IAAI,OAAO;GACrB,SAAS,KAAK;GACd,YAAY,uBAAuB;IAC/B,qBAAqB,6BAA6B;IAClD,SAAS;GACb,CAAC;GACD,SAAS,eAAe,KAAK,KAAK;GAClC,UAAU;EACd,CAAC;CACL;CAEA,cAA4B;EACxB,IAAI,CAAC,KAAK,QACN;EAGJ,MAAM,MAAM,eAAe,KAAK,KAAK,KAAK;GAAE,MAAM;GAAO,SAAS,CAAC;EAAE;EAIrE,IAHiB,iBAAiB,eAAe,KAAK,KAAK,CAGvD,MAFY,iBAAiB,KAAK,OAAO,QAAQ,CAEpC,GACb;EAGJ,KAAK,OAAO,SAAS,WAAW,GAAG;CACvC;CAEA,SAAkB;EACd,OAAO,IAAI;CACf;AACJ;AAzDKA,WAAA,CAAA,MAAM,eAAe,CAAA,GAAA,gBAAA,WAAA,eAAA,KAAA,CAAA;AAKrBA,WAAA,CAAA,SAAS,EAAE,WAAW,QAAQ,CAAC,CAAA,GAAA,gBAAA,WAAA,SAAA,KAAA,CAAA;AATnC,kBAAAA,WAAA,CAAA,cAAc,mBAAmB,CAAA,GAAA,eAAA"}