div-deck 0.1.0 → 0.1.2

package/README.md

@@ -1,73 +1,61 @@
-# React + TypeScript + Vite
+# div.deck
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+Browser-based editor for HTML slide decks. Edit slides visually with click-to-select, inline text editing, drag-to-reorder, and full-screen presentation mode.
 
-Currently, two official plugins are available:
+Built for editing slide decks generated by the [visual-explainer](https://github.com/nicobailon/visual-explainer) skill. Expects decks using the `<section class="slide slide--{type}">` structure that skill produces.
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+## Quick Start
 
-## React Compiler
+```bash
+npx div-deck init
+```
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+This walks you through setup:
 
-## Expanding the ESLint configuration
+1. **Picks your presentations folder** — where your `.html` slide decks live (default: `./presentations`)
+2. **Adds an npm script** — so you can run `npm run deck` to launch the editor
+3. **Installs a Claude Code command** — type `/presentations` in Claude Code to start editing
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+Once set up, launch the editor anytime with:
 
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
+```bash
+npm run deck
+```
 
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
+Or run it directly:
 
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+```bash
+npx div-deck ./path/to/slides
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+## What It Does
+
+- **File browser** — list, open, and delete `.html` slide decks
+- **Visual editing** — click any element to select it, click again to edit text inline
+- **Drag to reorder** — reorder slides in the sidebar or elements within a slide
+- **Undo/redo** — full history with Cmd+Z / Cmd+Shift+Z
+- **Presentation mode** — full-screen slideshow with keyboard navigation
+- **Auto-save friendly** — saves preserve your editing state (active tab, open file)
+
+## Usage with Claude Code
+
+After running `div-deck init`, you get a `/presentations` command in Claude Code. This starts the editor and opens your browser — handy when you're generating slide decks with [visual-explainer](https://github.com/nicobailon/visual-explainer) and want to preview or tweak them.
+
+## Options
+
 ```
+div-deck [directory]          Start the editor
+div-deck init                 Interactive project setup
+div-deck --port 8080 ./slides Use a custom port (default: 3001)
+div-deck --help               Show help
+```
+
+## How It Works
+
+div.deck runs a single local server that serves both the editor UI and a file API. Slides render in iframes for perfect style isolation — your deck's CSS never leaks into the editor and vice versa.
+
+The editor never modifies your HTML structure. It parses the deck, lets you edit visually, and serializes back to clean HTML.
+
+## License
+
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "div-deck",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "description": "Browser-based editor for HTML slide decks",
   "bin": {