@ggml/llama-ui 0.0.0-stage → 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) ggml
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,18 @@
-# Temporary Holding Version
+# @ggml/llama-ui
 
-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.
+Shared UI library for llama.cpp frontend apps.
+
+Planned layers, extracted along real duplication between consumers:
+
+1. design tokens (as data + css) - consumable by Tailwind themes and GPUI set_css_vars
+2. primitives (shadcn-svelte based)
+3. domain widgets (model badges/avatars, markdown renderer, capabilities)
+4. chat logic core (services, stores, branching model)
+
+First consumers: llama-chat (tools/ui in llama.cpp) and llama.pages.
+
+## Development
+
+- `npm run dev` - demo/showcase site (src/routes)
+- `npm run check` - svelte-check
+- `npm run prepack` - build the library into dist/ and run publint

package/dist/components/ui/button/button.svelte

@@ -0,0 +1,92 @@
+<script lang="ts" module>
+	import { cn, type WithElementRef } from '../../../utils.js';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+	import { tv, type VariantProps } from 'tailwind-variants';
+
+	export const buttonVariants = tv({
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		defaultVariants: {
+			size: 'default',
+			variant: 'default'
+		},
+		variants: {
+			size: {
+				default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+				icon: 'size-9',
+				'icon-lg': 'size-10',
+				'icon-sm': 'size-5 rounded-sm',
+				lg: 'h-10 rounded-lg px-6 has-[>svg]:px-4',
+				sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5'
+			},
+			variant: {
+				default: 'bg-primary text-primary-foreground shadow-sm hover:bg-primary/90',
+				destructive:
+					'bg-destructive shadow-sm hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white!',
+				ghost: 'hover:text-accent-foreground hover:bg-muted-foreground/10 backdrop-blur-sm',
+				link: 'text-primary underline-offset-4 hover:underline',
+				outline:
+					'shadow-sm hover:text-accent-foreground hover:bg-muted-foreground/10 backdrop-blur-sm dark:border-input border',
+				secondary:
+					'bg-muted/30 dark:bg-muted-foreground/15 dark:text-secondary-foreground shadow-sm border-muted border text-foreground hover:bg-muted dark:hover:bg-muted-foreground/25',
+				tertiary:
+					'bg-muted/60 dark:bg-muted/75 shadow-sm border border-border/30 text-foreground hover:bg-muted/80 dark:border-border/20 dark:hover:bg-muted'
+			}
+		}
+	});
+
+	export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
+	export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
+
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			variant?: ButtonVariant;
+			size?: ButtonSize;
+		};
+</script>
+
+<script lang="ts">
+	let {
+		children,
+		class: className,
+		disabled,
+		href = undefined,
+		ref = $bindable(null),
+		size = 'default',
+		type = 'button',
+		variant = 'default',
+		...restProps
+	}: ButtonProps = $props();
+</script>
+
+{#if href}
+	<a
+		bind:this={ref}
+		aria-disabled={disabled}
+		class={cn(buttonVariants({ size, variant }), className)}
+		data-slot="button"
+		href={disabled ? undefined : href}
+		role={disabled ? 'link' : undefined}
+		tabindex={disabled ? -1 : undefined}
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		class={cn(buttonVariants({ size, variant }), className)}
+		data-slot="button"
+		{disabled}
+		{type}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}
+
+<style>
+	a,
+	button {
+		cursor: pointer;
+	}
+</style>

package/dist/components/ui/button/button.svelte.d.ts

