@humanforest/nuxt-layer 0.1.0

package/packages/tokens/src/glyphs.ts

@@ -0,0 +1,127 @@
+// Word setting from the glyph atlas — turns a string into positioned OUTLINES. No font needs to be
+// loaded and no font parser ships: scripts/glyphs.ts baked the brand fonts to path data at em 1000,
+// and this walks them. Every consumer (the live <FSubLogo>, the SVG exporter) composes here, so a mark
+// on screen and the same mark in a downloaded file are the same shapes.
+//
+// Two brand rules are enforced while setting, not left to the caller:
+//
+//  1. THE F IS ALWAYS THE DRAWN F. The wordmark's f is a custom letterform, not GT Haptik's, so every
+//     f in a lead or sub-brand is swapped for the artwork. It carries its own metrics (below).
+//  2. FLAT ASCENDERS ARE CUT TO THE t. GT's b d h k l rise ~20 units above the t; the drawn f stops
+//     level with it. Left alone, a set word beside the drawn f has a ragged ascender line, so the flat
+//     stems are trimmed to the t's ink top.
+import glyphAtlas from '../glyphs/glyphs.json';
+import { WORDMARK_PATHS, F } from './logo';
+
+type Glyph = { d?: string; advance: number; x1?: number; y1?: number; x2?: number; y2?: number };
+type Atlas = Record<string, { upm: number; glyphs: Record<string, Glyph> }>;
+const ATLAS = glyphAtlas as unknown as Atlas;
+
+export type FontKey = 'gt' | 'mohr';
+
+/**
+ * Which letters may be trimmed to the t. ONLY flat-topped ascenders: their extra height is a plain
+ * vertical stem, so it comes off invisibly. Deliberately excluded —
+ *   · i j — the height is a DOT, and cutting decapitates the letter
+ *   · 0-9 — digits reach the same line but with ROUND tops, which a flat cut would deform
+ *   · f   — never set from the font; it's the drawn artwork, already at the right height
+ */
+const FLAT_ASCENDERS = new Set(['b', 'd', 'h', 'k', 'l']);
+
+/**
+ * Ink gap between the drawn f and the letter after it, measured off the wordmark itself: its f ends at
+ * x 106.85 and its o starts at 122.77. The drawn f is ~12 units narrower than GT's f, so GT's advance
+ * would strand that difference as a hole after every f — `fleet` setting as `f leet`. The f carries
+ * GT's own left sidebearing, so what precedes it spaces normally, and a right sidebearing that
+ * reproduces this gap.
+ */
+const WORDMARK_F_GAP = 15.92;
+
+/** A glyph placed in the run, as a path plus the transform that puts it there. */
+export type PlacedGlyph = {
+  d: string;
+  transform: string;
+  /** Needs the ascender trim — the renderer clips it at `cutY`. */
+  cut: boolean;
+};
+
+export type SetRun = {
+  glyphs: PlacedGlyph[];
+  /** Pen position after the run — where a following word would start. */
+  advance: number;
+  /** True ink extents. The advance overruns the ink, and trusting it clips the last letter. */
+  inkLeft: number;
+  inkRight: number;
+  inkTop: number;
+  inkBottom: number;
+  /** Absolute y of the ascender cut line, for the renderer's clip. */
+  cutY: number;
+};
+
+/**
+ * Set `text` as outlines. `size` is the em size in the target's units, `x`/`baseline` where the run
+ * starts. `brandF` swaps the drawn f in (leads and joined sub-brands; the keycap word is Mohr, which
+ * has no f treatment). Advances are summed PER GLYPH, unkerned — the wordmark's own spacing is
+ * hand-tuned per pair and is artwork, not something a kern table should second-guess.
+ */
+export function setWord(
+  text: string,
+  { font, size, x = 0, baseline = 0, brandF = false }:
+  { font: FontKey; size: number; x?: number; baseline?: number; brandF?: boolean },
+): SetRun {
+  const { upm, glyphs: table } = ATLAS[font];
+  const s = size / upm;
+  const cutY = baseline + (table['t']?.y1 ?? 0) * s;
+
+  // The drawn f's metrics: GT's left sidebearing, and a right sidebearing set so the next letter's ink
+  // lands WORDMARK_F_GAP away — calibrated on the f→o pair the wordmark itself defines.
+  const gtF = ATLAS.gt.glyphs['f'];
+  const gtO = ATLAS.gt.glyphs['o'];
+  const fLsb = (gtF.x1 ?? 0) * (size / ATLAS.gt.upm);
+  const fAdvance = fLsb + F.w + (WORDMARK_F_GAP - (gtO.x1 ?? 0) * (size / ATLAS.gt.upm));
+
+  const out: PlacedGlyph[] = [];
+  let pen = x;
+  let inkLeft = Infinity, inkRight = -Infinity, inkTop = Infinity, inkBottom = -Infinity;
+  const extend = (x1: number, y1: number, x2: number, y2: number) => {
+    inkLeft = Math.min(inkLeft, x1); inkRight = Math.max(inkRight, x2);
+    inkTop = Math.min(inkTop, y1); inkBottom = Math.max(inkBottom, y2);
+  };
+
+  for (const ch of text) {
+    if (brandF && ch === 'f') {
+      // the artwork, authored in wordmark units with its baseline at F.h — no scaling, it IS the size
+      out.push({ d: WORDMARK_PATHS[0], transform: `translate(${round(pen + fLsb)} ${round(baseline - F.h)})`, cut: false });
+      extend(pen + fLsb, baseline - F.h, pen + fLsb + F.w, baseline);
+      pen += fAdvance;
+      continue;
+    }
+    const g = table[ch];
+    if (!g) { pen += (table[' ']?.advance ?? 0) * s; continue; } // unknown char — hold a space rather than drop the word
+    if (g.d) {
+      out.push({
+        d: g.d,
+        transform: `translate(${round(pen)} ${round(baseline)}) scale(${round(s, 6)})`,
+        cut: FLAT_ASCENDERS.has(ch),
+      });
+      // a cut glyph's ink stops at the trim line, so its extent has to be reported trimmed too
+      const top = Math.max(baseline + g.y1! * s, FLAT_ASCENDERS.has(ch) ? cutY : -Infinity);
+      extend(pen + g.x1! * s, top, pen + g.x2! * s, baseline + g.y2! * s);
+    }
+    pen += g.advance * s;
+  }
+
+  return {
+    glyphs: out, advance: pen,
+    inkLeft: inkLeft === Infinity ? x : inkLeft,
+    inkRight: inkRight === -Infinity ? x : inkRight,
+    inkTop: inkTop === Infinity ? baseline : inkTop,
+    inkBottom: inkBottom === -Infinity ? baseline : inkBottom,
+    cutY,
+  };
+}
+
+const round = (n: number, p = 3) => +n.toFixed(p);
+
+/** The run's ink box, in the shape keycapGeometry() expects. */
+export const runInk = (r: SetRun) => ({ x1: r.inkLeft, y1: r.inkTop, x2: r.inkRight, y2: r.inkBottom });

