zabi-components 8.1.0 → 9.0.0

package/dist/molecules/PhotoGrid.svelte

@@ -4,9 +4,11 @@
     import { untrack } from "svelte";
     import type { HTMLAttributes } from "svelte/elements";
     import Check from "@lucide/svelte/icons/check";
+    import CircleAlert from "@lucide/svelte/icons/circle-alert";
     import ImageOff from "@lucide/svelte/icons/image-off";
     import Maximize2 from "@lucide/svelte/icons/maximize-2";
     import Plus from "@lucide/svelte/icons/plus";
+    import RotateCw from "@lucide/svelte/icons/rotate-cw";
     import Skeleton from "../atoms/Skeleton.svelte";
     import { isDevBuild } from "../util/app-shell.js";
     import { cn } from "../util/cn.js";
@@ -77,6 +79,17 @@
          * Open your own file picker or an ImageUpload from it.
          */
         onadd?: () => void;
+        /**
+         * Called once when a thumbnail cannot be loaded, so the page can answer
+         * with a new address (a signed one that has run out). A new `thumbSrc`
+         * or `src` for the same photo is tried at once.
+         */
+        onloaderror?: (photo: Photo, index: number) => void;
+        /**
+         * Puts a "Try again" button on each photo whose `status` is `error`
+         * and is called when it is pressed.
+         */
+        onretry?: (photo: Photo, index: number) => void;
         /** Overrides for the built-in strings. */
         strings?: Partial<PhotoGridStrings>;
         /** Extra classes for the host element. */
@@ -95,6 +108,8 @@
         selectedKeys = $bindable<Exclude<Props["selectedKeys"], undefined>>(),
         onselect,
         onadd,
+        onloaderror,
+        onretry,
         strings,
         class: className = "",
         "aria-label": ariaLabel,
@@ -162,16 +177,38 @@
         // again for every image each time one of the lists changes.
         untrack(() => {
             if (image.naturalWidth > 0) markLoaded(address);
-            else markFailed(address);
+            else if (markFailed(address)) reportFailed(address);
         });
     }
 
+    /** Tells the page which photo an address that failed belongs to. */
+    function reportFailed(address: string) {
+        if (!onloaderror) return;
+        const index = photos.findIndex((photo) => (photo.thumbSrc ?? photo.src) === address);
+        if (index !== -1) onloaderror(photos[index], index);
+    }
+
     function markLoaded(address: string) {
         if (!loaded.includes(address)) loaded = [...loaded, address];
     }
 