@@ -0,0 +1,67 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import { type VariantProps } from 'tailwind-variants';
+export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3";
+        icon: "size-9";
+        'icon-lg': "size-10";
+        'icon-sm': "size-5 rounded-sm";
+        lg: "h-10 rounded-lg px-6 has-[>svg]:px-4";
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5";
+    };
+    variant: {
+        default: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90";
+        destructive: "bg-destructive shadow-sm hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white!";
+        ghost: "hover:text-accent-foreground hover:bg-muted-foreground/10 backdrop-blur-sm";
+        link: "text-primary underline-offset-4 hover:underline";
+        outline: "shadow-sm hover:text-accent-foreground hover:bg-muted-foreground/10 backdrop-blur-sm dark:border-input border";
+        secondary: "bg-muted/30 dark:bg-muted-foreground/15 dark:text-secondary-foreground shadow-sm border-muted border text-foreground hover:bg-muted dark:hover:bg-muted-foreground/25";
+        tertiary: "bg-muted/60 dark:bg-muted/75 shadow-sm border border-border/30 text-foreground hover:bg-muted/80 dark:border-border/20 dark:hover:bg-muted";
+    };
+}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+    size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3";
+        icon: "size-9";
+        'icon-lg': "size-10";
+        'icon-sm': "size-5 rounded-sm";
+        lg: "h-10 rounded-lg px-6 has-[>svg]:px-4";
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5";
+    };
+    variant: {
+        default: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90";
+        destructive: "bg-destructive shadow-sm hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white!";
+        ghost: "hover:text-accent-foreground hover:bg-muted-foreground/10 backdrop-blur-sm";
+        link: "text-primary underline-offset-4 hover:underline";
+        outline: "shadow-sm hover:text-accent-foreground hover:bg-muted-foreground/10 backdrop-blur-sm dark:border-input border";
+        secondary: "bg-muted/30 dark:bg-muted-foreground/15 dark:text-secondary-foreground shadow-sm border-muted border text-foreground hover:bg-muted dark:hover:bg-muted-foreground/25";
+        tertiary: "bg-muted/60 dark:bg-muted/75 shadow-sm border border-border/30 text-foreground hover:bg-muted/80 dark:border-border/20 dark:hover:bg-muted";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3";
+        icon: "size-9";
+        'icon-lg': "size-10";
+        'icon-sm': "size-5 rounded-sm";
+        lg: "h-10 rounded-lg px-6 has-[>svg]:px-4";
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5";
+    };
+    variant: {
+        default: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90";
+        destructive: "bg-destructive shadow-sm hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white!";
+        ghost: "hover:text-accent-foreground hover:bg-muted-foreground/10 backdrop-blur-sm";
+        link: "text-primary underline-offset-4 hover:underline";
+        outline: "shadow-sm hover:text-accent-foreground hover:bg-muted-foreground/10 backdrop-blur-sm dark:border-input border";
+        secondary: "bg-muted/30 dark:bg-muted-foreground/15 dark:text-secondary-foreground shadow-sm border-muted border text-foreground hover:bg-muted dark:hover:bg-muted-foreground/25";
+        tertiary: "bg-muted/60 dark:bg-muted/75 shadow-sm border border-border/30 text-foreground hover:bg-muted/80 dark:border-border/20 dark:hover:bg-muted";
+    };
+}, undefined>>;
+export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
+export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
+export type ButtonProps = WithElementRef<HTMLButtonAttributes> & WithElementRef<HTMLAnchorAttributes> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+};
+declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/ui/button/index.d.ts

@@ -0,0 +1,2 @@
+import Root, { type ButtonProps, type ButtonSize, type ButtonVariant, buttonVariants } from './button.svelte';
+export { Root, type ButtonProps as Props, Root as Button, buttonVariants, type ButtonProps, type ButtonSize, type ButtonVariant };

package/dist/components/ui/button/index.js

@@ -0,0 +1,4 @@
+import Root, { buttonVariants } from './button.svelte';
+export { Root, 
+//
+Root as Button, buttonVariants };

package/dist/components/ui/chat-message/chat-message.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { ChatMessageRole } from './index.js';
+
+	interface Props {
+		role?: ChatMessageRole;
+		content?: string;
+		class?: string;
+	}
+
+	let { role = 'user', content = '', class: className = '' }: Props = $props();
+
+	const bubbleClassByRole = {
+		// mirrors the tools/ui user bubble: faint primary tint, borderless, backdrop blur
+		user: 'bg-primary/5 dark:bg-primary/15 backdrop-blur-md',
+		assistant: 'bg-transparent',
+		// mirrors the tools/ui system card: dashed border on a muted card
+		system: 'bg-muted border-2 border-dashed border-border/50'
+	} as const;
+</script>
+
+<div
+	class="flex flex-col {role === 'user' ? 'items-end' : 'items-start'} {role === 'system'
+		? 'mx-auto'
+		: ''} {className}"
+>
+	{#if content.trim()}
+		<div
+			class="w-full max-w-[80%] rounded-[1.125rem] px-3.75 py-1.5 text-md text-foreground {bubbleClassByRole[role]}"
+			style="overflow-wrap: anywhere; word-break: break-word;"
+		>
+			<span class="whitespace-pre-wrap">{content}</span>
+		</div>
+	{/if}
+</div>

package/dist/components/ui/chat-message/chat-message.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ChatMessageRole } from './index.js';
+interface Props {
+    role?: ChatMessageRole;
+    content?: string;
+    class?: string;
+}
+declare const ChatMessage: import("svelte").Component<Props, {}, "">;
+type ChatMessage = ReturnType<typeof ChatMessage>;
+export default ChatMessage;

package/dist/components/ui/chat-message/index.d.ts

@@ -0,0 +1,3 @@
+export type ChatMessageRole = 'user' | 'assistant' | 'system';
+import Root from './chat-message.svelte';
+export { Root, Root as ChatMessage };

