@signal9/era-ui 4.14.1 → 4.15.1

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

@@ -209,6 +209,26 @@
 		text-box-edge: cap alphabetic;
 	}
 
+	/* FALLBACK for engines without text-box (Firefox): the trim above silently
+	 * disappears there, and the first line opened ~0.47em too low (measured:
+	 * cap 16.4px from the top against 8px from the left, dense/mono) — the
+	 * exact asymmetry the trim exists to remove. Approximate the same cut with
+	 * a negative first-block margin: -0.45em is the first line's half-leading
+	 * (0.3em at line-height 1.6) plus the ascent-above-cap of the ui stacks
+	 * (~0.15-0.17em). In em on purpose — it scales with the FIRST BLOCK's own
+	 * size, so a note opening on an h1 and one opening on a paragraph both
+	 * land their cap on the container inset, which one padding value could
+	 * never do for both (the reference terminal app's pt-1 is this same idea,
+	 * tuned only for paragraphs). The margin collapses up through .tiptap and
+	 * stops at the scroll container's padding, which is where it should act.
+	 * Within ~1px of the trimmed geometry; engines with text-box never match
+	 * this block and keep the exact version. */
+	@supports not ((text-box-trim: trim-start) and (text-box-edge: cap alphabetic)) {
+		.era-notes-prose :global(.tiptap > :first-child) {
+			margin-top: -0.45em;
+		}
+	}
+
 	/* Placeholder, via @tiptap/extension-placeholder */
 	.era-notes-prose :global(.tiptap p.is-editor-empty:first-child::before) {
 		content: attr(data-placeholder);

package/dist/apps/notes/notes.svelte

@@ -17,7 +17,7 @@
 	 * follows the density, surface, corners, motion, and font axes like any other
 	 * component in the library.
 	 */
-	import { onDestroy, onMount, untrack } from 'svelte';
+	import { onDestroy, onMount, untrack, type Snippet } from 'svelte';
 	import FileText from '@lucide/svelte/icons/file-text';
 	import Plus from '@lucide/svelte/icons/plus';
 	import Search from '@lucide/svelte/icons/search';
@@ -36,7 +36,7 @@
 	import { cn, keys } from '../../utils/index.js';
 	import NoteEditor from './note-editor.svelte';
 	import { NotesStore, localStorageAdapter, type NotesAdapter } from './notes-store.svelte.js';
-	import type { NoteInit, TiptapDocument } from './types.js';
+	import type { Note, NoteInit, TiptapDocument } from './types.js';
 
 	interface Props {
 		/**
@@ -53,6 +53,16 @@
 		noteId?: string | null;
 		/** Notes created only when storage comes back empty — a first-run sample. */
 		seed?: NoteInit[];
+		/**
+		 * The pane hosting this app, if any. Structural on purpose — an os-layer
+		 * `AppPane` satisfies it as-is, and Notes never has to import the os layer.
+		 * When provided, the document header (icon picker, title, save status)
+		 * moves out of the editor area and into the pane bar's CENTRE slot, the
+		 * way the reference terminal app titles its notes window; it is cleared
+		 * again on unmount. Omit it and the header renders above the editor as a
+		 * normal in-app bar.
+		 */
+		pane?: { center?: Snippet } | null;
 		class?: string;
 	}
 
@@ -62,6 +72,7 @@
 		storageKey,
 		noteId = $bindable(null),
 		seed,
+		pane,
 		class: className
 	}: Props = $props();
 
@@ -106,6 +117,20 @@
 		if (owned) store.destroy();
 	});
 
+	// Claim the pane bar's centre for the document header. An effect rather than
+	// a one-shot: `pane` can arrive late (the docs shell finds its Reader pane
+	// after mount) or change identity, and each run releases the previous claim.
+	// The guard on the cleanup matters — if some later occupant already replaced
+	// the snippet, unmounting Notes must not blank THEIR chrome.
+	$effect(() => {
+		const host = pane;
+		if (!host) return;
+		host.center = paneHeader;
+		return () => {
+			if (host.center === paneHeader) host.center = undefined;
+		};
+	});
+
 	function createNote() {
 		const note = store.create();
 		noteId = note.id;
@@ -138,6 +163,95 @@
 	}
 </script>
 
