@multicomma/arkcn 0.1.2 → 0.1.3

package/registry/items/scheduler.json

@@ -34,6 +34,1018 @@
     "layoutLanes",
     "visibleRange"
   ],
+  "parts": [
+    {
+      "name": "Scheduler",
+      "props": [
+        {
+          "name": "date",
+          "type": "Date",
+          "required": false,
+          "description": "The date this part represents.",
+          "from": "arkcn"
+        },
+        {
+          "name": "defaultDate",
+          "type": "Date",
+          "required": false,
+          "description": "Initial anchor date when uncontrolled.",
+          "from": "arkcn"
+        },
+        {
+          "name": "defaultView",
+          "type": "SchedulerView",
+          "required": false,
+          "default": "\"week\"",
+          "description": "Initial view when uncontrolled.",
+          "from": "arkcn"
+        },
+        {
+          "name": "editable",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Allow editing.",
+          "from": "arkcn"
+        },
+        {
+          "name": "hourHeight",
+          "type": "number",
+          "required": false,
+          "default": "56",
+          "description": "Pixels per hour in the time grid.",
+          "from": "arkcn"
+        },
+        {
+          "name": "maxHour",
+          "type": "number",
+          "required": false,
+          "default": "24",
+          "description": "Last hour shown in the time grid.",
+          "from": "arkcn"
+        },
+        {
+          "name": "minHour",
+          "type": "number",
+          "required": false,
+          "default": "0",
+          "description": "First hour shown in the time grid.",
+          "from": "arkcn"
+        },
+        {
+          "name": "onCreate",
+          "type": "((range: { start: Date; end: Date; allDay?: boolean | undefined; }) => void)",
+          "required": false,
+          "description": "Drag on empty time (or a month cell click) proposes a new event.",
+          "from": "arkcn"
+        },
+        {
+          "name": "onDateChange",
+          "type": "((date: Date) => void)",
+          "required": false,
+          "description": "Called when the anchor date changes.",
+          "from": "arkcn"
+        },
+        {
+          "name": "onEventChange",
+          "type": "((change: SchedulerEventChange) => void)",
+          "required": false,
+          "description": "Called with `{ id, start, end }` snapped to `slotMinutes` after a move, resize, or keyboard change.",
+          "from": "arkcn"
+        },
+        {
+          "name": "onViewChange",
+          "type": "((view: SchedulerView) => void)",
+          "required": false,
+          "description": "Called when the view changes.",
+          "from": "arkcn"
+        },
+        {
+          "name": "slotMinutes",
+          "type": "number",
+          "required": false,
+          "default": "15",
+          "description": "Snap and keyboard step in minutes.",
+          "from": "arkcn"
+        },
+        {
+          "name": "view",
+          "type": "SchedulerView",
+          "required": false,
+          "description": "Controlled view: `day`, `week`, or `month`.",
+          "from": "arkcn"
+        },
+        {
+          "name": "weekStartsOn",
+          "type": "0 | 1 | 2 | 3 | 4 | 5 | 6",
+          "required": false,
+          "default": "1",
+          "description": "First day of the week, 0 for Sunday.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "SchedulerToolbar",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "SchedulerPrevTrigger",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Render the child element instead of the default one, merging props and behaviour onto it.",
+          "from": "arkcn"
+        },
+        {
+          "name": "size",
+          "type": "\"default\" | \"xs\" | \"sm\" | \"lg\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\" | null",
+          "required": false,
+          "description": "Size variant; sets a `data-size` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "variant",
+          "type": "\"link\" | \"default\" | \"outline\" | \"secondary\" | \"ghost\" | \"destructive\" | null",
+          "required": false,
+          "description": "Visual variant, styled with `cva`; sets a `data-variant` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "SchedulerNextTrigger",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Render the child element instead of the default one, merging props and behaviour onto it.",
+          "from": "arkcn"
+        },
+        {
+          "name": "size",
+          "type": "\"default\" | \"xs\" | \"sm\" | \"lg\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\" | null",
+          "required": false,
+          "description": "Size variant; sets a `data-size` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "variant",
+          "type": "\"link\" | \"default\" | \"outline\" | \"secondary\" | \"ghost\" | \"destructive\" | null",
+          "required": false,
+          "description": "Visual variant, styled with `cva`; sets a `data-variant` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "SchedulerTodayTrigger",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Render the child element instead of the default one, merging props and behaviour onto it.",
+          "from": "arkcn"
+        },
+        {
+          "name": "size",
+          "type": "\"default\" | \"xs\" | \"sm\" | \"lg\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\" | null",
+          "required": false,
+          "description": "Size variant; sets a `data-size` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "variant",
+          "type": "\"link\" | \"default\" | \"outline\" | \"secondary\" | \"ghost\" | \"destructive\" | null",
+          "required": false,
+          "description": "Visual variant, styled with `cva`; sets a `data-variant` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "SchedulerTitle",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "SchedulerViewSelect",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Use the provided child element as the default rendered element, combining their props and behavior.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "defaultValue",
+          "type": "string | null",
+          "required": false,
+          "description": "The initial value of the checked radio when rendered.\nUse when you don't need to control the value of the radio group.",
+          "from": "@zag-js/radio-group"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "If `true`, the radio group will be disabled",
+          "from": "@zag-js/radio-group"
+        },
+        {
+          "name": "form",
+          "type": "string",
+          "required": false,
+          "description": "The associate form of the underlying input.",
+          "from": "@zag-js/radio-group"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "required": false,
+          "description": "The unique identifier of the machine.",
+          "from": "@zag-js/types"
+        },
+        {
+          "name": "ids",
+          "type": "ElementIds",
+          "required": false,
+          "description": "The ids of the elements in the radio. Useful for composition.",
+          "from": "@zag-js/radio-group"
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "required": false,
+          "description": "If `true`, the radio group is marked as invalid.",
+          "from": "@zag-js/radio-group"
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "required": false,
+          "description": "The name of the input fields in the radio\n(Useful for form submission).",
+          "from": "@zag-js/radio-group"
+        },
+        {
+          "name": "orientation",
+          "type": "\"horizontal\" | \"vertical\"",
+          "required": false,
+          "description": "Orientation of the radio group",
+          "from": "@zag-js/radio-group"
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the radio group is read-only",
+          "from": "@zag-js/radio-group"
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "required": false,
+          "description": "If `true`, the radio group is marked as required.",
+          "from": "@zag-js/radio-group"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "SchedulerTimeGrid",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "SchedulerTimeGridHeader",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "SchedulerDayHeadings",
+      "props": [
+        {
+          "name": "children",
+          "type": "((string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactN…",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "SchedulerAllDayRow",
+      "props": [
+        {
+          "name": "children",
+          "type": "(day: Date) => ReactNode",
+          "required": true,
+          "description": "Content rendered inside the part.",
+          "from": "arkcn"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "SchedulerTimeGridBody",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "SchedulerTimeGutter",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "SchedulerDayColumns",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "SchedulerDayColumn",
+      "props": [
+        {
+          "name": "children",
+          "type": "(event: T) => ReactNode",
+          "required": true,
+          "description": "Content rendered inside the part.",
+          "from": "arkcn"
+        },
+        {
+          "name": "date",
+          "type": "Date",
+          "required": true,
+          "description": "The date this part represents.",
+          "from": "arkcn"
+        },
+        {
+          "name": "events",
+          "type": "T[]",
+          "required": true,
+          "description": "Events shown in this column; overlaps are laid out side by side.",
+          "from": "arkcn"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "SchedulerEvent",
+      "props": [
+        {
+          "name": "end",
+          "type": "Date",
+          "required": true,
+          "description": "Event end.",
+          "from": "arkcn"
+        },
+        {
+          "name": "start",
+          "type": "Date",
+          "required": true,
+          "description": "Event start.",
+          "from": "arkcn"
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "required": true,
+          "description": "The controlled value.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "SchedulerEventTitle",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "SchedulerEventTime",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "SchedulerEventResizeHandle",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "SchedulerCreatePreview",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "SchedulerNowIndicator",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "SchedulerMonthGrid",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "SchedulerMonthHeader",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "SchedulerMonthBody",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "SchedulerMonthCell",
+      "props": [
+        {
+          "name": "date",
+          "type": "Date",
+          "required": true,
+          "description": "The date this part represents.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "SchedulerMonthEvent",
+      "props": [
+        {
+          "name": "end",
+          "type": "Date",
+          "required": true,
+          "description": "Event end.",
+          "from": "arkcn"
+        },
+        {
+          "name": "start",
+          "type": "Date",
+          "required": true,
+          "description": "Event start.",
+          "from": "arkcn"
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "required": true,
+          "description": "The controlled value.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "SchedulerMonthMore",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    }
+  ],
   "dependencies": {
     "date-fns": "^4.4.0",
     "lucide-react": "^1.41.0"
@@ -48,7 +1060,7 @@
   "files": [
     {
       "path": "components/ui/scheduler.tsx",
-      "content": "import * as React from \"react\"\nimport {\n  addDays,\n  addMinutes,\n  addMonths,\n  addWeeks,\n  differenceInCalendarDays,\n  differenceInMinutes,\n  eachDayOfInterval,\n  endOfMonth,\n  endOfWeek,\n  format,\n  isSameDay,\n  isSameMonth,\n  isToday,\n  setHours,\n  setMinutes,\n  startOfDay,\n  startOfMonth,\n  startOfWeek,\n} from \"date-fns\"\nimport { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\"\nimport { Button } from \"@/components/ui/button\"\nimport { SegmentGroup, SegmentGroupIndicator, SegmentGroupItem } from \"@/components/ui/segment-group\"\nimport { cn } from \"@/lib/utils\"\nimport { useControllable } from \"@/lib/controllable\"\nimport { LiveRegion, useLiveRegion } from \"@/components/ui/live-region\"\n\n/**\n * Scheduler — a compositional, data-agnostic calendar. The consumer owns the\n * events and renders them with the parts; the root owns the anchor `date`,\n * the `view` (day/week/month), the time-grid geometry and the interactions:\n * drag to move, drag the bottom edge to resize, drag on empty time to create,\n * keyboard moves. Everything is reported as intents (`onEventChange`,\n * `onCreate`) snapped to `slotMinutes`.\n *\n * Anatomy:\n *   Scheduler { date, view, onEventChange, onCreate }\n *     SchedulerToolbar > SchedulerPrevTrigger / SchedulerTodayTrigger / SchedulerNextTrigger / SchedulerTitle / SchedulerViewSelect\n *     SchedulerTimeGrid (day, week)\n *       SchedulerTimeGridHeader > SchedulerDayHeading date=…   (+ SchedulerAllDayRow)\n *       SchedulerTimeGridBody > SchedulerTimeGutter + SchedulerDayColumn date= events=\n *         children: (event) => <SchedulerEvent value= start= end=> … <SchedulerEventResizeHandle/> </SchedulerEvent>\n *       SchedulerNowIndicator, SchedulerCreatePreview\n *     SchedulerMonthGrid > SchedulerMonthHeader + SchedulerMonthBody > SchedulerMonthCell date= > SchedulerMonthEvent value=…\n *\n * Keyboard on an event: Space/Enter picks up, ↑/↓ move by a slot, ←/→ move a\n * day, Shift+↑/↓ change the end, Escape cancels.\n */\n\ntype SchedulerView = \"day\" | \"week\" | \"month\"\ntype EventLike = { id: string; start: Date; end: Date; allDay?: boolean }\ntype SchedulerEventChange = { id: string; start: Date; end: Date }\ntype Interaction = { id: string; type: \"move\" | \"resize\"; start: Date; end: Date }\ntype CreateState = { start: Date; end: Date } | null\n\ntype SchedulerContextValue = {\n  date: Date\n  setDate: (date: Date) => void\n  view: SchedulerView\n  setView: (view: SchedulerView) => void\n  range: { start: Date; end: Date }\n  days: Date[]\n  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6\n  hourHeight: number\n  slotMinutes: number\n  minHour: number\n  maxHour: number\n  editable: boolean\n  interaction: Interaction | null\n  creating: CreateState\n  grabbed: string | null\n  timeToY: (date: Date) => number\n  yToMinutes: (y: number) => number\n  bodyRef: React.RefObject<HTMLDivElement | null>\n  startMove: (event: EventLike, pointer: React.PointerEvent, columnDates: Date[]) => void\n  startResize: (event: EventLike, pointer: React.PointerEvent) => void\n  startCreate: (day: Date, pointer: React.PointerEvent, columnDates: Date[]) => void\n  startMonthMove: (event: EventLike, pointer: React.PointerEvent) => void\n  grab: (id: string | null) => void\n  cancelGrab: () => void\n  nudge: (event: EventLike, deltaMinutes: number, deltaDays: number, part: \"both\" | \"end\") => void\n  announce: (message: string) => void\n}\n\nconst SchedulerContext = React.createContext<SchedulerContextValue | null>(null)\nfunction useScheduler() {\n  const ctx = React.useContext(SchedulerContext)\n  if (!ctx) throw new Error(\"Scheduler parts must be used within <Scheduler>\")\n  return ctx\n}\n\nconst clamp = (v: number, min: number, max: number) => Math.min(max, Math.max(min, v))\nconst minutesOfDay = (d: Date) => d.getHours() * 60 + d.getMinutes()\nconst withMinutes = (day: Date, minutes: number) => setMinutes(setHours(startOfDay(day), 0), minutes)\n\nfunction visibleRange(date: Date, view: SchedulerView, weekStartsOn: SchedulerContextValue[\"weekStartsOn\"]) {\n  if (view === \"day\") return { start: startOfDay(date), end: startOfDay(date) }\n  if (view === \"week\") return { start: startOfWeek(date, { weekStartsOn }), end: endOfWeek(date, { weekStartsOn }) }\n  return {\n    start: startOfWeek(startOfMonth(date), { weekStartsOn }),\n    end: endOfWeek(endOfMonth(date), { weekStartsOn }),\n  }\n}\n\n/* ---------------------------------------------------------------------------\n * Root\n * ------------------------------------------------------------------------- */\n\nfunction Scheduler({\n  date: dateProp,\n  defaultDate,\n  onDateChange,\n  view: viewProp,\n  defaultView = \"week\",\n  onViewChange,\n  weekStartsOn = 1,\n  hourHeight = 56,\n  slotMinutes = 15,\n  minHour = 0,\n  maxHour = 24,\n  editable = true,\n  onEventChange,\n  onCreate,\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"onChange\"> & {\n  date?: Date\n  defaultDate?: Date\n  onDateChange?: (date: Date) => void\n  view?: SchedulerView\n  defaultView?: SchedulerView\n  onViewChange?: (view: SchedulerView) => void\n  weekStartsOn?: SchedulerContextValue[\"weekStartsOn\"]\n  hourHeight?: number\n  slotMinutes?: number\n  minHour?: number\n  maxHour?: number\n  editable?: boolean\n  onEventChange?: (change: SchedulerEventChange) => void\n  /** Drag on empty time (or a month cell click) proposes a new event. */\n  onCreate?: (range: { start: Date; end: Date; allDay?: boolean }) => void\n}) {\n  const [initialDate] = React.useState(() => startOfDay(defaultDate ?? new Date()))\n  const [date, setDate] = useControllable(dateProp, initialDate, onDateChange)\n  const [view, setView] = useControllable<SchedulerView>(viewProp, defaultView, onViewChange)\n\n  const range = React.useMemo(() => visibleRange(date, view, weekStartsOn), [date, view, weekStartsOn])\n  const days = React.useMemo(() => eachDayOfInterval(range), [range])\n\n  const bodyRef = React.useRef<HTMLDivElement>(null)\n  const minuteHeight = hourHeight / 60\n  const timeToY = React.useCallback(\n    (d: Date) => (minutesOfDay(d) - minHour * 60) * minuteHeight,\n    [minHour, minuteHeight]\n  )\n  const yToMinutes = React.useCallback(\n    (y: number) =>\n      clamp(Math.round((y / minuteHeight + minHour * 60) / slotMinutes) * slotMinutes, minHour * 60, maxHour * 60),\n    [minuteHeight, minHour, maxHour, slotMinutes]\n  )\n\n  const [interaction, setInteraction] = React.useState<Interaction | null>(null)\n  const [creating, setCreating] = React.useState<CreateState>(null)\n  const [grabbed, setGrabbed] = React.useState<string | null>(null)\n  const { message: announcement, announce } = useLiveRegion()\n  const onEventChangeRef = React.useRef(onEventChange)\n  const onCreateRef = React.useRef(onCreate)\n  React.useEffect(() => {\n    onEventChangeRef.current = onEventChange\n    onCreateRef.current = onCreate\n  }, [onEventChange, onCreate])\n  const grabOrigin = React.useRef<SchedulerEventChange | null>(null)\n\n  const track = React.useCallback((onMove: (e: PointerEvent) => void, onUp: (e: PointerEvent) => void) => {\n    const up = (e: PointerEvent) => {\n      window.removeEventListener(\"pointermove\", onMove)\n      window.removeEventListener(\"pointerup\", up)\n      window.removeEventListener(\"pointercancel\", up)\n      onUp(e)\n    }\n    window.addEventListener(\"pointermove\", onMove)\n    window.addEventListener(\"pointerup\", up)\n    window.addEventListener(\"pointercancel\", up)\n  }, [])\n\n  /** Which day column a client x falls in, from the column elements' rects. */\n  const dayAtX = React.useCallback((x: number, columnDates: Date[]) => {\n    const columns = Array.from(bodyRef.current?.querySelectorAll<HTMLElement>(\"[data-slot=scheduler-day-column]\") ?? [])\n    for (const [i, col] of columns.entries()) {\n      const r = col.getBoundingClientRect()\n      if (x >= r.left && x < r.right) return columnDates[i] ?? null\n    }\n    return null\n  }, [])\n\n  const startMove = React.useCallback(\n    (event: EventLike, pointer: React.PointerEvent, columnDates: Date[]) => {\n      if (!editable) return\n      pointer.preventDefault()\n      pointer.stopPropagation()\n      const originY = pointer.clientY\n      const originDay = startOfDay(event.start)\n      let current: Interaction = { id: event.id, type: \"move\", start: event.start, end: event.end }\n      let moved = false\n      setInteraction(current)\n      track(\n        (e) => {\n          const dy = e.clientY - originY\n          const deltaMinutes = Math.round(dy / minuteHeight / slotMinutes) * slotMinutes\n          const day = dayAtX(e.clientX, columnDates) ?? originDay\n          const dayDelta = differenceInCalendarDays(day, originDay)\n          const duration = differenceInMinutes(event.end, event.start)\n          const startMin = clamp(minutesOfDay(event.start) + deltaMinutes, minHour * 60, maxHour * 60 - duration)\n          const start = addDays(withMinutes(originDay, startMin), dayDelta)\n          current = { id: event.id, type: \"move\", start, end: addMinutes(start, duration) }\n          if (Math.abs(dy) > 3 || dayDelta !== 0) moved = true\n          setInteraction(current)\n        },\n        () => {\n          setInteraction(null)\n          if (\n            moved &&\n            (current.start.getTime() !== event.start.getTime() || current.end.getTime() !== event.end.getTime())\n          ) {\n            onEventChangeRef.current?.({ id: event.id, start: current.start, end: current.end })\n          }\n        }\n      )\n    },\n    [editable, track, dayAtX, minuteHeight, slotMinutes, minHour, maxHour]\n  )\n\n  const startResize = React.useCallback(\n    (event: EventLike, pointer: React.PointerEvent) => {\n      if (!editable) return\n      pointer.preventDefault()\n      pointer.stopPropagation()\n      const originY = pointer.clientY\n      let current: Interaction = { id: event.id, type: \"resize\", start: event.start, end: event.end }\n      setInteraction(current)\n      track(\n        (e) => {\n          const deltaMinutes = Math.round((e.clientY - originY) / minuteHeight / slotMinutes) * slotMinutes\n          const endMin = clamp(\n            minutesOfDay(event.end) + deltaMinutes,\n            minutesOfDay(event.start) + slotMinutes,\n            maxHour * 60\n          )\n          current = { ...current, end: withMinutes(event.start, endMin) }\n          setInteraction(current)\n        },\n        () => {\n          setInteraction(null)\n          if (current.end.getTime() !== event.end.getTime()) {\n            onEventChangeRef.current?.({ id: event.id, start: event.start, end: current.end })\n          }\n        }\n      )\n    },\n    [editable, track, minuteHeight, slotMinutes, maxHour]\n  )\n\n  const startCreate = React.useCallback(\n    (day: Date, pointer: React.PointerEvent, columnDates: Date[]) => {\n      if (!editable || !onCreateRef.current) return\n      const column = (pointer.currentTarget as HTMLElement).getBoundingClientRect()\n      const originMin = yToMinutes(pointer.clientY - column.top)\n      let current: NonNullable<CreateState> = {\n        start: withMinutes(day, originMin),\n        end: withMinutes(day, originMin + slotMinutes),\n      }\n      let dragged = false\n      setCreating(current)\n      track(\n        (e) => {\n          const min = yToMinutes(e.clientY - column.top)\n          const targetDay = dayAtX(e.clientX, columnDates) ?? day\n          const a = Math.min(originMin, min)\n          const b = Math.max(originMin, min, a + slotMinutes)\n          current = { start: withMinutes(targetDay, a), end: withMinutes(targetDay, b) }\n          dragged = true\n          setCreating(current)\n        },\n        () => {\n          setCreating(null)\n          onCreateRef.current?.(dragged ? current : { start: current.start, end: addMinutes(current.start, 60) })\n        }\n      )\n    },\n    [editable, track, yToMinutes, slotMinutes, dayAtX]\n  )\n\n  /** Month view: drag a chip onto another cell to shift the event by whole days. */\n  const startMonthMove = React.useCallback(\n    (event: EventLike, pointer: React.PointerEvent) => {\n      if (!editable) return\n      pointer.preventDefault()\n      pointer.stopPropagation()\n      const originDay = startOfDay(event.start)\n      let current: Interaction = { id: event.id, type: \"move\", start: event.start, end: event.end }\n      let moved = false\n      setInteraction(current)\n      const cellAt = (x: number, y: number) =>\n        document.elementFromPoint(x, y)?.closest<HTMLElement>(\"[data-slot=scheduler-month-cell]\")?.dataset.date\n      track(\n        (e) => {\n          const target = cellAt(e.clientX, e.clientY)\n          if (!target) return\n          const delta = differenceInCalendarDays(new Date(target), originDay)\n          current = { ...current, start: addDays(event.start, delta), end: addDays(event.end, delta) }\n          moved = true\n          setInteraction(current)\n        },\n        () => {\n          setInteraction(null)\n          if (moved && current.start.getTime() !== event.start.getTime()) {\n            onEventChangeRef.current?.({ id: event.id, start: current.start, end: current.end })\n          }\n        }\n      )\n    },\n    [editable, track]\n  )\n\n  const grab = React.useCallback(\n    (id: string | null) => {\n      if (id) {\n        setGrabbed(id)\n        announce(\"Picked up. Arrows move; Shift+Up/Down change the end. Space drops, Escape cancels.\")\n      } else {\n        setGrabbed(null)\n        grabOrigin.current = null\n        announce(\"Dropped.\")\n      }\n    },\n    [announce]\n  )\n  const cancelGrab = React.useCallback(() => {\n    if (grabOrigin.current) onEventChangeRef.current?.(grabOrigin.current)\n    setGrabbed(null)\n    grabOrigin.current = null\n    announce(\"Cancelled.\")\n  }, [announce])\n\n  const nudge = React.useCallback(\n    (event: EventLike, deltaMinutes: number, deltaDays: number, part: \"both\" | \"end\") => {\n      if (!grabOrigin.current || grabOrigin.current.id !== event.id) {\n        grabOrigin.current = { id: event.id, start: event.start, end: event.end }\n      }\n      const next =\n        part === \"end\"\n          ? {\n              start: event.start,\n              end: addMinutes(\n                event.end,\n                Math.max(deltaMinutes, slotMinutes - differenceInMinutes(event.end, event.start))\n              ),\n            }\n          : {\n              start: addDays(addMinutes(event.start, deltaMinutes), deltaDays),\n              end: addDays(addMinutes(event.end, deltaMinutes), deltaDays),\n            }\n      onEventChangeRef.current?.({ id: event.id, ...next })\n      announce(`${format(next.start, \"EEE d, p\")} to ${format(next.end, \"p\")}.`)\n    },\n    [announce, slotMinutes]\n  )\n\n  const ctx = React.useMemo<SchedulerContextValue>(\n    () => ({\n      date,\n      setDate,\n      view,\n      setView,\n      range,\n      days,\n      weekStartsOn,\n      hourHeight,\n      slotMinutes,\n      minHour,\n      maxHour,\n      editable,\n      interaction,\n      creating,\n      grabbed,\n      timeToY,\n      yToMinutes,\n      bodyRef,\n      startMove,\n      startResize,\n      startCreate,\n      startMonthMove,\n      grab,\n      cancelGrab,\n      nudge,\n      announce,\n    }),\n    [\n      date,\n      setDate,\n      view,\n      setView,\n      range,\n      days,\n      weekStartsOn,\n      hourHeight,\n      slotMinutes,\n      minHour,\n      maxHour,\n      editable,\n      interaction,\n      creating,\n      grabbed,\n      timeToY,\n      yToMinutes,\n      startMove,\n      startResize,\n      startCreate,\n      startMonthMove,\n      grab,\n      cancelGrab,\n      nudge,\n      announce,\n    ]\n  )\n\n  return (\n    <SchedulerContext.Provider value={ctx}>\n      <div\n        data-slot=\"scheduler\"\n        data-view={view}\n        data-interacting={interaction?.type ?? (creating ? \"create\" : undefined)}\n        className={cn(\"flex min-h-0 flex-1 flex-col gap-3\", className)}\n        {...props}\n      >\n        {children}\n        <LiveRegion data-slot=\"scheduler-live-region\" message={announcement} />\n      </div>\n    </SchedulerContext.Provider>\n  )\n}\n\n/* ---------------------------------------------------------------------------\n * Toolbar\n * ------------------------------------------------------------------------- */\n\nfunction SchedulerToolbar({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"scheduler-toolbar\" className={cn(\"flex flex-wrap items-center gap-2\", className)} {...props} />\n}\n\nfunction shift(date: Date, view: SchedulerView, direction: 1 | -1) {\n  if (view === \"day\") return addDays(date, direction)\n  if (view === \"week\") return addWeeks(date, direction)\n  return addMonths(date, direction)\n}\n\nfunction SchedulerPrevTrigger({ asChild, children, onClick, ...props }: React.ComponentProps<typeof Button>) {\n  const { date, view, setDate } = useScheduler()\n  return (\n    <Button\n      data-slot=\"scheduler-prev-trigger\"\n      variant=\"outline\"\n      size=\"icon-sm\"\n      aria-label={`Previous ${view}`}\n      asChild={asChild}\n      onClick={(event) => {\n        onClick?.(event)\n        if (!event.defaultPrevented) setDate(shift(date, view, -1))\n      }}\n      {...props}\n    >\n      {asChild ? children : (children ?? <ChevronLeftIcon />)}\n    </Button>\n  )\n}\n\nfunction SchedulerNextTrigger({ asChild, children, onClick, ...props }: React.ComponentProps<typeof Button>) {\n  const { date, view, setDate } = useScheduler()\n  return (\n    <Button\n      data-slot=\"scheduler-next-trigger\"\n      variant=\"outline\"\n      size=\"icon-sm\"\n      aria-label={`Next ${view}`}\n      asChild={asChild}\n      onClick={(event) => {\n        onClick?.(event)\n        if (!event.defaultPrevented) setDate(shift(date, view, 1))\n      }}\n      {...props}\n    >\n      {asChild ? children : (children ?? <ChevronRightIcon />)}\n    </Button>\n  )\n}\n\nfunction SchedulerTodayTrigger({ asChild, children, onClick, ...props }: React.ComponentProps<typeof Button>) {\n  const { setDate } = useScheduler()\n  return (\n    <Button\n      data-slot=\"scheduler-today-trigger\"\n      variant=\"outline\"\n      size=\"sm\"\n      asChild={asChild}\n      onClick={(event) => {\n        onClick?.(event)\n        if (!event.defaultPrevented) setDate(startOfDay(new Date()))\n      }}\n      {...props}\n    >\n      {asChild\n        ? children\n        : (children ?? (\n            <>\n              <CalendarIcon /> Today\n            </>\n          ))}\n    </Button>\n  )\n}\n\n/** \"September 2026\", \"Sep 7 – 13, 2026\" or \"Mon, Sep 7\". */\nfunction SchedulerTitle({ className, children, ...props }: React.ComponentProps<\"h2\">) {\n  const { date, view, range } = useScheduler()\n  const text =\n    view === \"month\"\n      ? format(date, \"MMMM yyyy\")\n      : view === \"day\"\n        ? format(date, \"EEEE, MMM d, yyyy\")\n        : isSameMonth(range.start, range.end)\n          ? `${format(range.start, \"MMM d\")} – ${format(range.end, \"d, yyyy\")}`\n          : `${format(range.start, \"MMM d\")} – ${format(range.end, \"MMM d, yyyy\")}`\n  return (\n    <h2 data-slot=\"scheduler-title\" className={cn(\"text-base font-semibold tabular-nums\", className)} {...props}>\n      {children ?? text}\n    </h2>\n  )\n}\n\nfunction SchedulerViewSelect({\n  className,\n  ...props\n}: Omit<React.ComponentProps<typeof SegmentGroup>, \"value\" | \"onValueChange\">) {\n  const { view, setView } = useScheduler()\n  return (\n    <SegmentGroup\n      data-slot=\"scheduler-view-select\"\n      value={view}\n      onValueChange={({ value }) => value && setView(value as SchedulerView)}\n      className={className}\n      {...props}\n    >\n      <SegmentGroupIndicator />\n      <SegmentGroupItem value=\"day\">Day</SegmentGroupItem>\n      <SegmentGroupItem value=\"week\">Week</SegmentGroupItem>\n      <SegmentGroupItem value=\"month\">Month</SegmentGroupItem>\n    </SegmentGroup>\n  )\n}\n\n/* ---------------------------------------------------------------------------\n * Time grid (day / week)\n * ------------------------------------------------------------------------- */\n\nconst GUTTER = \"3.5rem\"\n\nfunction SchedulerTimeGrid({ className, style, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"scheduler-time-grid\"\n      className={cn(\"flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border bg-background\", className)}\n      style={{ [\"--scheduler-gutter\" as string]: GUTTER, ...style }}\n      {...props}\n    />\n  )\n}\n\nfunction SchedulerTimeGridHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"scheduler-time-grid-header\"\n      className={cn(\"grid shrink-0 border-b bg-muted/50\", className)}\n      style={{ gridTemplateColumns: \"var(--scheduler-gutter) 1fr\" }}\n      {...props}\n    />\n  )\n}\n\n/** Day headings across the top, one per visible day. */\nfunction SchedulerDayHeadings({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & { children?: (day: Date) => React.ReactNode }) {\n  const { days, setDate, setView } = useScheduler()\n  return (\n    <>\n      <div aria-hidden className=\"border-e\" />\n      <div\n        data-slot=\"scheduler-day-headings\"\n        className={cn(\"grid\", className)}\n        style={{ gridTemplateColumns: `repeat(${days.length}, minmax(0, 1fr))` }}\n        {...props}\n      >\n        {days.map((day) => (\n          <button\n            key={day.toISOString()}\n            type=\"button\"\n            data-slot=\"scheduler-day-heading\"\n            data-today={isToday(day) ? \"\" : undefined}\n            className=\"group/heading flex flex-col items-center gap-0.5 border-e py-2 text-xs text-muted-foreground outline-none last:border-e-0 hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-inset\"\n            onClick={() => {\n              setDate(day)\n              setView(\"day\")\n            }}\n          >\n            {children ? (\n              children(day)\n            ) : (\n              <>\n                <span>{format(day, \"EEE\")}</span>\n                <span className=\"flex size-7 items-center justify-center rounded-full text-base font-semibold text-foreground group-data-today/heading:bg-primary group-data-today/heading:text-primary-foreground\">\n                  {format(day, \"d\")}\n                </span>\n              </>\n            )}\n          </button>\n        ))}\n      </div>\n    </>\n  )\n}\n\n/** Strip under the headings for all-day events; render chips inside per day. */\nfunction SchedulerAllDayRow({\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"children\"> & { children: (day: Date) => React.ReactNode }) {\n  const { days } = useScheduler()\n  return (\n    <>\n      <div className=\"flex items-start justify-end border-e border-t px-1.5 py-1 text-[10px] text-muted-foreground uppercase\">\n        all day\n      </div>\n      <div\n        data-slot=\"scheduler-all-day-row\"\n        className={cn(\"grid border-t\", className)}\n        style={{ gridTemplateColumns: `repeat(${days.length}, minmax(0, 1fr))` }}\n        {...props}\n      >\n        {days.map((day) => (\n          <div\n            key={day.toISOString()}\n            data-slot=\"scheduler-all-day-cell\"\n            className=\"flex min-h-7 flex-col gap-0.5 border-e p-0.5 last:border-e-0\"\n          >\n            {children(day)}\n          </div>\n        ))}\n      </div>\n    </>\n  )\n}\n\nfunction SchedulerTimeGridBody({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  const { bodyRef, hourHeight, minHour, maxHour } = useScheduler()\n  // Scroll to a sensible hour on mount.\n  React.useEffect(() => {\n    const el = bodyRef.current\n    if (el) el.scrollTop = Math.max(0, (8 - minHour) * hourHeight - 8)\n  }, [bodyRef, hourHeight, minHour])\n  return (\n    <div\n      ref={bodyRef}\n      data-slot=\"scheduler-time-grid-body\"\n      className={cn(\"relative min-h-0 flex-1 overflow-y-auto\", className)}\n      {...props}\n    >\n      <div\n        className=\"grid\"\n        style={{ gridTemplateColumns: \"var(--scheduler-gutter) 1fr\", height: (maxHour - minHour) * hourHeight }}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nfunction SchedulerTimeGutter({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { hourHeight, minHour, maxHour } = useScheduler()\n  const hours = Array.from({ length: maxHour - minHour }, (_, i) => minHour + i)\n  return (\n    <div data-slot=\"scheduler-time-gutter\" className={cn(\"relative border-e\", className)} {...props}>\n      {hours.map((h) => (\n        <div\n          key={h}\n          className=\"absolute inset-e-1.5 -translate-y-1/2 text-[11px] text-muted-foreground tabular-nums\"\n          style={{ top: (h - minHour) * hourHeight }}\n        >\n          {h > minHour ? format(setHours(new Date(), h), \"h a\") : \"\"}\n        </div>\n      ))}\n    </div>\n  )\n}\n\n/** The columns container; hour lines are drawn behind. */\nfunction SchedulerDayColumns({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  const { days, hourHeight, minHour, maxHour } = useScheduler()\n  const hours = Array.from({ length: maxHour - minHour }, (_, i) => i)\n  return (\n    <div\n      data-slot=\"scheduler-day-columns\"\n      className={cn(\"relative grid\", className)}\n      style={{ gridTemplateColumns: `repeat(${days.length}, minmax(0, 1fr))` }}\n      {...props}\n    >\n      <div aria-hidden className=\"pointer-events-none absolute inset-0\">\n        {hours.map((i) => (\n          <div key={i} className=\"absolute inset-x-0 border-t border-border/70\" style={{ top: i * hourHeight }} />\n        ))}\n      </div>\n      {children}\n    </div>\n  )\n}\n\n/** Side-by-side lanes for overlapping events. */\nfunction layoutLanes(events: EventLike[]) {\n  const sorted = [...events]\n    .filter((e) => !e.allDay)\n    .sort((a, b) => a.start.getTime() - b.start.getTime() || b.end.getTime() - a.end.getTime())\n  const result = new Map<string, { lane: number; lanes: number }>()\n  let cluster: EventLike[] = []\n  let clusterEnd = 0\n  const flush = () => {\n    const laneEnds: number[] = []\n    const assigned: { id: string; lane: number }[] = []\n    for (const e of cluster) {\n      let lane = laneEnds.findIndex((end) => end <= e.start.getTime())\n      if (lane === -1) lane = laneEnds.length\n      laneEnds[lane] = e.end.getTime()\n      assigned.push({ id: e.id, lane })\n    }\n    for (const a of assigned) result.set(a.id, { lane: a.lane, lanes: laneEnds.length })\n    cluster = []\n    clusterEnd = 0\n  }\n  for (const e of sorted) {\n    if (cluster.length && e.start.getTime() >= clusterEnd) flush()\n    cluster.push(e)\n    clusterEnd = Math.max(clusterEnd, e.end.getTime())\n  }\n  if (cluster.length) flush()\n  return result\n}\n\nconst ColumnContext = React.createContext<{ day: Date; lanes: Map<string, { lane: number; lanes: number }> } | null>(\n  null\n)\n\n/** One day. `events` are the ones on this day (for overlap layout); `children` renders each. */\nfunction SchedulerDayColumn<T extends EventLike>({\n  date,\n  events,\n  className,\n  children,\n  onPointerDown,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  date: Date\n  events: T[]\n  children: (event: T) => React.ReactNode\n}) {\n  const scheduler = useScheduler()\n  const lanes = React.useMemo(() => layoutLanes(events), [events])\n  const ctx = React.useMemo(() => ({ day: date, lanes }), [date, lanes])\n  return (\n    <ColumnContext.Provider value={ctx}>\n      <div\n        data-slot=\"scheduler-day-column\"\n        data-date={date.toISOString()}\n        data-today={isToday(date) ? \"\" : undefined}\n        className={cn(\"relative border-e last:border-e-0 data-today:bg-primary/3\", className)}\n        onPointerDown={(event) => {\n          onPointerDown?.(event)\n          if (event.defaultPrevented || event.button !== 0) return\n          if ((event.target as HTMLElement).closest(\"[data-slot=scheduler-event]\")) return\n          scheduler.startCreate(date, event, scheduler.days)\n        }}\n        {...props}\n      >\n        {events.map((event) => (\n          <React.Fragment key={event.id}>{children(event)}</React.Fragment>\n        ))}\n      </div>\n    </ColumnContext.Provider>\n  )\n}\n\nconst EventContext = React.createContext<EventLike | null>(null)\n\nfunction SchedulerEvent({\n  value,\n  start,\n  end,\n  className,\n  style,\n  children,\n  onPointerDown,\n  onKeyDown,\n  onBlur,\n  ...props\n}: React.ComponentProps<\"div\"> & { value: string; start: Date; end: Date }) {\n  const s = useScheduler()\n  const column = React.useContext(ColumnContext)\n  const live = s.interaction?.id === value ? s.interaction : null\n  const shownStart = live ? live.start : start\n  const shownEnd = live ? live.end : end\n  // While a move crosses days the event stays in its original column but shifts visually.\n  const dayOffset = column ? differenceInCalendarDays(startOfDay(shownStart), column.day) : 0\n  const lane = column?.lanes.get(value) ?? { lane: 0, lanes: 1 }\n  const top = s.timeToY(shownStart)\n  const height = Math.max(s.hourHeight / 4, (differenceInMinutes(shownEnd, shownStart) * s.hourHeight) / 60)\n  const isGrabbed = s.grabbed === value\n  const eventLike = React.useMemo(() => ({ id: value, start, end }), [value, start, end])\n  return (\n    <EventContext.Provider value={eventLike}>\n      <div\n        {...props}\n        data-slot=\"scheduler-event\"\n        data-value={value}\n        data-dragging={live?.type}\n        data-grabbed={isGrabbed ? \"\" : undefined}\n        tabIndex={s.editable ? 0 : undefined}\n        aria-pressed={s.editable ? isGrabbed : undefined}\n        aria-label={`${format(shownStart, \"EEE d, p\")} to ${format(shownEnd, \"p\")}`}\n        className={cn(\n          \"group/event absolute flex flex-col overflow-hidden rounded-md border border-primary/30 bg-primary/15 px-1.5 py-1 text-xs text-foreground outline-none select-none\",\n          s.editable && \"cursor-grab active:cursor-grabbing\",\n          \"focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-ring/50 data-dragging:z-20 data-dragging:shadow-lg data-grabbed:ring-2 data-grabbed:ring-primary\",\n          className\n        )}\n        style={{\n          top,\n          height,\n          left: `calc(${(lane.lane / lane.lanes) * 100}% + 2px)`,\n          width: `calc(${100 / lane.lanes}% - 4px)`,\n          transform: dayOffset ? `translateX(calc(${dayOffset * 100}% + ${dayOffset * 1}px))` : undefined,\n          ...style,\n        }}\n        onPointerDown={(event) => {\n          onPointerDown?.(event)\n          if (event.defaultPrevented || event.button !== 0) return\n          if ((event.target as HTMLElement).closest(\"[data-slot=scheduler-event-resize-handle], button, a\")) return\n          s.startMove(eventLike, event, s.days)\n        }}\n        onKeyDown={(event) => {\n          onKeyDown?.(event)\n          if (event.defaultPrevented || !s.editable || event.target !== event.currentTarget) return\n          if (event.key === \" \" || event.key === \"Enter\") {\n            event.preventDefault()\n            s.grab(isGrabbed ? null : value)\n            return\n          }\n          if (!isGrabbed) return\n          const step = s.slotMinutes\n          if (event.key === \"ArrowUp\" || event.key === \"ArrowDown\") {\n            event.preventDefault()\n            const delta = event.key === \"ArrowUp\" ? -step : step\n            s.nudge(eventLike, delta, 0, event.shiftKey ? \"end\" : \"both\")\n          } else if (event.key === \"ArrowLeft\" || event.key === \"ArrowRight\") {\n            event.preventDefault()\n            s.nudge(eventLike, 0, event.key === \"ArrowLeft\" ? -1 : 1, \"both\")\n          } else if (event.key === \"Escape\") {\n            event.preventDefault()\n            s.cancelGrab()\n          }\n        }}\n        onBlur={(event) => {\n          onBlur?.(event)\n          if (isGrabbed && !event.currentTarget.contains(event.relatedTarget as Node | null)) s.grab(null)\n        }}\n      >\n        {children}\n      </div>\n    </EventContext.Provider>\n  )\n}\n\nfunction SchedulerEventTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"scheduler-event-title\" className={cn(\"truncate font-medium\", className)} {...props} />\n}\n\n/** \"9:00 – 9:45 AM\"; reflects the live drag. */\nfunction SchedulerEventTime({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  const s = useScheduler()\n  const e = React.useContext(EventContext)\n  if (!e) return null\n  const live = s.interaction?.id === e.id ? s.interaction : null\n  const start = live ? live.start : e.start\n  const end = live ? live.end : e.end\n  return (\n    <div\n      data-slot=\"scheduler-event-time\"\n      className={cn(\"truncate text-[11px] tabular-nums opacity-80\", className)}\n      {...props}\n    >\n      {children ?? `${format(start, \"h:mm\")} – ${format(end, \"h:mm a\")}`}\n    </div>\n  )\n}\n\nfunction SchedulerEventResizeHandle({ className, onPointerDown, ...props }: React.ComponentProps<\"div\">) {\n  const s = useScheduler()\n  const e = React.useContext(EventContext)\n  if (!s.editable || !e) return null\n  return (\n    <div\n      data-slot=\"scheduler-event-resize-handle\"\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      className={cn(\n        \"absolute inset-x-0 bottom-0 h-2 cursor-ns-resize touch-none after:absolute after:inset-x-1/2 after:bottom-0.5 after:h-0.5 after:w-6 after:-translate-x-1/2 after:rounded-full after:bg-primary/50 after:opacity-0 group-hover/event:after:opacity-100\",\n        className\n      )}\n      onPointerDown={(event) => {\n        onPointerDown?.(event)\n        if (event.defaultPrevented || event.button !== 0) return\n        s.startResize(e, event)\n      }}\n      {...props}\n    />\n  )\n}\n\n/** Outline of the event being created by dragging; renders nothing when idle. */\nfunction SchedulerCreatePreview({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  const s = useScheduler()\n  if (!s.creating) return null\n  const index = s.days.findIndex((d) => isSameDay(d, s.creating!.start))\n  if (index === -1) return null\n  const top = s.timeToY(s.creating.start)\n  const height = (differenceInMinutes(s.creating.end, s.creating.start) * s.hourHeight) / 60\n  return (\n    <div\n      data-slot=\"scheduler-create-preview\"\n      aria-hidden\n      className={cn(\n        \"pointer-events-none absolute z-20 rounded-md border-2 border-dashed border-primary/60 bg-primary/10 px-1.5 py-1 text-[11px] text-primary tabular-nums\",\n        className\n      )}\n      style={{\n        top,\n        height,\n        left: `calc(${(index / s.days.length) * 100}% + 2px)`,\n        width: `calc(${100 / s.days.length}% - 4px)`,\n      }}\n      {...props}\n    >\n      {children ?? `${format(s.creating.start, \"h:mm\")} – ${format(s.creating.end, \"h:mm a\")}`}\n    </div>\n  )\n}\n\n/** Red line at the current time in today's column. */\nfunction SchedulerNowIndicator({ className, ...props }: React.ComponentProps<\"div\">) {\n  const s = useScheduler()\n  const [now, setNow] = React.useState(() => new Date())\n  React.useEffect(() => {\n    const timer = setInterval(() => setNow(new Date()), 60_000)\n    return () => clearInterval(timer)\n  }, [])\n  const index = s.days.findIndex((d) => isToday(d))\n  if (index === -1) return null\n  return (\n    <div\n      data-slot=\"scheduler-now-indicator\"\n      aria-hidden\n      className={cn(\"pointer-events-none absolute z-10 h-px bg-destructive\", className)}\n      style={{ top: s.timeToY(now), left: `${(index / s.days.length) * 100}%`, width: `${100 / s.days.length}%` }}\n      {...props}\n    >\n      <span className=\"absolute -top-1 -left-1 size-2 rounded-full bg-destructive\" />\n    </div>\n  )\n}\n\n/* ---------------------------------------------------------------------------\n * Month grid\n * ------------------------------------------------------------------------- */\n\nfunction SchedulerMonthGrid({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"scheduler-month-grid\"\n      className={cn(\"flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border bg-background\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SchedulerMonthHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { days } = useScheduler()\n  return (\n    <div\n      data-slot=\"scheduler-month-header\"\n      className={cn(\"grid grid-cols-7 border-b bg-muted/50 text-xs text-muted-foreground\", className)}\n      {...props}\n    >\n      {days.slice(0, 7).map((d) => (\n        <div key={d.toISOString()} className=\"border-e px-2 py-1.5 text-center font-medium last:border-e-0\">\n          {format(d, \"EEE\")}\n        </div>\n      ))}\n    </div>\n  )\n}\n\nfunction SchedulerMonthBody({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  const { days } = useScheduler()\n  return (\n    <div\n      data-slot=\"scheduler-month-body\"\n      className={cn(\"grid min-h-0 flex-1 grid-cols-7 overflow-y-auto\", className)}\n      style={{ gridTemplateRows: `repeat(${Math.ceil(days.length / 7)}, minmax(6rem, 1fr))` }}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\nfunction SchedulerMonthCell({\n  date,\n  className,\n  children,\n  onClick,\n  ...props\n}: React.ComponentProps<\"div\"> & { date: Date }) {\n  const s = useScheduler()\n  const outside = !isSameMonth(date, s.date)\n  return (\n    <div\n      data-slot=\"scheduler-month-cell\"\n      data-date={date.toISOString()}\n      data-today={isToday(date) ? \"\" : undefined}\n      data-outside={outside ? \"\" : undefined}\n      className={cn(\n        \"group/cell flex min-h-0 flex-col gap-0.5 border-e border-b p-1 text-xs data-outside:bg-muted/30 data-outside:text-muted-foreground nth-[7n]:border-e-0\",\n        className\n      )}\n      onClick={(event) => {\n        onClick?.(event)\n        if (event.defaultPrevented) return\n        if ((event.target as HTMLElement).closest(\"[data-slot=scheduler-month-event], button, a\")) return\n        s.setDate(date)\n      }}\n      {...props}\n    >\n      <button\n        type=\"button\"\n        data-slot=\"scheduler-month-day\"\n        className=\"mb-0.5 flex size-6 items-center justify-center self-start rounded-full text-xs font-medium outline-none group-data-today/cell:bg-primary group-data-today/cell:text-primary-foreground hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/50\"\n        onClick={(event) => {\n          event.stopPropagation()\n          s.setDate(date)\n          s.setView(\"day\")\n        }}\n      >\n        {format(date, \"d\")}\n      </button>\n      <div className=\"flex min-h-0 flex-1 flex-col gap-0.5 overflow-hidden\">{children}</div>\n    </div>\n  )\n}\n\n/** Compact chip for the month view; draggable between cells. */\nfunction SchedulerMonthEvent({\n  value,\n  start,\n  end,\n  className,\n  children,\n  onPointerDown,\n  ...props\n}: React.ComponentProps<\"div\"> & { value: string; start: Date; end: Date }) {\n  const s = useScheduler()\n  const live = s.interaction?.id === value ? s.interaction : null\n  const eventLike = React.useMemo(() => ({ id: value, start, end }), [value, start, end])\n  return (\n    <div\n      {...props}\n      data-slot=\"scheduler-month-event\"\n      data-value={value}\n      data-dragging={live ? \"\" : undefined}\n      tabIndex={s.editable ? 0 : undefined}\n      aria-label={`${format(start, \"EEE d, p\")}`}\n      className={cn(\n        \"flex cursor-grab items-center gap-1 truncate rounded-sm border border-primary/30 bg-primary/15 px-1.5 py-px text-[11px]/4 outline-none select-none focus-visible:ring-2 focus-visible:ring-ring/50 active:cursor-grabbing data-dragging:opacity-50\",\n        className\n      )}\n      onPointerDown={(event) => {\n        onPointerDown?.(event)\n        if (event.defaultPrevented || event.button !== 0) return\n        s.startMonthMove(eventLike, event)\n      }}\n    >\n      {children}\n    </div>\n  )\n}\n\nfunction SchedulerMonthMore({ className, ...props }: React.ComponentProps<\"button\">) {\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"scheduler-month-more\"\n      className={cn(\n        \"self-start rounded-sm px-1 text-[11px] text-muted-foreground hover:bg-muted hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Scheduler,\n  SchedulerToolbar,\n  SchedulerPrevTrigger,\n  SchedulerNextTrigger,\n  SchedulerTodayTrigger,\n  SchedulerTitle,\n  SchedulerViewSelect,\n  SchedulerTimeGrid,\n  SchedulerTimeGridHeader,\n  SchedulerDayHeadings,\n  SchedulerAllDayRow,\n  SchedulerTimeGridBody,\n  SchedulerTimeGutter,\n  SchedulerDayColumns,\n  SchedulerDayColumn,\n  SchedulerEvent,\n  SchedulerEventTitle,\n  SchedulerEventTime,\n  SchedulerEventResizeHandle,\n  SchedulerCreatePreview,\n  SchedulerNowIndicator,\n  SchedulerMonthGrid,\n  SchedulerMonthHeader,\n  SchedulerMonthBody,\n  SchedulerMonthCell,\n  SchedulerMonthEvent,\n  SchedulerMonthMore,\n  useScheduler,\n  layoutLanes,\n  visibleRange,\n  type SchedulerView,\n  type SchedulerEventChange,\n}\n"
+      "content": "import * as React from \"react\"\nimport {\n  addDays,\n  addMinutes,\n  addMonths,\n  addWeeks,\n  differenceInCalendarDays,\n  differenceInMinutes,\n  eachDayOfInterval,\n  endOfMonth,\n  endOfWeek,\n  format,\n  isSameDay,\n  isSameMonth,\n  isToday,\n  setHours,\n  setMinutes,\n  startOfDay,\n  startOfMonth,\n  startOfWeek,\n} from \"date-fns\"\nimport { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\"\nimport { Button } from \"@/components/ui/button\"\nimport { SegmentGroup, SegmentGroupIndicator, SegmentGroupItem } from \"@/components/ui/segment-group\"\nimport { cn } from \"@/lib/utils\"\nimport { useControllable } from \"@/lib/controllable\"\nimport { LiveRegion, useLiveRegion } from \"@/components/ui/live-region\"\n\n/**\n * Scheduler — a compositional, data-agnostic calendar. The consumer owns the\n * events and renders them with the parts; the root owns the anchor `date`,\n * the `view` (day/week/month), the time-grid geometry and the interactions:\n * drag to move, drag the bottom edge to resize, drag on empty time to create,\n * keyboard moves. Everything is reported as intents (`onEventChange`,\n * `onCreate`) snapped to `slotMinutes`.\n *\n * Anatomy:\n *   Scheduler { date, view, onEventChange, onCreate }\n *     SchedulerToolbar > SchedulerPrevTrigger / SchedulerTodayTrigger / SchedulerNextTrigger / SchedulerTitle / SchedulerViewSelect\n *     SchedulerTimeGrid (day, week)\n *       SchedulerTimeGridHeader > SchedulerDayHeading date=…   (+ SchedulerAllDayRow)\n *       SchedulerTimeGridBody > SchedulerTimeGutter + SchedulerDayColumn date= events=\n *         children: (event) => <SchedulerEvent value= start= end=> … <SchedulerEventResizeHandle/> </SchedulerEvent>\n *       SchedulerNowIndicator, SchedulerCreatePreview\n *     SchedulerMonthGrid > SchedulerMonthHeader + SchedulerMonthBody > SchedulerMonthCell date= > SchedulerMonthEvent value=…\n *\n * Keyboard on an event: Space/Enter picks up, ↑/↓ move by a slot, ←/→ move a\n * day, Shift+↑/↓ change the end, Escape cancels.\n */\n\ntype SchedulerView = \"day\" | \"week\" | \"month\"\ntype EventLike = { id: string; start: Date; end: Date; allDay?: boolean }\ntype SchedulerEventChange = { id: string; start: Date; end: Date }\ntype Interaction = { id: string; type: \"move\" | \"resize\"; start: Date; end: Date }\ntype CreateState = { start: Date; end: Date } | null\n\ntype SchedulerContextValue = {\n  date: Date\n  setDate: (date: Date) => void\n  /** Controlled view: `day`, `week`, or `month`. */\n  view: SchedulerView\n  setView: (view: SchedulerView) => void\n  range: { start: Date; end: Date }\n  days: Date[]\n  /** First day of the week, 0 for Sunday. */\n  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6\n  /** Pixels per hour in the time grid. */\n  hourHeight: number\n  /** Snap and keyboard step in minutes. */\n  slotMinutes: number\n  /** First hour shown in the time grid. */\n  minHour: number\n  /** Last hour shown in the time grid. */\n  maxHour: number\n  editable: boolean\n  interaction: Interaction | null\n  creating: CreateState\n  grabbed: string | null\n  timeToY: (date: Date) => number\n  yToMinutes: (y: number) => number\n  bodyRef: React.RefObject<HTMLDivElement | null>\n  startMove: (event: EventLike, pointer: React.PointerEvent, columnDates: Date[]) => void\n  startResize: (event: EventLike, pointer: React.PointerEvent) => void\n  startCreate: (day: Date, pointer: React.PointerEvent, columnDates: Date[]) => void\n  startMonthMove: (event: EventLike, pointer: React.PointerEvent) => void\n  grab: (id: string | null) => void\n  cancelGrab: () => void\n  nudge: (event: EventLike, deltaMinutes: number, deltaDays: number, part: \"both\" | \"end\") => void\n  announce: (message: string) => void\n}\n\nconst SchedulerContext = React.createContext<SchedulerContextValue | null>(null)\nfunction useScheduler() {\n  const ctx = React.useContext(SchedulerContext)\n  if (!ctx) throw new Error(\"Scheduler parts must be used within <Scheduler>\")\n  return ctx\n}\n\nconst clamp = (v: number, min: number, max: number) => Math.min(max, Math.max(min, v))\nconst minutesOfDay = (d: Date) => d.getHours() * 60 + d.getMinutes()\nconst withMinutes = (day: Date, minutes: number) => setMinutes(setHours(startOfDay(day), 0), minutes)\n\nfunction visibleRange(date: Date, view: SchedulerView, weekStartsOn: SchedulerContextValue[\"weekStartsOn\"]) {\n  if (view === \"day\") return { start: startOfDay(date), end: startOfDay(date) }\n  if (view === \"week\") return { start: startOfWeek(date, { weekStartsOn }), end: endOfWeek(date, { weekStartsOn }) }\n  return {\n    /** Event start. */\n    start: startOfWeek(startOfMonth(date), { weekStartsOn }),\n    /** Event end. */\n    end: endOfWeek(endOfMonth(date), { weekStartsOn }),\n  }\n}\n\n/* ---------------------------------------------------------------------------\n * Root\n * ------------------------------------------------------------------------- */\n\nfunction Scheduler({\n  date: dateProp,\n  defaultDate,\n  onDateChange,\n  view: viewProp,\n  defaultView = \"week\",\n  onViewChange,\n  weekStartsOn = 1,\n  hourHeight = 56,\n  slotMinutes = 15,\n  minHour = 0,\n  maxHour = 24,\n  editable = true,\n  onEventChange,\n  onCreate,\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"onChange\"> & {\n  date?: Date\n  /** Initial anchor date when uncontrolled. */\n  defaultDate?: Date\n  /** Called when the anchor date changes. */\n  onDateChange?: (date: Date) => void\n  /** Controlled view: `day`, `week`, or `month`. */\n  view?: SchedulerView\n  /** Initial view when uncontrolled. */\n  defaultView?: SchedulerView\n  /** Called when the view changes. */\n  onViewChange?: (view: SchedulerView) => void\n  /** First day of the week, 0 for Sunday. */\n  weekStartsOn?: SchedulerContextValue[\"weekStartsOn\"]\n  /** Pixels per hour in the time grid. */\n  hourHeight?: number\n  /** Snap and keyboard step in minutes. */\n  slotMinutes?: number\n  /** First hour shown in the time grid. */\n  minHour?: number\n  /** Last hour shown in the time grid. */\n  maxHour?: number\n  editable?: boolean\n  /** Called with `{ id, start, end }` snapped to `slotMinutes` after a move, resize, or keyboard change. */\n  onEventChange?: (change: SchedulerEventChange) => void\n  /** Drag on empty time (or a month cell click) proposes a new event. */\n  onCreate?: (range: { start: Date; end: Date; allDay?: boolean }) => void\n}) {\n  const [initialDate] = React.useState(() => startOfDay(defaultDate ?? new Date()))\n  const [date, setDate] = useControllable(dateProp, initialDate, onDateChange)\n  const [view, setView] = useControllable<SchedulerView>(viewProp, defaultView, onViewChange)\n\n  const range = React.useMemo(() => visibleRange(date, view, weekStartsOn), [date, view, weekStartsOn])\n  const days = React.useMemo(() => eachDayOfInterval(range), [range])\n\n  const bodyRef = React.useRef<HTMLDivElement>(null)\n  const minuteHeight = hourHeight / 60\n  const timeToY = React.useCallback(\n    (d: Date) => (minutesOfDay(d) - minHour * 60) * minuteHeight,\n    [minHour, minuteHeight]\n  )\n  const yToMinutes = React.useCallback(\n    (y: number) =>\n      clamp(Math.round((y / minuteHeight + minHour * 60) / slotMinutes) * slotMinutes, minHour * 60, maxHour * 60),\n    [minuteHeight, minHour, maxHour, slotMinutes]\n  )\n\n  const [interaction, setInteraction] = React.useState<Interaction | null>(null)\n  const [creating, setCreating] = React.useState<CreateState>(null)\n  const [grabbed, setGrabbed] = React.useState<string | null>(null)\n  const { message: announcement, announce } = useLiveRegion()\n  const onEventChangeRef = React.useRef(onEventChange)\n  const onCreateRef = React.useRef(onCreate)\n  React.useEffect(() => {\n    onEventChangeRef.current = onEventChange\n    onCreateRef.current = onCreate\n  }, [onEventChange, onCreate])\n  const grabOrigin = React.useRef<SchedulerEventChange | null>(null)\n\n  const track = React.useCallback((onMove: (e: PointerEvent) => void, onUp: (e: PointerEvent) => void) => {\n    const up = (e: PointerEvent) => {\n      window.removeEventListener(\"pointermove\", onMove)\n      window.removeEventListener(\"pointerup\", up)\n      window.removeEventListener(\"pointercancel\", up)\n      onUp(e)\n    }\n    window.addEventListener(\"pointermove\", onMove)\n    window.addEventListener(\"pointerup\", up)\n    window.addEventListener(\"pointercancel\", up)\n  }, [])\n\n  /** Which day column a client x falls in, from the column elements' rects. */\n  const dayAtX = React.useCallback((x: number, columnDates: Date[]) => {\n    const columns = Array.from(bodyRef.current?.querySelectorAll<HTMLElement>(\"[data-slot=scheduler-day-column]\") ?? [])\n    for (const [i, col] of columns.entries()) {\n      const r = col.getBoundingClientRect()\n      if (x >= r.left && x < r.right) return columnDates[i] ?? null\n    }\n    return null\n  }, [])\n\n  const startMove = React.useCallback(\n    (event: EventLike, pointer: React.PointerEvent, columnDates: Date[]) => {\n      if (!editable) return\n      pointer.preventDefault()\n      pointer.stopPropagation()\n      const originY = pointer.clientY\n      const originDay = startOfDay(event.start)\n      let current: Interaction = { id: event.id, type: \"move\", start: event.start, end: event.end }\n      let moved = false\n      setInteraction(current)\n      track(\n        (e) => {\n          const dy = e.clientY - originY\n          const deltaMinutes = Math.round(dy / minuteHeight / slotMinutes) * slotMinutes\n          const day = dayAtX(e.clientX, columnDates) ?? originDay\n          const dayDelta = differenceInCalendarDays(day, originDay)\n          const duration = differenceInMinutes(event.end, event.start)\n          const startMin = clamp(minutesOfDay(event.start) + deltaMinutes, minHour * 60, maxHour * 60 - duration)\n          const start = addDays(withMinutes(originDay, startMin), dayDelta)\n          current = { id: event.id, type: \"move\", start, end: addMinutes(start, duration) }\n          if (Math.abs(dy) > 3 || dayDelta !== 0) moved = true\n          setInteraction(current)\n        },\n        () => {\n          setInteraction(null)\n          if (\n            moved &&\n            (current.start.getTime() !== event.start.getTime() || current.end.getTime() !== event.end.getTime())\n          ) {\n            onEventChangeRef.current?.({ id: event.id, start: current.start, end: current.end })\n          }\n        }\n      )\n    },\n    [editable, track, dayAtX, minuteHeight, slotMinutes, minHour, maxHour]\n  )\n\n  const startResize = React.useCallback(\n    (event: EventLike, pointer: React.PointerEvent) => {\n      if (!editable) return\n      pointer.preventDefault()\n      pointer.stopPropagation()\n      const originY = pointer.clientY\n      let current: Interaction = { id: event.id, type: \"resize\", start: event.start, end: event.end }\n      setInteraction(current)\n      track(\n        (e) => {\n          const deltaMinutes = Math.round((e.clientY - originY) / minuteHeight / slotMinutes) * slotMinutes\n          const endMin = clamp(\n            minutesOfDay(event.end) + deltaMinutes,\n            minutesOfDay(event.start) + slotMinutes,\n            maxHour * 60\n          )\n          current = { ...current, end: withMinutes(event.start, endMin) }\n          setInteraction(current)\n        },\n        () => {\n          setInteraction(null)\n          if (current.end.getTime() !== event.end.getTime()) {\n            onEventChangeRef.current?.({ id: event.id, start: event.start, end: current.end })\n          }\n        }\n      )\n    },\n    [editable, track, minuteHeight, slotMinutes, maxHour]\n  )\n\n  const startCreate = React.useCallback(\n    (day: Date, pointer: React.PointerEvent, columnDates: Date[]) => {\n      if (!editable || !onCreateRef.current) return\n      const column = (pointer.currentTarget as HTMLElement).getBoundingClientRect()\n      const originMin = yToMinutes(pointer.clientY - column.top)\n      let current: NonNullable<CreateState> = {\n        /** Event start. */\n        start: withMinutes(day, originMin),\n        /** Event end. */\n        end: withMinutes(day, originMin + slotMinutes),\n      }\n      let dragged = false\n      setCreating(current)\n      track(\n        (e) => {\n          const min = yToMinutes(e.clientY - column.top)\n          const targetDay = dayAtX(e.clientX, columnDates) ?? day\n          const a = Math.min(originMin, min)\n          const b = Math.max(originMin, min, a + slotMinutes)\n          current = { start: withMinutes(targetDay, a), end: withMinutes(targetDay, b) }\n          dragged = true\n          setCreating(current)\n        },\n        () => {\n          setCreating(null)\n          onCreateRef.current?.(dragged ? current : { start: current.start, end: addMinutes(current.start, 60) })\n        }\n      )\n    },\n    [editable, track, yToMinutes, slotMinutes, dayAtX]\n  )\n\n  /** Month view: drag a chip onto another cell to shift the event by whole days. */\n  const startMonthMove = React.useCallback(\n    (event: EventLike, pointer: React.PointerEvent) => {\n      if (!editable) return\n      pointer.preventDefault()\n      pointer.stopPropagation()\n      const originDay = startOfDay(event.start)\n      let current: Interaction = { id: event.id, type: \"move\", start: event.start, end: event.end }\n      let moved = false\n      setInteraction(current)\n      const cellAt = (x: number, y: number) =>\n        document.elementFromPoint(x, y)?.closest<HTMLElement>(\"[data-slot=scheduler-month-cell]\")?.dataset.date\n      track(\n        (e) => {\n          const target = cellAt(e.clientX, e.clientY)\n          if (!target) return\n          const delta = differenceInCalendarDays(new Date(target), originDay)\n          current = { ...current, start: addDays(event.start, delta), end: addDays(event.end, delta) }\n          moved = true\n          setInteraction(current)\n        },\n        () => {\n          setInteraction(null)\n          if (moved && current.start.getTime() !== event.start.getTime()) {\n            onEventChangeRef.current?.({ id: event.id, start: current.start, end: current.end })\n          }\n        }\n      )\n    },\n    [editable, track]\n  )\n\n  const grab = React.useCallback(\n    (id: string | null) => {\n      if (id) {\n        setGrabbed(id)\n        announce(\"Picked up. Arrows move; Shift+Up/Down change the end. Space drops, Escape cancels.\")\n      } else {\n        setGrabbed(null)\n        grabOrigin.current = null\n        announce(\"Dropped.\")\n      }\n    },\n    [announce]\n  )\n  const cancelGrab = React.useCallback(() => {\n    if (grabOrigin.current) onEventChangeRef.current?.(grabOrigin.current)\n    setGrabbed(null)\n    grabOrigin.current = null\n    announce(\"Cancelled.\")\n  }, [announce])\n\n  const nudge = React.useCallback(\n    (event: EventLike, deltaMinutes: number, deltaDays: number, part: \"both\" | \"end\") => {\n      if (!grabOrigin.current || grabOrigin.current.id !== event.id) {\n        grabOrigin.current = { id: event.id, start: event.start, end: event.end }\n      }\n      const next =\n        part === \"end\"\n          ? {\n              /** Event start. */\n              start: event.start,\n              /** Event end. */\n              end: addMinutes(\n                event.end,\n                Math.max(deltaMinutes, slotMinutes - differenceInMinutes(event.end, event.start))\n              ),\n            }\n          : {\n              /** Event start. */\n              start: addDays(addMinutes(event.start, deltaMinutes), deltaDays),\n              /** Event end. */\n              end: addDays(addMinutes(event.end, deltaMinutes), deltaDays),\n            }\n      onEventChangeRef.current?.({ id: event.id, ...next })\n      announce(`${format(next.start, \"EEE d, p\")} to ${format(next.end, \"p\")}.`)\n    },\n    [announce, slotMinutes]\n  )\n\n  const ctx = React.useMemo<SchedulerContextValue>(\n    () => ({\n      date,\n      setDate,\n      view,\n      setView,\n      range,\n      days,\n      weekStartsOn,\n      hourHeight,\n      slotMinutes,\n      minHour,\n      maxHour,\n      editable,\n      interaction,\n      creating,\n      grabbed,\n      timeToY,\n      yToMinutes,\n      bodyRef,\n      startMove,\n      startResize,\n      startCreate,\n      startMonthMove,\n      grab,\n      cancelGrab,\n      nudge,\n      announce,\n    }),\n    [\n      date,\n      setDate,\n      view,\n      setView,\n      range,\n      days,\n      weekStartsOn,\n      hourHeight,\n      slotMinutes,\n      minHour,\n      maxHour,\n      editable,\n      interaction,\n      creating,\n      grabbed,\n      timeToY,\n      yToMinutes,\n      startMove,\n      startResize,\n      startCreate,\n      startMonthMove,\n      grab,\n      cancelGrab,\n      nudge,\n      announce,\n    ]\n  )\n\n  return (\n    <SchedulerContext.Provider value={ctx}>\n      <div\n        data-slot=\"scheduler\"\n        data-view={view}\n        data-interacting={interaction?.type ?? (creating ? \"create\" : undefined)}\n        className={cn(\"flex min-h-0 flex-1 flex-col gap-3\", className)}\n        {...props}\n      >\n        {children}\n        <LiveRegion data-slot=\"scheduler-live-region\" message={announcement} />\n      </div>\n    </SchedulerContext.Provider>\n  )\n}\n\n/* ---------------------------------------------------------------------------\n * Toolbar\n * ------------------------------------------------------------------------- */\n\nfunction SchedulerToolbar({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"scheduler-toolbar\" className={cn(\"flex flex-wrap items-center gap-2\", className)} {...props} />\n}\n\nfunction shift(date: Date, view: SchedulerView, direction: 1 | -1) {\n  if (view === \"day\") return addDays(date, direction)\n  if (view === \"week\") return addWeeks(date, direction)\n  return addMonths(date, direction)\n}\n\nfunction SchedulerPrevTrigger({ asChild, children, onClick, ...props }: React.ComponentProps<typeof Button>) {\n  const { date, view, setDate } = useScheduler()\n  return (\n    <Button\n      data-slot=\"scheduler-prev-trigger\"\n      variant=\"outline\"\n      size=\"icon-sm\"\n      aria-label={`Previous ${view}`}\n      asChild={asChild}\n      onClick={(event) => {\n        onClick?.(event)\n        if (!event.defaultPrevented) setDate(shift(date, view, -1))\n      }}\n      {...props}\n    >\n      {asChild ? children : (children ?? <ChevronLeftIcon />)}\n    </Button>\n  )\n}\n\nfunction SchedulerNextTrigger({ asChild, children, onClick, ...props }: React.ComponentProps<typeof Button>) {\n  const { date, view, setDate } = useScheduler()\n  return (\n    <Button\n      data-slot=\"scheduler-next-trigger\"\n      variant=\"outline\"\n      size=\"icon-sm\"\n      aria-label={`Next ${view}`}\n      asChild={asChild}\n      onClick={(event) => {\n        onClick?.(event)\n        if (!event.defaultPrevented) setDate(shift(date, view, 1))\n      }}\n      {...props}\n    >\n      {asChild ? children : (children ?? <ChevronRightIcon />)}\n    </Button>\n  )\n}\n\nfunction SchedulerTodayTrigger({ asChild, children, onClick, ...props }: React.ComponentProps<typeof Button>) {\n  const { setDate } = useScheduler()\n  return (\n    <Button\n      data-slot=\"scheduler-today-trigger\"\n      variant=\"outline\"\n      size=\"sm\"\n      asChild={asChild}\n      onClick={(event) => {\n        onClick?.(event)\n        if (!event.defaultPrevented) setDate(startOfDay(new Date()))\n      }}\n      {...props}\n    >\n      {asChild\n        ? children\n        : (children ?? (\n            <>\n              <CalendarIcon /> Today\n            </>\n          ))}\n    </Button>\n  )\n}\n\n/** \"September 2026\", \"Sep 7 – 13, 2026\" or \"Mon, Sep 7\". */\nfunction SchedulerTitle({ className, children, ...props }: React.ComponentProps<\"h2\">) {\n  const { date, view, range } = useScheduler()\n  const text =\n    view === \"month\"\n      ? format(date, \"MMMM yyyy\")\n      : view === \"day\"\n        ? format(date, \"EEEE, MMM d, yyyy\")\n        : isSameMonth(range.start, range.end)\n          ? `${format(range.start, \"MMM d\")} – ${format(range.end, \"d, yyyy\")}`\n          : `${format(range.start, \"MMM d\")} – ${format(range.end, \"MMM d, yyyy\")}`\n  return (\n    <h2 data-slot=\"scheduler-title\" className={cn(\"text-base font-semibold tabular-nums\", className)} {...props}>\n      {children ?? text}\n    </h2>\n  )\n}\n\nfunction SchedulerViewSelect({\n  className,\n  ...props\n}: Omit<React.ComponentProps<typeof SegmentGroup>, \"value\" | \"onValueChange\">) {\n  const { view, setView } = useScheduler()\n  return (\n    <SegmentGroup\n      data-slot=\"scheduler-view-select\"\n      value={view}\n      onValueChange={({ value }) => value && setView(value as SchedulerView)}\n      className={className}\n      {...props}\n    >\n      <SegmentGroupIndicator />\n      <SegmentGroupItem value=\"day\">Day</SegmentGroupItem>\n      <SegmentGroupItem value=\"week\">Week</SegmentGroupItem>\n      <SegmentGroupItem value=\"month\">Month</SegmentGroupItem>\n    </SegmentGroup>\n  )\n}\n\n/* ---------------------------------------------------------------------------\n * Time grid (day / week)\n * ------------------------------------------------------------------------- */\n\nconst GUTTER = \"3.5rem\"\n\nfunction SchedulerTimeGrid({ className, style, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"scheduler-time-grid\"\n      className={cn(\"flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border bg-background\", className)}\n      style={{ [\"--scheduler-gutter\" as string]: GUTTER, ...style }}\n      {...props}\n    />\n  )\n}\n\nfunction SchedulerTimeGridHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"scheduler-time-grid-header\"\n      className={cn(\"grid shrink-0 border-b bg-muted/50\", className)}\n      style={{ gridTemplateColumns: \"var(--scheduler-gutter) 1fr\" }}\n      {...props}\n    />\n  )\n}\n\n/** Day headings across the top, one per visible day. */\nfunction SchedulerDayHeadings({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & { children?: (day: Date) => React.ReactNode }) {\n  const { days, setDate, setView } = useScheduler()\n  return (\n    <>\n      <div aria-hidden className=\"border-e\" />\n      <div\n        data-slot=\"scheduler-day-headings\"\n        className={cn(\"grid\", className)}\n        style={{ gridTemplateColumns: `repeat(${days.length}, minmax(0, 1fr))` }}\n        {...props}\n      >\n        {days.map((day) => (\n          <button\n            key={day.toISOString()}\n            type=\"button\"\n            data-slot=\"scheduler-day-heading\"\n            data-today={isToday(day) ? \"\" : undefined}\n            className=\"group/heading flex flex-col items-center gap-0.5 border-e py-2 text-xs text-muted-foreground outline-none last:border-e-0 hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-inset\"\n            onClick={() => {\n              setDate(day)\n              setView(\"day\")\n            }}\n          >\n            {children ? (\n              children(day)\n            ) : (\n              <>\n                <span>{format(day, \"EEE\")}</span>\n                <span className=\"flex size-7 items-center justify-center rounded-full text-base font-semibold text-foreground group-data-today/heading:bg-primary group-data-today/heading:text-primary-foreground\">\n                  {format(day, \"d\")}\n                </span>\n              </>\n            )}\n          </button>\n        ))}\n      </div>\n    </>\n  )\n}\n\n/** Strip under the headings for all-day events; render chips inside per day. */\nfunction SchedulerAllDayRow({\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"children\"> & { children: (day: Date) => React.ReactNode }) {\n  const { days } = useScheduler()\n  return (\n    <>\n      <div className=\"flex items-start justify-end border-e border-t px-1.5 py-1 text-[10px] text-muted-foreground uppercase\">\n        all day\n      </div>\n      <div\n        data-slot=\"scheduler-all-day-row\"\n        className={cn(\"grid border-t\", className)}\n        style={{ gridTemplateColumns: `repeat(${days.length}, minmax(0, 1fr))` }}\n        {...props}\n      >\n        {days.map((day) => (\n          <div\n            key={day.toISOString()}\n            data-slot=\"scheduler-all-day-cell\"\n            className=\"flex min-h-7 flex-col gap-0.5 border-e p-0.5 last:border-e-0\"\n          >\n            {children(day)}\n          </div>\n        ))}\n      </div>\n    </>\n  )\n}\n\nfunction SchedulerTimeGridBody({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  const { bodyRef, hourHeight, minHour, maxHour } = useScheduler()\n  // Scroll to a sensible hour on mount.\n  React.useEffect(() => {\n    const el = bodyRef.current\n    if (el) el.scrollTop = Math.max(0, (8 - minHour) * hourHeight - 8)\n  }, [bodyRef, hourHeight, minHour])\n  return (\n    <div\n      ref={bodyRef}\n      data-slot=\"scheduler-time-grid-body\"\n      className={cn(\"relative min-h-0 flex-1 overflow-y-auto\", className)}\n      {...props}\n    >\n      <div\n        className=\"grid\"\n        style={{ gridTemplateColumns: \"var(--scheduler-gutter) 1fr\", height: (maxHour - minHour) * hourHeight }}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nfunction SchedulerTimeGutter({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { hourHeight, minHour, maxHour } = useScheduler()\n  const hours = Array.from({ length: maxHour - minHour }, (_, i) => minHour + i)\n  return (\n    <div data-slot=\"scheduler-time-gutter\" className={cn(\"relative border-e\", className)} {...props}>\n      {hours.map((h) => (\n        <div\n          key={h}\n          className=\"absolute inset-e-1.5 -translate-y-1/2 text-[11px] text-muted-foreground tabular-nums\"\n          style={{ top: (h - minHour) * hourHeight }}\n        >\n          {h > minHour ? format(setHours(new Date(), h), \"h a\") : \"\"}\n        </div>\n      ))}\n    </div>\n  )\n}\n\n/** The columns container; hour lines are drawn behind. */\nfunction SchedulerDayColumns({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  const { days, hourHeight, minHour, maxHour } = useScheduler()\n  const hours = Array.from({ length: maxHour - minHour }, (_, i) => i)\n  return (\n    <div\n      data-slot=\"scheduler-day-columns\"\n      className={cn(\"relative grid\", className)}\n      style={{ gridTemplateColumns: `repeat(${days.length}, minmax(0, 1fr))` }}\n      {...props}\n    >\n      <div aria-hidden className=\"pointer-events-none absolute inset-0\">\n        {hours.map((i) => (\n          <div key={i} className=\"absolute inset-x-0 border-t border-border/70\" style={{ top: i * hourHeight }} />\n        ))}\n      </div>\n      {children}\n    </div>\n  )\n}\n\n/** Side-by-side lanes for overlapping events. */\nfunction layoutLanes(events: EventLike[]) {\n  const sorted = [...events]\n    .filter((e) => !e.allDay)\n    .sort((a, b) => a.start.getTime() - b.start.getTime() || b.end.getTime() - a.end.getTime())\n  const result = new Map<string, { lane: number; lanes: number }>()\n  let cluster: EventLike[] = []\n  let clusterEnd = 0\n  const flush = () => {\n    const laneEnds: number[] = []\n    const assigned: { id: string; lane: number }[] = []\n    for (const e of cluster) {\n      let lane = laneEnds.findIndex((end) => end <= e.start.getTime())\n      if (lane === -1) lane = laneEnds.length\n      laneEnds[lane] = e.end.getTime()\n      assigned.push({ id: e.id, lane })\n    }\n    for (const a of assigned) result.set(a.id, { lane: a.lane, lanes: laneEnds.length })\n    cluster = []\n    clusterEnd = 0\n  }\n  for (const e of sorted) {\n    if (cluster.length && e.start.getTime() >= clusterEnd) flush()\n    cluster.push(e)\n    clusterEnd = Math.max(clusterEnd, e.end.getTime())\n  }\n  if (cluster.length) flush()\n  return result\n}\n\nconst ColumnContext = React.createContext<{ day: Date; lanes: Map<string, { lane: number; lanes: number }> } | null>(\n  null\n)\n\n/** One day. `events` are the ones on this day (for overlap layout); `children` renders each. */\nfunction SchedulerDayColumn<T extends EventLike>({\n  date,\n  events,\n  className,\n  children,\n  onPointerDown,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  date: Date\n  /** Events shown in this column; overlaps are laid out side by side. */\n  events: T[]\n  children: (event: T) => React.ReactNode\n}) {\n  const scheduler = useScheduler()\n  const lanes = React.useMemo(() => layoutLanes(events), [events])\n  const ctx = React.useMemo(() => ({ day: date, lanes }), [date, lanes])\n  return (\n    <ColumnContext.Provider value={ctx}>\n      <div\n        data-slot=\"scheduler-day-column\"\n        data-date={date.toISOString()}\n        data-today={isToday(date) ? \"\" : undefined}\n        className={cn(\"relative border-e last:border-e-0 data-today:bg-primary/3\", className)}\n        onPointerDown={(event) => {\n          onPointerDown?.(event)\n          if (event.defaultPrevented || event.button !== 0) return\n          if ((event.target as HTMLElement).closest(\"[data-slot=scheduler-event]\")) return\n          scheduler.startCreate(date, event, scheduler.days)\n        }}\n        {...props}\n      >\n        {events.map((event) => (\n          <React.Fragment key={event.id}>{children(event)}</React.Fragment>\n        ))}\n      </div>\n    </ColumnContext.Provider>\n  )\n}\n\nconst EventContext = React.createContext<EventLike | null>(null)\n\nfunction SchedulerEvent({\n  value,\n  start,\n  end,\n  className,\n  style,\n  children,\n  onPointerDown,\n  onKeyDown,\n  onBlur,\n  ...props\n}: React.ComponentProps<\"div\"> & { value: string; start: Date; end: Date }) {\n  const s = useScheduler()\n  const column = React.useContext(ColumnContext)\n  const live = s.interaction?.id === value ? s.interaction : null\n  const shownStart = live ? live.start : start\n  const shownEnd = live ? live.end : end\n  // While a move crosses days the event stays in its original column but shifts visually.\n  const dayOffset = column ? differenceInCalendarDays(startOfDay(shownStart), column.day) : 0\n  const lane = column?.lanes.get(value) ?? { lane: 0, lanes: 1 }\n  const top = s.timeToY(shownStart)\n  const height = Math.max(s.hourHeight / 4, (differenceInMinutes(shownEnd, shownStart) * s.hourHeight) / 60)\n  const isGrabbed = s.grabbed === value\n  const eventLike = React.useMemo(() => ({ id: value, start, end }), [value, start, end])\n  return (\n    <EventContext.Provider value={eventLike}>\n      <div\n        {...props}\n        data-slot=\"scheduler-event\"\n        data-value={value}\n        data-dragging={live?.type}\n        data-grabbed={isGrabbed ? \"\" : undefined}\n        tabIndex={s.editable ? 0 : undefined}\n        aria-pressed={s.editable ? isGrabbed : undefined}\n        aria-label={`${format(shownStart, \"EEE d, p\")} to ${format(shownEnd, \"p\")}`}\n        className={cn(\n          \"group/event absolute flex flex-col overflow-hidden rounded-md border border-primary/30 bg-primary/15 px-1.5 py-1 text-xs text-foreground outline-none select-none\",\n          s.editable && \"cursor-grab active:cursor-grabbing\",\n          \"focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-ring/50 data-dragging:z-20 data-dragging:shadow-lg data-grabbed:ring-2 data-grabbed:ring-primary\",\n          className\n        )}\n        style={{\n          top,\n          height,\n          left: `calc(${(lane.lane / lane.lanes) * 100}% + 2px)`,\n          width: `calc(${100 / lane.lanes}% - 4px)`,\n          transform: dayOffset ? `translateX(calc(${dayOffset * 100}% + ${dayOffset * 1}px))` : undefined,\n          ...style,\n        }}\n        onPointerDown={(event) => {\n          onPointerDown?.(event)\n          if (event.defaultPrevented || event.button !== 0) return\n          if ((event.target as HTMLElement).closest(\"[data-slot=scheduler-event-resize-handle], button, a\")) return\n          s.startMove(eventLike, event, s.days)\n        }}\n        onKeyDown={(event) => {\n          onKeyDown?.(event)\n          if (event.defaultPrevented || !s.editable || event.target !== event.currentTarget) return\n          if (event.key === \" \" || event.key === \"Enter\") {\n            event.preventDefault()\n            s.grab(isGrabbed ? null : value)\n            return\n          }\n          if (!isGrabbed) return\n          const step = s.slotMinutes\n          if (event.key === \"ArrowUp\" || event.key === \"ArrowDown\") {\n            event.preventDefault()\n            const delta = event.key === \"ArrowUp\" ? -step : step\n            s.nudge(eventLike, delta, 0, event.shiftKey ? \"end\" : \"both\")\n          } else if (event.key === \"ArrowLeft\" || event.key === \"ArrowRight\") {\n            event.preventDefault()\n            s.nudge(eventLike, 0, event.key === \"ArrowLeft\" ? -1 : 1, \"both\")\n          } else if (event.key === \"Escape\") {\n            event.preventDefault()\n            s.cancelGrab()\n          }\n        }}\n        onBlur={(event) => {\n          onBlur?.(event)\n          if (isGrabbed && !event.currentTarget.contains(event.relatedTarget as Node | null)) s.grab(null)\n        }}\n      >\n        {children}\n      </div>\n    </EventContext.Provider>\n  )\n}\n\nfunction SchedulerEventTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"scheduler-event-title\" className={cn(\"truncate font-medium\", className)} {...props} />\n}\n\n/** \"9:00 – 9:45 AM\"; reflects the live drag. */\nfunction SchedulerEventTime({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  const s = useScheduler()\n  const e = React.useContext(EventContext)\n  if (!e) return null\n  const live = s.interaction?.id === e.id ? s.interaction : null\n  const start = live ? live.start : e.start\n  const end = live ? live.end : e.end\n  return (\n    <div\n      data-slot=\"scheduler-event-time\"\n      className={cn(\"truncate text-[11px] tabular-nums opacity-80\", className)}\n      {...props}\n    >\n      {children ?? `${format(start, \"h:mm\")} – ${format(end, \"h:mm a\")}`}\n    </div>\n  )\n}\n\nfunction SchedulerEventResizeHandle({ className, onPointerDown, ...props }: React.ComponentProps<\"div\">) {\n  const s = useScheduler()\n  const e = React.useContext(EventContext)\n  if (!s.editable || !e) return null\n  return (\n    <div\n      data-slot=\"scheduler-event-resize-handle\"\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      className={cn(\n        \"absolute inset-x-0 bottom-0 h-2 cursor-ns-resize touch-none after:absolute after:inset-x-1/2 after:bottom-0.5 after:h-0.5 after:w-6 after:-translate-x-1/2 after:rounded-full after:bg-primary/50 after:opacity-0 group-hover/event:after:opacity-100\",\n        className\n      )}\n      onPointerDown={(event) => {\n        onPointerDown?.(event)\n        if (event.defaultPrevented || event.button !== 0) return\n        s.startResize(e, event)\n      }}\n      {...props}\n    />\n  )\n}\n\n/** Outline of the event being created by dragging; renders nothing when idle. */\nfunction SchedulerCreatePreview({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  const s = useScheduler()\n  if (!s.creating) return null\n  const index = s.days.findIndex((d) => isSameDay(d, s.creating!.start))\n  if (index === -1) return null\n  const top = s.timeToY(s.creating.start)\n  const height = (differenceInMinutes(s.creating.end, s.creating.start) * s.hourHeight) / 60\n  return (\n    <div\n      data-slot=\"scheduler-create-preview\"\n      aria-hidden\n      className={cn(\n        \"pointer-events-none absolute z-20 rounded-md border-2 border-dashed border-primary/60 bg-primary/10 px-1.5 py-1 text-[11px] text-primary tabular-nums\",\n        className\n      )}\n      style={{\n        top,\n        height,\n        left: `calc(${(index / s.days.length) * 100}% + 2px)`,\n        width: `calc(${100 / s.days.length}% - 4px)`,\n      }}\n      {...props}\n    >\n      {children ?? `${format(s.creating.start, \"h:mm\")} – ${format(s.creating.end, \"h:mm a\")}`}\n    </div>\n  )\n}\n\n/** Red line at the current time in today's column. */\nfunction SchedulerNowIndicator({ className, ...props }: React.ComponentProps<\"div\">) {\n  const s = useScheduler()\n  const [now, setNow] = React.useState(() => new Date())\n  React.useEffect(() => {\n    const timer = setInterval(() => setNow(new Date()), 60_000)\n    return () => clearInterval(timer)\n  }, [])\n  const index = s.days.findIndex((d) => isToday(d))\n  if (index === -1) return null\n  return (\n    <div\n      data-slot=\"scheduler-now-indicator\"\n      aria-hidden\n      className={cn(\"pointer-events-none absolute z-10 h-px bg-destructive\", className)}\n      style={{ top: s.timeToY(now), left: `${(index / s.days.length) * 100}%`, width: `${100 / s.days.length}%` }}\n      {...props}\n    >\n      <span className=\"absolute -top-1 -left-1 size-2 rounded-full bg-destructive\" />\n    </div>\n  )\n}\n\n/* ---------------------------------------------------------------------------\n * Month grid\n * ------------------------------------------------------------------------- */\n\nfunction SchedulerMonthGrid({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"scheduler-month-grid\"\n      className={cn(\"flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border bg-background\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SchedulerMonthHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { days } = useScheduler()\n  return (\n    <div\n      data-slot=\"scheduler-month-header\"\n      className={cn(\"grid grid-cols-7 border-b bg-muted/50 text-xs text-muted-foreground\", className)}\n      {...props}\n    >\n      {days.slice(0, 7).map((d) => (\n        <div key={d.toISOString()} className=\"border-e px-2 py-1.5 text-center font-medium last:border-e-0\">\n          {format(d, \"EEE\")}\n        </div>\n      ))}\n    </div>\n  )\n}\n\nfunction SchedulerMonthBody({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  const { days } = useScheduler()\n  return (\n    <div\n      data-slot=\"scheduler-month-body\"\n      className={cn(\"grid min-h-0 flex-1 grid-cols-7 overflow-y-auto\", className)}\n      style={{ gridTemplateRows: `repeat(${Math.ceil(days.length / 7)}, minmax(6rem, 1fr))` }}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\nfunction SchedulerMonthCell({\n  date,\n  className,\n  children,\n  onClick,\n  ...props\n}: React.ComponentProps<\"div\"> & { date: Date }) {\n  const s = useScheduler()\n  const outside = !isSameMonth(date, s.date)\n  return (\n    <div\n      data-slot=\"scheduler-month-cell\"\n      data-date={date.toISOString()}\n      data-today={isToday(date) ? \"\" : undefined}\n      data-outside={outside ? \"\" : undefined}\n      className={cn(\n        \"group/cell flex min-h-0 flex-col gap-0.5 border-e border-b p-1 text-xs data-outside:bg-muted/30 data-outside:text-muted-foreground nth-[7n]:border-e-0\",\n        className\n      )}\n      onClick={(event) => {\n        onClick?.(event)\n        if (event.defaultPrevented) return\n        if ((event.target as HTMLElement).closest(\"[data-slot=scheduler-month-event], button, a\")) return\n        s.setDate(date)\n      }}\n      {...props}\n    >\n      <button\n        type=\"button\"\n        data-slot=\"scheduler-month-day\"\n        className=\"mb-0.5 flex size-6 items-center justify-center self-start rounded-full text-xs font-medium outline-none group-data-today/cell:bg-primary group-data-today/cell:text-primary-foreground hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/50\"\n        onClick={(event) => {\n          event.stopPropagation()\n          s.setDate(date)\n          s.setView(\"day\")\n        }}\n      >\n        {format(date, \"d\")}\n      </button>\n      <div className=\"flex min-h-0 flex-1 flex-col gap-0.5 overflow-hidden\">{children}</div>\n    </div>\n  )\n}\n\n/** Compact chip for the month view; draggable between cells. */\nfunction SchedulerMonthEvent({\n  value,\n  start,\n  end,\n  className,\n  children,\n  onPointerDown,\n  ...props\n}: React.ComponentProps<\"div\"> & { value: string; start: Date; end: Date }) {\n  const s = useScheduler()\n  const live = s.interaction?.id === value ? s.interaction : null\n  const eventLike = React.useMemo(() => ({ id: value, start, end }), [value, start, end])\n  return (\n    <div\n      {...props}\n      data-slot=\"scheduler-month-event\"\n      data-value={value}\n      data-dragging={live ? \"\" : undefined}\n      tabIndex={s.editable ? 0 : undefined}\n      aria-label={`${format(start, \"EEE d, p\")}`}\n      className={cn(\n        \"flex cursor-grab items-center gap-1 truncate rounded-sm border border-primary/30 bg-primary/15 px-1.5 py-px text-[11px]/4 outline-none select-none focus-visible:ring-2 focus-visible:ring-ring/50 active:cursor-grabbing data-dragging:opacity-50\",\n        className\n      )}\n      onPointerDown={(event) => {\n        onPointerDown?.(event)\n        if (event.defaultPrevented || event.button !== 0) return\n        s.startMonthMove(eventLike, event)\n      }}\n    >\n      {children}\n    </div>\n  )\n}\n\nfunction SchedulerMonthMore({ className, ...props }: React.ComponentProps<\"button\">) {\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"scheduler-month-more\"\n      className={cn(\n        \"self-start rounded-sm px-1 text-[11px] text-muted-foreground hover:bg-muted hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Scheduler,\n  SchedulerToolbar,\n  SchedulerPrevTrigger,\n  SchedulerNextTrigger,\n  SchedulerTodayTrigger,\n  SchedulerTitle,\n  SchedulerViewSelect,\n  SchedulerTimeGrid,\n  SchedulerTimeGridHeader,\n  SchedulerDayHeadings,\n  SchedulerAllDayRow,\n  SchedulerTimeGridBody,\n  SchedulerTimeGutter,\n  SchedulerDayColumns,\n  SchedulerDayColumn,\n  SchedulerEvent,\n  SchedulerEventTitle,\n  SchedulerEventTime,\n  SchedulerEventResizeHandle,\n  SchedulerCreatePreview,\n  SchedulerNowIndicator,\n  SchedulerMonthGrid,\n  SchedulerMonthHeader,\n  SchedulerMonthBody,\n  SchedulerMonthCell,\n  SchedulerMonthEvent,\n  SchedulerMonthMore,\n  useScheduler,\n  layoutLanes,\n  visibleRange,\n  type SchedulerView,\n  type SchedulerEventChange,\n}\n"
     }
   ],
   "docs": "## Scheduler (calendar)\n`src/components/ui/scheduler.tsx` is a compositional, data-agnostic calendar. The consumer owns\nevents and renders them with the parts; the root owns the anchor `date` and `view`\n(day|week|month, both controllable), the time-grid geometry (`hourHeight`, `slotMinutes`,\n`minHour`/`maxHour`, `weekStartsOn`), the interactions, and reports `onEventChange({ id, start,\nend })` and `onCreate({ start, end })` snapped to `slotMinutes`. Parts: `SchedulerToolbar` >\n`Prev/Next/TodayTrigger`, `SchedulerTitle`, `SchedulerViewSelect` (SegmentGroup);\n`SchedulerTimeGrid` > `SchedulerTimeGridHeader` > `SchedulerDayHeadings` (click a day → day view)\n+ `SchedulerAllDayRow` (render prop per day) and `SchedulerTimeGridBody` (scrolls to 8am on mount)\n> `SchedulerTimeGutter` + `SchedulerDayColumns` > `SchedulerDayColumn date= events=` (render-prop\nchildren per event; computes side-by-side lanes for overlaps via `layoutLanes`; pointer-down on\nempty time starts drag-to-create) > `SchedulerEvent value= start= end=` (absolute by time;\ndraggable to another time/day, `data-dragging` move|resize, `data-grabbed`) > `SchedulerEventTitle`,\n`SchedulerEventTime` (reflects the live drag), `SchedulerEventResizeHandle`; `SchedulerNowIndicator`,\n`SchedulerCreatePreview`. `SchedulerMonthGrid` > `SchedulerMonthHeader` + `SchedulerMonthBody` >\n`SchedulerMonthCell date=` (`data-today`/`data-outside`, day number → day view) > `SchedulerMonthEvent`\n(chip draggable between cells; shifts by whole days) + `SchedulerMonthMore`. Keyboard on an event:\nSpace/Enter picks up, ↑/↓ move by a slot, ←/→ move a day, Shift+↑/↓ change the end, Escape cancels;\na live region announces. Event parts spread `props` first so an `asChild` wrapper (e.g.\n`PopoverTrigger`) cannot override their `data-slot` or pointer handlers. `useScheduler()` exposes\n`days`, `range`, `timeToY`, `setDate`, `setView`. `src/demo/calendar/` is the reference\n(`/projects/calendar`): categories with colors, all-day strip, overlapping meetings in lanes, event popover\n(title, category, delete), new-event dialog from drag-to-create or the toolbar, undo/redo."