@withpotter/components 0.13.0-next.101

package/dist/product-editor/sections/general-section.js

@@ -0,0 +1,129 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { generateSlug } from "@withpotter/lib/product-types";
+import { useIntentConfig } from "@withpotter/lib/intents/use-intent-config";
+import { EditorSectionHeader } from "./section-header";
+import { AddChip, Button, Input, Textarea } from "@withpotter/ui-kit";
+function GeneralSection({
+  title,
+  setTitle,
+  slug,
+  setSlug,
+  slugManuallyEdited,
+  setSlugManuallyEdited,
+  description,
+  setDescription,
+  formValues,
+  setFormValues,
+  isEditing,
+  bare,
+  hideTitle,
+  hideSlug
+}) {
+  const [showSlug, setShowSlug] = useState(false);
+  const intentConfig = useIntentConfig();
+  const editorLabels = intentConfig?.primary?.editor?.labels;
+  const fields = /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    !hideTitle && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: [
+        "Title ",
+        /* @__PURE__ */ jsx("span", { className: "text-[var(--error)]", children: "*" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "text",
+          value: title,
+          onChange: (e) => {
+            const val = e.target.value;
+            setTitle(val);
+            setFormValues({ ...formValues, title: val });
+            if (!slugManuallyEdited) {
+              const newSlug = generateSlug(val);
+              setSlug(newSlug);
+              setFormValues({
+                ...formValues,
+                title: val,
+                slug: newSlug
+              });
+            }
+          },
+          placeholder: editorLabels?.titlePlaceholder ?? "e.g. Premium Coffee Blend",
+          className: "w-full"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: "Description" }),
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          value: description,
+          onChange: (e) => {
+            setDescription(e.target.value);
+            setFormValues({
+              ...formValues,
+              description: e.target.value
+            });
+          },
+          rows: 6,
+          placeholder: editorLabels?.descriptionPlaceholder ?? "What it is, and why someone would want it...",
+          className: "w-full resize-y"
+        }
+      )
+    ] }),
+    !hideSlug && (showSlug || slugManuallyEdited ? /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-[var(--text-secondary)]", children: "URL" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "text",
+            value: slug,
+            onChange: (e) => {
+              setSlug(e.target.value);
+              setSlugManuallyEdited(true);
+              setFormValues({ ...formValues, slug: e.target.value });
+            },
+            placeholder: "product-url",
+            className: "flex-1 font-mono"
+          }
+        ),
+        slugManuallyEdited && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            onClick: () => {
+              setSlugManuallyEdited(false);
+              if (title) {
+                const newSlug = generateSlug(title);
+                setSlug(newSlug);
+                setFormValues({ ...formValues, slug: newSlug });
+              }
+            },
+            children: "Reset"
+          }
+        )
+      ] })
+    ] }) : /* @__PURE__ */ jsx(AddChip, { onClick: () => setShowSlug(true), children: slug ? `URL: /${slug}` : "Set the URL" }))
+  ] });
+  if (bare) return fields;
+  return (
+    /* `surface`, not a hand-rolled card. Eleven sections stack in one column
+       here and five of them drew their own — solid --bg-base with no shadow,
+       against the muted 40% ground and 1px lift the other six got from the
+       shared recipe. Two card languages alternating down a single column is
+       what a merchant sees as "some have a grey background and some don't".
+       A new section copies whichever file it was pasted from, so the recipe
+       has to live in one place: this class. */
+    /* @__PURE__ */ jsx("section", { id: "section-general", className: "scroll-mt-36", children: /* @__PURE__ */ jsxs("div", { className: "surface", children: [
+      /* @__PURE__ */ jsx(EditorSectionHeader, { title: "General" }),
+      /* @__PURE__ */ jsx("div", { className: "p-4", children: fields })
+    ] }) })
+  );
+}
+export {
+  GeneralSection
+};
+//# sourceMappingURL=general-section.js.map

