picocrank 1.14.1 → 1.16.0

package/logo.svg

@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg
-   width="24"
-   height="24"
-   viewBox="0 0 24 24"
+   width="512"
+   height="512"
+   viewBox="0 0 512 512"
    version="1.1"
    id="svg2"
    sodipodi:docname="logo.svg"
@@ -25,9 +25,9 @@
      inkscape:pageopacity="0"
      inkscape:pagecheckerboard="1"
      inkscape:deskcolor="#d1d1d1"
-     inkscape:zoom="22.627417"
-     inkscape:cx="35.465825"
-     inkscape:cy="-0.41984466"
+     inkscape:zoom="2"
+     inkscape:cx="114"
+     inkscape:cy="158.25"
      inkscape:window-width="3840"
      inkscape:window-height="2126"
      inkscape:window-x="2160"
@@ -42,12 +42,12 @@
      stroke-width="1.5"
      id="g2">
     <path
-       d="M21.011 14.097c.522-.141.783-.212.886-.346c.103-.135.103-.351.103-.784v-1.934c0-.433 0-.65-.103-.784s-.364-.205-.886-.345c-1.95-.526-3.171-2.565-2.668-4.503c.139-.533.208-.8.142-.956s-.256-.264-.635-.479l-1.725-.98c-.372-.21-.558-.316-.725-.294s-.356.21-.733.587c-1.459 1.455-3.873 1.455-5.333 0c-.377-.376-.565-.564-.732-.587c-.167-.022-.353.083-.725.295l-1.725.979c-.38.215-.57.323-.635.48c-.066.155.003.422.141.955c.503 1.938-.718 3.977-2.669 4.503c-.522.14-.783.21-.886.345S2 10.6 2 11.033v1.934c0 .433 0 .65.103.784s.364.205.886.346c1.95.526 3.171 2.565 2.668 4.502c-.139.533-.208.8-.142.956s.256.264.635.48l1.725.978c.372.212.558.317.725.295s.356-.21.733-.587c1.46-1.457 3.876-1.457 5.336 0c.377.376.565.564.732.587c.167.022.353-.083.726-.295l1.724-.979c.38-.215.57-.323.635-.48s-.003-.422-.141-.955c-.504-1.937.716-3.976 2.666-4.502"
+       d="m 447.76523,291.03986 c 10.92171,-2.97926 16.38257,-4.47944 18.53762,-7.31078 2.15507,-2.85247 2.15507,-7.41641 2.15507,-16.56544 v -40.86426 c 0,-9.14903 0,-13.73411 -2.15507,-16.56545 -2.15505,-2.83134 -7.61591,-4.33152 -18.53762,-7.28964 -40.79956,-11.11407 -66.34635,-54.1969 -55.82216,-95.14567 2.90828,-11.26197 4.35196,-16.903525 2.97105,-20.199705 -1.38091,-3.296193 -5.35624,-5.578171 -13.286,-10.120992 L 345.53621,56.271118 c -7.78328,-4.437171 -11.67494,-6.676887 -15.16906,-6.212043 -3.49411,0.464844 -7.44851,4.437171 -15.33643,12.402959 -30.52643,30.743272 -81.03417,30.743272 -111.58152,0 -7.8879,-7.944653 -11.8214,-11.916978 -15.31552,-12.402959 -3.49411,-0.464844 -7.38576,1.753736 -15.16906,6.233169 l -36.0919,20.685679 c -7.95067,4.542821 -11.92602,6.824799 -13.286,10.142117 -1.38091,3.275055 0.0628,8.91661 2.95012,20.17858 10.52418,40.94877 -15.0226,84.0316 -55.84307,95.14567 -10.92172,2.95812 -16.382581,4.43717 -18.537633,7.28964 -2.155053,2.85246 -2.155053,7.41642 -2.155053,16.56545 v 40.86426 c 0,9.14903 0,13.7341 2.155053,16.56544 2.155052,2.83134 7.615913,4.33152 18.537633,7.31078 40.79955,11.11405 66.34634,54.1969 55.82215,95.12453 -2.90828,11.26197 -4.35195,16.90352 -2.97105,20.19971 1.38091,3.29619 5.35625,5.57816 13.28601,10.1421 l 36.0919,20.66456 c 7.78331,4.47943 11.67494,6.69802 15.16906,6.23317 3.49411,-0.46485 7.44854,-4.43717 15.33644,-12.40295 30.54735,-30.78553 81.09693,-30.78553 111.64428,0 7.88791,7.94466 11.8214,11.91698 15.31552,12.40295 3.49411,0.46485 7.38577,-1.75374 15.18998,-6.23317 l 36.07098,-20.68568 c 7.95069,-4.54282 11.92602,-6.82479 13.28599,-10.14212 1.36,-3.31731 -0.0627,-8.9166 -2.95011,-20.17857 -10.54511,-40.92763 14.98075,-84.01048 55.78031,-95.12453"
        id="path2"
