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

package/dist/lib/client/status-restricted-fetch.d.ts

@@ -0,0 +1,49 @@
+export interface StatusRestrictedError {
+    code: 'status_restricted';
+    status: 'pending' | 'suspended' | 'banned';
+    message: string;
+    redirect: string;
+}
+/**
+ * The page host the interceptor patches and navigates: its `fetch` and its
+ * `location`. Defaults to the ambient `window`; pass one to name the host.
+ */
+export interface StatusRestrictedHost {
+    fetch: typeof fetch;
+    location: {
+        assign(url: string): void;
+    };
+}
+export interface StatusRestrictedOptions {
+    /**
+     * If provided, called with the parsed error BEFORE the redirect fires.
+     * Return `false` to suppress the redirect (e.g. in tests, or when the
+     * caller wants to handle it manually).
+     */
+    onDetected?: (error: StatusRestrictedError) => boolean | void;
+    /**
+     * Override the redirect mechanism. Defaults to
+     * `window.location.assign(url)`. Useful for tests / SSR-safe builds.
+     */
+    redirect?: (url: string) => void;
+    /** The host to patch and navigate. Defaults to the ambient `window`. */
+    host?: StatusRestrictedHost;
+}
+type FetchFn = (input: RequestInfo | URL, init?: RequestInit) => Promise<Response>;
+/**
+ * Wrap a fetch implementation so any `status_restricted` 403 triggers a
+ * navigation to the referenced auth-app status page. The wrapped fetch
+ * still returns the original response — callers that need to react can
+ * inspect it before the redirect flushes.
+ */
+export declare function withStatusRestrictedRedirect(innerFetch: typeof fetch, options?: StatusRestrictedOptions): typeof fetch;
+export declare function withStatusRestrictedRedirect<TFetch extends FetchFn>(innerFetch: TFetch, options?: StatusRestrictedOptions): TFetch;
+/**
+ * Install a one-shot interceptor on `window.fetch` (or the `host` option's fetch)
+ * that redirects on `status_restricted` 403s. Idempotent — calling it twice is a
+ * no-op. Safe to import from a root `+layout.svelte` as long as it runs
+ * client-side (BROWSER-guard the call if your import resolves on SSR); with no
+ * host available it does nothing.
+ */
+export declare function installStatusRestrictedFetchInterceptor(options?: StatusRestrictedOptions): () => void;
+export {};

package/dist/lib/client/status-restricted-fetch.js

