@eifi1/ui-kit 0.54.0 → 0.55.0

package/dist/components/camera-capture.js

@@ -0,0 +1,190 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Camera, Check, X } from "lucide-react";
+import { DEFAULT_COMMON_LABELS, useKitLabels } from "../i18n/kit-labels.js";
+import { useBodyScrollLock } from "../hooks/use-body-scroll-lock.js";
+import { takeEscape, useDismissLayer } from "../hooks/use-dismiss.js";
+import { useFocusTrap } from "../hooks/use-focus-trap.js";
+import { useOverlayHistory } from "../hooks/use-overlay-history.js";
+import { Button } from "./button.js";
+import { IconButton } from "./icon-button.js";
+import { Spinner } from "./spinner.js";
+import { DEFAULT_CAMERA_LABELS } from "./camera-labels.js";
+import { DEFAULT_CAMERA_LABELS as DEFAULT_CAMERA_LABELS2 } from "./camera-labels.js";
+const constraints = (facing) => ({
+  video: { facingMode: { ideal: facing }, width: { ideal: 2560 }, height: { ideal: 1440 } },
+  audio: false
+});
+const JPEG_QUALITY = 0.92;
+function CameraCapture({
+  onCapture,
+  onCancel,
+  onUnavailable,
+  onDone,
+  shotCount = 0,
+  busy = false,
+  facing = "environment",
+  fileName = "photo",
+  labels: labelsProp
+}) {
+  const labels = useKitLabels("camera", DEFAULT_CAMERA_LABELS, labelsProp);
+  const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
+  const videoRef = useRef(null);
+  const streamRef = useRef(null);
+  const dialogRef = useRef(null);
+  const [ready, setReady] = useState(false);
+  const leave = () => {
+    if (!busy) onCancel();
+  };
+  useDismissLayer(true, leave);
+  useFocusTrap(dialogRef);
+  useBodyScrollLock(true);
+  useOverlayHistory(true, leave);
+  const bail = useRef(onUnavailable);
+  useEffect(() => {
+    bail.current = onUnavailable;
+  });
+  const facingAtOpen = useRef(facing);
+  useEffect(() => {
+    let cancelled = false;
+    const media = typeof navigator === "undefined" ? void 0 : navigator.mediaDevices;
+    if (typeof media?.getUserMedia === "function") {
+      media.getUserMedia(constraints(facingAtOpen.current)).then(
+        (stream) => {
+          if (cancelled) {
+            for (const track of stream.getTracks()) track.stop();
+            return;
+          }
+          streamRef.current = stream;
+          const video = videoRef.current;
+          if (video) {
+            video.srcObject = stream;
+            try {
+              void video.play()?.catch(() => {
+              });
+            } catch {
+            }
+          }
+          setReady(true);
+        },
+        () => {
+          if (!cancelled) bail.current();
+        }
+      );
+    } else {
+      bail.current();
+    }
+    return () => {
+      cancelled = true;
+      for (const track of streamRef.current?.getTracks() ?? []) track.stop();
+      streamRef.current = null;
+    };
+  }, []);
+  const encoding = useRef(false);
+  const mounted = useRef(false);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  const shoot = () => {
+    const video = videoRef.current;
+    if (encoding.current || !video?.videoWidth || !video.videoHeight) return;
+    const canvas = document.createElement("canvas");
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    const context = canvas.getContext("2d");
+    if (!context) {
+      bail.current();
+      return;
+    }
+    context.drawImage(video, 0, 0);
+    encoding.current = true;
+    canvas.toBlob(
+      (blob) => {
+        encoding.current = false;
+        if (!mounted.current) return;
+        if (!blob) {
+          bail.current();
+          return;
+        }
+        onCapture(new File([blob], `${fileName}-${Date.now()}.jpg`, { type: "image/jpeg" }));
+      },
+      "image/jpeg",
+      JPEG_QUALITY
+    );
+  };
+  if (typeof document === "undefined") return null;
+  return createPortal(
+    /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the dialog
+       container, per the APG dialog pattern: `onKeyDown` hands Escape to the layer stack for
+       whatever inside holds focus, and `onClick` only keeps a tap inside from reaching the
+       button's React ancestors (see above). */
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: dialogRef,
+        "data-kit-layer": "",
+        "data-camera-capture": "",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": labels.title,
+        tabIndex: -1,
+        className: "fixed inset-0 z-50 flex flex-col bg-black/100 outline-none",
+        onKeyDown: (e) => {
+          takeEscape(e);
+        },
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-2 text-media-ink", children: [
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 text-sm", "aria-live": "polite", children: shotCount > 0 ? labels.taken(shotCount) : labels.hint }),
+            /* @__PURE__ */ jsx(IconButton, { variant: "overlay", onClick: onCancel, disabled: busy, label: common.cancel, children: /* @__PURE__ */ jsx(X, {}) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "relative min-h-0 flex-1", children: [
+            /* @__PURE__ */ jsx("video", { ref: videoRef, autoPlay: true, muted: true, playsInline: true, className: "size-full object-contain" }),
+            !ready && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex items-center justify-center gap-2 text-sm text-media-ink", children: [
+              /* @__PURE__ */ jsx(Spinner, { label: null, className: "size-5" }),
+              " ",
+              labels.starting
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "grid grid-cols-[1fr_auto_1fr] items-center gap-3 px-4 pt-3",
+              style: { paddingBottom: "max(1rem, env(safe-area-inset-bottom))" },
+              children: [
+                /* @__PURE__ */ jsx("span", {}),
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    variant: "shutter",
+                    size: "2xl",
+                    onClick: shoot,
+                    disabled: !ready || busy,
+                    label: labels.shutter,
+                    tooltip: false,
+                    children: /* @__PURE__ */ jsx(Camera, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: onDone && shotCount > 0 && /* @__PURE__ */ jsxs(Button, { type: "button", disabled: busy, onClick: onDone, children: [
+                  /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "size-4" }),
+                  labels.done(shotCount)
+                ] }) })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+}
+export {
+  CameraCapture,
+  DEFAULT_CAMERA_LABELS2 as DEFAULT_CAMERA_LABELS
+};
+//# sourceMappingURL=camera-capture.js.map

package/dist/components/camera-capture.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/camera-capture.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { KeyboardEvent } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Camera, Check, X } from \"lucide-react\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { useBodyScrollLock } from \"../hooks/use-body-scroll-lock\";\nimport { takeEscape, useDismissLayer } from \"../hooks/use-dismiss\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { Button } from \"./button\";\nimport { IconButton } from \"./icon-button\";\nimport { Spinner } from \"./spinner\";\nimport { DEFAULT_CAMERA_LABELS, type CameraLabels } from \"./camera-labels\";\n\nexport type { CameraLabels } from \"./camera-labels\";\nexport { DEFAULT_CAMERA_LABELS } from \"./camera-labels\";\n\n/** Which camera to ask for: the back one (`\"environment\"`), or the one facing the user. */\nexport type CameraFacing = \"environment\" | \"user\";\n\n/**\n * Ask for more pixels than a photo of a document needs, and take what the device gives —\n * keksdose's constraints (invoices/camera-capture.tsx:21). Its scan pipeline keeps a long\n * edge of 1600 px, and 2560 clears that with room on a phone that has it, while staying an\n * `ideal` the browser may narrow rather than an `exact` it can refuse. `facingMode` is an\n * ideal for the same reason: a laptop with only a front camera opens that one instead of\n * failing the whole request.\n */\nconst constraints = (facing: CameraFacing): MediaStreamConstraints => ({\n  video: { facingMode: { ideal: facing }, width: { ideal: 2560 }, height: { ideal: 1440 } },\n  audio: false,\n});\n\n/** keksdose's JPEG quality for a frame: it is the ORIGINAL — nothing re-encodes it before\n *  the app's server sees it — so above a cropper's 0.85. */\nconst JPEG_QUALITY = 0.92;\n\nexport interface CameraCaptureProps {\n  /** One photo, each time the shutter is pressed: the live frame as a JPEG `File` at the\n   *  frame's own size, named `{fileName}-{timestamp}.jpg`. The viewfinder stays up — the\n   *  caller closes it (unmounts it) when it has what it wanted. */\n  onCapture: (file: File) => void;\n  /** Leave with nothing: the ✕, Escape and the phone's Back. None of them while `busy`. */\n  onCancel: () => void;\n  /**\n   * There is no stream to be had: no `navigator.mediaDevices` (an insecure context), a\n   * permission denied, no camera, or a canvas the frame cannot be drawn on. The caller\n   * closes the viewfinder and falls back to a file input with `capture`, which is where\n   * the photo used to come from before this component — so nothing regresses. Read live:\n   * an inline arrow is fine.\n   */\n  onUnavailable: () => void;\n  /** Finish: shown, as `labels.done(shotCount)`, once `shotCount` is above 0. Leave it out\n   *  for a camera that takes one photo and closes. */\n  onDone?: () => void;\n  /** Photos taken so far — the caller keeps them, this only counts (keksdose's receipt\n   *  in several pages). Default 0. */\n  shotCount?: number;\n  /** The caller's upload is in flight: the shutter, the finish and every way out stop. */\n  busy?: boolean;\n  /** Which camera, as an `ideal`. Default `\"environment\"`. Read when the camera opens. */\n  facing?: CameraFacing;\n  /** The captured file's name before its timestamp. Default `\"photo\"`; keksdose's is\n   *  `\"receipt\"`, which its review screen shows. */\n  fileName?: string;\n  /** Per-instance overrides of the `camera` label namespace. */\n  labels?: LabelOverride<CameraLabels>;\n}\n\n/**\n * The camera, in the page: a full-screen viewfinder with a shutter — keksdose's\n * `CameraCapture` (invoices/camera-capture.tsx:64, live #292 round five), for every app.\n * Mounted is open; the caller unmounts it to close it.\n *\n * Five rounds of keksdose's live #292 went into the file input's `capture` attribute, and\n * the last one settled it: production served `accept=\"image/*\" capture=\"environment\"` with\n * no `multiple` — the shape every round had concluded was the fix — and Android Chrome\n * showed its Camera-or-Files sheet anyway (*\"Still happening on my phone showing version\n * v0.4.47\"*). `capture` is a HINT a browser is free to ignore, it says nothing when it has,\n * and a desktop ignores it outright and opens a file dialog. `getUserMedia` is not a hint:\n * it opens the camera or it rejects, and a rejection is something to act on —\n * `onUnavailable` hands the user to the `capture` input, so an insecure context, a denied\n * permission or a home-screen PWA that will not stream lands where the old button did. A\n * webcam is a camera on every device that has one.\n *\n * What a dialog owes the page is the kit's: Escape (as an Escape layer, so it closes this\n * and not the dialog behind it), a focus trap that starts on the CONTAINER (so an Enter\n * does not fire the shutter), no scrolling behind it, and the phone's Back closing it\n * instead of leaving the page. Not a `FullBleedDialog`: that is a surface panel with a\n * bordered header, and a viewfinder is black edge to edge, the shutter in the media\n * tokens (`IconButton variant=\"shutter\"`), white on the picture in either theme.\n *\n * Portalled to `<body>`, out of whatever transformed or clipped box the button sits in —\n * and a click inside it stops there: React carries a portal's events up its own tree, and\n * a `FileDropzone` round the button (keksdose's Take photo sits in the zone's body) would\n * read a tap on the shutter as a tap on the zone and open the file picker.\n */\nexport function CameraCapture({\n  onCapture,\n  onCancel,\n  onUnavailable,\n  onDone,\n  shotCount = 0,\n  busy = false,\n  facing = \"environment\",\n  fileName = \"photo\",\n  labels: labelsProp,\n}: CameraCaptureProps) {\n  const labels = useKitLabels(\"camera\", DEFAULT_CAMERA_LABELS, labelsProp);\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const videoRef = useRef<HTMLVideoElement>(null);\n  const streamRef = useRef<MediaStream | null>(null);\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const [ready, setReady] = useState(false);\n\n  // Every way out but the finish button, and none of them while an upload is in flight:\n  // the layer stays on the stack while `busy` (an Escape then does nothing, rather than\n  // reaching the dialog behind), and a Back mid-upload spends its entry and leaves the\n  // camera up, so a second Back still leaves. Both handlers are read live.\n  const leave = () => {\n    if (!busy) onCancel();\n  };\n  useDismissLayer(true, leave);\n  useFocusTrap(dialogRef);\n  useBodyScrollLock(true);\n  useOverlayHistory(true, leave);\n\n  // Held in a ref so the open-the-camera effect can depend on NOTHING: a caller passes an\n  // inline arrow and re-renders on every photo it keeps, and a dependency on it would stop\n  // the stream and ask for the permission again each time. Assigned in an effect, not in\n  // render, which is what `react-hooks/refs` asks (useLongPress keeps its callback so).\n  const bail = useRef(onUnavailable);\n  useEffect(() => {\n    bail.current = onUnavailable;\n  });\n  // Read once, when the camera opens; a `facing` that changes later is not a reason to\n  // stop the stream and ask again.\n  const facingAtOpen = useRef(facing);\n\n  useEffect(() => {\n    let cancelled = false;\n    const media = typeof navigator === \"undefined\" ? undefined : navigator.mediaDevices;\n    // `typeof … === \"function\"`: `MediaDevices` declares `getUserMedia` non-optional, and\n    // the runtime this guard is for is the one with no `mediaDevices` at all.\n    if (typeof media?.getUserMedia === \"function\") {\n      media.getUserMedia(constraints(facingAtOpen.current)).then(\n        (stream) => {\n          if (cancelled) {\n            // Closed while the permission prompt was up: nothing else will ever stop\n            // this stream, and a live track keeps the camera light on.\n            for (const track of stream.getTracks()) track.stop();\n            return;\n          }\n          streamRef.current = stream;\n          const video = videoRef.current;\n          if (video) {\n            video.srcObject = stream;\n            // `autoPlay` usually starts it; some browsers still want the call, and jsdom\n            // has none. Neither outcome is worth a failure.\n            try {\n              void video.play()?.catch(() => {});\n            } catch {\n              /* not implemented (jsdom) */\n            }\n          }\n          setReady(true);\n        },\n        () => {\n          if (!cancelled) bail.current();\n        },\n      );\n    } else {\n      bail.current();\n    }\n    // ONE cleanup for both branches: a cleanup on only the branch that started something\n    // is how a stream outlives its viewfinder.\n    return () => {\n      cancelled = true;\n      for (const track of streamRef.current?.getTracks() ?? []) track.stop();\n      streamRef.current = null;\n    };\n  }, []);\n\n  // A frame is being encoded (a JPEG of a 2560 px frame takes a moment), and a tap\n  // meanwhile is not a second photo: one encoding at a time, so photos arrive one by one,\n  // in order. A ref, not a disabled shutter: a native `disabled` would drop the keyboard's\n  // focus to <body> on every shot.\n  const encoding = useRef(false);\n  // An encoding that finishes after the viewfinder closed hands nothing over.\n  const mounted = useRef(false);\n  useEffect(() => {\n    mounted.current = true;\n    return () => {\n      mounted.current = false;\n    };\n  }, []);\n\n  const shoot = () => {\n    const video = videoRef.current;\n    // `videoWidth` is 0 until the first frame has arrived; a shot then is a 0×0 photo.\n    if (encoding.current || !video?.videoWidth || !video.videoHeight) return;\n    const canvas = document.createElement(\"canvas\");\n    canvas.width = video.videoWidth;\n    canvas.height = video.videoHeight;\n    const context = canvas.getContext(\"2d\");\n    // A viewfinder that cannot be photographed is worse than none: the shutter would click\n    // and nothing would happen. The file input is the honest answer.\n    if (!context) {\n      bail.current();\n      return;\n    }\n    context.drawImage(video, 0, 0);\n    encoding.current = true;\n    canvas.toBlob(\n      (blob) => {\n        encoding.current = false;\n        if (!mounted.current) return;\n        if (!blob) {\n          bail.current();\n          return;\n        }\n        // The timestamp keeps the photos of one subject in the order they were taken.\n        onCapture(new File([blob], `${fileName}-${Date.now()}.jpg`, { type: \"image/jpeg\" }));\n      },\n      \"image/jpeg\",\n      JPEG_QUALITY,\n    );\n  };\n\n  if (typeof document === \"undefined\") return null;\n\n  return createPortal(\n    /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the dialog\n       container, per the APG dialog pattern: `onKeyDown` hands Escape to the layer stack for\n       whatever inside holds focus, and `onClick` only keeps a tap inside from reaching the\n       button's React ancestors (see above). */\n    <div\n      ref={dialogRef}\n      data-kit-layer=\"\"\n      data-camera-capture=\"\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label={labels.title}\n      // For the focus trap, which focuses the container (see above).\n      tabIndex={-1}\n      // A backdrop, not a surface: black round a letterboxed frame in either theme, as a\n      // camera app is — the scrim's rule in check-token-discipline, at full opacity, since\n      // a page showing through round the picture is not a viewfinder.\n      className=\"fixed inset-0 z-50 flex flex-col bg-black/100 outline-none\"\n      onKeyDown={(e: KeyboardEvent<HTMLDivElement>) => {\n        takeEscape(e);\n      }}\n      onClick={(e) => e.stopPropagation()}\n    >\n      <div className=\"flex items-center justify-between gap-2 px-3 py-2 text-media-ink\">\n        {/* Polite: after a shot this says how many there are now, and a screen reader\n            should hear it without the shutter losing focus. */}\n        <span className=\"min-w-0 text-sm\" aria-live=\"polite\">\n          {shotCount > 0 ? labels.taken(shotCount) : labels.hint}\n        </span>\n        {/* The overlay disc keeps its contrast whatever the frame behind it shows. */}\n        <IconButton variant=\"overlay\" onClick={onCancel} disabled={busy} label={common.cancel}>\n          <X />\n        </IconButton>\n      </div>\n\n      {/* `object-contain`, never `cover`: a document is framed at its edges, and a preview\n          that crops them shows something the photo will not be. */}\n      <div className=\"relative min-h-0 flex-1\">\n        <video ref={videoRef} autoPlay muted playsInline className=\"size-full object-contain\" />\n        {!ready && (\n          <div className=\"absolute inset-0 flex items-center justify-center gap-2 text-sm text-media-ink\">\n            {/* Decorative: the words beside it are the status. */}\n            <Spinner label={null} className=\"size-5\" /> {labels.starting}\n          </div>\n        )}\n      </div>\n\n      {/* Three columns, the shutter in the middle one: centred on the SCREEN, not in what\n          is left beside the finish button, and the finish button may wrap at a large text\n          size rather than push the shutter off centre. Padded for a phone's home\n          indicator, as FullBleedDialog's footer is. */}\n      <div\n        className=\"grid grid-cols-[1fr_auto_1fr] items-center gap-3 px-4 pt-3\"\n        style={{ paddingBottom: \"max(1rem, env(safe-area-inset-bottom))\" }}\n      >\n        <span />\n        {/* No tooltip over a viewfinder: the glyph is the shutter, the name is spoken. */}\n        <IconButton\n          variant=\"shutter\"\n          size=\"2xl\"\n          onClick={shoot}\n          disabled={!ready || busy}\n          label={labels.shutter}\n          tooltip={false}\n        >\n          <Camera />\n        </IconButton>\n        <div className=\"flex justify-end\">\n          {onDone && shotCount > 0 && (\n            <Button type=\"button\" disabled={busy} onClick={onDone}>\n              <Check aria-hidden className=\"size-4\" />\n              {labels.done(shotCount)}\n            </Button>\n          )}\n        </div>\n      </div>\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":"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","names":["DEFAULT_CAMERA_LABELS"]}

