@signal9/era-ui 3.9.0 → 3.11.0

package/dist/apps/notes/editor/slash-command.svelte.js

@@ -0,0 +1,215 @@
+/**
+ * The `/` slash-command menu.
+ *
+ * TipTap's Suggestion plugin is imperative — it hands you a `render()` object
+ * with `onStart`/`onUpdate`/`onKeyDown`/`onExit` and expects you to produce DOM.
+ * Rather than hand-build that DOM (and hand-maintain a second set of colours and
+ * spacings that would drift from the library the moment a token moved), this
+ * mounts a real Svelte component with `mount()` and feeds it a `$state` props
+ * object. The panel is therefore styled with era utilities like everything else
+ * and follows every axis automatically.
+ */
+import { Extension } from '@tiptap/core';
+import Suggestion from '@tiptap/suggestion';
+import { flushSync, mount, unmount } from 'svelte';
+import Heading1 from '@lucide/svelte/icons/heading-1';
+import Heading2 from '@lucide/svelte/icons/heading-2';
+import Heading3 from '@lucide/svelte/icons/heading-3';
+import List from '@lucide/svelte/icons/list';
+import ListOrdered from '@lucide/svelte/icons/list-ordered';
+import ListChecks from '@lucide/svelte/icons/list-checks';
+import SquareCode from '@lucide/svelte/icons/square-code';
+import Quote from '@lucide/svelte/icons/quote';
+import TableIcon from '@lucide/svelte/icons/table';
+import Minus from '@lucide/svelte/icons/minus';
+import ListCollapse from '@lucide/svelte/icons/list-collapse';
+import ImageIcon from '@lucide/svelte/icons/image';
+import SlashMenu from './slash-menu.svelte';
+import { createOverlayHost, placeBelow } from './floating.js';
+export const slashItems = [
+    {
+        title: 'Heading 1',
+        description: 'Large heading',
+        icon: Heading1,
+        command: (editor, range) => editor.chain().focus().deleteRange(range).setHeading({ level: 1 }).run()
+    },
+    {
+        title: 'Heading 2',
+        description: 'Medium heading',
+        icon: Heading2,
+        command: (editor, range) => editor.chain().focus().deleteRange(range).setHeading({ level: 2 }).run()
+    },
+    {
+        title: 'Heading 3',
+        description: 'Small heading',
+        icon: Heading3,
+        command: (editor, range) => editor.chain().focus().deleteRange(range).setHeading({ level: 3 }).run()
+    },
+    {
+        title: 'Bullet List',
+        description: 'Unordered list',
+        icon: List,
+        command: (editor, range) => editor.chain().focus().deleteRange(range).toggleBulletList().run()
+    },
+    {
+        title: 'Numbered List',
+        description: 'Ordered list',
+        icon: ListOrdered,
+        command: (editor, range) => editor.chain().focus().deleteRange(range).toggleOrderedList().run()
+    },
+    {
+        title: 'Task List',
+        description: 'Checklist',
+        icon: ListChecks,
+        command: (editor, range) => editor.chain().focus().deleteRange(range).toggleTaskList().run()
+    },
+    {
+        title: 'Code Block',
+        description: 'Highlighted code',
+        icon: SquareCode,
+        command: (editor, range) => editor.chain().focus().deleteRange(range).toggleCodeBlock().run()
+    },
+    {
+        title: 'Blockquote',
+        description: 'Quoted text',
+        icon: Quote,
+        command: (editor, range) => editor.chain().focus().deleteRange(range).toggleBlockquote().run()
+    },
+    {
+        title: 'Table',
+        description: '3×3 with header',
+        icon: TableIcon,
+        command: (editor, range) => editor
+            .chain()
+            .focus()
+            .deleteRange(range)
+            .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+            .run()
+    },
+    {
+        title: 'Divider',
+        description: 'Horizontal rule',
+        icon: Minus,
+        command: (editor, range) => editor.chain().focus().deleteRange(range).setHorizontalRule().run()
+    },
+    {
+        title: 'Details',
+        description: 'Collapsible section',
+        icon: ListCollapse,
+        command: (editor, range) => editor.chain().focus().deleteRange(range).setDetails().run()
+    },
+    {
+        title: 'Image',
+        description: 'Insert by URL',
+        icon: ImageIcon,
+        command: (editor, range) => {
+            const url = globalThis.prompt?.('Image URL:');
+            if (url)
+                editor.chain().focus().deleteRange(range).setImage({ src: url }).run();
+            // Still consume the "/image" text even when the prompt is dismissed.
+            else
+                editor.chain().focus().deleteRange(range).run();
+        }
+    }
+];
+export const SlashCommand = Extension.create({
+    name: 'slashCommand',
+    addProseMirrorPlugins() {
+        return [
+            Suggestion({
+                editor: this.editor,
+                char: '/',
+                allowSpaces: false,
+                startOfLine: false,
+                items: ({ query }) => {
+                    const q = query.toLowerCase();
+                    return slashItems.filter((item) => item.title.toLowerCase().includes(q) || item.description.toLowerCase().includes(q));
+                },
+                command: ({ editor, range, props }) => {
+                    props.command(editor, range);
+                },
+                render: () => {
+                    let host = null;
+                    let menu = null;
+                    let run = null;
+                    // The one object the mounted component reads. Mutating it is what
+                    // re-renders the panel — there is no second render path.
+                    const view = $state({
+                        items: [],
+                        selected: 0,
+                        onSelect: (index) => {
+                            const item = view.items[index];
+                            if (item)
+                                run?.(item);
+                        }
+                    });
+                    /** Apply pending prop changes, THEN measure — the panel's height
+                     *  changes with the filtered set, and placement depends on it. */
+                    function reposition(clientRect) {
+                        if (!host || !clientRect)
+                            return;
+                        flushSync();
+                        const rect = clientRect();
+                        if (rect)
+                            placeBelow(host, rect);
+                    }
+                    function move(delta) {
+                        const n = view.items.length;
+                        if (n === 0)
+                            return;
+                        view.selected = (view.selected + delta + n) % n;
+                    }
+                    return {
+                        onStart(props) {
+                            host = createOverlayHost();
+                            document.body.append(host);
+                            view.items = props.items;
+                            view.selected = 0;
+                            run = props.command;
+                            menu = mount(SlashMenu, { target: host, props: view });
+                            reposition(props.clientRect);
+                        },
+                        onUpdate(props) {
+                            view.items = props.items;
+                            // A changed query means a different result set — a stale index
+                            // would point at an unrelated command.
+                            view.selected = 0;
+                            run = props.command;
+                            reposition(props.clientRect);
+                        },
+                        onKeyDown(props) {
+                            switch (props.event.key) {
+                                case 'ArrowDown':
+                                    move(1);
+                                    return true;
+                                case 'ArrowUp':
+                                    move(-1);
+                                    return true;
+                                case 'Enter': {
+                                    const item = view.items[view.selected];
+                                    if (item)
+                                        run?.(item);
+                                    // Swallow Enter even with no match, so it can't split the
+                                    // paragraph out from under a menu that is still open.
+                                    return true;
+                                }
+                                case 'Escape':
+                                    return true;
+                                default:
+                                    return false;
+                            }
+                        },
+                        onExit() {
+                            if (menu)
+                                unmount(menu);
+                            menu = null;
+                            host?.remove();
+                            host = null;
+                            run = null;
+                        }
+                    };
+                }
+            })
+        ];
+    }
+});

