init commit

2026-03-15 16:34:31 -03:00 · 2026-03-15 16:34:31 -03:00 · b7b1fd306a
commit b7b1fd306a
32 changed files with 4527 additions and 0 deletions
--- a/CLAUDE.md
+++ b/CLAUDE.md
@ -0,0 +1,104 @@
+# CLAUDE.md — toolkit
+
+## Project
+
+SvelteKit 2 + Svelte 5 developer toolkit. All tools run client-side — no server-side logic.
+
+## Language
+
+**JavaScript only** (`lang="js"` in Svelte files). No TypeScript. Use JSDoc for type annotations.
+
+```svelte
+<script lang="js">
+  /** @type {string} */
+  let value = $state('');
+```
+
+## Svelte 5 runes
+
+Use `$state`, `$derived`, `$derived.by`, `$effect`, `$props`. No Svelte 4 syntax (`$:`, `export let`, `<slot>`).
+
+## Style conventions
+
+- Arrow functions for single-expression bodies
+- Regular functions for multi-line logic
+- Imports at top of `<script>`
+- No `function` declarations after state/derived blocks
+
+## Shared libraries
+
+- `$lib/clipboard.js` — `copy(text)` — wraps `navigator.clipboard.writeText`
+- `$lib/md5.js` — `md5(input: string | Uint8Array): string` — no-dep MD5
+
+## Routing
+
+File-based under `src/routes/`. Each tool is a directory with `+page.svelte`.
+
+| Route        | Tool                                                                                     |
+| ------------ | ---------------------------------------------------------------------------------------- |
+| `/`          | About — project description + tools index                                                |
+| `/object-id` | MongoDB ObjectId generator & parser                                                      |
+| `/uuid`      | UUID v1/v3/v4/v5/v6/v7 generator & parser                                                |
+| `/hash`      | MD5, SHA-1, SHA-256, SHA-512                                                             |
+| `/cron`      | Crontab expression builder                                                               |
+| `/api-key`   | High-entropy API key generator                                                           |
+| `/json`      | JSON prettify / compact / validate                                                       |
+| `/base`      | Base64 / Base64url / Base32 / Base58 / Base16 encode & decode                            |
+| `/string`    | String transforms: lower, UPPER, snake_case, camelCase, PascalCase, kebab, reverse, trim |
+
+## Navigation
+
+Adding a new tool requires updating three files:
+1. `src/routes/+layout.svelte` — add entry to `links` array
+2. `src/routes/+page.svelte` — add entry to `tools` array
+3. `CLAUDE.md` — add route to the routing table
+
+## Theming
+
+Colors are defined as CSS custom properties in `src/routes/layout.css`.
+
+- Default theme: **Gruvbox Light Hard**
+- Dark theme: **Gruvbox Dark Hard** — activated via `[data-theme="dark"]` on `<html>`
+- Theme toggle button lives in `src/routes/Header.svelte`; persists to `localStorage`
+- Theme is applied before first render via an inline `<script>` in `src/app.html` (no FOUC)
+
+Key CSS variables: `--bg`, `--bg-panel`, `--bg-raised`, `--bg-raised-hover`, `--fg`, `--fg-dim`, `--fg-faint`, `--border`, `--border-faint`, `--active-bg`, `--active-fg`, `--link`, `--link-vis`, `--link-hover`, `--err`, `--err-bg`, `--err-border`, `--green`, `--blue`, `--red`, `--bar-bg`, `--bar-fg`, `--bar-dim`.
+
+**Never hardcode colors.** Always use CSS variables.
+
+## Panel UI pattern
+
+Panels (textarea/output areas) use a consistent structure and class names:
+
+```svelte
+<div class="panel">
+  <div class="panel-header">
+    <span>Label</span>
+    <div class="panel-actions">
+      <button>clear</button>
+      <button>copy</button>
+    </div>
+  </div>
+  <textarea ...></textarea>
+</div>
+```
+
+CSS for `.panel-header`: `background: var(--bg-raised)`, `border: 1px solid var(--border)`, `border-bottom: none`, `padding: 2px 6px`, `font-size: 0.85em`, `font-weight: bold`.
+
+## Active/selected state
+
+Buttons and nav tiles use: `background: var(--active-bg); color: var(--active-fg); border-color: var(--active-bg)`.
+
+## CSS
+
+- Global styles: `src/routes/layout.css` — variables, body, a, button, input, select, textarea, table, h1, h2, hr, code
+- Component styles: scoped `<style>` blocks inside each `.svelte` file
+- Aesthetic: suckless/early-2000s — Arial, 1px solid borders, no gradients/shadows/border-radius
+
+## Crypto
+
+All randomness via `crypto.getRandomValues()`. Hash via `crypto.subtle.digest()`. No external crypto libs except the custom MD5 (needed for UUID v3 and hash page).
+
+## No external runtime dependencies
+
+`package.json` has only build-time devDependencies. Keep it that way.