@vibesdotdev/kit 0.0.0-stage → 1.0.0-rc.4

package/dist/lib/components/parallax/StaggeredList.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">import "svelte";
+let { children, class: className = "", staggerDelay = 100, baseDelay = 0, duration = 500, slideDistance = 24, slideDirection = "up", threshold = .15, once = true } = $props();
+let containerEl;
+let isVisible = $state(false);
+let hasAnimated = $state(false);
+let motionAllowed = $state(true);
+function getTransform(visible) {
+	if (visible) return "translate(0, 0)";
+	switch (slideDirection) {
+		case "down": return `translate(0, -${slideDistance}px)`;
+		case "left": return `translate(${slideDistance}px, 0)`;
+		case "right": return `translate(-${slideDistance}px, 0)`;
+		default: return `translate(0, ${slideDistance}px)`;
+	}
+}
+$effect(() => {
+	motionAllowed = !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+	if (!motionAllowed) {
+		isVisible = true;
+		hasAnimated = true;
+		return;
+	}
+	const observer = new IntersectionObserver((entries) => {
+		for (const entry of entries) {
+			if (entry.isIntersecting && (!once || !hasAnimated)) {
+				isVisible = true;
+				hasAnimated = true;
+				if (once) {
+					observer.unobserve(entry.target);
+				}
+			} else if (!once && !entry.isIntersecting) {
+				isVisible = false;
+			}
+		}
+	}, { threshold });
+	observer.observe(containerEl);
+	// Reveal-on-load fallback, mirroring AnimatedSection: if the observer
+	// never fires (no-scroll, headless, crawler, occluded window, slow JS),
+	// force the children visible so a staggered grid can never render as a
+	// permanent blank. On the common path the observer wins first and this
+	// is a no-op; it only ever flips visibility on, never off.
+	const revealFallback = setTimeout(() => {
+		isVisible = true;
+		hasAnimated = true;
+	}, 1200);
+	return () => {
+		clearTimeout(revealFallback);
+		observer.disconnect();
+	};
+});
+</script>
+
+<div
+	bind:this={containerEl}
+	class={`staggered-list ${className}`}
+	style:--stagger-delay={`${staggerDelay}ms`}
+	style:--base-delay={`${baseDelay}ms`}
+	style:--duration={`${duration}ms`}
+	style:--slide-transform={getTransform(false)}
+	class:is-visible={isVisible}
+	class:motion-reduced={!motionAllowed}
+>
+	{@render children()}
+</div>
+
+<style>
+	@reference "../../styles.css";
+
+	.staggered-list:not(.motion-reduced) :global(> *) {
+		opacity: 0;
+		transform: var(--slide-transform);
+		transition:
+			opacity var(--duration) ease-out,
+			transform var(--duration) ease-out;
+	}
+
+	.staggered-list:not(.motion-reduced).is-visible :global(> *) {
+		opacity: 1;
+		transform: translate(0, 0);
+	}
+
+	.staggered-list:not(.motion-reduced).is-visible :global(> *:nth-child(1)) {
+		transition-delay: calc(var(--base-delay) + var(--stagger-delay) * 0);
+	}
+	.staggered-list:not(.motion-reduced).is-visible :global(> *:nth-child(2)) {
+		transition-delay: calc(var(--base-delay) + var(--stagger-delay) * 1);
+	}
+	.staggered-list:not(.motion-reduced).is-visible :global(> *:nth-child(3)) {
+		transition-delay: calc(var(--base-delay) + var(--stagger-delay) * 2);
+	}
+	.staggered-list:not(.motion-reduced).is-visible :global(> *:nth-child(4)) {
+		transition-delay: calc(var(--base-delay) + var(--stagger-delay) * 3);
+	}
+	.staggered-list:not(.motion-reduced).is-visible :global(> *:nth-child(5)) {
+		transition-delay: calc(var(--base-delay) + var(--stagger-delay) * 4);
+	}
+	.staggered-list:not(.motion-reduced).is-visible :global(> *:nth-child(6)) {
+		transition-delay: calc(var(--base-delay) + var(--stagger-delay) * 5);
+	}
+
+	.staggered-list.motion-reduced :global(> *) {
+		opacity: 1;
+		transform: none;
+	}
+</style>