package/packages/tokens/src/logo.ts

@@ -0,0 +1,50 @@
+// Forest logo — the single source of truth. The primitives (mark paths + wordmark paths) plus the
+// f-spacing geometry and the lockup offsets; everything else (the live <Logo> component AND the
+// generated SVG files via scripts/logo.ts) is composed from this. Path `d` strings are colour-blind;
+// colour roles are applied by the consumer (tokens in the component, baked hex in the generator).
+
+// ── Mark (the tree in a rounded square) — viewBox 0 0 434.82 434.82 ──
+export const MARK_SIZE = 434.82;
+/*
+  The rounded square's corner radius and the ring's thickness, in viewBox units — both read off the
+  two paths below, which are the only place they existed.
+
+  ★★ EXPORTED BECAUSE THE MARK IS A CARD SHAPE, not only a logo. The deck's mosaic cover sets nine
+  tiles beside each other and one of them IS the mark, so the other eight have to be the same
+  object: same corner, same ring, at whatever size the grid gives them. Every one of those is a
+  RATIO of MARK_SIZE, and a ratio copied into a stylesheet by hand is a number that cannot follow
+  the artwork. `square`'s first curve turns at 95.0854; `ring`'s inner edge sits at 19.
+*/
+export const MARK_CORNER = 95.0854;
+export const MARK_RING = 19;
+export const MARK = {
+  // rounded-square face
+  square: 'M2.1153e-08 95.0946C-0.00109574 42.5792 42.5701 0.00620037 95.0854 0.0051046L339.725 2.11533e-08C392.241 -0.00109575 434.814 42.5701 434.815 95.0854L434.82 339.725C434.821 392.241 392.25 434.814 339.734 434.815L95.0946 434.82C42.5792 434.821 0.00620035 392.25 0.00510458 339.734L2.1153e-08 95.0946Z',
+  // outer ring (the ink outline — reverses with the theme in the component)
+  ring: 'M434.812 340.954C434.155 392.903 391.839 434.813 339.734 434.815L95.0946 434.82L95.0938 415.819L339.733 415.814C381.755 415.814 415.82 381.748 415.819 339.726L415.814 95.0859C415.814 53.064 381.748 18.9991 339.726 19L95.0859 19.0049C53.0642 19.0058 18.9993 53.072 19 95.0938L19.0049 339.733C19.0058 381.755 53.072 415.82 95.0938 415.819L95.0946 434.82L93.8652 434.812C42.3254 434.16 0.666417 392.503 0.0126953 340.963L0.00510458 339.734L2.1153e-08 95.0946C-0.00108718 42.9895 41.9075 0.671801 93.8564 0.0126953L95.0854 0.0051046L339.725 2.11533e-08L340.954 0.0078125C392.903 0.664719 434.814 42.9804 434.815 95.0854L434.82 339.725L434.812 340.954Z',
+  // white tree
+  tree: 'M299.156 219.311H271.441L299.156 274.739H248.118V355.715C251.636 356.607 255.112 358.601 257.895 361.37C261.472 364.93 264.076 369.943 264.076 375.898V378.994H224.327V274.74H210.541V378.994H170.792V375.898C170.792 369.943 173.395 364.93 176.972 361.37C179.756 358.601 183.231 356.607 186.75 355.715V274.741L135.682 274.742L163.398 219.314H135.682L217.421 55.8441L299.156 219.311Z',
+  // inner tree detail (ink)
+  inner: 'M171.866 196.947L217.422 105.85L262.957 196.966H235.267L262.978 252.383H171.873L199.584 196.947H171.866Z',
+};
+// Mark as one knockout path (square minus tree, even-odd) for the one-colour treatment.
+export const MARK_MONO = `${MARK.square}${MARK.tree}${MARK.inner}`;
+
+// ── Wordmark ("forest") — viewBox 0 0 842 201, all paths are ink. First path is the "f". ──
+export const WORDMARK_W = 842;
+export const WORDMARK_H = 201;
+export const WORDMARK_PATHS = [
+  'M73.8669 0C83.2312 0 94.2241 1.52679 106.846 4.58037V42.7501C97.0742 41.1216 89.6437 40.3073 84.5544 40.3073C79.2615 40.3073 75.3937 41.3251 72.9508 43.3609C70.508 45.6002 69.2865 49.1627 69.2865 54.0484V68.4602H106.846V102.344H69.2865V197.308H28.9793V102.344H0V68.4602H28.9793V48.2466C28.9793 31.3501 32.7453 19.034 40.2775 11.2982C48.0133 3.76608 59.2097 0 73.8669 0Z',
+  'M122.774 120.97C122.774 105.295 126.337 91.4525 133.462 79.4417C140.587 67.2274 150.358 57.7613 162.776 51.0434C175.398 44.3255 189.444 40.9666 204.916 40.9666C220.387 40.9666 234.332 44.3255 246.75 51.0434C259.371 57.7613 269.245 67.2274 276.37 79.4417C283.495 91.4525 287.057 105.295 287.057 120.97C287.057 136.646 283.495 150.59 276.37 162.805C269.245 174.815 259.371 184.18 246.75 190.898C234.332 197.615 220.387 200.974 204.916 200.974C189.444 200.974 175.398 197.615 162.776 190.898C150.358 184.18 140.587 174.815 133.462 162.805C126.337 150.59 122.774 136.646 122.774 120.97ZM245.528 120.97C245.528 108.96 241.661 99.1882 233.925 91.6561C226.189 84.1239 216.519 80.3578 204.916 80.3578C193.312 80.3578 183.642 84.1239 175.907 91.6561C168.171 99.1882 164.303 108.96 164.303 120.97C164.303 132.981 168.171 142.753 175.907 150.285C183.642 157.817 193.312 161.583 204.916 161.583C216.519 161.583 226.189 157.817 233.925 150.285C241.661 142.753 245.528 132.981 245.528 120.97Z',
+  'M346.76 69.6703C355.717 50.5345 370.171 40.9666 390.121 40.9666C394.396 40.9666 399.384 41.6791 405.084 43.1041V86.465C400.198 84.8364 394.091 84.0221 386.762 84.0221C373.53 84.0221 363.759 87.6864 357.448 95.015C351.341 102.344 348.287 113.438 348.287 128.299V197.31H307.98V44.6309H346.76V69.6703Z',
+  'M418.814 120.97C418.814 105.906 421.969 92.3686 428.28 80.3578C434.794 68.1435 443.955 58.5756 455.762 51.6541C467.569 44.5291 481.311 40.9666 496.986 40.9666C512.457 40.9666 525.791 44.3255 536.988 51.0434C548.388 57.7613 557.141 67.2274 563.248 79.4417C569.356 91.6561 572.409 105.906 572.409 122.192V133.185H460.037L460.343 133.796C462.582 143.363 467.569 150.692 475.305 155.781C483.041 160.667 491.693 163.11 501.261 163.11C518.157 163.11 532.611 157.919 544.622 147.537L561.416 180.821C545.131 194.256 524.875 200.974 500.65 200.974C483.957 200.974 469.402 197.514 456.984 190.592C444.566 183.671 435.1 174.205 428.585 162.194C422.071 149.979 418.814 136.238 418.814 120.97ZM528.438 103.87C527.42 95.3204 524.061 88.3989 518.361 83.106C512.864 77.8132 505.332 75.1667 495.764 75.1667C486.196 75.1667 478.257 77.6096 471.946 82.4953C465.839 87.381 461.768 94.5061 459.732 103.87H528.438Z',
+  'M594.817 89.5186C594.817 74.0471 600.517 62.1381 611.917 53.7916C623.317 45.2416 639.094 40.9666 659.247 40.9666C685.305 40.9666 705.56 48.4988 720.014 63.5631L697.417 92.8775C692.939 87.9918 686.933 84.2257 679.401 81.5793C671.869 78.7292 664.031 77.3042 655.888 77.3042C649.781 77.3042 644.997 78.2203 641.537 80.0525C638.28 81.8846 636.651 84.531 636.651 87.9918C636.651 90.4346 637.567 92.3686 639.399 93.7936C641.435 95.2186 644.59 96.5418 648.865 97.7632C653.14 98.7811 660.876 100.613 672.073 103.26C688.155 106.924 700.267 112.319 708.41 119.444C716.757 126.365 720.93 136.951 720.93 151.201C720.93 167.69 715.23 180.108 703.83 188.455C692.633 196.801 676.348 200.974 654.972 200.974C639.704 200.974 626.167 198.837 614.36 194.562C602.756 190.083 593.697 183.772 587.183 175.63L610.695 145.094C615.988 151.201 622.706 156.087 630.849 159.751C638.992 163.212 648.458 164.942 659.247 164.942C665.355 164.942 670.24 164.026 673.905 162.194C677.569 160.362 679.401 157.41 679.401 153.338C679.401 150.692 678.383 148.656 676.347 147.231C674.515 145.603 671.462 144.178 667.187 142.956C662.912 141.735 655.685 140.004 645.506 137.765C630.442 134.508 618.227 129.317 608.863 122.192C599.499 115.067 594.817 104.176 594.817 89.5186Z',
+  'M840.49 194.256C827.868 197.31 816.875 198.837 807.511 198.837C792.853 198.837 781.657 195.071 773.921 187.539C766.389 179.803 762.623 167.487 762.623 150.59V78.5257H734.835V44.6309H762.623V3.71289H802.93V44.6309H841.711V78.5257H802.93V144.788C802.93 149.674 804.152 153.237 806.595 155.476C809.037 157.512 812.905 158.53 818.198 158.53C823.287 158.53 830.718 157.715 840.49 156.087V194.256Z',
+];
+// The "f" glyph (first wordmark path) — the spacing module. Its tight bbox:
+export const F = { x: 0, y: 0, w: 106.846, h: 197.308 };
+
+// ── Lockup compositions — mark + wordmark at the brand's offsets ──
+// gap (horizontal) ≈ one f-width; the wordmark sits at its natural size next to the full-height mark.
+export const LOCKUP_H = { vb: [1381, 435] as const, mark: [0, 0] as const, word: [538.846, 116.95] as const };
+export const LOCKUP_V = { vb: [842, 698] as const, mark: [203.387, 0] as const, word: [0, 496.141] as const };

