@sierragridteam/design-system 0.0.0-stage → 0.3.0

package/src/components/GeoJSONMap.astro

@@ -0,0 +1,280 @@
+---
+import type { FeatureCollection, Geometry } from "geojson";
+import Callout from "./Callout.astro";
+interface Props {
+  data: FeatureCollection<Geometry | null>;
+  label: string;
+  compact?: boolean;
+  basemap?: boolean;
+  /** Disable feature selection for a treatment overview; pan and zoom remain available. */
+  selectable?: boolean;
+}
+const {
+  data,
+  label,
+  compact = false,
+  basemap = false,
+  selectable = true,
+} = Astro.props;
+---
+
+<sierra-geo-map
+  class:list={["ds-geo-map", compact && "ds-map-compact"]}
+  data-features={JSON.stringify(data)}
+  data-basemap={String(basemap)}
+  data-selectable={String(selectable)}
+>
+  <div class="ds-map-canvas" aria-label={label}></div>
+  <p class="ds-map-fallback" role="status">
+    Loading map.
+  </p>
+  {selectable && (
+    <div class="ds-map-feature-list" aria-label="Map features">
+      {data.features.map((feature, index) => (
+        <button
+          type="button"
+          class="btn btn--outline btn--sm"
+          data-feature-index={index}
+        >
+          {String(feature.properties?.label ?? `Feature ${index + 1}`)}
+          {!feature.geometry && " · unlocated"}
+        </button>
+      ))}
+    </div>
+  )}
+  <p
+    hidden={!selectable}
+    class="ds-map-fallback"
+    data-selection
+    aria-live="polite"
+  >
+    Select a feature on the map or in the list.
+  </p>
+  {!selectable && (
+    <ul class="sr-only" aria-label="Map features">
+      {data.features.map((feature) => (
+        <li>
+          {feature.properties?.label}: {feature.properties?.description}
+        </li>
+      ))}
+    </ul>
+  )}
+  {!selectable && data.features.some((feature) => !feature.geometry) && (
+    <div class="ds-map-notice">
+      <Callout tone="brass" title="Reports without a location">
+        <p>
+          These records have no coordinates and cannot be placed on the map.
+        </p>
+        <ul>
+          {data.features
+            .filter((feature) => !feature.geometry)
+            .map((feature) => (
+              <li>{feature.properties?.label ?? "Unnamed report"}</li>
+            ))}
+        </ul>
+      </Callout>
+    </div>
+  )}
+  {basemap && (
+    <p class="ds-map-attribution">
+      <a href="https://www.openstreetmap.org/copyright">
+        © OpenStreetMap contributors
+      </a>{" "}
+      · <a href="https://openfreemap.org/">OpenFreeMap</a>
+    </p>
+  )}
+</sierra-geo-map>
+<script>
+  import maplibregl from "maplibre-gl";
+  import type { FeatureCollection, Geometry } from "geojson";
+  import "maplibre-gl/dist/maplibre-gl.css";
+  import { restyleBasemap, type StyleDoc } from "../lib/basemap-style";
+  class SierraGeoMap extends HTMLElement {
+    map?: maplibregl.Map;
+    observer?: ResizeObserver;
+    abort?: AbortController;
+    async connectedCallback() {
+      this.abort = new AbortController();
+      const { signal } = this.abort;
+      const data = JSON.parse(
+        this.dataset.features!,
+      ) as FeatureCollection<Geometry | null>;
+      const status = this.querySelector<HTMLElement>("[role=status]")!;
+      const selection = this.querySelector<HTMLElement>("[data-selection]")!;
+      const colors = getComputedStyle(this);
+      const token = (name: string) => colors.getPropertyValue(name).trim();
+      const select = (index: number) => {
+        const feature = data.features[index];
+        if (!feature) return;
+        selection.textContent = `${feature.properties?.label ?? "Feature"} — ${feature.properties?.description ?? (feature.geometry ? feature.geometry.type : "Location unavailable")}`;
+        this.querySelectorAll<HTMLButtonElement>(
+          "[data-feature-index]",
+        ).forEach((button, i) =>
+          button.setAttribute("aria-pressed", String(i === index)),
+        );
+        if (this.map?.getLayer("ds-points"))
+          this.map.setPaintProperty("ds-points", "circle-radius", [
+            "case",
+            ["==", ["id"], index],
+            10,
+            6,
+          ]);
+        this.dispatchEvent(
+          new CustomEvent("feature-select", {
+            detail: { feature, index },
+            bubbles: true,
+          }),
+        );
+      };
+      this.querySelectorAll<HTMLButtonElement>("[data-feature-index]").forEach(
+        (button) =>
+          button.addEventListener(
+            "click",
+            () => select(Number(button.dataset.featureIndex)),
+            { signal },
+          ),
+      );
+      let style: maplibregl.StyleSpecification = {
+        version: 8,
+        sources: {},
+        layers: [
+          {
+            id: "ground",
+            type: "background",
+            paint: { "background-color": token("--surface-hero") },
+          },
+        ],
+      };
+      let fallback = true;
+      if (this.dataset.basemap === "true") {
+        try {
+          const response = await fetch(
+            "https://tiles.openfreemap.org/styles/positron",
+            { signal: AbortSignal.any([signal, AbortSignal.timeout(5000)]) },
+          );
+          if (!response.ok) throw Error("Basemap failed");
+          const original = (await response.json()) as StyleDoc;
+          const styled = restyleBasemap(original, {
+            land: token("--surface-hero"),
+            water: token("--map-water"),
+            road: token("--map-road"),
+            roadCasing: token("--map-road-casing"),
+            countyLine: token("--map-county-line"),
+            place: token("--map-place"),
+            shieldText: token("--map-shield-text"),
+          });
+          style = (styled ??
+            original) as unknown as maplibregl.StyleSpecification;
+          // Route-shield artwork belongs to the engine adapter; retain road labels without missing sprite images.
+          style.layers = style.layers.filter(
+            (layer) =>
+              !(layer.type === "symbol" && layer.layout?.["icon-image"]),
+          );
+          fallback = false;
+        } catch {
+          /* Explicit fallback message below. */
+        }
+      }
+      if (signal.aborted) return;
+      try {
+        const map = (this.map = new maplibregl.Map({
+          container: this.querySelector<HTMLElement>(".ds-map-canvas")!,
+          style,
+          center: [-120.4, 38.1],
+          zoom: 8,
+          scrollZoom: false,
+          attributionControl: false,
+        }));
+        map.addControl(
+          new maplibregl.NavigationControl({ showCompass: false }),
+          "bottom-right",
+        );
+        map.on("error", () => {
+          status.hidden = false;
+          status.textContent =
+            "Some map resources are unavailable. Geographic context may be incomplete.";
+        });
+        map.on("load", () => {
+          status.textContent = fallback
+            ? "Geometry only — geographic basemap is not loaded."
+            : "";
+          status.hidden = !fallback;
+          const located = data.features.flatMap((f, i) =>
+            f.geometry ? [{ ...f, geometry: f.geometry, id: i }] : [],
+          );
+          map.addSource("features", {
+            type: "geojson",
+            data: { type: "FeatureCollection", features: located },
+          });
+          const color: maplibregl.ExpressionSpecification = [
+            "match",
+            ["get", "tone"],
+            "alarm",
+            token("--signal-orange"),
+            "brass",
+            token("--brand-brass"),
+            token("--brand-green"),
+          ];
+          map.addLayer({
+            id: "ds-areas",
+            type: "fill",
+            source: "features",
+            filter: ["==", ["geometry-type"], "Polygon"],
+            paint: { "fill-color": color, "fill-opacity": 0.12 },
+          });
+          map.addLayer({
+            id: "ds-lines",
+            type: "line",
+            source: "features",
+            filter: ["!=", ["geometry-type"], "Point"],
+            paint: { "line-color": color, "line-width": 2 },
+          });
+          map.addLayer({
+            id: "ds-points",
+            type: "circle",
+            source: "features",
+            filter: ["==", ["geometry-type"], "Point"],
+            paint: {
+              "circle-color": color,
+              "circle-radius": 6,
+              "circle-stroke-color": token("--surface-raised"),
+              "circle-stroke-width": 2,
+            },
+          });
+          if (this.dataset.selectable !== "false")
+            for (const layer of ["ds-areas", "ds-lines", "ds-points"])
+              map.on("click", layer, (event) => {
+                const id = event.features?.[0]?.id;
+                if (typeof id === "number") select(id);
+              });
+          const bounds = new maplibregl.LngLatBounds();
+          const positions = (value: unknown): void => {
+            if (!Array.isArray(value)) return;
+            if (typeof value[0] === "number" && typeof value[1] === "number")
+              bounds.extend([value[0], value[1]]);
+            else value.forEach(positions);
+          };
+          const geometry = (g: Geometry): void => {
+            if (g.type === "GeometryCollection") g.geometries.forEach(geometry);
+            else positions(g.coordinates);
+          };
+          located.forEach((f) => geometry(f.geometry!));
+          if (!bounds.isEmpty())
+            map.fitBounds(bounds, { padding: 40, maxZoom: 12, duration: 0 });
+        });
+        this.observer = new ResizeObserver(() => map.resize());
+        this.observer.observe(this);
+      } catch {
+        status.textContent =
+          "Interactive map unavailable. Feature descriptions remain available.";
+      }
+    }
+    disconnectedCallback() {
+      this.abort?.abort();
+      this.observer?.disconnect();
+      this.map?.remove();
+    }
+  }
+  if (!customElements.get("sierra-geo-map"))
+    customElements.define("sierra-geo-map", SierraGeoMap);
+</script>