package/dist/lib/components/parallax/StaggeredList.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type Snippet } from 'svelte';
+interface Props {
+    children: Snippet;
+    class?: string;
+    staggerDelay?: number;
+    baseDelay?: number;
+    duration?: number;
+    slideDistance?: number;
+    slideDirection?: 'up' | 'down' | 'left' | 'right';
+    threshold?: number;
+    once?: boolean;
+}
+declare const StaggeredList: import("svelte").Component<Props, {}, "">;
+type StaggeredList = ReturnType<typeof StaggeredList>;
+export default StaggeredList;

package/dist/lib/components/parallax/index.d.ts

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

package/dist/lib/components/parallax/index.js

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

package/dist/lib/components/profile-sections/AppletEmbed.svelte

@@ -0,0 +1,59 @@
+<!--
+  AppletEmbed — renders an inline applet source snapshot in a fully sandboxed
+  iframe (`sandbox="allow-scripts"`, srcdoc, no same-origin, no referrer).
+
+  This is the PUBLIC-page sibling of hq-web's applet preview
+  (apps/hq-web/src/lib/applets/preview-document.ts): same trust model — the
+  source runs isolated from the host origin — without the HQ-only
+  script/events bridge. Svelte single-file-component sources get the same
+  minimal treatment HQ applies: markup + <style> inlined, <script> executed
+  inside the sandbox.
+-->
+<script lang="ts">let { source, sourceFormat = "html", title = "Embedded applet", height = 420 } = $props();
+const clampedHeight = $derived(Math.max(120, Math.min(height, 1200)));
+function escapeHtml(value) {
+	return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;");
+}
+/** Split a Svelte SFC into markup / script / style (top-level blocks only). */
+function extractSvelteParts(sfc) {
+	let markup = sfc;
+	let script = "";
+	let style = "";
+	markup = markup.replace(/<script\b[^>]*>([\s\S]*?)<\/script>/gi, (_m, body) => {
+		script += `${body}\n`;
+		return "";
+	});
+	markup = markup.replace(/<style\b[^>]*>([\s\S]*?)<\/style>/gi, (_m, body) => {
+		style += `${body}\n`;
+		return "";
+	});
+	return {
+		markup: markup.trim(),
+		script: script.trim(),
+		style: style.trim()
+	};
+}
+const documentSource = $derived.by(() => {
+	const base = "<meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">" + "<style>:root{color-scheme:light dark}body{margin:0;font-family:system-ui,sans-serif}</style>";
+	if (sourceFormat === "html") {
+		return `<!doctype html><html><head>${base}</head><body>${source}</body></html>`;
+	}
+	if (sourceFormat === "svelte-single-file-component") {
+		const parts = extractSvelteParts(source);
+		const script = parts.script ? `<script>(function(){try{(0,eval)(${JSON.stringify(parts.script)})}catch(e){console.error(e)}})()\u003c/script>` : "";
+		return `<!doctype html><html><head>${base}<style>${parts.style}</style></head><body>${parts.markup}${script}</body></html>`;
+	}
+	// markdown / json: display-only, escaped.
+	return `<!doctype html><html><head>${base}</head><body><pre style="white-space:pre-wrap;padding:16px;margin:0">${escapeHtml(source)}</pre></body></html>`;
+});
+</script>
+
+<iframe
+	{title}
+	srcdoc={documentSource}
+	sandbox="allow-scripts"
+	referrerpolicy="no-referrer"
+	loading="lazy"
+	class="block w-full rounded-md border-0"
+	style="height: {clampedHeight}px"
+></iframe>

package/dist/lib/components/profile-sections/AppletEmbed.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    source: string;
+    sourceFormat?: 'svelte-single-file-component' | 'html' | 'markdown' | 'json';
+    title?: string;
+    height?: number;
+}
+declare const AppletEmbed: import("svelte").Component<Props, {}, "">;
+type AppletEmbed = ReturnType<typeof AppletEmbed>;
+export default AppletEmbed;

