@ksp-gonogo/ui-kit 0.1.0

package/dist/Panel.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState, } from "react";
+import styled from "styled-components";
+export const Panel = styled.div `
+  /* Glow extension picked up by ScrollArea — descendant glows extend by these
+     amounts so they sit flush with the panel chrome rather than the inner
+     scroll-container edge. Panel's overflow:hidden clips the overhang. */
+  --scroll-glow-pad-y: 12px;
+  --scroll-glow-pad-x: 16px;
+
+  background: var(--color-surface-panel);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: 4px;
+  padding: 12px 16px;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow: hidden;
+`;
+export const PanelTitle = styled.h3 `
+  margin: 0;
+  font-size: var(--font-size-xs);
+  font-weight: 600;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--color-text-dim);
+`;
+export const PanelSubtitle = styled.div `
+  font-size: 12px;
+  color: var(--color-text-muted);
+  letter-spacing: 0.05em;
+  margin-top: -4px;
+`;
+const ScrollAreaRoot = styled.div `
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  /* Grow to fill the remaining height of a flex-column parent (a Panel body
+     below a fixed-height header) so the inner element's own flex:1 can
+     engage overflow, instead of the outer box sizing to content and
+     spilling past the panel's overflow:hidden edge. Every real consumer
+     wrapping this in a Body styled-component re-applies exactly these two
+     rules, so they're the default here rather than something each widget
+     has to remember. */
+  flex: 1;
+  min-height: 0;
+`;
+/**
+ * Inner scroll element. Rendered with a stable `data-scroll-area-inner`
+ * attribute (set inline below) so consumers can target it from
+ * `styled(ScrollArea)\`& [data-scroll-area-inner] { ... }\`` to apply padding
+ * or layout (display:flex/gap) to the scrolling children.
+ */
+const ScrollAreaInner = styled.div `
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  /* Hide the native scrollbar — the glow indicators communicate scroll state.
+     Trackpads/wheels still scroll; keyboard PageUp/Down/arrows still work. */
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+    display: none;
+  }
+`;
+const ScrollOverflowGlow = styled.div `
+  position: absolute;
+  /* Extend horizontally past the scroll container so the glow sits flush with
+     the panel chrome's left/right borders. Panel's overflow:hidden clips it. */
+  left: calc(-1 * var(--scroll-glow-pad-x, 0px));
+  right: calc(-1 * var(--scroll-glow-pad-x, 0px));
+  ${({ $position }) => $position === "top"
+    ? "top: calc(-1 * var(--scroll-glow-pad-y, 0px));"
+    : "bottom: calc(-1 * var(--scroll-glow-pad-y, 0px));"}
+  height: calc(16px + var(--scroll-glow-pad-y, 0px));
+  pointer-events: none;
+  opacity: ${({ $visible }) => ($visible ? 1 : 0)};
+  transition: opacity 150ms ease;
+  /* Full-width linear fade anchored on the chrome edge — brightest right at
+     the scrollable boundary and tapering inward across the whole width. A
+     centred radial ellipse read as a discrete glowing blob floating over the
+     content; a full-width edge fade reads as the content itself dissolving
+     under a soft overlay at the edge, which is the intended "there's more,
+     scroll" affordance. */
+  background: linear-gradient(
+    ${({ $position }) => ($position === "top" ? "to bottom" : "to top")},
+    rgba(255, 255, 255, 0.13),
+    rgba(255, 255, 255, 0)
+  );
+  z-index: 1;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+`;
+/**
+ * Scrolling region with subtle white glow indicators at the top/bottom edges
+ * when there's scroll content in that direction. Use anywhere an internal
+ * region of a widget can overflow (e.g. lists, terminal output, file trees).
+ *
+ * Forwards its ref to the inner scroll element so consumers can imperatively
+ * scroll. Accepts standard div props on the root; pass className via
+ * `styled(ScrollArea)` to apply layout to the root.
+ */
+export const ScrollArea = forwardRef(function ScrollArea({ children, ...rest }, ref) {
+    const innerRef = useRef(null);
+    const [overflow, setOverflow] = useState({ top: false, bottom: false });
+    useImperativeHandle(ref, () => innerRef.current);
+    useEffect(() => {
+        const el = innerRef.current;
+        if (!el)
+            return;
+        const update = () => {
+            const top = el.scrollTop > 1;
+            const bottom = el.scrollTop + el.clientHeight < el.scrollHeight - 1;
+            setOverflow((prev) => prev.top === top && prev.bottom === bottom ? prev : { top, bottom });
+        };
+        update();
+        el.addEventListener("scroll", update, { passive: true });
+        const ro = new ResizeObserver(update);
+        ro.observe(el);
+        for (const child of Array.from(el.children)) {
+            ro.observe(child);
+        }
+        const mo = new MutationObserver(() => {
+            for (const child of Array.from(el.children)) {
+                ro.observe(child);
+            }
+            update();
+        });
+        mo.observe(el, { childList: true });
+        return () => {
+            el.removeEventListener("scroll", update);
+            ro.disconnect();
+            mo.disconnect();
+        };
+    }, []);
+    return (_jsxs(ScrollAreaRoot, { ...rest, children: [_jsx(ScrollAreaInner, { ref: innerRef, "data-scroll-area-inner": "", children: children }), _jsx(ScrollOverflowGlow, { "$position": "top", "$visible": overflow.top }), _jsx(ScrollOverflowGlow, { "$position": "bottom", "$visible": overflow.bottom })] }));
+});
+//# sourceMappingURL=Panel.js.map

