@texuli/blocks 0.0.0-stage → 0.1.0-next.0

package/dist/map/schema.js

@@ -0,0 +1,176 @@
+import { fail, failMany, ok, parseBlockBase, parseBlockId, parsePlainText, } from "../core/schema/primitives.js";
+import { isBlockTone } from "../core/schema/vocabulary.js";
+/**
+ * Map block (T-blocks-map): points on an offline, fictional basemap. A map
+ * block never loads tiles, geocodes or touches the network; coordinates are
+ * plain numbers on a simulated map. Owned validator: strict keys, finite
+ * numbers, unique ids, bounded sizes.
+ */
+/** Fictional basemaps that ship with `@texuli/data/geo`. */
+export const MAP_BASEMAPS = ['port-meridian'];
+export const MAP_LIMITS = Object.freeze({
+    points: 50,
+    route: 20,
+    label: 120,
+    pointLabel: 80,
+    description: 200,
+    /** Web Mercator stops being finite at the poles. */
+    maxLatitude: 85.06,
+});
+const BLOCK_KEYS = new Set([
+    'type',
+    'id',
+    'step',
+    'reveal',
+    'tone',
+    'label',
+    'title',
+    'basemap',
+    'points',
+    'route',
+]);
+const POINT_KEYS = new Set(['id', 'label', 'lng', 'lat', 'description', 'tone']);
+function plainRecord(value, path, what) {
+    if (value === null || typeof value !== 'object' || Array.isArray(value)) {
+        return fail(path, `Expected a ${what} object`);
+    }
+    const prototype = Object.getPrototypeOf(value);
+    if (prototype !== Object.prototype && prototype !== null) {
+        return fail(path, `${what} must be plain JSON data`);
+    }
+    return ok(value);
+}
+function unknownKeys(record, allowed, path) {
+    return Object.keys(record)
+        .filter((key) => !allowed.has(key))
+        .map((key) => ({ path: [...path, key], message: `Unknown field "${key}"` }));
+}
+function coordinate(value, path, limit) {
+    if (typeof value !== 'number' || !Number.isFinite(value))
+        return fail(path, 'Expected a finite number');
+    if (value < -limit || value > limit)
+        return fail(path, `Must be between -${limit} and ${limit}`);
+    return ok(value);
+}
+function parsePoint(value, path) {
+    const record = plainRecord(value, path, 'point');
+    if (!record.success)
+        return record;
+    const point = record.data;
+    const extra = unknownKeys(point, POINT_KEYS, path);
+    if (extra.length > 0)
+        return failMany(extra);
+    if (point.id === undefined)
+        return fail([...path, 'id'], 'point id is required');
+    const id = parseBlockId(point.id, [...path, 'id']);
+    if (!id.success)
+        return id;
+    const label = parsePlainText(point.label, [...path, 'label'], MAP_LIMITS.pointLabel);
+    if (!label.success)
+        return label;
+    const lng = coordinate(point.lng, [...path, 'lng'], 180);
+    if (!lng.success)
+        return lng;
+    const lat = coordinate(point.lat, [...path, 'lat'], MAP_LIMITS.maxLatitude);
+    if (!lat.success)
+        return lat;
+    const parsed = {
+        id: id.data,
+        label: label.data,
+        lng: lng.data,
+        lat: lat.data,
+    };
+    if (point.description !== undefined) {
+        const description = parsePlainText(point.description, [...path, 'description'], MAP_LIMITS.description);
+        if (!description.success)
+            return description;
+        parsed.description = description.data;
+    }
+    if (point.tone !== undefined) {
+        if (!isBlockTone(point.tone))
+            return fail([...path, 'tone'], 'Unknown tone');
+        parsed.tone = point.tone;
+    }
+    return ok(parsed);
+}
+/** Validates untrusted data as a map block. */
+export function parseMapBlock(value, path = []) {
+    const record = plainRecord(value, path, 'block');
+    if (!record.success)
+        return record;
+    const block = record.data;
+    if (block.type !== 'map')
+        return fail([...path, 'type'], 'Expected a map block');
+    const extra = unknownKeys(block, BLOCK_KEYS, path);
+    if (extra.length > 0)
+        return failMany(extra);
+    const base = parseBlockBase(block, path);
+    if (!base.success)
+        return base;
+    const label = parsePlainText(block.label, [...path, 'label'], MAP_LIMITS.label);
+    if (!label.success)
+        return label;
+    const parsed = { ...base.data, type: 'map', label: label.data, points: [] };
+    if (block.title !== undefined) {
+        const title = parsePlainText(block.title, [...path, 'title'], MAP_LIMITS.label);
+        if (!title.success)
+            return title;
+        parsed.title = title.data;
+    }
+    if (block.basemap !== undefined) {
+        if (!MAP_BASEMAPS.includes(block.basemap)) {
+            return fail([...path, 'basemap'], `basemap must be one of: ${MAP_BASEMAPS.join(', ')}`);
+        }
+        parsed.basemap = block.basemap;
+    }
+    if (!Array.isArray(block.points) || block.points.length === 0) {
+        return fail([...path, 'points'], 'map needs at least one point');
+    }
+    if (block.points.length > MAP_LIMITS.points) {
+        return fail([...path, 'points'], `map may contain at most ${MAP_LIMITS.points} points`);
+    }
+    const ids = new Set();
+    const issues = [];
+    block.points.forEach((raw, index) => {
+        const point = parsePoint(raw, [...path, 'points', index]);
+        if (!point.success) {
+            issues.push(...point.issues);
+            return;
+        }
+        if (ids.has(point.data.id)) {
+            issues.push({
+                path: [...path, 'points', index, 'id'],
+                message: `Repeated point id "${point.data.id}"`,
+            });
+            return;
+        }
+        ids.add(point.data.id);
+        parsed.points.push(point.data);
+    });
+    if (issues.length > 0)
+        return failMany(issues);
+    if (block.route !== undefined) {
+        if (!Array.isArray(block.route) || block.route.length < 2) {
+            return fail([...path, 'route'], 'route needs at least two point ids');
+        }
+        if (block.route.length > MAP_LIMITS.route) {
+            return fail([...path, 'route'], `route may contain at most ${MAP_LIMITS.route} stops`);
+        }
+        const route = [];
+        for (let index = 0; index < block.route.length; index += 1) {
+            const stop = block.route[index];
+            if (typeof stop !== 'string' || !ids.has(stop)) {
+                return fail([...path, 'route', index], 'Name one of the point ids');
+            }
+            if (route[route.length - 1] === stop) {
+                return fail([...path, 'route', index], 'A stop cannot repeat the previous one');
+            }
+            route.push(stop);
+        }
+        parsed.route = route;
+    }
+    return ok(parsed);
+}
+export function isMapBlock(value) {
+    return parseMapBlock(value).success;
+}

