@robr0/design-system 0.10.0 → 0.11.0

package/components/Globe/Globe.d.ts

@@ -0,0 +1,96 @@
+import { default as React } from 'react';
+/** A place on the globe. */
+export interface GlobePoint {
+    /** Stable identifier, referenced by arcs and by `activePointId`. */
+    id: string;
+    /** Latitude in degrees, north positive. */
+    lat: number;
+    /** Longitude in degrees, east positive. */
+    lng: number;
+    /** Short label drawn beside the marker when `showLabels` is on. */
+    label?: string;
+    /**
+     * Marker glyph. `point` is a cross (something that moves or listens),
+     * `anchor` is a square (something fixed). The glyph is the only difference.
+     */
+    kind?: 'point' | 'anchor';
+}
+/** A great-circle arc between two points. */
+export interface GlobeArc {
+    /** `id` of the point the arc leaves. */
+    from: string;
+    /** `id` of the point the arc reaches. */
+    to: string;
+    /**
+     * Stroke colour, any CSS colour (`var(--color-chart-series-3)` works).
+     * Omit for the default cobalt-to-violet gradient along the arc.
+     */
+    color?: string;
+    /** How far the arc lifts off the surface at its midpoint, as a fraction of the radius. */
+    altitude?: number;
+}
+/** Where the globe is looking: `[longitude, latitude]` of the centre, in degrees. */
+export type GlobeRotation = [number, number];
+/** Props owned by Globe itself — everything else falls through to the root `<div>`. */
+type GlobeOwnProps = {
+    /** The places to mark. */
+    points?: GlobePoint[];
+    /** The arcs to draw between them. An arc whose endpoint is not in `points` is skipped. */
+    arcs?: GlobeArc[];
+    /**
+     * Controlled view: `[longitude, latitude]` of the centre, in degrees.
+     * Pair with `onRotationChange`. Omit to let the globe own its rotation.
+     */
+    rotation?: GlobeRotation;
+    /** Initial view when uncontrolled. */
+    defaultRotation?: GlobeRotation;
+    /** Fires whenever the view changes — drag, keys, or the auto-rotation. */
+    onRotationChange?: (rotation: GlobeRotation) => void;
+    /**
+     * Spin slowly on its own, in degrees per second. Pauses while the pointer
+     * is over the globe or it has focus, and never runs under
+     * `prefers-reduced-motion`. `0` switches it off.
+     */
+    autoRotate?: number;
+    /** Drag to rotate, and rotate with the arrow keys (or W, A, S, D) when focused. */
+    interactive?: boolean;
+    /** Degrees between graticule lines. `0` removes the graticule. */
+    graticuleStep?: number;
+    /** Draw each point's `label` beside its marker. */
+    showLabels?: boolean;
+    /** The point to single out: its marker enlarges and its callout renders. */
+    activePointId?: string;
+    /** Fires as the pointer enters a marker, and with `null` as it leaves. */
+    onPointHover?: (point: GlobePoint | null) => void;
+    /** Fires when a marker is clicked. */
+    onPointClick?: (point: GlobePoint) => void;
+    /**
+     * Renders the annotation for the active (or hovered) point. It is placed
+     * beside the marker in an HTML overlay, so any markup works; MapCallout is
+     * the intended filling. The overlay carries `data-side="left"|"right"` for
+     * which side of the marker it sits on.
+     */
+    renderCallout?: (point: GlobePoint) => React.ReactNode;
+    /**
+     * Accessible name for the globe, e.g. "Listening points across the
+     * network". The point and arc counts are appended for screen readers.
+     */
+    label?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface GlobeProps extends GlobeOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof GlobeOwnProps | 'children'> {
+}
+/**
+ * Globe — an orthographic globe drawn in SVG, for showing where things are
+ * and what connects them: a graticule, markers at lat/lng, and great-circle
+ * arcs between them. No map library, no tile server, no land data; the
+ * graticule alone gives the sphere its shape, which is the point — this is
+ * for the geometry of a network, not for navigation.
+ *
+ * Colour comes from the tokens: the graticule in the divider colour, markers
+ * in the text colours, arcs along the cobalt-to-violet chart series. Rotate
+ * it by dragging, with the arrow keys when focused, or let it turn on its own.
+ */
+export declare const Globe: React.ForwardRefExoticComponent<GlobeProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/Globe/Globe.js

@@ -0,0 +1,415 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useId, useState, useRef, useCallback, useSyncExternalStore, useEffect } from "react";
+import "./Globe.css";
+const VIEW = 480;
+const CENTER = VIEW / 2;
+const RADIUS = 180;
+const GRATICULE_SAMPLES = 60;
+const ARC_SAMPLES = 48;
+const DRAG_DEGREES_PER_RADIUS = 90;
+const KEY_STEP = 10;
+const MAX_LAT = 80;
+const MARKER = 5;
+const DEG = Math.PI / 180;
+const toVec = (lat, lng) => {
+  const φ = lat * DEG;
+  const λ = lng * DEG;
+  return [Math.cos(φ) * Math.cos(λ), Math.cos(φ) * Math.sin(λ), Math.sin(φ)];
+};
+const makeProjector = ([lng0, lat0]) => {
+  const λ0 = lng0 * DEG;
+  const φ0 = lat0 * DEG;
+  const cosλ = Math.cos(λ0);
+  const sinλ = Math.sin(λ0);
+  const cosφ = Math.cos(φ0);
+  const sinφ = Math.sin(φ0);
+  return ([x, y, z], altitude = 0) => {
+    const x1 = x * cosλ + y * sinλ;
+    const y1 = -x * sinλ + y * cosλ;
+    const depth = x1 * cosφ + z * sinφ;
+    const up = -x1 * sinφ + z * cosφ;
+    const s = 1 + altitude;
+    const sx = y1 * s;
+    const sy = up * s;
+    return {
+      x: CENTER + RADIUS * sx,
+      y: CENTER - RADIUS * sy,
+      visible: depth >= 0 || sx * sx + sy * sy > 1
+    };
+  };
+};
+const round = (n) => Math.round(n * 10) / 10;
+const splitRuns = (pts) => {
+  let front = "";
+  let back = "";
+  let prev;
+  for (const p of pts) {
+    const cmd = `${prev && prev.visible === p.visible ? "L" : "M"}${round(p.x)} ${round(p.y)}`;
+    if (p.visible) front += cmd;
+    else back += cmd;
+    if (prev && prev.visible !== p.visible) {
+      const start = `M${round(prev.x)} ${round(prev.y)}L${round(p.x)} ${round(p.y)}`;
+      if (p.visible) front += start;
+      else back += start;
+    }
+    prev = p;
+  }
+  return { front, back };
+};
+const arcVectors = (a, b, altitude) => {
+  const dot = Math.max(-1, Math.min(1, a[0] * b[0] + a[1] * b[1] + a[2] * b[2]));
+  const ω = Math.acos(dot);
+  const sinω = Math.sin(ω);
+  const out = [];
+  for (let i = 0; i <= ARC_SAMPLES; i++) {
+    const t = i / ARC_SAMPLES;
+    let v;
+    if (sinω < 1e-6) {
+      v = a;
+    } else {
+      const wa = Math.sin((1 - t) * ω) / sinω;
+      const wb = Math.sin(t * ω) / sinω;
+      v = [wa * a[0] + wb * b[0], wa * a[1] + wb * b[1], wa * a[2] + wb * b[2]];
+    }
+    out.push([v, altitude * Math.sin(t * Math.PI)]);
+  }
+  return out;
+};
+const normalizeLng = (lng) => ((lng + 180) % 360 + 360) % 360 - 180;
+const clampLat = (lat) => Math.max(-MAX_LAT, Math.min(MAX_LAT, lat));
+const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+const subscribeReducedMotion = (callback) => {
+  const query = window.matchMedia(REDUCED_MOTION_QUERY);
+  query.addEventListener("change", callback);
+  return () => query.removeEventListener("change", callback);
+};
+const getReducedMotion = () => window.matchMedia(REDUCED_MOTION_QUERY).matches;
+const getServerReducedMotion = () => false;
+const KEY_DELTAS = {
+  ArrowLeft: [KEY_STEP, 0],
+  ArrowRight: [-KEY_STEP, 0],
+  ArrowUp: [0, -KEY_STEP],
+  ArrowDown: [0, KEY_STEP],
+  a: [KEY_STEP, 0],
+  d: [-KEY_STEP, 0],
+  w: [0, -KEY_STEP],
+  s: [0, KEY_STEP]
+};
+const Globe = React.forwardRef(
+  ({
+    points = [],
+    arcs = [],
+    rotation: rotationProp,
+    defaultRotation = [-20, 20],
+    onRotationChange,
+    autoRotate = 3,
+    interactive = true,
+    graticuleStep = 30,
+    showLabels = true,
+    activePointId,
+    onPointHover,
+    onPointClick,
+    renderCallout,
+    label = "Globe",
+    className = "",
+    onPointerDown,
+    onPointerMove,
+    onPointerUp,
+    onPointerCancel,
+    onPointerEnter,
+    onPointerLeave,
+    onKeyDown,
+    onFocus,
+    onBlur,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-globe";
+    const gradientId = useId();
+    const isControlled = rotationProp !== void 0;
+    const [innerRotation, setInnerRotation] = useState(defaultRotation);
+    const rotation = isControlled ? rotationProp : innerRotation;
+    const rotationRef = useRef(rotation);
+    rotationRef.current = rotation;
+    const onRotationChangeRef = useRef(onRotationChange);
+    onRotationChangeRef.current = onRotationChange;
+    const commit = useCallback(
+      (next) => {
+        const clean = [normalizeLng(next[0]), clampLat(next[1])];
+        if (!isControlled) setInnerRotation(clean);
+        onRotationChangeRef.current?.(clean);
+      },
+      [isControlled]
+    );
+    const [hoveredId, setHoveredId] = useState(null);
+    const [paused, setPaused] = useState(false);
+    const reducedMotion = useSyncExternalStore(
+      subscribeReducedMotion,
+      getReducedMotion,
+      getServerReducedMotion
+    );
+    const spinning = autoRotate !== 0 && !paused && !reducedMotion;
+    useEffect(() => {
+      if (!spinning) return;
+      let frame = 0;
+      let last = performance.now();
+      const tick = (now) => {
+        const dt = (now - last) / 1e3;
+        last = now;
+        const [lng, lat] = rotationRef.current;
+        commit([lng - autoRotate * dt, lat]);
+        frame = requestAnimationFrame(tick);
+      };
+      frame = requestAnimationFrame(tick);
+      return () => cancelAnimationFrame(frame);
+    }, [spinning, autoRotate, commit]);
+    const rootRef = useRef(null);
+    const drag = useRef(null);
+    const [dragging, setDragging] = useState(false);
+    const setRef = (node) => {
+      rootRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    const handlePointerDown = (e) => {
+      onPointerDown?.(e);
+      if (!interactive || e.button !== 0) return;
+      drag.current = { x: e.clientX, y: e.clientY, rotation: rotationRef.current };
+      setDragging(true);
+      setPaused(true);
+      e.currentTarget.setPointerCapture(e.pointerId);
+    };
+    const handlePointerMove = (e) => {
+      onPointerMove?.(e);
+      if (!drag.current || !rootRef.current) return;
+      const radiusPx = rootRef.current.clientWidth * (RADIUS / VIEW) || 1;
+      const perPx = DRAG_DEGREES_PER_RADIUS / radiusPx;
+      const [lng, lat] = drag.current.rotation;
+      commit([
+        lng - (e.clientX - drag.current.x) * perPx,
+        lat + (e.clientY - drag.current.y) * perPx
+      ]);
+    };
+    const endDrag = (e) => {
+      if (!drag.current) return;
+      drag.current = null;
+      setDragging(false);
+      if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+        e.currentTarget.releasePointerCapture(e.pointerId);
+      }
+    };
+    const handlePointerUp = (e) => {
+      onPointerUp?.(e);
+      endDrag(e);
+    };
+    const handlePointerCancel = (e) => {
+      onPointerCancel?.(e);
+      endDrag(e);
+    };
+    const handlePointerEnter = (e) => {
+      onPointerEnter?.(e);
+      setPaused(true);
+    };
+    const handlePointerLeave = (e) => {
+      onPointerLeave?.(e);
+      if (document.activeElement !== e.currentTarget) setPaused(false);
+    };
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (!interactive || e.defaultPrevented) return;
+      const delta = KEY_DELTAS[e.key] ?? KEY_DELTAS[e.key.toLowerCase()];
+      if (!delta) return;
+      e.preventDefault();
+      const [lng, lat] = rotationRef.current;
+      commit([lng + delta[0], lat + delta[1]]);
+    };
+    const handleFocus = (e) => {
+      onFocus?.(e);
+      setPaused(true);
+    };
+    const handleBlur = (e) => {
+      onBlur?.(e);
+      if (!e.currentTarget.matches(":hover")) setPaused(false);
+    };
+    const project = makeProjector(rotation);
+    let graticuleFront = "";
+    let graticuleBack = "";
+    if (graticuleStep > 0) {
+      for (let lng = -180; lng < 180; lng += graticuleStep) {
+        const pts = [];
+        for (let i = 0; i <= GRATICULE_SAMPLES; i++) {
+          pts.push(project(toVec(-90 + 180 * i / GRATICULE_SAMPLES, lng)));
+        }
+        const runs = splitRuns(pts);
+        graticuleFront += runs.front;
+        graticuleBack += runs.back;
+      }
+      for (let lat = -90 + graticuleStep; lat < 90; lat += graticuleStep) {
+        const pts = [];
+        for (let i = 0; i <= GRATICULE_SAMPLES; i++) {
+          pts.push(project(toVec(lat, -180 + 360 * i / GRATICULE_SAMPLES)));
+        }
+        const runs = splitRuns(pts);
+        graticuleFront += runs.front;
+        graticuleBack += runs.back;
+      }
+    }
+    const byId = new Map(points.map((p) => [p.id, p]));
+    const projectedPoints = points.map((p) => ({ point: p, at: project(toVec(p.lat, p.lng)) }));
+    const drawnArcs = arcs.flatMap((arc, i) => {
+      const from = byId.get(arc.from);
+      const to = byId.get(arc.to);
+      if (!from || !to) return [];
+      const altitude = arc.altitude ?? 0.25;
+      const samples = arcVectors(toVec(from.lat, from.lng), toVec(to.lat, to.lng), altitude);
+      const pts = samples.map(([v, h]) => project(v, h));
+      const runs = splitRuns(pts);
+      return [
+        {
+          key: `${arc.from}-${arc.to}-${i}`,
+          color: arc.color,
+          start: pts[0],
+          end: pts[pts.length - 1],
+          ...runs
+        }
+      ];
+    });
+    const calloutId = activePointId ?? hoveredId;
+    const callout = calloutId ? projectedPoints.find((p) => p.point.id === calloutId) : void 0;
+    const calloutSide = callout && callout.at.x < CENTER ? "left" : "right";
+    const classes = [
+      baseClass,
+      interactive ? `${baseClass}--interactive` : "",
+      dragging ? `${baseClass}--dragging` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const description = `${points.length} ${points.length === 1 ? "point" : "points"}, ${arcs.length} ${arcs.length === 1 ? "arc" : "arcs"}.${interactive ? " Drag to rotate, or use the arrow keys when focused." : ""}`;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        ref: setRef,
+        className: classes,
+        role: interactive ? "application" : "img",
+        "aria-roledescription": "globe",
+        "aria-label": `${label}. ${description}`,
+        tabIndex: interactive ? 0 : void 0,
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+        onPointerCancel: handlePointerCancel,
+        onPointerEnter: handlePointerEnter,
+        onPointerLeave: handlePointerLeave,
+        onKeyDown: handleKeyDown,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: `${baseClass}__svg`,
+              viewBox: `0 0 ${VIEW} ${VIEW}`,
+              xmlns: "http://www.w3.org/2000/svg",
+              "aria-hidden": "true",
+              focusable: "false",
+              children: [
+                /* @__PURE__ */ jsx("defs", { children: drawnArcs.map(
+                  (arc) => arc.color ? null : /* @__PURE__ */ jsxs(
+                    "linearGradient",
+                    {
+                      id: `${gradientId}-${arc.key}`,
+                      gradientUnits: "userSpaceOnUse",
+                      x1: round(arc.start.x),
+                      y1: round(arc.start.y),
+                      x2: round(arc.end.x),
+                      y2: round(arc.end.y),
+                      children: [
+                        /* @__PURE__ */ jsx("stop", { offset: "0", className: `${baseClass}__arc-stop-start` }),
+                        /* @__PURE__ */ jsx("stop", { offset: "1", className: `${baseClass}__arc-stop-end` })
+                      ]
+                    },
+                    arc.key
+                  )
+                ) }),
+                /* @__PURE__ */ jsx("circle", { className: `${baseClass}__limb`, cx: CENTER, cy: CENTER, r: RADIUS }),
+                graticuleBack && /* @__PURE__ */ jsx("path", { className: `${baseClass}__graticule-back`, d: graticuleBack }),
+                graticuleFront && /* @__PURE__ */ jsx("path", { className: `${baseClass}__graticule`, d: graticuleFront }),
+                /* @__PURE__ */ jsx("g", { className: `${baseClass}__arcs`, children: drawnArcs.map((arc) => {
+                  const stroke = arc.color ?? `url(#${gradientId}-${arc.key})`;
+                  return /* @__PURE__ */ jsxs("g", { children: [
+                    arc.back && /* @__PURE__ */ jsx("path", { className: `${baseClass}__arc-back`, d: arc.back, stroke }),
+                    arc.front && /* @__PURE__ */ jsx("path", { className: `${baseClass}__arc`, d: arc.front, stroke })
+                  ] }, arc.key);
+                }) }),
+                /* @__PURE__ */ jsx("g", { className: `${baseClass}__points`, children: projectedPoints.map(({ point, at }) => {
+                  const x = round(at.x);
+                  const y = round(at.y);
+                  const active = point.id === calloutId;
+                  const markerClasses = [
+                    `${baseClass}__point`,
+                    `${baseClass}__point--${point.kind ?? "point"}`,
+                    at.visible ? "" : `${baseClass}__point--back`,
+                    active ? `${baseClass}__point--active` : ""
+                  ].filter(Boolean).join(" ");
+                  return /* @__PURE__ */ jsxs(
+                    "g",
+                    {
+                      className: markerClasses,
+                      transform: `translate(${x} ${y})`,
+                      onPointerEnter: () => {
+                        setHoveredId(point.id);
+                        onPointHover?.(point);
+                      },
+                      onPointerLeave: () => {
+                        setHoveredId((id) => id === point.id ? null : id);
+                        onPointHover?.(null);
+                      },
+                      onClick: onPointClick ? () => onPointClick(point) : void 0,
+                      children: [
+                        /* @__PURE__ */ jsx("circle", { className: `${baseClass}__hit`, r: MARKER * 2.4 }),
+                        point.kind === "anchor" ? /* @__PURE__ */ jsx(
+                          "rect",
+                          {
+                            className: `${baseClass}__glyph`,
+                            x: -MARKER,
+                            y: -MARKER,
+                            width: MARKER * 2,
+                            height: MARKER * 2
+                          }
+                        ) : /* @__PURE__ */ jsx(
+                          "path",
+                          {
+                            className: `${baseClass}__glyph`,
+                            d: `M${-MARKER} 0H${MARKER}M0 ${-MARKER}V${MARKER}`
+                          }
+                        ),
+                        showLabels && point.label && /* @__PURE__ */ jsx("text", { className: `${baseClass}__label`, x: MARKER * 1.8, y: -MARKER * 1.2, children: point.label })
+                      ]
+                    },
+                    point.id
+                  );
+                }) })
+              ]
+            }
+          ),
+          callout && renderCallout && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `${baseClass}__callout`,
+              "data-side": calloutSide,
+              style: {
+                left: `${callout.at.x / VIEW * 100}%`,
+                top: `${callout.at.y / VIEW * 100}%`
+              },
+              children: renderCallout(callout.point)
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Globe.displayName = "Globe";
+export {
+  Globe
+};

package/components/InterruptCard/InterruptCard.css

@@ -19,7 +19,8 @@
   width: 100%;
   background-color: var(--color-bg-container-primary);
   border: var(--border-xs) solid var(--color-bg-container-border);
-  border-radius: var(--radius-md);
+  /* The chat furniture's shared 24px shell — see ToolCall. */
+  border-radius: var(--radius-xl);
   overflow: hidden;
 }
 
