@sierragridteam/design-system 0.0.0-stage → 0.3.1

package/src/components/Select.astro

@@ -0,0 +1,202 @@
+---
+import Icon from "./Icon.astro";
+interface Props {
+  id: string;
+  options: { value: string; label: string; disabled?: boolean }[];
+  value?: string;
+  name?: string;
+  disabled?: boolean;
+  "aria-describedby"?: string;
+}
+const {
+  id,
+  options,
+  value = options.find((o) => !o.disabled)?.value ?? "",
+  name,
+  disabled,
+  "aria-describedby": describedBy,
+} = Astro.props;
+const selected = options.find((o) => o.value === value);
+---
+
+<sierra-select>
+  <button
+    id={id}
+    type="button"
+    class="select select-trigger"
+    role="combobox"
+    aria-haspopup="listbox"
+    aria-expanded="false"
+    aria-controls={`${id}-options`}
+    aria-describedby={describedBy}
+    value={value}
+    disabled={disabled}
+  >
+    <span data-select-label>{selected?.label}</span>
+    <Icon name="chevron-down" class="select-chevron" />
+  </button>
+  <input type="hidden" name={name} value={value} disabled={disabled} />
+  <div
+    id={`${id}-options`}
+    class="select-popover"
+    popover="auto"
+    role="listbox"
+    aria-labelledby={id}
+  >
+    {options.map((option, index) => (
+      <div
+        id={`${id}-option-${index}`}
+        class="select-option"
+        role="option"
+        aria-selected={option.value === value}
+        aria-disabled={option.disabled || undefined}
+        data-value={option.value}
+      >
+        <span>{option.label}</span>
+        <Icon name="check" class="select-check" />
+      </div>
+    ))}
+  </div>
+</sierra-select>
+<script>
+  class SierraSelect extends HTMLElement {
+    cleanup?: AbortController;
+    connectedCallback() {
+      this.cleanup?.abort();
+      this.cleanup = new AbortController();
+      const { signal } = this.cleanup;
+      const trigger = this.querySelector<HTMLButtonElement>("button")!;
+      const input = this.querySelector<HTMLInputElement>("input")!;
+      const panel = this.querySelector<HTMLElement>("[popover]")!;
+      const options = [...panel.querySelectorAll<HTMLElement>("[role=option]")];
+      const enabled = options.filter(
+        (o) => o.getAttribute("aria-disabled") !== "true",
+      );
+      let active = enabled.findIndex((o) => o.dataset.value === trigger.value);
+      let search = "";
+      let searchedAt = 0;
+      const isOpen = () => panel.matches(":popover-open");
+      const highlight = (index: number) => {
+        active = Math.max(0, Math.min(index, enabled.length - 1));
+        options.forEach((o) =>
+          o.classList.toggle("is-active", o === enabled[active]),
+        );
+        if (enabled[active]) {
+          trigger.setAttribute("aria-activedescendant", enabled[active].id);
+          enabled[active].scrollIntoView({ block: "nearest" });
+        }
+      };
+      const position = () => {
+        const box = trigger.getBoundingClientRect();
+        panel.style.width = `${Math.min(box.width, innerWidth - 16)}px`;
+        panel.style.left = `${Math.max(8, Math.min(box.left, innerWidth - panel.offsetWidth - 8))}px`;
+        const below = innerHeight - box.bottom - 8;
+        const above = box.top - 8;
+        const up = below < Math.min(panel.scrollHeight, 240) && above > below;
+        panel.style.maxHeight = `${Math.max(0, Math.min(240, up ? above : below))}px`;
+        panel.style.top = `${up ? box.top - panel.offsetHeight - 4 : box.bottom + 4}px`;
+      };
+      const open = () => {
+        panel.showPopover();
+        position();
+        trigger.setAttribute("aria-expanded", "true");
+        highlight(enabled.findIndex((o) => o.dataset.value === trigger.value));
+      };
+      const close = () => {
+        if (isOpen()) panel.hidePopover();
+      };
+      const choose = (option: HTMLElement) => {
+        if (!enabled.includes(option)) return;
+        trigger.value = input.value = option.dataset.value!;
+        this.querySelector("[data-select-label]")!.textContent =
+          option.querySelector("span")!.textContent;
+        options.forEach((o) =>
+          o.setAttribute("aria-selected", String(o === option)),
+        );
+        close();
+        trigger.focus();
+        trigger.dispatchEvent(new Event("input", { bubbles: true }));
+        trigger.dispatchEvent(new Event("change", { bubbles: true }));
+      };
+      trigger.addEventListener("click", () => (isOpen() ? close() : open()), {
+        signal,
+      });
+      panel.addEventListener(
+        "toggle",
+        () => {
+          trigger.setAttribute("aria-expanded", String(isOpen()));
+          if (!isOpen()) trigger.removeAttribute("aria-activedescendant");
+        },
+        { signal },
+      );
+      panel.addEventListener(
+        "click",
+        (event) => {
+          const option = (event.target as Element).closest<HTMLElement>(
+            "[role=option]",
+          );
+          if (option) choose(option);
+        },
+        { signal },
+      );
+      trigger.addEventListener(
+        "keydown",
+        (event) => {
+          if (event.key === "Tab" || event.key === "Escape") {
+            close();
+            return;
+          }
+          if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+            event.preventDefault();
+            const wasOpen = isOpen();
+            if (!wasOpen) open();
+            highlight(
+              event.key === "Home"
+                ? 0
+                : event.key === "End"
+                  ? enabled.length - 1
+                  : active +
+                    (wasOpen ? (event.key === "ArrowDown" ? 1 : -1) : 0),
+            );
+          } else if ((event.key === "Enter" || event.key === " ") && isOpen()) {
+            event.preventDefault();
+            if (enabled[active]) choose(enabled[active]);
+          } else if (
+            event.key.length === 1 &&
+            !event.ctrlKey &&
+            !event.metaKey &&
+            !event.altKey &&
+            event.key !== " "
+          ) {
+            event.preventDefault();
+            if (!isOpen()) open();
+            search =
+              Date.now() - searchedAt > 600 ? event.key : search + event.key;
+            searchedAt = Date.now();
+            const index = enabled.findIndex((o) =>
+              o.textContent
+                ?.trim()
+                .toLowerCase()
+                .startsWith(search.toLowerCase()),
+            );
+            if (index >= 0) highlight(index);
+          }
+        },
+        { signal },
+      );
+      window.addEventListener("resize", close, { signal });
+      document.addEventListener(
+        "scroll",
+        (event) => {
+          if (!panel.contains(event.target as Node)) close();
+        },
+        { capture: true, signal },
+      );
+    }
+    disconnectedCallback() {
+      this.cleanup?.abort();
+    }
+  }
+  if (!customElements.get("sierra-select"))
+    customElements.define("sierra-select", SierraSelect);
+</script>

