@withpotter/components 0.13.0-next.101

package/dist/media/media-library-picker.js

@@ -0,0 +1,162 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { galleryApi } from "@withpotter/lib/api/gallery";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription
+} from "@withpotter/ui-kit/dialog";
+import { FileInput } from "@withpotter/ui-kit/file-input";
+import { ListStates } from "@withpotter/ui-kit/list-states";
+import { ACCEPT, addLabel, pickerHint } from "./media-picker-copy";
+import { PickerFooter } from "./media-picker-footer";
+import { PickerEmpty, PickerGrid } from "./media-picker-grid";
+import { usePickerUpload } from "./use-picker-upload";
+function MediaLibraryPicker({
+  open,
+  onOpenChange,
+  remaining = 12,
+  onPick,
+  tenantSlug,
+  title = "Your photos",
+  accept = "image"
+}) {
+  const { tenant } = useAuth();
+  const slug = tenantSlug || tenant?.slug;
+  const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [selected, setSelected] = useState([]);
+  const [dropping, setDropping] = useState(false);
+  const single = remaining <= 1;
+  const byId = new Map(items.map((i) => [i.id, i]));
+  const picked = selected.flatMap((id) => byId.get(id) ?? []);
+  const { input, busy, problem, setProblem, take, open: upload } = usePickerUpload({
+    slug,
+    accept,
+    single,
+    remaining,
+    selectedCount: selected.length,
+    onUploaded: (added) => {
+      if (single) {
+        onPick(added.slice(0, 1));
+        onOpenChange(false);
+        return;
+      }
+      setItems((prev) => [...added, ...prev]);
+      setSelected((prev) => [...prev, ...added.map((i) => i.id)].slice(0, remaining));
+    }
+  });
+  const load = useCallback(async () => {
+    if (!slug) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await galleryApi.list(slug, { limit: 60 });
+      setItems(
+        (res.items ?? []).filter(
+          (i) => i.status !== "archived" && (accept === "media" || i.type === accept)
+        )
+      );
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Couldn't load your photos");
+    } finally {
+      setLoading(false);
+    }
+  }, [slug, accept]);
+  useEffect(() => {
+    if (open) {
+      setSelected([]);
+      setProblem(null);
+      void load();
+    }
+  }, [open, load, setProblem]);
+  const choose = (item) => {
+    if (single) {
+      onPick([item]);
+      onOpenChange(false);
+      return;
+    }
+    setSelected((prev) => {
+      if (prev.includes(item.id)) return prev.filter((x) => x !== item.id);
+      if (prev.length >= remaining) return prev;
+      return [...prev, item.id];
+    });
+  };
+  const confirm = () => {
+    onPick(picked);
+    onOpenChange(false);
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      className: `max-w-2xl transition-shadow duration-[var(--motion-fast)] ${dropping ? "ring-2 ring-[var(--brand-500)]" : ""}`,
+      onDragOver: (e) => {
+        e.preventDefault();
+        setDropping(true);
+      },
+      onDragLeave: (e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) setDropping(false);
+      },
+      onDrop: (e) => {
+        e.preventDefault();
+        setDropping(false);
+        void take(Array.from(e.dataTransfer.files ?? []));
+      },
+      children: [
+        /* @__PURE__ */ jsxs(DialogHeader, { className: "pr-10", children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: title }),
+          /* @__PURE__ */ jsx(DialogDescription, { className: problem ? "text-[var(--error)]" : void 0, children: problem ?? pickerHint(single, accept, remaining) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "max-h-[52vh] min-h-0 overflow-y-auto", children: /* @__PURE__ */ jsx(
+          ListStates,
+          {
+            loading,
+            isEmpty: items.length === 0,
+            error,
+            onRetry: load,
+            empty: /* @__PURE__ */ jsx(PickerEmpty, { accept, busy, onUpload: upload }),
+            children: /* @__PURE__ */ jsx(
+              PickerGrid,
+              {
+                items,
+                selected,
+                single,
+                atLimit: selected.length >= remaining,
+                onChoose: choose
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          PickerFooter,
+          {
+            busy,
+            onUpload: upload,
+            onCancel: () => onOpenChange(false),
+            confirmLabel: single ? null : addLabel(picked, accept),
+            canConfirm: picked.length > 0,
+            onConfirm: confirm
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FileInput,
+          {
+            ref: input,
+            accept: ACCEPT[accept],
+            multiple: !single,
+            onFiles: (f) => void take(f)
+          }
+        )
+      ]
+    }
+  ) });
+}
+export {
+  MediaLibraryPicker
+};
+//# sourceMappingURL=media-library-picker.js.map

package/dist/media/media-library-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/media/media-library-picker.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useState } from 'react';\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport { galleryApi } from '@withpotter/lib/api/gallery';\nimport type { GalleryItem } from '@withpotter/lib/api/types';\nimport {\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  DialogDescription,\n} from '@withpotter/ui-kit/dialog';\nimport { FileInput } from '@withpotter/ui-kit/file-input';\nimport { ListStates } from '@withpotter/ui-kit/list-states';\nimport { ACCEPT, addLabel, pickerHint, type PickerAccept } from './media-picker-copy';\nimport { PickerFooter } from './media-picker-footer';\nimport { PickerEmpty, PickerGrid } from './media-picker-grid';\nimport { usePickerUpload } from './use-picker-upload';\n\n/**\n * The photographs a merchant already owns, offered wherever one is being\n * chosen, and the place new ones arrive. Choosing and uploading are the same\n * sentence (\"put this picture here\"), so both happen in this one panel.\n *\n * Layout, as in Shopify's, Mintlify's and fal's pickers: the header is only\n * the title, a hint and the close button, and the confirm button sits bottom\n * right, says how many it will add, and stays disabled until something is\n * picked. Upload and a small link to the full gallery sit bottom left, away\n * from the close button. Files can also be dropped anywhere on the panel.\n */\nexport interface MediaLibraryPickerProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  /**\n   * How many more pictures the target will accept. `1` turns a tap into the\n   * whole interaction: no checkbox, no confirm button, it picks and closes.\n   */\n  remaining?: number;\n  onPick: (items: GalleryItem[]) => void;\n  /** The editor knows its tenant before the auth context does on a cold route. */\n  tenantSlug?: string;\n  title?: string;\n  /** `image` and `video` keep a canvas field type-safe; `media` offers both. */\n  accept?: PickerAccept;\n}\n\nexport function MediaLibraryPicker({\n  open,\n  onOpenChange,\n  remaining = 12,\n  onPick,\n  tenantSlug,\n  title = 'Your photos',\n  accept = 'image',\n}: MediaLibraryPickerProps) {\n  const { tenant } = useAuth();\n  const slug = tenantSlug || tenant?.slug;\n\n  const [items, setItems] = useState<GalleryItem[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n  const [selected, setSelected] = useState<string[]>([]);\n  const [dropping, setDropping] = useState(false);\n\n  /** One slot left means the tap IS the choice. */\n  const single = remaining <= 1;\n  const byId = new Map(items.map((i) => [i.id, i]));\n  const picked = selected.flatMap((id) => byId.get(id) ?? []);\n\n  const { input, busy, problem, setProblem, take, open: upload } = usePickerUpload({\n    slug,\n    accept,\n    single,\n    remaining,\n    selectedCount: selected.length,\n    onUploaded: (added) => {\n      // A photo dragged in has already been chosen; asking again is the same question twice.\n      if (single) {\n        onPick(added.slice(0, 1));\n        onOpenChange(false);\n        return;\n      }\n      setItems((prev) => [...added, ...prev]);\n      setSelected((prev) => [...prev, ...added.map((i) => i.id)].slice(0, remaining));\n    },\n  });\n\n  const load = useCallback(async () => {\n    if (!slug) return;\n    setLoading(true);\n    setError(null);\n    try {\n      const res = await galleryApi.list(slug, { limit: 60 });\n      // Archived means \"done with this one\"; hidden only means off the public page.\n      setItems(\n        (res.items ?? []).filter(\n          (i) => i.status !== 'archived' && (accept === 'media' || i.type === accept),\n        ),\n      );\n    } catch (err) {\n      setError(err instanceof Error ? err.message : \"Couldn't load your photos\");\n    } finally {\n      setLoading(false);\n    }\n  }, [slug, accept]);\n\n  useEffect(() => {\n    if (open) {\n      // Reset selection at the boundary where the dialog opens.\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setSelected([]);\n      setProblem(null);\n      void load();\n    }\n  }, [open, load, setProblem]);\n\n  const choose = (item: GalleryItem) => {\n    if (single) {\n      onPick([item]);\n      onOpenChange(false);\n      return;\n    }\n    setSelected((prev) => {\n      if (prev.includes(item.id)) return prev.filter((x) => x !== item.id);\n      if (prev.length >= remaining) return prev;\n      return [...prev, item.id];\n    });\n  };\n\n  const confirm = () => {\n    onPick(picked);\n    onOpenChange(false);\n  };\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent\n        className={`max-w-2xl transition-shadow duration-[var(--motion-fast)] ${\n          dropping ? 'ring-2 ring-[var(--brand-500)]' : ''\n        }`}\n        onDragOver={(e) => {\n          e.preventDefault();\n          setDropping(true);\n        }}\n        onDragLeave={(e) => {\n          // Only when the pointer leaves the panel, not on every child it crosses.\n          if (!e.currentTarget.contains(e.relatedTarget as Node)) setDropping(false);\n        }}\n        onDrop={(e) => {\n          e.preventDefault();\n          setDropping(false);\n          void take(Array.from(e.dataTransfer.files ?? []));\n        }}\n      >\n        {/* Room on the right for the dialog's own close button. */}\n        <DialogHeader className=\"pr-10\">\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription className={problem ? 'text-[var(--error)]' : undefined}>\n            {problem ?? pickerHint(single, accept, remaining)}\n          </DialogDescription>\n        </DialogHeader>\n\n        <div className=\"max-h-[52vh] min-h-0 overflow-y-auto\">\n          <ListStates\n            loading={loading}\n            isEmpty={items.length === 0}\n            error={error}\n            onRetry={load}\n            empty={<PickerEmpty accept={accept} busy={busy} onUpload={upload} />}\n          >\n            <PickerGrid\n              items={items}\n              selected={selected}\n              single={single}\n              atLimit={selected.length >= remaining}\n              onChoose={choose}\n            />\n          </ListStates>\n        </div>\n\n        <PickerFooter\n          busy={busy}\n          onUpload={upload}\n          onCancel={() => onOpenChange(false)}\n          confirmLabel={single ? null : addLabel(picked, accept)}\n          canConfirm={picked.length > 0}\n          onConfirm={confirm}\n        />\n\n        <FileInput\n          ref={input}\n          accept={ACCEPT[accept]}\n          multiple={!single}\n          onFiles={(f) => void take(f)}\n        />\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/media/media-picker-copy.d.ts

@@ -0,0 +1,14 @@
+import type { GalleryItem } from '@withpotter/lib/api/types';
+/** What a picker takes: `image` or `video` for a typed field, `media` for a product gallery. */
+export type PickerAccept = 'image' | 'video' | 'media';
+export declare const ACCEPT: Record<PickerAccept, string>;
+export declare const MAX_SIZE_MB: Record<PickerAccept, number>;
+/** The line under the title: how many can be picked, and that a file can be dropped in. */
+export declare function pickerHint(single: boolean, accept: PickerAccept, remaining: number): string;
+/** The empty grid's invitation. */
+export declare function emptyLabel(accept: PickerAccept): "Drop a video here" | "Drop photos or videos here" | "Drop photos here";
+/**
+ * The confirm button names what it adds and how many: "Add 3 photos". Nothing picked
+ * yet reads "Add photos" and is disabled. A mix of photos and videos is "files".
+ */
+export declare function addLabel(picked: Pick<GalleryItem, 'type'>[], accept: PickerAccept): string;

package/dist/media/media-picker-copy.js

@@ -0,0 +1,35 @@
+const ACCEPT = {
+  image: "image/*",
+  video: "video/mp4,video/quicktime,video/webm",
+  media: "image/*,video/mp4,video/quicktime,video/webm"
+};
+const MAX_SIZE_MB = {
+  image: 10,
+  video: 100,
+  media: 100
+};
+function pickerHint(single, accept, remaining) {
+  if (!single) return `Pick up to ${remaining}, or drop new ones in.`;
+  if (accept === "video") return "Pick one, or drop a new video in.";
+  if (accept === "media") return "Pick one, or drop a new photo or video in.";
+  return "Pick one, or drop a new photo in.";
+}
+function emptyLabel(accept) {
+  if (accept === "video") return "Drop a video here";
+  if (accept === "media") return "Drop photos or videos here";
+  return "Drop photos here";
+}
+function addLabel(picked, accept) {
+  const videos = picked.filter((item) => item.type === "video").length;
+  const kind = picked.length === 0 ? accept === "video" ? "video" : "photo" : videos === picked.length ? "video" : videos === 0 ? "photo" : "file";
+  if (picked.length === 0) return `Add ${kind}s`;
+  return `Add ${picked.length} ${kind}${picked.length === 1 ? "" : "s"}`;
+}
+export {
+  ACCEPT,
+  MAX_SIZE_MB,
+  addLabel,
+  emptyLabel,
+  pickerHint
+};
+//# sourceMappingURL=media-picker-copy.js.map

package/dist/media/media-picker-copy.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/media/media-picker-copy.ts"],"sourcesContent":["import type { GalleryItem } from '@withpotter/lib/api/types';\n\n/** What a picker takes: `image` or `video` for a typed field, `media` for a product gallery. */\nexport type PickerAccept = 'image' | 'video' | 'media';\n\nexport const ACCEPT: Record<PickerAccept, string> = {\n  image: 'image/*',\n  video: 'video/mp4,video/quicktime,video/webm',\n  media: 'image/*,video/mp4,video/quicktime,video/webm',\n};\n\nexport const MAX_SIZE_MB: Record<PickerAccept, number> = {\n  image: 10,\n  video: 100,\n  media: 100,\n};\n\n/** The line under the title: how many can be picked, and that a file can be dropped in. */\nexport function pickerHint(single: boolean, accept: PickerAccept, remaining: number) {\n  if (!single) return `Pick up to ${remaining}, or drop new ones in.`;\n  if (accept === 'video') return 'Pick one, or drop a new video in.';\n  if (accept === 'media') return 'Pick one, or drop a new photo or video in.';\n  return 'Pick one, or drop a new photo in.';\n}\n\n/** The empty grid's invitation. */\nexport function emptyLabel(accept: PickerAccept) {\n  if (accept === 'video') return 'Drop a video here';\n  if (accept === 'media') return 'Drop photos or videos here';\n  return 'Drop photos here';\n}\n\n/**\n * The confirm button names what it adds and how many: \"Add 3 photos\". Nothing picked\n * yet reads \"Add photos\" and is disabled. A mix of photos and videos is \"files\".\n */\nexport function addLabel(picked: Pick<GalleryItem, 'type'>[], accept: PickerAccept) {\n  const videos = picked.filter((item) => item.type === 'video').length;\n  const kind =\n    picked.length === 0\n      ? accept === 'video'\n        ? 'video'\n        : 'photo'\n      : videos === picked.length\n        ? 'video'\n        : videos === 0\n          ? 'photo'\n          : 'file';\n  if (picked.length === 0) return `Add ${kind}s`;\n  return `Add ${picked.length} ${kind}${picked.length === 1 ? '' : 's'}`;\n}\n"],"mappings":"AAKO,MAAM,SAAuC;AAAA,EAClD,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;AAEO,MAAM,cAA4C;AAAA,EACvD,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;AAGO,SAAS,WAAW,QAAiB,QAAsB,WAAmB;AACnF,MAAI,CAAC,OAAQ,QAAO,cAAc,SAAS;AAC3C,MAAI,WAAW,QAAS,QAAO;AAC/B,MAAI,WAAW,QAAS,QAAO;AAC/B,SAAO;AACT;AAGO,SAAS,WAAW,QAAsB;AAC/C,MAAI,WAAW,QAAS,QAAO;AAC/B,MAAI,WAAW,QAAS,QAAO;AAC/B,SAAO;AACT;AAMO,SAAS,SAAS,QAAqC,QAAsB;AAClF,QAAM,SAAS,OAAO,OAAO,CAAC,SAAS,KAAK,SAAS,OAAO,EAAE;AAC9D,QAAM,OACJ,OAAO,WAAW,IACd,WAAW,UACT,UACA,UACF,WAAW,OAAO,SAChB,UACA,WAAW,IACT,UACA;AACV,MAAI,OAAO,WAAW,EAAG,QAAO,OAAO,IAAI;AAC3C,SAAO,OAAO,OAAO,MAAM,IAAI,IAAI,GAAG,OAAO,WAAW,IAAI,KAAK,GAAG;AACtE;","names":[]}

package/dist/media/media-picker-footer.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Everything the picker does, in one row. Left: getting more photos in (Upload)
+ * and a small way out to the full gallery. Right: Cancel and the confirm button,
+ * which names how many it adds. `confirmLabel` is null when one slot is left:
+ * a tap on a tile is then the choice, so there is nothing to confirm.
+ */
+export declare function PickerFooter({ busy, onUpload, onCancel, confirmLabel, canConfirm, onConfirm, }: {
+    busy: boolean;
+    onUpload: () => void;
+    onCancel: () => void;
+    confirmLabel: string | null;
+    canConfirm: boolean;
+    onConfirm: () => void;
+}): import("react").JSX.Element;

package/dist/media/media-picker-footer.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { Upload } from "lucide-react";
+import { DialogFooter } from "@withpotter/ui-kit/dialog";
+import { Button } from "@withpotter/ui-kit/button";
+function PickerFooter({
+  busy,
+  onUpload,
+  onCancel,
+  confirmLabel,
+  canConfirm,
+  onConfirm
+}) {
+  return /* @__PURE__ */ jsxs(DialogFooter, { className: "flex-row flex-wrap items-center justify-between gap-2 sm:justify-between sm:space-x-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: onUpload, loading: busy, icon: /* @__PURE__ */ jsx(Upload, {}), children: busy ? "Uploading" : "Upload" }),
+      /* @__PURE__ */ jsx(Button, { asChild: true, variant: "ghost", size: "sm", children: /* @__PURE__ */ jsx(Link, { href: "/dashboard/business/gallery", children: "Manage gallery" }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: onCancel, children: "Cancel" }),
+      confirmLabel && /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: onConfirm, disabled: !canConfirm, children: confirmLabel })
+    ] })
+  ] });
+}
+export {
+  PickerFooter
+};
+//# sourceMappingURL=media-picker-footer.js.map