@@ -31,13 +32,15 @@
   display: flex;
   align-items: flex-start;
   gap: var(--gap-sm);
-  padding: var(--padding-sm-md) var(--padding-md);
+  padding: var(--padding-md) var(--padding-lg);
 }
 
 .ds-interrupt-card__icon {
   display: inline-flex;
   align-items: center;
   flex: none;
+  /* Centre the icon on the title's first line. */
+  margin-top: calc((var(--font-heading-3-line-height) - var(--icon-size-sm)) / 2);
   color: var(--ds-interrupt-card-color);
 }
 
@@ -48,18 +51,18 @@
 .ds-interrupt-card__heading {
   display: flex;
   flex-direction: column;
-  gap: var(--gap-xxs);
+  gap: var(--gap-xs);
   min-width: 0;
 }
 
-/* The question is the card's one heading, so it takes the title tier
-   rather than an emphasised paragraph */
+/* The question is the card's one heading, so it takes the same heading
+   tier as MessageCard's title — the chat cards share one title scale. */
 .ds-interrupt-card__title {
-  font-family: var(--font-title-body-family);
-  font-size: var(--font-title-body-size);
-  font-weight: var(--font-title-body-weight);
-  line-height: var(--font-title-body-line-height);
-  letter-spacing: var(--font-title-body-letter-spacing);
+  font-family: var(--font-heading-3-family);
+  font-size: var(--font-heading-3-size);
+  font-weight: var(--font-heading-3-weight);
+  line-height: var(--font-heading-3-line-height);
+  letter-spacing: var(--font-heading-3-letter-spacing);
   color: var(--color-text-primary);
 }
 