package/dist/Panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.js","sourceRoot":"","sources":["../src/Panel.tsx"],"names":[],"mappings":"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"}

package/dist/ProgressBar.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from "react";
+export interface ProgressBarProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Current value, 0–100. Clamped into range before rendering. */
+    value: number;
+    /** Accessible label for screen readers (e.g. "Biome coverage — Kerbin"). */
+    ariaLabel?: string;
+}
+/**
+ * Thin track+fill progress indicator. Extracted from the Scanning widget's
+ * coverage bar (`CoverageBar`/`CoverageFill`) — the same shape covers the
+ * ContractManager altitude-envelope bar. Renders as a native
+ * `role="progressbar"` so screen readers announce the percentage.
+ */
+export declare function ProgressBar({ value, ariaLabel, ...rest }: Readonly<ProgressBarProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProgressBar.d.ts.map

package/dist/ProgressBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../src/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACxD,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,SAAS,EACT,GAAG,IAAI,EACR,EAAE,QAAQ,CAAC,gBAAgB,CAAC,2CAgB5B"}

package/dist/ProgressBar.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+/**
+ * Thin track+fill progress indicator. Extracted from the Scanning widget's
+ * coverage bar (`CoverageBar`/`CoverageFill`) — the same shape covers the
+ * ContractManager altitude-envelope bar. Renders as a native
+ * `role="progressbar"` so screen readers announce the percentage.
+ */
+export function ProgressBar({ value, ariaLabel, ...rest }) {
+    const clamped = Number.isFinite(value)
+        ? Math.max(0, Math.min(100, value))
+        : 0;
+    return (_jsx(ProgressBar__Track, { role: "progressbar", "aria-label": ariaLabel, "aria-valuenow": clamped, "aria-valuemin": 0, "aria-valuemax": 100, ...rest, children: _jsx(ProgressBar__Fill, { "$percent": clamped }) }));
+}
+const ProgressBar__Track = styled.div `
+  height: 6px;
+  background: var(--color-surface-raised);
+  border-radius: 3px;
+  overflow: hidden;
+`;
+const ProgressBar__Fill = styled.div `
+  height: 100%;
+  width: ${({ $percent }) => `${$percent}%`};
+  background: var(--color-accent-fg);
+  transition: width 250ms linear;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+`;
+//# sourceMappingURL=ProgressBar.js.map

package/dist/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../src/ProgressBar.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAUvC;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,KAAK,EACL,SAAS,EACT,GAAG,IAAI,EACoB;IAC3B,MAAM,OAAO,GAAG,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC;QACpC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;QACnC,CAAC,CAAC,CAAC,CAAC;IACN,OAAO,CACL,KAAC,kBAAkB,IACjB,IAAI,EAAC,aAAa,gBACN,SAAS,mBACN,OAAO,mBACP,CAAC,mBACD,GAAG,KACd,IAAI,YAER,KAAC,iBAAiB,gBAAW,OAAO,GAAI,GACrB,CACtB,CAAC;AACJ,CAAC;AAED,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKpC,CAAC;AAEF,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAsB;;WAE/C,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,GAAG,QAAQ,GAAG;;;;;;;CAO1C,CAAC"}

package/dist/Readout.d.ts

@@ -0,0 +1,35 @@
+export type ReadoutTone = "default" | "go" | "warning" | "alert";
+/**
+ * Big centred readout — typical "tiny mode" hero element. Fills the remaining
+ * panel space and centres a single dominant value (e.g. ΔV, time-to-impact,
+ * warp rate). Use `$tone` to colour-code the readout for state-driven widgets.
+ *
+ * Pair with `<ReadoutCaption>` underneath for an optional sub-label.
+ */
+export declare const BigReadout: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$tone"> & {
+    $tone?: ReadoutTone;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$tone"> & {
+    $tone?: ReadoutTone;
+}, never>>> & string;
+/**
+ * Smaller-scale variant for "small" responsive modes — same hero treatment
+ * but at a compact size. Doesn't fill — sits alongside other content.
+ */
+export declare const Readout: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$tone"> & {
+    $tone?: ReadoutTone;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$tone"> & {
+    $tone?: ReadoutTone;
+}, never>>> & string;
+/** Muted secondary line for both readout sizes (e.g. units, mode tag). */
+export declare const ReadoutCaption: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
+/**
+ * Status pill — single-token badge ("NOMINAL", "GO", "ABORT"). Designed for
+ * tiny-mode widgets that boil their state down to one indicator (thermal
+ * band, ground-survey grade, gonogo state).
+ */
+export declare const StatusPill: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$tone"> & {
+    $tone: ReadoutTone;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$tone"> & {
+    $tone: ReadoutTone;
+}, never>>> & string;
+//# sourceMappingURL=Readout.d.ts.map

