@thomasfosterau/components 0.0.0 → 0.2.0

package/dist/layout/index.js

@@ -0,0 +1,38 @@
+/**
+ * layout — page chrome: the landmarks a page is assembled from, and the
+ * blocks that sit inside them.
+ *
+ * The family is structure, never copy. Every one of these takes the app's
+ * content as snippets and owns only the element that carries the semantics —
+ * the `<main>` a reader jumps to, the named `<nav>`s, the `banner` and
+ * `contentinfo` at the two ends of the page, the `<section aria-labelledby>`
+ * a long page is cut into. Import from the package barrel rather than from
+ * here.
+ *
+ * Optional props are declared `T | undefined` for the reason `ui/`'s are: the
+ * workspace compiles with `exactOptionalPropertyTypes`, under which `prop?: T`
+ * rejects an explicitly passed `undefined` and a caller cannot forward its own
+ * optional prop straight through.
+ *
+ * @module
+ */
+export { default as AppShell } from './AppShell.svelte';
+export { default as Breadcrumbs } from './Breadcrumbs.svelte';
+export { default as Cluster } from './Cluster.svelte';
+export { default as DetailLayout } from './DetailLayout.svelte';
+export { default as FilterBar } from './FilterBar.svelte';
+export { default as Fits } from './Fits.svelte';
+export { default as Footer } from './Footer.svelte';
+export { default as Grid } from './Grid.svelte';
+export { default as HStack } from './HStack.svelte';
+export { default as Hero } from './Hero.svelte';
+export { default as Main } from './Main.svelte';
+export { default as Navbar } from './Navbar.svelte';
+export { default as PageHeader } from './PageHeader.svelte';
+export { default as Section } from './Section.svelte';
+export { default as Sidebar } from './Sidebar.svelte';
+export { default as Spacer } from './Spacer.svelte';
+export { default as Tabs } from './Tabs.svelte';
+export { default as VStack } from './VStack.svelte';
+export * from "./space.js";
+export * from "./types.js";

package/dist/layout/space.d.ts

@@ -0,0 +1,44 @@
+/**
+ * The library's spacing rhythm and the layout primitives' vocabulary, as
+ * literal class tables.
+ *
+ * `VStack`, `HStack`, `Cluster`, `Grid` and `Fits` take tokens, not class
+ * names, so every app spaces things on the same scale. Tailwind only
+ * generates classes it can see verbatim in source, so each step is spelled
+ * out once here and looked up (the `ui/tones.ts` discipline).
+ *
+ * @module
+ */
+/** A step on the spacing scale. */
+export type Gap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** Literal `gap-*` class per `Gap`; a lookup table so Tailwind's scanner sees every class. */
+export declare const gapClass: Record<Gap, string>;
+/** Cross-axis alignment of a stack's or cluster's items. */
+export type FlowAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+/** Literal `items-*` class per `FlowAlign`; a lookup table so Tailwind's scanner sees every class. */
+export declare const alignClass: Record<FlowAlign, string>;
+/** Main-axis distribution of a stack's or cluster's items. */
+export type FlowJustify = 'start' | 'center' | 'end' | 'between';
+/** Literal `justify-*` class per `FlowJustify`; a lookup table so Tailwind's scanner sees every class. */
+export declare const justifyClass: Record<FlowJustify, string>;
+/** The narrowest an item of a `Grid` gets before the grid drops a column. */
+export type MinItem = 'xs' | 'sm' | 'md' | 'lg';
+/** Literal auto-fill column template per `MinItem`; a lookup table so Tailwind's scanner sees every class. */
+export declare const minItemClass: Record<MinItem, string>;
+/** The element a primitive renders. A list (`ul` / `ol`) takes `<li>` children. */
+export type FlowElement = 'div' | 'ul' | 'ol' | 'section' | 'nav';
+/** A container width at which a `Fits` layout stops fitting. */
+export type FitsBreakpoint = '20rem' | '28rem' | '36rem' | '48rem' | '64rem';
+/** Literal container-query class showing a `Fits` layout from this width up. */
+export declare const fitsShowFrom: Record<FitsBreakpoint, string>;
+/** Literal container-query class hiding a `Fits` layout from this width up. */
+export declare const fitsHideFrom: Record<FitsBreakpoint, string>;
+/**
+ * The classes of `Fits` layout `index` of `count`, given the widths at which
+ * each stops fitting (`breakpoints[i]` for layout `i`, one fewer than the
+ * layouts). The first shows from `breakpoints[0]` up, each next one between
+ * its own breakpoint and the previous one, and the last below the final
+ * breakpoint. Outside its band a layout is `display: none`, so it is out of
+ * the accessibility tree.
+ */
+export declare function fitsLayoutClass(index: number, count: number, breakpoints: readonly FitsBreakpoint[]): string[];

