@openrails/contentkit-ui 0.0.0-stage → 0.68.0

package/dist/react/upload.js

@@ -0,0 +1,150 @@
+import { toContentKitError as e } from "../client/errors.js";
+import { ratio as t } from "../client/aspect.js";
+import { centeredCrop as n, constrainCrop as r, editOf as i, rotation as a, sameEdit as o, toOriginal as s } from "../client/crop.js";
+import { encodeRemaining as c } from "../client/media/encode.js";
+import { UploadQueue as l } from "../client/media/queue.js";
+import { useContentKitClient as u } from "./context.js";
+import { useCallback as d, useEffect as f, useMemo as p, useRef as m, useState as h, useSyncExternalStore as g } from "react";
+//#region src/react/upload.ts
+function _({ client: e, ...t }) {
+	let n = u(e), [r] = h(() => new l(n.media, {
+		...t,
+		autoStart: !1
+	})), i = t.autoStart ?? !0;
+	return f(() => (i && r.start(), () => r.pause()), [r, i]), {
+		...g(r.subscribe, r.getSnapshot, r.getSnapshot),
+		queue: r,
+		add: r.add.bind(r),
+		move: r.move.bind(r),
+		update: r.update.bind(r),
+		remove: r.remove.bind(r),
+		retry: r.retry.bind(r),
+		start: r.start.bind(r),
+		pause: r.pause.bind(r),
+		commit: r.commit.bind(r)
+	};
+}
+function v({ client: t } = {}) {
+	let { media: n } = u(t), [r, i] = h({ status: "idle" }), a = m(null);
+	f(() => () => a.current?.abort(), []);
+	let o = d(async (t, { put: r, ...o }) => {
+		a.current?.abort();
+		let s = a.current = new AbortController();
+		i({ status: "uploading" });
+		let c = {
+			...o,
+			signal: s.signal,
+			onProgress: (e) => s === a.current && i({
+				status: "uploading",
+				progress: e
+			})
+		};
+		try {
+			let e;
+			if (r) {
+				let i, a = await n.put(t, {
+					...c,
+					...r,
+					onUploaded: (e) => i = e
+				});
+				e = {
+					...i,
+					file: a
+				};
+			} else e = await n.upload(t, c);
+			return s === a.current && i((t) => ({
+				status: "done",
+				progress: t.progress,
+				result: e
+			})), e;
+		} catch (t) {
+			let n = e(t);
+			throw s === a.current && i(n.code === "aborted" ? { status: "idle" } : {
+				status: "error",
+				error: n
+			}), n;
+		}
+	}, [n]), s = d(() => a.current?.abort(), []);
+	return {
+		...r,
+		upload: o,
+		cancel: s
+	};
+}
+function y({ source: e, aspect: c, initial: l }) {
+	let u = t(c), { width: f, height: g } = e, _ = p(() => ({
+		width: f,
+		height: g
+	}), [f, g]), [v, y] = h(() => {
+		let e = a(l?.rotate ?? 0), t = l?.crop;
+		return [t ? r(t, _, u, e) : n(_, u, e), e];
+	}), [b, x] = v, S = d((e) => y((t) => {
+		let n = typeof e == "function" ? e(t) : e;
+		return o({
+			crop: n[0],
+			rotate: n[1]
+		}, {
+			crop: t[0],
+			rotate: t[1]
+		}) ? t : n;
+	}), []), C = d((e) => S(([, t]) => [r(e, _, u, t), t]), [
+		S,
+		_,
+		u
+	]), w = d((e, t) => S(([, n]) => [r(s(e, t, _, n), _, u, n), n]), [
+		S,
+		_,
+		u
+	]), T = d((e) => S(([t, n]) => {
+		let i = a(n + e);
+		return [r(t, _, u, i), i];
+	}), [
+		S,
+		_,
+		u
+	]), E = d(() => S([n(_, u), 0]), [
+		S,
+		_,
+		u
+	]), D = m(null);
+	return {
+		crop: b,
+		rotate: x,
+		edit: p(() => {
+			let e = i(b, _, x);
+			return o(e, D.current) ? D.current : D.current = e;
+		}, [
+			b,
+			_,
+			x
+		]),
+		setCrop: C,
+		setFromDisplay: w,
+		rotateBy: T,
+		reset: E
+	};
+}
+function b(e) {
+	let [t, n] = h(() => ({
+		at: e?.at,
+		received: Date.now()
+	}));
+	e?.at !== t.at && n({
+		at: e?.at,
+		received: Date.now()
+	});
+	let [r, i] = h(() => Date.now()), a = !!e?.eta && !e.stalled;
+	return f(() => {
+		if (!a) return;
+		i(Date.now());
+		let e = setInterval(() => i(Date.now()), 1e3);
+		return () => clearInterval(e);
+	}, [a, t]), {
+		progress: e ?? void 0,
+		remaining: c(e, t.received, Math.max(r, t.received))
+	};
+}
+//#endregion
+export { y as useCrop, b as useEncodeProgress, v as useUpload, _ as useUploadQueue };
+
+//# sourceMappingURL=upload.js.map

