@atmos.build/ui 0.1.0

package/dist/components/sql-editor.js

@@ -0,0 +1,228 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Prec } from '@codemirror/state';
+import { EditorView, keymap } from '@codemirror/view';
+import CodeMirror from '@uiw/react-codemirror';
+import { PostgreSQL, keywordCompletionSource, schemaCompletionSource, sql, } from '@codemirror/lang-sql';
+import { autocompletion, moveCompletionSelection, } from '@codemirror/autocomplete';
+import { syntaxHighlighting } from '@codemirror/language';
+import { atmosEditorHighlight, atmosEditorTheme } from './code-editor-theme.js';
+const READ_ONLY_KEYWORDS = new Set([
+    'select', 'distinct', 'from', 'where', 'group', 'by', 'having', 'order',
+    'limit', 'offset', 'fetch', 'first', 'next', 'only', 'rows', 'row', 'with',
+    'as', 'on', 'using',
+    'join', 'inner', 'left', 'right', 'full', 'outer', 'cross', 'natural', 'lateral',
+    'union', 'intersect', 'except', 'all',
+    'and', 'or', 'not', 'in', 'is', 'null', 'like', 'ilike', 'similar', 'between',
+    'exists', 'any', 'some', 'case', 'when', 'then', 'else', 'end', 'asc', 'desc', 'nulls',
+    'over', 'partition', 'window', 'filter', 'range', 'groups', 'unbounded',
+    'preceding', 'following', 'current',
+    'true', 'false', 'cast', 'coalesce', 'nullif', 'interval', 'array',
+    'int', 'integer', 'bigint', 'smallint', 'numeric', 'decimal', 'real', 'double',
+    'precision', 'text', 'varchar', 'char', 'boolean', 'bool', 'date', 'timestamp',
+    'timestamptz', 'time', 'uuid', 'json', 'jsonb',
+]);
+function readOnlyKeywords(base) {
+    return (ctx) => {
+        const res = base(ctx);
+        if (res && !(res instanceof Promise)) {
+            return {
+                ...res,
+                options: res.options.filter((o) => READ_ONLY_KEYWORDS.has(o.label.toLowerCase())),
+            };
+        }
+        return res;
+    };
+}
+function remapTypes(base, map) {
+    return (ctx) => {
+        const res = base(ctx);
+        if (res && !(res instanceof Promise)) {
+            return { ...res, options: res.options.map((o) => ({ ...o, type: map(o.type) })) };
+        }
+        return res;
+    };
+}
+function paramCompletionSource(params) {
+    const options = params.map((name) => ({
+        label: '@' + name,
+        type: 'constant',
+        detail: 'param',
+    }));
+    return (ctx) => {
+        if (options.length === 0)
+            return null;
+        const token = ctx.matchBefore(/@[\w]*/);
+        if (!token)
+            return null;
+        if (token.from === token.to && !ctx.explicit)
+            return null;
+        return { from: token.from, options, validFor: /^@[\w]*$/ };
+    };
+}
+const ICON_GEOMETRY = {
+    table: [['path', { d: 'M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18' }]],
+    column: [
+        ['rect', { width: '18', height: '18', x: '3', y: '3', rx: '2' }],
+        ['path', { d: 'M9 3v18' }],
+        ['path', { d: 'M15 3v18' }],
+    ],
+    keyword: [
+        ['circle', { cx: '7', cy: '12', r: '3' }],
+        ['path', { d: 'M10 9v6' }],
+        ['circle', { cx: '17', cy: '12', r: '3' }],
+        ['path', { d: 'M14 7v8' }],
+        ['path', { d: 'M22 17v1c0 .5-.5 1-1 1H3c-.5 0-1-.5-1-1v-1' }],
+    ],
+    datatype: [
+        ['polyline', { points: '4 7 4 4 20 4 20 7' }],
+        ['line', { x1: '9', x2: '15', y1: '20', y2: '20' }],
+        ['line', { x1: '12', x2: '12', y1: '4', y2: '20' }],
+    ],
+    func: [
+        ['rect', { width: '18', height: '18', x: '3', y: '3', rx: '2', ry: '2' }],
+        ['path', { d: 'M9 17c2 0 2.8-1 2.8-2.8V10c0-2 1-3.3 3.2-3' }],
+        ['path', { d: 'M9 11.2h5.7' }],
+    ],
+    param: [
+        ['circle', { cx: '12', cy: '12', r: '4' }],
+        ['path', { d: 'M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94' }],
+    ],
+};
+const TYPE_ICON = {
+    table: { geometry: ICON_GEOMETRY.table, cls: 'cm-ac-table' },
+    property: { geometry: ICON_GEOMETRY.column, cls: 'cm-ac-column' },
+    keyword: { geometry: ICON_GEOMETRY.keyword, cls: 'cm-ac-keyword' },
+    datatype: { geometry: ICON_GEOMETRY.datatype, cls: 'cm-ac-datatype' },
+    variable: { geometry: ICON_GEOMETRY.func, cls: 'cm-ac-func' },
+    constant: { geometry: ICON_GEOMETRY.param, cls: 'cm-ac-param' },
+};
+const SVG_NS = 'http://www.w3.org/2000/svg';
+function buildIcon(geometry) {
+    const svg = document.createElementNS(SVG_NS, 'svg');
+    svg.setAttribute('viewBox', '0 0 24 24');
+    svg.setAttribute('width', '14');
+    svg.setAttribute('height', '14');
+    svg.setAttribute('fill', 'none');
+    svg.setAttribute('stroke', 'currentColor');
+    svg.setAttribute('stroke-width', '1.9');
+    svg.setAttribute('stroke-linecap', 'round');
+    svg.setAttribute('stroke-linejoin', 'round');
+    for (const [tag, attrs] of geometry) {
+        const el = document.createElementNS(SVG_NS, tag);
+        for (const [k, v] of Object.entries(attrs))
+            el.setAttribute(k, v);
+        svg.appendChild(el);
+    }
+    return svg;
+}
+function renderCompletionIcon(completion) {
+    const wrap = document.createElement('span');
+    const spec = TYPE_ICON[completion.type ?? ''];
+    wrap.className = `cm-ac-icon ${spec?.cls ?? 'cm-ac-generic'}`;
+    if (spec)
+        wrap.appendChild(buildIcon(spec.geometry));
+    return wrap;
+}
+const completionTheme = EditorView.theme({
+    '.cm-tooltip.cm-tooltip-autocomplete': {
+        border: '1px solid var(--border)',
+        borderRadius: 'var(--radius-lg, 0.625rem)',
+        backgroundColor: 'var(--popover)',
+        color: 'var(--popover-foreground)',
+        boxShadow: '0 12px 32px -12px rgb(0 0 0 / 0.28)',
+        padding: '4px',
+        overflow: 'hidden',
+    },
+    '.cm-tooltip.cm-tooltip-autocomplete > ul': {
+        fontFamily: 'inherit',
+        fontSize: '12.5px',
+        maxHeight: '17rem',
+    },
+    '.cm-tooltip.cm-tooltip-autocomplete > ul > li': {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '7px',
+        padding: '4px 8px',
+        borderRadius: 'var(--radius-sm, 0.375rem)',
+        color: 'var(--popover-foreground)',
+    },
+    '.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]': {
+        backgroundColor: 'var(--accent)',
+        color: 'var(--accent-foreground)',
+    },
+    '.cm-ac-icon': {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '15px',
+        height: '15px',
+        flex: '0 0 auto',
+        opacity: '0.95',
+    },
+    '.cm-ac-table': { color: 'var(--cm-ident)' },
+    '.cm-ac-column': { color: 'var(--cm-name)' },
+    '.cm-ac-keyword': { color: 'var(--cm-keyword)' },
+    '.cm-ac-datatype': { color: 'var(--cm-number)' },
+    '.cm-ac-func': { color: 'var(--cm-function)' },
+    '.cm-ac-param': { color: 'var(--cm-string)' },
+    '.cm-ac-generic': { color: 'var(--muted-foreground)' },
+    '.cm-completionLabel': { flex: '1 1 auto', minWidth: '0' },
+    '.cm-completionMatchedText': {
+        textDecoration: 'none',
+        fontWeight: '600',
+        color: 'inherit',
+    },
+    '.cm-completionDetail': {
+        marginLeft: 'auto',
+        fontStyle: 'normal',
+        fontFamily: 'var(--font-geist-mono, ui-monospace, monospace)',
+        fontSize: '10.5px',
+        color: 'var(--muted-foreground)',
+    },
+});
+const completionNavKeymap = Prec.high(keymap.of([
+    { key: 'Ctrl-n', run: moveCompletionSelection(true) },
+    { key: 'Ctrl-p', run: moveCompletionSelection(false) },
+]));
+export function SqlEditor({ value, onChange, schema, placeholder, params }) {
+    const paramNames = useMemo(() => Array.from(new Set((params ?? []).map((p) => p.replace(/^@/, '').trim()).filter((p) => p !== ''))), [params]);
+    const extensions = useMemo(() => {
+        const objects = {};
+        for (const obj of schema) {
+            if (typeof obj.slug !== 'string')
+                continue;
+            const attributes = Array.isArray(obj.attributes)
+                ? obj.attributes.flatMap((attribute) => attribute && typeof attribute === 'object' && 'slug' in attribute
+                    && typeof attribute.slug === 'string'
+                    ? [attribute.slug]
+                    : [])
+                : [];
+            objects[obj.slug] = attributes;
+        }
+        return [
+            sql({ dialect: PostgreSQL }),
+            syntaxHighlighting(atmosEditorHighlight),
+            completionNavKeymap,
+            autocompletion({
+                icons: false,
+                addToOptions: [{ render: renderCompletionIcon, position: 20 }],
+                override: [
+                    paramCompletionSource(paramNames),
+                    remapTypes(schemaCompletionSource({ dialect: PostgreSQL, schema: objects }), (type) => type === 'type' ? 'table' : type),
+                    remapTypes(readOnlyKeywords(keywordCompletionSource(PostgreSQL, false)), (type) => type === 'type' ? 'datatype' : type),
+                ],
+            }),
+            atmosEditorTheme,
+            completionTheme,
+        ];
+    }, [schema, paramNames]);
+    return (_jsx(CodeMirror, { value: value, onChange: onChange, extensions: extensions, theme: "none", placeholder: placeholder, basicSetup: {
+            lineNumbers: true,
+            highlightActiveLine: true,
+            highlightActiveLineGutter: true,
+            foldGutter: false,
+            autocompletion: false,
+        }, height: "100%", style: { height: '100%', fontSize: '13px' }, className: "h-full font-mono" }));
+}

