@withpotter/components 0.13.0-next.101

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/product-editor/camera/qr-decoder.ts"],"sourcesContent":["/**\n * Reads a QR code off a live video frame.\n *\n * The browser's own BarcodeDetector where there is one (Chrome, Android),\n * and jsQR otherwise (Safari, Firefox). jsQR is loaded only when it is\n * needed, so a phone that can read codes natively never downloads it.\n */\n\ntype Detect = (video: HTMLVideoElement) => Promise<string | null>;\n\ninterface NativeDetector {\n  detect(source: CanvasImageSource): Promise<Array<{ rawValue: string }>>;\n}\ntype NativeDetectorClass = {\n  new (opts: { formats: string[] }): NativeDetector;\n  getSupportedFormats?: () => Promise<string[]>;\n};\n\nasync function nativeDetector(): Promise<Detect | null> {\n  const Ctor = (globalThis as { BarcodeDetector?: NativeDetectorClass })\n    .BarcodeDetector;\n  if (!Ctor) return null;\n  try {\n    const formats = (await Ctor.getSupportedFormats?.()) ?? ['qr_code'];\n    if (!formats.includes('qr_code')) return null;\n    const detector = new Ctor({ formats: ['qr_code'] });\n    return async (video) => {\n      const found = await detector.detect(video);\n      return found[0]?.rawValue ?? null;\n    };\n  } catch {\n    return null;\n  }\n}\n\n/** Frames are scaled down first: jsQR's cost grows with every pixel. */\nconst MAX_SIDE = 640;\n\nasync function jsqrDetector(): Promise<Detect> {\n  const { default: jsQR } = await import('jsqr');\n  const canvas = document.createElement('canvas');\n  const ctx = canvas.getContext('2d', { willReadFrequently: true });\n  return async (video) => {\n    const { videoWidth: w, videoHeight: h } = video;\n    if (!ctx || !w || !h) return null;\n    const scale = Math.min(1, MAX_SIDE / Math.max(w, h));\n    canvas.width = Math.round(w * scale);\n    canvas.height = Math.round(h * scale);\n    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);\n    const { data, width, height } = ctx.getImageData(\n      0,\n      0,\n      canvas.width,\n      canvas.height,\n    );\n    const code = jsQR(data, width, height, {\n      inversionAttempts: 'dontInvert',\n    });\n    return code?.data || null;\n  };\n}\n\nexport async function createQrDetector(): Promise<Detect> {\n  return (await nativeDetector()) ?? (await jsqrDetector());\n}\n"],"mappings":"AAkBA,eAAe,iBAAyC;AACtD,QAAM,OAAQ,WACX;AACH,MAAI,CAAC,KAAM,QAAO;AAClB,MAAI;AACF,UAAM,UAAW,MAAM,KAAK,sBAAsB,KAAM,CAAC,SAAS;AAClE,QAAI,CAAC,QAAQ,SAAS,SAAS,EAAG,QAAO;AACzC,UAAM,WAAW,IAAI,KAAK,EAAE,SAAS,CAAC,SAAS,EAAE,CAAC;AAClD,WAAO,OAAO,UAAU;AACtB,YAAM,QAAQ,MAAM,SAAS,OAAO,KAAK;AACzC,aAAO,MAAM,CAAC,GAAG,YAAY;AAAA,IAC/B;AAAA,EACF,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAGA,MAAM,WAAW;AAEjB,eAAe,eAAgC;AAC7C,QAAM,EAAE,SAAS,KAAK,IAAI,MAAM,OAAO,MAAM;AAC7C,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,QAAM,MAAM,OAAO,WAAW,MAAM,EAAE,oBAAoB,KAAK,CAAC;AAChE,SAAO,OAAO,UAAU;AACtB,UAAM,EAAE,YAAY,GAAG,aAAa,EAAE,IAAI;AAC1C,QAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EAAG,QAAO;AAC7B,UAAM,QAAQ,KAAK,IAAI,GAAG,WAAW,KAAK,IAAI,GAAG,CAAC,CAAC;AACnD,WAAO,QAAQ,KAAK,MAAM,IAAI,KAAK;AACnC,WAAO,SAAS,KAAK,MAAM,IAAI,KAAK;AACpC,QAAI,UAAU,OAAO,GAAG,GAAG,OAAO,OAAO,OAAO,MAAM;AACtD,UAAM,EAAE,MAAM,OAAO,OAAO,IAAI,IAAI;AAAA,MAClC;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AACA,UAAM,OAAO,KAAK,MAAM,OAAO,QAAQ;AAAA,MACrC,mBAAmB;AAAA,IACrB,CAAC;AACD,WAAO,MAAM,QAAQ;AAAA,EACvB;AACF;AAEA,eAAsB,mBAAoC;AACxD,SAAQ,MAAM,eAAe,KAAO,MAAM,aAAa;AACzD;","names":[]}

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

@@ -0,0 +1,10 @@
+export type CameraStatus = 'starting' | 'live' | 'denied' | 'unavailable';
+/**
+ * The rear camera while `on`, released the moment it is not, so the phone's
+ * camera light never stays lit behind a closed view.
+ */
+export declare function useCamera(on: boolean): {
+    videoRef: import("react").RefObject<HTMLVideoElement | null>;
+    status: CameraStatus;
+    takePhoto: () => Promise<File | null>;
+};

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

