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

package/dist/lib/components/schedule-calendar/ScheduleDayDetail.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { ScheduleItem } from './schemas/schedule-item.ts';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    items?: ScheduleItem[];
+    emptyLabel?: string;
+    onSelectItem?: (item: ScheduleItem) => void;
+    /**
+     * Optional per-row action slot (e.g. a Pause/Resume switch) rendered at
+     * the trailing edge of each row. Keeps the kit component data-agnostic —
+     * the consumer owns what the action does.
+     */
+    actions?: Snippet<[ScheduleItem]>;
+};
+declare const ScheduleDayDetail: import("svelte").Component<$$ComponentProps, {}, "">;
+type ScheduleDayDetail = ReturnType<typeof ScheduleDayDetail>;
+export default ScheduleDayDetail;

package/dist/lib/components/schedule-calendar/group-schedule-items.d.ts

@@ -0,0 +1,28 @@
+import { CalendarDate, type DateValue } from '@internationalized/date';
+import type { ScheduleItem } from './schemas/schedule-item.ts';
+/**
+ * Day key = 'YYYY-MM-DD' bucketed in the VIEWER's local timezone (not UTC).
+ *
+ * ScheduleDayDetail renders the same instant via `toLocaleString()` (viewer-local),
+ * so the dot and the detail row must agree on which calendar day an instant falls
+ * on. A naive UTC-slice (`iso.slice(0, 10)`) puts any evening-local run (~5pm+ in
+ * US timezones) on tomorrow's UTC date — the dot lands on the wrong cell while the
+ * detail pane says "today". Bucketing in local time keeps both honest.
+ */
+export declare function dayKey(iso: string): string;
+/** Day key ('YYYY-MM-DD') for a calendar `DateValue`. */
+export declare function dayKeyOf(date: DateValue): string;
+/**
+ * Bucket items by their `date` day key. Insertion order is preserved within
+ * each bucket. Items whose `date` does not yield a `YYYY-MM-DD` key are skipped
+ * (defensive — the generic model can't assume the consumer validated).
+ */
+export declare function groupScheduleItemsByDay(items: ScheduleItem[]): Map<string, ScheduleItem[]>;
+/** Items on a given calendar day (for the day-cell indicator + the detail list). */
+export declare function itemsForDay(groups: Map<string, ScheduleItem[]>, date: DateValue): ScheduleItem[];
+/**
+ * First `CalendarDate` that has a scheduled item — drives the initial
+ * `placeholder`/`value` so the calendar opens on the month that has work.
+ * Returns `undefined` for an empty list.
+ */
+export declare function firstScheduledDay(items: ScheduleItem[]): CalendarDate | undefined;

package/dist/lib/components/schedule-calendar/group-schedule-items.js

@@ -0,0 +1,59 @@
+import { CalendarDate, parseDate } from '@internationalized/date';
+/**
+ * Day key = 'YYYY-MM-DD' bucketed in the VIEWER's local timezone (not UTC).
+ *
+ * ScheduleDayDetail renders the same instant via `toLocaleString()` (viewer-local),
+ * so the dot and the detail row must agree on which calendar day an instant falls
+ * on. A naive UTC-slice (`iso.slice(0, 10)`) puts any evening-local run (~5pm+ in
+ * US timezones) on tomorrow's UTC date — the dot lands on the wrong cell while the
+ * detail pane says "today". Bucketing in local time keeps both honest.
+ */
+export function dayKey(iso) {
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime()))
+        return '';
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+}
+/** Day key ('YYYY-MM-DD') for a calendar `DateValue`. */
+export function dayKeyOf(date) {
+    return `${date.year}-${String(date.month).padStart(2, '0')}-${String(date.day).padStart(2, '0')}`;
+}
+/**
+ * Bucket items by their `date` day key. Insertion order is preserved within
+ * each bucket. Items whose `date` does not yield a `YYYY-MM-DD` key are skipped
+ * (defensive — the generic model can't assume the consumer validated).
+ */
+export function groupScheduleItemsByDay(items) {
+    const groups = new Map();
+    for (const item of items) {
+        const key = dayKey(item.date);
+        if (key.length !== 10)
+            continue;
+        const bucket = groups.get(key);
+        if (bucket)
+            bucket.push(item);
+        else
+            groups.set(key, [item]);
+    }
+    return groups;
+}
+/** Items on a given calendar day (for the day-cell indicator + the detail list). */
+export function itemsForDay(groups, date) {
+    return groups.get(dayKeyOf(date)) ?? [];
+}
+/**
+ * First `CalendarDate` that has a scheduled item — drives the initial
+ * `placeholder`/`value` so the calendar opens on the month that has work.
+ * Returns `undefined` for an empty list.
+ */
+export function firstScheduledDay(items) {
+    let earliest;
+    for (const item of items) {
+        const key = dayKey(item.date);
+        if (key.length !== 10)
+            continue;
+        if (!earliest || key < earliest)
+            earliest = key;
+    }
+    return earliest ? parseDate(earliest) : undefined;
+}