package/packages/tokens/src/subbrands.ts

@@ -0,0 +1,44 @@
+// The sub-brand register — the canonical set of "<lead> [WORD]" lockups.
+//
+// This is DATA, not a build input: <FSubLogo> composes any entry (or any word that isn't here at all)
+// straight from the glyph atlas, and the SVG exporter reads the same list. Adding a sub-brand means
+// adding a line here. Nothing to run.
+//
+// `tier` groups the register on the docs page: internal = ops and staff tooling, external =
+// rider-facing. DS carries none — it's the system's own mark, not a product, so it sits outside both.
+//
+// Each tier is its own colour namespace. Internal tooling and rider-facing products have no shared
+// audience, so a hue can serve once in each tier: FLEET and PLUS both take forest, FLEX takes river.
+// Uniqueness is enforced within a tier, not across it.
+export type SubBrand = {
+  /** Set in the keycap, upper-case. */
+  word: string;
+  /** Colour ramp the keycap lives on. */
+  family: string;
+  tier?: 'internal' | 'external';
+  /** The word ahead of the keycap. Omit for the drawn forest wordmark. */
+  lead?: string;
+  /** Keycap fill level; defaults to 500. */
+  face?: number;
+  /** Keycap word level — set when the face is too light to hold white. */
+  ink?: number;
+  /** Border level — omit to sit on 950 and lighten to 300 in dark. */
+  line?: number;
+  /** Border level in dark, when a pinned `line` should shift rather than hold. */
+  lineDark?: number;
+};
+
+export const SUB_BRANDS: SubBrand[] = [
+  { word: 'DS', family: 'forest' }, // the design system's own sub-brand: forest DS, primary green keycap
+  { word: 'FLEET', family: 'forest', tier: 'internal' },
+  { word: 'CONSOLE', family: 'river', tier: 'internal', lead: 'fleet' }, // leads with fleet: fleet[CONSOLE]
+  { word: 'TOWER', family: 'warm', tier: 'internal' },
+  { word: 'RADAR', family: 'maple', tier: 'internal' },
+  { word: 'PLUS', family: 'forest', tier: 'external' },
+  { word: 'FLEX', family: 'river', tier: 'external' },
+  // peach face, bark-brown ink + border; the border brightens a touch in dark
+  { word: 'C2W', family: 'warm', face: 200, ink: 950, line: 950, lineDark: 700, tier: 'external' },
+];
+
+export const subBrand = (word: string) =>
+  SUB_BRANDS.find((b) => b.word.toLowerCase() === word.toLowerCase());

