@signal9/era-ui 3.9.0 → 3.11.0

package/dist/apps/notes/note-editor.svelte

@@ -0,0 +1,456 @@
+<script lang="ts">
+	/**
+	 * The TipTap document surface.
+	 *
+	 * The editor instance is created inside an attachment so its lifetime is tied
+	 * to the element, and torn down with it. `content` is a SEED, not a bound
+	 * value: ProseMirror owns the document once it is running, so re-feeding it
+	 * every keystroke would fight the editor. The host re-seeds by re-keying this
+	 * component (`{#key noteId}`) when it switches notes.
+	 *
+	 * Prose styling lives in the scoped stylesheet below and is written entirely
+	 * against era tokens, so a document follows the density, surface, corners,
+	 * and theme axes the same way a control does.
+	 *
+	 * (Do not spell a literal style tag in this comment — svelte2tsx 0.7.58 scans
+	 * for it lexically and decides the script never closed.)
+	 */
+	import { untrack } from 'svelte';
+	import { Editor, type JSONContent } from '@tiptap/core';
+	import { noteExtensions } from './editor/extensions.js';
+
+	interface Props {
+		/** Initial document. Later changes are ignored — re-key to reseed. */
+		content: JSONContent;
+		onUpdate?: (json: JSONContent) => void;
+		/** Placeholder shown on an empty first paragraph. */
+		class?: string;
+	}
+
+	let { content, onUpdate, class: className }: Props = $props();
+
+	let editor: Editor | undefined;
+
+	type MarkdownStorage = { markdown?: { getMarkdown?: () => string } };
+
+	let activeFormats = $state<Record<string, boolean>>({});
+
+	function updateActiveFormats(ed: Editor) {
+		activeFormats = {
+			bold: ed.isActive('bold'),
+			italic: ed.isActive('italic'),
+			strike: ed.isActive('strike'),
+			code: ed.isActive('code'),
+			highlight: ed.isActive('highlight'),
+			heading: ed.isActive('heading'),
+			bulletList: ed.isActive('bulletList'),
+			orderedList: ed.isActive('orderedList'),
+			taskList: ed.isActive('taskList'),
+			blockquote: ed.isActive('blockquote'),
+			codeBlock: ed.isActive('codeBlock'),
+			details: ed.isActive('details'),
+			table: ed.isActive('table'),
+			link: ed.isActive('link')
+		};
+	}
+
+	function initEditor(element: HTMLDivElement) {
+		// untrack: the attachment must not re-run when `content` or `onUpdate`
+		// change — tearing down and rebuilding the editor mid-typing would lose
+		// the selection and the undo history.
+		return untrack(() => {
+			editor = new Editor({
+				element,
+				extensions: noteExtensions,
+				content,
+				onUpdate: ({ editor: ed }) => {
+					onUpdate?.(ed.getJSON());
+					updateActiveFormats(ed);
+				},
+				onSelectionUpdate: ({ editor: ed }) => {
+					updateActiveFormats(ed);
+				}
+			});
+			return () => {
+				editor?.destroy();
+				editor = undefined;
+			};
+		});
+	}
+
+	/*
+	 * Imperative API. The bubble toolbar and slash menu already cover these for a
+	 * pointer/keyboard user; these exports exist so a HOST can drive the document
+	 * from its own chrome — a window toolbar, a command palette, an agent tool —
+	 * without reaching into TipTap itself. Bind the component and call them.
+	 */
+
+	export function isActive(name: string) {
+		return activeFormats[name] ?? false;
+	}
+
+	export function focus() {
+		editor?.chain().focus().run();
+	}
+
+	export function formatBold() {
+		editor?.chain().focus().toggleBold().run();
+	}
+	export function formatItalic() {
+		editor?.chain().focus().toggleItalic().run();
+	}
+	export function formatStrike() {
+		editor?.chain().focus().toggleStrike().run();
+	}
+	export function formatCode() {
+		editor?.chain().focus().toggleCode().run();
+	}
+	export function formatHighlight() {
+		editor?.chain().focus().toggleHighlight().run();
+	}
+	export function formatLink() {
+		if (editor) void import('./editor/link.js').then((m) => m.toggleLink(editor!));
+	}
+
+	export function formatHeading(level: 1 | 2 | 3 = 2) {
+		editor?.chain().focus().toggleHeading({ level }).run();
+	}
+	export function formatBlockquote() {
+		editor?.chain().focus().toggleBlockquote().run();
+	}
+	export function formatList() {
+		editor?.chain().focus().toggleBulletList().run();
+	}
+	export function formatOrderedList() {
+		editor?.chain().focus().toggleOrderedList().run();
+	}
+	export function formatTaskList() {
+		editor?.chain().focus().toggleTaskList().run();
+	}
+	export function formatCodeBlock() {
+		editor?.chain().focus().toggleCodeBlock().run();
+	}
+	export function formatDetails() {
+		editor?.chain().focus().setDetails().run();
+	}
+
+	export function insertTable() {
+		editor?.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
+	}
+	export function deleteTable() {
+		editor?.chain().focus().deleteTable().run();
+	}
+	export function addTableRow() {
+		editor?.chain().focus().addRowAfter().run();
+	}
+	export function addTableCol() {
+		editor?.chain().focus().addColumnAfter().run();
+	}
+	export function deleteTableRow() {
+		editor?.chain().focus().deleteRow().run();
+	}
+	export function deleteTableCol() {
+		editor?.chain().focus().deleteColumn().run();
+	}
+
+	export function insertImage() {
+		const url = globalThis.prompt?.('Image URL:');
+		if (url) editor?.chain().focus().setImage({ src: url }).run();
+	}
+
+	/** The document as markdown, via tiptap-markdown's serializer. */
+	export function getMarkdown(): string {
+		return (editor?.storage as MarkdownStorage | undefined)?.markdown?.getMarkdown?.() ?? '';
+	}
+</script>
+
+<!-- eslint-disable better-tailwindcss/no-unknown-classes -- era-notes-prose is defined in this component's scoped stylesheet -->
+<div class="era-notes-prose min-w-0 {className ?? ''}" {@attach initEditor}></div>
+
+<style>
+	/*
+	 * TipTap renders headless: the editable element it creates carries `.tiptap`,
+	 * so every rule here is scoped to that inside this component's wrapper.
+	 *
+	 * Vertical rhythm is ONE value — --era-gap, the library's inter-element gap —
+	 * on every block's bottom margin. A document then breathes at exactly the
+	 * pace the surrounding chrome does, and loosens with density along with it.
+	 *
+	 * Font family is deliberately absent: the [data-font] axis sets it globally
+	 * (with !important, by design), so anything declared here would either lose
+	 * or break the axis promise.
+	 */
+	.era-notes-prose :global(.tiptap) {
+		outline: none;
+		min-height: 100%;
+		font-size: var(--era-text);
+		line-height: 1.6;
+		color: var(--color-fg);
+	}
+
+	/* Placeholder, via @tiptap/extension-placeholder */
+	.era-notes-prose :global(.tiptap p.is-editor-empty:first-child::before) {
+		content: attr(data-placeholder);
+		float: left;
+		height: 0;
+		color: var(--color-muted);
+		pointer-events: none;
+	}
+
+	/* Typography */
+	.era-notes-prose :global(.tiptap p) {
+		margin: 0 0 var(--era-gap);
+	}
+	.era-notes-prose :global(.tiptap p:last-child) {
+		margin-bottom: 0;
+	}
+	.era-notes-prose :global(.tiptap h1) {
+		font-size: 1.5em;
+	}
+	.era-notes-prose :global(.tiptap h2) {
+		font-size: 1.25em;
+	}
+	.era-notes-prose :global(.tiptap h3) {
+		font-size: 1.1em;
+	}
+	.era-notes-prose :global(.tiptap h1),
+	.era-notes-prose :global(.tiptap h2),
+	.era-notes-prose :global(.tiptap h3) {
+		margin: 0 0 var(--era-gap);
+		font-weight: 600;
+		line-height: 1.6;
+		color: var(--color-bright);
+	}
+	.era-notes-prose :global(.tiptap strong) {
+		font-weight: 600;
+		color: var(--color-bright);
+	}
+	.era-notes-prose :global(.tiptap em) {
+		font-style: italic;
+	}
+	.era-notes-prose :global(.tiptap s) {
+		text-decoration: line-through;
+		text-decoration-thickness: 0.5px;
+	}
+
+	/* Code — inline chips take the xxs radius, blocks the lg one a Card uses. */
+	.era-notes-prose :global(.tiptap code) {
+		padding: 1px var(--era-inset-xxs);
+		border-radius: var(--era-rd-xxs);
+		background: var(--era-surface-bg-elevated);
+	}
+	.era-notes-prose :global(.tiptap pre) {
+		overflow-x: auto;
+		margin: 0 0 var(--era-gap);
+		padding: var(--era-inset-md);
+		border-radius: var(--era-rd-lg);
+		background: var(--color-surface);
+		box-shadow: var(--era-shadow);
+	}
+	.era-notes-prose :global(.tiptap pre code) {
+		padding: 0;
+		border-radius: 0;
+		background: transparent;
+	}
+
+	/* Syntax highlighting — the neutral scale, so it themes with everything else. */
+	.era-notes-prose :global(.tiptap pre .hljs-keyword),
+	.era-notes-prose :global(.tiptap pre .hljs-built_in) {
+		color: var(--color-9);
+	}
+	.era-notes-prose :global(.tiptap pre .hljs-string),
+	.era-notes-prose :global(.tiptap pre .hljs-regexp) {
+		color: var(--color-10);
+	}
+	.era-notes-prose :global(.tiptap pre .hljs-number),
+	.era-notes-prose :global(.tiptap pre .hljs-literal),
+	.era-notes-prose :global(.tiptap pre .hljs-type),
+	.era-notes-prose :global(.tiptap pre .hljs-class) {
+		color: var(--color-11);
+	}
+	.era-notes-prose :global(.tiptap pre .hljs-comment) {
+		color: var(--color-8);
+	}
+	.era-notes-prose :global(.tiptap pre .hljs-function),
+	.era-notes-prose :global(.tiptap pre .hljs-title) {
+		font-weight: 600;
+		color: var(--color-9);
+	}
+	.era-notes-prose :global(.tiptap pre .hljs-variable),
+	.era-notes-prose :global(.tiptap pre .hljs-attr) {
+		color: var(--color-12);
+	}
+	.era-notes-prose :global(.tiptap pre .hljs-params) {
+		color: var(--color-11);
+	}
+	.era-notes-prose :global(.tiptap pre .hljs-meta),
+	.era-notes-prose :global(.tiptap pre .hljs-tag) {
+		color: var(--color-10);
+	}
+
+	/* Blockquote */
+	.era-notes-prose :global(.tiptap blockquote) {
+		margin: 0 0 var(--era-gap);
+		padding-left: var(--era-inset-md);
+		border-left: 2px solid var(--era-divider-color);
+		color: var(--color-muted);
+	}
+
+	/* Lists */
+	.era-notes-prose :global(.tiptap li),
+	.era-notes-prose :global(.tiptap li p),
+	.era-notes-prose :global(.tiptap ul),
+	.era-notes-prose :global(.tiptap ol) {
+		margin: 0;
+	}
+	.era-notes-prose :global(.tiptap ul) {
+		padding-left: 1.4em;
+		list-style-type: disc;
+	}
+	.era-notes-prose :global(.tiptap ol) {
+		padding-left: 1.9em;
+		list-style-type: decimal;
+	}
+
+	/* Task list — a checkbox styled like era's Checkbox, at the icon tier. */
+	.era-notes-prose :global(.tiptap .task-list) {
+		padding-left: 0;
+		list-style: none;
+	}
+	.era-notes-prose :global(.tiptap .task-item) {
+		display: flex;
+		gap: var(--era-gap);
+	}
+	.era-notes-prose :global(.tiptap .task-item label) {
+		/* Match the line box so the box centres against the first line of text. */
+		display: flex;
+		align-items: center;
+		height: calc(var(--era-text) * 1.6);
+	}
+	.era-notes-prose :global(.tiptap .task-item input[type='checkbox']) {
+		flex-shrink: 0;
+		width: calc(var(--era-h-xs) - 4px);
+		height: calc(var(--era-h-xs) - 4px);
+		border-radius: var(--era-rd-xs);
+		background: var(--era-surface-bg-elevated);
+		box-shadow: var(--era-shadow-well);
+		appearance: none;
+		cursor: pointer;
+		transition:
+			background var(--era-duration) var(--era-ease),
+			box-shadow var(--era-duration) var(--era-ease);
+	}
+	.era-notes-prose :global(.tiptap .task-item input[type='checkbox']:hover) {
+		background: var(--era-highlight);
+	}
+	.era-notes-prose :global(.tiptap .task-item input[type='checkbox']:checked) {
+		background: var(--color-primary);
+		box-shadow: var(--era-shadow-pressed);
+	}
+	.era-notes-prose :global(.tiptap .task-item[data-checked='true'] > div > p) {
+		color: var(--color-muted);
+		text-decoration: line-through;
+	}
+
+	/* Horizontal rule */
+	.era-notes-prose :global(.tiptap hr) {
+		margin: var(--era-gap) 0;
+		border: none;
+		border-top: 1px solid var(--era-divider-color);
+	}
+
+	/* Links — the era-link recipe, inlined because ProseMirror owns this DOM. */
+	.era-notes-prose :global(.tiptap a) {
+		color: var(--color-link);
+		text-decoration-line: underline;
+		text-decoration-color: color-mix(in oklch, var(--color-muted) 30%, transparent);
+		text-underline-offset: 0.2em;
+		cursor: pointer;
+		transition: text-decoration-color var(--era-duration) var(--era-ease);
+	}
+	.era-notes-prose :global(.tiptap a:hover) {
+		text-decoration-color: var(--color-fg);
+	}
+
+	/* Highlight — translucent warning so it reads on every theme and surface. */
+	.era-notes-prose :global(.tiptap mark) {
+		padding: 1px 0;
+		background: oklch(from var(--color-warning) l c h / 0.25);
+		color: inherit;
+	}
+
+	/* Table */
+	.era-notes-prose :global(.tiptap .note-table) {
+		width: 100%;
+		margin: 0 0 var(--era-gap);
+		border-collapse: collapse;
+		table-layout: fixed;
+	}
+	.era-notes-prose :global(.tiptap .note-table td),
+	.era-notes-prose :global(.tiptap .note-table th) {
+		padding: var(--era-inset-sm) var(--era-inset-md);
+		border: 1px solid var(--era-divider-color);
+		text-align: left;
+		vertical-align: top;
+	}
+	.era-notes-prose :global(.tiptap .note-table th) {
+		background: var(--color-surface);
+		font-weight: 600;
+		color: var(--color-bright);
+	}
+	.era-notes-prose :global(.tiptap .note-table td > p),
+	.era-notes-prose :global(.tiptap .note-table th > p) {
+		margin: 0;
+	}
+
+	/* Details (collapsible) */
+	.era-notes-prose :global(.tiptap details) {
+		margin: 0 0 var(--era-gap);
+		padding: var(--era-inset-sm) var(--era-inset-md);
+		border-radius: var(--era-rd-md);
+		background: var(--era-surface-bg-elevated);
+		box-shadow: var(--era-shadow);
+	}
+	.era-notes-prose :global(.tiptap details summary) {
+		font-weight: 600;
+		color: var(--color-bright);
+		cursor: pointer;
+	}
+	.era-notes-prose :global(.tiptap details > div) {
+		margin-top: var(--era-gap);
+	}
+
+	/* Image */
+	.era-notes-prose :global(.tiptap img) {
+		max-width: 100%;
+		height: auto;
+		border-radius: var(--era-rd-md);
+	}
+
+	/*
+	 * ProseMirror ships hardcoded selection colours (#8cf outlines, a black gap
+	 * cursor, rgba(200,200,255,.4) cell selection, #adf resize handles). Each is
+	 * overridden here or the editor shows chrome from a different design system.
+	 */
+	.era-notes-prose :global(.tiptap .ProseMirror-selectednode) {
+		outline: 2px solid var(--color-primary);
+	}
+	.era-notes-prose :global(.tiptap li.ProseMirror-selectednode) {
+		outline: none;
+	}
+	.era-notes-prose :global(.tiptap li.ProseMirror-selectednode::after) {
+		border-color: var(--color-primary);
+	}
+	.era-notes-prose :global(.ProseMirror-gapcursor::after) {
+		border-top-color: var(--color-primary);
+	}
+	.era-notes-prose :global(.tiptap .selectedCell::after) {
+		background: var(--era-highlight);
+	}
+	.era-notes-prose :global(.tiptap .column-resize-handle) {
+		background-color: var(--color-primary);
+	}
+	.era-notes-prose :global(.tiptap ::selection) {
+		background: var(--color-4);
+	}
+</style>

