rift-ds 1.0.0

package/components/Gauge/Gauge.css

@@ -0,0 +1,120 @@
+/* ============================================
+   GAUGE COMPONENT
+   Radial dial for a single bounded reading.
+   Card chrome, header, and padding come from
+   the shared chart styles (Chart.css) — this
+   file owns the dial alone. Colour flows
+   through `color`: the value arc draws with
+   currentColor, so a tone is one custom
+   property swap.
+   ============================================ */
+
+/* Base — the dial centres in the shared chart body */
+
+.ds-gauge__body {
+  display: flex;
+  justify-content: center;
+}
+
+/* Unlike the fluid recharts bodies, the dial has intrinsic size — a bare
+   gauge shrink-wraps it so it sits inline in a Stat row or tile. */
+.ds-gauge.ds-chart--bare {
+  width: auto;
+  display: inline-flex;
+}
+
+.ds-gauge__dial {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.ds-gauge__svg {
+  display: block;
+}
+
+/* Parts */
+
+.ds-gauge__track {
+  fill: none;
+  stroke: var(--color-bg-container-tertiary);
+  stroke-linecap: round;
+}
+
+.ds-gauge__arc {
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  transition: stroke-dasharray var(--motion-duration-slow) var(--motion-ease-emphasized);
+  /* Sweep in from an empty dial on mount — the single keyframe animates to
+     the element's own dasharray, so one rule serves every reading. The
+     duration tokens collapse under reduced motion, guarding this for free. */
+  animation: ds-gauge-sweep var(--motion-duration-slower) var(--motion-ease-emphasized);
+}
+
+@keyframes ds-gauge-sweep {
+  from {
+    stroke-dasharray: 0 100;
+  }
+}
+
+.ds-gauge__center {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gap-050);
+  text-align: center;
+  pointer-events: none;
+}
+
+/* The centre pair mirrors the chart family's radial centre label:
+   a light sub-display numeral over a caption. */
+
+.ds-gauge__value {
+  font-family: var(--font-sub-display-family);
+  font-size: var(--font-sub-display-size);
+  font-weight: var(--font-sub-display-weight);
+  line-height: var(--font-sub-display-line-height);
+  letter-spacing: var(--font-sub-display-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+.ds-gauge__label {
+  font-family: var(--font-caption-family);
+  font-size: var(--font-caption-size);
+  font-weight: var(--font-caption-weight);
+  line-height: var(--font-caption-line-height);
+  letter-spacing: var(--font-caption-letter-spacing);
+  color: var(--color-text-secondary);
+}
+
+/* Tones */
+
+.ds-gauge--accent {
+  color: var(--color-chart-series-1);
+}
+
+/* The status hues come from the border tokens, not the text tokens: the
+   border set is stable across themes, while the dark-mode text tints are
+   near-white and would wash three tones into one. */
+
+.ds-gauge--positive {
+  color: var(--color-status-positive-border);
+}
+
+.ds-gauge--warning {
+  color: var(--color-status-warning-border);
+}
+
+.ds-gauge--error {
+  color: var(--color-status-error-border);
+}
+
+.ds-gauge--neutral {
+  color: var(--color-text-secondary);
+}

package/components/Gauge/Gauge.d.ts

@@ -0,0 +1,64 @@
+import { default as React } from 'react';
+/** One colour switch point: at or above `value`, the dial takes `tone`. */
+export interface GaugeThreshold {
+    /** Reading at which this tone takes over. */
+    value: number;
+    /** Tone applied from this reading upward. */
+    tone: 'accent' | 'positive' | 'warning' | 'error' | 'neutral';
+}
+/** Props owned by Gauge itself — everything else falls through to the root div. */
+type GaugeOwnProps = {
+    /** Current reading. Clamped into the `min`–`max` range for drawing. */
+    value: number;
+    /** Lower bound of the dial. */
+    min?: number;
+    /** Upper bound of the dial. */
+    max?: number;
+    /**
+     * Colour role for the value arc. `accent` (the default) follows the chart
+     * palette's lead colour. Ignored while a threshold matches — thresholds
+     * exist so the dial recolours itself as the reading crosses them.
+     */
+    tone?: 'accent' | 'positive' | 'warning' | 'error' | 'neutral';
+    /**
+     * Colour switch points, e.g. warning at 70 and error at 90. The highest
+     * threshold at or below the current reading wins; below them all, the
+     * `tone` prop applies.
+     */
+    thresholds?: GaugeThreshold[];
+    /** Shows the reading in the centre of the dial. */
+    showValue?: boolean;
+    /** Formats the centre reading — for units, precision, or locale. */
+    formatValue?: (value: number) => string;
+    /**
+     * What the reading measures, shown as a caption under it and used as the
+     * accessible name, e.g. "CPU usage".
+     */
+    label?: string;
+    /** Chart title, in the shared chart header. */
+    title?: string;
+    /** Description text below the title. */
+    subtitle?: string;
+    /** Strip the card chrome (border, padding, fill) when the chart sits inside another panel that supplies the surface */
+    bare?: boolean;
+    /** Rendered dial diameter in pixels. The arc geometry scales with it. */
+    size?: number;
+    /** Arc thickness in pixels. */
+    strokeWidth?: number;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface GaugeProps extends GaugeOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof GaugeOwnProps | 'children'> {
+}
+/**
+ * Gauge — a radial dial for a single bounded reading: capacity, usage, a
+ * score against a target. Pure SVG computed from props — no charting library,
+ * no hooks — so it renders from a Server Component. It wears the chart
+ * family's card chrome (title, subtitle, padding) and takes `bare` to drop
+ * it inside a Panel, like every other chart. Thresholds recolour the dial
+ * through the status roles as the reading crosses them, and the arc animates
+ * between readings via a CSS transition. The dial is announced as a `meter`
+ * with the label as its accessible name.
+ */
+export declare const Gauge: React.ForwardRefExoticComponent<GaugeProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/Gauge/Gauge.js

@@ -0,0 +1,111 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import "../Chart/Chart.css";
+import "./Gauge.css";
+const SWEEP_UNITS = 75;
+const Gauge = React.forwardRef(
+  ({
+    value,
+    min = 0,
+    max = 100,
+    tone = "accent",
+    thresholds,
+    showValue = true,
+    formatValue,
+    label,
+    title,
+    subtitle,
+    bare = false,
+    size = 120,
+    strokeWidth = 12,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-gauge";
+    const chartClass = "ds-chart";
+    const range = max - min;
+    const fraction = range > 0 ? Math.min(Math.max((value - min) / range, 0), 1) : 0;
+    const activeThreshold = thresholds?.filter((t) => value >= t.value).sort((a, b) => b.value - a.value)[0];
+    const resolvedTone = activeThreshold?.tone ?? tone;
+    const classes = [
+      chartClass,
+      bare && `${chartClass}--bare`,
+      baseClass,
+      `${baseClass}--${resolvedTone}`,
+      className
+    ].filter(Boolean).join(" ");
+    const radius = (size - strokeWidth) / 2;
+    const center = size / 2;
+    const valueUnits = Math.round(SWEEP_UNITS * fraction * 100) / 100;
+    const displayValue = formatValue ? formatValue(value) : String(Math.round(value));
+    const { "aria-label": restAriaLabel, ...restProps } = rest;
+    return /* @__PURE__ */ jsxs("div", { ...restProps, ref, className: classes, children: [
+      (title || subtitle) && /* @__PURE__ */ jsx("div", { className: `${chartClass}__header`, children: /* @__PURE__ */ jsxs("div", { className: `${chartClass}__header-text`, children: [
+        title && /* @__PURE__ */ jsx("h3", { className: `${chartClass}__title`, children: title }),
+        subtitle && /* @__PURE__ */ jsx("p", { className: `${chartClass}__subtitle`, children: subtitle })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: `${chartClass}__body ${baseClass}__body`, children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `${baseClass}__dial`,
+          style: { width: size, height: size },
+          role: "meter",
+          "aria-valuenow": value,
+          "aria-valuemin": min,
+          "aria-valuemax": max,
+          "aria-valuetext": displayValue,
+          "aria-label": label ?? restAriaLabel,
+          children: [
+            /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                className: `${baseClass}__svg`,
+                viewBox: `0 0 ${size} ${size}`,
+                width: size,
+                height: size,
+                xmlns: "http://www.w3.org/2000/svg",
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      className: `${baseClass}__track`,
+                      cx: center,
+                      cy: center,
+                      r: radius,
+                      pathLength: 100,
+                      strokeWidth,
+                      strokeDasharray: `${SWEEP_UNITS} ${100 - SWEEP_UNITS}`,
+                      transform: `rotate(135 ${center} ${center})`
+                    }
+                  ),
+                  valueUnits > 0 && /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      className: `${baseClass}__arc`,
+                      cx: center,
+                      cy: center,
+                      r: radius,
+                      pathLength: 100,
+                      strokeWidth,
+                      strokeDasharray: `${valueUnits} ${100 - valueUnits}`,
+                      transform: `rotate(135 ${center} ${center})`
+                    }
+                  )
+                ]
+              }
+            ),
+            (showValue || label) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__center`, children: [
+              showValue && /* @__PURE__ */ jsx("span", { className: `${baseClass}__value`, children: displayValue }),
+              label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label })
+            ] })
+          ]
+        }
+      ) })
+    ] });
+  }
+);
+Gauge.displayName = "Gauge";
+export {
+  Gauge
+};

package/components/Globe/Globe.css

@@ -0,0 +1,155 @@
+/* ============================================
+   GLOBE COMPONENT
+   An orthographic globe: graticule, markers and
+   great-circle arcs. Every colour is a token; the
+   stroke widths are SVG geometry in viewBox units,
+   like Sparkline's, and scale with the drawing.
+   ============================================ */
+
+/* Base */
+
+.ds-globe {
+  position: relative;
+  display: block;
+  width: 100%;
+  aspect-ratio: 1;
+  color: var(--color-text-primary);
+  border-radius: var(--radius-300);
+  outline: none;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.ds-globe:focus-visible {
+  outline: var(--border-050) solid var(--color-action-primary-bg);
+  outline-offset: var(--padding-100);
+}
+
+.ds-globe--interactive {
+  cursor: grab;
+}
+
+.ds-globe--dragging {
+  cursor: grabbing;
+}
+
+.ds-globe__svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+/* Sphere */
+
+.ds-globe__limb {
+  fill: none;
+  stroke: var(--color-text-tertiary);
+  stroke-width: 1;
+  opacity: 0.6;
+}
+
+.ds-globe__graticule {
+  fill: none;
+  stroke: var(--color-divider);
+  stroke-width: 1;
+}
+
+.ds-globe__graticule-back {
+  fill: none;
+  stroke: var(--color-divider);
+  stroke-width: 1;
+  stroke-dasharray: 2 4;
+  opacity: 0.5;
+}
+
+/* Arcs — the default gradient runs along the cobalt-to-violet end of the
+   chart series; a per-arc `color` replaces it with a flat stroke. */
+
+.ds-globe__arc-stop-start {
+  stop-color: var(--color-chart-series-7);
+}
+
+.ds-globe__arc-stop-end {
+  stop-color: var(--color-chart-series-5);
+}
+
+.ds-globe__arc {
+  fill: none;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.ds-globe__arc-back {
+  fill: none;
+  stroke-width: 1;
+  stroke-linecap: round;
+  opacity: 0.15;
+}
+
+/* Markers */
+
+.ds-globe__point {
+  color: var(--color-text-secondary);
+  transition: color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-globe__point--back {
+  opacity: 0.3;
+}
+
+.ds-globe__point--active,
+.ds-globe__point:hover {
+  color: var(--color-text-primary);
+}
+
+.ds-globe__hit {
+  fill: transparent;
+  stroke: none;
+  pointer-events: all;
+}
+
+.ds-globe--interactive .ds-globe__point {
+  cursor: pointer;
+}
+
+.ds-globe__glyph {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  transform-box: fill-box;
+  transform-origin: center;
+  transition: transform var(--motion-duration-fast) var(--motion-ease-emphasized);
+}
+
+.ds-globe__point--active .ds-globe__glyph {
+  transform: scale(1.4);
+}
+
+.ds-globe__label {
+  font-family: var(--font-family-code);
+  font-size: var(--font-caption-size);
+  fill: var(--color-text-tertiary);
+  pointer-events: none;
+}
+
+.ds-globe__point--active .ds-globe__label {
+  fill: var(--color-text-primary);
+}
+
+/* Callout overlay — positioned at the marker, opening away from the centre. */
+
+.ds-globe__callout {
+  position: absolute;
+  pointer-events: none;
+  padding: 0 var(--padding-400);
+  transform: translate(0, -100%);
+  white-space: nowrap;
+}
+
+.ds-globe__callout[data-side='left'] {
+  transform: translate(-100%, -100%);
+}

package/components/Globe/Globe.d.ts

@@ -0,0 +1,103 @@
+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';
+    /**
+     * Marker colour, any CSS colour (`var(--color-status-warning-border)`
+     * works) — the same per-point channel WorldMap carries, so one dataset
+     * keys identically on both projections. Omit for the text-ramp default;
+     * a coloured marker keeps its colour on hover instead of brightening.
+     */
+    color?: string;
+}
+/** 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 {};