50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:Tf82,import { GraphingMode } from "@/components/mirai-calculator/modes/graphing-mode" import { ScientificMode } from "@/components/mirai-calculator/modes/scientific-mode" import { StatisticsMode } from "@/components/mirai-calculator/modes/statistics-mode" import { ToolsMode } from "@/components/mirai-calculator/modes/tools-mode" import { CalculatorExtension } from "@openmirai/calculator-core/configuration" import type { CalculatorEngine, AngleMode, NumberFormatOptions, } from "@openmirai/calculator-core/engine" import type { GraphingInitialData } from "@openmirai/calculator-core/graphing-data" import type { GraphView } from "@openmirai/calculator-core/graphing-view" import type { StatisticsInitialData } from "@openmirai/calculator-core/statistics-data" import type { ToolsInitialData } from "@openmirai/calculator-core/tools" interface ModeRendererProps { resetSignal: number engine: CalculatorEngine activeAngleMode: AngleMode ans: number definitions: Array setDefinitions: (definitions: Array) => void setAns: (ans: number) => void formatOptions: NumberFormatOptions formatNumber: (value: number) => string setVariables: (variables: Record) => void graphView: GraphView setGraphView: (view: GraphView) => void graphGridVisible: boolean setGraphGridVisible: (visible: boolean) => void resolvedTheme: "light" | "dark" defaultGraphingData?: GraphingInitialData defaultStatisticsData?: StatisticsInitialData defaultToolsData?: ToolsInitialData } interface ExtensionDefinition { label: string compactLabel: string usesAngleMode: boolean hasGraphSettings: boolean render: (props: ModeRendererProps) => React.ReactNode } export const CALCULATOR_EXTENSION_DEFINITIONS: Record = { [CalculatorExtension.SCIENTIFIC]: { label: "Scientific", compactLabel: "Sci", usesAngleMode: true, hasGraphSettings: false, render: ({ resetSignal, engine, definitions, setDefinitions, setAns, formatOptions }) => ( ), }, [CalculatorExtension.GRAPHING]: { label: "Graphing", compactLabel: "Graph", usesAngleMode: true, hasGraphSettings: true, render: ({ resetSignal, activeAngleMode, ans, definitions, formatNumber, setVariables, graphView, setGraphView, graphGridVisible, setGraphGridVisible, resolvedTheme, defaultGraphingData, }) => ( ), }, [CalculatorExtension.STATISTICS]: { label: "Stats", compactLabel: "Stats", usesAngleMode: false, hasGraphSettings: false, render: ({ resetSignal, formatNumber, resolvedTheme, defaultStatisticsData }) => ( ), }, [CalculatorExtension.TOOLS]: { label: "Tools", compactLabel: "Tools", usesAngleMode: false, hasGraphSettings: false, render: ({ resetSignal, formatNumber, defaultToolsData }) => ( ), }, } 53:T431c,import { useEffect } from "react" import { createPortal } from "react-dom" import { Settings2, X } from "lucide-react" import { CALCULATOR_ANGLE_MODE_LABELS, CALCULATOR_DECIMAL_OPTIONS, CALCULATOR_GRAPH_BOUNDARY_KEYS, CALCULATOR_NOTATION_LABELS, CALCULATOR_THEME_LABELS, } from "@/components/mirai-calculator/calculator-ui-config" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" import { Switch } from "@/components/ui/switch" import type { CalculatorDisplaySettings, CalculatorTheme, } from "@openmirai/calculator-core/configuration" import type { AngleMode } from "@openmirai/calculator-core/engine" import type { GraphView } from "@openmirai/calculator-core/graphing-view" import { cn } from "@/lib/utils" interface CalculatorSettingsDialogProps { settingsOpen: boolean calculatorContainer: HTMLDivElement | null setSettingsOpen: React.Dispatch> resolvedTheme: "light" | "dark" showsAngleMode: boolean activeAngleMode: AngleMode setAngleMode: (mode: AngleMode) => void displaySettings: CalculatorDisplaySettings setDisplaySettings: React.Dispatch> showsGraphSettings: boolean graphGridVisible: boolean setGraphGridVisible: React.Dispatch> graphView: GraphView updateGraphBoundary: (key: keyof GraphView, source: string) => void activeTheme: CalculatorTheme setTheme: (theme: CalculatorTheme) => void } /** Renders calculator settings inside the calculator container rather than the host page. */ export function CalculatorSettingsDialog({ settingsOpen, calculatorContainer, setSettingsOpen, resolvedTheme, showsAngleMode, activeAngleMode, setAngleMode, displaySettings, setDisplaySettings, showsGraphSettings, graphGridVisible, setGraphGridVisible, graphView, updateGraphBoundary, activeTheme, setTheme, }: CalculatorSettingsDialogProps) { useEffect(() => { if (!settingsOpen) { return undefined } const closeOnEscape = (event: KeyboardEvent) => { if (event.key === "Escape") { setSettingsOpen(false) } } document.addEventListener("keydown", closeOnEscape) return () => document.removeEventListener("keydown", closeOnEscape) }, [settingsOpen, setSettingsOpen]) return ( <> {settingsOpen && calculatorContainer ? createPortal(

{ if (event.target === event.currentTarget) { setSettingsOpen(false) } }} >

, calculatorContainer ) : null} ) } 54:T543,import { useLayoutEffect, useRef, useState } from "react" import { createPortal } from "react-dom" /** Moves calculator content between its inline host and the fullscreen viewport layer. */ export function CalculatorViewportPortal({ fullscreen, children, }: { fullscreen: boolean children: React.ReactNode }) { const inlineContainerRef = useRef(null) const [portalHost, setPortalHost] = useState(null) useLayoutEffect(() => { const host = document.createElement("div") host.style.display = "contents" setPortalHost(host) return () => host.remove() }, []) useLayoutEffect(() => { if (!portalHost) { return } const target = fullscreen ? document.body : inlineContainerRef.current target?.append(portalHost) }, [fullscreen, portalHost]) return (

{portalHost ? createPortal( <> {fullscreen && ( ) } 55:T439,import { CALCULATOR_CHART_TOKENS } from "@/components/mirai-calculator/calculator-ui-config" /** Reads a shadcn color property with a computed foreground or background fallback. */ export function readCanvasColor(element: Element, property: string): string { const computed = getComputedStyle(element) const value = computed.getPropertyValue(property).trim() return value || (property === "--background" ? computed.backgroundColor : computed.color) } /** Resolves a CSS custom-property token to a canvas-compatible color. */ export function resolveCanvasColor(element: Element, token: string): string { const computed = getComputedStyle(element) const match = /^var$(--[^)]+)$$/.exec(token.trim()) if (!match) { return token || computed.color } return computed.getPropertyValue(match[1]).trim() || computed.color } /** Returns every configured shadcn chart color resolved for a canvas element. */ export function readCanvasChartColors(element: Element): Array { return CALCULATOR_CHART_TOKENS.map((token) => resolveCanvasColor(element, token)) } 56:T4a82,import { useCallback, useEffect, useMemo, useRef, useState } from "react" import { Calculator as CalculatorIcon, Expand, EyeOff, Minimize2, Moon, RotateCcw, Settings2, Sun, X, } from "lucide-react" import { CalculatorHeaderIconButton } from "@/components/mirai-calculator/calculator-header-icon-button" import { CALCULATOR_EXTENSION_DEFINITIONS } from "@/components/mirai-calculator/calculator-extension-definitions" import { CalculatorSettingsDialog } from "@/components/mirai-calculator/calculator-settings-dialog" import { CalculatorViewportPortal } from "@/components/mirai-calculator/calculator-viewport-portal" import { resolveCalculatorTheme, useSystemDarkMode, } from "@/components/mirai-calculator/use-system-dark-mode" import { Button, buttonVariants } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" import { CalculatorExtension, DEFAULT_DISPLAY_SETTINGS, DEFAULT_GRAPH_VIEW, EMPTY_CALCULATOR_DEFINITIONS, calculatorNumberFormatOptions, collectSliderVariables, normalizeCalculatorExtensions, } from "@openmirai/calculator-core/configuration" import type { CalculatorDisplaySettings, CalculatorMode, CalculatorTheme, } from "@openmirai/calculator-core/configuration" import { CalculatorEngine } from "@openmirai/calculator-core/engine" import type { AngleMode, NumberFormatOptions } from "@openmirai/calculator-core/engine" import type { GraphingInitialData } from "@openmirai/calculator-core/graphing-data" import type { GraphView } from "@openmirai/calculator-core/graphing-view" import type { StatisticsInitialData } from "@openmirai/calculator-core/statistics-data" import type { ToolsInitialData as ToolsInitialDataValue } from "@openmirai/calculator-core/tools" import { cn } from "@/lib/utils" export interface MiraiCalculatorProps { className?: string extensions?: ReadonlyArray mode?: CalculatorMode defaultMode?: CalculatorMode onModeChange?: (mode: CalculatorMode) => void angleMode?: AngleMode defaultAngleMode?: AngleMode onAngleModeChange?: (mode: AngleMode) => void theme?: CalculatorTheme defaultTheme?: CalculatorTheme onThemeChange?: (theme: CalculatorTheme) => void hidden?: boolean defaultHidden?: boolean onHiddenChange?: (hidden: boolean) => void startFullscreen?: boolean title?: string onClose?: () => void defaultDefinitions?: ReadonlyArray defaultGraphingData?: GraphingInitialData defaultStatisticsData?: StatisticsInitialData defaultToolsData?: ToolsInitialDataValue } /** Composes enabled calculator extensions into a configurable, container-responsive panel. */ export function MiraiCalculator({ className, extensions, mode, defaultMode = CalculatorExtension.SCIENTIFIC, onModeChange, angleMode, defaultAngleMode = "degrees", onAngleModeChange, theme, defaultTheme = "light", onThemeChange, hidden, defaultHidden = false, onHiddenChange, startFullscreen = false, title = "Calculator", onClose, defaultDefinitions = EMPTY_CALCULATOR_DEFINITIONS, defaultGraphingData, defaultStatisticsData, defaultToolsData, }: MiraiCalculatorProps) { const [internalMode, setInternalMode] = useState(defaultMode) const [internalAngleMode, setInternalAngleMode] = useState(defaultAngleMode) const [internalTheme, setInternalTheme] = useState(defaultTheme) const [internalHidden, setInternalHidden] = useState(defaultHidden) const systemDark = useSystemDarkMode() const [fullscreen, setFullscreen] = useState(startFullscreen) const [settingsOpen, setSettingsOpen] = useState(false) const [displaySettings, setDisplaySettings] = useState(() => ({ ...DEFAULT_DISPLAY_SETTINGS, })) const [graphView, setGraphView] = useState(() => ({ ...DEFAULT_GRAPH_VIEW })) const [graphGridVisible, setGraphGridVisible] = useState(true) const [definitions, setDefinitions] = useState(() => [...defaultDefinitions]) const [variables, setVariables] = useState>(() => collectSliderVariables( (defaultGraphingData?.expressions ?? []).map((expression) => ({ expression: expression.value, value: expression.slider?.value, })) ) ) const [ans, setAns] = useState(0) const [resetSignal, setResetSignal] = useState(0) const calculatorRef = useRef(null) const enabledExtensions = useMemo(() => normalizeCalculatorExtensions(extensions), [extensions]) const requestedMode = mode ?? internalMode const activeMode = enabledExtensions.includes(requestedMode) ? requestedMode : enabledExtensions[0] const activeAngleMode = angleMode ?? internalAngleMode const activeTheme = theme ?? internalTheme const activeHidden = hidden ?? internalHidden const resolvedTheme = resolveCalculatorTheme(activeTheme, systemDark) const showsAngleMode = enabledExtensions.some( (extension) => CALCULATOR_EXTENSION_DEFINITIONS[extension].usesAngleMode ) const showsGraphSettings = enabledExtensions.some( (extension) => CALCULATOR_EXTENSION_DEFINITIONS[extension].hasGraphSettings ) useEffect(() => { if (!fullscreen) { return } const previousOverflow = document.documentElement.style.overflow document.documentElement.style.overflow = "hidden" return () => { document.documentElement.style.overflow = previousOverflow } }, [fullscreen]) const setMode = (nextMode: CalculatorMode) => { if (mode === undefined) { setInternalMode(nextMode) } onModeChange?.(nextMode) } const setAngleMode = (nextMode: AngleMode) => { if (angleMode === undefined) { setInternalAngleMode(nextMode) } onAngleModeChange?.(nextMode) } const setTheme = (nextTheme: CalculatorTheme) => { if (theme === undefined) { setInternalTheme(nextTheme) } onThemeChange?.(nextTheme) } const setHidden = (nextHidden: boolean) => { if (hidden === undefined) { setInternalHidden(nextHidden) } onHiddenChange?.(nextHidden) if (nextHidden) { setFullscreen(false) setSettingsOpen(false) } } const formatOptions = useMemo( () => calculatorNumberFormatOptions(displaySettings), [displaySettings] ) const engine = useMemo( () => new CalculatorEngine({ angleMode: activeAngleMode, ans, definitions, variables, }), [activeAngleMode, ans, definitions, variables] ) const formatNumber = useCallback( (value: number) => engine.format(value, formatOptions), [engine, formatOptions] ) const reset = () => { setDisplaySettings({ ...DEFAULT_DISPLAY_SETTINGS }) setGraphView({ ...DEFAULT_GRAPH_VIEW }) setGraphGridVisible(true) setDefinitions([...defaultDefinitions]) setVariables({}) setAns(0) setResetSignal((signal) => signal + 1) } const updateGraphBoundary = (key: keyof GraphView, source: string) => { const value = Number(source) if (!Number.isFinite(value)) { return } setGraphView((current) => { const next = { ...current, [key]: value } if (next.xmin >= next.xmax || next.ymin >= next.ymax) { return current } return next }) } return (

{activeHidden && ( setHidden(false)} className={cn( buttonVariants({ variant: "default", size: "icon" }), "mirai-calculator size-12 rounded-xl shadow-xl", resolvedTheme )} data-calculator-hidden-launcher="" data-theme={resolvedTheme} > Show calculator )}

{title} {Array.from({ length: 6 }, (_, index) => ( ))} {enabledExtensions.length === 1 && ( {CALCULATOR_EXTENSION_DEFINITIONS[enabledExtensions[0]].label} )} {enabledExtensions.length > 1 && ( <>

{enabledExtensions.map((extension) => ( ))}

)}

setTheme(resolvedTheme === "dark" ? "light" : "dark")} portalTheme={resolvedTheme} > {resolvedTheme === "dark" ? : } setHidden(true)} portalTheme={resolvedTheme} > setFullscreen((value) => !value)} portalTheme={resolvedTheme} > {fullscreen ? : } {onClose && ( )}

