@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/typewriter-text/typewriter-text.js

@@ -0,0 +1,135 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useCallback, useEffect, useLayoutEffect, useState } from "react";
+//#region src/components/typewriter-text/typewriter-text.tsx
+const typewriterTextVariants = cva("ms-px inline-block h-[1em] w-0.5 translate-y-[0.1em] bg-current align-baseline", {
+	variants: { 
+	/** `bar` is a thin vertical caret, `block` a character-wide cell, `none` hides it. */
+caret: {
+		bar: "animate-caret",
+		block: "w-[0.55em] animate-caret opacity-70",
+		none: "hidden"
+	} },
+	defaultVariants: { caret: "bar" }
+});
+function reducedMotion() {
+	return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+/** Types text behind a caret, once, in a loop, or cycling through a list. */
+function TypewriterText({ as: Component = "span", children, speed = 50, deleteSpeed, pause = 1e3, loop, startDelay = 0, caret, className, ref, ...props }) {
+	const items = typeof children === "string" ? [children] : children;
+	const isList = typeof children !== "string";
+	const repeats = loop ?? isList;
+	const key = JSON.stringify(items);
+	const [cursor, setCursor] = useState(() => ({
+		item: 0,
+		typed: items[0]?.length ?? 0
+	}));
+	useIsomorphicLayoutEffect(() => {
+		const strings = JSON.parse(key);
+		const first = strings[0] ?? "";
+		if (reducedMotion()) {
+			setCursor({
+				item: 0,
+				typed: first.length
+			});
+			return;
+		}
+		let timer;
+		let item = 0;
+		let typed = 0;
+		let deleting = false;
+		setCursor({
+			item,
+			typed
+		});
+		const tick = () => {
+			const text = strings[item] ?? "";
+			if (!deleting && typed < text.length) {
+				typed += 1;
+				setCursor({
+					item,
+					typed
+				});
+				timer = setTimeout(tick, typed < text.length ? speed : pause);
+				return;
+			}
+			if (!deleting) {
+				if (strings.length > 1) {
+					if (item === strings.length - 1 && !repeats) return;
+					deleting = true;
+					tick();
+					return;
+				}
+				if (!repeats) return;
+				typed = 0;
+				tick();
+				return;
+			}
+			if (typed > 0) {
+				typed -= 1;
+				setCursor({
+					item,
+					typed
+				});
+				timer = setTimeout(tick, deleteSpeed ?? speed / 2);
+				return;
+			}
+			deleting = false;
+			item = (item + 1) % strings.length;
+			timer = setTimeout(tick, speed);
+		};
+		if (startDelay > 0) timer = setTimeout(tick, startDelay);
+		else tick();
+		return () => {
+			if (timer) clearTimeout(timer);
+		};
+	}, [
+		key,
+		speed,
+		deleteSpeed,
+		pause,
+		repeats,
+		startDelay
+	]);
+	const setRef = useCallback((element) => {
+		if (typeof ref === "function") ref(element);
+		else if (ref) ref.current = element;
+	}, [ref]);
+	const current = items[cursor.item] ?? "";
+	const shown = current.slice(0, cursor.typed);
+	const rest = current.slice(cursor.typed);
+	return /* @__PURE__ */ jsxs(Component, {
+		ref: setRef,
+		"data-slot": "typewriter-text",
+		"data-state": cursor.typed >= current.length ? "complete" : "typing",
+		className: cn(className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("span", {
+			"data-slot": "typewriter-text-typed",
+			"aria-hidden": "true",
+			children: [
+				shown,
+				/* @__PURE__ */ jsx("span", {
+					"data-slot": "typewriter-text-caret",
+					className: typewriterTextVariants({ caret })
+				}),
+				/* @__PURE__ */ jsx("span", {
+					"data-slot": "typewriter-text-rest",
+					className: "invisible",
+					children: rest
+				})
+			]
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: isList ? items.join(", ") : current
+		})]
+	});
+}
+//#endregion
+export { TypewriterText, typewriterTextVariants };
+
+//# sourceMappingURL=typewriter-text.js.map

package/dist/components/typewriter-text/typewriter-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typewriter-text.js","names":[],"sources":["../../../src/components/typewriter-text/typewriter-text.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Typewriter Text (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useState,\n  type ComponentPropsWithRef,\n  type Ref,\n} from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/*\n * Types a string a character at a time behind a blinking caret.\n *\n * - One string types once, or with `loop` clears and retypes after a pause —\n *   the source's behaviour, at its defaults (50ms a character, 1s pause). A\n *   list of strings types each one, holds it, deletes it and moves on: the\n *   rotating-headline form the source's `loop` implies.\n * - The untyped remainder is rendered, invisible, after the caret. The line\n *   reserves its full width and height from the first frame, so the page does\n *   not reflow a character at a time.\n * - The server renders the finished text, so the markup is legible without\n *   JavaScript; typing starts from empty before the first paint on the client.\n * - The whole string sits in an sr-only copy and the typed glyphs are\n *   aria-hidden, so a screen reader reads the text once, never per character.\n * - Under reduced motion the full text shows immediately and nothing cycles.\n *   The caret reuses the theme's `animate-caret`, which the reduced-motion\n *   blanket stops.\n */\n\n/** Elements text effects render as. They are all phrasing or heading content. */\nexport type TypewriterTextElement =\n  \"span\" | \"p\" | \"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n\nconst typewriterTextVariants = cva(\n  \"ms-px inline-block h-[1em] w-0.5 translate-y-[0.1em] bg-current align-baseline\",\n  {\n    variants: {\n      /** `bar` is a thin vertical caret, `block` a character-wide cell, `none` hides it. */\n      caret: {\n        bar: \"animate-caret\",\n        block: \"w-[0.55em] animate-caret opacity-70\",\n        none: \"hidden\",\n      },\n    },\n    defaultVariants: {\n      caret: \"bar\",\n    },\n  },\n);\n\nexport interface TypewriterTextProps\n  extends\n    Omit<ComponentPropsWithRef<\"span\">, \"ref\" | \"children\">,\n    VariantProps<typeof typewriterTextVariants> {\n  ref?: Ref<HTMLElement>;\n  /** One string to type, or a list to type, delete and cycle through. */\n  children: string | readonly string[];\n  /** The element to render. */\n  as?: TypewriterTextElement;\n  /** Milliseconds per typed character. */\n  speed?: number;\n  /** Milliseconds per deleted character, for a list. Defaults to half of `speed`. */\n  deleteSpeed?: number;\n  /** Milliseconds a finished string holds before it restarts or is deleted. */\n  pause?: number;\n  /**\n   * Keep going. A single string clears and retypes; a list cycles back to its\n   * first item. Defaults to `false` for a string and `true` for a list.\n   */\n  loop?: boolean;\n  /** Milliseconds before typing starts. */\n  startDelay?: number;\n}\n\nfunction reducedMotion(): boolean {\n  return (\n    typeof window !== \"undefined\" &&\n    typeof window.matchMedia === \"function\" &&\n    window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n  );\n}\n\n// Layout effect on the client, so typing starts from empty before first paint;\n// a plain effect on the server, where neither runs.\nconst useIsomorphicLayoutEffect = typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\ninterface Cursor {\n  /** Which string is showing. */\n  item: number;\n  /** How many of its characters are typed. */\n  typed: number;\n}\n\n/** Types text behind a caret, once, in a loop, or cycling through a list. */\nexport function TypewriterText({\n  as: Component = \"span\",\n  children,\n  speed = 50,\n  deleteSpeed,\n  pause = 1000,\n  loop,\n  startDelay = 0,\n  caret,\n  className,\n  ref,\n  ...props\n}: TypewriterTextProps) {\n  const items: readonly string[] = typeof children === \"string\" ? [children] : children;\n  const isList = typeof children !== \"string\";\n  const repeats = loop ?? isList;\n  // A stable key for the effect: the strings themselves, not the array identity.\n  const key = JSON.stringify(items);\n\n  // Finished text first, for the server and for reduced motion.\n  const [cursor, setCursor] = useState<Cursor>(() => ({\n    item: 0,\n    typed: items[0]?.length ?? 0,\n  }));\n\n  useIsomorphicLayoutEffect(() => {\n    const strings = JSON.parse(key) as string[];\n    const first = strings[0] ?? \"\";\n    if (reducedMotion()) {\n      setCursor({ item: 0, typed: first.length });\n      return;\n    }\n\n    let timer: ReturnType<typeof setTimeout> | undefined;\n    let item = 0;\n    let typed = 0;\n    let deleting = false;\n    setCursor({ item, typed });\n\n    const tick = () => {\n      const text = strings[item] ?? \"\";\n      if (!deleting && typed < text.length) {\n        typed += 1;\n        setCursor({ item, typed });\n        timer = setTimeout(tick, typed < text.length ? speed : pause);\n        return;\n      }\n      // The string is complete.\n      if (!deleting) {\n        if (strings.length > 1) {\n          const last = item === strings.length - 1;\n          if (last && !repeats) return;\n          deleting = true;\n          tick();\n          return;\n        }\n        if (!repeats) return;\n        // A single string clears at once and retypes, as the source did.\n        typed = 0;\n        tick();\n        return;\n      }\n      if (typed > 0) {\n        typed -= 1;\n        setCursor({ item, typed });\n        timer = setTimeout(tick, deleteSpeed ?? speed / 2);\n        return;\n      }\n      deleting = false;\n      item = (item + 1) % strings.length;\n      timer = setTimeout(tick, speed);\n    };\n\n    // The first character lands at once, as in the source, unless delayed.\n    if (startDelay > 0) timer = setTimeout(tick, startDelay);\n    else tick();\n    return () => {\n      if (timer) clearTimeout(timer);\n    };\n  }, [key, speed, deleteSpeed, pause, repeats, startDelay]);\n\n  // Accepts a ref to any of the `as` elements.\n  const setRef = useCallback(\n    (element: HTMLElement | null) => {\n      if (typeof ref === \"function\") ref(element);\n      else if (ref) ref.current = element;\n    },\n    [ref],\n  );\n\n  const current = items[cursor.item] ?? \"\";\n  const shown = current.slice(0, cursor.typed);\n  const rest = current.slice(cursor.typed);\n\n  return (\n    <Component\n      ref={setRef}\n      data-slot=\"typewriter-text\"\n      data-state={cursor.typed >= current.length ? \"complete\" : \"typing\"}\n      className={cn(className)}\n      {...props}\n    >\n      <span data-slot=\"typewriter-text-typed\" aria-hidden=\"true\">\n        {shown}\n        <span data-slot=\"typewriter-text-caret\" className={typewriterTextVariants({ caret })} />\n        <span data-slot=\"typewriter-text-rest\" className=\"invisible\">\n          {rest}\n        </span>\n      </span>\n      <span className=\"sr-only\">{isList ? items.join(\", \") : current}</span>\n    </Component>\n  );\n}\n\nexport { typewriterTextVariants };\n"],"mappings":"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"}

