@humanforest/nuxt-layer 0.1.0

package/packages/ui/src/icons.ts

@@ -0,0 +1,79 @@
+// Generated by scripts/icons.ts — do not edit.
+// Source: packages/ui/icons/forest/*.svg + @iconify-json/lucide.
+
+/** Structural match for Iconify's IconifyJSON — avoids a runtime dep on @iconify/types here. */
+export type ForestIconCollection = {
+  prefix: string;
+  icons: Record<string, { body: string }>;
+  width: number;
+  height: number;
+};
+
+/**
+ * Forest's own icons, drawn to Lucide's conventions (24×24, stroke-width 2, round caps and joins,
+ * currentColor). Most are line drawings with no fill; a few are FILLED shapes — the solid variants, and
+ * `parking`, which is the letter P in Mohr Black Italic converted to outlines. They exist only where
+ * Lucide has no glyph for something Forest needs.
+ * Register with addCollection() from @iconify/vue before mounting, then use as `i-forest-<name>`.
+ */
+export const forestIcons: ForestIconCollection = {
+  "prefix": "forest",
+  "icons": {
+    "bike-asterisk": {
+      "body": "<g fill=\"none\" stroke=\"currentColor\"><path d=\"M18.5 19C20.433 19 22 17.433 22 15.5C22 13.567 20.433 12 18.5 12C16.567 12 15 13.567 15 15.5C15 17.433 16.567 19 18.5 19Z\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /><path d=\"M5.5 19C7.433 19 9 17.433 9 15.5C9 13.567 7.433 12 5.5 12C3.567 12 2 13.567 2 15.5C2 17.433 3.567 19 5.5 19Z\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /><path d=\"M6 15.5H11.3602C11.7502 15.5 12.1047 15.2732 12.2681 14.9191L15 9\" stroke-width=\"2\" stroke-linecap=\"round\" /><path d=\"M8 9H10\" stroke-width=\"2\" stroke-linecap=\"round\" /><path d=\"M9 9L12 15\" stroke-width=\"2\" stroke-linecap=\"round\" /><path d=\"M12 5H12.8686C13.2543 5 13.6056 5.22183 13.7715 5.57007L18.5 15.5\" stroke-width=\"2\" stroke-linecap=\"round\" /><path d=\"M15 6H18.6126C19.2951 6 19.7771 6.6687 19.5613 7.31623L19.2279 8.31623C19.0918 8.72457 18.7097 9 18.2792 9H16\" stroke-width=\"2\" stroke-linecap=\"round\" /><path d=\"M5.5 12H3\" stroke-width=\"2\" stroke-linecap=\"round\" /><path d=\"M5 3V7.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /><path d=\"M7 4L3 6.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /><path d=\"M3 4L7 6.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /></g>"
+    },
+    "bike-down": {
+      "body": "<g fill=\"none\" stroke=\"currentColor\"><path d=\"M18.5 19C20.433 19 22 17.433 22 15.5C22 13.567 20.433 12 18.5 12C16.567 12 15 13.567 15 15.5C15 17.433 16.567 19 18.5 19Z\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /><path d=\"M5.5 19C7.433 19 9 17.433 9 15.5C9 13.567 7.433 12 5.5 12C3.567 12 2 13.567 2 15.5C2 17.433 3.567 19 5.5 19Z\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /><path d=\"M6 15.5H11.3602C11.7502 15.5 12.1047 15.2732 12.2681 14.9191L15 9\" stroke-width=\"2\" stroke-linecap=\"round\" /><path d=\"M8 9H10\" stroke-width=\"2\" stroke-linecap=\"round\" /><path d=\"M9 9L12 15\" stroke-width=\"2\" stroke-linecap=\"round\" /><path d=\"M12 5H12.8686C13.2543 5 13.6056 5.22183 13.7715 5.57007L18.5 15.5\" stroke-width=\"2\" stroke-linecap=\"round\" /><path d=\"M15 6H18.6126C19.2951 6 19.7771 6.6687 19.5613 7.31623L19.2279 8.31623C19.0918 8.72457 18.7097 9 18.2792 9H16\" stroke-width=\"2\" stroke-linecap=\"round\" /><path d=\"M5.5 12H3\" stroke-width=\"2\" stroke-linecap=\"round\" /><path d=\"M4 8L4 2.5M4 8L2 5.5M4 8L6 5.5\" stroke-width=\"2\" stroke-linecap=\"round\" /></g>"
+    },
+    "bike-off": {
+      "body": "<g fill=\"none\" stroke=\"currentColor\"><path d=\"M18.5 18C20.433 18 22 17.433 22 15.5C22 13.567 20.433 12 18.5 12C16.567 12 15 13.567 15 15.5C15 17.433 16.567 18 18.5 18Z\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /><path d=\"M5.5 18C7.433 18 9 17.433 9 15.5C9 13.567 7.433 12 5.5 12C3.567 12 2 13.567 2 15.5C2 17.433 3.567 18 5.5 18Z\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /><path d=\"M6 15.5H11.3602C11.7502 15.5 12.1047 15.2732 12.2681 14.9191L15 9\" stroke-width=\"2\" stroke-linecap=\"round\" /><path d=\"M8 9H10\" stroke-width=\"2\" stroke-linecap=\"round\" /><path d=\"M9 9L12 15\" stroke-width=\"2\" stroke-linecap=\"round\" /><path d=\"M12 5H12.8686C13.2543 5 13.6056 5.22183 13.7715 5.57007L18.5 15.5\" stroke-width=\"2\" stroke-linecap=\"round\" /><path d=\"M15 6H18.6126C19.2951 6 19.7771 6.6687 19.5613 7.31623L19.2279 8.31623C19.0918 8.72457 18.7097 9 18.2792 9H16\" stroke-width=\"2\" stroke-linecap=\"round\" /><path d=\"M5.5 12H3\" stroke-width=\"2\" stroke-linecap=\"round\" /><path d=\"M8 18H3\" stroke-width=\"2\" stroke-linecap=\"round\" /><path d=\"M21 18H16\" stroke-width=\"2\" stroke-linecap=\"round\" /></g>"
+    },
+    "bike-up": {
+      "body": "<g fill=\"none\" stroke=\"currentColor\"><path d=\"M18.5 19C20.433 19 22 17.433 22 15.5C22 13.567 20.433 12 18.5 12C16.567 12 15 13.567 15 15.5C15 17.433 16.567 19 18.5 19Z\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /><path d=\"M5.5 19C7.433 19 9 17.433 9 15.5C9 13.567 7.433 12 5.5 12C3.567 12 2 13.567 2 15.5C2 17.433 3.567 19 5.5 19Z\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /><path d=\"M6 15.5H11.3602C11.7502 15.5 12.1047 15.2732 12.2681 14.9191L15 9\" stroke-width=\"2\" stroke-linecap=\"round\" /><path d=\"M8 9H10\" stroke-width=\"2\" stroke-linecap=\"round\" /><path d=\"M9 9L12 15\" stroke-width=\"2\" stroke-linecap=\"round\" /><path d=\"M12 5H12.8686C13.2543 5 13.6056 5.22183 13.7715 5.57007L18.5 15.5\" stroke-width=\"2\" stroke-linecap=\"round\" /><path d=\"M15 6H18.6126C19.2951 6 19.7771 6.6687 19.5613 7.31623L19.2279 8.31623C19.0918 8.72457 18.7097 9 18.2792 9H16\" stroke-width=\"2\" stroke-linecap=\"round\" /><path d=\"M5.5 12H3\" stroke-width=\"2\" stroke-linecap=\"round\" /><path d=\"M4 2.5V8M4 2.5L6 5M4 2.5L2 5\" stroke-width=\"2\" stroke-linecap=\"round\" /></g>"
+    },
+    "bike-x": {
+      "body": "<g fill=\"none\" stroke=\"currentColor\"><path d=\"M18.5 19C20.433 19 22 17.433 22 15.5C22 13.567 20.433 12 18.5 12C16.567 12 15 13.567 15 15.5C15 17.433 16.567 19 18.5 19Z\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /><path d=\"M5.5 19C7.433 19 9 17.433 9 15.5C9 13.567 7.433 12 5.5 12C3.567 12 2 13.567 2 15.5C2 17.433 3.567 19 5.5 19Z\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /><path d=\"M6 15.5H11.3602C11.7502 15.5 12.1047 15.2732 12.2681 14.9191L15 9\" stroke-width=\"2\" stroke-linecap=\"round\" /><path d=\"M8 9H10\" stroke-width=\"2\" stroke-linecap=\"round\" /><path d=\"M9 9L12 15\" stroke-width=\"2\" stroke-linecap=\"round\" /><path d=\"M12 5H12.8686C13.2543 5 13.6056 5.22183 13.7715 5.57007L18.5 15.5\" stroke-width=\"2\" stroke-linecap=\"round\" /><path d=\"M15 6H18.6126C19.2951 6 19.7771 6.6687 19.5613 7.31623L19.2279 8.31623C19.0918 8.72457 18.7097 9 18.2792 9H16\" stroke-width=\"2\" stroke-linecap=\"round\" /><path d=\"M5.5 12H3\" stroke-width=\"2\" stroke-linecap=\"round\" /><path d=\"M3 7L7 3M7 7L3 3\" stroke-width=\"2\" stroke-linecap=\"round\" /></g>"
+    },
+    "bike": {
+      "body": "<g fill=\"none\" stroke=\"currentColor\"><path d=\"M18.5 19C20.433 19 22 17.433 22 15.5C22 13.567 20.433 12 18.5 12C16.567 12 15 13.567 15 15.5C15 17.433 16.567 19 18.5 19Z\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /><path d=\"M5.5 19C7.433 19 9 17.433 9 15.5C9 13.567 7.433 12 5.5 12C3.567 12 2 13.567 2 15.5C2 17.433 3.567 19 5.5 19Z\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /><path d=\"M6 15.5H11.3602C11.7502 15.5 12.1047 15.2732 12.2681 14.9191L15 9\" stroke-width=\"2\" stroke-linecap=\"round\" /><path d=\"M8 9H10\" stroke-width=\"2\" stroke-linecap=\"round\" /><path d=\"M9 9L12 15\" stroke-width=\"2\" stroke-linecap=\"round\" /><path d=\"M12 5H12.8686C13.2543 5 13.6056 5.22183 13.7715 5.57007L18.5 15.5\" stroke-width=\"2\" stroke-linecap=\"round\" /><path d=\"M15 6H18.6126C19.2951 6 19.7771 6.6687 19.5613 7.31623L19.2279 8.31623C19.0918 8.72457 18.7097 9 18.2792 9H16\" stroke-width=\"2\" stroke-linecap=\"round\" /><path d=\"M5.5 12H3\" stroke-width=\"2\" stroke-linecap=\"round\" /></g>"
+    },
+    "mark-fill": {
+      "body": "<g fill=\"currentColor\" stroke=\"currentColor\"><path d=\"M12 2L17.2 12.4H15.4L17.2 16H6.8L8.6 12.4H6.8L12 2Z\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /><path d=\"M10.2 16V22H8.6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /><path d=\"M13.8 16V22H15.4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /></g>"
+    },
+    "mark": {
+      "body": "<g fill=\"none\" stroke=\"currentColor\"><path d=\"M12 2L17.2 12.4H15.4L17.2 16H6.8L8.6 12.4H6.8L12 2Z\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /><path d=\"M10.2 16V22H8.6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /><path d=\"M13.8 16V22H15.4\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /></g>"
+    },
+    "parking": {
+      "body": "<g fill=\"currentColor\"><path d=\"M4.68 20.5 6.48 3.5H12.99Q16.15 3.5 17.78 5.02Q19.41 6.53 19.32 9.35Q19.24 12.66 17.19 14.43Q15.14 16.2 11.62 16.2H10.22L9.78 20.5ZM10.7 11.79H11.95Q13 11.79 13.57 11.26Q14.14 10.73 14.2 9.74Q14.23 8.88 13.77 8.4Q13.3 7.91 12.38 7.91H11.1Z\" /></g>"
+    },
+    "star-fill": {
+      "body": "<g fill=\"currentColor\" stroke=\"currentColor\"><path d=\"M 11.5251 2.2969 a 0.5299 0.5299 0 0 1 0.9498 0 l 2.3095 4.6781 a 2.1196 2.1196 0 0 0 1.5947 1.1598 l 5.165 0.7558 a 0.5299 0.5299 0 0 1 0.2939 0.9038 l -3.7353 3.6373 a 2.1196 2.1196 0 0 0 -0.6109 1.8776 l 0.8818 5.139 a 0.5299 0.5299 0 0 1 -0.7708 0.5599 l -4.6171 -2.4275 a 2.1196 2.1196 0 0 0 -1.9726 0 L 6.3971 21.0082 a 0.5299 0.5299 0 0 1 -0.7698 -0.5599 l 0.8808 -5.138 a 2.1196 2.1196 0 0 0 -0.6109 -1.8786 L 2.162 9.7954 a 0.5299 0.5299 0 0 1 0.2939 -0.9058 l 5.164 -0.7548 a 2.1196 2.1196 0 0 0 1.5967 -1.1598 z\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /></g>"
+    },
+    "star": {
+      "body": "<g fill=\"none\" stroke=\"currentColor\"><path d=\"M 11.5251 2.2969 a 0.5299 0.5299 0 0 1 0.9498 0 l 2.3095 4.6781 a 2.1196 2.1196 0 0 0 1.5947 1.1598 l 5.165 0.7558 a 0.5299 0.5299 0 0 1 0.2939 0.9038 l -3.7353 3.6373 a 2.1196 2.1196 0 0 0 -0.6109 1.8776 l 0.8818 5.139 a 0.5299 0.5299 0 0 1 -0.7708 0.5599 l -4.6171 -2.4275 a 2.1196 2.1196 0 0 0 -1.9726 0 L 6.3971 21.0082 a 0.5299 0.5299 0 0 1 -0.7698 -0.5599 l 0.8808 -5.138 a 2.1196 2.1196 0 0 0 -0.6109 -1.8786 L 2.162 9.7954 a 0.5299 0.5299 0 0 1 0.2939 -0.9058 l 5.164 -0.7548 a 2.1196 2.1196 0 0 0 1.5967 -1.1598 z\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /></g>"
+    },
+    "traffic-light-caution": {
+      "body": "<g fill=\"none\" stroke=\"currentColor\"><rect x=\"7\" y=\"2\" width=\"10\" height=\"18\" rx=\"2\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /><path d=\"M12 20v2\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /><circle cx=\"12\" cy=\"6\" r=\"2\" fill=\"currentColor\" stroke=\"none\" /><circle cx=\"12\" cy=\"11\" r=\"2\" fill=\"var(--ui-warning, currentColor)\" stroke=\"none\" /><circle cx=\"12\" cy=\"16\" r=\"2\" fill=\"currentColor\" stroke=\"none\" /></g>"
+    },
+    "traffic-light-go": {
+      "body": "<g fill=\"none\" stroke=\"currentColor\"><rect x=\"7\" y=\"2\" width=\"10\" height=\"18\" rx=\"2\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /><path d=\"M12 20v2\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /><circle cx=\"12\" cy=\"6\" r=\"2\" fill=\"currentColor\" stroke=\"none\" /><circle cx=\"12\" cy=\"11\" r=\"2\" fill=\"currentColor\" stroke=\"none\" /><circle cx=\"12\" cy=\"16\" r=\"2\" fill=\"var(--ui-success, currentColor)\" stroke=\"none\" /></g>"
+    },
+    "traffic-light-lit": {
+      "body": "<g fill=\"none\" stroke=\"currentColor\"><rect x=\"7\" y=\"2\" width=\"10\" height=\"18\" rx=\"2\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /><path d=\"M12 20v2\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /><circle cx=\"12\" cy=\"6\" r=\"2\" fill=\"var(--ui-error, currentColor)\" stroke=\"none\" /><circle cx=\"12\" cy=\"11\" r=\"2\" fill=\"var(--ui-warning, currentColor)\" stroke=\"none\" /><circle cx=\"12\" cy=\"16\" r=\"2\" fill=\"var(--ui-success, currentColor)\" stroke=\"none\" /></g>"
+    },
+    "traffic-light-stop": {
+      "body": "<g fill=\"none\" stroke=\"currentColor\"><rect x=\"7\" y=\"2\" width=\"10\" height=\"18\" rx=\"2\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /><path d=\"M12 20v2\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /><circle cx=\"12\" cy=\"6\" r=\"2\" fill=\"var(--ui-error, currentColor)\" stroke=\"none\" /><circle cx=\"12\" cy=\"11\" r=\"2\" fill=\"currentColor\" stroke=\"none\" /><circle cx=\"12\" cy=\"16\" r=\"2\" fill=\"currentColor\" stroke=\"none\" /></g>"
+    },
+    "traffic-light": {
+      "body": "<g fill=\"none\" stroke=\"currentColor\"><rect x=\"7\" y=\"2\" width=\"10\" height=\"18\" rx=\"2\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /><path d=\"M12 20v2\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /><circle cx=\"12\" cy=\"6\" r=\"2\" fill=\"currentColor\" stroke=\"none\" /><circle cx=\"12\" cy=\"11\" r=\"2\" fill=\"currentColor\" stroke=\"none\" /><circle cx=\"12\" cy=\"16\" r=\"2\" fill=\"currentColor\" stroke=\"none\" /></g>"
+    }
+  },
+  "width": 24,
+  "height": 24
+};
+
+/** Every icon in the Forest set, e.g. `bike-off` → `i-forest-bike-off`. */
+export const FOREST_ICON_NAMES: readonly string[] = ["bike-asterisk","bike-down","bike-off","bike-up","bike-x","bike","mark-fill","mark","parking","star-fill","star","traffic-light-caution","traffic-light-go","traffic-light-lit","traffic-light-stop","traffic-light"];
+
+/** Every Lucide icon name, for the docs catalogue search. Names only — no path data. */
+export const LUCIDE_ICON_NAMES: readonly string[] = ["a-arrow-down","a-arrow-up","a-large-small","accessibility","activity","air-vent","airplay","alarm-clock","alarm-clock-check","alarm-clock-minus","alarm-clock-off","alarm-clock-plus","alarm-smoke","album","align-center","align-center-horizontal","align-center-vertical","align-end-horizontal","align-end-vertical","align-horizontal-distribute-center","align-horizontal-distribute-end","align-horizontal-distribute-start","align-horizontal-justify-center","align-horizontal-justify-end","align-horizontal-justify-start","align-horizontal-space-around","align-horizontal-space-between","align-justify","align-left","align-right","align-start-horizontal","align-start-vertical","align-vertical-distribute-center","align-vertical-distribute-end","align-vertical-distribute-start","align-vertical-justify-center","align-vertical-justify-end","align-vertical-justify-start","align-vertical-space-around","align-vertical-space-between","ambulance","ampersand","ampersands","amphora","anchor","angry","annoyed","antenna","anvil","aperture","app-window","app-window-mac","apple","archive","archive-restore","archive-x","area-chart","armchair","arrow-big-down","arrow-big-down-dash","arrow-big-left","arrow-big-left-dash","arrow-big-right","arrow-big-right-dash","arrow-big-up","arrow-big-up-dash","arrow-down","arrow-down-0-1","arrow-down-1-0","arrow-down-a-z","arrow-down-from-line","arrow-down-left","arrow-down-narrow-wide","arrow-down-right","arrow-down-to-dot","arrow-down-to-line","arrow-down-up","arrow-down-wide-narrow","arrow-down-z-a","arrow-left","arrow-left-from-line","arrow-left-right","arrow-left-to-line","arrow-right","arrow-right-from-line","arrow-right-left","arrow-right-to-line","arrow-up","arrow-up-0-1","arrow-up-1-0","arrow-up-a-z","arrow-up-down","arrow-up-from-dot","arrow-up-from-line","arrow-up-left","arrow-up-narrow-wide","arrow-up-right","arrow-up-to-line","arrow-up-wide-narrow","arrow-up-z-a","arrows-up-from-line","asterisk","astroid","at-sign","atom","audio-lines","audio-waveform","award","axe","axis-3d","baby","backpack","badge","badge-alert","badge-cent","badge-check","badge-dollar-sign","badge-euro","badge-indian-rupee","badge-info","badge-japanese-yen","badge-minus","badge-percent","badge-plus","badge-pound-sterling","badge-question-mark","badge-russian-ruble","badge-swiss-franc","badge-turkish-lira","badge-x","baggage-claim","balloon","ban","banana","bandage","banknote","banknote-arrow-down","banknote-arrow-up","banknote-x","bar-chart-3","bar-chart-4","bar-chart-big","bar-chart-horizontal","bar-chart-horizontal-big","barcode","barrel","baseline","bath","battery","battery-charging","battery-full","battery-low","battery-medium","battery-plus","battery-warning","beaker","bean","bean-off","bed","bed-double","bed-single","beef","beef-off","beer","beer-off","bell","bell-check","bell-dot","bell-electric","bell-minus","bell-off","bell-plus","bell-ring","between-horizontal-end","between-horizontal-start","between-vertical-end","between-vertical-start","biceps-flexed","bike","binary","binoculars","biohazard","bird","birdhouse","bitcoin","blend","blender","blinds","blocks","bluetooth","bluetooth-connected","bluetooth-off","bluetooth-searching","bold","bolt","bomb","bone","book","book-a","book-alert","book-audio","book-check","book-copy","book-dashed","book-down","book-headphones","book-heart","book-image","book-key","book-lock","book-marked","book-minus","book-open","book-open-check","book-open-text","book-plus","book-search","book-text","book-type","book-up","book-up-2","book-user","book-x","bookmark","bookmark-check","bookmark-minus","bookmark-off","bookmark-plus","bookmark-x","boom-box","bot","bot-message-square","bot-off","bottle-wine","bow-arrow","box","boxes","braces","brackets","brain","brain-circuit","brain-cog","brick-wall","brick-wall-fire","brick-wall-shield","briefcase","briefcase-business","briefcase-conveyor-belt","briefcase-medical","bring-to-front","broccoli","brush","brush-cleaning","bubbles","bug","bug-off","bug-play","building","building-2","bus","bus-front","cable","cable-car","cake","cake-slice","calculator","calendar","calendar-1","calendar-arrow-down","calendar-arrow-up","calendar-check","calendar-check-2","calendar-clock","calendar-cog","calendar-days","calendar-fold","calendar-heart","calendar-minus","calendar-minus-2","calendar-off","calendar-plus","calendar-plus-2","calendar-range","calendar-search","calendar-sync","calendar-x","calendar-x-2","calendars","camera","camera-off","candlestick-chart","candy","candy-cane","candy-off","cannabis","cannabis-off","captions","captions-off","car","car-front","car-taxi-front","caravan","card-sim","carrot","case-lower","case-sensitive","case-upper","cassette-tape","cast","castle","cat","cctv","cctv-off","chart-area","chart-bar","chart-bar-big","chart-bar-decreasing","chart-bar-increasing","chart-bar-stacked","chart-candlestick","chart-column","chart-column-big","chart-column-decreasing","chart-column-increasing","chart-column-stacked","chart-gantt","chart-line","chart-network","chart-no-axes-column","chart-no-axes-column-decreasing","chart-no-axes-column-increasing","chart-no-axes-combined","chart-no-axes-gantt","chart-pie","chart-scatter","chart-spline","check","check-check","check-line","chef-hat","cherry","chess-bishop","chess-king","chess-knight","chess-pawn","chess-queen","chess-rook","chevron-down","chevron-first","chevron-last","chevron-left","chevron-right","chevron-up","chevrons-down","chevrons-down-up","chevrons-left","chevrons-left-right","chevrons-left-right-ellipsis","chevrons-right","chevrons-right-left","chevrons-up","chevrons-up-down","chrome","chromium","church","cigarette","cigarette-off","circle","circle-alert","circle-arrow-down","circle-arrow-left","circle-arrow-out-down-left","circle-arrow-out-down-right","circle-arrow-out-up-left","circle-arrow-out-up-right","circle-arrow-right","circle-arrow-up","circle-check","circle-check-big","circle-chevron-down","circle-chevron-left","circle-chevron-right","circle-chevron-up","circle-dashed","circle-divide","circle-dollar-sign","circle-dot","circle-dot-dashed","circle-ellipsis","circle-equal","circle-fading-arrow-up","circle-fading-plus","circle-gauge","circle-minus","circle-off","circle-parking","circle-parking-off","circle-pause","circle-percent","circle-pile","circle-play","circle-plus","circle-pound-sterling","circle-power","circle-question-mark","circle-slash","circle-slash-2","circle-small","circle-star","circle-stop","circle-user","circle-user-round","circle-x","circuit-board","citrus","clapperboard","clipboard","clipboard-check","clipboard-clock","clipboard-copy","clipboard-list","clipboard-minus","clipboard-paste","clipboard-pen","clipboard-pen-line","clipboard-plus","clipboard-type","clipboard-x","clock","clock-1","clock-10","clock-11","clock-12","clock-2","clock-3","clock-4","clock-5","clock-6","clock-7","clock-8","clock-9","clock-alert","clock-arrow-down","clock-arrow-up","clock-check","clock-fading","clock-plus","closed-caption","cloud","cloud-alert","cloud-backup","cloud-check","cloud-cog","cloud-download","cloud-drizzle","cloud-fog","cloud-hail","cloud-lightning","cloud-moon","cloud-moon-rain","cloud-off","cloud-rain","cloud-rain-wind","cloud-snow","cloud-sun","cloud-sun-rain","cloud-sync","cloud-upload","cloudy","clover","club","code","code-xml","codepen","codesandbox","coffee","cog","coins","columns-2","columns-3","columns-3-cog","columns-4","combine","command","compass","component","computer","concierge-bell","cone","construction","contact","contact-round","container","contrast","cookie","cooking-pot","copy","copy-check","copy-minus","copy-plus","copy-slash","copy-x","copyleft","copyright","corner-down-left","corner-down-right","corner-left-down","corner-left-up","corner-right-down","corner-right-up","corner-up-left","corner-up-right","cpu","creative-commons","credit-card","croissant","crop","cross","crosshair","crown","cuboid","cup-soda","currency","cylinder","dam","database","database-backup","database-search","database-zap","decimals-arrow-left","decimals-arrow-right","delete","dessert","diameter","diamond","diamond-minus","diamond-percent","diamond-plus","dice-1","dice-2","dice-3","dice-4","dice-5","dice-6","dices","diff","disc","disc-2","disc-3","disc-album","divide","dna","dna-off","dock","dog","dollar-sign","donut","door-closed","door-closed-locked","door-open","dot","download","drafting-compass","drama","dribbble","drill","drone","droplet","droplet-off","droplets","drum","drumstick","dumbbell","ear","ear-off","earth","earth-lock","eclipse","egg","egg-fried","egg-off","ellipse","ellipsis","ellipsis-vertical","equal","equal-approximately","equal-not","eraser","ethernet-port","euro","ev-charger","expand","external-link","eye","eye-closed","eye-off","facebook","factory","fan","fast-forward","feather","fence","ferris-wheel","figma","file","file-archive","file-audio","file-audio-2","file-axis-3d","file-badge","file-badge-2","file-box","file-braces","file-braces-corner","file-chart-column","file-chart-column-increasing","file-chart-line","file-chart-pie","file-check","file-check-2","file-check-corner","file-clock","file-code","file-code-2","file-code-corner","file-cog","file-diff","file-digit","file-down","file-exclamation-point","file-headphone","file-heart","file-image","file-input","file-json","file-json-2","file-key","file-key-2","file-lock","file-lock-2","file-minus","file-minus-2","file-minus-corner","file-music","file-output","file-pen","file-pen-line","file-pie-chart","file-play","file-plus","file-plus-2","file-plus-corner","file-question-mark","file-scan","file-search","file-search-2","file-search-corner","file-signal","file-sliders","file-spreadsheet","file-stack","file-symlink","file-terminal","file-text","file-type","file-type-2","file-type-corner","file-up","file-user","file-video-camera","file-volume","file-volume-2","file-warning","file-x","file-x-2","file-x-corner","files","film","filter","filter-x","fingerprint-pattern","fire-extinguisher","fish","fish-off","fish-symbol","fishing-hook","fishing-rod","flag","flag-off","flag-triangle-left","flag-triangle-right","flame","flame-kindling","flashlight","flashlight-off","flask-conical","flask-conical-off","flask-round","flip-horizontal-2","flip-vertical-2","flower","flower-2","focus","fold-horizontal","fold-vertical","folder","folder-archive","folder-bookmark","folder-check","folder-clock","folder-closed","folder-code","folder-cog","folder-dot","folder-down","folder-git","folder-git-2","folder-heart","folder-input","folder-kanban","folder-key","folder-lock","folder-minus","folder-open","folder-open-dot","folder-output","folder-pen","folder-plus","folder-root","folder-search","folder-search-2","folder-symlink","folder-sync","folder-tree","folder-up","folder-x","folders","footprints","forklift","form","forward","frame","framer","frown","fuel","fullscreen","funnel","funnel-plus","funnel-x","gallery-horizontal","gallery-horizontal-end","gallery-thumbnails","gallery-vertical","gallery-vertical-end","gamepad","gamepad-2","gamepad-directional","gauge","gavel","gem","georgian-lari","ghost","gift","git-branch","git-branch-minus","git-branch-plus","git-commit-horizontal","git-commit-vertical","git-compare","git-compare-arrows","git-fork","git-graph","git-merge","git-merge-conflict","git-pull-request","git-pull-request-arrow","git-pull-request-closed","git-pull-request-create","git-pull-request-create-arrow","git-pull-request-draft","github","gitlab","glass-water","glasses","globe","globe-check","globe-lock","globe-off","globe-x","goal","gpu","graduation-cap","grape","grid-2x2","grid-2x2-check","grid-2x2-plus","grid-2x2-x","grid-3x2","grid-3x3","grip","grip-horizontal","grip-vertical","group","guitar","ham","hamburger","hammer","hand","hand-coins","hand-fist","hand-grab","hand-heart","hand-helping","hand-metal","hand-platter","handbag","handshake","hard-drive","hard-drive-download","hard-drive-upload","hard-hat","hash","hat-glasses","haze","hd","hdmi-port","heading","heading-1","heading-2","heading-3","heading-4","heading-5","heading-6","headphone-off","headphones","headset","heart","heart-crack","heart-handshake","heart-minus","heart-off","heart-plus","heart-pulse","heart-x","heater","helicopter","hexagon","highlighter","history","hop","hop-off","hospital","hotel","hourglass","house","house-heart","house-plug","house-plus","house-wifi","ice-cream-bowl","ice-cream-cone","id-card","id-card-lanyard","image","image-down","image-minus","image-off","image-play","image-plus","image-up","image-upscale","images","import","inbox","indent-decrease","indent-increase","indian-rupee","infinity","info","inspection-panel","instagram","italic","iteration-ccw","iteration-cw","japanese-yen","joystick","kanban","kayak","key","key-round","key-square","keyboard","keyboard-music","keyboard-off","lamp","lamp-ceiling","lamp-desk","lamp-floor","lamp-wall-down","lamp-wall-up","land-plot","landmark","languages","laptop","laptop-minimal","laptop-minimal-check","lasso","lasso-select","laugh","layers","layers-2","layers-3","layers-minus","layers-plus","layout-dashboard","layout-grid","layout-list","layout-panel-left","layout-panel-top","layout-template","leaf","leafy-green","lectern","lens-concave","lens-convex","letter-text","library","library-big","life-buoy","ligature","lightbulb","lightbulb-off","line-chart","line-dot-right-horizontal","line-squiggle","line-style","link","link-2","link-2-off","linkedin","list","list-check","list-checks","list-chevrons-down-up","list-chevrons-up-down","list-collapse","list-end","list-filter","list-filter-plus","list-indent-decrease","list-indent-increase","list-minus","list-music","list-ordered","list-plus","list-restart","list-start","list-todo","list-tree","list-video","list-x","loader","loader-circle","loader-pinwheel","locate","locate-fixed","locate-off","lock","lock-keyhole","lock-keyhole-open","lock-open","log-in","log-out","logs","lollipop","luggage","magnet","mail","mail-check","mail-minus","mail-open","mail-plus","mail-question-mark","mail-search","mail-warning","mail-x","mailbox","mails","map","map-minus","map-pin","map-pin-check","map-pin-check-inside","map-pin-house","map-pin-minus","map-pin-minus-inside","map-pin-off","map-pin-pen","map-pin-plus","map-pin-plus-inside","map-pin-search","map-pin-x","map-pin-x-inside","map-pinned","map-plus","mars","mars-stroke","martini","maximize","maximize-2","medal","megaphone","megaphone-off","meh","memory-stick","menu","merge","message-circle","message-circle-check","message-circle-code","message-circle-dashed","message-circle-heart","message-circle-more","message-circle-off","message-circle-plus","message-circle-question-mark","message-circle-reply","message-circle-warning","message-circle-x","message-square","message-square-check","message-square-code","message-square-dashed","message-square-diff","message-square-dot","message-square-heart","message-square-lock","message-square-more","message-square-off","message-square-plus","message-square-quote","message-square-reply","message-square-share","message-square-text","message-square-warning","message-square-x","messages-square","metronome","mic","mic-off","mic-vocal","microchip","microscope","microwave","milestone","milk","milk-off","minimize","minimize-2","minus","mirror-rectangular","mirror-round","monitor","monitor-check","monitor-cloud","monitor-cog","monitor-dot","monitor-down","monitor-off","monitor-pause","monitor-play","monitor-smartphone","monitor-speaker","monitor-stop","monitor-up","monitor-x","moon","moon-star","motorbike","mountain","mountain-snow","mouse","mouse-left","mouse-off","mouse-pointer","mouse-pointer-2","mouse-pointer-2-off","mouse-pointer-ban","mouse-pointer-click","mouse-right","move","move-3d","move-diagonal","move-diagonal-2","move-down","move-down-left","move-down-right","move-horizontal","move-left","move-right","move-up","move-up-left","move-up-right","move-vertical","music","music-2","music-3","music-4","navigation","navigation-2","navigation-2-off","navigation-off","network","newspaper","nfc","non-binary","notebook","notebook-pen","notebook-tabs","notebook-text","notepad-text","notepad-text-dashed","nut","nut-off","octagon","octagon-alert","octagon-minus","octagon-pause","octagon-x","omega","option","orbit","origami","package","package-2","package-check","package-minus","package-open","package-plus","package-search","package-x","paint-bucket","paint-roller","paintbrush","paintbrush-vertical","palette","panda","panel-bottom","panel-bottom-close","panel-bottom-dashed","panel-bottom-open","panel-left","panel-left-close","panel-left-dashed","panel-left-open","panel-left-right-dashed","panel-right","panel-right-close","panel-right-dashed","panel-right-open","panel-top","panel-top-bottom-dashed","panel-top-close","panel-top-dashed","panel-top-open","panels-left-bottom","panels-right-bottom","panels-top-left","paperclip","parasol","parentheses","parking-meter","party-popper","pause","paw-print","pc-case","pen","pen-line","pen-off","pen-tool","pencil","pencil-line","pencil-off","pencil-ruler","pentagon","percent","person-standing","philippine-peso","phone","phone-call","phone-forwarded","phone-incoming","phone-missed","phone-off","phone-outgoing","pi","piano","pickaxe","picture-in-picture","picture-in-picture-2","pie-chart","piggy-bank","pilcrow","pilcrow-left","pilcrow-right","pill","pill-bottle","pin","pin-off","pipette","pizza","plane","plane-landing","plane-takeoff","play","play-off","plug","plug-2","plug-zap","plus","pocket","pocket-knife","podcast","pointer","pointer-off","popcorn","popsicle","pound-sterling","power","power-off","presentation","printer","printer-check","printer-x","projector","proportions","puzzle","pyramid","qr-code","quote","rabbit","radar","radiation","radical","radio","radio-off","radio-receiver","radio-tower","radius","rail-symbol","rainbow","rat","ratio","receipt","receipt-cent","receipt-euro","receipt-indian-rupee","receipt-japanese-yen","receipt-pound-sterling","receipt-russian-ruble","receipt-swiss-franc","receipt-text","receipt-turkish-lira","rectangle-circle","rectangle-ellipsis","rectangle-goggles","rectangle-horizontal","rectangle-vertical","recycle","redo","redo-2","redo-dot","refresh-ccw","refresh-ccw-dot","refresh-cw","refresh-cw-off","refrigerator","regex","remove-formatting","repeat","repeat-1","repeat-2","repeat-off","replace","replace-all","reply","reply-all","rewind","ribbon","road","rocket","rocking-chair","roller-coaster","rose","rotate-3d","rotate-ccw","rotate-ccw-key","rotate-ccw-square","rotate-cw","rotate-cw-square","route","route-off","router","rows-2","rows-3","rows-4","rss","ruler","ruler-dimension-line","russian-ruble","sailboat","salad","sandwich","satellite","satellite-dish","saudi-riyal","save","save-all","save-off","scale","scale-3d","scaling","scan","scan-barcode","scan-eye","scan-face","scan-heart","scan-line","scan-qr-code","scan-search","scan-text","scatter-chart","school","scissors","scissors-line-dashed","scooter","screen-share","screen-share-off","scroll","scroll-text","search","search-alert","search-check","search-code","search-large","search-slash","search-x","section","send","send-horizontal","send-to-back","separator-horizontal","separator-vertical","server","server-cog","server-crash","server-off","settings","settings-2","shapes","share","share-2","sheet","shell","shelving-unit","shield","shield-alert","shield-ban","shield-check","shield-cog","shield-cog-corner","shield-ellipsis","shield-half","shield-minus","shield-off","shield-plus","shield-question-mark","shield-user","shield-x","ship","ship-wheel","shirt","shopping-bag","shopping-basket","shopping-cart","shovel","shower-head","shredder","shrimp","shrink","shrub","shuffle","sigma","signal","signal-high","signal-low","signal-medium","signal-zero","signature","signpost","signpost-big","siren","skip-back","skip-forward","skull","slack","slash","slice","sliders-horizontal","sliders-vertical","smartphone","smartphone-charging","smartphone-nfc","smile","smile-plus","snail","snowflake","soap-dispenser-droplet","sofa","solar-panel","soup","space","spade","sparkle","sparkles","speaker","speech","spell-check","spell-check-2","spline","spline-pointer","split","spool","sport-shoe","spotlight","spray-can","sprout","square","square-activity","square-arrow-down","square-arrow-down-left","square-arrow-down-right","square-arrow-left","square-arrow-out-down-left","square-arrow-out-down-right","square-arrow-out-up-left","square-arrow-out-up-right","square-arrow-right","square-arrow-right-enter","square-arrow-right-exit","square-arrow-up","square-arrow-up-left","square-arrow-up-right","square-asterisk","square-bottom-dashed-scissors","square-centerline-dashed-horizontal","square-centerline-dashed-vertical","square-chart-gantt","square-check","square-check-big","square-chevron-down","square-chevron-left","square-chevron-right","square-chevron-up","square-code","square-dashed","square-dashed-bottom","square-dashed-bottom-code","square-dashed-kanban","square-dashed-mouse-pointer","square-dashed-text","square-dashed-top-solid","square-divide","square-dot","square-equal","square-function","square-kanban","square-library","square-m","square-menu","square-minus","square-mouse-pointer","square-parking","square-parking-off","square-pause","square-pen","square-percent","square-pi","square-pilcrow","square-play","square-plus","square-power","square-radical","square-round-corner","square-scissors","square-sigma","square-slash","square-split-horizontal","square-split-vertical","square-square","square-stack","square-star","square-stop","square-terminal","square-user","square-user-round","square-x","squares-exclude","squares-intersect","squares-subtract","squares-unite","squircle","squircle-dashed","squirrel","stamp","star","star-half","star-off","step-back","step-forward","stethoscope","sticker","sticky-note","sticky-note-check","sticky-note-minus","sticky-note-off","sticky-note-plus","sticky-note-x","sticky-notes","stone","store","stretch-horizontal","stretch-vertical","strikethrough","subscript","sun","sun-dim","sun-medium","sun-moon","sun-snow","sunrise","sunset","superscript","swatch-book","swiss-franc","switch-camera","sword","swords","syringe","table","table-2","table-cells-merge","table-cells-split","table-columns-split","table-of-contents","table-properties","table-rows-split","tablet","tablet-smartphone","tablets","tag","tags","tally-1","tally-2","tally-3","tally-4","tally-5","tangent","target","telescope","tent","tent-tree","terminal","test-tube","test-tube-diagonal","test-tubes","text","text-align-center","text-align-end","text-align-justify","text-align-start","text-cursor","text-cursor-input","text-initial","text-quote","text-search","text-wrap","theater","thermometer","thermometer-snowflake","thermometer-sun","thumbs-down","thumbs-up","ticket","ticket-check","ticket-minus","ticket-percent","ticket-plus","ticket-slash","ticket-x","tickets","tickets-plane","timeline","timer","timer-off","timer-reset","toggle-left","toggle-right","toilet","tool-case","toolbox","tornado","torus","touchpad","touchpad-off","towel-rack","tower-control","toy-brick","tractor","traffic-cone","train-front","train-front-tunnel","train-track","tram-front","transgender","trash","trash-2","tree-deciduous","tree-palm","tree-pine","trees","trello","trending-down","trending-up","trending-up-down","triangle","triangle-alert","triangle-dashed","triangle-right","trophy","truck","truck-electric","turkish-lira","turntable","turtle","tv","tv-minimal","tv-minimal-play","twitch","twitter","type","type-outline","umbrella","umbrella-off","underline","undo","undo-2","undo-dot","unfold-horizontal","unfold-vertical","ungroup","university","unlink","unlink-2","unplug","upload","usb","user","user-check","user-cog","user-key","user-lock","user-minus","user-pen","user-plus","user-round","user-round-check","user-round-cog","user-round-key","user-round-minus","user-round-pen","user-round-plus","user-round-search","user-round-x","user-search","user-star","user-x","users","users-round","utensils","utensils-crossed","utility-pole","van","variable","vault","vector-square","vegan","venetian-mask","venus","venus-and-mars","vibrate","vibrate-off","video","video-off","videotape","view","voicemail","volleyball","volume","volume-1","volume-2","volume-off","volume-x","vote","wallet","wallet-cards","wallet-minimal","wallpaper","wand","wand-sparkles","warehouse","washing-machine","watch","waves","waves-arrow-down","waves-arrow-up","waves-horizontal","waves-ladder","waves-vertical","waypoints","webcam","webhook","webhook-off","weight","weight-tilde","wheat","wheat-off","whole-word","wifi","wifi-cog","wifi-high","wifi-low","wifi-off","wifi-pen","wifi-sync","wifi-zero","wind","wind-arrow-down","wine","wine-off","workflow","worm","wrap-text","wrench","x","x-line-top","youtube","zap","zap-off","zodiac-aquarius","zodiac-aries","zodiac-cancer","zodiac-capricorn","zodiac-gemini","zodiac-leo","zodiac-libra","zodiac-ophiuchus","zodiac-pisces","zodiac-sagittarius","zodiac-scorpio","zodiac-taurus","zodiac-virgo","zoom-in","zoom-out"];