package/dist/react/upload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"upload.js","names":[],"sources":["../../src/react/upload.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from \"react\";\nimport { ratio, type AspectRatio } from \"../client/aspect.js\";\nimport type { ContentKitClient } from \"../client/client.js\";\nimport { centeredCrop, constrainCrop, editOf, rotation, sameEdit, toOriginal, type Rotation, type Size } from \"../client/crop.js\";\nimport { toContentKitError, type ContentKitError } from \"../client/errors.js\";\nimport type { Crop, Edit, EncodeProgress, FileInfo } from \"../client/generated/wire.js\";\nimport type { Progress, PutOptions, UploadedFile, UploadOptions } from \"../client/media/client.js\";\nimport { encodeRemaining } from \"../client/media/encode.js\";\nimport { UploadQueue, type QueueOptions, type QueueSnapshot } from \"../client/media/queue.js\";\nimport { useContentKitClient } from \"./context.js\";\n\nexport interface UseUploadQueue extends QueueSnapshot {\n  queue: UploadQueue;\n  add: UploadQueue[\"add\"];\n  move: UploadQueue[\"move\"];\n  update: UploadQueue[\"update\"];\n  remove: UploadQueue[\"remove\"];\n  retry: UploadQueue[\"retry\"];\n  start: UploadQueue[\"start\"];\n  pause: UploadQueue[\"pause\"];\n  commit: UploadQueue[\"commit\"];\n}\n\nexport interface UploadQueueOptions extends QueueOptions {\n  /** Overrides the provider's client. */\n  client?: ContentKitClient;\n}\n\n/**\n * A file queue for one item (options are read once; key the component by\n * ref to switch items). Unmounting pauses running uploads.\n */\nexport function useUploadQueue({ client: own, ...options }: UploadQueueOptions): UseUploadQueue {\n  const client = useContentKitClient(own);\n  const [queue] = useState(() => new UploadQueue(client.media, { ...options, autoStart: false }));\n  const autoStart = options.autoStart ?? true;\n  useEffect(() => {\n    if (autoStart) queue.start();\n    return () => queue.pause();\n  }, [queue, autoStart]);\n  const snap = useSyncExternalStore(queue.subscribe, queue.getSnapshot, queue.getSnapshot);\n  return {\n    ...snap,\n    queue,\n    add: queue.add.bind(queue),\n    move: queue.move.bind(queue),\n    update: queue.update.bind(queue),\n    remove: queue.remove.bind(queue),\n    retry: queue.retry.bind(queue),\n    start: queue.start.bind(queue),\n    pause: queue.pause.bind(queue),\n    commit: queue.commit.bind(queue),\n  };\n}\n\nexport interface UploadStatus {\n  status: \"idle\" | \"uploading\" | \"done\" | \"error\";\n  progress?: Progress;\n  error?: ContentKitError;\n  result?: UploadedFile & { file?: FileInfo };\n}\n\nexport interface UseUpload extends UploadStatus {\n  /**\n   * Uploads one file; with put it also commits it to its path (put's edit,\n   * meta and index) and waits until it is processed (result.file).\n   */\n  upload: (file: File, opts: Omit<UploadOptions, \"signal\" | \"onProgress\"> & { put?: PutOptions }) => Promise<UploadedFile & { file?: FileInfo }>;\n  cancel: () => void;\n}\n\n/** One upload at a time (a cover, an inline image); a new upload cancels the previous. */\nexport function useUpload({ client: own }: { client?: ContentKitClient } = {}): UseUpload {\n  const { media } = useContentKitClient(own);\n  const [s, set] = useState<UploadStatus>({ status: \"idle\" });\n  const ctl = useRef<AbortController | null>(null);\n  useEffect(() => () => ctl.current?.abort(), []);\n\n  const upload = useCallback<UseUpload[\"upload\"]>(\n    async (file, { put, ...opts }) => {\n      ctl.current?.abort();\n      const c = (ctl.current = new AbortController());\n      set({ status: \"uploading\" });\n      const o: UploadOptions = {\n        ...opts,\n        signal: c.signal,\n        onProgress: (progress) => c === ctl.current && set({ status: \"uploading\", progress }),\n      };\n      try {\n        let result: UploadedFile & { file?: FileInfo };\n        if (put) {\n          let up: UploadedFile | undefined;\n          const f = await media.put(file, { ...o, ...put, onUploaded: (u) => (up = u) });\n          result = { ...up!, file: f };\n        } else result = await media.upload(file, o);\n        if (c === ctl.current) set((prev) => ({ status: \"done\", progress: prev.progress, result }));\n        return result;\n      } catch (e) {\n        const error = toContentKitError(e);\n        if (c === ctl.current) set(error.code === \"aborted\" ? { status: \"idle\" } : { status: \"error\", error });\n        throw error;\n      }\n    },\n    [media],\n  );\n  const cancel = useCallback(() => ctl.current?.abort(), []);\n  return { ...s, upload, cancel };\n}\n\nexport interface UseCropOptions {\n  /** The upload's size (an editor read's w and h). */\n  source: Size;\n  /** The edited image's \"W:H\", e.g. the public preset's aspect; \"\" or omitted is free. */\n  aspect?: AspectRatio;\n  /** The current edit to start from. */\n  initial?: Edit | null;\n}\n\nexport interface UseCrop {\n  /** In original pixels, inside the source and at the aspect. */\n  crop: Crop;\n  rotate: Rotation;\n  /** Ready for an edit or put op; null when nothing changes. Its identity changes only with its value. */\n  edit: Edit | null;\n  /** A rect in original pixels. */\n  setCrop: (rect: Crop) => void;\n  /** A rect on the image as displayed (after the rotation) at display size: a cropper's output. */\n  setFromDisplay: (rect: Crop, display: Size) => void;\n  /** Turns clockwise by deg (a multiple of 90); the crop keeps the aspect. */\n  rotateBy: (deg: number) => void;\n  reset: () => void;\n}\n\n/** Headless crop state for any cropper UI: a rect in original pixels, a rotation and the resulting edit. */\nexport function useCrop({ source: given, aspect: shape, initial }: UseCropOptions): UseCrop {\n  const aspect = ratio(shape);\n  const { width, height } = given;\n  const source = useMemo(() => ({ width, height }), [width, height]);\n  const start = (): [Crop, Rotation] => {\n    const rotate = rotation(initial?.rotate ?? 0);\n    const c = initial?.crop;\n    return [c ? constrainCrop(c, source, aspect, rotate) : centeredCrop(source, aspect, rotate), rotate];\n  };\n  const [state, setState] = useState(start);\n  const [crop, rotate] = state;\n  const set = useCallback(\n    (next: [Crop, Rotation] | ((s: [Crop, Rotation]) => [Crop, Rotation])) =>\n      setState((s) => {\n        const n = typeof next === \"function\" ? next(s) : next;\n        return sameEdit({ crop: n[0], rotate: n[1] }, { crop: s[0], rotate: s[1] }) ? s : n;\n      }),\n    [],\n  );\n  const setCrop = useCallback((r: Crop) => set(([, rot]) => [constrainCrop(r, source, aspect, rot), rot]), [set, source, aspect]);\n  const setFromDisplay = useCallback(\n    (r: Crop, display: Size) => set(([, rot]) => [constrainCrop(toOriginal(r, display, source, rot), source, aspect, rot), rot]),\n    [set, source, aspect],\n  );\n  const rotateBy = useCallback(\n    (deg: number) =>\n      set(([c, rot]) => {\n        const next = rotation(rot + deg);\n        return [constrainCrop(c, source, aspect, next), next];\n      }),\n    [set, source, aspect],\n  );\n  const reset = useCallback(() => set([centeredCrop(source, aspect), 0]), [set, source, aspect]);\n  const last = useRef<Edit | null>(null);\n  const edit = useMemo(() => {\n    const e = editOf(crop, source, rotate);\n    return sameEdit(e, last.current) ? last.current : (last.current = e);\n  }, [crop, source, rotate]);\n  return { crop, rotate, edit, setCrop, setFromDisplay, rotateBy, reset };\n}\n\nexport interface UseEncodeProgress {\n  progress?: EncodeProgress;\n  /** Seconds left, counting down each second between reports; undefined while unknown. */\n  remaining?: number;\n}\n\n/**\n * A pending video file's encode progress from the read API (`files[i].progress`),\n * with the ETA counted down locally between polls.\n */\nexport function useEncodeProgress(progress?: EncodeProgress | null): UseEncodeProgress {\n  const [base, setBase] = useState(() => ({ at: progress?.at, received: Date.now() }));\n  if (progress?.at !== base.at) setBase({ at: progress?.at, received: Date.now() });\n  const [now, setNow] = useState(() => Date.now());\n  const ticking = !!progress?.eta && !progress.stalled;\n  useEffect(() => {\n    if (!ticking) return;\n    setNow(Date.now());\n    const id = setInterval(() => setNow(Date.now()), 1000);\n    return () => clearInterval(id);\n  }, [ticking, base]);\n  return { progress: progress ?? undefined, remaining: encodeRemaining(progress, base.received, Math.max(now, base.received)) };\n}\n"],"mappings":"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"}

package/dist/react/use-resource.d.ts

@@ -0,0 +1,43 @@
+import { ContentKitClient } from '../client/client.js';
+import { ContentKitError } from '../client/errors.js';
+import { Fetcher, Page, Resource, ResourceStore, Tag } from './resources.js';
+/** The client, its shared store, and the provider's viewer and sign-in. */
+export declare function useContentScope(own?: ContentKitClient | null): {
+    client: ContentKitClient;
+    store: ResourceStore;
+    viewer: string | null | undefined;
+    onSignIn: (() => void) | undefined;
+};
+/** A shared read: fetched once per key while shown; initial is shown (and seeds the store) until it loads. */
+export declare function useResource<T>(store: ResourceStore, key: string | null, tag: Tag, fetcher: Fetcher<T>, o?: {
+    initial?: T;
+    more?: (cursor: string | number, signal: AbortSignal) => Promise<Page<unknown>>;
+}): Resource<T> & {
+    reload: () => void;
+};
+/** A shared list, a page at a time. */
+export interface UseList<T> {
+    items: T[];
+    /** The first page is loading (also on reload). */
+    loading: boolean;
+    loadingMore: boolean;
+    error?: ContentKitError;
+    hasMore: boolean;
+    loadMore: () => Promise<void>;
+    reload: () => void;
+}
+export type PageFetcher<T> = (cursor: string | number | undefined, signal: AbortSignal) => Promise<Page<T>>;
+export declare function useList<T extends {
+    id: string;
+}>(store: ResourceStore, key: string | null, tag: Tag, page: PageFetcher<T>): UseList<T>;
+/**
+ * A limit/offset list as pages. A full page means more may follow; with
+ * underfill (the latest feed drops items the caller may not see) only an
+ * empty page ends it.
+ */
+export declare function offsetPages<T>(limit: number, list: (q: {
+    limit: number;
+    offset: number;
+}, signal: AbortSignal) => Promise<T[]>, underfill?: boolean): PageFetcher<T>;
+/** A stable store key. */
+export declare const keyOf: (...parts: unknown[]) => string;

