@daydreamui/text 0.0.0-stage → 0.3.0

package/dist/index.js

@@ -0,0 +1,535 @@
+import { className, createComponent, delegateEvents, effect, insert, memo, readShallow, ref, setAttribute, style, template } from "@solidjs/web";
+import { Show, createEffect, createSignal, flush, onSettled, untrack } from "solid-js";
+var textStyles = `
+.daydream-text-item {
+  position: absolute;
+  min-width: 1rem;
+  min-height: 1rem;
+  color: var(--dream-app-canvas-text, #fff);
+  font-size: 1.5rem;
+  font-weight: 400;
+  line-height: 1.4;
+  overflow: visible;
+  pointer-events: auto;
+}
+.daydream-text-auto { width: max-content; height: max-content; }
+.daydream-text-auto-height { min-height: 1lh; }
+.daydream-text-content, .daydream-text-editor {
+  display: block;
+  min-width: 1rem;
+  min-height: 1lh;
+  color: inherit;
+  font: inherit;
+  overflow: visible;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+.daydream-text-auto .daydream-text-content,
+.daydream-text-auto .daydream-text-editor { width: max-content; white-space: pre; }
+.daydream-text-content { user-select: none; }
+.daydream-text-editor { outline: none; user-select: text; }
+`;
+function textClasses(frame, capped = false) {
+	return `daydream-text-item ${frame === void 0 && !capped ? "daydream-text-auto" : ""} ${frame?.height === void 0 ? "daydream-text-auto-height" : ""}`;
+}
+function measureNaturalTextItem(text, frame, fontSize) {
+	return measureText(text, frame, void 0, fontSize);
+}
+function measureInitialTextFrame(text, fontSize) {
+	if (Array.from(text).length <= 60) return void 0;
+	const size = measureText(text, void 0, 60, fontSize);
+	return size === null ? void 0 : { width: size.width };
+}
+function measureText(text, frame, maxWidthCh, fontSize) {
+	if (typeof document === "undefined" || document.body === null) return null;
+	const item = document.createElement("div");
+	item.className = textClasses(frame, maxWidthCh !== void 0);
+	Object.assign(item.style, {
+		position: "fixed",
+		left: "-100000px",
+		top: "-100000px",
+		visibility: "hidden",
+		pointerEvents: "none"
+	});
+	if (fontSize !== void 0) item.style.fontSize = `${fontSize}px`;
+	if (frame !== void 0) {
+		item.style.width = `${frame.width}px`;
+		if (frame.height !== void 0) item.style.height = `${frame.height}px`;
+	}
+	if (maxWidthCh !== void 0) {
+		item.style.width = "max-content";
+		item.style.maxWidth = `${maxWidthCh}ch`;
+	}
+	const content = document.createElement("div");
+	content.className = "daydream-text-content";
+	content.textContent = text;
+	if (text.endsWith("\n")) content.append(document.createElement("br"));
+	item.append(content);
+	document.body.append(item);
+	try {
+		const { width, height } = item.getBoundingClientRect();
+		return Number.isFinite(width) && Number.isFinite(height) && width > 0 && height > 0 ? {
+			width,
+			height
+		} : null;
+	} finally {
+		item.remove();
+	}
+}
+var TEXT_KIND = "daydream.text";
+var LEGACY_TEXT_KIND = "mrbavio.text";
+function isTextItem(item) {
+	return (item.kind === "daydream.text" || item.kind === "mrbavio.text") && textPayloadProblem(item.payload, "payload") === null;
+}
+function textOf(item) {
+	const payload = item.payload;
+	if (typeof payload !== "object" || payload === null) return "";
+	const text = payload.text;
+	return typeof text === "string" ? text : "";
+}
+function textPayloadProblem(raw, where) {
+	if (typeof raw !== "object" || raw === null || Array.isArray(raw)) return `${where} is not a text payload`;
+	const payload = raw;
+	if (typeof payload["text"] !== "string" || payload["text"].trim() === "") return `${where}.text must be a non-empty string`;
+	const fontSize = payload["fontSize"];
+	if (fontSize !== void 0 && (typeof fontSize !== "number" || !Number.isFinite(fontSize) || fontSize <= 0)) return `${where}.fontSize must be a positive finite number`;
+	if (Object.keys(payload).some((key) => key !== "text" && key !== "fontSize")) return `${where} may only contain text and fontSize`;
+	return null;
+}
+function nextTextFontSize(current, delta) {
+	const next = Math.max(2, current + delta);
+	return Number.isFinite(next) ? next : current;
+}
+function resizeTextFont(item, delta) {
+	const previous = item.payload.fontSize ?? 24;
+	const next = nextTextFontSize(previous, delta);
+	if (item.frame !== void 0) {
+		const width = item.frame.width * (next / previous);
+		if (!Number.isFinite(width) || width <= 0) return;
+		item.frame.width = width;
+	}
+	item.payload.fontSize = next;
+}
+function registerClipboard(dd) {
+	let consecutivePastes = 0;
+	let pasting = false;
+	let camera = untrack(() => dd.geometry.camera());
+	const reset = () => {
+		if (!pasting) consecutivePastes = 0;
+	};
+	dd.canvas.onActivity(reset);
+	dd.on("document", reset);
+	dd.on("selection", reset);
+	dd.on("geometry", () => {
+		const next = untrack(() => dd.geometry.camera());
+		if (next.panX !== camera.panX || next.panY !== camera.panY || next.zoom !== camera.zoom) reset();
+		camera = next;
+	});
+	dd.canvas.onPaste((event) => {
+		if ((event.clipboardData?.files.length ?? 0) > 0) return;
+		const text = event.clipboardData?.getData("text/plain") ?? "";
+		if (text.trim() === "") return;
+		event.preventDefault();
+		const cascade = consecutivePastes++ * 16;
+		const center = dd.canvas.center();
+		const frame = measureInitialTextFrame(text);
+		const size = measureNaturalTextItem(text, frame);
+		const item = {
+			id: dd.core.generateId(),
+			kind: TEXT_KIND,
+			position: {
+				x: center.x + cascade - (size?.width ?? 0) / 2,
+				y: center.y + cascade - (size?.height ?? 0) / 2
+			},
+			...frame === void 0 ? {} : { frame },
+			payload: { text }
+		};
+		pasting = true;
+		try {
+			dd.mutateItems((items) => {
+				items.push(item);
+			});
+			dd.select(item.id);
+			flush();
+		} finally {
+			pasting = false;
+		}
+	});
+	dd.canvas.onCopy((event) => {
+		const range = window.getSelection();
+		if (range !== null && !range.isCollapsed) return;
+		const selected = dd.itemSelection();
+		if (selected.length !== 1 || event.clipboardData === null) return;
+		const item = dd.items().find((candidate) => candidate.id === selected[0]);
+		if (item === void 0 || !isTextItem(item)) return;
+		event.clipboardData.setData("text/plain", item.payload.text);
+		event.preventDefault();
+	});
+}
+function registerTextCommands(dd, editing) {
+	const soleSelectedText = () => {
+		const ids = dd.itemSelection();
+		if (ids.length !== 1) return null;
+		const item = dd.items().find((candidate) => candidate.id === ids[0]);
+		return item !== void 0 && isTextItem(item) ? item.id : null;
+	};
+	dd.registerCommand({
+		id: "daydream.text.edit",
+		title: "Edit text",
+		scope: "canvas",
+		when: () => soleSelectedText() !== null,
+		run: () => {
+			const id = soleSelectedText();
+			if (id === null) return false;
+			editing.begin(id);
+		}
+	});
+	dd.bindShortcut("daydream.text.edit", "Enter");
+	for (const direction of [-1, 1]) {
+		const name = direction > 0 ? "increase" : "decrease";
+		const keys = direction > 0 ? ["Mod++", "Mod+="] : ["Mod+-"];
+		for (const scope of ["canvas", "editor"]) {
+			const id = `daydream.text.${name}-font-size-${scope}`;
+			dd.registerCommand({
+				id,
+				title: `${direction > 0 ? "Increase" : "Decrease"} text size`,
+				scope,
+				when: (ctx) => scope === "editor" ? ctx.event?.target instanceof Element && ctx.event.target.closest("[data-text-editor]") !== null : dd.items().some((item) => dd.itemSelection().includes(item.id) && isTextItem(item)),
+				run: () => {
+					const delta = direction * 2;
+					if (scope === "editor") return editing.changeFontSize(delta);
+					const selected = new Set(dd.itemSelection());
+					dd.mutateItems((items) => {
+						for (const item of items) if (selected.has(item.id) && isTextItem(item)) resizeTextFont(item, delta);
+					});
+				}
+			});
+			for (const key of keys) dd.bindShortcut(id, key);
+		}
+	}
+}
+function createTextEditing() {
+	const [intent, setIntent] = createSignal(null);
+	const sessions = new Map();
+	return {
+		intent,
+		begin(id, caret = "end") {
+			if (untrack(intent)?.id === id) return;
+			setIntent({
+				id,
+				caret
+			});
+		},
+		end(id) {
+			if (id === void 0 || untrack(intent)?.id === id) setIntent(null);
+		},
+		active(id) {
+			return intent()?.id === id;
+		},
+		register(id, session) {
+			sessions.set(id, session);
+			return () => {
+				if (sessions.get(id) === session) sessions.delete(id);
+			};
+		},
+		commit() {
+			const id = intent()?.id;
+			if (id !== void 0) sessions.get(id)?.commit();
+		},
+		changeFontSize(delta) {
+			const id = intent()?.id;
+			const session = id === void 0 ? void 0 : sessions.get(id);
+			if (session === void 0) return false;
+			session.changeFontSize(delta);
+			return true;
+		}
+	};
+}
+function editableText(editor, terminalSentinel) {
+	const text = editor.innerText;
+	return terminalSentinel && text.endsWith("\n") ? text.slice(0, -1) : text;
+}
+function placeCaret(editor, caret, terminalSentinel = false) {
+	const selection = window.getSelection();
+	if (selection === null) return;
+	selection.removeAllRanges();
+	if (caret !== "end") {
+		const position = document.caretPositionFromPoint?.(caret.clientX, caret.clientY);
+		if (position != null && editor.contains(position.offsetNode)) {
+			const range = document.createRange();
+			range.setStart(position.offsetNode, position.offset);
+			range.collapse(true);
+			selection.addRange(range);
+			return;
+		}
+	}
+	const range = document.createRange();
+	if (terminalSentinel && editor.lastChild?.nodeType === Node.TEXT_NODE) {
+		const tail = editor.lastChild;
+		range.setStart(tail, Math.max(0, (tail.textContent?.length ?? 1) - 1));
+	} else range.selectNodeContents(editor);
+	range.collapse(false);
+	selection.addRange(range);
+}
+var _tmpl$ = template(`<div>`);
+var _tmpl$2 = template(`<div class=daydream-text-editor data-text-editor data-dd-editable data-dd-native-undo contenteditable=plaintext-only spellcheck role=textbox aria-label="Canvas text"aria-multiline=true>`);
+var _tmpl$3 = template(`<br aria-hidden=true>`);
+var _tmpl$4 = template(`<div class=daydream-text-content><!><!>`);
+function TextItemView(props) {
+	const dd = untrack(() => props.dd);
+	const editing = untrack(() => props.editing);
+	const itemId = untrack(() => props.item.id);
+	const initialPosition = untrack(() => ({ ...props.item.position }));
+	const onFinish = untrack(() => props.onFinish);
+	const findItem = () => dd.items().find((item) => item.id === itemId);
+	let initialText = untrack(() => textOf(props.item));
+	let sessionText = initialText;
+	let editor;
+	let binding;
+	let transaction;
+	let terminalSentinel = false;
+	const [draftFontSize, setDraftFontSize] = createSignal(24);
+	const currentItem = () => props.ephemeral ? findItem() ?? props.item : props.item;
+	const fontSize = () => {
+		const item = currentItem();
+		return isTextItem(item) ? item.payload.fontSize ?? draftFontSize() : draftFontSize();
+	};
+	const mutateText = (text) => {
+		if (text.trim() === "") return;
+		const existing = findItem();
+		if (existing === void 0) {
+			const size = draftFontSize();
+			transaction?.mutate((items) => {
+				items.push({
+					id: itemId,
+					kind: TEXT_KIND,
+					position: { ...initialPosition },
+					payload: {
+						text,
+						...size === 24 ? {} : { fontSize: size }
+					}
+				});
+			});
+			dd.select(itemId);
+		} else if (textOf(existing) !== text) transaction?.update(itemId, (item) => {
+			if (isTextItem(item)) item.payload.text = text;
+		});
+	};
+	const finish = () => untrack(() => {
+		if (!editing.active(itemId)) return;
+		const value = editor === void 0 ? sessionText : editableText(editor, terminalSentinel);
+		if (value.trim() === "") {
+			if (findItem() !== void 0) {
+				editing.end(itemId);
+				transaction?.mutate((items) => {
+					const index = items.findIndex((item) => item.id === itemId);
+					if (index !== -1) items.splice(index, 1);
+				});
+			}
+		} else {
+			mutateText(value);
+			dd.select(itemId);
+		}
+		transaction?.commit();
+		transaction = void 0;
+		sessionText = value;
+		editing.end(itemId);
+		onFinish?.();
+	});
+	createEffect(() => editing.intent(), (intent) => {
+		if (intent?.id !== itemId) return;
+		initialText = untrack(() => textOf(props.item));
+		sessionText = initialText;
+		terminalSentinel = false;
+		transaction ??= dd.beginItemTransaction({ onInterrupted: () => {
+			transaction = void 0;
+			editing.end(itemId);
+			onFinish?.();
+		} });
+		queueMicrotask(() => {
+			if (editor === void 0 || !editing.active(itemId)) return;
+			terminalSentinel = initialText.endsWith("\n");
+			editor.textContent = terminalSentinel ? `${initialText}\n` : initialText;
+			editor.focus({ preventScroll: true });
+			placeCaret(editor, intent.caret, terminalSentinel);
+		});
+	});
+	onSettled(() => {
+		const unregister = editing.register(itemId, {
+			commit: () => finish(),
+			changeFontSize: (delta) => {
+				if (findItem() === void 0) setDraftFontSize(nextTextFontSize(draftFontSize(), delta));
+				else transaction?.update(itemId, (item) => {
+					if (isTextItem(item)) resizeTextFont(item, delta);
+				});
+			}
+		});
+		return () => untrack(() => {
+			unregister();
+			binding?.dispose();
+			if (editing.active(itemId)) {
+				transaction?.cancel();
+				transaction = void 0;
+				editing.end(itemId);
+			}
+		});
+	});
+	const boxStyle = () => ({
+		"font-size": `${fontSize()}px`,
+		left: `${props.item.position.x}px`,
+		top: `${props.item.position.y}px`,
+		...currentItem().frame === void 0 ? {} : { width: `${currentItem().frame.width}px` },
+		...currentItem().frame?.height === void 0 ? {} : { height: `${currentItem().frame.height}px` }
+	});
+	var _el$ = _tmpl$();
+	_el$._$$dblclick = (event) => {
+		event.stopPropagation();
+		if (!dd.canvas.panMode() && !editing.active(itemId)) {
+			dd.select(itemId);
+			editing.begin(itemId, {
+				clientX: event.clientX,
+				clientY: event.clientY
+			});
+		}
+	};
+	ref(() => {
+		return (node) => {
+			binding = dd.canvas.bindItemNode(itemId, node, { canDrag: () => !editing.active(itemId) });
+		};
+	}, _el$);
+	setAttribute(_el$, "data-text-item", itemId);
+	insert(_el$, (() => {
+		var _c$ = memo(() => {
+			return !!editing.active(itemId);
+		});
+		return () => {
+			return _c$() ? (() => {
+				var _el$2 = _tmpl$2();
+				_el$2._$$keydown = (event) => {
+					if (event.isComposing || event.keyCode === 229) return;
+					if (event.key === "Escape" || event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+						event.preventDefault();
+						event.stopPropagation();
+						finish();
+					}
+				};
+				_el$2.addEventListener("blur", () => finish());
+				_el$2._$$input = (event) => {
+					const inputType = event.inputType;
+					const rawText = event.currentTarget.innerText;
+					terminalSentinel = (inputType === "insertParagraph" || inputType === "insertLineBreak" || inputType === "deleteContentBackward" || inputType === "deleteContentForward" || inputType === "historyUndo" || inputType === "historyRedo") && rawText.endsWith("\n\n") || terminalSentinel && rawText.endsWith("\n");
+					sessionText = editableText(event.currentTarget, terminalSentinel);
+					mutateText(sessionText);
+				};
+				ref(() => {
+					return (el) => editor = el;
+				}, _el$2);
+				insert(_el$2, sessionText);
+				return _el$2;
+			})() : (() => {
+				var _el$3 = _tmpl$4();
+				var _el$4 = _el$3.firstChild;
+				var _el$6 = _el$4.nextSibling;
+				insert(_el$3, () => {
+					return textOf(props.item);
+				}, _el$4);
+				insert(_el$3, createComponent(Show, {
+					get when() {
+						return textOf(props.item).endsWith("\n");
+					},
+					get children() {
+						return _tmpl$3();
+					}
+				}), _el$6);
+				return _el$3;
+			})();
+		};
+	})());
+	effect(() => {
+		return {
+			e: readShallow(textClasses(currentItem().frame)),
+			t: readShallow(boxStyle()),
+			a: props.item.kind
+		};
+	}, ({ e, t, a }, _p$) => {
+		className(_el$, e, _p$?.e);
+		style(_el$, t, _p$?.t);
+		a !== _p$?.a && setAttribute(_el$, "data-item-kind", a);
+	});
+	return _el$;
+}
+delegateEvents([
+	"dblclick",
+	"input",
+	"keydown"
+]);
+function activate(dd) {
+	const editing = createTextEditing();
+	const [draft, setDraft] = createSignal(null);
+	for (const kind of [TEXT_KIND, LEGACY_TEXT_KIND]) dd.registerItemKind({
+		kind,
+		payloadProblem: textPayloadProblem,
+		styles: textStyles,
+		render: (props) => createComponent(Show, {
+			get when() {
+				return draft()?.id !== props.item.id;
+			},
+			get children() {
+				return createComponent(TextItemView, {
+					dd,
+					editing,
+					get item() {
+						return props.item;
+					}
+				});
+			}
+		}),
+		describe: textOf,
+		title: false,
+		resize: {
+			min: 16,
+			max: Number.POSITIVE_INFINITY,
+			reset: true
+		},
+		editing: editing.active
+	});
+	dd.registerOverlay({
+		id: "draft",
+		slot: "overlay.world",
+		styles: textStyles,
+		render: () => createComponent(Show, {
+			get when() {
+				return draft();
+			},
+			children: (item) => createComponent(TextItemView, {
+				dd,
+				editing,
+				get item() {
+					return item();
+				},
+				ephemeral: true,
+				onFinish: () => setDraft(null)
+			})
+		})
+	});
+	dd.canvas.onEmptyDoubleClick((event, position) => {
+		event.preventDefault();
+		const item = {
+			id: dd.core.generateId(),
+			kind: TEXT_KIND,
+			position,
+			payload: { text: "" }
+		};
+		setDraft(item);
+		editing.begin(item.id);
+	});
+	dd.canvas.onPointerDown((event, context) => {
+		if (editing.intent() === null) return;
+		if ((event.target instanceof Element ? event.target : null)?.closest("[data-text-editor]") != null) return;
+		if (context.empty) event.preventDefault();
+		editing.commit();
+	});
+	registerClipboard(dd);
+	registerTextCommands(dd, editing);
+}
+export { activate as default };

