{"_id":"@appfiex-rayliu/mobile-tui","_rev":"2-b1fdf27e299022d1aa212e2cd1b21382","name":"@appfiex-rayliu/mobile-tui","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@appfiex-rayliu/mobile-tui","version":"0.1.0","license":"MIT","_id":"@appfiex-rayliu/mobile-tui@0.1.0","maintainers":[{"name":"appfiex-rayliu","email":"sevenray@gmail.com"}],"homepage":"https://github.com/rayliu-factory/mobile-tui#readme","bugs":{"url":"https://github.com/rayliu-factory/mobile-tui/issues"},"pi":{"extensions":["./dist/extension.js"]},"dist":{"shasum":"3105d32bfaa73af70b63622c86abaa0d5d51492d","tarball":"https://registry.npmjs.org/@appfiex-rayliu/mobile-tui/-/mobile-tui-0.1.0.tgz","fileCount":7,"integrity":"sha512-doHUBDaoanHqciDfH1kVxmk3RA0UcIG5pcbsYr04jBHsJNaDDFJ9VhM7NXkILmboJgGi7bTeh9ZO6Cd4DFc76g==","signatures":[{"sig":"MEMCH1tsRAW0uP43rZ2Pcy8P8BHsl5JwWdiTPuCDDqJpOxICIBmIyOeCnXSgkmV1lpQY8lDn1i5UzXqcVXuMAJRuGZVE","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@appfiex-rayliu%2fmobile-tui@0.1.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":298357},"type":"module","engines":{"node":">=20"},"exports":{".":"./dist/index.js"},"gitHead":"a82bf31f1c75f9773da01019a3117288d429589b","scripts":{"dev":"tsup --watch","lint":"biome check .","test":"vitest run","build":"tsup","canvas":"npx tsx scripts/canvas.ts","format":"biome format --write .","cli-edit":"npx tsx scripts/cli-edit.ts","typecheck":"tsc --noEmit","wireframe":"npx tsx scripts/render-wireframe.ts","test:watch":"vitest","test:coverage":"vitest run --coverage","prepublishOnly":"npm run build && npm run typecheck"},"_npmUser":{"name":"appfiex-rayliu","email":"sevenray@gmail.com"},"repository":{"url":"git+https://github.com/rayliu-factory/mobile-tui.git","type":"git"},"_npmVersion":"10.8.2","description":"pi.dev TypeScript extension: terminal-native wizard+canvas TUI for authoring LLM-consumable mobile app specs.","directories":{},"_nodeVersion":"20.20.2","dependencies":{"zod":"^4.3.6","yaml":"^2.8.3","clipboardy":"^5.3.1","gray-matter":"^4.0.3","jsonpointer":"^5.0.1","gpt-tokenizer":"^3.4.0"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.1","vitest":"^4.1.4","typescript":"^5.6.0","@types/node":"^20.11.0","@biomejs/biome":"^2.4.12","@types/jsonpointer":"^4.0.2","@vitest/coverage-v8":"^4.1.4","@mariozechner/pi-tui":"^0.67.68","@mariozechner/pi-coding-agent":"^0.67.68"},"peerDependencies":{"@mariozechner/pi-tui":"*","@mariozechner/pi-coding-agent":"*"},"_npmOperationalInternal":{"tmp":"tmp/mobile-tui_0.1.0_1776645361478_0.33720834802441857","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@appfiex-rayliu/mobile-tui","version":"0.1.1","type":"module","description":"pi.dev TypeScript extension: terminal-native wizard+canvas TUI for authoring LLM-consumable mobile app specs.","license":"MIT","repository":{"type":"git","url":"git+https://github.com/rayliu-factory/mobile-tui.git"},"engines":{"node":">=20"},"exports":{".":"./dist/index.js"},"pi":{"extensions":["./dist/extension.js"]},"scripts":{"build":"tsup","dev":"tsup --watch","prepublishOnly":"npm run build && npm run typecheck","typecheck":"tsc --noEmit","test":"vitest run","test:watch":"vitest","test:coverage":"vitest run --coverage","lint":"biome check .","format":"biome format --write .","wireframe":"npx tsx scripts/render-wireframe.ts","cli-edit":"npx tsx scripts/cli-edit.ts","canvas":"npx tsx scripts/canvas.ts"},"dependencies":{"clipboardy":"^5.3.1","gpt-tokenizer":"^3.4.0","gray-matter":"^4.0.3","jsonpointer":"^5.0.1","yaml":"^2.8.3","zod":"^4.3.6"},"peerDependencies":{"@mariozechner/pi-coding-agent":"*","@mariozechner/pi-tui":"*"},"devDependencies":{"@biomejs/biome":"^2.4.12","@mariozechner/pi-coding-agent":"^0.67.68","@mariozechner/pi-tui":"^0.67.68","@types/jsonpointer":"^4.0.2","@types/node":"^20.11.0","@vitest/coverage-v8":"^4.1.4","tsup":"^8.5.1","typescript":"^5.6.0","vitest":"^4.1.4"},"_id":"@appfiex-rayliu/mobile-tui@0.1.1","gitHead":"9f9989abb09b7f133e622ed4191002d6c30c7f72","bugs":{"url":"https://github.com/rayliu-factory/mobile-tui/issues"},"homepage":"https://github.com/rayliu-factory/mobile-tui#readme","_nodeVersion":"20.20.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-3Z7SEC5YGUa3lqtiUK2b8UXUp4k+cEFeLkTRmNYDwHHWhY7ekSr65XOkB+BPG6m2OHeonN2ovB9XpSZmOkl3bA==","shasum":"c1fff74c02993d48ce4836a0282b73cf4e5d9c0a","tarball":"https://registry.npmjs.org/@appfiex-rayliu/mobile-tui/-/mobile-tui-0.1.1.tgz","fileCount":7,"unpackedSize":299016,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@appfiex-rayliu%2fmobile-tui@0.1.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQD3V+zs0r3YFoHkDoOZMEy3gjopdO9Na4XLBb99iu/JkAIhAIprV3IDyPUrxhrZHDu8MwSpsveWZVi2w+SLIh8RC8Ao"}]},"_npmUser":{"name":"appfiex-rayliu","email":"sevenray@gmail.com"},"directories":{},"maintainers":[{"name":"appfiex-rayliu","email":"sevenray@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/mobile-tui_0.1.1_1776646703936_0.7340883029659708"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-20T00:36:01.368Z","modified":"2026-04-20T00:58:24.336Z","0.1.0":"2026-04-20T00:36:01.627Z","0.1.1":"2026-04-20T00:58:24.075Z"},"bugs":{"url":"https://github.com/rayliu-factory/mobile-tui/issues"},"license":"MIT","homepage":"https://github.com/rayliu-factory/mobile-tui#readme","repository":{"type":"git","url":"git+https://github.com/rayliu-factory/mobile-tui.git"},"description":"pi.dev TypeScript extension: terminal-native wizard+canvas TUI for authoring LLM-consumable mobile app specs.","maintainers":[{"name":"appfiex-rayliu","email":"sevenray@gmail.com"}],"readme":"# mobile-tui\n\nA [pi.dev](https://pi.dev) extension that guides developers through creating mobile app specs inside a terminal UI. A wizard-then-canvas flow captures screens, navigation, data models, and state; the extension renders detailed ASCII wireframes you can preview, then writes a Markdown + YAML-frontmatter spec file (with Maestro E2E flows) that an LLM can consume to build and test the app.\n\n**Core value:** The ASCII wireframes are good enough to share — the wireframe artifact is the centrepiece.\n\n## Requirements\n\n- [pi.dev](https://pi.dev) v0.67.x or later\n- Node.js 20+\n\n## Install\n\n```bash\npi install npm:mobile-tui\n```\n\nOr load directly from source during development:\n\n```bash\npi -e /path/to/mobile-tui/src/extension.ts\n```\n\n## Usage — `/spec`\n\nRun `/spec` inside any pi session. The extension inspects your project and routes you automatically:\n\n| Situation | What opens |\n|-----------|------------|\n| No `SPEC.md` found | Wizard (fresh project) |\n| `SPEC.md` exists | Canvas (edit existing spec) |\n| Prior session saved | Resumes from where you left off |\n\n### Fresh project (wizard path)\n\n```\n/spec\n```\n\nThe wizard walks you through 8 steps in order:\n\n1. **App Idea** — one-sentence description of the app\n2. **Primary User** — who uses it and why\n3. **Navigation Pattern** — tab bar, stack, drawer, or hybrid\n4. **Screens** — list every screen by name\n5. **Auth** — authentication requirements (none, email, social, …)\n6. **Data** — core entities and their relationships\n7. **Offline/Sync** — offline mode and sync strategy\n8. **Target Platforms** — iOS, Android, or both\n\nWhen all 8 steps are answered the wizard graduates to the canvas automatically.\n\n### Existing spec (canvas path)\n\n```\n/spec\n```\n\nOpens the 3-pane canvas:\n\n```\n┌──────────────┬────────────────────┬──────────────────┐\n│  Screens     │   Inspector        │  Wireframe       │\n│  (list)      │   (component tree) │  (ASCII preview) │\n└──────────────┴────────────────────┴──────────────────┘\n```\n\n`Tab` / `Shift+Tab` cycles focus between panes.\n\n## Canvas Keybindings\n\n| Key | Action |\n|-----|--------|\n| `Tab` / `Shift+Tab` | Cycle focus between panes |\n| `:` or `Ctrl+P` | Open command palette |\n| `Ctrl+Z` | Undo last change |\n| `Ctrl+Y` | Redo |\n| `Ctrl+W` | Yank wireframe for active screen to clipboard |\n| `Ctrl+E` | Emit Maestro E2E flow files |\n| `Ctrl+Q` | Quit (autosaves before exit) |\n\n## Handoff Commands\n\nRun these from the command palette (`:` or `Ctrl+P`):\n\n### Yank wireframe\n\nCopies the ASCII wireframe for a screen to the clipboard — paste into a prompt or doc.\n\n```\n:yank wireframe <screen-id>\n```\n\n### Generate LLM prompt\n\nEmits a structured prompt for a target framework, ready to paste into an LLM.\n\n```\n:prompt screen <screen-id> <target>\n```\n\nTargets: `swiftui`, `compose`\n\n### Extract screen spec\n\nExtracts a single screen's full spec block as standalone Markdown.\n\n```\n:extract --screen <screen-id>\n```\n\n## Spec File Format\n\nThe extension reads and writes `SPEC.md` — a Markdown file with a YAML frontmatter block followed by free-form notes.\n\n**Annotated example:**\n\n```yaml\n---\nschema: mobile-tui/1         # always present; version-pins the parser\n\nscreens:\n  - id: home                 # kebab-case identifier used in commands + navigation edges\n    title: My Habits         # display title rendered in wireframe NavBar\n    kind: regular            # regular | modal | sheet | tab\n    acceptance:\n      - User sees a list of habits with their daily-complete state\n      - Tapping a habit toggles its completion\n    variants:\n      content:\n        kind: content\n        tree:\n          - kind: NavBar\n            title: My Habits\n            trailing:\n              kind: Button\n              label: \"+\"\n              action: add_habit\n          - kind: List\n            bindsTo: /Habit   # binds to the Habit entity defined below\n            itemTemplate:\n              kind: ListItem\n              label: Open Detail\n              action: open_detail\n\nnavigation:\n  root: home                 # first screen shown on launch\n  edges:\n    - from: home\n      to: detail\n      trigger: open_detail\n      kind: push\n\nentities:\n  - name: Habit\n    fields:\n      - name: id\n        type: uuid\n      - name: name\n        type: string\n      - name: completedToday\n        type: boolean\n---\n\n## Notes\n\nAny free-form Markdown below the frontmatter is preserved across edits.\n```\n\n## Output Files\n\nAfter running `Ctrl+E` the extension writes Maestro YAML flow files alongside `SPEC.md`:\n\n```\nSPEC.md\nmaestro/\n  home.yaml\n  detail.yaml\n```\n\nThese can be run directly with the [Maestro CLI](https://maestro.mobile.dev):\n\n```bash\nmaestro test maestro/home.yaml\n```\n\n## Session Persistence\n\nThe extension saves your position (current screen, pane focus, wizard step) to `.planning/.mobile-tui/session.json`. This directory is automatically added to `.gitignore` — session state is local only.\n\n## Building from Source\n\n```bash\nnpm install\nnpm run build   # produces dist/extension.js via tsup\nnpm test        # runs vitest suite\n```\n\nTo verify the bundle does not accidentally bundle pi runtime dependencies:\n\n```bash\nnpm run build && npx vitest run tests/no-pi-bundle.test.ts\n```\n","readmeFilename":"README.md"}