@@ -0,0 +1,66 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+function useCamera(on) {
+  const videoRef = useRef(null);
+  const [status, setStatus] = useState("starting");
+  useEffect(() => {
+    if (!on) return;
+    let stream = null;
+    let cancelled = false;
+    setStatus("starting");
+    if (!navigator.mediaDevices?.getUserMedia) {
+      setStatus("unavailable");
+      return;
+    }
+    navigator.mediaDevices.getUserMedia({
+      audio: false,
+      video: {
+        facingMode: { ideal: "environment" },
+        width: { ideal: 1920 },
+        height: { ideal: 1080 }
+      }
+    }).then(async (s) => {
+      if (cancelled) {
+        s.getTracks().forEach((t) => t.stop());
+        return;
+      }
+      stream = s;
+      const video = videoRef.current;
+      if (video) {
+        video.srcObject = s;
+        await video.play().catch(() => void 0);
+      }
+      setStatus("live");
+    }).catch((e) => {
+      if (cancelled) return;
+      const name = e instanceof DOMException ? e.name : "";
+      setStatus(
+        name === "NotAllowedError" || name === "SecurityError" ? "denied" : "unavailable"
+      );
+    });
+    return () => {
+      cancelled = true;
+      stream?.getTracks().forEach((t) => t.stop());
+      if (videoRef.current) videoRef.current.srcObject = null;
+    };
+  }, [on]);
+  const takePhoto = useCallback(async () => {
+    const video = videoRef.current;
+    if (!video?.videoWidth) return null;
+    const canvas = document.createElement("canvas");
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    canvas.getContext("2d")?.drawImage(video, 0, 0);
+    const blob = await new Promise(
+      (resolve) => canvas.toBlob(resolve, "image/jpeg", 0.9)
+    );
+    if (!blob) return null;
+    const stamp = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-");
+    return new File([blob], `photo-${stamp}.jpg`, { type: "image/jpeg" });
+  }, []);
+  return { videoRef, status, takePhoto };
+}
+export {
+  useCamera
+};
+//# sourceMappingURL=use-camera.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/product-editor/camera/use-camera.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nexport type CameraStatus = 'starting' | 'live' | 'denied' | 'unavailable';\n\n/**\n * The rear camera while `on`, released the moment it is not, so the phone's\n * camera light never stays lit behind a closed view.\n */\nexport function useCamera(on: boolean) {\n  const videoRef = useRef<HTMLVideoElement>(null);\n  const [status, setStatus] = useState<CameraStatus>('starting');\n\n  useEffect(() => {\n    if (!on) return;\n    let stream: MediaStream | null = null;\n    let cancelled = false;\n    setStatus('starting');\n\n    if (!navigator.mediaDevices?.getUserMedia) {\n      // No camera API at all: an insecure page, or an old browser.\n      setStatus('unavailable');\n      return;\n    }\n\n    navigator.mediaDevices\n      .getUserMedia({\n        audio: false,\n        video: {\n          facingMode: { ideal: 'environment' },\n          width: { ideal: 1920 },\n          height: { ideal: 1080 },\n        },\n      })\n      .then(async (s) => {\n        if (cancelled) {\n          s.getTracks().forEach((t) => t.stop());\n          return;\n        }\n        stream = s;\n        const video = videoRef.current;\n        if (video) {\n          video.srcObject = s;\n          await video.play().catch(() => undefined);\n        }\n        setStatus('live');\n      })\n      .catch((e: unknown) => {\n        if (cancelled) return;\n        const name = e instanceof DOMException ? e.name : '';\n        setStatus(\n          name === 'NotAllowedError' || name === 'SecurityError'\n            ? 'denied'\n            : 'unavailable',\n        );\n      });\n\n    return () => {\n      cancelled = true;\n      stream?.getTracks().forEach((t) => t.stop());\n      if (videoRef.current) videoRef.current.srcObject = null;\n    };\n  }, [on]);\n\n  /** The current frame as a JPEG file, at the camera's full size. */\n  const takePhoto = useCallback(async (): Promise<File | null> => {\n    const video = videoRef.current;\n    if (!video?.videoWidth) return null;\n    const canvas = document.createElement('canvas');\n    canvas.width = video.videoWidth;\n    canvas.height = video.videoHeight;\n    canvas.getContext('2d')?.drawImage(video, 0, 0);\n    const blob = await new Promise<Blob | null>((resolve) =>\n      canvas.toBlob(resolve, 'image/jpeg', 0.9),\n    );\n    if (!blob) return null;\n    const stamp = new Date().toISOString().replace(/[:.]/g, '-');\n    return new File([blob], `photo-${stamp}.jpg`, { type: 'image/jpeg' });\n  }, []);\n\n  return { videoRef, status, takePhoto };\n}\n"],"mappings":";AAEA,SAAS,aAAa,WAAW,QAAQ,gBAAgB;AAQlD,SAAS,UAAU,IAAa;AACrC,QAAM,WAAW,OAAyB,IAAI;AAC9C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAuB,UAAU;AAE7D,YAAU,MAAM;AACd,QAAI,CAAC,GAAI;AACT,QAAI,SAA6B;AACjC,QAAI,YAAY;AAChB,cAAU,UAAU;AAEpB,QAAI,CAAC,UAAU,cAAc,cAAc;AAEzC,gBAAU,aAAa;AACvB;AAAA,IACF;AAEA,cAAU,aACP,aAAa;AAAA,MACZ,OAAO;AAAA,MACP,OAAO;AAAA,QACL,YAAY,EAAE,OAAO,cAAc;AAAA,QACnC,OAAO,EAAE,OAAO,KAAK;AAAA,QACrB,QAAQ,EAAE,OAAO,KAAK;AAAA,MACxB;AAAA,IACF,CAAC,EACA,KAAK,OAAO,MAAM;AACjB,UAAI,WAAW;AACb,UAAE,UAAU,EAAE,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC;AACrC;AAAA,MACF;AACA,eAAS;AACT,YAAM,QAAQ,SAAS;AACvB,UAAI,OAAO;AACT,cAAM,YAAY;AAClB,cAAM,MAAM,KAAK,EAAE,MAAM,MAAM,MAAS;AAAA,MAC1C;AACA,gBAAU,MAAM;AAAA,IAClB,CAAC,EACA,MAAM,CAAC,MAAe;AACrB,UAAI,UAAW;AACf,YAAM,OAAO,aAAa,eAAe,EAAE,OAAO;AAClD;AAAA,QACE,SAAS,qBAAqB,SAAS,kBACnC,WACA;AAAA,MACN;AAAA,IACF,CAAC;AAEH,WAAO,MAAM;AACX,kBAAY;AACZ,cAAQ,UAAU,EAAE,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC;AAC3C,UAAI,SAAS,QAAS,UAAS,QAAQ,YAAY;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,EAAE,CAAC;AAGP,QAAM,YAAY,YAAY,YAAkC;AAC9D,UAAM,QAAQ,SAAS;AACvB,QAAI,CAAC,OAAO,WAAY,QAAO;AAC/B,UAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,WAAO,QAAQ,MAAM;AACrB,WAAO,SAAS,MAAM;AACtB,WAAO,WAAW,IAAI,GAAG,UAAU,OAAO,GAAG,CAAC;AAC9C,UAAM,OAAO,MAAM,IAAI;AAAA,MAAqB,CAAC,YAC3C,OAAO,OAAO,SAAS,cAAc,GAAG;AAAA,IAC1C;AACA,QAAI,CAAC,KAAM,QAAO;AAClB,UAAM,SAAQ,oBAAI,KAAK,GAAE,YAAY,EAAE,QAAQ,SAAS,GAAG;AAC3D,WAAO,IAAI,KAAK,CAAC,IAAI,GAAG,SAAS,KAAK,QAAQ,EAAE,MAAM,aAAa,CAAC;AAAA,EACtE,GAAG,CAAC,CAAC;AAEL,SAAO,EAAE,UAAU,QAAQ,UAAU;AACvC;","names":[]}

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

