@marianmeres/stuic 3.168.0 → 3.170.0

package/dist/components/Timeline/Timeline.svelte

@@ -0,0 +1,246 @@
+<script lang="ts" module>
+	import type { HTMLOlAttributes } from "svelte/elements";
+	import type { Snippet } from "svelte";
+	import type { THC } from "../Thc/Thc.svelte";
+	import type { IntentColorKey } from "../../utils/design-tokens.js";
+
+	/** Which side of the rail the content sits on */
+	export type TimelineAlign = "start" | "alternate";
+
+	/** Where the time label renders */
+	export type TimelineTimePosition = "inline" | "opposite";
+
+	/** What the marker renders as (`data-marker` on the marker element) */
+	export type TimelineMarkerKind = "dot" | "icon" | "custom";
+
+	export interface TimelineItem {
+		/** Primary line (the event) */
+		title?: THC;
+		/** Secondary text under the title */
+		description?: THC;
+		/**
+		 * Time label, preformatted ("2 hours ago", "Sep 1, 14:32"). When omitted and
+		 * `datetime` is set, the component's `formatTime` (if any) produces it.
+		 */
+		time?: THC;
+		/**
+		 * Machine-readable timestamp — renders the label as `<time datetime="…">`
+		 * (a `Date` is serialized to ISO 8601). Never displayed on its own.
+		 */
+		datetime?: string | Date;
+		/**
+		 * Marker content (typically `{ html: iconCheck() }`). Its presence switches the
+		 * marker from the small dot to the icon bubble.
+		 */
+		icon?: THC;
+		/** Semantic marker color (dot fill, or the bubble's soft tint) */
+		intent?: IntentColorKey;
+		/** When set, the title renders as a link */
+		href?: string;
+	}
+
+	export interface TimelineSnippetArg {
+		item: TimelineItem;
+		index: number;
+	}
+
+	export interface Props extends Omit<HTMLOlAttributes, "children"> {
+		/** The events, in the order they should appear (sort them yourself) */
+		items: TimelineItem[];
+		/**
+		 * `"start"` (default): rail on the start side, content after it.
+		 * `"alternate"`: centered rail, content alternating sides (history pages).
+		 */
+		align?: TimelineAlign;
+		/**
+		 * `"inline"` (default): the time label above the title, inside the content.
+		 * `"opposite"`: its own column on the other side of the rail (audit-log look).
+		 */
+		timePosition?: TimelineTimePosition;
+		/**
+		 * Fallback formatter for items that have `datetime` but no `time`. Return
+		 * value is THC, so a plain string is fine.
+		 */
+		formatTime?: (datetime: string | Date, item: TimelineItem) => THC;
+		/** Override the marker content entirely (avatars, badges…) */
+		renderMarker?: Snippet<[TimelineSnippetArg]>;
+		/** Override the whole content cell (time, title, description, footer) */
+		renderItem?: Snippet<[TimelineSnippetArg]>;
+		/** Per-item footer area below the description (actions, attachments…) */
+		renderFooter?: Snippet<[TimelineSnippetArg]>;
+		/** Skip all default styling */
+		unstyled?: boolean;
+		/** Additional CSS classes */
+		class?: string;
+		/** Class for every item (`li`) */
+		classItem?: string;
+		/** Class for the marker */
+		classMarker?: string;
+		/** Class for the content cell */
+		classContent?: string;
+		/** Class for the time label (inline or opposite) */
+		classTime?: string;
+		/** Class for the title */
+		classTitle?: string;
+		/** Class for the description */
+		classDescription?: string;
+		/** Class for the footer area */
+		classFooter?: string;
+		/** Bindable element reference */
+		el?: HTMLOListElement;
+	}
+</script>
+
+<script lang="ts">
+	import { twMerge } from "../../utils/tw-merge.js";
+	import Thc from "../Thc/Thc.svelte";
+
+	let {
+		items,
+		align = "start",
+		timePosition = "inline",
+		formatTime,
+		renderMarker,
+		renderItem,
+		renderFooter,
+		unstyled = false,
+		class: classProp,
+		classItem: classItemProp,
+		classMarker: classMarkerProp,
+		classContent: classContentProp,
+		classTime: classTimeProp,
+		classTitle: classTitleProp,
+		classDescription: classDescriptionProp,
+		classFooter: classFooterProp,
+		el = $bindable(),
+		...rest
+	}: Props = $props();
+
+	let _class = $derived(unstyled ? classProp : twMerge("stuic-timeline", classProp));
+	let _classItem = $derived(
+		unstyled ? classItemProp : twMerge("stuic-timeline-item", classItemProp)
+	);
+	let _classMarker = $derived(
+		unstyled ? classMarkerProp : twMerge("stuic-timeline-marker", classMarkerProp)
+	);
+	let _classContent = $derived(
+		unstyled ? classContentProp : twMerge("stuic-timeline-content", classContentProp)
+	);
+	let _classTime = $derived(
+		unstyled ? classTimeProp : twMerge("stuic-timeline-time", classTimeProp)
+	);
+	let _classTitle = $derived(
+		unstyled ? classTitleProp : twMerge("stuic-timeline-title", classTitleProp)
+	);
+	let _classDescription = $derived(
+		unstyled
+			? classDescriptionProp
+			: twMerge("stuic-timeline-description", classDescriptionProp)
+	);
+	let _classFooter = $derived(
+		unstyled ? classFooterProp : twMerge("stuic-timeline-footer", classFooterProp)
+	);
+
+	function markerKind(item: TimelineItem): TimelineMarkerKind {
+		if (renderMarker) return "custom";
+		if (item.icon) return "icon";
+		return "dot";
+	}
+
+	function timeLabel(item: TimelineItem): THC | undefined {
+		if (item.time !== undefined && item.time !== null && item.time !== "")
+			return item.time;
+		if (item.datetime !== undefined && formatTime) return formatTime(item.datetime, item);
+		return undefined;
+	}
+
+	function datetimeAttr(item: TimelineItem): string | undefined {
+		if (item.datetime === undefined) return undefined;
+		return item.datetime instanceof Date ? item.datetime.toISOString() : item.datetime;
+	}
+</script>
+
+{#snippet timeEl(item: TimelineItem, label: THC)}
+	{@const datetime = datetimeAttr(item)}
+	<!-- <time> only when it can carry a machine-readable value -->
+	<svelte:element this={datetime ? "time" : "span"} class={_classTime} {datetime}>
+		<Thc thc={label} />
+	</svelte:element>
+{/snippet}
+
+{#if items.length}
+	<!-- svelte-ignore a11y_no_redundant_roles -->
+	<ol
+		bind:this={el}
+		class={_class}
+		role="list"
+		data-align={!unstyled ? align : undefined}
+		data-time-position={!unstyled ? timePosition : undefined}
+		{...rest}
+	>
+		{#each items as item, index (index)}
+			{@const label = timeLabel(item)}
+			{@const kind = markerKind(item)}
+			<li
+				class={_classItem}
+				data-intent={!unstyled && item.intent ? item.intent : undefined}
+			>
+				{#if timePosition === "opposite"}
+					<div class={unstyled ? undefined : "stuic-timeline-opposite"}>
+						{#if label !== undefined}
+							{@render timeEl(item, label)}
+						{/if}
+					</div>
+				{/if}
+
+				<div class={unstyled ? undefined : "stuic-timeline-rail"}>
+					<span
+						class={_classMarker}
+						data-marker={!unstyled ? kind : undefined}
+						aria-hidden="true"
+					>
+						{#if renderMarker}
+							{@render renderMarker({ item, index })}
+						{:else if item.icon}
+							<Thc thc={item.icon} />
+						{/if}
+					</span>
+				</div>
+
+				<div class={_classContent}>
+					{#if renderItem}
+						{@render renderItem({ item, index })}
+					{:else}
+						{#if timePosition === "inline" && label !== undefined}
+							{@render timeEl(item, label)}
+						{/if}
+						{#if item.title}
+							<div class={_classTitle}>
+								{#if item.href}
+									<a
+										href={item.href}
+										class={unstyled ? undefined : "stuic-timeline-link"}
+									>
+										<Thc thc={item.title} />
+									</a>
+								{:else}
+									<Thc thc={item.title} />
+								{/if}
+							</div>
+						{/if}
+						{#if item.description}
+							<div class={_classDescription}>
+								<Thc thc={item.description} />
+							</div>
+						{/if}
+						{#if renderFooter}
+							<div class={_classFooter}>
+								{@render renderFooter({ item, index })}
+							</div>
+						{/if}
+					{/if}
+				</div>
+			</li>
+		{/each}
+	</ol>
+{/if}

package/dist/components/Timeline/Timeline.svelte.d.ts

@@ -0,0 +1,87 @@
+import type { HTMLOlAttributes } from "svelte/elements";
+import type { Snippet } from "svelte";
+import type { THC } from "../Thc/Thc.svelte";
+import type { IntentColorKey } from "../../utils/design-tokens.js";
+/** Which side of the rail the content sits on */
+export type TimelineAlign = "start" | "alternate";
+/** Where the time label renders */
+export type TimelineTimePosition = "inline" | "opposite";
+/** What the marker renders as (`data-marker` on the marker element) */
+export type TimelineMarkerKind = "dot" | "icon" | "custom";
+export interface TimelineItem {
+    /** Primary line (the event) */
+    title?: THC;
+    /** Secondary text under the title */
+    description?: THC;
+    /**
+     * Time label, preformatted ("2 hours ago", "Sep 1, 14:32"). When omitted and
+     * `datetime` is set, the component's `formatTime` (if any) produces it.
+     */
+    time?: THC;
+    /**
+     * Machine-readable timestamp — renders the label as `<time datetime="…">`
+     * (a `Date` is serialized to ISO 8601). Never displayed on its own.
+     */
+    datetime?: string | Date;
+    /**
+     * Marker content (typically `{ html: iconCheck() }`). Its presence switches the
+     * marker from the small dot to the icon bubble.
+     */
+    icon?: THC;
+    /** Semantic marker color (dot fill, or the bubble's soft tint) */
+    intent?: IntentColorKey;
+    /** When set, the title renders as a link */
+    href?: string;
+}
+export interface TimelineSnippetArg {
+    item: TimelineItem;
+    index: number;
+}
+export interface Props extends Omit<HTMLOlAttributes, "children"> {
+    /** The events, in the order they should appear (sort them yourself) */
+    items: TimelineItem[];
+    /**
+     * `"start"` (default): rail on the start side, content after it.
+     * `"alternate"`: centered rail, content alternating sides (history pages).
+     */
+    align?: TimelineAlign;
+    /**
+     * `"inline"` (default): the time label above the title, inside the content.
+     * `"opposite"`: its own column on the other side of the rail (audit-log look).
+     */
+    timePosition?: TimelineTimePosition;
+    /**
+     * Fallback formatter for items that have `datetime` but no `time`. Return
+     * value is THC, so a plain string is fine.
+     */
+    formatTime?: (datetime: string | Date, item: TimelineItem) => THC;
+    /** Override the marker content entirely (avatars, badges…) */
+    renderMarker?: Snippet<[TimelineSnippetArg]>;
+    /** Override the whole content cell (time, title, description, footer) */
+    renderItem?: Snippet<[TimelineSnippetArg]>;
+    /** Per-item footer area below the description (actions, attachments…) */
+    renderFooter?: Snippet<[TimelineSnippetArg]>;
+    /** Skip all default styling */
+    unstyled?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+    /** Class for every item (`li`) */
+    classItem?: string;
+    /** Class for the marker */
+    classMarker?: string;
+    /** Class for the content cell */
+    classContent?: string;
+    /** Class for the time label (inline or opposite) */
+    classTime?: string;
+    /** Class for the title */
+    classTitle?: string;
+    /** Class for the description */
+    classDescription?: string;
+    /** Class for the footer area */
+    classFooter?: string;
+    /** Bindable element reference */
+    el?: HTMLOListElement;
+}
+declare const Timeline: import("svelte").Component<Props, {}, "el">;
+type Timeline = ReturnType<typeof Timeline>;
+export default Timeline;

package/dist/components/Timeline/index.css

@@ -0,0 +1,311 @@
+/* ============================================================================
+   TIMELINE COMPONENT TOKENS
+   Override globally: :root { --stuic-timeline-marker-size: 1rem; }
+   Override locally:  <Timeline style="--stuic-timeline-gap-vertical: 1rem;">
+   ============================================================================ */
+
+/* prettier-ignore */
+:root {
+	/* Layout */
+	--stuic-timeline-gap: 1rem;                /* column gap: opposite ↔ rail ↔ content */
+	--stuic-timeline-gap-vertical: 1.5rem;     /* distance between items */
+	--stuic-timeline-line-height: 1.5rem;      /* first-line box the marker centers on */
+
+	/* Connector (the vertical rail line) */
+	--stuic-timeline-connector-thickness: 2px;
+	--stuic-timeline-connector-bg: var(--stuic-color-border);
+
+	/* Marker: dot (no icon) */
+	--stuic-timeline-marker-size: 0.75rem;
+	--stuic-timeline-marker-bg: var(--stuic-color-muted-foreground);
+
+	/* Marker: icon bubble (item.icon) and custom (renderMarker) */
+	--stuic-timeline-marker-size-icon: 2rem;
+	--stuic-timeline-marker-bg-icon: var(--stuic-color-muted);
+	--stuic-timeline-marker-text-icon: var(--stuic-color-muted-foreground);
+	--stuic-timeline-marker-icon-size: 1rem;   /* svg inside the bubble */
+
+	/* Marker ring: separates the marker from the line running behind it */
+	--stuic-timeline-marker-ring-width: 2px;
+	--stuic-timeline-marker-ring-color: var(--stuic-color-background);
+
+	/* Time */
+	--stuic-timeline-time-font-size: var(--text-sm);
+	--stuic-timeline-time-text: var(--stuic-color-muted-foreground);
+
+	/* Title */
+	--stuic-timeline-title-font-size: var(--text-base);
+	--stuic-timeline-title-font-weight: var(--font-weight-medium);
+	--stuic-timeline-title-text: var(--stuic-color-foreground);
+
+	/* Description */
+	--stuic-timeline-description-font-size: var(--text-sm);
+	--stuic-timeline-description-text: var(--stuic-color-muted-foreground);
+	--stuic-timeline-description-margin-top: 0.125rem;
+
+	/* Footer */
+	--stuic-timeline-footer-gap: 0.5rem;
+	--stuic-timeline-footer-margin-top: 0.5rem;
+}
+
+@layer components {
+	/* ============================================================================
+	   BASE — the list is a grid; every item is a subgrid row, so the rail (and
+	   the opposite time column) line up across items regardless of content.
+	   ============================================================================ */
+
+	.stuic-timeline {
+		display: grid;
+		column-gap: var(--stuic-timeline-gap);
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+
+	.stuic-timeline[data-align="start"][data-time-position="inline"] {
+		grid-template-columns: auto minmax(0, 1fr);
+	}
+
+	.stuic-timeline[data-align="start"][data-time-position="opposite"] {
+		grid-template-columns: auto auto minmax(0, 1fr);
+	}
+
+	.stuic-timeline[data-align="alternate"] {
+		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+	}
+
+	.stuic-timeline-item {
+		display: grid;
+		grid-column: 1 / -1;
+		grid-template-columns: subgrid;
+		padding-bottom: var(--stuic-timeline-gap-vertical);
+	}
+
+	.stuic-timeline-item:last-child {
+		padding-bottom: 0;
+	}
+
+	/* every cell sits on the item's single row; columns are assigned below */
+	.stuic-timeline-opposite,
+	.stuic-timeline-rail,
+	.stuic-timeline-content {
+		grid-row: 1;
+		min-width: 0;
+	}
+
+	/* ============================================================================
+	   COLUMN PLACEMENT
+	   ============================================================================ */
+
+	/* start + inline: rail | content */
+	.stuic-timeline[data-align="start"][data-time-position="inline"] .stuic-timeline-rail {
+		grid-column: 1;
+	}
+	.stuic-timeline[data-align="start"][data-time-position="inline"]
+		.stuic-timeline-content {
+		grid-column: 2;
+	}
+
+	/* start + opposite: time | rail | content */
+	.stuic-timeline[data-align="start"][data-time-position="opposite"]
+		.stuic-timeline-opposite {
+		grid-column: 1;
+		text-align: end;
+	}
+	.stuic-timeline[data-align="start"][data-time-position="opposite"]
+		.stuic-timeline-rail {
+		grid-column: 2;
+	}
+	.stuic-timeline[data-align="start"][data-time-position="opposite"]
+		.stuic-timeline-content {
+		grid-column: 3;
+	}
+
+	/* alternate: centered rail; odd items → content end side, even → start side */
+	.stuic-timeline[data-align="alternate"] .stuic-timeline-rail {
+		grid-column: 2;
+	}
+	.stuic-timeline[data-align="alternate"]
+		.stuic-timeline-item:nth-child(odd)
+		.stuic-timeline-content {
+		grid-column: 3;
+	}
+	.stuic-timeline[data-align="alternate"]
+		.stuic-timeline-item:nth-child(odd)
+		.stuic-timeline-opposite {
+		grid-column: 1;
+		text-align: end;
+	}
+	.stuic-timeline[data-align="alternate"]
+		.stuic-timeline-item:nth-child(even)
+		.stuic-timeline-content {
+		grid-column: 1;
+		text-align: end;
+	}
+	.stuic-timeline[data-align="alternate"]
+		.stuic-timeline-item:nth-child(even)
+		.stuic-timeline-opposite {
+		grid-column: 3;
+	}
+	.stuic-timeline[data-align="alternate"]
+		.stuic-timeline-item:nth-child(even)
+		.stuic-timeline-footer {
+		justify-content: flex-end;
+	}
+
+	/* ============================================================================
+	   RAIL + CONNECTOR
+	   The line runs behind the marker in two halves (top → marker center, marker
+	   center → bottom) so no item needs to know its neighbour's marker size. The
+	   marker's center is always at half the first-line height.
+	   ============================================================================ */
+
+	.stuic-timeline-rail {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.stuic-timeline-rail::before,
+	.stuic-timeline-rail::after {
+		content: "";
+		position: absolute;
+		left: 50%;
+		width: var(--stuic-timeline-connector-thickness);
+		transform: translateX(-50%);
+		background: var(--stuic-timeline-connector-bg);
+	}
+
+	.stuic-timeline-rail::before {
+		top: 0;
+		height: calc(var(--stuic-timeline-line-height) / 2);
+	}
+
+	/* the item's bottom padding (gap-vertical) lies outside the grid row, so reach
+	   through it — the next item's ::before picks the line up at its top edge */
+	.stuic-timeline-rail::after {
+		top: calc(var(--stuic-timeline-line-height) / 2);
+		bottom: calc(-1 * var(--stuic-timeline-gap-vertical));
+	}
+
+	.stuic-timeline-item:first-child .stuic-timeline-rail::before,
+	.stuic-timeline-item:last-child .stuic-timeline-rail::after {
+		display: none;
+	}
+
+	/* ============================================================================
+	   MARKER
+	   ============================================================================ */
+
+	.stuic-timeline-marker {
+		position: relative;
+		z-index: 1;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		box-sizing: border-box;
+		width: var(--_marker-size);
+		height: var(--_marker-size);
+		/* center on the first line of the content (may go negative for big markers) */
+		margin-top: calc((var(--stuic-timeline-line-height) - var(--_marker-size)) / 2);
+		border-radius: var(--stuic-timeline-marker-radius, calc(infinity * 1px));
+		box-shadow: 0 0 0 var(--stuic-timeline-marker-ring-width)
+			var(--stuic-timeline-marker-ring-color);
+	}
+
+	.stuic-timeline-marker[data-marker="dot"] {
+		--_marker-size: var(--stuic-timeline-marker-size);
+		background: var(--stuic-timeline-marker-bg);
+	}
+
+	.stuic-timeline-marker[data-marker="icon"] {
+		--_marker-size: var(--stuic-timeline-marker-size-icon);
+		background: var(--stuic-timeline-marker-bg-icon);
+		color: var(--stuic-timeline-marker-text-icon);
+	}
+
+	.stuic-timeline-marker[data-marker="icon"] svg {
+		display: block;
+		width: var(--stuic-timeline-marker-icon-size);
+		height: var(--stuic-timeline-marker-icon-size);
+	}
+
+	/* custom (renderMarker): only the box — the snippet brings its own look */
+	.stuic-timeline-marker[data-marker="custom"] {
+		--_marker-size: var(--stuic-timeline-marker-size-icon);
+	}
+
+	/* ============================================================================
+	   INTENT — dot fills with the color, the bubble takes a soft tint
+	   ============================================================================ */
+
+	.stuic-timeline-item[data-intent="primary"] {
+		--_intent: var(--stuic-color-primary);
+	}
+	.stuic-timeline-item[data-intent="accent"] {
+		--_intent: var(--stuic-color-accent);
+	}
+	.stuic-timeline-item[data-intent="destructive"] {
+		--_intent: var(--stuic-color-destructive);
+	}
+	.stuic-timeline-item[data-intent="warning"] {
+		--_intent: var(--stuic-color-warning);
+	}
+	.stuic-timeline-item[data-intent="success"] {
+		--_intent: var(--stuic-color-success);
+	}
+
+	.stuic-timeline-item[data-intent] .stuic-timeline-marker[data-marker="dot"] {
+		background: var(--_intent);
+	}
+
+	.stuic-timeline-item[data-intent] .stuic-timeline-marker[data-marker="icon"] {
+		background: color-mix(in srgb, var(--_intent) 15%, var(--stuic-color-background));
+		color: var(--_intent);
+	}
+
+	/* ============================================================================
+	   CONTENT: time, title, description, footer
+	   ============================================================================ */
+
+	.stuic-timeline-time {
+		display: block;
+		font-size: var(--stuic-timeline-time-font-size);
+		line-height: var(--stuic-timeline-line-height);
+		color: var(--stuic-timeline-time-text);
+	}
+
+	.stuic-timeline-title {
+		font-size: var(--stuic-timeline-title-font-size);
+		font-weight: var(--stuic-timeline-title-font-weight);
+		line-height: var(--stuic-timeline-line-height);
+		color: var(--stuic-timeline-title-text);
+		overflow-wrap: anywhere;
+	}
+
+	.stuic-timeline-link {
+		color: inherit;
+		text-decoration: none;
+	}
+
+	.stuic-timeline-link:hover {
+		text-decoration: underline;
+	}
+
+	.stuic-timeline-description {
+		margin-top: var(--stuic-timeline-description-margin-top);
+		font-size: var(--stuic-timeline-description-font-size);
+		color: var(--stuic-timeline-description-text);
+		overflow-wrap: anywhere;
+	}
+
+	.stuic-timeline-footer {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: var(--stuic-timeline-footer-gap);
+		margin-top: var(--stuic-timeline-footer-margin-top);
+	}
+}

package/dist/components/Timeline/index.d.ts

@@ -0,0 +1 @@
+export { default as Timeline, type Props as TimelineProps, type TimelineItem, type TimelineAlign, type TimelineTimePosition, type TimelineMarkerKind, type TimelineSnippetArg, } from "./Timeline.svelte";

package/dist/components/Timeline/index.js

@@ -0,0 +1 @@
+export { default as Timeline, } from "./Timeline.svelte";

package/dist/index.css

@@ -112,6 +112,7 @@ In practice:
 @import "./components/Switch/index.css";
 @import "./components/TabbedMenu/index.css";
 @import "./components/ThemePreview/index.css";
+@import "./components/Timeline/index.css";
 @import "./components/Tree/index.css";
 @import "./components/TwCheck/index.css";
 @import "./components/UserAvatarMenu/index.css";

package/dist/index.d.ts

@@ -84,6 +84,7 @@ export * from "./components/Switch/index.js";
 export * from "./components/TabbedMenu/index.js";
 export * from "./components/Thc/index.js";
 export * from "./components/ThemePreview/index.js";
+export * from "./components/Timeline/index.js";
 export * from "./components/Tree/index.js";
 export * from "./components/TwCheck/index.js";
 export * from "./components/TypeaheadInput/index.js";

package/dist/index.js

@@ -90,6 +90,7 @@ export * from "./components/Switch/index.js";
 export * from "./components/TabbedMenu/index.js";
 export * from "./components/Thc/index.js";
 export * from "./components/ThemePreview/index.js";
+export * from "./components/Timeline/index.js";
 // NOTE: TrendChart is deliberately NOT exported here. It statically imports the
 // optional @marianmeres/trend-chart peer, which would then be pulled into the
 // root entry graph of every consumer. It ships as the `@marianmeres/stuic/trend-chart`