package/dist/media/media-picker-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/media/media-picker-footer.tsx"],"sourcesContent":["'use client';\n\nimport Link from 'next/link';\nimport { Upload } from 'lucide-react';\nimport { DialogFooter } from '@withpotter/ui-kit/dialog';\nimport { Button } from '@withpotter/ui-kit/button';\n\n/**\n * Everything the picker does, in one row. Left: getting more photos in (Upload)\n * and a small way out to the full gallery. Right: Cancel and the confirm button,\n * which names how many it adds. `confirmLabel` is null when one slot is left:\n * a tap on a tile is then the choice, so there is nothing to confirm.\n */\nexport function PickerFooter({\n  busy,\n  onUpload,\n  onCancel,\n  confirmLabel,\n  canConfirm,\n  onConfirm,\n}: {\n  busy: boolean;\n  onUpload: () => void;\n  onCancel: () => void;\n  confirmLabel: string | null;\n  canConfirm: boolean;\n  onConfirm: () => void;\n}) {\n  return (\n    <DialogFooter className=\"flex-row flex-wrap items-center justify-between gap-2 sm:justify-between sm:space-x-0\">\n      <div className=\"flex items-center gap-1\">\n        <Button variant=\"secondary\" size=\"sm\" onClick={onUpload} loading={busy} icon={<Upload />}>\n          {busy ? 'Uploading' : 'Upload'}\n        </Button>\n        <Button asChild variant=\"ghost\" size=\"sm\">\n          <Link href=\"/dashboard/business/gallery\">Manage gallery</Link>\n        </Button>\n      </div>\n      <div className=\"ml-auto flex items-center gap-2\">\n        <Button variant=\"ghost\" onClick={onCancel}>\n          Cancel\n        </Button>\n        {confirmLabel && (\n          <Button variant=\"primary\" onClick={onConfirm} disabled={!canConfirm}>\n            {confirmLabel}\n          </Button>\n        )}\n      </div>\n    </DialogFooter>\n  );\n}\n"],"mappings":";AA8BM,SACgF,KADhF;AA5BN,OAAO,UAAU;AACjB,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,cAAc;AAQhB,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AACD,SACE,qBAAC,gBAAa,WAAU,yFACtB;AAAA,yBAAC,SAAI,WAAU,2BACb;AAAA,0BAAC,UAAO,SAAQ,aAAY,MAAK,MAAK,SAAS,UAAU,SAAS,MAAM,MAAM,oBAAC,UAAO,GACnF,iBAAO,cAAc,UACxB;AAAA,MACA,oBAAC,UAAO,SAAO,MAAC,SAAQ,SAAQ,MAAK,MACnC,8BAAC,QAAK,MAAK,+BAA8B,4BAAc,GACzD;AAAA,OACF;AAAA,IACA,qBAAC,SAAI,WAAU,mCACb;AAAA,0BAAC,UAAO,SAAQ,SAAQ,SAAS,UAAU,oBAE3C;AAAA,MACC,gBACC,oBAAC,UAAO,SAAQ,WAAU,SAAS,WAAW,UAAU,CAAC,YACtD,wBACH;AAAA,OAEJ;AAAA,KACF;AAEJ;","names":[]}

