@tensor_1/react 2.31.0 → 2.33.0

package/dist/components/SchedulingTimeGrid.js

@@ -0,0 +1,521 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { zonedDateKey, zonedHourSlots, zonedTimeOfDay } from "../calendar-model.js";
+import { layoutDaySpans, layoutTimeGridDay, placesInTopLane, proposeMove } from "../scheduling-calendar-model.js";
+import { fillLabel } from "../fill-label.js";
+const HOUR_MS = 36e5;
+const MINUTES_PER_HOUR = 60;
+const LINES_PER_HOUR = 3;
+const DRAG_THRESHOLD = 4;
+const DEFAULT_STEP = 15;
+const vars = (values) => values;
+const linesFor = (segment) => Math.max(0, Math.floor(segment.lengthHours * LINES_PER_HOUR - 0.25));
+const slotSignature = (slots) => slots.map((slot) => `${slot.label}${slot.offsetLabel ?? ""}`).join(" ");
+function uniqueById(items) {
+  const seen = /* @__PURE__ */ new Set();
+  return items.filter((item) => seen.has(item.id) ? false : (seen.add(item.id), true));
+}
+const GridItem = memo(function GridItem2({ entry, segment, column, alone, name, status, movable, hintId, timeZone, continuesFrom, markers, renderEntry, renderMarker, handlers }) {
+  const lines = linesFor(segment);
+  const continuation = segment.part === "continuation";
+  const style = vars({
+    "--uix-scheduling-calendar-offset": segment.offsetHours,
+    "--uix-scheduling-calendar-length": segment.lengthHours,
+    "--uix-scheduling-calendar-lane": segment.lane,
+    "--uix-scheduling-calendar-lanes": segment.laneCount
+  });
+  const text = renderEntry?.(entry, { availableLines: lines }) ?? (lines > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    !continuation && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__time", children: zonedTimeOfDay(entry.start, timeZone) }),
+      " "
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__title", children: entry.title })
+  ] }) : null);
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    continuation && lines > 0 && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__tg-from", children: continuesFrom }),
+    (!continuation || alone) && text != null && text !== false && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__entry-text", children: text }),
+    markers.length > 0 && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__markers", children: markers.map((marker) => /* @__PURE__ */ jsx("span", { children: renderMarker(marker) }, marker.id)) })
+  ] });
+  const shared = {
+    className: "uix-scheduling-calendar__entry uix-scheduling-calendar__tg-item",
+    "data-band": entry.band ?? "none",
+    "data-status": status,
+    "data-state": entry.state,
+    "data-part": segment.part,
+    "data-lines": Math.min(lines, 3),
+    "data-movable": movable || void 0,
+    style,
+    onClick: () => handlers.click(entry),
+    onPointerDown: movable ? (event) => handlers.pointerDown(event, entry, column, false) : void 0
+  };
+  if (continuation && !alone) return /* @__PURE__ */ jsx("div", { ...shared, "data-continuation-of": entry.id, "aria-hidden": "true", children: body });
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      ...shared,
+      "data-item-id": entry.id,
+      "aria-label": name,
+      "aria-describedby": movable ? hintId : void 0,
+      onKeyDown: movable ? (event) => handlers.keyDown(event, entry) : void 0,
+      onBlur: movable ? () => handlers.blur(entry) : void 0,
+      children: body
+    }
+  );
+}, (previous, next) => previous.entry === next.entry && previous.column === next.column && previous.alone === next.alone && previous.name === next.name && previous.status === next.status && previous.movable === next.movable && previous.hintId === next.hintId && previous.timeZone === next.timeZone && previous.continuesFrom === next.continuesFrom && previous.renderEntry === next.renderEntry && previous.segment.part === next.segment.part && previous.segment.offsetHours === next.segment.offsetHours && previous.segment.lengthHours === next.segment.lengthHours && previous.segment.lane === next.segment.lane && previous.segment.laneCount === next.segment.laneCount);
+function SchedulingTimeGrid({
+  view,
+  days,
+  timeZone,
+  entries: givenEntries,
+  overlays: givenOverlays,
+  dayInfo,
+  labels,
+  gridLabel,
+  dateText,
+  formatInstant,
+  entryName,
+  entryStatus,
+  entryMarkers,
+  overlayName,
+  renderEntry,
+  renderMarker,
+  onSelectEntry,
+  onSelectOverlay,
+  onSelectDate,
+  onShowMore,
+  now,
+  canMove,
+  step: givenStep,
+  onProposeMove,
+  topLaneCrossMidnightMinutes,
+  topLaneCap,
+  windowLaneCap,
+  maxLanes,
+  emptyNote,
+  nothingToShow
+}) {
+  const rootRef = useRef(null);
+  const hintId = useId();
+  const [widthCap, setWidthCap] = useState(Infinity);
+  const [ghost, setGhost] = useState(null);
+  const [announcement, setAnnouncement] = useState("");
+  const moving = canMove && onProposeMove !== void 0;
+  const step = Number.isFinite(givenStep) && givenStep > 0 ? givenStep : DEFAULT_STEP;
+  const laneOptions = useMemo(() => ({ crossMidnightMinutes: topLaneCrossMidnightMinutes }), [topLaneCrossMidnightMinutes]);
+  const entries = useMemo(() => uniqueById(givenEntries), [givenEntries]);
+  const overlays = useMemo(() => uniqueById(givenOverlays), [givenOverlays]);
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root || typeof ResizeObserver === "undefined") return void 0;
+    const column = root.querySelector("[data-tg-column]");
+    const probe = root.querySelector(".uix-scheduling-calendar__tg-probe");
+    if (!column || !probe) return void 0;
+    let frame = 0;
+    const measure = () => {
+      frame = 0;
+      if (!column.isConnected) return;
+      const lane = probe.getBoundingClientRect().width;
+      const width = column.getBoundingClientRect().width;
+      setWidthCap(lane > 0 && width > 0 ? Math.max(1, Math.floor(width / lane)) : Infinity);
+    };
+    const observer = new ResizeObserver(() => {
+      if (!frame) frame = requestAnimationFrame(measure);
+    });
+    observer.observe(column);
+    measure();
+    return () => {
+      observer.disconnect();
+      if (frame) cancelAnimationFrame(frame);
+    };
+  }, [days]);
+  const lanes = Math.max(1, Math.min(maxLanes, widthCap));
+  const entryById = useMemo(() => new Map(entries.map((entry) => [entry.id, entry])), [entries]);
+  const overlayById = useMemo(() => new Map(overlays.map((overlay) => [overlay.id, overlay])), [overlays]);
+  const columns = useMemo(() => days.map((date) => layoutTimeGridDay(entries, date, timeZone, { ...laneOptions, maxLanes: lanes })), [days, entries, timeZone, laneOptions, lanes]);
+  const slots = useMemo(() => days.map((date) => zonedHourSlots(date, timeZone)), [days, timeZone]);
+  const top = useMemo(() => layoutDaySpans(entries.filter((entry) => placesInTopLane(entry, timeZone, laneOptions)), days, { timeZone, laneCap: Math.max(0, topLaneCap) }), [entries, days, timeZone, laneOptions, topLaneCap]);
+  const drawable = useMemo(() => overlays.filter((overlay) => new Date(overlay.end).getTime() >= new Date(overlay.start).getTime()), [overlays]);
+  const strip = useMemo(() => layoutDaySpans(drawable, days, { timeZone, laneCap: Math.max(0, windowLaneCap) }), [drawable, days, timeZone, windowLaneCap]);
+  const shades = useMemo(() => layoutDaySpans(drawable.filter((overlay) => overlay.global), days, { timeZone }).placed, [drawable, days, timeZone]);
+  const lanesIn = (placed) => placed.reduce((max, span) => Math.max(max, span.lane + 1), 0);
+  const maxHours = Math.max(...columns.map((column) => column.dayHours));
+  const gutterIndex = useMemo(() => {
+    const signatures = slots.map(slotSignature);
+    const count = /* @__PURE__ */ new Map();
+    for (const signature of signatures) count.set(signature, (count.get(signature) ?? 0) + 1);
+    let best = 0;
+    signatures.forEach((signature, index) => {
+      if ((count.get(signature) ?? 0) > (count.get(signatures[best]) ?? 0)) best = index;
+    });
+    return best;
+  }, [slots]);
+  const gutterSignature = slotSignature(slots[gutterIndex]);
+  const hourLabels = (index, inline) => slots[index].map((slot) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: inline ? "uix-scheduling-calendar__tg-hour uix-scheduling-calendar__tg-hour--inline" : "uix-scheduling-calendar__tg-hour",
+      "data-hour": slot.label,
+      style: vars({ "--uix-scheduling-calendar-offset": (slot.instant.getTime() - columns[index].dayStart) / HOUR_MS }),
+      children: [
+        slot.label,
+        slot.offsetLabel && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__tg-offset", children: slot.offsetLabel })
+      ]
+    },
+    slot.instant.getTime()
+  ));
+  const movable = (entry) => moving && entry.movable !== false;
+  const live = useRef({ ghost, entryById, timeZone, step, onProposeMove, onSelectEntry, labels, formatInstant, days, columns, movable });
+  live.current = { ghost, entryById, timeZone, step, onProposeMove, onSelectEntry, labels, formatInstant, days, columns, movable };
+  const dragRef = useRef(null);
+  const suppressClick = useRef(false);
+  const refocus = useRef(null);
+  useEffect(() => {
+    if (ghost && !entryById.has(ghost.id)) setGhost(null);
+  }, [ghost, entryById]);
+  useEffect(() => {
+    const id = refocus.current;
+    const root = rootRef.current;
+    if (!id || !root) return;
+    const active = document.activeElement;
+    const lost = !active || active === document.body;
+    if (!lost) {
+      if (active.getAttribute("data-item-id") !== id) refocus.current = null;
+      return;
+    }
+    for (const candidate of Array.from(root.querySelectorAll("[data-item-id]"))) {
+      if (candidate.getAttribute("data-item-id") === id) {
+        candidate.focus();
+        break;
+      }
+    }
+  });
+  const send = useCallback((id, delta) => {
+    const state = live.current;
+    const entry = state.entryById.get(id);
+    if (!entry || !state.onProposeMove || !state.movable(entry) || delta.days === 0 && delta.minutes === 0) {
+      setGhost(null);
+      return;
+    }
+    const proposal = proposeMove(entry, delta, state.timeZone);
+    const result = state.onProposeMove(id, proposal);
+    if (result && typeof result.then === "function") {
+      setGhost({ id, delta, source: "sent", proposal });
+      const clear = () => setGhost((current) => current && current.source === "sent" && current.proposal === proposal ? null : current);
+      result.then(clear, clear);
+    } else setGhost(null);
+  }, []);
+  const handlers = useMemo(() => ({
+    click: (entry) => {
+      live.current.onSelectEntry?.(entry);
+    },
+    keyDown: (event, entry) => {
+      const state = live.current;
+      const pending = state.ghost && state.ghost.id === entry.id && state.ghost.source === "keys" ? state.ghost.delta : null;
+      if (event.key === "Enter" && pending) {
+        event.preventDefault();
+        refocus.current = entry.id;
+        send(entry.id, pending);
+        return;
+      }
+      if (event.key === "Escape" && pending) {
+        event.preventDefault();
+        event.stopPropagation();
+        setGhost(null);
+        setAnnouncement(state.labels.moveCancelled);
+        return;
+      }
+      if (!event.shiftKey) return;
+      const base = pending ?? { days: 0, minutes: 0 };
+      const next = event.key === "ArrowUp" ? { ...base, minutes: base.minutes - state.step } : event.key === "ArrowDown" ? { ...base, minutes: base.minutes + state.step } : event.key === "ArrowLeft" ? { ...base, days: base.days - 1 } : event.key === "ArrowRight" ? { ...base, days: base.days + 1 } : null;
+      if (!next) return;
+      event.preventDefault();
+      if (next.days === 0 && next.minutes === 0) {
+        setGhost(null);
+        setAnnouncement(state.labels.moveCancelled);
+        return;
+      }
+      const proposal = proposeMove(entry, next, state.timeZone);
+      setGhost({ id: entry.id, delta: next, source: "keys", proposal });
+      const proposed = fillLabel(state.labels.moveProposed, { start: state.formatInstant(proposal.start), end: state.formatInstant(proposal.end) });
+      setAnnouncement(proposal.adjusted ? `${fillLabel(state.labels.gapForward, { time: zonedTimeOfDay(proposal.start, state.timeZone) })} ${proposed}` : proposed);
+    },
+    blur: (entry) => {
+      refocus.current = null;
+      setGhost((current) => current && current.id === entry.id && current.source === "keys" ? null : current);
+    },
+    pointerDown: (event, entry, column, top2) => {
+      if (event.button !== 0 || dragRef.current) return;
+      const root = rootRef.current;
+      if (!root) return;
+      const elements = Array.from(root.querySelectorAll("[data-tg-column]"));
+      const rects = elements.map((element) => element.getBoundingClientRect());
+      const under = rects.findIndex((rect) => event.clientX >= rect.left && event.clientX < rect.right);
+      const from = under === -1 ? column : under;
+      const hours = live.current.columns[from]?.dayHours ?? 1;
+      const finish = (commit) => {
+        const drag = dragRef.current;
+        if (!drag) return;
+        drag.stop();
+        dragRef.current = null;
+        if (!drag.moved) return;
+        suppressClick.current = true;
+        setTimeout(() => {
+          suppressClick.current = false;
+        }, 0);
+        if (commit && !drag.dropped) send(drag.id, drag.delta);
+        else setGhost(null);
+      };
+      const onMove = (move) => {
+        const drag = dragRef.current;
+        if (!drag || move.pointerId !== drag.pointerId) return;
+        if (move.buttons === 0 && move.pointerType === "mouse") {
+          finish(false);
+          return;
+        }
+        if (drag.dropped) return;
+        const dx = move.clientX - drag.x;
+        const dy = move.clientY - drag.y;
+        if (!drag.moved && Math.hypot(dx, dy) < DRAG_THRESHOLD) return;
+        drag.moved = true;
+        const target = drag.rects.findIndex((rect) => move.clientX >= rect.left && move.clientX < rect.right);
+        const stepMinutes = live.current.step;
+        const delta = {
+          days: target === -1 ? drag.delta.days : target - drag.column,
+          minutes: drag.top || drag.hourPx <= 0 ? 0 : Math.round(dy / drag.hourPx * MINUTES_PER_HOUR / stepMinutes) * stepMinutes
+        };
+        if (delta.days === drag.delta.days && delta.minutes === drag.delta.minutes) return;
+        drag.delta = delta;
+        const dragged = live.current.entryById.get(drag.id);
+        if (dragged) setGhost({ id: drag.id, delta, source: "pointer", proposal: proposeMove(dragged, delta, live.current.timeZone) });
+      };
+      const onUp = (up) => {
+        if (up.pointerId === dragRef.current?.pointerId) finish(true);
+      };
+      const onCancel = (cancel) => {
+        if (cancel.pointerId === dragRef.current?.pointerId) finish(false);
+      };
+      const onKey = (key) => {
+        const drag = dragRef.current;
+        if (key.key !== "Escape" || !drag?.moved || drag.dropped) return;
+        key.preventDefault();
+        key.stopPropagation();
+        drag.dropped = true;
+        setGhost(null);
+      };
+      window.addEventListener("pointermove", onMove);
+      window.addEventListener("pointerup", onUp);
+      window.addEventListener("pointercancel", onCancel);
+      window.addEventListener("keydown", onKey, true);
+      dragRef.current = {
+        id: entry.id,
+        pointerId: event.pointerId,
+        x: event.clientX,
+        y: event.clientY,
+        column: from,
+        top: top2,
+        moved: false,
+        dropped: false,
+        rects,
+        hourPx: (rects[from]?.height ?? 0) / hours,
+        delta: { days: 0, minutes: 0 },
+        stop: () => {
+          window.removeEventListener("pointermove", onMove);
+          window.removeEventListener("pointerup", onUp);
+          window.removeEventListener("pointercancel", onCancel);
+          window.removeEventListener("keydown", onKey, true);
+        }
+      };
+    }
+  }), [send]);
+  useEffect(() => () => {
+    dragRef.current?.stop();
+    dragRef.current = null;
+  }, []);
+  const gridColumns = (span) => `${span.startCol + 2} / ${span.endCol + 3}`;
+  const nowAt = now === void 0 ? null : new Date(now).getTime();
+  const nowColumn = nowAt === null || Number.isNaN(nowAt) ? -1 : days.indexOf(zonedDateKey(new Date(nowAt), timeZone));
+  const topHiddenOn = (date) => top.hidden.filter((id) => {
+    const entry = entryById.get(id);
+    return entry ? layoutDaySpans([entry], [date], { timeZone }).placed.length > 0 : false;
+  });
+  const windowLanes = lanesIn(strip.placed);
+  const topLanes = lanesIn(top.placed);
+  const moreWindows = strip.hidden.length;
+  const firstHiddenWindowDay = strip.firstHiddenDay ?? days[0];
+  const ghostEntry = ghost ? entryById.get(ghost.id) : void 0;
+  const ghostTop = ghostEntry ? placesInTopLane(ghostEntry, timeZone, laneOptions) : false;
+  const ghostParts = ghost && ghostEntry && !ghostTop ? days.map((date) => layoutTimeGridDay([{ id: "ghost", start: ghost.proposal.start, end: ghost.proposal.end }], date, timeZone, { crossMidnightMinutes: Infinity }).segments) : null;
+  const ghostSpan = ghost && ghostEntry && ghostTop ? layoutDaySpans([{ id: "ghost", start: ghost.proposal.start, end: ghost.proposal.end }], days, { timeZone }).placed[0] : void 0;
+  const ghostLane = ghost ? top.placed.find((span) => span.id === ghost.id)?.lane ?? 0 : 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: "uix-scheduling-calendar__timegrid",
+      "data-view": view,
+      role: "group",
+      "aria-label": gridLabel,
+      style: vars({ "--uix-scheduling-calendar-days": days.length, "--uix-scheduling-calendar-hours": maxHours }),
+      onClickCapture: (event) => {
+        if (suppressClick.current) {
+          suppressClick.current = false;
+          event.preventDefault();
+          event.stopPropagation();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__tg-head", children: [
+          /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__tg-zone", children: fillLabel(labels.timeZone, { timeZone }) }),
+          days.map((date, index) => {
+            const info = dayInfo?.[date];
+            const hiddenIds = dayInfo ? [] : [...columns[index].hidden, ...topHiddenOn(date)];
+            const more = info ? info.overflowCount : hiddenIds.length;
+            const moreText = fillLabel(labels.moreSpans, { count: more });
+            const moreName = fillLabel(labels.moreEntriesLabel, { count: more, date: dateText(date, "day") });
+            const headName = info ? info.label ?? `${dateText(date, "day")}, ${fillLabel(labels.dayCount, { count: info.count })}` : dateText(date, "day");
+            return /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__tg-dayhead", role: "group", "aria-label": headName, "data-date": date, children: [
+              /* @__PURE__ */ jsx("button", { type: "button", className: "uix-scheduling-calendar__date", "data-calendar-date": date, "aria-label": dateText(date, "day"), onClick: onSelectDate ? () => onSelectDate(date) : void 0, children: dateText(date, "column") }),
+              info && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__count", "aria-hidden": "true", children: info.count }),
+              info?.markers && info.markers.length > 0 && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__markers", children: info.markers.map((marker) => /* @__PURE__ */ jsx("span", { children: renderMarker(marker, true) }, marker.id)) }),
+              more > 0 && (onShowMore ? /* @__PURE__ */ jsx("button", { type: "button", className: "uix-scheduling-calendar__more", "aria-label": moreName, onClick: () => onShowMore(date, hiddenIds.map((id) => entryById.get(id)).filter(Boolean)), children: moreText }) : /* @__PURE__ */ jsxs("span", { className: "uix-scheduling-calendar__more", children: [
+                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: moreText }),
+                /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: moreName })
+              ] }))
+            ] }, date);
+          })
+        ] }),
+        (windowLanes > 0 || moreWindows > 0) && /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__tg-strip", role: "group", "aria-label": labels.windows, style: vars({ "--uix-scheduling-calendar-lanes": Math.max(windowLanes, 1) }), children: [
+          strip.placed.map((placed) => {
+            const overlay = overlayById.get(placed.id);
+            if (!overlay) return null;
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "uix-scheduling-calendar__window",
+                "data-overlay-id": overlay.id,
+                "data-pattern": overlay.pattern ?? "solid",
+                "data-global": overlay.global || void 0,
+                "data-kind": overlay.kind,
+                "data-continues-before": placed.continuesBefore || void 0,
+                "data-continues-after": placed.continuesAfter || void 0,
+                style: { gridColumn: gridColumns(placed), ...vars({ "--uix-scheduling-calendar-lane": placed.lane }) },
+                onClick: () => onSelectOverlay?.(overlay),
+                "aria-label": overlayName(overlay),
+                children: /* @__PURE__ */ jsxs("span", { className: "uix-scheduling-calendar__window-text", children: [
+                  overlay.kindLabel && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__window-kind", children: overlay.kindLabel }),
+                  /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__window-name", children: overlay.label }),
+                  overlay.scopeLabel && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__window-scope", children: overlay.scopeLabel })
+                ] })
+              },
+              placed.id
+            );
+          }),
+          moreWindows > 0 && (onShowMore ? /* @__PURE__ */ jsx("button", { type: "button", className: "uix-scheduling-calendar__rowmore", "aria-label": fillLabel(labels.moreWindowsLabel, { count: moreWindows, date: dateText(firstHiddenWindowDay, "day") }), onClick: () => onShowMore(firstHiddenWindowDay, []), children: fillLabel(labels.moreWindows, { count: moreWindows }) }) : /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__rowmore", children: fillLabel(labels.moreWindows, { count: moreWindows }) }))
+        ] }),
+        (topLanes > 0 || ghostSpan) && /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__tg-strip uix-scheduling-calendar__tg-top", role: "group", "aria-label": labels.topLane, style: vars({ "--uix-scheduling-calendar-lanes": Math.max(topLanes, 1) }), children: [
+          top.placed.map((placed) => {
+            const entry = entryById.get(placed.id);
+            if (!entry) return null;
+            const canDrag = movable(entry);
+            const markers = entryMarkers(entry);
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "uix-scheduling-calendar__entry uix-scheduling-calendar__tg-span",
+                "data-item-id": entry.id,
+                "data-band": entry.band ?? "none",
+                "data-status": entryStatus(entry),
+                "data-state": entry.state,
+                "data-movable": canDrag || void 0,
+                "data-continues-before": placed.continuesBefore || void 0,
+                "data-continues-after": placed.continuesAfter || void 0,
+                style: { gridColumn: gridColumns(placed), ...vars({ "--uix-scheduling-calendar-lane": placed.lane }) },
+                "aria-label": entryName(entry),
+                "aria-describedby": canDrag ? hintId : void 0,
+                onClick: () => handlers.click(entry),
+                onKeyDown: canDrag ? (event) => handlers.keyDown(event, entry) : void 0,
+                onBlur: canDrag ? () => handlers.blur(entry) : void 0,
+                onPointerDown: canDrag ? (event) => handlers.pointerDown(event, entry, placed.startCol, true) : void 0,
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__entry-text", children: renderEntry?.(entry, { availableLines: 1 }) ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    !placed.continuesBefore && !entry.allDay && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__time", children: zonedTimeOfDay(entry.start, timeZone) }),
+                      " "
+                    ] }),
+                    /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__title", children: entry.title })
+                  ] }) }),
+                  markers.length > 0 && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__markers", children: markers.map((marker) => /* @__PURE__ */ jsx("span", { children: renderMarker(marker) }, marker.id)) })
+                ]
+              },
+              placed.id
+            );
+          }),
+          ghostSpan && /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__tg-ghost", "aria-hidden": "true", "data-sent": ghost?.source === "sent" || void 0, style: { gridColumn: gridColumns(ghostSpan), ...vars({ "--uix-scheduling-calendar-lane": ghostLane }) } })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__tg-body", children: [
+          /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__tg-gutter", "aria-hidden": "true", children: hourLabels(gutterIndex, false) }),
+          shades.map((placed) => {
+            const overlay = overlayById.get(placed.id);
+            const first = columns[placed.startCol];
+            const last = columns[placed.endCol];
+            const from = placed.continuesBefore ? 0 : Math.max(0, (new Date(overlay.start).getTime() - first.dayStart) / HOUR_MS) / maxHours;
+            const to = (placed.continuesAfter ? last.dayHours : Math.min(last.dayHours, (new Date(overlay.end).getTime() - last.dayStart) / HOUR_MS)) / maxHours;
+            const width = 100 / (placed.endCol - placed.startCol + 1);
+            const percent = (value) => `${Math.round(value * 1e4) / 100}%`;
+            const clipPath = placed.startCol === placed.endCol ? `polygon(0 ${percent(from)}, 100% ${percent(from)}, 100% ${percent(to)}, 0 ${percent(to)})` : `polygon(0 ${percent(from)}, ${width}% ${percent(from)}, ${width}% 0, 100% 0, 100% ${percent(to)}, ${100 - width}% ${percent(to)}, ${100 - width}% 100%, 0 100%)`;
+            return /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__tg-shade", "aria-hidden": "true", "data-pattern": overlay.pattern ?? "solid", style: { gridColumn: gridColumns(placed), clipPath } }, `shade-${placed.id}`);
+          }),
+          columns.map((column, index) => /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__tg-column", "data-tg-column": column.date, style: { gridColumn: `${index + 2}`, ...vars({ "--uix-scheduling-calendar-hours": column.dayHours }) }, children: [
+            slotSignature(slots[index]) !== gutterSignature && hourLabels(index, true),
+            column.segments.map((segment) => {
+              const entry = entryById.get(segment.id);
+              const alone = segment.part === "continuation" && index === 0;
+              return /* @__PURE__ */ jsx(
+                GridItem,
+                {
+                  entry,
+                  segment,
+                  column: index,
+                  alone,
+                  name: entryName(entry),
+                  status: entryStatus(entry),
+                  movable: movable(entry),
+                  hintId,
+                  timeZone,
+                  continuesFrom: fillLabel(labels.continuesFrom, { time: zonedTimeOfDay(entry.start, timeZone) }),
+                  markers: entryMarkers(entry),
+                  renderEntry,
+                  renderMarker,
+                  handlers
+                },
+                `${segment.id}-${segment.part}`
+              );
+            }),
+            ghostParts?.[index].map((segment) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "uix-scheduling-calendar__tg-ghost",
+                "aria-hidden": "true",
+                "data-sent": ghost?.source === "sent" || void 0,
+                style: vars({ "--uix-scheduling-calendar-offset": segment.offsetHours, "--uix-scheduling-calendar-length": segment.lengthHours })
+              },
+              `ghost-${segment.part}`
+            )),
+            index === nowColumn && nowAt !== null && /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__tg-now", "aria-hidden": "true", style: vars({ "--uix-scheduling-calendar-offset": (nowAt - column.dayStart) / HOUR_MS }) })
+          ] }, column.date))
+        ] }),
+        emptyNote != null && emptyNote !== false && nothingToShow && /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__empty", children: emptyNote }),
+        moving && /* @__PURE__ */ jsx("p", { id: hintId, className: "uix-visually-hidden", children: labels.moveHint }),
+        /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__tg-probe", "aria-hidden": "true", children: "00:00 abcdef" }),
+        /* @__PURE__ */ jsx("div", { className: "uix-visually-hidden", "aria-live": "polite", children: announcement })
+      ]
+    }
+  );
+}
+export {
+  SchedulingTimeGrid
+};

