@diegopluna/narvi 0.0.0-stage → 0.0.1

package/README.md

@@ -1,3 +1,83 @@
-# Temporary Holding Version
+# Narvi
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A component library for Svelte 5, styled with [StyleX](https://stylexjs.com). Styles are compiled
+to atomic CSS at build time, so no styling code runs in the browser.
+
+This repository holds two things:
+
+- the library, in `src/lib`, packaged with `svelte-package`
+- the docs site, in `src/routes` and `src/docs`, a prerendered SvelteKit app that uses the library
+
+## Develop
+
+```sh
+pnpm install
+pnpm dev          # docs site with live examples, at http://localhost:5173
+```
+
+| Command           | What it does                                           |
+| ----------------- | ------------------------------------------------------ |
+| `pnpm check`      | Type-checks the library and the docs                   |
+| `pnpm lint`       | Prettier and ESLint                                    |
+| `pnpm test`       | Component tests, in headless Chromium                  |
+| `pnpm build:lib`  | Packages the library into `dist` and lints the package |
+| `pnpm build:docs` | Builds the static docs site into `build`               |
+| `pnpm build`      | Both of the above                                      |
+
+The tests need a browser once: `pnpm exec playwright install chromium-headless-shell`.
+
+## Use it in an app
+
+Narvi is not on npm yet. To try it elsewhere, run `pnpm build:lib && pnpm pack` and install the
+tarball. Then add the plugin after `sveltekit()`:
+
+```ts
+// vite.config.ts
+import { sveltekit } from '@sveltejs/kit/vite';
+import { narvi } from '@diegopluna/narvi/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit(), narvi()]
+});
+```
+
+Mount `<DevStyles />` in the root layout, import a stylesheet that sets
+`:root { color-scheme: light dark; }`, and import components from `@diegopluna/narvi`. The docs site covers
+this in full under Installation.
+
+## How it is put together
+
+- **Tokens** live in `src/lib/tokens.stylex.ts`. Colours hold a light and a dark value in one
+  `light-dark()` declaration, so the theme follows `color-scheme`. The palette is stone and
+  moonlight: near-black and warm paper for surfaces, a pale metal ("mithril") for the solid button,
+  and one silver-blue ("ithildin") that is kept for state: focus, selection and progress.
+- **Components** live in `src/lib/components/<name>/<Name>.svelte`. Styles are created in the
+  `<script module>` block and applied with the `attrs` helper from `src/lib/internal/sx.ts`, which
+  also merges the consumer's `sx` and `class`. Interface text inherits the page's font; only large
+  headings bring their own, a serif.
+- **Edges are shadows.** Hairlines and top highlights are drawn with `box-shadow`, so
+  `src/lib/internal/shared.ts` adds a transparent outline that becomes the edge in forced-colours
+  mode. Control boundaries (`colors.edge`) hold 3:1 against their surface.
+- **The Vite plugin** in `src/lib/vite.ts` is a preset over `@stylexjs/unplugin`.
+
+The look started as a study in `Frame` + `Card`: a tray around an inset panel, whose radius is the
+panel's radius plus the gap between them. Hover styles sit behind `@media (hover: hover) and (pointer: fine)` and
+movement behind `prefers-reduced-motion: no-preference`.
+
+### Adding a component
+
+1. Create `src/lib/components/<name>/<Name>.svelte`. Export its props type from the module script,
+   accept `sx` and `class`, and spread the remaining props onto the root element.
+2. Export the component and its types from `src/lib/index.ts`.
+3. Add a docs page in `src/routes/components/<name>/`: example files next to a `+page.svelte`.
+   Importing an example with `?example` gives the page both the live component and its
+   highlighted source, so the code shown is always the code that runs.
+   Readers can press Edit to change the example and see it re-render as they type: the
+   compiler and editor (`src/docs/live/`) load only then. Examples that define their own
+   StyleX styles stay read-only, because StyleX compiles at build time.
+4. Add the page to `src/docs/nav.ts`.
+
+Two StyleX rules to keep in mind: values inside `stylex.create` must be known at build time, so a
+constant such as a media query has to be defined in the same file, and tokens must be imported
+straight from `tokens.stylex.js`.

package/dist/components/activity/ActivityContent.svelte

@@ -0,0 +1,55 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Collapse from '../../internal/Collapse.svelte';
+	import type { Sx } from '../../internal/sx.js';
+	import { colors } from '../../tokens.stylex.js';
+	import { getActivityContext } from './context.js';
+
+	export type ActivityContentProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		sx?: Sx;
+		/** Activity.Step and Activity.Thought, in the order they happened. */
+		children?: Snippet;
+	};
+
+	const styles = stylex.create({
+		// The steps hang from a rail that runs down through the middle of their tiles
+		steps: {
+			position: 'relative',
+			display: 'flex',
+			flexDirection: 'column',
+			gap: '0.625rem',
+			paddingTop: '0.625rem',
+			paddingBottom: '0.25rem',
+			'::before': {
+				content: '""',
+				position: 'absolute',
+				top: 0,
+				bottom: '0.875rem',
+				insetInlineStart: 'calc(0.75rem - 0.5px)',
+				width: '1px',
+				backgroundImage: `linear-gradient(to bottom, ${colors.lineStrong}, ${colors.line})`
+			}
+		}
+	});
+</script>
+
+<script lang="ts">
+	let { sx, class: className, children, ...rest }: ActivityContentProps = $props();
+
+	const activity = getActivityContext('Content');
+</script>
+
+<Collapse
+	open={activity.open}
+	id={activity.contentId}
+	role="region"
+	aria-labelledby={activity.triggerId}
+	data-slot="activity-content"
+	class={className}
+	innerSx={[styles.steps, sx]}
+	{...rest}
+>
+	{@render children?.()}
+</Collapse>

