@signal9/era-ui 3.10.0 → 3.12.0

package/dist/apps/index.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The apps layer — whole, opinionated applications built out of era primitives.
+ *
+ * `ui/` ships unopinionated pieces and `ai/` ships chat/agent composites; an app
+ * here is the finished thing: its own data model, its own persistence, its own
+ * keyboard map. You drop it into a window and it works. That also means an app
+ * makes product decisions a primitive never would, which is exactly why these
+ * live behind their own subpath instead of the root barrel.
+ *
+ * Apps are NOT re-exported from `@sig-nine/era-ui`. Each carries heavy,
+ * app-specific dependencies (Notes brings TipTap), and the same reasoning that
+ * isolates `ai/workflow` on its own subpath applies here: a consumer who never
+ * imports an app never pays for it. Import from `@sig-nine/era-ui/apps` (or a
+ * single app, e.g. `@sig-nine/era-ui/apps/notes`) and install that app's peers.
+ *
+ * Exports are flat and prefixed by app (`Notes`, `NotesStore`, `NoteEditor`) so
+ * a second app can land without a namespace churn.
+ */
+export * from './notes/index.js';

package/dist/apps/index.js

@@ -0,0 +1,19 @@
+/**
+ * The apps layer — whole, opinionated applications built out of era primitives.
+ *
+ * `ui/` ships unopinionated pieces and `ai/` ships chat/agent composites; an app
+ * here is the finished thing: its own data model, its own persistence, its own
+ * keyboard map. You drop it into a window and it works. That also means an app
+ * makes product decisions a primitive never would, which is exactly why these
+ * live behind their own subpath instead of the root barrel.
+ *
+ * Apps are NOT re-exported from `@sig-nine/era-ui`. Each carries heavy,
+ * app-specific dependencies (Notes brings TipTap), and the same reasoning that
+ * isolates `ai/workflow` on its own subpath applies here: a consumer who never
+ * imports an app never pays for it. Import from `@sig-nine/era-ui/apps` (or a
+ * single app, e.g. `@sig-nine/era-ui/apps/notes`) and install that app's peers.
+ *
+ * Exports are flat and prefixed by app (`Notes`, `NotesStore`, `NoteEditor`) so
+ * a second app can land without a namespace churn.
+ */
+export * from './notes/index.js';

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

@@ -0,0 +1,11 @@
+/**
+ * The selection ("bubble") toolbar.
+ *
+ * A plain ProseMirror plugin view rather than `@tiptap/extension-bubble-menu`:
+ * the official extension brings its own positioning engine and its own DOM, and
+ * both would have to be re-skinned anyway. This mounts an era `Bar` of `Button`s
+ * with `mount()` and drives it from `update()` — the same approach the slash
+ * menu takes, so both overlays share one placement helper and one set of tokens.
+ */
+import { Extension } from '@tiptap/core';
+export declare const BubbleMenu: Extension<any, any>;

package/dist/apps/notes/editor/bubble-menu.svelte.js