package/dist/components/camera-labels.d.ts

@@ -0,0 +1,20 @@
+export interface CameraLabels {
+    /** The button where there is a camera: it opens it. */
+    takePhoto: string;
+    /** The button where there is none: it opens the file picker for photos instead. */
+    choosePhoto: string;
+    /** The viewfinder's accessible name. */
+    title: string;
+    /** The line above the viewfinder before the first photo. */
+    hint: string;
+    /** Beside the spinner while the camera starts — the permission prompt is usually up. */
+    starting: string;
+    /** The shutter's accessible name (it shows a camera glyph and no word). */
+    shutter: string;
+    /** The line above the viewfinder once photos are taken and kept for one hand-over
+     *  (`multiple`); it is a polite live region, so it is heard after each shot. */
+    taken: (count: number) => string;
+    /** The button that hands the photos taken so far to the app and closes the camera. */
+    done: (count: number) => string;
+}
+export declare const DEFAULT_CAMERA_LABELS: CameraLabels;

package/dist/components/camera-labels.js

@@ -0,0 +1,15 @@
+"use client";
+const DEFAULT_CAMERA_LABELS = {
+  takePhoto: "Take photo",
+  choosePhoto: "Add photo",
+  title: "Camera",
+  hint: "Frame the picture, then tap the shutter.",
+  starting: "Starting the camera\u2026",
+  shutter: "Take the photo",
+  taken: (count) => count === 1 ? "1 photo taken." : `${count} photos taken.`,
+  done: (count) => count === 1 ? "Use 1 photo" : `Use ${count} photos`
+};
+export {
+  DEFAULT_CAMERA_LABELS
+};
+//# sourceMappingURL=camera-labels.js.map

