img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
- className
- )}
- {...props}
- />
- )
-}
-
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
- return (
-
- )
-}
-
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
- return (
-
- )
-}
-
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
- return (
-
- )
-}
-
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
- return (
-
- )
-}
-
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
- return (
-
- )
-}
-
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
- return (
-
- )
-}
-
-export {
- Card,
- CardHeader,
- CardFooter,
- CardTitle,
- CardAction,
- CardDescription,
- CardContent,
-}
diff --git a/src/lib/components/ui/progress.tsx b/src/lib/components/ui/progress.tsx
deleted file mode 100644
index 65d0a6b..0000000
--- a/src/lib/components/ui/progress.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as React from "react"
-import { Progress as ProgressPrimitive } from "radix-ui"
-
-import { cn } from "$lib/utils"
-
-function Progress({
- className,
- value,
- ...props
-}: React.ComponentProps
) {
- return (
-
-
-
- )
-}
-
-export { Progress }
diff --git a/src/lib/components/ui/separator.tsx b/src/lib/components/ui/separator.tsx
deleted file mode 100644
index 84e3c64..0000000
--- a/src/lib/components/ui/separator.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Separator as SeparatorPrimitive } from "radix-ui"
-
-import { cn } from "$lib/utils"
-
-function Separator({
- className,
- orientation = "horizontal",
- decorative = true,
- ...props
-}: React.ComponentProps) {
- return (
-
- )
-}
-
-export { Separator }
diff --git a/src/lib/components/ui/skeleton.tsx b/src/lib/components/ui/skeleton.tsx
deleted file mode 100644
index 61466a8..0000000
--- a/src/lib/components/ui/skeleton.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { cn } from "$lib/utils"
-
-function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
- return (
-
- )
-}
-
-export { Skeleton }
diff --git a/src/lib/presentation-boundary.test.ts b/src/lib/presentation-boundary.test.ts
index 8e29ece..1a8f2a5 100644
--- a/src/lib/presentation-boundary.test.ts
+++ b/src/lib/presentation-boundary.test.ts
@@ -1,4 +1,4 @@
-import { existsSync, readdirSync, readFileSync, statSync } from "node:fs";
+import { readdirSync, readFileSync, statSync } from "node:fs";
import { join } from "node:path";
import { describe, expect, test } from "vitest";
@@ -30,22 +30,14 @@ describe("presentation content boundary", () => {
expect(forbiddenTerms.filter((term) => source.includes(term))).toEqual([]);
});
-
- test("does not keep legacy presentation component files in the React runtime", () => {
- const legacyExtension = [".sve", "lte"].join("");
-
- expect(findFiles(join(process.cwd(), "src"), legacyExtension)).toEqual([]);
- });
});
function readPresentationSource(path: string): string {
- if (!existsSync(path)) return "";
-
const stats = statSync(path);
if (stats.isFile()) {
if (path.endsWith(".test.ts")) return "";
if (path.includes(`${join("src", "lib", "ui", "stories")}${"/"}`)) return "";
- if (!/\.(tsx|ts|js|mjs|css|json)$/.test(path)) return "";
+ if (!/\.(svelte|svelte\.js|ts|js|mjs|css|json)$/.test(path)) return "";
return readFileSync(path, "utf8");
}
@@ -53,10 +45,3 @@ function readPresentationSource(path: string): string {
.map((entry) => readPresentationSource(join(path, entry)))
.join("\n");
}
-
-function findFiles(path: string, extension: string): string[] {
- const stats = statSync(path);
- if (stats.isFile()) return path.endsWith(extension) ? [path] : [];
-
- return readdirSync(path).flatMap((entry) => findFiles(join(path, entry), extension));
-}
diff --git a/src/lib/ui/components/Badge.svelte b/src/lib/ui/components/Badge.svelte
new file mode 100644
index 0000000..2e9fc8d
--- /dev/null
+++ b/src/lib/ui/components/Badge.svelte
@@ -0,0 +1,14 @@
+
+
+
diff --git a/src/lib/ui/components/Badge.tsx b/src/lib/ui/components/Badge.tsx
deleted file mode 100644
index a21ade8..0000000
--- a/src/lib/ui/components/Badge.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { UiSeverity } from "../types";
-import { StatusBadge } from "./StatusBadge";
-
-export interface BadgeProps {
- label: string;
- severity?: UiSeverity;
-}
-
-export function Badge({ label, severity = "neutral" }: BadgeProps) {
- return ;
-}
diff --git a/src/lib/ui/components/Button.svelte b/src/lib/ui/components/Button.svelte
new file mode 100644
index 0000000..fa26d5f
--- /dev/null
+++ b/src/lib/ui/components/Button.svelte
@@ -0,0 +1,85 @@
+
+
+
+
+
diff --git a/src/lib/ui/components/Button.tsx b/src/lib/ui/components/Button.tsx
deleted file mode 100644
index 8ae3b4e..0000000
--- a/src/lib/ui/components/Button.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import type { ButtonHTMLAttributes } from "react";
-import { IconGlyph } from "./IconGlyph";
-
-export interface ButtonProps
- extends Omit, "type"> {
- label: string;
- variant?: "primary" | "secondary" | "danger" | "ghost";
- size?: "default" | "compact";
- icon?: string;
- loading?: boolean;
- type?: "button" | "submit" | "reset";
-}
-
-export function Button({
- label,
- variant = "primary",
- size = "default",
- icon,
- disabled = false,
- loading = false,
- type = "button",
- className = "",
- ...buttonProps
-}: ButtonProps) {
- return (
-
- );
-}
diff --git a/src/lib/ui/components/CornerBracketFrame.svelte b/src/lib/ui/components/CornerBracketFrame.svelte
new file mode 100644
index 0000000..ffda881
--- /dev/null
+++ b/src/lib/ui/components/CornerBracketFrame.svelte
@@ -0,0 +1,97 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/lib/ui/components/CornerBracketFrame.tsx b/src/lib/ui/components/CornerBracketFrame.tsx
deleted file mode 100644
index 1dfd4f7..0000000
--- a/src/lib/ui/components/CornerBracketFrame.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-export interface CornerBracketFrameProps {
- density?: "regular" | "tight";
- size?: "sm" | "md" | "lg";
- tone?: "neutral" | "accent" | "danger";
-}
-
-export function CornerBracketFrame({
- density = "regular",
- size = "md",
- tone = "neutral",
-}: CornerBracketFrameProps) {
- return (
-
-
-
-
-
-
- );
-}
diff --git a/src/lib/ui/components/DashboardFrame.svelte b/src/lib/ui/components/DashboardFrame.svelte
new file mode 100644
index 0000000..bd1b93d
--- /dev/null
+++ b/src/lib/ui/components/DashboardFrame.svelte
@@ -0,0 +1,154 @@
+
+
+
+
+
+
+
+
+ {#each dashboard.serviceGroups as group (group.id)}
+
+ {/each}
+
+
+
+
+
+
diff --git a/src/lib/ui/components/DashboardFrame.tsx b/src/lib/ui/components/DashboardFrame.tsx
deleted file mode 100644
index f07e452..0000000
--- a/src/lib/ui/components/DashboardFrame.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { useId } from "react";
-import type { UiDashboardPreview } from "../types";
-import { ModuleCard } from "./ModuleCard";
-import { ServicePanel } from "./ServicePanel";
-import { StatusStrip } from "./StatusStrip";
-import { TelemetryGrid } from "./TelemetryGrid";
-import "./styles.css";
-
-export interface DashboardFrameProps {
- dashboard: UiDashboardPreview;
- titleId?: string;
-}
-
-export function DashboardFrame({ dashboard, titleId }: DashboardFrameProps) {
- const generatedTitleId = useId();
- const resolvedTitleId = titleId || `${generatedTitleId}-title`;
-
- return (
-
-
-
-
-
-
- {dashboard.serviceGroups.map((group) => (
-
- ))}
-
-
-
-
- );
-}
diff --git a/src/lib/ui/components/DashboardHeader.svelte b/src/lib/ui/components/DashboardHeader.svelte
new file mode 100644
index 0000000..e8d13f2
--- /dev/null
+++ b/src/lib/ui/components/DashboardHeader.svelte
@@ -0,0 +1,71 @@
+
+
+
+
+
diff --git a/src/lib/ui/components/DashboardHeader.tsx b/src/lib/ui/components/DashboardHeader.tsx
deleted file mode 100644
index 68b4e11..0000000
--- a/src/lib/ui/components/DashboardHeader.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { useId } from "react";
-import type { UiModuleBlock } from "../types";
-import { ModuleCard } from "./ModuleCard";
-
-export interface DashboardHeaderProps {
- title: string;
- subtitle?: string;
- eyebrow?: string;
- module?: UiModuleBlock;
-}
-
-export function DashboardHeader({
- title,
- subtitle,
- eyebrow,
- module,
-}: DashboardHeaderProps) {
- const titleId = useId();
-
- return (
-
-
- {eyebrow ?
{eyebrow}
: null}
-
{title}
- {subtitle ?
{subtitle} : null}
-
- {content}
-
- );
-}
diff --git a/src/lib/ui/components/FooterStatusCell.svelte b/src/lib/ui/components/FooterStatusCell.svelte
new file mode 100644
index 0000000..997ae3e
--- /dev/null
+++ b/src/lib/ui/components/FooterStatusCell.svelte
@@ -0,0 +1,8 @@
+
+
+
diff --git a/src/lib/ui/components/FooterStatusCell.tsx b/src/lib/ui/components/FooterStatusCell.tsx
deleted file mode 100644
index dcfb8b4..0000000
--- a/src/lib/ui/components/FooterStatusCell.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { UiStatusItem } from "../types";
-import { FooterCell } from "./FooterCell";
-
-export function FooterStatusCell({ item }: { item: UiStatusItem }) {
- return ;
-}
diff --git a/src/lib/ui/components/GridFrame.svelte b/src/lib/ui/components/GridFrame.svelte
new file mode 100644
index 0000000..1368dda
--- /dev/null
+++ b/src/lib/ui/components/GridFrame.svelte
@@ -0,0 +1,30 @@
+
+
+
+ {@render children?.()}
+
+
+
diff --git a/src/lib/ui/components/GridFrame.tsx b/src/lib/ui/components/GridFrame.tsx
deleted file mode 100644
index 0d9c91f..0000000
--- a/src/lib/ui/components/GridFrame.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { PropsWithChildren } from "react";
-
-export interface GridFrameProps extends PropsWithChildren {
- density?: "compact" | "dense";
-}
-
-export function GridFrame({ children, density = "dense" }: GridFrameProps) {
- return (
-
- );
-}
diff --git a/src/lib/ui/components/IconButton.svelte b/src/lib/ui/components/IconButton.svelte
new file mode 100644
index 0000000..ce5ea78
--- /dev/null
+++ b/src/lib/ui/components/IconButton.svelte
@@ -0,0 +1,57 @@
+
+
+
+
+
diff --git a/src/lib/ui/components/IconButton.tsx b/src/lib/ui/components/IconButton.tsx
deleted file mode 100644
index 92fcb46..0000000
--- a/src/lib/ui/components/IconButton.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { ButtonHTMLAttributes } from "react";
-import { IconGlyph } from "./IconGlyph";
-
-export interface IconButtonProps
- extends Omit, "type"> {
- icon: string;
- label: string;
- active?: boolean;
- type?: "button" | "submit" | "reset";
-}
-
-export function IconButton({
- icon,
- label,
- active = false,
- disabled = false,
- type = "button",
- className = "",
- ...buttonProps
-}: IconButtonProps) {
- return (
-
- );
-}
diff --git a/src/lib/ui/components/IconGlyph.svelte b/src/lib/ui/components/IconGlyph.svelte
new file mode 100644
index 0000000..a231f6d
--- /dev/null
+++ b/src/lib/ui/components/IconGlyph.svelte
@@ -0,0 +1,53 @@
+
+
+
+ {#if name}
+
+ {/if}
+
+
+
diff --git a/src/lib/ui/components/IconGlyph.tsx b/src/lib/ui/components/IconGlyph.tsx
deleted file mode 100644
index d21feb1..0000000
--- a/src/lib/ui/components/IconGlyph.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Icon } from "@iconify/react";
-
-export interface IconGlyphProps {
- name?: string;
- label?: string;
- size?: "sm" | "md" | "lg";
-}
-
-export function IconGlyph({ name, label, size = "md" }: IconGlyphProps) {
- return (
-
- {name ? : null}
-
- );
-}
diff --git a/src/lib/ui/components/LineChart.svelte b/src/lib/ui/components/LineChart.svelte
new file mode 100644
index 0000000..f8cac24
--- /dev/null
+++ b/src/lib/ui/components/LineChart.svelte
@@ -0,0 +1,147 @@
+
+
+
+
+
+
+
diff --git a/src/lib/ui/components/LineChart.tsx b/src/lib/ui/components/LineChart.tsx
deleted file mode 100644
index 386b515..0000000
--- a/src/lib/ui/components/LineChart.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import "uplot/dist/uPlot.min.css";
-import { useEffect, useRef } from "react";
-import type { UiSeverity } from "../types";
-
-export interface LineChartProps {
- values?: number[];
- severity?: UiSeverity;
- label?: string;
-}
-
-export function LineChart({
- values = [],
- severity = "neutral",
- label = "Telemetry trend",
-}: LineChartProps) {
- const chartElementRef = useRef(null);
- const valuesKey = values.join(",");
-
- useEffect(() => {
- const chartElement = chartElementRef.current;
- if (!chartElement) return;
-
- let chart: ChartInstance | null = null;
- let resizeObserver: ResizeObserver | null = null;
- let disposed = false;
-
- void import("uplot").then((module) => {
- if (disposed || !chartElementRef.current) return;
-
- const element = chartElementRef.current;
- chart = new module.default(chartOptions(element, severity), chartData(values), element);
-
- if (typeof ResizeObserver !== "undefined") {
- resizeObserver = new ResizeObserver(() => {
- chart?.setSize(chartSize(element));
- });
- resizeObserver.observe(element);
- }
- });
-
- return () => {
- disposed = true;
- resizeObserver?.disconnect();
- chart?.destroy();
- };
- }, [severity, valuesKey, values]);
-
- return (
-
- );
-}
-
-type ChartInstance = {
- destroy(): void;
- setSize(size: { width: number; height: number }): void;
-};
-
-function chartData(values: number[]): import("uplot").AlignedData {
- const normalized = values.length ? values : [0, 0];
- return [
- normalized.map((_, index) => index),
- normalized.map((value) => Math.max(0, Number(value) || 0)),
- ];
-}
-
-function chartOptions(
- element: HTMLElement,
- severity: UiSeverity,
-): import("uplot").Options {
- return {
- ...chartSize(element),
- cursor: { show: false },
- legend: { show: false },
- padding: [2, 0, 2, 0],
- scales: {
- x: { time: false },
- y: { auto: true },
- },
- axes: [{ show: false }, { show: false }],
- series: [
- {},
- {
- stroke: chartStroke(element, severity),
- width: 2,
- points: { show: false },
- },
- ],
- };
-}
-
-function chartSize(element?: HTMLElement): { width: number; height: number } {
- return {
- width: Math.max(80, Math.round(element?.clientWidth || 120)),
- height: Math.max(20, Math.round(element?.clientHeight || 24)),
- };
-}
-
-function chartStroke(element: HTMLElement, severity: UiSeverity): string {
- const styles = window.getComputedStyle(element.closest(".line-chart") || element);
- const currentColor = styles.color;
- if (currentColor) return currentColor;
- if (severity === "danger") return "#ff1744";
- if (severity === "warning") return "#ffb020";
- return "#d7ff00";
-}
diff --git a/src/lib/ui/components/ModuleCard.svelte b/src/lib/ui/components/ModuleCard.svelte
new file mode 100644
index 0000000..3d4a725
--- /dev/null
+++ b/src/lib/ui/components/ModuleCard.svelte
@@ -0,0 +1,104 @@
+
+
+
+
+
diff --git a/src/lib/ui/components/ModuleCard.tsx b/src/lib/ui/components/ModuleCard.tsx
deleted file mode 100644
index d05bee0..0000000
--- a/src/lib/ui/components/ModuleCard.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { useId } from "react";
-import type { UiModuleBlock } from "../types";
-import { IconGlyph } from "./IconGlyph";
-
-export interface ModuleCardProps {
- module: UiModuleBlock;
-}
-
-export function ModuleCard({ module }: ModuleCardProps) {
- const generatedId = useId();
- const titleId = `${generatedId}-title`;
- const ariaLabel = module.title ? undefined : module.label || module.id;
-
- return (
-
- );
-}
diff --git a/src/lib/ui/components/Panel.svelte b/src/lib/ui/components/Panel.svelte
new file mode 100644
index 0000000..e146f63
--- /dev/null
+++ b/src/lib/ui/components/Panel.svelte
@@ -0,0 +1,81 @@
+
+
+
+ {#if title}
+
+ {/if}
+
+ {@render children?.()}
+
+
+
+
diff --git a/src/lib/ui/components/Panel.tsx b/src/lib/ui/components/Panel.tsx
deleted file mode 100644
index 20acbd0..0000000
--- a/src/lib/ui/components/Panel.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { PropsWithChildren } from "react";
-
-export interface PanelProps extends PropsWithChildren {
- title?: string;
- density?: "compact" | "dense";
-}
-
-export function Panel({ title, density = "dense", children }: PanelProps) {
- return (
-
- {title ? (
-
- ) : null}
- {children}
-
- );
-}
diff --git a/src/lib/ui/components/ProgressMeter.svelte b/src/lib/ui/components/ProgressMeter.svelte
new file mode 100644
index 0000000..501d8c7
--- /dev/null
+++ b/src/lib/ui/components/ProgressMeter.svelte
@@ -0,0 +1,58 @@
+
+
+
+ {#if progress !== null}
+
+ {/if}
+
+
+
diff --git a/src/lib/ui/components/ProgressMeter.tsx b/src/lib/ui/components/ProgressMeter.tsx
deleted file mode 100644
index c7278bf..0000000
--- a/src/lib/ui/components/ProgressMeter.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { CSSProperties } from "react";
-import { clampPercent } from "../format";
-import type { UiSeverity } from "../types";
-
-export interface ProgressMeterProps {
- value?: number;
- severity?: UiSeverity;
- label?: string;
-}
-
-export function ProgressMeter({
- value,
- severity = "neutral",
- label = "Progress",
-}: ProgressMeterProps) {
- const progress = value === undefined ? null : clampPercent(value);
-
- return (
-
- {progress !== null ? (
-
- ) : null}
-
- );
-}
diff --git a/src/lib/ui/components/ScanlineField.svelte b/src/lib/ui/components/ScanlineField.svelte
new file mode 100644
index 0000000..4514830
--- /dev/null
+++ b/src/lib/ui/components/ScanlineField.svelte
@@ -0,0 +1,66 @@
+
+
+
+
+
diff --git a/src/lib/ui/components/ScanlineField.tsx b/src/lib/ui/components/ScanlineField.tsx
deleted file mode 100644
index 017fa0a..0000000
--- a/src/lib/ui/components/ScanlineField.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-export interface ScanlineFieldProps {
- intensity?: "soft" | "medium" | "hard";
- size?: "sm" | "md" | "lg";
- tone?: "neutral" | "accent" | "warning";
-}
-
-export function ScanlineField({
- intensity = "medium",
- size = "md",
- tone = "neutral",
-}: ScanlineFieldProps) {
- return (
-
- );
-}
diff --git a/src/lib/ui/components/Separator.svelte b/src/lib/ui/components/Separator.svelte
new file mode 100644
index 0000000..f2ca968
--- /dev/null
+++ b/src/lib/ui/components/Separator.svelte
@@ -0,0 +1,39 @@
+
+
+
+
+
diff --git a/src/lib/ui/components/Separator.tsx b/src/lib/ui/components/Separator.tsx
deleted file mode 100644
index ca1a955..0000000
--- a/src/lib/ui/components/Separator.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-export interface SeparatorProps {
- orientation?: "horizontal" | "vertical";
- dense?: boolean;
-}
-
-export function Separator({
- orientation = "horizontal",
- dense = false,
-}: SeparatorProps) {
- return (
-
- );
-}
diff --git a/src/lib/ui/components/ServiceGroupPanel.svelte b/src/lib/ui/components/ServiceGroupPanel.svelte
new file mode 100644
index 0000000..56ccdbb
--- /dev/null
+++ b/src/lib/ui/components/ServiceGroupPanel.svelte
@@ -0,0 +1,8 @@
+
+
+
diff --git a/src/lib/ui/components/ServiceGroupPanel.tsx b/src/lib/ui/components/ServiceGroupPanel.tsx
deleted file mode 100644
index 4252cc9..0000000
--- a/src/lib/ui/components/ServiceGroupPanel.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { UiServiceGroup } from "../types";
-import { ServicePanel } from "./ServicePanel";
-
-export function ServiceGroupPanel({ group }: { group: UiServiceGroup }) {
- return ;
-}
diff --git a/src/lib/ui/components/ServicePanel.svelte b/src/lib/ui/components/ServicePanel.svelte
new file mode 100644
index 0000000..6bd5e98
--- /dev/null
+++ b/src/lib/ui/components/ServicePanel.svelte
@@ -0,0 +1,30 @@
+
+
+
+
+ {#if group.summary?.length}
+
+ {/if}
+ {#each group.services as service (service.id)}
+
+ {/each}
+
+
-
- {group.summary?.length ? (
-
- ) : null}
- {group.services.map((service) => (
-
- ))}
-
-
+
{service.label}
+
{service.description}
+
-
{service.label}
-
{service.description}
-
+
+
+
+
+
+
+
diff --git a/src/lib/ui/components/SignalTrace.tsx b/src/lib/ui/components/SignalTrace.tsx
deleted file mode 100644
index 86bc924..0000000
--- a/src/lib/ui/components/SignalTrace.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-export interface SignalTraceProps {
- density?: "regular" | "tight";
- orientation?: "horizontal" | "vertical";
- tone?: "neutral" | "accent" | "warning";
-}
-
-export function SignalTrace({
- density = "regular",
- orientation = "horizontal",
- tone = "accent",
-}: SignalTraceProps) {
- return (
-
-
-
-
-
-
- );
-}
diff --git a/src/lib/ui/components/Sparkline.svelte b/src/lib/ui/components/Sparkline.svelte
new file mode 100644
index 0000000..78b96dd
--- /dev/null
+++ b/src/lib/ui/components/Sparkline.svelte
@@ -0,0 +1,58 @@
+
+
+
+
+
+
+
diff --git a/src/lib/ui/components/Sparkline.tsx b/src/lib/ui/components/Sparkline.tsx
deleted file mode 100644
index a79f532..0000000
--- a/src/lib/ui/components/Sparkline.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import type { UiSeverity } from "../types";
-
-export interface SparklineProps {
- values?: number[];
- severity?: UiSeverity;
-}
-
-export function Sparkline({
- values = [],
- severity = "neutral",
-}: SparklineProps) {
- const points = toPoints(values);
-
- return (
-
- );
-}
-
-function toPoints(values: number[]): string {
- if (values.length === 0) return "";
- const max = Math.max(...values, 1);
- const step = values.length > 1 ? 100 / (values.length - 1) : 100;
- return values
- .map((value, index) => {
- const x = index * step;
- const y = 24 - (Math.max(0, value) / max) * 22;
- return `${x.toFixed(2)},${y.toFixed(2)}`;
- })
- .join(" ");
-}
diff --git a/src/lib/ui/components/StatusBadge.svelte b/src/lib/ui/components/StatusBadge.svelte
new file mode 100644
index 0000000..c01dab8
--- /dev/null
+++ b/src/lib/ui/components/StatusBadge.svelte
@@ -0,0 +1,53 @@
+
+
+{label}
+
+
diff --git a/src/lib/ui/components/StatusBadge.tsx b/src/lib/ui/components/StatusBadge.tsx
deleted file mode 100644
index fb63a04..0000000
--- a/src/lib/ui/components/StatusBadge.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { UiSeverity } from "../types";
-
-export interface StatusBadgeProps {
- label: string;
- severity?: UiSeverity;
-}
-
-export function StatusBadge({ label, severity = "neutral" }: StatusBadgeProps) {
- return (
-
- {label}
-
- );
-}
diff --git a/src/lib/ui/components/StatusStrip.svelte b/src/lib/ui/components/StatusStrip.svelte
new file mode 100644
index 0000000..6590f44
--- /dev/null
+++ b/src/lib/ui/components/StatusStrip.svelte
@@ -0,0 +1,34 @@
+
+
+
+ {#each items as item (item.id)}
+
+ {/each}
+
+
+
diff --git a/src/lib/ui/components/StatusStrip.tsx b/src/lib/ui/components/StatusStrip.tsx
deleted file mode 100644
index fbbd89e..0000000
--- a/src/lib/ui/components/StatusStrip.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { UiStatusItem } from "../types";
-import { FooterCell } from "./FooterCell";
-
-export interface StatusStripProps {
- id?: string;
- items: UiStatusItem[];
- compact?: boolean;
-}
-
-export function StatusStrip({ id, items, compact = false }: StatusStripProps) {
- return (
-
- {items.map((item) => (
-
- ))}
-
- );
-}
diff --git a/src/lib/ui/components/SystemState.svelte b/src/lib/ui/components/SystemState.svelte
new file mode 100644
index 0000000..4395618
--- /dev/null
+++ b/src/lib/ui/components/SystemState.svelte
@@ -0,0 +1,67 @@
+
+
+
+
+
+
{title}
+ {#if detail}
+
{detail}
+ {/if}
+
-
{title}
- {detail ?
{detail}
: null}
-
{card.label}
+
+ {value}
+ {#if progress !== null}
+
+
+
+ {/if}
+ {#if card.sparkline?.length}
+
+ {/if}
+ {#if card.detail || card.description}
+ {card.detail || card.description}
+ {/if}
+
+
+
+
+
diff --git a/src/lib/ui/components/TelemetryCard.tsx b/src/lib/ui/components/TelemetryCard.tsx
deleted file mode 100644
index 950a1e0..0000000
--- a/src/lib/ui/components/TelemetryCard.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import type { CSSProperties } from "react";
-import { clampPercent, formatMetricValue } from "../format";
-import type { UiTelemetryCard } from "../types";
-import { IconGlyph } from "./IconGlyph";
-import { LineChart } from "./LineChart";
-
-export interface TelemetryCardProps {
- card: UiTelemetryCard;
-}
-
-export function TelemetryCard({ card }: TelemetryCardProps) {
- const progress = resolveProgress(card);
- const value = formatMetricValue(card.value);
-
- return (
-
-
- {card.icon ? : null}
- {card.label}
-
- {value}
- {progress !== null ? (
-
-
-
- ) : null}
- {card.sparkline?.length ? (
-
- ) : null}
- {card.detail || card.description ? (
- {card.detail || card.description}
- ) : null}
-
- );
-}
-
-function resolveProgress(card: UiTelemetryCard): number | null {
- if (typeof card.progress === "number") return clampPercent(card.progress);
- if (card.value.kind !== "percent") return null;
-
- const progress = Number(card.value.value);
- return Number.isFinite(progress) ? clampPercent(progress) : null;
-}
diff --git a/src/lib/ui/components/TelemetryGrid.svelte b/src/lib/ui/components/TelemetryGrid.svelte
new file mode 100644
index 0000000..388d0c9
--- /dev/null
+++ b/src/lib/ui/components/TelemetryGrid.svelte
@@ -0,0 +1,34 @@
+
+
+
+ {#each cards as card (card.id)}
+
+ {/each}
+
+
+
diff --git a/src/lib/ui/components/TelemetryGrid.tsx b/src/lib/ui/components/TelemetryGrid.tsx
deleted file mode 100644
index 773ece5..0000000
--- a/src/lib/ui/components/TelemetryGrid.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { UiTelemetryCard } from "../types";
-import { TelemetryCard } from "./TelemetryCard";
-
-export interface TelemetryGridProps {
- cards: UiTelemetryCard[];
-}
-
-export function TelemetryGrid({ cards }: TelemetryGridProps) {
- return (
-
- {cards.map((card) => (
-
- ))}
-
- );
-}
diff --git a/src/lib/ui/components/TelemetryStrip.svelte b/src/lib/ui/components/TelemetryStrip.svelte
new file mode 100644
index 0000000..a8beee3
--- /dev/null
+++ b/src/lib/ui/components/TelemetryStrip.svelte
@@ -0,0 +1,8 @@
+
+
+
diff --git a/src/lib/ui/components/TelemetryStrip.tsx b/src/lib/ui/components/TelemetryStrip.tsx
deleted file mode 100644
index 765c1e2..0000000
--- a/src/lib/ui/components/TelemetryStrip.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { UiTelemetryCard } from "../types";
-import { TelemetryGrid } from "./TelemetryGrid";
-
-export function TelemetryStrip({ cards }: { cards: UiTelemetryCard[] }) {
- return ;
-}
diff --git a/src/lib/ui/components/WeatherModule.svelte b/src/lib/ui/components/WeatherModule.svelte
new file mode 100644
index 0000000..295f195
--- /dev/null
+++ b/src/lib/ui/components/WeatherModule.svelte
@@ -0,0 +1,8 @@
+
+
+
diff --git a/src/lib/ui/components/WeatherModule.tsx b/src/lib/ui/components/WeatherModule.tsx
deleted file mode 100644
index 0967cfb..0000000
--- a/src/lib/ui/components/WeatherModule.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { UiModuleBlock } from "../types";
-import { ModuleCard } from "./ModuleCard";
-
-export function WeatherModule({ module }: { module: UiModuleBlock }) {
- return ;
-}
diff --git a/src/lib/ui/components/render.test.ts b/src/lib/ui/components/render.test.ts
new file mode 100644
index 0000000..4a8a145
--- /dev/null
+++ b/src/lib/ui/components/render.test.ts
@@ -0,0 +1,153 @@
+import { render } from "svelte/server";
+import { describe, expect, test } from "vitest";
+import Button from "./Button.svelte";
+import DashboardFrame from "./DashboardFrame.svelte";
+import FooterCell from "./FooterCell.svelte";
+import IconButton from "./IconButton.svelte";
+import ServiceRow from "./ServiceRow.svelte";
+import TelemetryCard from "./TelemetryCard.svelte";
+import { dashboardPreviewFixtures } from "../fixtures";
+
+describe("dashboard UI components", () => {
+ test("renders the primary generic dashboard fixture", () => {
+ const { body } = render(DashboardFrame, {
+ props: {
+ dashboard: dashboardPreviewFixtures.primary,
+ },
+ });
+
+ expect(body).toContain("Operations Console");
+ expect(body).toContain("Core Throughput");
+ expect(body).toContain("Queue Workers");
+ expect(body).toContain("data-icon-name=\"mdi:server-network\"");
+ expect(body).toContain("data-severity=\"warning\"");
+ expect(body).not.toContain("dashboard-title");
+ });
+
+ test("renders another generic dashboard fixture through the same component", () => {
+ const { body } = render(DashboardFrame, {
+ props: {
+ dashboard: dashboardPreviewFixtures.secondary,
+ },
+ });
+
+ expect(body).toContain("Support Desk");
+ expect(body).toContain("Response Window");
+ expect(body).toContain("Regional Nodes");
+ expect(body).toContain("data-icon-name=\"mdi:headset\"");
+ expect(body).toContain("data-severity=\"loading\"");
+ });
+
+ test("renders optional service and status links as focusable anchors", () => {
+ const service = render(ServiceRow, {
+ props: {
+ service: {
+ id: "linked-service",
+ label: "Linked Service",
+ description: "Generic linked destination",
+ severity: "ok",
+ detail: "ready",
+ link: { href: "https://example.test/service", external: true },
+ },
+ },
+ });
+ const footer = render(FooterCell, {
+ props: {
+ item: {
+ id: "linked-status",
+ label: "Linked Status",
+ value: "open",
+ severity: "neutral",
+ link: { href: "https://example.test/status" },
+ },
+ },
+ });
+
+ expect(service.body).toContain(" {
+ const { body } = render(DashboardFrame, {
+ props: {
+ dashboard: dashboardPreviewFixtures.primary,
+ },
+ });
+
+ expect(body).toContain("data-model-id=\"queue-workers\"");
+ expect(body).toContain("data-model-id=\"dashboard-status\"");
+ });
+
+ test("does not render progress bars for non-percent metrics without explicit progress", () => {
+ const withoutProgress = render(TelemetryCard, {
+ props: {
+ card: {
+ id: "bytes",
+ label: "Bytes Metric",
+ value: { kind: "bytes", value: 2048 },
+ severity: "neutral",
+ },
+ },
+ });
+ const withProgress = render(TelemetryCard, {
+ props: {
+ card: {
+ id: "bytes-with-progress",
+ label: "Bytes With Progress",
+ value: { kind: "bytes", value: 2048 },
+ progress: 42,
+ severity: "neutral",
+ },
+ },
+ });
+
+ expect(withoutProgress.body).not.toContain("telemetry-card__bar");
+ expect(withProgress.body).toContain("--metric-progress: 42%");
+ });
+
+ test("renders telemetry trends through the uPlot chart surface", () => {
+ const { body } = render(TelemetryCard, {
+ props: {
+ card: {
+ id: "trend-card",
+ label: "Trend Card",
+ value: { kind: "percent", value: 64 },
+ sparkline: [18, 24, 64],
+ severity: "ok",
+ },
+ },
+ });
+
+ expect(body).toContain('data-chart-library="uplot"');
+ });
+
+ test("base button controls forward native attributes", () => {
+ const button = render(Button, {
+ props: {
+ label: "Refresh",
+ id: "refresh-action",
+ class: "custom-action",
+ "aria-controls": "refresh-target",
+ },
+ });
+ const iconButton = render(IconButton, {
+ props: {
+ icon: "mdi:refresh",
+ label: "Refresh status",
+ id: "refresh-icon-action",
+ class: "custom-icon-action",
+ "aria-expanded": "false",
+ },
+ });
+
+ expect(button.body).toContain("id=\"refresh-action\"");
+ expect(button.body).toContain("class=\"ui-button custom-action ");
+ expect(button.body).toContain("aria-controls=\"refresh-target\"");
+ expect(iconButton.body).toContain("id=\"refresh-icon-action\"");
+ expect(iconButton.body).toContain("class=\"icon-button custom-icon-action ");
+ expect(iconButton.body).toContain("aria-expanded=\"false\"");
+ });
+});
diff --git a/src/lib/ui/components/render.test.tsx b/src/lib/ui/components/render.test.tsx
deleted file mode 100644
index 14c1ff5..0000000
--- a/src/lib/ui/components/render.test.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-import { renderToString } from "react-dom/server";
-import { describe, expect, test } from "vitest";
-import { Button } from "./Button";
-import { DashboardFrame } from "./DashboardFrame";
-import { FooterCell } from "./FooterCell";
-import { IconButton } from "./IconButton";
-import { ServiceRow } from "./ServiceRow";
-import { TelemetryCard } from "./TelemetryCard";
-import { dashboardPreviewFixtures } from "../fixtures";
-
-describe("dashboard UI components", () => {
- test("renders the primary generic dashboard fixture", () => {
- const body = renderToString(
- ,
- );
-
- expect(body).toContain("Operations Console");
- expect(body).toContain("Core Throughput");
- expect(body).toContain("Queue Workers");
- expect(body).toContain("data-icon-name=\"mdi:server-network\"");
- expect(body).toContain("data-severity=\"warning\"");
- expect(body).not.toContain("dashboard-title");
- });
-
- test("renders another generic dashboard fixture through the same component", () => {
- const body = renderToString(
- ,
- );
-
- expect(body).toContain("Support Desk");
- expect(body).toContain("Response Window");
- expect(body).toContain("Regional Nodes");
- expect(body).toContain("data-icon-name=\"mdi:headset\"");
- expect(body).toContain("data-severity=\"loading\"");
- });
-
- test("renders optional service and status links as focusable anchors", () => {
- const service = renderToString(
- ,
- );
- const footer = renderToString(
- ,
- );
-
- expect(service).toContain(" {
- const body = renderToString(
- ,
- );
-
- expect(body).toContain("data-model-id=\"queue-workers\"");
- expect(body).toContain("data-model-id=\"dashboard-status\"");
- });
-
- test("does not render progress bars for non-percent metrics without explicit progress", () => {
- const withoutProgress = renderToString(
- ,
- );
- const withProgress = renderToString(
- ,
- );
-
- expect(withoutProgress).not.toContain("telemetry-card__bar");
- expect(withProgress).toContain("--metric-progress:42%");
- });
-
- test("renders telemetry trends through the uPlot chart surface", () => {
- const body = renderToString(
- ,
- );
-
- expect(body).toContain('data-chart-library="uplot"');
- });
-
- test("base button controls forward native attributes", () => {
- const button = renderToString(
- ,
- );
- const iconButton = renderToString(
- ,
- );
-
- expect(button).toContain("id=\"refresh-action\"");
- expect(button).toContain("class=\"ui-button custom-action ");
- expect(button).toContain("aria-controls=\"refresh-target\"");
- expect(iconButton).toContain("id=\"refresh-icon-action\"");
- expect(iconButton).toContain("class=\"icon-button custom-icon-action ");
- expect(iconButton).toContain("aria-expanded=\"false\"");
- });
-});
diff --git a/src/lib/ui/components/styles.css b/src/lib/ui/components/styles.css
deleted file mode 100644
index d8111f4..0000000
--- a/src/lib/ui/components/styles.css
+++ /dev/null
@@ -1,655 +0,0 @@
-.dashboard-frame {
- display: grid;
- box-sizing: border-box;
- height: 100vh;
- min-height: 100vh;
- gap: 0.36rem;
- grid-template-rows: auto auto minmax(0, 1fr) auto;
- overflow: hidden;
- padding: clamp(0.42rem, 0.65vw, 0.62rem);
- background:
- linear-gradient(90deg, transparent 0 49%, rgba(255, 255, 255, 0.08) 50%, transparent 51%),
- rgba(0, 0, 0, 0.18);
-}
-
-.dashboard-frame__header,
-.dashboard-header {
- display: grid;
- gap: 0.5rem;
- align-items: start;
- border-bottom: var(--ui-border);
-}
-
-.dashboard-frame__header {
- grid-template-columns: minmax(30rem, 1fr) minmax(30rem, 0.9fr);
- min-height: 5.35rem;
- padding-bottom: 0.34rem;
-}
-
-.dashboard-header {
- grid-template-columns: minmax(0, 1fr) auto;
- padding: var(--ui-space-3);
-}
-
-.dashboard-frame__header p,
-.dashboard-frame__header span,
-.dashboard-header p,
-.dashboard-header span,
-.dashboard-frame h1,
-.dashboard-header h1 {
- margin: 0;
- text-transform: uppercase;
-}
-
-.dashboard-frame__header p,
-.dashboard-frame__header span,
-.dashboard-header p,
-.dashboard-header span {
- color: var(--ui-color-muted);
- font-size: 0.78rem;
- font-weight: 800;
-}
-
-.dashboard-frame h1,
-.dashboard-header h1 {
- max-width: 100%;
- overflow-wrap: anywhere;
- font-family: var(--ui-font-display);
- font-size: clamp(2.2rem, 3.3vw, 2.95rem);
- font-weight: 850;
- letter-spacing: 0;
- line-height: 0.8;
- white-space: nowrap;
-}
-
-.dashboard-frame__modules {
- display: grid;
- grid-template-columns: minmax(15rem, 0.66fr) minmax(17rem, 1fr);
- justify-content: end;
- gap: 0.5rem;
-}
-
-.dashboard-frame__panels {
- display: grid;
- grid-template-columns: repeat(4, minmax(0, 1fr));
- align-content: start;
- gap: 0.36rem;
- min-height: 0;
- overflow: hidden;
-}
-
-.dashboard-frame__panels .service-panel[data-layout="grid"] {
- grid-column: 1 / -1;
-}
-
-.dashboard-frame__panels .service-panel[data-layout="grid"] .panel__body {
- grid-template-columns: repeat(4, minmax(0, 1fr));
-}
-
-.telemetry-grid {
- display: grid;
- grid-template-columns: repeat(8, minmax(0, 1fr));
- gap: 1px;
- border: var(--ui-border);
- background: var(--ui-color-line);
-}
-
-.telemetry-card,
-.module-card,
-.panel,
-.system-state {
- border: var(--ui-border);
- background: rgba(3, 4, 3, 0.86);
- color: var(--ui-color-text);
-}
-
-.telemetry-card {
- display: grid;
- min-height: 5.15rem;
- gap: 0.25rem;
- background: linear-gradient(180deg, rgba(13, 15, 14, 0.82), rgba(2, 3, 2, 0.92));
- padding: 0.45rem 0.55rem 0.42rem;
-}
-
-.telemetry-card[data-severity="warning"] {
- border-color: color-mix(in srgb, var(--ui-color-warning), transparent 42%);
-}
-
-.telemetry-card[data-severity="danger"] {
- border-color: color-mix(in srgb, var(--ui-color-danger), transparent 22%);
- color: var(--ui-color-danger);
-}
-
-.telemetry-card[data-severity="stale"],
-.telemetry-card[data-severity="unavailable"] {
- color: var(--ui-color-stale);
-}
-
-.telemetry-card[data-severity="loading"] {
- color: var(--ui-color-accent);
-}
-
-.telemetry-card header {
- display: flex;
- min-width: 0;
- align-items: center;
- gap: 0.35rem;
-}
-
-.telemetry-card header .icon-glyph {
- display: none;
-}
-
-.telemetry-card h3,
-.telemetry-card p,
-.module-card h2,
-.module-card p,
-.service-row h3,
-.service-row p,
-.panel h2,
-.system-state h2,
-.system-state p {
- margin: 0;
-}
-
-.telemetry-card h3,
-.service-row h3 {
- overflow: hidden;
- font-weight: 850;
- letter-spacing: 0;
- line-height: 1.05;
- text-overflow: ellipsis;
- text-transform: uppercase;
- white-space: nowrap;
-}
-
-.telemetry-card h3 {
- overflow-wrap: anywhere;
- color: inherit;
- font-size: 0.58rem;
- font-weight: 800;
- line-height: 1.02;
- white-space: normal;
-}
-
-.service-row h3 {
- font-size: 0.72rem;
-}
-
-.telemetry-card strong,
-.module-card strong {
- display: block;
- font-family: var(--ui-font-display);
- font-size: clamp(1.55rem, 2.45vw, 2.22rem);
- font-weight: 800;
- letter-spacing: 0;
- line-height: 0.76;
- white-space: nowrap;
-}
-
-.telemetry-card p,
-.module-card p,
-.service-row p {
- overflow: hidden;
- color: var(--ui-color-muted);
- line-height: 1.08;
- text-overflow: ellipsis;
- text-transform: uppercase;
- white-space: nowrap;
-}
-
-.telemetry-card p {
- font-size: 0.49rem;
- line-height: 1.05;
-}
-
-.module-card p,
-.service-row p {
- font-size: 0.56rem;
-}
-
-.telemetry-card__bar,
-.progress-meter {
- height: 0.25rem;
- border: var(--ui-border);
- background: #030403;
-}
-
-.telemetry-card__bar span,
-.progress-meter span {
- display: block;
- width: var(--metric-progress, var(--meter-progress));
- height: 100%;
- background: currentColor;
-}
-
-.telemetry-card[data-severity="loading"] .telemetry-card__bar span {
- min-width: 1.25rem;
-}
-
-.line-chart {
- position: relative;
- min-width: 0;
- height: 1rem;
- color: var(--ui-color-accent);
-}
-
-.line-chart[data-severity="warning"] {
- color: var(--ui-color-warning);
-}
-
-.line-chart[data-severity="danger"] {
- color: var(--ui-color-danger);
-}
-
-.line-chart[data-severity="stale"],
-.line-chart[data-severity="unavailable"] {
- color: var(--ui-color-stale);
-}
-
-.line-chart__canvas {
- width: 100%;
- height: 100%;
-}
-
-.line-chart__canvas .uplot {
- width: 100% !important;
- height: 100% !important;
- background: transparent;
- font-family: var(--ui-font-mono);
-}
-
-.line-chart__canvas .u-over,
-.line-chart__canvas .u-under {
- overflow: visible;
-}
-
-.module-card {
- display: grid;
- grid-template-columns: minmax(0, 1fr) auto;
- gap: 0.5rem;
- align-items: start;
- min-width: 0;
- min-height: 4.15rem;
- background: rgba(6, 8, 7, 0.82);
- padding: 0.5rem;
-}
-
-.module-card h2 {
- color: var(--ui-color-muted);
- font-size: 0.56rem;
- line-height: 1;
- text-transform: uppercase;
-}
-
-.module-card strong {
- margin-top: 0.15rem;
- font-size: clamp(1.25rem, 1.75vw, 1.72rem);
- line-height: 0.82;
- overflow-wrap: anywhere;
-}
-
-.module-card p {
- margin-top: 0.2rem;
- font-size: 0.49rem;
- line-height: 1.05;
-}
-
-.module-card[data-severity="ok"] .icon-glyph {
- background: var(--ui-color-accent);
- color: #050605;
-}
-
-.module-card[data-severity="warning"] {
- border-color: color-mix(in srgb, var(--ui-color-warning), transparent 42%);
- color: var(--ui-color-warning);
-}
-
-.module-card[data-severity="danger"] {
- border-color: color-mix(in srgb, var(--ui-color-danger), transparent 32%);
- color: var(--ui-color-danger);
-}
-
-.module-card[data-severity="stale"],
-.module-card[data-severity="unavailable"] {
- color: var(--ui-color-stale);
-}
-
-.module-card[data-severity="loading"] {
- color: var(--ui-color-accent);
-}
-
-.service-row {
- display: grid;
- grid-template-columns: auto minmax(0, 1fr) auto;
- gap: 0.24rem;
- align-items: center;
- min-height: 2.02rem;
- border: 0;
- border-bottom: var(--ui-border);
- background: transparent;
- color: inherit;
- padding: 0.14rem 0;
- text-decoration: none;
-}
-
-.service-row[data-severity="warning"] {
- border-bottom-color: color-mix(in srgb, var(--ui-color-warning), transparent 54%);
-}
-
-.service-row[data-severity="danger"],
-.service-row[data-severity="unavailable"] {
- border-bottom-color: color-mix(in srgb, var(--ui-color-danger), transparent 50%);
-}
-
-.service-row[data-severity="loading"] {
- border-bottom-color: color-mix(in srgb, var(--ui-color-accent), transparent 56%);
-}
-
-.service-row:where(a):hover {
- border-bottom-color: var(--ui-color-accent);
- background: rgba(244, 244, 244, 0.035);
-}
-
-.service-row__main {
- min-width: 0;
-}
-
-.status-badge {
- display: inline-grid;
- min-height: 1.12rem;
- align-items: center;
- border: var(--ui-border);
- padding: 0 0.3rem;
- color: var(--ui-color-muted);
- font-size: 0.55rem;
- font-weight: 800;
- letter-spacing: 0;
- text-transform: uppercase;
- white-space: nowrap;
-}
-
-.status-badge[data-severity="ok"] {
- border-color: color-mix(in srgb, var(--ui-color-ok), transparent 42%);
- color: var(--ui-color-ok);
-}
-
-.status-badge[data-severity="warning"] {
- border-color: color-mix(in srgb, var(--ui-color-warning), transparent 35%);
- color: var(--ui-color-warning);
-}
-
-.status-badge[data-severity="danger"] {
- border-color: color-mix(in srgb, var(--ui-color-danger), transparent 30%);
- color: var(--ui-color-danger);
-}
-
-.status-badge[data-severity="stale"],
-.status-badge[data-severity="unavailable"] {
- color: var(--ui-color-stale);
-}
-
-.status-badge[data-severity="loading"] {
- color: var(--ui-color-accent);
-}
-
-.footer-cell {
- display: grid;
- grid-template-columns: auto minmax(0, 1fr);
- min-height: 1.9rem;
- align-items: center;
- background: rgba(2, 3, 2, 0.92);
- color: inherit;
- text-decoration: none;
-}
-
-.footer-cell span,
-.footer-cell strong {
- min-width: 0;
- padding: 0.34rem 0.52rem;
- overflow-wrap: anywhere;
- text-transform: uppercase;
-}
-
-.footer-cell span {
- height: 100%;
- border-right: var(--ui-border);
- color: var(--ui-color-muted);
- font-size: 0.52rem;
- font-weight: 800;
-}
-
-.footer-cell strong {
- color: var(--ui-color-text);
- font-size: 0.58rem;
-}
-
-.footer-cell[data-severity="ok"] strong {
- background: var(--ui-color-accent);
- color: #060706;
-}
-
-.footer-cell[data-severity="warning"] strong {
- color: var(--ui-color-warning);
-}
-
-.footer-cell[data-severity="danger"] strong {
- color: var(--ui-color-danger);
-}
-
-.footer-cell[data-severity="stale"] strong,
-.footer-cell[data-severity="unavailable"] strong {
- color: var(--ui-color-stale);
-}
-
-.footer-cell[data-severity="loading"] strong {
- color: var(--ui-color-accent);
-}
-
-.footer-cell:where(a):hover strong {
- color: var(--ui-color-accent);
-}
-
-.status-strip {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
- gap: 1px;
- border: var(--ui-border);
- background: var(--ui-color-line);
-}
-
-.status-strip[data-compact="true"] {
- grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
-}
-
-.panel {
- position: relative;
- min-width: 0;
- box-shadow: var(--ui-shadow-hard);
-}
-
-.panel::before,
-.panel::after {
- position: absolute;
- width: 0.55rem;
- height: 0.55rem;
- border-color: var(--ui-color-line-strong);
- content: "";
-}
-
-.panel::before {
- top: 0.2rem;
- right: 0.2rem;
- border-top: 1px solid;
- border-right: 1px solid;
-}
-
-.panel::after {
- right: 0.2rem;
- bottom: 0.2rem;
- border-right: 1px solid;
- border-bottom: 1px solid;
-}
-
-.panel__header {
- padding: 0.42rem 0.55rem 0;
-}
-
-.panel h2 {
- font-family: var(--ui-font-display);
- font-size: clamp(1.25rem, 1.8vw, 1.75rem);
- font-weight: 800;
- line-height: 0.92;
- text-transform: uppercase;
-}
-
-.panel__body {
- display: grid;
- gap: 0.25rem;
- padding: 0.42rem 0.55rem 0.55rem;
-}
-
-.service-panel .panel__body {
- gap: 0;
- padding-block: 0.24rem 0.42rem;
-}
-
-.ui-button,
-.icon-button {
- display: inline-grid;
- align-items: center;
- justify-content: center;
- border: var(--ui-border);
- cursor: pointer;
-}
-
-.ui-button {
- grid-auto-flow: column;
- gap: var(--ui-space-2);
- min-height: 2.5rem;
- background: var(--ui-color-accent);
- color: var(--ui-color-canvas);
- font-size: 0.76rem;
- font-weight: 850;
- padding: 0 var(--ui-space-4);
- text-transform: uppercase;
-}
-
-.icon-button {
- width: 2.5rem;
- height: 2.5rem;
- place-items: center;
- background: rgba(2, 3, 2, 0.92);
- color: var(--ui-color-muted);
- padding: 0;
-}
-
-.icon-glyph {
- display: inline-grid;
- width: 1.55rem;
- height: 1.55rem;
- place-items: center;
- border: var(--ui-border);
- background: #050605;
- color: currentColor;
- line-height: 1;
-}
-
-.icon-glyph svg {
- width: 0.95rem;
- height: 0.95rem;
-}
-
-.icon-glyph[data-size="sm"] {
- width: 1.1rem;
- height: 1.1rem;
-}
-
-.icon-glyph[data-size="lg"] {
- width: 2.35rem;
- height: 2.35rem;
-}
-
-.system-state {
- display: grid;
- grid-template-columns: auto minmax(0, 1fr);
- gap: var(--ui-space-3);
- align-items: center;
- padding: var(--ui-space-4);
-}
-
-.grid-frame {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
- gap: var(--ui-space-3);
- padding: var(--ui-space-3);
-}
-
-.separator {
- background: var(--ui-color-line);
-}
-
-.separator[data-orientation="horizontal"] {
- width: 100%;
- height: 1px;
- margin-block: var(--ui-space-3);
-}
-
-.corner-bracket-frame,
-.diagonal-stripe-field,
-.scanline-field,
-.signal-trace {
- display: block;
- min-height: 3rem;
-}
-
-@media (max-width: 1100px) {
- .telemetry-grid {
- grid-template-columns: repeat(4, minmax(0, 1fr));
- }
-}
-
-@media (max-width: 780px) {
- .dashboard-frame {
- height: auto;
- min-height: 100vh;
- overflow: visible;
- }
-
- .dashboard-frame__header,
- .dashboard-header,
- .dashboard-frame__modules,
- .dashboard-frame__panels {
- grid-template-columns: 1fr;
- }
-
- .dashboard-frame h1,
- .dashboard-header h1 {
- white-space: normal;
- }
-
- .dashboard-frame__panels {
- overflow: visible;
- }
-
- .dashboard-frame__panels .service-panel[data-layout="grid"] .panel__body {
- grid-template-columns: 1fr;
- }
-}
-
-@media (max-width: 700px) {
- .telemetry-grid {
- grid-template-columns: repeat(2, minmax(0, 1fr));
- }
-}
-
-@media (max-width: 580px) {
- .service-row {
- grid-template-columns: auto minmax(0, 1fr);
- }
-
- .service-row .status-badge {
- grid-column: 2;
- justify-self: start;
- }
-}
diff --git a/src/lib/ui/index.ts b/src/lib/ui/index.ts
index 864306c..1281a76 100644
--- a/src/lib/ui/index.ts
+++ b/src/lib/ui/index.ts
@@ -1,32 +1,32 @@
-export { Badge } from "./components/Badge";
-export { Button } from "./components/Button";
-export { CornerBracketFrame } from "./components/CornerBracketFrame";
-export { DashboardHeader } from "./components/DashboardHeader";
-export { DashboardFrame } from "./components/DashboardFrame";
-export { DiagonalStripeField } from "./components/DiagonalStripeField";
-export { FooterCell } from "./components/FooterCell";
-export { FooterStatusCell } from "./components/FooterStatusCell";
-export { GridFrame } from "./components/GridFrame";
-export { IconGlyph } from "./components/IconGlyph";
-export { IconButton } from "./components/IconButton";
-export { LineChart } from "./components/LineChart";
-export { ModuleCard } from "./components/ModuleCard";
-export { Panel } from "./components/Panel";
-export { ProgressMeter } from "./components/ProgressMeter";
-export { Separator } from "./components/Separator";
-export { ServiceGroupPanel } from "./components/ServiceGroupPanel";
-export { ServicePanel } from "./components/ServicePanel";
-export { ServiceRow } from "./components/ServiceRow";
-export { ScanlineField } from "./components/ScanlineField";
-export { SignalTrace } from "./components/SignalTrace";
-export { Sparkline } from "./components/Sparkline";
-export { StatusBadge } from "./components/StatusBadge";
-export { StatusStrip } from "./components/StatusStrip";
-export { SystemState } from "./components/SystemState";
-export { TelemetryCard } from "./components/TelemetryCard";
-export { TelemetryGrid } from "./components/TelemetryGrid";
-export { TelemetryStrip } from "./components/TelemetryStrip";
-export { WeatherModule } from "./components/WeatherModule";
+export { default as Badge } from "./components/Badge.svelte";
+export { default as Button } from "./components/Button.svelte";
+export { default as CornerBracketFrame } from "./components/CornerBracketFrame.svelte";
+export { default as DashboardHeader } from "./components/DashboardHeader.svelte";
+export { default as DashboardFrame } from "./components/DashboardFrame.svelte";
+export { default as DiagonalStripeField } from "./components/DiagonalStripeField.svelte";
+export { default as FooterCell } from "./components/FooterCell.svelte";
+export { default as FooterStatusCell } from "./components/FooterStatusCell.svelte";
+export { default as GridFrame } from "./components/GridFrame.svelte";
+export { default as IconGlyph } from "./components/IconGlyph.svelte";
+export { default as IconButton } from "./components/IconButton.svelte";
+export { default as LineChart } from "./components/LineChart.svelte";
+export { default as ModuleCard } from "./components/ModuleCard.svelte";
+export { default as Panel } from "./components/Panel.svelte";
+export { default as ProgressMeter } from "./components/ProgressMeter.svelte";
+export { default as Separator } from "./components/Separator.svelte";
+export { default as ServiceGroupPanel } from "./components/ServiceGroupPanel.svelte";
+export { default as ServicePanel } from "./components/ServicePanel.svelte";
+export { default as ServiceRow } from "./components/ServiceRow.svelte";
+export { default as ScanlineField } from "./components/ScanlineField.svelte";
+export { default as SignalTrace } from "./components/SignalTrace.svelte";
+export { default as Sparkline } from "./components/Sparkline.svelte";
+export { default as StatusBadge } from "./components/StatusBadge.svelte";
+export { default as StatusStrip } from "./components/StatusStrip.svelte";
+export { default as SystemState } from "./components/SystemState.svelte";
+export { default as TelemetryCard } from "./components/TelemetryCard.svelte";
+export { default as TelemetryGrid } from "./components/TelemetryGrid.svelte";
+export { default as TelemetryStrip } from "./components/TelemetryStrip.svelte";
+export { default as WeatherModule } from "./components/WeatherModule.svelte";
export { dashboardPreviewFixtures } from "./fixtures";
export { dashboardDocumentToUiDashboard } from "./model-renderer";
export type {
diff --git a/src/lib/ui/stories/Badge.stories.svelte b/src/lib/ui/stories/Badge.stories.svelte
new file mode 100644
index 0000000..ac557ff
--- /dev/null
+++ b/src/lib/ui/stories/Badge.stories.svelte
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/lib/ui/stories/Badge.stories.tsx b/src/lib/ui/stories/Badge.stories.tsx
deleted file mode 100644
index d33394d..0000000
--- a/src/lib/ui/stories/Badge.stories.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Badge } from "../components/Badge";
-
-const meta = {
- title: "UI/Badge",
- component: Badge,
- args: {
- label: "Ready",
- severity: "ok",
- },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Default: Story = {};
diff --git a/src/lib/ui/stories/Button.stories.svelte b/src/lib/ui/stories/Button.stories.svelte
new file mode 100644
index 0000000..7c34c3e
--- /dev/null
+++ b/src/lib/ui/stories/Button.stories.svelte
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/lib/ui/stories/Button.stories.tsx b/src/lib/ui/stories/Button.stories.tsx
deleted file mode 100644
index c207233..0000000
--- a/src/lib/ui/stories/Button.stories.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Button } from "../components/Button";
-
-const meta = {
- title: "UI/Button",
- component: Button,
- args: {
- label: "Refresh",
- icon: "mdi:refresh",
- },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Primary: Story = {};
-export const Secondary: Story = {
- args: {
- variant: "secondary",
- },
-};
diff --git a/src/lib/ui/stories/CornerBracketFrame.stories.svelte b/src/lib/ui/stories/CornerBracketFrame.stories.svelte
new file mode 100644
index 0000000..70b8b2a
--- /dev/null
+++ b/src/lib/ui/stories/CornerBracketFrame.stories.svelte
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/lib/ui/stories/CornerBracketFrame.stories.tsx b/src/lib/ui/stories/CornerBracketFrame.stories.tsx
deleted file mode 100644
index dd7efbf..0000000
--- a/src/lib/ui/stories/CornerBracketFrame.stories.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { CornerBracketFrame } from "../components/CornerBracketFrame";
-
-const meta = {
- title: "UI/CornerBracketFrame",
- component: CornerBracketFrame,
- args: {
- tone: "accent",
- size: "md",
- },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Default: Story = {};
diff --git a/src/lib/ui/stories/DashboardFrame.stories.svelte b/src/lib/ui/stories/DashboardFrame.stories.svelte
new file mode 100644
index 0000000..c31627b
--- /dev/null
+++ b/src/lib/ui/stories/DashboardFrame.stories.svelte
@@ -0,0 +1,15 @@
+
+
+
+
+
diff --git a/src/lib/ui/stories/DashboardFrame.stories.tsx b/src/lib/ui/stories/DashboardFrame.stories.tsx
deleted file mode 100644
index e1963af..0000000
--- a/src/lib/ui/stories/DashboardFrame.stories.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { DashboardFrame } from "../components/DashboardFrame";
-import { fullCompositionDashboard, secondaryDashboard } from "./story-data";
-
-const meta = {
- title: "UI/DashboardFrame",
- component: DashboardFrame,
- args: {
- dashboard: fullCompositionDashboard,
- },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const FullComposition: Story = {};
-export const Secondary: Story = {
- args: {
- dashboard: secondaryDashboard,
- },
-};
diff --git a/src/lib/ui/stories/DashboardHeader.stories.svelte b/src/lib/ui/stories/DashboardHeader.stories.svelte
new file mode 100644
index 0000000..10d2133
--- /dev/null
+++ b/src/lib/ui/stories/DashboardHeader.stories.svelte
@@ -0,0 +1,31 @@
+
+
+
+
+
diff --git a/src/lib/ui/stories/DashboardHeader.stories.tsx b/src/lib/ui/stories/DashboardHeader.stories.tsx
deleted file mode 100644
index 8263dd1..0000000
--- a/src/lib/ui/stories/DashboardHeader.stories.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { DashboardHeader } from "../components/DashboardHeader";
-import { moduleBlocks } from "./story-data";
-
-const meta = {
- title: "UI/DashboardHeader",
- component: DashboardHeader,
- args: {
- eyebrow: "Preview Surface",
- title: "Operations Console",
- subtitle: "Generic dashboard header",
- module: moduleBlocks.compact,
- },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const WithModule: Story = {};
diff --git a/src/lib/ui/stories/DashboardOnePager.stories.svelte b/src/lib/ui/stories/DashboardOnePager.stories.svelte
new file mode 100644
index 0000000..8af2c5e
--- /dev/null
+++ b/src/lib/ui/stories/DashboardOnePager.stories.svelte
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
diff --git a/src/lib/ui/stories/DashboardOnePager.stories.tsx b/src/lib/ui/stories/DashboardOnePager.stories.tsx
deleted file mode 100644
index c44364b..0000000
--- a/src/lib/ui/stories/DashboardOnePager.stories.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { DashboardFrame } from "../components/DashboardFrame";
-import { fullCompositionDashboard } from "./story-data";
-
-const meta = {
- title: "UI/DashboardOnePager",
- component: DashboardFrame,
- args: {
- dashboard: fullCompositionDashboard,
- },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const OnePager: Story = {};
diff --git a/src/lib/ui/stories/DiagonalStripeField.stories.svelte b/src/lib/ui/stories/DiagonalStripeField.stories.svelte
new file mode 100644
index 0000000..f1dcb77
--- /dev/null
+++ b/src/lib/ui/stories/DiagonalStripeField.stories.svelte
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/lib/ui/stories/DiagonalStripeField.stories.tsx b/src/lib/ui/stories/DiagonalStripeField.stories.tsx
deleted file mode 100644
index 4ca01f2..0000000
--- a/src/lib/ui/stories/DiagonalStripeField.stories.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { DiagonalStripeField } from "../components/DiagonalStripeField";
-
-const meta = {
- title: "UI/DiagonalStripeField",
- component: DiagonalStripeField,
- args: {
- tone: "accent",
- density: "regular",
- },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Default: Story = {};
diff --git a/src/lib/ui/stories/FocusPreview.svelte b/src/lib/ui/stories/FocusPreview.svelte
new file mode 100644
index 0000000..514691f
--- /dev/null
+++ b/src/lib/ui/stories/FocusPreview.svelte
@@ -0,0 +1,33 @@
+
+
+
+ {@render children?.()}
+
+
+
diff --git a/src/lib/ui/stories/FooterCell.stories.svelte b/src/lib/ui/stories/FooterCell.stories.svelte
new file mode 100644
index 0000000..cb4a08e
--- /dev/null
+++ b/src/lib/ui/stories/FooterCell.stories.svelte
@@ -0,0 +1,16 @@
+
+
+
+
+
+
diff --git a/src/lib/ui/stories/FooterCell.stories.tsx b/src/lib/ui/stories/FooterCell.stories.tsx
deleted file mode 100644
index 3ba26c7..0000000
--- a/src/lib/ui/stories/FooterCell.stories.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { FooterCell } from "../components/FooterCell";
-import { statusItems } from "./story-data";
-
-const meta = {
- title: "UI/FooterCell",
- component: FooterCell,
- args: {
- item: statusItems.ok,
- },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Operational: Story = {};
-export const Linked: Story = {
- args: {
- item: statusItems.action,
- },
-};
diff --git a/src/lib/ui/stories/FooterStatusCell.stories.svelte b/src/lib/ui/stories/FooterStatusCell.stories.svelte
new file mode 100644
index 0000000..578cb11
--- /dev/null
+++ b/src/lib/ui/stories/FooterStatusCell.stories.svelte
@@ -0,0 +1,16 @@
+
+
+
+
+
+
diff --git a/src/lib/ui/stories/FooterStatusCell.stories.tsx b/src/lib/ui/stories/FooterStatusCell.stories.tsx
deleted file mode 100644
index 8097ba3..0000000
--- a/src/lib/ui/stories/FooterStatusCell.stories.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { FooterStatusCell } from "../components/FooterStatusCell";
-import { statusItems } from "./story-data";
-
-const meta = {
- title: "UI/FooterStatusCell",
- component: FooterStatusCell,
- args: {
- item: statusItems.degraded,
- },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Warning: Story = {};
diff --git a/src/lib/ui/stories/GridFrame.stories.svelte b/src/lib/ui/stories/GridFrame.stories.svelte
new file mode 100644
index 0000000..d8be595
--- /dev/null
+++ b/src/lib/ui/stories/GridFrame.stories.svelte
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/lib/ui/stories/GridFrame.stories.tsx b/src/lib/ui/stories/GridFrame.stories.tsx
deleted file mode 100644
index a43ad22..0000000
--- a/src/lib/ui/stories/GridFrame.stories.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { GridFrame } from "../components/GridFrame";
-import { ModuleCard } from "../components/ModuleCard";
-import { moduleBlocks } from "./story-data";
-
-const meta = {
- title: "UI/GridFrame",
- component: GridFrame,
- render: (args) => (
-
-
-
-
-
- ),
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Dense: Story = {
- args: {
- density: "dense",
- },
-};
diff --git a/src/lib/ui/stories/IconButton.stories.svelte b/src/lib/ui/stories/IconButton.stories.svelte
new file mode 100644
index 0000000..faa05b6
--- /dev/null
+++ b/src/lib/ui/stories/IconButton.stories.svelte
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/lib/ui/stories/IconButton.stories.tsx b/src/lib/ui/stories/IconButton.stories.tsx
deleted file mode 100644
index 35b58b9..0000000
--- a/src/lib/ui/stories/IconButton.stories.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { IconButton } from "../components/IconButton";
-
-const meta = {
- title: "UI/IconButton",
- component: IconButton,
- args: {
- icon: "mdi:refresh",
- label: "Refresh status",
- },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Default: Story = {};
diff --git a/src/lib/ui/stories/IconGlyph.stories.svelte b/src/lib/ui/stories/IconGlyph.stories.svelte
new file mode 100644
index 0000000..043e7b3
--- /dev/null
+++ b/src/lib/ui/stories/IconGlyph.stories.svelte
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/lib/ui/stories/IconGlyph.stories.tsx b/src/lib/ui/stories/IconGlyph.stories.tsx
deleted file mode 100644
index 3f1715a..0000000
--- a/src/lib/ui/stories/IconGlyph.stories.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { IconGlyph } from "../components/IconGlyph";
-
-const meta = {
- title: "UI/IconGlyph",
- component: IconGlyph,
- args: {
- name: "mdi:server-network",
- label: "Generic service",
- size: "md",
- },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Default: Story = {};
diff --git a/src/lib/ui/stories/LineChart.stories.svelte b/src/lib/ui/stories/LineChart.stories.svelte
new file mode 100644
index 0000000..ef1ad22
--- /dev/null
+++ b/src/lib/ui/stories/LineChart.stories.svelte
@@ -0,0 +1,13 @@
+
+
+
+
+
diff --git a/src/lib/ui/stories/LineChart.stories.tsx b/src/lib/ui/stories/LineChart.stories.tsx
deleted file mode 100644
index bbf8690..0000000
--- a/src/lib/ui/stories/LineChart.stories.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { LineChart } from "../components/LineChart";
-
-const meta = {
- title: "UI/LineChart",
- component: LineChart,
- args: {
- values: [12, 18, 24, 20, 36, 44],
- severity: "ok",
- label: "Generic trend",
- },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Trend: Story = {};
diff --git a/src/lib/ui/stories/ModuleCard.stories.svelte b/src/lib/ui/stories/ModuleCard.stories.svelte
new file mode 100644
index 0000000..890a3ca
--- /dev/null
+++ b/src/lib/ui/stories/ModuleCard.stories.svelte
@@ -0,0 +1,15 @@
+
+
+
+
+
diff --git a/src/lib/ui/stories/ModuleCard.stories.tsx b/src/lib/ui/stories/ModuleCard.stories.tsx
deleted file mode 100644
index 3366a55..0000000
--- a/src/lib/ui/stories/ModuleCard.stories.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ModuleCard } from "../components/ModuleCard";
-import { moduleBlocks } from "./story-data";
-
-const meta = {
- title: "UI/ModuleCard",
- component: ModuleCard,
- args: {
- module: moduleBlocks.compact,
- },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Compact: Story = {};
-export const Long: Story = {
- args: {
- module: moduleBlocks.long,
- },
-};
diff --git a/src/lib/ui/stories/Panel.stories.svelte b/src/lib/ui/stories/Panel.stories.svelte
new file mode 100644
index 0000000..c3d3a80
--- /dev/null
+++ b/src/lib/ui/stories/Panel.stories.svelte
@@ -0,0 +1,42 @@
+
+
+
+
+ Reusable panel content.
+
+
+
+
+ Compact repeated content.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/lib/ui/stories/Panel.stories.tsx b/src/lib/ui/stories/Panel.stories.tsx
deleted file mode 100644
index 730c2d9..0000000
--- a/src/lib/ui/stories/Panel.stories.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Panel } from "../components/Panel";
-import { ServiceRow } from "../components/ServiceRow";
-import { serviceRows } from "./story-data";
-
-const meta = {
- title: "UI/Panel",
- component: Panel,
- render: (args) => (
-
-
-
-
- ),
- args: {
- title: "Generic Panel",
- },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Dense: Story = {};
diff --git a/src/lib/ui/stories/ProgressMeter.stories.svelte b/src/lib/ui/stories/ProgressMeter.stories.svelte
new file mode 100644
index 0000000..861009f
--- /dev/null
+++ b/src/lib/ui/stories/ProgressMeter.stories.svelte
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
diff --git a/src/lib/ui/stories/ProgressMeter.stories.tsx b/src/lib/ui/stories/ProgressMeter.stories.tsx
deleted file mode 100644
index d3bfdac..0000000
--- a/src/lib/ui/stories/ProgressMeter.stories.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ProgressMeter } from "../components/ProgressMeter";
-
-const meta = {
- title: "UI/ProgressMeter",
- component: ProgressMeter,
- args: {
- value: 72,
- severity: "ok",
- label: "Capacity",
- },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Filled: Story = {};
diff --git a/src/lib/ui/stories/ScanlineField.stories.svelte b/src/lib/ui/stories/ScanlineField.stories.svelte
new file mode 100644
index 0000000..cc993f7
--- /dev/null
+++ b/src/lib/ui/stories/ScanlineField.stories.svelte
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/lib/ui/stories/ScanlineField.stories.tsx b/src/lib/ui/stories/ScanlineField.stories.tsx
deleted file mode 100644
index 89e554e..0000000
--- a/src/lib/ui/stories/ScanlineField.stories.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ScanlineField } from "../components/ScanlineField";
-
-const meta = {
- title: "UI/ScanlineField",
- component: ScanlineField,
- args: {
- tone: "accent",
- intensity: "medium",
- },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Default: Story = {};
diff --git a/src/lib/ui/stories/Separator.stories.svelte b/src/lib/ui/stories/Separator.stories.svelte
new file mode 100644
index 0000000..3f2f6e3
--- /dev/null
+++ b/src/lib/ui/stories/Separator.stories.svelte
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+ Generic section one
+
+ Generic section two
+
+
diff --git a/src/lib/ui/stories/Separator.stories.tsx b/src/lib/ui/stories/Separator.stories.tsx
deleted file mode 100644
index e261f52..0000000
--- a/src/lib/ui/stories/Separator.stories.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Separator } from "../components/Separator";
-
-const meta = {
- title: "UI/Separator",
- component: Separator,
- args: {
- orientation: "horizontal",
- },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Horizontal: Story = {};
diff --git a/src/lib/ui/stories/ServiceGroupPanel.stories.svelte b/src/lib/ui/stories/ServiceGroupPanel.stories.svelte
new file mode 100644
index 0000000..51c48bd
--- /dev/null
+++ b/src/lib/ui/stories/ServiceGroupPanel.stories.svelte
@@ -0,0 +1,16 @@
+
+
+
+
+
+
diff --git a/src/lib/ui/stories/ServiceGroupPanel.stories.tsx b/src/lib/ui/stories/ServiceGroupPanel.stories.tsx
deleted file mode 100644
index 7183771..0000000
--- a/src/lib/ui/stories/ServiceGroupPanel.stories.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ServiceGroupPanel } from "../components/ServiceGroupPanel";
-import { serviceGroups } from "./story-data";
-
-const meta = {
- title: "UI/ServiceGroupPanel",
- component: ServiceGroupPanel,
- args: {
- group: serviceGroups.mixed,
- },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Mixed: Story = {};
diff --git a/src/lib/ui/stories/ServicePanel.stories.svelte b/src/lib/ui/stories/ServicePanel.stories.svelte
new file mode 100644
index 0000000..059b63b
--- /dev/null
+++ b/src/lib/ui/stories/ServicePanel.stories.svelte
@@ -0,0 +1,16 @@
+
+
+
+
+
+
diff --git a/src/lib/ui/stories/ServicePanel.stories.tsx b/src/lib/ui/stories/ServicePanel.stories.tsx
deleted file mode 100644
index 750c428..0000000
--- a/src/lib/ui/stories/ServicePanel.stories.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ServicePanel } from "../components/ServicePanel";
-import { serviceGroups } from "./story-data";
-
-const meta = {
- title: "UI/ServicePanel",
- component: ServicePanel,
- args: {
- group: serviceGroups.long,
- },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const LongList: Story = {};
diff --git a/src/lib/ui/stories/ServiceRow.stories.svelte b/src/lib/ui/stories/ServiceRow.stories.svelte
new file mode 100644
index 0000000..7be9f19
--- /dev/null
+++ b/src/lib/ui/stories/ServiceRow.stories.svelte
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/lib/ui/stories/ServiceRow.stories.tsx b/src/lib/ui/stories/ServiceRow.stories.tsx
deleted file mode 100644
index 9513d2c..0000000
--- a/src/lib/ui/stories/ServiceRow.stories.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ServiceRow } from "../components/ServiceRow";
-import { serviceRows } from "./story-data";
-
-const meta = {
- title: "UI/ServiceRow",
- component: ServiceRow,
- args: {
- service: serviceRows.normal,
- },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Normal: Story = {};
-export const Warning: Story = {
- args: {
- service: serviceRows.degraded,
- },
-};
diff --git a/src/lib/ui/stories/SignalTrace.stories.svelte b/src/lib/ui/stories/SignalTrace.stories.svelte
new file mode 100644
index 0000000..0130817
--- /dev/null
+++ b/src/lib/ui/stories/SignalTrace.stories.svelte
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/lib/ui/stories/SignalTrace.stories.tsx b/src/lib/ui/stories/SignalTrace.stories.tsx
deleted file mode 100644
index ae8785b..0000000
--- a/src/lib/ui/stories/SignalTrace.stories.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { SignalTrace } from "../components/SignalTrace";
-
-const meta = {
- title: "UI/SignalTrace",
- component: SignalTrace,
- args: {
- tone: "accent",
- orientation: "horizontal",
- },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Horizontal: Story = {};
diff --git a/src/lib/ui/stories/Sparkline.stories.svelte b/src/lib/ui/stories/Sparkline.stories.svelte
new file mode 100644
index 0000000..62744bd
--- /dev/null
+++ b/src/lib/ui/stories/Sparkline.stories.svelte
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
diff --git a/src/lib/ui/stories/Sparkline.stories.tsx b/src/lib/ui/stories/Sparkline.stories.tsx
deleted file mode 100644
index efecfbd..0000000
--- a/src/lib/ui/stories/Sparkline.stories.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Sparkline } from "../components/Sparkline";
-
-const meta = {
- title: "UI/Sparkline",
- component: Sparkline,
- args: {
- values: [8, 14, 12, 24, 18, 30],
- severity: "ok",
- },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Default: Story = {};
diff --git a/src/lib/ui/stories/StatusBadge.stories.svelte b/src/lib/ui/stories/StatusBadge.stories.svelte
new file mode 100644
index 0000000..1429ceb
--- /dev/null
+++ b/src/lib/ui/stories/StatusBadge.stories.svelte
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/lib/ui/stories/StatusBadge.stories.tsx b/src/lib/ui/stories/StatusBadge.stories.tsx
deleted file mode 100644
index 4513a08..0000000
--- a/src/lib/ui/stories/StatusBadge.stories.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { StatusBadge } from "../components/StatusBadge";
-
-const meta = {
- title: "UI/StatusBadge",
- component: StatusBadge,
- args: {
- label: "Ready",
- severity: "ok",
- },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Ready: Story = {};
diff --git a/src/lib/ui/stories/StatusStrip.stories.svelte b/src/lib/ui/stories/StatusStrip.stories.svelte
new file mode 100644
index 0000000..7b6d22d
--- /dev/null
+++ b/src/lib/ui/stories/StatusStrip.stories.svelte
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
diff --git a/src/lib/ui/stories/StatusStrip.stories.tsx b/src/lib/ui/stories/StatusStrip.stories.tsx
deleted file mode 100644
index 7b808fa..0000000
--- a/src/lib/ui/stories/StatusStrip.stories.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { StatusStrip } from "../components/StatusStrip";
-import { mixedStatusStrip } from "./story-data";
-
-const meta = {
- title: "UI/StatusStrip",
- component: StatusStrip,
- args: {
- id: "generic-status",
- items: mixedStatusStrip,
- },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Mixed: Story = {};
diff --git a/src/lib/ui/stories/SystemState.stories.svelte b/src/lib/ui/stories/SystemState.stories.svelte
new file mode 100644
index 0000000..0e28282
--- /dev/null
+++ b/src/lib/ui/stories/SystemState.stories.svelte
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
diff --git a/src/lib/ui/stories/SystemState.stories.tsx b/src/lib/ui/stories/SystemState.stories.tsx
deleted file mode 100644
index 585540e..0000000
--- a/src/lib/ui/stories/SystemState.stories.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { SystemState } from "../components/SystemState";
-
-const meta = {
- title: "UI/SystemState",
- component: SystemState,
- args: {
- title: "Loading Dashboard",
- detail: "Fetching active model",
- severity: "loading",
- icon: "mdi:progress-clock",
- },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Loading: Story = {};
diff --git a/src/lib/ui/stories/TelemetryCard.stories.svelte b/src/lib/ui/stories/TelemetryCard.stories.svelte
new file mode 100644
index 0000000..004f47b
--- /dev/null
+++ b/src/lib/ui/stories/TelemetryCard.stories.svelte
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/lib/ui/stories/TelemetryCard.stories.tsx b/src/lib/ui/stories/TelemetryCard.stories.tsx
deleted file mode 100644
index dbdf301..0000000
--- a/src/lib/ui/stories/TelemetryCard.stories.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { TelemetryCard } from "../components/TelemetryCard";
-import { telemetryCards } from "./story-data";
-
-const meta = {
- title: "UI/TelemetryCard",
- component: TelemetryCard,
- args: {
- card: telemetryCards.percent,
- },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Percent: Story = {};
-export const Danger: Story = {
- args: {
- card: telemetryCards.danger,
- },
-};
diff --git a/src/lib/ui/stories/TelemetryGrid.stories.svelte b/src/lib/ui/stories/TelemetryGrid.stories.svelte
new file mode 100644
index 0000000..8054cc9
--- /dev/null
+++ b/src/lib/ui/stories/TelemetryGrid.stories.svelte
@@ -0,0 +1,15 @@
+
+
+
+
+
diff --git a/src/lib/ui/stories/TelemetryGrid.stories.tsx b/src/lib/ui/stories/TelemetryGrid.stories.tsx
deleted file mode 100644
index 6b0166e..0000000
--- a/src/lib/ui/stories/TelemetryGrid.stories.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { TelemetryGrid } from "../components/TelemetryGrid";
-import { eightTelemetryCards, sixteenTelemetryCards } from "./story-data";
-
-const meta = {
- title: "UI/TelemetryGrid",
- component: TelemetryGrid,
- args: {
- cards: eightTelemetryCards,
- },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const EightCards: Story = {};
-export const SixteenCards: Story = {
- args: {
- cards: sixteenTelemetryCards,
- },
-};
diff --git a/src/lib/ui/stories/TelemetryStrip.stories.svelte b/src/lib/ui/stories/TelemetryStrip.stories.svelte
new file mode 100644
index 0000000..5eb01b5
--- /dev/null
+++ b/src/lib/ui/stories/TelemetryStrip.stories.svelte
@@ -0,0 +1,15 @@
+
+
+
+
+
diff --git a/src/lib/ui/stories/TelemetryStrip.stories.tsx b/src/lib/ui/stories/TelemetryStrip.stories.tsx
deleted file mode 100644
index 76fc983..0000000
--- a/src/lib/ui/stories/TelemetryStrip.stories.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { TelemetryStrip } from "../components/TelemetryStrip";
-import { eightTelemetryCards } from "./story-data";
-
-const meta = {
- title: "UI/TelemetryStrip",
- component: TelemetryStrip,
- args: {
- cards: eightTelemetryCards,
- },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Default: Story = {};
diff --git a/src/lib/ui/stories/WeatherModule.stories.svelte b/src/lib/ui/stories/WeatherModule.stories.svelte
new file mode 100644
index 0000000..de86e73
--- /dev/null
+++ b/src/lib/ui/stories/WeatherModule.stories.svelte
@@ -0,0 +1,16 @@
+
+
+
+
+
+
diff --git a/src/lib/ui/stories/WeatherModule.stories.tsx b/src/lib/ui/stories/WeatherModule.stories.tsx
deleted file mode 100644
index 6429de2..0000000
--- a/src/lib/ui/stories/WeatherModule.stories.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { WeatherModule } from "../components/WeatherModule";
-import { moduleBlocks } from "./story-data";
-
-const meta = {
- title: "UI/WeatherModule",
- component: WeatherModule,
- args: {
- module: moduleBlocks.compact,
- },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Default: Story = {};
diff --git a/src/lib/ui/storybook.test.ts b/src/lib/ui/storybook.test.ts
index 91303a2..172526e 100644
--- a/src/lib/ui/storybook.test.ts
+++ b/src/lib/ui/storybook.test.ts
@@ -7,36 +7,35 @@ const componentsDir = join(root, "src/lib/ui/components");
const storiesDir = join(root, "src/lib/ui/stories");
const requiredStoryFiles = [
- "Badge.stories.tsx",
- "Button.stories.tsx",
- "DashboardFrame.stories.tsx",
- "DashboardHeader.stories.tsx",
- "DashboardOnePager.stories.tsx",
- "CornerBracketFrame.stories.tsx",
- "DiagonalStripeField.stories.tsx",
- "FooterCell.stories.tsx",
- "FooterStatusCell.stories.tsx",
- "GridFrame.stories.tsx",
- "IconButton.stories.tsx",
- "IconGlyph.stories.tsx",
- "LineChart.stories.tsx",
- "ModuleCard.stories.tsx",
- "Panel.stories.tsx",
- "ProgressMeter.stories.tsx",
- "Separator.stories.tsx",
- "ServiceGroupPanel.stories.tsx",
- "ServicePanel.stories.tsx",
- "ServiceRow.stories.tsx",
- "SignalTrace.stories.tsx",
- "Sparkline.stories.tsx",
- "StatusBadge.stories.tsx",
- "StatusStrip.stories.tsx",
- "SystemState.stories.tsx",
- "ScanlineField.stories.tsx",
- "TelemetryCard.stories.tsx",
- "TelemetryGrid.stories.tsx",
- "TelemetryStrip.stories.tsx",
- "WeatherModule.stories.tsx",
+ "Badge.stories.svelte",
+ "Button.stories.svelte",
+ "DashboardFrame.stories.svelte",
+ "DashboardHeader.stories.svelte",
+ "DashboardOnePager.stories.svelte",
+ "CornerBracketFrame.stories.svelte",
+ "DiagonalStripeField.stories.svelte",
+ "FooterCell.stories.svelte",
+ "FooterStatusCell.stories.svelte",
+ "GridFrame.stories.svelte",
+ "IconButton.stories.svelte",
+ "IconGlyph.stories.svelte",
+ "ModuleCard.stories.svelte",
+ "Panel.stories.svelte",
+ "ProgressMeter.stories.svelte",
+ "Separator.stories.svelte",
+ "ServiceGroupPanel.stories.svelte",
+ "ServicePanel.stories.svelte",
+ "ServiceRow.stories.svelte",
+ "SignalTrace.stories.svelte",
+ "Sparkline.stories.svelte",
+ "StatusBadge.stories.svelte",
+ "StatusStrip.stories.svelte",
+ "SystemState.stories.svelte",
+ "ScanlineField.stories.svelte",
+ "TelemetryCard.stories.svelte",
+ "TelemetryGrid.stories.svelte",
+ "TelemetryStrip.stories.svelte",
+ "WeatherModule.stories.svelte",
] as const;
const forbiddenStoryContent = [
@@ -65,8 +64,8 @@ describe("Storybook inventory", () => {
test("keeps component and story files paired as the UI inventory changes", () => {
const componentStoryFiles = readdirSync(componentsDir)
- .filter((filename) => filename.endsWith(".tsx") && !filename.endsWith(".test.tsx"))
- .map((filename) => filename.replace(".tsx", ".stories.tsx"));
+ .filter((filename) => filename.endsWith(".svelte"))
+ .map((filename) => filename.replace(".svelte", ".stories.svelte"));
for (const filename of componentStoryFiles) {
expect(existsSync(join(storiesDir, filename)), `${filename} is missing`).toBe(true);
@@ -75,7 +74,7 @@ describe("Storybook inventory", () => {
test("keeps Storybook fixtures generic and content-free", () => {
const storyText = readdirSync(storiesDir)
- .filter((filename) => filename.endsWith(".tsx") || filename.endsWith(".ts"))
+ .filter((filename) => filename.endsWith(".svelte") || filename.endsWith(".ts"))
.map((filename) => readFileSync(join(storiesDir, filename), "utf8").toLowerCase())
.join("\n");
@@ -91,12 +90,12 @@ describe("Storybook inventory", () => {
"ScanlineField",
"SignalTrace",
]) {
- expect(existsSync(join(componentsDir, `${component}.tsx`)), `${component} is missing`).toBe(
+ expect(existsSync(join(componentsDir, `${component}.svelte`)), `${component} is missing`).toBe(
true,
);
expect(
- existsSync(join(storiesDir, `${component}.stories.tsx`)),
- `${component}.stories.tsx is missing`,
+ existsSync(join(storiesDir, `${component}.stories.svelte`)),
+ `${component}.stories.svelte is missing`,
).toBe(true);
}
});
@@ -108,7 +107,7 @@ describe("Storybook inventory", () => {
"ScanlineField",
"SignalTrace",
]) {
- const source = readFileSync(join(componentsDir, `${component}.tsx`), "utf8");
+ const source = readFileSync(join(componentsDir, `${component}.svelte`), "utf8");
expect(source).toContain('aria-hidden="true"');
}
@@ -116,17 +115,8 @@ describe("Storybook inventory", () => {
test("does not add deferred form/navigation primitives", () => {
for (const component of ["Input", "ToggleGroup", "ScrollArea"]) {
- expect(existsSync(join(root, `src/lib/ui/components/${component}.tsx`))).toBe(false);
- expect(existsSync(join(storiesDir, `${component}.stories.tsx`))).toBe(false);
+ expect(existsSync(join(root, `src/lib/ui/components/${component}.svelte`))).toBe(false);
+ expect(existsSync(join(storiesDir, `${component}.stories.svelte`))).toBe(false);
}
});
-
- test("does not keep legacy stories in the React Storybook inventory", () => {
- const legacyStoryExtension = [".stories", ".sve", "lte"].join("");
- const legacyStories = readdirSync(storiesDir).filter((filename) =>
- filename.endsWith(legacyStoryExtension),
- );
-
- expect(legacyStories).toEqual([]);
- });
});
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
deleted file mode 100644
index bd0c391..0000000
--- a/src/lib/utils.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
- return twMerge(clsx(inputs))
-}
diff --git a/src/main.tsx b/src/main.tsx
deleted file mode 100644
index 9bbebc4..0000000
--- a/src/main.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import App from "./App";
-import "./app.css";
-
-const root = document.getElementById("root");
-if (!root) throw new Error("Missing React root element");
-
-createRoot(root).render(
-
-
- ,
-);
diff --git a/src/page.test.tsx b/src/page.test.tsx
deleted file mode 100644
index 45e3d3a..0000000
--- a/src/page.test.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { renderToString } from "react-dom/server";
-import { describe, expect, test } from "vitest";
-import { genericDashboardFixture } from "$lib/model/fixtures/generic";
-import { AppStateView } from "./App";
-
-describe("home page model renderer", () => {
- test("renders the active dashboard model from the runtime state", () => {
- const body = renderToString(
- ,
- );
-
- expect(body).toContain("Operations Console");
- expect(body).toContain("Service Uptime");
- expect(body).toContain("Identity");
- expect(body).toContain("data-model-id=\"service-uptime\"");
- expect(body).not.toContain("primary");
- expect(body).not.toContain("secondary");
- });
-
- test("renders invalid model state without crashing", () => {
- const body = renderToString(
- ,
- );
-
- expect(body).toContain("Invalid Dashboard");
- expect(body).toContain("Validation failed");
- expect(body).toContain("Dashboard document is invalid.");
- expect(body).toContain("/metadata/title is required");
- });
-
- test("renders empty and loading model states without crashing", () => {
- const empty = renderToString(
- ,
- );
- const loading = renderToString(
- ,
- );
-
- expect(empty).toContain("No Dashboard Model");
- expect(empty).toContain("No active document");
- expect(loading).toContain("Loading Dashboard");
- expect(loading).toContain("Fetching active model");
- });
-});
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
new file mode 100644
index 0000000..801be90
--- /dev/null
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,7 @@
+
+
+{@render children()}
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
new file mode 100644
index 0000000..36e913d
--- /dev/null
+++ b/src/routes/+page.server.ts
@@ -0,0 +1,24 @@
+import { loadDashboardRuntime } from "$lib/server/dashboard";
+import { resolveDashboardDatasources } from "$lib/server/datasources";
+
+export async function load() {
+ const dashboard = loadDashboardRuntime(undefined, {
+ refreshSeedDocument: true,
+ seedIfEmpty: true,
+ });
+
+ if (dashboard.state !== "ready") {
+ return { dashboard };
+ }
+
+ if (process.env.DISABLE_LIVE_DATASOURCES === "1") {
+ return { dashboard };
+ }
+
+ return {
+ dashboard: {
+ ...dashboard,
+ document: await resolveDashboardDatasources(dashboard.document),
+ },
+ };
+}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
new file mode 100644
index 0000000..29e61c9
--- /dev/null
+++ b/src/routes/+page.svelte
@@ -0,0 +1,124 @@
+
+
+
+ {pageTitle}
+
+
+
+{#if dashboard}
+
+{:else}
+
+
+ {#if stateErrors.length}
+
+ {#each stateErrors as error}
+ - {error}
+ {/each}
+
+ {/if}
+
+{/if}
+
+
+
+
diff --git a/src/routes/api/agent/dashboard/+server.ts b/src/routes/api/agent/dashboard/+server.ts
new file mode 100644
index 0000000..ddfbef4
--- /dev/null
+++ b/src/routes/api/agent/dashboard/+server.ts
@@ -0,0 +1,4 @@
+import { handleAgentDashboardRequest } from "$lib/server/agent-config";
+import type { RequestHandler } from "./$types";
+
+export const POST: RequestHandler = ({ request }) => handleAgentDashboardRequest(request);
diff --git a/src/routes/page.test.ts b/src/routes/page.test.ts
new file mode 100644
index 0000000..c302884
--- /dev/null
+++ b/src/routes/page.test.ts
@@ -0,0 +1,80 @@
+import { render } from "svelte/server";
+import { describe, expect, test } from "vitest";
+import { genericDashboardFixture } from "$lib/model/fixtures/generic";
+import Page from "./+page.svelte";
+
+describe("home page model renderer", () => {
+ test("renders the active dashboard model from the server load", () => {
+ const { body } = render(Page, {
+ props: {
+ data: {
+ dashboard: {
+ state: "ready",
+ document: genericDashboardFixture,
+ schemaVersion: "dashboard.v1",
+ currentRevisionId: "revision-1234567890",
+ },
+ },
+ },
+ });
+
+ expect(body).toContain("Operations Console");
+ expect(body).toContain("Service Uptime");
+ expect(body).toContain("Identity");
+ expect(body).toContain("data-model-id=\"service-uptime\"");
+ expect(body).not.toContain("primary");
+ expect(body).not.toContain("secondary");
+ });
+
+ test("renders invalid model state without crashing", () => {
+ const { body } = render(Page, {
+ props: {
+ data: {
+ dashboard: {
+ state: "invalid",
+ title: "Invalid Dashboard",
+ subtitle: "Validation failed",
+ message: "Dashboard document is invalid.",
+ errors: ["/metadata/title is required"],
+ },
+ },
+ },
+ });
+
+ expect(body).toContain("Invalid Dashboard");
+ expect(body).toContain("Validation failed");
+ expect(body).toContain("Dashboard document is invalid.");
+ });
+
+ test("renders empty and loading model states without crashing", () => {
+ const empty = render(Page, {
+ props: {
+ data: {
+ dashboard: {
+ state: "empty",
+ title: "No Dashboard Model",
+ subtitle: "No active document",
+ message: "No validated dashboard document is active yet.",
+ },
+ },
+ },
+ });
+ const loading = render(Page, {
+ props: {
+ data: {
+ dashboard: {
+ state: "loading",
+ title: "Loading Dashboard",
+ subtitle: "Fetching active model",
+ message: "Waiting for the active dashboard document.",
+ },
+ },
+ },
+ });
+
+ expect(empty.body).toContain("No Dashboard Model");
+ expect(empty.body).toContain("No active document");
+ expect(loading.body).toContain("Loading Dashboard");
+ expect(loading.body).toContain("Fetching active model");
+ });
+});
diff --git a/src/server/index.ts b/src/server/index.ts
deleted file mode 100644
index 860d042..0000000
--- a/src/server/index.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import { extname, normalize } from "node:path";
-import { handleAgentDashboardRoute } from "./routes/agent-dashboard";
-import { handleDashboardRoute } from "./routes/dashboard";
-
-const host = process.env.HOST || "0.0.0.0";
-const port = Number(process.env.PORT || 3000);
-const distRoot = `${process.cwd()}/dist`;
-
-const contentTypes = new Map([
- [".css", "text/css; charset=utf-8"],
- [".html", "text/html; charset=utf-8"],
- [".js", "text/javascript; charset=utf-8"],
- [".json", "application/json; charset=utf-8"],
- [".svg", "image/svg+xml"],
- [".wasm", "application/wasm"],
-]);
-
-export async function handleRequest(request: Request): Promise {
- const url = new URL(request.url);
-
- if (url.pathname === "/api/dashboard") {
- if (request.method !== "GET") return methodNotAllowed(["GET"]);
- return handleDashboardRoute();
- }
-
- if (url.pathname === "/api/agent/dashboard") {
- if (request.method !== "POST") return methodNotAllowed(["POST"]);
- return handleAgentDashboardRoute(request);
- }
-
- if (url.pathname.startsWith("/api/")) {
- return Response.json({ ok: false, message: "Not found" }, { status: 404 });
- }
-
- return serveStaticAsset(url.pathname);
-}
-
-async function serveStaticAsset(pathname: string): Promise {
- const safePath = normalize(pathname).replace(/^(\.\.(\/|\\|$))+/, "");
- const assetPath = safePath === "/" || safePath === "." ? "/index.html" : safePath;
- const file = Bun.file(`${distRoot}${assetPath}`);
-
- if (await file.exists()) {
- return new Response(file, {
- headers: contentTypeHeaders(assetPath),
- });
- }
-
- const fallback = Bun.file(`${distRoot}/index.html`);
- if (await fallback.exists()) {
- return new Response(fallback, {
- headers: contentTypeHeaders(".html"),
- });
- }
-
- return new Response("Build output not found", { status: 404 });
-}
-
-function methodNotAllowed(allowedMethods: string[]): Response {
- return Response.json(
- { ok: false, message: "Method not allowed" },
- {
- status: 405,
- headers: {
- Allow: allowedMethods.join(", "),
- },
- },
- );
-}
-
-function contentTypeHeaders(pathname: string): HeadersInit {
- const contentType = contentTypes.get(extname(pathname));
- return contentType ? { "Content-Type": contentType } : {};
-}
-
-if (import.meta.main) {
- Bun.serve({
- hostname: host,
- port,
- fetch: handleRequest,
- });
-
- console.info(`Dimension Lab website listening on http://${host}:${port}`);
-}
diff --git a/src/server/routes/agent-dashboard.test.ts b/src/server/routes/agent-dashboard.test.ts
deleted file mode 100644
index a3a6022..0000000
--- a/src/server/routes/agent-dashboard.test.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { describe, expect, test } from "vitest";
-import { handleAgentDashboardRoute } from "./agent-dashboard";
-
-describe("agent dashboard API route", () => {
- test("delegates unauthorized requests to the existing agent handler", async () => {
- const response = await handleAgentDashboardRoute(
- new Request("http://localhost/api/agent/dashboard", { method: "POST" }),
- );
-
- expect(response.status).toBe(401);
- });
-});
diff --git a/src/server/routes/agent-dashboard.ts b/src/server/routes/agent-dashboard.ts
deleted file mode 100644
index 1ce77da..0000000
--- a/src/server/routes/agent-dashboard.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { handleAgentDashboardRequest } from "$lib/server/agent-config";
-
-export function handleAgentDashboardRoute(request: Request): Promise {
- return handleAgentDashboardRequest(request);
-}
diff --git a/src/server/routes/dashboard.test.ts b/src/server/routes/dashboard.test.ts
deleted file mode 100644
index ebe575b..0000000
--- a/src/server/routes/dashboard.test.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { describe, expect, test } from "vitest";
-import { dimensionLabDashboardFixture } from "$lib/model/fixtures/dimensionlab";
-import { loadDashboardResponse } from "./dashboard";
-
-describe("dashboard API route", () => {
- test("returns ready dashboard runtime state from the existing model loader", async () => {
- const response = await loadDashboardResponse({
- disableLiveDatasources: true,
- refreshSeedDocument: true,
- seedIfEmpty: true,
- });
-
- expect(response.state).toBe("ready");
- if (response.state !== "ready") throw new Error("expected ready dashboard");
- expect(response.document.metadata.title).toBe(
- dimensionLabDashboardFixture.metadata.title,
- );
- });
-});
diff --git a/src/server/routes/dashboard.ts b/src/server/routes/dashboard.ts
deleted file mode 100644
index 21c30e4..0000000
--- a/src/server/routes/dashboard.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import {
- loadDashboardRuntime,
- type DashboardRuntimeOptions,
- type DashboardRuntimeState,
-} from "$lib/server/dashboard";
-import { resolveDashboardDatasources } from "$lib/server/datasources";
-
-export interface LoadDashboardResponseOptions
- extends Pick<
- DashboardRuntimeOptions,
- "refreshSeedDocument" | "seedIfEmpty" | "seedDocument"
- > {
- disableLiveDatasources?: boolean;
-}
-
-export async function loadDashboardResponse(
- options: LoadDashboardResponseOptions = {},
-): Promise {
- const dashboard = loadDashboardRuntime(undefined, {
- refreshSeedDocument: options.refreshSeedDocument ?? true,
- seedIfEmpty: options.seedIfEmpty ?? true,
- seedDocument: options.seedDocument,
- });
-
- if (dashboard.state !== "ready") {
- return dashboard;
- }
-
- if (options.disableLiveDatasources || process.env.DISABLE_LIVE_DATASOURCES === "1") {
- return dashboard;
- }
-
- return {
- ...dashboard,
- document: await resolveDashboardDatasources(dashboard.document),
- };
-}
-
-export async function handleDashboardRoute(): Promise {
- return Response.json(await loadDashboardResponse());
-}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
deleted file mode 100644
index 2e6c10b..0000000
--- a/src/vite-env.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-///
-
-declare module "*.css" {}
diff --git a/svelte.config.js b/svelte.config.js
new file mode 100644
index 0000000..bc8b8d4
--- /dev/null
+++ b/svelte.config.js
@@ -0,0 +1,12 @@
+import adapter from "@sveltejs/adapter-node";
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+
+/** @type {import("@sveltejs/kit").Config} */
+const config = {
+ preprocess: vitePreprocess(),
+ kit: {
+ adapter: adapter(),
+ },
+};
+
+export default config;
diff --git a/tests/e2e/dashboard.spec.ts b/tests/e2e/dashboard.spec.ts
index b432d14..af12705 100644
--- a/tests/e2e/dashboard.spec.ts
+++ b/tests/e2e/dashboard.spec.ts
@@ -1,5 +1,5 @@
import AxeBuilder from "@axe-core/playwright";
-import { expect, test, type Page } from "@playwright/test";
+import { expect, test } from "@playwright/test";
const linkedServiceIds = [
"vaultwarden",
@@ -33,7 +33,6 @@ test.describe("dashboard page QA gate", () => {
test.skip(testInfo.project.name !== "chromium-desktop");
await page.goto("/");
- await waitForDashboardReady(page);
await expect(page.getByRole("main")).toHaveAttribute(
"aria-labelledby",
@@ -62,7 +61,6 @@ test.describe("dashboard page QA gate", () => {
await page.setViewportSize({ width: 1470, height: 956 });
await page.goto("/");
- await waitForDashboardReady(page);
const metrics = await page.evaluate(() => {
const footer = document.querySelector("[data-model-id='footer-status']");
@@ -113,7 +111,6 @@ test.describe("dashboard page QA gate", () => {
test.skip(testInfo.project.name !== "chromium-desktop");
await page.goto("/");
- await waitForDashboardReady(page);
const bookmarkDensity = await page.evaluate(() => {
const panelBody = document.querySelector(".service-panel .panel__body");
@@ -158,7 +155,6 @@ test.describe("dashboard page QA gate", () => {
await page.setViewportSize({ width: 1470, height: 956 });
await page.goto("/");
- await waitForDashboardReady(page);
const typeScale = await page.evaluate(() => {
const fontSize = (selector: string) => {
@@ -189,7 +185,6 @@ test.describe("dashboard page QA gate", () => {
test.skip(testInfo.project.name !== "chromium-mobile");
await page.goto("/");
- await waitForDashboardReady(page);
await expect(
page.getByRole("heading", { level: 1, name: "System Overview" }),
@@ -206,7 +201,6 @@ test.describe("dashboard page QA gate", () => {
page,
}) => {
await page.goto("/");
- await waitForDashboardReady(page);
await expect(page.getByRole("main")).toHaveCount(1);
for (const serviceId of linkedServiceIds) {
@@ -224,7 +218,6 @@ test.describe("dashboard page QA gate", () => {
test("passes automated accessibility checks", async ({ page }) => {
await page.goto("/");
- await waitForDashboardReady(page);
const results = await new AxeBuilder({ page }).analyze();
expect(results.violations).toEqual([]);
@@ -234,7 +227,6 @@ test.describe("dashboard page QA gate", () => {
await page.emulateMedia({ reducedMotion: "reduce" });
await page.goto("/");
- await waitForDashboardReady(page);
const durations = await page.evaluate(() => {
const element = document.createElement("div");
element.style.animation = "qa-motion-check 10s infinite";
@@ -257,13 +249,6 @@ test.describe("dashboard page QA gate", () => {
});
});
-async function waitForDashboardReady(page: Page): Promise {
- await expect(
- page.getByRole("heading", { level: 1, name: "System Overview" }),
- ).toBeVisible();
- await expect(page.locator("[data-model-id='vaultwarden']")).toBeVisible();
-}
-
function cssDurationToMilliseconds(duration: string): number {
if (duration.endsWith("ms")) return Number.parseFloat(duration);
if (duration.endsWith("s")) return Number.parseFloat(duration) * 1000;
diff --git a/tests/e2e/dashboard.spec.ts-snapshots/dashboard-desktop-chromium-desktop-linux.png b/tests/e2e/dashboard.spec.ts-snapshots/dashboard-desktop-chromium-desktop-linux.png
index fa3b3bf..4f29c6c 100644
Binary files a/tests/e2e/dashboard.spec.ts-snapshots/dashboard-desktop-chromium-desktop-linux.png and b/tests/e2e/dashboard.spec.ts-snapshots/dashboard-desktop-chromium-desktop-linux.png differ
diff --git a/tests/e2e/dashboard.spec.ts-snapshots/dashboard-mobile-chromium-mobile-linux.png b/tests/e2e/dashboard.spec.ts-snapshots/dashboard-mobile-chromium-mobile-linux.png
index a199b15..e12e49f 100644
Binary files a/tests/e2e/dashboard.spec.ts-snapshots/dashboard-mobile-chromium-mobile-linux.png and b/tests/e2e/dashboard.spec.ts-snapshots/dashboard-mobile-chromium-mobile-linux.png differ
diff --git a/tsconfig.json b/tsconfig.json
index ab92320..c08a57f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,35 +1,15 @@
{
+ "extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": {
"allowJs": true,
- "baseUrl": ".",
"checkJs": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
- "ignoreDeprecations": "6.0",
- "jsx": "react-jsx",
- "module": "ESNext",
- "moduleResolution": "bundler",
- "paths": {
- "$lib/*": ["src/lib/*"]
- },
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true,
- "target": "ES2022",
- "types": ["node", "bun-types", "react", "react-dom"]
- },
- "include": [
- "src/**/*.ts",
- "src/**/*.tsx",
- "tests/**/*.ts",
- "vite.config.ts",
- "playwright.config.ts",
- "drizzle.config.ts"
- ],
- "exclude": [
- "build",
- "node_modules",
- ".storybook"
- ]
+ "moduleResolution": "bundler",
+ "types": ["node", "bun-types"]
+ }
}
diff --git a/vite.config.ts b/vite.config.ts
index 538be29..be6f2e9 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,15 +1,8 @@
-import { fileURLToPath } from "node:url";
-import tailwindcss from "@tailwindcss/vite";
-import react from "@vitejs/plugin-react";
+import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig, configDefaults } from "vitest/config";
export default defineConfig({
- plugins: [react(), tailwindcss()],
- resolve: {
- alias: {
- $lib: fileURLToPath(new URL("./src/lib", import.meta.url)),
- },
- },
+ plugins: [sveltekit()],
test: {
exclude: [...configDefaults.exclude, "tests/e2e/**"],
},