@diegopluna/narvi 0.0.0-stage → 0.0.1

package/dist/internal/Collapse.svelte

@@ -0,0 +1,57 @@
+<!--
+	A region that folds open and shut. Its height eases between nothing and its
+	content's height by moving a grid row between 0fr and 1fr, which needs no
+	measuring. While shut it is inert: out of the tab order and the accessibility tree.
+-->
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { attrs, type Sx } from './sx.js';
+	import { motion } from '../tokens.stylex.js';
+
+	const MOTION = '@media (prefers-reduced-motion: no-preference)';
+
+	const styles = stylex.create({
+		region: {
+			display: 'grid',
+			gridTemplateRows: '0fr',
+			opacity: 0,
+			transitionProperty: { default: 'opacity', [MOTION]: 'grid-template-rows, opacity' },
+			transitionDuration: motion.slow,
+			transitionTimingFunction: motion.easeOut
+		},
+		open: {
+			gridTemplateRows: '1fr',
+			opacity: 1
+		},
+		inner: {
+			minHeight: 0,
+			overflow: 'hidden'
+		}
+	});
+</script>
+
+<script lang="ts">
+	let {
+		open,
+		sx,
+		innerSx,
+		class: className,
+		children,
+		...rest
+	}: Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		open: boolean;
+		sx?: Sx;
+		innerSx?: Sx;
+		children?: Snippet;
+	} = $props();
+</script>
+
+<div inert={!open} {...rest} {...attrs([styles.region, open && styles.open, sx], className)}>
+	<div {...stylex.attrs(styles.inner)}>
+		<div {...stylex.attrs(innerSx)}>
+			{@render children?.()}
+		</div>
+	</div>
+</div>

package/dist/internal/Collapse.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Sx } from './sx.js';
+type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    open: boolean;
+    sx?: Sx;
+    innerSx?: Sx;
+    children?: Snippet;
+};
+declare const Collapse: import("svelte").Component<$$ComponentProps, {}, "">;
+type Collapse = ReturnType<typeof Collapse>;
+export default Collapse;

package/dist/internal/Glyph.svelte