package/dist/media/media-picker-grid.d.ts

@@ -0,0 +1,22 @@
+import type { GalleryItem } from '@withpotter/lib/api/types';
+import { type PickerAccept } from './media-picker-copy';
+/** The drop zone shown when the library is empty: click to upload, or drop onto the panel. */
+export declare function PickerEmpty({ accept, busy, onUpload, }: {
+    accept: PickerAccept;
+    busy: boolean;
+    onUpload: () => void;
+}): import("react").JSX.Element;
+/**
+ * The library in columns at each picture's real shape: a set of photographs is
+ * not a set of squares, and cropping them here is a promise the page does not
+ * keep. With more than one slot, every tile shows a round checkbox, empty until
+ * picked and filled green with a tick after, so what is coming with you is
+ * readable without hovering. With one slot the tap is the choice, so no box.
+ */
+export declare function PickerGrid({ items, selected, single, atLimit, onChoose, }: {
+    items: GalleryItem[];
+    selected: string[];
+    single: boolean;
+    atLimit: boolean;
+    onChoose: (item: GalleryItem) => void;
+}): import("react").JSX.Element;

package/dist/media/media-picker-grid.js

@@ -0,0 +1,86 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, ImagePlus, Play } from "lucide-react";
+import { motion, useReducedMotion } from "motion/react";
+import { springs, PRESS_SCALE } from "@withpotter/lib/motion";
+import { emptyLabel } from "./media-picker-copy";
+function PickerEmpty({
+  accept,
+  busy,
+  onUpload
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: onUpload,
+      disabled: busy,
+      className: "flex w-full flex-col items-center gap-2 rounded-lg border border-dashed border-[var(--border-default)] py-12 text-center transition-colors duration-[var(--motion-fast)] hover:border-[var(--brand-500)] hover:bg-[var(--interactive-hover)]",
+      children: [
+        /* @__PURE__ */ jsx(ImagePlus, { className: "size-5 text-[var(--text-muted)]" }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--text-secondary)]", children: emptyLabel(accept) }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--text-tertiary)]", children: "or upload from your computer" })
+      ]
+    }
+  );
+}
+function PickerGrid({
+  items,
+  selected,
+  single,
+  atLimit,
+  onChoose
+}) {
+  const reduced = useReducedMotion();
+  return /* @__PURE__ */ jsx("div", { className: "columns-2 gap-3 sm:columns-3", children: items.map((item) => {
+    const isSelected = selected.includes(item.id);
+    const blocked = !single && !isSelected && atLimit;
+    return /* @__PURE__ */ jsxs(
+      motion.button,
+      {
+        type: "button",
+        onClick: () => onChoose(item),
+        "aria-pressed": single ? void 0 : isSelected,
+        "aria-label": item.altText || item.title || void 0,
+        disabled: blocked,
+        whileTap: reduced || blocked ? void 0 : { scale: PRESS_SCALE },
+        transition: springs.snappy,
+        style: item.width && item.height ? { aspectRatio: `${item.width} / ${item.height}` } : void 0,
+        className: `group relative mb-3 block w-full break-inside-avoid overflow-hidden rounded-lg ring-1 transition-shadow duration-[var(--motion-fast)] ${isSelected ? "ring-2 ring-[var(--brand-500)]" : blocked ? "cursor-not-allowed opacity-40 ring-[var(--border-subtle)]" : "ring-[var(--border-subtle)] hover:ring-[var(--border-strong)]"}`,
+        children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: item.thumbnailUrl || item.url,
+              alt: item.altText || item.title || "",
+              loading: "lazy",
+              className: "block w-full"
+            }
+          ),
+          item.type === "video" && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "absolute left-2 top-2 grid size-6 place-items-center rounded-full bg-black/55 text-white",
+              children: /* @__PURE__ */ jsx(Play, {})
+            }
+          ),
+          !single && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: `absolute right-2 top-2 grid size-5 place-items-center rounded-full border transition-colors duration-[var(--motion-fast)] ${isSelected ? "border-[var(--brand-500)] bg-[var(--brand-500)] text-white" : "border-white bg-black/25 text-transparent group-hover:bg-black/40"}`,
+              children: /* @__PURE__ */ jsx(Check, { className: "size-3" })
+            }
+          )
+        ]
+      },
+      item.id
+    );
+  }) });
+}
+export {
+  PickerEmpty,
+  PickerGrid
+};
+//# sourceMappingURL=media-picker-grid.js.map

