beez-ui 0.7.0 → 0.8.0

package/dist/lib/rich-text/rich-markdown.js

@@ -0,0 +1,105 @@
+import { parseRichTextSegments } from "./link-markdown.js";
+import { RICH_TEXT_SEGMENT_TYPE } from "./link-markdown-constants.js";
+/**
+* Block-level markdown subset for long-form content such as descriptions and stories.
+*
+* It builds on top of the shared link parser (`parseRichTextSegments`) without
+* touching it, adding paragraphs, unordered lists (`- item` / `* item`) and
+* inline bold (`**text**`). Everything else stays plain text, so the renderer
+* never interprets raw HTML.
+*/
+export const RICH_MARKDOWN_BLOCK_TYPE = {
+	list: "list",
+	paragraph: "paragraph"
+};
+export const RICH_MARKDOWN_INLINE_TYPE = {
+	bold: "bold",
+	link: "link",
+	text: "text"
+};
+const LINE_BREAK_PATTERN = /\r?\n/;
+const LIST_ITEM_PATTERN = /^\s*[-*]\s+(.*)$/;
+const BOLD_PATTERN = /\*\*([^*]+)\*\*/g;
+const PARAGRAPH_LINE_SEPARATOR = "\n";
+function parseInlineLinks(text) {
+	return parseRichTextSegments(text).map((segment) => segment.type === RICH_TEXT_SEGMENT_TYPE.link ? {
+		text: segment.text,
+		type: RICH_MARKDOWN_INLINE_TYPE.link,
+		url: segment.url
+	} : {
+		text: segment.text,
+		type: RICH_MARKDOWN_INLINE_TYPE.text
+	});
+}
+function parseInlineSegments(text) {
+	const segments = [];
+	let lastIndex = 0;
+	for (const boldMatch of text.matchAll(BOLD_PATTERN)) {
+		const matchIndex = boldMatch.index ?? 0;
+		if (matchIndex > lastIndex) {
+			segments.push(...parseInlineLinks(text.slice(lastIndex, matchIndex)));
+		}
+		segments.push({
+			text: boldMatch[1],
+			type: RICH_MARKDOWN_INLINE_TYPE.bold
+		});
+		lastIndex = matchIndex + boldMatch[0].length;
+	}
+	if (lastIndex < text.length) {
+		segments.push(...parseInlineLinks(text.slice(lastIndex)));
+	}
+	return segments;
+}
+const EXCERPT_SEGMENT_SEPARATOR = " ";
+const EXCERPT_ELLIPSIS = "…";
+/**
+* Flattens the parsed content into plain text (formatting stripped) and trims it
+* to `maxLength`, for SEO descriptions and previews.
+*/
+export function buildRichMarkdownExcerpt(content, maxLength) {
+	const plainText = parseRichMarkdownBlocks(content).flatMap((block) => block.type === RICH_MARKDOWN_BLOCK_TYPE.paragraph ? block.segments.map((segment) => segment.text) : block.items.flatMap((itemSegments) => itemSegments.map((segment) => segment.text))).join(EXCERPT_SEGMENT_SEPARATOR).replace(/\s+/g, EXCERPT_SEGMENT_SEPARATOR).trim();
+	if (plainText.length <= maxLength) {
+		return plainText;
+	}
+	return plainText.slice(0, maxLength - EXCERPT_ELLIPSIS.length).trimEnd() + EXCERPT_ELLIPSIS;
+}
+export function parseRichMarkdownBlocks(content) {
+	const blocks = [];
+	let paragraphLines = [];
+	let listItems = [];
+	const flushParagraph = () => {
+		if (paragraphLines.length > 0) {
+			blocks.push({
+				segments: parseInlineSegments(paragraphLines.join(PARAGRAPH_LINE_SEPARATOR)),
+				type: RICH_MARKDOWN_BLOCK_TYPE.paragraph
+			});
+			paragraphLines = [];
+		}
+	};
+	const flushList = () => {
+		if (listItems.length > 0) {
+			blocks.push({
+				items: listItems,
+				type: RICH_MARKDOWN_BLOCK_TYPE.list
+			});
+			listItems = [];
+		}
+	};
+	for (const line of content.split(LINE_BREAK_PATTERN)) {
+		const listItemMatch = LIST_ITEM_PATTERN.exec(line);
+		if (listItemMatch) {
+			flushParagraph();
+			listItems.push(parseInlineSegments(listItemMatch[1]));
+			continue;
+		}
+		flushList();
+		if (line.trim().length === 0) {
+			flushParagraph();
+			continue;
+		}
+		paragraphLines.push(line);
+	}
+	flushParagraph();
+	flushList();
+	return blocks;
+}