package/dist/components/activity/ActivityContent.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Sx } from '../../internal/sx.js';
+export type ActivityContentProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    sx?: Sx;
+    /** Activity.Step and Activity.Thought, in the order they happened. */
+    children?: Snippet;
+};
+declare const ActivityContent: import("svelte").Component<ActivityContentProps, {}, "">;
+type ActivityContent = ReturnType<typeof ActivityContent>;
+export default ActivityContent;

package/dist/components/activity/ActivityRoot.svelte

@@ -0,0 +1,66 @@
+<!--
+	One row for a stretch of an agent's work: the tool calls it made and the
+	thinking between them. While it runs, the row says what the agent is doing
+	now; once it settles, what it did. Open, it lists every step.
+-->
+<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 '../../internal/sx.js';
+	import { setActivityContext } from './context.js';
+
+	export type ActivityRootProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/** Set while the agent is still at work in this stretch. */
+		active?: boolean;
+		/** How many steps failed. They are named on the closed row, so they are not missed. */
+		failures?: number;
+		/** Whether the steps show. Bindable. */
+		open?: boolean;
+		sx?: Sx;
+		/** An Activity.Trigger and an Activity.Content. */
+		children?: Snippet;
+	};
+
+	const styles = stylex.create({ root: { display: 'flex', flexDirection: 'column', minWidth: 0 } });
+</script>
+
+<script lang="ts">
+	let {
+		active = false,
+		failures = 0,
+		open = $bindable(false),
+		sx,
+		class: className,
+		children,
+		...rest
+	}: ActivityRootProps = $props();
+
+	const uid = $props.id();
+
+	setActivityContext({
+		get open() {
+			return open;
+		},
+		toggle() {
+			open = !open;
+		},
+		get active() {
+			return active;
+		},
+		get failures() {
+			return failures;
+		},
+		triggerId: `${uid}-trigger`,
+		contentId: `${uid}-content`
+	});
+</script>
+
+<div
+	data-slot="activity"
+	data-active={active || undefined}
+	{...rest}
+	{...attrs([styles.root, sx], className)}
+>
+	{@render children?.()}
+</div>

package/dist/components/activity/ActivityRoot.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type ActivityRootProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** Set while the agent is still at work in this stretch. */
+    active?: boolean;
+    /** How many steps failed. They are named on the closed row, so they are not missed. */
+    failures?: number;
+    /** Whether the steps show. Bindable. */
+    open?: boolean;
+    sx?: Sx;
+    /** An Activity.Trigger and an Activity.Content. */
+    children?: Snippet;
+};
+declare const ActivityRoot: import("svelte").Component<ActivityRootProps, {}, "open">;
+type ActivityRoot = ReturnType<typeof ActivityRoot>;
+export default ActivityRoot;

