@ac-design/design-system 1.0.3 → 2.0.0

package/README.md

@@ -14,7 +14,7 @@ npm run dev          # docs site at http://localhost:5173
 | | |
 | --- | --- |
 | **Theme** | `src/lib/theme.css`: colour scales, semantic tokens (text, borders, surfaces), type scale, radii, shadows and a full dark theme, as a Tailwind `@theme`. |
-| **Components** | 73 Vue components (counting sub-parts) in eight groups, listed below. |
+| **Components** | 85 Vue components plus 2 editors and 4 charts (counting sub-parts) in eight groups, listed below. |
 | **Editors** | `AcCodeEditor` and `AcFileEditor` on CodeMirror 6, in a separate entry so other apps don't bundle CodeMirror. |
 | **Composables** | `useColorMode()` (light/dark/system), `useToast()` (notifications), `useBrandColor()` (re-hue the brand at runtime). |
 | **Logo** | `AcLogo`: the AppsCode logo and mark as inline SVG that follows dark mode. |
@@ -24,29 +24,36 @@ npm run dev          # docs site at http://localhost:5173
 
 | Group | Components |
 | --- | --- |
-| Element | Button, Button Group, Badge, Tag, Avatar, Alert, Banner, Card, Divider, Kbd |
-| Feedback | Spinner, Preloader, Skeleton, Progress, Toast, Empty State |
-| Form | Input, Textarea, Code Editor, File Editor, Select, CheckBox, CheckRadio, Switch, Search Bar, File Upload, Slider, Date Picker, Form, Form Array, Theme Mode |
-| Overlay | Modal, Delete Modal, Side Panel, Dropdown, Tooltip |
-| Layout | Sidebar, Navbar, Header, Content Table, Section, Accordion, Status Bar |
-| Navigation | Breadcrumb, Tabs, Steps, Pagination, Side Tabs, App Switcher, Cluster Switcher, Notifications |
-| Data | Table, Info Table, Cell Value |
+| Element | Button, Button Group, Badge, Tag, Avatar, Alert, Banner, Card, Divider, Kbd, Copy Button |
+| Feedback | Spinner, Preloader, Skeleton, Progress, Circular Progress, Toast, Empty State |
+| Form | Input, Number Input, Tag Input, Key-Value Input, Textarea, Code Editor, File Editor, Select, CheckBox, CheckRadio, Switch, Switch Card, Search Bar, File Upload, Slider, Date Picker, Time Picker, Color Input, Form, Form Array, Theme Mode |
+| Overlay | Modal, Confirm Modal, Delete Modal, Side Panel, Dropdown, Tooltip |
+| Layout | Sidebar, Navbar, Header, Content Table, Section, Accordion, Status Bar, Footer |
+| Navigation | Breadcrumb, Tabs, Steps, Pagination, Side Tabs, App Switcher, Cluster Switcher, Notifications, Locale Switcher |
+| Data | Table, Bulk Action Bar, Info Table, Cell Value |
 | Cards | Stat Card, Feature Card, Resource Card, Usage Card |
+| Charts (`/charts`) | Line Chart, Area Chart, Bar Chart, Donut Chart |
 
 Example pages put them together: a database list, a database detail page, a create wizard, settings, empty and error states, and a full app shell.
 
 ## Look and feel
 
