@humanjs/generator 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Gonzalo Muñoz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,79 @@
+# @humanjs/generator
+
+<p>
+  <a href="https://www.npmjs.com/package/@humanjs/generator"><img alt="npm" src="https://img.shields.io/npm/v/@humanjs/generator"></a>
+  <a href="https://www.npmjs.com/package/@humanjs/generator"><img alt="downloads" src="https://img.shields.io/npm/dt/@humanjs/generator"></a>
+  <a href="https://github.com/totigm/humanjs"><img alt="GitHub" src="https://img.shields.io/badge/GitHub-totigm%2Fhumanjs-181717?logo=github"></a>
+  <a href="https://github.com/totigm/humanjs/actions/workflows/ci.yml"><img alt="CI" src="https://github.com/totigm/humanjs/actions/workflows/ci.yml/badge.svg"></a>
+  <a href="https://github.com/totigm/humanjs/blob/main/LICENSE"><img alt="license" src="https://img.shields.io/npm/l/@humanjs/generator"></a>
+  <a href="https://humanjs.dev"><img alt="docs" src="https://img.shields.io/badge/docs-humanjs.dev-emerald"></a>
+</p>
+
+Visual recorder for [HumanJS](https://humanjs.dev) — record your clicks in a real browser and export a clean, **humanized** Playwright test.
+
+```bash
+npx @humanjs/generator https://your-app.com
+```
+
+It launches a real Chromium window and a local dashboard. You click through your flow; the dashboard shows a live, editable timeline next to a syntax-highlighted code preview. Curate the steps, pick a personality, and export a ready-to-commit `.spec.ts` that drives the page through HumanJS — so the generated test runs with humanized motion, not robotic jumps.
+
+> **Audience:** AI agent builders, QA engineers, and demo/tutorial creators. HumanJS is **not** a scraping, captcha-bypass, or "undetectable automation" tool — see the [non-goals](https://humanjs.dev).
+
+## How it works
+
+1. `npx @humanjs/generator <url>` opens a real Chromium window at your URL and a local dashboard (loopback only) in your browser.
+2. Interact with the site in the Chromium window — clicks, typing, scrolling, drag, navigation. Each action streams into the dashboard as a step, captured with a robust, role-first selector.
+3. Curate the timeline in the editor (below), pick a personality, and watch the generated test update live.
+4. Hit **Export** to write a `.spec.ts` (a `@humanjs/playwright/test` spec) or a standalone `.ts` script to your working directory.
+
+## The editor
+
+- **Reorder** by dragging a step's handle — the rest slide out of the way.
+- **Delete** junk steps, **relabel** any step (the label becomes a comment), and **edit captured values**.
+- **Pick a selector** per step from the ranked candidates (role + accessible name → label → text → test id → `#id` → CSS → XPath).
+- **Add assertions** by pointing at a step: `toBeVisible`, `toHaveText`, or `toHaveURL`.
+- **Mark a field secret** so its value exports as `process.env.X` instead of a literal.
+- **Switch personality** (`careful` / `fast` / `distracted` / `precise`) — the same recording, re-shaped, no re-recording.
+
+## Output
+
+A fixture-based spec that runs humanized locally and instant in CI:
+
+```ts
+import { test } from '@humanjs/playwright/test';
+
+test.use({ humanOptions: { personality: 'careful', speed: process.env.CI ? 'instant' : 'human' } });
+
+test('recorded session', async ({ human }) => {
+  await human.goto('https://your-app.com/');
+  await human.click('role=link[name="Sign in"]');
+  await human.type('role=textbox[name="Email"]', 'user@example.com');
+  await human.click('role=button[name="Continue"]');
+});
+```
+
+Export as `.spec.ts` / `.test.ts` for the spec above, or `.ts` for a standalone HumanJS script.
+
+## How it differs from Playwright Codegen
+
+- **Humanized output** — generated tests use HumanJS primitives (curved clicks, typing rhythm, reading dwell), not raw Playwright calls.
+- **Personality switcher** — the same recording exports as `careful`, `fast`, `distracted`, or `precise` without re-recording.
+- **Edit before export** — delete junk, reorder, relabel, fix captured text, pick selectors, add assertions (Codegen has no editor).
+- **Selector quality** — prefers ARIA role + accessible name, then label / text / test id, before falling back to CSS or XPath.
+
+## Requirements
+
+- Node.js ≥ 20.
+- The Playwright Chromium browser. If you don't have it yet: `npx playwright install chromium`.
+
+## Honest limits
+
+- Records in a real browser (no iframe), so it works on sites that block framing — but it does not, and will not, defeat bot detection, fingerprinting, or captchas.
+- The local dashboard binds to `127.0.0.1` only.
+- Captured passwords are always masked; use the secret-field toggle to wire other sensitive values to environment variables.
+
+See [`ROADMAP.md`](./ROADMAP.md) for what's next (in-app replay, video/GIF export, mid-timeline re-record).
+
+## License
+
+MIT

package/dist/dashboard/assets/index-BA_iJGjh.css

@@ -0,0 +1 @@
+:root{color-scheme:dark;--bg: #060604;--panel: #0c0b0a;--elevated: #110f0d;--line: rgba(245, 230, 215, .1);--field: #151310;--field-hover: #1b1813;--text: #f0ece5;--muted: #8a857c;--accent: #f5a55c;--accent-bright: #ffb87a}*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:#2a2620 transparent}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#2a2620;border:2px solid var(--bg);border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#38322a}body{margin:0;background:var(--bg);color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}h1{font-size:1.15rem;margin:0;letter-spacing:.02em}.accent{color:var(--accent)}.muted{color:var(--muted)}button{font:inherit;font-size:.8rem;color:#1a1410;background:var(--accent);border:0;border-radius:6px;padding:.4rem .7rem;cursor:pointer}button:hover{background:var(--accent-bright)}button.link{background:none;color:var(--accent);padding:.2rem 0}button.link:hover{color:var(--accent-bright)}button.del{background:none;color:var(--muted);padding:0 .2rem}button.del:hover{color:#f87171}input{font:inherit;font-size:.8rem;color:var(--text);background:var(--field);border:1px solid var(--line);border-radius:5px;padding:.3rem .4rem}input::placeholder{color:#6a655c}.layout{display:grid;grid-template-columns:1fr 1fr;height:100vh}.editor{overflow:auto;padding:1.25rem 1.5rem;border-right:1px solid var(--line);min-width:0}.preview{display:flex;flex-direction:column;background:var(--panel);min-width:0}.preview-head{padding:.75rem 1rem;border-bottom:1px solid var(--line)}.code-lines{position:relative;margin:0;padding:1rem;overflow:auto;flex:1;line-height:1.55;color:#cfcfcf}.code-line{white-space:pre-wrap;overflow-wrap:anywhere;padding-left:2ch;text-indent:-2ch;min-height:1.55em}.empty-state{display:grid;place-items:center;height:100vh;text-align:center}.topbar{margin-bottom:1rem}.target{margin:.35rem 0 .75rem;word-break:break-all}.controls{display:flex;align-items:end;gap:.6rem;flex-wrap:wrap}.field{display:flex;flex-direction:column;gap:.2rem;font-size:.7rem;color:var(--muted)}.saved{color:var(--accent);font-size:.78rem;margin:.6rem 0 0}.hint{margin-top:1.5rem}ul.steps{list-style:none;margin:.5rem 0 0;padding:0}li.step{border-top:1px solid var(--line);padding:.55rem 0}.step-head{display:flex;align-items:center;gap:.55rem}.grip{color:#444;cursor:grab}.kind{color:var(--accent);min-width:5.5rem;font-size:.8rem}.kind-assert{color:#c084fc}.detail{color:#c9c9c9;flex:1;word-break:break-all;font-size:.8rem}.step-edit{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin:.45rem 0 0 1.1rem}.step-edit .value{min-width:12rem}.step-edit .label{width:8rem}.secret{display:flex;align-items:center;gap:.3rem;font-size:.75rem;color:var(--muted)}.secret .env{width:8rem}.assert-form{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}.select{position:relative;display:inline-block}.select-btn{display:inline-flex;align-items:center;gap:.4rem;background:var(--field);color:var(--text);border:1px solid var(--line);border-radius:5px;padding:.32rem .5rem;max-width:22rem}.select-btn:hover{background:var(--field-hover);border-color:var(--accent)}.select-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-caret{color:var(--muted);font-size:.7rem}.select-list{position:absolute;z-index:20;top:calc(100% + 4px);left:0;min-width:100%;width:max-content;max-width:min(34rem,70vw);max-height:16rem;overflow:auto;margin:0;padding:.25rem;list-style:none;background:var(--elevated);border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 30px #0000008c}.select-list.drop-up{top:auto;bottom:calc(100% + 4px)}.select-list li{list-style:none}.select-opt{position:relative;display:block;width:100%;text-align:left;background:none;border:0;padding:.4rem .55rem .4rem 1.6rem;border-radius:5px;cursor:pointer;overflow-wrap:anywhere;word-break:normal;white-space:normal;color:#d7d7d7}.select-opt:hover,.select-opt.is-active{background:var(--field-hover);color:var(--text)}.select-opt.is-selected{color:var(--accent)}.select-opt.is-selected:before{content:"✓";position:absolute;left:.55rem;color:var(--accent)}.select.picker .select-btn{font-size:.78rem}.grip{background:none;color:#555;padding:0 .15rem;cursor:grab;touch-action:none}.grip:hover{background:none;color:var(--accent)}.grip:active{cursor:grabbing}li.step{background:var(--bg);list-style:none}li.step[data-dragging=true],li.step:active{position:relative;z-index:5}.t-comment{color:#5f6b7a;font-style:italic}.t-string{color:#34d399}.t-keyword{color:#c792ea}.t-builtin{color:#7dd3fc}.t-property{color:#93c5fd}.t-number{color:#fbbf24}.t-ident{color:#d7d7d7}@media(max-width:820px){.layout{grid-template-columns:1fr;height:auto}.preview{border-top:1px solid var(--line)}}