@wildo-ai/saas-frontend-lib 1.1.4 → 1.1.5

package/dist/esm/components/progression/ProgressionMilestoneTracker.js

@@ -2,13 +2,29 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * ProgressionMilestoneTracker
  *
- * Displays milestone progress grouped by category. Shows achieved, in-progress,
- * and locked milestones with progress bars for COUNT_THRESHOLD milestones.
- * Consumes useProgression() for state and useI18n() for labels.
+ * Displays milestone progress in one of several SHAPES, chosen by the mounting application through
+ * `variant`. Consumes useProgression() for state and useI18n() for labels.
+ *
+ * ## Why the shape is a parameter
+ *
+ * This component shipped ONE shape, and that shape put thirteen distinct visual concepts on screen
+ * at once: a global points total, per-category names, per-category counts, per-category progress
+ * bars, per-milestone status icons, names and points, plus a second progress bar at the same weight
+ * as the first — with "achieved" signalled four redundant ways (a check glyph, strike-through, muted
+ * colour, and the absence of the bar).
+ *
+ * How much progression to show is an APPLICATION decision, and it differs between surfaces of the
+ * same application: a dashboard card wants a glance, a dedicated achievements screen wants the
+ * detail, a product still teaching its first task wants only the next thing to do. Picking a simpler
+ * default would have traded one wrong answer for another. See `ProgressionTrackerVariant` for the
+ * vocabulary and the reasoning behind each member.
+ *
+ * Every variant reads the same state and the same definitions; they differ only in how much of it
+ * reaches the screen.
  */
 import { useMemo } from 'react';
-import { MilestoneType, ProgressionScope } from '@wildo-ai/saas-models';
-import { FrontendComponentType } from '@wildo-ai/presets-components-models';
+import { MilestoneType, ProgressionScope, ProgressionTrackerVariant, DEFAULT_PROGRESSION_TRACKER_VARIANT, } from '@wildo-ai/saas-models';
+import { FrontendComponentType, LabellingTypes } from '@wildo-ai/presets-components-models';
 import { Card } from '../../components/sections/card.js';
 import { CardHeader } from '../../components/sections/card.js';
 import { CardContent } from '../../components/sections/card.js';
@@ -18,23 +34,67 @@ import { useIconRegistry } from '../../core/icons/useIconRegistry.js';
 import { IconSize, StandardIconReference } from '../../core/icons/icon-registry.frontend.schemas.js';
 import { useI18n } from '../../core/i18n/useI18n.js';
 import { useProgression } from '../../core/guidance/useGuidance.js';
+import { LoggerFrontendService } from '../../core/monitoring/logger.frontend.service.js';
+/** Variants already reported as unknown, so the warning below fires once per value, not per render. */
+const warnedUnknownVariants = new Set();
+// ─── Types ───────────────────────────────────────────────────────
+/**
+ * Where one milestone stands for this subject, as the tracker draws it.
+ *
+ * Named rather than the inline `'achieved' | 'in-progress' | 'locked'` union it was for seven
+ * months. It is a CLOSED vocabulary read at nine sites in this file — the status icon, the aria
+ * label, two filters and three counts — and an inline union gives none of them a place to say what
+ * a member means or a compiler anything to check a typo against.
+ *
+ * DISPLAY-only, and deliberately not derived from progression state: `LOCKED` is a statement about
+ * unmet dependencies rather than about anything stored, and `IN_PROGRESS` covers both "counting
+ * toward a threshold" and "nothing yet". The tracker decides all three from
+ * `progressionState.milestonesAchieved` plus the definition.
+ */
+export var MilestoneStatus;
+(function (MilestoneStatus) {
+    /** Recorded in `milestonesAchieved`. */
+    MilestoneStatus["ACHIEVED"] = "achieved";
+    /** Reachable, and not achieved yet — whether or not it has started counting. */
+    MilestoneStatus["IN_PROGRESS"] = "in-progress";
+    /** Held behind a dependency the subject has not achieved. */
+    MilestoneStatus["LOCKED"] = "locked";
+})(MilestoneStatus || (MilestoneStatus = {}));
 // ─── Helpers ─────────────────────────────────────────────────────
+/**
+ * A milestone whose SCOPE was never read cannot be displayed truthfully, so it is not displayed.
+ *
+ * The all-or-nothing gate below (`anyScopeWasRead`) answers "may this card render at all", and it
+ * is right to accept one scope — ORGANIZATION is legitimately absent for a user with no current
+ * organization. But the DISPLAY is per-scope, and the two were not the same question: with USER
+ * read and ORGANIZATION unread, every organization-scope milestone fell through to
+ * `operationCounts ?? 0` and rendered `in-progress` at 0 of N, while `total` still counted it — so
+ * the "X of N complete" line could never reach N.
+ *
+ * That is the same "your progress is gone" message the gate exists to refuse, one scope down.
+ * Omitting is the honest answer: an absent row says nothing, where a zeroed one asserts something
+ * false. `null` means the read failed or has not happened; an EMPTY document is a real answer and
+ * is not filtered.
+ */
+function scopeWasRead(progression, scope) {
+    return progression.scopedStates[scope] != null;
+}
 function buildMilestoneDisplay(definitions, progression) {
-    return definitions.map(def => {
+    return definitions.filter(def => scopeWasRead(progression, def.scope ?? ProgressionScope.USER)).map(def => {
         const achievement = progression.getMilestoneAchievement(def.identifier);
         if (achievement) {
-            return { definition: def, status: 'achieved', achievement };
+            return { definition: def, status: MilestoneStatus.ACHIEVED, achievement };
         }
         const depsAreMet = !def.dependencies?.length ||
             def.dependencies.every(dep => progression.isMilestoneAchieved(dep));
         if (!depsAreMet) {
-            return { definition: def, status: 'locked' };
+            return { definition: def, status: MilestoneStatus.LOCKED };
         }
         const triggerKey = `${def.trigger.resourceType}:${def.trigger.operation}`;
         const milestoneScope = def.scope ?? ProgressionScope.USER;
         const scopeState = progression.scopedStates[milestoneScope];
         const currentCount = scopeState?.operationCounts?.[triggerKey] ?? 0;
-        return { definition: def, status: 'in-progress', currentCount };
+        return { definition: def, status: MilestoneStatus.IN_PROGRESS, currentCount };
     });
 }
 function groupByCategory(items) {
@@ -48,48 +108,221 @@ function groupByCategory(items) {
     return Array.from(groups.entries()).map(([category, milestones]) => ({
         category,
         milestones,
-        completedCount: milestones.filter(m => m.status === 'achieved').length,
+        completedCount: milestones.filter(m => m.status === MilestoneStatus.ACHIEVED).length,
         totalCount: milestones.length,
-        totalPoints: milestones.reduce((sum, m) => m.status === 'achieved' ? sum + (m.definition.points ?? 0) : sum, 0),
+        totalPoints: milestones.reduce((sum, m) => m.status === MilestoneStatus.ACHIEVED ? sum + (m.definition.points ?? 0) : sum, 0),
     }));
 }
+/**
+ * The milestone name a person reads.
+ *
+ * This used to be `identifier.replace(/_/g, ' ').toLowerCase().replace(/\b\w/g, …)`, producing
+ * "First Todo Created" from `FIRST_TODO_CREATED` — English manufactured by code, in every locale,
+ * un-translatable and un-wordable by whoever owns the product's copy. It is the exact formatter
+ * `.claude/rules/display-text-comes-from-i18n.md` forbids, and the reason the rule forbids it is
+ * visible here: because the fallback always produced something plausible, the milestone label keys
+ * were never authored and nothing ever looked missing.
+ *
+ * `tMilestone` returns the raw key when no label exists, and the raw key is what renders. A missing
+ * label must LOOK missing.
+ */
+function milestoneName(identifier, tMilestone) {
+    return tMilestone(identifier, 'title');
+}
+/**
+ * The category heading a person reads — same reasoning as {@link milestoneName}.
+ *
+ * Was `category.replace(/-/g, ' ')`, so `getting-started` rendered as "getting started" everywhere.
+ *
+ * `tMilestoneCategory` takes the category ALONE — it composes the
+ * `milestones.categories.<category>.label` key itself, and answers `unresolvedLabel(category)` (the
+ * raw category, hyphens and all) when no label is authored. A first version of this helper typed the
+ * parameter as `(ref, key) => string` and passed a second `'label'` argument; it type-checked,
+ * because a one-parameter function is assignable to a two-parameter type, and the extra argument was
+ * silently discarded at runtime. Harmless in effect and wrong as a contract — it described an API
+ * that does not exist, which is how the test mock came to imitate the wrong shape.
+ */
+function categoryName(category, tMilestoneCategory) {
+    return tMilestoneCategory(category);
+}
+/** The milestones a person can act on now, nearest to completion first. */
+function selectActionable(items, limit) {
+    return items
+        .filter(item => item.status === MilestoneStatus.IN_PROGRESS)
+        .sort((a, b) => completionRatio(b) - completionRatio(a))
+        .slice(0, limit);
+}
+function completionRatio(item) {
+    const threshold = item.definition.threshold;
+    if (!threshold || item.definition.type !== MilestoneType.COUNT_THRESHOLD)
+        return 0;
+    return Math.min(1, (item.currentCount ?? 0) / threshold);
+}
+/**
+ * `threshold != null` is not enough: the schema constrains it to a number and not to a POSITIVE
+ * one, and `threshold: 0` divides by zero — `Math.round((0 / 0) * 100)` is `NaN`, which the
+ * `Progress` preset renders as `translateX(-NaN%)` and which `aria-valuemax={0}` announces as a
+ * bar whose maximum is below its minimum. A count with no positive target is not a count.
+ */
+function hasInFlightCount(item) {
+    return item.status === MilestoneStatus.IN_PROGRESS
+        && item.definition.type === MilestoneType.COUNT_THRESHOLD
+        && item.definition.threshold != null
+        && item.definition.threshold > 0;
+}
 // ─── Sub-components ──────────────────────────────────────────────
-function MilestoneItem({ item, tTracker, }) {
+/**
+ * One milestone row.
+ *
+ * `showPoints` and `showStatusIcon` are what the variants differ on, rather than each variant
+ * re-implementing a row: the density decision belongs to the caller, the row shape does not.
+ */
+function MilestoneRow({ item, name, tTracker, showPoints, showStatusIcon, }) {
     const { renderIcon } = useIconRegistry();
-    const statusIcon = item.status === 'achieved'
+    const statusIcon = item.status === MilestoneStatus.ACHIEVED
         ? renderIcon(StandardIconReference.CHECK, { size: IconSize.SM, className: 'text-success' })
-        : item.status === 'locked'
+        : item.status === MilestoneStatus.LOCKED
             ? renderIcon(StandardIconReference.LOCK, { size: IconSize.SM, className: 'text-muted-foreground' })
             : renderIcon(StandardIconReference.CLOCK, { size: IconSize.SM, className: 'text-primary' });
-    const statusLabel = tTracker(item.status === 'achieved' ? 'achieved' : item.status === 'locked' ? 'locked' : 'inProgress');
-    const showProgress = item.status === 'in-progress' &&
-        item.definition.type === MilestoneType.COUNT_THRESHOLD &&
-        item.definition.threshold != null;
-    const progressPercent = showProgress && item.definition.threshold
+    /**
+     * The status as TEXT, and it is rendered — as the icon's accessible name.
+     *
+     * This was computed and then dropped, so three authored, translated label keys
+     * (`achieved` / `locked` / `inProgress`) were dead and status reached a screen-reader user as
+     * nothing at all: the glyph carried `aria-hidden` and there was no text alternative.
+     */
+    const statusLabel = tTracker(item.status === MilestoneStatus.ACHIEVED ? 'achieved' : item.status === MilestoneStatus.LOCKED ? 'locked' : 'inProgress');
+    const showCount = hasInFlightCount(item);
+    const progressPercent = showCount && item.definition.threshold
         ? Math.min(100, Math.round(((item.currentCount ?? 0) / item.definition.threshold) * 100))
         : 0;
-    return (_jsxs("div", { className: `flex flex-col gap-1.5 py-2.5 ${item.status === 'locked' ? 'opacity-50' : ''}`, role: "listitem", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "shrink-0", "aria-hidden": "true", children: statusIcon }), _jsx("span", { className: `text-sm flex-1 ${item.status === 'achieved' ? 'line-through text-muted-foreground' : 'text-foreground'}`, children: item.definition.identifier.replace(/_/g, ' ').toLowerCase().replace(/\b\w/g, l => l.toUpperCase()) }), (item.definition.points ?? 0) > 0 && (_jsx(Badge, { variant: "outline", className: "text-xs shrink-0", children: tTracker('pointsDisplay', { points: item.definition.points }) }))] }), showProgress && (_jsxs("div", { className: "flex items-center gap-2 ps-6", children: [_jsx(Progress, { value: progressPercent, className: "flex-1 h-1.5", "aria-valuenow": item.currentCount ?? 0, "aria-valuemin": 0, "aria-valuemax": item.definition.threshold }), _jsxs("span", { className: "text-xs text-muted-foreground shrink-0", children: [item.currentCount ?? 0, "/", item.definition.threshold] })] }))] }));
+    return (_jsxs("div", { className: "flex flex-col gap-1.5 py-2.5", role: "listitem", children: [_jsxs("div", { className: "flex items-center gap-2", children: [showStatusIcon && (_jsx("span", { className: "shrink-0", role: "img", "aria-label": statusLabel, children: statusIcon })), _jsx("span", { className: "text-sm flex-1 text-foreground", children: name }), showPoints && (item.definition.points ?? 0) > 0 && (_jsx(Badge, { variant: "outline", className: "text-xs shrink-0", children: tTracker('milestonePoints', { points: item.definition.points ?? 0 }) }))] }), showCount && (_jsxs("div", { className: "flex items-center gap-2 ps-6", children: [_jsx(Progress, { value: progressPercent, className: "flex-1 h-1", "aria-label": name, "aria-valuenow": Math.min(item.currentCount ?? 0, item.definition.threshold), "aria-valuemin": 0, "aria-valuemax": item.definition.threshold }), _jsx("span", { className: "text-xs text-muted-foreground shrink-0", children: tTracker('countProgress', { current: item.currentCount ?? 0, total: item.definition.threshold ?? 0 }) })] }))] }));
 }
