@shoplix-ai/block-kit 4.6.0 → 5.16.0

package/dist/product-specs.d.ts

@@ -1,4 +1,4 @@
-import type { ThemeStyle } from '@shoplix-ai/sdui-schema';
+import type { ColorChoice, LocaleCode, ProductDisplay, ProductSectionProps, ProductSectionType, ProductSpecificationsBlock, ShippingReturnsBlock, ThemeStyle } from '@shoplix-ai/sdui-schema';
 /** The parts of the product specs, each with the theme role it draws unless a component token names another. */
 declare const PRODUCT_SPECS_ROLES: {
     readonly surface: "elevated";
@@ -12,6 +12,7 @@ declare const PRODUCT_SPECS_ROLES: {
     readonly glyph_surface: "sunken";
     readonly glyph: "text";
     readonly note: "muted";
+    readonly ledger_label: "muted";
 };
 export type ProductSpecsPart = keyof typeof PRODUCT_SPECS_ROLES;
 export type ProductSpecsColors = Readonly<Record<ProductSpecsPart, string>>;
@@ -19,7 +20,37 @@ export type ProductSpecsColors = Readonly<Record<ProductSpecsPart, string>>;
  * Every colour the specs draw, one per part, with `product_specs.<part>` as
  * the escape hatch over each theme role. The body and the table's values take
  * the text role rather than the muted one: a size chart is read, not skimmed.
+ * The three sections of the product page read the same table, so a theme
+ * paints them as it painted the specs, and a surface the merchant chose for
+ * one section wins over it.
  */
-export declare function productSpecsColors(theme: ThemeStyle): ProductSpecsColors;
+export declare function productSpecsColors(theme: ThemeStyle, settings?: {
+    readonly surface?: ColorChoice;
+}): ProductSpecsColors;
+/** The catalog's title of each section of the product page, the one the specs drew over it. */
+export declare const PRODUCT_SECTION_TITLES: {
+    readonly product_description: "product.details";
+    readonly product_specifications: "product.specifications";
+    readonly shipping_returns: "product.shipping_returns";
+};
+/** A section's title: the merchant's own where they wrote one the buyer reads, the catalog's otherwise. */
+export declare function productSectionTitle(type: ProductSectionType, title: ProductSectionProps['title'], language: LocaleCode, defaultLanguage: LocaleCode): string;
+export interface ProductSpecRow {
+    readonly key: string;
+    readonly label: string;
+    readonly value: string;
+}
+/**
+ * The rows the table draws: the facts table of the product's description
+ * first where the block reads it, then the merchant's own rows, and the facts
+ * the Storefront answers where neither says anything, so a merchant who has
+ * written nothing still gets a table rather than a heading over a gap.
+ */
+export declare function productSpecRows(specs: ProductSpecificationsBlock['props']['specs'], product: ProductDisplay, language: LocaleCode, defaultLanguage: LocaleCode, options?: {
+    readonly descriptionTable?: boolean;
+}): ProductSpecRow[];
+export type ShippingRow = NonNullable<ShippingReturnsBlock['props']['shipping']>[number];
+/** The shipping rows a card draws: every row whose title the buyer can read, in the merchant's order. */
+export declare function shippingRowsOf(shipping: readonly ShippingRow[] | undefined, language: LocaleCode, defaultLanguage: LocaleCode): ShippingRow[];
 export {};
 //# sourceMappingURL=product-specs.d.ts.map

package/dist/product-specs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"product-specs.d.ts","sourceRoot":"","sources":["../src/product-specs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAG1D,gHAAgH;AAChH,QAAA,MAAM,mBAAmB;;;;;;;;;;;;CAYsC,CAAC;AAEhE,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,mBAAmB,CAAC;AAEhE,MAAM,MAAM,kBAAkB,GAAG,QAAQ,CAAC,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC,CAAC;AAE5E;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,UAAU,GAAG,kBAAkB,CAExE"}
+{"version":3,"file":"product-specs.d.ts","sourceRoot":"","sources":["../src/product-specs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EACX,UAAU,EACV,cAAc,EACd,mBAAmB,EACnB,kBAAkB,EAClB,0BAA0B,EAC1B,oBAAoB,EACpB,UAAU,EACX,MAAM,yBAAyB,CAAC;AAOjC,gHAAgH;AAChH,QAAA,MAAM,mBAAmB;;;;;;;;;;;;;CAasC,CAAC;AAEhE,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,mBAAmB,CAAC;AAEhE,MAAM,MAAM,kBAAkB,GAAG,QAAQ,CAAC,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC,CAAC;AAE5E;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,UAAU,EACjB,QAAQ,GAAE;IAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,WAAW,CAAA;CAAO,GAChD,kBAAkB,CAGpB;AAED,+FAA+F;AAC/F,eAAO,MAAM,sBAAsB;;;;CAIqB,CAAC;AAEzD,2GAA2G;AAC3G,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,kBAAkB,EACxB,KAAK,EAAE,mBAAmB,CAAC,OAAO,CAAC,EACnC,QAAQ,EAAE,UAAU,EACpB,eAAe,EAAE,UAAU,GAC1B,MAAM,CAER;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,0BAA0B,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,EACnD,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAE,UAAU,EACpB,eAAe,EAAE,UAAU,EAC3B,OAAO,GAAE;IAAE,QAAQ,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAAO,GACpD,cAAc,EAAE,CAmBlB;AAED,MAAM,MAAM,WAAW,GAAG,WAAW,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;AAEzF,yGAAyG;AACzG,wBAAgB,cAAc,CAC5B,QAAQ,EAAE,SAAS,WAAW,EAAE,GAAG,SAAS,EAC5C,QAAQ,EAAE,UAAU,EACpB,eAAe,EAAE,UAAU,GAC1B,WAAW,EAAE,CAEf"}

package/dist/product-specs.js

@@ -1,4 +1,8 @@
+import { colorChoiceOf } from './color-choice.js';
+import { localize } from './locale.js';
 import { partColors } from './part-colors.js';
+import { platformWords } from './words.js';
+import { descriptionFacts } from './description.js';
 /** The parts of the product specs, each with the theme role it draws unless a component token names another. */
 const PRODUCT_SPECS_ROLES = {
     surface: 'elevated',
@@ -12,13 +16,58 @@ const PRODUCT_SPECS_ROLES = {
     glyph_surface: 'sunken',
     glyph: 'text',
     note: 'muted',
+    ledger_label: 'muted',
 };
 /**
  * Every colour the specs draw, one per part, with `product_specs.<part>` as
  * the escape hatch over each theme role. The body and the table's values take
  * the text role rather than the muted one: a size chart is read, not skimmed.
+ * The three sections of the product page read the same table, so a theme
+ * paints them as it painted the specs, and a surface the merchant chose for
+ * one section wins over it.
  */
-export function productSpecsColors(theme) {
-    return partColors(theme, 'product_specs', PRODUCT_SPECS_ROLES);
+export function productSpecsColors(theme, settings = {}) {
+    const table = partColors(theme, 'product_specs', PRODUCT_SPECS_ROLES);
+    return { ...table, surface: colorChoiceOf(theme, settings.surface) ?? table.surface };
+}
+/** The catalog's title of each section of the product page, the one the specs drew over it. */
+export const PRODUCT_SECTION_TITLES = {
+    product_description: 'product.details',
+    product_specifications: 'product.specifications',
+    shipping_returns: 'product.shipping_returns',
+};
+/** A section's title: the merchant's own where they wrote one the buyer reads, the catalog's otherwise. */
+export function productSectionTitle(type, title, language, defaultLanguage) {
+    return platformWords(language, defaultLanguage).merchantOr(title, PRODUCT_SECTION_TITLES[type]);
+}
+/**
+ * The rows the table draws: the facts table of the product's description
+ * first where the block reads it, then the merchant's own rows, and the facts
+ * the Storefront answers where neither says anything, so a merchant who has
+ * written nothing still gets a table rather than a heading over a gap.
+ */
+export function productSpecRows(specs, product, language, defaultLanguage, options = {}) {
+    const described = options.descriptionTable === true ? descriptionFacts(product) : [];
+    const typed = (specs ?? [])
+        .map((row, index) => ({
+        key: `typed-${index}`,
+        label: localize(row.name, language, defaultLanguage),
+        value: localize(row.value, language, defaultLanguage),
+    }))
+        .filter((row) => row.label !== '');
+    if (described.length > 0 || typed.length > 0)
+        return [...described, ...typed];
+    const words = platformWords(language, defaultLanguage);
+    const known = [
+        { key: 'vendor', word: 'product.brand', value: product.vendor },
+        { key: 'productType', word: 'product.type', value: product.productType },
+    ];
+    return known
+        .filter((fact) => fact.value !== undefined && fact.value !== '')
+        .map((fact) => ({ key: fact.key, label: words.own(fact.word), value: fact.value }));
+}
+/** The shipping rows a card draws: every row whose title the buyer can read, in the merchant's order. */
+export function shippingRowsOf(shipping, language, defaultLanguage) {
+    return (shipping ?? []).filter((row) => localize(row.title, language, defaultLanguage) !== '');
 }
 //# sourceMappingURL=product-specs.js.map

package/dist/product-specs.js.map

@@ -1 +1 @@
-{"version":3,"file":"product-specs.js","sourceRoot":"","sources":["../src/product-specs.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,gHAAgH;AAChH,MAAM,mBAAmB,GAAG;IAC1B,OAAO,EAAE,UAAU;IACnB,KAAK,EAAE,MAAM;IACb,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,QAAQ;IACd,aAAa,EAAE,QAAQ;IACvB,SAAS,EAAE,MAAM;IACjB,SAAS,EAAE,MAAM;IACjB,IAAI,EAAE,UAAU;IAChB,aAAa,EAAE,QAAQ;IACvB,KAAK,EAAE,MAAM;IACb,IAAI,EAAE,OAAO;CACgD,CAAC;AAMhE;;;;GAIG;AACH,MAAM,UAAU,kBAAkB,CAAC,KAAiB;IAClD,OAAO,UAAU,CAAC,KAAK,EAAE,eAAe,EAAE,mBAAmB,CAAC,CAAC;AACjE,CAAC"}
+{"version":3,"file":"product-specs.js","sourceRoot":"","sources":["../src/product-specs.ts"],"names":[],"mappings":"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"}

package/dist/product-summary.d.ts

@@ -1,4 +1,5 @@
-import type { ThemeStyle } from '@shoplix-ai/sdui-schema';
+import type { LocaleCode, MoneyStyle, ProductSummaryBlock, ThemeStyle } from '@shoplix-ai/sdui-schema';
+import type { ChosenPrice } from './variant-rows.js';
 /** The parts of the product summary, each with the theme role it draws unless a component token names another. */
 declare const PRODUCT_SUMMARY_ROLES: {
     readonly sheet: "elevated";
@@ -15,6 +16,10 @@ declare const PRODUCT_SUMMARY_ROLES: {
     readonly stock_ink: "text";
     readonly saving_surface: "sunken";
     readonly saving_ink: "success";
+    readonly byline: "muted";
+    readonly amount: "text";
+    readonly struck: "muted";
+    readonly off: "action";
 };
 export type ProductSummaryPart = keyof typeof PRODUCT_SUMMARY_ROLES;
 export type ProductSummaryColors = Readonly<Record<ProductSummaryPart, string>>;
@@ -25,5 +30,11 @@ export type ProductSummaryColors = Readonly<Record<ProductSummaryPart, string>>;
  * whole product screen with it.
  */
 export declare function productSummaryColors(theme: ThemeStyle): ProductSummaryColors;
+/**
+ * What the summary says the compare-at price saves, in the way the merchant
+ * chose: the amount ("Save 36.190 KWD"), the percent ("−17%"), or nothing.
+ * Nothing either where the chosen variant saves nothing.
+ */
+export declare function savingText(chosen: ChosenPrice, saving: ProductSummaryBlock['props']['saving'], language: LocaleCode, defaultLanguage: LocaleCode, money: MoneyStyle | undefined): string | null;
 export {};
 //# sourceMappingURL=product-summary.d.ts.map

package/dist/product-summary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"product-summary.d.ts","sourceRoot":"","sources":["../src/product-summary.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAG1D,kHAAkH;AAClH,QAAA,MAAM,qBAAqB;;;;;;;;;;;;;;;CAeoC,CAAC;AAEhE,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,qBAAqB,CAAC;AAEpE,MAAM,MAAM,oBAAoB,GAAG,QAAQ,CAAC,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC,CAAC;AAEhF;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,UAAU,GAAG,oBAAoB,CAE5E"}
+{"version":3,"file":"product-summary.d.ts","sourceRoot":"","sources":["../src/product-summary.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,UAAU,EACV,UAAU,EACV,mBAAmB,EACnB,UAAU,EACX,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD,kHAAkH;AAClH,QAAA,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;CAmBoC,CAAC;AAEhE,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,qBAAqB,CAAC;AAEpE,MAAM,MAAM,oBAAoB,GAAG,QAAQ,CAAC,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC,CAAC;AAEhF;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,UAAU,GAAG,oBAAoB,CAE5E;AAID;;;;GAIG;AACH,wBAAgB,UAAU,CACxB,MAAM,EAAE,WAAW,EACnB,MAAM,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,EAC9C,QAAQ,EAAE,UAAU,EACpB,eAAe,EAAE,UAAU,EAC3B,KAAK,EAAE,UAAU,GAAG,SAAS,GAC5B,MAAM,GAAG,IAAI,CAaf"}

package/dist/product-summary.js

@@ -1,4 +1,6 @@
+import { derivedMoney, discountPercent, moneyAmount } from './money.js';
 import { partColors } from './part-colors.js';
+import { platformWords } from './words.js';
 /** The parts of the product summary, each with the theme role it draws unless a component token names another. */
 const PRODUCT_SUMMARY_ROLES = {
     sheet: 'elevated',
@@ -15,6 +17,10 @@ const PRODUCT_SUMMARY_ROLES = {
     stock_ink: 'text',
     saving_surface: 'sunken',
     saving_ink: 'success',
+    byline: 'muted',
+    amount: 'text',
+    struck: 'muted',
+    off: 'action',
 };
 /**
  * Every colour the summary draws, one per part, with `product_summary.<part>`
@@ -25,4 +31,27 @@ const PRODUCT_SUMMARY_ROLES = {
 export function productSummaryColors(theme) {
     return partColors(theme, 'product_summary', PRODUCT_SUMMARY_ROLES);
 }
+const MINUS = '\u2212';
+/**
+ * What the summary says the compare-at price saves, in the way the merchant
+ * chose: the amount ("Save 36.190 KWD"), the percent ("−17%"), or nothing.
+ * Nothing either where the chosen variant saves nothing.
+ */
+export function savingText(chosen, saving, language, defaultLanguage, money) {
+    const { price, compareAt } = chosen;
+    if (compareAt === undefined || saving === 'none')
+        return null;
+    if (compareAt.currencyCode !== price.currencyCode)
+        return null;
+    if (saving === 'percent') {
+        const percent = discountPercent(price, compareAt);
+        return percent === null ? null : `${MINUS}${percent}%`;
+    }
+    const now = moneyAmount(price);
+    const then = moneyAmount(compareAt);
+    if (now === null || then === null || then <= now)
+        return null;
+    const saved = derivedMoney(then - now, price.currencyCode, language, money);
+    return `${platformWords(language, defaultLanguage).own('product.save')} ${saved.digits} ${saved.label}`.trim();
+}
 //# sourceMappingURL=product-summary.js.map

package/dist/product-summary.js.map

@@ -1 +1 @@
-{"version":3,"file":"product-summary.js","sourceRoot":"","sources":["../src/product-summary.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,kHAAkH;AAClH,MAAM,qBAAqB,GAAG;IAC5B,KAAK,EAAE,UAAU;IACjB,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,QAAQ;IACf,KAAK,EAAE,QAAQ;IACf,GAAG,EAAE,QAAQ;IACb,cAAc,EAAE,QAAQ;IACxB,MAAM,EAAE,MAAM;IACd,YAAY,EAAE,QAAQ;IACtB,IAAI,EAAE,SAAS;IACf,aAAa,EAAE,QAAQ;IACvB,SAAS,EAAE,QAAQ;IACnB,SAAS,EAAE,MAAM;IACjB,cAAc,EAAE,QAAQ;IACxB,UAAU,EAAE,SAAS;CACwC,CAAC;AAMhE;;;;;GAKG;AACH,MAAM,UAAU,oBAAoB,CAAC,KAAiB;IACpD,OAAO,UAAU,CAAC,KAAK,EAAE,iBAAiB,EAAE,qBAAqB,CAAC,CAAC;AACrE,CAAC"}
+{"version":3,"file":"product-summary.js","sourceRoot":"","sources":["../src/product-summary.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,kHAAkH;AAClH,MAAM,qBAAqB,GAAG;IAC5B,KAAK,EAAE,UAAU;IACjB,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,QAAQ;IACf,KAAK,EAAE,QAAQ;IACf,GAAG,EAAE,QAAQ;IACb,cAAc,EAAE,QAAQ;IACxB,MAAM,EAAE,MAAM;IACd,YAAY,EAAE,QAAQ;IACtB,IAAI,EAAE,SAAS;IACf,aAAa,EAAE,QAAQ;IACvB,SAAS,EAAE,QAAQ;IACnB,SAAS,EAAE,MAAM;IACjB,cAAc,EAAE,QAAQ;IACxB,UAAU,EAAE,SAAS;IACrB,MAAM,EAAE,OAAO;IACf,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,OAAO;IACf,GAAG,EAAE,QAAQ;CACgD,CAAC;AAMhE;;;;;GAKG;AACH,MAAM,UAAU,oBAAoB,CAAC,KAAiB;IACpD,OAAO,UAAU,CAAC,KAAK,EAAE,iBAAiB,EAAE,qBAAqB,CAAC,CAAC;AACrE,CAAC;AAED,MAAM,KAAK,GAAG,QAAQ,CAAC;AAEvB;;;;GAIG;AACH,MAAM,UAAU,UAAU,CACxB,MAAmB,EACnB,MAA8C,EAC9C,QAAoB,EACpB,eAA2B,EAC3B,KAA6B;IAE7B,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC;IACpC,IAAI,SAAS,KAAK,SAAS,IAAI,MAAM,KAAK,MAAM;QAAE,OAAO,IAAI,CAAC;IAC9D,IAAI,SAAS,CAAC,YAAY,KAAK,KAAK,CAAC,YAAY;QAAE,OAAO,IAAI,CAAC;IAC/D,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;QACzB,MAAM,OAAO,GAAG,eAAe,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;QAClD,OAAO,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,OAAO,GAAG,CAAC;IACzD,CAAC;IACD,MAAM,GAAG,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;IAC/B,MAAM,IAAI,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;IACpC,IAAI,GAAG,KAAK,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,IAAI,GAAG;QAAE,OAAO,IAAI,CAAC;IAC9D,MAAM,KAAK,GAAG,YAAY,CAAC,IAAI,GAAG,GAAG,EAAE,KAAK,CAAC,YAAY,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;IAC5E,OAAO,GAAG,aAAa,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC,GAAG,CAAC,cAAc,CAAC,IAAI,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC;AACjH,CAAC"}

package/dist/profile-header.d.ts

@@ -0,0 +1,30 @@
+import type { CustomerDisplay, ThemeStyle } from '@shoplix-ai/sdui-schema';
+/** The parts of the profile header, each with the theme role it draws unless a component token names another. */
+declare const PROFILE_HEADER_ROLES: {
+    readonly avatar: "sunken";
+    readonly initials: "text";
+    readonly name: "text";
+    readonly email: "muted";
+    readonly edit: "elevated";
+    readonly edit_border: "border";
+    readonly edit_glyph: "text";
+    readonly title: "text";
+    readonly subtitle: "muted";
+    readonly button: "action";
+};
+export type ProfileHeaderPart = keyof typeof PROFILE_HEADER_ROLES;
+export type ProfileHeaderColors = Readonly<Record<ProfileHeaderPart, string>>;
+/**
+ * Every colour the profile header draws, one per part, with
+ * `profile_header.<part>` over each theme role. The title, the subtitle and
+ * the button are what it draws while nobody is signed in.
+ */
+export declare function profileHeaderColors(theme: ThemeStyle): ProfileHeaderColors;
+/**
+ * The letters an avatar draws for a shopper: the first of each name they
+ * gave, or the first of the display name for one who gave none. A letter is
+ * taken whole, so a script with no capitals stands as it is written.
+ */
+export declare function customerInitials(customer: Pick<CustomerDisplay, 'firstName' | 'lastName' | 'displayName'>): string;
+export {};
+//# sourceMappingURL=profile-header.d.ts.map

package/dist/profile-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"profile-header.d.ts","sourceRoot":"","sources":["../src/profile-header.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAG3E,iHAAiH;AACjH,QAAA,MAAM,oBAAoB;;;;;;;;;;;CAWqC,CAAC;AAEhE,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,oBAAoB,CAAC;AAElE,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAC,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC,CAAC;AAE9E;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,UAAU,GAAG,mBAAmB,CAE1E;AAOD;;;;GAIG;AACH,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,UAAU,GAAG,aAAa,CAAC,GACxE,MAAM,CAGR"}

package/dist/profile-header.js

@@ -0,0 +1,36 @@
+import { partColors } from './part-colors.js';
+/** The parts of the profile header, each with the theme role it draws unless a component token names another. */
+const PROFILE_HEADER_ROLES = {
+    avatar: 'sunken',
+    initials: 'text',
+    name: 'text',
+    email: 'muted',
+    edit: 'elevated',
+    edit_border: 'border',
+    edit_glyph: 'text',
+    title: 'text',
+    subtitle: 'muted',
+    button: 'action',
+};
+/**
+ * Every colour the profile header draws, one per part, with
+ * `profile_header.<part>` over each theme role. The title, the subtitle and
+ * the button are what it draws while nobody is signed in.
+ */
+export function profileHeaderColors(theme) {
+    return partColors(theme, 'profile_header', PROFILE_HEADER_ROLES);
+}
+function firstLetter(word) {
+    const [letter] = Array.from((word ?? '').trim());
+    return letter === undefined ? '' : letter.toLocaleUpperCase();
+}
+/**
+ * The letters an avatar draws for a shopper: the first of each name they
+ * gave, or the first of the display name for one who gave none. A letter is
+ * taken whole, so a script with no capitals stands as it is written.
+ */
+export function customerInitials(customer) {
+    const named = `${firstLetter(customer.firstName)}${firstLetter(customer.lastName)}`;
+    return named === '' ? firstLetter(customer.displayName) : named;
+}
+//# sourceMappingURL=profile-header.js.map

package/dist/profile-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"profile-header.js","sourceRoot":"","sources":["../src/profile-header.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,iHAAiH;AACjH,MAAM,oBAAoB,GAAG;IAC3B,MAAM,EAAE,QAAQ;IAChB,QAAQ,EAAE,MAAM;IAChB,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,UAAU;IAChB,WAAW,EAAE,QAAQ;IACrB,UAAU,EAAE,MAAM;IAClB,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,OAAO;IACjB,MAAM,EAAE,QAAQ;CAC6C,CAAC;AAMhE;;;;GAIG;AACH,MAAM,UAAU,mBAAmB,CAAC,KAAiB;IACnD,OAAO,UAAU,CAAC,KAAK,EAAE,gBAAgB,EAAE,oBAAoB,CAAC,CAAC;AACnE,CAAC;AAED,SAAS,WAAW,CAAC,IAAwB;IAC3C,MAAM,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;IACjD,OAAO,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,iBAAiB,EAAE,CAAC;AAChE,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,gBAAgB,CAC9B,QAAyE;IAEzE,MAAM,KAAK,GAAG,GAAG,WAAW,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,WAAW,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;IACpF,OAAO,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;AAClE,CAAC"}

package/dist/promo-banner.d.ts

@@ -1,4 +1,4 @@
-import { type ThemeStyle } from '@shoplix-ai/sdui-schema';
+import { type LocaleCode, type ThemeStyle } from '@shoplix-ai/sdui-schema';
 /** The parts of a promo card, each with the theme role it draws unless a component token names another. */
 declare const PROMO_BANNER_ROLES: {
     readonly artwork: "sunken";
@@ -20,5 +20,15 @@ export declare function promoBannerColors(theme: ThemeStyle): PromoBannerColors;
  * softer than its cards.
  */
 export declare function promoBannerRadius(theme: ThemeStyle): number;
+/** How many promotions a banner stacks, in the form the buyer's language counts them in. */
+export declare function promoSetLabel(cards: number, language: LocaleCode, defaultLanguage: LocaleCode): string;
+/**
+ * The name a screen reader reads for one promo card. A card in a set of more
+ * than one says which of how many it is, beside the merchant's own words where
+ * they wrote any and in place of them where they wrote none; a card standing
+ * alone is its words, or the platform's word for a promotion. The merchant's
+ * words go in last, so text of theirs that looks like a slot stays as written.
+ */
+export declare function promoCardLabel(merchantLabel: string, cardIndex: number, cards: number, language: LocaleCode, defaultLanguage: LocaleCode): string;
 export {};
 //# sourceMappingURL=promo-banner.d.ts.map

package/dist/promo-banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"promo-banner.d.ts","sourceRoot":"","sources":["../src/promo-banner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAG/E,2GAA2G;AAC3G,QAAA,MAAM,kBAAkB;;;;;CAKuC,CAAC;AAEhE,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,kBAAkB,CAAC;AAE9D,MAAM,MAAM,iBAAiB,GAAG,QAAQ,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC;AAE1E;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,UAAU,GAAG,iBAAiB,CAEtE;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAE3D"}
+{"version":3,"file":"promo-banner.d.ts","sourceRoot":"","sources":["../src/promo-banner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAIhG,2GAA2G;AAC3G,QAAA,MAAM,kBAAkB;;;;;CAKuC,CAAC;AAEhE,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,kBAAkB,CAAC;AAE9D,MAAM,MAAM,iBAAiB,GAAG,QAAQ,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC;AAE1E;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,UAAU,GAAG,iBAAiB,CAEtE;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAE3D;AAED,4FAA4F;AAC5F,wBAAgB,aAAa,CAC3B,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,UAAU,EACpB,eAAe,EAAE,UAAU,GAC1B,MAAM,CAER;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,aAAa,EAAE,MAAM,EACrB,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,UAAU,EACpB,eAAe,EAAE,UAAU,GAC1B,MAAM,CAUR"}

package/dist/promo-banner.js

@@ -1,5 +1,6 @@
 import { componentTokenValue } from '@shoplix-ai/sdui-schema';
 import { partColors } from './part-colors.js';
+import { countedWord, platformWords } from './words.js';
 /** The parts of a promo card, each with the theme role it draws unless a component token names another. */
 const PROMO_BANNER_ROLES = {
     artwork: 'sunken',
@@ -23,4 +24,27 @@ export function promoBannerColors(theme) {
 export function promoBannerRadius(theme) {
     return componentTokenValue(theme, 'promo_banner.radius', theme.radius);
 }
+/** How many promotions a banner stacks, in the form the buyer's language counts them in. */
+export function promoSetLabel(cards, language, defaultLanguage) {
+    return countedWord('promo.cards', cards, language, defaultLanguage);
+}
+/**
+ * The name a screen reader reads for one promo card. A card in a set of more
+ * than one says which of how many it is, beside the merchant's own words where
+ * they wrote any and in place of them where they wrote none; a card standing
+ * alone is its words, or the platform's word for a promotion. The merchant's
+ * words go in last, so text of theirs that looks like a slot stays as written.
+ */
+export function promoCardLabel(merchantLabel, cardIndex, cards, language, defaultLanguage) {
+    const words = platformWords(language, defaultLanguage);
+    if (cards <= 1)
+        return merchantLabel === '' ? words.own('promo.promotion') : merchantLabel;
+    const slots = {
+        position: String(cardIndex + 1),
+        count: String(cards),
+        label: merchantLabel,
+    };
+    const pattern = words.own(merchantLabel === '' ? 'promo.card_of' : 'promo.card_named');
+    return pattern.replace(/\{(position|count|label)\}/g, (_slot, name) => slots[name]);
+}
 //# sourceMappingURL=promo-banner.js.map

package/dist/promo-banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"promo-banner.js","sourceRoot":"","sources":["../src/promo-banner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAmB,MAAM,yBAAyB,CAAC;AAC/E,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,2GAA2G;AAC3G,MAAM,kBAAkB,GAAG;IACzB,OAAO,EAAE,QAAQ;IACjB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,QAAQ;CAC2C,CAAC;AAMhE;;;;GAIG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAAiB;IACjD,OAAO,UAAU,CAAC,KAAK,EAAE,cAAc,EAAE,kBAAkB,CAAC,CAAC;AAC/D,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAAiB;IACjD,OAAO,mBAAmB,CAAC,KAAK,EAAE,qBAAqB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;AACzE,CAAC"}
+{"version":3,"file":"promo-banner.js","sourceRoot":"","sources":["../src/promo-banner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAoC,MAAM,yBAAyB,CAAC;AAChG,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAExD,2GAA2G;AAC3G,MAAM,kBAAkB,GAAG;IACzB,OAAO,EAAE,QAAQ;IACjB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,QAAQ;CAC2C,CAAC;AAMhE;;;;GAIG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAAiB;IACjD,OAAO,UAAU,CAAC,KAAK,EAAE,cAAc,EAAE,kBAAkB,CAAC,CAAC;AAC/D,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAAiB;IACjD,OAAO,mBAAmB,CAAC,KAAK,EAAE,qBAAqB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;AACzE,CAAC;AAED,4FAA4F;AAC5F,MAAM,UAAU,aAAa,CAC3B,KAAa,EACb,QAAoB,EACpB,eAA2B;IAE3B,OAAO,WAAW,CAAC,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,eAAe,CAAC,CAAC;AACtE,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,cAAc,CAC5B,aAAqB,EACrB,SAAiB,EACjB,KAAa,EACb,QAAoB,EACpB,eAA2B;IAE3B,MAAM,KAAK,GAAG,aAAa,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;IACvD,IAAI,KAAK,IAAI,CAAC;QAAE,OAAO,aAAa,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC;IAC3F,MAAM,KAAK,GAA2B;QACpC,QAAQ,EAAE,MAAM,CAAC,SAAS,GAAG,CAAC,CAAC;QAC/B,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC;QACpB,KAAK,EAAE,aAAa;KACrB,CAAC;IACF,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,aAAa,KAAK,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC;IACvF,OAAO,OAAO,CAAC,OAAO,CAAC,6BAA6B,EAAE,CAAC,KAAK,EAAE,IAAY,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAE,CAAC,CAAC;AAC/F,CAAC"}

package/dist/section-header.d.ts

@@ -1,5 +1,9 @@
 import type { ThemeStyle } from '@shoplix-ai/sdui-schema';
-/** The parts of the section header, each with the theme role it draws unless a component token names another. */
+/**
+ * The parts of the section header, each with the theme role it draws unless a
+ * component token names another. The collection heading draws the title part
+ * alone.
+ */
 declare const SECTION_HEADER_ROLES: {
     readonly title: "text";
     readonly link: "action";

package/dist/section-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"section-header.d.ts","sourceRoot":"","sources":["../src/section-header.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAG1D,iHAAiH;AACjH,QAAA,MAAM,oBAAoB;;;CAGqC,CAAC;AAEhE,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,oBAAoB,CAAC;AAElE,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAC,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC,CAAC;AAE9E;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,UAAU,GAAG,mBAAmB,CAE1E"}
+{"version":3,"file":"section-header.d.ts","sourceRoot":"","sources":["../src/section-header.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAG1D;;;;GAIG;AACH,QAAA,MAAM,oBAAoB;;;CAGqC,CAAC;AAEhE,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,oBAAoB,CAAC;AAElE,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAC,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC,CAAC;AAE9E;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,UAAU,GAAG,mBAAmB,CAE1E"}

package/dist/section-header.js

@@ -1,5 +1,9 @@
 import { partColors } from './part-colors.js';
-/** The parts of the section header, each with the theme role it draws unless a component token names another. */
+/**
+ * The parts of the section header, each with the theme role it draws unless a
+ * component token names another. The collection heading draws the title part
+ * alone.
+ */
 const SECTION_HEADER_ROLES = {
     title: 'text',
     link: 'action',

package/dist/section-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"section-header.js","sourceRoot":"","sources":["../src/section-header.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,iHAAiH;AACjH,MAAM,oBAAoB,GAAG;IAC3B,KAAK,EAAE,MAAM;IACb,IAAI,EAAE,QAAQ;CAC+C,CAAC;AAMhE;;;GAGG;AACH,MAAM,UAAU,mBAAmB,CAAC,KAAiB;IACnD,OAAO,UAAU,CAAC,KAAK,EAAE,gBAAgB,EAAE,oBAAoB,CAAC,CAAC;AACnE,CAAC"}
+{"version":3,"file":"section-header.js","sourceRoot":"","sources":["../src/section-header.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,oBAAoB,GAAG;IAC3B,KAAK,EAAE,MAAM;IACb,IAAI,EAAE,QAAQ;CAC+C,CAAC;AAMhE;;;GAGG;AACH,MAAM,UAAU,mBAAmB,CAAC,KAAiB;IACnD,OAAO,UAAU,CAAC,KAAK,EAAE,gBAAgB,EAAE,oBAAoB,CAAC,CAAC;AACnE,CAAC"}

package/dist/sign-in.d.ts

@@ -0,0 +1,28 @@
+import type { ThemeStyle } from '@shoplix-ai/sdui-schema';
+/** The parts of the sign-in block, each with the theme role it draws unless a component token names another. */
+declare const SIGN_IN_ROLES: {
+    readonly title: "text";
+    readonly subtitle: "muted";
+    readonly label: "text";
+    readonly field: "surface";
+    readonly field_border: "border";
+    readonly input: "text";
+    readonly placeholder: "subtle";
+    readonly error: "warning";
+    readonly button: "action";
+    readonly note: "muted";
+    readonly terms: "text";
+};
+export type SignInPart = keyof typeof SIGN_IN_ROLES;
+export type SignInColors = Readonly<Record<SignInPart, string>>;
+/**
+ * Every colour the sign-in block draws, one per part, with `sign_in.<part>` as
+ * the escape hatch over each theme role. The words on a solid button are
+ * whichever of ink and paper stands out on it.
+ *
+ * @deprecated The sign-in block is retired: no draft places it, and only a
+ * Release published before still carries it. Kept until the next major.
+ */
+export declare function signInColors(theme: ThemeStyle): SignInColors;
+export {};
+//# sourceMappingURL=sign-in.d.ts.map

package/dist/sign-in.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sign-in.d.ts","sourceRoot":"","sources":["../src/sign-in.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAG1D,gHAAgH;AAChH,QAAA,MAAM,aAAa;;;;;;;;;;;;CAY4C,CAAC;AAEhE,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,aAAa,CAAC;AAEpD,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC;AAEhE;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,UAAU,GAAG,YAAY,CAE5D"}

package/dist/sign-in.js

@@ -0,0 +1,27 @@
+import { partColors } from './part-colors.js';
+/** The parts of the sign-in block, each with the theme role it draws unless a component token names another. */
+const SIGN_IN_ROLES = {
+    title: 'text',
+    subtitle: 'muted',
+    label: 'text',
+    field: 'surface',
+    field_border: 'border',
+    input: 'text',
+    placeholder: 'subtle',
+    error: 'warning',
+    button: 'action',
+    note: 'muted',
+    terms: 'text',
+};
+/**
+ * Every colour the sign-in block draws, one per part, with `sign_in.<part>` as
+ * the escape hatch over each theme role. The words on a solid button are
+ * whichever of ink and paper stands out on it.
+ *
+ * @deprecated The sign-in block is retired: no draft places it, and only a
+ * Release published before still carries it. Kept until the next major.
+ */
+export function signInColors(theme) {
+    return partColors(theme, 'sign_in', SIGN_IN_ROLES);
+}
+//# sourceMappingURL=sign-in.js.map

package/dist/sign-in.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sign-in.js","sourceRoot":"","sources":["../src/sign-in.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,gHAAgH;AAChH,MAAM,aAAa,GAAG;IACpB,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,OAAO;IACjB,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,SAAS;IAChB,YAAY,EAAE,QAAQ;IACtB,KAAK,EAAE,MAAM;IACb,WAAW,EAAE,QAAQ;IACrB,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,MAAM;CACgD,CAAC;AAMhE;;;;;;;GAOG;AACH,MAAM,UAAU,YAAY,CAAC,KAAiB;IAC5C,OAAO,UAAU,CAAC,KAAK,EAAE,SAAS,EAAE,aAAa,CAAC,CAAC;AACrD,CAAC"}

package/dist/store-header.d.ts

@@ -1,4 +1,4 @@
-import type { ThemeStyle } from '@shoplix-ai/sdui-schema';
+import { type LocaleCode, type SearchBarBlock, type StoreHeaderBlock, type ThemeStyle } from '@shoplix-ai/sdui-schema';
 /** The parts of the store header, each with the theme role it draws unless a component token names another. */
 declare const STORE_HEADER_ROLES: {
     readonly bar: "elevated";
@@ -13,22 +13,65 @@ declare const STORE_HEADER_ROLES: {
     readonly drawer_ink: "text";
     readonly drawer_subtle: "subtle";
     readonly drawer_divider: "border";
-    readonly scrim: "overlay";
+    readonly drawer_group: "sunken";
 };
-export type StoreHeaderPart = keyof typeof STORE_HEADER_ROLES;
+export type StoreHeaderPart = keyof typeof STORE_HEADER_ROLES | 'scrim';
 export type StoreHeaderColors = Readonly<Record<StoreHeaderPart, string>>;
+/** The dim behind the open menu: dark, the way the Cart Drawer dims, and no theme role, since a theme's overlay is a wash. */
+export declare const STORE_MENU_DIM = "rgba(0, 0, 0, 0.35)";
 /**
  * Every colour the store header draws, one per part, with `store_header.<part>`
- * as the escape hatch over each theme role. The phone's header and its web twin
- * read this one table, so the chrome a merchant sees on the canvas and the
- * chrome their shopper sees cannot disagree.
+ * as the escape hatch over each theme role, and over the dark dim behind the
+ * open menu. The phone's header and its web twin read this one table, so the
+ * chrome a merchant sees on the canvas and the chrome their shopper sees cannot
+ * disagree.
  */
 export declare function storeHeaderColors(theme: ThemeStyle): StoreHeaderColors;
+/** How tall a row of the open menu stands and how large its words are, in points. */
+export interface StoreMenuMetrics {
+    readonly rowHeight: number;
+    readonly labelSize: number;
+}
+/** The menu's rows as the theme sizes them, 48 points tall with 16 point words where it names nothing. */
+export declare function storeMenuMetrics(theme: ThemeStyle): StoreMenuMetrics;
 /**
  * What the cart badge writes, or nothing at all for an empty cart. Both readers
  * cap it the same way, so a merchant never sees a count on the canvas the phone
  * would not draw.
  */
 export declare function cartBadgeCount(totalQuantity: number): string | null;
+/** What the search entry holds in one language: the lead, the hints it types, its steady label, and the line for the letters typed so far. */
+export interface SearchEntryWords {
+    readonly lead: string;
+    readonly hints: readonly string[];
+    readonly label: string;
+    readonly line: (typed: string) => string;
+}
+type SearchBarSettings = SearchBarBlock['props'];
+type SearchEntrySettings = Pick<StoreHeaderBlock['props'], 'searchPlaceholder' | 'typeSearchHints' | 'searchHintLead' | 'searchHints'>;
+/**
+ * The search bar's words in the buyer's language, the one rule the phone and
+ * its canvas twin read. Typing off, or no hint in the buyer's language or the
+ * Shop's default, holds the placeholder.
+ */
+export declare function searchBarWords(settings: Pick<SearchBarSettings, 'placeholder' | 'typeHints' | 'hintLead' | 'hints'>, language: LocaleCode, defaultLanguage: LocaleCode): SearchEntryWords;
+/** The store header's search entry in the buyer's language, read by the rule of the search bar. */
+export declare function searchEntryWords(settings: SearchEntrySettings, language: LocaleCode, defaultLanguage: LocaleCode): SearchEntryWords;
+/** The box the search entry stands in: its size and corner in points, its colours, its band. */
+export interface SearchEntryBox {
+    readonly height: number;
+    readonly radius: number;
+    readonly surface: string;
+    readonly stroke: string;
+    readonly ink: string;
+    readonly band: string;
+}
+/**
+ * The search entry's box as the merchant set it on the search bar, and the
+ * entry the store header drew for every part they left out, so a search moved
+ * out of the header draws as it drew there, on the header's band. The
+ * header's entry is this box with nothing set.
+ */
+export declare function searchEntryBox(theme: ThemeStyle, settings?: Pick<SearchBarSettings, 'height' | 'radius' | 'surface' | 'stroke' | 'ink'>): SearchEntryBox;
 export {};
 //# sourceMappingURL=store-header.d.ts.map

package/dist/store-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"store-header.d.ts","sourceRoot":"","sources":["../src/store-header.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAG1D,+GAA+G;AAC/G,QAAA,MAAM,kBAAkB;;;;;;;;;;;;;;CAcuC,CAAC;AAEhE,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,kBAAkB,CAAC;AAE9D,MAAM,MAAM,iBAAiB,GAAG,QAAQ,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC;AAE1E;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,UAAU,GAAG,iBAAiB,CAEtE;AAKD;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,aAAa,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAGnE"}
+{"version":3,"file":"store-header.d.ts","sourceRoot":"","sources":["../src/store-header.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,UAAU,EAEf,KAAK,cAAc,EACnB,KAAK,gBAAgB,EACrB,KAAK,UAAU,EAChB,MAAM,yBAAyB,CAAC;AAMjC,+GAA+G;AAC/G,QAAA,MAAM,kBAAkB;;;;;;;;;;;;;;CAcuC,CAAC;AAEhE,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,kBAAkB,GAAG,OAAO,CAAC;AAExE,MAAM,MAAM,iBAAiB,GAAG,QAAQ,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC;AAE1E,8HAA8H;AAC9H,eAAO,MAAM,cAAc,wBAAwB,CAAC;AAEpD;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,UAAU,GAAG,iBAAiB,CAKtE;AAED,qFAAqF;AACrF,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;CAC5B;AAED,0GAA0G;AAC1G,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,UAAU,GAAG,gBAAgB,CAKpE;AAKD;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,aAAa,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAGnE;AAED,8IAA8I;AAC9I,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IAClC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAC1C;AAED,KAAK,iBAAiB,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC;AAEjD,KAAK,mBAAmB,GAAG,IAAI,CAC7B,gBAAgB,CAAC,OAAO,CAAC,EACzB,mBAAmB,GAAG,iBAAiB,GAAG,gBAAgB,GAAG,aAAa,CAC3E,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,QAAQ,EAAE,IAAI,CAAC,iBAAiB,EAAE,aAAa,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC,EACrF,QAAQ,EAAE,UAAU,EACpB,eAAe,EAAE,UAAU,GAC1B,gBAAgB,CAelB;AAED,mGAAmG;AACnG,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,mBAAmB,EAC7B,QAAQ,EAAE,UAAU,EACpB,eAAe,EAAE,UAAU,GAC1B,gBAAgB,CAElB;AAED,gGAAgG;AAChG,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACvB;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,UAAU,EACjB,QAAQ,GAAE,IAAI,CAAC,iBAAiB,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,KAAK,CAAM,GACzF,cAAc,CAUhB"}