@agimon-ai/doompi-style-system 0.0.1-alpha.76

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Vuong Ngo
+
+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,53 @@
+# @agimon-ai/doompi-style-system
+
+Optional DoomPi integration for building disposable interactive story previews with `@agimon-ai/style-system`.
+
+When this package and `@agimon-ai/doompi-author` are both installed, Author shows an **Open story preview** action. The temporary tab reads the focused `.stories.js`, `.stories.jsx`, `.stories.ts`, or `.stories.tsx` source, discovers exact named exports, builds only after an explicit action, runs the compiled HTML in an isolated iframe, and retains the composer for source-targeted feedback.
+
+The portable `doompi-design` binary also works without Pi, DoomPi, Author, or MCP. Discovery commands delegate to the published style-system CLI. Structured commands provide exact story metadata, bounded checks, stale-evidence verification, and explicit preview builds:
+
+```bash
+doompi-design metadata --story-path src/Button.stories.tsx
+doompi-design check --target docs/specs/button/design-target.json --report docs/specs/button/design-check.json
+doompi-design verify --report docs/specs/button/design-check.json
+doompi-design preview --app-path . --story-path src/Button.stories.tsx --story-export Playground --output .tmp/button.html
+```
+
+Use `--workspace <path>` when the process working directory is not the admitted project root.
+
+## Opt in
+
+Install both packages, then add them to a layer used by your selected major mode:
+
+```yaml
+layers:
+  design:
+    packages:
+      - '@agimon-ai/doompi-author'
+      - '@agimon-ai/doompi-style-system'
+majorMode:
+  design:
+    description: Interactive source-backed story design.
+    layers: [design]
+```
+
+The package is not added to DoomPi's default distribution mode.
+
+Generated HTML is a preview artifact. AI changes must target the underlying story or component source. Refresh the preview after edits before treating it as visually verified.
+
+## Image export
+
+**Export PNG**, **Prepare annotation**, and **Send to AI** render a fresh image from current source through style-system. Users can mark one normalized region or comment on the whole frozen image. The image does not include transient interaction state inside the iframe, and the UI states this limitation instead of presenting it as an exact capture of iframe state.
+
+## Security
+
+Preview building executes trusted workspace source on the server. Project, story, and generated artifact paths are realpath-fenced to the admitted workspace. Browser previews use a script-only opaque-origin iframe and a restrictive content security policy. Remote assets are rejected by that policy, so preview assets must be included in the single-file bundle.
+
+## Development
+
+```bash
+pnpm --filter @agimon-ai/doompi-style-system lint
+pnpm --filter @agimon-ai/doompi-style-system typecheck
+pnpm --filter @agimon-ai/doompi-style-system test
+pnpm --filter @agimon-ai/doompi-style-system build
+```

package/package.json

@@ -0,0 +1,135 @@
+{
+  "name": "@agimon-ai/doompi-style-system",
+  "version": "0.0.1-alpha.76",
+  "description": "Optional DoomPi story preview integration for the style-system package.",
+  "keywords": [
+    "ai",
+    "coding-agent",
+    "developer-tools",
+    "doompi",
+    "pi-package",
+    "storybook",
+    "style-system",
+    "ui-preview"
+  ],
+  "homepage": "https://agimon.ai",
+  "bugs": {
+    "url": "https://github.com/AgiFlow/doompi/issues"
+  },
+  "license": "MIT",
+  "author": "Vuong Ngo",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AgiFlow/doompi.git",
+    "directory": "layers/design/doompi-style-system"
+  },
+  "bin": {
+    "doompi-design": "./dist/cli.mjs"
+  },
+  "files": [
+    "dist",
+    "skills",
+    "README.md"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "types": "./dist/index.d.mts",
+  "jsnext:main": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./api-contracts": {
+      "types": "./dist/api-contracts.d.mts",
+      "import": "./dist/api-contracts.mjs",
+      "require": "./dist/api-contracts.cjs"
+    },
+    "./cli": {
+      "types": "./dist/cli.d.mts",
+      "import": "./dist/cli.mjs",
+      "require": "./dist/cli.cjs"
+    },
+    "./extensions/pi": {
+      "types": "./dist/extensions/pi.d.mts",
+      "import": "./dist/extensions/pi.mjs",
+      "require": "./dist/extensions/pi.cjs"
+    },
+    "./extensions/server": {
+      "types": "./dist/extensions/server.d.mts",
+      "import": "./dist/extensions/server.mjs",
+      "require": "./dist/extensions/server.cjs"
+    },
+    "./extensions/web": {
+      "import": "./dist/extensions/web.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@agimon-ai/doompi-core": "0.0.1-alpha.75",
+    "@agimon-ai/doompi-web-components": "0.0.1-alpha.33",
+    "@agimon-ai/doompi-web-security": "0.0.1-alpha.35",
+    "@agimon-ai/style-system": "0.1.3",
+    "hono": "4.13.7",
+    "typebox": "1.3.30"
+  },
+  "devDependencies": {
+    "@agimon-ai/doompi-build": "0.0.1-alpha.4",
+    "@earendil-works/pi-coding-agent": "0.85.1",
+    "@types/node": "26.5.1",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "@vitest/coverage-v8": "5.0.0",
+    "react": "19.3.0",
+    "react-dom": "19.3.0",
+    "tsdown": "0.23.0",
+    "typescript": "7.0.2",
+    "vitest": "5.0.0"
+  },
+  "peerDependencies": {
+    "@earendil-works/pi-coding-agent": "0.85.1"
+  },
+  "peerDependenciesMeta": {
+    "@earendil-works/pi-coding-agent": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=22.19.0"
+  },
+  "doompiServer": {
+    "entry": "./generated/server.ts",
+    "dist": "./dist/extensions/server.mjs",
+    "scopes": [
+      "session"
+    ],
+    "contracts": {
+      "entry": "./src/exports/apiContracts.ts",
+      "dist": "./dist/api-contracts.mjs"
+    }
+  },
+  "doompiWeb": {
+    "pluginId": "style-system",
+    "channels": [],
+    "client": "./dist/extensions/web.mjs",
+    "scopes": [
+      "session"
+    ]
+  },
+  "pi": {
+    "extensions": [
+      "./dist/extensions/pi.mjs"
+    ]
+  },
+  "scripts": {
+    "build": "tsdown",
+    "test": "vitest --run",
+    "typecheck": "tsc --noEmit && tsc --noEmit -p tsconfig.web.json",
+    "lint": "oxlint . && oxfmt . --check",
+    "fixcode": "oxlint . --fix && oxfmt ."
+  }
+}