@@ -0,0 +1,8 @@
+import type { ProductGalleryItem } from '@withpotter/lib/media-utils';
+import type { ScanOutcome } from './camera-capture';
+import { type ProductScanPatch } from './product-qr';
+/**
+ * A scanned code into the open item: its pictures into Media here, and its
+ * name, price and words handed to the editor through `onDetails`.
+ */
+export declare function useProductScan(galleryItems: ProductGalleryItem[], onGalleryItemsChange: React.Dispatch<React.SetStateAction<ProductGalleryItem[]>>, onDetails?: (patch: ProductScanPatch) => void): (text: string) => Promise<ScanOutcome>;

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

@@ -0,0 +1,30 @@
+"use client";
+import { useCallback, useEffect, useRef } from "react";
+import {
+  describePatch,
+  NOT_A_PRODUCT,
+  productFromScan,
+  toScanPatch
+} from "./product-qr";
+function useProductScan(galleryItems, onGalleryItemsChange, onDetails) {
+  const itemsRef = useRef(galleryItems);
+  useEffect(() => {
+    itemsRef.current = galleryItems;
+  });
+  return useCallback(
+    async (text) => {
+      const product = await productFromScan(text);
+      if (!product) return { ok: false, message: NOT_A_PRODUCT };
+      const patch = toScanPatch(product, itemsRef.current);
+      if (patch.media.length)
+        onGalleryItemsChange((prev) => [...prev, ...patch.media]);
+      onDetails?.(patch);
+      return { ok: true, message: describePatch(patch) };
+    },
+    [onGalleryItemsChange, onDetails]
+  );
+}
+export {
+  useProductScan
+};
+//# sourceMappingURL=use-product-scan.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/product-editor/camera/use-product-scan.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useRef } from 'react';\nimport type { ProductGalleryItem } from '@withpotter/lib/media-utils';\nimport type { ScanOutcome } from './camera-capture';\nimport {\n  describePatch,\n  NOT_A_PRODUCT,\n  productFromScan,\n  toScanPatch,\n  type ProductScanPatch,\n} from './product-qr';\n\n/**\n * A scanned code into the open item: its pictures into Media here, and its\n * name, price and words handed to the editor through `onDetails`.\n */\nexport function useProductScan(\n  galleryItems: ProductGalleryItem[],\n  onGalleryItemsChange: React.Dispatch<\n    React.SetStateAction<ProductGalleryItem[]>\n  >,\n  onDetails?: (patch: ProductScanPatch) => void,\n) {\n  const itemsRef = useRef(galleryItems);\n  useEffect(() => {\n    itemsRef.current = galleryItems;\n  });\n\n  return useCallback(\n    async (text: string): Promise<ScanOutcome> => {\n      const product = await productFromScan(text);\n      if (!product) return { ok: false, message: NOT_A_PRODUCT };\n      const patch = toScanPatch(product, itemsRef.current);\n      if (patch.media.length)\n        onGalleryItemsChange((prev) => [...prev, ...patch.media]);\n      onDetails?.(patch);\n      return { ok: true, message: describePatch(patch) };\n    },\n    [onGalleryItemsChange, onDetails],\n  );\n}\n"],"mappings":";AAEA,SAAS,aAAa,WAAW,cAAc;AAG/C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAMA,SAAS,eACd,cACA,sBAGA,WACA;AACA,QAAM,WAAW,OAAO,YAAY;AACpC,YAAU,MAAM;AACd,aAAS,UAAU;AAAA,EACrB,CAAC;AAED,SAAO;AAAA,IACL,OAAO,SAAuC;AAC5C,YAAM,UAAU,MAAM,gBAAgB,IAAI;AAC1C,UAAI,CAAC,QAAS,QAAO,EAAE,IAAI,OAAO,SAAS,cAAc;AACzD,YAAM,QAAQ,YAAY,SAAS,SAAS,OAAO;AACnD,UAAI,MAAM,MAAM;AACd,6BAAqB,CAAC,SAAS,CAAC,GAAG,MAAM,GAAG,MAAM,KAAK,CAAC;AAC1D,kBAAY,KAAK;AACjB,aAAO,EAAE,IAAI,MAAM,SAAS,cAAc,KAAK,EAAE;AAAA,IACnD;AAAA,IACA,CAAC,sBAAsB,SAAS;AAAA,EAClC;AACF;","names":[]}

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

