@verbb/plugin-kit-web 2.0.0

package/dist/chunks/pk-time-picker-DbW_hMs2.js

@@ -0,0 +1,228 @@
+import { t as icons_exports } from "./icons-BR8JcQj2.js";
+import { t as __decorate } from "./decorate-W02hmVTt.js";
+import { t as createIconElement } from "./render-Dvc3MHQR.js";
+import { n as pkSelectStyles, t as PkSelect } from "./pk-select-B17rV6BR.js";
+import { css } from "lit";
+import { customElement } from "lit/decorators.js";
+//#region src/utils/time-options.ts
+var timeOptionsCache = null;
+function resolveTimepickerOptions() {
+	const craft = globalThis.Craft?.timepicker;
+	return {
+		timeFormat: craft?.timeFormat || "g:i A",
+		lang: {
+			AM: craft?.lang?.AM || "AM",
+			PM: craft?.lang?.PM || "PM"
+		},
+		locale: craft?.locale || document.documentElement.lang || "en-US"
+	};
+}
+/** Generate time options in 30-minute increments — mirrors React `generateTimeOptions`. */
+function generateTimeOptions() {
+	if (timeOptionsCache) return timeOptionsCache;
+	const options = [];
+	const { timeFormat, lang, locale } = resolveTimepickerOptions();
+	for (let hour = 0; hour < 24; hour += 1) for (let minute = 0; minute < 60; minute += 30) {
+		const timeString = `${hour.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`;
+		let displayTime;
+		if (timeFormat === "g:i A") {
+			let displayHour = hour;
+			if (hour === 0) displayHour = 12;
+			else if (hour > 12) displayHour = hour - 12;
+			const ampm = hour >= 12 ? lang.PM : lang.AM;
+			displayTime = `${displayHour}:${minute.toString().padStart(2, "0")} ${ampm}`;
+		} else if (timeFormat === "G:i") displayTime = timeString;
+		else displayTime = (/* @__PURE__ */ new Date(`2000-01-01T${timeString}:00`)).toLocaleTimeString(locale, {
+			hour: "numeric",
+			minute: "2-digit",
+			hour12: timeFormat.includes("A")
+		});
+		options.push({
+			value: timeString,
+			label: displayTime
+		});
+	}
+	timeOptionsCache = options;
+	return options;
+}
+//#endregion
+//#region src/components/time-picker/pk-time-picker.styles.ts
+var pkTimePickerStyles = css`
+    @layer pk-component {
+        :host {
+            display: inline-block;
+            width: 8.125rem;
+            min-width: 8.125rem;
+            color: var(--pk-color-gray-700);
+            --pk-select-trigger-border-width: 1px;
+            --pk-select-item-min-height: 2.125rem;
+            --pk-select-item-padding-block: 0;
+            --pk-select-item-padding-inline: 10px;
+            --pk-select-item-font-size: var(--pk-font-size-base);
+        }
+
+        .control {
+            justify-content: flex-start;
+            gap: 0.5rem;
+            width: 100%;
+            height: 2.125rem;
+            min-height: 2.125rem;
+            border-color: var(--pk-color-slate-400) !important;
+            border-radius: var(--pk-radius-lg) !important;
+            background: transparent !important;
+            background-color: transparent !important;
+            text-align: left;
+            font-weight: 400;
+            line-height: 1.2;
+            cursor: default;
+        }
+
+        :host([open]) .control {
+            background: var(--pk-color-slate-150, var(--pk-color-slate-100)) !important;
+            background-color: var(--pk-color-slate-150, var(--pk-color-slate-100)) !important;
+            border-color: var(--pk-color-slate-400) !important;
+            box-shadow: none;
+        }
+
+        :host(:not([disabled])) .control:hover:not(:disabled) {
+            background: var(--pk-color-slate-50) !important;
+            background-color: var(--pk-color-slate-50) !important;
+        }
+
+        :host(:not([disabled])[open]) .control:hover:not(:disabled),
+        :host(:not([disabled])) .control:active:not(:disabled) {
+            background: var(--pk-color-slate-150, var(--pk-color-slate-100)) !important;
+            background-color: var(--pk-color-slate-150, var(--pk-color-slate-100)) !important;
+        }
+
+        :host(:not([invalid]):not(:state(user-invalid))) .control:focus-visible,
+        :host(:not([invalid]):not(:state(user-invalid))[data-state='focus-visible']) .control {
+            border-color: var(--pk-color-sky-600) !important;
+            box-shadow: var(--pk-input-focus-shadow);
+        }
+
+        :host(:not([invalid]):not(:state(user-invalid))[open]) .control:focus-visible,
+        :host(:not([invalid]):not(:state(user-invalid))[open][data-state='focus-visible']) .control {
+            border-color: var(--pk-color-slate-400) !important;
+            box-shadow: none;
+        }
+
+        :host([invalid]) .control,
+        :host(:state(user-invalid)) .control {
+            border-color: var(--pk-color-rose-600) !important;
+        }
+
+        :host([invalid]) .control:focus-visible,
+        :host([invalid][data-state='focus-visible']) .control,
+        :host(:state(user-invalid)) .control:focus-visible,
+        :host(:state(user-invalid)[data-state='focus-visible']) .control {
+            box-shadow: var(--pk-input-invalid-focus-shadow);
+        }
+
+        .control-start {
+            color: var(--pk-color-gray-400);
+            pointer-events: none;
+        }
+
+        .control-start svg {
+            display: block;
+            width: 14px;
+            height: 14px;
+        }
+
+        .value {
+            flex: 1;
+            line-height: 1.2;
+            color: inherit;
+        }
+
+        .value.is-placeholder {
+            color: var(--pk-color-gray-400);
+        }
+
+        .icon {
+            margin-inline-start: auto;
+            color: var(--pk-color-gray-600);
+        }
+
+        .panel {
+            min-width: 8rem;
+            max-height: 15rem;
+        }
+
+        /* Editable-table cells: flush fill — must live here so !important beats the
+         * standalone trigger chrome (external ::part cannot override it). */
+        :host(.cell-pk-control) {
+            display: block;
+            width: 100%;
+            min-width: 0;
+            height: 100%;
+            --pk-select-trigger-border-width: 0;
+            --pk-select-item-min-height: 100%;
+            --pk-select-item-padding-block: 0;
+        }
+
+        :host(.cell-pk-control) .control {
+            width: 100%;
+            height: 100% !important;
+            min-height: 100% !important;
+            border: 0 !important;
+            border-radius: 0 !important;
+            background: transparent !important;
+            background-color: transparent !important;
+        }
+
+        :host(.cell-pk-control:not([disabled])) .control:hover:not(:disabled),
+        :host(.cell-pk-control[open]) .control,
+        :host(.cell-pk-control:not([disabled])[open]) .control:hover:not(:disabled),
+        :host(.cell-pk-control:not([disabled])) .control:active:not(:disabled) {
+            border-radius: 0 !important;
+        }
+
+        :host(.cell-pk-control:not([invalid]):not(:state(user-invalid))) .control:focus-visible,
+        :host(.cell-pk-control:not([invalid]):not(:state(user-invalid))[data-state='focus-visible']) .control {
+            border: 0 !important;
+            box-shadow: inset 0 0 0 1px var(--pk-color-gray-200, #e5e7eb);
+        }
+    }
+`;
+//#endregion
+//#region src/components/time-picker/pk-time-picker.ts
+var PkTimePicker = class PkTimePicker extends PkSelect {
+	constructor(..._args) {
+		super(..._args);
+		this.optionsSeeded = false;
+	}
+	static {
+		this.styles = [...pkSelectStyles, pkTimePickerStyles];
+	}
+	connectedCallback() {
+		this.ensureTimeOptions();
+		this.ensureClockIcon();
+		super.connectedCallback();
+	}
+	ensureTimeOptions() {
+		if (this.optionsSeeded || this.querySelector("pk-option")) {
+			this.optionsSeeded = true;
+			return;
+		}
+		for (const option of generateTimeOptions()) {
+			const element = document.createElement("pk-option");
+			element.value = option.value;
+			element.textContent = option.label;
+			this.append(element);
+		}
+		this.optionsSeeded = true;
+	}
+	ensureClockIcon() {
+		if (this.querySelector("[slot=\"start\"]")) return;
+		const icon = createIconElement(icons_exports.clock);
+		icon.setAttribute("slot", "start");
+		this.prepend(icon);
+	}
+};
+PkTimePicker = __decorate([customElement("pk-time-picker")], PkTimePicker);
+//#endregion
+export { PkTimePicker as t };
+
+//# sourceMappingURL=pk-time-picker-DbW_hMs2.js.map