package/skills/design-workflow/SKILL.md

@@ -0,0 +1,84 @@
+---
+name: design-workflow
+description: Use the DoomPi design workflow for source-backed interactive story design, component discovery, token guidance, validation, and an approved implementation specification.
+---
+
+# Source-backed design workflow
+
+Use this workflow when a feature needs an interactive UI target before production integration. The story is a target-state artifact, not a throwaway HTML mockup. Keep the target deterministic and source-backed so it can be reviewed and later connected to real APIs, hooks, stores, and routes.
+
+## Keep context lean
+
+Do not paste an entire component catalog, token list, or design-system manual into the conversation. Discover only what the current surface needs:
+
+```bash
+doompi-design list-shared-components
+doompi-design list-app-components --app-path <project>
+doompi-design get-css-classes --app-path <project> --category all
+doompi-design list-themes --app-path <project>
+```
+
+If `doompi-design` is unavailable, use the published `@agimon-ai/style-system` CLI with the same commands. The workflow is portable and does not require Pi, DoomPi, Author, or MCP.
+
+Use repository source as the authority for principles and managed tokens. In this repository, begin with:
+
+- `packages/core/doompi-web-components/README.md`
+- `packages/core/doompi-web-components/styles/tokens.css`
+- the applicable project `style-system.config.yaml`
+- applicable Vibe-Lint rule descriptions
+
+The catalog is story-backed and may not include every exported component. Unknown components are unresolved, not proof that no component exists.
+
+## Design
+
+1. Identify the project, user journey, states, interactions, permissions, and responsive constraints.
+2. Inspect and reuse an existing shared or application component before creating one.
+3. Define deterministic fixtures for loading, empty, error, populated, and interaction states.
+4. Build a Storybook story for a presentational View. Keep API hooks, stores, router calls, SDK calls, and side effects in a Container outside the story.
+5. Use the configured semantic tokens and primitives. Do not invent raw palette values or arbitrary scale values to make a screenshot look right.
+6. Build the interactive preview explicitly and inspect the actual interaction states. Generated HTML is a disposable artifact.
+7. Edit the underlying story or component source, never generated preview HTML.
+
+Rendering and component capture execute trusted workspace source. Do not run a file-polishing or mutating design command during review unless the user explicitly asks for that edit.
+
+## Check
+
+Run the explicit bounded check for the target after the story and relevant styles change:
+
+```bash
+doompi-design check --target <target-manifest.json>
+```
+
+The check is static and bounded. It reports separately:
+
+- confirmed policy violations, such as raw theme colors or arbitrary scale values;
+- recognized static classes and managed tokens;
+- unresolved dynamic expressions, custom selectors, missing imports, or unsupported configuration;
+- checked inputs, coverage limits, tool versions, and fingerprints.
+
+A Tailwind class being recognized does not make it compliant. A missing generated class does not by itself make a class invalid because marker classes and ordinary custom CSS may be valid. Dynamic expressions and incomplete CSS context must not be reported as clean.
+
+Resolve all required findings. A successful build, typecheck, or image render is not a design-compliance result.
+
+## Approval and specification
+
+After checks pass, inspect the preview and ask the user to explicitly approve the exact target snapshot, including story/export, fixtures, rendering options, and evidence revision. Do not infer approval from agent prose or a model-written field.
+
+Only after explicit target approval, inspect the current implementation and write a repository Markdown bridge specification. Reuse the repository's existing Plan review and acceptance conventions when available. The spec should map each approved target component, state, action, and route to:
+
+- current API, hook, store, and route source references;
+- reused, adapted, or new components;
+- data and permission contracts;
+- loading, empty, error, and responsive behavior;
+- mock-to-production integration work;
+- executable acceptance checks, sequence, non-goals, and unresolved decisions.
+
+Store the target and evidence with the project, for example:
+
+```text
+docs/specs/<feature>/target.md
+docs/specs/<feature>/design-check.json
+docs/specs/<feature>/spec.md
+```
+
+The target approval does not authorize implementation. Request separate implementation approval.