@@ -0,0 +1,5 @@
+/**
+ * Looks for a QR code in the video for as long as `active`, and hands each
+ * new one to `onCode`. Waits for `onCode` to finish before looking again.
+ */
+export declare function useQrScan(videoRef: React.RefObject<HTMLVideoElement | null>, active: boolean, onCode: (text: string) => Promise<void>): void;

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

@@ -0,0 +1,42 @@
+"use client";
+import { useEffect, useRef } from "react";
+import { createQrDetector } from "./qr-decoder";
+const EVERY_MS = 250;
+const SAME_CODE_QUIET_MS = 4e3;
+function useQrScan(videoRef, active, onCode) {
+  const onCodeRef = useRef(onCode);
+  useEffect(() => {
+    onCodeRef.current = onCode;
+  });
+  useEffect(() => {
+    if (!active) return;
+    let stopped = false;
+    let timer;
+    let last = { text: "", at: 0 };
+    const tick = async (detect) => {
+      if (stopped) return;
+      const video = videoRef.current;
+      let text = null;
+      try {
+        if (video && video.readyState >= 2) text = await detect(video);
+      } catch {
+      }
+      const now = Date.now();
+      if (text && !stopped) {
+        const fresh = text !== last.text || now - last.at > SAME_CODE_QUIET_MS;
+        last = { text, at: now };
+        if (fresh) await onCodeRef.current(text);
+      }
+      if (!stopped) timer = setTimeout(() => void tick(detect), EVERY_MS);
+    };
+    createQrDetector().then((detect) => void tick(detect)).catch(() => void 0);
+    return () => {
+      stopped = true;
+      clearTimeout(timer);
+    };
+  }, [active, videoRef]);
+}
+export {
+  useQrScan
+};
+//# sourceMappingURL=use-qr-scan.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/product-editor/camera/use-qr-scan.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef } from 'react';\nimport { createQrDetector } from './qr-decoder';\n\nconst EVERY_MS = 250;\n/** The same code held in view is handled once, not four times a second. */\nconst SAME_CODE_QUIET_MS = 4000;\n\n/**\n * Looks for a QR code in the video for as long as `active`, and hands each\n * new one to `onCode`. Waits for `onCode` to finish before looking again.\n */\nexport function useQrScan(\n  videoRef: React.RefObject<HTMLVideoElement | null>,\n  active: boolean,\n  onCode: (text: string) => Promise<void>,\n) {\n  const onCodeRef = useRef(onCode);\n  useEffect(() => {\n    onCodeRef.current = onCode;\n  });\n\n  useEffect(() => {\n    if (!active) return;\n    let stopped = false;\n    let timer: ReturnType<typeof setTimeout> | undefined;\n    let last = { text: '', at: 0 };\n\n    const tick = async (\n      detect: (v: HTMLVideoElement) => Promise<string | null>,\n    ) => {\n      if (stopped) return;\n      const video = videoRef.current;\n      let text: string | null = null;\n      try {\n        if (video && video.readyState >= 2) text = await detect(video);\n      } catch {\n        // A frame that cannot be read is skipped; the next one may be fine.\n      }\n      const now = Date.now();\n      if (text && !stopped) {\n        const fresh = text !== last.text || now - last.at > SAME_CODE_QUIET_MS;\n        // Still in view keeps it quiet; it is new again once it has left.\n        last = { text, at: now };\n        if (fresh) await onCodeRef.current(text);\n      }\n      if (!stopped) timer = setTimeout(() => void tick(detect), EVERY_MS);\n    };\n\n    createQrDetector()\n      .then((detect) => void tick(detect))\n      .catch(() => undefined); // No decoder: the shutter still works.\n\n    return () => {\n      stopped = true;\n      clearTimeout(timer);\n    };\n  }, [active, videoRef]);\n}\n"],"mappings":";AAEA,SAAS,WAAW,cAAc;AAClC,SAAS,wBAAwB;AAEjC,MAAM,WAAW;AAEjB,MAAM,qBAAqB;AAMpB,SAAS,UACd,UACA,QACA,QACA;AACA,QAAM,YAAY,OAAO,MAAM;AAC/B,YAAU,MAAM;AACd,cAAU,UAAU;AAAA,EACtB,CAAC;AAED,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AACb,QAAI,UAAU;AACd,QAAI;AACJ,QAAI,OAAO,EAAE,MAAM,IAAI,IAAI,EAAE;AAE7B,UAAM,OAAO,OACX,WACG;AACH,UAAI,QAAS;AACb,YAAM,QAAQ,SAAS;AACvB,UAAI,OAAsB;AAC1B,UAAI;AACF,YAAI,SAAS,MAAM,cAAc,EAAG,QAAO,MAAM,OAAO,KAAK;AAAA,MAC/D,QAAQ;AAAA,MAER;AACA,YAAM,MAAM,KAAK,IAAI;AACrB,UAAI,QAAQ,CAAC,SAAS;AACpB,cAAM,QAAQ,SAAS,KAAK,QAAQ,MAAM,KAAK,KAAK;AAEpD,eAAO,EAAE,MAAM,IAAI,IAAI;AACvB,YAAI,MAAO,OAAM,UAAU,QAAQ,IAAI;AAAA,MACzC;AACA,UAAI,CAAC,QAAS,SAAQ,WAAW,MAAM,KAAK,KAAK,MAAM,GAAG,QAAQ;AAAA,IACpE;AAEA,qBAAiB,EACd,KAAK,CAAC,WAAW,KAAK,KAAK,MAAM,CAAC,EAClC,MAAM,MAAM,MAAS;AAExB,WAAO,MAAM;AACX,gBAAU;AACV,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,QAAQ,QAAQ,CAAC;AACvB;","names":[]}

package/dist/product-editor/floating-save-bar.d.ts

@@ -0,0 +1 @@
+export { FloatingSaveBar } from '@withpotter/components/editor-shared/floating-save-bar';

package/dist/product-editor/floating-save-bar.js