package/dist/map/view-model.d.ts

@@ -0,0 +1,55 @@
+import { type Basemap, type BasemapPath, type MapSize, type MapView } from '@texuli/data/geo';
+import type { BlockTone } from '../core/schema/vocabulary.js';
+import type { MapBlock, MapPoint } from './schema.js';
+/**
+ * Pure geometry for the map block renderer, over the offline geo engine of
+ * `@texuli/data/geo`. Only the Svelte view imports this module, so the
+ * package root never pulls in the engine.
+ */
+export declare const MAP_BLOCK_SIZE: MapSize;
+/**
+ * Drawing size for a measured canvas width: 1:1 pixels (so map text keeps
+ * its size on a phone), 16:9 with a taller minimum on narrow screens. An
+ * unmeasured canvas (server render, tests) uses `MAP_BLOCK_SIZE`.
+ */
+export declare function mapSizeFor(width: number): MapSize;
+/** Screen pixels one arrow-key press pans. */
+export declare const MAP_PAN_STEP = 64;
+export declare function basemapFor(block: Pick<MapBlock, 'basemap'>): Basemap;
+/**
+ * The view that frames every point. A lone point (or a tight cluster) gets
+ * at least a quarter of the basemap around it, so it is never zoomed to a dot.
+ */
+export declare function fitPoints(points: readonly MapPoint[], basemap: Basemap, size?: MapSize): MapView;
+export interface PlacedPoint extends MapPoint {
+    x: number;
+    y: number;
+    /** Inside the visible map (with a small margin for the marker). */
+    visible: boolean;
+}
+export declare function placePoints(points: readonly MapPoint[], view: MapView, size?: MapSize): PlacedPoint[];
+/** Ordered stops of the route (ids already validated to exist). */
+export declare function routeStops(block: Pick<MapBlock, 'points' | 'route'>): MapPoint[];
+/** SVG path data for the route (numbers and M/L only), or `undefined`. */
+export declare function routePath(stops: readonly MapPoint[], view: MapView, size?: MapSize): string | undefined;
+/** Route length in meters along the stops (great-circle legs). */
+export declare function routeMeters(stops: readonly MapPoint[]): number;
+export declare function basemapFeatures(basemap: Basemap, view: MapView, size?: MapSize): BasemapPath[];
+/** A marker label sits at the inline end of its dot, or flips when it would overflow. */
+export declare function markerLabelFlips(point: Pick<PlacedPoint, 'x' | 'label'>, size?: MapSize): boolean;
+/**
+ * Basemap features whose labels stay clear of the marker labels: a feature
+ * label inside a marker label's box (on whichever side the label sits) is
+ * dropped, so place names never print over each other.
+ */
+export declare function clearFeatureLabels(features: readonly BasemapPath[], markers: readonly Pick<PlacedPoint, 'x' | 'y' | 'visible' | 'label'>[], size?: MapSize): BasemapPath[];
+export type MapKeyAction = 'pan-up' | 'pan-down' | 'pan-left' | 'pan-right' | 'zoom-in' | 'zoom-out' | 'reset';
+/**
+ * Keyboard map: arrows pan (geography, so not mirrored in RTL), `+`/`=` and
+ * `-` zoom, `0` and Home reset.
+ */
+export declare function mapKeyAction(key: string): MapKeyAction | undefined;
+/** Applies a keyboard or button action to a view. */
+export declare function applyMapAction(view: MapView, action: MapKeyAction, home: MapView, size?: MapSize): MapView;
+/** Marker class per tone; untoned points use the brand emphasis. */
+export declare function toneClass(tone: BlockTone | undefined): string;