package/dist/components/SchedulingTimeline.d.ts

@@ -1,8 +1,9 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 import { TimelineRange, TimelineScale } from '../scheduling-timeline-model.js';
-import { SchedulingEntryState } from './SchedulingCalendar.js';
+import { i as SchedulingEntryState } from '../SchedulingCalendar-C4XVbqZr.js';
 import '../calendar-model.js';
+import '../scheduling-calendar-model.js';
 
 interface SchedulingTimelineLane {
     id: string;

package/dist/components/Segmented.d.ts

@@ -6,6 +6,14 @@ interface SegmentedProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'
     value?: string;
     /** Fires with the option's value when a different option is chosen. */
     onChange?: (value: string) => void;
+    /**
+     * How the choice is exposed to assistive technology (HAR-1604).
+     * `'toggle'` (default): `role="group"` of buttons with `aria-pressed`, for a view or filter
+     * toggle bar. `'radio'`: `role="radiogroup"` of `role="radio"` with `aria-checked`, for a
+     * setting with exactly one value (theme, density, language). Name the group with
+     * `aria-label` or `aria-labelledby` in either mode. The keyboard model is the same in both.
+     */
+    selection?: 'toggle' | 'radio';
     children?: ReactNode;
 }
 /**
@@ -13,16 +21,22 @@ interface SegmentedProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'
  * (density, audience, view mode …) that reads as one pill with a lifted active
  * segment. Selection state is shared with `<SegmentedOption>` via context, so
  * the caller only wires `value` + `onChange` once.
+ *
+ * Keyboard (HAR-1604): the group is ONE tab stop, on the selected option (the first enabled
+ * one when nothing is selected). Arrow Right/Down and Left/Up move to the next / previous
+ * enabled option and select it, wrapping at the ends; Home and End jump; Left/Right swap in
+ * a right-to-left group. Before 2.32.0 every option was its own tab stop.
  */