package/dist/product-editor/sections/general-section.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/product-editor/sections/general-section.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { generateSlug } from '@withpotter/lib/product-types';\nimport { useIntentConfig } from '@withpotter/lib/intents/use-intent-config';\nimport { EditorSectionHeader } from './section-header';\nimport { AddChip, Button, Input, Textarea } from '@withpotter/ui-kit';\n\ninterface GeneralSectionProps {\n  title: string;\n  setTitle: (v: string) => void;\n  slug: string;\n  setSlug: (v: string) => void;\n  slugManuallyEdited: boolean;\n  setSlugManuallyEdited: (v: boolean) => void;\n  description: string;\n  setDescription: (v: string) => void;\n  formValues: Record<string, unknown>;\n  setFormValues: (v: Record<string, unknown>) => void;\n  isEditing?: boolean;\n  bare?: boolean;\n  hideTitle?: boolean;\n  hideSlug?: boolean;\n}\n\nexport function GeneralSection({\n  title,\n  setTitle,\n  slug,\n  setSlug,\n  slugManuallyEdited,\n  setSlugManuallyEdited,\n  description,\n  setDescription,\n  formValues,\n  setFormValues,\n  isEditing,\n  bare,\n  hideTitle,\n  hideSlug,\n}: GeneralSectionProps) {\n  const [showSlug, setShowSlug] = useState(false);\n\n  /**\n   * What to write here, said in the merchant's own words.\n   *\n   * Every archetype config has carried `editor.labels.titlePlaceholder` since\n   * it was written — \"e.g. Beachfront Villa\", \"e.g. Grilled Suya Platter\",\n   * \"e.g. 3-bed flat, Lekki Phase 1\" — and no component ever read one. Nine\n   * configs, zero readers, and every business on earth was shown\n   * \"e.g. Premium Coffee Blend\", which is not even one of the nine.\n   *\n   * A placeholder is the cheapest teaching a form does. Getting it wrong tells\n   * a landlord this product was built for somebody else.\n   */\n  const intentConfig = useIntentConfig();\n  const editorLabels = intentConfig?.primary?.editor?.labels;\n\n  const fields = (\n    <div className=\"space-y-4\">\n      {/* Title */}\n      {!hideTitle && (\n        <div>\n          <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-1\">\n            Title <span className=\"text-[var(--error)]\">*</span>\n          </label>\n          <Input\n            type=\"text\"\n            value={title}\n            onChange={(e) => {\n              const val = e.target.value;\n              setTitle(val);\n              setFormValues({ ...formValues, title: val });\n              if (!slugManuallyEdited) {\n                const newSlug = generateSlug(val);\n                setSlug(newSlug);\n                setFormValues({\n                  ...formValues,\n                  title: val,\n                  slug: newSlug,\n                });\n              }\n            }}\n            placeholder={\n              editorLabels?.titlePlaceholder ?? 'e.g. Premium Coffee Blend'\n            }\n            className=\"w-full\"\n          />\n        </div>\n      )}\n\n      {/**\n       * THE URL, WHICH NOBODY IS ASKING ABOUT YET.\n       *\n       * It writes itself from the title and stays right without anyone\n       * touching it, so as a permanent field on the first screen it was a\n       * question with a pre-filled answer sitting between the two boxes that\n       * actually needed typing. It is one line away, named, and opens with the\n       * value already in it — and it opens on its own for an item whose URL\n       * was edited by hand, because then it is not a default any more.\n       *\n       * And it is now BELOW them rather than between them, which is what the\n       * paragraph above was already arguing for: shrinking the question to a\n       * chip left it in the one position the argument ruled out.\n       */}\n      {/**\n       * ONE DESCRIPTION.\n       *\n       * There were two boxes: \"Short Description\", unlimited, and\n       * \"Description\", hard-capped at 100 characters with a counter that\n       * turned red. The full description was the one you could not write, and\n       * nothing on screen explained which box any given page would show — so\n       * the reasonable thing to do was type the same sentence twice.\n       *\n       * The cap is gone and the second box with it. The card summary that\n       * `shortDescription` fed is now derived from this text at save (see\n       * `toCardSummary`), which is what the blog editor already does with its\n       * excerpt.\n       */}\n      <div>\n        <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-1\">\n          Description\n        </label>\n        <Textarea\n          value={description}\n          onChange={(e) => {\n            setDescription(e.target.value);\n            setFormValues({\n              ...formValues,\n              description: e.target.value,\n            });\n          }}\n          rows={6}\n          placeholder={\n            editorLabels?.descriptionPlaceholder ??\n            'What it is, and why someone would want it...'\n          }\n          className=\"w-full resize-y\"\n        />\n      </div>\n\n      {!hideSlug &&\n        (showSlug || slugManuallyEdited ? (\n          <div>\n            <label className=\"mb-1 block text-sm font-medium text-[var(--text-secondary)]\">\n              URL\n            </label>\n            <div className=\"flex items-center gap-2\">\n              <Input\n                type=\"text\"\n                value={slug}\n                onChange={(e) => {\n                  setSlug(e.target.value);\n                  setSlugManuallyEdited(true);\n                  setFormValues({ ...formValues, slug: e.target.value });\n                }}\n                placeholder=\"product-url\"\n                className=\"flex-1 font-mono\"\n              />\n              {slugManuallyEdited && (\n                <Button\n                  variant=\"ghost\"\n                  onClick={() => {\n                    setSlugManuallyEdited(false);\n                    if (title) {\n                      const newSlug = generateSlug(title);\n                      setSlug(newSlug);\n                      setFormValues({ ...formValues, slug: newSlug });\n                    }\n                  }}\n                >\n                  Reset\n                </Button>\n              )}\n            </div>\n          </div>\n        ) : (\n          <AddChip onClick={() => setShowSlug(true)}>\n            {slug ? `URL: /${slug}` : 'Set the URL'}\n          </AddChip>\n        ))}\n    </div>\n  );\n\n  if (bare) return fields;\n\n  return (\n    /* `surface`, not a hand-rolled card. Eleven sections stack in one column\n       here and five of them drew their own — solid --bg-base with no shadow,\n       against the muted 40% ground and 1px lift the other six got from the\n       shared recipe. Two card languages alternating down a single column is\n       what a merchant sees as \"some have a grey background and some don't\".\n       A new section copies whichever file it was pasted from, so the recipe\n       has to live in one place: this class. */\n    <section id=\"section-general\" className=\"scroll-mt-36\">\n      <div className=\"surface\">\n        <EditorSectionHeader title=\"General\" />\n        <div className=\"p-4\">{fields}</div>\n      </div>\n    </section>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/product-editor/sections/item-preview.d.ts

@@ -0,0 +1,35 @@
+import type { ProductMedia } from '@withpotter/lib/product-types';
+interface ItemPreviewProps {
+    title: string;
+    description: string;
+    price: number | undefined;
+    compareAtPrice: number | undefined;
+    currency: string;
+    isActive: boolean;
+    heroImage: ProductMedia | null;
+    /** The merchant's own noun — "property", "dish", "service". */
+    itemLabel: string;
+}
+/**
+ * THE THING BEING MADE, WHILE IT IS BEING MADE.
+ *
+ * The editor's second column held Category and a lot of nothing, and the
+ * picture — the part of an item a customer actually reacts to — was a card
+ * halfway down the form, below the fold on most screens. So the merchant typed
+ * into a column of grey boxes and found out what they had built by saving and
+ * going to look.
+ *
+ * It reads and never writes. Media used to be added HERE, from a tile that
+ * opened a modal, which made the preview a second uploader competing with the
+ * gallery below it — two controls for one question. Adding lives in the Media
+ * section now, in the main column, at the size that question deserves. What is
+ * left is the honest job: the words and the picture that will be used, echoing
+ * as they are typed.
+ *
+ * It is deliberately not a pixel-accurate storefront render. The templates
+ * each draw an item their own way and chasing that would make this a lie with
+ * extra steps; what it promises is narrower and true — those words and that
+ * picture, in the order of importance they carry.
+ */
+export declare function ItemPreview({ title, description, price, compareAtPrice, currency, isActive, heroImage, itemLabel, }: ItemPreviewProps): import("react").JSX.Element;
+export {};

package/dist/product-editor/sections/item-preview.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { formatCurrency } from "@withpotter/lib/utils";
+import { EditorSectionHeader } from "./section-header";
+function ItemPreview({
+  title,
+  description,
+  price,
+  compareAtPrice,
+  currency,
+  isActive,
+  heroImage,
+  itemLabel
+}) {
+  const hasPrice = typeof price === "number" && price > 0;
+  const showsCompareAt = typeof compareAtPrice === "number" && compareAtPrice > 0 && (!hasPrice || compareAtPrice > price);
+  return /* @__PURE__ */ jsxs("section", { className: "surface overflow-hidden", children: [
+    /* @__PURE__ */ jsx(EditorSectionHeader, { title: "Preview" }),
+    heroImage && /* @__PURE__ */ jsx("div", { className: "aspect-[4/3] w-full overflow-hidden border-b border-[var(--border-subtle)] bg-[var(--bg-muted)]", children: /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: heroImage.url,
+        alt: heroImage.alt || "",
+        className: "h-full w-full object-cover"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2 p-4", children: [
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: title.trim() ? "text-sm font-medium text-[var(--text-primary)] break-words" : "text-sm text-[var(--text-muted)] italic",
+          children: title.trim() || `Untitled ${itemLabel.toLowerCase()}`
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+        hasPrice ? /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-[var(--text-primary)]", children: formatCurrency(price, currency) }) : /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--text-muted)]", children: "No price" }),
+        showsCompareAt && /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--text-muted)] line-through", children: formatCurrency(compareAtPrice, currency) })
+      ] }),
+      description.trim() && /* @__PURE__ */ jsx("p", { className: "text-xs leading-relaxed text-[var(--text-secondary)] line-clamp-4 break-words", children: description }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pt-1", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `w-1.5 h-1.5 rounded-full ${isActive ? "bg-[var(--success)]" : "bg-[var(--text-muted)]"}`
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--text-tertiary)]", children: isActive ? "Visible to customers" : "Draft, not published" })
+      ] })
+    ] })
+  ] });
+}
+export {
+  ItemPreview
+};
+//# sourceMappingURL=item-preview.js.map

