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

package/dist/lib/server/standard.d.ts

@@ -0,0 +1,60 @@
+import type { Handle } from '@sveltejs/kit';
+import type { CacheService, Logger, VibesKitConfig } from '../types/kit.ts';
+import { type AccountBillingAdapterOptions } from './services/account-billing-adapter.ts';
+import { type AuthPermissionsAdapterOptions } from './services/auth-permissions-adapter.ts';
+import { type ActiveUserGateOptions, type AuthEnforcementOptions, type PermissionFetchHandleOptions, type UserContextHandleOptions } from './handles/index.ts';
+import { type VibesKitRuntimePort } from './locals.ts';
+type OriginThunk = (runtime: VibesKitRuntimePort) => string | Promise<string>;
+/** A literal, or a thunk over the request's runtime port (declared host values). */
+type OriginOption = string | OriginThunk;
+export interface VibesStandardServicesOptions {
+    authOrigin: OriginOption;
+    accountOrigin: OriginOption;
+    /**
+     * Optional token overrides (a literal or a thunk over the request's runtime
+     * port). When omitted, `VIBES_INTERNAL_SERVICE_TOKEN` is resolved through
+     * `runtime.resolveCredential` by the adapters; there is no empty fallback.
+     */
+    internalServiceToken?: AuthPermissionsAdapterOptions['serviceToken'];
+    authServiceToken?: AuthPermissionsAdapterOptions['serviceToken'];
+    accountServiceToken?: AuthPermissionsAdapterOptions['serviceToken'];
+    authBinding?: AuthPermissionsAdapterOptions['authBinding'];
+    accountBinding?: AccountBillingAdapterOptions['accountBinding'];
+    logger?: Logger;
+    cache?: CacheService;
+}
+export interface VibesStandardAuthOptions {
+    /**
+     * App-specific session handle that populates `event.locals.user`.
+     * Keep this explicit so vibeskit does not depend on one auth provider.
+     */
+    sessionHandle: Handle;
+    authOrigin: OriginOption;
+    accountOrigin: OriginOption;
+    publicRoutes?: string[];
+    redirectTo?: AuthEnforcementOptions['redirectTo'];
+    enforceOnApiRoutes?: boolean;
+    cacheTtlMs?: number;
+    activeUserGate?: false | Partial<ActiveUserGateOptions>;
+    userContext?: false | Partial<UserContextHandleOptions>;
+    permissionFetch?: false | Partial<PermissionFetchHandleOptions>;
+    activeProject?: boolean;
+    activeOrg?: boolean;
+    extraHandles?: Handle[];
+}
+/**
+ * Configure the standard Vibes auth/RBAC + account billing service adapters.
+ *
+ * Use this when a SvelteKit app uses auth-web for identities/RBAC and
+ * account-web for billing, plans, quotas, and credits.
+ */
+export declare function createVibesStandardServices(options: VibesStandardServicesOptions): NonNullable<VibesKitConfig['services']>;
+/**
+ * Return the canonical handle order for a vibes-standard authenticated app.
+ */
+export declare function createVibesStandardAuthHandles(options: VibesStandardAuthOptions): Handle[];
+/**
+ * Compose the canonical handle chain for a vibes-standard authenticated app.
+ */
+export declare function createVibesStandardAuth(options: VibesStandardAuthOptions): Handle;
+export {};

package/dist/lib/server/standard.js

