open-index/open-npm huggingface dataset:
npm package: @shawyu/actionsheet
Description: actionsheet
Author: shawyu
Latest version: 1.0.8

# @shawyu/actionsheet

actionsheet.js 是一款轻量的`JavaScript`和`Node.js`插件。不依赖任何第三方库。
是一款响应式插件，在移动端和PC端都有很好的展示效果！

zh_CN [简体中文](README.md)

en [English](README_en.md)

![Actionsheet](actionsheet.png)

[Github地址](https://github.com/shawyuu/js-plugin/tree/main/actionSheet)

```
https://github.com/shawyuu/js-plugin/tree/main/actionSheet
```

## 开始使用

### npm安装

```sh
npm install @shawyu/actionsheet
```

### 普通引入

```
<script src="../actionsheet/index.js"></script>
```

### 使用

```js
import ActionSheet from '@shawyu/actionsheet'

ActionSheet.show({
	title: 'ActionSheet Title',
	itemList: ['A', 'B', 'C'],
	success: (res) => {
		console.log(res)
	},
	fail: (err) => {
		console.log(err)
	}
})
```

所有属性设置

```js
ActionSheet.show({
	title: 'ActionSheet Title',/*标题名称*/
	size:16,/*标题字体大小*/
	bold:true, /*标题加粗*/
	align:"center", /*center、left,当网格为false时生效*/
	closeText:"取消",
	grid:false,
	itemList: ['A', 'B', 'C'],
	itemColor:'#f00',
	itemSize:15, /*当网格为false时生效*/
	success: (res) => {
		console.log(res)
	},
	fail: (err) => {
		console.log(err)
	}
})
```

数组中的项目可以混合使用。您可以将特定项目单独设置为对象。如果对象包含“color”或“font”属性，则当前项目的“color”和“font”将根据对象的设置进行设置，优先级高于“itemColor”和“itemSize”。

```js
ActionSheet.show({
	itemList: [{name:'A',desc:'this is A',color:'#0f0',size:16}, 'B', 'C'],
	itemColor:'#f00', /* 第一项的此值将无效，其颜色将显示为“#0f0”。 */
	itemSize:15, /* 第一个项目的值将无效，其字体大小将显示为16px。 */
	success: (res) => {
		console.log(res)
	},
	fail: (err) => {
		console.log(err)
	}
})
```

### 所有属性

|属性|类型|默认值|必需|描述|
|:-:|:-:|:-:|:-:|:-:|
|title|`string`| `""` | `NO` |ActionSheet标题名称|
|size|`string\|number`| `13` | `NO` |标题的字体大小.|
|bold|`boolean`| `false` | `NO` | 确定标题的字体大小是否为粗体. |
|grid|`boolean`| `false` | `NO` | ActionSheet是否展示为网格样式.)|
|align|`string`| `center` | `NO` | itemList的对齐方法。当网格为false时生效，可能的值：`center`、`left`）|
|itemList|`Array.<string\|number\|object>`| `[]` |`YES` | ActionSheet项目`Array.<object> object{name:string,desc:string,color:string,size:string|number,icon:string}`. 当网格为false时 `desc`无效|
|itemColor|`string`| `#333` |`NO` | 所有itemList文本标题(`name`)的字体颜色，优先级低于itemList（`Array.<object>`的`color`）|
|itemSize|`string\|number`| `17` | `NO` | 所有itemList文本标题(`name`)的字体大小，当网格为false时生效。优先级低于itemList（`Array.<object>`的`size`）|
|closeText|`string`| `取消` | `NO` | 取消文本 |
|success|`function`| | `NO` |点击列表项后的回调函数 |
|fail|`function`|  | `NO` |点击取消或遮罩后的回调函数 |

### itemList 说明

|类型|说明|举例|
|:-:|:-:|:-:|
|`Array.<string>`|`string`| ['A','B','C'] |
|`Array.<number>`|`number`| [1,2,3] |
|`Array.<object>`|`{name:'',desc:'',color:'',size:'',icon:''}`| [{name:'A',desc:'this is A',color:'#f00',size:16,icon:''}] |

### 版本日志

>
> 1.0.2  修复初始化重复样式\
> 1.0.3  添加网格样式、取消文本配置和文本对齐方式\
> 1.0.5  修复文档问题\
> 1.0.6  修复已知问题\
> 1.0.7  优化
>
npm package: @shawyu/contextmenu
Description: contextmenu
Author: shawyu
Latest version: 1.1.2