-export function ProgressionMilestoneTracker({ className, } = {}) {
+/**
+ * The single overall progress signal shared by every variant that shows one.
+ *
+ * `value` is a PERCENTAGE and the aria attributes are explicit COUNTS, and that split is deliberate.
+ * The `Progress` preset's indicator is `translateX(-${100 - value}%)` — it ignores Radix's `max`
+ * entirely and assumes `value` is already a percentage — so passing `max={total}` with
+ * `value={completed}` would render a 3% fill for 3-of-10. Radix's own percentage-derived ARIA is
+ * therefore overridden with the counts, which announce better than "37 percent" anyway.
+ *
+ * Do not "simplify" this to `value={completed} max={total}`: it reads as the tidier call and breaks
+ * the bar.
+ */
+function OverallProgress({ completed, total, tTracker, }) {
+    return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Progress, { value: total > 0 ? (completed / total) * 100 : 0, className: "flex-1 h-2", "aria-label": tTracker('title'), "aria-valuenow": completed, "aria-valuemin": 0, "aria-valuemax": total }), _jsx("span", { className: "text-xs text-muted-foreground shrink-0", children: tTracker('progressDisplay', { completed, total }) })] }));
+}
+export function ProgressionMilestoneTracker({ variant = DEFAULT_PROGRESSION_TRACKER_VARIANT, actionableLimit = 3, className, } = {}) {
     const progression = useProgression();
-    const { tComponent, isReady } = useI18n({ component: FrontendComponentType.PROGRESSION_MILESTONE_TRACKER });
+    /**
+     * The `milestones` SECTION is requested alongside this component's own chrome, and without it the
+     * milestone names never resolve.
+     *
+     * `LabellingTypes.MILESTONES` is not in `EAGER_I18N_SECTIONS` (`LIFECYCLE` is; this is not), and
+     * `t()` answers with the KEY when a section has not been loaded. Declaring only
+     * `{ component: PROGRESSION_MILESTONE_TRACKER }` loads `components.*` and nothing else — so
+     * `tMilestone(id, 'title')` returned `milestones.FIRST_TODO_CREATED.title` on screen in EVERY
+     * application, even where the labels were authored.
+     *
+     * The humanizer this component used to run hid that completely: it never called the translator, so
+     * the unloaded section was invisible for the whole life of the component. Removing the formatter is
+     * what made the real gap visible, and this is the other half of that fix — a missing label must look
+     * missing, but a label that EXISTS must actually be fetched.
+     */
+    const { tComponent, tMilestone, tMilestoneCategory, isReady } = useI18n({
+        component: FrontendComponentType.PROGRESSION_MILESTONE_TRACKER,
+        keys: [LabellingTypes.MILESTONES],
+    });
     const tTracker = useMemo(() => (key, params) => tComponent(FrontendComponentType.PROGRESSION_MILESTONE_TRACKER, key, params), [tComponent]);
-    const categoryGroups = useMemo(() => {
-        const items = buildMilestoneDisplay(progression.milestoneDefinitions, progression);
-        return groupByCategory(items);
-    }, [progression]);
+    const items = useMemo(() => buildMilestoneDisplay(progression.milestoneDefinitions, progression), [progression]);
+    const categoryGroups = useMemo(() => groupByCategory(items), [items]);
     if (!isReady)
         return null;
     if (progression.isLoading)
         return null;
-    if (progression.milestoneDefinitions.length === 0) {
+    if (progression.milestoneDefinitions.length === 0)
         return null;
-    }
+    /**
+     * Nothing was READ, so there is nothing truthful to display.
+     *
+     * `GuidanceContext` leaves a scope `null` when its progression document could not be read, and
+     * says at that site that `null` is what this component "already treats as no progression to show,
+     * so it renders nothing — which is honest". That was not true: every derived quantity here
+     * collapses `null` to zero — `totalPoints` sums the non-null scopes and reaches 0, and
+     * `getMilestoneAchievement` finds nothing so every milestone reads `in-progress` — and the card
+     * rendered "0 of 8" and "0 points" over a transient network failure. A user who has earned
+     * eight milestones is then told their progress is gone, which is the one message this surface
+     * must never send by accident.
+     *
+     * At least ONE scope, not all of them: `ORGANIZATION` is legitimately `null` for a user with no
+     * current organization, and requiring every scope would hide the tracker for all of them.
+     */
+    const anyScopeWasRead = Object.values(progression.scopedStates).some(state => state != null);
+    if (!anyScopeWasRead)
+        return null;
+    const completed = items.filter(item => item.status === MilestoneStatus.ACHIEVED).length;
+    const total = items.length;
     const title = tTracker('title');
     const description = tTracker('description');
-    return (_jsxs(Card, { role: "region", "aria-label": title, className: className, children: [_jsx(CardHeader, { className: "pb-2", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-base font-semibold", children: title }), description && _jsx("p", { className: "text-sm text-muted-foreground mt-0.5", children: description })] }), _jsx(Badge, { variant: "secondary", className: "text-sm", children: tTracker('pointsDisplay', { points: progression.totalPoints }) })] }) }), _jsx(CardContent, { className: "pt-0", children: categoryGroups.map(group => (_jsxs("div", { className: "mb-4 last:mb-0", children: [_jsxs("div", { className: "flex items-center justify-between mb-1", children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider", children: group.category.replace(/-/g, ' ') }), _jsx("span", { className: "text-xs text-muted-foreground", children: tTracker('progressDisplay', {
-                                        completed: group.completedCount,
-                                        total: group.totalCount,
-                                    }) })] }), _jsx(Progress, { value: group.totalCount > 0 ? (group.completedCount / group.totalCount) * 100 : 0, className: "h-1.5 mb-2" }), _jsx("div", { role: "list", className: "divide-y divide-border", children: group.milestones.map(item => (_jsx(MilestoneItem, { item: item, tTracker: tTracker }, item.definition.identifier))) })] }, group.category))) })] }));
+    const nameOf = (item) => milestoneName(item.definition.identifier, tMilestone);
+    /**
+     * An unrecognised `variant` falls back to the default instead of rendering nothing.
+     *
+     * The switch below is exhaustive over `ProgressionTrackerVariant`, so TypeScript accepts it with
+     * no `default` — but `variant` arrives as a PROP, and a host may take it from application config,
+     * a URL parameter or JSON that the compiler never saw. An unrecognised string made the IIFE
+     * answer `undefined` and the card rendered its header over an empty body: a blank panel with no
+     * explanation anywhere.
+     *
+     * Warned once per offending value rather than per render, because a bad prop is usually constant
+     * and a per-render warning is a log nobody reads.
+     */
+    const resolvedVariant = Object.values(ProgressionTrackerVariant).includes(variant)
+        ? variant
+        : DEFAULT_PROGRESSION_TRACKER_VARIANT;
+    if (resolvedVariant !== variant && !warnedUnknownVariants.has(variant)) {
+        warnedUnknownVariants.add(variant);
+        LoggerFrontendService.getLogger().warn(`ProgressionMilestoneTracker: unknown variant "${variant}" — falling back to `
+            + `"${DEFAULT_PROGRESSION_TRACKER_VARIANT}". Valid values: ${Object.values(ProgressionTrackerVariant).join(', ')}.`);
+    }
+    const body = (() => {
+        switch (resolvedVariant) {
+            /**
+             * Only what is in reach. Achieved milestones are not listed — `progressDisplay` is their
+             * record — and there are no categories, no points and no per-category bar.
+             */
+            case ProgressionTrackerVariant.NEXT_ACTIONS: {
+                const actionable = selectActionable(items, actionableLimit);
+                return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(OverallProgress, { completed: completed, total: total, tTracker: tTracker }), actionable.length > 0 && (_jsx("div", { role: "list", className: "divide-y divide-border", children: actionable.map(item => (_jsx(MilestoneRow, { item: item, name: nameOf(item), tTracker: tTracker, showPoints: false, showStatusIcon: false }, item.definition.identifier))) }))] }));
+            }
+            /** A glance: overall progress, the points total, and the single next milestone. */
+            case ProgressionTrackerVariant.SUMMARY: {
+                const [next] = selectActionable(items, 1);
+                return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(OverallProgress, { completed: completed, total: total, tTracker: tTracker }), next && (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider", children: tTracker('nextUp') }), _jsx("div", { role: "list", children: _jsx(MilestoneRow, { item: next, name: nameOf(next), tTracker: tTracker, showPoints: false, showStatusIcon: false }) })] }))] }));
+            }
+            /**
+             * One list, ONE bar. Categories are headings rather than separately measured units, so nothing
+             * competes with the overall signal.
+             */
+            case ProgressionTrackerVariant.FLAT: {
+                return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(OverallProgress, { completed: completed, total: total, tTracker: tTracker }), categoryGroups.map(group => (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider", children: categoryName(group.category, tMilestoneCategory) }), _jsx("div", { role: "list", className: "divide-y divide-border", children: group.milestones.map(item => (_jsx(MilestoneRow, { item: item, name: nameOf(item), tTracker: tTracker, showPoints: false, showStatusIcon: true }, item.definition.identifier))) })] }, group.category)))] }));
+            }
+            /**
+             * Everything, with the two progress signals given DIFFERENT weight (`h-2` category vs `h-1`
+             * milestone) so they read as a hierarchy. The original rendered both at `h-1.5`, which is what
+             * made them compete rather than nest.
+             */
+            case ProgressionTrackerVariant.DETAILED: {
+                return (_jsx("div", { className: "flex flex-col gap-5", children: categoryGroups.map(group => (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm font-semibold text-foreground", children: categoryName(group.category, tMilestoneCategory) }), _jsx("span", { className: "text-xs text-muted-foreground", children: tTracker('progressDisplay', { completed: group.completedCount, total: group.totalCount }) })] }), _jsx(Progress, { value: group.totalCount > 0 ? (group.completedCount / group.totalCount) * 100 : 0, className: "h-2", "aria-label": categoryName(group.category, tMilestoneCategory), "aria-valuenow": group.completedCount, "aria-valuemin": 0, "aria-valuemax": group.totalCount }), _jsx("div", { role: "list", className: "divide-y divide-border", children: group.milestones.map(item => (_jsx(MilestoneRow, { item: item, name: nameOf(item), tTracker: tTracker, showPoints: true, showStatusIcon: true }, item.definition.identifier))) })] }, group.category))) }));
+            }
+        }
+    })();
+    const showsTotalPoints = resolvedVariant === ProgressionTrackerVariant.SUMMARY
+        || resolvedVariant === ProgressionTrackerVariant.DETAILED;
+    return (_jsxs(Card, { role: "region", "aria-label": title, className: className, "data-progression-variant": resolvedVariant, children: [_jsxs(CardHeader, { className: "pb-2", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsx("h3", { className: "min-w-0 text-base font-semibold", children: title }), showsTotalPoints && (
+                            // `totalPoints`, NOT the `pointsDisplay` key a milestone's own reward used to share. One
+                            // key serving two different quantities left a translator unable to phrase either.
+                            _jsx(Badge, { variant: "secondary", className: "text-sm shrink-0", children: tTracker('totalPoints', { points: progression.totalPoints }) }))] }), description && _jsx("p", { className: "text-sm text-muted-foreground mt-0.5", children: description })] }), _jsx(CardContent, { className: "pt-0", children: body })] }));
 }
 //# sourceMappingURL=ProgressionMilestoneTracker.js.map