package/src/components/GeometryPreview.astro

@@ -0,0 +1,11 @@
+---
+import GeoJSONMap from "./GeoJSONMap.astro";
+import type { FeatureCollection, Geometry } from "geojson";
+interface Props {
+  data: FeatureCollection<Geometry | null>;
+  label: string;
+}
+const { data, label } = Astro.props;
+---
+
+<GeoJSONMap data={data} label={label} compact />

package/src/components/Icon.astro

@@ -0,0 +1,19 @@
+---
+/** Icon — references a symbol from IconSprite. Decorative by default; pass `label` to make it meaningful. */
+interface Props {
+  name: string;
+  label?: string;
+  size?: 'md' | 'lg';
+  class?: string;
+}
+const { name, label, size = 'md', class: cls } = Astro.props;
+---
+
+<svg
+  class:list={['icon', size === 'lg' && 'icon--lg', cls]}
+  aria-hidden={label ? undefined : 'true'}
+  role={label ? 'img' : undefined}
+  aria-label={label}
+>
+  <use href={`#i-${name}`}></use>
+</svg>

package/src/components/IconSprite.astro

@@ -0,0 +1,68 @@
+---
+/**
+ * IconSprite — inline SVG symbol sheet, rendered once per page by BaseLayout.
+ * Use <Icon name="…" /> in Astro or `icon('…')` from src/lib/dom.ts in client code.
+ * Paths are 24×24 stroke icons; colour comes from currentcolor via .icon.
+ */
+const icons: Record<string, string> = {
+  copy: '<rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V4H4v12h4"/>',
+  home: '<path d="M3 9.5 12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z"/>',
+  grid: '<rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/>',
+  folder:
+    '<path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>',
+  file: '<path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/>',
+  note: '<path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5M9 13h6M9 17h6"/>',
+  external:
+    '<path d="M14 5h5v5M19 5l-9 9"/><path d="M17 13v5a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h5"/>',
+  receipt:
+    '<path d="M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1z"/><path d="M16 8H8M16 12H8M13 16H8"/>',
+  users:
+    '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8"/>',
+  user: '<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>',
+  logout:
+    '<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="m16 17 5-5-5-5M21 12H9"/>',
+  menu: '<path d="M4 6h16M4 12h16M4 18h16"/>',
+  x: '<path d="M18 6 6 18M6 6l12 12"/>',
+  check: '<path d="M20 6 9 17l-5-5"/>',
+  download:
+    '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5M12 15V3"/>',
+  "chevron-right": '<path d="m9 18 6-6-6-6"/>',
+  "chevron-left": '<path d="m15 18-6-6 6-6"/>',
+  "chevron-down": '<path d="m6 9 6 6 6-6"/>',
+  alert:
+    '<path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/><path d="M12 9v4M12 17h.01"/>',
+  mail: '<rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 7L2 7"/>',
+  shield: '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>',
+  info: '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/>',
+  refresh: '<path d="M21 12a9 9 0 1 1-2.6-6.4L21 8"/><path d="M21 3v5h-5"/>',
+  clock: '<circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>',
+  inbox:
+    '<path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.5-6.9A2 2 0 0 0 16.7 4H7.3a2 2 0 0 0-1.8 1.1z"/>',
+  search: '<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>',
+  plus: '<path d="M12 5v14M5 12h14"/>',
+  ban: '<circle cx="12" cy="12" r="10"/><path d="m4.9 4.9 14.2 14.2"/>',
+  edit: '<path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/>',
+  "arrow-up": '<path d="M12 19V5M5 12l7-7 7 7"/>',
+  "arrow-down": '<path d="M12 5v14M19 12l-7 7-7-7"/>',
+  link: '<path d="M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7"/><path d="M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7"/>',
+  bold: '<path d="M6 4h8a4 4 0 0 1 0 8H6zM6 12h9a4 4 0 0 1 0 8H6z"/>',
+  italic: '<path d="M19 4h-9M14 20H5M15 4 9 20"/>',
+  heading: '<path d="M6 4v16M18 4v16M6 12h12"/>',
+  list: '<path d="M9 6h11M9 12h11M9 18h11"/><path d="M4 6h.01M4 12h.01M4 18h.01"/>',
+  "list-ordered":
+    '<path d="M10 6h10M10 12h10M10 18h10"/><path d="M4 4h1v4M4 8h2M4 14.5a1.5 1.5 0 0 1 2.6-1l-2.6 3.5h3"/>',
+  quote:
+    '<path d="M4 11h5v6H4zM4 11c0-3 1.5-5 4-6M14 11h5v6h-5zM14 11c0-3 1.5-5 4-6"/>',
+  code: '<path d="m16 18 6-6-6-6M8 6l-6 6 6 6"/>',
+};
+---
+
+<svg
+  style="display: none"
+  aria-hidden="true"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  {Object.entries(icons).map(([name, body]) => (
+    <symbol id={`i-${name}`} viewBox="0 0 24 24" set:html={body} />
+  ))}
+</svg>

