@signal9/era-ui 2.1.0 → 2.3.0

package/dist/generated-docs/step.md

@@ -0,0 +1,51 @@
+# Step
+
+Expandable inline step — tool calls, thinking, agent actions.
+
+## Import
+
+```ts
+import { Step } from "$lib/ui/step";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+- `Step.Root`
+- `Step.Summary`
+- `Step.Content`
+- `Step.Section`
+
+## Step.Root
+
+Inherits all props from `Collapsible.RootProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `status?` | `StepStatus` | `'done'` | Drives the summary's icon and shimmer; exposed as data-status. |
+| `ref?` | `(forwarded)` | `null` | bindable |
+| `open?` | `(forwarded)` | `false` | bindable |
+
+## Step.Summary
+
+Inherits all props from `PartProps<Collapsible.TriggerProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Step.Content
+
+Inherits all props from `PartProps<Collapsible.ContentProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Step.Section
+
+Inherits all props from `HTMLAttributes<HTMLDivElement>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `label?` | `string` | — | Tiny uppercase section header — INPUT, OUTPUT, … |
+| `children?` | `Snippet` | — | — |

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './ui/index.js';
 export * as OS from './os/index.js';
+export * as AI from './ai/index.js';
 export type { Point, Size, Rect, Insets, Frame, Workspace, WindowState, SnapZone, AppWindow, AppDefinition, AppComponent, AppProps } from './os/index.js';
 export { cn, tv, hotkeys, keys, parseKeybinding, matchKeyBindingPress, createKeybindingsHandler, formatKeybinding, isApplePlatform, modKey, type KeyBindingMap, type KeyBindingPress, type KeyBindingOptions, type PartProps, type VariantProps } from './utils/index.js';

package/dist/index.js

@@ -1,3 +1,4 @@
 export * from './ui/index.js';
 export * as OS from './os/index.js';
+export * as AI from './ai/index.js';
 export { cn, tv, hotkeys, keys, parseKeybinding, matchKeyBindingPress, createKeybindingsHandler, formatKeybinding, isApplePlatform, modKey } from './utils/index.js';

package/dist/os/motion.d.ts

@@ -1,19 +1 @@
-import type { EasingFunction, TransitionConfig } from 'svelte/transition';
-type EraFlyParams = {
-    x?: number | string;
-    y?: number | string;
-    opacity?: number;
-    delay?: number;
-    duration?: number;
-    easing?: EasingFunction;
-};
-/**
- * Fly transition that reads Era's motion tokens from the rendered element.
- *
- * Svelte transition durations are JavaScript parameters, so hard-coded numbers
- * bypass the runtime `data-motion` axis. Reading `--era-duration` here keeps OS
- * overlays in sync with docs settings and library consumers that set motion on
- * an ancestor.
- */
-export declare function eraFly(node: Element, { x, y, opacity, delay, duration, easing }?: EraFlyParams): TransitionConfig;
-export {};
+export { eraFly } from '../utils/motion.js';

package/dist/os/motion.js

@@ -1,44 +1,3 @@
-const durationUnits = {
-    ms: 1,
-    s: 1000
-};
-function parseDuration(value) {
-    const match = value.trim().match(/^(-?\d*\.?\d+)(ms|s)$/i);
-    if (!match)
-        return undefined;
-    return Math.max(0, Number(match[1]) * durationUnits[match[2].toLowerCase()]);
-}
-function eraDuration(node, fallback) {
-    const token = getComputedStyle(node).getPropertyValue('--era-duration');
-    return parseDuration(token) ?? fallback;
-}
-function offset(value, progress) {
-    return typeof value === 'number' ? `${value * progress}px` : `calc(${value} * ${progress})`;
-}
-function eraEase(node) {
-    return getComputedStyle(node).getPropertyValue('--era-ease').trim() || undefined;
-}
-/**
- * Fly transition that reads Era's motion tokens from the rendered element.
- *
- * Svelte transition durations are JavaScript parameters, so hard-coded numbers
- * bypass the runtime `data-motion` axis. Reading `--era-duration` here keeps OS
- * overlays in sync with docs settings and library consumers that set motion on
- * an ancestor.
- */
-export function eraFly(node, { x = 0, y = 0, opacity = 0, delay = 0, duration = 150, easing } = {}) {
-    const style = getComputedStyle(node);
-    const targetOpacity = Number(style.opacity);
-    const transform = style.transform === 'none' ? '' : style.transform;
-    const cssEase = eraEase(node);
-    return {
-        delay,
-        duration: eraDuration(node, duration),
-        easing,
-        css: (t, u) => `
-			transform: ${transform} translate(${offset(x, u)}, ${offset(y, u)});
-			opacity: ${targetOpacity - (targetOpacity - opacity) * u};
-			${cssEase ? `animation-timing-function: ${cssEase};` : ''}
-		`
-    };
-}
+// Motion helpers moved to utils (they're layer-agnostic — the ui/ layer needs
+// them too). Re-exported here so os-internal imports keep working.
+export { eraFly } from '../utils/motion.js';

package/dist/os/taskbar.svelte

@@ -80,8 +80,10 @@
 	// every registered app launches from the root view, `windows` drills into
 	// the open windows (focus/restore — the recovery path when the window tabs
 	// are hidden), and `workspace` drills into numbered workspaces + `new`.
-	// Consumer `commands` append after the built-ins.
-	const commandItems = $derived.by((): CommandBarItem[] => {
+	// Consumer `commands` append after the built-ins (merged in a thin outer
+	// derived, so a consumer-commands change doesn't rebuild the wm closures
+	// and vice-versa).
+	const builtinItems = $derived.by((): CommandBarItem[] => {
 		const apps: CommandBarItem[] = Object.values(wm.apps).map((app) => ({
 			value: `app:${app.id}`,
 			label: app.title,
@@ -125,8 +127,9 @@
 				}
 			]
 		};
-		return [...apps, windows, workspaces, ...commands];
+		return [...apps, windows, workspaces];
 	});
+	const commandItems = $derived([...builtinItems, ...commands]);
 </script>
 
 <!-- Flush: three edges touch the shell; the exposed OUTER corners are the two

package/dist/styles/index.css

@@ -56,6 +56,32 @@
 	}
 }
 
+/* In-progress text shimmer — a bright sweep through muted text (the standard
+ * "working…" label treatment in streaming UIs). Timing derives from the motion
+ * axis (10× --era-duration ≈ 1.5s at normal, 2.6s at extra); at instant the
+ * duration is 0s and the sweep freezes on its base frame — plain muted text —
+ * so reduced-motion and data-motion="instant" both kill it for free. */
+@utility era-shimmer {
+	background: linear-gradient(
+		110deg,
+		var(--color-muted) 0% 43%,
+		var(--color-bright) 50%,
+		var(--color-muted) 57% 100%
+	);
+	background-size: 200% 100%;
+	background-clip: text;
+	-webkit-text-fill-color: transparent;
+	animation: era-shimmer calc(var(--era-duration) * 10) cubic-bezier(0.7, 0, 1, 0.4) infinite;
+}
+@keyframes era-shimmer {
+	0% {
+		background-position: 100% 0;
+	}
+	100% {
+		background-position: -100% 0;
+	}
+}
+
 /* Register color tokens as Tailwind theme values for autocomplete and bare utility usage */
 @theme inline {
 	/* Density-derived body size: `text-body` replaces text-[length:var(--era-text)] */

package/dist/ui/command-bar/command-bar.svelte

@@ -61,6 +61,12 @@
 	});
 	const selected = $derived(filtered[selectedIndex]);
 	const open = $derived(focused || value !== '');
+	const hotkeyList = $derived(hotkey ? (Array.isArray(hotkey) ? hotkey : [hotkey]) : []);
+	// The focus hotkeys double as close keys while the bar is focused (a bound
+	// key is never part of a command — it toggles). Only single-character
+	// bindings qualify; chords/mod combos can't collide with typing. Escape
+	// always closes.
+	const closeKeys = $derived(new Set(['Escape', ...hotkeyList.filter((b) => b.length === 1)]));
 
 	// zsh-style ghost completion: the selected item's remaining characters laid
 	// under the caret (or the view placeholder while empty).
@@ -118,9 +124,7 @@
 				e.preventDefault();
 				complete(selected);
 			}
-		} else if (e.key === 'Escape' || e.key === '`') {
-			// Backtick closes too: it's the focus hotkey, and a backtick is
-			// never part of a command — so it toggles rather than types.
+		} else if (closeKeys.has(e.key)) {
 			e.preventDefault();
 			e.stopPropagation();
 			reset();
@@ -139,10 +143,8 @@
 	// acts (it blurs the field); every other binding is ignored so typing a
 	// backtick in a text input never steals the caret.
 	const bindings = $derived.by((): KeyBindingMap => {
-		if (!hotkey) return {};
-		const list = Array.isArray(hotkey) ? hotkey : [hotkey];
 		return Object.fromEntries(
-			list.map((b) => [
+			hotkeyList.map((b) => [
 				b,
 				(e: KeyboardEvent) => {
 					if (isTextEntryFocused()) {

package/dist/ui/index.d.ts

@@ -11,6 +11,7 @@ export * as Combobox from './combobox/index.js';
 export * as Collapsible from './collapsible/index.js';
 export * as Command from './command/index.js';
 export * from './command-bar/index.js';
+export * as Step from './step/index.js';
 export * as ContextMenu from './context-menu/index.js';
 export * as DateField from './date-field/index.js';
 export * as DatePicker from './date-picker/index.js';

package/dist/ui/index.js

@@ -11,6 +11,7 @@ export * as Combobox from './combobox/index.js';
 export * as Collapsible from './collapsible/index.js';
 export * as Command from './command/index.js';
 export * from './command-bar/index.js';
+export * as Step from './step/index.js';
 export * as ContextMenu from './context-menu/index.js';
 export * as DateField from './date-field/index.js';
 export * as DatePicker from './date-picker/index.js';

package/dist/ui/step/context.d.ts

@@ -0,0 +1,8 @@
+/** The lifecycle of a step: not started, working, finished, failed. */
+export type StepStatus = 'pending' | 'running' | 'done' | 'error';
+type StepContext = {
+    readonly status: StepStatus;
+};
+export declare function setStepContext(ctx: StepContext): void;
+export declare function getStepContext(): StepContext;
+export {};

package/dist/ui/step/context.js

@@ -0,0 +1,8 @@
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('era-step');
+export function setStepContext(ctx) {
+    setContext(KEY, ctx);
+}
+export function getStepContext() {
+    return getContext(KEY) ?? { status: 'done' };
+}

package/dist/ui/step/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Root } from './step-root.svelte';
+export { default as Summary } from './step-summary.svelte';
+export { default as Content } from './step-content.svelte';
+export { default as Section } from './step-section.svelte';
+export type { StepStatus } from './context.js';

package/dist/ui/step/index.js

@@ -0,0 +1,4 @@
+export { default as Root } from './step-root.svelte';
+export { default as Summary } from './step-summary.svelte';
+export { default as Content } from './step-content.svelte';
+export { default as Section } from './step-section.svelte';

package/dist/ui/step/step-content.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { Collapsible } from 'bits-ui';
+	import { cn, type PartProps } from '../../utils/index.js';
+
+	let {
+		ref = $bindable(null),
+		children,
+		class: className,
+		...restProps
+	}: PartProps<Collapsible.ContentProps> = $props();
+</script>
+
+<!-- Height animates on the outer (padding-free) element via bits' measured
+     content-height var — padding lives on the inner well so the animation
+     never fights box metrics. The well is recessed (shadow-well): payload the
+     step produced, not raised chrome. -->
+<Collapsible.Content bind:ref data-era-step-content class="overflow-hidden" {...restProps}>
+	<div
+		class={cn(
+			'mt-(--era-gap) mb-(--era-gap) flex min-w-0 flex-col gap-(--era-pad-sm) rounded-(--era-rd-md) bg-(--era-surface-bg) p-(--era-pad-sm) shadow-(--era-shadow-well)',
+			className
+		)}
+	>
+		{@render children?.()}
+	</div>
+</Collapsible.Content>
+
+<style>
+	:global([data-era-step-content][data-state='open']) {
+		animation: era-step-expand var(--era-duration) var(--era-ease);
+	}
+	:global([data-era-step-content][data-state='closed']) {
+		animation: era-step-collapse var(--era-duration) var(--era-ease);
+	}
+	@keyframes -global-era-step-expand {
+		from {
+			height: 0;
+			opacity: 0;
+		}
+		to {
+			height: var(--bits-collapsible-content-height);
+			opacity: 1;
+		}
+	}
+	@keyframes -global-era-step-collapse {
+		from {
+			height: var(--bits-collapsible-content-height);
+			opacity: 1;
+		}
+		to {
+			height: 0;
+			opacity: 0;
+		}
+	}
+</style>

package/dist/ui/step/step-content.svelte.d.ts

@@ -0,0 +1,5 @@
+import { Collapsible } from 'bits-ui';
+import { type PartProps } from '../../utils/index.js';
+declare const StepContent: import("svelte").Component<PartProps<Collapsible.ContentProps>, {}, "ref">;
+type StepContent = ReturnType<typeof StepContent>;
+export default StepContent;

package/dist/ui/step/step-root.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Collapsible } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+	import { setStepContext, type StepStatus } from './context.js';
+
+	let {
+		ref = $bindable(null),
+		open = $bindable(false),
+		status = 'done',
+		class: className,
+		...restProps
+	}: Collapsible.RootProps & {
+		/** Drives the summary's icon and shimmer; exposed as data-status. */
+		status?: StepStatus;
+	} = $props();
+
+	// Shared with Summary via context (a getter, so status stays reactive).
+	setStepContext({
+		get status() {
+			return status;
+		}
+	});
+</script>
+
+<Collapsible.Root
+	bind:ref
+	bind:open
+	data-status={status}
+	class={cn('group/step flex w-full min-w-0 flex-col', className)}
+	{...restProps}
+/>

package/dist/ui/step/step-root.svelte.d.ts

@@ -0,0 +1,9 @@
+import { Collapsible } from 'bits-ui';
+import { type StepStatus } from './context.js';
+type $$ComponentProps = Collapsible.RootProps & {
+    /** Drives the summary's icon and shimmer; exposed as data-status. */
+    status?: StepStatus;
+};
+declare const StepRoot: import("svelte").Component<$$ComponentProps, {}, "ref" | "open">;
+type StepRoot = ReturnType<typeof StepRoot>;
+export default StepRoot;

package/dist/ui/step/step-section.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		label,
+		children,
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		/** Tiny uppercase section header — INPUT, OUTPUT, … */
+		label?: string;
+		children?: Snippet;
+	} = $props();
+</script>
+
+<div class={cn('flex min-w-0 flex-col gap-(--era-gap)', className)} {...restProps}>
+	{#if label}
+		<span class="text-[0.625rem] leading-none tracking-[0.15em] text-muted uppercase">{label}</span>
+	{/if}
+	{@render children?.()}
+</div>

package/dist/ui/step/step-section.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    /** Tiny uppercase section header — INPUT, OUTPUT, … */
+    label?: string;
+    children?: Snippet;
+};
+declare const StepSection: import("svelte").Component<$$ComponentProps, {}, "">;
+type StepSection = ReturnType<typeof StepSection>;
+export default StepSection;

package/dist/ui/step/step-summary.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { Collapsible } from 'bits-ui';
+	import LoaderCircle from '@lucide/svelte/icons/loader-circle';
+	import CircleCheck from '@lucide/svelte/icons/circle-check';
+	import CircleX from '@lucide/svelte/icons/circle-x';
+	import CircleDashed from '@lucide/svelte/icons/circle-dashed';
+	import ChevronDown from '@lucide/svelte/icons/chevron-down';
+	import { cn, type PartProps } from '../../utils/index.js';
+	import { getStepContext } from './context.js';
+
+	let {
+		ref = $bindable(null),
+		children,
+		class: className,
+		...restProps
+	}: PartProps<Collapsible.TriggerProps> = $props();
+
+	const step = getStepContext();
+</script>
+
+<!-- The collapsed line: status icon, label (shimmering while running — the
+     shimmer freezes to plain muted text at instant motion), rotating chevron.
+     Quiet by design — a step reads as an aside in the conversation, not a
+     control; it brightens on hover to reveal it's expandable. The spinner is
+     a progress indicator, not decoration, so it spins at every motion level. -->
+<Collapsible.Trigger
+	bind:ref
+	class={cn(
+		'flex h-(--era-h-md) w-full min-w-0 cursor-pointer era-interactive items-center gap-(--era-gap) rounded-(--era-rd-md) px-(--era-inset-md) text-body text-muted transition-colors duration-(--era-duration) ease-(--era-ease) hover:text-fg',
+		className
+	)}
+	{...restProps}
+>
+	{#if step.status === 'running'}
+		<LoaderCircle class="size-(--era-h-xs) shrink-0 animate-spin" aria-hidden="true" />
+	{:else if step.status === 'done'}
+		<CircleCheck class="size-(--era-h-xs) shrink-0 text-success" aria-hidden="true" />
+	{:else if step.status === 'error'}
+		<CircleX class="size-(--era-h-xs) shrink-0 text-destructive" aria-hidden="true" />
+	{:else}
+		<CircleDashed class="size-(--era-h-xs) shrink-0" aria-hidden="true" />
+	{/if}
+	<span
+		class={cn(
+			'flex min-w-0 flex-1 items-center gap-(--era-gap) truncate text-left',
+			step.status === 'running' && 'era-shimmer'
+		)}
+	>
+		{@render children?.()}
+	</span>
+	<ChevronDown
+		class="size-(--era-h-xs) shrink-0 transition-transform duration-(--era-duration) ease-(--era-ease) group-data-[state=open]/step:rotate-180"
+		aria-hidden="true"
+	/>
+</Collapsible.Trigger>

package/dist/ui/step/step-summary.svelte.d.ts

@@ -0,0 +1,5 @@
+import { Collapsible } from 'bits-ui';
+import { type PartProps } from '../../utils/index.js';
+declare const StepSummary: import("svelte").Component<PartProps<Collapsible.TriggerProps>, {}, "ref">;
+type StepSummary = ReturnType<typeof StepSummary>;
+export default StepSummary;

package/dist/utils/index.d.ts

@@ -14,3 +14,4 @@ export type PartProps<T> = WithoutChildrenOrChild<T> & {
     children?: Snippet;
 };
 export { hotkeys, keys, parseKeybinding, matchKeyBindingPress, createKeybindingsHandler, formatKeybinding, isApplePlatform, modKey, type KeyBindingMap, type KeyBindingPress, type KeyBindingOptions } from './hotkeys.js';
+export { eraFly } from './motion.js';

package/dist/utils/index.js

@@ -23,3 +23,4 @@ export function cn(...inputs) {
 /** `tv` preconfigured with this library's tailwind-merge settings. */
 export const tv = createTV({ twMergeConfig });
 export { hotkeys, keys, parseKeybinding, matchKeyBindingPress, createKeybindingsHandler, formatKeybinding, isApplePlatform, modKey } from './hotkeys.js';
+export { eraFly } from './motion.js';

package/dist/utils/motion.d.ts

@@ -0,0 +1,19 @@
+import type { EasingFunction, TransitionConfig } from 'svelte/transition';
+type EraFlyParams = {
+    x?: number | string;
+    y?: number | string;
+    opacity?: number;
+    delay?: number;
+    duration?: number;
+    easing?: EasingFunction;
+};
+/**
+ * Fly transition that reads Era's motion tokens from the rendered element.
+ *
+ * Svelte transition durations are JavaScript parameters, so hard-coded numbers
+ * bypass the runtime `data-motion` axis. Reading `--era-duration` here keeps OS
+ * overlays in sync with docs settings and library consumers that set motion on
+ * an ancestor.
+ */
+export declare function eraFly(node: Element, { x, y, opacity, delay, duration, easing }?: EraFlyParams): TransitionConfig;
+export {};

package/dist/utils/motion.js

@@ -0,0 +1,44 @@
+const durationUnits = {
+    ms: 1,
+    s: 1000
+};
+function parseDuration(value) {
+    const match = value.trim().match(/^(-?\d*\.?\d+)(ms|s)$/i);
+    if (!match)
+        return undefined;
+    return Math.max(0, Number(match[1]) * durationUnits[match[2].toLowerCase()]);
+}
+function eraDuration(node, fallback) {
+    const token = getComputedStyle(node).getPropertyValue('--era-duration');
+    return parseDuration(token) ?? fallback;
+}
+function offset(value, progress) {
+    return typeof value === 'number' ? `${value * progress}px` : `calc(${value} * ${progress})`;
+}
+function eraEase(node) {
+    return getComputedStyle(node).getPropertyValue('--era-ease').trim() || undefined;
+}
+/**
+ * Fly transition that reads Era's motion tokens from the rendered element.
+ *
+ * Svelte transition durations are JavaScript parameters, so hard-coded numbers
+ * bypass the runtime `data-motion` axis. Reading `--era-duration` here keeps OS
+ * overlays in sync with docs settings and library consumers that set motion on
+ * an ancestor.
+ */
+export function eraFly(node, { x = 0, y = 0, opacity = 0, delay = 0, duration = 150, easing } = {}) {
+    const style = getComputedStyle(node);
+    const targetOpacity = Number(style.opacity);
+    const transform = style.transform === 'none' ? '' : style.transform;
+    const cssEase = eraEase(node);
+    return {
+        delay,
+        duration: eraDuration(node, duration),
+        easing,
+        css: (t, u) => `
+			transform: ${transform} translate(${offset(x, u)}, ${offset(y, u)});
+			opacity: ${targetOpacity - (targetOpacity - opacity) * u};
+			${cssEase ? `animation-timing-function: ${cssEase};` : ''}
+		`
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "2.1.0",
+	"version": "2.3.0",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",
@@ -47,6 +47,16 @@
 			"svelte": "./dist/ui/provider/index.js",
 			"default": "./dist/ui/provider/index.js"
 		},
+		"./ai": {
+			"types": "./dist/ai/index.d.ts",
+			"svelte": "./dist/ai/index.js",
+			"default": "./dist/ai/index.js"
+		},
+		"./ai/workflow": {
+			"types": "./dist/ai/workflow/index.d.ts",
+			"svelte": "./dist/ai/workflow/index.js",
+			"default": "./dist/ai/workflow/index.js"
+		},
 		"./os": {
 			"types": "./dist/os/index.d.ts",
 			"svelte": "./dist/os/index.js",
@@ -77,6 +87,7 @@
 		"@threlte/extras": "^9.21.0",
 		"@types/node": "^24.13.2",
 		"@types/three": "^0.184.1",
+		"@xyflow/svelte": "^1.6.2",
 		"eslint": "^9.39.4",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-better-tailwindcss": "^4.6.1",
@@ -114,6 +125,8 @@
 		"@neodrag/svelte": "^3.0.0-next.8",
 		"bits-ui": "^2.18.1",
 		"clsx": "^2.1.1",
+		"dompurify": "^3.4.12",
+		"marked": "^15.0.12",
 		"tailwind-merge": "^3.6.0",
 		"tailwind-variants": "^3.2.2",
 		"vidstack": "^0.6.15"