package/dist/product-editor/sections/item-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/product-editor/sections/item-preview.tsx"],"sourcesContent":["'use client';\n\nimport { formatCurrency } from '@withpotter/lib/utils';\nimport type { ProductMedia } from '@withpotter/lib/product-types';\nimport { EditorSectionHeader } from './section-header';\n\ninterface ItemPreviewProps {\n  title: string;\n  description: string;\n  price: number | undefined;\n  compareAtPrice: number | undefined;\n  currency: string;\n  isActive: boolean;\n  heroImage: ProductMedia | null;\n  /** The merchant's own noun — \"property\", \"dish\", \"service\". */\n  itemLabel: string;\n}\n\n/**\n * THE THING BEING MADE, WHILE IT IS BEING MADE.\n *\n * The editor's second column held Category and a lot of nothing, and the\n * picture — the part of an item a customer actually reacts to — was a card\n * halfway down the form, below the fold on most screens. So the merchant typed\n * into a column of grey boxes and found out what they had built by saving and\n * going to look.\n *\n * It reads and never writes. Media used to be added HERE, from a tile that\n * opened a modal, which made the preview a second uploader competing with the\n * gallery below it — two controls for one question. Adding lives in the Media\n * section now, in the main column, at the size that question deserves. What is\n * left is the honest job: the words and the picture that will be used, echoing\n * as they are typed.\n *\n * It is deliberately not a pixel-accurate storefront render. The templates\n * each draw an item their own way and chasing that would make this a lie with\n * extra steps; what it promises is narrower and true — those words and that\n * picture, in the order of importance they carry.\n */\nexport function ItemPreview({\n  title,\n  description,\n  price,\n  compareAtPrice,\n  currency,\n  isActive,\n  heroImage,\n  itemLabel,\n}: ItemPreviewProps) {\n  const hasPrice = typeof price === 'number' && price > 0;\n  const showsCompareAt =\n    typeof compareAtPrice === 'number' &&\n    compareAtPrice > 0 &&\n    (!hasPrice || compareAtPrice > price);\n\n  return (\n    <section className=\"surface overflow-hidden\">\n      <EditorSectionHeader title=\"Preview\" />\n\n      {/**\n       * The cover only once there is one. An empty preview used to spend 350px\n       * saying \"no picture yet\" beside a Media section already asking for one,\n       * which is the same question twice and a third of a screen to ask it.\n       *\n       * Sized to be recognised rather than inspected. This is a reminder of\n       * what is being made, not a rendering of it.\n       */}\n      {heroImage && (\n        <div className=\"aspect-[4/3] w-full overflow-hidden border-b border-[var(--border-subtle)] bg-[var(--bg-muted)]\">\n          {/* eslint-disable-next-line @next/next/no-img-element */}\n          <img\n            src={heroImage.url}\n            alt={heroImage.alt || ''}\n            className=\"h-full w-full object-cover\"\n          />\n        </div>\n      )}\n\n      {/* What the words look like once they are somebody else's */}\n      <div className=\"space-y-2 p-4\">\n        <p\n          className={\n            title.trim()\n              ? 'text-sm font-medium text-[var(--text-primary)] break-words'\n              : 'text-sm text-[var(--text-muted)] italic'\n          }\n        >\n          {title.trim() || `Untitled ${itemLabel.toLowerCase()}`}\n        </p>\n\n        <div className=\"flex items-baseline gap-2\">\n          {hasPrice ? (\n            <span className=\"text-sm font-semibold text-[var(--text-primary)]\">\n              {formatCurrency(price, currency)}\n            </span>\n          ) : (\n            <span className=\"text-sm text-[var(--text-muted)]\">No price</span>\n          )}\n          {showsCompareAt && (\n            <span className=\"text-xs text-[var(--text-muted)] line-through\">\n              {formatCurrency(compareAtPrice, currency)}\n            </span>\n          )}\n        </div>\n\n        {description.trim() && (\n          <p className=\"text-xs leading-relaxed text-[var(--text-secondary)] line-clamp-4 break-words\">\n            {description}\n          </p>\n        )}\n\n        <div className=\"flex items-center gap-2 pt-1\">\n          <span\n            className={`w-1.5 h-1.5 rounded-full ${\n              isActive ? 'bg-[var(--success)]' : 'bg-[var(--text-muted)]'\n            }`}\n          />\n          <span className=\"text-xs text-[var(--text-tertiary)]\">\n            {isActive ? 'Visible to customers' : 'Draft, not published'}\n          </span>\n        </div>\n      </div>\n    </section>\n  );\n}\n"],"mappings":";AAyDM,cAiCE,YAjCF;AAvDN,SAAS,sBAAsB;AAE/B,SAAS,2BAA2B;AAmC7B,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,WAAW,OAAO,UAAU,YAAY,QAAQ;AACtD,QAAM,iBACJ,OAAO,mBAAmB,YAC1B,iBAAiB,MAChB,CAAC,YAAY,iBAAiB;AAEjC,SACE,qBAAC,aAAQ,WAAU,2BACjB;AAAA,wBAAC,uBAAoB,OAAM,WAAU;AAAA,IAUpC,aACC,oBAAC,SAAI,WAAU,mGAEb;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,UAAU;AAAA,QACf,KAAK,UAAU,OAAO;AAAA,QACtB,WAAU;AAAA;AAAA,IACZ,GACF;AAAA,IAIF,qBAAC,SAAI,WAAU,iBACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WACE,MAAM,KAAK,IACP,+DACA;AAAA,UAGL,gBAAM,KAAK,KAAK,YAAY,UAAU,YAAY,CAAC;AAAA;AAAA,MACtD;AAAA,MAEA,qBAAC,SAAI,WAAU,6BACZ;AAAA,mBACC,oBAAC,UAAK,WAAU,oDACb,yBAAe,OAAO,QAAQ,GACjC,IAEA,oBAAC,UAAK,WAAU,oCAAmC,sBAAQ;AAAA,QAE5D,kBACC,oBAAC,UAAK,WAAU,iDACb,yBAAe,gBAAgB,QAAQ,GAC1C;AAAA,SAEJ;AAAA,MAEC,YAAY,KAAK,KAChB,oBAAC,OAAE,WAAU,iFACV,uBACH;AAAA,MAGF,qBAAC,SAAI,WAAU,gCACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,4BACT,WAAW,wBAAwB,wBACrC;AAAA;AAAA,QACF;AAAA,QACA,oBAAC,UAAK,WAAU,uCACb,qBAAW,yBAAyB,wBACvC;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/product-editor/sections/media-section.d.ts

@@ -0,0 +1,30 @@
+import type { ProductMedia } from '@withpotter/lib/product-types';
+import { type ProductGalleryItem } from '@withpotter/lib/media-utils';
+import type { ProductScanPatch } from '../camera/product-qr';
+interface MediaSectionProps {
+    galleryItems: ProductGalleryItem[];
+    onGalleryItemsChange: React.Dispatch<React.SetStateAction<ProductGalleryItem[]>>;
+    heroImage: ProductMedia | null;
+    onHeroImageChange: (v: ProductMedia | null) => void;
+    /** Name, price and words from a scanned product code (camera boxes). */
+    onProductScan?: (patch: ProductScanPatch) => void;
+}
+/**
+ * ADDING A PICTURE, WITHOUT ASKING FOR ONE.
+ *
+ * It replaced a one-file tile behind a modal with a second uploader under it.
+ * The media is a section in the main column now, at the size of the answer
+ * it wants, and it takes files the three ways people actually have them:
+ *
+ *   drop    anywhere on the card, including onto a full gallery
+ *   paste   ⌘V, which is how a screenshot or a copied image arrives
+ *   click   a real multi-select file dialog, not a modal in front of one
+ *   camera  BOX_MEDIA_CAMERA boxes: a photo, or a product QR code read in
+ *
+ * The modal survives for what it is good at — a URL, an alt text, a crop — and
+ * is reached from a tile, not from the empty state. First tile is the cover;
+ * drag to reorder, and the cover follows, because "which picture leads" is a
+ * question about order and not a separate setting to keep in sync.
+ */
+export declare function MediaSection({ galleryItems, onGalleryItemsChange, heroImage, onHeroImageChange, onProductScan, }: MediaSectionProps): import("react").JSX.Element;
+export {};

package/dist/product-editor/sections/media-section.js

@@ -0,0 +1,165 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from "react";
+import { SortableGallery } from "@withpotter/ui-kit/sortable-gallery";
+import { Button } from "@withpotter/ui-kit/button";
+import { Dropzone } from "@withpotter/ui-kit/dropzone";
+import {
+  MAX_GALLERY_ITEMS
+} from "@withpotter/lib/media-utils";
+import { MediaLibraryPicker } from "@withpotter/components/media/media-library-picker";
+import { EditorSectionHeader } from "./section-header";
+import { galleryToMedia } from "./gallery-to-media";
+import { useMediaIngest } from "./use-media-ingest";
+import { BOX_MEDIA_CAMERA } from "@withpotter/lib/box-media";
+import { CameraStart } from "../camera/camera-start";
+import { ProductCamera } from "../camera/product-camera";
+const ACCEPT = "image/png,image/jpeg,image/gif,image/webp,video/mp4,video/webm";
+function MediaSection({
+  galleryItems,
+  onGalleryItemsChange,
+  heroImage,
+  onHeroImageChange,
+  onProductScan
+}) {
+  const [dragging, setDragging] = useState(false);
+  const [choosing, setChoosing] = useState(false);
+  const [shooting, setShooting] = useState(false);
+  const rootRef = useRef(null);
+  const { ingest, uploading, progress, failed } = useMediaIngest(
+    galleryItems,
+    onGalleryItemsChange,
+    rootRef
+  );
+  const room = MAX_GALLERY_ITEMS - galleryItems.length;
+  const onDrop = useCallback(
+    (e) => {
+      e.preventDefault();
+      setDragging(false);
+      void ingest(Array.from(e.dataTransfer.files));
+    },
+    [ingest]
+  );
+  const hasMedia = galleryItems.length > 0;
+  return /* @__PURE__ */ jsxs("section", { id: "section-media", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: rootRef,
+        tabIndex: -1,
+        onDragOver: (e) => {
+          e.preventDefault();
+          setDragging(true);
+        },
+        onDragLeave: (e) => {
+          if (!e.currentTarget.contains(e.relatedTarget))
+            setDragging(false);
+        },
+        onDrop,
+        className: `surface outline-none transition-colors ${dragging ? "border-brand-500 bg-[var(--accent-secondary)]/30" : ""}`,
+        children: [
+          /* @__PURE__ */ jsx(
+            EditorSectionHeader,
+            {
+              title: "Media",
+              description: hasMedia ? "Drag to reorder. The first one is the cover." : void 0,
+              action: (
+                // The photos already saved under Gallery → My photos, picked
+                // into the product the same way an upload lands.
+                room > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+                  BOX_MEDIA_CAMERA && hasMedia && /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "secondary",
+                      size: "sm",
+                      onClick: () => setShooting(true),
+                      children: "Camera"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "secondary",
+                      size: "sm",
+                      onClick: () => setChoosing(true),
+                      children: "Add"
+                    }
+                  )
+                ] }) : void 0
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+            hasMedia ? /* @__PURE__ */ jsx(
+              SortableGallery,
+              {
+                items: galleryItems,
+                onItemsChange: onGalleryItemsChange,
+                onSetAsHero: onHeroImageChange,
+                coverUrl: heroImage?.url,
+                hideLabel: true
+              }
+            ) : BOX_MEDIA_CAMERA ? /* @__PURE__ */ jsx(
+              CameraStart,
+              {
+                onOpen: () => setShooting(true),
+                onFiles: (files) => void ingest(files),
+                busy: uploading > 0,
+                progress
+              }
+            ) : /* @__PURE__ */ jsx(
+              Dropzone,
+              {
+                multiple: true,
+                accept: ACCEPT,
+                maxFiles: MAX_GALLERY_ITEMS,
+                currentCount: galleryItems.length,
+                busy: uploading > 0,
+                label: "Drop images here, paste, or browse",
+                hint: "Images and video \xB7 The first one is the cover",
+                paste: false,
+                onFiles: (files) => void ingest(files)
+              }
+            ),
+            uploading > 0 && /* @__PURE__ */ jsxs("p", { className: "mt-3 text-xs text-[var(--text-tertiary)]", children: [
+              "Uploading ",
+              uploading,
+              " ",
+              uploading === 1 ? "file" : "files",
+              " \xB7 ",
+              progress,
+              "%"
+            ] }),
+            failed && /* @__PURE__ */ jsx("p", { className: "mt-3 text-xs text-[var(--error)]", children: failed })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MediaLibraryPicker,
+      {
+        open: choosing,
+        onOpenChange: setChoosing,
+        remaining: room,
+        accept: "media",
+        title: "My photos",
+        onPick: (picked) => onGalleryItemsChange((prev) => [...prev, ...galleryToMedia(picked)])
+      }
+    ),
+    BOX_MEDIA_CAMERA && /* @__PURE__ */ jsx(
+      ProductCamera,
+      {
+        open: shooting,
+        onClose: () => setShooting(false),
+        galleryItems,
+        onGalleryItemsChange,
+        onPhotos: (files) => void ingest(files),
+        onProductScan
+      }
+    )
+  ] });
+}
+export {
+  MediaSection
+};
+//# sourceMappingURL=media-section.js.map