package/dist/chunks/pk-time-picker-DbW_hMs2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-time-picker-DbW_hMs2.js","names":[],"sources":["../../src/utils/time-options.ts","../../src/components/time-picker/pk-time-picker.styles.ts","../../src/components/time-picker/pk-time-picker.ts"],"sourcesContent":["export type TimeOption = {\n    value: string;\n    label: string;\n};\n\nexport type TimepickerFormatOptions = {\n    timeFormat?: string;\n    lang?: {\n        AM?: string;\n        PM?: string;\n    };\n    locale?: string;\n};\n\nlet timeOptionsCache: TimeOption[] | null = null;\n\nfunction resolveTimepickerOptions(): Required<Pick<TimepickerFormatOptions, 'timeFormat' | 'lang'>> & { locale: string } {\n    const craft = (globalThis as typeof globalThis & {\n        Craft?: { timepicker?: TimepickerFormatOptions };\n    }).Craft?.timepicker;\n\n    return {\n        timeFormat: craft?.timeFormat || 'g:i A',\n        lang: {\n            AM: craft?.lang?.AM || 'AM',\n            PM: craft?.lang?.PM || 'PM',\n        },\n        locale: craft?.locale || document.documentElement.lang || 'en-US',\n    };\n}\n\n/** Generate time options in 30-minute increments — mirrors React `generateTimeOptions`. */\nexport function generateTimeOptions(): TimeOption[] {\n    if (timeOptionsCache) {\n        return timeOptionsCache;\n    }\n\n    const options: TimeOption[] = [];\n    const { timeFormat, lang, locale } = resolveTimepickerOptions();\n\n    for (let hour = 0; hour < 24; hour += 1) {\n        for (let minute = 0; minute < 60; minute += 30) {\n            const timeString = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;\n\n            let displayTime: string;\n\n            if (timeFormat === 'g:i A') {\n                let displayHour = hour;\n\n                if (hour === 0) {\n                    displayHour = 12;\n                } else if (hour > 12) {\n                    displayHour = hour - 12;\n                }\n\n                const ampm = hour >= 12 ? lang.PM : lang.AM;\n                displayTime = `${displayHour}:${minute.toString().padStart(2, '0')} ${ampm}`;\n            } else if (timeFormat === 'G:i') {\n                displayTime = timeString;\n            } else {\n                displayTime = new Date(`2000-01-01T${timeString}:00`).toLocaleTimeString(locale, {\n                    hour: 'numeric',\n                    minute: '2-digit',\n                    hour12: timeFormat.includes('A'),\n                });\n            }\n\n            options.push({\n                value: timeString,\n                label: displayTime,\n            });\n        }\n    }\n\n    timeOptionsCache = options;\n\n    return options;\n}\n\nexport function clearTimeOptionsCache(): void {\n    timeOptionsCache = null;\n}\n","import { css } from 'lit';\n\nexport const pkTimePickerStyles = css`\n    @layer pk-component {\n        :host {\n            display: inline-block;\n            width: 8.125rem;\n            min-width: 8.125rem;\n            color: var(--pk-color-gray-700);\n            --pk-select-trigger-border-width: 1px;\n            --pk-select-item-min-height: 2.125rem;\n            --pk-select-item-padding-block: 0;\n            --pk-select-item-padding-inline: 10px;\n            --pk-select-item-font-size: var(--pk-font-size-base);\n        }\n\n        .control {\n            justify-content: flex-start;\n            gap: 0.5rem;\n            width: 100%;\n            height: 2.125rem;\n            min-height: 2.125rem;\n            border-color: var(--pk-color-slate-400) !important;\n            border-radius: var(--pk-radius-lg) !important;\n            background: transparent !important;\n            background-color: transparent !important;\n            text-align: left;\n            font-weight: 400;\n            line-height: 1.2;\n            cursor: default;\n        }\n\n        :host([open]) .control {\n            background: var(--pk-color-slate-150, var(--pk-color-slate-100)) !important;\n            background-color: var(--pk-color-slate-150, var(--pk-color-slate-100)) !important;\n            border-color: var(--pk-color-slate-400) !important;\n            box-shadow: none;\n        }\n\n        :host(:not([disabled])) .control:hover:not(:disabled) {\n            background: var(--pk-color-slate-50) !important;\n            background-color: var(--pk-color-slate-50) !important;\n        }\n\n        :host(:not([disabled])[open]) .control:hover:not(:disabled),\n        :host(:not([disabled])) .control:active:not(:disabled) {\n            background: var(--pk-color-slate-150, var(--pk-color-slate-100)) !important;\n            background-color: var(--pk-color-slate-150, var(--pk-color-slate-100)) !important;\n        }\n\n        :host(:not([invalid]):not(:state(user-invalid))) .control:focus-visible,\n        :host(:not([invalid]):not(:state(user-invalid))[data-state='focus-visible']) .control {\n            border-color: var(--pk-color-sky-600) !important;\n            box-shadow: var(--pk-input-focus-shadow);\n        }\n\n        :host(:not([invalid]):not(:state(user-invalid))[open]) .control:focus-visible,\n        :host(:not([invalid]):not(:state(user-invalid))[open][data-state='focus-visible']) .control {\n            border-color: var(--pk-color-slate-400) !important;\n            box-shadow: none;\n        }\n\n        :host([invalid]) .control,\n        :host(:state(user-invalid)) .control {\n            border-color: var(--pk-color-rose-600) !important;\n        }\n\n        :host([invalid]) .control:focus-visible,\n        :host([invalid][data-state='focus-visible']) .control,\n        :host(:state(user-invalid)) .control:focus-visible,\n        :host(:state(user-invalid)[data-state='focus-visible']) .control {\n            box-shadow: var(--pk-input-invalid-focus-shadow);\n        }\n\n        .control-start {\n            color: var(--pk-color-gray-400);\n            pointer-events: none;\n        }\n\n        .control-start svg {\n            display: block;\n            width: 14px;\n            height: 14px;\n        }\n\n        .value {\n            flex: 1;\n            line-height: 1.2;\n            color: inherit;\n        }\n\n        .value.is-placeholder {\n            color: var(--pk-color-gray-400);\n        }\n\n        .icon {\n            margin-inline-start: auto;\n            color: var(--pk-color-gray-600);\n        }\n\n        .panel {\n            min-width: 8rem;\n            max-height: 15rem;\n        }\n\n        /* Editable-table cells: flush fill — must live here so !important beats the\n         * standalone trigger chrome (external ::part cannot override it). */\n        :host(.cell-pk-control) {\n            display: block;\n            width: 100%;\n            min-width: 0;\n            height: 100%;\n            --pk-select-trigger-border-width: 0;\n            --pk-select-item-min-height: 100%;\n            --pk-select-item-padding-block: 0;\n        }\n\n        :host(.cell-pk-control) .control {\n            width: 100%;\n            height: 100% !important;\n            min-height: 100% !important;\n            border: 0 !important;\n            border-radius: 0 !important;\n            background: transparent !important;\n            background-color: transparent !important;\n        }\n\n        :host(.cell-pk-control:not([disabled])) .control:hover:not(:disabled),\n        :host(.cell-pk-control[open]) .control,\n        :host(.cell-pk-control:not([disabled])[open]) .control:hover:not(:disabled),\n        :host(.cell-pk-control:not([disabled])) .control:active:not(:disabled) {\n            border-radius: 0 !important;\n        }\n\n        :host(.cell-pk-control:not([invalid]):not(:state(user-invalid))) .control:focus-visible,\n        :host(.cell-pk-control:not([invalid]):not(:state(user-invalid))[data-state='focus-visible']) .control {\n            border: 0 !important;\n            box-shadow: inset 0 0 0 1px var(--pk-color-gray-200, #e5e7eb);\n        }\n    }\n`;\n","import { customElement } from 'lit/decorators.js';\n\nimport { createIconElement, clock } from '../../icons/index.js';\nimport { PkSelect } from '../select/pk-select.js';\n// Time picker seeds light-DOM options at connect — register the CE so getLabel() works.\nimport '../select/pk-option.js';\nimport { pkSelectStyles } from '../select/pk-select.styles.js';\nimport { generateTimeOptions } from '../../utils/time-options.js';\nimport { pkTimePickerStyles } from './pk-time-picker.styles.js';\n\n/**\n * Time picker — select wrapper with 30-minute increments and a clock icon.\n * Mirrors React `TimePicker` (not  `pk-time-input`).\n *\n * @slot start - Overrides the default clock icon\n * @slot - Additional `pk-option` items append after the generated list\n *\n * @event input\n * @event change\n * @event pk-change - `detail.value`\n */\n@customElement('pk-time-picker')\nexport class PkTimePicker extends PkSelect {\n    // Flatten — `pkSelectStyles` is already a CSSResult[].\n    static override styles = [...pkSelectStyles, pkTimePickerStyles];\n\n    private optionsSeeded = false;\n\n    override connectedCallback(): void {\n        this.ensureTimeOptions();\n        this.ensureClockIcon();\n        super.connectedCallback();\n    }\n\n    private ensureTimeOptions(): void {\n        if (this.optionsSeeded || this.querySelector('pk-option')) {\n            this.optionsSeeded = true;\n            return;\n        }\n\n        for (const option of generateTimeOptions()) {\n            const element = document.createElement('pk-option');\n            element.value = option.value;\n            element.textContent = option.label;\n            this.append(element);\n        }\n\n        this.optionsSeeded = true;\n    }\n\n    private ensureClockIcon(): void {\n        if (this.querySelector('[slot=\"start\"]')) {\n            return;\n        }\n\n        const icon = createIconElement(clock);\n        icon.setAttribute('slot', 'start');\n        this.prepend(icon);\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-time-picker': PkTimePicker;\n    }\n}\n"],"mappings":";;;;;;;AAcA,IAAI,mBAAwC;AAE5C,SAAS,2BAAgH;CACrH,MAAM,QAAS,WAEZ,OAAO;AAEV,QAAO;EACH,YAAY,OAAO,cAAc;EACjC,MAAM;GACF,IAAI,OAAO,MAAM,MAAM;GACvB,IAAI,OAAO,MAAM,MAAM;GAC1B;EACD,QAAQ,OAAO,UAAU,SAAS,gBAAgB,QAAQ;EAC7D;;;AAIL,SAAgB,sBAAoC;AAChD,KAAI,iBACA,QAAO;CAGX,MAAM,UAAwB,EAAE;CAChC,MAAM,EAAE,YAAY,MAAM,WAAW,0BAA0B;AAE/D,MAAK,IAAI,OAAO,GAAG,OAAO,IAAI,QAAQ,EAClC,MAAK,IAAI,SAAS,GAAG,SAAS,IAAI,UAAU,IAAI;EAC5C,MAAM,aAAa,GAAG,KAAK,UAAU,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,OAAO,UAAU,CAAC,SAAS,GAAG,IAAI;EAE5F,IAAI;AAEJ,MAAI,eAAe,SAAS;GACxB,IAAI,cAAc;AAElB,OAAI,SAAS,EACT,eAAc;YACP,OAAO,GACd,eAAc,OAAO;GAGzB,MAAM,OAAO,QAAQ,KAAK,KAAK,KAAK,KAAK;AACzC,iBAAc,GAAG,YAAY,GAAG,OAAO,UAAU,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG;aAC/D,eAAe,MACtB,eAAc;MAEd,gCAAc,IAAI,KAAK,cAAc,WAAW,KAAK,EAAC,mBAAmB,QAAQ;GAC7E,MAAM;GACN,QAAQ;GACR,QAAQ,WAAW,SAAS,IAAI;GACnC,CAAC;AAGN,UAAQ,KAAK;GACT,OAAO;GACP,OAAO;GACV,CAAC;;AAIV,oBAAmB;AAEnB,QAAO;;;;AC1EX,IAAa,qBAAqB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACoB9B,IAAA,eAAA,MAAM,qBAAqB,SAAS;;;uBAIf;;;gBAFC,CAAC,GAAG,gBAAgB,mBAAmB;;CAIhE,oBAAmC;AAC/B,OAAK,mBAAmB;AACxB,OAAK,iBAAiB;AACtB,QAAM,mBAAmB;;CAG7B,oBAAkC;AAC9B,MAAI,KAAK,iBAAiB,KAAK,cAAc,YAAY,EAAE;AACvD,QAAK,gBAAgB;AACrB;;AAGJ,OAAK,MAAM,UAAU,qBAAqB,EAAE;GACxC,MAAM,UAAU,SAAS,cAAc,YAAY;AACnD,WAAQ,QAAQ,OAAO;AACvB,WAAQ,cAAc,OAAO;AAC7B,QAAK,OAAO,QAAQ;;AAGxB,OAAK,gBAAgB;;CAGzB,kBAAgC;AAC5B,MAAI,KAAK,cAAc,mBAAiB,CACpC;EAGJ,MAAM,OAAO,kBAAkB,cAAA,MAAM;AACrC,OAAK,aAAa,QAAQ,QAAQ;AAClC,OAAK,QAAQ,KAAK;;;2BApCzB,cAAc,iBAAiB,CAAA,EAAA,aAAA"}

