@hearthlog/module-finance 0.0.0-stage → 1.0.0

package/src/components/finance/FinanceReadout.svelte

@@ -0,0 +1,229 @@
+<script lang="ts">
+    import { differenceInCalendarDays, format, parseISO } from "date-fns";
+    import type { Asset } from "../../data/assets.js";
+    import type { TimelineOutlook } from "../../data/finance-timeline.js";
+    import { parseFloor } from "../../finance/floor.js";
+    import { formatAmount } from "@hearthlog/sdk/format";
+    import { Amount } from "@hearthlog/sdk/ui";
+    import { DataValue } from "@hearthlog/sdk/ui";
+    import AssetView from "./AssetView.svelte";
+    import IconChevronDown from "~icons/mdi/chevron-down";
+
+    let {
+        outlook,
+        today,
+        floor,
+        assets,
+        assetsSum,
+        onFloorChange,
+        onJump,
+        sheet = false,
+        onUpdateAssets,
+    }: {
+        outlook: TimelineOutlook;
+        today: string;
+        floor: number;
+        assets: Asset[];
+        assetsSum: number;
+        onFloorChange: (value: number) => void;
+        /** Scrolls the list to a day named in the readout. */
+        onJump?: (date: string) => void;
+        /** In the phone summary sheet: every figure and the assets, two by two. */
+        sheet?: boolean;
+        /** In the sheet: opens every balance for editing in place of the outlook. */
+        onUpdateAssets?: () => void;
+    } = $props();
+
+    // svelte-ignore state_referenced_locally
+    let assetsOpen = $state(sheet);
+    const margin = $derived(outlook.low.amount - floor);
+    const below = $derived(margin < 0);
+    const lowDay = $derived(
+        !outlook.low.date ? "" : outlook.low.date === today ? "Today" : format(parseISO(outlook.low.date), "EEE d MMM"),
+    );
+    const lowDistance = $derived(outlook.low.date && today ? differenceInCalendarDays(parseISO(outlook.low.date), parseISO(today)) : 0);
+    const endDay = $derived(outlook.endDate ? format(parseISO(outlook.endDate), outlook.endDate.slice(0, 4) === today.slice(0, 4) ? "d MMM" : "d MMM yyyy") : "");
+    const assetNames = $derived(assets.map((asset) => asset.name).join(" · "));
+
+    function commitFloor(input: HTMLInputElement): void {
+        const value = parseFloor(input.value);
+        if (value === null) {
+            input.value = formatAmount(floor);
+            return;
+        }
+        input.value = formatAmount(value);
+        if (value !== floor) onFloorChange(value);
+    }
+</script>
+
+<!-- Phones show the two numbers that decide the month; opening Available now adds the rest and the assets. -->
+<section class="stor-panel readout shrink-0" class:open={assetsOpen || sheet} class:sheet aria-label="Outlook">
+    <div class="cell">
+        <button type="button" class="cell-button" aria-expanded={assetsOpen} aria-controls="finance-current-assets" onclick={() => (assetsOpen = !assetsOpen)}>
+            <span class="label">Available now<IconChevronDown class="phone-only h-3.5 w-3.5 shrink-0 transition-transform {assetsOpen ? 'rotate-180' : ''}" /></span>
+            <span class="value"><DataValue><Amount value={outlook.available} /></DataValue></span>
+            <span class="sub">
+                <span class="truncate">{assetNames || "Add current assets"}</span>
+                <IconChevronDown class="h-3.5 w-3.5 shrink-0 transition-transform {assetsOpen ? 'rotate-180' : ''}" />
+            </span>
+        </button>
+    </div>
+    <div class="cell" class:warn={below}>
+        <button type="button" class="cell-button" disabled={!onJump || lowDay === "Today"} onclick={() => onJump?.(outlook.low.date)}>
+            <span class="label">Lowest ahead</span>
+            <span class="value">
+                <DataValue><Amount value={outlook.low.amount} /></DataValue>
+            </span>
+            <span class="sub">
+                <DataValue>{lowDay}{lowDistance > 0 && floor === 0 && !below ? ` · in ${lowDistance} ${lowDistance === 1 ? "day" : "days"}` : ` · ${formatAmount(below ? -margin : margin)} ${below ? "under" : "over"} floor`}</DataValue>
+            </span>
+        </button>
+    </div>
+    <div class="cell extra">
+        <button type="button" class="cell-button" disabled={!onJump || !outlook.endDate} onclick={() => outlook.endDate && onJump?.(outlook.endDate)}>
+            <span class="label">After last plan</span>
+            <span class="value">
+                <DataValue><Amount value={outlook.end} /></DataValue>
+            </span>
+            <span class="sub"><DataValue>{outlook.endDate ? `${endDay} · ${formatAmount(outlook.end - outlook.available, { signed: true })}` : "Nothing planned"}</DataValue></span>
+        </button>
+    </div>
+    <div class="cell extra">
+        <label class="label" for="finance-floor">Floor</label>
+        <span class="value">
+            <input
+                id="finance-floor"
+                class="floor-input"
+                inputmode="numeric"
+                autocomplete="off"
+                value={formatAmount(floor)}
+                aria-describedby="finance-floor-help"
+                onchange={(event) => commitFloor(event.currentTarget)}
+                onkeydown={(event) => { if (event.key === "Enter") event.currentTarget.blur(); }}
+            /><span class="stor-unit">Kč</span>
+        </span>
+        <span class="sub" id="finance-floor-help">Warn below this balance</span>
+    </div>
+</section>
+
+{#if sheet && onUpdateAssets}
+    <!-- The sheet lists the assets; Update assets opens every balance in one place. -->
+    <div id="finance-current-assets" class="mt-3 flex flex-col">
+        <p class="text-xs font-semibold uppercase tracking-wide text-[var(--stor-muted-text)]">Assets</p>
+        {#each assets as asset (asset.id)}
+            <div class="flex min-h-12 items-center justify-between gap-3 border-b border-[color-mix(in_srgb,var(--stor-border)_62%,transparent)] text-[15px]">
+                <span class="min-w-0 truncate text-[var(--stor-ink)]">{asset.name}</span>
+                <b class="shrink-0 font-semibold tabular-nums text-[var(--stor-ink)]">{formatAmount(Number(asset.amount))} Kč</b>
+            </div>
+        {:else}
+            <p class="py-3 text-sm text-[var(--stor-muted-text)]">No assets yet.</p>
+        {/each}
+        <button type="button" class="flex min-h-12 items-center justify-between text-left text-[15px] font-semibold text-[var(--stor-accent-text)]" onclick={onUpdateAssets}>
+            {assets.length ? "Update assets" : "Add an asset"}<IconChevronDown class="h-5 w-5 -rotate-90" />
+        </button>
+    </div>
+{:else if assetsOpen}
+    <div id="finance-current-assets" class="shrink-0">
+        <AssetView {assets} {assetsSum} onUpdateAll={onUpdateAssets} />
+    </div>
+{/if}
+
+<style>
+    .readout {
+        display: grid;
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+        overflow: hidden;
+    }
+    .cell {
+        position: relative;
+        display: flex;
+        min-width: 0;
+        flex-direction: column;
+        gap: 2px;
+        padding: 0.875rem 1.25rem 0.8125rem;
+        border-left: 1px solid color-mix(in srgb, var(--stor-border) 62%, transparent);
+    }
+    .cell:has(> .cell-button) { padding: 0; }
+    .cell:first-child { border-left: 0; }
+    .cell-button {
+        display: flex;
+        min-width: 0;
+        flex-direction: column;
+        gap: 2px;
+        padding: 0.875rem 1.25rem 0.8125rem;
+        border: 0;
+        background: transparent;
+        text-align: left;
+        color: inherit;
+    }
+    .cell:first-child .cell-button { border-radius: var(--stor-panel-radius) 0 0 var(--stor-panel-radius); }
+    .cell-button:not(:disabled):hover { background: var(--stor-surface-hover); }
+    .cell-button:disabled { cursor: default; }
+    .cell-button:focus-visible { outline: 2px solid var(--stor-focus); outline-offset: -2px; }
+    .label { font-size: 12px; font-weight: 500; color: var(--stor-muted-text); }
+    .value {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: baseline;
+        column-gap: 0.5rem;
+        font-size: 22px;
+        font-weight: 600;
+        line-height: 1.25;
+        letter-spacing: -0.012em;
+        color: var(--stor-ink);
+        white-space: nowrap;
+        font-variant-numeric: tabular-nums;
+    }
+    .warn .value, .warn .sub { color: var(--stor-warning); }
+    .sub {
+        display: flex;
+        min-width: 0;
+        align-items: center;
+        gap: 0.25rem;
+        overflow: hidden;
+        font-family: var(--stor-font-mono);
+        font-size: 11.5px;
+        font-weight: 500;
+        color: var(--stor-muted-text);
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+    .floor-input {
+        width: 7ch;
+        padding: 0;
+        border: 0;
+        border-bottom: 1.5px dashed var(--stor-border);
+        border-radius: 0;
+        background: transparent;
+        font: inherit;
+        letter-spacing: inherit;
+        color: inherit;
+        outline: none;
+    }
+    .floor-input:focus { border-bottom-color: var(--stor-focus); }
+    @media (max-width: 1023px) {
+        .cell { padding: 0.625rem 0.875rem; }
+        .cell-button { padding: 0.625rem 0.875rem; }
+        .value { font-size: 18px; }
+    }
+    .label { display: flex; align-items: center; gap: 0.25rem; }
+    .label :global(.phone-only) { display: none; }
+    .sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); box-shadow: none; border: 1px solid color-mix(in srgb, var(--stor-border) 62%, transparent); }
+    .sheet .cell:nth-child(3) { border-left: 0; }
+    .sheet .extra { display: flex; border-top: 1px solid color-mix(in srgb, var(--stor-border) 62%, transparent); }
+    .sheet .label :global(.phone-only) { display: none; }
+    /* Phones keep the outlook to one short row: label and figure, the details once it is opened. */
+    @media (max-width: 639px) {
+        .readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+        .cell, .cell-button { gap: 0; padding: 0.4375rem 0.75rem 0.5rem; }
+        .label { font-size: 11px; line-height: 1.3; }
+        .label :global(.phone-only) { display: block; }
+        .value { font-size: 16px; line-height: 1.3; }
+        .sub { font-size: 11px; }
+        .readout:not(.open) .sub { display: none; }
+        .extra { display: none; }
+        .open .extra { display: flex; border-top: 1px solid color-mix(in srgb, var(--stor-border) 62%, transparent); }
+        .open .cell:nth-child(3) { border-left: 0; }
+        .open .cell:first-child .cell-button { border-radius: var(--stor-panel-radius) 0 0 0; }
+    }
+</style>

package/src/components/finance/MonthSection.svelte

@@ -0,0 +1,255 @@
+<script lang="ts">
+    import { format, parseISO } from "date-fns";
+    import type { TimelineRow } from "../../data/finance-timeline.js";
+    import { axisLabel, type TimelineShow } from "../../finance/timeline.js";
+    import { monthKeyOf } from "@hearthlog/sdk/axis";
+    import { formatAmount } from "@hearthlog/sdk/format";
+    import TimelineRowItem, { type BalanceTone, type RowLike } from "./TimelineRowItem.svelte";
+    import RiverSlice, { type RiverMark } from "./RiverSlice.svelte";
+    import type { MonthData } from "./timeline-months.svelte.js";
+
+    type Slice = { before: number; after: number; projected: boolean; mark: RiverMark; label: string; grid: boolean; below: boolean };
+    type RowEntry = { type: "row"; key: string; row: TimelineRow; divider: boolean; balance: number | null; tone: BalanceTone; slice: Slice };
+    type Entry = RowEntry | { type: "today"; key: string; slice: Slice };
+
+    let {
+        monthKey,
+        data,
+        today,
+        show,
+        domain,
+        floor,
+        available,
+        selectedIds,
+        busyId = null,
+        flashId = null,
+        hoveredId = null,
+        hoveredDate = null,
+        onSelect,
+        onEdit,
+        onMarkDone,
+        onRestore,
+        onDelete,
+        onHover,
+    }: {
+        monthKey: string;
+        data: MonthData | undefined;
+        today: string;
+        show: TimelineShow;
+        domain: [number, number];
+        floor: number;
+        available: number;
+        selectedIds: Set<string>;
+        busyId?: string | null;
+        flashId?: string | null;
+        hoveredId?: string | null;
+        hoveredDate?: string | null;
+        onSelect: (row: RowLike, selected: boolean) => void;
+        onEdit: (row: RowLike) => void;
+        onMarkDone: (row: RowLike) => void | Promise<void>;
+        onRestore: (row: RowLike) => void | Promise<void>;
+        onDelete: (row: RowLike) => void | Promise<void>;
+        onHover?: (row: RowLike | null) => void;
+    } = $props();
+
+    /**
+     * The balance line runs from the Today line through the plans; done rows
+     * never draw it. Months from today's on show balances; earlier months and
+     * done history show their flows.
+     */
+    const river = $derived(show !== "done");
+    const isTodayMonth = $derived(monthKey === monthKeyOf(today));
+    const afterToday = $derived(monthKey > monthKeyOf(today));
+    const balances = $derived(river && (isTodayMonth || afterToday));
+    const title = $derived(format(parseISO(`${monthKey}-01`), "MMMM yyyy"));
+
+    /** Lays out the SQL-ordered rows and carries the balance line through them. */
+    const layout = $derived.by<{ entries: Entry[]; last: number }>(() => {
+        if (!data) return { entries: [], last: 0 };
+        const result: Entry[] = [];
+        let todayPlaced = false;
+        let lastDate: string | null = null;
+        let current = data.stats.start;
+        const placeToday = () => {
+            if (todayPlaced || !isTodayMonth) return;
+            todayPlaced = true;
+            current = available;
+            result.push({ type: "today", key: "today", slice: { before: available, after: available, projected: false, mark: "today", label: "", grid: false, below: false } });
+            lastDate = null;
+        };
+        for (const row of data.rows) {
+            // Below Today: plans, and rows marked done ahead of their day.
+            const projected = row.section === 1;
+            if (projected) placeToday();
+            const after = row.balanceAfter ?? current;
+            const low = row.isLow && row.balanceAfter !== null;
+            const slice: Slice = {
+                before: current,
+                after,
+                projected,
+                mark: low ? "low" : "none",
+                label: low ? `Low ahead ${axisLabel(after)}` : "",
+                grid: projected,
+                below: low && after < floor,
+            };
+            current = after;
+            const entry: RowEntry = {
+                type: "row",
+                key: row.id,
+                row,
+                divider: row.firstOfDay && lastDate !== null,
+                balance: row.balanceAfter,
+                tone: low ? (after < floor ? "below" : "low") : "default",
+                slice,
+            };
+            lastDate = row.date;
+            result.push(entry);
+        }
+        placeToday();
+        return { entries: result, last: current };
+    });
+    const entries = $derived(layout.entries);
+
+    const empty = $derived(!!data && data.rows.length === 0 && !isTodayMonth);
+    const change = $derived(data ? data.stats.end - data.stats.start : 0);
+    const net = $derived(data ? data.stats.income + data.stats.expense : 0);
+</script>
+
+{#snippet slice(value: Slice, hot = false, income = false)}
+    <RiverSlice before={value.before} after={value.after} {domain} {floor} projected={value.projected} {income} {hot} mark={value.mark} label={value.label} grid={value.grid} below={value.below} />
+{/snippet}
+
+{#snippet rowView(entry: RowEntry)}
+    <TimelineRowItem
+        row={entry.row}
+        {today}
+        firstOfDay={entry.row.firstOfDay}
+        divider={entry.divider}
+        balance={entry.balance}
+        balanceTone={entry.tone}
+        selected={selectedIds.has(entry.row.id)}
+        busy={busyId === entry.row.id}
+        highlighted={hoveredDate === entry.row.date || hoveredId === entry.row.id}
+        flash={flashId === entry.row.id}
+        {onSelect}
+        {onEdit}
+        {onMarkDone}
+        {onRestore}
+        {onDelete}
+        {onHover}
+    >
+        {#snippet gutter()}{#if river && entry.slice.projected}{@render slice(entry.slice, hoveredId === entry.row.id, entry.row.amount > 0)}{/if}{/snippet}
+    </TimelineRowItem>
+{/snippet}
+
+<section class="month" class:empty aria-label={title}>
+    {#if river && afterToday && data}
+        <!-- The header sticks while its month scrolls; its piece of the line stays in place. -->
+        <div class="gutter head-gutter" data-river>
+            {@render slice({ before: data.stats.start, after: data.stats.start, projected: true, mark: empty ? "none" : "month", label: empty ? "" : formatAmount(data.stats.start), grid: true, below: false })}
+        </div>
+    {/if}
+    <header class="month-head" data-month-head>
+        <h3 class="stor-serif-title month-title">{title}</h3>
+        {#if !data}
+            <span class="month-stats" data-balance>Loading…</span>
+        {:else if empty}
+            <span class="month-stats" data-balance>No transactions{#if balances}{" · "}<b>{formatAmount(data.stats.end)}</b>{/if}</span>
+        {:else if !balances}
+            <span
+                data-balance
+                class="month-stats"
+                title={`In ${formatAmount(data.stats.income, { signed: true })} · Out ${formatAmount(data.stats.expense)} · Net ${formatAmount(net, { signed: true })}`}
+            >
+                <span class="hidden sm:inline">{formatAmount(data.stats.income, { signed: true })}{" · "}{formatAmount(data.stats.expense)}{" · "}</span><b class:income={net > 0}>{formatAmount(net, { signed: true })}</b>
+            </span>
+        {:else}
+            <span
+                data-balance
+                class="month-stats"
+                title={`Starts ${formatAmount(data.stats.start)} · In ${formatAmount(data.stats.income, { signed: true })} · Out ${formatAmount(data.stats.expense)} · Ends ${formatAmount(data.stats.end)}`}
+            >
+                <span class="hidden sm:inline">{formatAmount(data.stats.start)}{" → "}</span><b>{formatAmount(data.stats.end)}</b>{" "}<b class:income={change > 0}>({formatAmount(change, { signed: true })})</b>
+            </span>
+        {/if}
+    </header>
+
+    {#if !data}
+        <div class="placeholder" role="status" aria-label={`Loading ${title}`}>
+            {#each [0, 1, 2] as line (line)}<span class="motion-safe:animate-pulse"></span>{/each}
+        </div>
+    {:else}
+        {#each entries as entry (entry.key)}
+            {#if entry.type === "row"}
+                {@render rowView(entry)}
+            {:else}
+                <div class="today-line" data-today-line>
+                    {#if river}<div class="gutter" data-river>{@render slice(entry.slice)}</div>{/if}
+                    <span class="today-pill">Today · {format(parseISO(today), "EEE d MMM")}</span>
+                    <span class="today-rule" aria-hidden="true"></span>
+                    <span class="today-available" data-balance><b>{formatAmount(available)}</b><span class="hidden sm:inline">{" "}available</span></span>
+                </div>
+            {/if}
+        {/each}
+        {#if !empty}
+            <div class="tail" aria-hidden="true">
+                {#if balances}<div class="gutter" data-river>{@render slice({ before: layout.last, after: data.stats.end, projected: true, mark: "none", label: "", grid: true, below: false })}</div>{/if}
+            </div>
+        {/if}
+    {/if}
+</section>
+
+<style>
+    .month { position: relative; }
+    .tail { position: relative; height: 0.75rem; }
+    .gutter { position: absolute; top: 0; bottom: 0; left: 0; width: var(--river, 0px); }
+    .month-head {
+        --head: 3rem;
+        position: sticky;
+        top: 0;
+        z-index: 2;
+        display: flex;
+        height: var(--head);
+        align-items: baseline;
+        gap: 0.75rem;
+        margin: 0;
+        padding: 1.125rem 0.75rem 0 calc(var(--river, 0px) + 0.75rem);
+        background: linear-gradient(to right, transparent var(--river, 0px), var(--stor-surface) var(--river, 0px));
+    }
+    .head-gutter { bottom: auto; height: 3rem; }
+    .empty .head-gutter { height: 2.25rem; }
+    .month-head::after {
+        content: "";
+        position: absolute;
+        right: 0.5rem;
+        bottom: 0;
+        left: calc(var(--river, 0px) + 0.75rem);
+        border-bottom: 1px solid color-mix(in srgb, var(--stor-border) 62%, transparent);
+    }
+    .empty .month-head { --head: 2.25rem; position: relative; padding-top: 0.625rem; background: transparent; }
+    .empty .month-head::after { display: none; }
+    .empty .month-title { font-size: 14px; color: var(--stor-muted-text); }
+    .month-title { margin: 0; font-size: 17px; line-height: 1.3; color: var(--stor-ink); white-space: nowrap; }
+    .month-stats { margin-left: auto; font-family: var(--stor-font-mono); font-size: 11.5px; font-weight: 500; color: var(--stor-muted-text); white-space: nowrap; }
+    .month-stats b { font-weight: 600; color: var(--stor-ink); }
+    .month-stats b.income { color: var(--stor-positive); }
+    .placeholder { display: flex; min-height: 21rem; flex-direction: column; gap: 0.625rem; padding: 0.75rem 0.75rem 1rem calc(var(--river, 0px) + 0.75rem); }
+    .placeholder span { height: 1.5rem; border-radius: 8px; background: var(--stor-surface-muted); }
+    .today-line {
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: 0.625rem;
+        height: 2.75rem;
+        padding: 0 0.75rem 0 calc(var(--river, 0px) + 0.75rem);
+    }
+    .today-pill { flex: none; padding: 3px 9px; border-radius: 999px; background: var(--stor-action); color: var(--stor-action-text); font-size: 11.5px; font-weight: 600; }
+    .today-rule { flex: 1; height: 1.5px; background: var(--stor-action); opacity: 0.85; }
+    .today-available { flex: none; font-family: var(--stor-font-mono); font-size: 11.5px; font-weight: 500; color: var(--stor-muted-text); }
+    .today-available b { font-weight: 600; color: var(--stor-ink); }
+    /* Phones name the month in the toolbar above the list, so headers here only divide months. */
+    @media (max-width: 767px) {
+        .month-head { --head: 2.25rem; position: relative; padding-top: 0.875rem; }
+        .month-title { font-family: var(--stor-font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stor-muted-text); }
+    }
+</style>

package/src/components/finance/RiverSlice.svelte

@@ -0,0 +1,125 @@
+<script module lang="ts">
+    /** What the slice marks at its centre. */
+    export type RiverMark = "none" | "month" | "low" | "today";
+</script>
+
+<script lang="ts">
+    import { axisLabel, niceTicks } from "../../finance/timeline.js";
+    import { formatAmount } from "@hearthlog/sdk/format";
+
+    let {
+        before,
+        after = before,
+        domain,
+        floor,
+        projected = false,
+        income = false,
+        hot = false,
+        mark = "none",
+        below = false,
+        label = "",
+        grid = false,
+    }: {
+        /** Balance entering the slice at its top edge. */
+        before: number;
+        /** Balance leaving at its bottom edge; the step happens at the centre. */
+        after?: number;
+        /** One fixed scale for the whole timeline. */
+        domain: [number, number];
+        floor: number;
+        /** Plans are a dashed projection; records are solid. */
+        projected?: boolean;
+        income?: boolean;
+        /** The row is hovered: highlight the step and show before → after. */
+        hot?: boolean;
+        mark?: RiverMark;
+        /** The lowest point is under the floor. */
+        below?: boolean;
+        label?: string;
+        /** Faint scale lines, used from Today on. */
+        grid?: boolean;
+    } = $props();
+
+    /** Percent across the gutter, with a little air on both sides. */
+    function x(value: number): number {
+        const [lo, hi] = domain;
+        const ratio = (value - lo) / (hi - lo || 1);
+        return Math.max(0.5, Math.min(99.5, 4 + ratio * 92));
+    }
+
+    const xb = $derived(x(before));
+    const xa = $derived(x(after));
+    const steps = $derived(Math.abs(xa - xb) > 0.05);
+    const floorX = $derived(floor > domain[0] && floor < domain[1] ? x(floor) : null);
+    const ticks = $derived(grid || mark === "today" ? niceTicks(domain[0], domain[1], 3).map((value) => ({ value, x: x(value) })) : []);
+    const markX = $derived(mark === "today" || mark === "month" ? xb : xa);
+    const labelRight = $derived(markX < 58);
+</script>
+
+<div class="slice" class:hot aria-hidden="true">
+    <svg viewBox="0 0 100 100" preserveAspectRatio="none">
+        {#if grid}
+            {#each ticks as tick (tick.value)}<line class="grid" x1={tick.x} x2={tick.x} y1="0" y2="100" vector-effect="non-scaling-stroke" />{/each}
+        {/if}
+        {#if floorX !== null && (grid || projected)}
+            <line class="floor" x1={floorX} x2={floorX} y1="0" y2="100" vector-effect="non-scaling-stroke" />
+        {/if}
+        <polygon class="area" points={`0,0 ${xb},0 ${xb},50 ${xa},50 ${xa},100 0,100`} />
+        <path class="line" class:projected d={`M${xb},0 V50 H${xa} V100`} vector-effect="non-scaling-stroke" />
+        {#if steps}
+            <line class="jog" class:income x1={xb} x2={xa} y1="50" y2="50" vector-effect="non-scaling-stroke" />
+        {/if}
+        {#if mark === "today"}
+            <line class="today" x1="0" x2="100" y1="50" y2="50" vector-effect="non-scaling-stroke" />
+        {/if}
+    </svg>
+    {#if mark === "today"}
+        {#each ticks as tick (tick.value)}<span class="tick" style:left={`${tick.x}%`}>{axisLabel(tick.value)}</span>{/each}
+    {/if}
+    {#if mark !== "none"}
+        <span class="dot {mark}" class:below style:left={`${markX}%`}></span>
+    {/if}
+    {#if label}
+        <span class="label" class:low={mark === "low"} class:below class:right={labelRight} style:left={`${markX}%`}>{label}</span>
+    {/if}
+    {#if hot && steps}
+        <span class="hover" style:left={`${Math.min(70, Math.max(30, (xb + xa) / 2))}%`}>{formatAmount(before)} → {formatAmount(after)}</span>
+    {/if}
+</div>
+
+<style>
+    .slice { position: absolute; inset: 0; container-type: inline-size; pointer-events: none; }
+    svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
+    .grid { stroke: color-mix(in srgb, var(--stor-border) 62%, transparent); stroke-width: 1; }
+    .floor { stroke: var(--stor-warning); stroke-width: 1; stroke-dasharray: 4 3; }
+    .area { fill: color-mix(in srgb, var(--stor-ink) 6%, transparent); }
+    .line { fill: none; stroke: var(--stor-ink); stroke-width: 1.25; }
+    .line.projected { stroke-dasharray: 4 3; }
+    .jog { stroke: var(--stor-ink); stroke-width: 2.5; stroke-linecap: round; }
+    .jog.income { stroke: var(--stor-positive); }
+    .hot .jog { stroke: var(--stor-action); stroke-width: 4; }
+    .today { stroke: var(--stor-action); stroke-width: 1.5; opacity: 0.85; }
+    .dot { position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--stor-ink); }
+    .dot.low { width: 9px; height: 9px; border: 2px solid var(--stor-ink); background: var(--stor-surface); }
+    .dot.low.below { border-color: var(--stor-warning); }
+    .dot.today { width: 9px; height: 9px; border: 2px solid var(--stor-action); background: var(--stor-surface); }
+    .label, .tick, .hover { position: absolute; font-family: var(--stor-font-mono); font-size: 10px; font-weight: 600; line-height: 1; white-space: nowrap; }
+    .label { top: 50%; color: var(--stor-ink); transform: translate(calc(-100% - 7px), -50%); }
+    .label.right { transform: translate(7px, -50%); }
+    .label.low { top: calc(50% + 12px); }
+    .label.below { color: var(--stor-warning); }
+    .tick { top: calc(50% - 16px); color: var(--stor-muted-text); font-size: 9.5px; font-weight: 500; transform: translateX(-50%); }
+    .hover {
+        top: calc(50% - 22px);
+        z-index: 1;
+        padding: 3px 6px;
+        border-radius: 5px;
+        background: var(--stor-surface-raised);
+        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stor-border) 80%, transparent);
+        color: var(--stor-ink);
+        transform: translateX(-50%);
+    }
+    @container (max-width: 90px) {
+        .label, .tick, .hover { display: none; }
+    }
+</style>