@tensor_1/react 2.30.0 → 2.32.0

package/dist/components/FileUpload.js

@@ -0,0 +1,145 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from "react";
+import { cx } from "../cx.js";
+import { fillLabel } from "../fill-label.js";
+import { formatFileSize, partitionFiles } from "../file-model.js";
+import { useUixLabels } from "../labels-context.js";
+import { Button } from "./Button.js";
+import { Input } from "./Input.js";
+import { Progress } from "./Progress.js";
+import { FileIcon } from "./FileIcon.js";
+const DEFAULT_FILE_UPLOAD_LABELS = {
+  title: "Drop files here",
+  choose: "Choose files",
+  drop: "Release to add the files",
+  list: "Files",
+  remove: "Remove {name}",
+  retry: "Retry {name}",
+  retryShort: "Retry",
+  queued: "Waiting",
+  uploading: "Uploading, {progress}%",
+  done: "Uploaded",
+  failed: "Upload failed",
+  alt: "Description of {name} for screen readers",
+  added: "{count} added",
+  wrongType: "{name} is not an accepted file type ({accept}).",
+  tooLarge: "{name} is larger than {max}.",
+  tooMany: "{name} was not added: at most {max} files."
+};
+function FileUpload({
+  items,
+  onFilesAdded,
+  onRemove,
+  onRetry,
+  onAltChange,
+  accept,
+  maxSize,
+  maxFiles,
+  multiple = true,
+  capture,
+  disabled,
+  hint,
+  locale,
+  sizeBase,
+  formatSize,
+  labels: labelOverrides,
+  className
+}) {
+  const labels = { ...DEFAULT_FILE_UPLOAD_LABELS, ...useUixLabels().fileUpload, ...labelOverrides };
+  const sizeText = (bytes) => formatSize ? formatSize(bytes, locale) : formatFileSize(bytes, locale, { base: sizeBase });
+  const id = useId();
+  const inputRef = useRef(null);
+  const [over, setOver] = useState(false);
+  const [messages, setMessages] = useState([]);
+  const [announce, setAnnounce] = useState("");
+  const take = (list) => {
+    if (!list || disabled) return;
+    const files = Array.from(list);
+    const { accepted, rejected } = partitionFiles(files, { accept, maxSize, maxFiles, existing: items.length });
+    const max = maxSize !== void 0 ? sizeText(maxSize) : "";
+    setMessages(rejected.map(({ file, reason }) => fillLabel(
+      reason === "type" ? labels.wrongType : reason === "size" ? labels.tooLarge : labels.tooMany,
+      { name: file.name, accept: accept ?? "", max: reason === "count" ? String(maxFiles) : max }
+    )));
+    setAnnounce(accepted.length ? fillLabel(labels.added, { count: accepted.length }) : "");
+    onFilesAdded(accepted, rejected);
+  };
+  const onDrop = (event) => {
+    event.preventDefault();
+    setOver(false);
+    take(event.dataTransfer?.files ?? null);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-file-upload", className), "data-disabled": disabled || void 0, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "uix-dropzone",
+        "data-dragover": over || void 0,
+        onDragOver: (event) => {
+          if (disabled) return;
+          event.preventDefault();
+          setOver(true);
+        },
+        onDragLeave: () => setOver(false),
+        onDrop,
+        onClick: (event) => {
+          if (event.target === event.currentTarget) inputRef.current?.click();
+        },
+        children: [
+          /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M12 15V4M7 9l5-5 5 5M4 15v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4" }) }),
+          /* @__PURE__ */ jsx("strong", { "aria-hidden": over || void 0, children: over ? labels.drop : labels.title }),
+          hint != null && /* @__PURE__ */ jsx("span", { className: "uix-file-upload__hint", id: `${id}-hint`, children: hint }),
+          /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", disabled, "aria-describedby": hint != null ? `${id}-hint` : void 0, onClick: () => inputRef.current?.click(), children: labels.choose }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "file",
+              className: "uix-visually-hidden",
+              tabIndex: -1,
+              "aria-hidden": "true",
+              accept,
+              multiple,
+              capture,
+              disabled,
+              onChange: (event) => {
+                take(event.currentTarget.files);
+                event.currentTarget.value = "";
+              }
+            }
+          )
+        ]
+      }
+    ),
+    messages.length > 0 && // The alert wraps the list: role="alert" on the <ul> itself replaced its list role and
+    // left the <li>s outside any list (axe `listitem`).
+    /* @__PURE__ */ jsx("div", { role: "alert", children: /* @__PURE__ */ jsx("ul", { className: "uix-file-upload__errors", children: messages.map((m, i) => /* @__PURE__ */ jsx("li", { children: m }, i)) }) }),
+    /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", role: "status", "aria-live": "polite", children: announce }),
+    items.length > 0 && /* @__PURE__ */ jsx("ul", { className: "uix-filelist uix-file-upload__list", "aria-label": labels.list, children: items.map((item) => {
+      const statusText = item.status === "uploading" ? fillLabel(labels.uploading, { progress: item.progress ?? 0 }) : item.status === "done" ? labels.done : item.status === "error" ? labels.failed : labels.queued;
+      const image = !!item.previewUrl;
+      return /* @__PURE__ */ jsxs("li", { className: "uix-filelist__item uix-file-upload__item", "data-status": item.status, children: [
+        image ? /* @__PURE__ */ jsx("img", { className: "uix-file-upload__thumb", src: item.previewUrl, alt: "" }) : /* @__PURE__ */ jsx("span", { className: "uix-attachment__icon", children: /* @__PURE__ */ jsx(FileIcon, { name: item.name, type: item.type }) }),
+        /* @__PURE__ */ jsxs("div", { className: "uix-file-upload__body", children: [
+          /* @__PURE__ */ jsx("span", { className: "uix-file-upload__name", children: item.name }),
+          /* @__PURE__ */ jsxs("span", { className: "uix-file-upload__meta", children: [
+            /* @__PURE__ */ jsx("span", { children: sizeText(item.size) }),
+            item.status !== "uploading" && /* @__PURE__ */ jsx("span", { className: "uix-file-upload__status", children: statusText })
+          ] }),
+          item.status === "uploading" && /* @__PURE__ */ jsx(Progress, { value: item.progress, indeterminate: item.progress === void 0, max: 100, label: statusText }),
+          item.status === "error" && item.error != null && /* @__PURE__ */ jsx("span", { className: "uix-file-upload__error", children: item.error }),
+          image && onAltChange && /* @__PURE__ */ jsx(Input, { size: "sm", "aria-label": fillLabel(labels.alt, { name: item.name }), placeholder: fillLabel(labels.alt, { name: item.name }), value: item.alt ?? "", onChange: (event) => onAltChange(item.id, event.currentTarget.value) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "uix-file-upload__actions", children: [
+          item.status === "error" && onRetry && /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", "aria-label": fillLabel(labels.retry, { name: item.name }), onClick: () => onRetry(item.id), children: labels.retryShort }),
+          onRemove && /* @__PURE__ */ jsx(Button, { type: "button", size: "xs", variant: "ghost", icon: true, "aria-label": fillLabel(labels.remove, { name: item.name }), onClick: () => onRemove(item.id), children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" }) }) })
+        ] })
+      ] }, item.id);
+    }) })
+  ] });
+}
+export {
+  DEFAULT_FILE_UPLOAD_LABELS,
+  FileUpload
+};

package/dist/components/FilterEditor.d.ts

@@ -0,0 +1,55 @@
+import * as react from 'react';
+import { TextFilterOperator, NumberFilterOperator, FilterField, FilterValue } from '../filter-model.js';
+
+interface FilterEditorLabels {
+    apply: string;
+    clear: string;
+    operator: string;
+    value: string;
+    from: string;
+    to: string;
+    /** Between two numbers: "and". */
+    and: string;
+    any: string;
+    yes: string;
+    no: string;
+    search: string;
+    searching: string;
+    noMatches: string;
+    searchFailed: string;
+    retry: string;
+    selectAll: string;
+    selectNone: string;
+    /** `{count}` chosen. */
+    selected: string;
+    /** Remove one chosen record. `{label}`. */
+    remove: string;
+    /** Names the row of `field.presets` chips. Optional so existing label objects still type-check; default "Presets". */
+    presets?: string;
+    operators: Record<TextFilterOperator | NumberFilterOperator, string>;
+}
+declare const DEFAULT_FILTER_EDITOR_LABELS: FilterEditorLabels;
+interface FilterEditorProps {
+    field: FilterField;
+    /** Undefined means "not filtered yet". */
+    value: FilterValue | undefined;
+    onValueChange: (value: FilterValue) => void;
+    onApply: () => void;
+    onClear: () => void;
+    labels?: Partial<FilterEditorLabels>;
+    /** Show an option filter above an enum list once it has more options than this. Default 8. */
+    searchThreshold?: number;
+    /** Delay before a reference search runs, in ms. Default 250. */
+    searchDelay?: number;
+}
+/**
+ * Editor content for one typed column filter (HAR-1365; TENSOR C6, MOTUS C-1): an enum
+ * multi-select, text or number with a condition, a date range, yes/no, or records found by
+ * an async search. The product owns the popover trigger and the query; `summarizeFilter`
+ * turns the applied value into the chip text. `FilterPopover` stays for the one-string case.
+ * An enum field's `presets` (HAR-1505) render as toggle chips above its options. Words come
+ * from `labels`, or from `UixLabelsProvider`'s `filterEditor` entry.
+ */
+declare function FilterEditor({ field, value: valueProp, onValueChange, onApply, onClear, labels: labelOverrides, searchThreshold, searchDelay }: FilterEditorProps): react.JSX.Element;
+
+export { DEFAULT_FILTER_EDITOR_LABELS, FilterEditor, type FilterEditorLabels, type FilterEditorProps };

package/dist/components/FilterEditor.js

@@ -0,0 +1,186 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { Button } from "./Button.js";
+import { Checkbox } from "./Checkbox.js";
+import { Input } from "./Input.js";
+import { Radio, RadioGroup } from "./Radio.js";
+import { Select } from "./Select.js";
+import { Chip } from "./Chip.js";
+import { fillLabel } from "../fill-label.js";
+import { useUixLabels } from "../labels-context.js";
+import { foldForSearch } from "../search-suggest-model.js";
+import { NUMBER_FILTER_OPERATORS, TEXT_FILTER_OPERATORS, emptyFilterValue, matchFilterPreset } from "../filter-model.js";
+const DEFAULT_FILTER_EDITOR_LABELS = {
+  apply: "Apply",
+  clear: "Clear",
+  operator: "Condition",
+  value: "Value",
+  from: "From",
+  to: "To",
+  and: "and",
+  any: "Any",
+  yes: "Yes",
+  no: "No",
+  search: "Search",
+  searching: "Searching\u2026",
+  noMatches: "No matches.",
+  searchFailed: "Search failed.",
+  retry: "Try again",
+  selectAll: "Select all",
+  selectNone: "Clear selection",
+  selected: "{count} selected",
+  remove: "Remove {label}",
+  presets: "Presets",
+  operators: {
+    contains: "contains",
+    "not-contains": "does not contain",
+    is: "is",
+    "is-not": "is not",
+    "starts-with": "starts with",
+    eq: "equals",
+    neq: "does not equal",
+    lt: "less than",
+    lte: "at most",
+    gt: "more than",
+    gte: "at least",
+    between: "between"
+  }
+};
+function FilterEditor({ field, value: valueProp, onValueChange, onApply, onClear, labels: labelOverrides, searchThreshold = 8, searchDelay = 250 }) {
+  const provided = useUixLabels().filterEditor;
+  const labels = {
+    ...DEFAULT_FILTER_EDITOR_LABELS,
+    ...provided,
+    ...labelOverrides,
+    operators: { ...DEFAULT_FILTER_EDITOR_LABELS.operators, ...provided?.operators, ...labelOverrides?.operators }
+  };
+  const id = useId();
+  const value = valueProp?.kind === field.kind ? valueProp : emptyFilterValue(field.kind);
+  let body = null;
+  switch (value.kind) {
+    case "enum":
+      body = /* @__PURE__ */ jsx(EnumBody, { field, value, onChange: onValueChange, labels, threshold: searchThreshold });
+      break;
+    case "reference":
+      body = /* @__PURE__ */ jsx(ReferenceBody, { field, value, onChange: onValueChange, labels, delay: searchDelay });
+      break;
+    case "text": {
+      const ops = field.operators ?? TEXT_FILTER_OPERATORS;
+      body = /* @__PURE__ */ jsxs("div", { className: "uix-filter-editor__row", children: [
+        ops.length > 1 && /* @__PURE__ */ jsx(Select, { size: "sm", "aria-label": labels.operator, value: value.operator, onChange: (e) => onValueChange({ ...value, operator: e.currentTarget.value }), children: ops.map((op) => /* @__PURE__ */ jsx("option", { value: op, children: labels.operators[op] }, op)) }),
+        /* @__PURE__ */ jsx(Input, { "aria-label": labels.value, value: value.text, onChange: (e) => onValueChange({ ...value, text: e.currentTarget.value }), onKeyDown: (e) => {
+          if (e.key === "Enter") onApply();
+        }, autoFocus: true })
+      ] });
+      break;
+    }
+    case "number": {
+      const ops = field.operators ?? NUMBER_FILTER_OPERATORS;
+      const toNumber = (raw) => raw.trim() === "" ? void 0 : Number(raw);
+      body = /* @__PURE__ */ jsxs("div", { className: "uix-filter-editor__row", children: [
+        ops.length > 1 && /* @__PURE__ */ jsx(Select, { size: "sm", "aria-label": labels.operator, value: value.operator, onChange: (e) => onValueChange({ ...value, operator: e.currentTarget.value }), children: ops.map((op) => /* @__PURE__ */ jsx("option", { value: op, children: labels.operators[op] }, op)) }),
+        /* @__PURE__ */ jsx(Input, { type: "number", inputMode: "decimal", "aria-label": value.operator === "between" ? labels.from : labels.value, value: value.value ?? "", onChange: (e) => onValueChange({ ...value, value: toNumber(e.currentTarget.value) }), autoFocus: true }),
+        value.operator === "between" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "uix-filter-editor__and", children: labels.and }),
+          /* @__PURE__ */ jsx(Input, { type: "number", inputMode: "decimal", "aria-label": labels.to, value: value.to ?? "", onChange: (e) => onValueChange({ ...value, to: toNumber(e.currentTarget.value) }) })
+        ] }),
+        field.unit && /* @__PURE__ */ jsx("span", { className: "uix-filter-editor__unit", children: field.unit })
+      ] });
+      break;
+    }
+    case "date-range":
+      body = /* @__PURE__ */ jsxs("div", { className: "uix-filter-editor__row", children: [
+        /* @__PURE__ */ jsxs("label", { className: "uix-filter-editor__date", children: [
+          /* @__PURE__ */ jsx("span", { children: labels.from }),
+          /* @__PURE__ */ jsx(Input, { type: "date", value: value.from ?? "", max: value.to, onChange: (e) => onValueChange({ ...value, from: e.currentTarget.value || void 0 }) })
+        ] }),
+        /* @__PURE__ */ jsxs("label", { className: "uix-filter-editor__date", children: [
+          /* @__PURE__ */ jsx("span", { children: labels.to }),
+          /* @__PURE__ */ jsx(Input, { type: "date", value: value.to ?? "", min: value.from, onChange: (e) => onValueChange({ ...value, to: e.currentTarget.value || void 0 }) })
+        ] })
+      ] });
+      break;
+    case "boolean": {
+      const pick = (v) => onValueChange({ kind: "boolean", value: v });
+      body = /* @__PURE__ */ jsxs(RadioGroup, { className: "uix-filter-editor__choices", children: [
+        /* @__PURE__ */ jsx(Radio, { name: `${id}-bool`, label: labels.any, checked: value.value === void 0, onChange: () => pick(void 0) }),
+        /* @__PURE__ */ jsx(Radio, { name: `${id}-bool`, label: field.trueLabel ?? labels.yes, checked: value.value === true, onChange: () => pick(true) }),
+        /* @__PURE__ */ jsx(Radio, { name: `${id}-bool`, label: field.falseLabel ?? labels.no, checked: value.value === false, onChange: () => pick(false) })
+      ] });
+      break;
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "uix-filter-popover uix-filter-editor", role: "group", "aria-labelledby": `${id}-label`, "data-kind": field.kind, children: [
+    /* @__PURE__ */ jsx("div", { id: `${id}-label`, className: "uix-filter-editor__label", children: field.label }),
+    body,
+    /* @__PURE__ */ jsxs("div", { className: "uix-filter-popover__actions", children: [
+      /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", onClick: onClear, children: labels.clear }),
+      /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "primary", onClick: onApply, children: labels.apply })
+    ] })
+  ] });
+}
+function EnumBody({ field, value, onChange, labels, threshold }) {
+  const [query, setQuery] = useState("");
+  const options = field.options ?? [];
+  const shown = useMemo(() => {
+    const q = foldForSearch(query.trim()).text;
+    return q ? options.filter((o) => foldForSearch(o.label).text.includes(q)) : options;
+  }, [options, query]);
+  const selected = new Set(value.values);
+  const toggle = (v, on) => onChange({ kind: "enum", values: on ? [...value.values, v] : value.values.filter((x) => x !== v) });
+  const presets = field.presets ?? [];
+  const active = matchFilterPreset(field, value);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    presets.length > 0 && /* @__PURE__ */ jsx("div", { className: "uix-chip-group uix-filter-editor__presets", role: "group", "aria-label": labels.presets ?? DEFAULT_FILTER_EDITOR_LABELS.presets, children: presets.map((p) => /* @__PURE__ */ jsx(Chip, { pressed: p === active, onPressedChange: () => onChange({ kind: "enum", values: [...p.values] }), children: p.label }, p.id)) }),
+    options.length > threshold && /* @__PURE__ */ jsx(Input, { type: "search", size: "sm", "aria-label": labels.search, placeholder: labels.search, value: query, onChange: (e) => setQuery(e.currentTarget.value), autoFocus: true }),
+    /* @__PURE__ */ jsxs("div", { className: "uix-filter-editor__bulk", children: [
+      /* @__PURE__ */ jsx("span", { className: "uix-filter-editor__count", "aria-live": "polite", children: fillLabel(labels.selected, { count: value.values.length }) }),
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "link", size: "sm", onClick: () => onChange({ kind: "enum", values: [.../* @__PURE__ */ new Set([...value.values, ...shown.map((o) => o.value)])] }), children: labels.selectAll }),
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "link", size: "sm", onClick: () => onChange({ kind: "enum", values: [] }), children: labels.selectNone })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "uix-filter-editor__list", children: shown.length === 0 ? /* @__PURE__ */ jsx("p", { className: "uix-filter-editor__note", children: labels.noMatches }) : shown.map((o) => /* @__PURE__ */ jsx(Checkbox, { label: o.label, checked: selected.has(o.value), onChange: (e) => toggle(o.value, e.currentTarget.checked) }, o.value)) })
+  ] });
+}
+function ReferenceBody({ field, value, onChange, labels, delay }) {
+  const [query, setQuery] = useState("");
+  const [state, setState] = useState({ status: "idle", results: [] });
+  const [attempt, setAttempt] = useState(0);
+  const latest = useRef(0);
+  useEffect(() => {
+    if (!field.onSearch) return;
+    const run = ++latest.current;
+    const timer = window.setTimeout(() => {
+      setState((s) => ({ ...s, status: "loading" }));
+      field.onSearch(query.trim()).then(
+        (results) => {
+          if (run === latest.current) setState({ status: "done", results });
+        },
+        () => {
+          if (run === latest.current) setState({ status: "error", results: [] });
+        }
+      );
+    }, delay);
+    return () => window.clearTimeout(timer);
+  }, [query, attempt, field, delay]);
+  const chosen = new Map(value.values.map((v) => [v.value, v]));
+  const toggle = (choice, on) => onChange({ kind: "reference", values: on ? [...value.values, choice] : value.values.filter((v) => v.value !== choice.value) });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    value.values.length > 0 && /* @__PURE__ */ jsx("div", { className: "uix-chip-group", role: "group", "aria-label": fillLabel(labels.selected, { count: value.values.length }), children: value.values.map((v) => /* @__PURE__ */ jsx(Chip, { removeLabel: fillLabel(labels.remove, { label: v.label }), onRemove: () => toggle(v, false), children: v.label }, v.value)) }),
+    /* @__PURE__ */ jsx(Input, { type: "search", size: "sm", "aria-label": labels.search, placeholder: labels.search, value: query, onChange: (e) => setQuery(e.currentTarget.value), autoFocus: true }),
+    /* @__PURE__ */ jsxs("div", { className: "uix-filter-editor__list", "aria-busy": state.status === "loading" || void 0, children: [
+      state.status === "loading" && /* @__PURE__ */ jsx("p", { className: "uix-filter-editor__note", role: "status", children: labels.searching }),
+      state.status === "error" && /* @__PURE__ */ jsxs("p", { className: "uix-filter-editor__note", role: "alert", children: [
+        labels.searchFailed,
+        " ",
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "link", size: "sm", onClick: () => setAttempt((n) => n + 1), children: labels.retry })
+      ] }),
+      state.status === "done" && state.results.length === 0 && /* @__PURE__ */ jsx("p", { className: "uix-filter-editor__note", children: labels.noMatches }),
+      state.status === "done" && state.results.map((r) => /* @__PURE__ */ jsx(Checkbox, { label: r.label, checked: chosen.has(r.value), onChange: (e) => toggle(r, e.currentTarget.checked) }, r.value))
+    ] })
+  ] });
+}
+export {
+  DEFAULT_FILTER_EDITOR_LABELS,
+  FilterEditor
+};

