@svadmin/lite 0.17.0 → 0.22.0

package/dist/components/widgets/chart-geometry.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Server-side chart geometry.
+ *
+ * Every helper is pure and DOM-free so the same numbers render inside SSR HTML
+ * and inside tests. Inputs are the normalized table rows that the Lite chart
+ * widgets already accept: `[label, value]` pairs where the value may be a
+ * numeric string.
+ */
+export interface Basket {
+    width: number;
+    height: number;
+    padding: number;
+}
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface Slice {
+    path: string;
+}
+export interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface Cell extends Rect {
+    opacity: number;
+}
+/** Numeric series extracted from table rows; unparsable or non-finite values become 0. */
+export declare function series(rows: ReadonlyArray<ReadonlyArray<string | number>>): number[];
+export declare function labels(rows: ReadonlyArray<ReadonlyArray<string | number>>): string[];
+/** Cartesian plot points scaled into the basket, `x` spread across the series. */
+export declare function points(values: readonly number[], basket?: Basket): Point[];
+export declare function polyline(values: readonly number[], basket?: Basket): string;
+/** Closed area path that fills the space between the series and the baseline. */
+export declare function areaPath(values: readonly number[], basket?: Basket): string;
+export declare function pieSlices(values: readonly number[], basket?: Basket): Slice[];
+export declare function donutSlices(values: readonly number[], basket?: Basket): Slice[];
+/**
+ * Rose chart: every value becomes a wedge whose radius encodes magnitude, so
+ * proportional area is intentionally not preserved (that is the point of a rose).
+ */
+export declare function roseSlices(values: readonly number[], basket?: Basket): Slice[];
+/** Radar polygon plus its axes, using one axis per data point. */
+export declare function radarPolygon(values: readonly number[], basket?: Basket): {
+    polygon: string;
+    axes: string[];
+};
+/** Gauge drawn as a filled arc from 0 to `value / max`. */
+export declare function gaugeArc(value: number, max?: number, basket?: Basket): {
+    track: string;
+    value: string;
+    percent: number;
+};
+export declare function funnelRects(values: readonly number[], basket?: Basket): Rect[];
+/** Waterfall bars accumulate deltas and color rising versus falling steps. */
+export declare function waterfallBars(values: readonly number[], basket?: Basket): Array<Rect & {
+    positive: boolean;
+}>;
+/** Heatmap cells laid out in a grid; opacity encodes magnitude. */
+export declare function heatCells(values: readonly number[], basket?: Basket, columns?: number): Cell[];
+export declare function scatterPoints(values: readonly number[], basket?: Basket): Point[];
+/** Every widget shares one empty-data predicate so SSR output stays predictable. */
+export declare function hasData(rows: ReadonlyArray<ReadonlyArray<string | number>>): boolean;

package/dist/components/widgets/chart-geometry.js