package/dist/components/stat-tile.d.ts

@@ -0,0 +1,7 @@
+export interface StatTileProps {
+    label: string;
+    value: number | string;
+    tone?: 'positive' | 'neutral' | 'negative';
+    className?: string;
+}
+export declare function StatTile({ label, value, tone, className }: StatTileProps): import("react").JSX.Element;

package/dist/components/stat-tile.js

@@ -0,0 +1,6 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../lib/cn.js';
+export function StatTile({ label, value, tone = 'neutral', className }) {
+    return (_jsxs("div", { "data-testid": "stat-tile", className: cn('rounded-md border px-2 py-2 text-center', tone === 'positive' && 'border-emerald-500/30 bg-emerald-500/5', tone === 'negative' && 'border-destructive/30 bg-destructive/5', tone === 'neutral' && 'border-border/60 bg-background', className), children: [_jsx("div", { className: "text-foreground font-mono text-[18px] tabular-nums", children: value }), _jsx("div", { className: "text-muted-foreground text-[10.5px]", children: label })] }));
+}

package/dist/components/status-badge.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { LucideIcon } from 'lucide-react';
+import { Badge } from './badge.js';
+import type { Tone } from './status-tone.js';
+export interface StatusBadgeProps extends React.ComponentProps<typeof Badge> {
+    tone: Tone;
+    label: string;
+    icon?: LucideIcon;
+    size?: 'sm' | 'md';
+    /**
+     * Spins the icon, for a status that is still resolving. A spinner glyph handed
+     * in as `icon` sits frozen without this and reads as a stuck process rather
+     * than a moving one. Clamped under prefers-reduced-motion.
+     */
+    busy?: boolean;
+}
+export declare function StatusBadge({ tone, label, icon: Icon, size, busy, className, ...props }: StatusBadgeProps): React.JSX.Element;

