@verbb/plugin-kit-web 2.0.0

package/dist/chunks/tiptap.styles-BytOpP0H.js

@@ -0,0 +1,463 @@
+import { i as uniqueId } from "./focus-aa5dlv8k.js";
+import { css } from "lit";
+//#region src/components/tiptap/variable-tag-node-view.ts
+/** Match kit v1 VariableTagView chip chrome (indigo + remove). */
+var REMOVE_ICON = `
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" focusable="false">
+  <path fill="currentColor" d="M2.1 1.4 5 4.3l2.9-2.9.7.7L5.7 5l2.9 2.9-.7.7L5 5.7l-2.9 2.9-.7-.7L4.3 5 1.4 2.1z"/>
+</svg>
+`.trim();
+var PK_VARIABLE_TAG_CONFIGURE_EVENT = "pk-variable-tag-configure";
+var findTiptapHost = (viewDom) => {
+	let node = viewDom;
+	while (node) {
+		if (node instanceof HTMLElement && node.localName.startsWith("pk-tiptap")) return node;
+		node = node.parentNode instanceof ShadowRoot ? node.parentNode.host : node.parentNode;
+	}
+	return null;
+};
+var emitConfigure = (editor, detail) => {
+	const viewDom = editor.view.dom;
+	const host = findTiptapHost(viewDom);
+	const configure = host && "variableTagConfigure" in host ? host.variableTagConfigure : null;
+	if (typeof configure === "function") configure(detail);
+	(host ?? viewDom).dispatchEvent(new CustomEvent(PK_VARIABLE_TAG_CONFIGURE_EVENT, {
+		bubbles: true,
+		composed: true,
+		detail
+	}));
+};
+/**
+* DOM NodeViewRendererProps do NOT include React's `deleteNode` / `updateAttributes`
+* (those live on NodeViewProps for ReactNodeViewRenderer only). Build them from
+* editor + getPos — same operations ReactNodeViewRenderer wires for VariableTagView.
+*/
+function createNodeViewCommands(editor, getPos) {
+	const resolvePos = () => {
+		const pos = typeof getPos === "function" ? getPos() : getPos;
+		return typeof pos === "number" ? pos : void 0;
+	};
+	const deleteNode = () => {
+		const pos = resolvePos();
+		if (typeof pos !== "number") return;
+		const live = editor.state.doc.nodeAt(pos);
+		if (!live || live.type.name !== "variableTag") return;
+		editor.chain().focus().deleteRange({
+			from: pos,
+			to: pos + live.nodeSize
+		}).run();
+	};
+	const updateAttributes = (attributes) => {
+		const pos = resolvePos();
+		if (typeof pos !== "number") return;
+		const live = editor.state.doc.nodeAt(pos);
+		if (!live || live.type.name !== "variableTag") return;
+		editor.chain().command(({ tr, dispatch }) => {
+			if (dispatch) tr.setNodeMarkup(pos, void 0, {
+				...live.attrs,
+				...attributes
+			});
+			return true;
+		}).run();
+	};
+	return {
+		deleteNode,
+		updateAttributes,
+		resolvePos
+	};
+}
+/**
+* DOM node view for variable tags in vanilla editors.
+* Chip + remove match kit v1; configure UI is opened via `pk-variable-tag-configure`
+* (Formie mounts the edit overlay beside the WC editor).
+*/
+function createVariableTagDomNodeView() {
+	return (props) => {
+		const { editor, getPos } = props;
+		const { deleteNode, updateAttributes, resolvePos } = createNodeViewCommands(editor, getPos);
+		let currentNode = props.node;
+		const syncUnresolvedPresentation = (attrs) => {
+			const unresolved = Boolean(attrs.unresolved);
+			const token = String(attrs.value ?? "");
+			const chipLabel = String(attrs.label || attrs.value || "");
+			dom.classList.toggle("pk-variable-tag--unresolved", unresolved);
+			if (unresolved) {
+				dom.dataset.unresolved = "true";
+				dom.title = token ? `Unknown or missing reference — ${token}` : "Unknown or missing reference";
+				label.setAttribute("aria-invalid", "true");
+			} else {
+				delete dom.dataset.unresolved;
+				dom.removeAttribute("title");
+				label.removeAttribute("aria-invalid");
+			}
+			label.textContent = chipLabel;
+		};
+		const dom = document.createElement("span");
+		dom.className = "pk-variable-tag";
+		dom.id = uniqueId("pk-variable-tag");
+		dom.setAttribute("contenteditable", "false");
+		dom.setAttribute("data-drag-handle", "");
+		dom.dataset.label = String(currentNode.attrs.label ?? "");
+		dom.dataset.variableValue = String(currentNode.attrs.value ?? "");
+		const label = document.createElement("button");
+		label.type = "button";
+		label.className = "pk-variable-tag__label";
+		label.draggable = false;
+		dom.append(label);
+		syncUnresolvedPresentation(currentNode.attrs);
+		let removeButton = null;
+		let openOnInsertHandled = false;
+		let openedAt = 0;
+		const readLiveAttrs = () => {
+			const pos = resolvePos();
+			if (typeof pos === "number") {
+				const live = editor.state.doc.nodeAt(pos);
+				if (live?.type.name === "variableTag") return { ...live.attrs };
+			}
+			return { ...currentNode.attrs };
+		};
+		const openConfigure = () => {
+			if (!editor.isEditable) return;
+			const now = Date.now();
+			if (now - openedAt < 300) return;
+			openedAt = now;
+			dom.removeAttribute("draggable");
+			emitConfigure(editor, {
+				editor,
+				anchor: dom,
+				attrs: readLiveAttrs(),
+				getPos: resolvePos,
+				updateAttributes,
+				deleteNode
+			});
+		};
+		label.addEventListener("pointerdown", (event) => {
+			if (event.button !== 0) return;
+			event.preventDefault();
+			event.stopPropagation();
+			openConfigure();
+		});
+		label.addEventListener("click", (event) => {
+			event.preventDefault();
+			event.stopPropagation();
+			openConfigure();
+		});
+		const syncRemoveButton = (editable) => {
+			if (editable) {
+				if (removeButton) return;
+				removeButton = document.createElement("button");
+				removeButton.type = "button";
+				removeButton.className = "pk-variable-tag__remove";
+				removeButton.setAttribute("aria-label", "Remove");
+				removeButton.draggable = false;
+				removeButton.innerHTML = REMOVE_ICON;
+				removeButton.addEventListener("pointerdown", (event) => {
+					event.preventDefault();
+					event.stopPropagation();
+				});
+				removeButton.addEventListener("click", (event) => {
+					event.preventDefault();
+					event.stopPropagation();
+					deleteNode();
+				});
+				dom.append(removeButton);
+				return;
+			}
+			removeButton?.remove();
+			removeButton = null;
+		};
+		syncRemoveButton(editor.isEditable);
+		if (currentNode.attrs.openOnInsert && editor.isEditable && !openOnInsertHandled) {
+			openOnInsertHandled = true;
+			queueMicrotask(() => {
+				updateAttributes({ openOnInsert: false });
+				openConfigure();
+			});
+		}
+		return {
+			dom,
+			stopEvent: (event) => {
+				const target = event.target;
+				if (!(target instanceof Element)) return false;
+				return Boolean(target.closest(".pk-variable-tag__label") || target.closest(".pk-variable-tag__remove"));
+			},
+			selectNode: () => {
+				dom.classList.add("ProseMirror-selectednode");
+				dom.removeAttribute("draggable");
+			},
+			deselectNode: () => {
+				dom.classList.remove("ProseMirror-selectednode");
+				dom.removeAttribute("draggable");
+			},
+			update(updatedNode) {
+				if (updatedNode.type.name !== "variableTag") return false;
+				currentNode = updatedNode;
+				dom.dataset.label = String(updatedNode.attrs.label ?? "");
+				dom.dataset.variableValue = String(updatedNode.attrs.value ?? "");
+				syncUnresolvedPresentation(updatedNode.attrs);
+				syncRemoveButton(editor.isEditable);
+				return true;
+			}
+		};
+	};
+}
+//#endregion
+//#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.
+*/
+var variableTagStyles = css`
+    .pk-variable-tag {
+        position: relative;
+        display: inline-flex;
+        align-items: stretch;
+        max-width: 100%;
+        margin-inline: 1px;
+        margin-block-start: -3px;
+        padding: 0;
+        border-radius: 2px;
+        background: #5c6bc0;
+        color: #fff;
+        font-size: 11px;
+        font-weight: 400;
+        line-height: 1;
+        white-space: nowrap;
+        vertical-align: middle;
+        overflow: hidden;
+        cursor: default;
+        box-sizing: border-box;
+    }
+
+    /* Unresolved / missing reference — muted grey (not alarm yellow). */
+    .pk-variable-tag--unresolved {
+        background: var(--pk-color-gray-100, #f3f4f6);
+        color: var(--pk-color-gray-600, #4b5563);
+        box-shadow: inset 0 0 0 1px var(--pk-color-gray-300, #d1d5db);
+    }
+
+    .pk-variable-tag--unresolved.ProseMirror-selectednode {
+        box-shadow:
+            inset 0 0 0 1px var(--pk-color-gray-400, #9ca3af),
+            0 0 0 2px rgba(156, 163, 175, 0.45);
+    }
+
+    .pk-variable-tag.ProseMirror-selectednode {
+        outline: none;
+        box-shadow: 0 0 0 2px rgba(123, 140, 232, 0.5);
+    }
+
+    .pk-variable-tag__label {
+        display: inline-flex;
+        align-items: center;
+        max-width: 220px;
+        margin: 0;
+        padding: 4px 5px;
+        border: 0;
+        background: transparent;
+        color: inherit;
+        font: inherit;
+        font-size: inherit;
+        line-height: inherit;
+        text-align: left;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        cursor: pointer;
+        user-select: none;
+    }
+
+    .pk-variable-tag__remove {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        align-self: stretch;
+        margin: 0;
+        padding: 4px 5px 4px 4px;
+        border: 0;
+        background: transparent;
+        color: inherit;
+        cursor: pointer;
+        line-height: 0;
+        appearance: none;
+    }
+
+    .pk-variable-tag__remove svg {
+        display: block;
+        width: 10px;
+        height: 10px;
+        pointer-events: none;
+    }
+`;
+var tiptapProseMirrorStyles = css`
+    @layer pk-component {
+        .ProseMirror {
+            outline: none;
+            min-height: 2rem;
+            padding: 1rem;
+            background: rgb(251, 252, 254);
+            /* Craft CP body text (~gray-700), not gray-900. */
+            color: var(--pk-color-gray-700);
+            font-family: var(--pk-font-family);
+            /* Match pk-input / body (14px). sm (13px) matched field instructions and looked undersized vs v1. */
+            font-size: var(--pk-font-size-base);
+            line-height: 1.5;
+            white-space: pre-wrap;
+            box-sizing: border-box;
+        }
+
+        .ProseMirror p {
+            margin: 0 0 0.5rem;
+        }
+
+        .ProseMirror p:last-child {
+            margin-bottom: 0;
+        }
+
+        .ProseMirror h1 {
+            font-size: 1.25rem;
+            font-weight: 700;
+            margin: 0 0 0.5rem;
+        }
+
+        .ProseMirror h2 {
+            font-size: 1.125rem;
+            font-weight: 600;
+            margin: 0 0 0.5rem;
+        }
+
+        .ProseMirror h3,
+        .ProseMirror h4,
+        .ProseMirror h5,
+        .ProseMirror h6 {
+            font-weight: 600;
+            margin: 0 0 0.5rem;
+        }
+
+        .ProseMirror a {
+            color: var(--pk-color-blue-600);
+            text-decoration: underline;
+            cursor: pointer;
+        }
+
+        .ProseMirror ul,
+        .ProseMirror ol {
+            margin: 0 0 0.5rem;
+            padding-left: 1.25rem;
+        }
+
+        .ProseMirror blockquote {
+            margin: 0 0 0.5rem;
+            padding-left: 0.75rem;
+            border-left: 3px solid var(--pk-color-gray-300);
+            color: var(--pk-color-gray-600);
+        }
+
+        .ProseMirror code {
+            font-family: var(--pk-font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
+            font-size: var(--pk-font-size-mono, 0.9em);
+            line-height: var(--pk-line-height-mono, 1.5);
+            background: var(--pk-color-gray-100);
+            border-radius: 0.2rem;
+            padding: 0.1rem 0.25rem;
+        }
+
+        .ProseMirror pre {
+            margin: 0 0 0.5rem;
+            padding: 0.75rem;
+            background: var(--pk-color-gray-900);
+            color: var(--pk-color-gray-50);
+            border-radius: var(--pk-radius-md);
+            overflow-x: auto;
+            font-family: var(--pk-font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
+            font-size: var(--pk-font-size-mono, 0.9em);
+            line-height: var(--pk-line-height-mono, 1.5);
+        }
+
+        ${variableTagStyles}
+    }
+`;
+/**
+* Single-line TipTap field — same box metrics as `pk-input` .input
+* (14px / line-height 1.4 / padding 6px 8px).
+*
+* ProseMirror always injects `br.ProseMirror-trailingBreak` for the caret.
+* Never `display: none` it — that freezes one-liner docs after the first character.
+* Clip to one line height instead so the break cannot inflate the control.
+*/
+var tiptapInputProseMirrorStyles = css`
+    @layer pk-component {
+        .ProseMirror {
+            outline: none;
+            margin: 0;
+            /* Match stock pk-input padding by default. Hosts can override density via
+             * --pk-tiptap-input-* (light DOM cannot style .ProseMirror in the shadow tree).
+             */
+            padding-block: var(--pk-tiptap-input-padding-block, 6px);
+            padding-inline-start: var(--pk-tiptap-input-padding-inline-start, 8px);
+            padding-inline-end: var(--pk-tiptap-input-padding-inline-end, 8px);
+            /* One-liner clip: padding + control line-height (v1 text-sm), not a fixed shell token. */
+            height: var(--pk-tiptap-input-height, calc(var(--pk-input-control-line-height, 1.25rem) + 12px));
+            max-height: var(--pk-tiptap-input-height, calc(var(--pk-input-control-line-height, 1.25rem) + 12px));
+            background: var(--pk-input-bg);
+            /* Craft CP body / field value text. */
+            color: var(--pk-color-gray-700);
+            font-family: var(--pk-font-family);
+            font-size: var(--pk-tiptap-input-font-size, var(--pk-font-size-base));
+            line-height: var(--pk-tiptap-input-line-height, var(--pk-input-control-line-height, 1.25rem));
+            white-space: nowrap;
+            overflow-x: auto;
+            overflow-y: hidden;
+            box-sizing: border-box;
+            scrollbar-width: none;
+        }
+
+        .ProseMirror::-webkit-scrollbar {
+            display: none;
+        }
+
+        /* OneLinerDocument is inline-only; keep p inline if a schema ever wraps text. */
+        .ProseMirror p {
+            margin: 0;
+            display: inline;
+            line-height: inherit;
+        }
+
+        /* Read-only display: no input padding/height box (v1 skipped chrome when readOnly).
+         * Inherit color/weight so list name links (text-blue-600 font-bold) show through. */
+        :host([readonly]) .ProseMirror {
+            padding-block: 0;
+            padding-inline: 0;
+            height: auto;
+            max-height: none;
+            background: transparent;
+            overflow: visible;
+            white-space: normal;
+            color: inherit;
+            font-weight: inherit;
+            font-size: inherit;
+        }
+
+        ${variableTagStyles}
+    }
+`;
+var tiptapContentProseMirrorStyles = css`
+    @layer pk-component {
+        /* Inherit host color/size so light-DOM wrappers (warning banners, badges)
+           can restyle read-only TipTap without piercing the shadow tree. */
+        .ProseMirror {
+            outline: none;
+            color: inherit;
+            font-family: inherit;
+            font-size: inherit;
+            line-height: inherit;
+        }
+
+        .ProseMirror p {
+            margin: 0;
+        }
+    }
+`;
+//#endregion
+export { createVariableTagDomNodeView as i, tiptapInputProseMirrorStyles as n, tiptapProseMirrorStyles as r, tiptapContentProseMirrorStyles as t };
+
+//# sourceMappingURL=tiptap.styles-BytOpP0H.js.map