@@ -0,0 +1,229 @@
+/**
+ * Server-side chart geometry.
+ *
+ * Every helper is pure and DOM-free so the same numbers render inside SSR HTML
+ * and inside tests. Inputs are the normalized table rows that the Lite chart
+ * widgets already accept: `[label, value]` pairs where the value may be a
+ * numeric string.
+ */
+const DEFAULT_BASKET = { width: 320, height: 160, padding: 12 };
+/** Numeric series extracted from table rows; unparsable or non-finite values become 0. */
+export function series(rows) {
+    return rows.map((row) => {
+        const raw = row[1];
+        const value = typeof raw === 'number' ? raw : Number.parseFloat(String(raw ?? ''));
+        return Number.isFinite(value) ? value : 0;
+    });
+}
+export function labels(rows) {
+    return rows.map((row) => String(row[0] ?? ''));
+}
+function extent(values) {
+    if (values.length === 0)
+        return { min: 0, max: 1 };
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    return { min, max: min === max ? min + 1 : max };
+}
+function round(value) {
+    return Math.round(value * 100) / 100;
+}
+/** Cartesian plot points scaled into the basket, `x` spread across the series. */
+export function points(values, basket = DEFAULT_BASKET) {
+    const { width, height, padding } = basket;
+    const { min, max } = extent(values);
+    const innerWidth = width - padding * 2;
+    const innerHeight = height - padding * 2;
+    const step = values.length > 1 ? innerWidth / (values.length - 1) : 0;
+    return values.map((value, index) => ({
+        x: round(padding + step * index + (values.length === 1 ? innerWidth / 2 : 0)),
+        y: round(padding + innerHeight - ((value - min) / (max - min)) * innerHeight),
+    }));
+}
+export function polyline(values, basket) {
+    return points(values, basket)
+        .map((point) => `${point.x},${point.y}`)
+        .join(' ');
+}
+/** Closed area path that fills the space between the series and the baseline. */
+export function areaPath(values, basket = DEFAULT_BASKET) {
+    const plotted = points(values, basket);
+    if (plotted.length === 0)
+        return '';
+    const baseline = basket.height - basket.padding;
+    const first = plotted[0];
+    const last = plotted[plotted.length - 1];
+    if (!first || !last)
+        return '';
+    const line = plotted.map((point, index) => `${index === 0 ? 'M' : 'L'}${point.x} ${point.y}`).join(' ');
+    return `${line} L${last.x} ${baseline} L${first.x} ${baseline} Z`;
+}
+function circlePoint(cx, cy, radius, angle) {
+    return { x: round(cx + radius * Math.cos(angle)), y: round(cy + radius * Math.sin(angle)) };
+}
+function ringSegment(values, cx, cy, outer, inner) {
+    const total = values.reduce((sum, value) => sum + Math.max(0, value), 0);
+    if (total <= 0)
+        return [];
+    let start = -Math.PI / 2;
+    return values.map((value) => {
+        const sweep = (Math.max(0, value) / total) * Math.PI * 2;
+        const end = start + sweep;
+        const largeArc = sweep > Math.PI ? 1 : 0;
+        const outerStart = circlePoint(cx, cy, outer, start);
+        const outerEnd = circlePoint(cx, cy, outer, end);
+        const innerEnd = circlePoint(cx, cy, inner, end);
+        const innerStart = circlePoint(cx, cy, inner, start);
+        const path = `M${outerStart.x} ${outerStart.y} ` +
+            `A${outer} ${outer} 0 ${largeArc} 1 ${outerEnd.x} ${outerEnd.y} ` +
+            `L${innerEnd.x} ${innerEnd.y} ` +
+            `A${inner} ${inner} 0 ${largeArc} 0 ${innerStart.x} ${innerStart.y} Z`;
+        start = end;
+        return { path };
+    });
+}
+export function pieSlices(values, basket = DEFAULT_BASKET) {
+    const cx = basket.width / 2;
+    const cy = basket.height / 2;
+    return ringSegment(values, cx, cy, Math.min(cx, cy) - basket.padding, 0);
+}
+export function donutSlices(values, basket = DEFAULT_BASKET) {
+    const cx = basket.width / 2;
+    const cy = basket.height / 2;
+    const outer = Math.min(cx, cy) - basket.padding;
+    return ringSegment(values, cx, cy, outer, outer * 0.55);
+}
+/**
+ * Rose chart: every value becomes a wedge whose radius encodes magnitude, so
+ * proportional area is intentionally not preserved (that is the point of a rose).
+ */
+export function roseSlices(values, basket = DEFAULT_BASKET) {
+    const cx = basket.width / 2;
+    const cy = basket.height / 2;
+    const outer = Math.min(cx, cy) - basket.padding;
+    const { max } = extent(values.map((value) => Math.max(0, value)));
+    const count = Math.max(1, values.length);
+    const step = (Math.PI * 2) / count;
+    const gap = step * 0.08;
+    return values.map((value, index) => {
+        const radius = Math.max(6, (Math.max(0, value) / max) * outer);
+        const start = -Math.PI / 2 + index * step + gap;
+        const end = start + step - gap * 2;
+        const from = circlePoint(cx, cy, 0, start);
+        const to = circlePoint(cx, cy, radius, start);
+        const across = circlePoint(cx, cy, radius, end);
+        const largeArc = end - start > Math.PI ? 1 : 0;
+        return { path: `M${from.x} ${from.y} L${to.x} ${to.y} A${radius} ${radius} 0 ${largeArc} 1 ${across.x} ${across.y} Z` };
+    });
+}
+/** Radar polygon plus its axes, using one axis per data point. */
+export function radarPolygon(values, basket = DEFAULT_BASKET) {
+    const cx = basket.width / 2;
+    const cy = basket.height / 2;
+    const radius = Math.min(cx, cy) - basket.padding;
+    const { max } = extent(values.map((value) => Math.max(0, value)));
+    const count = Math.max(3, values.length);
+    const step = (Math.PI * 2) / count;
+    const axes = [];
+    const shape = [];
+    for (let index = 0; index < count; index += 1) {
+        const angle = -Math.PI / 2 + index * step;
+        const outer = circlePoint(cx, cy, radius, angle);
+        axes.push(`${cx},${cy} ${outer.x},${outer.y}`);
+        const raw = values[index] ?? 0;
+        const scaled = circlePoint(cx, cy, (Math.max(0, raw) / max) * radius, angle);
+        shape.push(`${scaled.x},${scaled.y}`);
+    }
+    return { polygon: shape.join(' '), axes };
+}
+/** Gauge drawn as a filled arc from 0 to `value / max`. */
+export function gaugeArc(value, max = 100, basket = DEFAULT_BASKET) {
+    const cx = basket.width / 2;
+    const cy = basket.height - basket.padding;
+    const radius = Math.min(cx, cy) - basket.padding;
+    const safeMax = max > 0 ? max : 100;
+    const ratio = Math.min(1, Math.max(0, value / safeMax));
+    const degree = Math.PI * ratio;
+    const start = circlePoint(cx, cy, radius, Math.PI);
+    const end = circlePoint(cx, cy, radius, Math.PI + degree);
+    const full = circlePoint(cx, cy, radius, Math.PI * 2);
+    return {
+        track: `M${start.x} ${start.y} A${radius} ${radius} 0 0 1 ${full.x} ${full.y}`,
+        value: `M${start.x} ${start.y} A${radius} ${radius} 0 ${degree > Math.PI ? 1 : 0} 1 ${end.x} ${end.y}`,
+        percent: Math.round(ratio * 100),
+    };
+}
+export function funnelRects(values, basket = DEFAULT_BASKET) {
+    const { width, height, padding } = basket;
+    const { max } = extent(values.map((value) => Math.max(0, value)));
+    const count = Math.max(1, values.length);
+    const gap = 4;
+    const step = (height - padding * 2 - gap * (count - 1)) / count;
+    const innerWidth = width - padding * 2;
+    return values.map((value, index) => {
+        const ratio = Math.max(0, value) / max;
+        const barWidth = Math.max(4, innerWidth * ratio);
+        return {
+            x: round(padding + (innerWidth - barWidth) / 2),
+            y: round(padding + index * (step + gap)),
+            width: round(barWidth),
+            height: round(step),
+        };
+    });
+}
+/** Waterfall bars accumulate deltas and color rising versus falling steps. */
+export function waterfallBars(values, basket = DEFAULT_BASKET) {
+    const { width, height, padding } = basket;
+    const count = Math.max(1, values.length);
+    const innerWidth = width - padding * 2;
+    const innerHeight = height - padding * 2;
+    let running = 0;
+    const cumulative = values.map((value) => {
+        const start = running;
+        running += value;
+        return { start, end: running };
+    });
+    const extentValues = cumulative.flatMap((step) => [step.start, step.end, 0]);
+    const { min, max } = extent(extentValues);
+    const gap = 3;
+    const barWidth = Math.max(2, (innerWidth - gap * (count - 1)) / count);
+    return values.map((value, index) => {
+        const step = cumulative[index] ?? { start: 0, end: 0 };
+        const top = Math.max(step.start, step.end);
+        const bottom = Math.min(step.start, step.end);
+        const yTop = padding + innerHeight - ((top - min) / (max - min)) * innerHeight;
+        const yBottom = padding + innerHeight - ((bottom - min) / (max - min)) * innerHeight;
+        return {
+            x: round(padding + index * (barWidth + gap)),
+            y: round(yTop),
+            width: round(barWidth),
+            height: round(Math.max(1, yBottom - yTop)),
+            positive: value >= 0,
+        };
+    });
+}
+/** Heatmap cells laid out in a grid; opacity encodes magnitude. */
+export function heatCells(values, basket = DEFAULT_BASKET, columns = 0) {
+    const { width, height, padding } = basket;
+    const count = Math.max(1, values.length);
+    const cols = columns > 0 ? columns : Math.ceil(Math.sqrt(count));
+    const rows = Math.ceil(count / cols);
+    const gap = 2;
+    const cellWidth = (width - padding * 2 - gap * (cols - 1)) / cols;
+    const cellHeight = (height - padding * 2 - gap * (rows - 1)) / rows;
+    const { max } = extent(values.map((value) => Math.max(0, value)));
+    return values.map((value, index) => ({
+        x: round(padding + (index % cols) * (cellWidth + gap)),
+        y: round(padding + Math.floor(index / cols) * (cellHeight + gap)),
+        width: round(cellWidth),
+        height: round(cellHeight),
+        opacity: round(Math.max(0.12, Math.max(0, value) / max)),
+    }));
+}
+export function scatterPoints(values, basket) {
+    return points(values, basket);
+}
+/** Every widget shares one empty-data predicate so SSR output stays predictable. */
+export function hasData(rows) {
+    return rows.length > 0;
+}

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

