@withpotter/components 0.13.0-next.101

package/dist/product-editor/camera/camera-capture.js

@@ -0,0 +1,160 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { X } from "lucide-react";
+import { useModalBehaviour } from "@withpotter/hooks/use-modal-behaviour";
+import { ChoosePhotos } from "./choose-photos";
+import { useCamera } from "./use-camera";
+import { useQrScan } from "./use-qr-scan";
+const HINT = "Point at a product QR code, or take a photo";
+const FILLED_CLOSE_MS = 1400;
+function CameraCapture({
+  open,
+  onClose,
+  onPhotos,
+  onScan
+}) {
+  const panelRef = useModalBehaviour(open, onClose);
+  const shutterRef = useRef(null);
+  const { videoRef, status, takePhoto } = useCamera(open);
+  const [found, setFound] = useState("none");
+  const [message, setMessage] = useState("");
+  const [flash, setFlash] = useState(false);
+  const live = status === "live";
+  useEffect(() => {
+    if (!open) return;
+    setFound("none");
+    setMessage("");
+  }, [open]);
+  useEffect(() => {
+    if (open && live) shutterRef.current?.focus();
+    else if (open) panelRef.current?.focus();
+  }, [open, live, panelRef]);
+  useEffect(() => {
+    if (found !== "other") return;
+    const t = setTimeout(() => {
+      setFound("none");
+      setMessage("");
+    }, 2500);
+    return () => clearTimeout(t);
+  }, [found, message]);
+  const handleCode = useCallback(
+    async (text) => {
+      const outcome = await onScan(text);
+      setMessage(outcome.message);
+      setFound(outcome.ok ? "product" : "other");
+      if (outcome.ok) await new Promise((r) => setTimeout(r, FILLED_CLOSE_MS));
+      if (outcome.ok) onClose();
+    },
+    [onScan, onClose]
+  );
+  useQrScan(videoRef, open && live && found !== "product", handleCode);
+  const shoot = async () => {
+    const file = await takePhoto();
+    if (!file) return;
+    setFlash(true);
+    setTimeout(() => setFlash(false), 150);
+    onPhotos([file]);
+    setMessage("Photo added.");
+  };
+  if (!open || typeof document === "undefined") return null;
+  const blocked = status === "denied" || status === "unavailable";
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: panelRef,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Camera",
+        tabIndex: -1,
+        className: "fixed inset-0 z-[100] flex flex-col bg-black text-white outline-none",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative min-h-0 flex-1 overflow-hidden", children: [
+            /* @__PURE__ */ jsx(
+              "video",
+              {
+                ref: videoRef,
+                playsInline: true,
+                muted: true,
+                autoPlay: true,
+                "aria-hidden": true,
+                className: "absolute inset-0 h-full w-full object-cover"
+              }
+            ),
+            live && /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-hidden": true,
+                className: `pointer-events-none absolute left-1/2 top-1/2 aspect-square w-[min(64vw,18rem)] -translate-x-1/2 -translate-y-1/2 rounded-3xl border-2 transition-colors duration-150 ${found === "product" ? "border-brand-500" : "border-white/70"}`
+              }
+            ),
+            flash && /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "absolute inset-0 bg-white" }),
+            blocked && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-4 px-6 text-center", children: [
+              /* @__PURE__ */ jsx("p", { className: "max-w-xs text-sm text-white/80", children: status === "denied" ? "Camera access is turned off for this site. You can still add photos." : "No camera is available here. You can still add photos." }),
+              /* @__PURE__ */ jsx(
+                ChoosePhotos,
+                {
+                  capture: true,
+                  onFiles: (files) => {
+                    onPhotos(files);
+                    onClose();
+                  },
+                  className: "rounded-full bg-brand-500 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "px-4 pb-[max(1.5rem,env(safe-area-inset-bottom))] pt-4", children: [
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                role: "status",
+                "aria-live": "polite",
+                className: `min-h-5 text-center text-sm ${found === "product" ? "text-brand-500" : "text-white/80"}`,
+                children: message || (blocked ? "" : HINT)
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "mt-4 grid grid-cols-3 items-center", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onClose,
+                  "aria-label": "Close camera",
+                  className: "flex h-11 w-11 items-center justify-center justify-self-start rounded-full text-white hover:text-[var(--error)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-white",
+                  children: /* @__PURE__ */ jsx(X, { className: "h-6 w-6", "aria-hidden": true })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  ref: shutterRef,
+                  type: "button",
+                  onClick: () => void shoot(),
+                  disabled: !live,
+                  "aria-label": "Take photo",
+                  className: "h-[72px] w-[72px] justify-self-center rounded-full border-4 border-white p-1 disabled:opacity-40 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-brand-500",
+                  children: /* @__PURE__ */ jsx("span", { className: "block h-full w-full rounded-full bg-white transition-transform active:scale-90" })
+                }
+              ),
+              live ? /* @__PURE__ */ jsx(
+                ChoosePhotos,
+                {
+                  onFiles: onPhotos,
+                  className: "justify-self-end rounded-full px-3 py-2 text-sm text-white/80 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-white"
+                }
+              ) : /* @__PURE__ */ jsx("span", {})
+            ] })
+          ] })
+        ]
+      }
+    ),
+    document.body
+  );
+}
+export {
+  CameraCapture
+};
+//# sourceMappingURL=camera-capture.js.map

