@vibesdotdev/kit 0.0.0-stage → 1.0.0-rc.4

package/dist/lib/config/kit.config.descriptor.d.ts

@@ -0,0 +1,148 @@
+/**
+ * Kit settings and catalog origins.
+ *
+ * Kit is a leaf package: it does not import `@vibesdotdev/config` at module
+ * load. This descriptor carries the same production/staging/local app origins
+ * as `config/environment` (`environment.{production,staging,local}.descriptor.ts`).
+ * Schema defaults are the production catalog values (the previous in-tree
+ * defaults). Feature code reads them through `loadKitConfig(runtime)` — catalog
+ * by the runtime's environment tier, then a composed `kit` config/manifest
+ * overlay when the host registered one.
+ */
+import * as z from 'zod/v4';
+import type { ConfigManifestRuntime } from '@vibesdotdev/config/manifest/config-manifest';
+export type KitCatalogEnvironmentId = 'local' | 'staging' | 'production';
+export type KitCatalogAppId = 'app' | 'projects' | 'chat' | 'account' | 'auth' | 'platform' | 'git' | 'home' | 'ai' | 'tools' | 'mcp' | 'registry' | 'system' | 'workbench' | 'creative' | 'knowledge' | 'runnable' | 'desktop' | 'desktop-legacy' | 'assets' | 'applet-runner' | 'cli' | 'docs' | 'hq' | 'teco' | 'vibesos' | 'conjure' | 'template' | 'pk';
+/** Built-in environment catalog `apps` entries kit reads. */
+export type KitCatalogOriginTable = Record<KitCatalogEnvironmentId, Record<string, string>>;
+export declare const KIT_CATALOG_APP_ORIGINS: {
+    local: {
+        home: string;
+        ai: string;
+        tools: string;
+        account: string;
+        auth: string;
+        platform: string;
+        git: string;
+        registry: string;
+        chat: string;
+        system: string;
+        workbench: string;
+        creative: string;
+        knowledge: string;
+        runnable: string;
+        desktop: string;
+        'desktop-legacy': string;
+        'applet-runner': string;
+        cli: string;
+        docs: string;
+        app: string;
+        projects: string;
+        conjure: string;
+        assets: string;
+        template: string;
+        hq: string;
+        teco: string;
+        pk: string;
+        vibesos: string;
+    };
+    staging: {
+        home: string;
+        ai: string;
+        tools: string;
+        mcp: string;
+        account: string;
+        auth: string;
+        platform: string;
+        git: string;
+        registry: string;
+        chat: string;
+        system: string;
+        workbench: string;
+        creative: string;
+        knowledge: string;
+        runnable: string;
+        desktop: string;
+        'desktop-legacy': string;
+        assets: string;
+        'applet-runner': string;
+        cli: string;
+        docs: string;
+        app: string;
+        projects: string;
+        hq: string;
+        vibesos: string;
+    };
+    production: {
+        home: string;
+        ai: string;
+        tools: string;
+        mcp: string;
+        account: string;
+        auth: string;
+        platform: string;
+        git: string;
+        registry: string;
+        chat: string;
+        system: string;
+        workbench: string;
+        creative: string;
+        knowledge: string;
+        runnable: string;
+        desktop: string;
+        'desktop-legacy': string;
+        assets: string;
+        'applet-runner': string;
+        cli: string;
+        docs: string;
+        app: string;
+        projects: string;
+        hq: string;
+        teco: string;
+        pk: string;
+        vibesos: string;
+    };
+};
+export declare const KIT_CONFIG_MANIFEST_ID = "kit";
+export declare const KitConfigSchema: z.ZodObject<{
+    chatOrigin: z.ZodDefault<z.ZodString>;
+    projectsOrigin: z.ZodDefault<z.ZodString>;
+    docsContactOrigin: z.ZodDefault<z.ZodString>;
+}, z.core.$strip>;
+export type KitConfig = z.infer<typeof KitConfigSchema>;
+/** Descriptor defaults with nothing declared on the host (production catalog). */
+export declare function loadKitConfigDefaults(): KitConfig;
+/** The origin the catalog declares for an app in one environment, if it declares one. */
+export declare function kitCatalogDeclaredOrigin(appId: string, environmentId: KitCatalogEnvironmentId): string | undefined;
+/** Catalog origin for an app id. Unknown ids use the catalog host pattern. */
+export declare function kitCatalogAppOrigin(appId: string, environmentId?: KitCatalogEnvironmentId): string;
+/**
+ * Environment id from a handed runtime's scope tier. Hosts that have not
+ * published a tier use production (the previous kit default). A published
+ * `dev` tier maps onto the local catalog (the service-catalog owner:
+ * attestedTier === 'dev' ? 'local' : attestedTier).
+ */
+export declare function kitCatalogEnvironmentId(runtime: {
+    scope?: {
+        qualifiers?: {
+            environmentTier?: unknown;
+        };
+    };
+}): KitCatalogEnvironmentId;
+/** Runtime shape kit settings loaders read. */
+export type KitConfigRuntime = {
+    scope?: {
+        qualifiers?: {
+            environmentTier?: unknown;
+        };
+    };
+    hasKind?: (kind: string) => boolean;
+    query?: ConfigManifestRuntime['query'];
+};
+/**
+ * Kit settings through the runtime: catalog origins for the environment
+ * tier, overlaid by a composed `kit` config/manifest when the host
+ * registered one. Schema production defaults apply when the runtime has
+ * no tier.
+ */
+export declare function loadKitConfig(runtime: KitConfigRuntime): Promise<KitConfig>;

