{
  "id": "calendar-popover",
  "name": "CalendarPopover",
  "kind": "component",
  "status": "stable-reference",
  "summary": "Date picker popover based on Task Manager DateDropdown and nodedc-calendar-shell styling.",
  "implementation": {
    "baseLibrary": "react-day-picker@9.5.0",
    "localePackage": "date-fns@4.1.0",
    "launcherComponent": "NodeDcDateField renders NodeDcDropdown + NodeDcCalendar; NodeDcCalendar delegates the month grid/range math to DayPicker instead of a hand-written grid.",
    "isolation": "Calendar logic and styling live in src/shared/nodedc-ui/Calendar.tsx and src/shared/nodedc-ui/calendar.css. Feature screens must consume NodeDcDateField or NodeDcCalendar directly instead of creating local date wrappers."
  },
  "sourceRefs": [
    {
      "project": "nodedc_taskmanager",
      "file": "plane-src/apps/web/core/components/dropdowns/date.tsx",
      "exports": ["DateDropdown"]
    },
    {
      "project": "nodedc_taskmanager",
      "file": "plane-src/apps/web/styles/globals.css",
      "classes": ["nodedc-calendar-shell"]
    },
    {
      "project": "nodedc_launcher",
      "file": "src/shared/nodedc-ui/Calendar.tsx",
      "exports": [
        "NodeDcDateField",
        "NodeDcCalendar",
        "NodeDcDateFieldProps",
        "NodeDcCalendarProps",
        "NodeDcCalendarRangePreview",
        "NodeDcDateInput",
        "NodeDcWeekStartsOn"
      ]
    },
    {
      "project": "nodedc_launcher",
      "file": "src/shared/nodedc-ui/calendar.css",
      "classes": ["nodedc-ui-calendar", "nodedc-ui-calendar-frame", "nodedc-ui-date-trigger"]
    },
    {
      "project": "nodedc_launcher",
      "file": "src/widgets/admin-overlay/AdminOverlay.tsx",
      "consumers": ["ClientsSection", "ClientEditorModal", "InvitesSection"]
    }
  ],
  "anatomy": [
    "date trigger button",
    "portal dropdown surface",
    "calendar shell",
    "month/year controls",
    "day buttons",
    "single or range mode"
  ],
  "visualContract": {
    "surface": "DropdownSurface",
    "calendarRadius": "1.1rem",
    "dayButtonRadius": "999px",
    "selectedRangeFill": "continuous accent row fill under the day numbers; row breaks create rounded start/end caps",
    "todayMarker": "today is always a circular ring marker; inside an accent range the ring uses the dark on-accent color and the day cell remains range-filled, not solid-filled",
    "outsideDays": "muted"
  },
  "behaviorContract": [
    "Default placement bottom-start.",
    "Render through portal.",
    "Support minDate, maxDate, clearable value, closeOnSelect, empty labels, popover width, and start-of-week preference.",
    "Close on select when closeOnSelect is true.",
    "When rangePreview or rangeStart/rangeEnd are present, render a continuous accent range preview while still selecting one field value.",
    "When only one date is present, render a single circular selected date.",
    "Today must not be solid-filled. It uses an inset circular ring both outside and inside a range; inside a range the row fill remains visible behind the ring."
  ],
  "currentConsumers": [
    "Client demo/contract/paid dates",
    "Invite expiration dates",
    "Any future date field in admin modals and tables"
  ]
}