@harperfast/template-vue-ts-studio 1.8.2 → 1.9.1

package/agent/skills/harper-best-practices/rules/programmatic-table-requests.md

@@ -0,0 +1,134 @@
+---
+name: programmatic-table-requests
+description: How to interact with Harper tables programmatically using the `tables` object.
+metadata:
+  mode: synthesized
+---
+
+# Programmatic Table Requests
+
+Instructions for the agent to follow when interacting with Harper tables via code.
+
+## When to Use
+
+Use this skill when you need to perform database operations (CRUD, search, subscribe) from within Harper Resources or scripts.
+
+## How It Works
+
+1. **Access the Table**: Use the global `tables` object followed by your table name (e.g., `tables.MyTable`).
+2. **Perform CRUD Operations**:
+   - **Get**: `await tables.MyTable.get(id)` for a single record or `await tables.MyTable.get({ conditions: [...] })` for multiple.
+   - **Create**: `await tables.MyTable.post(record)` (auto-generates ID) or `await tables.MyTable.put(id, record)`.
+   - **Update**: `await tables.MyTable.patch(id, partialRecord)` for partial updates.
+   - **Delete**: `await tables.MyTable.delete(id)`.
+3. **Use Updatable Records for Atomic Ops**: Call `update(id)` to get a reference, then use `addTo` or `subtractFrom` for atomic increments/decrements:
+   ```typescript
+   const stats = await tables.Stats.update('daily');
+   stats.addTo('viewCount', 1);
+   ```
+4. **Search and Stream**: Use `search(query)` for efficient streaming of large result sets:
+   ```typescript
+   for await (const record of tables.MyTable.search({ conditions: [...] })) {
+     // process record
+   }
+   ```
+   See the [Query Conditions](#query-conditions) section below for the full query object reference.
+5. **Real-time Subscriptions**: Use `subscribe(query)` to listen for changes:
+   ```typescript
+   for await (const event of tables.MyTable.subscribe(query)) {
+   	// handle event
+   }
+   ```
+6. **Publish Events**: Use `publish(id, message)` to trigger subscriptions without necessarily persisting data.
+
+## Query Conditions
+
+When passing a query to `search()`, `get()`, or `subscribe()`, use a query object with a `conditions` array.
+
+### Condition Object Shape
+
+| Property     | Description                                                                                |
+| ------------ | ------------------------------------------------------------------------------------------ |
+| `attribute`  | Field name, or array of field names to traverse a relationship (e.g., `['brand', 'name']`) |
+| `value`      | The value to compare against                                                               |
+| `comparator` | One of the comparator strings below (default: `equals`)                                    |
+| `operator`   | `and` (default) or `or` — applies to a nested `conditions` block                           |
+| `conditions` | Nested array of condition objects for complex AND/OR logic                                 |
+
+### Comparator Values
+
+Use these exact strings — incorrect comparator names will silently fail or error:
+
+| Comparator           | Meaning                                                    |
+| -------------------- | ---------------------------------------------------------- |
+| `equals`             | Exact match (default)                                      |
+| `not_equal`          | Not equal                                                  |
+| `greater_than`       | `>`                                                        |
+| `greater_than_equal` | `>=`                                                       |
+| `less_than`          | `<`                                                        |
+| `less_than_equal`    | `<=`                                                       |
+| `starts_with`        | String starts with value                                   |
+| `contains`           | String contains value                                      |
+| `ends_with`          | String ends with value                                     |
+| `between`            | Value is between two bounds (pass `value` as `[min, max]`) |
+
+### Query Object Parameters
+
+| Property     | Description                                                                          |
+| ------------ | ------------------------------------------------------------------------------------ |
+| `conditions` | Array of condition objects                                                           |
+| `limit`      | Maximum number of records to return                                                  |
+| `offset`     | Number of records to skip (for pagination)                                           |
+| `select`     | Array of attribute names to return; supports `$id` and `$updatedtime`                |
+| `sort`       | Object with `attribute`, `descending` (bool), and optional `next` for secondary sort |
+
+### Examples
+
+**Simple filter:**
+
+```javascript
+for await (const record of tables.Product.search({
+  conditions: [{ attribute: 'price', comparator: 'less_than', value: 100 }],
+  limit: 20,
+})) { ... }
+```
+
+**AND + nested OR:**
+
+```javascript
+for await (const record of tables.Product.search({
+  conditions: [
+    { attribute: 'price', comparator: 'less_than', value: 100 },
+    {
+      operator: 'or',
+      conditions: [
+        { attribute: 'rating', comparator: 'greater_than', value: 4 },
+        { attribute: 'featured', value: true },
+      ],
+    },
+  ],
+})) { ... }
+```
+
+**Relationship traversal:**
+
+```javascript
+for await (const record of tables.Book.search({
+  conditions: [{ attribute: ['brand', 'name'], comparator: 'equals', value: 'Harper' }],
+})) { ... }
+```
+
+**Sort and paginate:**
+
+```javascript
+for await (const record of tables.Product.search({
+  conditions: [{ attribute: 'inStock', value: true }],
+  sort: { attribute: 'price', descending: false },
+  limit: 10,
+  offset: 20,
+})) { ... }
+```
+
+## Cautions
+
+Be very careful when performing updates and deletions! You may be dealing with live production data. The wrong request to delete, without approval from a human, could be devastating to a business. Always use the proper approval process.

package/agent/skills/harper-best-practices/rules/querying-rest-apis.md

@@ -0,0 +1,202 @@
+---
+name: querying-rest-apis
+description: 'How to use query parameters to filter, sort, and paginate Harper REST APIs.'
+metadata:
+  mode: generate
+  sources:
+    - reference/v5/rest/querying.md
+  sourceCommit: b7fbddadd42eb4487190b650a9abc4bcfeef5819
+  inputHash: 9f8c981a629ef606
+---
+
+# Querying REST APIs
+
+Instructions for the agent to filter, sort, select, and paginate Harper REST API collections using URL query parameters.
+
+## When to Use
+
+Apply this rule when building or modifying code that queries Harper REST endpoints with filtering, sorting, field selection, or pagination. Use it whenever constructing URLs against collection paths exposed by Harper's automatic REST interface (see [automatic-apis.md](automatic-apis.md)).
+
+## How It Works
+
+1. **Filter by attribute**: Add query parameters matching attribute names and values. The queried attribute must be indexed.
+
+   ```
+   GET /Product/?category=software
+   GET /Product/?category=software&inStock=true
+   ```
+
+2. **Apply comparison operators (FIQL syntax)**: Use FIQL operators directly in query parameter values.
+
+   | Operator     | Meaning                                |
+   | ------------ | -------------------------------------- |
+   | `==`         | Equal                                  |
+   | `=lt=`       | Less than                              |
+   | `=le=`       | Less than or equal                     |
+   | `=gt=`       | Greater than                           |
+   | `=ge=`       | Greater than or equal                  |
+   | `=ne=`, `!=` | Not equal                              |
+   | `=ct=`       | Contains (strings)                     |
+   | `=sw=`       | Starts with (strings)                  |
+   | `=ew=`       | Ends with (strings)                    |
+   | `=`, `===`   | Strict equality (no type conversion)   |
+   | `!==`        | Strict inequality (no type conversion) |
+
+   ```
+   GET /Product/?price=gt=100
+   GET /Product/?price=le=20
+   GET /Product/?name==Keyboard*
+   GET /Product/?category=software&price=gt=100&price=lt=200
+   ```
+
+   For date fields, URL-encode colons as `%3A`:
+
+   ```
+   GET /Product/?listDate=gt=2017-03-08T09%3A30%3A00.000Z
+   ```
+
+3. **Chain conditions for range queries**: Omit the attribute name on the second condition to apply it to the same attribute. Only `gt`/`ge` combined with `lt`/`le` is supported.
+
+   ```
+   GET /Product/?price=gt=100&lt=200
+   ```
+
+4. **Combine conditions with OR logic**: Use `|` instead of `&`.
+
+   ```
+   GET /Product/?rating=5|featured=true
+   ```
+
+5. **Group conditions**: Use parentheses or square brackets to control order of operations. Prefer square brackets when constructing queries from user input, since standard URI encoding safely encodes `[` and `]`.
+
+   ```
+   GET /Product/?rating=5|(price=gt=100&price=lt=200)
+   GET /Product/?rating=5&[tag=fast|tag=scalable|tag=efficient]
+   ```
+
+   Construct grouped queries from JavaScript:
+
+   ```javascript
+   let url = `/Product/?rating=5&[${tags.map(encodeURIComponent).join('|')}]`;
+   ```
+
+6. **Select specific properties with `select(`**: Use `select()` to control which fields are returned.
+
+   | Syntax                                 | Returns                                     |
+   | -------------------------------------- | ------------------------------------------- |
+   | `?select(property)`                    | Values of a single property directly        |
+   | `?select(property1,property2)`         | Objects with only the specified properties  |
+   | `?select([property1,property2])`       | Arrays of property values                   |
+   | `?select(property1,)`                  | Objects with a single specified property    |
+   | `?select(property{subProp1,subProp2})` | Nested objects with specific sub-properties |
+
+   ```
+   GET /Product/?category=software&select(name)
+   GET /Product/?brand.name=Microsoft&select(name,brand{name})
+   ```
+
+7. **Limit results with `limit(`**: Use `limit(end)` or `limit(start,end)` to paginate.
+
+   ```
+   GET /Product/?rating=gt=3&inStock=true&select(rating,name)&limit(20)
+   GET /Product/?rating=gt=3&limit(10,30)
+   ```
+
+8. **Sort results with `sort(`**: Use `sort(property)` or `sort(+property,-property,...)`. Prefix `+` or no prefix = ascending; `-` = descending.
+
+   ```
+   GET /Product/?rating=gt=3&sort(+name)
+   GET /Product/?sort(+rating,-price)
+   ```
+
+9. **Query across relationships**: Use dot-syntax to filter by related table attributes. Relationships must be defined in the schema using `@relation`.
+
+   ```
+   GET /Product/?brand.name=Microsoft
+   GET /Brand/?products.name=Keyboard
+   ```
+
+   Use `select()` to include relationship attributes in the response (they are not included by default):
+
+   ```
+   GET /Product/?brand.name=Microsoft&select(name,brand{name})
+   ```
+
+10. **Access a specific property by URL**: Append the property name with dot syntax to the record ID. Only works for properties declared in the schema.
+    ```
+    GET /MyTable/123.propertyName
+    ```
+
+## Examples
+
+**Range filter with select and limit:**
+
+```
+GET /Product/?category=software&price=gt=100&price=lt=200&select(name,price)&limit(20)
+```
+
+**Sort descending with multiple fields:**
+
+```
+GET /Product/?sort(+rating,-price)
+```
+
+**OR logic with grouping:**
+
+```
+GET /Product/?price=lt=100|[rating=5&[tag=fast|tag=scalable|tag=efficient]&inStock=true]
+```
+
+**Relationship join with nested select:**
+
+```
+GET /Product/?brand.name=Microsoft&select(name,brand{name,id})
+```
+
+**Schema defining a relationship for join queries:**
+
+```graphql
+type Product @table @export {
+	id: Long @primaryKey
+	name: String
+	brandId: Long @indexed
+	brand: Brand @relation(from: "brandId")
+}
+type Brand @table @export {
+	id: Long @primaryKey
+	name: String
+	products: [Product] @relation(to: "brandId")
+}
+```
+
+**Many-to-many relationship query:**
+
+```graphql
+type Product @table @export {
+	id: Long @primaryKey
+	name: String
+	resellerIds: [Long] @indexed
+	resellers: [Reseller] @relation(from: "resellerId")
+}
+```
+
+```
+GET /Product/?resellers.name=Cool Shop&select(id,name,resellers{name,id})
+```
+
+**Type conversion with explicit prefix:**
+
+```
+GET /Product/?price==number:123
+GET /Product/?active==boolean:true
+GET /Product/?listDate==date:2024-01-05T20%3A07%3A27.955Z
+```
+
+## Notes
+
+- Only indexed attributes can be used as the primary filter; additional unindexed attributes can be combined with `&` once at least one indexed attribute is present.
+- For null value queries, use `?attribute=null`. Indexes must have been created with null indexing support; existing indexes must be removed and re-added to support null queries.
+- FIQL comparators (`==`, `!=`, `=gt=`, etc.) apply automatic type conversion based on value syntax or schema-declared type. Strict operators (`=`, `===`, `!==`) skip automatic type conversion.
+- Filtering by a related attribute produces INNER JOIN behavior (only records with a matching related record are returned). Using `select()` on a relationship without a filter produces LEFT JOIN behavior.
+- The array order of foreign key values in many-to-many relationships is preserved when resolving the relationship.
+- See [automatic-apis.md](automatic-apis.md) for how Harper tables are automatically exposed as REST endpoints.

package/agent/skills/harper-best-practices/rules/real-time-apps.md

@@ -0,0 +1,102 @@
+---
+name: real-time-apps
+description: How to build real-time features in Harper using WebSockets and Pub/Sub.
+metadata:
+  mode: generate
+  sources:
+    - reference/v5/rest/websockets.md
+  sourceCommit: b7fbddadd42eb4487190b650a9abc4bcfeef5819
+  inputHash: a8afd4d3a52f77ba
+---
+
+# Real-Time Apps with WebSockets and Pub/Sub
+
+Instructions for the agent to follow when building real-time features in Harper using WebSockets and Pub/Sub.
+
+## When to Use
+
+Apply this rule when implementing any feature that requires real-time bidirectional communication, live data streaming, or push-based updates in a Harper application. This includes chat, live dashboards, sensor feeds, and any scenario where clients must receive resource changes as they happen.
+
+## How It Works
+
+1. **Enable WebSocket support**: WebSocket support is enabled automatically when the `rest` plugin is enabled. To explicitly disable it, set the following in your config:
+
+   ```yaml
+   rest:
+     webSocket: false
+   ```
+
+2. **Connect a client to a resource**: A WebSocket connection to a resource URL automatically subscribes to that resource. When the record changes or a message is published to it, the connection receives the update.
+
+   ```javascript
+   let ws = new WebSocket('wss://server/my-resource/341');
+   ws.onmessage = (event) => {
+   	let data = JSON.parse(event.data);
+   };
+   ```
+
+   `new WebSocket('wss://server/my-resource/341')` accesses the resource defined for `my-resource` with record id `341` and subscribes to it.
+
+3. **Implement a custom `connect()` handler**: Override the `connect(incomingMessages)` method on a resource class to control WebSocket behavior. The method must return an async iterable (or generator) that produces messages to send to the client. See [automatic-apis.md](automatic-apis.md) for more on defining resource classes.
+
+4. **Use the default `connect()` for event-style access**: Call `super.connect()` to get a streaming iterable that provides:
+   - A `send(message)` method for pushing outgoing messages
+   - A `close` event for cleanup on disconnect
+
+5. **Handle message ordering in distributed environments**: Harper delivers messages to local subscribers immediately without inter-node coordination delay.
+
+   | Message Type                                             | Behavior                                                                |
+   | -------------------------------------------------------- | ----------------------------------------------------------------------- |
+   | Non-retained (no `retain` flag)                          | Every message delivered in order received; suitable for chat            |
+   | Retained (published with `retain`, or PUT/updated in DB) | Only the latest-timestamp message is kept; suitable for sensor readings |
+
+6. **Use MQTT over WebSockets** when needed by setting the sub-protocol header:
+   ```
+   Sec-WebSocket-Protocol: mqtt
+   ```
+
+## Examples
+
+**Simple echo server** — override `connect(incomingMessages)` to yield each incoming message back to the client:
+
+```javascript
+export class Echo extends Resource {
+	async *connect(incomingMessages) {
+		for await (let message of incomingMessages) {
+			yield message; // echo each message back
+		}
+	}
+}
+```
+
+**Custom connect with timer and event-style access** — use `super.connect()` to get the outgoing stream, push periodic messages, echo incoming messages, and clean up on disconnect:
+
+```javascript
+export class Example extends Resource {
+	connect(incomingMessages) {
+		let outgoingMessages = super.connect();
+
+		let timer = setInterval(() => {
+			outgoingMessages.send({ greeting: 'hi again!' });
+		}, 1000);
+
+		incomingMessages.on('data', (message) => {
+			outgoingMessages.send(message); // echo incoming messages
+		});
+
+		outgoingMessages.on('close', () => {
+			clearInterval(timer);
+		});
+
+		return outgoingMessages;
+	}
+}
+```
+
+## Notes
+
+- WebSocket connections target a resource URL path. By default, connecting to a resource subscribes to changes for that resource.
+- The `connect(incomingMessages)` method **must** return an async iterable or generator; returning a plain value will not work.
+- `super.connect()` returns a streaming iterable with `send(message)` and a `close` event — use this when you need to push messages outside of the incoming message loop.
+- For one-way real-time streaming without bidirectional communication, consider Server-Sent Events instead.
+- For full pub/sub capabilities, Harper also supports MQTT; set `Sec-WebSocket-Protocol: mqtt` to use MQTT over WebSockets.

package/agent/skills/harper-best-practices/rules/schema-design-tooling.md

@@ -0,0 +1,161 @@
+---
+name: schema-design-tooling
+description: >-
+  Best practices for Harper schema design, including core directives and GraphQL
+  tooling configuration.
+metadata:
+  mode: generate
+  sources:
+    - reference/v5/database/schema.md#Overview
+    - reference/v5/database/schema.md#Type Directives
+    - reference/v5/database/schema.md#Field Directives
+  sourceCommit: b7fbddadd42eb4487190b650a9abc4bcfeef5819
+  inputHash: 4faa3baed7cfa854
+---
+
+# Schema Design and Tooling
+
+Instructions for the agent to follow when designing Harper schemas, applying core directives, and configuring GraphQL tooling.
+
+## When to Use
+
+Apply this rule when creating or modifying Harper schema files, configuring `graphqlSchema` in `config.yaml`, or deciding which directives to apply to tables and fields. Use it any time a component needs tables, indexes, primary keys, or exported endpoints defined.
+
+## How It Works
+
+1. **Create a GraphQL schema file** with Harper-specific directives. Name it (e.g., `schema.graphql`) and place it in your component directory.
+
+   ```graphql
+   type Dog @table {
+   	id: Long @primaryKey
+   	name: String
+   	breed: String
+   	age: Int
+   }
+
+   type Breed @table {
+   	id: Long @primaryKey
+   	name: String @indexed
+   }
+   ```
+
+2. **Register the schema in `config.yaml`** using the `graphqlSchema` plugin key:
+
+   ```yaml
+   graphqlSchema:
+     files: 'schema.graphql'
+   ```
+
+   Both plugins and applications can specify schemas this way.
+
+3. **Mark every table type with `@table`**. The type name becomes the table name by default. Use optional arguments to override behavior:
+
+   | Argument       | Type      | Default                       | Description                                                   |
+   | -------------- | --------- | ----------------------------- | ------------------------------------------------------------- |
+   | `table`        | `String`  | type name                     | Override the table name                                       |
+   | `database`     | `String`  | `"data"`                      | Database to place the table in                                |
+   | `expiration`   | `Int`     | —                             | Seconds until a record goes stale                             |
+   | `eviction`     | `Int`     | `0`                           | Additional seconds after `expiration` before physical removal |
+   | `scanInterval` | `Int`     | `(expiration + eviction) / 4` | Seconds between eviction scans                                |
+   | `replicate`    | `Boolean` | `true`                        | Enable replication of this table                              |
+
+4. **Designate a primary key on every table** using `@primaryKey`. Primary keys must be unique; duplicate-key inserts are rejected. If no key is provided on insert, Harper auto-generates one:
+   - `String` or `ID` → UUID string
+   - `Int`, `Long`, or `Any` → auto-incrementing integer
+
+   Prefer `Long` or `Any` for auto-generated numeric keys; `Int` is 32-bit and may be insufficient for large tables.
+
+5. **Index fields that need fast querying** with `@indexed`. This is required for filtering by that attribute in REST queries, SQL, or NoSQL operations. If the field value is an array, each element is individually indexed.
+
+   ```graphql
+   type Product @table {
+   	id: Long @primaryKey
+   	category: String @indexed
+   	price: Float @indexed
+   }
+   ```
+
+6. **Expose a table as an external resource endpoint** with `@export`. This makes the table accessible via REST, MQTT, and other interfaces. The optional `name` parameter sets the URL path segment; without it, the type name is used.
+
+   ```graphql
+   type MyTable @table @export(name: "my-table") {
+   	id: Long @primaryKey
+   }
+   ```
+
+7. **Restrict extra properties** with `@sealed` when records must not include attributes beyond those declared. By default, Harper allows additional properties.
+
+   ```graphql
+   type StrictRecord @table @sealed {
+   	id: Long @primaryKey
+   	name: String
+   }
+   ```
+
+8. **Configure expiration, eviction, and scan behavior** together when building caching tables. These three arguments control the full record lifecycle:
+   - `expiration` — record becomes stale; next request triggers a source fetch
+   - `eviction` — additional time after `expiration` before physical removal
+   - `scanInterval` — how often Harper scans for records to evict; clock-aligned, not startup-aligned
+
+## Examples
+
+**Caching table with tuned expiration:**
+
+```graphql
+# Expire after 5 minutes, evict after 1 hour, scan every 10 minutes
+type WeatherCache @table(expiration: 300, eviction: 3300, scanInterval: 600) {
+	id: ID @primaryKey
+	temperature: Float
+}
+```
+
+**Table in a named database with expiration and an indexed field:**
+
+```graphql
+type Event @table(database: "analytics", expiration: 86400) {
+	id: Long @primaryKey
+	name: String @indexed
+}
+```
+
+**Session cache with auto-expiry:**
+
+```graphql
+type Session @table(expiration: 3600) {
+	id: Long @primaryKey
+	userId: String
+}
+```
+
+**Table with audit timestamps:**
+
+```graphql
+type Order @table @export(name: "orders") {
+	id: Long @primaryKey
+	createdAt: Long @createdTime
+	updatedAt: Long @updatedTime
+	status: String @indexed
+}
+```
+
+**Overriding the table name and disabling replication:**
+
+```graphql
+type Product @table(table: "products") {
+	id: Long @primaryKey
+	name: String
+}
+
+type LocalRecord @table(replicate: false) {
+	id: Long @primaryKey
+	value: String
+}
+```
+
+## Notes
+
+- Use unique `database` names in plugins and applications to avoid table naming collisions, since all tables default to the `"data"` database.
+- Eviction removes non-indexed record data but does **not** remove a record from its secondary indexes. Indexes remain functional for evicted records; Harper fetches the full record from the source on demand when a query matches an evicted record.
+- `scanInterval` is clock-aligned to the server's local timezone. The server's startup time does not affect when eviction runs.
+- If replication is disabled on a table and later re-enabled, it will not catch up on writes made while replication was disabled.
+- Null values are indexed by `@indexed` fields, enabling queries such as `GET /Product/?category=null`.

package/agent/skills/harper-best-practices/rules/serving-web-content.md

@@ -0,0 +1,85 @@
+---
+name: serving-web-content
+description: How to serve static files and integrated Vite/React applications in Harper.
+metadata:
+  mode: synthesized
+---
+
+# Serving Web Content
+
+Instructions for the agent to follow when serving web content from Harper.
+
+## When to Use
+
+Use this skill when you need to serve a frontend (HTML, CSS, JS, or a React/Vue app) directly from your Harper instance — either plain static files or an integrated Vite app with hot module replacement (HMR) in development and a real production build when deployed.
+
+## How It Works
+
+There are two building blocks. Harper's built-in `static` plugin **serves** files; the `@harperfast/vite` plugin **builds** (and, for SSR, **renders**) a Vite app. For a Vite app they work **together** — the plugin builds into a directory and `static` serves that same directory.
+
+### Option A: Static plugin only (simple, pre-built assets)
+
+For a plain static site or already-built assets, use `static` on its own:
+
+```yaml
+static:
+  files: 'web/*'
+```
+
+- Place files in a `web/` folder in the project root; they are served from the root URL (e.g. `http://localhost:9926/index.html`).
+- Static files are matched first; if none matches, Harper falls through to your resource and table APIs.
+
+### Option B: Vite plugin + static plugin (integrated Vite app)
+
+> **Renamed in v1:** the plugin was previously `@harperfast/vite-plugin`. From `1.0.0` on it is **`@harperfast/vite`** (same key and `package`). It now pairs with the `static` plugin instead of building into `web/` itself.
+
+`@harperfast/vite` **builds** your app — in `harper dev` it runs Vite in middleware mode with HMR; in `harper run` it runs `vite build` and rebuilds when watched files change (and renders HTML for SSR). The `static` plugin **serves** the built output. Point both at the same directory (`output`, default `dist`) — that shared directory is the only contract between them.
+
+**SPA `config.yaml`** — list the plugin first so its dev server wins in `harper dev`; `notFound` + `fallthrough: false` makes client-side routing work:
+
+```yaml
+'@harperfast/vite':
+  package: '@harperfast/vite'
+  files: 'src/**/*'
+  output: 'dist'
+
+static:
+  files: 'dist/**'
+  notFound:
+    file: 'index.html'
+    statusCode: 200
+  fallthrough: false
+```
+
+**SSR `config.yaml`** — add an `ssr` entry so the plugin renders `index.html`, and set `index: false` on `static` so it serves assets only:
+
+```yaml
+'@harperfast/vite':
+  package: '@harperfast/vite'
+  files: 'src/**/*'
+  output: 'dist'
+  ssr: 'src/entry-server.tsx'
+
+static:
+  files: 'dist/**'
+  index: false
+```
+
+- Install dependencies: `npm install --save-dev vite @harperfast/vite @vitejs/plugin-react` (swap in your framework's Vite plugin, e.g. `@vitejs/plugin-vue`).
+- Then `harper dev .` runs the app with HMR and `harper run .` runs the production build. Vite does _not_ need to be executed separately.
+
+## Deploying to Production
+
+Because `@harperfast/vite` builds on the node and `static` serves the output, deploy the component as-is — no manual build-and-move step is needed:
+
+```json
+{
+	"scripts": {
+		"dev": "harper dev .",
+		"start": "harper run .",
+		"deploy": "harper deploy_component . restart=true replicated=true"
+	}
+}
+```
+
+On deploy the plugin runs `vite build` at startup (and rebuilds when `files` change) while `static` serves the result. If you prefer to build in CI, commit the build output, point `static` at it, and omit `files` so the plugin stays idle while `static` serves the prebuilt assets. Either way, `npm create harper@latest` scaffolds a working setup for you.