package/dist/product-editor/camera/camera-capture.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/product-editor/camera/camera-capture.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { X } from 'lucide-react';\nimport { useModalBehaviour } from '@withpotter/hooks/use-modal-behaviour';\nimport { ChoosePhotos } from './choose-photos';\nimport { useCamera } from './use-camera';\nimport { useQrScan } from './use-qr-scan';\n\nexport interface ScanOutcome {\n  ok: boolean;\n  message: string;\n}\n\ninterface CameraCaptureProps {\n  open: boolean;\n  onClose: () => void;\n  /** A photo from the shutter, or files chosen instead. */\n  onPhotos: (files: File[]) => void;\n  /** A QR code was read. Resolves with what to tell the merchant. */\n  onScan: (text: string) => Promise<ScanOutcome>;\n}\n\nconst HINT = 'Point at a product QR code, or take a photo';\nconst FILLED_CLOSE_MS = 1400;\n\n/**\n * ONE VIEW, TWO WAYS IN.\n *\n * Like the phone's own camera: hold it over a product QR code and the code\n * is read on its own; press the shutter and it is a photo. There is no mode\n * switch to find first. A code that is read fills the item and the view\n * closes on its own so the merchant sees what changed; a photo stays and\n * the view stays open for the next one.\n */\nexport function CameraCapture({\n  open,\n  onClose,\n  onPhotos,\n  onScan,\n}: CameraCaptureProps) {\n  const panelRef = useModalBehaviour(open, onClose);\n  const shutterRef = useRef<HTMLButtonElement>(null);\n  const { videoRef, status, takePhoto } = useCamera(open);\n  const [found, setFound] = useState<'none' | 'product' | 'other'>('none');\n  const [message, setMessage] = useState('');\n  const [flash, setFlash] = useState(false);\n  const live = status === 'live';\n\n  useEffect(() => {\n    if (!open) return;\n    setFound('none');\n    setMessage('');\n  }, [open]);\n\n  // The shutter is the first thing to press, once there is a picture to take.\n  useEffect(() => {\n    if (open && live) shutterRef.current?.focus();\n    else if (open) panelRef.current?.focus();\n  }, [open, live, panelRef]);\n\n  useEffect(() => {\n    if (found !== 'other') return;\n    const t = setTimeout(() => {\n      setFound('none');\n      setMessage('');\n    }, 2500);\n    return () => clearTimeout(t);\n  }, [found, message]);\n\n  const handleCode = useCallback(\n    async (text: string) => {\n      const outcome = await onScan(text);\n      setMessage(outcome.message);\n      setFound(outcome.ok ? 'product' : 'other');\n      if (outcome.ok) await new Promise((r) => setTimeout(r, FILLED_CLOSE_MS));\n      if (outcome.ok) onClose();\n    },\n    [onScan, onClose],\n  );\n  useQrScan(videoRef, open && live && found !== 'product', handleCode);\n\n  const shoot = async () => {\n    const file = await takePhoto();\n    if (!file) return;\n    setFlash(true);\n    setTimeout(() => setFlash(false), 150);\n    onPhotos([file]);\n    setMessage('Photo added.');\n  };\n\n  if (!open || typeof document === 'undefined') return null;\n\n  const blocked = status === 'denied' || status === 'unavailable';\n  return createPortal(\n    <div\n      ref={panelRef}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label=\"Camera\"\n      tabIndex={-1}\n      className=\"fixed inset-0 z-[100] flex flex-col bg-black text-white outline-none\"\n    >\n      <div className=\"relative min-h-0 flex-1 overflow-hidden\">\n        <video\n          ref={videoRef}\n          playsInline\n          muted\n          autoPlay\n          aria-hidden\n          className=\"absolute inset-0 h-full w-full object-cover\"\n        />\n        {live && (\n          <div\n            aria-hidden\n            className={`pointer-events-none absolute left-1/2 top-1/2 aspect-square w-[min(64vw,18rem)] -translate-x-1/2 -translate-y-1/2 rounded-3xl border-2 transition-colors duration-150 ${\n              found === 'product' ? 'border-brand-500' : 'border-white/70'\n            }`}\n          />\n        )}\n        {flash && <div aria-hidden className=\"absolute inset-0 bg-white\" />}\n        {blocked && (\n          <div className=\"absolute inset-0 flex flex-col items-center justify-center gap-4 px-6 text-center\">\n            <p className=\"max-w-xs text-sm text-white/80\">\n              {status === 'denied'\n                ? 'Camera access is turned off for this site. You can still add photos.'\n                : 'No camera is available here. You can still add photos.'}\n            </p>\n            <ChoosePhotos\n              capture\n              onFiles={(files) => {\n                onPhotos(files);\n                onClose();\n              }}\n              className=\"rounded-full bg-brand-500 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white\"\n            />\n          </div>\n        )}\n      </div>\n\n      <div className=\"px-4 pb-[max(1.5rem,env(safe-area-inset-bottom))] pt-4\">\n        <p\n          role=\"status\"\n          aria-live=\"polite\"\n          className={`min-h-5 text-center text-sm ${\n            found === 'product' ? 'text-brand-500' : 'text-white/80'\n          }`}\n        >\n          {message || (blocked ? '' : HINT)}\n        </p>\n        <div className=\"mt-4 grid grid-cols-3 items-center\">\n          <button\n            type=\"button\"\n            onClick={onClose}\n            aria-label=\"Close camera\"\n            className=\"flex h-11 w-11 items-center justify-center justify-self-start rounded-full text-white hover:text-[var(--error)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-white\"\n          >\n            <X className=\"h-6 w-6\" aria-hidden />\n          </button>\n          <button\n            ref={shutterRef}\n            type=\"button\"\n            onClick={() => void shoot()}\n            disabled={!live}\n            aria-label=\"Take photo\"\n            className=\"h-[72px] w-[72px] justify-self-center rounded-full border-4 border-white p-1 disabled:opacity-40 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-brand-500\"\n          >\n            <span className=\"block h-full w-full rounded-full bg-white transition-transform active:scale-90\" />\n          </button>\n          {live ? (\n            <ChoosePhotos\n              onFiles={onPhotos}\n              className=\"justify-self-end rounded-full px-3 py-2 text-sm text-white/80 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-white\"\n            />\n          ) : (\n            <span />\n          )}\n        </div>\n      </div>\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/product-editor/camera/camera-start.d.ts

@@ -0,0 +1,13 @@
+interface CameraStartProps {
+    onOpen: () => void;
+    onFiles: (files: File[]) => void;
+    busy?: boolean;
+    /** Upload progress, 0–100, shown as a ring while `busy`. */
+    progress?: number;
+}
+/**
+ * The empty Media card when the box takes pictures with a camera: one
+ * button to open it, and a quiet way to pick files for when there is none.
+ */
+export declare function CameraStart({ onOpen, onFiles, busy, progress }: CameraStartProps): import("react").JSX.Element;
+export {};

package/dist/product-editor/camera/camera-start.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Camera } from "lucide-react";
+import { Button } from "@withpotter/ui-kit/button";
+import { ChoosePhotos } from "./choose-photos";
+function CameraStart({ onOpen, onFiles, busy, progress = 0 }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-center gap-3 rounded-lg border border-[var(--border-default)] bg-[var(--bg-muted)] px-4 py-7 text-center", children: [
+    busy ? /* @__PURE__ */ jsx(ProgressRing, { value: progress }) : /* @__PURE__ */ jsx(Camera, { className: "size-5 text-[var(--text-muted)]", "aria-hidden": true }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-secondary)]", children: "Point at a product QR code, or take a photo" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2", children: [
+      /* @__PURE__ */ jsx(Button, { size: "sm", onClick: onOpen, children: "Open camera" }),
+      /* @__PURE__ */ jsx(
+        ChoosePhotos,
+        {
+          onFiles,
+          className: "rounded-md px-3 py-1.5 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]"
+        }
+      )
+    ] })
+  ] });
+}
+const RADIUS = 20;
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+function ProgressRing({ value }) {
+  const pct = Math.max(0, Math.min(100, value));
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "progressbar",
+      "aria-label": "Uploading",
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": pct,
+      className: "relative size-12",
+      children: [
+        /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 48 48", className: "size-12 -rotate-90", "aria-hidden": true, children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "24",
+              cy: "24",
+              r: RADIUS,
+              fill: "none",
+              strokeWidth: "3",
+              className: "stroke-[var(--border-default)]"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "24",
+              cy: "24",
+              r: RADIUS,
+              fill: "none",
+              strokeWidth: "3",
+              strokeLinecap: "round",
+              strokeDasharray: CIRCUMFERENCE,
+              strokeDashoffset: CIRCUMFERENCE * (1 - pct / 100),
+              className: "stroke-[var(--text-primary)] transition-[stroke-dashoffset] duration-200"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "absolute inset-0 flex items-center justify-center text-xs font-medium tabular-nums text-[var(--text-primary)]", children: [
+          pct,
+          "%"
+        ] })
+      ]
+    }
+  );
+}
+export {
+  CameraStart
+};
+//# sourceMappingURL=camera-start.js.map