package/dist/lib/components/schedule-calendar/index.d.ts

@@ -0,0 +1,6 @@
+export { default as ScheduleCalendar } from './ScheduleCalendar.svelte';
+export { default as ScheduleDayCell } from './ScheduleDayCell.svelte';
+export { default as ScheduleDayDetail } from './ScheduleDayDetail.svelte';
+export { groupScheduleItemsByDay, itemsForDay, firstScheduledDay, dayKey, dayKeyOf } from './group-schedule-items.ts';
+export { scheduleItemSchema, scheduleItemStatusSchema } from './schemas/schedule-item.ts';
+export type { ScheduleItem, ScheduleItemStatus } from './schemas/schedule-item.ts';

package/dist/lib/components/schedule-calendar/index.js

@@ -0,0 +1,5 @@
+export { default as ScheduleCalendar } from './ScheduleCalendar.svelte';
+export { default as ScheduleDayCell } from './ScheduleDayCell.svelte';
+export { default as ScheduleDayDetail } from './ScheduleDayDetail.svelte';
+export { groupScheduleItemsByDay, itemsForDay, firstScheduledDay, dayKey, dayKeyOf } from "./group-schedule-items.js";
+export { scheduleItemSchema, scheduleItemStatusSchema } from "./schemas/schedule-item.js";

package/dist/lib/components/schedule-calendar/schemas/schedule-item.d.ts

@@ -0,0 +1,31 @@
+import * as z from 'zod/v4';
+export declare const scheduleItemStatusSchema: z.ZodEnum<{
+    error: "error";
+    active: "active";
+    done: "done";
+    paused: "paused";
+}>;
+/**
+ * A single scheduled thing on the calendar. Data-agnostic: the consumer
+ * ({feature}-svelte / app) maps its domain rows into this shape — the
+ * ScheduleCalendar kit pattern never knows about platform / agents / hq.
+ */
+export declare const scheduleItemSchema: z.ZodObject<{
+    id: z.ZodString;
+    date: z.ZodString;
+    title: z.ZodString;
+    status: z.ZodDefault<z.ZodEnum<{
+        error: "error";
+        active: "active";
+        done: "done";
+        paused: "paused";
+    }>>;
+    kind: z.ZodOptional<z.ZodString>;
+    lastRunAt: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+    nextRunAt: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+    runCount: z.ZodOptional<z.ZodNumber>;
+    href: z.ZodOptional<z.ZodString>;
+    subtitle: z.ZodOptional<z.ZodString>;
+}, z.core.$strip>;
+export type ScheduleItem = z.infer<typeof scheduleItemSchema>;
+export type ScheduleItemStatus = z.infer<typeof scheduleItemStatusSchema>;

package/dist/lib/components/schedule-calendar/schemas/schedule-item.js