@@ -0,0 +1,100 @@
+import { sequence } from '@sveltejs/kit/hooks';
+import { createAccountBillingAdapter } from "./services/account-billing-adapter.js";
+import { createAuthPermissionsAdapter } from "./services/auth-permissions-adapter.js";
+import { createActiveOrgHandle, createActiveProjectHandle, createActiveUserGateHandle, createAuthEnforcementHandle, createPermissionFetchHandle, createUserContextHandle } from "./handles/index.js";
+import { asVibesKitLocals, requireKitRuntime } from "./locals.js";
+function isOriginThunk(origin) {
+    return typeof origin === 'function';
+}
+/** Adapt a runtime-port origin option to the event-shaped option the handles take. */
+function eventOrigin(origin) {
+    if (!isOriginThunk(origin))
+        return origin;
+    return async (event) => origin(requireKitRuntime(asVibesKitLocals(event.locals)));
+}
+async function resolveEventOrigin(origin, event) {
+    const resolved = isOriginThunk(origin)
+        ? await origin(requireKitRuntime(asVibesKitLocals(event.locals)))
+        : origin;
+    return resolved.replace(/\/$/, '');
+}
+/** Resolve the internal service credential through the runtime port; failure throws. */
+async function resolveInternalServiceToken(runtime) {
+    const resolved = await runtime.resolveCredential({
+        source: 'secret',
+        key: 'VIBES_INTERNAL_SERVICE_TOKEN'
+    });
+    if (!resolved.ok)
+        throw resolved.error;
+    return resolved.value;
+}
+/**
+ * Configure the standard Vibes auth/RBAC + account billing service adapters.
+ *
+ * Use this when a SvelteKit app uses auth-web for identities/RBAC and
+ * account-web for billing, plans, quotas, and credits.
+ */
+export function createVibesStandardServices(options) {
+    const authToken = options.authServiceToken ?? options.internalServiceToken;
+    const accountToken = options.accountServiceToken ?? options.internalServiceToken;
+    const authOptions = {
+        authOrigin: options.authOrigin,
+        serviceToken: authToken ?? resolveInternalServiceToken,
+        authBinding: options.authBinding
+    };
+    const billingOptions = {
+        accountOrigin: options.accountOrigin,
+        serviceToken: accountToken,
+        accountBinding: options.accountBinding
+    };
+    return {
+        logger: options.logger,
+        cache: options.cache,
+        auth: createAuthPermissionsAdapter(authOptions),
+        billing: createAccountBillingAdapter(billingOptions)
+    };
+}
+/**
+ * Return the canonical handle order for a vibes-standard authenticated app.
+ */
+export function createVibesStandardAuthHandles(options) {
+    const { sessionHandle, authOrigin, accountOrigin, publicRoutes = ['/api/health/**'], redirectTo = (event) => resolveEventOrigin(authOrigin, event).then((origin) => `${origin}/signin`), enforceOnApiRoutes = true, cacheTtlMs = 60_000, activeUserGate = {}, userContext = {}, permissionFetch = {}, activeProject = true, activeOrg = true, extraHandles = [] } = options;
+    const handles = [sessionHandle];
+    if (activeUserGate !== false) {
+        handles.push(createActiveUserGateHandle({
+            authOrigin: eventOrigin(authOrigin),
+            publicRoutes,
+            ...activeUserGate
+        }));
+    }
+    handles.push(createAuthEnforcementHandle({
+        publicRoutes,
+        redirectTo,
+        enforceOnApiRoutes
+    }));
+    if (userContext !== false) {
+        handles.push(createUserContextHandle({
+            accountOrigin: eventOrigin(accountOrigin),
+            cacheTtlMs,
+            ...userContext
+        }));
+    }
+    if (activeProject)
+        handles.push(createActiveProjectHandle());
+    if (activeOrg)
+        handles.push(createActiveOrgHandle());
+    if (permissionFetch !== false) {
+        handles.push(createPermissionFetchHandle({
+            authOrigin: eventOrigin(authOrigin),
+            cacheTtlMs,
+            ...permissionFetch
+        }));
+    }
+    return [...handles, ...extraHandles];
+}
+/**
+ * Compose the canonical handle chain for a vibes-standard authenticated app.
+ */
+export function createVibesStandardAuth(options) {
+    return sequence(...createVibesStandardAuthHandles(options));
+}

package/dist/lib/settings/components/DangerZone.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">import SettingsCard from "./SettingsCard.svelte";
+let { title = "Danger zone", description = "These actions are permanent and cannot be undone.", class: className = "", ariaLabel, headerClass = "", contentClass = "", footerClass = "", icon, headerAction, children, footer } = $props();
+const regionLabel = $derived(ariaLabel ?? title);
+</script>
+
+<section aria-label={regionLabel} data-settings-danger-zone>
+	<SettingsCard
+		variant="destructive"
+		{title}
+		{description}
+		class={className}
+		{headerClass}
+		{contentClass}
+		{footerClass}
+		{icon}
+		{headerAction}
+		{footer}
+	>
+		{@render children?.()}
+	</SettingsCard>
+</section>

package/dist/lib/settings/components/DangerZone.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    title?: string;
+    description?: string;
+    class?: string;
+    ariaLabel?: string;
+    headerClass?: string;
+    contentClass?: string;
+    footerClass?: string;
+    /** Optional icon. Defaults to no icon. */
+    icon?: Snippet;
+    /** Optional right-aligned header action snippet. */
+    headerAction?: Snippet;
+    /** Destructive-action UI (rendered inside CardContent). */
+    children?: Snippet;
+    /** Optional footer snippet. */
+    footer?: Snippet;
+}
+declare const DangerZone: import("svelte").Component<Props, {}, "">;
+type DangerZone = ReturnType<typeof DangerZone>;
+export default DangerZone;