package/dist/product-editor/camera/camera-start.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/product-editor/camera/camera-start.tsx"],"sourcesContent":["'use client';\n\nimport { Camera } from 'lucide-react';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { ChoosePhotos } from './choose-photos';\n\ninterface CameraStartProps {\n  onOpen: () => void;\n  onFiles: (files: File[]) => void;\n  busy?: boolean;\n  /** Upload progress, 0–100, shown as a ring while `busy`. */\n  progress?: number;\n}\n\n/**\n * The empty Media card when the box takes pictures with a camera: one\n * button to open it, and a quiet way to pick files for when there is none.\n */\nexport function CameraStart({ onOpen, onFiles, busy, progress = 0 }: CameraStartProps) {\n  return (\n    <div className=\"flex w-full flex-col items-center gap-3 rounded-lg border border-[var(--border-default)] bg-[var(--bg-muted)] px-4 py-7 text-center\">\n      {busy ? (\n        <ProgressRing value={progress} />\n      ) : (\n        <Camera className=\"size-5 text-[var(--text-muted)]\" aria-hidden />\n      )}\n      <p className=\"text-sm text-[var(--text-secondary)]\">\n        Point at a product QR code, or take a photo\n      </p>\n      <div className=\"flex flex-wrap items-center justify-center gap-2\">\n        <Button size=\"sm\" onClick={onOpen}>\n          Open camera\n        </Button>\n        <ChoosePhotos\n          onFiles={onFiles}\n          className=\"rounded-md px-3 py-1.5 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]\"\n        />\n      </div>\n    </div>\n  );\n}\n\nconst RADIUS = 20;\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS;\n\nfunction ProgressRing({ value }: { value: number }) {\n  const pct = Math.max(0, Math.min(100, value));\n  return (\n    <div\n      role=\"progressbar\"\n      aria-label=\"Uploading\"\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={pct}\n      className=\"relative size-12\"\n    >\n      <svg viewBox=\"0 0 48 48\" className=\"size-12 -rotate-90\" aria-hidden>\n        <circle\n          cx=\"24\"\n          cy=\"24\"\n          r={RADIUS}\n          fill=\"none\"\n          strokeWidth=\"3\"\n          className=\"stroke-[var(--border-default)]\"\n        />\n        <circle\n          cx=\"24\"\n          cy=\"24\"\n          r={RADIUS}\n          fill=\"none\"\n          strokeWidth=\"3\"\n          strokeLinecap=\"round\"\n          strokeDasharray={CIRCUMFERENCE}\n          strokeDashoffset={CIRCUMFERENCE * (1 - pct / 100)}\n          className=\"stroke-[var(--text-primary)] transition-[stroke-dashoffset] duration-200\"\n        />\n      </svg>\n      <span className=\"absolute inset-0 flex items-center justify-center text-xs font-medium tabular-nums text-[var(--text-primary)]\">\n        {pct}%\n      </span>\n    </div>\n  );\n}\n"],"mappings":";AAsBQ,cAOF,YAPE;AApBR,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,oBAAoB;AActB,SAAS,YAAY,EAAE,QAAQ,SAAS,MAAM,WAAW,EAAE,GAAqB;AACrF,SACE,qBAAC,SAAI,WAAU,uIACZ;AAAA,WACC,oBAAC,gBAAa,OAAO,UAAU,IAE/B,oBAAC,UAAO,WAAU,mCAAkC,eAAW,MAAC;AAAA,IAElE,oBAAC,OAAE,WAAU,wCAAuC,yDAEpD;AAAA,IACA,qBAAC,SAAI,WAAU,oDACb;AAAA,0BAAC,UAAO,MAAK,MAAK,SAAS,QAAQ,yBAEnC;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAU;AAAA;AAAA,MACZ;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,MAAM,SAAS;AACf,MAAM,gBAAgB,IAAI,KAAK,KAAK;AAEpC,SAAS,aAAa,EAAE,MAAM,GAAsB;AAClD,QAAM,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,KAAK,CAAC;AAC5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAW;AAAA,MACX,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,WAAU;AAAA,MAEV;AAAA,6BAAC,SAAI,SAAQ,aAAY,WAAU,sBAAqB,eAAW,MACjE;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,IAAG;AAAA,cACH,GAAG;AAAA,cACH,MAAK;AAAA,cACL,aAAY;AAAA,cACZ,WAAU;AAAA;AAAA,UACZ;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,IAAG;AAAA,cACH,GAAG;AAAA,cACH,MAAK;AAAA,cACL,aAAY;AAAA,cACZ,eAAc;AAAA,cACd,iBAAiB;AAAA,cACjB,kBAAkB,iBAAiB,IAAI,MAAM;AAAA,cAC7C,WAAU;AAAA;AAAA,UACZ;AAAA,WACF;AAAA,QACA,qBAAC,UAAK,WAAU,iHACb;AAAA;AAAA,UAAI;AAAA,WACP;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/product-editor/camera/choose-photos.d.ts

@@ -0,0 +1,13 @@
+interface ChoosePhotosProps {
+    onFiles: (files: File[]) => void;
+    /** Opens the phone's own camera instead of its photo library. */
+    capture?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * The way in that always works: a file dialog for images, for a laptop with
+ * no camera or a phone whose camera was refused.
+ */
+export declare function ChoosePhotos({ onFiles, capture, className, children, }: ChoosePhotosProps): import("react").JSX.Element;
+export {};

package/dist/product-editor/camera/choose-photos.js

@@ -0,0 +1,44 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+function ChoosePhotos({
+  onFiles,
+  capture,
+  className,
+  children = "Choose photos"
+}) {
+  const inputRef = useRef(null);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className,
+        onClick: () => inputRef.current?.click(),
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept: "image/*",
+        multiple: true,
+        hidden: true,
+        tabIndex: -1,
+        "aria-hidden": true,
+        ...capture ? { capture: "environment" } : {},
+        onChange: (e) => {
+          const files = Array.from(e.target.files ?? []);
+          e.target.value = "";
+          if (files.length) onFiles(files);
+        }
+      }
+    )
+  ] });
+}
+export {
+  ChoosePhotos
+};
+//# sourceMappingURL=choose-photos.js.map