package/packages/tokens/src/sublogo.ts

@@ -0,0 +1,80 @@
+// Sub-brand lockup geometry — "<lead> [WORD]": a lead word plus a skewed keycap holding the sub-brand,
+// set in Mohr Black Italic. The maths lives here, colour-blind and font-blind: every function takes an
+// ink box (from setWord() in ./glyphs) and returns coordinates in wordmark user space (height 201).
+// <FSubLogo> and the SVG exporter both compose through it, so neither owns the geometry.
+//
+// The sizes below are locked to the wordmark and derived from font metrics, so they're constants rather
+// than inputs — scripts/glyphs.ts asserts them against the font files when it rebuilds the atlas.
+import { WORDMARK_W, F } from './logo';
+
+// Mohr Black Italic size for the keycap word — the wordmark's own size scaled by the brand's 136:305
+// display ratio, so a keycap letter sits to "forest" exactly as it does in the mobile display type.
+export const SUBLOGO_MOHR_SIZE = 138.0714529199992;
+// GT Haptik Bold size matching the wordmark's letters — measured so a GT "t" equals the wordmark's own
+// "t" (ink height 195.124). Matching the custom f instead runs ~1.4% large, the full word ~1.3% large:
+// the tracking and the wider drawn f both inflate it. Used by any word set beside or joined to the mark.
+export const SUBLOGO_GT_SIZE = 305.51525382263;
+// Baseline — the GT t-top lands on the wordmark t-top here.
+export const SUBLOGO_BASELINE = F.h;
+
+export const SUBLOGO = {
+  gap: 70, // lead → keycap
+  radius: 42,
+  border: 18,
+  skew: -6, // the font's own italic angle (the L's stem slant) — the box runs parallel to the letters
+  faceLevel: 500, // default keycap fill
+  lineLevel: 950, // default keycap border; the component lightens it in dark
+} as const;
+
+/** Ink box of a set word, in wordmark user space. */
+export type InkBox = { x1: number; y1: number; x2: number; y2: number };
+
+const TAN = Math.abs(Math.tan((SUBLOGO.skew * Math.PI) / 180));
+
+/**
+ * Keycap + lockup geometry. `leadW` is the ink right edge of the word ahead of the keycap (WORDMARK_W
+ * for the drawn wordmark); `word` is the measured ink box of the keycap word at SUBLOGO_MOHR_SIZE.
+ * The word is padded equally on all four sides — the vertical padding sets the horizontal, so the
+ * keycap keeps the same optical margin whatever the word's width.
+ */
+export function keycapGeometry(leadW: number, word: InkBox) {
+  const bleed = SUBLOGO.border / 2;
+  const boxH = F.h - SUBLOGO.border;
+  const boxY = bleed;
+  const cap = word.y2 - word.y1;
+  const pad = (boxH - cap) / 2;
+  const boxW = word.x2 - word.x1 + pad * 2;
+  const boxX = leadW + SUBLOGO.gap;
+  // where the word's origin goes so its ink lands inside the padding
+  const wordAt = { x: boxX + pad - word.x1, y: boxY + pad - word.y1 };
+  const cx = boxX + boxW / 2;
+  const cy = boxY + boxH / 2;
+  // the skew throws the box corners sideways — the lockup has to make room for the overhang
+  const skewBleed = TAN * (boxH / 2);
+  const fullW = Math.ceil(boxX + boxW + TAN * (F.h / 2) + bleed + 3);
+  return {
+    boxX, boxY, boxW, boxH, cx, cy, wordAt, fullW,
+    // the keycap on its own, in a tight viewBox: [x, width]
+    badgeVB: [boxX - bleed - skewBleed, boxW + 2 * (bleed + skewBleed)] as [number, number],
+  };
+}
+
+/**
+ * App icon — a SQUARE keycap holding just the first letter. The skew throws the corners sideways, so
+ * the square is shrunk until its skewed outline fits the viewBox width: a touch shorter than tall,
+ * centred both ways. The letter is sized to the rect (~62% cap height), not to the wordmark-locked size.
+ */
+export function iconGeometry() {
+  const side = F.h;
+  const bleed = SUBLOGO.border / 2;
+  const outer = side / (1 + TAN); // skewed outer square == viewBox width
+  const sq = outer - SUBLOGO.border;
+  return { side, sq, off: (side - outer) / 2 + bleed, letterCap: sq * 0.62, cx: side / 2, cy: side / 2 };
+}
+
+/** The skew transform for a keycap centred on (cx, cy). */
+export const skewTransform = (cx: number, cy: number) =>
+  `translate(${cx} ${cy}) skewX(${SUBLOGO.skew}) translate(${-cx} ${-cy})`;
+
+/** Default lead width — the drawn wordmark's. */
+export const DEFAULT_LEAD_W = WORDMARK_W;

