@ripple-ui/svelte 0.0.0-stage → 0.8.2

package/dist/widgets/composite/weather-forecast.d.ts

@@ -0,0 +1,75 @@
+export declare const MAX_DAYS = 14;
+export declare const MAX_HOURS = 48;
+export declare const KINDS: readonly ["sunny", "partly-cloudy", "cloudy", "rain", "heavy-rain", "thunder", "snow", "fog", "wind", "night-clear"];
+export type Kind = (typeof KINDS)[number];
+export type Unit = 'C' | 'F';
+/** "Light showers" → rain, "Partly sunny" → partly-cloudy, "???" → cloudy. */
+export declare function toKind(v: unknown): Kind;
+export declare const kindWord: (k: Kind) => string;
+export declare const toUnit: (v: unknown) => Unit;
+/** A temperature given in `from`, shown in `to`, rounded. */
+export declare function convert(t: number, from: Unit, to: Unit): number;
+/**
+ * "2026-10-13" → "Tue", "wednesday" → "Wed", "Saturday 17 October (x)" →
+ * "Sat 17 Oct (x)"; anything else as written, trimmed and capped.
+ */
+export declare function dayLabel(v: unknown): string;
+export interface Now {
+    temp?: number;
+    kind: Kind;
+    label: string;
+    feelsLike?: number;
+    humidity?: number;
+    wind: string;
+}
+export interface Day {
+    day: string;
+    /** The day in full ("Thursday 15 October" for an ISO date), for the title and accessible name. */
+    full: string;
+    /** "23 Oct", only for ISO days when weekdays would repeat (8+ days or a repeat). */
+    date?: string;
+    kind: Kind;
+    label: string;
+    high?: number;
+    low?: number;
+    rain?: number;
+    sunrise: string;
+    sunset: string;
+}
+export interface Hour {
+    time: string;
+    temp?: number;
+    kind: Kind;
+    rain?: number;
+    /** A folded bucket's full span, "22:00 to 05:00". */
+    span?: string;
+    /** The weekday, on the first column past each midnight. */
+    cue?: string;
+}
+export declare function readNow(v: unknown): Now | undefined;
+export declare function readDays(v: unknown): Day[];
+export declare function readHours(v: unknown): Hour[];
+/**
+ * The week's lowest low and highest high, for the range bars. A current
+ * temperature at or past either end stretches the scale a little beyond it
+ * (at least 1 degree), so the now dot sits on the track, never off its end.
+ */
+export declare function span(days: Day[], now?: number): [number, number] | undefined;
+/** Where `t` sits in the span, 0 to 100. */
+export declare function at(t: number, [lo, hi]: [number, number]): number;
+export declare const COLD_C = 4;
+export declare const WARM_C = 28;
+/** Where a temperature in °C sits on the colour ramp, 0 (cool) to 100 (warm). */
+export declare function ramp(tempC: number): number;
+/**
+ * At most `fit` columns: every k-th hour with the skipped hours folded in.
+ * A bucket reads as its first hour (time and temperature, so the axis steps
+ * evenly) with the most severe sky and the highest rain chance in it, so a
+ * lone storm hour is never thinned away; `span` holds the bucket's full
+ * range. When clock times run backwards the hours
+ * have passed midnight: the first column of each new day gets a `cue`, its
+ * weekday from `dayNames` (row n of the days), or "Day n".
+ */
+export declare function bucketHours(hours: Hour[], fit: number, dayNames?: string[]): Hour[];
+/** One line on the days ahead: which days are wet, or that it stays dry. Day 1 reads "today", as its row does. */
+export declare function outlook(days: Day[]): string;

package/dist/widgets/composite/weather-forecast.js