package/dist/Readout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Readout.d.ts","sourceRoot":"","sources":["../src/Readout.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAAC;AAejE;;;;;;GAMG;AACH,eAAO,MAAM,UAAU;YAAwB,WAAW;;YAAX,WAAW;oBAczD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,OAAO;YAAwB,WAAW;;YAAX,WAAW;oBAQtD,CAAC;AAEF,0EAA0E;AAC1E,eAAO,MAAM,cAAc,2VAM1B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,UAAU;WAAuB,WAAW;;WAAX,WAAW;oBAoDxD,CAAC"}

package/dist/Readout.js

@@ -0,0 +1,114 @@
+import styled, { css } from "styled-components";
+const toneColor = (tone) => {
+    switch (tone) {
+        case "alert":
+            return "var(--color-status-nogo-fg)";
+        case "warning":
+            return "var(--color-status-warning-bg)";
+        case "go":
+            return "var(--color-status-go-fg)";
+        default:
+            return "var(--color-text-primary)";
+    }
+};
+/**
+ * Big centred readout — typical "tiny mode" hero element. Fills the remaining
+ * panel space and centres a single dominant value (e.g. ΔV, time-to-impact,
+ * warp rate). Use `$tone` to colour-code the readout for state-driven widgets.
+ *
+ * Pair with `<ReadoutCaption>` underneath for an optional sub-label.
+ */
+export const BigReadout = styled.div `
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  text-align: center;
+  font-size: clamp(20px, 6vw, 38px);
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  line-height: 1.05;
+  color: ${({ $tone }) => toneColor($tone)};
+  min-width: 0;
+`;
+/**
+ * Smaller-scale variant for "small" responsive modes — same hero treatment
+ * but at a compact size. Doesn't fill — sits alongside other content.
+ */
+export const Readout = styled.div `
+  display: inline-flex;
+  align-items: baseline;
+  gap: 6px;
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  color: ${({ $tone }) => toneColor($tone)};
+`;
+/** Muted secondary line for both readout sizes (e.g. units, mode tag). */
+export const ReadoutCaption = styled.span `
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.05em;
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+`;
+/**
+ * Status pill — single-token badge ("NOMINAL", "GO", "ABORT"). Designed for
+ * tiny-mode widgets that boil their state down to one indicator (thermal
+ * band, ground-survey grade, gonogo state).
+ */
+export const StatusPill = styled.div `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px 14px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: ${({ $tone }) => toneColor($tone)};
+  background: ${({ $tone }) => {
+    switch ($tone) {
+        case "alert":
+            return "var(--color-status-alert-muted)";
+        case "warning":
+            return "var(--color-tag-dark-brown-bg)";
+        case "go":
+            return "var(--color-surface-raised)";
+        default:
+            return "var(--color-surface-raised)";
+    }
+}};
+  border: 1px solid
+    ${({ $tone }) => {
+    switch ($tone) {
+        case "alert":
+            return "var(--color-status-nogo-bg)";
+        case "warning":
+            return "var(--color-status-warning-bg)";
+        case "go":
+            return "var(--color-status-go-bg)";
+        default:
+            return "var(--color-border-subtle)";
+    }
+}};
+  ${({ $tone }) => $tone === "alert" &&
+    css `
+      @media (prefers-reduced-motion: no-preference) {
+        animation: pill-pulse 1.4s ease-in-out infinite;
+      }
+      @keyframes pill-pulse {
+        0%,
+        100% {
+          opacity: 1;
+        }
+        50% {
+          opacity: 0.7;
+        }
+      }
+    `}
+`;
+//# sourceMappingURL=Readout.js.map

