@withpotter/pages-bookings 0.13.0-next.101

package/dist/dashboard/(bookings)/calendar/_components/slot-action-sheet.js

@@ -0,0 +1,209 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { motion, AnimatePresence, useReducedMotion } from "motion/react";
+import { X, CalendarPlus, Ban, Loader2 } from "lucide-react";
+import { Select } from "@withpotter/ui-kit/select";
+import { springs, PRESS_SCALE_LARGE } from "@withpotter/lib/motion";
+import { Button } from "@withpotter/ui-kit/button";
+import { Input } from "@withpotter/ui-kit";
+function formatDay(dateStr) {
+  return new Date(dateStr).toLocaleDateString("en-US", {
+    weekday: "long",
+    month: "long",
+    day: "numeric"
+  });
+}
+function formatClock(time) {
+  const [h, m] = time.split(":").map(Number);
+  if (Number.isNaN(h)) return time;
+  const suffix = h >= 12 ? "pm" : "am";
+  const hour = h % 12 === 0 ? 12 : h % 12;
+  return `${hour}:${String(m).padStart(2, "0")}${suffix}`;
+}
+function SlotActionSheet({
+  slot,
+  resources,
+  resourcesLoading,
+  resourceId,
+  onResourceChange,
+  onBook,
+  onBlock,
+  blocking,
+  onClose,
+  resourceLabel = { singular: "Resource", plural: "Resources" }
+}) {
+  const reduce = useReducedMotion();
+  const [mode, setMode] = useState("choose");
+  const [reason, setReason] = useState("");
+  const close = () => {
+    setMode("choose");
+    setReason("");
+    onClose();
+  };
+  const needsResource = resources.length > 1 && !resourceId;
+  const noResources = !resourcesLoading && resources.length === 0;
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: slot && /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: reduce ? false : { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: 0.16 },
+        onClick: close,
+        className: "fixed inset-0 z-[var(--z-modal)] bg-black/65"
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "pointer-events-none fixed inset-0 z-[var(--z-modal)] flex items-center justify-center px-4", children: /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Slot actions",
+        initial: reduce ? false : { opacity: 0, y: 12, scale: 0.97 },
+        animate: { opacity: 1, y: 0, scale: 1 },
+        exit: reduce ? void 0 : { opacity: 0, y: 8, scale: 0.98 },
+        transition: springs.gentle,
+        className: "pointer-events-auto w-full max-w-sm overflow-hidden rounded-2xl border border-[var(--border-strong)] bg-[var(--bg-muted)] shadow-2xl",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between border-b border-[var(--border-default)] px-4 py-4", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h2", { className: "font-semibold text-[var(--text-primary)]", children: formatDay(slot.date) }),
+              /* @__PURE__ */ jsxs("p", { className: "mt-0.5 text-xs text-[var(--text-secondary)]", children: [
+                formatClock(slot.startTime),
+                " to ",
+                formatClock(slot.endTime)
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                onClick: close,
+                "aria-label": "Close",
+                children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+              }
+            )
+          ] }),
+          resources.length > 1 && /* @__PURE__ */ jsxs("div", { className: "px-4 pt-4", children: [
+            /* @__PURE__ */ jsx("label", { className: "mb-2 block text-xs font-medium text-[var(--text-secondary)]", children: resourceLabel.singular }),
+            /* @__PURE__ */ jsx(
+              Select,
+              {
+                value: resourceId,
+                onChange: onResourceChange,
+                options: resources.map((r) => ({
+                  value: r.id,
+                  label: r.name
+                })),
+                placeholder: `Select a ${resourceLabel.singular.toLowerCase()}`,
+                searchable: resources.length > 15
+              }
+            )
+          ] }),
+          noResources && /* @__PURE__ */ jsxs("p", { className: "mx-4 mt-4 rounded-lg bg-[var(--warning-bg)] px-3 py-2 text-xs text-[var(--warning)]", children: [
+            "No ",
+            resourceLabel.plural.toLowerCase(),
+            " configured yet. Add one before booking or blocking time."
+          ] }),
+          /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: mode === "choose" ? /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              initial: reduce ? false : { opacity: 0, x: -8 },
+              animate: { opacity: 1, x: 0 },
+              exit: reduce ? void 0 : { opacity: 0, x: -8 },
+              transition: springs.snappy,
+              className: "flex flex-col gap-2 p-4",
+              children: [
+                /* @__PURE__ */ jsxs(
+                  motion.button,
+                  {
+                    onClick: onBook,
+                    disabled: noResources || needsResource,
+                    whileTap: reduce ? void 0 : { scale: PRESS_SCALE_LARGE },
+                    transition: springs.snappy,
+                    className: "flex items-center justify-center gap-2 rounded-xl bg-brand-500 px-4 py-3 text-sm font-medium text-white transition-colors hover:bg-brand-600 disabled:cursor-not-allowed disabled:opacity-50",
+                    children: [
+                      /* @__PURE__ */ jsx(CalendarPlus, { className: "h-[15px] w-[15px]" }),
+                      "Book this time"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    variant: "secondary",
+                    onClick: () => setMode("block"),
+                    disabled: noResources,
+                    children: [
+                      /* @__PURE__ */ jsx(Ban, {}),
+                      "Block it instead"
+                    ]
+                  }
+                )
+              ]
+            },
+            "choose"
+          ) : /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              initial: reduce ? false : { opacity: 0, x: 8 },
+              animate: { opacity: 1, x: 0 },
+              exit: reduce ? void 0 : { opacity: 0, x: 8 },
+              transition: springs.snappy,
+              className: "p-4",
+              children: [
+                /* @__PURE__ */ jsxs("label", { className: "mb-2 block text-xs font-medium text-[var(--text-secondary)]", children: [
+                  "Reason",
+                  " ",
+                  /* @__PURE__ */ jsx("span", { className: "text-[var(--text-tertiary)]", children: "(optional)" })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    type: "text",
+                    value: reason,
+                    autoFocus: true,
+                    onChange: (e) => setReason(e.target.value),
+                    placeholder: "Lunch break, maintenance, staff training",
+                    className: "w-full"
+                  }
+                ),
+                /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-[var(--text-tertiary)]", children: "Blocked time stops new bookings from landing here." }),
+                /* @__PURE__ */ jsxs("div", { className: "mt-4 flex gap-2", children: [
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "secondary",
+                      className: "flex-1",
+                      onClick: () => setMode("choose"),
+                      children: "Back"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    motion.button,
+                    {
+                      onClick: () => onBlock(reason),
+                      disabled: blocking || resourcesLoading || needsResource,
+                      whileTap: reduce ? void 0 : { scale: PRESS_SCALE_LARGE },
+                      transition: springs.snappy,
+                      className: "flex-1 rounded-xl bg-[var(--text-primary)] px-4 py-3 text-sm font-medium text-[var(--bg-base)] disabled:opacity-50",
+                      children: blocking ? /* @__PURE__ */ jsx(Loader2, { className: "mx-auto size-4 animate-spin" }) : "Block time"
+                    }
+                  )
+                ] })
+              ]
+            },
+            "block"
+          ) })
+        ]
+      }
+    ) })
+  ] }) });
+}
+export {
+  SlotActionSheet
+};
+//# sourceMappingURL=slot-action-sheet.js.map

