@valbuild/tanstack 0.140.2 → 0.141.1

package/CHANGELOG.md

@@ -1,5 +1,79 @@
 # @valbuild/tanstack
 
+## 0.141.1
+
+### Patch Changes
+
+- Updated dependencies [[`6faacda`](https://github.com/valbuild/val/commit/6faacda398fc92bec187b7afe07a53228a6f2a3b), [`14b18d7`](https://github.com/valbuild/val/commit/14b18d7cb145cec1bc1cd832b9ca857ff4b45adc)]:
+  - @valbuild/ui@0.141.1
+  - @valbuild/server@0.141.1
+  - @valbuild/react@0.141.1
+  - @valbuild/language-server@0.141.1
+  - @valbuild/mcp@0.141.1
+
+## 0.141.0
+
+### Minor Changes
+
+- [#779](https://github.com/valbuild/val/pull/779) [`ba3f330`](https://github.com/valbuild/val/commit/ba3f3300a3dd8649e154097cdfca3b64db209d89) Thanks [@freekh](https://github.com/freekh)! - New: `s.video()`, for mp4/WebM files and HLS streams.
+
+  ```ts
+  const schema = s.object({
+    intro: s.video({ stream: { type: "hls" } }),
+  });
+  ```
+
+  - **Upload and play in the Studio.** A video field shows a player, the file's size and length, and progress while it uploads.
+  - **HLS streaming without a video service.** With `stream: { type: "hls" }`, the Studio converts an upload to an HLS stream in the editor's browser before it uploads it. It makes one H.264 rendition per height (1080p, 720p and 480p by default, and never larger than the upload) and stores them as a folder of files next to your other uploads. Nothing is installed in your app for this: the converter ships inside the Studio and is only downloaded when someone uploads to a streaming field. A browser that can't convert (no WebCodecs, or a non-https address) uploads the original file and says so.
+  - **Poster:** pause on a frame and choose "Use current frame". The frame is saved as an image, and `posterTime` records where it was taken.
+  - **Start and end:** play part of a video without cutting the file.
+  - **Focal point:** marks what must stay in frame when the page crops the video.
+  - **Description:** text for people who can't see the video.
+  - **Captions:** one WebVTT file per language. `.srt` files are converted on upload.
+  - **`<ValVideo>`** in `@valbuild/next` and `@valbuild/tanstack` renders all of the above and is click-to-edit. For HLS in browsers that can't play it natively, pass `hls={() => import("hls.js")}`. It is only loaded when it's needed.
+  - **Rename** a video in the Studio. An HLS stream is renamed as a whole: every playlist and segment moves to the new folder.
+  - `npx val validate --fix` fills in `mimeType`, `width`, `height` and `duration` for a hand-written `.mp4`, `.mov`, `.webm`, `.mkv` or HLS video, on disk or on Val Remote. A remote video is not downloaded: only its headers are read, usually in one to three small requests.
+  - `.remote()` works for videos. `npx val validate --fix` moves a video to Val Remote, or back into the project, together with its poster, captions and every file of an HLS stream.
+
+  A video value always has a `mimeType`: it is how a page knows whether it has an `.mp4` or an `.m3u8`.
+
+  New: `s.videoset()`, a collection of videos, like `s.imageset()` for images.
+
+  ```ts
+  const videosVal = c.define(
+    "/content/videos.val.ts",
+    s.videoset({ dir: "/public/val/videos", stream: { type: "hls" } }),
+    {},
+  );
+  const schema = s.object({ intro: s.video(videosVal) });
+  ```
+
+  - **Upload once, set it up once, use anywhere.** A set's entry holds what is true of the file (its type, size and length) and, as defaults, a description, poster, start and end, focal point and captions. A field that picks from the set (`s.video(videosVal)`) gets all of those, and can override any of them on its own. For example, the same clip can open one page at 0:02 and every other page where the set says.
+  - **Media in the Studio.** A set is listed under Media and opens as a gallery of videos, with each video's poster as its thumbnail. Hovering a video previews it, and the selected video plays in a real player (HLS streams too) beside the poster, times, focal point and captions you edit for it. You can upload into the set (with `stream`, uploads become HLS streams, and each upload gets a poster), rename a video, and delete a video that nothing uses. Renaming a video updates every field that uses it. An HLS stream is one entry, and renaming or deleting it moves or removes all of its files.
+  - **Picking.** A set-backed field picks from the set, or uploads into it. Each value the set provides is marked "From gallery · Override", and once overridden, "Overridden · Use gallery's".
+  - `useVal` and `fetchVal` fill in what the set holds (`mimeType`, `width`, `height`, `duration`, and every default the field does not override), so `<ValVideo>` works the same either way.
+  - `.remote()` works for sets. `npx val validate --fix` fills in missing metadata for an entry, adds untracked videos found in the set's directory, and moves a set's videos to Val Remote.
+
+  Image and file galleries use the same new gallery layout: a grid or list of entries, with the selected one open in a panel beside it.
+
+  - An `s.imageset()` entry can hold a default focal point, as well as its description. An `s.image(galleryVal)` field shows both, and can override either.
+  - Fixed: outside draft mode, `useVal` and `fetchVal` now fill a gallery-backed image or file from its gallery (dimensions, mime type, description). Before, a published page got only the `path`.
+
+### Patch Changes
+
+- [#801](https://github.com/valbuild/val/pull/801) [`9cbe428`](https://github.com/valbuild/val/commit/9cbe42895d006d55c3d993dc27f0779808b85306) Thanks [@freekh](https://github.com/freekh)! - Emptying a field in the preview's "On this page" list no longer removes it from the list while you are editing it.
+
+  The list shows what the page renders, and a field you empty often renders nothing: an empty rich text, an image set to none, or a link whose label was cleared. The row you were typing in used to vanish, taking your cursor with it, and clearing a link's label also removed its URL from the list. Now a field you have worked on stays where it was, marked "Not on page", until you reload the page with the canvas's reload button or go to another page. A field you delete from the content, such as a removed list item, still goes away at once.
+
+- Updated dependencies [[`199e214`](https://github.com/valbuild/val/commit/199e21471d98806fb34c579cb876560078c928b9), [`9cbe428`](https://github.com/valbuild/val/commit/9cbe42895d006d55c3d993dc27f0779808b85306), [`fb5f097`](https://github.com/valbuild/val/commit/fb5f09721ac07f4d90b8502fdbee3fb3884d9688), [`6473a2e`](https://github.com/valbuild/val/commit/6473a2efe874f1749b27ed6f8ac4e0d19805edb1), [`ba3f330`](https://github.com/valbuild/val/commit/ba3f3300a3dd8649e154097cdfca3b64db209d89)]:
+  - @valbuild/core@0.141.0
+  - @valbuild/server@0.141.0
+  - @valbuild/shared@0.141.0
+  - @valbuild/ui@0.141.0
+  - @valbuild/language-server@0.141.0
+  - @valbuild/react@0.141.0
+  - @valbuild/mcp@0.141.0
+
 ## 0.140.2
 
 ### Patch Changes

package/dist/declarations/src/ValVideo.d.ts

@@ -0,0 +1,50 @@
+import { Video } from "@valbuild/react/stega";
+/**
+ * What `ValVideo` needs from hls.js — written out rather than imported, so
+ * this package typechecks in an app that has never installed it.
+ */
+type HlsLike = {
+    loadSource(url: string): void;
+    attachMedia(media: HTMLMediaElement): void;
+    destroy(): void;
+};
+type HlsConstructorLike = {
+    new (): HlsLike;
+    isSupported(): boolean;
+};
+export type ValVideoProps = Omit<React.ComponentProps<"video">, "src" | "poster" | "children"> & {
+    src: Video;
+    /**
+     * How to play an HLS stream in a browser that cannot play one itself, which
+     * is every browser but Safari (and recent Chrome). Pass a loader for hls.js:
+     *
+     * ```tsx
+     * <ValVideo src={page.intro} hls={() => import("hls.js")} />
+     * ```
+     *
+     * It is called only when the video IS a stream and the browser needs it, so
+     * a page of plain mp4s never downloads it. Without it, such a browser shows
+     * the poster and an unplayable player.
+     */
+    hls?: () => Promise<{
+        default: HlsConstructorLike;
+    }>;
+    /** Ignore the video's hotspot instead of applying it as object-position. */
+    disableHotspot?: boolean;
+    /** Leave out the caption tracks. */
+    disableCaptions?: boolean;
+};
+/**
+ * A `<video>` for a Val video, with everything the Studio lets an editor set:
+ * the poster, the caption tracks, the start and end time, and the focal point
+ * as `object-position`. Like `ValImage`, the edit tag on `src.url` is moved to
+ * `data-val-path`, so the video is click-to-edit and the URL the browser
+ * fetches is clean.
+ *
+ * Start and end are applied by the player rather than by cutting the file: it
+ * seeks to `startTime` when the video loads and pauses at `endTime`. For a
+ * progressive file the `#t=` media fragment says the same thing to the
+ * browser before any script runs.
+ */
+export declare function ValVideo(props: ValVideoProps): import("react").JSX.Element;
+export {};

package/dist/declarations/src/external_exempt_from_val_quickjs.d.ts

@@ -1,7 +1,7 @@
 export { Schema, type SerializedSchema } from "@valbuild/core";
 export type { SourceObject, SourcePrimitive, Source } from "@valbuild/core";
 export type { ValModule, SerializedModule } from "@valbuild/core";
-export type { FileSource, ImageSource, MediaSource } from "@valbuild/core";
+export type { FileSource, ImageSource, MediaSource, VideoSource, } from "@valbuild/core";
 export type { RichTextSource } from "@valbuild/core";
 export { type Val, type SerializedVal, type ModuleFilePath, type ModulePath, type SourcePath, type JsonOfSource, } from "@valbuild/core";
 export { modules, type ValModules } from "@valbuild/core";
@@ -13,10 +13,11 @@ export { VAL_EXTENSION, type SourceArray } from "@valbuild/core";
 export { derefPatch } from "@valbuild/core";
 export { type SelectorSource, type SelectorOf, GenericSelector, } from "@valbuild/core";
 export { ValRichText } from "@valbuild/react/internal";
-export { type ValEncodedString, type File, type Image, type RichText, } from "@valbuild/react/stega";
+export { type ValEncodedString, type File, type Image, type Video, type RichText, } from "@valbuild/react/stega";
 export { ValProvider } from "./ValProvider.js";
 export type { ValDraft } from "./ValDraft.js";
 export { ValImage, type ValImageProps } from "./ValImage.js";
+export { ValVideo, type ValVideoProps } from "./ValVideo.js";
 export { ValApp } from "./ValApp.js";
 export { ValModulesClient, useRegisterValModules } from "./ValModulesClient.js";
 import { Internal as InternalCore } from "@valbuild/core";

package/dist/valbuild-tanstack.cjs.dev.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = require('./version-7dd0b309.cjs.dev.js');
+var version = require('./version-e04493d5.cjs.dev.js');
 var createForOfIteratorHelper = require('./createForOfIteratorHelper-4497beef.cjs.dev.js');
 var core = require('@valbuild/core');
 var stega = require('@valbuild/react/stega');
@@ -325,8 +325,20 @@ function ValCanvasBridge(_ref) {
           measured = parent;
         }
       }
+      /**
+       * Skipped only when it has no box at all — `display: none`, or inside
+       * something that is — and NOT when the box is merely empty.
+       *
+       * A field emptied in the Studio is still on the page: an inline element
+       * whose only text is the invisible edit tag measures 0×0, and it is the
+       * field being edited. Dropping it took the field out of the Studio's
+       * "On this page" column mid-edit, and with it every other path on the
+       * same element: clearing a link's label also removed its `href`. What the
+       * column needs to know is whether the content is on the page, and an
+       * empty box answers yes.
+       */
+      if (measured.getClientRects().length === 0) return;
       var rect = measured.getBoundingClientRect();
-      if (rect.width === 0 && rect.height === 0) return;
       elements.push({
         // Split by the same helper the rest of Val uses, so the studio gets
         // the paths back in exactly the form it holds them in.
@@ -1786,7 +1798,7 @@ function _objectWithoutProperties(e, t) {
   return i;
 }
 
-var _excluded = ["src", "alt", "style", "width", "disableHotspot", "height"];
+var _excluded$1 = ["src", "alt", "style", "width", "disableHotspot", "height"];
 function ValImage(props) {
   var src = props.src,
     alt = props.alt,
@@ -1794,7 +1806,7 @@ function ValImage(props) {
     width = props.width,
     disableHotspot = props.disableHotspot,
     height = props.height,
-    rest = _objectWithoutProperties(props, _excluded);
+    rest = _objectWithoutProperties(props, _excluded$1);
   var valPathsOfUrl = src !== null && src !== void 0 && src.url ? decodeValPathsOfString(src.url) : undefined;
   var valPaths = valPathsOfUrl ? valPathsOfUrl : [];
   var maybeValPathOfAlt = alt ? decodeValPathsOfString(alt) : undefined;
@@ -1832,6 +1844,147 @@ function ValImage(props) {
   }));
 }
 
+var _excluded = ["src", "hls", "disableHotspot", "disableCaptions", "style", "width", "height"];
+/**
+ * A `<video>` for a Val video, with everything the Studio lets an editor set:
+ * the poster, the caption tracks, the start and end time, and the focal point
+ * as `object-position`. Like `ValImage`, the edit tag on `src.url` is moved to
+ * `data-val-path`, so the video is click-to-edit and the URL the browser
+ * fetches is clean.
+ *
+ * Start and end are applied by the player rather than by cutting the file: it
+ * seeks to `startTime` when the video loads and pauses at `endTime`. For a
+ * progressive file the `#t=` media fragment says the same thing to the
+ * browser before any script runs.
+ */
+function ValVideo(props) {
+  var _src$mimeType, _src$poster, _rest$ariaLabel, _src$captions;
+  var src = props.src,
+    hls = props.hls,
+    disableHotspot = props.disableHotspot,
+    disableCaptions = props.disableCaptions,
+    style = props.style,
+    width = props.width,
+    height = props.height,
+    rest = _objectWithoutProperties(props, _excluded);
+  var ref = React.useRef(null);
+  /** The latest loader, read when a stream is attached; see the effect below. */
+  var hlsRef = React.useRef(hls);
+  React.useEffect(function () {
+    hlsRef.current = hls;
+  }, [hls]);
+  var hasHls = hls !== undefined;
+  var valPathsOfUrl = src !== null && src !== void 0 && src.url ? decodeValPathsOfString(src.url) : undefined;
+  var url = src !== null && src !== void 0 && src.url ? valPathsOfUrl && valPathsOfUrl.length > 0 ? stega.raw(src.url) : src.url : undefined;
+  var isHls = (src === null || src === void 0 ? void 0 : src.mimeType) === "application/vnd.apple.mpegurl" || (src === null || src === void 0 || (_src$mimeType = src.mimeType) === null || _src$mimeType === void 0 ? void 0 : _src$mimeType.toLowerCase()) === "application/x-mpegurl";
+  var startTime = src === null || src === void 0 ? void 0 : src.startTime;
+  var endTime = src === null || src === void 0 ? void 0 : src.endTime;
+  React.useEffect(function () {
+    var video = ref.current;
+    if (!video || !url) {
+      return;
+    }
+    if (!isHls || video.canPlayType("application/vnd.apple.mpegurl") !== "") {
+      video.src = !isHls && (startTime !== undefined || endTime !== undefined) ? "".concat(url, "#t=").concat(startTime !== null && startTime !== void 0 ? startTime : 0).concat(endTime !== undefined ? ",".concat(endTime) : "") : url;
+      return function () {
+        video.removeAttribute("src");
+        video.load();
+      };
+    }
+    var loadHls = hlsRef.current;
+    if (!loadHls) {
+      console.warn('Val: this browser cannot play HLS streams on its own. Pass `hls={() => import("hls.js")}` to ValVideo.');
+      return;
+    }
+    var destroyed = false;
+    var instance = null;
+    loadHls().then(function (_ref) {
+      var Hls = _ref["default"];
+      if (destroyed || !Hls.isSupported()) {
+        return;
+      }
+      instance = new Hls();
+      instance.loadSource(url);
+      instance.attachMedia(video);
+    });
+    return function () {
+      var _instance;
+      destroyed = true;
+      (_instance = instance) === null || _instance === void 0 || _instance.destroy();
+    };
+    // `hasHls`, not `hls`: the loader is passed inline (`hls={() => import(…)}`),
+    // so its identity changes on every render of the parent, and depending on
+    // it tore playback down and started it again for a render that changed
+    // nothing about the video.
+  }, [url, isHls, hasHls, startTime, endTime]);
+  React.useEffect(function () {
+    var video = ref.current;
+    if (!video || startTime === undefined && endTime === undefined) {
+      return;
+    }
+    var onLoaded = function onLoaded() {
+      if (startTime !== undefined && video.currentTime < startTime) {
+        video.currentTime = startTime;
+      }
+    };
+    var onTimeUpdate = function onTimeUpdate() {
+      if (endTime !== undefined && video.currentTime >= endTime) {
+        if (video.loop) {
+          video.currentTime = startTime !== null && startTime !== void 0 ? startTime : 0;
+        } else {
+          video.pause();
+        }
+      }
+    };
+    // Play pressed at the end (or before the start): from the start again.
+    // Without this a video stopped at its end could not be played again —
+    // every play landed past the end and was paused on the next tick.
+    var onPlay = function onPlay() {
+      if (endTime !== undefined && video.currentTime >= endTime || startTime !== undefined && video.currentTime < startTime) {
+        video.currentTime = startTime !== null && startTime !== void 0 ? startTime : 0;
+      }
+    };
+    video.addEventListener("loadedmetadata", onLoaded);
+    video.addEventListener("timeupdate", onTimeUpdate);
+    video.addEventListener("play", onPlay);
+    return function () {
+      video.removeEventListener("loadedmetadata", onLoaded);
+      video.removeEventListener("timeupdate", onTimeUpdate);
+      video.removeEventListener("play", onPlay);
+    };
+  }, [startTime, endTime]);
+  var hotspot = src === null || src === void 0 ? void 0 : src.hotspot;
+  var videoStyle = hotspot && !disableHotspot ? createForOfIteratorHelper._objectSpread2(createForOfIteratorHelper._objectSpread2({}, style), {}, {
+    objectPosition: "".concat(hotspot.x * 100, "% ").concat(hotspot.y * 100, "%")
+  }) : style;
+  // As for `ValImage`: the file's own size reserves the space, unless the
+  // caller is sizing the element.
+  var preferMetadataDims = ((src === null || src === void 0 ? void 0 : src.width) !== undefined || (src === null || src === void 0 ? void 0 : src.height) !== undefined) && !width && !height;
+  return /*#__PURE__*/jsxRuntime.jsx("video", createForOfIteratorHelper._objectSpread2(createForOfIteratorHelper._objectSpread2({
+    playsInline: true,
+    preload: "metadata"
+  }, rest), {}, {
+    ref: ref,
+    poster: src === null || src === void 0 || (_src$poster = src.poster) === null || _src$poster === void 0 ? void 0 : _src$poster.url,
+    "aria-label": (_rest$ariaLabel = rest["aria-label"]) !== null && _rest$ariaLabel !== void 0 ? _rest$ariaLabel : src !== null && src !== void 0 && src.alt ? stega.raw(src.alt) : undefined,
+    "data-val-path": valPathsOfUrl === null || valPathsOfUrl === void 0 ? void 0 : valPathsOfUrl.join(","),
+    "data-val-attr-src": valPathsOfUrl === null || valPathsOfUrl === void 0 ? void 0 : valPathsOfUrl.join(","),
+    style: videoStyle,
+    width: preferMetadataDims ? src === null || src === void 0 ? void 0 : src.width : width,
+    height: preferMetadataDims ? src === null || src === void 0 ? void 0 : src.height : height,
+    children: !disableCaptions && (src === null || src === void 0 || (_src$captions = src.captions) === null || _src$captions === void 0 ? void 0 : _src$captions.map(function (track) {
+      var _track$kind;
+      return /*#__PURE__*/jsxRuntime.jsx("track", {
+        src: track.url,
+        srcLang: track.srclang,
+        label: track.label ? stega.raw(track.label) : track.srclang,
+        kind: (_track$kind = track.kind) !== null && _track$kind !== void 0 ? _track$kind : "subtitles",
+        "default": track["default"]
+      }, track.url);
+    }))
+  }));
+}
+
 var VAL_READY_PING_MS = 100;
 var ValApp = function ValApp(_ref) {
   var config = _ref.config,
@@ -2050,5 +2203,6 @@ exports.ValApp = ValApp;
 exports.ValImage = ValImage;
 exports.ValModulesClient = ValModulesClient;
 exports.ValProvider = ValProvider;
+exports.ValVideo = ValVideo;
 exports.initVal = initVal;
 exports.useRegisterValModules = useRegisterValModules;

package/dist/valbuild-tanstack.cjs.prod.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = require('./version-a29cfb8e.cjs.prod.js');
+var version = require('./version-1205910c.cjs.prod.js');
 var createForOfIteratorHelper = require('./createForOfIteratorHelper-9afd7d2d.cjs.prod.js');
 var core = require('@valbuild/core');
 var stega = require('@valbuild/react/stega');
@@ -325,8 +325,20 @@ function ValCanvasBridge(_ref) {
           measured = parent;
         }
       }
+      /**
+       * Skipped only when it has no box at all — `display: none`, or inside
+       * something that is — and NOT when the box is merely empty.
+       *
+       * A field emptied in the Studio is still on the page: an inline element
+       * whose only text is the invisible edit tag measures 0×0, and it is the
+       * field being edited. Dropping it took the field out of the Studio's
+       * "On this page" column mid-edit, and with it every other path on the
+       * same element: clearing a link's label also removed its `href`. What the
+       * column needs to know is whether the content is on the page, and an
+       * empty box answers yes.
+       */
+      if (measured.getClientRects().length === 0) return;
       var rect = measured.getBoundingClientRect();
-      if (rect.width === 0 && rect.height === 0) return;
       elements.push({
         // Split by the same helper the rest of Val uses, so the studio gets
         // the paths back in exactly the form it holds them in.
@@ -1786,7 +1798,7 @@ function _objectWithoutProperties(e, t) {
   return i;
 }
 
-var _excluded = ["src", "alt", "style", "width", "disableHotspot", "height"];
+var _excluded$1 = ["src", "alt", "style", "width", "disableHotspot", "height"];
 function ValImage(props) {
   var src = props.src,
     alt = props.alt,
@@ -1794,7 +1806,7 @@ function ValImage(props) {
     width = props.width,
     disableHotspot = props.disableHotspot,
     height = props.height,
-    rest = _objectWithoutProperties(props, _excluded);
+    rest = _objectWithoutProperties(props, _excluded$1);
   var valPathsOfUrl = src !== null && src !== void 0 && src.url ? decodeValPathsOfString(src.url) : undefined;
   var valPaths = valPathsOfUrl ? valPathsOfUrl : [];
   var maybeValPathOfAlt = alt ? decodeValPathsOfString(alt) : undefined;
@@ -1832,6 +1844,147 @@ function ValImage(props) {
   }));
 }
 
+var _excluded = ["src", "hls", "disableHotspot", "disableCaptions", "style", "width", "height"];
+/**
+ * A `<video>` for a Val video, with everything the Studio lets an editor set:
+ * the poster, the caption tracks, the start and end time, and the focal point
+ * as `object-position`. Like `ValImage`, the edit tag on `src.url` is moved to
+ * `data-val-path`, so the video is click-to-edit and the URL the browser
+ * fetches is clean.
+ *
+ * Start and end are applied by the player rather than by cutting the file: it
+ * seeks to `startTime` when the video loads and pauses at `endTime`. For a
+ * progressive file the `#t=` media fragment says the same thing to the
+ * browser before any script runs.
+ */
+function ValVideo(props) {
+  var _src$mimeType, _src$poster, _rest$ariaLabel, _src$captions;
+  var src = props.src,
+    hls = props.hls,
+    disableHotspot = props.disableHotspot,
+    disableCaptions = props.disableCaptions,
+    style = props.style,
+    width = props.width,
+    height = props.height,
+    rest = _objectWithoutProperties(props, _excluded);
+  var ref = React.useRef(null);
+  /** The latest loader, read when a stream is attached; see the effect below. */
+  var hlsRef = React.useRef(hls);
+  React.useEffect(function () {
+    hlsRef.current = hls;
+  }, [hls]);
+  var hasHls = hls !== undefined;
+  var valPathsOfUrl = src !== null && src !== void 0 && src.url ? decodeValPathsOfString(src.url) : undefined;
+  var url = src !== null && src !== void 0 && src.url ? valPathsOfUrl && valPathsOfUrl.length > 0 ? stega.raw(src.url) : src.url : undefined;
+  var isHls = (src === null || src === void 0 ? void 0 : src.mimeType) === "application/vnd.apple.mpegurl" || (src === null || src === void 0 || (_src$mimeType = src.mimeType) === null || _src$mimeType === void 0 ? void 0 : _src$mimeType.toLowerCase()) === "application/x-mpegurl";
+  var startTime = src === null || src === void 0 ? void 0 : src.startTime;
+  var endTime = src === null || src === void 0 ? void 0 : src.endTime;
+  React.useEffect(function () {
+    var video = ref.current;
+    if (!video || !url) {
+      return;
+    }
+    if (!isHls || video.canPlayType("application/vnd.apple.mpegurl") !== "") {
+      video.src = !isHls && (startTime !== undefined || endTime !== undefined) ? "".concat(url, "#t=").concat(startTime !== null && startTime !== void 0 ? startTime : 0).concat(endTime !== undefined ? ",".concat(endTime) : "") : url;
+      return function () {
+        video.removeAttribute("src");
+        video.load();
+      };
+    }
+    var loadHls = hlsRef.current;
+    if (!loadHls) {
+      console.warn('Val: this browser cannot play HLS streams on its own. Pass `hls={() => import("hls.js")}` to ValVideo.');
+      return;
+    }
+    var destroyed = false;
+    var instance = null;
+    loadHls().then(function (_ref) {
+      var Hls = _ref["default"];
+      if (destroyed || !Hls.isSupported()) {
+        return;
+      }
+      instance = new Hls();
+      instance.loadSource(url);
+      instance.attachMedia(video);
+    });
+    return function () {
+      var _instance;
+      destroyed = true;
+      (_instance = instance) === null || _instance === void 0 || _instance.destroy();
+    };
+    // `hasHls`, not `hls`: the loader is passed inline (`hls={() => import(…)}`),
+    // so its identity changes on every render of the parent, and depending on
+    // it tore playback down and started it again for a render that changed
+    // nothing about the video.
+  }, [url, isHls, hasHls, startTime, endTime]);
+  React.useEffect(function () {
+    var video = ref.current;
+    if (!video || startTime === undefined && endTime === undefined) {
+      return;
+    }
+    var onLoaded = function onLoaded() {
+      if (startTime !== undefined && video.currentTime < startTime) {
+        video.currentTime = startTime;
+      }
+    };
+    var onTimeUpdate = function onTimeUpdate() {
+      if (endTime !== undefined && video.currentTime >= endTime) {
+        if (video.loop) {
+          video.currentTime = startTime !== null && startTime !== void 0 ? startTime : 0;
+        } else {
+          video.pause();
+        }
+      }
+    };
+    // Play pressed at the end (or before the start): from the start again.
+    // Without this a video stopped at its end could not be played again —
+    // every play landed past the end and was paused on the next tick.
+    var onPlay = function onPlay() {
+      if (endTime !== undefined && video.currentTime >= endTime || startTime !== undefined && video.currentTime < startTime) {
+        video.currentTime = startTime !== null && startTime !== void 0 ? startTime : 0;
+      }
+    };
+    video.addEventListener("loadedmetadata", onLoaded);
+    video.addEventListener("timeupdate", onTimeUpdate);
+    video.addEventListener("play", onPlay);
+    return function () {
+      video.removeEventListener("loadedmetadata", onLoaded);
+      video.removeEventListener("timeupdate", onTimeUpdate);
+      video.removeEventListener("play", onPlay);
+    };
+  }, [startTime, endTime]);
+  var hotspot = src === null || src === void 0 ? void 0 : src.hotspot;
+  var videoStyle = hotspot && !disableHotspot ? createForOfIteratorHelper._objectSpread2(createForOfIteratorHelper._objectSpread2({}, style), {}, {
+    objectPosition: "".concat(hotspot.x * 100, "% ").concat(hotspot.y * 100, "%")
+  }) : style;
+  // As for `ValImage`: the file's own size reserves the space, unless the
+  // caller is sizing the element.
+  var preferMetadataDims = ((src === null || src === void 0 ? void 0 : src.width) !== undefined || (src === null || src === void 0 ? void 0 : src.height) !== undefined) && !width && !height;
+  return /*#__PURE__*/jsxRuntime.jsx("video", createForOfIteratorHelper._objectSpread2(createForOfIteratorHelper._objectSpread2({
+    playsInline: true,
+    preload: "metadata"
+  }, rest), {}, {
+    ref: ref,
+    poster: src === null || src === void 0 || (_src$poster = src.poster) === null || _src$poster === void 0 ? void 0 : _src$poster.url,
+    "aria-label": (_rest$ariaLabel = rest["aria-label"]) !== null && _rest$ariaLabel !== void 0 ? _rest$ariaLabel : src !== null && src !== void 0 && src.alt ? stega.raw(src.alt) : undefined,
+    "data-val-path": valPathsOfUrl === null || valPathsOfUrl === void 0 ? void 0 : valPathsOfUrl.join(","),
+    "data-val-attr-src": valPathsOfUrl === null || valPathsOfUrl === void 0 ? void 0 : valPathsOfUrl.join(","),
+    style: videoStyle,
+    width: preferMetadataDims ? src === null || src === void 0 ? void 0 : src.width : width,
+    height: preferMetadataDims ? src === null || src === void 0 ? void 0 : src.height : height,
+    children: !disableCaptions && (src === null || src === void 0 || (_src$captions = src.captions) === null || _src$captions === void 0 ? void 0 : _src$captions.map(function (track) {
+      var _track$kind;
+      return /*#__PURE__*/jsxRuntime.jsx("track", {
+        src: track.url,
+        srcLang: track.srclang,
+        label: track.label ? stega.raw(track.label) : track.srclang,
+        kind: (_track$kind = track.kind) !== null && _track$kind !== void 0 ? _track$kind : "subtitles",
+        "default": track["default"]
+      }, track.url);
+    }))
+  }));
+}
+
 var VAL_READY_PING_MS = 100;
 var ValApp = function ValApp(_ref) {
   var config = _ref.config,
@@ -2050,5 +2203,6 @@ exports.ValApp = ValApp;
 exports.ValImage = ValImage;
 exports.ValModulesClient = ValModulesClient;
 exports.ValProvider = ValProvider;
+exports.ValVideo = ValVideo;
 exports.initVal = initVal;
 exports.useRegisterValModules = useRegisterValModules;

package/dist/valbuild-tanstack.esm.js

@@ -1,4 +1,4 @@
-import { _ as _asyncToGenerator, a as _regenerator, r as readValEnableCookie, V as VERSION$1 } from './version-6d26340d.esm.js';
+import { _ as _asyncToGenerator, a as _regenerator, r as readValEnableCookie, V as VERSION$1 } from './version-2cca9e77.esm.js';
 import { _ as _objectSpread2, a as _slicedToArray, b as _createForOfIteratorHelper } from './createForOfIteratorHelper-93a62170.esm.js';
 import { Internal as Internal$1, initVal as initVal$1, DEFAULT_CONTENT_HOST } from '@valbuild/core';
 import * as core from '@valbuild/core';
@@ -8,7 +8,7 @@ import { stegaEncode, stegaDecodeStrings, attrs, raw, SET_AUTO_TAG_JSX_ENABLED,
 export { ValRichText } from '@valbuild/react/internal';
 import { VERSION, VAL_APP_PATH, VAL_OVERLAY_ID, VAL_APP_ID } from '@valbuild/ui';
 import { useRouter, useRouterState } from '@tanstack/react-router';
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { V as ValExternalStore, a as ValOverlayProvider } from './ValOverlayContext-28101df3.esm.js';
 import { VAL_CONFIG_SESSION_STORAGE_KEY, VAL_THEME_SESSION_STORAGE_KEY, VAL_CANVAS_MESSAGE, DEFAULT_CANVAS_SELECTION, DEFAULT_CANVAS_SELECTION_SOFT, isValCanvasStudioMessage, isValCanvasFrame } from '@valbuild/shared/client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -301,8 +301,20 @@ function ValCanvasBridge(_ref) {
           measured = parent;
         }
       }
+      /**
+       * Skipped only when it has no box at all — `display: none`, or inside
+       * something that is — and NOT when the box is merely empty.
+       *
+       * A field emptied in the Studio is still on the page: an inline element
+       * whose only text is the invisible edit tag measures 0×0, and it is the
+       * field being edited. Dropping it took the field out of the Studio's
+       * "On this page" column mid-edit, and with it every other path on the
+       * same element: clearing a link's label also removed its `href`. What the
+       * column needs to know is whether the content is on the page, and an
+       * empty box answers yes.
+       */
+      if (measured.getClientRects().length === 0) return;
       var rect = measured.getBoundingClientRect();
-      if (rect.width === 0 && rect.height === 0) return;
       elements.push({
         // Split by the same helper the rest of Val uses, so the studio gets
         // the paths back in exactly the form it holds them in.
@@ -1762,7 +1774,7 @@ function _objectWithoutProperties(e, t) {
   return i;
 }
 
-var _excluded = ["src", "alt", "style", "width", "disableHotspot", "height"];
+var _excluded$1 = ["src", "alt", "style", "width", "disableHotspot", "height"];
 function ValImage(props) {
   var src = props.src,
     alt = props.alt,
@@ -1770,7 +1782,7 @@ function ValImage(props) {
     width = props.width,
     disableHotspot = props.disableHotspot,
     height = props.height,
-    rest = _objectWithoutProperties(props, _excluded);
+    rest = _objectWithoutProperties(props, _excluded$1);
   var valPathsOfUrl = src !== null && src !== void 0 && src.url ? decodeValPathsOfString(src.url) : undefined;
   var valPaths = valPathsOfUrl ? valPathsOfUrl : [];
   var maybeValPathOfAlt = alt ? decodeValPathsOfString(alt) : undefined;
@@ -1808,6 +1820,147 @@ function ValImage(props) {
   }));
 }
 
+var _excluded = ["src", "hls", "disableHotspot", "disableCaptions", "style", "width", "height"];
+/**
+ * A `<video>` for a Val video, with everything the Studio lets an editor set:
+ * the poster, the caption tracks, the start and end time, and the focal point
+ * as `object-position`. Like `ValImage`, the edit tag on `src.url` is moved to
+ * `data-val-path`, so the video is click-to-edit and the URL the browser
+ * fetches is clean.
+ *
+ * Start and end are applied by the player rather than by cutting the file: it
+ * seeks to `startTime` when the video loads and pauses at `endTime`. For a
+ * progressive file the `#t=` media fragment says the same thing to the
+ * browser before any script runs.
+ */
+function ValVideo(props) {
+  var _src$mimeType, _src$poster, _rest$ariaLabel, _src$captions;
+  var src = props.src,
+    hls = props.hls,
+    disableHotspot = props.disableHotspot,
+    disableCaptions = props.disableCaptions,
+    style = props.style,
+    width = props.width,
+    height = props.height,
+    rest = _objectWithoutProperties(props, _excluded);
+  var ref = useRef(null);
+  /** The latest loader, read when a stream is attached; see the effect below. */
+  var hlsRef = useRef(hls);
+  useEffect(function () {
+    hlsRef.current = hls;
+  }, [hls]);
+  var hasHls = hls !== undefined;
+  var valPathsOfUrl = src !== null && src !== void 0 && src.url ? decodeValPathsOfString(src.url) : undefined;
+  var url = src !== null && src !== void 0 && src.url ? valPathsOfUrl && valPathsOfUrl.length > 0 ? raw(src.url) : src.url : undefined;
+  var isHls = (src === null || src === void 0 ? void 0 : src.mimeType) === "application/vnd.apple.mpegurl" || (src === null || src === void 0 || (_src$mimeType = src.mimeType) === null || _src$mimeType === void 0 ? void 0 : _src$mimeType.toLowerCase()) === "application/x-mpegurl";
+  var startTime = src === null || src === void 0 ? void 0 : src.startTime;
+  var endTime = src === null || src === void 0 ? void 0 : src.endTime;
+  useEffect(function () {
+    var video = ref.current;
+    if (!video || !url) {
+      return;
+    }
+    if (!isHls || video.canPlayType("application/vnd.apple.mpegurl") !== "") {
+      video.src = !isHls && (startTime !== undefined || endTime !== undefined) ? "".concat(url, "#t=").concat(startTime !== null && startTime !== void 0 ? startTime : 0).concat(endTime !== undefined ? ",".concat(endTime) : "") : url;
+      return function () {
+        video.removeAttribute("src");
+        video.load();
+      };
+    }
+    var loadHls = hlsRef.current;
+    if (!loadHls) {
+      console.warn('Val: this browser cannot play HLS streams on its own. Pass `hls={() => import("hls.js")}` to ValVideo.');
+      return;
+    }
+    var destroyed = false;
+    var instance = null;
+    loadHls().then(function (_ref) {
+      var Hls = _ref["default"];
+      if (destroyed || !Hls.isSupported()) {
+        return;
+      }
+      instance = new Hls();
+      instance.loadSource(url);
+      instance.attachMedia(video);
+    });
+    return function () {
+      var _instance;
+      destroyed = true;
+      (_instance = instance) === null || _instance === void 0 || _instance.destroy();
+    };
+    // `hasHls`, not `hls`: the loader is passed inline (`hls={() => import(…)}`),
+    // so its identity changes on every render of the parent, and depending on
+    // it tore playback down and started it again for a render that changed
+    // nothing about the video.
+  }, [url, isHls, hasHls, startTime, endTime]);
+  useEffect(function () {
+    var video = ref.current;
+    if (!video || startTime === undefined && endTime === undefined) {
+      return;
+    }
+    var onLoaded = function onLoaded() {
+      if (startTime !== undefined && video.currentTime < startTime) {
+        video.currentTime = startTime;
+      }
+    };
+    var onTimeUpdate = function onTimeUpdate() {
+      if (endTime !== undefined && video.currentTime >= endTime) {
+        if (video.loop) {
+          video.currentTime = startTime !== null && startTime !== void 0 ? startTime : 0;
+        } else {
+          video.pause();
+        }
+      }
+    };
+    // Play pressed at the end (or before the start): from the start again.
+    // Without this a video stopped at its end could not be played again —
+    // every play landed past the end and was paused on the next tick.
+    var onPlay = function onPlay() {
+      if (endTime !== undefined && video.currentTime >= endTime || startTime !== undefined && video.currentTime < startTime) {
+        video.currentTime = startTime !== null && startTime !== void 0 ? startTime : 0;
+      }
+    };
+    video.addEventListener("loadedmetadata", onLoaded);
+    video.addEventListener("timeupdate", onTimeUpdate);
+    video.addEventListener("play", onPlay);
+    return function () {
+      video.removeEventListener("loadedmetadata", onLoaded);
+      video.removeEventListener("timeupdate", onTimeUpdate);
+      video.removeEventListener("play", onPlay);
+    };
+  }, [startTime, endTime]);
+  var hotspot = src === null || src === void 0 ? void 0 : src.hotspot;
+  var videoStyle = hotspot && !disableHotspot ? _objectSpread2(_objectSpread2({}, style), {}, {
+    objectPosition: "".concat(hotspot.x * 100, "% ").concat(hotspot.y * 100, "%")
+  }) : style;
+  // As for `ValImage`: the file's own size reserves the space, unless the
+  // caller is sizing the element.
+  var preferMetadataDims = ((src === null || src === void 0 ? void 0 : src.width) !== undefined || (src === null || src === void 0 ? void 0 : src.height) !== undefined) && !width && !height;
+  return /*#__PURE__*/jsx("video", _objectSpread2(_objectSpread2({
+    playsInline: true,
+    preload: "metadata"
+  }, rest), {}, {
+    ref: ref,
+    poster: src === null || src === void 0 || (_src$poster = src.poster) === null || _src$poster === void 0 ? void 0 : _src$poster.url,
+    "aria-label": (_rest$ariaLabel = rest["aria-label"]) !== null && _rest$ariaLabel !== void 0 ? _rest$ariaLabel : src !== null && src !== void 0 && src.alt ? raw(src.alt) : undefined,
+    "data-val-path": valPathsOfUrl === null || valPathsOfUrl === void 0 ? void 0 : valPathsOfUrl.join(","),
+    "data-val-attr-src": valPathsOfUrl === null || valPathsOfUrl === void 0 ? void 0 : valPathsOfUrl.join(","),
+    style: videoStyle,
+    width: preferMetadataDims ? src === null || src === void 0 ? void 0 : src.width : width,
+    height: preferMetadataDims ? src === null || src === void 0 ? void 0 : src.height : height,
+    children: !disableCaptions && (src === null || src === void 0 || (_src$captions = src.captions) === null || _src$captions === void 0 ? void 0 : _src$captions.map(function (track) {
+      var _track$kind;
+      return /*#__PURE__*/jsx("track", {
+        src: track.url,
+        srcLang: track.srclang,
+        label: track.label ? raw(track.label) : track.srclang,
+        kind: (_track$kind = track.kind) !== null && _track$kind !== void 0 ? _track$kind : "subtitles",
+        "default": track["default"]
+      }, track.url);
+    }))
+  }));
+}
+
 var VAL_READY_PING_MS = 100;
 var ValApp = function ValApp(_ref) {
   var config = _ref.config,
@@ -1996,4 +2149,4 @@ var Internal = _objectSpread2(_objectSpread2({}, Internal$1), {}, {
   })
 });
 
-export { Internal, ValApp, ValImage, ValModulesClient, ValProvider, initVal, useRegisterValModules };
+export { Internal, ValApp, ValImage, ValModulesClient, ValProvider, ValVideo, initVal, useRegisterValModules };

package/dist/{version-7dd0b309.cjs.dev.js → version-1205910c.cjs.prod.js}

@@ -212,7 +212,7 @@ var packageJson = {
 		"tanstack-router",
 		"react"
 	],
-	version: "0.140.2",
+	version: "0.141.1",
 	scripts: {
 		typecheck: "tsc --noEmit",
 		test: "jest"

package/dist/{version-6d26340d.esm.js → version-2cca9e77.esm.js}

@@ -210,7 +210,7 @@ var packageJson = {
 		"tanstack-router",
 		"react"
 	],
-	version: "0.140.2",
+	version: "0.141.1",
 	scripts: {
 		typecheck: "tsc --noEmit",
 		test: "jest"

package/dist/{version-a29cfb8e.cjs.prod.js → version-e04493d5.cjs.dev.js}

@@ -212,7 +212,7 @@ var packageJson = {
 		"tanstack-router",
 		"react"
 	],
-	version: "0.140.2",
+	version: "0.141.1",
 	scripts: {
 		typecheck: "tsc --noEmit",
 		test: "jest"

package/package.json

@@ -14,7 +14,7 @@
     "tanstack-router",
     "react"
   ],
-  "version": "0.140.2",
+  "version": "0.141.1",
   "main": "dist/valbuild-tanstack.cjs.js",
   "module": "dist/valbuild-tanstack.esm.js",
   "exports": {
@@ -42,13 +42,13 @@
     "exports": true
   },
   "dependencies": {
-    "@valbuild/core": "0.139.1",
-    "@valbuild/language-server": "0.140.2",
-    "@valbuild/mcp": "0.140.2",
-    "@valbuild/react": "0.140.2",
-    "@valbuild/shared": "0.140.2",
-    "@valbuild/server": "0.140.2",
-    "@valbuild/ui": "0.140.2"
+    "@valbuild/core": "0.141.0",
+    "@valbuild/language-server": "0.141.1",
+    "@valbuild/mcp": "0.141.1",
+    "@valbuild/react": "0.141.1",
+    "@valbuild/server": "0.141.1",
+    "@valbuild/shared": "0.141.0",
+    "@valbuild/ui": "0.141.1"
   },
   "devDependencies": {
     "@tanstack/react-router": "^1.170.41",

package/server/dist/valbuild-tanstack-server.cjs.dev.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = require('../../dist/version-7dd0b309.cjs.dev.js');
+var version = require('../../dist/version-e04493d5.cjs.dev.js');
 var core = require('@valbuild/core');
 var createForOfIteratorHelper = require('../../dist/createForOfIteratorHelper-4497beef.cjs.dev.js');
 var server = require('@valbuild/server');

package/server/dist/valbuild-tanstack-server.cjs.prod.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = require('../../dist/version-a29cfb8e.cjs.prod.js');
+var version = require('../../dist/version-1205910c.cjs.prod.js');
 var core = require('@valbuild/core');
 var createForOfIteratorHelper = require('../../dist/createForOfIteratorHelper-9afd7d2d.cjs.prod.js');
 var server = require('@valbuild/server');

package/server/dist/valbuild-tanstack-server.esm.js

@@ -1,4 +1,4 @@
-import { _ as _asyncToGenerator, a as _regenerator, V as VERSION, s as setValEnableCookieReader } from '../../dist/version-6d26340d.esm.js';
+import { _ as _asyncToGenerator, a as _regenerator, V as VERSION, s as setValEnableCookieReader } from '../../dist/version-2cca9e77.esm.js';
 import { Internal } from '@valbuild/core';
 import { _ as _objectSpread2, a as _slicedToArray, e as _arrayLikeToArray, f as _unsupportedIterableToArray, b as _createForOfIteratorHelper, d as _defineProperty } from '../../dist/createForOfIteratorHelper-93a62170.esm.js';
 import { createValApiRouter, createValServer } from '@valbuild/server';