package/dist/components/uptime-matrix/index.d.ts

@@ -0,0 +1,2 @@
+import { UPTIME_COLORS, UPTIME_GAP, UPTIME_STATUSES, UptimeDay, UptimeMatrix, UptimeMatrixProps, UptimeStatus, dayFromKey, uptimeMatrixVariants } from "./uptime-matrix.js";
+export { UPTIME_COLORS, UPTIME_GAP, UPTIME_STATUSES, type UptimeDay, UptimeMatrix, type UptimeMatrixProps, type UptimeStatus, dayFromKey, uptimeMatrixVariants };

package/dist/components/uptime-matrix/index.js

@@ -0,0 +1,2 @@
+import { UPTIME_COLORS, UPTIME_GAP, UPTIME_STATUSES, UptimeMatrix, dayFromKey, uptimeMatrixVariants } from "./uptime-matrix.js";
+export { UPTIME_COLORS, UPTIME_GAP, UPTIME_STATUSES, UptimeMatrix, dayFromKey, uptimeMatrixVariants };

package/dist/components/uptime-matrix/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/uptime-matrix/meta.ts
+const meta = defineMeta({
+	name: "uptime-matrix",
+	title: "Uptime Matrix",
+	description: "A day-by-day status history drawn in dithered tiles — operational, degraded, outage — with a keyboard-navigable readout and legend.",
+	category: "data",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["dither-canvas"],
+	files: ["uptime-matrix.tsx"],
+	a11y: "The tiles are role=\"img\" with an aria-label counting each state and the average uptime. Over them sits a role=\"grid\" of gridcells with one roving tab stop: arrow keys move a day, Home/End go to the row's ends, Ctrl+Home/End to the first and last day, Escape hides the readout; each cell's text is its readout. State is never colour alone: degraded tiles are striped, outages solid, and the legend, readout and table name every state. Axis labels are aria-hidden; the data is always in a table, visually hidden unless showTable is set."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/uptime-matrix/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/uptime-matrix/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"uptime-matrix\",\n  title: \"Uptime Matrix\",\n  description:\n    \"A day-by-day status history drawn in dithered tiles — operational, degraded, outage — with a keyboard-navigable readout and legend.\",\n  category: \"data\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"dither-canvas\"],\n  files: [\"uptime-matrix.tsx\"],\n  a11y:\n    'The tiles are role=\"img\" with an aria-label counting each state and the average uptime. ' +\n    'Over them sits a role=\"grid\" of gridcells with one roving tab stop: arrow keys move a day, ' +\n    \"Home/End go to the row's ends, Ctrl+Home/End to the first and last day, Escape hides the \" +\n    \"readout; each cell's text is its readout. State is never colour alone: degraded tiles are \" +\n    \"striped, outages solid, and the legend, readout and table name every state. Axis labels are \" +\n    \"aria-hidden; the data is always in a table, visually hidden unless showTable is set.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC,eAAe;CACtC,OAAO,CAAC,mBAAmB;CAC3B,MACE;AAMJ,CAAC"}

package/dist/components/uptime-matrix/uptime-matrix.d.ts

@@ -0,0 +1,60 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/uptime-matrix/uptime-matrix.d.ts
+declare const uptimeMatrixVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type UptimeStatus = "operational" | "degraded" | "outage" | "unknown";
+interface UptimeDay {
+  /** The day's name, e.g. a date. */
+  label: string;
+  status: UptimeStatus;
+  /** Uptime that day, in percent. */
+  uptime?: number;
+  /** A note for the readout, e.g. the incident. */
+  note?: string;
+}
+interface UptimeMatrixProps extends Omit<ComponentPropsWithRef<"div">, "children">, VariantProps<typeof uptimeMatrixVariants> {
+  days: readonly UptimeDay[];
+  /** What the matrix shows. Names the image, the grid and the data table. */
+  label: string;
+  /** Replaces the generated summary in the image's accessible name. */
+  description?: string;
+  /** Tiles per row. Default: every day in one row. */
+  columns?: number;
+  /** Names for each state (translate here). */
+  statusLabels?: Partial<Record<UptimeStatus, string>>;
+  formatUptime?: (percent: number) => string;
+  /** Show the state legend with counts. */
+  showLegend?: boolean;
+  /** Show the first and last day under the tiles. */
+  showAxis?: boolean;
+  /** Replace the axis labels, e.g. "90 days ago" and "Today". */
+  startLabel?: string;
+  endLabel?: string;
+  /** Show the data table. It is always present for assistive technology. */
+  showTable?: boolean;
+  animate?: boolean;
+  /** Cell pitch in CSS pixels. Default 2: tiles are thin. */
+  cell?: number;
+  /** The day whose readout shows (controlled); null hides it. */
+  activeIndex?: number | null;
+  defaultActiveIndex?: number | null;
+  onActiveIndexChange?: (index: number | null) => void;
+  /** Data table headers. */
+  dayLabel?: string;
+  statusLabel?: string;
+  uptimeLabel?: string;
+  noteLabel?: string;
+}
+/** Gap between tiles in CSS pixels. */
+declare const UPTIME_GAP = 2;
+declare const UPTIME_STATUSES: readonly UptimeStatus[];
+/** The state token for each status. */
+declare const UPTIME_COLORS: Readonly<Record<UptimeStatus, string>>;
+/** The day a grid key moves to, or null when the key is not a grid key. */
+declare function dayFromKey(key: string, ctrl: boolean, index: number, count: number, columns: number): number | null;
+declare function UptimeMatrix({ days, label, description, columns, statusLabels, formatUptime, showLegend, showAxis, startLabel, endLabel, size, showTable, animate, cell, activeIndex, defaultActiveIndex, onActiveIndexChange, dayLabel, statusLabel, uptimeLabel, noteLabel, className, ...props }: UptimeMatrixProps): import("react").JSX.Element;
+//#endregion
+export { UPTIME_COLORS, UPTIME_GAP, UPTIME_STATUSES, UptimeDay, UptimeMatrix, UptimeMatrixProps, UptimeStatus, dayFromKey, uptimeMatrixVariants };
+//# sourceMappingURL=uptime-matrix.d.ts.map

package/dist/components/uptime-matrix/uptime-matrix.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"uptime-matrix.d.ts","names":[],"sources":["../../../src/components/uptime-matrix/uptime-matrix.tsx"],"mappings":";;;cAwCa,uBAAoB;;6CAS/B;KAEU;UAEK;;EAEf;EACA,QAAQ;;EAER;;EAEA;;UAGe,0BAEb,KAAK,2CACL,oBAAoB;EACtB,eAAe;;EAEf;;EAEA;;EAEA;;EAEA,eAAe,QAAQ,OAAO;EAC9B,gBAAgB;;EAEhB;;EAEA;;EAEA;EACA;;EAEA;EACA;;EAEA;;EAEA;EACA;EACA,uBAAuB;;EAEvB;EACA;EACA;EACA;;;cAIW;cAEA,0BAA0B;;cAQ1B,eAAe,SAAS,OAAO;;iBAe5B,WACd,aACA,eACA,eACA,eACA;iBAuBc,eACd,MACA,OACA,aACA,SACA,cACA,cACA,YACA,UACA,YACA,UACA,MACA,WACA,SACA,MACA,aACA,oBACA,qBACA,UACA,aACA,aACA,WACA,cACG,SACF,oCAAiB,IAAA"}

