@nomideusz/svelte-calendar 0.16.1 → 0.20.1

package/README.md

@@ -33,10 +33,13 @@ That's it — 6 views (Day/Week × Planner, Agenda, Mobile), auto-coloring, drag
 
 ## Views
 
-Switch between **Planner** (time grid), **Agenda** (list) and the **Month** grid:
+Switch between **Planner** (time grid), **Scroll** (weeks stacked in one
+vertical scroller — drag to move, drop onto a day, scrolls under a drag),
+**Agenda** (list) and the **Month** grid:
 
 ```svelte
 <Calendar {adapter} view="week-planner" />  <!-- default -->
+<Calendar {adapter} view="week-scroll" />
 <Calendar {adapter} view="day-planner" />
 <Calendar {adapter} view="week-agenda" />
 <Calendar {adapter} view="day-agenda" />
@@ -760,7 +763,9 @@ Small helpers used by the built-in views, exported for custom rendering:
 | `segmentForDay(ev, dayMs)` | The slice of a multi-day event that falls on one day |
 | `createClock()` | Reactive clock (`tick`, `today`) driving now-lines and relative labels |
 | `typeset(text)` / `breakLines(text, font, width)` | Knuth-Plass paragraph breaking over the text's own spaces and soft hyphens, measured with pretext. `<p {@attach typeset(text)}>` sets justified block-span lines, re-done on resize; if the browser disagrees with the measure the plain text goes back. Progressive — SSR text stays. |
-| `fitLabel([long, short])` / `pickFit` / `fits` / `textHeight` | Text fitting via [pretext](https://github.com/chenglou/pretext) — measure before render, no layout thrash. `<span class="eb-title" {@attach fitLabel([ev.title, ev.short])}>` keeps the longest label that fits. Browser-only. |
+| `fitLabel([long, short])` / `pickFit` / `fits` / `textHeight` / `textWidth` | Text fitting via [pretext](https://github.com/chenglou/pretext) — measure before render, no layout thrash. `<span class="eb-title" {@attach fitLabel([ev.title, ev.short])}>` keeps the longest label that fits. Browser-only. |
+| `createRecurringAdapter(schedule, { movable })` | Projects a repeating schedule. Occurrences are read-only unless `movable` is set — the adapter stores nothing, so a host that opts in must handle `oneventmove` itself: add the date to the rule's `excludeDates` and keep the moved occurrence wherever its one-off events live. |
+| `fitParts(parts, budget)` | Which parts of a dense chip fit, along either axis. Each part is `{ key, text, font }` to measure or `{ key, size }` to state its cost, plus `priority` (`0` never drops, higher goes first) and `extra` for a gap or icon. Anchors always show — they are what earns the ellipsis — and the first part that does not fit ends it, so a chip never keeps a later detail after dropping an earlier one. A budget of `0` (server-rendered, not yet measured) leaves the anchors. |
 
 ## Embeddable Widget
 

package/dist/adapters/composite.js

@@ -41,8 +41,13 @@ export function createCompositeAdapter(adapters, options = {}) {
                 try {
                     return await adapter.updateEvent(id, patch);
                 }
-                catch {
-                    // Event not in this adapter, try next
+                catch (e) {
+                    // A refusal is an answer: the adapter that owns this event
+                    // cannot write it, and asking the others would turn that
+                    // into a meaningless "not found" the host cannot act on.
+                    if (e instanceof Error && e.message.includes('read-only'))
+                        throw e;
+                    // Otherwise: not this adapter's event, try the next.
                 }
             }
             throw new Error(`Event not found in any adapter: ${id}`);

package/dist/adapters/recurring.d.ts

@@ -43,6 +43,12 @@ export interface RecurringEvent {
      * No events are generated after this date.
      */
     until?: string;
+    /**
+     * Dates this rule skips, `"YYYY-MM-DD"`. The occurrence is simply not
+     * projected — this is how a host takes one occurrence out of its rule
+     * (moved, cancelled, or replaced by a one-off it stores itself).
+     */
+    excludeDates?: string[];
     /**
      * Maximum number of occurrences, counted from `startDate`.
      * Alternative to `until` — if both are set the stricter bound wins.
@@ -74,6 +80,16 @@ export interface RecurringAdapterOptions {
      * Defaults to the built-in vivid palette.
      */
     palette?: string[];
+    /**
+     * Let projected occurrences be dragged (default: `false`).
+     *
+     * Off, every occurrence carries `data.readOnly` and the views refuse to
+     * move it — correct, because this adapter projects and cannot store the
+     * result. Turn it on when YOU can: handle `oneventmove`, add that date to
+     * the rule's `excludeDates`, and keep the moved occurrence wherever your
+     * one-off events live. A read-only occurrence can always be clicked.
+     */
+    movable?: boolean;
 }
 /**
  * Create a CalendarAdapter that projects recurring events onto concrete

package/dist/adapters/recurring.js

@@ -70,7 +70,7 @@ function createConcreteEvent(rec, date) {
         tags: rec.tags,
         location: rec.location,
         resourceId: rec.resourceId,
-        data: { ...rec.data, recurringId: rec.id, readOnly: true },
+        data: { ...rec.data, recurringId: rec.id },
     };
 }
 // ── Count → until resolution ────────────────────────────
@@ -232,7 +232,7 @@ const PALETTE = VIVID_PALETTE;
  * Read-only by default — create/update/delete throw.
  */
 export function createRecurringAdapter(schedule, options = {}) {
-    const { mondayStart = true, palette } = options;
+    const { mondayStart = true, palette, movable = false } = options;
     const colors = palette?.length ? palette : PALETTE;
     // Auto-color: assign from palette by category/title
     const colorAssignments = new Map();
@@ -282,14 +282,30 @@ export function createRecurringAdapter(schedule, options = {}) {
                     break;
             }
         }
-        return events;
+        // Dates a host has taken out of their rule (see `excludeDates`).
+        const skipped = new Set();
+        for (const rec of schedule) {
+            for (const d of rec.excludeDates ?? [])
+                skipped.add(`${rec.id}--${d.replace(/-/g, '')}`);
+        }
+        const kept = skipped.size ? events.filter((e) => !skipped.has(e.id)) : events;
+        return movable ? kept : kept.map((e) => ({ ...e, data: { ...e.data, readOnly: true } }));
     };
     return {
         fetchEventsSync,
         async fetchEvents(range) {
             return fetchEventsSync(range);
         },
-        // Read-only adapter: CRUD methods intentionally omitted.
-        // Use createMemoryAdapter or createRestAdapter for mutations.
+        // This adapter projects; it stores nothing. It still answers for the
+        // occurrences it owns, so a composite can tell "not my event" apart
+        // from "mine, and it cannot be written" — the second is what lets the
+        // HOST take the move (exclude the date, keep the result itself).
+        async updateEvent(id) {
+            const ruleId = id.split('--')[0];
+            if (!schedule.some((rec) => rec.id === ruleId)) {
+                throw new Error(`Event not found: ${id}`);
+            }
+            throw new Error(`read-only: ${id} is a projected occurrence. Add its date to the rule's excludeDates and store the change yourself.`);
+        },
     };
 }

