@vectoriox/iox-ui 5.40.0 → 5.41.1

package/src/generation-core/compose-site.ts

@@ -1,11 +1,11 @@
-import { DesignChoices, LinkType, resolveDesignChoices } from '@vectoriox/iox-ui/design-core';
+import { COLOR_SCHEMES, DesignChoices, LinkType, resolveDesignChoices, setColorScheme } from '@vectoriox/iox-ui/design-core';
 import { FormPresetDef, FormPresetField, formPresetById } from '@vectoriox/iox-ui/forms-core';
 import {
     ACCORDION_BIND_PROP, ACCORDION_CONTENT_LIMIT, ACCORDION_WORDS, accordionAnswerOf, accordionItems, accordionQuestionOf, AccordionRole,
     buildAccordionRecipe, buildCardRecipe, buildCarouselRecipe, buildLightboxRecipe, CardLayout, CardPart, CardRole, CARD_LAYOUTS, CARD_PARTS, CompositeNode,
     CompositeNodeSpec, findByRole, LIGHTBOX_LABEL, pickAccordionAutoBinds, pickTabsAutoBinds, SLIDE_TO_ROW, SLIDE_TYPE, buildTabsRecipe, tabLabelNodeOf,
     tabPanelImageOf, tabPanelTextOf, tabsListOf, tabsPanels, tabsPanelsOf, tabsTriggers, TABS_CONTENT_LIMIT, TABS_IMAGE_BIND_PROP, TABS_LABEL_BIND_PROP,
-    TABS_TEXT_BIND_PROP, TABS_WORDS,
+    TABS_TEXT_BIND_PROP, TABS_WORDS, BadgeTone, BADGE_TONES, buildSegmentedRecipe, CardWords, ITEM_OPEN_STATE, segmentedOptions,
 } from '@vectoriox/iox-ui/composite-core';
 
 import { NODE_BASELINES } from './node-baselines.generated';