@@ -0,0 +1,241 @@
+// widgets/composite/weather-forecast.ts: the data side of the weather-forecast
+// widget. Turns model props (possibly half-streamed) into a clean forecast:
+// a condition word becomes one of ten icon kinds (unknown reads as cloudy),
+// temperatures convert between C and F, percentages accept "78%", full
+// weekday names (and a leading one in free text) shorten to three letters,
+// ISO days carry a short date when weekdays would repeat, the week's span
+// (stretched to hold the current temperature) places each range bar, `ramp`
+// maps a temperature to its spot on the cool-to-warm bar colour, and
+// `bucketHours` thins a long hourly list to the columns that fit, keeping the
+// worst sky and the wettest chance of each bucket, labelled at its first hour
+// so the axis keeps an even cadence, and cued with the weekday when the hours
+// roll past midnight.
+//
+// Invariants:
+// - Every reader survives `{}`, missing fields and junk; lists are capped
+//   (14 days, 48 hours) and text is capped generously, never cut short
+//   mid-word: the component wraps it or ellipsizes it with a `title`.
+// - Icons are picked by kind from trusted constants in WeatherIcon.svelte;
+//   nothing here passes model text into markup.
+import { finite, percent, plain } from '../data-kit/format.js';
+import { list, rec } from './recipe.js';
+export const MAX_DAYS = 14;
+export const MAX_HOURS = 48;
+export const KINDS = ['sunny', 'partly-cloudy', 'cloudy', 'rain', 'heavy-rain', 'thunder', 'snow', 'fog', 'wind', 'night-clear'];
+const KIND_WORDS = {
+    sunny: 'Sunny',
+    'partly-cloudy': 'Partly cloudy',
+    cloudy: 'Cloudy',
+    rain: 'Rain',
+    'heavy-rain': 'Heavy rain',
+    thunder: 'Thunderstorms',
+    snow: 'Snow',
+    fog: 'Fog',
+    wind: 'Windy',
+    'night-clear': 'Clear'
+};
+/** "Light showers" → rain, "Partly sunny" → partly-cloudy, "???" → cloudy. */
+export function toKind(v) {
+    const s = plain(v).toLowerCase().trim();
+    if (KINDS.includes(s))
+        return s;
+    if (/thunder|storm|lightning/.test(s))
+        return 'thunder';
+    if (/snow|sleet|flurr|blizzard|hail/.test(s))
+        return 'snow';
+    if (/heavy|downpour|pouring|torrential/.test(s) && /rain|shower|pour/.test(s))
+        return 'heavy-rain';
+    if (/rain|shower|drizzle/.test(s))
+        return 'rain';
+    if (/fog|mist|haze|smog/.test(s))
+        return 'fog';
+    if (/wind|breez|gust|gale/.test(s))
+        return 'wind';
+    if (/partly|partial|mostly sunny|few clouds|scattered|intervals|sun and cloud/.test(s))
+        return 'partly-cloudy';
+    if (/night|moon/.test(s) && /clear/.test(s))
+        return 'night-clear';
+    if (/sun|clear|fair|bright/.test(s))
+        return 'sunny';
+    return 'cloudy';
+}
+export const kindWord = (k) => KIND_WORDS[k];
+export const toUnit = (v) => (String(v).trim().toUpperCase().startsWith('F') ? 'F' : 'C');
+/** A temperature given in `from`, shown in `to`, rounded. */
+export function convert(t, from, to) {
+    if (from === to)
+        return Math.round(t);
+    return Math.round(to === 'F' ? (t * 9) / 5 + 32 : ((t - 32) * 5) / 9);
+}
+const pct = (v) => {
+    const n = percent(v);
+    return n === undefined ? undefined : Math.round(n);
+};
+const ISO = /^(\d{4})-(\d{2})-(\d{2})/;
+const isoDate = (s) => {
+    const m = ISO.exec(s);
+    return m ? new Date(+m[1], +m[2] - 1, +m[3]) : undefined;
+};
+const WEEKDAY = /^(monday|tuesday|wednesday|thursday|friday|saturday|sunday)\b/i;
+const MONTH = /\b(january|february|march|april|june|july|august|september|october|november|december)\b/gi;
+const short = (w) => w[0].toUpperCase() + w.slice(1, 3).toLowerCase();
+/**
+ * "2026-10-13" → "Tue", "wednesday" → "Wed", "Saturday 17 October (x)" →
+ * "Sat 17 Oct (x)"; anything else as written, trimmed and capped.
+ */
+export function dayLabel(v) {
+    const s = plain(v).trim();
+    const d = isoDate(s);
+    if (d)
+        return d.toLocaleDateString('en-GB', { weekday: 'short' });
+    const w = WEEKDAY.exec(s);
+    if (w)
+        return (short(w[1]) + s.slice(w[1].length).replace(MONTH, short)).slice(0, 40);
+    return s.slice(0, 40);
+}
+const label = (raw, k) => {
+    const s = plain(raw).trim().slice(0, 40);
+    return !s || KINDS.includes(s.toLowerCase()) ? kindWord(k) : s;
+};
+export function readNow(v) {
+    const r = rec(v);
+    if (!Object.keys(r).length)
+        return undefined;
+    const kind = toKind(r.condition);
+    const wind = typeof r.wind === 'number' ? `${Math.round(r.wind)} km/h` : plain(r.wind).trim().slice(0, 24);
+    return { temp: finite(r.temp), kind, label: label(r.condition, kind), feelsLike: finite(r.feelsLike), humidity: pct(r.humidity), wind };
+}
+export function readDays(v) {
+    const rows = list(v)
+        .slice(0, MAX_DAYS)
+        .map((x, i) => {
+        const r = rec(x);
+        const kind = toKind(r.condition);
+        let high = finite(r.high);
+        let low = finite(r.low);
+        if (high !== undefined && low !== undefined && low > high)
+            [high, low] = [low, high];
+        const raw = plain(r.day).trim();
+        const iso = isoDate(raw);
+        return {
+            day: dayLabel(raw) || `Day ${i + 1}`,
+            full: iso?.toLocaleDateString('en-GB', { weekday: 'long', day: 'numeric', month: 'long' }) ?? (raw.slice(0, 40) || `Day ${i + 1}`),
+            date: iso?.toLocaleDateString('en-GB', { day: 'numeric', month: 'short' }),
+            kind,
+            label: label(r.condition, kind),
+            high,
+            low,
+            rain: pct(r.rainChance),
+            sunrise: plain(r.sunrise).trim().slice(0, 24),
+            sunset: plain(r.sunset).trim().slice(0, 24)
+        };
+    });
+    const names = rows.map((d) => d.day);
+    const repeats = rows.length >= 8 || new Set(names).size < names.length;
+    return rows.map((d) => (repeats ? d : { ...d, date: undefined }));
+}
+export function readHours(v) {
+    return list(v)
+        .slice(0, MAX_HOURS)
+        .map((x) => {
+        const r = rec(x);
+        return { time: plain(r.time).trim().slice(0, 24), temp: finite(r.temp), kind: toKind(r.condition), rain: pct(r.rainChance) };
+    });
+}
+/**
+ * The week's lowest low and highest high, for the range bars. A current
+ * temperature at or past either end stretches the scale a little beyond it
+ * (at least 1 degree), so the now dot sits on the track, never off its end.
+ */
+export function span(days, now) {
+    const ts = days.flatMap((d) => [d.low, d.high]).filter((t) => t !== undefined);
+    if (!ts.length)
+        return now === undefined ? undefined : [now, now];
+    let lo = Math.min(...ts);
+    let hi = Math.max(...ts);
+    if (now === undefined)
+        return [lo, hi];
+    const pad = Math.max(1, (Math.max(hi, now) - Math.min(lo, now)) * 0.04);
+    if (now <= lo)
+        lo = now - pad;
+    if (now >= hi)
+        hi = now + pad;
+    return [lo, hi];
+}
+/** Where `t` sits in the span, 0 to 100. */
+export function at(t, [lo, hi]) {
+    return hi === lo ? 50 : Math.min(Math.max(((t - lo) / (hi - lo)) * 100, 0), 100);
+}
+// The bar colour ramp: COLD_C and below is the cool end (the info hue), WARM_C
+// and above the warm end (the warning hue), so the same temperature is the
+// same colour on every row, in both units. The CSS mixes it in oklch in
+// thirds, blue to teal to yellow to amber, so 15 to 20 °C reads teal, green,
+// yellow and keeps its chroma (5 °C blue, 25 °C amber-yellow).
+export const COLD_C = 4;
+export const WARM_C = 28;
+/** Where a temperature in °C sits on the colour ramp, 0 (cool) to 100 (warm). */
+export function ramp(tempC) {
+    return Math.round(Math.min(Math.max((tempC - COLD_C) / (WARM_C - COLD_C), 0), 1) * 100);
+}
+const SEVERITY = ['thunder', 'heavy-rain', 'snow', 'rain', 'fog', 'wind', 'cloudy', 'partly-cloudy', 'sunny', 'night-clear'];
+/** "14:00", "2 PM", "3am" → minutes past midnight; other text → undefined. */
+function clock(s) {
+    const m = /^(\d{1,2})(?::(\d{2}))?\s*(?:([ap])\.?m\.?)?$/i.exec(s);
+    if (!m)
+        return undefined;
+    const h = m[3] ? (+m[1] % 12) + (m[3].toLowerCase() === 'p' ? 12 : 0) : +m[1];
+    return h * 60 + +(m[2] ?? 0);
+}
+/**
+ * At most `fit` columns: every k-th hour with the skipped hours folded in.
+ * A bucket reads as its first hour (time and temperature, so the axis steps
+ * evenly) with the most severe sky and the highest rain chance in it, so a
+ * lone storm hour is never thinned away; `span` holds the bucket's full
+ * range. When clock times run backwards the hours
+ * have passed midnight: the first column of each new day gets a `cue`, its
+ * weekday from `dayNames` (row n of the days), or "Day n".
+ */
+export function bucketHours(hours, fit, dayNames = []) {
+    const k = Math.max(1, Math.ceil(hours.length / Math.max(1, Math.floor(fit))));
+    let day = 0;
+    let prev;
+    const dayOf = hours.map((h) => {
+        const c = clock(h.time);
+        if (c !== undefined) {
+            if (prev !== undefined && c < prev)
+                day++;
+            prev = c;
+        }
+        return day;
+    });
+    const out = [];
+    let shownDay = 0;
+    for (let i = 0; i < hours.length; i += k) {
+        const b = hours.slice(i, i + k);
+        const w = b.reduce((w, h, j) => (SEVERITY.indexOf(h.kind) < SEVERITY.indexOf(b[w].kind) ? j : w), 0);
+        const rains = b.map((h) => h.rain).filter((r) => r !== undefined);
+        const d = dayOf[i];
+        const name = dayNames[d];
+        const col = { time: b[0].time, temp: b[0].temp, kind: b[w].kind, rain: rains.length ? Math.max(...rains) : undefined };
+        if (b.length > 1)
+            col.span = `${b[0].time || '–'} to ${b[b.length - 1].time || '–'}`;
+        if (d > shownDay)
+            col.cue = name && /^[A-Z][a-z]{2}$/.test(name) ? name : `Day ${d + 1}`;
+        shownDay = d;
+        out.push(col);
+    }
+    return out;
+}
+/** One line on the days ahead: which days are wet, or that it stays dry. Day 1 reads "today", as its row does. */
+export function outlook(days) {
+    if (!days.length)
+        return '';
+    const wet = days.filter((d) => (d.rain ?? 0) >= 50 || ['rain', 'heavy-rain', 'thunder', 'snow'].includes(d.kind));
+    if (!wet.length)
+        return days.length > 1 ? `Dry for the next ${days.length} days.` : 'Dry.';
+    const names = wet.slice(0, 3).map((d) => (d === days[0] ? 'today' : d.day));
+    if (wet.length > 3)
+        names.push(`${wet.length - 3} more`);
+    const on = names[0] === 'today' ? '' : 'on ';
+    return `${wet.some((d) => d.kind === 'snow') ? 'Snow or rain' : 'Rain'} likely ${on}${new Intl.ListFormat('en-GB').format(names)}.`;
+}