-- **Type:** Geist for the interface and Geist Mono for code and resource names, on a 13px base.
-- **Colour:** the AppsCode green brand scale and slate neutrals. Status colours are green, blue, yellow and red.
-- **Shape:** 6px radius on controls and 10px on surfaces, with soft layered shadows from `shadow-xs` to `shadow-xl`.
-- **Focus:** a `focus-ring` utility (primary border and a soft halo) on form fields.
+The look and voice are the AppsCode Cloud console's (`cloud-ui`), so the system fits cloud-ui, kubedb-ui, cluster-ui and platform-ui alike.
+
+- **Type:** Roboto for the interface, Google Sans Flex for headings and JetBrains Mono for code and resource names, on a 14px base.
+- **Colour:** white cards on a `#f9fafb` page, neutral greys (`#252525` text, `#5c5c5c` descriptions, one `#ebebeb` border), the `#00a651` brand green, and success, info, warning, danger and pending statuses, each with an AA `-strong` text colour.
+- **Shape:** 40px controls with a 10px radius, 14px cards and 16px dialogs. Cards rest on a border; shadows mark only what floats.
+- **Focus:** a `focus-ring` utility (primary border and a 2px halo) on form fields, and a 2px offset ring on buttons.
 - **Dark mode:** class-based. Every token has a dark value, so components need no dark-specific code.
 - **Icons:** [Lucide](https://lucide.dev) (`@lucide/vue`). Components never draw their own SVG icons.
 
 ## Using it in an app
 
-The package is `@ac-design/design-system` **1.0.0**. `npm run build:lib` writes it to `dist/lib`, and `npm pack` makes an installable tarball.
+The package is `@ac-design/design-system` **2.0.0**. `npm run build:lib` writes it to `dist/lib`, and `npm pack` makes an installable tarball.
+
+## Styling rule
+
+Style with **Tailwind utility classes and the design tokens**. Don't write custom CSS: no `<style>` blocks in components and no one-off class rules. Use arbitrary values (`max-w-[320px]`, `bg-[color-mix(in_srgb,var(--color-primary)_6%,var(--color-surface))]`) for exact values, and arbitrary variants (`[&_.cm-content]:p-2`) for markup you don't own. If something truly can't be a utility, add a token or `@utility` to `theme.css`. The full rule is in `CLAUDE.md`.
 
 There are two ways to load the styles:
 
@@ -61,14 +68,15 @@ The docs page **Getting Started → Existing Apps** has the full guide. In short
 
 ```sh
 # installed next to the old 2.x package, under a second name
-npm install @appscode/ds-next@npm:@ac-design/design-system@1.0.0 @lucide/vue
+npm install @appscode/ds-next@npm:@ac-design/design-system@2.0.0 @lucide/vue
 ```
 
 ```ts
 // main.ts (Vite), or the `css` list in nuxt.config.ts: after the old styles
 import "./assets/styles/scss/main.scss";
-import "@fontsource-variable/geist";
-import "@fontsource-variable/geist-mono";
+import "@fontsource-variable/roboto";
+import "@fontsource-variable/google-sans-flex/opsz.css";
+import "@fontsource-variable/jetbrains-mono";
 import "@appscode/ds-next/compat.css";
 ```
 
@@ -79,8 +87,9 @@ import "@appscode/ds-next/compat.css";
 
 ```ts
 // main.ts: fonts once
-import "@fontsource-variable/geist";
-import "@fontsource-variable/geist-mono";
+import "@fontsource-variable/roboto";
+import "@fontsource-variable/google-sans-flex/opsz.css";
+import "@fontsource-variable/jetbrains-mono";
 ```
 
 ```css

package/dist/lib/charts/ChartFrame.js

@@ -0,0 +1,5 @@
+import e from "./ChartFrame.vue_vue_type_script_setup_true_lang.js";
+//#region src/lib/charts/ChartFrame.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/lib/charts/ChartFrame.vue.d.ts

@@ -0,0 +1,69 @@
+import type { Component } from "vue";
+import type { ChartDatum, ChartLegendItem, ChartTable, ChartTooltipItem } from "./shared";
+export interface ChartTooltipState {
+    /** Pointer position in viewport px. */
+    clientX: number;
+    clientY: number;
+    title: string;
+    items: ChartTooltipItem[];
+    /** Sum of the items, shown for stacked charts. */
+    total?: string;
+    datum: ChartDatum;
+    index: number;
+}
+export interface ChartTooltipSlotProps {
+    /** The hovered row. */
+    datum: ChartDatum;
+    /** Its index in `data`. */
+    index: number;
+    /** The formatted x value or segment name. */
+    title: string;
+    /** One entry per visible series: name, colour, value and formatted value. */
+    items: ChartTooltipItem[];
+}
+type __VLS_Props = {
+    testid: string;
+    height: number;
+    loading: boolean;
+    empty: boolean;
+    emptyText: string;
+    emptyIcon: Component;
+    legend: "top" | "bottom" | "right" | "none";
+    legendItems: ChartLegendItem[];
+    /** Centres a top or bottom legend under a round plot. */
+    legendCentered?: boolean;
+    summary: string;
+    title?: string;
+    description?: string;
+    table: ChartTable;
+    tip: ChartTooltipState | null;
+    tooltip: boolean;
+};
+type __VLS_Slots = {
+    default?: () => unknown;
+    tooltip?: (props: ChartTooltipSlotProps) => unknown;
+};
+type __VLS_ModelProps = {
+    "hidden": string[];
+    "width"?: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:hidden": (value: string[]) => any;
+    "update:width": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:hidden"?: ((value: string[]) => any) | undefined;
+    "onUpdate:width"?: ((value: number) => any) | undefined;
+}>, {
+    title: string;
+    description: string;
+    legendCentered: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/lib/charts/ChartFrame.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,168 @@
+import e from "../components/AcSkeleton.js";
+import t from "../components/AcEmptyState.js";
+import { Fragment as n, Teleport as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, mergeModels as u, normalizeClass as d, normalizeStyle as f, onBeforeUnmount as p, onMounted as m, openBlock as h, ref as g, renderList as _, renderSlot as v, toDisplayString as y, useModel as b, watch as x } from "vue";
+//#region src/lib/charts/ChartFrame.vue?vue&type=script&setup=true&lang.ts
+var S = ["data-testid"], C = ["aria-pressed", "onClick"], w = { class: "truncate" }, T = {
+	key: 0,
+	class: "ml-auto pl-3 font-medium text-heading tabular-nums"
+}, E = ["aria-label"], D = {
+	key: 4,
+	class: "sr-only"
+}, O = {
+	key: 5,
+	class: "sr-only"
+}, k = {
+	scope: "row",
+	class: "text-left"
+}, A = {
+	key: 0,
+	class: "mb-1.5 font-medium text-heading"
+}, j = { class: "m-0 flex list-none flex-col gap-1 p-0" }, M = { class: "min-w-0 flex-1 truncate text-muted" }, N = { class: "pl-4 font-medium text-heading tabular-nums" }, P = {
+	key: 1,
+	class: "mt-1.5 flex justify-between gap-4 border-t border-border pt-1.5"
+}, F = { class: "font-medium text-heading tabular-nums" }, I = 14, L = 300, R = 200, z = /*@__PURE__*/ l({
+	__name: "ChartFrame",
+	props: /*@__PURE__*/ u({
+		testid: {},
+		height: {},
+		loading: { type: Boolean },
+		empty: { type: Boolean },
+		emptyText: {},
+		emptyIcon: {},
+		legend: {},
+		legendItems: {},
+		legendCentered: {
+			type: Boolean,
+			default: !1
+		},
+		summary: {},
+		title: { default: "" },
+		description: { default: "" },
+		table: {},
+		tip: {},
+		tooltip: { type: Boolean }
+	}, {
+		hidden: { required: !0 },
+		hiddenModifiers: {},
+		width: { default: 0 },
+		widthModifiers: {}
+	}),
+	emits: ["update:hidden", "update:width"],
+	setup(l) {
+		let u = l, z = b(l, "hidden"), B = b(l, "width"), V = g(), H;
+		function U(e) {
+			let t = z.value.includes(e);
+			!t && u.legendItems.length - z.value.length <= 1 || (z.value = t ? z.value.filter((t) => t !== e) : [...z.value, e]);
+		}
+		function W(e) {
+			let t = e.clientX > window.innerWidth - L, n = e.clientY > window.innerHeight - R;
+			return {
+				left: t ? void 0 : `${e.clientX + I}px`,
+				right: t ? `${window.innerWidth - e.clientX + I}px` : void 0,
+				top: n ? void 0 : `${e.clientY + I}px`,
+				bottom: n ? `${window.innerHeight - e.clientY + I}px` : void 0
+			};
+		}
+		function G() {
+			H?.disconnect(), V.value && typeof ResizeObserver < "u" && (H = new ResizeObserver(([e]) => {
+				e && (B.value = Math.round(e.contentRect.width));
+			}), H.observe(V.value));
+		}
+		return x(V, G), m(G), p(() => H?.disconnect()), (u, p) => (h(), o("figure", {
+			class: d(["m-0 flex w-full min-w-0 gap-3", l.legend === "right" ? "flex-wrap items-center justify-center gap-x-10" : "flex-col"]),
+			"data-ac-ds": "",
+			"data-ac-chart": "",
+			"data-testid": l.testid
+		}, [
+			l.legend !== "none" && l.legendItems.length > 1 && !l.loading && !l.empty ? (h(), o("ul", {
+				key: 0,
+				class: d(["m-0 flex list-none flex-wrap gap-x-4 gap-y-1.5 p-0", [
+					l.legend === "bottom" && "order-last",
+					l.legend === "right" && "order-last max-w-[320px] min-w-[180px] flex-1 flex-col gap-y-2",
+					l.legendCentered && l.legend !== "right" && "justify-center"
+				]]),
+				"aria-label": "Legend"
+			}, [(h(!0), o(n, null, _(l.legendItems, (e) => (h(), o("li", {
+				key: e.key,
+				class: "flex"
+			}, [s("button", {
+				type: "button",
+				class: d(["inline-flex min-w-0 cursor-pointer items-center gap-2 rounded-6 text-xs transition-colors duration-200 hover:text-heading focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface motion-reduce:transition-none", [z.value.includes(e.key) ? "text-muted/60 line-through" : "text-muted", l.legend === "right" && "w-full"]]),
+				"aria-pressed": !z.value.includes(e.key),
+				onClick: (t) => U(e.key)
+			}, [
+				s("span", {
+					class: d(["size-2.5 shrink-0 rounded-full transition-opacity duration-200 motion-reduce:transition-none", z.value.includes(e.key) && "opacity-30"]),
+					style: f({ backgroundColor: e.color }),
+					"aria-hidden": "true"
+				}, null, 6),
+				s("span", w, y(e.name), 1),
+				e.value ? (h(), o("span", T, y(e.value), 1)) : a("", !0)
+			], 10, C)]))), 128))], 2)) : a("", !0),
+			l.loading ? (h(), i(e, {
+				key: 1,
+				shape: "rect",
+				height: `${l.height}px`,
+				label: "Loading chart"
+			}, null, 8, ["height"])) : l.empty ? (h(), o("div", {
+				key: 2,
+				class: "flex w-full items-center justify-center overflow-hidden",
+				style: f({ height: `${l.height}px` })
+			}, [c(t, {
+				size: "small",
+				icon: l.emptyIcon,
+				title: l.emptyText
+			}, null, 8, ["icon", "title"])], 4)) : (h(), o("div", {
+				key: 3,
+				ref_key: "plot",
+				ref: V,
+				class: d(["relative min-w-0", l.legend === "right" ? "max-w-full shrink-0" : "w-full"]),
+				style: f(l.legend === "right" ? {
+					height: `${l.height}px`,
+					width: `${l.height}px`
+				} : { height: `${l.height}px` }),
+				role: "img",
+				"aria-label": l.summary
+			}, [v(u.$slots, "default")], 14, E)),
+			l.title || l.description ? (h(), o("figcaption", D, y([l.title, l.description].filter(Boolean).join(". ")), 1)) : a("", !0),
+			!l.loading && !l.empty ? (h(), o("table", O, [
+				s("caption", null, y(l.title ? `${l.title}: data` : "Chart data"), 1),
+				s("thead", null, [s("tr", null, [(h(!0), o(n, null, _(l.table.columns, (e, t) => (h(), o("th", {
+					key: t,
+					scope: "col",
+					class: "text-left"
+				}, y(e), 1))), 128))])]),
+				s("tbody", null, [(h(!0), o(n, null, _(l.table.rows, (e, t) => (h(), o("tr", { key: t }, [s("th", k, y(e[0]), 1), (h(!0), o(n, null, _(e.slice(1), (e, t) => (h(), o("td", { key: t }, y(e), 1))), 128))]))), 128))])
+			])) : a("", !0),
+			(h(), i(r, { to: "body" }, [l.tooltip && l.tip && !l.loading && !l.empty ? (h(), o("div", {
+				key: 0,
+				class: "pointer-events-none fixed z-[100] w-max max-w-[280px] min-w-[160px] rounded-10 border border-border bg-surface px-3 py-2.5 text-xs text-body shadow-lg",
+				style: f(W(l.tip)),
+				"aria-hidden": "true",
+				"data-ac-ds": "",
+				"data-testid": "ac-chart-tooltip"
+			}, [v(u.$slots, "tooltip", {
+				datum: l.tip.datum,
+				index: l.tip.index,
+				title: l.tip.title,
+				items: l.tip.items
+			}, () => [
+				l.tip.title ? (h(), o("p", A, y(l.tip.title), 1)) : a("", !0),
+				s("ul", j, [(h(!0), o(n, null, _(l.tip.items, (e) => (h(), o("li", {
+					key: e.key,
+					class: "flex items-center gap-2"
+				}, [
+					s("span", {
+						class: "size-2 shrink-0 rounded-full",
+						style: f({ backgroundColor: e.color })
+					}, null, 4),
+					s("span", M, y(e.name), 1),
+					s("span", N, y(e.formatted), 1)
+				]))), 128))]),
+				l.tip.total ? (h(), o("p", P, [p[0] ||= s("span", { class: "text-muted" }, "Total", -1), s("span", F, y(l.tip.total), 1)])) : a("", !0)
+			])], 4)) : a("", !0)]))
+		], 10, S));
+	}
+});
+//#endregion
+export { z as default };

package/dist/lib/charts/index.d.ts

@@ -0,0 +1,7 @@
+export { default as AcLineChart } from "../components/AcLineChart.vue";
+export { default as AcAreaChart } from "../components/AcAreaChart.vue";
+export { default as AcBarChart } from "../components/AcBarChart.vue";
+export { default as AcDonutChart } from "../components/AcDonutChart.vue";
+export type { ChartAccessor, ChartCategory, ChartColor, ChartCurve, ChartDatum, ChartLegendPosition, ChartTooltipItem, } from "./shared";
+export type { ChartTooltipSlotProps } from "./ChartFrame.vue";
+export type { XYChartProps } from "./xy";

package/dist/lib/charts/index.js

@@ -0,0 +1,5 @@
+import e from "../components/AcLineChart.js";
+import t from "../components/AcAreaChart.js";
+import n from "../components/AcBarChart.js";
+import r from "../components/AcDonutChart.js";
+export { t as AcAreaChart, n as AcBarChart, r as AcDonutChart, e as AcLineChart };

package/dist/lib/charts/shared.d.ts

@@ -0,0 +1,60 @@
+import type { Tone } from "../components/types";
+/** A chart palette slot (`chart-1` … `chart-8`), a status tone, or `pending` (violet). */
+export type ChartColor = "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5" | "chart-6" | "chart-7" | "chart-8" | Tone | "pending";
+/** One series (line, area, bar) or one donut segment. */
+export interface ChartCategory {
+    /** Label in the legend, tooltip and data table. */
+    name: string;
+    /** Colour slot. Defaults to `chart-1`, `chart-2`… in the order the categories are listed. */
+    color?: ChartColor;
+}
+export type ChartDatum = Record<string, any>;
+/** A key of each row, or a function that reads the value from a row. */
+export type ChartAccessor<T = unknown> = string | ((d: ChartDatum, i: number) => T);
+/** Where the legend sits. */
+export type ChartLegendPosition = "top" | "bottom" | "none";
+/** The shape between points: straight, smooth (monotone, never overshoots) or stepped. */
+export type ChartCurve = "linear" | "monotone" | "step";
+/** What the tooltip shows for one series at the hovered point. */
+export interface ChartTooltipItem {
+    key: string;
+    name: string;
+    /** A CSS colour, e.g. `var(--color-chart-1)`. */
+    color: string;
+    value: number | null;
+    /** `value` run through `yFormatter`. */
+    formatted: string;
+}
+export interface ChartLegendItem {
+    key: string;
+    name: string;
+    color: string;
+    /** Shown after the name, e.g. a donut segment's value. */
+    value?: string;
+}
+export interface ChartTable {
+    columns: string[];
+    rows: string[][];
+}
+/** CSS colour for a category; colour follows the category's position in the full list, so hiding one never repaints the rest. */
+export declare function chartColor(color: ChartColor | undefined, position: number): string;
+export declare function readValue<T = unknown>(d: ChartDatum, i: number, accessor: ChartAccessor<T>): T;
+export declare function readNumber(d: ChartDatum, key: string): number | null;
+/** The default value formatter: 1.2K, 3.4M. */
+export declare function formatCompact(value: number): string;
+/** How the x values are placed: on a time scale, a number scale, or evenly as categories. */
+export type XKind = "time" | "number" | "category";
+export declare function detectXKind(values: unknown[]): XKind;
+export declare function toTimestamp(v: unknown): number;
+/** Default labels for time values, like d3's multi-scale format: `14:00` within a day, `Oct 10` at midnight, `Oct` (or `Oct 2026`) at a month start on a long span. */
+export declare function timeFormatters(values: number[]): {
+    tick: (t: number) => string;
+    title: (t: number) => string;
+};
+/** Rounds an axis maximum up to a tidy step, like d3's `nice()`. */
+export declare function niceMax(max: number, ticks?: number): number;
+/** Every k-th index so at most `max` category ticks are drawn. */
+export declare function categoryTicks(count: number, max: number): number[];
+/** Unovis animation length; 0 when the viewer asks for reduced motion. */
+export declare function chartDuration(): number;
+export declare const CURVES: Record<ChartCurve, string>;

package/dist/lib/charts/shared.js

@@ -0,0 +1,114 @@
+//#region src/lib/charts/shared.ts
+var e = {
+	"chart-1": "var(--color-chart-1)",
+	"chart-2": "var(--color-chart-2)",
+	"chart-3": "var(--color-chart-3)",
+	"chart-4": "var(--color-chart-4)",
+	"chart-5": "var(--color-chart-5)",
+	"chart-6": "var(--color-chart-6)",
+	"chart-7": "var(--color-chart-7)",
+	"chart-8": "var(--color-chart-8)",
+	primary: "var(--color-primary)",
+	info: "var(--color-info)",
+	success: "var(--color-success)",
+	warning: "var(--color-warning)",
+	danger: "var(--color-danger)",
+	pending: "var(--color-pending)"
+}, t = [
+	"chart-1",
+	"chart-2",
+	"chart-3",
+	"chart-4",
+	"chart-5",
+	"chart-6",
+	"chart-7",
+	"chart-8"
+];
+function n(n, r) {
+	return e[n ?? t[r % t.length]];
+}
+function r(e, t, n) {
+	return typeof n == "function" ? n(e, t) : e[n];
+}
+function i(e, t) {
+	let n = e[t];
+	if (n == null || n === "") return null;
+	let r = Number(n);
+	return Number.isFinite(r) ? r : null;
+}
+var a = new Intl.NumberFormat(void 0, {
+	notation: "compact",
+	maximumFractionDigits: 1
+});
+function o(e) {
+	return a.format(e);
+}
+var s = /^\d{4}-\d{2}-\d{2}/, c = 1e11;
+function l(e) {
+	return e.length ? e.every((e) => e instanceof Date || typeof e == "string" && s.test(e)) ? "time" : e.every((e) => typeof e == "number" && Number.isFinite(e)) ? e.every((e) => e >= c) ? "time" : "number" : "category" : "category";
+}
+var u = /^(\d{4})-(\d{2})-(\d{2})$/;
+function d(e) {
+	if (e instanceof Date) return e.getTime();
+	if (typeof e == "number") return e;
+	let t = u.exec(String(e));
+	return t ? new Date(+t[1], t[2] - 1, +t[3]).getTime() : Date.parse(String(e));
+}
+var f = 864e5;
+function p(e) {
+	let t = new Date(e);
+	return t.getHours() === 0 && t.getMinutes() === 0;
+}
+function m(e) {
+	return p(e) && new Date(e).getDate() === 1;
+}
+function h(e) {
+	let t = e.length ? Math.max(...e) - Math.min(...e) : 0, n = e.length > 0 && e.every(m), r = e.length > 0 && e.every(p), i = new Intl.DateTimeFormat(void 0, {
+		hour: "2-digit",
+		minute: "2-digit",
+		hourCycle: "h23"
+	}), a = new Intl.DateTimeFormat(void 0, {
+		month: "short",
+		day: "numeric"
+	}), o = new Intl.DateTimeFormat(void 0, { month: "short" }), s = new Intl.DateTimeFormat(void 0, {
+		month: "short",
+		year: "numeric"
+	}), c = new Intl.DateTimeFormat(void 0, {
+		month: "short",
+		day: "numeric",
+		hour: "2-digit",
+		minute: "2-digit",
+		hourCycle: "h23"
+	}), l = new Intl.DateTimeFormat(void 0, {
+		year: "numeric",
+		month: "short",
+		day: "numeric"
+	}), u = new Intl.DateTimeFormat(void 0, {
+		month: "long",
+		year: "numeric"
+	});
+	return {
+		tick: (e) => p(e) ? t > 60 * f && m(e) ? (t > 365 * f ? s : o).format(e) : a.format(e) : i.format(e),
+		title: (e) => n ? u.format(e) : r ? l.format(e) : c.format(e)
+	};
+}
+function g(e, t = 5) {
+	if (!(e > 0)) return e;
+	let n = e / t, r = 10 ** Math.floor(Math.log10(n)), i = n / r;
+	return r *= i >= 7.5 ? 10 : i >= 3.5 ? 5 : i >= 1.5 ? 2 : 1, Math.ceil(e / r) * r;
+}
+function _(e, t) {
+	let n = Math.max(1, Math.ceil(e / Math.max(1, t))), r = [];
+	for (let t = 0; t < e; t += n) r.push(t);
+	return r;
+}
+function v() {
+	return typeof window > "u" || !window.matchMedia ? 300 : window.matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : 300;
+}
+var y = {
+	linear: "linear",
+	monotone: "monotoneX",
+	step: "step"
+};
+//#endregion
+export { y as CURVES, _ as categoryTicks, n as chartColor, v as chartDuration, l as detectXKind, o as formatCompact, g as niceMax, i as readNumber, r as readValue, h as timeFormatters, d as toTimestamp };

package/dist/lib/charts/xy.d.ts

@@ -0,0 +1,65 @@
+import type { ChartAccessor, ChartCategory, ChartDatum, ChartLegendItem, ChartLegendPosition, ChartTable, ChartTooltipItem } from "./shared";
+export interface XYChartProps {
+    /** Rows to plot, one per x value, e.g. `{ time: "2026-10-10T14:00:00Z", cpu: 42, memory: 61 }`. */
+    data: ChartDatum[];
+    /** The x value of each row: a key or a function. `Date`s, ISO date strings and millisecond timestamps go on a time axis, other numbers on a number axis, and strings are spaced evenly. */
+    index: ChartAccessor;
+    /** The series to draw, keyed by the row field that holds each value: `{ cpu: { name: "CPU", color: "chart-1" } }`. Colours default to `chart-1`, `chart-2`… in this order. */
+    categories: Record<string, ChartCategory>;
+    /** Plot height in px. The width fills the container. */
+    height?: number;
+    /** Formats x values on the axis, in the tooltip title and in the data table. Receives a `Date` on a time axis. Defaults to times (`14:00`), days (`Oct 10`) or months (`Oct`) by the span of the data. */
+    xFormatter?: (value: Date | number | string) => string;
+    /** Formats values on the axis, in the tooltip and in the data table. Defaults to compact numbers: `1.2K`, `3.4M`. */
+    yFormatter?: (value: number) => string;
+    /** Title under the x axis, e.g. "Time (UTC)". Also heads the first column of the screen-reader table. */
+    xLabel?: string;
+    /** Title beside the y axis, e.g. "CPU (%)". */
+    yLabel?: string;
+    /** Legend above or below the plot, or `none`. Hidden anyway for a single series; clicking an entry hides or shows that series. */
+    legend?: ChartLegendPosition;
+    /** Shows a tooltip with every series' value on hover. Customise it with the `tooltip` slot. */
+    tooltip?: boolean;
+    /** Draws grid lines across the plot at each value tick. */
+    gridLines?: boolean;
+    /** Fixes the value axis range, e.g. `[0, 100]` for percentages. Leave an end `undefined` to fit the data. Defaults to starting at 0 and rounding the top up. */
+    yDomain?: [number | undefined, number | undefined];
+    /** Shows a skeleton of the same height while data loads. */
+    loading?: boolean;
+    /** Short heading shown in place of the plot when `data` is empty, e.g. "No metrics for demo-redis yet". */
+    emptyText?: string;
+    /** Accessible name, e.g. "CPU and memory of demo-postgres". Show the visible title in the surrounding card. */
+    title?: string;
+    /** A sentence for screen readers on what the chart shows. Defaults to the series names and the x range. */
+    description?: string;
+}
+export type XYChartDefaults = Required<Pick<XYChartProps, "height" | "legend" | "tooltip" | "gridLines" | "loading" | "emptyText">>;
+/** `positions` places x by index (bars); otherwise time and number x values keep their real spacing. */
+export declare function useXYChart(props: XYChartProps, options: {
+    stacked: () => boolean;
+    positions?: boolean;
+    horizontal?: () => boolean;
+}): {
+    hidden: import("vue").Ref<string[], string[]>;
+    width: import("vue").Ref<number, number>;
+    keys: import("vue").ComputedRef<string[]>;
+    visibleKeys: import("vue").ComputedRef<string[]>;
+    colorOf: import("vue").ComputedRef<Record<string, string>>;
+    colors: import("vue").ComputedRef<string[]>;
+    legendItems: import("vue").ComputedRef<ChartLegendItem[]>;
+    xKind: import("vue").ComputedRef<import("./shared").XKind>;
+    byPosition: import("vue").ComputedRef<boolean>;
+    x: (_d: ChartDatum, i: number) => number;
+    yAccessors: import("vue").ComputedRef<((d: ChartDatum) => number | null)[]>;
+    xTickValues: import("vue").ComputedRef<number[] | undefined>;
+    maxXTicks: import("vue").ComputedRef<number>;
+    yTicks: import("vue").ComputedRef<number>;
+    xTickFormat: (tick: number | Date) => string;
+    formatY: (v: number | null) => string;
+    rowLabel: (i: number) => string;
+    yDomain: import("vue").ComputedRef<[number | undefined, number | undefined]>;
+    tooltipItems: (d: ChartDatum) => ChartTooltipItem[];
+    tooltipTotal: (d: ChartDatum) => string;
+    table: import("vue").ComputedRef<ChartTable>;
+    ariaLabel: import("vue").ComputedRef<string>;
+};