@@ -41,6 +41,18 @@ export enum PlaceholderKind {
     Image = 'image',
     /** CC3: a video slot with no clip — the studio uploads its own (the poster blank meanwhile). */
     Video = 'video',
+    /** CC4b (Q37): a price — a FACT the customer could be held to. Free text the studio types ("₪ 1,200", "From $40",
+     *  "On request"); its label shows meanwhile ("Monthly price"), never a number. No currency model. */
+    Price = 'price',
+}
+
+/** The placeholders a page cannot be published with unfilled (W4's gate): a fact, a price, the studio's own video.
+ *  Copy and an empty image are the author's to rewrite, never blocking. */
+export const PUBLISH_BLOCKING_PLACEHOLDERS: ReadonlySet<PlaceholderKind> = new Set([PlaceholderKind.Fact, PlaceholderKind.Price, PlaceholderKind.Video]);
+
+/** True when a placeholder of `kind` blocks publishing until the studio fills it. */
+export function blocksPublish(kind: PlaceholderKind): boolean {
+    return PUBLISH_BLOCKING_PLACEHOLDERS.has(kind);
 }
 
 export interface ComposedPlaceholder {
@@ -241,6 +253,18 @@ interface Ctx {
     routes: ReadonlySet<string>;
     /** CC3: nodes whose click opens the pattern's lightbox (`opens`), wired once the pattern is stamped. */
     openers?: string[];
+    /** CC4b: nodes shown while an option is on (`shownWhen`), wired once the pattern is stamped. */
+    shownWhen?: ShownWhen[];
+    /** A section inserted from the palette (`composeSection`): a button to a page the studio lacks keeps its words,
+     *  unlinked — the author links it — instead of being removed. */
+    keepButtons?: boolean;
+}
+
+interface ShownWhen {
+    id: string;
+    key: string;
+    /** The display the node shows with (its own layout's, else flex). */
+    display: string;
 }
 
 function nonEmpty(v: unknown): v is string {
@@ -273,6 +297,7 @@ function chooseText(pn: PatternNode, ctx: Ctx): TextChoice {
     }
     const own = pn.text === undefined ? undefined : fillVariables(pn.text, ctx);
     if (pn.ph === PatternPlaceholder.Copy) return { value: own, placeholder: { kind: PlaceholderKind.Copy } };
+    if (pn.ph === PatternPlaceholder.Price) return { value: own, placeholder: { kind: PlaceholderKind.Price } };
     return { value: own };
 }
 
@@ -364,7 +389,7 @@ enum DanglingFate {
 function danglingFate(pn: PatternNode, ctx: Ctx): DanglingFate | null {
     if (!pn.href || pn.href === PatternDirective.PageRoute || ctx.routes.has(pn.href)) return null;
     if (ctx.email) return DanglingFate.Email;
-    return UNLINKED_TYPE[pn.t] ? DanglingFate.Unlink : DanglingFate.Remove;
+    return UNLINKED_TYPE[pn.t] || (ctx.keepButtons && pn.t === BUTTON_BLOCK) ? DanglingFate.Unlink : DanglingFate.Remove;
 }
 
 const DANGLING_ISSUE: Readonly<Record<DanglingFate, ComposeIssueCode>> = {
@@ -378,7 +403,9 @@ function reportDangling(fate: DanglingFate, pn: PatternNode, id: string, words:
     const outcome = {
         [DanglingFate.Email]: `it now opens an email to ${ctx.email}`,
         [DanglingFate.Remove]: 'with no email address to send to instead, it was removed',
-        [DanglingFate.Unlink]: 'with no email address to send to instead, the box keeps its contents without the link',
+        [DanglingFate.Unlink]: pn.t === BUTTON_BLOCK
+            ? 'with no email address to send to instead, the button keeps its words without the link'
+            : 'with no email address to send to instead, the box keeps its contents without the link',
     }[fate];
     ctx.issues.push({
         code: DANGLING_ISSUE[fate], nodeId: id, owner: ctx.owner, route: pn.href,
@@ -459,7 +486,7 @@ function composeNode(pn: PatternNode, id: string, repeater: RepeaterScope | null
         reportDangling(fate, pn, id, words.value, ctx);
         return null;
     }
-    const type = fate === DanglingFate.Unlink ? UNLINKED_TYPE[pn.t] : pn.t;
+    const type = fate === DanglingFate.Unlink ? UNLINKED_TYPE[pn.t] ?? pn.t : pn.t;
 
     const props: Record<string, unknown> = {};
     if (pn.level) props['level'] = pn.level;
@@ -501,6 +528,11 @@ function composeNode(pn: PatternNode, id: string, repeater: RepeaterScope | null
         ctx.placeholders.push({ nodeId: id, owner: ctx.owner, kind: PlaceholderKind.Video, text: '' });
     }
     if (pn.name) setProp(node, 'ariaLabel', pn.name);
+    if (pn.icon) {
+        if (type !== ICON) throw new ComposeError(`${id}: "icon" belongs on an Icon`);
+        setProp(node, 'iconClass', pn.icon);
+    }
+    if (pn.layer) node.label = pn.layer;
     if (pn.opens) {
         if (pn.opens !== PatternOpens.Lightbox) throw new ComposeError(`${id}: "opens" names the pattern's lightbox`);
         (ctx.openers ??= []).push(id);
@@ -542,11 +574,8 @@ function composeNode(pn: PatternNode, id: string, repeater: RepeaterScope | null
     }
 
     // Layout.
-    if (pn.lay) setStyleProps(node, pn.lay);
-    if (pn.resp) {
-        for (const layer of Object.values(pn.resp)) assertStyleSlots(node.type, Object.keys(layer));
-        node.responsive = Object.fromEntries(Object.entries(pn.resp).map(([bp, styleProps]) => [bp, { styleProps: { ...styleProps } }]));
-    }
+    applyLayout(node, pn);
+    if (pn.shownWhen) hideUntilOn(node, pn, ctx);
 
     // A Repeater's rows.
     let rowScope = repeater;
@@ -573,6 +602,44 @@ function composeNode(pn: PatternNode, id: string, repeater: RepeaterScope | null
     return node;
 }
 
+/** A pattern node's layout: its `lay` styleProps and its per-breakpoint `resp` layers. */
+function applyLayout(node: SerializedNode, pn: PatternNode): void {
+    if (pn.lay) setStyleProps(node, pn.lay);
+    if (pn.resp) {
+        for (const layer of Object.values(pn.resp)) assertStyleSlots(node.type, Object.keys(layer));
+        node.responsive = Object.fromEntries(Object.entries(pn.resp).map(([bp, styleProps]) => [bp, { styleProps: { ...styleProps } }]));
+    }
+}
+
+/** CC4b (`shownWhen`, Q38): hidden at base and shown — with its own layout's display — while the pattern's Segmented
+ *  option of that key is on. Wired once the pattern is stamped (the option's id is known then). */
+function hideUntilOn(node: SerializedNode, pn: PatternNode, ctx: Ctx): void {
+    const display = String(node.styleProps['display'] ?? '') || SHOWN_DISPLAY;
+    setStyleProps(node, { display: HIDDEN_DISPLAY });
+    (ctx.shownWhen ??= []).push({ id: node.id, key: pn.shownWhen!, display });
+}
+
+/** CC4b: every `shownWhen` node of a stamped pattern follows its option — the targeted `trigger-on` ("when Yearly is
+ *  on"), compiled by both renderers to ONE `:has()` rule on the nearest common ancestor. */
+function wireShownWhen(root: SerializedNode, entries: ReadonlyArray<ShownWhen>): void {
+    if (!entries.length) return;
+    const nodes = new Map<string, SerializedNode>();
+    const options = new Map<string, string>();
+    const visit = (n: SerializedNode) => {
+        nodes.set(n.id, n);
+        for (const option of segmentedOptions(n as unknown as CompositeNode)) if (option.itemKey && !options.has(option.itemKey)) options.set(option.itemKey, option.id!);
+        (n.children ?? []).forEach(visit);
+    };
+    visit(root);
+    for (const entry of entries) {
+        const option = options.get(entry.key);
+        if (!option) throw new ComposeError(`${entry.id}: "shownWhen: ${entry.key}" names no option of a segmented in the pattern`);
+        const node = nodes.get(entry.id)!;
+        node.stateStyles = { ...(node.stateStyles ?? {}), [ITEM_OPEN_STATE]: { display: entry.display } };
+        node.stateTriggers = { ...(node.stateTriggers ?? {}), [ITEM_OPEN_STATE]: option };
+    }
+}
+
 /** A Card v2 `binds` key → the part it binds and that part's bound prop. */
 const CARD_BINDS: Readonly<Record<CardBindTarget, { role: CardRole; prop: string }>> = {
     [CardBindTarget.Image]: { role: CardRole.Media, prop: 'src' },
@@ -591,6 +658,7 @@ function composeRecipe(pn: PatternNode, id: string, repeater: RepeaterScope | nu
     if (pn.recipe === PatternRecipe.Tabs) return composeTabs(pn, id, ctx);
     if (pn.recipe === PatternRecipe.Carousel) return composeCarousel(pn, id, ctx);
     if (pn.recipe === PatternRecipe.Lightbox) return composeLightbox(pn, id, repeater, ctx);
+    if (pn.recipe === PatternRecipe.Segmented) return composeSegmented(pn, id);
     if (pn.recipe !== PatternRecipe.Card) throw new ComposeError(`${id}: no recipe "${pn.recipe}" in composite-core`);
     const layout = (pn.layout ?? CardLayout.Top) as CardLayout;
     if (!CARD_LAYOUTS.includes(layout)) throw new ComposeError(`${id}: a card has no layout "${pn.layout}"`);
@@ -599,7 +667,22 @@ function composeRecipe(pn: PatternNode, id: string, repeater: RepeaterScope | nu
     }
     const factory = (spec: CompositeNodeSpec): CompositeNode =>
         create(spec.key === CardRole.Card ? id : `${id}-${spec.key}`, spec.type, { ...(spec.props ?? {}) }, spec.elementStyle ?? null) as CompositeNode;
-    const card = buildCardRecipe(factory, { layout, parts: pn.parts as Partial<Record<CardPart, boolean>> }) as SerializedNode;
+    const tone = pn.badge as BadgeTone | undefined;
+    if (tone && !BADGE_TONES.includes(tone)) throw new ComposeError(`${id}: a badge has no tone "${pn.badge}"`);
+    for (const key of Object.keys(pn.words ?? {})) if (!CARD_WORD_KEYS.includes(key)) throw new ComposeError(`${id}: a card has no words "${key}"`);
+    const card = buildCardRecipe(factory, {
+        layout, parts: pn.parts as Partial<Record<CardPart, boolean>>, words: pn.words as Partial<CardWords> | undefined, badgeTone: tone,
+        ...(pn.icon ? { badgeIcon: pn.icon } : {}),
+    }) as SerializedNode;
+    if (pn.scheme) {
+        if (!COLOR_SCHEMES.some(c => c.id === pn.scheme)) throw new ComposeError(`${id}: no colour scheme "${pn.scheme}"`);
+        setColorScheme(card, pn.scheme);
+    }
+    if (pn.ph === PatternPlaceholder.Copy) copyPlaceholders(card, ctx);
+    if (pn.c?.length) {
+        const content = findByRole(card as CompositeNode, CardRole.Content) as SerializedNode;
+        content.children = [...(content.children ?? []), ...composeChildren(pn, id, repeater, ctx)];
+    }
 
     for (const [key, path] of Object.entries(pn.binds ?? {})) {
         const target = CARD_BINDS[key as CardBindTarget];
@@ -628,6 +711,31 @@ function composeRecipe(pn: PatternNode, id: string, repeater: RepeaterScope | nu
 }
 
 const REPEATER = 'Repeater';
+const ICON = 'Icon';
+const SHOWN_DISPLAY = 'flex';
+const HIDDEN_DISPLAY = 'none';
+/** The words a card recipe's `words` may set (composite-core `CardWords`). */
+const CARD_WORD_KEYS: ReadonlyArray<string> = ['eyebrow', 'title', 'text', 'primary', 'secondary', 'badge'];
+/** A card's words the studio rewrites (`ph: 'copy'`): its eyebrow, title, text and badge. */
+const CARD_COPY_ROLES: ReadonlyArray<string> = [CardRole.Eyebrow, CardRole.Title, CardRole.Text];
+
+/** A card's own words, as COPY placeholders (its badge's words too). */
+function copyPlaceholders(card: SerializedNode, ctx: Ctx): void {
+    for (const role of CARD_COPY_ROLES) {
+        const part = findByRole(card as unknown as CompositeNode, role) as SerializedNode | undefined;
+        if (part) ctx.placeholders.push({ nodeId: part.id, owner: ctx.owner, kind: PlaceholderKind.Copy, text: String(part.props?.['content'] ?? '') });
+    }
+    const badge = findByRole(card as unknown as CompositeNode, CardRole.Badge) as SerializedNode | undefined;
+    const words = badge?.children?.find(c => c.type === TEXT);
+    if (words) ctx.placeholders.push({ nodeId: words.id, owner: ctx.owner, kind: PlaceholderKind.Copy, text: String(words.props?.['content'] ?? '') });
+}
+
+/** CC4b: the Segmented control — composite-core's recipe (Monthly · Yearly), named by the pattern, laid out by it. */
+function composeSegmented(pn: PatternNode, id: string): SerializedNode {
+    const root = buildSegmentedRecipe(recipeFactory(id, 'segmented'), pn.name !== undefined ? { label: pn.name } : {}) as SerializedNode;
+    applyLayout(root, pn);
+    return root;
+}
 
 /**
  * An Accordion (CC2) — the composite-core recipe stamped with this composer's factory. Manual (no section
@@ -784,10 +892,11 @@ function wireOpeners(root: SerializedNode, openers: ReadonlyArray<string>): void
 
 function composePattern(pattern: SitePattern, id: string, ctx: Ctx): SerializedNode {
     if (pattern.node.each) throw new ComposeError(`${id}: a pattern's root cannot be stamped per page`);
-    const own: Ctx = { ...ctx, openers: [] };
+    const own: Ctx = { ...ctx, openers: [], shownWhen: [] };
     const node = composeNode(pattern.node, id, null, own);
     if (!node) throw new ComposeError(`${id}: a pattern's root cannot be optional or a link`);
     wireOpeners(node, own.openers ?? []);
+    wireShownWhen(node, own.shownWhen ?? []);
     node.label = pattern.label;
     return node;
 }
@@ -965,3 +1074,52 @@ export function composeNavHeader(input: NavHeaderInput, options: NavHeaderOption
     const header = shape ? planNavShape([root], shape, { newId: options.newId }, root.id).globals[0] : root;
     return { header, issues };
 }
+
+// ── One pattern on its own (CC4b) ───────────────────────────────────────────────────────────────
+
+/** The pricing section (CC4b, board 10): plans with a Monthly / Yearly switch — the library and the palette, never a
+ *  Studio page (Q35). */
+export const PRICING_PATTERN = 'pricing.tiers';
+
+/** What a section is composed from when there is no Site Plan: the studio's name, its pages (the routes a link may
+ *  reach) and its facts. */
+export interface SectionInput {
+    readonly business?: SiteBusiness;
+    readonly pages?: ReadonlyArray<SitePageRef>;
+}
+
+export interface SectionOptions {
+    /** The section's id; its parts' ids derive from it (`<id>-0-1-…`), so a fresh id gives fresh parts. */
+    readonly id: string;
+}
+
+export interface ComposedSection {
+    section: SerializedNode;
+    placeholders: ComposedPlaceholder[];
+    issues: ComposeIssue[];
+}
+
+/**
+ * ONE library pattern composed on its own — the builder palette's ready-made sections (CC4b: "Pricing", the
+ * `pricing.tiers` pattern). THE SAME pattern and composer as `composeSite`: its words, its placeholders (a price shows
+ * its label, never a number) and the one dangling-link rule — except a button to a page the studio lacks keeps its
+ * words, unlinked, for the author to link. Pure.
+ */
+export function composeSection(patternId: string, input: SectionInput, options: SectionOptions): ComposedSection {
+    if (!nonEmpty(options?.id)) throw new ComposeError('composeSection needs the section id');
+    const pattern = patternById(patternId);
+    if (!pattern) throw new ComposeError(`no pattern "${patternId}" in the library`);
+    if (pattern.global) throw new ComposeError(`"${patternId}" is a header or footer — composeNavHeader / composeSite stamp those`);
+    const business: SiteBusiness = input.business ?? { name: '' } as SiteBusiness;
+    const pages = navPagePlans(input.pages ?? []);
+    const plan = { business, pages, dataSources: [], contentTypes: [] } as unknown as SitePlan;
+    const email = nonEmpty(business.facts?.email) ? business.facts!.email!.trim() : null;
+    const placeholders: ComposedPlaceholder[] = [];
+    const issues: ComposeIssue[] = [];
+    const ctx: Ctx = {
+        owner: options.id, page: null, section: null, plan, year: 0, email, navPage: null, nextAlias: null,
+        placeholders, issues, routes: new Set(pages.map(p => p.route)), keepButtons: true,
+    };
+    const section = composePattern(pattern, options.id, ctx);
+    return { section, placeholders, issues };
+}

package/src/generation-core/node-baselines.generated.ts

@@ -55,6 +55,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign": "start",
       "fontStyle": "normal",
       "textDecoration": "none",
+      "fontVariantNumeric": "normal",
       "WebkitTextStrokeWidth": "0px",
       "WebkitTextStrokeColor": "transparent",
       "margin": "0px 0px 0px 0px",
@@ -144,6 +145,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign",
       "fontStyle",
       "textDecoration",
+      "fontVariantNumeric",
       "_sep_stroke",
       "WebkitTextStrokeWidth",
       "WebkitTextStrokeColor",
@@ -246,6 +248,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign": "start",
       "fontStyle": "normal",
       "textDecoration": "none",
+      "fontVariantNumeric": "normal",
       "WebkitTextStrokeWidth": "0px",
       "WebkitTextStrokeColor": "transparent",
       "margin": "0px 0px 0px 0px",
@@ -340,6 +343,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign",
       "fontStyle",
       "textDecoration",
+      "fontVariantNumeric",
       "_sep_stroke",
       "WebkitTextStrokeWidth",
       "WebkitTextStrokeColor",
@@ -438,6 +442,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign": "start",
       "fontStyle": "normal",
       "textDecoration": "none",
+      "fontVariantNumeric": "normal",
       "WebkitTextStrokeWidth": "0px",
       "WebkitTextStrokeColor": "transparent",
       "margin": "0px 0px 0px 0px",
@@ -527,6 +532,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign",
       "fontStyle",
       "textDecoration",
+      "fontVariantNumeric",
       "_sep_stroke",
       "WebkitTextStrokeWidth",
       "WebkitTextStrokeColor",
@@ -624,6 +630,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign": "start",
       "fontStyle": "normal",
       "textDecoration": "none",
+      "fontVariantNumeric": "normal",
       "WebkitTextStrokeWidth": "0px",
       "WebkitTextStrokeColor": "transparent",
       "margin": "0px 0px 0px 0px",
@@ -717,6 +724,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign",
       "fontStyle",
       "textDecoration",
+      "fontVariantNumeric",
       "_sep_stroke",
       "WebkitTextStrokeWidth",
       "WebkitTextStrokeColor",
@@ -818,6 +826,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign": "start",
       "fontStyle": "normal",
       "textDecoration": "none",
+      "fontVariantNumeric": "normal",
       "WebkitTextStrokeWidth": "0px",
       "WebkitTextStrokeColor": "transparent",
       "maxLines": "none",
@@ -911,6 +920,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign",
       "fontStyle",
       "textDecoration",
+      "fontVariantNumeric",
       "_sep_stroke",
       "WebkitTextStrokeWidth",
       "WebkitTextStrokeColor",
@@ -1009,6 +1019,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign": "start",
       "fontStyle": "normal",
       "textDecoration": "none",
+      "fontVariantNumeric": "normal",
       "WebkitTextStrokeWidth": "0px",
       "WebkitTextStrokeColor": "transparent",
       "maxLines": "none",
@@ -1098,6 +1109,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign",
       "fontStyle",
       "textDecoration",
+      "fontVariantNumeric",
       "_sep_stroke",
       "WebkitTextStrokeWidth",
       "WebkitTextStrokeColor",
@@ -1196,6 +1208,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign": "start",
       "fontStyle": "normal",
       "textDecoration": "none",
+      "fontVariantNumeric": "normal",
       "WebkitTextStrokeWidth": "0px",
       "WebkitTextStrokeColor": "transparent",
       "margin": "0px 0px 0px 0px",
@@ -1284,6 +1297,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign",
       "fontStyle",
       "textDecoration",
+      "fontVariantNumeric",
       "_sep_stroke",
       "WebkitTextStrokeWidth",
       "WebkitTextStrokeColor",
@@ -1385,6 +1399,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign": "start",
       "fontStyle": "normal",
       "textDecoration": "none",
+      "fontVariantNumeric": "normal",
       "WebkitTextStrokeWidth": "0px",
       "WebkitTextStrokeColor": "transparent",
       "margin": "0px 0px 0px 0px",
@@ -1478,6 +1493,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign",
       "fontStyle",
       "textDecoration",
+      "fontVariantNumeric",
       "_sep_stroke",
       "WebkitTextStrokeWidth",
       "WebkitTextStrokeColor",
@@ -1579,6 +1595,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign": "start",
       "fontStyle": "normal",
       "textDecoration": "none",
+      "fontVariantNumeric": "normal",
       "WebkitTextStrokeWidth": "0px",
       "WebkitTextStrokeColor": "transparent",
       "margin": "0px 0px 0px 0px",
@@ -1672,6 +1689,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign",
       "fontStyle",
       "textDecoration",
+      "fontVariantNumeric",
       "_sep_stroke",
       "WebkitTextStrokeWidth",
       "WebkitTextStrokeColor",
@@ -1768,6 +1786,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign": "start",
       "fontStyle": "normal",
       "textDecoration": "none",
+      "fontVariantNumeric": "normal",
       "WebkitTextStrokeWidth": "0px",
       "WebkitTextStrokeColor": "transparent",
       "margin": "0px 0px 0px 0px",
@@ -1855,6 +1874,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign",
       "fontStyle",
       "textDecoration",
+      "fontVariantNumeric",
       "_sep_stroke",
       "WebkitTextStrokeWidth",
       "WebkitTextStrokeColor",
@@ -1951,6 +1971,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign": "start",
       "fontStyle": "normal",
       "textDecoration": "none",
+      "fontVariantNumeric": "normal",
       "WebkitTextStrokeWidth": "0px",
       "WebkitTextStrokeColor": "transparent",
       "margin": "0px 0px 0px 0px",
@@ -2038,6 +2059,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign",
       "fontStyle",
       "textDecoration",
+      "fontVariantNumeric",
       "_sep_stroke",
       "WebkitTextStrokeWidth",
       "WebkitTextStrokeColor",
@@ -2132,6 +2154,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign": "start",
       "fontStyle": "normal",
       "textDecoration": "none",
+      "fontVariantNumeric": "normal",
       "WebkitTextStrokeWidth": "0px",
       "WebkitTextStrokeColor": "transparent",
       "margin": "8px 0px 8px 0px",
@@ -2217,6 +2240,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign",
       "fontStyle",
       "textDecoration",
+      "fontVariantNumeric",
       "_sep_stroke",
       "WebkitTextStrokeWidth",
       "WebkitTextStrokeColor",
@@ -2311,6 +2335,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign": "start",
       "fontStyle": "normal",
       "textDecoration": "none",
+      "fontVariantNumeric": "normal",
       "WebkitTextStrokeWidth": "0px",
       "WebkitTextStrokeColor": "transparent",
       "margin": "0px 0px 0px 0px",
@@ -2396,6 +2421,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign",
       "fontStyle",
       "textDecoration",
+      "fontVariantNumeric",
       "_sep_stroke",
       "WebkitTextStrokeWidth",
       "WebkitTextStrokeColor",
@@ -2499,6 +2525,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign": "start",
       "fontStyle": "normal",
       "textDecoration": "none",
+      "fontVariantNumeric": "normal",
       "WebkitTextStrokeWidth": "0px",
       "WebkitTextStrokeColor": "transparent",
       "opacity": "1",
@@ -2587,6 +2614,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign",
       "fontStyle",
       "textDecoration",
+      "fontVariantNumeric",
       "_sep_stroke",
       "WebkitTextStrokeWidth",
       "WebkitTextStrokeColor",
@@ -2676,6 +2704,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign": "start",
       "fontStyle": "normal",
       "textDecoration": "none",
+      "fontVariantNumeric": "normal",
       "WebkitTextStrokeWidth": "0px",
       "WebkitTextStrokeColor": "transparent",
       "margin": "0px 0px 0px 0px",
@@ -2763,6 +2792,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign",
       "fontStyle",
       "textDecoration",
+      "fontVariantNumeric",
       "_sep_stroke",
       "WebkitTextStrokeWidth",
       "WebkitTextStrokeColor",
@@ -2860,6 +2890,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign": "start",
       "fontStyle": "normal",
       "textDecoration": "none",
+      "fontVariantNumeric": "normal",
       "WebkitTextStrokeWidth": "0px",
       "WebkitTextStrokeColor": "transparent",
       "margin": "0px 0px 0px 0px",
@@ -2953,6 +2984,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign",
       "fontStyle",
       "textDecoration",
+      "fontVariantNumeric",
       "_sep_stroke",
       "WebkitTextStrokeWidth",
       "WebkitTextStrokeColor",
@@ -3270,6 +3302,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign": "start",
       "fontStyle": "normal",
       "textDecoration": "none",
+      "fontVariantNumeric": "normal",
       "WebkitTextStrokeWidth": "0px",
       "WebkitTextStrokeColor": "transparent",
       "opacity": "1",
@@ -3347,6 +3380,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign",
       "fontStyle",
       "textDecoration",
+      "fontVariantNumeric",
       "_sep_stroke",
       "WebkitTextStrokeWidth",
       "WebkitTextStrokeColor",
@@ -3580,6 +3614,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign": "start",
       "fontStyle": "normal",
       "textDecoration": "none",
+      "fontVariantNumeric": "normal",
       "WebkitTextStrokeWidth": "0px",
       "WebkitTextStrokeColor": "transparent",
       "opacity": "1",
@@ -3673,6 +3708,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign",
       "fontStyle",
       "textDecoration",
+      "fontVariantNumeric",
       "_sep_stroke",
       "WebkitTextStrokeWidth",
       "WebkitTextStrokeColor",
@@ -3775,6 +3811,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign": "start",
       "fontStyle": "normal",
       "textDecoration": "none",
+      "fontVariantNumeric": "normal",
       "WebkitTextStrokeWidth": "0px",
       "WebkitTextStrokeColor": "transparent",
       "margin": "0px 0px 0px 0px",
@@ -3878,6 +3915,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign",
       "fontStyle",
       "textDecoration",
+      "fontVariantNumeric",
       "_sep_stroke",
       "WebkitTextStrokeWidth",
       "WebkitTextStrokeColor",
@@ -3974,6 +4012,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign": "start",
       "fontStyle": "normal",
       "textDecoration": "none",
+      "fontVariantNumeric": "normal",
       "WebkitTextStrokeWidth": "0px",
       "WebkitTextStrokeColor": "transparent",
       "margin": "0px 0px 0px 0px",
@@ -4061,6 +4100,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign",
       "fontStyle",
       "textDecoration",
+      "fontVariantNumeric",
       "_sep_stroke",
       "WebkitTextStrokeWidth",
       "WebkitTextStrokeColor",
@@ -4159,6 +4199,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign": "start",
       "fontStyle": "normal",
       "textDecoration": "none",
+      "fontVariantNumeric": "normal",
       "WebkitTextStrokeWidth": "0px",
       "WebkitTextStrokeColor": "transparent",
       "margin": "0px 0px 0px 0px",
@@ -4248,6 +4289,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign",
       "fontStyle",
       "textDecoration",
+      "fontVariantNumeric",
       "_sep_stroke",
       "WebkitTextStrokeWidth",
       "WebkitTextStrokeColor",
@@ -4344,6 +4386,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign": "start",
       "fontStyle": "normal",
       "textDecoration": "none",
+      "fontVariantNumeric": "normal",
       "WebkitTextStrokeWidth": "0px",
       "WebkitTextStrokeColor": "transparent",
       "margin": "0px 0px 0px 0px",
@@ -4431,6 +4474,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign",
       "fontStyle",
       "textDecoration",
+      "fontVariantNumeric",
       "_sep_stroke",
       "WebkitTextStrokeWidth",
       "WebkitTextStrokeColor",
@@ -4527,6 +4571,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign": "start",
       "fontStyle": "normal",
       "textDecoration": "none",
+      "fontVariantNumeric": "normal",
       "WebkitTextStrokeWidth": "0px",
       "WebkitTextStrokeColor": "transparent",
       "margin": "0px 0px 0px 0px",
@@ -4614,6 +4659,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign",
       "fontStyle",
       "textDecoration",
+      "fontVariantNumeric",
       "_sep_stroke",
       "WebkitTextStrokeWidth",
       "WebkitTextStrokeColor",
@@ -4716,6 +4762,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign": "start",
       "fontStyle": "normal",
       "textDecoration": "none",
+      "fontVariantNumeric": "normal",
       "WebkitTextStrokeWidth": "0px",
       "WebkitTextStrokeColor": "transparent",
       "margin": "0px 0px 0px 0px",
@@ -4811,6 +4858,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "textAlign",
       "fontStyle",
       "textDecoration",
+      "fontVariantNumeric",
       "_sep_stroke",
       "WebkitTextStrokeWidth",
       "WebkitTextStrokeColor",
@@ -5045,6 +5093,7 @@ export const NEUTRAL_STYLE_PROPS: Readonly<Record<string, unknown>> = {
   "textAlign": "start",
   "fontStyle": "normal",
   "textDecoration": "none",
+  "fontVariantNumeric": "normal",
   "WebkitTextStrokeWidth": "0px",
   "WebkitTextStrokeColor": "transparent",
   "margin": "0px 0px 0px 0px",