@@ -0,0 +1,5 @@
+import { FloatingSaveBar } from "@withpotter/components/editor-shared/floating-save-bar";
+export {
+  FloatingSaveBar
+};
+//# sourceMappingURL=floating-save-bar.js.map

package/dist/product-editor/floating-save-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/product-editor/floating-save-bar.tsx"],"sourcesContent":["// Re-export from shared location for backward compatibility\n// Product editor uses `singularName` prop, shared uses `entityName`\nexport { FloatingSaveBar } from '@withpotter/components/editor-shared/floating-save-bar';\n"],"mappings":"AAEA,SAAS,uBAAuB;","names":[]}

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

@@ -0,0 +1,2 @@
+export { ProductEditorPage } from './product-editor-page';
+export { ProductEditor } from './product-editor';

package/dist/product-editor/index.js

@@ -0,0 +1,7 @@
+import { ProductEditorPage } from "./product-editor-page";
+import { ProductEditor } from "./product-editor";
+export {
+  ProductEditor,
+  ProductEditorPage
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/product-editor/index.ts"],"sourcesContent":["export { ProductEditorPage } from './product-editor-page';\nexport { ProductEditor } from './product-editor';\n"],"mappings":"AAAA,SAAS,yBAAyB;AAClC,SAAS,qBAAqB;","names":[]}

package/dist/product-editor/mobile-category-picker.d.ts

@@ -0,0 +1,20 @@
+export declare function MobileCategoryPicker({ categories, onChange, categoryKey, tenantCategories, onCreateCategory, onDeleteCategory, }: {
+    categories: string[];
+    onChange: (v: string[]) => void;
+    categoryKey: string;
+    tenantCategories: Record<string, {
+        value: string;
+        label: string;
+        sortOrder?: number;
+    }[]>;
+    onCreateCategory?: (label: string) => void;
+    onDeleteCategory?: (value: string) => void;
+}): import("react").JSX.Element;
+/**
+ * PublicLinkRow — replaces the raw "slug" field with a friendlier preview.
+ *
+ * Shows the live URL the customer will see (e.g. `mystore.com/product/[slug]`)
+ * and a single action: "Generate" (when slug has been manually edited or is
+ * empty, regenerates from title) or "Edit" (opens an inline edit input). The
+ * word "slug" never appears in the UI.
+ */

package/dist/product-editor/mobile-category-picker.js

@@ -0,0 +1,136 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Check, Plus, X } from "lucide-react";
+import { Button } from "@withpotter/ui-kit/button";
+import { Input, EmptyNote } from "@withpotter/ui-kit";
+function MobileCategoryPicker({
+  categories,
+  onChange,
+  categoryKey,
+  tenantCategories,
+  onCreateCategory,
+  onDeleteCategory
+}) {
+  const options = useMemo(() => {
+    const raw = tenantCategories[categoryKey] || [];
+    return [...raw].sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0));
+  }, [tenantCategories, categoryKey]);
+  const [isCreating, setIsCreating] = useState(false);
+  const [newLabel, setNewLabel] = useState("");
+  const toggle = (value) => {
+    if (categories.includes(value)) {
+      onChange(categories.filter((c) => c !== value));
+    } else {
+      onChange([...categories, value]);
+    }
+  };
+  const handleCreate = () => {
+    const label = newLabel.trim();
+    if (!label) return;
+    onCreateCategory?.(label);
+    const slug = label.toLowerCase().replace(/[^\w\s-]/g, "").replace(/[\s_]+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
+    if (slug && !categories.includes(slug)) {
+      onChange([...categories, slug]);
+    }
+    setNewLabel("");
+    setIsCreating(false);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    options.length === 0 && !isCreating && /* @__PURE__ */ jsx(EmptyNote, { children: "No categories yet" }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: options.map((opt) => {
+      const isSelected = categories.includes(opt.value);
+      return /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => toggle(opt.value),
+            className: `flex items-center gap-2 px-3 py-2 rounded-lg border transition-colors text-left ${isSelected ? "border-brand-500 bg-brand-500/5" : "border-[var(--border-default)] hover:border-[var(--border-strong)]"}`,
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: `text-sm font-medium whitespace-nowrap ${isSelected ? "text-[var(--text-primary)]" : "text-[var(--text-secondary)]"}`,
+                  children: opt.label
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: `flex-shrink-0 flex items-center justify-center w-[18px] h-[18px] rounded-[3px] border-2 transition-colors ${isSelected ? "bg-brand-500 border-brand-500" : "border-[var(--border-strong)]"}`,
+                  children: isSelected && /* @__PURE__ */ jsx(Check, { className: "text-white", strokeWidth: 3 })
+                }
+              )
+            ]
+          }
+        ),
+        onDeleteCategory && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              onDeleteCategory(opt.value);
+            },
+            className: "absolute -top-1.5 -right-1.5 hidden group-hover:flex items-center justify-center w-5 h-5 rounded-full bg-[var(--error)] text-white hover:bg-red-700 transition-colors shadow-sm",
+            title: `Delete "${opt.label}"`,
+            children: /* @__PURE__ */ jsx(X, { strokeWidth: 2.5 })
+          }
+        )
+      ] }, opt.value);
+    }) }),
+    onCreateCategory && !isCreating && /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "secondary",
+        className: "border-dashed hover:border-[var(--border-strong)]",
+        onClick: () => setIsCreating(true),
+        children: [
+          /* @__PURE__ */ jsx(Plus, {}),
+          "Add category"
+        ]
+      }
+    ),
+    isCreating && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          autoFocus: true,
+          type: "text",
+          value: newLabel,
+          onChange: (e) => setNewLabel(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              handleCreate();
+            }
+            if (e.key === "Escape") {
+              setIsCreating(false);
+              setNewLabel("");
+            }
+          },
+          placeholder: "Category name...",
+          className: "flex-1"
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { onClick: handleCreate, disabled: !newLabel.trim(), children: "Add" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setIsCreating(false);
+            setNewLabel("");
+          },
+          className: "px-2 py-2 text-xs text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors",
+          children: "Cancel"
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  MobileCategoryPicker
+};
+//# sourceMappingURL=mobile-category-picker.js.map