-    function markFailed(address: string) {
-        if (!failed.includes(address)) failed = [...failed, address];
+    /** True the first time an address fails, so the page is told once. */
+    function markFailed(address: string): boolean {
+        if (failed.includes(address)) return false;
+        failed = [...failed, address];
+        return true;
+    }
+
+    function nameWithStatus(photo: Photo, name: string): string {
+        if (photo.status === "uploading") return `${name}, ${text.uploading}`;
+        if (photo.status === "error") return `${name}, ${text.uploadFailed}`;
+        return name;
+    }
+
+    /** "40%" for an upload that says how far it has come; nothing for one that does not. */
+    function percent(progress: number | undefined): string {
+        if (progress === undefined || !Number.isFinite(progress)) return "";
+        return `${Math.round(Math.min(Math.max(progress, 0), 1) * 100)}%`;
     }
 
     /**
@@ -295,20 +332,29 @@
         onkeydown={handleKeydown}
     >
         {#if onadd}
-            <li class="relative aspect-square" data-photo-grid-tile onfocusin={() => handleTileFocus(ADD_KEY)}>
+            <li
+                class="@container relative aspect-square"
+                data-photo-grid-tile
+                onfocusin={() => handleTileFocus(ADD_KEY)}
+            >
                 <!-- A dashed edge the tile depends on to be seen, so in the
-                control-border colour; the label is shown, not only read out. -->
+                control-border colour; the label is shown, not only read out.
+                Nothing leaves the tile: the label is cut at two lines (the
+                name keeps the whole text), and the plus is drawn only where
+                the tile has room for it above two lines, which at 200% text
+                on a phone it has not (Z-136). -->
                 <button
                     type="button"
-                    class="focus-ring flex size-full cursor-pointer flex-col items-center justify-center gap-1 rounded-container border border-dashed border-control-border bg-transparent p-1 text-center text-xs font-medium text-body transition-colors duration-150 hover:bg-surface-hover active:bg-surface-active motion-reduce:transition-none"
+                    class="focus-ring flex size-full cursor-pointer flex-col items-center justify-center gap-1 overflow-hidden rounded-container border border-dashed border-control-border bg-transparent p-1 text-center text-xs font-medium text-body transition-colors duration-150 hover:bg-surface-hover active:bg-surface-active motion-reduce:transition-none"
+                    aria-label={text.addPhoto}
                     aria-describedby={describedKey === ADD_KEY ? hintId : undefined}
                     tabindex={tabbableKey === ADD_KEY ? 0 : -1}
                     data-photo-grid-item
                     data-photo-grid-add
                     onclick={() => onadd?.()}
                 >
-                    <Plus size={24} class="shrink-0" aria-hidden="true" />
-                    <span class="[overflow-wrap:anywhere]">{text.addPhoto}</span>
+                    <Plus size={24} class="hidden shrink-0 @min-[calc(24px+3.5rem)]:block" aria-hidden="true" />
+                    <span class="line-clamp-2 [overflow-wrap:anywhere]">{text.addPhoto}</span>
                 </button>
             </li>
         {/if}
@@ -337,7 +383,7 @@
                             ? "outline-2 -outline-offset-2 outline-(--color-action-primary)"
                             : "outline-1 -outline-offset-1 outline-(--color-border) hover:outline-(--color-border-medium) active:scale-[0.98] motion-reduce:active:scale-100",
                     )}
-                    aria-label={more ? `${name}, ${text.morePhotos(counts.hidden)}` : name}
+                    aria-label={more ? `${name}, ${text.morePhotos(counts.hidden)}` : nameWithStatus(photo, name)}
                     aria-pressed={selects ? on : undefined}
                     aria-describedby={key === describedKey ? hintId : undefined}
                     {tabindex}
@@ -370,7 +416,9 @@
                                 loaded.includes(source) ? "opacity-100" : "opacity-0",
                             )}
                             onload={() => markLoaded(source)}
-                            onerror={() => markFailed(source)}
+                            onerror={() => {
+                                if (markFailed(source)) onloaderror?.(photo, index);
+                            }}
                             {@attach settled}
                         />
                     {/if}
@@ -382,6 +430,30 @@
                             <Check size={14} aria-hidden="true" />
                         </span>
                     {/if}
+                    {#if photo.status && !more}
+                        <!-- On its way, or not arrived: the photo is dimmed and
+                        the mark sits on an opaque plate, as the "+12" does. The
+                        name says it in words. -->
+                        <span
+                            class="absolute inset-0 flex items-center justify-center bg-overlay"
+                            aria-hidden="true"
+                            data-photo-grid-status={photo.status}
+                        >
+                            <span
+                                class="flex min-h-8 min-w-8 items-center justify-center rounded-control border border-control-border bg-surface-overlay px-1 text-xs font-semibold text-headline tabular-nums"
+                            >
+                                {#if photo.status === "error"}
+                                    <CircleAlert size={18} class="text-error-text" />
+                                {:else if percent(photo.progress)}
+                                    {percent(photo.progress)}
+                                {:else}
+                                    <span
+                                        class="inline-block size-4 shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent motion-reduce:animate-pulse"
+                                    ></span>
+                                {/if}
+                            </span>
+                        </span>
+                    {/if}
                     {#if more}
                         <!-- The photo is dimmed and the number sits on an opaque
                         plate, so it reads on any photo in either theme. The
@@ -399,6 +471,24 @@
                         </span>
                     {/if}
                 </button>
+                {#if photo.status === "error" && onretry && !more}
+                    <!-- Beside the tile's button, in the other bottom corner
+                    from the one that opens. -->
+                    <button
+                        type="button"
+                        class={cn(
+                            cornerMark,
+                            TOUCH_HIT_AREA,
+                            "focus-ring bottom-[4px] start-[4px] size-7 cursor-pointer border border-control-border bg-surface-overlay text-body transition-colors duration-150 hover:text-headline motion-reduce:transition-none",
+                        )}
+                        aria-label={text.retryUpload(name)}
+                        {tabindex}
+                        data-photo-grid-retry
+                        onclick={() => onretry?.(photo, index)}
+                    >
+                        <RotateCw size={14} aria-hidden="true" />
+                    </button>
+                {/if}
                 {#if selects && onopen}
                     <!-- Beside the tile's button, not inside it. An opaque
                     plate, so it reads over any photo; on a coarse pointer an

package/dist/molecules/PhotoGrid.svelte.d.ts

@@ -50,6 +50,17 @@ type Props = Omit<HTMLAttributes<HTMLDivElement>, "class" | "aria-label" | "aria
      * Open your own file picker or an ImageUpload from it.
      */
     onadd?: () => void;
+    /**
+     * Called once when a thumbnail cannot be loaded, so the page can answer
+     * with a new address (a signed one that has run out). A new `thumbSrc`
+     * or `src` for the same photo is tried at once.
+     */
+    onloaderror?: (photo: Photo, index: number) => void;
+    /**
+     * Puts a "Try again" button on each photo whose `status` is `error`
+     * and is called when it is pressed.
+     */
+    onretry?: (photo: Photo, index: number) => void;
     /** Overrides for the built-in strings. */
     strings?: Partial<PhotoGridStrings>;
     /** Extra classes for the host element. */

package/dist/molecules/PhotoViewer.svelte

@@ -16,6 +16,8 @@
     import { cn } from "../util/cn.js";
     import {
         focusFirstElement,
+        getFocusableElements,
+        isTopOverlay,
         joinOverlayStack,
         recoverStrayFocus,
         returnFocus,
@@ -77,6 +79,12 @@
      * on plates in the theme's own surface colour, so they read over any
      * photo in either theme.
      *
+     * It does not take the browser's Back. A history entry made by a
+     * component conflicts with the app's router (SvelteKit warns against
+     * `history.pushState` outside `$app/navigation`), so open the viewer from
+     * the router's own state: push a state on open, read `isOpen` from it,
+     * and go back to close (Z-131).
+     *
      * Other attributes (`id`, `data-*`, ...) land on the `role="dialog"` panel.
      */
     type Props = Omit<
@@ -103,6 +111,18 @@
         portal?: boolean;
         /** Fired when the viewer closes itself, with what the user did. */
         onclose?: (detail: { reason: PhotoViewerCloseReason }) => void;
+        /**
+         * Called once when a full image cannot be loaded, so the page can
+         * answer with a new address (a signed one that has run out). A new
+         * `src` for the same photo is tried at once.
+         */
+        onloaderror?: (photo: Photo, index: number) => void;
+        /**
+         * Called when "Try again" is pressed on a photo that failed, before
+         * the image is asked for again. Return a promise and the button waits
+         * for it, busy, so the page has time to fetch a fresh address.
+         */
+        onretry?: (photo: Photo, index: number) => void | Promise<void>;
         /** Accessible name of the dialog. */
         label?: string;
         /** Overrides for the built-in strings. */
@@ -118,6 +138,8 @@
         actions = [],
         portal = true,
         onclose,
+        onloaderror,
+        onretry,
         label = "Photo viewer",
         strings,
         class: className = "",
@@ -177,6 +199,8 @@
      */
     let openerGrid: Element | null = null;
     const statusId = generateId("photo-viewer-status");
+    const captionId = generateId("photo-viewer-caption");
+    const creditId = generateId("photo-viewer-credit");
     let rtl = $state(false);
 
     // --- Loading -----------------------------------------------------------
@@ -193,8 +217,13 @@
         if (!loaded.includes(source)) loaded = [...loaded, source];
     }
 
