Weekly hours

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useEffectEvent,  useId,  useLayoutEffect,  useRef,  useState,  type CSSProperties,} from 'react';import { DemoCursor, playDemo } from './demo-cursor';import { easingOf, spring } from './spring';import { useAutoplay } from './use-autoplay';import {  ENDS,  FIRST_RANGE,  STARTS,  WEEK,  clock,  moveEnd,  nextRange,

/* Weekly hours (weekly-hours.tsx): a light stage with the days on a white card, or at night a   near-black stage with the days on a dark grey one. A day that is switched on carries data-on,   which opens its body and lifts it.   Colours are the tokens below, light-dark(light, dark): the component takes the color-scheme it   inherits from the page (light unless the page says otherwise), or the one its colorScheme prop   sets (data-color-scheme). */.root {  /* The stage, its dots and its edge; the card a step up, with a hairline at night only. */  --surface: #e4e4e7;  --dots: rgb(0 0 0 / 0.055);  --line: rgb(0 0 0 / 0.06);  --surface-2: #fff;  --card-line: transparent;  /* A day switched off, then under the pointer; a day switched on, lifted, with its hairline. */  --fill: #f3f3f5;  --fill-hover: #eeeef1;  --day: #fff;  --day-line: #e6e6ea;  /* The times and Add more in an open day, then under the pointer. */  --field: #f3f3f5;  --field-hover: #ebebee;  /* Words: an open day's name and the times; a closed day's name and Add more; the caption, on

/* * The weekly hours' data: the days, their time ranges in minutes after midnight, and the helpers * that keep ranges in order. Times go by half-hours. */export type TimeRange = {  /** Minutes after midnight: 540 is 9:00 AM. */  from: number;  to: number;};export type WeekDay = { name: string; on: boolean; ranges: TimeRange[] };export const WEEK: WeekDay[] = [  { name: 'Monday', on: true, ranges: [{ from: 9 * 60, to: 12 * 60 + 30 }] },  { name: 'Tuesday', on: false, ranges: [{ from: 10 * 60, to: 16 * 60 }] },  { name: 'Wednesday', on: false, ranges: [] },  { name: 'Thursday', on: false, ranges: [{ from: 8 * 60 + 30, to: 14 * 60 }] },  { name: 'Friday', on: false, ranges: [] },];export const STEP = 30;const DAY = 24 * 60;

/* * Springs as CSS easings. A spring pulls a value to its target and lets it settle: fast at first, * then slowing down, overshooting a little and coming back if it is bouncy. CSS `linear()` draws * any curve through a list of points, so the spring's motion is sampled once, and the same curve * serves CSS transitions and the Web Animations API. */export type Spring = {  /** The curve, as a CSS `linear()` easing. */  easing: string;  /** How long it takes to settle, in ms: the duration to play the curve over. */  duration: number;};/** Points sampled along the curve: plenty for a smooth motion. */const SAMPLES = 40;/** * A spring that covers most of the distance in about `response` ms. With a `bounce` of 0 it * settles without overshooting; at 0.3 it overshoots by about 5% and comes back. */export function spring(bounce: number, response: number): Spring {  // The damping ratio (1: no overshoot) and the natural frequency, in radians per second.  const damping = 1 - bounce;

'use client';import type { Ref } from 'react';import styles from './demo-cursor.module.css';/* * The demo's cursor. While a demo plays on its own, an arrow glides to the controls and presses * them, so the demo reads like someone using the component. Each glide is a CSS transition, one * per axis with a different easing, which bends the path into a gentle arc: nothing runs between * moves. */export function DemoCursor({ ref }: { ref: Ref<HTMLSpanElement> }) {  return (    <span ref={ref} className={styles.cursor} data-state="hidden" aria-hidden="true">      <span className={styles.vertical}>        <span className={styles.ripple} />        <svg className={styles.arrow} viewBox="0 0 20 20">          <path d="M4 2.5 15 13h-4.6l2.4 5.2-2.4 1-2.4-5.2L4 17.2z" />        </svg>      </span>    </span>  );}

/* The demo's cursor (demo-cursor.tsx): an arrow whose tip sits at (--x, --y) in its stage. The   outer box carries the horizontal move, the inner one the vertical move, eased differently. Its   colours are the stage's tokens (weekly-hours.module.css). */.cursor {  --x: 0px;  --y: 0px;  --move: 0ms;  position: absolute;  top: 0;  left: 0;  z-index: 10;  pointer-events: none;  opacity: 0;  transform: translateX(var(--x));  transition:    opacity 0.25s ease,    transform var(--move) cubic-bezier(0.45, 0, 0.25, 1);}.cursor[data-state='shown'],.cursor[data-state='pressed'] {  opacity: 1;}.vertical {

'use client';import { useCallback, useEffect, useRef, useState } from 'react';/* * When a demo may play on its own: while part of it is on screen and the tab is visible, never * under reduced motion, and not while the reader is using it. `take()` hands it to the reader; it * takes back over `idle` ms after their last input. */export function useAutoplay<T extends HTMLElement>(idle = 6000) {  const ref = useRef<T>(null);  const [visible, setVisible] = useState(false);  const [reduced, setReduced] = useState(true);  const [taken, setTaken] = useState(false);  const timer = useRef(0);  useEffect(() => {    const element = ref.current;    if (!element) return;    let onScreen = false;    const update = () => setVisible(onScreen && !document.hidden);    const observer = new IntersectionObserver(      ([entry]) => {        onScreen = entry.isIntersecting;