+{#snippet iconPicker(note: Note)}
+	<Popover.Root bind:open={iconPickerOpen}>
+		<Popover.Trigger icon size="xxs" aria-label="Change icon" title="Change icon">
+			{#if note.icon}
+				<span aria-hidden="true">{note.icon}</span>
+			{:else}
+				<FileText />
+			{/if}
+		</Popover.Trigger>
+		<Popover.Content align="start" class="w-max">
+			<div class="flex flex-col gap-gutter">
+				{#each ICON_ROWS as row, r (r)}
+					<div class="flex gap-gutter">
+						{#each row as glyph (glyph)}
+							<Button
+								icon
+								size="default"
+								active={note.icon === glyph}
+								aria-label={glyph}
+								onclick={() => {
+									store.setIcon(note.id, glyph);
+									iconPickerOpen = false;
+								}}
+							>
+								{glyph}
+							</Button>
+						{/each}
+					</div>
+				{/each}
+				{#if note.icon}
+					<Button
+						size="sm"
+						class="w-full"
+						onclick={() => {
+							store.setIcon(note.id, null);
+							iconPickerOpen = false;
+						}}
+					>
+						Clear icon
+					</Button>
+				{/if}
+			</div>
+		</Popover.Content>
+	</Popover.Root>
+{/snippet}
+
+<!-- The document header, pane-bar edition: the same icon picker and title,
+     compacted for the bar's centre track. data-pane-control is what makes an
+     EDITABLE title possible inside a drag zone — a press on the cluster means
+     caret/click, everywhere else on the bar still means drag. The input is
+     content-sized (field-sizing) so the cluster hugs the title and stays
+     optically centred; the status badge hangs OFF the flow (absolute, past the
+     right edge) so saved/error appearing never nudges the centred title. -->
+{#snippet titleField(note: Note, cls: string)}
+	<Input
+		reveal
+		size="xxs"
+		class={cls}
+		aria-label="Note title"
+		placeholder="Untitled"
+		value={note.title}
+		oninput={(e: Event & { currentTarget: HTMLInputElement }) =>
+			store.update(note.id, { title: e.currentTarget.value })}
+	/>
+{/snippet}
+
+{#snippet statusBadge()}
+	{#if store.status === 'saved'}
+		<Badge tone="success">saved</Badge>
+	{:else if store.status === 'error'}
+		<Badge tone="destructive" title={store.lastError ?? undefined}>error</Badge>
+	{/if}
+{/snippet}
+
+{#snippet paneHeader()}
+	{#if selected}
+		<div class="relative flex min-w-0 items-center gap-(--era-gap)" data-pane-control>
+			{@render iconPicker(selected)}
+			{@render titleField(selected, 'field-sizing-content max-w-56 min-w-0 text-center')}
+			<!-- Absolutely positioned, so the badge appearing never nudges the
+			     centred title; empty when the status is quiet, which costs
+			     nothing off-flow. -->
+			<span class="absolute top-1/2 left-full ml-(--era-gap) -translate-y-1/2">
+				{@render statusBadge()}
+			</span>
+		</div>
+	{/if}
+{/snippet}
+
 <div
 	class={cn('flex h-full min-h-0 text-body text-fg', className)}
 	use:keys={{
@@ -163,11 +277,7 @@
 		     centred in 23px and sat 2.5px from the top against a 3px wall. Outset
 		     costs no layout, so the bar keeps its full tier height and every child
 		     sits the wall's distance from all four edges. -->
-		<Bar
-			size="md"
-			content="xxs"
-			class="shrink-0 rounded-none [box-shadow:0_1px_0_var(--color-divider-faded)]"
-		>
+		<Bar size="md" content="xxs" divider class="rounded-none">
 			<Input
 				icon={Search}
 				size="xxs"
@@ -326,77 +436,21 @@
 			<!-- Matches the sidebar's filter bar exactly — the two headers sit side by
 			     side across the top of the app, so they must be the same tier. -->
 			<!-- Same outset divider as the sidebar's filter bar above. -->
-			<Bar
-				size="md"
-				content="xxs"
-				class="shrink-0 rounded-none [box-shadow:0_1px_0_var(--color-divider-faded)]"
-			>
-				<Popover.Root bind:open={iconPickerOpen}>
-					<Popover.Trigger icon size="xxs" aria-label="Change icon" title="Change icon">
-						{#if selected.icon}
-							<span aria-hidden="true">{selected.icon}</span>
-						{:else}
-							<FileText />
-						{/if}
-					</Popover.Trigger>
-					<Popover.Content align="start" class="w-max">
-						<div class="flex flex-col gap-gutter">
-							{#each ICON_ROWS as row, r (r)}
-								<div class="flex gap-gutter">
-									{#each row as glyph (glyph)}
-										<Button
-											icon
-											size="default"
-											active={selected.icon === glyph}
-											aria-label={glyph}
-											onclick={() => {
-												store.setIcon(selected.id, glyph);
-												iconPickerOpen = false;
-											}}
-										>
-											{glyph}
-										</Button>
-									{/each}
-								</div>
-							{/each}
-							{#if selected.icon}
-								<Button
-									size="sm"
-									class="w-full"
-									onclick={() => {
-										store.setIcon(selected.id, null);
-										iconPickerOpen = false;
-									}}
-								>
-									Clear icon
-								</Button>
-							{/if}
-						</div>
-					</Popover.Content>
-				</Popover.Root>
-
-				<Input
-					reveal
-					size="xxs"
-					class="min-w-0 flex-1"
-					aria-label="Note title"
-					placeholder="Untitled"
-					value={selected.title}
-					oninput={(e: Event & { currentTarget: HTMLInputElement }) =>
-						store.update(selected.id, { title: e.currentTarget.value })}
-				/>
-
-				<!-- Fixed-width so the badge appearing and clearing never nudges the
-				     title field; `saving` is deliberately silent — the badge only
-				     reports a settled outcome. -->
-				<span class="flex w-16 shrink-0 justify-end">
-					{#if store.status === 'saved'}
-						<Badge tone="success">saved</Badge>
-					{:else if store.status === 'error'}
-						<Badge tone="destructive" title={store.lastError ?? undefined}>error</Badge>
-					{/if}
-				</span>
-			</Bar>
+			<!-- Rendered only when no pane hosts the app — with a pane, the same
+			     header (see the snippets below) lives in the pane bar's centre and
+			     drawing it twice would title the document twice. -->
+			{#if !pane}
+				<Bar size="md" content="xxs" divider class="rounded-none">
+					{@render iconPicker(selected)}
+					{@render titleField(selected, 'min-w-0 flex-1')}
+					<!-- Fixed-width so the badge appearing and clearing never nudges the
+					     title field; `saving` is deliberately silent — the badge only
+					     reports a settled outcome. -->
+					<span class="flex w-16 shrink-0 justify-end">
+						{@render statusBadge()}
+					</span>
+				</Bar>
+			{/if}
 
 			<div class="min-h-0 flex-1 overflow-x-hidden overflow-y-auto p-card">
 				<!-- ProseMirror owns the document once running, so switching notes

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

@@ -1,3 +1,22 @@
+/**
+     * Notes — a complete, client-side notes app.
+     *
+     * An era port of the term/web notes app: same TipTap editor, same slash menu
+     * and selection toolbar, same heading-tree index. Two things changed.
+     *
+     * PERSISTENCE. The original round-tripped every edit through a server via
+     * TanStack Query, which forced a whole dirty-override layer — local edits had
+     * to out-rank refetched query data, or an in-flight save clobbered what you
+     * were typing. Here the store IS the source of truth and persistence is a
+     * debounced write behind it, so the editor writes straight through and there
+     * is nothing to reconcile.
+     *
+     * CHROME. Everything visible is an era primitive (Bar, Button, Input, Badge,
+     * Popover, ScrollArea, AlertDialog, Skeleton) on era tokens, so the app
+     * follows the density, surface, corners, motion, and font axes like any other
+     * component in the library.
+     */
+import { type Snippet } from 'svelte';
 import { NotesStore, type NotesAdapter } from './notes-store.svelte.js';
 import type { NoteInit } from './types.js';
 interface Props {
@@ -15,6 +34,18 @@ interface Props {
     noteId?: string | null;
     /** Notes created only when storage comes back empty — a first-run sample. */
     seed?: NoteInit[];
+    /**
+     * The pane hosting this app, if any. Structural on purpose — an os-layer
+     * `AppPane` satisfies it as-is, and Notes never has to import the os layer.
+     * When provided, the document header (icon picker, title, save status)
+     * moves out of the editor area and into the pane bar's CENTRE slot, the
+     * way the reference terminal app titles its notes window; it is cleared
+     * again on unmount. Omit it and the header renders above the editor as a
+     * normal in-app bar.
+     */
+    pane?: {
+        center?: Snippet;
+    } | null;
     class?: string;
 }
 declare const Notes: import("svelte").Component<Props, {}, "noteId">;

package/dist/dev/audit/audits/prose-leading.js

@@ -49,7 +49,6 @@ function ownTextLines(el) {
             tops.add(Math.round(rect.top * 2) / 2);
         }
     }
-    range.detach();
     return tops.size;
 }
 export const proseLeading = {
@@ -58,11 +57,24 @@ export const proseLeading = {
     description: 'Text that wraps to a second line must set its own leading (leading-body) — otherwise it inherits a fixed-height row’s control leading and the lines collide.',
     category: 'layout',
     severity: 'error',
-    // Only elements that can hold text directly; a <div> wrapper with no text of
-    // its own has nothing to measure and is skipped by ownTextLines anyway.
-    selector: '*',
+    // Text-bearing elements only. The audit is about PROSE, and the wrapping the
+    // check measures happens on the element that owns the text nodes — chrome
+    // tags (svg, input, button…) can't fire it, so they never pay for a style
+    // read. div/span stay in: half the wrapping copy in this library lives in
+    // them.
+    selector: 'p, span, div, li, dd, dt, td, th, label, a, blockquote, figcaption, h1, h2, h3, h4, h5, h6',
     check(el) {
-        if (!el.textContent?.trim())
+        // Cheapest gate first: any own text at all? A scan over direct children
+        // short-circuits; textContent would serialize the whole subtree on every
+        // wrapper in the tree.
+        let hasText = false;
+        for (const n of el.childNodes) {
+            if (n.nodeType === Node.TEXT_NODE && n.textContent.trim()) {
+                hasText = true;
+                break;
+            }
+        }
+        if (!hasText)
             return null;
         const s = getComputedStyle(el);
         // Text that cannot wrap cannot have this bug — the whole defect is the
@@ -76,16 +88,17 @@ export const proseLeading = {
         const ratio = lineHeight / fontSize;
         if (ratio >= PROSE_RATIO)
             return null;
-        // The expensive half, deliberately last: only measure once the leading is
-        // already known to be too tight.
-        if (ownTextLines(el) < 2)
+        // The expensive half (a Range + getClientRects is a forced layout read),
+        // deliberately last and measured once: only elements whose leading is
+        // already known to be too tight pay for it.
+        const lines = ownTextLines(el);
+        if (lines < 2)
             return null;
-        const issue = {
+        return {
             auditId: 'typography/prose-leading',
             element: el,
             message: `wrapped text at line-height ${ratio.toFixed(2)}× (${lineHeight.toFixed(1)}px on ${fontSize}px type) — this is control leading, inherited from a fixed-height row. Add leading-body.`,
-            details: { ratio: +ratio.toFixed(2), lineHeight, fontSize, lines: ownTextLines(el) }
+            details: { ratio: +ratio.toFixed(2), lineHeight, fontSize, lines }
         };
-        return issue;
     }
 };