package/dist/lib/components/profile-sections/ProfileSections.svelte

@@ -0,0 +1,52 @@
+<!--
+  ProfileSections — ordered renderer for public landing-page sections
+  (user profiles at /u/[slug], agent pages at /a/[slug]).
+
+  Section kinds (see ./schema.ts):
+    - builtin:   delegated to the host app via the `builtin` snippet (premade
+                 sections like activity, public projects, agents, stats).
+    - text:      owner-authored plain text.
+    - component: a published platform Component via <UserComponent> (public
+                 pages only load publicly-served bundles).
+    - applet:    an inline applet snapshot in a sandboxed iframe.
+-->
+<script lang="ts">import { UserComponent } from "../user-component/index.js";
+import AppletEmbed from "./AppletEmbed.svelte";
+let { sections, platformOrigin, builtin } = $props();
+</script>
+
+<div class="flex flex-col gap-8" data-testid="profile-sections">
+	{#each sections as section, index (index)}
+		<section class="min-w-0">
+			{#if section.kind !== 'builtin' && section.title}
+				<h2 class="mb-3 text-lg font-semibold">{section.title}</h2>
+			{/if}
+
+			{#if section.kind === 'builtin'}
+				{#if builtin}
+					{@render builtin({ id: section.builtin, title: section.title })}
+				{/if}
+			{:else if section.kind === 'text'}
+				<p class="max-w-prose whitespace-pre-line text-muted-foreground">{section.body}</p>
+			{:else if section.kind === 'component'}
+				<div class="overflow-hidden rounded-md border p-4">
+					<UserComponent
+						id={section.componentId}
+						version={section.version ?? 'latest'}
+						origin={platformOrigin}
+						props={section.props ?? {}}
+					/>
+				</div>
+			{:else if section.kind === 'applet'}
+				<div class="overflow-hidden rounded-md border">
+					<AppletEmbed
+						source={section.source}
+						sourceFormat={section.sourceFormat}
+						title={section.title ?? 'Embedded applet'}
+						height={section.height ?? 420}
+					/>
+				</div>
+			{/if}
+		</section>
+	{/each}
+</div>

package/dist/lib/components/profile-sections/ProfileSections.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { ProfileSection } from './schema.js';
+interface Props {
+    sections: ProfileSection[];
+    /** Platform origin for component bundles (PUBLIC_VIBES_PLATFORM_ORIGIN). */
+    platformOrigin?: string;
+    /** Host-app renderer for `builtin` sections. Unknown ids should render nothing. */
+    builtin?: Snippet<[{
+        id: string;
+        title?: string;
+    }]>;
+}
+declare const ProfileSections: import("svelte").Component<Props, {}, "">;
+type ProfileSections = ReturnType<typeof ProfileSections>;
+export default ProfileSections;

package/dist/lib/components/profile-sections/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ProfileSections } from './ProfileSections.svelte';
+export { default as AppletEmbed } from './AppletEmbed.svelte';
+export { profileSectionSchema, profileSectionsSchema, profileSectionSourceFormatSchema, parseProfileSections, type ProfileSection, type ProfileSections as ProfileSectionList } from './schema.js';

package/dist/lib/components/profile-sections/index.js

@@ -0,0 +1,3 @@
+export { default as ProfileSections } from './ProfileSections.svelte';
+export { default as AppletEmbed } from './AppletEmbed.svelte';
+export { profileSectionSchema, profileSectionsSchema, profileSectionSourceFormatSchema, parseProfileSections } from './schema.js';

package/dist/lib/components/profile-sections/schema.d.ts

@@ -0,0 +1,82 @@
+/**
+ * Profile-site section model — the customization unit for public landing
+ * pages (account-web `/u/[slug]` user profiles, ai-web `/a/[slug]` agent
+ * pages). A page is an ordered list of sections:
+ *
+ *  - `builtin`   — a premade, app-provided section (activity, public projects,
+ *                  agents, prompts, bases, stats, …). The HOST app decides
+ *                  which ids it supports and renders them via the `builtin`
+ *                  snippet on <ProfileSections>.
+ *  - `text`      — owner-authored plain text (about/notes), no markup.
+ *  - `component` — a published platform Component mounted via <UserComponent>.
+ *                  Public pages must only receive components the platform
+ *                  serves publicly (visibility 'public' — the bundle endpoint
+ *                  enforces this; a private id simply fails to load).
+ *  - `applet`    — an inline applet source SNAPSHOT rendered in a fully
+ *                  sandboxed iframe (allow-scripts, no same-origin). Snapshots
+ *                  are copied into the profile at attach time, so public pages
+ *                  never read the owner-scoped applet store.
+ */
+import * as z from 'zod/v4';
+export declare const profileSectionSourceFormatSchema: z.ZodEnum<{
+    html: "html";
+    "svelte-single-file-component": "svelte-single-file-component";
+    markdown: "markdown";
+    json: "json";
+}>;
+export declare const profileSectionSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
+    kind: z.ZodLiteral<"builtin">;
+    builtin: z.ZodString;
+    title: z.ZodOptional<z.ZodString>;
+}, z.core.$strip>, z.ZodObject<{
+    kind: z.ZodLiteral<"text">;
+    title: z.ZodOptional<z.ZodString>;
+    body: z.ZodString;
+}, z.core.$strip>, z.ZodObject<{
+    kind: z.ZodLiteral<"component">;
+    componentId: z.ZodUUID;
+    version: z.ZodOptional<z.ZodString>;
+    title: z.ZodOptional<z.ZodString>;
+    props: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+}, z.core.$strip>, z.ZodObject<{
+    kind: z.ZodLiteral<"applet">;
+    title: z.ZodOptional<z.ZodString>;
+    source: z.ZodString;
+    sourceFormat: z.ZodDefault<z.ZodEnum<{
+        html: "html";
+        "svelte-single-file-component": "svelte-single-file-component";
+        markdown: "markdown";
+        json: "json";
+    }>>;
+    height: z.ZodOptional<z.ZodNumber>;
+}, z.core.$strip>], "kind">;
+export declare const profileSectionsSchema: z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
+    kind: z.ZodLiteral<"builtin">;
+    builtin: z.ZodString;
+    title: z.ZodOptional<z.ZodString>;
+}, z.core.$strip>, z.ZodObject<{
+    kind: z.ZodLiteral<"text">;
+    title: z.ZodOptional<z.ZodString>;
+    body: z.ZodString;
+}, z.core.$strip>, z.ZodObject<{
+    kind: z.ZodLiteral<"component">;
+    componentId: z.ZodUUID;
+    version: z.ZodOptional<z.ZodString>;
+    title: z.ZodOptional<z.ZodString>;
+    props: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+}, z.core.$strip>, z.ZodObject<{
+    kind: z.ZodLiteral<"applet">;
+    title: z.ZodOptional<z.ZodString>;
+    source: z.ZodString;
+    sourceFormat: z.ZodDefault<z.ZodEnum<{
+        html: "html";
+        "svelte-single-file-component": "svelte-single-file-component";
+        markdown: "markdown";
+        json: "json";
+    }>>;
+    height: z.ZodOptional<z.ZodNumber>;
+}, z.core.$strip>], "kind">>;
+export type ProfileSection = z.infer<typeof profileSectionSchema>;
+export type ProfileSections = z.infer<typeof profileSectionsSchema>;
+/** Parse unknown stored JSON into sections, dropping the whole value if invalid. */
+export declare function parseProfileSections(value: unknown): ProfileSections | null;