@@ -0,0 +1,117 @@
+/**
+ * Client-side handling for the gate handle's `status_restricted` JSON 403.
+ *
+ * When an app's active-user gate fires on an /api/** request it returns a
+ * structured 403 body:
+ *
+ *   { error: {
+ *       code: 'status_restricted',
+ *       status: 'pending' | 'suspended' | 'banned',
+ *       message: string,
+ *       redirect: string  // absolute URL to the auth app status page
+ *   } }
+ *
+ * Without a client handler, this surfaces as an opaque error — users see a
+ * toast and nothing actionable happens. This module provides two ways to
+ * wire up automatic redirection:
+ *
+ *   1. `withStatusRestrictedRedirect(fetch)` — wraps a specific fetch
+ *      function (e.g. the API client's) so callers that opt in get the
+ *      redirect behavior.
+ *
+ *   2. `installStatusRestrictedFetchInterceptor()` — monkey-patches
+ *      `window.fetch` once per app bootstrap so every fetch call in the
+ *      app benefits. Call this from a top-level client-only module. A host
+ *      that is not `window` is named with the `host` option.
+ *
+ * Both helpers clone the response BEFORE peeking so the caller still sees
+ * the original body if they want to surface a toast / error too.
+ */
+import * as z from 'zod/v4';
+import { settle } from '../attempt.js';
+const StatusRestrictedBodySchema = z.object({
+    error: z.object({
+        code: z.literal('status_restricted'),
+        status: z.enum(['pending', 'suspended', 'banned']),
+        message: z.string().optional().catch(undefined),
+        redirect: z.string()
+    })
+});
+/** The ambient page host, or nothing where there is no `window` (SSR, workers, node). */
+function ambientHost() {
+    return globalThis.window;
+}
+function redirectFor(options) {
+    if (options.redirect)
+        return options.redirect;
+    return (url) => {
+        const host = options.host ?? ambientHost();
+        if (host && url)
+            host.location.assign(url);
+    };
+}
+async function tryReadStatusRestricted(response) {
+    if (response.status !== 403)
+        return null;
+    const contentType = response.headers.get('content-type') ?? '';
+    if (!contentType.includes('application/json'))
+        return null;
+    // Clone so the caller's subsequent `.json()` / `.text()` still works.
+    const read = await settle(async () => response.clone().json());
+    // Best-effort: a non-JSON body despite the header is not a status_restricted payload.
+    if (!read.ok)
+        return null;
+    const parsed = StatusRestrictedBodySchema.safeParse(read.value);
+    if (!parsed.success)
+        return null;
+    const { code, status, message, redirect } = parsed.data.error;
+    return { code, status, message: message ?? 'Account is restricted', redirect };
+}
+/** Copies the optional `preconnect` static of the fetch being wrapped onto its wrapper. */
+function withFetchStatics(wrapped, original) {
+    const target = wrapped;
+    if (original.preconnect)
+        target.preconnect = original.preconnect.bind(original);
+    // SAFETY: `wrapped` forwards every call to `original` with the same arguments and result
+    // type, and the one optional static `FetchWithOptionalPreconnect` names was copied above.
+    return target;
+}
+export function withStatusRestrictedRedirect(innerFetch, options = {}) {
+    const redirect = redirectFor(options);
+    const wrapped = async (input, init) => {
+        const response = await innerFetch(input, init);
+        const detected = await tryReadStatusRestricted(response);
+        if (detected) {
+            const shouldRedirect = options.onDetected?.(detected) !== false;
+            if (shouldRedirect)
+                redirect(detected.redirect);
+        }
+        return response;
+    };
+    return withFetchStatics(wrapped, innerFetch);
+}
+const INSTALLED = Symbol.for('vibes.statusRestrictedFetch.installed');
+/**
+ * Install a one-shot interceptor on `window.fetch` (or the `host` option's fetch)
+ * that redirects on `status_restricted` 403s. Idempotent — calling it twice is a
+ * no-op. Safe to import from a root `+layout.svelte` as long as it runs
+ * client-side (BROWSER-guard the call if your import resolves on SSR); with no
+ * host available it does nothing.
+ */
+export function installStatusRestrictedFetchInterceptor(options = {}) {
+    const host = options.host ?? ambientHost();
+    if (!host)
+        return () => undefined;
+    if (host[INSTALLED])
+        return () => undefined;
+    const original = host.fetch;
+    const wrapped = withFetchStatics(withStatusRestrictedRedirect(original.bind(host), { ...options, host }), original);
+    host.fetch = wrapped;
+    host[INSTALLED] = true;
+    return () => {
+        if (host.fetch === wrapped) {
+            host.fetch = original;
+            delete host[INSTALLED];
+        }
+    };
+}

