@connextar/house 0.17.0 → 0.18.0

package/README.md

@@ -666,6 +666,34 @@ export function Markdown({ content }: { content: string }) {
 
 `classNames` replaces the look of any element for an app without theme tokens.
 
+**Pictures.** A guide names a screenshot or a diagram on a line of its own, with a
+blank line either side:
+
+```md
+![The calls log, newest call first, with the ID-checked column](/guide-images/calls-log.webp "Every call, newest first")
+
+![A caller reaches the line, then the assistant answers or hands over](diagram:call-routing)
+```
+
+`GuideMarkdown` draws one only when it is in the app's registry, `figures` — a
+screenshot with its `width` and `height` (so the page doesn't jump as it loads) and
+optionally a `dark` capture of the same size, or a diagram by name — and has alt
+text; anything else is left out, so a guide can't pull an image in from elsewhere
+and a typo never shows a broken image. (Before 0.18.0 such a line came out as a
+`!` and a link.) A screenshot is a plain lazy `<img>`; with a `dark` capture both
+are drawn and the theme's `dark:` variant shows one; without one, the light
+picture is toned down a little on a dark page. A diagram registered as a component
+is given the alt text as `label` for its own `<svg role="img" aria-label>`; one
+registered as an element is wrapped in `role="img"`. Headings keep their ids
+across pictures, and a picture ends a list.
+
+`guideFigureProblems(body, figures, { minAltLength })` is the check an app's test
+asserts empty for every guide: an unregistered picture, missing (or too short) alt
+text, a picture without a blank line either side or indented as if in a list, and
+an image written inside a line of text. `splitGuideFigures` is the same split as
+data; `renderFigure` replaces the drawing. `GuideArticle` adds zoom — see
+[Pictures and zoom](#pictures-and-zoom).
+
 ### `@connextar/house/guides`
 
 The frame a help centre's pages sit in, so every app's guides read and are found
@@ -706,6 +734,170 @@ export default async function GuidePage({ params }) {
 }
 ```
 
+#### Pictures and zoom
+
+Pass the registry and `GuideArticle` draws a guide's pictures
+([the Markdown](#connextarhousemarkdown)), each one a button: a "Click to enlarge"
+hint in its corner and a zoom-in cursor. A click, Enter or Space opens it in a
+dialog fitted to the screen (the whole screen on a phone):
+
+- zoom with the buttons, `+` and `−`, ⌘/Ctrl + scroll (a trackpad pinch arrives as
+  one) or a touch pinch, from fit up to four times full size, at the pointer;
+- when it is bigger than the screen, drag it, scroll it, or move it with the arrow
+  keys — never past its edges;
+- a double-click or double-tap, or the zoom level between the buttons, switches
+  between fit and full size (one image pixel to one CSS pixel); `0` fits again;
+- the caption and the alt text are shown under it; Escape or the close button
+  closes it and focus goes back to the picture. Zoom eases only without
+  `prefers-reduced-motion`; dragging and pinching never do.
+
+Diagrams zoom too. They are vector, so the dialog lays the diagram out at the size
+it had in the article and scales it: fit fills the screen, and "full size" is twice
+the fit. `zoom={false}` draws plain pictures. `labels` changes the words (`zoomHint`,
+`zoomOpen`, `zoomIn`, `zoomOut`, `zoomToggle`, `zoomLevel`, `zoomClose`,
+`zoomInstructions`), `classNames.figure` the picture's parts and `zoomClassNames`
+the button and dialog's (`GUIDE_ZOOM_CLASS_NAMES` lists them), all on the theme
+tokens. `GuideFigure` and `GuideFigureZoom` are there for a page laid out without
+`GuideArticle`. The zoom's classes appear only in this package, so the
+[Tailwind `@source`](#tailwind-setup-required-for-every-component) line is what
+styles it.
+
+Adopting it (PharmaLineAI's v0.23.1 pictures, which this generalises):
+
+1. **Screenshots** live in `public/guide-images/`, as WebP about 1600px wide (sharp
+   in a 768px column on a 2× screen) and under ~150 KB each. A dark capture, if
+   the app makes one, sits beside it at the same size (`calls-log-dark.webp`).
+2. **The registry.** Sizes in `lib/guide-screenshots.json`, written by the capture
+   script, and the diagrams beside them:
+
+   ```json
+   {
+     "/guide-images/calls-log.webp": { "width": 1600, "height": 986 },
+     "/guide-images/overview.webp": { "width": 1600, "height": 506, "dark": "/guide-images/overview-dark.webp" }
+   }
+   ```
+
+   ```tsx
+   // lib/guide-figures.tsx
+   import type { GuideFigures } from "@connextar/house/markdown";
+
+   import { CallRouting, IdentityCheck } from "@components/guides/guide-diagrams";
+   import screenshots from "@lib/guide-screenshots.json";
+
+   export const GUIDE_FIGURES: GuideFigures = {
+     screenshots,
+     diagrams: { "call-routing": CallRouting, "identity-check": IdentityCheck }, // each takes { label }
+   };
+   ```
+
+3. **The pages** pass it: `<GuideArticle … figures={GUIDE_FIGURES} />`, on the public
+   and the signed-in guide pages alike. A diagram component is drawn on the server;
+   only what it drew crosses into the dialog.
+4. **The app's test** reads the real guides:
+
+   ```ts
+   for (const { slug } of GUIDES) {
+     expect(guideFigureProblems(body(slug), GUIDE_FIGURES, { minAltLength: 20 }), slug).toEqual([]);
+   }
+   ```
+
+   and, because the package can't see the app's disk, checks the files: every
+   registered screenshot (and `dark`) exists at its recorded size (the app's own
+   `sharp`), every file in `public/guide-images/` is registered and used, all
+   WebP and small.
+
+5. **Capturing them (optional).** PharmaLineAI's `scripts/guide-screenshots.ts` is
+   the pattern, and stays in the app — this package ships no Playwright. It runs
+   only against the local harness (it refuses any base URL that isn't
+   `localhost`/`127.0.0.1`), signed in as the seeded owner from the harness's
+   cookie jar, in headless Chromium at 1440px, 2× pixels, light mode and reduced
+   motion. Each shot names a page, an optional `before` step (open a call, pick a
+   setting), and a crop to the panel its guide talks about, found from the page
+   (a heading, a bordered card). It hides the dev overlay, replaces seed text a
+   public page mustn't show (a real brand in a seed name), puts back any seed data
+   it changed for a shot in a `finally`, resizes to 1600px WebP with sharp, and
+   writes the sizes to `lib/guide-screenshots.json`. A dark set is the same run
+   with `colorScheme: "dark"` writing `-dark.webp` files and each entry's `dark`.
+
+PharmaLineAI's own `components/guides/guide-article.tsx` and the split in
+`lib/guide-figures.ts` go; its diagrams and its JSON stay, and its list of diagram
+names becomes the `diagrams` record.
+
+### `@connextar/house/health`
+
+A liveness check that says which release is running, so a deploy can be confirmed
+from outside: `curl https://app.example/healthz` answers `ok 0.18.0 2c9a3cf`.
+From PharmaLineAI's voice relay (v0.24.1), for every app.
+
+- `buildInfo(version, env = process.env)` → `{ version?, commit? }`. The version
+  must be semver-shaped (`1.2.3`, `1.2.3-rc.1`); the commit is the first of
+  `VERCEL_GIT_COMMIT_SHA`, `RENDER_GIT_COMMIT` and `GIT_COMMIT` that is a whole
+  hex hash, cut to 7. Anything else is dropped, never echoed: the endpoint is
+  public.
+- `healthText(build)` → `ok 1.2.3 abc1234` (just `ok` when nothing is known).
+- `healthResponse(build, { format })` → always 200, `Cache-Control: no-store`;
+  `text/plain` by default, `{ "status": "ok", "version", "commit" }` for
+  `format: "json"`. `healthFormat(request)` picks: `?format=json|text`, then an
+  `Accept` that names `application/json`; a browser, curl and a host's checker get
+  text.
+- `createHealthRoute({ version })` → `{ GET }`, the two above as a Next route
+  handler. Next answers `HEAD` from `GET` itself. No Next import, no package at all:
+  it is web `Request` and `Response`.
+
+The whole adoption is one file, `app/healthz/route.ts` (`src/app/…` adds a `../`):
+
+```ts
+import { createHealthRoute } from "@connextar/house/health";
+
+// A route handler is server-only, so package.json is bundled into the server and never reaches the browser.
+import pkg from "../../package.json";
+
+export const { GET } = createHealthRoute({ version: pkg.version });
+```
+
+(Next's default `tsconfig` has `resolveJsonModule`.) **Not**
+`process.env.npm_package_version`: npm sets it only in a process npm itself
+started — `node -e 'console.log(process.env.npm_package_version)'` prints
+`undefined`, and the same line under `npm run` prints the version. A Vercel
+function is started by Vercel's runtime, not `npm start`, so it is unset when the
+route runs; it is set during `npm run build`, so it could be inlined through
+`next.config`'s `env`, but only for as long as the build goes through npm. It works
+on Render under `npm start`, which is why it looks reliable until it isn't.
+
+The commit: Vercel sets `VERCEL_GIT_COMMIT_SHA` on Git deployments while "Automatically
+expose System Environment Variables" is on (the default); Render sets
+`RENDER_GIT_COMMIT`; anywhere else, set `GIT_COMMIT`. On Render, point the service's
+Health Check Path at `/healthz`; it needs the 200 and nothing else. A plain Node
+server (PharmaLineAI's relay) uses `buildInfo` and `healthText` directly.
+
+**Let it through.** `/healthz` must answer without signing in: exclude it from the
+app's `proxy.ts` (`middleware.ts` before Next 16) — e.g.
+`matcher: ["/((?!healthz|_next/static|_next/image|favicon.ico).*)"]` — and from any
+auth redirect, maintenance switch or locale rewrite in it. Vercel Deployment
+Protection on preview deployments answers 401 before the app does; that is
+expected, and production should be unprotected.
+
+**Liveness only.** It touches no database and no provider, so it can't be slow and
+a provider's outage never makes a host restart a healthy app. An app that wants a
+readiness check writes its own, separately — never as the host's health check:
+
+```ts
+// app/readyz/route.ts — the app's own; says only ready / not ready
+export async function GET() {
+  const ok = await Promise.race([
+    prisma.$queryRaw`select 1`.then(
+      () => true,
+      () => false,
+    ),
+    new Promise<boolean>((resolve) => setTimeout(() => resolve(false), 2000)),
+  ]);
+  return new Response(ok ? "ready" : "not ready", {
+    status: ok ? 200 : 503,
+    headers: { "cache-control": "no-store", "content-type": "text/plain; charset=utf-8" },
+  });
+}
+```
+
 ### `@connextar/house/trail`
 
 Where you came from, rather than where the URL says you are. A breadcrumb built

package/dist/guides/guide-article.d.ts

@@ -1,4 +1,6 @@
+import type { GuideFigures } from "../markdown/figures.js";
 import { type GuideClassNames } from "../markdown/guide.js";
+import type { GuideZoomClassNames } from "./guide-figure-zoom.js";
 import { type GuidesLabels } from "./library.js";
 export interface GuideArticleProps {
     /** The guide as `parseGuideFrontmatter` splits it. */
@@ -15,13 +17,22 @@ export interface GuideArticleProps {
     category?: string;
     labels?: Partial<GuidesLabels>;
     classNames?: Partial<GuideClassNames>;
+    /**
+     * The pictures this app's guides may show (`![alt](/guide-images/x.webp "Caption")` and
+     * `![alt](diagram:name)` on a line of their own). Unregistered ones are left out.
+     */
+    figures?: GuideFigures;
+    /** Open a picture full-size on a click, Enter or Space. Default: on. */
+    zoom?: boolean;
+    zoomClassNames?: Partial<GuideZoomClassNames>;
 }
 /**
  * One guide, laid out for reading inside `GuidesShell`: a way back to all guides, the category,
  * the title and lede, the article drawn by `GuideMarkdown`, and "On this page" — a rail that
  * follows the reader on wide screens, a collapsible list above the article on narrow ones. The
  * contents use the same heading ids the renderer gives, so `#<heading id>` links land.
- * Server-safe; the contents are the only client part.
+ * Registered pictures are drawn where the guide names them, each opening full-size.
+ * Server-safe; the contents and the zoom are the only client parts.
  */
-export declare function GuideArticle({ guide, guidesPath, indexSlug, category, labels, classNames }: GuideArticleProps): import("react").JSX.Element;
+export declare function GuideArticle({ guide, guidesPath, indexSlug, category, labels, classNames, figures, zoom, zoomClassNames, }: GuideArticleProps): import("react").JSX.Element;
 //# sourceMappingURL=guide-article.d.ts.map

package/dist/guides/guide-article.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"guide-article.d.ts","sourceRoot":"","sources":["../../src/guides/guide-article.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAkC,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE5F,OAAO,EAAiB,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAEhE,MAAM,WAAW,iBAAiB;IAChC,sDAAsD;IACtD,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACtD,iFAAiF;IACjF,UAAU,EAAE,MAAM,CAAC;IACnB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;CACvC;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,iBAAiB,+BA0B7G"}
+{"version":3,"file":"guide-article.d.ts","sourceRoot":"","sources":["../../src/guides/guide-article.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAkC,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE5F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAElE,OAAO,EAAiB,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAEhE,MAAM,WAAW,iBAAiB;IAChC,sDAAsD;IACtD,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACtD,iFAAiF;IACjF,UAAU,EAAE,MAAM,CAAC;IACnB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,wEAAwE;IACxE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;CAC/C;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,UAAU,EACV,SAAS,EACT,QAAQ,EACR,MAAM,EACN,UAAU,EACV,OAAO,EACP,IAAI,EACJ,cAAc,GACf,EAAE,iBAAiB,+BA0CnB"}

package/dist/guides/guide-article.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronLeft } from "lucide-react";
 import { Link } from "../internal/next-link.js";
 import { extractHeadings, GuideMarkdown } from "../markdown/guide.js";
+import { GuideFigure } from "./guide-figure.js";
 import { GuideToc } from "./guide-toc.js";
 import { GUIDES_LABELS } from "./library.js";
 /**
@@ -9,11 +10,12 @@ import { GUIDES_LABELS } from "./library.js";
  * the title and lede, the article drawn by `GuideMarkdown`, and "On this page" — a rail that
  * follows the reader on wide screens, a collapsible list above the article on narrow ones. The
  * contents use the same heading ids the renderer gives, so `#<heading id>` links land.
- * Server-safe; the contents are the only client part.
+ * Registered pictures are drawn where the guide names them, each opening full-size.
+ * Server-safe; the contents and the zoom are the only client parts.
  */
-export function GuideArticle({ guide, guidesPath, indexSlug, category, labels, classNames }) {
+export function GuideArticle({ guide, guidesPath, indexSlug, category, labels, classNames, figures, zoom, zoomClassNames, }) {
     const text = { ...GUIDES_LABELS, ...labels };
     const headings = extractHeadings(guide.body);
-    return (_jsxs("div", { className: "xl:grid xl:grid-cols-[minmax(0,1fr)_13rem] xl:gap-12", children: [_jsxs("article", { className: "max-w-3xl min-w-0", children: [_jsxs(Link, { href: guidesPath, className: "inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground", children: [_jsx(ChevronLeft, { className: "size-4", "aria-hidden": true }), " ", text.allGuides] }), category ? (_jsx("p", { className: "mt-5 text-xs font-bold tracking-[0.14em] text-primary uppercase", children: category })) : null, _jsx("h1", { className: "mt-2 text-3xl font-bold tracking-tight text-foreground sm:text-4xl", children: guide.title }), guide.lede ? _jsx("p", { className: "mt-3 text-lg text-muted-foreground", children: guide.lede }) : null, _jsx("div", { className: "mt-8", children: _jsx(GuideToc, { headings: headings, variant: "inline", labels: labels }) }), _jsx(GuideMarkdown, { content: guide.body, guidesPath: guidesPath, indexSlug: indexSlug, classNames: classNames })] }), _jsx(GuideToc, { headings: headings, variant: "rail", labels: labels })] }));
+    return (_jsxs("div", { className: "xl:grid xl:grid-cols-[minmax(0,1fr)_13rem] xl:gap-12", children: [_jsxs("article", { className: "max-w-3xl min-w-0", children: [_jsxs(Link, { href: guidesPath, className: "inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground", children: [_jsx(ChevronLeft, { className: "size-4", "aria-hidden": true }), " ", text.allGuides] }), category ? (_jsx("p", { className: "mt-5 text-xs font-bold tracking-[0.14em] text-primary uppercase", children: category })) : null, _jsx("h1", { className: "mt-2 text-3xl font-bold tracking-tight text-foreground sm:text-4xl", children: guide.title }), guide.lede ? _jsx("p", { className: "mt-3 text-lg text-muted-foreground", children: guide.lede }) : null, _jsx("div", { className: "mt-8", children: _jsx(GuideToc, { headings: headings, variant: "inline", labels: labels }) }), _jsx(GuideMarkdown, { content: guide.body, guidesPath: guidesPath, indexSlug: indexSlug, classNames: classNames, figures: figures, renderFigure: (figure) => (_jsx(GuideFigure, { figure: figure, figures: figures, zoom: zoom, labels: labels, classNames: classNames?.figure, zoomClassNames: zoomClassNames })) })] }), _jsx(GuideToc, { headings: headings, variant: "rail", labels: labels })] }));
 }
 //# sourceMappingURL=guide-article.js.map

package/dist/guides/guide-article.js.map

@@ -1 +1 @@
-{"version":3,"file":"guide-article.js","sourceRoot":"","sources":["../../src/guides/guide-article.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,aAAa,EAAwB,MAAM,sBAAsB,CAAC;AAC5F,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAqB,MAAM,cAAc,CAAC;AAehE;;;;;;GAMG;AACH,MAAM,UAAU,YAAY,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAqB;IAC5G,MAAM,IAAI,GAAG,EAAE,GAAG,aAAa,EAAE,GAAG,MAAM,EAAE,CAAC;IAC7C,MAAM,QAAQ,GAAG,eAAe,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAE7C,OAAO,CACL,eAAK,SAAS,EAAC,sDAAsD,aACnE,mBAAS,SAAS,EAAC,mBAAmB,aACpC,MAAC,IAAI,IACH,IAAI,EAAE,UAAU,EAChB,SAAS,EAAC,oFAAoF,aAE9F,KAAC,WAAW,IAAC,SAAS,EAAC,QAAQ,wBAAe,OAAE,IAAI,CAAC,SAAS,IACzD,EACN,QAAQ,CAAC,CAAC,CAAC,CACV,YAAG,SAAS,EAAC,iEAAiE,YAAE,QAAQ,GAAK,CAC9F,CAAC,CAAC,CAAC,IAAI,EACR,aAAI,SAAS,EAAC,oEAAoE,YAAE,KAAK,CAAC,KAAK,GAAM,EACpG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,YAAG,SAAS,EAAC,oCAAoC,YAAE,KAAK,CAAC,IAAI,GAAK,CAAC,CAAC,CAAC,IAAI,EACvF,cAAK,SAAS,EAAC,MAAM,YACnB,KAAC,QAAQ,IAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAC,QAAQ,EAAC,MAAM,EAAE,MAAM,GAAI,GAC7D,EACN,KAAC,aAAa,IAAC,OAAO,EAAE,KAAK,CAAC,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,GAAI,IACpG,EACV,KAAC,QAAQ,IAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAC,MAAM,EAAC,MAAM,EAAE,MAAM,GAAI,IAC3D,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"guide-article.js","sourceRoot":"","sources":["../../src/guides/guide-article.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAEhD,OAAO,EAAE,eAAe,EAAE,aAAa,EAAwB,MAAM,sBAAsB,CAAC;AAC5F,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAqB,MAAM,cAAc,CAAC;AAuBhE;;;;;;;GAOG;AACH,MAAM,UAAU,YAAY,CAAC,EAC3B,KAAK,EACL,UAAU,EACV,SAAS,EACT,QAAQ,EACR,MAAM,EACN,UAAU,EACV,OAAO,EACP,IAAI,EACJ,cAAc,GACI;IAClB,MAAM,IAAI,GAAG,EAAE,GAAG,aAAa,EAAE,GAAG,MAAM,EAAE,CAAC;IAC7C,MAAM,QAAQ,GAAG,eAAe,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAE7C,OAAO,CACL,eAAK,SAAS,EAAC,sDAAsD,aACnE,mBAAS,SAAS,EAAC,mBAAmB,aACpC,MAAC,IAAI,IACH,IAAI,EAAE,UAAU,EAChB,SAAS,EAAC,oFAAoF,aAE9F,KAAC,WAAW,IAAC,SAAS,EAAC,QAAQ,wBAAe,OAAE,IAAI,CAAC,SAAS,IACzD,EACN,QAAQ,CAAC,CAAC,CAAC,CACV,YAAG,SAAS,EAAC,iEAAiE,YAAE,QAAQ,GAAK,CAC9F,CAAC,CAAC,CAAC,IAAI,EACR,aAAI,SAAS,EAAC,oEAAoE,YAAE,KAAK,CAAC,KAAK,GAAM,EACpG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,YAAG,SAAS,EAAC,oCAAoC,YAAE,KAAK,CAAC,IAAI,GAAK,CAAC,CAAC,CAAC,IAAI,EACvF,cAAK,SAAS,EAAC,MAAM,YACnB,KAAC,QAAQ,IAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAC,QAAQ,EAAC,MAAM,EAAE,MAAM,GAAI,GAC7D,EACN,KAAC,aAAa,IACZ,OAAO,EAAE,KAAK,CAAC,IAAI,EACnB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,CACxB,KAAC,WAAW,IACV,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EAAE,MAAM,EAC9B,cAAc,EAAE,cAAc,GAC9B,CACH,GACD,IACM,EACV,KAAC,QAAQ,IAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAC,MAAM,EAAC,MAAM,EAAE,MAAM,GAAI,IAC3D,CACP,CAAC;AACJ,CAAC"}

package/dist/guides/guide-figure-zoom.d.ts

@@ -0,0 +1,62 @@
+import { type ReactNode } from "react";
+import { type GuidesLabels } from "./library.js";
+/** Every element the zoom draws. Each value replaces the default for that element. */
+export interface GuideZoomClassNames {
+    /** The button around the picture in the article. */
+    trigger: string;
+    /** "Click to enlarge", over the picture's corner. */
+    hint: string;
+    overlay: string;
+    /** The dialog: the whole screen on a phone, inset on wider ones. */
+    content: string;
+    toolbar: string;
+    instructions: string;
+    button: string;
+    /** The zoom level, a button that switches between fit and full size. */
+    level: string;
+    /** The area the picture is zoomed and dragged in. */
+    stage: string;
+    /** Under the picture: the caption and the alt text. */
+    footer: string;
+    caption: string;
+    alt: string;
+}
+export declare const GUIDE_ZOOM_CLASS_NAMES: GuideZoomClassNames;
+export interface GuideFigureZoomProps {
+    /** The picture as the article draws it: the button's content. */
+    children: ReactNode;
+    /** What the dialog shows, laid out at the natural size and scaled. Default: `children` again. */
+    full?: ReactNode;
+    /**
+     * The picture's natural size in CSS pixels — a screenshot's registered size, so "full size"
+     * is one image pixel to one CSS pixel. Left out (a diagram), it is measured from the article's
+     * picture when the dialog opens, and full size is twice the fit.
+     */
+    width?: number;
+    height?: number;
+    alt: string;
+    caption?: string;
+    labels?: Partial<GuidesLabels>;
+    classNames?: Partial<GuideZoomClassNames>;
+}
+interface Size {
+    w: number;
+    h: number;
+}
+/** Each button press or key multiplies or divides the zoom by this. */
+export declare const ZOOM_STEP = 1.25;
+/** The scale that fits `natural` inside `stage`, never past full size for a picture with a natural size. */
+export declare function fitScale(natural: Size, stage: Size, capAtFull: boolean): number;
+/**
+ * A guide's picture, opened full-size: a button around the article's picture (with a "Click to
+ * enlarge" hint) that opens a dialog fitting it to the screen. In there it zooms with the
+ * buttons, `+` and `−`, ⌘/Ctrl + scroll (a trackpad pinch) and a touch pinch; drags to pan
+ * when it is bigger than the screen (and scrolls, and moves with the arrow keys); a double-click
+ * or double-tap switches between fit and full size, and `0` fits again. Escape closes it and
+ * focus goes back to the picture. The caption and alt text are shown under it.
+ *
+ * Zooming eases unless the reader prefers reduced motion; dragging and pinching never do.
+ */
+export declare function GuideFigureZoom({ children, full, width, height, alt, caption, labels, classNames, }: GuideFigureZoomProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=guide-figure-zoom.d.ts.map

package/dist/guides/guide-figure-zoom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"guide-figure-zoom.d.ts","sourceRoot":"","sources":["../../src/guides/guide-figure-zoom.tsx"],"names":[],"mappings":"AAIA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAiB,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAEhE,sFAAsF;AACtF,MAAM,WAAW,mBAAmB;IAClC,oDAAoD;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,sBAAsB,EAAE,mBAiBpC,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACnC,iEAAiE;IACjE,QAAQ,EAAE,SAAS,CAAC;IACpB,iGAAiG;IACjG,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;CAC3C;AAED,UAAU,IAAI;IACZ,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAMD,uEAAuE;AACvE,eAAO,MAAM,SAAS,OAAO,CAAC;AAS9B,4GAA4G;AAC5G,wBAAgB,QAAQ,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,GAAG,MAAM,CAM/E;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,MAAM,EACN,GAAG,EACH,OAAO,EACP,MAAM,EACN,UAAU,GACX,EAAE,oBAAoB,+BAuVtB"}

package/dist/guides/guide-figure-zoom.js

@@ -0,0 +1,272 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Maximize2, X, ZoomIn, ZoomOut } from "lucide-react";
+import { useCallback, useEffect, useRef, useState, } from "react";
+import { cx } from "../internal/cx.js";
+import { GUIDES_LABELS } from "./library.js";
+export const GUIDE_ZOOM_CLASS_NAMES = {
+    trigger: "group relative block w-full cursor-zoom-in rounded-xl text-left focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none",
+    hint: "pointer-events-none absolute right-2 bottom-2 inline-flex items-center gap-1 rounded-full border border-border bg-background/90 px-2 py-0.5 text-xs font-medium text-muted-foreground shadow-sm transition-colors group-hover:text-foreground group-focus-visible:text-foreground motion-reduce:transition-none",
+    overlay: "fixed inset-0 z-50 bg-black/70 backdrop-blur-sm",
+    content: "fixed inset-0 z-50 flex flex-col overflow-hidden bg-background text-foreground shadow-2xl outline-none sm:inset-4 sm:rounded-xl sm:border sm:border-border",
+    toolbar: "flex shrink-0 items-center gap-1 border-b border-border px-2 py-1.5 sm:px-3",
+    instructions: "mr-auto hidden min-w-0 truncate pl-1 text-xs text-muted-foreground sm:block",
+    button: "inline-flex size-10 items-center justify-center rounded-lg text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-40",
+    level: "h-10 min-w-16 rounded-lg px-2 text-sm font-medium text-foreground tabular-nums hover:bg-accent focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:outline-none",
+    stage: "relative min-h-0 flex-1 touch-none overflow-hidden bg-muted/40 select-none",
+    footer: "max-h-[30%] shrink-0 overflow-y-auto border-t border-border px-4 py-3 text-sm",
+    caption: "font-medium text-foreground",
+    alt: "mt-1 text-muted-foreground",
+};
+/** Each button press or key multiplies or divides the zoom by this. */
+export const ZOOM_STEP = 1.25;
+/** The margin kept around a fitted picture, in CSS pixels, each side. */
+const FIT_MARGIN = 16;
+/** Used when nothing can be measured (a page not laid out yet, or a test's DOM). */
+const FALLBACK_SIZE = { w: 800, h: 600 };
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+const near = (a, b) => Math.abs(a - b) < 0.005;
+/** The scale that fits `natural` inside `stage`, never past full size for a picture with a natural size. */
+export function fitScale(natural, stage, capAtFull) {
+    const w = stage.w - 2 * FIT_MARGIN;
+    const h = stage.h - 2 * FIT_MARGIN;
+    if (w <= 0 || h <= 0 || natural.w <= 0 || natural.h <= 0)
+        return 1;
+    const fit = Math.min(w / natural.w, h / natural.h);
+    return capAtFull ? Math.min(fit, 1) : fit;
+}
+/**
+ * A guide's picture, opened full-size: a button around the article's picture (with a "Click to
+ * enlarge" hint) that opens a dialog fitting it to the screen. In there it zooms with the
+ * buttons, `+` and `−`, ⌘/Ctrl + scroll (a trackpad pinch) and a touch pinch; drags to pan
+ * when it is bigger than the screen (and scrolls, and moves with the arrow keys); a double-click
+ * or double-tap switches between fit and full size, and `0` fits again. Escape closes it and
+ * focus goes back to the picture. The caption and alt text are shown under it.
+ *
+ * Zooming eases unless the reader prefers reduced motion; dragging and pinching never do.
+ */
+export function GuideFigureZoom({ children, full, width, height, alt, caption, labels, classNames, }) {
+    const text = { ...GUIDES_LABELS, ...labels };
+    const c = { ...GUIDE_ZOOM_CLASS_NAMES, ...classNames };
+    const known = width !== undefined && height !== undefined && width > 0 && height > 0;
+    const [open, setOpen] = useState(false);
+    const [natural, setNatural] = useState(known ? { w: width, h: height } : FALLBACK_SIZE);
+    const [stage, setStage] = useState({ w: 0, h: 0 });
+    const [stageEl, setStageEl] = useState(null);
+    /** null: fitted, and staying fitted as the window changes size. */
+    const [zoom, setZoom] = useState(null);
+    const [offset, setOffset] = useState({ x: 0, y: 0 });
+    const [gesture, setGesture] = useState(null);
+    const thumb = useRef(null);
+    const fit = fitScale(natural, stage, known);
+    const min = fit;
+    const max = Math.max(fit, 1) * 4;
+    const scale = clamp(zoom ?? fit, min, max);
+    /** Where a double-click goes from fit: full size, or twice the fit when that is already full size. */
+    const detail = clamp(known && fit < 1 ? 1 : fit * 2, min, max);
+    /** An offset that keeps the picture over the stage: centred on an axis where it fits, edge to edge where not. */
+    const bound = useCallback((point, s) => {
+        const limitX = Math.max(0, (natural.w * s - stage.w) / 2);
+        const limitY = Math.max(0, (natural.h * s - stage.h) / 2);
+        return { x: clamp(point.x, -limitX, limitX), y: clamp(point.y, -limitY, limitY) };
+    }, [natural, stage]);
+    // The latest view, for the listeners and gestures that outlive a render.
+    const view = useRef({ scale, offset, fit, min, max, detail, bound });
+    view.current = { scale, offset, fit, min, max, detail, bound };
+    /** Zoom to `next`, keeping the point `origin` (from the stage's centre) where it is. */
+    const zoomTo = useCallback((next, origin = { x: 0, y: 0 }) => {
+        const v = view.current;
+        const s = clamp(next, v.min, v.max);
+        const ratio = s / v.scale;
+        const moved = {
+            x: origin.x - (origin.x - v.offset.x) * ratio,
+            y: origin.y - (origin.y - v.offset.y) * ratio,
+        };
+        setZoom(near(s, v.fit) ? null : s);
+        setOffset(near(s, v.fit) ? { x: 0, y: 0 } : v.bound(moved, s));
+    }, []);
+    const panBy = useCallback((dx, dy) => {
+        const v = view.current;
+        setOffset(v.bound({ x: v.offset.x + dx, y: v.offset.y + dy }, v.scale));
+    }, []);
+    const toggle = useCallback((origin) => {
+        const v = view.current;
+        zoomTo(near(v.scale, v.fit) ? v.detail : v.fit, origin);
+    }, [zoomTo]);
+    /** A point on the screen, measured from the stage's centre. */
+    const fromCentre = useCallback((clientX, clientY) => {
+        if (!stageEl)
+            return { x: 0, y: 0 };
+        const rect = stageEl.getBoundingClientRect();
+        return { x: clientX - rect.left - rect.width / 2, y: clientY - rect.top - rect.height / 2 };
+    }, [stageEl]);
+    // The stage's size, kept as the window changes.
+    useEffect(() => {
+        if (!stageEl)
+            return;
+        const measure = () => {
+            const rect = stageEl.getBoundingClientRect();
+            setStage({ w: rect.width, h: rect.height });
+        };
+        measure();
+        window.addEventListener("resize", measure);
+        const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+        observer?.observe(stageEl);
+        return () => {
+            window.removeEventListener("resize", measure);
+            observer?.disconnect();
+        };
+    }, [stageEl]);
+    // ⌘/Ctrl + wheel (and a trackpad pinch, which arrives as one) zooms at the pointer; a plain wheel pans a zoomed
+    // picture. Not React's onWheel: that listener is passive, so it can't stop the page zooming instead.
+    useEffect(() => {
+        if (!stageEl)
+            return;
+        const onWheel = (event) => {
+            const v = view.current;
+            if (event.ctrlKey || event.metaKey) {
+                event.preventDefault();
+                const rect = stageEl.getBoundingClientRect();
+                const origin = { x: event.clientX - rect.left - rect.width / 2, y: event.clientY - rect.top - rect.height / 2 };
+                zoomTo(v.scale * Math.exp(-clamp(event.deltaY, -50, 50) / 100), origin);
+            }
+            else if (!near(v.scale, v.fit)) {
+                event.preventDefault();
+                panBy(-event.deltaX, -event.deltaY);
+            }
+        };
+        stageEl.addEventListener("wheel", onWheel, { passive: false });
+        return () => stageEl.removeEventListener("wheel", onWheel);
+    }, [stageEl, zoomTo, panBy]);
+    // Pointers on the stage: one drags, two pinch. A quick second tap (touch or pen) switches fit and full size.
+    const pointers = useRef(new Map());
+    const start = useRef(null);
+    const lastTap = useRef(null);
+    const beginGesture = () => {
+        const points = [...pointers.current.values()];
+        const [a, b] = points;
+        if (!a)
+            return;
+        const point = b ? { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 } : a;
+        const distance = b ? Math.hypot(a.x - b.x, a.y - b.y) : 0;
+        start.current = {
+            scale: view.current.scale,
+            offset: view.current.offset,
+            point,
+            distance,
+            at: Date.now(),
+            moved: false,
+        };
+        setGesture(b ? "pinch" : "drag");
+    };
+    const onPointerDown = (event) => {
+        if (event.pointerType === "mouse" && event.button !== 0)
+            return;
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+        pointers.current.set(event.pointerId, fromCentre(event.clientX, event.clientY));
+        if (pointers.current.size <= 2)
+            beginGesture();
+    };
+    const onPointerMove = (event) => {
+        if (!pointers.current.has(event.pointerId) || !start.current)
+            return;
+        pointers.current.set(event.pointerId, fromCentre(event.clientX, event.clientY));
+        const s = start.current;
+        const [a, b] = [...pointers.current.values()];
+        if (!a)
+            return;
+        if (b && s.distance > 0) {
+            s.moved = true;
+            const mid = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+            const v = view.current;
+            const next = clamp((s.scale * Math.hypot(a.x - b.x, a.y - b.y)) / s.distance, v.min, v.max);
+            const ratio = next / s.scale;
+            setZoom(near(next, v.fit) ? null : next);
+            setOffset(v.bound({ x: mid.x - (s.point.x - s.offset.x) * ratio, y: mid.y - (s.point.y - s.offset.y) * ratio }, next));
+        }
+        else if (!b) {
+            const dx = a.x - s.point.x;
+            const dy = a.y - s.point.y;
+            if (Math.hypot(dx, dy) > 4)
+                s.moved = true;
+            setOffset(view.current.bound({ x: s.offset.x + dx, y: s.offset.y + dy }, view.current.scale));
+        }
+    };
+    const onPointerUp = (event) => {
+        if (!pointers.current.has(event.pointerId))
+            return;
+        const point = pointers.current.get(event.pointerId);
+        const wasTap = pointers.current.size === 1 && start.current && !start.current.moved && Date.now() - start.current.at < 300;
+        pointers.current.delete(event.pointerId);
+        if (pointers.current.size > 0) {
+            beginGesture(); // the finger left on the screen carries on as a drag
+            return;
+        }
+        start.current = null;
+        setGesture(null);
+        if (!wasTap || event.pointerType === "mouse")
+            return; // a mouse has onDoubleClick
+        const previous = lastTap.current;
+        if (previous &&
+            Date.now() - previous.at < 350 &&
+            Math.hypot(point.x - previous.point.x, point.y - previous.point.y) < 30) {
+            lastTap.current = null;
+            toggle(point);
+        }
+        else {
+            lastTap.current = { at: Date.now(), point };
+        }
+    };
+    const onKeyDown = (event) => {
+        if (event.metaKey || event.ctrlKey || event.altKey)
+            return; // ⌘/Ctrl + and − stay the browser's page zoom
+        const v = view.current;
+        const step = 48;
+        const keys = {
+            "+": () => zoomTo(v.scale * ZOOM_STEP),
+            "=": () => zoomTo(v.scale * ZOOM_STEP),
+            "-": () => zoomTo(v.scale / ZOOM_STEP),
+            _: () => zoomTo(v.scale / ZOOM_STEP),
+            "−": () => zoomTo(v.scale / ZOOM_STEP),
+            "0": () => zoomTo(v.fit),
+            ArrowLeft: () => panBy(step, 0),
+            ArrowRight: () => panBy(-step, 0),
+            ArrowUp: () => panBy(0, step),
+            ArrowDown: () => panBy(0, -step),
+        };
+        const action = keys[event.key];
+        // Arrow keys move only a zoomed picture, so they still move between the buttons' focus otherwise.
+        if (!action || (event.key.startsWith("Arrow") && near(v.scale, v.fit)))
+            return;
+        event.preventDefault();
+        action();
+    };
+    const change = (next) => {
+        if (next && !known) {
+            const rect = thumb.current?.getBoundingClientRect();
+            setNatural(rect && rect.width > 0 && rect.height > 0 ? { w: rect.width, h: rect.height } : FALLBACK_SIZE);
+        }
+        if (!next) {
+            setZoom(null);
+            setOffset({ x: 0, y: 0 });
+            setGesture(null);
+            pointers.current.clear();
+            start.current = null;
+        }
+        setOpen(next);
+    };
+    const zoomed = !near(scale, fit);
+    const percent = Math.round(scale * 100);
+    const title = caption || alt;
+    return (_jsxs(DialogPrimitive.Root, { open: open, onOpenChange: change, children: [_jsx(DialogPrimitive.Trigger, { asChild: true, children: _jsxs("button", { type: "button", className: c.trigger, "aria-label": text.zoomOpen.replace("{alt}", alt), children: [_jsx("span", { ref: thumb, className: "block", children: children }), _jsxs("span", { className: c.hint, "aria-hidden": true, children: [_jsx(Maximize2, { className: "size-3" }), text.zoomHint] })] }) }), _jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogPrimitive.Overlay, { className: c.overlay }), _jsxs(DialogPrimitive.Content, { className: c.content, onKeyDown: onKeyDown, ...(caption ? {} : { "aria-describedby": undefined }), onOpenAutoFocus: (event) => {
+                            // The close button, not the first zoom button: Enter on open shouldn't zoom.
+                            event.preventDefault();
+                            event.currentTarget?.querySelector("[data-house-zoom-close]")?.focus();
+                        }, children: [_jsxs("div", { className: c.toolbar, children: [_jsx("p", { className: c.instructions, children: text.zoomInstructions }), _jsx("button", { type: "button", className: cx(c.button, "ml-auto sm:ml-0"), onClick: () => zoomTo(scale / ZOOM_STEP), disabled: scale <= min + 0.001, "aria-label": text.zoomOut, title: text.zoomOut, children: _jsx(ZoomOut, { className: "size-5", "aria-hidden": true }) }), _jsxs("button", { type: "button", className: c.level, onClick: () => toggle(), "aria-label": text.zoomToggle, title: text.zoomToggle, children: [percent, "%"] }), _jsx("button", { type: "button", className: c.button, onClick: () => zoomTo(scale * ZOOM_STEP), disabled: scale >= max - 0.001, "aria-label": text.zoomIn, title: text.zoomIn, children: _jsx(ZoomIn, { className: "size-5", "aria-hidden": true }) }), _jsx(DialogPrimitive.Close, { className: c.button, "aria-label": text.zoomClose, title: text.zoomClose, "data-house-zoom-close": "", children: _jsx(X, { className: "size-5", "aria-hidden": true }) }), _jsx("span", { className: "sr-only", "aria-live": "polite", children: text.zoomLevel.replace("{percent}", String(percent)) })] }), _jsx("div", { ref: setStageEl, "data-house-zoom-stage": "", className: cx(c.stage, zoomed ? (gesture === "drag" ? "cursor-grabbing" : "cursor-grab") : "cursor-zoom-in"), onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, onDoubleClick: (event) => toggle(fromCentre(event.clientX, event.clientY)), children: _jsx("div", { "data-house-zoom-picture": "", "data-scale": scale.toFixed(3), className: cx("absolute top-1/2 left-1/2 origin-center", gesture ? "" : "motion-safe:transition-transform motion-safe:duration-150 motion-safe:ease-out"), style: {
+                                        width: natural.w,
+                                        height: natural.h,
+                                        transform: `translate(-50%, -50%) translate(${offset.x}px, ${offset.y}px) scale(${scale})`,
+                                    }, children: full ?? children }) }), _jsxs("div", { className: c.footer, children: [_jsx(DialogPrimitive.Title, { className: c.caption, children: title }), caption ? _jsx(DialogPrimitive.Description, { className: c.alt, children: alt }) : null] })] })] })] }));
+}
+//# sourceMappingURL=guide-figure-zoom.js.map