@vectoriox/iox-ui 5.44.0 → 5.45.0

package/src/design-core/public-api.ts

@@ -29,3 +29,4 @@ export * from './fonts';
 export * from './token-names';
 export * from './design-settings';
 export * from './design-apply';
+export * from './style-presets';

package/src/design-core/style-presets.ts

@@ -0,0 +1,71 @@
+import { SPEC_MOODS, SPEC_STYLE_PRESETS } from './flavor-spec.generated';
+import { resolveDesignChoices } from './design-settings';
+import {
+    DensityId, DesignChoices, DesignMode, DesignMotion, MotionId, ShapeId, TintId,
+} from './design-token.model';
+
+/**
+ * Style presets (AI plan rev 3 §3f, H1-1) — a style is a preset over what exists, never a stylesheet: a
+ * named `DesignChoices` + the site's motion character + the colour modes it passed the contrast audit in.
+ * Generated 1:1 from the contract (`stylePresets`, AA-gated per preset × mode in build-spec.mjs); Design ▸
+ * Look lists them, ranked by the harness (`@vectoriox/iox-ui/harness-core`).
+ */
+
+/** The closed mood vocabulary a preset carries (≤ 3) and an analysis returns. */
+export type MoodId = keyof typeof SPEC_MOODS;
+export const MOOD_IDS = Object.keys(SPEC_MOODS) as ReadonlyArray<MoodId>;
+export const MOOD_LABELS: Readonly<Record<MoodId, string>> = SPEC_MOODS;
+
+/** A colour mode a preset was audited in (`auto` is offered on top when it passed both). */
+export type PresetMode = Exclude<DesignMode, 'auto'>;
+
+export interface StylePreset {
+    readonly id: string;
+    readonly name: string;
+    readonly blurb: string;
+    readonly flavorId: string;
+    readonly seed: string;
+    readonly tint: TintId;
+    readonly pairId: string;
+    readonly shape: ShapeId;
+    readonly density: DensityId;
+    readonly motion: MotionId;
+    readonly pillButtons: boolean;
+    readonly moves: Readonly<DesignMotion>;
+    /** The modes it PASSED the audit in; the first is its default. */
+    readonly modes: ReadonlyArray<PresetMode>;
+    readonly moods: ReadonlyArray<MoodId>;
+    /** The UI UX Pro Max styles it stands for (attribution and the mapping table). */
+    readonly uupm: ReadonlyArray<string>;
+    /** In the M1-alpha slice. */
+    readonly slice: boolean;
+}
+
+/** The 24, catalogue order (four per flavor). Assignment here proves the generated data fits the type. */
+export const STYLE_PRESETS: ReadonlyArray<StylePreset> = SPEC_STYLE_PRESETS;
+
+export function stylePresetById(id: string | null | undefined): StylePreset | undefined {
+    return id ? STYLE_PRESETS.find(p => p.id === id) : undefined;
+}
+
+const FOLLOW_VISITOR: DesignMode = 'auto';
+
+/** The modes Design offers for a preset: the audited ones, then "Follow visitor" when it passed both (H-D3). */
+export function presetModes(preset: StylePreset): DesignMode[] {
+    return preset.modes.length > 1 ? [...preset.modes, FOLLOW_VISITOR] : [...preset.modes];
+}
+
+/**
+ * What picking a preset means — the complete `DesignChoices`, its motion included — in `mode` (default:
+ * its first). A mode it was not audited in is REFUSED (null): a light-only preset is never worn dark.
+ */
+export function presetChoices(id: string, mode?: DesignMode): DesignChoices | null {
+    const preset = stylePresetById(id);
+    if (!preset) return null;
+    const wear = mode ?? preset.modes[0];
+    if (!presetModes(preset).includes(wear)) return null;
+    return resolveDesignChoices({
+        flavorId: preset.flavorId, seed: preset.seed, pairId: preset.pairId, shape: preset.shape, density: preset.density,
+        motion: preset.motion, pillButtons: preset.pillButtons, mode: wear, tint: preset.tint, ...preset.moves,
+    });
+}