package/dist/react/use-resource.js

@@ -0,0 +1,66 @@
+import { ContentKitContext as e, useContentKitClient as t } from "./context.js";
+import { resourcesFor as n } from "./resources.js";
+import { useCallback as r, useContext as i, useEffect as a, useRef as o, useSyncExternalStore as s } from "react";
+//#region src/react/use-resource.ts
+function c(r) {
+	let a = i(e), o = t(r);
+	return {
+		client: o,
+		store: n(o),
+		viewer: a?.viewer,
+		onSignIn: a?.onSignIn
+	};
+}
+var l = {
+	data: void 0,
+	loading: !1,
+	loaded: !1
+}, u = () => () => {};
+function d(e, t, n, i, c = {}) {
+	let d = o(i), f = o(c.more), p = o(c.initial);
+	a(() => {
+		d.current = i, f.current = c.more;
+	});
+	let m = r((r) => t ? e.subscribe(t, n, r) : u(), [e, t]), h = r(() => t ? e.snapshot(t) : l, [e, t]), g = s(m, h, h);
+	a(() => {
+		t && (e.bind(t, (e) => d.current(e), f.current && ((e, t) => f.current(e, t))), p.current !== void 0 && !e.snapshot(t).loaded && !e.snapshot(t).loading ? e.set(t, p.current) : e.load(t));
+	}, [e, t]);
+	let _ = r(() => t && e.load(t, !0), [e, t]);
+	return !g.loaded && c.initial !== void 0 ? {
+		...g,
+		data: c.initial,
+		reload: _
+	} : {
+		...g,
+		reload: _
+	};
+}
+function f(e, t, n, i) {
+	let a = d(e, t, n, (e) => i(void 0, e), { more: (e, t) => i(e, t) }), o = r(() => t ? e.loadMore(t) : Promise.resolve(), [e, t]);
+	return {
+		items: a.data?.items ?? [],
+		loading: a.loading || !!t && !a.loaded,
+		loadingMore: !!a.loadingMore,
+		error: a.error,
+		hasMore: a.data ? a.data.next !== null : !1,
+		loadMore: o,
+		reload: a.reload
+	};
+}
+function p(e, t, n = !1) {
+	return async (r, i) => {
+		let a = typeof r == "number" ? r : 0, o = await t({
+			limit: e,
+			offset: a
+		}, i);
+		return {
+			items: o,
+			next: (n ? o.length === 0 : o.length < e) ? null : a + e
+		};
+	};
+}
+var m = (...e) => JSON.stringify(e);
+//#endregion
+export { m as keyOf, p as offsetPages, c as useContentScope, f as useList, d as useResource };
+
+//# sourceMappingURL=use-resource.js.map

