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

package/dist/lib/components/layout/DetailPage.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">import { Button, buttonVariants } from "../ui/button";
+import { Badge } from "../ui/badge";
+import { cn } from "../../utils.js";
+import PageContainer from "./PageContainer.svelte";
+import PageHeader from "./PageHeader.svelte";
+import { Icon } from "../icon";
+let { title, description, backHref, backText = "Back", editHref, editText = "Edit", onDelete, deleteText = "Delete", headerActions, status, statusVariant = "default", children, sidebar, loading = false, layout = "sidebar", class: className } = $props();
+</script>
+
+<PageContainer class={className}>
+	<!-- Back button row -->
+	{#if backHref}
+		<div class="mb-4">
+			<a href={backHref} class={buttonVariants({ variant: 'outline', size: 'sm' })}>
+				<Icon icon="lucide:arrow-left" class="mr-2 h-4 w-4" />
+				{backText}
+			</a>
+		</div>
+	{/if}
+
+	<!-- Page header with actions -->
+	<PageHeader {title} {description}>
+		{#snippet actions()}
+			{#if status}
+				<Badge variant={statusVariant}>{status}</Badge>
+			{/if}
+
+			{#if headerActions}
+				{@render headerActions()}
+			{:else}
+				<div class="flex items-center gap-2">
+					{#if editHref}
+						<a href={editHref} class={buttonVariants({ variant: 'outline' })}>
+							<Icon icon="lucide:edit" class="mr-2 h-4 w-4" />
+							{editText}
+						</a>
+					{/if}
+					{#if onDelete}
+						<Button variant="destructive" onclick={onDelete}>
+							<Icon icon="lucide:trash-2" class="mr-2 h-4 w-4" />
+							{deleteText}
+						</Button>
+					{/if}
+				</div>
+			{/if}
+		{/snippet}
+	</PageHeader>
+
+	{#if loading}
+		<div class="flex h-32 items-center justify-center">
+			<span class="text-muted-foreground">Loading...</span>
+		</div>
+	{:else if layout === 'sidebar' && sidebar}
+		<!-- Two-column layout with sidebar -->
+		<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
+			<!-- Main content (2/3 width) -->
+			<div class="lg:col-span-2">
+				{@render children()}
+			</div>
+
+			<!-- Sidebar (1/3 width) -->
+			<div class="space-y-6">
+				{@render sidebar()}
+			</div>
+		</div>
+	{:else}
+		<!-- Single column layout -->
+		{@render children()}
+	{/if}
+</PageContainer>

package/dist/lib/components/layout/DetailPage.svelte.d.ts

@@ -0,0 +1,38 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Page title */
+    title: string;
+    /** Page description */
+    description?: string;
+    /** Back button href */
+    backHref?: string;
+    /** Back button text */
+    backText?: string;
+    /** Edit button href */
+    editHref?: string;
+    /** Edit button text */
+    editText?: string;
+    /** Delete button action */
+    onDelete?: () => void;
+    /** Delete button text */
+    deleteText?: string;
+    /** Additional header actions */
+    headerActions?: Snippet;
+    /** Status badge text */
+    status?: string;
+    /** Status badge variant */
+    statusVariant?: 'default' | 'secondary' | 'destructive' | 'outline';
+    /** Main content */
+    children: Snippet;
+    /** Sidebar content */
+    sidebar?: Snippet;
+    /** Loading state */
+    loading?: boolean;
+    /** Custom layout (2-column grid by default) */
+    layout?: 'single' | 'sidebar';
+    /** Additional CSS classes */
+    class?: string;
+}
+declare const DetailPage: import("svelte").Component<Props, {}, "">;
+type DetailPage = ReturnType<typeof DetailPage>;
+export default DetailPage;

package/dist/lib/components/layout/EmptyState.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">import * as z from "zod/v4";
+import { Button } from "../ui/button";
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty";
+import { Icon } from "../icon";
+import { cn } from "../../utils.js";
+let { icon, title, description, actionText, actionLabel, actionHref, onAction, secondaryAction, action, children, size = "md", class: className } = $props();
+/**
+* Svelte compiles a snippet to an arrow function, which has no own
+* `prototype`; a component (a class or a function declaration) always has one.
+*/
+function isSnippet(candidate) {
+	return !Object.hasOwn(candidate, "prototype");
+}
+// Distinguish a string, a Svelte component, or a snippet.
+const iconName = $derived(z.string().safeParse(icon));
+const iconString = $derived(iconName.success ? iconName.data : null);
+const iconFunc = $derived(z.function().safeParse(icon));
+// SAFETY: icon is confirmed callable by z.function().safeParse.
+const iconCallable = $derived(iconFunc.success ? icon : null);
+const iconSnippet = $derived(iconCallable && isSnippet(iconCallable) ? iconCallable : null);
+const IconComponent = $derived(iconCallable && !isSnippet(iconCallable) ? iconCallable : null);
+const resolvedActionLabel = $derived(actionLabel ?? actionText);
+const sizeClasses = {
+	sm: "py-12 md:py-12",
+	md: "py-16 md:py-16",
+	lg: "py-24 md:py-24"
+};
+const iconSizeClasses = {
+	sm: "size-12 [&_svg]:size-12",
+	md: "size-16 [&_svg]:size-16",
+	lg: "size-20 [&_svg]:size-20"
+};
+const titleSizeClasses = {
+	sm: "text-lg",
+	md: "text-xl",
+	lg: "text-2xl"
+};
+</script>
+
+<Empty data-component="empty-state" class={cn('gap-4', sizeClasses[size], className)}>
+	<EmptyHeader>
+		{#if icon}
+			<EmptyMedia class={cn('text-muted-foreground', iconSizeClasses[size])}>
+				{#if iconString}
+					<Icon icon={iconString} class={iconSizeClasses[size]} />
+				{:else if IconComponent}
+					<IconComponent class={iconSizeClasses[size]} />
+				{:else if iconSnippet}
+					{@render iconSnippet()}
+				{/if}
+			</EmptyMedia>
+		{/if}
+
+		<EmptyTitle class={cn('font-semibold text-foreground', titleSizeClasses[size])}>
+			<h3>{title}</h3>
+		</EmptyTitle>
+
+		{#if description}
+			<EmptyDescription class="max-w-sm">
+				<p>{description}</p>
+			</EmptyDescription>
+		{/if}
+	</EmptyHeader>
+
+	{#if children}
+		{@render children()}
+	{/if}
+
+	{#if action || (resolvedActionLabel && (actionHref || onAction)) || secondaryAction}
+		<EmptyContent class="gap-2 sm:flex-row sm:justify-center">
+			{#if action}
+				{@render action()}
+			{:else if resolvedActionLabel && actionHref}
+				<Button href={actionHref}>
+					{resolvedActionLabel}
+				</Button>
+			{:else if resolvedActionLabel && onAction}
+				<Button onclick={onAction}>
+					{resolvedActionLabel}
+				</Button>
+			{/if}
+
+			{#if secondaryAction}
+				{@render secondaryAction()}
+			{/if}
+		</EmptyContent>
+	{/if}
+</Empty>

package/dist/lib/components/layout/EmptyState.svelte.d.ts

@@ -0,0 +1,36 @@
+import type { Component, Snippet } from 'svelte';
+interface Props {
+    /**
+     * Icon component (e.g. a `lucide-svelte` icon), snippet, or iconify name string.
+     *
+     * Accepts a Svelte component class (legacy: `<EmptyState icon={Bot} />`),
+     * an iconify name string (preferred: `<EmptyState icon="lucide:bot" />`),
+     * or a `Snippet` for callers that want full control.
+     */
+    icon?: Component | Snippet | string;
+    /** Title text */
+    title: string;
+    /** Description text */
+    description?: string;
+    /** Primary action button text (legacy field) */
+    actionText?: string;
+    /** Primary action button text (preferred field) */
+    actionLabel?: string;
+    /** Primary action button href */
+    actionHref?: string;
+    /** Primary action button click handler */
+    onAction?: () => void;
+    /** Secondary action */
+    secondaryAction?: Snippet;
+    /** Fully custom action area. Takes precedence over the legacy action props. */
+    action?: Snippet;
+    /** Custom content below description */
+    children?: Snippet;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Additional CSS classes */
+    class?: string;
+}
+declare const EmptyState: Component<Props, {}, "">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;

package/dist/lib/components/layout/FeatureCard.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">import { Card, CardHeader, CardTitle, CardDescription, CardFooter } from "../ui/card";
+import { Button, buttonVariants } from "../ui/button";
+import { Badge } from "../ui/badge";
+import { cn } from "../../utils.js";
+let { title, description, icon, iconColor = "text-primary", href, actionText = "Open", comingSoon = false, category, class: className, disabled = false } = $props();
+const isDisabled = $derived(disabled || comingSoon);
+</script>
+
+{#snippet cardContent(linked: boolean)}
+	<CardHeader>
+		<div class="flex items-start justify-between">
+			{#if icon}
+				<div class={cn('h-8 w-8', iconColor)}>
+					{@render icon()}
+				</div>
+			{/if}
+			<div class="flex gap-2">
+				{#if category}
+					<Badge variant="secondary">{category}</Badge>
+				{/if}
+				{#if comingSoon}
+					<Badge variant="outline">Coming Soon</Badge>
+				{/if}
+			</div>
+		</div>
+		<div class="mt-4">
+			<CardTitle>{title}</CardTitle>
+			<CardDescription class="mt-2">{description}</CardDescription>
+		</div>
+	</CardHeader>
+	<CardFooter>
+		{#if linked}
+			<span class={cn(buttonVariants({ variant: 'outline' }), 'w-full')}>
+				{actionText}
+			</span>
+		{:else}
+			<Button variant="outline" class="w-full" disabled={isDisabled || !href}>
+				{comingSoon ? 'Coming Soon' : actionText}
+			</Button>
+		{/if}
+	</CardFooter>
+{/snippet}
+
+{#if href && !isDisabled}
+	<a
+		{href}
+		aria-label={`${actionText}: ${title}`}
+		class="block h-full rounded-xl text-inherit no-underline outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+	>
+		<Card class={cn('h-full transition-all hover:shadow-lg', className)}>
+			{@render cardContent(true)}
+		</Card>
+	</a>
+{:else}
+	<Card class={cn('transition-all hover:shadow-lg', isDisabled ? 'opacity-60' : '', className)}>
+		{@render cardContent(false)}
+	</Card>
+{/if}

package/dist/lib/components/layout/FeatureCard.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+interface FeatureCardProps {
+    /** Card title */
+    title: string;
+    /** Card description */
+    description: string;
+    /** Icon snippet */
+    icon?: Snippet;
+    /** Icon color class */
+    iconColor?: string;
+    /** Action button href */
+    href?: string;
+    /** Action button text */
+    actionText?: string;
+    /** Is feature coming soon */
+    comingSoon?: boolean;
+    /** Feature category/badge */
+    category?: string;
+    /** Custom classes */
+    class?: string;
+    /** Disabled state */
+    disabled?: boolean;
+}
+declare const FeatureCard: import("svelte").Component<FeatureCardProps, {}, "">;
+type FeatureCard = ReturnType<typeof FeatureCard>;
+export default FeatureCard;

package/dist/lib/components/layout/FormPage.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">import { Button, buttonVariants } from "../ui/button";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "../ui/card";
+import { cn } from "../../utils.js";
+import PageContainer from "./PageContainer.svelte";
+import { Icon } from "../icon";
+let { title, description, backHref, backText = "Back", cardTitle, cardDescription, children, actions, cancelHref, cancelText = "Cancel", submitText = "Save", submitting = false, submitDisabled = false, method = "POST", action, maxWidth = "2xl", class: className, asForm = true } = $props();
+</script>
+
+<PageContainer {maxWidth} class={className}>
+	<!-- Page header with back button -->
+	<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+		<div class="space-y-1">
+			<h1 class="text-2xl font-bold">{title}</h1>
+			{#if description}
+				<p class="text-muted-foreground">{description}</p>
+			{/if}
+		</div>
+		{#if backHref}
+			<a href={backHref} class={buttonVariants({ variant: 'outline' })}>
+				<Icon icon="lucide:arrow-left" class="mr-2 h-4 w-4" />
+				{backText}
+			</a>
+		{/if}
+	</div>
+
+	<!-- Form card -->
+	<Card>
+		{#if cardTitle || cardDescription}
+			<CardHeader>
+				{#if cardTitle}
+					<CardTitle>{cardTitle}</CardTitle>
+				{/if}
+				{#if cardDescription}
+					<CardDescription>{cardDescription}</CardDescription>
+				{/if}
+			</CardHeader>
+		{/if}
+
+		{#if asForm}
+			<form {method} {action}>
+				<CardContent class="space-y-6">
+					{@render children()}
+				</CardContent>
+
+				<CardFooter class="flex justify-end space-x-2 pt-2">
+					{#if actions}
+						{@render actions()}
+					{:else}
+						{#if cancelHref}
+							<a href={cancelHref} class={buttonVariants({ variant: 'outline' })}>
+								{cancelText}
+							</a>
+						{/if}
+						<Button type="submit" disabled={submitDisabled || submitting}>
+							{#if submitting}
+								<div
+									class="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-muted border-t-current"
+								></div>
+							{/if}
+							{submitText}
+						</Button>
+					{/if}
+				</CardFooter>
+			</form>
+		{:else}
+			<CardContent class="space-y-6">
+				{@render children()}
+			</CardContent>
+
+			{#if actions || cancelHref || submitText}
+				<CardFooter class="flex justify-end space-x-2 pt-2">
+					{#if actions}
+						{@render actions()}
+					{:else}
+						{#if cancelHref}
+							<a href={cancelHref} class={buttonVariants({ variant: 'outline' })}>
+								{cancelText}
+							</a>
+						{/if}
+						{#if submitText}
+							<Button disabled={submitDisabled || submitting}>
+								{#if submitting}
+									<div
+										class="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-muted border-t-current"
+									></div>
+								{/if}
+								{submitText}
+							</Button>
+						{/if}
+					{/if}
+				</CardFooter>
+			{/if}
+		{/if}
+	</Card>
+</PageContainer>

package/dist/lib/components/layout/FormPage.svelte.d.ts

@@ -0,0 +1,42 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Form title */
+    title: string;
+    /** Form description */
+    description?: string;
+    /** Back button href */
+    backHref?: string;
+    /** Back button text */
+    backText?: string;
+    /** Card title */
+    cardTitle?: string;
+    /** Card description */
+    cardDescription?: string;
+    /** Form content */
+    children: Snippet;
+    /** Form footer actions */
+    actions?: Snippet;
+    /** Cancel button href */
+    cancelHref?: string;
+    /** Cancel button text */
+    cancelText?: string;
+    /** Submit button text */
+    submitText?: string;
+    /** Submit button loading state */
+    submitting?: boolean;
+    /** Submit button disabled state */
+    submitDisabled?: boolean;
+    /** Form method (if using native form submission) */
+    method?: 'GET' | 'POST';
+    /** Form action (if using native form submission) */
+    action?: string;
+    /** Maximum width constraint */
+    maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+    /** Additional CSS classes */
+    class?: string;
+    /** Whether to render as a form element */
+    asForm?: boolean;
+}
+declare const FormPage: import("svelte").Component<Props, {}, "">;
+type FormPage = ReturnType<typeof FormPage>;
+export default FormPage;

package/dist/lib/components/layout/InfoCard.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">import * as z from "zod/v4";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "../ui/card";
+import { Badge } from "../ui/badge";
+import { cn } from "../../utils.js";
+let { title, description, items, children, class: className } = $props();
+function formatValue(item) {
+	const { value, type } = item;
+	if (value === null || value === undefined) {
+		return "-";
+	}
+	switch (type) {
+		case "date": return value instanceof Date ? value.toLocaleDateString() : new Date(value).toLocaleDateString();
+		case "number": {
+			const count = z.number().safeParse(value);
+			return count.success ? count.data.toLocaleString() : String(value);
+		}
+		case "boolean": return value ? "Yes" : "No";
+		default: return String(value);
+	}
+}
+</script>
+
+<Card class={className}>
+	{#if title || description}
+		<CardHeader>
+			{#if title}
+				<CardTitle>{title}</CardTitle>
+			{/if}
+			{#if description}
+				<CardDescription>{description}</CardDescription>
+			{/if}
+		</CardHeader>
+	{/if}
+
+	<CardContent class="space-y-4">
+		{#if items.length > 0}
+			<dl class="space-y-3">
+				{#each items as item, i (i)}
+					<div class="flex flex-col gap-1 sm:flex-row sm:justify-between">
+						<dt class="text-sm font-medium text-muted-foreground">
+							{item.label}
+						</dt>
+						<dd class="text-sm">
+							{#if item.type === 'badge'}
+								<Badge variant={item.badgeVariant || 'default'}>
+									{formatValue(item)}
+								</Badge>
+							{:else if item.type === 'boolean'}
+								<Badge variant={item.value ? 'default' : 'secondary'}>
+									{formatValue(item)}
+								</Badge>
+							{:else if item.value === null || item.value === undefined}
+								<span class="text-muted-foreground">-</span>
+							{:else}
+								<span class="font-medium">
+									{formatValue(item)}
+								</span>
+							{/if}
+						</dd>
+					</div>
+				{/each}
+			</dl>
+		{/if}
+
+		{#if children}
+			{@render children()}
+		{/if}
+	</CardContent>
+</Card>

package/dist/lib/components/layout/InfoCard.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+interface InfoItem {
+    label: string;
+    value: string | number | Date | null | undefined;
+    type?: 'text' | 'badge' | 'date' | 'number' | 'boolean';
+    badgeVariant?: 'default' | 'secondary' | 'destructive' | 'outline';
+}
+interface Props {
+    /** Card title */
+    title?: string;
+    /** Card description */
+    description?: string;
+    /** Array of information items to display */
+    items: InfoItem[];
+    /** Custom content */
+    children?: Snippet;
+    /** Additional CSS classes */
+    class?: string;
+}
+declare const InfoCard: import("svelte").Component<Props, {}, "">;
+type InfoCard = ReturnType<typeof InfoCard>;
+export default InfoCard;

package/dist/lib/components/layout/ListPage.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">import PageContainer from "./PageContainer.svelte";
+import PageHeader from "./PageHeader.svelte";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "../ui/card";
+import { cn } from "../../utils.js";
+let { title, description, createHref, createText = "Create New", createIcon, headerActions, headerExtra, filters, children, loading = false, emptyState, cardTitle, cardDescription, useCard = true, class: className, headerClass = "" } = $props();
+</script>
+
+<PageContainer class={className}>
+	<PageHeader
+		{title}
+		{description}
+		actionHref={createHref}
+		actionText={createText}
+		actionIcon={createIcon}
+		actions={headerActions}
+		class={headerClass}
+	/>
+
+	{#if headerExtra}
+		<div class="mb-6">
+			{@render headerExtra()}
+		</div>
+	{/if}
+
+	{#if filters}
+		<div class="mb-6">
+			{@render filters()}
+		</div>
+	{/if}
+
+	{#if useCard}
+		<Card>
+			{#if cardTitle || cardDescription}
+				<CardHeader>
+					{#if cardTitle}
+						<CardTitle>{cardTitle}</CardTitle>
+					{/if}
+					{#if cardDescription}
+						<CardDescription>{cardDescription}</CardDescription>
+					{/if}
+				</CardHeader>
+			{/if}
+			<CardContent>
+				{#if loading}
+					<div class="flex h-32 items-center justify-center">
+						<span class="text-muted-foreground">Loading...</span>
+					</div>
+				{:else}
+					{@render children()}
+				{/if}
+			</CardContent>
+		</Card>
+	{:else if loading}
+		<div class="flex h-32 items-center justify-center">
+			<span class="text-muted-foreground">Loading...</span>
+		</div>
+	{:else}
+		{@render children()}
+	{/if}
+
+	{#if emptyState}
+		{@render emptyState()}
+	{/if}
+</PageContainer>

package/dist/lib/components/layout/ListPage.svelte.d.ts

@@ -0,0 +1,38 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Page title */
+    title: string;
+    /** Page description */
+    description?: string;
+    /** Primary action button href */
+    createHref?: string;
+    /** Primary action button text */
+    createText?: string;
+    /** Primary action button icon */
+    createIcon?: Snippet;
+    /** Alternative header actions */
+    headerActions?: Snippet;
+    /** Content rendered below the header and above filters */
+    headerExtra?: Snippet;
+    /** Search/filter controls */
+    filters?: Snippet;
+    /** Main content (usually DataTable or card grid) */
+    children: Snippet;
+    /** Loading state */
+    loading?: boolean;
+    /** Empty state content */
+    emptyState?: Snippet;
+    /** Card title for content section */
+    cardTitle?: string;
+    /** Card description for content section */
+    cardDescription?: string;
+    /** Whether to wrap content in a card */
+    useCard?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+    /** Optional class to pass to internal PageHeader wrapper (e.g., adjust h1 size) */
+    headerClass?: string;
+}
+declare const ListPage: import("svelte").Component<Props, {}, "">;
+type ListPage = ReturnType<typeof ListPage>;
+export default ListPage;