package/dist/Readout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Readout.js","sourceRoot":"","sources":["../src/Readout.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAIhD,MAAM,SAAS,GAAG,CAAC,IAA6B,EAAE,EAAE;IAClD,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,OAAO;YACV,OAAO,6BAA6B,CAAC;QACvC,KAAK,SAAS;YACZ,OAAO,gCAAgC,CAAC;QAC1C,KAAK,IAAI;YACP,OAAO,2BAA2B,CAAC;QACrC;YACE,OAAO,2BAA2B,CAAC;IACvC,CAAC;AACH,CAAC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAyB;;;;;;;;;;;;WAYlD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC;;CAEzC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAyB;;;;;;;WAO/C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC;CACzC,CAAC;AAEF,0EAA0E;AAC1E,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;;CAMxC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAwB;;;;;;;;;;WAUjD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC;gBAC1B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1B,QAAQ,KAAK,EAAE,CAAC;QACd,KAAK,OAAO;YACV,OAAO,iCAAiC,CAAC;QAC3C,KAAK,SAAS;YACZ,OAAO,gCAAgC,CAAC;QAC1C,KAAK,IAAI;YACP,OAAO,6BAA6B,CAAC;QACvC;YACE,OAAO,6BAA6B,CAAC;IACzC,CAAC;AACH,CAAC;;MAEG,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACd,QAAQ,KAAK,EAAE,CAAC;QACd,KAAK,OAAO;YACV,OAAO,6BAA6B,CAAC;QACvC,KAAK,SAAS;YACZ,OAAO,gCAAgC,CAAC;QAC1C,KAAK,IAAI;YACP,OAAO,2BAA2B,CAAC;QACrC;YACE,OAAO,4BAA4B,CAAC;IACxC,CAAC;AACH,CAAC;IACD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACd,KAAK,KAAK,OAAO;IACjB,GAAG,CAAA;;;;;;;;;;;;;KAaF;CACJ,CAAC"}

