@shoplix-ai/block-kit 4.6.0 → 5.16.0

package/dist/listing-filters.d.ts

@@ -0,0 +1,114 @@
+import { type ListingFilterDisplay, type ListingFilterKind, type ListingFilterValueDisplay, type ListingToolbarBlock, type LocaleCode } from '@shoplix-ai/sdui-schema';
+type ListingToolbarSettings = ListingToolbarBlock['props'];
+interface RowBase {
+    readonly filterId: string;
+    readonly kind?: ListingFilterKind;
+    readonly label: string;
+}
+/**
+ * One row of the filter sheet, in the shape the shopper answers it with: a
+ * switch for a filter Shopify answers with a yes, the stock for one, with the
+ * line under its words; the values of a list, each with its count and its
+ * swatch or picture; or a price range between the bounds Shopify offers.
+ */
+export type ListingFilterRow = (RowBase & {
+    readonly shape: 'switch';
+    readonly hint?: string;
+    readonly value: ListingFilterValueDisplay;
+}) | (RowBase & {
+    readonly shape: 'list';
+    readonly values: readonly ListingFilterValueDisplay[];
+}) | (RowBase & {
+    readonly shape: 'range';
+    readonly min: number;
+    readonly max: number;
+});
+/** Whether the merchant's words for a kind title its filter: every kind but those that may hold several. */
+export declare function listingFilterWordsApply(kind: ListingFilterKind): boolean;
+/**
+ * The rows of the filter sheet out of the filters Shopify offers the
+ * collection, in the merchant's order (`listingFiltersOf`), each titled in the
+ * merchant's words where they wrote some the buyer reads and Shopify's
+ * otherwise. The stock is a switch that says "In stock only" over "Hide
+ * products that are sold out" from the catalog, or the merchant's words and
+ * line, and turns on Shopify's own in stock value.
+ */
+export declare function listingFilterRows(settings: ListingToolbarSettings, filters: readonly ListingFilterDisplay[], language: LocaleCode, defaultLanguage: LocaleCode): readonly ListingFilterRow[];
+/**
+ * A filter the shopper turned on: the filter and the value it is, the product
+ * filter that goes to Shopify for it, and the words of the chip that names it
+ * under the toolbar. The chip keeps its words, so a filter stays named while
+ * the listing reads again.
+ */
+export interface ActiveListingFilter {
+    readonly filterId: string;
+    readonly valueId: string;
+    readonly input: string;
+    readonly label: string;
+}
+/** One filter on, as one key: two of them are the same filter where their keys are. */
+export declare function activeFilterKey(filter: Pick<ActiveListingFilter, 'filterId' | 'valueId'>): string;
+/**
+ * Whether a toolbar offers its filters, on the phone and on the canvas alike:
+ * the merchant left the button on, the listing reads a collection, and Shopify
+ * offers a filter the sheet would draw, has not answered yet, or the shopper
+ * has a filter on.
+ */
+export declare function listingFilterShown(settings: ListingToolbarSettings, listing: {
+    readonly filterable: boolean;
+    readonly filters: readonly ListingFilterDisplay[] | undefined;
+    readonly active: number;
+}, language: LocaleCode, defaultLanguage: LocaleCode): boolean;
+/** A switch or a value of a list turned on: Shopify's own input for the value, and the switch's words or the value's. */
+export declare function activeFilterOf(row: Extract<ListingFilterRow, {
+    shape: 'switch' | 'list';
+}>, value: ListingFilterValueDisplay): ActiveListingFilter;
+/** The id a price range the shopper gave holds in place of a value's, Shopify offering one range and no values to pick. */
+export declare const PRICE_RANGE_VALUE = "range";
+/**
+ * A price the shopper typed, read as a number whatever keyboard wrote it: the
+ * digits the Arabic and the Persian keyboards write read as the ones Shopify
+ * takes, the Arabic decimal mark as the point, and the thousands marks dropped.
+ * Where a point and a comma both stand, the last is the decimal mark; a lone
+ * comma before three digits groups the thousands, so "1,000" is a thousand and
+ * "49,90" forty-nine and ninety; a lone point is the decimal mark. Nothing
+ * typed, or something that is no price, is no bound.
+ */
+export declare function typedPrice(typed: string): number | undefined;
+/**
+ * A price range the shopper gave, as Shopify's price filter, the one filter
+ * whose input the app writes, since Shopify offers a range's bounds and no
+ * value to pick: the bounds they typed, low first. Its chip names the filter
+ * and both ends, a missing end being Shopify's own bound. No bound typed is no
+ * filter.
+ */
+export declare function activePriceFilter(row: Extract<ListingFilterRow, {
+    shape: 'range';
+}>, low: number | undefined, high: number | undefined): ActiveListingFilter | undefined;
+/** The bounds of a price range the shopper gave, read back off its filter, to stand in the sheet's fields again. */
+export declare function priceBoundsOf(active: ActiveListingFilter): {
+    readonly min?: number;
+    readonly max?: number;
+};
+/** Every word of the filter button, the sheet and the chips. */
+export interface ListingFilterWords {
+    readonly button: string;
+    readonly title: string;
+    readonly apply: string;
+    readonly clear: string;
+    readonly clearAll: string;
+    readonly remove: string;
+    readonly none: string;
+    readonly min: string;
+    readonly max: string;
+    /** How a screen reader names the button with this many filters on. */
+    on(count: number): string;
+}
+/**
+ * The words of the filters: the merchant's for the button, the sheet's title,
+ * its two buttons and "clear all" where they wrote some the buyer reads, and
+ * the catalog's `listing.filter*` otherwise.
+ */
+export declare function listingFilterWords(settings: ListingToolbarSettings, language: LocaleCode, defaultLanguage: LocaleCode): ListingFilterWords;
+export {};
+//# sourceMappingURL=listing-filters.d.ts.map