package/dist/widgets/composite/week-schedule.d.ts

@@ -0,0 +1,28 @@
+export declare const MAX_EVENTS = 60;
+export declare const DEFAULT_DAYS: string[];
+export declare const PALETTE: Record<string, string>;
+export declare function colorOf(color: unknown, title: string): string;
+/** "9:30", "09:30", "2pm", "2:15 PM" → minutes after midnight. */
+export declare function toMin(v: unknown): number | undefined;
+export declare const hhmm: (min: number) => string;
+export declare function duration(min: number): string;
+export declare function readDayNames(v: unknown): string[];
+/** Which column a model `day` belongs to: exact name, first three letters, or a 0-based index. */
+export declare function dayIndex(day: unknown, days: string[]): number;
+/** The column for today in the visitor's week, or -1 when today is not shown. */
+export declare const todayIndex: (days: string[], now: Date) => number;
+export interface Block {
+    id: string;
+    day: number;
+    start: number;
+    end: number;
+    title: string;
+    place: string;
+    color: string;
+}
+export declare function readEvents(v: unknown, days: string[], from: number, to: number): Block[];
+/** Lanes for one day's blocks: overlapping blocks share a cluster and sit side by side. */
+export declare function lanes(blocks: Block[]): Map<string, {
+    lane: number;
+    of: number;
+}>;

