@humanforest/nuxt-layer 0.1.0

package/LICENSE

@@ -0,0 +1,67 @@
+Forest Design System — Licence
+Copyright (c) 2026 HumanForest Ltd. All rights reserved.
+
+This software is published openly so that people building Forest products can install it
+without access to its source repository. It is not open-source software.
+
+
+1. GRANT
+
+You may install, use, copy and modify this software, and incorporate it into applications,
+prototypes, documents and presentations, for the purpose of building or operating Forest
+products, services and communications.
+
+This grant is free of charge and requires no separate agreement. It runs to anyone who
+obtains the software from a public registry.
+
+
+2. RESERVED
+
+All rights not granted above are reserved. In particular, you may not:
+
+  (a) redistribute this software, modified or unmodified, as a design system, component
+      library, template or theme of your own;
+
+  (b) use the HumanForest and Forest names, logos, wordmarks, sub-brand marks or any
+      confusingly similar mark. Nothing here grants any trademark right. The brand marks
+      included in these packages are provided to render Forest's own products correctly,
+      not as artwork you may adopt;
+
+  (c) represent your product as being made, endorsed or approved by HumanForest.
+
+
+3. THIRD-PARTY MATERIAL
+
+Parts of these packages are not HumanForest's to license, and the grant in section 1 does
+not extend to them. Each keeps its own terms:
+
+  TYPEFACES — Mohr and GT Haptik are licensed to HumanForest by their foundries and are NOT
+  sublicensed to you. No font binary is included in any published package. The stylesheets
+  reference https://assets.forest.bike/fonts/, which serves them to those entitled to use
+  them. If you are not covered by Forest's licences, substitute your own faces. JetBrains
+  Mono is licensed under the SIL Open Font License 1.1 and may be used under those terms.
+
+  GLYPH OUTLINES — packages/tokens ships `glyphs/glyphs.json`, letterforms of the above
+  typefaces outlined as vector paths so sub-brand lockups can be composed at runtime. It is
+  covered by the same foundry terms as the typefaces themselves, not by section 1.
+
+  DEVICE ARTWORK — packages/frames ships device renders from Wikimedia Commons under the
+  Creative Commons Attribution-ShareAlike 4.0 International licence
+  (https://creativecommons.org/licenses/by-sa/4.0/). They are unmodified. Attribution is a
+  condition of that licence: see ATTRIBUTION.md in that package, and keep it with the art
+  wherever the art travels. Works derived from the artwork must themselves be CC BY-SA 4.0.
+
+  DEPENDENCIES — third-party packages installed alongside these keep their own licences.
+
+
+4. NO WARRANTY
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
+PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE
+FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+DEALINGS IN THE SOFTWARE.
+
+
+Questions about use beyond this grant: design@forest.bike

package/README.md

@@ -0,0 +1,208 @@
+# @humanforest/nuxt-layer
+
+Forest design system as a [Nuxt layer](https://nuxt.com/docs/getting-started/layers). Extend it and a
+Nuxt app inherits the Forest theme, colour families, icons and the real brand fonts — no npm publish
+involved.
+
+The layer is **self-contained** — no `@humanforest/*` imports, no climbing to sibling packages — so giget
+can fetch this one directory and it still works. The generated files are committed; regenerate them
+from the source packages with `bun run build:layer` (in the design-system repo root).
+
+## What the layer delivers
+
+- **`nuxt.config.ts`** — registers `@nuxt/ui`, the Forest colour families (`color="forest|maple|river|warm|acid"`), the `i-forest-*` icon set (SVGs in `assets/icons/forest/`), the 23 Forest components below, and the composables listed under "Composables and helpers".
+- **`app.config.ts`** — the Nuxt UI theme: per-component tailwind-variants fragments + the semantic role map (`primary→forest`, `error→maple`, …), read from `theme.gen.json`.
+- **`styles.gen.css`** — fonts + ramps + theme registration + type scale + the motion ladder + the Forest base layer. The `@font-face` rules point at `./files/`, so a giget consumer renders in the brand faces offline. **This file is not published to npm.**
+- **`styles.cdn.gen.css`** — byte-identical from the first token onward; only the `@font-face` rules differ, naming `assets.forest.bike` instead. This is the build the npm package ships, because a public tarball may not carry licensed binaries.
+- **`files/`** — the real brand font binaries. Giget only; excluded from the npm tarball.
+- **`packages/tokens/logos/`** — the 15 generated brand SVGs (mark, wordmark, both lockups, the `f`, and eight sub-brand favicons). Nothing in the layer imports them: `FLogo` and `FSubLogo` compose their marks live. They ship for the uses a component cannot serve — a Vue component does not go in `<link rel="icon">`, an email template or an OG image.
+- **`packages/ui/src`, `packages/charts/src`, `packages/frames/src`** (+ their supporting trees, mirrored at repo-relative paths — see "Regenerating") — the 39 registered Forest components, auto-registered like any Nuxt component, no import needed: `ForestContext`; `FLogo`, `FSubLogo`; `FFilterBar`, `FFilterChip`; `FKpi`, `FKpiGroup`; six shell components (`FAppShell`, `FAppSidebar`, `FAppNavbar`, `FPageToolbar`, `FScrollShadow`, `FSidePanel`); four canvas components (`FCanvasHud`, `FCanvasCard`, `FCanvasControl`, `FCanvasControlGroup`); eight map components (`FMap`, `FMapPopup`, `FMarker`, `FVehicleMark`, and the four controls `FMapZoom`, `FMapCompass`, `FMapTilt`, `FMapGeolocate`); eleven chart components (`FBoroughShape`, `FCalendarGrid`, `FCellLegend`, `FChartFrame`, `FChartFrameSingle`, `FChartLegend`, `FDistributionBar`, `FDottedMap`, `FLondonMap`, `FSparkline`, `FStatusTrack`); three presentation frames (`FDeviceFrame`, `FBrowserFrame`, `FFitFrame`) for staging a prototype at true scale — these carry CC BY-SA 4.0 device art, which is why they ship here and not on public npm. It is the mirrored source trees that make auto-registration possible — the components aren't published separately, they ARE those trees.
+
+## Composables and helpers
+
+Eight are auto-imported alongside the components — `FMap`'s imperative API plus the chart palette and
+the KPI formatters:
+
+```ts
+// no import needed
+const { flyTo } = useMapCamera()
+const palette = useChartPalette()
+formatMetric(4218, { format: 'compact' })   // "4.2k"
+```
+
+`useMapReady` · `useMapCamera` · `useMapOverlay` · `useFeatureSelect` · `MAP_SLOT` ·
+`useChartPalette` · `formatMetric` · `formatPercent`
+
+This is an ALLOW-LIST, not `imports.dirs`, and the rest is deliberate. A directory scan would take
+every export in the mirrored trees, and those barrels carry names like `token`, `isSelected`,
+`nextKey` and `addClause` — generic enough to collide with a consuming app's own code, silently and
+at a distance. Everything else stays reachable by path:
+
+```ts
+import { STATE_LABEL, resolveMapColor } from '#layers/forest/packages/ui/src/map'
+import { distributionShares } from '#layers/forest/packages/charts/src/distribution'
+```
+
+Those paths are the layer's internal shape, so treat them as less stable than the auto-imported set:
+they move when the source tree is reorganised.
+
+## Quickstart
+
+Three files in the consuming app. This exact setup is verified end to end: a Nuxt 4 app in a separate
+repo consuming this layer over giget, with the colour ramps, semantic roles, `.type-*` utilities,
+`i-forest-*` icons and the brand font binaries all reaching the production build. The 21 Forest
+components are verified too, but via a local-extends probe app rather than a giget one — see "Local
+development against the layer" for a dependency step that a giget consumer gets automatically and a
+local one does not.
+
+**`nuxt.config.ts`**
+
+```ts
+export default defineNuxtConfig({
+  // `install: true` is load-bearing — see "Staying up to date".
+  // Keep Forest LAST in extends so your own layers and app can override it.
+  extends: [['github:humanforest/design-system/packages/nuxt-layer#main', { install: true }]],
+  modules: ['@nuxt/ui'],
+  css: ['~/assets/css/main.css'],
+})
+```
+
+**`app/assets/css/main.css`**
+
+```css
+@import "tailwindcss";
+@import "@nuxt/ui";
+@import "#layers/forest/styles.gen.css";
+```
+
+Installed from npm instead, the same line names the CDN build — the self-hosted one is not in the
+tarball, so a stale copy of this snippet fails to resolve rather than quietly falling back:
+
+```css
+@import "@humanforest/nuxt-layer/styles.cdn.gen.css";
+```
+
+**`package.json`** — `nuxt ^4`, `@nuxt/ui ^4`, `tailwindcss ^4`, plus `typescript` in
+`devDependencies`. Without `typescript`, `@nuxt/ui`'s unresolved peer makes bun discard the lockfile and
+re-resolve on every build — noisy rather than fatal, but easy to avoid.
+
+**`GIGET_AUTH`** — a GitHub PAT with read access to this private repo, present for **both** install and
+build:
+
+```bash
+GIGET_AUTH=$(gh auth token) bun install
+GIGET_AUTH=$(gh auth token) bun run build
+```
+
+## Why the CSS needs its own import line
+
+Forest's stylesheet uses Tailwind at-rules (`@utility`, `@custom-variant`) and mode-order-sensitive
+`:root` re-points, so it **must compile in-band with your app's `@import "tailwindcss"`**, after
+`@nuxt/ui`. A layer `css: []` entry would be the wrong build and the wrong order, so the consumer
+imports it from their own entry CSS.
+
+It does **not** need copying out of the cache. `#layers/forest` is the alias Nuxt derives from this
+layer's `$meta.name`, and it resolves straight into giget's fetched copy — including the relative
+`url('./files/…')` `@font-face` paths, which Vite rewrites into content-hashed font assets emitted
+alongside the CSS that references them.
+
+**You do not need a `@source` line.** Other Nuxt layer setups carry one (e.g.
+`@source ".../node_modules/.c12/*/app/**"`) to make Tailwind scan the fetched layer for used classes.
+`@nuxt/ui` already does this for you: it detects every extended layer — the giget-fetched one included —
+and emits its own `@source` pointing at the resolved path. Verified by removing the manual line and
+rebuilding: byte-identical CSS, same 3,997 selectors, including Forest-only classes such as the
+`coarse:` touch-target utilities that appear in no app template. Copying another layer's glob is
+duplicate work, and here it would also walk the ~27k vendored files that `install: true` creates inside
+the cache. If a future `@nuxt/ui` ever stops auto-detecting layers and Forest classes go missing, add a
+narrow `@source` scoped to the layer root rather than a `**` glob that descends into its `node_modules`.
+
+One detail bites silently: **the alias is `#layers/forest`** (from `$meta.name`), not the directory name.
+
+**Precedence:** earlier in `extends` wins, and the app wins over every layer. As a foundation, keep
+Forest last.
+
+## Staying up to date
+
+Push a change to `main` and the **next build of every consuming app picks it up** — no cache-busting
+step, no manual cache deletion.
+
+That follows from `{ install: true }`: Nuxt's config loader (c12) passes it to giget as `force: true`,
+which makes giget re-fetch the ref's tarball and extract it over `node_modules/.c12/<hash>/` on every
+build. Drop `install: true` and giget's "destination already exists" guard re-engages, and an app can
+keep building against a stale layer. It is also load-bearing for the build to succeed at all: giget
+only installs the layer's own `dependencies` (`mapbox-gl`, `@unovis/vue`, `@unovis/ts`,
+`tailwind-variants`, `@internationalized/date`) when `install: true` runs it inside the cache — drop
+the flag and every map or chart component fails to resolve its imports, not just goes stale.
+
+The trade-off: **freshness and reproducibility are the same knob.** There is no lockfile pin, so a push
+to `main` reaches consumers unbidden. An app that needs reproducible builds should extend a tag or commit
+SHA instead of `#main`, and will then stop receiving updates automatically. Versioning is lockstep across
+the design system, cut as `v0.x.y` git tags — but **no tag has been cut yet**, so `#main` is the only
+option until the first one is (see `CONTRIBUTING.md`). Every build also reaches the
+GitHub API, which is why `GIGET_AUTH` is required at build time and not only at install time.
+
+Because giget serves **whatever is committed**, run `bun run build:layer` and commit the regenerated
+files after any token, theme, preset or font change — this includes the mirrored component sources (see
+"What the layer delivers"), since editing `packages/ui/src` or `packages/charts/src` doesn't touch this
+layer's copy until you regenerate it. The layer ships generated output (`theme.gen.json`,
+`styles.gen.css`, the icon set, the font files) alongside 171 mirrored component-source files, not
+generated output alone.
+
+## Local development against the layer
+
+When you are changing the layer itself, point the app at your local checkout so you see edits without
+pushing:
+
+```ts
+const useLocalLayer = process.env.USE_LOCAL_LAYER === 'true'
+
+export default defineNuxtConfig({
+  extends: [
+    useLocalLayer
+      ? '../design-system/packages/nuxt-layer' // adjust to wherever you cloned it
+      : ['github:humanforest/design-system/packages/nuxt-layer#main', { install: true }],
+  ],
+})
+```
+
+```bash
+USE_LOCAL_LAYER=true bun run dev
+```
+
+**This path does not install the layer's dependencies.** Extending a local directory skips giget
+entirely, so nothing installs `mapbox-gl`, `@unovis/vue`, `@unovis/ts`, `tailwind-variants` or
+`@internationalized/date`: the layer directory has no `node_modules` of its own, and climbing to the
+design-system repo's root `node_modules` doesn't find them either — bun links dependencies
+per-workspace, not at the root. Add all five to the consuming app's own `package.json` `dependencies`.
+Measured against a real probe app: skip this and the build fails with `Failed to resolve import
+"mapbox-gl"` from `packages/ui/src/map/FMap.vue`.
+
+The CSS import is unchanged — `#layers/forest` is derived from `$meta.name`, so it resolves whether the
+layer came from a local path or the giget cache.
+
+## Fonts: bundled, real, offline
+
+This layer has **two channels**, and the font source is the only thing that differs between them.
+
+Via giget, from this private repo with a PAT, it carries the real brand fonts: `files/` ships the
+actual woff/woff2 (GT Haptik, Mohr, JetBrains Mono) and `styles.gen.css` points at them with relative
+`url('./files/…')` paths — no CDN, no cross-origin fetch, no `Access-Control-Allow-Origin`
+requirement. Real Mohr renders offline the moment a consuming app resolves this layer. That closed,
+access-controlled distribution is what makes shipping the binaries defensible.
+
+Via npm it carries none of them. `styles.cdn.gen.css` names the faces on `assets.forest.bike`, and
+the `files` array leaves both `files/` and `styles.gen.css` out of the tarball — Mohr and GT Haptik
+are licensed to Forest, not to whoever runs `npm add`. A licence-holder who wants to self-host from
+npm brings their own `@font-face` block.
+
+Mohr remains licensed **Black + UPPERCASE only**. Because distribution is limited to the private repo
+plus a PAT-gated giget fetch, this stays within the licence — do not copy `files/` out of this channel
+into a publicly published package.
+
+## Regenerating
+
+Run after any token / theme / preset / font change, then commit the generated files:
+
+```bash
+bun run build:layer   # emits theme.gen.json, styles.gen.css, assets/icons/forest, files, packages/, apps/
+```

