chore(deps): update dependency vite to v8.2.0

lib/Module.php

@@ -2,14 +2,13 @@
 
 namespace KTXM\Chrono;
 
-use KTXF\Module\Configuration\BrowserModuleContextInterface;
-use KTXF\Module\Configuration\ModuleContextInterface;
+use KTXF\Module\ModuleBrowserInterface;
 use KTXF\Module\ModuleInstanceAbstract;
 
 /**
  * Chrono Module - Calendaring and Tasks
  */
-class Module extends ModuleInstanceAbstract
+class Module extends ModuleInstanceAbstract implements ModuleBrowserInterface
 {
 
     public function __construct()
@@ -51,11 +50,17 @@ class Module extends ModuleInstanceAbstract
         ];
     }
 
-    public function configure(ModuleContextInterface $context): void
+    public function registerBI(): array
     {
-        if ($context instanceof BrowserModuleContextInterface) {
-            $context->registerModule($this, 'Chrono', 'static/module.mjs');
-        }
+        return [
+            'handle' => $this->handle(),
+            'namespace' => 'Chrono',
+            'version' => $this->version(),
+            'label' => $this->label(),
+            'author' => $this->author(),
+            'description' => $this->description(),
+            'boot' => 'static/module.mjs',
+        ];
     }
 
 }

package.json

@@ -25,13 +25,13 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",
-    "@vitest/coverage-v8": "^5.0.0",
+    "@vitest/coverage-v8": "^4.1.6",
     "@vue/test-utils": "^2.4.10",
     "@vue/tsconfig": "^0.9.0",
-    "jsdom": "^30.0.0",
+    "jsdom": "^29.1.1",
     "typescript": "~6.0.0",
     "vite": "^8.0.0",
-    "vitest": "^5.0.0",
+    "vitest": "^4.1.6",
     "vue-tsc": "^3.0.5"
   }
 }

src/components/EventEditor.vue