package/src/components/IdentifierList.astro

@@ -0,0 +1,54 @@
+---
+import CopyButton from "./CopyButton.astro";
+interface Props {
+  label: string;
+  values: string[];
+  previewCount?: number;
+  emptyMessage?: string;
+}
+const {
+  label,
+  values,
+  previewCount = 8,
+  emptyMessage = "No identifiers supplied.",
+} = Astro.props;
+const limit = Math.max(1, Math.floor(previewCount));
+---
+
+<div class="ds-identifiers">
+  <div class="ds-identifiers-head">
+    <strong>
+      {label} <span class="meta">({values.length})</span>
+    </strong>
+    {values.length > 0 && (
+      <CopyButton value={values.join("\n")} label="Copy all identifiers" />
+    )}
+  </div>
+  {values.length ? (
+    <>
+      <ul class="ds-identifier-list" aria-label={label}>
+        {values.slice(0, limit).map((value) => (
+          <li>
+            <code>{value}</code>
+            <CopyButton value={value} label={`Copy ${value}`} />
+          </li>
+        ))}
+      </ul>
+      {values.length > limit && (
+        <details>
+          <summary>Show {values.length - limit} more identifiers</summary>
+          <ul class="ds-identifier-list">
+            {values.slice(limit).map((value) => (
+              <li>
+                <code>{value}</code>
+                <CopyButton value={value} label={`Copy ${value}`} />
+              </li>
+            ))}
+          </ul>
+        </details>
+      )}
+    </>
+  ) : (
+    <p class="ds-data-note">{emptyMessage}</p>
+  )}
+</div>