package/dist/media/media-picker-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/media/media-picker-grid.tsx"],"sourcesContent":["'use client';\n\nimport { Check, ImagePlus, Play } from 'lucide-react';\nimport { motion, useReducedMotion } from 'motion/react';\nimport { springs, PRESS_SCALE } from '@withpotter/lib/motion';\nimport type { GalleryItem } from '@withpotter/lib/api/types';\nimport { emptyLabel, type PickerAccept } from './media-picker-copy';\n\n/** The drop zone shown when the library is empty: click to upload, or drop onto the panel. */\nexport function PickerEmpty({\n  accept,\n  busy,\n  onUpload,\n}: {\n  accept: PickerAccept;\n  busy: boolean;\n  onUpload: () => void;\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onUpload}\n      disabled={busy}\n      className=\"flex w-full flex-col items-center gap-2 rounded-lg border border-dashed border-[var(--border-default)] py-12 text-center transition-colors duration-[var(--motion-fast)] hover:border-[var(--brand-500)] hover:bg-[var(--interactive-hover)]\"\n    >\n      <ImagePlus className=\"size-5 text-[var(--text-muted)]\" />\n      <span className=\"text-sm text-[var(--text-secondary)]\">{emptyLabel(accept)}</span>\n      <span className=\"text-sm text-[var(--text-tertiary)]\">or upload from your computer</span>\n    </button>\n  );\n}\n\n/**\n * The library in columns at each picture's real shape: a set of photographs is\n * not a set of squares, and cropping them here is a promise the page does not\n * keep. With more than one slot, every tile shows a round checkbox, empty until\n * picked and filled green with a tick after, so what is coming with you is\n * readable without hovering. With one slot the tap is the choice, so no box.\n */\nexport function PickerGrid({\n  items,\n  selected,\n  single,\n  atLimit,\n  onChoose,\n}: {\n  items: GalleryItem[];\n  selected: string[];\n  single: boolean;\n  atLimit: boolean;\n  onChoose: (item: GalleryItem) => void;\n}) {\n  const reduced = useReducedMotion();\n  return (\n    <div className=\"columns-2 gap-3 sm:columns-3\">\n      {items.map((item) => {\n        const isSelected = selected.includes(item.id);\n        const blocked = !single && !isSelected && atLimit;\n        return (\n          <motion.button\n            key={item.id}\n            type=\"button\"\n            onClick={() => onChoose(item)}\n            aria-pressed={single ? undefined : isSelected}\n            aria-label={item.altText || item.title || undefined}\n            disabled={blocked}\n            whileTap={reduced || blocked ? undefined : { scale: PRESS_SCALE }}\n            transition={springs.snappy}\n            style={\n              item.width && item.height\n                ? { aspectRatio: `${item.width} / ${item.height}` }\n                : undefined\n            }\n            className={`group relative mb-3 block w-full break-inside-avoid overflow-hidden rounded-lg ring-1 transition-shadow duration-[var(--motion-fast)] ${\n              isSelected\n                ? 'ring-2 ring-[var(--brand-500)]'\n                : blocked\n                  ? 'cursor-not-allowed opacity-40 ring-[var(--border-subtle)]'\n                  : 'ring-[var(--border-subtle)] hover:ring-[var(--border-strong)]'\n            }`}\n          >\n            {/* eslint-disable-next-line @next/next/no-img-element */}\n            <img\n              src={item.thumbnailUrl || item.url}\n              alt={item.altText || item.title || ''}\n              loading=\"lazy\"\n              className=\"block w-full\"\n            />\n            {/* A video and a photograph are not interchangeable (a cover cannot\n                be a video), so the tile says which it is before it is picked. */}\n            {item.type === 'video' && (\n              <span\n                aria-hidden\n                className=\"absolute left-2 top-2 grid size-6 place-items-center rounded-full bg-black/55 text-white\"\n              >\n                <Play />\n              </span>\n            )}\n            {!single && (\n              <span\n                aria-hidden\n                className={`absolute right-2 top-2 grid size-5 place-items-center rounded-full border transition-colors duration-[var(--motion-fast)] ${\n                  isSelected\n                    ? 'border-[var(--brand-500)] bg-[var(--brand-500)] text-white'\n                    : 'border-white bg-black/25 text-transparent group-hover:bg-black/40'\n                }`}\n              >\n                <Check className=\"size-3\" />\n              </span>\n            )}\n          </motion.button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";AAmBI,SAME,KANF;AAjBJ,SAAS,OAAO,WAAW,YAAY;AACvC,SAAS,QAAQ,wBAAwB;AACzC,SAAS,SAAS,mBAAmB;AAErC,SAAS,kBAAqC;AAGvC,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,WAAU;AAAA,MAEV;AAAA,4BAAC,aAAU,WAAU,mCAAkC;AAAA,QACvD,oBAAC,UAAK,WAAU,wCAAwC,qBAAW,MAAM,GAAE;AAAA,QAC3E,oBAAC,UAAK,WAAU,uCAAsC,0CAA4B;AAAA;AAAA;AAAA,EACpF;AAEJ;AASO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,QAAM,UAAU,iBAAiB;AACjC,SACE,oBAAC,SAAI,WAAU,gCACZ,gBAAM,IAAI,CAAC,SAAS;AACnB,UAAM,aAAa,SAAS,SAAS,KAAK,EAAE;AAC5C,UAAM,UAAU,CAAC,UAAU,CAAC,cAAc;AAC1C,WACE;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QAEC,MAAK;AAAA,QACL,SAAS,MAAM,SAAS,IAAI;AAAA,QAC5B,gBAAc,SAAS,SAAY;AAAA,QACnC,cAAY,KAAK,WAAW,KAAK,SAAS;AAAA,QAC1C,UAAU;AAAA,QACV,UAAU,WAAW,UAAU,SAAY,EAAE,OAAO,YAAY;AAAA,QAChE,YAAY,QAAQ;AAAA,QACpB,OACE,KAAK,SAAS,KAAK,SACf,EAAE,aAAa,GAAG,KAAK,KAAK,MAAM,KAAK,MAAM,GAAG,IAChD;AAAA,QAEN,WAAW,yIACT,aACI,mCACA,UACE,8DACA,+DACR;AAAA,QAGA;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,KAAK,KAAK,gBAAgB,KAAK;AAAA,cAC/B,KAAK,KAAK,WAAW,KAAK,SAAS;AAAA,cACnC,SAAQ;AAAA,cACR,WAAU;AAAA;AAAA,UACZ;AAAA,UAGC,KAAK,SAAS,WACb;AAAA,YAAC;AAAA;AAAA,cACC,eAAW;AAAA,cACX,WAAU;AAAA,cAEV,8BAAC,QAAK;AAAA;AAAA,UACR;AAAA,UAED,CAAC,UACA;AAAA,YAAC;AAAA;AAAA,cACC,eAAW;AAAA,cACX,WAAW,6HACT,aACI,+DACA,mEACN;AAAA,cAEA,8BAAC,SAAM,WAAU,UAAS;AAAA;AAAA,UAC5B;AAAA;AAAA;AAAA,MAhDG,KAAK;AAAA,IAkDZ;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}

