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

package/dist/lib/elements/lib/BrandBar.svelte

@@ -0,0 +1,169 @@
+<svelte:options
+	customElement={{
+		tag: 'vibes-brand-bar',
+		shadow: 'open',
+		props: {
+			app: { reflect: true, type: 'String', attribute: 'app' },
+			label: { reflect: true, type: 'String', attribute: 'label' },
+			assetsOrigin: { reflect: true, type: 'String', attribute: 'assets-origin' }
+		}
+	}}
+/>
+
+<script lang="ts">import { KIT_CATALOG_APP_ORIGINS } from "../../config/kit.config.descriptor.js";
+/** Declared catalog default for the assets origin; hosts override via the `assets-origin` attribute. */
+const ASSETS_ORIGIN_DEFAULT = KIT_CATALOG_APP_ORIGINS.production.assets;
+let { app = "app", label, assetsOrigin = ASSETS_ORIGIN_DEFAULT, end } = $props();
+const LABELS = new Map([
+	["git", "Git"],
+	["packages", "Packages"],
+	["docs", "Docs"],
+	["auth", "Auth"],
+	["app", "App"]
+]);
+const resolvedLabel = $derived(label || LABELS.get(app) || app);
+</script>
+
+<div class="bar" role="banner">
+	<a class="brand" href="https://vibes.dev" aria-label="vibes home">
+		<span class="mark" aria-hidden="true" style="--logo-url: url('{assetsOrigin}/vibes-logo.svg')"
+		></span>
+		<span class="word">vibes</span>
+	</a>
+	<span class="sep" aria-hidden="true">/</span>
+	<span class="app">{resolvedLabel}</span>
+	<div class="grow"></div>
+	<nav class="nav" aria-label="vibes services">
+		<a href="https://app.vibes.dev">App</a>
+		<a href="https://git.vibes.dev">Git</a>
+		<a href="https://packages.vibes.dev">Packages</a>
+		<a href="https://docs.vibes.dev">Docs</a>
+	</nav>
+	{#if end}
+		{@render end()}
+	{:else}
+		<!-- Preserve light-DOM projection for the registered Web Component. -->
+		<svelte:element this={'slot'} name="end" />
+	{/if}
+</div>
+
+<style>
+	:host {
+		display: block;
+		position: sticky;
+		top: 0;
+		z-index: 50;
+		font-family: var(
+			--vibes-font-sans,
+			ui-sans-serif,
+			system-ui,
+			-apple-system,
+			'Segoe UI',
+			Roboto,
+			sans-serif
+		);
+	}
+
+	.bar {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		/* h-14 (56px) on mobile, h-16 (64px) sm+, with shadcn-style px scale.
+		 * Matches vibeskit ProductShellHeader. */
+		height: 3.5rem;
+		padding: 0 0.5rem;
+		background: var(--vibes-background, oklch(0.141 0.005 285.823));
+		color: var(--vibes-foreground, oklch(0.985 0 0));
+		border-bottom: 1px solid var(--vibes-border, oklch(1 0 0 / 10%));
+		font-size: 0.875rem;
+		line-height: 1;
+		box-sizing: border-box;
+	}
+	@media (min-width: 640px) {
+		.bar {
+			height: 4rem;
+			padding: 0 1rem;
+			gap: 0.75rem;
+		}
+	}
+	@media (min-width: 768px) {
+		.bar {
+			padding: 0 1.5rem;
+		}
+	}
+	@media (min-width: 1024px) {
+		.bar {
+			padding: 0 2rem;
+		}
+	}
+
+	.brand {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		color: inherit;
+		text-decoration: none;
+		font-weight: 600;
+		letter-spacing: -0.01em;
+		font-size: 1rem;
+	}
+	.brand:hover .word {
+		opacity: 0.85;
+	}
+
+	.mark {
+		display: inline-flex;
+		width: 28px;
+		height: 28px;
+		background-color: currentColor;
+		-webkit-mask: var(--logo-url) no-repeat center / contain;
+		mask: var(--logo-url) no-repeat center / contain;
+		flex-shrink: 0;
+	}
+
+	.word {
+		font-size: 1rem;
+	}
+
+	.sep {
+		opacity: 0.35;
+		font-weight: 400;
+		font-size: 0.95rem;
+	}
+
+	.app {
+		font-weight: 500;
+		text-transform: lowercase;
+		color: var(--vibes-muted-foreground, oklch(0.705 0.015 286.067));
+		font-size: 0.875rem;
+	}
+
+	.grow {
+		flex: 1 1 auto;
+	}
+
+	.nav {
+		display: inline-flex;
+		gap: 0.25rem;
+	}
+	.nav a {
+		color: var(--vibes-muted-foreground, oklch(0.705 0.015 286.067));
+		text-decoration: none;
+		font-size: 0.875rem;
+		padding: 0.375rem 0.75rem;
+		border-radius: var(--vibes-radius-md, 0.5rem);
+		transition:
+			background-color 120ms ease,
+			color 120ms ease;
+	}
+	.nav a:hover {
+		color: var(--vibes-foreground, oklch(0.985 0 0));
+		background: var(--vibes-muted, oklch(0.274 0.006 286.033));
+	}
+
+	@media (max-width: 640px) {
+		.nav {
+			display: none;
+		}
+	}
+</style>

package/dist/lib/elements/lib/BrandBar.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+type AppKey = 'git' | 'packages' | 'docs' | 'auth' | 'app' | string;
+interface Props {
+    /** Identifies the current surface — controls the app label rendered in the bar. */
+    app?: AppKey;
+    /** Override the human-readable label. Defaults derived from `app`. */
+    label?: string;
+    /** Base URL for static assets. Defaults to the declared catalog assets origin. */
+    assetsOrigin?: string;
+    /** Svelte composition for controls rendered at the end of the bar. */
+    end?: Snippet;
+}
+declare const BrandBar: import("svelte").Component<Props, {}, "">;
+type BrandBar = ReturnType<typeof BrandBar>;
+export default BrandBar;

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

@@ -0,0 +1,22 @@
+/**
+ * Environment Implementation Interface
+ *
+ * Defines the contract for environment implementations used by CLI clients
+ * and other consumers that need to resolve API URLs and headers.
+ */
+export interface EnvironmentImplementation {
+    /** Environment ID */
+    readonly id: string;
+    /** Runtime kind identifier */
+    readonly kind?: string;
+    /** Base API URL for this environment */
+    readonly apiUrl: string;
+    /** Get a custom header value */
+    getHeader(name: string): string | undefined;
+    /** Get all custom headers */
+    getHeaders(): Record<string, string>;
+    /** Get an environment variable */
+    getVariable(name: string): string | undefined;
+    /** Get all environment variables */
+    getVariables(): Record<string, string>;
+}

package/dist/lib/environment/index.js

@@ -0,0 +1,7 @@
+/**
+ * Environment Implementation Interface
+ *
+ * Defines the contract for environment implementations used by CLI clients
+ * and other consumers that need to resolve API URLs and headers.
+ */
+export {};

package/dist/lib/errors.d.ts

@@ -0,0 +1,32 @@
+/**
+ * VibesKit Errors: billing refusals in the CapabilityError taxonomy. Each keeps
+ * its class name, fields and HTTP response; `code` and `reason` classify it.
+ */
+import { CapabilityError } from '@vibesdotdev/kernel';
+export declare class SubscriptionRequiredError extends CapabilityError {
+    feature: string;
+    plan: string;
+    upgradeUrl?: string | undefined;
+    constructor(feature: string, plan: string, upgradeUrl?: string | undefined, message?: string);
+    toResponse(): Response;
+}
+export declare class QuotaExceededError extends CapabilityError {
+    feature: string;
+    currentUsage: number;
+    limit: number;
+    resetTime?: Date | undefined;
+    upgradeUrl?: string | undefined;
+    constructor(feature: string, currentUsage: number, limit: number, resetTime?: Date | undefined, upgradeUrl?: string | undefined, message?: string);
+    toResponse(): Response;
+}
+export declare class InsufficientCreditsError extends CapabilityError {
+    balance: number;
+    required: number;
+    upgradeUrl?: string | undefined;
+    constructor(balance: number, required: number, upgradeUrl?: string | undefined, message?: string);
+    toResponse(): Response;
+}
+export declare class BillingServiceUnavailableError extends CapabilityError {
+    constructor(message?: string);
+    toResponse(): Response;
+}

package/dist/lib/errors.js

@@ -0,0 +1,112 @@
+/**
+ * VibesKit Errors: billing refusals in the CapabilityError taxonomy. Each keeps
+ * its class name, fields and HTTP response; `code` and `reason` classify it.
+ */
+import { CapabilityError } from '@vibesdotdev/kernel';
+export class SubscriptionRequiredError extends CapabilityError {
+    feature;
+    plan;
+    upgradeUrl;
+    constructor(feature, plan, upgradeUrl, message) {
+        super(message || `Access to ${feature} requires ${plan} plan or higher`, 'PERMISSION_DENIED', {
+            reason: 'subscription-required'
+        });
+        this.feature = feature;
+        this.plan = plan;
+        this.upgradeUrl = upgradeUrl;
+        this.name = 'SubscriptionRequiredError';
+    }
+    toResponse() {
+        return new Response(JSON.stringify({
+            error: 'Subscription Required',
+            message: this.message,
+            feature: this.feature,
+            requiredPlan: this.plan,
+            upgradeUrl: this.upgradeUrl
+        }), {
+            status: 403,
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        });
+    }
+}
+export class QuotaExceededError extends CapabilityError {
+    feature;
+    currentUsage;
+    limit;
+    resetTime;
+    upgradeUrl;
+    constructor(feature, currentUsage, limit, resetTime, upgradeUrl, message) {
+        super(message || `Quota exceeded for ${feature}`, 'RATE_LIMITED', { reason: 'quota-exceeded' });
+        this.feature = feature;
+        this.currentUsage = currentUsage;
+        this.limit = limit;
+        this.resetTime = resetTime;
+        this.upgradeUrl = upgradeUrl;
+        this.name = 'QuotaExceededError';
+    }
+    toResponse() {
+        return new Response(JSON.stringify({
+            error: 'Quota Exceeded',
+            message: this.message,
+            feature: this.feature,
+            currentUsage: this.currentUsage,
+            limit: this.limit,
+            resetTime: this.resetTime,
+            upgradeUrl: this.upgradeUrl
+        }), {
+            status: 429,
+            headers: {
+                'Content-Type': 'application/json',
+                'Retry-After': this.resetTime
+                    ? Math.ceil((this.resetTime.getTime() - Date.now()) / 1000).toString()
+                    : '60'
+            }
+        });
+    }
+}
+export class InsufficientCreditsError extends CapabilityError {
+    balance;
+    required;
+    upgradeUrl;
+    constructor(balance, required, upgradeUrl, message) {
+        super(message ||
+            `Insufficient credits: balance ${balance.toFixed(2)} < required ${required.toFixed(2)}`, 'PERMISSION_DENIED', { reason: 'insufficient-credits' });
+        this.balance = balance;
+        this.required = required;
+        this.upgradeUrl = upgradeUrl;
+        this.name = 'InsufficientCreditsError';
+    }
+    toResponse() {
+        return new Response(JSON.stringify({
+            error: 'Insufficient Credits',
+            message: this.message,
+            balance: this.balance,
+            required: this.required,
+            upgradeUrl: this.upgradeUrl
+        }), {
+            status: 402,
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        });
+    }
+}
+export class BillingServiceUnavailableError extends CapabilityError {
+    constructor(message = 'Billing service unavailable') {
+        super(message, 'UNAVAILABLE', { reason: 'billing-service-unavailable' });
+        this.name = 'BillingServiceUnavailableError';
+    }
+    toResponse() {
+        return new Response(JSON.stringify({
+            error: 'Billing Service Unavailable',
+            message: this.message
+        }), {
+            status: 503,
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        });
+    }
+}

package/dist/lib/failure-class.d.ts

@@ -0,0 +1,10 @@
+/** Kit's own declared error classes (a test keeps this list complete). */
+export declare const KIT_ERROR_CLASSES: readonly ["APIError", "AuthenticationError", "BillingConfigError", "BillingServiceUnavailableError", "ClientConfigError", "ClientError", "InsufficientCreditsError", "KitRuntimeUnavailableError", "PermissionError", "PermissionFetchUnavailableError", "ProjectAccessUnavailableError", "QuotaExceededError", "RateLimitError", "SidebarProviderMissingError", "SubscriptionRequiredError", "UserContextUnavailableError", "ValidationError", "WritingAssistBoundaryError"];
+/** What an `Error` whose name is not a known class is reported as. */
+export declare const DEFAULT_FAILURE_CLASS = "Error";
+/** What a thrown value that is not an `Error` is reported as. */
+export declare const NON_ERROR_FAILURE_CLASS = "NonErrorThrown";
+/** What a thrown value that cannot be inspected is reported as. */
+export declare const UNREADABLE_FAILURE_CLASS = "UnreadableFailure";
+/** The class of one caught failure. Never throws, whatever was thrown. */
+export declare function failureClass<Thrown>(failure: Thrown): string;

package/dist/lib/failure-class.js

@@ -0,0 +1,110 @@
+import * as z from 'zod/v4';
+import { settleNow } from "./attempt.js";
+/**
+ * The class a caught failure is reported by.
+ *
+ * Kit's failure channel (`kitLogger`) logs the class of a failure, never its
+ * value: a message or a thrown value can carry user content or credentials.
+ * An `Error`'s `name` is writable, so even an identifier-shaped name can carry
+ * a secret (`BearerSecretError`). An `Error` is therefore reported by its
+ * `name` only when that name is in a closed list of known classes (the
+ * standard JavaScript errors, the standard DOMException names, the runtime's
+ * `CapabilityError`, zod's `ZodError` and kit's own declared error classes);
+ * every other `Error` is reported as `Error`. Any other thrown value is
+ * `NonErrorThrown` (its text is never read); a value that cannot be inspected
+ * at all (a revoked Proxy, a throwing `name` getter) is `UnreadableFailure`.
+ */
+/** The standard JavaScript error classes. */
+const STANDARD_ERROR_CLASSES = [
+    'Error',
+    'AggregateError',
+    'EvalError',
+    'RangeError',
+    'ReferenceError',
+    'SyntaxError',
+    'TypeError',
+    'URIError'
+];
+/** The standard DOMException names a fetch, stream, storage or DOM call reports. */
+const DOM_EXCEPTION_NAMES = [
+    'AbortError',
+    'ConstraintError',
+    'DataCloneError',
+    'DataError',
+    'EncodingError',
+    'HierarchyRequestError',
+    'IndexSizeError',
+    'InvalidAccessError',
+    'InvalidCharacterError',
+    'InvalidModificationError',
+    'InvalidNodeTypeError',
+    'InvalidStateError',
+    'NamespaceError',
+    'NetworkError',
+    'NoModificationAllowedError',
+    'NotAllowedError',
+    'NotFoundError',
+    'NotReadableError',
+    'NotSupportedError',
+    'OperationError',
+    'QuotaExceededError',
+    'ReadOnlyError',
+    'SecurityError',
+    'TimeoutError',
+    'TransactionInactiveError',
+    'TypeMismatchError',
+    'URLMismatchError',
+    'UnknownError',
+    'VersionError',
+    'WrongDocumentError'
+];
+/** The framework's typed failure and the schema library's parse failure. */
+const PLATFORM_ERROR_CLASSES = ['CapabilityError', 'ZodError'];
+/** Kit's own declared error classes (a test keeps this list complete). */
+export const KIT_ERROR_CLASSES = [
+    'APIError',
+    'AuthenticationError',
+    'BillingConfigError',
+    'BillingServiceUnavailableError',
+    'ClientConfigError',
+    'ClientError',
+    'InsufficientCreditsError',
+    'KitRuntimeUnavailableError',
+    'PermissionError',
+    'PermissionFetchUnavailableError',
+    'ProjectAccessUnavailableError',
+    'QuotaExceededError',
+    'RateLimitError',
+    'SidebarProviderMissingError',
+    'SubscriptionRequiredError',
+    'UserContextUnavailableError',
+    'ValidationError',
+    'WritingAssistBoundaryError'
+];
+/** Every class name a failure may be reported by. */
+const KNOWN_FAILURE_CLASSES = new Set([
+    ...STANDARD_ERROR_CLASSES,
+    ...DOM_EXCEPTION_NAMES,
+    ...PLATFORM_ERROR_CLASSES,
+    ...KIT_ERROR_CLASSES
+]);
+/** What an `Error` whose name is not a known class is reported as. */
+export const DEFAULT_FAILURE_CLASS = 'Error';
+/** What a thrown value that is not an `Error` is reported as. */
+export const NON_ERROR_FAILURE_CLASS = 'NonErrorThrown';
+/** What a thrown value that cannot be inspected is reported as. */
+export const UNREADABLE_FAILURE_CLASS = 'UnreadableFailure';
+const FailureClassNameSchema = z.string();
+/** The class of one caught failure. Never throws, whatever was thrown. */
+export function failureClass(failure) {
+    const inspected = settleNow(() => failure instanceof Error ? knownClassOf(failure.name) : NON_ERROR_FAILURE_CLASS);
+    // Inspecting the value threw (a revoked Proxy, a throwing getter): report that, not what it threw.
+    return inspected.ok ? inspected.value : UNREADABLE_FAILURE_CLASS;
+}
+/** An Error's name as a reportable class: the name itself only when it is a known class. */
+function knownClassOf(name) {
+    const checked = FailureClassNameSchema.safeParse(name);
+    return checked.success && KNOWN_FAILURE_CLASSES.has(checked.data)
+        ? checked.data
+        : DEFAULT_FAILURE_CLASS;
+}

package/dist/lib/forms/ManifestForm.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">import { useId } from "bits-ui";
+import { untrack } from "svelte";
+import { Button } from "../components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../components/ui/card";
+import { settle, settleNow } from "../attempt.js";
+import { failureClass } from "../failure-class.js";
+import { kitLogger } from "../kit-logger.js";
+import { cn } from "../utils.js";
+import ManifestFormField from "./ManifestFormField.svelte";
+import ManifestFormGroup from "./ManifestFormGroup.svelte";
+import { createManifestFormStore } from "./manifest-form-store.svelte.js";
+import { manifestFormControlId, resolveManifestFormFields, resolveManifestFormGroups } from "./manifest-form.js";
+let { manifest, initialValues = {}, readOnly = false, onSubmit, submitLabel = "Save", cardLayout = false, actions, class: className, id, ...restProps } = $props();
+const generatedId = useId("manifest-form");
+const formId = $derived(id ?? generatedId);
+const form = createManifestFormStore(untrack(() => ({
+	manifest,
+	initialValues
+})));
+const values = $derived(form.values);
+const errors = $derived(form.errors);
+const isSubmitting = $derived(form.isSubmitting);
+const fields = $derived(resolveManifestFormFields(manifest, errors));
+const groups = $derived(resolveManifestFormGroups(manifest, fields));
+let appliedManifest = untrack(() => manifest);
+let appliedInitialValues = untrack(() => serializeInitialValues(initialValues));
+let submissionError = $state("");
+$effect(() => {
+	const nextManifest = manifest;
+	const nextInitialValues = initialValues;
+	const nextInitialValuesKey = serializeInitialValues(nextInitialValues);
+	if (nextManifest === appliedManifest && nextInitialValuesKey === appliedInitialValues) return;
+	appliedManifest = nextManifest;
+	appliedInitialValues = nextInitialValuesKey;
+	form.replaceDefinition(nextManifest, nextInitialValues);
+});
+/** A change key for the initial values; one that cannot be serialized never matches, so it re-applies. */
+function serializeInitialValues(value) {
+	const serialized = settleNow(() => JSON.stringify(value));
+	return serialized.ok ? serialized.value : "";
+}
+async function handleSubmit(event) {
+	event.preventDefault();
+	if (form.isSubmitting || readOnly || !onSubmit) return;
+	form.isSubmitting = true;
+	submissionError = "";
+	const submitted = await settle(async () => {
+		if (!await form.validate()) return;
+		await onSubmit(form.getValues());
+	});
+	form.isSubmitting = false;
+	if (!submitted.ok) {
+		// The person sees a generic message; the failure is reported by class, never by value.
+		kitLogger("kit.manifest-form").warn("Manifest form submit failed", { reason: failureClass(submitted.error) });
+		submissionError = "Unable to save. Please try again.";
+	}
+}
+</script>
+
+{#snippet formContent()}
+	{#if submissionError}
+		<p role="alert">{submissionError}</p>
+	{/if}
+
+	{#each groups as group (group.group.id)}
+		<ManifestFormGroup {group} idPrefix={formId}>
+			{#each group.fields as field (field.key)}
+				{#if field.visible}
+					<ManifestFormField
+						{field}
+						controlId={manifestFormControlId(formId, field.key)}
+						value={values[field.key]}
+						error={errors[field.key]}
+						{readOnly}
+						onValueChange={form.setValue}
+					/>
+				{/if}
+			{/each}
+		</ManifestFormGroup>
+	{/each}
+
+	{#if actions}
+		{@render actions({ values, errors, isSubmitting, submitLabel, reset: form.reset })}
+	{:else}
+		<div class="flex justify-end gap-2 pt-4">
+			<Button type="button" variant="outline" disabled={isSubmitting} onclick={form.reset}>
+				Reset
+			</Button>
+			<Button type="submit" disabled={readOnly || isSubmitting}>
+				{isSubmitting ? 'Saving…' : submitLabel}
+			</Button>
+		</div>
+	{/if}
+{/snippet}
+
+<form
+	id={formId}
+	data-slot="manifest-form"
+	class={cn('manifest-form', className)}
+	{...restProps}
+	onsubmit={handleSubmit}
+>
+	{#if cardLayout}
+		<Card>
+			<CardHeader>
+				<CardTitle><h2>{manifest.name}</h2></CardTitle>
+				{#if manifest.description}
+					<CardDescription>{manifest.description}</CardDescription>
+				{/if}
+			</CardHeader>
+			<CardContent class="flex flex-col gap-6">
+				{@render formContent()}
+			</CardContent>
+		</Card>
+	{:else}
+		<div class="flex flex-col gap-6">
+			{@render formContent()}
+		</div>
+	{/if}
+</form>

package/dist/lib/forms/ManifestForm.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type ManifestFormProps } from './manifest-form.js';
+declare const ManifestForm: import("svelte").Component<ManifestFormProps, {}, "">;
+type ManifestForm = ReturnType<typeof ManifestForm>;
+export default ManifestForm;