package/src/components/Logo.astro

@@ -0,0 +1,75 @@
+---
+/**
+ * Logo — the S.I.E.R.R.A mark with a configurable site wordmark.
+ * The mark is the main site's raster asset, placed on parchment, never recoloured.
+ */
+interface Props {
+  href?: string;
+  /** Site name shown beneath S.I.E.R.R.A and used in the home link label. */
+  siteName?: string;
+  height?: number;
+  wordmark?: boolean;
+  class?: string;
+}
+const {
+  href = "/",
+  siteName = "Members",
+  height = 28,
+  wordmark = true,
+  class: cls,
+} = Astro.props;
+const width = Math.round((height * 271) / 154);
+---
+
+<a
+  class:list={["logo", cls]}
+  href={href}
+  aria-label={["S.I.E.R.R.A", siteName, "home"].filter(Boolean).join(" ")}
+>
+  <img
+    src="/brand/sierra-mark.png"
+    alt=""
+    width={width}
+    height={height}
+    decoding="async"
+  />
+  {wordmark && (
+    <span class="logo__text">
+      <span class="logo__org">S.I.E.R.R.A</span>
+      {siteName && <span class="logo__app">{siteName}</span>}
+    </span>
+  )}
+</a>
+
+<style>
+  .logo {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-3);
+    color: inherit;
+    text-decoration: none;
+  }
+  .logo:hover {
+    text-decoration: none;
+  }
+  .logo__text {
+    display: flex;
+    flex-direction: column;
+    line-height: 1.1;
+  }
+  .logo__org {
+    font-family: var(--font-display);
+    font-size: var(--fs-body);
+    font-weight: var(--fw-semibold);
+    letter-spacing: 0.06em;
+    color: var(--ink-strong);
+  }
+  .logo__app {
+    font-family: var(--font-ui);
+    font-size: var(--fs-label);
+    font-weight: var(--fw-semibold);
+    letter-spacing: var(--tracking-label);
+    text-transform: uppercase;
+    color: var(--brand-brass-text);
+  }
+</style>