package/dist/components/status-badge.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Badge } from './badge.js';
+import { cn } from '../lib/cn.js';
+export function StatusBadge({ tone, label, icon: Icon, size = 'sm', busy = false, className, ...props }) {
+    return (_jsxs(Badge, { variant: "outline", "data-tone": tone, "data-busy": busy ? '' : undefined, className: cn('gap-1.5 font-medium', size === 'md' && 'h-6 px-2.5 text-sm', className), ...props, children: [Icon ? (_jsx(Icon, { "aria-hidden": true, className: cn('shrink-0 text-muted-foreground', busy && 'motion-safe:animate-spin') })) : (_jsx("span", { "aria-hidden": true, className: "size-1.5 shrink-0 rounded-full bg-muted-foreground" })), _jsx("span", { children: label })] }));
+}

package/dist/components/status-tone.d.ts

@@ -0,0 +1,9 @@
+export type Tone = 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+export interface ToneClasses {
+    dot: string;
+    text: string;
+    bg: string;
+    border: string;
+    rail: string;
+}
+export declare function statusTone(tone: Tone): ToneClasses;

package/dist/components/status-tone.js

@@ -0,0 +1,10 @@
+const TONES = {
+    success: { dot: 'bg-success', text: 'text-success', bg: 'bg-success/15', border: 'border-success/30', rail: 'bg-success/70' },
+    warning: { dot: 'bg-warning', text: 'text-warning', bg: 'bg-warning/15', border: 'border-warning/30', rail: 'bg-warning/70' },
+    danger: { dot: 'bg-danger', text: 'text-danger', bg: 'bg-danger/15', border: 'border-danger/30', rail: 'bg-danger/70' },
+    info: { dot: 'bg-info', text: 'text-info', bg: 'bg-info/15', border: 'border-info/30', rail: 'bg-info/70' },
+    neutral: { dot: 'bg-muted-foreground/40', text: 'text-muted-foreground', bg: 'bg-muted', border: 'border-border', rail: 'bg-muted-foreground/35' },
+};
+export function statusTone(tone) {
+    return TONES[tone];
+}