package/dist/lib/components/profile-sections/schema.js

@@ -0,0 +1,64 @@
+/**
+ * Profile-site section model — the customization unit for public landing
+ * pages (account-web `/u/[slug]` user profiles, ai-web `/a/[slug]` agent
+ * pages). A page is an ordered list of sections:
+ *
+ *  - `builtin`   — a premade, app-provided section (activity, public projects,
+ *                  agents, prompts, bases, stats, …). The HOST app decides
+ *                  which ids it supports and renders them via the `builtin`
+ *                  snippet on <ProfileSections>.
+ *  - `text`      — owner-authored plain text (about/notes), no markup.
+ *  - `component` — a published platform Component mounted via <UserComponent>.
+ *                  Public pages must only receive components the platform
+ *                  serves publicly (visibility 'public' — the bundle endpoint
+ *                  enforces this; a private id simply fails to load).
+ *  - `applet`    — an inline applet source SNAPSHOT rendered in a fully
+ *                  sandboxed iframe (allow-scripts, no same-origin). Snapshots
+ *                  are copied into the profile at attach time, so public pages
+ *                  never read the owner-scoped applet store.
+ */
+import * as z from 'zod/v4';
+export const profileSectionSourceFormatSchema = z.enum([
+    'svelte-single-file-component',
+    'html',
+    'markdown',
+    'json'
+]);
+const sectionTitle = z.string().max(120).optional();
+export const profileSectionSchema = z.discriminatedUnion('kind', [
+    z.object({
+        kind: z.literal('builtin'),
+        builtin: z
+            .string()
+            .min(1)
+            .max(40)
+            .regex(/^[a-z0-9-]+$/),
+        title: sectionTitle
+    }),
+    z.object({
+        kind: z.literal('text'),
+        title: sectionTitle,
+        body: z.string().max(4000)
+    }),
+    z.object({
+        kind: z.literal('component'),
+        componentId: z.uuid(),
+        version: z.string().max(32).optional(),
+        title: sectionTitle,
+        props: z.record(z.string(), z.unknown()).optional()
+    }),
+    z.object({
+        kind: z.literal('applet'),
+        title: sectionTitle,
+        source: z.string().min(1).max(200_000),
+        sourceFormat: profileSectionSourceFormatSchema.default('html'),
+        /** Iframe height in px; clamped by the renderer. */
+        height: z.number().int().min(120).max(1200).optional()
+    })
+]);
+export const profileSectionsSchema = z.array(profileSectionSchema).max(16);
+/** Parse unknown stored JSON into sections, dropping the whole value if invalid. */
+export function parseProfileSections(value) {
+    const parsed = profileSectionsSchema.safeParse(value);
+    return parsed.success ? parsed.data : null;
+}

