@nomideusz/svelte-calendar 0.10.0 → 0.12.0

package/dist/views/planner/PlannerDay.svelte

@@ -1,1279 +0,0 @@
-<!--
-  Planner day mode — horizontal filmstrip timeline.
-
-  Time flows left → right. Past on the left, future on the right.
-  The now-line tracks the current time. Drag to scroll through days.
-  Events are positioned as horizontal cards with overlap support.
--->
-<script lang="ts">import { onMount, tick, untrack } from "svelte";
-import { useCalendarContext } from "../shared/context.svelte.js";
-import EventContent from "../shared/EventContent.svelte";
-import { createClock } from "../../core/clock.svelte.js";
-import { createTextMeasure } from "../../core/measure.js";
-import { DAY_MS, HOUR_MS, sod } from "../../core/time.js";
-import { isAllDay, isMultiDay, segmentForDay } from "../../core/time.js";
-import { fmtDuration, fmtH, fmtTime, weekdayShort } from "../../core/locale.js";
-let {
-  height = 520,
-  events = [],
-  style = "",
-  locale,
-  focusDate,
-  oneventclick,
-  oneventcreate,
-  selectedEventId = null,
-  readOnly = false,
-  visibleHours
-} = $props();
-const ctx = useCalendarContext();
-const L = $derived(ctx.labels);
-const clock = createClock(ctx.timezone);
-const drag = $derived(ctx.drag);
-const commitDragCtx = $derived(ctx.commitDrag);
-const viewState = $derived(ctx.viewState);
-const loadRangeCtx = $derived(ctx.loadRange);
-const blockedSlots = $derived(ctx.blockedSlots);
-const dayHeaderSnippet = $derived(ctx.dayHeaderSnippet);
-const minDuration = $derived(ctx.minDuration);
-const autoHeight = $derived(ctx.autoHeight);
-const oneventhover = $derived(ctx.oneventhover);
-const disabledSet = $derived(ctx.disabledSet);
-const SNAP_MS = $derived(ctx.snapInterval * 6e4);
-let following = $state(true);
-let scrollDragging = $state(false);
-let wasDragging = false;
-let el;
-let containerW = $state(0);
-let containerH = $state(520);
-let dragStartX = 0;
-let dragScrollStart = 0;
-let rafId = 0;
-const BUFFER_DAYS = 7;
-const EDGE_DAYS = 2;
-const SHIFT_DAYS = 5;
-const _initMs = untrack(() => sod(focusDate?.getTime() ?? Date.now()));
-let internalCenterMs = $state(_initMs);
-let lastExternalMs = _initMs;
-let rebasing = false;
-let visibleDayMs = $state(_initMs);
-const startHour = $derived(visibleHours?.[0] ?? 0);
-const endHour = $derived(visibleHours?.[1] ?? 24);
-const hourCount = $derived(Math.max(1, endHour - startHour));
-const DAY_GAP = 2;
-const count = 1 + 2 * BUFFER_DAYS;
-const origin = $derived(internalCenterMs - BUFFER_DAYS * DAY_MS);
-$effect(() => {
-  if (!loadRangeCtx) return;
-  const rangeStart = new Date(internalCenterMs - BUFFER_DAYS * DAY_MS);
-  const rangeEnd = new Date(internalCenterMs + (BUFFER_DAYS + 1) * DAY_MS);
-  loadRangeCtx.set({ start: rangeStart, end: rangeEnd });
-  return () => loadRangeCtx.set(null);
-});
-const MIN_HOUR_W = 60;
-const hourWidth = $derived(containerW > 0 ? Math.max(MIN_HOUR_W, containerW / hourCount) : 110);
-const dayWidth = $derived(hourCount * hourWidth);
-const totalWidth = $derived(count * (dayWidth + DAY_GAP));
-const days = $derived.by(() => {
-  const result = [];
-  for (let i = 0; i < count; i++) {
-    const ms = origin + i * DAY_MS;
-    result.push({
-      ms,
-      today: ms === clock.today,
-      past: ms < clock.today,
-      x: i * (dayWidth + DAY_GAP)
-    });
-  }
-  return result;
-});
-function timeToPx(ms) {
-  const elapsed = ms - origin;
-  const dayIndex = Math.floor(elapsed / DAY_MS);
-  const hourInDay = (elapsed - dayIndex * DAY_MS) / HOUR_MS;
-  const clamped = Math.min(Math.max(hourInDay, startHour), endHour);
-  return dayIndex * (dayWidth + DAY_GAP) + (clamped - startHour) * hourWidth;
-}
-function pxToTime(px) {
-  const dayStride = dayWidth + DAY_GAP;
-  const dayIndex = Math.max(0, Math.min(count - 1, Math.floor(px / dayStride)));
-  const localPx = px - dayIndex * dayStride;
-  const hour = startHour + localPx / hourWidth;
-  return origin + dayIndex * DAY_MS + hour * HOUR_MS;
-}
-const nowPx = $derived(timeToPx(clock.tick));
-const nowHour = $derived((clock.tick - clock.today) / HOUR_MS);
-const nowInBand = $derived(nowHour >= startHour && nowHour < endHour);
-const timedEvents = $derived(events.filter((ev) => !isAllDay(ev) && !isMultiDay(ev)));
-const allDayEvents = $derived.by(() => {
-  const segs = [];
-  for (const ev of events) {
-    if (!isAllDay(ev) && !isMultiDay(ev)) continue;
-    const seg = segmentForDay(ev, visibleDayMs);
-    if (seg) segs.push(seg);
-  }
-  return segs;
-});
-const CONTENT_TOP = 56;
-const ALLDAY_H = 24;
-const contentTop = $derived(CONTENT_TOP + (allDayEvents.length > 0 ? ALLDAY_H + 4 : 0));
-const EVENT_GAP = 5;
-const MIN_EVENT_H = 32;
-const measure = createTextMeasure({
-  titleFont: "600 13px system-ui, sans-serif",
-  secondaryFont: "400 10px system-ui, sans-serif",
-  tagFont: "500 8px system-ui, sans-serif",
-  titleLineHeight: 16,
-  secondaryLineHeight: 13,
-  contentGap: 6
-});
-const nowInfo = $derived.by(() => {
-  const now = clock.tick;
-  const current = /* @__PURE__ */ new Set();
-  const todayStart = clock.today;
-  const todayEnd = todayStart + DAY_MS;
-  let nextId = null;
-  let nextStart = Infinity;
-  for (const ev of timedEvents) {
-    const s = ev.start.getTime();
-    const e = ev.end.getTime();
-    if (s <= now && e > now) current.add(ev.id);
-    else if (s >= todayStart && s < todayEnd && s > now && s < nextStart) {
-      nextStart = s;
-      nextId = ev.id;
-    }
-  }
-  return { current, nextId };
-});
-const positionedEvents = $derived.by(() => {
-  const dragP = drag?.active && (drag.mode === "move" || drag.mode === "resize-start" || drag.mode === "resize-end") ? drag.payload : null;
-  const staticEvents = [];
-  let draggedEv = null;
-  for (const ev of timedEvents) {
-    if (dragP?.eventId === ev.id) draggedEv = ev;
-    else staticEvents.push(ev);
-  }
-  const sorted = [...staticEvents].sort((a, b) => a.start.getTime() - b.start.getTime());
-  const infos = sorted.map((ev) => {
-    const s = ev.start.getTime();
-    const e = ev.end.getTime();
-    const x = timeToPx(s);
-    const xEnd = timeToPx(e);
-    return {
-      ev,
-      x,
-      width: Math.max(xEnd - x, 28),
-      row: 0,
-      groupMaxRow: 1,
-      isDragged: false,
-      startMs: s,
-      endMs: e,
-      clippedWidth: xEnd - x
-    };
-  }).filter((info) => info.clippedWidth > 0);
-  const par = infos.map((_, i) => i);
-  function find(i) {
-    while (par[i] !== i) {
-      par[i] = par[par[i]];
-      i = par[i];
-    }
-    return i;
-  }
-  for (let i = 0; i < infos.length; i++) {
-    for (let j = i + 1; j < infos.length; j++) {
-      if (infos[j].startMs < infos[i].endMs) par[find(i)] = find(j);
-      else break;
-    }
-  }
-  const groups = /* @__PURE__ */ new Map();
-  for (let i = 0; i < infos.length; i++) {
-    const root = find(i);
-    if (!groups.has(root)) groups.set(root, []);
-    groups.get(root).push(i);
-  }
-  for (const [, indices] of groups) {
-    const rows = [];
-    for (const idx of indices) {
-      const inf = infos[idx];
-      let row = 0;
-      for (let r = 0; r < rows.length; r++) {
-        if (rows[r] <= inf.startMs) {
-          row = r;
-          rows[r] = inf.endMs;
-          break;
-        }
-        row = r + 1;
-      }
-      if (row >= rows.length) rows.push(inf.endMs);
-      infos[idx].row = row;
-    }
-    for (const idx of indices) infos[idx].groupMaxRow = rows.length;
-  }
-  const availH = containerH - contentTop - 8;
-  const result = infos.map(({ startMs: _s, endMs: _e, clippedWidth: _c, ...info }) => {
-    const laneH = Math.max(MIN_EVENT_H, availH / info.groupMaxRow - EVENT_GAP);
-    const topPx = contentTop + info.row * (availH / info.groupMaxRow);
-    const fit = measure.fitContent({
-      title: info.ev.title,
-      subtitle: info.ev.subtitle,
-      location: info.ev.location,
-      time: `${fmtTime(info.ev.start, locale)} \u2013 ${fmtTime(info.ev.end, locale)}`,
-      tags: info.ev.tags,
-      maxWidth: laneH - 16,
-      maxHeight: info.width - 16
-    });
-    return { ...info, topPx, heightPx: laneH, fit };
-  });
-  if (draggedEv && dragP) {
-    const x = timeToPx(dragP.start.getTime());
-    const xEnd = timeToPx(dragP.end.getTime());
-    const dragH = Math.max(MIN_EVENT_H, availH - EVENT_GAP);
-    const dragW = Math.max(xEnd - x, 28);
-    result.push({
-      ev: draggedEv,
-      x,
-      width: dragW,
-      row: 0,
-      groupMaxRow: 1,
-      topPx: contentTop,
-      heightPx: dragH,
-      isDragged: true,
-      fit: measure.fitContent({
-        title: draggedEv.title,
-        subtitle: draggedEv.subtitle,
-        location: draggedEv.location,
-        tags: draggedEv.tags,
-        maxWidth: dragH - 16,
-        maxHeight: dragW - 16
-      })
-    });
-  }
-  return result;
-});
-$effect(() => {
-  const ext = focusDate ? sod(focusDate.getTime()) : clock.today;
-  if (ext !== lastExternalMs && !rebasing) {
-    lastExternalMs = ext;
-    internalCenterMs = ext;
-    visibleDayMs = ext;
-    following = ext === clock.today;
-    tick().then(() => {
-      if (el) {
-        const focusX = BUFFER_DAYS * (dayWidth + DAY_GAP);
-        el.scrollLeft = focusX + dayWidth / 2 - el.clientWidth / 2;
-      }
-    });
-  }
-});
-function checkEdges() {
-  if (!el || !viewState || rebasing) return;
-  const stride = dayWidth + DAY_GAP;
-  const threshold = stride * EDGE_DAYS;
-  const maxScroll = el.scrollWidth - el.clientWidth;
-  if (el.scrollLeft < threshold) {
-    rebase(-1);
-  } else if (maxScroll > 0 && maxScroll - el.scrollLeft < threshold) {
-    rebase(1);
-  }
-}
-function rebase(direction) {
-  if (rebasing) return;
-  rebasing = true;
-  const shift = SHIFT_DAYS * direction;
-  const stride = dayWidth + DAY_GAP;
-  const adj = -shift * stride;
-  if (el) el.scrollLeft += adj;
-  dragScrollStart += adj;
-  internalCenterMs += shift * DAY_MS;
-  lastExternalMs = internalCenterMs;
-  viewState?.setFocusDate(new Date(internalCenterMs));
-  tick().then(() => {
-    rebasing = false;
-  });
-}
-function syncFocusFromScroll() {
-  if (!el || !viewState || following || rebasing) return;
-  const centerX = el.scrollLeft + el.clientWidth / 2;
-  const centerDayMs = sod(pxToTime(centerX));
-  visibleDayMs = centerDayMs;
-  if (centerDayMs !== lastExternalMs) {
-    lastExternalMs = centerDayMs;
-    viewState.setFocusDate(new Date(centerDayMs));
-  }
-}
-let scrollRaf = 0;
-function handleScroll() {
-  if (following || rebasing || scrollRaf) return;
-  scrollRaf = requestAnimationFrame(() => {
-    scrollRaf = 0;
-    if (!el || following || rebasing) return;
-    checkEdges();
-    syncFocusFromScroll();
-  });
-}
-$effect(() => {
-  if (!following) return;
-  function frame() {
-    if (el && !scrollDragging) {
-      if (internalCenterMs !== clock.today) {
-        internalCenterMs = clock.today;
-        lastExternalMs = clock.today;
-        viewState?.goToday();
-      }
-      visibleDayMs = clock.today;
-      const todayD = days.find((d) => d.today);
-      if (todayD) {
-        el.scrollLeft = todayD.x + dayWidth / 2 - el.clientWidth / 2;
-      }
-    }
-    rafId = requestAnimationFrame(frame);
-  }
-  rafId = requestAnimationFrame(frame);
-  return () => cancelAnimationFrame(rafId);
-});
-onMount(() => {
-  const ro = new ResizeObserver((entries) => {
-    for (const entry of entries) {
-      containerW = entry.contentRect.width;
-      containerH = entry.contentRect.height;
-    }
-  });
-  ro.observe(el);
-  return () => {
-    cancelAnimationFrame(scrollRaf);
-    ro.disconnect();
-  };
-});
-const SCROLL_THRESHOLD = 3;
-function onPointerDown(e) {
-  if (e.button !== 0) return;
-  if (e.target.closest(".fs-event")) return;
-  if (readOnly) {
-    dragStartX = e.clientX;
-    dragScrollStart = el.scrollLeft;
-    window.addEventListener("pointermove", onScrollMove);
-    window.addEventListener("pointerup", onScrollUp, { once: true });
-    window.addEventListener("pointercancel", onScrollUp, { once: true });
-    return;
-  }
-  onCreatePointerDown(e);
-}
-function onScrollMove(e) {
-  const dx = e.clientX - dragStartX;
-  if (!scrollDragging && Math.abs(dx) >= SCROLL_THRESHOLD) {
-    scrollDragging = true;
-    wasDragging = true;
-    following = false;
-  }
-  if (scrollDragging) el.scrollLeft = dragScrollStart - dx;
-}
-function onScrollUp() {
-  window.removeEventListener("pointermove", onScrollMove);
-  window.removeEventListener("pointerup", onScrollUp);
-  window.removeEventListener("pointercancel", onScrollUp);
-  scrollDragging = false;
-}
-function isBlockedAt(dayMs, hour) {
-  if (!blockedSlots?.length) return false;
-  const jsDay = new Date(dayMs).getDay();
-  const isoDay = jsDay === 0 ? 7 : jsDay;
-  return blockedSlots.some((slot) => {
-    if (slot.day && slot.day !== isoDay) return false;
-    return hour >= slot.start && hour < slot.end;
-  });
-}
-function handleTrackClick(e) {
-  if (wasDragging) {
-    wasDragging = false;
-    return;
-  }
-  if (!oneventcreate || readOnly) return;
-  if (e.target.closest(".fs-event")) return;
-  const rect = e.currentTarget.getBoundingClientRect();
-  const clickX = e.clientX - rect.left + el.scrollLeft;
-  for (const d of days) {
-    if (clickX >= d.x && clickX < d.x + dayWidth) {
-      if (disabledSet.has(d.ms)) return;
-      const frac = (clickX - d.x) / dayWidth;
-      const clickHour = startHour + frac * hourCount;
-      if (isBlockedAt(d.ms, clickHour)) return;
-      const hour = Math.floor(clickHour);
-      const durMin = minDuration ? Math.max(60, minDuration) : 60;
-      const start = new Date(d.ms + hour * HOUR_MS);
-      const end = new Date(start.getTime() + durMin * 6e4);
-      oneventcreate({ start, end });
-      return;
-    }
-  }
-}
-const CREATE_THRESHOLD = 4;
-let createStartX = 0;
-let createAnchorMs = 0;
-let createStarted = false;
-function trackX(e) {
-  return e.clientX - el.getBoundingClientRect().left + el.scrollLeft;
-}
-function onCreatePointerDown(e) {
-  if (!drag || !oneventcreate) return;
-  createStartX = e.clientX;
-  createAnchorMs = pxToTime(trackX(e));
-  createStarted = false;
-  window.addEventListener("pointermove", onCreateMove);
-  window.addEventListener("pointerup", onCreateUp, { once: true });
-  window.addEventListener("pointercancel", onCreateCancel, { once: true });
-}
-function onCreateMove(e) {
-  if (!drag) return;
-  if (!createStarted) {
-    if (Math.abs(e.clientX - createStartX) < CREATE_THRESHOLD) return;
-    if (disabledSet.has(sod(createAnchorMs))) return;
-    createStarted = true;
-    wasDragging = true;
-    createAnchorMs = Math.floor(createAnchorMs / SNAP_MS) * SNAP_MS;
-    drag.beginCreate(new Date(createAnchorMs), new Date(createAnchorMs + SNAP_MS));
-  }
-  const snapped = Math.round(pxToTime(trackX(e)) / SNAP_MS) * SNAP_MS;
-  drag.updatePointer(
-    new Date(Math.min(createAnchorMs, snapped)),
-    new Date(Math.max(createAnchorMs + SNAP_MS, snapped))
-  );
-}
-function cleanupCreateDrag() {
-  window.removeEventListener("pointermove", onCreateMove);
-  window.removeEventListener("pointerup", onCreateUp);
-  window.removeEventListener("pointercancel", onCreateCancel);
-  createStarted = false;
-}
-function onCreateUp() {
-  if (drag && createStarted) {
-    commitDragCtx?.();
-    setTimeout(() => {
-      wasDragging = false;
-    }, 0);
-  }
-  cleanupCreateDrag();
-}
-function onCreateCancel() {
-  if (drag && createStarted) {
-    drag.cancel();
-    setTimeout(() => {
-      wasDragging = false;
-    }, 0);
-  }
-  cleanupCreateDrag();
-}
-const DRAG_THRESHOLD = 5;
-let evDragStartX = 0;
-let evDragOriginPx = 0;
-let evDragStarted = false;
-let evDragging = $state(false);
-let evDragId = $state(null);
-let evDragEvent = null;
-function onEventPointerDown(e, ev) {
-  if (e.button !== 0 || !drag || readOnly || ev.data?.readOnly) return;
-  e.stopPropagation();
-  evDragStartX = e.clientX;
-  evDragOriginPx = timeToPx(ev.start.getTime());
-  evDragStarted = false;
-  evDragId = ev.id;
-  evDragEvent = ev;
-  window.addEventListener("pointermove", onEvMove);
-  window.addEventListener("pointerup", onEvUp, { once: true });
-  window.addEventListener("pointercancel", onEvCancel, { once: true });
-}
-function onEvMove(e) {
-  const ev = evDragEvent;
-  if (!drag || !ev || evDragId !== ev.id) return;
-  const dx = e.clientX - evDragStartX;
-  if (!evDragStarted && Math.abs(dx) < DRAG_THRESHOLD) return;
-  if (!evDragStarted) {
-    evDragStarted = true;
-    evDragging = true;
-    drag.beginMove(ev.id, ev.start, ev.end);
-  }
-  const duration = ev.end.getTime() - ev.start.getTime();
-  const raw = pxToTime(evDragOriginPx + dx);
-  const snapped = Math.round(raw / SNAP_MS) * SNAP_MS;
-  drag.updatePointer(new Date(snapped), new Date(snapped + duration));
-}
-function cleanupEvDrag() {
-  window.removeEventListener("pointermove", onEvMove);
-  window.removeEventListener("pointerup", onEvUp);
-  window.removeEventListener("pointercancel", onEvCancel);
-  evDragStarted = false;
-  evDragging = false;
-  evDragId = null;
-  evDragEvent = null;
-}
-function onEvUp() {
-  if (!drag) {
-    cleanupEvDrag();
-    return;
-  }
-  if (!evDragStarted && evDragEvent) oneventclick?.(evDragEvent);
-  else if (evDragStarted) commitDragCtx?.();
-  cleanupEvDrag();
-}
-function onEvCancel() {
-  if (drag && evDragStarted) drag.cancel();
-  cleanupEvDrag();
-}
-let rsStartX = 0;
-let rsStarted = false;
-let rsEdge = "end";
-let rsEvent = null;
-function onResizePointerDown(e, ev, edge) {
-  if (e.button !== 0 || !drag || readOnly || ev.data?.readOnly) return;
-  e.stopPropagation();
-  rsStartX = e.clientX;
-  rsStarted = false;
-  rsEdge = edge;
-  rsEvent = ev;
-  window.addEventListener("pointermove", onResizeMove);
-  window.addEventListener("pointerup", onResizeUp, { once: true });
-  window.addEventListener("pointercancel", onResizeCancel, { once: true });
-}
-function onResizeMove(e) {
-  const ev = rsEvent;
-  if (!drag || !ev) return;
-  if (!rsStarted) {
-    if (Math.abs(e.clientX - rsStartX) < CREATE_THRESHOLD) return;
-    rsStarted = true;
-    drag.beginResize(ev.id, rsEdge, ev.start, ev.end);
-  }
-  const snapped = Math.round(pxToTime(trackX(e)) / SNAP_MS) * SNAP_MS;
-  if (rsEdge === "end") {
-    const end = Math.max(snapped, ev.start.getTime() + SNAP_MS);
-    drag.updatePointer(ev.start, new Date(end));
-  } else {
-    const start = Math.min(snapped, ev.end.getTime() - SNAP_MS);
-    drag.updatePointer(new Date(start), ev.end);
-  }
-}
-function cleanupResize() {
-  window.removeEventListener("pointermove", onResizeMove);
-  window.removeEventListener("pointerup", onResizeUp);
-  window.removeEventListener("pointercancel", onResizeCancel);
-  rsStarted = false;
-  rsEvent = null;
-}
-function onResizeUp() {
-  if (drag && rsStarted) {
-    wasDragging = true;
-    commitDragCtx?.();
-    setTimeout(() => {
-      wasDragging = false;
-    }, 0);
-  } else if (rsEvent && !rsStarted) {
-    oneventclick?.(rsEvent);
-  }
-  cleanupResize();
-}
-function onResizeCancel() {
-  if (drag && rsStarted) drag.cancel();
-  cleanupResize();
-}
-function onWindowKeydown(e) {
-  if (e.key !== "Escape" || !drag?.active) return;
-  drag.cancel();
-  cleanupCreateDrag();
-  cleanupEvDrag();
-  cleanupResize();
-  wasDragging = true;
-  window.addEventListener(
-    "pointerup",
-    () => setTimeout(() => {
-      wasDragging = false;
-    }, 0),
-    { once: true }
-  );
-}
-</script>
-
-<svelte:window onkeydown={onWindowKeydown} />
-
-<div class="fs" class:fs--auto={autoHeight} style={style || undefined} style:height={autoHeight ? undefined : (height ? `${height}px` : '100%')} role="region" aria-label={L.dayPlanner}>
-	<div
-		class="fs-scroll"
-		class:fs-grabbing={scrollDragging}
-		class:fs-readonly={readOnly}
-		bind:this={el}
-		onwheel={(e) => {
-			const delta = e.deltaY || e.deltaX;
-			if (delta === 0) return;
-			// Only capture the wheel when the track can consume the delta in
-			// that direction — otherwise let the page scroll normally.
-			const maxScroll = el.scrollWidth - el.clientWidth;
-			const canConsume = delta < 0 ? el.scrollLeft > 0 : el.scrollLeft < maxScroll - 1;
-			if (!canConsume) return;
-			e.preventDefault();
-			el.scrollLeft += delta;
-			following = false;
-		}}
-		onscroll={handleScroll}
-		onpointerdown={onPointerDown}
-		role="region"
-		aria-label={L.scrollableDayPlanner}
-	>
-		<!-- Presentational layer: the click handler is a convenience delegate for
-		     click-to-create on empty canvas; keyboard users create events via the
-		     host UI, and events themselves are focusable buttons. -->
-		<div class="fs-track" style:width="{totalWidth}px" onclick={handleTrackClick} role="presentation">
-			{#each days as d (d.ms)}
-				<div
-					class="fs-day"
-					class:fs-today={d.today}
-					class:fs-past={d.past}
-					class:fs-disabled={disabledSet.has(d.ms)}
-					style:left="{d.x}px"
-					style:width="{dayWidth}px"
-				>
-					{#each { length: hourCount } as _, h}
-						{@const hour = startHour + h}
-						{@const x = h * hourWidth}
-						<div class="fs-tick" style:left="{x}px">
-							<span class="fs-tick-lb">{fmtH(hour, locale)}</span>
-						</div>
-						<div class="fs-tick fs-tick--half" style:left="{x + hourWidth * 0.5}px"></div>
-					{/each}
-
-					<!-- Blocked slot overlays -->
-					{#if blockedSlots?.length}
-						{@const jsDay = new Date(d.ms).getDay()}
-						{@const isoDay = jsDay === 0 ? 7 : jsDay}
-						{#each blockedSlots as slot}
-							{#if !slot.day || slot.day === isoDay}
-								{@const s = Math.max(slot.start, startHour)}
-								{@const e = Math.min(slot.end, endHour)}
-								{#if e > s}
-									<div
-										class="fs-blocked"
-										style:left="{(s - startHour) * hourWidth}px"
-										style:width="{(e - s) * hourWidth}px"
-										aria-label={slot.label || 'Unavailable'}
-									>
-										{#if slot.label}
-											<span class="fs-blocked-label">{slot.label}</span>
-										{/if}
-									</div>
-								{/if}
-							{/if}
-						{/each}
-					{/if}
-
-					<!-- Custom day header snippet -->
-					{#if dayHeaderSnippet}
-						<div class="fs-day-header-custom">
-							{@render dayHeaderSnippet({ date: new Date(d.ms), isToday: d.today, dayName: weekdayShort(d.ms, locale) })}
-						</div>
-					{/if}
-				</div>
-			{/each}
-
-			<!-- Now line (hidden when the clock is outside the visible hour band) -->
-			{#if nowInBand}
-				<div class="fs-now" style:left="{nowPx}px">
-					<span class="fs-now-tag">{clock.hm}</span>
-					<div class="fs-now-line"></div>
-				</div>
-			{/if}
-
-			<!-- Events -->
-			{#each positionedEvents as p (p.ev.id)}
-				{@const isCurrent = nowInfo.current.has(p.ev.id)}
-				{@const isNext = !p.isDragged && p.ev.id === nowInfo.nextId}
-				<div
-					class="fs-event"
-					class:fs-event--selected={selectedEventId === p.ev.id}
-					class:fs-event--current={isCurrent}
-					class:fs-event--next={isNext}
-					class:fs-event--dragging={p.isDragged}
-					class:fs-event--resizing={p.isDragged && drag?.mode !== 'move'}
-					class:fs-event--readonly={p.ev.data?.readOnly}
-					class:fs-event--cancelled={p.ev.status === 'cancelled'}
-					class:fs-event--tentative={p.ev.status === 'tentative'}
-					class:fs-event--full={p.ev.status === 'full'}
-					class:fs-event--limited={p.ev.status === 'limited'}
-					style:left="{p.x}px"
-					style:width="{p.width}px"
-					style:top="{p.topPx}px"
-					style:height="{p.heightPx}px"
-					style:--ev-color={p.ev.color ?? 'var(--dt-accent)'}
-					role="button"
-					tabindex="0"
-					title={p.ev.title}
-					aria-label="{p.ev.title}, {fmtTime(p.ev.start, locale)} – {fmtTime(p.ev.end, locale)}, {fmtDuration(p.ev.start, p.ev.end)}{p.ev.status === 'cancelled' ? ' (cancelled)' : ''}{p.ev.status === 'tentative' ? ' (tentative)' : ''}{p.ev.status === 'full' ? ' (full)' : ''}{p.ev.status === 'limited' ? ' (limited)' : ''}{isCurrent ? ` (${L.inProgress})` : ''}{isNext ? ` (${L.upNext})` : ''}"
-					onpointerdown={(e) => onEventPointerDown(e, p.ev)}
-					onpointerenter={() => oneventhover?.(p.ev)}
-					onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); oneventclick?.(p.ev); } }}
-				>
-					<div class="fs-ev-inner">
-						{#if isCurrent}
-							<span class="fs-ev-live" aria-hidden="true"></span>
-						{:else if isNext}
-							<span class="fs-ev-next-badge" aria-hidden="true">{L.upNext}</span>
-						{/if}
-						<EventContent event={p.ev}>
-						{#if p.fit.time}
-							<span class="fs-ev-time">{fmtTime(p.ev.start, locale)} – {fmtTime(p.ev.end, locale)}</span>
-						{/if}
-						<span class="fs-ev-title">{p.ev.title}</span>
-						{#if p.ev.subtitle && p.fit.subtitle}
-							<span class="fs-ev-sub">{p.ev.subtitle}</span>
-						{/if}
-						{#if p.ev.location && p.fit.location}
-							<span class="fs-ev-loc">{p.ev.location}</span>
-						{/if}
-						{#if p.ev.tags?.length && p.fit.tags}
-							<span class="fs-ev-tags">
-								{#each p.ev.tags as tag}
-									<span class="fs-ev-tag">{tag}</span>
-								{/each}
-							</span>
-						{/if}
-						</EventContent>
-					</div>
-					{#if !readOnly && !p.ev.data?.readOnly && !p.isDragged}
-						<div
-							class="fs-ev-handle fs-ev-handle--start"
-							aria-hidden="true"
-							onpointerdown={(e) => onResizePointerDown(e, p.ev, 'start')}
-						></div>
-						<div
-							class="fs-ev-handle fs-ev-handle--end"
-							aria-hidden="true"
-							onpointerdown={(e) => onResizePointerDown(e, p.ev, 'end')}
-						></div>
-					{/if}
-				</div>
-			{/each}
-
-			<!-- Drag-to-create ghost -->
-			{#if !readOnly && drag?.active && drag.mode === 'create' && drag.payload}
-				{@const gx = timeToPx(drag.payload.start.getTime())}
-				{@const gw = Math.max(timeToPx(drag.payload.end.getTime()) - gx, 8)}
-				{@const gh = Math.max(MIN_EVENT_H, containerH - contentTop - 8 - EVENT_GAP)}
-				<div
-					class="fs-create-ghost"
-					style:left="{gx}px"
-					style:width="{gw}px"
-					style:top="{contentTop}px"
-					style:height="{gh}px"
-					aria-hidden="true"
-				>
-					<span class="fs-create-ghost-time">
-						{fmtTime(drag.payload.start, locale)} – {fmtTime(drag.payload.end, locale)}
-					</span>
-				</div>
-			{/if}
-		</div>
-	</div>
-
-	<!-- All-day events banner (outside scroll so it stays in viewport) -->
-	{#if allDayEvents.length > 0}
-		<div class="fs-allday" style:top="{CONTENT_TOP}px">
-			{#each allDayEvents as seg (seg.ev.id)}
-				<div
-					class="fs-ad"
-					class:fs-ad--start={seg.isStart}
-					class:fs-ad--selected={selectedEventId === seg.ev.id}
-					style:--ev-color={seg.ev.color ?? 'var(--dt-accent)'}
-					role="button"
-					tabindex="0"
-					aria-label="{seg.ev.title}{seg.totalDays > 1 ? `, ${L.dayNOfTotal(seg.dayIndex, seg.totalDays)}` : `, ${L.allDay}`}"
-					onclick={() => oneventclick?.(seg.ev)}
-					onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); oneventclick?.(seg.ev); } }}
-				>
-					<span class="fs-ad-dot" aria-hidden="true"></span>
-					<span class="fs-ad-title">{seg.ev.title}</span>
-					{#if seg.totalDays > 1}
-						<span class="fs-ad-span">{L.day} {seg.dayIndex}/{seg.totalDays}</span>
-					{:else}
-						<span class="fs-ad-span">{L.allDay}</span>
-					{/if}
-				</div>
-			{/each}
-		</div>
-	{/if}
-
-</div>
-
-<style>
-	/* ─── Container ──────────────────────────────────── */
-	.fs {
-		position: relative;
-		overflow: hidden;
-		user-select: none;
-		font-variant-numeric: tabular-nums;
-		/* The track is px-sized from the container width; never let it feed
-		   back into our own intrinsic size (host flex/grid min-width:auto
-		   would otherwise loop container → hourWidth → track → container). */
-		contain: inline-size;
-	}
-	.fs--auto { overflow: visible; }
-
-	/* ─── Horizontal scroll ──────────────────────────── */
-	.fs-scroll {
-		width: 100%;
-		height: 100%;
-		overflow-x: auto;
-		overflow-y: hidden;
-		touch-action: pan-x;
-		cursor: default;
-		scrollbar-width: thin;
-		scrollbar-color: var(--dt-scrollbar, rgba(0, 0, 0, 0.1)) transparent;
-	}
-	/* Auto height grows vertically, but horizontal containment must stay —
-	   overflow: visible here painted the whole track outside the calendar. */
-	.fs--auto .fs-scroll { height: auto; overflow-x: auto; overflow-y: hidden; }
-	.fs-scroll::-webkit-scrollbar { height: 5px; }
-	.fs-scroll::-webkit-scrollbar-thumb {
-		background: var(--dt-scrollbar, rgba(0, 0, 0, 0.1));
-		border-radius: 4px;
-	}
-	.fs-scroll::-webkit-scrollbar-track { background: transparent; }
-	.fs-readonly { cursor: grab; }
-	.fs-grabbing { cursor: grabbing; }
-
-	.fs-track {
-		position: relative;
-		height: 100%;
-	}
-
-	/* ─── Day block ──────────────────────────────────── */
-	.fs-day {
-		position: absolute;
-		top: 0;
-		height: 100%;
-		border-left: 1px solid var(--dt-border-day, rgba(0, 0, 0, 0.14));
-		box-sizing: border-box;
-	}
-	.fs-today { background: var(--dt-today-bg, color-mix(in srgb, var(--dt-accent, #2563eb) 8%, transparent)); }
-	/* Past days: dim via a background wash instead of a subtree opacity so
-	   event text keeps full contrast. */
-	.fs-past { background: color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 3%, transparent); }
-
-	/* ─── Disabled day ───────────────────────────────── */
-	.fs-disabled {
-		opacity: 0.35;
-		background: repeating-linear-gradient(
-			45deg,
-			transparent,
-			transparent 6px,
-			var(--dt-border, rgba(0, 0, 0, 0.08)) 6px,
-			var(--dt-border, rgba(0, 0, 0, 0.08)) 7px
-		) !important;
-	}
-
-	/* ─── Blocked slot overlay ───────────────────────── */
-	.fs-blocked {
-		position: absolute;
-		top: 18px;
-		bottom: 0;
-		z-index: 3;
-		background: repeating-linear-gradient(
-			-45deg,
-			color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent),
-			color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent) 4px,
-			transparent 4px,
-			transparent 8px
-		);
-		border-radius: 4px;
-		pointer-events: none;
-		display: flex;
-		align-items: flex-end;
-		justify-content: center;
-		padding-bottom: 6px;
-	}
-
-	.fs-blocked-label {
-		font: 500 9px/1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
-		text-transform: uppercase;
-		letter-spacing: 0.04em;
-		white-space: nowrap;
-	}
-
-	/* ─── Custom day header ──────────────────────────── */
-	.fs-day-header-custom {
-		position: absolute;
-		top: 16px;
-		left: 50%;
-		transform: translateX(-50%);
-		z-index: 4;
-		pointer-events: auto;
-		white-space: nowrap;
-	}
-
-	/* ─── Hour ticks ─────────────────────────────────── */
-	.fs-tick {
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		width: 0;
-	}
-	.fs-tick::before {
-		content: '';
-		position: absolute;
-		top: 18px;
-		bottom: 0;
-		width: 1px;
-		background: var(--dt-border, rgba(0, 0, 0, 0.08));
-	}
-	.fs-tick-lb {
-		position: absolute;
-		top: 2px;
-		left: 5px;
-		font: 500 10px/1 var(--dt-mono, ui-monospace, monospace);
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
-		white-space: nowrap;
-		pointer-events: none;
-	}
-	/* Half-hour guide: full-height line at low opacity through the event area */
-	.fs-tick--half::before {
-		top: 18px;
-		bottom: 0;
-		opacity: 0.35;
-	}
-
-	/* ─── Now-line ────────────────────────────────────── */
-	.fs-now {
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		z-index: 10;
-		pointer-events: none;
-		transform: translateX(-1px);
-	}
-	.fs-now-line {
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		left: 0;
-		width: 2px;
-		background: var(--dt-accent, #2563eb);
-		box-shadow: 0 0 8px var(--dt-glow, rgba(37, 99, 235, 0.25));
-	}
-	.fs-now-tag {
-		position: absolute;
-		/* Below the hour-label row (labels sit at top: 2px) so the tag never
-		   collides with an hour label near hour boundaries. */
-		top: 20px;
-		left: 8px;
-		font: 700 11px/1 var(--dt-mono, ui-monospace, monospace);
-		color: var(--dt-accent, #2563eb);
-		background: color-mix(in srgb, var(--dt-bg, #ffffff) 92%, var(--dt-accent, #2563eb));
-		border: 1px solid var(--dt-accent-dim, rgba(37, 99, 235, 0.12));
-		padding: 3px 6px;
-		border-radius: 4px;
-		white-space: nowrap;
-		z-index: 1;
-	}
-	/* ─── All-day strip ─────────────────────────────── */
-	/* The container is a full-width overlay — let clicks pass through it and
-	   only the chips themselves capture pointer events. */
-	.fs-allday {
-		position: absolute;
-		left: 0;
-		right: 0;
-		display: flex;
-		gap: 6px;
-		padding: 0 8px;
-		z-index: 7;
-		overflow-x: auto;
-		scrollbar-width: none;
-		pointer-events: none;
-	}
-	.fs-allday::-webkit-scrollbar { display: none; }
-
-	.fs-ad {
-		display: flex;
-		align-items: center;
-		gap: 4px;
-		padding: 2px 8px;
-		border-radius: 4px;
-		background: color-mix(in srgb, var(--ev-color) 18%, var(--dt-surface, var(--dt-bg, #ffffff)));
-		border-left: 3px solid var(--ev-color);
-		white-space: nowrap;
-		flex-shrink: 0;
-		min-width: 0;
-		max-width: 320px;
-		cursor: pointer;
-		transition: background 0.15s;
-		pointer-events: auto;
-	}
-	.fs-ad:hover {
-		background: color-mix(in srgb, var(--ev-color) 28%, var(--dt-surface, var(--dt-bg, #ffffff)));
-	}
-	.fs-ad:focus-visible {
-		outline: none;
-		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
-	}
-	.fs-ad--selected {
-		background: color-mix(in srgb, var(--ev-color) 30%, var(--dt-surface, var(--dt-bg, #ffffff)));
-		border-left-width: 4px;
-	}
-
-	.fs-ad-dot {
-		width: 6px;
-		height: 6px;
-		border-radius: 50%;
-		background: var(--ev-color);
-		flex-shrink: 0;
-	}
-
-	.fs-ad-title {
-		font-size: 0.7rem;
-		font-weight: 500;
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
-		flex: 0 1 auto;
-		min-width: 0;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	.fs-ad-span {
-		font-size: 0.6rem;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
-		flex-shrink: 0;
-	}
-
-	/* ─── Events ─────────────────────────────────────── */
-	.fs-event {
-		position: absolute;
-		z-index: 6;
-		border-radius: 6px;
-		/* Editable events are grabbable; touch drags move the event instead of
-		   scrolling the strip. */
-		cursor: grab;
-		touch-action: none;
-		background: color-mix(in srgb, var(--ev-color) 22%, var(--dt-surface, var(--dt-bg, #ffffff)));
-		border: 1px solid color-mix(in srgb, var(--ev-color) 40%, transparent);
-		/* Solid stripe at the start edge — matches the week view, keeps the
-		   pure tour color visible while the body stays a readable tint. */
-		border-left: 3px solid var(--ev-color);
-		overflow: hidden;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		/* top/height only: lane reflow animates on drop; left/width stay instant so
-		   mount-time width measurement and infinite-scroll rebases don't slide cards */
-		transition: box-shadow 120ms, background 120ms,
-			top 180ms cubic-bezier(0.2, 0.8, 0.2, 1), height 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
-	}
-	.fs-event:hover {
-		background: color-mix(in srgb, var(--ev-color) 32%, var(--dt-surface, var(--dt-bg, #ffffff)));
-		box-shadow: 0 2px 12px color-mix(in srgb, var(--ev-color) 25%, transparent);
-	}
-	.fs-event--selected {
-		box-shadow: 0 0 0 2px var(--ev-color), 0 2px 14px color-mix(in srgb, var(--ev-color) 35%, transparent);
-	}
-	.fs-event--current {
-		background: color-mix(in srgb, var(--ev-color) 22%, var(--dt-surface, var(--dt-bg, #ffffff)));
-		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ev-color) 20%, transparent);
-	}
-	.fs-event--next {
-		border-color: color-mix(in srgb, var(--ev-color) 75%, transparent);
-	}
-	.fs-event--dragging {
-		opacity: 0.85;
-		z-index: 50;
-		box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
-		cursor: grabbing;
-		/* fast ease toward the snapped cursor position */
-		transition: left 80ms ease-out, width 80ms ease-out;
-	}
-	.fs-event--resizing {
-		cursor: ew-resize;
-	}
-
-	/* ─── Resize handles ─────────────────────────────── */
-	.fs-ev-handle {
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		width: 6px;
-		z-index: 2;
-		cursor: ew-resize;
-		touch-action: none;
-	}
-	/* Hit-slop: ~20px effective grab zone while the visual stays 6px */
-	.fs-ev-handle::before {
-		content: '';
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		left: -7px;
-		right: -7px;
-	}
-	.fs-ev-handle--start { left: 0; }
-	.fs-ev-handle--end { right: 0; }
-	.fs-ev-handle::after {
-		content: '';
-		position: absolute;
-		top: 20%;
-		bottom: 20%;
-		left: 2px;
-		width: 2px;
-		border-radius: 2px;
-		background: var(--ev-color);
-		opacity: 0;
-		transition: opacity 120ms;
-	}
-	.fs-event:hover .fs-ev-handle::after,
-	.fs-event:focus-within .fs-ev-handle::after { opacity: 0.55; }
-	/* Coarse pointers can't hover — show the grips persistently */
-	@media (hover: none) {
-		.fs-ev-handle::after { opacity: 0.55; }
-	}
-
-	/* ─── Drag-to-create ghost ───────────────────────── */
-	.fs-create-ghost {
-		position: absolute;
-		z-index: 40;
-		border-radius: 6px;
-		background: color-mix(in srgb, var(--dt-accent, #2563eb) 14%, transparent);
-		border: 1px dashed color-mix(in srgb, var(--dt-accent, #2563eb) 60%, transparent);
-		display: flex;
-		align-items: flex-start;
-		justify-content: center;
-		overflow: hidden;
-		pointer-events: none;
-	}
-	.fs-create-ghost-time {
-		font: 600 10px/1 var(--dt-mono, ui-monospace, monospace);
-		color: var(--dt-accent, #2563eb);
-		padding: 6px 4px;
-		white-space: nowrap;
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.fs-event,
-		.fs-event--dragging {
-			transition: box-shadow 120ms, background 120ms;
-		}
-		.fs-create-ghost,
-		.fs-ad,
-		.fs-ev-handle::after {
-			transition: none;
-		}
-	}
-	/* Cancelled: strikethrough + secondary text, not a subtree opacity dim */
-	.fs-event--cancelled .fs-ev-title {
-		text-decoration: line-through;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
-	}
-	.fs-event--tentative {
-		opacity: 0.65;
-		border: 1px dashed color-mix(in srgb, var(--ev-color) 40%, transparent);
-	}
-	.fs-event--full {
-		opacity: 0.55;
-	}
-	.fs-event--limited {
-		opacity: 0.65;
-		border: 1px dashed color-mix(in srgb, var(--ev-color) 40%, transparent);
-	}
-	.fs-event--readonly,
-	.fs-readonly .fs-event {
-		cursor: default;
-	}
-
-	/* Event inner — vertical text along lane height (day filmstrip) */
-	.fs-ev-inner {
-		writing-mode: vertical-rl;
-		text-orientation: mixed;
-		transform: rotate(180deg);
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		justify-content: center;
-		gap: 6px;
-		height: 100%;
-		max-width: 100%;
-		overflow: hidden;
-		box-sizing: border-box;
-		padding: 8px 4px;
-	}
-	.fs-ev-live {
-		flex-shrink: 0;
-		width: 7px;
-		height: 7px;
-		border-radius: 50%;
-		background: var(--ev-color);
-	}
-	.fs-ev-next-badge {
-		flex-shrink: 0;
-		font: 600 8px/1 var(--dt-sans, system-ui, sans-serif);
-		text-transform: uppercase;
-		letter-spacing: 0.06em;
-		color: var(--ev-color, var(--dt-accent));
-		background: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 15%, transparent);
-		padding: 2px 5px;
-		border-radius: 3px;
-		white-space: nowrap;
-	}
-	.fs-ev-title {
-		font: 600 13px/1.15 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
-		overflow: hidden;
-		text-overflow: ellipsis;
-		/* In vertical writing mode line boxes stack as columns — allow a
-		   second column before truncating so overlapping (short) cards keep
-		   readable names. Full name is in the title tooltip. */
-		display: -webkit-box;
-		-webkit-box-orient: vertical;
-		-webkit-line-clamp: 2;
-		line-clamp: 2;
-		white-space: normal;
-		max-height: 100%;
-		flex-shrink: 0;
-	}
-	.fs-ev-time {
-		font: 400 10px/1 var(--dt-mono, ui-monospace, monospace);
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
-		white-space: nowrap;
-		flex-shrink: 0;
-	}
-	.fs-ev-sub {
-		font: 400 11px/1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		max-height: 100%;
-		flex-shrink: 0;
-	}
-	.fs-ev-loc {
-		font: 400 10px/1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		max-height: 100%;
-		flex-shrink: 0;
-	}
-	.fs-ev-tags {
-		display: flex;
-		flex-direction: row;
-		gap: 4px;
-		flex-shrink: 0;
-	}
-	.fs-ev-tag {
-		font: 500 8px/1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--ev-color, var(--dt-accent));
-		background: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 18%, transparent);
-		padding: 1px 4px;
-		border-radius: 3px;
-		white-space: nowrap;
-	}
-
-	/* ─── Focus-visible ──────────────────────────────── */
-	/* box-shadow instead of outline: outlines get clipped by the
-	   overflow: hidden scroll container. */
-	.fs-event:focus-visible {
-		outline: none;
-		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
-	}
-</style>
-
-