package/app.config.ts

@@ -0,0 +1,10 @@
+import theme from './theme.gen.json'
+
+// Nuxt UI reads its component theme, semantic colour roles and icon aliases from app.config.ui.
+// theme.ui is the resolved forestPreset.ui: per-component tailwind-variants fragments, the
+// primary/secondary/success/… → forest/warm/… role map, and the rating-star icon alias. Deep-merged
+// across layers, so a downstream layer or app can override individual slots. Regenerate via
+// `bun run build:layer`.
+export default defineAppConfig({
+  ui: theme.ui
+})

package/assets/icons/forest/bike-asterisk.svg

@@ -0,0 +1,21 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <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" />
+</svg>

package/assets/icons/forest/bike-down.svg

@@ -0,0 +1,19 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <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" />
+</svg>

package/assets/icons/forest/bike-off.svg

@@ -0,0 +1,20 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <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" />
+</svg>

package/assets/icons/forest/bike-up.svg

@@ -0,0 +1,19 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <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" />
+</svg>

package/assets/icons/forest/bike-x.svg

@@ -0,0 +1,19 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <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" />
+</svg>

package/assets/icons/forest/bike.svg

@@ -0,0 +1,18 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <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" />
+</svg>

package/assets/icons/forest/mark-fill.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <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" />
+</svg>