package/dist/components/Heartbeat.d.ts

@@ -0,0 +1,31 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type HeartbeatState = 'live' | 'idle' | 'warning' | 'danger';
+interface HeartbeatProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /**
+     * `live` (default): a green dot with a pulsing ring. `warning` / `danger`: the same in that
+     * tone. `idle`: a grey dot, no ring.
+     */
+    state?: HeartbeatState;
+    /**
+     * What the dot means, for assistive technology ("Live", "Connection lost"). Without it the
+     * dot is decorative (`aria-hidden`): say the state in text beside it, as `LiveIndicator` does.
+     */
+    label?: string;
+}
+/**
+ * The pulsing status dot over `.uix-heartbeat` (HAR-1606), so products stop hand-writing its
+ * three spans. Decorative unless it has a `label`. The ring stops under
+ * `prefers-reduced-motion` (the kit's global motion guard); the dot and its colour stay.
+ */
+declare function Heartbeat({ state, label, className, ...props }: HeartbeatProps): react.JSX.Element;
+interface LiveIndicatorProps extends HTMLAttributes<HTMLSpanElement> {
+    state?: HeartbeatState;
+    /** The state in words: "Live", "Paused", "Reconnecting…". It is what a screen reader gets. */
+    children?: ReactNode;
+}
+/** A `Heartbeat` with its state in text beside it, over `.uix-live`. */
+declare function LiveIndicator({ state, children, className, ...props }: LiveIndicatorProps): react.JSX.Element;
+
+export { Heartbeat, type HeartbeatProps, type HeartbeatState, LiveIndicator, type LiveIndicatorProps };