package/dist/widgets/composite/week-schedule.js

@@ -0,0 +1,134 @@
+// widgets/composite/week-schedule.ts: the data side of the week-schedule
+// widget. Reads model events (possibly half-streamed) into clean blocks on a
+// day column and a minute range, lays overlapping blocks side by side in
+// lanes, and picks each block's colour from a fixed palette.
+//
+// Invariants:
+// - Every reader survives `{}` and junk. Events cap at 60; an event whose day
+//   or start cannot be read is left out, never guessed.
+// - Colours are palette constants keyed by name; a model colour that is not a
+//   key falls back to a hash of the title, so model text never reaches CSS.
+import { plain } from '../data-kit/format.js';
+import { list, rec } from './recipe.js';
+export const MAX_EVENTS = 60;
+export const DEFAULT_DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+const WEEK = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+export const PALETTE = {
+    blue: '#3b82f6',
+    green: '#16a34a',
+    orange: '#f97316',
+    purple: '#8b5cf6',
+    pink: '#ec4899',
+    teal: '#0d9488',
+    red: '#ef4444',
+    yellow: '#ca8a04',
+    gray: '#64748b'
+};
+const AUTO = ['blue', 'green', 'orange', 'purple', 'pink', 'teal'];
+export function colorOf(color, title) {
+    const k = plain(color).trim().toLowerCase();
+    if (PALETTE[k])
+        return PALETTE[k];
+    let h = 0;
+    for (const c of title)
+        h = (h * 31 + c.charCodeAt(0)) | 0;
+    return PALETTE[AUTO[Math.abs(h) % AUTO.length]];
+}
+/** "9:30", "09:30", "2pm", "2:15 PM" → minutes after midnight. */
+export function toMin(v) {
+    const m = /^(\d{1,2})(?:[:.](\d{2}))?\s*([ap]\.?m\.?)?$/i.exec(plain(v).trim());
+    if (!m)
+        return undefined;
+    let h = +m[1];
+    const min = +(m[2] ?? 0);
+    const ap = m[3]?.[0].toLowerCase();
+    if (ap === 'p' && h < 12)
+        h += 12;
+    if (ap === 'a' && h === 12)
+        h = 0;
+    if (h > 24 || min > 59)
+        return undefined;
+    return h * 60 + min;
+}
+export const hhmm = (min) => `${String(Math.floor(min / 60) % 24).padStart(2, '0')}:${String(min % 60).padStart(2, '0')}`;
+export function duration(min) {
+    const h = Math.floor(min / 60);
+    const m = min % 60;
+    return h ? (m ? `${h} h ${m} min` : `${h} h`) : `${m} min`;
+}
+export function readDayNames(v) {
+    const names = list(v)
+        .map((d) => plain(d).trim().slice(0, 16))
+        .filter(Boolean)
+        .slice(0, 14);
+    return names.length ? names : DEFAULT_DAYS;
+}
+/** Which column a model `day` belongs to: exact name, first three letters, or a 0-based index. */
+export function dayIndex(day, days) {
+    if (typeof day === 'number')
+        return Number.isInteger(day) && day >= 0 && day < days.length ? day : -1;
+    const s = plain(day).trim().toLowerCase();
+    if (!s)
+        return -1;
+    const exact = days.findIndex((d) => d.toLowerCase() === s);
+    if (exact >= 0)
+        return exact;
+    return s.length >= 3 ? days.findIndex((d) => d.toLowerCase().slice(0, 3) === s.slice(0, 3)) : -1;
+}
+/** The column for today in the visitor's week, or -1 when today is not shown. */
+export const todayIndex = (days, now) => dayIndex(WEEK[now.getDay()], days);
+export function readEvents(v, days, from, to) {
+    const out = [];
+    const seen = new Set();
+    list(v)
+        .slice(0, MAX_EVENTS)
+        .forEach((x, i) => {
+        const r = rec(x);
+        const day = dayIndex(r.day, days);
+        let start = toMin(r.start);
+        if (day < 0 || start === undefined)
+            return;
+        let end = toMin(r.end);
+        if (end === undefined || end <= start)
+            end = start + 30;
+        start = Math.max(start, from);
+        end = Math.min(end, to);
+        if (end <= start)
+            return;
+        const title = plain(r.title).trim().slice(0, 80) || 'Untitled';
+        let id = plain(r.id).trim() || `e${i}`;
+        if (seen.has(id))
+            id = `${id}-${i}`;
+        seen.add(id);
+        out.push({ id, day, start, end, title, place: plain(r.place).trim().slice(0, 80), color: colorOf(r.color, title) });
+    });
+    return out.sort((a, b) => a.day - b.day || a.start - b.start || b.end - a.end);
+}
+/** Lanes for one day's blocks: overlapping blocks share a cluster and sit side by side. */
+export function lanes(blocks) {
+    const out = new Map();
+    const sorted = [...blocks].sort((a, b) => a.start - b.start || b.end - a.end);
+    let cluster = [];
+    let ends = [];
+    let clusterEnd = -1;
+    const flush = () => {
+        for (const b of cluster)
+            out.get(b.id).of = ends.length;
+        cluster = [];
+        ends = [];
+    };
+    for (const b of sorted) {
+        if (b.start >= clusterEnd)
+            flush();
+        let lane = ends.findIndex((e) => e <= b.start);
+        if (lane < 0)
+            lane = ends.push(b.end) - 1;
+        else
+            ends[lane] = b.end;
+        out.set(b.id, { lane, of: 1 });
+        cluster.push(b);
+        clusterEnd = Math.max(clusterEnd, b.end);
+    }
+    flush();
+    return out;
+}

package/dist/widgets/control/Each.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  interface Props { items?: any[]; children?: Snippet; }
+  let { children }: Props = $props();
+</script>
+{@render children?.()}

package/dist/widgets/control/Each.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    items?: any[];
+    children?: Snippet;
+}
+declare const Each: import("svelte").Component<Props, {}, "">;
+type Each = ReturnType<typeof Each>;
+export default Each;

package/dist/widgets/control/If.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  interface Props { condition?: boolean; children?: Snippet; }
+  let { condition = true, children }: Props = $props();
+</script>
+{#if condition}{@render children?.()}{/if}

package/dist/widgets/control/If.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    condition?: boolean;
+    children?: Snippet;
+}
+declare const If: import("svelte").Component<Props, {}, "">;
+type If = ReturnType<typeof If>;
+export default If;

package/dist/widgets/control/index.d.ts

@@ -0,0 +1,2 @@
+export { default as If } from './If.svelte';
+export { default as Each } from './Each.svelte';

package/dist/widgets/control/index.js

@@ -0,0 +1,2 @@
+export { default as If } from './If.svelte';
+export { default as Each } from './Each.svelte';