package/dist/product-editor/mobile-category-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/product-editor/mobile-category-picker.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo, useState } from 'react';\nimport { Check, Plus, X } from 'lucide-react';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { Input, inputErrorClass, EmptyNote } from '@withpotter/ui-kit';\n\nexport function MobileCategoryPicker({\n  categories,\n  onChange,\n  categoryKey,\n  tenantCategories,\n  onCreateCategory,\n  onDeleteCategory,\n}: {\n  categories: string[];\n  onChange: (v: string[]) => void;\n  categoryKey: string;\n  tenantCategories: Record<\n    string,\n    { value: string; label: string; sortOrder?: number }[]\n  >;\n  onCreateCategory?: (label: string) => void;\n  onDeleteCategory?: (value: string) => void;\n}) {\n  const options = useMemo(() => {\n    const raw = tenantCategories[categoryKey] || [];\n    return [...raw].sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0));\n  }, [tenantCategories, categoryKey]);\n\n  const [isCreating, setIsCreating] = useState(false);\n  const [newLabel, setNewLabel] = useState('');\n\n  const toggle = (value: string) => {\n    if (categories.includes(value)) {\n      onChange(categories.filter((c) => c !== value));\n    } else {\n      onChange([...categories, value]);\n    }\n  };\n\n  const handleCreate = () => {\n    const label = newLabel.trim();\n    if (!label) return;\n    onCreateCategory?.(label);\n    const slug = label\n      .toLowerCase()\n      .replace(/[^\\w\\s-]/g, '')\n      .replace(/[\\s_]+/g, '-')\n      .replace(/-+/g, '-')\n      .replace(/^-|-$/g, '');\n    if (slug && !categories.includes(slug)) {\n      onChange([...categories, slug]);\n    }\n    setNewLabel('');\n    setIsCreating(false);\n  };\n\n  return (\n    <div className=\"space-y-2\">\n      {options.length === 0 && !isCreating && (\n        <EmptyNote>No categories yet</EmptyNote>\n      )}\n      <div className=\"flex flex-wrap gap-2\">\n        {options.map((opt) => {\n          const isSelected = categories.includes(opt.value);\n          return (\n            <div key={opt.value} className=\"relative group\">\n              <button\n                type=\"button\"\n                onClick={() => toggle(opt.value)}\n                className={`flex items-center gap-2 px-3 py-2 rounded-lg border transition-colors text-left ${\n                  isSelected\n                    ? 'border-brand-500 bg-brand-500/5'\n                    : 'border-[var(--border-default)] hover:border-[var(--border-strong)]'\n                }`}\n              >\n                <span\n                  className={`text-sm font-medium whitespace-nowrap ${\n                    isSelected\n                      ? 'text-[var(--text-primary)]'\n                      : 'text-[var(--text-secondary)]'\n                  }`}\n                >\n                  {opt.label}\n                </span>\n                <span\n                  className={`flex-shrink-0 flex items-center justify-center w-[18px] h-[18px] rounded-[3px] border-2 transition-colors ${\n                    isSelected\n                      ? 'bg-brand-500 border-brand-500'\n                      : 'border-[var(--border-strong)]'\n                  }`}\n                >\n                  {isSelected && (\n                    <Check className=\"text-white\" strokeWidth={3} />\n                  )}\n                </span>\n              </button>\n              {onDeleteCategory && (\n                <button\n                  type=\"button\"\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    onDeleteCategory(opt.value);\n                  }}\n                  className=\"absolute -top-1.5 -right-1.5 hidden group-hover:flex items-center justify-center w-5 h-5 rounded-full bg-[var(--error)] text-white hover:bg-red-700 transition-colors shadow-sm\"\n                  title={`Delete \"${opt.label}\"`}\n                >\n                  <X strokeWidth={2.5} />\n                </button>\n              )}\n            </div>\n          );\n        })}\n      </div>\n\n      {onCreateCategory && !isCreating && (\n        <Button\n          variant=\"secondary\"\n          className=\"border-dashed hover:border-[var(--border-strong)]\"\n          onClick={() => setIsCreating(true)}\n        >\n          <Plus />\n          Add category\n        </Button>\n      )}\n\n      {isCreating && (\n        <div className=\"flex items-center gap-2\">\n          <Input\n            autoFocus\n            type=\"text\"\n            value={newLabel}\n            onChange={(e) => setNewLabel(e.target.value)}\n            onKeyDown={(e) => {\n              if (e.key === 'Enter') {\n                e.preventDefault();\n                handleCreate();\n              }\n              if (e.key === 'Escape') {\n                setIsCreating(false);\n                setNewLabel('');\n              }\n            }}\n            placeholder=\"Category name...\"\n            className=\"flex-1\"\n          />\n          <Button onClick={handleCreate} disabled={!newLabel.trim()}>\n            Add\n          </Button>\n          <button\n            type=\"button\"\n            onClick={() => {\n              setIsCreating(false);\n              setNewLabel('');\n            }}\n            className=\"px-2 py-2 text-xs text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors\"\n          >\n            Cancel\n          </button>\n        </div>\n      )}\n    </div>\n  );\n}\n\n/**\n * PublicLinkRow — replaces the raw \"slug\" field with a friendlier preview.\n *\n * Shows the live URL the customer will see (e.g. `mystore.com/product/[slug]`)\n * and a single action: \"Generate\" (when slug has been manually edited or is\n * empty, regenerates from title) or \"Edit\" (opens an inline edit input). The\n * word \"slug\" never appears in the UI.\n */\n"],"mappings":"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","names":[]}

package/dist/product-editor/mobile-editor-section.d.ts

