@estiva-app/ui 0.25.0 → 0.27.0

package/dist/AttachmentCard.d.ts

@@ -5,10 +5,17 @@ import { type ComponentPropsWithRef } from 'react';
  * Peek's two attachment components, class for class (UIG-27, Katerina's ruling
  * of 14 September that both apps draw one): `FileAttachmentCard`, the card on
  * something already posted, and `PendingAttachmentChip`, the card in a composer
- * waiting to go. What stays in each app is what only the app can do: fetch the
- * bytes with the reader's own permission, open an image full screen, save a
- * file. The card is told the result — a `src`, an `href`, a `state` — and hands
- * a click back through `onOpen`, `onDownload` and `onRemove`.
+ * waiting to go. The card is told the result — a `src`, an `href`, a `state` —
+ * and hands a click back through `onOpen`, `onDownload` and `onRemove`.
+ *
+ * **It now does the rest of the job too** (UIG-35, Katerina 20 September):
+ * given a `remoteSrc` and the app's `fetchImage`, it fetches a file the reader
+ * needs permission for and draws the wait and the refusal; it opens a picture
+ * full screen in the package's `Lightbox`; and with `download` it saves the
+ * file. Peek and Ship had each written those three around it, 174 and 181 lines
+ * that did the same things differently — Ship's pictures never opened at all.
+ * What stays an app's is the one thing only it knows: how to fetch with its own
+ * authorization.
  *
  * Two shapes, decided by the file: an **image** with a picture is a 180px
  * thumbnail you can open; anything else is a 240px **row** — a type tile, the
@@ -30,10 +37,45 @@ export interface AttachmentCardProps extends Omit<ComponentPropsWithRef<'div'>,
     href?: string;
     /** The picture an image card draws. Without it an image is drawn as a row. */
     src?: string;
-    /** What a click on an image's picture does — the app's full-screen view. */
+    /**
+     * What the picture shows, where the sender said — Ship carries one on every
+     * `imeta`. It is what a screen reader reads and what the viewer is named
+     * with; `name` is still the file's name, under the thumbnail. Without it the
+     * name does both jobs.
+     */
+    alt?: string;
+    /**
+     * A file the app has to *fetch* before it can be used — one on a relay, where
+     * reading it needs the reader's own authorization (UIG-35). Give `fetchImage`
+     * with it. For a picture the card waits, draws it, and says so if it cannot
+     * be read, so no app writes that state machine again; for a document the
+     * result is where the row opens, and until it lands the row is dimmed rather
+     * than pretending to open. Ignored when `src` is set.
+     */
+    remoteSrc?: string;
+    /**
+     * The full-size picture, fetched only when someone opens it. A thread of
+     * screenshots would otherwise pull every original at full size to draw them
+     * at 112px. Until it arrives the viewer shows the thumbnail.
+     */
+    remoteFullSrc?: string;
+    /** How this app fetches a picture it is allowed to read: a URL in, a URL the
+     *  browser can draw out (an object URL, usually). */
+    fetchImage?: (url: string) => Promise<string>;
+    /**
+     * What a click on an image's picture does. Without it the card **opens the
+     * picture itself**, full screen, in the package's `Lightbox` — which is what
+     * both apps wanted and one of them had written by hand.
+     */
     onOpen?: () => void;
     /** Shows a download control on hover or focus, and calls this. */
     onDownload?: () => void;
+    /**
+     * Shows the download control and **saves the file itself**, under `name`:
+     * the original where there is one (`remoteFullSrc`), otherwise what the card
+     * is drawing. Use `onDownload` instead when the app must do it another way.
+     */
+    download?: boolean;
     /** Waiting to be sent: the composer's 200px row, with a remove control on its corner. */
     pending?: boolean;
     /** Removes a pending card. */
@@ -48,5 +90,5 @@ export interface AttachmentCardProps extends Omit<ComponentPropsWithRef<'div'>,
     /** The note's full words, on hover, where the line is short. */
     noteHint?: string;
 }
-export declare function AttachmentCard({ name, size, contentType, href, src, onOpen, onDownload, pending, onRemove, state, note, noteHint, className, ...props }: AttachmentCardProps): import("react").JSX.Element;
+export declare function AttachmentCard({ name, size, contentType, href, src, alt, remoteSrc, remoteFullSrc, fetchImage, onOpen, onDownload, download, pending, onRemove, state, note, noteHint, className, ...props }: AttachmentCardProps): import("react").JSX.Element;
 //# sourceMappingURL=AttachmentCard.d.ts.map