package/dist/media/media-picker-remember.d.ts

@@ -0,0 +1,11 @@
+import type { GalleryItem } from '@withpotter/lib/api/types';
+/**
+ * An upload is a picture the merchant has now, so it joins the library rather
+ * than living only on whichever page it was dropped onto. It lands `hidden`:
+ * in your photos, reachable from every picker, and NOT published onto the
+ * public gallery page, which is a decision the merchant makes on that screen.
+ *
+ * If the library rejects it we still hand back the URL. The file uploaded; the
+ * picture belongs where it was put whether or not the catalogue took a copy.
+ */
+export declare function remember(slug: string | undefined, url: string, name: string, type: 'image' | 'video', width?: number, height?: number): Promise<GalleryItem>;

package/dist/media/media-picker-remember.js

@@ -0,0 +1,34 @@
+import { galleryApi } from "@withpotter/lib/api/gallery";
+async function remember(slug, url, name, type, width, height) {
+  const local = {
+    id: `upload-${url}`,
+    url,
+    thumbnailUrl: url,
+    title: name,
+    type,
+    status: "hidden",
+    sortOrder: 0,
+    featured: false,
+    isBeforeAfter: false,
+    width,
+    height,
+    createdAt: (/* @__PURE__ */ new Date()).toISOString()
+  };
+  if (!slug) return local;
+  try {
+    return await galleryApi.create(slug, {
+      url,
+      title: name,
+      type,
+      status: "hidden",
+      width,
+      height
+    });
+  } catch {
+    return local;
+  }
+}
+export {
+  remember
+};
+//# sourceMappingURL=media-picker-remember.js.map