package/dist/chunks/pk-tiptap-content-DAtNbJYC.js

@@ -0,0 +1,76 @@
+import { n as PkElement, t as __decorate } from "./decorate-W02hmVTt.js";
+import { i as createVariableTagDomNodeView, t as tiptapContentProseMirrorStyles } from "./tiptap.styles-BytOpP0H.js";
+import { css, html } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { Editor } from "@tiptap/core";
+import { createTiptapExtensions, valueToContent } from "@verbb/plugin-kit-tiptap-core";
+//#region src/components/tiptap/pk-tiptap-content.styles.ts
+var pkTiptapContentStyles = css`
+    @layer pk-component {
+        :host {
+            display: block;
+            width: 100%;
+            /* Inherit light-DOM color/size (warning banners, badges). Tokens override when set. */
+            color: var(--pk-tiptap-content-color, inherit);
+            font-family: var(--pk-font-family);
+            font-size: var(--pk-tiptap-content-font-size, inherit);
+            line-height: var(--pk-tiptap-content-line-height, 1.4);
+        }
+    }
+`;
+//#endregion
+//#region src/components/tiptap/pk-tiptap-content.ts
+function serializeContent(doc) {
+	if (!doc) return "[]";
+	if (Array.isArray(doc.content)) return JSON.stringify(doc.content);
+	return JSON.stringify(doc);
+}
+var PkTiptapContent = class PkTiptapContent extends PkElement {
+	constructor(..._args) {
+		super(..._args);
+		this.editor = null;
+		this.value = "";
+	}
+	static {
+		this.styles = [pkTiptapContentStyles, tiptapContentProseMirrorStyles];
+	}
+	disconnectedCallback() {
+		this.editor?.destroy();
+		this.editor = null;
+		super.disconnectedCallback();
+	}
+	updated(changed) {
+		if (changed.has("value") && this.editor) this.syncContent();
+		super.updated(changed);
+	}
+	firstUpdated() {
+		this.mountEditor();
+	}
+	mountEditor() {
+		this.editor = new Editor({
+			element: this.editorMount,
+			extensions: createTiptapExtensions({ variableTagNodeView: createVariableTagDomNodeView() }),
+			content: valueToContent(this.value),
+			editable: false
+		});
+	}
+	syncContent() {
+		if (!this.editor) return;
+		const doc = valueToContent(this.value) ?? {
+			type: "doc",
+			content: []
+		};
+		if (serializeContent(valueToContent(this.value)) === serializeContent(this.editor.getJSON())) return;
+		this.editor.commands.setContent(doc);
+	}
+	render() {
+		return html`<div class="editor-mount" part="content"></div>`;
+	}
+};
+__decorate([query(".editor-mount")], PkTiptapContent.prototype, "editorMount", void 0);
+__decorate([property({ attribute: "value" })], PkTiptapContent.prototype, "value", void 0);
+PkTiptapContent = __decorate([customElement("pk-tiptap-content")], PkTiptapContent);
+//#endregion
+export { PkTiptapContent as t };
+
+//# sourceMappingURL=pk-tiptap-content-DAtNbJYC.js.map

