@signal9/era-ui 6.0.0 → 8.0.0

package/dist/ai/prompt-input/prompt-input-textarea.svelte

@@ -61,5 +61,4 @@
 		'field-sizing-content max-h-48 min-h-(--era-h-md) w-full resize-none bg-transparent px-(--era-inset-md) py-[calc((var(--era-h-md)-1lh)/2)] text-body leading-body text-fg outline-none placeholder:text-muted',
 		className
 	)}
-	{...restProps}
-></textarea>
+	{...restProps}></textarea>

package/dist/ai/reasoning/reasoning.svelte

@@ -6,6 +6,10 @@
 	let {
 		streaming = false,
 		open = $bindable(false),
+		// A $props() default is read by the TEMPLATE, which eslint's scope
+		// analysis does not model — it sees only the effect below reassigning
+		// this and calls the default dead.
+		// eslint-disable-next-line no-useless-assignment
 		duration = $bindable(0),
 		children,
 		class: className

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

@@ -18,6 +18,9 @@
 	import { untrack } from 'svelte';
 	import { Editor, type JSONContent } from '@tiptap/core';
 	import { noteExtensions } from './editor/extensions.js';
+	// Side-effect import: mounting the editor should not require the consumer to
+	// remember a stylesheet. Also published as `@signal9/era-ui/styles/prose`.
+	import '../../styles/prose.css';
 
 	interface Props {
 		/** Initial document. Later changes are ignored — re-key to reseed. */
@@ -167,367 +170,7 @@
 <!-- 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);
-
-		/*
-		 * The first line's half-leading is not padding, but it reads as padding.
-		 *
-		 * line-height 1.6 puts ~8px of empty box above the first glyph's cap, on
-		 * top of the container's 8px inset — so the document opened 16px from the
-		 * top and 8px from the left, an asymmetry that grows with the first
-		 * block's font size (a note starting with a heading was the worst case).
-		 *
-		 * Trimming the block-start to the cap edge makes the ink itself sit on the
-		 * container's inset, so the first thing you read has the same space above
-		 * it as beside it, whatever block it happens to be. This is the block half
-		 * of what era-text-trim does for single-line controls; only the START is
-		 * trimmed, because the editor scrolls and trimming the end would put the
-		 * last line's descenders past the scrollable area.
-		 *
-		 * Firefox has no text-box yet and keeps the untrimmed leading — the same
-		 * graceful degradation era-text-trim already ships with.
-		 */
-		text-box-trim: trim-start;
-		text-box-edge: cap alphabetic;
-	}
-
-	/* The optical half of the trim. cap trimming is EXACT — the cap sits on the
-	 * container inset to the pixel — but the LEFT side isn't: glyphs start with
-	 * their side bearing (~0.07em of ink-free space inside the line box), so a
-	 * geometrically-equal corner read top-tight. The first block gets that same
-	 * allowance back as margin, in em so a heading's compensation scales with
-	 * the heading — the corner then MEASURES slightly uneven and finally LOOKS
-	 * even, which is the order optics always wins in.
-	 *
-	 * 0.22em, not the ~0.07em side-bearing alone: a first line is usually a
-	 * heavy cap or a heading, and dense ink right at a boundary needs more
-	 * room than a light vertical stem to feel equally far from it — the same
-	 * reason display type sets its top margin above geometric equality. Tuned
-	 * by eye against the left inset. */
-	.era-notes-prose :global(.tiptap > :first-child) {
-		margin-top: 0.22em;
-	}
-
-	/* 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) {
-			/* -0.45em of untrimmed leading, plus the same +0.22em optical
-			 * allowance the trimmed path adds above. */
-			margin-top: -0.23em;
-		}
-	}
-
-	/* 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, currentColor 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: currentColor;
-	}
-
-	/* Highlight — the warning token PAIR, not a wash of it.
-	 *
-	 * This was a 25% warning tint with `color: inherit`, which is two problems at
-	 * once: at 25% the mark barely separates from the page, and pushing the alpha
-	 * up to fix that puts light body text on yellow, which is worse. The pair
-	 * exists for exactly this — warning-fg is dark in EVERY mode by design
-	 * (see themes.css: yellow cannot carry light text), so a solid fill reads as
-	 * a real highlighter and the text on it stays legible in both modes. */
-	.era-notes-prose :global(.tiptap mark) {
-		padding: 1px 0;
-		background: var(--color-warning);
-		color: var(--color-warning-fg);
-	}
-
-	/* 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);
-	}
-	/* NO ::selection rule here, deliberately.
-	 *
-	 * era owns text selection as a surface token contract — --era-selection-bg /
-	 * -fg / -shadow (surfaces/base.css), which is how flat gets inverse video,
-	 * glass a glowing wash, and bevel an opaque accent bar. This file used to
-	 * override it with `background: var(--color-4)` and no `color`, which threw
-	 * all of that away AND left body text on a mid-scale grey: the band barely
-	 * separated from the page and the glyphs sat on top of it at whatever
-	 * contrast happened to fall out. Dropping the override restores both the
-	 * contrast (bright fill, --color-1 glyphs) and the per-surface treatment.
-	 *
-	 * The ProseMirror overrides above are still needed — those replace hardcoded
-	 * library chrome that no era token would otherwise reach. */
-</style>
+<!-- The document styling lives in ../../styles/prose.css, imported above:
+     Svelte would scope a <style> block to this component, which is what made
+     era's prose typography unreachable for anyone building their own TipTap
+     instance. Same rules, addressable by anyone who sets .era-notes-prose. -->

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

@@ -1,4 +1,5 @@
 import { type JSONContent } from '@tiptap/core';
+import '../../styles/prose.css';
 interface Props {
     /** Initial document. Later changes are ignored — re-key to reseed. */
     content: JSONContent;