package/dist/chunks/tiptap.styles-BytOpP0H.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tiptap.styles-BytOpP0H.js","names":[],"sources":["../../src/components/tiptap/variable-tag-node-view.ts","../../src/components/tiptap/tiptap.styles.ts"],"sourcesContent":["import type { Editor, NodeViewRenderer, NodeViewRendererProps } from '@tiptap/core';\nimport type { Node as ProseMirrorNode } from '@tiptap/pm/model';\nimport { uniqueId } from '../../a11y/focus.js';\n\n/** Match kit v1 VariableTagView chip chrome (indigo + remove). */\nconst REMOVE_ICON = `\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 10 10\" width=\"10\" height=\"10\" aria-hidden=\"true\" focusable=\"false\">\n  <path fill=\"currentColor\" d=\"M2.1 1.4 5 4.3l2.9-2.9.7.7L5.7 5l2.9 2.9-.7.7L5 5.7l-2.9 2.9-.7-.7L4.3 5 1.4 2.1z\"/>\n</svg>\n`.trim();\n\nexport const PK_VARIABLE_TAG_CONFIGURE_EVENT = 'pk-variable-tag-configure';\n\nexport type PkVariableTagConfigureDetail = {\n    editor: Editor;\n    anchor: HTMLElement;\n    attrs: Record<string, unknown>;\n    getPos: () => number | undefined;\n    updateAttributes: (attributes: Record<string, unknown>) => void;\n    deleteNode: () => void;\n};\n\nconst findTiptapHost = (viewDom: HTMLElement): HTMLElement | null => {\n    let node: Node | null = viewDom;\n    while (node) {\n        if (node instanceof HTMLElement && node.localName.startsWith('pk-tiptap')) {\n            return node;\n        }\n\n        node = node.parentNode instanceof ShadowRoot\n            ? node.parentNode.host\n            : node.parentNode;\n    }\n\n    return null;\n};\n\nconst emitConfigure = (\n    editor: Editor,\n    detail: PkVariableTagConfigureDetail,\n) => {\n    const viewDom = editor.view.dom;\n    const host = findTiptapHost(viewDom);\n\n    // Preferred bridge for React/Formie: property callback on <pk-tiptap-*>.\n    const configure = host && 'variableTagConfigure' in host\n        ? (host as HTMLElement & {\n            variableTagConfigure?: ((detail: PkVariableTagConfigureDetail) => void) | null;\n        }).variableTagConfigure\n        : null;\n\n    if (typeof configure === 'function') {\n        configure(detail);\n    }\n\n    // Composed event is the reliable Formie path (document capture listener).\n    const target = host ?? viewDom;\n    target.dispatchEvent(new CustomEvent(PK_VARIABLE_TAG_CONFIGURE_EVENT, {\n        bubbles: true,\n        composed: true,\n        detail,\n    }));\n};\n\n/**\n * DOM NodeViewRendererProps do NOT include React's `deleteNode` / `updateAttributes`\n * (those live on NodeViewProps for ReactNodeViewRenderer only). Build them from\n * editor + getPos — same operations ReactNodeViewRenderer wires for VariableTagView.\n */\nfunction createNodeViewCommands(\n    editor: Editor,\n    getPos: NodeViewRendererProps['getPos'],\n) {\n    const resolvePos = (): number | undefined => {\n        const pos = typeof getPos === 'function' ? getPos() : getPos;\n        return typeof pos === 'number' ? pos : undefined;\n    };\n\n    const deleteNode = () => {\n        const pos = resolvePos();\n        if (typeof pos !== 'number') {\n            return;\n        }\n\n        const live = editor.state.doc.nodeAt(pos);\n        if (!live || live.type.name !== 'variableTag') {\n            return;\n        }\n\n        editor\n            .chain()\n            .focus()\n            .deleteRange({ from: pos, to: pos + live.nodeSize })\n            .run();\n    };\n\n    const updateAttributes = (attributes: Record<string, unknown>) => {\n        const pos = resolvePos();\n        if (typeof pos !== 'number') {\n            return;\n        }\n\n        const live = editor.state.doc.nodeAt(pos);\n        if (!live || live.type.name !== 'variableTag') {\n            return;\n        }\n\n        editor\n            .chain()\n            .command(({ tr, dispatch }) => {\n                if (dispatch) {\n                    tr.setNodeMarkup(pos, undefined, {\n                        ...live.attrs,\n                        ...attributes,\n                    });\n                }\n                return true;\n            })\n            .run();\n    };\n\n    return { deleteNode, updateAttributes, resolvePos };\n}\n\n/**\n * DOM node view for variable tags in vanilla editors.\n * Chip + remove match kit v1; configure UI is opened via `pk-variable-tag-configure`\n * (Formie mounts the edit overlay beside the WC editor).\n */\nexport function createVariableTagDomNodeView(): NodeViewRenderer {\n    return (props) => {\n        const { editor, getPos } = props;\n        const { deleteNode, updateAttributes, resolvePos } = createNodeViewCommands(editor, getPos);\n\n        let currentNode: ProseMirrorNode = props.node;\n\n        const syncUnresolvedPresentation = (attrs: Record<string, unknown>) => {\n            const unresolved = Boolean(attrs.unresolved);\n            const token = String(attrs.value ?? '');\n            const chipLabel = String(attrs.label || attrs.value || '');\n\n            dom.classList.toggle('pk-variable-tag--unresolved', unresolved);\n            if (unresolved) {\n                dom.dataset.unresolved = 'true';\n                // Hover: prompt to fix + keep the raw token for support/debug.\n                dom.title = token\n                    ? `Unknown or missing reference — ${token}`\n                    : 'Unknown or missing reference';\n                label.setAttribute('aria-invalid', 'true');\n            } else {\n                delete dom.dataset.unresolved;\n                dom.removeAttribute('title');\n                label.removeAttribute('aria-invalid');\n            }\n\n            label.textContent = chipLabel;\n        };\n\n        const dom = document.createElement('span');\n        dom.className = 'pk-variable-tag';\n        dom.id = uniqueId('pk-variable-tag');\n        dom.setAttribute('contenteditable', 'false');\n        // Do NOT set draggable=true permanently — HTML5-draggable hosts suppress click,\n        // which kills configure. ProseMirror sets draggable temporarily on mousedown drag.\n        // TipTap React node views use data-drag-handle on a TipTap NodeView class; keep the\n        // attr for parity, but drag itself is PM's selectable+draggable atom behavior.\n        dom.setAttribute('data-drag-handle', '');\n        dom.dataset.label = String(currentNode.attrs.label ?? '');\n        dom.dataset.variableValue = String(currentNode.attrs.value ?? '');\n\n        // Match kit v1 VariableTagView: real button for activate.\n        const label = document.createElement('button');\n        label.type = 'button';\n        label.className = 'pk-variable-tag__label';\n        label.draggable = false;\n        dom.append(label);\n        syncUnresolvedPresentation(currentNode.attrs);\n\n        let removeButton: HTMLButtonElement | null = null;\n        let openOnInsertHandled = false;\n        let openedAt = 0;\n\n        const readLiveAttrs = () => {\n            const pos = resolvePos();\n            if (typeof pos === 'number') {\n                const live = editor.state.doc.nodeAt(pos);\n                if (live?.type.name === 'variableTag') {\n                    return { ...live.attrs };\n                }\n            }\n\n            return { ...currentNode.attrs };\n        };\n\n        const openConfigure = () => {\n            if (!editor.isEditable) {\n                return;\n            }\n\n            // Dedupe repeated emits from nested handlers / openOnInsert.\n            const now = Date.now();\n            if (now - openedAt < 300) {\n                return;\n            }\n            openedAt = now;\n\n            // Strip any HTML5-draggable PM may have armed so configure stays clickable\n            // after this interaction (draggable hosts suppress subsequent clicks).\n            dom.removeAttribute('draggable');\n\n            emitConfigure(editor, {\n                editor,\n                anchor: dom,\n                attrs: readLiveAttrs(),\n                getPos: resolvePos,\n                updateAttributes,\n                deleteNode,\n            });\n        };\n\n        // Open on pointerdown — before ProseMirror can arm HTML5 drag on the atom.\n        label.addEventListener('pointerdown', (event) => {\n            if (event.button !== 0) {\n                return;\n            }\n\n            event.preventDefault();\n            event.stopPropagation();\n            openConfigure();\n        });\n        label.addEventListener('click', (event) => {\n            event.preventDefault();\n            event.stopPropagation();\n            openConfigure();\n        });\n\n        const syncRemoveButton = (editable: boolean) => {\n            if (editable) {\n                if (removeButton) {\n                    return;\n                }\n\n                removeButton = document.createElement('button');\n                removeButton.type = 'button';\n                removeButton.className = 'pk-variable-tag__remove';\n                removeButton.setAttribute('aria-label', 'Remove');\n                removeButton.draggable = false;\n                removeButton.innerHTML = REMOVE_ICON;\n                removeButton.addEventListener('pointerdown', (event) => {\n                    event.preventDefault();\n                    event.stopPropagation();\n                });\n                removeButton.addEventListener('click', (event) => {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    deleteNode();\n                });\n                dom.append(removeButton);\n                return;\n            }\n\n            removeButton?.remove();\n            removeButton = null;\n        };\n\n        syncRemoveButton(editor.isEditable);\n\n        if (currentNode.attrs.openOnInsert && editor.isEditable && !openOnInsertHandled) {\n            openOnInsertHandled = true;\n            queueMicrotask(() => {\n                updateAttributes({ openOnInsert: false });\n                openConfigure();\n            });\n        }\n\n        return {\n            dom,\n            // TipTap React node views stop PM from handling events inside the chip —\n            // that prevents `draggable=true` arming, which otherwise kills configure.\n            // Drag still works via outer NodeSelection + data-drag-handle when the\n            // pointer starts on the chip chrome (not the label/remove controls).\n            stopEvent: (event) => {\n                const target = event.target as Node | null;\n                if (!(target instanceof Element)) {\n                    return false;\n                }\n\n                return Boolean(\n                    target.closest('.pk-variable-tag__label')\n                    || target.closest('.pk-variable-tag__remove'),\n                );\n            },\n            selectNode: () => {\n                dom.classList.add('ProseMirror-selectednode');\n                // Never keep HTML5-draggable while selected — it suppresses clicks.\n                dom.removeAttribute('draggable');\n            },\n            deselectNode: () => {\n                dom.classList.remove('ProseMirror-selectednode');\n                dom.removeAttribute('draggable');\n            },\n            update(updatedNode) {\n                if (updatedNode.type.name !== 'variableTag') {\n                    return false;\n                }\n\n                currentNode = updatedNode;\n                dom.dataset.label = String(updatedNode.attrs.label ?? '');\n                dom.dataset.variableValue = String(updatedNode.attrs.value ?? '');\n                syncUnresolvedPresentation(updatedNode.attrs);\n                syncRemoveButton(editor.isEditable);\n                return true;\n            },\n        };\n    };\n}\n","import { css } from 'lit';\n\n/**\n * Indigo chip matching kit v1 VariableTagView (`bg-[#5C6BC0] text-white rounded-[2px]`).\n * Shared by rich editor + single-line input ProseMirror hosts.\n */\nconst variableTagStyles = css`\n    .pk-variable-tag {\n        position: relative;\n        display: inline-flex;\n        align-items: stretch;\n        max-width: 100%;\n        margin-inline: 1px;\n        margin-block-start: -3px;\n        padding: 0;\n        border-radius: 2px;\n        background: #5c6bc0;\n        color: #fff;\n        font-size: 11px;\n        font-weight: 400;\n        line-height: 1;\n        white-space: nowrap;\n        vertical-align: middle;\n        overflow: hidden;\n        cursor: default;\n        box-sizing: border-box;\n    }\n\n    /* Unresolved / missing reference — muted grey (not alarm yellow). */\n    .pk-variable-tag--unresolved {\n        background: var(--pk-color-gray-100, #f3f4f6);\n        color: var(--pk-color-gray-600, #4b5563);\n        box-shadow: inset 0 0 0 1px var(--pk-color-gray-300, #d1d5db);\n    }\n\n    .pk-variable-tag--unresolved.ProseMirror-selectednode {\n        box-shadow:\n            inset 0 0 0 1px var(--pk-color-gray-400, #9ca3af),\n            0 0 0 2px rgba(156, 163, 175, 0.45);\n    }\n\n    .pk-variable-tag.ProseMirror-selectednode {\n        outline: none;\n        box-shadow: 0 0 0 2px rgba(123, 140, 232, 0.5);\n    }\n\n    .pk-variable-tag__label {\n        display: inline-flex;\n        align-items: center;\n        max-width: 220px;\n        margin: 0;\n        padding: 4px 5px;\n        border: 0;\n        background: transparent;\n        color: inherit;\n        font: inherit;\n        font-size: inherit;\n        line-height: inherit;\n        text-align: left;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        cursor: pointer;\n        user-select: none;\n    }\n\n    .pk-variable-tag__remove {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        align-self: stretch;\n        margin: 0;\n        padding: 4px 5px 4px 4px;\n        border: 0;\n        background: transparent;\n        color: inherit;\n        cursor: pointer;\n        line-height: 0;\n        appearance: none;\n    }\n\n    .pk-variable-tag__remove svg {\n        display: block;\n        width: 10px;\n        height: 10px;\n        pointer-events: none;\n    }\n`;\n\nexport const tiptapProseMirrorStyles = css`\n    @layer pk-component {\n        .ProseMirror {\n            outline: none;\n            min-height: 2rem;\n            padding: 1rem;\n            background: rgb(251, 252, 254);\n            /* Craft CP body text (~gray-700), not gray-900. */\n            color: var(--pk-color-gray-700);\n            font-family: var(--pk-font-family);\n            /* Match pk-input / body (14px). sm (13px) matched field instructions and looked undersized vs v1. */\n            font-size: var(--pk-font-size-base);\n            line-height: 1.5;\n            white-space: pre-wrap;\n            box-sizing: border-box;\n        }\n\n        .ProseMirror p {\n            margin: 0 0 0.5rem;\n        }\n\n        .ProseMirror p:last-child {\n            margin-bottom: 0;\n        }\n\n        .ProseMirror h1 {\n            font-size: 1.25rem;\n            font-weight: 700;\n            margin: 0 0 0.5rem;\n        }\n\n        .ProseMirror h2 {\n            font-size: 1.125rem;\n            font-weight: 600;\n            margin: 0 0 0.5rem;\n        }\n\n        .ProseMirror h3,\n        .ProseMirror h4,\n        .ProseMirror h5,\n        .ProseMirror h6 {\n            font-weight: 600;\n            margin: 0 0 0.5rem;\n        }\n\n        .ProseMirror a {\n            color: var(--pk-color-blue-600);\n            text-decoration: underline;\n            cursor: pointer;\n        }\n\n        .ProseMirror ul,\n        .ProseMirror ol {\n            margin: 0 0 0.5rem;\n            padding-left: 1.25rem;\n        }\n\n        .ProseMirror blockquote {\n            margin: 0 0 0.5rem;\n            padding-left: 0.75rem;\n            border-left: 3px solid var(--pk-color-gray-300);\n            color: var(--pk-color-gray-600);\n        }\n\n        .ProseMirror code {\n            font-family: var(--pk-font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);\n            font-size: var(--pk-font-size-mono, 0.9em);\n            line-height: var(--pk-line-height-mono, 1.5);\n            background: var(--pk-color-gray-100);\n            border-radius: 0.2rem;\n            padding: 0.1rem 0.25rem;\n        }\n\n        .ProseMirror pre {\n            margin: 0 0 0.5rem;\n            padding: 0.75rem;\n            background: var(--pk-color-gray-900);\n            color: var(--pk-color-gray-50);\n            border-radius: var(--pk-radius-md);\n            overflow-x: auto;\n            font-family: var(--pk-font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);\n            font-size: var(--pk-font-size-mono, 0.9em);\n            line-height: var(--pk-line-height-mono, 1.5);\n        }\n\n        ${variableTagStyles}\n    }\n`;\n\n/**\n * Single-line TipTap field — same box metrics as `pk-input` .input\n * (14px / line-height 1.4 / padding 6px 8px).\n *\n * ProseMirror always injects `br.ProseMirror-trailingBreak` for the caret.\n * Never `display: none` it — that freezes one-liner docs after the first character.\n * Clip to one line height instead so the break cannot inflate the control.\n */\nexport const tiptapInputProseMirrorStyles = css`\n    @layer pk-component {\n        .ProseMirror {\n            outline: none;\n            margin: 0;\n            /* Match stock pk-input padding by default. Hosts can override density via\n             * --pk-tiptap-input-* (light DOM cannot style .ProseMirror in the shadow tree).\n             */\n            padding-block: var(--pk-tiptap-input-padding-block, 6px);\n            padding-inline-start: var(--pk-tiptap-input-padding-inline-start, 8px);\n            padding-inline-end: var(--pk-tiptap-input-padding-inline-end, 8px);\n            /* One-liner clip: padding + control line-height (v1 text-sm), not a fixed shell token. */\n            height: var(--pk-tiptap-input-height, calc(var(--pk-input-control-line-height, 1.25rem) + 12px));\n            max-height: var(--pk-tiptap-input-height, calc(var(--pk-input-control-line-height, 1.25rem) + 12px));\n            background: var(--pk-input-bg);\n            /* Craft CP body / field value text. */\n            color: var(--pk-color-gray-700);\n            font-family: var(--pk-font-family);\n            font-size: var(--pk-tiptap-input-font-size, var(--pk-font-size-base));\n            line-height: var(--pk-tiptap-input-line-height, var(--pk-input-control-line-height, 1.25rem));\n            white-space: nowrap;\n            overflow-x: auto;\n            overflow-y: hidden;\n            box-sizing: border-box;\n            scrollbar-width: none;\n        }\n\n        .ProseMirror::-webkit-scrollbar {\n            display: none;\n        }\n\n        /* OneLinerDocument is inline-only; keep p inline if a schema ever wraps text. */\n        .ProseMirror p {\n            margin: 0;\n            display: inline;\n            line-height: inherit;\n        }\n\n        /* Read-only display: no input padding/height box (v1 skipped chrome when readOnly).\n         * Inherit color/weight so list name links (text-blue-600 font-bold) show through. */\n        :host([readonly]) .ProseMirror {\n            padding-block: 0;\n            padding-inline: 0;\n            height: auto;\n            max-height: none;\n            background: transparent;\n            overflow: visible;\n            white-space: normal;\n            color: inherit;\n            font-weight: inherit;\n            font-size: inherit;\n        }\n\n        ${variableTagStyles}\n    }\n`;\n\nexport const tiptapContentProseMirrorStyles = css`\n    @layer pk-component {\n        /* Inherit host color/size so light-DOM wrappers (warning banners, badges)\n           can restyle read-only TipTap without piercing the shadow tree. */\n        .ProseMirror {\n            outline: none;\n            color: inherit;\n            font-family: inherit;\n            font-size: inherit;\n            line-height: inherit;\n        }\n\n        .ProseMirror p {\n            margin: 0;\n        }\n    }\n`;\n"],"mappings":"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"}

package/dist/component-registry.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Canonical tag → loader module path mapping for the autoloader.
+ * Module paths are relative to the directory that contains plugin-kit.loader.js.
+ */
+export declare const COMPONENT_MODULE_PATHS: Record<string, string>;
+/**
+ * Canonical list of every `pk-*` custom element tag.
+ * Single source of truth for FOUCE CSS generation and any tag enumeration.
+ */
+export declare const PK_COMPONENT_TAGS: readonly string[];
+/** Vite loader-build entries: output key → source module. */
+export declare const LOADER_COMPONENT_ENTRIES: Record<string, string>;
+/**
+ * Vite `dist/` build entries for bundler cherry-picking.
+ * Output paths mirror source layout, e.g. `dist/components/button/pk-button.js`.
+ */
+export declare const BUNDLER_COMPONENT_ENTRIES: Record<string, string>;
+/** Tag → bundler dist subpath (relative to package root, no `./` prefix). */
+export declare const BUNDLER_TAG_IMPORT_PATHS: Record<string, string>;
+export type PkComponentTag = keyof typeof BUNDLER_TAG_IMPORT_PATHS;
+/**
+ * Short consumer entries published as `@verbb/plugin-kit-web/components/{key}.js`.
+ * Each module side-effect-registers its family (compound folders register every tag).
+ *
+ * TipTap stays split — importing one surface must not pull the other two.
+ */
+export declare const COMPONENT_FAMILY_ENTRIES: Record<string, string>;
+//# sourceMappingURL=component-registry.d.ts.map

package/dist/component-registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-registry.d.ts","sourceRoot":"","sources":["../src/component-registry.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAoDzD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,SAAS,MAAM,EAAwC,CAAC;AAExF,6DAA6D;AAC7D,eAAO,MAAM,wBAAwB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAqD3D,CAAC;AAOF;;;GAGG;AACH,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAM5D,CAAC;AAEF,6EAA6E;AAC7E,eAAO,MAAM,wBAAwB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAK3D,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,wBAAwB,CAAC;AAEnE;;;;;GAKG;AACH,eAAO,MAAM,wBAAwB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAoC3D,CAAC"}

package/dist/components/button/index.d.ts

@@ -0,0 +1,2 @@
+export { PkButton, type PkButtonSize, type PkButtonVariant } from './pk-button.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,YAAY,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/button/pk-button.d.ts

@@ -0,0 +1,91 @@
+import { PkElement } from '../../base/pk-element.js';
+import { PkSpinnerSize, PkSpinnerTone, PkSpinnerVariant } from '../spinner/pk-spinner.js';
+export type { PkSpinnerSize };
+export type PkButtonVariant = 'default' | 'primary' | 'secondary' | 'outline' | 'transparent' | 'link' | 'dashed' | 'none';
+export type PkButtonSize = 'default' | 'xxs' | 'xs' | 'sm' | 'lg' | 'xl' | 'none';
+/**
+ * Craft-aligned action button.
+ *
+ * @slot - Button label
+ * @slot start - Leading icon or prefix
+ * @slot end - Trailing icon or suffix
+ *
+ * @csspart base - The native button element
+ */
+export declare class PkButton extends PkElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import('lit').CSSResult[];
+    variant: PkButtonVariant;
+    size: PkButtonSize;
+    disabled: boolean;
+    loading: boolean;
+    /**
+     * Override loading spinner size. When unset, derived from `size` via
+     * `getButtonSpinnerSize` — same defaults as v1 Button (xxs/xs → xxs, lg/xl → sm, else xs).
+     * Formie New Form passes `xs` on `size="lg"` so the ring stays size-4 (1rem), not sm (1.5rem).
+     */
+    spinnerSize?: PkSpinnerSize;
+    spinnerVariant?: PkSpinnerVariant;
+    spinnerTone?: PkSpinnerTone;
+    withCaret: boolean;
+    /**
+     * Compact chevron-only trigger for grouped split actions — Craft `.menubtn`.
+     *
+     * Not a variant or size: set this boolean on the disclosure end-cap in a split group.
+     * Hides label/icons and draws a CSS `::after` chevron (0.4375rem, 2px borders).
+     * Inherits `variant`/`size` from sibling buttons; inline padding narrows to 8px.
+     * Do not pass a chevron icon — use `icon` + a start-slot icon for a padless square control.
+     */
+    groupTrigger: boolean;
+    /**
+     * Compact icon density: padless box that hugs the glyph (no square hit target).
+     *
+     * Prefer default icon-only usage for action rows — without this flag, icon-only
+     * buttons are square (`width`/`height` = size height) with the glyph from
+     * `--pk-btn-icon-size`. Use `icon` for dense × / ⋯ in cells.
+     * For one-off dimensions use `size="none"` and set `--pk-btn-*` on the host.
+     */
+    icon: boolean;
+    href?: string;
+    target?: string;
+    rel?: string;
+    name?: string;
+    value?: string;
+    title: string;
+    type: 'button' | 'submit' | 'reset';
+    /**
+     * HTML form owner id — same as native `<button form="…">`.
+     * Needed when the submit control lives outside the `<form>` (e.g. dialog footer).
+     */
+    form?: string;
+    private hasDefaultSlotContent;
+    private hasStartSlotContent;
+    private hasEndSlotContent;
+    private defaultSlotChanged;
+    private iconSlotChanged;
+    private startSlotChanged;
+    private endSlotChanged;
+    private buttonClasses;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Resolve the light-DOM form for submit/reset.
+     * Prefer `form` id (dialog footer submitters), then ancestor `<form>`.
+     * Never target Craft’s `#main` shell.
+     */
+    private resolveAssociatedForm;
+    /**
+     * Shadow inner `<button type="submit|reset">` is not a form owner for an
+     * ancestor light-DOM `<form>` — bridge click → `requestSubmit` / `reset`.
+     * Skip Craft’s `#main` shell form (same guard as implicit Enter submit).
+     */
+    private handleHostClick;
+    render(): import('lit-html').TemplateResult<1>;
+    private renderInner;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pk-button': PkButton;
+    }
+}
+//# sourceMappingURL=pk-button.d.ts.map

