feat: expand integration points, API, animation support

.github/workflows/website.yml

@@ -34,6 +34,9 @@ jobs:
         working-directory: .
       - run: npm ci
       - run: npm run check
+        env:
+          # Quality artifacts are previews; public builds must use a registry pin.
+          STET_CANDIDATE_PREVIEW: "1"
       - run: npx playwright install --with-deps chromium
       - run: npm test
       - uses: actions/upload-artifact@v4

.gitignore

@@ -6,3 +6,4 @@ test-results/
 playwright-report/
 .playwright-mcp/
 .release-artifacts/
+!/website/vendor/funsaized-stet-0.2.0.tgz

CHANGELOG.md

@@ -1,13 +1,13 @@
 # Changelog
 
-## Unreleased
+## 0.2.0 — 2026-09-13
 
 - Add a unified website showcase with six live use cases, Product/UX/Engineering/QE
   examples for workspace deletion, billing, search, security and import validation, a deterministic agent walkthrough, and
   inspectable plans, actual source, canonical framework examples and verification scope.
 - Add sticky `offsetX`/`offsetY` and arrow `labelOffsetX`/`labelOffsetY` pixel nudges
   after automatic placement and before viewport clamping. Defaults preserve existing
-  placement. Core grows by 38 bytes gzip to 6.83 KiB; the 7 KiB guard is unchanged.
+  placement. Core grows by 38 bytes gzip and remains below the 11 KiB guard.
 - Generate updated option contracts and snippets; add evidence-based handoff guidance
   within existing skills without changing routing or adding a skill.
 - Make playground code match its preview, including seed, motion and placement;

README.md

@@ -30,9 +30,14 @@ Use `@funsaized/stet` in installation commands and imports.
 ![STET annotating a working release form with pen marks and a paper note](docs/visual/vanilla-after.png)
 
 ```sh
-npm install @funsaized/stet@0.1.0
+npm install @funsaized/stet@0.2.0
 ```
 
+Stet's browser API is ESM-only and uses DOM APIs, so call it from client code
+after the target mounts. Import `@funsaized/stet/style.css` once in your client
+entry. The browser runtime has no Node.js requirement; your build tool must support
+ESM.
+
 ## Start with an agent or the API
 
 ### With your coding agent
@@ -44,11 +49,11 @@ framework/lifecycle examples.
 After installing `@funsaized/stet`, install project skills for your coding agent:
 
 ```sh
-npx stet agent init --tool codex
+./node_modules/.bin/stet agent init --tool codex
 # Also supports claude, cursor and opencode.
 ```
 
-For deterministic automation, use the installed binary directly:
+The same installed binary provides inspection, snippets, and validation:
 
 ```sh
 ./node_modules/.bin/stet inspect --project . --json
@@ -59,7 +64,9 @@ For deterministic automation, use the installed binary directly:
 The agent decides what deserves annotation, validates a source-target plan,
 adapts a framework-correct snippet, then checks the application. Plans are
 build-time tools and never replace your controls or become runtime selectors.
-The CLI requires Node.js 20+; browser imports do not load agent infrastructure.
+The installed CLI requires Node.js 20+; browser imports do not load agent
+infrastructure. Developing this repository's website separately requires Node.js
+22.12+.
 See the [agent guide](docs/agent-usage.md) for setup, targeting and verification,
 and [actual evaluation results](docs/agent-evals.md) for measured outcomes,
 retained failures and limitations.
@@ -97,6 +104,7 @@ To explore this checkout locally, run `npm ci`, `npm --prefix website ci`, then
 `npm --prefix website run dev`. Open `/use-cases` or `/agent-workflow`.
 The [playground](https://www.stetkit.com/playground) exposes real options and copyable code;
 framework integration lives in [Docs](https://www.stetkit.com/docs).
+Use the [tested Vite boundary](docs/shipping.md) to exclude temporary review annotations.
 See [website setup](website/README.md) for production builds and tests. Hosted
 links show the deployed site; this checkout's additions appear after deployment.
 The [fixed visual specimens](examples/visual/) remain the regression matrix.

agent/annotation-plan.d.ts

@@ -5,6 +5,31 @@ export type AnnotationPlan = {
 "intent": string;
 "annotations": Array<{
 "id": string;
+"primitive": "box";
+"targets": [{
+"strategy": "ref" | "id" | "data-attribute" | "source" | "stet-attribute" | "css";
+"file": string;
+"locator": string;
+"description": string;
+"rationale"?: string;
+}];
+"options"?: {
+"seed"?: number;
+"roughness"?: number;
+"boil"?: number;
+"stroke"?: string;
+"fill"?: string;
+"width"?: number;
+"resketchOnHover"?: boolean;
+"padding"?: number;
+"visible"?: boolean;
+"animate"?: boolean;
+"animationDuration"?: number;
+"animationDelay"?: number;
+"description"?: string;
+};
+} | {
+"id": string;
 "primitive": "circle";
 "targets": [{
 "strategy": "ref" | "id" | "data-attribute" | "source" | "stet-attribute" | "css";
@@ -22,6 +47,10 @@ export type AnnotationPlan = {
 "width"?: number;
 "resketchOnHover"?: boolean;
 "padding"?: number;
+"visible"?: boolean;
+"animate"?: boolean;
+"animationDuration"?: number;
+"animationDelay"?: number;
 "description"?: string;
 };
 } | {
@@ -43,6 +72,10 @@ export type AnnotationPlan = {
 "width"?: number;
 "resketchOnHover"?: boolean;
 "padding"?: number;
+"visible"?: boolean;
+"animate"?: boolean;
+"animationDuration"?: number;
+"animationDelay"?: number;
 "description"?: string;
 };
 } | {
@@ -64,6 +97,10 @@ export type AnnotationPlan = {
 "width"?: number;
 "resketchOnHover"?: boolean;
 "padding"?: number;
+"visible"?: boolean;
+"animate"?: boolean;
+"animationDuration"?: number;
+"animationDelay"?: number;
 "description"?: string;
 };
 } | {
@@ -95,6 +132,10 @@ export type AnnotationPlan = {
 "width"?: number;
 "resketchOnHover"?: boolean;
 "padding"?: number;
+"visible"?: boolean;
+"animate"?: boolean;
+"animationDuration"?: number;
+"animationDelay"?: number;
 "description"?: string;
 };
 } | {
@@ -120,6 +161,10 @@ export type AnnotationPlan = {
 "width"?: number;
 "resketchOnHover"?: boolean;
 "padding"?: number;
+"visible"?: boolean;
+"animate"?: boolean;
+"animationDuration"?: number;
+"animationDelay"?: number;
 "description"?: string;
 };
 } | {
@@ -141,6 +186,10 @@ export type AnnotationPlan = {
 "width"?: number;
 "resketchOnHover"?: boolean;
 "padding"?: number;
+"visible"?: boolean;
+"animate"?: boolean;
+"animationDuration"?: number;
+"animationDelay"?: number;
 "description"?: string;
 };
 "kind": "right" | "wrong";