@@ -3,3 +3,13 @@ export { default as LiteAnomalyBadge } from './LiteAnomalyBadge.svelte';
 export { default as LiteBarChart } from './LiteBarChart.svelte';
 export { default as LiteLineChart } from './LiteLineChart.svelte';
 export { default as LitePieChart } from './LitePieChart.svelte';
+export { default as LiteAreaChart } from './LiteAreaChart.svelte';
+export { default as LiteScatterChart } from './LiteScatterChart.svelte';
+export { default as LiteRadarChart } from './LiteRadarChart.svelte';
+export { default as LiteGaugeChart } from './LiteGaugeChart.svelte';
+export { default as LiteFunnelChart } from './LiteFunnelChart.svelte';
+export { default as LiteHeatmapChart } from './LiteHeatmapChart.svelte';
+export { default as LiteWaterfallChart } from './LiteWaterfallChart.svelte';
+export { default as LiteRoseChart } from './LiteRoseChart.svelte';
+export { default as LiteDonutChart } from './LiteDonutChart.svelte';
+export { default as LiteChartTable } from './LiteChartTable.svelte';

package/dist/components/widgets/index.js

@@ -3,3 +3,13 @@ export { default as LiteAnomalyBadge } from './LiteAnomalyBadge.svelte';
 export { default as LiteBarChart } from './LiteBarChart.svelte';
 export { default as LiteLineChart } from './LiteLineChart.svelte';
 export { default as LitePieChart } from './LitePieChart.svelte';