package/dist/apps/notes/note-editor.svelte.d.ts

@@ -0,0 +1,35 @@
+import { type JSONContent } from '@tiptap/core';
+interface Props {
+    /** Initial document. Later changes are ignored — re-key to reseed. */
+    content: JSONContent;
+    onUpdate?: (json: JSONContent) => void;
+    /** Placeholder shown on an empty first paragraph. */
+    class?: string;
+}
+declare const NoteEditor: import("svelte").Component<Props, {
+    isActive: (name: string) => boolean;
+    focus: () => void;
+    formatBold: () => void;
+    formatItalic: () => void;
+    formatStrike: () => void;
+    formatCode: () => void;
+    formatHighlight: () => void;
+    formatLink: () => void;
+    formatHeading: (level?: 1 | 2 | 3) => void;
+    formatBlockquote: () => void;
+    formatList: () => void;
+    formatOrderedList: () => void;
+    formatTaskList: () => void;
+    formatCodeBlock: () => void;
+    formatDetails: () => void;
+    insertTable: () => void;
+    deleteTable: () => void;
+    addTableRow: () => void;
+    addTableCol: () => void;
+    deleteTableRow: () => void;
+    deleteTableCol: () => void;
+    insertImage: () => void;
+    getMarkdown: () => string;
+}, "">;
+type NoteEditor = ReturnType<typeof NoteEditor>;
+export default NoteEditor;

