@threadlabs/looma 0.26.11 → 0.26.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.26.11",
+  "version": "0.26.13",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",
@@ -57,7 +57,12 @@
     "./tokens.css": "./tokens.css",
     "./theme-light.css": "./theme-light.css",
     "./theme-dark.css": "./theme-dark.css",
-    "./theme-high-contrast.css": "./theme-high-contrast.css"
+    "./theme-high-contrast.css": "./theme-high-contrast.css",
+    "./vue/editor/compact": {
+      "types": "./vue/editor/compact/index.d.ts",
+      "import": "./vue/editor/compact/index.js",
+      "default": "./vue/editor/compact/index.js"
+    }
   },
   "files": [
     "dist/",

package/vue/components.css

@@ -9957,6 +9957,45 @@ html[data-ui-input-modality="touch"]
 [data-component~="ui-tree-item"][hidden][data-v-8f2cc947] {
   display: none;
 }
+/* Short-form field primitive: the same field tokens as Textarea. */
+.looma-compact-editor {
+  min-inline-size: 0;
+  box-sizing: border-box;
+  min-block-size: calc(4.5em + 2 * var(--ui-border-width));
+  border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
+  border-radius: var(--ui-field-radius, var(--ui-radius-md));
+  background: var(--ui-control-surface, var(--ui-surface-elevated));
+  color: var(--ui-text-primary);
+  box-shadow: var(--ui-control-inset);
+}
+.looma-compact-editor:focus-within {
+  outline: var(--ui-focus-ring-width, 2px) solid var(--ui-focus-ring, var(--ui-accent-solid));
+  outline-offset: var(--ui-focus-ring-offset, 2px);
+}
+.looma-compact-editor .ProseMirror {
+  box-sizing: border-box;
+  min-block-size: 4.5em;
+  max-block-size: 12em;
+  overflow-y: auto;
+  padding: var(--ui-space-2) var(--ui-space-3);
+  outline: none;
+}
+.looma-compact-editor, .looma-compact-content {
+  font-size: var(--ui-font-size-sm);
+  font-weight: var(--ui-font-normal, 400);
+  line-height: var(--ui-line-height-md);
+  overflow-wrap: anywhere;
+}
+.looma-compact-editor p, .looma-compact-content p { margin: 0; }
+.looma-compact-editor p + p, .looma-compact-content p + p { margin-block-start: var(--ui-space-2); }
+.looma-compact-editor strong, .looma-compact-content strong { font-weight: var(--ui-font-bold); }
+.looma-compact-editor code, .looma-compact-content code {
+  font-family: var(--ui-font-mono);
+  padding-inline: var(--ui-space-1);
+  border-radius: var(--ui-radius-sm);
+  background: var(--ui-surface-muted);
+}
+@media (pointer: coarse) { .looma-compact-editor { font-size: var(--ui-font-size-md); } }
 /* The editor surface owns its renderer canvas. Existing hooks retain their defaults. */
 [data-component~="ui-editor-surface"] .ProseMirror {
   min-height: var(--ui-editor-content-min-height, var(--_ui-editor-content-min-height, 300px));

package/vue/editor/compact/extensions.d.ts

@@ -0,0 +1,3 @@
+import type { AnyExtension } from "@tiptap/core";
+/** Minimal short-form schema; additional consumer extensions are opt-in. */
+export declare function getCompactEditorExtensions(): AnyExtension[];

package/vue/editor/compact/index.d.ts

@@ -0,0 +1,84 @@
+import { type PropType } from "vue";
+import type { AnyExtension, JSONContent } from "@tiptap/core";
+import { Editor } from "@tiptap/vue-3";
+import "./compact-editor.css";
+export { getCompactEditorExtensions } from "./extensions.js";
+/**
+ * Toolbar-free editing for short rich text. Owns editor lifecycle and standard
+ * formatting/history shortcuts; the host owns persistence and optional extensions.
+ * Importing this entry is SSR-safe and does not load the full document editor.
+ * @ownership The component owns the editor; callers own content and extensions.
+ * @lifecycle Mount creates one editor; unmount destroys it and prop watchers.
+ * @failure Persistence failures are host-owned; the controlled document can restore input.
+ */
+export declare const LoomaCompactEditor: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: PropType<JSONContent>;
+        default: () => JSONContent;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    id: {
+        type: StringConstructor;
+        default: string;
+    };
+    editable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    extensions: {
+        type: PropType<AnyExtension[]>;
+        default: () => never[];
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (_value: JSONContent) => true;
+    ready: (_editor: Editor) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: PropType<JSONContent>;
+        default: () => JSONContent;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    id: {
+        type: StringConstructor;
+        default: string;
+    };
+    editable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    extensions: {
+        type: PropType<AnyExtension[]>;
+        default: () => never[];
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((_value: JSONContent) => any) | undefined;
+    onReady?: ((_editor: Editor) => any) | undefined;
+}>, {
+    label: string;
+    id: string;
+    modelValue: JSONContent;
+    editable: boolean;
+    extensions: AnyExtension[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** Renders basic compact JSON as escaped Vue nodes, including during SSR. */
+export declare const LoomaCompactContent: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    content: {
+        type: PropType<JSONContent>;
+        required: true;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    content: {
+        type: PropType<JSONContent>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/vue/editor/compact/index.js

@@ -0,0 +1,517 @@
+import { defineComponent, h, onBeforeUnmount, onMounted, shallowRef, watch } from "vue";
+import { Extension, Mark, Node, markInputRule, markPasteRule, mergeAttributes } from "@tiptap/core";
+import { Editor, EditorContent } from "@tiptap/vue-3";
+import { history, redo, undo } from "@tiptap/pm/history";
+//#region ../../node_modules/.pnpm/@tiptap+extension-document@2.27.2_@tiptap+core@2.27.2_@tiptap+pm@2.27.2_/node_modules/@tiptap/extension-document/dist/index.js
+/**
+* The default document node which represents the top level node of the editor.
+* @see https://tiptap.dev/api/nodes/document
+*/
+var Document = Node.create({
+	name: "doc",
+	topNode: true,
+	content: "block+"
+});
+//#endregion
+//#region ../../node_modules/.pnpm/@tiptap+extension-paragraph@2.27.2_@tiptap+core@2.27.2_@tiptap+pm@2.27.2_/node_modules/@tiptap/extension-paragraph/dist/index.js
+/**
+* This extension allows you to create paragraphs.
+* @see https://www.tiptap.dev/api/nodes/paragraph
+*/
+var Paragraph = Node.create({
+	name: "paragraph",
+	priority: 1e3,
+	addOptions() {
+		return { HTMLAttributes: {} };
+	},
+	group: "block",
+	content: "inline*",
+	parseHTML() {
+		return [{ tag: "p" }];
+	},
+	renderHTML({ HTMLAttributes }) {
+		return [
+			"p",
+			mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+			0
+		];
+	},
+	addCommands() {
+		return { setParagraph: () => ({ commands }) => {
+			return commands.setNode(this.name);
+		} };
+	},
+	addKeyboardShortcuts() {
+		return { "Mod-Alt-0": () => this.editor.commands.setParagraph() };
+	}
+});
+//#endregion
+//#region ../../node_modules/.pnpm/@tiptap+extension-text@2.27.2_@tiptap+core@2.27.2_@tiptap+pm@2.27.2_/node_modules/@tiptap/extension-text/dist/index.js
+/**
+* This extension allows you to create text nodes.
+* @see https://www.tiptap.dev/api/nodes/text
+*/
+var Text = Node.create({
+	name: "text",
+	group: "inline"
+});
+//#endregion
+//#region ../../node_modules/.pnpm/@tiptap+extension-bold@2.27.2_@tiptap+core@2.27.2_@tiptap+pm@2.27.2_/node_modules/@tiptap/extension-bold/dist/index.js
+/**
+* Matches bold text via `**` as input.
+*/
+var starInputRegex$1 = /(?:^|\s)(\*\*(?!\s+\*\*)((?:[^*]+))\*\*(?!\s+\*\*))$/;
+/**
+* Matches bold text via `**` while pasting.
+*/
+var starPasteRegex$1 = /(?:^|\s)(\*\*(?!\s+\*\*)((?:[^*]+))\*\*(?!\s+\*\*))/g;
+/**
+* Matches bold text via `__` as input.
+*/
+var underscoreInputRegex$1 = /(?:^|\s)(__(?!\s+__)((?:[^_]+))__(?!\s+__))$/;
+/**
+* Matches bold text via `__` while pasting.
+*/
+var underscorePasteRegex$1 = /(?:^|\s)(__(?!\s+__)((?:[^_]+))__(?!\s+__))/g;
+/**
+* This extension allows you to mark text as bold.
+* @see https://tiptap.dev/api/marks/bold
+*/
+var Bold = Mark.create({
+	name: "bold",
+	addOptions() {
+		return { HTMLAttributes: {} };
+	},
+	parseHTML() {
+		return [
+			{ tag: "strong" },
+			{
+				tag: "b",
+				getAttrs: (node) => node.style.fontWeight !== "normal" && null
+			},
+			{
+				style: "font-weight=400",
+				clearMark: (mark) => mark.type.name === this.name
+			},
+			{
+				style: "font-weight",
+				getAttrs: (value) => /^(bold(er)?|[5-9]\d{2,})$/.test(value) && null
+			}
+		];
+	},
+	renderHTML({ HTMLAttributes }) {
+		return [
+			"strong",
+			mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+			0
+		];
+	},
+	addCommands() {
+		return {
+			setBold: () => ({ commands }) => {
+				return commands.setMark(this.name);
+			},
+			toggleBold: () => ({ commands }) => {
+				return commands.toggleMark(this.name);
+			},
+			unsetBold: () => ({ commands }) => {
+				return commands.unsetMark(this.name);
+			}
+		};
+	},
+	addKeyboardShortcuts() {
+		return {
+			"Mod-b": () => this.editor.commands.toggleBold(),
+			"Mod-B": () => this.editor.commands.toggleBold()
+		};
+	},
+	addInputRules() {
+		return [markInputRule({
+			find: starInputRegex$1,
+			type: this.type
+		}), markInputRule({
+			find: underscoreInputRegex$1,
+			type: this.type
+		})];
+	},
+	addPasteRules() {
+		return [markPasteRule({
+			find: starPasteRegex$1,
+			type: this.type
+		}), markPasteRule({
+			find: underscorePasteRegex$1,
+			type: this.type
+		})];
+	}
+});
+//#endregion
+//#region ../../node_modules/.pnpm/@tiptap+extension-italic@2.27.2_@tiptap+core@2.27.2_@tiptap+pm@2.27.2_/node_modules/@tiptap/extension-italic/dist/index.js
+/**
+* Matches an italic to a *italic* on input.
+*/
+var starInputRegex = /(?:^|\s)(\*(?!\s+\*)((?:[^*]+))\*(?!\s+\*))$/;
+/**
+* Matches an italic to a *italic* on paste.
+*/
+var starPasteRegex = /(?:^|\s)(\*(?!\s+\*)((?:[^*]+))\*(?!\s+\*))/g;
+/**
+* Matches an italic to a _italic_ on input.
+*/
+var underscoreInputRegex = /(?:^|\s)(_(?!\s+_)((?:[^_]+))_(?!\s+_))$/;
+/**
+* Matches an italic to a _italic_ on paste.
+*/
+var underscorePasteRegex = /(?:^|\s)(_(?!\s+_)((?:[^_]+))_(?!\s+_))/g;
+/**
+* This extension allows you to create italic text.
+* @see https://www.tiptap.dev/api/marks/italic
+*/
+var Italic = Mark.create({
+	name: "italic",
+	addOptions() {
+		return { HTMLAttributes: {} };
+	},
+	parseHTML() {
+		return [
+			{ tag: "em" },
+			{
+				tag: "i",
+				getAttrs: (node) => node.style.fontStyle !== "normal" && null
+			},
+			{
+				style: "font-style=normal",
+				clearMark: (mark) => mark.type.name === this.name
+			},
+			{ style: "font-style=italic" }
+		];
+	},
+	renderHTML({ HTMLAttributes }) {
+		return [
+			"em",
+			mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+			0
+		];
+	},
+	addCommands() {
+		return {
+			setItalic: () => ({ commands }) => {
+				return commands.setMark(this.name);
+			},
+			toggleItalic: () => ({ commands }) => {
+				return commands.toggleMark(this.name);
+			},
+			unsetItalic: () => ({ commands }) => {
+				return commands.unsetMark(this.name);
+			}
+		};
+	},
+	addKeyboardShortcuts() {
+		return {
+			"Mod-i": () => this.editor.commands.toggleItalic(),
+			"Mod-I": () => this.editor.commands.toggleItalic()
+		};
+	},
+	addInputRules() {
+		return [markInputRule({
+			find: starInputRegex,
+			type: this.type
+		}), markInputRule({
+			find: underscoreInputRegex,
+			type: this.type
+		})];
+	},
+	addPasteRules() {
+		return [markPasteRule({
+			find: starPasteRegex,
+			type: this.type
+		}), markPasteRule({
+			find: underscorePasteRegex,
+			type: this.type
+		})];
+	}
+});
+//#endregion
+//#region ../../node_modules/.pnpm/@tiptap+extension-code@2.27.2_@tiptap+core@2.27.2_@tiptap+pm@2.27.2_/node_modules/@tiptap/extension-code/dist/index.js
+/**
+* Regular expressions to match inline code blocks enclosed in backticks.
+*  It matches:
+*     - An opening backtick, followed by
+*     - Any text that doesn't include a backtick (captured for marking), followed by
+*     - A closing backtick.
+*  This ensures that any text between backticks is formatted as code,
+*  regardless of the surrounding characters (exception being another backtick).
+*/
+var inputRegex = /(^|[^`])`([^`]+)`(?!`)/;
+/**
+* Matches inline code while pasting.
+*/
+var pasteRegex = /(^|[^`])`([^`]+)`(?!`)/g;
+/**
+* This extension allows you to mark text as inline code.
+* @see https://tiptap.dev/api/marks/code
+*/
+var Code = Mark.create({
+	name: "code",
+	addOptions() {
+		return { HTMLAttributes: {} };
+	},
+	excludes: "_",
+	code: true,
+	exitable: true,
+	parseHTML() {
+		return [{ tag: "code" }];
+	},
+	renderHTML({ HTMLAttributes }) {
+		return [
+			"code",
+			mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+			0
+		];
+	},
+	addCommands() {
+		return {
+			setCode: () => ({ commands }) => {
+				return commands.setMark(this.name);
+			},
+			toggleCode: () => ({ commands }) => {
+				return commands.toggleMark(this.name);
+			},
+			unsetCode: () => ({ commands }) => {
+				return commands.unsetMark(this.name);
+			}
+		};
+	},
+	addKeyboardShortcuts() {
+		return { "Mod-e": () => this.editor.commands.toggleCode() };
+	},
+	addInputRules() {
+		return [markInputRule({
+			find: inputRegex,
+			type: this.type
+		})];
+	},
+	addPasteRules() {
+		return [markPasteRule({
+			find: pasteRegex,
+			type: this.type
+		})];
+	}
+});
+//#endregion
+//#region ../../node_modules/.pnpm/@tiptap+extension-hard-break@2.27.2_@tiptap+core@2.27.2_@tiptap+pm@2.27.2_/node_modules/@tiptap/extension-hard-break/dist/index.js
+/**
+* This extension allows you to insert hard breaks.
+* @see https://www.tiptap.dev/api/nodes/hard-break
+*/
+var HardBreak = Node.create({
+	name: "hardBreak",
+	addOptions() {
+		return {
+			keepMarks: true,
+			HTMLAttributes: {}
+		};
+	},
+	inline: true,
+	group: "inline",
+	selectable: false,
+	linebreakReplacement: true,
+	parseHTML() {
+		return [{ tag: "br" }];
+	},
+	renderHTML({ HTMLAttributes }) {
+		return ["br", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
+	},
+	renderText() {
+		return "\n";
+	},
+	addCommands() {
+		return { setHardBreak: () => ({ commands, chain, state, editor }) => {
+			return commands.first([() => commands.exitCode(), () => commands.command(() => {
+				const { selection, storedMarks } = state;
+				if (selection.$from.parent.type.spec.isolating) return false;
+				const { keepMarks } = this.options;
+				const { splittableMarks } = editor.extensionManager;
+				const marks = storedMarks || selection.$to.parentOffset && selection.$from.marks();
+				return chain().insertContent({ type: this.name }).command(({ tr, dispatch }) => {
+					if (dispatch && marks && keepMarks) {
+						const filteredMarks = marks.filter((mark) => splittableMarks.includes(mark.type.name));
+						tr.ensureMarks(filteredMarks);
+					}
+					return true;
+				}).run();
+			})]);
+		} };
+	},
+	addKeyboardShortcuts() {
+		return {
+			"Mod-Enter": () => this.editor.commands.setHardBreak(),
+			"Shift-Enter": () => this.editor.commands.setHardBreak()
+		};
+	}
+});
+//#endregion
+//#region ../../node_modules/.pnpm/@tiptap+extension-history@2.27.2_@tiptap+core@2.27.2_@tiptap+pm@2.27.2__@tiptap+pm@2.27.2/node_modules/@tiptap/extension-history/dist/index.js
+/**
+* This extension allows you to undo and redo recent changes.
+* @see https://www.tiptap.dev/api/extensions/history
+*
+* **Important**: If the `@tiptap/extension-collaboration` package is used, make sure to remove
+* the `history` extension, as it is not compatible with the `collaboration` extension.
+*
+* `@tiptap/extension-collaboration` uses its own history implementation.
+*/
+var History = Extension.create({
+	name: "history",
+	addOptions() {
+		return {
+			depth: 100,
+			newGroupDelay: 500
+		};
+	},
+	addCommands() {
+		return {
+			undo: () => ({ state, dispatch }) => {
+				return undo(state, dispatch);
+			},
+			redo: () => ({ state, dispatch }) => {
+				return redo(state, dispatch);
+			}
+		};
+	},
+	addProseMirrorPlugins() {
+		return [history(this.options)];
+	},
+	addKeyboardShortcuts() {
+		return {
+			"Mod-z": () => this.editor.commands.undo(),
+			"Shift-Mod-z": () => this.editor.commands.redo(),
+			"Mod-y": () => this.editor.commands.redo(),
+			"Mod-я": () => this.editor.commands.undo(),
+			"Shift-Mod-я": () => this.editor.commands.redo()
+		};
+	}
+});
+//#endregion
+//#region src/vue/editor/compact/extensions.ts
+/** Minimal short-form schema; additional consumer extensions are opt-in. */
+function getCompactEditorExtensions() {
+	return [
+		Document,
+		Paragraph,
+		Text,
+		Bold,
+		Italic,
+		Code,
+		HardBreak,
+		History
+	];
+}
+//#endregion
+//#region src/vue/editor/compact/index.ts
+var emptyDocument = () => ({
+	type: "doc",
+	content: [{ type: "paragraph" }]
+});
+/**
+* Toolbar-free editing for short rich text. Owns editor lifecycle and standard
+* formatting/history shortcuts; the host owns persistence and optional extensions.
+* Importing this entry is SSR-safe and does not load the full document editor.
+* @ownership The component owns the editor; callers own content and extensions.
+* @lifecycle Mount creates one editor; unmount destroys it and prop watchers.
+* @failure Persistence failures are host-owned; the controlled document can restore input.
+*/
+var LoomaCompactEditor = defineComponent({
+	name: "LoomaCompactEditor",
+	inheritAttrs: false,
+	props: {
+		modelValue: {
+			type: Object,
+			default: emptyDocument
+		},
+		label: {
+			type: String,
+			default: "Message"
+		},
+		id: {
+			type: String,
+			default: ""
+		},
+		editable: {
+			type: Boolean,
+			default: true
+		},
+		extensions: {
+			type: Array,
+			default: () => []
+		}
+	},
+	emits: {
+		"update:modelValue": (_value) => true,
+		ready: (_editor) => true
+	},
+	setup(props, { attrs, emit, expose }) {
+		const editor = shallowRef();
+		onMounted(() => {
+			editor.value = new Editor({
+				extensions: [...getCompactEditorExtensions(), ...props.extensions],
+				content: props.modelValue,
+				editable: props.editable,
+				editorProps: { attributes: () => ({
+					role: "textbox",
+					"aria-multiline": "true",
+					"aria-label": props.label,
+					"aria-readonly": String(!props.editable),
+					id: props.id
+				}) },
+				onUpdate: ({ editor }) => emit("update:modelValue", editor.getJSON())
+			});
+			emit("ready", editor.value);
+		});
+		watch(() => props.modelValue, (value) => {
+			if (editor.value && JSON.stringify(value) !== JSON.stringify(editor.value.getJSON())) editor.value.commands.setContent(value, false);
+		}, { deep: true });
+		watch(() => [
+			props.id,
+			props.label,
+			props.editable
+		], () => editor.value?.setEditable(props.editable, false));
+		onBeforeUnmount(() => editor.value?.destroy());
+		expose({
+			focus: () => editor.value?.commands.focus(),
+			getEditor: () => editor.value
+		});
+		return () => h("div", {
+			...attrs,
+			id: void 0,
+			class: ["looma-compact-editor", attrs.class]
+		}, [editor.value ? h(EditorContent, { editor: editor.value }) : null]);
+	}
+});
+function renderNode(node) {
+	if (node.type === "hardBreak") return h("br");
+	if (node.type === "text") {
+		let text = node.text ?? "";
+		for (const mark of node.marks ?? []) {
+			const tag = {
+				bold: "strong",
+				italic: "em",
+				code: "code"
+			}[mark.type];
+			if (tag) text = h(tag, {}, [text]);
+		}
+		return text;
+	}
+	const children = (node.content ?? []).map(renderNode);
+	return node.type === "paragraph" ? h("p", {}, children) : children;
+}
+/** Renders basic compact JSON as escaped Vue nodes, including during SSR. */
+var LoomaCompactContent = defineComponent({
+	name: "LoomaCompactContent",
+	props: { content: {
+		type: Object,
+		required: true
+	} },
+	setup: (props) => () => h("div", { class: "looma-compact-content" }, [renderNode(props.content)])
+});
+//#endregion
+export { LoomaCompactContent, LoomaCompactEditor, getCompactEditorExtensions };