# @smst/edu-tools

> A comprehensive collection of educational tools and utilities as reusable React components

[![npm version](https://img.shields.io/npm/v/@smst/edu-tools.svg)](https://www.npmjs.com/package/@smst/edu-tools)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

A modern, lightweight, and fully-featured library of educational tools built with React. Perfect for building educational platforms, learning management systems, or any application that needs interactive educational components.

## ✨ Features

- 🎨 **15 Ready-to-Use Tools** - From calculators to equation editors
- 🔌 **Zero Configuration** - Import and use immediately
- 📦 **Tree-Shakeable** - Only bundle what you use
- 🎯 **TypeScript Support** - Full type definitions included
- 🎭 **Modern UI** - Beautiful, responsive components with Tailwind CSS
- ♿ **Accessible** - Built with accessibility in mind
- 🪟 **Draggable Windows** - Optional window management system

## 📦 Installation

```bash
npm install @smst/edu-tools
```

### Requirements

**Peer Dependencies** (you need to install these):

```bash
npm install react react-dom
```

**Bundled Dependencies** (installed automatically, no action needed):

- ✅ `framer-motion` - Animations
- ✅ `zustand` - State management
- ✅ `react-rnd` - Drag and resize
- ✅ `lucide-react` - Icons
- ✅ `mathlive` - Equation editor
- ✅ And more...

That's it! Everything else is included.

## 🚀 Quick Start

### For Next.js (Recommended)

Create a client component:

```tsx
"use client";

import { ToolsDock } from "@smst/edu-tools";
import "@smst/edu-tools/styles";

export default function App() {
  return (
    <div>
      <h1>My Educational App</h1>
      <ToolsDock />
    </div>
  );
}
```

### For React (Vite, CRA, etc.)

```tsx
import { ToolsDock } from "@smst/edu-tools";
import "@smst/edu-tools/styles";

function App() {
  return (
    <div>
      <h1>My Educational App</h1>
      <ToolsDock />
    </div>
  );
}
```

**What you get:**

- ✅ All 15 educational tools
- ✅ Draggable, resizable windows
- ✅ Bottom dock with tool buttons
- ✅ Theme toggle
- ✅ Beautiful UI with proper styling
- ✅ Zero configuration required

## ⚙️ Configuration (Optional)

`ToolsDock` works out of the box. When you need control, pass props to choose tools, override labels/window settings, or set theme behavior.

### Props

- **tools?**: `ToolId[]` — choose and order tools to display
- **overrides?**: `Record<ToolId, { label?: string; window?: Partial<CreateWindowParams> }>`
- **theme?**: `{ initial?: 'light' | 'dark' | 'system'; persist?: boolean }`

Supported `ToolId` values: `"setsquare" | "tts" | "todo" | "calculator" | "periodic" | "ruler" | "protractor" | "equation" | "magnifier" | "geogebra" | "dictionary" | "browser" | "context7" | "askai" | "annotator"`.

### Example: pick tools and order

```tsx
import { ToolsDock } from "@smst/edu-tools";
import "@smst/edu-tools/styles";

export default function App() {
  return <ToolsDock tools={["equation", "calculator", "ruler", "annotator"]} />;
}
```

### Example: override labels and window settings

```tsx
<ToolsDock
  tools={["equation", "periodic", "ruler", "tts"]}
  overrides={{
    equation: {
      label: "Math",
      window: {
        initialBounds: { width: 820, height: 540, x: 120, y: 120 },
        minWidth: 800,
        minHeight: 520,
      },
    },
    ruler: {
      label: "Measure",
      window: { isFrameless: true, isResizable: false },
    },
  }}
/>
```

### Example: theme initialization and persistence

```tsx
<ToolsDock
  theme={{
    initial: "system", // 'light' | 'dark' | 'system'
    persist: true, // save last choice in localStorage (default: true)
    showToggle: true, // show/hide theme button in dock (default: true)
  }}
/>
```

### Example: combine everything

```tsx
<ToolsDock
  tools={["equation", "calculator", "periodic", "dictionary"]}
  theme={{ initial: "dark", persist: false }}
  overrides={{
    dictionary: {
      label: "Lexicon",
      window: { initialBounds: { width: 560, height: 520, x: 160, y: 160 } },
    },
  }}
/>
```

## 🧰 Available Tools

### Math & Science

- **Calculator** - Full-featured calculator with keyboard support
- **EquationEditor** - LaTeX-based mathematical equation editor powered by MathLive
- **PeriodicTable** - Interactive periodic table of elements
- **Protractor** - Rotatable protractor for angle measurement
- **Ruler** - Interactive ruler with inches and centimeters
- **SetSquare** - Drawing tool for geometry
- **GeoGebra** - Interactive geometry and graphing tool

### Productivity

- **Todo** - Task management component
- **Magnifier** - Text magnification tool for accessibility
- **TTSReader** - Text-to-speech functionality
- **Browser** - Embedded browser component
- **Dictionary** - Word lookup and definitions
- **Annotator** - Text annotation and highlighting tool

### AI & Learning

- **AskAI** - AI assistant interface for answering questions
- **Context7** - Integrated documentation browser

## 💡 How It Works

The `ToolsDock` automatically includes:

1. **Bottom Dock Bar** - Shows all tool icons, click to open any tool
2. **Draggable Windows** - Each tool opens in a resizable, movable window
3. **Window Management** - Close, minimize, bring to front automatically handled
4. **Theme Toggle** - Built-in dark/light mode switcher
5. **Responsive UI** - Works on all screen sizes

That's it! No configuration, no props, no setup required.

## 🎨 Styling

The styles are included when you import `@smst/edu-tools/styles`. The package includes:

- **Professional UI** - Clean, modern design
- **Dark/Light themes** - Built-in theme switcher
- **Responsive layout** - Works on desktop, tablet, and mobile
- **Custom CSS** - You can override styles with your own CSS if needed

All styling is self-contained - no conflicts with your existing styles.

## 🔧 TypeScript Support

Full TypeScript definitions are included:

```tsx
import { ToolsDock } from "@smst/edu-tools";
// Types are automatically available
```

## 🌐 Browser Support

- Chrome/Edge (latest 2 versions)
- Firefox (latest 2 versions)
- Safari (latest 2 versions)
- Mobile browsers (iOS Safari, Chrome Mobile)

## 🤝 Contributing

We welcome contributions! See [DEVELOPMENT.md](./DEVELOPMENT.md) for developer documentation.

## 📄 License

MIT © SMST

## 🔗 Links

- [NPM Package](https://www.npmjs.com/package/@smst/edu-tools)
- [GitHub Repository](https://github.com/smst/edu-tools)
- [Report Issues](https://github.com/smst/edu-tools/issues)
- [Developer Guide](./DEVELOPMENT.md)

## 💬 Support

- 🐛 [Report a Bug](https://github.com/smst/edu-tools/issues)
- 💡 [Request a Feature](https://github.com/smst/edu-tools/issues)
- 📖 [Documentation](./DEVELOPMENT.md)

---

<div align="center">

**Made with ❤️ for educators and learners**

⭐ Star us on [GitHub](https://github.com/smst/edu-tools) | 📦 Install from [NPM](https://www.npmjs.com/package/@smst/edu-tools)

</div>