package/dist/lib/config/kit.config.descriptor.js

@@ -0,0 +1,226 @@
+/**
+ * Kit settings and catalog origins.
+ *
+ * Kit is a leaf package: it does not import `@vibesdotdev/config` at module
+ * load. This descriptor carries the same production/staging/local app origins
+ * as `config/environment` (`environment.{production,staging,local}.descriptor.ts`).
+ * Schema defaults are the production catalog values (the previous in-tree
+ * defaults). Feature code reads them through `loadKitConfig(runtime)` — catalog
+ * by the runtime's environment tier, then a composed `kit` config/manifest
+ * overlay when the host registered one.
+ */
+import * as z from 'zod/v4';
+import { settle } from "../attempt.js";
+export const KIT_CATALOG_APP_ORIGINS = {
+    local: {
+        home: 'https://vibes.local',
+        ai: 'https://ai.vibes.local',
+        tools: 'https://ai.vibes.local',
+        account: 'https://account.vibes.local',
+        auth: 'https://auth.vibes.local',
+        platform: 'https://platform.vibes.local',
+        git: 'https://git.vibes.local',
+        registry: 'https://packages.vibes.local',
+        chat: 'https://chat.vibes.local',
+        system: 'https://system.vibes.local',
+        workbench: 'https://workbench.vibes.local',
+        creative: 'https://creative.vibes.local',
+        knowledge: 'https://knowledge.vibes.local',
+        runnable: 'https://runnable.vibes.local',
+        desktop: 'https://desktop.vibes.local',
+        'desktop-legacy': 'https://bridge.vibes.local',
+        'applet-runner': 'https://runner.omniframe.co',
+        cli: 'https://cli.vibes.local',
+        docs: 'https://docs.vibes.local',
+        app: 'https://app.vibes.local',
+        projects: 'https://app.vibes.local',
+        conjure: 'https://conjure.vibes.local',
+        assets: 'https://assets.vibes.local',
+        template: 'https://template.vibes.local',
+        hq: 'https://hq.vibes.local',
+        teco: 'https://teco.vibes.local',
+        pk: 'https://pk.vibes.local',
+        vibesos: 'https://hq.vibes.local'
+    },
+    staging: {
+        home: 'https://staging.vibes.dev',
+        ai: 'https://ai.staging.vibes.dev',
+        tools: 'https://ai.staging.vibes.dev',
+        mcp: 'https://mcp.staging.vibes.dev',
+        account: 'https://account.staging.vibes.dev',
+        auth: 'https://auth.staging.vibes.dev',
+        platform: 'https://platform.staging.vibes.dev',
+        git: 'https://git.staging.vibes.dev',
+        registry: 'https://packages.staging.vibes.dev',
+        chat: 'https://chat.staging.vibes.dev',
+        system: 'https://system.staging.vibes.dev',
+        workbench: 'https://workbench.staging.vibes.dev',
+        creative: 'https://creative.staging.vibes.dev',
+        knowledge: 'https://knowledge.staging.vibes.dev',
+        runnable: 'https://runnable.staging.vibes.dev',
+        desktop: 'https://desktop.staging.vibes.dev',
+        'desktop-legacy': 'https://bridge.staging.vibes.dev',
+        assets: 'https://assets.staging.vibes.dev',
+        'applet-runner': 'https://runner.omniframe.co',
+        cli: 'https://cli.staging.vibes.dev',
+        docs: 'https://docs.staging.vibes.dev',
+        app: 'https://app.staging.vibes.dev',
+        projects: 'https://app.staging.vibes.dev',
+        hq: 'https://hq.staging.vibes.dev',
+        vibesos: 'https://hq.staging.vibes.dev'
+    },
+    production: {
+        home: 'https://vibes.dev',
+        ai: 'https://ai.vibes.dev',
+        tools: 'https://ai.vibes.dev',
+        mcp: 'https://mcp.vibes.dev',
+        account: 'https://account.vibes.dev',
+        auth: 'https://auth.vibes.dev',
+        platform: 'https://platform.vibes.dev',
+        git: 'https://git.vibes.dev',
+        registry: 'https://packages.vibes.dev',
+        chat: 'https://chat.vibes.dev',
+        system: 'https://system.vibes.dev',
+        workbench: 'https://workbench.vibes.dev',
+        creative: 'https://creative.vibes.dev',
+        knowledge: 'https://knowledge.vibes.dev',
+        runnable: 'https://runnable.vibes.dev',
+        desktop: 'https://desktop.vibes.dev',
+        'desktop-legacy': 'https://bridge.vibes.dev',
+        assets: 'https://assets.vibes.dev',
+        'applet-runner': 'https://runner.omniframe.co',
+        cli: 'https://cli.vibes.dev',
+        docs: 'https://docs.vibes.dev',
+        app: 'https://app.vibes.dev',
+        projects: 'https://app.vibes.dev',
+        hq: 'https://hq.vibes.dev',
+        teco: 'https://teco.vibes.dev',
+        pk: 'https://pk.vibes.dev',
+        vibesos: 'https://hq.vibes.dev'
+    }
+};
+/** Catalog origins by environment, then app id, for lookups by an arbitrary app id. */
+const catalogAppOrigins = new Map(Object.entries(KIT_CATALOG_APP_ORIGINS).map(([environment, apps]) => [
+    environment,
+    new Map(Object.entries(apps))
+]));
+export const KIT_CONFIG_MANIFEST_ID = 'kit';
+export const KitConfigSchema = z.object({
+    /** Showcase / chat composition origin. Catalog production `chat`. */
+    chatOrigin: z.string().url().default(KIT_CATALOG_APP_ORIGINS.production.chat),
+    /** Active-project HTTP validator origin. Catalog production `projects`/`app`. */
+    projectsOrigin: z.string().url().default(KIT_CATALOG_APP_ORIGINS.production.projects),
+    /**
+     * The service origin a generated OpenAPI document names as its contact
+     * URL. Catalog production `home`; every environment resolves its own
+     * catalog entry through `loadKitConfig(runtime)`.
+     */
+    docsContactOrigin: z.string().url().default(KIT_CATALOG_APP_ORIGINS.production.home)
+});
+/** Descriptor defaults with nothing declared on the host (production catalog). */
+export function loadKitConfigDefaults() {
+    return KitConfigSchema.parse({});
+}
+function catalogFallbackOrigin(appId, environmentId) {
+    if (environmentId === 'local')
+        return `https://${appId}.vibes.local`;
+    if (environmentId === 'staging')
+        return `https://${appId}.staging.vibes.dev`;
+    return `https://${appId}.vibes.dev`;
+}
+/** The origin the catalog declares for an app in one environment, if it declares one. */
+export function kitCatalogDeclaredOrigin(appId, environmentId) {
+    return catalogAppOrigins.get(environmentId)?.get(appId);
+}
+/** Catalog origin for an app id. Unknown ids use the catalog host pattern. */
+export function kitCatalogAppOrigin(appId, environmentId = 'production') {
+    const fromEnv = kitCatalogDeclaredOrigin(appId, environmentId);
+    if (fromEnv)
+        return fromEnv.replace(/\/$/, '');
+    const fromProduction = kitCatalogDeclaredOrigin(appId, 'production');
+    if (fromProduction && environmentId === 'production')
+        return fromProduction.replace(/\/$/, '');
+    return catalogFallbackOrigin(appId, environmentId).replace(/\/$/, '');
+}
+/**
+ * Environment id from a handed runtime's scope tier. Hosts that have not
+ * published a tier use production (the previous kit default). A published
+ * `dev` tier maps onto the local catalog (the service-catalog owner:
+ * attestedTier === 'dev' ? 'local' : attestedTier).
+ */
+export function kitCatalogEnvironmentId(runtime) {
+    const tier = runtime.scope?.qualifiers?.environmentTier;
+    if (tier === 'dev')
+        return 'local';
+    if (tier === 'local' || tier === 'staging' || tier === 'production')
+        return tier;
+    return 'production';
+}
+function catalogKitConfig(runtime) {
+    const environmentId = kitCatalogEnvironmentId(runtime);
+    return KitConfigSchema.parse({
+        chatOrigin: kitCatalogAppOrigin('chat', environmentId),
+        projectsOrigin: kitCatalogAppOrigin('projects', environmentId),
+        docsContactOrigin: kitCatalogAppOrigin('home', environmentId)
+    });
+}
+function isUnregisteredManifest(error) {
+    return z.object({ reason: z.literal('config-manifest-unregistered') }).safeParse(error).success;
+}
+const overlaySchema = z
+    .object({
+    chatOrigin: z.string().min(1).optional(),
+    projectsOrigin: z.string().min(1).optional(),
+    docsContactOrigin: z.string().min(1).optional()
+})
+    .passthrough();
+/** One overlay entry: trimmed, trailing root slash dropped, catalog value when absent. */
+function overlayOrigin(declared, fallback) {
+    const trimmed = declared?.trim();
+    return trimmed && trimmed.length > 0 ? trimmed.replace(/\/$/, '') : fallback;
+}
+function hasConfigManifestCapabilities(runtime) {
+    return typeof runtime.hasKind === 'function' && typeof runtime.query === 'function';
+}
+function hasManifestProbe(runtime) {
+    return typeof runtime.hasKind === 'function';
+}
+/**
+ * Kit settings through the runtime: catalog origins for the environment
+ * tier, overlaid by a composed `kit` config/manifest when the host
+ * registered one. Schema production defaults apply when the runtime has
+ * no tier.
+ */
+export async function loadKitConfig(runtime) {
+    const catalog = catalogKitConfig(runtime);
+    if (!hasManifestProbe(runtime) || !runtime.hasKind('config/manifest')) {
+        return catalog;
+    }
+    if (!hasConfigManifestCapabilities(runtime)) {
+        const { CapabilityError } = await import('@vibesdotdev/kernel');
+        throw new CapabilityError("Runtime declares 'config/manifest' but does not provide query().", 'INTERNAL', {
+            reason: 'config-manifest-query-unavailable',
+            details: { manifestId: KIT_CONFIG_MANIFEST_ID }
+        });
+    }
+    const loaded = await settle(async () => {
+        const { ConfigManifest } = await import('@vibesdotdev/config');
+        const { composition, stored } = await ConfigManifest.forRuntime(runtime, KIT_CONFIG_MANIFEST_ID).loadLayers();
+        const overlay = overlaySchema.safeParse(stored ?? composition ?? {});
+        if (!overlay.success)
+            return catalog;
+        return {
+            chatOrigin: overlayOrigin(overlay.data.chatOrigin, catalog.chatOrigin),
+            projectsOrigin: overlayOrigin(overlay.data.projectsOrigin, catalog.projectsOrigin),
+            docsContactOrigin: overlayOrigin(overlay.data.docsContactOrigin, catalog.docsContactOrigin)
+        };
+    });
+    if (loaded.ok)
+        return loaded.value;
+    if (isUnregisteredManifest(loaded.error))
+        return catalog;
+    if (loaded.error instanceof Error &&
+        loaded.error.message.includes("Cannot find package '@vibesdotdev/config'"))
+        return catalog;
+    throw loaded.error;
+}