package/dist/layout/space.js

@@ -0,0 +1,76 @@
+/**
+ * The library's spacing rhythm and the layout primitives' vocabulary, as
+ * literal class tables.
+ *
+ * `VStack`, `HStack`, `Cluster`, `Grid` and `Fits` take tokens, not class
+ * names, so every app spaces things on the same scale. Tailwind only
+ * generates classes it can see verbatim in source, so each step is spelled
+ * out once here and looked up (the `ui/tones.ts` discipline).
+ *
+ * @module
+ */
+/** Literal `gap-*` class per `Gap`; a lookup table so Tailwind's scanner sees every class. */
+export const gapClass = {
+    none: 'gap-0',
+    xs: 'gap-1',
+    sm: 'gap-2',
+    md: 'gap-4',
+    lg: 'gap-8',
+    xl: 'gap-12',
+};
+/** Literal `items-*` class per `FlowAlign`; a lookup table so Tailwind's scanner sees every class. */
+export const alignClass = {
+    start: 'items-start',
+    center: 'items-center',
+    end: 'items-end',
+    stretch: 'items-stretch',
+    baseline: 'items-baseline',
+};
+/** Literal `justify-*` class per `FlowJustify`; a lookup table so Tailwind's scanner sees every class. */
+export const justifyClass = {
+    start: 'justify-start',
+    center: 'justify-center',
+    end: 'justify-end',
+    between: 'justify-between',
+};
+/** Literal auto-fill column template per `MinItem`; a lookup table so Tailwind's scanner sees every class. */
+export const minItemClass = {
+    xs: 'grid-cols-[repeat(auto-fill,minmax(min(10rem,100%),1fr))]',
+    sm: 'grid-cols-[repeat(auto-fill,minmax(min(12rem,100%),1fr))]',
+    md: 'grid-cols-[repeat(auto-fill,minmax(min(16rem,100%),1fr))]',
+    lg: 'grid-cols-[repeat(auto-fill,minmax(min(20rem,100%),1fr))]',
+};
+/** Literal container-query class showing a `Fits` layout from this width up. */
+export const fitsShowFrom = {
+    '20rem': '@min-[20rem]:block',
+    '28rem': '@min-[28rem]:block',
+    '36rem': '@min-[36rem]:block',
+    '48rem': '@min-[48rem]:block',
+    '64rem': '@min-[64rem]:block',
+};
+/** Literal container-query class hiding a `Fits` layout from this width up. */
+export const fitsHideFrom = {
+    '20rem': '@min-[20rem]:hidden',
+    '28rem': '@min-[28rem]:hidden',
+    '36rem': '@min-[36rem]:hidden',
+    '48rem': '@min-[48rem]:hidden',
+    '64rem': '@min-[64rem]:hidden',
+};
+/**
+ * The classes of `Fits` layout `index` of `count`, given the widths at which
+ * each stops fitting (`breakpoints[i]` for layout `i`, one fewer than the
+ * layouts). The first shows from `breakpoints[0]` up, each next one between
+ * its own breakpoint and the previous one, and the last below the final
+ * breakpoint. Outside its band a layout is `display: none`, so it is out of
+ * the accessibility tree.
+ */
+export function fitsLayoutClass(index, count, breakpoints) {
+    const own = breakpoints[index];
+    const previous = index === 0 ? undefined : breakpoints[index - 1];
+    const isLast = index === count - 1;
+    return [
+        isLast ? 'block' : 'hidden',
+        !isLast && own !== undefined ? fitsShowFrom[own] : '',
+        previous === undefined ? '' : fitsHideFrom[previous],
+    ].filter((name) => name !== '');
+}

