picocrank 1.29.0 → 1.31.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picocrank",
-  "version": "1.29.0",
+  "version": "1.31.0",
   "type": "module",
   "description": "A set of zero dependency Vue components built on the Femtocrank global CSS theme.",
   "main": "vite.config.js",

package/vue/components/Calendar.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, watch, onUnmounted } from 'vue'
+import { ref, computed, watch, onUnmounted, nextTick } from 'vue'
 import { HugeiconsIcon } from '@hugeicons/vue'
 
 const props = defineProps({
@@ -62,6 +62,15 @@ const props = defineProps({
 		type: Number,
 		default: undefined,
 	},
+	viewMode: {
+		type: String,
+		default: 'month',
+		validator: (value) => ['month', 'week', 'day'].includes(value),
+	},
+	focusDate: {
+		type: [Date, String, Number],
+		default: null,
+	},
 })
 
 const emit = defineEmits([
@@ -73,6 +82,9 @@ const emit = defineEmits([
 	'event-move-request',
 	'event-moved',
 	'event-move-rejected',
+	'update:viewMode',
+	'update:focusDate',
+	'view-change',
 ])
 
 // Internal calendar state
@@ -87,20 +99,91 @@ const currentDate = computed(() => {
 const viewMonth = computed(() => currentDate.value.getMonth())
 const viewYear = computed(() => currentDate.value.getFullYear())
 
+// Monday-start week containing the given date
+function getWeekStart(date) {
+  const d = new Date(date)
+  const dayOfWeek = (d.getDay() + 6) % 7 // Monday=0
+  d.setDate(d.getDate() - dayOfWeek)
+  d.setHours(0, 0, 0, 0)
+  return d
+}
+
 // Compute the first visible day (Monday) for the current month view
 function getStartOfGrid(date) {
-  const firstOfMonth = new Date(date.getFullYear(), date.getMonth(), 1)
-  const dayOfWeek = (firstOfMonth.getDay() + 6) % 7 // Monday=0
-  const start = new Date(firstOfMonth)
-  start.setDate(firstOfMonth.getDate() - dayOfWeek)
-  start.setHours(0, 0, 0, 0)
-  return start
+  return getWeekStart(new Date(date.getFullYear(), date.getMonth(), 1))
 }
 
-// Anchor date for the 6x7 grid; we will shift this by weeks without re-rendering the grid structure
+function startOfDay(d) {
+  const x = new Date(d)
+  x.setHours(0, 0, 0, 0)
+  return x
+}
+
+function parseFocusDate(value) {
+  if (value == null) {
+    return startOfDay(new Date())
+  }
+
+  const parsed = value instanceof Date ? new Date(value) : new Date(value)
+  if (Number.isNaN(parsed.getTime())) {
+    return startOfDay(new Date())
+  }
+
+  return startOfDay(parsed)
+}
+
+function normalizeViewAnchor(mode, focusDateValue) {
+  const focus = parseFocusDate(focusDateValue)
+
+  if (mode === 'week') {
+    return getWeekStart(focus)
+  }
+  if (mode === 'day') {
+    return focus
+  }
+
+  return getStartOfGrid(currentDate.value)
+}
+
+// Anchor date for the grid; we will shift this by weeks without re-rendering the grid structure
 const gridStartDate = ref(getStartOfGrid(currentDate.value))
 // Track if we're actively scrolling to prevent watcher from resetting grid anchor
 const isScrolling = ref(false)
+const internalViewMode = ref(props.viewMode)
+const isCompactView = computed(() => internalViewMode.value !== 'month')
+
+const headerTitle = computed(() => {
+  if (internalViewMode.value === 'month') {
+    return `${props.monthNames[viewMonth.value]} ${viewYear.value}`
+  }
+
+  if (internalViewMode.value === 'day') {
+    const day = gridStartDate.value
+    return day.toLocaleDateString(undefined, {
+      weekday: 'long',
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric',
+    })
+  }
+
+  const start = gridStartDate.value
+  const end = new Date(start)
+  end.setDate(start.getDate() + 6)
+
+  const startMonth = props.monthNames[start.getMonth()]
+  const endMonth = props.monthNames[end.getMonth()]
+  const startYear = start.getFullYear()
+  const endYear = end.getFullYear()
+
+  if (startYear === endYear && start.getMonth() === end.getMonth()) {
+    return `${startMonth} ${start.getDate()} – ${end.getDate()}, ${startYear}`
+  }
+  if (startYear === endYear) {
+    return `${startMonth} ${start.getDate()} – ${endMonth} ${end.getDate()}, ${startYear}`
+  }
+  return `${startMonth} ${start.getDate()}, ${startYear} – ${endMonth} ${end.getDate()}, ${endYear}`
+})
 
 // Helper function to check if a time is midnight (00:00)
 function isMidnight(dateValue) {
@@ -260,11 +343,33 @@ function getOrdinalSuffix(day) {
   return 'th'
 }
 
+function calendarDayCount(mode = internalViewMode.value) {
+  if (mode === 'week') return 7
+  if (mode === 'day') return 1
+  return 42
+}
+
+function sortedEventsForDay(day) {
+  return [...day.events].sort((a, b) => {
+    const aMultiDay = isMultiDayEvent(a)
+    const bMultiDay = isMultiDayEvent(b)
+    if (aMultiDay && !bMultiDay) return -1
+    if (!aMultiDay && bMultiDay) return 1
+    return 0
+  })
+}
+
+function visibleEventsForDay(day) {
+  const sorted = sortedEventsForDay(day)
+  return internalViewMode.value === 'day' ? sorted : sorted.slice(0, 3)
+}
+
 // Calendar generation from persistent grid start
 const calendarDays = computed(() => {
   const days = []
   const start = gridStartDate.value
-  for (let i = 0; i < 42; i++) {
+  const dayCount = calendarDayCount()
+  for (let i = 0; i < dayCount; i++) {
     const date = new Date(start)
     date.setDate(start.getDate() + i)
     days.push({
@@ -275,8 +380,68 @@ const calendarDays = computed(() => {
   return days
 })
 
+function commitViewChange(mode, focusDateValue, { emitUpdates = true } = {}) {
+  const gridStart = normalizeViewAnchor(mode, focusDateValue)
+  internalViewMode.value = mode
+  gridStartDate.value = gridStart
+
+  if (mode !== 'month') {
+    syncMonthFromGridStart()
+  }
+
+  if (emitUpdates) {
+    emit('update:viewMode', mode)
+    emit('update:focusDate', mode === 'month' ? null : gridStart)
+    emit('view-change', { mode, focusDate: mode === 'month' ? null : gridStart })
+  }
+}
+
+function applyExternalView(mode, focusDateValue) {
+  const gridStart = normalizeViewAnchor(mode, focusDateValue)
+  if (
+    mode === internalViewMode.value
+    && toDateKey(gridStartDate.value) === toDateKey(gridStart)
+  ) {
+    return
+  }
+
+  internalViewMode.value = mode
+  gridStartDate.value = gridStart
+  if (mode !== 'month') {
+    syncMonthFromGridStart()
+  }
+}
+
+watch(
+  () => [props.viewMode, props.focusDate],
+  ([mode, focusDateValue]) => {
+    applyExternalView(mode, focusDateValue)
+  },
+  { immediate: true },
+)
+
+function syncMonthFromGridStart() {
+  const { month, year } = getVisibleMonthYear(gridStartDate.value, internalViewMode.value)
+  if (props.currentMonth !== undefined && props.currentYear !== undefined) {
+    if (month !== viewMonth.value || year !== viewYear.value) {
+      emit('month-change', month, year)
+    }
+  } else {
+    internalCurrentDate.value = new Date(year, month, 1)
+  }
+}
+
 // Navigation functions
 function previousMonth() {
+  if (internalViewMode.value === 'week') {
+    adjustByWeeks(-1)
+    return
+  }
+  if (internalViewMode.value === 'day') {
+    adjustByDays(-1)
+    return
+  }
+
   if (props.currentMonth !== undefined && props.currentYear !== undefined) {
     const newMonth = viewMonth.value === 0 ? 11 : viewMonth.value - 1
     const newYear = viewMonth.value === 0 ? viewYear.value - 1 : viewYear.value
@@ -290,6 +455,15 @@ function previousMonth() {
 }
 
 function nextMonth() {
+  if (internalViewMode.value === 'week') {
+    adjustByWeeks(1)
+    return
+  }
+  if (internalViewMode.value === 'day') {
+    adjustByDays(1)
+    return
+  }
+
   if (props.currentMonth !== undefined && props.currentYear !== undefined) {
     const newMonth = viewMonth.value === 11 ? 0 : viewMonth.value + 1
     const newYear = viewMonth.value === 11 ? viewYear.value + 1 : viewYear.value
@@ -302,8 +476,17 @@ function nextMonth() {
 }
 
 function goToToday() {
+  const today = new Date()
+  if (internalViewMode.value === 'week') {
+    commitViewChange('week', today)
+    return
+  }
+  if (internalViewMode.value === 'day') {
+    commitViewChange('day', today)
+    return
+  }
+
   if (props.currentMonth !== undefined && props.currentYear !== undefined) {
-    const today = new Date()
     emit('month-change', today.getMonth(), today.getFullYear())
     gridStartDate.value = getStartOfGrid(today)
   } else {
@@ -315,33 +498,49 @@ function goToToday() {
 // Week navigation (mouse wheel)
 const lastWheelAt = ref(0)
 const wheelThrottleMs = 180
-function getVisibleMonthYear(start) {
+function getVisibleMonthYear(start, mode = internalViewMode.value) {
+  if (mode === 'day') {
+    return { month: start.getMonth(), year: start.getFullYear() }
+  }
+
   const mid = new Date(start)
-  mid.setDate(start.getDate() + 21) // middle of 6x7 grid
+  mid.setDate(start.getDate() + (mode === 'week' ? 3 : 21))
   return { month: mid.getMonth(), year: mid.getFullYear() }
 }
 
-function adjustByWeeks(weeks) {
-  const newStart = new Date(gridStartDate.value)
-  newStart.setDate(newStart.getDate() + weeks * 7)
-  gridStartDate.value = newStart
-
+function syncNavigationMonth(newStart) {
   if (props.currentMonth !== undefined && props.currentYear !== undefined) {
     const { month, year } = getVisibleMonthYear(newStart)
     if (month !== viewMonth.value || year !== viewYear.value) {
       emit('month-change', month, year)
-      // Set flag to prevent watcher from resetting our scroll position
       isScrolling.value = true
-      // Clear the flag after a short delay to allow future prop-driven updates
       setTimeout(() => { isScrolling.value = false }, 100)
     }
   } else {
-    // Keep internal anchor and current date roughly aligned (set to first of visible month)
     const { month, year } = getVisibleMonthYear(newStart)
     internalCurrentDate.value = new Date(year, month, 1)
   }
 }
 
+function adjustByWeeks(weeks) {
+  const newStart = new Date(gridStartDate.value)
+  newStart.setDate(newStart.getDate() + weeks * 7)
+
+  if (internalViewMode.value === 'month') {
+    gridStartDate.value = newStart
+    syncNavigationMonth(newStart)
+    return
+  }
+
+  commitViewChange(internalViewMode.value, newStart)
+}
+
+function adjustByDays(days) {
+  const newStart = new Date(gridStartDate.value)
+  newStart.setDate(newStart.getDate() + days)
+  commitViewChange('day', newStart)
+}
+
 function handleWheel(event) {
   // Prevent page scrolling while using calendar scroll
   event.preventDefault()
@@ -349,6 +548,10 @@ function handleWheel(event) {
   if (now - lastWheelAt.value < wheelThrottleMs) return
   lastWheelAt.value = now
   const direction = event.deltaY > 0 ? 1 : -1
+  if (internalViewMode.value === 'day') {
+    adjustByDays(direction)
+    return
+  }
   adjustByWeeks(direction)
 }
 
@@ -363,14 +566,133 @@ function handleContextMenu(event, mouseEvent) {
   emit('event-context-menu', event, mouseEvent)
 }
 
-// --- Date range selection (click / drag) ---
+// --- Day context menu ---
 
-function startOfDay(d) {
-  const x = new Date(d)
-  x.setHours(0, 0, 0, 0)
-  return x
+const DAY_CONTEXT_MENU_MARGIN_PX = 8
+const dayContextMenuOpen = ref(false)
+const dayContextMenuStyle = ref({ top: '0px', left: '0px' })
+const dayContextMenuDate = ref(null)
+const dayContextMenuRef = ref(null)
+
+function positionDayContextMenu(clientX, clientY) {
+  const menu = dayContextMenuRef.value
+  if (!menu) return
+
+  const rect = menu.getBoundingClientRect()
+  const margin = DAY_CONTEXT_MENU_MARGIN_PX
+  let top = clientY
+  let left = clientX
+
+  if (left + rect.width > window.innerWidth - margin) {
+    left = window.innerWidth - rect.width - margin
+  }
+  if (top + rect.height > window.innerHeight - margin) {
+    top = window.innerHeight - rect.height - margin
+  }
+  if (left < margin) left = margin
+  if (top < margin) top = margin
+
+  dayContextMenuStyle.value = {
+    top: `${top}px`,
+    left: `${left}px`,
+  }
+}
+
+function closeDayContextMenu() {
+  dayContextMenuOpen.value = false
+  dayContextMenuDate.value = null
+}
+
+function onDocumentPointerDownForDayMenu(event) {
+  if (!dayContextMenuOpen.value) return
+  if (dayContextMenuRef.value?.contains(event.target)) return
+  closeDayContextMenu()
 }
 
+function onDocumentKeyDownForDayMenu(event) {
+  if (!dayContextMenuOpen.value) return
+  if (event.key === 'Escape') {
+    closeDayContextMenu()
+  }
+}
+
+function attachDayContextMenuListeners() {
+  window.addEventListener('pointerdown', onDocumentPointerDownForDayMenu, true)
+  window.addEventListener('keydown', onDocumentKeyDownForDayMenu)
+}
+
+function detachDayContextMenuListeners() {
+  window.removeEventListener('pointerdown', onDocumentPointerDownForDayMenu, true)
+  window.removeEventListener('keydown', onDocumentKeyDownForDayMenu)
+}
+
+function onDayContextMenu(date, mouseEvent) {
+  if (isEventTarget(mouseEvent)) return
+
+  mouseEvent.preventDefault()
+  mouseEvent.stopPropagation()
+
+  dayContextMenuDate.value = startOfDay(date)
+  dayContextMenuOpen.value = true
+  dayContextMenuStyle.value = {
+    top: `${mouseEvent.clientY}px`,
+    left: `${mouseEvent.clientX}px`,
+  }
+
+  nextTick(() => {
+    positionDayContextMenu(mouseEvent.clientX, mouseEvent.clientY)
+    dayContextMenuRef.value?.querySelector('button')?.focus()
+  })
+}
+
+function showOnlyThisWeek() {
+  const date = dayContextMenuDate.value
+  if (!date) return
+
+  commitViewChange('week', date)
+  closeDayContextMenu()
+}
+
+function showOnlyThisDay() {
+  const date = dayContextMenuDate.value
+  if (!date) return
+
+  commitViewChange('day', date)
+  closeDayContextMenu()
+}
+
+function showFullMonth() {
+  commitViewChange('month', currentDate.value)
+  closeDayContextMenu()
+}
+
+function showWeekViewFromDay() {
+  commitViewChange('week', gridStartDate.value)
+}
+
+function setView({ mode, focusDate: nextFocusDate } = {}) {
+  const nextMode = mode ?? internalViewMode.value
+  const anchor = nextFocusDate ?? (nextMode === 'month' ? currentDate.value : gridStartDate.value)
+  commitViewChange(nextMode, anchor)
+}
+
+defineExpose({
+  setView,
+  showMonthView: () => commitViewChange('month', currentDate.value),
+  showWeekView: (date) => commitViewChange('week', date ?? gridStartDate.value),
+  showDayView: (date) => commitViewChange('day', date ?? gridStartDate.value),
+})
+
+watch(dayContextMenuOpen, (open) => {
+  if (open) {
+    attachDayContextMenuListeners()
+  } else {
+    detachDayContextMenuListeners()
+  }
+})
+
+// --- Date range selection (click / drag) ---
+
 function toDateKey(d) {
   return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
 }
@@ -488,6 +810,7 @@ function onDayPointerEnter(date) {
 
 onUnmounted(() => {
   detachRangePointerListeners()
+  detachDayContextMenuListeners()
 })
 
 // --- Calendar event drag and drop (HTML5) ---
@@ -595,7 +918,7 @@ function onDayDrop(dayDate, ev) {
 
 // Sync grid start when controlled month/year props change (but not during scrolling)
 watch([viewMonth, viewYear], () => {
-  if (isScrolling.value) return
+  if (isScrolling.value || internalViewMode.value !== 'month') return
   const anchor = new Date(viewYear.value, viewMonth.value, 1)
   gridStartDate.value = getStartOfGrid(anchor)
 })
@@ -605,7 +928,7 @@ watch([viewMonth, viewYear], () => {
 <template>
   <div class="calendar-wrapper">
     <div v-if="showNavigation" class="calendar-header-nav">
-      <h2 class="calendar-title">{{ monthNames[viewMonth] }} {{ viewYear }}</h2>
+      <h2 class="calendar-title">{{ headerTitle }}</h2>
       <div class="calendar-nav-buttons">
         <slot name="nav-buttons">
           <button @click="previousMonth" class="button neutral">‹</button>
@@ -616,18 +939,40 @@ watch([viewMonth, viewYear], () => {
     </div>
 
     <div class="calendar-container">
+      <div v-if="isCompactView" class="calendar-compact-view-bar">
+        <button
+          v-if="internalViewMode === 'day'"
+          type="button"
+          class="button neutral"
+          @click="showWeekViewFromDay"
+        >
+          ‹ Week view
+        </button>
+        <button type="button" class="button neutral" @click="showFullMonth">
+          ‹ Month view
+        </button>
+      </div>
       <div v-if="error" class="calendar-error">{{ error }}</div>
       <div v-if="loading" class="calendar-loading-overlay">Loading…</div>
       <div
         class="calendar-grid"
         :class="{
           'is-dragging-range': isDraggingRange,
-          'is-dragging-event': draggingEventId !== null
+          'is-dragging-event': draggingEventId !== null,
+          'week-only': internalViewMode === 'week',
+          'day-only': internalViewMode === 'day'
         }"
         @wheel.prevent="handleWheel"
       >
         <!-- Day headers -->
-        <div v-for="day in dayNames" :key="day" class="day-header">{{ day }}</div>
+        <div
+          v-for="day in dayNames"
+          v-show="internalViewMode !== 'day'"
+          :key="day"
+          class="day-header"
+        >
+          {{ day }}
+        </div>
 
         <!-- Calendar days -->
         <div
@@ -637,6 +982,7 @@ watch([viewMonth, viewYear], () => {
           :data-calendar-date="toDateKey(day.date)"
           @mousedown="onDayPointerDown(day.date, $event)"
           @touchstart.passive="onDayPointerDown(day.date, $event)"
+          @contextmenu="onDayContextMenu(day.date, $event)"
           @mouseenter="onDayPointerEnter(day.date)"
           @dragover="onDayDragOver(day.date, $event)"
           @drop="onDayDrop(day.date, $event)"
@@ -667,13 +1013,7 @@ watch([viewMonth, viewYear], () => {
             </div>
             <div class="day-events">
               <div
-                v-for="event in day.events.sort((a, b) => {
-                  const aMultiDay = isMultiDayEvent(a);
-                  const bMultiDay = isMultiDayEvent(b);
-                  if (aMultiDay && !bMultiDay) return -1;
-                  if (!aMultiDay && bMultiDay) return 1;
-                  return 0;
-                }).slice(0, 3)"
+                v-for="event in visibleEventsForDay(day)"
                 :key="event.id"
                 class="calendar-event"
                 :class="{
@@ -714,7 +1054,10 @@ watch([viewMonth, viewYear], () => {
                   </div>
                 </slot>
               </div>
-              <div v-if="day.events.length > 3" class="more-events">
+              <div
+                v-if="internalViewMode !== 'day' && day.events.length > 3"
+                class="more-events"
+              >
                 +{{ day.events.length - 3 }} more
               </div>
             </div>
@@ -722,6 +1065,46 @@ watch([viewMonth, viewYear], () => {
         </div>
       </div>
     </div>
+
+    <Teleport to="body">
+      <div
+        v-if="dayContextMenuOpen"
+        ref="dayContextMenuRef"
+        class="calendar-day-context-menu"
+        role="menu"
+        :style="dayContextMenuStyle"
+        @click.stop
+        @contextmenu.prevent
+      >
+        <button
+          v-if="internalViewMode !== 'day'"
+          type="button"
+          role="menuitem"
+          class="calendar-day-context-menu-item"
+          @click="showOnlyThisDay"
+        >
+          Show only this day
+        </button>
+        <button
+          v-if="internalViewMode !== 'week'"
+          type="button"
+          role="menuitem"
+          class="calendar-day-context-menu-item"
+          @click="showOnlyThisWeek"
+        >
+          Show only this week
+        </button>
+        <button
+          v-if="internalViewMode !== 'month'"
+          type="button"
+          role="menuitem"
+          class="calendar-day-context-menu-item"
+          @click="showFullMonth"
+        >
+          Show full month
+        </button>
+      </div>
+    </Teleport>
   </div>
 </template>
 
@@ -781,12 +1164,42 @@ watch([viewMonth, viewYear], () => {
   position: relative;
 }
 
+.calendar-compact-view-bar {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid var(--calendar-border);
+  background: var(--calendar-chrome-bg);
+}
+
 .calendar-grid {
   display: grid;
   grid-template-columns: repeat(7, minmax(0, 1fr));
   min-height: 400px;
 }
 
+.calendar-grid.week-only {
+  min-height: min(72vh, 760px);
+  grid-template-rows: auto 1fr;
+}
+
+.calendar-grid.week-only .calendar-day {
+  height: auto;
+  min-height: min(68vh, 720px);
+}
+
+.calendar-grid.day-only {
+  grid-template-columns: minmax(0, 1fr);
+  min-height: min(72vh, 760px);
+}
+
+.calendar-grid.day-only .calendar-day {
+  height: auto;
+  min-height: min(68vh, 720px);
+  border-right: none;
+}
+
 .calendar-grid.is-dragging-range,
 .calendar-grid.is-dragging-event {
   user-select: none;
@@ -1068,6 +1481,12 @@ watch([viewMonth, viewYear], () => {
     height: 110px;
   }
 
+  .calendar-grid.week-only .calendar-day,
+  .calendar-grid.day-only .calendar-day {
+    height: auto;
+    min-height: min(52vh, 420px);
+  }
+
   .day-number {
     font-size: 1rem;
   }
@@ -1103,3 +1522,35 @@ watch([viewMonth, viewYear], () => {
   }
 }
 </style>
+
+<style>
+.calendar-day-context-menu {
+  position: fixed;
+  z-index: 1000;
+  min-width: 12rem;
+  padding: 0.35rem;
+  border: 1px solid var(--table-popover-border);
+  border-radius: 8px;
+  background: var(--table-popover-bg);
+  box-shadow: var(--table-popover-shadow);
+}
+
+.calendar-day-context-menu-item {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--table-popover-fg);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.calendar-day-context-menu-item:hover,
+.calendar-day-context-menu-item:focus-visible {
+  background: var(--table-popover-item-bg);
+  outline: none;
+}
+</style>

package/vue/components/ReadOnlyTextArea.vue

@@ -6,11 +6,21 @@
 			<div
 				v-if="showActions"
 				class="readonly-textarea-actions"
-				:class="{ 'readonly-textarea-actions--leading': hasActions }"
 			>
 				<div v-if="hasActions" class="readonly-textarea-actions-slot">
 					<slot name="actions" />
 				</div>
+				<button
+					v-if="showClearButton"
+					type="button"
+					class="readonly-textarea-clear neutral"
+					title="Clear contents"
+					:disabled="!modelValue"
+					@click="clear"
+				>
+					<HugeiconsIcon :icon="Delete02Icon" width="1em" height="1em" />
+					<span>{{ clearLabel }}</span>
+				</button>
 				<button
 					v-if="showCopyButton"
 					type="button"
@@ -39,7 +49,7 @@
 <script setup>
 import { ref, computed, useId, useSlots, watch, Comment } from 'vue'
 import { HugeiconsIcon } from '@hugeicons/vue'
-import { Copy01Icon, CopyCheckIcon } from '@hugeicons/core-free-icons'
+import { Copy01Icon, CopyCheckIcon, Delete02Icon } from '@hugeicons/core-free-icons'
 
 const props = defineProps({
 	modelValue: {
@@ -70,6 +80,10 @@ const props = defineProps({
 		type: Boolean,
 		default: true,
 	},
+	showClearButton: {
+		type: Boolean,
+		default: false,
+	},
 	copyLabel: {
 		type: String,
 		default: 'Copy',
@@ -78,6 +92,10 @@ const props = defineProps({
 		type: String,
 		default: 'Copied',
 	},
+	clearLabel: {
+		type: String,
+		default: 'Clear',
+	},
 	copiedFeedbackMs: {
 		type: Number,
 		default: 2000,
@@ -92,27 +110,40 @@ const props = defineProps({
 	},
 })
 
-const emit = defineEmits(['copy', 'copy-error', 'update:modelValue'])
+const emit = defineEmits(['copy', 'copy-error', 'clear', 'update:modelValue'])
 
 const slots = useSlots()
 
-const hasActions = computed(() => {
+const slotActionCount = computed(() => {
 	const render = slots.actions
 	if (!render) {
-		return false
+		return 0
 	}
-	return render().some((vnode) => vnode.type !== Comment)
+	return render().filter((vnode) => vnode.type !== Comment).length
 })
 
-const showActions = computed(() => hasActions.value || props.showCopyButton)
+const hasActions = computed(() => slotActionCount.value > 0)
+
+const builtInActionCount = computed(() => {
+	let count = 0
+	if (props.showClearButton) count++
+	if (props.showCopyButton) count++
+	return count
+})
+
+const actionButtonCount = computed(
+	() => slotActionCount.value + builtInActionCount.value,
+)
+
+const showActions = computed(
+	() => actionButtonCount.value > 0,
+)
 
 const showHeader = computed(
 	() => Boolean(props.label) || showActions.value,
 )
 
-const pushActionsEnd = computed(
-	() => showActions.value && !hasActions.value,
-)
+const pushActionsEnd = computed(() => showActions.value)
 
 const generatedId = useId()
 const textareaId = props.id || `readonly-textarea-${generatedId}`
@@ -156,6 +187,7 @@ function appendSection(sectionName) {
 function clear() {
 	content.value = ''
 	emit('update:modelValue', content.value)
+	emit('clear')
 }
 
 function getContentAsString() {
@@ -236,10 +268,6 @@ defineExpose({
 	flex-shrink: 0;
 }
 
-.readonly-textarea-actions--leading {
-	margin-left: 0;
-}
-
 .readonly-textarea-actions-slot {
 	display: inline-flex;
 	align-items: center;
@@ -247,7 +275,8 @@ defineExpose({
 	flex-wrap: wrap;
 }
 
-.readonly-textarea-copy {
+.readonly-textarea-copy,
+.readonly-textarea-clear {
 	display: inline-flex;
 	align-items: center;
 	gap: 0.35em;

package/vue/components/Section.vue

@@ -7,9 +7,6 @@
 						<HugeiconsIcon
 							:icon="icon"
 							class="section-title-icon"
-							width="1.1em"
-							height="1.1em"
-							:strokeWidth="2"
 							aria-hidden="true"
 						/>
 						<span class="section-title-text">

package/vue/components/Sidebar.vue

@@ -3,7 +3,7 @@
 		:id="SIDEBAR_PANEL_ID"
 		ref="sidebarRef"
 		class="sidebar"
-		:class="{ 'shown': isOpen, 'stuck': isStuck }"
+		:class="{ 'shown': isVisible, 'stuck': isStuck }"
 		aria-label="Sidebar"
 		:aria-hidden="isVisible ? undefined : 'true'"
 		:inert="isVisible ? undefined : true"
@@ -25,14 +25,14 @@
 						:icon="Pin02Icon"
 						width="1em"
 						height="1em"
-						:strokeWidth="3"
+						:strokeWidth="1.5"
 					/>
 					<HugeiconsIcon
 						v-else
 						:icon="PinIcon"
 						width="1em"
 						height="1em"
-						:strokeWidth="3"
+						:strokeWidth="1.5"
 					/>
 				</span>
 			</button>
@@ -274,8 +274,13 @@ function unstick() {
 }
 
 function toggle() {
+	if (isStuck.value) {
+		isStuck.value = false
+		isOpen.value = false
+		return
+	}
+
 	isOpen.value = !isOpen.value
-	isStuck.value = false
 }
 
 function open() {
@@ -284,7 +289,6 @@ function open() {
 
 function close() {
 	isOpen.value = false
-	isStuck.value = false
 }
 
 function isLinkActive(link) {
@@ -410,6 +414,28 @@ button {
 	border: 0;
 }
 
+.stick-toggle {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	align-self: stretch;
+	flex-shrink: 0;
+	padding-top: 0;
+	padding-bottom: 0;
+	padding-left: 1em;
+	padding-right: 1em;
+	border-radius: 0;
+	color: var(--text-color);
+	background-color: transparent;
+	cursor: pointer;
+}
+
+.stick-toggle:hover,
+.stick-toggle:focus-visible {
+	background-color: var(--sidebar-hover-bg-color);
+	color: var(--hover-text-color);
+}
+
 .navigation-links,
 .nav-section-links {
 	list-style: none;

package/vue/examples/App.vue

@@ -222,11 +222,6 @@
 		registerSidebarNavigation(navigation.value, { onHelloWorld: helloWorld })
 		registerTopBarNavigation(topBarNavigation.value)
 
-		if (sidebar.value) {
-			sidebar.value.open();
-			sidebar.value.stick();
-		}
-
 		registerQuickSearchItems()
 	});
 

package/vue/examples/CalendarExample.vue

@@ -1,10 +1,16 @@
 <template>
-	<Section 
-		title="Example Calendar" 
-		padding
+	<Section
+		title="Example Calendar"
+		subtitle="Open with ?view=week&date=2026-09-08 or ?view=day&date=2026-09-13 to load a specific week or day."
+		:icon="Calendar01Icon"
+		:padding="sectionPadding"
 	>
         <template #toolbar>
-            <label class="short-month-suffix-toggle">
+            <label class="calendar-example-toggle">
+                <input type="checkbox" v-model="sectionPadding" />
+                Section padding
+            </label>
+            <label class="calendar-example-toggle">
                 <input type="checkbox" v-model="shortMonthSuffix" />
                 Short month suffix
             </label>
@@ -21,8 +27,7 @@
             </div>
             <button @click="nextMonth">›</button>
         </template>
-		<Calendar 
-            :section="true"
+		<Calendar
 			:events="events"
 			:loading="loading"
 			:error="error"
@@ -30,6 +35,8 @@
 			:short-month-suffix="shortMonthSuffix"
 			:current-month="currentMonthIndex"
 			:current-year="currentYear"
+			v-model:view-mode="calendarViewMode"
+			v-model:focus-date="calendarFocusDate"
 			@event-click="handleEventClick"
 			@date-click="handleDateClick"
 			@date-range-select="handleDateRangeSelect"
@@ -37,12 +44,14 @@
 			@event-moved="handleEventMoved"
 			@event-move-rejected="handleEventMoveRejected"
 			@month-change="handleMonthChange"
+			@view-change="handleViewChange"
 		/>
 	</Section>
 </template>
 
 <script setup>
 import { ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import Calendar from '../components/Calendar.vue'
 import Section from '../components/Section.vue'
 import {
@@ -67,10 +76,38 @@ const EVENT_COLORS = {
 	deadline: { color: '#fde8e8', foregroundColor: '#7f1d1d' },
 }
 
+const route = useRoute()
+const router = useRouter()
+
+const VALID_VIEW_MODES = new Set(['month', 'week', 'day'])
+
+function parseRouteViewMode() {
+	const view = route.query.view
+	return typeof view === 'string' && VALID_VIEW_MODES.has(view) ? view : 'month'
+}
+
+function parseRouteFocusDate() {
+	const date = route.query.date
+	if (typeof date !== 'string' || !/^\d{4}-\d{2}-\d{2}$/.test(date)) {
+		return null
+	}
+
+	const parsed = new Date(`${date}T00:00:00`)
+	return Number.isNaN(parsed.getTime()) ? null : parsed
+}
+
+function formatFocusDateQuery(dateValue) {
+	const date = new Date(dateValue)
+	return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
+}
+
 const events = ref([])
 const loading = ref(false)
 const error = ref(null)
+const sectionPadding = ref(true)
 const shortMonthSuffix = ref(false)
+const calendarViewMode = ref(parseRouteViewMode())
+const calendarFocusDate = ref(parseRouteFocusDate())
 const currentMonth = ref('?')
 const currentMonthIndex = ref(new Date().getMonth())
 const currentYear = ref(new Date().getFullYear())
@@ -368,6 +405,22 @@ function goToSelectedDate() {
 	events.value = getEventsForSurroundingMonths(monthIndex, year)
 }
 
+function handleViewChange({ mode, focusDate }) {
+	const query = { ...route.query }
+
+	if (mode === 'month') {
+		delete query.view
+		delete query.date
+	} else {
+		query.view = mode
+		if (focusDate) {
+			query.date = formatFocusDateQuery(focusDate)
+		}
+	}
+
+	router.replace({ query })
+}
+
 function handleMonthChange(month, year) {
 	console.log('Month changed:', month, year)
 	// In a real app, you might fetch events for the new month
@@ -395,29 +448,24 @@ function handleMonthChange(month, year) {
 }
 
 onMounted(() => {
-	// Generate initial events for current, previous, and next months
-	const now = new Date()
-	const initMonth = now.getMonth()
-	const initYear = now.getFullYear()
+	const initialAnchor = calendarFocusDate.value ?? new Date()
+	const initMonth = initialAnchor.getMonth()
+	const initYear = initialAnchor.getFullYear()
+
 	events.value = getEventsForSurroundingMonths(initMonth, initYear)
-	
-	// Set initial month title using native JavaScript
-	currentMonthIndex.value = now.getMonth()
-	currentYear.value = now.getFullYear()
-	currentMonth.value = now.toLocaleDateString('en-US', { 
-		month: 'long', 
-		year: 'numeric' 
+	currentMonthIndex.value = initMonth
+	currentYear.value = initYear
+	currentMonth.value = initialAnchor.toLocaleDateString('en-US', {
+		month: 'long',
+		year: 'numeric',
 	})
-	
-	// Initialize the native date picker with current month/year
-	const year = now.getFullYear()
-	const month = String(now.getMonth() + 1).padStart(2, '0')
-	selectedDate.value = `${year}-${month}`
+
+	updateDatePicker(initMonth, initYear)
 })
 </script>
 
 <style scoped>
-.short-month-suffix-toggle {
+.calendar-example-toggle {
   display: inline-flex;
   align-items: center;
   gap: 0.35rem;

package/vue/examples/ReadOnlyTextAreaExample.vue

@@ -17,7 +17,9 @@
 				v-model="diagnosticLog"
 				label="Application log"
 				:rows="10"
+				show-clear-button
 				@copy="onCopy"
+				@clear="onClear"
 			>
 				<template #actions>
 					<button type="button" @click="refreshDiagnostics">Refresh log</button>
@@ -28,6 +30,7 @@
 				v-model="environmentInfo"
 				label="Environment (JSON)"
 				:rows="12"
+				show-clear-button
 				markdown-ticks
 				markdown-lang="json"
 			/>
@@ -37,14 +40,99 @@
 				v-model="yamlConfig"
 				label="Configuration (YAML)"
 				:rows="12"
+				show-clear-button
 				markdown-ticks
 				markdown-lang="yaml"
 			/>
 
-			<ReadOnlyTextArea
-				:rows="4"
-				placeholder="No diagnostics available."
-			/>
+			<div class="readonly-playground">
+				<p class="readonly-playground-intro">
+					Toggle options on the playground instance below to explore every
+					<code>ReadOnlyTextArea</code> prop and the actions slot.
+				</p>
+
+				<div
+					class="readonly-playground-controls"
+					role="group"
+					aria-label="ReadOnlyTextArea playground options"
+				>
+					<label class="readonly-example-toggle">
+						<input v-model="playground.labelEnabled" type="checkbox" />
+						Label
+					</label>
+					<label class="readonly-example-toggle">
+						<input v-model="playground.showCopyButton" type="checkbox" />
+						Copy button
+					</label>
+					<label class="readonly-example-toggle">
+						<input v-model="playground.showClearButton" type="checkbox" />
+						Clear button
+					</label>
+					<label class="readonly-example-toggle">
+						<input v-model="playground.showActions" type="checkbox" />
+						Actions slot
+					</label>
+					<label class="readonly-example-toggle">
+						<input v-model="playground.monospace" type="checkbox" />
+						Monospace
+					</label>
+					<label class="readonly-example-toggle">
+						<input v-model="playground.markdownTicks" type="checkbox" />
+						Markdown ticks
+					</label>
+					<label class="readonly-example-toggle">
+						<input
+							v-model="playground.markdownLangJson"
+							type="checkbox"
+							:disabled="!playground.markdownTicks"
+						/>
+						Markdown lang: json
+					</label>
+					<label class="readonly-example-toggle">
+						<input v-model="playground.usePlaceholder" type="checkbox" />
+						Placeholder
+					</label>
+					<label class="readonly-example-toggle">
+						<input v-model="playground.customButtonLabels" type="checkbox" />
+						Custom button labels
+					</label>
+					<label class="readonly-example-toggle readonly-playground-rows">
+						<span>Rows</span>
+						<input
+							v-model.number="playground.rows"
+							type="number"
+							min="2"
+							max="24"
+						/>
+					</label>
+				</div>
+
+				<ReadOnlyTextArea
+					v-model="playgroundContent"
+					:label="playground.labelEnabled ? 'Playground output' : ''"
+					:rows="playground.rows"
+					:placeholder="playground.usePlaceholder ? 'No diagnostics available.' : ''"
+					:monospace="playground.monospace"
+					:show-copy-button="playground.showCopyButton"
+					:show-clear-button="playground.showClearButton"
+					:copy-label="playground.customButtonLabels ? 'Copy all' : undefined"
+					:copied-label="playground.customButtonLabels ? 'Copied!' : undefined"
+					:clear-label="playground.customButtonLabels ? 'Reset' : undefined"
+					:markdown-ticks="playground.markdownTicks"
+					:markdown-lang="playground.markdownTicks && playground.markdownLangJson ? 'json' : ''"
+					@copy="onPlaygroundCopy"
+					@clear="onPlaygroundClear"
+					@copy-error="onPlaygroundCopyError"
+				>
+					<template v-if="playground.showActions" #actions>
+						<button type="button" @click="fillPlaygroundContent">Fill sample</button>
+					</template>
+				</ReadOnlyTextArea>
+
+				<p v-if="playgroundFeedback" class="copy-feedback subtle">
+					{{ playgroundFeedback }}
+				</p>
+			</div>
 
 			<p v-if="lastCopied" class="copy-feedback subtle">
 				Copied {{ lastCopied.length > 60 ? `${lastCopied.slice(0, 60)}…` : lastCopied }}
@@ -62,8 +150,40 @@ const diagnosticLog = ref('')
 const environmentInfo = ref('')
 const yamlConfig = ref('')
 const lastCopied = ref('')
+const playgroundFeedback = ref('')
 const yamlConfigRef = ref(null)
 
+const playground = ref({
+	labelEnabled: false,
+	showCopyButton: true,
+	showClearButton: false,
+	showActions: false,
+	monospace: true,
+	markdownTicks: false,
+	markdownLangJson: false,
+	usePlaceholder: false,
+	customButtonLabels: false,
+	rows: 4,
+})
+
+function buildPlaygroundSample() {
+	return [
+		'Playground sample output',
+		'Toggle the checkboxes above to try label, buttons, markdown fences, and monospace.',
+		'',
+		'status: ok',
+		'items: 3',
+	].join('\n')
+}
+
+const playgroundContent = ref(buildPlaygroundSample())
+
+function fillPlaygroundContent() {
+	playground.value.usePlaceholder = false
+	playgroundContent.value = buildPlaygroundSample()
+	playgroundFeedback.value = 'Filled playground with sample content.'
+}
+
 function buildDiagnosticLog() {
 	const now = new Date().toISOString()
 	return [
@@ -122,6 +242,23 @@ function onCopy(value) {
 	lastCopied.value = value.split('\n')[0]
 }
 
+function onClear() {
+	lastCopied.value = ''
+}
+
+function onPlaygroundCopy(value) {
+	playgroundFeedback.value = `Copied ${value.split('\n').length} line(s).`
+}
+
+function onPlaygroundClear() {
+	playgroundContent.value = ''
+	playgroundFeedback.value = 'Playground cleared.'
+}
+
+function onPlaygroundCopyError(error) {
+	playgroundFeedback.value = `Copy failed: ${error?.message ?? error}`
+}
+
 refreshDiagnostics()
 </script>
 
@@ -140,4 +277,34 @@ refreshDiagnostics()
 	margin: 0;
 	font-size: 0.875rem;
 }
+
+.readonly-playground {
+	display: flex;
+	flex-direction: column;
+	gap: 0.75rem;
+}
+
+.readonly-playground-intro {
+	margin: 0;
+}
+
+.readonly-example-toggle {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.35rem;
+	font-size: 0.875rem;
+	cursor: pointer;
+	user-select: none;
+}
+
+.readonly-playground-controls {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.75rem 1rem;
+}
+
+.readonly-playground-rows input[type='number'] {
+	width: 4rem;
+	padding: 0.15rem 0.35rem;
+}
 </style>