package/dist/components/sticky-header-fade.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithoutRef } from 'react';
+export type StickyHeaderFadeProps = ComponentPropsWithoutRef<'div'>;
+/**
+ * The strip a pinned header trails, so content passing beneath it dissolves into the header's
+ * surface instead of being sheared off at a hard line. Sits inside the header, which owns the
+ * positioning context; the surface it fades from comes from the header's own `from-*` colour.
+ */
+export declare function StickyHeaderFade({ className, ...props }: StickyHeaderFadeProps): import("react").JSX.Element;

package/dist/components/sticky-header-fade.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../lib/cn.js';
+/**
+ * The strip a pinned header trails, so content passing beneath it dissolves into the header's
+ * surface instead of being sheared off at a hard line. Sits inside the header, which owns the
+ * positioning context; the surface it fades from comes from the header's own `from-*` colour.
+ */
+export function StickyHeaderFade({ className, ...props }) {
+    return (_jsx("div", { "aria-hidden": true, "data-slot": "sticky-header-fade", className: cn('from-background/95 pointer-events-none absolute inset-x-0 top-full h-4 bg-gradient-to-b to-transparent', className), ...props }));
+}

package/dist/components/swatch-button.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const swatchVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface SwatchButtonProps extends Omit<React.ComponentProps<'button'>, 'color' | 'onSelect'>, VariantProps<typeof swatchVariants> {
+    color: string;
+    selected?: boolean;
+    onSelect?: () => void;
+    label?: string;
+    showCheck?: boolean;
+}
+export declare const SwatchButton: React.ForwardRefExoticComponent<Omit<SwatchButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { swatchVariants };

package/dist/components/swatch-button.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { Check } from 'lucide-react';
+import { cn } from '../lib/cn.js';
+const swatchVariants = cva('inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md bg-clip-padding ring-1 ring-border transition-transform outline-none hover:scale-110 focus-visible:ring-2 focus-visible:ring-ring data-[selected=true]:ring-2 data-[selected=true]:ring-foreground data-[selected=true]:ring-offset-1 data-[selected=true]:ring-offset-popover disabled:pointer-events-none disabled:opacity-40', {
+    variants: {
+        size: {
+            sm: 'size-5 [&_svg]:size-3',
+            md: 'size-6 [&_svg]:size-3.5',
+            lg: 'size-7 [&_svg]:size-4',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+    },
+});
+export const SwatchButton = React.forwardRef(function SwatchButton({ className, color, selected = false, onSelect, label, size, showCheck = true, style, type, onClick, ...props }, ref) {
+    return (_jsx("button", { ref: ref, type: type ?? 'button', "data-slot": "swatch-button", "data-selected": selected, "aria-pressed": selected, "aria-label": label ?? color, title: label ?? color, onClick: (event) => {
+            onClick?.(event);
+            onSelect?.();
+        }, className: cn(swatchVariants({ size, className })), style: { backgroundColor: color, ...style }, ...props, children: selected && showCheck ? (_jsx(Check, { className: "text-white drop-shadow", strokeWidth: 2.5, "aria-hidden": true })) : null }));
+});
+export { swatchVariants };

package/dist/components/switch.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { Switch as SwitchPrimitive } from "radix-ui";
+declare function Switch({ className, size, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+    size?: "sm" | "default";
+}): React.JSX.Element;
+export { Switch };

package/dist/components/switch.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Switch as SwitchPrimitive } from "radix-ui";
+import { cn } from '../lib/cn.js';
+function Switch({ className, size = "default", ...props }) {
+    return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", "data-size": size, className: cn("peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50", className), ...props, children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground" }) }));
+}
+export { Switch };

