@humanforest/nuxt-layer 0.1.0

package/packages/ui/icons/forest/map/manifest.json

@@ -0,0 +1,373 @@
+{
+  "id": "forest-vehicle-marker",
+  "file": "forest-vehicle-marker.svg",
+  "size": 40,
+  "disc": {
+    "cx": 20,
+    "cy": 20,
+    "r": 14.4
+  },
+  "inner": {
+    "r": 15.2,
+    "disc": 14.4,
+    "stroke": 1.6
+  },
+  "outer": {
+    "r": 19.2,
+    "band": 2.4,
+    "stroke": 1.6,
+    "ratio": 0.16666666666666666,
+    "edgeRatio": 0.6666666666666666
+  },
+  "bandMid": 17.2,
+  "withoutBattery": {
+    "outerEdge": 16
+  },
+  "dot": {
+    "cx": 32.16,
+    "cy": 7.84,
+    "r": 4.64,
+    "edge": 1.6
+  },
+  "floor": {
+    "px": 1,
+    "atIconSize": 0.625,
+    "edges": [
+      {
+        "name": "edge (inner stroke)",
+        "units": 1.6,
+        "painted": 1
+      },
+      {
+        "name": "batteryEdge (outer stroke)",
+        "units": 1.6,
+        "painted": 1
+      },
+      {
+        "name": "battery band",
+        "units": 2.4,
+        "painted": 1.5
+      },
+      {
+        "name": "dotEdge",
+        "units": 1.6,
+        "painted": 1
+      },
+      {
+        "name": "badge edges",
+        "units": 1.6,
+        "painted": 1
+      },
+      {
+        "name": "locked pause bar",
+        "units": 1.95,
+        "painted": 1.22
+      }
+    ]
+  },
+  "locked": {
+    "cx": 32.16,
+    "cy": 32.16,
+    "r": 4.64,
+    "edge": 1.6,
+    "barW": 1.95,
+    "barH": 5.34
+  },
+  "corner": {
+    "scale": 1.15,
+    "r": 4.64,
+    "edge": 1.6
+  },
+  "inUse": {
+    "cx": 0.35,
+    "cy": 0.3,
+    "r": 0.85,
+    "discR": 14.4
+  },
+  "badge": {
+    "cx": 7.84,
+    "cy": 32.16,
+    "r": 4.64,
+    "edge": 1.6,
+    "shapes": [
+      "square",
+      "triangle",
+      "circle",
+      "star"
+    ],
+    "forbidden": [
+      "--ui-error",
+      "--ui-warning"
+    ]
+  },
+  "glyph": {
+    "canvas": 24,
+    "scale": 0.828,
+    "strokeWidth": 1.74,
+    "inset": 10.06,
+    "paintedStroke": 1.441,
+    "floorIconSize": 0.694
+  },
+  "params": [
+    {
+      "name": "body",
+      "sentinel": "#FF00FF",
+      "kind": "disc",
+      "region": "The disc",
+      "use": "The colour of the state group"
+    },
+    {
+      "name": "edge",
+      "sentinel": "#FF01FF",
+      "kind": "extra",
+      "region": "The inner circle’s stroke",
+      "use": "The stroke of the inner circle. Always the background colour"
+    },
+    {
+      "name": "battery",
+      "sentinel": "#FF02FF",
+      "kind": "extra",
+      "region": "The outer circle’s fill",
+      "use": "The fill of the outer circle. Switch it off and the whole ring goes"
+    },
+    {
+      "name": "batteryEdge",
+      "sentinel": "#FF03FF",
+      "kind": "extra",
+      "region": "The outer circle’s stroke",
+      "use": "The stroke of the outer circle. Always the background colour"
+    },
+    {
+      "name": "dot",
+      "sentinel": "#FF04FF",
+      "kind": "extra",
+      "region": "The offline dot",
+      "use": "Connectivity. The dot appears when the vehicle is offline"
+    },
+    {
+      "name": "dotEdge",
+      "sentinel": "#FF05FF",
+      "kind": "extra",
+      "region": "The offline dot’s outline",
+      "use": "The outline of the dot, which separates it from the disc"
+    },
+    {
+      "name": "badgeSquare",
+      "sentinel": "#FF06FF",
+      "kind": "extra",
+      "region": "The square badge",
+      "use": "A badge on the lower shoulder. A square carries one class of fact"
+    },
+    {
+      "name": "badgeSquareEdge",
+      "sentinel": "#FF07FF",
+      "kind": "extra",
+      "region": "The square badge’s outline",
+      "use": "The outline of the square badge"
+    },
+    {
+      "name": "badgeTriangle",
+      "sentinel": "#FF08FF",
+      "kind": "extra",
+      "region": "The triangle badge",
+      "use": "The same badge as a triangle, for a second class of fact"
+    },
+    {
+      "name": "badgeTriangleEdge",
+      "sentinel": "#FF09FF",
+      "kind": "extra",
+      "region": "The triangle badge’s outline",
+      "use": "The outline of the triangle badge"
+    },
+    {
+      "name": "badgeCircle",
+      "sentinel": "#FF0AFF",
+      "kind": "extra",
+      "region": "The circle badge",
+      "use": "The same badge as a circle, for a third class of fact"
+    },
+    {
+      "name": "badgeCircleEdge",
+      "sentinel": "#FF0BFF",
+      "kind": "extra",
+      "region": "The circle badge’s outline",
+      "use": "The outline of the circle badge"
+    },
+    {
+      "name": "badgeStar",
+      "sentinel": "#FF0CFF",
+      "kind": "extra",
+      "region": "The star badge",
+      "use": "The same badge as a star, for a fourth class of fact"
+    },
+    {
+      "name": "badgeStarEdge",
+      "sentinel": "#FF0DFF",
+      "kind": "extra",
+      "region": "The star badge’s outline",
+      "use": "The outline of the star badge"
+    },
+    {
+      "name": "inUseFrom",
+      "sentinel": "#FF0EFF",
+      "kind": "extra",
+      "region": "The in-use gradient’s centre stop",
+      "use": "The centre stop of the in-use gradient. Transparent and the disc keeps `body`"
+    },
+    {
+      "name": "inUseTo",
+      "sentinel": "#FF0FFF",
+      "kind": "extra",
+      "region": "The in-use gradient’s edge stop",
+      "use": "The edge stop of the in-use gradient. Both stops go off together"
+    },
+    {
+      "name": "locked",
+      "sentinel": "#FF10FF",
+      "kind": "extra",
+      "region": "The pause mark",
+      "use": "The fill of the pause mark. It appears when the rider has locked the vehicle"
+    },
+    {
+      "name": "lockedEdge",
+      "sentinel": "#FF11FF",
+      "kind": "extra",
+      "region": "The pause mark’s outline and bars",
+      "use": "The pause mark’s outline AND its two bars — both are the background colour"
+    },
+    {
+      "name": "bike",
+      "sentinel": "#FF12FF",
+      "kind": "glyph",
+      "region": "The bike glyph",
+      "use": "FUNCTIONAL / Active. The only state that uses the brand mark",
+      "source": "packages/ui/icons/forest/bike.svg"
+    },
+    {
+      "name": "pine",
+      "sentinel": "#FF13FF",
+      "kind": "glyph",
+      "region": "The pine glyph",
+      "use": "Any rental. A rider has it",
+      "source": "packages/ui/icons/forest/mark.svg"
+    },
+    {
+      "name": "eye",
+      "sentinel": "#FF14FF",
+      "kind": "glyph",
+      "region": "The eye glyph",
+      "use": "INSPECT / Inspect. Somebody looks at it",
+      "source": "lucide:eye"
+    },
+    {
+      "name": "relocate",
+      "sentinel": "#FF15FF",
+      "kind": "glyph",
+      "region": "The relocate glyph",
+      "use": "RELOCATE / Relocate. It must be moved",
+      "source": "lucide:arrow-right-left"
+    },
+    {
+      "name": "wrench",
+      "sentinel": "#FF16FF",
+      "kind": "glyph",
+      "region": "The wrench glyph",
+      "use": "MAINTENANCE / Task in progress",
+      "source": "lucide:wrench"
+    },
+    {
+      "name": "warehouse",
+      "sentinel": "#FF17FF",
+      "kind": "glyph",
+      "region": "The warehouse glyph",
+      "use": "SERVICE_WORKSHOP / Warehouse",
+      "source": "lucide:warehouse"
+    },
+    {
+      "name": "truck",
+      "sentinel": "#FF18FF",
+      "kind": "glyph",
+      "region": "The truck glyph",
+      "use": "COLLECT / Damage collect. Someone takes it away",
+      "source": "lucide:truck"
+    },
+    {
+      "name": "bandage",
+      "sentinel": "#FF19FF",
+      "kind": "glyph",
+      "region": "The bandage glyph",
+      "use": "SERVICE_ON_SITE / Damaged",
+      "source": "lucide:bandage"
+    },
+    {
+      "name": "question",
+      "sentinel": "#FF1AFF",
+      "kind": "glyph",
+      "region": "The question glyph",
+      "use": "LOST / Missing",
+      "source": "lucide:circle-question-mark"
+    },
+    {
+      "name": "hand",
+      "sentinel": "#FF1BFF",
+      "kind": "glyph",
+      "region": "The hand glyph",
+      "use": "OPERATIONAL_HOLD / Support & community",
+      "source": "lucide:hand"
+    },
+    {
+      "name": "flag",
+      "sentinel": "#FF1CFF",
+      "kind": "glyph",
+      "region": "The flag glyph",
+      "use": "AWAITING_ACTION / Investigation",
+      "source": "lucide:flag"
+    },
+    {
+      "name": "ready",
+      "sentinel": "#FF1DFF",
+      "kind": "glyph",
+      "region": "The ready glyph",
+      "use": "READY_FOR_DEPLOYMENT / Ready for deployment",
+      "source": "lucide:package-check"
+    },
+    {
+      "name": "skull",
+      "sentinel": "#FF1EFF",
+      "kind": "glyph",
+      "region": "The skull glyph",
+      "use": "RETIRED / Terminated. Out of the fleet permanently",
+      "source": "lucide:skull"
+    },
+    {
+      "name": "container",
+      "sentinel": "#FF1FFF",
+      "kind": "glyph",
+      "region": "The container glyph",
+      "use": "IMPOUNDED / Storage",
+      "source": "lucide:container"
+    },
+    {
+      "name": "staff",
+      "sentinel": "#FF20FF",
+      "kind": "glyph",
+      "region": "The staff glyph",
+      "use": "SERVICE_MECHANICS / Staff. An internal team has it",
+      "source": "lucide:briefcase-business"
+    }
+  ],
+  "bannedElements": [
+    "style",
+    "text",
+    "tspan",
+    "image",
+    "clipPath",
+    "mask",
+    "filter",
+    "pattern",
+    "marker",
+    "symbol",
+    "foreignObject"
+  ],
+  "generator": "scripts/mapMarker.ts"
+}

