@withpotter/components 0.13.0-next.101

package/dist/image-upload.d.ts

@@ -0,0 +1,53 @@
+import type { ReactNode } from 'react';
+interface ImageUploadProps {
+    value: string | undefined;
+    onChange: (url: string | undefined) => void;
+    label?: string;
+    description?: string;
+    aspectRatio?: 'square' | 'video' | 'banner';
+    /**
+     * How much room the field takes.
+     *
+     * `full` is the wide zone this has always been — right for a room, a court,
+     * a cover. `avatar` is a small square that sits BESIDE the name it belongs
+     * to: a face is 80px of the form, not a banner across the top of it. The
+     * staff form opened with a full-width dashed rectangle, which read as a page
+     * header rather than as one field among six.
+     *
+     * `identity` is the profile-edit header: the same small square, but it is a
+     * squircle — the app's one identity shape — and the name it belongs to reads
+     * beside it. A logo is a face, not a banner across the top of the form, and
+     * a merchant editing their own identity should see the identity they are
+     * editing rather than a dashed rectangle where it will eventually go.
+     */
+    size?: 'full' | 'avatar' | 'identity';
+    disabled?: boolean;
+    accept?: string;
+    maxSizeMb?: number;
+    helpText?: string;
+    /** `identity` only: the name this image belongs to, read beside the tile. */
+    heading?: ReactNode;
+    /** `identity` only: the quiet second line under the heading. */
+    subheading?: ReactNode;
+}
+/**
+ * An image field: drop it, or browse for it.
+ *
+ * IT USED TO TAKE A URL TOO — a `type="url"` box under the dropzone reading
+ * "Or paste a link", on two of the three sizes. John, 2026-08-25: take it off.
+ * On the identity tile it was the widest control in a card about who the
+ * business is, offering the one path almost nobody takes, sitting exactly
+ * where a merchant reads their own name back. And a field that exists on two
+ * sizes of one component and not the third is not a feature, it is a drift.
+ * Everything reachable by a link is reachable by dropping the file.
+ *
+ * The Upload/URL *mode toggle* this used to open with is gone. Two buttons
+ * that swap the whole control for another one is a lot of chrome to ask for
+ * before a merchant has done anything, and the two modes produce the same
+ * thing — a URL in `value`. The link field simply sits under the zone now.
+ *
+ * Screening (type, size) moved to `Dropzone`, which is also why this finally
+ * accepts a drag and a ⌘V. It did neither before, on any of its call sites.
+ */
+export declare function ImageUpload({ value, onChange, label, description, aspectRatio, size, disabled, accept, maxSizeMb, helpText, heading, subheading, }: ImageUploadProps): import("react").JSX.Element;
+export {};

package/dist/image-upload.js