package/src/components/MapFrame.astro

@@ -0,0 +1,25 @@
+---
+interface Props {
+  label: string;
+  caption?: string;
+}
+const { label, caption } = Astro.props;
+---
+
+<figure class="ds-map-frame" aria-label={label}>
+  {Astro.slots.has("toolbar") && (
+    <div class="ds-map-toolbar">
+      <slot name="toolbar" />
+    </div>
+  )}
+  <slot />
+  <figcaption>
+    {caption && <p>{caption}</p>}
+    <slot name="legend" />
+    {Astro.slots.has("attribution") && (
+      <div class="ds-map-attribution">
+        <slot name="attribution" />
+      </div>
+    )}
+  </figcaption>
+</figure>

package/src/components/MetricGrid.astro

@@ -0,0 +1,35 @@
+---
+interface Props {
+  label: string;
+  items: {
+    label: string;
+    value?: string | number | null;
+    unit?: string;
+    description?: string;
+    missing?: string;
+  }[];
+}
+const { label, items } = Astro.props;
+---
+
+<dl class="ds-metric-grid" aria-label={label}>
+  {items.map((item) => (
+    <div class="ds-metric">
+      <dt>{item.label}</dt>
+      <dd>
+        <span
+          class:list={[
+            "ds-metric-value",
+            item.value == null && "ds-metric-missing",
+          ]}
+        >
+          {item.value ?? item.missing ?? "Not reported"}
+        </span>
+        {item.value != null && item.unit && (
+          <span class="ds-metric-unit"> {item.unit}</span>
+        )}
+        {item.description && <p class="ds-data-note">{item.description}</p>}
+      </dd>
+    </div>
+  ))}
+</dl>

package/src/components/PageHeader.astro

@@ -0,0 +1,24 @@
+---
+/** PageHeader — kicker, h1, lead and an actions slot. One per page. */
+interface Props {
+  title: string;
+  kicker?: string;
+  lead?: string;
+}
+const { title, kicker, lead } = Astro.props;
+---
+
+<header class="page-header">
+  <div class="page-header__text">
+    {kicker && <span class="kicker">{kicker}</span>}
+    <h1>
+      <slot name="title">{title}</slot>
+    </h1>
+    {lead && <p class="lead">{lead}</p>}
+  </div>
+  {Astro.slots.has('actions') && (
+    <div class="page-header__actions">
+      <slot name="actions" />
+    </div>
+  )}
+</header>