package/dist/react/use-resource.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-resource.js","names":[],"sources":["../../src/react/use-resource.ts"],"sourcesContent":["import { useCallback, useContext, useEffect, useRef, useSyncExternalStore } from \"react\";\nimport type { ContentKitClient } from \"../client/client.js\";\nimport type { ContentKitError } from \"../client/errors.js\";\nimport { ContentKitContext, useContentKitClient } from \"./context.js\";\nimport { resourcesFor, type Fetcher, type Page, type Resource, type ResourceStore, type Tag } from \"./resources.js\";\n\n/** The client, its shared store, and the provider's viewer and sign-in. */\nexport function useContentScope(own?: ContentKitClient | null) {\n  const ctx = useContext(ContentKitContext);\n  const client = useContentKitClient(own);\n  return { client, store: resourcesFor(client), viewer: ctx?.viewer, onSignIn: ctx?.onSignIn };\n}\n\nconst IDLE: Resource<never> = { data: undefined, loading: false, loaded: false };\nconst none = () => () => {};\n\n/** A shared read: fetched once per key while shown; initial is shown (and seeds the store) until it loads. */\nexport function useResource<T>(\n  store: ResourceStore,\n  key: string | null,\n  tag: Tag,\n  fetcher: Fetcher<T>,\n  o: { initial?: T; more?: (cursor: string | number, signal: AbortSignal) => Promise<Page<unknown>> } = {},\n): Resource<T> & { reload: () => void } {\n  const fetch = useRef(fetcher);\n  const more = useRef(o.more);\n  const initial = useRef(o.initial);\n  useEffect(() => {\n    fetch.current = fetcher;\n    more.current = o.more;\n  });\n  const subscribe = useCallback(\n    (l: () => void) => (key ? store.subscribe(key, tag, l) : none()),\n    // The tag is part of the key.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [store, key],\n  );\n  const snapshot = useCallback(() => (key ? store.snapshot<T>(key) : IDLE), [store, key]);\n  const entry = useSyncExternalStore(subscribe, snapshot, snapshot);\n  useEffect(() => {\n    if (!key) return;\n    store.bind(key, (s) => fetch.current(s), more.current && ((c, s) => more.current!(c, s)));\n    if (initial.current !== undefined && !store.snapshot(key).loaded && !store.snapshot(key).loading) store.set(key, initial.current);\n    else store.load(key);\n  }, [store, key]);\n  const reload = useCallback(() => key && store.load(key, true), [store, key]);\n  if (!entry.loaded && o.initial !== undefined) return { ...entry, data: o.initial, reload };\n  return { ...entry, reload };\n}\n\n/** A shared list, a page at a time. */\nexport interface UseList<T> {\n  items: T[];\n  /** The first page is loading (also on reload). */\n  loading: boolean;\n  loadingMore: boolean;\n  error?: ContentKitError;\n  hasMore: boolean;\n  loadMore: () => Promise<void>;\n  reload: () => void;\n}\n\nexport type PageFetcher<T> = (cursor: string | number | undefined, signal: AbortSignal) => Promise<Page<T>>;\n\nexport function useList<T extends { id: string }>(store: ResourceStore, key: string | null, tag: Tag, page: PageFetcher<T>): UseList<T> {\n  const r = useResource<Page<T>>(store, key, tag, (s) => page(undefined, s), { more: (c, s) => page(c, s) });\n  const loadMore = useCallback(() => (key ? store.loadMore(key) : Promise.resolve()), [store, key]);\n  return {\n    items: r.data?.items ?? [],\n    loading: r.loading || (!!key && !r.loaded),\n    loadingMore: !!r.loadingMore,\n    error: r.error,\n    hasMore: r.data ? r.data.next !== null : false,\n    loadMore,\n    reload: r.reload,\n  };\n}\n\n/**\n * A limit/offset list as pages. A full page means more may follow; with\n * underfill (the latest feed drops items the caller may not see) only an\n * empty page ends it.\n */\nexport function offsetPages<T>(limit: number, list: (q: { limit: number; offset: number }, signal: AbortSignal) => Promise<T[]>, underfill = false): PageFetcher<T> {\n  return async (cursor, signal) => {\n    const offset = typeof cursor === \"number\" ? cursor : 0;\n    const items = await list({ limit, offset }, signal);\n    const end = underfill ? items.length === 0 : items.length < limit;\n    return { items, next: end ? null : offset + limit };\n  };\n}\n\n/** A stable store key. */\nexport const keyOf = (...parts: unknown[]) => JSON.stringify(parts);\n"],"mappings":";;;;AAOA,SAAgB,EAAgB,GAA+B;CAC7D,IAAM,IAAM,EAAW,CAAiB,GAClC,IAAS,EAAoB,CAAG;CACtC,OAAO;EAAE;EAAQ,OAAO,EAAa,CAAM;EAAG,QAAQ,GAAK;EAAQ,UAAU,GAAK;CAAS;AAC7F;AAEA,IAAM,IAAwB;CAAE,MAAM,KAAA;CAAW,SAAS;CAAO,QAAQ;AAAM,GACzE,gBAAmB,CAAC;AAG1B,SAAgB,EACd,GACA,GACA,GACA,GACA,IAAsG,CAAC,GACjE;CACtC,IAAM,IAAQ,EAAO,CAAO,GACtB,IAAO,EAAO,EAAE,IAAI,GACpB,IAAU,EAAO,EAAE,OAAO;CAChC,QAAgB;EAEd,AADA,EAAM,UAAU,GAChB,EAAK,UAAU,EAAE;CACnB,CAAC;CACD,IAAM,IAAY,GACf,MAAmB,IAAM,EAAM,UAAU,GAAK,GAAK,CAAC,IAAI,EAAK,GAG9D,CAAC,GAAO,CAAG,CACb,GACM,IAAW,QAAmB,IAAM,EAAM,SAAY,CAAG,IAAI,GAAO,CAAC,GAAO,CAAG,CAAC,GAChF,IAAQ,EAAqB,GAAW,GAAU,CAAQ;CAChE,QAAgB;EACT,MACL,EAAM,KAAK,IAAM,MAAM,EAAM,QAAQ,CAAC,GAAG,EAAK,aAAa,GAAG,MAAM,EAAK,QAAS,GAAG,CAAC,EAAE,GACpF,EAAQ,YAAY,KAAA,KAAa,CAAC,EAAM,SAAS,CAAG,CAAC,CAAC,UAAU,CAAC,EAAM,SAAS,CAAG,CAAC,CAAC,UAAS,EAAM,IAAI,GAAK,EAAQ,OAAO,IAC3H,EAAM,KAAK,CAAG;CACrB,GAAG,CAAC,GAAO,CAAG,CAAC;CACf,IAAM,IAAS,QAAkB,KAAO,EAAM,KAAK,GAAK,EAAI,GAAG,CAAC,GAAO,CAAG,CAAC;CAE3E,OADI,CAAC,EAAM,UAAU,EAAE,YAAY,KAAA,IAAkB;EAAE,GAAG;EAAO,MAAM,EAAE;EAAS;CAAO,IAClF;EAAE,GAAG;EAAO;CAAO;AAC5B;AAgBA,SAAgB,EAAkC,GAAsB,GAAoB,GAAU,GAAkC;CACtI,IAAM,IAAI,EAAqB,GAAO,GAAK,IAAM,MAAM,EAAK,KAAA,GAAW,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM,EAAK,GAAG,CAAC,EAAE,CAAC,GACnG,IAAW,QAAmB,IAAM,EAAM,SAAS,CAAG,IAAI,QAAQ,QAAQ,GAAI,CAAC,GAAO,CAAG,CAAC;CAChG,OAAO;EACL,OAAO,EAAE,MAAM,SAAS,CAAC;EACzB,SAAS,EAAE,WAAY,CAAC,CAAC,KAAO,CAAC,EAAE;EACnC,aAAa,CAAC,CAAC,EAAE;EACjB,OAAO,EAAE;EACT,SAAS,EAAE,OAAO,EAAE,KAAK,SAAS,OAAO;EACzC;EACA,QAAQ,EAAE;CACZ;AACF;AAOA,SAAgB,EAAe,GAAe,GAAmF,IAAY,IAAuB;CAClK,OAAO,OAAO,GAAQ,MAAW;EAC/B,IAAM,IAAS,OAAO,KAAW,WAAW,IAAS,GAC/C,IAAQ,MAAM,EAAK;GAAE;GAAO;EAAO,GAAG,CAAM;EAElD,OAAO;GAAE;GAAO,OADJ,IAAY,EAAM,WAAW,IAAI,EAAM,SAAS,KAChC,OAAO,IAAS;EAAM;CACpD;AACF;AAGA,IAAa,KAAS,GAAG,MAAqB,KAAK,UAAU,CAAK"}

package/dist/react/video.d.ts

@@ -0,0 +1,118 @@
+import { ContentKitClient } from '../client/client.js';
+import { ContentKitError } from '../client/errors.js';
+import { Edit, FileInfo, ReadResult, RefBody } from '../client/generated/wire.js';
+import { Progress } from '../client/media/client.js';
+export interface VideoImagesOptions {
+    ref: RefBody;
+    /** The video upload path. Default "source". */
+    video?: string;
+    /** The poster upload path, grabbed from the video's frames. Default "poster". */
+    poster?: string;
+    /** An editor read of the item the host already has; skips the fetch. */
+    read?: ReadResult | null;
+    /** Overrides the provider's client; without one only a supplied read shows. */
+    client?: ContentKitClient | null;
+}
+export interface UseVideoImages {
+    /** The video upload (its duration and size once probed); null without one. */
+    video: FileInfo | null;
+    /** The poster upload: a frame ({t} or {auto}) or an uploaded image; null without one. */
+    poster: FileInfo | null;
+    loading: boolean;
+    error?: ContentKitError;
+    reload: () => void;
+    /** Replaces the poster after a save without refetching. */
+    set: (poster: FileInfo) => void;
+}
+/** A video item's video and poster uploads (an editor read). */
+export declare function useVideoImages(o: VideoImagesOptions): UseVideoImages;
+export interface FrameStripOptions {
+    ref: RefBody;
+    /** The video upload's path (a read's, with its extension). */
+    path?: string;
+    /** Seconds; nothing is fetched until it is known. */
+    duration?: number;
+    /** Frames across the video. Default 8. */
+    count?: number;
+    /** Pixels. Default 160. */
+    width?: number;
+    /** The first failed grab (the strip keeps going without it). */
+    onError?: (e: ContentKitError) => void;
+    /** Overrides the provider's client. */
+    client?: ContentKitClient;
+}
+export interface StripFrame {
+    time: number;
+    /** An object URL once fetched. */
+    url?: string;
+}
+/**
+ * Evenly spaced frames for coarse browsing, fetched one at a time (the frame
+ * endpoint allows two grabs at once per host), revoked on change or unmount.
+ */
+export declare function useFrameStrip(o: FrameStripOptions): StripFrame[];
+export interface VideoFrameOptions {
+    ref: RefBody;
+    /** The video upload's path; nothing is fetched without it. */
+    path?: string;
+    /** Seconds; undefined fetches nothing. */
+    time?: number;
+    /** Pixels. Default 640. */
+    width?: number;
+    /** Debounce while scrubbing, ms. Default 120. */
+    delay?: number;
+    onError?: (e: ContentKitError) => void;
+    /** Overrides the provider's client. */
+    client?: ContentKitClient;
+}
+export interface UseVideoFrame {
+    /** The latest fetched frame; kept while the next one loads. */
+    url?: string;
+    /** The time url shows. */
+    time?: number;
+    loading: boolean;
+    error?: ContentKitError;
+}
+/** The exact frame at time, debounced while it changes. */
+export declare function useVideoFrame(o: VideoFrameOptions): UseVideoFrame;
+export type VideoSaveState = {
+    status: "idle";
+} | {
+    status: "saving";
+    progress?: Progress;
+    rendering?: boolean;
+} | {
+    status: "error";
+    error: ContentKitError;
+};
+export interface VideoPosterOptions {
+    ref: RefBody;
+    /** The poster upload path. Default "poster". */
+    path?: string;
+    /** With the processed poster upload after each save. */
+    onSaved?: (poster: FileInfo) => void;
+    /** Polling limit for the render, ms. Default 120000. */
+    timeout?: number;
+    /** Every failed save: the request, the render or the wait. */
+    onError?: (e: ContentKitError) => void;
+    /** Overrides the provider's client. */
+    client?: ContentKitClient;
+}
+export interface UseVideoPoster {
+    state: VideoSaveState;
+    /** A frame at time (seconds), cropped by edit in the frame's pixels (the video's w×h). */
+    saveFrame: (time: number, edit?: Edit | null) => Promise<FileInfo | undefined>;
+    /** An uploaded image, cropped by edit in its own pixels. */
+    saveUpload: (image: Blob, edit?: Edit | null) => Promise<FileInfo | undefined>;
+    /** The worker's choice of frame. */
+    saveAuto: () => Promise<FileInfo | undefined>;
+    /**
+     * A frame of another item's video upload (at path, time seconds) uploaded
+     * as the poster image, cropped by edit in the frame's pixels.
+     */
+    saveFrameFrom: (video: RefBody, path: string, time: number, edit?: Edit | null) => Promise<FileInfo | undefined>;
+    reset: () => void;
+}
+/** Headless poster selection: a frame op or an uploaded image, then the wait for the worker to render it. */
+export declare function useVideoPoster(o: VideoPosterOptions): UseVideoPoster;
+export declare const round3: (v: number) => number;

