@shoplix-ai/block-kit 3.4.0 → 3.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -3
- package/dist/hero-banner.d.ts +27 -0
- package/dist/hero-banner.d.ts.map +1 -0
- package/dist/hero-banner.js +33 -0
- package/dist/hero-banner.js.map +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/version.d.ts +1 -1
- package/dist/version.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -55,9 +55,10 @@ written against this package and nothing else from the runtime. It holds:
|
|
|
55
55
|
`imageSourceFor` (the rendition to paint at a given display width),
|
|
56
56
|
`platformWords`, the word catalog below, `moneyParts`, `moneyText`,
|
|
57
57
|
`moneyAmount` and `discountPercent`, the money presentation below, and
|
|
58
|
-
`productCardColors`,
|
|
59
|
-
|
|
60
|
-
|
|
58
|
+
`productCardColors`, `collectionTileColors` and `heroBannerColors` beside
|
|
59
|
+
`heroBannerRadius`, the colour tables the promoted blocks read on the phone
|
|
60
|
+
and on the web alike: a theme role per part of the block, with a component
|
|
61
|
+
token at `<block>.<part>` over it.
|
|
61
62
|
|
|
62
63
|
## The theme a renderer receives
|
|
63
64
|
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { type ThemeStyle } from '@shoplix-ai/sdui-schema';
|
|
2
|
+
/** The parts of the hero banner, each with the theme role it draws unless a component token names another. */
|
|
3
|
+
declare const HERO_BANNER_ROLES: {
|
|
4
|
+
readonly artwork: "sunken";
|
|
5
|
+
readonly scrim: "overlay";
|
|
6
|
+
readonly title: "text";
|
|
7
|
+
readonly subtitle: "subtle";
|
|
8
|
+
readonly page: "action";
|
|
9
|
+
readonly page_idle: "border";
|
|
10
|
+
};
|
|
11
|
+
export type HeroBannerPart = keyof typeof HERO_BANNER_ROLES;
|
|
12
|
+
export type HeroBannerColors = Readonly<Record<HeroBannerPart, string>>;
|
|
13
|
+
/**
|
|
14
|
+
* Every colour the hero banner draws, one per part: the theme role behind it,
|
|
15
|
+
* with a per component token at `hero_banner.<part>` as the escape hatch over
|
|
16
|
+
* it. The phone's hero and its web twin read this one table, so a slide and
|
|
17
|
+
* its page indicator cannot disagree on what a merchant's theme means.
|
|
18
|
+
*/
|
|
19
|
+
export declare function heroBannerColors(theme: ThemeStyle): HeroBannerColors;
|
|
20
|
+
/**
|
|
21
|
+
* The corner a slide is cut with: the merchant's own, with
|
|
22
|
+
* `hero_banner.radius` as the escape hatch for a design whose hero is softer
|
|
23
|
+
* than its cards.
|
|
24
|
+
*/
|
|
25
|
+
export declare function heroBannerRadius(theme: ThemeStyle): number;
|
|
26
|
+
export {};
|
|
27
|
+
//# sourceMappingURL=hero-banner.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"hero-banner.d.ts","sourceRoot":"","sources":["../src/hero-banner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE/E,8GAA8G;AAC9G,QAAA,MAAM,iBAAiB;;;;;;;CAOwC,CAAC;AAEhE,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAE5D,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC,CAAC;AAExE;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,UAAU,GAAG,gBAAgB,CAOpE;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAE1D"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { componentTokenValue } from '@shoplix-ai/sdui-schema';
|
|
2
|
+
/** The parts of the hero banner, each with the theme role it draws unless a component token names another. */
|
|
3
|
+
const HERO_BANNER_ROLES = {
|
|
4
|
+
artwork: 'sunken',
|
|
5
|
+
scrim: 'overlay',
|
|
6
|
+
title: 'text',
|
|
7
|
+
subtitle: 'subtle',
|
|
8
|
+
page: 'action',
|
|
9
|
+
page_idle: 'border',
|
|
10
|
+
};
|
|
11
|
+
/**
|
|
12
|
+
* Every colour the hero banner draws, one per part: the theme role behind it,
|
|
13
|
+
* with a per component token at `hero_banner.<part>` as the escape hatch over
|
|
14
|
+
* it. The phone's hero and its web twin read this one table, so a slide and
|
|
15
|
+
* its page indicator cannot disagree on what a merchant's theme means.
|
|
16
|
+
*/
|
|
17
|
+
export function heroBannerColors(theme) {
|
|
18
|
+
const colors = {};
|
|
19
|
+
for (const part of Object.keys(HERO_BANNER_ROLES)) {
|
|
20
|
+
const role = theme.colors[HERO_BANNER_ROLES[part]];
|
|
21
|
+
colors[part] = componentTokenValue(theme, `hero_banner.${part}`, role);
|
|
22
|
+
}
|
|
23
|
+
return colors;
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* The corner a slide is cut with: the merchant's own, with
|
|
27
|
+
* `hero_banner.radius` as the escape hatch for a design whose hero is softer
|
|
28
|
+
* than its cards.
|
|
29
|
+
*/
|
|
30
|
+
export function heroBannerRadius(theme) {
|
|
31
|
+
return componentTokenValue(theme, 'hero_banner.radius', theme.radius);
|
|
32
|
+
}
|
|
33
|
+
//# sourceMappingURL=hero-banner.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"hero-banner.js","sourceRoot":"","sources":["../src/hero-banner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAmB,MAAM,yBAAyB,CAAC;AAE/E,8GAA8G;AAC9G,MAAM,iBAAiB,GAAG;IACxB,OAAO,EAAE,QAAQ;IACjB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,QAAQ;IACd,SAAS,EAAE,QAAQ;CAC0C,CAAC;AAMhE;;;;;GAKG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAAiB;IAChD,MAAM,MAAM,GAAG,EAAoC,CAAC;IACpD,KAAK,MAAM,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,iBAAiB,CAAqB,EAAE,CAAC;QACtE,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC;QACnD,MAAM,CAAC,IAAI,CAAC,GAAG,mBAAmB,CAAC,KAAK,EAAE,eAAe,IAAI,EAAE,EAAE,IAAI,CAAC,CAAC;IACzE,CAAC;IACD,OAAO,MAAM,CAAC;AAChB,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAAiB;IAChD,OAAO,mBAAmB,CAAC,KAAK,EAAE,oBAAoB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;AACxE,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -15,6 +15,8 @@ export { productCardColors } from './product-card.js';
|
|
|
15
15
|
export type { ProductCardColors, ProductCardPart } from './product-card.js';
|
|
16
16
|
export { collectionTileColors } from './collection-tile.js';
|
|
17
17
|
export type { CollectionTileColors, CollectionTilePart } from './collection-tile.js';
|
|
18
|
+
export { heroBannerColors, heroBannerRadius } from './hero-banner.js';
|
|
19
|
+
export type { HeroBannerColors, HeroBannerPart } from './hero-banner.js';
|
|
18
20
|
export { discountPercent, formatMoney, moneyAmount, moneyParts, moneyText } from './money.js';
|
|
19
21
|
export type { MoneyParts } from './money.js';
|
|
20
22
|
export { imageSourceFor } from './renditions.js';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7F,YAAY,EACV,YAAY,EACZ,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,uBAAuB,EACvB,aAAa,EACb,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EACV,eAAe,EACf,oBAAoB,EACpB,UAAU,EACV,iBAAiB,EACjB,gBAAgB,EAChB,aAAa,EACb,SAAS,EACT,aAAa,EACb,WAAW,EACX,aAAa,GACd,MAAM,eAAe,CAAC;AAEvB,YAAY,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AACpD,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAC/D,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEhF,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC9D,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElE,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAEhE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,YAAY,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5D,YAAY,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrF,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC9F,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAClE,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AACzE,YAAY,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7F,YAAY,EACV,YAAY,EACZ,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,uBAAuB,EACvB,aAAa,EACb,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EACV,eAAe,EACf,oBAAoB,EACpB,UAAU,EACV,iBAAiB,EACjB,gBAAgB,EAChB,aAAa,EACb,SAAS,EACT,aAAa,EACb,WAAW,EACX,aAAa,GACd,MAAM,eAAe,CAAC;AAEvB,YAAY,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AACpD,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAC/D,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEhF,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC9D,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElE,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAEhE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,YAAY,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5D,YAAY,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrF,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACtE,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACzE,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC9F,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAClE,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AACzE,YAAY,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -7,6 +7,7 @@ export { CONTRACT_MAJOR, CONTRACT_VERSION } from './version.js';
|
|
|
7
7
|
export { resolveToken } from './tokens.js';
|
|
8
8
|
export { productCardColors } from './product-card.js';
|
|
9
9
|
export { collectionTileColors } from './collection-tile.js';
|
|
10
|
+
export { heroBannerColors, heroBannerRadius } from './hero-banner.js';
|
|
10
11
|
export { discountPercent, formatMoney, moneyAmount, moneyParts, moneyText } from './money.js';
|
|
11
12
|
export { imageSourceFor } from './renditions.js';
|
|
12
13
|
export { localize, pickLocale, textDirection } from './locale.js';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAY7F,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAgB5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAGpD,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAG/D,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAG9D,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAEhE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAE5D,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAE9F,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAElE,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAY7F,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAgB5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAGpD,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAG/D,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAG9D,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAEhE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAE5D,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEtE,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAE9F,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAElE,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}
|
package/dist/version.d.ts
CHANGED
|
@@ -4,6 +4,6 @@
|
|
|
4
4
|
* The major is the compatibility line: a Shop package built against another
|
|
5
5
|
* major never meets this runtime, and a major bump is an announced event.
|
|
6
6
|
*/
|
|
7
|
-
export declare const CONTRACT_VERSION = "3.
|
|
7
|
+
export declare const CONTRACT_VERSION = "3.5.0";
|
|
8
8
|
export declare const CONTRACT_MAJOR = 3;
|
|
9
9
|
//# sourceMappingURL=version.d.ts.map
|
package/dist/version.js
CHANGED
|
@@ -4,6 +4,6 @@
|
|
|
4
4
|
* The major is the compatibility line: a Shop package built against another
|
|
5
5
|
* major never meets this runtime, and a major bump is an announced event.
|
|
6
6
|
*/
|
|
7
|
-
export const CONTRACT_VERSION = '3.
|
|
7
|
+
export const CONTRACT_VERSION = '3.5.0';
|
|
8
8
|
export const CONTRACT_MAJOR = 3;
|
|
9
9
|
//# sourceMappingURL=version.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@shoplix-ai/block-kit",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.5.0",
|
|
4
4
|
"description": "The renderer contract every Block Type renderer is written against: what a renderer receives, how a Block Type is registered with its owner, the closed capability set, and the small helpers renderers share. Contract only, no renderers.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|