+export { default as LiteAreaChart } from './LiteAreaChart.svelte';
+export { default as LiteScatterChart } from './LiteScatterChart.svelte';
+export { default as LiteRadarChart } from './LiteRadarChart.svelte';
+export { default as LiteGaugeChart } from './LiteGaugeChart.svelte';
+export { default as LiteFunnelChart } from './LiteFunnelChart.svelte';
+export { default as LiteHeatmapChart } from './LiteHeatmapChart.svelte';
+export { default as LiteWaterfallChart } from './LiteWaterfallChart.svelte';
+export { default as LiteRoseChart } from './LiteRoseChart.svelte';
+export { default as LiteDonutChart } from './LiteDonutChart.svelte';
+export { default as LiteChartTable } from './LiteChartTable.svelte';

package/dist/index.d.ts

@@ -30,6 +30,7 @@ export { default as LiteMetricStrip } from './components/LiteMetricStrip.svelte'
 export type { LiteMetricStripItem, LiteMetricTone, LiteMetricBadgeTone, } from './components/LiteMetricStrip.svelte';
 export { default as LiteBadge } from './components/LiteBadge.svelte';
 export type { LiteBadgeVariant } from './components/LiteBadge.svelte';
+export { default as LiteTag } from './components/LiteTag.svelte';
 export { default as LiteConfirmDialog } from './components/LiteConfirmDialog.svelte';
 export { default as LiteEmptyState } from './components/LiteEmptyState.svelte';
 export { default as LiteTabs } from './components/LiteTabs.svelte';
@@ -73,6 +74,45 @@ export { default as LitePdfDocumentViewer } from './components/LitePdfDocumentVi
 export { default as LiteSpreadsheetView } from './components/LiteSpreadsheetView.svelte';
 export { default as LiteDecisionTable } from './components/LiteDecisionTable.svelte';
 export { default as LiteOfflineSyncBanner } from './components/LiteOfflineSyncBanner.svelte';