package/dist/react/video.js

@@ -0,0 +1,184 @@
+import { toContentKitError as e } from "../client/errors.js";
+import { samePath as t } from "../client/media/client.js";
+import { useContentKitClient as n } from "./context.js";
+import { withUpload as r } from "./store.js";
+import { useMediaRead as i } from "./read.js";
+import { useCallback as a, useEffect as o, useRef as s, useState as c } from "react";
+//#region src/react/video.ts
+var l = e, u = (e) => `${e.kind}/${e.id}`;
+function d(e) {
+	let n = i(e.ref, {
+		editor: !0,
+		read: e.read,
+		client: e.client
+	}), o = (e) => n.read?.files.find((n) => n.upload && t(n.path, e)) ?? null, s = e.poster ?? "poster", { read: c, set: l } = n, u = a((e) => l(r(c, s, e)), [
+		c,
+		s,
+		l
+	]);
+	return {
+		video: o(e.video ?? "source"),
+		poster: o(s),
+		loading: n.loading,
+		error: n.error,
+		reload: n.reload,
+		set: u
+	};
+}
+function f(e) {
+	let { media: t } = n(e.client), r = e.count ?? 8, i = e.width ?? 160, a = e.duration ?? 0, d = `${u(e.ref)}#${e.path ?? ""}#${a}#${r}#${i}`, [f, p] = c({
+		key: "",
+		frames: []
+	}), m = s(e.ref);
+	m.current = e.ref;
+	let g = s(e.onError);
+	return g.current = e.onError, o(() => {
+		if (!(a > 0) || !e.path) return;
+		let n = e.path, o = new AbortController(), s = !1, c = Array.from({ length: r }, (e, t) => h((t + .5) / r * a)), u = [];
+		return p({
+			key: d,
+			frames: c.map((e) => ({ time: e }))
+		}), (async () => {
+			for (let [e, r] of c.entries()) try {
+				let a = await t.getFrame(m.current, n, r, i, o.signal);
+				if (o.signal.aborted) return;
+				let s = URL.createObjectURL(a);
+				u.push(s), p((t) => t.key === d ? {
+					key: d,
+					frames: t.frames.map((t, n) => n === e ? {
+						...t,
+						url: s
+					} : t)
+				} : t);
+			} catch (e) {
+				if (o.signal.aborted) return;
+				s || g.current?.(l(e)), s = !0;
+			}
+		})(), () => {
+			o.abort(), u.forEach((e) => URL.revokeObjectURL(e));
+		};
+	}, [
+		t,
+		d,
+		a,
+		r,
+		i,
+		e.path
+	]), f.key === d ? f.frames : [];
+}
+function p(e) {
+	let { media: t } = n(e.client), r = e.width ?? 640, i = e.delay ?? 120, [a, d] = c({ loading: !1 }), f = s(e.ref);
+	f.current = e.ref;
+	let p = s(void 0), m = s(e.onError);
+	m.current = e.onError;
+	let h = u(e.ref);
+	return o(() => {
+		if (e.time === void 0 || !e.path) return;
+		let n = e.time, a = e.path, o = new AbortController();
+		d((e) => ({
+			...e,
+			loading: !0,
+			error: void 0
+		}));
+		let s = setTimeout(() => {
+			t.getFrame(f.current, a, n, r, o.signal).then((e) => {
+				if (o.signal.aborted) return;
+				p.current && URL.revokeObjectURL(p.current);
+				let t = p.current = URL.createObjectURL(e);
+				d({
+					url: t,
+					time: n,
+					loading: !1
+				});
+			}, (e) => {
+				o.signal.aborted || (d((t) => ({
+					...t,
+					loading: !1,
+					error: l(e)
+				})), m.current?.(l(e)));
+			});
+		}, i);
+		return () => {
+			clearTimeout(s), o.abort();
+		};
+	}, [
+		t,
+		h,
+		e.path,
+		e.time,
+		r,
+		i
+	]), o(() => () => {
+		p.current && URL.revokeObjectURL(p.current);
+	}, []), a;
+}
+function m(e) {
+	let { media: t } = n(e.client), [r, i] = c({ status: "idle" }), o = s(e);
+	o.current = e;
+	let u = a(async (e) => {
+		i({ status: "saving" });
+		try {
+			let t = await e((e) => i({
+				status: "saving",
+				progress: e,
+				rendering: e.phase === "processing"
+			}));
+			return i({ status: "idle" }), o.current.onSaved?.(t), t;
+		} catch (e) {
+			let t = l(e);
+			i({
+				status: "error",
+				error: t
+			}), o.current.onError?.(t);
+			return;
+		}
+	}, []), d = a((e) => u(async (n) => {
+		let { ref: r, path: i = "poster", timeout: a } = o.current;
+		return await t.commit(r, [{
+			op: "frame",
+			path: i,
+			...e
+		}]), n({
+			phase: "processing",
+			loaded: 0,
+			total: 0
+		}), t.waitFor(r, i, { timeout: a });
+	}), [t, u]);
+	return {
+		state: r,
+		saveFrame: a((e, t) => d({
+			t: h(e),
+			...t ? { edit: t } : {}
+		}), [d]),
+		saveUpload: a((e, n) => {
+			let { ref: r, path: i = "poster", timeout: a } = o.current;
+			return u((o) => t.put(e, {
+				ref: r,
+				path: i,
+				edit: n,
+				timeout: a,
+				onProgress: o
+			}));
+		}, [t, u]),
+		saveAuto: a(() => d({ auto: !0 }), [d]),
+		saveFrameFrom: a((e, n, r, i) => {
+			let { ref: a, path: s = "poster", timeout: c } = o.current;
+			return u(async (o) => {
+				let l = await t.getFrame(e, n, h(r)), u = new File([l], "frame.jpg", { type: "image/jpeg" });
+				return t.put(u, {
+					ref: a,
+					path: s,
+					edit: i,
+					timeout: c,
+					onProgress: o
+				});
+			});
+		}, [t, u]),
+		reset: a(() => i({ status: "idle" }), [])
+	};
+}
+var h = (e) => Math.round(e * 1e3) / 1e3;
+//#endregion
+export { h as round3, f as useFrameStrip, p as useVideoFrame, d as useVideoImages, m as useVideoPoster };
+
+//# sourceMappingURL=video.js.map

