@withpotter/components 0.13.0-next.101

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

@@ -0,0 +1,382 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Type,
+  Image,
+  Coins,
+  Layers,
+  FolderOpen,
+  Settings2,
+  Sliders,
+  Lock,
+  Users
+} from "lucide-react";
+import {
+  isBehaviorEnabled
+} from "@withpotter/lib/product-types";
+import { SortableGallery } from "@withpotter/ui-kit/sortable-gallery";
+import { CollectionPicker } from "@withpotter/ui-kit/collection-picker";
+import { Input, Checkbox } from "@withpotter/ui-kit";
+import { MobileCategoryPicker } from "./mobile-category-picker";
+import { MobileEditorSection } from "./mobile-editor-section";
+import { GeneralSection } from "./sections/general-section";
+import { VariantsSection } from "./sections/variants-section";
+import { CustomFieldsSection } from "./sections/custom-fields-section";
+import {
+  TemplateFieldsSection
+} from "./sections/template-fields-section";
+import {
+  FeaturesSection,
+  getAdditiveBehaviors
+} from "./sections/features-section";
+import { GatingSection } from "./sections/behavior-section";
+import { AssignmentSection } from "./sections/assignment-section";
+import { MobileProductEditorBehaviorSections } from "./mobile-product-editor-behavior-sections";
+import { canCarryAssignees } from "@withpotter/hooks/use-api-dispatch";
+import {
+  mediaSummary,
+  inventorySummary,
+  variantsSummary,
+  categorySummary,
+  organizeSummary,
+  descriptionSummary
+} from "./section-summaries";
+function MobileProductEditorSections({
+  state,
+  formValues,
+  setFormValues,
+  tenantCategories,
+  tenantSlug,
+  contentTypeSchemas,
+  templateFieldGroups,
+  savedCustomFieldDefinitions,
+  onSaveCustomFieldDefinition,
+  onRemoveCustomFieldDefinition,
+  onCreateCategory,
+  onDeleteCategory,
+  onCreateSeries,
+  isSeriesChild,
+  canSeeProfitability
+}) {
+  const hasBookable = isBehaviorEnabled(
+    state.behaviorConfigs.bookable
+  );
+  const additiveBehaviors = getAdditiveBehaviors(
+    state.availableBehaviors
+  );
+  const hasCollections = state.allCollections.length > 0 || state.collectionsLoading;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3 pt-2", children: [
+    /* @__PURE__ */ jsx(
+      MobileEditorSection,
+      {
+        id: "section-general",
+        icon: Type,
+        iconTint: "bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400",
+        label: "Description & details",
+        summary: descriptionSummary(state.description),
+        children: /* @__PURE__ */ jsx(
+          GeneralSection,
+          {
+            title: state.title,
+            setTitle: state.setTitle,
+            slug: state.slug,
+            setSlug: state.setSlug,
+            slugManuallyEdited: state.slugManuallyEdited,
+            setSlugManuallyEdited: state.setSlugManuallyEdited,
+            description: state.description,
+            setDescription: state.setDescription,
+            formValues,
+            setFormValues,
+            isEditing: state.isEditing,
+            bare: true,
+            hideTitle: true,
+            hideSlug: true
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MobileEditorSection,
+      {
+        id: "section-media",
+        icon: Image,
+        iconTint: "bg-violet-100 text-violet-600 dark:bg-violet-900/30 dark:text-violet-400",
+        label: "Media",
+        summary: mediaSummary(
+          state.galleryItems.length,
+          Boolean(state.heroImage)
+        ),
+        children: /* @__PURE__ */ jsx(
+          SortableGallery,
+          {
+            items: state.galleryItems,
+            onItemsChange: state.setGalleryItems,
+            onSetAsHero: (item) => state.setHeroImage(item),
+            coverUrl: state.heroImage?.url,
+            hideLabel: true
+          }
+        )
+      }
+    ),
+    !hasBookable && /* @__PURE__ */ jsx(
+      MobileEditorSection,
+      {
+        id: "section-pricing",
+        icon: Coins,
+        iconTint: "bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400",
+        label: "Inventory",
+        summary: inventorySummary(state.trackInventory, state.quantity),
+        children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("label", { className: "mb-1 block text-sm font-medium text-[var(--text-secondary)]", children: [
+              "SKU",
+              " ",
+              /* @__PURE__ */ jsx("span", { className: "font-normal text-[var(--text-tertiary)]", children: "(optional)" })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                value: typeof formValues.sku === "string" ? formValues.sku : "",
+                onChange: (event) => setFormValues({
+                  ...formValues,
+                  sku: event.target.value || void 0
+                }),
+                placeholder: "Add a SKU",
+                className: "w-full"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: state.trackInventory,
+                onChange: (e) => state.setTrackInventory(e.target.checked),
+                label: "Track inventory"
+              }
+            ),
+            state.trackInventory && /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: "Quantity" }),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    type: "number",
+                    min: 0,
+                    value: state.quantity,
+                    onChange: (e) => state.setQuantity(
+                      e.target.value === "" ? "" : parseInt(e.target.value, 10)
+                    ),
+                    className: "w-full"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: "Low stock alert" }),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    type: "number",
+                    min: 0,
+                    value: state.lowStockThreshold,
+                    onChange: (e) => state.setLowStockThreshold(
+                      e.target.value === "" ? "" : parseInt(e.target.value, 10)
+                    ),
+                    className: "w-full"
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MobileEditorSection,
+      {
+        id: "section-variants",
+        icon: Layers,
+        iconTint: "bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400",
+        label: "Variants",
+        summary: variantsSummary(state.hasVariants, state.variants.length),
+        children: /* @__PURE__ */ jsx(
+          VariantsSection,
+          {
+            hasVariants: state.hasVariants,
+            setHasVariants: state.setHasVariants,
+            variants: state.variants,
+            setVariants: state.setVariants,
+            variantOptions: state.variantOptions,
+            setVariantOptions: state.setVariantOptions,
+            defaultPrice: state.price,
+            currencySymbol: state.currencySymbol,
+            showProfitability: canSeeProfitability,
+            bare: true
+          }
+        )
+      }
+    ),
+    state.hasCategoryField && /* @__PURE__ */ jsx(
+      MobileEditorSection,
+      {
+        id: "section-category",
+        icon: FolderOpen,
+        iconTint: "bg-teal-100 text-teal-600 dark:bg-teal-900/30 dark:text-teal-400",
+        label: "Category",
+        summary: categorySummary(state.categories),
+        children: /* @__PURE__ */ jsx(
+          MobileCategoryPicker,
+          {
+            categories: state.categories,
+            onChange: state.setCategories,
+            categoryKey: state.categoryKey,
+            tenantCategories,
+            onCreateCategory,
+            onDeleteCategory
+          }
+        )
+      }
+    ),
+    (contentTypeSchemas.products ?? []).length > 0 && /* @__PURE__ */ jsx(
+      MobileEditorSection,
+      {
+        id: "section-templateFields",
+        icon: Settings2,
+        iconTint: "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400",
+        label: "Details",
+        children: /* @__PURE__ */ jsx(
+          TemplateFieldsSection,
+          {
+            fields: contentTypeSchemas.products ?? [],
+            fieldGroups: templateFieldGroups,
+            formValues,
+            setFormValues,
+            tenantCurrency: state.tenantCurrency,
+            tenantCategories,
+            tenantSlug,
+            bare: true
+          }
+        )
+      }
+    ),
+    savedCustomFieldDefinitions.length > 0 && /* @__PURE__ */ jsx(
+      MobileEditorSection,
+      {
+        id: "section-customFields",
+        icon: Settings2,
+        iconTint: "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400",
+        label: "Customer information",
+        children: /* @__PURE__ */ jsx(
+          CustomFieldsSection,
+          {
+            formValues,
+            setFormValues,
+            savedDefinitions: savedCustomFieldDefinitions,
+            onSaveDefinition: onSaveCustomFieldDefinition,
+            onRemoveDefinition: onRemoveCustomFieldDefinition,
+            bare: true
+          }
+        )
+      }
+    ),
+    additiveBehaviors.length > 0 && /* @__PURE__ */ jsx(
+      MobileEditorSection,
+      {
+        id: "section-features",
+        icon: Sliders,
+        iconTint: "bg-cyan-100 text-cyan-600 dark:bg-cyan-900/30 dark:text-cyan-400",
+        label: "Additional capabilities",
+        children: /* @__PURE__ */ jsx(
+          FeaturesSection,
+          {
+            industryBehaviors: state.availableBehaviors,
+            behaviorConfigs: state.behaviorConfigs,
+            setBehaviorConfigs: state.setBehaviorConfigs,
+            behaviorLabelOverrides: state.behaviorLabelOverrides,
+            bare: true
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MobileProductEditorBehaviorSections,
+      {
+        state,
+        onCreateSeries,
+        isSeriesChild
+      }
+    ),
+    state.activePlans.length > 0 && /* @__PURE__ */ jsx(
+      MobileEditorSection,
+      {
+        id: "section-gating",
+        icon: Lock,
+        iconTint: "bg-yellow-100 text-yellow-600 dark:bg-yellow-900/30 dark:text-yellow-400",
+        label: "Access & gating",
+        children: /* @__PURE__ */ jsx(
+          GatingSection,
+          {
+            gatedBy: state.gatedBy,
+            onChange: state.setGatedBy,
+            gatedByPlanIds: state.gatedByPlanIds,
+            onPlanIdsChange: state.setGatedByPlanIds,
+            linkedPlanName: state.linkedPlanName,
+            activePlans: state.activePlans,
+            bare: true
+          }
+        )
+      }
+    ),
+    (canCarryAssignees(state.behaviorConfigs) || state.assigneeIds.length > 0) && /* @__PURE__ */ jsx(
+      MobileEditorSection,
+      {
+        id: "section-assignment",
+        icon: Users,
+        iconTint: "bg-indigo-100 text-indigo-600 dark:bg-indigo-900/30 dark:text-indigo-400",
+        label: "Assigned staff",
+        summary: state.assigneeIds.length === 0 ? "No one assigned" : `${state.assigneeIds.length} assigned`,
+        children: /* @__PURE__ */ jsx(
+          AssignmentSection,
+          {
+            assigneeIds: state.assigneeIds,
+            onAssigneeIdsChange: state.setAssigneeIds,
+            bare: true
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MobileEditorSection,
+      {
+        id: "section-organize",
+        icon: FolderOpen,
+        iconTint: "bg-rose-100 text-rose-600 dark:bg-rose-900/30 dark:text-rose-400",
+        label: "Visibility & placement",
+        summary: organizeSummary(state.isActive, state.featured),
+        children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: state.featured,
+              onChange: (e) => state.setFeatured(e.target.checked),
+              label: "Featured product"
+            }
+          ),
+          hasCollections && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+            CollectionPicker,
+            {
+              allCollections: state.allCollections,
+              selectedIds: state.selectedCollectionIds,
+              onSelectedChange: state.setSelectedCollectionIds,
+              loading: state.collectionsLoading
+            }
+          ) })
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  MobileProductEditorSections
+};
+//# sourceMappingURL=mobile-product-editor-sections.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/product-editor/mobile-product-editor-sections.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Type,\n  Image,\n  Coins,\n  Layers,\n  FolderOpen,\n  Settings2,\n  Sliders,\n  Lock,\n  Users,\n} from 'lucide-react';\nimport {\n  isBehaviorEnabled,\n  type EventRecurrenceRule,\n} from '@withpotter/lib/product-types';\nimport type { ContentBehavior, ContentFieldConfig } from '@withpotter/lib/template-types';\nimport type { ProductFormState } from '@withpotter/hooks/use-product-form-state';\nimport type { CustomFieldDefinition } from '@withpotter/components/custom-fields-step';\nimport { SortableGallery } from '@withpotter/ui-kit/sortable-gallery';\nimport { CollectionPicker } from '@withpotter/ui-kit/collection-picker';\nimport { Input, Checkbox } from '@withpotter/ui-kit';\nimport { MobileCategoryPicker } from './mobile-category-picker';\nimport { MobileEditorSection } from './mobile-editor-section';\nimport { GeneralSection } from './sections/general-section';\nimport { VariantsSection } from './sections/variants-section';\nimport { CustomFieldsSection } from './sections/custom-fields-section';\nimport {\n  TemplateFieldsSection,\n  type TemplateFieldGroup,\n} from './sections/template-fields-section';\nimport {\n  FeaturesSection,\n  getAdditiveBehaviors,\n} from './sections/features-section';\nimport { GatingSection } from './sections/behavior-section';\nimport { AssignmentSection } from './sections/assignment-section';\nimport { MobileProductEditorBehaviorSections } from './mobile-product-editor-behavior-sections';\nimport { canCarryAssignees } from '@withpotter/hooks/use-api-dispatch';\nimport {\n  mediaSummary,\n  inventorySummary,\n  variantsSummary,\n  categorySummary,\n  organizeSummary,\n  descriptionSummary,\n} from './section-summaries';\n\ninterface MobileProductEditorSectionsProps {\n  state: ProductFormState;\n  formValues: Record<string, unknown>;\n  setFormValues: (v: Record<string, unknown>) => void;\n  tenantCategories: Record<\n    string,\n    { value: string; label: string; sortOrder?: number }[]\n  >;\n  tenantSlug?: string;\n  contentTypeSchemas: Record<string, ContentFieldConfig[]>;\n  templateFieldGroups?: TemplateFieldGroup[];\n  savedCustomFieldDefinitions: CustomFieldDefinition[];\n  onSaveCustomFieldDefinition: (def: CustomFieldDefinition) => void;\n  onRemoveCustomFieldDefinition: (key: string) => void;\n  onCreateCategory?: (label: string) => void;\n  onDeleteCategory?: (value: string) => void;\n  onCreateSeries?: (recurrence: EventRecurrenceRule) => Promise<void>;\n  isSeriesChild?: boolean;\n  canSeeProfitability: boolean;\n}\n\nexport function MobileProductEditorSections({\n  state,\n  formValues,\n  setFormValues,\n  tenantCategories,\n  tenantSlug,\n  contentTypeSchemas,\n  templateFieldGroups,\n  savedCustomFieldDefinitions,\n  onSaveCustomFieldDefinition,\n  onRemoveCustomFieldDefinition,\n  onCreateCategory,\n  onDeleteCategory,\n  onCreateSeries,\n  isSeriesChild,\n  canSeeProfitability,\n}: MobileProductEditorSectionsProps) {\n  const hasBookable = isBehaviorEnabled(\n    (state.behaviorConfigs as Record<string, unknown>).bookable,\n  );\n  const additiveBehaviors = getAdditiveBehaviors(\n    state.availableBehaviors as ContentBehavior[],\n  );\n  const hasCollections =\n    state.allCollections.length > 0 || state.collectionsLoading;\n\n  return (\n    <div className=\"space-y-3 pt-2\">\n      <MobileEditorSection\n        id=\"section-general\"\n        icon={Type}\n        iconTint=\"bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400\"\n        label=\"Description & details\"\n        summary={descriptionSummary(state.description)}\n      >\n        <GeneralSection\n          title={state.title}\n          setTitle={state.setTitle}\n          slug={state.slug}\n          setSlug={state.setSlug}\n          slugManuallyEdited={state.slugManuallyEdited}\n          setSlugManuallyEdited={state.setSlugManuallyEdited}\n          description={state.description}\n          setDescription={state.setDescription}\n          formValues={formValues}\n          setFormValues={setFormValues}\n          isEditing={state.isEditing}\n          bare\n          hideTitle\n          hideSlug\n        />\n      </MobileEditorSection>\n\n      <MobileEditorSection\n        id=\"section-media\"\n        icon={Image}\n        iconTint=\"bg-violet-100 text-violet-600 dark:bg-violet-900/30 dark:text-violet-400\"\n        label=\"Media\"\n        summary={mediaSummary(\n          state.galleryItems.length,\n          Boolean(state.heroImage),\n        )}\n      >\n        <SortableGallery\n          items={state.galleryItems}\n          onItemsChange={state.setGalleryItems}\n          onSetAsHero={(item) => state.setHeroImage(item)}\n          coverUrl={state.heroImage?.url}\n          hideLabel\n        />\n      </MobileEditorSection>\n\n      {!hasBookable && (\n        <MobileEditorSection\n          id=\"section-pricing\"\n          icon={Coins}\n          iconTint=\"bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400\"\n          label=\"Inventory\"\n          summary={inventorySummary(state.trackInventory, state.quantity)}\n        >\n          <div className=\"space-y-2\">\n            <div>\n              <label className=\"mb-1 block text-sm font-medium text-[var(--text-secondary)]\">\n                SKU{' '}\n                <span className=\"font-normal text-[var(--text-tertiary)]\">\n                  (optional)\n                </span>\n              </label>\n              <Input\n                value={typeof formValues.sku === 'string' ? formValues.sku : ''}\n                onChange={(event) =>\n                  setFormValues({\n                    ...formValues,\n                    sku: event.target.value || undefined,\n                  })\n                }\n                placeholder=\"Add a SKU\"\n                className=\"w-full\"\n              />\n            </div>\n            <div className=\"space-y-2\">\n              <Checkbox\n                checked={state.trackInventory}\n                onChange={(e) => state.setTrackInventory(e.target.checked)}\n                label=\"Track inventory\"\n              />\n              {state.trackInventory && (\n                <div className=\"grid grid-cols-2 gap-4\">\n                  <div>\n                    <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-1\">\n                      Quantity\n                    </label>\n                    <Input\n                      type=\"number\"\n                      min={0}\n                      value={state.quantity}\n                      onChange={(e) =>\n                        state.setQuantity(\n                          e.target.value === ''\n                            ? ''\n                            : parseInt(e.target.value, 10),\n                        )\n                      }\n                      className=\"w-full\"\n                    />\n                  </div>\n                  <div>\n                    <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-1\">\n                      Low stock alert\n                    </label>\n                    <Input\n                      type=\"number\"\n                      min={0}\n                      value={state.lowStockThreshold}\n                      onChange={(e) =>\n                        state.setLowStockThreshold(\n                          e.target.value === ''\n                            ? ''\n                            : parseInt(e.target.value, 10),\n                        )\n                      }\n                      className=\"w-full\"\n                    />\n                  </div>\n                </div>\n              )}\n            </div>\n          </div>\n        </MobileEditorSection>\n      )}\n\n      <MobileEditorSection\n        id=\"section-variants\"\n        icon={Layers}\n        iconTint=\"bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400\"\n        label=\"Variants\"\n        summary={variantsSummary(state.hasVariants, state.variants.length)}\n      >\n        <VariantsSection\n          hasVariants={state.hasVariants}\n          setHasVariants={state.setHasVariants}\n          variants={state.variants}\n          setVariants={state.setVariants}\n          variantOptions={state.variantOptions}\n          setVariantOptions={state.setVariantOptions}\n          defaultPrice={state.price}\n          currencySymbol={state.currencySymbol}\n          showProfitability={canSeeProfitability}\n          bare\n        />\n      </MobileEditorSection>\n\n      {state.hasCategoryField && (\n        <MobileEditorSection\n          id=\"section-category\"\n          icon={FolderOpen}\n          iconTint=\"bg-teal-100 text-teal-600 dark:bg-teal-900/30 dark:text-teal-400\"\n          label=\"Category\"\n          summary={categorySummary(state.categories)}\n        >\n          <MobileCategoryPicker\n            categories={state.categories}\n            onChange={state.setCategories}\n            categoryKey={state.categoryKey}\n            tenantCategories={tenantCategories}\n            onCreateCategory={onCreateCategory}\n            onDeleteCategory={onDeleteCategory}\n          />\n        </MobileEditorSection>\n      )}\n\n      {(contentTypeSchemas.products ?? []).length > 0 && (\n        <MobileEditorSection\n          id=\"section-templateFields\"\n          icon={Settings2}\n          iconTint=\"bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400\"\n          label=\"Details\"\n        >\n          <TemplateFieldsSection\n            fields={contentTypeSchemas.products ?? []}\n            fieldGroups={templateFieldGroups}\n            formValues={formValues}\n            setFormValues={setFormValues}\n            tenantCurrency={state.tenantCurrency}\n            tenantCategories={tenantCategories}\n            tenantSlug={tenantSlug}\n            bare\n          />\n        </MobileEditorSection>\n      )}\n\n      {savedCustomFieldDefinitions.length > 0 && (\n        <MobileEditorSection\n          id=\"section-customFields\"\n          icon={Settings2}\n          iconTint=\"bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400\"\n          label=\"Customer information\"\n        >\n          <CustomFieldsSection\n            formValues={formValues}\n            setFormValues={setFormValues}\n            savedDefinitions={savedCustomFieldDefinitions}\n            onSaveDefinition={onSaveCustomFieldDefinition}\n            onRemoveDefinition={onRemoveCustomFieldDefinition}\n            bare\n          />\n        </MobileEditorSection>\n      )}\n\n      {additiveBehaviors.length > 0 && (\n        <MobileEditorSection\n          id=\"section-features\"\n          icon={Sliders}\n          iconTint=\"bg-cyan-100 text-cyan-600 dark:bg-cyan-900/30 dark:text-cyan-400\"\n          label=\"Additional capabilities\"\n        >\n          <FeaturesSection\n            industryBehaviors={state.availableBehaviors}\n            behaviorConfigs={state.behaviorConfigs}\n            setBehaviorConfigs={state.setBehaviorConfigs}\n            behaviorLabelOverrides={state.behaviorLabelOverrides}\n            bare\n          />\n        </MobileEditorSection>\n      )}\n\n      <MobileProductEditorBehaviorSections\n        state={state}\n        onCreateSeries={onCreateSeries}\n        isSeriesChild={isSeriesChild}\n      />\n\n      {state.activePlans.length > 0 && (\n        <MobileEditorSection\n          id=\"section-gating\"\n          icon={Lock}\n          iconTint=\"bg-yellow-100 text-yellow-600 dark:bg-yellow-900/30 dark:text-yellow-400\"\n          label=\"Access & gating\"\n        >\n          <GatingSection\n            gatedBy={state.gatedBy}\n            onChange={state.setGatedBy}\n            gatedByPlanIds={state.gatedByPlanIds}\n            onPlanIdsChange={state.setGatedByPlanIds}\n            linkedPlanName={state.linkedPlanName}\n            activePlans={state.activePlans}\n            bare\n          />\n        </MobileEditorSection>\n      )}\n\n      {(canCarryAssignees(state.behaviorConfigs) ||\n        state.assigneeIds.length > 0) && (\n        <MobileEditorSection\n          id=\"section-assignment\"\n          icon={Users}\n          iconTint=\"bg-indigo-100 text-indigo-600 dark:bg-indigo-900/30 dark:text-indigo-400\"\n          label=\"Assigned staff\"\n          summary={\n            state.assigneeIds.length === 0\n              ? 'No one assigned'\n              : `${state.assigneeIds.length} assigned`\n          }\n        >\n          <AssignmentSection\n            assigneeIds={state.assigneeIds}\n            onAssigneeIdsChange={state.setAssigneeIds}\n            bare\n          />\n        </MobileEditorSection>\n      )}\n\n      <MobileEditorSection\n        id=\"section-organize\"\n        icon={FolderOpen}\n        iconTint=\"bg-rose-100 text-rose-600 dark:bg-rose-900/30 dark:text-rose-400\"\n        label=\"Visibility & placement\"\n        summary={organizeSummary(state.isActive, state.featured)}\n      >\n        <div className=\"space-y-4\">\n          <Checkbox\n            checked={state.featured}\n            onChange={(e) => state.setFeatured(e.target.checked)}\n            label=\"Featured product\"\n          />\n          {hasCollections && (\n            <div>\n              <CollectionPicker\n                allCollections={state.allCollections}\n                selectedIds={state.selectedCollectionIds}\n                onSelectedChange={state.setSelectedCollectionIds}\n                loading={state.collectionsLoading}\n              />\n            </div>\n          )}\n        </div>\n      </MobileEditorSection>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/product-editor/mobile-status-toggle.d.ts

@@ -0,0 +1,6 @@
+interface MobileStatusToggleProps {
+    isActive: boolean;
+    onChange: (v: boolean) => void;
+}
+export declare function MobileStatusToggle({ isActive, onChange, }: MobileStatusToggleProps): import("react").JSX.Element;
+export {};

package/dist/product-editor/mobile-status-toggle.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+function MobileStatusToggle({
+  isActive,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `w-2 h-2 rounded-full ${isActive ? "bg-[var(--success)]" : "bg-[var(--text-muted)]"}`
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--text-primary)]", children: isActive ? "Published" : "Draft" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        role: "switch",
+        "aria-checked": isActive,
+        "aria-label": isActive ? "Unpublish" : "Publish",
+        onClick: () => onChange(!isActive),
+        className: `relative inline-flex h-[31px] w-[51px] items-center rounded-full transition-colors ${isActive ? "bg-[var(--success)]" : "bg-[var(--bg-muted)]"}`,
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `inline-block h-[27px] w-[27px] rounded-full bg-white transition-transform ${isActive ? "translate-x-[22px]" : "translate-x-[2px]"}`
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  MobileStatusToggle
+};
+//# sourceMappingURL=mobile-status-toggle.js.map

package/dist/product-editor/mobile-status-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/product-editor/mobile-status-toggle.tsx"],"sourcesContent":["'use client';\n\ninterface MobileStatusToggleProps {\n  isActive: boolean;\n  onChange: (v: boolean) => void;\n}\n\nexport function MobileStatusToggle({\n  isActive,\n  onChange,\n}: MobileStatusToggleProps) {\n  return (\n    <div className=\"flex items-center justify-between py-1\">\n      <div className=\"flex items-center gap-3\">\n        <span\n          className={`w-2 h-2 rounded-full ${isActive ? 'bg-[var(--success)]' : 'bg-[var(--text-muted)]'}`}\n        />\n        <span className=\"text-sm font-medium text-[var(--text-primary)]\">\n          {isActive ? 'Published' : 'Draft'}\n        </span>\n      </div>\n      <button\n        type=\"button\"\n        role=\"switch\"\n        aria-checked={isActive}\n        aria-label={isActive ? 'Unpublish' : 'Publish'}\n        onClick={() => onChange(!isActive)}\n        className={`relative inline-flex h-[31px] w-[51px] items-center rounded-full transition-colors ${\n          isActive ? 'bg-[var(--success)]' : 'bg-[var(--bg-muted)]'\n        }`}\n      >\n        <span\n          className={`inline-block h-[27px] w-[27px] rounded-full bg-white transition-transform ${\n            isActive ? 'translate-x-[22px]' : 'translate-x-[2px]'\n          }`}\n        />\n      </button>\n    </div>\n  );\n}\n"],"mappings":";AAaM,SACE,KADF;AANC,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AACF,GAA4B;AAC1B,SACE,qBAAC,SAAI,WAAU,0CACb;AAAA,yBAAC,SAAI,WAAU,2BACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,wBAAwB,WAAW,wBAAwB,wBAAwB;AAAA;AAAA,MAChG;AAAA,MACA,oBAAC,UAAK,WAAU,kDACb,qBAAW,cAAc,SAC5B;AAAA,OACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,gBAAc;AAAA,QACd,cAAY,WAAW,cAAc;AAAA,QACrC,SAAS,MAAM,SAAS,CAAC,QAAQ;AAAA,QACjC,WAAW,sFACT,WAAW,wBAAwB,sBACrC;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,6EACT,WAAW,uBAAuB,mBACpC;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}

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

@@ -0,0 +1,56 @@
+import { type EventRecurrenceRule } from '@withpotter/lib/product-types';
+import type { ContentFieldConfig } from '@withpotter/lib/template-types';
+import type { ProductFormState } from '@withpotter/hooks/use-product-form-state';
+import { type TemplateFieldGroup } from './sections/template-fields-section';
+import type { CustomFieldDefinition } from '@withpotter/components/custom-fields-step';
+interface ProductEditorContentProps {
+    state: ProductFormState;
+    formValues: Record<string, unknown>;
+    setFormValues: (v: Record<string, unknown>) => void;
+    tenantCategories: Record<string, {
+        value: string;
+        label: string;
+        sortOrder?: number;
+    }[]>;
+    tenantSlug?: string;
+    contentTypeSchemas: Record<string, ContentFieldConfig[]>;
+    /** The template's own grouping of those fields, in its order. */
+    templateFieldGroups?: TemplateFieldGroup[];
+    savedCustomFieldDefinitions: CustomFieldDefinition[];
+    onSaveCustomFieldDefinition: (def: CustomFieldDefinition) => void;
+    onRemoveCustomFieldDefinition: (key: string) => void;
+    onCreateCategory?: (label: string) => void;
+    onDeleteCategory?: (value: string) => void;
+    onCreateSeries?: (recurrence: EventRecurrenceRule) => Promise<void>;
+    isSeriesChild?: boolean;
+    canSeeProfitability: boolean;
+}
+/**
+ * RANKED, NOT FILED.
+ *
+ * Two attempts stand behind this one. The first was every section the editor
+ * owns in a single column: 4,477px against a 747px scrollport, six screens to
+ * describe one item, with the switch that decides whether customers can see it
+ * at the very bottom. The second put four tabs over the same sections, which
+ * moved the work without reducing it — the template's field block was still
+ * 2,045px, now behind a door, and the tab names (Details, Selling, Visibility)
+ * were our data model's grouping rather than anything a merchant is doing.
+ *
+ * What is here instead is an order of consequence:
+ *
+ *   what it is        name, words, pictures, price. Nothing else makes an item.
+ *   what it costs     price, and stock if the thing has any.
+ *   everything else   folded, with a line that says what is inside it, so a
+ *                     merchant can see there are options without meeting them.
+ *
+ * The three folds start closed and stay closed for most items ever created,
+ * which is the point — an item with no variants, the default capability and no
+ * template fields is now four cards and one screen, and the merchant who does
+ * need per-size stock finds it by opening one line rather than scrolling past
+ * seventeen empty boxes belonging to somebody else's question.
+ *
+ * The preview is not a question, it is the answer so far, so it sits outside
+ * the order and stays put while the questions scroll.
+ */
+export declare function ProductEditorContent({ state, formValues, setFormValues, tenantCategories, tenantSlug, contentTypeSchemas, templateFieldGroups, savedCustomFieldDefinitions, onSaveCustomFieldDefinition, onRemoveCustomFieldDefinition, onCreateCategory, onDeleteCategory, onCreateSeries, isSeriesChild, canSeeProfitability, }: ProductEditorContentProps): import("react").JSX.Element;
+export {};