@@ -0,0 +1,89 @@
+<!--
+	The few icons Narvi's own parts draw. 16px grid, round caps and joins; the
+	stroke follows the text beside it (1.5px with regular text, 1.75px inside buttons).
+-->
+<script lang="ts" module>
+	const paths = {
+		arrowUp: ['M8 13V3.25', 'M3.75 7.5 8 3.25l4.25 4.25'],
+		arrowDown: ['M8 3v9.75', 'M3.75 8.5 8 12.75l4.25-4.25'],
+		chevron: ['M4.75 6.25 8 9.5l3.25-3.25'],
+		copy: [
+			'M6.25 5.75h5.5c.83 0 1.5.67 1.5 1.5v5.5c0 .83-.67 1.5-1.5 1.5h-5.5c-.83 0-1.5-.67-1.5-1.5v-5.5c0-.83.67-1.5 1.5-1.5Z',
+			'M10.25 5.75V4.25c0-.83-.67-1.5-1.5-1.5h-4.5c-.83 0-1.5.67-1.5 1.5v4.5c0 .83.67 1.5 1.5 1.5h.5'
+		],
+		check: ['M3.25 8.5 6.5 11.75 12.75 4.75'],
+		alert: ['M8 5v3.5', 'M8 11h.01', 'M14 8A6 6 0 1 1 2 8a6 6 0 0 1 12 0Z'],
+		dashed: ['M13 8A5 5 0 1 1 3 8a5 5 0 0 1 10 0Z'],
+		paperclip: [
+			'm13 7.5-5.1 5.1a3.25 3.25 0 0 1-4.6-4.6l5.3-5.3a2.17 2.17 0 0 1 3.06 3.06L6.4 11.02a1.08 1.08 0 0 1-1.53-1.53l4.6-4.6'
+		],
+		close: ['M4.5 4.5l7 7', 'M11.5 4.5l-7 7'],
+		terminal: ['M3.5 4.5l3 3.25-3 3.25', 'M8 11.5h4.5'],
+		pencil: ['M10.5 3.5 12.5 5.5', 'M3 13l.5-2.5 7.75-7.75a1.4 1.4 0 0 1 2 2L5.5 12.5Z'],
+		eye: [
+			'M1.75 8S4 3.75 8 3.75 14.25 8 14.25 8 12 12.25 8 12.25 1.75 8 1.75 8Z',
+			'M10 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z'
+		],
+		globe: [
+			'M14 8A6 6 0 1 1 2 8a6 6 0 0 1 12 0Z',
+			'M2 8h12',
+			'M8 2c1.7 1.7 2.5 3.7 2.5 6S9.7 12.3 8 14C6.3 12.3 5.5 10.3 5.5 8S6.3 3.7 8 2Z'
+		],
+		plug: ['M6 2.5v3', 'M10 2.5v3', 'M4.5 5.5h7v2.5a3.5 3.5 0 0 1-7 0Z', 'M8 11.5v2'],
+		sparkle: ['M8 2.5 9.4 6.6 13.5 8 9.4 9.4 8 13.5 6.6 9.4 2.5 8 6.6 6.6Z'],
+		undo: ['M5.5 4 2.5 7l3 3', 'M2.5 7h6.75a4 4 0 0 1 0 8H8'],
+		send: ['M8 13V3.25', 'M3.75 7.5 8 3.25l4.25 4.25'],
+		steer: ['M3.5 3v5.5a2 2 0 0 0 2 2h7', 'M10 8l2.5 2.5L10 13'],
+		search: ['M11.5 7a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Z', 'm10.5 10.5 3 3'],
+		file: ['M4.25 2.25h4.5l3 3v8.5h-7.5Z', 'M8.75 2.25v3h3'],
+		selector: ['M5.25 6 8 3.25 10.75 6', 'M5.25 10 8 12.75 10.75 10'],
+		// A thought: a bulb with its filament
+		bulb: [
+			'M6.25 13.75h3.5',
+			'M8 2.25a4 4 0 0 0-2.4 7.2c.42.32.65.7.65 1.15v.65h3.5v-.65c0-.45.23-.83.65-1.15A4 4 0 0 0 8 2.25Z'
+		],
+		// A stretch of work: steps stacked on one another
+		layers: [
+			'M8 2.75 13.25 5.5 8 8.25 2.75 5.5Z',
+			'M2.75 8.25 8 11l5.25-2.75',
+			'M2.75 11 8 13.75 13.25 11'
+		],
+		// The arch of the doors: Narvi's own mark
+		arch: ['M4 13.5V7.25a4 4 0 0 1 8 0v6.25', 'M8 3.25v10.25', 'M2.5 13.5h11'],
+		minus: ['M5 8h6']
+	} as const;
+
+	export type GlyphName = keyof typeof paths;
+</script>
+
+<script lang="ts">
+	import type { SVGAttributes } from 'svelte/elements';
+
+	let {
+		name,
+		size = 16,
+		stroke = 1.5,
+		...rest
+	}: { name: GlyphName; size?: number; stroke?: number } & Omit<
+		SVGAttributes<SVGSVGElement>,
+		'stroke'
+	> = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 16 16"
+	fill="none"
+	stroke="currentColor"
+	stroke-width={stroke}
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	stroke-dasharray={name === 'dashed' ? '2.4 2.4' : undefined}
+	aria-hidden="true"
+	{...rest}
+>
+	{#each paths[name] as d (d)}
+		<path {d} />
+	{/each}
+</svg>

package/dist/internal/Glyph.svelte.d.ts

@@ -0,0 +1,37 @@
+declare const paths: {
+    readonly arrowUp: readonly ["M8 13V3.25", "M3.75 7.5 8 3.25l4.25 4.25"];
+    readonly arrowDown: readonly ["M8 3v9.75", "M3.75 8.5 8 12.75l4.25-4.25"];
+    readonly chevron: readonly ["M4.75 6.25 8 9.5l3.25-3.25"];
+    readonly copy: readonly ["M6.25 5.75h5.5c.83 0 1.5.67 1.5 1.5v5.5c0 .83-.67 1.5-1.5 1.5h-5.5c-.83 0-1.5-.67-1.5-1.5v-5.5c0-.83.67-1.5 1.5-1.5Z", "M10.25 5.75V4.25c0-.83-.67-1.5-1.5-1.5h-4.5c-.83 0-1.5.67-1.5 1.5v4.5c0 .83.67 1.5 1.5 1.5h.5"];
+    readonly check: readonly ["M3.25 8.5 6.5 11.75 12.75 4.75"];
+    readonly alert: readonly ["M8 5v3.5", "M8 11h.01", "M14 8A6 6 0 1 1 2 8a6 6 0 0 1 12 0Z"];
+    readonly dashed: readonly ["M13 8A5 5 0 1 1 3 8a5 5 0 0 1 10 0Z"];
+    readonly paperclip: readonly ["m13 7.5-5.1 5.1a3.25 3.25 0 0 1-4.6-4.6l5.3-5.3a2.17 2.17 0 0 1 3.06 3.06L6.4 11.02a1.08 1.08 0 0 1-1.53-1.53l4.6-4.6"];
+    readonly close: readonly ["M4.5 4.5l7 7", "M11.5 4.5l-7 7"];
+    readonly terminal: readonly ["M3.5 4.5l3 3.25-3 3.25", "M8 11.5h4.5"];
+    readonly pencil: readonly ["M10.5 3.5 12.5 5.5", "M3 13l.5-2.5 7.75-7.75a1.4 1.4 0 0 1 2 2L5.5 12.5Z"];
+    readonly eye: readonly ["M1.75 8S4 3.75 8 3.75 14.25 8 14.25 8 12 12.25 8 12.25 1.75 8 1.75 8Z", "M10 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"];
+    readonly globe: readonly ["M14 8A6 6 0 1 1 2 8a6 6 0 0 1 12 0Z", "M2 8h12", "M8 2c1.7 1.7 2.5 3.7 2.5 6S9.7 12.3 8 14C6.3 12.3 5.5 10.3 5.5 8S6.3 3.7 8 2Z"];
+    readonly plug: readonly ["M6 2.5v3", "M10 2.5v3", "M4.5 5.5h7v2.5a3.5 3.5 0 0 1-7 0Z", "M8 11.5v2"];
+    readonly sparkle: readonly ["M8 2.5 9.4 6.6 13.5 8 9.4 9.4 8 13.5 6.6 9.4 2.5 8 6.6 6.6Z"];
+    readonly undo: readonly ["M5.5 4 2.5 7l3 3", "M2.5 7h6.75a4 4 0 0 1 0 8H8"];
+    readonly send: readonly ["M8 13V3.25", "M3.75 7.5 8 3.25l4.25 4.25"];
+    readonly steer: readonly ["M3.5 3v5.5a2 2 0 0 0 2 2h7", "M10 8l2.5 2.5L10 13"];
+    readonly search: readonly ["M11.5 7a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Z", "m10.5 10.5 3 3"];
+    readonly file: readonly ["M4.25 2.25h4.5l3 3v8.5h-7.5Z", "M8.75 2.25v3h3"];
+    readonly selector: readonly ["M5.25 6 8 3.25 10.75 6", "M5.25 10 8 12.75 10.75 10"];
+    readonly bulb: readonly ["M6.25 13.75h3.5", "M8 2.25a4 4 0 0 0-2.4 7.2c.42.32.65.7.65 1.15v.65h3.5v-.65c0-.45.23-.83.65-1.15A4 4 0 0 0 8 2.25Z"];
+    readonly layers: readonly ["M8 2.75 13.25 5.5 8 8.25 2.75 5.5Z", "M2.75 8.25 8 11l5.25-2.75", "M2.75 11 8 13.75 13.25 11"];
+    readonly arch: readonly ["M4 13.5V7.25a4 4 0 0 1 8 0v6.25", "M8 3.25v10.25", "M2.5 13.5h11"];
+    readonly minus: readonly ["M5 8h6"];
+};
+export type GlyphName = keyof typeof paths;
+import type { SVGAttributes } from 'svelte/elements';
+type $$ComponentProps = {
+    name: GlyphName;
+    size?: number;
+    stroke?: number;
+} & Omit<SVGAttributes<SVGSVGElement>, 'stroke'>;
+declare const Glyph: import("svelte").Component<$$ComponentProps, {}, "">;
+type Glyph = ReturnType<typeof Glyph>;
+export default Glyph;

package/dist/internal/Tile.svelte

@@ -0,0 +1,86 @@
+<!--
+	A small square of stone that holds an icon, at the start of a row in the
+	agent's timeline. Its tone says where the row stands: lit by ithildin while it
+	runs, green when it went through, red when it did not. It is opaque, so the
+	rail that joins the rows passes behind it.
+-->
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import Glyph, { type GlyphName } from './Glyph.svelte';
+	import type { Sx } from './sx.js';
+	import { colors, motion, radius } from '../tokens.stylex.js';
+
+	export type TileTone = 'neutral' | 'live' | 'success' | 'warning' | 'danger';
+
+	const styles = stylex.create({
+		tile: {
+			position: 'relative',
+			boxSizing: 'border-box',
+			display: 'grid',
+			placeItems: 'center',
+			flexShrink: 0,
+			backgroundColor: colors.bgRaised,
+			color: colors.textMuted,
+			transitionProperty: 'color, box-shadow, background-image',
+			transitionDuration: motion.slow,
+			transitionTimingFunction: 'ease'
+		},
+		md: { width: '1.5rem', height: '1.5rem', borderRadius: radius.sm },
+		sm: { width: '1.25rem', height: '1.25rem', borderRadius: radius.xs },
+		neutral: {
+			backgroundImage: `linear-gradient(to bottom, ${colors.surfaceRaised}, ${colors.surface})`,
+			boxShadow: `inset 0 0 0 1px ${colors.line}, inset 0 1px 0 ${colors.highlight}, 0 1px 1px ${colors.shade}`
+		},
+		live: {
+			color: colors.ithil,
+			backgroundImage: `linear-gradient(${colors.ithilSoft}, ${colors.ithilSoft})`,
+			boxShadow: `inset 0 0 0 1px color-mix(in oklab, ${colors.ithil} 38%, transparent), 0 0 12px ${colors.glow}`
+		},
+		success: {
+			color: colors.success,
+			backgroundImage: `linear-gradient(${colors.successSoft}, ${colors.successSoft})`,
+			boxShadow: `inset 0 0 0 1px color-mix(in oklab, ${colors.success} 30%, transparent)`
+		},
+		warning: {
+			color: colors.warning,
+			backgroundImage: `linear-gradient(${colors.warningSoft}, ${colors.warningSoft})`,
+			boxShadow: `inset 0 0 0 1px color-mix(in oklab, ${colors.warning} 32%, transparent)`
+		},
+		danger: {
+			color: colors.danger,
+			backgroundImage: `linear-gradient(${colors.dangerSoft}, ${colors.dangerSoft})`,
+			boxShadow: `inset 0 0 0 1px color-mix(in oklab, ${colors.danger} 32%, transparent)`
+		}
+	});
+</script>
+
+<script lang="ts">
+	let {
+		glyph,
+		tone = 'neutral',
+		size = 'md',
+		sx,
+		children
+	}: {
+		glyph?: GlyphName;
+		tone?: TileTone;
+		size?: 'sm' | 'md';
+		sx?: Sx;
+		/** Your own icon, shown when there is no glyph. */
+		children?: Snippet;
+	} = $props();
+</script>
+
+<span
+	aria-hidden="true"
+	data-slot="tile"
+	data-tone={tone}
+	{...stylex.attrs(styles.tile, styles[size], styles[tone], sx)}
+>
+	{#if glyph}<Glyph
+			name={glyph}
+			size={size === 'md' ? 14 : 12}
+			stroke={1.6}
+		/>{:else}{@render children?.()}{/if}
+</span>

package/dist/internal/Tile.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import { type GlyphName } from './Glyph.svelte';
+import type { Sx } from './sx.js';
+export type TileTone = 'neutral' | 'live' | 'success' | 'warning' | 'danger';
+type $$ComponentProps = {
+    glyph?: GlyphName;
+    tone?: TileTone;
+    size?: 'sm' | 'md';
+    sx?: Sx;
+    /** Your own icon, shown when there is no glyph. */
+    children?: Snippet;
+};
+declare const Tile: import("svelte").Component<$$ComponentProps, {}, "">;
+type Tile = ReturnType<typeof Tile>;
+export default Tile;

package/dist/internal/control.d.ts

@@ -0,0 +1,58 @@
+import * as stylex from '@stylexjs/stylex';
+/** Shared look for text-entry controls: Input and Textarea. A recess with a 3:1 edge. */
+export declare const control: Readonly<{
+    readonly base: Readonly<{
+        readonly WebkitAppRegion: stylex.StyleXClassNameFor<"WebkitAppRegion", "no-drag">;
+        readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
+        readonly display: stylex.StyleXClassNameFor<"display", "block">;
+        readonly width: stylex.StyleXClassNameFor<"width", "100%">;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+        readonly margin: stylex.StyleXClassNameFor<"margin", 0>;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", "1px">;
+        readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string | null>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", `inset 0 1px 2px ${stylex.StyleXVar<string>}` | `inset 0 0 0 0.5px ${stylex.StyleXVar<string>}, 0 0 0 3px ${stylex.StyleXVar<string>}`>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+        readonly appearance: stylex.StyleXClassNameFor<"appearance", "none">;
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 1 | 0.5>;
+        readonly cursor: stylex.StyleXClassNameFor<"cursor", "not-allowed" | null>;
+        readonly outlineStyle: stylex.StyleXClassNameFor<"outlineStyle", "solid">;
+        readonly outlineColor: stylex.StyleXClassNameFor<"outlineColor", "transparent">;
+        readonly outlineWidth: stylex.StyleXClassNameFor<"outlineWidth", 0 | "2px">;
+        readonly outlineOffset: stylex.StyleXClassNameFor<"outlineOffset", "-2px">;
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "border-color">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", string>;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "ease">;
+        readonly '::placeholder': stylex.StyleXClassNameFor<"::placeholder", {
+            readonly color: stylex.StyleXVar<string>;
+            readonly opacity: 1;
+        }>;
+    }>;
+    readonly invalid: Readonly<{
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
+        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", `inset 0 1px 2px ${stylex.StyleXVar<string>}` | `inset 0 0 0 0.5px ${stylex.StyleXVar<string>}, 0 0 0 3px color-mix(in oklab, ${stylex.StyleXVar<string>} 22%, transparent)`>;
+    }>;
+    readonly sm: Readonly<{
+        readonly minHeight: stylex.StyleXClassNameFor<"minHeight", "28px">;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", "8px">;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+    }>;
+    readonly md: Readonly<{
+        readonly minHeight: stylex.StyleXClassNameFor<"minHeight", "34px">;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", "10px">;
+    }>;
+    readonly lg: Readonly<{
+        readonly minHeight: stylex.StyleXClassNameFor<"minHeight", "40px">;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", "12px">;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+    }>;
+}>;
+export type ControlSize = 'sm' | 'md' | 'lg';

package/dist/internal/control.js

@@ -0,0 +1,74 @@
+import * as stylex from '@stylexjs/stylex';
+import { colors, font, motion, radius } from '../tokens.stylex.js';
+const HOVER = '@media (hover: hover) and (pointer: fine)';
+/** Shared look for text-entry controls: Input and Textarea. A recess with a 3:1 edge. */
+export const control = stylex.create({
+    base: {
+        // A field in an Electron title bar takes clicks instead of dragging the window
+        WebkitAppRegion: 'no-drag',
+        boxSizing: 'border-box',
+        display: 'block',
+        width: '100%',
+        minWidth: 0,
+        margin: 0,
+        paddingBlock: 0,
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: {
+            default: colors.edge,
+            ':hover': { default: null, [HOVER]: colors.edgeHover },
+            ':focus-visible': colors.focusRing
+        },
+        borderRadius: radius.md,
+        backgroundColor: colors.well,
+        boxShadow: {
+            default: `inset 0 1px 2px ${colors.shade}`,
+            ':focus-visible': `inset 0 0 0 0.5px ${colors.focusRing}, 0 0 0 3px ${colors.focusHalo}`
+        },
+        color: colors.text,
+        fontFamily: font.body,
+        // 16px on touch devices stops iOS from zooming the page on focus
+        fontSize: { default: font.sizeMd, '@media (pointer: coarse)': '1rem' },
+        lineHeight: font.leadingSnug,
+        appearance: 'none',
+        opacity: { default: 1, ':disabled': 0.5 },
+        cursor: { default: null, ':disabled': 'not-allowed' },
+        // Invisible normally; in forced-colours mode it is the focus indicator
+        outlineStyle: 'solid',
+        outlineColor: 'transparent',
+        outlineWidth: { default: 0, ':focus-visible': '2px' },
+        outlineOffset: '-2px',
+        // Only the hover colour eases. Focus is often reached with Tab, and a ring
+        // that fades in after a key press feels late, so it appears at once.
+        transitionProperty: 'border-color',
+        transitionDuration: { default: motion.base, ':focus-visible': '0ms' },
+        transitionTimingFunction: 'ease',
+        '::placeholder': {
+            color: colors.textSubtle,
+            opacity: 1
+        }
+    },
+    invalid: {
+        borderColor: colors.danger,
+        boxShadow: {
+            default: `inset 0 1px 2px ${colors.shade}`,
+            ':focus-visible': `inset 0 0 0 0.5px ${colors.danger}, 0 0 0 3px color-mix(in oklab, ${colors.danger} 22%, transparent)`
+        }
+    },
+    sm: {
+        minHeight: '28px',
+        paddingInline: '8px',
+        borderRadius: radius.sm,
+        fontSize: { default: font.sizeSm, '@media (pointer: coarse)': '1rem' }
+    },
+    md: {
+        minHeight: '34px',
+        paddingInline: '10px'
+    },
+    lg: {
+        minHeight: '40px',
+        paddingInline: '12px',
+        borderRadius: radius.lg,
+        fontSize: font.sizeLg
+    }
+});

package/dist/internal/disclosure.d.ts

@@ -0,0 +1,7 @@
+/** What a folding part (Reasoning, Tool) shares between its trigger and its content. */
+export type DisclosureContext = {
+    readonly open: boolean;
+    toggle(): void;
+    readonly triggerId: string;
+    readonly contentId: string;
+};

package/dist/internal/disclosure.js

@@ -0,0 +1 @@
+export {};

package/dist/internal/json.d.ts

@@ -0,0 +1,13 @@
+/** A piece of formatted code, and what it is, for colouring. */
+export type CodeToken = {
+    text: string;
+    kind?: 'key' | 'string' | 'number' | 'literal' | 'punct';
+};
+/** Formats a value for showing: strings as they are, anything else as indented JSON. */
+export declare function format(value: unknown): string;
+/** Splits formatted JSON into tokens. Text that is not JSON comes back as one plain token. */
+export declare function tokenize(value: unknown): CodeToken[];
+type Primitive = string | number | boolean | null;
+/** A flat object of plain values, such as most tools' arguments, which reads best as a list. */
+export declare function flatEntries(value: unknown): [string, Primitive][] | undefined;
+export {};

package/dist/internal/json.js

@@ -0,0 +1,51 @@
+const PATTERN = /("(?:\\.|[^"\\])*")(\s*:)?|\b(?:true|false|null)\b|-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?|[{}[\],]/g;
+/** Formats a value for showing: strings as they are, anything else as indented JSON. */
+export function format(value) {
+    if (typeof value === 'string')
+        return value;
+    try {
+        return JSON.stringify(value, null, 2) ?? String(value);
+    }
+    catch {
+        return String(value);
+    }
+}
+/** Splits formatted JSON into tokens. Text that is not JSON comes back as one plain token. */
+export function tokenize(value) {
+    const source = format(value);
+    if (typeof value === 'string')
+        return [{ text: source }];
+    const tokens = [];
+    let last = 0;
+    for (const match of source.matchAll(PATTERN)) {
+        const index = match.index ?? 0;
+        if (index > last)
+            tokens.push({ text: source.slice(last, index) });
+        const [text, string, colon] = match;
+        if (string) {
+            tokens.push({ text: string, kind: colon ? 'key' : 'string' });
+            if (colon)
+                tokens.push({ text: colon, kind: 'punct' });
+        }
+        else if (/^[{}[\],]$/.test(text))
+            tokens.push({ text, kind: 'punct' });
+        else if (/^-?\d/.test(text))
+            tokens.push({ text, kind: 'number' });
+        else
+            tokens.push({ text, kind: 'literal' });
+        last = index + text.length;
+    }
+    if (last < source.length)
+        tokens.push({ text: source.slice(last) });
+    return tokens;
+}
+/** A flat object of plain values, such as most tools' arguments, which reads best as a list. */
+export function flatEntries(value) {
+    if (!value || typeof value !== 'object' || Array.isArray(value))
+        return undefined;
+    const entries = Object.entries(value);
+    if (entries.length === 0 || entries.length > 12)
+        return undefined;
+    const plain = entries.every(([, v]) => v === null || ['string', 'number', 'boolean'].includes(typeof v));
+    return plain ? entries : undefined;
+}

package/dist/internal/kinds.d.ts

@@ -0,0 +1,9 @@
+import type { GlyphName } from './Glyph.svelte';
+/** What an agent's action was, which picks its icon. */
+export type ActionKind = 'command' | 'edit' | 'read' | 'search' | 'web' | 'tool' | 'agent';
+export declare const KIND_GLYPHS: Record<ActionKind, GlyphName>;
+/**
+ * A step's label split so the part that matters stands out: the file name of a
+ * path, the program of a command. Anything else is left whole.
+ */
+export declare function emphasis(kind: ActionKind, label: string): [lead: string, main: string, tail: string];

package/dist/internal/kinds.js

@@ -0,0 +1,25 @@
+export const KIND_GLYPHS = {
+    command: 'terminal',
+    edit: 'pencil',
+    read: 'eye',
+    search: 'search',
+    web: 'globe',
+    tool: 'plug',
+    agent: 'sparkle'
+};
+/**
+ * A step's label split so the part that matters stands out: the file name of a
+ * path, the program of a command. Anything else is left whole.
+ */
+export function emphasis(kind, label) {
+    if ((kind === 'read' || kind === 'edit') && !/\s/.test(label)) {
+        const cut = label.lastIndexOf('/') + 1;
+        return [label.slice(0, cut), label.slice(cut), ''];
+    }
+    if (kind === 'command') {
+        const space = label.indexOf(' ');
+        if (space > 0)
+            return ['', label.slice(0, space), label.slice(space)];
+    }
+    return ['', label, ''];
+}

package/dist/internal/layer.d.ts

@@ -0,0 +1,103 @@
+/**
+ * What everything that floats has in common: menus, popovers, selects and the
+ * palette. One raised surface, sized to the room bits-ui measures for it, and
+ * one motion: it grows out of what opened it, and goes a little faster than it
+ * came. bits-ui waits for the transition before it removes the element, so
+ * the exit is seen.
+ */
+import * as stylex from '@stylexjs/stylex';
+export declare const layer: Readonly<{
+    readonly surface: Readonly<{
+        readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
+        readonly zIndex: stylex.StyleXClassNameFor<"zIndex", 50>;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", "max(12rem, var(--bits-floating-anchor-width, 0px))">;
+        readonly maxWidth: stylex.StyleXClassNameFor<"maxWidth", "min(22rem, var(--bits-floating-available-width, 100vw))">;
+        readonly maxHeight: stylex.StyleXClassNameFor<"maxHeight", "var(--bits-floating-available-height, 80vh)">;
+        readonly overflowY: stylex.StyleXClassNameFor<"overflowY", "auto">;
+        readonly overscrollBehavior: stylex.StyleXClassNameFor<"overscrollBehavior", "contain">;
+        readonly padding: stylex.StyleXClassNameFor<"padding", "0.25rem">;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", `inset 0 0 0 1px ${stylex.StyleXVar<string>}, inset 0 1px 0 ${stylex.StyleXVar<string>}, 0 2px 4px ${stylex.StyleXVar<string>}, 0 16px 40px -12px ${stylex.StyleXVar<string>}`>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+        readonly scrollbarWidth: stylex.StyleXClassNameFor<"scrollbarWidth", "thin">;
+        readonly outlineStyle: stylex.StyleXClassNameFor<"outlineStyle", "solid">;
+        readonly outlineWidth: stylex.StyleXClassNameFor<"outlineWidth", 0 | "1px">;
+        readonly outlineColor: stylex.StyleXClassNameFor<"outlineColor", "CanvasText">;
+        readonly transformOrigin: stylex.StyleXClassNameFor<"transformOrigin", "var(--bits-floating-transform-origin, top)">;
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 0 | 1>;
+        readonly scale: stylex.StyleXClassNameFor<"scale", 1 | 0.97 | null>;
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity" | "opacity, scale">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", string>;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", string>;
+    }>;
+    readonly item: Readonly<{
+        readonly position: stylex.StyleXClassNameFor<"position", "relative">;
+        readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", "0.5rem">;
+        readonly minHeight: stylex.StyleXClassNameFor<"minHeight", "2rem">;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", "0.375rem">;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", "0.5rem">;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly cursor: stylex.StyleXClassNameFor<"cursor", "default" | "not-allowed">;
+        readonly userSelect: stylex.StyleXClassNameFor<"userSelect", "none">;
+        readonly outlineStyle: stylex.StyleXClassNameFor<"outlineStyle", "none">;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly forcedColorAdjust: stylex.StyleXClassNameFor<"forcedColorAdjust", "none">;
+    }>;
+    readonly danger: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    }>;
+    readonly icon: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "grid">;
+        readonly placeItems: stylex.StyleXClassNameFor<"placeItems", "center">;
+        readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
+        readonly width: stylex.StyleXClassNameFor<"width", "1rem">;
+        readonly height: stylex.StyleXClassNameFor<"height", "1rem">;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+    }>;
+    readonly label: Readonly<{
+        readonly flexGrow: stylex.StyleXClassNameFor<"flexGrow", 1>;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+        readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
+        readonly textOverflow: stylex.StyleXClassNameFor<"textOverflow", "ellipsis">;
+        readonly whiteSpace: stylex.StyleXClassNameFor<"whiteSpace", "nowrap">;
+    }>;
+    readonly trailing: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", "0.25rem">;
+        readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
+        readonly marginInlineStart: stylex.StyleXClassNameFor<"marginInlineStart", "auto">;
+        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "1rem">;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly fontVariantNumeric: stylex.StyleXClassNameFor<"fontVariantNumeric", "tabular-nums">;
+    }>;
+    readonly heading: Readonly<{
+        readonly paddingTop: stylex.StyleXClassNameFor<"paddingTop", "0.5rem">;
+        readonly paddingBottom: stylex.StyleXClassNameFor<"paddingBottom", "0.25rem">;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", "0.5rem">;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", "0.6875rem">;
+        readonly letterSpacing: stylex.StyleXClassNameFor<"letterSpacing", "0.04em">;
+        readonly textTransform: stylex.StyleXClassNameFor<"textTransform", "uppercase">;
+    }>;
+    readonly separator: Readonly<{
+        readonly height: stylex.StyleXClassNameFor<"height", "1px">;
+        readonly marginBlock: stylex.StyleXClassNameFor<"marginBlock", "0.25rem">;
+        readonly marginInline: stylex.StyleXClassNameFor<"marginInline", "-0.25rem">;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    }>;
+    readonly hoverable: Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string | null>;
+    }>;
+}>;