package/dist/lib/components/schedule-calendar/ScheduleCalendar.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">/**
+* ScheduleCalendar — a reusable, DATA-AGNOSTIC schedule view (kit pattern, like
+* AppShell). A month calendar (the kit `Calendar` over bits-ui — no hand-rolled
+* grid) with a per-day status dot + a selected-day detail pane. The consumer
+* maps its domain rows into `ScheduleItem[]`; this component never fetches and
+* imports no domain/feature package. Reused by HQ (agent schedules over platform
+* scheduled-tasks), and intended for any scheduled-work surface (forge, etc.).
+*/
+import { untrack } from "svelte";
+import { Calendar } from "../ui/calendar/index.js";
+import * as Card from "../ui/card/index.js";
+import { cn } from "../../utils.js";
+import { today, getLocalTimeZone } from "@internationalized/date";
+import { groupScheduleItemsByDay, itemsForDay, firstScheduledDay } from "./group-schedule-items.js";
+import ScheduleDayCell from "./ScheduleDayCell.svelte";
+import ScheduleDayDetail from "./ScheduleDayDetail.svelte";
+let { items = [], value = $bindable(), placeholder = $bindable(), locale = "en-US", emptyLabel = "No scheduled tasks", onSelectItem, actions, class: className } = $props();
+const groups = $derived(groupScheduleItemsByDay(items));
+const initialDay = $derived(firstScheduledDay(items) ?? today(getLocalTimeZone()));
+// A consumer that passes `value` in controls the selection — never override it.
+const controlled = value !== undefined;
+// Has the user picked a day in this component? Until they do (and absent a
+// controlled value), the selection follows `initialDay` so a late-arriving
+// `items` set moves the default off "today" onto the first scheduled day —
+// instead of sticking on whatever was computed at first render.
+let userTouched = $state(false);
+$effect(() => {
+	untrack(() => {
+		const target = initialDay;
+		if (!controlled && !userTouched) {
+			if (!value || value.compare(target) !== 0) {
+				value = target;
+			}
+		}
+		if (!placeholder) {
+			placeholder = value ?? target;
+		}
+	});
+});
+// SSR/first paint is unchanged: no user interaction → `userTouched` stays false
+// → `value` tracks `initialDay` exactly as before. This only fires client-side
+// when the user actually selects a day, pinning the selection from then on.
+function handleValueChange() {
+	userTouched = true;
+}
+const selectedItems = $derived(value ? itemsForDay(groups, value) : []);
+const selectedLabel = $derived(value ? new Intl.DateTimeFormat(locale, {
+	weekday: "short",
+	month: "short",
+	day: "numeric"
+}).format(value.toDate(getLocalTimeZone())) : "");
+</script>
+
+<div class={cn('grid items-start gap-4 lg:grid-cols-[auto_minmax(0,1fr)]', className)}>
+	<Card.Root>
+		<Card.Content class="p-2 sm:p-3">
+			<Calendar
+				type="single"
+				bind:value
+				bind:placeholder
+				{locale}
+				onValueChange={handleValueChange}
+				class="bg-transparent p-0"
+			>
+				{#snippet day({ day: d, outsideMonth })}
+					<ScheduleDayCell items={itemsForDay(groups, d)} {outsideMonth} />
+				{/snippet}
+			</Calendar>
+		</Card.Content>
+	</Card.Root>
+
+	<Card.Root>
+		<Card.Header>
+			<Card.Title class="text-base">
+				{selectedLabel ? `Scheduled — ${selectedLabel}` : 'Scheduled'}
+			</Card.Title>
+		</Card.Header>
+		<Card.Content>
+			<ScheduleDayDetail items={selectedItems} {emptyLabel} {onSelectItem} {actions} />
+		</Card.Content>
+	</Card.Root>
+</div>

package/dist/lib/components/schedule-calendar/ScheduleCalendar.svelte.d.ts

@@ -0,0 +1,25 @@
+/**
+     * ScheduleCalendar — a reusable, DATA-AGNOSTIC schedule view (kit pattern, like
+     * AppShell). A month calendar (the kit `Calendar` over bits-ui — no hand-rolled
+     * grid) with a per-day status dot + a selected-day detail pane. The consumer
+     * maps its domain rows into `ScheduleItem[]`; this component never fetches and
+     * imports no domain/feature package. Reused by HQ (agent schedules over platform
+     * scheduled-tasks), and intended for any scheduled-work surface (forge, etc.).
+     */
+import { type Snippet } from 'svelte';
+import { type DateValue } from '@internationalized/date';
+import type { ScheduleItem } from './schemas/schedule-item.ts';
+type $$ComponentProps = {
+    items?: ScheduleItem[];
+    value?: DateValue;
+    placeholder?: DateValue;
+    locale?: string;
+    emptyLabel?: string;
+    onSelectItem?: (item: ScheduleItem) => void;
+    /** Optional per-row action slot (e.g. Pause/Resume), forwarded to ScheduleDayDetail. */
+    actions?: Snippet<[ScheduleItem]>;
+    class?: string;
+};
+declare const ScheduleCalendar: import("svelte").Component<$$ComponentProps, {}, "value" | "placeholder">;
+type ScheduleCalendar = ReturnType<typeof ScheduleCalendar>;
+export default ScheduleCalendar;

package/dist/lib/components/schedule-calendar/ScheduleDayCell.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">/**
+* A single day inside ScheduleCalendar, rendered through the kit `Calendar`
+* `day` snippet. Keeps the real interactive `CalendarDay` (date number,
+* selection, today/disabled states) and overlays a status dot when the day
+* has scheduled items. Pure presentation — no domain types.
+*/
+import { CalendarDay } from "../ui/calendar/index.js";
+let { items = [], outsideMonth = false } = $props();
+// Dominant status drives the dot colour (most-severe wins).
+const STATUS_ORDER = [
+	"error",
+	"active",
+	"paused",
+	"done"
+];
+const dominant = $derived(STATUS_ORDER.find((s) => items.some((i) => i.status === s)));
+const DOT = {
+	error: "bg-destructive",
+	active: "bg-primary",
+	paused: "bg-muted-foreground",
+	done: "bg-muted-foreground"
+};
+</script>
+
+<div class="relative">
+	<CalendarDay />
+	{#if dominant && !outsideMonth}
+		<span
+			class="pointer-events-none absolute inset-x-0 bottom-1 mx-auto h-1.5 w-1.5 rounded-full {DOT[
+				dominant
+			]}"
+			aria-hidden="true"
+		></span>
+	{/if}
+</div>