package/dist/apps/notes/editor/slash-menu.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	/**
+	 * The `/` command palette, rendered from era's menu vocabulary — the same
+	 * floating-panel and row recipes DropdownMenu.Content / .Item use, so it picks
+	 * up every axis (density tiers, surface chrome, corners, font) for free.
+	 *
+	 * Presentational on purpose: TipTap's Suggestion plugin owns the query,
+	 * the filtered set, and the keyboard, and pushes the result in as props.
+	 */
+	import type { Component } from 'svelte';
+	import type { IconProps } from '@lucide/svelte';
+
+	interface Props {
+		items: Array<{ title: string; description: string; icon: Component<IconProps> }>;
+		/** Index of the highlighted row, driven by the plugin's key handler. */
+		selected: number;
+		onSelect: (index: number) => void;
+	}
+
+	let { items, selected, onSelect }: Props = $props();
+
+	let list = $state<HTMLDivElement | null>(null);
+
+	// Arrowing past the fold has to bring the row with it — the plugin moves the
+	// index, so nothing else would scroll the panel.
+	$effect(() => {
+		const row = list?.children[selected] as HTMLElement | undefined;
+		row?.scrollIntoView({ block: 'nearest' });
+	});
+</script>
+
+<div
+	bind:this={list}
+	class="scrollbar-none flex max-h-[calc(var(--era-h-md)*8)] w-max min-w-48 flex-col overflow-y-auto rounded-md bg-elevated p-menu shadow-lg glass-blur"
+>
+	{#if items.length === 0}
+		<div class="flex h-md items-center px-inset-md text-body era-text-trim text-muted">
+			No commands
+		</div>
+	{:else}
+		{#each items as item, i (item.title)}
+			{@const Icon = item.icon}
+			<button
+				type="button"
+				class="flex h-md w-full cursor-pointer items-center gap-gutter rounded-item px-inset-md text-left text-body era-text-trim text-fg {i ===
+				selected
+					? 'bg-highlight shadow-highlight'
+					: ''}"
+				title={item.description}
+				onmousedown={(e) => {
+					// Never let the panel take focus — the editor selection the command
+					// is about to act on would collapse before the handler runs.
+					e.preventDefault();
+					onSelect(i);
+				}}
+			>
+				<Icon class="size-xs shrink-0" />
+				<span class="flex-1">{item.title}</span>
+				<span class="shrink-0 text-muted">{item.description}</span>
+			</button>
+		{/each}
+	{/if}
+</div>

package/dist/apps/notes/editor/slash-menu.svelte.d.ts

@@ -0,0 +1,23 @@
+/**
+     * The `/` command palette, rendered from era's menu vocabulary — the same
+     * floating-panel and row recipes DropdownMenu.Content / .Item use, so it picks
+     * up every axis (density tiers, surface chrome, corners, font) for free.
+     *
+     * Presentational on purpose: TipTap's Suggestion plugin owns the query,
+     * the filtered set, and the keyboard, and pushes the result in as props.
+     */
+import type { Component } from 'svelte';
+import type { IconProps } from '@lucide/svelte';
+interface Props {
+    items: Array<{
+        title: string;
+        description: string;
+        icon: Component<IconProps>;
+    }>;
+    /** Index of the highlighted row, driven by the plugin's key handler. */
+    selected: number;
+    onSelect: (index: number) => void;
+}
+declare const SlashMenu: Component<Props, {}, "">;
+type SlashMenu = ReturnType<typeof SlashMenu>;
+export default SlashMenu;

package/dist/apps/notes/index.d.ts

@@ -0,0 +1,11 @@
+export { default as Notes } from './notes.svelte';
+export { default as NoteEditor } from './note-editor.svelte';
+export { NotesStore, localStorageAdapter, memoryAdapter, DEFAULT_STORAGE_KEY, type NotesAdapter, type NotesStoreOptions, type SaveStatus } from './notes-store.svelte.js';
+export { noteExtensions } from './editor/extensions.js';
+export { SlashCommand, slashItems, type SlashCommandItem } from './editor/slash-command.svelte.js';
+export { BubbleMenu } from './editor/bubble-menu.svelte.js';
+export { ListCleanupRule } from './editor/list-cleanup-rule.js';
+export { toggleLink } from './editor/link.js';
+export { tiptapToMarkdown, textContent } from './markdown.js';
+export { buildNoteTree, buildGlobalTree, countNodes, totalWords, treeToText, extractSection, extractSectionNodes, type NoteTreeNode, type SectionResult, type SectionNodes } from './tree.js';
+export { EMPTY_DOC, type Note, type NoteInit, type NoteListItem, type NotePatch, type TiptapDocument, type TiptapMark, type TiptapNode } from './types.js';

package/dist/apps/notes/index.js

@@ -0,0 +1,13 @@
+export { default as Notes } from './notes.svelte';
+export { default as NoteEditor } from './note-editor.svelte';
+export { NotesStore, localStorageAdapter, memoryAdapter, DEFAULT_STORAGE_KEY } from './notes-store.svelte.js';
+// The editor internals, exported so a host can extend the extension set,
+// reuse the slash items, or mount the editor without the surrounding app.
+export { noteExtensions } from './editor/extensions.js';
+export { SlashCommand, slashItems } from './editor/slash-command.svelte.js';
+export { BubbleMenu } from './editor/bubble-menu.svelte.js';
+export { ListCleanupRule } from './editor/list-cleanup-rule.js';
+export { toggleLink } from './editor/link.js';
+export { tiptapToMarkdown, textContent } from './markdown.js';
+export { buildNoteTree, buildGlobalTree, countNodes, totalWords, treeToText, extractSection, extractSectionNodes } from './tree.js';
+export { EMPTY_DOC } from './types.js';

package/dist/apps/notes/markdown.d.ts

@@ -0,0 +1,12 @@
+/**
+ * TipTap JSON → Markdown.
+ *
+ * A pure AST walker with no editor instance and no DOM: it runs on a stored
+ * document, not on a mounted editor. That is what lets `tree.ts` serialise one
+ * SECTION of a note (a heading and the blocks under it) — there is no editor
+ * for a slice of a document, so `editor.storage.markdown` cannot help there.
+ */
+import type { TiptapDocument, TiptapNode } from './types.js';
+export declare function tiptapToMarkdown(doc: TiptapDocument): string;
+/** Flatten a node's text, ignoring all structure. Used for `plainText` and search. */
+export declare function textContent(node: TiptapNode): string;

package/dist/apps/notes/markdown.js

@@ -0,0 +1,165 @@
+/**
+ * TipTap JSON → Markdown.
+ *
+ * A pure AST walker with no editor instance and no DOM: it runs on a stored
+ * document, not on a mounted editor. That is what lets `tree.ts` serialise one
+ * SECTION of a note (a heading and the blocks under it) — there is no editor
+ * for a slice of a document, so `editor.storage.markdown` cannot help there.
+ */
+export function tiptapToMarkdown(doc) {
+    if (!doc.content)
+        return '';
+    return doc.content.map((n) => blockToMd(n, 0)).join('\n\n');
+}
+/** Flatten a node's text, ignoring all structure. Used for `plainText` and search. */
+export function textContent(node) {
+    if (node.text)
+        return node.text;
+    if (!node.content)
+        return '';
+    return node.content.map(textContent).join('');
+}
+// -- Block nodes ----------------------------------------------------------
+function blockToMd(node, indent) {
+    switch (node.type) {
+        case 'heading':
+            return '#'.repeat(node.attrs?.level ?? 1) + ' ' + inline(node);
+        case 'paragraph':
+            return inline(node);
+        case 'bulletList':
+        case 'orderedList':
+        case 'taskList':
+            return listToMd(node, indent);
+        case 'codeBlock': {
+            const lang = node.attrs?.language ?? '';
+            return '```' + lang + '\n' + textContent(node) + '\n```';
+        }
+        case 'blockquote': {
+            const inner = (node.content ?? []).map((n) => blockToMd(n, 0)).join('\n\n');
+            return inner.replace(/^/gm, '> ');
+        }
+        case 'table':
+            return tableToMd(node);
+        case 'details':
+            return detailsToMd(node);
+        case 'image':
+            return `![${node.attrs?.alt ?? ''}](${node.attrs?.src ?? ''})`;
+        case 'horizontalRule':
+            return '---';
+        default:
+            return textContent(node);
+    }
+}
+// -- Lists ----------------------------------------------------------------
+function listToMd(node, indent) {
+    const items = node.content ?? [];
+    const isOrdered = node.type === 'orderedList';
+    const isTask = node.type === 'taskList';
+    return items
+        .map((item, idx) => {
+        let marker;
+        if (isTask) {
+            marker = item.attrs?.checked ? '- [x] ' : '- [ ] ';
+        }
+        else if (isOrdered) {
+            marker = `${idx + 1}. `;
+        }
+        else {
+            marker = '- ';
+        }
+        const blocks = item.content ?? [];
+        const pad = '  '.repeat(indent);
+        const continuation = pad + ' '.repeat(marker.length);
+        const lines = [];
+        for (const [i, block] of blocks.entries()) {
+            if (i === 0 && block.type === 'paragraph') {
+                lines.push(pad + marker + inline(block));
+            }
+            else if (block.type === 'bulletList' ||
+                block.type === 'orderedList' ||
+                block.type === 'taskList') {
+                lines.push(listToMd(block, indent + 1));
+            }
+            else if (block.type === 'paragraph') {
+                lines.push(continuation + inline(block));
+            }
+            else {
+                lines.push(blockToMd(block, indent + 1));
+            }
+        }
+        return lines.join('\n');
+    })
+        .join('\n');
+}
+// -- Tables ---------------------------------------------------------------
+function tableToMd(node) {
+    const rows = (node.content ?? []).filter((r) => r.type === 'tableRow');
+    if (rows.length === 0)
+        return '';
+    const mdRows = rows.map((row) => {
+        const cells = (row.content ?? []).map((cell) => (cell.content ?? []).map((block) => inline(block)).join(' '));
+        return '| ' + cells.join(' | ') + ' |';
+    });
+    // Markdown needs the alignment row directly under the header row.
+    const colCount = (rows[0].content ?? []).length;
+    const sep = '| ' + Array.from({ length: colCount }, () => '---').join(' | ') + ' |';
+    mdRows.splice(1, 0, sep);
+    return mdRows.join('\n');
+}
+// -- Details/Summary ------------------------------------------------------
+function detailsToMd(node) {
+    let summary = '';
+    const parts = [];
+    for (const child of node.content ?? []) {
+        if (child.type === 'detailsSummary') {
+            summary = inline(child);
+        }
+        else if (child.type === 'detailsContent') {
+            parts.push((child.content ?? []).map((n) => blockToMd(n, 0)).join('\n\n'));
+        }
+    }
+    return `<details>\n<summary>${summary}</summary>\n\n${parts.join('\n\n')}\n</details>`;
+}
+// -- Inline content -------------------------------------------------------
+function inline(node) {
+    if (!node.content)
+        return '';
+    return node.content.map(inlineNode).join('');
+}
+function inlineNode(node) {
+    if (node.type === 'text')
+        return applyMarks(node.text ?? '', node.marks);
+    if (node.type === 'hardBreak')
+        return '\n';
+    if (node.type === 'image')
+        return `![${node.attrs?.alt ?? ''}](${node.attrs?.src ?? ''})`;
+    return textContent(node);
+}
+function applyMarks(text, marks) {
+    if (!marks || marks.length === 0)
+        return text;
+    // Code wins outright — emphasis inside a code span is literal backtick noise.
+    if (marks.some((m) => m.type === 'code'))
+        return `\`${text}\``;
+    let result = text;
+    for (const mark of marks) {
+        switch (mark.type) {
+            case 'bold':
+                result = `**${result}**`;
+                break;
+            case 'italic':
+                result = `*${result}*`;
+                break;
+            case 'strike':
+                result = `~~${result}~~`;
+                break;
+            case 'highlight':
+                result = `==${result}==`;
+                break;
+            case 'link':
+                result = `[${result}](${mark.attrs?.href ?? ''})`;
+                break;
+        }
+    }
+    return result;
+}