package/dist/lib/settings/components/SettingsCard.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "../../components/index.js";
+let { title, description, variant = "default", class: className = "", headerClass = "", contentClass = "", footerClass = "", icon, headerAction, children, footer } = $props();
+const cardClass = $derived(variant === "destructive" ? `border-destructive/40 ${className}`.trim() : className);
+const titleClass = $derived(variant === "destructive" ? "text-destructive" : "");
+</script>
+
+<Card class={cardClass}>
+	{#if title || description || icon || headerAction}
+		<CardHeader class={headerClass}>
+			{#if headerAction}
+				<div class="flex items-start justify-between gap-3">
+					<div class="flex items-start gap-3">
+						{#if icon}
+							<div class="mt-0.5">{@render icon()}</div>
+						{/if}
+						<div class="space-y-1.5">
+							{#if title}
+								<CardTitle class={titleClass}>{title}</CardTitle>
+							{/if}
+							{#if description}
+								<CardDescription>{description}</CardDescription>
+							{/if}
+						</div>
+					</div>
+					<div class="shrink-0">{@render headerAction()}</div>
+				</div>
+			{:else if icon}
+				<div class="flex items-start gap-3">
+					<div class="mt-0.5">{@render icon()}</div>
+					<div class="space-y-1.5">
+						{#if title}
+							<CardTitle class={titleClass}>{title}</CardTitle>
+						{/if}
+						{#if description}
+							<CardDescription>{description}</CardDescription>
+						{/if}
+					</div>
+				</div>
+			{:else}
+				{#if title}
+					<CardTitle class={titleClass}>{title}</CardTitle>
+				{/if}
+				{#if description}
+					<CardDescription>{description}</CardDescription>
+				{/if}
+			{/if}
+		</CardHeader>
+	{/if}
+
+	<CardContent class={contentClass}>
+		{@render children?.()}
+	</CardContent>
+
+	{#if footer}
+		<CardFooter class={footerClass || 'flex justify-end'}>
+			{@render footer()}
+		</CardFooter>
+	{/if}
+</Card>

package/dist/lib/settings/components/SettingsCard.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+type Variant = 'default' | 'destructive';
+interface Props {
+    title?: string;
+    description?: string;
+    variant?: Variant;
+    class?: string;
+    headerClass?: string;
+    contentClass?: string;
+    footerClass?: string;
+    /** Optional icon rendered left of the title (e.g. <Icon icon="lucide:shield" />). */
+    icon?: Snippet;
+    /** Optional right-aligned header action (e.g. action button). */
+    headerAction?: Snippet;
+    /** Default body slot. */
+    children?: Snippet;
+    /** Optional footer slot. */
+    footer?: Snippet;
+}
+declare const SettingsCard: import("svelte").Component<Props, {}, "">;
+type SettingsCard = ReturnType<typeof SettingsCard>;
+export default SettingsCard;

package/dist/lib/settings/components/SettingsFormSection.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">import SettingsCard from "./SettingsCard.svelte";
+let { title, description, variant = "default", class: className = "", headerClass = "", contentClass = "", footerClass = "", method = "POST", action, id, onsubmit, icon, headerAction, children, footer: footerSlot } = $props();
+</script>
+
+<form {method} {action} {id} {onsubmit}>
+	<SettingsCard
+		{title}
+		{description}
+		{variant}
+		class={className}
+		{headerClass}
+		{contentClass}
+		{footerClass}
+		{icon}
+		{headerAction}
+		footer={footerSlot}
+	>
+		{@render children?.()}
+	</SettingsCard>
+</form>

package/dist/lib/settings/components/SettingsFormSection.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { Snippet } from 'svelte';
+type Variant = 'default' | 'destructive';
+type FormMethod = 'get' | 'GET' | 'post' | 'POST' | 'dialog' | 'DIALOG';
+interface Props {
+    title?: string;
+    description?: string;
+    variant?: Variant;
+    class?: string;
+    headerClass?: string;
+    contentClass?: string;
+    footerClass?: string;
+    /** HTML form method. Defaults to 'POST' to match SvelteKit form actions. */
+    method?: FormMethod;
+    /** HTML form action. Optional. */
+    action?: string;
+    /** Form id, useful for label-for references or external submit buttons. */
+    id?: string;
+    /** Submit handler. Receives the SubmitEvent. */
+    onsubmit?: (event: SubmitEvent) => void | Promise<void>;
+    /** Optional icon for the header. */
+    icon?: Snippet;
+    /** Optional right-aligned header action snippet. */
+    headerAction?: Snippet;
+    /** Form fields (rendered inside CardContent). */
+    children?: Snippet;
+    /** Submit button / action row (rendered inside CardFooter). */
+    footer?: Snippet;
+}
+declare const SettingsFormSection: import("svelte").Component<Props, {}, "">;
+type SettingsFormSection = ReturnType<typeof SettingsFormSection>;
+export default SettingsFormSection;

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

@@ -0,0 +1,8 @@
+/**
+ * @vibesdotdev/kit/settings
+ *
+ * Stateless Svelte primitives for recurring settings card/form layouts.
+ */
+export { default as SettingsCard } from './components/SettingsCard.svelte';
+export { default as SettingsFormSection } from './components/SettingsFormSection.svelte';
+export { default as DangerZone } from './components/DangerZone.svelte';

package/dist/lib/settings/index.js

@@ -0,0 +1,8 @@
+/**
+ * @vibesdotdev/kit/settings
+ *
+ * Stateless Svelte primitives for recurring settings card/form layouts.
+ */
+export { default as SettingsCard } from './components/SettingsCard.svelte';
+export { default as SettingsFormSection } from './components/SettingsFormSection.svelte';
+export { default as DangerZone } from './components/DangerZone.svelte';

package/dist/lib/settings/styles.css

@@ -0,0 +1,8 @@
+/*
+ * Tailwind v4 source declaration for consumers — mirrors @vibesdotdev/kit's
+ * styles.css pattern. Apps that @import this file get this package's
+ * components scanned by their Tailwind build, so utility classes used only
+ * inside these components are emitted in the app's CSS bundle (Tailwind
+ * never scans node_modules). Paths resolve relative to this file.
+ */
+@source './';

package/dist/lib/shared-static-assets/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Shared Static Assets
+ *
+ * Single source of truth for brand assets (logos, icons, fonts) used across
+ * all vibes.dev web apps. Deployed as a Cloudflare Worker with Static Assets
+ * binding at assets.vibes.dev.
+ *
+ * Apps should reference these via PUBLIC_VIBES_ASSETS_ORIGIN env var:
+ *   <img src={PUBLIC_VIBES_ASSETS_ORIGIN}/vibes-logo.svg} />
+ */
+export declare const SHARED_ASSETS_VERSION = "1.0.0";
+export declare const ASSET_FILES: {
+    readonly logoSvg: "/vibes-logo.svg";
+    readonly logoPng: "/vibes-logo.png";
+    readonly favicon: "/favicon.svg";
+    readonly faviconDark: "/favicon-dark.svg";
+};

package/dist/lib/shared-static-assets/index.js

@@ -0,0 +1,17 @@
+/**
+ * Shared Static Assets
+ *
+ * Single source of truth for brand assets (logos, icons, fonts) used across
+ * all vibes.dev web apps. Deployed as a Cloudflare Worker with Static Assets
+ * binding at assets.vibes.dev.
+ *
+ * Apps should reference these via PUBLIC_VIBES_ASSETS_ORIGIN env var:
+ *   <img src={PUBLIC_VIBES_ASSETS_ORIGIN}/vibes-logo.svg} />
+ */
+export const SHARED_ASSETS_VERSION = '1.0.0';
+export const ASSET_FILES = {
+    logoSvg: '/vibes-logo.svg',
+    logoPng: '/vibes-logo.png',
+    favicon: '/favicon.svg',
+    faviconDark: '/favicon-dark.svg'
+};

package/dist/lib/stores/user-store.svelte.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Per-component-tree user state.
+ *
+ * The store is never process-global: a shell creates one for itself and
+ * provides it through Svelte context (`provideUserStore`), so two runtimes or
+ * two shells in one process never share a user. Components read it through
+ * `ownUserStore()`, which answers the provided store when one is and a
+ * private unattached store otherwise (the caller's own user simply is not
+ * published to the rest of its tree).
+ */
+/** What kit and its apps read off the signed-in user. */
+export interface VibesUser {
+    id?: string;
+    email?: string;
+    isStaff?: boolean;
+}
+export declare class UserStore {
+    user: VibesUser | null;
+    set(user: VibesUser | null): void;
+    get isStaff(): boolean;
+    get isAuthenticated(): boolean;
+}
+/** A fresh, unattached user store. */
+export declare function createUserStore(): UserStore;
+/** Provide `store` to this component tree. Call during component initialization. */
+export declare function provideUserStore(store?: UserStore): UserStore;
+/** The user store for this component tree, created once and provided to it. */
+export declare function ownUserStore(): UserStore;
+/** The user store to read; compatible accessor for the former module-level export. */
+export declare const userStore: UserStore;
+export default userStore;

package/dist/lib/stores/user-store.svelte.js

@@ -0,0 +1,54 @@
+import { getContext, hasContext, setContext } from 'svelte';
+import { settleNow } from "../attempt.js";
+export class UserStore {
+    user = $state(null);
+    set(user) {
+        this.user = user;
+    }
+    get isStaff() {
+        return this.user?.isStaff ?? false;
+    }
+    get isAuthenticated() {
+        return this.user !== null;
+    }
+}
+const USER_STORE_CONTEXT_KEY = Symbol.for('vibes.kit.user-store');
+/** A fresh, unattached user store. */
+export function createUserStore() {
+    return new UserStore();
+}
+/** Provide `store` to this component tree. Call during component initialization. */
+export function provideUserStore(store = createUserStore()) {
+    setContext(USER_STORE_CONTEXT_KEY, store);
+    return store;
+}
+/** The user store for this component tree, created once and provided to it. */
+export function ownUserStore() {
+    const provided = settleNow(() => hasContext(USER_STORE_CONTEXT_KEY)
+        ? getContext(USER_STORE_CONTEXT_KEY)
+        : undefined);
+    const found = provided.ok ? provided.value : undefined;
+    if (found)
+        return found;
+    // Outside a component tree (no Svelte context) `setContext` throws, so the
+    // caller gets a private store rather than a process-wide one.
+    const created = createUserStore();
+    settleNow(() => setContext(USER_STORE_CONTEXT_KEY, created));
+    return created;
+}
+/** The user store to read; compatible accessor for the former module-level export. */
+export const userStore = {
+    get user() {
+        return ownUserStore().user;
+    },
+    set(user) {
+        ownUserStore().set(user);
+    },
+    get isStaff() {
+        return ownUserStore().isStaff;
+    },
+    get isAuthenticated() {
+        return ownUserStore().isAuthenticated;
+    }
+};
+export default userStore;

package/dist/lib/styles/animations.css

@@ -0,0 +1,65 @@
+/**
+ * Animation utility CLASSES.
+ *
+ * The tokens these classes consume (`--motion-*`, `--transition-*`, `--ease-*`)
+ * and the `[data-vibes-motion]` cascade now live in `./motion-tokens.css`, which
+ * `@vibesdotdev/kit/styles.css` imports — so every kit consumer resolves them
+ * without importing this file.
+ *
+ * Import this file only if you want the utility classes as well. Note that four
+ * of them — `.animate-pulse`, `.animate-spin`, `.transition-colors`,
+ * `.transition-all` — share names with real Tailwind v4 utilities and will win
+ * the cascade over Tailwind's versions, which means `duration-*` / `ease-*`
+ * modifiers stop composing with them. That is why `styles.css` imports the
+ * tokens and not these classes.
+ */
+
+@import './motion-tokens.css';
+
+.animate-fade {
+	animation: fadeIn var(--transition-normal) var(--ease-in-out);
+}
+
+.animate-fade-out {
+	animation: fadeOut var(--transition-fast) var(--ease-in);
+}
+
+.animate-slide-up {
+	animation: slideUp var(--transition-normal) var(--ease-out);
+}
+
+.animate-slide-down {
+	animation: slideDown var(--transition-normal) var(--ease-out);
+}
+
+.animate-scale-in {
+	animation: scaleIn var(--transition-normal) var(--ease-spring);
+}
+
+.animate-pulse {
+	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.animate-spin {
+	animation: spin 1s linear infinite;
+}
+
+/* Transition utilities */
+.transition-fade {
+	transition: opacity var(--transition-normal) var(--ease-in-out);
+}
+
+.transition-colors {
+	transition:
+		color var(--transition-fast) var(--ease-in-out),
+		background-color var(--transition-fast) var(--ease-in-out),
+		border-color var(--transition-fast) var(--ease-in-out);
+}
+
+.transition-transform {
+	transition: transform var(--transition-normal) var(--ease-spring);
+}
+
+.transition-all {
+	transition: all var(--transition-normal) var(--ease-in-out);
+}