package/packages/ui/icons/forest/map/forest-place-count.svg

@@ -0,0 +1,21 @@
+<svg width="42" height="28" viewBox="0 0 42 28" fill="none"
+     xmlns="http://www.w3.org/2000/svg"
+     xmlns:m="https://www.mapbox.com">
+  <m:metadata>
+    <m:parameters>
+      <m:parameter m:type="color" m:name="body" m:value="#FF00FF" />
+      <m:parameter m:type="color" m:name="ring" m:value="#FF01FF" />
+      <m:parameter m:type="color" m:name="warehouse" m:value="#FF02FF" />
+      <m:parameter m:type="color" m:name="parking" m:value="#FF03FF" />
+      <m:parameter m:type="color" m:name="bike" m:value="#FF04FF" />
+    </m:parameters>
+    <m:stretch-x-areas>
+      <m:stretch-x-area m:left="25" m:width="2" />
+    </m:stretch-x-areas>
+    <m:content m:left="25" m:top="0" m:width="9" m:height="28" />
+  </m:metadata>
+  <rect x="1.4" y="1.4" width="39.2" height="25.2" rx="12.6" fill="#FF00FF" stroke="#FF01FF" stroke-width="2.8" />
+  <g transform="translate(8 8) scale(0.5)" fill="none" stroke="#FF02FF" stroke-linecap="round" stroke-linejoin="round"><g stroke-linecap="round" stroke-linejoin="round" stroke-width="2.52"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></g></g>
+  <g transform="translate(8 8) scale(0.5)" fill="#FF03FF" stroke="none"><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>
+  <g transform="translate(8 8) scale(0.5)" fill="none" stroke="#FF04FF" stroke-linecap="round" stroke-linejoin="round"><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.52" 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.52" 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.52" stroke-linecap="round" /><path d="M8 9H10" stroke-width="2.52" stroke-linecap="round" /><path d="M9 9L12 15" stroke-width="2.52" stroke-linecap="round" /><path d="M12 5H12.8686C13.2543 5 13.6056 5.22183 13.7715 5.57007L18.5 15.5" stroke-width="2.52" 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.52" stroke-linecap="round" /><path d="M5.5 12H3" stroke-width="2.52" stroke-linecap="round" /></g>
+</svg>