@@ -0,0 +1,106 @@
+/**
+ * The selection ("bubble") toolbar.
+ *
+ * A plain ProseMirror plugin view rather than `@tiptap/extension-bubble-menu`:
+ * the official extension brings its own positioning engine and its own DOM, and
+ * both would have to be re-skinned anyway. This mounts an era `Bar` of `Button`s
+ * with `mount()` and drives it from `update()` — the same approach the slash
+ * menu takes, so both overlays share one placement helper and one set of tokens.
+ */
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import { mount, unmount } from 'svelte';
+import Bold from '@lucide/svelte/icons/bold';
+import Italic from '@lucide/svelte/icons/italic';
+import Strikethrough from '@lucide/svelte/icons/strikethrough';
+import Code from '@lucide/svelte/icons/code';
+import Highlighter from '@lucide/svelte/icons/highlighter';
+import LinkIcon from '@lucide/svelte/icons/link';
+import BubbleToolbar from './bubble-toolbar.svelte';
+import { createOverlayHost, placeOverSelection } from './floating.js';
+import { toggleLink } from './link.js';
+const buttons = [
+    {
+        mark: 'bold',
+        label: 'Bold',
+        icon: Bold,
+        command: (ed) => ed.chain().focus().toggleBold().run()
+    },
+    {
+        mark: 'italic',
+        label: 'Italic',
+        icon: Italic,
+        command: (ed) => ed.chain().focus().toggleItalic().run()
+    },
+    {
+        mark: 'strike',
+        label: 'Strikethrough',
+        icon: Strikethrough,
+        command: (ed) => ed.chain().focus().toggleStrike().run()
+    },
+    {
+        mark: 'code',
+        label: 'Code',
+        icon: Code,
+        command: (ed) => ed.chain().focus().toggleCode().run()
+    },
+    {
+        mark: 'highlight',
+        label: 'Highlight',
+        icon: Highlighter,
+        command: (ed) => ed.chain().focus().toggleHighlight().run()
+    },
+    { mark: 'link', label: 'Link', icon: LinkIcon, command: toggleLink }
+];
+const items = buttons.map(({ mark, label, icon }) => ({ mark, label, icon }));
+class BubbleMenuView {
+    #host;
+    #toolbar;
+    #editor;
+    #view = $state({
+        items,
+        active: {},
+        onCommand: (_mark) => { }
+    });
+    constructor(editor) {
+        this.#editor = editor;
+        this.#view.onCommand = (mark) => buttons.find((b) => b.mark === mark)?.command(editor);
+        this.#host = createOverlayHost();
+        this.#host.style.display = 'none';
+        document.body.append(this.#host);
+        this.#toolbar = mount(BubbleToolbar, { target: this.#host, props: this.#view });
+    }
+    update(view) {
+        const { state } = view;
+        const { selection } = state;
+        // Hide for a caret, an unfocused editor, a selection with no text (an image
+        // or table node), and inside a code block where marks do not apply.
+        if (selection.empty ||
+            !view.hasFocus() ||
+            !state.doc.textBetween(selection.from, selection.to).length ||
+            this.#editor.isActive('codeBlock')) {
+            this.#host.style.display = 'none';
+            return;
+        }
+        this.#view.active = Object.fromEntries(buttons.map((b) => [b.mark, this.#editor.isActive(b.mark)]));
+        // Measuring requires a laid-out box, so unhide before placing.
+        this.#host.style.display = 'block';
+        placeOverSelection(this.#host, view.coordsAtPos(selection.from), view.coordsAtPos(selection.to));
+    }
+    destroy() {
+        unmount(this.#toolbar);
+        this.#host.remove();
+    }
+}
+export const BubbleMenu = Extension.create({
+    name: 'notesBubbleMenu',
+    addProseMirrorPlugins() {
+        const editor = this.editor;
+        return [
+            new Plugin({
+                key: new PluginKey('notesBubbleMenu'),
+                view: () => new BubbleMenuView(editor)
+            })
+        ];
+    }
+});

package/dist/apps/notes/editor/bubble-toolbar.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	/**
+	 * The selection toolbar — an era `Bar` of latched icon `Button`s.
+	 *
+	 * `active` is Button's latched state (it emits `data-state="on"`), so a mark
+	 * that is on reads as a held-down key on every surface, including bevel where
+	 * the whole affordance is depth rather than tone.
+	 */
+	import type { Component } from 'svelte';
+	import type { IconProps } from '@lucide/svelte';
+	import { Bar } from '../../../ui/bar/index.js';
+	import { Button } from '../../../ui/button/index.js';
+
+	interface Props {
+		items: Array<{ mark: string; label: string; icon: Component<IconProps> }>;
+		/** Which marks are active at the current selection. */
+		active: Record<string, boolean>;
+		onCommand: (mark: string) => void;
+	}
+
+	let { items, active, onCommand }: Props = $props();
+</script>
+
+<Bar size="sm" class="w-max bg-elevated shadow-lg glass-blur">
+	{#each items as item (item.mark)}
+		{@const Icon = item.icon}
+		<Button
+			icon
+			size="icon"
+			active={active[item.mark] ?? false}
+			aria-label={item.label}
+			title={item.label}
+			onmousedown={(e: MouseEvent) => {
+				// Taking focus would collapse the very selection the command formats.
+				e.preventDefault();
+				onCommand(item.mark);
+			}}
+		>
+			<Icon />
+		</Button>
+	{/each}
+</Bar>

package/dist/apps/notes/editor/bubble-toolbar.svelte.d.ts

@@ -0,0 +1,22 @@
+/**
+     * The selection toolbar — an era `Bar` of latched icon `Button`s.
+     *
+     * `active` is Button's latched state (it emits `data-state="on"`), so a mark
+     * that is on reads as a held-down key on every surface, including bevel where
+     * the whole affordance is depth rather than tone.
+     */
+import type { Component } from 'svelte';
+import type { IconProps } from '@lucide/svelte';
+interface Props {
+    items: Array<{
+        mark: string;
+        label: string;
+        icon: Component<IconProps>;
+    }>;
+    /** Which marks are active at the current selection. */
+    active: Record<string, boolean>;
+    onCommand: (mark: string) => void;
+}
+declare const BubbleToolbar: Component<Props, {}, "">;
+type BubbleToolbar = ReturnType<typeof BubbleToolbar>;
+export default BubbleToolbar;

package/dist/apps/notes/editor/extensions.d.ts

@@ -0,0 +1,18 @@
+/**
+ * The Notes editor's extension set.
+ *
+ * Ported from the term/web notes app with two deliberate changes:
+ *
+ * - The slash menu and bubble toolbar are era components (see the sibling
+ *   `.svelte.ts` files) instead of hand-built DOM, so the editor chrome tracks
+ *   the density / surface / corners / motion / font axes like the rest of the
+ *   library.
+ * - `@tiptap/extension-mathematics` is NOT included. It needs KaTeX's stylesheet
+ *   and font files to render anything but raw markup, and that is a large,
+ *   single-feature dependency to force on every consumer of this subpath. Add it
+ *   in your own extension list (and import `katex/dist/katex.min.css`) if you
+ *   want it — `noteExtensions` is a plain array, so spreading and extending it
+ *   is the supported path.
+ */
+import { type Extensions } from '@tiptap/core';
+export declare const noteExtensions: Extensions;

package/dist/apps/notes/editor/extensions.js

@@ -0,0 +1,88 @@
+/**
+ * The Notes editor's extension set.
+ *
+ * Ported from the term/web notes app with two deliberate changes:
+ *
+ * - The slash menu and bubble toolbar are era components (see the sibling
+ *   `.svelte.ts` files) instead of hand-built DOM, so the editor chrome tracks
+ *   the density / surface / corners / motion / font axes like the rest of the
+ *   library.
+ * - `@tiptap/extension-mathematics` is NOT included. It needs KaTeX's stylesheet
+ *   and font files to render anything but raw markup, and that is a large,
+ *   single-feature dependency to force on every consumer of this subpath. Add it
+ *   in your own extension list (and import `katex/dist/katex.min.css`) if you
+ *   want it — `noteExtensions` is a plain array, so spreading and extending it
+ *   is the supported path.
+ */
+import { Extension } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import { TaskList } from '@tiptap/extension-task-list';
+import { TaskItem } from '@tiptap/extension-task-item';
+import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';
+import Placeholder from '@tiptap/extension-placeholder';
+import Typography from '@tiptap/extension-typography';
+import { Table, TableRow, TableCell, TableHeader } from '@tiptap/extension-table';
+import { Highlight } from '@tiptap/extension-highlight';
+import { Details, DetailsSummary, DetailsContent } from '@tiptap/extension-details';
+import Image from '@tiptap/extension-image';
+import { UniqueID } from '@tiptap/extension-unique-id';
+import { Markdown } from 'tiptap-markdown';
+import { common, createLowlight } from 'lowlight';
+import { ListCleanupRule } from './list-cleanup-rule.js';
+import { SlashCommand } from './slash-command.svelte.js';
+import { BubbleMenu } from './bubble-menu.svelte.js';
+import { toggleLink } from './link.js';
+const LinkShortcut = Extension.create({
+    name: 'linkShortcut',
+    addKeyboardShortcuts() {
+        return {
+            'Mod-k': ({ editor }) => {
+                toggleLink(editor);
+                return true;
+            }
+        };
+    }
+});
+const lowlight = createLowlight(common);
+export const noteExtensions = [
+    StarterKit.configure({
+        heading: { levels: [1, 2, 3] },
+        // Replaced by the lowlight variant below.
+        codeBlock: false,
+        dropcursor: { color: 'var(--color-8)', width: 2 }
+    }),
+    CodeBlockLowlight.configure({ lowlight }),
+    TaskList.configure({
+        HTMLAttributes: { class: 'task-list' }
+    }),
+    TaskItem.configure({
+        nested: true,
+        HTMLAttributes: { class: 'task-item' },
+        a11y: {
+            checkboxLabel: (_node, checked) => (checked ? 'Task completed' : 'Task not completed')
+        }
+    }),
+    // Tables
+    Table.configure({ resizable: false, HTMLAttributes: { class: 'note-table' } }),
+    TableRow,
+    TableCell,
+    TableHeader,
+    // Inline formatting
+    Highlight.configure({ multicolor: false }),
+    // Block types
+    Details,
+    DetailsSummary,
+    DetailsContent,
+    Image.configure({ inline: true, allowBase64: true }),
+    // Utility
+    Placeholder.configure({ placeholder: 'Type / for commands…' }),
+    Typography,
+    // Stable ids on headings are what `tree.ts` addresses sections by, so
+    // section retrieval survives edits above the heading.
+    UniqueID.configure({ types: ['heading', 'paragraph', 'listItem', 'taskItem'] }),
+    Markdown.configure({ html: false }),
+    ListCleanupRule,
+    SlashCommand,
+    LinkShortcut,
+    BubbleMenu
+];

package/dist/apps/notes/editor/floating.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Placement for the two editor overlays (slash menu, bubble toolbar).
+ *
+ * They are mounted at the document root rather than inside the editor so a
+ * scrolling or `overflow: hidden` editor pane can never clip them — which means
+ * they are positioned in viewport coordinates and have to keep themselves on
+ * screen. ProseMirror hands out viewport rects already, so `position: fixed` is
+ * the natural fit and no scroll-offset bookkeeping is needed.
+ */
+/** Create the fixed, root-level host element an overlay component mounts into. */
+export declare function createOverlayHost(): HTMLDivElement;
+/** Anchor below `rect`, flipping above when the bottom edge would run off. */
+export declare function placeBelow(host: HTMLElement, rect: DOMRect, gap?: number): void;
+/** Centre over a selection, flipping below when there is no room above. */
+export declare function placeOverSelection(host: HTMLElement, start: {
+    top: number;
+    left: number;
+    bottom: number;
+}, end: {
+    right: number;
+}, gap?: number): void;

package/dist/apps/notes/editor/floating.js

@@ -0,0 +1,44 @@
+/**
+ * Placement for the two editor overlays (slash menu, bubble toolbar).
+ *
+ * They are mounted at the document root rather than inside the editor so a
+ * scrolling or `overflow: hidden` editor pane can never clip them — which means
+ * they are positioned in viewport coordinates and have to keep themselves on
+ * screen. ProseMirror hands out viewport rects already, so `position: fixed` is
+ * the natural fit and no scroll-offset bookkeeping is needed.
+ */
+const EDGE = 4;
+/** Create the fixed, root-level host element an overlay component mounts into. */
+export function createOverlayHost() {
+    const host = document.createElement('div');
+    // z-50 is the bits-ui portal band — the same layer menus and dialogs use, so
+    // editor chrome stacks consistently with the rest of the library.
+    host.style.cssText = 'position:fixed;top:0;left:0;z-index:50;';
+    return host;
+}
+/** Anchor below `rect`, flipping above when the bottom edge would run off. */
+export function placeBelow(host, rect, gap = EDGE) {
+    const box = host.getBoundingClientRect();
+    const left = clamp(rect.left, EDGE, window.innerWidth - box.width - EDGE);
+    let top = rect.bottom + gap;
+    if (top + box.height > window.innerHeight - EDGE) {
+        const above = rect.top - box.height - gap;
+        top = above >= EDGE ? above : window.innerHeight - box.height - EDGE;
+    }
+    host.style.left = `${Math.max(EDGE, left)}px`;
+    host.style.top = `${Math.max(EDGE, top)}px`;
+}
+/** Centre over a selection, flipping below when there is no room above. */
+export function placeOverSelection(host, start, end, gap = 6) {
+    const box = host.getBoundingClientRect();
+    const centerX = (start.left + end.right) / 2;
+    const left = clamp(centerX - box.width / 2, EDGE, window.innerWidth - box.width - EDGE);
+    let top = start.top - box.height - gap;
+    if (top < EDGE)
+        top = start.bottom + gap;
+    host.style.left = `${Math.max(EDGE, left)}px`;
+    host.style.top = `${Math.max(EDGE, top)}px`;
+}
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), Math.max(min, max));
+}

