@dev_bachani/math-editor 0.0.1

package/README.md

@@ -0,0 +1,199 @@
+# Mathex
+
+A Desmos-like math equation editor component library for React. Build beautiful, interactive math input experiences for educational platforms.
+
+## Features
+
+- 🎨 **Beautiful UI** - Desmos-inspired design with light and dark themes
+- ⌨️ **On-Screen Keyboard** - Full math keyboard with symbols, functions, and operators
+- 📱 **Context-Aware** - Multi-input support with automatic keyboard routing
+- 🔢 **13 Function Categories** - Complete set of math functions from Trig to Calculus
+- ⚡ **TypeScript** - Full type safety and IntelliSense support
+- 🎯 **Lightweight** - Tree-shakeable and optimized for production
+
+## Installation
+
+```bash
+npm install mathex
+```
+
+## Quick Start
+
+```tsx
+import { MathProvider, MathInput, MathKeyboard } from 'mathex';
+
+function App() {
+  const [latex, setLatex] = useState('x^2 + 3x + 1');
+
+  return (
+    <MathProvider theme="light">
+      <MathInput
+        value={latex}
+        onChange={setLatex}
+        placeholder="Enter equation..."
+      />
+      <MathKeyboard />
+    </MathProvider>
+  );
+}
+```
+
+## Theming
+
+Mathex supports both light and dark themes out of the box.
+
+### Light Theme (Default)
+
+```tsx
+<MathProvider theme="light">
+  <MathInput />
+  <MathKeyboard />
+</MathProvider>
+```
+
+### Dark Theme
+
+```tsx
+<MathProvider theme="dark">
+  <MathInput />
+  <MathKeyboard />
+</MathProvider>
+```
+
+### Dynamic Theme Switching
+
+```tsx
+function App() {
+  const [theme, setTheme] = useState<'light' | 'dark'>('light');
+
+  const toggleTheme = () => {
+    setTheme(current => current === 'light' ? 'dark' : 'light');
+  };
+
+  return (
+    <MathProvider theme={theme}>
+      <button onClick={toggleTheme}>
+        {theme === 'light' ? '🌙 Dark Mode' : '☀️ Light Mode'}
+      </button>
+      <MathInput />
+      <MathKeyboard />
+    </MathProvider>
+  );
+}
+```
+
+### Custom Theme
+
+You can customize the theme by providing a `ThemeConfig` object:
+
+```tsx
+const customTheme = {
+  colors: {
+    primary: '#FF5722',
+    background: '#FFF',
+    text: '#000',
+    border: '#CCC',
+  },
+  // ... more customization options
+};
+
+<MathProvider theme={customTheme}>
+  <MathInput />
+  <MathKeyboard />
+</MathProvider>
+```
+
+## Components
+
+### MathProvider
+
+The context provider that manages global state and communication between components.
+
+**Props:**
+- `theme` - `'light' | 'dark' | ThemeConfig` - Theme configuration (default: `'light'`)
+- `children` - React components to wrap
+
+### MathInput
+
+An input field for entering and displaying mathematical equations.
+
+**Props:**
+- `value` - `string` - LaTeX string (controlled mode)
+- `defaultValue` - `string` - LaTeX string (uncontrolled mode)
+- `onChange` - `(latex: string) => void` - Callback when value changes
+- `placeholder` - `string` - Placeholder text
+- `disabled` - `boolean` - Disable input
+- `className` - `string` - Additional CSS classes
+- `style` - `CSSProperties` - Inline styles
+- `onError` - `(error: Error) => void` - Error callback
+
+### MathKeyboard
+
+An on-screen keyboard for entering math symbols and functions.
+
+**Props:**
+- `isVisible` - `boolean` - Control keyboard visibility
+- `onVisibilityChange` - `(visible: boolean) => void` - Visibility change callback
+- `className` - `string` - Additional CSS classes
+- `style` - `CSSProperties` - Inline styles
+
+## Multiple Inputs
+
+Mathex automatically handles multiple inputs - the keyboard routes input to whichever field is focused:
+
+```tsx
+<MathProvider theme="light">
+  <div>
+    <label>Equation 1:</label>
+    <MathInput value={latex1} onChange={setLatex1} />
+  </div>
+
+  <div>
+    <label>Equation 2:</label>
+    <MathInput value={latex2} onChange={setLatex2} />
+  </div>
+
+  <div>
+    <label>Equation 3:</label>
+    <MathInput value={latex3} onChange={setLatex3} />
+  </div>
+
+  {/* One keyboard routes to all inputs */}
+  <MathKeyboard />
+</MathProvider>
+```
+
+## Function Categories
+
+The keyboard includes all 13 function categories from Desmos:
+
+1. **Trig Functions** - sin, cos, tan, csc, sec, cot
+2. **Inverse Trig** - sin⁻¹, cos⁻¹, tan⁻¹, csc⁻¹, sec⁻¹, cot⁻¹
+3. **Calculus** - exp, ln, log, d/dx, ∫, Σ, Π
+4. **Number Theory** - lcm, gcd, mod, ceil, floor, round, ⁿ√, nPr, nCr
+5. **Hyperbolic Trig** - sinh, cosh, tanh, csch, sech, coth
+6. **Statistics** - mean, median, min, max, stdev, var, corr, and more
+7. **Probability** - normaldist, tdist, binomialdist, pdf, cdf, random
+8. **Inference** - ztest, ttest, chisqtest, confidence intervals
+9. **List Operations** - repeat, join, sort, shuffle, unique
+10. **Visualizations** - histogram, dotplot, boxplot
+11. **Geometry** - polygon, distance, midpoint
+12. **Custom Colors** - rgb, hsv, oklab, oklch
+13. **Sound** - tone
+
+## Keyboard Modes
+
+- **Default Mode** - Numbers, operators, variables, and common symbols
+- **ABC Mode** - QWERTY keyboard for entering letters and Greek symbols
+
+## License
+
+MIT
+
+## Contributing
+
+Contributions welcome! Please open an issue or PR on [GitHub](https://github.com/yourusername/mathex).
+
+## Support
+
+For questions or issues, please visit our [GitHub Issues](https://github.com/yourusername/mathex/issues).

package/dist/components/MathInput/MathInput.d.ts

@@ -0,0 +1,51 @@
+import { default as React } from 'react';
+declare global {
+    interface Window {
+        MathQuill: any;
+    }
+}
+/**
+ * Props for the MathInput component
+ */
+export interface MathInputProps {
+    /** Controlled LaTeX value */
+    value?: string;
+    /** Default LaTeX value (uncontrolled) */
+    defaultValue?: string;
+    /** Callback fired when the LaTeX changes */
+    onChange?: (latex: string) => void;
+    /** Unique identifier for this input */
+    id?: string;
+    /** Placeholder text when input is empty */
+    placeholder?: string;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Additional CSS class name */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+    /** Whether to focus on mount */
+    autoFocus?: boolean;
+    /** Whether the input is read-only */
+    readOnly?: boolean;
+    /** Callback fired on errors */
+    onError?: (error: Error) => void;
+}
+/**
+ * MathInput - A WYSIWYG math equation editor using MathQuill
+ *
+ * This component provides a Desmos-like editing experience where you edit
+ * rendered mathematical notation directly, not raw LaTeX.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <MathInput
+ *   value={latex}
+ *   onChange={(newLatex) => setLatex(newLatex)}
+ *   placeholder="Enter equation..."
+ * />
+ * ```
+ */
+export declare const MathInput: React.FC<MathInputProps>;
+//# sourceMappingURL=MathInput.d.ts.map

package/dist/components/MathInput/MathInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MathInput.d.ts","sourceRoot":"","sources":["../../../src/components/MathInput/MathInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAEjF,OAAO,iBAAiB,CAAC;AAWzB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,SAAS,EAAE,GAAG,CAAC;KAChB;CACF;AAUD;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,uCAAuC;IACvC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA4P9C,CAAC"}

package/dist/components/MathKeyboard/MathKeyboard.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+/**
+ * Props for the MathKeyboard component
+ */
+export interface MathKeyboardProps {
+    /** Whether the keyboard is initially visible */
+    defaultVisible?: boolean;
+    /** Callback fired when keyboard visibility changes */
+    onVisibilityChange?: (visible: boolean) => void;
+    /** Additional CSS class name */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+}
+/**
+ * MathKeyboard - A Desmos-style on-screen keyboard for math input
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <MathKeyboard defaultVisible={true} />
+ * ```
+ */
+export declare const MathKeyboard: React.FC<MathKeyboardProps>;
+//# sourceMappingURL=MathKeyboard.d.ts.map

package/dist/components/MathKeyboard/MathKeyboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MathKeyboard.d.ts","sourceRoot":"","sources":["../../../src/components/MathKeyboard/MathKeyboard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAWxE,OAAO,oBAAoB,CAAC;AAU5B;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,gDAAgD;IAChD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,sDAAsD;IACtD,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAOD;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4bpD,CAAC"}

package/dist/components/MathKeyboard/keyboardData.d.ts

@@ -0,0 +1,46 @@
+import { ButtonConfig, FunctionCategory } from '../../types';
+/**
+ * Left section: Variables, parentheses, etc.
+ * Layout:
+ * [x] [y] [a²] [aᵇ]
+ * [(] [)] [<]  [>]
+ * [|a|][,] [≤] [≥]
+ * [ABC][🔊][√] [π]
+ */
+export declare const defaultLeftSection: ButtonConfig[][];
+/**
+ * Middle section: Number pad + operators
+ * Layout:
+ * [7][8][9][÷]
+ * [4][5][6][×]
+ * [1][2][3][−]
+ * [0][.][=][+]
+ */
+export declare const defaultMiddleSection: ButtonConfig[][];
+/**
+ * Right section: Functions, navigation, actions
+ * Layout:
+ * [  functions  ]
+ * [  ←  ][  →  ]
+ * [   backspace  ]
+ * [    enter     ]
+ */
+export declare const defaultRightSection: ButtonConfig[][];
+/**
+ * ABC keyboard - QWERTY layout
+ * Row 1: q w e r t y u i o p
+ * Row 2: a s d f g h j k l θ
+ * Row 3: ⬆ z x c v b n m ⌫
+ * Row 4: 123 aᵦ !% [] {} ~ ,' ↵
+ */
+export declare const abcKeyboardRows: ButtonConfig[][];
+export declare const functionCategories: FunctionCategory[];
+/**
+ * Get uppercase/shifted version of ABC keyboard for shift mode
+ * This handles:
+ * - Letters become uppercase
+ * - aᵦ (subscript) becomes aᵇ (superscript)
+ * Dual-character buttons (!, %, etc.) are handled by blur/emphasis styling
+ */
+export declare function getUppercaseAbcKeyboard(): ButtonConfig[][];
+//# sourceMappingURL=keyboardData.d.ts.map

package/dist/components/MathKeyboard/keyboardData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboardData.d.ts","sourceRoot":"","sources":["../../../src/components/MathKeyboard/keyboardData.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAMlE;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB,EAAE,YAAY,EAAE,EAyB9C,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB,EAAE,YAAY,EAAE,EAyBhD,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,EAAE,YAAY,EAAE,EAc/C,CAAC;AAMF;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,EAAE,YAAY,EAAE,EAyG3C,CAAC;AAMF,eAAO,MAAM,kBAAkB,EAAE,gBAAgB,EAgMhD,CAAC;AAMF;;;;;;GAMG;AACH,wBAAgB,uBAAuB,IAAI,YAAY,EAAE,EAAE,CAyB1D"}

package/dist/components/MathProvider/MathProvider.d.ts

@@ -0,0 +1,56 @@
+import { default as React, ReactNode } from 'react';
+import { ThemeConfig } from '../../types';
+/**
+ * Props for the MathProvider component
+ */
+export interface MathProviderProps {
+    /** Child components */
+    children: ReactNode;
+    /** Theme configuration (light, dark, or custom) */
+    theme?: 'light' | 'dark' | ThemeConfig;
+    /** Global configuration options */
+    config?: {
+        /** Default keyboard mode */
+        defaultKeyboardMode?: 'basic' | 'calculus' | 'abc';
+        /** KaTeX rendering options */
+        katexOptions?: any;
+    };
+}
+/**
+ * Input registration callback type
+ */
+export type InputUpdateCallback = (latex: string) => void;
+/**
+ * Context value shape
+ */
+interface MathContextValue {
+    activeInputId: string | null;
+    setActiveInput: (id: string) => void;
+    insertAtCursor: (latex: string) => void;
+    registerInput: (id: string, updateCallback: InputUpdateCallback) => void;
+    unregisterInput: (id: string) => void;
+    theme: 'light' | 'dark' | ThemeConfig;
+}
+/**
+ * Hook to access the math context
+ * Optional - returns undefined if not within a provider
+ */
+export declare const useMathContext: () => MathContextValue | undefined;
+/**
+ * MathProvider - Context provider for Mathex components
+ *
+ * Manages global state and communication between MathInput and MathKeyboard.
+ * Components will work automatically even without explicit MathProvider wrapping.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <MathProvider theme="light">
+ *   <MathInput />
+ *   <MathKeyboard />
+ * </MathProvider>
+ * ```
+ */
+export declare const MathProvider: React.FC<MathProviderProps>;
+export {};
+//# sourceMappingURL=MathProvider.d.ts.map

package/dist/components/MathProvider/MathProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MathProvider.d.ts","sourceRoot":"","sources":["../../../src/components/MathProvider/MathProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA4D,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACxG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAU/C;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,uBAAuB;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,mDAAmD;IACnD,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,WAAW,CAAC;IACvC,mCAAmC;IACnC,MAAM,CAAC,EAAE;QACP,4BAA4B;QAC5B,mBAAmB,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,KAAK,CAAC;QACnD,8BAA8B;QAC9B,YAAY,CAAC,EAAE,GAAG,CAAC;KACpB,CAAC;CACH;AAED;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;AAE1D;;GAEG;AACH,UAAU,gBAAgB;IACxB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,cAAc,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACzE,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,WAAW,CAAC;CACvC;AAOD;;;GAGG;AACH,eAAO,MAAM,cAAc,oCAE1B,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA6FpD,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Mathex - A Desmos-like math equation editor component library for React
+ *
+ * @packageDocumentation
+ */
+export { MathInput } from './components/MathInput/MathInput';
+export { MathKeyboard } from './components/MathKeyboard/MathKeyboard';
+export { MathProvider, useMathContext } from './components/MathProvider/MathProvider';
+export type { MathInputProps } from './components/MathInput/MathInput';
+export type { MathKeyboardProps } from './components/MathKeyboard/MathKeyboard';
+export type { MathProviderProps } from './components/MathProvider/MathProvider';
+export type { KeyboardMode, ButtonConfig, FunctionCategory, FunctionConfig, ThemeConfig } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAGtF,YAAY,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AACvE,YAAY,EAAE,iBAAiB,EAAE,MAAM,wCAAwC,CAAC;AAChF,YAAY,EAAE,iBAAiB,EAAE,MAAM,wCAAwC,CAAC;AAChF,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC"}

package/dist/mathex.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),i=require("react"),j=(y,l,C)=>{},q=i.createContext(void 0),F=()=>i.useContext(q),K=({children:y,theme:l="light"})=>{const[C,R]=i.useState(null),h=i.useRef(null);h.current=C;const p=i.useRef(new Map),L=i.useCallback((d,o)=>{j("MathProvider","registerInput",{totalRegistered:p.current.size+1}),p.current.set(d,o)},[]),E=i.useCallback(d=>{j("MathProvider","unregisterInput",{totalRemaining:p.current.size-1}),p.current.delete(d),R(o=>o===d?null:o)},[]),m=i.useCallback(d=>{R(d)},[]),v=i.useCallback(d=>{const o=h.current;if(j("MathProvider","insertAtCursor called",{hasCallback:o?p.current.has(o):!1,registeredInputs:Array.from(p.current.keys())}),!o){console.warn("No active input to insert LaTeX into");return}const N=p.current.get(o);N&&N(d)},[]),T={activeInputId:C,setActiveInput:m,insertAtCursor:v,registerInput:L,unregisterInput:E,theme:l},f=typeof l=="string"?l:"custom";return j("MathProvider","rendering with contextValue",{registeredInputs:Array.from(p.current.keys())}),t.jsx(q.Provider,{value:T,children:t.jsx("div",{"data-theme":f,className:"mathex-provider",children:y})})};K.displayName="MathProvider";const A=(y,l,C)=>{},H=()=>typeof window<"u"&&window.MathQuill?window.MathQuill.getInterface(2):null,_=({value:y,defaultValue:l="",onChange:C,id:R,placeholder:h="Enter equation...",disabled:p=!1,className:L="",style:E,autoFocus:m=!1,readOnly:v=!1,onError:T})=>{const f=y!==void 0,[d,o]=i.useState(l),N=f?y:d,[O,s]=i.useState(!1),n=i.useRef(null),u=i.useRef(null),S=i.useMemo(()=>R||`math-input-${Math.random().toString(36).substr(2,9)}`,[R]),x=F(),k=i.useRef(x),M=i.useRef(S);i.useEffect(()=>{k.current=x,M.current=S},[x,S]),A("MathInput","render",{activeInputId:x?.activeInputId}),i.useEffect(()=>{if(!u.current||n.current)return;const g=H();if(!g){console.error("MathQuill is not loaded. Make sure to include MathQuill script in your HTML.");return}try{const I={spaceBehavesLikeTab:!0,leftRightIntoCmdGoes:"up",restrictMismatchedBrackets:!0,autoCommands:"pi theta sqrt sum prod int",autoOperatorNames:"sin cos tan sec csc cot sinh cosh tanh log ln",handlers:{edit:b=>{const w=b.latex();f||o(w),C?.(w)},enter:()=>{n.current?.blur()}}},e=g.MathField(u.current,I);n.current=e,e.latex(N);const a=u.current,r=()=>{const b=M.current,w=k.current;A("MathInput","focusin event fired",{inputId:b,hasContext:!!w}),s(!0),w?(A("MathInput","Setting active input from focusin",{inputId:b}),w.setActiveInput(b)):A("MathInput","WARNING: No mathContext available in focusin handler")},c=()=>{A("MathInput","focusout event fired",{inputId:M.current}),s(!1)};return a.addEventListener("focusin",r),a.addEventListener("focusout",c),m&&e.focus(),()=>{A("MathInput","cleanup - removing listeners",{inputId:S}),a.removeEventListener("focusin",r),a.removeEventListener("focusout",c),e.revert(),n.current=null}}catch(I){T&&I instanceof Error&&T(I),console.error("Failed to initialize MathQuill:",I)}},[]),i.useEffect(()=>{n.current&&f&&n.current.latex()!==y&&n.current.latex(y)},[y,f]);const B=i.useCallback(()=>{n.current&&!p&&!v&&(n.current.focus(),x&&x.setActiveInput(S))},[x,S,p,v]),U=i.useCallback(g=>{if(A("MathInput","handleKeyboardInsertion called",{hasMathField:!!n.current,inputId:M.current}),!!n.current)switch(g){case"BACKSPACE":n.current.keystroke("Backspace");return;case"ARROW_LEFT":n.current.keystroke("Left");return;case"ARROW_RIGHT":n.current.keystroke("Right");return;case"ENTER":n.current.blur();return;default:n.current.write(g),n.current.focus()}},[]);return i.useEffect(()=>{const g=k.current,I=M.current;if(g)return g.registerInput(I,U),()=>{g.unregisterInput(I)}},[]),i.useEffect(()=>{n.current&&u.current&&(p||v?(u.current.setAttribute("contenteditable","false"),u.current.style.pointerEvents="none",u.current.style.opacity="0.6"):(u.current.removeAttribute("contenteditable"),u.current.style.pointerEvents="",u.current.style.opacity=""))},[p,v]),t.jsx("div",{className:`mathex-input mathex-input--mathquill ${O?"mathex-input--focused":""} ${p?"mathex-input--disabled":""} ${L}`,style:E,onClick:B,"data-id":R,children:t.jsx("div",{ref:u,className:"mathex-mathquill-container","data-placeholder":N?void 0:h})})};_.displayName="MathInput";const $=[[{display:"x",latex:"x",type:"variable",style:"white"},{display:"y",latex:"y",type:"variable",style:"white"},{display:"a²",latex:"^{2}",type:"operator",style:"white"},{display:"aᵇ",latex:"^{}",type:"operator",style:"white"}],[{display:"(",latex:"(",type:"symbol",style:"white"},{display:")",latex:")",type:"symbol",style:"white"},{display:"<",latex:"<",type:"operator",style:"white"},{display:">",latex:">",type:"operator",style:"white"}],[{display:"|a|",latex:"||",type:"operator",style:"white"},{display:",",latex:",",type:"symbol",style:"white"},{display:"≤",latex:"\\leq ",type:"operator",style:"white"},{display:"≥",latex:"\\geq ",type:"operator",style:"white"}],[{display:"A B C",latex:"ABC_MODE",type:"action",style:"gray-light"},{display:"🔊",latex:"SPEAK",type:"action",style:"gray-light"},{display:"√",latex:"\\sqrt{}",type:"function",style:"white"},{display:"π",latex:"\\pi ",type:"symbol",style:"white"}]],G=[[{display:"7",latex:"7",type:"number",style:"gray-light"},{display:"8",latex:"8",type:"number",style:"gray-light"},{display:"9",latex:"9",type:"number",style:"gray-light"},{display:"÷",latex:"\\div ",type:"operator",style:"white"}],[{display:"4",latex:"4",type:"number",style:"gray-light"},{display:"5",latex:"5",type:"number",style:"gray-light"},{display:"6",latex:"6",type:"number",style:"gray-light"},{display:"×",latex:"\\times ",type:"operator",style:"white"}],[{display:"1",latex:"1",type:"number",style:"gray-light"},{display:"2",latex:"2",type:"number",style:"gray-light"},{display:"3",latex:"3",type:"number",style:"gray-light"},{display:"−",latex:"-",type:"operator",style:"white"}],[{display:"0",latex:"0",type:"number",style:"gray-light"},{display:".",latex:".",type:"number",style:"gray-light"},{display:"=",latex:"=",type:"operator",style:"gray-light"},{display:"+",latex:"+",type:"operator",style:"white"}]],Q=[[{display:"functions",latex:"FUNCTIONS",type:"action",style:"gray-light",size:"extra-wide"}],[{display:"←",latex:"ARROW_LEFT",type:"action",style:"gray-light"},{display:"→",latex:"ARROW_RIGHT",type:"action",style:"gray-light"}],[{display:"⌫",latex:"BACKSPACE",type:"action",style:"gray-light",size:"extra-wide"}],[{display:"↵",latex:"ENTER",type:"action",style:"blue",size:"extra-wide"}]],z=[[{display:"q",latex:"q",type:"letter",style:"white"},{display:"w",latex:"w",type:"letter",style:"white"},{display:"e",latex:"e",type:"letter",style:"white"},{display:"r",latex:"r",type:"letter",style:"white"},{display:"t",latex:"t",type:"letter",style:"white"},{display:"y",latex:"y",type:"letter",style:"white"},{display:"u",latex:"u",type:"letter",style:"white"},{display:"i",latex:"i",type:"letter",style:"white"},{display:"o",latex:"o",type:"letter",style:"white"},{display:"p",latex:"p",type:"letter",style:"white"}],[{display:"a",latex:"a",type:"letter",style:"white"},{display:"s",latex:"s",type:"letter",style:"white"},{display:"d",latex:"d",type:"letter",style:"white"},{display:"f",latex:"f",type:"letter",style:"white"},{display:"g",latex:"g",type:"letter",style:"white"},{display:"h",latex:"h",type:"letter",style:"white"},{display:"j",latex:"j",type:"letter",style:"white"},{display:"k",latex:"k",type:"letter",style:"white"},{display:"l",latex:"l",type:"letter",style:"white"},{display:"θ",latex:"\\theta ",type:"symbol",style:"white"}],[{display:"⬆",latex:"SHIFT",type:"action",style:"gray-light",size:"wide"},{display:"z",latex:"z",type:"letter",style:"white"},{display:"x",latex:"x",type:"letter",style:"white"},{display:"c",latex:"c",type:"letter",style:"white"},{display:"v",latex:"v",type:"letter",style:"white"},{display:"b",latex:"b",type:"letter",style:"white"},{display:"n",latex:"n",type:"letter",style:"white"},{display:"m",latex:"m",type:"letter",style:"white"},{display:"⌫",latex:"BACKSPACE",type:"action",style:"gray-light",size:"wide"}],[{display:"1 2 3",latex:"123_MODE",type:"action",style:"gray-light",size:"wide"},{display:"aᵦ",latex:"SUBSCRIPT",type:"action",style:"white"},{display:"! %",latex:"DUAL_EXCLAIM_PERCENT",type:"symbol",style:"white",dualChar:{primary:"!",primaryLatex:"!",secondary:"%",secondaryLatex:"%"}},{display:"[ ]",latex:"DUAL_BRACKETS",type:"symbol",style:"white",dualChar:{primary:"[",primaryLatex:"[",secondary:"]",secondaryLatex:"]"}},{display:"{ }",latex:"DUAL_BRACES",type:"symbol",style:"white",dualChar:{primary:"{",primaryLatex:"\\{",secondary:"}",secondaryLatex:"\\}"}},{display:"~ :",latex:"DUAL_TILDE_COLON",type:"symbol",style:"white",dualChar:{primary:"~",primaryLatex:"\\sim ",secondary:":",secondaryLatex:":"}},{display:", '",latex:"DUAL_COMMA_QUOTE",type:"symbol",style:"white",dualChar:{primary:",",primaryLatex:",",secondary:"'",secondaryLatex:"'"}},{display:"↵",latex:"ENTER",type:"action",style:"blue",size:"wide"}]],W=[{id:"trig",name:"TRIG FUNCTIONS",functions:[{display:"sin",latex:"\\sin(",description:"Sine function"},{display:"cos",latex:"\\cos(",description:"Cosine function"},{display:"tan",latex:"\\tan(",description:"Tangent function"},{display:"csc",latex:"\\csc(",description:"Cosecant function"},{display:"sec",latex:"\\sec(",description:"Secant function"},{display:"cot",latex:"\\cot(",description:"Cotangent function"}]},{id:"inverse-trig",name:"INVERSE TRIG FUNCTIONS",functions:[{display:"sin⁻¹",latex:"\\sin^{-1}(",description:"Inverse sine"},{display:"cos⁻¹",latex:"\\cos^{-1}(",description:"Inverse cosine"},{display:"tan⁻¹",latex:"\\tan^{-1}(",description:"Inverse tangent"},{display:"csc⁻¹",latex:"\\csc^{-1}(",description:"Inverse cosecant"},{display:"sec⁻¹",latex:"\\sec^{-1}(",description:"Inverse secant"},{display:"cot⁻¹",latex:"\\cot^{-1}(",description:"Inverse cotangent"}]},{id:"statistics",name:"STATISTICS",functions:[{display:"mean",latex:"\\text{mean}(",description:"Mean/average"},{display:"median",latex:"\\text{median}(",description:"Median value"},{display:"min",latex:"\\min(",description:"Minimum value"},{display:"max",latex:"\\max(",description:"Maximum value"},{display:"quartile",latex:"\\text{quartile}(",description:"Quartile"},{display:"quantile",latex:"\\text{quantile}(",description:"Quantile"},{display:"stdev",latex:"\\text{stdev}(",description:"Standard deviation"},{display:"stdevp",latex:"\\text{stdevp}(",description:"Population std dev"},{display:"var",latex:"\\text{var}(",description:"Variance"},{display:"varp",latex:"\\text{varp}(",description:"Population variance"},{display:"cov",latex:"\\text{cov}(",description:"Covariance"},{display:"covp",latex:"\\text{covp}(",description:"Population covariance"},{display:"mad",latex:"\\text{mad}(",description:"Mean absolute deviation"},{display:"corr",latex:"\\text{corr}(",description:"Correlation"},{display:"spearman",latex:"\\text{spearman}(",description:"Spearman correlation"},{display:"stats",latex:"\\text{stats}(",description:"Statistics summary"},{display:"count",latex:"\\text{count}(",description:"Count"},{display:"total",latex:"\\text{total}(",description:"Total/sum"}]},{id:"list-operations",name:"LIST OPERATIONS",functions:[{display:"repeat",latex:"\\text{repeat}(",description:"Repeat elements"},{display:"join",latex:"\\text{join}(",description:"Join lists"},{display:"sort",latex:"\\text{sort}(",description:"Sort list"},{display:"shuffle",latex:"\\text{shuffle}(",description:"Shuffle list"},{display:"unique",latex:"\\text{unique}(",description:"Unique elements"},{display:"for",latex:"\\text{for}",description:"For loop"}]},{id:"visualizations",name:"VISUALIZATIONS",functions:[{display:"histogram",latex:"\\text{histogram}(",description:"Histogram"},{display:"dotplot",latex:"\\text{dotplot}(",description:"Dot plot"},{display:"boxplot",latex:"\\text{boxplot}(",description:"Box plot"}]},{id:"distributions",name:"PROBABILITY DISTRIBUTIONS",functions:[{display:"normaldist",latex:"\\text{normaldist}(",description:"Normal distribution"},{display:"tdist",latex:"\\text{tdist}(",description:"T distribution"},{display:"chisqdist",latex:"\\text{chisqdist}(",description:"Chi-squared distribution"},{display:"uniformdist",latex:"\\text{uniformdist}(",description:"Uniform distribution"},{display:"binomialdist",latex:"\\text{binomialdist}(",description:"Binomial distribution"},{display:"poissondist",latex:"\\text{poissondist}(",description:"Poisson distribution"},{display:"geodist",latex:"\\text{geodist}(",description:"Geometric distribution"},{display:"pdf",latex:"\\text{pdf}(",description:"Probability density function"},{display:"cdf",latex:"\\text{cdf}(",description:"Cumulative distribution function"},{display:"inversecdf",latex:"\\text{inversecdf}(",description:"Inverse CDF"},{display:"random",latex:"\\text{random}(",description:"Random number"}]},{id:"inference",name:"INFERENCE",functions:[{display:"ztest",latex:"\\text{ztest}(",description:"Z-test"},{display:"ttest",latex:"\\text{ttest}(",description:"T-test"},{display:"zproptest",latex:"\\text{zproptest}(",description:"Z proportion test"},{display:"chisqtest",latex:"\\text{chisqtest}(",description:"Chi-squared test"},{display:"chisqgof",latex:"\\text{chisqgof}(",description:"Chi-squared goodness of fit"},{display:"null",latex:"\\text{null}(",description:"Null hypothesis"},{display:"p",latex:"\\text{p}(",description:"P-value"},{display:"pleft",latex:"\\text{pleft}(",description:"Left p-value"},{display:"pright",latex:"\\text{pright}(",description:"Right p-value"},{display:"score",latex:"\\text{score}(",description:"Test score"},{display:"dof",latex:"\\text{dof}(",description:"Degrees of freedom"},{display:"stderr",latex:"\\text{stderr}(",description:"Standard error"},{display:"conf",latex:"\\text{conf}(",description:"Confidence interval"},{display:"lower",latex:"\\text{lower}(",description:"Lower bound"},{display:"upper",latex:"\\text{upper}(",description:"Upper bound"},{display:"estimate",latex:"\\text{estimate}(",description:"Point estimate"}]},{id:"calculus",name:"CALCULUS",functions:[{display:"exp",latex:"e^{",description:"Exponential"},{display:"ln",latex:"\\ln(",description:"Natural logarithm"},{display:"log",latex:"\\log(",description:"Logarithm base 10"},{display:"logₐ",latex:"\\log_{}(",description:"Logarithm base a"},{display:"d/dx",latex:"\\frac{d}{dx}",description:"Derivative"},{display:"f'",latex:"'",description:"Prime notation"},{display:"∫",latex:"\\int_{}^{}",description:"Integral"},{display:"Σ",latex:"\\sum_{}^{}",description:"Summation"},{display:"Π",latex:"\\prod_{}^{}",description:"Product"}]},{id:"hyperbolic-trig",name:"HYPERBOLIC TRIG FUNCTIONS",functions:[{display:"sinh",latex:"\\sinh(",description:"Hyperbolic sine"},{display:"cosh",latex:"\\cosh(",description:"Hyperbolic cosine"},{display:"tanh",latex:"\\tanh(",description:"Hyperbolic tangent"},{display:"csch",latex:"\\text{csch}(",description:"Hyperbolic cosecant"},{display:"sech",latex:"\\text{sech}(",description:"Hyperbolic secant"},{display:"coth",latex:"\\coth(",description:"Hyperbolic cotangent"}]},{id:"geometry",name:"GEOMETRY",functions:[{display:"polygon",latex:"\\text{polygon}(",description:"Polygon"},{display:"distance",latex:"\\text{distance}(",description:"Distance"},{display:"midpoint",latex:"\\text{midpoint}(",description:"Midpoint"}]},{id:"colors",name:"CUSTOM COLORS",functions:[{display:"rgb",latex:"\\text{rgb}(",description:"RGB color"},{display:"hsv",latex:"\\text{hsv}(",description:"HSV color"},{display:"okhsv",latex:"\\text{okhsv}(",description:"OKHSV color"},{display:"oklab",latex:"\\text{oklab}(",description:"OKLAB color"},{display:"oklch",latex:"\\text{oklch}(",description:"OKLCH color"}]},{id:"sound",name:"SOUND",functions:[{display:"tone",latex:"\\text{tone}(",description:"Generate tone"}]},{id:"number-theory",name:"NUMBER THEORY",functions:[{display:"lcm",latex:"\\text{lcm}(",description:"Least common multiple"},{display:"gcd",latex:"\\gcd(",description:"Greatest common divisor"},{display:"mod",latex:"\\mod ",description:"Modulo"},{display:"ceil",latex:"\\lceil ",description:"Ceiling"},{display:"floor",latex:"\\lfloor ",description:"Floor"},{display:"round",latex:"\\text{round}(",description:"Round"},{display:"sign",latex:"\\text{sign}(",description:"Sign function"},{display:"ⁿ√",latex:"\\sqrt[]{}",description:"Nth root"},{display:"nPr",latex:"P(",description:"Permutation"},{display:"nCr",latex:"\\binom{}{}",description:"Combination"}]}];function V(){return z.map(y=>y.map(l=>l.type==="letter"?{...l,display:l.display.toUpperCase(),latex:l.latex.toUpperCase()}:l.latex==="SUBSCRIPT"?{...l,display:"aᵇ",latex:"SUPERSCRIPT"}:l))}const P=(y,l,C)=>{},D=({defaultVisible:y=!1,onVisibilityChange:l,className:C="",style:R})=>{const[h,p]=i.useState(y),[L,E]=i.useState("default"),[m,v]=i.useState(!1),[T,f]=i.useState(!1),[d,o]=i.useState("normal"),N=i.useRef(null),O=i.useRef(null),s=F(),n=i.useCallback(()=>{p(e=>{const a=!e;return l?.(a),a||f(!1),a})},[l]),u=i.useCallback(e=>{if(P("MathKeyboard","handleButtonClick",{latex:e.latex,type:e.type,activeInputId:s?.activeInputId}),e.dualChar){const{primaryLatex:a,secondaryLatex:r}=e.dualChar,c=m?r:a;if(c==="SUBSCRIPT"){o("subscript");return}if(c==="SUPERSCRIPT"){o("superscript");return}if(d!=="normal"){const b=d==="subscript"?`_{${c}}`:`^{${c}}`;s?.insertAtCursor(b),o("normal");return}s&&s.insertAtCursor(c);return}switch(e.latex){case"ABC_MODE":E("abc"),f(!1);return;case"123_MODE":E("default"),v(!1),o("normal");return;case"SHIFT":v(a=>!a);return;case"SUBSCRIPT":o("subscript");return;case"SUPERSCRIPT":o("superscript");return;case"FUNCTIONS":f(a=>!a);return;case"SPEAK":return;case"ARROW_LEFT":s&&s.insertAtCursor("ARROW_LEFT");return;case"ARROW_RIGHT":s&&s.insertAtCursor("ARROW_RIGHT");return;case"BACKSPACE":s&&s.insertAtCursor("BACKSPACE");return;case"ENTER":s&&s.insertAtCursor("ENTER");return}if(d!=="normal"&&(e.type==="letter"||e.type==="variable")){const a=d==="subscript"?`_{${e.latex}}`:`^{${e.latex}}`;s?.insertAtCursor(a),o("normal"),m&&v(!1);return}s?(P("MathKeyboard","inserting standard latex via context",{latex:e.latex}),s.insertAtCursor(e.latex)):P("MathKeyboard","WARNING: No mathContext for standard insertion",{latex:e.latex}),e.type==="letter"&&m&&v(!1)},[s,m,d]),S=i.useCallback(e=>{P("MathKeyboard","handleFunctionClick",{activeInputId:s?.activeInputId}),s&&s.insertAtCursor(e),f(!1)},[s]);i.useEffect(()=>{const e=a=>{if(!h)return;const r=a.target;N.current?.contains(r)||r.closest(".mathex-input")||(p(!1),f(!1),l?.(!1))};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[h,l]);const x=i.useCallback(e=>{e.preventDefault()},[]),k=(e,a)=>{const r=["dcg-keypad-btn-container",e.size==="wide"&&"dcg-wide",e.size==="extra-wide"&&"dcg-extra-wide"].filter(Boolean).join(" "),c=["dcg-keypad-btn",e.style==="blue"&&"dcg-btn-blue",e.style==="gray-light"&&"dcg-btn-light-gray",e.style==="white"&&"dcg-btn-white",e.latex==="SHIFT"&&m&&"dcg-active",e.latex==="SUBSCRIPT"&&d==="subscript"&&"dcg-active",e.latex==="SUPERSCRIPT"&&d==="superscript"&&"dcg-active"].filter(Boolean).join(" ");if(e.dualChar){const{primary:b,secondary:w}=e.dualChar;return t.jsx("div",{className:r,children:t.jsx("button",{className:c,onClick:()=>u(e),onMouseDown:x,onTouchStart:x,type:"button",children:t.jsxs("span",{className:"dcg-keypad-btn-content dcg-dual-char",children:[t.jsx("span",{className:`dcg-dual-primary ${m?"dcg-blurred":"dcg-clear"}`,children:b}),t.jsx("span",{className:`dcg-dual-secondary ${m?"dcg-clear":"dcg-blurred"}`,children:w})]})})},a)}return t.jsx("div",{className:r,children:t.jsx("button",{className:c,onClick:()=>u(e),onMouseDown:x,onTouchStart:x,type:"button",children:t.jsx("span",{className:"dcg-keypad-btn-content",children:e.display})})},a)},M=()=>t.jsx("div",{className:"dcg-basic-keypad dcg-default-mode",children:t.jsxs("div",{className:"dcg-audio-keypad-container",children:[t.jsx("div",{className:"dcg-audio-keypad-column dcg-left-section",children:$.map((e,a)=>t.jsx("div",{className:"dcg-keypad-row",children:e.map((r,c)=>k(r,c))},a))}),t.jsx("div",{className:"dcg-audio-keypad-column dcg-middle-section",children:G.map((e,a)=>t.jsx("div",{className:"dcg-keypad-row",children:e.map((r,c)=>k(r,c))},a))}),t.jsx("div",{className:"dcg-audio-keypad-column dcg-right-section",children:Q.map((e,a)=>t.jsx("div",{className:"dcg-keypad-row",children:e.map((r,c)=>k(r,c))},a))})]})}),B=()=>{const e=m?V():z;return t.jsx("div",{className:"dcg-basic-keypad dcg-abc-mode",children:e.map((a,r)=>t.jsx("div",{className:`dcg-keypad-row dcg-abc-row-${r}`,children:a.map((c,b)=>k(c,b))},r))})},U=()=>t.jsx("div",{ref:O,className:`dcg-functions-popover ${T?"dcg-visible":""}`,children:t.jsx("div",{className:"dcg-popover-interior",children:W.map(e=>t.jsxs("div",{className:"dcg-keypad-keys-section",children:[t.jsx("div",{className:"dcg-section-heading",children:e.name}),t.jsx("div",{className:"dcg-keypad-keys-buttons",children:e.functions.map((a,r)=>t.jsx("div",{className:"dcg-keypad-btn-container dcg-function-btn",children:t.jsx("button",{className:"dcg-keypad-btn dcg-btn-white",onClick:()=>S(a.latex),onMouseDown:x,onTouchStart:x,title:a.description,type:"button",children:t.jsx("span",{className:"dcg-keypad-btn-content",children:a.display})})},r))})]},e.id))})}),g=()=>t.jsx("div",{className:"dcg-show-keypad-container",children:t.jsxs("button",{className:"dcg-show-keypad dcg-btn-light-gray",onClick:n,type:"button","aria-label":h?"Hide keyboard":"Show keyboard",children:[t.jsx("span",{className:"dcg-icon-keyboard",children:"⌨"}),t.jsx("span",{className:`dcg-icon-caret ${h?"dcg-icon-caret-down":"dcg-icon-caret-up"}`,children:h?"▼":"▲"})]})}),I=()=>t.jsx("div",{className:"dcg-minimize-keypad-container",children:t.jsxs("button",{className:"dcg-minimize-keypad dcg-btn-light-gray",onClick:n,type:"button","aria-label":"Hide keyboard",children:[t.jsx("span",{className:"dcg-icon-keyboard",children:"⌨"}),t.jsx("span",{className:"dcg-icon-caret dcg-icon-caret-down",children:"▼"})]})});return t.jsxs("div",{ref:N,className:`dcg-keypad ${h?"dcg-visible":"dcg-hidden"} ${C}`,style:R,children:[!h&&g(),h&&t.jsxs("div",{className:"dcg-keys-container",children:[I(),t.jsx("div",{className:"dcg-keys-background",children:t.jsx("div",{className:"dcg-keys",children:L==="default"?M():B()})}),U()]})]})};D.displayName="MathKeyboard";exports.MathInput=_;exports.MathKeyboard=D;exports.MathProvider=K;exports.useMathContext=F;
+//# sourceMappingURL=mathex.cjs.map