@@ -0,0 +1,30 @@
+import * as z from 'zod/v4';
+export const scheduleItemStatusSchema = z.enum(['active', 'paused', 'error', 'done']);
+/**
+ * A single scheduled thing on the calendar. Data-agnostic: the consumer
+ * ({feature}-svelte / app) maps its domain rows into this shape — the
+ * ScheduleCalendar kit pattern never knows about platform / agents / hq.
+ */
+export const scheduleItemSchema = z.object({
+    id: z.string().min(1),
+    /** ISO-8601. The day this item is placed on (the consumer decides — e.g. nextRunAt). */
+    date: z.string().datetime(),
+    title: z.string().min(1),
+    status: scheduleItemStatusSchema.default('active'),
+    /** Free-form kind label/badge text — e.g. 'cron', 'interval', 'agent'. NOT an enum (data-agnostic). */
+    kind: z.string().optional(),
+    /** ISO-8601 of the last run, if any. */
+    lastRunAt: z.string().datetime().nullable().optional(),
+    /** ISO-8601 of the next run, if different from `date` (the consumer may set both). */
+    nextRunAt: z.string().datetime().nullable().optional(),
+    runCount: z.number().int().nonnegative().optional(),
+    /** Optional opaque href/handle the consumer uses for row click-through. */
+    href: z.string().optional(),
+    /**
+     * Optional muted subtitle shown under the title — e.g. a plain-language
+     * recurrence description ("Runs every day at 8:00 PM") so a recurring item
+     * never reads like a one-off, or an agent-name attribution chip. Free-form,
+     * data-agnostic.
+     */
+    subtitle: z.string().optional()
+});

package/dist/lib/components/search-select/SearchSelect.svelte