package/dist/components/Heartbeat.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "../cx.js";
+function Heartbeat({ state = "live", label, className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cx("uix-heartbeat", state !== "live" && `uix-heartbeat--${state}`, className),
+      role: label ? "img" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : true,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "uix-heartbeat__ping" }),
+        /* @__PURE__ */ jsx("span", { className: "uix-heartbeat__dot" })
+      ]
+    }
+  );
+}
+function LiveIndicator({ state = "live", children, className, ...props }) {
+  return /* @__PURE__ */ jsxs("span", { className: cx("uix-live", className), ...props, children: [
+    /* @__PURE__ */ jsx(Heartbeat, { state }),
+    children
+  ] });
+}
+export {
+  Heartbeat,
+  LiveIndicator
+};

package/dist/components/Lightbox.d.ts

@@ -0,0 +1,45 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface LightboxItem {
+    src: string;
+    /** Alternative text for an image; the video's name for a video. */
+    alt: string;
+    caption?: ReactNode;
+    kind?: 'image' | 'video';
+    /** Intrinsic size, so an SVG or a slow image keeps its box. */
+    width?: number;
+    height?: number;
+}
+interface LightboxLabels {
+    region: string;
+    previous: string;
+    next: string;
+    close: string;
+    /** `{index}`, `{total}`. */
+    counter: string;
+    zoomIn: string;
+    zoomOut: string;
+}
+declare const DEFAULT_LIGHTBOX_LABELS: LightboxLabels;
+interface LightboxProps {
+    items: readonly LightboxItem[];
+    /** The item on show (0-based). */
+    index: number;
+    onIndexChange: (index: number) => void;
+    open: boolean;
+    onClose: () => void;
+    /** Wrap from the last item to the first. Default false. */
+    loop?: boolean;
+    labels?: Partial<LightboxLabels>;
+    className?: string;
+}
+/**
+ * A full-screen media viewer over `.uix-lightbox` (HAR-1367; TENSOR C12 `capture-viewer.tsx`,
+ * MOTUS C-8 programme gallery): previous/next buttons, ←/→ and Home/End, swipe on touch, an
+ * announced "n of total" counter, a caption, and a fit/actual-size toggle. Native `<dialog>`,
+ * so focus stays inside and Escape closes; focus returns to the control that opened it.
+ */
+declare function Lightbox({ items, index, onIndexChange, open, onClose, loop, labels: labelOverrides, className }: LightboxProps): react.JSX.Element;
+
+export { DEFAULT_LIGHTBOX_LABELS, Lightbox, type LightboxItem, type LightboxLabels, type LightboxProps };