package/dist/esm/components/progression/ProgressionMilestoneTracker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressionMilestoneTracker.js","sourceRoot":"","sources":["../../../../src/components/progression/ProgressionMilestoneTracker.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * ProgressionMilestoneTracker\n *\n * Displays milestone progress grouped by category. Shows achieved, in-progress,\n * and locked milestones with progress bars for COUNT_THRESHOLD milestones.\n * Consumes useProgression() for state and useI18n() for labels.\n */\n\nimport React, { useMemo } from 'react';\nimport { MilestoneType, ProgressionScope, type MilestoneDefinition, type ProgressionMilestoneAchieved } from '@wildo-ai/saas-models';\nimport { FrontendComponentType } from '@wildo-ai/presets-components-models';\nimport { Card } from '~wildo-frontend-lib/components/sections/card';\nimport { CardHeader } from '~wildo-frontend-lib/components/sections/card';\nimport { CardContent } from '~wildo-frontend-lib/components/sections/card';\nimport { Progress } from '~wildo-frontend-lib/components/feedback/progress';\nimport { Badge } from '~wildo-frontend-lib/components/data-display/badge';\nimport { useIconRegistry } from '~wildo-frontend-lib/core/icons/useIconRegistry';\nimport { IconSize, StandardIconReference } from '~wildo-frontend-lib/core/icons/icon-registry.frontend.schemas';\nimport { useI18n } from '~wildo-frontend-lib/core/i18n/useI18n';\nimport { useProgression } from '~wildo-frontend-lib/core/guidance/useGuidance';\nimport type { ProgressionContextSlice } from '~wildo-frontend-lib/core/guidance/GuidanceContext';\n\n// ─── Types ───────────────────────────────────────────────────────\n\ninterface MilestoneDisplayItem {\n  definition: MilestoneDefinition;\n  status: 'achieved' | 'in-progress' | 'locked';\n  achievement?: ProgressionMilestoneAchieved;\n  currentCount?: number;\n}\n\ninterface CategoryGroup {\n  category: string;\n  milestones: MilestoneDisplayItem[];\n  completedCount: number;\n  totalCount: number;\n  totalPoints: number;\n}\n\n// ─── Helpers ─────────────────────────────────────────────────────\n\nfunction buildMilestoneDisplay(\n  definitions: MilestoneDefinition[],\n  progression: ProgressionContextSlice,\n): MilestoneDisplayItem[] {\n  return definitions.map(def => {\n    const achievement = progression.getMilestoneAchievement(def.identifier);\n    if (achievement) {\n      return { definition: def, status: 'achieved' as const, achievement };\n    }\n\n    const depsAreMet = !def.dependencies?.length ||\n      def.dependencies.every(dep => progression.isMilestoneAchieved(dep));\n\n    if (!depsAreMet) {\n      return { definition: def, status: 'locked' as const };\n    }\n\n    const triggerKey = `${def.trigger.resourceType}:${def.trigger.operation}`;\n    const milestoneScope = def.scope ?? ProgressionScope.USER;\n    const scopeState = progression.scopedStates[milestoneScope];\n    const currentCount = scopeState?.operationCounts?.[triggerKey] ?? 0;\n\n    return { definition: def, status: 'in-progress' as const, currentCount };\n  });\n}\n\nfunction groupByCategory(items: MilestoneDisplayItem[]): CategoryGroup[] {\n  const groups = new Map<string, MilestoneDisplayItem[]>();\n\n  for (const item of items) {\n    const cat = item.definition.category;\n    if (!groups.has(cat)) groups.set(cat, []);\n    groups.get(cat)!.push(item);\n  }\n\n  return Array.from(groups.entries()).map(([category, milestones]) => ({\n    category,\n    milestones,\n    completedCount: milestones.filter(m => m.status === 'achieved').length,\n    totalCount: milestones.length,\n    totalPoints: milestones.reduce((sum, m) =>\n      m.status === 'achieved' ? sum + (m.definition.points ?? 0) : sum, 0),\n  }));\n}\n\n// ─── Sub-components ──────────────────────────────────────────────\n\nfunction MilestoneItem({\n  item,\n  tTracker,\n}: {\n  item: MilestoneDisplayItem;\n  tTracker: (key: string, params?: Record<string, unknown>) => string;\n}): React.JSX.Element {\n  const { renderIcon } = useIconRegistry();\n\n  const statusIcon = item.status === 'achieved'\n    ? renderIcon(StandardIconReference.CHECK, { size: IconSize.SM, className: 'text-success' })\n    : item.status === 'locked'\n      ? renderIcon(StandardIconReference.LOCK, { size: IconSize.SM, className: 'text-muted-foreground' })\n      : renderIcon(StandardIconReference.CLOCK, { size: IconSize.SM, className: 'text-primary' });\n\n  const statusLabel = tTracker(item.status === 'achieved' ? 'achieved' : item.status === 'locked' ? 'locked' : 'inProgress');\n\n  const showProgress = item.status === 'in-progress' &&\n    item.definition.type === MilestoneType.COUNT_THRESHOLD &&\n    item.definition.threshold != null;\n\n  const progressPercent = showProgress && item.definition.threshold\n    ? Math.min(100, Math.round(((item.currentCount ?? 0) / item.definition.threshold) * 100))\n    : 0;\n\n  return (\n    <div\n      className={`flex flex-col gap-1.5 py-2.5 ${item.status === 'locked' ? 'opacity-50' : ''}`}\n      role=\"listitem\"\n    >\n      <div className=\"flex items-center gap-2\">\n        <span className=\"shrink-0\" aria-hidden=\"true\">{statusIcon}</span>\n        <span className={`text-sm flex-1 ${item.status === 'achieved' ? 'line-through text-muted-foreground' : 'text-foreground'}`}>\n          {item.definition.identifier.replace(/_/g, ' ').toLowerCase().replace(/\\b\\w/g, l => l.toUpperCase())}\n        </span>\n        {(item.definition.points ?? 0) > 0 && (\n          <Badge variant=\"outline\" className=\"text-xs shrink-0\">\n            {tTracker('pointsDisplay', { points: item.definition.points })}\n          </Badge>\n        )}\n      </div>\n\n      {showProgress && (\n        <div className=\"flex items-center gap-2 ps-6\">\n          <Progress\n            value={progressPercent}\n            className=\"flex-1 h-1.5\"\n            aria-valuenow={item.currentCount ?? 0}\n            aria-valuemin={0}\n            aria-valuemax={item.definition.threshold!}\n          />\n          <span className=\"text-xs text-muted-foreground shrink-0\">\n            {item.currentCount ?? 0}/{item.definition.threshold}\n          </span>\n        </div>\n      )}\n    </div>\n  );\n}\n\n// ─── Main Component ──────────────────────────────────────────────\n\nexport interface ProgressionMilestoneTrackerProps {\n  /**\n   * Optional class forwarded to the root `Card` surface. Lets a host size or\n   * space the tracker within its layout (e.g. `w-full` inside a dashboard\n   * column) without wrapping it in an extra element that would break the\n   * `region` landmark ↔ title association.\n   */\n  className?: string;\n}\n\nexport function ProgressionMilestoneTracker({\n  className,\n}: ProgressionMilestoneTrackerProps = {}): React.JSX.Element | null {\n  const progression = useProgression();\n  const { tComponent, isReady } = useI18n({ component: FrontendComponentType.PROGRESSION_MILESTONE_TRACKER });\n\n  const tTracker = useMemo(\n    () => (key: string, params?: Record<string, string | number>) =>\n      tComponent(FrontendComponentType.PROGRESSION_MILESTONE_TRACKER, key, params),\n    [tComponent],\n  );\n\n  const categoryGroups = useMemo(() => {\n    const items = buildMilestoneDisplay(progression.milestoneDefinitions, progression);\n    return groupByCategory(items);\n  }, [progression]);\n\n  if (!isReady) return null;\n\n  if (progression.isLoading) return null;\n\n  if (progression.milestoneDefinitions.length === 0) {\n    return null;\n  }\n\n  const title = tTracker('title');\n  const description = tTracker('description');\n\n  return (\n    <Card role=\"region\" aria-label={title} className={className}>\n      <CardHeader className=\"pb-2\">\n        <div className=\"flex items-center justify-between\">\n          <div>\n            <h3 className=\"text-base font-semibold\">{title}</h3>\n            {description && <p className=\"text-sm text-muted-foreground mt-0.5\">{description}</p>}\n          </div>\n          <Badge variant=\"secondary\" className=\"text-sm\">\n            {tTracker('pointsDisplay', { points: progression.totalPoints })}\n          </Badge>\n        </div>\n      </CardHeader>\n\n      <CardContent className=\"pt-0\">\n        {categoryGroups.map(group => (\n          <div key={group.category} className=\"mb-4 last:mb-0\">\n            <div className=\"flex items-center justify-between mb-1\">\n              <span className=\"text-xs font-medium text-muted-foreground uppercase tracking-wider\">\n                {group.category.replace(/-/g, ' ')}\n              </span>\n              <span className=\"text-xs text-muted-foreground\">\n                {tTracker('progressDisplay', {\n                  completed: group.completedCount,\n                  total: group.totalCount,\n                })}\n              </span>\n            </div>\n\n            <Progress\n              value={group.totalCount > 0 ? (group.completedCount / group.totalCount) * 100 : 0}\n              className=\"h-1.5 mb-2\"\n            />\n\n            <div role=\"list\" className=\"divide-y divide-border\">\n              {group.milestones.map(item => (\n                <MilestoneItem key={item.definition.identifier} item={item} tTracker={tTracker} />\n              ))}\n            </div>\n          </div>\n        ))}\n      </CardContent>\n    </Card>\n  );\n}\n"]}
+{"version":3,"file":"ProgressionMilestoneTracker.js","sourceRoot":"","sources":["../../../../../src/components/progression/ProgressionMilestoneTracker.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * ProgressionMilestoneTracker\n *\n * Displays milestone progress in one of several SHAPES, chosen by the mounting application through\n * `variant`. Consumes useProgression() for state and useI18n() for labels.\n *\n * ## Why the shape is a parameter\n *\n * This component shipped ONE shape, and that shape put thirteen distinct visual concepts on screen\n * at once: a global points total, per-category names, per-category counts, per-category progress\n * bars, per-milestone status icons, names and points, plus a second progress bar at the same weight\n * as the first — with \"achieved\" signalled four redundant ways (a check glyph, strike-through, muted\n * colour, and the absence of the bar).\n *\n * How much progression to show is an APPLICATION decision, and it differs between surfaces of the\n * same application: a dashboard card wants a glance, a dedicated achievements screen wants the\n * detail, a product still teaching its first task wants only the next thing to do. Picking a simpler\n * default would have traded one wrong answer for another. See `ProgressionTrackerVariant` for the\n * vocabulary and the reasoning behind each member.\n *\n * Every variant reads the same state and the same definitions; they differ only in how much of it\n * reaches the screen.\n */\n\nimport React, { useMemo } from 'react';\nimport {\n  MilestoneType,\n  ProgressionScope,\n  ProgressionTrackerVariant,\n  DEFAULT_PROGRESSION_TRACKER_VARIANT,\n  type MilestoneDefinition,\n  type ProgressionMilestoneAchieved,\n} from '@wildo-ai/saas-models';\nimport { FrontendComponentType, LabellingTypes } from '@wildo-ai/presets-components-models';\nimport { Card } from '~wildo-frontend-lib/components/sections/card';\nimport { CardHeader } from '~wildo-frontend-lib/components/sections/card';\nimport { CardContent } from '~wildo-frontend-lib/components/sections/card';\nimport { Progress } from '~wildo-frontend-lib/components/feedback/progress';\nimport { Badge } from '~wildo-frontend-lib/components/data-display/badge';\nimport { useIconRegistry } from '~wildo-frontend-lib/core/icons/useIconRegistry';\nimport { IconSize, StandardIconReference } from '~wildo-frontend-lib/core/icons/icon-registry.frontend.schemas';\nimport { useI18n } from '~wildo-frontend-lib/core/i18n/useI18n';\nimport { useProgression } from '~wildo-frontend-lib/core/guidance/useGuidance';\nimport { LoggerFrontendService } from '~wildo-frontend-lib/core/monitoring/logger.frontend.service';\nimport type { ProgressionContextSlice } from '~wildo-frontend-lib/core/guidance/GuidanceContext';\n\n/** Variants already reported as unknown, so the warning below fires once per value, not per render. */\nconst warnedUnknownVariants = new Set<string>();\n\n// ─── Types ───────────────────────────────────────────────────────\n\n/**\n * Where one milestone stands for this subject, as the tracker draws it.\n *\n * Named rather than the inline `'achieved' | 'in-progress' | 'locked'` union it was for seven\n * months. It is a CLOSED vocabulary read at nine sites in this file — the status icon, the aria\n * label, two filters and three counts — and an inline union gives none of them a place to say what\n * a member means or a compiler anything to check a typo against.\n *\n * DISPLAY-only, and deliberately not derived from progression state: `LOCKED` is a statement about\n * unmet dependencies rather than about anything stored, and `IN_PROGRESS` covers both \"counting\n * toward a threshold\" and \"nothing yet\". The tracker decides all three from\n * `progressionState.milestonesAchieved` plus the definition.\n */\nexport enum MilestoneStatus {\n  /** Recorded in `milestonesAchieved`. */\n  ACHIEVED = 'achieved',\n  /** Reachable, and not achieved yet — whether or not it has started counting. */\n  IN_PROGRESS = 'in-progress',\n  /** Held behind a dependency the subject has not achieved. */\n  LOCKED = 'locked',\n}\n\ninterface MilestoneDisplayItem {\n  definition: MilestoneDefinition;\n  status: MilestoneStatus;\n  achievement?: ProgressionMilestoneAchieved;\n  currentCount?: number;\n}\n\ninterface CategoryGroup {\n  category: string;\n  milestones: MilestoneDisplayItem[];\n  completedCount: number;\n  totalCount: number;\n  totalPoints: number;\n}\n\ntype TrackerTranslate = (key: string, params?: Record<string, string | number>) => string;\n\n// ─── Helpers ─────────────────────────────────────────────────────\n\n/**\n * A milestone whose SCOPE was never read cannot be displayed truthfully, so it is not displayed.\n *\n * The all-or-nothing gate below (`anyScopeWasRead`) answers \"may this card render at all\", and it\n * is right to accept one scope — ORGANIZATION is legitimately absent for a user with no current\n * organization. But the DISPLAY is per-scope, and the two were not the same question: with USER\n * read and ORGANIZATION unread, every organization-scope milestone fell through to\n * `operationCounts ?? 0` and rendered `in-progress` at 0 of N, while `total` still counted it — so\n * the \"X of N complete\" line could never reach N.\n *\n * That is the same \"your progress is gone\" message the gate exists to refuse, one scope down.\n * Omitting is the honest answer: an absent row says nothing, where a zeroed one asserts something\n * false. `null` means the read failed or has not happened; an EMPTY document is a real answer and\n * is not filtered.\n */\nfunction scopeWasRead(progression: ProgressionContextSlice, scope: ProgressionScope): boolean {\n  return progression.scopedStates[scope] != null;\n}\n\nfunction buildMilestoneDisplay(\n  definitions: MilestoneDefinition[],\n  progression: ProgressionContextSlice,\n): MilestoneDisplayItem[] {\n  return definitions.filter(def => scopeWasRead(progression, def.scope ?? ProgressionScope.USER)).map(def => {\n    const achievement = progression.getMilestoneAchievement(def.identifier);\n    if (achievement) {\n      return { definition: def, status: MilestoneStatus.ACHIEVED, achievement };\n    }\n\n    const depsAreMet = !def.dependencies?.length ||\n      def.dependencies.every(dep => progression.isMilestoneAchieved(dep));\n\n    if (!depsAreMet) {\n      return { definition: def, status: MilestoneStatus.LOCKED };\n    }\n\n    const triggerKey = `${def.trigger.resourceType}:${def.trigger.operation}`;\n    const milestoneScope = def.scope ?? ProgressionScope.USER;\n    const scopeState = progression.scopedStates[milestoneScope];\n    const currentCount = scopeState?.operationCounts?.[triggerKey] ?? 0;\n\n    return { definition: def, status: MilestoneStatus.IN_PROGRESS, currentCount };\n  });\n}\n\nfunction groupByCategory(items: MilestoneDisplayItem[]): CategoryGroup[] {\n  const groups = new Map<string, MilestoneDisplayItem[]>();\n\n  for (const item of items) {\n    const cat = item.definition.category;\n    if (!groups.has(cat)) groups.set(cat, []);\n    groups.get(cat)!.push(item);\n  }\n\n  return Array.from(groups.entries()).map(([category, milestones]) => ({\n    category,\n    milestones,\n    completedCount: milestones.filter(m => m.status === MilestoneStatus.ACHIEVED).length,\n    totalCount: milestones.length,\n    totalPoints: milestones.reduce((sum, m) =>\n      m.status === MilestoneStatus.ACHIEVED ? sum + (m.definition.points ?? 0) : sum, 0),\n  }));\n}\n\n/**\n * The milestone name a person reads.\n *\n * This used to be `identifier.replace(/_/g, ' ').toLowerCase().replace(/\\b\\w/g, …)`, producing\n * \"First Todo Created\" from `FIRST_TODO_CREATED` — English manufactured by code, in every locale,\n * un-translatable and un-wordable by whoever owns the product's copy. It is the exact formatter\n * `.claude/rules/display-text-comes-from-i18n.md` forbids, and the reason the rule forbids it is\n * visible here: because the fallback always produced something plausible, the milestone label keys\n * were never authored and nothing ever looked missing.\n *\n * `tMilestone` returns the raw key when no label exists, and the raw key is what renders. A missing\n * label must LOOK missing.\n */\nfunction milestoneName(identifier: string, tMilestone: (ref: string, key: string) => string): string {\n  return tMilestone(identifier, 'title');\n}\n\n/**\n * The category heading a person reads — same reasoning as {@link milestoneName}.\n *\n * Was `category.replace(/-/g, ' ')`, so `getting-started` rendered as \"getting started\" everywhere.\n *\n * `tMilestoneCategory` takes the category ALONE — it composes the\n * `milestones.categories.<category>.label` key itself, and answers `unresolvedLabel(category)` (the\n * raw category, hyphens and all) when no label is authored. A first version of this helper typed the\n * parameter as `(ref, key) => string` and passed a second `'label'` argument; it type-checked,\n * because a one-parameter function is assignable to a two-parameter type, and the extra argument was\n * silently discarded at runtime. Harmless in effect and wrong as a contract — it described an API\n * that does not exist, which is how the test mock came to imitate the wrong shape.\n */\nfunction categoryName(category: string, tMilestoneCategory: (category: string) => string): string {\n  return tMilestoneCategory(category);\n}\n\n/** The milestones a person can act on now, nearest to completion first. */\nfunction selectActionable(items: MilestoneDisplayItem[], limit: number): MilestoneDisplayItem[] {\n  return items\n    .filter(item => item.status === MilestoneStatus.IN_PROGRESS)\n    .sort((a, b) => completionRatio(b) - completionRatio(a))\n    .slice(0, limit);\n}\n\nfunction completionRatio(item: MilestoneDisplayItem): number {\n  const threshold = item.definition.threshold;\n  if (!threshold || item.definition.type !== MilestoneType.COUNT_THRESHOLD) return 0;\n  return Math.min(1, (item.currentCount ?? 0) / threshold);\n}\n\n/**\n * `threshold != null` is not enough: the schema constrains it to a number and not to a POSITIVE\n * one, and `threshold: 0` divides by zero — `Math.round((0 / 0) * 100)` is `NaN`, which the\n * `Progress` preset renders as `translateX(-NaN%)` and which `aria-valuemax={0}` announces as a\n * bar whose maximum is below its minimum. A count with no positive target is not a count.\n */\nfunction hasInFlightCount(item: MilestoneDisplayItem): boolean {\n  return item.status === MilestoneStatus.IN_PROGRESS\n    && item.definition.type === MilestoneType.COUNT_THRESHOLD\n    && item.definition.threshold != null\n    && item.definition.threshold > 0;\n}\n\n// ─── Sub-components ──────────────────────────────────────────────\n\n/**\n * One milestone row.\n *\n * `showPoints` and `showStatusIcon` are what the variants differ on, rather than each variant\n * re-implementing a row: the density decision belongs to the caller, the row shape does not.\n */\nfunction MilestoneRow({\n  item,\n  name,\n  tTracker,\n  showPoints,\n  showStatusIcon,\n}: {\n  item: MilestoneDisplayItem;\n  name: string;\n  tTracker: TrackerTranslate;\n  showPoints: boolean;\n  showStatusIcon: boolean;\n}): React.JSX.Element {\n  const { renderIcon } = useIconRegistry();\n\n  const statusIcon = item.status === MilestoneStatus.ACHIEVED\n    ? renderIcon(StandardIconReference.CHECK, { size: IconSize.SM, className: 'text-success' })\n    : item.status === MilestoneStatus.LOCKED\n      ? renderIcon(StandardIconReference.LOCK, { size: IconSize.SM, className: 'text-muted-foreground' })\n      : renderIcon(StandardIconReference.CLOCK, { size: IconSize.SM, className: 'text-primary' });\n\n  /**\n   * The status as TEXT, and it is rendered — as the icon's accessible name.\n   *\n   * This was computed and then dropped, so three authored, translated label keys\n   * (`achieved` / `locked` / `inProgress`) were dead and status reached a screen-reader user as\n   * nothing at all: the glyph carried `aria-hidden` and there was no text alternative.\n   */\n  const statusLabel = tTracker(\n    item.status === MilestoneStatus.ACHIEVED ? 'achieved' : item.status === MilestoneStatus.LOCKED ? 'locked' : 'inProgress',\n  );\n\n  const showCount = hasInFlightCount(item);\n  const progressPercent = showCount && item.definition.threshold\n    ? Math.min(100, Math.round(((item.currentCount ?? 0) / item.definition.threshold) * 100))\n    : 0;\n\n  return (\n    <div className=\"flex flex-col gap-1.5 py-2.5\" role=\"listitem\">\n      <div className=\"flex items-center gap-2\">\n        {showStatusIcon && (\n          <span className=\"shrink-0\" role=\"img\" aria-label={statusLabel}>{statusIcon}</span>\n        )}\n        {/*\n          ONE encoding of \"achieved\", not four. The original combined the check glyph, strike-through,\n          a muted colour AND the absence of the progress bar — four signals for one fact, which is\n          what made a row hard to scan. The icon carries it; the text stays legible.\n        */}\n        <span className=\"text-sm flex-1 text-foreground\">{name}</span>\n        {showPoints && (item.definition.points ?? 0) > 0 && (\n          <Badge variant=\"outline\" className=\"text-xs shrink-0\">\n            {tTracker('milestonePoints', { points: item.definition.points ?? 0 })}\n          </Badge>\n        )}\n      </div>\n\n      {showCount && (\n        <div className=\"flex items-center gap-2 ps-6\">\n          <Progress\n            value={progressPercent}\n            className=\"flex-1 h-1\"\n            aria-label={name}\n            /*\n             * CLAMPED, like `progressPercent` above. The count and the achievement arrive on\n             * separate websocket frames, so `11 of 10` is reachable for the moment between them —\n             * and `aria-valuenow` above `aria-valuemax` is an invalid range a screen reader may\n             * announce as nonsense. The visible text below deliberately still shows the real\n             * count; it is prose, not a range.\n             */\n            aria-valuenow={Math.min(item.currentCount ?? 0, item.definition.threshold!)}\n            aria-valuemin={0}\n            aria-valuemax={item.definition.threshold!}\n          />\n          <span className=\"text-xs text-muted-foreground shrink-0\">\n            {tTracker('countProgress', { current: item.currentCount ?? 0, total: item.definition.threshold ?? 0 })}\n          </span>\n        </div>\n      )}\n    </div>\n  );\n}\n\n/**\n * The single overall progress signal shared by every variant that shows one.\n *\n * `value` is a PERCENTAGE and the aria attributes are explicit COUNTS, and that split is deliberate.\n * The `Progress` preset's indicator is `translateX(-${100 - value}%)` — it ignores Radix's `max`\n * entirely and assumes `value` is already a percentage — so passing `max={total}` with\n * `value={completed}` would render a 3% fill for 3-of-10. Radix's own percentage-derived ARIA is\n * therefore overridden with the counts, which announce better than \"37 percent\" anyway.\n *\n * Do not \"simplify\" this to `value={completed} max={total}`: it reads as the tidier call and breaks\n * the bar.\n */\nfunction OverallProgress({\n  completed,\n  total,\n  tTracker,\n}: {\n  completed: number;\n  total: number;\n  tTracker: TrackerTranslate;\n}): React.JSX.Element {\n  return (\n    <div className=\"flex items-center gap-3\">\n      <Progress\n        value={total > 0 ? (completed / total) * 100 : 0}\n        className=\"flex-1 h-2\"\n        aria-label={tTracker('title')}\n        aria-valuenow={completed}\n        aria-valuemin={0}\n        aria-valuemax={total}\n      />\n      <span className=\"text-xs text-muted-foreground shrink-0\">\n        {tTracker('progressDisplay', { completed, total })}\n      </span>\n    </div>\n  );\n}\n\n// ─── Main Component ──────────────────────────────────────────────\n\nexport interface ProgressionMilestoneTrackerProps {\n  /**\n   * How much progression this mount shows. See `ProgressionTrackerVariant`.\n   *\n   * Per MOUNT rather than per application, deliberately: the same application legitimately wants a\n   * `SUMMARY` on its dashboard and a `DETAILED` on an achievements screen.\n   */\n  variant?: ProgressionTrackerVariant;\n  /**\n   * How many actionable milestones `NEXT_ACTIONS` lists. Ignored by every other variant.\n   *\n   * Three by default — enough to offer a choice, few enough to stay a prompt rather than a list.\n   */\n  actionableLimit?: number;\n  /**\n   * Optional class forwarded to the root `Card` surface. Lets a host size or\n   * space the tracker within its layout (e.g. `w-full` inside a dashboard\n   * column) without wrapping it in an extra element that would break the\n   * `region` landmark ↔ title association.\n   */\n  className?: string;\n}\n\nexport function ProgressionMilestoneTracker({\n  variant = DEFAULT_PROGRESSION_TRACKER_VARIANT,\n  actionableLimit = 3,\n  className,\n}: ProgressionMilestoneTrackerProps = {}): React.JSX.Element | null {\n  const progression = useProgression();\n  /**\n   * The `milestones` SECTION is requested alongside this component's own chrome, and without it the\n   * milestone names never resolve.\n   *\n   * `LabellingTypes.MILESTONES` is not in `EAGER_I18N_SECTIONS` (`LIFECYCLE` is; this is not), and\n   * `t()` answers with the KEY when a section has not been loaded. Declaring only\n   * `{ component: PROGRESSION_MILESTONE_TRACKER }` loads `components.*` and nothing else — so\n   * `tMilestone(id, 'title')` returned `milestones.FIRST_TODO_CREATED.title` on screen in EVERY\n   * application, even where the labels were authored.\n   *\n   * The humanizer this component used to run hid that completely: it never called the translator, so\n   * the unloaded section was invisible for the whole life of the component. Removing the formatter is\n   * what made the real gap visible, and this is the other half of that fix — a missing label must look\n   * missing, but a label that EXISTS must actually be fetched.\n   */\n  const { tComponent, tMilestone, tMilestoneCategory, isReady } = useI18n({\n    component: FrontendComponentType.PROGRESSION_MILESTONE_TRACKER,\n    keys: [LabellingTypes.MILESTONES],\n  });\n\n  const tTracker: TrackerTranslate = useMemo(\n    () => (key, params) => tComponent(FrontendComponentType.PROGRESSION_MILESTONE_TRACKER, key, params),\n    [tComponent],\n  );\n\n  const items = useMemo(\n    () => buildMilestoneDisplay(progression.milestoneDefinitions, progression),\n    [progression],\n  );\n  const categoryGroups = useMemo(() => groupByCategory(items), [items]);\n\n  if (!isReady) return null;\n  if (progression.isLoading) return null;\n  if (progression.milestoneDefinitions.length === 0) return null;\n\n  /**\n   * Nothing was READ, so there is nothing truthful to display.\n   *\n   * `GuidanceContext` leaves a scope `null` when its progression document could not be read, and\n   * says at that site that `null` is what this component \"already treats as no progression to show,\n   * so it renders nothing — which is honest\". That was not true: every derived quantity here\n   * collapses `null` to zero — `totalPoints` sums the non-null scopes and reaches 0, and\n   * `getMilestoneAchievement` finds nothing so every milestone reads `in-progress` — and the card\n   * rendered \"0 of 8\" and \"0 points\" over a transient network failure. A user who has earned\n   * eight milestones is then told their progress is gone, which is the one message this surface\n   * must never send by accident.\n   *\n   * At least ONE scope, not all of them: `ORGANIZATION` is legitimately `null` for a user with no\n   * current organization, and requiring every scope would hide the tracker for all of them.\n   */\n  const anyScopeWasRead = Object.values(progression.scopedStates).some(state => state != null);\n  if (!anyScopeWasRead) return null;\n\n  const completed = items.filter(item => item.status === MilestoneStatus.ACHIEVED).length;\n  const total = items.length;\n  const title = tTracker('title');\n  const description = tTracker('description');\n\n  const nameOf = (item: MilestoneDisplayItem): string => milestoneName(item.definition.identifier, tMilestone);\n\n  /**\n   * An unrecognised `variant` falls back to the default instead of rendering nothing.\n   *\n   * The switch below is exhaustive over `ProgressionTrackerVariant`, so TypeScript accepts it with\n   * no `default` — but `variant` arrives as a PROP, and a host may take it from application config,\n   * a URL parameter or JSON that the compiler never saw. An unrecognised string made the IIFE\n   * answer `undefined` and the card rendered its header over an empty body: a blank panel with no\n   * explanation anywhere.\n   *\n   * Warned once per offending value rather than per render, because a bad prop is usually constant\n   * and a per-render warning is a log nobody reads.\n   */\n  const resolvedVariant = (Object.values(ProgressionTrackerVariant) as string[]).includes(variant)\n    ? variant\n    : DEFAULT_PROGRESSION_TRACKER_VARIANT;\n  if (resolvedVariant !== variant && !warnedUnknownVariants.has(variant)) {\n    warnedUnknownVariants.add(variant);\n    LoggerFrontendService.getLogger().warn(\n      `ProgressionMilestoneTracker: unknown variant \"${variant}\" — falling back to `\n        + `\"${DEFAULT_PROGRESSION_TRACKER_VARIANT}\". Valid values: ${Object.values(ProgressionTrackerVariant).join(', ')}.`,\n    );\n  }\n\n  const body = ((): React.JSX.Element => {\n    switch (resolvedVariant) {\n      /**\n       * Only what is in reach. Achieved milestones are not listed — `progressDisplay` is their\n       * record — and there are no categories, no points and no per-category bar.\n       */\n      case ProgressionTrackerVariant.NEXT_ACTIONS: {\n        const actionable = selectActionable(items, actionableLimit);\n        return (\n          <div className=\"flex flex-col gap-3\">\n            <OverallProgress completed={completed} total={total} tTracker={tTracker} />\n            {/*\n              No empty LIST when nothing is actionable.\n\n              `selectActionable` filters to `in-progress`, so an all-achieved or all-locked subject\n              leaves it empty — and a `role=\"list\"` with no children is announced as \"list, 0 items\",\n              a container promising rows that do not exist.\n\n              Nothing is rendered in its place on purpose: `OverallProgress` above already states\n              \"N of N completed\", which IS the whole message for a finished subject. An \"all done\"\n              line would need a label nobody has authored, and inventing one here is what\n              `display-text-comes-from-i18n.md` forbids — the tracker's own `emptyState` key was\n              deliberately removed.\n            */}\n            {actionable.length > 0 && (\n            <div role=\"list\" className=\"divide-y divide-border\">\n              {actionable.map(item => (\n                <MilestoneRow\n                  key={item.definition.identifier}\n                  item={item}\n                  name={nameOf(item)}\n                  tTracker={tTracker}\n                  showPoints={false}\n                  showStatusIcon={false}\n                />\n              ))}\n            </div>\n            )}\n          </div>\n        );\n      }\n\n      /** A glance: overall progress, the points total, and the single next milestone. */\n      case ProgressionTrackerVariant.SUMMARY: {\n        const [next] = selectActionable(items, 1);\n        return (\n          <div className=\"flex flex-col gap-3\">\n            <OverallProgress completed={completed} total={total} tTracker={tTracker} />\n            {next && (\n              <div className=\"flex flex-col gap-1\">\n                <span className=\"text-xs font-medium text-muted-foreground uppercase tracking-wider\">\n                  {tTracker('nextUp')}\n                </span>\n                <div role=\"list\">\n                  <MilestoneRow\n                    item={next}\n                    name={nameOf(next)}\n                    tTracker={tTracker}\n                    showPoints={false}\n                    showStatusIcon={false}\n                  />\n                </div>\n              </div>\n            )}\n          </div>\n        );\n      }\n\n      /**\n       * One list, ONE bar. Categories are headings rather than separately measured units, so nothing\n       * competes with the overall signal.\n       */\n      case ProgressionTrackerVariant.FLAT: {\n        return (\n          <div className=\"flex flex-col gap-4\">\n            <OverallProgress completed={completed} total={total} tTracker={tTracker} />\n            {categoryGroups.map(group => (\n              <div key={group.category} className=\"flex flex-col gap-1\">\n                <span className=\"text-xs font-medium text-muted-foreground uppercase tracking-wider\">\n                  {categoryName(group.category, tMilestoneCategory)}\n                </span>\n                <div role=\"list\" className=\"divide-y divide-border\">\n                  {group.milestones.map(item => (\n                    <MilestoneRow\n                      key={item.definition.identifier}\n                      item={item}\n                      name={nameOf(item)}\n                      tTracker={tTracker}\n                      showPoints={false}\n                      showStatusIcon\n                    />\n                  ))}\n                </div>\n              </div>\n            ))}\n          </div>\n        );\n      }\n\n      /**\n       * Everything, with the two progress signals given DIFFERENT weight (`h-2` category vs `h-1`\n       * milestone) so they read as a hierarchy. The original rendered both at `h-1.5`, which is what\n       * made them compete rather than nest.\n       */\n      case ProgressionTrackerVariant.DETAILED: {\n        return (\n          <div className=\"flex flex-col gap-5\">\n            {categoryGroups.map(group => (\n              <div key={group.category} className=\"flex flex-col gap-1.5\">\n                <div className=\"flex items-center justify-between\">\n                  <span className=\"text-sm font-semibold text-foreground\">\n                    {categoryName(group.category, tMilestoneCategory)}\n                  </span>\n                  <span className=\"text-xs text-muted-foreground\">\n                    {tTracker('progressDisplay', { completed: group.completedCount, total: group.totalCount })}\n                  </span>\n                </div>\n                <Progress\n                  value={group.totalCount > 0 ? (group.completedCount / group.totalCount) * 100 : 0}\n                  className=\"h-2\"\n                  aria-label={categoryName(group.category, tMilestoneCategory)}\n                  aria-valuenow={group.completedCount}\n                  aria-valuemin={0}\n                  aria-valuemax={group.totalCount}\n                />\n                <div role=\"list\" className=\"divide-y divide-border\">\n                  {group.milestones.map(item => (\n                    <MilestoneRow\n                      key={item.definition.identifier}\n                      item={item}\n                      name={nameOf(item)}\n                      tTracker={tTracker}\n                      showPoints\n                      showStatusIcon\n                    />\n                  ))}\n                </div>\n              </div>\n            ))}\n          </div>\n        );\n      }\n    }\n  })();\n\n  const showsTotalPoints = resolvedVariant === ProgressionTrackerVariant.SUMMARY\n    || resolvedVariant === ProgressionTrackerVariant.DETAILED;\n\n  return (\n    <Card role=\"region\" aria-label={title} className={className} data-progression-variant={resolvedVariant}>\n      <CardHeader className=\"pb-2\">\n        {/*\n          The points badge shares the TITLE's row, and the description runs the card's full width\n          beneath both. It used to sit beside a title+description column, which a `shrink-0` badge\n          squeezed: measured 2026-09-24 in a 303px card, the column got 130px and \"Track your\n          progress through each milestone.\" broke onto three lines beside a one-line badge. A\n          heading and a badge are one line; a sentence needs the width.\n          `min-w-0` lets a long application-authored title wrap instead of pushing the badge out.\n        */}\n        <div className=\"flex items-start justify-between gap-2\">\n          <h3 className=\"min-w-0 text-base font-semibold\">{title}</h3>\n          {showsTotalPoints && (\n            // `totalPoints`, NOT the `pointsDisplay` key a milestone's own reward used to share. One\n            // key serving two different quantities left a translator unable to phrase either.\n            <Badge variant=\"secondary\" className=\"text-sm shrink-0\">\n              {tTracker('totalPoints', { points: progression.totalPoints })}\n            </Badge>\n          )}\n        </div>\n        {description && <p className=\"text-sm text-muted-foreground mt-0.5\">{description}</p>}\n      </CardHeader>\n\n      <CardContent className=\"pt-0\">{body}</CardContent>\n    </Card>\n  );\n}\n"]}