package/dist/components/system-load/index.d.ts

@@ -0,0 +1,6 @@
+export { LoadGrid, type LoadGridProps } from './load-grid.js';
+export { ResourceMeter, type ResourceMeterProps } from './resource-meter.js';
+export { LoadMeter, type LoadMeterProps } from './load-meter.js';
+export { MeterRow, MeterRowGroup, type MeterRowProps } from './meter-row.js';
+export { type LoadBlockSize } from './load-block.js';
+export { ALERT_AT, type LoadTone } from './load-tone.js';

package/dist/components/system-load/index.js

@@ -0,0 +1,6 @@
+export { LoadGrid } from './load-grid.js';
+export { ResourceMeter } from './resource-meter.js';
+export { LoadMeter } from './load-meter.js';
+export { MeterRow, MeterRowGroup } from './meter-row.js';
+export {} from './load-block.js';
+export { ALERT_AT } from './load-tone.js';

package/dist/components/system-load/load-block.d.ts

@@ -0,0 +1,20 @@
+import { type LoadTone } from './load-tone.js';
+/**
+ * Two sizes, because the same reading is read two ways: a panel that exists to be watched
+ * gives a block enough room to count, and a line inside a spec list has to sit on the type
+ * around it without becoming the loudest thing on the page.
+ */
+export type LoadBlockSize = 'sm' | 'md';
+/** The space between blocks belongs with the size that sets it. */
+export declare const LOAD_BLOCK_GAP: Record<LoadBlockSize, string>;
+/**
+ * The unit every load reading on this surface is built from: an empty well with a weighted
+ * fill. Weight rather than a second colour, because a block that picks its own hue turns a
+ * dense reading into a rash — how dark the block sits between muted and the usage hue is
+ * the whole reading.
+ */
+export declare function LoadBlock({ tone, fill, size, }: {
+    tone: LoadTone;
+    fill: number;
+    size?: LoadBlockSize;
+}): import("react").JSX.Element;

package/dist/components/system-load/load-block.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/cn.js';
+import { LOAD_FILL } from './load-tone.js';
+const SQUARE = 'shrink-0 [corner-shape:squircle]';
+const SIZE = {
+    md: 'size-3.5 rounded-[5px] supports-[corner-shape:squircle]:rounded-[45%]',
+    sm: 'size-2 rounded-[3px] supports-[corner-shape:squircle]:rounded-[45%]',
+};
+/** The space between blocks belongs with the size that sets it. */
+export const LOAD_BLOCK_GAP = {
+    md: 'gap-1.5',
+    sm: 'gap-1',
+};
+/**
+ * The unit every load reading on this surface is built from: an empty well with a weighted
+ * fill. Weight rather than a second colour, because a block that picks its own hue turns a
+ * dense reading into a rash — how dark the block sits between muted and the usage hue is
+ * the whole reading.
+ */
+export function LoadBlock({ tone, fill, size = 'md', }) {
+    return (_jsx("span", { "aria-hidden": true, className: cn(SQUARE, SIZE[size], 'bg-muted relative block'), children: fill > 0 ? (_jsx("span", { className: cn(SQUARE, SIZE[size], 'absolute inset-0 size-full transition-opacity duration-500 ease-[var(--ease-out-expo)]', LOAD_FILL[tone]), style: { opacity: fill } })) : null }));
+}