package/dist/listing-filters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"listing-filters.d.ts","sourceRoot":"","sources":["../src/listing-filters.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,oBAAoB,EACzB,KAAK,iBAAiB,EACtB,KAAK,yBAAyB,EAC9B,KAAK,mBAAmB,EACxB,KAAK,UAAU,EAEhB,MAAM,yBAAyB,CAAC;AAIjC,KAAK,sBAAsB,GAAG,mBAAmB,CAAC,OAAO,CAAC,CAAC;AAE3D,UAAU,OAAO;IACf,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,IAAI,CAAC,EAAE,iBAAiB,CAAC;IAClC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED;;;;;GAKG;AACH,MAAM,MAAM,gBAAgB,GACxB,CAAC,OAAO,GAAG;IACT,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC;IACzB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,yBAAyB,CAAC;CAC3C,CAAC,GACF,CAAC,OAAO,GAAG;IAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,MAAM,EAAE,SAAS,yBAAyB,EAAE,CAAA;CAAE,CAAC,GAC7F,CAAC,OAAO,GAAG;IAAE,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAoBxF,4GAA4G;AAC5G,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,iBAAiB,GAAG,OAAO,CAExE;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,sBAAsB,EAChC,OAAO,EAAE,SAAS,oBAAoB,EAAE,EACxC,QAAQ,EAAE,UAAU,EACpB,eAAe,EAAE,UAAU,GAC1B,SAAS,gBAAgB,EAAE,CAyC7B;AAED;;;;;GAKG;AACH,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED,uFAAuF;AACvF,wBAAgB,eAAe,CAAC,MAAM,EAAE,IAAI,CAAC,mBAAmB,EAAE,UAAU,GAAG,SAAS,CAAC,GAAG,MAAM,CAEjG;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,sBAAsB,EAChC,OAAO,EAAE;IACP,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,OAAO,EAAE,SAAS,oBAAoB,EAAE,GAAG,SAAS,CAAC;IAC9D,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB,EACD,QAAQ,EAAE,UAAU,EACpB,eAAe,EAAE,UAAU,GAC1B,OAAO,CAIT;AAED,yHAAyH;AACzH,wBAAgB,cAAc,CAC5B,GAAG,EAAE,OAAO,CAAC,gBAAgB,EAAE;IAAE,KAAK,EAAE,QAAQ,GAAG,MAAM,CAAA;CAAE,CAAC,EAC5D,KAAK,EAAE,yBAAyB,GAC/B,mBAAmB,CAOrB;AAED,2HAA2H;AAC3H,eAAO,MAAM,iBAAiB,UAAU,CAAC;AAIzC;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CA0B5D;AAMD;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAC/B,GAAG,EAAE,OAAO,CAAC,gBAAgB,EAAE;IAAE,KAAK,EAAE,OAAO,CAAA;CAAE,CAAC,EAClD,GAAG,EAAE,MAAM,GAAG,SAAS,EACvB,IAAI,EAAE,MAAM,GAAG,SAAS,GACvB,mBAAmB,GAAG,SAAS,CAWjC;AAED,oHAAoH;AACpH,wBAAgB,aAAa,CAAC,MAAM,EAAE,mBAAmB,GAAG;IAC1D,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;CACvB,CAUA;AAED,gEAAgE;AAChE,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CAC3B;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,sBAAsB,EAChC,QAAQ,EAAE,UAAU,EACpB,eAAe,EAAE,UAAU,GAC1B,kBAAkB,CAcpB"}

