@meginhufr/brua-web 0.1.0 → 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Meginhufr AS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -10,7 +10,7 @@ Your backend passes asset ids on, and the page reads each asset's current releas
 
 ## From an id
 
-Configure once where your organization's assets live, then render by id. The asset is fetched from `{base}/{id}.json` with no key, reused for a minute (the edge's own lifetime) by everyone who asks, and a merge in Brua reaches the page within that minute with no deploy of yours.
+Configure once where your organization's assets live, then render by id. The asset is fetched from `{base}/{id}.json` with no key, and remembered by everyone who asks: answered from memory for the edge's minute, read again after that, and kept when the edge can't be reached. A merge in Brua reaches the page within that minute with no deploy of yours; `brua.cachedAsset(id)` gives the last release read at once, and `brua.prefetch(ids)` reads a list's ids before it renders.
 
 ```ts
 import { createBrua } from "@meginhufr/brua-web";

package/dist/BruaPicture.svelte

@@ -1,25 +1,27 @@
 <!-- Brua for Svelte 5: the asset as a picture element (SPEC.md 7.2). The browser picks the format, density
      and color scheme, and follows dark mode live. Animations show their still. Import from "@meginhufr/brua-web/svelte".
      Given an id instead of an asset, the current release is read from the edge through the Brua set with
-     setBrua(); the children show until it has loaded, and when nothing is released under the id. -->
+     setBrua(); the last release it read shows at once, else the children until it has loaded, and when nothing is released under the id. -->
 <script>
   import { getContext } from "svelte";
-  import { pictureModel } from "./picture.ts";
+  import { fillStyle, pictureModel } from "./picture.ts";
 
-  /** @type {{ asset?: import("./types.ts").AssetResponse, id?: string, brua?: import("./brua.ts").Brua, sizes?: string, loading?: "lazy" | "eager", class?: string, colorScheme?: "light" | "dark", children?: import("svelte").Snippet }} */
-  let { asset: given, id, brua = getContext("brua"), sizes, loading, class: imgClass, colorScheme, children } = $props();
-  let fetched = $state();
+  /** @type {{ asset?: import("./types.ts").AssetResponse, id?: string, brua?: import("./brua.ts").Brua, sizes?: string, loading?: "lazy" | "eager", class?: string, colorScheme?: "light" | "dark", objectFit?: "contain" | "cover" | "none", objectPosition?: string, children?: import("svelte").Snippet }} */
+  let { asset: given, id, brua = getContext("brua"), sizes, loading, class: imgClass, colorScheme, objectFit, objectPosition, children } = $props();
+  // The last release the Brua read renders at once, so a remounted picture doesn't flash its children.
+  let fetched = $state(id === undefined ? undefined : brua?.cachedAsset(id));
 
   $effect(() => {
     if (given || id === undefined) return;
     if (!brua) throw new Error("BruaPicture with an id needs setBrua() in a parent, or a brua prop.");
     let live = true;
-    brua.asset(id).then((loaded) => { if (live) fetched = loaded; });
+    fetched = brua.cachedAsset(id);
+    brua.asset(id).then((loaded) => { if (live) fetched = loaded; }, () => {});
     return () => { live = false; };
   });
 
   let asset = $derived(given ?? fetched);
-  let model = $derived(asset ? pictureModel(asset, { sizes, loading, className: imgClass, colorScheme }) : undefined);
+  let model = $derived(asset ? pictureModel(asset, { sizes, loading, className: imgClass, colorScheme, objectFit, objectPosition }) : undefined);
 </script>
 
 {#if model}
@@ -38,6 +40,7 @@
       loading={model.img.loading}
       decoding={model.img.decoding}
       class={model.img.className}
+      style={fillStyle(model.img)}
     />
   </picture>
 {:else if children}

package/dist/brua.d.ts

@@ -2,18 +2,29 @@ import type { AssetResponse } from "./types.ts";
 export interface BruaOptions {
     /** The organization's asset prefix on the edge, such as https://cdn.brua.dev/assets/{org}. */
     base: string;
-    /** The language for alt text and language-specific files; left out, the browser's Accept-Language decides. */
+    /** The language for alt text and language-specific files; left out, the browser's languages decide. */
     lang?: string;
-    /** How long a fetched asset is reused before it is asked for again, in milliseconds: the edge's own minute by default. */
+    /** How long a fetched asset is reused before it is asked for again, in milliseconds; by default the edge's max-age. */
     maxAge?: number;
     /** The fetch to use; the global one by default. */
     fetch?: typeof fetch;
 }
-/** Assets by id from the edge, with no key and no backend: each id costs one small request a minute at most. */
+/**
+ * Assets by id from the edge, with no key and no backend. Every release read is remembered: answered from memory for
+ * the edge's minute, asked for again after that, and kept when the edge can't be reached, so a merge lands within
+ * the minute and a page that loses its connection keeps its images.
+ */
 export interface Brua {
     /** The JSON URL of the asset's current release. */
     url(id: string): string;
-    /** The asset's current release, or undefined when the id is unknown or nothing is released. */
+    /**
+     * The asset's current release, or undefined when the id is unknown or nothing is released. Reads of one id at the
+     * same time share a request. Rejects only when the edge can't be reached and no release of the id is known.
+     */
     asset(id: string): Promise<AssetResponse | undefined>;
+    /** The last release of the id this Brua has read, however old, or undefined: for a component's first render. */
+    cachedAsset(id: string): AssetResponse | undefined;
+    /** Reads these ids at the same time, so a list's pictures render at once when it appears. */
+    prefetch(ids: string[]): Promise<void>;
 }
 export declare function createBrua(options: BruaOptions): Brua;

package/dist/brua.js

@@ -1,31 +1,60 @@
+/** "nb-NO, en;q=0.9": the browser's languages in order, with falling quality values, as the edge reads ?lang=. */
+function acceptLanguage(languages) {
+    return languages.slice(0, 5).map((language, index) => (index === 0 ? language : `${language};q=${(1 - index * 0.1).toFixed(1)}`)).join(", ");
+}
+/** The edge's max-age in milliseconds, or undefined when the response doesn't say. */
+function maxAgeOf(response) {
+    const match = /(?:^|,)\s*max-age\s*=\s*(\d+)/i.exec(response.headers.get("Cache-Control") ?? "");
+    return match ? Number(match[1]) * 1000 : undefined;
+}
 export function createBrua(options) {
     const base = options.base.replace(/\/+$/, "");
-    const maxAge = options.maxAge ?? 60_000;
-    const query = options.lang ? `?lang=${encodeURIComponent(options.lang)}` : "";
-    const held = new Map();
-    const url = (id) => `${base}/${encodeURIComponent(id)}.json${query}`;
-    return {
+    const entries = new Map();
+    const reads = new Map();
+    // Without a language, the browser's languages go in the query (in a browser only, not on a server), so each has
+    // its own entry here and in the HTTP cache, the same as the other SDKs.
+    const languages = () => options.lang ?? (typeof window !== "undefined" && typeof navigator !== "undefined" ? acceptLanguage(navigator.languages ?? []) : "");
+    const url = (id) => {
+        const lang = languages();
+        return `${base}/${encodeURIComponent(id)}.json${lang ? `?lang=${encodeURIComponent(lang)}` : ""}`;
+    };
+    const read = async (id, at) => {
+        const response = await (options.fetch ?? fetch)(at);
+        const freshFor = options.maxAge ?? maxAgeOf(response) ?? 60_000;
+        if (response.status === 404)
+            return { asset: undefined, freshUntil: Date.now() + freshFor };
+        if (!response.ok)
+            throw new Error(`Brua: ${id} answered ${response.status}`);
+        return { asset: (await response.json()), freshUntil: Date.now() + freshFor };
+    };
+    const brua = {
         url,
-        asset(id) {
-            const now = Date.now();
-            const have = held.get(id);
-            if (have && now - have.at < maxAge)
-                return have.result;
-            const request = options.fetch ?? fetch;
-            const result = request(url(id)).then(async (response) => {
-                if (response.status === 404)
-                    return undefined;
-                if (!response.ok)
-                    throw new Error(`Brua: ${id} answered ${response.status}`);
-                return (await response.json());
-            });
-            held.set(id, { at: now, result });
-            // A failure is asked again next time, not remembered for a minute.
-            result.catch(() => {
-                if (held.get(id)?.result === result)
-                    held.delete(id);
-            });
-            return result;
+        async asset(id) {
+            const at = url(id);
+            const known = entries.get(at);
+            if (known && Date.now() < known.freshUntil)
+                return known.asset;
+            let running = reads.get(at);
+            if (!running) {
+                running = read(id, at).then((entry) => { entries.set(at, entry); return entry; }).finally(() => reads.delete(at));
+                reads.set(at, running);
+            }
+            try {
+                return (await running).asset;
+            }
+            catch (error) {
+                const kept = entries.get(at);
+                if (kept)
+                    return kept.asset;
+                throw error;
+            }
+        },
+        cachedAsset(id) {
+            return entries.get(url(id))?.asset;
+        },
+        async prefetch(ids) {
+            await Promise.all([...new Set(ids)].map((id) => brua.asset(id).catch(() => undefined)));
         },
     };
+    return brua;
 }

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export type { AssetResponse, AssetVariant, ClientState } from "./types.ts";
 export { selectUrl, selectVariant } from "./select.ts";
-export { pictureHtml, pictureModel, type PictureOptions, type PictureModel, type PictureSource, type PictureImage } from "./picture.ts";
+export { fillStyle, pictureHtml, pictureModel, type PictureOptions, type PictureModel, type PictureSource, type PictureImage } from "./picture.ts";
+export { objectFitOf, objectPositionOf, targetWidth, type ObjectFit } from "./sizing.ts";
 export { browserClientState, defaultClientState, watchClientState, type ClientOptions } from "./client.ts";
 export { createBrua, type Brua, type BruaOptions } from "./brua.ts";

package/dist/index.js

@@ -1,4 +1,5 @@
 export { selectUrl, selectVariant } from "./select.js";
-export { pictureHtml, pictureModel } from "./picture.js";
+export { fillStyle, pictureHtml, pictureModel } from "./picture.js";
+export { objectFitOf, objectPositionOf, targetWidth } from "./sizing.js";
 export { browserClientState, defaultClientState, watchClientState } from "./client.js";
 export { createBrua } from "./brua.js";

package/dist/picture.d.ts

@@ -9,6 +9,13 @@ export interface PictureOptions {
      * the dark files go behind a media query and the browser follows the system setting.
      */
     colorScheme?: "light" | "dark";
+    /**
+     * How the img fills its box: "contain" or "cover" overrides the asset's own fit, and "none" leaves the fit and
+     * the position to the page's CSS. Left out, the asset's fit is used.
+     */
+    objectFit?: "contain" | "cover" | "none";
+    /** Where the img sits in its box, as "x% y%"; left out, the asset's position. */
+    objectPosition?: string;
 }
 /** A `<source>` of the picture: one format, optionally one color scheme. */
 export interface PictureSource {
@@ -29,6 +36,9 @@ export interface PictureImage {
     loading: "lazy" | "eager";
     decoding: "async";
     className?: string;
+    /** The object-fit and object-position the img is drawn with, when the asset or the call site gives a fill. */
+    objectFit?: "contain" | "cover";
+    objectPosition?: string;
 }
 /** What a picture element for the asset consists of; the HTML renderer and the framework components build from it. */
 export interface PictureModel {
@@ -41,5 +51,7 @@ export interface PictureModel {
  * without client hints and switches live with the color scheme. Animations aren't rendered; their stills are.
  */
 export declare function pictureModel(asset: AssetResponse, options?: PictureOptions): PictureModel;
+/** The img's fill as a style attribute's value. */
+export declare function fillStyle(img: PictureImage): string | undefined;
 /** The picture as an HTML string, for innerHTML or server-rendered pages. */
 export declare function pictureHtml(asset: AssetResponse, options?: PictureOptions): string;

package/dist/picture.js

@@ -1,3 +1,4 @@
+import { objectFitOf, objectPositionOf } from "./sizing.js";
 const SVG = "image/svg+xml";
 /** Formats offered as <source> elements, best first; anything else becomes the <img> fallback. */
 const SOURCE_TYPES = ["image/avif", "image/webp"];
@@ -51,9 +52,25 @@ export function pictureModel(asset, options = {}) {
             loading: options.loading ?? "lazy",
             decoding: "async",
             className: options.className,
+            ...fill(asset, options),
         },
     };
 }
+/**
+ * The fill to put on the img: the call site's or the asset's, cleaned to what CSS takes. A response from before the
+ * fill, with no override either, gets none, so the page draws it as it always has.
+ */
+function fill(asset, options) {
+    if (options.objectFit === "none")
+        return {};
+    if (asset.objectFit === undefined && asset.objectPosition === undefined && options.objectFit === undefined && options.objectPosition === undefined)
+        return {};
+    return { objectFit: objectFitOf(asset, options.objectFit), objectPosition: objectPositionOf(asset, options.objectPosition) };
+}
+/** The img's fill as a style attribute's value. */
+export function fillStyle(img) {
+    return img.objectFit === undefined ? undefined : `object-fit: ${img.objectFit}; object-position: ${img.objectPosition}`;
+}
 /** The picture as an HTML string, for innerHTML or server-rendered pages. */
 export function pictureHtml(asset, options = {}) {
     const { sources, img } = pictureModel(asset, options);
@@ -69,6 +86,7 @@ export function pictureHtml(asset, options = {}) {
         loading: img.loading,
         decoding: img.decoding,
         class: img.className,
+        style: fillStyle(img),
     }));
     return `<picture>${rendered.join("")}</picture>`;
 }

package/dist/react.d.ts

@@ -11,8 +11,8 @@ export type BruaProviderProps = {
 /** Where the app's assets are read from by id: wrap the app once, then <BruaPicture id="…"> anywhere below. */
 export declare function BruaProvider(props: BruaProviderProps): ReactElement;
 /**
- * The asset's current release for an id, from the provider's Brua or the one given: undefined until it has loaded,
- * and when nothing is released under the id. Loads only in the browser; a server render shows the fallback.
+ * The asset's current release for an id, from the provider's Brua or the one given: the last release it read at once, else
+ * undefined until it has loaded, and when nothing is released under the id. Loads only in the browser; a server render shows the fallback.
  */
 export declare function useBruaAsset(id: string | undefined, brua?: Brua): AssetResponse | undefined;
 export interface BruaPictureProps extends PictureOptions {
@@ -29,7 +29,7 @@ export interface BruaPictureProps extends PictureOptions {
  * The asset as a picture element (SPEC.md 7.2): the browser picks the format, density and color scheme,
  * and follows dark mode live. Animations show their still.
  */
-export declare function BruaPicture({ asset, id, brua, fallback, sizes, loading, className, colorScheme }: BruaPictureProps): ReactElement | null;
+export declare function BruaPicture({ asset, id, brua, fallback, sizes, loading, className, colorScheme, objectFit, objectPosition }: BruaPictureProps): ReactElement | null;
 /**
  * One variant URL for the asset, chosen for this browser and kept current as its appearance, motion setting
  * or pixel density changes: for a CSS background, a canvas or an animation player. Renders light at 1x on

package/dist/react.js

@@ -13,21 +13,23 @@ export function BruaProvider(props) {
     return createElement(BruaContext.Provider, { value: brua }, props.children);
 }
 /**
- * The asset's current release for an id, from the provider's Brua or the one given: undefined until it has loaded,
- * and when nothing is released under the id. Loads only in the browser; a server render shows the fallback.
+ * The asset's current release for an id, from the provider's Brua or the one given: the last release it read at once, else
+ * undefined until it has loaded, and when nothing is released under the id. Loads only in the browser; a server render shows the fallback.
  */
 export function useBruaAsset(id, brua) {
     const fromContext = useContext(BruaContext);
     const client = brua ?? fromContext;
-    const [asset, setAsset] = useState();
+    // The last release the Brua read renders at once, so a remounted picture doesn't flash its fallback.
+    const [asset, setAsset] = useState(() => (id === undefined ? undefined : client?.cachedAsset(id)));
     if (id !== undefined && !client)
         throw new Error("useBruaAsset needs a <BruaProvider> above it, or a Brua passed in.");
     useEffect(() => {
         if (id === undefined || !client)
             return;
         let live = true;
+        setAsset(client.cachedAsset(id));
         client.asset(id).then((loaded) => { if (live)
-            setAsset(loaded); });
+            setAsset(loaded); }, () => { });
         return () => { live = false; };
     }, [client, id]);
     return id === undefined ? undefined : asset;
@@ -36,12 +38,12 @@ export function useBruaAsset(id, brua) {
  * The asset as a picture element (SPEC.md 7.2): the browser picks the format, density and color scheme,
  * and follows dark mode live. Animations show their still.
  */
-export function BruaPicture({ asset, id, brua, fallback = null, sizes, loading, className, colorScheme }) {
+export function BruaPicture({ asset, id, brua, fallback = null, sizes, loading, className, colorScheme, objectFit, objectPosition }) {
     const fetched = useBruaAsset(asset ? undefined : id, brua);
     const shown = asset ?? fetched;
     if (!shown)
         return fallback;
-    const { sources, img } = pictureModel(shown, { sizes, loading, className, colorScheme });
+    const { sources, img } = pictureModel(shown, { sizes, loading, className, colorScheme, objectFit, objectPosition });
     return createElement("picture", null, ...sources.map((s) => createElement("source", { key: `${s.type}${s.media ?? ""}`, type: s.type, media: s.media, srcSet: s.srcset, sizes: s.sizes })), createElement("img", {
         src: img.src,
         srcSet: img.srcset,
@@ -53,6 +55,7 @@ export function BruaPicture({ asset, id, brua, fallback = null, sizes, loading,
         loading: img.loading,
         decoding: img.decoding,
         className: img.className,
+        style: img.objectFit === undefined ? undefined : { objectFit: img.objectFit, objectPosition: img.objectPosition },
     }));
 }
 /**

package/dist/sizing.d.ts

@@ -0,0 +1,12 @@
+import type { AssetResponse } from "./types.ts";
+export type ObjectFit = "contain" | "cover";
+/** The fit to draw with: the call site's override, else the asset's, else contain. Unknown values are contain. */
+export declare function objectFitOf(asset: Pick<AssetResponse, "objectFit">, override?: string): ObjectFit;
+/** Where the picture sits in its box, as "x% y%": the call site's, else the asset's, else the centre. */
+export declare function objectPositionOf(asset: Pick<AssetResponse, "objectPosition">, override?: string): string;
+/**
+ * How wide the picture is drawn in a box of this size, in CSS pixels or points, for the selection rule's
+ * `targetWidth`. Contain, or a box without a height yet, draws it at the box width; cover at the larger of the box
+ * width and the box height times the asset's proportions.
+ */
+export declare function targetWidth(asset: Pick<AssetResponse, "width" | "height" | "objectFit">, boxWidth: number, boxHeight?: number, objectFit?: string): number;

package/dist/sizing.js

@@ -0,0 +1,21 @@
+const POSITION = /^(100|[1-9]?[0-9])% (100|[1-9]?[0-9])%$/;
+/** The fit to draw with: the call site's override, else the asset's, else contain. Unknown values are contain. */
+export function objectFitOf(asset, override) {
+    const fit = override ?? asset.objectFit;
+    return fit === "cover" ? "cover" : "contain";
+}
+/** Where the picture sits in its box, as "x% y%": the call site's, else the asset's, else the centre. */
+export function objectPositionOf(asset, override) {
+    const position = override ?? asset.objectPosition;
+    return position !== undefined && POSITION.test(position) ? position : "50% 50%";
+}
+/**
+ * How wide the picture is drawn in a box of this size, in CSS pixels or points, for the selection rule's
+ * `targetWidth`. Contain, or a box without a height yet, draws it at the box width; cover at the larger of the box
+ * width and the box height times the asset's proportions.
+ */
+export function targetWidth(asset, boxWidth, boxHeight, objectFit) {
+    if (objectFitOf(asset, objectFit) !== "cover" || boxHeight === undefined || boxHeight <= 0 || asset.height <= 0)
+        return boxWidth;
+    return Math.max(boxWidth, boxHeight * (asset.width / asset.height));
+}

package/dist/svelte.d.ts

@@ -9,8 +9,8 @@ export declare const bruaContext = "brua";
 export declare function setBrua(options: Brua | BruaOptions): Brua;
 export declare function getBrua(): Brua | undefined;
 /**
- * A store of the asset's current release for an id: undefined until it has loaded, and when nothing is released
- * under the id. Reads through the context's Brua unless one is given; call it during component setup.
+ * A store of the asset's current release for an id: the last release the Brua read at once, else undefined until it
+ * has loaded, and when nothing is released under the id. Reads through the context's Brua unless one is given; call it during component setup.
  */
 export declare function bruaAsset(id: string, brua?: Brua | undefined): Readable<AssetResponse | undefined>;
 /**

package/dist/svelte.js

@@ -17,16 +17,16 @@ export function getBrua() {
     return getContext(bruaContext);
 }
 /**
- * A store of the asset's current release for an id: undefined until it has loaded, and when nothing is released
- * under the id. Reads through the context's Brua unless one is given; call it during component setup.
+ * A store of the asset's current release for an id: the last release the Brua read at once, else undefined until it
+ * has loaded, and when nothing is released under the id. Reads through the context's Brua unless one is given; call it during component setup.
  */
 export function bruaAsset(id, brua = getBrua()) {
     if (!brua)
         throw new Error("bruaAsset needs setBrua() in a parent, or a Brua passed in.");
-    return readable(undefined, (set) => {
+    return readable(brua.cachedAsset(id), (set) => {
         let live = true;
         brua.asset(id).then((loaded) => { if (live)
-            set(loaded); });
+            set(loaded); }, () => { });
         return () => { live = false; };
     });
 }

package/dist/types.d.ts

@@ -8,6 +8,10 @@ export interface AssetResponse {
     alt: string;
     lang?: string;
     variants: AssetVariant[];
+    /** How a layout's box of another shape holds the asset, as CSS object-fit: "contain" or "cover". */
+    objectFit?: string;
+    /** Where it sits in the box, as CSS object-position: "50% 35%", the point a cover crop keeps in view. */
+    objectPosition?: string;
 }
 /** Value fields are plain strings, not unions, so new values from the API never break decoding (SPEC.md 14). */
 export interface AssetVariant {

package/dist/vue.d.ts

@@ -6,8 +6,8 @@ export declare const bruaKey: InjectionKey<Brua>;
 /** Where the app's assets are read from by id: call once in the root component, then <BruaPicture id="…"> anywhere below. */
 export declare function provideBrua(options: Brua | BruaOptions): Brua;
 /**
- * The asset's current release for an id, from the provided Brua or the one given: undefined until it has loaded,
- * and when nothing is released under the id. A server render shows the fallback.
+ * The asset's current release for an id, from the provided Brua or the one given: the last release it read at once, else
+ * undefined until it has loaded, and when nothing is released under the id. A server render shows the fallback.
  */
 export declare function useBruaAsset(id: MaybeRefOrGetter<string | undefined>, brua?: Brua): Ref<AssetResponse | undefined>;
 /**
@@ -45,6 +45,16 @@ export declare const BruaPicture: import("vue").DefineComponent<import("vue").Ex
         type: PropType<"light" | "dark">;
         required: false;
     };
+    /** "contain" or "cover" to override the asset's fit, or "none" to leave the fit to the page's CSS. */
+    objectFit: {
+        type: PropType<"contain" | "cover" | "none">;
+        required: false;
+    };
+    /** Where the img sits in its box, as "x% y%", instead of the asset's position. */
+    objectPosition: {
+        type: StringConstructor;
+        required: false;
+    };
 }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -79,6 +89,16 @@ export declare const BruaPicture: import("vue").DefineComponent<import("vue").Ex
         type: PropType<"light" | "dark">;
         required: false;
     };
+    /** "contain" or "cover" to override the asset's fit, or "none" to leave the fit to the page's CSS. */
+    objectFit: {
+        type: PropType<"contain" | "cover" | "none">;
+        required: false;
+    };
+    /** Where the img sits in its box, as "x% y%", instead of the asset's position. */
+    objectPosition: {
+        type: StringConstructor;
+        required: false;
+    };
 }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 /**
  * One variant URL for the asset, chosen for this browser and kept current as its appearance, motion setting

package/dist/vue.js

@@ -1,6 +1,6 @@
 // Brua for Vue 3: provideBrua, <BruaPicture>, useBruaAsset and useBruaUrl. Import from "@meginhufr/brua-web/vue".
 import { computed, defineComponent, h, inject, onBeforeUnmount, onMounted, provide, ref, toValue, unref, watchEffect, } from "vue";
-import { pictureModel } from "./picture.js";
+import { fillStyle, pictureModel } from "./picture.js";
 import { selectUrl } from "./select.js";
 import { defaultClientState, watchClientState } from "./client.js";
 import { createBrua } from "./brua.js";
@@ -12,8 +12,8 @@ export function provideBrua(options) {
     return brua;
 }
 /**
- * The asset's current release for an id, from the provided Brua or the one given: undefined until it has loaded,
- * and when nothing is released under the id. A server render shows the fallback.
+ * The asset's current release for an id, from the provided Brua or the one given: the last release it read at once, else
+ * undefined until it has loaded, and when nothing is released under the id. A server render shows the fallback.
  */
 export function useBruaAsset(id, brua) {
     const client = brua ?? inject(bruaKey, undefined);
@@ -28,8 +28,9 @@ export function useBruaAsset(id, brua) {
             throw new Error("useBruaAsset needs provideBrua() in a parent, or a Brua passed in.");
         let live = true;
         onCleanup(() => { live = false; });
+        asset.value = client.cachedAsset(wanted);
         client.asset(wanted).then((loaded) => { if (live)
-            asset.value = loaded; });
+            asset.value = loaded; }, () => { });
     });
     return asset;
 }
@@ -53,6 +54,10 @@ export const BruaPicture = defineComponent({
         loading: { type: String, required: false },
         /** "light" or "dark" to show that scheme's files only, for apps that switch themes themselves. */
         colorScheme: { type: String, required: false },
+        /** "contain" or "cover" to override the asset's fit, or "none" to leave the fit to the page's CSS. */
+        objectFit: { type: String, required: false },
+        /** Where the img sits in its box, as "x% y%", instead of the asset's position. */
+        objectPosition: { type: String, required: false },
     },
     setup(props, { attrs, slots }) {
         const fetched = useBruaAsset(() => (props.asset ? undefined : props.id), props.brua);
@@ -60,7 +65,9 @@ export const BruaPicture = defineComponent({
             const asset = props.asset ?? fetched.value;
             if (!asset)
                 return slots.default?.() ?? null;
-            const { sources, img } = pictureModel(asset, { sizes: props.sizes, loading: props.loading, colorScheme: props.colorScheme });
+            const { sources, img } = pictureModel(asset, {
+                sizes: props.sizes, loading: props.loading, colorScheme: props.colorScheme, objectFit: props.objectFit, objectPosition: props.objectPosition,
+            });
             return h("picture", [
                 ...sources.map((s) => h("source", { key: `${s.type}${s.media ?? ""}`, type: s.type, media: s.media, srcset: s.srcset, sizes: s.sizes })),
                 h("img", {
@@ -74,6 +81,8 @@ export const BruaPicture = defineComponent({
                     lang: img.lang,
                     loading: img.loading,
                     decoding: img.decoding,
+                    // The fill first, so a style the page gives the component still wins.
+                    style: [fillStyle(img), attrs.style],
                 }),
             ]);
         };

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@meginhufr/brua-web",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Brua for the web: AssetResponse types, the variant selection rule, <picture> rendering, and components for React, Vue and Svelte.",
   "author": "Meginhufr AS <hello@brua.dev> (https://brua.dev)",
   "license": "MIT",
   "homepage": "https://brua.dev",
   "repository": {
     "type": "git",
-    "url": "https://github.com/Meginhufr/brua-web.git"
+    "url": "git+https://github.com/Meginhufr/brua-web.git"
   },
   "type": "module",
   "sideEffects": false,
@@ -36,7 +36,7 @@
   ],
   "scripts": {
     "build": "rm -rf dist && tsc -p tsconfig.build.json && cp src/BruaPicture.svelte dist/",
-    "test": "node --test test/"
+    "test": "node --test \"test/**/*.test.ts\""
   },
   "publishConfig": {
     "access": "public",