package/packages/ui/icons/forest/map/forest-place-marker.svg

@@ -0,0 +1,17 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none"
+     xmlns="http://www.w3.org/2000/svg"
+     xmlns:m="https://www.mapbox.com">
+  <m:metadata>
+    <m:parameters>
+      <m:parameter m:type="color" m:name="body" m:value="#FF00FF" />
+      <m:parameter m:type="color" m:name="ring" m:value="#FF01FF" />
+      <m:parameter m:type="color" m:name="warehouse" m:value="#FF02FF" />
+      <m:parameter m:type="color" m:name="parking" m:value="#FF03FF" />
+      <m:parameter m:type="color" m:name="bike" m:value="#FF04FF" />
+    </m:parameters>
+  </m:metadata>
+  <rect x="1.665" y="1.665" width="36.67" height="36.67" rx="9.17" fill="#FF00FF" stroke="#FF01FF" stroke-width="3.33" />
+  <g transform="translate(8.5 8.5) scale(0.9585)" fill="none" stroke="#FF02FF" stroke-linecap="round" stroke-linejoin="round"><g stroke-linecap="round" stroke-linejoin="round" stroke-width="1.74"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></g></g>
+  <g transform="translate(8.5 8.5) scale(0.9585)" fill="#FF03FF" stroke="none"><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>
+  <g transform="translate(8.5 8.5) scale(0.9585)" fill="none" stroke="#FF04FF" stroke-linecap="round" stroke-linejoin="round"><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="1.74" 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="1.74" 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="1.74" stroke-linecap="round" /><path d="M8 9H10" stroke-width="1.74" stroke-linecap="round" /><path d="M9 9L12 15" stroke-width="1.74" stroke-linecap="round" /><path d="M12 5H12.8686C13.2543 5 13.6056 5.22183 13.7715 5.57007L18.5 15.5" stroke-width="1.74" 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="1.74" stroke-linecap="round" /><path d="M5.5 12H3" stroke-width="1.74" stroke-linecap="round" /></g>
+</svg>

package/packages/ui/icons/forest/map/forest-vehicle-marker.svg