package/dist/components/camera-labels.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/camera-labels.ts"],"sourcesContent":["// All user-facing strings of `CameraButton` and `CameraCapture`, as the `camera` namespace\n// of `<UiKitProvider labels>`, and per instance the `labels` prop over that (0.55, kastlan\n// reuse audit 2026-11-02, proposal 8). A module with no component code, so the English\n// catalogue (src/i18n/defaults.ts) imports the words without the viewfinder (0.34, KS U8).\n//\n// The wordings are the apps' own: keksdose's invoices.take_photo, camera_starting,\n// camera_shutter and shots_captured (its locale JSONs), kastlan's handover.takePhoto\n// (\"Camera\") as the viewfinder's name and wizard.newHandover.addPhoto as the button\n// where there is no camera. keksdose's receipt-specific sentences are made general here\n// (\"Fill the frame with the receipt\" → \"Frame the picture\"; \"Analyse 3 photos\" → \"Use\n// 3 photos\"); keksdose passes its own through `labels`.\n\nexport interface CameraLabels {\n  /** The button where there is a camera: it opens it. */\n  takePhoto: string;\n  /** The button where there is none: it opens the file picker for photos instead. */\n  choosePhoto: string;\n  /** The viewfinder's accessible name. */\n  title: string;\n  /** The line above the viewfinder before the first photo. */\n  hint: string;\n  /** Beside the spinner while the camera starts — the permission prompt is usually up. */\n  starting: string;\n  /** The shutter's accessible name (it shows a camera glyph and no word). */\n  shutter: string;\n  /** The line above the viewfinder once photos are taken and kept for one hand-over\n   *  (`multiple`); it is a polite live region, so it is heard after each shot. */\n  taken: (count: number) => string;\n  /** The button that hands the photos taken so far to the app and closes the camera. */\n  done: (count: number) => string;\n}\n\nexport const DEFAULT_CAMERA_LABELS: CameraLabels = {\n  takePhoto: \"Take photo\",\n  choosePhoto: \"Add photo\",\n  title: \"Camera\",\n  hint: \"Frame the picture, then tap the shutter.\",\n  starting: \"Starting the camera…\",\n  shutter: \"Take the photo\",\n  taken: (count) => (count === 1 ? \"1 photo taken.\" : `${count} photos taken.`),\n  done: (count) => (count === 1 ? \"Use 1 photo\" : `Use ${count} photos`),\n};\n"],"mappings":";AAgCO,MAAM,wBAAsC;AAAA,EACjD,WAAW;AAAA,EACX,aAAa;AAAA,EACb,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,SAAS;AAAA,EACT,OAAO,CAAC,UAAW,UAAU,IAAI,mBAAmB,GAAG,KAAK;AAAA,EAC5D,MAAM,CAAC,UAAW,UAAU,IAAI,gBAAgB,OAAO,KAAK;AAC9D;","names":[]}