package/dist/lib/rich-text/rich-text-editor-dom.d.ts

@@ -0,0 +1,26 @@
+/**
+ * DOM helpers that translate between the rich link editor's plain-text offsets
+ * and the browser `Selection`/`Range` API. Kept apart from the pure helpers so
+ * the latter can be unit-tested without a DOM.
+ */
+import type { RichTextSelectionRange } from "./link-markdown-types.js";
+/**
+ * Returns the plain-text character offset within `editor` for a DOM
+ * `(container, offset)` boundary, or `null` when it cannot be resolved.
+ */
+export declare function getEditorBoundaryOffset(editor: HTMLDivElement, container: Node, offset: number): number | null;
+/**
+ * Reads the current selection as a plain-text offset range within `editor`, or
+ * `null` when there is no selection inside the editor.
+ */
+export declare function getEditorSelectionRange(editor: HTMLDivElement): RichTextSelectionRange | null;
+/**
+ * Resolves a plain-text offset within `editor` to a DOM `(node, offset)`
+ * boundary, walking its text nodes.
+ */
+export declare function getEditorTextBoundary(editor: HTMLDivElement, targetOffset: number): {
+    node: Node;
+    offset: number;
+};
+/** Restores a plain-text offset range as the live selection inside `editor`. */
+export declare function setEditorSelectionRange(editor: HTMLDivElement, selectionRange: RichTextSelectionRange): void;

package/dist/lib/rich-text/rich-text-editor-dom.js

@@ -0,0 +1,79 @@
+/**
+* Returns the plain-text character offset within `editor` for a DOM
+* `(container, offset)` boundary, or `null` when it cannot be resolved.
+*/
+export function getEditorBoundaryOffset(editor, container, offset) {
+	const boundaryRange = document.createRange();
+	boundaryRange.selectNodeContents(editor);
+	try {
+		boundaryRange.setEnd(container, offset);
+	} catch {
+		return null;
+	}
+	return boundaryRange.toString().length;
+}
+/**
+* Reads the current selection as a plain-text offset range within `editor`, or
+* `null` when there is no selection inside the editor.
+*/
+export function getEditorSelectionRange(editor) {
+	const selection = window.getSelection();
+	if (!selection || selection.rangeCount === 0) {
+		return null;
+	}
+	const anchorNode = selection.anchorNode;
+	const focusNode = selection.focusNode;
+	if (!anchorNode || !focusNode) {
+		return null;
+	}
+	if (!editor.contains(anchorNode) || !editor.contains(focusNode)) {
+		return null;
+	}
+	const anchorOffset = getEditorBoundaryOffset(editor, anchorNode, selection.anchorOffset);
+	const focusOffset = getEditorBoundaryOffset(editor, focusNode, selection.focusOffset);
+	if (anchorOffset === null || focusOffset === null) {
+		return null;
+	}
+	return {
+		end: Math.max(anchorOffset, focusOffset),
+		start: Math.min(anchorOffset, focusOffset)
+	};
+}
+/**
+* Resolves a plain-text offset within `editor` to a DOM `(node, offset)`
+* boundary, walking its text nodes.
+*/
+export function getEditorTextBoundary(editor, targetOffset) {
+	const textNodeWalker = document.createTreeWalker(editor, NodeFilter.SHOW_TEXT);
+	let remainingOffset = targetOffset;
+	let currentNode = textNodeWalker.nextNode();
+	while (currentNode) {
+		const currentTextLength = currentNode.textContent?.length ?? 0;
+		if (remainingOffset <= currentTextLength) {
+			return {
+				node: currentNode,
+				offset: remainingOffset
+			};
+		}
+		remainingOffset -= currentTextLength;
+		currentNode = textNodeWalker.nextNode();
+	}
+	return {
+		node: editor,
+		offset: editor.childNodes.length
+	};
+}
+/** Restores a plain-text offset range as the live selection inside `editor`. */
+export function setEditorSelectionRange(editor, selectionRange) {
+	const selection = window.getSelection();
+	if (!selection) {
+		return;
+	}
+	const editorRange = document.createRange();
+	const startBoundary = getEditorTextBoundary(editor, selectionRange.start);
+	const endBoundary = getEditorTextBoundary(editor, selectionRange.end);
+	editorRange.setStart(startBoundary.node, startBoundary.offset);
+	editorRange.setEnd(endBoundary.node, endBoundary.offset);
+	selection.removeAllRanges();
+	selection.addRange(editorRange);
+}