package/dist/components/system-load/load-grid.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export interface LoadGridProps extends Omit<React.ComponentProps<'div'>, 'children'> {
+    /** One reading per unit — a CPU core, a shard, a worker. */
+    readings: readonly number[];
+    /** Describes the whole grid, since the individual blocks carry no labels. */
+    ariaLabel: string;
+}
+/**
+ * One block per unit, unlabelled. Twenty cores with a number beside each is a table nobody
+ * reads; twenty blocks is a texture you take in at a glance, and how dark it is is the only
+ * question a reading this dense can usefully answer.
+ *
+ * Laid out roughly square rather than in one long row, so the grid reads as the machine
+ * itself rather than as another bar in a column of bars.
+ */
+export declare function LoadGrid({ readings, ariaLabel, className, ...props }: LoadGridProps): React.JSX.Element;

package/dist/components/system-load/load-grid.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../lib/cn.js';
+import { LoadBlock } from './load-block.js';
+import { clampPercent } from './load-tone.js';
+const MIN_VISIBLE_FILL = 0.25;
+const WIDEST_GRID = 12;
+/**
+ * One block per unit, unlabelled. Twenty cores with a number beside each is a table nobody
+ * reads; twenty blocks is a texture you take in at a glance, and how dark it is is the only
+ * question a reading this dense can usefully answer.
+ *
+ * Laid out roughly square rather than in one long row, so the grid reads as the machine
+ * itself rather than as another bar in a column of bars.
+ */
+export function LoadGrid({ readings, ariaLabel, className, ...props }) {
+    const columns = Math.min(WIDEST_GRID, Math.ceil(Math.sqrt(readings.length)));
+    return (_jsx("div", { "data-slot": "load-grid", "data-tone": "usage", role: "img", "aria-label": ariaLabel, className: cn('grid w-fit gap-1.5', className), style: { gridTemplateColumns: `repeat(${columns}, auto)` }, ...props, children: readings.map((reading, index) => {
+            const value = clampPercent(reading);
+            return (_jsx(LoadBlock, { tone: "usage", fill: value === 0 ? 0 : MIN_VISIBLE_FILL + (1 - MIN_VISIBLE_FILL) * (value / 100) }, index));
+        }) }));
+}

package/dist/components/system-load/load-meter.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { type LoadBlockSize } from './load-block.js';
+export interface LoadMeterProps extends Omit<React.ComponentProps<'span'>, 'children'> {
+    /** What is being measured. Named here because the blocks carry no text of their own. */
+    label: string;
+    /** Utilisation, 0–100. */
+    percent: number;
+    /** The reading in the reader's units, already formatted: "27.9 GB of 64 GB". */
+    detail?: string;
+    /** How many blocks the line is long; each one is a slice of the whole. */
+    blocks?: number;
+    /** Past this reading the meter turns red. Left out, it never does. */
+    alertAt?: number;
+    size?: LoadBlockSize;
+}
+/**
+ * The reading itself, with nothing around it: counting dark blocks answers "how full is it"
+ * faster than reading where a bar happens to stop. ResourceMeter puts a label and a figure
+ * beside it; a surface that already has both in its own layout uses this on its own.
+ *
+ * The block the reading lands inside is filled by how far into it the reading got, so ten
+ * blocks still resolve a percent: 65% is six blocks and a half-lit seventh, not a choice
+ * between six and seven.
+ */
+export declare function LoadMeter({ label, percent, detail, blocks, alertAt, size, className, ...props }: LoadMeterProps): React.JSX.Element;