package/dist/lib/client/types.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Kit app-client types.
+ */
+import { CapabilityError, type CapabilityErrorCode } from '@vibesdotdev/kernel';
+export declare function clientFailureCode(status: number): CapabilityErrorCode;
+export interface AuthConfig {
+    type: 'bearer' | 'apiKey' | 'basic' | 'custom' | 'session' | 'none';
+    credentials?: string;
+    headerName?: string;
+    prefix?: string;
+    provider?: () => Promise<string | null>;
+    tokenProvider?: () => Promise<string | null>;
+    allowSessionCookie?: boolean;
+}
+export interface ClientHooks {
+    beforeRequest?: (request: Request) => Promise<Request> | Request;
+    afterResponse?: (response: Response) => Promise<Response> | Response;
+    onError?: (error: ClientError) => Promise<void> | void;
+}
+export interface ClientConfig {
+    /** Required: the API origin. The client never guesses a default host. */
+    baseUrl: string;
+    fetch?: typeof fetch;
+    auth?: AuthConfig;
+    hooks?: ClientHooks;
+    timeout?: number;
+    debug?: boolean;
+    /** Warn (console) when the OpenAPI spec cannot be loaded. Host-declared; the client never reads process env. */
+    warnOnOasMismatch?: boolean;
+}
+/**
+ * A request body: a raw `BodyInit` sent as given, or any value the client encodes as
+ * JSON (an object, array or scalar).
+ */
+export type RequestBodyInput = BodyInit | number | boolean | null | object;
+export interface RequestOptions {
+    path: string;
+    method: string;
+    params?: Record<string, string | number | boolean>;
+    query?: Record<string, string | number | boolean | string[] | undefined>;
+    body?: RequestBodyInput;
+    headers?: Record<string, string>;
+    timeout?: number;
+}
+export declare class ClientConfigError extends CapabilityError {
+    constructor(message: string);
+}
+/**
+ * The part of a failed request a diagnostic may carry: which call it was. Headers,
+ * bodies, query strings and credentials are never part of it.
+ */
+export interface ClientErrorRequest {
+    readonly method: string;
+    readonly path: string;
+}
+export declare class ClientError extends CapabilityError {
+    readonly status: number;
+    readonly response?: Response | undefined;
+    /** Which call failed (method and path only); the request's headers, body and query are not kept. */
+    readonly request?: ClientErrorRequest;
+    constructor(message: string, status: number, response?: Response | undefined, request?: RequestOptions | ClientErrorRequest);
+}

package/dist/lib/client/types.js