package/dist/react/video.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"video.js","names":[],"sources":["../../src/react/video.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { ContentKitClient } from \"../client/client.js\";\nimport { toContentKitError, type ContentKitError } from \"../client/errors.js\";\nimport type { Edit, FileInfo, Op, ReadResult, RefBody } from \"../client/generated/wire.js\";\nimport { samePath, type Progress } from \"../client/media/client.js\";\nimport { useContentKitClient } from \"./context.js\";\nimport { useMediaRead } from \"./read.js\";\nimport { withUpload } from \"./store.js\";\n\nconst asError = toContentKitError;\nconst refKey = (ref: RefBody) => `${ref.kind}/${ref.id}`;\n\nexport interface VideoImagesOptions {\n  ref: RefBody;\n  /** The video upload path. Default \"source\". */\n  video?: string;\n  /** The poster upload path, grabbed from the video's frames. Default \"poster\". */\n  poster?: string;\n  /** An editor read of the item the host already has; skips the fetch. */\n  read?: ReadResult | null;\n  /** Overrides the provider's client; without one only a supplied read shows. */\n  client?: ContentKitClient | null;\n}\n\nexport interface UseVideoImages {\n  /** The video upload (its duration and size once probed); null without one. */\n  video: FileInfo | null;\n  /** The poster upload: a frame ({t} or {auto}) or an uploaded image; null without one. */\n  poster: FileInfo | null;\n  loading: boolean;\n  error?: ContentKitError;\n  reload: () => void;\n  /** Replaces the poster after a save without refetching. */\n  set: (poster: FileInfo) => void;\n}\n\n/** A video item's video and poster uploads (an editor read). */\nexport function useVideoImages(o: VideoImagesOptions): UseVideoImages {\n  const r = useMediaRead(o.ref, { editor: true, read: o.read, client: o.client });\n  const find = (p: string) => r.read?.files.find((f) => f.upload && samePath(f.path, p)) ?? null;\n  const posterPath = o.poster ?? \"poster\";\n  const { read, set: update } = r;\n  const set = useCallback((poster: FileInfo) => update(withUpload(read, posterPath, poster)), [read, posterPath, update]);\n  return { video: find(o.video ?? \"source\"), poster: find(posterPath), loading: r.loading, error: r.error, reload: r.reload, set };\n}\n\nexport interface FrameStripOptions {\n  ref: RefBody;\n  /** The video upload's path (a read's, with its extension). */\n  path?: string;\n  /** Seconds; nothing is fetched until it is known. */\n  duration?: number;\n  /** Frames across the video. Default 8. */\n  count?: number;\n  /** Pixels. Default 160. */\n  width?: number;\n  /** The first failed grab (the strip keeps going without it). */\n  onError?: (e: ContentKitError) => void;\n  /** Overrides the provider's client. */\n  client?: ContentKitClient;\n}\n\nexport interface StripFrame {\n  time: number;\n  /** An object URL once fetched. */\n  url?: string;\n}\n\n/**\n * Evenly spaced frames for coarse browsing, fetched one at a time (the frame\n * endpoint allows two grabs at once per host), revoked on change or unmount.\n */\nexport function useFrameStrip(o: FrameStripOptions): StripFrame[] {\n  const { media } = useContentKitClient(o.client);\n  const count = o.count ?? 8;\n  const width = o.width ?? 160;\n  const duration = o.duration ?? 0;\n  const key = `${refKey(o.ref)}#${o.path ?? \"\"}#${duration}#${count}#${width}`;\n  const [state, setState] = useState<{ key: string; frames: StripFrame[] }>({ key: \"\", frames: [] });\n  const ref = useRef(o.ref);\n  ref.current = o.ref;\n  const onError = useRef(o.onError);\n  onError.current = o.onError;\n  useEffect(() => {\n    if (!(duration > 0) || !o.path) return;\n    const path = o.path;\n    const ctl = new AbortController();\n    let reported = false;\n    const times = Array.from({ length: count }, (_, i) => round3(((i + 0.5) / count) * duration));\n    const urls: string[] = [];\n    setState({ key, frames: times.map((time) => ({ time })) });\n    void (async () => {\n      for (const [i, time] of times.entries()) {\n        try {\n          const blob = await media.getFrame(ref.current, path, time, width, ctl.signal);\n          if (ctl.signal.aborted) return;\n          const url = URL.createObjectURL(blob);\n          urls.push(url);\n          setState((s) => (s.key === key ? { key, frames: s.frames.map((f, j) => (j === i ? { ...f, url } : f)) } : s));\n        } catch (e) {\n          if (ctl.signal.aborted) return;\n          if (!reported) onError.current?.(asError(e));\n          reported = true;\n        }\n      }\n    })();\n    return () => {\n      ctl.abort();\n      urls.forEach((u) => URL.revokeObjectURL(u));\n    };\n  }, [media, key, duration, count, width, o.path]);\n  return state.key === key ? state.frames : [];\n}\n\nexport interface VideoFrameOptions {\n  ref: RefBody;\n  /** The video upload's path; nothing is fetched without it. */\n  path?: string;\n  /** Seconds; undefined fetches nothing. */\n  time?: number;\n  /** Pixels. Default 640. */\n  width?: number;\n  /** Debounce while scrubbing, ms. Default 120. */\n  delay?: number;\n  onError?: (e: ContentKitError) => void;\n  /** Overrides the provider's client. */\n  client?: ContentKitClient;\n}\n\nexport interface UseVideoFrame {\n  /** The latest fetched frame; kept while the next one loads. */\n  url?: string;\n  /** The time url shows. */\n  time?: number;\n  loading: boolean;\n  error?: ContentKitError;\n}\n\n/** The exact frame at time, debounced while it changes. */\nexport function useVideoFrame(o: VideoFrameOptions): UseVideoFrame {\n  const { media } = useContentKitClient(o.client);\n  const width = o.width ?? 640;\n  const delay = o.delay ?? 120;\n  const [state, setState] = useState<UseVideoFrame>({ loading: false });\n  const ref = useRef(o.ref);\n  ref.current = o.ref;\n  const last = useRef<string | undefined>(undefined);\n  const onError = useRef(o.onError);\n  onError.current = o.onError;\n  const key = refKey(o.ref);\n  useEffect(() => {\n    if (o.time === undefined || !o.path) return;\n    const time = o.time;\n    const path = o.path;\n    const ctl = new AbortController();\n    setState((s) => ({ ...s, loading: true, error: undefined }));\n    const t = setTimeout(() => {\n      media.getFrame(ref.current, path, time, width, ctl.signal).then(\n        (blob) => {\n          if (ctl.signal.aborted) return;\n          if (last.current) URL.revokeObjectURL(last.current);\n          const url = (last.current = URL.createObjectURL(blob));\n          setState({ url, time, loading: false });\n        },\n        (e) => {\n          if (ctl.signal.aborted) return;\n          setState((s) => ({ ...s, loading: false, error: asError(e) }));\n          onError.current?.(asError(e));\n        },\n      );\n    }, delay);\n    return () => {\n      clearTimeout(t);\n      ctl.abort();\n    };\n  }, [media, key, o.path, o.time, width, delay]);\n  useEffect(\n    () => () => {\n      if (last.current) URL.revokeObjectURL(last.current);\n    },\n    [],\n  );\n  return state;\n}\n\nexport type VideoSaveState =\n  | { status: \"idle\" }\n  | { status: \"saving\"; progress?: Progress; rendering?: boolean }\n  | { status: \"error\"; error: ContentKitError };\n\nexport interface VideoPosterOptions {\n  ref: RefBody;\n  /** The poster upload path. Default \"poster\". */\n  path?: string;\n  /** With the processed poster upload after each save. */\n  onSaved?: (poster: FileInfo) => void;\n  /** Polling limit for the render, ms. Default 120000. */\n  timeout?: number;\n  /** Every failed save: the request, the render or the wait. */\n  onError?: (e: ContentKitError) => void;\n  /** Overrides the provider's client. */\n  client?: ContentKitClient;\n}\n\nexport interface UseVideoPoster {\n  state: VideoSaveState;\n  /** A frame at time (seconds), cropped by edit in the frame's pixels (the video's w×h). */\n  saveFrame: (time: number, edit?: Edit | null) => Promise<FileInfo | undefined>;\n  /** An uploaded image, cropped by edit in its own pixels. */\n  saveUpload: (image: Blob, edit?: Edit | null) => Promise<FileInfo | undefined>;\n  /** The worker's choice of frame. */\n  saveAuto: () => Promise<FileInfo | undefined>;\n  /**\n   * A frame of another item's video upload (at path, time seconds) uploaded\n   * as the poster image, cropped by edit in the frame's pixels.\n   */\n  saveFrameFrom: (video: RefBody, path: string, time: number, edit?: Edit | null) => Promise<FileInfo | undefined>;\n  reset: () => void;\n}\n\n/** Headless poster selection: a frame op or an uploaded image, then the wait for the worker to render it. */\nexport function useVideoPoster(o: VideoPosterOptions): UseVideoPoster {\n  const { media } = useContentKitClient(o.client);\n  const [state, setState] = useState<VideoSaveState>({ status: \"idle\" });\n  const opts = useRef(o);\n  opts.current = o;\n  const run = useCallback(async (save: (onProgress: (p: Progress) => void) => Promise<FileInfo>) => {\n    setState({ status: \"saving\" });\n    try {\n      const f = await save((progress) => setState({ status: \"saving\", progress, rendering: progress.phase === \"processing\" }));\n      setState({ status: \"idle\" });\n      opts.current.onSaved?.(f);\n      return f;\n    } catch (e) {\n      const error = asError(e);\n      setState({ status: \"error\", error });\n      opts.current.onError?.(error);\n      return undefined;\n    }\n  }, []);\n  const frame = useCallback(\n    (op: Omit<Op, \"op\" | \"path\">) =>\n      run(async (onProgress) => {\n        const { ref, path = \"poster\", timeout } = opts.current;\n        await media.commit(ref, [{ op: \"frame\", path, ...op }]);\n        onProgress({ phase: \"processing\", loaded: 0, total: 0 });\n        return media.waitFor(ref, path, { timeout });\n      }),\n    [media, run],\n  );\n  return {\n    state,\n    saveFrame: useCallback((time, edit) => frame({ t: round3(time), ...(edit ? { edit } : {}) }), [frame]),\n    saveUpload: useCallback(\n      (image, edit) => {\n        const { ref, path = \"poster\", timeout } = opts.current;\n        return run((onProgress) => media.put(image, { ref, path, edit, timeout, onProgress }));\n      },\n      [media, run],\n    ),\n    saveAuto: useCallback(() => frame({ auto: true }), [frame]),\n    saveFrameFrom: useCallback(\n      (video, path, time, edit) => {\n        const { ref, path: to = \"poster\", timeout } = opts.current;\n        return run(async (onProgress) => {\n          const still = await media.getFrame(video, path, round3(time));\n          // GET /frame answers a JPEG.\n          const file = new File([still], \"frame.jpg\", { type: \"image/jpeg\" });\n          return media.put(file, { ref, path: to, edit, timeout, onProgress });\n        });\n      },\n      [media, run],\n    ),\n    reset: useCallback(() => setState({ status: \"idle\" }), []),\n  };\n}\n\nexport const round3 = (v: number) => Math.round(v * 1000) / 1000;\n"],"mappings":";;;;;;;AASA,IAAM,IAAU,GACV,KAAU,MAAiB,GAAG,EAAI,KAAK,GAAG,EAAI;AA2BpD,SAAgB,EAAe,GAAuC;CACpE,IAAM,IAAI,EAAa,EAAE,KAAK;EAAE,QAAQ;EAAM,MAAM,EAAE;EAAM,QAAQ,EAAE;CAAO,CAAC,GACxE,KAAQ,MAAc,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE,UAAU,EAAS,EAAE,MAAM,CAAC,CAAC,KAAK,MACpF,IAAa,EAAE,UAAU,UACzB,EAAE,SAAM,KAAK,MAAW,GACxB,IAAM,GAAa,MAAqB,EAAO,EAAW,GAAM,GAAY,CAAM,CAAC,GAAG;EAAC;EAAM;EAAY;CAAM,CAAC;CACtH,OAAO;EAAE,OAAO,EAAK,EAAE,SAAS,QAAQ;EAAG,QAAQ,EAAK,CAAU;EAAG,SAAS,EAAE;EAAS,OAAO,EAAE;EAAO,QAAQ,EAAE;EAAQ;CAAI;AACjI;AA4BA,SAAgB,EAAc,GAAoC;CAChE,IAAM,EAAE,aAAU,EAAoB,EAAE,MAAM,GACxC,IAAQ,EAAE,SAAS,GACnB,IAAQ,EAAE,SAAS,KACnB,IAAW,EAAE,YAAY,GACzB,IAAM,GAAG,EAAO,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,GAAG,GAAG,EAAS,GAAG,EAAM,GAAG,KAC/D,CAAC,GAAO,KAAY,EAAgD;EAAE,KAAK;EAAI,QAAQ,CAAC;CAAE,CAAC,GAC3F,IAAM,EAAO,EAAE,GAAG;CACxB,EAAI,UAAU,EAAE;CAChB,IAAM,IAAU,EAAO,EAAE,OAAO;CA8BhC,OA7BA,EAAQ,UAAU,EAAE,SACpB,QAAgB;EACd,IAAI,EAAE,IAAW,MAAM,CAAC,EAAE,MAAM;EAChC,IAAM,IAAO,EAAE,MACT,IAAM,IAAI,gBAAgB,GAC5B,IAAW,IACT,IAAQ,MAAM,KAAK,EAAE,QAAQ,EAAM,IAAI,GAAG,MAAM,GAAS,IAAI,MAAO,IAAS,CAAQ,CAAC,GACtF,IAAiB,CAAC;EAiBxB,OAhBA,EAAS;GAAE;GAAK,QAAQ,EAAM,KAAK,OAAU,EAAE,QAAK,EAAE;EAAE,CAAC,IACnD,YAAY;GAChB,KAAK,IAAM,CAAC,GAAG,MAAS,EAAM,QAAQ,GACpC,IAAI;IACF,IAAM,IAAO,MAAM,EAAM,SAAS,EAAI,SAAS,GAAM,GAAM,GAAO,EAAI,MAAM;IAC5E,IAAI,EAAI,OAAO,SAAS;IACxB,IAAM,IAAM,IAAI,gBAAgB,CAAI;IAEpC,AADA,EAAK,KAAK,CAAG,GACb,GAAU,MAAO,EAAE,QAAQ,IAAM;KAAE;KAAK,QAAQ,EAAE,OAAO,KAAK,GAAG,MAAO,MAAM,IAAI;MAAE,GAAG;MAAG;KAAI,IAAI,CAAE;IAAE,IAAI,CAAE;GAC9G,SAAS,GAAG;IACV,IAAI,EAAI,OAAO,SAAS;IAExB,AADK,KAAU,EAAQ,UAAU,EAAQ,CAAC,CAAC,GAC3C,IAAW;GACb;EAEJ,EAAA,CAAG,SACU;GAEX,AADA,EAAI,MAAM,GACV,EAAK,SAAS,MAAM,IAAI,gBAAgB,CAAC,CAAC;EAC5C;CACF,GAAG;EAAC;EAAO;EAAK;EAAU;EAAO;EAAO,EAAE;CAAI,CAAC,GACxC,EAAM,QAAQ,IAAM,EAAM,SAAS,CAAC;AAC7C;AA2BA,SAAgB,EAAc,GAAqC;CACjE,IAAM,EAAE,aAAU,EAAoB,EAAE,MAAM,GACxC,IAAQ,EAAE,SAAS,KACnB,IAAQ,EAAE,SAAS,KACnB,CAAC,GAAO,KAAY,EAAwB,EAAE,SAAS,GAAM,CAAC,GAC9D,IAAM,EAAO,EAAE,GAAG;CACxB,EAAI,UAAU,EAAE;CAChB,IAAM,IAAO,EAA2B,KAAA,CAAS,GAC3C,IAAU,EAAO,EAAE,OAAO;CAChC,EAAQ,UAAU,EAAE;CACpB,IAAM,IAAM,EAAO,EAAE,GAAG;CAiCxB,OAhCA,QAAgB;EACd,IAAI,EAAE,SAAS,KAAA,KAAa,CAAC,EAAE,MAAM;EACrC,IAAM,IAAO,EAAE,MACT,IAAO,EAAE,MACT,IAAM,IAAI,gBAAgB;EAChC,GAAU,OAAO;GAAE,GAAG;GAAG,SAAS;GAAM,OAAO,KAAA;EAAU,EAAE;EAC3D,IAAM,IAAI,iBAAiB;GACzB,EAAM,SAAS,EAAI,SAAS,GAAM,GAAM,GAAO,EAAI,MAAM,CAAC,CAAC,MACxD,MAAS;IACR,IAAI,EAAI,OAAO,SAAS;IACxB,AAAI,EAAK,WAAS,IAAI,gBAAgB,EAAK,OAAO;IAClD,IAAM,IAAO,EAAK,UAAU,IAAI,gBAAgB,CAAI;IACpD,EAAS;KAAE;KAAK;KAAM,SAAS;IAAM,CAAC;GACxC,IACC,MAAM;IACD,EAAI,OAAO,YACf,GAAU,OAAO;KAAE,GAAG;KAAG,SAAS;KAAO,OAAO,EAAQ,CAAC;IAAE,EAAE,GAC7D,EAAQ,UAAU,EAAQ,CAAC,CAAC;GAC9B,CACF;EACF,GAAG,CAAK;EACR,aAAa;GAEX,AADA,aAAa,CAAC,GACd,EAAI,MAAM;EACZ;CACF,GAAG;EAAC;EAAO;EAAK,EAAE;EAAM,EAAE;EAAM;EAAO;CAAK,CAAC,GAC7C,cACc;EACV,AAAI,EAAK,WAAS,IAAI,gBAAgB,EAAK,OAAO;CACpD,GACA,CAAC,CACH,GACO;AACT;AAsCA,SAAgB,EAAe,GAAuC;CACpE,IAAM,EAAE,aAAU,EAAoB,EAAE,MAAM,GACxC,CAAC,GAAO,KAAY,EAAyB,EAAE,QAAQ,OAAO,CAAC,GAC/D,IAAO,EAAO,CAAC;CACrB,EAAK,UAAU;CACf,IAAM,IAAM,EAAY,OAAO,MAAmE;EAChG,EAAS,EAAE,QAAQ,SAAS,CAAC;EAC7B,IAAI;GACF,IAAM,IAAI,MAAM,GAAM,MAAa,EAAS;IAAE,QAAQ;IAAU;IAAU,WAAW,EAAS,UAAU;GAAa,CAAC,CAAC;GAGvH,OAFA,EAAS,EAAE,QAAQ,OAAO,CAAC,GAC3B,EAAK,QAAQ,UAAU,CAAC,GACjB;EACT,SAAS,GAAG;GACV,IAAM,IAAQ,EAAQ,CAAC;GAEvB,AADA,EAAS;IAAE,QAAQ;IAAS;GAAM,CAAC,GACnC,EAAK,QAAQ,UAAU,CAAK;GAC5B;EACF;CACF,GAAG,CAAC,CAAC,GACC,IAAQ,GACX,MACC,EAAI,OAAO,MAAe;EACxB,IAAM,EAAE,QAAK,UAAO,UAAU,eAAY,EAAK;EAG/C,OAFA,MAAM,EAAM,OAAO,GAAK,CAAC;GAAE,IAAI;GAAS;GAAM,GAAG;EAAG,CAAC,CAAC,GACtD,EAAW;GAAE,OAAO;GAAc,QAAQ;GAAG,OAAO;EAAE,CAAC,GAChD,EAAM,QAAQ,GAAK,GAAM,EAAE,WAAQ,CAAC;CAC7C,CAAC,GACH,CAAC,GAAO,CAAG,CACb;CACA,OAAO;EACL;EACA,WAAW,GAAa,GAAM,MAAS,EAAM;GAAE,GAAG,EAAO,CAAI;GAAG,GAAI,IAAO,EAAE,QAAK,IAAI,CAAC;EAAG,CAAC,GAAG,CAAC,CAAK,CAAC;EACrG,YAAY,GACT,GAAO,MAAS;GACf,IAAM,EAAE,QAAK,UAAO,UAAU,eAAY,EAAK;GAC/C,OAAO,GAAK,MAAe,EAAM,IAAI,GAAO;IAAE;IAAK;IAAM;IAAM;IAAS;GAAW,CAAC,CAAC;EACvF,GACA,CAAC,GAAO,CAAG,CACb;EACA,UAAU,QAAkB,EAAM,EAAE,MAAM,GAAK,CAAC,GAAG,CAAC,CAAK,CAAC;EAC1D,eAAe,GACZ,GAAO,GAAM,GAAM,MAAS;GAC3B,IAAM,EAAE,QAAK,MAAM,IAAK,UAAU,eAAY,EAAK;GACnD,OAAO,EAAI,OAAO,MAAe;IAC/B,IAAM,IAAQ,MAAM,EAAM,SAAS,GAAO,GAAM,EAAO,CAAI,CAAC,GAEtD,IAAO,IAAI,KAAK,CAAC,CAAK,GAAG,aAAa,EAAE,MAAM,aAAa,CAAC;IAClE,OAAO,EAAM,IAAI,GAAM;KAAE;KAAK,MAAM;KAAI;KAAM;KAAS;IAAW,CAAC;GACrE,CAAC;EACH,GACA,CAAC,GAAO,CAAG,CACb;EACA,OAAO,QAAkB,EAAS,EAAE,QAAQ,OAAO,CAAC,GAAG,CAAC,CAAC;CAC3D;AACF;AAEA,IAAa,KAAU,MAAc,KAAK,MAAM,IAAI,GAAI,IAAI"}

package/dist/react/viewport.d.ts

@@ -0,0 +1,19 @@
+export interface NearViewportOptions {
+    /** How near (IntersectionObserver rootMargin) counts as near. Default "800px 0px". */
+    margin?: string;
+    /**
+     * Not near again once beyond this margin (wider than margin, so scrolling
+     * back and forth over the edge does not thrash). Default: once near, always near.
+     */
+    leaveMargin?: string;
+    /** Near from the start (content above the fold). */
+    eager?: boolean;
+    /** The scroll container; default the viewport. */
+    root?: Element | null;
+}
+/**
+ * Whether the element (attach the returned callback ref) is near the
+ * viewport: mount media as it approaches, unmount it far away. Without
+ * IntersectionObserver everything is near.
+ */
+export declare function useNearViewport(o?: NearViewportOptions): [ref: (el: Element | null) => void, near: boolean];