package/dist/map/view-model.js

@@ -0,0 +1,168 @@
+import { basemapPaths, fitBounds, PORT_MERIDIAN, panBy, project, routeLength, zoomAround, } from '@texuli/data/geo';
+/**
+ * Pure geometry for the map block renderer, over the offline geo engine of
+ * `@texuli/data/geo`. Only the Svelte view imports this module, so the
+ * package root never pulls in the engine.
+ */
+export const MAP_BLOCK_SIZE = Object.freeze({ width: 800, height: 450 });
+/**
+ * Drawing size for a measured canvas width: 1:1 pixels (so map text keeps
+ * its size on a phone), 16:9 with a taller minimum on narrow screens. An
+ * unmeasured canvas (server render, tests) uses `MAP_BLOCK_SIZE`.
+ */
+export function mapSizeFor(width) {
+    if (!Number.isFinite(width) || width <= 0)
+        return MAP_BLOCK_SIZE;
+    const w = Math.round(Math.min(width, 2_000));
+    return { width: w, height: Math.round(Math.max(240, (w * 9) / 16)) };
+}
+/** Screen pixels one arrow-key press pans. */
+export const MAP_PAN_STEP = 64;
+const BASEMAPS = { 'port-meridian': PORT_MERIDIAN };
+export function basemapFor(block) {
+    return BASEMAPS[block.basemap ?? 'port-meridian'];
+}
+/**
+ * The view that frames every point. A lone point (or a tight cluster) gets
+ * at least a quarter of the basemap around it, so it is never zoomed to a dot.
+ */
+export function fitPoints(points, basemap, size = MAP_BLOCK_SIZE) {
+    let [minLng, minLat, maxLng, maxLat] = [Infinity, Infinity, -Infinity, -Infinity];
+    for (const point of points) {
+        minLng = Math.min(minLng, point.lng);
+        maxLng = Math.max(maxLng, point.lng);
+        minLat = Math.min(minLat, point.lat);
+        maxLat = Math.max(maxLat, point.lat);
+    }
+    if (!Number.isFinite(minLng))
+        return fitBounds(basemap.bbox, size, 24);
+    const [bMinLng, bMinLat, bMaxLng, bMaxLat] = basemap.bbox;
+    const minSpanLng = (bMaxLng - bMinLng) / 4;
+    const minSpanLat = (bMaxLat - bMinLat) / 4;
+    const padLng = Math.max((maxLng - minLng) * 0.15, (minSpanLng - (maxLng - minLng)) / 2, 0);
+    const padLat = Math.max((maxLat - minLat) * 0.15, (minSpanLat - (maxLat - minLat)) / 2, 0);
+    const box = [minLng - padLng, minLat - padLat, maxLng + padLng, maxLat + padLat];
+    return fitBounds(box, size, 32);
+}
+export function placePoints(points, view, size = MAP_BLOCK_SIZE) {
+    return points.map((point) => {
+        const { x, y } = project(point, view, size);
+        const visible = x >= -12 && x <= size.width + 12 && y >= -12 && y <= size.height + 12;
+        return { ...point, x: round(x), y: round(y), visible };
+    });
+}
+function round(value) {
+    return Math.round(value * 10) / 10;
+}
+/** Ordered stops of the route (ids already validated to exist). */
+export function routeStops(block) {
+    if (!block.route)
+        return [];
+    const byId = new Map(block.points.map((point) => [point.id, point]));
+    return block.route
+        .map((id) => byId.get(id))
+        .filter((point) => point !== undefined);
+}
+/** SVG path data for the route (numbers and M/L only), or `undefined`. */
+export function routePath(stops, view, size = MAP_BLOCK_SIZE) {
+    if (stops.length < 2)
+        return undefined;
+    return stops
+        .map((stop, index) => {
+        const { x, y } = project(stop, view, size);
+        return `${index === 0 ? 'M' : 'L'}${round(x)} ${round(y)}`;
+    })
+        .join(' ');
+}
+/** Route length in meters along the stops (great-circle legs). */
+export function routeMeters(stops) {
+    return stops.length < 2 ? 0 : routeLength(stops);
+}
+export function basemapFeatures(basemap, view, size = MAP_BLOCK_SIZE) {
+    return basemapPaths(basemap, view, size);
+}
+/** Approximate width of one marker-label character, in px (13px semibold). */
+const LABEL_CHAR = 7.5;
+/** A marker label sits at the inline end of its dot, or flips when it would overflow. */
+export function markerLabelFlips(point, size = MAP_BLOCK_SIZE) {
+    return point.x + 16 + point.label.length * LABEL_CHAR > size.width;
+}
+/**
+ * Basemap features whose labels stay clear of the marker labels: a feature
+ * label inside a marker label's box (on whichever side the label sits) is
+ * dropped, so place names never print over each other.
+ */
+export function clearFeatureLabels(features, markers, size = MAP_BLOCK_SIZE) {
+    const boxes = markers
+        .filter((marker) => marker.visible)
+        .map((marker) => {
+        const width = 16 + marker.label.length * LABEL_CHAR;
+        const flips = markerLabelFlips(marker, size);
+        return {
+            left: flips ? marker.x - width : marker.x - 16,
+            right: flips ? marker.x + 16 : marker.x + width,
+            top: marker.y - 16,
+            bottom: marker.y + 16,
+        };
+    });
+    return features.map((feature) => {
+        const label = feature.label;
+        if (!label)
+            return feature;
+        const hit = boxes.some((box) => label.x >= box.left && label.x <= box.right && label.y >= box.top && label.y <= box.bottom);
+        if (!hit)
+            return feature;
+        const { label: _dropped, ...rest } = feature;
+        return rest;
+    });
+}
+/**
+ * Keyboard map: arrows pan (geography, so not mirrored in RTL), `+`/`=` and
+ * `-` zoom, `0` and Home reset.
+ */
+export function mapKeyAction(key) {
+    switch (key) {
+        case 'ArrowUp':
+            return 'pan-up';
+        case 'ArrowDown':
+            return 'pan-down';
+        case 'ArrowLeft':
+            return 'pan-left';
+        case 'ArrowRight':
+            return 'pan-right';
+        case '+':
+        case '=':
+            return 'zoom-in';
+        case '-':
+        case '_':
+            return 'zoom-out';
+        case '0':
+        case 'Home':
+            return 'reset';
+        default:
+            return undefined;
+    }
+}
+/** Applies a keyboard or button action to a view. */
+export function applyMapAction(view, action, home, size = MAP_BLOCK_SIZE) {
+    switch (action) {
+        case 'pan-up':
+            return panBy(view, 0, MAP_PAN_STEP, size);
+        case 'pan-down':
+            return panBy(view, 0, -MAP_PAN_STEP, size);
+        case 'pan-left':
+            return panBy(view, MAP_PAN_STEP, 0, size);
+        case 'pan-right':
+            return panBy(view, -MAP_PAN_STEP, 0, size);
+        case 'zoom-in':
+            return zoomAround(view, 1, size);
+        case 'zoom-out':
+            return zoomAround(view, -1, size);
+        default:
+            return home;
+    }
+}
+/** Marker class per tone; untoned points use the brand emphasis. */
+export function toneClass(tone) {
+    return `tone-${tone ?? 'accent'}`;
+}