@@ -0,0 +1 @@
+export { MobileEditorSection } from '@withpotter/components/editor-shared/mobile-editor-section';

package/dist/product-editor/mobile-editor-section.js

@@ -0,0 +1,5 @@
+import { MobileEditorSection } from "@withpotter/components/editor-shared/mobile-editor-section";
+export {
+  MobileEditorSection
+};
+//# sourceMappingURL=mobile-editor-section.js.map

package/dist/product-editor/mobile-editor-section.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/product-editor/mobile-editor-section.tsx"],"sourcesContent":["// Re-export from shared location\nexport { MobileEditorSection } from '@withpotter/components/editor-shared/mobile-editor-section';\n"],"mappings":"AACA,SAAS,2BAA2B;","names":[]}

package/dist/product-editor/mobile-hero-editor.d.ts

@@ -0,0 +1,8 @@
+import type { ProductMedia } from '@withpotter/lib/product-types';
+interface MobileHeroEditorProps {
+    heroImage: ProductMedia | null;
+    onHeroImageChange: (v: ProductMedia | null) => void;
+    galleryItems?: ProductMedia[];
+}
+export declare function MobileHeroEditor({ heroImage, onHeroImageChange, galleryItems, }: MobileHeroEditorProps): import("react").JSX.Element;
+export {};

package/dist/product-editor/mobile-hero-editor.js

@@ -0,0 +1,84 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { MobileMediaPickerSheet } from "@withpotter/components/mobile/mobile-media-picker-sheet";
+import { Camera, ImagePlus } from "lucide-react";
+function MobileHeroEditor({
+  heroImage,
+  onHeroImageChange,
+  galleryItems = []
+}) {
+  const [showModal, setShowModal] = useState(false);
+  const hasGallery = galleryItems.length > 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setShowModal(true),
+          className: `w-full overflow-hidden relative group ${heroImage ? "aspect-[4/3] rounded-ios-lg" : "aspect-[16/9] rounded-ios-lg"}`,
+          children: heroImage ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: heroImage.url,
+                alt: heroImage.alt || "Hero image",
+                className: "w-full h-full object-cover"
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "absolute bottom-3 right-3 w-8 h-8 rounded-full bg-black/40 backdrop-blur-sm flex items-center justify-center", children: /* @__PURE__ */ jsx(Camera, { className: "size-4 text-white" }) })
+          ] }) : /* @__PURE__ */ jsxs("div", { className: "w-full h-full bg-[var(--bg-muted)] border-2 border-dashed border-[var(--border-default)] rounded-ios-lg flex flex-col items-center justify-center gap-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "w-12 h-12 rounded-full bg-[var(--bg-subtle)] flex items-center justify-center", children: /* @__PURE__ */ jsx(ImagePlus, { className: "size-6 text-[var(--text-muted)]" }) }),
+            /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--text-tertiary)]", children: "Add cover image" })
+          ] })
+        }
+      ),
+      hasGallery && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 overflow-x-auto pb-0.5", children: [
+        galleryItems.slice(0, 5).map((item, i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "w-14 h-14 rounded-ios-sm overflow-hidden flex-shrink-0 border border-[var(--border-subtle)]",
+            children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: item.url,
+                alt: item.alt || `Gallery ${i + 1}`,
+                className: "w-full h-full object-cover"
+              }
+            )
+          },
+          i
+        )),
+        galleryItems.length > 5 && /* @__PURE__ */ jsx("div", { className: "w-14 h-14 rounded-ios-sm flex-shrink-0 bg-[var(--bg-muted)] flex items-center justify-center", children: /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-[var(--text-tertiary)]", children: [
+          "+",
+          galleryItems.length - 5
+        ] }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      MobileMediaPickerSheet,
+      {
+        open: showModal,
+        onClose: () => setShowModal(false),
+        onSuccess: (result) => {
+          onHeroImageChange({
+            url: result.url,
+            type: "image",
+            alt: result.alt,
+            width: result.width,
+            height: result.height
+          });
+          setShowModal(false);
+        },
+        title: heroImage ? "Replace cover image" : "Add cover image",
+        initialUrl: heroImage?.url,
+        initialAlt: heroImage?.alt
+      }
+    )
+  ] });
+}
+export {
+  MobileHeroEditor
+};
+//# sourceMappingURL=mobile-hero-editor.js.map