package/dist/layout/types.d.ts

@@ -0,0 +1,52 @@
+/**
+ * The vocabulary the `layout/` family's list-shaped props are written in, and
+ * the literal daisyUI class tables its variants look up.
+ *
+ * The tables are local to this family rather than added to `ui/tones.ts`
+ * because `tabs-*` is a layout word: no `ui/` component renders a tab strip,
+ * and a table nobody outside one family reads is a table that belongs beside
+ * that family. The reason they are tables at all is the repo-wide one —
+ * Tailwind generates only the classes it can see verbatim in source, so a
+ * `tabs-${variant}` template string emits no CSS whatsoever.
+ *
+ * @module
+ */
+import type { Size } from '../ui/tones.ts';
+/** One step of a {@link Breadcrumbs} trail. */
+export interface Crumb {
+    readonly label: string;
+    /**
+     * Where the crumb points. The TRAILING crumb is rendered as text whether or
+     * not it carries one — it is the page you are already on.
+     */
+    readonly href?: string | undefined;
+}
+/** One entry of a {@link Tabs} strip, in either mode. */
+export interface TabItem {
+    /** Stable key, and the value `Tabs` selects on in `panels` mode. */
+    readonly value: string;
+    readonly label: string;
+    /** The route, in `links` mode. Ignored by `panels`. */
+    readonly href?: string | undefined;
+    readonly disabled?: boolean | undefined;
+}
+/** One option of a {@link FilterBar}. */
+export interface FilterOption {
+    /** Stable key for the keyed `{#each}`. */
+    readonly key: string;
+    readonly label: string;
+    readonly href: string;
+    /**
+     * Whether this option is the view currently shown. The caller's to decide:
+     * only the page knows which axis the row is filtering on.
+     */
+    readonly active: boolean;
+}
+/** `panels` is a tab widget; `links` is navigation between sibling routes. */
+export type TabsMode = 'panels' | 'links';
+/** The three daisyUI tab treatments. */
+export type TabsVariant = 'border' | 'box' | 'lift';
+/** Literal daisyUI class per `TabsVariant` for `Tabs`; a lookup table so Tailwind's scanner sees every class. */
+export declare const tabsVariant: Record<TabsVariant, string>;
+/** Literal daisyUI class per `Size` for `Tabs`; a lookup table so Tailwind's scanner sees every class. */
+export declare const tabsSize: Record<Size, string>;

package/dist/layout/types.js

@@ -0,0 +1,27 @@
+/**
+ * The vocabulary the `layout/` family's list-shaped props are written in, and
+ * the literal daisyUI class tables its variants look up.
+ *
+ * The tables are local to this family rather than added to `ui/tones.ts`
+ * because `tabs-*` is a layout word: no `ui/` component renders a tab strip,
+ * and a table nobody outside one family reads is a table that belongs beside
+ * that family. The reason they are tables at all is the repo-wide one —
+ * Tailwind generates only the classes it can see verbatim in source, so a
+ * `tabs-${variant}` template string emits no CSS whatsoever.
+ *
+ * @module
+ */
+/** Literal daisyUI class per `TabsVariant` for `Tabs`; a lookup table so Tailwind's scanner sees every class. */
+export const tabsVariant = {
+    border: 'tabs-border',
+    box: 'tabs-box',
+    lift: 'tabs-lift',
+};
+/** Literal daisyUI class per `Size` for `Tabs`; a lookup table so Tailwind's scanner sees every class. */
+export const tabsSize = {
+    xs: 'tabs-xs',
+    sm: 'tabs-sm',
+    md: 'tabs-md',
+    lg: 'tabs-lg',
+    xl: 'tabs-xl',
+};

package/dist/links/ContextLinks.svelte