package/dist/media/MediaBlockView.svelte

@@ -0,0 +1,258 @@
+<script lang="ts">
+import { onMount } from 'svelte';
+import { checkMediaBlock } from './check.js';
+import type { MediaBlockViewProps } from './family.js';
+import { resolveMediaBlockLabels } from './labels.js';
+import { resolveBlockMediaSrc } from './resolve.js';
+
+/**
+ * Media family renderer: image, figure, video and gallery. Untrusted data
+ * passes `checkMediaBlock` before anything renders; rejected blocks become an
+ * inert notice. Sources use the block media classifier (no remote URLs).
+ */
+let { block, labels, resolveAvatar, oninvalid }: MediaBlockViewProps = $props();
+
+const check = $derived(checkMediaBlock(block));
+const text = $derived(resolveMediaBlockLabels(labels));
+
+let reducedMotion = $state(false);
+let motionKnown = $state(false);
+
+onMount(() => {
+  const query = window.matchMedia('(prefers-reduced-motion: reduce)');
+  const update = () => {
+    reducedMotion = query.matches;
+  };
+  update();
+  motionKnown = true;
+  query.addEventListener('change', update);
+  return () => query.removeEventListener('change', update);
+});
+
+$effect(() => {
+  if (!check.ok) oninvalid?.(check.issues);
+});
+
+function imageAlt(decorative: boolean | undefined, alt: string | undefined): string {
+  return decorative === true ? '' : (alt ?? '');
+}
+</script>
+
+{#if !check.ok}
+  <p class="tx-block tx-block-invalid" role="note" data-tx-block="invalid">{text.invalid}</p>
+{:else}
+  {@const b = check.block}
+  {#if b.type === 'image' || b.type === 'figure'}
+    {@const src = resolveBlockMediaSrc(b.src, 'image', resolveAvatar)}
+    <figure
+      class="tx-block tx-media-figure"
+      data-tx-block={b.type}
+      data-tone={b.tone}
+      data-fit={b.fit ?? 'cover'}
+    >
+      {#if src}
+        <img
+          {src}
+          alt={imageAlt(b.decorative, b.alt)}
+          width={b.width}
+          height={b.height}
+          loading="lazy"
+          decoding="async"
+          referrerpolicy="no-referrer"
+          class="tx-media-img"
+          data-tx-media-img
+        />
+      {:else}
+        <span class="tx-media-fallback" role="img" aria-label={imageAlt(b.decorative, b.alt) || text.galleryFallback}
+          >{text.galleryFallback}</span
+        >
+      {/if}
+      {#if b.caption || b.credit}
+        <figcaption class="tx-media-caption" data-tx-media-caption>
+          {#if b.caption}<span class="tx-media-caption-text">{b.caption}</span>{/if}
+          {#if b.credit}
+            <span class="tx-media-credit">{b.caption ? ` · ${b.credit}` : b.credit}</span>
+          {/if}
+        </figcaption>
+      {/if}
+    </figure>
+  {:else if b.type === 'video'}
+    {@const src = resolveBlockMediaSrc(b.src, 'video')}
+    {@const poster = b.poster ? resolveBlockMediaSrc(b.poster, 'image', resolveAvatar) : undefined}
+    {@const canAutoplay = b.autoplay === true && b.muted === true && motionKnown && !reducedMotion}
+    <figure class="tx-block tx-media-figure" data-tx-block="video" data-tone={b.tone}>
+      {#if src}
+        <video
+          {src}
+          {poster}
+          width={b.width}
+          height={b.height}
+          aria-label={b.label}
+          controls={b.controls !== false}
+          playsinline
+          muted={b.muted === true || canAutoplay}
+          loop={b.loop === true}
+          autoplay={canAutoplay}
+          preload="metadata"
+          class="tx-media-video"
+          data-tx-media-video
+        ></video>
+      {:else}
+        <span class="tx-media-fallback" role="img" aria-label={b.label}>{text.galleryFallback}</span>
+      {/if}
+      {#if b.caption}
+        <figcaption class="tx-media-caption" data-tx-media-caption>{b.caption}</figcaption>
+      {/if}
+    </figure>
+  {:else}
+    {@const columns = b.columns ?? 3}
+    <section
+      class="tx-block tx-media-gallery"
+      data-tx-block="gallery"
+      data-tone={b.tone}
+      data-columns={columns}
+      aria-label={b.title}
+      style={`--tx-gallery-cols: ${columns}`}
+    >
+      {#if b.title}
+        <h3 class="tx-media-gallery-title" data-tx-media-gallery-title>{b.title}</h3>
+      {/if}
+      <ul class="tx-media-gallery-list" data-tx-media-gallery-list>
+        {#each b.items as item, i (i)}
+          {@const src = resolveBlockMediaSrc(item.src, 'image', resolveAvatar)}
+          <li class="tx-media-gallery-item">
+            <figure class="tx-media-gallery-figure">
+              {#if src}
+                <img
+                  {src}
+                  alt={imageAlt(item.decorative, item.alt)}
+                  width={item.width}
+                  height={item.height}
+                  loading="lazy"
+                  decoding="async"
+                  referrerpolicy="no-referrer"
+                  class="tx-media-img"
+                  data-tx-media-img
+                />
+              {:else}
+                <span
+                  class="tx-media-fallback"
+                  role="img"
+                  aria-label={imageAlt(item.decorative, item.alt) || text.galleryFallback}
+                  >{text.galleryFallback}</span
+                >
+              {/if}
+              {#if item.caption}
+                <figcaption class="tx-media-caption" data-tx-media-caption>{item.caption}</figcaption>
+              {/if}
+            </figure>
+          </li>
+        {/each}
+      </ul>
+    </section>
+  {/if}
+{/if}
+
+<style>
+  .tx-block {
+    margin: 0;
+    overflow-wrap: anywhere;
+    color: var(--tx-foreground, CanvasText);
+  }
+
+  .tx-media-figure,
+  .tx-media-gallery-figure {
+    display: grid;
+    gap: 0.5rem;
+    margin: 0;
+  }
+
+  .tx-media-img,
+  .tx-media-video {
+    display: block;
+    max-inline-size: 100%;
+    block-size: auto;
+    border-radius: var(--tx-radius-md, 0.375rem);
+    border: 1px solid var(--tx-border, currentColor);
+    background-color: var(--tx-muted, Canvas);
+  }
+
+  .tx-media-figure[data-fit='contain'] .tx-media-img {
+    object-fit: contain;
+  }
+
+  .tx-media-figure[data-fit='cover'] .tx-media-img,
+  .tx-media-gallery-figure .tx-media-img {
+    object-fit: cover;
+  }
+
+  .tx-media-video {
+    inline-size: 100%;
+  }
+
+  .tx-media-caption {
+    margin: 0;
+    font-size: var(--tx-font-size-sm, 0.875rem);
+    color: var(--tx-muted-foreground, GrayText);
+  }
+
+  .tx-media-credit {
+    font-style: normal;
+  }
+
+  .tx-media-fallback {
+    display: grid;
+    place-items: center;
+    min-block-size: 6rem;
+    padding: 0.75rem;
+    border: 1px dashed var(--tx-border, currentColor);
+    border-radius: var(--tx-radius-md, 0.375rem);
+    background-color: var(--tx-muted, Canvas);
+    color: var(--tx-muted-foreground, GrayText);
+    font-size: 0.875rem;
+    text-align: center;
+  }
+
+  .tx-media-gallery {
+    display: grid;
+    gap: 0.75rem;
+  }
+
+  .tx-media-gallery-title {
+    margin: 0;
+    font-size: var(--tx-font-size-base, 1rem);
+    font-weight: var(--tx-font-weight-heading, 600);
+  }
+
+  .tx-media-gallery-list {
+    display: grid;
+    gap: 0.75rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(min(100%, calc(100% / var(--tx-gallery-cols, 3) - 0.5rem)), 1fr)
+    );
+  }
+
+  .tx-media-gallery-item {
+    margin: 0;
+    min-inline-size: 0;
+  }
+
+  .tx-block-invalid {
+    padding: 0.5em 0.75em;
+    border: 1px dashed currentColor;
+    border-radius: 0.375em;
+    font-size: 0.875em;
+  }
+
+  @media (forced-colors: active) {
+    .tx-media-img,
+    .tx-media-video,
+    .tx-media-fallback {
+      border-color: ButtonText;
+    }
+  }
+</style>

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

@@ -0,0 +1,5 @@
+/// <reference path="../css-modules.d.ts" />
+import type { MediaBlockViewProps } from './family.js';
+declare const MediaBlockView: import("svelte").Component<MediaBlockViewProps, {}, "">;
+type MediaBlockView = ReturnType<typeof MediaBlockView>;
+export default MediaBlockView;

package/dist/media/check.d.ts

@@ -0,0 +1,14 @@
+import type { FieldIssue } from '../core/schema/primitives.js';
+import type { MediaFamilyBlock } from './engine.js';
+export type MediaBlockCheck = {
+    ok: true;
+    block: MediaFamilyBlock;
+} | {
+    ok: false;
+    issues: FieldIssue[];
+};
+/**
+ * The only way data reaches a media renderer: untrusted input runs through the
+ * block schemas, then must be one of the media family types.
+ */
+export declare function checkMediaBlock(value: unknown): MediaBlockCheck;

package/dist/media/check.js

@@ -0,0 +1,13 @@
+import { parseMediaFamilyBlock } from "../core/schema/media-family.js";
+import { parseFamilyBlock } from "../core/schema/parse-family.js";
+/**
+ * The only way data reaches a media renderer: untrusted input runs through the
+ * block schemas, then must be one of the media family types.
+ */
+export function checkMediaBlock(value) {
+    // Only this family's parser: the renderer does not bundle every family's rules.
+    const parsed = parseFamilyBlock(value, [parseMediaFamilyBlock], 'media');
+    if (!parsed.success)
+        return { ok: false, issues: parsed.issues };
+    return { ok: true, block: parsed.data };
+}