-declare function Segmented({ value, onChange, children, className, ...props }: SegmentedProps): react.JSX.Element;
+declare function Segmented({ value, onChange, selection, children, className, onKeyDown, ...props }: SegmentedProps): react.JSX.Element;
 interface SegmentedOptionProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onChange'> {
     value: string;
     children?: ReactNode;
 }
 /**
  * One option in a `<Segmented>`. Active state is derived from the parent's
- * `value`; the pressed segment lifts to the surface via
- * `.uix-segmented__option[aria-pressed="true"]`.
+ * `value`; the selected segment lifts to the surface via
+ * `.uix-segmented__option[aria-pressed="true"]` (or `[aria-checked="true"]` in a
+ * `selection="radio"` group).
  */
 declare function SegmentedOption({ value, children, className, onClick, ...props }: SegmentedOptionProps): react.JSX.Element;
 

package/dist/components/Segmented.js

@@ -1,11 +1,61 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { createContext, useContext, useMemo } from "react";
+import { createContext, useContext, useEffect, useMemo, useRef } from "react";
 import { cx } from "../cx.js";
 const SegmentedCtx = createContext({});
-function Segmented({ value, onChange, children, className, ...props }) {
-  const contextValue = useMemo(() => ({ value, onChange }), [value, onChange]);
-  return /* @__PURE__ */ jsx(SegmentedCtx.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { role: "group", className: cx("uix-segmented", className), ...props, children }) });
+const OPTION = ".uix-segmented__option";
+function Segmented({ value, onChange, selection = "toggle", children, className, onKeyDown, ...props }) {
+  const ref = useRef(null);
+  const contextValue = useMemo(() => ({ value, onChange, selection }), [value, onChange, selection]);
+  useEffect(() => {
+    const group = ref.current;
+    if (!group) return;
+    const all = Array.from(group.querySelectorAll(OPTION));
+    const enabled = all.filter((o) => !o.disabled);
+    const current = enabled.find((o) => o.getAttribute("aria-pressed") === "true" || o.getAttribute("aria-checked") === "true") ?? enabled[0];
+    for (const o of all) o.tabIndex = o === current ? 0 : -1;
+  });
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;
+    const group = ref.current;
+    const from = event.target.closest(OPTION);
+    if (!group || !from || !group.contains(from)) return;
+    const options = Array.from(group.querySelectorAll(`${OPTION}:not(:disabled)`));
+    const index = options.indexOf(from);
+    if (index < 0) return;
+    const rtl = getComputedStyle(group).direction === "rtl";
+    let next;
+    switch (event.key) {
+      case "ArrowDown":
+        next = index + 1;
+        break;
+      case "ArrowUp":
+        next = index - 1;
+        break;
+      case "ArrowRight":
+        next = index + (rtl ? -1 : 1);
+        break;
+      case "ArrowLeft":
+        next = index + (rtl ? 1 : -1);
+        break;
+      case "Home":
+        next = 0;
+        break;
+      case "End":
+        next = options.length - 1;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    const target = options[(next + options.length) % options.length];
+    if (!target || target === from) return;
+    target.focus();
+    target.click();
+  };
+  return /* @__PURE__ */ jsx(SegmentedCtx.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { ref, role: selection === "radio" ? "radiogroup" : "group", className: cx("uix-segmented", className), onKeyDown: handleKeyDown, ...props, children }) });
 }
 function SegmentedOption({
   value,
@@ -16,12 +66,16 @@ function SegmentedOption({
 }) {
   const ctx = useContext(SegmentedCtx);
   const selected = ctx.value === value;
+  const radio = ctx.selection === "radio";
   return /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
+      role: radio ? "radio" : void 0,
       className: cx("uix-segmented__option", className),
-      "aria-pressed": selected,
+      "aria-pressed": radio ? void 0 : selected,
+      "aria-checked": radio ? selected : void 0,
+      tabIndex: ctx.selection ? selected ? 0 : -1 : void 0,
       onClick: (e) => {
         ctx.onChange?.(value);
         onClick?.(e);