package/dist/components/chart-edge.d.ts

@@ -8,6 +8,15 @@ export declare function resolveChartColor(color: string, style: Pick<CSSStyleDec
  * measure gets no edge.
  */
 export declare function useChartEdge(): (fill: string | undefined) => string | undefined;
+/**
+ * `(fill) => edge`: like {@link useChartEdge}, the edge a filled mark in `fill` needs on this
+ * page — but in the mark's own shade, not in ink (0.55): `fill`'s hue moved darker on a light
+ * page, lighter on a dark one, until it clears 3:1 against the card and the page
+ * (`chartShade`). `undefined` for a colour that clears it already, or one it cannot measure;
+ * the ink for a colour whose shade it cannot reach. SeriesChart's bars and areas under More
+ * contrast.
+ */
+export declare function useChartShade(): (fill: string | undefined) => string | undefined;
 /**
  * How filled marks are parted — see `TreemapProps.edges` (0.51.6, keksdose dev #642).
  * `"auto"`: `"uniform"` at Standard contrast, `"contrast"` while More contrast is in force.

package/dist/components/chart-edge.js

@@ -1,6 +1,6 @@
 "use client";
 import { useCallback, useSyncExternalStore } from "react";
-import { chartEdge } from "../theme/chart-palette.js";
+import { chartEdge, chartShade } from "../theme/chart-palette.js";
 import { parseHex } from "../theme/color.js";
 const WATCHED = [
   "--bg-surface",
@@ -37,6 +37,16 @@ function resolveChartColor(color, style) {
   return parseHex(value) ? value : null;
 }
 function useChartEdge() {
+  return useOnGround(chartEdge);
+}
+function useChartShade() {
+  return useOnGround(shadeEdge);
+}
+function shadeEdge(fill, surfaces) {
+  const ink = chartEdge(fill, surfaces);
+  return ink && (chartShade(fill, surfaces) ?? ink);
+}
+function useOnGround(measure) {
   const snapshot = useSyncExternalStore(subscribe, readWatched, () => SERVER);
   return useCallback(
     (fill) => {
@@ -45,9 +55,9 @@ function useChartEdge() {
       const hex = resolveChartColor(fill, style);
       if (!hex) return void 0;
       const surfaces = ["--bg-surface", "--bg-page"].map((n) => style.getPropertyValue(n).trim());
-      return chartEdge(hex, surfaces);
+      return measure(hex, surfaces);
     },
-    [snapshot]
+    [snapshot, measure]
   );
 }
 function subscribeContrast(onChange) {
@@ -65,6 +75,7 @@ function useEdgesInForce(edges = "auto") {
 export {
   resolveChartColor,
   useChartEdge,
+  useChartShade,
   useEdgesInForce
 };
 //# sourceMappingURL=chart-edge.js.map

package/dist/components/chart-edge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/chart-edge.ts"],"sourcesContent":["// The live side of `chartEdge` (theme/chart-palette.ts): which colours a FILLED mark is\n// painted with and which grounds it sits on, read off <html> as the page resolves them —\n// so the 1px ink edge follows a theme toggle and a palette switch without the chart\n// knowing either store. And WHETHER a mark gets one: `useEdgesInForce`, the contrast\n// setting's switch. Shared by SeriesChart (bars, areas) and Treemap (tiles).\nimport { useCallback, useSyncExternalStore } from \"react\";\nimport { chartEdge } from \"../theme/chart-palette\";\nimport { parseHex } from \"../theme/color\";\n\n/** The tokens a theme or palette change can move, read as ONE string so\n *  `useSyncExternalStore` compares a primitive (a fresh array would never be equal). */\nconst WATCHED = [\n  \"--bg-surface\",\n  \"--bg-page\",\n  ...Array.from({ length: 9 }, (_, i) => `--chart-${i + 1}`),\n  \"--chart-ink\",\n  \"--chart-muted\",\n  \"--money-income\",\n  \"--money-expense\",\n  \"--money-net\",\n  \"--money-neutral\",\n  \"--brand\",\n];\n\nfunction readWatched(): string {\n  const style = getComputedStyle(document.documentElement);\n  return WATCHED.map((name) => style.getPropertyValue(name).trim()).join(\",\");\n}\n\nfunction subscribe(onChange: () => void): () => void {\n  const observer = new MutationObserver(onChange);\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"style\", \"data-theme\", \"data-contrast\"],\n  });\n  return () => observer.disconnect();\n}\n\n/** Server render: nothing measured, so no edge — the client adds it on hydration. */\nconst SERVER = \"\";\n\nconst BARE_VAR = /^var\\(\\s*(--[A-Za-z0-9_-]+)\\s*\\)$/;\n\n/** A colour as the page resolves it: a hex as it is, a bare `var(--token)` read off\n *  <html>, anything else (a `color-mix()`, a var with a fallback) null. */\nexport function resolveChartColor(color: string, style: Pick<CSSStyleDeclaration, \"getPropertyValue\">): string | null {\n  const trimmed = color.trim();\n  if (parseHex(trimmed)) return trimmed;\n  const m = BARE_VAR.exec(trimmed);\n  if (!m) return null;\n  const value = style.getPropertyValue(m[1]).trim();\n  return parseHex(value) ? value : null;\n}\n\n/**\n * `(fill) => edge`: the ink stroke a filled mark in `fill` needs on this page, or\n * `undefined` — only for a colour under 3:1 against the card or the page (WCAG 1.4.11).\n * `fill` may be a hex or a bare `var(--chart-N)` / `var(--money-…)`; anything it cannot\n * measure gets no edge.\n */\nexport function useChartEdge(): (fill: string | undefined) => string | undefined {\n  const snapshot = useSyncExternalStore(subscribe, readWatched, () => SERVER);\n  return useCallback(\n    (fill: string | undefined) => {\n      if (!fill || snapshot === SERVER || typeof document === \"undefined\") return undefined;\n      const style = getComputedStyle(document.documentElement);\n      const hex = resolveChartColor(fill, style);\n      if (!hex) return undefined;\n      const surfaces = [\"--bg-surface\", \"--bg-page\"].map((n) => style.getPropertyValue(n).trim());\n      return chartEdge(hex, surfaces);\n    },\n    [snapshot],\n  );\n}\n\n/**\n * How filled marks are parted — see `TreemapProps.edges` (0.51.6, keksdose dev #642).\n * `\"auto\"`: `\"uniform\"` at Standard contrast, `\"contrast\"` while More contrast is in force.\n */\nexport type ChartEdges = \"auto\" | \"uniform\" | \"contrast\";\n\n// `<html data-contrast>`, followed live: what `\"auto\"` keys on. Read here rather than\n// through theme/contrast, whose store would come into the chart entry with it.\nfunction subscribeContrast(onChange: () => void): () => void {\n  if (typeof MutationObserver === \"undefined\" || typeof document === \"undefined\") return () => {};\n  const observer = new MutationObserver(onChange);\n  observer.observe(document.documentElement, { attributes: true, attributeFilter: [\"data-contrast\"] });\n  return () => observer.disconnect();\n}\nconst readMoreContrast = () =>\n  typeof document !== \"undefined\" && document.documentElement.getAttribute(\"data-contrast\") === \"more\";\n\n/**\n * The edges a filled mark draws: `\"auto\"` resolved against the contrast in force, live.\n *\n * Under `\"contrast\"` a mark whose hue is under 3:1 against the ground gets the 1px ink\n * edge ({@link useChartEdge}); under `\"uniform\"` none does. The tiles took this rule in\n * 0.51.6 (#642: \"The borders do not look nice when changing from tile to tile\"), and\n * SeriesChart's bars and areas in 0.52 (refactor audit 2026-10-30, DSP-18, Marcel's\n * decision 3): at Standard contrast the edge fell on 5 of 8 hues in light, and in dark on\n * chart-5 and chart-7 alone — the same unevenness, in a bar chart.\n */\nexport function useEdgesInForce(edges: ChartEdges = \"auto\"): \"uniform\" | \"contrast\" {\n  const more = useSyncExternalStore(subscribeContrast, readMoreContrast, () => false);\n  return edges === \"auto\" ? (more ? \"contrast\" : \"uniform\") : edges;\n}\n"],"mappings":";AAKA,SAAS,aAAa,4BAA4B;AAClD,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AAIzB,MAAM,UAAU;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG,MAAM,KAAK,EAAE,QAAQ,EAAE,GAAG,CAAC,GAAG,MAAM,WAAW,IAAI,CAAC,EAAE;AAAA,EACzD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,SAAS,cAAsB;AAC7B,QAAM,QAAQ,iBAAiB,SAAS,eAAe;AACvD,SAAO,QAAQ,IAAI,CAAC,SAAS,MAAM,iBAAiB,IAAI,EAAE,KAAK,CAAC,EAAE,KAAK,GAAG;AAC5E;AAEA,SAAS,UAAU,UAAkC;AACnD,QAAM,WAAW,IAAI,iBAAiB,QAAQ;AAC9C,WAAS,QAAQ,SAAS,iBAAiB;AAAA,IACzC,YAAY;AAAA,IACZ,iBAAiB,CAAC,SAAS,SAAS,cAAc,eAAe;AAAA,EACnE,CAAC;AACD,SAAO,MAAM,SAAS,WAAW;AACnC;AAGA,MAAM,SAAS;AAEf,MAAM,WAAW;AAIV,SAAS,kBAAkB,OAAe,OAAqE;AACpH,QAAM,UAAU,MAAM,KAAK;AAC3B,MAAI,SAAS,OAAO,EAAG,QAAO;AAC9B,QAAM,IAAI,SAAS,KAAK,OAAO;AAC/B,MAAI,CAAC,EAAG,QAAO;AACf,QAAM,QAAQ,MAAM,iBAAiB,EAAE,CAAC,CAAC,EAAE,KAAK;AAChD,SAAO,SAAS,KAAK,IAAI,QAAQ;AACnC;AAQO,SAAS,eAAiE;AAC/E,QAAM,WAAW,qBAAqB,WAAW,aAAa,MAAM,MAAM;AAC1E,SAAO;AAAA,IACL,CAAC,SAA6B;AAC5B,UAAI,CAAC,QAAQ,aAAa,UAAU,OAAO,aAAa,YAAa,QAAO;AAC5E,YAAM,QAAQ,iBAAiB,SAAS,eAAe;AACvD,YAAM,MAAM,kBAAkB,MAAM,KAAK;AACzC,UAAI,CAAC,IAAK,QAAO;AACjB,YAAM,WAAW,CAAC,gBAAgB,WAAW,EAAE,IAAI,CAAC,MAAM,MAAM,iBAAiB,CAAC,EAAE,KAAK,CAAC;AAC1F,aAAO,UAAU,KAAK,QAAQ;AAAA,IAChC;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AACF;AAUA,SAAS,kBAAkB,UAAkC;AAC3D,MAAI,OAAO,qBAAqB,eAAe,OAAO,aAAa,YAAa,QAAO,MAAM;AAAA,EAAC;AAC9F,QAAM,WAAW,IAAI,iBAAiB,QAAQ;AAC9C,WAAS,QAAQ,SAAS,iBAAiB,EAAE,YAAY,MAAM,iBAAiB,CAAC,eAAe,EAAE,CAAC;AACnG,SAAO,MAAM,SAAS,WAAW;AACnC;AACA,MAAM,mBAAmB,MACvB,OAAO,aAAa,eAAe,SAAS,gBAAgB,aAAa,eAAe,MAAM;AAYzF,SAAS,gBAAgB,QAAoB,QAAgC;AAClF,QAAM,OAAO,qBAAqB,mBAAmB,kBAAkB,MAAM,KAAK;AAClF,SAAO,UAAU,SAAU,OAAO,aAAa,YAAa;AAC9D;","names":[]}
+{"version":3,"sources":["../../src/components/chart-edge.ts"],"sourcesContent":["// The live side of `chartEdge` and `chartShade` (theme/chart-palette.ts): which colours a\n// FILLED mark is painted with and which grounds it sits on, read off <html> as the page\n// resolves them — so the edge follows a theme toggle and a palette switch without the chart\n// knowing either store: the 1px ink of a tile (`useChartEdge`), the own darker shade of a\n// SeriesChart bar or area since 0.55 (`useChartShade`). And WHETHER a mark gets one:\n// `useEdgesInForce`, the contrast setting's switch. Shared by SeriesChart and Treemap.\nimport { useCallback, useSyncExternalStore } from \"react\";\nimport { chartEdge, chartShade } from \"../theme/chart-palette\";\nimport { parseHex } from \"../theme/color\";\n\n/** The tokens a theme or palette change can move, read as ONE string so\n *  `useSyncExternalStore` compares a primitive (a fresh array would never be equal). */\nconst WATCHED = [\n  \"--bg-surface\",\n  \"--bg-page\",\n  ...Array.from({ length: 9 }, (_, i) => `--chart-${i + 1}`),\n  \"--chart-ink\",\n  \"--chart-muted\",\n  \"--money-income\",\n  \"--money-expense\",\n  \"--money-net\",\n  \"--money-neutral\",\n  \"--brand\",\n];\n\nfunction readWatched(): string {\n  const style = getComputedStyle(document.documentElement);\n  return WATCHED.map((name) => style.getPropertyValue(name).trim()).join(\",\");\n}\n\nfunction subscribe(onChange: () => void): () => void {\n  const observer = new MutationObserver(onChange);\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"style\", \"data-theme\", \"data-contrast\"],\n  });\n  return () => observer.disconnect();\n}\n\n/** Server render: nothing measured, so no edge — the client adds it on hydration. */\nconst SERVER = \"\";\n\nconst BARE_VAR = /^var\\(\\s*(--[A-Za-z0-9_-]+)\\s*\\)$/;\n\n/** A colour as the page resolves it: a hex as it is, a bare `var(--token)` read off\n *  <html>, anything else (a `color-mix()`, a var with a fallback) null. */\nexport function resolveChartColor(color: string, style: Pick<CSSStyleDeclaration, \"getPropertyValue\">): string | null {\n  const trimmed = color.trim();\n  if (parseHex(trimmed)) return trimmed;\n  const m = BARE_VAR.exec(trimmed);\n  if (!m) return null;\n  const value = style.getPropertyValue(m[1]).trim();\n  return parseHex(value) ? value : null;\n}\n\n/**\n * `(fill) => edge`: the ink stroke a filled mark in `fill` needs on this page, or\n * `undefined` — only for a colour under 3:1 against the card or the page (WCAG 1.4.11).\n * `fill` may be a hex or a bare `var(--chart-N)` / `var(--money-…)`; anything it cannot\n * measure gets no edge.\n */\nexport function useChartEdge(): (fill: string | undefined) => string | undefined {\n  return useOnGround(chartEdge);\n}\n\n/**\n * `(fill) => edge`: like {@link useChartEdge}, the edge a filled mark in `fill` needs on this\n * page — but in the mark's own shade, not in ink (0.55): `fill`'s hue moved darker on a light\n * page, lighter on a dark one, until it clears 3:1 against the card and the page\n * (`chartShade`). `undefined` for a colour that clears it already, or one it cannot measure;\n * the ink for a colour whose shade it cannot reach. SeriesChart's bars and areas under More\n * contrast.\n */\nexport function useChartShade(): (fill: string | undefined) => string | undefined {\n  return useOnGround(shadeEdge);\n}\n\n/** The edge of a mark in `fill`: none when its hue clears 3:1, else its own shade. */\nfunction shadeEdge(fill: string, surfaces: readonly string[]): string | undefined {\n  const ink = chartEdge(fill, surfaces);\n  return ink && (chartShade(fill, surfaces) ?? ink);\n}\n\n/** `measure` of a colour as the page resolves it, against the card and the page, followed\n *  live: the two hooks above. */\nfunction useOnGround(\n  measure: (hex: string, surfaces: readonly string[]) => string | undefined,\n): (fill: string | undefined) => string | undefined {\n  const snapshot = useSyncExternalStore(subscribe, readWatched, () => SERVER);\n  return useCallback(\n    (fill: string | undefined) => {\n      if (!fill || snapshot === SERVER || typeof document === \"undefined\") return undefined;\n      const style = getComputedStyle(document.documentElement);\n      const hex = resolveChartColor(fill, style);\n      if (!hex) return undefined;\n      const surfaces = [\"--bg-surface\", \"--bg-page\"].map((n) => style.getPropertyValue(n).trim());\n      return measure(hex, surfaces);\n    },\n    [snapshot, measure],\n  );\n}\n\n/**\n * How filled marks are parted — see `TreemapProps.edges` (0.51.6, keksdose dev #642).\n * `\"auto\"`: `\"uniform\"` at Standard contrast, `\"contrast\"` while More contrast is in force.\n */\nexport type ChartEdges = \"auto\" | \"uniform\" | \"contrast\";\n\n// `<html data-contrast>`, followed live: what `\"auto\"` keys on. Read here rather than\n// through theme/contrast, whose store would come into the chart entry with it.\nfunction subscribeContrast(onChange: () => void): () => void {\n  if (typeof MutationObserver === \"undefined\" || typeof document === \"undefined\") return () => {};\n  const observer = new MutationObserver(onChange);\n  observer.observe(document.documentElement, { attributes: true, attributeFilter: [\"data-contrast\"] });\n  return () => observer.disconnect();\n}\nconst readMoreContrast = () =>\n  typeof document !== \"undefined\" && document.documentElement.getAttribute(\"data-contrast\") === \"more\";\n\n/**\n * The edges a filled mark draws: `\"auto\"` resolved against the contrast in force, live.\n *\n * Under `\"contrast\"` a mark whose hue is under 3:1 against the ground gets the 1px ink\n * edge ({@link useChartEdge}); under `\"uniform\"` none does. The tiles took this rule in\n * 0.51.6 (#642: \"The borders do not look nice when changing from tile to tile\"), and\n * SeriesChart's bars and areas in 0.52 (refactor audit 2026-10-30, DSP-18, Marcel's\n * decision 3): at Standard contrast the edge fell on 5 of 8 hues in light, and in dark on\n * chart-5 and chart-7 alone — the same unevenness, in a bar chart.\n */\nexport function useEdgesInForce(edges: ChartEdges = \"auto\"): \"uniform\" | \"contrast\" {\n  const more = useSyncExternalStore(subscribeContrast, readMoreContrast, () => false);\n  return edges === \"auto\" ? (more ? \"contrast\" : \"uniform\") : edges;\n}\n"],"mappings":";AAMA,SAAS,aAAa,4BAA4B;AAClD,SAAS,WAAW,kBAAkB;AACtC,SAAS,gBAAgB;AAIzB,MAAM,UAAU;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG,MAAM,KAAK,EAAE,QAAQ,EAAE,GAAG,CAAC,GAAG,MAAM,WAAW,IAAI,CAAC,EAAE;AAAA,EACzD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,SAAS,cAAsB;AAC7B,QAAM,QAAQ,iBAAiB,SAAS,eAAe;AACvD,SAAO,QAAQ,IAAI,CAAC,SAAS,MAAM,iBAAiB,IAAI,EAAE,KAAK,CAAC,EAAE,KAAK,GAAG;AAC5E;AAEA,SAAS,UAAU,UAAkC;AACnD,QAAM,WAAW,IAAI,iBAAiB,QAAQ;AAC9C,WAAS,QAAQ,SAAS,iBAAiB;AAAA,IACzC,YAAY;AAAA,IACZ,iBAAiB,CAAC,SAAS,SAAS,cAAc,eAAe;AAAA,EACnE,CAAC;AACD,SAAO,MAAM,SAAS,WAAW;AACnC;AAGA,MAAM,SAAS;AAEf,MAAM,WAAW;AAIV,SAAS,kBAAkB,OAAe,OAAqE;AACpH,QAAM,UAAU,MAAM,KAAK;AAC3B,MAAI,SAAS,OAAO,EAAG,QAAO;AAC9B,QAAM,IAAI,SAAS,KAAK,OAAO;AAC/B,MAAI,CAAC,EAAG,QAAO;AACf,QAAM,QAAQ,MAAM,iBAAiB,EAAE,CAAC,CAAC,EAAE,KAAK;AAChD,SAAO,SAAS,KAAK,IAAI,QAAQ;AACnC;AAQO,SAAS,eAAiE;AAC/E,SAAO,YAAY,SAAS;AAC9B;AAUO,SAAS,gBAAkE;AAChF,SAAO,YAAY,SAAS;AAC9B;AAGA,SAAS,UAAU,MAAc,UAAiD;AAChF,QAAM,MAAM,UAAU,MAAM,QAAQ;AACpC,SAAO,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC/C;AAIA,SAAS,YACP,SACkD;AAClD,QAAM,WAAW,qBAAqB,WAAW,aAAa,MAAM,MAAM;AAC1E,SAAO;AAAA,IACL,CAAC,SAA6B;AAC5B,UAAI,CAAC,QAAQ,aAAa,UAAU,OAAO,aAAa,YAAa,QAAO;AAC5E,YAAM,QAAQ,iBAAiB,SAAS,eAAe;AACvD,YAAM,MAAM,kBAAkB,MAAM,KAAK;AACzC,UAAI,CAAC,IAAK,QAAO;AACjB,YAAM,WAAW,CAAC,gBAAgB,WAAW,EAAE,IAAI,CAAC,MAAM,MAAM,iBAAiB,CAAC,EAAE,KAAK,CAAC;AAC1F,aAAO,QAAQ,KAAK,QAAQ;AAAA,IAC9B;AAAA,IACA,CAAC,UAAU,OAAO;AAAA,EACpB;AACF;AAUA,SAAS,kBAAkB,UAAkC;AAC3D,MAAI,OAAO,qBAAqB,eAAe,OAAO,aAAa,YAAa,QAAO,MAAM;AAAA,EAAC;AAC9F,QAAM,WAAW,IAAI,iBAAiB,QAAQ;AAC9C,WAAS,QAAQ,SAAS,iBAAiB,EAAE,YAAY,MAAM,iBAAiB,CAAC,eAAe,EAAE,CAAC;AACnG,SAAO,MAAM,SAAS,WAAW;AACnC;AACA,MAAM,mBAAmB,MACvB,OAAO,aAAa,eAAe,SAAS,gBAAgB,aAAa,eAAe,MAAM;AAYzF,SAAS,gBAAgB,QAAoB,QAAgC;AAClF,QAAM,OAAO,qBAAqB,mBAAmB,kBAAkB,MAAM,KAAK;AAClF,SAAO,UAAU,SAAU,OAAO,aAAa,YAAa;AAC9D;","names":[]}