package/dist/product-editor/mobile-hero-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/product-editor/mobile-hero-editor.tsx"],"sourcesContent":["/* eslint-disable @next/next/no-img-element */\n'use client';\n\nimport { useState } from 'react';\nimport { MobileMediaPickerSheet } from '@withpotter/components/mobile/mobile-media-picker-sheet';\nimport { Camera, ImagePlus } from 'lucide-react';\nimport type { ProductMedia } from '@withpotter/lib/product-types';\n\ninterface MobileHeroEditorProps {\n  heroImage: ProductMedia | null;\n  onHeroImageChange: (v: ProductMedia | null) => void;\n  galleryItems?: ProductMedia[];\n}\n\nexport function MobileHeroEditor({\n  heroImage,\n  onHeroImageChange,\n  galleryItems = [],\n}: MobileHeroEditorProps) {\n  const [showModal, setShowModal] = useState(false);\n\n  const hasGallery = galleryItems.length > 0;\n\n  return (\n    <>\n      <div className=\"space-y-2\">\n        {/* Main hero image */}\n        <button\n          type=\"button\"\n          onClick={() => setShowModal(true)}\n          className={`w-full overflow-hidden relative group ${\n            heroImage\n              ? 'aspect-[4/3] rounded-ios-lg'\n              : 'aspect-[16/9] rounded-ios-lg'\n          }`}\n        >\n          {heroImage ? (\n            <>\n              <img\n                src={heroImage.url}\n                alt={heroImage.alt || 'Hero image'}\n                className=\"w-full h-full object-cover\"\n              />\n              {/* Camera badge */}\n              <div className=\"absolute bottom-3 right-3 w-8 h-8 rounded-full bg-black/40 backdrop-blur-sm flex items-center justify-center\">\n                <Camera className=\"size-4 text-white\" />\n              </div>\n            </>\n          ) : (\n            <div className=\"w-full h-full bg-[var(--bg-muted)] border-2 border-dashed border-[var(--border-default)] rounded-ios-lg flex flex-col items-center justify-center gap-2\">\n              <div className=\"w-12 h-12 rounded-full bg-[var(--bg-subtle)] flex items-center justify-center\">\n                <ImagePlus className=\"size-6 text-[var(--text-muted)]\" />\n              </div>\n              <span className=\"text-sm text-[var(--text-tertiary)]\">\n                Add cover image\n              </span>\n            </div>\n          )}\n        </button>\n\n        {/* Gallery thumbnail strip — small preview of additional images */}\n        {hasGallery && (\n          <div className=\"flex gap-2 overflow-x-auto pb-0.5\">\n            {galleryItems.slice(0, 5).map((item, i) => (\n              <div\n                key={i}\n                className=\"w-14 h-14 rounded-ios-sm overflow-hidden flex-shrink-0 border border-[var(--border-subtle)]\"\n              >\n                <img\n                  src={item.url}\n                  alt={item.alt || `Gallery ${i + 1}`}\n                  className=\"w-full h-full object-cover\"\n                />\n              </div>\n            ))}\n            {galleryItems.length > 5 && (\n              <div className=\"w-14 h-14 rounded-ios-sm flex-shrink-0 bg-[var(--bg-muted)] flex items-center justify-center\">\n                <span className=\"text-xs font-medium text-[var(--text-tertiary)]\">\n                  +{galleryItems.length - 5}\n                </span>\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n\n      <MobileMediaPickerSheet\n        open={showModal}\n        onClose={() => setShowModal(false)}\n        onSuccess={(result) => {\n          onHeroImageChange({\n            url: result.url,\n            type: 'image',\n            alt: result.alt,\n            width: result.width,\n            height: result.height,\n          });\n          setShowModal(false);\n        }}\n        title={heroImage ? 'Replace cover image' : 'Add cover image'}\n        initialUrl={heroImage?.url}\n        initialAlt={heroImage?.alt}\n      />\n    </>\n  );\n}\n"],"mappings":";AAqCY,mBACE,KADF;AAlCZ,SAAS,gBAAgB;AACzB,SAAS,8BAA8B;AACvC,SAAS,QAAQ,iBAAiB;AAS3B,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA,eAAe,CAAC;AAClB,GAA0B;AACxB,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,QAAM,aAAa,aAAa,SAAS;AAEzC,SACE,iCACE;AAAA,yBAAC,SAAI,WAAU,aAEb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS,MAAM,aAAa,IAAI;AAAA,UAChC,WAAW,yCACT,YACI,gCACA,8BACN;AAAA,UAEC,sBACC,iCACE;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,KAAK,UAAU;AAAA,gBACf,KAAK,UAAU,OAAO;AAAA,gBACtB,WAAU;AAAA;AAAA,YACZ;AAAA,YAEA,oBAAC,SAAI,WAAU,gHACb,8BAAC,UAAO,WAAU,qBAAoB,GACxC;AAAA,aACF,IAEA,qBAAC,SAAI,WAAU,2JACb;AAAA,gCAAC,SAAI,WAAU,iFACb,8BAAC,aAAU,WAAU,mCAAkC,GACzD;AAAA,YACA,oBAAC,UAAK,WAAU,uCAAsC,6BAEtD;AAAA,aACF;AAAA;AAAA,MAEJ;AAAA,MAGC,cACC,qBAAC,SAAI,WAAU,qCACZ;AAAA,qBAAa,MAAM,GAAG,CAAC,EAAE,IAAI,CAAC,MAAM,MACnC;AAAA,UAAC;AAAA;AAAA,YAEC,WAAU;AAAA,YAEV;AAAA,cAAC;AAAA;AAAA,gBACC,KAAK,KAAK;AAAA,gBACV,KAAK,KAAK,OAAO,WAAW,IAAI,CAAC;AAAA,gBACjC,WAAU;AAAA;AAAA,YACZ;AAAA;AAAA,UAPK;AAAA,QAQP,CACD;AAAA,QACA,aAAa,SAAS,KACrB,oBAAC,SAAI,WAAU,gGACb,+BAAC,UAAK,WAAU,mDAAkD;AAAA;AAAA,UAC9D,aAAa,SAAS;AAAA,WAC1B,GACF;AAAA,SAEJ;AAAA,OAEJ;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,SAAS,MAAM,aAAa,KAAK;AAAA,QACjC,WAAW,CAAC,WAAW;AACrB,4BAAkB;AAAA,YAChB,KAAK,OAAO;AAAA,YACZ,MAAM;AAAA,YACN,KAAK,OAAO;AAAA,YACZ,OAAO,OAAO;AAAA,YACd,QAAQ,OAAO;AAAA,UACjB,CAAC;AACD,uBAAa,KAAK;AAAA,QACpB;AAAA,QACA,OAAO,YAAY,wBAAwB;AAAA,QAC3C,YAAY,WAAW;AAAA,QACvB,YAAY,WAAW;AAAA;AAAA,IACzB;AAAA,KACF;AAEJ;","names":[]}

package/dist/product-editor/mobile-product-editor-behavior-sections.d.ts

@@ -0,0 +1,7 @@
+import { type EventRecurrenceRule } from '@withpotter/lib/product-types';
+import type { ProductFormState } from '@withpotter/hooks/use-product-form-state';
+export declare function MobileProductEditorBehaviorSections({ state, onCreateSeries, isSeriesChild, }: {
+    state: ProductFormState;
+    onCreateSeries?: (recurrence: EventRecurrenceRule) => Promise<void>;
+    isSeriesChild?: boolean;
+}): import("react").JSX.Element[];