package/dist/product-editor/camera/choose-photos.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/product-editor/camera/choose-photos.tsx"],"sourcesContent":["'use client';\n\nimport { useRef } from 'react';\n\ninterface ChoosePhotosProps {\n  onFiles: (files: File[]) => void;\n  /** Opens the phone's own camera instead of its photo library. */\n  capture?: boolean;\n  className?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * The way in that always works: a file dialog for images, for a laptop with\n * no camera or a phone whose camera was refused.\n */\nexport function ChoosePhotos({\n  onFiles,\n  capture,\n  className,\n  children = 'Choose photos',\n}: ChoosePhotosProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  return (\n    <>\n      <button\n        type=\"button\"\n        className={className}\n        onClick={() => inputRef.current?.click()}\n      >\n        {children}\n      </button>\n      <input\n        ref={inputRef}\n        type=\"file\"\n        accept=\"image/*\"\n        multiple\n        hidden\n        tabIndex={-1}\n        aria-hidden\n        {...(capture ? { capture: 'environment' as const } : {})}\n        onChange={(e) => {\n          const files = Array.from(e.target.files ?? []);\n          e.target.value = '';\n          if (files.length) onFiles(files);\n        }}\n      />\n    </>\n  );\n}\n"],"mappings":";AAwBI,mBACE,KADF;AAtBJ,SAAS,cAAc;AAchB,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAAsB;AACpB,QAAM,WAAW,OAAyB,IAAI;AAC9C,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL;AAAA,QACA,SAAS,MAAM,SAAS,SAAS,MAAM;AAAA,QAEtC;AAAA;AAAA,IACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL,QAAO;AAAA,QACP,UAAQ;AAAA,QACR,QAAM;AAAA,QACN,UAAU;AAAA,QACV,eAAW;AAAA,QACV,GAAI,UAAU,EAAE,SAAS,cAAuB,IAAI,CAAC;AAAA,QACtD,UAAU,CAAC,MAAM;AACf,gBAAM,QAAQ,MAAM,KAAK,EAAE,OAAO,SAAS,CAAC,CAAC;AAC7C,YAAE,OAAO,QAAQ;AACjB,cAAI,MAAM,OAAQ,SAAQ,KAAK;AAAA,QACjC;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/product-editor/camera/product-camera.d.ts

@@ -0,0 +1,14 @@
+import type { ProductGalleryItem } from '@withpotter/lib/media-utils';
+import type { ProductScanPatch } from './product-qr';
+interface ProductCameraProps {
+    open: boolean;
+    onClose: () => void;
+    galleryItems: ProductGalleryItem[];
+    onGalleryItemsChange: React.Dispatch<React.SetStateAction<ProductGalleryItem[]>>;
+    /** Uploads photos into Media, the same way a picked file arrives. */
+    onPhotos: (files: File[]) => void;
+    onProductScan?: (patch: ProductScanPatch) => void;
+}
+/** The camera, wired to one product: photos into Media, codes into fields. */
+export declare function ProductCamera({ galleryItems, onGalleryItemsChange, onProductScan, ...camera }: ProductCameraProps): import("react").JSX.Element;
+export {};

package/dist/product-editor/camera/product-camera.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { CameraCapture } from "./camera-capture";
+import { useProductScan } from "./use-product-scan";
+function ProductCamera({
+  galleryItems,
+  onGalleryItemsChange,
+  onProductScan,
+  ...camera
+}) {
+  const onScan = useProductScan(
+    galleryItems,
+    onGalleryItemsChange,
+    onProductScan
+  );
+  return /* @__PURE__ */ jsx(CameraCapture, { ...camera, onScan });
+}
+export {
+  ProductCamera
+};
+//# sourceMappingURL=product-camera.js.map

package/dist/product-editor/camera/product-camera.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/product-editor/camera/product-camera.tsx"],"sourcesContent":["'use client';\n\nimport type { ProductGalleryItem } from '@withpotter/lib/media-utils';\nimport { CameraCapture } from './camera-capture';\nimport type { ProductScanPatch } from './product-qr';\nimport { useProductScan } from './use-product-scan';\n\ninterface ProductCameraProps {\n  open: boolean;\n  onClose: () => void;\n  galleryItems: ProductGalleryItem[];\n  onGalleryItemsChange: React.Dispatch<\n    React.SetStateAction<ProductGalleryItem[]>\n  >;\n  /** Uploads photos into Media, the same way a picked file arrives. */\n  onPhotos: (files: File[]) => void;\n  onProductScan?: (patch: ProductScanPatch) => void;\n}\n\n/** The camera, wired to one product: photos into Media, codes into fields. */\nexport function ProductCamera({\n  galleryItems,\n  onGalleryItemsChange,\n  onProductScan,\n  ...camera\n}: ProductCameraProps) {\n  const onScan = useProductScan(\n    galleryItems,\n    onGalleryItemsChange,\n    onProductScan,\n  );\n  return <CameraCapture {...camera} onScan={onScan} />;\n}\n"],"mappings":";AA+BS;AA5BT,SAAS,qBAAqB;AAE9B,SAAS,sBAAsB;AAexB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuB;AACrB,QAAM,SAAS;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,SAAO,oBAAC,iBAAe,GAAG,QAAQ,QAAgB;AACpD;","names":[]}

package/dist/product-editor/camera/product-qr.d.ts

@@ -0,0 +1,60 @@
+import { type ProductGalleryItem } from '@withpotter/lib/media-utils';
+/**
+ * WHAT A PRODUCT QR CODE HOLDS.
+ *
+ * Either the product itself, as JSON:
+ *
+ *   {"type":"product","name":"Ankara tote","price":15000,
+ *    "compareAtPrice":18000,"description":"Hand sewn","sku":"TOTE-01",
+ *    "images":["https://example.com/tote.jpg"]}
+ *
+ * or an https link ending in `.json` that returns that same JSON. Only
+ * `"type":"product"` marks it as ours; everything else is optional. `title`
+ * is read as `name`, a single `image` as `images`, and a price may be a
+ * number or text like "15,000". Prices are in the shop's currency, in whole
+ * units (naira, not kobo).
+ */
+export interface ProductQr {
+    name?: string;
+    description?: string;
+    price?: number;
+    compareAtPrice?: number;
+    sku?: string;
+    images: string[];
+}
+export type QrReading = {
+    kind: 'product';
+    product: ProductQr;
+} | {
+    kind: 'link';
+    url: string;
+} | {
+    kind: 'unknown';
+};
+export declare const NOT_A_PRODUCT = "This code isn't a product code";
+/** Reads the JSON form. Null when it is not a product, or says nothing. */
+export declare function productFromJson(data: unknown): ProductQr | null;
+/** What a scanned string is, before anything is fetched. */
+export declare function readQr(raw: string): QrReading;
+/**
+ * The product a scan stands for, following a `.json` link if that is what
+ * it holds. Null for anything that is not a product code, including a link
+ * that cannot be fetched or does not return one.
+ */
+export declare function productFromScan(raw: string, fetcher?: typeof fetch): Promise<ProductQr | null>;
+/** The editor fields a scan changes. Absent means leave it alone. */
+export interface ProductScanPatch {
+    title?: string;
+    description?: string;
+    price?: number;
+    compareAtPrice?: number;
+    sku?: string;
+    media: ProductGalleryItem[];
+}
+/**
+ * The scan as edits to the open item. Pictures are added after the ones
+ * already there, never twice, and never past the gallery limit.
+ */
+export declare function toScanPatch(product: ProductQr, existing: ProductGalleryItem[]): ProductScanPatch;
+/** One sentence for the screen reader and the hint line. */
+export declare function describePatch(patch: ProductScanPatch): string;

package/dist/product-editor/camera/product-qr.js

@@ -0,0 +1,111 @@
+import {
+  createGalleryItemId,
+  MAX_GALLERY_ITEMS
+} from "@withpotter/lib/media-utils";
+const NOT_A_PRODUCT = "This code isn't a product code";
+function text(v) {
+  if (typeof v !== "string") return void 0;
+  const t = v.trim();
+  return t ? t : void 0;
+}
+function money(v) {
+  let n = NaN;
+  if (typeof v === "number") n = v;
+  else if (typeof v === "string" && /\d/.test(v))
+    n = Number(v.replace(/[^0-9.]/g, ""));
+  return Number.isFinite(n) && n >= 0 ? n : void 0;
+}
+function isWebUrl(v) {
+  try {
+    const u = new URL(v);
+    return u.protocol === "https:" || u.protocol === "http:";
+  } catch {
+    return false;
+  }
+}
+function productFromJson(data) {
+  if (!data || typeof data !== "object" || Array.isArray(data)) return null;
+  const o = data;
+  if (o.type !== "product") return null;
+  const listed = Array.isArray(o.images) ? o.images : [];
+  const images = [...listed, o.image].map(text).filter((u) => !!u && isWebUrl(u));
+  const product = {
+    name: text(o.name) ?? text(o.title),
+    description: text(o.description),
+    price: money(o.price),
+    compareAtPrice: money(o.compareAtPrice),
+    sku: text(o.sku),
+    images: [...new Set(images)]
+  };
+  const says = product.name || product.description || product.price !== void 0 || product.sku || product.images.length;
+  return says ? product : null;
+}
+function readQr(raw) {
+  const s = raw.trim();
+  if (s.startsWith("{")) {
+    try {
+      const product = productFromJson(JSON.parse(s));
+      return product ? { kind: "product", product } : { kind: "unknown" };
+    } catch {
+      return { kind: "unknown" };
+    }
+  }
+  if (isWebUrl(s) && new URL(s).pathname.toLowerCase().endsWith(".json")) {
+    return { kind: "link", url: s };
+  }
+  return { kind: "unknown" };
+}
+async function productFromScan(raw, fetcher = fetch) {
+  const reading = readQr(raw);
+  if (reading.kind === "product") return reading.product;
+  if (reading.kind !== "link") return null;
+  try {
+    const res = await fetcher(reading.url, {
+      headers: { Accept: "application/json" }
+    });
+    if (!res.ok) return null;
+    return productFromJson(await res.json());
+  } catch {
+    return null;
+  }
+}
+function toScanPatch(product, existing) {
+  const have = new Set(existing.map((m) => m.url));
+  const room = Math.max(0, MAX_GALLERY_ITEMS - existing.length);
+  const media = product.images.filter((url) => !have.has(url)).slice(0, room).map(
+    (url) => ({
+      id: createGalleryItemId(url),
+      url,
+      type: "image"
+    })
+  );
+  const patch = { media };
+  if (product.name) patch.title = product.name;
+  if (product.description) patch.description = product.description;
+  if (product.price !== void 0) patch.price = product.price;
+  if (product.compareAtPrice !== void 0)
+    patch.compareAtPrice = product.compareAtPrice;
+  if (product.sku) patch.sku = product.sku;
+  return patch;
+}
+function describePatch(patch) {
+  const parts = [];
+  if (patch.title) parts.push("name");
+  if (patch.price !== void 0) parts.push("price");
+  if (patch.description) parts.push("description");
+  if (patch.sku) parts.push("SKU");
+  const n = patch.media.length;
+  if (n) parts.push(`${n} ${n === 1 ? "photo" : "photos"}`);
+  if (!parts.length) return "Product code read. Nothing new to add.";
+  const list = parts.length === 1 ? parts[0] : `${parts.slice(0, -1).join(", ")} and ${parts[parts.length - 1]}`;
+  return `Filled in ${list}.`;
+}
+export {
+  NOT_A_PRODUCT,
+  describePatch,
+  productFromJson,
+  productFromScan,
+  readQr,
+  toScanPatch
+};
+//# sourceMappingURL=product-qr.js.map

package/dist/product-editor/camera/product-qr.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/product-editor/camera/product-qr.ts"],"sourcesContent":["import {\n  createGalleryItemId,\n  MAX_GALLERY_ITEMS,\n  type ProductGalleryItem,\n} from '@withpotter/lib/media-utils';\n\n/**\n * WHAT A PRODUCT QR CODE HOLDS.\n *\n * Either the product itself, as JSON:\n *\n *   {\"type\":\"product\",\"name\":\"Ankara tote\",\"price\":15000,\n *    \"compareAtPrice\":18000,\"description\":\"Hand sewn\",\"sku\":\"TOTE-01\",\n *    \"images\":[\"https://example.com/tote.jpg\"]}\n *\n * or an https link ending in `.json` that returns that same JSON. Only\n * `\"type\":\"product\"` marks it as ours; everything else is optional. `title`\n * is read as `name`, a single `image` as `images`, and a price may be a\n * number or text like \"15,000\". Prices are in the shop's currency, in whole\n * units (naira, not kobo).\n */\nexport interface ProductQr {\n  name?: string;\n  description?: string;\n  price?: number;\n  compareAtPrice?: number;\n  sku?: string;\n  images: string[];\n}\n\nexport type QrReading =\n  | { kind: 'product'; product: ProductQr }\n  | { kind: 'link'; url: string }\n  | { kind: 'unknown' };\n\nexport const NOT_A_PRODUCT = \"This code isn't a product code\";\n\nfunction text(v: unknown): string | undefined {\n  if (typeof v !== 'string') return undefined;\n  const t = v.trim();\n  return t ? t : undefined;\n}\n\nfunction money(v: unknown): number | undefined {\n  let n = NaN;\n  if (typeof v === 'number') n = v;\n  else if (typeof v === 'string' && /\\d/.test(v))\n    n = Number(v.replace(/[^0-9.]/g, ''));\n  return Number.isFinite(n) && n >= 0 ? n : undefined;\n}\n\nfunction isWebUrl(v: string): boolean {\n  try {\n    const u = new URL(v);\n    return u.protocol === 'https:' || u.protocol === 'http:';\n  } catch {\n    return false;\n  }\n}\n\n/** Reads the JSON form. Null when it is not a product, or says nothing. */\nexport function productFromJson(data: unknown): ProductQr | null {\n  if (!data || typeof data !== 'object' || Array.isArray(data)) return null;\n  const o = data as Record<string, unknown>;\n  if (o.type !== 'product') return null;\n\n  const listed = Array.isArray(o.images) ? o.images : [];\n  const images = [...listed, o.image]\n    .map(text)\n    .filter((u): u is string => !!u && isWebUrl(u));\n\n  const product: ProductQr = {\n    name: text(o.name) ?? text(o.title),\n    description: text(o.description),\n    price: money(o.price),\n    compareAtPrice: money(o.compareAtPrice),\n    sku: text(o.sku),\n    images: [...new Set(images)],\n  };\n  const says =\n    product.name ||\n    product.description ||\n    product.price !== undefined ||\n    product.sku ||\n    product.images.length;\n  return says ? product : null;\n}\n\n/** What a scanned string is, before anything is fetched. */\nexport function readQr(raw: string): QrReading {\n  const s = raw.trim();\n  if (s.startsWith('{')) {\n    try {\n      const product = productFromJson(JSON.parse(s));\n      return product ? { kind: 'product', product } : { kind: 'unknown' };\n    } catch {\n      return { kind: 'unknown' };\n    }\n  }\n  if (isWebUrl(s) && new URL(s).pathname.toLowerCase().endsWith('.json')) {\n    return { kind: 'link', url: s };\n  }\n  return { kind: 'unknown' };\n}\n\n/**\n * The product a scan stands for, following a `.json` link if that is what\n * it holds. Null for anything that is not a product code, including a link\n * that cannot be fetched or does not return one.\n */\nexport async function productFromScan(\n  raw: string,\n  fetcher: typeof fetch = fetch,\n): Promise<ProductQr | null> {\n  const reading = readQr(raw);\n  if (reading.kind === 'product') return reading.product;\n  if (reading.kind !== 'link') return null;\n  try {\n    const res = await fetcher(reading.url, {\n      headers: { Accept: 'application/json' },\n    });\n    if (!res.ok) return null;\n    return productFromJson(await res.json());\n  } catch {\n    return null;\n  }\n}\n\n/** The editor fields a scan changes. Absent means leave it alone. */\nexport interface ProductScanPatch {\n  title?: string;\n  description?: string;\n  price?: number;\n  compareAtPrice?: number;\n  sku?: string;\n  media: ProductGalleryItem[];\n}\n\n/**\n * The scan as edits to the open item. Pictures are added after the ones\n * already there, never twice, and never past the gallery limit.\n */\nexport function toScanPatch(\n  product: ProductQr,\n  existing: ProductGalleryItem[],\n): ProductScanPatch {\n  const have = new Set(existing.map((m) => m.url));\n  const room = Math.max(0, MAX_GALLERY_ITEMS - existing.length);\n  const media = product.images\n    .filter((url) => !have.has(url))\n    .slice(0, room)\n    .map(\n      (url): ProductGalleryItem => ({\n        id: createGalleryItemId(url),\n        url,\n        type: 'image',\n      }),\n    );\n  const patch: ProductScanPatch = { media };\n  if (product.name) patch.title = product.name;\n  if (product.description) patch.description = product.description;\n  if (product.price !== undefined) patch.price = product.price;\n  if (product.compareAtPrice !== undefined)\n    patch.compareAtPrice = product.compareAtPrice;\n  if (product.sku) patch.sku = product.sku;\n  return patch;\n}\n\n/** One sentence for the screen reader and the hint line. */\nexport function describePatch(patch: ProductScanPatch): string {\n  const parts: string[] = [];\n  if (patch.title) parts.push('name');\n  if (patch.price !== undefined) parts.push('price');\n  if (patch.description) parts.push('description');\n  if (patch.sku) parts.push('SKU');\n  const n = patch.media.length;\n  if (n) parts.push(`${n} ${n === 1 ? 'photo' : 'photos'}`);\n  if (!parts.length) return 'Product code read. Nothing new to add.';\n  const list =\n    parts.length === 1\n      ? parts[0]\n      : `${parts.slice(0, -1).join(', ')} and ${parts[parts.length - 1]}`;\n  return `Filled in ${list}.`;\n}\n"],"mappings":"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","names":[]}

