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

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

@@ -0,0 +1,16 @@
+/**
+ * Form field skeleton for loading states
+ */
+interface Props {
+    /** Number of fields to show */
+    fields?: number;
+    /** Show submit button */
+    showSubmit?: boolean;
+    /** Layout: vertical or horizontal */
+    layout?: 'vertical' | 'horizontal';
+    /** Custom class */
+    class?: string;
+}
+declare const FormSkeleton: import("svelte").Component<Props, {}, "">;
+type FormSkeleton = ReturnType<typeof FormSkeleton>;
+export default FormSkeleton;

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

@@ -0,0 +1,30 @@
+<script lang="ts">import Skeleton from "./Skeleton.svelte";
+let { showBreadcrumb = false, showActions = false, breadcrumbItems = 3, class: className = "" } = $props();
+</script>
+
+<div class="space-y-4 {className}" aria-busy="true" aria-label="Loading page header">
+	{#if showBreadcrumb}
+		<div class="flex items-center gap-2">
+			{#each Array(breadcrumbItems) as _, i (i)}
+				<Skeleton class="h-4 {i === breadcrumbItems - 1 ? 'w-24' : 'w-16'}" />
+				{#if i < breadcrumbItems - 1}
+					<Skeleton class="h-3 w-3" variant="circular" />
+				{/if}
+			{/each}
+		</div>
+	{/if}
+
+	<div class="flex items-center justify-between">
+		<div class="flex-1 space-y-2">
+			<Skeleton class="h-8 w-1/3" />
+			<Skeleton class="h-4 w-1/2" />
+		</div>
+
+		{#if showActions}
+			<div class="flex items-center gap-2">
+				<Skeleton class="h-9 w-24" />
+				<Skeleton class="h-9 w-32" />
+			</div>
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,16 @@
+/**
+ * Page header skeleton with breadcrumb support
+ */
+interface Props {
+    /** Show breadcrumb skeleton */
+    showBreadcrumb?: boolean;
+    /** Show action buttons */
+    showActions?: boolean;
+    /** Number of breadcrumb items */
+    breadcrumbItems?: number;
+    /** Custom class */
+    class?: string;
+}
+declare const PageHeaderSkeleton: import("svelte").Component<Props, {}, "">;
+type PageHeaderSkeleton = ReturnType<typeof PageHeaderSkeleton>;
+export default PageHeaderSkeleton;

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

@@ -0,0 +1,12 @@
+<script lang="ts">let { class: className = "h-4 w-full", width, variant = "text" } = $props();
+const variantClasses = {
+	text: "rounded-md",
+	circular: "rounded-full",
+	rectangular: "rounded-none"
+};
+</script>
+
+<div
+	class="animate-pulse bg-muted {variantClasses[variant]} {width ?? className}"
+	aria-hidden="true"
+></div>

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

@@ -0,0 +1,14 @@
+/**
+ * Base skeleton primitive with pulse animation
+ */
+interface Props {
+    /** Height class (e.g., 'h-4', 'h-8', 'h-[200px]') */
+    class?: string;
+    /** Width class (e.g., 'w-full', 'w-32', 'w-[100px]') */
+    width?: string;
+    /** Shape variant */
+    variant?: 'text' | 'circular' | 'rectangular';
+}
+declare const Skeleton: import("svelte").Component<Props, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

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

@@ -0,0 +1,33 @@
+<script lang="ts">import Skeleton from "./Skeleton.svelte";
+let { columns = 4, showCheckbox = false, showActions = false, class: className = "" } = $props();
+const columnWidths = [
+	"w-1/4",
+	"w-1/5",
+	"w-1/6",
+	"w-1/6",
+	"w-1/6",
+	"w-1/8"
+];
+</script>
+
+<div
+	class="flex items-center gap-4 border-b px-4 py-3 {className}"
+	aria-busy="true"
+	aria-label="Loading table row"
+>
+	{#if showCheckbox}
+		<Skeleton variant="circular" class="h-4 w-4" />
+	{/if}
+
+	{#each Array(columns) as _, i (i)}
+		{@const widthClass = columnWidths[i % columnWidths.length]}
+		<Skeleton class="h-4 {widthClass}" />
+	{/each}
+
+	{#if showActions}
+		<div class="ml-auto flex items-center gap-2">
+			<Skeleton class="h-8 w-8" variant="circular" />
+			<Skeleton class="h-8 w-8" variant="circular" />
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,16 @@
+/**
+ * Data table row skeleton
+ */
+interface Props {
+    /** Number of columns */
+    columns?: number;
+    /** Show checkbox column */
+    showCheckbox?: boolean;
+    /** Show action buttons */
+    showActions?: boolean;
+    /** Custom class */
+    class?: string;
+}
+declare const TableRowSkeleton: import("svelte").Component<Props, {}, "">;
+type TableRowSkeleton = ReturnType<typeof TableRowSkeleton>;
+export default TableRowSkeleton;

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

@@ -0,0 +1,5 @@
+export { default as Skeleton } from './Skeleton.svelte';
+export { default as CardSkeleton } from './CardSkeleton.svelte';
+export { default as PageHeaderSkeleton } from './PageHeaderSkeleton.svelte';
+export { default as TableRowSkeleton } from './TableRowSkeleton.svelte';
+export { default as FormSkeleton } from './FormSkeleton.svelte';

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

@@ -0,0 +1,6 @@
+// Skeleton loading components
+export { default as Skeleton } from './Skeleton.svelte';
+export { default as CardSkeleton } from './CardSkeleton.svelte';
+export { default as PageHeaderSkeleton } from './PageHeaderSkeleton.svelte';
+export { default as TableRowSkeleton } from './TableRowSkeleton.svelte';
+export { default as FormSkeleton } from './FormSkeleton.svelte';

package/dist/lib/components/slug-input/index.d.ts

@@ -0,0 +1,3 @@
+export { default as SlugInput } from './slug-input.svelte';
+export * from './slug-input.svelte';
+export type { AvailabilityResult, EndpointAvailabilityOptions } from './types';

package/dist/lib/components/slug-input/index.js

@@ -0,0 +1,2 @@
+export { default as SlugInput } from './slug-input.svelte';
+export * from './slug-input.svelte';

package/dist/lib/components/slug-input/slug-input.svelte

@@ -0,0 +1,184 @@
+<script lang="ts" module>import { buildRequestUrl } from "./utils";
+import { kitLogger } from "../../kit-logger";
+import * as z from "zod/v4";
+import { settle } from "../../attempt.js";
+import { failureClass } from "../../failure-class.js";
+const logger = kitLogger("slug-input");
+export function endpointAvailabilityCheck(url, options = {}) {
+	const { key = "available", param = "slug", method = "GET", headers, transform, fetcher = fetch, staticParams = {} } = options;
+	return async (slug) => {
+		const requestUrl = buildRequestUrl(url, param, slug, staticParams, method);
+		const response = await fetcher(requestUrl, {
+			method,
+			headers: method === "GET" ? headers : {
+				"Content-Type": "application/json",
+				...headers
+			},
+			body: method === "GET" ? undefined : JSON.stringify({
+				[param]: slug,
+				...staticParams
+			})
+		});
+		const data = await safeJson(response);
+		if (transform) {
+			return transform(response, data);
+		}
+		if (key === false) {
+			return {
+				available: response.ok,
+				message: response.ok ? undefined : "Slug is already in use."
+			};
+		}
+		const body = availabilityBodySchema.safeParse(data);
+		if (!body.success || !(key in body.data)) {
+			return {
+				available: false,
+				message: "Unexpected availability response."
+			};
+		}
+		return {
+			available: Boolean(body.data[key]),
+			message: z.string().safeParse(body.data.message).data
+		};
+	};
+}
+/** An availability answer is a JSON object keyed by field name. */
+const availabilityBodySchema = z.record(z.string(), z.json());
+const jsonBodySchema = z.json();
+async function safeJson(response) {
+	const body = await settle(async () => jsonBodySchema.parse(await response.json()));
+	if (body.ok) return body.value;
+	logger.warn("availability response was not JSON", { reason: failureClass(body.error) });
+	return null;
+}
+</script>
+
+<script lang="ts">import { Input } from "../ui";
+import { cn } from "../../utils.js";
+import { normalizeSlug } from "../../common/slug";
+import { Icon } from "../icon";
+let { class: className, inputClass, value = $bindable(), slugify, debounce = 400, checkAvailability, successMessage = "Slug is available.", unavailableMessage = "Slug is already in use.", checkingMessage = "Checking availability…", errorMessage = "Unable to verify slug availability.", ariaInvalid, disabled, type = "text", files = $bindable(), ref = $bindable(null), ...restProps } = $props();
+let status = $state("idle");
+let statusMessage = $state(null);
+let autoSlug = $state(true);
+let lastSlugSource = $state(null);
+let debounceTimer = null;
+let requestToken = 0;
+$effect(() => {
+	// If value becomes undefined/null, update it to empty string
+	if (value === null || value === undefined) {
+		value = "";
+	}
+});
+$effect(() => {
+	const source = slugify ?? null;
+	if (source !== null && source !== lastSlugSource) {
+		lastSlugSource = source;
+		const normalized = normalizeSlug(source);
+		const currentValue = value ?? "";
+		if (autoSlug || !currentValue) {
+			if (normalized !== currentValue) {
+				value = normalized;
+			}
+		}
+	}
+});
+$effect(() => {
+	const slug = (value ?? "").trim();
+	if (!slug) {
+		status = "idle";
+		statusMessage = null;
+		autoSlug = true;
+		requestToken++;
+		clearTimer();
+		return;
+	}
+	if (!checkAvailability) {
+		status = "idle";
+		statusMessage = null;
+		return;
+	}
+	const currentToken = ++requestToken;
+	clearTimer();
+	debounceTimer = setTimeout(async () => {
+		status = "checking";
+		statusMessage = checkingMessage;
+		const checked = await settle(() => checkAvailability(slug));
+		if (currentToken !== requestToken) return;
+		if (!checked.ok) {
+			logger.warn("availability check failed", { reason: failureClass(checked.error) });
+			status = "error";
+			statusMessage = errorMessage;
+			return;
+		}
+		const result = checked.value;
+		status = result.available ? "available" : "unavailable";
+		statusMessage = result.message ?? (result.available ? successMessage : unavailableMessage);
+	}, debounce);
+});
+function clearTimer() {
+	if (debounceTimer) {
+		clearTimeout(debounceTimer);
+		debounceTimer = null;
+	}
+}
+function handleInput() {
+	autoSlug = false;
+}
+$effect(() => () => clearTimer());
+const messageClass = $derived.by(() => {
+	switch (status) {
+		case "available": return "text-emerald-600 dark:text-emerald-400";
+		case "unavailable": return "text-destructive";
+		case "error": return "text-destructive";
+		default: return "text-muted-foreground";
+	}
+});
+const iconBaseClass = "absolute right-2 top-1/2 flex -translate-y-1/2 items-center justify-center";
+</script>
+
+<div class={cn('space-y-1', className)}>
+	<div class="relative">
+		{#if type === 'file'}
+			<Input
+				{...restProps}
+				type="file"
+				bind:files
+				bind:value
+				{ref}
+				{disabled}
+				aria-invalid={status === 'unavailable' ? 'true' : ariaInvalid}
+				class={cn('pr-9', inputClass)}
+				oninput={handleInput}
+			/>
+		{:else}
+			<Input
+				{...restProps}
+				{type}
+				bind:value
+				{ref}
+				{disabled}
+				aria-invalid={status === 'unavailable' ? 'true' : ariaInvalid}
+				class={cn('pr-9', inputClass)}
+				oninput={handleInput}
+			/>
+		{/if}
+
+		{#if status === 'checking'}
+			<Icon
+				icon="lucide:loader-circle"
+				class={`${iconBaseClass} size-4 animate-spin text-muted-foreground`}
+			/>
+		{:else if status === 'available'}
+			<Icon icon="lucide:check" class={`${iconBaseClass} size-4 text-emerald-500`} />
+		{:else if status === 'unavailable'}
+			<Icon icon="lucide:x" class={`${iconBaseClass} size-4 text-destructive`} />
+		{:else if status === 'error'}
+			<Icon icon="lucide:alert-circle" class={`${iconBaseClass} size-4 text-destructive`} />
+		{/if}
+	</div>
+
+	{#if statusMessage}
+		<p class={cn('text-xs font-medium', messageClass)}>{statusMessage}</p>
+	{/if}
+</div>

package/dist/lib/components/slug-input/slug-input.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { AvailabilityResult, EndpointAvailabilityOptions } from './types';
+export declare function endpointAvailabilityCheck(url: string, options?: EndpointAvailabilityOptions): (slug: string) => Promise<AvailabilityResult>;
+import type { ComponentProps } from 'svelte';
+import { Input } from '../ui';
+type BaseInputProps = ComponentProps<typeof Input>;
+interface Props extends Omit<BaseInputProps, 'class' | 'value' | 'type' | 'files'> {
+    type?: BaseInputProps['type'];
+    files?: FileList;
+    class?: string;
+    inputClass?: string;
+    value?: string;
+    slugify?: string | null;
+    debounce?: number;
+    checkAvailability?: (slug: string) => Promise<AvailabilityResult>;
+    successMessage?: string;
+    unavailableMessage?: string;
+    checkingMessage?: string;
+    errorMessage?: string;
+    ariaInvalid?: BaseInputProps['aria-invalid'];
+}
+declare const SlugInput: import("svelte").Component<Props, {}, "value" | "ref" | "files">;
+type SlugInput = ReturnType<typeof SlugInput>;
+export default SlugInput;

package/dist/lib/components/slug-input/types.d.ts

@@ -0,0 +1,13 @@
+export interface AvailabilityResult {
+    available: boolean;
+    message?: string;
+}
+export interface EndpointAvailabilityOptions {
+    key?: string | false;
+    param?: string;
+    method?: 'GET' | 'POST';
+    headers?: Record<string, string>;
+    transform?: (response: Response, data: unknown | null) => AvailabilityResult;
+    fetcher?: typeof fetch;
+    staticParams?: Record<string, string | number | boolean | null | undefined>;
+}

package/dist/lib/components/slug-input/types.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/components/slug-input/utils.d.ts

@@ -0,0 +1 @@
+export declare function buildRequestUrl(url: string, param: string, slug: string, staticParams: Record<string, string | number | boolean | null | undefined> | undefined, method: 'GET' | 'POST' | undefined): string;

package/dist/lib/components/slug-input/utils.js

@@ -0,0 +1,17 @@
+export function buildRequestUrl(url, param, slug, staticParams, method) {
+    if (method && method !== 'GET') {
+        return url;
+    }
+    const [base, existingQuery] = url.split('?');
+    const searchParams = new URLSearchParams(existingQuery ?? '');
+    searchParams.set(param, slug);
+    if (staticParams) {
+        for (const [key, value] of Object.entries(staticParams)) {
+            if (value === undefined || value === null)
+                continue;
+            searchParams.set(key, String(value));
+        }
+    }
+    const queryString = searchParams.toString();
+    return queryString ? `${base}?${queryString}` : base;
+}