package/packages/ui/icons/forest/map/place-count-manifest.json

@@ -0,0 +1,83 @@
+{
+  "id": "forest-place-count",
+  "file": "forest-place-count.svg",
+  "width": 42,
+  "height": 28,
+  "shape": "stretchable-pill",
+  "ring": {
+    "stroke": 2.8,
+    "ratio": 0.2
+  },
+  "floor": {
+    "px": 1,
+    "atIconSize": 0.7,
+    "edges": [
+      {
+        "name": "ring",
+        "units": 2.8,
+        "painted": 1.96
+      }
+    ]
+  },
+  "glyph": {
+    "canvas": 24,
+    "scale": 0.5,
+    "strokeWidth": 2.52,
+    "cx": 14,
+    "cy": 14
+  },
+  "stretchX": {
+    "left": 25,
+    "width": 2
+  },
+  "content": {
+    "left": 25,
+    "top": 0,
+    "width": 9,
+    "height": 28
+  },
+  "requires": {
+    "icon-text-fit": "width"
+  },
+  "params": [
+    {
+      "name": "body",
+      "sentinel": "#FF00FF",
+      "kind": "body",
+      "region": "The pill",
+      "use": "The colour of the place."
+    },
+    {
+      "name": "ring",
+      "sentinel": "#FF01FF",
+      "kind": "extra",
+      "region": "The ring",
+      "use": "The border, and the halo that separates the mark from the basemap."
+    },
+    {
+      "name": "warehouse",
+      "sentinel": "#FF02FF",
+      "kind": "glyph",
+      "region": "the warehouse glyph",
+      "use": "A warehouse or workshop. Vehicles are repaired and stored here.",
+      "source": "lucide:house"
+    },
+    {
+      "name": "parking",
+      "sentinel": "#FF03FF",
+      "kind": "glyph",
+      "region": "the parking glyph",
+      "use": "A parking bay or station. A rider should leave a vehicle here.",
+      "source": "packages/ui/icons/forest/parking.svg"
+    },
+    {
+      "name": "bike",
+      "sentinel": "#FF04FF",
+      "kind": "glyph",
+      "region": "the bike glyph",
+      "use": "A count of vehicles. Used on the pill, where the number says how many.",
+      "source": "packages/ui/icons/forest/bike.svg"
+    }
+  ],
+  "generator": "scripts/mapPlaces.ts"
+}