package/dist/media/media-picker-remember.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/media/media-picker-remember.ts"],"sourcesContent":["import { galleryApi } from '@withpotter/lib/api/gallery';\nimport type { GalleryItem } from '@withpotter/lib/api/types';\n\n/**\n * An upload is a picture the merchant has now, so it joins the library rather\n * than living only on whichever page it was dropped onto. It lands `hidden`:\n * in your photos, reachable from every picker, and NOT published onto the\n * public gallery page, which is a decision the merchant makes on that screen.\n *\n * If the library rejects it we still hand back the URL. The file uploaded; the\n * picture belongs where it was put whether or not the catalogue took a copy.\n */\nexport async function remember(\n  slug: string | undefined,\n  url: string,\n  name: string,\n  type: 'image' | 'video',\n  width?: number,\n  height?: number,\n): Promise<GalleryItem> {\n  const local: GalleryItem = {\n    id: `upload-${url}`,\n    url,\n    thumbnailUrl: url,\n    title: name,\n    type,\n    status: 'hidden',\n    sortOrder: 0,\n    featured: false,\n    isBeforeAfter: false,\n    width,\n    height,\n    createdAt: new Date().toISOString(),\n  };\n  if (!slug) return local;\n  try {\n    return await galleryApi.create(slug, {\n      url,\n      title: name,\n      type,\n      status: 'hidden',\n      width,\n      height,\n    });\n  } catch {\n    return local;\n  }\n}\n"],"mappings":"AAAA,SAAS,kBAAkB;AAY3B,eAAsB,SACpB,MACA,KACA,MACA,MACA,OACA,QACsB;AACtB,QAAM,QAAqB;AAAA,IACzB,IAAI,UAAU,GAAG;AAAA,IACjB;AAAA,IACA,cAAc;AAAA,IACd,OAAO;AAAA,IACP;AAAA,IACA,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,UAAU;AAAA,IACV,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,YAAW,oBAAI,KAAK,GAAE,YAAY;AAAA,EACpC;AACA,MAAI,CAAC,KAAM,QAAO;AAClB,MAAI;AACF,WAAO,MAAM,WAAW,OAAO,MAAM;AAAA,MACnC;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH,QAAQ;AACN,WAAO;AAAA,EACT;AACF;","names":[]}