package/dist/AttachmentCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AttachmentCard.d.ts","sourceRoot":"","sources":["../src/AttachmentCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqC,KAAK,qBAAqB,EAAW,MAAM,OAAO,CAAA;AAyB9F;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,SAAS,GAAG,YAAY,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAA;AA2FzG,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACzF,kGAAkG;IAClG,IAAI,EAAE,MAAM,CAAA;IACZ,gBAAgB;IAChB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mFAAmF;IACnF,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,4FAA4F;IAC5F,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,8EAA8E;IAC9E,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,4EAA4E;IAC5E,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,yFAAyF;IACzF,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,mBAAmB,CAAA;IAC3B,sGAAsG;IACtG,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,GAAG,EACH,MAAM,EACN,UAAU,EACV,OAAe,EACf,QAAQ,EACR,KAAe,EACf,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,mBAAmB,+BAuJrB"}
+{"version":3,"file":"AttachmentCard.d.ts","sourceRoot":"","sources":["../src/AttachmentCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgD,KAAK,qBAAqB,EAAW,MAAM,OAAO,CAAA;AA0BzG;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,SAAS,GAAG,YAAY,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAA;AA2FzG,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACzF,kGAAkG;IAClG,IAAI,EAAE,MAAM,CAAA;IACZ,gBAAgB;IAChB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mFAAmF;IACnF,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,4FAA4F;IAC5F,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,8EAA8E;IAC9E,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;;;OAKG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;yDACqD;IACrD,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,CAAA;IAC7C;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yFAAyF;IACzF,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,mBAAmB,CAAA;IAC3B,sGAAsG;IACtG,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAwED,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,GAAG,EACH,GAAG,EACH,SAAS,EACT,aAAa,EACb,UAAU,EACV,MAAM,EACN,UAAU,EACV,QAAgB,EAChB,OAAe,EACf,QAAQ,EACR,KAAe,EACf,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,mBAAmB,+BAgNrB"}

package/dist/Lightbox.d.ts

@@ -0,0 +1,30 @@
+/**
+ * A picture, full screen, on a scrim — the thing a thumbnail opens into.
+ *
+ * Both apps had written this by hand and neither had got it right: Peek's
+ * `ImageLightbox` and the `FrameLightbox` before it were `createPortal` plus a
+ * fixed `<div>`, with no Escape, no focus trap and nothing to return focus to
+ * (Peek scan F5, P4; migration B22, Katerina 10 September). Ship never had one
+ * at all, so a screenshot in an issue could not be looked at.
+ *
+ * On Base UI's `Dialog`, like `DialogShell`: the portal, the backdrop, Escape,
+ * the outside press and the focus trap are its, and what is written here is the
+ * picture, the scrim and the close button.
+ *
+ * **The close button is this component's own**, not an `IconButton`: a 26px
+ * square with no fill is hard to find on top of a photograph, which is why Peek
+ * had written an escape note beside its own. A 32px round button on an elevated
+ * fill with a hairline reads on any picture.
+ */
+export interface LightboxProps {
+    /** The picture to show. Swapping it — a thumbnail for the original, once it
+     *  arrives — swaps what is on screen, with no flash of nothing. */
+    src: string;
+    /** What the picture is. Names the viewer for assistive tech too. */
+    alt: string;
+    onClose: () => void;
+    /** Extra classes on the picture itself. */
+    className?: string;
+}
+export declare function Lightbox({ src, alt, onClose, className }: LightboxProps): import("react").JSX.Element;
+//# sourceMappingURL=Lightbox.d.ts.map

package/dist/Lightbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Lightbox.d.ts","sourceRoot":"","sources":["../src/Lightbox.tsx"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,WAAW,aAAa;IAC5B;uEACmE;IACnE,GAAG,EAAE,MAAM,CAAA;IACX,oEAAoE;IACpE,GAAG,EAAE,MAAM,CAAA;IACX,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,aAAa,+BAoDvE"}

package/dist/eslint/index.js

@@ -369,7 +369,7 @@ var OWNED_BEHAVIOURS = [
     id: "portal",
     behaviour: "Floats on top of the page",
     baseUi: ["Dialog", "AlertDialog", "Popover", "Menu", "Select", "Combobox", "Autocomplete", "Tooltip", "PreviewCard", "Toast"],
-    owners: ["DialogShell", "ConfirmDialog", "CommandPalette", "Popover", "Menu", "Select", "ChipInput", "Tooltip", "PreviewCard", "Toast"],
+    owners: ["DialogShell", "ConfirmDialog", "CommandPalette", "Lightbox", "Popover", "Menu", "Select", "ChipInput", "Tooltip", "PreviewCard", "Toast"],
     reads: "createPortal, called, or imported and never called"
   },
   {
@@ -383,21 +383,21 @@ var OWNED_BEHAVIOURS = [
     id: "page-keys",
     behaviour: "Takes its keys by itself",
     baseUi: ["Dialog", "AlertDialog", "Popover", "Menu", "Select", "Combobox", "Tooltip", "PreviewCard", "Toast"],
-    owners: ["DialogShell", "Popover", "Menu", "Select", "Tabs", "Toolbar"],
+    owners: ["DialogShell", "Lightbox", "Popover", "Menu", "Select", "Tabs", "Toolbar"],
     reads: "a keydown, keyup or keypress listener on window or document"
   },
   {
     id: "focus",
     behaviour: "Holds focus inside while open, and gives it back",
     baseUi: ["Dialog", "AlertDialog", "Popover", "Menu", "Select", "Combobox"],
-    owners: ["DialogShell", "CommandPalette"],
+    owners: ["DialogShell", "CommandPalette", "Lightbox"],
     reads: "a focusin or focusout listener on window or document; the Tab key compared by hand"
   },
   {
     id: "scroll-lock",
     behaviour: "Stops the page behind it scrolling",
     baseUi: ["Dialog", "AlertDialog"],
-    owners: ["DialogShell"],
+    owners: ["DialogShell", "Lightbox"],
     reads: "overflow written into the style of document.body or document.documentElement"
   },
   {