package/src/components/ValueTable.astro

@@ -0,0 +1,32 @@
+---
+import { formatDataValue, type DataValue } from "../lib/data-values";
+interface Props {
+  label: string;
+  rows: {
+    label: string;
+    value?: DataValue;
+    description?: string;
+    missing?: string;
+  }[];
+}
+const { label, rows } = Astro.props;
+---
+
+<table class="ds-values">
+  <caption>{label}</caption>
+  <tbody>
+    {rows.map((row) => (
+      <tr>
+        <th scope="row">{row.label}</th>
+        <td>
+          <div class="ds-value">
+            {row.value === undefined
+              ? (row.missing ?? "Not provided")
+              : formatDataValue(row.value)}
+          </div>
+          {row.description && <p class="ds-data-note">{row.description}</p>}
+        </td>
+      </tr>
+    ))}
+  </tbody>
+</table>

package/src/lib/basemap-style.ts

@@ -0,0 +1,269 @@
+/**
+ * basemap-style.ts — the ground both maps (/live hazards, /mesh topology) draw on: OpenFreeMap
+ * Positron, restyled to match the homepage hero's map (src/assets/hero-map.svg) so every map
+ * on the site reads as one place. `map-ground.ts` fetches it and adds the runtime pieces.
+ *
+ * PURE: takes the fetched Positron style document and returns a new one. No MapLibre import,
+ * no DOM — `basemap-style.test.ts` validates the output against the real style spec, because
+ * MapLibre drops an invalid layer or expression SILENTLY (see mesh-link-paint.ts).
+ *
+ * Rather than patch Positron's ~60 layers, this composes a short layer list of its own over
+ * Positron's sources, glyphs and label expressions. Everything not listed is simply absent:
+ * landuse and park fills, buildings, POIs, rail, aeroways, hillshade, state and country lines.
+ *
+ *   • Land is the hero's map ground, water a pale green-grey, no water labels below z10.
+ *   • Roads are knocked-out lines with a warm hairline casing (without one they vanish into the
+ *     ground at corridor zoom): highways 3.4px at z9–11 rising to 5px at z13, secondary roads
+ *     from z8, tertiary from z10, minor from z12. The tiles carry nothing finer at corridor zoom.
+ *   • Landmarks: villages from z8 (Arnold, Murphys, Bear Valley), lake names from z8, the top
+ *     summit in each tile cell with a dot, and park and forest names.
+ *   • Route shields are pills (`ROUTE_PILL`, an image the map module draws at load). OpenFreeMap
+ *     only ships road refs from z12, so they appear once a reader zooms in.
+ *   • County lines are warm hairlines; nothing above or below county level.
+ *   • Place names are muted italics. The design asks for a serif italic; OpenFreeMap serves
+ *     only Noto Sans glyphs, so Noto Sans Italic is the closest available face.
+ *
+ * Colours come in from the caller (read from tokens.css at runtime) — tokens stay the source
+ * of truth, and MapLibre needs literal colours.
+ */
+
+/** The bits of a MapLibre style document this module reads or writes. */
+export interface StyleDoc {
+  version: 8;
+  sources: Record<string, unknown>;
+  layers: { id: string; type: string; layout?: Record<string, unknown> }[];
+  glyphs?: string;
+  sprite?: unknown;
+  [k: string]: unknown;
+}
+
+export interface BasemapColors {
+  land: string;
+  water: string;
+  road: string;
+  roadCasing: string;
+  countyLine: string;
+  place: string;
+  shieldText: string;
+}
+
+/** Image id for the route-shield pill. The map module draws it (it needs a canvas). */
+export const ROUTE_PILL = 'mesh-route-pill';
+
+/** Positron's place-name expression, so non-Latin names keep their fallback. */
+const NAME = [
+  'case',
+  ['has', 'name:nonlatin'],
+  ['concat', ['get', 'name:latin'], '\n', ['get', 'name:nonlatin']],
+  ['coalesce', ['get', 'name_en'], ['get', 'name']],
+];
+
+const SOURCE = 'openmaptiles';
+
+/** Roads drawn, least to most important: [layer id, OpenMapTiles classes, minzoom, width]. */
+const ROADS: [string, string[], number, unknown][] = [
+  ['road-minor', ['minor'], 12, 1],
+  ['road-tertiary', ['tertiary'], 10, ['interpolate', ['linear'], ['zoom'], 10, 0.8, 13, 1.6]],
+  [
+    'road-secondary',
+    ['secondary'],
+    8,
+    ['interpolate', ['linear'], ['zoom'], 8, 0.8, 11, 1.6, 13, 2.4],
+  ],
+  [
+    'road-major',
+    ['motorway', 'trunk', 'primary'],
+    5,
+    ['interpolate', ['linear'], ['zoom'], 6, 1, 9, 3.4, 11, 3.4, 13, 5],
+  ],
+];
+/** A casing is its road's width plus a hairline each side, at every zoom stop. */
+const casing = (width: unknown): unknown =>
+  Array.isArray(width)
+    ? width.map((v, i) => (i >= 4 && i % 2 === 0 && typeof v === 'number' ? v + 1.4 : v))
+    : (width as number) + 1.4;
+
+/** One summit per tile cell (OpenMapTiles ranks peaks within each cell; 1 is the most prominent). */
+const PEAK = ['all', ['has', 'name'], ['==', ['get', 'rank'], 1]];
+const isLine = ['match', ['geometry-type'], ['LineString', 'MultiLineString'], true, false];
+const roadClass = (classes: string[]) => [
+  'all',
+  isLine,
+  ['match', ['get', 'class'], classes, true, false],
+];
+
+/**
+ * Build the site basemap from Positron. Returns null when the input has no vector source to
+ * draw from (the screenshot harness serves a background-only stub) — the caller then uses the
+ * input as-is, so an offline map still loads.
+ */
+export function restyleBasemap(positron: StyleDoc, c: BasemapColors): StyleDoc | null {
+  if (!positron?.sources?.[SOURCE]) return null;
+
+  const layers: Record<string, unknown>[] = [
+    { id: 'background', type: 'background', paint: { 'background-color': c.land } },
+    {
+      id: 'water',
+      type: 'fill',
+      source: SOURCE,
+      'source-layer': 'water',
+      filter: ['!=', ['get', 'brunnel'], 'tunnel'],
+      paint: { 'fill-color': c.water },
+    },
+    {
+      id: 'waterway',
+      type: 'line',
+      source: SOURCE,
+      'source-layer': 'waterway',
+      minzoom: 9,
+      paint: { 'line-color': c.water, 'line-width': 1 },
+    },
+    {
+      id: 'boundary-county',
+      type: 'line',
+      source: SOURCE,
+      'source-layer': 'boundary',
+      filter: ['all', ['==', ['get', 'admin_level'], 6], ['!=', ['get', 'maritime'], 1]],
+      paint: { 'line-color': c.countyLine, 'line-width': 1 },
+    },
+    // Casings first, so every road reads as a pale line with a warm edge rather than vanishing
+    // into the ground; the fill is drawn over all of them, so junctions stay knocked out.
+    ...ROADS.map(([id, classes, minzoom, width]) => ({
+      id: `${id}-casing`,
+      type: 'line',
+      source: SOURCE,
+      'source-layer': 'transportation',
+      minzoom,
+      filter: roadClass(classes),
+      layout: { 'line-cap': 'round', 'line-join': 'round' },
+      paint: { 'line-color': c.roadCasing, 'line-width': casing(width) },
+    })),
+    ...ROADS.map(([id, classes, minzoom, width]) => ({
+      id,
+      type: 'line',
+      source: SOURCE,
+      'source-layer': 'transportation',
+      minzoom,
+      filter: roadClass(classes),
+      layout: { 'line-cap': 'round', 'line-join': 'round' },
+      paint: { 'line-color': c.road, 'line-width': width },
+    })),
+    {
+      id: 'water-label',
+      type: 'symbol',
+      source: SOURCE,
+      'source-layer': 'water_name',
+      minzoom: 8,
+      layout: {
+        'text-field': NAME,
+        'text-font': ['Noto Sans Italic'],
+        'text-size': 10,
+        'text-max-width': 6,
+      },
+      paint: { 'text-color': c.place, 'text-halo-color': c.land, 'text-halo-width': 1.2 },
+    },
+    // Landmarks, quieter than the towns and placed after them (lower layers yield on
+    // collision): the most prominent summit in each tile cell, marked with a small dot since
+    // repeaters sit on summits, and the parks and forests by name.
+    {
+      id: 'peak-dot',
+      type: 'circle',
+      source: SOURCE,
+      'source-layer': 'mountain_peak',
+      minzoom: 8,
+      filter: PEAK,
+      paint: { 'circle-radius': 1.5, 'circle-color': c.place },
+    },
+    {
+      id: 'peak-label',
+      type: 'symbol',
+      source: SOURCE,
+      'source-layer': 'mountain_peak',
+      minzoom: 8,
+      filter: PEAK,
+      layout: {
+        'text-field': NAME,
+        'text-font': ['Noto Sans Italic'],
+        'text-size': 9,
+        'text-anchor': 'left',
+        'text-offset': [0.5, 0],
+        'text-max-width': 7,
+      },
+      paint: { 'text-color': c.place, 'text-halo-color': c.land, 'text-halo-width': 1.2 },
+    },
+    {
+      id: 'park-label',
+      type: 'symbol',
+      source: SOURCE,
+      'source-layer': 'park',
+      minzoom: 8,
+      filter: ['all', ['==', ['geometry-type'], 'Point'], ['<=', ['get', 'rank'], 1]],
+      layout: {
+        'text-field': NAME,
+        'text-font': ['Noto Sans Italic'],
+        'text-size': 9,
+        'text-max-width': 8,
+        'text-letter-spacing': 0.04,
+      },
+      paint: { 'text-color': c.place, 'text-halo-color': c.land, 'text-halo-width': 1.2 },
+    },
+    {
+      id: 'route-shield',
+      type: 'symbol',
+      source: SOURCE,
+      'source-layer': 'transportation_name',
+      minzoom: 8,
+      filter: [
+        'all',
+        isLine,
+        ['<=', ['get', 'ref_length'], 3],
+        ['match', ['get', 'network'], ['us-interstate', 'us-highway', 'us-state'], true, false],
+      ],
+      layout: {
+        'symbol-placement': 'line',
+        'symbol-spacing': 420,
+        'text-field': ['to-string', ['get', 'ref']],
+        'text-font': ['Noto Sans Bold'],
+        'text-size': 8,
+        'text-rotation-alignment': 'viewport',
+        'icon-image': ROUTE_PILL,
+        'icon-text-fit': 'both',
+        'icon-text-fit-padding': [2, 5, 2, 5],
+        'icon-rotation-alignment': 'viewport',
+      },
+      paint: { 'text-color': c.shieldText },
+    },
+    // Place names: one muted italic, sized by the place's weight, never bolder than the mesh.
+    ...(
+      [
+        ['place-city', 'city', 4, 11],
+        ['place-town', 'town', 7, 11],
+        ['place-village', 'village', 8, 10],
+      ] as const
+    ).map(([id, cls, minzoom, size]) => ({
+      id,
+      type: 'symbol',
+      source: SOURCE,
+      'source-layer': 'place',
+      minzoom,
+      filter: ['==', ['get', 'class'], cls],
+      layout: {
+        'text-field': NAME,
+        'text-font': ['Noto Sans Italic'],
+        'text-size': size,
+        'text-max-width': 8,
+      },
+      paint: { 'text-color': c.place, 'text-halo-color': c.land, 'text-halo-width': 1.4 },
+    })),
+  ];
+
+  return {
+    version: 8,
+    name: 'S.I.E.R.R.A',
+    sources: { [SOURCE]: positron.sources[SOURCE] },
+    glyphs: positron.glyphs,
+    // No sprite: every icon Positron's sprite provided belonged to a layer dropped above, and
+    // the one image we use (the route pill) is drawn at runtime.
+    layers: layers as StyleDoc['layers'],
+  };
+}