package/dist/apps/notes/notes-store.svelte.d.ts

@@ -0,0 +1,64 @@
+/**
+ * The Notes data layer — reactive state plus a pluggable persistence adapter.
+ *
+ * The store owns the notes; the adapter owns where they live. That split is
+ * deliberate: era ships a browser-only app (localStorage), but the same
+ * component is meant to drop into a host that persists server-side. Such a host
+ * supplies its own adapter and changes nothing else — which is why `load`/`save`
+ * are allowed to return promises even though the bundled adapters are sync.
+ *
+ * Writes are debounced and coalesced: every mutation marks the store dirty and
+ * re-arms one timer, so a burst of keystrokes costs a single `save`.
+ */
+import { type Note, type NoteInit, type NotePatch } from './types.js';
+export type SaveStatus = 'idle' | 'saving' | 'saved' | 'error';
+export interface NotesAdapter {
+    load(): Note[] | Promise<Note[]>;
+    save(notes: Note[]): void | Promise<void>;
+}
+export declare const DEFAULT_STORAGE_KEY = "era-ui:notes";
+/**
+ * Persist to `localStorage`. Safe to construct during SSR — it only touches
+ * storage inside `load`/`save`, and returns empty / no-ops when there is none.
+ */
+export declare function localStorageAdapter(key?: string): NotesAdapter;
+/** In-memory only — for demos, tests, and SSR snapshots. */
+export declare function memoryAdapter(seed?: Note[]): NotesAdapter;
+export interface NotesStoreOptions {
+    /** Where notes live. Defaults to `localStorage` under `era-ui:notes`. */
+    adapter?: NotesAdapter;
+    /** Quiet period before a burst of edits is flushed, in ms. Default 400. */
+    debounce?: number;
+    /** How long the `saved` badge lingers before falling back to `idle`, in ms. */
+    statusLinger?: number;
+}
+export declare class NotesStore {
+    #private;
+    notes: Note[];
+    /** True until the first `load()` settles — the list renders a skeleton on it. */
+    loading: boolean;
+    status: SaveStatus;
+    lastError: string | null;
+    /** Pinned first, then most-recently-touched. The order the sidebar renders. */
+    readonly ordered: Note[];
+    constructor(options?: NotesStoreOptions);
+    load(): Promise<void>;
+    get(id: string | null | undefined): Note | undefined;
+    /**
+     * Case-insensitive match over title AND body. Matching the body is why
+     * `plainText` is denormalised — the alternative is walking every document's
+     * AST on every keystroke.
+     */
+    search(query: string): Note[];
+    create(init?: NoteInit): Note;
+    update(id: string, patch: NotePatch): void;
+    remove(id: string): void;
+    togglePin(id: string): void;
+    setIcon(id: string, icon: string | null): void;
+    /** The note as markdown — for copy-out, export, or handing to a model. */
+    toMarkdown(id: string): string;
+    /** Persist immediately, cancelling any pending debounce. Safe to call spuriously. */
+    flush(): Promise<void>;
+    /** Clear timers and write out whatever is pending. Call from `onDestroy`. */
+    destroy(): void;
+}