+export { default as LiteImage } from './components/LiteImage.svelte';
+export { default as LiteImagePreview } from './components/LiteImagePreview.svelte';
+export { default as LiteVideoPlayer } from './components/LiteVideoPlayer.svelte';
+export { default as LiteCalendar } from './components/LiteCalendar.svelte';
+export { default as LiteCarousel } from './components/LiteCarousel.svelte';
+export { default as LiteAnchor } from './components/LiteAnchor.svelte';
+export { default as LiteAffix } from './components/LiteAffix.svelte';
+export { default as LiteCollapse } from './components/LiteCollapse.svelte';
+export { default as LiteCommentThread } from './components/LiteCommentThread.svelte';
+export { default as LiteFloatButton } from './components/LiteFloatButton.svelte';
+export { default as LiteSteps } from './components/LiteSteps.svelte';
+export { default as LiteTimeline } from './components/LiteTimeline.svelte';
+export { default as LiteStatistic } from './components/LiteStatistic.svelte';
+export { default as LiteCountdown } from './components/LiteCountdown.svelte';
+export { default as LiteTour } from './components/LiteTour.svelte';
+export { default as LiteMenu } from './components/LiteMenu.svelte';
+export { default as LiteSpace } from './components/LiteSpace.svelte';
+export { default as LiteGrid } from './components/LiteGrid.svelte';
+export { default as LiteLink } from './components/LiteLink.svelte';
+export { default as LitePageHeader } from './components/LitePageHeader.svelte';
+export { default as LiteStatusBadge } from './components/LiteStatusBadge.svelte';
+export { default as LiteStatusTabs } from './components/LiteStatusTabs.svelte';
+export { default as LiteNotificationCenter } from './components/LiteNotificationCenter.svelte';
+export { default as LiteOtpInput } from './components/LiteOtpInput.svelte';
+export { default as LiteTwoFactorStepper } from './components/LiteTwoFactorStepper.svelte';
+export { default as LitePopconfirm } from './components/LitePopconfirm.svelte';
+export { default as LiteDetailDrawer } from './components/LiteDetailDrawer.svelte';
+export { default as LiteRowActions } from './components/LiteRowActions.svelte';
+export { default as LiteItemList } from './components/LiteItemList.svelte';
+export { default as LiteBackTop } from './components/LiteBackTop.svelte';
+export { default as LiteResizeBox } from './components/LiteResizeBox.svelte';
+export { default as LiteAutoComplete } from './components/LiteAutoComplete.svelte';
+export { default as LiteResult } from './components/LiteResult.svelte';
+export { default as LiteSkeleton } from './components/LiteSkeleton.svelte';
+export { default as LiteSpin } from './components/LiteSpin.svelte';
+export { default as LiteProgress } from './components/LiteProgress.svelte';
+export { default as LiteTree } from './components/LiteTree.svelte';
+export { configureMarkdownRenderer, escapeHtml, renderInlineMarkdown, renderMarkdown, renderRichContent, sanitizeRichTextHtml, } from './rich-content';
+export type { MarkdownRenderOptions } from './rich-content';
 export * from './components/compatibility/index';
 export * from './components/buttons/index';
 export * from './components/fields/index';

package/dist/index.js

@@ -29,6 +29,7 @@ export { default as LiteBreadcrumbs } from './components/LiteBreadcrumbs.svelte'
 export { default as LiteStatsCard } from './components/LiteStatsCard.svelte';
 export { default as LiteMetricStrip } from './components/LiteMetricStrip.svelte';
 export { default as LiteBadge } from './components/LiteBadge.svelte';
+export { default as LiteTag } from './components/LiteTag.svelte';
 export { default as LiteConfirmDialog } from './components/LiteConfirmDialog.svelte';
 export { default as LiteEmptyState } from './components/LiteEmptyState.svelte';
 export { default as LiteTabs } from './components/LiteTabs.svelte';
@@ -70,6 +71,52 @@ export { default as LitePdfDocumentViewer } from './components/LitePdfDocumentVi
 export { default as LiteSpreadsheetView } from './components/LiteSpreadsheetView.svelte';
 export { default as LiteDecisionTable } from './components/LiteDecisionTable.svelte';
 export { default as LiteOfflineSyncBanner } from './components/LiteOfflineSyncBanner.svelte';