package/src/lib/controls.ts

@@ -0,0 +1,126 @@
+/**
+ * Form controls for client-rendered admin UI: buttons, the two-click confirm
+ * button, and labelled fields. They emit the global classes from
+ * src/styles/components.css, like the Field and Button components do.
+ */
+import { el, icon } from './dom';
+
+const CONFIRM_TIMEOUT_MS = 4000;
+
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline';
+
+export function button(
+  label: string,
+  variant: ButtonVariant,
+  onClick: (b: HTMLButtonElement) => void,
+  opts: { icon?: string; small?: boolean } = {}
+): HTMLButtonElement {
+  const b = el(
+    'button',
+    { class: `btn btn--${variant}${opts.small === false ? '' : ' btn--sm'}`, type: 'button' },
+    opts.icon && icon(opts.icon),
+    label
+  );
+  b.addEventListener('click', () => onClick(b));
+  return b;
+}
+
+/** A square ghost button with only an icon; `label` is its accessible name and tooltip. */
+export function iconButton(
+  iconName: string,
+  label: string,
+  onClick: (b: HTMLButtonElement) => void
+): HTMLButtonElement {
+  const b = el(
+    'button',
+    {
+      class: 'btn btn--ghost btn--sm btn--icon',
+      type: 'button',
+      'aria-label': label,
+      title: label,
+    },
+    icon(iconName)
+  );
+  b.addEventListener('click', () => onClick(b));
+  return b;
+}
+
+/**
+ * A button that needs a second click to fire: the first click turns it into
+ * an orange "Confirm …" for a few seconds. Used instead of window.confirm().
+ */
+export function confirmButton(
+  label: string,
+  confirmLabel: string,
+  onConfirm: (b: HTMLButtonElement) => void,
+  variant: ButtonVariant = 'outline'
+): HTMLButtonElement {
+  const idle = `btn btn--${variant} btn--sm`;
+  const b = el('button', { class: idle, type: 'button' }, label);
+  let timer = 0;
+  const disarm = () => {
+    window.clearTimeout(timer);
+    b.dataset.armed = '';
+    b.textContent = label;
+    b.className = idle;
+  };
+  b.addEventListener('click', () => {
+    if (b.dataset.armed) {
+      window.clearTimeout(timer);
+      onConfirm(b);
+      return;
+    }
+    b.dataset.armed = 'true';
+    b.textContent = confirmLabel;
+    b.className = 'btn btn--danger btn--sm';
+    timer = window.setTimeout(disarm, CONFIRM_TIMEOUT_MS);
+  });
+  b.addEventListener('blur', disarm);
+  return b;
+}
+
+let fieldCount = 0;
+
+export interface FieldOptions {
+  help?: string;
+  optional?: boolean;
+}
+
+/** Label, control, help and an error line; the markup of src/components/Field.astro. */
+export function field(
+  label: string,
+  control: HTMLElement,
+  opts: FieldOptions = {}
+): HTMLDivElement {
+  const id = control.id || `f-${++fieldCount}`;
+  control.id = id;
+  const help = opts.help ? el('p', { class: 'field__help', id: `${id}-help` }, opts.help) : null;
+  if (help) control.setAttribute('aria-describedby', help.id);
+  return el(
+    'div',
+    { class: 'field' },
+    el(
+      'label',
+      { class: 'field__label', for: id },
+      label,
+      opts.optional && el('span', { class: 'field__optional' }, '(optional)')
+    ),
+    control,
+    help,
+    el('p', { class: 'field__error', id: `${id}-error`, hidden: true })
+  );
+}
+
+/** Show or clear the error under a control made by field(). */
+export function setFieldError(control: HTMLElement, message: string | null): void {
+  const error = document.getElementById(`${control.id}-error`);
+  if (message) control.setAttribute('aria-invalid', 'true');
+  else control.removeAttribute('aria-invalid');
+  if (!error) return;
+  error.textContent = message ?? '';
+  error.hidden = !message;
+}
+
+export function input(attrs: Record<string, string | boolean | undefined> = {}): HTMLInputElement {
+  return el('input', { class: 'input', type: 'text', autocomplete: 'off', ...attrs });
+}

