@12-apps/ui 6.86.1 → 6.87.0

package/src/components/data-display/DayRuler/DayRuler.styles.ts

@@ -0,0 +1,288 @@
+import type { CSSObject, SxProps, Theme } from '@mui/material/styles/index.js';
+
+import { FIELD_BORDER_WIDTH } from '../../../tokens/field-height.core';
+import { rem, sxRem } from '../../../tokens/relative';
+import { softSignal } from '../../../tokens/surfaces';
+import { actualBarColor, blockToneStyles, breakHatch } from '../ScheduleGrid/schedule-tones';
+import type { ScheduleBlockTone } from '../ScheduleGrid/ScheduleGrid.types';
+import { DAY_RULER_METRICS as M } from './DayRuler.metrics';
+
+/** The container narrow rows answer to (container queries, never media queries). */
+/**
+ * `--dr-actions`: the actions column, 220px when any row has actions and
+ * nothing when none does (no empty column at the end of every row).
+ */
+export function rootSx(hasActions: boolean): SxProps<Theme> {
+  return (theme: Theme) => ({
+    containerType: 'inline-size',
+    minWidth: 0,
+    width: '100%',
+    userSelect: 'none',
+    '--dr-actions': hasActions ? rem(theme, M.sideColumn) : '0%',
+  });
+}
+
+/** `@container` below which a row stacks (the coverage and axis rows go full width). Bounds are "from px up". */
+function compact(theme: Theme): string {
+  return `@container (width < ${rem(theme, M.compactBelow)})`;
+}
+
+/** `@container` below which the pane is phone-sized: no coverage row, no axis. Bounds are "from px up". */
+function phone(theme: Theme): string {
+  return `@container (width < ${rem(theme, M.phoneBelow)})`;
+}
+
+/** Name · track · actions, the coverage row and the axis row share these columns on a computer. */
+export const lineSx: SxProps<Theme> = (theme: Theme) => ({
+  display: 'grid',
+  gridTemplateColumns: `${rem(theme, M.sideColumn)} minmax(0, 1fr) var(--dr-actions)`,
+  columnGap: rem(theme, M.gap),
+  alignItems: 'center',
+  // Stacked: across the full width, like the tracks; the label above the counts.
+  [compact(theme)]: {
+    gridTemplateColumns: 'minmax(0, 1fr)',
+    rowGap: rem(theme, M.coverage.gap),
+    '& > span:empty': { display: 'none' },
+  },
+  [phone(theme)]: { display: 'none' },
+});
+
+export const coverageLabelSx: SxProps<Theme> = { fontSize: sxRem(M.meta), color: 'text.secondary' };
+
+export function coverageSx(hours: number): SxProps<Theme> {
+  return (theme: Theme) => ({
+    display: 'grid',
+    gridTemplateColumns: `repeat(${hours}, minmax(0, 1fr))`,
+    gap: rem(theme, M.coverage.gap),
+    height: rem(theme, M.coverage.height),
+  });
+}
+
+export function coverageCellSx(count: number): SxProps<Theme> {
+  return (theme: Theme) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: rem(theme, M.coverage.font),
+    borderRadius: rem(theme, M.coverage.radius),
+    color: theme.palette.text.primary,
+    backgroundColor: count > 0 ? softSignal(theme, 'success') : theme.palette.action.hover,
+    border: count > 0 ? `1px solid ${theme.palette.success.main}` : '1px solid transparent',
+    minWidth: 0,
+    overflow: 'hidden',
+  });
+}
+
+export const axisSx: SxProps<Theme> = (theme: Theme) => ({
+  position: 'relative',
+  height: rem(theme, M.axis.height),
+  fontSize: rem(theme, M.axis.font),
+  color: theme.palette.text.secondary,
+  mt: 0.5,
+  '& > span': { position: 'absolute', transform: 'translateX(-50%)', whiteSpace: 'nowrap' },
+});
+
+export const groupTitleSx: SxProps<Theme> = {
+  fontSize: sxRem(M.groupTitle),
+  letterSpacing: '0.05em',
+  textTransform: 'uppercase',
+  color: 'text.secondary',
+  fontWeight: 500,
+  pt: 1.5,
+  pb: 0.5,
+  m: 0,
+};
+
+/**
+ * One person's row. A computer: name · track · actions on one line. A narrow
+ * ruler (a phone): name and actions on top, the track under them, full width.
+ */
+export const rowSx: SxProps<Theme> = (theme: Theme) => ({
+  display: 'grid',
+  gridTemplateColumns: `${rem(theme, M.sideColumn)} minmax(0, 1fr) var(--dr-actions)`,
+  gridTemplateAreas: '"who track actions"',
+  columnGap: rem(theme, M.gap),
+  alignItems: 'center',
+  py: rem(theme, M.rowPaddingY),
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  [compact(theme)]: {
+    gridTemplateColumns: 'minmax(0, 1fr) auto',
+    gridTemplateAreas: '"who actions" "track track"',
+    rowGap: theme.spacing(1),
+    py: theme.spacing(1.5),
+  },
+});
+
+export const whoSx: SxProps<Theme> = { gridArea: 'who', minWidth: 0 };
+
+export const actionsSx: SxProps<Theme> = {
+  gridArea: 'actions',
+  display: 'flex',
+  gap: 1,
+  alignItems: 'center',
+  justifyContent: 'flex-end',
+  flexWrap: 'wrap',
+  minWidth: 0,
+};
+
+/** A break inside a block: a hatched band across its height, under its text. `span` is in % of the block. */
+export function breakSx(span: Span): SxProps<Theme> {
+  return (theme: Theme) => ({
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: `${span.at}%`,
+    width: `${span.share}%`,
+    background: breakHatch(theme, rem(theme, M.breakStripe.ink), rem(theme, M.breakStripe.ink + M.breakStripe.gap)),
+    pointerEvents: 'none',
+    // Where the band meets an end of the block it takes the block's rounding:
+    // on a phone the block does not clip (its hit area reaches past it).
+    ...(span.at <= 0.01 ? { borderTopLeftRadius: 'inherit', borderBottomLeftRadius: 'inherit' } : {}),
+    ...(span.at + span.share >= 99.99 ? { borderTopRightRadius: 'inherit', borderBottomRightRadius: 'inherit' } : {}),
+  });
+}
+
+/** The hour lines: one every `every` hours of a `hours`-long ruler. */
+function hourLines(theme: Theme, hours: number, every: number): string {
+  const line = theme.palette.divider;
+  const step = `${(100 * every) / hours}%`;
+  const hairline = `${FIELD_BORDER_WIDTH}px`;
+  return `repeating-linear-gradient(to right, ${line} 0, ${line} ${hairline}, transparent ${hairline}, transparent ${step})`;
+}
+
+export function trackSx(opts: { hours: number; tickHours: number; interactive: boolean }): SxProps<Theme> {
+  return (theme: Theme) => ({
+    gridArea: 'track',
+    position: 'relative',
+    height: rem(theme, M.track.height),
+    borderRadius: rem(theme, M.track.radius),
+    backgroundColor: theme.palette.action.hover,
+    backgroundImage: hourLines(theme, opts.hours, 1),
+    cursor: opts.interactive ? 'crosshair' : 'default',
+    touchAction: 'auto',
+    outline: 'none',
+    '&:focus-visible': { boxShadow: `0 0 0 ${rem(theme, M.ring)} ${theme.palette.primary.main}` },
+    [compact(theme)]: {
+      height: rem(theme, M.track.compactHeight),
+      borderRadius: rem(theme, M.track.compactRadius),
+      backgroundImage: hourLines(theme, opts.hours, opts.tickHours),
+    },
+  });
+}
+
+/** Where a bar starts and how long it is, both in % of the track. */
+export interface Span {
+  at: number;
+  share: number;
+}
+
+export function blockSx(tone: ScheduleBlockTone, span: Span, opts: { selected: boolean; movable: boolean }): SxProps<Theme> {
+  return (theme: Theme): CSSObject => ({
+    ...blockToneStyles(theme, tone, true),
+    position: 'absolute',
+    left: `${span.at}%`,
+    width: `${span.share}%`,
+    top: rem(theme, M.block.top),
+    height: rem(theme, M.block.height),
+    boxSizing: 'border-box',
+    borderRadius: rem(theme, M.block.radius),
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: `0 ${rem(theme, M.block.paddingX)}`,
+    margin: 0,
+    font: 'inherit',
+    fontSize: rem(theme, M.block.font),
+    fontWeight: 500,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    cursor: opts.movable ? 'grab' : 'pointer',
+    boxShadow: opts.selected ? `0 0 0 ${rem(theme, M.ring)} ${theme.palette.primary.main}` : 'none',
+    '&:focus-visible': { outline: `${rem(theme, M.ring)} solid ${theme.palette.primary.main}`, outlineOffset: rem(theme, M.ringOffset) },
+    '& [data-dr-text]': { position: 'relative', overflow: 'hidden', textOverflow: 'ellipsis', minWidth: 0 },
+    '& [data-dr-text="short"]': { display: 'none' },
+    [compact(theme)]: {
+      top: rem(theme, M.block.compactTop),
+      height: rem(theme, M.block.compactHeight),
+      // A 40px hit area around the 20px bar, the look unchanged: the text cuts
+      // itself (its spans ellipsize), so the block need not clip.
+      overflow: 'visible',
+      '&::after': {
+        content: '""',
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        top: '50%',
+        height: rem(theme, M.block.hitArea),
+        transform: 'translateY(-50%)',
+      },
+      '&[data-narrow] [data-dr-text="full"]': { display: 'none' },
+      '&[data-narrow] [data-dr-text="short"]': { display: 'inline' },
+    },
+  });
+}
+
+export function handleSx(side: 'l' | 'r'): SxProps<Theme> {
+  return (theme: Theme) => ({
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    [side === 'l' ? 'left' : 'right']: 0,
+    width: rem(theme, M.handle),
+    cursor: 'ew-resize',
+  });
+}
+
+export function actualSx(span: Span): SxProps<Theme> {
+  return (theme: Theme) => ({
+    position: 'absolute',
+    left: `${span.at}%`,
+    width: `${span.share}%`,
+    top: rem(theme, M.actual.top),
+    height: rem(theme, M.actual.height),
+    borderRadius: rem(theme, M.actual.radius),
+    backgroundColor: actualBarColor(theme),
+    pointerEvents: 'none',
+    [compact(theme)]: { top: rem(theme, M.actual.compactTop), height: rem(theme, M.actual.compactHeight) },
+  });
+}
+
+export function actualLabelSx(left: number): SxProps<Theme> {
+  return (theme: Theme) => ({
+    position: 'absolute',
+    left: `calc(${left}% + ${rem(theme, M.actualLabel.offset)})`,
+    top: rem(theme, M.actualLabel.top),
+    fontSize: rem(theme, M.actualLabel.font),
+    color: theme.palette.text.secondary,
+    whiteSpace: 'nowrap',
+    pointerEvents: 'none',
+    [compact(theme)]: { display: 'none' },
+  });
+}
+
+export function nowSx(left: number): SxProps<Theme> {
+  return (theme: Theme) => ({
+    position: 'absolute',
+    left: `${left}%`,
+    top: rem(theme, -M.now.overhang),
+    bottom: rem(theme, -M.now.overhang),
+    width: rem(theme, M.now.width),
+    backgroundColor: theme.palette.primary.main,
+    pointerEvents: 'none',
+  });
+}
+
+export const skeletonTrackSx: SxProps<Theme> = (theme: Theme) => ({
+  gridArea: 'track',
+  height: rem(theme, M.track.height),
+  borderRadius: rem(theme, M.track.radius),
+  backgroundColor: theme.palette.action.hover,
+});
+
+export const skeletonNameSx: SxProps<Theme> = (theme: Theme) => ({
+  gridArea: 'who',
+  height: rem(theme, M.name),
+  width: '60%',
+  borderRadius: rem(theme, M.skeletonNameRadius),
+  backgroundColor: theme.palette.action.hover,
+});