package/dist/product-editor/sections/media-section.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/product-editor/sections/media-section.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useRef, useState } from 'react';\nimport { SortableGallery } from '@withpotter/ui-kit/sortable-gallery';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { Dropzone } from '@withpotter/ui-kit/dropzone';\nimport type { ProductMedia } from '@withpotter/lib/product-types';\nimport {\n  MAX_GALLERY_ITEMS,\n  type ProductGalleryItem,\n} from '@withpotter/lib/media-utils';\nimport { MediaLibraryPicker } from '@withpotter/components/media/media-library-picker';\nimport { EditorSectionHeader } from './section-header';\nimport { galleryToMedia } from './gallery-to-media';\nimport { useMediaIngest } from './use-media-ingest';\nimport { BOX_MEDIA_CAMERA } from '@withpotter/lib/box-media';\nimport { CameraStart } from '../camera/camera-start';\nimport { ProductCamera } from '../camera/product-camera';\nimport type { ProductScanPatch } from '../camera/product-qr';\n\ninterface MediaSectionProps {\n  galleryItems: ProductGalleryItem[];\n  onGalleryItemsChange: React.Dispatch<\n    React.SetStateAction<ProductGalleryItem[]>\n  >;\n  heroImage: ProductMedia | null;\n  onHeroImageChange: (v: ProductMedia | null) => void;\n  /** Name, price and words from a scanned product code (camera boxes). */\n  onProductScan?: (patch: ProductScanPatch) => void;\n}\n\nconst ACCEPT = 'image/png,image/jpeg,image/gif,image/webp,video/mp4,video/webm';\n\n/**\n * ADDING A PICTURE, WITHOUT ASKING FOR ONE.\n *\n * It replaced a one-file tile behind a modal with a second uploader under it.\n * The media is a section in the main column now, at the size of the answer\n * it wants, and it takes files the three ways people actually have them:\n *\n *   drop    anywhere on the card, including onto a full gallery\n *   paste   ⌘V, which is how a screenshot or a copied image arrives\n *   click   a real multi-select file dialog, not a modal in front of one\n *   camera  BOX_MEDIA_CAMERA boxes: a photo, or a product QR code read in\n *\n * The modal survives for what it is good at — a URL, an alt text, a crop — and\n * is reached from a tile, not from the empty state. First tile is the cover;\n * drag to reorder, and the cover follows, because \"which picture leads\" is a\n * question about order and not a separate setting to keep in sync.\n */\nexport function MediaSection({\n  galleryItems,\n  onGalleryItemsChange,\n  heroImage,\n  onHeroImageChange,\n  onProductScan,\n}: MediaSectionProps) {\n  const [dragging, setDragging] = useState(false);\n  const [choosing, setChoosing] = useState(false);\n  const [shooting, setShooting] = useState(false);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const { ingest, uploading, progress, failed } = useMediaIngest(\n    galleryItems,\n    onGalleryItemsChange,\n    rootRef,\n  );\n\n  const room = MAX_GALLERY_ITEMS - galleryItems.length;\n\n  const onDrop = useCallback(\n    (e: React.DragEvent) => {\n      e.preventDefault();\n      setDragging(false);\n      void ingest(Array.from(e.dataTransfer.files));\n    },\n    [ingest],\n  );\n\n  const hasMedia = galleryItems.length > 0;\n\n  return (\n    <section id=\"section-media\">\n      <div\n        ref={rootRef}\n        tabIndex={-1}\n        onDragOver={(e) => {\n          e.preventDefault();\n          setDragging(true);\n        }}\n        onDragLeave={(e) => {\n          if (!e.currentTarget.contains(e.relatedTarget as Node))\n            setDragging(false);\n        }}\n        onDrop={onDrop}\n        className={`surface outline-none transition-colors ${\n          dragging ? 'border-brand-500 bg-[var(--accent-secondary)]/30' : ''\n        }`}\n      >\n        <EditorSectionHeader\n          title=\"Media\"\n          description={\n            hasMedia\n              ? 'Drag to reorder. The first one is the cover.'\n              : undefined\n          }\n          action={\n            // The photos already saved under Gallery → My photos, picked\n            // into the product the same way an upload lands.\n            room > 0 ? (\n              <div className=\"flex gap-2\">\n                {BOX_MEDIA_CAMERA && hasMedia && (\n                  <Button\n                    variant=\"secondary\"\n                    size=\"sm\"\n                    onClick={() => setShooting(true)}\n                  >\n                    Camera\n                  </Button>\n                )}\n                <Button\n                  variant=\"secondary\"\n                  size=\"sm\"\n                  onClick={() => setChoosing(true)}\n                >\n                  Add\n                </Button>\n              </div>\n            ) : undefined\n          }\n        />\n\n        <div className=\"p-4\">\n          {hasMedia ? (\n            <SortableGallery\n              items={galleryItems}\n              onItemsChange={onGalleryItemsChange}\n              onSetAsHero={onHeroImageChange}\n              coverUrl={heroImage?.url}\n              hideLabel\n            />\n          ) : BOX_MEDIA_CAMERA ? (\n            <CameraStart\n              onOpen={() => setShooting(true)}\n              onFiles={(files) => void ingest(files)}\n              busy={uploading > 0}\n              progress={progress}\n            />\n          ) : (\n            <Dropzone\n              multiple\n              accept={ACCEPT}\n              maxFiles={MAX_GALLERY_ITEMS}\n              currentCount={galleryItems.length}\n              busy={uploading > 0}\n              label=\"Drop images here, paste, or browse\"\n              hint=\"Images and video · The first one is the cover\"\n              // The card already takes a paste (it accepts one onto a full\n              // gallery too); a second listener here would ingest twice.\n              paste={false}\n              onFiles={(files) => void ingest(files)}\n            />\n          )}\n\n          {uploading > 0 && (\n            <p className=\"mt-3 text-xs text-[var(--text-tertiary)]\">\n              Uploading {uploading} {uploading === 1 ? 'file' : 'files'} · {progress}%\n            </p>\n          )}\n          {failed && (\n            <p className=\"mt-3 text-xs text-[var(--error)]\">{failed}</p>\n          )}\n        </div>\n      </div>\n\n      {/* Outside the card: React events bubble through the dialog's portal,\n          so a file dropped into the chooser would reach the card's drop\n          handler too and upload twice. */}\n      <MediaLibraryPicker\n        open={choosing}\n        onOpenChange={setChoosing}\n        remaining={room}\n        accept=\"media\"\n        title=\"My photos\"\n        onPick={(picked) =>\n          onGalleryItemsChange((prev) => [...prev, ...galleryToMedia(picked)])\n        }\n      />\n      {BOX_MEDIA_CAMERA && (\n        <ProductCamera\n          open={shooting}\n          onClose={() => setShooting(false)}\n          galleryItems={galleryItems}\n          onGalleryItemsChange={onGalleryItemsChange}\n          onPhotos={(files) => void ingest(files)}\n          onProductScan={onProductScan}\n        />\n      )}\n    </section>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/product-editor/sections/organize-section.d.ts

@@ -0,0 +1,20 @@
+import type { ContentItem } from '@withpotter/lib/api';
+interface OrganizeSectionProps {
+    /**
+     * Filing that is specific to what this item IS — the category picker. It
+     * arrives as children rather than as ten more props, so this card owns the
+     * heading and the spacing and knows nothing about categories.
+     */
+    children?: React.ReactNode;
+    isActive: boolean;
+    setIsActive: (v: boolean) => void;
+    featured: boolean;
+    setFeatured: (v: boolean) => void;
+    allCollections: ContentItem[];
+    selectedCollectionIds: Set<string>;
+    onSelectedCollectionIdsChange: React.Dispatch<React.SetStateAction<Set<string>>>;
+    collectionsLoading: boolean;
+    singularName: string;
+}
+export declare function OrganizeSection({ isActive, setIsActive, featured, setFeatured, children, allCollections, selectedCollectionIds, onSelectedCollectionIdsChange, collectionsLoading, singularName, }: OrganizeSectionProps): import("react").JSX.Element;
+export {};

package/dist/product-editor/sections/organize-section.js

@@ -0,0 +1,93 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CollectionPicker } from "@withpotter/ui-kit/collection-picker";
+import { EditorSectionHeader } from "./section-header";
+import { OptionButton, Checkbox } from "@withpotter/ui-kit";
+function OrganizeSection({
+  isActive,
+  setIsActive,
+  featured,
+  setFeatured,
+  children,
+  allCollections,
+  selectedCollectionIds,
+  onSelectedCollectionIdsChange,
+  collectionsLoading,
+  singularName
+}) {
+  const hasCollections = allCollections.length > 0 || collectionsLoading;
+  return /* @__PURE__ */ jsx("section", { id: "section-organize", className: "scroll-mt-36", children: /* @__PURE__ */ jsxs("div", { className: "surface", children: [
+    /* @__PURE__ */ jsx(EditorSectionHeader, { title: "Visibility & placement" }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-4 p-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-[var(--text-secondary)]", children: "Status" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            OptionButton,
+            {
+              selected: isActive,
+              onClick: () => setIsActive(true),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `h-1.5 w-1.5 rounded-full ${isActive ? "bg-[var(--success)]" : "bg-[var(--text-muted)]"}`
+                  }
+                ),
+                "Published"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            OptionButton,
+            {
+              selected: !isActive,
+              onClick: () => setIsActive(false),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `h-1.5 w-1.5 rounded-full ${!isActive ? "bg-[var(--warning)]" : "bg-[var(--text-muted)]"}`
+                  }
+                ),
+                "Draft"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-tertiary)]", children: isActive ? "Published: customers can see and buy this." : "Draft: hidden from customers until you publish it." })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "border-t border-[var(--border-subtle)] pt-4", children: [
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: featured,
+            onChange: (e) => setFeatured(e.target.checked),
+            label: /* @__PURE__ */ jsxs("span", { className: "font-medium text-[var(--text-primary)]", children: [
+              "Featured ",
+              singularName.toLowerCase()
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { className: "ml-6 mt-1 max-w-sm text-xs text-[var(--text-tertiary)]", children: "Featured items are highlighted on your business page" })
+      ] }),
+      children && /* @__PURE__ */ jsxs("div", { className: "border-t border-[var(--border-subtle)] pt-4", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-[var(--text-secondary)] mb-2", children: "Category" }),
+        children
+      ] }),
+      hasCollections && /* @__PURE__ */ jsx("div", { className: "border-t border-[var(--border-subtle)] pt-4", children: /* @__PURE__ */ jsx(
+        CollectionPicker,
+        {
+          allCollections,
+          selectedIds: selectedCollectionIds,
+          onSelectedChange: onSelectedCollectionIdsChange,
+          loading: collectionsLoading
+        }
+      ) })
+    ] })
+  ] }) });
+}
+export {
+  OrganizeSection
+};
+//# sourceMappingURL=organize-section.js.map

