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

package/dist/schemas/motion-frame.js

@@ -0,0 +1,86 @@
+/**
+ * Motion Frame Schema
+ *
+ * A `Frame` is a single **decoded** raster — the unit of input for
+ * `media/motion` analysis. Motion analysis operates on a *sequence* of these
+ * (e.g. successive screenshots, or frames pulled from a clip by a decoder),
+ * not on encoded bytes: decoding/transcoding is `media/capture`'s concern,
+ * perception is this kind's.
+ *
+ * Frames carry raw pixel bytes plus geometry. Single-channel (luma) frames
+ * are analysed directly; 3-/4-channel frames are reduced to luminance
+ * (0.299R + 0.587G + 0.114B) before analysis, because human motion-energy
+ * detectors (V1/MT) are overwhelmingly luminance-driven and that is the
+ * signal the passage's coherent-drift carrier lives in.
+ */
+import * as z from 'zod/v4';
+import { CapabilityError } from '@vibesdotdev/kernel';
+import { attemptSync } from "../utils/attempt.js";
+export const MAX_FRAME_PIXELS = 40_000_000;
+/**
+ * Accepted pixel-buffer types. Canvas `ImageData` yields `Uint8ClampedArray`;
+ * native/decoder paths yield `Uint8Array`. Both are byte-addressable rasters.
+ */
+export const PixelBufferSchema = z.union([
+    z.instanceof(Uint8Array),
+    z.instanceof(Uint8ClampedArray)
+]);
+/**
+ * Channel layout of a frame's pixel buffer.
+ *
+ * - `1` — luma / grayscale, one byte per pixel.
+ * - `3` — packed RGB, three bytes per pixel.
+ * - `4` — packed RGBA (alpha ignored for luma), four bytes per pixel.
+ */
+export const FrameChannelsSchema = z.union([z.literal(1), z.literal(3), z.literal(4)]);
+/**
+ * A single decoded frame.
+ *
+ * `data.length` must be at least `width * height * channels`. Extra trailing
+ * bytes (row padding / stride) are tolerated but not interpreted — callers
+ * with strided buffers should repack to tight rows first.
+ */
+export const FrameSchema = z.object({
+    /** Raw pixel bytes, row-major, top-left origin. */
+    data: PixelBufferSchema,
+    /** Pixel width. */
+    width: z.number().int().positive(),
+    /** Pixel height. */
+    height: z.number().int().positive(),
+    /** Channel layout. Defaults to single-channel luma. */
+    channels: FrameChannelsSchema.default(1),
+    /** Capture timestamp (epoch ms), when known. Used only for reporting. */
+    timestampMs: z.number().nonnegative().optional()
+}).superRefine((frame, ctx) => {
+    const pixels = frame.width * frame.height;
+    if (!Number.isSafeInteger(pixels) || pixels > MAX_FRAME_PIXELS) {
+        ctx.addIssue({ code: 'custom', message: 'Frame pixel limit exceeded.' });
+    }
+    else if (frame.data.length < pixels * frame.channels) {
+        ctx.addIssue({ code: 'custom', message: 'Frame buffer is insufficient.' });
+    }
+});
+/**
+ * An ordered sequence of frames. Temporal analyses (`temporalStats`,
+ * `motionEnergy`) require at least two frames; pairwise analyses
+ * (`frameDiff`, `opticalFlow`) take exactly two.
+ */
+export const FrameSequenceSchema = z.array(FrameSchema).min(2).superRefine((frames, ctx) => {
+    const first = frames[0];
+    if (first && frames.some(frame => frame.width !== first.width || frame.height !== first.height)) {
+        ctx.addIssue({ code: 'custom', message: 'Sequence geometry differs.' });
+    }
+});
+/** Discard schema diagnostics and thrown property access: refusals never carry rejected values. */
+export function parseMotionInput(schema, value, options = false) {
+    const parsed = attemptSync(() => schema.safeParse(value));
+    if (!parsed.ok)
+        throw motionInputRefusal(options);
+    if (!parsed.value.success)
+        throw motionInputRefusal(options);
+    return parsed.value.data;
+}
+function motionInputRefusal(options) {
+    return new CapabilityError(options ? 'Motion analysis options are invalid.' : 'Motion frames are invalid.', 'INVALID_INPUT', { reason: options ? 'media-motion-options-invalid' : 'media-motion-frame-invalid', retryable: false });
+}
+//# sourceMappingURL=motion-frame.js.map

