@tensor_1/react 2.29.0 → 2.30.0

package/README.md

@@ -354,3 +354,26 @@ const icons: Record<EntityType, UixIcon> = { incident: SirenIcon, change: GitBra
 - **Accessibility:** decorative unless `label` is set. Never let an icon carry meaning alone; pair it with text.
 - **Bundle size:** each `<Name>Icon` is tree-shaken; one icon adds well under 3 KB minified. `<Icon name>` and `ICON_GLYPHS` load all of them.
 - **A glyph is missing?** Add its Lucide name to `scripts/icon-names.txt`, run `node scripts/generate-icons.mjs <lucide-react dir>` and release. Do not paste an SVG into a product.
+### SchedulingTimeline
+
+Lanes of bars on a time axis (HAR-1364; TENSOR's change day/week timeline, rollout Gantt rows and licence-renewal
+markers). It pairs with `SchedulingCalendar`: same entry states, the same explicit time zone.
+
+```tsx
+<SchedulingTimeline
+  lanes={[{ id: 'net', label: 'Network', meta: '3 changes' }]}
+  items={changes.map((c) => ({ id: c.id, laneId: c.team, title: c.title, start: c.start, end: c.end, state: c.state }))}
+  range={{ start: weekStart, end: weekEnd }} scale="day" timeZone={tz} now={nowIso}
+  overlays={[{ id: 'q4', kind: 'freeze', label: 'Q4 freeze', start, end }]}
+  markers={[{ id: 'r1', label: 'Renewal: Fortinet', at, laneId: 'net' }]}
+  onSelectItem={(item) => openChange(item.id)}
+  onMoveItem={(id, { start, end }) => reschedule(id, start, end)}
+/>
+```
+
+- **Axis:** `scale` is `hour`, `day` (default), `week` or `month`. Ticks fall on wall-clock boundaries in `timeZone` (DST and half-hour zones included). `tickWidth` sets the width of one unit; the axis scrolls inside the component and the lane column stays put.
+- **Bars:** overlapping bars in a lane stack and are hatched (`data-conflict`), so an overlap reads without colour. A bar cut off by the range shows a dashed edge. `renderItem` replaces the bar text. The full title is in the name and the `title` tooltip.
+- **Moving:** with `onMoveItem`, bars move by drag or Shift+←/→ and their end changes with Alt+Shift+←/→. Moves snap to `step` (15 min on an hour axis, 1 h on a day axis, 1 day otherwise), and each move is announced. `movable: false` pins a bar. The component never moves a bar itself; it reports the new start and end and renders what you pass back.
+- **Keyboard:** one tab stop. ←/→ go to the previous or next bar in a lane, ↑/↓ to the nearest bar in the next lane, Home/End to the lane's ends, and Enter selects.
+- **Windows and markers:** `overlays` (`freeze`, `maintenance`, `blackout`; all lanes, or one with `laneId`), `markers` (a point in time) and `now` are drawn behind the bars and listed for screen readers.
+- Pure helpers are exported for tests and server code: `timelineTicks`, `placeSpan`, `layoutLane`, `shiftSpan`, `snapToStep`, `pixelsToMs`, `defaultTimelineStep`.

package/dist/components/SchedulingTimeline.d.ts

@@ -0,0 +1,109 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { TimelineRange, TimelineScale } from '../scheduling-timeline-model.js';
+import { SchedulingEntryState } from './SchedulingCalendar.js';
+import '../calendar-model.js';
+
+interface SchedulingTimelineLane {
+    id: string;
+    label: ReactNode;
+    /** A quieter second line under the lane name (an owner, a count). */
+    meta?: ReactNode;
+}
+interface SchedulingTimelineItem {
+    id: string;
+    laneId: string;
+    title: string;
+    /** ISO 8601 instants. */
+    start: string;
+    end: string;
+    state?: SchedulingEntryState;
+    meta?: string;
+    /** `false` keeps this bar fixed even when `onMoveItem` is set. */
+    movable?: boolean;
+}
+type SchedulingTimelineOverlayKind = 'freeze' | 'maintenance' | 'blackout';
+interface SchedulingTimelineOverlay {
+    id: string;
+    label: string;
+    start: string;
+    end: string;
+    kind: SchedulingTimelineOverlayKind;
+    /** Only this lane; every lane when unset. */
+    laneId?: string;
+}
+interface SchedulingTimelineMarker {
+    id: string;
+    label: string;
+    /** ISO 8601 instant. */
+    at: string;
+    laneId?: string;
+}
+interface SchedulingTimelineLabels {
+    region: string;
+    lanes: string;
+    /** `{title}`, `{state}`, `{start}`, `{end}`, `{conflict}`. */
+    item: string;
+    conflict: string;
+    moveHint: string;
+    /** Announced after a move. `{title}`, `{start}`, `{end}`. */
+    moved: string;
+    /** Announced after a resize. `{title}`, `{end}`. */
+    resized: string;
+    loading: string;
+    retry: string;
+    empty: string;
+    /** Heading of the screen-reader list of windows and markers. */
+    windows: string;
+    now: string;
+    states: Record<SchedulingEntryState, string>;
+    overlays: Record<SchedulingTimelineOverlayKind, string>;
+}
+declare const DEFAULT_SCHEDULING_TIMELINE_LABELS: SchedulingTimelineLabels;
+interface SchedulingTimelineProps {
+    lanes: SchedulingTimelineLane[];
+    items: SchedulingTimelineItem[];
+    /** The visible window (ISO 8601 instants). */
+    range: TimelineRange;
+    /** Tick unit of the axis. Default `day`. */
+    scale?: TimelineScale;
+    /** IANA zone for tick boundaries and every printed time. */
+    timeZone: string;
+    locale?: string;
+    overlays?: SchedulingTimelineOverlay[];
+    markers?: SchedulingTimelineMarker[];
+    /** Draws a "now" line at this instant (pass the current time; the component keeps no clock). */
+    now?: string;
+    /** First day of a week tick (0 = Sunday). Default 1. */
+    weekStartsOn?: number;
+    /** Width of one tick, as a CSS length. Defaults: hour 3.5rem, day 7rem, week 6rem, month 8rem. */
+    tickWidth?: string;
+    /** Move/resize granularity in ms. Defaults: 15 min (hour), 1 h (day), 1 day (week, month). */
+    step?: number;
+    /** Tick label. Default: `Intl` in `locale` and `timeZone`. */
+    formatTick?: (at: Date, scale: TimelineScale) => string;
+    /** Start/end text in names and announcements. Default: `Intl` medium date + short time in `timeZone`. */
+    formatInstant?: (instant: string) => string;
+    /** Bar content. Default: the title. */
+    renderItem?: (item: SchedulingTimelineItem) => ReactNode;
+    onSelectItem?: (item: SchedulingTimelineItem) => void;
+    /** Makes bars draggable and keyboard-movable. Receives the snapped new start and end. */
+    onMoveItem?: (id: string, next: {
+        start: string;
+        end: string;
+    }) => void;
+    loading?: boolean;
+    error?: string;
+    onRetry?: () => void;
+    labels?: Partial<SchedulingTimelineLabels>;
+    className?: string;
+}
+/**
+ * Lanes of bars on a time axis (HAR-1364; TENSOR C8): change schedules, rollout Gantt rows,
+ * renewal markers. Overlapping bars in a lane stack and are hatched; freeze, maintenance and
+ * blackout windows are bands; with `onMoveItem`, bars move by drag or Shift+arrows and their
+ * end changes with Alt+Shift+arrows, snapped to `step`.
+ */
+declare function SchedulingTimeline({ lanes, items, range, scale, timeZone, locale, overlays, markers, now, weekStartsOn, tickWidth, step: stepProp, formatTick, formatInstant: formatInstantProp, renderItem, onSelectItem, onMoveItem, loading, error, onRetry, labels: labelOverrides, className, }: SchedulingTimelineProps): react.JSX.Element;
+
+export { DEFAULT_SCHEDULING_TIMELINE_LABELS, SchedulingTimeline, type SchedulingTimelineItem, type SchedulingTimelineLabels, type SchedulingTimelineLane, type SchedulingTimelineMarker, type SchedulingTimelineOverlay, type SchedulingTimelineOverlayKind, type SchedulingTimelineProps };

package/dist/components/SchedulingTimeline.js

@@ -0,0 +1,245 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useMemo, useRef, useState } from "react";
+import { cx } from "../cx.js";
+import { fillLabel } from "../fill-label.js";
+import { useUixLabels } from "../labels-context.js";
+import { defaultTimelineStep, layoutLane, pixelsToMs, placeSpan, shiftSpan, timelineTicks } from "../scheduling-timeline-model.js";
+const DEFAULT_SCHEDULING_TIMELINE_LABELS = {
+  region: "Schedule timeline in {timeZone}",
+  lanes: "Lanes",
+  item: "{title}, {state}, {start} to {end}{conflict}",
+  conflict: ", overlaps another entry",
+  moveHint: "Shift and an arrow key moves it; Alt, Shift and an arrow key changes when it ends.",
+  moved: "Moved {title} to {start} \u2013 {end}",
+  resized: "{title} now ends {end}",
+  loading: "Loading schedule\u2026",
+  retry: "Try again",
+  empty: "Nothing is scheduled in this range.",
+  windows: "Windows and markers in this range",
+  now: "Now",
+  states: { scheduled: "Scheduled", conflicted: "Conflicted", "in-progress": "In progress", "blackout-violation": "Blackout violation" },
+  overlays: { freeze: "Change freeze", maintenance: "Maintenance window", blackout: "Blackout" }
+};
+const TICK_WIDTH = { hour: "3.5rem", day: "7rem", week: "6rem", month: "8rem" };
+const TICK_FORMAT = {
+  hour: { hour: "2-digit", minute: "2-digit" },
+  day: { weekday: "short", day: "numeric" },
+  week: { day: "numeric", month: "short" },
+  month: { month: "short", year: "numeric" }
+};
+function SchedulingTimeline({
+  lanes,
+  items,
+  range,
+  scale = "day",
+  timeZone,
+  locale,
+  overlays = [],
+  markers = [],
+  now,
+  weekStartsOn = 1,
+  tickWidth,
+  step: stepProp,
+  formatTick,
+  formatInstant: formatInstantProp,
+  renderItem,
+  onSelectItem,
+  onMoveItem,
+  loading,
+  error,
+  onRetry,
+  labels: labelOverrides,
+  className
+}) {
+  const uixLabels = useUixLabels();
+  const labels = {
+    ...DEFAULT_SCHEDULING_TIMELINE_LABELS,
+    ...uixLabels.schedulingTimeline,
+    ...labelOverrides,
+    states: { ...DEFAULT_SCHEDULING_TIMELINE_LABELS.states, ...uixLabels.schedulingTimeline?.states, ...labelOverrides?.states },
+    overlays: { ...DEFAULT_SCHEDULING_TIMELINE_LABELS.overlays, ...uixLabels.schedulingTimeline?.overlays, ...labelOverrides?.overlays }
+  };
+  const id = useId();
+  const step = stepProp ?? defaultTimelineStep(scale);
+  const ticks = useMemo(() => timelineTicks(range, scale, timeZone, weekStartsOn), [range.start, range.end, scale, timeZone, weekStartsOn]);
+  const laneLayouts = useMemo(
+    () => lanes.map((lane) => ({ lane, placed: layoutLane(items.filter((item) => item.laneId === lane.id), range) })),
+    [lanes, items, range.start, range.end]
+    // eslint-disable-line react-hooks/exhaustive-deps
+  );
+  const ordered = useMemo(() => laneLayouts.flatMap((l) => l.placed.map((p) => p.item.id)), [laneLayouts]);
+  const [activeId, setActiveId] = useState();
+  const focusId = activeId && ordered.includes(activeId) ? activeId : ordered[0];
+  const [drag, setDrag] = useState(null);
+  const [announcement, setAnnouncement] = useState("");
+  const rootRef = useRef(null);
+  const fmtInstant = (instant) => formatInstantProp?.(instant) ?? new Intl.DateTimeFormat(locale, { timeZone, dateStyle: "medium", timeStyle: "short" }).format(new Date(instant));
+  const fmtTick = (at) => formatTick?.(new Date(at), scale) ?? new Intl.DateTimeFormat(locale, { timeZone, ...TICK_FORMAT[scale] }).format(new Date(at));
+  const movable = (item) => !!onMoveItem && item.movable !== false;
+  const focusItem = (itemId) => {
+    if (!itemId) return;
+    setActiveId(itemId);
+    requestAnimationFrame(() => rootRef.current?.querySelector(`[data-timeline-item="${CSS.escape(itemId)}"]`)?.focus());
+  };
+  const commit = (item, delta, mode) => {
+    if (!onMoveItem || delta === 0) return;
+    const next = shiftSpan(item, delta, mode, step);
+    onMoveItem(item.id, next);
+    setAnnouncement(mode === "move" ? fillLabel(labels.moved, { title: item.title, start: fmtInstant(next.start), end: fmtInstant(next.end) }) : fillLabel(labels.resized, { title: item.title, end: fmtInstant(next.end) }));
+  };
+  const onItemKeyDown = (event, laneIndex, placed, index) => {
+    const item = placed[index].item;
+    const horizontal = event.key === "ArrowLeft" ? -1 : event.key === "ArrowRight" ? 1 : 0;
+    if (horizontal && event.shiftKey && movable(item)) {
+      event.preventDefault();
+      commit(item, horizontal * step, event.altKey ? "resize" : "move");
+      return;
+    }
+    if (horizontal) {
+      event.preventDefault();
+      focusItem(placed[index + horizontal]?.item.id);
+      return;
+    }
+    if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      focusItem((event.key === "Home" ? placed[0] : placed[placed.length - 1])?.item.id);
+      return;
+    }
+    const vertical = event.key === "ArrowUp" ? -1 : event.key === "ArrowDown" ? 1 : 0;
+    if (vertical) {
+      event.preventDefault();
+      const start = Date.parse(item.start);
+      for (let l = laneIndex + vertical; l >= 0 && l < laneLayouts.length; l += vertical) {
+        const candidates = laneLayouts[l].placed;
+        if (candidates.length === 0) continue;
+        const nearest = candidates.reduce((best, p) => Math.abs(Date.parse(p.item.start) - start) < Math.abs(Date.parse(best.item.start) - start) ? p : best);
+        focusItem(nearest.item.id);
+        return;
+      }
+    }
+  };
+  const onPointerDown = (event, item) => {
+    if (!movable(item) || event.button !== 0) return;
+    const track = event.currentTarget.closest(".uix-scheduling-timeline__track");
+    if (!track) return;
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+    setDrag({ id: item.id, x: event.clientX, width: track.getBoundingClientRect().width, delta: 0, moved: false });
+  };
+  const onPointerMove = (event) => {
+    if (!drag) return;
+    const dx = event.clientX - drag.x;
+    const delta = pixelsToMs(dx, drag.width, range, step);
+    if (delta !== drag.delta || !drag.moved && Math.abs(dx) > 3) setDrag({ ...drag, delta, moved: drag.moved || Math.abs(dx) > 3 });
+  };
+  const onPointerUp = (item) => {
+    if (!drag || drag.id !== item.id) return;
+    if (drag.moved) commit(item, drag.delta, "move");
+    setDrag(drag.moved ? { ...drag, delta: 0 } : null);
+    if (drag.moved) window.setTimeout(() => setDrag(null), 0);
+  };
+  const nowPos = now ? placeSpan({ start: now, end: now }, range) : null;
+  const overlaysFor = (laneId) => overlays.filter((o) => !o.laneId || o.laneId === laneId);
+  const markersFor = (laneId) => markers.filter((m) => !m.laneId || m.laneId === laneId);
+  const trackStyle = { minWidth: `calc(${Math.max(ticks.length - 1, 1)} * ${tickWidth ?? TICK_WIDTH[scale]})` };
+  const band = (o, showLabel) => {
+    const pos = placeSpan(o, range);
+    return pos && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__overlay", "data-kind": o.kind, style: { left: `${pos.left}%`, width: `${pos.width}%` }, children: showLabel && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__overlay-label", children: o.label }) }, o.id);
+  };
+  return /* @__PURE__ */ jsxs("section", { ref: rootRef, className: cx("uix-scheduling-timeline", className), "aria-label": fillLabel(labels.region, { timeZone }), children: [
+    loading ? /* @__PURE__ */ jsx("div", { className: "uix-scheduling-timeline__state", role: "status", children: labels.loading }) : error ? /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-timeline__state", role: "alert", children: [
+      /* @__PURE__ */ jsx("p", { children: error }),
+      onRetry && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: onRetry, children: labels.retry })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      (overlays.length > 0 || markers.length > 0) && /* @__PURE__ */ jsxs("div", { className: "uix-visually-hidden", children: [
+        /* @__PURE__ */ jsx("p", { id: `${id}-windows`, children: labels.windows }),
+        /* @__PURE__ */ jsxs("ul", { "aria-labelledby": `${id}-windows`, children: [
+          overlays.map((o) => /* @__PURE__ */ jsxs("li", { children: [
+            labels.overlays[o.kind],
+            ": ",
+            o.label,
+            ", ",
+            fmtInstant(o.start),
+            " \u2013 ",
+            fmtInstant(o.end)
+          ] }, o.id)),
+          markers.map((m) => /* @__PURE__ */ jsxs("li", { children: [
+            m.label,
+            ", ",
+            fmtInstant(m.at)
+          ] }, m.id))
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "uix-scheduling-timeline__scroller", children: /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-timeline__grid", children: [
+        /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-timeline__row uix-scheduling-timeline__row--axis", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("div", { className: "uix-scheduling-timeline__lane-label", children: labels.lanes }),
+          /* @__PURE__ */ jsx("div", { className: "uix-scheduling-timeline__track uix-scheduling-timeline__axis", style: trackStyle, children: ticks.map((tick) => /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__tick", "data-major": tick.major || void 0, style: { left: `${tick.offset}%` }, children: tick.offset < 100 && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__tick-label", children: fmtTick(tick.at) }) }, tick.at)) })
+        ] }),
+        laneLayouts.map(({ lane, placed }, laneIndex) => {
+          const rows = placed.reduce((max, p) => Math.max(max, p.row + 1), 1);
+          const laneLabelId = `${id}-lane-${laneIndex}`;
+          return /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-timeline__row", style: { "--uix-timeline-rows": rows }, children: [
+            /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-timeline__lane-label", id: laneLabelId, children: [
+              /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__lane-name", children: lane.label }),
+              lane.meta != null && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__lane-meta", children: lane.meta })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-timeline__track", style: trackStyle, children: [
+              ticks.map((tick) => /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__gridline", "data-major": tick.major || void 0, style: { left: `${tick.offset}%` }, "aria-hidden": "true" }, tick.at)),
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: overlaysFor(lane.id).map((o) => band(o, laneIndex === 0 || !!o.laneId)) }),
+              nowPos && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__now", style: { left: `${nowPos.left}%` }, "aria-hidden": "true", children: laneIndex === 0 && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__now-label", children: labels.now }) }),
+              markersFor(lane.id).map((m) => {
+                const pos = placeSpan({ start: m.at, end: m.at }, range);
+                return pos && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__marker", style: { left: `${pos.left}%` }, title: m.label, "aria-hidden": "true" }, m.id);
+              }),
+              /* @__PURE__ */ jsx("ul", { className: "uix-scheduling-timeline__items", "aria-labelledby": laneLabelId, children: placed.map((p, index) => {
+                const item = p.item;
+                const state = item.state ?? "scheduled";
+                const dragging = drag?.id === item.id && drag.moved;
+                const shown = dragging && drag ? placeSpan(shiftSpan(item, drag.delta, "move", step), range) ?? p : p;
+                return /* @__PURE__ */ jsx("li", { className: "uix-scheduling-timeline__slot", style: { left: `${shown.left}%`, width: `${shown.width}%`, "--uix-timeline-row": p.row }, children: /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: "uix-scheduling-timeline__item",
+                    "data-timeline-item": item.id,
+                    title: item.title,
+                    "data-state": state,
+                    "data-conflict": p.conflict || void 0,
+                    "data-clipped-start": p.clippedStart || void 0,
+                    "data-clipped-end": p.clippedEnd || void 0,
+                    "data-movable": movable(item) || void 0,
+                    "data-dragging": dragging || void 0,
+                    tabIndex: focusId === item.id ? 0 : -1,
+                    "aria-label": fillLabel(labels.item, { title: item.title, state: labels.states[state], start: fmtInstant(item.start), end: fmtInstant(item.end), conflict: p.conflict ? labels.conflict : "" }),
+                    "aria-describedby": movable(item) ? `${id}-hint` : void 0,
+                    onFocus: () => setActiveId(item.id),
+                    onKeyDown: (event) => onItemKeyDown(event, laneIndex, placed, index),
+                    onPointerDown: (event) => onPointerDown(event, item),
+                    onPointerMove,
+                    onPointerUp: () => onPointerUp(item),
+                    onPointerCancel: () => setDrag(null),
+                    onClick: () => {
+                      if (drag?.moved) return;
+                      onSelectItem?.(item);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__item-title", children: renderItem?.(item) ?? item.title }),
+                      item.meta && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__item-meta", children: item.meta })
+                    ]
+                  }
+                ) }, item.id);
+              }) })
+            ] })
+          ] }, lane.id);
+        })
+      ] }) }),
+      ordered.length === 0 && /* @__PURE__ */ jsx("p", { className: "uix-scheduling-timeline__empty", children: labels.empty })
+    ] }),
+    onMoveItem && /* @__PURE__ */ jsx("span", { id: `${id}-hint`, className: "uix-visually-hidden", children: labels.moveHint }),
+    /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", role: "status", "aria-live": "polite", children: announcement })
+  ] });
+}
+export {
+  DEFAULT_SCHEDULING_TIMELINE_LABELS,
+  SchedulingTimeline
+};