package/dist/components/uptime-matrix/uptime-matrix.js

@@ -0,0 +1,303 @@
+"use client";
+import "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { ditherFill, drift, hash2, tokenToCss } from "../dither-canvas/dither-engine.js";
+import { DitherCanvas, DitherTable } from "../dither-canvas/dither-canvas.js";
+import { makePath, traceRoundedRect } from "../dither-canvas/dither-geometry.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useRef, useState } from "react";
+//#region src/components/uptime-matrix/uptime-matrix.tsx
+const uptimeMatrixVariants = cva("flex flex-col gap-2", {
+	variants: { size: {
+		sm: "[--uptime-matrix-height:1.25rem]",
+		md: "[--uptime-matrix-height:1.75rem]",
+		lg: "[--uptime-matrix-height:2.5rem]"
+	} },
+	defaultVariants: { size: "md" }
+});
+/** Gap between tiles in CSS pixels. */
+const UPTIME_GAP = 2;
+const UPTIME_STATUSES = [
+	"operational",
+	"degraded",
+	"outage",
+	"unknown"
+];
+/** The state token for each status. */
+const UPTIME_COLORS = {
+	operational: "success",
+	degraded: "warning",
+	outage: "destructive",
+	unknown: "muted-foreground"
+};
+const DEFAULT_LABELS = {
+	operational: "Operational",
+	degraded: "Degraded",
+	outage: "Outage",
+	unknown: "No data"
+};
+/** The day a grid key moves to, or null when the key is not a grid key. */
+function dayFromKey(key, ctrl, index, count, columns) {
+	const last = count - 1;
+	const clampTo = (value) => Math.min(last, Math.max(0, value));
+	const rowStart = index - index % columns;
+	switch (key) {
+		case "ArrowRight": return clampTo(index + 1);
+		case "ArrowLeft": return clampTo(index - 1);
+		case "ArrowDown": return index + columns <= last ? index + columns : index;
+		case "ArrowUp": return index - columns >= 0 ? index - columns : index;
+		case "Home": return ctrl ? 0 : rowStart;
+		case "End": return ctrl ? last : clampTo(rowStart + columns - 1);
+		default: return null;
+	}
+}
+function UptimeMatrix({ days, label, description, columns, statusLabels, formatUptime = (percent) => `${String(Math.round(percent * 100) / 100)}%`, showLegend = true, showAxis = true, startLabel, endLabel, size, showTable = false, animate = true, cell = 2, activeIndex, defaultActiveIndex = null, onActiveIndexChange, dayLabel = "Day", statusLabel = "Status", uptimeLabel = "Uptime", noteLabel = "Note", className, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultActiveIndex);
+	const [focusIndex, setFocusIndex] = useState(0);
+	const gridRef = useRef(null);
+	const active = activeIndex !== void 0 ? activeIndex : uncontrolled;
+	const count = days.length;
+	const perRow = Math.max(1, Math.min(count, columns ?? count));
+	const rowCount = Math.ceil(count / perRow);
+	const names = {
+		...DEFAULT_LABELS,
+		...statusLabels
+	};
+	const setActive = (next) => {
+		if (next === active) return;
+		if (activeIndex === void 0) setUncontrolled(next);
+		onActiveIndexChange?.(next);
+	};
+	const draw = (ctx, frame) => {
+		const { width, height, time } = frame;
+		if (count === 0) return;
+		const tileWidth = (width - 2 * (perRow - 1)) / perRow;
+		const tileHeight = (height - 2 * (rowCount - 1)) / rowCount;
+		if (tileWidth <= 0 || tileHeight <= 0) return;
+		const step = frame.cell;
+		days.forEach((day, i) => {
+			const x = i % perRow * (tileWidth + 2);
+			const y = Math.floor(i / perRow) * (tileHeight + 2);
+			const hot = active === i;
+			const dim = active !== null && !hot;
+			const status = day.status;
+			ditherFill(ctx, {
+				clip: makePath((sink) => {
+					traceRoundedRect(sink, x, y, tileWidth, tileHeight, Math.min(2, tileWidth / 2));
+				}),
+				bounds: {
+					x,
+					y,
+					width: tileWidth,
+					height: tileHeight
+				},
+				cell: step,
+				color: frame.color(UPTIME_COLORS[status]),
+				alpha: (status === "unknown" ? .35 : .85) * (dim ? .55 : 1),
+				density: (cx, cy) => {
+					const base = (.3 + .4 * drift(cx, cy, time * 1.2)) * (.8 + .4 * hash2(cx, cy));
+					if (status === "outage") return base + .3;
+					if (status === "degraded" && Math.floor((cx + cy) / (step * 2)) % 2 === 0) return base * .35;
+					return base + (hot ? .2 : 0);
+				}
+			});
+		});
+	};
+	const describe = (i) => {
+		const day = days[i];
+		if (!day) return "";
+		const uptime = day.uptime !== void 0 ? `, ${formatUptime(day.uptime)} ${uptimeLabel.toLowerCase()}` : "";
+		const note = day.note ? `. ${day.note}` : "";
+		return `${day.label}: ${names[day.status]}${uptime}${note}`;
+	};
+	const counts = UPTIME_STATUSES.map((status) => [status, days.filter((day) => day.status === status).length]);
+	const measured = days.filter((day) => day.uptime !== void 0);
+	const average = measured.length > 0 ? measured.reduce((sum, day) => sum + (day.uptime ?? 0), 0) / measured.length : null;
+	const summary = description ?? (count === 0 ? "No data." : `${String(count)} days: ${counts.filter(([, n]) => n > 0).map(([status, n]) => `${String(n)} ${names[status].toLowerCase()}`).join(", ")}.` + (average !== null ? ` Average ${uptimeLabel.toLowerCase()} ${formatUptime(average)}.` : ""));
+	const roving = Math.min(focusIndex, Math.max(0, count - 1));
+	const onKeyDown = (event) => {
+		if (event.key === "Escape") {
+			if (active !== null) {
+				event.preventDefault();
+				setActive(null);
+			}
+			return;
+		}
+		const next = dayFromKey(event.key, event.ctrlKey || event.metaKey, roving, count, perRow);
+		if (next === null) return;
+		event.preventDefault();
+		gridRef.current?.querySelector(`[data-index="${String(next)}"]`)?.focus();
+	};
+	const onBlur = (event) => {
+		if (!event.currentTarget.contains(event.relatedTarget)) setActive(null);
+	};
+	const gap = `${String(2)}px`;
+	const rowsOf = Array.from({ length: rowCount }, (_, r) => days.slice(r * perRow, (r + 1) * perRow).map((day, c) => ({
+		day,
+		index: r * perRow + c
+	})));
+	const activeX = active !== null ? (active % perRow + .5) / perRow : 0;
+	const shift = active !== null && (active % perRow === 0 || activeX < .15) ? "0%" : active !== null && (active % perRow === perRow - 1 || activeX > .85) ? "-100%" : "-50%";
+	const withUptime = measured.length > 0;
+	const withNote = days.some((day) => day.note);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "uptime-matrix",
+		...props,
+		className: cn(uptimeMatrixVariants({ size }), className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1.5",
+				style: { direction: "ltr" },
+				children: [/* @__PURE__ */ jsxs("div", {
+					"data-slot": "uptime-matrix-plot",
+					className: "relative",
+					style: { height: `calc(var(--uptime-matrix-height) * ${String(Math.max(1, rowCount))} + ${String(2 * Math.max(0, rowCount - 1))}px)` },
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							role: "img",
+							"aria-label": `${label}: ${summary}`,
+							className: "size-full",
+							children: /* @__PURE__ */ jsx(DitherCanvas, {
+								draw,
+								animate,
+								cell
+							})
+						}),
+						count > 0 && /* @__PURE__ */ jsx("div", {
+							ref: gridRef,
+							role: "grid",
+							tabIndex: -1,
+							"aria-label": label,
+							className: "absolute inset-0 flex flex-col",
+							style: { gap },
+							onKeyDown,
+							onBlur,
+							onPointerLeave: (event) => {
+								if (!event.currentTarget.contains(document.activeElement)) setActive(null);
+							},
+							children: rowsOf.map((row, r) => /* @__PURE__ */ jsx("div", {
+								role: "row",
+								className: "grid flex-1",
+								style: {
+									gap,
+									gridTemplateColumns: `repeat(${String(perRow)}, minmax(0, 1fr))`
+								},
+								children: row.map(({ day, index }) => /* @__PURE__ */ jsx("div", {
+									role: "gridcell",
+									"data-index": index,
+									"data-status": day.status,
+									"data-active": active === index || void 0,
+									tabIndex: roving === index ? 0 : -1,
+									className: cn("rounded-xs", "outline-none focus-visible:ring-2 focus-visible:ring-ring/55 focus-visible:ring-offset-2 focus-visible:ring-offset-background"),
+									onPointerEnter: () => {
+										setActive(index);
+									},
+									onFocus: () => {
+										setFocusIndex(index);
+										setActive(index);
+									},
+									children: /* @__PURE__ */ jsx("span", {
+										className: "sr-only",
+										children: describe(index)
+									})
+								}, `${day.label}-${String(index)}`))
+							}, r))
+						}),
+						active !== null && days[active] && /* @__PURE__ */ jsxs("div", {
+							"aria-hidden": true,
+							"data-slot": "uptime-matrix-readout",
+							className: "pointer-events-none absolute z-10 rounded-md border border-border bg-popover px-2.5 py-1.5 text-xs whitespace-nowrap text-popover-foreground shadow-md",
+							style: {
+								left: `${String(activeX * 100)}%`,
+								top: `${String(Math.floor(active / perRow) / rowCount * 100)}%`,
+								transform: `translate(${shift}, calc(-100% - 0.375rem))`
+							},
+							children: [
+								/* @__PURE__ */ jsx("p", {
+									className: "font-medium",
+									children: days[active].label
+								}),
+								/* @__PURE__ */ jsxs("p", {
+									className: "flex items-center gap-1.5 text-muted-foreground",
+									children: [
+										/* @__PURE__ */ jsx("span", {
+											className: "size-2 rounded-full",
+											style: { background: tokenToCss(UPTIME_COLORS[days[active].status]) }
+										}),
+										names[days[active].status],
+										days[active].uptime !== void 0 && /* @__PURE__ */ jsxs("span", {
+											className: "tabular-nums",
+											children: ["· ", formatUptime(days[active].uptime)]
+										})
+									]
+								}),
+								days[active].note && /* @__PURE__ */ jsx("p", {
+									className: "text-muted-foreground",
+									children: days[active].note
+								})
+							]
+						})
+					]
+				}), showAxis && count > 0 && /* @__PURE__ */ jsxs("div", {
+					"aria-hidden": true,
+					"data-slot": "uptime-matrix-axis",
+					className: "flex justify-between gap-3 font-mono text-2xs text-muted-foreground",
+					children: [
+						/* @__PURE__ */ jsx("span", { children: startLabel ?? days[0]?.label }),
+						average !== null && /* @__PURE__ */ jsxs("span", {
+							className: "tabular-nums",
+							children: [
+								formatUptime(average),
+								" ",
+								uptimeLabel.toLowerCase()
+							]
+						}),
+						/* @__PURE__ */ jsx("span", { children: endLabel ?? days[count - 1]?.label })
+					]
+				})]
+			}),
+			showLegend && /* @__PURE__ */ jsx("ul", {
+				"data-slot": "uptime-matrix-legend",
+				"aria-label": `${label} legend`,
+				className: "flex flex-wrap gap-x-3 gap-y-1 text-xs text-muted-foreground",
+				children: counts.filter(([status, n]) => status !== "unknown" || n > 0).map(([status, n]) => /* @__PURE__ */ jsxs("li", {
+					className: "flex items-center gap-1.5",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							className: "size-2.5 rounded-xs",
+							style: { background: tokenToCss(UPTIME_COLORS[status]) }
+						}),
+						names[status],
+						" ",
+						/* @__PURE__ */ jsx("span", {
+							className: "tabular-nums",
+							children: n
+						})
+					]
+				}, status))
+			}),
+			/* @__PURE__ */ jsx(DitherTable, {
+				caption: label,
+				columns: [
+					dayLabel,
+					statusLabel,
+					...withUptime ? [uptimeLabel] : [],
+					...withNote ? [noteLabel] : []
+				],
+				rows: days.map((day) => [
+					day.label,
+					names[day.status],
+					...withUptime ? [day.uptime !== void 0 ? formatUptime(day.uptime) : ""] : [],
+					...withNote ? [day.note ?? ""] : []
+				]),
+				visible: showTable
+			})
+		]
+	});
+}
+//#endregion
+export { UPTIME_COLORS, UPTIME_GAP, UPTIME_STATUSES, UptimeMatrix, dayFromKey, uptimeMatrixVariants };
+
+//# sourceMappingURL=uptime-matrix.js.map