package/dist/Row.d.ts

@@ -0,0 +1,22 @@
+import type { ElementType, HTMLAttributes, ReactNode } from "react";
+export interface RowProps extends HTMLAttributes<HTMLElement> {
+    /** Rendered tag. Defaults to `li` (a `Row` typically sits in a plain `<ul>`). */
+    as?: ElementType;
+    children?: ReactNode;
+}
+/**
+ * A single spaced-between list row: name on the left, badges/actions on the
+ * right. Extracted from ScienceOfficer's `Row` (`styled.li`) — the shape
+ * hand-rolled ten times across the built-in widgets.
+ *
+ * The truncating name child is exported alongside as `RowName` (also
+ * reachable as `Row.Name`).
+ */
+declare function RowBase({ as, children, ...rest }: RowProps): import("react/jsx-runtime").JSX.Element;
+/** Truncating name/label child for a `Row` — flexes to fill, ellipsises overflow. */
+export declare const RowName: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
+export declare const Row: typeof RowBase & {
+    Name: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
+};
+export {};
+//# sourceMappingURL=Row.d.ts.map

package/dist/Row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Row.d.ts","sourceRoot":"","sources":["../src/Row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGpE,MAAM,WAAW,QAAS,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC3D,iFAAiF;IACjF,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;GAOG;AACH,iBAAS,OAAO,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,QAAQ,2CAMnD;AAWD,qFAAqF;AACrF,eAAO,MAAM,OAAO,2TAOnB,CAAC;AAEF,eAAO,MAAM,GAAG;;CAA4C,CAAC"}

package/dist/Row.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+/**
+ * A single spaced-between list row: name on the left, badges/actions on the
+ * right. Extracted from ScienceOfficer's `Row` (`styled.li`) — the shape
+ * hand-rolled ten times across the built-in widgets.
+ *
+ * The truncating name child is exported alongside as `RowName` (also
+ * reachable as `Row.Name`).
+ */
+function RowBase({ as, children, ...rest }) {
+    return (_jsx(Row__Root, { as: as ?? "li", ...rest, children: children }));
+}
+const Row__Root = styled.li `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  padding: 2px 0;
+`;
+/** Truncating name/label child for a `Row` — flexes to fill, ellipsises overflow. */
+export const RowName = styled.span `
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+  color: var(--color-text-primary);
+`;
+export const Row = Object.assign(RowBase, { Name: RowName });
+//# sourceMappingURL=Row.js.map

package/dist/Row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Row.js","sourceRoot":"","sources":["../src/Row.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAQvC;;;;;;;GAOG;AACH,SAAS,OAAO,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAY;IAClD,OAAO,CACL,KAAC,SAAS,IAAC,EAAE,EAAE,EAAE,IAAI,IAAI,KAAM,IAAI,YAChC,QAAQ,GACC,CACb,CAAC;AACJ,CAAC;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;;;CAO1B,CAAC;AAEF,qFAAqF;AACrF,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;;;CAOjC,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC"}