package/dist/components/button/pk-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-button.d.ts","sourceRoot":"","sources":["../../../src/components/button/pk-button.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAErD,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE/F,YAAY,EAAE,aAAa,EAAE,CAAC;AAC9B,OAAO,0BAA0B,CAAC;AAGlC,MAAM,MAAM,eAAe,GACrB,SAAS,GACT,SAAS,GACT,WAAW,GACX,SAAS,GACT,aAAa,GACb,MAAM,GACN,QAAQ,GACR,MAAM,CAAC;AAEb,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAIlF;;;;;;;;GAQG;AACH,qBACa,QAAS,SAAQ,SAAS;IACnC,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAEF,OAAgB,MAAM,4BAAkB;IAGxC,OAAO,EAAE,eAAe,CAAa;IAGrC,IAAI,EAAE,YAAY,CAAa;IAG/B,QAAQ,UAAS;IAGjB,OAAO,UAAS;IAEhB;;;;OAIG;IAEH,WAAW,CAAC,EAAE,aAAa,CAAC;IAG5B,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAGlC,WAAW,CAAC,EAAE,aAAa,CAAC;IAG5B,SAAS,UAAS;IAElB;;;;;;;OAOG;IAEH,YAAY,UAAS;IAErB;;;;;;;OAOG;IAEH,IAAI,UAAS;IAGb,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,GAAG,CAAC,EAAE,MAAM,CAAC;IAGb,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,KAAK,SAAM;IAGX,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE/C;;;OAGG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,OAAO,CAAC,qBAAqB,CAAS;IAGtC,OAAO,CAAC,mBAAmB,CAAS;IAGpC,OAAO,CAAC,iBAAiB,CAAS;IAElC,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,eAAe;IAiBvB,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,cAAc,CAEpB;IAEF,OAAO,CAAC,aAAa;IAUZ,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAKrC;;;;OAIG;IACH,OAAO,CAAC,qBAAqB;IAoB7B;;;;OAIG;IACH,OAAO,CAAC,eAAe,CA8BrB;IAEO,MAAM;IAsCf,OAAO,CAAC,WAAW;CA4CtB;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,WAAW,EAAE,QAAQ,CAAC;KACzB;CACJ"}

package/dist/components/button/pk-button.js

@@ -0,0 +1,2 @@
+import { t as PkButton } from "../../chunks/pk-button-Cilu5WAT.js";
+export { PkButton };

package/dist/components/button/pk-button.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const pkButtonStyles: import('lit').CSSResult[];
+//# sourceMappingURL=pk-button.styles.d.ts.map

package/dist/components/button/pk-button.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/button/pk-button.styles.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,cAAc,2BA0lB1B,CAAC"}