@signal9/era-ui 23.1.0 → 23.2.0

package/dist/ai/todo/todo-item.svelte

@@ -0,0 +1,97 @@
+<script lang="ts" module>
+	import Circle from '@lucide/svelte/icons/circle';
+	import CircleCheck from '@lucide/svelte/icons/circle-check';
+	import CircleSlash from '@lucide/svelte/icons/circle-slash-2';
+	import LoaderCircle from '@lucide/svelte/icons/loader-circle';
+	import type { Component } from 'svelte';
+	import type { IconProps } from '@lucide/svelte';
+	import type { TodoStatus } from './context.svelte.js';
+
+	/*
+	 * GLYPHS, NOT UNICODE. The obvious implementation writes ○ ◐ ● ⊘ into a
+	 * span, and it is what agent TUIs do because a terminal has nothing else.
+	 * In a browser it goes wrong three ways: the four characters come from
+	 * different Unicode blocks with different metrics, so they do not sit on one
+	 * optical line; none of them respond to `size-icon`, so they do not scale
+	 * with the density axis; and a screen reader reads them aloud as their
+	 * character names. Lucide glyphs are one family, take the tier, and are
+	 * aria-hidden with the status carried in real text.
+	 */
+	const GLYPH: Record<TodoStatus, Component<IconProps>> = {
+		pending: Circle,
+		in_progress: LoaderCircle,
+		completed: CircleCheck,
+		cancelled: CircleSlash
+	};
+
+	/** Semantic tokens, never a palette literal — these follow theme and surface. */
+	const TONE: Record<TodoStatus, { icon: string; text: string }> = {
+		pending: { icon: 'text-muted', text: 'text-muted' },
+		in_progress: { icon: 'text-primary', text: 'text-bright' },
+		completed: { icon: 'text-success', text: 'text-fg' },
+		cancelled: { icon: 'text-muted', text: 'text-muted line-through' }
+	};
+
+	/** What a screen reader hears; the glyph is decorative. */
+	const LABEL: Record<TodoStatus, string> = {
+		pending: 'to do',
+		in_progress: 'in progress',
+		completed: 'completed',
+		cancelled: 'cancelled'
+	};
+</script>
+
+<script lang="ts">
+	import type { HTMLLiAttributes } from 'svelte/elements';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		status = 'pending',
+		content,
+		class: className,
+		...restProps
+	}: HTMLLiAttributes & {
+		status?: TodoStatus;
+		content?: string;
+	} = $props();
+
+	const Icon = $derived(GLYPH[status]);
+	const tone = $derived(TONE[status]);
+</script>
+
+<!--
+	ONE FACT, AND IT IS THE ACCESSIBLE ONE — the same rule Nav.Item follows.
+	`aria-current="step"` marks the item being worked on, and it is what a screen
+	reader announces when it reaches this row. `data-status` carries the full
+	four-way state for styling and for a consumer to key off. Neither is a
+	styling flag the caller sets separately, so the row cannot look active while
+	announcing nothing.
+
+	The row is on the control tier with the concentric icon inset, so a plan
+	nests inside a panel the same way every other era list does.
+-->
+<li
+	data-status={status}
+	aria-current={status === 'in_progress' ? 'step' : undefined}
+	class={cn(
+		'flex h-control items-center gap-inset-control rounded-control px-inset-control text-body',
+		tone.text,
+		className
+	)}
+	{...restProps}
+>
+	<Icon
+		class={cn(
+			'size-icon shrink-0',
+			tone.icon,
+			// The spinner is the ONE thing here that moves, and it takes the motion
+			// axis rather than a literal — at data-motion="instant", which is also
+			// what prefers-reduced-motion resolves to, it holds still.
+			status === 'in_progress' &&
+				'[animation-duration:calc(var(--era-duration)*8)] motion-safe:animate-spin'
+		)}
+		aria-hidden="true"
+	/>
+	<span class="min-w-0 flex-1 truncate">{content}</span>
+	<span class="sr-only">{LABEL[status]}</span>
+</li>