package/dist/components/activity/ActivityStep.svelte

@@ -0,0 +1,157 @@
+<!--
+	One thing the agent did: a command, an edit, a read, a search. Its label is
+	the thing itself, as code; a step that did not go through says so.
+-->
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import { emphasis, KIND_GLYPHS, type ActionKind } from '../../internal/kinds.js';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import Tile from '../../internal/Tile.svelte';
+	import { colors, font, radius } from '../../tokens.stylex.js';
+	import Spinner from '../spinner/Spinner.svelte';
+
+	export type ActivityStepKind = ActionKind;
+	export type ActivityStepStatus = 'running' | 'done' | 'failed' | 'declined' | 'blocked';
+
+	export type ActivityStepProps = {
+		kind?: ActivityStepKind;
+		/** The command, the path, the query: shown as code. */
+		label: string;
+		status?: ActivityStepStatus;
+		/** Why it went the way it did, such as why it was blocked. */
+		reason?: string;
+		/** What it printed. Only the end is kept when it is long. */
+		output?: string;
+		/** How much of the output to keep, from the end, in characters. */
+		tail?: number;
+		/** Words for the statuses that need them. */
+		statusLabels?: Partial<Record<'failed' | 'declined' | 'blocked', string>>;
+		/** Anything else: images, a diff. */
+		children?: Snippet;
+		sx?: Sx;
+		class?: string;
+	};
+
+	const LABELS = { failed: 'Failed', declined: 'Declined', blocked: 'Blocked' };
+
+	const styles = stylex.create({
+		// The tile sits on the rail, in a column as wide as the row's own tile above
+		step: {
+			display: 'grid',
+			gridTemplateColumns: '1.5rem minmax(0, 1fr)',
+			columnGap: '0.625rem',
+			rowGap: '0.375rem',
+			minWidth: 0
+		},
+		icon: { display: 'grid', placeItems: 'center' },
+		line: {
+			display: 'flex',
+			alignItems: 'center',
+			gap: '0.5rem',
+			minWidth: 0,
+			minHeight: '1.25rem'
+		},
+		label: {
+			minWidth: 0,
+			overflow: 'hidden',
+			textOverflow: 'ellipsis',
+			whiteSpace: 'nowrap',
+			color: colors.textSubtle,
+			fontFamily: font.mono,
+			fontSize: font.sizeXs
+		},
+		// The file of a path, the program of a command: the part to read first
+		main: { color: colors.text },
+		badge: {
+			flexShrink: 0,
+			paddingBlock: '0.0625rem',
+			paddingInline: '0.375rem',
+			borderRadius: radius.lg,
+			backgroundColor: colors.dangerSoft,
+			color: colors.dangerInk,
+			fontSize: '0.6875rem',
+			fontWeight: font.weightMedium
+		},
+		body: {
+			gridColumn: '2',
+			display: 'flex',
+			flexDirection: 'column',
+			gap: '0.375rem',
+			minWidth: 0
+		},
+		reason: { margin: 0, color: colors.textMuted, fontSize: font.sizeSm },
+		output: {
+			margin: 0,
+			maxHeight: '10rem',
+			overflow: 'auto',
+			paddingBlock: '0.5rem',
+			paddingInline: '0.625rem',
+			borderRadius: radius.md,
+			backgroundColor: colors.well,
+			boxShadow: `inset 0 0 0 1px ${colors.line}`,
+			color: colors.textMuted,
+			fontFamily: font.mono,
+			fontSize: font.sizeXs,
+			lineHeight: font.leadingNormal,
+			whiteSpace: 'pre-wrap',
+			overflowWrap: 'anywhere',
+			scrollbarWidth: 'thin'
+		}
+	});
+</script>
+
+<script lang="ts">
+	let {
+		kind = 'tool',
+		label,
+		status = 'done',
+		reason,
+		output,
+		tail = 4000,
+		statusLabels,
+		children,
+		sx,
+		class: className
+	}: ActivityStepProps = $props();
+
+	const shown = $derived(output && output.length > tail ? `…${output.slice(-tail)}` : output);
+	const parts = $derived(emphasis(kind, label));
+	const bad = $derived(status === 'failed' || status === 'declined' || status === 'blocked');
+
+	// Long output opens at its end, where the result is
+	function toEnd(element: HTMLElement) {
+		element.scrollTop = element.scrollHeight;
+	}
+</script>
+
+<div data-slot="activity-step" data-status={status} {...attrs([styles.step, sx], className)}>
+	<span {...stylex.attrs(styles.icon)}>
+		<Tile
+			size="sm"
+			tone={status === 'running' ? 'live' : bad ? 'danger' : 'neutral'}
+			glyph={status === 'running' ? undefined : KIND_GLYPHS[kind]}
+			>{#if status === 'running'}<Spinner size={11} label={null} />{/if}</Tile
+		>
+	</span>
+	<span {...stylex.attrs(styles.line)}>
+		<code {...stylex.attrs(styles.label)}
+			>{parts[0]}<span {...stylex.attrs(styles.main)}>{parts[1]}</span>{parts[2]}</code
+		>
+		{#if bad}
+			<span {...stylex.attrs(styles.badge)}
+				>{statusLabels?.[status as 'failed'] ?? LABELS[status as 'failed']}</span
+			>
+		{/if}
+	</span>
+	{#if reason || shown || children}
+		<div {...stylex.attrs(styles.body)}>
+			{#if reason}<p {...stylex.attrs(styles.reason)}>{reason}</p>{/if}
+			{#if shown}
+				<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+				<pre tabindex="0" {...stylex.attrs(styles.output)} {@attach toEnd}>{shown}</pre>
+			{/if}
+			{@render children?.()}
+		</div>
+	{/if}
+</div>

package/dist/components/activity/ActivityStep.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+import { type ActionKind } from '../../internal/kinds.js';
+import { type Sx } from '../../internal/sx.js';
+export type ActivityStepKind = ActionKind;
+export type ActivityStepStatus = 'running' | 'done' | 'failed' | 'declined' | 'blocked';
+export type ActivityStepProps = {
+    kind?: ActivityStepKind;
+    /** The command, the path, the query: shown as code. */
+    label: string;
+    status?: ActivityStepStatus;
+    /** Why it went the way it did, such as why it was blocked. */
+    reason?: string;
+    /** What it printed. Only the end is kept when it is long. */
+    output?: string;
+    /** How much of the output to keep, from the end, in characters. */
+    tail?: number;
+    /** Words for the statuses that need them. */
+    statusLabels?: Partial<Record<'failed' | 'declined' | 'blocked', string>>;
+    /** Anything else: images, a diff. */
+    children?: Snippet;
+    sx?: Sx;
+    class?: string;
+};
+declare const ActivityStep: import("svelte").Component<ActivityStepProps, {}, "">;
+type ActivityStep = ReturnType<typeof ActivityStep>;
+export default ActivityStep;

package/dist/components/activity/ActivityThought.svelte

@@ -0,0 +1,60 @@
+<!-- The agent's thinking between steps, on the rail with the steps, set apart in italics. -->
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import Tile from '../../internal/Tile.svelte';
+	import { colors, font } from '../../tokens.stylex.js';
+	import Shimmer from '../shimmer/Shimmer.svelte';
+
+	export type ActivityThoughtProps = {
+		text: string;
+		/** Set while the thought is still arriving. */
+		active?: boolean;
+		label?: string;
+		activeLabel?: string;
+	};
+
+	const styles = stylex.create({
+		thought: {
+			display: 'grid',
+			gridTemplateColumns: '1.5rem minmax(0, 1fr)',
+			columnGap: '0.625rem',
+			minWidth: 0
+		},
+		icon: { display: 'grid', placeItems: 'center', height: '1.25rem' },
+		body: { display: 'flex', flexDirection: 'column', gap: '0.125rem', minWidth: 0 },
+		label: {
+			color: colors.textSubtle,
+			fontSize: font.sizeXs,
+			fontWeight: font.weightMedium,
+			lineHeight: '1.25rem'
+		},
+		text: {
+			margin: 0,
+			color: colors.textMuted,
+			fontSize: font.sizeSm,
+			fontStyle: 'italic',
+			lineHeight: font.leadingNormal
+		}
+	});
+</script>
+
+<script lang="ts">
+	let {
+		text,
+		active = false,
+		label = 'Thought',
+		activeLabel = 'Thinking'
+	}: ActivityThoughtProps = $props();
+</script>
+
+<div data-slot="activity-thought" {...stylex.attrs(styles.thought)}>
+	<span {...stylex.attrs(styles.icon)}>
+		<Tile size="sm" glyph="bulb" tone={active ? 'live' : 'neutral'} />
+	</span>
+	<div {...stylex.attrs(styles.body)}>
+		<span {...stylex.attrs(styles.label)}
+			><Shimmer {active}>{active ? activeLabel : label}</Shimmer></span
+		>
+		<p {...stylex.attrs(styles.text)}>{text}</p>
+	</div>
+</div>

package/dist/components/activity/ActivityThought.svelte.d.ts

@@ -0,0 +1,10 @@
+export type ActivityThoughtProps = {
+    text: string;
+    /** Set while the thought is still arriving. */
+    active?: boolean;
+    label?: string;
+    activeLabel?: string;
+};
+declare const ActivityThought: import("svelte").Component<ActivityThoughtProps, {}, "">;
+type ActivityThought = ReturnType<typeof ActivityThought>;
+export default ActivityThought;

package/dist/components/activity/ActivityTrigger.svelte

@@ -0,0 +1,103 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Chevron from '../../internal/Chevron.svelte';
+	import { KIND_GLYPHS, type ActionKind } from '../../internal/kinds.js';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import Tile from '../../internal/Tile.svelte';
+	import { colors, font, motion, radius } from '../../tokens.stylex.js';
+	import RollingText from '../rolling-text/RollingText.svelte';
+	import { getActivityContext } from './context.js';
+
+	export type ActivityTriggerProps = Omit<HTMLButtonAttributes, 'children'> & {
+		/** What the agent is doing now, in the present tense: "Running pnpm check". */
+		phrase?: string;
+		/** What it did, once settled, in the past tense: "Read 4 files and ran 2 commands". */
+		summary: string;
+		/** The kind of the current action, or of the whole stretch, which picks the icon. */
+		kind?: ActionKind;
+		/** An icon of your own. Without it or a kind, stacked steps. */
+		icon?: Snippet;
+		/** How a failure count is said: "2 failed". */
+		failedLabel?: (count: number) => string;
+		sx?: Sx;
+	};
+
+	const HOVER = '@media (hover: hover) and (pointer: fine)';
+
+	const styles = stylex.create({
+		trigger: {
+			display: 'flex',
+			alignItems: 'center',
+			alignSelf: 'flex-start',
+			gap: '0.625rem',
+			maxWidth: '100%',
+			minHeight: '1.75rem',
+			margin: 0,
+			padding: 0,
+			borderWidth: 0,
+			borderRadius: radius.xs,
+			backgroundColor: 'transparent',
+			color: { default: colors.textMuted, ':hover': { default: null, [HOVER]: colors.text } },
+			fontFamily: 'inherit',
+			fontSize: font.sizeMd,
+			lineHeight: font.leadingSnug,
+			textAlign: 'start',
+			cursor: 'pointer',
+			outlineStyle: 'solid',
+			outlineWidth: { default: 0, ':focus-visible': '2px' },
+			outlineColor: colors.focusRing,
+			outlineOffset: '2px',
+			transitionProperty: 'color',
+			transitionDuration: motion.fast,
+			transitionTimingFunction: 'ease'
+		},
+		chevron: { display: 'grid', color: colors.textSubtle },
+		text: { display: 'inline-flex', minWidth: 0, gap: '0.375rem' },
+		failed: { flexShrink: 0, color: colors.danger }
+	});
+</script>
+
+<script lang="ts">
+	let {
+		phrase,
+		summary,
+		kind,
+		icon,
+		failedLabel = (count) => `${count} failed`,
+		sx,
+		class: className,
+		onclick,
+		...rest
+	}: ActivityTriggerProps = $props();
+
+	const activity = getActivityContext('Trigger');
+	const text = $derived(activity.active && phrase ? phrase : summary);
+</script>
+
+<button
+	type="button"
+	id={activity.triggerId}
+	aria-expanded={activity.open}
+	aria-controls={activity.contentId}
+	data-slot="activity-trigger"
+	{...rest}
+	{...attrs([styles.trigger, sx], className)}
+	onclick={(event) => {
+		onclick?.(event);
+		if (!event.defaultPrevented) activity.toggle();
+	}}
+>
+	<Tile
+		tone={activity.active ? 'live' : activity.failures > 0 ? 'danger' : 'neutral'}
+		glyph={icon ? undefined : kind ? KIND_GLYPHS[kind] : 'layers'}>{@render icon?.()}</Tile
+	>
+	<span {...stylex.attrs(styles.text)}>
+		<RollingText {text} shimmer={activity.active} />
+		{#if activity.failures > 0}
+			<span {...stylex.attrs(styles.failed)}>· {failedLabel(activity.failures)}</span>
+		{/if}
+	</span>
+	<span {...stylex.attrs(styles.chevron)}><Chevron open={activity.open} size={12} /></span>
+</button>

package/dist/components/activity/ActivityTrigger.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import { type ActionKind } from '../../internal/kinds.js';
+import { type Sx } from '../../internal/sx.js';
+export type ActivityTriggerProps = Omit<HTMLButtonAttributes, 'children'> & {
+    /** What the agent is doing now, in the present tense: "Running pnpm check". */
+    phrase?: string;
+    /** What it did, once settled, in the past tense: "Read 4 files and ran 2 commands". */
+    summary: string;
+    /** The kind of the current action, or of the whole stretch, which picks the icon. */
+    kind?: ActionKind;
+    /** An icon of your own. Without it or a kind, stacked steps. */
+    icon?: Snippet;
+    /** How a failure count is said: "2 failed". */
+    failedLabel?: (count: number) => string;
+    sx?: Sx;
+};
+declare const ActivityTrigger: import("svelte").Component<ActivityTriggerProps, {}, "">;
+type ActivityTrigger = ReturnType<typeof ActivityTrigger>;
+export default ActivityTrigger;

package/dist/components/activity/context.d.ts

@@ -0,0 +1,7 @@
+import type { DisclosureContext } from '../../internal/disclosure.js';
+export type ActivityContext = DisclosureContext & {
+    readonly active: boolean;
+    readonly failures: number;
+};
+export declare function setActivityContext(context: ActivityContext): void;
+export declare function getActivityContext(part: string): ActivityContext;

package/dist/components/activity/context.js

@@ -0,0 +1,11 @@
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('narvi.activity');
+export function setActivityContext(context) {
+    setContext(KEY, context);
+}
+export function getActivityContext(part) {
+    const context = getContext(KEY);
+    if (!context)
+        throw new Error(`<Activity.${part}> must be placed inside <Activity.Root>.`);
+    return context;
+}

package/dist/components/activity/index.d.ts

@@ -0,0 +1,11 @@
+import Content from './ActivityContent.svelte';
+import Root from './ActivityRoot.svelte';
+import Step from './ActivityStep.svelte';
+import Thought from './ActivityThought.svelte';
+import Trigger from './ActivityTrigger.svelte';
+export { Root, Trigger, Content, Step, Thought };
+export type { ActivityContentProps } from './ActivityContent.svelte';
+export type { ActivityRootProps } from './ActivityRoot.svelte';
+export type { ActivityStepKind, ActivityStepProps, ActivityStepStatus } from './ActivityStep.svelte';
+export type { ActivityThoughtProps } from './ActivityThought.svelte';
+export type { ActivityTriggerProps } from './ActivityTrigger.svelte';

package/dist/components/activity/index.js

@@ -0,0 +1,6 @@
+import Content from './ActivityContent.svelte';
+import Root from './ActivityRoot.svelte';
+import Step from './ActivityStep.svelte';
+import Thought from './ActivityThought.svelte';
+import Trigger from './ActivityTrigger.svelte';
+export { Root, Trigger, Content, Step, Thought };