package/dist/listing-filters.js

@@ -0,0 +1,195 @@
+import { LISTING_TOOLBAR_DEFAULTS, listingFiltersOf, } from '@shoplix-ai/sdui-schema';
+import { readable } from './locale.js';
+import { platformWords } from './words.js';
+function wordOf(text, language, defaultLanguage) {
+    return text === undefined ? undefined : readable(text, language, defaultLanguage);
+}
+/**
+ * The kinds that may hold several filters of Shopify's, a size and a colour
+ * for one: each is titled in the words the merchant gave it in Search &
+ * Discovery, since one word of theirs could not name both.
+ */
+const SEVERAL_FILTER_KINDS = new Set([
+    'variant_option',
+    'metafield',
+]);
+/** Whether the merchant's words for a kind title its filter: every kind but those that may hold several. */
+export function listingFilterWordsApply(kind) {
+    return !SEVERAL_FILTER_KINDS.has(kind);
+}
+/**
+ * The rows of the filter sheet out of the filters Shopify offers the
+ * collection, in the merchant's order (`listingFiltersOf`), each titled in the
+ * merchant's words where they wrote some the buyer reads and Shopify's
+ * otherwise. The stock is a switch that says "In stock only" over "Hide
+ * products that are sold out" from the catalog, or the merchant's words and
+ * line, and turns on Shopify's own in stock value.
+ */
+export function listingFilterRows(settings, filters, language, defaultLanguage) {
+    const words = platformWords(language, defaultLanguage);
+    return listingFiltersOf(settings, filters).flatMap(({ filter, choice }) => {
+        const worded = filter.kind !== undefined && listingFilterWordsApply(filter.kind);
+        const own = worded ? wordOf(choice?.label, language, defaultLanguage) : undefined;
+        const stock = filter.kind === 'availability';
+        const base = {
+            filterId: filter.id,
+            ...(filter.kind === undefined ? {} : { kind: filter.kind }),
+        };
+        const yes = filter.values.find((value) => value.id === filter.yes);
+        if (yes !== undefined) {
+            const hint = stock
+                ? (wordOf(choice?.hint, language, defaultLanguage) ??
+                    words.own('listing.filter_in_stock_hint'))
+                : undefined;
+            return [
+                {
+                    ...base,
+                    shape: 'switch',
+                    label: own ?? (stock ? words.own('listing.filter_in_stock') : filter.label),
+                    ...(hint === undefined ? {} : { hint }),
+                    value: yes,
+                },
+            ];
+        }
+        if (filter.shape === 'price_range') {
+            if (filter.range === undefined)
+                return [];
+            return [
+                {
+                    ...base,
+                    shape: 'range',
+                    label: own ?? filter.label,
+                    min: filter.range.min,
+                    max: filter.range.max,
+                },
+            ];
+        }
+        if (filter.values.length === 0)
+            return [];
+        return [{ ...base, shape: 'list', label: own ?? filter.label, values: filter.values }];
+    });
+}
+/** One filter on, as one key: two of them are the same filter where their keys are. */
+export function activeFilterKey(filter) {
+    return `${filter.filterId}:${filter.valueId}`;
+}
+/**
+ * Whether a toolbar offers its filters, on the phone and on the canvas alike:
+ * the merchant left the button on, the listing reads a collection, and Shopify
+ * offers a filter the sheet would draw, has not answered yet, or the shopper
+ * has a filter on.
+ */
+export function listingFilterShown(settings, listing, language, defaultLanguage) {
+    if (!(settings.filter ?? LISTING_TOOLBAR_DEFAULTS.filter) || !listing.filterable)
+        return false;
+    if (listing.filters === undefined || listing.active > 0)
+        return true;
+    return listingFilterRows(settings, listing.filters, language, defaultLanguage).length > 0;
+}
+/** A switch or a value of a list turned on: Shopify's own input for the value, and the switch's words or the value's. */
+export function activeFilterOf(row, value) {
+    return {
+        filterId: row.filterId,
+        valueId: value.id,
+        input: value.input,
+        label: row.shape === 'switch' ? row.label : value.label,
+    };
+}
+/** The id a price range the shopper gave holds in place of a value's, Shopify offering one range and no values to pick. */
+export const PRICE_RANGE_VALUE = 'range';
+const DIGIT_SETS = ['٠١٢٣٤٥٦٧٨٩', '۰۱۲۳۴۵۶۷۸۹'];
+/**
+ * A price the shopper typed, read as a number whatever keyboard wrote it: the
+ * digits the Arabic and the Persian keyboards write read as the ones Shopify
+ * takes, the Arabic decimal mark as the point, and the thousands marks dropped.
+ * Where a point and a comma both stand, the last is the decimal mark; a lone
+ * comma before three digits groups the thousands, so "1,000" is a thousand and
+ * "49,90" forty-nine and ninety; a lone point is the decimal mark. Nothing
+ * typed, or something that is no price, is no bound.
+ */
+export function typedPrice(typed) {
+    let text = typed
+        .trim()
+        .replace(/[\s٬']/g, '')
+        .replace(/٫/g, '.');
+    for (const set of DIGIT_SETS) {
+        text = text.replace(/[٠-٩۰-۹]/g, (digit) => {
+            const at = set.indexOf(digit);
+            return at === -1 ? digit : String(at);
+        });
+    }
+    const marks = [...text.matchAll(/[.,]/g)].map((match) => match.index);
+    const last = marks[marks.length - 1];
+    let decimal;
+    if (last !== undefined && new Set(marks.map((at) => text[at])).size === 2)
+        decimal = last;
+    else if (last !== undefined && marks.length === 1) {
+        decimal = text[last] === '.' || text.length - last - 1 !== 3 ? last : undefined;
+    }
+    const whole = decimal === undefined ? text : text.slice(0, decimal);
+    const fraction = decimal === undefined ? undefined : text.slice(decimal + 1);
+    const groups = whole.split(/[.,]/);
+    if (groups.slice(1).some((group) => group.length !== 3))
+        return undefined;
+    const latin = groups.join('') + (fraction === undefined ? '' : `.${fraction}`);
+    if (!/^\d+(\.\d+)?$/.test(latin))
+        return undefined;
+    const amount = Number(latin);
+    return Number.isFinite(amount) ? amount : undefined;
+}
+function priceWord(amount) {
+    return String(Math.round(amount * 100) / 100);
+}
+/**
+ * A price range the shopper gave, as Shopify's price filter, the one filter
+ * whose input the app writes, since Shopify offers a range's bounds and no
+ * value to pick: the bounds they typed, low first. Its chip names the filter
+ * and both ends, a missing end being Shopify's own bound. No bound typed is no
+ * filter.
+ */
+export function activePriceFilter(row, low, high) {
+    if (low === undefined && high === undefined)
+        return undefined;
+    const [min, max] = low !== undefined && high !== undefined && low > high ? [high, low] : [low, high];
+    const price = { ...(min === undefined ? {} : { min }), ...(max === undefined ? {} : { max }) };
+    return {
+        filterId: row.filterId,
+        valueId: PRICE_RANGE_VALUE,
+        input: JSON.stringify({ price }),
+        label: `${row.label}: ${priceWord(min ?? row.min)} – ${priceWord(max ?? row.max)}`,
+    };
+}
+/** The bounds of a price range the shopper gave, read back off its filter, to stand in the sheet's fields again. */
+export function priceBoundsOf(active) {
+    try {
+        const price = JSON.parse(active.input).price;
+        return {
+            ...(typeof price?.min === 'number' ? { min: price.min } : {}),
+            ...(typeof price?.max === 'number' ? { max: price.max } : {}),
+        };
+    }
+    catch {
+        return {};
+    }
+}
+/**
+ * The words of the filters: the merchant's for the button, the sheet's title,
+ * its two buttons and "clear all" where they wrote some the buyer reads, and
+ * the catalog's `listing.filter*` otherwise.
+ */
+export function listingFilterWords(settings, language, defaultLanguage) {
+    const words = platformWords(language, defaultLanguage);
+    return {
+        button: words.merchantOr(settings.filterButton, 'listing.filter'),
+        title: words.merchantOr(settings.filterTitle, 'listing.filter_title'),
+        apply: words.merchantOr(settings.filterApply, 'listing.filter_apply'),
+        clear: words.merchantOr(settings.filterClear, 'listing.filter_clear'),
+        clearAll: words.merchantOr(settings.filterClearAll, 'listing.filter_clear_all'),
+        remove: words.own('listing.filter_remove'),
+        none: words.own('listing.filter_none'),
+        min: words.own('listing.filter_min'),
+        max: words.own('listing.filter_max'),
+        on: (count) => words.own('listing.filter_on').replace('{count}', String(count)),
+    };
+}
+//# sourceMappingURL=listing-filters.js.map

package/dist/listing-filters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listing-filters.js","sourceRoot":"","sources":["../src/listing-filters.ts"],"names":[],"mappings":"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"}

package/dist/listing-toolbar.d.ts

@@ -0,0 +1,117 @@
+import { type ListingSortKey, type ListingToolbarBlock, type LocaleCode, type ThemeStyle } from '@shoplix-ai/sdui-schema';
+type ListingToolbarSettings = ListingToolbarBlock['props'];
+/** The parts of the listing toolbar, each with the theme role it draws unless a component token names another. */
+declare const LISTING_TOOLBAR_ROLES: {
+    readonly count: "text";
+    readonly count_word: "muted";
+    readonly bar: "elevated";
+    readonly bar_stroke: "border";
+    readonly bar_ink: "text";
+    readonly track: "sunken";
+    readonly cell: "elevated";
+    readonly cell_ink: "text";
+    readonly cell_idle: "subtle";
+    readonly divider: "border";
+    readonly badge: "accent";
+    readonly chip: "sunken";
+    readonly chip_stroke: "border";
+    readonly chip_ink: "text";
+    readonly chip_remove: "subtle";
+    readonly clear_all: "accent";
+};
+export type ListingToolbarPart = keyof typeof LISTING_TOOLBAR_ROLES;
+/** The toolbar's colours, and the ink that reads on the badge and on a chip's remove button. */
+export type ListingToolbarColors = Readonly<Record<ListingToolbarPart | 'badge_ink' | 'chip_remove_ink', string>>;
+/**
+ * Every colour the listing toolbar draws: the count and its word, the bar
+ * that opens the sorts and the filters with its stroke, its words and the line
+ * between its halves, the badge that counts the filters on, the switch's track
+ * with the cell of the layout on show and the idle one, and the chips under the
+ * bar with their stroke, words and remove button, and "clear all". A role the
+ * merchant chose for the bar, its stroke, its words, the track, the badge or
+ * the chips wins; every other part is its role with `listing_toolbar.<part>`
+ * over it, and the badge and the remove button write in whichever ink reads on
+ * them. The phone and its web twin read this one table.
+ */
+export declare function listingToolbarColors(theme: ThemeStyle, settings?: Pick<ListingToolbarSettings, 'surface' | 'stroke' | 'ink' | 'track' | 'badge' | 'chipSurface' | 'chipStroke' | 'chipInk'>): ListingToolbarColors;
+/** Every measure of the toolbar, and which of its parts it draws. */
+export interface ListingToolbarLook {
+    readonly count: boolean;
+    readonly layoutSwitch: boolean;
+    readonly sort: boolean;
+    readonly filter: boolean;
+    readonly chips: boolean;
+    readonly height: number;
+    readonly radius: number;
+    readonly countSize: number;
+    readonly wordSize: number;
+    readonly labelSize: number;
+    readonly iconSize: number;
+    readonly switchCell: {
+        readonly width: number;
+        readonly height: number;
+        readonly radius: number;
+    };
+    readonly switchPad: number;
+    readonly badge: {
+        readonly size: number;
+        readonly text: number;
+    };
+    readonly chip: {
+        readonly height: number;
+        readonly radius: number;
+        readonly text: number;
+        readonly remove: number;
+        readonly gap: number;
+    };
+}
+/**
+ * The toolbar as the mot design measures it: the count at 15 over a word at
+ * 13, the switch's two 34 by 30 cells on a track padded by 3, the bar at the
+ * merchant's height and corner with its words at 12.5 beside a 16 point
+ * glyph, the badge an 18 point circle with its number at 10.5, and each chip
+ * 32 tall at the merchant's corner with its words at 12.5 and an 18 point
+ * remove button, 8 apart. The merchant switches each part off and sets the bar.
+ */
+export declare function listingToolbarLook(settings: ListingToolbarSettings): ListingToolbarLook;
+/** How many products a listing holds so far: the number, with a plus while more pages exist, and the word after it. */
+export interface ListingCount {
+    readonly number: string;
+    readonly word: string;
+}
+/**
+ * The count a listing shows: the products it has loaded, "24+" while Shopify
+ * names a next page, and the full number once the last page is in. The
+ * Storefront gives a collection no total, so the app never claims one.
+ */
+export declare function listingCount(count: number, more: boolean, language: LocaleCode, defaultLanguage: LocaleCode): ListingCount;
+/** One sort the sheet offers, in the words the shopper reads. */
+export interface ListingSortRow {
+    readonly key: ListingSortKey;
+    readonly label: string;
+}
+/**
+ * The words of one sort: the merchant's own where they wrote some in a
+ * language the buyer reads, and the catalog's otherwise, so a sort the
+ * Binding opens in that the toolbar does not list is still named.
+ */
+export declare function listingSortLabel(settings: ListingToolbarSettings, key: ListingSortKey, language: LocaleCode, defaultLanguage: LocaleCode): string;
+/** The sorts the sheet offers, in the merchant's order and words. */
+export declare function listingSortRows(settings: ListingToolbarSettings, language: LocaleCode, defaultLanguage: LocaleCode): readonly ListingSortRow[];
+/**
+ * The row a product takes in a list, as mot-mobile draws it: the picture
+ * square at 104 beside the title in two lines and the price, and the add
+ * button, a 40 point square on the theme's corner, at the reading end, inside
+ * a card padded by 10 with 12 between its parts.
+ */
+export declare const PRODUCT_ROW_LOOK: {
+    readonly picture: 104;
+    readonly padding: 10;
+    readonly gap: 12;
+    readonly button: 40;
+    readonly titleSize: 13.5;
+    readonly titleLines: 2;
+    readonly priceSize: 17;
+};
+export {};
+//# sourceMappingURL=listing-toolbar.d.ts.map

package/dist/listing-toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"listing-toolbar.d.ts","sourceRoot":"","sources":["../src/listing-toolbar.ts"],"names":[],"mappings":"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"}

package/dist/listing-toolbar.js

@@ -0,0 +1,130 @@
+import { LISTING_TOOLBAR_DEFAULTS, listingSortsOf, } from '@shoplix-ai/sdui-schema';
+import { readable } from './locale.js';
+import { partColors } from './part-colors.js';
+import { readableInk } from './readable.js';
+import { countedWord, platformWords } from './words.js';
+/** The parts of the listing toolbar, each with the theme role it draws unless a component token names another. */
+const LISTING_TOOLBAR_ROLES = {
+    count: 'text',
+    count_word: 'muted',
+    bar: 'elevated',
+    bar_stroke: 'border',
+    bar_ink: 'text',
+    track: 'sunken',
+    cell: 'elevated',
+    cell_ink: 'text',
+    cell_idle: 'subtle',
+    divider: 'border',
+    badge: 'accent',
+    chip: 'sunken',
+    chip_stroke: 'border',
+    chip_ink: 'text',
+    chip_remove: 'subtle',
+    clear_all: 'accent',
+};
+/**
+ * Every colour the listing toolbar draws: the count and its word, the bar
+ * that opens the sorts and the filters with its stroke, its words and the line
+ * between its halves, the badge that counts the filters on, the switch's track
+ * with the cell of the layout on show and the idle one, and the chips under the
+ * bar with their stroke, words and remove button, and "clear all". A role the
+ * merchant chose for the bar, its stroke, its words, the track, the badge or
+ * the chips wins; every other part is its role with `listing_toolbar.<part>`
+ * over it, and the badge and the remove button write in whichever ink reads on
+ * them. The phone and its web twin read this one table.
+ */
+export function listingToolbarColors(theme, settings = {}) {
+    const table = partColors(theme, 'listing_toolbar', LISTING_TOOLBAR_ROLES);
+    const chosen = (role, fallback) => role === undefined ? fallback : theme.colors[role];
+    const badge = chosen(settings.badge, table.badge);
+    return {
+        ...table,
+        bar: chosen(settings.surface, table.bar),
+        bar_stroke: chosen(settings.stroke, table.bar_stroke),
+        bar_ink: chosen(settings.ink, table.bar_ink),
+        track: chosen(settings.track, table.track),
+        badge,
+        badge_ink: readableInk(badge),
+        chip: chosen(settings.chipSurface, table.chip),
+        chip_stroke: chosen(settings.chipStroke, table.chip_stroke),
+        chip_ink: chosen(settings.chipInk, table.chip_ink),
+        chip_remove_ink: readableInk(table.chip_remove),
+    };
+}
+/**
+ * The toolbar as the mot design measures it: the count at 15 over a word at
+ * 13, the switch's two 34 by 30 cells on a track padded by 3, the bar at the
+ * merchant's height and corner with its words at 12.5 beside a 16 point
+ * glyph, the badge an 18 point circle with its number at 10.5, and each chip
+ * 32 tall at the merchant's corner with its words at 12.5 and an 18 point
+ * remove button, 8 apart. The merchant switches each part off and sets the bar.
+ */
+export function listingToolbarLook(settings) {
+    return {
+        count: settings.count ?? LISTING_TOOLBAR_DEFAULTS.count,
+        layoutSwitch: settings.layoutSwitch ?? LISTING_TOOLBAR_DEFAULTS.layoutSwitch,
+        sort: settings.sort ?? LISTING_TOOLBAR_DEFAULTS.sort,
+        filter: settings.filter ?? LISTING_TOOLBAR_DEFAULTS.filter,
+        chips: settings.chips ?? LISTING_TOOLBAR_DEFAULTS.chips,
+        height: settings.height ?? LISTING_TOOLBAR_DEFAULTS.height,
+        radius: settings.radius ?? LISTING_TOOLBAR_DEFAULTS.radius,
+        countSize: 15,
+        wordSize: 13,
+        labelSize: 12.5,
+        iconSize: 16,
+        switchCell: { width: 34, height: 30, radius: 6 },
+        switchPad: 3,
+        badge: { size: 18, text: 10.5 },
+        chip: {
+            height: 32,
+            radius: settings.chipRadius ?? LISTING_TOOLBAR_DEFAULTS.chipRadius,
+            text: 12.5,
+            remove: 18,
+            gap: 8,
+        },
+    };
+}
+/**
+ * The count a listing shows: the products it has loaded, "24+" while Shopify
+ * names a next page, and the full number once the last page is in. The
+ * Storefront gives a collection no total, so the app never claims one.
+ */
+export function listingCount(count, more, language, defaultLanguage) {
+    return {
+        number: more ? `${count}+` : String(count),
+        word: countedWord('listing.products', count, language, defaultLanguage),
+    };
+}
+/**
+ * The words of one sort: the merchant's own where they wrote some in a
+ * language the buyer reads, and the catalog's otherwise, so a sort the
+ * Binding opens in that the toolbar does not list is still named.
+ */
+export function listingSortLabel(settings, key, language, defaultLanguage) {
+    const own = listingSortsOf(settings).find((choice) => choice.key === key)?.label;
+    const written = own === undefined ? undefined : readable(own, language, defaultLanguage);
+    return written ?? platformWords(language, defaultLanguage).own(`listing.sort.${key}`);
+}
+/** The sorts the sheet offers, in the merchant's order and words. */
+export function listingSortRows(settings, language, defaultLanguage) {
+    return listingSortsOf(settings).map(({ key }) => ({
+        key,
+        label: listingSortLabel(settings, key, language, defaultLanguage),
+    }));
+}
+/**
+ * The row a product takes in a list, as mot-mobile draws it: the picture
+ * square at 104 beside the title in two lines and the price, and the add
+ * button, a 40 point square on the theme's corner, at the reading end, inside
+ * a card padded by 10 with 12 between its parts.
+ */
+export const PRODUCT_ROW_LOOK = {
+    picture: 104,
+    padding: 10,
+    gap: 12,
+    button: 40,
+    titleSize: 13.5,
+    titleLines: 2,
+    priceSize: 17,
+};
+//# sourceMappingURL=listing-toolbar.js.map

package/dist/listing-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listing-toolbar.js","sourceRoot":"","sources":["../src/listing-toolbar.ts"],"names":[],"mappings":"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"}

package/dist/money.d.ts

@@ -32,6 +32,13 @@ export declare function moneyText(money: DisplayMoney, language: string, style?:
  * where the saving does not round to a percent worth drawing.
  */
 export declare function discountPercent(price: DisplayMoney, compareAt: DisplayMoney | undefined): number | null;
+/**
+ * The struck price a product draws beside its own: the compare-at in the style
+ * the theme chose, where Shopify sent one in the same currency above the price,
+ * and none otherwise. A compare-at that carries no amount is drawn as Shopify
+ * wrote it.
+ */
+export declare function compareAtParts(price: DisplayMoney, compareAt: DisplayMoney | undefined, language: string, style?: MoneyStyle): MoneyParts | null;
 /**
  * A figure a block worked out for itself, written the way every other price on
  * the screen is written: through the same style, from a decimal amount, never

package/dist/money.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"money.d.ts","sourceRoot":"","sources":["../src/money.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,YAAY,EAEjB,KAAK,UAAU,EAChB,MAAM,yBAAyB,CAAC;AAajC;;;GAGG;AACH,wBAAgB,WAAW,CACzB,MAAM,EAAE,MAAM,GAAG,MAAM,EACvB,YAAY,EAAE,MAAM,EACpB,QAAQ,EAAE,MAAM,GACf,MAAM,GAAG,IAAI,CAYf;AAoDD,qFAAqF;AACrF,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED,8EAA8E;AAC9E,wBAAgB,WAAW,CAAC,KAAK,EAAE,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,IAAI,CAI1E;AAyCD;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CACxB,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,MAAM,EAChB,KAAK,GAAE,UAAgC,GACtC,UAAU,CAQZ;AAED,2DAA2D;AAC3D,wBAAgB,SAAS,CACvB,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,MAAM,EAChB,KAAK,GAAE,UAAgC,GACtC,MAAM,CAGR;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,YAAY,EACnB,SAAS,EAAE,YAAY,GAAG,SAAS,GAClC,MAAM,GAAG,IAAI,CAOf;AAKD;;;;GAIG;AACH,wBAAgB,YAAY,CAC1B,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,MAAM,EACpB,QAAQ,EAAE,MAAM,EAChB,KAAK,GAAE,UAAgC,GACtC,UAAU,CAWZ;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAC1B,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,MAAM,EACpB,QAAQ,EAAE,MAAM,EAChB,KAAK,GAAE,UAAgC,GACtC,UAAU,CAGZ"}
+{"version":3,"file":"money.d.ts","sourceRoot":"","sources":["../src/money.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,YAAY,EAEjB,KAAK,UAAU,EAChB,MAAM,yBAAyB,CAAC;AAajC;;;GAGG;AACH,wBAAgB,WAAW,CACzB,MAAM,EAAE,MAAM,GAAG,MAAM,EACvB,YAAY,EAAE,MAAM,EACpB,QAAQ,EAAE,MAAM,GACf,MAAM,GAAG,IAAI,CAYf;AAoDD,qFAAqF;AACrF,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED,8EAA8E;AAC9E,wBAAgB,WAAW,CAAC,KAAK,EAAE,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,IAAI,CAI1E;AAyCD;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CACxB,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,MAAM,EAChB,KAAK,GAAE,UAAgC,GACtC,UAAU,CAQZ;AAED,2DAA2D;AAC3D,wBAAgB,SAAS,CACvB,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,MAAM,EAChB,KAAK,GAAE,UAAgC,GACtC,MAAM,CAGR;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,YAAY,EACnB,SAAS,EAAE,YAAY,GAAG,SAAS,GAClC,MAAM,GAAG,IAAI,CAOf;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,YAAY,EACnB,SAAS,EAAE,YAAY,GAAG,SAAS,EACnC,QAAQ,EAAE,MAAM,EAChB,KAAK,GAAE,UAAgC,GACtC,UAAU,GAAG,IAAI,CAMnB;AAKD;;;;GAIG;AACH,wBAAgB,YAAY,CAC1B,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,MAAM,EACpB,QAAQ,EAAE,MAAM,EAChB,KAAK,GAAE,UAAgC,GACtC,UAAU,CAWZ;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAC1B,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,MAAM,EACpB,QAAQ,EAAE,MAAM,EAChB,KAAK,GAAE,UAAgC,GACtC,UAAU,CAGZ"}

package/dist/money.js

@@ -154,6 +154,21 @@ export function discountPercent(price, compareAt) {
     const percent = Math.round((1 - now / was) * 100);
     return percent === 0 ? null : percent;
 }
+/**
+ * The struck price a product draws beside its own: the compare-at in the style
+ * the theme chose, where Shopify sent one in the same currency above the price,
+ * and none otherwise. A compare-at that carries no amount is drawn as Shopify
+ * wrote it.
+ */
+export function compareAtParts(price, compareAt, language, style = DEFAULT_MONEY_STYLE) {
+    if (compareAt === undefined || compareAt.currencyCode !== price.currencyCode)
+        return null;
+    const now = moneyAmount(price);
+    const was = moneyAmount(compareAt);
+    if (now !== null && was !== null && was <= now)
+        return null;
+    return moneyParts(compareAt, language, style);
+}
 /** Past every currency's own places, so the style rounds the derived amount rather than this line. */
 const DERIVED_PLACES = 6;
 /**