{activeMode ? ( CALCULATOR_EXTENSION_DEFINITIONS[activeMode].render({ resetSignal, engine, activeAngleMode, ans, definitions, setDefinitions, setAns, formatOptions, formatNumber, setVariables, graphView, setGraphView, graphGridVisible, setGraphGridVisible, resolvedTheme, defaultGraphingData, defaultStatisticsData, defaultToolsData, }) ) : (

No calculator extensions enabled

)}

) } 57:T1bb4,import { Grid3X3, Home, LocateFixed, X, ZoomIn, ZoomOut } from "lucide-react" import { CALCULATOR_CHART_TOKENS } from "@/components/mirai-calculator/calculator-ui-config" import type { GraphMarkCluster, GraphTrace, } from "@/components/mirai-calculator/modes/graphing-state" import { Button } from "@/components/ui/button" import { Separator } from "@/components/ui/separator" import { DEFAULT_GRAPH_VIEW } from "@openmirai/calculator-core/configuration" import type { GraphView } from "@openmirai/calculator-core/graphing-view" import { cn } from "@/lib/utils" interface GraphTracePosition { x: number y: number labelOnLeft: boolean labelBelow: boolean } interface GraphingCanvasViewportProps { graphHostRef: React.RefObject canvasRef: React.RefObject trace: GraphTrace | null tracePosition: GraphTracePosition | null handlePointerDown: React.PointerEventHandler handlePointerMove: React.PointerEventHandler handlePointerUp: React.PointerEventHandler formatNumber: (value: number) => string zoom: (factor: number) => void setView: (view: GraphView) => void gridVisible: boolean onGridVisibleChange: (visible: boolean) => void analysisOpen: boolean setAnalysisOpen: (open: boolean) => void marks: Array setTrace: (trace: GraphTrace | null) => void } /** Renders the interactive graph canvas, controls, trace label, and analysis overlay. */ export function GraphingCanvasViewport({ graphHostRef, canvasRef, trace, tracePosition, handlePointerDown, handlePointerMove, handlePointerUp, formatNumber, zoom, setView, gridVisible, onGridVisibleChange, analysisOpen, setAnalysisOpen, marks, setTrace, }: GraphingCanvasViewportProps) { return (

{analysisOpen ? (

Analysis

{trace && ( )}

{trace && ( <>

({formatNumber(trace.x)}, {formatNumber(trace.y)})

)}

{marks.slice(0, 12).map((mark, index) => ( ))} {marks.length === 0 && !trace && (

Touch a curve to trace and drag it. Zeros, extrema, and intersections appear here.

)}

) : ( )}

) } 58:T3e5a,import { Play, Plus, Square, X } from "lucide-react" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { ScrollArea } from "@/components/ui/scroll-area" import { CalculatorEmptyStateAction } from "@/components/mirai-calculator/calculator-empty-state-action" import type { GraphExpressionRow, GraphTableColumn, GraphTableRow, TableGraphPoint, } from "@/components/mirai-calculator/modes/graphing-state" import type { CompiledGraphExpression } from "@openmirai/calculator-core/graphing" import type { RegressionResult } from "@openmirai/calculator-core/statistics" import { cn } from "@/lib/utils" interface GraphingSidebarProps { compiled: Array<{ row: GraphExpressionRow; expression: CompiledGraphExpression }> rows: Array tableColumns: Array table: Array tableMinimumWidth: number tableSeries: Array<{ column: GraphTableColumn & { color: string } points: Array regression: RegressionResult }> formatNumber: (value: number) => string updateRow: (id: number, patch: Partial) => void commitRows: React.Dispatch>> addTableVariable: () => void addTableRow: () => void setTable: React.Dispatch>> setTableColumns: React.Dispatch>> removeTableVariable: (columnId: number) => void updateCell: (rowId: number, columnId: number, value: string) => void addExpression: () => void } function describeGraphExpression( expression: CompiledGraphExpression, formatNumber: (value: number) => string ): string { switch (expression.kind) { case "invalid": return expression.message case "explicit": return "Plotted" case "implicit": return "Implicit relation" case "points": return `${expression.points.length} plotted points` case "variable": return `${expression.name} = ${formatNumber(expression.value)}` } } /** Renders graph expressions, editable table data, and regression summaries. */ export function GraphingSidebar({ compiled, rows, tableColumns, table, tableMinimumWidth, tableSeries, formatNumber, updateRow, commitRows, addTableVariable, addTableRow, setTable, setTableColumns, removeTableVariable, updateCell, addExpression, }: GraphingSidebarProps) { return (

{compiled.map(({ row, expression }) => { const slider = row.slider return (

updateRow(row.id, { text: event.target.value })} aria-label={`Graph expression ${row.id}`} placeholder="y = 2x + 5" className="h-7 min-w-0 rounded-none border-0 border-b border-transparent bg-transparent px-0 font-mono text-base font-medium shadow-none focus-visible:border-primary focus-visible:ring-0 dark:bg-transparent" />

{describeGraphExpression(expression, formatNumber)}

{slider && (

{slider.min} updateRow(row.id, { slider: { ...slider, value: Number(event.target.value), }, }) } aria-label={`Slider for expression ${row.id}`} className="h-5 flex-1 border-0 p-0 shadow-none" /> {slider.max}

)}

) })} {rows.length === 0 && (

No expressions yet

one to start graphing.

)}

Table 1

{tableColumns.map((column) => ( ))} {tableColumns.map((column) => ( ))} {table.map((row, rowIndex) => ( {tableColumns.map((column) => ( ))} ))} {table.length === 0 && ( )}

#	{column.color && ( )} setTableColumns((current) => current.map((item) => item.id === column.id ? { ...item, label: event.target.value } : item ) ) } aria-label={`Table variable ${column.label}`} className="h-8 w-full min-w-0 rounded-none border-0 bg-transparent px-2 font-mono text-sm font-semibold shadow-none focus-visible:ring-0 dark:bg-transparent" /> {column.role === "y" && ( )}	Row actions
{rowIndex + 1}	updateCell(row.id, column.id, event.target.value)} aria-label={`${column.label} row ${rowIndex + 1}`} className="h-8 w-full min-w-0 rounded-none border-0 bg-transparent px-2 font-mono text-sm shadow-none focus-visible:ring-1 dark:bg-transparent" />
a row to plot table data.

Regression