package/dist/Section.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface SectionProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+/**
+ * A named group of rows within a panel — `Stack` pinned to the tightest gap.
+ * Extracted from ScienceOfficer's `Group` (`flex-direction:column;gap:2px`).
+ */
+export declare function Section({ children, ...rest }: SectionProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Uppercase, tracked-out label for a `Section`. Extracted from
+ * ScienceOfficer's `GroupLabel`.
+ */
+export declare const SectionTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+//# sourceMappingURL=Section.d.ts.map

package/dist/Section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../src/Section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvD,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,cAAc,CAAC;IAClE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,YAAY,2CAM1D;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,uTAKxB,CAAC"}

package/dist/Section.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import { Stack } from "./Stack";
+/**
+ * A named group of rows within a panel — `Stack` pinned to the tightest gap.
+ * Extracted from ScienceOfficer's `Group` (`flex-direction:column;gap:2px`).
+ */
+export function Section({ children, ...rest }) {
+    return (_jsx(Stack, { gap: "xs", ...rest, children: children }));
+}
+/**
+ * Uppercase, tracked-out label for a `Section`. Extracted from
+ * ScienceOfficer's `GroupLabel`.
+ */
+export const SectionTitle = styled.div `
+  font-size: var(--font-size-xs);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--color-text-muted);
+`;
+//# sourceMappingURL=Section.js.map

package/dist/Section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.js","sourceRoot":"","sources":["../src/Section.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAMhC;;;GAGG;AACH,MAAM,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAgB;IACzD,OAAO,CACL,KAAC,KAAK,IAAC,GAAG,EAAC,IAAI,KAAK,IAAI,YACrB,QAAQ,GACH,CACT,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKrC,CAAC"}

package/dist/Spinner.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Small inline pending indicator. Sized to slot next to a row label /
+ * value without reflowing layout. Honours `prefers-reduced-motion` —
+ * the spin animation is gated on the no-preference query so users with
+ * vestibular sensitivity see a static ring instead.
+ */
+export interface SpinnerProps {
+    /** Outer diameter in pixels. Defaults to 12. */
+    size?: number;
+    /** Stroke width in pixels. Defaults to 2. */
+    thickness?: number;
+    /** Active arc colour. Defaults to the accent foreground. */
+    color?: string;
+    /** ARIA label for screen readers. */
+    ariaLabel?: string;
+}
+export declare function Spinner({ size, thickness, color, ariaLabel, }: Readonly<SpinnerProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Spinner.d.ts.map

package/dist/Spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../src/Spinner.tsx"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,MAAM,WAAW,YAAY;IAC3B,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,OAAO,CAAC,EACtB,IAAS,EACT,SAAa,EACb,KAAgC,EAChC,SAAqB,GACtB,EAAE,QAAQ,CAAC,YAAY,CAAC,2CAUxB"}

package/dist/Spinner.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled, { keyframes } from "styled-components";
+export function Spinner({ size = 12, thickness = 2, color = "var(--color-accent-fg)", ariaLabel = "Loading", }) {
+    return (_jsx(SpinnerEl, { role: "status", "aria-label": ariaLabel, "$size": size, "$thickness": thickness, "$color": color }));
+}
+const spin = keyframes `
+  to { transform: rotate(360deg); }
+`;
+const SpinnerEl = styled.span `
+  display: inline-block;
+  width: ${({ $size }) => `${$size}px`};
+  height: ${({ $size }) => `${$size}px`};
+  border-radius: 50%;
+  border: ${({ $thickness }) => `${$thickness}px`} solid
+    var(--color-border-subtle);
+  border-top-color: ${({ $color }) => $color};
+  flex-shrink: 0;
+  @media (prefers-reduced-motion: no-preference) {
+    animation: ${spin} 700ms linear infinite;
+  }
+`;
+//# sourceMappingURL=Spinner.js.map

package/dist/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../src/Spinner.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAmBtD,MAAM,UAAU,OAAO,CAAC,EACtB,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,CAAC,EACb,KAAK,GAAG,wBAAwB,EAChC,SAAS,GAAG,SAAS,GACE;IACvB,OAAO,CACL,KAAC,SAAS,IACR,IAAI,EAAC,QAAQ,gBACD,SAAS,WACd,IAAI,gBACC,SAAS,YACb,KAAK,GACb,CACH,CAAC;AACJ,CAAC;AAED,MAAM,IAAI,GAAG,SAAS,CAAA;;CAErB,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAI3B;;WAES,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,KAAK,IAAI;YAC1B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,KAAK,IAAI;;YAE3B,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,GAAG,UAAU,IAAI;;sBAE3B,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM;;;iBAG3B,IAAI;;CAEpB,CAAC"}

package/dist/Stack.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type SpaceToken = "xs" | "sm" | "md" | "lg" | "xl";
+export interface StackProps extends HTMLAttributes<HTMLDivElement> {
+    /** Gap between children, snapped to the space scale. Defaults to `sm`. */
+    gap?: SpaceToken;
+    children?: ReactNode;
+}
+/**
+ * Vertical flex list — the most common container shape in the dashboard.
+ * Replaces the many ad-hoc `styled.div\`flex-direction:column;gap:…\`` blocks
+ * scattered across widgets (e.g. ScienceOfficer's `Group`/`InstrumentList`/
+ * `LabList`).
+ */
+export declare function Stack({ gap, children, ...rest }: StackProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Stack.d.ts.map

package/dist/Stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../src/Stack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1D,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,0EAA0E;IAC1E,GAAG,CAAC,EAAE,UAAU,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,EAAE,GAAU,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,UAAU,2CAMlE"}

package/dist/Stack.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+/**
+ * Vertical flex list — the most common container shape in the dashboard.
+ * Replaces the many ad-hoc `styled.div\`flex-direction:column;gap:…\`` blocks
+ * scattered across widgets (e.g. ScienceOfficer's `Group`/`InstrumentList`/
+ * `LabList`).
+ */
+export function Stack({ gap = "sm", children, ...rest }) {
+    return (_jsx(Stack__Root, { "$gap": gap, ...rest, children: children }));
+}
+const Stack__Root = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme, $gap }) => theme.space[$gap]};
+`;
+//# sourceMappingURL=Stack.js.map

package/dist/Stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.js","sourceRoot":"","sources":["../src/Stack.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAUvC;;;;;GAKG;AACH,MAAM,UAAU,KAAK,CAAC,EAAE,GAAG,GAAG,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAc;IACjE,OAAO,CACL,KAAC,WAAW,YAAO,GAAG,KAAM,IAAI,YAC7B,QAAQ,GACG,CACf,CAAC;AACJ,CAAC;AAED,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAsB;;;SAG3C,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;CAC9C,CAAC"}

package/dist/StatusIndicator.d.ts

@@ -0,0 +1,27 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type StatusTone = "neutral" | "info" | "go" | "warn" | "nogo";
+export interface StatusIndicatorProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    tone: StatusTone;
+    children: ReactNode;
+    /**
+     * When true, the indicator becomes a screen-reader live region.
+     * Use for state that updates dynamically and the user benefits from
+     * being told (connection going from probing → ok / fail). Default
+     * false to keep it out of the accessibility tree for purely decorative
+     * uses.
+     */
+    live?: boolean;
+}
+/**
+ * Coloured dot + one-line status text. Tone maps to the same palette
+ * as `Badge` but the layout is different: dot on the left, free-form
+ * label on the right, optional live-region semantics. Use for
+ * "connection status," "TURN reachability," "data source health"
+ * surfaces — anywhere a single sentence describes a state and a glance
+ * at the dot tells you whether to worry.
+ *
+ * Sister primitive: `Badge`. Use `Badge` for compact uppercase pills,
+ * `StatusIndicator` for sentence-length state with a leading dot.
+ */
+export declare function StatusIndicator({ tone, children, live, ...rest }: StatusIndicatorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StatusIndicator.d.ts.map

package/dist/StatusIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusIndicator.d.ts","sourceRoot":"","sources":["../src/StatusIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;AAErE,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACxD,IAAI,EAAE,UAAU,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,QAAQ,EACR,IAAY,EACZ,GAAG,IAAI,EACR,EAAE,oBAAoB,2CAUtB"}