package/icon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="1.8" stroke-linecap="square" stroke-linejoin="miter">
+  <path d="M10 4v10a3 3 0 0 0 3 3h3M6 8h10" stroke="#E7E5DE" stroke-width="2.5"/>
+  <path d="M5 21h14" stroke="#F66A2C"/>
+</svg>

package/manifest.json

@@ -0,0 +1,31 @@
+{
+  "id": "daydream.text",
+  "name": "Text",
+  "description": "Plain text notes on the canvas, outside any page.",
+  "version": "0.3.0",
+  "api": "3.1",
+  "contributes": {
+    "itemKinds": [
+      "daydream.text",
+      "mrbavio.text"
+    ],
+    "overlays": [
+      "draft"
+    ],
+    "commands": [
+      "daydream.text.edit",
+      "daydream.text.increase-font-size-canvas",
+      "daydream.text.decrease-font-size-canvas",
+      "daydream.text.increase-font-size-editor",
+      "daydream.text.decrease-font-size-editor"
+    ],
+    "shortcuts": {
+      "Enter": "daydream.text.edit",
+      "Mod++": "daydream.text.increase-font-size-canvas",
+      "Mod+=": "daydream.text.increase-font-size-canvas",
+      "Mod+-": "daydream.text.decrease-font-size-canvas"
+    },
+    "instructions": "Plain canvas annotations are provided by the Text plugin as kind daydream.text, not HTML inside a viewport. Its payload is {text: \"Hello World\"}. The text string must contain non-whitespace content and preserves newlines, repeated spaces, emoji and non-Latin text exactly. An agent adds one by writing an item of this kind into the canvas in daydream.json ({id, kind: \"daydream.text\", position, payload}). Text of 60 Unicode characters or fewer omits frame and starts auto-width; give longer text a width-only frame ({width}) of at most 60ch at its size \u2014 about 880px at the default 24px \u2014 so it wraps without truncation, never one long line. Pasted text gets that frame measured by the browser. People may resize afterward. Double-click typing starts auto-width. Existing items are not changed retroactively. Text uses the app's own typeface (system-ui with sans-serif fallbacks), regular weight, theme-aware canvas text (white in dark mode, charcoal in light), 1.4 line-height and a default 24px size. Cmd/Ctrl+plus (or equals) and Cmd/Ctrl+minus change selected or edited text by 2px down to 2px; fixed widths scale proportionally, explicit heights stay fixed and automatic heights follow the content. Keyboard-adjusted size persists as optional payload.fontSize (positive finite world pixels): omit it for new text and preserve it when round-tripping. No color, weight or typeface customization is available. canvas_state uses the exact text as the summary. The payload accepts only text and optional fontSize. Turning this plugin off preserves text items and their payloads as unknown-kind placeholders."
+  },
+  "built": "dist/index.js"
+}

package/package.json

@@ -1,6 +1,17 @@
 {
   "name": "@daydreamui/text",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.3.0",
+  "type": "module",
+  "description": "Plain text notes on the canvas, outside any page.",
+  "keywords": [
+    "daydream-plugin"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/martinbavio/daydream-plugins.git",
+    "directory": "plugins/daydream.text"
+  }
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.