@@ -0,0 +1,28 @@
+<!-- @component
+The "About: Rosa canina, Bed 4" row under a piece of content: a leading label, then a link per subject.
+-->
+<!--
+  ContextLinks — the "About: Rosa canina, Bed 4" row under a piece of content:
+  a leading label, then the things the content is about, each a link.
+
+  Renders NOTHING when there are no links — the common case, since most
+  content names no context, and an empty "About:" would be noise. Each href is
+  resolved through the components context, like every app-relative link here.
+
+  ARIA contract: a plain paragraph of links. The label is visible text read
+  before the links, so no `aria-label` is needed; each link's own text is its
+  accessible name.
+-->
+<script lang="ts">import { getComponentsContext } from "../context.svelte.js";
+let { links, label = "About", class: className, ...rest } = $props();
+const context = getComponentsContext();
+</script>
+
+{#if links.length > 0}
+  <p {...rest} class={['text-base-content/70 flex flex-wrap gap-x-3 gap-y-1 text-sm', className]}>
+    <span>{label}:</span>
+    {#each links as entry, index (index)}
+      <a class="link link-hover" href={context.href(entry.href)}>{entry.label}</a>
+    {/each}
+  </p>
+{/if}

package/dist/links/ContextLinks.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes } from 'svelte/elements';
+/** One thing the content is about. */
+export interface ContextLinkItem {
+    /** App-relative path, resolved through the components context. */
+    readonly href: string;
+    readonly label: string;
+}
+interface Props extends HTMLAttributes<HTMLParagraphElement> {
+    /** The subjects, each rendered as a link. */
+    links: readonly ContextLinkItem[];
+    /**
+     * The leading word, rendered as `"<label>:"`.
+     * @defaultValue `'About'`
+     */
+    label?: string | undefined;
+}
+/** The "About: Rosa canina, Bed 4" row under a piece of content: a leading label, then a link per subject. */
+declare const ContextLinks: import("svelte").Component<Props, {}, "">;
+type ContextLinks = ReturnType<typeof ContextLinks>;
+export default ContextLinks;

package/dist/links/EmailLink.svelte

@@ -0,0 +1,26 @@
+<!-- @component
+A `mailto:` link whose subject, body, cc and bcc are correctly encoded.
+-->
+<!--
+  EmailLink — a `mailto:` anchor, its query string (`subject`/`body`/`cc`/
+  `bcc`) built with `URLSearchParams` so every value is correctly encoded.
+
+  ARIA contract: none beyond the native `<a>` — the visible text (the address
+  by default, or `children` when given) is the accessible name.
+-->
+<script lang="ts">let { email, subject, body, cc, bcc, children, class: className, ...rest } = $props();
+const href = $derived.by(() => {
+	const params = new URLSearchParams();
+	if (subject) params.set("subject", subject);
+	if (body) params.set("body", body);
+	if (cc) params.set("cc", cc);
+	if (bcc) params.set("bcc", bcc);
+	const query = params.toString();
+	return `mailto:${email}${query ? `?${query}` : ""}`;
+});
+export {};
+</script>
+
+<a {...rest} {href} class={['link link-primary link-hover', className]}>
+  {#if children}{@render children()}{:else}{email}{/if}
+</a>

package/dist/links/EmailLink.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAnchorAttributes, 'children'> {
+    /** The address; also the link text unless `children` replaces it. */
+    email: string;
+    /** Pre-filled subject line. */
+    subject?: string | undefined;
+    /** Pre-filled message body. */
+    body?: string | undefined;
+    /** Address to copy. */
+    cc?: string | undefined;
+    /** Address to blind-copy. */
+    bcc?: string | undefined;
+    /** Replaces the link text; defaults to the address itself. */
+    children?: Snippet<[]> | undefined;
+}
+/** A `mailto:` link whose subject, body, cc and bcc are correctly encoded. */
+declare const EmailLink: import("svelte").Component<Props, {}, "">;
+type EmailLink = ReturnType<typeof EmailLink>;
+export default EmailLink;

package/dist/links/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * links — see the package README for the family reference.
+ *
+ * @module
+ */
+export { default as EmailLink } from './EmailLink.svelte';
+export { default as ContextLinks, type ContextLinkItem } from './ContextLinks.svelte';

package/dist/links/index.js

@@ -0,0 +1,7 @@
+/**
+ * links — see the package README for the family reference.
+ *
+ * @module
+ */
+export { default as EmailLink } from './EmailLink.svelte';
+export { default as ContextLinks } from './ContextLinks.svelte';

package/dist/media/Figure.svelte

@@ -0,0 +1,26 @@
+<!-- @component
+A `<figure>` with an optional `<figcaption>`, for media that needs a caption.
+-->
+<!--
+  Figure — a `<figure>` with an optional `<figcaption>`, for media that needs
+  a caption associated with it (an image, a video, a diagram).
+
+  ARIA contract: none beyond the native grouping — `<figure>`/`<figcaption>`
+  already associate the caption with its content for assistive technology.
+-->
+<script lang="ts">let { caption, children, class: className, ...rest } = $props();
+export {};
+</script>
+
+<figure {...rest} class={className}>
+  {@render children()}
+  {#if caption}
+    <figcaption>
+      {#if typeof caption === 'string'}
+        {caption}
+      {:else}
+        {@render caption()}
+      {/if}
+    </figcaption>
+  {/if}
+</figure>

package/dist/media/Figure.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLElement> {
+    /** Rendered as `<figcaption>`; a plain string or a snippet for richer markup. */
+    caption?: string | Snippet<[]> | undefined;
+    /** The image, video or diagram the caption describes. */
+    children: Snippet<[]>;
+}
+/** A `<figure>` with an optional `<figcaption>`, for media that needs a caption. */
+declare const Figure: import("svelte").Component<Props, {}, "">;
+type Figure = ReturnType<typeof Figure>;
+export default Figure;

package/dist/media/Image.svelte

@@ -0,0 +1,76 @@
+<!-- @component
+A responsive `<img>` from a URL or an uploaded image id, optionally wrapped in `<picture>`. `decoding` defaults to `'async'`.
+-->
+<!--
+  Image — a responsive `<img>`, optionally wrapped in `<picture>`.
+
+  Two ways to get a `srcset`: pass `src` directly for a plain image, or pass
+  `id` (+ optionally `base`/`widths`) for a width-bucketed rendition served
+  by an image-transform route (`${base}/${id}?w=${w}`). Requesting an arbitrary width
+  would defeat that bucketing (every distinct width is a distinct transform
+  and a distinct cache entry), so `widths` is a fixed list, not a free number.
+
+  `sources` adds art-direction / format-negotiation `<source>` elements ahead
+  of the `<img>` fallback, wrapping everything in `<picture>` — each source's
+  own `srcset` is the caller's (e.g. an AVIF/WebP rendition list), unrelated
+  to the `id`-bucketing above.
+
+  `width`/`height` reserve the box before the bytes arrive — the single most
+  visible layout-shift regression a media-heavy page can ship — so pass them
+  whenever they are known.
+
+  ARIA contract: `alt` is required and not defaulted — a caller with no
+  meaningful text must pass `""` (decorative) explicitly, which is a
+  different, deliberate claim from having forgotten it.
+-->
+<script lang="ts">const DEFAULT_WIDTHS = [
+	320,
+	640,
+	960,
+	1280,
+	1920
+];
+let { alt, src, id, base = "/images", widths = DEFAULT_WIDTHS, sources, width, height, sizes = "100vw", eager = false, decoding = "async", ...rest } = $props();
+const bucketedHref = $derived(id === undefined ? undefined : `${base}/${id}`);
+const bucketedSrcset = $derived(bucketedHref === undefined ? undefined : widths.map((w) => `${bucketedHref}?w=${w} ${w}w`).join(", "));
+// The largest bucket as the plain `src`: the fallback a browser without
+// `srcset` support (and every crawler) fetches.
+const fallbackWidth = $derived(widths[widths.length - 1]);
+const resolvedSrc = $derived(src ?? (bucketedHref === undefined ? undefined : `${bucketedHref}?w=${fallbackWidth}`));
+const loading = $derived(eager ? "eager" : "lazy");
+const fetchpriority = $derived(eager ? "high" : undefined);
+export {};
+</script>
+
+{#if sources && sources.length > 0}
+  <picture>
+    {#each sources as source (source.srcset)}
+      <source srcset={source.srcset} type={source.type} media={source.media} />
+    {/each}
+    <img
+      {...rest}
+      src={resolvedSrc}
+      srcset={bucketedSrcset}
+      {sizes}
+      {alt}
+      {width}
+      {height}
+      {loading}
+      {fetchpriority}
+      {decoding}
+    />
+  </picture>
+{:else}
+  <img
+    {...rest}
+    src={resolvedSrc}
+    srcset={bucketedSrcset}
+    {sizes}
+    {alt}
+    {width}
+    {height}
+    {loading}
+    {fetchpriority}
+    {decoding}
+  />
+{/if}

package/dist/media/Image.svelte.d.ts

@@ -0,0 +1,41 @@
+import type { HTMLImgAttributes } from 'svelte/elements';
+interface ImageSource {
+    srcset: string;
+    type?: string | undefined;
+    media?: string | undefined;
+}
+interface Props extends HTMLImgAttributes {
+    /** Alternative text; `''` only where the image is decoration. */
+    alt: string;
+    /** A plain image URL. Mutually exclusive with `id`; `src` wins if both are given. */
+    src?: string | undefined;
+    /** An uploaded image's id — combined with `base`/`widths` into a bucketed `srcset`. */
+    id?: string | undefined;
+    /**
+     * Route prefix the bucketed rendition lives under.
+     * @defaultValue `'/images'`
+     */
+    base?: string | undefined;
+    /**
+     * The width buckets the transform route serves. Must match its own list.
+     * @defaultValue `[320, 640, 960, 1280, 1920]`
+     */
+    widths?: readonly number[] | undefined;
+    /** Extra `<source>` elements (art direction / format negotiation) ahead of the `<img>` fallback. Wraps everything in `<picture>`. */
+    sources?: readonly ImageSource[] | undefined;
+    /** Intrinsic width; reserves the box against layout shift. */
+    width?: number | string | undefined;
+    /** Intrinsic height; reserves the box against layout shift. */
+    height?: number | string | undefined;
+    /**
+     * The `sizes` hint.
+     * @defaultValue `'100vw'`
+     */
+    sizes?: string | undefined;
+    /** Eager-load this image. Use for the one image above the fold; everything else stays lazy. */
+    eager?: boolean | undefined;
+}
+/** A responsive `<img>` from a URL or an uploaded image id, optionally wrapped in `<picture>`. `decoding` defaults to `'async'`. */
+declare const Image: import("svelte").Component<Props, {}, "">;
+type Image = ReturnType<typeof Image>;
+export default Image;

package/dist/media/Video.svelte

@@ -0,0 +1,65 @@
+<!-- @component
+An HLS video player (Cloudflare Stream shape) with a placeholder while the upload is still pending or processing.
+-->
+<!--
+  Video — the player for an HLS-served video (Cloudflare Stream shape:
+  manifest URL + poster + an upload lifecycle).
+
+  Deliberately a plain `<video>` with the HLS manifest as its source and the
+  generated thumbnail as its poster. That plays natively in Safari and on
+  iOS; everywhere else it needs an MSE shim (e.g. hls.js), which is an
+  app-side concern and stays out of this package — it is a real dependency
+  weight that must never land in the always-loaded closure of a package every
+  page imports. A caller that wants universal playback attaches the shim to
+  the element handed to `onReady`.
+
+  While the upload is still pending/processing there is no manifest at all,
+  so the component renders the poster (or a neutral placeholder) with the
+  state spelled out via `statusLabel` rather than an empty player that
+  silently fails.
+
+  ARIA contract: `title` is the player's accessible name (`aria-label`); the
+  non-playable placeholder's `statusLabel` is a `badge-neutral`, visible text,
+  not conveyed through colour alone.
+-->
+<script lang="ts">let { hlsUrl, posterUrl, title, width, height, uploadState = "ready", statusLabel, onReady, captionsSrc, class: className } = $props();
+let element = $state();
+const playable = $derived(uploadState === "ready" && hlsUrl !== undefined);
+$effect(() => {
+	if (element && playable) onReady?.(element);
+});
+</script>
+
+<div class={['bg-base-200 rounded-box overflow-hidden', className]}>
+  {#if playable}
+    <video
+      bind:this={element}
+      controls
+      preload="none"
+      poster={posterUrl}
+      {width}
+      {height}
+      aria-label={title}
+      class="aspect-video h-auto w-full max-w-full"
+    >
+      <source src={hlsUrl} type="application/x-mpegURL" />
+      {#if captionsSrc}
+        <track kind="captions" src={captionsSrc} />
+      {:else}
+        <!-- A `<track>` is required for a caption-less video to be valid; an
+             empty default track is the honest statement that none exists yet,
+             rather than silently shipping a video with no captions option. -->
+        <track kind="captions" />
+      {/if}
+    </video>
+  {:else}
+    <div class="aspect-video relative flex w-full items-center justify-center">
+      {#if posterUrl}
+        <img src={posterUrl} alt="" class="h-full w-full object-cover opacity-60" />
+      {/if}
+      {#if statusLabel}
+        <span class="badge badge-neutral absolute">{statusLabel}</span>
+      {/if}
+    </div>
+  {/if}
+</div>

package/dist/media/Video.svelte.d.ts

@@ -0,0 +1,29 @@
+interface Props {
+    /** The HLS manifest URL; absent until the encode finishes. */
+    hlsUrl?: string | undefined;
+    /** The poster frame. */
+    posterUrl?: string | undefined;
+    /** Accessible name for the player. */
+    title: string;
+    /** Intrinsic dimensions, when known — reserves the box against layout shift. */
+    width?: number | undefined;
+    /** Intrinsic height, when known. */
+    height?: number | undefined;
+    /**
+     * Where the upload is in its lifecycle.
+     * @defaultValue `'ready'`
+     */
+    uploadState?: 'pending' | 'processing' | 'ready' | 'failed' | undefined;
+    /** Copy for the non-playable placeholder state, supplied by the app (this package holds no messages). */
+    statusLabel?: string | undefined;
+    /** Called with the mounted `<video>` element once it is playable, for a caller attaching an MSE shim. */
+    onReady?: ((element: HTMLVideoElement) => void) | undefined;
+    /** A captions track URL (WebVTT). When absent, an empty track is still rendered — see below. */
+    captionsSrc?: string | undefined;
+    /** Extra classes, merged last. */
+    class?: string | undefined;
+}
+/** An HLS video player (Cloudflare Stream shape) with a placeholder while the upload is still pending or processing. */
+declare const Video: import("svelte").Component<Props, {}, "">;
+type Video = ReturnType<typeof Video>;
+export default Video;

package/dist/media/image-dimensions.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Reading an image file's intrinsic pixel dimensions in the browser.
+ *
+ * A form that uploads an image wants its `width` / `height` alongside the
+ * binary, so the page that later renders it can reserve the box on first
+ * paint instead of reflowing when it loads — and the browser can decode the
+ * file for free the moment it is chosen, where a server would have to.
+ * `fields/ImageInput` measures with this; a caller with its own file control
+ * uses it directly.
+ *
+ * @module
+ */
+/** An image's intrinsic size, in pixels. */
+export interface ImageDimensions {
+    readonly width: number;
+    readonly height: number;
+}
+/** Thrown by {@link imageDimensions} where there is no `createImageBitmap` (on a server). */
+export declare class ImageDimensionsUnavailable extends Error {
+    readonly name = "ImageDimensionsUnavailable";
+}
+/**
+ * Decode `file` with `createImageBitmap` and return its pixel size.
+ *
+ * Rejects with {@link ImageDimensionsUnavailable} outside a browser, and with
+ * the browser's own error when the file does not decode as an image.
+ */
+export declare function imageDimensions(file: Blob): Promise<ImageDimensions>;