@papit/create 0.0.10 → 0.0.12

package/README.md

@@ -1,17 +1,9 @@
 # @papit/create
 
-Project and package scaffolding tool for @papit — opinionated, consistent, and designed to kickstart Papit-based projects with the correct structure from day one.
+Scaffolds papit packages, components and monorepo projects from templates, interactively or through flags. Run it inside a papit workspace to add a package or component, or outside one to start a new project.
 
 ![Logo](https://raw.githubusercontent.com/onkelhoy/papit/refs/heads/main/asset/logo.svg)
 
-This package is intended to be used **from within a workspace or an empty directory**. Simply run:
-
-```bash
-npm create @papit
-```
-
-to generate a fully initialized Papit package, component, or project with zero or minimal configuration.
-
 ---
 
 ![Type](https://img.shields.io/badge/Type-cli-orange)
@@ -20,168 +12,216 @@ to generate a fully initialized Papit package, component, or project with zero o
 
 ---
 
-## CLI Flags
+# Installation
 
-| Flag          | Description                         |
-| ------------- | ----------------------------------- |
-| `--package`   | Create a package                    |
-| `--component` | Create a component                  |
-| `--project`   | Create a project                    |
-| `--agree`     | Skip confirmations                  |
-| `--install`   | Install dependencies after creation |
-| `--commit`    | Create an initial git commit        |
-| `--verbose`   | Show detailed output                |
+No install needed:
 
-If no creation flag is provided, an interactive selector is shown.
+```bash
+npm create @papit
+```
 
----
+It also installs as a dev dependency with the `papit-create` bin:
 
-## How it works
+```bash
+npm install -D @papit/create
+```
 
-`@papit/create` presents a set of creation options. Some of these can be invoked directly via flags, but the tool is primarily interactive and focused on generating boilerplate code based on predefined templates.
+# Usage
 
-There are currently three built-in runners:
+Pick a runner from a menu:
 
-1. `package`
-2. `component`
-3. `project`
+```bash
+npm create @papit
+```
 
-**Note:** You can provide your own custom runners by placing them in the `bin` folder. Each runner must have a `runner.js` file with a default export, for example:
+Go straight to a runner (npm needs the `--` to pass the flags on):
 
-```
-<workspace-root>/bin/runners/<custom>/runner.js
+```bash
+npm create @papit -- --package
+npm create @papit -- --component
+npm create @papit -- --project
 ```
 
-A runner is a function that receives two arguments:
+The papit repo root wires it up as `npm run create`:
 
-```ts
-info: {
-  root: string; // Location of the workspace root
-  local: string; // Location of the current package (if any)
-  script: string | null; // Location of the @papit/create script
+```json
+{
+  "scripts": {
+    "create": "npm create @papit -- --package --html-prefix=pap"
+  }
 }
 ```
 
-```ts
-args: {
-  flags: Record<string, string | string[] | true | undefined>,
-  values: string[]
-}
+Fully non-interactive, from inside a workspace:
+
+```bash
+npm create @papit -- --package=node --name=my-tool --description="Does a thing." --agree
 ```
 
-For more details on the structure and behavior of these arguments, see the
+The folder under `packages/` is still picked from a menu.
 
-- `@papit/arguments`
-- `@papit/information`
-  package.
+Outside a papit workspace, it always runs the project runner.
 
----
+# CLI flags
 
-## Package
+| Flag | Runner | Description |
+| --- | --- | --- |
+| `--package[=<template>]` | all | Run the package runner. With a value, it's the template too (`browser`, `game`, `node`, `theme`, `web-component` or a custom one). |
+| `--component` | all | Run the component runner. |
+| `--project` | all | Run the project runner. |
+| `--showcase` | all | Run the showcase runner (experimental, see below). |
+| `--<custom>` | all | Run a custom runner from `bin/runners/<custom>/`. |
+| `--type=<template>` | package, component | Template to use, when `--package` has no value. |
+| `--name=<name>` | package, component, project | Name. Spaces and `-` separate words: `my button` becomes `my-button` / `MyButton`. |
+| `--description=<text>` | package, project | Description for `package.json` and the README. |
+| `--html-prefix=<prefix>` | package, component, showcase | Tag prefix for web components (`pap` gives `pap-<name>`). Falls back to the package's then the root's `papit.htmlprefix`, otherwise prompts. |
+| `--agree` | package, component | Yes to everything: folder creation, git commit and `npm install`. |
+| `--commit` | package, component | Commit the result without asking. |
+| `--install` | package | Run `npm install` without asking. |
+| `--yes` / `--no` | package | Answer the commit and install questions. |
+| `--location=<path>` | project | Where to create the project. Default: prompted, then `<path>/<name>`. |
+| `--license=<id>` | project | License for the generated `package.json`s. Default `MIT`. |
+| `--skip-git` | project | Don't `git init` and commit. |
+| `--verbose`, `--debug` | all | Log levels, see [@papit/arguments](https://github.com/onkelhoy/papit/tree/main/packages/runtime/cli/arguments). |
 
-The **package runner** creates a new package at a selected location (sometimes referred to as layers or folders).
+# Runners
 
-A template is selected — either one of the built-in templates or a custom template located at:
+## package
 
-```
-<workspace-root>/bin/runners/package/*
-```
+1. Pick or create a folder under `packages/` (`--agree` skips the creation confirm).
+2. Pick a template, unless `--package=<template>` or `--type` names one.
+3. For a web component, settle the html prefix. When the root has none, it offers to save yours as the root's `papit.htmlprefix`.
+4. Ask for name and description. The name must not already exist in the workspace (`<scope>/<name>`).
+5. Copy the template into `<folder>/<name>` and replace the [template variables](#template-variables). `.gitkeep` files are dropped.
+6. Run the component runner for a first component with the package's own name, using the component template of the same type.
+7. Install and commit (`add: <scope>/<name> package`), when agreed.
 
-The selected template folder is copied, and all files are processed to replace supported variables.
+## component
 
-The generated license file automatically references the same license as the workspace root.
+Adds a component to the package you're in. The template is the package's `papit.type`, then `--package` / `--type`, otherwise prompted. It registers the component under `papit.components` in the package's `package.json`, then copies each top-level template folder:
 
-### Available variables
+| Template folder | Goes to |
+| --- | --- |
+| `src` | `src/` when it's empty, otherwise `src/components/<name>/` |
+| `tests`, `views`, others | `<folder>/<name>/` |
 
-- `VARIABLE_NAME`
-- `VARIABLE_FULL_NAME`
-- `VARIABLE_DESCRIPTION`
-- `VARIABLE_LAYER_FOLDER`
-- `VARIABLE_PROJECTLICENSE`
-- `VARIABLE_GITHUB_REPO`
-- `VARIABLE_LOCAL_DESTINATION`
-- `VARIABLE_CLASS_NAME`
-- `VARIABLE_HTML_PREFIX`
-- `VARIABLE_USER`
+The first component of a new package lands directly in `src/` and in `views/experiment/`. Commits as `add: <name> component` when agreed.
 
----
+## project
 
-## Component
+Creates a new papit monorepo from the [project template](#project-template): prompts for name, description and location, asks before replacing an existing folder, copies the template, then `git init`, commits (`init: <name> initialized`) and runs `npm install`. The root package is named `@<name>/root`.
 
-The **component runner** creates a new component and is intended for adding sub-components to an existing package.
+## showcase
 
-Like the package runner, it copies a selected template from either built-ins or:
+Experimental. For every `web-component`, `game` and `theme` package in the workspace whose first view isn't `views/showcase`, it generates one from `asset/showcase-templates/individual`, with a tab per existing view (`--view-filter`, default `showcase`, `raw`, `experiment`).
 
-```
-<workspace-root>/bin/runners/component/*
+## Custom runners
+
+Any folder in `<workspace-root>/bin/runners/` with a `runner.js` becomes a runner, listed in the menu and selectable as `--<folder>`. The names `package`, `component`, `project` and `showcase` are taken.
+
+```js
+// bin/runners/release-notes/runner.js
+import { Arguments } from "@papit/arguments";
+import { Information } from "@papit/information";
+
+export default async function () {
+    console.log(Information.root.location, Arguments.string("since"));
+}
 ```
 
-### Folder handling
+The default export is called with no arguments. Read flags and the workspace through [@papit/arguments](https://github.com/onkelhoy/papit/tree/main/packages/runtime/cli/arguments) and [@papit/information](https://github.com/onkelhoy/papit/tree/main/packages/runtime/cli/information).
 
-- **views**
-  If a `views` folder exists in both the current package and the template, a new subfolder named after the component is created inside the package’s `views` directory and populated with the template content.
+## Custom templates
 
-- **src**
-  If the current package already has a `src` folder with files, the template’s `src` content is typically placed under:
+| Location | Requirement |
+| --- | --- |
+| `bin/runners/package/<template>/` | Must contain a `package.json`. |
+| `bin/runners/component/<template>/` | Top-level folders are copied as in the [component runner](#component). |
 
-  ```
-  src/components/<component-name>
-  ```
+They're listed next to the built-in ones and selected by name. The project runner has no custom templates.
 
-### Available variables
+# Package templates
 
-- `VARIABLE_NAME`
-- `VARIABLE_FULL_NAME`
-- `VARIABLE_HTML_NAME`
-- `VARIABLE_CLASS_NAME`
+Every package template has `package.json`, `README.md`, `tsconfig.json`, `tsconfig.prod.json`, `.gitignore` and `asset/translations/en.json`. Scripts include `build` (`npx @papit/build`), `test`, `start` and `component`.
 
----
+| Template | `papit.type` | Gets |
+| --- | --- | --- |
+| `browser` | `browser` | Playwright tests, `asset/icons`, `asset/images`. |
+| `game` | `game` | Playwright tests, `views/`, `asset/models`, `asset/textures`. |
+| `node` | `node` | `node:test` tests (`npm test`, `npm run test:only`), `npm start` builds and runs `lib/bundle.js`. |
+| `theme` | `theme` | Ships `lib/theme.css` as the package export. Playwright tests. No build script. |
+| `web-component` | `web-component` | Playwright tests, `views/`, `@papit/web-component` as a dependency, `papit.htmlprefix`. |
 
-## Project
+## web-component
 
-> ⚠️ This runner is currently under development.
+On top of the above, a web component package gets:
 
-The **project runner** creates a raw monorepo project at a selected destination.
+- `"analyse": "npx @papit/analyse"`, which writes `analyse.json` (see [@papit/analyse](https://github.com/onkelhoy/papit/tree/main/packages/runtime/cli/analyse))
+- `"generate:react": "npx @papit/react"`, which writes `src/react-wrapper.tsx` (see [@papit/react](https://github.com/onkelhoy/papit/tree/main/packages/runtime/cli/react))
+- `react` `^19` as an optional peerDependency, tsconfig `"jsx": "react-jsx"` and `paths` mapping the package's own name to `./index`
 
-As with packages and components, custom templates can be provided at:
+The `./react` export isn't in the template. Add it by hand once `src/react-wrapper.tsx` has been generated, so the import path is `@papit/<name>/react`:
 
-```
-<workspace-root>/bin/runners/project/*
+```json
+"./react": { "import": "./lib/react-wrapper.js", "types": "./lib/react-wrapper.d.ts" }
 ```
 
-You will be prompted to select a template during creation.
+Without the file, `@papit/bundle-js` would build that entry from `src/index.ts` instead.
 
-Licensing is handled interactively. You may provide an existing license file or omit it, in which case a standard MIT license is used.
+# Component templates
 
-### Available variables
+One per package type, each filled in with the component's name:
 
-- `VARIABLE_NAME`
-- `VARIABLE_DESCRIPTION`
-- `VARIABLE_PROJECTLICENSE`
-- `VARIABLE_USER`
+| Template | `src` | `tests` | `views` |
+| --- | --- | --- | --- |
+| `browser` | `component.ts`, `index.ts`, `types.ts` | Playwright `unit.test.ts`, `snapshot.test.ts`, test page | demo page |
+| `game` | `component.ts`, `index.ts`, `types.ts` | Playwright `unit.test.ts`, `snapshot.test.ts`, test page | demo page |
+| `node` | `component.ts`, `index.ts`, `types.ts` | `unit.test.js` | none |
+| `theme` | `theme.css` | Playwright `unit.test.ts`, `snapshot.test.ts`, test page | demo page |
+| `web-component` | a `CustomElement` class, `style.css`, `types.ts`, `index.ts` that defines `<prefix>-<name>` | Playwright `unit.test.ts`, `snapshot.test.ts`, test page | demo page |
 
----
+# Project template
 
-## Contributing
+A root `package.json` with npm workspaces (`packages/**/*`, excluding `asset/` folders) and these scripts:
 
-Contributions are welcome.
+| Script | Runs |
+| --- | --- |
+| `analyse` | Every workspace's `analyse` script (`npm run analyse --workspaces --if-present`). |
+| `build` | `npx @papit/build` |
+| `test` | `node bin/test.mjs`, every package's `npm test`. |
+| `start` | `npx @papit/server --serve --info` |
+| `create` | `npm create @papit -- --package` |
+| `clean` | `node bin/clean.mjs` |
+| `version:reset`, `version:sync` | `npx @papit/version --reset` / `--sync` |
 
-Please ensure that:
+devDependencies: `@papit/build`, `@papit/bundle-js`, `@papit/bundle-ts`, `@papit/server`, `@papit/create`, `@papit/version`, `@papit/arguments`, `@papit/terminal`, `@papit/information`, `@papit/analyse`, `@papit/react`, `esbuild` and `typescript`. A project that uses `generate:react` adds `react` and `@types/react` as root devDependencies itself.
 
-- Templates follow Papit conventions
-- Runners remain deterministic
-- Interactive prompts stay minimal
+Also included: `.gitignore` (ignores `packages/**/lib/` and the generated `packages/**/analyse.json`), GitHub workflows for pull requests and publishing, `.vscode` settings, `.nvmrc`, `bin/` helpers and an example custom runner in `bin/runners/example-runner/`.
 
-Open a pull request when ready 🚀
+# Template variables
 
----
+Replaced in every copied file.
 
-## License
+| Variable | Package | Component | Project | Value |
+| --- | :-: | :-: | :-: | --- |
+| `VARIABLE_NAME` | ✓ | ✓ | ✓ | Kebab-case name. Project: `@<name>/root`. |
+| `VARIABLE_FULL_NAME` | ✓ | ✓ | | `<scope>/<name>`. Component: the package's name. |
+| `VARIABLE_CLASS_NAME` | ✓ | ✓ | | PascalCase name. |
+| `VARIABLE_HTML_NAME` | ✓ | ✓ | | `<prefix>-<name>` |
+| `VARIABLE_HTML_PREFIX` | ✓ | | | The html prefix, or empty. |
+| `VARIABLE_DESCRIPTION` | ✓ | | ✓ | The description. |
+| `VARIABLE_LAYER_FOLDER` | ✓ | | | Name of the folder the package goes in, e.g. `atoms`. |
+| `VARIABLE_LOCAL_DESTINATION` | ✓ | | | Package path from the workspace root. |
+| `VARIABLE_GITHUB_REPO` | ✓ | | | Root `repository.url` without `git+` and `.git`. |
+| `VARIABLE_PROJECTLICENSE` | ✓ | | ✓ | Root `license` (default `MIT`). Project: `--license`. |
+| `VARIABLE_USER` | ✓ | | ✓ | `$USER`, prompted when unset. |
+
+# License
 
 Licensed under the **@Papit License 1.0**
 Copyright (c) 2024 Henry Pap (@onkelhoy)
 
-**Key points:**
+**Key points**
 
 - ✅ Free to use in commercial projects
 - ✅ Free to modify and distribute
@@ -192,7 +232,15 @@ See the [LICENSE](https://github.com/onkelhoy/papit/blob/main/LICENSE) file for
 
 ---
 
-## Support
-
-For issues, questions, or contributions, please visit the
-[GitHub repository](https://github.com/onkelhoy/papit).
+# Related
+
+- [@papit/information](https://github.com/onkelhoy/papit/tree/main/packages/runtime/cli/information)
+  Finds the workspace root, its scope and existing packages.
+- [@papit/arguments](https://github.com/onkelhoy/papit/tree/main/packages/runtime/cli/arguments)
+  Parses the flags.
+- [@papit/build](https://github.com/onkelhoy/papit/tree/main/packages/runtime/cli/build)
+  Builds the packages it creates.
+- [@papit/analyse](https://github.com/onkelhoy/papit/tree/main/packages/runtime/cli/analyse)
+  Behind the web component template's `analyse` script.
+- [@papit/react](https://github.com/onkelhoy/papit/tree/main/packages/runtime/cli/react)
+  Behind the web component template's `generate:react` script.

package/asset/component-templates/browser/views/style.css

@@ -2,7 +2,7 @@
 
 body {
     background-color: var(--background, light-dark(oklch(96% 0 0), oklch(17% 0 0)));
-    color: var(--text, light-dark(oklch(10% 0 0), oklch(95% 0 0)));
+    color: contrast-color(var(--background));
     display: flex;
     flex-direction: column;
     gap: var(--space-4, 16px);

package/asset/component-templates/game/views/main.js

@@ -1,6 +1,5 @@
 // core
-import { Engine } from '@papit/game-engine';
-import { InputEvents } from "@papit/game-input-events";
+import { Engine, InputEvents } from '@papit/game-engine';
 
 // component
 import 'VARIABLE_FULL_NAME';
@@ -8,27 +7,27 @@ import 'VARIABLE_FULL_NAME';
 let engine, events;
 
 window.onload = () => {
-  engine = new Engine("canvas");
-  events = new InputEvents(engine.canvas, { mouse: { pointerlock: false } });
+    engine = new Engine("canvas");
+    events = new InputEvents(engine.canvas, { mouse: { pointerlock: false } });
 
-  events.on("mouse-up", handlemouseup);
-  events.on("mouse-down", handlemousedown);
-  events.on("mouse-move", handlemousemove);
+    events.on("mouse-up", handlemouseup);
+    events.on("mouse-down", handlemousedown);
+    events.on("mouse-move", handlemousemove);
 
-  engine.loop(draw); // cool function
+    engine.loop(draw); // cool function
 }
 
 function draw() {
-  engine.ctx.clearRect(0, 0, engine.width, engine.height);
+    engine.ctx.clearRect(0, 0, engine.width, engine.height);
 }
 
 // event handlers
 function handlemousemove(e) {
-  // mouse move
+    // mouse move
 }
 function handlemousedown(e) {
-  // mouse down 
+    // mouse down 
 }
 function handlemouseup(e) {
-  // mouse up 
+    // mouse up 
 }

package/asset/component-templates/web-component/src/component.ts

@@ -3,7 +3,7 @@
 import { CustomElement, html, property } from "@papit/web-component";
 
 // local 
-import sheet from "./style.css" assert { type: "css" };
+import sheet from "./style.css" with { type: "css" };
 import { ClickEvent } from "./types";
 
 export class VARIABLE_CLASS_NAME extends CustomElement {

package/asset/component-templates/web-component/views/style.css

@@ -2,7 +2,7 @@
 
 body {
     background-color: var(--background, light-dark(oklch(96% 0 0), oklch(17% 0 0)));
-    color: var(--text, light-dark(oklch(10% 0 0), oklch(95% 0 0)));
+    color: contrast-color(var(--background));
     display: flex;
     flex-direction: column;
     gap: var(--space-4, 16px);

package/asset/package-templates/browser/README.md

@@ -18,10 +18,6 @@ VARIABLE_DESCRIPTION
 npm install VARIABLE_FULL_NAME
 ```
 
-## Contributing
-
-Contributions are welcome! Please follow the development guidelines above and ensure all tests pass before submitting a pull request.
-
 ## License
 
 Licensed under the @Papit License 1.0 - Copyright (c) 2024 Henry Pap (@onkelhoy)
@@ -37,8 +33,4 @@ See the [LICENSE](https://github.com/onkelhoy/papit/blob/main/LICENSE) file for
 
 ## Related Components
 
-- [@papit/web-component](https://github.com/onkelhoy/papit/tree/main/packages/system/core): Core utilities, decorators, and base component class
-
-## Support
-
-For issues, questions, or contributions, please visit the [GitHub repository](https://github.com/onkelhoy/papit).
+- [@papit/web-component](https://github.com/onkelhoy/papit/tree/main/packages/web/engines/web-component): Core utilities, decorators, and base component class

package/asset/package-templates/game/README.md

@@ -18,10 +18,6 @@ VARIABLE_DESCRIPTION
 npm install VARIABLE_FULL_NAME
 ```
 
-## Contributing
-
-Contributions are welcome! Please follow the development guidelines above and ensure all tests pass before submitting a pull request.
-
 ## License
 
 Licensed under the @Papit License 1.0 - Copyright (c) 2024 Henry Pap (@onkelhoy)
@@ -34,7 +30,3 @@ Licensed under the @Papit License 1.0 - Copyright (c) 2024 Henry Pap (@onkelhoy)
 - ❌ Cannot resell the component itself as a standalone product
 
 See the [LICENSE](https://github.com/onkelhoy/papit/blob/main/LICENSE) file for full details.
-
-## Support
-
-For issues, questions, or contributions, please visit the [GitHub repository](https://github.com/onkelhoy/papit).

package/asset/package-templates/game/package.json

@@ -61,8 +61,7 @@
         "@papit/translator": "*",
         "@papit/codeblock": "*",
         "@papit/game-engine": "*",
-        "@papit/game-input-events": "*",
-        "@papit/game-vector": "*"
+        "@papit/vector": "*"
     },
     "browserslist": [
         "defaults",

package/asset/package-templates/node/README.md

@@ -18,10 +18,6 @@ VARIABLE_DESCRIPTION
 npm install VARIABLE_FULL_NAME
 ```
 
-## Contributing
-
-Contributions are welcome! Please follow the development guidelines above and ensure all tests pass before submitting a pull request.
-
 ## License
 
 Licensed under the @Papit License 1.0 - Copyright (c) 2024 Henry Pap (@onkelhoy)
@@ -34,7 +30,3 @@ Licensed under the @Papit License 1.0 - Copyright (c) 2024 Henry Pap (@onkelhoy)
 - ❌ Cannot resell the component itself as a standalone product
 
 See the [LICENSE](https://github.com/onkelhoy/papit/blob/main/LICENSE) file for full details.
-
-## Support
-
-For issues, questions, or contributions, please visit the [GitHub repository](https://github.com/onkelhoy/papit).

package/asset/package-templates/theme/README.md

@@ -18,10 +18,6 @@ VARIABLE_DESCRIPTION
 npm install VARIABLE_FULL_NAME
 ```
 
-## Contributing
-
-Contributions are welcome! Please follow the development guidelines above and ensure all tests pass before submitting a pull request.
-
 ## License
 
 Licensed under the @Papit License 1.0 - Copyright (c) 2024 Henry Pap (@onkelhoy)
@@ -37,8 +33,4 @@ See the [LICENSE](https://github.com/onkelhoy/papit/blob/main/LICENSE) file for
 
 ## Related Components
 
-- [@papit/web-component](https://github.com/onkelhoy/papit/tree/main/packages/system/core): Core utilities, decorators, and base component class
-
-## Support
-
-For issues, questions, or contributions, please visit the [GitHub repository](https://github.com/onkelhoy/papit).
+- [@papit/web-component](https://github.com/onkelhoy/papit/tree/main/packages/web/engines/web-component): Core utilities, decorators, and base component class

package/asset/package-templates/web-component/README.md

@@ -28,11 +28,6 @@ npm install VARIABLE_FULL_NAME
 <VARIABLE_HTML_NAME></VARIABLE_HTML_NAME>
 ```
 
-
-## Contributing
-
-Contributions are welcome! Please follow the development guidelines above and ensure all tests pass before submitting a pull request.
-
 ## License
 
 Licensed under the @Papit License 1.0 - Copyright (c) 2024 Henry Pap (@onkelhoy)
@@ -48,8 +43,4 @@ See the [LICENSE](https://github.com/onkelhoy/papit/blob/main/LICENSE) file for
 
 ## Related Components
 
-- [@papit/web-component](https://github.com/onkelhoy/papit/tree/main/packages/system/core): Core utilities, decorators, and base component class
-
-## Support
-
-For issues, questions, or contributions, please visit the [GitHub repository](https://github.com/onkelhoy/papit).
+- [@papit/web-component](https://github.com/onkelhoy/papit/tree/main/packages/web/engines/web-component): Core utilities, decorators, and base component class

package/asset/package-templates/web-component/package.json

@@ -10,6 +10,8 @@
     "version": "0.0.1",
     "scripts": {
         "build": "npx @papit/build --error",
+        "analyse": "npx @papit/analyse",
+        "generate:react": "npx @papit/react",
         "watch": "tsc -w",
         "start": "npx @papit/server --info --live",
         "test": "npx playwright test -c tests/playwright.config.ts $@",
@@ -17,8 +19,7 @@
         "postversion": "papit-version",
         "component": "npm create @papit --component",
         "test:update-snapshots": "npx playwright test --update-snapshots -c tests/playwright.config.ts",
-        "test:chrome": "npm test -- --project=chromium",
-        "build:react": "bash ./bin/_utils/react.sh"
+        "test:chrome": "npm test -- --project=chromium"
     },
     "main": "./lib/bundle.js",
     "types": "./lib/bundle.d.ts",
@@ -56,6 +57,14 @@
     "dependencies": {
         "@papit/web-component": "*"
     },
+    "peerDependencies": {
+        "react": "^19"
+    },
+    "peerDependenciesMeta": {
+        "react": {
+            "optional": true
+        }
+    },
     "devDependencies": {
         "@playwright/test": "1.58.0",
         "playwright": "1.58.0",

package/asset/project-template/.vscode/settings.json

@@ -15,5 +15,10 @@
     "typescript.format.placeOpenBraceOnNewLineForFunctions": false,
     "typescript.format.placeOpenBraceOnNewLineForControlBlocks": true,
     "javascript.format.placeOpenBraceOnNewLineForControlBlocks": true,
-    "files.associations": { "*.json": "jsonc" },
+    "files.associations": {
+        "*.json": "jsonc"
+    },
+    "lit-plugin.rules": {
+        "no-incompatible-type-binding": "off"
+    }
 }

package/asset/project-template/package.json

@@ -4,7 +4,7 @@
     "description": "VARIABLE_DESCRIPTION",
     "private": true,
     "scripts": {
-        "analyse": "to come",
+        "analyse": "npm run analyse --workspaces --if-present",
         "publish": "to come",
         "clean": "node bin/clean.mjs",
         "build": "npx @papit/build",
@@ -39,7 +39,9 @@
         "@papit/build": "*",
         "@papit/server": "*",
         "@papit/create": "*",
-        "@papit/version": "*"
+        "@papit/version": "*",
+        "@papit/analyse": "*",
+        "@papit/react": "*"
     },
     "papit": {}
 }

package/asset/showcase-templates/global/index.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VARIABLE_TITLE</title>
+
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+
+    <!-- Styles -->
+    <link rel="stylesheet" href="style.css" />
+
+    <script defer type="module" src="main.js"></script>
+</head>
+
+<body>
+    <pap-sidebar>
+        <h2 slot="header">Showcase</h2>
+        VARIABLE_SIDEBAR_CONTENT
+    </pap-sidebar>
+
+    <pap-router>
+        VARIABLE_ROUTER_PATHS
+    </pap-router>
+
+    <footer>
+        Footer
+    </footer>
+</body>
+
+</html>

package/asset/showcase-templates/global/main.js

@@ -0,0 +1,24 @@
+// core
+import { translator } from '@papit/translator';
+import "@papit/codeblock";
+import "@papit/tabs";
+import "@papit/router";
+
+// component
+import 'VARIABLE_NAME';
+
+window.onload = () => {
+    console.log('[demo]: window loaded');
+
+    translator.add({ id: "en", url: "/en.json" });
+    translator.change("en");
+
+    const tabs = document.querySelector("pap-tabs.individual-showcase");
+    const router = document.querySelector("pap-router.individual-showcase");
+
+    tabs.addEventListener("change", e => {
+        console.log(tabs, e.target.value);
+        router.url = e.target.value;
+    })
+}
+

package/asset/showcase-templates/global/public/translations/en.json

@@ -0,0 +1,7 @@
+{
+  "meta": {
+    "region": "GB",
+    "language": "en-UK"
+  },
+  "VARIABLE_NAME": "VARIABLE_NAME"
+}

package/asset/showcase-templates/global/style.css

@@ -0,0 +1,9 @@
+@import "@papit/theme";
+
+body {
+    background-color: var(--background, light-dark(oklch(96% 0 0), oklch(17% 0 0)));
+    color: contrast-color(var(--background));
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4, 16px);
+}

package/asset/showcase-templates/individual/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VARIABLE_CLASS_NAME</title>
+
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+
+    <!-- Styles -->
+    <link rel="stylesheet" href="style.css" />
+
+    <script defer type="module" src="main.js"></script>
+</head>
+
+<body>
+    <article>
+        <pap-tabs class="individual-showcase" value="VARIABLE_SELECTED_TAB">
+
+            <header>
+                <h1>VARIABLE_CLASS_NAME</h1>
+
+                VARIABLE_TABS_TAB
+            </header>
+
+            <pap-router class="individual-showcase">
+                VARIABLE_TABS_CONTENT
+            </pap-router>
+        </pap-tabs>
+    </article>
+</body>
+
+</html>

package/asset/showcase-templates/individual/main.js

@@ -0,0 +1,24 @@
+// core
+import { translator } from '@papit/translator';
+import "@papit/codeblock";
+import "@papit/tabs";
+import "@papit/router";
+
+// component
+import 'VARIABLE_NAME';
+
+window.onload = () => {
+    console.log('[demo]: window loaded');
+
+    translator.add({ id: "en", url: "/en.json" });
+    translator.change("en");
+
+    const tabs = document.querySelector("pap-tabs.individual-showcase");
+    const router = document.querySelector("pap-router.individual-showcase");
+
+    tabs.addEventListener("change", e => {
+        console.log(tabs, e.target.value);
+        router.url = e.target.value;
+    })
+}
+

package/asset/showcase-templates/individual/public/translations/en.json

@@ -0,0 +1,7 @@
+{
+  "meta": {
+    "region": "GB",
+    "language": "en-UK"
+  },
+  "VARIABLE_NAME": "VARIABLE_NAME"
+}

package/asset/showcase-templates/individual/style.css

@@ -0,0 +1,9 @@
+@import "@papit/theme";
+
+body {
+    background-color: var(--background, light-dark(oklch(96% 0 0), oklch(17% 0 0)));
+    color: contrast-color(var(--background));
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4, 16px);
+}

package/lib/bundle.js

@@ -1,4 +1,4 @@
 #!/usr/bin/env node
-import B from"node:path";import ne from"node:fs";import{Arguments as U}from"@papit/arguments";import{Information as le,PackageGraph as pe}from"@papit/information";import{Terminal as A}from"@papit/terminal";import k from"node:path";import C from"node:fs";import{Terminal as t}from"@papit/terminal";import{Information as F,PackageGraph as Z}from"@papit/information";import{Arguments as S}from"@papit/arguments";import I from"node:path";import $ from"node:fs";import{Information as R}from"@papit/information";import{Terminal as u}from"@papit/terminal";import{Arguments as b}from"@papit/arguments";import{Arguments as ie}from"@papit/arguments";import{Information as z,PackageGraph as oe}from"@papit/information";import{Terminal as j}from"@papit/terminal";import E from"node:fs";import L from"node:path";function N(e){return E.readdirSync(e).filter(o=>E.statSync(L.join(e,o)).isDirectory())}function re(e){return E.readdirSync(e).filter(o=>{let s=L.join(e,o);return!(!E.statSync(s).isDirectory()||oe.search(s))})}async function Y(){return j.sessionBlock(async()=>{let e=L.join(z.root.location,"packages"),o=e;for(;e;){let s=j.createSession(),a=re(e);j.write("Current: ",e.replace(z.root.location,z.scope)),j.write();let p=await j.option([["Choose Folder","Create Folder"],e===o?a:["..",...a]]);if(p.index===0)break;if(p.index===1){let c=await j.prompt("folder name",!1,e),l=L.join(e,c.input);await ae(l)&&(e=L.join(e,c.input))}else p.index===2&&e!==o?e=L.resolve(e,".."):e=L.join(e,a[p.index-(e===o?2:3)]);j.clearSession(s)}return e})}async function ae(e){return j.createSession(),j.write(`[${e}]`),ie.has("agree")||await j.confirm("confirm folder creation",!0)?(E.mkdirSync(e,{recursive:!0}),j.clearSession(),!0):!1}async function _(e,o,s){E.mkdirSync(o,{recursive:!0});let a=E.readdirSync(e,{withFileTypes:!0});for(let p of a){let c=L.join(e,p.name),l=L.join(o,p.name);if(p.isDirectory()){await _(c,l,s);continue}if(typeof s!="function"){E.copyFileSync(c,l);continue}let m=E.readFileSync(c,"utf-8"),n=await s(m,c,l);n!==!1&&(E.copyFileSync(c,l),E.writeFileSync(l,n,"utf-8"))}}function M(e){if(!e)return;let o=e.split(/[ |-]/),s=o.join("-");return{className:Q(o.map(Q).join("")),name:s.toLowerCase()}}function Q(e){return e?e.charAt(0).toUpperCase()+e.slice(1):""}function se(e){try{return $.readdirSync(e).length>0}catch{return!1}}function ce(e){$.existsSync(e)&&$.statSync(e).isDirectory()||$.mkdirSync(e)}async function J(e,o,s){let a=I.join(o?.destination??R.package.location,"package.json"),p=o?JSON.parse($.readFileSync(a,{encoding:"utf-8"})):R.package.packageJSON;p==null&&(u.error("could not find package's package.json file"),process.exit(1)),p.name===R.root.name&&(u.error("cannot create a component to root"),process.exit(1));let c=p,l=N(I.join(e,"asset/component-templates")),m=new Set;try{N(I.join(R.root.location,"bin/runners/component")).forEach(f=>{l.push(f),m.add(f)})}catch{}let n={index:l.findIndex(f=>f===c.papit?.type),text:""};if(n.text=l[n.index],n.index<0){let f=b.string("package")??b.string("type");n.index=l.findIndex(g=>g===f),n.index<0&&(u.createSession(),u.write("type of component"),n=await u.option(l),u.clearSession())}let y=b.string("html-prefix")??o?.htmlprefix??R.package.packageJSON.papit.htmlprefix??R.root.packageJSON.papit.htmlprefix;if(y?.trim()===""&&(y=void 0),y===void 0&&/web-components?/i.test(n.text)){let f=u.createSession();for(;;){let g;if(y!==void 0?(g=(await u.prompt(`use default "${y}" or override?`)).input,g||(g=y)):g=(await u.prompt("html prefix",!0)).input,g){y=g;break}else u.clearSession(),u.write("you must use a html-prefix for web-components")}u.clearSession(f)}let w=o?.nameInfo;for(;!w;){u.clearSession();let f=b.string("name");if(f||(f=(await u.prompt("(component) name",!0)).input),w=M(f),!w){u.write("name missing, try again");continue}if(c.papit.components[w.name]){u.write("name already exist, try again");continue}break}u.createSession();let P=o?.shouldCommit??b.true("agree")??b.true("commit")??await u.confirm("git commit",!0);u.clearSession();let O=m.has(n.text)?I.join(R.root.location,"bin","runners","component",n.text):I.join(e,"asset","component-templates",n.text),x=N(O);c.papit.components[w.name]={className:w.className,htmlprefix:y},$.writeFileSync(a,JSON.stringify(c,null,2),{encoding:"utf-8"}),P&&await u.execute(`git add ${a}`,R.root.location);for(let f of x){let g=I.join(o?.destination??R.package.location,f),d=g,D=I.join(O,f);if(f==="src"?se(g)&&(g=I.join(g,"components"),d=I.join(g,w.name)):d=I.join(g,w.name),ce(g),s&&(d=s(d,f)),await _(D,d,G=>G.replace(/VARIABLE_NAME/g,w.name).replace(/VARIABLE_FULL_NAME/g,c.name).replace(/VARIABLE_HTML_NAME/g,`${y}-${w.name}`).replace(/VARIABLE_CLASS_NAME/g,w.className)),P)try{await u.execute(`git add ${d}`,R.root.location)}catch{u.warn(`"git add ${d}" failed`)}}!o?.shouldCommit&&P&&await u.execute(`git commit -m "add: ${w.name} component"`,R.root.location)}async function ee(e){let o=t.createSession(),s=F.root.packageJSON;s===null&&(t.error("root package.json not found"),process.exit(1));let a=await Y(),p=N(k.join(e,"asset","package-templates")),c=new Set;try{N(k.join(F.root.location,"bin","runners","package")).forEach(i=>{C.existsSync(k.join(F.root.location,"bin","runners","package",i,"package.json"))&&(p.push(i),c.add(i))})}catch{}let l=S.string("package")??S.string("type"),m={index:p.findIndex(i=>i===l),text:""};m.text=p[m.index],m.index<0&&(t.write("type of package"),m=await t.option(p)),t.clearSession();let n=S.string("html-prefix");if(n?.trim()===""&&(n=void 0),!n&&/web-components?/i.test(m.text)){for(n||(n=s.papit?.htmlprefix),S.info||t.createSession();;){let i;if(n?(i=(await t.prompt(`use default "${n}" or override?`)).input,i||(i=n)):(i=(await t.prompt("html prefix",!0)).input,s.papit?.htmlprefix||await t.confirm(`you wish to set "${i}" as the default html-prefix?`)&&(s.papit.htmlprefix=i,C.writeFileSync(k.join(F.root.location,"package.json"),JSON.stringify(s,null,2),{encoding:"utf-8"}))),i){n=i;break}else S.info||t.clearSession(),t.warn("you must use a html-prefix for web-components")}S.info||t.clearSession()}let y=k.relative(F.root.location,a),w=k.basename(a);s.repository?.url||t.warn("root package.json does not have 'repository.url'");let P=(s.repository?.url??"").replace(/\.git$/,""),O=k.join(F.root.location,"package-lock.json");t.clearSession(o);let x,f;for(;f===void 0||x===void 0;){t.clearSession();let i=S.string("name");if(i||(i=(await t.prompt("(package) name",!0)).input),x=M(i),!x){t.write("name missing, try again");continue}let h=`${F.scope}/${x.name}`;Z.get(h)?t.write("package already exists, try again"):f=h}let g=S.string("description");g||(g=(await t.prompt("description",!0)).input),t.write(),t.createSession();let d=k.join(a,x.name),D=i=>i.replace(/\\/g,"/"),G=c.has(m.text)?k.join(F.root.location,"bin","runners","package",m.text):k.join(e,"asset","package-templates",m.text);await _(G,d,async(i,h)=>h.endsWith(".gitkeep")?!1:i.replace(/VARIABLE_NAME/g,x.name).replace(/VARIABLE_FULL_NAME/g,f).replace(/VARIABLE_DESCRIPTION/g,g).replace(/VARIABLE_LAYER_FOLDER/g,w).replace(/VARIABLE_PROJECTLICENSE/g,s.license||"MIT").replace(/VARIABLE_GITHUB_REPO/g,P).replace(/VARIABLE_LOCAL_DESTINATION/g,D(k.join(y,x.name))).replace(/VARIABLE_CLASS_NAME/g,x.className).replace(/VARIABLE_HTML_PREFIX/g,n??"").replace(/VARIABLE_HTML_NAME/g,`${n}-${x.name}`).replace(/VARIABLE_USER/g,process.env.USER??"anonymous"));let H=JSON.parse(C.readFileSync(k.join(d,"package.json"),{encoding:"utf-8"}));H||(t.error(`package.json not found at "${d}"`),process.exit(1)),H.papit||(H.papit={main:x.name,components:{},publish:!0,type:m.text}),Z.add(d),t.createSession();let T=!1;S.has("no")?T=!1:S.has("yes")?T=!0:T=S.true("agree")||S.true("commit")||await t.confirm("git commit",!0),t.clearSession(),await J(e,{destination:d,nameInfo:x,htmlprefix:n,shouldCommit:T},(i,h)=>(h==="src"&&(i=i.replace(/[/\\]components[/\\].*/,"")),h==="lib"&&(i=i.replace(new RegExp(x.name+"$"),"")),h==="views"&&(i=i.replace(new RegExp(x.name+"$"),"experiment")),S.debug&&t.info(JSON.stringify({dest:i,folder:h})),i));let K=k.join(d,"src","components");C.existsSync(K)&&C.rmdirSync(K),t.createSession();let V=!1;if(S.has("no")?V=!1:S.has("yes")?V=!0:V=S.true("agree")||S.true("install")||await t.confirm("install package",!0),V){let{close:i}=t.loading("installing");try{await t.execute("npm install",g)}catch(h){t.warn("error during install"),console.log(h),t.createSession()}finally{i(),t.clearSession()}}else t.clearSession();if(T)try{await t.execute(`git add ${O}`,d),await t.execute(`git add ${d}`,d),await t.execute(`git commit -m "add: ${f} package"`,d)}catch{t.warn("error during commit")}t.write(`${f} created
-`)}import te from"node:path";import W from"node:fs";import{Arguments as v}from"@papit/arguments";import{Terminal as r}from"@papit/terminal";async function q(e){r.write(`Project Creation
-`),r.createSession();let o=v.string("name");o===void 0&&(o=(await r.prompt("name",!0)).input);let s=v.string("description");s===void 0&&(s=(await r.prompt("description",!0)).input);let a=v.string("location");if(a===void 0){let n=await r.prompt(process.cwd(),!0,process.cwd());a=te.join(n.path,o)}r.write(),r.createSession(),await r.sessionBlock(async()=>{if(!W.existsSync(a))return;await r.confirm(`confirm to remove it [${a}]`)?W.rmSync(a,{recursive:!0,force:!0}):(r.error("must choose a empty location"),process.exit(1))}),await r.confirm(`confirm location [${r.yellow(a)}]`,!0)||(r.warn("abort"),process.exit(0)),W.mkdirSync(a,{recursive:!0}),r.clearSession(),r.write();let c=v.string("license")??"MIT";c===void 0&&(c=(await r.prompt("license (default MIT)")).input),r.clearSession();let l=!v.has("skip-git");if(l){let{close:n,update:y}=r.loading("git init",3e3,w=>{w>400?y("runnign slow"):w>800?y("something seems wrong"):w>1500&&y("yeah somethign is very wrong")});await r.execute("git init",{cwd:a}),r.clearSession(),n()}await _(te.join(e,"asset/project-template"),a,async(n,y)=>y.endsWith(".gitkeep")?!1:n.replace(/VARIABLE_NAME/g,`@${o}/root`).replace(/VARIABLE_DESCRIPTION/g,s).replace(/VARIABLE_PROJECTLICENSE/g,c||"MIT").replace(/VARIABLE_USER/g,process.env.USER??"anonymous")),l&&(await r.execute("git add .",{cwd:a}),await r.execute(`git commit -m "init: ${o} initialized"`,{cwd:a}));let{close:m}=r.loading("installing",2e4);await r.execute("npm install",{cwd:a}),m(),r.clearSession(),r.write(),r.write("project initialized"),r.write("try it:"),r.write(" (1)",r.yellow(`cd ${a}`)),r.write(" (2)",r.yellow("npm start")),process.exit(0)}(async function(){U.init(process.argv,["install","commit","agree"]),U.verbose&&(process.env.verbose="true");let e=B.dirname(import.meta.dirname),o=JSON.parse(ne.readFileSync(B.join(e,"package.json"),{encoding:"utf-8"}));if(o||(A.error("could not find @papit/create package.json"),process.exit(1)),!process.env.USER){A.createSession();let l=await A.prompt("your name",!0);process.env.USER=l.input,A.clearSession()}A.write(),A.write("@papit/create",A.yellow(o.version),"- running"),A.write();let s=new Set;if(pe.ERROR){await q(e);return}let a=B.join(le.root.location,"bin/runners"),p=["package","component","project","showcase"];try{N(a).forEach(m=>{if(p.includes(m))return;let n=B.join(a,m,"runner.js");ne.existsSync(n)&&(s.add(m),p.push(m))})}catch{}let c=null;for(let l=0;l<p.length;l++)if(U.has(p[l])){c={index:l,text:p[l]};break}switch(c===null&&(A.createSession(),c=await A.option(p),A.clearSession()),c.index){case 0:await ee(e);break;case 1:await J(e);break;case 2:await q(e);break;default:{s.has(c.text)||(A.error("requested a runner that doesnt exist"),process.exit(1));let l=B.join(a,c.text,"runner.js");U.verbose&&A.write(`running local runner "${c.text}"`);let{default:m}=await import(l);await m();break}}process.exit()})();
+import G from"node:path";import se from"node:fs";import{Arguments as K}from"@papit/arguments";import{Information as ye,PackageGraph as he}from"@papit/information";import{Terminal as E}from"@papit/terminal";import k from"node:path";import U from"node:fs";import{Terminal as i}from"@papit/terminal";import{Information as P,PackageGraph as ie}from"@papit/information";import{Arguments as x}from"@papit/arguments";import v from"node:path";import C from"node:fs";import{Information as b}from"@papit/information";import{Terminal as d}from"@papit/terminal";import{Arguments as T}from"@papit/arguments";import{Arguments as ce}from"@papit/arguments";import{Information as X,PackageGraph as pe}from"@papit/information";import{Terminal as N}from"@papit/terminal";import L from"node:fs";import I from"node:path";function _(e){return L.readdirSync(e).filter(n=>L.statSync(I.join(e,n)).isDirectory())}function le(e){return L.readdirSync(e).filter(n=>{let a=I.join(e,n);return!(!L.statSync(a).isDirectory()||pe.search(a))})}async function te(){return N.sessionBlock(async()=>{let e=I.join(X.root.location,"packages"),n=e;for(;e;){let a=N.createSession(),o=le(e);N.write("Current: ",e.replace(X.root.location,X.scope)),N.write();let p=await N.option([["Choose Folder","Create Folder"],e===n?o:["..",...o]]);if(p.index===0)break;if(p.index===1){let s=await N.prompt("folder name",!1,e),r=I.join(e,s.input);await me(r)&&(e=I.join(e,s.input))}else p.index===2&&e!==n?e=I.resolve(e,".."):e=I.join(e,o[p.index-(e===n?2:3)]);N.clearSession(a)}return e})}async function me(e){return N.createSession(),N.write(`[${e}]`),ce.has("agree")||await N.confirm("confirm folder creation",!0)?(L.mkdirSync(e,{recursive:!0}),N.clearSession(),!0):!1}async function F(e,n,a){L.mkdirSync(n,{recursive:!0});let o=L.readdirSync(e,{withFileTypes:!0});for(let p of o){let s=I.join(e,p.name),r=I.join(n,p.name);if(p.isDirectory()){await F(s,r,a);continue}if(typeof a!="function"){L.copyFileSync(s,r);continue}let f=L.readFileSync(s,"utf-8"),t=await a(f,s,r);t!==!1&&(L.copyFileSync(s,r),L.writeFileSync(r,t,"utf-8"))}}function $(e){if(!e)return;let n=e.split(/[ |-]/),a=n.join("-");return{className:ne(n.map(ne).join("")),name:a.toLowerCase()}}function ne(e){return e?e.charAt(0).toUpperCase()+e.slice(1):""}function fe(e){try{return C.readdirSync(e).length>0}catch{return!1}}function ue(e){C.existsSync(e)&&C.statSync(e).isDirectory()||C.mkdirSync(e)}async function W(e,n,a){let o=v.join(n?.destination??b.package.location,"package.json"),p=n?JSON.parse(C.readFileSync(o,{encoding:"utf-8"})):b.package.packageJSON;p==null&&(d.error("could not find package's package.json file"),process.exit(1)),p.name===b.root.name&&(d.error("cannot create a component to root"),process.exit(1));let s=p,r=_(v.join(e,"asset/component-templates")),f=new Set;try{_(v.join(b.root.location,"bin/runners/component")).forEach(m=>{r.push(m),f.add(m)})}catch{}let t={index:r.findIndex(m=>m===s.papit?.type),text:""};if(t.text=r[t.index],t.index<0){let m=T.string("package")??T.string("type");t.index=r.findIndex(u=>u===m),t.index<0&&(d.createSession(),d.write("type of component"),t=await d.option(r),d.clearSession())}let w=T.string("html-prefix")??n?.htmlprefix??b.package.packageJSON.papit.htmlprefix??b.root.packageJSON.papit.htmlprefix;if(w?.trim()===""&&(w=void 0),w===void 0&&/web-components?/i.test(t.text)){let m=d.createSession();for(;;){let u;if(w!==void 0?(u=(await d.prompt(`use default "${w}" or override?`)).input,u||(u=w)):u=(await d.prompt("html prefix",!0)).input,u){w=u;break}else d.clearSession(),d.write("you must use a html-prefix for web-components")}d.clearSession(m)}let y=n?.nameInfo;for(;!y;){d.clearSession();let m=T.string("name");if(m||(m=(await d.prompt("(component) name",!0)).input),y=$(m),!y){d.write("name missing, try again");continue}if(s.papit.components[y.name]){d.write("name already exist, try again");continue}break}d.createSession();let R=n?.shouldCommit??T.true("agree")??T.true("commit")??await d.confirm("git commit",!0);d.clearSession();let V=f.has(t.text)?v.join(b.root.location,"bin","runners","component",t.text):v.join(e,"asset","component-templates",t.text),h=_(V);s.papit.components[y.name]={className:y.className,htmlprefix:w},C.writeFileSync(o,JSON.stringify(s,null,2),{encoding:"utf-8"}),R&&await d.execute(`git add ${o}`,b.root.location);for(let m of h){let u=v.join(n?.destination??b.package.location,m),g=u,S=v.join(V,m);if(m==="src"?fe(u)&&(u=v.join(u,"components"),g=v.join(u,y.name)):g=v.join(u,y.name),ue(u),a&&(g=a(g,m)),await F(S,g,M=>M.replace(/VARIABLE_NAME/g,y.name).replace(/VARIABLE_FULL_NAME/g,s.name).replace(/VARIABLE_HTML_NAME/g,`${w}-${y.name}`).replace(/VARIABLE_CLASS_NAME/g,y.className)),R)try{await d.execute(`git add ${g}`,b.root.location)}catch{d.warn(`"git add ${g}" failed`)}}!n?.shouldCommit&&R&&await d.execute(`git commit -m "add: ${y.name} component"`,b.root.location)}async function oe(e){let n=i.createSession(),a=P.root.packageJSON;a===null&&(i.error("root package.json not found"),process.exit(1));let o=await te(),p=_(k.join(e,"asset","package-templates")),s=new Set;try{_(k.join(P.root.location,"bin","runners","package")).forEach(c=>{U.existsSync(k.join(P.root.location,"bin","runners","package",c,"package.json"))&&(p.push(c),s.add(c))})}catch{}let r=x.string("package")??x.string("type"),f={index:p.findIndex(c=>c===r),text:""};f.text=p[f.index],f.index<0&&(i.write("type of package"),f=await i.option(p)),i.clearSession();let t=x.string("html-prefix");if(t?.trim()===""&&(t=void 0),!t&&/web-components?/i.test(f.text)){for(t||(t=a.papit?.htmlprefix),x.info||i.createSession();;){let c;if(t?(c=(await i.prompt(`use default "${t}" or override?`)).input,c||(c=t)):(c=(await i.prompt("html prefix",!0)).input,a.papit?.htmlprefix||await i.confirm(`you wish to set "${c}" as the default html-prefix?`)&&(a.papit.htmlprefix=c,U.writeFileSync(k.join(P.root.location,"package.json"),JSON.stringify(a,null,2),{encoding:"utf-8"}))),c){t=c;break}else x.info||i.clearSession(),i.warn("you must use a html-prefix for web-components")}x.info||i.clearSession()}let w=k.relative(P.root.location,o),y=k.basename(o);a.repository?.url||i.warn("root package.json does not have 'repository.url'");let R=(a.repository?.url??"").replace(/\.git$/,"").replace(/^git\+/,""),V=k.join(P.root.location,"package-lock.json");i.clearSession(n);let h,m;for(;m===void 0||h===void 0;){i.clearSession();let c=x.string("name");if(c||(c=(await i.prompt("(package) name",!0)).input),h=$(c),!h){i.write("name missing, try again");continue}let j=`${P.scope}/${h.name}`;ie.get(j)?i.write("package already exists, try again"):m=j}let u=x.string("description");u||(u=(await i.prompt("description",!0)).input),i.write(),i.createSession();let g=k.join(o,h.name),S=c=>c.replace(/\\/g,"/"),M=s.has(f.text)?k.join(P.root.location,"bin","runners","package",f.text):k.join(e,"asset","package-templates",f.text);await F(M,g,async(c,j)=>j.endsWith(".gitkeep")?!1:c.replace(/VARIABLE_NAME/g,h.name).replace(/VARIABLE_FULL_NAME/g,m).replace(/VARIABLE_DESCRIPTION/g,u).replace(/VARIABLE_LAYER_FOLDER/g,y).replace(/VARIABLE_PROJECTLICENSE/g,a.license||"MIT").replace(/VARIABLE_GITHUB_REPO/g,R).replace(/VARIABLE_LOCAL_DESTINATION/g,S(k.join(w,h.name))).replace(/VARIABLE_CLASS_NAME/g,h.className).replace(/VARIABLE_HTML_PREFIX/g,t??"").replace(/VARIABLE_HTML_NAME/g,`${t}-${h.name}`).replace(/VARIABLE_USER/g,process.env.USER??"anonymous"));let B=JSON.parse(U.readFileSync(k.join(g,"package.json"),{encoding:"utf-8"}));B||(i.error(`package.json not found at "${g}"`),process.exit(1)),B.papit||(B.papit={main:h.name,components:{},publish:!0,type:f.text}),ie.add(g),i.createSession();let J=!1;x.has("no")?J=!1:x.has("yes")?J=!0:J=x.true("agree")||x.true("commit")||await i.confirm("git commit",!0),i.clearSession(),await W(e,{destination:g,nameInfo:h,htmlprefix:t,shouldCommit:J},(c,j)=>(j==="src"&&(c=c.replace(/[/\\]components[/\\].*/,"")),j==="lib"&&(c=c.replace(new RegExp(h.name+"$"),"")),j==="views"&&(c=c.replace(new RegExp(h.name+"$"),"experiment")),x.debug&&i.info(JSON.stringify({dest:c,folder:j})),c));let Z=k.join(g,"src","components");U.existsSync(Z)&&U.rmdirSync(Z),i.createSession();let z=!1;if(x.has("no")?z=!1:x.has("yes")?z=!0:z=x.true("agree")||x.true("install")||await i.confirm("install package",!0),z){let{close:c}=i.loading("installing");try{await i.execute("npm install",u)}catch(j){i.warn("error during install"),console.log(j),i.createSession()}finally{c(),i.clearSession()}}else i.clearSession();if(J)try{await i.execute(`git add ${V}`,g),await i.execute(`git add ${g}`,g),await i.execute(`git commit -m "add: ${m} package"`,g)}catch{i.warn("error during commit")}i.write(i.yellow(k.relative(P.root.location,g))),i.write(`${m} created
+`)}import ae from"node:path";import Y from"node:fs";import{Arguments as D}from"@papit/arguments";import{Terminal as l}from"@papit/terminal";async function Q(e){l.write(`Project Creation
+`),l.createSession();let n=D.string("name");n===void 0&&(n=(await l.prompt("name",!0)).input);let a=D.string("description");a===void 0&&(a=(await l.prompt("description",!0)).input);let o=D.string("location");if(o===void 0){let t=await l.prompt(process.cwd(),!0,process.cwd());o=ae.join(t.path,n)}l.write(),l.createSession(),await l.sessionBlock(async()=>{if(!Y.existsSync(o))return;await l.confirm(`confirm to remove it [${o}]`)?Y.rmSync(o,{recursive:!0,force:!0}):(l.error("must choose a empty location"),process.exit(1))}),await l.confirm(`confirm location [${l.yellow(o)}]`,!0)||(l.warn("abort"),process.exit(0)),Y.mkdirSync(o,{recursive:!0}),l.clearSession(),l.write();let s=D.string("license")??"MIT";s===void 0&&(s=(await l.prompt("license (default MIT)")).input),l.clearSession();let r=!D.has("skip-git");if(r){let{close:t,update:w}=l.loading("git init",3e3,y=>{y>400?w("runnign slow"):y>800?w("something seems wrong"):y>1500&&w("yeah somethign is very wrong")});await l.execute("git init",{cwd:o}),l.clearSession(),t()}await F(ae.join(e,"asset/project-template"),o,async(t,w)=>w.endsWith(".gitkeep")?!1:t.replace(/VARIABLE_NAME/g,`@${n}/root`).replace(/VARIABLE_DESCRIPTION/g,a).replace(/VARIABLE_PROJECTLICENSE/g,s||"MIT").replace(/VARIABLE_USER/g,process.env.USER??"anonymous")),r&&(await l.execute("git add .",{cwd:o}),await l.execute(`git commit -m "init: ${n} initialized"`,{cwd:o}));let{close:f}=l.loading("installing",2e4);await l.execute("npm install",{cwd:o}),f(),l.clearSession(),l.write(),l.write("project initialized"),l.write("try it:"),l.write(" (1)",l.yellow(`cd ${o}`)),l.write(" (2)",l.yellow("npm start")),process.exit(0)}import q from"node:fs";import A from"node:path";import{meta as ge}from"@papit/server";import{Arguments as O}from"@papit/arguments";import{Information as H}from"@papit/information";async function re(e){let{importmap:n}=await ge(),a=A.join(e,"asset","showcase-templates"),o=O.string("output");o&&q.existsSync(o)||O.debug&&console.log("no output argument provided");let p=we(["web-component","game","theme"]),s=new Map,r=[];for(let f of p)for(let t of f){let w=A.relative(A.join(H.root.location,"packages"),t.location),y=A.dirname(w);s.set(y,(s.get(y)??[]).concat([t]));let R=O.get("view-filter")??["showcase","raw","experiment"];try{let h=A.join(t.location,"views"),m=q.readdirSync(h).map(S=>A.join(h,S)).filter(S=>q.statSync(S).isDirectory()&&q.existsSync(A.join(S,"index.html"))&&R.includes(A.basename(S))).map(S=>A.basename(S)).sort((S,M)=>(R.findIndex(B=>B===S)??R.length)-(R.findIndex(B=>B===M)??R.length)),u=m.at(0);u!=="showcase"&&(O.debug&&console.log("no showcase view folder, showcase view generated"),await de(t,m,a));let g={realpath:A.join(w,"views/:view"),path:A.join(w,":view"),view:u?A.join(w,"views",u):""};for(let S=1;S<m.length;S++)g[`fallback-view${S!==1?S:""}`]=m[S];r.push()}catch{}let V=[]}}async function de(e,n,a){let o=$(e.name.replace(H.scope+"/",""))??{name:e.name,className:e.name},p=O.string("html-prefix")??e.packageJSON.papit.htmlprefix??H.root.packageJSON.papit.htmlprefix;await F(A.join(a,"individual"),A.join(e.location,"views/showcase"),s=>s.replace(/VARIABLE_NAME/g,e.name).replace(/VARIABLE_HTML_NAME/g,`${p}-${o.name}`).replace(/VARIABLE_CLASS_NAME/g,o.className).replace(/VARIABLE_TABS_TAB/g,'<pap-tab slot="tab" value="showcase">showcase</pap-tab>'+n.map(r=>`<pap-tab slot="tab" value="${r}">${r}</pap-tab>`).join(" ")).replace(/VARIABLE_TABS_CONTENT/g,['<pap-tabpanel value="showcase" path=":view" view="showcase" realpath="views/:view"></pap-tabpanel>',n.map(r=>`<pap-tabpanel value="${r}" path=":view" view="${r}" realpath="views/:view"></pap-tabpanel>`).join(" ")].join(" ")).replace(/VARIABLE_SELECTED_TAB/g,"showcase"))}function we(e){return H.getPriorityBatches(O.instance,n=>n.name.startsWith(H.scope)).map(n=>n.filter(a=>{if(a.packageJSON.papit.skip)return!1;if(typeof a.packageJSON.papit.type=="string"){if(!e.includes(a.packageJSON.papit.type))return!1}else{let o=a.packageJSON.papit.type,p=!1;for(let s in o)if(e.includes(o[s])){p=!0;break}if(!p)return!1}return!0}))}(async function(){K.init(process.argv,["install","commit","agree"]),K.verbose&&(process.env.verbose="true");let e=G.dirname(import.meta.dirname),n=JSON.parse(se.readFileSync(G.join(e,"package.json"),{encoding:"utf-8"}));if(n||(E.error("could not find @papit/create package.json"),process.exit(1)),!process.env.USER){E.createSession();let r=await E.prompt("your name",!0);process.env.USER=r.input,E.clearSession()}E.write(),E.write("@papit/create",E.yellow(n.version),"- running"),E.write();let a=new Set;if(he.ERROR){await Q(e);return}let o=G.join(ye.root.location,"bin/runners"),p=["package","component","project","showcase"];try{_(o).forEach(f=>{if(p.includes(f))return;let t=G.join(o,f,"runner.js");se.existsSync(t)&&(a.add(f),p.push(f))})}catch{}let s=null;for(let r=0;r<p.length;r++)if(K.has(p[r])){s={index:r,text:p[r]};break}switch(s===null&&(E.createSession(),s=await E.option(p),E.clearSession()),s.index){case 0:await oe(e);break;case 1:await W(e);break;case 2:await Q(e);break;case 3:await re(e);break;default:{a.has(s.text)||(E.error("requested a runner that doesnt exist"),process.exit(1));let r=G.join(o,s.text,"runner.js");K.verbose&&E.write(`running local runner "${s.text}"`);let{default:f}=await import(r);await f();break}}process.exit()})();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@papit/create",
-  "description": "",
-  "version": "0.0.10",
+  "description": "Scaffolds papit packages, components and monorepo projects from templates, interactively or through flags. Run it inside a papit workspace to add a package or component, or outside one to start a new project.",
+  "version": "0.0.12",
   "scripts": {
     "build": "npx @papit/build -- --error --ancestors",
     "watch": "tsc -w",
@@ -49,7 +49,8 @@
   },
   "dependencies": {
     "@papit/arguments": "0.0.1",
-    "@papit/information": "0.0.6",
+    "@papit/information": "0.0.9",
+    "@papit/server": "1.0.8",
     "@papit/terminal": "0.0.2"
   },
   "devDependencies": {
@@ -57,8 +58,15 @@
     "typescript": "5.9.3"
   },
   "keywords": [
+    "papit",
+    "cli",
     "node",
-    "typescript"
+    "typescript",
+    "create",
+    "scaffolding",
+    "templates",
+    "monorepo",
+    "web-component"
   ],
   "papit": {
     "publish": true,
@@ -69,5 +77,5 @@
     },
     "components": {}
   },
-  "remoteVersion": "0.0.9"
+  "remoteVersion": "0.0.11"
 }