package/packages/ui/icons/forest/map/place-manifest.json

@@ -0,0 +1,74 @@
+{
+  "id": "forest-place-marker",
+  "file": "forest-place-marker.svg",
+  "size": 40,
+  "shape": "rounded-square",
+  "square": {
+    "x": 1.665,
+    "y": 1.665,
+    "side": 36.67,
+    "corner": 9.17,
+    "half": 16.67
+  },
+  "ring": {
+    "stroke": 3.33,
+    "ratio": 0.2
+  },
+  "floor": {
+    "px": 1,
+    "atIconSize": 0.7,
+    "edges": [
+      {
+        "name": "ring",
+        "units": 3.33,
+        "painted": 2.33
+      }
+    ]
+  },
+  "glyph": {
+    "canvas": 24,
+    "scale": 0.9585,
+    "strokeWidth": 1.74
+  },
+  "params": [
+    {
+      "name": "body",
+      "sentinel": "#FF00FF",
+      "kind": "body",
+      "region": "The square",
+      "use": "The colour of the place."
+    },
+    {
+      "name": "ring",
+      "sentinel": "#FF01FF",
+      "kind": "extra",
+      "region": "The ring",
+      "use": "The border, and the halo that separates the mark from the basemap."
+    },
+    {
+      "name": "warehouse",
+      "sentinel": "#FF02FF",
+      "kind": "glyph",
+      "region": "the warehouse glyph",
+      "use": "A warehouse or workshop. Vehicles are repaired and stored here.",
+      "source": "lucide:house"
+    },
+    {
+      "name": "parking",
+      "sentinel": "#FF03FF",
+      "kind": "glyph",
+      "region": "the parking glyph",
+      "use": "A parking bay or station. A rider should leave a vehicle here.",
+      "source": "packages/ui/icons/forest/parking.svg"
+    },
+    {
+      "name": "bike",
+      "sentinel": "#FF04FF",
+      "kind": "glyph",
+      "region": "the bike glyph",
+      "use": "A count of vehicles. Used on the pill, where the number says how many.",
+      "source": "packages/ui/icons/forest/bike.svg"
+    }
+  ],
+  "generator": "scripts/mapPlaces.ts"
+}

