@nomideusz/svelte-calendar 0.10.0 → 0.12.0

package/dist/views/agenda/AgendaWeek.svelte

@@ -24,6 +24,7 @@ const hideDays = $derived(ctx.hideDays);
 const isMobile = $derived(ctx.isMobile);
 const autoHeight = $derived(ctx.autoHeight);
 const compact = $derived(ctx.compact);
+const cols = $derived(ctx.columns && !isMobile);
 const dayHeaderSnippet = $derived(ctx.dayHeaderSnippet);
 const oneventhover = $derived(ctx.oneventhover);
 const disabledSet = $derived(ctx.disabledSet);
@@ -54,6 +55,10 @@ let expandedDays = $state([]);
 function toggleDayExpand(ms) {
   expandedDays = expandedDays.includes(ms) ? expandedDays.filter((m) => m !== ms) : [...expandedDays, ms];
 }
+let expandedPast = $state([]);
+function togglePastExpand(ms) {
+  expandedPast = expandedPast.includes(ms) ? expandedPast.filter((m) => m !== ms) : [...expandedPast, ms];
+}
 const fmt = (d) => fmtTime(d, locale);
 const eta = (ms) => timeUntilMs(ms, clock.tick, L);
 const prog = (ev) => progress(ev, clock.tick);
@@ -178,18 +183,71 @@ const weekDays = $derived.by(() => {
 	</button>
 {/snippet}
 
+<!-- ═══ Shared compact row snippet ═══ -->
+{#snippet compactRow(ev: TimelineEvent, showLoc: boolean, done: boolean)}
+	<button
+		type="button"
+		class="ag-compact"
+		class:ag-compact--selected={selectedEventId === ev.id}
+		class:ag-compact--done={done}
+		class:ag-compact--cancelled={ev.status === 'cancelled'}
+		class:ag-compact--tentative={ev.status === 'tentative'}
+		class:ag-compact--full={ev.status === 'full'}
+		class:ag-compact--limited={ev.status === 'limited'}
+		style:--ev-color={ev.color || 'var(--dt-accent)'}
+		aria-label="{ev.title}{done ? `, ${L.completed}` : ''}, {fmt(ev.start)}, {duration(ev)}"
+		onclick={() => handleClick(ev)}
+		onpointerenter={() => oneventhover?.(ev)}
+	>
+		<EventContent event={ev}>
+		<span class="ag-compact-time">{fmt(ev.start)}</span>
+		<div class="ag-compact-main">
+			<span class="ag-compact-title">{ev.title}</span>
+			{#if showLoc && ev.location}
+				<span class="ag-compact-loc">{ev.location}</span>
+			{/if}
+			{#if ev.subtitle}
+				<span class="ag-compact-sub">{ev.subtitle}</span>
+			{/if}
+			{#if ev.tags?.length}
+				{#each ev.tags as tag}
+					<span class="ag-compact-tag">{tag}</span>
+				{/each}
+			{/if}
+		</div>
+		<span class="ag-compact-dur">{duration(ev)}</span>
+		</EventContent>
+	</button>
+{/snippet}
+
+<!-- ═══ "✓ N completed" disclosure toggle ═══ -->
+{#snippet pastToggle(ms: number, count: number, summary: boolean)}
+	{@const open = expandedPast.includes(ms)}
+	<button
+		type="button"
+		class="ag-wday-past-line ag-past-toggle"
+		class:ag-wday-past-line--summary={summary}
+		aria-expanded={open}
+		onclick={() => togglePastExpand(ms)}
+	>
+		✓ {L.nCompleted(count)}
+		<svg class="ag-past-chevron" class:ag-past-chevron--open={open} viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg>
+	</button>
+{/snippet}
+
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class="ag ag--week"
 	class:ag--mobile={isMobile}
 	class:ag--auto={autoHeight}
+	class:ag--cols={cols}
 	style={style || undefined}
 	style:height={height ? `${height}px` : undefined}
 	onpointerdown={onPointerDown}
 	onpointerup={onPointerUp}
 	onpointercancel={onPointerCancel}
 >
-	<div class="ag-body" role="list" aria-label={L.weekAhead}>
+	<div class="ag-body" role="list" aria-label={L.weekAhead} style:--ag-cols={weekDays.length}>
 		{#each weekDays as day (day.ms)}
 			{@const expanded = day.tier === 'today' || day.tier === 'tomorrow'}
 			{#if day.tier === 'past'}
@@ -207,7 +265,14 @@ const weekDays = $derived.by(() => {
 						{/if}
 					</div>
 					{#if day.timedEvents.length > 0}
-						<div class="ag-wday-past-line ag-wday-past-line--summary">✓ {L.nCompleted(day.timedEvents.length)}</div>
+						{@render pastToggle(day.ms, day.timedEvents.length, true)}
+						{#if expandedPast.includes(day.ms)}
+							<div class="ag-wday-compact">
+								{#each day.timedEvents as ev (ev.id)}
+									{@render compactRow(ev, false, true)}
+								{/each}
+							</div>
+						{/if}
 					{:else if day.events.length === 0}
 						<div class="ag-wday-past-line ag-wday-past-line--summary">{L.noEvents}</div>
 					{/if}
@@ -265,42 +330,19 @@ const weekDays = $derived.by(() => {
 
 				{#if day.events.length === 0}
 					<div class="ag-wday-empty">{L.noEvents}</div>
-				{:else if compact}
-					<!-- Compact: minimal dot + time + title rows for all days -->
+				{:else if compact && !cols}
+					<!-- Compact: minimal dot + time + title rows for all days.
+					     Ignored in columns mode — single-line rows truncate to
+					     nothing at column width; cards wrap instead. -->
 					<div class="ag-wday-compact">
 						{#each day.timedEvents as ev (ev.id)}
-							<button
-								type="button"
-								class="ag-compact"
-								class:ag-compact--selected={selectedEventId === ev.id}
-								class:ag-compact--cancelled={ev.status === 'cancelled'}
-								class:ag-compact--tentative={ev.status === 'tentative'}
-								class:ag-compact--full={ev.status === 'full'}
-								class:ag-compact--limited={ev.status === 'limited'}
-								style:--ev-color={ev.color || 'var(--dt-accent)'}
-								aria-label="{ev.title}, {fmt(ev.start)}, {duration(ev)}"
-								onclick={() => handleClick(ev)}
-								onpointerenter={() => oneventhover?.(ev)}
-							>
-								<EventContent event={ev}>
-								<span class="ag-compact-dot"></span>
-								<span class="ag-compact-time">{fmt(ev.start)}</span>
-								<span class="ag-compact-title">{ev.title}</span>
-								{#if ev.subtitle}
-									<span class="ag-compact-sub">{ev.subtitle}</span>
-								{/if}
-								{#if ev.tags?.length}
-									{#each ev.tags as tag}
-										<span class="ag-compact-tag">{tag}</span>
-									{/each}
-								{/if}
-								<span class="ag-compact-dur">{duration(ev)}</span>
-								</EventContent>
-							</button>
+							{@render compactRow(ev, false, false)}
 						{/each}
 					</div>
-				{:else if equalDays}
-					<!-- Equal days: card layout for all days, no time-relative badges -->
+				{:else if equalDays || (cols && !expanded)}
+					<!-- Equal days (or timetable columns): card layout, no time-relative
+					     badges. In columns, today/tomorrow still fall through to the
+					     expanded branch below for now/ETA treatment. -->
 					<div class="ag-wday-expanded">
 						{#each groupIntoSlots(day.timedEvents) as slot (slot.startMs)}
 							<div class="ag-wslot">
@@ -337,7 +379,12 @@ const weekDays = $derived.by(() => {
 							</div>
 						{/each}
 						{#if day.pastEvents.length > 0}
-							<div class="ag-wday-past-line">✓ {L.nCompleted(day.pastEvents.length)}</div>
+							{@render pastToggle(day.ms, day.pastEvents.length, false)}
+							{#if expandedPast.includes(day.ms)}
+								{#each day.pastEvents as ev (ev.id)}
+									{@render compactRow(ev, false, true)}
+								{/each}
+							{/if}
 						{/if}
 					</div>
 				{:else}
@@ -345,37 +392,7 @@ const weekDays = $derived.by(() => {
 					{@const dayExpanded = expandedDays.includes(day.ms)}
 					<div class="ag-wday-compact">
 						{#each (dayExpanded ? day.timedEvents : day.timedEvents.slice(0, 4)) as ev (ev.id)}
-							<button
-								type="button"
-								class="ag-compact"
-								class:ag-compact--selected={selectedEventId === ev.id}
-								class:ag-compact--cancelled={ev.status === 'cancelled'}
-								class:ag-compact--tentative={ev.status === 'tentative'}
-								class:ag-compact--full={ev.status === 'full'}
-								class:ag-compact--limited={ev.status === 'limited'}
-								style:--ev-color={ev.color || 'var(--dt-accent)'}
-								aria-label="{ev.title}, {fmt(ev.start)}, {duration(ev)}"
-								onclick={() => handleClick(ev)}
-								onpointerenter={() => oneventhover?.(ev)}
-							>
-								<EventContent event={ev}>
-								<span class="ag-compact-dot"></span>
-								<span class="ag-compact-time">{fmt(ev.start)}</span>
-								<span class="ag-compact-title">{ev.title}</span>
-								{#if ev.location}
-									<span class="ag-compact-loc">{ev.location}</span>
-								{/if}
-								{#if ev.subtitle}
-									<span class="ag-compact-sub">{ev.subtitle}</span>
-								{/if}
-								{#if ev.tags?.length}
-									{#each ev.tags as tag}
-										<span class="ag-compact-tag">{tag}</span>
-									{/each}
-								{/if}
-								<span class="ag-compact-dur">{duration(ev)}</span>
-								</EventContent>
-							</button>
+							{@render compactRow(ev, true, false)}
 						{/each}
 						{#if day.timedEvents.length > 4}
 							<button
@@ -421,7 +438,8 @@ const weekDays = $derived.by(() => {
 	.ag-card,
 	.ag-allday-chip,
 	.ag-compact,
-	.ag-compact-more {
+	.ag-compact-more,
+	.ag-past-toggle {
 		font: inherit;
 		color: inherit;
 		text-align: left;
@@ -439,10 +457,15 @@ const weekDays = $derived.by(() => {
 		overflow-y: auto;
 		overflow-x: hidden;
 		box-sizing: border-box;
-		padding-top: 8px;
+		/* No padding-top here: the sticky day headers pin at the scrollport
+		   edge, and container padding would leave a see-through band above
+		   them where scrolled cards bleed out. */
 		scrollbar-width: thin;
 		scrollbar-color: var(--dt-border) transparent;
 	}
+	.ag-wday:first-child .ag-wday-head {
+		padding-top: 12px;
+	}
 	.ag--auto .ag-body {
 		overflow-y: visible;
 	}
@@ -678,6 +701,10 @@ const weekDays = $derived.by(() => {
 		top: 0;
 		background: var(--dt-bg, #fff);
 		z-index: 1;
+		/* Own compositor layer: without it, fast (async) scrolling repaints
+		   the pinned header a frame late and a gap flashes above it. */
+		transform: translateZ(0);
+		will-change: transform;
 	}
 	.ag-wday-head-left {
 		display: flex;
@@ -759,6 +786,43 @@ const weekDays = $derived.by(() => {
 	.ag-wday-past-line--summary {
 		padding: 0 20px 8px;
 	}
+	/* "✓ N completed" is a disclosure — tap to reveal the finished events */
+	.ag-past-toggle {
+		display: inline-flex;
+		align-items: center;
+		gap: 5px;
+		cursor: pointer;
+		min-height: 32px;
+		transition: color 150ms;
+		-webkit-tap-highlight-color: transparent;
+	}
+	.ag-past-toggle:hover,
+	.ag-past-toggle:active {
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+	}
+	.ag-past-toggle:focus-visible {
+		outline: none;
+		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
+		border-radius: 4px;
+	}
+	.ag-past-chevron {
+		transition: transform 120ms;
+	}
+	.ag-past-chevron--open {
+		transform: rotate(180deg);
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.ag-past-chevron { transition: none; }
+	}
+	/* Revealed completed events: dim + strike, single token layer */
+	.ag-compact--done .ag-compact-title {
+		text-decoration: line-through;
+		text-decoration-color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
+	}
+	.ag-compact--done .ag-compact-time {
+		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
+		font-weight: 400;
+	}
 
 	/* Compact day events */
 	.ag-wday-compact {
@@ -776,8 +840,10 @@ const weekDays = $derived.by(() => {
 	.ag-compact--selected {
 		background: color-mix(in srgb, var(--ev-color) 10%, transparent);
 		border-radius: 4px;
-		padding-left: 6px;
-		padding-right: 6px;
+		/* The highlight bleeds into the gutter via a spread shadow — zero
+		   layout impact, so nothing shifts or clips even when the host
+		   reduces the gutters below the bleed width. */
+		box-shadow: 0 0 0 6px color-mix(in srgb, var(--ev-color) 10%, transparent);
 	}
 	.ag-compact:hover .ag-compact-title,
 	.ag-compact:active .ag-compact-title {
@@ -792,29 +858,52 @@ const weekDays = $derived.by(() => {
 		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
 		border-radius: 4px;
 	}
-	.ag-compact-dot {
-		width: 5px;
-		height: 5px;
-		border-radius: 50%;
-		background: var(--ev-color, var(--dt-accent));
-		flex-shrink: 0;
-		align-self: center;
-	}
+	/* The time label doubles as the class-color signal (replaces the old
+	   dot): the event color mixed toward the text color, so it stays
+	   legible on any palette and costs zero horizontal space. */
 	.ag-compact-time {
 		font-size: 11px;
 		font-family: var(--dt-mono, monospace);
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		font-weight: 500;
+		color: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 60%, var(--dt-text, rgba(0, 0, 0, 0.87)));
 		min-width: 40px;
 		flex-shrink: 0;
 		white-space: nowrap;
 		line-height: 1.4;
 	}
+	/* Title + location + subtitle + tags cluster. One line while it fits; on
+	   mobile the metadata wraps to a second line instead of crushing the title. */
+	.ag-compact-main {
+		display: flex;
+		align-items: baseline;
+		gap: 6px;
+		flex: 1;
+		min-width: 0;
+	}
+	.ag--mobile .ag-compact-main {
+		flex-wrap: wrap;
+		row-gap: 2px;
+	}
+	/* Mobile: size the title by its content when deciding line breaks — a long
+	   title claims the first line whole (ellipsizing only against the full row)
+	   and pushes location/subtitle/tags down instead of truncating at 35%. */
+	.ag--mobile .ag-compact-title {
+		flex-basis: auto;
+	}
+	/* On their own wrapped line the metadata gets the full width — the tight
+	   desktop caps would truncate it beside empty space. */
+	.ag--mobile .ag-compact-loc,
+	.ag--mobile .ag-compact-sub {
+		max-width: 100%;
+	}
 	.ag-compact-title {
 		font-size: 12px;
 		font-weight: 500;
 		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 		flex: 1;
-		min-width: 0;
+		/* The title is the row's identity — never let subtitle/tags/duration
+		   squeeze it out on narrow screens (min-width: 0 resolves to 0px). */
+		min-width: 35%;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -832,7 +921,8 @@ const weekDays = $derived.by(() => {
 	.ag-compact-sub {
 		font-size: 10px;
 		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
-		flex-shrink: 0;
+		flex-shrink: 3;
+		min-width: 0;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -842,7 +932,8 @@ const weekDays = $derived.by(() => {
 	.ag-compact-loc {
 		font-size: 10px;
 		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
-		flex-shrink: 0;
+		flex-shrink: 3;
+		min-width: 0;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -870,7 +961,8 @@ const weekDays = $derived.by(() => {
 		padding: 1px 4px;
 		border-radius: 3px;
 		white-space: nowrap;
-		flex-shrink: 0;
+		flex-shrink: 1;
+		min-width: 2.5em;
 		max-width: 80px;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -892,6 +984,51 @@ const weekDays = $derived.by(() => {
 		border-radius: 4px;
 	}
 
+	/* ═══ Timetable columns (desktop) ═══ */
+	.ag--cols .ag-body {
+		display: grid;
+		grid-template-columns: repeat(var(--ag-cols, 7), minmax(0, 1fr));
+	}
+	/* Columns stretch to the tallest day, so the separator runs full height */
+	.ag--cols .ag-wday {
+		border-bottom: none;
+		border-inline-start: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
+		min-width: 0;
+	}
+	.ag--cols .ag-wday:first-child {
+		border-inline-start: none;
+	}
+	/* Uniform head padding — the :first-child top bump would misalign columns.
+	   Also overrides the past-day head variant (extra class = higher specificity). */
+	.ag--cols .ag-wday .ag-wday-head {
+		padding: 12px 10px 8px;
+	}
+	/* Badge + name + date won't fit one line in a ~160px column */
+	.ag--cols .ag-wday-head-left {
+		flex-wrap: wrap;
+		row-gap: 2px;
+	}
+	.ag--cols .ag-wday-expanded,
+	.ag--cols .ag-wday-compact,
+	.ag--cols .ag-wday-empty,
+	.ag--cols .ag-wday-past-line--summary {
+		padding-left: 10px;
+		padding-right: 10px;
+	}
+	.ag--cols .ag-allday {
+		padding-left: 10px;
+		padding-right: 10px;
+	}
+	/* Narrow cards: long titles get a third line, meta wraps instead of clipping */
+	.ag--cols .ag-card-title {
+		-webkit-line-clamp: 3;
+		line-clamp: 3;
+	}
+	.ag--cols .ag-card-meta {
+		flex-wrap: wrap;
+		row-gap: 3px;
+	}
+
 	/* ═══ Mobile adaptations ═══ */
 	.ag--mobile .ag-wday-head {
 		padding: 12px 16px;

package/dist/views/mobile/MobileDay.svelte

@@ -398,6 +398,7 @@ $effect(() => {
 	ontouchstart={swipe.ontouchstart}
 	ontouchmove={swipe.ontouchmove}
 	ontouchend={swipe.ontouchend}
+	ontouchcancel={swipe.ontouchcancel}
 >
 	<div
 		class="mb-swipe"
@@ -504,17 +505,20 @@ $effect(() => {
 						<div class="mb-ev-stripe"></div>
 						<div class="mb-ev-body">
 							<EventContent event={p.ev}>
+							<!-- Line thresholds must track real content height (title 18 +
+							     time 13 + sub 14 + loc 12 + tags 19 + padding 8) — showing
+							     a line the block can't hold clips text at both ends. -->
 							<span class="mb-ev-title">{p.ev.title}</span>
 							{#if p.height > 32}
 								<span class="mb-ev-time">{fmtTime(p.ev.start, locale)} – {fmtTime(p.ev.end, locale)}</span>
 							{/if}
-							{#if p.ev.subtitle && p.height > 48}
+							{#if p.ev.subtitle && p.height > 56}
 								<span class="mb-ev-sub">{p.ev.subtitle}</span>
 							{/if}
-							{#if p.ev.location && p.height > 56}
+							{#if p.ev.location && p.height > 72}
 								<span class="mb-ev-loc">{p.ev.location}</span>
 							{/if}
-							{#if p.ev.tags?.length && p.height > 56}
+							{#if p.ev.tags?.length && p.height > 88}
 								<div class="mb-ev-tags">
 									{#each p.ev.tags as tag}
 										<span class="mb-ev-tag">{tag}</span>
@@ -751,6 +755,9 @@ $effect(() => {
 
 	.mb-hour-label {
 		width: 40px;
+		/* border-box keeps the label inside the 40px gutter that events
+		   start at — content-box pushed digits flush under the event edge */
+		box-sizing: border-box;
 		flex-shrink: 0;
 		font: 500 11px/1 var(--dt-mono, ui-monospace, monospace);
 		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
@@ -801,6 +808,7 @@ $effect(() => {
 
 	.mb-now-label {
 		width: 40px;
+		box-sizing: border-box;
 		flex-shrink: 0;
 		text-align: right;
 		padding-right: 6px;

package/dist/views/mobile/MobileWeek.svelte

@@ -143,6 +143,7 @@ function handleDayKeydown(e, dayMs) {
 	ontouchstart={swipe.ontouchstart}
 	ontouchmove={swipe.ontouchmove}
 	ontouchend={swipe.ontouchend}
+	ontouchcancel={swipe.ontouchcancel}
 >
 	<!-- Vertical day list -->
 	<div
@@ -251,6 +252,7 @@ function handleDayKeydown(e, dayMs) {
 	.mw-list {
 		flex: 1;
 		overflow-y: auto;
+		overflow-x: hidden;
 		overscroll-behavior: contain;
 		-webkit-overflow-scrolling: touch;
 		scrollbar-width: thin;
@@ -270,6 +272,10 @@ function handleDayKeydown(e, dayMs) {
 		align-items: center;
 		gap: 12px;
 		position: relative;
+		/* border-box: width 100% + padding otherwise overflows the list by
+		   24px, which iOS turns into a horizontal pan that clips the date
+		   column off the left edge */
+		box-sizing: border-box;
 		padding: 10px 12px;
 		background: transparent;
 		transition: background 120ms;

package/dist/views/mobile/swipe.d.ts

@@ -24,5 +24,6 @@ export interface SwipeHandlers {
     ontouchstart: (e: TouchEvent) => void;
     ontouchmove: (e: TouchEvent) => void;
     ontouchend: () => void;
+    ontouchcancel: () => void;
 }
 export declare function createSwipe(cb: SwipeCallbacks): SwipeHandlers;

package/dist/views/mobile/swipe.js

@@ -60,5 +60,14 @@ export function createSwipe(cb) {
             dx = 0;
             cb.onend(dir);
         },
+        ontouchcancel() {
+            // The browser took over the gesture (scroll, edge-swipe, system UI).
+            // Without this, the view stays stuck at the last swipe offset.
+            if (!tracking)
+                return;
+            tracking = false;
+            dx = 0;
+            cb.onend(0);
+        },
     };
 }

package/dist/views/month/MonthGrid.svelte

@@ -31,7 +31,8 @@ const eventSnippet = $derived(ctx.eventSnippet);
 const loadRangeCtx = $derived(ctx.loadRange);
 const clock = createClock(ctx.timezone);
 const todayMs = $derived(clock.today);
-const MAX_CHIPS = $derived(isMobile ? 2 : 3);
+const dotsMode = $derived(isMobile);
+const MAX_CHIPS = 3;
 const range = $derived(viewState?.range);
 const focusMonth = $derived((focusDate ?? /* @__PURE__ */ new Date()).getMonth());
 $effect(() => {
@@ -157,6 +158,7 @@ function chipTime(e) {
 <div
 	class="mg"
 	class:mg--auto={autoHeight}
+	class:mg--dots={dotsMode}
 	style={style || undefined}
 	style:height={autoHeight ? undefined : height ? `${height}px` : '100%'}
 	role="grid"
@@ -223,6 +225,7 @@ function chipTime(e) {
 									class:mg-chip--cancelled={ev.status === 'cancelled'}
 									style:--mg-chip-color={ev.color ?? 'var(--dt-accent)'}
 									title={ev.title}
+									aria-label="{ev.title}{chipTime(ev) ? `, ${chipTime(ev)}` : ''}"
 									onclick={(e) => {
 										e.stopPropagation();
 										oneventclick?.(ev);
@@ -240,9 +243,10 @@ function chipTime(e) {
 								type="button"
 								class="mg-more"
 								aria-expanded={ondayclick ? undefined : false}
+								aria-label={L.nMore(cell.overflow)}
 								onclick={(e) => overflowClick(e, cell)}
 							>
-								{L.nMore(cell.overflow)}
+								{dotsMode ? `+${cell.overflow}` : L.nMore(cell.overflow)}
 							</button>
 						{:else if expandedMs === cell.ms}
 							<button
@@ -467,4 +471,33 @@ function chipTime(e) {
 			min-height: 30px;
 		}
 	}
+
+	/* ── Dots mode (mobile) ─────────────────────────────
+	   Cells are too narrow for text chips, so events render as colored
+	   dots in a wrapping row. The cell itself stays the tap target
+	   (day drill-down); dots keep their title/aria-label for a11y. */
+	.mg--dots .mg-chips {
+		flex-direction: row;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 3px;
+	}
+	.mg--dots .mg-chip {
+		padding: 3px;
+		min-height: 0;
+	}
+	.mg--dots .mg-chip-title,
+	.mg--dots .mg-chip-time {
+		display: none;
+	}
+	.mg--dots .mg-chip-dot {
+		width: 8px;
+		height: 8px;
+	}
+	.mg--dots .mg-more {
+		padding: 0 3px;
+		min-height: 0;
+		align-self: center;
+		font-size: 10px;
+	}
 </style>

package/dist/views/planner/Planner.svelte

@@ -1,10 +1,6 @@
-<script lang="ts">import PlannerDay from "./PlannerDay.svelte";
-import PlannerWeek from "./PlannerWeek.svelte";
+<script lang="ts">import PlannerWeek from "./PlannerWeek.svelte";
 let { mode = "week", ...rest } = $props();
 </script>
 
-{#if mode === 'day'}
-	<PlannerDay {...rest} />
-{:else}
-	<PlannerWeek {...rest} />
-{/if}
+<!-- Both planner modes are the same vertical time grid; day is one column. -->
+<PlannerWeek {mode} {...rest} />