package/dist/components/uptime-matrix/uptime-matrix.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"uptime-matrix.js","names":[],"sources":["../../../src/components/uptime-matrix/uptime-matrix.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from amicro \"System Uptime Matrix\" (MIT, © 2026 Syed Subhan Uddin). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type FocusEvent,\n  type KeyboardEvent,\n} from \"react\";\n\nimport {\n  DitherCanvas,\n  ditherFill,\n  DitherTable,\n  drift,\n  hash2,\n  makePath,\n  tokenToCss,\n  traceRoundedRect,\n  type DitherDraw,\n} from \"@/components/dither-canvas\";\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A status history drawn in dithered tiles — amicro's 90-day uptime matrix.\n * Each day is a tall tile coloured by state: success, warning and destructive\n * are the right tokens here, because the colour *is* the state. Colour is not\n * the only cue: degraded tiles are striped, outages drawn solid, and every\n * state is named in the legend, the readout and the table.\n *\n * Over the canvas sits an APG grid with one roving tab stop. Arrows move a day\n * (Up/Down a row when the tiles wrap into `columns`), Home/End go to the row's\n * ends, Ctrl+Home/End to the first and last day, Escape hides the readout. Each\n * cell's text is its readout. Days run left to right in every direction, as\n * the canvas draws them.\n */\n\nexport const uptimeMatrixVariants = cva(\"flex flex-col gap-2\", {\n  variants: {\n    size: {\n      sm: \"[--uptime-matrix-height:1.25rem]\",\n      md: \"[--uptime-matrix-height:1.75rem]\",\n      lg: \"[--uptime-matrix-height:2.5rem]\",\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport type UptimeStatus = \"operational\" | \"degraded\" | \"outage\" | \"unknown\";\n\nexport interface UptimeDay {\n  /** The day's name, e.g. a date. */\n  label: string;\n  status: UptimeStatus;\n  /** Uptime that day, in percent. */\n  uptime?: number;\n  /** A note for the readout, e.g. the incident. */\n  note?: string;\n}\n\nexport interface UptimeMatrixProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"children\">,\n    VariantProps<typeof uptimeMatrixVariants> {\n  days: readonly UptimeDay[];\n  /** What the matrix shows. Names the image, the grid and the data table. */\n  label: string;\n  /** Replaces the generated summary in the image's accessible name. */\n  description?: string;\n  /** Tiles per row. Default: every day in one row. */\n  columns?: number;\n  /** Names for each state (translate here). */\n  statusLabels?: Partial<Record<UptimeStatus, string>>;\n  formatUptime?: (percent: number) => string;\n  /** Show the state legend with counts. */\n  showLegend?: boolean;\n  /** Show the first and last day under the tiles. */\n  showAxis?: boolean;\n  /** Replace the axis labels, e.g. \"90 days ago\" and \"Today\". */\n  startLabel?: string;\n  endLabel?: string;\n  /** Show the data table. It is always present for assistive technology. */\n  showTable?: boolean;\n  animate?: boolean;\n  /** Cell pitch in CSS pixels. Default 2: tiles are thin. */\n  cell?: number;\n  /** The day whose readout shows (controlled); null hides it. */\n  activeIndex?: number | null;\n  defaultActiveIndex?: number | null;\n  onActiveIndexChange?: (index: number | null) => void;\n  /** Data table headers. */\n  dayLabel?: string;\n  statusLabel?: string;\n  uptimeLabel?: string;\n  noteLabel?: string;\n}\n\n/** Gap between tiles in CSS pixels. */\nexport const UPTIME_GAP = 2;\n\nexport const UPTIME_STATUSES: readonly UptimeStatus[] = [\n  \"operational\",\n  \"degraded\",\n  \"outage\",\n  \"unknown\",\n];\n\n/** The state token for each status. */\nexport const UPTIME_COLORS: Readonly<Record<UptimeStatus, string>> = {\n  operational: \"success\",\n  degraded: \"warning\",\n  outage: \"destructive\",\n  unknown: \"muted-foreground\",\n};\n\nconst DEFAULT_LABELS: Record<UptimeStatus, string> = {\n  operational: \"Operational\",\n  degraded: \"Degraded\",\n  outage: \"Outage\",\n  unknown: \"No data\",\n};\n\n/** The day a grid key moves to, or null when the key is not a grid key. */\nexport function dayFromKey(\n  key: string,\n  ctrl: boolean,\n  index: number,\n  count: number,\n  columns: number,\n): number | null {\n  const last = count - 1;\n  const clampTo = (value: number) => Math.min(last, Math.max(0, value));\n  const rowStart = index - (index % columns);\n  switch (key) {\n    case \"ArrowRight\":\n      return clampTo(index + 1);\n    case \"ArrowLeft\":\n      return clampTo(index - 1);\n    case \"ArrowDown\":\n      return index + columns <= last ? index + columns : index;\n    case \"ArrowUp\":\n      return index - columns >= 0 ? index - columns : index;\n    case \"Home\":\n      return ctrl ? 0 : rowStart;\n    case \"End\":\n      return ctrl ? last : clampTo(rowStart + columns - 1);\n    default:\n      return null;\n  }\n}\n\nexport function UptimeMatrix({\n  days,\n  label,\n  description,\n  columns,\n  statusLabels,\n  formatUptime = (percent) => `${String(Math.round(percent * 100) / 100)}%`,\n  showLegend = true,\n  showAxis = true,\n  startLabel,\n  endLabel,\n  size,\n  showTable = false,\n  animate = true,\n  cell = 2,\n  activeIndex,\n  defaultActiveIndex = null,\n  onActiveIndexChange,\n  dayLabel = \"Day\",\n  statusLabel = \"Status\",\n  uptimeLabel = \"Uptime\",\n  noteLabel = \"Note\",\n  className,\n  ...props\n}: UptimeMatrixProps) {\n  const [uncontrolled, setUncontrolled] = useState<number | null>(defaultActiveIndex);\n  const [focusIndex, setFocusIndex] = useState(0);\n  const gridRef = useRef<HTMLDivElement>(null);\n  const active = activeIndex !== undefined ? activeIndex : uncontrolled;\n  const count = days.length;\n  const perRow = Math.max(1, Math.min(count, columns ?? count));\n  const rowCount = Math.ceil(count / perRow);\n  const names = { ...DEFAULT_LABELS, ...statusLabels };\n\n  const setActive = (next: number | null) => {\n    if (next === active) return;\n    if (activeIndex === undefined) setUncontrolled(next);\n    onActiveIndexChange?.(next);\n  };\n\n  const draw: DitherDraw = (ctx, frame) => {\n    const { width, height, time } = frame;\n    if (count === 0) return;\n    const tileWidth = (width - UPTIME_GAP * (perRow - 1)) / perRow;\n    const tileHeight = (height - UPTIME_GAP * (rowCount - 1)) / rowCount;\n    if (tileWidth <= 0 || tileHeight <= 0) return;\n    const step = frame.cell;\n    days.forEach((day, i) => {\n      const x = (i % perRow) * (tileWidth + UPTIME_GAP);\n      const y = Math.floor(i / perRow) * (tileHeight + UPTIME_GAP);\n      const hot = active === i;\n      const dim = active !== null && !hot;\n      const status = day.status;\n      ditherFill(ctx, {\n        clip: makePath((sink) => {\n          traceRoundedRect(sink, x, y, tileWidth, tileHeight, Math.min(2, tileWidth / 2));\n        }),\n        bounds: { x, y, width: tileWidth, height: tileHeight },\n        cell: step,\n        color: frame.color(UPTIME_COLORS[status]),\n        alpha: (status === \"unknown\" ? 0.35 : 0.85) * (dim ? 0.55 : 1),\n        density: (cx, cy) => {\n          const base = (0.3 + 0.4 * drift(cx, cy, time * 1.2)) * (0.8 + 0.4 * hash2(cx, cy));\n          if (status === \"outage\") return base + 0.3;\n          // Degraded: diagonal stripes, so the state reads without its colour.\n          if (status === \"degraded\" && Math.floor((cx + cy) / (step * 2)) % 2 === 0)\n            return base * 0.35;\n          return base + (hot ? 0.2 : 0);\n        },\n      });\n    });\n  };\n\n  const describe = (i: number) => {\n    const day = days[i];\n    if (!day) return \"\";\n    const uptime =\n      day.uptime !== undefined\n        ? `, ${formatUptime(day.uptime)} ${uptimeLabel.toLowerCase()}`\n        : \"\";\n    const note = day.note ? `. ${day.note}` : \"\";\n    return `${day.label}: ${names[day.status]}${uptime}${note}`;\n  };\n\n  const counts = UPTIME_STATUSES.map(\n    (status) => [status, days.filter((day) => day.status === status).length] as const,\n  );\n  const measured = days.filter((day) => day.uptime !== undefined);\n  const average =\n    measured.length > 0\n      ? measured.reduce((sum, day) => sum + (day.uptime ?? 0), 0) / measured.length\n      : null;\n  const summary =\n    description ??\n    (count === 0\n      ? \"No data.\"\n      : `${String(count)} days: ${counts\n          .filter(([, n]) => n > 0)\n          .map(([status, n]) => `${String(n)} ${names[status].toLowerCase()}`)\n          .join(\", \")}.` +\n        (average !== null\n          ? ` Average ${uptimeLabel.toLowerCase()} ${formatUptime(average)}.`\n          : \"\"));\n\n  const roving = Math.min(focusIndex, Math.max(0, count - 1));\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === \"Escape\") {\n      if (active !== null) {\n        event.preventDefault();\n        setActive(null);\n      }\n      return;\n    }\n    const next = dayFromKey(event.key, event.ctrlKey || event.metaKey, roving, count, perRow);\n    if (next === null) return;\n    event.preventDefault();\n    gridRef.current?.querySelector<HTMLElement>(`[data-index=\"${String(next)}\"]`)?.focus();\n  };\n\n  const onBlur = (event: FocusEvent<HTMLDivElement>) => {\n    if (!event.currentTarget.contains(event.relatedTarget)) setActive(null);\n  };\n\n  const gap = `${String(UPTIME_GAP)}px`;\n  const rowsOf = Array.from({ length: rowCount }, (_, r) =>\n    days.slice(r * perRow, (r + 1) * perRow).map((day, c) => ({ day, index: r * perRow + c })),\n  );\n  const activeX = active !== null ? ((active % perRow) + 0.5) / perRow : 0;\n  const shift =\n    active !== null && (active % perRow === 0 || activeX < 0.15)\n      ? \"0%\"\n      : active !== null && (active % perRow === perRow - 1 || activeX > 0.85)\n        ? \"-100%\"\n        : \"-50%\";\n  const withUptime = measured.length > 0;\n  const withNote = days.some((day) => day.note);\n\n  return (\n    <div\n      data-slot=\"uptime-matrix\"\n      {...props}\n      className={cn(uptimeMatrixVariants({ size }), className)}\n    >\n      <div className=\"flex flex-col gap-1.5\" style={{ direction: \"ltr\" }}>\n        <div\n          data-slot=\"uptime-matrix-plot\"\n          className=\"relative\"\n          style={{\n            height: `calc(var(--uptime-matrix-height) * ${String(Math.max(1, rowCount))} + ${String(\n              UPTIME_GAP * Math.max(0, rowCount - 1),\n            )}px)`,\n          }}\n        >\n          <div role=\"img\" aria-label={`${label}: ${summary}`} className=\"size-full\">\n            <DitherCanvas draw={draw} animate={animate} cell={cell} />\n          </div>\n          {count > 0 && (\n            <div\n              ref={gridRef}\n              role=\"grid\"\n              // Focusable only by script, so the one roving cell stays the tab stop.\n              tabIndex={-1}\n              aria-label={label}\n              className=\"absolute inset-0 flex flex-col\"\n              style={{ gap }}\n              onKeyDown={onKeyDown}\n              onBlur={onBlur}\n              onPointerLeave={(event) => {\n                if (!event.currentTarget.contains(document.activeElement)) setActive(null);\n              }}\n            >\n              {rowsOf.map((row, r) => (\n                <div\n                  key={r}\n                  role=\"row\"\n                  className=\"grid flex-1\"\n                  style={{\n                    gap,\n                    gridTemplateColumns: `repeat(${String(perRow)}, minmax(0, 1fr))`,\n                  }}\n                >\n                  {row.map(({ day, index }) => (\n                    <div\n                      key={`${day.label}-${String(index)}`}\n                      role=\"gridcell\"\n                      data-index={index}\n                      data-status={day.status}\n                      data-active={active === index || undefined}\n                      tabIndex={roving === index ? 0 : -1}\n                      className={cn(\"rounded-xs\", focusRing)}\n                      onPointerEnter={() => {\n                        setActive(index);\n                      }}\n                      onFocus={() => {\n                        setFocusIndex(index);\n                        setActive(index);\n                      }}\n                    >\n                      <span className=\"sr-only\">{describe(index)}</span>\n                    </div>\n                  ))}\n                </div>\n              ))}\n            </div>\n          )}\n          {active !== null && days[active] && (\n            <div\n              aria-hidden\n              data-slot=\"uptime-matrix-readout\"\n              className=\"pointer-events-none absolute z-10 rounded-md border border-border bg-popover px-2.5 py-1.5 text-xs whitespace-nowrap text-popover-foreground shadow-md\"\n              style={{\n                left: `${String(activeX * 100)}%`,\n                top: `${String((Math.floor(active / perRow) / rowCount) * 100)}%`,\n                transform: `translate(${shift}, calc(-100% - 0.375rem))`,\n              }}\n            >\n              <p className=\"font-medium\">{days[active].label}</p>\n              <p className=\"flex items-center gap-1.5 text-muted-foreground\">\n                <span\n                  className=\"size-2 rounded-full\"\n                  style={{ background: tokenToCss(UPTIME_COLORS[days[active].status]) }}\n                />\n                {names[days[active].status]}\n                {days[active].uptime !== undefined && (\n                  <span className=\"tabular-nums\">· {formatUptime(days[active].uptime)}</span>\n                )}\n              </p>\n              {days[active].note && (\n                <p className=\"text-muted-foreground\">{days[active].note}</p>\n              )}\n            </div>\n          )}\n        </div>\n        {showAxis && count > 0 && (\n          <div\n            aria-hidden\n            data-slot=\"uptime-matrix-axis\"\n            className=\"flex justify-between gap-3 font-mono text-2xs text-muted-foreground\"\n          >\n            <span>{startLabel ?? days[0]?.label}</span>\n            {average !== null && (\n              <span className=\"tabular-nums\">\n                {formatUptime(average)} {uptimeLabel.toLowerCase()}\n              </span>\n            )}\n            <span>{endLabel ?? days[count - 1]?.label}</span>\n          </div>\n        )}\n      </div>\n      {showLegend && (\n        <ul\n          data-slot=\"uptime-matrix-legend\"\n          aria-label={`${label} legend`}\n          className=\"flex flex-wrap gap-x-3 gap-y-1 text-xs text-muted-foreground\"\n        >\n          {counts\n            .filter(([status, n]) => status !== \"unknown\" || n > 0)\n            .map(([status, n]) => (\n              <li key={status} className=\"flex items-center gap-1.5\">\n                <span\n                  aria-hidden\n                  className=\"size-2.5 rounded-xs\"\n                  style={{ background: tokenToCss(UPTIME_COLORS[status]) }}\n                />\n                {names[status]} <span className=\"tabular-nums\">{n}</span>\n              </li>\n            ))}\n        </ul>\n      )}\n      <DitherTable\n        caption={label}\n        columns={[\n          dayLabel,\n          statusLabel,\n          ...(withUptime ? [uptimeLabel] : []),\n          ...(withNote ? [noteLabel] : []),\n        ]}\n        rows={days.map((day) => [\n          day.label,\n          names[day.status],\n          ...(withUptime ? [day.uptime !== undefined ? formatUptime(day.uptime) : \"\"] : []),\n          ...(withNote ? [day.note ?? \"\"] : []),\n        ])}\n        visible={showTable}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}