package/src/lib/data-values.ts

@@ -0,0 +1,45 @@
+/** JSON display preserves meaningful falsy values and distinguishes missing data. */
+export type DataValue =
+  string | number | boolean | null | DataValue[] | { [key: string]: DataValue };
+export function formatDataValue(value: DataValue | undefined): string {
+  if (value === undefined) return "Not provided";
+  if (value === null) return "null";
+  if (value === "") return '""';
+  return typeof value === "string" ? value : JSON.stringify(value);
+}
+export interface DataChange {
+  path: string;
+  kind: "added" | "removed" | "changed";
+  before?: DataValue;
+  after?: DataValue;
+}
+/** JSON Pointer paths are unambiguous even when keys contain periods or slashes. Arrays compare by index. */
+export function diffValues(before: DataValue, after: DataValue): DataChange[] {
+  const result: DataChange[] = [];
+  const walk = (a: DataValue, b: DataValue, path: string) => {
+    if (a === b) return;
+    if (
+      a !== null &&
+      b !== null &&
+      typeof a === "object" &&
+      typeof b === "object" &&
+      Array.isArray(a) === Array.isArray(b)
+    ) {
+      const left = a as Record<string, DataValue>,
+        right = b as Record<string, DataValue>;
+      for (const key of new Set([
+        ...Object.keys(left),
+        ...Object.keys(right),
+      ])) {
+        const next = `${path}/${key.replaceAll("~", "~0").replaceAll("/", "~1")}`;
+        if (!Object.hasOwn(left, key))
+          result.push({ path: next, kind: "added", after: right[key] });
+        else if (!Object.hasOwn(right, key))
+          result.push({ path: next, kind: "removed", before: left[key] });
+        else walk(left[key], right[key], next);
+      }
+    } else result.push({ path, kind: "changed", before: a, after: b });
+  };
+  walk(before, after, "");
+  return result;
+}