package/src/components/data-display/DayRuler/DayRuler.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+import Box from '@mui/material/Box/index.js';
+import type React from 'react';
+
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
+import { resolveLabels } from '../../../utils/resolve-labels';
+import { SR_ONLY_SX } from '../ScheduleGrid/ScheduleGrid.styles';
+import { useAnnouncer } from '../ScheduleGrid/useAnnouncer';
+import { handleBlockKey, keyCreateSpan, type RulerAbilities, type RulerScale } from './DayRuler.keyboard';
+import { DAY_RULER_METRICS as M } from './DayRuler.metrics';
+import { Axis, Coverage, RulerRow, type RowContext } from './DayRuler.parts';
+import { groupTitleSx, rootSx, rowSx, skeletonNameSx, skeletonTrackSx } from './DayRuler.styles';
+import type { DayRulerProps, DayRulerRow } from './DayRuler.types';
+import { useRulerDrag } from './useRulerDrag';
+
+/** The rows, grouped under a heading each time `row.group` changes. */
+function grouped(rows: readonly DayRulerRow[]): { title?: string; rows: DayRulerRow[] }[] {
+  const out: { title?: string; rows: DayRulerRow[] }[] = [];
+  for (const row of rows) {
+    const last = out[out.length - 1];
+    if (last && last.title === row.group) last.rows.push(row);
+    else out.push({ title: row.group, rows: [row] });
+  }
+  return out;
+}
+
+function scaleOf(props: DayRulerProps): RulerScale {
+  return {
+    from: props.from ?? 6,
+    to: props.to ?? 26,
+    snap: (props.snapMinutes ?? 15) / 60,
+    createHours: props.createHours ?? 4,
+    tickHours: props.tickHours ?? 4,
+  };
+}
+
+function abilitiesOf(props: DayRulerProps): RulerAbilities {
+  const open = !props.readOnly && !props.loading;
+  return { create: open && Boolean(props.onCreate), move: open && Boolean(props.onMove), resize: open && Boolean(props.onResize) };
+}
+
+/** The groups and their rows — or the skeleton, the host's error, or the host's empty state. */
+function RulerBody({ props, ctx }: { props: DayRulerProps; ctx: RowContext }): React.JSX.Element {
+  if (props.error) return <>{props.error}</>;
+  if (props.loading) {
+    return (
+      <>
+        {Array.from({ length: M.skeletonRows }, (_, index) => (
+          <Box key={index} sx={rowSx} aria-hidden data-testid={`${ctx.testId}-loading`}>
+            <Box sx={skeletonNameSx} />
+            <Box sx={skeletonTrackSx} />
+          </Box>
+        ))}
+      </>
+    );
+  }
+  if (props.rows.length === 0) return <>{props.empty ?? null}</>;
+  return (
+    <>
+      {grouped(props.rows).map((group, index) => (
+        <Box key={`${index}-${group.title ?? ''}`} role="list" aria-label={group.title}>
+          {group.title ? (
+            <Box component="p" sx={groupTitleSx} aria-hidden>
+              {group.title}
+            </Box>
+          ) : null}
+          {group.rows.map((row) => (
+            <RulerRow key={row.id} row={row} ctx={ctx} />
+          ))}
+        </Box>
+      ))}
+    </>
+  );
+}
+
+/**
+ * One day as an hour ruler per row — who is on the escala when, and who is
+ * really on shift (FUT-3825). Drag on an empty stretch to create (a click
+ * alone is `createHours`), drag a block to move it, drag its ends to change
+ * them; every hour snaps to `snapMinutes`. On a narrow ruler (a phone) each row
+ * stacks and the blocks are tap-only: touch scrolls and never drags.
+ *
+ * The ruler reports gestures; hours, limits and refusals are the host's.
+ */
+export function DayRuler(props: DayRulerProps): React.JSX.Element {
+  const { now, onCreate, onMove, onResize } = props;
+  const testId = props.dataTestId ?? 'day-ruler';
+  const labels = resolveLabels(EN_US_UI_LABELS.dayRuler, props.labels);
+  const scale = scaleOf(props);
+  const can = abilitiesOf(props);
+  const dragApi = useRulerDrag(scale, { onCreate, onMove, onResize });
+  const { text: announcement, say } = useAnnouncer();
+
+  const ctx: RowContext = {
+    scale,
+    now,
+    can,
+    drag: dragApi.drag,
+    dragApi,
+    onBlockClick: props.onBlockClick,
+    onKeyCreate: (row) => {
+      const [start, end] = keyCreateSpan(scale, now, props.createStart?.(row.id));
+      onCreate?.(row.id, start, end);
+    },
+    onBlockKey: (event, block) => handleBlockKey(event, block, { scale, can, onMove, onResize, labels, say }),
+    createLabel: labels.createTrack,
+    testId,
+  };
+
+  return (
+    <Box
+      sx={rootSx(props.rows.some((row) => row.actions !== undefined && row.actions !== null))}
+      data-testid={testId}
+      role="region"
+      aria-label={props['aria-label']}
+      aria-busy={props.loading || undefined}
+      aria-description={props.loading ? labels.loading : undefined}
+    >
+      {props.coverage && props.coverage.length > 0 ? (
+        <Coverage coverage={props.coverage} label={props.coverageLabel} scale={scale} testId={testId} />
+      ) : null}
+      <Axis scale={scale} testId={testId} />
+      <RulerBody props={props} ctx={ctx} />
+      <Box sx={SR_ONLY_SX} aria-live="polite" role="status" data-testid={`${testId}-live`}>
+        {announcement}
+      </Box>
+    </Box>
+  );
+}