@@ -80,7 +83,7 @@
    ============================================ */
 
 .ds-interrupt-card__detail {
-  padding: 0 var(--padding-md) var(--padding-sm-md);
+  padding: 0 var(--padding-lg) var(--padding-md);
 }
 
 .ds-interrupt-card__detail > :first-child {
@@ -101,10 +104,9 @@
 .ds-interrupt-card__options {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: flex-start;
   gap: var(--gap-sm);
-  padding: var(--padding-sm-md) var(--padding-md);
-  border-top: var(--border-xs) solid var(--color-divider);
+  padding: var(--padding-sm) var(--padding-lg) var(--padding-md);
 }
 
 /* ============================================
@@ -116,10 +118,9 @@
 .ds-interrupt-card__answer {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: flex-start;
   gap: var(--gap-xs);
-  padding: var(--padding-sm-md) var(--padding-md);
-  border-top: var(--border-xs) solid var(--color-divider);
+  padding: var(--padding-sm) var(--padding-lg) var(--padding-md);
   font-family: var(--font-paragraph-sm-family);
   font-size: var(--font-paragraph-sm-size);
   font-weight: var(--font-paragraph-sm-weight);
@@ -152,3 +153,12 @@
   white-space: nowrap;
   border: 0;
 }
+
+/* Icons take the colour of the text around them. Explicit, not just
+   inherited by default: a consumer stylesheet that sets a colour on
+   .material-symbols-rounded itself (a common global default) would
+   otherwise override inheritance and detach the icon from the state
+   colours this component sets on its parents. */
+.ds-interrupt-card .material-symbols-rounded {
+  color: inherit;
+}

package/components/InterruptCard/InterruptCard.d.ts

@@ -14,7 +14,7 @@ type InterruptCardOwnProps = {
     title: string;
     /** One line of context under the title. */
     description?: string;
-    /** Leading Material Symbol name, or any custom element. */
+    /** Leading Material Symbol name, or any custom element. No icon by default. */
     icon?: string | React.ReactNode;
     /** The choices, rendered as buttons left to right. */
     options?: InterruptCardOption[];

package/components/InterruptCard/InterruptCard.js

@@ -12,7 +12,7 @@ const InterruptCard = React.forwardRef(
   ({
     title,
     description,
-    icon = "pause_circle",
+    icon,
     options,
     onValueChange,
     value,

package/components/MapCallout/MapCallout.css

@@ -0,0 +1,46 @@
+/* ============================================
+   MAP CALLOUT COMPONENT
+   The annotation beside a marker: a name in
+   capitals over readout lines in the code face.
+   ============================================ */
+
+/* Base */
+
+.ds-map-callout {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--gap-xxs);
+  font-family: var(--font-family-code);
+  color: var(--color-text-primary);
+}
+
+.ds-map-callout--start {
+  align-items: flex-start;
+  text-align: left;
+}
+
+.ds-map-callout--end {
+  align-items: flex-end;
+  text-align: right;
+}
+
+/* Parts */
+
+/* The overline face on the code family: the metrics and tracking are the
+   uppercase-label tokens, the family stays monospace with the readouts. */
+.ds-map-callout__title {
+  font-size: var(--font-overline-size);
+  font-weight: var(--font-overline-weight);
+  line-height: var(--font-overline-line-height);
+  letter-spacing: var(--font-overline-letter-spacing);
+  text-transform: uppercase;
+  color: var(--color-text-primary);
+}
+
+.ds-map-callout__line {
+  font-size: var(--font-caption-size);
+  font-weight: var(--font-caption-weight);
+  line-height: var(--font-caption-line-height);
+  color: var(--color-text-tertiary);
+  font-variant-numeric: tabular-nums;
+}