package/dist/media/use-picker-upload.d.ts

@@ -0,0 +1,23 @@
+import type { GalleryItem } from '@withpotter/lib/api/types';
+import { type PickerAccept } from './media-picker-copy';
+/**
+ * Uploads from the picker, in a batch: dropping four photos onto a picker that
+ * takes four keeps all four. Files are screened here rather than at the server,
+ * so a 300MB video is refused before it goes up. Each upload joins the library
+ * (see `remember`) and is handed to `onUploaded`.
+ */
+export declare function usePickerUpload({ slug, accept, single, remaining, selectedCount, onUploaded, }: {
+    slug: string | undefined;
+    accept: PickerAccept;
+    single: boolean;
+    remaining: number;
+    selectedCount: number;
+    onUploaded: (added: GalleryItem[]) => void;
+}): {
+    input: import("react").RefObject<HTMLInputElement | null>;
+    busy: boolean;
+    problem: string | null;
+    setProblem: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+    take: (files: File[]) => Promise<void>;
+    open: () => void | undefined;
+};

package/dist/media/use-picker-upload.js

@@ -0,0 +1,51 @@
+"use client";
+import { useRef, useState } from "react";
+import { uploadImage } from "@withpotter/lib/media-service";
+import { screenFiles } from "@withpotter/lib/file-intake";
+import { ACCEPT, MAX_SIZE_MB } from "./media-picker-copy";
+import { remember } from "./media-picker-remember";
+function usePickerUpload({
+  slug,
+  accept,
+  single,
+  remaining,
+  selectedCount,
+  onUploaded
+}) {
+  const [busy, setBusy] = useState(false);
+  const [problem, setProblem] = useState(null);
+  const input = useRef(null);
+  const take = async (files) => {
+    if (!files.length || busy) return;
+    const screened = screenFiles(files, {
+      accept: ACCEPT[accept],
+      maxSizeMb: MAX_SIZE_MB[accept],
+      maxFiles: single ? 1 : remaining,
+      currentCount: single ? 0 : selectedCount
+    });
+    setProblem(screened.message ?? null);
+    if (!screened.accepted.length) return;
+    setBusy(true);
+    try {
+      const added = [];
+      for (const file of screened.accepted) {
+        const result = await uploadImage(file);
+        const type = result.resourceType === "video" ? "video" : "image";
+        added.push(
+          await remember(slug, result.url, file.name, type, result.width, result.height)
+        );
+      }
+      onUploaded(added);
+    } catch (err) {
+      setProblem(err instanceof Error ? err.message : "Couldn't upload that file. Try again.");
+    } finally {
+      setBusy(false);
+      if (input.current) input.current.value = "";
+    }
+  };
+  return { input, busy, problem, setProblem, take, open: () => input.current?.click() };
+}
+export {
+  usePickerUpload
+};
+//# sourceMappingURL=use-picker-upload.js.map