+    /** The page is told once for each address that fails. */
     function markFailed(source: string) {
-        if (!failed.includes(source)) failed = [...failed, source];
+        if (failed.includes(source)) return;
+        failed = [...failed, source];
+        if (!onloaderror) return;
+        const at = photos.findIndex((item) => item.src === source);
+        if (at !== -1) onloaderror(photos[at], at);
     }
 
     /** An image that was complete before anything was listening. */
@@ -209,7 +238,22 @@
         });
     }
 
-    function retry(source: string) {
+    /** Addresses whose "Try again" is waiting for the page's `onretry`. */
+    let retrying = $state<string[]>([]);
+
+    async function retry(item: Photo, at: number) {
+        const source = item.src;
+        if (retrying.includes(source)) return;
+        if (onretry) {
+            retrying = [...retrying, source];
+            try {
+                await onretry(item, at);
+            } catch {
+                // The page's own failure: the image is asked for again all the same.
+            } finally {
+                retrying = retrying.filter((candidate) => candidate !== source);
+            }
+        }
         failed = failed.filter((candidate) => candidate !== source);
         attempts = { ...attempts, [source]: (attempts[source] ?? 0) + 1 };
         // The button that was pressed goes with the message it was in: the
@@ -719,6 +763,37 @@
         if (!active || active === document.body) container.focus({ preventScroll: true });
     });
 