@@ -0,0 +1,48 @@
+/**
+ * Kit app-client types.
+ */
+import { CapabilityError } from '@vibesdotdev/kernel';
+export function clientFailureCode(status) {
+    if (status === 400 || status === 422)
+        return 'INVALID_INPUT';
+    if (status === 401)
+        return 'AUTH_REQUIRED';
+    if (status === 403)
+        return 'PERMISSION_DENIED';
+    if (status === 404)
+        return 'NOT_FOUND';
+    if (status === 408 || status === 504)
+        return 'TIMEOUT';
+    if (status === 409)
+        return 'CONFLICT';
+    if (status === 429)
+        return 'RATE_LIMITED';
+    if (status === 0 || status >= 500)
+        return 'UNAVAILABLE';
+    return 'INTERNAL';
+}
+export class ClientConfigError extends CapabilityError {
+    constructor(message) {
+        super(message, 'INVALID_INPUT', { reason: 'client-config-invalid' });
+        this.name = 'ClientConfigError';
+    }
+}
+/** Reduce the caller's request to the value-free summary a failure keeps. */
+function summarizeRequest(request) {
+    const [path] = request.path.split(/[?#]/);
+    return { method: request.method, path };
+}
+export class ClientError extends CapabilityError {
+    status;
+    response;
+    /** Which call failed (method and path only); the request's headers, body and query are not kept. */
+    request;
+    constructor(message, status, response, request) {
+        super(message, clientFailureCode(status), { reason: 'client-request-failed' });
+        this.status = status;
+        this.response = response;
+        this.name = 'ClientError';
+        if (request)
+            this.request = summarizeRequest(request);
+    }
+}

package/dist/lib/common/index.d.ts

@@ -0,0 +1 @@
+export { normalizeSlug, slugSchema } from './slug.js';

package/dist/lib/common/index.js

@@ -0,0 +1 @@
+export { normalizeSlug, slugSchema } from './slug.js';

package/dist/lib/common/slug.d.ts

@@ -0,0 +1,9 @@
+import * as z from 'zod/v4';
+/**
+ * Normalize text into a URL-safe slug: strips diacritics, lowercases, replaces
+ * non-alphanumerics with hyphens, compresses and trims hyphens, and optionally
+ * limits to `maxLength` preserving whole segments. Empty results are `untitled`.
+ */
+export declare function normalizeSlug(value: string, maxLength?: number): string;
+/** Slug schema - URL-safe identifier. */
+export declare const slugSchema: z.ZodString;

package/dist/lib/common/slug.js

@@ -0,0 +1,37 @@
+import * as z from 'zod/v4';
+/**
+ * Normalize text into a URL-safe slug: strips diacritics, lowercases, replaces
+ * non-alphanumerics with hyphens, compresses and trims hyphens, and optionally
+ * limits to `maxLength` preserving whole segments. Empty results are `untitled`.
+ */
+export function normalizeSlug(value, maxLength) {
+    let normalized = value
+        .normalize('NFKD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/-{2,}/g, '-')
+        .replace(/^-+|-+$/g, '');
+    if (!normalized) {
+        return 'untitled';
+    }
+    if (maxLength !== undefined && normalized.length > maxLength) {
+        if (maxLength < 3) {
+            return 'untitled';
+        }
+        const sliced = normalized.slice(0, maxLength);
+        const lastHyphen = sliced.lastIndexOf('-');
+        normalized = lastHyphen > 0 ? sliced.slice(0, lastHyphen) : sliced;
+        normalized = normalized.replace(/-+$/, '');
+        if (!normalized) {
+            return 'untitled';
+        }
+    }
+    return normalized;
+}
+/** Slug schema - URL-safe identifier. */
+export const slugSchema = z
+    .string()
+    .min(1)
+    .max(100)
+    .regex(/^[a-z0-9]+(?:-[a-z0-9]+)*$/, 'Must be a valid URL slug (lowercase letters, numbers, hyphens)');

package/dist/lib/components/a11y/MotionPreferenceRoot.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">import { onMount, untrack } from "svelte";
+import { createMotionPreferenceController, provideMotionPreferenceController } from "./motion-preference.js";
+let { children, initialMode = "system", controller: suppliedController, class: className = "" } = $props();
+const controller = provideMotionPreferenceController(untrack(() => suppliedController ?? createMotionPreferenceController(initialMode)));
+const { mode, resolved, systemReduced } = controller;
+onMount(() => {
+	const query = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+	if (!query) return;
+	const update = (matches) => controller.setSystemReduced(matches);
+	const onChange = (event) => update(event.matches);
+	update(query.matches);
+	query.addEventListener("change", onChange);
+	return () => query.removeEventListener("change", onChange);
+});
+</script>
+
+<div
+	class={`vibes-motion-root ${className}`}
+	data-vibes-motion={$resolved}
+	data-vibes-motion-mode={$mode}
+	data-vibes-system-reduced={$systemReduced ? 'true' : 'false'}
+>
+	{@render children()}
+</div>

package/dist/lib/components/a11y/MotionPreferenceRoot.svelte.d.ts

@@ -0,0 +1,12 @@
+import { type Snippet } from 'svelte';
+import { type MotionMode, type MotionPreferenceController } from './motion-preference.ts';
+interface Props {
+    children: Snippet;
+    initialMode?: MotionMode;
+    /** Product-owned controller; persistence remains outside the view layer. */
+    controller?: MotionPreferenceController;
+    class?: string;
+}
+declare const MotionPreferenceRoot: import("svelte").Component<Props, {}, "">;
+type MotionPreferenceRoot = ReturnType<typeof MotionPreferenceRoot>;
+export default MotionPreferenceRoot;

package/dist/lib/components/a11y/SkipLink.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">let { targetId = "main-content", label = "Skip to main content", class: className = "" } = $props();
+function handleClick(event) {
+	event.preventDefault();
+	const target = document.getElementById(targetId);
+	if (target) {
+		// Set tabindex to -1 to make it focusable if not already
+		if (!target.hasAttribute("tabindex")) {
+			target.setAttribute("tabindex", "-1");
+		}
+		// Focus the element
+		target.focus({ preventScroll: false });
+		// Respect reduced motion preferences
+		const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+		target.scrollIntoView({
+			behavior: prefersReducedMotion ? "auto" : "smooth",
+			block: "start"
+		});
+	}
+}
+// Global keyboard shortcut: Alt+Shift+S (avoids conflicts with screen reader shortcuts)
+$effect(() => {
+	function handleKeydown(event) {
+		if (event.altKey && event.shiftKey && event.key.toLowerCase() === "s") {
+			handleClick(event);
+		}
+	}
+	window.addEventListener("keydown", handleKeydown);
+	return () => window.removeEventListener("keydown", handleKeydown);
+});
+</script>
+
+<!--
+  Skip link is visually hidden by default but appears when focused.
+  This allows keyboard users to bypass navigation and go straight to content.
+-->
+<a href={'#' + targetId} class="skip-link {className}" onclick={handleClick}>
+	{label}
+</a>
+
+<style>
+	/*
+	 * Brute-force visually-hidden pattern. `top: -100%` (the previous
+	 * approach) is unreliable — when the link's nearest positioned
+	 * ancestor is auto-sized or a flex item, "-100%" resolves to a value
+	 * close to zero and the link leaks into the visible layout. Using
+	 * `left: -10000px` plus a 1x1 clipped box keeps the link
+	 * off-screen regardless of any ancestor sizing. Screen readers still
+	 * see the link in the accessibility tree.
+	 */
+	.skip-link {
+		position: absolute;
+		left: -10000px;
+		top: auto;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		clip: rect(0 0 0 0);
+		clip-path: inset(50%);
+		white-space: nowrap;
+
+		/* Visible-state styling — loaded up front so focused state has no FOUC. */
+		z-index: 9999;
+		padding: 0.75rem 1.5rem;
+		/* These tokens are oklch colors, not the bare HSL channel triplets the
+		   `hsl(var(--x))` idiom expects — `hsl(oklch(...))` is invalid, so every
+		   one of these declarations used to be dropped and the skip link rendered
+		   unstyled. Consume the tokens directly. */
+		background-color: var(--background, #fff);
+		color: var(--foreground, #111827);
+		border: 2px solid var(--ring, #2563eb);
+		border-radius: var(--radius, 0.5rem);
+		font-weight: 500;
+		text-decoration: none;
+		box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+	}
+
+	.skip-link:focus,
+	.skip-link:focus-visible {
+		position: fixed;
+		left: 1rem;
+		top: 1rem;
+		width: auto;
+		height: auto;
+		overflow: visible;
+		clip: auto;
+		clip-path: none;
+		white-space: normal;
+		/* Was two declarations: an invalid `hsl(var(--ring))` followed by a
+		   hardcoded blue that silently won, so the skip link's focus ring ignored
+		   the theme. One declaration, themed, with the same 4.5:1 blue as the
+		   fallback when no token is present. */
+		outline: 3px solid var(--ring, #2563eb);
+		outline-offset: 2px;
+	}
+</style>

package/dist/lib/components/a11y/SkipLink.svelte.d.ts

@@ -0,0 +1,21 @@
+/**
+ * SkipLink - Accessibility component for keyboard navigation
+ * Allows keyboard users to skip navigation and jump to main content
+ *
+ * Usage:
+ * 1. Place at the very beginning of <body> or layout
+ * 2. Set targetId to match the id of your main content container
+ * 3. The link appears when focused via keyboard (Tab key)
+ * 4. Activate with Alt+S keyboard shortcut from anywhere
+ */
+interface Props {
+    /** ID of the target element to skip to */
+    targetId?: string;
+    /** Text label for the skip link */
+    label?: string;
+    /** Additional CSS classes */
+    class?: string;
+}
+declare const SkipLink: import("svelte").Component<Props, {}, "">;
+type SkipLink = ReturnType<typeof SkipLink>;
+export default SkipLink;

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

@@ -0,0 +1,3 @@
+export { default as SkipLink } from './SkipLink.svelte';
+export { default as MotionPreferenceRoot } from './MotionPreferenceRoot.svelte';
+export { createMotionPreferenceController, getMotionPreferenceController, getOptionalMotionPreferenceController, isMotionMode, resolveMotionPreference, type MotionMode, type ResolvedMotionMode, type MotionPreferenceController } from './motion-preference.ts';

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

@@ -0,0 +1,4 @@
+// Accessibility components
+export { default as SkipLink } from './SkipLink.svelte';
+export { default as MotionPreferenceRoot } from './MotionPreferenceRoot.svelte';
+export { createMotionPreferenceController, getMotionPreferenceController, getOptionalMotionPreferenceController, isMotionMode, resolveMotionPreference } from "./motion-preference.js";

package/dist/lib/components/a11y/motion-preference.d.ts

@@ -0,0 +1,24 @@
+import { type Readable, type Writable } from 'svelte/store';
+export type MotionMode = 'system' | 'reduced' | 'off';
+export type ResolvedMotionMode = 'full' | 'reduced' | 'off';
+/** A persisted motion preference as read back from storage: absent, or any string. */
+type StoredMotionMode = string | null | undefined;
+export declare function isMotionMode(value: StoredMotionMode): value is MotionMode;
+export interface MotionPreferenceController {
+    readonly mode: Writable<MotionMode>;
+    readonly systemReduced: Writable<boolean>;
+    readonly resolved: Readable<ResolvedMotionMode>;
+    setMode(mode: MotionMode): void;
+    setSystemReduced(reduced: boolean): void;
+}
+/**
+ * Resolve an explicit preference without allowing it to defeat an operating-
+ * system reduced-motion request. `system` follows the device, `reduced` is a
+ * user-selected floor, and `off` removes non-essential motion altogether.
+ */
+export declare function resolveMotionPreference(mode: MotionMode, systemReduced: boolean): ResolvedMotionMode;
+export declare function createMotionPreferenceController(initialMode?: MotionMode): MotionPreferenceController;
+export declare function provideMotionPreferenceController(controller: MotionPreferenceController): MotionPreferenceController;
+export declare function getMotionPreferenceController(): MotionPreferenceController;
+export declare function getOptionalMotionPreferenceController(): MotionPreferenceController | undefined;
+export {};

package/dist/lib/components/a11y/motion-preference.js

@@ -0,0 +1,48 @@
+import { derived, writable } from 'svelte/store';
+import { getContext, setContext } from 'svelte';
+export function isMotionMode(value) {
+    return value === 'system' || value === 'reduced' || value === 'off';
+}
+const MOTION_PREFERENCE_CONTEXT = Symbol('vibes.motion-preference');
+/**
+ * Resolve an explicit preference without allowing it to defeat an operating-
+ * system reduced-motion request. `system` follows the device, `reduced` is a
+ * user-selected floor, and `off` removes non-essential motion altogether.
+ */
+export function resolveMotionPreference(mode, systemReduced) {
+    if (mode === 'off')
+        return 'off';
+    if (mode === 'reduced' || systemReduced)
+        return 'reduced';
+    return 'full';
+}
+export function createMotionPreferenceController(initialMode = 'system') {
+    const mode = writable(initialMode);
+    const systemReduced = writable(false);
+    const resolved = derived([mode, systemReduced], ([$mode, $systemReduced]) => resolveMotionPreference($mode, $systemReduced));
+    return {
+        mode,
+        systemReduced,
+        resolved,
+        setMode(nextMode) {
+            mode.set(nextMode);
+        },
+        setSystemReduced(reduced) {
+            systemReduced.set(reduced);
+        }
+    };
+}
+export function provideMotionPreferenceController(controller) {
+    setContext(MOTION_PREFERENCE_CONTEXT, controller);
+    return controller;
+}
+export function getMotionPreferenceController() {
+    const controller = getContext(MOTION_PREFERENCE_CONTEXT);
+    if (!controller) {
+        throw new Error('Motion preference controls require a parent <MotionPreferenceRoot>.');
+    }
+    return controller;
+}
+export function getOptionalMotionPreferenceController() {
+    return getContext(MOTION_PREFERENCE_CONTEXT);
+}