@commercebuild/extension 0.0.18 → 0.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercebuild/extension",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "types": "./types/index.d.ts",
   "exports": {
     ".": {
@@ -36,6 +36,7 @@
     "commercebuild-extension": "./scripts/cli.js"
   },
   "scripts": {
-    "test": "node scripts/test-build.mjs"
+    "test": "node scripts/test-build.mjs",
+    "release": "npm whoami || npm login && pnpm publish --no-git-checks"
   }
 }

package/schemas/config.schema.json

@@ -31,9 +31,8 @@
           "enum": ["firebase"]
         },
         "scope": {
-          "description": "\"store\" (the default): the merchant supplies the config per store under Installed Apps → Configure data — do not put a config here. \"app\": the config is fixed in this declaration (required below), owned by the app and not merchant-overridable.",
-          "enum": ["store", "app"],
-          "default": "store"
+          "description": "\"store\": the merchant supplies the config per store under Installed Apps → Configure data — do not put a config here. \"app\": the config is fixed in this declaration (required below), owned by the app and not merchant-overridable. Omitted: inferred — a declaration with a \"config\" is app-scoped, one without is store-scoped.",
+          "enum": ["store", "app"]
         },
         "label": {
           "type": "string",
@@ -45,6 +44,10 @@
         },
         "config": {
           "$ref": "#/$defs/firebaseConfig"
+        },
+        "oidcEnabled": {
+          "type": "boolean",
+          "description": "Federate the signed-in shopper's CB Store identity into this connection's Firebase Auth (Firestore Rules then read the cb_* claims). App-scoped declarations only — the merchant accepts an identity-sharing notice once at install/first configuration. On a store-scoped connection the merchant controls this from Installed Apps → Configure data instead, and a flag here is ignored."
         }
       },
       "additionalProperties": false,
@@ -89,6 +92,9 @@
         },
         "measurementId": {
           "type": "string"
+        },
+        "databaseId": {
+          "type": "string"
         }
       },
       "additionalProperties": true

package/types/global.d.ts

@@ -28,7 +28,7 @@ declare function useLanagueTranslater(): {
   _t: (k: string, obj?: any) => string | undefined;
   t: (k: string) => string;
   tt: (k: string, obj?: any) => (kk: string) => string;
-  tmsg: (k: string) => any;
+  tmsg: (kk: string) => string;
   tlink: (uri: string) => string;
   talink: (uri: string) => string;
   trlink: (uri: string) => string;
@@ -48,6 +48,7 @@ type CartRequestItem = Omit<
   unitPrice?: number;
   detailPageUrl?: string;
 };
+type PostItemsSearchRequest = catalog_v1.PostItemsSearchRequest;
 type PostItemsSearchItem = catalog_v1.PostItemsSearchItem;
 type PostItemsSearchResponse = catalog_v1.PostItemsSearchResponse;
 type GetItemDetailResponse = catalog_v1.GetItemDetailResponse;
@@ -81,12 +82,95 @@ declare function AddToCart({
   fullWidth,
 }: AddToCartProps): React.JSX.Element;
 