package/dist/product-editor/sections/organize-section.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/product-editor/sections/organize-section.tsx"],"sourcesContent":["'use client';\n\nimport { CollectionPicker } from '@withpotter/ui-kit/collection-picker';\nimport type { ContentItem } from '@withpotter/lib/api';\nimport { EditorSectionHeader } from './section-header';\nimport { OptionButton, Checkbox } from '@withpotter/ui-kit';\n\ninterface OrganizeSectionProps {\n  /**\n   * Filing that is specific to what this item IS — the category picker. It\n   * arrives as children rather than as ten more props, so this card owns the\n   * heading and the spacing and knows nothing about categories.\n   */\n  children?: React.ReactNode;\n  isActive: boolean;\n  setIsActive: (v: boolean) => void;\n  featured: boolean;\n  setFeatured: (v: boolean) => void;\n  allCollections: ContentItem[];\n  selectedCollectionIds: Set<string>;\n  onSelectedCollectionIdsChange: React.Dispatch<\n    React.SetStateAction<Set<string>>\n  >;\n  collectionsLoading: boolean;\n  singularName: string;\n}\n\nexport function OrganizeSection({\n  isActive,\n  setIsActive,\n  featured,\n  setFeatured,\n  children,\n  allCollections,\n  selectedCollectionIds,\n  onSelectedCollectionIdsChange,\n  collectionsLoading,\n  singularName,\n}: OrganizeSectionProps) {\n  const hasCollections = allCollections.length > 0 || collectionsLoading;\n\n  return (\n    <section id=\"section-organize\" className=\"scroll-mt-36\">\n      <div className=\"surface\">\n        <EditorSectionHeader title=\"Visibility & placement\" />\n        <div className=\"space-y-4 p-4\">\n          {/* Status */}\n          <div className=\"space-y-2\">\n            <label className=\"block text-sm font-medium text-[var(--text-secondary)]\">\n              Status\n            </label>\n            {/* Chosen, not fired, so it is OptionButton and not two Buttons\n                wearing a conditional variant. `pill`, not `card`, and sized to\n                its words rather than stretched across the rail: card shape\n                stands 36px against a 28px Button, which puts the tallest\n                control on the page on a two-state setting. */}\n            <div className=\"flex gap-2\">\n              <OptionButton\n                selected={isActive}\n                onClick={() => setIsActive(true)}\n              >\n                <span\n                  className={`h-1.5 w-1.5 rounded-full ${isActive ? 'bg-[var(--success)]' : 'bg-[var(--text-muted)]'}`}\n                />\n                Published\n              </OptionButton>\n              <OptionButton\n                selected={!isActive}\n                onClick={() => setIsActive(false)}\n              >\n                <span\n                  className={`h-1.5 w-1.5 rounded-full ${!isActive ? 'bg-[var(--warning)]' : 'bg-[var(--text-muted)]'}`}\n                />\n                Draft\n              </OptionButton>\n            </div>\n            {/* Said in words, because two near-identical pills do not tell a\n                merchant which one is on, or what it does to the item. The\n                line follows the chosen one. */}\n            <p className=\"text-xs text-[var(--text-tertiary)]\">\n              {isActive\n                ? 'Published: customers can see and buy this.'\n                : 'Draft: hidden from customers until you publish it.'}\n            </p>\n          </div>\n\n          {/* Featured */}\n          <div className=\"border-t border-[var(--border-subtle)] pt-4\">\n            <Checkbox\n              checked={featured}\n              onChange={(e) => setFeatured(e.target.checked)}\n              label={\n                <span className=\"font-medium text-[var(--text-primary)]\">\n                  Featured {singularName.toLowerCase()}\n                </span>\n              }\n            />\n            <p className=\"ml-6 mt-1 max-w-sm text-xs text-[var(--text-tertiary)]\">\n              Featured items are highlighted on your business page\n            </p>\n          </div>\n\n          {children && (\n            <div className=\"border-t border-[var(--border-subtle)] pt-4\">\n              <h3 className=\"text-sm font-medium text-[var(--text-secondary)] mb-2\">\n                Category\n              </h3>\n              {children}\n            </div>\n          )}\n\n          {/* Collections */}\n          {hasCollections && (\n            <div className=\"border-t border-[var(--border-subtle)] pt-4\">\n              <CollectionPicker\n                allCollections={allCollections}\n                selectedIds={selectedCollectionIds}\n                onSelectedChange={onSelectedCollectionIdsChange}\n                loading={collectionsLoading}\n              />\n            </div>\n          )}\n        </div>\n      </div>\n    </section>\n  );\n}\n"],"mappings":";AA4CQ,cAaM,YAbN;AA1CR,SAAS,wBAAwB;AAEjC,SAAS,2BAA2B;AACpC,SAAS,cAAc,gBAAgB;AAsBhC,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,iBAAiB,eAAe,SAAS,KAAK;AAEpD,SACE,oBAAC,aAAQ,IAAG,oBAAmB,WAAU,gBACvC,+BAAC,SAAI,WAAU,WACb;AAAA,wBAAC,uBAAoB,OAAM,0BAAyB;AAAA,IACpD,qBAAC,SAAI,WAAU,iBAEb;AAAA,2BAAC,SAAI,WAAU,aACb;AAAA,4BAAC,WAAM,WAAU,0DAAyD,oBAE1E;AAAA,QAMA,qBAAC,SAAI,WAAU,cACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,UAAU;AAAA,cACV,SAAS,MAAM,YAAY,IAAI;AAAA,cAE/B;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAW,4BAA4B,WAAW,wBAAwB,wBAAwB;AAAA;AAAA,gBACpG;AAAA,gBAAE;AAAA;AAAA;AAAA,UAEJ;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,UAAU,CAAC;AAAA,cACX,SAAS,MAAM,YAAY,KAAK;AAAA,cAEhC;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAW,4BAA4B,CAAC,WAAW,wBAAwB,wBAAwB;AAAA;AAAA,gBACrG;AAAA,gBAAE;AAAA;AAAA;AAAA,UAEJ;AAAA,WACF;AAAA,QAIA,oBAAC,OAAE,WAAU,uCACV,qBACG,+CACA,sDACN;AAAA,SACF;AAAA,MAGA,qBAAC,SAAI,WAAU,+CACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,UAAU,CAAC,MAAM,YAAY,EAAE,OAAO,OAAO;AAAA,YAC7C,OACE,qBAAC,UAAK,WAAU,0CAAyC;AAAA;AAAA,cAC7C,aAAa,YAAY;AAAA,eACrC;AAAA;AAAA,QAEJ;AAAA,QACA,oBAAC,OAAE,WAAU,0DAAyD,kEAEtE;AAAA,SACF;AAAA,MAEC,YACC,qBAAC,SAAI,WAAU,+CACb;AAAA,4BAAC,QAAG,WAAU,yDAAwD,sBAEtE;AAAA,QACC;AAAA,SACH;AAAA,MAID,kBACC,oBAAC,SAAI,WAAU,+CACb;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,aAAa;AAAA,UACb,kBAAkB;AAAA,UAClB,SAAS;AAAA;AAAA,MACX,GACF;AAAA,OAEJ;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/product-editor/sections/pricing-inventory-section.d.ts

@@ -0,0 +1,18 @@
+interface PricingInventorySectionProps {
+    sku: string;
+    onSkuChange: (v: string) => void;
+    price: number | undefined;
+    compareAtPrice: number | undefined;
+    onPriceChange: (v: number | undefined) => void;
+    onCompareAtPriceChange: (v: number | undefined) => void;
+    currencySymbol: string;
+    trackInventory: boolean;
+    onTrackInventoryChange: (v: boolean) => void;
+    quantity: number | '';
+    onQuantityChange: (v: number | '') => void;
+    lowStockThreshold: number | '';
+    onLowStockThresholdChange: (v: number | '') => void;
+    showInventory: boolean;
+}
+export declare function PricingInventorySection({ sku, onSkuChange, price, compareAtPrice, onPriceChange, onCompareAtPriceChange, currencySymbol, trackInventory, onTrackInventoryChange, quantity, onQuantityChange, lowStockThreshold, onLowStockThresholdChange, showInventory, }: PricingInventorySectionProps): import("react").JSX.Element;
+export {};