package/dist/components/ui/chat-message/index.js

@@ -0,0 +1,4 @@
+import Root from './chat-message.svelte';
+export { Root, 
+//
+Root as ChatMessage };

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { theme, tokensFor, type TokenMap, type ThemeName } from './tokens.js';
+export { cn, type WithElementRef } from './utils.js';
+export { Button, buttonVariants, type ButtonProps, type ButtonSize, type ButtonVariant } from './components/ui/button/index.js';

package/dist/index.js

@@ -0,0 +1,4 @@
+// public API of the library; grows as pieces are extracted from llama-ui (tools/ui) and llama-pages
+export { theme, tokensFor } from './tokens.js';
+export { cn } from './utils.js';
+export { Button, buttonVariants } from './components/ui/button/index.js';

package/dist/styles/tokens.css

@@ -0,0 +1,74 @@
+/* Design tokens for llama-ui components.
+ * Light values on :root, dark overrides on .dark (toggle with a .dark class on <html>).
+ * The @theme inline block maps them to the Tailwind color names the components use.
+ * Consumers: @import '@ggml/llama-ui/tokens.css' after 'tailwindcss'.
+ */
+@custom-variant dark (&:is(.dark *));
+
+:root {
+	--radius: 0.625rem;
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.145 0 0);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.145 0 0);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.145 0 0);
+	--primary: oklch(0.205 0 0);
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: oklch(0.95 0 0);
+	--secondary-foreground: oklch(0.205 0 0);
+	--muted: oklch(0.97 0 0);
+	--muted-foreground: oklch(0.556 0 0);
+	--accent: oklch(0.95 0 0);
+	--accent-foreground: oklch(0.205 0 0);
+	--destructive: oklch(0.577 0.245 27.325);
+	--border: oklch(0.875 0 0);
+	--input: oklch(0.92 0 0);
+	--ring: oklch(0.708 0 0);
+}
+
+.dark {
+	--background: oklch(0.16 0 0);
+	--foreground: oklch(0.985 0 0);
+	--card: oklch(0.205 0 0);
+	--card-foreground: oklch(0.985 0 0);
+	--popover: oklch(0.205 0 0);
+	--popover-foreground: oklch(0.985 0 0);
+	--primary: oklch(0.922 0 0);
+	--primary-foreground: oklch(0.205 0 0);
+	--secondary: oklch(0.29 0 0);
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.269 0 0);
+	--muted-foreground: oklch(0.708 0 0);
+	--accent: oklch(0.269 0 0);
+	--accent-foreground: oklch(0.985 0 0);
+	--destructive: oklch(0.704 0.191 22.216);
+	--border: oklch(1 0 0 / 30%);
+	--input: oklch(1 0 0 / 30%);
+	--ring: oklch(0.556 0 0);
+}
+
+@theme inline {
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+}

package/dist/tokens.css

@@ -0,0 +1,9 @@
+/* default (light) theme variables; consumers override or generate from tokens.js */
+:root {
+  --llama-ui-background: #ffffff;
+  --llama-ui-foreground: #111111;
+  --llama-ui-primary: #0f6b3f;
+  --llama-ui-primary-foreground: #ffffff;
+  --llama-ui-border: #e5e5e5;
+  --llama-ui-radius: 8px;
+}

package/dist/tokens.d.ts

@@ -0,0 +1,4 @@
+export type TokenMap = Record<string, string>;
+export type ThemeName = 'light' | 'dark';
+export declare const theme: Record<ThemeName, TokenMap>;
+export declare function tokensFor(name: ThemeName): TokenMap;

package/dist/tokens.js