package/dist/product-editor/camera/qr-decoder.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Reads a QR code off a live video frame.
+ *
+ * The browser's own BarcodeDetector where there is one (Chrome, Android),
+ * and jsQR otherwise (Safari, Firefox). jsQR is loaded only when it is
+ * needed, so a phone that can read codes natively never downloads it.
+ */
+type Detect = (video: HTMLVideoElement) => Promise<string | null>;
+export declare function createQrDetector(): Promise<Detect>;
+export {};

package/dist/product-editor/camera/qr-decoder.js

@@ -0,0 +1,46 @@
+async function nativeDetector() {
+  const Ctor = globalThis.BarcodeDetector;
+  if (!Ctor) return null;
+  try {
+    const formats = await Ctor.getSupportedFormats?.() ?? ["qr_code"];
+    if (!formats.includes("qr_code")) return null;
+    const detector = new Ctor({ formats: ["qr_code"] });
+    return async (video) => {
+      const found = await detector.detect(video);
+      return found[0]?.rawValue ?? null;
+    };
+  } catch {
+    return null;
+  }
+}
+const MAX_SIDE = 640;
+async function jsqrDetector() {
+  const { default: jsQR } = await import("jsqr");
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d", { willReadFrequently: true });
+  return async (video) => {
+    const { videoWidth: w, videoHeight: h } = video;
+    if (!ctx || !w || !h) return null;
+    const scale = Math.min(1, MAX_SIDE / Math.max(w, h));
+    canvas.width = Math.round(w * scale);
+    canvas.height = Math.round(h * scale);
+    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+    const { data, width, height } = ctx.getImageData(
+      0,
+      0,
+      canvas.width,
+      canvas.height
+    );
+    const code = jsQR(data, width, height, {
+      inversionAttempts: "dontInvert"
+    });
+    return code?.data || null;
+  };
+}
+async function createQrDetector() {
+  return await nativeDetector() ?? await jsqrDetector();
+}
+export {
+  createQrDetector
+};
+//# sourceMappingURL=qr-decoder.js.map