package/packages/ui/src/address/address.ts

@@ -0,0 +1,125 @@
+// One address shape, and the normalisers that get Mapbox's several into it.
+//
+// ★ THE NORMALISING IS THE POINT, not the requests. Mapbox answers address questions from three
+// different endpoints and each names the parts differently: Autofill flattens them onto W3C-ish keys
+// (`address_line1`, `address_level2`), Geocoding nests them under `context` with its own slot names
+// (`context.place`, `context.region`), and Validation echoes a third variation back. A form binding
+// six inputs does not want to know which endpoint answered — so everything here lands on one shape and
+// the endpoint wrappers stay thin.
+
+/** An address, in the shape a form binds to. Every part optional: Mapbox omits what it cannot find. */
+export interface ForestAddress {
+  line1?: string;
+  line2?: string;
+  /**
+   * The named area below the city — Islington, Hackney, Shoreditch.
+   *
+   * ★ THIS IS NOT `city`, and conflating them is the trap. For any London address Mapbox answers
+   * `place: "London"`, and the borough a rider would actually name lands in `locality`. A surface
+   * writing "Islington to Hackney" that read `city` would print "London to London" and lose the only
+   * distinction it was making.
+   */
+  locality?: string;
+  /** finer still — a named neighbourhood inside a locality, where Mapbox has one */
+  neighborhood?: string;
+  /** the town or city — `address_level2` in W3C terms, `context.place` in Geocoding's */
+  city?: string;
+  /** county, state or province — `address_level1` / `context.region` */
+  region?: string;
+  postcode?: string;
+  country?: string;
+  /** ISO 3166-1 alpha-2, uppercase */
+  countryCode?: string;
+  /** what Mapbox itself would print for this address, when it offered one */
+  formatted?: string;
+  /** [lng, lat] — present when the answer came with a position */
+  at?: [number, number];
+}
+
+/**
+ * ★ Absent parts stay `undefined`, never ''. A form binds these straight to inputs, and the two are
+ * not interchangeable there: '' blanks a field the reader may have typed into, `undefined` leaves it
+ * alone. Autofill routinely omits line2 and region, so this is the common path rather than an edge.
+ */
+const text = (v: unknown): string | undefined => (typeof v === 'string' && v.length ? v : undefined);
+
+function position(geometry: unknown): [number, number] | undefined {
+  const coords = (geometry as { coordinates?: unknown } | undefined)?.coordinates;
+  return Array.isArray(coords) && typeof coords[0] === 'number' && typeof coords[1] === 'number'
+    ? [coords[0], coords[1]]
+    : undefined;
+}
+
+/**
+ * A retrieved Address Autofill feature → ForestAddress.
+ *
+ * ★ `properties` is typed loosely on purpose. Mapbox declares a different concrete interface for each
+ * endpoint's feature, and naming one here would reject the others at the call site for no gain — this
+ * reads a handful of optional string fields and checks each one anyway.
+ */
+export function fromAutofill(feature: { properties?: unknown; geometry?: unknown }): ForestAddress {
+  const p = (feature.properties ?? {}) as Record<string, unknown>;
+  return {
+    line1: text(p.address_line1),
+    line2: text(p.address_line2),
+    // Autofill's level3 is the same rung as Geocoding's `locality`; it has no neighbourhood at all.
+    locality: text(p.address_level3),
+    neighborhood: undefined,
+    city: text(p.address_level2),
+    region: text(p.address_level1),
+    postcode: text(p.postcode),
+    country: text(p.country),
+    countryCode: text(p.country_code)?.toUpperCase(),
+    formatted: text(p.full_address),
+    at: position(feature.geometry),
+  };
+}
+
+/** A Geocoding feature — forward or reverse — → ForestAddress. */
+export function fromGeocodingFeature(feature: {
+  properties?: unknown;
+  geometry?: unknown;
+}): ForestAddress {
+  const p = (feature.properties ?? {}) as Record<string, unknown>;
+  const ctx = (p.context ?? {}) as Record<string, { name?: unknown; country_code?: unknown }>;
+  const slot = (key: string) => text(ctx[key]?.name);
+
+  return {
+    // `context.address` is the street line when Mapbox resolved to a building; `properties.name` is
+    // what it resolved to at any other precision, which for a reverse lookup is often the street.
+    line1: slot('address') ?? text(p.name),
+    line2: undefined,
+    locality: slot('locality'),
+    neighborhood: slot('neighborhood'),
+    city: slot('place'),
+    region: slot('region'),
+    postcode: slot('postcode'),
+    country: slot('country'),
+    countryCode: text(ctx.country?.country_code)?.toUpperCase(),
+    formatted: text(p.full_address),
+    at: position(feature.geometry),
+  };
+}
+
+/**
+ * The address as one line, in postal order, skipping whatever is missing.
+ *
+ * For when Mapbox gave no `formatted` of its own, or the reader has edited the parts since — a
+ * surface that printed a stale `formatted` beside edited fields would be showing two addresses.
+ */
+/**
+ * The most specific name a person would use for where this is — "Shoreditch", "Islington", "London".
+ *
+ * For naming a place in a sentence rather than addressing an envelope: a ride's start and end, a bay's
+ * area, "reported near…". Falls down the rungs because Mapbox does not have every one everywhere —
+ * a village has a `place` and nothing below it.
+ */
+export function areaLabel(address: ForestAddress): string | undefined {
+  return address.neighborhood ?? address.locality ?? address.city;
+}
+
+export function formatAddress(address: ForestAddress): string {
+  return [address.line1, address.line2, address.city, address.postcode, address.country]
+    .filter((part): part is string => !!part)
+    .join(', ');
+}