+// Media, navigation and feedback primitives added to keep Lite aligned with
+// the modern @svadmin/ui surface. These render static SSR HTML and never
+// require hydration.
+export { default as LiteImage } from './components/LiteImage.svelte';
+export { default as LiteImagePreview } from './components/LiteImagePreview.svelte';
+export { default as LiteVideoPlayer } from './components/LiteVideoPlayer.svelte';
+// LiteQRCode is an opt-in subpath export because it statically imports the
+// optional `qrcode` peer. Keeping it out of the root entry lets a consumer
+// import '@svadmin/lite' without installing that peer:
+//   import LiteQRCode from '@svadmin/lite/components/LiteQRCode.svelte';
+export { default as LiteCalendar } from './components/LiteCalendar.svelte';
+export { default as LiteCarousel } from './components/LiteCarousel.svelte';
+export { default as LiteAnchor } from './components/LiteAnchor.svelte';
+export { default as LiteAffix } from './components/LiteAffix.svelte';
+export { default as LiteCollapse } from './components/LiteCollapse.svelte';
+export { default as LiteCommentThread } from './components/LiteCommentThread.svelte';
+export { default as LiteFloatButton } from './components/LiteFloatButton.svelte';
+export { default as LiteSteps } from './components/LiteSteps.svelte';
+export { default as LiteTimeline } from './components/LiteTimeline.svelte';
+export { default as LiteStatistic } from './components/LiteStatistic.svelte';
+export { default as LiteCountdown } from './components/LiteCountdown.svelte';
+export { default as LiteTour } from './components/LiteTour.svelte';
+export { default as LiteMenu } from './components/LiteMenu.svelte';
+export { default as LiteSpace } from './components/LiteSpace.svelte';
+export { default as LiteGrid } from './components/LiteGrid.svelte';
+export { default as LiteLink } from './components/LiteLink.svelte';
+export { default as LitePageHeader } from './components/LitePageHeader.svelte';
+export { default as LiteStatusBadge } from './components/LiteStatusBadge.svelte';
+export { default as LiteStatusTabs } from './components/LiteStatusTabs.svelte';
+export { default as LiteNotificationCenter } from './components/LiteNotificationCenter.svelte';
+export { default as LiteOtpInput } from './components/LiteOtpInput.svelte';
+export { default as LiteTwoFactorStepper } from './components/LiteTwoFactorStepper.svelte';
+export { default as LitePopconfirm } from './components/LitePopconfirm.svelte';
+export { default as LiteDetailDrawer } from './components/LiteDetailDrawer.svelte';
+export { default as LiteRowActions } from './components/LiteRowActions.svelte';
+export { default as LiteItemList } from './components/LiteItemList.svelte';
+export { default as LiteBackTop } from './components/LiteBackTop.svelte';
+export { default as LiteResizeBox } from './components/LiteResizeBox.svelte';
+export { default as LiteAutoComplete } from './components/LiteAutoComplete.svelte';
+export { default as LiteResult } from './components/LiteResult.svelte';
+export { default as LiteSkeleton } from './components/LiteSkeleton.svelte';
+export { default as LiteSpin } from './components/LiteSpin.svelte';
+export { default as LiteProgress } from './components/LiteProgress.svelte';
+export { default as LiteTree } from './components/LiteTree.svelte';
+// Rich content rendering (SSR-safe Markdown + rich HTML allowlist)
+export { configureMarkdownRenderer, escapeHtml, renderInlineMarkdown, renderMarkdown, renderRichContent, sanitizeRichTextHtml, } from './rich-content';
 // Compatibility fallbacks for browser-only and third-party UI capabilities.
 export * from './components/compatibility/index';
 // Action Buttons

package/dist/lite-code-theme.css