package/dist/lib/config/sveltekit-browser-csp.d.ts

@@ -0,0 +1,31 @@
+/**
+ * The config-load-time CSP entry for vibes SvelteKit apps.
+ *
+ * Replaces the per-app `sveltekit-browser-csp.mjs` shims (eight byte-identical
+ * copies, one with extra `connect-src`/`form-action`, one forked to hash the
+ * shared-mode bootstrap). `svelte.config.js` imports this as a plain Node/Bun
+ * module — no Vite transform, so nothing here may read `import.meta.env` or
+ * pull in Svelte runtime code.
+ */
+import { type CspDirectives, type CspSource } from '../browser-csp/index.ts';
+export interface SveltekitBrowserCspOptions {
+    /**
+     * Enable the Cloudflare Web Analytics beacon sources. Defaults to true —
+     * every vibes app injects the beacon hook.
+     */
+    webAnalytics?: boolean;
+    /**
+     * Hash Kit's shared-mode bootstrap script into `script-src`. Only for apps
+     * whose static pages apply the shared appearance preference before
+     * hydration via that exact script (docs-style sites); kit's AppShell and
+     * ProductShell apps deliver the bootstrap without inline scripts.
+     */
+    sharedModeBootstrap?: boolean;
+    /** Extra `connect-src` sources beyond the baseline. */
+    connectSrc?: CspSource[];
+    /** Extra `form-action` targets beyond the fleet defaults. */
+    formAction?: CspSource[];
+}
+export declare function createBrowserAppCspDirectives(options?: SveltekitBrowserCspOptions): CspDirectives;
+/** The fleet-default browser policy (analytics beacon on, no inline scripts). */
+export declare const browserAppCspDirectives: CspDirectives;