package/dist/components/system-load/load-meter.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../lib/cn.js';
+import { LOAD_BLOCK_GAP, LoadBlock } from './load-block.js';
+import { resolveLoadReading } from './load-tone.js';
+const DEFAULT_BLOCKS = 24;
+/** Enough weight that a reading too small to fill a block still shows one. */
+const MIN_VISIBLE_FILL = 0.2;
+/**
+ * The reading itself, with nothing around it: counting dark blocks answers "how full is it"
+ * faster than reading where a bar happens to stop. ResourceMeter puts a label and a figure
+ * beside it; a surface that already has both in its own layout uses this on its own.
+ *
+ * The block the reading lands inside is filled by how far into it the reading got, so ten
+ * blocks still resolve a percent: 65% is six blocks and a half-lit seventh, not a choice
+ * between six and seven.
+ */
+export function LoadMeter({ label, percent, detail, blocks = DEFAULT_BLOCKS, alertAt, size = 'md', className, ...props }) {
+    const { value, rounded, reading, tone } = resolveLoadReading(percent, detail, alertAt);
+    const reach = (value / 100) * blocks;
+    return (_jsx("span", { role: "meter", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": rounded, "aria-valuetext": reading, "aria-label": label, className: cn('flex', LOAD_BLOCK_GAP[size], className), ...props, children: Array.from({ length: blocks }, (_, index) => (_jsx(LoadBlock, { tone: tone, fill: blockFill(reach, index), size: size }, index))) }));
+}
+function blockFill(reach, index) {
+    const fill = Math.min(1, Math.max(0, reach - index));
+    if (index === 0 && reach > 0)
+        return Math.max(fill, MIN_VISIBLE_FILL);
+    return fill;
+}

package/dist/components/system-load/load-tone.d.ts

@@ -0,0 +1,21 @@
+/**
+ * One ramp for every utilisation reading on a surface: the usage hue laid over muted,
+ * weighted by how much of the resource is gone. Colour changes only where a reading stops
+ * being information and becomes a problem — a disk with no room left — so red still means
+ * something on the rare occasion it appears. Tone is carried on a `data-tone` attribute as
+ * well as the fill, because colour alone is not a status.
+ */
+export type LoadTone = 'usage' | 'alert';
+/** Above this, a resource is close enough to full that the reader has to act. */
+export declare const ALERT_AT = 90;
+export declare const LOAD_FILL: Record<LoadTone, string>;
+export declare const LOAD_TEXT: Record<LoadTone, string>;
+/** One rule for when a reading stops being information and becomes a problem. */
+export declare function loadTone(percent: number, alertAt?: number): LoadTone;
+export declare function clampPercent(value: number): number;
+export declare function resolveLoadReading(percent: number, detail?: string, alertAt?: number): {
+    value: number;
+    rounded: number;
+    reading: string;
+    tone: LoadTone;
+};

package/dist/components/system-load/load-tone.js

@@ -0,0 +1,29 @@
+/** Above this, a resource is close enough to full that the reader has to act. */
+export const ALERT_AT = 90;
+export const LOAD_FILL = {
+    usage: 'bg-usage',
+    alert: 'bg-danger-9',
+};
+export const LOAD_TEXT = {
+    usage: 'text-muted-foreground',
+    alert: 'text-danger-11',
+};
+/** One rule for when a reading stops being information and becomes a problem. */
+export function loadTone(percent, alertAt) {
+    return alertAt !== undefined && clampPercent(percent) > alertAt ? 'alert' : 'usage';
+}
+export function clampPercent(value) {
+    if (!Number.isFinite(value))
+        return 0;
+    return Math.max(0, Math.min(100, value));
+}
+export function resolveLoadReading(percent, detail, alertAt) {
+    const value = clampPercent(percent);
+    const rounded = Math.round(value);
+    return {
+        value,
+        rounded,
+        reading: detail ?? `${rounded}%`,
+        tone: loadTone(value, alertAt),
+    };
+}

package/dist/components/system-load/meter-row.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+/**
+ * The grid the rows inside it borrow. Each row is its own subgrid, so a stack of readings
+ * puts its blocks and its figures on the same two edges however wide the labels run — which
+ * a row that sized itself could not do, and which is the whole reason a column of readings
+ * scans as one instrument.
+ */
+export declare function MeterRowGroup({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+export interface MeterRowProps extends Omit<React.ComponentProps<'div'>, 'children'> {
+    /** What is being measured — "Context usage", "Weekly limit". */
+    label: string;
+    /** Utilisation, 0–100. */
+    percent: number;
+    /** The reading in the reader's units, already formatted: "144.7K of 258.4K". */
+    detail?: string;
+    /** A second line under the reading — when the window resets, how stale the sample is. */
+    caption?: React.ReactNode;
+    /** Past this reading the meter turns red. Left out, it never does. */
+    alertAt?: number;
+    /**
+     * Keep the label as the row's accessible name without spending a line of the surface on
+     * it — for a reading whose blocks and figure already say what is being measured.
+     */
+    labelHidden?: boolean;
+}
+/**
+ * A reading on one line: what it measures, a short run of blocks filled to it, the figure.
+ * ResourceMeter is the same reading given a panel to live in; this is the form that belongs
+ * beside rows of text, where a full-width track would claim the surface for a single number.
+ */
+export declare function MeterRow({ label, percent, detail, caption, alertAt, labelHidden, className, ...props }: MeterRowProps): React.JSX.Element;