@@ -0,0 +1,180 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { ImagePlus, Loader2 } from "lucide-react";
+import { uploadImage } from "@withpotter/lib/media-service";
+import { Button } from "@withpotter/ui-kit/button";
+import { Dropzone } from "@withpotter/ui-kit/dropzone";
+import { FileInput } from "@withpotter/ui-kit/file-input";
+import { MediaTile } from "@withpotter/ui-kit/media-tile";
+const ASPECTS = {
+  square: "aspect-square",
+  video: "aspect-video",
+  banner: "aspect-[3/1]"
+};
+function ImageUpload({
+  value,
+  onChange,
+  label = "Image",
+  description,
+  aspectRatio = "video",
+  size = "full",
+  disabled = false,
+  accept = ".png,.jpg,.jpeg,.gif,.webp",
+  maxSizeMb = 10,
+  helpText,
+  heading,
+  subheading
+}) {
+  const picker = useRef(null);
+  const [uploading, setUploading] = useState(false);
+  const [error, setError] = useState(null);
+  const handleFiles = async (files) => {
+    const file = files[0];
+    if (!file) return;
+    setError(null);
+    setUploading(true);
+    try {
+      const result = await uploadImage(file);
+      onChange(result.url);
+    } catch (err) {
+      console.error("Image upload error:", err);
+      setError(err instanceof Error ? err.message : "Failed to upload image");
+    } finally {
+      setUploading(false);
+    }
+  };
+  if (size === "identity") {
+    return (
+      // Top-aligned, not centred: the tile is the face and it belongs beside
+      // the NAME. Centred against a four-line column it floats down to the
+      // help text and reads as a loose thumbnail rather than an avatar.
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "relative size-20 shrink-0", children: value ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "squircle size-20 overflow-hidden bg-[var(--bg-muted)]", children: /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: value,
+              alt: label,
+              className: "size-full object-contain p-1"
+            }
+          ) }),
+          !disabled && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => picker.current?.click(),
+              "aria-label": `Replace ${label.toLowerCase()}`,
+              className: "squircle absolute inset-0 grid place-items-center bg-black/55 text-white opacity-0 transition-opacity duration-[var(--motion-fast)] ease-settle hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none",
+              children: uploading ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx(ImagePlus, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FileInput,
+            {
+              ref: picker,
+              accept,
+              disabled: disabled || uploading,
+              onFiles: (files) => void handleFiles(files),
+              tabIndex: -1
+            }
+          )
+        ] }) : (
+          /* No dashed frame here: `.squircle` is a mask, so a dashed edge
+             would be clipped to ribbons by it. An empty avatar is a filled
+             placeholder in every product that has one — the fill is the
+             affordance, and it still takes a drop and a ⌘V. */
+          /* @__PURE__ */ jsx(
+            Dropzone,
+            {
+              onFiles: (files) => void handleFiles(files),
+              accept,
+              maxSizeMb,
+              disabled,
+              busy: uploading,
+              label: "",
+              busyLabel: "",
+              hint: null,
+              icon: /* @__PURE__ */ jsx(ImagePlus, { className: "size-4 text-[var(--text-secondary)]" }),
+              onReject: setError,
+              className: "squircle size-20 gap-0 border-0 bg-[var(--bg-muted)] px-0 py-0 hover:bg-[var(--interactive-hover)]"
+            }
+          )
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          heading ? /* @__PURE__ */ jsx("p", { className: "truncate text-base font-medium text-[var(--text-primary)]", children: heading }) : null,
+          subheading ? /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-sm text-[var(--text-tertiary)]", children: subheading }) : null,
+          error ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-[var(--error)]", children: error }) : helpText ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-[var(--text-tertiary)]", children: helpText }) : null,
+          value ? /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "secondary",
+              type: "button",
+              onClick: () => onChange(void 0),
+              disabled,
+              children: "Remove"
+            }
+          ) }) : null
+        ] })
+      ] })
+    );
+  }
+  if (size === "avatar") {
+    return /* @__PURE__ */ jsxs("div", { className: "shrink-0", children: [
+      label && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-medium text-[var(--text-primary)]", children: label }),
+      /* @__PURE__ */ jsx("div", { className: "size-20", children: value ? /* @__PURE__ */ jsx(
+        MediaTile,
+        {
+          src: value,
+          alt: label,
+          onRemove: disabled ? void 0 : () => onChange(void 0),
+          removeLabel: `Remove ${label.toLowerCase()}`,
+          className: "size-20"
+        }
+      ) : /* @__PURE__ */ jsx(
+        Dropzone,
+        {
+          onFiles: (files) => void handleFiles(files),
+          accept,
+          maxSizeMb,
+          disabled,
+          busy: uploading,
+          label: "Add",
+          hint: null,
+          onReject: setError,
+          className: "h-20 py-0"
+        }
+      ) }),
+      error && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-[var(--error)]", children: error })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    value ? /* @__PURE__ */ jsx(
+      MediaTile,
+      {
+        src: value,
+        alt: label,
+        onRemove: disabled ? void 0 : () => onChange(void 0),
+        removeLabel: `Remove ${label.toLowerCase()}`,
+        className: `h-auto w-full max-w-md ${ASPECTS[aspectRatio]}`
+      }
+    ) : /* @__PURE__ */ jsx("div", { className: "max-w-md space-y-2", children: /* @__PURE__ */ jsx(
+      Dropzone,
+      {
+        onFiles: (files) => void handleFiles(files),
+        accept,
+        maxSizeMb,
+        disabled,
+        busy: uploading,
+        label: `Drop ${label.toLowerCase()} here, or browse`,
+        hint: helpText,
+        onReject: setError
+      }
+    ) }),
+    error ? /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--error)]", children: error }) : description ? /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-tertiary)]", children: description }) : null
+  ] });
+}
+export {
+  ImageUpload
+};
+//# sourceMappingURL=image-upload.js.map