package/dist/esm/components/progression/ProgressionMilestoneTracker.labels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressionMilestoneTracker.labels.d.ts","sourceRoot":"","sources":["../../../../src/components/progression/ProgressionMilestoneTracker.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoC,KAAK,mBAAmB,EAA2B,MAAM,qCAAqC,CAAC;AAM1I,eAAO,MAAM,iCAAiC,EAAE,mBAAmB,EAsBlE,CAAC"}
+{"version":3,"file":"ProgressionMilestoneTracker.labels.d.ts","sourceRoot":"","sources":["../../../../../src/components/progression/ProgressionMilestoneTracker.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoC,KAAK,mBAAmB,EAA2B,MAAM,qCAAqC,CAAC;AAM1I,eAAO,MAAM,iCAAiC,EAAE,mBAAmB,EA4DlE,CAAC"}

package/dist/esm/components/progression/ProgressionMilestoneTracker.labels.js

@@ -5,15 +5,53 @@ import { FrontendComponentType, LabelKind, registerComponentLabels } from '@wild
 export const ProgressionMilestoneTrackerLabels = [
     { ref: 'title', kind: LabelKind.HEADING, purpose: 'Heading for the milestone-tracker panel' },
     { ref: 'description', kind: LabelKind.DESCRIPTION, purpose: 'Supporting text explaining the milestone progression' },
-    { ref: 'emptyState', kind: LabelKind.EMPTY_STATE, purpose: 'Shown when no milestones are defined to track' },
+    /*
+     * `emptyState` was REMOVED, not renamed.
+     *
+     * It was registered, translated in every locale, and could never render: the component returns
+     * `null` when there are no milestone definitions, and that is the right behaviour — a host that
+     * declares no milestones wants no panel, not a panel announcing its own emptiness. The same
+     * defect class this file's `achieved`/`locked`/`inProgress` note describes, one key further on:
+     * three dead keys were found and revived, the fourth was dead because the surface itself was
+     * correct.
+     *
+     * A registered key nothing can reach costs a translator a string in every locale and tells the
+     * next reader the surface has a state it does not have.
+     */
     { ref: 'achieved', kind: LabelKind.LABEL, purpose: 'Status label for a milestone the user has completed' },
     { ref: 'locked', kind: LabelKind.LABEL, purpose: 'Status label for a milestone not yet reachable' },
     { ref: 'inProgress', kind: LabelKind.LABEL, purpose: 'Status label for a milestone currently underway' },
+    /*
+     * `milestonePoints` and `totalPoints` were ONE key, `pointsDisplay`, whose own purpose line read
+     * "Points awarded by a milestone, OR the total points earned". Two semantically different numbers
+     * behind one key: a translator sees a single string and cannot phrase both, and several languages
+     * need different wording for "this is worth N" and "you have N".
+     */
     {
-        ref: 'pointsDisplay',
+        ref: 'milestonePoints',
         kind: LabelKind.LABEL,
-        purpose: 'Points awarded by a milestone, or the total points earned',
-        params: [{ key: 'points', meaning: 'number of reward points for the milestone or running total' }],
+        purpose: 'Points a single milestone awards when achieved',
+        params: [{ key: 'points', meaning: 'reward points for this one milestone' }],
+    },
+    {
+        ref: 'totalPoints',
+        kind: LabelKind.LABEL,
+        purpose: 'Running total of points the person has earned across all achieved milestones',
+        params: [{ key: 'points', meaning: 'cumulative points earned so far' }],
+    },
+    {
+        ref: 'nextUp',
+        kind: LabelKind.HEADING,
+        purpose: 'Heading above the single milestone the person should pursue next',
+    },
+    {
+        ref: 'countProgress',
+        kind: LabelKind.LABEL,
+        purpose: 'How far a counted milestone has progressed toward its threshold',
+        params: [
+            { key: 'current', meaning: 'occurrences recorded so far' },
+            { key: 'total', meaning: 'occurrences the milestone requires' },
+        ],
     },
     {
         ref: 'progressDisplay',

package/dist/esm/components/progression/ProgressionMilestoneTracker.labels.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressionMilestoneTracker.labels.js","sourceRoot":"","sources":["../../../../src/components/progression/ProgressionMilestoneTracker.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,SAAS,EAA4B,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAE1I,2EAA2E;AAC3E,6EAA6E;AAC7E,+EAA+E;AAE/E,MAAM,CAAC,MAAM,iCAAiC,GAA0B;IACtE,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,yCAAyC,EAAE;IAC7F,EAAE,GAAG,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,CAAC,WAAW,EAAE,OAAO,EAAE,sDAAsD,EAAE;IACpH,EAAE,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE,SAAS,CAAC,WAAW,EAAE,OAAO,EAAE,+CAA+C,EAAE;IAC5G,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,qDAAqD,EAAE;IAC1G,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,gDAAgD,EAAE;IACnG,EAAE,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,iDAAiD,EAAE;IACxG;QACE,GAAG,EAAE,eAAe;QACpB,IAAI,EAAE,SAAS,CAAC,KAAK;QACrB,OAAO,EAAE,2DAA2D;QACpE,MAAM,EAAE,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,4DAA4D,EAAE,CAAC;KACnG;IACD;QACE,GAAG,EAAE,iBAAiB;QACtB,IAAI,EAAE,SAAS,CAAC,KAAK;QACrB,OAAO,EAAE,oDAAoD;QAC7D,MAAM,EAAE;YACN,EAAE,GAAG,EAAE,WAAW,EAAE,OAAO,EAAE,sCAAsC,EAAE;YACrE,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,0CAA0C,EAAE;SACtE;KACF;CACF,CAAC;AACF,uBAAuB,CAAC,qBAAqB,CAAC,6BAA6B,EAAE,iCAAiC,CAAC,CAAC","sourcesContent":["import { FrontendComponentType, LabelKind, type LabellingUnitaryDef, registerComponentLabels } from '@wildo-ai/presets-components-models';\n\n// Companion-only label metadata for this component: keys + params + (where\n// authored) per-key purpose / kind / variable meaning. Statically scanned by\n// the dev companion; NOT imported at runtime, so it never ships in the bundle.\n\nexport const ProgressionMilestoneTrackerLabels: LabellingUnitaryDef[] = [\n  { ref: 'title', kind: LabelKind.HEADING, purpose: 'Heading for the milestone-tracker panel' },\n  { ref: 'description', kind: LabelKind.DESCRIPTION, purpose: 'Supporting text explaining the milestone progression' },\n  { ref: 'emptyState', kind: LabelKind.EMPTY_STATE, purpose: 'Shown when no milestones are defined to track' },\n  { ref: 'achieved', kind: LabelKind.LABEL, purpose: 'Status label for a milestone the user has completed' },\n  { ref: 'locked', kind: LabelKind.LABEL, purpose: 'Status label for a milestone not yet reachable' },\n  { ref: 'inProgress', kind: LabelKind.LABEL, purpose: 'Status label for a milestone currently underway' },\n  {\n    ref: 'pointsDisplay',\n    kind: LabelKind.LABEL,\n    purpose: 'Points awarded by a milestone, or the total points earned',\n    params: [{ key: 'points', meaning: 'number of reward points for the milestone or running total' }],\n  },\n  {\n    ref: 'progressDisplay',\n    kind: LabelKind.LABEL,\n    purpose: 'How many milestones are completed out of the total',\n    params: [\n      { key: 'completed', meaning: 'count of milestones already achieved' },\n      { key: 'total', meaning: 'total number of milestones being tracked' },\n    ],\n  },\n];\nregisterComponentLabels(FrontendComponentType.PROGRESSION_MILESTONE_TRACKER, ProgressionMilestoneTrackerLabels);\n"]}
+{"version":3,"file":"ProgressionMilestoneTracker.labels.js","sourceRoot":"","sources":["../../../../../src/components/progression/ProgressionMilestoneTracker.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,SAAS,EAA4B,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAE1I,2EAA2E;AAC3E,6EAA6E;AAC7E,+EAA+E;AAE/E,MAAM,CAAC,MAAM,iCAAiC,GAA0B;IACtE,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,yCAAyC,EAAE;IAC7F,EAAE,GAAG,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,CAAC,WAAW,EAAE,OAAO,EAAE,sDAAsD,EAAE;IACpH;;;;;;;;;;;;OAYG;IACH,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,qDAAqD,EAAE;IAC1G,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,gDAAgD,EAAE;IACnG,EAAE,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,iDAAiD,EAAE;IACxG;;;;;OAKG;IACH;QACE,GAAG,EAAE,iBAAiB;QACtB,IAAI,EAAE,SAAS,CAAC,KAAK;QACrB,OAAO,EAAE,gDAAgD;QACzD,MAAM,EAAE,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,sCAAsC,EAAE,CAAC;KAC7E;IACD;QACE,GAAG,EAAE,aAAa;QAClB,IAAI,EAAE,SAAS,CAAC,KAAK;QACrB,OAAO,EAAE,8EAA8E;QACvF,MAAM,EAAE,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,iCAAiC,EAAE,CAAC;KACxE;IACD;QACE,GAAG,EAAE,QAAQ;QACb,IAAI,EAAE,SAAS,CAAC,OAAO;QACvB,OAAO,EAAE,kEAAkE;KAC5E;IACD;QACE,GAAG,EAAE,eAAe;QACpB,IAAI,EAAE,SAAS,CAAC,KAAK;QACrB,OAAO,EAAE,iEAAiE;QAC1E,MAAM,EAAE;YACN,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,6BAA6B,EAAE;YAC1D,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,oCAAoC,EAAE;SAChE;KACF;IACD;QACE,GAAG,EAAE,iBAAiB;QACtB,IAAI,EAAE,SAAS,CAAC,KAAK;QACrB,OAAO,EAAE,oDAAoD;QAC7D,MAAM,EAAE;YACN,EAAE,GAAG,EAAE,WAAW,EAAE,OAAO,EAAE,sCAAsC,EAAE;YACrE,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,0CAA0C,EAAE;SACtE;KACF;CACF,CAAC;AACF,uBAAuB,CAAC,qBAAqB,CAAC,6BAA6B,EAAE,iCAAiC,CAAC,CAAC","sourcesContent":["import { FrontendComponentType, LabelKind, type LabellingUnitaryDef, registerComponentLabels } from '@wildo-ai/presets-components-models';\n\n// Companion-only label metadata for this component: keys + params + (where\n// authored) per-key purpose / kind / variable meaning. Statically scanned by\n// the dev companion; NOT imported at runtime, so it never ships in the bundle.\n\nexport const ProgressionMilestoneTrackerLabels: LabellingUnitaryDef[] = [\n  { ref: 'title', kind: LabelKind.HEADING, purpose: 'Heading for the milestone-tracker panel' },\n  { ref: 'description', kind: LabelKind.DESCRIPTION, purpose: 'Supporting text explaining the milestone progression' },\n  /*\n   * `emptyState` was REMOVED, not renamed.\n   *\n   * It was registered, translated in every locale, and could never render: the component returns\n   * `null` when there are no milestone definitions, and that is the right behaviour — a host that\n   * declares no milestones wants no panel, not a panel announcing its own emptiness. The same\n   * defect class this file's `achieved`/`locked`/`inProgress` note describes, one key further on:\n   * three dead keys were found and revived, the fourth was dead because the surface itself was\n   * correct.\n   *\n   * A registered key nothing can reach costs a translator a string in every locale and tells the\n   * next reader the surface has a state it does not have.\n   */\n  { ref: 'achieved', kind: LabelKind.LABEL, purpose: 'Status label for a milestone the user has completed' },\n  { ref: 'locked', kind: LabelKind.LABEL, purpose: 'Status label for a milestone not yet reachable' },\n  { ref: 'inProgress', kind: LabelKind.LABEL, purpose: 'Status label for a milestone currently underway' },\n  /*\n   * `milestonePoints` and `totalPoints` were ONE key, `pointsDisplay`, whose own purpose line read\n   * \"Points awarded by a milestone, OR the total points earned\". Two semantically different numbers\n   * behind one key: a translator sees a single string and cannot phrase both, and several languages\n   * need different wording for \"this is worth N\" and \"you have N\".\n   */\n  {\n    ref: 'milestonePoints',\n    kind: LabelKind.LABEL,\n    purpose: 'Points a single milestone awards when achieved',\n    params: [{ key: 'points', meaning: 'reward points for this one milestone' }],\n  },\n  {\n    ref: 'totalPoints',\n    kind: LabelKind.LABEL,\n    purpose: 'Running total of points the person has earned across all achieved milestones',\n    params: [{ key: 'points', meaning: 'cumulative points earned so far' }],\n  },\n  {\n    ref: 'nextUp',\n    kind: LabelKind.HEADING,\n    purpose: 'Heading above the single milestone the person should pursue next',\n  },\n  {\n    ref: 'countProgress',\n    kind: LabelKind.LABEL,\n    purpose: 'How far a counted milestone has progressed toward its threshold',\n    params: [\n      { key: 'current', meaning: 'occurrences recorded so far' },\n      { key: 'total', meaning: 'occurrences the milestone requires' },\n    ],\n  },\n  {\n    ref: 'progressDisplay',\n    kind: LabelKind.LABEL,\n    purpose: 'How many milestones are completed out of the total',\n    params: [\n      { key: 'completed', meaning: 'count of milestones already achieved' },\n      { key: 'total', meaning: 'total number of milestones being tracked' },\n    ],\n  },\n];\nregisterComponentLabels(FrontendComponentType.PROGRESSION_MILESTONE_TRACKER, ProgressionMilestoneTrackerLabels);\n"]}