package/dist/chunks/pk-tiptap-content-DAtNbJYC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-tiptap-content-DAtNbJYC.js","names":[],"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 'lit/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            }),\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;AACtE,KAAI,CAAC,IACD,QAAO;AAGX,KAAI,MAAM,QAAQ,IAAI,QAAQ,CAC1B,QAAO,KAAK,UAAU,IAAI,QAAQ;AAGtC,QAAO,KAAK,UAAU,IAAI;;AASvB,IAAA,kBAAA,MAAM,wBAAwB,UAAU;;;gBAMX;eAGxB;;;gBARiB,CAAC,uBAAuB,+BAA+B;;CAUhF,uBAAsC;AAClC,OAAK,QAAQ,SAAS;AACtB,OAAK,SAAS;AACd,QAAM,sBAAsB;;CAGhC,QAAiB,SAA+B;AAC5C,MAAI,QAAQ,IAAI,QAAQ,IAAI,KAAK,OAC7B,MAAK,aAAa;AAGtB,QAAM,QAAQ,QAAQ;;CAG1B,eAA8B;AAC1B,OAAK,aAAa;;CAGtB,cAA4B;AACxB,OAAK,SAAS,IAAI,OAAO;GACrB,SAAS,KAAK;GACd,YAAY,uBAAuB,EAC/B,qBAAqB,8BAA8B,EACtD,CAAC;GACF,SAAS,eAAe,KAAK,MAAM;GACnC,UAAU;GACb,CAAC;;CAGN,cAA4B;AACxB,MAAI,CAAC,KAAK,OACN;EAGJ,MAAM,MAAM,eAAe,KAAK,MAAM,IAAI;GAAE,MAAM;GAAO,SAAS,EAAE;GAAE;AAItE,MAHiB,iBAAiB,eAAe,KAAK,MAAM,CAGxD,KAFY,iBAAiB,KAAK,OAAO,SAAS,CAErC,CACb;AAGJ,OAAK,OAAO,SAAS,WAAW,IAAI;;CAGxC,SAAkB;AACd,SAAO,IAAI;;;YAtDd,MAAM,gBAAgB,CAAA,EAAA,gBAAA,WAAA,eAAA,KAAA,EAAA;YAKtB,SAAS,EAAE,WAAW,SAAS,CAAC,CAAA,EAAA,gBAAA,WAAA,SAAA,KAAA,EAAA;8BATpC,cAAc,oBAAoB,CAAA,EAAA,gBAAA"}