package/dist/dashboard/(bookings)/calendar/_components/slot-action-sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/dashboard/%28bookings%29/calendar/_components/slot-action-sheet.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { motion, AnimatePresence, useReducedMotion } from 'motion/react';\nimport { X, CalendarPlus, Ban, Loader2 } from 'lucide-react';\nimport { Select } from '@withpotter/ui-kit/select';\nimport { springs, PRESS_SCALE_LARGE } from '@withpotter/lib/motion';\nimport type { ResourceItem } from '@withpotter/lib/api/types';\nimport type { EntityLabel } from '@withpotter/lib/intents/types';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { Input } from '@withpotter/ui-kit';\n\nexport interface SlotSelection {\n  date: string;\n  startTime: string;\n  endTime: string;\n}\n\nexport interface SlotActionSheetProps {\n  slot: SlotSelection | null;\n  resources: ResourceItem[];\n  resourcesLoading: boolean;\n  resourceId: string;\n  onResourceChange: (id: string) => void;\n  onBook: () => void;\n  onBlock: (reason: string) => void;\n  blocking: boolean;\n  onClose: () => void;\n  /**\n   * What this business calls the thing being booked, from the archetype config.\n   * Passed in rather than read from a hook here so the sheet stays a pure\n   * primitive: the intent hooks depend on AuthProvider, which only exists\n   * inside /dashboard, and a primitive that cannot render in a lab is a\n   * primitive nobody can review in isolation.\n   */\n  resourceLabel?: EntityLabel;\n}\n\nfunction formatDay(dateStr: string) {\n  return new Date(dateStr).toLocaleDateString('en-US', {\n    weekday: 'long',\n    month: 'long',\n    day: 'numeric',\n  });\n}\n\nfunction formatClock(time: string) {\n  const [h, m] = time.split(':').map(Number);\n  if (Number.isNaN(h)) return time;\n  const suffix = h >= 12 ? 'pm' : 'am';\n  const hour = h % 12 === 0 ? 12 : h % 12;\n  return `${hour}:${String(m).padStart(2, '0')}${suffix}`;\n}\n\n/**\n * What happens when staff drag a gap on the calendar.\n *\n * It used to be one thing: block it. That made the only place in the product\n * where free time is visible a place where the sole verb was \"make this gap\n * permanent\". Booking the gap is the reason anyone drags it, so booking is the\n * primary action and blocking steps behind a second press.\n */\nexport function SlotActionSheet({\n  slot,\n  resources,\n  resourcesLoading,\n  resourceId,\n  onResourceChange,\n  onBook,\n  onBlock,\n  blocking,\n  onClose,\n  resourceLabel = { singular: 'Resource', plural: 'Resources' },\n}: SlotActionSheetProps) {\n  const reduce = useReducedMotion();\n  const [mode, setMode] = useState<'choose' | 'block'>('choose');\n  const [reason, setReason] = useState('');\n\n  const close = () => {\n    setMode('choose');\n    setReason('');\n    onClose();\n  };\n\n  const needsResource = resources.length > 1 && !resourceId;\n  const noResources = !resourcesLoading && resources.length === 0;\n\n  return (\n    <AnimatePresence>\n      {slot && (\n        <>\n          <motion.div\n            initial={reduce ? false : { opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.16 }}\n            onClick={close}\n            className=\"fixed inset-0 z-[var(--z-modal)] bg-black/65\"\n          />\n          <div className=\"pointer-events-none fixed inset-0 z-[var(--z-modal)] flex items-center justify-center px-4\">\n            <motion.div\n              role=\"dialog\"\n              aria-modal=\"true\"\n              aria-label=\"Slot actions\"\n              initial={reduce ? false : { opacity: 0, y: 12, scale: 0.97 }}\n              animate={{ opacity: 1, y: 0, scale: 1 }}\n              exit={reduce ? undefined : { opacity: 0, y: 8, scale: 0.98 }}\n              transition={springs.gentle}\n              className=\"pointer-events-auto w-full max-w-sm overflow-hidden rounded-2xl border border-[var(--border-strong)] bg-[var(--bg-muted)] shadow-2xl\"\n            >\n              <div className=\"flex items-start justify-between border-b border-[var(--border-default)] px-4 py-4\">\n                <div>\n                  <h2 className=\"font-semibold text-[var(--text-primary)]\">\n                    {formatDay(slot.date)}\n                  </h2>\n                  <p className=\"mt-0.5 text-xs text-[var(--text-secondary)]\">\n                    {formatClock(slot.startTime)} to {formatClock(slot.endTime)}\n                  </p>\n                </div>\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  onClick={close}\n                  aria-label=\"Close\"\n                >\n                  <X className=\"size-4\" />\n                </Button>\n              </div>\n\n              {resources.length > 1 && (\n                <div className=\"px-4 pt-4\">\n                  <label className=\"mb-2 block text-xs font-medium text-[var(--text-secondary)]\">\n                    {resourceLabel.singular}\n                  </label>\n                  <Select\n                    value={resourceId}\n                    onChange={onResourceChange}\n                    options={resources.map((r) => ({\n                      value: r.id,\n                      label: r.name,\n                    }))}\n                    placeholder={`Select a ${resourceLabel.singular.toLowerCase()}`}\n                    searchable={resources.length > 15}\n                  />\n                </div>\n              )}\n\n              {noResources && (\n                <p className=\"mx-4 mt-4 rounded-lg bg-[var(--warning-bg)] px-3 py-2 text-xs text-[var(--warning)]\">\n                  No {resourceLabel.plural.toLowerCase()} configured yet. Add\n                  one before booking or blocking time.\n                </p>\n              )}\n\n              <AnimatePresence mode=\"wait\" initial={false}>\n                {mode === 'choose' ? (\n                  <motion.div\n                    key=\"choose\"\n                    initial={reduce ? false : { opacity: 0, x: -8 }}\n                    animate={{ opacity: 1, x: 0 }}\n                    exit={reduce ? undefined : { opacity: 0, x: -8 }}\n                    transition={springs.snappy}\n                    className=\"flex flex-col gap-2 p-4\"\n                  >\n                    <motion.button\n                      onClick={onBook}\n                      disabled={noResources || needsResource}\n                      whileTap={\n                        reduce ? undefined : { scale: PRESS_SCALE_LARGE }\n                      }\n                      transition={springs.snappy}\n                      className=\"flex items-center justify-center gap-2 rounded-xl bg-brand-500 px-4 py-3 text-sm font-medium text-white transition-colors hover:bg-brand-600 disabled:cursor-not-allowed disabled:opacity-50\"\n                    >\n                      <CalendarPlus className=\"h-[15px] w-[15px]\" />\n                      Book this time\n                    </motion.button>\n                    <Button\n                      variant=\"secondary\"\n                      onClick={() => setMode('block')}\n                      disabled={noResources}\n                    >\n                      <Ban />\n                      Block it instead\n                    </Button>\n                  </motion.div>\n                ) : (\n                  <motion.div\n                    key=\"block\"\n                    initial={reduce ? false : { opacity: 0, x: 8 }}\n                    animate={{ opacity: 1, x: 0 }}\n                    exit={reduce ? undefined : { opacity: 0, x: 8 }}\n                    transition={springs.snappy}\n                    className=\"p-4\"\n                  >\n                    <label className=\"mb-2 block text-xs font-medium text-[var(--text-secondary)]\">\n                      Reason{' '}\n                      <span className=\"text-[var(--text-tertiary)]\">\n                        (optional)\n                      </span>\n                    </label>\n                    <Input\n                      type=\"text\"\n                      value={reason}\n                      autoFocus\n                      onChange={(e) => setReason(e.target.value)}\n                      placeholder=\"Lunch break, maintenance, staff training\"\n                      className=\"w-full\"\n                    />\n                    <p className=\"mt-2 text-xs text-[var(--text-tertiary)]\">\n                      Blocked time stops new bookings from landing here.\n                    </p>\n                    <div className=\"mt-4 flex gap-2\">\n                      <Button\n                        variant=\"secondary\"\n                        className=\"flex-1\"\n                        onClick={() => setMode('choose')}\n                      >\n                        Back\n                      </Button>\n                      <motion.button\n                        onClick={() => onBlock(reason)}\n                        disabled={blocking || resourcesLoading || needsResource}\n                        whileTap={\n                          reduce ? undefined : { scale: PRESS_SCALE_LARGE }\n                        }\n                        transition={springs.snappy}\n                        className=\"flex-1 rounded-xl bg-[var(--text-primary)] px-4 py-3 text-sm font-medium text-[var(--bg-base)] disabled:opacity-50\"\n                      >\n                        {blocking ? (\n                          <Loader2 className=\"mx-auto size-4 animate-spin\" />\n                        ) : (\n                          'Block time'\n                        )}\n                      </motion.button>\n                    </div>\n                  </motion.div>\n                )}\n              </AnimatePresence>\n            </motion.div>\n          </div>\n        </>\n      )}\n    </AnimatePresence>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/dashboard/(bookings)/calendar/_components/use-block-drag.js

@@ -0,0 +1,77 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+const SNAP_MINUTES = 15;
+function shiftTime(iso, minutes) {
+  const d = new Date(new Date(iso).getTime() + minutes * 6e4);
+  return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
+}
+function useBlockDrag({
+  resources,
+  gridHeight,
+  hourPx,
+  onMoveEvent
+}) {
+  const [moving, setMoving] = useState(null);
+  const [dragging, setDragging] = useState(null);
+  const columnRefs = useRef(/* @__PURE__ */ new Map());
+  const dragged = useRef(false);
+  useEffect(() => {
+    if (!dragging) return;
+    const previous = document.body.style.cursor;
+    document.body.style.cursor = "grabbing";
+    return () => {
+      document.body.style.cursor = previous;
+    };
+  }, [dragging]);
+  const startDrag = (id) => {
+    dragged.current = true;
+    setDragging(id);
+  };
+  const canMove = (e) => Boolean(onMoveEvent) && e.type !== "block" && e.type !== "synced";
+  const handleDrop = async (e, offset, dropX, top, height) => {
+    setDragging(null);
+    setTimeout(() => {
+      dragged.current = false;
+    }, 0);
+    if (!onMoveEvent) return;
+    const stepPx = hourPx / 60 * SNAP_MINUTES;
+    let snapped = Math.round(offset.y / stepPx) * stepPx;
+    snapped = Math.max(-top, Math.min(snapped, gridHeight - top - height));
+    let target = null;
+    for (const r of resources) {
+      const el = columnRefs.current.get(r.id);
+      if (!el) continue;
+      const rect = el.getBoundingClientRect();
+      if (dropX >= rect.left && dropX <= rect.right) {
+        target = { id: r.id, name: r.name };
+        break;
+      }
+    }
+    const movedColumn = target != null && target.id !== e.resourceId;
+    if (snapped === 0 && !movedColumn) return;
+    const deltaMinutes = Math.round(snapped / hourPx * 60);
+    const start = shiftTime(e.start, deltaMinutes);
+    const end = shiftTime(e.end, deltaMinutes);
+    setMoving({ id: e.id, dx: movedColumn ? offset.x : 0, dy: snapped });
+    const kept = await onMoveEvent(e, {
+      startTime: start,
+      endTime: end,
+      ...movedColumn && target ? { resourceId: target.id, resourceName: target.name } : {}
+    });
+    setMoving(null);
+    if (kept) return;
+  };
+  return {
+    moving,
+    dragging,
+    dragged,
+    columnRefs,
+    canMove,
+    startDrag,
+    handleDrop
+  };
+}
+export {
+  useBlockDrag
+};
+//# sourceMappingURL=use-block-drag.js.map

package/dist/dashboard/(bookings)/calendar/_components/use-block-drag.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/dashboard/%28bookings%29/calendar/_components/use-block-drag.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\nimport type { CalendarEventItem, ResourceItem } from '@withpotter/lib/api/types';\n\n/** The unit a diary is kept in, and what a drag snaps to. */\nconst SNAP_MINUTES = 15;\n\n/** An ISO timestamp, moved by minutes, as `HH:MM` local. */\nfunction shiftTime(iso: string, minutes: number) {\n  const d = new Date(new Date(iso).getTime() + minutes * 60_000);\n  return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;\n}\n\nexport type MoveEvent = (\n  event: CalendarEventItem,\n  next: {\n    startTime: string;\n    endTime: string;\n    /** Set when the block was dropped in a different column. */\n    resourceId?: string;\n    resourceName?: string;\n  },\n) => Promise<boolean>;\n\n/**\n * Dragging a booking to another time, or another person's day.\n *\n * The grid draws; this decides what a drop MEANS. Kept apart from the markup\n * because the two are read for different reasons — one is \"what does the board\n * look like\", the other is \"what happens when I let go\" — and together they put\n * the day grid over the house's 500-line limit.\n */\nexport function useBlockDrag({\n  resources,\n  gridHeight,\n  hourPx,\n  onMoveEvent,\n}: {\n  resources: ResourceItem[];\n  gridHeight: number;\n  hourPx: number;\n  onMoveEvent?: MoveEvent;\n}) {\n  /**\n   * A booking being moved, and where it was dropped.\n   *\n   * Held here rather than snapped straight back, because the confirmation is\n   * about the thing you just did: the block stays under your cursor while the\n   * dialog asks, and only travels back if the answer is no. `offset` is in\n   * pixels so the block can be animated home on the same axis it came down.\n   */\n  const [moving, setMoving] = useState<{\n    id: string;\n    dx: number;\n    dy: number;\n  } | null>(null);\n  /** The block under the hand right now, so its column can be lifted above the\n   *  others and the page can wear the grabbing cursor. */\n  const [dragging, setDragging] = useState<string | null>(null);\n  /** Column element per resource, for working out where a drop landed. */\n  const columnRefs = useRef(new Map<string, HTMLElement | null>());\n  /* A drag ends with a click event the browser fires anyway. Without this the\n     block you just moved also opens its detail panel. */\n  const dragged = useRef(false);\n\n  /**\n   * THE WHOLE PAGE HOLDS IT.\n   *\n   * `cursor-grab active:cursor-grabbing` on the block is not enough: the moment\n   * the pointer leaves the block's own box — which is immediately, because the\n   * block is travelling under it — the cursor reverts to the arrow and the drag\n   * stops looking like a drag. The grabbing hand belongs to the document while\n   * a drag is live, which is what every editor does.\n   */\n  useEffect(() => {\n    if (!dragging) return;\n    const previous = document.body.style.cursor;\n    document.body.style.cursor = 'grabbing';\n    return () => {\n      document.body.style.cursor = previous;\n    };\n  }, [dragging]);\n\n  /**\n   * A drag begins: the block is under the hand, and the click the browser will\n   * fire at the end of it is already spoken for.\n   *\n   * Both flags together, because `handleDrop` clears both together. Split\n   * across the grid and this hook, the setting half went missing — the grid\n   * reached for a `setDragging` that was never handed to it.\n   */\n  const startDrag = (id: string) => {\n    dragged.current = true;\n    setDragging(id);\n  };\n\n  /** Whose time can be moved by dragging it. */\n  const canMove = (e: CalendarEventItem) =>\n    Boolean(onMoveEvent) && e.type !== 'block' && e.type !== 'synced';\n\n  /**\n   * Where a drop lands, and what it means.\n   *\n   * SNAPPED TO A QUARTER HOUR. Pixel-accurate dragging on a 60px hour would\n   * book somebody in at 10:07, and no desk in the world says that. Fifteen\n   * minutes is the unit a diary is kept in, and it makes the block visibly\n   * click into place as you let go.\n   *\n   * The block is left where it landed while `onMoveEvent` asks the question,\n   * and travels home on the house spring if the answer is no.\n   */\n  const handleDrop = async (\n    e: CalendarEventItem,\n    offset: { x: number; y: number },\n    dropX: number,\n    top: number,\n    height: number,\n  ) => {\n    /* The click the browser fires after a drag is suppressed by this flag; it\n       is released a frame later so a real click still opens the detail. */\n    setDragging(null);\n    setTimeout(() => {\n      dragged.current = false;\n    }, 0);\n    if (!onMoveEvent) return;\n\n    const stepPx = (hourPx / 60) * SNAP_MINUTES;\n    let snapped = Math.round(offset.y / stepPx) * stepPx;\n    // Never off the board: the day ends where the grid ends.\n    snapped = Math.max(-top, Math.min(snapped, gridHeight - top - height));\n\n    /**\n     * WHICH COLUMN IT LANDED IN, which is to say WHOSE DAY it is now.\n     *\n     * Dragging sideways is the other half of what a desk does with a diary —\n     * \"give that one to Ìtura\" — and it was the half the first pass left out.\n     * The target is read from the pointer's own x against the columns' boxes\n     * rather than from arithmetic on widths, because the board scrolls\n     * horizontally and its columns are `minmax`, so their widths are not known\n     * here.\n     */\n    let target: { id: string; name: string } | null = null;\n    for (const r of resources) {\n      const el = columnRefs.current.get(r.id);\n      if (!el) continue;\n      const rect = el.getBoundingClientRect();\n      if (dropX >= rect.left && dropX <= rect.right) {\n        target = { id: r.id, name: r.name };\n        break;\n      }\n    }\n    const movedColumn = target != null && target.id !== e.resourceId;\n    if (snapped === 0 && !movedColumn) return;\n\n    const deltaMinutes = Math.round((snapped / hourPx) * 60);\n    const start = shiftTime(e.start, deltaMinutes);\n    const end = shiftTime(e.end, deltaMinutes);\n\n    setMoving({ id: e.id, dx: movedColumn ? offset.x : 0, dy: snapped });\n    const kept = await onMoveEvent(e, {\n      startTime: start,\n      endTime: end,\n      ...(movedColumn && target\n        ? { resourceId: target.id, resourceName: target.name }\n        : {}),\n    });\n    setMoving(null);\n    if (kept) return;\n    /* Nothing else to do on a refusal: clearing `moving` animates the block\n       back down its own axes, which is the revert. */\n  };\n\n  return {\n    moving,\n    dragging,\n    dragged,\n    columnRefs,\n    canMove,\n    startDrag,\n    handleDrop,\n  };\n}\n"],"mappings":";AAEA,SAAS,WAAW,QAAQ,gBAAgB;AAI5C,MAAM,eAAe;AAGrB,SAAS,UAAU,KAAa,SAAiB;AAC/C,QAAM,IAAI,IAAI,KAAK,IAAI,KAAK,GAAG,EAAE,QAAQ,IAAI,UAAU,GAAM;AAC7D,SAAO,GAAG,OAAO,EAAE,SAAS,CAAC,EAAE,SAAS,GAAG,GAAG,CAAC,IAAI,OAAO,EAAE,WAAW,CAAC,EAAE,SAAS,GAAG,GAAG,CAAC;AAC5F;AAqBO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AASD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAIlB,IAAI;AAGd,QAAM,CAAC,UAAU,WAAW,IAAI,SAAwB,IAAI;AAE5D,QAAM,aAAa,OAAO,oBAAI,IAAgC,CAAC;AAG/D,QAAM,UAAU,OAAO,KAAK;AAW5B,YAAU,MAAM;AACd,QAAI,CAAC,SAAU;AACf,UAAM,WAAW,SAAS,KAAK,MAAM;AACrC,aAAS,KAAK,MAAM,SAAS;AAC7B,WAAO,MAAM;AACX,eAAS,KAAK,MAAM,SAAS;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAUb,QAAM,YAAY,CAAC,OAAe;AAChC,YAAQ,UAAU;AAClB,gBAAY,EAAE;AAAA,EAChB;AAGA,QAAM,UAAU,CAAC,MACf,QAAQ,WAAW,KAAK,EAAE,SAAS,WAAW,EAAE,SAAS;AAa3D,QAAM,aAAa,OACjB,GACA,QACA,OACA,KACA,WACG;AAGH,gBAAY,IAAI;AAChB,eAAW,MAAM;AACf,cAAQ,UAAU;AAAA,IACpB,GAAG,CAAC;AACJ,QAAI,CAAC,YAAa;AAElB,UAAM,SAAU,SAAS,KAAM;AAC/B,QAAI,UAAU,KAAK,MAAM,OAAO,IAAI,MAAM,IAAI;AAE9C,cAAU,KAAK,IAAI,CAAC,KAAK,KAAK,IAAI,SAAS,aAAa,MAAM,MAAM,CAAC;AAYrE,QAAI,SAA8C;AAClD,eAAW,KAAK,WAAW;AACzB,YAAM,KAAK,WAAW,QAAQ,IAAI,EAAE,EAAE;AACtC,UAAI,CAAC,GAAI;AACT,YAAM,OAAO,GAAG,sBAAsB;AACtC,UAAI,SAAS,KAAK,QAAQ,SAAS,KAAK,OAAO;AAC7C,iBAAS,EAAE,IAAI,EAAE,IAAI,MAAM,EAAE,KAAK;AAClC;AAAA,MACF;AAAA,IACF;AACA,UAAM,cAAc,UAAU,QAAQ,OAAO,OAAO,EAAE;AACtD,QAAI,YAAY,KAAK,CAAC,YAAa;AAEnC,UAAM,eAAe,KAAK,MAAO,UAAU,SAAU,EAAE;AACvD,UAAM,QAAQ,UAAU,EAAE,OAAO,YAAY;AAC7C,UAAM,MAAM,UAAU,EAAE,KAAK,YAAY;AAEzC,cAAU,EAAE,IAAI,EAAE,IAAI,IAAI,cAAc,OAAO,IAAI,GAAG,IAAI,QAAQ,CAAC;AACnE,UAAM,OAAO,MAAM,YAAY,GAAG;AAAA,MAChC,WAAW;AAAA,MACX,SAAS;AAAA,MACT,GAAI,eAAe,SACf,EAAE,YAAY,OAAO,IAAI,cAAc,OAAO,KAAK,IACnD,CAAC;AAAA,IACP,CAAC;AACD,cAAU,IAAI;AACd,QAAI,KAAM;AAAA,EAGZ;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/dashboard/(bookings)/calendar/_components/use-calendar-nav.js

@@ -0,0 +1,69 @@
+"use client";
+import { useMemo, useState } from "react";
+import {
+  toISODate,
+  addDays,
+  addMonths,
+  addYears,
+  weekOf,
+  parseISO
+} from "./calendar-range";
+function useCalendarNav() {
+  const [date, setDate] = useState(() => toISODate(/* @__PURE__ */ new Date()));
+  const [range, setRange] = useState("day");
+  const [direction, setDirection] = useState(0);
+  const step = (n) => {
+    setDirection(n);
+    setDate(
+      (d) => range === "day" ? addDays(d, n) : range === "week" ? addDays(d, n * 7) : range === "month" ? addMonths(d, n) : addYears(d, n)
+    );
+  };
+  const openDay = (d) => {
+    setDirection(d > date ? 1 : -1);
+    setDate(d);
+    setRange("day");
+  };
+  const periodLabel = useMemo(() => {
+    const d = parseISO(date);
+    if (range === "day")
+      return d.toLocaleDateString("en-US", { month: "long", year: "numeric" });
+    if (range === "week") {
+      const w = weekOf(date);
+      const a = parseISO(w[0]);
+      const b = parseISO(w[6]);
+      const sameMonth = a.getMonth() === b.getMonth();
+      return `${a.toLocaleDateString("en-US", { month: "short", day: "numeric" })} to ${b.toLocaleDateString(
+        "en-US",
+        sameMonth ? { day: "numeric" } : { month: "short", day: "numeric" }
+      )}`;
+    }
+    if (range === "month")
+      return d.toLocaleDateString("en-US", { month: "long", year: "numeric" });
+    return String(d.getFullYear());
+  }, [date, range]);
+  const today = toISODate(/* @__PURE__ */ new Date());
+  const atNow = useMemo(() => {
+    if (range === "day") return date === today;
+    if (range === "week") return weekOf(date).includes(today);
+    const a = parseISO(date);
+    const b = parseISO(today);
+    if (range === "month")
+      return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+    return a.getFullYear() === b.getFullYear();
+  }, [range, date, today]);
+  return {
+    date,
+    range,
+    direction,
+    today,
+    periodLabel,
+    atNow,
+    setRange,
+    step,
+    openDay
+  };
+}
+export {
+  useCalendarNav
+};
+//# sourceMappingURL=use-calendar-nav.js.map

package/dist/dashboard/(bookings)/calendar/_components/use-calendar-nav.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/dashboard/%28bookings%29/calendar/_components/use-calendar-nav.ts"],"sourcesContent":["'use client';\n\nimport { useMemo, useState } from 'react';\nimport {\n  toISODate,\n  addDays,\n  addMonths,\n  addYears,\n  weekOf,\n  parseISO,\n  type CalendarRange,\n} from './calendar-range';\n\nexport interface CalendarNav {\n  date: string;\n  range: CalendarRange;\n  /** -1 or 1: which way the last move went, so the board slides that way. */\n  direction: number;\n  /** Today, as an ISO date, for \"am I on it\" and for the Today control. */\n  today: string;\n  /** Where you are, in the units the active range is measured in. */\n  periodLabel: string;\n  /** Whether the period on screen is the one containing today. */\n  atNow: boolean;\n  setRange: (range: CalendarRange) => void;\n  /** Move one unit of the active range. */\n  step: (n: number) => void;\n  /** Jump to a date and read it as a day. */\n  openDay: (date: string) => void;\n}\n\n/**\n * Where the calendar is pointed, held outside the board that draws it.\n *\n * The range switch, the arrows and Today used to sit in a row of their own\n * INSIDE the board, under a `Monday, August 24` heading — so the page carried\n * two control rows stacked eight pixels apart, one of them repeating the date\n * the strip beneath it was already showing in bold. The controls belong on the\n * page's own header row, beside the Today/List/Calendar switch, because they\n * are the same kind of decision: which cut of the same bookings you are looking\n * at.\n *\n * That means the state has to live above both. It is a hook rather than a\n * context because there is exactly one consumer pair — the header group and the\n * board — and a provider for two siblings is ceremony.\n */\nexport function useCalendarNav(): CalendarNav {\n  const [date, setDate] = useState(() => toISODate(new Date()));\n  const [range, setRange] = useState<CalendarRange>('day');\n  const [direction, setDirection] = useState(0);\n\n  const step = (n: number) => {\n    setDirection(n);\n    setDate((d) =>\n      range === 'day'\n        ? addDays(d, n)\n        : range === 'week'\n          ? addDays(d, n * 7)\n          : range === 'month'\n            ? addMonths(d, n)\n            : addYears(d, n),\n    );\n  };\n\n  const openDay = (d: string) => {\n    setDirection(d > date ? 1 : -1);\n    setDate(d);\n    setRange('day');\n  };\n\n  /**\n   * In DAY range this says the month, not the day.\n   *\n   * It used to read \"Monday, August 24\" above a strip whose selected box says\n   * MON 24 in brand blue — the same fact twice, and the larger, louder copy of\n   * it was the one carrying no extra information. The month is the part the\n   * strip cannot tell you, so the month is what is left.\n   */\n  const periodLabel = useMemo(() => {\n    const d = parseISO(date);\n    if (range === 'day')\n      return d.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });\n    if (range === 'week') {\n      const w = weekOf(date);\n      const a = parseISO(w[0]);\n      const b = parseISO(w[6]);\n      const sameMonth = a.getMonth() === b.getMonth();\n      return `${a.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })} to ${b.toLocaleDateString(\n        'en-US',\n        sameMonth ? { day: 'numeric' } : { month: 'short', day: 'numeric' },\n      )}`;\n    }\n    if (range === 'month')\n      return d.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });\n    return String(d.getFullYear());\n  }, [date, range]);\n\n  /**\n   * Is today inside what is drawn?\n   *\n   * The control that jumps back to now only earns its place when there is\n   * somewhere to jump back FROM — see `CalendarNav`, where this decides whether\n   * the period label is a button or a fact.\n   */\n  const today = toISODate(new Date());\n  const atNow = useMemo(() => {\n    if (range === 'day') return date === today;\n    if (range === 'week') return weekOf(date).includes(today);\n    const a = parseISO(date);\n    const b = parseISO(today);\n    if (range === 'month')\n      return (\n        a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth()\n      );\n    return a.getFullYear() === b.getFullYear();\n  }, [range, date, today]);\n\n  return {\n    date,\n    range,\n    direction,\n    today,\n    periodLabel,\n    atNow,\n    setRange,\n    step,\n    openDay,\n  };\n}\n"],"mappings":";AAEA,SAAS,SAAS,gBAAgB;AAClC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAmCA,SAAS,iBAA8B;AAC5C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,MAAM,UAAU,oBAAI,KAAK,CAAC,CAAC;AAC5D,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,KAAK;AACvD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,CAAC;AAE5C,QAAM,OAAO,CAAC,MAAc;AAC1B,iBAAa,CAAC;AACd;AAAA,MAAQ,CAAC,MACP,UAAU,QACN,QAAQ,GAAG,CAAC,IACZ,UAAU,SACR,QAAQ,GAAG,IAAI,CAAC,IAChB,UAAU,UACR,UAAU,GAAG,CAAC,IACd,SAAS,GAAG,CAAC;AAAA,IACvB;AAAA,EACF;AAEA,QAAM,UAAU,CAAC,MAAc;AAC7B,iBAAa,IAAI,OAAO,IAAI,EAAE;AAC9B,YAAQ,CAAC;AACT,aAAS,KAAK;AAAA,EAChB;AAUA,QAAM,cAAc,QAAQ,MAAM;AAChC,UAAM,IAAI,SAAS,IAAI;AACvB,QAAI,UAAU;AACZ,aAAO,EAAE,mBAAmB,SAAS,EAAE,OAAO,QAAQ,MAAM,UAAU,CAAC;AACzE,QAAI,UAAU,QAAQ;AACpB,YAAM,IAAI,OAAO,IAAI;AACrB,YAAM,IAAI,SAAS,EAAE,CAAC,CAAC;AACvB,YAAM,IAAI,SAAS,EAAE,CAAC,CAAC;AACvB,YAAM,YAAY,EAAE,SAAS,MAAM,EAAE,SAAS;AAC9C,aAAO,GAAG,EAAE,mBAAmB,SAAS,EAAE,OAAO,SAAS,KAAK,UAAU,CAAC,CAAC,OAAO,EAAE;AAAA,QAClF;AAAA,QACA,YAAY,EAAE,KAAK,UAAU,IAAI,EAAE,OAAO,SAAS,KAAK,UAAU;AAAA,MACpE,CAAC;AAAA,IACH;AACA,QAAI,UAAU;AACZ,aAAO,EAAE,mBAAmB,SAAS,EAAE,OAAO,QAAQ,MAAM,UAAU,CAAC;AACzE,WAAO,OAAO,EAAE,YAAY,CAAC;AAAA,EAC/B,GAAG,CAAC,MAAM,KAAK,CAAC;AAShB,QAAM,QAAQ,UAAU,oBAAI,KAAK,CAAC;AAClC,QAAM,QAAQ,QAAQ,MAAM;AAC1B,QAAI,UAAU,MAAO,QAAO,SAAS;AACrC,QAAI,UAAU,OAAQ,QAAO,OAAO,IAAI,EAAE,SAAS,KAAK;AACxD,UAAM,IAAI,SAAS,IAAI;AACvB,UAAM,IAAI,SAAS,KAAK;AACxB,QAAI,UAAU;AACZ,aACE,EAAE,YAAY,MAAM,EAAE,YAAY,KAAK,EAAE,SAAS,MAAM,EAAE,SAAS;AAEvE,WAAO,EAAE,YAAY,MAAM,EAAE,YAAY;AAAA,EAC3C,GAAG,CAAC,OAAO,MAAM,KAAK,CAAC;AAEvB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/dashboard/(bookings)/calendar/_components/week-grid.js

@@ -0,0 +1,202 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { motion, useReducedMotion } from "motion/react";
+import { Plus } from "lucide-react";
+import { springs, eases, PRESS_SCALE_LARGE } from "@withpotter/lib/motion";
+import { cn } from "@withpotter/lib/utils";
+import { weekOf, parseISO, toISODate } from "./calendar-range";
+const HOUR_PX = 48;
+function clockLabel(h) {
+  const suffix = h >= 12 ? "pm" : "am";
+  const hour = h % 12 === 0 ? 12 : h % 12;
+  return `${hour}${suffix}`;
+}
+function hourOf(iso) {
+  const d = new Date(iso);
+  return d.getHours() + d.getMinutes() / 60;
+}
+function WeekGrid({
+  anchor,
+  events,
+  openHour = 8,
+  closeHour = 20,
+  onBookSlot,
+  onSelectEvent,
+  onOpenDay
+}) {
+  const reduce = useReducedMotion();
+  const days = useMemo(() => weekOf(anchor), [anchor]);
+  const hours = useMemo(() => {
+    const out = [];
+    for (let h = openHour; h < closeHour; h += 1) out.push(h);
+    return out;
+  }, [openHour, closeHour]);
+  const byDay = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const d of days) map.set(d, []);
+    for (const e of events) {
+      if (e.isAllDay) continue;
+      const d = e.start.slice(0, 10);
+      if (map.has(d)) map.get(d).push(e);
+    }
+    return map;
+  }, [events, days]);
+  const gridHeight = hours.length * HOUR_PX;
+  const today = toISODate(/* @__PURE__ */ new Date());
+  const col = {
+    hidden: {},
+    shown: { transition: { staggerChildren: reduce ? 0 : 0.02 } }
+  };
+  const blockV = {
+    hidden: reduce ? {} : { opacity: 0, y: 6 },
+    shown: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: 0.22, ease: eases.settle }
+    }
+  };
+  return (
+    /* ONE GREY ACROSS THE CALENDAR. The day board is `surface`, the house card
+       fill; this drew itself on `--bg-elevated` and the month and year grids on
+       something else again, so stepping Day → Week changed the colour of the
+       board under you. */
+    /* @__PURE__ */ jsx("div", { className: "surface overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "max-h-[calc(100dvh-15rem)] overflow-auto", children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "grid min-w-max",
+        style: { gridTemplateColumns: `56px repeat(7, minmax(130px, 1fr))` },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "sticky left-0 top-0 z-40 border-b border-r border-[var(--border-default)] bg-[var(--card-bg)]" }),
+          days.map((d) => {
+            const dt = parseISO(d);
+            return (
+              /* A HEADER CELL, not a button in a box. `Button variant="secondary"`
+               gave each day its own border and radius, so the header read as
+               seven pills floating over a grid whose columns they were supposed
+               to be labelling — and the pill's edges did not line up with the
+               column edges below them. It is still pressable; it just looks
+               like what it is. */
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: "sticky top-0 z-30 flex flex-col items-start border-b border-r border-[var(--border-default)] bg-[var(--card-bg)] px-3 py-2 text-left transition-colors last:border-r-0 hover:bg-[var(--interactive-hover)]",
+                  onClick: () => onOpenDay(d),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "block text-3xs uppercase tracking-wide text-[var(--text-muted)]", children: dt.toLocaleDateString("en-US", { weekday: "short" }) }),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "block text-lg font-semibold tabular-nums",
+                          d === today ? "text-brand-500" : "text-[var(--text-primary)]"
+                        ),
+                        children: dt.getDate()
+                      }
+                    )
+                  ]
+                },
+                d
+              )
+            );
+          }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "sticky left-0 z-20 border-r border-[var(--border-subtle)] bg-[var(--card-bg)]",
+              style: { height: gridHeight },
+              children: hours.map((h) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "relative border-b border-[var(--border-subtle)] last:border-b-0",
+                  style: { height: HOUR_PX },
+                  children: /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "absolute right-2 text-2xs tabular-nums text-[var(--text-muted)]",
+                        h === hours[0] ? "top-1" : "-top-2"
+                      ),
+                      children: clockLabel(h)
+                    }
+                  )
+                },
+                h
+              ))
+            }
+          ),
+          days.map((d) => /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              variants: col,
+              initial: "hidden",
+              animate: "shown",
+              className: "relative border-r border-[var(--border-subtle)] last:border-r-0",
+              style: { height: gridHeight },
+              children: [
+                hours.map((h) => /* @__PURE__ */ jsx(
+                  motion.button,
+                  {
+                    type: "button",
+                    "aria-label": `Book ${clockLabel(h)}`,
+                    onClick: () => onBookSlot(
+                      d,
+                      `${String(h).padStart(2, "0")}:00`,
+                      `${String(h + 1).padStart(2, "0")}:00`
+                    ),
+                    whileHover: reduce ? void 0 : { scale: 1.02 },
+                    whileTap: reduce ? void 0 : { scale: PRESS_SCALE_LARGE },
+                    transition: springs.snappy,
+                    className: "group absolute inset-x-1 flex items-center justify-center rounded-md border border-transparent transition-colors duration-[var(--motion-fast)] hover:border-brand-500/30 hover:bg-brand-500/[0.06]",
+                    style: {
+                      top: (h - openHour) * HOUR_PX + 1,
+                      height: HOUR_PX - 2
+                    },
+                    children: /* @__PURE__ */ jsx(Plus, { className: "text-brand-500 opacity-0 transition-opacity duration-[var(--motion-fast)] group-hover:opacity-100" })
+                  },
+                  h
+                )),
+                (byDay.get(d) ?? []).map((e) => {
+                  const top = (hourOf(e.start) - openHour) * HOUR_PX;
+                  const height = Math.max(
+                    (hourOf(e.end) - hourOf(e.start)) * HOUR_PX,
+                    20
+                  );
+                  if (top + height < 0 || top > gridHeight) return null;
+                  const isBlock = e.type === "block";
+                  return /* @__PURE__ */ jsx(
+                    motion.button,
+                    {
+                      type: "button",
+                      variants: blockV,
+                      onClick: () => onSelectEvent(e),
+                      whileHover: reduce ? void 0 : { scale: 1.01 },
+                      transition: springs.snappy,
+                      className: cn(
+                        "absolute inset-x-1 z-10 overflow-hidden rounded-md px-2 py-1 text-left",
+                        isBlock ? "border border-dashed border-[var(--warning)]/40 bg-[var(--warning-bg)] text-[var(--warning)]" : e.type === "synced" ? "border border-[var(--border-default)] bg-[var(--bg-muted)] text-[var(--text-secondary)]" : "bg-brand-500/[0.16] text-[var(--text-primary)] ring-1 ring-inset ring-brand-500/30"
+                      ),
+                      style: {
+                        top,
+                        height,
+                        boxShadow: isBlock || e.type === "synced" ? void 0 : "var(--shadow-md)"
+                      },
+                      children: /* @__PURE__ */ jsx("span", { className: "block truncate text-2xs font-medium", children: e.customerName || e.title })
+                    },
+                    e.id
+                  );
+                })
+              ]
+            },
+            d
+          ))
+        ]
+      }
+    ) }) })
+  );
+}
+export {
+  WeekGrid
+};
+//# sourceMappingURL=week-grid.js.map