@@ -0,0 +1,48 @@
+export const theme = {
+    light: {
+        '--radius': '0.625rem',
+        '--background': 'oklch(1 0 0)',
+        '--foreground': 'oklch(0.145 0 0)',
+        '--card': 'oklch(1 0 0)',
+        '--card-foreground': 'oklch(0.145 0 0)',
+        '--popover': 'oklch(1 0 0)',
+        '--popover-foreground': 'oklch(0.145 0 0)',
+        '--primary': 'oklch(0.205 0 0)',
+        '--primary-foreground': 'oklch(0.985 0 0)',
+        '--secondary': 'oklch(0.95 0 0)',
+        '--secondary-foreground': 'oklch(0.205 0 0)',
+        '--muted': 'oklch(0.97 0 0)',
+        '--muted-foreground': 'oklch(0.556 0 0)',
+        '--accent': 'oklch(0.95 0 0)',
+        '--accent-foreground': 'oklch(0.205 0 0)',
+        '--destructive': 'oklch(0.577 0.245 27.325)',
+        '--border': 'oklch(0.875 0 0)',
+        '--input': 'oklch(0.92 0 0)',
+        '--ring': 'oklch(0.708 0 0)'
+    },
+    dark: {
+        '--radius': '0.625rem',
+        '--background': 'oklch(0.16 0 0)',
+        '--foreground': 'oklch(0.985 0 0)',
+        '--card': 'oklch(0.205 0 0)',
+        '--card-foreground': 'oklch(0.985 0 0)',
+        '--popover': 'oklch(0.205 0 0)',
+        '--popover-foreground': 'oklch(0.985 0 0)',
+        '--primary': 'oklch(0.922 0 0)',
+        '--primary-foreground': 'oklch(0.205 0 0)',
+        '--secondary': 'oklch(0.29 0 0)',
+        '--secondary-foreground': 'oklch(0.985 0 0)',
+        '--muted': 'oklch(0.269 0 0)',
+        '--muted-foreground': 'oklch(0.708 0 0)',
+        '--accent': 'oklch(0.269 0 0)',
+        '--accent-foreground': 'oklch(0.985 0 0)',
+        '--destructive': 'oklch(0.704 0.191 22.216)',
+        '--border': 'oklch(1 0 0 / 30%)',
+        '--input': 'oklch(1 0 0 / 30%)',
+        '--ring': 'oklch(0.556 0 0)'
+    }
+};
+// flattened map for set_css_vars() style consumers, e.g. set_css_vars(theme.dark)
+export function tokensFor(name) {
+    return theme[name];
+}

package/dist/utils.d.ts

@@ -0,0 +1,12 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;
+export type WithoutChild<T> = T extends {
+    child?: any;
+} ? Omit<T, 'child'> : T;
+export type WithoutChildren<T> = T extends {
+    children?: any;
+} ? Omit<T, 'children'> : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & {
+    ref?: U | null;
+};

package/dist/utils.js

@@ -0,0 +1,5 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/package.json

@@ -1,6 +1,82 @@
 {
-  "name": "@ggml/llama-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+	"name": "@ggml/llama-ui",
+	"version": "0.0.1",
+	"license": "MIT",
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*",
+		"!dist/**/*.stories.*"
+	],
+	"type": "module",
+	"sideEffects": [
+		"**/*.css"
+	],
+	"types": "./dist/index.d.ts",
+	"svelte": "./dist/index.js",
+	"imports": {
+		"#lib": "./src/lib/index.js",
+		"#lib/*": "./src/lib/*"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		},
+		"./tokens.css": "./dist/styles/tokens.css"
+	},
+	"scripts": {
+		"dev": "bash scripts/dev.sh",
+		"build": "vp build && npm run prepack",
+		"preview": "vp preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"test:unit": "vp test",
+		"test": "npm run test:unit -- --run",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build",
+		"watch:package": "svelte-kit sync && svelte-package -w"
+	},
+	"devDependencies": {
+		"@chromatic-com/storybook": "latest",
+		"@storybook/addon-a11y": "^10.6.2",
+		"@storybook/addon-docs": "^10.6.2",
+		"@storybook/addon-svelte-csf": "latest",
+		"@storybook/addon-vitest": "^10.6.2",
+		"@storybook/sveltekit": "^10.6.2",
+		"@sveltejs/adapter-auto": "^8.0.0",
+		"@sveltejs/kit": "^3.0.0",
+		"@sveltejs/package": "^2.5.8",
+		"@sveltejs/vite-plugin-svelte": "^7.2.0",
+		"@tailwindcss/vite": "^4.3.3",
+		"@types/node": "^24",
+		"@vitest/browser-playwright": "5.0.5",
+		"@vitest/coverage-v8": "5.0.5",
+		"mode-watcher": "^1.1.0",
+		"playwright": "^1.60.0",
+		"publint": "^0.3.21",
+		"storybook": "^10.6.2",
+		"svelte": "^5.57.1",
+		"svelte-check": "^4.6.0",
+		"tailwindcss": "^4.3.3",
+		"typescript": "^6.0.3",
+		"vite": "npm:@voidzero-dev/vite-plus-core@1.3.0",
+		"vite-plus": "1.3.0",
+		"vitest": "5.0.5",
+		"vitest-browser-svelte": "^2.1.1"
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"overrides": {
+		"vite": "npm:@voidzero-dev/vite-plus-core@1.3.0",
+		"vitest": "5.0.5"
+	},
+	"dependencies": {
+		"clsx": "^2.1.1",
+		"tailwind-merge": "^3.7.0",
+		"tailwind-variants": "^3.3.1"
+	}
+}