-       style="fill:#42b883;fill-opacity:1" />
+       style="fill:#42b883;fill-opacity:1;stroke-width:20;stroke-dasharray:none" />
     <path
-       d="m 15.63442,11.75922 a 3.5,3.5 0 1 1 -6.9999999,0 3.5,3.5 0 0 1 6.9999999,0"
+       d="m 338.03417,247.36355 a 74.66655,74.66655 0 1 1 -149.3331,0 74.66655,74.66655 0 0 1 149.3331,0"
        id="path1"
-       style="fill:#35495e;fill-opacity:1" />
+       style="fill:#35495e;fill-opacity:1;stroke-width:20;stroke-dasharray:none" />
   </g>
 </svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picocrank",
-  "version": "1.14.1",
+  "version": "1.16.0",
   "description": "A set of zero dependency Vue components built on the Femtocrank global CSS theme.",
   "main": "vite.config.js",
   "scripts": {
@@ -18,14 +18,14 @@
     "url": "https://github.com/jamesread/picocrank/issues"
   },
   "dependencies": {
-    "@hugeicons/core-free-icons": "^4.0.0",
+    "@hugeicons/core-free-icons": "^4.1.1",
     "@hugeicons/vue": "^1.0.5",
-    "@vitejs/plugin-vue": "^6.0.4",
+    "@vitejs/plugin-vue": "^6.0.6",
     "femtocrank": "^2.5.0",
-    "unplugin-vue-components": "^31.0.0",
-    "vite": "^7.3.1",
-    "vue": "^3.5.30",
-    "vue-router": "^5.0.3"
+    "unplugin-vue-components": "^32.0.0",
+    "vite": "^8.0.10",
+    "vue": "^3.5.33",
+    "vue-router": "^5.0.6"
   },
   "devDependencies": {
     "semantic-release": "^25.0.3"

package/vue/components/Calendar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, watch, onUnmounted } from 'vue'
 
 export interface CalendarEvent {
   id: string | number
@@ -10,12 +10,31 @@ export interface CalendarEvent {
   [key: string]: any
 }
 
+/** Payload for `event-move-request`: call `respond(true)` after a successful commit, or `respond(false)` to decline (e.g. failed server update). */
+export interface CalendarEventMoveRequest {
+  event: CalendarEvent
+  /** Calendar cell where the drag started (for multi-day events, the visible segment day). */
+  sourceDate: Date
+  /** Calendar cell where the event was dropped. */
+  targetDate: Date
+  /** Invoke exactly once with the outcome. If omitted until timeout, the move is treated as rejected. */
+  respond: (accepted: boolean) => void
+}
+
 export interface CalendarProps {
   events: CalendarEvent[]
   monthNames?: string[]
   dayNames?: string[]
   loading?: boolean
   error?: string | null
+  /** When true, events can be dragged to another day. */
+  eventDragEnabled?: boolean
+  /**
+   * Max time (ms) to wait for `respond()` on `event-move-request`.
+   * If `respond` is not called in time, the move is rejected and a warning is logged.
+   * Set to `0` to disable the timeout (not recommended if listeners may omit `respond`).
+   */
+  eventMoveResponseTimeoutMs?: number
   // Formatter functions
   getEventDate?: (event: CalendarEvent) => Date | null
   getEventDateRange?: (event: CalendarEvent) => { start: Date | null; end: Date | null }
@@ -35,14 +54,20 @@ const props = withDefaults(defineProps<CalendarProps>(), {
   dayNames: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
   loading: false,
   error: null,
+  eventDragEnabled: true,
+  eventMoveResponseTimeoutMs: 15000,
   showNavigation: true,
 })
 
 const emit = defineEmits<{
   'event-click': [event: CalendarEvent]
   'date-click': [date: Date]
+  'date-range-select': [start: Date, end: Date]
   'month-change': [month: number, year: number]
   'event-context-menu': [event: CalendarEvent, mouseEvent: MouseEvent]
+  'event-move-request': [payload: CalendarEventMoveRequest]
+  'event-moved': [payload: { event: CalendarEvent; sourceDate: Date; targetDate: Date }]
+  'event-move-rejected': [payload: { event: CalendarEvent; sourceDate: Date; targetDate: Date }]
 }>()
 
 // Internal calendar state
@@ -316,16 +341,239 @@ function handleEventClick(event: CalendarEvent) {
   emit('event-click', event)
 }
 
-function handleDateClick(date: Date) {
-  emit('date-click', date)
-}
-
 function handleContextMenu(event: CalendarEvent, mouseEvent: MouseEvent) {
   mouseEvent.preventDefault()
   mouseEvent.stopPropagation()
   emit('event-context-menu', event, mouseEvent)
 }
-import { watch } from 'vue'
+
+// --- Date range selection (click / drag) ---
+
+function startOfDay(d: Date): Date {
+  const x = new Date(d)
+  x.setHours(0, 0, 0, 0)
+  return x
+}
+
+function toDateKey(d: Date): string {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+}
+
+function dateFromKey(key: string): Date {
+  const [y, m, day] = key.split('-').map(Number)
+  return startOfDay(new Date(y, m - 1, day))
+}
+
+const isDraggingRange = ref(false)
+const rangeDragAnchor = ref<Date | null>(null)
+const rangeDragEnd = ref<Date | null>(null)
+const selectedRangeStart = ref<Date | null>(null)
+const selectedRangeEnd = ref<Date | null>(null)
+
+function isEventTarget(ev: Event): boolean {
+  const t = ev.target
+  if (!(t instanceof Node)) return false
+  return Boolean((t as HTMLElement).closest?.('.calendar-event'))
+}
+
+function getRangeBounds(): { lo: Date; hi: Date } | null {
+  const a = rangeDragAnchor.value
+  const b = rangeDragEnd.value
+  if (!a || !b) return null
+  const sa = startOfDay(a).getTime()
+  const sb = startOfDay(b).getTime()
+  if (sa <= sb) return { lo: startOfDay(a), hi: startOfDay(b) }
+  return { lo: startOfDay(b), hi: startOfDay(a) }
+}
+
+function rangeHighlightForDate(date: Date): 'none' | 'single' | 'start' | 'end' | 'middle' {
+  const bounds = isDraggingRange.value
+    ? getRangeBounds()
+    : selectedRangeStart.value && selectedRangeEnd.value
+      ? (() => {
+          const sa = startOfDay(selectedRangeStart.value!).getTime()
+          const sb = startOfDay(selectedRangeEnd.value!).getTime()
+          const lo = sa <= sb ? startOfDay(selectedRangeStart.value!) : startOfDay(selectedRangeEnd.value!)
+          const hi = sa <= sb ? startOfDay(selectedRangeEnd.value!) : startOfDay(selectedRangeStart.value!)
+          return { lo, hi }
+        })()
+      : null
+  if (!bounds) return 'none'
+  const t = startOfDay(date).getTime()
+  if (t < bounds.lo.getTime() || t > bounds.hi.getTime()) return 'none'
+  if (bounds.lo.getTime() === bounds.hi.getTime()) return 'single'
+  if (t === bounds.lo.getTime()) return 'start'
+  if (t === bounds.hi.getTime()) return 'end'
+  return 'middle'
+}
+
+function onWindowTouchMove(ev: TouchEvent): void {
+  if (!isDraggingRange.value || ev.touches.length === 0) return
+  const { clientX, clientY } = ev.touches[0]
+  const el = document.elementFromPoint(clientX, clientY)
+  if (!el) return
+  const cell = (el as HTMLElement).closest?.('[data-calendar-date]')
+  const key = cell?.dataset?.calendarDate
+  if (!key) return
+  rangeDragEnd.value = dateFromKey(key)
+}
+
+function detachRangePointerListeners(): void {
+  window.removeEventListener('mouseup', endRangeSelectionFromPointer)
+  window.removeEventListener('blur', endRangeSelectionFromPointer)
+  window.removeEventListener('touchmove', onWindowTouchMove)
+  window.removeEventListener('touchend', endRangeSelectionFromPointer)
+  window.removeEventListener('touchcancel', endRangeSelectionFromPointer)
+}
+
+function endRangeSelectionFromPointer(): void {
+  if (!isDraggingRange.value) return
+  const bounds = getRangeBounds()
+  isDraggingRange.value = false
+  rangeDragAnchor.value = null
+  rangeDragEnd.value = null
+  detachRangePointerListeners()
+
+  if (!bounds) return
+
+  selectedRangeStart.value = new Date(bounds.lo)
+  selectedRangeEnd.value = new Date(bounds.hi)
+  emit('date-range-select', new Date(bounds.lo), new Date(bounds.hi))
+
+  if (bounds.lo.getTime() === bounds.hi.getTime()) {
+    emit('date-click', new Date(bounds.lo))
+  }
+}
+
+function onDayPointerDown(date: Date, ev: MouseEvent | TouchEvent): void {
+  if (isEventTarget(ev)) return
+  if (ev instanceof MouseEvent && ev.button !== 0) return
+
+  const d = startOfDay(date)
+  isDraggingRange.value = true
+  rangeDragAnchor.value = new Date(d)
+  rangeDragEnd.value = new Date(d)
+  window.addEventListener('mouseup', endRangeSelectionFromPointer)
+  window.addEventListener('blur', endRangeSelectionFromPointer)
+  window.addEventListener('touchmove', onWindowTouchMove, { passive: true })
+  window.addEventListener('touchend', endRangeSelectionFromPointer)
+  window.addEventListener('touchcancel', endRangeSelectionFromPointer)
+  if (ev instanceof MouseEvent) {
+    ev.preventDefault()
+  }
+}
+
+function onDayPointerEnter(date: Date): void {
+  if (!isDraggingRange.value) return
+  rangeDragEnd.value = startOfDay(date)
+}
+
+onUnmounted(() => {
+  detachRangePointerListeners()
+})
+
+// --- Calendar event drag and drop (HTML5) ---
+
+const CALENDAR_EVENT_DRAG_MIME = 'application/x-picocrank-calendar-event-id'
+
+const draggingEventId = ref<string | number | null>(null)
+const draggingSourceDate = ref<Date | null>(null)
+const dragOverTargetDate = ref<Date | null>(null)
+const eventMoveLocked = ref(false)
+
+function sameCalendarDay(a: Date | null, b: Date | null): boolean {
+  if (!a || !b) return false
+  return startOfDay(a).getTime() === startOfDay(b).getTime()
+}
+
+function onEventDragStart(event: CalendarEvent, sourceCellDate: Date, dragEvent: DragEvent): void {
+  if (!props.eventDragEnabled) {
+    dragEvent.preventDefault()
+    return
+  }
+  draggingEventId.value = event.id
+  draggingSourceDate.value = startOfDay(sourceCellDate)
+  dragEvent.dataTransfer?.setData(CALENDAR_EVENT_DRAG_MIME, String(event.id))
+  dragEvent.dataTransfer?.setData('text/plain', event.title)
+  if (dragEvent.dataTransfer) {
+    dragEvent.dataTransfer.effectAllowed = 'move'
+  }
+}
+
+function onEventDragEnd(): void {
+  draggingEventId.value = null
+  draggingSourceDate.value = null
+  dragOverTargetDate.value = null
+}
+
+function onDayDragOver(dayDate: Date, ev: DragEvent): void {
+  if (!props.eventDragEnabled || draggingEventId.value === null) return
+  ev.preventDefault()
+  if (ev.dataTransfer) {
+    ev.dataTransfer.dropEffect = 'move'
+  }
+  dragOverTargetDate.value = startOfDay(dayDate)
+}
+
+function onDayDrop(dayDate: Date, ev: DragEvent): void {
+  ev.preventDefault()
+  dragOverTargetDate.value = null
+  if (!props.eventDragEnabled) return
+
+  const idStr = ev.dataTransfer?.getData(CALENDAR_EVENT_DRAG_MIME)
+  if (!idStr) return
+
+  const moved = props.events.find(e => String(e.id) === idStr)
+  if (!moved) return
+
+  const sourceRaw = draggingSourceDate.value
+  if (!sourceRaw) return
+
+  const targetDate = startOfDay(dayDate)
+  const sourceDate = startOfDay(sourceRaw)
+  if (targetDate.getTime() === sourceDate.getTime()) return
+  if (eventMoveLocked.value) return
+  eventMoveLocked.value = true
+
+  const sourceClone = new Date(sourceDate)
+  const targetClone = new Date(targetDate)
+
+  let settled = false
+  let watchdog: ReturnType<typeof setTimeout> | undefined
+
+  function respond(accepted: boolean): void {
+    if (settled) return
+    settled = true
+    if (watchdog !== undefined) {
+      clearTimeout(watchdog)
+    }
+    eventMoveLocked.value = false
+    if (accepted) {
+      emit('event-moved', { event: moved, sourceDate: sourceClone, targetDate: targetClone })
+    } else {
+      emit('event-move-rejected', { event: moved, sourceDate: sourceClone, targetDate: targetClone })
+    }
+  }
+
+  emit('event-move-request', {
+    event: moved,
+    sourceDate: sourceClone,
+    targetDate: targetClone,
+    respond,
+  })
+
+  const timeoutMs = props.eventMoveResponseTimeoutMs
+  if (timeoutMs > 0) {
+    watchdog = setTimeout(() => {
+      if (!settled) {
+        console.warn(
+          '[Calendar] event-move-request: respond() was not called before timeout; treating as rejected.'
+        )
+        respond(false)
+      }
+    }, timeoutMs)
+  }
+}
 
 // Sync grid start when controlled month/year props change (but not during scrolling)
 watch([currentMonth, currentYear], () => {
@@ -352,7 +600,14 @@ watch([currentMonth, currentYear], () => {
     <div class="calendar-container">
       <div v-if="error" class="calendar-error">{{ error }}</div>
       <div v-if="loading" class="calendar-loading-overlay">Loading…</div>
-      <div class="calendar-grid" @wheel.prevent="handleWheel">
+      <div
+        class="calendar-grid"
+        :class="{
+          'is-dragging-range': isDraggingRange,
+          'is-dragging-event': draggingEventId !== null
+        }"
+        @wheel.prevent="handleWheel"
+      >
         <!-- Day headers -->
         <div v-for="day in dayNames" :key="day" class="day-header">{{ day }}</div>
 
@@ -361,15 +616,26 @@ watch([currentMonth, currentYear], () => {
           v-for="(day, index) in calendarDays"
           :key="index"
           class="calendar-day"
+          :data-calendar-date="toDateKey(day.date)"
+          @mousedown="onDayPointerDown(day.date, $event)"
+          @touchstart.passive="onDayPointerDown(day.date, $event)"
+          @mouseenter="onDayPointerEnter(day.date)"
+          @dragover="onDayDragOver(day.date, $event)"
+          @drop="onDayDrop(day.date, $event)"
           :class="{
-            'today': day && day.date.toDateString() === new Date().toDateString(),
-            'weekend': day && (day.date.getDay() === 0 || day.date.getDay() === 6),
-            'prev-month': day && day.date.getMonth() !== currentMonth && day.date.getMonth() !== (currentMonth + 1) % 12,
-            'next-month': day && day.date.getMonth() !== currentMonth && day.date.getMonth() === (currentMonth + 1) % 12,
-            'past': day && isPastDay(day.date)
+            'today': day.date.toDateString() === new Date().toDateString(),
+            'weekend': day.date.getDay() === 0 || day.date.getDay() === 6,
+            'prev-month': day.date.getMonth() !== currentMonth && day.date.getMonth() !== (currentMonth + 1) % 12,
+            'next-month': day.date.getMonth() !== currentMonth && day.date.getMonth() === (currentMonth + 1) % 12,
+            'past': isPastDay(day.date),
+            'range-single': rangeHighlightForDate(day.date) === 'single',
+            'range-start': rangeHighlightForDate(day.date) === 'start',
+            'range-end': rangeHighlightForDate(day.date) === 'end',
+            'range-middle': rangeHighlightForDate(day.date) === 'middle',
+            'drag-over-target': eventDragEnabled && sameCalendarDay(dragOverTargetDate, day.date)
           }"
         >
-          <div v-if="day" class="day-content" @click="handleDateClick(day.date)">
+          <div class="day-content">
             <div class="day-number clickable">
               {{ day.date.getDate() }}<span class="day-month">{{ getOrdinalSuffix(day.date.getDate()) }} {{ monthNames[day.date.getMonth()].substring(0, 3) }}</span>
             </div>
@@ -388,8 +654,12 @@ watch([currentMonth, currentYear], () => {
                   'multi-day': isMultiDayEvent(event),
                   'multi-day-start': isMultiDayEvent(event) && getMultiDayPosition(event, day.date) === 'start',
                   'multi-day-middle': isMultiDayEvent(event) && getMultiDayPosition(event, day.date) === 'middle',
-                  'multi-day-end': isMultiDayEvent(event) && getMultiDayPosition(event, day.date) === 'end'
+                  'multi-day-end': isMultiDayEvent(event) && getMultiDayPosition(event, day.date) === 'end',
+                  'drag-source': draggingEventId === event.id
                 }"
+                :draggable="eventDragEnabled"
+                @dragstart.stop="onEventDragStart(event, day.date, $event)"
+                @dragend.stop="onEventDragEnd"
                 @click.stop="handleEventClick(event)"
                 @contextmenu.stop="handleContextMenu(event, $event)"
               >
@@ -482,6 +752,45 @@ watch([currentMonth, currentYear], () => {
   min-height: 400px;
 }
 
+.calendar-grid.is-dragging-range,
+.calendar-grid.is-dragging-event {
+  user-select: none;
+}
+
+.calendar-day.range-single {
+  background-color: rgba(0, 123, 255, 0.22) !important;
+  box-shadow: inset 0 0 0 2px #007bff;
+}
+
+.calendar-day.range-start {
+  background-color: rgba(0, 123, 255, 0.14) !important;
+  box-shadow:
+    inset 2px 0 0 0 #007bff,
+    inset 0 2px 0 0 #007bff,
+    inset 0 -2px 0 0 #007bff;
+}
+
+.calendar-day.range-end {
+  background-color: rgba(0, 123, 255, 0.14) !important;
+  box-shadow:
+    inset -2px 0 0 0 #007bff,
+    inset 0 2px 0 0 #007bff,
+    inset 0 -2px 0 0 #007bff;
+}
+
+.calendar-day.range-middle {
+  background-color: rgba(0, 123, 255, 0.14) !important;
+  box-shadow:
+    inset 0 2px 0 0 #007bff,
+    inset 0 -2px 0 0 #007bff;
+}
+
+.calendar-day.drag-over-target {
+  background-color: rgba(0, 123, 255, 0.1) !important;
+  outline: 2px dashed #007bff;
+  outline-offset: -3px;
+}
+
 .day-header {
   padding: 1rem;
   text-align: center;
@@ -604,6 +913,18 @@ watch([currentMonth, currentYear], () => {
   padding: 0.1rem 0.1rem;
 }
 
+.calendar-event[draggable='true'] {
+  cursor: grab;
+}
+
+.calendar-event.drag-source {
+  opacity: 0.55;
+}
+
+.calendar-event[draggable='true']:active {
+  cursor: grabbing;
+}
+
 .calendar-event:hover {
   background: #b3de6e;
   border-color: #c4db96;
@@ -777,6 +1098,40 @@ watch([currentMonth, currentYear], () => {
     background: #374151;
   }
 
+  .calendar-day.range-single {
+    background-color: rgba(96, 165, 250, 0.28) !important;
+    box-shadow: inset 0 0 0 2px #60a5fa;
+  }
+
+  .calendar-day.range-start {
+    background-color: rgba(96, 165, 250, 0.18) !important;
+    box-shadow:
+      inset 2px 0 0 0 #60a5fa,
+      inset 0 2px 0 0 #60a5fa,
+      inset 0 -2px 0 0 #60a5fa;
+  }
+
+  .calendar-day.range-end {
+    background-color: rgba(96, 165, 250, 0.18) !important;
+    box-shadow:
+      inset -2px 0 0 0 #60a5fa,
+      inset 0 2px 0 0 #60a5fa,
+      inset 0 -2px 0 0 #60a5fa;
+  }
+
+  .calendar-day.range-middle {
+    background-color: rgba(96, 165, 250, 0.18) !important;
+    box-shadow:
+      inset 0 2px 0 0 #60a5fa,
+      inset 0 -2px 0 0 #60a5fa;
+  }
+
+  .calendar-day.drag-over-target {
+    background-color: rgba(96, 165, 250, 0.12) !important;
+    outline: 2px dashed #60a5fa;
+    outline-offset: -3px;
+  }
+
   .calendar-day.past {
     opacity: 0.6;
   }

package/vue/components/Header.vue

@@ -3,7 +3,7 @@
 		<div
 			:id = "sidebarEnabled ? 'sidebar-button' : null"
 			:class="['image-and-title', 'flex-row', { 'disabled-branding': !showBranding }]"
-			@click = "sidebarEnabled && emit('toggleSidebar')"
+			@click = "onImageAndTitleClick"
 		>
 			<img v-if="showBranding" :src = "logoUrl" alt = "Logo" class = "logo" />
 			<h1 v-if="showBranding">{{ title }}</h1>
@@ -38,7 +38,15 @@
 	import Breadcrumbs from "./Breadcrumbs.vue";
 	import TopBar from "./TopBar.vue";
 
-	const emit = defineEmits(["toggleSidebar"]);
+	const emit = defineEmits(["toggleSidebar", "logoClick"]);
+
+	function onImageAndTitleClick() {
+		if (props.sidebarEnabled) {
+			emit("toggleSidebar");
+		} else {
+			emit("logoClick");
+		}
+	}
 
 	const props = defineProps({
 		breadcrumbs: {

package/vue/views/App.vue

@@ -1,5 +1,5 @@
 <template>
-	<Header username = "Guest" @toggleSidebar="toggleSidebar" title = "PicoCrank" :logoUrl="logoUrl" :sidebarEnabled="sidebarEnabled" :navigation="navigation" :topBarEnabled="topBarEnabled" :showBranding="brandingEnabled">
+	<Header username = "Guest" @toggleSidebar="toggleSidebar" title = "PicoCrank" :logoUrl="logoUrl" :sidebarEnabled="sidebarEnabled" :navigation="navigation" :topBarEnabled="topBarEnabled" :showBranding="brandingEnabled" :breadcrumbs="breadcrumbsEnabled">
 		<template #toolbar>
 			<QuickSearch
 				v-if="quickSearchEnabled"
@@ -46,6 +46,7 @@
 	const brandingEnabled = ref(true);
 	const quickSearchEnabled = ref(true);
 	const topBarEnabled = ref(false);
+	const breadcrumbsEnabled = ref(false);
 
 	function toggleSidebar() {
 		if (sidebar.value) {
@@ -69,7 +70,11 @@
 		topBarEnabled.value = !topBarEnabled.value;
 	}
 
-	// Provide sidebar, QuickSearch, and TopBar state and toggle functions for child components
+	function toggleBreadcrumbsEnabled() {
+		breadcrumbsEnabled.value = !breadcrumbsEnabled.value;
+	}
+
+	// Provide sidebar, QuickSearch, TopBar, and breadcrumbs state and toggle functions for child components
 	provide('sidebarEnabled', sidebarEnabled);
 	provide('toggleSidebarEnabled', toggleSidebarEnabled);
 	provide('brandingEnabled', brandingEnabled);
@@ -79,6 +84,8 @@
 	provide('toggleQuickSearchEnabled', toggleQuickSearchEnabled);
 	provide('topBarEnabled', topBarEnabled);
 	provide('toggleTopBarEnabled', toggleTopBarEnabled);
+	provide('breadcrumbsEnabled', breadcrumbsEnabled);
+	provide('toggleBreadcrumbsEnabled', toggleBreadcrumbsEnabled);
 
 	onMounted(() => {
 		if (navigation.value) {

package/vue/views/CalendarExample.vue

@@ -27,6 +27,10 @@
 			:current-year="currentYear"
 			@event-click="handleEventClick"
 			@date-click="handleDateClick"
+			@date-range-select="handleDateRangeSelect"
+			@event-move-request="handleEventMoveRequest"
+			@event-moved="handleEventMoved"
+			@event-move-rejected="handleEventMoveRejected"
 			@month-change="handleMonthChange"
 		/>
 	</Section>
@@ -187,8 +191,51 @@ function handleEventClick(event) {
 }
 
 function handleDateClick(date) {
+	// Single-day picks also emit `date-range-select`; keep this for integrations that only listen for `date-click`.
 	console.log('Date clicked:', date)
-	alert(`Date selected: ${date.toLocaleDateString()}`)
+}
+
+function handleDateRangeSelect(start, end) {
+	const same = start.getTime() === end.getTime()
+	const label = same
+		? start.toLocaleDateString()
+		: `${start.toLocaleDateString()} – ${end.toLocaleDateString()}`
+	console.log('Date range:', start, end)
+	alert(`Range selected: ${label}`)
+}
+
+function handleEventMoveRequest({ respond, event, sourceDate, targetDate }) {
+	window.setTimeout(() => {
+		const ok = window.confirm(
+			`Move "${event.title}" to ${targetDate.toLocaleDateString()}? (Cancel = decline)`
+		)
+		respond(ok)
+	}, 50)
+}
+
+function applyEventDateShift(event, deltaMs) {
+	const i = events.value.findIndex(e => String(e.id) === String(event.id))
+	if (i === -1) return
+	const ev = events.value[i]
+	const next = { ...ev }
+	if (next.startDate != null && next.endDate != null) {
+		next.startDate = new Date(new Date(next.startDate).getTime() + deltaMs)
+		next.endDate = new Date(new Date(next.endDate).getTime() + deltaMs)
+	} else if (next.date != null) {
+		next.date = new Date(new Date(next.date).getTime() + deltaMs)
+	}
+	const copy = [...events.value]
+	copy[i] = next
+	events.value = copy
+}
+
+function handleEventMoved({ event, sourceDate, targetDate }) {
+	const deltaMs = targetDate.getTime() - sourceDate.getTime()
+	applyEventDateShift(event, deltaMs)
+}
+
+function handleEventMoveRejected(payload) {
+	console.log('event-move-rejected', payload)
 }
 
 // Helper function to update the date picker value

package/vue/views/Welcome.vue

@@ -19,9 +19,12 @@
 					<span>Enable TopBar</span>
 				</label>
 			</div>
+			<button type="button" @click="toggleBreadcrumbsEnabled" :class="breadcrumbsEnabled ? 'neutral' : 'good'">
+				{{ breadcrumbsEnabled ? 'Hide Breadcrumbs' : 'Show Breadcrumbs' }}
+			</button>
 		</template>
 		<p>
-			Welcome to <strong>PicoCrank</strong>! This is a flexible example application to showcase a modular Vue 3 UI with a focus on ease of navigation, live UI controls, and modern design elements. Use the toolbar above to interactively enable or disable interface features like the sidebar, branding, QuickSearch, and the top navigation bar.
+			Welcome to <strong>PicoCrank</strong>! This is a flexible example application to showcase a modular Vue 3 UI with a focus on ease of navigation, live UI controls, and modern design elements. Use the toolbar above to interactively enable or disable interface features like the sidebar, branding, QuickSearch, the top navigation bar, and route breadcrumbs in the header.
 		</p>
 		<p>
 			Explore the sections below to see reusable components in action, including toolbars, buttons, and layout options. PicoCrank is designed to be a starting point for your own rapid Vue projects&mdash;inspect the code and try customizing the UI!
@@ -106,4 +109,6 @@
 	const toggleQuickSearchEnabled = inject('toggleQuickSearchEnabled');
 	const topBarEnabled = inject('topBarEnabled');
 	const toggleTopBarEnabled = inject('toggleTopBarEnabled');
+	const breadcrumbsEnabled = inject('breadcrumbsEnabled');
+	const toggleBreadcrumbsEnabled = inject('toggleBreadcrumbsEnabled');
 </script>