@threadlabs/looma 0.31.5 → 0.32.1

package/editor/chunks/extensions.js

@@ -1,5 +1,5 @@
 import { n as TABLE_CELL_BACKGROUND_PRESETS } from "./table-backgrounds.js";
-import { _ as parseLoomaAttributes, b as splitLoomaFrontmatter, c as LOOMA_CONTAINER_NAMES, d as formatLoomaAttributes, f as loomaCodeFence, g as normalizeLoomaChipTone, h as normalizeLoomaCalloutTone, i as referenceDisplay, l as applyLoomaCodeNotation, m as loomaHeadingSlug, n as LoomaReferencePresentation, p as loomaContainerMarker, r as getReferenceDisplay, s as LOOMA_CHIP_TONES, t as LoomaReference, u as assignLoomaHeadingIds, v as parseLoomaFenceInfo, y as readLoomaAttributes } from "./reference-display.js";
+import { _ as normalizeLoomaChipTone, b as readLoomaAttributes, c as LOOMA_CONTAINER_NAMES, d as assignLoomaHeadingIds, f as formatLoomaAttributes, g as normalizeLoomaCalloutTone, h as loomaHeadingSlug, i as referenceDisplay, l as LOOMA_MENTION_HANDLE, m as loomaContainerMarker, n as LoomaReferencePresentation, p as loomaCodeFence, r as getReferenceDisplay, s as LOOMA_CHIP_TONES, t as LoomaReference, u as applyLoomaCodeNotation, v as parseLoomaAttributes, x as splitLoomaFrontmatter, y as parseLoomaFenceInfo } from "./reference-display.js";
 import { Extension, InputRule, Mark, Node as Node$1, PasteRule, callOrReturn, canInsertNode, combineTransactionSteps, escapeForRegEx, findChildren, findChildrenInRange, findParentNodeClosestToPos, getAttributes, getChangedRanges, getExtensionField, getMarksBetween, getText, getTextSerializersFromSchema, isNodeEmpty, isNodeSelection, markInputRule, markPasteRule, mergeAttributes, nodeInputRule, textInputRule, textblockTypeInputRule, wrappingInputRule } from "@tiptap/core";
 import { NodeSelection, Plugin, PluginKey, Selection, TextSelection } from "@tiptap/pm/state";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