# @shawyu/contextmenu

contextmenu.js 是一款轻量的`JavaScript`和`Node.js`插件。不依赖任何第三方库。专门用于Web应用中的右键菜单功能。ContextMenu不需要将其自身绑定到触发对象上，这使得它非常灵活，可以随时注入和删除触发器，而不必重新初始化或更新菜单。

[Github地址](https://github.com/shawyuu/js-plugin/tree/main/contextmenu)

```
https://github.com/shawyuu/js-plugin/tree/main/contextmenu
```

## 开始使用

### npm安装

```sh
npm install @shawyu/contextmenu
```

### script引入

```
<script src="../contextmenu/index.js"></script>
```

### import引入

```js
import Contextmenu from '@shawyu/contextmenu'
```

### 使用一

```js
Contextmenu.init({
    target:"selector", /* 支持类名和id选择器，类名最好唯一，多个相同类名只获取第一个，在init方法中为必填参数 */
	menu:["关闭全部","关闭当前","关闭其他","关闭右侧"], /* 不支持对象数组 */
	success:(index)=>{
		console.log('序号',index)
	}
})
```

### 使用二
```vue
<div>
    <div oncontextmenu="handle(window.event)">菜单一</div>
    <div oncontextmenu="handle(window.event)">菜单二</div>
</div>
```
```js
function handle(e){
    e.preventDefault(); //e为当前事件对象
    e.stopPropagation();
    let x = e.pageX; // 鼠标点击的位置
    let y = e.pageY;
    Contextmenu.show({
        pointX:x,
        pointY:y,
        menu:["关闭全部","关闭当前","关闭其他","关闭右侧"],
        success:(index)=>{
            console.log('序号',index)
        }
    })
}
```

### 所有属性

| 属性           | 类型                       | 默认值  | 必需    | 描述            |
|--------------|--------------------------|------|-------|---------------|
| menu         | `Array.<string\|number>` | `[]` | `YES` | 菜单列表          |
| target       | `string`                 |      | `NO`  | 选择器           |
| pointX       | `number`                 |      | `NO`  | 鼠标箭头相对屏幕的x坐标  |
| pointY       | `number`                 |      | `NO`  | 鼠标箭头相对屏幕的y坐标  |
| ~~callback~~ | `function`               |      | `NO`  | 菜单点击回调方法      |
| success      | `function`               |      | `NO`  | 右键成功点击后的的回调函数 |

### 版本日志

>
> 1.0.0  
>   新版本
> 
> 1.1.0  
>     
>   废弃callback\
>   新增target属性  selector改为 target获取\
>   新增pointX和pointY 必需同时存在时生效
>
> 1.1.0  
>     
>   不再需要new Contextmenu()来创建实例，直接引用即可使用，单例。
>
npm package: @shawyu/image-preview
Description: image-preview
Author: shawyu
Latest version: 1.0.4

# @shawyu/image-preview

imagePreview是一个轻量级、无依赖的JavaScript插件，可以网页中实现图片预览功能，快速查看图片的大图，并提供了一些基本的交互功能，如放大、缩小、旋转等。

[Github地址](https://github.com/shawyuu/js-plugin/tree/main/imagePreview)

```
https://github.com/shawyuu/js-plugin/tree/main/imagePreview
```

## Getting started

### Install

```sh
npm install @shawyu/image-preview
```

### In browser

```
<script src="../imagePreview/index.js"></script>
```

### Usage

```js
import ImagePreview from '@shawyu/image-preview'

/*单图预览*/
ImagePreview.show({
	src:"图片路径",
	success:()=>{},
	fail:()=>{}
})

/*多图预览*/
ImagePreview.show({
	urls:["图片路径1","图片路径2"]
})

ImagePreview.show({
	src:"图片路径1",
	urls:["图片路径1","图片路径2"]
})
```

### All Props

|属性|类型|默认值|必需|描述|
|:-:|:-:|:-:|:-:|:-:|
|src|`string`| `""` | `NO` |要预览的图片路径，多图预览非必需(或为urls其中一张路径)，单图预览必需|
|urls|`Array<string>`| `[]` | `NO` |多图预览时(必填)的图片路径列表|
|success|`function`| | `NO` |图片加载成功后的回调函数 |
|fail|`function`|  | `NO` |图片加载失败后的回调函数 |

### Logs

>
> 1.0.0 version\
> 1.0.2 Adapt to mobile devices
>
npm package: @shawyu/modal
Description: modal
Author: shawyu
Latest version: 1.0.2

# @shawyu/modal

modal.js 是一款轻量级用来显示模态对话框的插件。

[Github地址](https://github.com/shawyuu/js-plugin/tree/main/modal)

```
https://github.com/shawyuu/js-plugin/tree/main/modal
```

## Getting started

### Install

```sh
npm install @shawyu/modal
```

### In browser

```
<script src="../modal/index.js"></script>
```

### Usage

```js
import Modal from '@shawyu/modal'

Modal.show({
	title: '提示',
	content: '这是一个模态弹窗',
	confirm:()=> {
		console.log('用户点击确定')
	},
	cancel:()=> {
		console.log('用户点击取消')
	}
})
```

### All Props

|属性|       类型       |默认值|必需|描述|
|:-:|:----------------:|:-:|:-:|:-:|
|title|     `string`     | `` | `NO` | 提示的标题  |
|content|     `string`     | `` | `YES` |提示的内容，可以是普通字符串，也可以是HTML字符串 |
|showCancel|     `boolean`     | `true` | `NO` | 是否显示取消按钮 |
|cancelText|     `string`     | `取消` |`NO` | 取消按钮的文字 |
|cancelColor|     `string`     | `#f5f6f7` |`NO` | 取消按钮的背景颜色，显示颜色的字符串|
|showConfirm|     `boolean`     | `true` | `NO` | 是否显示确认按钮 |
|confirmText|     `string`     | `确定` |`NO` | 确认按钮的文字 |
|confirmColor|     `string`     | `#3565ee` |`NO` | 确认按钮的背景颜色，显示颜色的字符串 |
|maskColor|     `string`     | `rgba(0,0,0,0.5)` |`NO` | 遮罩的背景颜色，显示颜色的字符串 |
|maskClosable|     `boolean`     | `true` | `NO` | 是否可以点击遮罩关闭提示 |
|cancel|  `function`     | `null` | `NO` | 点击取消的回调函数 |
|confirm|  `function`     | `null` | `NO` | 点击确认的回调函数 |

### Logs

>
> 1.0.0 version\
>
npm package: @shawyw/cli
Description: Vant CLI 是一个基于 Vite 实现的 Vue 组件库构建工具，通过 Vant CLI 可以快速搭建一套功能完备的 Vue 组件库。
Author: ftv
Latest version: 0.0.7

# Vant CLI

Vant CLI 是一个基于 Vite 实现的 Vue 组件库构建工具，通过 Vant CLI 可以快速搭建一套功能完备的 Vue 组件库。

### 特性

- 基于 Vite 实现，享受愉悦的开发体验
- 提供丰富的命令，涵盖从开发测试到构建发布的完整流程
- 基于约定的目录结构，自动生成优雅的文档站点和组件示例
- 内置 ESLint 校验规则，提交代码时自动执行校验
- 构建后的组件库默认支持按需引入、主题定制、Tree Shaking

### 快速上手

执行以下命令可以快速创建一个基于 Vant CLI 的项目：

```bash
yarn create vant-cli-app
```

### 手动安装

```shell
# 通过 npm
npm i @shawyw/cli -D

# 通过 yarn
yarn add @shawyw/cli -D

# 通过 pnpm
pnpm add @shawyw/cli -D

# 通过 Bun
bun add @shawyw/cli -D
```

安装完成后，请将以下配置添加到 package.json 文件中

```json
{
  "scripts": {
    "dev": "vant-cli dev",
    "test": "vant-cli test",
    "lint": "vant-cli lint",
    "build": "vant-cli build",
    "prepare": "husky install",
    "release": "vant-cli release",
    "build-site": "vant-cli build-site"
  },
  "nano-staged": {
    "*.md": "prettier --write",
    "*.{ts,tsx,js,vue,less,scss}": "prettier --write",
    "*.{ts,tsx,js,vue}": "eslint --fix"
  },
  "eslintConfig": {
    "root": true,
    "extends": ["@vant"]
  },
  "prettier": {
    "singleQuote": true
  },
  "browserslist": ["Chrome >= 51", "iOS >= 10"]
}
```

## 详细文档

- [命令](https://github.com/vant-ui/vant/tree/main/packages/vant-cli/docs/commands.zh-CN.md)
- [配置指南](https://github.com/vant-ui/vant/tree/main/packages/vant-cli/docs/config.zh-CN.md)
- [目录结构](https://github.com/vant-ui/vant/tree/main/packages/vant-cli/docs/directory.zh-CN.md)
- [更新日志](https://github.com/vant-ui/vant/tree/main/packages/vant-cli/changelog.md)
npm package: @shaxaddd/node-cpp-blur
Description: High-performance box blur implemented in C++ (N-API) for Node.js
Author: shaxaddd
Latest version: 1.0.0

# @shaxaddd/node-cpp-blur


High-performance box blur implemented in C++ and exposed to Node.js via N-API.


## Install


```bash
npm install @shaxaddd/node-cpp-blur
npm package: @shayanja/react-crypto-payment
Description: A beautiful React component for accepting cryptocurrency payments
Author: Your Name
Latest version: 1.0.9

## React Crypto Payment Component

A beautiful, production-ready React component for accepting cryptocurrency payments.

### Installation

```bash
npm install @shayanja/react-crypto-payment
```

### Usage

```tsx
import { CryptoPayment } from '@shayanja/react-crypto-payment'

function App() {
  return (
    <CryptoPayment
      amount={99.99}
      currency="USD"
      productName="Premium Membership"
      description="Access to exclusive content and benefits"
      onPaymentComplete={(txHash) => console.log('Payment successful:', txHash)}
      onPaymentError={(error) => console.error('Payment error:', error)}
      theme="light"
      apiUrl="https://your-backend-url.com"
    />
  )
}
```

### Running the backend

You can run the backend using `npm start` in the same directory as your React app.

### Props

| Prop              | Type                     | Default   | Description                         |
| ----------------- | ------------------------ | --------- | ----------------------------------- |
| amount            | number                   | required  | The payment amount                  |
| currency          | 'USD' \| 'EUR' \| 'GBP'  | 'USD'     | The currency for the payment        |
| onPaymentComplete | (txHash: string) => void | undefined | Callback when payment is successful |
| onPaymentError    | (error: Error) => void   | undefined | Callback when an error occurs       |
| theme             | 'light' \| 'dark'        | 'light'   | The theme of the component          |
| productName       | string                   | undefined | The product name to show            |
| description       | string                   | undefined | The description of the produc       |
| apiUrl            | string                   | undefined | The API URL for the backend         |

### Features

- 🎨 Beautiful, production-ready UI
- 📱 Responsive design
- 🌗 Light/dark theme support
- 💱 Multiple cryptocurrency support
- 📷 QR code generation
- 📋 Copy-to-clipboard functionality
- 🔗 Blockchain explorer integration
- 📦 TypeScript support

### License

MIT
npm package: @shaykec/appxray-protocol
Description: Shared protocol types for appxray MCP server and SDKs
Latest version: 0.1.7

# @shaykec/appxray-protocol

Shared protocol types and constants for the appxray ecosystem.

[![npm](https://img.shields.io/npm/v/@shaykec/appxray-protocol)](https://www.npmjs.com/package/@shaykec/appxray-protocol)

## What It Does

This package contains the TypeScript types and JSON-RPC message definitions shared between the [appxray MCP server](https://www.npmjs.com/package/@shaykec/appxray-mcp-server) and the appxray SDKs. You typically don't need to install this directly — it's a dependency of the other appxray packages.

## When to Use Directly

Install this package if you're building:

- A **custom SDK** for a platform not yet supported
- A **custom MCP tool** that extends appxray
- **Tests** that need appxray protocol types

```bash
npm install @shaykec/appxray-protocol
```

## Key Types

| Type | Description |
|------|-------------|
| `AppInfo` | App identity (name, platform, version, port) |
| `ComponentNode` | UI component tree node with props, state, children |
| `StateValue` | Named state entry with value and metadata |
| `NetworkEntry` | Captured HTTP request/response with timing |
| `TimelineEvent` | Unified event (network, state, render, navigation, error, trace) |
| `InteractionResult` | Result of a UI interaction (tap, type, swipe) |
| `MockRule` | API mock rule definition |
| `DiagnosticReport` | Health check results |

## Related Packages

- [`@shaykec/appxray-mcp-server`](https://www.npmjs.com/package/@shaykec/appxray-mcp-server) — MCP server
- [`@shaykec/appxray-web`](https://www.npmjs.com/package/@shaykec/appxray-web) — Web SDK
- [`@shaykec/appxray-node`](https://www.npmjs.com/package/@shaykec/appxray-node) — Node.js SDK
- [`@shaykec/appxray-react-native`](https://www.npmjs.com/package/@shaykec/appxray-react-native) — React Native SDK

## License

MIT
npm package: @shaykec/bridge
Description: Communication hub — HTTP + WebSocket + SSE server with template engine
Latest version: 0.4.27

# @shaykec/bridge

[![npm version](https://img.shields.io/npm/v/@shaykec/bridge)](https://www.npmjs.com/package/@shaykec/bridge)

Communication hub for Socrates -- HTTP server with WebSocket, SSE, and REST endpoints. Routes visual commands from the Claude Code plugin to browser clients (canvas app and Chrome extension) and user events back.

```bash
npm install @shaykec/bridge
```

## Architecture

```
Plugin (Claude Code)
    |  POST /api/visual
    v
Bridge Server (:3456)
    |
    +---> WebSocket /ws         (Tier 1: Extension + Canvas)
    +---> SSE /sse              (Tier 2: Canvas only)
    +---> REST /api/event       (Tier 2: Canvas user events)
    +---> Static files /        (Serves canvas app)
```

## Endpoints

| Endpoint | Method | Purpose | Tier |
|----------|--------|---------|------|
| `/ws` | WebSocket | Bidirectional connection for extension + canvas | 1 |
| `/sse` | GET (SSE) | Server-push event stream for canvas | 2 |
| `/api/event` | POST | Canvas sends user events back | 2 |
| `/api/visual` | POST | Plugin pushes visual commands | All |
| `/api/tier` | GET | Query current connection tier | All |
| `/api/capture` | POST | Web captures from extension | 1 |
| `/api/progress` | GET | Current progress data | 2, 3 |
| `/api/events` | GET | Poll for pending browser events | 2 |
| `/health` | GET | Health check | All |

## Key Files

- `src/server.js` -- HTTP + WebSocket server (Node.js `http` + `ws`)
- `src/protocol.js` -- Tier negotiation logic
- `src/router.js` -- Event routing between clients
- `src/templates.js` -- HTML template engine for visual types

## Templates

Located in `templates/`. Pre-built HTML for each visual type:

- `dashboard.html` -- Progress dashboard
- `diagram-mermaid.html`, `diagram-flow.html`, `diagram-architecture.html` -- Diagrams
- `quiz-drag-order.html`, `quiz-matching.html`, `quiz-fill-blank.html`, `quiz-timed-choice.html` -- Quizzes
- `code-playground.html` -- Monaco editor with sandboxed execution
- `celebrate.html` -- Confetti and level-up animations

## Dependencies

- `ws` -- WebSocket server
- `@shaykec/shared` -- Protocol and constants

## Usage

```bash
# Start directly
node packages/bridge/src/server.js

# Or via CLI
socrates serve --port 3456
```

See the [root README](../../README.md) for full documentation.
npm package: @shaykec/claude-teach
Description: Socratic AI teaching platform — learn anything through guided dialogue, visual canvas, and gamification
Latest version: 0.6.21

# @shaykec/claude-teach

[![npm version](https://img.shields.io/npm/v/@shaykec/claude-teach)](https://www.npmjs.com/package/@shaykec/claude-teach)

CLI engine and core logic for ClaudeTeach -- gamification, progress tracking, module registry, and marketplace.

This is the main entry point for the `claude-teach` command-line tool.

```bash
npm install -g @shaykec/claude-teach
```

## Commands

### Learning

| Command | Description |
|---------|-------------|
| `list` | List available modules (`--category`, `--difficulty`, `--tag`, `--source`) |
| `get <module>` | Show module content (`--quick`, `--quiz-only`, `--status`, `--reset`) |
| `stats` | Gamification dashboard |
| `level-up` | Belt roadmap and recommendations |

### Marketplace

| Command | Description |
|---------|-------------|
| `install <url>` | Install a module pack from git |
| `packs` | List installed packs |
| `update <pack>` | Update a pack (git pull) |
| `remove <pack>` | Remove a pack |
| `search <query>` | Search registries |
| `registry add\|list\|remove` | Manage registries |

### Authoring

| Command | Description |
|---------|-------------|
| `author init <name>` | Scaffold a new module pack |
| `author add <pack>/<module>` | Add a module to a pack |
| `author validate <path>` | Validate a pack |
| `author preview <path>` | Preview a module locally |
| `registry:build` | Rebuild the module registry |

### System

| Command | Description |
|---------|-------------|
| `serve` | Start the bridge server (`--port`) |
| `inbox` | Show browser-captured content |

## Key Files

- `src/cli.js` -- Command definitions (Commander.js)
- `src/registry.js` -- Module registry (scans built-in, packs, local)
- `src/progress.js` -- Progress persistence (`.teach-progress.yaml`)
- `src/gamification.js` -- Belt calculation, XP logic, dashboard formatting
- `src/marketplace.js` -- Pack install/update/remove/search, registry config
- `src/author.js` -- Pack scaffolding, module addition, validation

## Dependencies

- `commander` -- CLI framework
- `js-yaml` -- YAML parsing
- `chalk` -- Terminal colors
- `@shaykec/bridge` -- Bridge server
- `@shaykec/shared` -- Shared constants

See the [root README](../../README.md) for full documentation.
npm package: @shaykec/core
Description: Core engine — CLI, gamification, progress tracking, module registry
Latest version: 0.1.0
Deprecated: Renamed to @shaykec/claude-teach — npm install -g @shaykec/claude-teach

# @shaykec/core

CLI engine and core logic for ClaudeTeach -- gamification, progress tracking, module registry, and marketplace.

This is the main entry point for the `claude-teach` command-line tool.

## Commands

### Learning

| Command | Description |
|---------|-------------|
| `list` | List available modules (`--category`, `--difficulty`, `--tag`, `--source`) |
| `get <module>` | Show module content (`--quick`, `--quiz-only`, `--status`, `--reset`) |
| `stats` | Gamification dashboard |
| `level-up` | Belt roadmap and recommendations |

### Marketplace

| Command | Description |
|---------|-------------|
| `install <url>` | Install a module pack from git |
| `packs` | List installed packs |
| `update <pack>` | Update a pack (git pull) |
| `remove <pack>` | Remove a pack |
| `search <query>` | Search registries |
| `registry add\|list\|remove` | Manage registries |

### Authoring

| Command | Description |
|---------|-------------|
| `author init <name>` | Scaffold a new module pack |
| `author add <pack>/<module>` | Add a module to a pack |
| `author validate <path>` | Validate a pack |
| `author preview <path>` | Preview a module locally |
| `registry:build` | Rebuild the module registry |

### System

| Command | Description |
|---------|-------------|
| `serve` | Start the bridge server (`--port`) |
| `inbox` | Show browser-captured content |

## Key Files

- `src/cli.js` -- Command definitions (Commander.js)
- `src/registry.js` -- Module registry (scans built-in, packs, local)
- `src/progress.js` -- Progress persistence (`.teach-progress.yaml`)
- `src/gamification.js` -- Belt calculation, XP logic, dashboard formatting
- `src/marketplace.js` -- Pack install/update/remove/search, registry config
- `src/author.js` -- Pack scaffolding, module addition, validation

## Dependencies

- `commander` -- CLI framework
- `js-yaml` -- YAML parsing
- `chalk` -- Terminal colors
- `@shaykec/bridge` -- Bridge server
- `@shaykec/shared` -- Shared constants

See the [root README](../../README.md) for full documentation.
npm package: @shaykec/extension
Description: Socrates Chrome Extension — context-aware learning companion (Manifest V3)
Latest version: 0.1.5

# @shaykec/extension

Chrome extension (Manifest V3) for Socrates -- adds web capture, context-aware learning suggestions, and real-time canvas companion functionality.

## Three Roles

### 1. Canvas Companion
WebSocket connection to the bridge server for real-time bidirectional communication. The extension popup shows connection status, current lesson, and quick actions (Open Canvas, Dashboard, Pause).

### 2. "Teach Me This" (Web Capture)
- Highlight text on any webpage, right-click, select "Teach me this"
- Sends selected text + URL + context to the bridge server
- Claude Code creates an instant Socratic lesson on the highlighted content
- Also supports "Quiz me on this" for instant quiz generation

### 3. Context-Aware Suggestions
- Reads page title and meta tags (never full page content -- privacy-first)
- Matches against module trigger keywords locally (no AI calls)
- Shows a subtle notification when a matching module exists
- Dismiss suppresses the topic for 24 hours

## Key Files

- `manifest.json` -- Permissions: activeTab, contextMenus, storage
- `src/background.js` -- WebSocket connection, message routing, context matching
- `src/content.js` -- Page metadata extraction, text selection, notification UI
- `src/popup/` -- Extension popup (status, lesson info, quick actions)

## Installation

1. Build: `npm run build` (no build step needed -- vanilla JS)
2. Open `chrome://extensions/`
3. Enable Developer Mode
4. Click "Load unpacked" and select the `packages/extension/` directory

## Dependencies

None -- vanilla JavaScript using Manifest V3 APIs.

See the [root README](../../README.md) for full documentation.
npm package: @shaykec/modules
Description: Learning modules — tutorials, references, and stories
Latest version: 0.1.3

# @shaykec/modules

[![npm version](https://img.shields.io/npm/v/@shaykec/modules)](https://www.npmjs.com/package/@shaykec/modules)

Built-in learning modules that ship with Socrates. These are always available and serve as reference implementations for the module format.

```bash
npm install @shaykec/modules
```

## Built-in Modules

| Module | Slug | Difficulty | Capabilities |
|--------|------|-----------|-------------|
| Git - Version Control Fundamentals | `git` | Beginner | content, walkthrough, exercises, quiz |
| Claude Code Hooks | `hooks` | Intermediate | content |
| A Day with Claude Code | `daily-workflow` | Beginner | content (narrative) |

## Module Format

Every module is a directory containing:

| File | Required | Purpose |
|------|----------|---------|
| `module.yaml` | Yes | Metadata, XP values, triggers, visuals config |
| `content.md` | Yes | Reference content (the "textbook") |
| `walkthrough.md` | No | Step-by-step Socratic guided lesson |
| `exercises.md` | No | Hands-on exercises with validation |
| `quiz.md` | No | Multiple choice with explanations |
| `quick-ref.md` | No | Cheat sheet / command reference |

## Module Sources

The registry scans three locations and merges them:

| Source | Location | Purpose |
|--------|----------|---------|
| Built-in | `packages/modules/` | Ships with Socrates |
| Installed packs | `~/.socrates/modules/<pack>/` | Git repos installed by the user |
| Local custom | `~/.socrates/modules/local/` | User-authored modules |

## Authoring New Modules

Use `/teach:author <topic>` in Claude Code for guided creation, or scaffold manually:

```bash
socrates author init my-pack
socrates author add my-pack/my-module
socrates author validate my-pack
```

See the [root README](../../README.md) for the full module.yaml schema and authoring guide.
npm package: @shaykec/plugin
Description: Claude Code plugin layer — skills, hooks, and real-time tracking
Latest version: 0.2.17

# @shaykec/plugin

[![npm version](https://img.shields.io/npm/v/@shaykec/plugin)](https://www.npmjs.com/package/@shaykec/plugin)

Claude Code plugin for Socrates -- defines skills (slash commands), hooks, and session tracking that integrate the teaching platform into Claude Code.

```bash
npm install @shaykec/plugin
```

## Skills

| Skill | File | Description |
|-------|------|-------------|
| `/teach` | `skills/teach/SKILL.md` | Socratic teaching -- start/resume guided lessons |
| `/teach:ask` | `skills/ask/SKILL.md` | Q&A from installed module content |
| `/teach:stats` | `skills/stats/SKILL.md` | Gamification dashboard -- XP, belt, progress |
| `/teach:level-up` | `skills/level-up/SKILL.md` | Belt roadmap and personalized recommendations |
| `/teach:canvas` | `skills/canvas/SKILL.md` | Open the visual canvas in the browser |
| `/teach:author` | `skills/author/SKILL.md` | Guided module authoring (content, walkthroughs, quizzes) |
| `/teach:author-pack` | `skills/author-pack/SKILL.md` | Guided pack authoring (multi-module collections) |

## Plugin Configuration

Defined in `.claude-plugin/plugin.json`. Skills are registered with Claude Code and become available as slash commands.

## How Skills Work

Each skill is a markdown file (`SKILL.md`) containing instructions for the AI. When a user types a slash command, Claude Code reads the corresponding SKILL.md and follows its instructions. Skills can:

- Read and write files (progress tracking, module content)
- Execute bash commands (validation, bridge communication)
- Send HTTP requests to the bridge server (visual commands)
- Guide multi-step interactions (Socratic dialogue, authoring workflows)

## Hooks

Shell hooks in `.claude-plugin/hooks/` track Claude Code lifecycle events:
- `track-usage.sh` -- Records session usage for streak tracking

Note: Canvas interaction events (quiz completions, playground runs) flow through the bridge server, not through shell hooks.

See the [root README](../../README.md) for full documentation.
npm package: @shaykec/shared
Description: Shared protocol definitions and constants for Socrates
Latest version: 0.1.9

# @shaykec/shared

[![npm version](https://img.shields.io/npm/v/@shaykec/shared)](https://www.npmjs.com/package/@shaykec/shared)

Zero-dependency package containing shared protocol definitions and constants used by all Socrates packages.

```bash
npm install @shaykec/shared
```

## Exports

```javascript
import { BELTS, TIERS, QUIZ_TYPES, XP_AWARDS } from '@shaykec/shared/constants';
import { MESSAGE_TYPES, createEnvelope } from '@shaykec/shared/protocol';
```

## Constants (`src/constants.js`)

### Belt Definitions

| Belt | Min XP | Badge |
|------|--------|-------|
| White | 0 | &#x2B1C; |
| Yellow | 50 | &#x1F7E8; |
| Green | 150 | &#x1F7E9; |
| Blue | 400 | &#x1F7E6; |
| Purple | 800 | &#x1F7EA; |
| Brown | 1500 | &#x1F7EB; |
| Black | 3000+ | &#x2B1B; |

### Tier Enums

- `TIER_FULL (1)` -- Extension + Canvas via WebSocket
- `TIER_CANVAS (2)` -- Canvas only via SSE + REST
- `TIER_TERMINAL (3)` -- CLI only, file-based

### Quiz Types

`drag-order`, `matching`, `fill-blank`, `timed-choice`

### XP Awards

Default XP values for quiz completions, walkthrough steps, code exercises, web captures, and daily streaks.

### Other Constants

- `DEFAULT_PORT` -- Bridge server port (3456)
- `HEARTBEAT_INTERVAL_MS` -- WebSocket heartbeat (30s)
- Celebration types, diagram formats, playground languages

## Protocol (`src/protocol.js`)

Message type enums, event schemas, and the JSON envelope format used for all bridge communication.

See the [root README](../../README.md) for full documentation.
npm package: @shaykec/socrates
Description: Socratic AI teaching platform — learn anything through guided dialogue, visual canvas, and gamification
Latest version: 0.6.28

# @shaykec/socrates

[![npm version](https://img.shields.io/npm/v/@shaykec/socrates)](https://www.npmjs.com/package/@shaykec/socrates)

CLI engine and core logic for Socrates -- gamification, progress tracking, module registry, and marketplace.

This is the main entry point for the `socrates` command-line tool.

```bash
npm install -g @shaykec/socrates
```

## Commands

### Learning

| Command | Description |
|---------|-------------|
| `list` | List available modules (`--category`, `--difficulty`, `--tag`, `--source`) |
| `get <module>` | Show module content (`--quick`, `--quiz-only`, `--status`, `--reset`) |
| `stats` | Gamification dashboard |
| `level-up` | Belt roadmap and recommendations |

### Marketplace

| Command | Description |
|---------|-------------|
| `install <url>` | Install a module pack from git |
| `packs` | List installed packs |
| `update <pack>` | Update a pack (git pull) |
| `remove <pack>` | Remove a pack |
| `search <query>` | Search registries |
| `registry add\|list\|remove` | Manage registries |

### Authoring

| Command | Description |
|---------|-------------|
| `author init <name>` | Scaffold a new module pack |
| `author add <pack>/<module>` | Add a module to a pack |
| `author validate <path>` | Validate a pack |
| `author preview <path>` | Preview a module locally |
| `registry:build` | Rebuild the module registry |

### System

| Command | Description |
|---------|-------------|
| `serve` | Start the bridge server (`--port`) |
| `inbox` | Show browser-captured content |

## Key Files

- `src/cli.js` -- Command definitions (Commander.js)
- `src/registry.js` -- Module registry (scans built-in, packs, local)
- `src/progress.js` -- Progress persistence (`.socrates-progress.yaml`)
- `src/gamification.js` -- Belt calculation, XP logic, dashboard formatting
- `src/marketplace.js` -- Pack install/update/remove/search, registry config
- `src/author.js` -- Pack scaffolding, module addition, validation

## Dependencies

- `commander` -- CLI framework
- `js-yaml` -- YAML parsing
- `chalk` -- Terminal colors
- `@shaykec/bridge` -- Bridge server
- `@shaykec/shared` -- Shared constants

See the [root README](../../README.md) for full documentation.