package/src/components/data-display/DayRuler/DayRuler.types.ts

@@ -0,0 +1,107 @@
+import type * as React from 'react';
+
+import type { DayRulerLabels } from '../../../copy/labels';
+import type { ScheduleBlockTone } from '../ScheduleGrid/ScheduleGrid.types';
+
+/**
+ * Times on the ruler are HOURS from the day's midnight, fractions included:
+ * `20.75` is 20:45, and a value past 24 is the next morning (`26` is 02:00).
+ */
+export type RulerHour = number;
+
+/** A scheduled block on a row's track. */
+export interface DayRulerBlock {
+  id: string;
+  start: RulerHour;
+  end: RulerHour;
+  /** What the block says ("↻ 20:39–00:00", "Ausente"). One line, cut with an ellipsis. */
+  label: string;
+  /** What a NARROW block says on a narrow ruler (a phone) instead of a cut label — its start ("20:39"). */
+  shortLabel?: string;
+  tone: ScheduleBlockTone;
+  /** Its middle can be dragged along the row (and Alt+←/→ moves it). */
+  movable?: boolean;
+  /** Its ends can be dragged (and Shift+←/→ moves its end, Shift+Alt+←/→ its start). */
+  resizable?: boolean;
+  /** Drawn with a ring (the block whose window is open). */
+  selected?: boolean;
+  /** Tooltip and full text. Default: `label`. */
+  title?: string;
+  /**
+   * A stretch inside the block that is not worked (a meal break), in ruler
+   * hours, drawn as a hatched gap. It travels with the block while it is
+   * dragged and is cut to the block's ends. The words for it are the host's
+   * (`label`, `title`).
+   */
+  breakSpan?: { start: RulerHour; end: RulerHour };
+}
+
+/** The shift as it really runs: a thin bar under the blocks. */
+export interface DayRulerActual {
+  start: RulerHour;
+  end: RulerHour;
+}
+
+/** One person (or resource) on the day. */
+export interface DayRulerRow {
+  id: string;
+  label: string;
+  /** Under the name ("em turno desde 08:26 · sem escala", "atrasado · era 20:39"). */
+  meta?: string;
+  metaTone?: 'default' | 'warning';
+  /** Beside the name, on its line (a "Freela" tag); moves under the name when the column has no room for both. */
+  nameAdornment?: React.ReactNode;
+  /** Under the meta: the host's chips (praça, "Em pausa desde …"). One line; a chip that does not fit shrinks, its label cut. */
+  chips?: React.ReactNode;
+  /** The row's own buttons ("Encerrar turno", "Iniciar agora"), at the end of the row. */
+  actions?: React.ReactNode;
+  blocks: readonly DayRulerBlock[];
+  actual?: DayRulerActual;
+  /** Written on the track at the actual bar's start ("sem escala · desde 08:26"). */
+  actualLabel?: string;
+  /** The heading of the group this row opens or continues ("Entregas"); a new value starts a new group. */
+  group?: string;
+  /** Makes the name a button. */
+  onLabelClick?: () => void;
+  labelAccessible?: string;
+}
+
+export interface DayRulerProps {
+  rows: readonly DayRulerRow[];
+  /** The ruler's first hour (default 6, 06:00). */
+  from?: RulerHour;
+  /** Its last hour (default 26, 02:00 the next day). */
+  to?: RulerHour;
+  /** "Agora": a line across every track, when it falls on the ruler. */
+  now?: RulerHour;
+  /** People per hour, one entry per hour from `from` (index 0 = `from…from+1`). Drawn above the axis. */
+  coverage?: readonly number[];
+  /** Beside the coverage row ("Na escala, por hora"). */
+  coverageLabel?: string;
+  /** An axis label every this many hours (default 4). */
+  tickHours?: number;
+  /** Every gesture snaps to this (default 15 minutes). */
+  snapMinutes?: number;
+  /** A click alone on a track creates this long (default 4 hours). */
+  createHours?: number;
+  /** Where Enter on a focused track creates (default: `now` snapped up, else `from`). */
+  createStart?: (rowId: string) => RulerHour;
+  /** No create, move or resize. Block clicks still reach `onBlockClick`. */
+  readOnly?: boolean;
+  onCreate?: (rowId: string, start: RulerHour, end: RulerHour) => void;
+  onMove?: (blockId: string, start: RulerHour, end: RulerHour) => void;
+  onResize?: (blockId: string, start: RulerHour, end: RulerHour) => void;
+  onBlockClick?: (blockId: string) => void;
+  loading?: boolean;
+  error?: React.ReactNode;
+  empty?: React.ReactNode;
+  'aria-label'?: string;
+  /** The component's own words. Default: the English pack. */
+  labels?: Partial<DayRulerLabels>;
+  /**
+   * Base test id (default `day-ruler`). Parts: `-coverage`, `-axis`, `-row-${rowId}`,
+   * `-track-${rowId}`, `-block-${blockId}`, `-handle-l-${blockId}`, `-handle-r-${blockId}`, `-break-${blockId}`,
+   * `-actual-${rowId}`, `-now`, `-preview`, `-live`, `-loading`.
+   */
+  dataTestId?: string;
+}