package/dist/lib/config/sveltekit-browser-csp.js

@@ -0,0 +1,35 @@
+/**
+ * The config-load-time CSP entry for vibes SvelteKit apps.
+ *
+ * Replaces the per-app `sveltekit-browser-csp.mjs` shims (eight byte-identical
+ * copies, one with extra `connect-src`/`form-action`, one forked to hash the
+ * shared-mode bootstrap). `svelte.config.js` imports this as a plain Node/Bun
+ * module — no Vite transform, so nothing here may read `import.meta.env` or
+ * pull in Svelte runtime code.
+ */
+import { createSha256 } from '@vibesdotdev/shared/hashing';
+import { createVibesAppCsp } from "../browser-csp/index.js";
+import { createSharedModeBootstrapScript } from "../components/ui/mode-switcher/shared-mode-sync.js";
+/** Base64 SHA-256 of a script's UTF-8 bytes, as a CSP hash source needs. */
+function sha256Base64(script) {
+    const hex = createSha256().update(new TextEncoder().encode(script)).digestHex();
+    const bytes = hex.match(/../g) ?? [];
+    return btoa(bytes.map((pair) => String.fromCharCode(parseInt(pair, 16))).join(''));
+}
+export function createBrowserAppCspDirectives(options = {}) {
+    const scriptSrc = [];
+    if (options.sharedModeBootstrap) {
+        // Hash the exact package-owned script so it runs under a no-inline policy.
+        scriptSrc.push(`sha256-${sha256Base64(createSharedModeBootstrapScript())}`);
+    }
+    const cspOptions = {
+        webAnalytics: options.webAnalytics ?? true,
+        connectSrc: options.connectSrc,
+        formAction: options.formAction
+    };
+    if (scriptSrc.length > 0)
+        cspOptions.scriptSrc = scriptSrc;
+    return createVibesAppCsp(cspOptions);
+}
+/** The fleet-default browser policy (analytics beacon on, no inline scripts). */
+export const browserAppCspDirectives = createBrowserAppCspDirectives();

