@signal9/era-ui 4.14.1 → 4.15.0

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,86 @@
 	}
 </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 paneHeader()}
+	{#if selected}
+		<div class="relative flex min-w-0 items-center gap-(--era-gap)" data-pane-control>
+			{@render iconPicker(selected)}
+			<Input
+				reveal
+				size="xxs"
+				class="field-sizing-content max-w-56 min-w-0 text-center"
+				aria-label="Note title"
+				placeholder="Untitled"
+				value={selected.title}
+				oninput={(e: Event & { currentTarget: HTMLInputElement }) =>
+					store.update(selected.id, { title: e.currentTarget.value })}
+			/>
+			{#if store.status === 'saved' || store.status === 'error'}
+				<span class="absolute top-1/2 left-full ml-(--era-gap) -translate-y-1/2">
+					{#if store.status === 'saved'}
+						<Badge tone="success">saved</Badge>
+					{:else}
+						<Badge tone="destructive" title={store.lastError ?? undefined}>error</Badge>
+					{/if}
+				</span>
+			{/if}
+		</div>
+	{/if}
+{/snippet}
+
 <div
 	class={cn('flex h-full min-h-0 text-body text-fg', className)}
 	use:keys={{
@@ -326,77 +431,40 @@
 			<!-- 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>
+			<!-- 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"
+					class="shrink-0 rounded-none [box-shadow:0_1px_0_var(--color-divider-faded)]"
+				>
+					{@render iconPicker(selected)}
 
-				<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 })}
-				/>
+					<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>
+					<!-- 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>
+			{/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">;