@@ -10072,7 +10072,7 @@ function taskLists(state) {
 function directive(state, silent) {
 	const { src, pos } = state;
 	if (src.charCodeAt(pos) !== 58) return false;
-	const name = /^:(chip|mention)\[/.exec(src.slice(pos, pos + 10))?.[1];
+	const name = /^:(chip)\[/.exec(src.slice(pos, pos + 10))?.[1];
 	if (!name) return false;
 	let label = "";
 	let index = pos + name.length + 2;
@@ -10086,7 +10086,6 @@ function directive(state, silent) {
 		end: index + 1
 	};
 	if (!read || read.end > state.posMax) return false;
-	if (name === "mention" && typeof read.attributes.id !== "string") return false;
 	if (!silent) {
 		const token = state.push(`looma_${name}`, "span", 0);
 		token.meta = {
@@ -10097,6 +10096,37 @@ function directive(state, silent) {
 	state.pos = read.end;
 	return true;
 }
+function mention(state, silent) {
+	const { src, pos } = state;
+	if (src.charCodeAt(pos) !== 64 || pos > 0 && !/\s/u.test(src[pos - 1])) return false;
+	let index = pos + 1;
+	let label = "";
+	if (src[index] === "[") {
+		for (index++; index < state.posMax && src[index] !== "]"; index++) {
+			if (src[index] === "\\" && index + 1 < state.posMax) index++;
+			label += src[index];
+		}
+		if (src[index] !== "]" || !label) return false;
+		index++;
+	} else {
+		label = LOOMA_MENTION_HANDLE.exec(src.slice(index, state.posMax))?.[0] ?? "";
+		if (!label) return false;
+		index += label.length;
+	}
+	let ref = src[index] === "#" ? LOOMA_MENTION_HANDLE.exec(src.slice(index + 1, state.posMax))?.[0] : void 0;
+	if (ref) index += ref.length + 1;
+	const read = src[index] === "{" ? readLoomaAttributes(src, index) : null;
+	if (read && read.end <= state.posMax) {
+		if (typeof read.attributes.ref === "string") ref ??= read.attributes.ref;
+		index = read.end;
+	}
+	if (!silent) state.push("looma_mention", "span", 0).meta = {
+		label,
+		ref
+	};
+	state.pos = index;
+	return true;
+}
 function inlineText(token) {
 	return (token?.children ?? []).map((child) => child.type === "image" ? inlineText(child) : child.content).join("");
 }
@@ -10318,6 +10348,7 @@ function loomaMarkdown$1(md, { codeNotation = "apply" } = {}) {
 		"list"
 	] });
 	md.inline.ruler.before("link", "looma_directive", directive);
+	md.inline.ruler.before("link", "looma_mention", mention);
 	md.inline.ruler.before("link", "looma_footnote_ref", footnoteReference);
 	md.core.ruler.after("block", "looma_task_lists", taskLists);
 	md.core.ruler.before("inline", "looma_alerts", alerts);
@@ -10367,9 +10398,8 @@ function loomaMarkdown$1(md, { codeNotation = "apply" } = {}) {
 		return `<span data-looma-chip="" data-label="${escape(label)}" data-color="${tone}"${label ? "" : " data-placeholder=\"\""}>${escape(label)}</span>`;
 	};
 	rules.looma_mention = (tokens, index) => {
-		const { label, attributes } = tokens[index].meta;
-		const id = String(attributes.id);
-		return `<span data-type="mention" class="looma-mention" data-id="${escape(id)}" data-label="${escape(label || id)}">@${escape(label || id)}</span>`;
+		const { label, ref } = tokens[index].meta;
+		return `<span data-type="mention" class="looma-mention"${ref === void 0 ? "" : ` data-id="${escape(ref)}"`} data-label="${escape(label)}">@${escape(label)}</span>`;
 	};
 	const code = (content, info) => {
 		const { language, meta } = parseLoomaFenceInfo(info);
@@ -10525,8 +10555,9 @@ var NODES = {
 		state.write(`:chip[${label(String(node.attrs.label ?? ""))}]${formatLoomaAttributes({ tone: tone !== "neutral" ? tone : null })}`);
 	},
 	mention: (state, node) => {
-		const id = String(node.attrs.id ?? "");
-		state.write(`:mention[${label(String(node.attrs.label ?? id))}]${formatLoomaAttributes({ id }, { hashId: false })}`);
+		const id = node.attrs.id == null ? "" : String(node.attrs.id);
+		const reference = !id ? "" : LOOMA_MENTION_HANDLE.exec(id)?.[0] === id ? `#${id}` : formatLoomaAttributes({ ref: id });
+		state.write(`@[${label(String(node.attrs.label || id))}]${reference}`);
 	},
 	loomaReference: (state, node) => {
 		const wrapper = document.createElement("span");
@@ -11955,7 +11986,7 @@ var CALLOUT_COMMANDS = [
 * @ownership Returned command objects belong to the caller and are recreated
 * per call so one editor cannot mutate another editor's command inventory.
 */
-function getDefaultSlashCommands(onOpenImagePicker, onOpenChipEditor, onOpenLinkEditor) {
+function getDefaultSlashCommands(onOpenImagePicker, onOpenChipEditor, onOpenLinkEditor, onOpenFilePicker) {
 	return [
 		{
 			title: "Text",
@@ -12178,6 +12209,21 @@ function getDefaultSlashCommands(onOpenImagePicker, onOpenChipEditor, onOpenLink
 				onOpenLinkEditor();
 			}
 		}] : [],
+		...onOpenFilePicker ? [{
+			title: "File attachment",
+			description: "Attach a file",
+			icon: "paperclip",
+			keywords: [
+				"file",
+				"attachment",
+				"upload",
+				"pdf"
+			],
+			command: ({ editor, range }) => {
+				editor.chain().focus().deleteRange(range).run();
+				onOpenFilePicker();
+			}
+		}] : [],
 		...onOpenImagePicker ? [{
 			title: "Image",
 			description: "Upload an image",
@@ -12197,6 +12243,7 @@ function getDefaultSlashCommands(onOpenImagePicker, onOpenChipEditor, onOpenLink
 		...command,
 		id: command.title.toLowerCase().replaceAll(" ", "-"),
 		group: CALLOUT_COMMANDS.some((callout) => callout.title === command.title) ? "Callouts" : [
+			"File attachment",
 			"Chip",
 			"Inline code",
 			"Link",

package/editor/chunks/reference-display.js

@@ -44,6 +44,11 @@ function normalizeLoomaChipTone(value) {
 	return LOOMA_CHIP_TONES.includes(value) ? value : "neutral";
 }
 /**
+* A mention handle, as `@handle` and the `#ref` of `@[Label]#ref` spell it: a letter, number or
+* underscore, then letters, marks, numbers, underscores and hyphens.
+*/
+var LOOMA_MENTION_HANDLE = /^[\p{L}\p{N}_][\p{L}\p{M}\p{N}_-]*/u;
+/**
 * Names that open a `:::` container, matched without regard to case. A container with any other
 * name is ordinary text.
 */
@@ -445,4 +450,4 @@ var LoomaReferencePresentation = Extension.create({
 	}
 });
 //#endregion
-export { parseLoomaAttributes as _, setReferenceDisplay as a, splitLoomaFrontmatter as b, LOOMA_CONTAINER_NAMES as c, formatLoomaAttributes as d, loomaCodeFence as f, normalizeLoomaChipTone as g, normalizeLoomaCalloutTone as h, referenceDisplay as i, applyLoomaCodeNotation as l, loomaHeadingSlug as m, LoomaReferencePresentation as n, LOOMA_CALLOUT_TONES as o, loomaContainerMarker as p, getReferenceDisplay as r, LOOMA_CHIP_TONES as s, LoomaReference as t, assignLoomaHeadingIds as u, parseLoomaFenceInfo as v, readLoomaAttributes as y };
+export { normalizeLoomaChipTone as _, setReferenceDisplay as a, readLoomaAttributes as b, LOOMA_CONTAINER_NAMES as c, assignLoomaHeadingIds as d, formatLoomaAttributes as f, normalizeLoomaCalloutTone as g, loomaHeadingSlug as h, referenceDisplay as i, LOOMA_MENTION_HANDLE as l, loomaContainerMarker as m, LoomaReferencePresentation as n, LOOMA_CALLOUT_TONES as o, loomaCodeFence as p, getReferenceDisplay as r, LOOMA_CHIP_TONES as s, LoomaReference as t, applyLoomaCodeNotation as u, parseLoomaAttributes as v, splitLoomaFrontmatter as x, parseLoomaFenceInfo as y };

package/editor/expressmark.js

@@ -1,4 +1,4 @@
-import { m as loomaHeadingSlug, o as LOOMA_CALLOUT_TONES, r as getReferenceDisplay, s as LOOMA_CHIP_TONES } from "./chunks/reference-display.js";
+import { h as loomaHeadingSlug, o as LOOMA_CALLOUT_TONES, r as getReferenceDisplay, s as LOOMA_CHIP_TONES } from "./chunks/reference-display.js";
 import { parse, stringify } from "expressmark";
 //#region src/editor/expressmark.ts
 /**

package/editor/extensions/slash-command.d.ts

@@ -79,7 +79,7 @@ declare module "@tiptap/core" {
  * @ownership Returned command objects belong to the caller and are recreated
  * per call so one editor cannot mutate another editor's command inventory.
  */
-export declare function getDefaultSlashCommands(onOpenImagePicker?: () => void, onOpenChipEditor?: (editor: Editor, position: number) => void, onOpenLinkEditor?: () => void): LoomaSlashCommand[];
+export declare function getDefaultSlashCommands(onOpenImagePicker?: () => void, onOpenChipEditor?: (editor: Editor, position: number) => void, onOpenLinkEditor?: () => void, onOpenFilePicker?: () => void): LoomaSlashCommand[];
 /**
  * Ranks exact names/aliases before partial matches, then matching categories.
  * Other ties retain inventory order.

package/editor/file-uploads.d.ts

@@ -0,0 +1,31 @@
+import type { Editor } from '@tiptap/core';
+/** A retained file, represented as a readable ordinary link in the document. */
+export interface LoomaFileDescriptor {
+    href: string;
+    name: string;
+    size: number;
+    contentType: string;
+}
+/** The application retains the bytes and returns their authorized download URL. */
+export type LoomaFileUpload = (file: File, init: {
+    signal: AbortSignal;
+    progress: (loaded: number, total: number) => void;
+}) => PromiseLike<LoomaFileDescriptor | null> | LoomaFileDescriptor | null;
+/** File insertion status, independent of the document and its undo history. */
+export interface LoomaFileUploadsState {
+    uploading: boolean;
+    progress: {
+        loaded: number;
+        total: number;
+    } | null;
+}
+/** Captures the caret before asynchronous transport; later transactions map that caret. */
+export declare function createFileUploads(options: {
+    editor: Editor;
+    upload: () => LoomaFileUpload | undefined;
+    onError: (error: unknown, file: File) => void;
+    onState?: (state: LoomaFileUploadsState) => void;
+}): {
+    cancel(): void;
+    insert(file: File): Promise<void>;
+};

package/editor/icons.d.ts

@@ -38,6 +38,7 @@ export declare const LOOMA_ICONS: {
     highlighter: IconNode;
     history: IconNode;
     image: IconNode;
+    paperclip: IconNode;
     info: IconNode;
     italic: IconNode;
     'layout-dashboard': IconNode;

package/editor/index.js

@@ -2,7 +2,7 @@ import { n as TABLE_CELL_BACKGROUND_PRESETS, t as TABLE_CELL_BACKGROUND_OPTIONS
 import { n as resolveTableCellAt, t as measureTableOverlayGeometry } from "./chunks/ui.js";
 import { $ as LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS, A as filterLoomaMentionItems, B as LOOMA_FOOTNOTE_LABEL, C as loomaMarkdownToHtml, D as createLoomaMentionExtension, E as LoomaMentionSuggestionPluginKey, F as LoomaTableOfContents, G as LoomaFigcaption, H as LoomaFootnoteReference, I as getTableOfContentsEntries, J as revealLoomaExpandAt, K as LoomaFigure, L as normalizeTableOfContentsConfig, M as LoomaImage, N as normalizeImageDimension, O as DEFAULT_MENTION_RESULT_LIMIT, P as normalizeImagePlacement, Q as LoomaCallout, R as LoomaTab, S as loomaMarkdownFromDoc, T as siteRelativeHref, U as LoomaFootnotes, V as LoomaFootnote, W as findLoomaFootnote, X as LoomaChip, Y as LOOMA_CHIP_COLORS, Z as normalizeLoomaChipColor, _ as getActiveTableCellAlignment, a as getActiveTableUiState, b as setActiveTableCellBackground, c as insertTableAtRange, d as LoomaTableKit, et as LOOMA_ACTIVE_BLOCK_CLASS, f as getDefaultEditorExtensions, g as LoomaTableHeader, h as LoomaTableCell, i as getDefaultSlashCommands, j as normalizeMentionResultLimit, k as MAX_MENTION_RESULT_LIMIT, l as normalizeActiveTableColumnWidths, m as LoomaTable, n as createLoomaSlashCommandExtension, nt as LoomaActiveBlock, o as handleTableAction, p as getLoomaTableExtensions, q as LoomaExpand, r as filterLoomaSlashCommands, rt as LoomaActiveBlockPluginKey, s as handleTableOverlayAction, t as LoomaSlashCommand, tt as LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS, u as shouldShowTextFormattingToolbar, v as getActiveTableCellBackground, w as createSiteRelativeLinks, x as LoomaSmartPaste, y as setActiveTableCellAlignment, z as LoomaTabs } from "./chunks/extensions.js";
 import { a as setReferenceDisplay, i as referenceDisplay, n as LoomaReferencePresentation, o as LOOMA_CALLOUT_TONES, r as getReferenceDisplay, t as LoomaReference } from "./chunks/reference-display.js";
-import { AlignCenter, AlignLeft, AlignRight, ArrowLeft, Bell, Bold, BookUser, Braces, Calculator, Check, ChevronDown, ChevronLeft, ChevronRight, CircleCheck, CircleDot, CircleQuestionMark, CircleX, CodeXml, Columns3, Compass, CreditCard, Ellipsis, Eraser, ExternalLink, FileText, Folder, GripHorizontal, GripVertical, Heading1, Heading2, Heading3, Highlighter, History, Image, Info, Italic, LayoutDashboard, Lightbulb, Link, List, ListOrdered, ListTodo, LoaderCircle, Merge, MessageSquareWarning, Minus, NotebookPen, PaintBucket, PanelBottom, PanelLeft, PanelRight, PanelTop, Pencil, Pilcrow, Plus, Quote, Receipt, Redo2, Rows3, Search, Settings, Split, Strikethrough, Superscript, Table2, Tag, Trash2, TriangleAlert, Truck, Underline, Undo2, Unlink, UserRound, Users, X } from "lucide";
+import { AlignCenter, AlignLeft, AlignRight, ArrowLeft, Bell, Bold, BookUser, Braces, Calculator, Check, ChevronDown, ChevronLeft, ChevronRight, CircleCheck, CircleDot, CircleQuestionMark, CircleX, CodeXml, Columns3, Compass, CreditCard, Ellipsis, Eraser, ExternalLink, FileText, Folder, GripHorizontal, GripVertical, Heading1, Heading2, Heading3, Highlighter, History, Image, Info, Italic, LayoutDashboard, Lightbulb, Link, List, ListOrdered, ListTodo, LoaderCircle, Merge, MessageSquareWarning, Minus, NotebookPen, PaintBucket, PanelBottom, PanelLeft, PanelRight, PanelTop, Paperclip, Pencil, Pilcrow, Plus, Quote, Receipt, Redo2, Rows3, Search, Settings, Split, Strikethrough, Superscript, Table2, Tag, Trash2, TriangleAlert, Truck, Underline, Undo2, Unlink, UserRound, Users, X } from "lucide";
 //#region src/editor/icons.ts
 /** The opinionated Lucide set used by Looma's shipped interaction surfaces. */
 var LOOMA_ICONS = {
@@ -43,6 +43,7 @@ var LOOMA_ICONS = {
 	highlighter: Highlighter,
 	history: History,
 	image: Image,
+	paperclip: Paperclip,
 	info: Info,
 	italic: Italic,
 	"layout-dashboard": LayoutDashboard,

package/markdown/fixtures.js

@@ -96,7 +96,7 @@ var files = /* #__PURE__ */ Object.assign({
 	"../../markdown-fixtures/lists/blocks.html": "<ul>\n<li>One\n<ul>\n<li>Nested</li>\n</ul>\n</li>\n<li>Two</li>\n</ul>\n<ol start=\"3\">\n<li>Three</li>\n<li>Four</li>\n</ol>\n<blockquote>\n<p>Quoted</p>\n</blockquote>\n<hr>\n",
 	"../../markdown-fixtures/lists/blocks.md": "- One\n  - Nested\n- Two\n\n3. Three\n4. Four\n\n> Quoted\n\n---\n",
 	"../../markdown-fixtures/mentions/person.html": "<p>Thanks, <span data-type=\"mention\" class=\"looma-mention\" data-id=\"u1\" data-label=\"Ada Lovelace\">@Ada Lovelace</span>.</p>\n",
-	"../../markdown-fixtures/mentions/person.md": "Thanks, :mention[Ada Lovelace]{id=u1}.\n",
+	"../../markdown-fixtures/mentions/person.md": "Thanks, @[Ada Lovelace]#u1.\n",
 	"../../markdown-fixtures/tables/gfm.html": "<table>\n<thead>\n<tr>\n<th>Package</th>\n<th style=\"text-align:right\">Version</th>\n<th style=\"text-align:center\">Notes</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>looma</td>\n<td style=\"text-align:right\">0.28</td>\n<td style=\"text-align:center\">Components</td>\n</tr>\n</tbody>\n</table>\n",
 	"../../markdown-fixtures/tables/gfm.md": "| Package | Version | Notes |\n| --- | ---: | :---: |\n| looma | 0.28 | Components |\n",
 	"../../markdown-fixtures/tables/left-aligned.html": "<table>\n<thead>\n<tr>\n<th style=\"text-align:left\">Name</th>\n<th>Notes</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style=\"text-align:left\">a | b</td>\n<td><code>x | y</code></td>\n</tr>\n</tbody>\n</table>\n",

package/markdown/index.d.ts

@@ -32,6 +32,11 @@ export type LoomaChipTone = (typeof LOOMA_CHIP_TONES)[number];
  * @failure Unknown values become `neutral`.
  */
 export declare function normalizeLoomaChipTone(value: unknown): LoomaChipTone;
+/**
+ * A mention handle, as `@handle` and the `#ref` of `@[Label]#ref` spell it: a letter, number or
+ * underscore, then letters, marks, numbers, underscores and hyphens.
+ */
+export declare const LOOMA_MENTION_HANDLE: RegExp;
 /**
  * Names that open a `:::` container, matched without regard to case. A container with any other
  * name is ordinary text.

package/markdown/index.js

@@ -66,6 +66,11 @@ function normalizeLoomaChipTone(value) {
 	return LOOMA_CHIP_TONES.includes(value) ? value : "neutral";
 }
 /**
+* A mention handle, as `@handle` and the `#ref` of `@[Label]#ref` spell it: a letter, number or
+* underscore, then letters, marks, numbers, underscores and hyphens.
+*/
+var LOOMA_MENTION_HANDLE = /^[\p{L}\p{N}_][\p{L}\p{M}\p{N}_-]*/u;
+/**
 * Names that open a `:::` container, matched without regard to case. A container with any other
 * name is ordinary text.
 */
@@ -263,4 +268,4 @@ function loomaCodeFence(code) {
 	return "`".repeat(Math.max(3, longest + 1));
 }
 //#endregion
-export { LOOMA_BADGE_TONES, LOOMA_CALLOUT_TONES, LOOMA_CALLOUT_TONE_ALIASES, LOOMA_CHIP_TONES, LOOMA_CONTAINER_NAMES, LOOMA_MEANING_TONES, applyLoomaCodeNotation, assignLoomaHeadingIds, formatLoomaAttributes, loomaCodeFence, loomaContainerMarker, loomaHeadingSlug, normalizeLoomaCalloutTone, normalizeLoomaChipTone, parseLoomaAttributes, parseLoomaFenceInfo, readLoomaAttributes, splitLoomaFrontmatter };
+export { LOOMA_BADGE_TONES, LOOMA_CALLOUT_TONES, LOOMA_CALLOUT_TONE_ALIASES, LOOMA_CHIP_TONES, LOOMA_CONTAINER_NAMES, LOOMA_MEANING_TONES, LOOMA_MENTION_HANDLE, applyLoomaCodeNotation, assignLoomaHeadingIds, formatLoomaAttributes, loomaCodeFence, loomaContainerMarker, loomaHeadingSlug, normalizeLoomaCalloutTone, normalizeLoomaChipTone, parseLoomaAttributes, parseLoomaFenceInfo, readLoomaAttributes, splitLoomaFrontmatter };

package/markdown/markdown-it.js

@@ -1,4 +1,4 @@
-import { LOOMA_CONTAINER_NAMES, applyLoomaCodeNotation, assignLoomaHeadingIds, normalizeLoomaCalloutTone, normalizeLoomaChipTone, parseLoomaAttributes, parseLoomaFenceInfo, readLoomaAttributes, splitLoomaFrontmatter } from "./index.js";
+import { LOOMA_CONTAINER_NAMES, LOOMA_MENTION_HANDLE, applyLoomaCodeNotation, assignLoomaHeadingIds, normalizeLoomaCalloutTone, normalizeLoomaChipTone, parseLoomaAttributes, parseLoomaFenceInfo, readLoomaAttributes, splitLoomaFrontmatter } from "./index.js";
 import MarkdownIt from "markdown-it";
 //#region src/markdown/markdown-it.ts
 var CONTAINER_OPEN = /^(:{3,})[ \t]*([A-Za-z][\w-]*)(?:[ \t]+(.*?))?[ \t]*$/;
@@ -210,7 +210,7 @@ function taskLists(state) {
 function directive(state, silent) {
 	const { src, pos } = state;
 	if (src.charCodeAt(pos) !== 58) return false;
-	const name = /^:(chip|mention)\[/.exec(src.slice(pos, pos + 10))?.[1];
+	const name = /^:(chip)\[/.exec(src.slice(pos, pos + 10))?.[1];
 	if (!name) return false;
 	let label = "";
 	let index = pos + name.length + 2;
@@ -224,7 +224,6 @@ function directive(state, silent) {
 		end: index + 1
 	};
 	if (!read || read.end > state.posMax) return false;
-	if (name === "mention" && typeof read.attributes.id !== "string") return false;
 	if (!silent) {
 		const token = state.push(`looma_${name}`, "span", 0);
 		token.meta = {
@@ -235,6 +234,37 @@ function directive(state, silent) {
 	state.pos = read.end;
 	return true;
 }
+function mention(state, silent) {
+	const { src, pos } = state;
+	if (src.charCodeAt(pos) !== 64 || pos > 0 && !/\s/u.test(src[pos - 1])) return false;
+	let index = pos + 1;
+	let label = "";
+	if (src[index] === "[") {
+		for (index++; index < state.posMax && src[index] !== "]"; index++) {
+			if (src[index] === "\\" && index + 1 < state.posMax) index++;
+			label += src[index];
+		}
+		if (src[index] !== "]" || !label) return false;
+		index++;
+	} else {
+		label = LOOMA_MENTION_HANDLE.exec(src.slice(index, state.posMax))?.[0] ?? "";
+		if (!label) return false;
+		index += label.length;
+	}
+	let ref = src[index] === "#" ? LOOMA_MENTION_HANDLE.exec(src.slice(index + 1, state.posMax))?.[0] : void 0;
+	if (ref) index += ref.length + 1;
+	const read = src[index] === "{" ? readLoomaAttributes(src, index) : null;
+	if (read && read.end <= state.posMax) {
+		if (typeof read.attributes.ref === "string") ref ??= read.attributes.ref;
+		index = read.end;
+	}
+	if (!silent) state.push("looma_mention", "span", 0).meta = {
+		label,
+		ref
+	};
+	state.pos = index;
+	return true;
+}
 function inlineText(token) {
 	return (token?.children ?? []).map((child) => child.type === "image" ? inlineText(child) : child.content).join("");
 }
@@ -456,6 +486,7 @@ function loomaMarkdown(md, { codeNotation = "apply" } = {}) {
 		"list"
 	] });
 	md.inline.ruler.before("link", "looma_directive", directive);
+	md.inline.ruler.before("link", "looma_mention", mention);
 	md.inline.ruler.before("link", "looma_footnote_ref", footnoteReference);
 	md.core.ruler.after("block", "looma_task_lists", taskLists);
 	md.core.ruler.before("inline", "looma_alerts", alerts);
@@ -505,9 +536,8 @@ function loomaMarkdown(md, { codeNotation = "apply" } = {}) {
 		return `<span data-looma-chip="" data-label="${escape(label)}" data-color="${tone}"${label ? "" : " data-placeholder=\"\""}>${escape(label)}</span>`;
 	};
 	rules.looma_mention = (tokens, index) => {
-		const { label, attributes } = tokens[index].meta;
-		const id = String(attributes.id);
-		return `<span data-type="mention" class="looma-mention" data-id="${escape(id)}" data-label="${escape(label || id)}">@${escape(label || id)}</span>`;
+		const { label, ref } = tokens[index].meta;
+		return `<span data-type="mention" class="looma-mention"${ref === void 0 ? "" : ` data-id="${escape(ref)}"`} data-label="${escape(label)}">@${escape(label)}</span>`;
 	};
 	const code = (content, info) => {
 		const { language, meta } = parseLoomaFenceInfo(info);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.31.5",
+  "version": "0.32.1",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/vue/editor/LoomaEditor.d.ts

@@ -1,3 +1,4 @@
+import { type LoomaFileDescriptor } from "../../editor/file-uploads.js";
 import "../../components/ui-editor-surface/ui-editor-surface.css";
 import "./looma-editor.css";
 import { type AnyExtension, type Editor, type JSONContent } from "@tiptap/core";
@@ -77,6 +78,10 @@ export type LoomaMentionQuery = LoomaResponder<LoomaMentionQueryDetail, LoomaMen
  * @failure A rejection leaves the document unchanged and emits `uploadError`.
  */
 export type LoomaImageUploader = LoomaResponder<LoomaImageUploadDetail, LoomaImageDescriptor>;
+/** Uploads a file and returns its retained link; rejection leaves authored content unchanged. */
+export type LoomaFileUploader = LoomaResponder<{
+    file: File;
+}, LoomaFileDescriptor>;
 /**
  * Turnkey Vue editor that composes Looma's framework-neutral Tiptap extensions
  * with declarative menus, image delivery, and table interaction chrome.
@@ -174,7 +179,12 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
         type: StringConstructor;
         default: string;
     };
-    /** Answers `image-upload`: uploads a pasted, dropped, or chosen image and returns the image to insert. */
+    /** Answers `file-upload` with a retained ordinary file link. */
+    fileUpload: {
+        type: PropType<LoomaFileUploader | undefined>;
+        default: undefined;
+    };
+    /** Answers `image-upload` with the image to insert. */
     imageUpload: {
         type: PropType<LoomaImageUploader | undefined>;
         default: undefined;
@@ -324,7 +334,12 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
         type: StringConstructor;
         default: string;
     };
-    /** Answers `image-upload`: uploads a pasted, dropped, or chosen image and returns the image to insert. */
+    /** Answers `file-upload` with a retained ordinary file link. */
+    fileUpload: {
+        type: PropType<LoomaFileUploader | undefined>;
+        default: undefined;
+    };
+    /** Answers `image-upload` with the image to insert. */
     imageUpload: {
         type: PropType<LoomaImageUploader | undefined>;
         default: undefined;
@@ -402,6 +417,7 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
     linkSearch: LoomaLinkSearch | undefined;
     linkResolve: LoomaLinkResolve | undefined;
     imageUpload: LoomaImageUploader | undefined;
+    fileUpload: LoomaFileUploader | undefined;
     modelValue: JSONContent;
     contentDensity: "comfortable" | "compact";
     mentionItems: LoomaMentionItem[];

package/vue/editor/index.d.ts

@@ -1,4 +1,5 @@
 export * from "@threadlabs/looma/editor";
 export * from "./primitives.js";
-export { LoomaEditor, type LoomaEditorToolbarMode, type LoomaEditorSelectionAction, type LoomaEditorSelectionActionDetail, type LoomaEditorRangeAction, type LoomaEditorRangeActionDetail, type LoomaEditorExtensions, type LoomaEditorSlashCommands, type LoomaSlashCommandsDetail, type LoomaLinkTarget, type LoomaLinkSearch, type LoomaLinkSearchDetail, type LoomaLinkResolve, type LoomaLinkResolveDetail, type LoomaMentionQuery, type LoomaMentionQueryDetail, type LoomaImageUploader, type LoomaImageUploadDetail, type LoomaRequestInit, type LoomaResponder, } from "./LoomaEditor.js";
+export { LoomaEditor, type LoomaEditorToolbarMode, type LoomaEditorSelectionAction, type LoomaEditorSelectionActionDetail, type LoomaEditorRangeAction, type LoomaEditorRangeActionDetail, type LoomaEditorExtensions, type LoomaEditorSlashCommands, type LoomaSlashCommandsDetail, type LoomaLinkTarget, type LoomaLinkSearch, type LoomaLinkSearchDetail, type LoomaLinkResolve, type LoomaLinkResolveDetail, type LoomaMentionQuery, type LoomaMentionQueryDetail, type LoomaFileUploader, type LoomaImageUploader, type LoomaImageUploadDetail, type LoomaRequestInit, type LoomaResponder, } from "./LoomaEditor.js";
 export type { LoomaImageActivationDetail, LoomaImageActivationTrigger, LoomaImageAttributeResolver, LoomaImageSourceResolver, LoomaImageDescriptor, LoomaImageRenditionErrorDetail, LoomaImageRenditionAttributes, } from "../../editor/image-delivery.js";
+export type { LoomaFileDescriptor } from "../../editor/file-uploads.js";

package/vue/editor/index.js

@@ -47,6 +47,73 @@ var EDITOR_ADAPTER_COMPONENT_TAG_MAP = {
 	EditorFootnoteEditor: "ui-editor-footnote-editor"
 };
 //#endregion
+//#region src/editor/file-uploads.ts
+/** Captures the caret before asynchronous transport; later transactions map that caret. */
+function createFileUploads(options) {
+	let active;
+	const state = (uploading, progress = null) => options.onState?.({
+		uploading,
+		progress
+	});
+	return {
+		cancel() {
+			active?.abort();
+			state(false);
+		},
+		async insert(file) {
+			const upload = options.upload();
+			if (!upload || options.editor.isDestroyed) return;
+			active?.abort();
+			const controller = new AbortController();
+			active = controller;
+			const { editor } = options;
+			let position = editor.state.selection.from;
+			const map = ({ transaction }) => {
+				position = transaction.mapping.map(position);
+			};
+			editor.on("transaction", map);
+			state(true);
+			try {
+				const answer = await upload(file, {
+					signal: controller.signal,
+					progress: (loaded, total) => {
+						if (!controller.signal.aborted) state(true, {
+							loaded,
+							total
+						});
+					}
+				});
+				if (!answer || controller.signal.aborted || editor.isDestroyed || !editor.isEditable) return;
+				if (!/^(?:https?:\/\/|\/(?!\/))/.test(answer.href) || !Number.isSafeInteger(answer.size) || answer.size < 0) throw new Error("Invalid file descriptor");
+				const size = answer.size < 1e3 ? `${answer.size} B` : answer.size < 1e6 ? `${Math.ceil(answer.size / 1e3)} KB` : `${Number((answer.size / 1e6).toFixed(1))} MB`;
+				editor.chain().focus().insertContentAt(position, [{
+					type: "text",
+					text: answer.name || file.name,
+					marks: [{
+						type: "link",
+						attrs: {
+							href: answer.href,
+							target: "_blank",
+							rel: "noopener noreferrer"
+						}
+					}]
+				}, {
+					type: "text",
+					text: ` (${answer.contentType || "application/octet-stream"}, ${size}) `
+				}]).run();
+			} catch (error) {
+				if (!controller.signal.aborted) options.onError(error, file);
+			} finally {
+				editor.off("transaction", map);
+				if (active === controller) {
+					active = void 0;
+					state(false);
+				}
+			}
+		}
+	};
+}
+//#endregion
 //#region src/components/shared/overlay.js
 function stateFor$1(document) {
 	const key = Symbol.for("@threadlabs/looma/overlay-stack/v1");
@@ -14546,7 +14613,8 @@ var EDITOR_REQUESTS = {
 	"mention-query": "mentionQuery",
 	"link-search": "linkSearch",
 	"link-resolve": "linkResolve",
-	"image-upload": "imageUpload"
+	"image-upload": "imageUpload",
+	"file-upload": "fileUpload"
 };
 var EDITOR_REQUEST_NAMES = Object.keys(EDITOR_REQUESTS);
 var EMPTY_DOCUMENT = {
@@ -14680,7 +14748,12 @@ var LoomaEditor = defineComponent({
 			type: String,
 			default: "Item"
 		},
-		/** Answers `image-upload`: uploads a pasted, dropped, or chosen image and returns the image to insert. */
+		/** Answers `file-upload` with a retained ordinary file link. */
+		fileUpload: {
+			type: Function,
+			default: void 0
+		},
+		/** Answers `image-upload` with the image to insert. */
 		imageUpload: {
 			type: Function,
 			default: void 0
@@ -14750,6 +14823,12 @@ var LoomaEditor = defineComponent({
 		const formatAnchorId = `looma-editor-format-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
 		const formatOpen = ref(false);
 		const fileInput = ref(null);
+		const attachmentInput = ref(null);
+		const fileUploadState = shallowRef({
+			uploading: false,
+			progress: null
+		});
+		let attachmentUploads;
 		const tablePickerAnchorId = `looma-editor-table-picker-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
 		const blockActionAnchorId = `ui-block-tools-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
 		const linkAnchorId = `looma-editor-link-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
@@ -14918,9 +14997,11 @@ var LoomaEditor = defineComponent({
 		let slashDefaults;
 		const defaultSlashCommands = () => {
 			const uploads = answers("image-upload");
-			if (slashDefaults?.uploads !== uploads) slashDefaults = {
+			const files = answers("file-upload");
+			if (slashDefaults?.uploads !== uploads || slashDefaults?.files !== files) slashDefaults = {
 				uploads,
-				commands: getDefaultSlashCommands(uploads ? () => fileInput.value?.click() : void 0, openChipEditor, () => openLinkEditor())
+				files,
+				commands: getDefaultSlashCommands(uploads ? () => fileInput.value?.click() : void 0, openChipEditor, () => openLinkEditor(), files ? () => attachmentInput.value?.click() : void 0)
 			};
 			return slashDefaults.commands;
 		};
@@ -14946,7 +15027,7 @@ var LoomaEditor = defineComponent({
 			const current = new Set(EDITOR_REQUEST_NAMES.filter(answers));
 			const arrived = (name) => current.has(name) && !responders.has(name);
 			const extensionsArrived = arrived("extensions");
-			const slashChanged = arrived("slash-commands") || current.has("image-upload") !== responders.has("image-upload");
+			const slashChanged = arrived("slash-commands") || current.has("image-upload") !== responders.has("image-upload") || current.has("file-upload") !== responders.has("file-upload");
 			responders = current;
 			if (extensionsArrived) askExtensions();
 			if (slashChanged) askSlashCommands();
@@ -15122,6 +15203,14 @@ var LoomaEditor = defineComponent({
 				uploadState.value = imageUploads.state;
 			});
 			uploads = imageUploads;
+			attachmentUploads = createFileUploads({
+				editor: session.editor,
+				upload: () => (file, init) => ask("file-upload", { file }, init),
+				onError: (error, file) => emit("uploadError", error, file),
+				onState: (value) => {
+					fileUploadState.value = value;
+				}
+			});
 			const instance = session.editor;
 			formatting = createFormattingSelection({
 				editor: instance,
@@ -15142,6 +15231,7 @@ var LoomaEditor = defineComponent({
 			footnoteEditing?.close();
 			formatting?.destroy();
 			uploads?.cancel();
+			attachmentUploads?.cancel();
 			previous.destroy();
 			build(content);
 		};
@@ -15167,6 +15257,7 @@ var LoomaEditor = defineComponent({
 		onBeforeUnmount(() => {
 			const element = session?.editor.options.element;
 			element?.parentNode?.replaceChild(element.cloneNode(true), element);
+			attachmentUploads?.cancel();
 			connection.abort();
 			stopAnnouncements?.();
 			linkEditing?.destroy();
@@ -15712,6 +15803,12 @@ var LoomaEditor = defineComponent({
 			if (dragLeaveTimer) clearTimeout(dragLeaveTimer);
 			if (tablePointerFrame !== null) cancelAnimationFrame(tablePointerFrame);
 		});
+		const onAttachmentChange = async (event) => {
+			const input = event.target;
+			const file = input.files?.[0];
+			input.value = "";
+			if (file) await attachmentUploads?.insert(file);
+		};
 		const onFileChange = async (event) => {
 			const input = event.target;
 			const files = Array.from(input.files ?? []);
@@ -15954,6 +16051,7 @@ var LoomaEditor = defineComponent({
 					variant: tablePickerOpen.value ? "solid" : "ghost",
 					"aria-expanded": tablePickerOpen.value ? "true" : "false"
 				}, () => loomaIcon("table")),
+				commandButton("Attach file", "paperclip", false, fileUploadState.value.uploading || !answers("file-upload"), () => attachmentInput.value?.click()),
 				commandButton(uploadState.value.uploading ? "Uploading image" : "Insert image", "image", false, uploadState.value.uploading || !answers("image-upload"), () => fileInput.value?.click()),
 				h("span", {
 					class: "divider",
@@ -16143,6 +16241,22 @@ var LoomaEditor = defineComponent({
 					"aria-hidden": "true",
 					onChange: onFileChange
 				}),
+				h("input", {
+					ref: attachmentInput,
+					class: "looma-editor__file-input",
+					type: "file",
+					tabindex: -1,
+					"aria-hidden": "true",
+					onChange: onAttachmentChange
+				}),
+				fileUploadState.value.uploading ? h(StatusMessage, { kind: "loading" }, {
+					default: () => "Attaching file…",
+					action: () => h(Button, {
+						size: "sm",
+						variant: "ghost",
+						onClick: () => attachmentUploads?.cancel()
+					}, () => "Cancel")
+				}) : null,
 				uploadState.value.uploading ? h(StatusMessage, { kind: "loading" }, {
 					default: () => uploadProgressText(uploadState.value.progress),
 					action: () => h(Button, {