@@ -0,0 +1,139 @@
+/**
+ * Opt-in code token theme for @svadmin/lite.
+ *
+ * `lite.css` ships IE11-safe literal token colours. Import this stylesheet
+ * instead (or after it) when the target baseline supports CSS custom
+ * properties, then override the variables per container to re-theme every
+ * Markdown / rich text / insight / comment / notification surface at once:
+ *
+ *   .lite-code-block { --lite-token-keyword: #7FD1FF; }
+ *
+ * Variables fall back to the same palette that `lite.css` hardcodes, so the
+ * stylesheet is safe to import on its own.
+ */
+.lite-markdown-preview,
+.lite-rich-preview,
+.lite-insight-content,
+.lite-comments__rich,
+.lite-notification-center__rich,
+.lite-activity-rich {
+  --lite-token-comment: #86909C;
+  --lite-token-keyword: #165DFF;
+  --lite-token-string: #007A5A;
+  --lite-token-number: #C2410C;
+  --lite-token-function: #7A3EA8;
+  --lite-token-type: #0E7490;
+}
+
+.lite-markdown-preview .tok-comment,
+.lite-rich-preview .tok-comment,
+.lite-insight-content .tok-comment,
+.lite-comments__rich .tok-comment,
+.lite-notification-center__rich .tok-comment,
+.lite-activity-rich .tok-comment {
+  color: var(--lite-token-comment, #86909C);
+  font-style: italic;
+}
+
+.lite-markdown-preview .tok-keyword,
+.lite-rich-preview .tok-keyword,
+.lite-insight-content .tok-keyword,
+.lite-comments__rich .tok-keyword,
+.lite-notification-center__rich .tok-keyword,
+.lite-activity-rich .tok-keyword {
+  color: var(--lite-token-keyword, #165DFF);
+  font-weight: 600;
+}
+
+.lite-markdown-preview .tok-string,
+.lite-rich-preview .tok-string,
+.lite-insight-content .tok-string,
+.lite-comments__rich .tok-string,
+.lite-notification-center__rich .tok-string,
+.lite-activity-rich .tok-string {
+  color: var(--lite-token-string, #007A5A);
+}
+
+.lite-markdown-preview .tok-number,
+.lite-rich-preview .tok-number,
+.lite-insight-content .tok-number,
+.lite-comments__rich .tok-number,
+.lite-notification-center__rich .tok-number,
+.lite-activity-rich .tok-number {
+  color: var(--lite-token-number, #C2410C);
+}
+
+.lite-markdown-preview .tok-function,
+.lite-rich-preview .tok-function,
+.lite-insight-content .tok-function,
+.lite-comments__rich .tok-function,
+.lite-notification-center__rich .tok-function,
+.lite-activity-rich .tok-function {
+  color: var(--lite-token-function, #7A3EA8);
+}
+
+.lite-markdown-preview .tok-type,
+.lite-rich-preview .tok-type,
+.lite-insight-content .tok-type,
+.lite-comments__rich .tok-type,
+.lite-notification-center__rich .tok-type,
+.lite-activity-rich .tok-type {
+  color: var(--lite-token-type, #0E7490);
+}
+/**
+ * Dark preset. Add `lite-dark` to any ancestor (or the preview container) to
+ * swap the palette and the code block / table-of-contents chrome:
+ *
+ *   <div class="lite-dark"><div class="lite-markdown-preview">…</div></div>
+ *
+ * Hosts with their own theme root can map it instead, for example
+ * `[data-theme="dark"] { --lite-token-keyword: … }`.
+ */
+.lite-dark {
+  --lite-token-comment: #8B949E;
+  --lite-token-keyword: #7FD1FF;
+  --lite-token-string: #9BE39B;
+  --lite-token-number: #FFC17A;
+  --lite-token-function: #C4A7FF;
+  --lite-token-type: #79D7D0;
+  color: #E6EDF3;
+}
+
+.lite-dark pre,
+.lite-dark .lite-code-block {
+  background: #161B22;
+  border-color: #30363D;
+  color: #E6EDF3;
+}
+
+.lite-dark pre code {
+  color: #E6EDF3;
+}
+
+.lite-dark .lite-toc {
+  background: #161B22;
+  border-color: #30363D;
+}
+
+.lite-dark .lite-toc__list a {
+  color: #7FD1FF;
+}
+
+.lite-dark blockquote {
+  border-left-color: #30363D;
+  color: #C9D1D9;
+}
+
+.lite-dark table th,
+.lite-dark table td {
+  border-color: #30363D;
+}
+
+.lite-dark table th {
+  background: #161B22;
+}
+
+.lite-dark .lite-footnotes {
+  border-top-color: #30363D;
+  color: #C9D1D9;
+}