@nomideusz/svelte-calendar 0.11.0 → 0.13.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);
@@ -199,7 +200,6 @@ const weekDays = $derived.by(() => {
 		onpointerenter={() => oneventhover?.(ev)}
 	>
 		<EventContent event={ev}>
-		<span class="ag-compact-dot"></span>
 		<span class="ag-compact-time">{fmt(ev.start)}</span>
 		<div class="ag-compact-main">
 			<span class="ag-compact-title">{ev.title}</span>
@@ -240,13 +240,14 @@ const weekDays = $derived.by(() => {
 	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'}
@@ -329,15 +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)}
 							{@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">
@@ -814,8 +819,9 @@ const weekDays = $derived.by(() => {
 		text-decoration: line-through;
 		text-decoration-color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
 	}
-	.ag-compact--done .ag-compact-dot {
-		opacity: 0.5;
+	.ag-compact--done .ag-compact-time {
+		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
+		font-weight: 400;
 	}
 
 	/* Compact day events */
@@ -834,13 +840,10 @@ const weekDays = $derived.by(() => {
 	.ag-compact--selected {
 		background: color-mix(in srgb, var(--ev-color) 10%, transparent);
 		border-radius: 4px;
-		/* Highlight gutter comes from negative margins so the row's content
-		   stays aligned with its unselected siblings (no tap-shift). */
-		padding-left: 6px;
-		padding-right: 6px;
-		margin-left: -6px;
-		margin-right: -6px;
-		width: calc(100% + 12px);
+		/* 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 {
@@ -855,18 +858,14 @@ 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;
@@ -897,12 +896,6 @@ const weekDays = $derived.by(() => {
 	.ag--mobile .ag-compact-sub {
 		max-width: 100%;
 	}
-	/* Wrapped rows are two/three lines tall — center-aligning the dot floats
-	   it between lines; pin it optically to the first (title) line instead. */
-	.ag--mobile .ag-compact-dot {
-		align-self: flex-start;
-		margin-top: 8px;
-	}
 	.ag-compact-title {
 		font-size: 12px;
 		font-weight: 500;
@@ -991,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/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} />

package/dist/views/planner/PlannerWeek.svelte

@@ -1,5 +1,7 @@
 <!--
-  Planner week mode — vertical time grid (Google-Calendar-style).
+  Planner time grid — vertical, Google-Calendar-style. Renders both planner
+  modes: week (N columns from viewState.dayCount) and day (a single column),
+  so the two share one geometry, one drag mapping, and one overlap engine.
 
   • Left time gutter with localized hour labels; N day columns (viewState.dayCount).
   • Sticky day-header row + sticky all-day strip; the grid scrolls vertically.
@@ -17,8 +19,9 @@ import EventContent from "../shared/EventContent.svelte";
 import { createClock } from "../../core/clock.svelte.js";
 import { DAY_MS, HOUR_MS, sod, addDaysMs } from "../../core/time.js";
 import { startOfWeek as sowFn, isAllDay, isMultiDay, segmentForDay } from "../../core/time.js";
-import { fmtH, fmtTime, fmtDuration, weekdayShort } from "../../core/locale.js";
+import { fmtH, fmtTime, fmtDuration, weekdayShort, weekdayLong } from "../../core/locale.js";
 let {
+  mode = "week",
   mondayStart = true,
   locale,
   height = 520,
@@ -59,7 +62,9 @@ const gridHeight = $derived(hourCount * HOUR_H);
 let scrollEl;
 let colsEl;
 const todayMs = $derived(clock.today);
-const customDays = $derived(viewState?.dayCount ?? 7);
+const singleDay = $derived(mode === "day" || viewState?.mode === "day");
+const customDays = $derived(singleDay ? 1 : viewState?.dayCount ?? 7);
+const hideDayHead = $derived(singleDay && showDates && !!viewState && !dayHeaderSnippet);
 const weekStartMs = $derived.by(() => {
   const r = viewState?.range;
   if (r) return sod(r.start.getTime());
@@ -259,8 +264,8 @@ function statusText(ev) {
 }
 function ghostForDay(dayMs) {
   if (!drag?.active || !drag.payload) return null;
-  const mode = drag.mode;
-  if (mode !== "move" && mode !== "create") return null;
+  const mode2 = drag.mode;
+  if (mode2 !== "move" && mode2 !== "create") return null;
   const s = drag.payload.start.getTime();
   const e = drag.payload.end.getTime();
   const bandS = dayMs + startHour * HOUR_MS;
@@ -273,7 +278,7 @@ function ghostForDay(dayMs) {
     height: Math.max(12, (ce - cs) / HOUR_MS * HOUR_H),
     start: drag.payload.start,
     end: drag.payload.end,
-    create: mode === "create",
+    create: mode2 === "create",
     // Only the segment containing the start shows the readout
     showTime: cs === Math.max(s, dayMs)
   };
@@ -570,7 +575,9 @@ function onWindowKeydown(e) {
 	<div class="tw-scroll" bind:this={scrollEl}>
 		<div class="tw-inner" style:min-width="{innerMinWidth}px">
 			<!-- Sticky top: day headers + all-day strip -->
+			{#if !hideDayHead || hasAllDayRow}
 			<div class="tw-top">
+				{#if !hideDayHead}
 				<div class="tw-head">
 					<div class="tw-corner" style:width="{GUTTER_W}px" aria-hidden="true"></div>
 					{#each dayCols as day (day.ms)}
@@ -579,7 +586,7 @@ function onWindowKeydown(e) {
 							class:tw-hd--today={day.isToday}
 							aria-current={day.isToday ? 'date' : undefined}
 						>
-							<span class="tw-hd-wd">{weekdayShort(day.ms, locale)}</span>
+							<span class="tw-hd-wd">{singleDay ? weekdayLong(day.ms, locale) : weekdayShort(day.ms, locale)}</span>
 							{#if showDates}
 								<span class="tw-hd-num" class:tw-hd-num--today={day.isToday}>{day.dayNum}</span>
 							{/if}
@@ -591,6 +598,7 @@ function onWindowKeydown(e) {
 						</div>
 					{/each}
 				</div>
+				{/if}
 
 				{#if hasAllDayRow}
 					<div class="tw-allday">
@@ -618,6 +626,7 @@ function onWindowKeydown(e) {
 					</div>
 				{/if}
 			</div>
+			{/if}
 
 			<!-- Grid body -->
 			<div class="tw-body" style:height="{gridHeight}px">

package/dist/views/planner/PlannerWeek.svelte.d.ts

@@ -1,5 +1,7 @@
 import type { TimelineEvent } from '../../core/types.js';
 interface Props {
+    /** 'day' renders a single-day column; 'week' the multi-day grid. */
+    mode?: 'day' | 'week';
     mondayStart?: boolean;
     locale?: string;
     height?: number | null;

package/dist/views/shared/context.svelte.d.ts

@@ -14,6 +14,7 @@ export interface CalendarContext {
     readonly isMobile: boolean;
     readonly autoHeight: boolean;
     readonly compact: boolean;
+    readonly columns: boolean;
     readonly readOnly: boolean;
     readonly blockedSlots: BlockedSlot[] | undefined;
     readonly dayHeaderSnippet: Snippet<[{

package/dist/views/shared/context.svelte.js

@@ -34,6 +34,7 @@ export function useCalendarContext() {
         get isMobile() { return raw?.mobile ?? false; },
         get autoHeight() { return raw?.autoHeight ?? false; },
         get compact() { return raw?.compact ?? false; },
+        get columns() { return raw?.columns ?? false; },
         get readOnly() { return raw?.readOnly ?? false; },
         get blockedSlots() { return raw?.blockedSlots; },
         get dayHeaderSnippet() { return raw?.dayHeaderSnippet; },

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nomideusz/svelte-calendar",
-	"version": "0.11.0",
+	"version": "0.13.0",
 	"description": "A themeable Svelte 5 calendar with Day and Week views — Planner and Agenda.",
 	"type": "module",
 	"license": "MIT",
@@ -35,16 +35,9 @@
 		"test:watch": "vitest"
 	},
 	"peerDependencies": {
-		"@chenglou/pretext": "^0.0.5",
 		"svelte": "^5.0.0"
 	},
-	"peerDependenciesMeta": {
-		"@chenglou/pretext": {
-			"optional": true
-		}
-	},
 	"devDependencies": {
-		"@chenglou/pretext": "^0.0.5",
 		"@sveltejs/adapter-auto": "^7.0.1",
 		"@sveltejs/kit": "^2.69.1",
 		"@sveltejs/package": "^2.5.8",