package/dist/lib/datatable/CellRenderers.svelte

@@ -0,0 +1,34 @@
+<script module lang="ts">import { formatCellText, formatIsoDateTime, formatIsoDay, formatPercentageCell } from "./cell-format";
+/**
+* Default cell renderer - handles strings, numbers, booleans, null/undefined
+*/
+export function defaultCell({ value }) {
+	return formatCellText(value);
+}
+/**
+* Percentage cell renderer
+*/
+export function percentageCell({ value }) {
+	return formatPercentageCell(value);
+}
+</script>
+
+<!-- Date Cell Snippet - formats Date objects to YYYY-MM-DD -->
+{#snippet dateCell({ value }: { value: DatatableValue })}
+	{@const day = formatIsoDay(value)}
+	{#if day}
+		<span>{day}</span>
+	{:else}
+		<span class="text-muted-foreground">-</span>
+	{/if}
+{/snippet}
+
+<!-- DateTime Cell Snippet - formats Date objects to YYYY-MM-DD HH:MM:SS -->
+{#snippet dateTimeCell({ value }: { value: DatatableValue })}
+	{@const dateTime = formatIsoDateTime(value)}
+	{#if dateTime}
+		<span>{dateTime}</span>
+	{:else}
+		<span class="text-muted-foreground">-</span>
+	{/if}
+{/snippet}

package/dist/lib/datatable/CellRenderers.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { DatatableRow, DatatableValue } from './types';
+/**
+ * Type for table row data
+ */
+export type TableRow = DatatableRow;
+/**
+ * Default cell renderer - handles strings, numbers, booleans, null/undefined
+ */
+export declare function defaultCell({ value }: {
+    value: DatatableValue;
+}): string;
+/**
+ * Percentage cell renderer
+ */
+export declare function percentageCell({ value }: {
+    value: DatatableValue;
+}): string;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const CellRenderers: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CellRenderers = InstanceType<typeof CellRenderers>;
+export default CellRenderers;

package/dist/lib/datatable/DataTable.svelte

@@ -0,0 +1,158 @@
+<script lang="ts" generics="T">import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "../components/ui/table";
+import { Icon } from "../components/icon";
+import { classifyDatatableValue } from "./types";
+import { readRowField } from "./cell-format";
+import { cn } from "../utils.js";
+let { data = [], columns = [], onRowClick, emptyMessage = "No data available", className = "", containerClassName = "", loading = false, loadingMessage = "Loading...", sortable = false, sort = null, onSortChange } = $props();
+// Helper to get value from row using accessor
+function getValue(row, column) {
+	if (column.accessor) {
+		return column.accessor(row);
+	}
+	// If no accessor, read the field named by the column id
+	return readRowField(row, column.id);
+}
+function isColumnSortable(column) {
+	return Boolean(sortable && column.id && column.sortable);
+}
+function getSortKey(column) {
+	return column.sortId ?? column.id;
+}
+function getColumnSort(column) {
+	const columnKey = getSortKey(column);
+	return sort && sort.column === columnKey ? sort : null;
+}
+function handleSort(column) {
+	if (!isColumnSortable(column)) return;
+	const columnKey = getSortKey(column);
+	if (!columnKey) return;
+	const currentSort = sort && sort.column === columnKey ? sort : null;
+	let nextSort;
+	if (!currentSort) {
+		nextSort = {
+			column: columnKey,
+			direction: "asc"
+		};
+	} else if (currentSort.direction === "asc") {
+		nextSort = {
+			column: columnKey,
+			direction: "desc"
+		};
+	} else {
+		nextSort = null;
+	}
+	onSortChange?.(nextSort);
+}
+function getAriaSort(column) {
+	const columnSort = getColumnSort(column);
+	if (!columnSort) return "none";
+	return columnSort.direction === "asc" ? "ascending" : "descending";
+}
+</script>
+
+<div class={cn('rounded-md border', containerClassName)}>
+	<div class="overflow-x-auto">
+		<Table class={cn('min-w-full', className)}>
+			<TableHeader>
+				<TableRow>
+					{#each columns as column (column.id)}
+						{@const columnSort = getColumnSort(column)}
+						<TableHead
+							class={cn(
+								isColumnSortable(column) ? 'cursor-pointer select-none' : '',
+								column.className
+							)}
+							style={column.width ? `width: ${column.width}` : undefined}
+							aria-sort={getAriaSort(column)}
+						>
+							{#if isColumnSortable(column)}
+								<button
+									type="button"
+									onclick={() => handleSort(column)}
+									class="flex items-center gap-1 text-left"
+								>
+									<span class="whitespace-nowrap">
+										{#if column.headerSnippet}
+											{@render column.headerSnippet()}
+										{:else if column.header}
+											{column.header}
+										{:else}
+											{column.id}
+										{/if}
+									</span>
+									<span class="ml-1 flex h-4 w-4 items-center justify-center text-muted-foreground">
+										{#if columnSort?.direction === 'asc'}
+											<Icon icon="lucide:arrow-up" class="h-3.5 w-3.5" />
+										{:else if columnSort?.direction === 'desc'}
+											<Icon icon="lucide:arrow-down" class="h-3.5 w-3.5" />
+										{:else}
+											<Icon icon="lucide:arrow-up-down" class="h-3.5 w-3.5 opacity-50" />
+										{/if}
+									</span>
+								</button>
+							{:else if column.headerSnippet}
+								{@render column.headerSnippet()}
+							{:else if column.header}
+								{column.header}
+							{:else}
+								{column.id}
+							{/if}
+						</TableHead>
+					{/each}
+				</TableRow>
+			</TableHeader>
+			<TableBody>
+				{#if loading}
+					<TableRow>
+						<TableCell colspan={columns.length} class="h-24 text-center">
+							<div class="flex items-center justify-center">
+								<span class="text-muted-foreground">{loadingMessage}</span>
+							</div>
+						</TableCell>
+					</TableRow>
+				{:else if data.length === 0}
+					<TableRow>
+						<TableCell colspan={columns.length} class="h-24 text-center">
+							<div class="flex flex-col items-center justify-center">
+								<span class="text-muted-foreground">{emptyMessage}</span>
+							</div>
+						</TableCell>
+					</TableRow>
+				{:else}
+					{#each data as row, rowIndex (rowIndex)}
+						<TableRow
+							class={onRowClick ? 'cursor-pointer hover:bg-muted/50' : ''}
+							onclick={() => onRowClick?.(row)}
+						>
+							{#each columns as column (column.id)}
+								<TableCell class={column.className}>
+									{@const value = getValue(row, column)}
+									{#if column.cell}
+										{@render column.cell({ row, value })}
+									{:else}
+										{@render defaultCell({ value })}
+									{/if}
+								</TableCell>
+							{/each}
+						</TableRow>
+					{/each}
+				{/if}
+			</TableBody>
+		</Table>
+	</div>
+</div>
+
+{#snippet defaultCell({ value }: { value: DatatableValue })}
+	{@const cell = classifyDatatableValue(value)}
+	{#if cell.kind === 'empty'}
+		<span class="text-muted-foreground">-</span>
+	{:else if cell.kind === 'boolean'}
+		<span>{cell.value ? 'Yes' : 'No'}</span>
+	{:else if cell.kind === 'number'}
+		<span>{cell.value.toLocaleString()}</span>
+	{:else if cell.kind === 'date'}
+		<span>{cell.value.toLocaleDateString()}</span>
+	{:else}
+		<span>{String(cell.value)}</span>
+	{/if}
+{/snippet}