package/dist/calendar/Calendar.svelte

@@ -27,6 +27,7 @@ import { getLabels, fmtWeekRange } from "../core/locale.js";
 import { auto } from "../theme/presets.js";
 import { probeHostTheme, observeHostTheme } from "../theme/auto.js";
 import Planner from "../views/planner/Planner.svelte";
+import PlannerScroll from "../views/planner/PlannerScroll.svelte";
 import Agenda from "../views/agenda/Agenda.svelte";
 import Mobile from "../views/mobile/Mobile.svelte";
 import MonthGrid from "../views/month/MonthGrid.svelte";
@@ -47,6 +48,12 @@ const DEFAULT_VIEWS = [
 		mode: "week",
 		component: Planner
 	},
+	{
+		id: "week-scroll",
+		label: "Scroll",
+		mode: "week",
+		component: PlannerScroll
+	},
 	{
 		id: "day-agenda",
 		label: "Agenda",
@@ -78,7 +85,7 @@ const DEFAULT_VIEWS = [
 		component: MonthGrid
 	}
 ];
-let { adapter, views = DEFAULT_VIEWS, view: activeViewId, theme = auto, autoTheme, mondayStart = true, height: heightProp = 600, borderRadius = 12, dir, locale, labels: labelsProp, readOnly = false, visibleHours, initialDate, snapInterval = 15, minColumnWidth = 110, showModePills = true, showNavigation = true, equalDays = false, showDates = true, hideDays, currentDate, blockedSlots, days, minDuration, maxDuration, disabledDates, compact = false, columns = false, mobile: mobileProp = "auto", event: eventSnippet, empty: emptySnippet, dayHeader: dayHeaderSnippet, header: headerSnippet, navigation: navigationSnippet, oneventclick, oneventcreate, oneventmove, onviewchange, ondatechange, oneventhover, ondayclick, onerror, timezone } = $props();
+let { adapter, views = DEFAULT_VIEWS, view: activeViewId, theme = auto, autoTheme, mondayStart = true, height: heightProp = 600, borderRadius = 12, dir, locale, labels: labelsProp, readOnly = false, visibleHours, initialDate, snapInterval = 15, minColumnWidth = 110, showModePills = true, showNavigation = true, equalDays = false, showDates = true, hideDays, currentDate, blockedSlots, days, minDuration, maxDuration, disabledDates, compact = false, columns = false, mobile: mobileProp = "auto", event: eventSnippet, empty: emptySnippet, dayHeader: dayHeaderSnippet, header: headerSnippet, navigation: navigationSnippet, oneventclick, oneventcreate, onexternaldrop, oneventmove, onviewchange, ondatechange, oneventhover, ondayclick, onerror, timezone } = $props();
 // In readOnly mode, suppress mutation callbacks. With a timezone, the
 // drag plane is zoned wall-clock — hosts always receive real instants.
 const unzone = (d) => timezone ? fromZonedTime(d, timezone) : d;