@@ -148,8 +148,8 @@ watch(
 </script>
 
 <template>
-  <v-sheet class="text-start overflow-auto" color="surface" min-height="84vh" max-height="84vh">
-    <v-sheet class="event-editor-header d-flex justify-space-between pa-4" color="surface">
+  <v-sheet class="pa-2 text-start overflow-auto" min-height="84vh" max-height="84vh">
+    <div class="event-editor-header d-flex justify-space-between pa-4">
       <div>
         <v-icon :icon="entityIcon" class="mr-2" />
         {{ entityObject?.label || 'Nothing Selected' }}
@@ -180,7 +180,7 @@ watch(
           @click="$emit('close')"
         />
       </div>
-    </v-sheet>
+    </div>
 
     <div class="event-editor-fields">
       <v-divider />
@@ -215,12 +215,6 @@ watch(
           @update:description="entityObject!.description = $event"
         />
 
-        <EventEditorTags
-          :mode="mode"
-          :tags="entityObject!.tags"
-          @update:tags="entityObject!.tags = $event"
-        />
-
         <EventEditorDates
           :mode="mode"
           :starts-on="entityObject!.startsOn"
@@ -252,7 +246,9 @@ watch(
 
         <EventEditorParticipants
           :mode="mode"
+          :organizer="entityObject!.organizer"
           :participants="entityObject!.participants || {}"
+          @update:organizer="entityObject!.organizer = $event"
           @add-participant="addParticipant"
           @remove-participant="removeParticipant"
         />
@@ -264,6 +260,12 @@ watch(
           @remove-notification="removeNotification"
         />
 
+        <EventEditorTags
+          :mode="mode"
+          :tags="entityObject!.tags"
+          @update:tags="entityObject!.tags = $event"
+        />
+
         <!-- Metadata for view mode -->
         <div v-if="mode === 'view' && entityObject!.created" class="event-editor-section">
           <v-divider class="mb-4"></v-divider>
@@ -283,7 +285,7 @@ watch(
       <v-divider/>
     </div>
 
-    <v-sheet class="event-editor-footer d-flex text-end justify-space-between pa-4" color="surface">
+    <div class="event-editor-footer d-flex text-end justify-space-between pa-4">
       <v-btn v-if="mode === 'edit'"
         variant="text"
         @click="cancelEdit"
@@ -299,7 +301,7 @@ watch(
         :loading="saving">
         Save
       </v-btn>
-    </v-sheet>
+    </div>
   </v-sheet>
 </template>
 
@@ -307,18 +309,4 @@ watch(
 .event-editor-section {
   margin-bottom: 1.5rem;
 }
-
-.event-editor-header,
-.event-editor-footer {
-  position: sticky;
-  z-index: 2;
-}
-
-.event-editor-header {
-  top: 0;
-}
-
-.event-editor-footer {
-  bottom: 0;
-}
 </style>

src/components/editors/EventEditorDateTimeField.vue

@@ -1,96 +0,0 @@
-<script setup lang="ts">
-import { ref, watch } from 'vue'
-import { formatDisplayDate, formatDisplayTime, formatLocalIsoDate, formatLocalIsoTime } from '@/utils/format'
-
-interface Props {
-  modelValue?: string | null
-}
-
-const props = defineProps<Props>()
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string | null]
-}>()
-
-const dateValue = ref('')
-const timeValue = ref('')
-const dateMenu = ref(false)
-const timeMenu = ref(false)
-
-watch(() => props.modelValue, (value) => {
-  const date = value ? new Date(value) : new Date()
-  dateValue.value = formatLocalIsoDate(date)
-  timeValue.value = formatLocalIsoTime(date)
-}, { immediate: true })
-
-const emitValue = () => {
-  if (!dateValue.value || !timeValue.value) return
-  emit('update:modelValue', new Date(`${dateValue.value}T${timeValue.value}`).toISOString())
-}
-
-const pickerDate = (value: string): Date | null => value ? new Date(`${value}T00:00:00`) : null
-
-const normalizePickerDate = (value: unknown): string => {
-  const selected = Array.isArray(value) ? value[0] : value
-  const date = selected instanceof Date ? selected : new Date(String(selected))
-  return Number.isNaN(date.getTime()) ? '' : formatLocalIsoDate(date)
-}
-
-const selectDate = (value: unknown) => {
-  const date = normalizePickerDate(value)
-  if (date) dateValue.value = date
-  dateMenu.value = false
-  emitValue()
-}
-
-watch(timeValue, () => emitValue())
-</script>
-
-<template>
-  <v-row dense>
-    <v-col cols="6">
-      <v-menu v-model="dateMenu" :close-on-content-click="false" location="bottom start">
-        <template #activator="{ props: activatorProps }">
-          <v-text-field
-            v-bind="activatorProps"
-            :model-value="formatDisplayDate(dateValue)"
-            label="Date"
-            prepend-inner-icon="mdi-calendar"
-            variant="outlined"
-            density="compact"
-            hide-details
-            readonly
-          />
-        </template>
-        <v-date-picker
-          :model-value="pickerDate(dateValue)"
-          color="primary"
-          show-adjacent-months
-          @update:model-value="selectDate"
-        />
-      </v-menu>
-    </v-col>
-    <v-col cols="6">
-      <v-menu v-model="timeMenu" :close-on-content-click="false" location="bottom start">
-        <template #activator="{ props: activatorProps }">
-          <v-text-field
-            v-bind="activatorProps"
-            :model-value="formatDisplayTime(timeValue)"
-            label="Time"
-            prepend-inner-icon="mdi-clock-outline"
-            variant="outlined"
-            density="compact"
-            hide-details
-            readonly
-          />
-        </template>
-        <v-card>
-          <v-time-picker v-model="timeValue" color="primary" format="ampm" />
-          <v-card-actions class="justify-end">
-            <v-btn variant="text" @click="timeMenu = false">Done</v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-menu>
-    </v-col>
-  </v-row>
-</template>

src/components/editors/EventEditorDates.vue

@@ -137,6 +137,8 @@ watch([startDate, startTime, endDate, endTime, timelessValue], () => {
 
 <template>
   <div class="event-editor-section">
+    <div class="text-subtitle-1 mb-2">Date & Time</div>
+    
     <!-- Read-only view -->
     <div v-if="mode === 'view'">
       <div class="mb-2 pa-2">
@@ -162,6 +164,7 @@ watch([startDate, startTime, endDate, endTime, timelessValue], () => {
       />
 
       <div class="mb-3">
+        <div class="text-subtitle-2 mb-2">Start</div>
         <v-row dense>
           <v-col cols="12" md="6">
             <v-menu v-model="startDateMenu" :close-on-content-click="false" location="bottom start">
@@ -209,6 +212,7 @@ watch([startDate, startTime, endDate, endTime, timelessValue], () => {
       </div>
 
       <div class="mb-3">
+        <div class="text-subtitle-2 mb-2">End</div>
         <v-row dense>
           <v-col cols="12" md="6">
             <v-menu v-model="endDateMenu" :close-on-content-click="false" location="bottom start">

src/components/editors/EventEditorDescription.vue

@@ -20,6 +20,7 @@ const descriptionValue = computed({
 
 <template>
   <div v-if="descriptionValue || mode === 'edit'" class="event-editor-section">
+    <div class="text-subtitle-1 mb-2">Description</div>
     <!-- Read-only view -->
     <div v-if="mode === 'view'" class="mb-4">
       <div class="mb-2 pa-2 white-space-pre-wrap">{{ descriptionValue || 'No description' }}</div>

src/components/editors/EventEditorLabel.vue

@@ -20,6 +20,7 @@ const labelValue = computed({
 
 <template>
   <div class="event-editor-section">
+    <div class="text-subtitle-1 mb-2">Title</div>
     <!-- Read-only view -->
     <div v-if="mode === 'view'" class="mb-4">
       <div class="mb-2 pa-2">{{ labelValue || 'Untitled Event' }}</div>

src/components/editors/EventEditorLocations.vue

@@ -22,30 +22,21 @@ const hasLocations = () => {
 
 <template>
   <div v-if="hasLocations() || mode === 'edit'" class="event-editor-section">
-    <div class="d-flex align-center justify-space-between mb-2">
-      <div class="text-subtitle-1">Locations</div>
-      <div v-if="mode === 'edit'" class="d-flex ga-2">
-        <v-btn
-          icon="mdi-map-marker"
-          size="x-small"
-          variant="text"
-          rounded="0"
-          title="Add Physical Location"
-          @click="$emit('add-location-physical')">
-        </v-btn>
-        <v-btn
-          icon="mdi-web"
-          size="x-small"
-          variant="text"
-          rounded="0"
-          title="Add Virtual Location"
-          @click="$emit('add-location-virtual')">
-        </v-btn>
-      </div>
-    </div>
+    <div class="text-subtitle-1 mb-2">Locations</div>
 
     <!-- Physical Locations -->
     <div v-if="Object.keys(locationsPhysical || {}).length > 0 || mode === 'edit'" class="mb-4">
+      <div class="d-flex align-center justify-space-between mb-2">
+        <div class="text-subtitle-2">Physical Locations</div>
+        <v-btn v-if="mode === 'edit'"
+          size="small"
+          variant="outlined"
+          @click="$emit('add-location-physical')">
+          <v-icon left>mdi-plus</v-icon>
+          Add
+        </v-btn>
+      </div>
+
       <!-- Read-only view -->
       <div v-if="mode === 'view'">
         <div v-for="(location, key) in locationsPhysical" :key="key" class="mb-2 pa-2 border rounded">
@@ -58,7 +49,8 @@ const hasLocations = () => {
       <!-- Edit view -->
       <div v-else>
         <div v-for="(location, key) in locationsPhysical" :key="key" class="mb-3 pa-3 border rounded">
-          <div class="d-flex justify-end mb-2">
+          <div class="d-flex align-center justify-space-between mb-2">
+            <strong>{{ location.label || 'Physical Location' }}</strong>
             <v-btn
               icon="mdi-delete"
               size="small"
@@ -109,6 +101,17 @@ const hasLocations = () => {
 
     <!-- Virtual Locations -->
     <div v-if="Object.keys(locationsVirtual || {}).length > 0 || mode === 'edit'">
+      <div class="d-flex align-center justify-space-between mb-2">
+        <div class="text-subtitle-2">Virtual Locations</div>
+        <v-btn v-if="mode === 'edit'"
+          size="small"
+          variant="outlined"
+          @click="$emit('add-location-virtual')">
+          <v-icon left>mdi-plus</v-icon>
+          Add
+        </v-btn>
+      </div>
+
       <!-- Read-only view -->
       <div v-if="mode === 'view'">
         <div v-for="(location, key) in locationsVirtual" :key="key" class="mb-2 pa-2 border rounded">
@@ -123,7 +126,8 @@ const hasLocations = () => {
       <!-- Edit view -->
       <div v-else>
         <div v-for="(location, key) in locationsVirtual" :key="key" class="mb-3 pa-3 border rounded">
-          <div class="d-flex justify-end mb-2">
+          <div class="d-flex align-center justify-space-between mb-2">
+            <strong>{{ location.label || 'Virtual Location' }}</strong>
             <v-btn
               icon="mdi-delete"
               size="small"

src/components/editors/EventEditorNotifications.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import EventEditorDateTimeField from './EventEditorDateTimeField.vue'
-
 interface Props {
   mode: 'edit' | 'view'
   notifications: Record<string, any>
@@ -15,12 +13,14 @@ const emit = defineEmits<{
 
 const typeOptions = [
   { title: 'Email', value: 'email' },
-  { title: 'Display', value: 'visual' }
+  { title: 'Visual (Display)', value: 'visual' },
+  { title: 'Audible (Sound)', value: 'audible' }
 ]
 
 const patternOptions = [
-  { title: 'Relative', value: 'relative' },
-  { title: 'Absolute', value: 'absolute' },
+  { title: 'Absolute (Specific Time)', value: 'absolute' },
+  { title: 'Relative (Before Event)', value: 'relative' },
+  { title: 'Unknown', value: 'unknown' }
 ]
 
 const anchorOptions = [
@@ -28,18 +28,6 @@ const anchorOptions = [
   { title: 'End Time', value: 'end' }
 ]
 
-const offsetPresets = [
-  { title: '5 minutes before', value: 'PT5M' },
-  { title: '10 minutes before', value: 'PT10M' },
-  { title: '15 minutes before', value: 'PT15M' },
-  { title: '30 minutes before', value: 'PT30M' },
-  { title: '1 hour before', value: 'PT1H' },
-  { title: '2 hours before', value: 'PT2H' },
-  { title: '1 day before', value: 'P1D' },
-  { title: '2 days before', value: 'P2D' },
-  { title: '1 week before', value: 'P1W' },
-]
-
 const formatNotification = (notification: any) => {
   if (notification.pattern === 'absolute' && notification.when) {
     return `At ${new Date(notification.when).toLocaleString()}`
@@ -56,12 +44,11 @@ const formatNotification = (notification: any) => {
     <div class="d-flex align-center justify-space-between mb-2">
       <div class="text-subtitle-1">Notifications</div>
       <v-btn v-if="mode === 'edit'"
-        icon="mdi-bell"
-        size="x-small"
-        variant="text"
-        rounded="0"
-        title="Add Notification"
+        size="small"
+        variant="outlined"
         @click="$emit('add-notification')">
+        <v-icon left>mdi-plus</v-icon>
+        Add Notification
       </v-btn>
     </div>
 
@@ -82,65 +69,9 @@ const formatNotification = (notification: any) => {
 
     <!-- Edit view -->
     <div v-else>
-      <div v-for="(notification, key) in notifications" :key="key" class="mb-2 pa-2 border rounded">
-        <div class="d-flex align-center ga-2">
-          <v-row dense class="flex-grow-1">
-            <v-col cols="6" sm="3">
-              <v-select
-                v-model="notification.type"
-                :items="typeOptions"
-                label="Type"
-                variant="outlined"
-                density="compact"
-                hide-details
-                :rules="[v => !!v || 'Type is required']"
-              />
-            </v-col>
-            <v-col cols="6" sm="3">
-              <v-select
-                v-model="notification.pattern"
-                :items="patternOptions"
-                label="Pattern"
-                variant="outlined"
-                density="compact"
-                hide-details
-                :rules="[v => !!v || 'Pattern is required']"
-              />
-            </v-col>
-
-            <v-col v-if="notification.pattern === 'absolute'" cols="12" sm="6">
-              <EventEditorDateTimeField
-                :model-value="notification.when"
-                @update:model-value="notification.when = $event"
-              />
-            </v-col>
-
-            <template v-else-if="notification.pattern === 'relative'">
-              <v-col cols="6" sm="3">
-                <v-select
-                  v-model="notification.anchor"
-                  :items="anchorOptions"
-                  label="Anchor"
-                  variant="outlined"
-                  density="compact"
-                  hide-details
-                />
-              </v-col>
-              <v-col cols="6" sm="3">
-                <v-combobox
-                  v-model="notification.offset"
-                  :items="offsetPresets"
-                  item-title="title"
-                  item-value="value"
-                  label="Offset"
-                  variant="outlined"
-                  density="compact"
-                  hide-details
-                />
-              </v-col>
-            </template>
-          </v-row>
-
+      <div v-for="(notification, key) in notifications" :key="key" class="mb-3 pa-3 border rounded">
+        <div class="d-flex align-center justify-space-between mb-2">
+          <strong>Notification</strong>
           <v-btn
             icon="mdi-delete"
             size="small"
@@ -149,6 +80,63 @@ const formatNotification = (notification: any) => {
             @click="$emit('remove-notification', key)">
           </v-btn>
         </div>
+
+        <v-row dense class="mb-2">
+          <v-col cols="12" md="6">
+            <v-select
+              v-model="notification.type"
+              :items="typeOptions"
+              label="Type"
+              variant="outlined"
+              density="compact"
+              :rules="[v => !!v || 'Type is required']"
+            />
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-select
+              v-model="notification.pattern"
+              :items="patternOptions"
+              label="Pattern"
+              variant="outlined"
+              density="compact"
+              :rules="[v => !!v || 'Pattern is required']"
+            />
+          </v-col>
+        </v-row>
+
+        <div v-if="notification.pattern === 'absolute'">
+          <v-text-field
+            v-model="notification.when"
+            label="When (ISO Date)"
+            type="datetime-local"
+            variant="outlined"
+            density="compact"
+            hint="Specific date and time for notification"
+          />
+        </div>
+
+        <div v-else-if="notification.pattern === 'relative'">
+          <v-row dense>
+            <v-col cols="12" md="6">
+              <v-text-field
+                v-model="notification.offset"
+                label="Offset (e.g., PT15M)"
+                variant="outlined"
+                density="compact"
+                hint="ISO 8601 duration before event"
+              />
+            </v-col>
+            <v-col cols="12" md="6">
+              <v-select
+                v-model="notification.anchor"
+                :items="anchorOptions"
+                label="Anchor"
+                variant="outlined"
+                density="compact"
+              />
+            </v-col>
+          </v-row>
+        </div>
       </div>
     </div>
   </div>

src/components/editors/EventEditorOccurrence.vue

@@ -221,13 +221,13 @@ const formatRecurrence = (pattern: RecurrencePattern) => {
       <div class="text-subtitle-1">Recurrence</div>
       <v-btn
         v-if="mode === 'edit' && !pattern"
-        icon="mdi-repeat"
-        size="x-small"
-        variant="text"
-        rounded="0"
-        title="Add Recurrence"
+        size="small"
+        variant="outlined"
         @click="addRecurrence"
-      />
+      >
+        <v-icon start icon="mdi-plus" />
+        Add
+      </v-btn>
       <v-btn
         v-else-if="mode === 'edit'"
         icon="mdi-delete"

src/components/editors/EventEditorParticipants.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 interface Props {
   mode: 'edit' | 'view'
+  organizer: any | null
   participants: Record<string, any>
 }
 
 const props = defineProps<Props>()
 
 const emit = defineEmits<{
+  'update:organizer': [organizer: any | null]
   'add-participant': []
   'remove-participant': [key: string]
 }>()
@@ -37,26 +39,61 @@ const typeOptions = [
 ]
 
 const hasParticipants = () => {
-  return Object.keys(props.participants || {}).length > 0
+  return props.organizer || Object.keys(props.participants || {}).length > 0
 }
 </script>
 
 <template>
   <div v-if="hasParticipants() || mode === 'edit'" class="event-editor-section">
-    <div class="d-flex align-center justify-space-between mb-2">
-      <div class="text-subtitle-1">Participants</div>
-      <v-btn v-if="mode === 'edit'"
-        icon="mdi-account"
-        size="x-small"
-        variant="text"
-        rounded="0"
-        title="Add Attendee"
-        @click="$emit('add-participant')">
-      </v-btn>
+    <div class="text-subtitle-1 mb-2">Participants</div>
+
+    <!-- Organizer -->
+    <div v-if="organizer || mode === 'edit'" class="mb-4">
+      <div class="text-subtitle-2 mb-2">Organizer</div>
+      
+      <!-- Read-only view -->
+      <div v-if="mode === 'view' && organizer" class="pa-2 border rounded">
+        <div class="mb-1"><strong>{{ organizer.name || organizer.address }}</strong></div>
+        <div class="text-caption text-grey">{{ organizer.address }}</div>
+      </div>
+
+      <!-- Edit view -->
+      <div v-else-if="mode === 'edit'" class="pa-3 border rounded">
+        <v-row dense>
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="organizer.name"
+              label="Name"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="organizer.address"
+              label="Email/Address"
+              variant="outlined"
+              density="compact"
+              :rules="[v => !!v || 'Address is required']"
+            />
+          </v-col>
+        </v-row>
+      </div>
     </div>
 
     <!-- Participants List -->
     <div v-if="Object.keys(participants || {}).length > 0 || mode === 'edit'">
+      <div class="d-flex align-center justify-space-between mb-2">
+        <div class="text-subtitle-2">Attendees</div>
+        <v-btn v-if="mode === 'edit'"
+          size="small"
+          variant="outlined"
+          @click="$emit('add-participant')">
+          <v-icon left>mdi-plus</v-icon>
+          Add Participant
+        </v-btn>
+      </div>
+
       <!-- Read-only view -->
       <div v-if="mode === 'view'">
         <div v-for="(participant, key) in participants" :key="key" class="mb-2 pa-2 border rounded">
@@ -94,7 +131,8 @@ const hasParticipants = () => {
       <!-- Edit view -->
       <div v-else>
         <div v-for="(participant, key) in participants" :key="key" class="mb-3 pa-3 border rounded">
-          <div class="d-flex justify-end mb-2">
+          <div class="d-flex align-center justify-space-between mb-2">
+            <strong>{{ participant.name || 'Participant' }}</strong>
             <v-btn
               icon="mdi-delete"
               size="small"

src/components/editors/EventEditorTags.vue

@@ -20,6 +20,8 @@ const tagsValue = computed({
 
 <template>
   <div v-if="tagsValue.length > 0 || mode === 'edit'" class="event-editor-section">
+    <div class="text-subtitle-1 mb-2">Tags</div>
+    
     <!-- Read-only view -->
     <div v-if="mode === 'view'" class="mb-4">
       <div v-if="tagsValue.length > 0" class="pa-2">