package/assets/icons/forest/mark.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <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" />
+</svg>

package/assets/icons/forest/parking.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <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" />
+</svg>

package/assets/icons/forest/star-fill.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <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" />
+</svg>

package/assets/icons/forest/star.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <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" />
+</svg>

package/assets/icons/forest/traffic-light-caution.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <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" />
+</svg>

package/assets/icons/forest/traffic-light-go.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <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" />
+</svg>

package/assets/icons/forest/traffic-light-lit.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <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" />
+</svg>

package/assets/icons/forest/traffic-light-stop.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <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" />
+</svg>

package/assets/icons/forest/traffic-light.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <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" />
+</svg>

package/nuxt.config.ts

@@ -0,0 +1,81 @@
+import { fileURLToPath } from 'node:url'
+import { dirname, join } from 'node:path'
+import theme from './theme.gen.json'
+
+// SELF-CONTAINED layer — no @humanforest/* imports, no climbing to sibling packages — so giget can fetch
+// this directory alone (`github:humanforest/design-system/packages/nuxt-layer#main`) and it still
+// works. Regenerate theme.gen.json / styles.gen.css / assets via `bun run build:layer`.
+//
+// CSS is NOT registered here: Forest's stylesheet uses Tailwind at-rules (@utility, @custom-variant)
+// and must be compiled in-band with the app's `@import "tailwindcss"`. So the consumer @imports
+// styles.gen.css from their own entry CSS, after `@nuxt/ui`. See README.md.
+
+const currentDir = dirname(fileURLToPath(import.meta.url))
+
+export default defineNuxtConfig({
+  $meta: { name: 'forest' },
+
+  // Self-sufficient; deduped when the consumer already lists @nuxt/ui.
+  modules: ['@nuxt/ui'],
+
+  // Forest scale families (color="forest|maple|river|warm|acid") + the default roles the plugin
+  // would otherwise drop. From the resolved preset.
+  ui: {
+    theme: {
+      colors: theme.theme.colors as string[]
+    }
+  },
+
+  // Forest icons (i-forest-*) — SVGs copied into the layer, so @nuxt/icon scans them from the
+  // giget-fetched dir too (currentDir is the cache path at build).
+  icon: {
+    customCollections: [
+      { prefix: 'forest', dir: join(currentDir, 'assets/icons/forest') }
+    ]
+  },
+
+  // Forest components, from the mirrored source trees. Absolute paths via currentDir: `~/` in a layer
+  // resolves against the CONSUMER's srcDir, not this one. pathPrefix:false keeps map/FMap.vue as
+  // <FMap> rather than <MapFMap>; the pattern restricts scanning to SFCs so the sibling .ts modules
+  // are not treated as components.
+  components: [
+    { path: join(currentDir, 'packages/ui/src'), pathPrefix: false, pattern: '**/*.vue' },
+    { path: join(currentDir, 'packages/charts/src'), pathPrefix: false, pattern: '**/*.vue' },
+    // Presentation frames (FDeviceFrame / FBrowserFrame / FFitFrame). They stage a prototype rather
+    // than appear in one, so they carry CC BY-SA device art — which is exactly why they ship on this
+    // private giget layer and not on public npm. See packages/frames/README.md.
+    { path: join(currentDir, 'packages/frames/src'), pathPrefix: false, pattern: '**/*.vue' }
+  ],
+
+  // Auto-imported composables — an ALLOW-LIST, not `imports.dirs`. A directory scan would take every
+  // export in the mirrored trees, and those barrels carry names like `token`, `isSelected`, `nextKey`
+  // and `addClause`: generic enough that dropping them into a consuming app's global namespace
+  // invites a collision the app author never asked for and cannot see coming.
+  //
+  // Listed here is the call-site API — the imperative half of FMap, the chart palette, the two KPI
+  // formatters. Everything else a barrel exports stays reachable, deliberately, by path:
+  //   import { STATE_LABEL } from '#layers/forest/packages/ui/src/map'
+  imports: {
+    presets: [
+      {
+        from: join(currentDir, 'packages/ui/src/map/index.ts'),
+        // The four state composables join the list because a console needs all of them and each name
+        // says "map" or "vehicle" out loud. Their pure cores do NOT: `collectVisible`, `rowKey` and
+        // `patchQuery` are exactly the generic names this allow-list exists to keep out of an app's
+        // global namespace, and they stay reachable by path.
+        imports: [
+          'useMapReady', 'useMapCamera', 'useMapOverlay', 'useFeatureSelect', 'MAP_SLOT',
+          'useMapUrlState', 'useVisibleFeatures', 'useMapTableSelection', 'useVehicleFilter'
+        ]
+      },
+      {
+        from: join(currentDir, 'packages/ui/src/kpi/index.ts'),
+        imports: ['formatMetric', 'formatPercent']
+      },
+      {
+        from: join(currentDir, 'packages/charts/src/index.ts'),
+        imports: ['useChartPalette']
+      }
+    ]
+  }
+})

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@humanforest/nuxt-layer",
+  "type": "module",
+  "version": "0.1.0",
+  "description": "Forest design system as a Nuxt layer — extend it to inherit the theme, colour roles, icons and brand fonts in one line.",
+  "main": "./nuxt.config.ts",
+  "files": [
+    "nuxt.config.ts",
+    "app.config.ts",
+    "theme.gen.json",
+    "styles.cdn.gen.css",
+    "assets",
+    "packages",
+    "apps",
+    "README.md"
+  ],
+  "dependencies": {
+    "@humanforest/tokens": "^0.1.0",
+    "@internationalized/date": "^3.12.2",
+    "@mapbox/search-js-core": "^1.6.0",
+    "@unovis/ts": "^1.6.7",
+    "@unovis/vue": "^1.6.7",
+    "mapbox-gl": "^3.28.1",
+    "tailwind-variants": "3.2.2"
+  },
+  "peerDependencies": {
+    "@nuxt/ui": ">=4.5.0",
+    "nuxt": "^4.0.0",
+    "vue": "^3.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "SEE LICENSE IN LICENSE"
+}