package/dist/motion/tokens.d.ts

@@ -1,4 +1,7 @@
-/** Defines the timing, curves and physics shared by Motion animations, aligned with beui.dev/components/motion. */
+/**
+ * Defines the timing, curves and physics shared by Motion animations, aligned with beui.dev/components/motion.
+ * Public: consumers animate their own product surfaces with these tokens so they move like the library.
+ */
 export declare const MOTION_TIMING: {
     readonly fast: 0.14;
     readonly enter: 0.18;
@@ -18,6 +21,10 @@ export declare const MOTION_TIMING: {
     readonly closeDelay: 0.16;
     readonly sheetExit: 0.24;
     readonly reveal: 0.4;
+    /** Heart and badge pops that confirm a toggle. */
+    readonly pop: 0.32;
+    /** Height of expanding and collapsing regions. */
+    readonly collapse: 0.26;
     readonly monthSwap: 0.24;
     readonly cursorBlink: 1;
     readonly skeleton: 1.8;
@@ -85,6 +92,13 @@ export declare const SPRING_THUMB: {
     readonly damping: 80;
     readonly mass: 4;
 };
+/** Small, confident pops for counters, badges and toggled icons. */
+export declare const SPRING_POP: {
+    readonly type: "spring";
+    readonly stiffness: 520;
+    readonly damping: 30;
+    readonly mass: 0.5;
+};
 /** Primary actions compress noticeably; dense navigation items stay subtle. */
 export declare const MOTION_PRESS_SCALE = 0.93;
 export declare const MOTION_SUBTLE_PRESS_SCALE = 0.98;
@@ -95,6 +109,8 @@ export declare const MOTION_ITEM_CHECK_SCALE = 0.75;
 export declare const MOTION_ICON_SWAP_SCALE = 0.25;
 export declare const MOTION_CLOSE_BUTTON_SCALE = 0.8;
 export declare const MOTION_LIST_ITEM_DISTANCE = 6;
+/** Scale a freshly inserted list item starts from, and a leaving one shrinks to. */
+export declare const MOTION_ITEM_ENTER_SCALE = 0.98;
 /** Loaded images settle from a slight zoom, so they develop in place instead of popping in. */
 export declare const MOTION_REVEAL_SCALE = 1.06;
 export declare const MOTION_REVEAL_BLUR_PX = 6;

package/dist/motion/tokens.js

@@ -1,4 +1,7 @@
-/** Defines the timing, curves and physics shared by Motion animations, aligned with beui.dev/components/motion. */
+/**
+* Defines the timing, curves and physics shared by Motion animations, aligned with beui.dev/components/motion.
+* Public: consumers animate their own product surfaces with these tokens so they move like the library.
+*/
 export const MOTION_TIMING = {
 	fast: .14,
 	enter: .18,
@@ -18,6 +21,10 @@ export const MOTION_TIMING = {
 	closeDelay: .16,
 	sheetExit: .24,
 	reveal: .4,
+	/** Heart and badge pops that confirm a toggle. */
+	pop: .32,
+	/** Height of expanding and collapsing regions. */
+	collapse: .26,
 	monthSwap: .24,
 	cursorBlink: 1,
 	skeleton: 1.8
@@ -100,6 +107,13 @@ export const SPRING_THUMB = {
 	damping: 80,
 	mass: 4
 };
+/** Small, confident pops for counters, badges and toggled icons. */
+export const SPRING_POP = {
+	type: "spring",
+	stiffness: 520,
+	damping: 30,
+	mass: .5
+};
 /** Primary actions compress noticeably; dense navigation items stay subtle. */
 export const MOTION_PRESS_SCALE = .93;
 export const MOTION_SUBTLE_PRESS_SCALE = .98;
@@ -110,6 +124,8 @@ export const MOTION_ITEM_CHECK_SCALE = .75;
 export const MOTION_ICON_SWAP_SCALE = .25;
 export const MOTION_CLOSE_BUTTON_SCALE = .8;
 export const MOTION_LIST_ITEM_DISTANCE = 6;
+/** Scale a freshly inserted list item starts from, and a leaving one shrinks to. */
+export const MOTION_ITEM_ENTER_SCALE = .98;
 /** Loaded images settle from a slight zoom, so they develop in place instead of popping in. */
 export const MOTION_REVEAL_SCALE = 1.06;
 export const MOTION_REVEAL_BLUR_PX = 6;