package/dist/image-upload.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/image-upload.tsx"],"sourcesContent":["'use client';\n\nimport { useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { ImagePlus, Loader2 } from 'lucide-react';\nimport { uploadImage } from '@withpotter/lib/media-service';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { Dropzone } from '@withpotter/ui-kit/dropzone';\nimport { FileInput } from '@withpotter/ui-kit/file-input';\nimport { MediaTile } from '@withpotter/ui-kit/media-tile';\n\ninterface ImageUploadProps {\n  value: string | undefined;\n  onChange: (url: string | undefined) => void;\n  label?: string;\n  description?: string;\n  aspectRatio?: 'square' | 'video' | 'banner';\n  /**\n   * How much room the field takes.\n   *\n   * `full` is the wide zone this has always been — right for a room, a court,\n   * a cover. `avatar` is a small square that sits BESIDE the name it belongs\n   * to: a face is 80px of the form, not a banner across the top of it. The\n   * staff form opened with a full-width dashed rectangle, which read as a page\n   * header rather than as one field among six.\n   *\n   * `identity` is the profile-edit header: the same small square, but it is a\n   * squircle — the app's one identity shape — and the name it belongs to reads\n   * beside it. A logo is a face, not a banner across the top of the form, and\n   * a merchant editing their own identity should see the identity they are\n   * editing rather than a dashed rectangle where it will eventually go.\n   */\n  size?: 'full' | 'avatar' | 'identity';\n  disabled?: boolean;\n  accept?: string;\n  maxSizeMb?: number;\n  helpText?: string;\n  /** `identity` only: the name this image belongs to, read beside the tile. */\n  heading?: ReactNode;\n  /** `identity` only: the quiet second line under the heading. */\n  subheading?: ReactNode;\n}\n\nconst ASPECTS = {\n  square: 'aspect-square',\n  video: 'aspect-video',\n  banner: 'aspect-[3/1]',\n};\n\n/**\n * An image field: drop it, or browse for it.\n *\n * IT USED TO TAKE A URL TOO — a `type=\"url\"` box under the dropzone reading\n * \"Or paste a link\", on two of the three sizes. John, 2026-08-25: take it off.\n * On the identity tile it was the widest control in a card about who the\n * business is, offering the one path almost nobody takes, sitting exactly\n * where a merchant reads their own name back. And a field that exists on two\n * sizes of one component and not the third is not a feature, it is a drift.\n * Everything reachable by a link is reachable by dropping the file.\n *\n * The Upload/URL *mode toggle* this used to open with is gone. Two buttons\n * that swap the whole control for another one is a lot of chrome to ask for\n * before a merchant has done anything, and the two modes produce the same\n * thing — a URL in `value`. The link field simply sits under the zone now.\n *\n * Screening (type, size) moved to `Dropzone`, which is also why this finally\n * accepts a drag and a ⌘V. It did neither before, on any of its call sites.\n */\nexport function ImageUpload({\n  value,\n  onChange,\n  label = 'Image',\n  description,\n  aspectRatio = 'video',\n  size = 'full',\n  disabled = false,\n  accept = '.png,.jpg,.jpeg,.gif,.webp',\n  maxSizeMb = 10,\n  helpText,\n  heading,\n  subheading,\n}: ImageUploadProps) {\n  const picker = useRef<HTMLInputElement>(null);\n  const [uploading, setUploading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  const handleFiles = async (files: File[]) => {\n    const file = files[0];\n    if (!file) return;\n\n    setError(null);\n    setUploading(true);\n    try {\n      const result = await uploadImage(file);\n      onChange(result.url);\n    } catch (err) {\n      console.error('Image upload error:', err);\n      setError(err instanceof Error ? err.message : 'Failed to upload image');\n    } finally {\n      setUploading(false);\n    }\n  };\n\n  if (size === 'identity') {\n    return (\n      // Top-aligned, not centred: the tile is the face and it belongs beside\n      // the NAME. Centred against a four-line column it floats down to the\n      // help text and reads as a loose thumbnail rather than an avatar.\n      <div className=\"flex items-start gap-4\">\n        <div className=\"relative size-20 shrink-0\">\n          {value ? (\n            <>\n              <div className=\"squircle size-20 overflow-hidden bg-[var(--bg-muted)]\">\n                {/* eslint-disable-next-line @next/next/no-img-element */}\n                <img\n                  src={value}\n                  alt={label}\n                  className=\"size-full object-contain p-1\"\n                />\n              </div>\n              {/* An overlay hit-area over the tile, which is the one shape a\n                  raw <button> is still for. The tile IS the control: a logo\n                  you can see is replaced by clicking the logo, not by hunting\n                  for a second labelled button beside it. */}\n              {!disabled && (\n                <button\n                  type=\"button\"\n                  onClick={() => picker.current?.click()}\n                  aria-label={`Replace ${label.toLowerCase()}`}\n                  className=\"squircle absolute inset-0 grid place-items-center bg-black/55 text-white opacity-0 transition-opacity duration-[var(--motion-fast)] ease-settle hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none\"\n                >\n                  {uploading ? (\n                    <Loader2 className=\"size-4 animate-spin\" />\n                  ) : (\n                    <ImagePlus className=\"size-4\" />\n                  )}\n                </button>\n              )}\n              <FileInput\n                ref={picker}\n                accept={accept}\n                disabled={disabled || uploading}\n                onFiles={(files) => void handleFiles(files)}\n                tabIndex={-1}\n              />\n            </>\n          ) : (\n            /* No dashed frame here: `.squircle` is a mask, so a dashed edge\n               would be clipped to ribbons by it. An empty avatar is a filled\n               placeholder in every product that has one — the fill is the\n               affordance, and it still takes a drop and a ⌘V. */\n            <Dropzone\n              onFiles={(files) => void handleFiles(files)}\n              accept={accept}\n              maxSizeMb={maxSizeMb}\n              disabled={disabled}\n              busy={uploading}\n              label=\"\"\n              busyLabel=\"\"\n              hint={null}\n              icon={\n                <ImagePlus className=\"size-4 text-[var(--text-secondary)]\" />\n              }\n              onReject={setError}\n              className=\"squircle size-20 gap-0 border-0 bg-[var(--bg-muted)] px-0 py-0 hover:bg-[var(--interactive-hover)]\"\n            />\n          )}\n        </div>\n\n        <div className=\"min-w-0 flex-1\">\n          {heading ? (\n            <p className=\"truncate text-base font-medium text-[var(--text-primary)]\">\n              {heading}\n            </p>\n          ) : null}\n          {subheading ? (\n            <div className=\"mt-0.5 text-sm text-[var(--text-tertiary)]\">\n              {subheading}\n            </div>\n          ) : null}\n\n          {error ? (\n            <p className=\"mt-1 text-xs text-[var(--error)]\">{error}</p>\n          ) : helpText ? (\n            <p className=\"mt-1 text-xs text-[var(--text-tertiary)]\">\n              {helpText}\n            </p>\n          ) : null}\n\n          {/* No \"Or paste a link\" on an identity tile. John, 2026-08-25.\n              A URL field sitting under the business name was the widest\n              control in a card about who the business IS, offering the one\n              path almost nobody takes — and it sat where the merchant is\n              reading their own name back. The tile is the control: click it,\n              drop on it, paste an image onto it. */}\n          {value ? (\n            <div className=\"mt-2\">\n              <Button\n                variant=\"secondary\"\n                type=\"button\"\n                onClick={() => onChange(undefined)}\n                disabled={disabled}\n              >\n                Remove\n              </Button>\n            </div>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n\n  if (size === 'avatar') {\n    return (\n      <div className=\"shrink-0\">\n        {label && (\n          <p className=\"mb-2 text-sm font-medium text-[var(--text-primary)]\">\n            {label}\n          </p>\n        )}\n        <div className=\"size-20\">\n          {value ? (\n            <MediaTile\n              src={value}\n              alt={label}\n              onRemove={disabled ? undefined : () => onChange(undefined)}\n              removeLabel={`Remove ${label.toLowerCase()}`}\n              className=\"size-20\"\n            />\n          ) : (\n            <Dropzone\n              onFiles={(files) => void handleFiles(files)}\n              accept={accept}\n              maxSizeMb={maxSizeMb}\n              disabled={disabled}\n              busy={uploading}\n              label=\"Add\"\n              // At 80px the frame is the whole control: `py-7` and the\n              // \"PNG, JPG · Up to 10MB\" line together stand ~116px tall and\n              // spill out of the square. The limits still hold — a refusal\n              // comes back through `onReject` — they are just not narrated\n              // inside a box this small.\n              hint={null}\n              onReject={setError}\n              className=\"h-20 py-0\"\n            />\n          )}\n        </div>\n        {error && <p className=\"mt-1 text-xs text-[var(--error)]\">{error}</p>}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-2\">\n      {value ? (\n        <MediaTile\n          src={value}\n          alt={label}\n          onRemove={disabled ? undefined : () => onChange(undefined)}\n          removeLabel={`Remove ${label.toLowerCase()}`}\n          className={`h-auto w-full max-w-md ${ASPECTS[aspectRatio]}`}\n        />\n      ) : (\n        <div className=\"max-w-md space-y-2\">\n          <Dropzone\n            onFiles={(files) => void handleFiles(files)}\n            accept={accept}\n            maxSizeMb={maxSizeMb}\n            disabled={disabled}\n            busy={uploading}\n            label={`Drop ${label.toLowerCase()} here, or browse`}\n            hint={helpText}\n            onReject={setError}\n          />\n        </div>\n      )}\n\n      {error ? (\n        <p className=\"text-sm text-[var(--error)]\">{error}</p>\n      ) : description ? (\n        <p className=\"text-xs text-[var(--text-tertiary)]\">{description}</p>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * `@withpotter/components` — Box dashboard feature components.
+ *
+ * Consume individual components via deep subpath imports, e.g.
+ * `import { Sidebar } from '@withpotter/components/sidebar'`. This keeps tree-shaking
+ * precise and avoids eagerly pulling every feature surface (and its client
+ * runtime) into a single barrel.
+ */
+export {};

package/dist/index.js

@@ -0,0 +1 @@
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/intent/index.d.ts

@@ -0,0 +1,3 @@
+export { IntentOrderList } from './intent-order-list';
+export { IntentOrderDetail } from './intent-order-detail';
+export { useIntentFilter } from './use-intent-filter';

package/dist/intent/index.js

@@ -0,0 +1,9 @@
+import { IntentOrderList } from "./intent-order-list";
+import { IntentOrderDetail } from "./intent-order-detail";
+import { useIntentFilter } from "./use-intent-filter";
+export {
+  IntentOrderDetail,
+  IntentOrderList,
+  useIntentFilter
+};
+//# sourceMappingURL=index.js.map

package/dist/intent/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/intent/index.ts"],"sourcesContent":["export { IntentOrderList } from './intent-order-list';\nexport { IntentOrderDetail } from './intent-order-detail';\nexport { useIntentFilter } from './use-intent-filter';\n"],"mappings":"AAAA,SAAS,uBAAuB;AAChC,SAAS,yBAAyB;AAClC,SAAS,uBAAuB;","names":[]}

package/dist/intent/intent-filter-panel.d.ts

@@ -0,0 +1,18 @@
+import type { FilterDef } from '@withpotter/lib/intents/types';
+interface IntentFilterPanelProps {
+    filters: FilterDef[];
+    values: Record<string, string>;
+    onChange: (key: string, value: string) => void;
+    /** Dynamic options keyed by filter key — overrides FilterDef.options */
+    optionsOverrides?: Record<string, {
+        value: string;
+        label: string;
+    }[]>;
+    className?: string;
+}
+/**
+ * Config-driven filter panel. Reads FilterDef[] from IntentConfig and
+ * renders the appropriate control for each filter type.
+ */
+export declare function IntentFilterPanel({ filters, values, onChange, optionsOverrides, className, }: IntentFilterPanelProps): import("react").JSX.Element;
+export {};

package/dist/intent/intent-filter-panel.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Select } from "@withpotter/ui-kit/select";
+import { Input } from "@withpotter/ui-kit";
+import { DateField } from "@withpotter/ui-kit";
+function IntentFilterPanel({
+  filters,
+  values,
+  onChange,
+  optionsOverrides,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx("div", { className: `flex flex-wrap items-center gap-2 ${className}`, children: filters.map((filter) => {
+    const val = values[filter.key] ?? "";
+    const options = optionsOverrides?.[filter.key] ?? filter.options ?? [];
+    switch (filter.type) {
+      case "select":
+        return /* @__PURE__ */ jsx(
+          Select,
+          {
+            value: val,
+            onChange: (next) => onChange(filter.key, next),
+            options: [{ value: "", label: filter.label }, ...options],
+            placeholder: filter.label,
+            searchable: options.length > 15,
+            className: "min-w-[160px]"
+          },
+          filter.key
+        );
+      case "text":
+        return /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "text",
+            value: val,
+            onChange: (e) => onChange(filter.key, e.target.value),
+            placeholder: filter.label
+          },
+          filter.key
+        );
+      case "dateRange":
+        return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(
+            DateField,
+            {
+              value: values[`${filter.key}_from`] ?? "",
+              onChange: (value) => onChange(`${filter.key}_from`, value)
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--text-muted)]", children: "to" }),
+          /* @__PURE__ */ jsx(
+            DateField,
+            {
+              value: values[`${filter.key}_to`] ?? "",
+              onChange: (value) => onChange(`${filter.key}_to`, value)
+            }
+          )
+        ] }, filter.key);
+      default:
+        return null;
+    }
+  }) });
+}
+export {
+  IntentFilterPanel
+};
+//# sourceMappingURL=intent-filter-panel.js.map