package/dist/apps/notes/editor/link.d.ts

@@ -0,0 +1,9 @@
+import type { Editor } from '@tiptap/core';
+/**
+ * The one link behaviour, shared by the bubble toolbar and Mod-K.
+ *
+ * Three cases, in order: an existing link is removed; a selection that is
+ * already a bare URL links to itself (the common paste-then-select gesture);
+ * anything else asks for a target.
+ */
+export declare function toggleLink(editor: Editor): void;

package/dist/apps/notes/editor/link.js

@@ -0,0 +1,22 @@
+/**
+ * The one link behaviour, shared by the bubble toolbar and Mod-K.
+ *
+ * Three cases, in order: an existing link is removed; a selection that is
+ * already a bare URL links to itself (the common paste-then-select gesture);
+ * anything else asks for a target.
+ */
+export function toggleLink(editor) {
+    if (editor.isActive('link')) {
+        editor.chain().focus().unsetLink().run();
+        return;
+    }
+    const { from, to } = editor.state.selection;
+    const selected = editor.state.doc.textBetween(from, to);
+    if (/^https?:\/\/\S+$/.test(selected)) {
+        editor.chain().focus().setLink({ href: selected }).run();
+        return;
+    }
+    const url = globalThis.prompt?.('Enter URL:');
+    if (url)
+        editor.chain().focus().setLink({ href: url }).run();
+}

