@seedgrid/fe-components 0.2.9 → 2026.3.1

package/dist/gadgets/gauge/SgLinearGauge.js

@@ -0,0 +1,258 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+function cn(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+function clamp(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+}
+function toNumber(value, fallback) {
+    return Number.isFinite(value) ? value : fallback;
+}
+const MAIN_POINTER_ID = "__sg-linear-main-pointer__";
+export function SgLinearGauge(props) {
+    const { min = 0, max = 100, value, defaultValue = min, onValueChange, pointers = [], onPointerValueChange, ranges = [], orientation = "horizontal", isAxisInversed = false, showPrimaryPointer = true, primaryPointerShape = "triangle", primaryPointerColor = "hsl(var(--primary))", primaryPointerSize = 11, primaryPointerDraggable = false, barPointer = true, barColor = "hsl(var(--primary))", barThickness = 8, showTicks = true, showLabels = true, majorTickCount = 5, minorTicksPerInterval = 1, labelFormatter, axisColor = "hsl(var(--border))", axisThickness = 10, width = orientation === "horizontal" ? 360 : 140, height = orientation === "horizontal" ? 120 : 360, animate = true, animationDuration = 350, className, style, ariaLabel = "Linear gauge" } = props;
+    const safeMin = toNumber(min, 0);
+    const safeMax = toNumber(max, 100);
+    const hasRange = safeMax > safeMin;
+    const span = hasRange ? safeMax - safeMin : 1;
+    const [innerValue, setInnerValue] = React.useState(defaultValue);
+    const isControlled = value !== undefined;
+    const currentValueRaw = isControlled ? value : innerValue;
+    const currentValue = clamp(currentValueRaw, safeMin, safeMax);
+    const setMainValue = React.useCallback((next) => {
+        const clamped = clamp(next, safeMin, safeMax);
+        if (!isControlled)
+            setInnerValue(clamped);
+        onValueChange?.(clamped);
+    }, [isControlled, onValueChange, safeMax, safeMin]);
+    React.useEffect(() => {
+        if (isControlled)
+            return;
+        setInnerValue((prev) => clamp(prev, safeMin, safeMax));
+    }, [isControlled, safeMin, safeMax]);
+    const pointerIds = React.useMemo(() => pointers.map((pointer, index) => pointer.id ?? `sg-linear-pointer-${index}`), [pointers]);
+    const [dragPointerValues, setDragPointerValues] = React.useState({});
+    React.useEffect(() => {
+        setDragPointerValues((prev) => {
+            const next = { ...prev };
+            let changed = false;
+            for (let i = 0; i < pointers.length; i += 1) {
+                const pointer = pointers[i];
+                if (!pointer)
+                    continue;
+                const pointerId = pointerIds[i] ?? `sg-linear-pointer-${i}`;
+                const clamped = clamp(pointer.value, safeMin, safeMax);
+                if (next[pointerId] !== clamped) {
+                    next[pointerId] = clamped;
+                    changed = true;
+                }
+            }
+            for (const key of Object.keys(next)) {
+                if (!pointerIds.includes(key)) {
+                    delete next[key];
+                    changed = true;
+                }
+            }
+            return changed ? next : prev;
+        });
+    }, [pointerIds, pointers, safeMax, safeMin]);
+    const majorCount = Math.max(1, Math.floor(majorTickCount));
+    const minorCount = Math.max(0, Math.floor(minorTicksPerInterval));
+    const totalWidth = Math.max(120, Math.floor(width));
+    const totalHeight = Math.max(90, Math.floor(height));
+    const labelSpace = showLabels ? 20 : 8;
+    const tickSpace = showTicks ? 14 : 6;
+    const axisStart = orientation === "horizontal"
+        ? { x: 16, y: totalHeight - labelSpace - tickSpace - 4 }
+        : { x: totalWidth - labelSpace - tickSpace - 4, y: totalHeight - 16 };
+    const axisEnd = orientation === "horizontal"
+        ? { x: totalWidth - 16, y: totalHeight - labelSpace - tickSpace - 4 }
+        : { x: totalWidth - labelSpace - tickSpace - 4, y: 16 };
+    const valueToRatio = React.useCallback((raw) => {
+        const normalized = clamp((raw - safeMin) / span, 0, 1);
+        return isAxisInversed ? 1 - normalized : normalized;
+    }, [isAxisInversed, safeMin, span]);
+    const ratioToValue = React.useCallback((ratioRaw) => {
+        const ratio = clamp(ratioRaw, 0, 1);
+        const normalized = isAxisInversed ? 1 - ratio : ratio;
+        return safeMin + normalized * span;
+    }, [isAxisInversed, safeMin, span]);
+    const valueToPoint = React.useCallback((raw) => {
+        const ratio = valueToRatio(raw);
+        const x = axisStart.x + ratio * (axisEnd.x - axisStart.x);
+        const y = axisStart.y + ratio * (axisEnd.y - axisStart.y);
+        return { x, y };
+    }, [axisEnd.x, axisEnd.y, axisStart.x, axisStart.y, valueToRatio]);
+    const pointToValue = React.useCallback((x, y) => {
+        if (orientation === "horizontal") {
+            const ratio = (x - axisStart.x) / (axisEnd.x - axisStart.x || 1);
+            return ratioToValue(ratio);
+        }
+        const ratio = (y - axisStart.y) / (axisEnd.y - axisStart.y || 1);
+        return ratioToValue(ratio);
+    }, [axisEnd.x, axisEnd.y, axisStart.x, axisStart.y, orientation, ratioToValue]);
+    const pointerList = React.useMemo(() => {
+        const list = [];
+        if (showPrimaryPointer) {
+            list.push({
+                id: MAIN_POINTER_ID,
+                isPrimary: true,
+                pointer: {
+                    id: MAIN_POINTER_ID,
+                    value: currentValue,
+                    color: primaryPointerColor,
+                    shape: primaryPointerShape,
+                    size: primaryPointerSize,
+                    draggable: primaryPointerDraggable
+                },
+                value: currentValue
+            });
+        }
+        for (let i = 0; i < pointers.length; i += 1) {
+            const pointer = pointers[i];
+            if (!pointer)
+                continue;
+            const pointerId = pointerIds[i] ?? `sg-linear-pointer-${i}`;
+            const dragValue = dragPointerValues[pointerId];
+            list.push({
+                id: pointerId,
+                isPrimary: false,
+                pointer,
+                value: clamp(dragValue ?? pointer.value, safeMin, safeMax)
+            });
+        }
+        return list;
+    }, [
+        currentValue,
+        dragPointerValues,
+        pointerIds,
+        pointers,
+        primaryPointerColor,
+        primaryPointerDraggable,
+        primaryPointerShape,
+        primaryPointerSize,
+        safeMax,
+        safeMin,
+        showPrimaryPointer
+    ]);
+    const pointerMap = React.useMemo(() => {
+        const map = new Map();
+        for (const item of pointerList)
+            map.set(item.id, item);
+        return map;
+    }, [pointerList]);
+    const svgRef = React.useRef(null);
+    const [draggingPointerId, setDraggingPointerId] = React.useState(null);
+    React.useEffect(() => {
+        if (!draggingPointerId)
+            return;
+        const onMove = (event) => {
+            const svg = svgRef.current;
+            const pointerMeta = pointerMap.get(draggingPointerId);
+            if (!svg || !pointerMeta)
+                return;
+            const rect = svg.getBoundingClientRect();
+            if (rect.width <= 0 || rect.height <= 0)
+                return;
+            const localX = ((event.clientX - rect.left) / rect.width) * totalWidth;
+            const localY = ((event.clientY - rect.top) / rect.height) * totalHeight;
+            const next = clamp(pointToValue(localX, localY), safeMin, safeMax);
+            if (pointerMeta.isPrimary) {
+                setMainValue(next);
+            }
+            else {
+                setDragPointerValues((prev) => ({
+                    ...prev,
+                    [pointerMeta.id]: next
+                }));
+                pointerMeta.pointer.onValueChange?.(next);
+                onPointerValueChange?.(pointerMeta.id, next, pointerMeta.pointer);
+            }
+        };
+        const onEnd = () => {
+            setDraggingPointerId(null);
+        };
+        window.addEventListener("pointermove", onMove);
+        window.addEventListener("pointerup", onEnd);
+        window.addEventListener("pointercancel", onEnd);
+        return () => {
+            window.removeEventListener("pointermove", onMove);
+            window.removeEventListener("pointerup", onEnd);
+            window.removeEventListener("pointercancel", onEnd);
+        };
+    }, [
+        draggingPointerId,
+        onPointerValueChange,
+        pointToValue,
+        pointerMap,
+        safeMax,
+        safeMin,
+        setMainValue,
+        totalHeight,
+        totalWidth
+    ]);
+    const majorValues = React.useMemo(() => {
+        const values = [];
+        for (let i = 0; i <= majorCount; i += 1) {
+            values.push(safeMin + (span * i) / majorCount);
+        }
+        return values;
+    }, [majorCount, safeMin, span]);
+    const animatedStyle = animate
+        ? { transition: `all ${animationDuration}ms ease-out` }
+        : {};
+    const primaryBarEnd = valueToPoint(currentValue);
+    const primaryBarStart = valueToPoint(safeMin);
+    return (_jsx("div", { className: cn("inline-flex select-none", className), role: "meter", "aria-label": ariaLabel, "aria-valuemin": safeMin, "aria-valuemax": safeMax, "aria-valuenow": currentValue, style: style, children: _jsxs("svg", { ref: svgRef, width: totalWidth, height: totalHeight, viewBox: `0 0 ${totalWidth} ${totalHeight}`, className: "overflow-visible", children: [_jsx("line", { x1: axisStart.x, y1: axisStart.y, x2: axisEnd.x, y2: axisEnd.y, stroke: axisColor, strokeLinecap: "round", strokeWidth: axisThickness }), ranges.map((range, index) => {
+                    const start = clamp(Math.min(range.start, range.end), safeMin, safeMax);
+                    const end = clamp(Math.max(range.start, range.end), safeMin, safeMax);
+                    const p1 = valueToPoint(start);
+                    const p2 = valueToPoint(end);
+                    return (_jsx("line", { x1: p1.x, y1: p1.y, x2: p2.x, y2: p2.y, stroke: range.color ?? "hsl(var(--primary))", strokeLinecap: "round", strokeWidth: range.thickness ?? axisThickness + 2, strokeOpacity: range.opacity ?? 0.55 }, `range-${index}`));
+                }), barPointer ? (_jsx("line", { x1: primaryBarStart.x, y1: primaryBarStart.y, x2: primaryBarEnd.x, y2: primaryBarEnd.y, stroke: barColor, strokeLinecap: "round", strokeWidth: barThickness, style: animatedStyle })) : null, showTicks
+                    ? majorValues.map((majorValue, index) => {
+                        const point = valueToPoint(majorValue);
+                        const nextValue = index < majorValues.length - 1
+                            ? majorValues[index + 1] ?? majorValue
+                            : majorValue;
+                        const segment = nextValue - majorValue;
+                        return (_jsxs("g", { children: [orientation === "horizontal" ? (_jsx("line", { x1: point.x, y1: axisStart.y + axisThickness / 2, x2: point.x, y2: axisStart.y + axisThickness / 2 + 10, stroke: "hsl(var(--muted-foreground))", strokeWidth: 1.4 })) : (_jsx("line", { x1: axisStart.x - axisThickness / 2, y1: point.y, x2: axisStart.x - axisThickness / 2 - 10, y2: point.y, stroke: "hsl(var(--muted-foreground))", strokeWidth: 1.4 })), index < majorValues.length - 1 && minorCount > 0
+                                    ? Array.from({ length: minorCount }).map((_, minorIndex) => {
+                                        const t = (minorIndex + 1) / (minorCount + 1);
+                                        const minorValue = majorValue + segment * t;
+                                        const minorPoint = valueToPoint(minorValue);
+                                        return orientation === "horizontal" ? (_jsx("line", { x1: minorPoint.x, y1: axisStart.y + axisThickness / 2, x2: minorPoint.x, y2: axisStart.y + axisThickness / 2 + 6, stroke: "hsl(var(--muted-foreground))", strokeWidth: 1, strokeOpacity: 0.75 }, `minor-${index}-${minorIndex}`)) : (_jsx("line", { x1: axisStart.x - axisThickness / 2, y1: minorPoint.y, x2: axisStart.x - axisThickness / 2 - 6, y2: minorPoint.y, stroke: "hsl(var(--muted-foreground))", strokeWidth: 1, strokeOpacity: 0.75 }, `minor-${index}-${minorIndex}`));
+                                    })
+                                    : null] }, `major-${index}`));
+                    })
+                    : null, showLabels
+                    ? majorValues.map((majorValue, index) => {
+                        const point = valueToPoint(majorValue);
+                        return orientation === "horizontal" ? (_jsx("text", { x: point.x, y: axisStart.y + axisThickness / 2 + 23, textAnchor: "middle", className: "fill-muted-foreground text-[11px]", children: labelFormatter ? labelFormatter(majorValue) : Math.round(majorValue) }, `label-${index}`)) : (_jsx("text", { x: axisStart.x - axisThickness / 2 - 14, y: point.y + 3, textAnchor: "end", className: "fill-muted-foreground text-[11px]", children: labelFormatter ? labelFormatter(majorValue) : Math.round(majorValue) }, `label-${index}`));
+                    })
+                    : null, pointerList.map((entry, index) => {
+                    const pointer = entry.pointer;
+                    const point = valueToPoint(entry.value);
+                    const color = pointer.color ??
+                        (entry.isPrimary ? primaryPointerColor : "hsl(var(--secondary))");
+                    const size = pointer.size ?? (entry.isPrimary ? primaryPointerSize : 9);
+                    const shape = pointer.shape ?? "circle";
+                    const draggable = !!pointer.draggable;
+                    const pointerStyle = animatedStyle;
+                    const handlePointerDown = (event) => {
+                        if (!draggable)
+                            return;
+                        event.preventDefault();
+                        setDraggingPointerId(entry.id);
+                    };
+                    const label = pointer.label !== undefined
+                        ? pointer.label
+                        : entry.isPrimary
+                            ? Math.round(entry.value)
+                            : null;
+                    return (_jsxs("g", { style: pointerStyle, className: draggable ? "cursor-pointer" : "", onPointerDown: handlePointerDown, children: [shape === "circle" ? (_jsx("circle", { cx: point.x, cy: point.y, r: size / 2, fill: color })) : shape === "diamond" ? (_jsx("polygon", { points: `${point.x},${point.y - size / 2} ${point.x + size / 2},${point.y} ${point.x},${point.y + size / 2} ${point.x - size / 2},${point.y}`, fill: color })) : shape === "rect" ? (_jsx("rect", { x: point.x - size / 2, y: point.y - size / 2, width: size, height: size, rx: 2, fill: color })) : shape === "inverted-triangle" ? (orientation === "horizontal" ? (_jsx("polygon", { points: `${point.x - size / 2},${point.y - size / 2} ${point.x + size / 2},${point.y - size / 2} ${point.x},${point.y + size / 2}`, fill: color })) : (_jsx("polygon", { points: `${point.x - size / 2},${point.y - size / 2} ${point.x - size / 2},${point.y + size / 2} ${point.x + size / 2},${point.y}`, fill: color }))) : orientation === "horizontal" ? (_jsx("polygon", { points: `${point.x - size / 2},${point.y + size / 2} ${point.x + size / 2},${point.y + size / 2} ${point.x},${point.y - size / 2}`, fill: color })) : (_jsx("polygon", { points: `${point.x + size / 2},${point.y - size / 2} ${point.x + size / 2},${point.y + size / 2} ${point.x - size / 2},${point.y}`, fill: color })), label !== null ? (orientation === "horizontal" ? (_jsx("text", { x: point.x, y: point.y - size - 6 - index * 13, textAnchor: "middle", className: "fill-foreground text-[11px]", children: label })) : (_jsx("text", { x: point.x + size + 8, y: point.y + 3, textAnchor: "start", className: "fill-foreground text-[11px]", children: label }))) : null] }, entry.id));
+                })] }) }));
+}
+SgLinearGauge.displayName = "SgLinearGauge";

package/dist/gadgets/gauge/SgRadialGauge.d.ts

@@ -0,0 +1,73 @@
+import * as React from "react";
+export type SgRadialGaugeRange = {
+    start: number;
+    end: number;
+    color?: string;
+    width?: number;
+    opacity?: number;
+};
+export type SgRadialGaugePointerType = "needle" | "marker" | "range";
+export type SgRadialGaugeMarkerShape = "circle" | "diamond" | "triangle" | "square";
+export type SgRadialGaugePointer = {
+    id?: string;
+    type?: SgRadialGaugePointerType;
+    value: number;
+    color?: string;
+    width?: number;
+    size?: number;
+    shape?: SgRadialGaugeMarkerShape;
+    draggable?: boolean;
+    onValueChange?: (value: number) => void;
+    label?: React.ReactNode;
+};
+export type SgRadialGaugeAnnotation = {
+    id?: string;
+    value?: number;
+    angle?: number;
+    radiusFactor?: number;
+    content: React.ReactNode;
+};
+export type SgRadialGaugeProps = {
+    min?: number;
+    max?: number;
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    pointers?: SgRadialGaugePointer[];
+    onPointerValueChange?: (pointerId: string, value: number, pointer: SgRadialGaugePointer) => void;
+    ranges?: SgRadialGaugeRange[];
+    annotations?: SgRadialGaugeAnnotation[];
+    startAngle?: number;
+    endAngle?: number;
+    isAxisInversed?: boolean;
+    showPrimaryPointer?: boolean;
+    primaryPointerType?: SgRadialGaugePointerType;
+    primaryPointerColor?: string;
+    primaryPointerWidth?: number;
+    primaryPointerSize?: number;
+    primaryPointerShape?: SgRadialGaugeMarkerShape;
+    primaryPointerDraggable?: boolean;
+    primaryPointerLabel?: React.ReactNode;
+    showTicks?: boolean;
+    showLabels?: boolean;
+    majorTickCount?: number;
+    minorTicksPerInterval?: number;
+    labelFormatter?: (value: number) => React.ReactNode;
+    axisColor?: string;
+    ringThickness?: number;
+    axisWidth?: number;
+    radiusFactor?: number;
+    centerContent?: React.ReactNode;
+    width?: number;
+    height?: number;
+    animate?: boolean;
+    animationDuration?: number;
+    className?: string;
+    style?: React.CSSProperties;
+    ariaLabel?: string;
+};
+export declare function SgRadialGauge(props: Readonly<SgRadialGaugeProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace SgRadialGauge {
+    var displayName: string;
+}
+//# sourceMappingURL=SgRadialGauge.d.ts.map

package/dist/gadgets/gauge/SgRadialGauge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgRadialGauge.d.ts","sourceRoot":"","sources":["../../../src/gadgets/gauge/SgRadialGauge.tsx"],"names":[],"mappings":"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"}

package/dist/gadgets/gauge/SgRadialGauge.js

@@ -0,0 +1,311 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+function cn(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+function clamp(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+}
+function normalizeAngle(angle) {
+    const normalized = angle % 360;
+    return normalized < 0 ? normalized + 360 : normalized;
+}
+function toSweep(startAngle, endAngle) {
+    const start = normalizeAngle(startAngle);
+    const end = normalizeAngle(endAngle);
+    const sweep = end >= start ? end - start : end + 360 - start;
+    return sweep === 0 ? 360 : sweep;
+}
+function polar(cx, cy, radius, angleDeg) {
+    const rad = (angleDeg * Math.PI) / 180;
+    return {
+        x: cx + radius * Math.cos(rad),
+        y: cy + radius * Math.sin(rad)
+    };
+}
+function arcPath(cx, cy, radius, startAngle, endAngle) {
+    let sweep = toSweep(startAngle, endAngle);
+    if (sweep >= 360)
+        sweep = 359.999;
+    const start = polar(cx, cy, radius, startAngle);
+    const end = polar(cx, cy, radius, startAngle + sweep);
+    const largeArcFlag = sweep > 180 ? 1 : 0;
+    return `M ${start.x} ${start.y} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${end.x} ${end.y}`;
+}
+const MAIN_POINTER_ID = "__sg-radial-main-pointer__";
+export function SgRadialGauge(props) {
+    const { min = 0, max = 100, value, defaultValue = min, onValueChange, pointers = [], onPointerValueChange, ranges = [], annotations = [], startAngle = 135, endAngle = 45, isAxisInversed = false, showPrimaryPointer = true, primaryPointerType = "needle", primaryPointerColor = "hsl(var(--primary))", primaryPointerWidth = 3, primaryPointerSize = 12, primaryPointerShape = "circle", primaryPointerDraggable = false, primaryPointerLabel, showTicks = true, showLabels = true, majorTickCount = 5, minorTicksPerInterval = 1, labelFormatter, axisColor = "hsl(var(--border))", ringThickness, axisWidth = 14, radiusFactor = 0.9, centerContent, width = 300, height = 300, animate = true, animationDuration = 350, className, style, ariaLabel = "Radial gauge" } = props;
+    const safeMin = Number.isFinite(min) ? min : 0;
+    const safeMax = Number.isFinite(max) && max > safeMin ? max : safeMin + 100;
+    const span = safeMax - safeMin;
+    const [innerValue, setInnerValue] = React.useState(defaultValue);
+    const isControlled = value !== undefined;
+    const currentValueRaw = isControlled ? value : innerValue;
+    const currentValue = clamp(currentValueRaw, safeMin, safeMax);
+    const setMainValue = React.useCallback((next) => {
+        const clamped = clamp(next, safeMin, safeMax);
+        if (!isControlled)
+            setInnerValue(clamped);
+        onValueChange?.(clamped);
+    }, [isControlled, onValueChange, safeMax, safeMin]);
+    React.useEffect(() => {
+        if (isControlled)
+            return;
+        setInnerValue((prev) => clamp(prev, safeMin, safeMax));
+    }, [isControlled, safeMin, safeMax]);
+    const pointerIds = React.useMemo(() => pointers.map((pointer, index) => pointer.id ?? `sg-radial-pointer-${index}`), [pointers]);
+    const [dragPointerValues, setDragPointerValues] = React.useState({});
+    React.useEffect(() => {
+        setDragPointerValues((prev) => {
+            const next = { ...prev };
+            let changed = false;
+            for (let i = 0; i < pointers.length; i += 1) {
+                const pointer = pointers[i];
+                if (!pointer)
+                    continue;
+                const pointerId = pointerIds[i] ?? `sg-radial-pointer-${i}`;
+                const clamped = clamp(pointer.value, safeMin, safeMax);
+                if (next[pointerId] !== clamped) {
+                    next[pointerId] = clamped;
+                    changed = true;
+                }
+            }
+            for (const key of Object.keys(next)) {
+                if (!pointerIds.includes(key)) {
+                    delete next[key];
+                    changed = true;
+                }
+            }
+            return changed ? next : prev;
+        });
+    }, [pointerIds, pointers, safeMax, safeMin]);
+    const totalWidth = Math.max(160, Math.floor(width));
+    const totalHeight = Math.max(160, Math.floor(height));
+    const cx = totalWidth / 2;
+    const cy = totalHeight / 2;
+    const rawAxisWidth = ringThickness ?? axisWidth;
+    const safeAxisWidth = Number.isFinite(rawAxisWidth) ? Math.max(1, rawAxisWidth) : 14;
+    const safeRadiusFactorRaw = Number.isFinite(radiusFactor) ? radiusFactor : 0.9;
+    const safeRadiusFactor = Math.max(0.1, safeRadiusFactorRaw);
+    const availableRadius = Math.max(8, Math.min(totalWidth, totalHeight) / 2 - safeAxisWidth / 2 - 6);
+    const baseRadius = clamp(availableRadius * safeRadiusFactor, 8, availableRadius);
+    const sweep = React.useMemo(() => toSweep(startAngle, endAngle), [endAngle, startAngle]);
+    const valueToRatio = React.useCallback((raw) => {
+        const normalized = clamp((raw - safeMin) / span, 0, 1);
+        return isAxisInversed ? 1 - normalized : normalized;
+    }, [isAxisInversed, safeMin, span]);
+    const ratioToValue = React.useCallback((ratioRaw) => {
+        const ratio = clamp(ratioRaw, 0, 1);
+        const normalized = isAxisInversed ? 1 - ratio : ratio;
+        return safeMin + normalized * span;
+    }, [isAxisInversed, safeMin, span]);
+    const valueToAngle = React.useCallback((raw) => {
+        const ratio = valueToRatio(raw);
+        return startAngle + sweep * ratio;
+    }, [startAngle, sweep, valueToRatio]);
+    const angleToValue = React.useCallback((rawAngle) => {
+        const start = normalizeAngle(startAngle);
+        const target = normalizeAngle(rawAngle);
+        const distance = (target - start + 360) % 360;
+        const ratio = clamp(distance / sweep, 0, 1);
+        return ratioToValue(ratio);
+    }, [ratioToValue, startAngle, sweep]);
+    const majorCount = Math.max(1, Math.floor(majorTickCount));
+    const minorCount = Math.max(0, Math.floor(minorTicksPerInterval));
+    const pointerList = React.useMemo(() => {
+        const list = [];
+        if (showPrimaryPointer) {
+            list.push({
+                id: MAIN_POINTER_ID,
+                isPrimary: true,
+                value: currentValue,
+                pointer: {
+                    id: MAIN_POINTER_ID,
+                    type: primaryPointerType,
+                    value: currentValue,
+                    color: primaryPointerColor,
+                    width: primaryPointerWidth,
+                    size: primaryPointerSize,
+                    shape: primaryPointerShape,
+                    draggable: primaryPointerDraggable,
+                    label: primaryPointerLabel
+                }
+            });
+        }
+        for (let i = 0; i < pointers.length; i += 1) {
+            const pointer = pointers[i];
+            if (!pointer)
+                continue;
+            const id = pointerIds[i] ?? `sg-radial-pointer-${i}`;
+            const dragValue = dragPointerValues[id];
+            list.push({
+                id,
+                isPrimary: false,
+                pointer,
+                value: clamp(dragValue ?? pointer.value, safeMin, safeMax)
+            });
+        }
+        return list;
+    }, [
+        currentValue,
+        dragPointerValues,
+        pointerIds,
+        pointers,
+        primaryPointerColor,
+        primaryPointerDraggable,
+        primaryPointerLabel,
+        primaryPointerShape,
+        primaryPointerSize,
+        primaryPointerType,
+        primaryPointerWidth,
+        safeMax,
+        safeMin,
+        showPrimaryPointer
+    ]);
+    const pointerMap = React.useMemo(() => {
+        const map = new Map();
+        for (const pointer of pointerList)
+            map.set(pointer.id, pointer);
+        return map;
+    }, [pointerList]);
+    const svgRef = React.useRef(null);
+    const [draggingPointerId, setDraggingPointerId] = React.useState(null);
+    React.useEffect(() => {
+        if (!draggingPointerId)
+            return;
+        const onMove = (event) => {
+            const svg = svgRef.current;
+            const pointerMeta = pointerMap.get(draggingPointerId);
+            if (!svg || !pointerMeta)
+                return;
+            const rect = svg.getBoundingClientRect();
+            if (rect.width <= 0 || rect.height <= 0)
+                return;
+            const localX = ((event.clientX - rect.left) / rect.width) * totalWidth;
+            const localY = ((event.clientY - rect.top) / rect.height) * totalHeight;
+            const angle = normalizeAngle((Math.atan2(localY - cy, localX - cx) * 180) / Math.PI);
+            const next = clamp(angleToValue(angle), safeMin, safeMax);
+            if (pointerMeta.isPrimary) {
+                setMainValue(next);
+            }
+            else {
+                setDragPointerValues((prev) => ({
+                    ...prev,
+                    [pointerMeta.id]: next
+                }));
+                pointerMeta.pointer.onValueChange?.(next);
+                onPointerValueChange?.(pointerMeta.id, next, pointerMeta.pointer);
+            }
+        };
+        const onEnd = () => {
+            setDraggingPointerId(null);
+        };
+        window.addEventListener("pointermove", onMove);
+        window.addEventListener("pointerup", onEnd);
+        window.addEventListener("pointercancel", onEnd);
+        return () => {
+            window.removeEventListener("pointermove", onMove);
+            window.removeEventListener("pointerup", onEnd);
+            window.removeEventListener("pointercancel", onEnd);
+        };
+    }, [
+        angleToValue,
+        cx,
+        cy,
+        draggingPointerId,
+        onPointerValueChange,
+        pointerMap,
+        safeMax,
+        safeMin,
+        setMainValue,
+        totalHeight,
+        totalWidth
+    ]);
+    const majorValues = React.useMemo(() => {
+        const values = [];
+        for (let i = 0; i <= majorCount; i += 1) {
+            values.push(safeMin + (span * i) / majorCount);
+        }
+        return values;
+    }, [majorCount, safeMin, span]);
+    const animatedStyle = animate
+        ? { transition: `all ${animationDuration}ms ease-out` }
+        : {};
+    const centerNode = centerContent ?? (_jsxs("div", { className: "pointer-events-none select-none text-center", children: [_jsx("div", { className: "text-xs uppercase text-muted-foreground", children: "Value" }), _jsx("div", { className: "text-xl font-semibold text-foreground", children: Math.round(currentValue) })] }));
+    return (_jsxs("div", { className: cn("relative inline-flex select-none", className), role: "meter", "aria-label": ariaLabel, "aria-valuemin": safeMin, "aria-valuemax": safeMax, "aria-valuenow": currentValue, style: style, children: [_jsxs("svg", { ref: svgRef, width: totalWidth, height: totalHeight, viewBox: `0 0 ${totalWidth} ${totalHeight}`, children: [_jsx("path", { d: arcPath(cx, cy, baseRadius, startAngle, endAngle), fill: "none", stroke: axisColor, strokeWidth: safeAxisWidth, strokeLinecap: "round" }), ranges.map((range, index) => {
+                        const start = clamp(Math.min(range.start, range.end), safeMin, safeMax);
+                        const end = clamp(Math.max(range.start, range.end), safeMin, safeMax);
+                        const startA = valueToAngle(start);
+                        const endA = valueToAngle(end);
+                        return (_jsx("path", { d: arcPath(cx, cy, baseRadius, startA, endA), fill: "none", stroke: range.color ?? "hsl(var(--primary))", strokeWidth: range.width ?? safeAxisWidth + 2, strokeOpacity: range.opacity ?? 0.55, strokeLinecap: "round" }, `range-${index}`));
+                    }), showTicks
+                        ? majorValues.map((majorValue, index) => {
+                            const majorAngle = valueToAngle(majorValue);
+                            const pOuter = polar(cx, cy, baseRadius + safeAxisWidth / 2 + 1, majorAngle);
+                            const pInner = polar(cx, cy, baseRadius - safeAxisWidth / 2 - 10, majorAngle);
+                            const nextValue = index < majorValues.length - 1
+                                ? majorValues[index + 1] ?? majorValue
+                                : majorValue;
+                            const segment = nextValue - majorValue;
+                            return (_jsxs("g", { children: [_jsx("line", { x1: pOuter.x, y1: pOuter.y, x2: pInner.x, y2: pInner.y, stroke: "hsl(var(--muted-foreground))", strokeWidth: 1.4 }), index < majorValues.length - 1 && minorCount > 0
+                                        ? Array.from({ length: minorCount }).map((_, minorIndex) => {
+                                            const t = (minorIndex + 1) / (minorCount + 1);
+                                            const minorValue = majorValue + segment * t;
+                                            const minorAngle = valueToAngle(minorValue);
+                                            const mOuter = polar(cx, cy, baseRadius + safeAxisWidth / 2, minorAngle);
+                                            const mInner = polar(cx, cy, baseRadius - safeAxisWidth / 2 - 6, minorAngle);
+                                            return (_jsx("line", { x1: mOuter.x, y1: mOuter.y, x2: mInner.x, y2: mInner.y, stroke: "hsl(var(--muted-foreground))", strokeWidth: 1, strokeOpacity: 0.8 }, `minor-${index}-${minorIndex}`));
+                                        })
+                                        : null] }, `major-${index}`));
+                        })
+                        : null, showLabels
+                        ? majorValues.map((majorValue, index) => {
+                            const angle = valueToAngle(majorValue);
+                            const point = polar(cx, cy, baseRadius - safeAxisWidth / 2 - 22, angle);
+                            return (_jsx("text", { x: point.x, y: point.y + 3, textAnchor: "middle", className: "fill-muted-foreground text-[11px]", children: labelFormatter ? labelFormatter(majorValue) : Math.round(majorValue) }, `label-${index}`));
+                        })
+                        : null, pointerList.map((entry) => {
+                        const pointer = entry.pointer;
+                        const pointerType = pointer.type ?? "needle";
+                        const color = pointer.color ?? (entry.isPrimary ? primaryPointerColor : "hsl(var(--secondary))");
+                        const angle = valueToAngle(entry.value);
+                        const size = pointer.size ?? (pointerType === "needle" ? 10 : 12);
+                        const widthPx = pointer.width ?? (pointerType === "needle" ? 3 : safeAxisWidth);
+                        const draggable = !!pointer.draggable;
+                        const label = pointer.label !== undefined
+                            ? pointer.label
+                            : entry.isPrimary && pointerType === "needle"
+                                ? Math.round(entry.value)
+                                : null;
+                        const onPointerDown = (event) => {
+                            if (!draggable)
+                                return;
+                            event.preventDefault();
+                            setDraggingPointerId(entry.id);
+                        };
+                        if (pointerType === "range") {
+                            const endAnglePointer = valueToAngle(entry.value);
+                            return (_jsx("g", { style: animatedStyle, className: draggable ? "cursor-pointer" : "", onPointerDown: onPointerDown, children: _jsx("path", { d: arcPath(cx, cy, baseRadius, valueToAngle(safeMin), endAnglePointer), fill: "none", stroke: color, strokeWidth: widthPx, strokeLinecap: "round" }) }, entry.id));
+                        }
+                        if (pointerType === "marker") {
+                            const markerPoint = polar(cx, cy, baseRadius - safeAxisWidth / 2, angle);
+                            return (_jsx("g", { style: animatedStyle, className: draggable ? "cursor-pointer" : "", onPointerDown: onPointerDown, children: pointer.shape === "diamond" ? (_jsx("polygon", { points: `${markerPoint.x},${markerPoint.y - size / 2} ${markerPoint.x + size / 2},${markerPoint.y} ${markerPoint.x},${markerPoint.y + size / 2} ${markerPoint.x - size / 2},${markerPoint.y}`, fill: color })) : pointer.shape === "triangle" ? (_jsx("polygon", { points: `${markerPoint.x - size / 2},${markerPoint.y + size / 2} ${markerPoint.x + size / 2},${markerPoint.y + size / 2} ${markerPoint.x},${markerPoint.y - size / 2}`, fill: color })) : pointer.shape === "square" ? (_jsx("rect", { x: markerPoint.x - size / 2, y: markerPoint.y - size / 2, width: size, height: size, fill: color })) : (_jsx("circle", { cx: markerPoint.x, cy: markerPoint.y, r: size / 2, fill: color })) }, entry.id));
+                        }
+                        const tip = polar(cx, cy, baseRadius - safeAxisWidth / 2 - 4, angle);
+                        const tail = polar(cx, cy, baseRadius * 0.14, angle + 180);
+                        return (_jsxs("g", { style: animatedStyle, className: draggable ? "cursor-pointer" : "", onPointerDown: onPointerDown, children: [_jsx("line", { x1: tail.x, y1: tail.y, x2: tip.x, y2: tip.y, stroke: color, strokeWidth: widthPx, strokeLinecap: "round" }), _jsx("circle", { cx: cx, cy: cy, r: Math.max(4, size * 0.42), fill: color }), label !== null ? (_jsx("text", { x: tip.x, y: tip.y - 8, textAnchor: "middle", className: "fill-foreground text-[11px]", children: label })) : null] }, entry.id));
+                    })] }), annotations.map((annotation, index) => {
+                const angle = annotation.angle !== undefined
+                    ? annotation.angle
+                    : annotation.value !== undefined
+                        ? valueToAngle(annotation.value)
+                        : valueToAngle(currentValue);
+                const radius = baseRadius * (annotation.radiusFactor ?? 0.62);
+                const point = polar(cx, cy, radius, angle);
+                const left = `${(point.x / totalWidth) * 100}%`;
+                const top = `${(point.y / totalHeight) * 100}%`;
+                return (_jsx("div", { className: "pointer-events-none absolute", style: { left, top, transform: "translate(-50%, -50%)" }, children: annotation.content }, annotation.id ?? `annotation-${index}`));
+            }), _jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: centerNode })] }));
+}
+SgRadialGauge.displayName = "SgRadialGauge";

package/dist/gadgets/gauge/index.d.ts

@@ -0,0 +1,5 @@
+export { SgLinearGauge } from "./SgLinearGauge";
+export type { SgLinearGaugeProps, SgLinearGaugeRange, SgLinearGaugePointer, SgLinearGaugePointerShape } from "./SgLinearGauge";
+export { SgRadialGauge } from "./SgRadialGauge";
+export type { SgRadialGaugeProps, SgRadialGaugeRange, SgRadialGaugePointer, SgRadialGaugePointerType, SgRadialGaugeMarkerShape, SgRadialGaugeAnnotation } from "./SgRadialGauge";
+//# sourceMappingURL=index.d.ts.map

package/dist/gadgets/gauge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/gadgets/gauge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EACV,kBAAkB,EAClB,kBAAkB,EAClB,oBAAoB,EACpB,yBAAyB,EAC1B,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EACV,kBAAkB,EAClB,kBAAkB,EAClB,oBAAoB,EACpB,wBAAwB,EACxB,wBAAwB,EACxB,uBAAuB,EACxB,MAAM,iBAAiB,CAAC"}