claude-mux 0.7.0

package/web/src/lib/components/TerminalRenderer.svelte

@@ -0,0 +1,189 @@
+<script lang="ts">
+	import type { ParsedBlock } from '$lib/types/terminal';
+
+	interface Props {
+		blocks: ParsedBlock[];
+		class?: string;
+	}
+
+	const { blocks, class: className = '' }: Props = $props();
+
+	// Type-specific styling classes
+	const typeStyles: Record<string, string> = {
+		'user-prompt': 'terminal-user-prompt',
+		'claude-response': 'terminal-claude-response',
+		'tool-call': 'terminal-tool-call',
+		'tool-result': 'terminal-tool-result',
+		separator: 'terminal-separator',
+		status: 'terminal-status',
+		spinner: 'terminal-spinner',
+		plain: 'terminal-plain'
+	};
+
+	// Tool-specific colors
+	const toolColors: Record<string, string> = {
+		// File operations
+		'Read': 'tool-read',
+		'Write': 'tool-write',
+		'Edit': 'tool-edit',
+		'Update': 'tool-edit',
+		'NotebookEdit': 'tool-edit',
+		'Glob': 'tool-search',
+		'Grep': 'tool-search',
+		'Search': 'tool-search',
+		// Execution
+		'Bash': 'tool-bash',
+		'Task': 'tool-task',
+		// Web operations
+		'WebFetch': 'tool-web',
+		'WebSearch': 'tool-web',
+		// Todo
+		'TodoWrite': 'tool-todo',
+		// Browser/MCP
+		'chrome-devtools': 'tool-browser',
+		'mcp': 'tool-browser',
+	};
+
+	function getToolClass(toolName: string | undefined): string {
+		if (!toolName) return 'tool-default';
+		// Check exact match first
+		if (toolColors[toolName]) return toolColors[toolName];
+		// Check if tool name contains a known prefix
+		for (const [key, value] of Object.entries(toolColors)) {
+			if (toolName.toLowerCase().includes(key.toLowerCase())) return value;
+		}
+		return 'tool-default';
+	}
+
+	// Process content for diff highlighting
+	function processDiffContent(content: string): string {
+		return content
+			.split('\n')
+			.map(line => {
+				// Diff lines: number followed by + or -
+				if (/^\s*\d+\s*\+/.test(line)) {
+					return `<span class="diff-add">${escapeHtml(line)}</span>`;
+				}
+				if (/^\s*\d+\s*-/.test(line)) {
+					return `<span class="diff-remove">${escapeHtml(line)}</span>`;
+				}
+				return escapeHtml(line);
+			})
+			.join('\n');
+	}
+
+	function escapeHtml(text: string): string {
+		return text
+			.replace(/&/g, '&amp;')
+			.replace(/</g, '&lt;')
+			.replace(/>/g, '&gt;')
+			.replace(/"/g, '&quot;')
+			.replace(/'/g, '&#39;');
+	}
+</script>
+
+<pre class="terminal-renderer {className}">{#each blocks as block (block.id)}<span class="terminal-block {typeStyles[block.type] || 'terminal-plain'} {block.type === 'tool-call' ? getToolClass(block.metadata?.toolName) : ''}">{#if block.type === 'tool-call' && block.metadata?.toolName}<span class="tool-badge {getToolClass(block.metadata.toolName)}">{block.metadata.toolName}</span>{/if}{#if block.type === 'tool-result'}{@html processDiffContent(block.content)}{:else}{block.content}{/if}</span>
+{/each}</pre>
+
+<style>
+	/* Tool color definitions - single source of truth */
+	.terminal-renderer {
+		--tool-read: #60a5fa;      /* blue */
+		--tool-write: #c084fc;     /* purple */
+		--tool-edit: #fbbf24;      /* amber/yellow */
+		--tool-search: #f472b6;    /* pink */
+		--tool-bash: #22d3ee;      /* cyan */
+		--tool-task: #a78bfa;      /* violet */
+		--tool-web: #fb923c;       /* orange-400 */
+		--tool-todo: #a3e635;      /* lime-400 */
+		--tool-browser: #f97316;   /* orange-500 */
+		--tool-default: #4ade80;   /* green */
+
+		margin: 0;
+		font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+		font-size: 13px;
+		line-height: 1.4;
+		white-space: pre-wrap;
+		word-break: break-word;
+		background: #000;
+		color: #fff;
+	}
+
+	/* User prompt: blue */
+	.terminal-user-prompt {
+		color: var(--tool-read);
+		font-weight: 500;
+	}
+
+	/* Claude response: white (normal conversation) */
+	.terminal-claude-response {
+		color: #fff;
+	}
+
+	/* Tool call: default green */
+	.terminal-tool-call {
+		color: var(--tool-default);
+	}
+
+	.tool-badge {
+		font-size: 11px;
+		font-weight: 600;
+		color: #000;
+		padding: 0 4px;
+		border-radius: 3px;
+		margin-right: 4px;
+		background: var(--tool-default);
+	}
+
+	/* Tool-specific colors - badge backgrounds and text use same variable */
+	.tool-badge.tool-read { background: var(--tool-read); }
+	.tool-badge.tool-write { background: var(--tool-write); }
+	.tool-badge.tool-edit { background: var(--tool-edit); }
+	.tool-badge.tool-search { background: var(--tool-search); }
+	.tool-badge.tool-bash { background: var(--tool-bash); }
+	.tool-badge.tool-task { background: var(--tool-task); }
+	.tool-badge.tool-web { background: var(--tool-web); }
+	.tool-badge.tool-todo { background: var(--tool-todo); }
+	.tool-badge.tool-browser { background: var(--tool-browser); }
+	.tool-badge.tool-default { background: var(--tool-default); }
+
+	.terminal-tool-call.tool-read { color: var(--tool-read); }
+	.terminal-tool-call.tool-write { color: var(--tool-write); }
+	.terminal-tool-call.tool-edit { color: var(--tool-edit); }
+	.terminal-tool-call.tool-search { color: var(--tool-search); }
+	.terminal-tool-call.tool-bash { color: var(--tool-bash); }
+	.terminal-tool-call.tool-task { color: var(--tool-task); }
+	.terminal-tool-call.tool-web { color: var(--tool-web); }
+	.terminal-tool-call.tool-todo { color: var(--tool-todo); }
+	.terminal-tool-call.tool-browser { color: var(--tool-browser); }
+	.terminal-tool-call.tool-default { color: var(--tool-default); }
+
+	/* Diff highlighting */
+	.diff-add { color: #4ade80; } /* green for additions */
+	.diff-remove { color: #f87171; } /* red for removals */
+
+	/* Tool result: gray */
+	.terminal-tool-result {
+		color: #d1d5db; /* gray-300 */
+	}
+
+	/* Separator: dimmed */
+	.terminal-separator {
+		color: #4b5563; /* gray-600 */
+	}
+
+	/* Status: dimmed */
+	.terminal-status {
+		color: #6b7280; /* gray-500 */
+	}
+
+	/* Spinner: cyan */
+	.terminal-spinner {
+		color: #22d3ee; /* cyan-400 */
+	}
+
+	/* Plain: default gray-200 */
+	.terminal-plain {
+		color: #e5e7eb; /* gray-200 */
+	}
+</style>

package/web/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.ActionProps = $props();
+</script>
+
+<AlertDialogPrimitive.Action
+	bind:ref
+	data-slot="alert-dialog-action"
+	class={cn(buttonVariants(), className)}
+	{...restProps}
+/>

package/web/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.CancelProps = $props();
+</script>
+
+<AlertDialogPrimitive.Cancel
+	bind:ref
+	data-slot="alert-dialog-cancel"
+	class={cn(buttonVariants({ variant: "outline" }), className)}
+	{...restProps}
+/>

package/web/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import AlertDialogPortal from "./alert-dialog-portal.svelte";
+	import AlertDialogOverlay from "./alert-dialog-overlay.svelte";
+	import { cn, type WithoutChild, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		...restProps
+	}: WithoutChild<AlertDialogPrimitive.ContentProps> & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof AlertDialogPortal>>;
+	} = $props();
+</script>
+
+<AlertDialogPortal {...portalProps}>
+	<AlertDialogOverlay />
+	<AlertDialogPrimitive.Content
+		bind:ref
+		data-slot="alert-dialog-content"
+		class={cn(
+			"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+			className
+		)}
+		{...restProps}
+	/>
+</AlertDialogPortal>

package/web/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.DescriptionProps = $props();
+</script>
+
+<AlertDialogPrimitive.Description
+	bind:ref
+	data-slot="alert-dialog-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>

package/web/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-dialog-footer"
+	class={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/web/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-dialog-header"
+	class={cn("flex flex-col gap-2 text-center sm:text-start", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/web/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.OverlayProps = $props();
+</script>
+
+<AlertDialogPrimitive.Overlay
+	bind:ref
+	data-slot="alert-dialog-overlay"
+	class={cn(
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+		className
+	)}
+	{...restProps}
+/>

package/web/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	let { ...restProps }: AlertDialogPrimitive.PortalProps = $props();
+</script>
+
+<AlertDialogPrimitive.Portal {...restProps} />

package/web/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.TitleProps = $props();
+</script>
+
+<AlertDialogPrimitive.Title
+	bind:ref
+	data-slot="alert-dialog-title"
+	class={cn("text-lg font-semibold", className)}
+	{...restProps}
+/>

package/web/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: AlertDialogPrimitive.TriggerProps = $props();
+</script>
+
+<AlertDialogPrimitive.Trigger bind:ref data-slot="alert-dialog-trigger" {...restProps} />

package/web/src/lib/components/ui/alert-dialog/alert-dialog.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: AlertDialogPrimitive.RootProps = $props();
+</script>
+
+<AlertDialogPrimitive.Root bind:open {...restProps} />

package/web/src/lib/components/ui/alert-dialog/index.ts

@@ -0,0 +1,37 @@
+import Root from "./alert-dialog.svelte";
+import Portal from "./alert-dialog-portal.svelte";
+import Trigger from "./alert-dialog-trigger.svelte";
+import Title from "./alert-dialog-title.svelte";
+import Action from "./alert-dialog-action.svelte";
+import Cancel from "./alert-dialog-cancel.svelte";
+import Footer from "./alert-dialog-footer.svelte";
+import Header from "./alert-dialog-header.svelte";
+import Overlay from "./alert-dialog-overlay.svelte";
+import Content from "./alert-dialog-content.svelte";
+import Description from "./alert-dialog-description.svelte";
+
+export {
+	Root,
+	Title,
+	Action,
+	Cancel,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	//
+	Root as AlertDialog,
+	Title as AlertDialogTitle,
+	Action as AlertDialogAction,
+	Cancel as AlertDialogCancel,
+	Portal as AlertDialogPortal,
+	Footer as AlertDialogFooter,
+	Header as AlertDialogHeader,
+	Trigger as AlertDialogTrigger,
+	Overlay as AlertDialogOverlay,
+	Content as AlertDialogContent,
+	Description as AlertDialogDescription,
+};

package/web/src/lib/components/ui/badge/badge.svelte

@@ -0,0 +1,50 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const badgeVariants = 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 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3",
+		variants: {
+			variant: {
+				default:
+					"bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent",
+				secondary:
+					"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent",
+				destructive:
+					"bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white",
+				outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		href,
+		class: className,
+		variant = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		variant?: BadgeVariant;
+	} = $props();
+</script>
+
+<svelte:element
+	this={href ? "a" : "span"}
+	bind:this={ref}
+	data-slot="badge"
+	{href}
+	class={cn(badgeVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>

package/web/src/lib/components/ui/badge/index.ts

@@ -0,0 +1,2 @@
+export { default as Badge } from "./badge.svelte";
+export { badgeVariants, type BadgeVariant } from "./badge.svelte";

package/web/src/lib/components/ui/button/button.svelte

@@ -0,0 +1,86 @@
+<script lang="ts" module>
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const buttonVariants = tv({
+		base: "cursor-pointer 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 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow-xs",
+				destructive:
+					"bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white shadow-xs",
+				outline:
+					"bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs",
+				secondary: "bg-[#222] text-stone-100 hover:bg-[#333] shadow-xs",
+				ghost: "text-stone-400 hover:bg-[#222] hover:text-stone-100",
+				"ghost-destructive": "bg-red-900 text-red-300 hover:bg-red-800 hover:text-white",
+				warning: "bg-amber-700 text-amber-100 hover:bg-amber-600 shadow-xs",
+				success: "bg-emerald-600 text-white hover:bg-emerald-500 active:bg-emerald-700 shadow-xs",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-9 px-4 py-2 has-[>svg]:px-3",
+				sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+				icon: "size-9",
+				"icon-sm": "size-8",
+				"icon-lg": "size-10",
+				toolbar: "flex-col gap-0.5 px-2 py-1.5 min-w-11 h-auto [&_svg]:size-[18px] text-[9px] uppercase tracking-wide",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	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 {
+		class: className,
+		variant = "default",
+		size = "default",
+		ref = $bindable(null),
+		href = undefined,
+		type = "button",
+		disabled,
+		children,
+		...restProps
+	}: ButtonProps = $props();
+</script>
+
+{#if href}
+	<a
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		href={disabled ? undefined : href}
+		aria-disabled={disabled}
+		role={disabled ? "link" : undefined}
+		tabindex={disabled ? -1 : undefined}
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		{type}
+		{disabled}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}

package/web/src/lib/components/ui/button/index.ts

@@ -0,0 +1,17 @@
+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/web/src/lib/components/ui/checkbox/checkbox.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Checkbox as CheckboxPrimitive } from "bits-ui";
+	import CheckIcon from "@lucide/svelte/icons/check";
+	import MinusIcon from "@lucide/svelte/icons/minus";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
+</script>
+
+<CheckboxPrimitive.Root
+	bind:ref
+	data-slot="checkbox"
+	class={cn(
+		"border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	bind:checked
+	bind:indeterminate
+	{...restProps}
+>
+	{#snippet children({ checked, indeterminate })}
+		<div data-slot="checkbox-indicator" class="text-current transition-none">
+			{#if checked}
+				<CheckIcon class="size-3.5" />
+			{:else if indeterminate}
+				<MinusIcon class="size-3.5" />
+			{/if}
+		</div>
+	{/snippet}
+</CheckboxPrimitive.Root>

package/web/src/lib/components/ui/checkbox/index.ts

@@ -0,0 +1,6 @@
+import Root from "./checkbox.svelte";
+export {
+	Root,
+	//
+	Root as Checkbox,
+};

package/web/src/lib/components/ui/dialog/dialog-close.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: DialogPrimitive.CloseProps = $props();
+</script>
+
+<DialogPrimitive.Close bind:ref data-slot="dialog-close" {...restProps} />