package/dist/components/Lightbox.js

@@ -0,0 +1,102 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { cx } from "../cx.js";
+import { fillLabel } from "../fill-label.js";
+import { useDialog } from "../hooks/useDialog.js";
+const DEFAULT_LIGHTBOX_LABELS = {
+  region: "Media viewer",
+  previous: "Previous",
+  next: "Next",
+  close: "Close",
+  counter: "{index} of {total}",
+  zoomIn: "Show actual size",
+  zoomOut: "Fit to screen"
+};
+const Chevron = ({ dir }) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: dir === "left" ? "m15 18-6-6 6-6" : "m9 18 6-6-6-6" }) });
+function Lightbox({ items, index, onIndexChange, open, onClose, loop = false, labels: labelOverrides, className }) {
+  const labels = { ...DEFAULT_LIGHTBOX_LABELS, ...labelOverrides };
+  const ref = useDialog(open, onClose);
+  const closeRef = useRef(null);
+  const returnTo = useRef(null);
+  const swipe = useRef(null);
+  const [zoomed, setZoomed] = useState(false);
+  const total = items.length;
+  const current = items[Math.min(Math.max(index, 0), Math.max(total - 1, 0))];
+  const hasPrev = loop ? total > 1 : index > 0;
+  const hasNext = loop ? total > 1 : index < total - 1;
+  useEffect(() => {
+    if (open) {
+      returnTo.current = document.activeElement;
+      closeRef.current?.focus();
+    } else if (returnTo.current) {
+      returnTo.current.focus?.();
+      returnTo.current = null;
+    }
+  }, [open]);
+  useEffect(() => {
+    setZoomed(false);
+  }, [index]);
+  const go = (to) => {
+    if (total === 0) return;
+    const next = loop ? (to + total) % total : Math.min(Math.max(to, 0), total - 1);
+    if (next !== index) onIndexChange(next);
+  };
+  const onKeyDown = (event) => {
+    if (event.target.closest("video")) return;
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      go(index - 1);
+    } else if (event.key === "ArrowRight") {
+      event.preventDefault();
+      go(index + 1);
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      go(0);
+    } else if (event.key === "End") {
+      event.preventDefault();
+      go(total - 1);
+    }
+  };
+  const onPointerDown = (event) => {
+    if (event.pointerType !== "mouse") swipe.current = { x: event.clientX, id: event.pointerId };
+  };
+  const onPointerUp = (event) => {
+    const start = swipe.current;
+    swipe.current = null;
+    if (!start || start.id !== event.pointerId || zoomed) return;
+    const dx = event.clientX - start.x;
+    if (Math.abs(dx) > 48) go(index + (dx < 0 ? 1 : -1));
+  };
+  return /* @__PURE__ */ jsxs(
+    "dialog",
+    {
+      ref,
+      className: cx("uix-lightbox", "uix-lightbox--gallery", className),
+      "aria-label": labels.region,
+      onKeyDown,
+      onClick: (event) => {
+        if (event.target === event.currentTarget) onClose();
+      },
+      children: [
+        current && /* @__PURE__ */ jsxs("figure", { className: "uix-lightbox__figure", children: [
+          /* @__PURE__ */ jsx("div", { className: "uix-lightbox__stage", "data-zoomed": zoomed || void 0, onPointerDown, onPointerUp, children: current.kind === "video" ? /* @__PURE__ */ jsx("video", { className: "uix-lightbox__media", src: current.src, controls: true, "aria-label": current.alt, width: current.width, height: current.height }) : /* @__PURE__ */ jsx("img", { className: "uix-lightbox__media", src: current.src, alt: current.alt, width: current.width, height: current.height }) }),
+          /* @__PURE__ */ jsxs("figcaption", { className: "uix-lightbox__bar", children: [
+            /* @__PURE__ */ jsx("span", { className: "uix-lightbox__counter", "aria-live": "polite", children: fillLabel(labels.counter, { index: index + 1, total }) }),
+            current.caption != null && /* @__PURE__ */ jsx("span", { className: "uix-lightbox__caption", children: current.caption }),
+            current.kind !== "video" && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-lightbox__tool", "aria-pressed": zoomed, onClick: () => setZoomed((z) => !z), children: zoomed ? labels.zoomOut : labels.zoomIn })
+          ] })
+        ] }),
+        total > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("button", { type: "button", className: "uix-lightbox__nav uix-lightbox__nav--prev", "aria-label": labels.previous, disabled: !hasPrev, onClick: () => go(index - 1), children: /* @__PURE__ */ jsx(Chevron, { dir: "left" }) }),
+          /* @__PURE__ */ jsx("button", { type: "button", className: "uix-lightbox__nav uix-lightbox__nav--next", "aria-label": labels.next, disabled: !hasNext, onClick: () => go(index + 1), children: /* @__PURE__ */ jsx(Chevron, { dir: "right" }) })
+        ] }),
+        /* @__PURE__ */ jsx("button", { ref: closeRef, type: "button", className: "uix-lightbox__close", "aria-label": labels.close, onClick: onClose, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" }) }) })
+      ]
+    }
+  );
+}
+export {
+  DEFAULT_LIGHTBOX_LABELS,
+  Lightbox
+};