package/dist/intent/intent-filter-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/intent/intent-filter-panel.tsx"],"sourcesContent":["'use client';\n\nimport type { FilterDef } from '@withpotter/lib/intents/types';\nimport { Select } from '@withpotter/ui-kit/select';\nimport { Input } from '@withpotter/ui-kit';\nimport { DateField } from '@withpotter/ui-kit';\n\ninterface IntentFilterPanelProps {\n  filters: FilterDef[];\n  values: Record<string, string>;\n  onChange: (key: string, value: string) => void;\n  /** Dynamic options keyed by filter key — overrides FilterDef.options */\n  optionsOverrides?: Record<string, { value: string; label: string }[]>;\n  className?: string;\n}\n\n/**\n * Config-driven filter panel. Reads FilterDef[] from IntentConfig and\n * renders the appropriate control for each filter type.\n */\nexport function IntentFilterPanel({\n  filters,\n  values,\n  onChange,\n  optionsOverrides,\n  className = '',\n}: IntentFilterPanelProps) {\n  return (\n    <div className={`flex flex-wrap items-center gap-2 ${className}`}>\n      {filters.map((filter) => {\n        const val = values[filter.key] ?? '';\n        const options = optionsOverrides?.[filter.key] ?? filter.options ?? [];\n\n        switch (filter.type) {\n          case 'select':\n            return (\n              <Select\n                key={filter.key}\n                value={val}\n                onChange={(next) => onChange(filter.key, next)}\n                options={[{ value: '', label: filter.label }, ...options]}\n                placeholder={filter.label}\n                searchable={options.length > 15}\n                className=\"min-w-[160px]\"\n              />\n            );\n\n          case 'text':\n            return (\n              <Input\n                key={filter.key}\n                type=\"text\"\n                value={val}\n                onChange={(e) => onChange(filter.key, e.target.value)}\n                placeholder={filter.label}\n              />\n            );\n\n          case 'dateRange':\n            // Render as two date inputs side-by-side\n            return (\n              <div key={filter.key} className=\"flex items-center gap-1\">\n                <DateField\n                  value={values[`${filter.key}_from`] ?? ''}\n                  onChange={(value) => onChange(`${filter.key}_from`, value)}\n                />\n                <span className=\"text-xs text-[var(--text-muted)]\">to</span>\n                <DateField\n                  value={values[`${filter.key}_to`] ?? ''}\n                  onChange={(value) => onChange(`${filter.key}_to`, value)}\n                />\n              </div>\n            );\n\n          default:\n            return null;\n        }\n      })}\n    </div>\n  );\n}\n"],"mappings":";AAoCc,cAyBA,YAzBA;AAjCd,SAAS,cAAc;AACvB,SAAS,aAAa;AACtB,SAAS,iBAAiB;AAenB,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AACd,GAA2B;AACzB,SACE,oBAAC,SAAI,WAAW,qCAAqC,SAAS,IAC3D,kBAAQ,IAAI,CAAC,WAAW;AACvB,UAAM,MAAM,OAAO,OAAO,GAAG,KAAK;AAClC,UAAM,UAAU,mBAAmB,OAAO,GAAG,KAAK,OAAO,WAAW,CAAC;AAErE,YAAQ,OAAO,MAAM;AAAA,MACnB,KAAK;AACH,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,OAAO;AAAA,YACP,UAAU,CAAC,SAAS,SAAS,OAAO,KAAK,IAAI;AAAA,YAC7C,SAAS,CAAC,EAAE,OAAO,IAAI,OAAO,OAAO,MAAM,GAAG,GAAG,OAAO;AAAA,YACxD,aAAa,OAAO;AAAA,YACpB,YAAY,QAAQ,SAAS;AAAA,YAC7B,WAAU;AAAA;AAAA,UANL,OAAO;AAAA,QAOd;AAAA,MAGJ,KAAK;AACH,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,MAAK;AAAA,YACL,OAAO;AAAA,YACP,UAAU,CAAC,MAAM,SAAS,OAAO,KAAK,EAAE,OAAO,KAAK;AAAA,YACpD,aAAa,OAAO;AAAA;AAAA,UAJf,OAAO;AAAA,QAKd;AAAA,MAGJ,KAAK;AAEH,eACE,qBAAC,SAAqB,WAAU,2BAC9B;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO,OAAO,GAAG,OAAO,GAAG,OAAO,KAAK;AAAA,cACvC,UAAU,CAAC,UAAU,SAAS,GAAG,OAAO,GAAG,SAAS,KAAK;AAAA;AAAA,UAC3D;AAAA,UACA,oBAAC,UAAK,WAAU,oCAAmC,gBAAE;AAAA,UACrD;AAAA,YAAC;AAAA;AAAA,cACC,OAAO,OAAO,GAAG,OAAO,GAAG,KAAK,KAAK;AAAA,cACrC,UAAU,CAAC,UAAU,SAAS,GAAG,OAAO,GAAG,OAAO,KAAK;AAAA;AAAA,UACzD;AAAA,aATQ,OAAO,GAUjB;AAAA,MAGJ;AACE,eAAO;AAAA,IACX;AAAA,EACF,CAAC,GACH;AAEJ;","names":[]}

package/dist/intent/intent-order-detail.d.ts

@@ -0,0 +1,32 @@
+import type { IntentConfig } from '@withpotter/lib/intents/types';
+interface IntentOrderDetailProps {
+    /** The primary archetype — the fallback when an order says nothing. */
+    config: IntentConfig;
+    /**
+     * Every archetype the business runs, so an order spanning two of them can
+     * render both. Omitted means single-archetype: there is only one answer.
+     */
+    configs?: IntentConfig[];
+    orderId: string;
+    data: Record<string, unknown>;
+    /**
+     * The page's own Shipping card (beside the order, with the rider) already
+     * shows where it goes, so the section's second "Shipping" card is left out.
+     */
+    skipShippingInfo?: boolean;
+}
+/**
+ * Config-driven order detail shell.
+ *
+ * Assembles sections from config.pageSections.orderDetail using the
+ * section registry. Each section is a registered React component that
+ * renders a specific part of the order detail view.
+ *
+ * Sections not yet registered are gracefully skipped — allows incremental
+ * rollout as section components are built in Phase 2.
+ *
+ * Which sections is decided by what the ORDER contains, not by which archetype
+ * the merchant listed first. See `resolveOrderSections`.
+ */
+export declare function IntentOrderDetail({ config, configs, orderId, data, skipShippingInfo, }: IntentOrderDetailProps): import("react").JSX.Element;
+export {};

package/dist/intent/intent-order-detail.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  resolveSections
+} from "@withpotter/lib/intents/section-registry";
+import { resolveOrderSections } from "@withpotter/lib/intents/order-sections";
+function IntentOrderDetail({
+  config,
+  configs,
+  orderId,
+  data,
+  skipShippingInfo = false
+}) {
+  const sectionKeys = resolveOrderSections(
+    data,
+    configs ?? [config],
+    config
+  ).filter((key) => !(skipShippingInfo && key === "shipping-info"));
+  const sections = resolveSections(sectionKeys);
+  if (sections.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: "p-6 text-center text-sm text-[var(--text-tertiary)]", children: [
+      "Order detail sections are being configured for",
+      " ",
+      /* @__PURE__ */ jsx("span", { className: "font-medium", children: config.label }),
+      "."
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "space-y-6", children: sections.map(({ key, Component }) => /* @__PURE__ */ jsx(Component, { orderId, data, config }, key)) });
+}
+export {
+  IntentOrderDetail
+};
+//# sourceMappingURL=intent-order-detail.js.map

package/dist/intent/intent-order-detail.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/intent/intent-order-detail.tsx"],"sourcesContent":["'use client';\n\nimport type { IntentConfig } from '@withpotter/lib/intents/types';\nimport {\n  resolveSections,\n  type SectionProps,\n} from '@withpotter/lib/intents/section-registry';\nimport { resolveOrderSections } from '@withpotter/lib/intents/order-sections';\n\ninterface IntentOrderDetailProps {\n  /** The primary archetype — the fallback when an order says nothing. */\n  config: IntentConfig;\n  /**\n   * Every archetype the business runs, so an order spanning two of them can\n   * render both. Omitted means single-archetype: there is only one answer.\n   */\n  configs?: IntentConfig[];\n  orderId: string;\n  data: Record<string, unknown>;\n  /**\n   * The page's own Shipping card (beside the order, with the rider) already\n   * shows where it goes, so the section's second \"Shipping\" card is left out.\n   */\n  skipShippingInfo?: boolean;\n}\n\n/**\n * Config-driven order detail shell.\n *\n * Assembles sections from config.pageSections.orderDetail using the\n * section registry. Each section is a registered React component that\n * renders a specific part of the order detail view.\n *\n * Sections not yet registered are gracefully skipped — allows incremental\n * rollout as section components are built in Phase 2.\n *\n * Which sections is decided by what the ORDER contains, not by which archetype\n * the merchant listed first. See `resolveOrderSections`.\n */\nexport function IntentOrderDetail({\n  config,\n  configs,\n  orderId,\n  data,\n  skipShippingInfo = false,\n}: IntentOrderDetailProps) {\n  const sectionKeys = resolveOrderSections(\n    data as { items?: { behaviors?: string[] }[] | null },\n    configs ?? [config],\n    config,\n  ).filter((key) => !(skipShippingInfo && key === 'shipping-info'));\n  const sections = resolveSections(sectionKeys);\n\n  if (sections.length === 0) {\n    // No sections registered yet — fall back to a placeholder\n    return (\n      <div className=\"p-6 text-center text-sm text-[var(--text-tertiary)]\">\n        Order detail sections are being configured for{' '}\n        <span className=\"font-medium\">{config.label}</span>.\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-6\">\n      {sections.map(({ key, Component }) => (\n        <Component key={key} orderId={orderId} data={data} config={config} />\n      ))}\n    </div>\n  );\n}\n"],"mappings":";AAwDM,SAEE,KAFF;AArDN;AAAA,EACE;AAAA,OAEK;AACP,SAAS,4BAA4B;AAgC9B,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AACrB,GAA2B;AACzB,QAAM,cAAc;AAAA,IAClB;AAAA,IACA,WAAW,CAAC,MAAM;AAAA,IAClB;AAAA,EACF,EAAE,OAAO,CAAC,QAAQ,EAAE,oBAAoB,QAAQ,gBAAgB;AAChE,QAAM,WAAW,gBAAgB,WAAW;AAE5C,MAAI,SAAS,WAAW,GAAG;AAEzB,WACE,qBAAC,SAAI,WAAU,uDAAsD;AAAA;AAAA,MACpB;AAAA,MAC/C,oBAAC,UAAK,WAAU,eAAe,iBAAO,OAAM;AAAA,MAAO;AAAA,OACrD;AAAA,EAEJ;AAEA,SACE,oBAAC,SAAI,WAAU,aACZ,mBAAS,IAAI,CAAC,EAAE,KAAK,UAAU,MAC9B,oBAAC,aAAoB,SAAkB,MAAY,UAAnC,GAAmD,CACpE,GACH;AAEJ;","names":[]}

package/dist/intent/intent-order-list.d.ts

@@ -0,0 +1,24 @@
+import type { IntentConfig } from '@withpotter/lib/intents/types';
+import type { Order } from '@withpotter/lib/api/types';
+interface IntentOrderListProps {
+    /**
+     * Every archetype this list covers — one when the view is narrowed, all of
+     * them when it is not. This was a single `config`, which on an unscoped view
+     * was `primary`: one archetype's table, one archetype's menu and one
+     * archetype's vocabulary over rows belonging to all of them.
+     */
+    configs: IntentConfig[];
+    orders: Order[];
+    formatCurrency: (amount: number, currency?: string) => string;
+    formatDate: (dateString: string) => string;
+    intentKey?: string;
+    onAction?: (actionKey: string, orderId: string) => void;
+    /** Selection, mirroring `OrdersTable`. Omit all of these for a plain list. */
+    selectedIds?: Set<string>;
+    onToggleSelect?: (id: string) => void;
+    onToggleSelectAll?: () => void;
+    allSelected?: boolean;
+    someSelected?: boolean;
+}
+export declare function IntentOrderList({ configs, orders, formatCurrency, formatDate, intentKey, onAction, selectedIds, onToggleSelect, onToggleSelectAll, allSelected, someSelected, }: IntentOrderListProps): import("react").JSX.Element;
+export {};