package/dist/schemas/motion-frame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion-frame.js","sourceRoot":"","sources":["../../src/schemas/motion-frame.ts"],"names":[],"mappings":"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"}

package/dist/schemas/opaque-id.d.ts

@@ -0,0 +1,10 @@
+import * as z from 'zod/v4';
+/**
+ * An artifact, revision, file or share id: an opaque token of 1 to 256
+ * characters that can never act as a path or URL. `/`, `\`, `?`, `#`, `%`,
+ * whitespace and control characters are refused, and `.` and `..` are never a
+ * valid id, so an id interpolates into an owner's route as it is.
+ */
+export declare const OpaqueMediaIdSchema: z.ZodString;
+export type OpaqueMediaId = z.infer<typeof OpaqueMediaIdSchema>;
+//# sourceMappingURL=opaque-id.d.ts.map

package/dist/schemas/opaque-id.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"opaque-id.d.ts","sourceRoot":"","sources":["../../src/schemas/opaque-id.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,CAAC,MAAM,QAAQ,CAAC;AAW5B;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,aAMoD,CAAC;AAErF,MAAM,MAAM,aAAa,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,mBAAmB,CAAC,CAAC"}

package/dist/schemas/opaque-id.js

@@ -0,0 +1,24 @@
+import * as z from 'zod/v4';
+/** Whether any character is an ASCII control character (U+0000 to U+001F, U+007F). */
+function hasControlCharacter(text) {
+    for (const character of text) {
+        const code = character.charCodeAt(0);
+        if (code <= 0x1f || code === 0x7f)
+            return true;
+    }
+    return false;
+}
+/**
+ * An artifact, revision, file or share id: an opaque token of 1 to 256
+ * characters that can never act as a path or URL. `/`, `\`, `?`, `#`, `%`,
+ * whitespace and control characters are refused, and `.` and `..` are never a
+ * valid id, so an id interpolates into an owner's route as it is.
+ */
+export const OpaqueMediaIdSchema = z
+    .string()
+    .min(1)
+    .max(256)
+    .regex(/^[^\s/\\?#%]+$/u, 'Ids are opaque tokens: no path, query, escape or whitespace characters')
+    .refine((id) => !hasControlCharacter(id), 'Ids carry no control characters')
+    .refine((id) => id !== '.' && id !== '..', 'Ids are never a relative path segment');
+//# sourceMappingURL=opaque-id.js.map

package/dist/schemas/opaque-id.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"opaque-id.js","sourceRoot":"","sources":["../../src/schemas/opaque-id.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,CAAC,MAAM,QAAQ,CAAC;AAE5B,sFAAsF;AACtF,SAAS,mBAAmB,CAAC,IAAY;IACxC,KAAK,MAAM,SAAS,IAAI,IAAI,EAAE,CAAC;QAC9B,MAAM,IAAI,GAAG,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;QACrC,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,KAAK,IAAI;YAAE,OAAO,IAAI,CAAC;IAChD,CAAC;IACD,OAAO,KAAK,CAAC;AACd,CAAC;AAED;;;;;GAKG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC;KAClC,MAAM,EAAE;KACR,GAAG,CAAC,CAAC,CAAC;KACN,GAAG,CAAC,GAAG,CAAC;KACR,KAAK,CAAC,iBAAiB,EAAE,wEAAwE,CAAC;KAClG,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,mBAAmB,CAAC,EAAE,CAAC,EAAE,iCAAiC,CAAC;KAC3E,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,EAAE,KAAK,IAAI,EAAE,uCAAuC,CAAC,CAAC"}

package/dist/schemas/sharing-state.d.ts

@@ -0,0 +1,43 @@
+import * as z from 'zod/v4';
+export declare const sharingEntrySchema: z.ZodObject<{
+    links: z.ZodDefault<z.ZodArray<z.ZodObject<{
+        id: z.ZodString;
+        token: z.ZodString;
+        shareUrl: z.ZodString;
+        mediaItemId: z.ZodString;
+        label: z.ZodNullable<z.ZodString>;
+        expiresAt: z.ZodNullable<z.ZodString>;
+        revokedAt: z.ZodNullable<z.ZodString>;
+        maxDownloads: z.ZodNullable<z.ZodNumber>;
+        downloadCount: z.ZodNumber;
+        lastAccessedAt: z.ZodNullable<z.ZodString>;
+        createdAt: z.ZodString;
+        updatedAt: z.ZodString;
+    }, z.core.$strip>>>;
+    loading: z.ZodDefault<z.ZodBoolean>;
+    error: z.ZodDefault<z.ZodNullable<z.ZodString>>;
+    loaded: z.ZodDefault<z.ZodBoolean>;
+}, z.core.$strip>;
+export declare const sharingSnapshotSchema: z.ZodRecord<z.ZodString, z.ZodObject<{
+    links: z.ZodDefault<z.ZodArray<z.ZodObject<{
+        id: z.ZodString;
+        token: z.ZodString;
+        shareUrl: z.ZodString;
+        mediaItemId: z.ZodString;
+        label: z.ZodNullable<z.ZodString>;
+        expiresAt: z.ZodNullable<z.ZodString>;
+        revokedAt: z.ZodNullable<z.ZodString>;
+        maxDownloads: z.ZodNullable<z.ZodNumber>;
+        downloadCount: z.ZodNumber;
+        lastAccessedAt: z.ZodNullable<z.ZodString>;
+        createdAt: z.ZodString;
+        updatedAt: z.ZodString;
+    }, z.core.$strip>>>;
+    loading: z.ZodDefault<z.ZodBoolean>;
+    error: z.ZodDefault<z.ZodNullable<z.ZodString>>;
+    loaded: z.ZodDefault<z.ZodBoolean>;
+}, z.core.$strip>>;
+export type SharingEntry = z.infer<typeof sharingEntrySchema>;
+export type SharingSnapshot = z.infer<typeof sharingSnapshotSchema>;
+export declare function emptySharingEntry(): SharingEntry;
+//# sourceMappingURL=sharing-state.d.ts.map

package/dist/schemas/sharing-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sharing-state.d.ts","sourceRoot":"","sources":["../../src/schemas/sharing-state.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,CAAC,MAAM,QAAQ,CAAC;AAG5B,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;iBAK7B,CAAC;AACH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;kBAA2C,CAAC;AAC9E,MAAM,MAAM,YAAY,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAC9D,MAAM,MAAM,eAAe,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAEpE,wBAAgB,iBAAiB,IAAI,YAAY,CAAyC"}

package/dist/schemas/sharing-state.js

@@ -0,0 +1,11 @@
+import * as z from 'zod/v4';
+import { shareLinkSchema } from "../uploads/schemas/shares.js";
+export const sharingEntrySchema = z.object({
+    links: z.array(shareLinkSchema).default([]),
+    loading: z.boolean().default(false),
+    error: z.string().nullable().default(null),
+    loaded: z.boolean().default(false)
+});
+export const sharingSnapshotSchema = z.record(z.string(), sharingEntrySchema);
+export function emptySharingEntry() { return sharingEntrySchema.parse({}); }
+//# sourceMappingURL=sharing-state.js.map

package/dist/schemas/sharing-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sharing-state.js","sourceRoot":"","sources":["../../src/schemas/sharing-state.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,CAAC,MAAM,QAAQ,CAAC;AAC5B,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAE/D,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,CAAC,MAAM,CAAC;IAC1C,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC;IAC3C,OAAO,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC;IACnC,KAAK,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;IAC1C,MAAM,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC;CAClC,CAAC,CAAC;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,EAAE,kBAAkB,CAAC,CAAC;AAI9E,MAAM,UAAU,iBAAiB,KAAmB,OAAO,kBAAkB,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC"}

package/dist/svelte/CaptureLoader.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { onDestroy, onMount, type Snippet } from 'svelte';
+	import {
+		createMediaCaptureState, provideMediaCaptureState,
+		type MediaCaptureState, type MediaCaptureStateInitOptions
+	} from './state.svelte.js';
+
+	type Props = MediaCaptureStateInitOptions & {
+		state?: MediaCaptureState;
+		disposeOnDestroy?: boolean;
+		children?: Snippet;
+	};
+
+	let {
+		providerId,
+		runtime,
+		state = createMediaCaptureState(),
+		disposeOnDestroy = true,
+		children
+	}: Props = $props();
+
+	provideMediaCaptureState(() => state);
+	onMount(() => { void state.init({ providerId, runtime }); });
+	onDestroy(() => {
+		if (disposeOnDestroy) state.dispose();
+	});
+</script>
+
+{@render children?.()}

package/dist/svelte/CaptureLoader.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type Snippet } from 'svelte';
+import { type MediaCaptureState, type MediaCaptureStateInitOptions } from './state.svelte.ts';
+type Props = MediaCaptureStateInitOptions & {
+    state?: MediaCaptureState;
+    disposeOnDestroy?: boolean;
+    children?: Snippet;
+};
+declare const CaptureLoader: import("svelte").Component<Props, {}, "">;
+type CaptureLoader = ReturnType<typeof CaptureLoader>;
+export default CaptureLoader;
+//# sourceMappingURL=CaptureLoader.svelte.d.ts.map

package/dist/svelte/CaptureLoader.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaptureLoader.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/CaptureLoader.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAsB,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC1D,OAAO,EAEL,KAAK,iBAAiB,EAAE,KAAK,4BAA4B,EACzD,MAAM,mBAAmB,CAAC;AAG3B,KAAK,KAAK,GAAG,4BAA4B,GAAG;IAC3C,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAyBH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/svelte/CapturePanel.svelte

@@ -0,0 +1,189 @@
+<script lang="ts">
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import * as Card from '@vibesdotdev/kit/components/ui/card';
+	import * as Select from '@vibesdotdev/kit/components/ui/select';
+	import { Label } from '@vibesdotdev/kit/components/ui/label';
+	import { Icon } from '@vibesdotdev/kit/components';
+	import type { CaptureSource } from '../schemas/capture-options.js';
+	import { useMediaCaptureState, type MediaCaptureState, type MediaCaptureEntry } from './state.svelte.js';
+	import { captureFileName, captureMimeType } from './runtime.js';
+	import { onMount } from 'svelte';
+
+	interface Props {
+		title?: string;
+		description?: string;
+		showHeader?: boolean;
+		providerLabel?: string;
+		state?: MediaCaptureState;
+	}
+
+	let {
+		title = 'Capture',
+		description = 'Capture media from a runtime-selected provider',
+		showHeader = true,
+		providerLabel,
+		state: captureState = useMediaCaptureState()
+	}: Props = $props();
+	const selected = $derived(
+		captureState.captures.find(
+			(capture: MediaCaptureEntry) => capture.id === captureState.selectedCaptureId
+		) ?? captureState.captures[0] ?? null
+	);
+	const selectedMimeType = $derived(selected ? captureMimeType(selected.format) : null);
+	let modKey = $state('Ctrl');
+
+	onMount(() => {
+		const platform = navigator.platform || '';
+		modKey = /Mac|iPhone|iPad|iPod/i.test(platform) ? 'Cmd' : 'Ctrl';
+		const onKeyDown = (event: KeyboardEvent) => {
+			if ((event.metaKey || event.ctrlKey) && event.shiftKey && event.key.toLowerCase() === 's') {
+				event.preventDefault();
+				void captureState.capture();
+			}
+		};
+		window.addEventListener('keydown', onKeyDown);
+		return () => window.removeEventListener('keydown', onKeyDown);
+	});
+</script>
+
+<div class="space-y-6">
+	{#if showHeader}
+		<div class="flex items-center justify-between gap-4">
+			<div>
+				<h1 class="text-2xl font-bold">{title}</h1>
+				<p class="text-muted-foreground text-sm">{description}</p>
+			</div>
+			<Button variant="outline" size="sm" onclick={() => void captureState.loadSources()} disabled={captureState.loading}>
+				<Icon icon="tabler:refresh" class={`mr-2 h-4 w-4 ${captureState.loading ? 'animate-spin' : ''}`} />
+				Refresh
+			</Button>
+		</div>
+	{/if}
+
+	{#if captureState.error}
+		<div role="alert" class="border-destructive bg-destructive/10 text-destructive rounded-lg border p-4 text-sm">
+			{captureState.error}
+		</div>
+	{/if}
+
+	<Card.Root>
+		<Card.Header>
+			<Card.Title>Capture source</Card.Title>
+			<Card.Description>
+				{providerLabel ?? (captureState.providerId ? 'Connected capture source' : 'No source connected')}
+			</Card.Description>
+		</Card.Header>
+		<Card.Content class="space-y-4">
+			<div class="space-y-2">
+				<Label>Source</Label>
+				<Select.Root
+					type="single"
+					value={captureState.sourceId == null ? '' : String(captureState.sourceId)}
+					onValueChange={(value: string | undefined) => value && captureState.selectSource(value)}
+				>
+					<Select.Trigger class="w-full">
+						{captureState.sources.find((source: CaptureSource) => String(source.id) === String(captureState.sourceId))?.name ?? 'Select source…'}
+					</Select.Trigger>
+					<Select.Content>
+						{#each captureState.sources as source}
+							<Select.Item value={String(source.id)}>{source.name}</Select.Item>
+						{/each}
+					</Select.Content>
+				</Select.Root>
+			</div>
+
+			<Button
+				onclick={() => void captureState.capture()}
+				disabled={captureState.sourceId == null || captureState.capturing}
+				class="w-full"
+			>
+				<Icon
+					icon={captureState.capturing ? 'tabler:loader-2' : 'tabler:camera'}
+					class={`mr-2 h-4 w-4 ${captureState.capturing ? 'animate-spin' : ''}`}
+				/>
+				Capture
+			</Button>
+		</Card.Content>
+	</Card.Root>
+
+	<Card.Root>
+		<Card.Header>
+			<Card.Title class="text-sm">Quick capture</Card.Title>
+			<Card.Description>Capture the selected source without leaving the keyboard.</Card.Description>
+		</Card.Header>
+		<Card.Content>
+			<div class="flex items-center justify-between rounded-lg border p-3">
+				<div class="flex items-center gap-2 text-sm">
+					<Icon icon="tabler:camera" class="text-muted-foreground h-4 w-4" />
+					<span>Capture selected source</span>
+				</div>
+				<kbd class="bg-muted rounded px-2 py-1 text-xs">{modKey}+Shift+S</kbd>
+			</div>
+		</Card.Content>
+	</Card.Root>
+
+	{#if selected}
+		<Card.Root>
+			<Card.Header>
+				<div class="flex items-center justify-between gap-3">
+					<div>
+						<Card.Title class="text-sm">Selected capture</Card.Title>
+						<Card.Description>{new Date(selected.timestamp).toLocaleString()}</Card.Description>
+					</div>
+					<a
+						href={selected.url}
+						download={captureFileName(selected.timestamp, selected.format)}
+						class="border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex h-8 items-center justify-center rounded-md border px-3 text-sm font-medium"
+					>
+						<Icon icon="tabler:download" class="mr-2 h-4 w-4" />
+						Download
+					</a>
+				</div>
+			</Card.Header>
+			<Card.Content>
+				{#if selectedMimeType?.startsWith('image/')}
+					<img src={selected.url} alt="Selected captured media" class="max-h-[32rem] w-full rounded-md border object-contain" />
+				{:else if selectedMimeType?.startsWith('video/')}
+					<!-- svelte-ignore a11y_media_has_caption -->
+					<video src={selected.url} controls class="max-h-[32rem] w-full rounded-md border"></video>
+				{:else if selectedMimeType?.startsWith('audio/')}
+					<audio src={selected.url} controls class="w-full"></audio>
+				{:else}
+					<a href={selected.url} target="_blank" rel="noreferrer" class="text-primary text-sm underline">
+						Open captured media
+					</a>
+				{/if}
+			</Card.Content>
+		</Card.Root>
+	{/if}
+
+	{#if captureState.captures.length > 0}
+		<Card.Root>
+			<Card.Header><Card.Title class="text-sm">Recent captures</Card.Title></Card.Header>
+			<Card.Content>
+				<ul class="space-y-2" aria-label="Capture history">
+					{#each captureState.captures as capture (capture.id)}
+						<li>
+							<button
+								type="button"
+								onclick={() => captureState.selectCapture(capture.id)}
+								class="hover:bg-muted flex w-full items-center justify-between rounded-lg border p-3 text-left"
+								class:ring-2={capture.id === selected?.id}
+								class:ring-primary={capture.id === selected?.id}
+							>
+								<span class="flex items-center gap-3">
+									<Icon icon="tabler:photo" class="text-muted-foreground h-5 w-5" />
+									<span>
+										<span class="block text-sm font-medium">{capture.format.toUpperCase()} capture</span>
+										<span class="text-muted-foreground block text-xs">{new Date(capture.timestamp).toLocaleString()}</span>
+									</span>
+								</span>
+								<Icon icon="tabler:chevron-right" class="text-muted-foreground h-4 w-4" />
+							</button>
+						</li>
+					{/each}
+				</ul>
+			</Card.Content>
+		</Card.Root>
+	{/if}
+</div>

package/dist/svelte/CapturePanel.svelte.d.ts

@@ -0,0 +1,12 @@
+import { type MediaCaptureState } from './state.svelte.ts';
+interface Props {
+    title?: string;
+    description?: string;
+    showHeader?: boolean;
+    providerLabel?: string;
+    state?: MediaCaptureState;
+}
+declare const CapturePanel: import("svelte").Component<Props, {}, "">;
+type CapturePanel = ReturnType<typeof CapturePanel>;
+export default CapturePanel;
+//# sourceMappingURL=CapturePanel.svelte.d.ts.map

package/dist/svelte/CapturePanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CapturePanel.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/CapturePanel.svelte.ts"],"names":[],"mappings":"AASA,OAAO,EAAwB,KAAK,iBAAiB,EAA0B,MAAM,mBAAmB,CAAC;AAKxG,UAAU,KAAK;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,iBAAiB,CAAC;CAC1B;AAqKF,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/svelte/MediaUploader.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+	import { Icon } from '@vibesdotdev/kit/components';
+	import { getVibesUploadsClient } from '@vibesdotdev/media/uploads/client';
+	import { getRuntimeSvelteContext } from '@vibesdotdev/surface-sveltekit/svelte';
+	import { logOn } from './runtime-log.js';
+	import { attempt, failureLabel } from '../utils/attempt.js';
+	import { failureMessage } from './failure-message.js';
+	import { parseMediaUploaderProvenance, type MediaUploaderProps } from './uploader.js';
+
+
+	let {
+		value = $bindable(''),
+		accept = 'image/*',
+		kind = 'media',
+		sourceApp,
+		sourceId,
+		isPublic = false,
+		onUploaded
+	}: MediaUploaderProps = $props();
+
+	const runtimeStore = getRuntimeSvelteContext();
+	let dragging = $state(false);
+	let uploading = $state(false);
+	let error = $state<string | null>(null);
+	let fileInputEl = $state<HTMLInputElement | null>(null);
+
+	async function upload(file: File): Promise<void> {
+		if (uploading) return;
+		uploading = true;
+		error = null;
+		const uploaded = await attempt(async () => {
+			const provenance = parseMediaUploaderProvenance({ sourceApp, sourceId });
+			const uploads = await getVibesUploadsClient(await runtimeStore.load());
+			return uploads.upload({
+				file,
+				kind,
+				...provenance,
+				originalName: file.name,
+				contentType: file.type || undefined,
+				isPublic
+			});
+		});
+		uploading = false;
+		if (!uploaded.ok) {
+			// A fixed message for the user; the failure's class and reason go to the log, never its text.
+			error = failureMessage(uploaded.failure, 'Upload failed. Try again.');
+			void logOn(runtimeStore, 'warn', 'svelte.uploader', 'media uploader: upload failed', { failure: failureLabel(uploaded.failure) });
+			return;
+		}
+		value = uploaded.value.url;
+		onUploaded?.(uploaded.value.url);
+	}
+
+	function onFileChange(files: FileList | null): void {
+		const file = files?.[0];
+		if (file) void upload(file);
+	}
+
+	function onDrop(event: DragEvent): void {
+		event.preventDefault();
+		dragging = false;
+		const file = event.dataTransfer?.files?.[0];
+		if (file) void upload(file);
+	}
+
+	function clear(): void {
+		value = '';
+		onUploaded?.('');
+		if (fileInputEl) fileInputEl.value = '';
+	}
+</script>
+
+<div class="space-y-3">
+	{#if value}
+		<div class="relative inline-block">
+			<img src={value} alt="Uploaded" class="h-16 w-auto rounded border object-contain" />
+			<button type="button" onclick={clear} class="absolute -right-2 -top-2 rounded-full border border-border bg-background p-0.5 shadow-sm hover:bg-red-50" aria-label="Remove image">
+				<Icon icon="lucide:x" class="h-3 w-3 text-red-500" />
+			</button>
+		</div>
+	{/if}
+
+	<div
+		role="button"
+		tabindex="0"
+		class="flex cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-border px-6 py-8 transition-colors hover:border-primary/50 {dragging ? 'border-primary bg-primary/5' : 'bg-muted/30'} {uploading ? 'pointer-events-none opacity-60' : ''}"
+		ondragover={(event) => { event.preventDefault(); dragging = true; }}
+		ondragleave={() => { dragging = false; }}
+		ondrop={onDrop}
+		onclick={() => fileInputEl?.click()}
+		onkeydown={(event) => event.key === 'Enter' && fileInputEl?.click()}
+	>
+		{#if uploading}
+			<div class="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent"></div>
+			<p class="text-sm text-muted-foreground">Uploading...</p>
+		{:else}
+			<div class="flex h-10 w-10 items-center justify-center rounded-full bg-muted">
+				<Icon icon={dragging ? 'lucide:upload' : 'lucide:image'} class={dragging ? 'h-5 w-5 text-primary' : 'h-5 w-5 text-muted-foreground'} />
+			</div>
+			<div class="text-center">
+				<p class="text-sm font-medium">{dragging ? 'Drop to upload' : 'Click or drag to upload'}</p>
+				<p class="text-xs text-muted-foreground">Choose a supported media file</p>
+			</div>
+		{/if}
+	</div>
+
+	{#if error}<p class="text-sm text-destructive">{error}</p>{/if}
+	<input bind:this={fileInputEl} type="file" {accept} class="hidden" onchange={(event) => onFileChange(event.currentTarget.files)} />
+</div>

package/dist/svelte/MediaUploader.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type MediaUploaderProps } from './uploader.ts';
+declare const MediaUploader: import("svelte").Component<MediaUploaderProps, {}, "value">;
+type MediaUploader = ReturnType<typeof MediaUploader>;
+export default MediaUploader;
+//# sourceMappingURL=MediaUploader.svelte.d.ts.map

package/dist/svelte/MediaUploader.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaUploader.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/MediaUploader.svelte.ts"],"names":[],"mappings":"AASA,OAAO,EAAgC,KAAK,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAyGtF,QAAA,MAAM,aAAa,6DAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/svelte/capture-parse.d.ts

@@ -0,0 +1,2 @@
+export { parseCaptureResult, parseCaptureSources } from '../schemas/capture-parse.ts';
+//# sourceMappingURL=capture-parse.d.ts.map

package/dist/svelte/capture-parse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"capture-parse.d.ts","sourceRoot":"","sources":["../../src/svelte/capture-parse.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC"}

package/dist/svelte/capture-parse.js

@@ -0,0 +1 @@
+export { parseCaptureResult, parseCaptureSources } from "../schemas/capture-parse.js";

package/dist/svelte/failure-message.d.ts

@@ -0,0 +1,2 @@
+export { failureMessage } from '../utils/failure-message.ts';
+//# sourceMappingURL=failure-message.d.ts.map

package/dist/svelte/failure-message.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"failure-message.d.ts","sourceRoot":"","sources":["../../src/svelte/failure-message.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC"}

package/dist/svelte/failure-message.js

@@ -0,0 +1 @@
+export { failureMessage } from "../utils/failure-message.js";

package/dist/svelte/index.d.ts

@@ -0,0 +1,8 @@
+export { default as CaptureLoader } from './CaptureLoader.svelte';
+export { default as CapturePanel } from './CapturePanel.svelte';
+export { default as MediaUploader } from './MediaUploader.svelte';
+export { mediaCaptureState, MediaCaptureState, createMediaCaptureState, provideMediaCaptureState, useMediaCaptureState } from './state.svelte.ts';
+export type { MediaCaptureEntry, MediaCaptureStateInitOptions } from './state.svelte.ts';
+export { captureFileName, captureMimeType } from './runtime.ts';
+export { MediaUploaderProvenanceSchema, parseMediaUploaderProvenance, type MediaUploaderProps, type MediaUploaderProvenance } from './uploader.ts';
+//# sourceMappingURL=index.d.ts.map

package/dist/svelte/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/svelte/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAClJ,YAAY,EAAE,iBAAiB,EAAE,4BAA4B,EAAE,MAAM,mBAAmB,CAAC;AACzF,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EACN,6BAA6B,EAC7B,4BAA4B,EAC5B,KAAK,kBAAkB,EACvB,KAAK,uBAAuB,EAC5B,MAAM,eAAe,CAAC"}

package/dist/svelte/index.js

@@ -0,0 +1,6 @@
+export { default as CaptureLoader } from './CaptureLoader.svelte';
+export { default as CapturePanel } from './CapturePanel.svelte';
+export { default as MediaUploader } from './MediaUploader.svelte';
+export { mediaCaptureState, MediaCaptureState, createMediaCaptureState, provideMediaCaptureState, useMediaCaptureState } from "./state.svelte.js";
+export { captureFileName, captureMimeType } from "./runtime.js";
+export { MediaUploaderProvenanceSchema, parseMediaUploaderProvenance } from "./uploader.js";

package/dist/svelte/runtime-log.d.ts

@@ -0,0 +1,14 @@
+import type { RuntimeRef } from '@vibesdotdev/kernel';
+/** Where a runtime comes from: the store `getRuntimeSvelteContext()` returns. */
+export interface RuntimeSource {
+    load(): Promise<RuntimeRef>;
+}
+export type LogLevel = 'debug' | 'warn';
+export type LogFields = Record<string, string | number | boolean | null | undefined>;
+/**
+ * Log one entry on the runtime `source` holds. A source that never loaded has
+ * no runtime to bind a logger to, so the entry is dropped; the store records
+ * that failed load on its own `error`.
+ */
+export declare function logOn(source: RuntimeSource, level: LogLevel, context: string, message: string, fields: LogFields): Promise<void>;
+//# sourceMappingURL=runtime-log.d.ts.map

package/dist/svelte/runtime-log.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"runtime-log.d.ts","sourceRoot":"","sources":["../../src/svelte/runtime-log.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAGtD,iFAAiF;AACjF,MAAM,WAAW,aAAa;IAC7B,IAAI,IAAI,OAAO,CAAC,UAAU,CAAC,CAAC;CAC5B;AAED,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AACxC,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;AAErF;;;;GAIG;AACH,wBAAsB,KAAK,CAC1B,MAAM,EAAE,aAAa,EACrB,KAAK,EAAE,QAAQ,EACf,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,SAAS,GACf,OAAO,CAAC,IAAI,CAAC,CAIf"}