package/dist/lib/components/schedule-calendar/ScheduleDayCell.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ScheduleItem } from './schemas/schedule-item.ts';
+type $$ComponentProps = {
+    items?: ScheduleItem[];
+    outsideMonth?: boolean;
+};
+declare const ScheduleDayCell: import("svelte").Component<$$ComponentProps, {}, "">;
+type ScheduleDayCell = ReturnType<typeof ScheduleDayCell>;
+export default ScheduleDayCell;

package/dist/lib/components/schedule-calendar/ScheduleDayDetail.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">/**
+* The right-hand detail pane of ScheduleCalendar: the items on the selected
+* day, each with status/kind badges, next/last run, and run count. Data-agnostic.
+*/
+import { ScrollArea } from "../ui/scroll-area/index.js";
+import { Badge } from "../ui/badge/index.js";
+import { Button } from "../ui/button/index.js";
+let { items = [], emptyLabel = "No scheduled tasks", onSelectItem, actions } = $props();
+const VARIANT = {
+	active: "default",
+	paused: "secondary",
+	error: "destructive",
+	done: "outline"
+};
+function fmt(iso) {
+	if (!iso) return "—";
+	const d = new Date(iso);
+	return Number.isNaN(d.getTime()) ? "—" : d.toLocaleString();
+}
+const ROW_CLASS = "border-border bg-card flex w-full flex-col items-stretch gap-1.5 rounded-md border p-3 text-left h-auto";
+</script>
+
+{#snippet row(item: ScheduleItem)}
+	<div class="flex items-center justify-between gap-2">
+		<span class="truncate text-sm font-medium">{item.title}</span>
+		<Badge variant={VARIANT[item.status]}>{item.status}</Badge>
+	</div>
+	{#if item.subtitle}
+		<p class="text-xs text-muted-foreground">{item.subtitle}</p>
+	{/if}
+	<div class="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
+		{#if item.kind}<span class="rounded bg-muted px-1.5 py-0.5">{item.kind}</span>{/if}
+		<span>next: {fmt(item.nextRunAt ?? item.date)}</span>
+		<span>last: {fmt(item.lastRunAt)}</span>
+		{#if typeof item.runCount === 'number'}<span>runs: {item.runCount}</span>{/if}
+	</div>
+{/snippet}
+
+{#if items.length === 0}
+	<p class="py-8 text-center text-sm text-muted-foreground">{emptyLabel}</p>
+{:else}
+	<ScrollArea class="max-h-[22rem]">
+		<ul class="flex flex-col gap-2">
+			{#each items as item (item.id)}
+				<li>
+					<div class="flex items-stretch gap-2">
+						{#if onSelectItem}
+							<Button
+								variant="ghost"
+								class="{ROW_CLASS} flex-1 cursor-pointer hover:bg-accent/40"
+								onclick={() => onSelectItem?.(item)}
+							>
+								{@render row(item)}
+							</Button>
+						{:else if item.href}
+							<a href={item.href} class="{ROW_CLASS} flex-1 hover:bg-accent/40">
+								{@render row(item)}
+							</a>
+						{:else}
+							<div class="{ROW_CLASS} flex-1">{@render row(item)}</div>
+						{/if}
+						{#if actions}
+							<div class="flex shrink-0 items-center">
+								{@render actions(item)}
+							</div>
+						{/if}
+					</div>
+				</li>
+			{/each}
+		</ul>
+	</ScrollArea>
+{/if}