package/dist/apps/notes/editor/list-cleanup-rule.d.ts

@@ -0,0 +1,14 @@
+import { Extension } from '@tiptap/core';
+/**
+ * Strips redundant list prefixes typed INSIDE a list item.
+ *
+ * TipTap turns a leading `1. ` into an ordered list. The user then presses
+ * Enter and — as humans do — types `2. `, which is now literal text inside an
+ * already-numbered item: "2. 2. Walk the dog". Same for `- ` inside a bullet
+ * list.
+ *
+ * These rules fire only when the cursor is genuinely inside a list of the
+ * matching kind, so the ordinary wrapping rules that CREATE lists are left
+ * alone.
+ */
+export declare const ListCleanupRule: Extension<any, any>;

package/dist/apps/notes/editor/list-cleanup-rule.js

@@ -0,0 +1,47 @@
+import { Extension, InputRule } from '@tiptap/core';
+/**
+ * Strips redundant list prefixes typed INSIDE a list item.
+ *
+ * TipTap turns a leading `1. ` into an ordered list. The user then presses
+ * Enter and — as humans do — types `2. `, which is now literal text inside an
+ * already-numbered item: "2. 2. Walk the dog". Same for `- ` inside a bullet
+ * list.
+ *
+ * These rules fire only when the cursor is genuinely inside a list of the
+ * matching kind, so the ordinary wrapping rules that CREATE lists are left
+ * alone.
+ */
+export const ListCleanupRule = Extension.create({
+    name: 'listCleanupRule',
+    addInputRules() {
+        return [
+            // "N. " typed while already in an ordered list
+            new InputRule({
+                find: /^(\d+)\.\s$/,
+                handler: ({ state, range }) => {
+                    const { $from } = state.selection;
+                    for (let depth = $from.depth; depth > 0; depth--) {
+                        if ($from.node(depth).type.name === 'orderedList') {
+                            state.apply(state.tr.delete(range.from, range.to));
+                            return;
+                        }
+                    }
+                    // Not in an ordered list — leave it to the wrapping rule.
+                }
+            }),
+            // "- " or "* " typed while already in a bullet list
+            new InputRule({
+                find: /^[-*]\s$/,
+                handler: ({ state, range }) => {
+                    const { $from } = state.selection;
+                    for (let depth = $from.depth; depth > 0; depth--) {
+                        if ($from.node(depth).type.name === 'bulletList') {
+                            state.apply(state.tr.delete(range.from, range.to));
+                            return;
+                        }
+                    }
+                }
+            })
+        ];
+    }
+});

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

@@ -0,0 +1,22 @@
+/**
+ * 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, type Editor, type Range } from '@tiptap/core';
+import { type Component } from 'svelte';
+import type { IconProps } from '@lucide/svelte';
+export interface SlashCommandItem {
+    title: string;
+    description: string;
+    icon: Component<IconProps>;
+    command: (editor: Editor, range: Range) => void;
+}
+export declare const slashItems: SlashCommandItem[];
+export declare const SlashCommand: Extension<any, any>;