@@ -86,6 +93,10 @@ const effectiveCreate = $derived(readOnly || !oneventcreate ? undefined : (range
 	start: unzone(range.start),
 	end: unzone(range.end)
 }));
+const effectiveExternalDrop = $derived(readOnly || !onexternaldrop ? undefined : (info) => onexternaldrop({
+	start: unzone(info.start),
+	dataTransfer: info.dataTransfer
+}));
 const effectiveMove = $derived(readOnly || !oneventmove ? undefined : (ev, start, end) => oneventmove(ev, unzone(start), unzone(end)));
 // Clicking an event selects it (highlight via selectedEventId) and then
 // notifies the host — selection used to be created but never driven.
@@ -701,6 +712,7 @@ const navCtx = $derived({
 				focusDate={viewState.focusDate}
 				oneventclick={handleEventClick}
 				oneventcreate={effectiveCreate}
+				onexternaldrop={effectiveExternalDrop}
 				readOnly={readOnly}
 				visibleHours={visibleHours}
 				selectedEventId={selection.selectedId}

package/dist/calendar/Calendar.svelte.d.ts

@@ -129,6 +129,13 @@ interface Props {
         start: Date;
         end: Date;
     }) => void;
+    /** An HTML5 drag from outside the calendar dropped on the planner grid
+     *  (a class chip, a template): the pointer's time, snapped, as a real
+     *  instant — plus the drag's dataTransfer for whatever the source put in. */
+    onexternaldrop?: (info: {
+        start: Date;
+        dataTransfer: DataTransfer;
+    }) => void;
     oneventmove?: (event: TimelineEvent, newStart: Date, newEnd: Date) => void;
     onviewchange?: (viewId: CalendarViewId) => void;
     /** Called when the focused date changes (navigation, drag-scroll, etc.) */

package/dist/engine/view-state.svelte.d.ts

@@ -3,7 +3,7 @@ export type { DateRange };
 /**
  * Built-in view IDs. Custom view IDs are also supported — see CalendarViewId.
  */
-export type BuiltInViewId = 'day-planner' | 'day-agenda' | 'day-mobile' | 'week-planner' | 'week-agenda' | 'week-mobile' | 'month-grid';
+export type BuiltInViewId = 'day-planner' | 'day-agenda' | 'day-mobile' | 'week-planner' | 'week-scroll' | 'week-agenda' | 'week-mobile' | 'month-grid';
 /**
  * Any view identifier. Use built-in strings like 'day-planner' or your own
  * custom IDs like 'day-kanban', 'week-resource', etc.

package/dist/index.d.ts

@@ -15,4 +15,5 @@ export { wrapAdapterWithTimezone } from './core/timezone.js';
 export type { PresetName, AutoThemeOptions } from './theme/index.js';
 export { createCalendar, createAgenda, createRangeAgenda } from './headless/index.js';
 export type { HeadlessCalendarOptions, HeadlessCalendar, HeadlessDay, HeadlessWeek, TodayQueue, HeaderContext, NavigationContext, AgendaOptions, HeadlessAgenda, RangeAgendaOptions, RangeAgendaDay, HeadlessRangeAgenda, } from './headless/index.js';
-export { fits, lineCount, textHeight, pickFit, fontOf, fitLabel, breakLines, typeset } from './text-fit.js';
+export { fits, lineCount, textHeight, textWidth, pickFit, fontOf, fitLabel, fitParts, breakLines, typeset } from './text-fit.js';
+export type { ChipPart } from './text-fit.js';

package/dist/index.js

@@ -18,4 +18,4 @@ export { wrapAdapterWithTimezone } from './core/timezone.js';
 // ─── Headless API ───────────────────────────────────────
 export { createCalendar, createAgenda, createRangeAgenda } from './headless/index.js';
 // ─── Text fitting (pretext) ─────────────────────────────
-export { fits, lineCount, textHeight, pickFit, fontOf, fitLabel, breakLines, typeset } from './text-fit.js';
+export { fits, lineCount, textHeight, textWidth, pickFit, fontOf, fitLabel, fitParts, breakLines, typeset } from './text-fit.js';

package/dist/text-fit.d.ts

@@ -4,8 +4,38 @@ export declare function lineCount(text: string, font: string, width: number, opt
 export declare function fits(text: string, font: string, width: number, lines?: number): boolean;
 /** Height the text will take at `width`, before it is in the DOM. */
 export declare function textHeight(text: string, font: string, width: number, lineHeight: number): number;
+/** Natural (unwrapped) width of `text` in `font`, px. */
+export declare function textWidth(text: string, font: string): number;
 /** Longest candidate (in given order) that fits in `lines`; the last one if none does. */
 export declare function pickFit(candidates: readonly string[], font: string, width: number, lines?: number): string;
+/** One part of a chip. Give `text` + `font` to measure it, or `size` to state its cost. */
+export interface ChipPart {
+    /** Names this part in the result. */
+    key: string;
+    /** The text exactly as it will render. Empty or absent ⇒ the part never shows. */
+    text?: string;
+    /** Canvas font string for `text` — `fontOf(el)`. */
+    font?: string;
+    /** A stated cost instead of a measured one: a line's height, an icon's width. */
+    size?: number;
+    /** Dropped before lower numbers; `0` is an anchor and never drops. Default 1. */
+    priority?: number;
+    /** What this part costs beside its own size: a gap, a dot, a separator. */
+    extra?: number;
+}
+/**
+ * Which parts of a chip fit in `budget` px along one axis — width for a row
+ * of parts, height for a stack of them.
+ *
+ * Anchors (`priority: 0`) always show; they are what earns an ellipsis when
+ * even they overflow. The rest are added in priority order and the first one
+ * that does not fit ends it: a chip reads in one direction, so keeping a later
+ * part after dropping an earlier one reads as arbitrary.
+ *
+ * A budget of 0 — server-rendered, or before the first measurement — leaves
+ * the anchors, so the first paint is the important part and nothing else.
+ */
+export declare function fitParts(parts: readonly ChipPart[], budget: number, measure?: (text: string, font: string) => number): Record<string, boolean>;
 /** The element's computed font as a canvas font string. */
 export declare function fontOf(el: Element): string;
 /**

package/dist/text-fit.js

@@ -13,10 +13,52 @@ export function fits(text, font, width, lines = 1) {
 export function textHeight(text, font, width, lineHeight) {
     return layout(prepare(text, font), width, lineHeight).height;
 }
+/** Natural (unwrapped) width of `text` in `font`, px. */
+export function textWidth(text, font) {
+    return measureNaturalWidth(prepareWithSegments(text, font));
+}
 /** Longest candidate (in given order) that fits in `lines`; the last one if none does. */
 export function pickFit(candidates, font, width, lines = 1) {
     return candidates.find((c) => fits(c, font, width, lines)) ?? candidates.at(-1) ?? '';
 }
+/**
+ * Which parts of a chip fit in `budget` px along one axis — width for a row
+ * of parts, height for a stack of them.
+ *
+ * Anchors (`priority: 0`) always show; they are what earns an ellipsis when
+ * even they overflow. The rest are added in priority order and the first one
+ * that does not fit ends it: a chip reads in one direction, so keeping a later
+ * part after dropping an earlier one reads as arbitrary.
+ *
+ * A budget of 0 — server-rendered, or before the first measurement — leaves
+ * the anchors, so the first paint is the important part and nothing else.
+ */
+export function fitParts(parts, budget, measure = textWidth) {
+    const shown = {};
+    for (const p of parts)
+        shown[p.key] = false;
+    const present = parts.filter((p) => p.size !== undefined || !!p.text);
+    const anchors = present.filter((p) => (p.priority ?? 1) === 0);
+    for (const p of anchors)
+        shown[p.key] = true;
+    if (!(budget > 0))
+        return shown;
+    const cost = (p) => (p.size ?? measure(p.text, p.font ?? '')) + (p.extra ?? 0);
+    let used = 0;
+    for (const p of anchors)
+        used += cost(p);
+    const optional = present
+        .filter((p) => (p.priority ?? 1) !== 0)
+        .sort((a, b) => (a.priority ?? 1) - (b.priority ?? 1));
+    for (const p of optional) {
+        const c = cost(p);
+        if (used + c > budget)
+            break;
+        used += c;
+        shown[p.key] = true;
+    }
+    return shown;
+}
 /** The element's computed font as a canvas font string. */
 export function fontOf(el) {
     const s = getComputedStyle(el);
@@ -141,23 +183,36 @@ export function typeset(text) {
             return;
         const font = fontOf(el);
         let width = 0;
-        const apply = () => {
-            if (!width)
-                return;
-            const lines = breakLines(text, font, width);
+        // A line span never wraps: canvas and layout disagree by a pixel now and
+        // then, and a line that wrapped inside its span — the browser hyphenating
+        // the last word with its own dictionary, "małżeń-" / "stwo" — read as a
+        // hole in the paragraph. Set as nowrap, a misfit is plain overflow, which
+        // is measurable: re-break a touch narrower, and only then hand the text
+        // back to the browser.
+        const set = (w) => {
+            const lines = breakLines(text, font, w);
             el.replaceChildren(...lines.map((l, i) => {
                 const s = document.createElement('span');
                 s.style.display = 'block';
+                s.style.whiteSpace = 'nowrap';
+                s.style.hyphens = 'manual';
                 s.style.textAlign = 'justify';
                 s.style.textAlignLast = i === lines.length - 1 ? 'auto' : 'justify';
                 s.textContent = l;
                 return s;
             }));
             for (const s of el.children)
-                if (s.scrollWidth > s.clientWidth + 1) {
-                    el.textContent = text;
+                if (s.scrollWidth > s.clientWidth + 1)
+                    return false;
+            return true;
+        };
+        const apply = () => {
+            if (!width)
+                return;
+            for (const w of [width, width - 2, width * 0.985, width * 0.97])
+                if (set(w))
                     return;
-                }
+            el.textContent = text;
         };
         const ro = new ResizeObserver(([e]) => {
             if (e.contentRect.width === width)