package/dist/components/chart-zoom-core.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { usePlotArea, useXAxisInverseScale, useYAxisInverseScale } from "recharts";
 import { X } from "lucide-react";
 import { cn } from "../lib/cn.js";
@@ -147,6 +147,8 @@ function SharedXZoom({ children }) {
   const [window, set] = useState(void 0);
   return /* @__PURE__ */ jsx(SharedX.Provider, { value: { window, set }, children });
 }
+const ONE_AXIS = [{ id: DEFAULT_Y_AXIS }];
+const NO_BINDING = { yDomains: {}, layer: null };
 function withChartZoom(Chart) {
   function Zoomable(props) {
     const labels = useKitLabels("seriesChart", DEFAULT_SERIES_CHART_LABELS, props.labels);
@@ -155,41 +157,44 @@ function withChartZoom(Chart) {
     const [ownY, setOwnY] = useState(null);
     const xWindow = group ? group.window : ownX;
     const setXWindow = group ? group.set : setOwnX;
-    const axes = props.axes ?? [{ id: DEFAULT_Y_AXIS }];
+    const axes = props.axes ?? ONE_AXIS;
     const setting = props.zoomAxes ?? defaultZoomAxes(props.series);
     const only = setting === "x" || setting === "y" ? setting : void 0;
-    const source = {
-      rows: props.rows ?? [],
-      series: [...props.series ?? []],
-      axes: [...axes],
-      xKey: props.x?.key ?? "x"
-    };
-    const state = { x: xWindow, y: ownY };
+    const { rows, series } = props;
+    const xKey = props.x?.key ?? "x";
+    const source = useMemo(
+      () => ({ rows: rows ?? [], series: [...series ?? []], axes: [...axes], xKey }),
+      [rows, series, axes, xKey]
+    );
     const zoomed = xWindow !== void 0 || ownY !== null;
-    const empty = props.rows?.length === 0 || props.series?.length === 0;
-    const clear = () => {
+    const empty = rows?.length === 0 || series?.length === 0;
+    const clear = useCallback(() => {
       setXWindow(void 0);
       setOwnY(null);
-    };
+    }, [setXWindow]);
+    const binding = useMemo(() => {
+      if (setting === "none") return NO_BINDING;
+      const state = { x: xWindow, y: ownY };
+      return {
+        ...zoomDomains(state, source),
+        layer: /* @__PURE__ */ jsx(
+          ZoomLayer,
+          {
+            axisIds: source.axes.map((axis) => axis.id),
+            only,
+            onZoom: (selection) => {
+              const next = zoomAfter(state, selection, source);
+              if (next.x !== xWindow) setXWindow(next.x);
+              setOwnY(next.y);
+            },
+            onReset: clear
+          }
+        )
+      };
+    }, [setting, xWindow, ownY, source, only, setXWindow, clear]);
     if (setting === "none") {
-      return /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(Chart, { ...props, zoom: { yDomains: {}, layer: null } }) });
+      return /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(Chart, { ...props, zoom: binding }) });
     }
-    const binding = {
-      ...zoomDomains(state, source),
-      layer: /* @__PURE__ */ jsx(
-        ZoomLayer,
-        {
-          axisIds: axes.map((axis) => axis.id),
-          only,
-          onZoom: (selection) => {
-            const next = zoomAfter(state, selection, source);
-            if (next.x !== xWindow) setXWindow(next.x);
-            setOwnY(next.y);
-          },
-          onReset: clear
-        }
-      )
-    };
     return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
       /* @__PURE__ */ jsx(Chart, { ...props, zoom: binding }),
       zoomed && !empty && /* @__PURE__ */ jsxs(