package/packages/ui/src/index.ts

@@ -0,0 +1,17 @@
+export { forestPreset, default, PRESET_STRUCTURAL_MARKERS } from './forest-preset';
+// The three exports below import from ./contexts/* directly rather than the ./contexts barrel: that
+// barrel also re-exports ForestContext.vue (an SFC), and this root barrel must stay SFC-free.
+// scripts/layer.ts imports this file under bun; bun does not error on a .vue import, it loads the SFC
+// as a plain string — so routing through ./contexts would degrade silently rather than throw.
+export { forestMobileTheme, forestMobileProps, forestMobileManifest } from './contexts/mobile-theme';
+export { forestMarketingTheme, forestMarketingProps, forestMarketingManifest } from './contexts/marketing-theme';
+export {
+  forestContexts,
+  CONTEXT_REGISTER_ROWS,
+  HOOK_CLASSES,
+  deriveChannels,
+  themeTokens,
+  stampedMarkers,
+  consumedMarkers,
+} from './contexts/contexts';
+export type { ContextManifest, ContextChannel, ForestContextName } from './contexts/contexts';

package/packages/ui/src/kpi/FKpi.vue

@@ -0,0 +1,253 @@
+<script setup lang="ts">
+// A KPI tile: one figure, what it is, and optionally how it has moved.
+//
+// NAMING. `value` is the tile's stable KEY — what a group's `modelValue` matches on. The number is
+// `metric`. `key` is reserved in Vue templates and `id` implies a DOM id, so the obvious spellings
+// were both taken.
+//
+// The tile is a UCard, so it inherits the card surface and moves when cards move. Inside a group it
+// registers itself, spans four subgrid rows, and may become a tab or a toggle.
+import { computed, inject, onBeforeUnmount, onMounted, useId, useSlots } from 'vue';
+import { kpiTheme, KPI_GROUP_KEY, type KpiSlot } from './kpi.theme';
+import { formatMetric, type KpiFormat } from './kpiFormat';
+import { resolveDelta, type KpiDelta, type KpiSentiment } from './kpiDelta';
+
+const props = withDefaults(
+  defineProps<{
+    label: string;
+    /** Stable key. Required when the tile sits in a selectable group. */
+    value?: string;
+    /** The number. Pre-formatted text goes through the `metric` slot instead. */
+    metric?: number | null;
+
+    format?: KpiFormat;
+    precision?: number;
+    locale?: string;
+    unit?: string;
+    noValue?: string;
+
+    /** Required for an aggregate ("last 7 days"); omit for an instantaneous reading. */
+    period?: string;
+    asOf?: Date | string;
+    /** Rendered, and wired to the value with aria-describedby. Never tooltip-only. */
+    caveat?: string;
+    /** Info tooltip. Ignored on a selectable tile, which may not hold interactive children. */
+    hint?: string;
+
+    /** Forces the figure's face. Unset lets the context's --fx-metric traits decide. */
+    face?: 'tabular' | 'display';
+
+    /**
+     * How the `visual` slot meets the card. `bleed` runs the graphic to the side and bottom edges —
+     * right for a sparkline, which is data and nothing else. `inset` keeps the card's padding and
+     * top-aligns, for a graphic carrying text such as FDistributionBar's legend. Ignored without a
+     * visual.
+     */
+    visualFit?: 'bleed' | 'inset';
+
+    sentiment?: KpiSentiment;
+    status?: 'ok' | 'warn' | 'critical';
+    emphasis?: 'value' | 'surface';
+    partial?: boolean;
+
+    delta?: KpiDelta;
+
+    to?: string;
+    linkTarget?: string;
+
+    state?: 'ok' | 'loading' | 'refreshing' | 'empty' | 'error';
+    reason?: 'no-data' | 'permission' | 'system' | 'not-configured';
+
+    ui?: Partial<Record<KpiSlot, string>>;
+  }>(),
+  {
+    sentiment: 'neutral',
+    status: 'ok',
+    emphasis: 'value',
+    state: 'ok',
+    noValue: '—',
+    // Bleed is what every visual did before there was a choice, so the default keeps sparkline
+    // tiles exactly as they were.
+    visualFit: 'bleed',
+  },
+);
+
+const slots = useSlots();
+const group = inject(KPI_GROUP_KEY, undefined);
+const uid = useId();
+const key = computed(() => props.value ?? `${uid}`);
+
+onMounted(() => {
+  if (import.meta.env.DEV && group?.selectable && !props.value)
+    console.warn(`[FKpi] "${props.label}" is in a selectable group and needs a \`value\` to be selectable.`);
+  group?.register(key.value);
+});
+onBeforeUnmount(() => group?.unregister(key.value));
+
+const selectable = computed(() => !!group?.selectable && !!props.value);
+const selected = computed(() => !!group?.isSelected(key.value));
+
+const format = computed(() => props.format ?? group?.format);
+const precision = computed(() => props.precision ?? group?.precision);
+
+const isLoading = computed(() => props.state === 'loading');
+const isBlank = computed(() => props.state === 'empty' || props.state === 'error');
+
+const REASON_COPY: Record<string, string> = {
+  'no-data': 'No data for this period',
+  permission: 'You do not have access to this metric',
+  system: 'Could not load this metric',
+  'not-configured': 'Not configured yet',
+};
+
+const metricText = computed(() =>
+  formatMetric(props.metric, {
+    format: format.value,
+    precision: precision.value,
+    locale: props.locale,
+    noValue: props.noValue,
+  }),
+);
+
+const delta = computed(() =>
+  resolveDelta(props.delta, {
+    sentiment: props.sentiment,
+    locale: props.locale,
+    precision: precision.value,
+  }),
+);
+
+// Period first, then the baseline it was measured against — "last 7 days · vs previous 7 days".
+// The other order reads as one repeated phrase.
+const captionParts = computed(() =>
+  [
+    props.period,
+    props.delta ? `vs ${props.delta.comparisonLabel}` : undefined,
+    props.partial ? 'Period in progress' : undefined,
+  ].filter(Boolean),
+);
+
+const asOfText = computed(() => {
+  if (!props.asOf) return undefined;
+  const d = props.asOf instanceof Date ? props.asOf : new Date(props.asOf);
+  return Number.isNaN(d.getTime())
+    ? undefined
+    : `Updated ${new Intl.DateTimeFormat(props.locale ?? 'en-GB', { timeStyle: 'short' }).format(d)}`;
+});
+
+const caveatId = computed(() => (props.caveat ? `${uid}-caveat` : undefined));
+
+const styles = computed(() =>
+  kpiTheme({
+    naked: group?.naked ?? false,
+    aligned: !!group,
+    selectable: selectable.value,
+    selected: selected.value,
+    hovered: selectable.value && !selected.value,
+    // Only when there is a visual: `bleed` zeroes the tile's bottom padding, which a tile with
+    // nothing in that row must keep.
+    visualFit: slots.visual ? props.visualFit : undefined,
+    intent: delta.value?.intent,
+    face: props.face,
+    status: props.status,
+    emphasis: props.emphasis,
+    dimmed: isBlank.value,
+  }),
+);
+
+const cls = (slot: KpiSlot) => styles.value[slot]({ class: props.ui?.[slot] });
+
+const onKeydown = (e: KeyboardEvent) => {
+  if (!selectable.value || !group) return;
+  if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+    e.preventDefault();
+    group.focusStep(key.value, 1);
+  } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+    e.preventDefault();
+    group.focusStep(key.value, -1);
+  }
+};
+</script>
+
+<template>
+  <UCard
+    :as="selectable ? 'button' : undefined"
+    :to="selectable ? undefined : to"
+    :target="selectable ? undefined : linkTarget"
+    :type="selectable ? 'button' : undefined"
+    :data-kpi="key"
+    :role="selectable && !group?.multiple ? 'tab' : undefined"
+    :aria-selected="selectable && !group?.multiple ? selected : undefined"
+    :aria-pressed="selectable && group?.multiple ? selected : undefined"
+    :aria-controls="selectable ? group?.controls : undefined"
+    :tabindex="selectable ? (group?.isFocusable(key) ? 0 : -1) : undefined"
+    :class="cls('root')"
+    :ui="{ body: 'contents' }"
+    @click="selectable && group?.select(key)"
+    @keydown="onKeydown"
+  >
+    <div :class="cls('header')">
+      <slot name="leading" />
+      <dt :class="cls('label')">
+        <slot name="label">{{ label }}</slot>
+      </dt>
+      <span v-if="hint && !selectable" :class="cls('hint')">
+        <UTooltip :text="hint">
+          <UIcon name="i-lucide-info" class="size-3.5" />
+        </UTooltip>
+      </span>
+    </div>
+
+    <dd :class="cls('body')">
+      <USkeleton v-if="isLoading" class="h-8 w-24" aria-hidden="true" />
+      <span v-else-if="isBlank" :class="cls('metric')">{{ noValue }}</span>
+      <template v-else>
+        <span v-if="$slots.prefix" :class="cls('prefix')"><slot name="prefix" /></span>
+        <span :class="cls('metric')" :aria-describedby="caveatId">
+          <slot name="metric">{{ metricText }}</slot>
+        </span>
+        <span v-if="unit || $slots.suffix" :class="cls('suffix')">
+          <slot name="suffix">{{ unit }}</slot>
+        </span>
+      </template>
+
+      <slot name="delta">
+        <!-- Not a UBadge: a filled chip reads as a second object beside the figure, and shrinking
+             it out of the way costs its legibility (xs resolves to 8px type). Bare text sizes off
+             the figure through the same container query. The arrow is aria-hidden — direction and
+             baseline are stated in words by the visually hidden sentence below. -->
+        <span v-if="delta && !delta.hidden && !isLoading && !isBlank" :class="cls('delta')">
+          <UIcon
+            :name="
+              delta.direction === 'flat'
+                ? 'i-lucide-minus'
+                : delta.direction === 'up'
+                  ? 'i-lucide-trending-up'
+                  : 'i-lucide-trending-down'
+            "
+            :class="cls('deltaIcon')"
+            aria-hidden="true"
+          />
+          {{ delta.text }}
+        </span>
+      </slot>
+      <span v-if="delta" class="sr-only">{{ delta.sentence }}</span>
+    </dd>
+
+    <p :class="cls('caption')">
+      <slot name="caption">
+        <span v-if="isBlank && reason">{{ REASON_COPY[reason] }}</span>
+        <span v-else>{{ captionParts.join(' · ') }}</span>
+      </slot>
+      <span v-if="asOfText" class="ms-1">{{ asOfText }}</span>
+      <span v-if="caveat" :id="caveatId" class="ms-1">{{ caveat }}</span>
+    </p>
+
+    <div v-if="$slots.visual" :class="cls('visual')"><slot name="visual" /></div>
+    <slot name="insight" />
+    <div v-if="$slots.links || $slots.footer" :class="cls('footer')">
+      <slot name="links" />
+      <slot name="footer" />
+    </div>
+  </UCard>
+</template>

