@lavalogic/scoria 0.40.33 → 0.40.34

package/dist/Components/ResourceCalendar/ResourceCalendar.svelte

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="E extends CalendarEvent"
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="E extends CalendarEvent"
 >import { m as i18n } from "../../paraglide/messages.js";
 import { Colour } from "../../scss/colours.js";
 import { Size } from "../../Types/Internal/Size.js";
@@ -519,241 +519,241 @@ $effect(() => {
 	calendarBody.scrollTop += delta;
 	hasCentred = true;
 });
-</script>
-
-<!-- A drag can end anywhere on the page; listen on the window so the drag state
-     is always finalised and never left "stuck" for the next drag. -->
-<svelte:window onmouseup={onSlotMouseUp} />
-
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<div
-	class="resource-calendar"
-	class:is-moving-event={isDraggingEvent}
-	role="application"
->
-	<!-- Header: navigation + view toggle -->
-	<div class="calendar-header">
-		<div class="header-left">
-			<Button
-				label={i18n['scoria.label.today']()}
-				size={Size.Small}
-				onclick={goToToday}
-			>
-				{i18n['scoria.label.today']()}
-			</Button>
-			<div class="nav-arrows">
-				<button
-					class="nav-btn"
-					onclick={() => {
-						navigateDate(-1);
-					}}
-					aria-label={i18n['scoria.action.previous']()}
-				>
-					<Icon
-						name="chevron-left"
-						size={Size.Small}
-						colour={Colour['$ui-blue-14']}
-					/>
-				</button>
-				<button
-					class="nav-btn"
-					onclick={() => {
-						navigateDate(1);
-					}}
-					aria-label={i18n['scoria.action.next']()}
-				>
-					<Icon
-						name="chevron-right"
-						size={Size.Small}
-						colour={Colour['$ui-blue-14']}
-					/>
-				</button>
-			</div>
-			<h2 class="current-date-label">{formatDate(selected)}</h2>
-		</div>
-		<div class="header-right">
-			{#if headerExtra}
-				{@render headerExtra()}
-			{/if}
-			<div class="view-toggle">
-				{#each viewModes as { mode, label } (mode)}
-					<button
-						class="view-btn"
-						class:active={viewMode === mode}
-						onclick={() => {
-							onviewmodechange(mode);
-						}}
-					>
-						{label}
-					</button>
-				{/each}
-			</div>
-		</div>
-	</div>
-
-	<!-- Week day tabs rendered OUTSIDE the scrollable body so they stay frozen -->
-	{#if viewMode === CalendarViewMode.Week}
-		<div class="week-day-tabs">
-			{#each weekDays as day (day.getTime())}
-				<button
-					class="week-day-tab"
-					class:active={sameDay(day, selected)}
-					class:today={sameDay(day, today)}
-					onclick={() => {
-						ondatechange(day);
-					}}
-				>
-					<span class="day-name">{dayNames[day.getDay()].slice(0, 3)}</span>
-					<span class="day-num">{day.getDate()}</span>
-				</button>
-			{/each}
-		</div>
-	{/if}
-
-	<!-- Calendar body -->
-	<div
-		class="calendar-body"
-		bind:this={calendarBody}
-	>
-		{#if isLoading}
-			<LoadingOverlay />
-		{/if}
-
-		{#if viewMode === CalendarViewMode.Day}
-			<!-- DAY VIEW -->
-			<!-- svelte-ignore a11y_no_static_element_interactions -->
-			<div
-				class="day-view"
-				onmouseleave={() => {
-					hoveredSlotIndex = null;
-				}}
-			>
-				<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
-				{@render resourceGrid(selected)}
-			</div>
-		{:else if viewMode === CalendarViewMode.Week}
-			<!-- WEEK VIEW: day grid only, tabs are above calendar-body -->
-			<!-- svelte-ignore a11y_no_static_element_interactions -->
-			<div
-				class="day-view"
-				onmouseleave={() => {
-					hoveredSlotIndex = null;
-				}}
-			>
-				<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
-				{@render resourceGrid(selected)}
-			</div>
-		{:else}
-			<!-- MONTH VIEW -->
-			<div class="month-view">
-				<div class="month-header-row">
-					{#each ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] as dayLabel (dayLabel)}
-						<div class="month-day-header">{dayLabel}</div>
-					{/each}
-				</div>
-				<div class="month-grid">
-					{#each monthDays as { date: dayDate, isCurrentMonth } (dayDate.getTime())}
-						<button
-							class="month-day-cell"
-							class:other-month={!isCurrentMonth}
-							class:today={sameDay(dayDate, today)}
-							class:selected={sameDay(dayDate, selected)}
-							onclick={() => {
-								ondatechange(dayDate);
-								onviewmodechange(CalendarViewMode.Day);
-							}}
-						>
-							<span class="day-number">{dayDate.getDate()}</span>
-							<div class="day-badges">
-								{#each countsAt(dayDate) as { resourceId, resourceLabel, count } (resourceId)}
-									<span class="resource-badge">
-										{resourceLabel}: {count}
-									</span>
-								{/each}
-							</div>
-						</button>
-					{/each}
-				</div>
-			</div>
-		{/if}
-	</div>
-</div>
-
-{#snippet resourceGrid(day: Date)}
-	<div class="grid-header">
-		<div class="time-header">{i18n['scoria.label.time']()}</div>
-		{#each resources as resource (resource.id)}
-			<div class="resource-header">{resource.label}</div>
-		{/each}
-	</div>
-	<div class="grid-body">
-		<div class="time-column">
-			{#each timeSlots as slot, slotIdx (slot.hour * 60 + slot.minute)}
-				<div
-					class="time-label"
-					class:hour-start={slot.minute === 0}
-					class:row-hover={hoveredSlotIndex === slotIdx}
-					data-centre-row={slot.hour === centreRowHour && slot.minute === 0 ? '' : undefined}
-				>
-					{#if slot.minute === 0}
-						<span>{slot.label}</span>
-					{/if}
-				</div>
-			{/each}
-		</div>
-		{#each resources as resource (resource.id)}
-			<div class="resource-column">
-				<!-- Slot cells for drag interaction (rendered first, below events) -->
-				{#each timeSlots as slot, slotIdx (slot.hour * 60 + slot.minute)}
-					<!-- svelte-ignore a11y_no_static_element_interactions -->
-					<div
-						class="slot-cell"
-						class:hour-start={slot.minute === 0}
-						class:drag-selected={isSlotInDragRange(resource.id, slotIdx)}
-						class:move-target={isSlotInMoveTarget(resource.id, slotIdx)}
-						class:row-hover={hoveredSlotIndex === slotIdx}
-						class:unavailable={isSlotUnavailable(resource.id, slotIdx)}
-						onmousedown={(e) => {
-							onSlotMouseDown(resource.id, slotIdx, e);
-						}}
-						onmouseenter={(e) => {
-							hoveredSlotIndex = slotIdx;
-							onSlotMouseEnter(resource.id, slotIdx, e);
-						}}
-						ondblclick={() => {
-							onSlotDoubleClick(resource.id, slotIdx);
-						}}
-					></div>
-				{/each}
-				<!-- Unavailable shading: one continuous block per contiguous run -->
-				{#each unavailableRunsAt(resource.id) as run (run.topPercent)}
-					<div
-						class="unavailable-overlay"
-						style="top: {run.topPercent}%; height: {run.heightPercent}%;"
-					></div>
-				{/each}
-				<!-- Event blocks positioned absolutely (rendered after, above slots).
-				     The consumer renders the card body via the `event` snippet. -->
-				{#each eventsAt(resource.id, day) as ev (ev.id)}
-					<!-- svelte-ignore a11y_no_static_element_interactions -->
-					<div
-						class="event-block"
-						class:dragging={isDraggingEvent && draggedEvent?.id === ev.id}
-						class:movable={!!oneventmove}
-						style="top: {ev.topPercent}%; height: {ev.heightPercent}%;"
-						onmousedown={(e) => {
-							onEventMouseDown(ev, e);
-						}}
-					>
-						{@render eventContent(ev)}
-					</div>
-				{/each}
-			</div>
-		{/each}
-	</div>
-{/snippet}
-
+</script>
+
+<!-- A drag can end anywhere on the page; listen on the window so the drag state
+     is always finalised and never left "stuck" for the next drag. -->
+<svelte:window onmouseup={onSlotMouseUp} />
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<div
+	class="resource-calendar"
+	class:is-moving-event={isDraggingEvent}
+	role="application"
+>
+	<!-- Header: navigation + view toggle -->
+	<div class="calendar-header">
+		<div class="header-left">
+			<Button
+				label={i18n['scoria.label.today']()}
+				size={Size.Small}
+				onclick={goToToday}
+			>
+				{i18n['scoria.label.today']()}
+			</Button>
+			<div class="nav-arrows">
+				<button
+					class="nav-btn"
+					onclick={() => {
+						navigateDate(-1);
+					}}
+					aria-label={i18n['scoria.action.previous']()}
+				>
+					<Icon
+						name="chevron-left"
+						size={Size.Small}
+						colour={Colour['$ui-blue-14']}
+					/>
+				</button>
+				<button
+					class="nav-btn"
+					onclick={() => {
+						navigateDate(1);
+					}}
+					aria-label={i18n['scoria.action.next']()}
+				>
+					<Icon
+						name="chevron-right"
+						size={Size.Small}
+						colour={Colour['$ui-blue-14']}
+					/>
+				</button>
+			</div>
+			<h2 class="current-date-label">{formatDate(selected)}</h2>
+		</div>
+		<div class="header-right">
+			{#if headerExtra}
+				{@render headerExtra()}
+			{/if}
+			<div class="view-toggle">
+				{#each viewModes as { mode, label } (mode)}
+					<button
+						class="view-btn"
+						class:active={viewMode === mode}
+						onclick={() => {
+							onviewmodechange(mode);
+						}}
+					>
+						{label}
+					</button>
+				{/each}
+			</div>
+		</div>
+	</div>
+
+	<!-- Week day tabs rendered OUTSIDE the scrollable body so they stay frozen -->
+	{#if viewMode === CalendarViewMode.Week}
+		<div class="week-day-tabs">
+			{#each weekDays as day (day.getTime())}
+				<button
+					class="week-day-tab"
+					class:active={sameDay(day, selected)}
+					class:today={sameDay(day, today)}
+					onclick={() => {
+						ondatechange(day);
+					}}
+				>
+					<span class="day-name">{dayNames[day.getDay()].slice(0, 3)}</span>
+					<span class="day-num">{day.getDate()}</span>
+				</button>
+			{/each}
+		</div>
+	{/if}
+
+	<!-- Calendar body -->
+	<div
+		class="calendar-body"
+		bind:this={calendarBody}
+	>
+		{#if isLoading}
+			<LoadingOverlay />
+		{/if}
+
+		{#if viewMode === CalendarViewMode.Day}
+			<!-- DAY VIEW -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div
+				class="day-view"
+				onmouseleave={() => {
+					hoveredSlotIndex = null;
+				}}
+			>
+				<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+				{@render resourceGrid(selected)}
+			</div>
+		{:else if viewMode === CalendarViewMode.Week}
+			<!-- WEEK VIEW: day grid only, tabs are above calendar-body -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div
+				class="day-view"
+				onmouseleave={() => {
+					hoveredSlotIndex = null;
+				}}
+			>
+				<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+				{@render resourceGrid(selected)}
+			</div>
+		{:else}
+			<!-- MONTH VIEW -->
+			<div class="month-view">
+				<div class="month-header-row">
+					{#each ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] as dayLabel (dayLabel)}
+						<div class="month-day-header">{dayLabel}</div>
+					{/each}
+				</div>
+				<div class="month-grid">
+					{#each monthDays as { date: dayDate, isCurrentMonth } (dayDate.getTime())}
+						<button
+							class="month-day-cell"
+							class:other-month={!isCurrentMonth}
+							class:today={sameDay(dayDate, today)}
+							class:selected={sameDay(dayDate, selected)}
+							onclick={() => {
+								ondatechange(dayDate);
+								onviewmodechange(CalendarViewMode.Day);
+							}}
+						>
+							<span class="day-number">{dayDate.getDate()}</span>
+							<div class="day-badges">
+								{#each countsAt(dayDate) as { resourceId, resourceLabel, count } (resourceId)}
+									<span class="resource-badge">
+										{resourceLabel}: {count}
+									</span>
+								{/each}
+							</div>
+						</button>
+					{/each}
+				</div>
+			</div>
+		{/if}
+	</div>
+</div>
+
+{#snippet resourceGrid(day: Date)}
+	<div class="grid-header">
+		<div class="time-header">{i18n['scoria.label.time']()}</div>
+		{#each resources as resource (resource.id)}
+			<div class="resource-header">{resource.label}</div>
+		{/each}
+	</div>
+	<div class="grid-body">
+		<div class="time-column">
+			{#each timeSlots as slot, slotIdx (slot.hour * 60 + slot.minute)}
+				<div
+					class="time-label"
+					class:hour-start={slot.minute === 0}
+					class:row-hover={hoveredSlotIndex === slotIdx}
+					data-centre-row={slot.hour === centreRowHour && slot.minute === 0 ? '' : undefined}
+				>
+					{#if slot.minute === 0}
+						<span>{slot.label}</span>
+					{/if}
+				</div>
+			{/each}
+		</div>
+		{#each resources as resource (resource.id)}
+			<div class="resource-column">
+				<!-- Slot cells for drag interaction (rendered first, below events) -->
+				{#each timeSlots as slot, slotIdx (slot.hour * 60 + slot.minute)}
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div
+						class="slot-cell"
+						class:hour-start={slot.minute === 0}
+						class:drag-selected={isSlotInDragRange(resource.id, slotIdx)}
+						class:move-target={isSlotInMoveTarget(resource.id, slotIdx)}
+						class:row-hover={hoveredSlotIndex === slotIdx}
+						class:unavailable={isSlotUnavailable(resource.id, slotIdx)}
+						onmousedown={(e) => {
+							onSlotMouseDown(resource.id, slotIdx, e);
+						}}
+						onmouseenter={(e) => {
+							hoveredSlotIndex = slotIdx;
+							onSlotMouseEnter(resource.id, slotIdx, e);
+						}}
+						ondblclick={() => {
+							onSlotDoubleClick(resource.id, slotIdx);
+						}}
+					></div>
+				{/each}
+				<!-- Unavailable shading: one continuous block per contiguous run -->
+				{#each unavailableRunsAt(resource.id) as run (run.topPercent)}
+					<div
+						class="unavailable-overlay"
+						style="top: {run.topPercent}%; height: {run.heightPercent}%;"
+					></div>
+				{/each}
+				<!-- Event blocks positioned absolutely (rendered after, above slots).
+				     The consumer renders the card body via the `event` snippet. -->
+				{#each eventsAt(resource.id, day) as ev (ev.id)}
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div
+						class="event-block"
+						class:dragging={isDraggingEvent && draggedEvent?.id === ev.id}
+						class:movable={!!oneventmove}
+						style="top: {ev.topPercent}%; height: {ev.heightPercent}%;"
+						onmousedown={(e) => {
+							onEventMouseDown(ev, e);
+						}}
+					>
+						{@render eventContent(ev)}
+					</div>
+				{/each}
+			</div>
+		{/each}
+	</div>
+{/snippet}
+
 <style>.resource-calendar {
   display: flex;
   flex-flow: column nowrap;
@@ -1150,4 +1150,4 @@ $effect(() => {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-}</style>
+}</style>

package/dist/Components/SidebarPanel.svelte

@@ -1,36 +1,36 @@
-<svelte:options runes />
-
-<!--
-@component
-A titled card laid out as a fixed-width menu column beside a main content
-area. Both regions are supplied by the consumer as snippets (`menu` and the
-default `children`), so the component only owns the framing and layout.
--->
+<svelte:options runes />
+
+<!--
+@component
+A titled card laid out as a fixed-width menu column beside a main content
+area. Both regions are supplied by the consumer as snippets (`menu` and the
+default `children`), so the component only owns the framing and layout.
+-->
 <script lang="ts">let { title, subtitle, menu, children, menuWidth = "14rem" } = $props();
 export {};
-</script>
-
-<section class="sidebar-panel">
-	<header class="heading">
-		<h2>{title}</h2>
-		{#if subtitle}
-			<span class="subtitle">{subtitle}</span>
-		{/if}
-	</header>
-
-	<div class="body">
-		<aside
-			class="menu"
-			style="--menu-width: {menuWidth};"
-		>
-			{@render menu()}
-		</aside>
-		<div class="main">
-			{@render children()}
-		</div>
-	</div>
-</section>
-
+</script>
+
+<section class="sidebar-panel">
+	<header class="heading">
+		<h2>{title}</h2>
+		{#if subtitle}
+			<span class="subtitle">{subtitle}</span>
+		{/if}
+	</header>
+
+	<div class="body">
+		<aside
+			class="menu"
+			style="--menu-width: {menuWidth};"
+		>
+			{@render menu()}
+		</aside>
+		<div class="main">
+			{@render children()}
+		</div>
+	</div>
+</section>
+
 <style>.sidebar-panel {
   display: flex;
   flex-flow: column nowrap;
@@ -80,4 +80,4 @@ export {};
   flex-flow: column nowrap;
   gap: 1.5rem;
   padding: 1.5rem;
-}</style>
+}</style>