package/src/components/data-display/DayRuler/day-ruler-model.ts

@@ -0,0 +1,83 @@
+import type { RulerHour } from './DayRuler.types';
+
+/**
+ * THE RULER'S ARITHMETIC, as pure functions (FUT-3825): snapping, clamping,
+ * positions and the HH:MM the ruler writes. Hours are from the day's
+ * midnight; past 24 is the next morning.
+ */
+
+/** `h` on the `snap`-hour grid (0.25 for 15 minutes). */
+export function snapTo(h: RulerHour, snap: number): RulerHour {
+  return snap > 0 ? Math.round(h / snap) * snap : h;
+}
+
+export function clamp(h: RulerHour, from: RulerHour, to: RulerHour): RulerHour {
+  return Math.min(to, Math.max(from, h));
+}
+
+/** The hour under `x` on a track whose box starts at `left` and is `width` wide, snapped and clamped. */
+export function hourAt(x: number, left: number, width: number, from: RulerHour, to: RulerHour, snap: number): RulerHour {
+  const share = width > 0 ? (x - left) / width : 0;
+  return clamp(snapTo(from + share * (to - from), snap), from, to);
+}
+
+/** Where `h` sits along the ruler, 0..100 (%), clamped to it. */
+export function percentOf(h: RulerHour, from: RulerHour, to: RulerHour): number {
+  return ((clamp(h, from, to) - from) / (to - from)) * 100;
+}
+
+/** "20:45"; 26 → "02:00", 24 → "00:00". */
+export function formatHour(h: RulerHour): string {
+  const minutes = Math.round(h * 60);
+  const hh = Math.floor(minutes / 60) % 24;
+  const mm = minutes % 60;
+  return `${String(hh).padStart(2, '0')}:${String(mm).padStart(2, '0')}`;
+}
+
+/** "20:45–00:45". */
+export function formatRange(start: RulerHour, end: RulerHour): string {
+  return `${formatHour(start)}–${formatHour(end)}`;
+}
+
+/** A block slid by `delta`, keeping its length and staying on the ruler. */
+export function moved(start: RulerHour, end: RulerHour, delta: number, from: RulerHour, to: RulerHour): [RulerHour, RulerHour] {
+  const length = end - start;
+  const next = clamp(start + delta, from, to - length);
+  return [next, next + length];
+}
+
+/** A block whose `side` was dragged to `h`, never shorter than `minHours`, never off the ruler. */
+export function resized(
+  start: RulerHour,
+  end: RulerHour,
+  side: 'start' | 'end',
+  h: RulerHour,
+  minHours: number,
+  from: RulerHour,
+  to: RulerHour,
+): [RulerHour, RulerHour] {
+  if (side === 'start') return [clamp(Math.min(h, end - minHours), from, to), end];
+  return [start, clamp(Math.max(h, start + minHours), from, to)];
+}
+
+/** A click alone (shorter than `minHours`) becomes `createHours` from where it was pressed. */
+export function createdSpan(
+  a: RulerHour,
+  b: RulerHour,
+  minHours: number,
+  createHours: number,
+  to: RulerHour,
+): [RulerHour, RulerHour] {
+  const start = Math.min(a, b);
+  const end = Math.max(a, b);
+  if (end - start >= minHours) return [start, end];
+  return [start, Math.min(to, start + createHours)];
+}
+
+/** The axis labels: every `step` hours from `from` to `to`, both ends included. */
+export function ticksOf(from: RulerHour, to: RulerHour, step: number): RulerHour[] {
+  const out: RulerHour[] = [];
+  if (step <= 0) return [from, to];
+  for (let h = from; h <= to + 1e-9; h += step) out.push(h);
+  return out;
+}

package/src/components/data-display/DayRuler/index.ts

@@ -0,0 +1,9 @@
+export { DayRuler } from './DayRuler';
+export type {
+  DayRulerActual,
+  DayRulerBlock,
+  DayRulerProps,
+  DayRulerRow,
+  RulerHour,
+} from './DayRuler.types';
+export type { DayRulerLabels } from '../../../copy/labels';