package/packages/ui/src/kpi/FKpiGroup.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+// A row of KPI tiles.
+//
+// The row is a four-row grid and each tile spans all four with grid-template-rows: subgrid, so
+// labels, values, captions and visuals align across the row however long any one label runs.
+// Without it, a two-line label pushes its own value down and nothing lines up.
+//
+// Selection: single mode is a tablist with manual activation, pointing at the chart it controls;
+// multiple mode is a set of aria-pressed toggles, because more than one selected tile is not a tab
+// row. One live region for the whole row — a per-tile region turns a refresh into a chorus.
+import { computed, provide, reactive, ref, watch } from 'vue';
+import { KPI_GROUP_KEY, type KpiGroupContext } from './kpi.theme';
+import type { KpiFormat } from './kpiFormat';
+import {
+  createKpiRegistry,
+  isSelected as isSelectedIn,
+  nextKey,
+  resolveInitial,
+  toggleSelection,
+} from './kpiGroupState';
+
+const props = withDefaults(
+  defineProps<{
+    orientation?: 'horizontal' | 'vertical';
+    /** auto-fit floor for the columns. */
+    min?: string;
+    /** Maximum columns. A wallboard fits eleven tiles across, which nobody wants. */
+    columns?: number;
+    divided?: boolean;
+    /**
+     * Drops the divided row's own outer border and radius, so it can sit flush at the top of a card
+     * that already draws them. The row keeps the hairlines between tiles and the one along its
+     * bottom edge, which is the edge whatever it drives hangs off.
+     */
+    flush?: boolean;
+    format?: KpiFormat;
+    precision?: number;
+    selectable?: boolean;
+    multiple?: boolean;
+    modelValue?: string | string[];
+    defaultValue?: string;
+    /** id of the chart container the row drives. */
+    controls?: string;
+    announce?: 'off' | 'polite';
+    label?: string;
+  }>(),
+  {
+    orientation: 'horizontal',
+    min: '10rem',
+    announce: 'off',
+  },
+);
+
+const emit = defineEmits<{ 'update:modelValue': [value: string | string[]] }>();
+
+const registry = createKpiRegistry();
+const keys = ref<string[]>([]);
+const focused = ref<string | undefined>(undefined);
+
+const selection = computed(() => resolveInitial(keys.value, props.modelValue, props.defaultValue));
+
+watch(keys, (list) => {
+  if (!props.selectable || !list.length) return;
+  const resolved = resolveInitial(list, props.modelValue, props.defaultValue);
+  if (resolved !== undefined && resolved !== props.modelValue) emit('update:modelValue', resolved);
+  if (focused.value === undefined || !list.includes(focused.value)) focused.value = list[0];
+});
+
+const context = reactive({
+  register(key: string) {
+    registry.register(key);
+    keys.value = registry.keys();
+  },
+  unregister(key: string) {
+    registry.unregister(key);
+    keys.value = registry.keys();
+  },
+  select(key: string) {
+    focused.value = key;
+    emit('update:modelValue', toggleSelection(props.modelValue, key, !!props.multiple));
+  },
+  focusStep(key: string, step: 1 | -1) {
+    const target = nextKey(keys.value, key, step);
+    if (!target) return;
+    focused.value = target;
+    document.querySelector<HTMLElement>(`[data-kpi="${CSS.escape(target)}"]`)?.focus();
+  },
+  // Gated on `selectable`: resolveInitial falls back to the first tile so a selectable row is never
+  // empty, and without this gate that fallback paints the selected treatment on the first tile of
+  // every plain row, where selection means nothing.
+  isSelected: (key: string) => !!props.selectable && isSelectedIn(selection.value, key),
+  isFocusable: (key: string) => (focused.value ?? keys.value[0]) === key,
+  get selectable() {
+    return !!props.selectable;
+  },
+  get multiple() {
+    return !!props.multiple;
+  },
+  get controls() {
+    return props.controls;
+  },
+  get format() {
+    return props.format;
+  },
+  get precision() {
+    return props.precision;
+  },
+  get naked() {
+    return !!props.divided;
+  },
+}) as KpiGroupContext;
+
+provide(KPI_GROUP_KEY, context);
+
+const gridStyle = computed(() =>
+  props.orientation === 'vertical'
+    ? { gridTemplateColumns: 'minmax(0, 1fr)' }
+    : {
+        gridTemplateColumns: `repeat(auto-fit, minmax(${props.min}, 1fr))`,
+        ...(props.columns ? { maxWidth: `calc(${props.columns} * 20rem)` } : {}),
+      },
+);
+</script>
+
+<template>
+  <div>
+    <!-- Four content-sized rows. Not 1fr on the last one: the group is sized by its content, so 1fr
+         resolves to whatever is left over — nothing — and a visual placed in that row overflows onto
+         the caption above it. -->
+    <div
+      :role="selectable && !multiple ? 'tablist' : selectable ? 'group' : undefined"
+      :aria-label="label"
+      :aria-orientation="selectable && !multiple ? orientation : undefined"
+      class="grid grid-rows-[auto_auto_auto_auto] items-stretch"
+      :class="[
+        divided ? 'gap-px bg-[var(--ui-border)]' : 'gap-4',
+        // Ring outset, not inset: `divided` rules are this element's background through 1px gaps,
+        // so the tiles sit flush to its border box and an inset stroke lands on them.
+        divided && !flush && 'overflow-hidden rounded-lg ring-1 ring-default',
+        divided && flush && 'border-b border-default',
+      ]"
+      :style="gridStyle"
+    >
+      <!-- The dl is display:contents so the tiles join the grid directly, which also means it is
+           the group's ONLY element child — a `divide-x` on the grid would target the dl and never
+           reach a tile. The hairlines are the grid's own 1px gaps showing the container's colour
+           through, which is the one treatment that stays correct when the row wraps: a `divide-*`
+           rule would draw a stray edge on the first tile of every wrapped row.
+
+           That colour is --ui-border, not bg-accented: these gaps read as the same rules as the
+           ring around the row, and accented sits several steps lighter, so the separators inside
+           the group came out brighter than the border enclosing them. -->
+      <dl class="contents">
+        <slot />
+      </dl>
+    </div>
+    <div v-if="announce === 'polite'" class="sr-only" role="status" aria-live="polite">
+      <slot name="announcement" />
+    </div>
+  </div>
+</template>