package/dist/media/use-picker-upload.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/media/use-picker-upload.ts"],"sourcesContent":["'use client';\n\nimport { useRef, useState } from 'react';\nimport { uploadImage } from '@withpotter/lib/media-service';\nimport { screenFiles } from '@withpotter/lib/file-intake';\nimport type { GalleryItem } from '@withpotter/lib/api/types';\nimport { ACCEPT, MAX_SIZE_MB, type PickerAccept } from './media-picker-copy';\nimport { remember } from './media-picker-remember';\n\n/**\n * Uploads from the picker, in a batch: dropping four photos onto a picker that\n * takes four keeps all four. Files are screened here rather than at the server,\n * so a 300MB video is refused before it goes up. Each upload joins the library\n * (see `remember`) and is handed to `onUploaded`.\n */\nexport function usePickerUpload({\n  slug,\n  accept,\n  single,\n  remaining,\n  selectedCount,\n  onUploaded,\n}: {\n  slug: string | undefined;\n  accept: PickerAccept;\n  single: boolean;\n  remaining: number;\n  selectedCount: number;\n  onUploaded: (added: GalleryItem[]) => void;\n}) {\n  const [busy, setBusy] = useState(false);\n  const [problem, setProblem] = useState<string | null>(null);\n  const input = useRef<HTMLInputElement>(null);\n\n  const take = async (files: File[]) => {\n    if (!files.length || busy) return;\n    const screened = screenFiles(files, {\n      accept: ACCEPT[accept],\n      maxSizeMb: MAX_SIZE_MB[accept],\n      maxFiles: single ? 1 : remaining,\n      currentCount: single ? 0 : selectedCount,\n    });\n    setProblem(screened.message ?? null);\n    if (!screened.accepted.length) return;\n\n    setBusy(true);\n    try {\n      const added: GalleryItem[] = [];\n      for (const file of screened.accepted) {\n        const result = await uploadImage(file);\n        const type = result.resourceType === 'video' ? 'video' : 'image';\n        added.push(\n          await remember(slug, result.url, file.name, type, result.width, result.height),\n        );\n      }\n      onUploaded(added);\n    } catch (err) {\n      setProblem(err instanceof Error ? err.message : \"Couldn't upload that file. Try again.\");\n    } finally {\n      setBusy(false);\n      if (input.current) input.current.value = '';\n    }\n  };\n\n  return { input, busy, problem, setProblem, take, open: () => input.current?.click() };\n}\n"],"mappings":";AAEA,SAAS,QAAQ,gBAAgB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAE5B,SAAS,QAAQ,mBAAsC;AACvD,SAAS,gBAAgB;AAQlB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AACD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAwB,IAAI;AAC1D,QAAM,QAAQ,OAAyB,IAAI;AAE3C,QAAM,OAAO,OAAO,UAAkB;AACpC,QAAI,CAAC,MAAM,UAAU,KAAM;AAC3B,UAAM,WAAW,YAAY,OAAO;AAAA,MAClC,QAAQ,OAAO,MAAM;AAAA,MACrB,WAAW,YAAY,MAAM;AAAA,MAC7B,UAAU,SAAS,IAAI;AAAA,MACvB,cAAc,SAAS,IAAI;AAAA,IAC7B,CAAC;AACD,eAAW,SAAS,WAAW,IAAI;AACnC,QAAI,CAAC,SAAS,SAAS,OAAQ;AAE/B,YAAQ,IAAI;AACZ,QAAI;AACF,YAAM,QAAuB,CAAC;AAC9B,iBAAW,QAAQ,SAAS,UAAU;AACpC,cAAM,SAAS,MAAM,YAAY,IAAI;AACrC,cAAM,OAAO,OAAO,iBAAiB,UAAU,UAAU;AACzD,cAAM;AAAA,UACJ,MAAM,SAAS,MAAM,OAAO,KAAK,KAAK,MAAM,MAAM,OAAO,OAAO,OAAO,MAAM;AAAA,QAC/E;AAAA,MACF;AACA,iBAAW,KAAK;AAAA,IAClB,SAAS,KAAK;AACZ,iBAAW,eAAe,QAAQ,IAAI,UAAU,uCAAuC;AAAA,IACzF,UAAE;AACA,cAAQ,KAAK;AACb,UAAI,MAAM,QAAS,OAAM,QAAQ,QAAQ;AAAA,IAC3C;AAAA,EACF;AAEA,SAAO,EAAE,OAAO,MAAM,SAAS,YAAY,MAAM,MAAM,MAAM,MAAM,SAAS,MAAM,EAAE;AACtF;","names":[]}

package/dist/mobile/close-early.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Shut for the rest of the day, from the phone, in one press.
+ *
+ * A power cut at 3pm meant editing seven days of opening hours and then
+ * remembering to put them back. Most merchants will do neither, so the
+ * storefront kept taking bookings for a business that was shut.
+ *
+ * Writes `settings.closedUntil`, which the booking availability use-case reads
+ * on top of the weekly hours — so the real hours are untouched, and the
+ * business reopens tomorrow on its normal week with nothing to restore.
+ *
+ * Reopening is deliberately one press with no confirmation. Closing is the
+ * cautious direction; a merchant who closed by accident should be able to undo
+ * it instantly, and a merchant who meant it loses nothing by it being easy.
+ */
+export declare function CloseEarly(): import("react").JSX.Element;