@@ -0,0 +1,82 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">import { Button } from "../ui/button";
+import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from "../ui/command";
+import { Popover, PopoverTrigger, PopoverContent } from "../ui/popover";
+import { Icon } from "../icon";
+let { options, value = $bindable(""), onValueChange, placeholder = "Select…", label = placeholder, searchPlaceholder = "Search…", emptyMessage = "No results found", id, disabled = false, class: className = "" } = $props();
+let open = $state(false);
+const selected = $derived(options.find((option) => option.value === value));
+const groups = $derived.by(() => {
+	const result = new Map();
+	for (const option of options) {
+		const group = option.group ?? "";
+		const items = result.get(group) ?? [];
+		items.push(option);
+		result.set(group, items);
+	}
+	return [...result];
+});
+function select(option) {
+	if (disabled || option.disabled) return;
+	value = option.value;
+	onValueChange?.(value);
+	open = false;
+}
+</script>
+
+<Popover bind:open>
+	<PopoverTrigger {id}>
+		{#snippet child({ props })}
+			<Button
+				{...props}
+				{disabled}
+				variant="outline"
+				role="combobox"
+				aria-expanded={open}
+				aria-label={selected ? `${label}: ${selected.label}` : label}
+				class="w-full justify-between {className}"
+			>
+				<span class="truncate">{selected?.label ?? placeholder}</span>
+				<Icon icon="lucide:chevrons-up-down" class="ml-2 size-4 shrink-0 opacity-50" />
+			</Button>
+		{/snippet}
+	</PopoverTrigger>
+	<PopoverContent class="w-[var(--bits-popover-anchor-width)] p-0">
+		<Command>
+			<CommandInput placeholder={searchPlaceholder} aria-label={searchPlaceholder} />
+			<CommandList>
+				<CommandEmpty>{emptyMessage}</CommandEmpty>
+				{#each groups as [group, items] (group)}
+					<CommandGroup heading={group || undefined} value={`group:${group}`}>
+						{#each items as option (option.value)}
+							<CommandItem
+								value={option.value}
+								keywords={[
+									option.label,
+									option.description ?? '',
+									group,
+									...(option.keywords ?? [])
+								]}
+								disabled={option.disabled}
+								onSelect={() => select(option)}
+							>
+								<Icon
+									icon="lucide:check"
+									class="size-4 shrink-0 {value === option.value ? 'opacity-100' : 'opacity-0'}"
+								/>
+								<div class="min-w-0">
+									<div class="truncate">{option.label}</div>
+									{#if option.description}<div class="text-xs text-muted-foreground">
+											{option.description}
+										</div>{/if}
+								</div>
+							</CommandItem>
+						{/each}
+					</CommandGroup>
+				{/each}
+			</CommandList>
+		</Command>
+	</PopoverContent>
+</Popover>

package/dist/lib/components/search-select/SearchSelect.svelte.d.ts

@@ -0,0 +1,23 @@
+export interface SearchSelectOption {
+    value: string;
+    label: string;
+    description?: string | null;
+    keywords?: string[];
+    group?: string;
+    disabled?: boolean;
+}
+type $$ComponentProps = {
+    options: SearchSelectOption[];
+    value?: string;
+    onValueChange?: (value: string) => void;
+    placeholder?: string;
+    label?: string;
+    searchPlaceholder?: string;
+    emptyMessage?: string;
+    id?: string;
+    disabled?: boolean;
+    class?: string;
+};
+declare const SearchSelect: import("svelte").Component<$$ComponentProps, {}, "value">;
+type SearchSelect = ReturnType<typeof SearchSelect>;
+export default SearchSelect;

package/dist/lib/components/seo/SeoMeta.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">/**
+* The complete social/SEO head for a page, in one component.
+*
+* Apps previously hand-wrote this block in every `+layout.svelte`, and each
+* copy was missing something different — `og:url`, image dimensions,
+* `twitter:image`, `og:site_name` — while pointing `og:image` at a square
+* logo under a `summary_large_image` card. See `utils/page-meta.ts` for the
+* tag-by-tag reasoning; this component only renders what that helper returns,
+* so the rules live in one testable place instead of in markup.
+*/
+import { buildSeoMeta } from "../../utils/page-meta.js";
+let { title, description, url, assetsOrigin, image, imageAlt, siteName, ogType, keywords, robots, twitterSite, favicon, faviconDark, appleTouchIcon, manifest, themeColor } = $props();
+const meta = $derived(buildSeoMeta({
+	title,
+	description,
+	url,
+	assetsOrigin,
+	image,
+	imageAlt,
+	siteName,
+	ogType,
+	keywords,
+	robots,
+	twitterSite,
+	favicon,
+	faviconDark,
+	appleTouchIcon,
+	manifest,
+	themeColor
+}));
+</script>
+
+<svelte:head>
+	<title>{meta.title}</title>
+	{#if meta.canonical}
+		<link rel="canonical" href={meta.canonical} />
+	{/if}
+	<link rel="icon" href={meta.icon} />
+	{#if meta.iconDark}
+		<link rel="icon" href={meta.iconDark} media="(prefers-color-scheme: dark)" />
+	{/if}
+	<link rel="apple-touch-icon" href={meta.appleTouchIcon} />
+	{#if meta.manifest}
+		<link rel="manifest" href={meta.manifest} />
+	{/if}
+	{#if meta.themeColor}
+		<meta name="theme-color" content={meta.themeColor} />
+	{/if}
+	{#each meta.tags as tag (tag.name ?? tag.property)}
+		{#if tag.property}
+			<meta property={tag.property} content={tag.content} />
+		{:else}
+			<meta name={tag.name} content={tag.content} />
+		{/if}
+	{/each}
+</svelte:head>

package/dist/lib/components/seo/SeoMeta.svelte.d.ts

@@ -0,0 +1,14 @@
+/**
+     * The complete social/SEO head for a page, in one component.
+     *
+     * Apps previously hand-wrote this block in every `+layout.svelte`, and each
+     * copy was missing something different — `og:url`, image dimensions,
+     * `twitter:image`, `og:site_name` — while pointing `og:image` at a square
+     * logo under a `summary_large_image` card. See `utils/page-meta.ts` for the
+     * tag-by-tag reasoning; this component only renders what that helper returns,
+     * so the rules live in one testable place instead of in markup.
+     */
+import { type SeoInput } from '../../utils/page-meta.js';
+declare const SeoMeta: import("svelte").Component<SeoInput, {}, "">;
+type SeoMeta = ReturnType<typeof SeoMeta>;
+export default SeoMeta;

package/dist/lib/components/seo/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SeoMeta } from './SeoMeta.svelte';
+export { buildSeoMeta, buildPageTitle, resolveOgImage, resolveSeoAsset, seoInputFromBranding, defaultPageMeta, DEFAULT_OG_CARD_PATH, OG_CARD_WIDTH, OG_CARD_HEIGHT, type SeoInput, type SeoTag, type SeoTags, type PageMeta, type BrandingMetaInput } from '../../utils/page-meta.js';

package/dist/lib/components/seo/index.js

@@ -0,0 +1,2 @@
+export { default as SeoMeta } from './SeoMeta.svelte';
+export { buildSeoMeta, buildPageTitle, resolveOgImage, resolveSeoAsset, seoInputFromBranding, defaultPageMeta, DEFAULT_OG_CARD_PATH, OG_CARD_WIDTH, OG_CARD_HEIGHT } from '../../utils/page-meta.js';

package/dist/lib/components/sidebar-layout/index.d.ts

@@ -0,0 +1,3 @@
+export * from './sidebar-layout-store.svelte';
+export * from './use-page-meta';
+export * from './use-layout';

package/dist/lib/components/sidebar-layout/index.js

@@ -0,0 +1,3 @@
+export * from './sidebar-layout-store.svelte';
+export * from './use-page-meta';
+export * from './use-layout';

package/dist/lib/components/sidebar-layout/sidebar-layout-store.svelte.d.ts

@@ -0,0 +1,50 @@
+import type { Snippet } from 'svelte';
+export interface SidebarState {
+    open: boolean;
+    snippet: Snippet | null;
+    openOnMobile?: boolean;
+}
+export interface SidebarLayoutBreadcrumb {
+    label: string;
+    href?: string;
+    /** Iconify icon name, e.g. "lucide:chevron-right" */
+    icon?: string;
+}
+export interface SidebarLayoutMeta {
+    title: string;
+    keywords?: string[];
+    description?: string;
+    ogType?: 'website' | 'article' | 'product';
+    ogImage?: string;
+    ogImageAlt?: string;
+    ogUrl?: string;
+    twitterCard?: 'summary' | 'summary_large_image' | 'app' | 'player';
+    twitterCreator?: string;
+    twitterSite?: string;
+    canonicalUrl?: string;
+    robots?: string;
+    author?: string;
+    publishedTime?: string;
+    modifiedTime?: string;
+}
+export interface SidebarLayoutSetPage {
+    meta?: SidebarLayoutMeta;
+    breadcrumbs?: SidebarLayoutBreadcrumb[];
+    rightSidebar?: SidebarState;
+    leftSidebar?: SidebarState;
+    header?: Snippet;
+}
+export declare class SidebarLayoutStore {
+    #private;
+    meta: SidebarLayoutMeta;
+    isMobile: boolean;
+    leftSidebarLocked: boolean;
+    leftSidebar: SidebarState;
+    rightSidebar: SidebarState;
+    breadcrumbs: SidebarLayoutBreadcrumb[];
+    header: Snippet<[]> | null;
+    constructor(meta: SidebarLayoutMeta, breadcrumbs?: SidebarLayoutBreadcrumb[]);
+    toggleSidebar(sidebar: 'left' | 'right', mobile?: boolean): void;
+    setPage(page: SidebarLayoutSetPage): void;
+    dispose(): void;
+}

package/dist/lib/components/sidebar-layout/sidebar-layout-store.svelte.js

@@ -0,0 +1,73 @@
+import { BROWSER } from 'esm-env';
+export class SidebarLayoutStore {
+    meta = $state({
+        title: '',
+        keywords: [],
+        description: ''
+    });
+    isMobile = $state(false);
+    #removeMobileListener;
+    // When true, the app's left sidebar trigger should be disabled (e.g., in /chat)
+    leftSidebarLocked = $state(false);
+    leftSidebar = $state({
+        open: false,
+        snippet: null,
+        openOnMobile: false
+    });
+    rightSidebar = $state({
+        open: false,
+        snippet: null,
+        openOnMobile: false
+    });
+    breadcrumbs = $state([]);
+    header = $state(null);
+    constructor(meta, breadcrumbs = []) {
+        Object.assign(this, { meta, breadcrumbs });
+        this.#initMobileDetection();
+    }
+    toggleSidebar(sidebar, mobile = false) {
+        if (sidebar === 'left') {
+            if (mobile) {
+                this.leftSidebar.openOnMobile = !this.leftSidebar.openOnMobile;
+            }
+            else {
+                this.leftSidebar.open = !this.leftSidebar.open;
+            }
+        }
+        else if (mobile) {
+            this.rightSidebar.openOnMobile = !this.rightSidebar.openOnMobile;
+        }
+        else {
+            this.rightSidebar.open = !this.rightSidebar.open;
+        }
+    }
+    setPage(page) {
+        Object.assign(this, page);
+    }
+    #initMobileDetection() {
+        // A host without matchMedia answers no query, and the store stays non-mobile.
+        const query = BROWSER ? window.matchMedia?.('(max-width: 767.98px)') : undefined;
+        if (!query) {
+            return;
+        }
+        const update = (matches) => {
+            if (this.isMobile === matches)
+                return;
+            this.isMobile = matches;
+        };
+        update(query.matches);
+        const listener = (event) => update(event.matches);
+        if (query.addEventListener) {
+            query.addEventListener('change', listener);
+            this.#removeMobileListener = () => query.removeEventListener('change', listener);
+        }
+        else if (query.addListener) {
+            // Fallback for Safari < 14
+            query.addListener(listener);
+            this.#removeMobileListener = () => query.removeListener(listener);
+        }
+    }
+    dispose() {
+        this.#removeMobileListener?.();
+    }
+}

package/dist/lib/components/sidebar-layout/use-layout.d.ts

@@ -0,0 +1,2 @@
+import type { SidebarLayoutStore } from './sidebar-layout-store.svelte';
+export declare function useLayout(): SidebarLayoutStore;

package/dist/lib/components/sidebar-layout/use-layout.js

@@ -0,0 +1,11 @@
+import { getContext } from 'svelte';
+import { kitLogger } from '../../kit-logger';
+/** Reports through the host-injected kit logger (a no-op before the kit is initialized). */
+const logger = kitLogger('vibeskit-layout');
+export function useLayout() {
+    const store = getContext('layout');
+    if (!store) {
+        logger.warn('useLayout: No layout store found in context');
+    }
+    return store;
+}

package/dist/lib/components/sidebar-layout/use-page-meta.d.ts

@@ -0,0 +1,7 @@
+import type { SidebarLayoutStore, SidebarLayoutMeta } from './sidebar-layout-store.svelte';
+export interface PageMetaOptions extends SidebarLayoutMeta {
+    titleTemplate?: string;
+    defaultOgImage?: string;
+}
+export declare function usePageMeta(options?: PageMetaOptions): SidebarLayoutStore | undefined;
+export declare const defaultMeta: PageMetaOptions;

package/dist/lib/components/sidebar-layout/use-page-meta.js

@@ -0,0 +1,46 @@
+import { BROWSER } from 'esm-env';
+import { getContext } from 'svelte';
+import { kitLogger } from '../../kit-logger';
+/** Reports through the host-injected kit logger (a no-op before the kit is initialized). */
+const logger = kitLogger('vibeskit-layout');
+export function usePageMeta(options) {
+    const store = getContext('layout');
+    if (!store) {
+        logger.warn('usePageMeta: No layout store found in context');
+        return;
+    }
+    // An omitted argument carries no fields, so the store keeps its current title.
+    const resolved = options ?? {};
+    // Apply title template if provided
+    if (resolved.titleTemplate && resolved.title) {
+        resolved.title = resolved.titleTemplate.replace('%s', resolved.title);
+    }
+    // Set default OG image if none provided
+    if (!resolved.ogImage && resolved.defaultOgImage) {
+        resolved.ogImage = resolved.defaultOgImage;
+    }
+    // Generate canonical URL if not provided
+    if (!resolved.canonicalUrl && BROWSER) {
+        resolved.canonicalUrl = window.location.href.split('?')[0];
+    }
+    // Set OG URL if not provided
+    if (!resolved.ogUrl && resolved.canonicalUrl) {
+        resolved.ogUrl = resolved.canonicalUrl;
+    }
+    // Update the store
+    store.meta = {
+        ...store.meta,
+        ...resolved
+    };
+    return store;
+}
+// Default metadata configuration
+export const defaultMeta = {
+    title: 'Vibes',
+    titleTemplate: '%s - Vibes',
+    defaultOgImage: '/vibes-logo.png',
+    twitterCard: 'summary',
+    ogType: 'website',
+    keywords: ['Vibes', 'AI', 'platform', 'knowledge management'],
+    robots: 'index, follow'
+};

package/dist/lib/components/skeleton/CardSkeleton.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">import Skeleton from "./Skeleton.svelte";
+let { contentLines = 3, showFooter = false, showHeader = false, class: className = "" } = $props();
+</script>
+
+<div class="rounded-lg border bg-card p-6 {className}" aria-busy="true" aria-label="Loading card">
+	{#if showHeader}
+		<div class="mb-4 flex items-center gap-4">
+			<Skeleton variant="circular" class="h-10 w-10" />
+			<div class="flex-1 space-y-2">
+				<Skeleton class="h-4 w-1/3" />
+				<Skeleton class="h-3 w-1/4" />
+			</div>
+		</div>
+	{:else}
+		<Skeleton class="mb-4 h-5 w-2/3" />
+	{/if}
+
+	<div class="space-y-2">
+		{#each Array(contentLines) as _, i (i)}
+			<Skeleton class="h-4 {i === contentLines - 1 ? 'w-2/3' : 'w-full'}" />
+		{/each}
+	</div>
+
+	{#if showFooter}
+		<div class="mt-6 flex items-center justify-between border-t pt-4">
+			<Skeleton class="h-8 w-24" />
+			<Skeleton class="h-8 w-24" />
+		</div>
+	{/if}
+</div>

package/dist/lib/components/skeleton/CardSkeleton.svelte.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Card skeleton with title, content, and optional footer
+ */
+interface Props {
+    /** Number of content lines to show */
+    contentLines?: number;
+    /** Show footer skeleton */
+    showFooter?: boolean;
+    /** Show header image/avatar */
+    showHeader?: boolean;
+    /** Custom class for container */
+    class?: string;
+}
+declare const CardSkeleton: import("svelte").Component<Props, {}, "">;
+type CardSkeleton = ReturnType<typeof CardSkeleton>;
+export default CardSkeleton;

package/dist/lib/components/skeleton/FormSkeleton.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">import Skeleton from "./Skeleton.svelte";
+let { fields = 4, showSubmit = true, layout = "vertical", class: className = "" } = $props();
+</script>
+
+<div class="space-y-4 {className}" aria-busy="true" aria-label="Loading form">
+	{#each Array(fields) as _, _i (_i)}
+		{#if layout === 'horizontal'}
+			<div class="grid grid-cols-[200px_1fr] items-center gap-4">
+				<Skeleton class="h-4 w-32" />
+				<Skeleton class="h-10 w-full" />
+			</div>
+		{:else}
+			<div class="space-y-2">
+				<Skeleton class="h-4 w-24" />
+				<Skeleton class="h-10 w-full" />
+			</div>
+		{/if}
+	{/each}
+
+	{#if showSubmit}
+		<div class="flex justify-end pt-4">
+			<Skeleton class="h-10 w-32" />
+		</div>
+	{/if}
+</div>