package/dist/ai/todo/todo-item.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Component } from 'svelte';
+import type { TodoStatus } from './context.svelte.js';
+import type { HTMLLiAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLLiAttributes & {
+    status?: TodoStatus;
+    content?: string;
+};
+declare const TodoItem: Component<$$ComponentProps, {}, "">;
+type TodoItem = ReturnType<typeof TodoItem>;
+export default TodoItem;

package/dist/ai/todo/todo-list.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Collapsible } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+	import { getTodoState, type TodoItem } from './context.svelte.js';
+	import TodoItemRow from './todo-item.svelte';
+
+	let {
+		item,
+		class: className
+	}: {
+		/** Render your own row. Omitted, the default row is used. */
+		item?: Snippet<[TodoItem, number]>;
+		class?: string;
+	} = $props();
+
+	const state = getTodoState();
+</script>
+
+<Collapsible.Content class="overflow-hidden">
+	<!--
+		<ol>, not a stack of divs. A plan is an ordered thing: a screen reader
+		should say "list, 7 items, item 3 of 7", and that is free from the right
+		element and impossible to retrofit onto divs with ARIA without restating
+		every index by hand.
+
+		max-h + overflow-y with scrollbar-none: a long plan must not push the
+		conversation off screen, and era hides the bar because a scrollbar on one
+		panel and not another reads as a defect.
+	-->
+	<ol class={cn('scrollbar-none flex max-h-64 flex-col overflow-y-auto pt-gutter', className)}>
+		{#each state?.todos ?? [] as todo, i (todo.id ?? i)}
+			{#if item}
+				{@render item(todo, i)}
+			{:else}
+				<TodoItemRow status={todo.status} content={todo.content} />
+			{/if}
+		{/each}
+	</ol>
+</Collapsible.Content>

package/dist/ai/todo/todo-list.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import { type TodoItem } from './context.svelte.js';
+type $$ComponentProps = {
+    /** Render your own row. Omitted, the default row is used. */
+    item?: Snippet<[TodoItem, number]>;
+    class?: string;
+};
+declare const TodoList: import("svelte").Component<$$ComponentProps, {}, "">;
+type TodoList = ReturnType<typeof TodoList>;
+export default TodoList;

package/dist/ai/todo/todo.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Collapsible } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+	import { TodoState, setTodoState, type TodoItem } from './context.svelte.js';
+
+	let {
+		todos = [],
+		open = $bindable(true),
+		children,
+		class: className
+	}: {
+		/** The plan. Root owns it; Header and List both read THIS array. */
+		todos?: TodoItem[];
+		open?: boolean;
+		children?: Snippet;
+		class?: string;
+	} = $props();
+
+	const state = setTodoState(new TodoState());
+	$effect(() => {
+		state.todos = todos;
+	});
+</script>
+
+<!--
+	A plan board: a collapsible panel of the agent's own to-do list.
+	Ported from term's TodoBoard, which is the shape that works — a collapsed
+	header that still shows what is being worked on is the reason it can live
+	permanently above a chat without costing anything.
+
+	What changed on the way in, and why:
+	  - Palette literals (text-sky-300, text-green-400, bg-9/5) became semantic
+	    tokens, so the board follows theme, surface and mode instead of pinning
+	    one dark palette.
+	  - Fixed pixel rows (h-6, text-[10px]) became tier heights, so it scales
+	    with the density axis like everything else.
+	  - The list became an <ol> of <li>, so it announces as a list with a
+	    position — a plan is an ORDERED thing and the DOM should say so.
+	  - The counts moved into context, so the header cannot disagree with the
+	    rows underneath it.
+-->
+<Collapsible.Root
+	bind:open
+	data-complete={state.complete || undefined}
+	class={cn('flex flex-col rounded-bar bg-well p-panel shadow-sm', className)}
+>
+	{@render children?.()}
+</Collapsible.Root>

package/dist/ai/todo/todo.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import { type TodoItem } from './context.svelte.js';
+type $$ComponentProps = {
+    /** The plan. Root owns it; Header and List both read THIS array. */
+    todos?: TodoItem[];
+    open?: boolean;
+    children?: Snippet;
+    class?: string;
+};
+declare const Todo: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Todo = ReturnType<typeof Todo>;
+export default Todo;