@walkthru-earth/objex 0.1.0

package/dist/components/layout/Sidebar.svelte

@@ -0,0 +1,314 @@
+<script lang="ts">
+import CloudIcon from '@lucide/svelte/icons/cloud';
+import DatabaseIcon from '@lucide/svelte/icons/database';
+import GlobeIcon from '@lucide/svelte/icons/globe';
+import PencilIcon from '@lucide/svelte/icons/pencil';
+import PlusIcon from '@lucide/svelte/icons/plus';
+import TrashIcon from '@lucide/svelte/icons/trash-2';
+import {
+	ContextMenu,
+	ContextMenuContent,
+	ContextMenuItem,
+	ContextMenuSeparator,
+	ContextMenuTrigger
+} from '../ui/context-menu/index.js';
+import { Separator } from '../ui/separator/index.js';
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger
+} from '../ui/tooltip/index.js';
+import { t } from '../../i18n/index.svelte.js';
+import { browser } from '../../stores/browser.svelte.js';
+import { connections } from '../../stores/connections.svelte.js';
+import { credentialStore, loadFromNative } from '../../stores/credentials.svelte.js';
+import { tabs } from '../../stores/tabs.svelte.js';
+import type { Connection } from '../../types.js';
+import { type DetectedHost, detectHostBucket } from '../../utils/host-detection.js';
+import { parseStorageUrl } from '../../utils/storage-url.js';
+import { clearUrlState, syncUrlParam } from '../../utils/url-state.js';
+import ConnectionDialog from './ConnectionDialog.svelte';
+import LocaleToggle from './LocaleToggle.svelte';
+import ThemeToggle from './ThemeToggle.svelte';
+
+let dialogOpen = $state(false);
+let editingConnection = $state<Connection | null>(null);
+let detectedHost = $state<DetectedHost | null>(null);
+let autoConnecting = $state(false);
+
+$effect(() => {
+	connections.load().then(async () => {
+		await handleAutoDetection();
+		// On first visit (no connections, no URL params), load the demo bucket
+		if (connections.items.length === 0 && !new URL(window.location.href).searchParams.has('url')) {
+			await loadDemoConnection();
+		}
+	});
+});
+
+// Allow other components to request opening the new-connection dialog
+$effect(() => {
+	if (connections.dialogRequested) {
+		connections.clearDialogRequest();
+		handleAddConnection();
+	}
+});
+
+async function handleAutoDetection() {
+	// Direct file URLs (e.g. ?url=https://...file.parquet) are opened eagerly
+	// in +page.svelte so they work on mobile. Skip if tab already exists.
+	const url = new URL(window.location.href);
+	const rawUrl = url.searchParams.get('url');
+	if (rawUrl && tabs.items.some((t) => t.id === `url:${rawUrl}`)) {
+		return;
+	}
+
+	const detected = detectHostBucket();
+	if (!detected) return;
+
+	const hasUrlParam = url.searchParams.has('url');
+
+	if (hasUrlParam) {
+		// Auto-connect immediately for ?url= param (zero-friction)
+		autoConnecting = true;
+		try {
+			const connId = await connections.saveHostConnection(detected);
+			const conn = connections.getById(connId);
+			if (!conn) return;
+
+			if (!(await ensureCredentials(conn))) return;
+
+			const parsed = parseStorageUrl(url.searchParams.get('url')!);
+			const prefixParam = parsed.prefix;
+
+			if (prefixParam && !prefixParam.endsWith('/')) {
+				// It's a file — browse to its parent folder and open it
+				const parentPrefix = prefixParam.includes('/') ? prefixParam.replace(/\/[^/]*$/, '/') : '';
+				browser.browse(conn, parentPrefix || undefined);
+				const fileName = prefixParam.split('/').pop() || prefixParam;
+				const ext = fileName.includes('.') ? fileName.split('.').pop()!.toLowerCase() : '';
+				const tabId = `${conn.id}:${prefixParam}`;
+				tabs.open({
+					id: tabId,
+					name: fileName,
+					path: prefixParam,
+					source: 'remote',
+					connectionId: conn.id,
+					extension: ext
+				});
+				// Fire-and-forget: fetch file size via HEAD request
+				fetch(url.searchParams.get('url')!, { method: 'HEAD' })
+					.then((res) => {
+						const cl = res.headers.get('content-length');
+						if (cl) tabs.update(tabId, { size: Number(cl) });
+					})
+					.catch(() => {});
+			} else if (prefixParam) {
+				// It's a directory prefix
+				browser.browse(conn, prefixParam);
+			} else {
+				browser.browse(conn);
+			}
+			syncUrlParam(conn, prefixParam || undefined);
+		} finally {
+			autoConnecting = false;
+		}
+	} else {
+		// Show indicator for hostname-detected bucket
+		detectedHost = detected;
+	}
+}
+
+async function loadDemoConnection() {
+	const id = await connections.save({
+		name: 'Source Cooperative',
+		provider: 's3',
+		endpoint: '',
+		bucket: 'us-west-2.opendata.source.coop',
+		region: 'us-west-2',
+		anonymous: true
+	});
+	if (!id) return;
+	const conn = connections.getById(id);
+	if (conn) {
+		browser.browse(conn);
+		syncUrlParam(conn);
+	}
+}
+
+async function handleConnectDetected() {
+	if (!detectedHost || autoConnecting) return;
+	autoConnecting = true;
+	try {
+		const connId = await connections.saveHostConnection(detectedHost);
+		const conn = connections.getById(connId);
+		if (conn) {
+			if (!(await ensureCredentials(conn))) return;
+			browser.browse(conn);
+			syncUrlParam(conn);
+		}
+		detectedHost = null;
+	} finally {
+		autoConnecting = false;
+	}
+}
+
+function handleAddConnection() {
+	editingConnection = null;
+	dialogOpen = true;
+}
+
+function handleEditConnection(connection: Connection) {
+	editingConnection = connection;
+	dialogOpen = true;
+}
+
+async function handleDeleteConnection(connection: Connection) {
+	if (!confirm(t('sidebar.deleteConfirm', { name: connection.name }))) return;
+	await connections.remove(connection.id);
+	if (browser.activeConnection?.id === connection.id) {
+		browser.clear();
+		clearUrlState();
+	}
+}
+
+/**
+ * Ensure credentials are available for a non-anonymous connection.
+ * Tries the browser password manager first, then opens the dialog.
+ * Returns true if credentials are ready, false if the dialog was opened.
+ */
+async function ensureCredentials(connection: Connection): Promise<boolean> {
+	if (connection.anonymous) return true;
+	if (credentialStore.has(connection.id)) return true;
+
+	// Try restoring from browser password manager
+	const native = await loadFromNative(connection.id);
+	if (native) {
+		credentialStore.set(connection.id, native);
+		return true;
+	}
+
+	// No credentials — open the dialog so the user can re-enter them
+	editingConnection = connection;
+	dialogOpen = true;
+
+	return false;
+}
+
+async function handleBrowseConnection(connection: Connection) {
+	// Skip if this connection is already being browsed — avoids clearing entries
+	// and re-fetching, which causes DOM churn that can close the mobile Sheet.
+	if (browser.activeConnection?.id === connection.id) return;
+	if (!(await ensureCredentials(connection))) return;
+	browser.browse(connection);
+	syncUrlParam(connection);
+}
+</script>
+
+<TooltipProvider>
+	<div class="flex h-full w-12 flex-col items-center bg-sidebar py-2">
+		<!-- App icon -->
+		<div class="mb-2 flex size-8 items-center justify-center">
+			<DatabaseIcon class="size-5 text-sidebar-primary" />
+		</div>
+
+		<Separator class="mx-2 mb-2" />
+
+		<!-- Connections -->
+		<div class="flex flex-1 flex-col items-center gap-1 overflow-auto">
+			<!-- Detected host indicator -->
+			{#if detectedHost}
+				<Tooltip>
+					<TooltipTrigger>
+						<button
+							class="group relative flex size-8 items-center justify-center rounded-lg border border-dashed border-primary/50 text-primary transition-colors hover:bg-primary/10"
+							class:animate-pulse={!autoConnecting}
+							onclick={handleConnectDetected}
+							disabled={autoConnecting}
+						>
+							<GlobeIcon class="size-4" />
+						</button>
+					</TooltipTrigger>
+					<TooltipContent side="right">
+						{t('sidebar.browseDetected', { name: detectedHost.bucket })}
+					</TooltipContent>
+				</Tooltip>
+			{/if}
+
+			{#each connections.items as connection (connection.id)}
+				{@const isActive = browser.activeConnection?.id === connection.id}
+				<ContextMenu>
+					<ContextMenuTrigger>
+						<Tooltip>
+							<TooltipTrigger>
+								<button
+									class="group relative flex size-8 items-center justify-center rounded-lg transition-colors {isActive ? 'bg-accent text-accent-foreground' : 'text-muted-foreground hover:bg-accent/50 hover:text-foreground'}"
+									onclick={() => handleBrowseConnection(connection)}
+								>
+									<CloudIcon class="size-4" />
+									{#if isActive}
+										<div class="absolute left-0 top-1/2 h-4 w-0.5 -translate-y-1/2 rounded-r bg-primary"></div>
+									{/if}
+								</button>
+							</TooltipTrigger>
+							<TooltipContent side="right">
+								{connection.name}
+							</TooltipContent>
+						</Tooltip>
+					</ContextMenuTrigger>
+					<ContextMenuContent class="w-40">
+						<ContextMenuItem onclick={() => handleEditConnection(connection)}>
+							<PencilIcon class="me-2 size-3.5" />
+							{t('sidebar.edit')}
+						</ContextMenuItem>
+						<ContextMenuSeparator />
+						<ContextMenuItem
+							class="text-destructive data-[highlighted]:text-destructive"
+							onclick={() => handleDeleteConnection(connection)}
+						>
+							<TrashIcon class="me-2 size-3.5" />
+							{t('sidebar.delete')}
+						</ContextMenuItem>
+					</ContextMenuContent>
+				</ContextMenu>
+			{/each}
+
+			<!-- Add connection button -->
+			<Tooltip>
+				<TooltipTrigger>
+					<button
+						class="flex size-8 items-center justify-center rounded-lg border border-dashed border-muted-foreground/30 text-muted-foreground transition-colors hover:border-foreground/50 hover:text-foreground"
+						onclick={handleAddConnection}
+					>
+						<PlusIcon class="size-4" />
+					</button>
+				</TooltipTrigger>
+				<TooltipContent side="right">{t('sidebar.addConnection')}</TooltipContent>
+			</Tooltip>
+		</div>
+
+		<!-- Bottom actions -->
+		<div class="mt-auto flex flex-col items-center gap-1 pt-2">
+			<LocaleToggle />
+			<ThemeToggle />
+		</div>
+	</div>
+</TooltipProvider>
+
+<ConnectionDialog
+	bind:open={dialogOpen}
+	editConnection={editingConnection}
+	onSaved={() => {
+		connections.reload();
+		// If we opened the dialog for a credential re-entry, auto-browse after save
+		if (editingConnection) {
+			const conn = connections.getById(editingConnection.id);
+			if (conn && credentialStore.has(conn.id)) {
+				browser.browse(conn);
+				syncUrlParam(conn);
+			}
+		}
+		handleAutoDetection();
+	}}
+/>

package/dist/components/layout/Sidebar.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Sidebar: import("svelte").Component<Record<string, never>, {}, "">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/components/layout/StatusBar.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+import CloudIcon from '@lucide/svelte/icons/cloud';
+import FileTextIcon from '@lucide/svelte/icons/file-text';
+import FolderIcon from '@lucide/svelte/icons/folder';
+import GlobeIcon from '@lucide/svelte/icons/globe';
+import InfoIcon from '@lucide/svelte/icons/info';
+import { Separator } from '../ui/separator/index.js';
+import { getFileTypeInfo } from '../../file-icons/index.js';
+import { t } from '../../i18n/index.svelte.js';
+import { browser } from '../../stores/browser.svelte.js';
+import { files } from '../../stores/files.svelte.js';
+import { tabs } from '../../stores/tabs.svelte.js';
+import { formatFileSize } from '../../utils/format.js';
+import SafeLockToggle from './SafeLockToggle.svelte';
+
+let isBrowsingRemote = $derived(browser.activeConnection !== null);
+
+let displayPath = $derived(isBrowsingRemote ? browser.currentPrefix : files.currentPath);
+let displayCount = $derived(isBrowsingRemote ? browser.entries.length : files.entries.length);
+
+let activeTab = $derived(tabs.active);
+let activeFileInfo = $derived(activeTab ? getFileTypeInfo(activeTab.extension) : null);
+</script>
+
+<div
+	class="flex h-7 shrink-0 items-center gap-1 border-t bg-muted/40 px-3 text-[11px] text-muted-foreground"
+>
+	<!-- Connection / path context -->
+	{#if isBrowsingRemote && browser.activeConnection}
+		<CloudIcon class="size-3 shrink-0" />
+		<span class="max-w-[200px] truncate" title={browser.activeConnection.name}>
+			{browser.activeConnection.name}
+		</span>
+		{#if displayPath}
+			<span class="text-muted-foreground/50">/</span>
+			<span class="max-w-[200px] truncate" title={displayPath}>{displayPath}</span>
+		{/if}
+		<Separator orientation="vertical" class="mx-1.5 h-3.5" />
+	{:else if displayPath}
+		<FolderIcon class="size-3 shrink-0" />
+		<span class="max-w-[300px] truncate" title={displayPath}>{displayPath}</span>
+		<Separator orientation="vertical" class="mx-1.5 h-3.5" />
+	{/if}
+
+	<!-- Entry count -->
+	{#if displayCount > 0}
+		<FileTextIcon class="size-3 shrink-0" />
+		<span>{displayCount} {displayCount === 1 ? t('statusBar.item') : t('statusBar.items')}</span>
+		<Separator orientation="vertical" class="mx-1.5 h-3.5" />
+	{/if}
+
+	<!-- Active file info -->
+	{#if activeTab && activeFileInfo}
+		<InfoIcon class="size-3 shrink-0" />
+		<span>{activeFileInfo.label}</span>
+		{#if activeTab.size}
+			<span class="text-muted-foreground/50">·</span>
+			<span>{formatFileSize(activeTab.size)}</span>
+		{/if}
+		<Separator orientation="vertical" class="mx-1.5 h-3.5" />
+	{/if}
+
+	<!-- Spacer -->
+	<div class="flex-1"></div>
+
+	<!-- Safe lock toggle -->
+	<SafeLockToggle />
+	<Separator orientation="vertical" class="mx-1.5 h-3.5" />
+
+	<!-- Mode indicator -->
+	<GlobeIcon class="size-3 shrink-0" />
+	<span>{t('statusBar.web')}</span>
+</div>

package/dist/components/layout/StatusBar.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const StatusBar: import("svelte").Component<Record<string, never>, {}, "">;
+type StatusBar = ReturnType<typeof StatusBar>;
+export default StatusBar;

package/dist/components/layout/TabBar.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+import DatabaseIcon from '@lucide/svelte/icons/database';
+import FileTextIcon from '@lucide/svelte/icons/file-text';
+import XIcon from '@lucide/svelte/icons/x';
+import type { Snippet } from 'svelte';
+import { Button } from '../ui/button/index.js';
+import * as ContextMenu from '../ui/context-menu/index.js';
+import { ScrollArea } from '../ui/scroll-area/index.js';
+import { t } from '../../i18n/index.svelte.js';
+import { tabs } from '../../stores/tabs.svelte.js';
+import { buildHttpsUrl, buildStorageUrl } from '../../utils/url.js';
+
+let { leading }: { leading?: Snippet } = $props();
+
+let copiedType = $state<string | null>(null);
+
+function getTabIcon(tab: { connectionId?: string }) {
+	if (tab.connectionId) return DatabaseIcon;
+	return FileTextIcon;
+}
+
+function handleClose(event: MouseEvent, id: string) {
+	event.stopPropagation();
+	tabs.close(id);
+}
+
+async function handleCopy(type: 'https' | 's3', tab: (typeof tabs.items)[0]) {
+	const url = type === 'https' ? buildHttpsUrl(tab) : buildStorageUrl(tab);
+	if (!url) return;
+	try {
+		await navigator.clipboard.writeText(url);
+		copiedType = `${type}-${tab.id}`;
+		setTimeout(() => (copiedType = null), 2000);
+	} catch {
+		// clipboard API may fail in some contexts
+	}
+}
+</script>
+
+{#if tabs.items.length > 0 || leading}
+	<div class="flex h-9 shrink-0 items-center border-b bg-muted/30">
+		{#if leading}
+			<div class="flex items-center ps-1">
+				{@render leading()}
+			</div>
+		{/if}
+		<ScrollArea orientation="horizontal" class="w-full">
+			<div class="flex h-9 items-center">
+				{#each tabs.items as tab (tab.id)}
+					{@const TabIcon = getTabIcon(tab)}
+					{@const isActive = tabs.active?.id === tab.id}
+					<ContextMenu.Root>
+						<ContextMenu.Trigger>
+							<button
+								class="group relative flex h-9 shrink-0 items-center gap-1.5 border-e px-3 text-sm transition-colors
+									{isActive
+									? 'bg-background text-foreground'
+									: 'text-muted-foreground hover:bg-background/50 hover:text-foreground'}"
+								onclick={() => tabs.setActive(tab.id)}
+							>
+								<TabIcon class="size-3.5 shrink-0" />
+								<span class="max-w-[120px] truncate">{tab.name}</span>
+								<Button
+									variant="ghost"
+									size="icon-sm"
+									class="ms-1 size-5 opacity-0 transition-opacity group-hover:opacity-100
+										{isActive ? 'opacity-60' : ''}"
+									onclick={(e: MouseEvent) => handleClose(e, tab.id)}
+									aria-label={t('tabBar.closeTab', { name: tab.name })}
+								>
+									<XIcon class="size-3" />
+								</Button>
+								{#if isActive}
+									<div class="absolute bottom-0 left-0 right-0 h-0.5 bg-primary"></div>
+								{/if}
+							</button>
+						</ContextMenu.Trigger>
+						<ContextMenu.Content class="w-52">
+							<ContextMenu.Item onclick={() => handleCopy('https', tab)}>
+								{copiedType === `https-${tab.id}` ? t('tabBar.copied') : t('tabBar.copyHttps')}
+							</ContextMenu.Item>
+							{#if tab.source === 'remote'}
+								<ContextMenu.Item onclick={() => handleCopy('s3', tab)}>
+									{copiedType === `s3-${tab.id}` ? t('tabBar.copied') : t('tabBar.copyStorage')}
+								</ContextMenu.Item>
+							{/if}
+							<ContextMenu.Separator />
+							<ContextMenu.Item onclick={() => tabs.close(tab.id)}>
+								{t('tabBar.closeTab', { name: '' }).trim()}
+							</ContextMenu.Item>
+							{#if tabs.items.length > 1}
+								<ContextMenu.Item onclick={() => tabs.closeOthers(tab.id)}>
+									{t('tabBar.closeOtherTabs')}
+								</ContextMenu.Item>
+							{/if}
+						</ContextMenu.Content>
+					</ContextMenu.Root>
+				{/each}
+			</div>
+		</ScrollArea>
+	</div>
+{/if}

package/dist/components/layout/TabBar.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    leading?: Snippet;
+};
+declare const TabBar: import("svelte").Component<$$ComponentProps, {}, "">;
+type TabBar = ReturnType<typeof TabBar>;
+export default TabBar;

package/dist/components/layout/ThemeToggle.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+import MonitorIcon from '@lucide/svelte/icons/monitor';
+import MoonIcon from '@lucide/svelte/icons/moon';
+import SunIcon from '@lucide/svelte/icons/sun';
+import { Button } from '../ui/button/index.js';
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger
+} from '../ui/tooltip/index.js';
+import { t } from '../../i18n/index.svelte.js';
+import { settings } from '../../stores/settings.svelte.js';
+
+const icons = {
+	light: SunIcon,
+	dark: MoonIcon,
+	system: MonitorIcon
+} as const;
+
+const cycle: Record<string, 'light' | 'dark' | 'system'> = {
+	light: 'dark',
+	dark: 'system',
+	system: 'light'
+};
+
+function toggle() {
+	settings.setTheme(cycle[settings.theme]);
+}
+
+let CurrentIcon = $derived(icons[settings.theme]);
+let label = $derived(t(`theme.${settings.theme}`));
+</script>
+
+<Tooltip>
+	<TooltipTrigger onclick={toggle}>
+		{#snippet child({ props })}
+			<Button
+				{...props}
+				variant="ghost"
+				size="icon-sm"
+				class="rounded-lg text-muted-foreground hover:text-foreground"
+				aria-label={t('theme.tooltip', { mode: label })}
+			>
+				<CurrentIcon class="size-4" />
+			</Button>
+		{/snippet}
+	</TooltipTrigger>
+	<TooltipContent side="right">
+		{t('theme.tooltip', { mode: label })}
+	</TooltipContent>
+</Tooltip>

package/dist/components/layout/ThemeToggle.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ThemeToggle: import("svelte").Component<Record<string, never>, {}, "">;
+type ThemeToggle = ReturnType<typeof ThemeToggle>;
+export default ThemeToggle;

package/dist/components/ui/badge/badge.svelte

@@ -0,0 +1,49 @@
+<script lang="ts" module>
+import { tv, type VariantProps } 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 "../../../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/dist/components/ui/badge/badge.svelte.d.ts

@@ -0,0 +1,32 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+    };
+}, 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 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", {
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+    };
+}, 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 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", unknown, unknown, undefined>>;
+export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
+import type { HTMLAnchorAttributes } from "svelte/elements";
+import { type WithElementRef } from "../../../utils.js";
+type $$ComponentProps = WithElementRef<HTMLAnchorAttributes> & {
+    variant?: BadgeVariant;
+};
+declare const Badge: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

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

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

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

@@ -0,0 +1 @@
+export { badgeVariants, default as Badge } from './badge.svelte';