@@ -0,0 +1,73 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none"
+     xmlns="http://www.w3.org/2000/svg"
+     xmlns:m="https://www.mapbox.com">
+  <m:metadata>
+    <m:parameters>
+      <m:parameter m:type="color" m:name="body" m:value="#FF00FF" />
+      <m:parameter m:type="color" m:name="edge" m:value="#FF01FF" />
+      <m:parameter m:type="color" m:name="battery" m:value="#FF02FF" />
+      <m:parameter m:type="color" m:name="batteryEdge" m:value="#FF03FF" />
+      <m:parameter m:type="color" m:name="dot" m:value="#FF04FF" />
+      <m:parameter m:type="color" m:name="dotEdge" m:value="#FF05FF" />
+      <m:parameter m:type="color" m:name="badgeSquare" m:value="#FF06FF" />
+      <m:parameter m:type="color" m:name="badgeSquareEdge" m:value="#FF07FF" />
+      <m:parameter m:type="color" m:name="badgeTriangle" m:value="#FF08FF" />
+      <m:parameter m:type="color" m:name="badgeTriangleEdge" m:value="#FF09FF" />
+      <m:parameter m:type="color" m:name="badgeCircle" m:value="#FF0AFF" />
+      <m:parameter m:type="color" m:name="badgeCircleEdge" m:value="#FF0BFF" />
+      <m:parameter m:type="color" m:name="badgeStar" m:value="#FF0CFF" />
+      <m:parameter m:type="color" m:name="badgeStarEdge" m:value="#FF0DFF" />
+      <m:parameter m:type="color" m:name="inUseFrom" m:value="#FF0EFF" />
+      <m:parameter m:type="color" m:name="inUseTo" m:value="#FF0FFF" />
+      <m:parameter m:type="color" m:name="locked" m:value="#FF10FF" />
+      <m:parameter m:type="color" m:name="lockedEdge" m:value="#FF11FF" />
+      <m:parameter m:type="color" m:name="bike" m:value="#FF12FF" />
+      <m:parameter m:type="color" m:name="pine" m:value="#FF13FF" />
+      <m:parameter m:type="color" m:name="eye" m:value="#FF14FF" />
+      <m:parameter m:type="color" m:name="relocate" m:value="#FF15FF" />
+      <m:parameter m:type="color" m:name="wrench" m:value="#FF16FF" />
+      <m:parameter m:type="color" m:name="warehouse" m:value="#FF17FF" />
+      <m:parameter m:type="color" m:name="truck" m:value="#FF18FF" />
+      <m:parameter m:type="color" m:name="bandage" m:value="#FF19FF" />
+      <m:parameter m:type="color" m:name="question" m:value="#FF1AFF" />
+      <m:parameter m:type="color" m:name="hand" m:value="#FF1BFF" />
+      <m:parameter m:type="color" m:name="flag" m:value="#FF1CFF" />
+      <m:parameter m:type="color" m:name="ready" m:value="#FF1DFF" />
+      <m:parameter m:type="color" m:name="skull" m:value="#FF1EFF" />
+      <m:parameter m:type="color" m:name="container" m:value="#FF1FFF" />
+      <m:parameter m:type="color" m:name="staff" m:value="#FF20FF" />
+    </m:parameters>
+  </m:metadata>
+  <defs>
+    <radialGradient id="inUse" cx="0.35" cy="0.3" r="0.85">
+      <stop offset="0" stop-color="#FF0EFF" />
+      <stop offset="1" stop-color="#FF0FFF" />
+    </radialGradient>
+  </defs>
+  <circle cx="20" cy="20" r="19.2" fill="#FF02FF" stroke="#FF03FF" stroke-width="1.6" />
+  <circle cx="20" cy="20" r="15.2" fill="#FF00FF" stroke="#FF01FF" stroke-width="1.6" />
+  <circle cx="20" cy="20" r="14.4" fill="url(#inUse)" />
+  <g transform="translate(10.06 10.06) scale(0.828)" fill="none" stroke="#FF12FF" stroke-linecap="round" stroke-linejoin="round"><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="1.74" 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="1.74" 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="1.74" stroke-linecap="round" /><path d="M8 9H10" stroke-width="1.74" stroke-linecap="round" /><path d="M9 9L12 15" stroke-width="1.74" stroke-linecap="round" /><path d="M12 5H12.8686C13.2543 5 13.6056 5.22183 13.7715 5.57007L18.5 15.5" stroke-width="1.74" 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="1.74" stroke-linecap="round" /><path d="M5.5 12H3" stroke-width="1.74" stroke-linecap="round" /></g>
+  <g transform="translate(10.06 10.06) scale(0.828)" fill="none" stroke="#FF13FF" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L17.2 12.4H15.4L17.2 16H6.8L8.6 12.4H6.8L12 2Z" stroke-width="1.74" stroke-linecap="round" stroke-linejoin="round" /><path d="M10.2 16V22H8.6" stroke-width="1.74" stroke-linecap="round" stroke-linejoin="round" /><path d="M13.8 16V22H15.4" stroke-width="1.74" stroke-linecap="round" stroke-linejoin="round" /></g>
+  <g transform="translate(10.06 10.06) scale(0.828)" fill="none" stroke="#FF14FF" stroke-linecap="round" stroke-linejoin="round"><g stroke-linecap="round" stroke-linejoin="round" stroke-width="1.74"><path d="M2.062 12.348a1 1 0 0 1 0-.696a10.75 10.75 0 0 1 19.876 0a1 1 0 0 1 0 .696a10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></g></g>
+  <g transform="translate(10.06 10.06) scale(0.828)" fill="none" stroke="#FF15FF" stroke-linecap="round" stroke-linejoin="round"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.74" d="m16 3l4 4l-4 4m4-4H4m4 14l-4-4l4-4m-4 4h16"/></g>
+  <g transform="translate(10.06 10.06) scale(0.828)" fill="none" stroke="#FF16FF" stroke-linecap="round" stroke-linejoin="round"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.74" d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"/></g>
+  <g transform="translate(10.06 10.06) scale(0.828)" fill="none" stroke="#FF17FF" stroke-linecap="round" stroke-linejoin="round"><g stroke-linecap="round" stroke-linejoin="round" stroke-width="1.74"><path d="M18 21V10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v11"/><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 1.132-1.803l7.95-3.974a2 2 0 0 1 1.837 0l7.948 3.974A2 2 0 0 1 22 8zM6 13h12M6 17h12"/></g></g>
+  <g transform="translate(10.06 10.06) scale(0.828)" fill="none" stroke="#FF18FF" stroke-linecap="round" stroke-linejoin="round"><g stroke-linecap="round" stroke-linejoin="round" stroke-width="1.74"><path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2m10 0H9m10 0h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"/><circle cx="17" cy="18" r="2"/><circle cx="7" cy="18" r="2"/></g></g>
+  <g transform="translate(10.06 10.06) scale(0.828)" fill="none" stroke="#FF19FF" stroke-linecap="round" stroke-linejoin="round"><g stroke-linecap="round" stroke-linejoin="round" stroke-width="1.74"><path d="M10 10.01h.01m-.01 4h.01m3.99-4h.01m-.01 4h.01M18 6v12M6 6v12"/><rect width="20" height="12" x="2" y="6" rx="2"/></g></g>
+  <g transform="translate(10.06 10.06) scale(0.828)" fill="none" stroke="#FF1AFF" stroke-linecap="round" stroke-linejoin="round"><g stroke-linecap="round" stroke-linejoin="round" stroke-width="1.74"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3m.08 4h.01"/></g></g>
+  <g transform="translate(10.06 10.06) scale(0.828)" fill="none" stroke="#FF1BFF" stroke-linecap="round" stroke-linejoin="round"><g stroke-linecap="round" stroke-linejoin="round" stroke-width="1.74"><path d="M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2m0 4V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2m0 4.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8"/><path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"/></g></g>
+  <g transform="translate(10.06 10.06) scale(0.828)" fill="none" stroke="#FF1CFF" stroke-linecap="round" stroke-linejoin="round"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.74" d="M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528"/></g>
+  <g transform="translate(10.06 10.06) scale(0.828)" fill="none" stroke="#FF1DFF" stroke-linecap="round" stroke-linejoin="round"><g stroke-linecap="round" stroke-linejoin="round" stroke-width="1.74"><path d="M12 22V12m4 5l2 2l4-4"/><path d="M21 11.127V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.729l7 4a2 2 0 0 0 2 .001l1.32-.753"/><path d="M3.29 7L12 12l8.71-5M7.5 4.27l8.997 5.148"/></g></g>
+  <g transform="translate(10.06 10.06) scale(0.828)" fill="none" stroke="#FF1EFF" stroke-linecap="round" stroke-linejoin="round"><g stroke-linecap="round" stroke-linejoin="round" stroke-width="1.74"><path d="m12.5 17l-.5-1l-.5 1z"/><path d="M15 22a1 1 0 0 0 1-1v-1a2 2 0 0 0 1.56-3.25a8 8 0 1 0-11.12 0A2 2 0 0 0 8 20v1a1 1 0 0 0 1 1z"/><circle cx="15" cy="12" r="1"/><circle cx="9" cy="12" r="1"/></g></g>
+  <g transform="translate(10.06 10.06) scale(0.828)" fill="none" stroke="#FF1FFF" stroke-linecap="round" stroke-linejoin="round"><g stroke-linecap="round" stroke-linejoin="round" stroke-width="1.74"><path d="M22 7.7c0-.6-.4-1.2-.8-1.5l-6.3-3.9a1.72 1.72 0 0 0-1.7 0l-10.3 6c-.5.2-.9.8-.9 1.4v6.6c0 .5.4 1.2.8 1.5l6.3 3.9a1.72 1.72 0 0 0 1.7 0l10.3-6c.5-.3.9-1 .9-1.5Z"/><path d="M10 21.9V14L2.1 9.1M10 14l11.9-6.9M14 19.8v-8.1m4 5.8V9.4"/></g></g>
+  <g transform="translate(10.06 10.06) scale(0.828)" fill="none" stroke="#FF20FF" stroke-linecap="round" stroke-linejoin="round"><g stroke-linecap="round" stroke-linejoin="round" stroke-width="1.74"><path d="M12 12h.01M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2m14 7a18.15 18.15 0 0 1-20 0"/><rect width="20" height="14" x="2" y="6" rx="2"/></g></g>
+  <circle cx="32.16" cy="7.84" r="5.44" fill="#FF04FF" stroke="#FF05FF" stroke-width="1.6" />
+  <rect x="3.71" y="28.03" width="8.26" height="8.26" rx="1.4" fill="#FF06FF" stroke="#FF07FF" stroke-width="1.6" />
+  <path d="M 7.84,26.82 L 13.18,36 L 2.5,36 Z" fill="#FF08FF" stroke="#FF09FF" stroke-width="1.6" stroke-linejoin="round" />
+  <circle cx="7.84" cy="32.16" r="4.64" fill="#FF0AFF" stroke="#FF0BFF" stroke-width="1.6" />
+  <path d="M 7.84,26.68 L 9.77,29.5 L 13.05,30.47 L 10.96,33.18 L 11.06,36.59 L 7.84,35.45 L 4.62,36.59 L 4.72,33.18 L 2.63,30.47 L 5.91,29.5 Z" fill="#FF0CFF" stroke="#FF0DFF" stroke-width="1.6" stroke-linejoin="round" stroke-linecap="round" />
+  <circle cx="32.16" cy="32.16" r="5.44" fill="#FF10FF" stroke="#FF11FF" stroke-width="1.6" />
+  <rect x="29.92" y="29.49" width="1.95" height="5.34" rx="0.58" fill="#FF11FF" />
+  <rect x="32.45" y="29.49" width="1.95" height="5.34" rx="0.58" fill="#FF11FF" />
+</svg>