+interface GroupSectionItem {
+  sectionKey: "group";
+  id?: string;
+  visible?:
+    | boolean
+    | {
+        value?: boolean;
+        default?: boolean;
+      };
+  gap?: string;
+  justify?: string;
+  align?: string;
+  items?: SectionItem[];
+}
+interface LeafSectionItem {
+  sectionKey: string;
+  id?: string;
+  visible?:
+    | boolean
+    | {
+        value?: boolean;
+        default?: boolean;
+      };
+}
+/**
+ * A leaf section that renders authored rich-text using the variable
+ * resolution pipeline. Carried by the `customText` discriminator so the
+ * variant-specific fields stay off the shared base.
+ */
+interface CustomTextLeafSectionItem extends LeafSectionItem {
+  sectionKey: "customText";
+  customLabel?: string;
+  customLabelVisible?: boolean;
+  customValue?: string;
+}
+type SectionItem =
+  | GroupSectionItem
+  | CustomTextLeafSectionItem
+  | LeafSectionItem;
+
+interface StandardCardLeafField extends LeafSectionItem {
+  sectionKey:
+    | "image"
+    | "item_code"
+    | "title"
+    | "stock"
+    | "price"
+    | "add_to_cart";
+}
+type CardLeafField = StandardCardLeafField | CustomTextLeafSectionItem;
+type CardField = CardLeafField | GroupSectionItem;
+/**
+ * One column of a list-view row. Columns sit left-to-right; the entries inside
+ * a column stack vertically, and a `group` entry puts several of them on one
+ * row (the same primitive the tile card uses).
+ */
+interface CardColumn {
+  id?: string;
+  visible?:
+    | boolean
+    | {
+        value?: boolean;
+        default?: boolean;
+      };
+  /** Key into LIST_COLUMN_WIDTH. */
+  width?: string;
+  /** Key into LIST_COLUMN_ALIGN. */
+  align?: string;
+  items?: CardField[];
+}
+
 declare function CategoryProduct({
   product,
   imagePriority,
+  schemeKey,
+  fields,
+  listColumns,
+  imageSizes,
 }: {
   product: PostItemsSearchItem;
   imagePriority?: boolean;
+  /** Product Card theme scheme chosen on the listing block. */
+  schemeKey?: string;
+  /** Per-block field override; undefined leaves the scheme in charge. */
+  fields?: CardField[];
+  /** List-view columns; undefined renders the stacked tile card. */
+  listColumns?: CardColumn[];
+  /** Overrides the card's default `sizes` (list thumbnails are much smaller). */
+  imageSizes?: string;
 }): React.JSX.Element;
 
 declare function CategoryBreadcrumb({
@@ -107,13 +191,22 @@ declare function CategorySidebar({
   aggregation,
   currentFilters,
   isDrawer,
+  sections,
+  showCounts,
 }: {
   category: Category;
   url: string;
   aggregation?: PostItemsSearchResponse["aggregation"];
   currentFilters: Record<string, string[]>;
   isDrawer?: boolean;
-}): React.JSX.Element | null;
+  /**
+   * Structural elements to render, in order, from the listing block's
+   * `filterSections` repeater. Undefined keeps the historic order.
+   */
+  sections?: string[];
+  /** Show the match count beside each facet name and value. */
+  showCounts?: boolean;
+}): React__default.JSX.Element | null;
 
 declare function CategorySort({
   url,
@@ -130,9 +223,36 @@ declare function CategorySort({
 declare function CategoryProducts({
   hasSiderbar,
   items,
+  columnsClass,
+  schemeKey,
+  fields,
+  listColumns,
+  autoScroll,
+  total,
 }: {
   hasSiderbar?: boolean;
   items: PostItemsSearchItem[];
+  /**
+   * Literal Tailwind column classes from the listing block's frozen map.
+   * Never interpolated — `grid-cols-${n}` compiles to nothing.
+   * The default reproduces the pre-CMS grid exactly.
+   */
+  columnsClass?: string;
+  schemeKey?: string;
+  fields?: CardField[];
+  /**
+   * List-view columns. Non-empty switches the grid to a single column of rows
+   * and hands each card its own layout — `columnsClass` is then unused.
+   */
+  listColumns?: CardColumn[];
+  /**
+   * The route's own search request, replayed a page at a time as the shopper
+   * scrolls. `null` keeps the grid to the server-rendered page, which is what
+   * page-number pagination wants.
+   */
+  autoScroll?: PostItemsSearchRequest | null;
+  /** Total matches, so auto-scroll knows when to stop. */
+  total?: number;
 }): React.JSX.Element;
 
 declare function CategoryProductsPageSize({
@@ -154,13 +274,120 @@ declare function ProductTitle({
   product: GetItemDetailResponse;
 }): React.JSX.Element;
 
+/**
+ * Shared Constants Types
+ *
+ * Type definitions for constants used across the theme editor.
+ * These establish common interfaces for Tailwind CSS constants and configuration.
+ */
+
+/**
+ * Box Shadow Config Interface
+ * Configuration for box shadow utilities
+ * Consolidated from cms/utils/tailwind-utils.ts
+ */
+interface BoxShadowConfig {
+  preset?: string;
+  custom?: {
+    offsetX: string;
+    offsetY: string;
+    blurRadius: string;
+    spreadRadius?: string;
+    color: string;
+    opacity?: string;
+    inset?: boolean;
+  };
+  useCustom?: boolean;
+}
+
+/**
+ * Border Width Interface
+ * Interface for border width configuration
+ * Consolidated from cms/components/property/border-controller.tsx
+ */
+interface BorderWidth {
+  top: string;
+  right: string;
+  bottom: string;
+  left: string;
+}
+/**
+ * Border Radius Interface
+ * Interface for border radius configuration
+ * Consolidated from cms/components/property/border-controller.tsx
+ */
+interface BorderRadius {
+  topLeft: string;
+  topRight: string;
+  bottomRight: string;
+  bottomLeft: string;
+}
+/**
+ * Border Interface
+ * Interface for border configuration
+ * Consolidated from cms/components/property/border-controller.tsx
+ */
+interface Border {
+  width: BorderWidth;
+  style: string;
+  color: string;
+  /** Border color opacity 0–100 (UN-3049). Optional; undefined ⇒ fully opaque. */
+  opacity?: string;
+  radius: BorderRadius;
+}
+
+type ImageFit = "cover" | "contain" | "fill" | "none";
+/** Aspect vocabulary shared with the Product Card scheme (UN-3049). */
+type ImageAspect = "square" | "landscape" | "portrait" | "wide";
+interface ImageSurfaceSettings {
+  border?: Border;
+  shadow?: BoxShadowConfig;
+  bgColor?: string;
+}
+
 type ThumbnailPosition = "top" | "right" | "bottom" | "left";
+/**
+ * How the desktop thumbnail strip presents itself (UN-3295).
+ *
+ * `carousel` is the shipped behaviour: one scrollable rail with prev/next.
+ * `stack` shows a fixed number of thumbnails and expands the rest in place.
+ * Stack applies to `top` and `bottom` only — a `left`/`right` strip is one
+ * `--thumb-w` column wide (80px by default), too narrow for the control.
+ */
+type ThumbnailLayout = "carousel" | "stack";
+/** Main-image controls (UN-3285): presentation + its own Border/Shadow. */
+interface ProductImageDisplaySettings extends ImageSurfaceSettings {
+  aspect?: ImageAspect;
+  fit?: ImageFit;
+}
+/**
+ * Thumbnail controls (UN-3285). Width and height are independent px values;
+ * both default to the legacy 80px box. Desktop-only (sm+) — on mobile the
+ * carousel IS the gallery and its slides stay full-width.
+ */
+interface ProductThumbnailDisplaySettings extends ImageSurfaceSettings {
+  width?: number | "";
+  height?: number | "";
+  /** Gap between thumbnails, px. Unset = the 10px default; explicit 0 holds. */
+  gap?: number | "";
+  /** Gap between the strip and the main image, px. Unset = the 10px default. */
+  imageGap?: number | "";
+  fit?: ImageFit;
+  /** Desktop strip presentation (UN-3295). Unset = the shipped carousel. */
+  layout?: ThumbnailLayout;
+  /** Thumbnails shown before "Show more", stack layout only. Unset = 4. */
+  showMoreAfter?: number | "";
+}
 declare const ProductImages: ({
   product,
   thumbnailPosition,
+  imageSettings,
+  thumbnailSettings,
 }: {
   product: GetItemDetailResponse;
   thumbnailPosition?: ThumbnailPosition;
+  imageSettings?: ProductImageDisplaySettings;
+  thumbnailSettings?: ProductThumbnailDisplaySettings;
 }) => React.JSX.Element;
 
 declare function ProductPrice({
@@ -311,31 +538,27 @@ interface FirebaseConnectionConfig {
   messagingSenderId?: string;
   appId?: string;
   measurementId?: string;
+  /**
+   * Firestore database to use when the project has more than one. NOT part
+   * of the console's firebaseConfig snippet — the SDK has no notion of a
+   * default database in its options, so this rides along as an extra key
+   * (initializeApp keeps unknown keys on `app.options`) and the app passes
+   * it to `getFirestore(app, databaseId)`. Empty/absent = `(default)`.
+   */
+  databaseId?: string;
 }
 
 /**
- * Per-extension render scope.
- *
- * Extension code has no runtime identity of its own — components are
- * bare functions and `cb` is one page-global object, while a single
- * React tree can hold components from several different extensions at
- * once. This context supplies that identity lexically: the host wraps
- * every extension render site (renderExtensionComponent's boundary and
- * the extension page route) in a provider carrying the registration id
- * and the extension's resolved per-store configuration. Contract hooks
- * like cb.utils.useFirebaseApp() read it, so the same component gets
- * its own extension's connections wherever it renders — including the
- * synthetic "preview" / "local" registrations, which just carry their
- * own scope value.
+ * Shared implementation — see @commercebuild/extension-host-libs
+ * (extension-scope.tsx). Only the TYPE re-exports below stay special:
+ * they are re-exported into the generated author-facing declaration,
+ * and tsup's dts build force-externalizes anything imported by package
+ * name (a storefront dependency) — authors can't install the workspace
+ * package, so its types must inline via a RELATIVE path. A type-only
+ * import is erased at runtime, so the bundler never sees this path;
+ * runtime members keep importing the package normally.
  */
 
-/**
- * The provider type family (config shapes, the ResolvedConnection
- * discriminated union) is owned by the provider registry in
- * @commercebuild/extension-host-libs — one place declares them for the
- * storefront, storeadmin and the config JSON Schema alike. This module
- * re-exports the contract-facing names.
- */
 type CbFirebaseConfig = FirebaseConnectionConfig;
 
 /**
@@ -572,7 +795,9 @@ interface CbHostApi {
      * render a fallback for that case. With no argument: the store's
      * only connection when exactly one is configured, else the one
      * named "default". Never call initializeApp yourself; pass this app
-     * to the product entry points (e.g. getFirestore(app)).
+     * to the product entry points. Honour a named database:
+     * `const id = (app.options as { databaseId?: string }).databaseId;`
+     * `const db = id ? getFirestore(app, id) : getFirestore(app);`
      */
     useFirebaseApp: (
       connection?: string,