{tableSeries.map(({ column, regression }) => (

{column.label} ~ m{tableColumns[0]?.label ?? "x"} + b

{[ ["m", regression.params[1]?.value], ["b", regression.params[0]?.value], ["R²", regression.r2], ].map(([label, value]) => (

{label}

{typeof value === "number" && Number.isFinite(value) ? formatNumber(value) : "—"}

))}

))} {tableSeries.length === 0 && (

a y variable to fit data.

)}

) } 59:Teb6,import { CALCULATOR_CHART_TOKENS } from "@/components/mirai-calculator/calculator-ui-config" import type { GraphingInitialData } from "@openmirai/calculator-core/graphing-data" import type { GraphPoint } from "@openmirai/calculator-core/graphing-view" /** Editable graph expression state owned by the graphing interface. */ export interface GraphExpressionRow { id: number text: string color: string visible: boolean slider?: { min: number max: number step: number value: number playing: boolean } } /** Editable table row keyed by graph table column identifiers. */ export interface GraphTableRow { id: number values: Record } /** Editable graph table column. */ export interface GraphTableColumn { id: number label: string color?: string role: "x" | "y" } /** Clustered graph-analysis point with presentation metadata. */ export interface GraphMarkCluster extends GraphPoint { labels: Array colors: Array count: number } /** Plottable table point connected to its editable source cells. */ export interface TableGraphPoint extends GraphPoint { rowId: number columnId: number color: string } /** Active trace point and its optional editable source. */ export interface GraphTrace extends GraphPoint { color: string source?: | { kind: "expression"; rowId: number } | { kind: "table"; rowId: number; columnId: number } } /** Maximum pointer distance in viewport pixels for selecting a graph point. */ export const GRAPH_POINT_HIT_RADIUS = 14 /** Maximum number of implicit-render cache entries retained by the graph canvas. */ export const IMPLICIT_CACHE_LIMIT = 24 /** Fixed graph-table index column width in pixels for canvas-independent table sizing. */ export const TABLE_INDEX_COLUMN_WIDTH = 36 /** Fixed editable graph-table value column width. */ export const TABLE_VALUE_COLUMN_WIDTH = 112 /** Fixed graph-table row-action column width. */ export const TABLE_ACTION_COLUMN_WIDTH = 32 /** Converts consumer graphing defaults into editable expression rows. */ export function createInitialGraphExpressionRows( data: GraphingInitialData | undefined ): Array { return (data?.expressions ?? []).map((expression, index) => ({ id: index + 1, text: expression.value, color: expression.color ?? CALCULATOR_CHART_TOKENS[index % CALCULATOR_CHART_TOKENS.length], visible: expression.visible ?? true, slider: expression.slider ? { ...expression.slider, playing: expression.slider.playing ?? false } : undefined, })) } /** Converts consumer graphing defaults into editable multi-variable table state. */ export function createInitialGraphTableState(data: GraphingInitialData | undefined): { columns: Array rows: Array } { const table = data?.table const series = table?.series?.length ? table.series : [{ label: "y₁", color: CALCULATOR_CHART_TOKENS[2], values: [] }] const columns: Array = [ { id: 1, label: table?.xLabel ?? "x₁", role: "x" }, ...series.map((item, index) => ({ id: index + 2, label: item.label ?? `y${String(index + 1)}`, color: item.color ?? CALCULATOR_CHART_TOKENS[(index + 2) % CALCULATOR_CHART_TOKENS.length], role: "y" as const, })), ] const rowCount = Math.max( table?.xValues?.length ?? 0, ...series.map((item) => item.values.length) ) const rows = Array.from({ length: rowCount }, (_, rowIndex) => ({ id: rowIndex + 1, values: Object.fromEntries([ [1, String(table?.xValues?.[rowIndex] ?? "")], ...series.map((item, seriesIndex) => [seriesIndex + 2, String(item.values[rowIndex] ?? "")]), ]), })) return { columns, rows } } 5a:T70e6,import { useEffect, useCallback, useMemo, useRef, useState } from "react" import { readCanvasColor, resolveCanvasColor } from "@/components/mirai-calculator/canvas-theme" import { CALCULATOR_CHART_TOKENS } from "@/components/mirai-calculator/calculator-ui-config" import { GraphingCanvasViewport } from "@/components/mirai-calculator/modes/graphing-canvas-viewport" import { GraphingSidebar } from "@/components/mirai-calculator/modes/graphing-sidebar" import { GRAPH_POINT_HIT_RADIUS, IMPLICIT_CACHE_LIMIT, TABLE_ACTION_COLUMN_WIDTH, TABLE_INDEX_COLUMN_WIDTH, TABLE_VALUE_COLUMN_WIDTH, createInitialGraphExpressionRows, createInitialGraphTableState, } from "@/components/mirai-calculator/modes/graphing-state" import type { GraphExpressionRow, GraphMarkCluster, GraphTableColumn, GraphTableRow, GraphTrace, TableGraphPoint, } from "@/components/mirai-calculator/modes/graphing-state" import { collectSliderVariables } from "@openmirai/calculator-core/configuration" import { CalculatorEngine } from "@openmirai/calculator-core/engine" import type { AngleMode } from "@openmirai/calculator-core/engine" import { clusterGraphPoints, compileGraphExpression, findExtrema, findIntersections, findRoots, graphGridStep, sampleExplicitGraphSegments, sampleImplicitContourSegments, } from "@openmirai/calculator-core/graphing" import type { CompiledGraphExpression } from "@openmirai/calculator-core/graphing" import type { GraphingInitialData } from "@openmirai/calculator-core/graphing-data" import { fitGraphViewToAspect, graphPointToViewport, panGraphView, projectPointToGraphSegments, viewportPointToGraph, zoomGraphView, } from "@openmirai/calculator-core/graphing-view" import type { GraphPoint, GraphSegment, GraphView } from "@openmirai/calculator-core/graphing-view" import { fitRegression } from "@openmirai/calculator-core/statistics" type ExplicitYExpression = Extract & { axis: "y" } export interface GraphingModeProps { angleMode: AngleMode ans: number definitions: Array formatNumber: (value: number) => string onVariablesChange: (variables: Record) => void view: GraphView onViewChange: (view: GraphView) => void gridVisible: boolean onGridVisibleChange: (visible: boolean) => void colorScheme?: "light" | "dark" defaultData?: GraphingInitialData } /** Renders the interactive graph workspace with expressions, tables, tracing, and analysis. */ export function GraphingMode({ angleMode, ans, definitions, formatNumber: formatValue, onVariablesChange, view, onViewChange, gridVisible, onGridVisibleChange, colorScheme = "light", defaultData, }: GraphingModeProps) { const [initialTable] = useState(() => createInitialGraphTableState(defaultData)) const [rows, setRows] = useState>(() => createInitialGraphExpressionRows(defaultData) ) const rowsRef = useRef(rows) const [tableColumns, setTableColumns] = useState>(initialTable.columns) const [table, setTable] = useState>(initialTable.rows) const tableMinimumWidth = TABLE_INDEX_COLUMN_WIDTH + tableColumns.length * TABLE_VALUE_COLUMN_WIDTH + TABLE_ACTION_COLUMN_WIDTH const [trace, setTrace] = useState(null) const [analysisOpen, setAnalysisOpen] = useState(false) const [interacting, setInteracting] = useState(false) const [graphSize, setGraphSize] = useState({ width: 0, height: 0 }) const nextRowId = useRef(rows.length + 1) const nextTableRowId = useRef(table.length + 1) const nextTableColumnId = useRef(tableColumns.length + 1) const canvasRef = useRef(null) const graphHostRef = useRef(null) const [renderedSegmentsByRow] = useState(() => new Map>()) const [implicitCache] = useState( () => new Map< number, { residual: (x: number, y: number) => number key: string segments: ReturnType } >() ) const interactionTimerRef = useRef(null) const dragRef = useRef< | { kind: "view" pointerId: number startX: number startY: number view: GraphView renderedView: GraphView moved: boolean } | { kind: "trace"; pointerId: number; rowId: number; color: string } | { kind: "table"; pointerId: number; rowId: number; columnId: number; color: string } | null >(null) const formatNumber = useCallback( (value: number) => formatValue(Number.isFinite(value) ? Number(value.toPrecision(7)) : value), [formatValue] ) const commitRows = useCallback( ( update: | Array | ((current: Array) => Array) ) => { const nextRows = typeof update === "function" ? update(rowsRef.current) : update rowsRef.current = nextRows setRows(nextRows) onVariablesChange( collectSliderVariables( nextRows.map((row) => ({ expression: row.text, value: row.slider?.value })) ) ) }, [onVariablesChange] ) const tracePosition = useMemo(() => { if (!trace || graphSize.width <= 0 || graphSize.height <= 0) { return null } const renderedView = fitGraphViewToAspect(view, graphSize.width, graphSize.height) const point = graphPointToViewport(trace, renderedView, graphSize.width, graphSize.height) if (!point) { return null } return { ...point, labelOnLeft: trace.x > (renderedView.xmin + renderedView.xmax) / 2, labelBelow: trace.y > renderedView.ymax - (renderedView.ymax - renderedView.ymin) * 0.12, } }, [graphSize.height, graphSize.width, trace, view]) const setView = useCallback( (next: GraphView | ((current: GraphView) => GraphView)) => { onViewChange(typeof next === "function" ? next(view) : next) }, [onViewChange, view] ) const variables = useMemo( () => collectSliderVariables( rows.map((row) => ({ expression: row.text, value: row.slider?.value })) ), [rows] ) const engine = useMemo( () => new CalculatorEngine({ angleMode, ans, definitions, variables, }), [angleMode, ans, definitions, variables] ) const compiled = useMemo( () => rows.map((row) => ({ row, expression: compileGraphExpression(row.text, engine), })), [engine, rows] ) const tableSeries = useMemo(() => { const xColumn = tableColumns.find((column) => column.role === "x") if (!xColumn) { return [] } return tableColumns .filter( (column): column is GraphTableColumn & { color: string } => column.role === "y" && !!column.color ) .map((column) => { const points = table.flatMap((row) => { const x = Number(row.values[xColumn.id]) const y = Number(row.values[column.id]) return Number.isFinite(x) && Number.isFinite(y) ? [{ x, y, rowId: row.id, columnId: column.id, color: column.color }] : [] }) return { column, points, regression: fitRegression( points.map((point) => point.x), points.map((point) => point.y), "linear" ), } }) }, [table, tableColumns]) const tablePoints = useMemo(() => tableSeries.flatMap((series) => series.points), [tableSeries]) const marks = useMemo>(() => { if (!analysisOpen) { return [] } const visibleFunctions = compiled.filter( ( item ): item is { row: GraphExpressionRow expression: ExplicitYExpression } => item.row.visible && item.expression.kind === "explicit" && item.expression.axis === "y" ) const result: Array = [] for (const item of visibleFunctions) { try { for (const x of findRoots(item.expression.evaluate, view.xmin, view.xmax)) { result.push({ x, y: 0, label: "zero", color: item.row.color }) } for (const point of findExtrema(item.expression.evaluate, view.xmin, view.xmax)) { result.push({ x: point.x, y: point.y, label: point.kind, color: item.row.color, }) } } catch { // A partially defined function is still allowed to render where possible. } } for (let left = 0; left < visibleFunctions.length; left += 1) { for (let right = left + 1; right < visibleFunctions.length; right += 1) { try { for (const point of findIntersections( visibleFunctions[left].expression.evaluate, visibleFunctions[right].expression.evaluate, view.xmin, view.xmax )) { result.push({ ...point, label: "intersection", color: CALCULATOR_CHART_TOKENS[4], }) } } catch { // Ignore an invalid pair while keeping the remaining graph usable. } } } const tolerance = Math.max(view.xmax - view.xmin, view.ymax - view.ymin) * 1e-6 return clusterGraphPoints(result.slice(0, 50), tolerance).map(({ point, indexes }) => ({ ...point, labels: [...new Set(indexes.map((index) => result[index].label))], colors: [...new Set(indexes.map((index) => result[index].color))], count: indexes.length, })) }, [analysisOpen, compiled, view.xmax, view.xmin, view.ymax, view.ymin]) useEffect(() => { const canvas = canvasRef.current const host = graphHostRef.current if (!canvas || !host) { return } const draw = () => { const bounds = host.getBoundingClientRect() const width = Math.max(1, Math.floor(bounds.width)) const height = Math.max(1, Math.floor(bounds.height)) setGraphSize((current) => current.width === width && current.height === height ? current : { width, height } ) const ratio = Math.min(window.devicePixelRatio || 1, 2) canvas.width = width * ratio canvas.height = height * ratio canvas.style.width = `${width}px` canvas.style.height = `${height}px` const context = canvas.getContext("2d") if (!context) { return } context.setTransform(ratio, 0, 0, ratio, 0, 0) const background = readCanvasColor(canvas, "--background") const border = readCanvasColor(canvas, "--border") const muted = readCanvasColor(canvas, "--muted-foreground") const renderedView = fitGraphViewToAspect(view, width, height) const xToCanvas = (x: number) => ((x - renderedView.xmin) / (renderedView.xmax - renderedView.xmin)) * width const yToCanvas = (y: number) => height - ((y - renderedView.ymin) / (renderedView.ymax - renderedView.ymin)) * height const renderedSegments = new Map>() context.clearRect(0, 0, width, height) context.fillStyle = background context.fillRect(0, 0, width, height) if (gridVisible) { const xStep = graphGridStep(renderedView.xmax - renderedView.xmin) const yStep = graphGridStep(renderedView.ymax - renderedView.ymin) context.strokeStyle = border context.lineWidth = 1 context.font = "10px system-ui, -apple-system, sans-serif" context.fillStyle = muted for ( let x = Math.ceil(renderedView.xmin / xStep) * xStep; x <= renderedView.xmax; x += xStep ) { const pixel = xToCanvas(x) context.beginPath() context.moveTo(pixel, 0) context.lineTo(pixel, height) context.stroke() if (Math.abs(x) > 1e-10) { context.fillText(formatNumber(x), pixel + 4, yToCanvas(0) + 12) } } for ( let y = Math.ceil(renderedView.ymin / yStep) * yStep; y <= renderedView.ymax; y += yStep ) { const pixel = yToCanvas(y) context.beginPath() context.moveTo(0, pixel) context.lineTo(width, pixel) context.stroke() if (Math.abs(y) > 1e-10) { context.fillText(formatNumber(y), xToCanvas(0) + 5, pixel - 4) } } } context.strokeStyle = muted context.lineWidth = 1.3 if (renderedView.ymin <= 0 && renderedView.ymax >= 0) { context.beginPath() context.moveTo(0, yToCanvas(0)) context.lineTo(width, yToCanvas(0)) context.stroke() } if (renderedView.xmin <= 0 && renderedView.xmax >= 0) { context.beginPath() context.moveTo(xToCanvas(0), 0) context.lineTo(xToCanvas(0), height) context.stroke() } for (const { row, expression } of compiled) { if (!row.visible || expression.kind === "invalid") { continue } const rowColor = resolveCanvasColor(canvas, row.color) context.strokeStyle = rowColor context.fillStyle = rowColor context.lineWidth = 2.2 context.lineCap = "round" context.lineJoin = "round" if (expression.kind === "explicit") { const segments = sampleExplicitGraphSegments( expression.evaluate, expression.axis, renderedView, width, height ) context.beginPath() for (const segment of segments) { const { from, to } = segment context.moveTo(xToCanvas(from.x), yToCanvas(from.y)) context.lineTo(xToCanvas(to.x), yToCanvas(to.y)) } context.stroke() renderedSegments.set(row.id, segments) } else if (expression.kind === "points") { for (const point of expression.points) { context.beginPath() context.arc(xToCanvas(point.x), yToCanvas(point.y), 4.5, 0, Math.PI * 2) context.fill() } } else if (expression.kind === "implicit") { const columns = interacting ? Math.max(36, Math.min(72, Math.ceil(width / 14))) : Math.max(48, Math.min(120, Math.ceil(width / 9))) const rowsCount = interacting ? Math.max(32, Math.min(56, Math.ceil(height / 14))) : Math.max(40, Math.min(96, Math.ceil(height / 9))) const cacheKey = [ renderedView.xmin, renderedView.xmax, renderedView.ymin, renderedView.ymax, columns, rowsCount, ].join(":") const cached = implicitCache.get(row.id) const segments = cached?.residual === expression.residual && cached.key === cacheKey ? cached.segments : sampleImplicitContourSegments(expression.residual, renderedView, columns, rowsCount) if (segments !== cached?.segments) { implicitCache.set(row.id, { residual: expression.residual, key: cacheKey, segments, }) if (implicitCache.size > IMPLICIT_CACHE_LIMIT) { const oldestRowId = implicitCache.keys().next().value if (typeof oldestRowId === "number") { implicitCache.delete(oldestRowId) } } } const isolatedPoints: Array = [] context.beginPath() for (const segment of segments) { const fromX = xToCanvas(segment.from.x) const fromY = yToCanvas(segment.from.y) const toX = xToCanvas(segment.to.x) const toY = yToCanvas(segment.to.y) if (segment.from.x === segment.to.x && segment.from.y === segment.to.y) { isolatedPoints.push({ x: fromX, y: fromY }) continue } context.moveTo(fromX, fromY) context.lineTo(toX, toY) } context.stroke() for (const point of isolatedPoints) { context.beginPath() context.arc(point.x, point.y, 2.2, 0, Math.PI * 2) context.fill() } renderedSegments.set(row.id, segments) } } renderedSegmentsByRow.clear() for (const [rowId, segments] of renderedSegments) { renderedSegmentsByRow.set(rowId, segments) } for (const point of tablePoints) { context.fillStyle = resolveCanvasColor(canvas, point.color) context.beginPath() context.arc(xToCanvas(point.x), yToCanvas(point.y), 4.5, 0, Math.PI * 2) context.fill() } for (const mark of marks) { context.fillStyle = background context.strokeStyle = resolveCanvasColor( canvas, mark.colors.at(-1) ?? CALCULATOR_CHART_TOKENS[4] ) context.lineWidth = 2 context.beginPath() context.arc(xToCanvas(mark.x), yToCanvas(mark.y), 5, 0, Math.PI * 2) context.fill() context.stroke() } } let frame = window.requestAnimationFrame(draw) const scheduleDraw = () => { window.cancelAnimationFrame(frame) frame = window.requestAnimationFrame(draw) } const observer = new ResizeObserver(scheduleDraw) observer.observe(host) return () => { window.cancelAnimationFrame(frame) observer.disconnect() } }, [ colorScheme, compiled, formatNumber, gridVisible, implicitCache, interacting, marks, renderedSegmentsByRow, tablePoints, view, ]) const hasPlayingSliders = rows.some((row) => row.slider?.playing) useEffect(() => { if (!hasPlayingSliders) { return } const timer = window.setInterval(() => { commitRows((currentRows) => currentRows.map((current) => { if (!current.slider?.playing) { return current } const next = current.slider.value + current.slider.step return { ...current, slider: { ...current.slider, value: next > current.slider.max ? current.slider.min : next, }, } }) ) }, 100) return () => window.clearInterval(timer) }, [commitRows, hasPlayingSliders]) const zoom = useCallback( (factor: number) => { setView((current) => zoomGraphView(current, factor)) }, [setView] ) useEffect(() => { const canvas = canvasRef.current if (!canvas) { return } const handleWheel = (event: WheelEvent) => { event.preventDefault() event.stopPropagation() setInteracting(true) if (interactionTimerRef.current !== null) { window.clearTimeout(interactionTimerRef.current) } interactionTimerRef.current = window.setTimeout(() => { setInteracting(false) interactionTimerRef.current = null }, 140) zoom(event.deltaY > 0 ? 1.12 : 1 / 1.12) } canvas.addEventListener("wheel", handleWheel, { passive: false }) return () => { canvas.removeEventListener("wheel", handleWheel) if (interactionTimerRef.current !== null) { window.clearTimeout(interactionTimerRef.current) } } }, [zoom]) const graphCoordinates = (clientX: number, clientY: number): GraphPoint => { const canvas = canvasRef.current if (!canvas) { return { x: view.xmin, y: view.ymax } } const bounds = canvas.getBoundingClientRect() const renderedView = fitGraphViewToAspect(view, bounds.width, bounds.height) return ( viewportPointToGraph( { x: clientX - bounds.left, y: clientY - bounds.top }, renderedView, bounds.width, bounds.height ) ?? { x: renderedView.xmin, y: renderedView.ymax } ) } const handlePointerDown = (event: React.PointerEvent) => { event.currentTarget.setPointerCapture(event.pointerId) const bounds = event.currentTarget.getBoundingClientRect() const measuredSize = { width: Math.max(1, Math.floor(bounds.width)), height: Math.max(1, Math.floor(bounds.height)), } setGraphSize((current) => current.width === measuredSize.width && current.height === measuredSize.height ? current : measuredSize ) const renderedView = fitGraphViewToAspect(view, bounds.width, bounds.height) const graphPoint = graphCoordinates(event.clientX, event.clientY) const pointerX = event.clientX - bounds.left const pointerY = event.clientY - bounds.top const tablePoint = [...tablePoints].reverse().find((point) => { const viewportPoint = graphPointToViewport(point, renderedView, bounds.width, bounds.height) return ( viewportPoint !== null && Math.hypot(viewportPoint.x - pointerX, viewportPoint.y - pointerY) <= GRAPH_POINT_HIT_RADIUS ) }) if (tablePoint) { setTrace({ ...tablePoint, source: { kind: "table", rowId: tablePoint.rowId, columnId: tablePoint.columnId }, }) dragRef.current = { kind: "table", pointerId: event.pointerId, rowId: tablePoint.rowId, columnId: tablePoint.columnId, color: tablePoint.color, } setInteracting(true) return } let closestCurve: { row: GraphExpressionRow; point: GraphPoint } | null = null let closestDistance = GRAPH_POINT_HIT_RADIUS + 1 for (const item of compiled) { const { expression, row } = item if (!row.visible || (expression.kind !== "explicit" && expression.kind !== "implicit")) { continue } const renderedSegments = renderedSegmentsByRow.get(row.id) const fallbackSegments = expression.kind === "explicit" ? sampleExplicitGraphSegments( expression.evaluate, expression.axis, renderedView, bounds.width, bounds.height ) : [] if (!renderedSegments && fallbackSegments.length > 0) { renderedSegmentsByRow.set(row.id, fallbackSegments) } const projection = projectPointToGraphSegments( renderedSegments ?? fallbackSegments, graphPoint, renderedView, bounds.width, bounds.height ) if (projection && projection.distance <= closestDistance) { closestCurve = { row, point: projection.point } closestDistance = projection.distance } } if (closestCurve) { setTrace({ ...closestCurve.point, color: closestCurve.row.color, source: { kind: "expression", rowId: closestCurve.row.id }, }) dragRef.current = { kind: "trace", pointerId: event.pointerId, rowId: closestCurve.row.id, color: closestCurve.row.color, } setInteracting(true) return } dragRef.current = { kind: "view", pointerId: event.pointerId, startX: event.clientX, startY: event.clientY, view, renderedView, moved: false, } setInteracting(true) } const handlePointerMove = (event: React.PointerEvent) => { const drag = dragRef.current const bounds = event.currentTarget.getBoundingClientRect() if (!drag || drag.pointerId !== event.pointerId) { return } event.preventDefault() const point = graphCoordinates(event.clientX, event.clientY) if (drag.kind === "trace") { const renderedView = fitGraphViewToAspect(view, bounds.width, bounds.height) const projection = projectPointToGraphSegments( renderedSegmentsByRow.get(drag.rowId) ?? [], point, renderedView, bounds.width, bounds.height ) if (projection) { setTrace({ ...projection.point, color: drag.color, source: { kind: "expression", rowId: drag.rowId }, }) } return } if (drag.kind === "table") { const xColumn = tableColumns.find((column) => column.role === "x") if (!xColumn) { return } const xValue = String(Number(point.x.toPrecision(10))) const yValue = String(Number(point.y.toPrecision(10))) setTable((current) => current.map((row) => row.id === drag.rowId ? { ...row, values: { ...row.values, [xColumn.id]: xValue, [drag.columnId]: yValue, }, } : row ) ) setTrace({ x: point.x, y: point.y, color: drag.color, source: { kind: "table", rowId: drag.rowId, columnId: drag.columnId }, }) return } const dx = event.clientX - drag.startX const dy = event.clientY - drag.startY if (Math.abs(dx) + Math.abs(dy) > 3) { drag.moved = true } setView(panGraphView(drag.view, drag.renderedView, dx, dy, bounds.width, bounds.height)) } const handlePointerUp = (event: React.PointerEvent) => { const completedDrag = dragRef.current dragRef.current = null if (completedDrag?.kind === "trace" || completedDrag?.kind === "table") { setTrace(null) } setInteracting(false) if (event.currentTarget.hasPointerCapture(event.pointerId)) { event.currentTarget.releasePointerCapture(event.pointerId) } } const updateRow = (id: number, patch: Partial) => { commitRows((current) => current.map((row) => (row.id === id ? { ...row, ...patch } : row))) } const addExpression = () => { const id = nextRowId.current nextRowId.current += 1 commitRows((current) => [ ...current, { id, text: "", color: CALCULATOR_CHART_TOKENS[(id - 1) % CALCULATOR_CHART_TOKENS.length], visible: true, }, ]) } const updateCell = (rowId: number, columnId: number, value: string) => { setTable((current) => current.map((row) => row.id === rowId ? { ...row, values: { ...row.values, [columnId]: value } } : row ) ) } const addTableRow = () => { const id = nextTableRowId.current nextTableRowId.current += 1 setTable((current) => [ ...current, { id, values: Object.fromEntries(tableColumns.map((column) => [column.id, ""])) }, ]) } const addTableVariable = () => { const id = nextTableColumnId.current nextTableColumnId.current += 1 const variableIndex = tableColumns.filter((column) => column.role === "y").length + 1 setTableColumns((current) => [ ...current, { id, label: `y${String(variableIndex)}`, color: CALCULATOR_CHART_TOKENS[(variableIndex + 1) % CALCULATOR_CHART_TOKENS.length], role: "y", }, ]) } const removeTableVariable = (columnId: number) => { setTableColumns((current) => current.filter((column) => column.id !== columnId)) setTable((current) => current.map((row) => { const values = { ...row.values } delete values[columnId] return { ...row, values } }) ) } return (

) } 5b:T4f8,import type { ScientificKeyDefinition } from "@/components/mirai-calculator/modes/scientific-keypad-config" /** Renders structured keypad notation with the host application's mathematical font fallback. */ export function ScientificKeyLabel({ definition }: { definition: ScientificKeyDefinition }) { const notation = definition.notation if (!notation) { return definition.label } return ( {notation.kind === "fraction" && ( {notation.numerator}⁄{notation.denominator} )} {notation.kind === "root" && ( ^{{notation.index}}√{notation.radicand} )} {notation.kind === "subscript" && ( {notation.base} _{{notation.script}} )} {notation.kind === "superscript" && ( {notation.base} ^{{notation.script}} )} ) } 5c:T1252,import { ScientificKeyLabel } from "@/components/mirai-calculator/modes/scientific-key-label" import { SCIENTIFIC_KEY_SETS, getScientificKeyLabelSize, } from "@/components/mirai-calculator/modes/scientific-keypad-config" import type { ScientificKeyDefinition, ScientificKeypadTab, } from "@/components/mirai-calculator/modes/scientific-keypad-config" import { Button } from "@/components/ui/button" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { cn } from "@/lib/utils" interface ScientificKeypadProps { tab: ScientificKeypadTab onTabChange: (tab: ScientificKeypadTab) => void onPressKey: (key: ScientificKeyDefinition) => void } /** Renders the scientific keypad tabs and their calculator keys. */ export function ScientificKeypad({ tab, onTabChange, onPressKey }: ScientificKeypadProps) { return ( { switch (value) { case "basic": case "functions": case "trig": case "stats": case "variables": onTabChange(value) break } }} className="min-h-0 flex-1 gap-0" > Basic Functions Trig Stats Variables

{SCIENTIFIC_KEY_SETS[tab].map((key) => { const Icon = key.icon return ( ) })}

) } 5d:T1bf5,import { Delete } from "lucide-react" import type { LucideIcon } from "lucide-react" export interface ScientificKeyDefinition { label: string notation?: ScientificKeyNotation icon?: LucideIcon token?: string action?: "absolute" | "backspace" | "clear" | "evaluate" | "left" | "right" tone?: "default" | "operator" | "primary" ariaLabel?: string span?: 2 } type ScientificKeyNotation = | { kind: "fraction"; numerator: string; denominator: string } | { kind: "root"; index: string; radicand: string } | { kind: "subscript"; base: string; script: string } | { kind: "superscript"; base: string; script: string } const BASIC_KEYS: Array = [ { label: "(" }, { label: ")" }, { label: "%", ariaLabel: "Percent" }, { label: "÷", tone: "operator", ariaLabel: "Divide" }, { label: "Backspace", icon: Delete, action: "backspace", ariaLabel: "Backspace", }, { label: "C", action: "clear", ariaLabel: "Clear" }, { label: "7" }, { label: "8" }, { label: "9" }, { label: "×", tone: "operator", ariaLabel: "Multiply" }, { label: "x²", token: "²", notation: { kind: "superscript", base: "x", script: "2" } }, { label: "√", token: "√(" }, { label: "4" }, { label: "5" }, { label: "6" }, { label: "−", tone: "operator", ariaLabel: "Subtract" }, { label: "xʸ", token: "^", notation: { kind: "superscript", base: "x", script: "y" } }, { label: "π", token: "π" }, { label: "1" }, { label: "2" }, { label: "3" }, { label: "+", tone: "operator", ariaLabel: "Add" }, { label: "|x|", action: "absolute", ariaLabel: "Absolute value" }, { label: "e", token: "e" }, { label: "±", token: "−", ariaLabel: "Toggle sign" }, { label: "0" }, { label: "." }, { label: "a⁄b", token: "÷", ariaLabel: "Fraction", notation: { kind: "fraction", numerator: "a", denominator: "b" }, }, { label: "=", action: "evaluate", tone: "primary", ariaLabel: "Equals", span: 2, }, ] const FUNCTION_KEYS: Array = [ { label: "x²", token: "²", notation: { kind: "superscript", base: "x", script: "2" } }, { label: "x³", token: "³", notation: { kind: "superscript", base: "x", script: "3" } }, { label: "xʸ", token: "^", notation: { kind: "superscript", base: "x", script: "y" } }, { label: "√", token: "√(" }, { label: "∛", token: "∛(" }, { label: "1/x", token: "1÷(", notation: { kind: "fraction", numerator: "1", denominator: "x" }, }, { label: "|x|", action: "absolute", ariaLabel: "Absolute value" }, { label: "10ˣ", token: "10^(", notation: { kind: "superscript", base: "10", script: "x" }, }, { label: "eˣ", token: "exp(", notation: { kind: "superscript", base: "e", script: "x" } }, { label: "log", token: "log(" }, { label: "ln", token: "ln(" }, { label: "logᵦ", token: "logb(", ariaLabel: "Log base", notation: { kind: "subscript", base: "log", script: "b" }, }, { label: "n√x", token: "nthroot(", ariaLabel: "Nth root", notation: { kind: "root", index: "n", radicand: "x" }, }, { label: "x!", token: "!" }, { label: "%", token: "%" }, { label: "abs", token: "abs(" }, { label: "floor", token: "floor(" }, { label: "ceil", token: "ceil(" }, { label: "round", token: "round(" }, { label: "mod", token: "mod(" }, ] const TRIG_KEYS: Array = [ { label: "sin", token: "sin(" }, { label: "cos", token: "cos(" }, { label: "tan", token: "tan(" }, { label: "sec", token: "sec(" }, { label: "csc", token: "csc(" }, { label: "cot", token: "cot(" }, { label: "sin⁻¹", token: "asin(", notation: { kind: "superscript", base: "sin", script: "−1" }, }, { label: "cos⁻¹", token: "acos(", notation: { kind: "superscript", base: "cos", script: "−1" }, }, { label: "tan⁻¹", token: "atan(", notation: { kind: "superscript", base: "tan", script: "−1" }, }, { label: "sinh", token: "sinh(" }, { label: "cosh", token: "cosh(" }, { label: "tanh", token: "tanh(" }, { label: "π/2", token: "π÷2", notation: { kind: "fraction", numerator: "π", denominator: "2" }, }, { label: "π/3", token: "π÷3", notation: { kind: "fraction", numerator: "π", denominator: "3" }, }, { label: "π/4", token: "π÷4", notation: { kind: "fraction", numerator: "π", denominator: "4" }, }, { label: "π/6", token: "π÷6", notation: { kind: "fraction", numerator: "π", denominator: "6" }, }, { label: "deg→rad", token: "×π÷180" }, { label: "rad→deg", token: "×180÷π" }, { label: "(", token: "(" }, { label: ")", token: ")" }, ] const STATS_KEYS: Array = [ { label: "[ ]", token: "[" }, { label: ",", token: "," }, { label: "mean", token: "mean([" }, { label: "median", token: "median([" }, { label: "mode", token: "mode([" }, { label: "Σ", token: "sum([" }, { label: "min", token: "min([" }, { label: "max", token: "max([" }, { label: "range", token: "range([" }, { label: "Q₁", token: "quartile([", notation: { kind: "subscript", base: "Q", script: "1" }, }, { label: "σ", token: "stdevp([" }, { label: "s", token: "stdev([" }, { label: "variance", token: "var([" }, { label: "IQR", token: "iqr([" }, { label: "sort", token: "sort([" }, { label: "nCr", token: "ncr(" }, { label: "nPr", token: "npr(" }, { label: "gcd", token: "gcd(" }, { label: "lcm", token: "lcm(" }, { label: "corr", token: "corr([" }, ] const VARIABLE_KEYS: Array = [ { label: "a" }, { label: "b" }, { label: "c" }, { label: "d" }, { label: "x" }, { label: "y" }, { label: "n" }, { label: "r" }, { label: "t" }, { label: "Ans", token: "Ans" }, { label: "π", token: "π" }, { label: "e", token: "e" }, { label: "=", token: "=" }, { label: "<", token: "<" }, { label: ">", token: ">" }, { label: "{ }", token: "{" }, { label: ":", token: ":" }, { label: "[ ]", token: "[" }, { label: "(", token: "(" }, { label: ")", token: ")" }, ] export const SCIENTIFIC_KEY_SETS = { basic: BASIC_KEYS, functions: FUNCTION_KEYS, trig: TRIG_KEYS, stats: STATS_KEYS, variables: VARIABLE_KEYS, } /** Available scientific keypad categories. */ export type ScientificKeypadTab = keyof typeof SCIENTIFIC_KEY_SETS /** Returns a label-length bucket used to fit keypad text within compact buttons. */ export function getScientificKeyLabelSize(label: string) { const length = Array.from(label).length if (length === 1) { return "single" } if (length <= 3) { return "short" } if (length <= 5) { return "medium" } return "long" } export const SCIENTIFIC_EXAMPLES = [ { expression: "(2÷3)+(1÷6)", label: "Add fractions" }, { expression: "sin(30)", label: "sin(30°)" }, { expression: "10ncr3", label: "10 choose 3" }, { expression: "logb(2,32)", label: "log₂ 32" }, { expression: "−3^2", label: "Order of operations" }, { expression: "f(4)", label: "Use f(x)" }, ] 5e:T2a58,import { useMemo, useRef, useState } from "react" import { Redo2, Undo2 } from "lucide-react" import { ScientificKeypad } from "@/components/mirai-calculator/modes/scientific-keypad" import type { ScientificKeyDefinition, ScientificKeypadTab, } from "@/components/mirai-calculator/modes/scientific-keypad-config" import { ScientificSidebar } from "@/components/mirai-calculator/modes/scientific-sidebar" import type { ScientificHistoryEntry } from "@/components/mirai-calculator/modes/scientific-sidebar" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { completeExpression, formatExpressionInput } from "@openmirai/calculator-core/engine" import type { CalculatorEngine, NumberFormatOptions } from "@openmirai/calculator-core/engine" import { cn } from "@/lib/utils" export interface ScientificModeProps { engine: CalculatorEngine definitions: Array onDefinitionsChange: (definitions: Array) => void onAnsChange: (answer: number) => void formatOptions: NumberFormatOptions } /** Renders the scientific expression workspace and calculator keypad. */ export function ScientificMode({ engine, definitions, onDefinitionsChange, onAnsChange, formatOptions, }: ScientificModeProps) { const [expression, setExpression] = useState("") const [tab, setTab] = useState("basic") const [history, setHistory] = useState>([]) const [fractionView, setFractionView] = useState(false) const [undoStack, setUndoStack] = useState>([]) const [redoStack, setRedoStack] = useState>([]) const inputRef = useRef(null) const nextHistoryIdRef = useRef(0) const liveResult = useMemo(() => { if (!expression.trim()) { return null } try { const value = engine.evaluate(completeExpression(expression)) const fraction = fractionView && typeof value === "number" ? engine.toFraction(value) : null return { value, text: fraction ?? formatExpressionInput(engine.format(value, formatOptions)), note: fraction ? "exact fraction" : "=", error: false, } } catch (error) { return { value: undefined, text: error instanceof Error ? error.message : "Invalid expression", note: "", error: true, } } }, [engine, expression, formatOptions, fractionView]) const updateExpression = (next: string) => { setUndoStack((stack) => [expression, ...stack].slice(0, 50)) setRedoStack([]) setExpression(next) } const updateTypedExpression = (next: string, selectionStart: number, selectionEnd: number) => { const formatted = formatExpressionInput(next) const formattedStart = formatExpressionInput(next.slice(0, selectionStart)).length const formattedEnd = formatExpressionInput(next.slice(0, selectionEnd)).length updateExpression(formatted) requestAnimationFrame(() => { inputRef.current?.setSelectionRange(formattedStart, formattedEnd) }) } const insert = (token: string) => { const input = inputRef.current const start = input?.selectionStart ?? expression.length const end = input?.selectionEnd ?? start const next = expression.slice(0, start) + token + expression.slice(end) updateExpression(next) requestAnimationFrame(() => { inputRef.current?.focus() inputRef.current?.setSelectionRange(start + token.length, start + token.length) }) } const removePreviousCharacter = () => { const input = inputRef.current const start = input?.selectionStart ?? expression.length const end = input?.selectionEnd ?? start if (start === 0 && end === 0) { return } const next = start === end ? expression.slice(0, start - 1) + expression.slice(end) : expression.slice(0, start) + expression.slice(end) updateExpression(next) const cursor = start === end ? start - 1 : start requestAnimationFrame(() => inputRef.current?.setSelectionRange(cursor, cursor)) } const insertAbsoluteValue = () => { const input = inputRef.current const start = input?.selectionStart ?? expression.length const end = input?.selectionEnd ?? start const selected = expression.slice(start, end) const wrapped = `|${selected}|` const next = expression.slice(0, start) + wrapped + expression.slice(end) updateExpression(next) const cursor = selected ? start + wrapped.length : start + 1 requestAnimationFrame(() => { inputRef.current?.focus() inputRef.current?.setSelectionRange(cursor, cursor) }) } const commit = () => { if (!expression.trim()) { return } const completedExpression = completeExpression(expression) if (completedExpression !== expression) { setExpression(completedExpression) } try { const value = engine.evaluate(completedExpression) const result = formatExpressionInput(engine.format(value, formatOptions)) if (typeof value === "number") { onAnsChange(value) } nextHistoryIdRef.current += 1 const id = nextHistoryIdRef.current setHistory((entries) => { const current = entries[0] if ( current?.expression === completedExpression && current.result === result && !current.error ) { return entries } return [ { id, expression: completedExpression, result, value: typeof value === "number" ? value : undefined, }, ...entries, ].slice(0, 40) }) } catch (error) { const result = error instanceof Error ? error.message : "Invalid expression" nextHistoryIdRef.current += 1 const id = nextHistoryIdRef.current setHistory((entries) => { const current = entries[0] if ( current?.expression === completedExpression && current.result === result && current.error ) { return entries } return [ { id, expression: completedExpression, result, error: true, }, ...entries, ].slice(0, 40) }) } } const pressKey = (key: ScientificKeyDefinition) => { if (key.action === "absolute") { return insertAbsoluteValue() } if (key.action === "backspace") { return removePreviousCharacter() } if (key.action === "clear") { return updateExpression("") } if (key.action === "evaluate") { return commit() } insert(key.token ?? key.label) } const undo = () => { const previous = undoStack[0] if (previous === undefined) { return } setRedoStack((stack) => [expression, ...stack]) setUndoStack((stack) => stack.slice(1)) setExpression(previous) } const redo = () => { const next = redoStack[0] if (next === undefined) { return } setUndoStack((stack) => [expression, ...stack]) setRedoStack((stack) => stack.slice(1)) setExpression(next) } return (

Calculator expression updateTypedExpression( event.target.value, event.target.selectionStart ?? event.target.value.length, event.target.selectionEnd ?? event.target.value.length ) } onKeyDown={(event) => { if (event.key === "Enter") { event.preventDefault() commit() } }} placeholder="Type or tap to start" autoComplete="off" spellCheck={false} className="h-auto border-0 bg-transparent px-0 text-right font-[math,var(--font-sans,system-ui),sans-serif]! text-3xl! font-semibold tracking-[-0.02em] shadow-none placeholder:font-sans focus-visible:ring-0 dark:bg-transparent sm:text-4xl!" />

{liveResult?.note && ( {liveResult.note} )} {liveResult?.text ?? " "}

setHistory([])} onExpressionReuse={updateExpression} />

) } 5f:T1b68,import { useRef } from "react" import { X } from "lucide-react" import { CalculatorEmptyStateAction } from "@/components/mirai-calculator/calculator-empty-state-action" import { SCIENTIFIC_EXAMPLES } from "@/components/mirai-calculator/modes/scientific-keypad-config" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { ScrollArea } from "@/components/ui/scroll-area" import { formatExpressionInput } from "@openmirai/calculator-core/engine" import { cn } from "@/lib/utils" /** Completed scientific calculation shown in the local history panel. */ export interface ScientificHistoryEntry { id: number expression: string result: string value?: number error?: boolean } interface ScientificSidebarProps { definitions: Array onDefinitionsChange: (definitions: Array) => void history: Array onHistoryClear: () => void onExpressionReuse: (expression: string) => void } /** Renders reusable definitions, calculation history, and scientific examples. */ export function ScientificSidebar({ definitions, onDefinitionsChange, history, onHistoryClear, onExpressionReuse, }: ScientificSidebarProps) { const definitionIdsRef = useRef>([]) const nextDefinitionIdRef = useRef(0) while (definitionIdsRef.current.length < definitions.length) { nextDefinitionIdRef.current += 1 definitionIdsRef.current.push(nextDefinitionIdRef.current) } definitionIdsRef.current.length = definitions.length const addDefinition = () => { nextDefinitionIdRef.current += 1 definitionIdsRef.current.push(nextDefinitionIdRef.current) onDefinitionsChange([...definitions, ""]) } const removeDefinition = (index: number) => { definitionIdsRef.current.splice(index, 1) onDefinitionsChange(definitions.filter((_, current) => current !== index)) } const updateDefinition = (index: number, value: string) => { onDefinitionsChange( definitions.map((definition, current) => (current === index ? value : definition)) ) } return (

Definitions

{definitions.map((definition, index) => (

updateDefinition(index, event.target.value)} placeholder="a = 5" aria-label={`Definition ${index + 1}`} className="h-8 rounded-md bg-background px-2.5 font-sans text-sm font-medium" />

Reusable in calculations and graphs

))} {definitions.length === 0 && (

a variable or function definition.

)}

History

{history.length > 0 && ( )}

{history.map((entry) => ( ))} {history.length === 0 && (

Your calculations appear here. Tap one to reuse it.

)}

Try this

{SCIENTIFIC_EXAMPLES.map((example) => ( ))}

Type with your keyboard too—sin, sqrt, ^, Enter to evaluate.

) } 60:T30ab,import { useCallback, useMemo, useRef, useState } from "react" import { BarChart3, LineChart } from "lucide-react" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { ScrollArea } from "@/components/ui/scroll-area" import { Separator } from "@/components/ui/separator" import { Textarea } from "@/components/ui/textarea" import { useStatisticsChart } from "@/components/mirai-calculator/modes/use-statistics-chart" import { STATISTICS_CHART_OPTIONS, STATISTICS_REGRESSION_OPTIONS, } from "@/components/mirai-calculator/modes/statistics-config" import type { StatisticsChartType } from "@/components/mirai-calculator/modes/statistics-config" import { calculateStatistics, correlation, covariance, fitRegression, } from "@openmirai/calculator-core/statistics" import type { RegressionModel } from "@openmirai/calculator-core/statistics" import { pairNumberSeries, parseNumberList, serializeNumberList, } from "@openmirai/calculator-core/statistics-data" import type { StatisticsInitialData } from "@openmirai/calculator-core/statistics-data" import { cn } from "@/lib/utils" export interface StatisticsModeProps { formatNumber: (value: number) => string colorScheme?: "light" | "dark" defaultData?: StatisticsInitialData } /** Renders descriptive statistics, regression, and distribution tools. */ export function StatisticsMode({ formatNumber: formatValue, colorScheme = "light", defaultData, }: StatisticsModeProps) { const [xSource, setXSource] = useState(() => serializeNumberList(defaultData?.xValues)) const [ySource, setYSource] = useState(() => serializeNumberList(defaultData?.yValues)) const [chart, setChart] = useState("scatter") const [model, setModel] = useState("linear") const canvasRef = useRef(null) const canvasHostRef = useRef(null) const formatNumber = useCallback( (value: number) => formatValue(Number.isFinite(value) ? Number(value.toPrecision(8)) : value), [formatValue] ) const xValues = useMemo(() => parseNumberList(xSource), [xSource]) const yValues = useMemo(() => parseNumberList(ySource), [ySource]) const statistics = useMemo( () => (xValues.length ? calculateStatistics(xValues) : null), [xValues] ) const regression = useMemo( () => fitRegression(xValues, yValues, model), [model, xValues, yValues] ) const pairedValues = useMemo(() => pairNumberSeries(xValues, yValues), [xValues, yValues]) const { correlationValue, covarianceValue } = useMemo(() => { try { return { correlationValue: correlation(pairedValues.x, pairedValues.y), covarianceValue: covariance(pairedValues.x, pairedValues.y), } } catch { return { correlationValue: Number.NaN, covarianceValue: Number.NaN } } }, [pairedValues]) const residualRows = useMemo(() => { const occurrences = new Map() return regression.residuals.slice(0, 12).map((residual, index) => { const x = pairedValues.x[index] const y = pairedValues.y[index] const signature = `${x}:${y}:${residual}` const occurrence = (occurrences.get(signature) ?? 0) + 1 occurrences.set(signature, occurrence) return { key: `${signature}:${occurrence}`, residual, x } }) }, [pairedValues, regression.residuals]) useStatisticsChart({ canvasRef, canvasHostRef, chart, colorScheme, formatNumber, pairedValues, regression, statistics, xValues, }) const statRows = statistics ? [ ["n", statistics.n], ["Sum", statistics.sum], ["Mean", statistics.mean], ["Median", statistics.median], ["Mode", statistics.mode], ["Min", statistics.min], ["Q1", statistics.q1], ["Q3", statistics.q3], ["Max", statistics.max], ["Range", statistics.range], ["IQR", statistics.iqr], ["σ (population)", statistics.populationStandardDeviation], ["s (sample)", statistics.sampleStandardDeviation], ["σ²", statistics.populationVariance], ["s²", statistics.sampleVariance], ] : [] return (

Data lists

Separate values with commas, spaces, or new lines.

X values

setXSource(event.target.value)}
                aria-label="X values"
                className="min-h-24 resize-y bg-background font-mono text-sm text-foreground normal-case tracking-normal placeholder:text-muted-foreground"
              />
            </label>
            <label
              htmlFor="mirai-statistics-y-values"
              className="block space-y-2 text-xs font-medium uppercase tracking-wide text-muted-foreground"
            >
              Y values
              <Textarea
                id="mirai-statistics-y-values"
                value={ySource}
                onChange={(event) => setYSource(event.target.value)}
                aria-label="Y values"
                className="min-h-24 resize-y bg-background font-mono text-sm text-foreground normal-case tracking-normal placeholder:text-muted-foreground"
              />
            </label>
            <div>
              <h3 className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                Chart
              </h3>
              <div className="flex flex-wrap gap-2">
                {STATISTICS_CHART_OPTIONS.map((item) => (
                  <Button
                    key={item.value}
                    size="sm"
                    variant={chart === item.value ? "default" : "outline"}
                    onClick={() => setChart(item.value)}
                  >
                    {item.label}
                  </Button>
                ))}
              </div>
            </div>
            <div>
              <h3 className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                Regression model
              </h3>
              <div className="flex flex-wrap gap-2">
                {STATISTICS_REGRESSION_OPTIONS.map((item) => (
                  <Button
                    key={item.value}
                    size="sm"
                    variant={model === item.value ? "default" : "outline"}
                    onClick={() => setModel(item.value)}
                  >
                    {item.label}
                  </Button>
                ))}
              </div>
            </div>

<Card>
              <CardHeader className="pb-2">
                <CardTitle className="flex items-center justify-between text-sm">
                  Model fit
                  <Badge variant={regression.ok ? "default" : "secondary"}>
                    {regression.label}
                  </Badge>
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-2">
                {regression.params.map((parameter) => (
                  <div key={parameter.label} className="flex justify-between text-sm">
                    <span className="text-muted-foreground">{parameter.label}</span>
                    <strong className="font-mono">{formatNumber(parameter.value)}</strong>
                  </div>
                ))}
                <Separator />
                <div className="flex justify-between text-sm">
                  <span className="text-muted-foreground">R²</span>
                  <strong className="font-mono text-primary">
                    {regression.ok ? formatNumber(regression.r2) : "—"}
                  </strong>
                </div>
                <div className="flex justify-between text-sm">
                  <span className="text-muted-foreground">r</span>
                  <strong className="font-mono">{formatNumber(correlationValue)}</strong>
                </div>
                <div className="flex justify-between text-sm">
                  <span className="text-muted-foreground">covariance</span>
                  <strong className="font-mono">{formatNumber(covarianceValue)}</strong>
                </div>
                <p
                  className={cn(
                    "pt-1 text-xs text-muted-foreground",
                    !regression.ok && "text-destructive"
                  )}
                >
                  {regression.message}
                </p>
              </CardContent>
            </Card>

{regression.ok && (
              <div>
                <h3 className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                  Residuals
                </h3>
                <div className="space-y-1">
                  {residualRows.map((row) => (
                    <div key={row.key} className="flex justify-between text-xs">
                      <span className="text-muted-foreground">x = {formatNumber(row.x)}</span>
                      <span className="font-mono">{formatNumber(row.residual)}</span>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        </ScrollArea>
      </aside>

<section className="mirai-statistics-results grid min-h-0 grid-rows-[minmax(300px,1fr)_auto] @max-[699px]:min-h-max @max-[699px]:grid-rows-[minmax(260px,1fr)_auto]">
        <div
          ref={canvasHostRef}
          className="mirai-statistics-chart relative min-h-75 @max-[699px]:min-h-65"
        >
          <canvas
            ref={canvasRef}
            className="absolute inset-0 size-full"
            aria-label={`${chart} statistics chart`}
          />
          <Badge className="absolute top-3 right-3 gap-1" variant="secondary">
            {chart === "histogram" || chart === "box" || chart === "dot" ? (
              <BarChart3 className="size-3" />
            ) : (
              <LineChart className="size-3" />
            )}
            {STATISTICS_CHART_OPTIONS.find((item) => item.value === chart)?.label}
          </Badge>
        </div>

<div className="mirai-statistics-summary max-h-77.5 overflow-auto overscroll-contain border-t bg-muted/25 p-4 @max-[699px]:max-h-none @max-[699px]:overflow-visible">
          <div className="mb-3">
            <div>
              <h3 className="text-sm font-semibold">One-variable statistics · x list</h3>
              <p className="text-xs text-muted-foreground">{xValues.length} valid values parsed</p>
            </div>
          </div>
          <div className="mirai-statistics-grid grid grid-cols-[repeat(auto-fit,minmax(min(165px,100%),1fr))] gap-2 @max-[699px]:grid-cols-2">
            {statRows.map(([label, value]) => (
              <Card key={String(label)} className="min-w-0 gap-1 overflow-hidden py-3">
                <CardContent className="min-w-0 px-3">
                  <div className="min-h-4 wrap-break-word text-xs leading-4 text-muted-foreground">
                    {label}
                  </div>
                  <div
                    className="max-w-full overflow-hidden font-mono text-sm font-semibold text-ellipsis whitespace-nowrap"
                    title={value === null ? "none" : formatNumber(Number(value))}
                  >
                    {value === null ? "none" : formatNumber(Number(value))}
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>
    </div>
  )
}
61:T2c39,import { useMemo, useState } from "react"
import { CirclePercent, DraftingCompass, MoveDiagonal2, Ratio } from "lucide-react"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import {
  calculateCoordinates,
  calculatePercent,
  calculateRatio,
  calculateShapes,
  parseToolNumber,
  serializeToolValue,
} from "@openmirai/calculator-core/tools"
import type { ToolsInitialData } from "@openmirai/calculator-core/tools"

export interface ToolsModeProps {
  formatNumber: (value: number) => string
  defaultData?: ToolsInitialData
}

function ResultRow({ label, value }: { label: string; value: string }) {
  return (
    <div className="mirai-tools-result flex items-center justify-between gap-4 text-sm @max-[699px]:flex-col @max-[699px]:items-start @max-[699px]:gap-0.5">
      <span className="text-muted-foreground">{label}</span>
      <strong className="min-w-0 max-w-full text-right font-mono wrap-break-word @max-[699px]:text-left">
        {value}
      </strong>
    </div>
  )
}

function NumberField({
  label,
  value,
  onChange,
}: {
  label: string
  value: string
  onChange: (value: string) => void
}) {
  return (
    <label className="min-w-0 space-y-1.5 text-xs text-muted-foreground">
      {label}
      <Input
        value={value}
        onChange={(event) => onChange(event.target.value)}
        inputMode="decimal"
        className="bg-background font-mono text-sm text-foreground"
        aria-label={label}
      />
    </label>
  )
}

/** Renders focused percent, ratio, coordinate, and geometry utilities. */
export function ToolsMode({ formatNumber: formatValue, defaultData }: ToolsModeProps) {
  const [percent, setPercent] = useState(() => serializeToolValue(defaultData?.percent))
  const [percentOf, setPercentOf] = useState(() => serializeToolValue(defaultData?.percentOf))
  const [ratioLeft, setRatioLeft] = useState(() => serializeToolValue(defaultData?.ratioLeft))
  const [ratioRight, setRatioRight] = useState(() => serializeToolValue(defaultData?.ratioRight))
  const [ratioScale, setRatioScale] = useState(() => serializeToolValue(defaultData?.ratioScale))
  const [x1, setX1] = useState(() => serializeToolValue(defaultData?.x1))
  const [y1, setY1] = useState(() => serializeToolValue(defaultData?.y1))
  const [x2, setX2] = useState(() => serializeToolValue(defaultData?.x2))
  const [y2, setY2] = useState(() => serializeToolValue(defaultData?.y2))
  const [radius, setRadius] = useState(() => serializeToolValue(defaultData?.radius))
  const [base, setBase] = useState(() => serializeToolValue(defaultData?.base))
  const [height, setHeight] = useState(() => serializeToolValue(defaultData?.height))
  const [depth, setDepth] = useState(() => serializeToolValue(defaultData?.depth))
  const formatNumber = (value: number) =>
    formatValue(Number.isFinite(value) ? Number(value.toPrecision(8)) : value)

const percentResults = useMemo(
    () => calculatePercent(parseToolNumber(percent), parseToolNumber(percentOf)),
    [percent, percentOf]
  )
  const ratioResults = useMemo(
    () =>
      calculateRatio(
        parseToolNumber(ratioLeft),
        parseToolNumber(ratioRight),
        parseToolNumber(ratioScale, 1)
      ),
    [ratioLeft, ratioRight, ratioScale]
  )
  const coordinateResults = useMemo(
    () =>
      calculateCoordinates(
        parseToolNumber(x1),
        parseToolNumber(y1),
        parseToolNumber(x2),
        parseToolNumber(y2)
      ),
    [x1, x2, y1, y2]
  )
  let lineThroughPoints: string
  switch (coordinateResults.slope) {
    case null:
      lineThroughPoints = `x = ${formatNumber(parseToolNumber(x1))}`
      break
    default: {
      const intercept = coordinateResults.intercept
      lineThroughPoints =
        intercept === null
          ? "undefined"
          : `y = ${formatNumber(coordinateResults.slope)}x ${intercept < 0 ? "−" : "+"} ${formatNumber(Math.abs(intercept))}`
    }
  }
  const shapeResults = useMemo(
    () =>
      calculateShapes(
        parseToolNumber(radius),
        parseToolNumber(base),
        parseToolNumber(height),
        parseToolNumber(depth)
      ),
    [base, depth, height, radius]
  )

return (
    <div className="min-h-0 flex-1 overflow-auto bg-muted/25 p-4 sm:p-6">
      <div className="mirai-tools-grid grid grid-cols-[repeat(auto-fit,minmax(min(280px,100%),1fr))] gap-4">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-base">
              <CirclePercent className="size-4 text-primary" />
              Percent
            </CardTitle>
            <p className="text-xs text-muted-foreground">
              Numbers in, numbers out—no worked steps.
            </p>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="mirai-tools-fields mirai-tools-fields-two grid grid-cols-2 gap-3 @max-[699px]:grid-cols-1">
              <NumberField label="Percent" value={percent} onChange={setPercent} />
              <NumberField label="Of value" value={percentOf} onChange={setPercentOf} />
            </div>
            <div className="space-y-2 rounded-lg bg-muted p-3">
              <ResultRow label="Percent of value" value={formatNumber(percentResults.portion)} />
              <ResultRow label="Increased by" value={formatNumber(percentResults.increased)} />
              <ResultRow label="Decreased by" value={formatNumber(percentResults.decreased)} />
              <ResultRow
                label="Original before increase"
                value={formatNumber(percentResults.originalBeforeIncrease)}
              />
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-base">
              <Ratio className="size-4 text-primary" />
              Ratio and proportion
            </CardTitle>
            <p className="text-xs text-muted-foreground">Simplify, scale, and check equivalence.</p>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="mirai-tools-fields mirai-tools-fields-three grid grid-cols-3 gap-3 @max-[699px]:grid-cols-1">
              <NumberField label="a" value={ratioLeft} onChange={setRatioLeft} />
              <NumberField label="b" value={ratioRight} onChange={setRatioRight} />
              <NumberField label="Scale" value={ratioScale} onChange={setRatioScale} />
            </div>
            <div className="space-y-2 rounded-lg bg-muted p-3">
              <ResultRow
                label="Simplified"
                value={`${formatNumber(ratioResults.simplifiedLeft)} : ${formatNumber(ratioResults.simplifiedRight)}`}
              />
              <ResultRow
                label="Scaled"
                value={`${formatNumber(ratioResults.scaledLeft)} : ${formatNumber(ratioResults.scaledRight)}`}
              />
              <ResultRow label="As decimal" value={formatNumber(ratioResults.decimal)} />
              <ResultRow
                label="gcd · lcm"
                value={`${formatNumber(ratioResults.gcd)} · ${formatNumber(ratioResults.lcm)}`}
              />
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-base">
              <MoveDiagonal2 className="size-4 text-primary" />
              Coordinate geometry
            </CardTitle>
            <p className="text-xs text-muted-foreground">Two points in, distance and slope out.</p>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="mirai-tools-fields mirai-tools-fields-four grid grid-cols-4 gap-2 @max-[699px]:grid-cols-1">
              <NumberField label="x₁" value={x1} onChange={setX1} />
              <NumberField label="y₁" value={y1} onChange={setY1} />
              <NumberField label="x₂" value={x2} onChange={setX2} />
              <NumberField label="y₂" value={y2} onChange={setY2} />
            </div>
            <div className="space-y-2 rounded-lg bg-muted p-3">
              <ResultRow label="Distance" value={formatNumber(coordinateResults.distance)} />
              <ResultRow
                label="Midpoint"
                value={`(${formatNumber(coordinateResults.midpoint[0])}, ${formatNumber(coordinateResults.midpoint[1])})`}
              />
              <ResultRow
                label="Slope"
                value={
                  coordinateResults.slope === null
                    ? "undefined"
                    : formatNumber(coordinateResults.slope)
                }
              />
              <ResultRow label="Line through points" value={lineThroughPoints} />
            </div>
          </CardContent>
        </Card>

<Card className="mirai-tools-wide col-span-full">
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-base">
              <DraftingCompass className="size-4 text-primary" />
              Shape measures
            </CardTitle>
            <p className="text-xs text-muted-foreground">
              Enter dimensions and the results update as you type.
            </p>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="mirai-tools-fields mirai-tools-fields-four grid grid-cols-4 gap-3 @max-[699px]:grid-cols-1">
              <NumberField label="Radius r" value={radius} onChange={setRadius} />
              <NumberField label="Base b" value={base} onChange={setBase} />
              <NumberField label="Height h" value={height} onChange={setHeight} />
              <NumberField label="Depth d" value={depth} onChange={setDepth} />
            </div>
            <div className="mirai-tools-shape-results grid grid-cols-4 gap-3 @max-[699px]:grid-cols-1">
              {[
                ["Circle area", shapeResults.circleArea],
                ["Circumference", shapeResults.circumference],
                ["Triangle area", shapeResults.triangleArea],
                ["Prism volume", shapeResults.prismVolume],
              ].map(([label, value]) => (
                <div key={String(label)} className="rounded-lg bg-muted p-3">
                  <div className="text-xs text-muted-foreground">{label}</div>
                  <div className="font-mono text-base font-semibold">
                    {formatValue(
                      Number.isFinite(Number(value))
                        ? Number(Number(value).toPrecision(6))
                        : Number(value)
                    )}
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

<Card className="mirai-tools-wide col-span-full border-primary/20 bg-primary/5">
          <CardContent className="py-4">
            <p className="text-sm font-medium text-primary">Practice tip</p>
            <p className="mt-1 text-sm text-muted-foreground">
              These helpers perform arithmetic only. They do not factor, solve, or explain a
              question, keeping the workflow appropriate for timed practice.
            </p>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
62:T2250,import { useEffect } from "react"

import { readCanvasColor, resolveCanvasColor } from "@/components/mirai-calculator/canvas-theme"
import { CALCULATOR_CHART_TOKENS } from "@/components/mirai-calculator/calculator-ui-config"
import type { StatisticsChartType } from "@/components/mirai-calculator/modes/statistics-config"
import type { DescriptiveStatistics, RegressionResult } from "@openmirai/calculator-core/statistics"
import {
  buildHistogram,
  calculateNumberExtent,
  countNumberFrequencies,
  sampleRegression,
} from "@openmirai/calculator-core/statistics-data"
import type { PairedNumberSeries } from "@openmirai/calculator-core/statistics-data"

interface UseStatisticsChartOptions {
  canvasRef: React.RefObject<HTMLCanvasElement | null>
  canvasHostRef: React.RefObject<HTMLDivElement | null>
  chart: StatisticsChartType
  colorScheme: "light" | "dark"
  formatNumber: (value: number) => string
  pairedValues: PairedNumberSeries
  regression: RegressionResult
  statistics: DescriptiveStatistics | null
  xValues: Array<number>
}

/** Draws the selected statistics visualization and redraws it when its host resizes. */
export function useStatisticsChart({
  canvasRef,
  canvasHostRef,
  chart,
  colorScheme,
  formatNumber,
  pairedValues,
  regression,
  statistics,
  xValues,
}: UseStatisticsChartOptions): void {
  useEffect(() => {
    const canvas = canvasRef.current
    const host = canvasHostRef.current
    if (!canvas || !host) {
      return
    }

const draw = () => {
      const bounds = host.getBoundingClientRect()
      const width = Math.max(1, Math.floor(bounds.width))
      const height = Math.max(1, Math.floor(bounds.height))
      const ratio = Math.min(window.devicePixelRatio || 1, 2)
      canvas.width = width * ratio
      canvas.height = height * ratio
      canvas.style.width = `${width}px`
      canvas.style.height = `${height}px`
      const context = canvas.getContext("2d")
      if (!context) {
        return
      }
      context.setTransform(ratio, 0, 0, ratio, 0, 0)

const background = readCanvasColor(canvas, "--background")
      const border = readCanvasColor(canvas, "--border")
      const foreground = readCanvasColor(canvas, "--foreground")
      const muted = readCanvasColor(canvas, "--muted-foreground")
      const primary = resolveCanvasColor(canvas, CALCULATOR_CHART_TOKENS[0])
      const secondary = resolveCanvasColor(canvas, CALCULATOR_CHART_TOKENS[1])
      const padding = { top: 28, right: 28, bottom: 38, left: 48 }
      const plotWidth = width - padding.left - padding.right
      const plotHeight = height - padding.top - padding.bottom

context.clearRect(0, 0, width, height)
      context.fillStyle = background
      context.fillRect(0, 0, width, height)
      context.font = "11px system-ui, -apple-system, sans-serif"
      context.fillStyle = muted
      context.strokeStyle = border
      context.lineWidth = 1

const drawAxes = (xRange: [number, number], yRange: [number, number]) => {
        const mapX = (value: number) =>
          padding.left + ((value - xRange[0]) / (xRange[1] - xRange[0])) * plotWidth
        const mapY = (value: number) =>
          padding.top + (1 - (value - yRange[0]) / (yRange[1] - yRange[0])) * plotHeight

for (let index = 0; index <= 5; index += 1) {
          const x = padding.left + (index / 5) * plotWidth
          const y = padding.top + (index / 5) * plotHeight
          context.strokeStyle = border
          context.beginPath()
          context.moveTo(x, padding.top)
          context.lineTo(x, padding.top + plotHeight)
          context.stroke()
          context.beginPath()
          context.moveTo(padding.left, y)
          context.lineTo(padding.left + plotWidth, y)
          context.stroke()
          context.fillStyle = muted
          const xValue = xRange[0] + (index / 5) * (xRange[1] - xRange[0])
          const yValue = yRange[1] - (index / 5) * (yRange[1] - yRange[0])
          context.textAlign = "center"
          context.fillText(formatNumber(xValue), x, height - 14)
          context.textAlign = "right"
          context.fillText(formatNumber(yValue), padding.left - 8, y + 4)
        }
        return { mapX, mapY }
      }

if (chart === "histogram" && xValues.length > 0) {
        const bins = buildHistogram(xValues)
        const firstBin = bins[0]
        const lastBin = bins.at(-1)
        if (!firstBin || !lastBin) {
          return
        }
        const minimum = firstBin.minimum
        const maximum = lastBin.maximum
        const { mapX, mapY } = drawAxes(
          [minimum, maximum],
          [0, Math.max(...bins.map((bin) => bin.count), 1)]
        )
        context.fillStyle = primary
        bins.forEach((bin) => {
          const x0 = mapX(bin.minimum)
          const x1 = mapX(bin.maximum)
          const y = mapY(bin.count)
          context.fillRect(x0 + 1, y, Math.max(1, x1 - x0 - 2), mapY(0) - y)
        })
      } else if (chart === "box" && statistics) {
        const [minimum, maximum] = calculateNumberExtent(xValues)
        const mapX = (value: number) =>
          padding.left + ((value - minimum) / (maximum - minimum)) * plotWidth
        const centerY = padding.top + plotHeight / 2
        context.strokeStyle = foreground
        context.lineWidth = 2
        context.beginPath()
        context.moveTo(mapX(statistics.min), centerY)
        context.lineTo(mapX(statistics.q1), centerY)
        context.moveTo(mapX(statistics.q3), centerY)
        context.lineTo(mapX(statistics.max), centerY)
        context.stroke()
        context.fillStyle = `${primary}33`
        context.fillRect(
          mapX(statistics.q1),
          centerY - 42,
          mapX(statistics.q3) - mapX(statistics.q1),
          84
        )
        context.strokeStyle = primary
        context.strokeRect(
          mapX(statistics.q1),
          centerY - 42,
          mapX(statistics.q3) - mapX(statistics.q1),
          84
        )
        for (const value of [statistics.min, statistics.median, statistics.max]) {
          context.beginPath()
          context.moveTo(mapX(value), centerY - 48)
          context.lineTo(mapX(value), centerY + 48)
          context.stroke()
          context.fillStyle = muted
          context.fillText(formatNumber(value), mapX(value) - 10, centerY + 68)
        }
      } else if (chart === "dot" && xValues.length > 0) {
        const [minimum, maximum] = calculateNumberExtent(xValues)
        const frequencies = countNumberFrequencies(xValues)
        const maxFrequency = Math.max(...frequencies.map(({ count }) => count))
        const { mapX, mapY } = drawAxes([minimum, maximum], [0, maxFrequency + 1])
        context.fillStyle = primary
        for (const { value, count } of frequencies) {
          for (let index = 1; index <= count; index += 1) {
            context.beginPath()
            context.arc(mapX(value), mapY(index), 5, 0, Math.PI * 2)
            context.fill()
          }
        }
      } else {
        const yPlotValues =
          chart === "residual" && regression.ok ? regression.residuals : pairedValues.y
        const [xmin, xmax] = calculateNumberExtent(pairedValues.x)
        const [ymin, ymax] = calculateNumberExtent(yPlotValues)
        const { mapX, mapY } = drawAxes([xmin, xmax], [ymin, ymax])
        if (chart === "residual") {
          context.strokeStyle = muted
          context.setLineDash([5, 4])
          context.beginPath()
          context.moveTo(mapX(xmin), mapY(0))
          context.lineTo(mapX(xmax), mapY(0))
          context.stroke()
          context.setLineDash([])
        } else if (regression.ok) {
          context.strokeStyle = secondary
          context.lineWidth = 2
          context.beginPath()
          sampleRegression(regression.predict, xmin, xmax).forEach(({ x, y }, index) => {
            if (index === 0) {
              context.moveTo(mapX(x), mapY(y))
            } else {
              context.lineTo(mapX(x), mapY(y))
            }
          })
          context.stroke()
        }

context.fillStyle = primary
        pairedValues.x.forEach((x, index) => {
          const y =
            chart === "residual" && regression.ok
              ? regression.residuals[index]
              : pairedValues.y[index]
          if (!Number.isFinite(y)) {
            return
          }
          context.beginPath()
          context.arc(mapX(x), mapY(y), 4.5, 0, Math.PI * 2)
          context.fill()
        })
      }
    }

draw()
    const observer = new ResizeObserver(draw)
    observer.observe(host)
    return () => observer.disconnect()
  }, [
    canvasHostRef,
    canvasRef,
    chart,
    colorScheme,
    formatNumber,
    pairedValues,
    regression,
    statistics,
    xValues,
  ])
}
63:T553,import { useSyncExternalStore } from "react"

import type { CalculatorTheme } from "@openmirai/calculator-core/configuration"

/** Subscribes to changes in the browser's preferred color scheme. */
function subscribeToSystemTheme(onStoreChange: () => void): () => void {
  const query = window.matchMedia("(prefers-color-scheme: dark)")
  query.addEventListener("change", onStoreChange)
  return () => query.removeEventListener("change", onStoreChange)
}

/** Reads whether the browser currently prefers a dark color scheme. */
function getSystemThemeSnapshot(): boolean {
  return window.matchMedia("(prefers-color-scheme: dark)").matches
}

/** Supplies the deterministic light-mode server snapshot. */
function getServerSystemThemeSnapshot(): boolean {
  return false
}

/** Returns whether the host system currently prefers a dark color scheme. */
export function useSystemDarkMode(): boolean {
  return useSyncExternalStore(
    subscribeToSystemTheme,
    getSystemThemeSnapshot,
    getServerSystemThemeSnapshot
  )
}

/** Resolves the configured calculator theme against the current system preference. */
export function resolveCalculatorTheme(
  theme: CalculatorTheme,
  systemDark: boolean
): "light" | "dark" {
  switch (theme) {
    case "system":
      return systemDark ? "dark" : "light"
    case "light":
    case "dark":
      return theme
  }
}
4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@openmirai/calculator-core@^0.2.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40openmirai%2Fcalculator-core","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@openmirai/calculator-core@^0.2.0"}]]}]}],["$","li","lucide-react@^1.28.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react@^1.28.0"}]]}]}]]}],["$","$L50",null,{"namespace":"@openmirai","registryDependencies":["badge","button","card","input","scroll-area","select","separator","switch","tabs","textarea","tooltip"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"../../packages/calculator-registry/src/components/mirai-calculator/calculator-empty-state-action.tsx","content":"interface CalculatorEmptyStateActionProps {\n  label: string\n  onClick: () => void\n}\n\n/** Renders the inline Add action used by calculator empty-state guidance. */\nexport function CalculatorEmptyStateAction({ label, onClick }: CalculatorEmptyStateActionProps) {\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      onClick={onClick}\n      className=\"font-semibold text-foreground underline-offset-4 hover:underline focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n    >\n      Add\n    </button>\n  )\n}\n","type":"registry:component","target":"@components/mirai-calculator/calculator-empty-state-action.tsx"},{"path":"../../packages/calculator-registry/src/components/mirai-calculator/calculator-extension-definitions.tsx","content":"$52","type":"registry:component","target":"@components/mirai-calculator/calculator-extension-definitions.tsx"},{"path":"../../packages/calculator-registry/src/components/mirai-calculator/calculator-header-icon-button.tsx","content":"import { buttonVariants } from \"@/components/ui/button\"\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@/components/ui/tooltip\"\nimport { cn } from \"@/lib/utils\"\n\n/** Renders a compact calculator header control with a themed tooltip. */\nexport function CalculatorHeaderIconButton({\n  label,\n  children,\n  onClick,\n  portalTheme,\n}: {\n  label: string\n  children: React.ReactNode\n  onClick: () => void\n  portalTheme: \"light\" | \"dark\"\n}) {\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        onClick={onClick}\n        aria-label={label}\n        className={cn(buttonVariants({ variant: \"outline\", size: \"icon\" }), \"size-7.5 rounded-md\")}\n      >\n        {children}\n      </TooltipTrigger>\n      <TooltipContent\n        className={cn(\"mirai-calculator-package mirai-calculator-portal z-2147483002\", portalTheme)}\n        data-theme={portalTheme}\n      >\n        {label}\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n","type":"registry:component","target":"@components/mirai-calculator/calculator-header-icon-button.tsx"},{"path":"../../packages/calculator-registry/src/components/mirai-calculator/calculator-settings-dialog.tsx","content":"$53","type":"registry:component","target":"@components/mirai-calculator/calculator-settings-dialog.tsx"},{"path":"../../packages/calculator-registry/src/components/mirai-calculator/calculator-ui-config.ts","content":"/** Supported decimal-place options displayed by calculator settings. */\nexport const CALCULATOR_DECIMAL_OPTIONS = [0, 1, 2, 3, 4, 6] as const\n\n/** Graph viewport properties exposed by calculator settings. */\nexport const CALCULATOR_GRAPH_BOUNDARY_KEYS = [\"xmin\", \"xmax\", \"ymin\", \"ymax\"] as const\n\n/** Human-readable angle-mode labels. */\nexport const CALCULATOR_ANGLE_MODE_LABELS = {\n  degrees: \"Degrees\",\n  radians: \"Radians\",\n} as const\n\n/** Human-readable number-notation labels. */\nexport const CALCULATOR_NOTATION_LABELS = {\n  auto: \"Automatic\",\n  scientific: \"Scientific\",\n} as const\n\n/** Human-readable calculator theme labels. */\nexport const CALCULATOR_THEME_LABELS = {\n  dark: \"Dark\",\n  light: \"Light\",\n  system: \"System\",\n} as const\n\n/** Semantic shadcn chart tokens used by calculator visualizations. */\nexport const CALCULATOR_CHART_TOKENS = [\n  \"var(--chart-1)\",\n  \"var(--chart-2)\",\n  \"var(--chart-3)\",\n  \"var(--chart-4)\",\n  \"var(--chart-5)\",\n] as const\n","type":"registry:component","target":"@components/mirai-calculator/calculator-ui-config.ts"},{"path":"../../packages/calculator-registry/src/components/mirai-calculator/calculator-viewport-portal.tsx","content":"$54","type":"registry:component","target":"@components/mirai-calculator/calculator-viewport-portal.tsx"},{"path":"../../packages/calculator-registry/src/components/mirai-calculator/canvas-theme.ts","content":"$55","type":"registry:component","target":"@components/mirai-calculator/canvas-theme.ts"},{"path":"../../packages/calculator-registry/src/components/mirai-calculator/mirai-calculator.tsx","content":"$56","type":"registry:component","target":"@components/mirai-calculator/mirai-calculator.tsx"},{"path":"../../packages/calculator-registry/src/components/mirai-calculator/modes/graphing-canvas-viewport.tsx","content":"$57","type":"registry:component","target":"@components/mirai-calculator/modes/graphing-canvas-viewport.tsx"},{"path":"../../packages/calculator-registry/src/components/mirai-calculator/modes/graphing-sidebar.tsx","content":"$58","type":"registry:component","target":"@components/mirai-calculator/modes/graphing-sidebar.tsx"},{"path":"../../packages/calculator-registry/src/components/mirai-calculator/modes/graphing-state.ts","content":"$59","type":"registry:component","target":"@components/mirai-calculator/modes/graphing-state.ts"},{"path":"../../packages/calculator-registry/src/components/mirai-calculator/modes/graphing-mode.tsx","content":"$5a","type":"registry:component","target":"@components/mirai-calculator/modes/graphing-mode.tsx"},{"path":"../../packages/calculator-registry/src/components/mirai-calculator/modes/scientific-key-label.tsx","content":"$5b","type":"registry:component","target":"@components/mirai-calculator/modes/scientific-key-label.tsx"},{"path":"../../packages/calculator-registry/src/components/mirai-calculator/modes/scientific-keypad.tsx","content":"$5c","type":"registry:component","target":"@components/mirai-calculator/modes/scientific-keypad.tsx"},{"path":"../../packages/calculator-registry/src/components/mirai-calculator/modes/scientific-keypad-config.ts","content":"$5d","type":"registry:component","target":"@components/mirai-calculator/modes/scientific-keypad-config.ts"},{"path":"../../packages/calculator-registry/src/components/mirai-calculator/modes/scientific-mode.tsx","content":"$5e","type":"registry:component","target":"@components/mirai-calculator/modes/scientific-mode.tsx"},{"path":"../../packages/calculator-registry/src/components/mirai-calculator/modes/scientific-sidebar.tsx","content":"$5f","type":"registry:component","target":"@components/mirai-calculator/modes/scientific-sidebar.tsx"},{"path":"../../packages/calculator-registry/src/components/mirai-calculator/modes/statistics-config.ts","content":"import type { RegressionModel } from \"@openmirai/calculator-core/statistics\"\n\n/** Chart variants available in the statistics workspace. */\nexport type StatisticsChartType = \"scatter\" | \"histogram\" | \"box\" | \"dot\" | \"residual\"\n\n/** User-facing statistics chart options. */\nexport const STATISTICS_CHART_OPTIONS: Array<{\n  value: StatisticsChartType\n  label: string\n}> = [\n  { value: \"scatter\", label: \"Scatter\" },\n  { value: \"histogram\", label: \"Histogram\" },\n  { value: \"box\", label: \"Box plot\" },\n  { value: \"dot\", label: \"Dot plot\" },\n  { value: \"residual\", label: \"Residuals\" },\n]\n\n/** User-facing regression model options. */\nexport const STATISTICS_REGRESSION_OPTIONS: Array<{\n  value: RegressionModel\n  label: string\n}> = [\n  { value: \"linear\", label: \"Linear\" },\n  { value: \"quadratic\", label: \"Quadratic\" },\n  { value: \"cubic\", label: \"Cubic\" },\n  { value: \"exponential\", label: \"Exponential\" },\n  { value: \"logarithmic\", label: \"Logarithmic\" },\n  { value: \"power\", label: \"Power\" },\n]\n","type":"registry:component","target":"@components/mirai-calculator/modes/statistics-config.ts"},{"path":"../../packages/calculator-registry/src/components/mirai-calculator/modes/statistics-mode.tsx","content":"$60","type":"registry:component","target":"@components/mirai-calculator/modes/statistics-mode.tsx"},{"path":"../../packages/calculator-registry/src/components/mirai-calculator/modes/tools-mode.tsx","content":"$61","type":"registry:component","target":"@components/mirai-calculator/modes/tools-mode.tsx"},{"path":"../../packages/calculator-registry/src/components/mirai-calculator/modes/use-statistics-chart.ts","content":"$62","type":"registry:component","target":"@components/mirai-calculator/modes/use-statistics-chart.ts"},{"path":"../../packages/calculator-registry/src/components/mirai-calculator/use-system-dark-mode.ts","content":"$63","type":"registry:component","target":"@components/mirai-calculator/use-system-dark-mode.ts"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>

Calculator settings

Number format

Graph viewport

Appearance

Analysis