+    /**
+     * An action's button can go while it holds the focus: "Remove" is pressed,
+     * the photo leaves `photos`, and the one that shows next has no "Remove".
+     * Nothing tells the page when a focused element is taken out, and a
+     * confirm dialog between the press and the removal hands the focus back
+     * to a button that is gone. So the page is watched while the viewer is
+     * open: when something is taken out or put in and the focus is found on
+     * `<body>` with this viewer on top, its first control (Close) takes it.
+     */
+    $effect(() => {
+        const container = panel;
+        if (!isOpen || !container || typeof MutationObserver !== "function") return;
+        let timer: ReturnType<typeof setTimeout> | undefined;
+        const check = () => {
+            timer = undefined;
+            if (!focusActive || !container.isConnected || !isTopOverlay(container)) return;
+            const active = document.activeElement;
+            if (active && active !== document.body) return;
+            (getFocusableElements(container)[0] ?? container).focus({ preventScroll: true });
+        };
+        // After the change has settled: a dialog that is closing gives the focus back first.
+        const observer = new MutationObserver(() => {
+            if (timer === undefined) timer = setTimeout(check, 0);
+        });
+        observer.observe(document.body, { childList: true, subtree: true });
+        return () => {
+            observer.disconnect();
+            if (timer !== undefined) clearTimeout(timer);
+        };
+    });
+
     function showPhoto(turn: number) {
         captionOpen = false;
         void go(turn);
@@ -780,7 +855,12 @@
                     >
                         <ImageOff size={24} aria-hidden="true" />
                         <p>{text.loadError}</p>
-                        <Button variant="secondary" size="lg" onclick={() => retry(source)}>
+                        <Button
+                            variant="secondary"
+                            size="lg"
+                            loading={retrying.includes(source)}
+                            onclick={() => retry(item, at)}
+                        >
                             {text.retry}
                         </Button>
                     </div>
@@ -849,7 +929,9 @@
             role="dialog"
             aria-modal="true"
             aria-label={label}
-            aria-describedby={statusId}
+            aria-describedby={[statusId, photo.caption ? captionId : "", photo.credit ? creditId : ""]
+                .filter(Boolean)
+                .join(" ")}
             tabindex="-1"
             data-zoomed={zoomed ? "true" : undefined}
             {...restProps}
@@ -950,40 +1032,55 @@
             {/if}
 
             <!-- Bottom: the caption, then what can be done with the photo. -->
-            {#if photo.caption || actions.length > 0}
+            {#if photo.caption || photo.credit || actions.length > 0}
                 <div
                     class={cn(
                         "pointer-events-none absolute inset-x-0 bottom-0 flex flex-col items-center gap-[8px] pb-[max(8px,env(safe-area-inset-bottom))]",
                         sides,
                     )}
                 >
-                    {#if photo.caption}
+                    {#if photo.caption || photo.credit}
                         <div
                             class={cn(
                                 plate,
                                 "pointer-events-auto flex w-full items-end gap-[8px] rounded-container px-3 py-2 text-sm sm:w-[min(100%,40rem)]",
+                                // The credit takes a line of its own under the caption.
+                                photo.credit && "flex-wrap gap-y-1",
                             )}
                             data-photo-viewer-caption
                         >
-                            <p
-                                bind:this={captionText}
-                                class={cn(
-                                    "min-w-0 flex-1 [overflow-wrap:anywhere]",
-                                    // The one thing in the viewer that scrolls under a finger.
-                                    captionOpen ? "max-h-[40dvh] touch-pan-y overflow-y-auto" : "line-clamp-2",
-                                )}
-                            >
-                                {photo.caption}
-                            </p>
-                            {#if captionLong || captionOpen}
-                                <button
-                                    type="button"
-                                    class="focus-ring -my-1 -me-1 min-h-11 shrink-0 cursor-pointer rounded-[calc(var(--radius-container)-4px)] px-2 text-sm font-medium text-link"
-                                    aria-expanded={captionOpen}
-                                    onclick={() => (captionOpen = !captionOpen)}
+                            {#if photo.caption}
+                                <p
+                                    id={captionId}
+                                    bind:this={captionText}
+                                    class={cn(
+                                        "min-w-0 flex-1 [overflow-wrap:anywhere]",
+                                        // The one thing in the viewer that scrolls under a finger.
+                                        captionOpen ? "max-h-[40dvh] touch-pan-y overflow-y-auto" : "line-clamp-2",
+                                    )}
                                 >
-                                    {captionOpen ? text.showLess : text.showMore}
-                                </button>
+                                    {photo.caption}
+                                </p>
+                                {#if captionLong || captionOpen}
+                                    <button
+                                        type="button"
+                                        class="focus-ring -my-1 -me-1 min-h-11 shrink-0 cursor-pointer rounded-[calc(var(--radius-container)-4px)] px-2 text-sm font-medium text-link"
+                                        aria-expanded={captionOpen}
+                                        onclick={() => (captionOpen = !captionOpen)}
+                                    >
+                                        {captionOpen ? text.showLess : text.showMore}
+                                    </button>
+                                {/if}
+                            {/if}
+                            {#if photo.credit}
+                                <!-- Quieter than the caption, and outside what More and Less fold. -->
+                                <p
+                                    id={creditId}
+                                    class="min-w-0 basis-full text-description [overflow-wrap:anywhere]"
+                                    data-photo-viewer-credit
+                                >
+                                    {photo.credit}
+                                </p>
                             {/if}
                         </div>
                     {/if}

package/dist/molecules/PhotoViewer.svelte.d.ts

@@ -20,6 +20,12 @@ import { type Photo, type PhotoViewerAction, type PhotoViewerCloseReason, type P
  * on plates in the theme's own surface colour, so they read over any
  * photo in either theme.
  *
+ * It does not take the browser's Back. A history entry made by a
+ * component conflicts with the app's router (SvelteKit warns against
+ * `history.pushState` outside `$app/navigation`), so open the viewer from
+ * the router's own state: push a state on open, read `isOpen` from it,
+ * and go back to close (Z-131).
+ *
  * Other attributes (`id`, `data-*`, ...) land on the `role="dialog"` panel.
  */
 type Props = Omit<HTMLAttributes<HTMLDivElement>, "class" | "onclose" | "aria-label"> & {
@@ -44,6 +50,18 @@ type Props = Omit<HTMLAttributes<HTMLDivElement>, "class" | "onclose" | "aria-la
     onclose?: (detail: {
         reason: PhotoViewerCloseReason;
     }) => void;
+    /**
+     * Called once when a full image cannot be loaded, so the page can
+     * answer with a new address (a signed one that has run out). A new
+     * `src` for the same photo is tried at once.
+     */
+    onloaderror?: (photo: Photo, index: number) => void;
+    /**
+     * Called when "Try again" is pressed on a photo that failed, before
+     * the image is asked for again. Return a promise and the button waits
+     * for it, busy, so the page has time to fetch a fresh address.
+     */
+    onretry?: (photo: Photo, index: number) => void | Promise<void>;
     /** Accessible name of the dialog. */
     label?: string;
     /** Overrides for the built-in strings. */