@vibes.diy/api-pkg 0.0.0-smoke-70d942c5-1774564515

package/LICENSE.md

@@ -0,0 +1,232 @@
+The contents of this repository are Copyright (c) corresponding authors and
+contributors, licensed under the `Permissive License Stack` meaning either of:
+
+- Apache-2.0 Software License: https://www.apache.org/licenses/LICENSE-2.0
+  ([...4tr2kfsq](https://dweb.link/ipfs/bafkreiankqxazcae4onkp436wag2lj3ccso4nawxqkkfckd6cg4tr2kfsq))
+
+- MIT Software License: https://opensource.org/licenses/MIT
+  ([...vljevcba](https://dweb.link/ipfs/bafkreiepofszg4gfe2gzuhojmksgemsub2h4uy2gewdnr35kswvljevcba))
+
+You may not use the contents of this repository except in compliance
+with one of the listed Licenses. For an extended clarification of the
+intent behind the choice of Licensing please refer to
+https://protocol.ai/blog/announcing-the-permissive-license-stack/
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the terms listed in this notice is distributed on
+an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+either express or implied. See each License for the specific language
+governing permissions and limitations under that License.
+
+<!--- SPDX-License-Identifier: Apache-2.0 OR MIT -->
+
+`SPDX-License-Identifier: Apache-2.0 OR MIT`
+
+Verbatim copies of both licenses are included below:
+
+<details><summary>Apache-2.0 Software License</summary>
+
+```
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+```
+
+</details>
+
+<details><summary>MIT Software License</summary>
+
+```
+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.
+```
+
+</details>

package/README.md

@@ -0,0 +1,539 @@
+# vibes.diy API
+
+WebSocket-based API for vibes.diy chat persistence and app deployment. Supports both HTTP POST and WebSocket connections using the same handler via the Evento event-driven framework.
+
+## Package Structure
+
+```
+api/
+├── types/              @vibes.diy/api-types    SHARED (client + server)
+│   ├── msg-types.ts    Request/response types, VibeFile, MsgBase envelope, arktype schemas
+│   ├── types.ts        FileSystemItem with transform support
+│   └── vibes-diy-serv-ctx.ts  Server context for wrapper/iframe rendering
+│
+├── pkg/                @vibes.diy/api-pkg      SHARED (client + server)
+│   ├── api.ts          VibesDiyApiIface interface (3 methods)
+│   ├── encoder.ts      Evento encoders: ReqRes, W3CWebSocket, Combined
+│   ├── index.ts        Re-exports
+│   └── react/          React components (client only in practice)
+│
+├── impl/               @vibes.diy/api-impl     CLIENT
+│   └── index.ts        VibeDiyApi class (WebSocket client, WIP - no reconnection)
+│
+├── svc/                @vibes.diy/api-svc      SERVER (Cloudflare Workers)
+│   ├── cf-serve.ts     Cloudflare Worker entry point (HTTP + WebSocket)
+│   ├── create-handler.ts   Evento pipeline setup with all handlers
+│   ├── check-auth.ts   Auth middleware (clerk, device-id verification)
+│   ├── unwrap-msg-base.ts  MsgBase envelope unwrapping for validation
+│   ├── api.ts          VibesApiSQLCtx type + VibesFPApiParameters
+│   ├── entry-point-utils.ts  URL construction for deployed apps
+│   │
+│   ├── public/         Public API handlers (Evento handlers)
+│   │   ├── ensure-app-slug-item.ts  App deployment with CID-based storage
+│   │   ├── ensure-chat-context.ts   Chat session creation/retrieval
+│   │   ├── append-chat-section.ts   Message persistence with seq numbers
+│   │   └── serv-entry-point.ts      Serves deployed app HTML
+│   │
+│   ├── intern/         Internal helpers
+│   │   ├── ensure-slug-binding.ts   User/app slug management (random-words)
+│   │   ├── ensure-storage.ts        CID calculation (SHA-256 + base58btc)
+│   │   ├── import-map.ts            ESM import map generation (esm.sh)
+│   │   ├── render-vibes.tsx         HTML rendering with import map injection
+│   │   └── write-apps.ts            App record creation with transforms (sucrase, acorn)
+│   │
+│   └── sql/
+│       └── vibes-diy-api-schema.ts  Drizzle schema (D1)
+│
+└── tests/              @vibes.diy/api-test
+    └── api.test.ts
+```
+
+## Package Summary
+
+| Package                | Runs On | Purpose                                 |
+| ---------------------- | ------- | --------------------------------------- |
+| `@vibes.diy/api-types` | Both    | arktype schemas, request/response types |
+| `@vibes.diy/api-pkg`   | Both    | Interface + encoders (shared contract)  |
+| `@vibes.diy/api-impl`  | Client  | `VibeDiyApi` WebSocket client class     |
+| `@vibes.diy/api-svc`   | Server  | Cloudflare Worker handlers, D1/Drizzle  |
+
+## Architecture
+
+### Message Envelope
+
+All requests are wrapped in a `MsgBase` envelope:
+
+```typescript
+interface MsgBase {
+  tid: string; // Transaction ID for request/response correlation
+  src: string; // Source identifier
+  dst: string; // Destination identifier
+  ttl: number; // Time-to-live
+  payload: unknown; // The actual request/response
+}
+```
+
+### Evento Pipeline
+
+The server uses Evento (from `@adviser/cement`) for request routing. Handlers are registered in order:
+
+1. **CORS preflight** - Handles OPTIONS requests
+2. **servEntryPoint** - Serves deployed app HTML (hostname routing: `{appSlug}--{userSlug}.{host}/~{fsId}~/`)
+3. **Request logging** - Logs incoming POST/PUT requests, rejects other methods with 503
+4. **ensureAppSlugItem** - App deployment handler
+5. **ensureChatContext** - Chat session handler
+6. **appendChatSection** - Message persistence handler
+7. **Not-found handler** - Returns 501 for unmatched requests (semantically "Not Implemented")
+8. **Error handler** - Catches and formats errors as 500
+
+Each handler has `validate` (arktype schema check) and `handle` (business logic) phases. Some handlers also have a `post` phase for cleanup/logging.
+
+## Data Flow
+
+```
+Client (browser)                      Server (CF Worker)
+─────────────────                     ──────────────────
+VibeDiyApi.ensureAppSlug()        →   cf-serve.ts
+        ↓                                   ↓
+   WebSocket.send(MsgBox<Req>)    →   WebSocketPair upgrade
+                                            ↓
+                                      CombinedEventoEnDecoder.encode()
+                                            ↓
+                                      Evento.trigger() with handlers
+                                            ↓
+                                      unwrapMsgBase() → extract payload
+                                            ↓
+                                      checkAuth() → verify token
+                                            ↓
+                                      handler.handle() → business logic
+                                            ↓
+                                      D1 queries (Drizzle ORM)
+                                            ↓
+   MsgBox<Res>                    ←   SendResponseProvider.send()
+```
+
+## API Methods
+
+### `ensureAppSlug()`
+
+Deploy an app with a filesystem. Process:
+
+1. Verify auth token (clerk/device-id)
+2. Create or retrieve user slug binding
+3. Create or retrieve app slug binding
+4. Calculate CIDs for all file contents
+5. Store assets in D1 `Assets` table
+6. Apply transforms (jsx-to-js, import map generation)
+7. Create `Apps` record with filesystem manifest
+8. Return `entryPointUrl` for iframe loading
+
+### `ensureChatContext()`
+
+Create or retrieve a chat session:
+
+1. If `contextId` provided, verify it exists and belongs to user
+2. Otherwise, generate new contextId (12-char ID)
+3. Insert into `ChatContexts` table
+4. Return `contextId`
+
+### `appendChatSection()`
+
+Add messages to a chat context:
+
+1. Verify context exists and belongs to user
+2. Get max `seq` for context, increment
+3. Insert into `ChatSections` with `origin` ('user' or 'llm')
+4. Blocks use `BlockMsgs | PromptMsg` types from `@vibes.diy/call-ai-v2`
+5. Return `seq` number
+
+## CI/CD
+
+The API is bundled into the main vibes.diy Cloudflare Worker (not a separate deployment).
+
+### Workflow
+
+`.github/workflows/vibes-diy-deploy.yaml`
+
+**Triggers:**
+
+- Push to `vibes.diy/**/*` paths
+- Tags: `vibes-diy@*`
+- Manual dispatch
+
+### Environments
+
+| Trigger                 | Environment | Domain                   |
+| ----------------------- | ----------- | ------------------------ |
+| Tag `vibes-diy@s*`      | staging     | `*.dev-v2.vibesdiy.net`  |
+| Tag `vibes-diy@p*`      | production  | `*.prod-v2.vibesdiy.net` |
+| Path push or other tags | dev         | `*.dev-v2.vibesdiy.net`  |
+
+### Deploy Steps
+
+Deployment is handled by the GitHub Action (`vibes.diy/actions/deploy`). The action runs:
+
+```bash
+pnpm run build              # Build React app + bundle worker
+pnpm run drizzle:d1-remote  # Run D1 migrations
+core-cli writeEnv | wrangler secret bulk  # Push secrets
+pnpm run deploy:${ENV}      # wrangler deploy
+```
+
+Do not run these manually - push a tag or merge to trigger the workflow.
+
+### Infrastructure
+
+| Resource      | Binding  | Purpose                       |
+| ------------- | -------- | ----------------------------- |
+| D1 Database   | `DB`     | Chat contexts, sections, apps |
+| Static Assets | `ASSETS` | React app build               |
+
+### Server Context (VibesApiSQLCtx)
+
+All handlers receive a shared context via `ctx.ctx.getOrThrow<VibesApiSQLCtx>("vibesApiCtx")`:
+
+```typescript
+interface VibesApiSQLCtx {
+  sthis: SuperThis; // Fireproof utilities (logger, nextId, env)
+  db: VibesSqlite; // Drizzle DB instance
+  tokenApi: Record<string, FPApiToken>; // Auth verifiers by type
+  deviceCA: DeviceIdCAIf; // Device ID certificate authority
+  logger: Logger; // Structured logger
+  params: VibesFPApiParameters; // Service configuration
+  cache: CfCacheIf; // Cloudflare cache API
+  fetchPkgVersion(pkg): Promise<string | undefined>; // npm registry lookup
+  waitUntil<T>(promise): void; // CF worker lifecycle
+  ensureStorage(...items): Promise<Result<StorageResult[]>>; // Asset storage
+}
+```
+
+### D1 Schema
+
+Defined in `svc/sql/vibes-diy-api-schema.ts` using Drizzle ORM.
+
+**Assets** - Binary content storage (could move to R2)
+| Column | Type | Description |
+|--------|------|-------------|
+| `assetId` | text PK | CID of content |
+| `content` | blob | Actual content |
+| `created` | text | ISO timestamp |
+
+**UserSlugBindings** - Maps users to their human-friendly slugs
+| Column | Type | Description |
+|--------|------|-------------|
+| `userId` | text | User identifier |
+| `userSlug` | text | Human-friendly user slug (unique) |
+| `created` | text | ISO timestamp |
+
+Primary key: `(userSlug, userId)`. Unique index on `userSlug`.
+
+**AppSlugBindings** - Maps apps to slugs within a user's namespace
+| Column | Type | Description |
+|--------|------|-------------|
+| `userSlug` | text FK | References UserSlugBindings.userSlug |
+| `appSlug` | text | Human-friendly app slug |
+| `created` | text | ISO timestamp |
+
+Primary key: `(appSlug, userSlug)`.
+
+**Apps** - Deployed app versions with filesystem and environment
+| Column | Type | Description |
+|--------|------|-------------|
+| `appSlug` | text | App identifier |
+| `userId` | text | Owner |
+| `userSlug` | text | Owner's slug |
+| `releaseSeq` | int | Incremented on each deployment |
+| `fsId` | text | CID of filesystem manifest |
+| `env` | json | Environment variables (VibesEnv) |
+| `fileSystem` | json | Array of FileSystemItem with transforms |
+| `mode` | text | 'production' or 'dev' |
+| `created` | text | ISO timestamp |
+
+Primary key: `(appSlug, userId, releaseSeq)`. Indexes on `fsId` and `created`.
+
+**ChatContexts** - Chat session containers
+| Column | Type | Description |
+|--------|------|-------------|
+| `contextId` | text PK | UUID v4 |
+| `userId` | text | Owner |
+| `created` | text | ISO timestamp |
+
+**ChatSections** - Individual messages/blocks within a chat
+| Column | Type | Description |
+|--------|------|-------------|
+| `contextId` | text FK | References ChatContexts.contextId |
+| `seq` | int | Section sequence number (0-indexed, auto-incremented) |
+| `origin` | text | 'user' or 'llm' |
+| `blocks` | json | Array of BlockMsgs or PromptMsg from call-ai-v2 |
+| `created` | text | ISO timestamp |
+
+Primary key: `(seq, contextId)`.
+
+### Environment Variables
+
+**Required:**
+| Variable | Purpose |
+|----------|---------|
+| `CLOUD_SESSION_TOKEN_PUBLIC` | Public key for cloud session tokens |
+| `CLERK_PUBLISHABLE_KEY` | Clerk auth verification |
+| `DEVICE_ID_CA_PRIV_KEY` | Device ID certificate authority private key |
+| `DEVICE_ID_CA_CERT` | Device ID certificate authority cert |
+| `FP_VERSION` | Fireproof version for import maps |
+| `VIBES_SVC_HOSTNAME_BASE` | Base hostname for deployed apps (e.g., `vibes.app`) |
+
+**Optional (with defaults):**
+| Variable | Default | Purpose |
+|----------|---------|---------|
+| `VIBES_SVC_PROTOCOL` | `https` | Protocol for deployed apps |
+| `MAX_APP_SLUG_PER_USER_ID` | `10` | Max app slugs per user |
+| `MAX_USER_SLUG_PER_USER_ID` | `10` | Max user slugs per user |
+| `MAX_APPS_PER_USER_ID` | `50` | Max app deployments per user |
+
+## Message Types
+
+### VibeFile (for deployment)
+
+Six variants for different content types:
+
+| Type                | Content                              | Use Case                       |
+| ------------------- | ------------------------------------ | ------------------------------ |
+| `code-block`        | Inline string, `lang: 'jsx' \| 'js'` | JSX/JS source code             |
+| `code-ref`          | `refId` reference                    | Code stored elsewhere          |
+| `str-asset-block`   | Inline string                        | CSS, JSON, text files          |
+| `str-asset-ref`     | `refId` reference                    | String assets stored elsewhere |
+| `uint8-asset-block` | `Uint8Array`                         | Images, fonts, binaries        |
+| `uint8-asset-ref`   | `refId` reference                    | Binary assets stored elsewhere |
+
+All file types share base properties:
+
+```typescript
+{
+  filename: string;    // Must start with /, no //, /../, /./
+  entryPoint?: boolean; // Last one wins, marks app entry
+  mimetype?: string;   // Derived from filename if not set
+}
+```
+
+### FileSystemItem (stored result)
+
+After processing, files become `FileSystemItem`:
+
+```typescript
+{
+  fileName: string;
+  mimeType: string;
+  assetId: string;     // CID of content
+  assetURI: string;    // sql://Assets.assetId, s3://..., r2://...
+  entryPoint?: boolean;
+  size: number;
+  transform?: {
+    type: 'jsx-to-js' | 'imports' | 'import-map' | 'transformed';
+    // ... transform-specific fields
+  }
+}
+```
+
+### Auth Types
+
+```typescript
+type DashAuthType = {
+  type: "clerk" | "device-id";
+  token: string;
+};
+```
+
+Auth is verified via `tokenApi` which supports:
+
+- **clerk** - Clerk JWT verification using `CLERK_PUB_JWT_KEY` / `CLERK_PUB_JWT_URL` env vars
+- **device-id** - Device certificate verification using `DEVICE_ID_CA_*` keys
+
+## Client Usage
+
+> [!WARNING]
+> The client (`@vibes.diy/api-impl`) is currently a work-in-progress. While it can send requests over WebSocket, the response correlation logic (matching server responses to requests via `tid`) is not yet fully implemented. It is currently primarily used for testing with direct handler calls.
+
+The client is currently used in tests. The main vibes.diy app doesn't use it yet - integration is in progress.
+
+### Creating a Client
+
+```typescript
+import { VibeDiyApi } from "@vibes.diy/api-impl";
+import { Result } from "@adviser/cement";
+
+const api = new VibeDiyApi({
+  apiUrl: "wss://api.vibes.diy/v1/ws", // Default if omitted
+  getToken: async () => {
+    // Return auth token (Clerk or device-id)
+    return Result.Ok({ type: "clerk", token: clerkToken });
+  },
+  timeoutMs: 10000, // Default: 10s request timeout
+});
+```
+
+The client uses `KeyedResolvOnce` for connection pooling - multiple `VibeDiyApi` instances with the same `apiUrl` share a WebSocket connection. (See `impl/index.ts` for custom message routing options via the `msg` config.)
+
+### Deploying an App
+
+```typescript
+const res = await api.ensureAppSlug({
+  mode: "dev", // 'dev' or 'production'
+  appSlug: "my-app", // optional, server generates 3-word slug
+  userSlug: "my-user", // optional, server generates 3-word slug
+  env: { API_KEY: "..." }, // optional, passed to app runtime
+  fileSystem: [
+    {
+      type: "code-block",
+      lang: "jsx",
+      filename: "/App.jsx", // Must start with /, becomes entry point
+      entryPoint: true,
+      content: "export default function App() { return <div>Hello</div>; }",
+    },
+  ],
+});
+
+if (res.isOk()) {
+  const { entryPointUrl, fsId, userSlug, appSlug, fileSystem } = res.Ok();
+  // entryPointUrl -> https://{appSlug}--{userSlug}.{hostnameBase}/~{fsId}~/
+  // e.g. https://my-app--my-user.vibes.app/~zABC123~/
+  // fsId -> CID of filesystem manifest
+  // fileSystem -> Array<FileSystemItem> with assetIds and transforms
+}
+```
+
+**Response includes:**
+
+- `entryPointUrl` - URL to load in iframe (constructed from `VIBES_SVC_*` config)
+- `wrapperUrl` - URL for wrapper page with auth handoff
+- `fsId` - CID of the filesystem manifest
+- `fileSystem` - Processed `FileSystemItem[]` with CIDs and transforms applied
+
+### Chat Context Management
+
+```typescript
+// Create a new chat context (server generates contextId)
+const ctx = await api.ensureChatContext({});
+
+// Or retrieve/create with a specific contextId
+const ctx = await api.ensureChatContext({ contextId: "my-context-id" });
+
+if (ctx.isOk()) {
+  const { contextId } = ctx.Ok();
+
+  // Append a user message
+  const userRes = await api.appendChatSection({
+    contextId,
+    origin: "user", // 'user' | 'llm'
+    blocks: [
+      // BlockMsgs or PromptMsg from @vibes.diy/call-ai-v2
+      {
+        type: "prompt.txt",
+        streamId: "stream-1",
+        request: { model: "gpt-4", messages: [{ role: "user", content: "Hello" }] },
+        timestamp: new Date(),
+      },
+    ],
+  });
+  // userRes.Ok().seq -> 0 (first section)
+
+  // Append LLM response
+  const llmRes = await api.appendChatSection({
+    contextId,
+    origin: "llm",
+    blocks: sectionBlocks, // BlockMsgs from call-ai sections stream
+  });
+  // llmRes.Ok().seq -> 1 (second section)
+}
+```
+
+**Note:** Context ownership is enforced - you can only append to contexts created by your userId.
+
+### Testing
+
+Tests use a local handler directly rather than WebSocket. See `api/tests/api.test.ts` for the full setup including:
+
+- Creating a local D1/libsql database
+- Setting up test device-id auth
+- Calling the handler directly
+
+Note: The test passes an ad-hoc `fetch` property via TypeScript structural typing, but this isn't part of the official `VibeDiyApiParam` interface. A proper `fetch` override may be added in the future.
+
+## Running Tests
+
+```bash
+cd vibes.diy/api/tests
+pnpm test
+```
+
+## Implementation Details
+
+### URL Structure
+
+Deployed apps are served via hostname-based routing:
+
+```
+https://{appSlug}--{userSlug}.{hostnameBase}/~{fsId}~/
+       └────────────────────┘ └──────────┘  └──────┘
+              hostname          base domain   version path
+```
+
+Example: `https://my-app--fuzzy-purple-elephant.vibes.app/~z4PhNX7vuL~/`
+
+The `extractHostToBindings()` function parses:
+
+- Hostname pattern: `{appSlug}--{userSlug}.{rest}`
+- Path pattern: `/~{fsId}~/` (fsId starts with `z`, 8+ chars)
+- If no fsId in path, serves latest production release
+
+### Slug Generation
+
+When `appSlug` or `userSlug` are not provided, the server generates 3-word slugs using the `random-words` package:
+
+```typescript
+generate({ exactly: 1, wordsPerString: 3, separator: "-" });
+// → "fuzzy-purple-elephant"
+```
+
+Up to 5 attempts are made to find a unique slug before failing.
+
+### Transform Pipeline
+
+The `write-apps.ts` module applies transforms to uploaded files:
+
+1. **JSX → JS** (`sucrase` with automatic JSX runtime)
+   - Input: `code-block` with `lang: "jsx"`
+   - Output: `/~~transformed~~/{cid}` with `transform: { type: "transformed", action: "jsx-to-js" }`
+
+2. **Import Extraction** (`acorn` parser)
+   - Parses all JS files for `import`/`export` statements
+   - Extracts bare specifiers (e.g., `react`, `@fireproof/core`)
+
+3. **Import Map Generation**
+   - Unknown packages → npm registry lookup for version → `esm.sh` URL
+   - Predefined mappings for React 19.2.1, Fireproof, Clerk, etc.
+   - Output: `/~~calculated~~/import-map.json` with `transform: { type: "import-map" }`
+
+### fsId Calculation
+
+The `fsId` is a deterministic CID computed from:
+
+```typescript
+hash(sortedFilenames + mimetypes + contentCIDs + sortedEnvJSON);
+```
+
+Same files + same env = same fsId (enables deduplication).
+
+### Asset Caching
+
+`serv-entry-point.ts` uses two-tier Cloudflare caching:
+
+1. **Global cache** by CID: `assetCacheUrl/{assetId}`
+2. **Path cache** by request URL
+
+On cache miss: D1 query → populate both caches via `waitUntil()`.
+
+### App Eviction
+
+When a user exceeds `MAX_APPS_PER_USER_ID`:
+
+- Oldest `dev` mode apps are evicted first (10% of total + 1)
+- `production` apps are preserved

package/api.d.ts

@@ -0,0 +1 @@
+export {};

package/api.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=api.js.map

package/api.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"api.js","sourceRoot":"","sources":["../jsr/api.ts"],"names":[],"mappings":""}

package/encoder.d.ts

@@ -0,0 +1,17 @@
+import { EventoEnDecoder, Result } from "@adviser/cement";
+import { W3CWebSocketEvent } from "@vibes.diy/api-types";
+export declare class ReqResEventoEnDecoder implements EventoEnDecoder<Request, string> {
+    encode(args: Request): Promise<Result<unknown>>;
+    decode(data: unknown): Promise<Result<string>>;
+}
+export declare class W3CWebSocketEventEventoEnDecoder implements EventoEnDecoder<W3CWebSocketEvent, string> {
+    readonly jsEncoder: import("@adviser/cement").JSONEnDecoder;
+    encode(args: W3CWebSocketEvent): Promise<Result<unknown>>;
+    decode(data: unknown): Promise<Result<string>>;
+}
+export declare class CombinedEventoEnDecoder implements EventoEnDecoder<Request | W3CWebSocketEvent, string> {
+    private decoders;
+    constructor(...decoders: EventoEnDecoder<unknown, string>[]);
+    encode(args: Request | W3CWebSocketEvent): Promise<Result<unknown>>;
+    decode(data: unknown): Promise<Result<string>>;
+}

package/encoder.js

@@ -0,0 +1,59 @@
+import { Result, JSONEnDecoderSingleton, top_uint8 } from "@adviser/cement";
+import { w3CWebSocketEvent } from "@vibes.diy/api-types";
+import { type } from "arktype";
+export class ReqResEventoEnDecoder {
+    async encode(args) {
+        if (args.method === "POST" || args.method === "PUT") {
+            const body = (await args.json());
+            return Result.Ok(body);
+        }
+        return Result.Ok();
+    }
+    decode(data) {
+        return Promise.resolve(Result.Ok(JSON.stringify(data)));
+    }
+}
+export class W3CWebSocketEventEventoEnDecoder {
+    jsEncoder = JSONEnDecoderSingleton();
+    async encode(args) {
+        const arkMatch = w3CWebSocketEvent(args);
+        if (arkMatch instanceof type.errors) {
+            return Result.Ok();
+        }
+        switch (arkMatch.type) {
+            case "MessageEvent":
+                if (!arkMatch.event.data) {
+                    return Result.Ok();
+                }
+                return this.jsEncoder.parse(await top_uint8(arkMatch.event.data));
+            case "CloseEvent":
+            case "ErrorEvent":
+                return Result.Ok();
+            default:
+                console.error("Unknown WS Event:", arkMatch);
+                return Result.Ok();
+        }
+    }
+    decode(data) {
+        return Promise.resolve(Result.Ok(JSON.stringify(data)));
+    }
+}
+export class CombinedEventoEnDecoder {
+    decoders;
+    constructor(...decoders) {
+        this.decoders = decoders;
+    }
+    async encode(args) {
+        for (const decoder of this.decoders) {
+            const result = await decoder.encode(args);
+            if (result.isOk()) {
+                return result;
+            }
+        }
+        return Result.Ok();
+    }
+    decode(data) {
+        return Promise.resolve(Result.Ok(JSON.stringify(data)));
+    }
+}
+//# sourceMappingURL=encoder.js.map

package/encoder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"encoder.js","sourceRoot":"","sources":["../jsr/encoder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,MAAM,EAAE,sBAAsB,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC7F,OAAO,EAAE,iBAAiB,EAAqB,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,MAAM,OAAO,qBAAqB;IAChC,KAAK,CAAC,MAAM,CAAC,IAAa;QACxB,IAAI,IAAI,CAAC,MAAM,KAAK,MAAM,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE,CAAC;YACpD,MAAM,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,CAAY,CAAC;YAC5C,OAAO,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;QACzB,CAAC;QACD,OAAO,MAAM,CAAC,EAAE,EAAE,CAAC;IACrB,CAAC;IACD,MAAM,CAAC,IAAa;QAClB,OAAO,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAC1D,CAAC;CACF;AAED,MAAM,OAAO,gCAAgC;IAClC,SAAS,GAAG,sBAAsB,EAAE,CAAC;IAC9C,KAAK,CAAC,MAAM,CAAC,IAAuB;QAClC,MAAM,QAAQ,GAAG,iBAAiB,CAAC,IAAI,CAAC,CAAC;QACzC,IAAI,QAAQ,YAAY,IAAI,CAAC,MAAM,EAAE,CAAC;YACpC,OAAO,MAAM,CAAC,EAAE,EAAE,CAAC;QACrB,CAAC;QACD,QAAQ,QAAQ,CAAC,IAAI,EAAE,CAAC;YACtB,KAAK,cAAc;gBACjB,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;oBACzB,OAAO,MAAM,CAAC,EAAE,EAAE,CAAC;gBACrB,CAAC;gBACD,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAa,CAAC,CAAC,CAAC;YAC7E,KAAK,YAAY,CAAC;YAClB,KAAK,YAAY;gBAEf,OAAO,MAAM,CAAC,EAAE,EAAE,CAAC;YACrB;gBACE,OAAO,CAAC,KAAK,CAAC,mBAAmB,EAAE,QAAQ,CAAC,CAAC;gBAC7C,OAAO,MAAM,CAAC,EAAE,EAAE,CAAC;QACvB,CAAC;IACH,CAAC;IACD,MAAM,CAAC,IAAa;QAClB,OAAO,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAC1D,CAAC;CACF;AAED,MAAM,OAAO,uBAAuB;IAC1B,QAAQ,CAAqC;IACrD,YAAY,GAAG,QAA4C;QACzD,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC3B,CAAC;IACD,KAAK,CAAC,MAAM,CAAC,IAAiC;QAC5C,KAAK,MAAM,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACpC,MAAM,MAAM,GAAG,MAAM,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;YAC1C,IAAI,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC;gBAClB,OAAO,MAAM,CAAC;YAChB,CAAC;QACH,CAAC;QACD,OAAO,MAAM,CAAC,EAAE,EAAE,CAAC;IACrB,CAAC;IACD,MAAM,CAAC,IAAa;QAClB,OAAO,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAC1D,CAAC;CACF"}

package/entry-point-utils.d.ts

@@ -0,0 +1,20 @@
+import { Option } from "@adviser/cement";
+import { VibeBindings } from "@vibes.diy/api-types";
+export interface CalcEntryPointUrlParams {
+    hostnameBase: string;
+    bindings: VibeBindings;
+    protocol: string;
+    port?: string;
+}
+export declare function calcEntryPointUrl({ hostnameBase, protocol, bindings, port }: CalcEntryPointUrlParams): string;
+export interface ExtractedHostToBindings {
+    url: string;
+    userSlug: string;
+    appSlug: string;
+    fsId?: string;
+    groupId?: string;
+    path: string;
+}
+export declare function extractHostToBindings({ matchURL }: {
+    matchURL: string;
+}): Option<ExtractedHostToBindings>;

package/entry-point-utils.js

@@ -0,0 +1,39 @@
+import { BuildURI, Option, URI } from "@adviser/cement";
+export function calcEntryPointUrl({ hostnameBase, protocol, bindings, port }) {
+    const hostname = `${bindings.appSlug}--${bindings.userSlug}.${hostnameBase.replace(/^\./, "")}`;
+    const buri = BuildURI.from(`http://template`);
+    if (port && port !== "80" && port !== "443") {
+        buri.port(port);
+    }
+    buri.protocol(protocol).hostname(hostname);
+    if (bindings.fsId) {
+        buri.pathname(`~${bindings.fsId}~`);
+    }
+    return buri.toString();
+}
+export function extractHostToBindings({ matchURL }) {
+    const uri = URI.from(matchURL);
+    const match = /^([a-zA-Z0-9][a-zA-Z0-9-]*?)--([a-zA-Z0-9][a-zA-Z0-9-]+)/.exec(uri.hostname);
+    if (!match) {
+        return Option.None();
+    }
+    const appSlug = match[1].toLowerCase();
+    const userSlug = match[2].toLowerCase();
+    const restPath = uri.pathname.match(/^\/~(z[a-zA-Z0-9]{8,})~(\/.*)?$/);
+    if (restPath) {
+        return Option.Some({
+            url: matchURL,
+            appSlug,
+            userSlug,
+            fsId: restPath[1],
+            path: restPath[2] ?? "/",
+        });
+    }
+    return Option.Some({
+        url: matchURL,
+        appSlug,
+        userSlug,
+        path: uri.pathname,
+    });
+}
+//# sourceMappingURL=entry-point-utils.js.map

package/entry-point-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"entry-point-utils.js","sourceRoot":"","sources":["../jsr/entry-point-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC;AAUxD,MAAM,UAAU,iBAAiB,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAA2B;IACnG,MAAM,QAAQ,GAAG,GAAG,QAAQ,CAAC,OAAO,KAAK,QAAQ,CAAC,QAAQ,IAAI,YAAY,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,EAAE,CAAC;IAChG,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;IAC9C,IAAI,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,EAAE,CAAC;QAC5C,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC;IACD,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC3C,IAAI,QAAQ,CAAC,IAAI,EAAE,CAAC;QAClB,IAAI,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAC,IAAI,GAAG,CAAC,CAAC;IACtC,CAAC;IACD,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC;AACzB,CAAC;AAWD,MAAM,UAAU,qBAAqB,CAAC,EAAE,QAAQ,EAAwB;IACtE,MAAM,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC/B,MAAM,KAAK,GAAG,0DAA0D,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAC5F,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,MAAM,CAAC,IAAI,EAAE,CAAC;IACvB,CAAC;IACD,MAAM,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IACvC,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IACxC,MAAM,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,iCAAiC,CAAC,CAAC;IACvE,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,MAAM,CAAC,IAAI,CAAC;YACjB,GAAG,EAAE,QAAQ;YACb,OAAO;YACP,QAAQ;YACR,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC;YACjB,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,GAAG;SACzB,CAAC,CAAC;IACL,CAAC;IACD,OAAO,MAAM,CAAC,IAAI,CAAC;QACjB,GAAG,EAAE,QAAQ;QACb,OAAO;QACP,QAAQ;QACR,IAAI,EAAE,GAAG,CAAC,QAAQ;KACnB,CAAC,CAAC;AACL,CAAC"}

package/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./api.js";
+export * from "./encoder.js";
+export * from "./entry-point-utils.js";
+export * from "./react/components/index.js";

package/index.js

@@ -0,0 +1,5 @@
+export * from "./api.js";
+export * from "./encoder.js";
+export * from "./entry-point-utils.js";
+export * from "./react/components/index.js";
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../jsr/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC"}

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@vibes.diy/api-pkg",
+  "version": "0.0.0-smoke-70d942c5-1774564515",
+  "type": "module",
+  "scripts": {
+    "build": "core-cli tsc"
+  },
+  "dependencies": {
+    "@adviser/cement": "~0.5.34",
+    "@fireproof/core-device-id": "~0.24.13",
+    "@fireproof/core-protocols-dashboard": "~0.24.13",
+    "@fireproof/core-runtime": "~0.24.13",
+    "@fireproof/core-types-base": "~0.24.13",
+    "@fireproof/core-types-device-id": "~0.24.13",
+    "@fireproof/core-types-protocols-cloud": "~0.24.13",
+    "@fireproof/core-types-protocols-dashboard": "~0.24.13",
+    "@vibes.diy/api-types": "0.0.0-smoke-70d942c5-1774564515",
+    "acorn": "~8.16.0",
+    "arktype": "~2.2.0",
+    "random-words": "~2.0.1",
+    "react": "~19.2.4",
+    "react-dom": "~19.2.4"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/VibesDIY/vibes.diy.git"
+  }
+}

package/react/components/index.d.ts

@@ -0,0 +1 @@
+export * from "./vibes-control.js";

package/react/components/index.js

@@ -0,0 +1,2 @@
+export * from "./vibes-control.js";
+//# sourceMappingURL=index.js.map

package/react/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../jsr/react/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}

package/react/components/vibes-control.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { VibesDiyServCtx } from "@vibes.diy/api-types";
+export default function VibeControls(props: VibesDiyServCtx): React.JSX.Element;

package/react/components/vibes-control.js

@@ -0,0 +1,112 @@
+import React from "react";
+export default function VibeControls(props) {
+    if (props.wrapper.state === "active") {
+        return React.createElement(React.Fragment, null);
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { "data-vibe-controls-container": true },
+            React.createElement("button", { "data-vibe-switch": true, "aria-label": "Toggle settings", type: "button" },
+                React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", height: "80", viewBox: "0 0 600 300", fill: "currentColor" },
+                    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", fill: "#000", d: "M293.353,298.09c-41.038,0-82.078,0.125-123.115-0.077  c-11.993-0.06-24.011-0.701-35.964-1.703c-15.871-1.331-29.73-7.937-41.948-17.946c-16.769-13.736-27.207-31.417-30.983-52.7  c-4.424-24.93,1.404-47.685,16.506-67.913c11.502-15.407,26.564-26.1,45.258-30.884c7.615-1.949,15.631-2.91,23.501-3.165  c20.08-0.652,40.179-0.853,60.271-0.879c69.503-0.094,139.007-0.106,208.51,0.02c14.765,0.026,29.583,0.097,44.28,1.313  c36.984,3.059,61.78,23.095,74.653,57.301c17.011,45.199-8.414,96.835-54.29,111.864c-7.919,2.595-16.165,3.721-24.434,3.871  c-25.614,0.467-51.234,0.742-76.853,0.867C350.282,298.197,321.817,298.09,293.353,298.09z" }),
+                    React.createElement("path", { className: "morphing", fill: "#fff", fillRule: "evenodd", clipRule: "evenodd", d: "M165.866,285.985c-7.999-0.416-19.597-0.733-31.141-1.687  c-15.692-1.297-28.809-8.481-40.105-19.104c-12.77-12.008-20.478-26.828-22.714-44.177c-3.048-23.644,3.384-44.558,19.646-62.143  c9.174-9.92,20.248-17.25,33.444-20.363c7.786-1.837,15.944-2.399,23.973-2.828c9.988-0.535,121.023-0.666,131.021-0.371  c10.191,0.301,20.433,0.806,30.521,2.175c12.493,1.696,23.132,7.919,32.552,16.091c14.221,12.337,22.777,27.953,25.184,46.594  c2.822,21.859-2.605,41.617-16.777,58.695c-9.494,11.441-21.349,19.648-35.722,23.502c-6.656,1.785-13.724,2.278-20.647,2.77  C286.914,285.721,177.682,285.667,165.866,285.985z" }),
+                    React.createElement("path", { className: "logo-vibes", fillRule: "evenodd", clipRule: "evenodd", d: "M135.138,229.842c-2.941-0.084-5.296-1.462-6.684-3.9  c-1.827-3.21-3.328-6.618-4.81-10.011c-3.55-8.128-7.021-16.291-10.486-24.455c-0.48-1.132-0.902-2.329-1.087-3.536  c-0.417-2.72,1.238-4.585,3.938-4.119c1.591,0.275,3.569,0.98,4.45,2.173c2.226,3.015,4.175,6.299,5.784,9.69  c2.208,4.654,3.898,9.552,6.032,14.244c0.628,1.379,2.009,2.416,3.045,3.609c0.892-1.159,2.042-2.201,2.63-3.498  c2.697-5.953,5.22-11.985,7.841-17.974c1.423-3.252,3.089-6.418,6.532-7.905c1.238-0.535,3.012-0.712,4.184-0.214  c0.81,0.344,1.377,2.126,1.385,3.271c0.009,1.458-0.479,2.997-1.059,4.371c-4.227,10.013-8.504,20.005-12.833,29.974  c-0.79,1.819-1.762,3.589-2.875,5.229C139.73,228.848,137.671,229.894,135.138,229.842z" }),
+                    React.createElement("path", { className: "logo-vibes", fillRule: "evenodd", clipRule: "evenodd", d: "M164.636,206.263c0-6.691,0.054-13.383-0.036-20.073  c-0.024-1.851,0.716-2.67,2.449-2.81c0.274-0.022,0.549-0.054,0.823-0.076c5.488-0.445,6.091,0.105,6.091,5.562  c0,12.348,0,24.695,0,37.043c0,2.887-0.354,3.405-3.222,3.618c-1.628,0.121-3.338-0.001-4.91-0.408  c-0.593-0.153-1.265-1.408-1.278-2.171c-0.096-5.584-0.034-11.172-0.022-16.759c0.002-1.308,0-2.617,0-3.926  C164.566,206.263,164.601,206.263,164.636,206.263z" }),
+                    React.createElement("path", { className: "logo-vibes", fillRule: "evenodd", clipRule: "evenodd", d: "M181.891,205.861c0-5.043-0.001-10.086,0-15.129  c0.001-5.046,1.679-7.539,6.606-7.695c9.292-0.294,18.653-1.051,27.888,0.707c7.614,1.449,11.523,5.954,11.902,13.446  c0.066,1.312-0.313,2.752-0.857,3.966c-1.401,3.123-1.399,6.266-0.673,9.507c0.301,1.342,0.443,2.723,0.787,4.053  c1.274,4.925-1.78,10.114-6.085,11.937c-3.111,1.318-6.561,2.327-9.909,2.497c-7.303,0.37-14.639,0.136-21.96,0.101  c-1.165-0.005-2.345-0.181-3.488-0.422c-2.657-0.56-4.162-2.962-4.197-6.801C181.854,216.639,181.891,211.25,181.891,205.861z   M204.442,192.385c-2.757,0-5.514,0-8.271,0c-3.695,0-5.151,1.669-4.712,5.403c0.369,3.14,1.05,3.735,4.225,3.737  c5.024,0.004,10.05,0.109,15.07-0.014c2.028-0.05,4.167-0.27,6.04-0.98c3.182-1.207,3.639-4.256,1.008-6.455  c-1.073-0.896-2.659-1.509-4.06-1.618C210.659,192.220,207.544,192.385,204.442,192.385z M204.334,211.104c0,0.045,0,0.091,0,0.137  c-3.101,0-6.203-0.055-9.302,0.037c-0.823,0.024-2.257,0.373-2.344,0.794c-0.447,2.154-0.959,4.444-0.639,6.563  c0.276,1.822,2.447,1.451,3.882,1.441c5.989-0.042,11.98-0.118,17.961-0.385c1.416-0.063,2.859-0.79,4.176-1.441  c1.79-0.886,1.833-2.475,1.029-4.046c-1.166-2.276-3.297-3.024-5.677-3.081C210.394,211.049,207.363,211.104,204.334,211.104z" }),
+                    React.createElement("path", { className: "logo-vibes", fillRule: "evenodd", clipRule: "evenodd", d: "M235.786,208.14c0-6.905-0.01-13.809,0.004-20.714  c0.007-3.474,0.948-4.428,4.415-3.758c6.62,1.279,13.232,2.651,19.759,4.331c1.7,0.438,3.404,1.896,4.515,3.341  c1.777,2.31,0.433,5.367-2.463,5.745c-1.86,0.243-3.819-0.138-5.717-0.368c-2.183-0.264-4.339-0.783-6.525-0.976  c-1.572-0.138-3.065,0.375-3.8,1.959c-0.76,1.638-0.319,3.329,0.942,4.34c1.619,1.296,3.522,2.327,5.447,3.128  c2.146,0.894,4.539,1.207,6.66,2.145c1.446,0.64,2.982,1.687,3.786,2.981c0.689,1.11,0.928,3.094,0.378,4.202  c-0.492,0.991-2.32,1.795-3.579,1.825c-2.238,0.052-4.483-0.652-6.741-0.832c-1.614-0.127-3.333-0.203-4.865,0.212  c-2.574,0.699-3.225,3.013-1.719,5.218c1.396,2.044,3.431,3.141,5.757,3.761c2.791,0.744,5.637,1.315,8.373,2.222  c3.19,1.058,4.791,3.496,4.801,6.723c0.011,3.365-1.759,5.021-5.138,4.424c-4.402-0.778-8.759-1.81-13.134-2.735  c-2.357-0.499-4.718-0.981-7.069-1.511c-3.263-0.737-4.132-1.805-4.141-5.154c-0.019-6.836-0.006-13.672-0.006-20.508  C235.747,208.141,235.766,208.14,235.786,208.14z" }),
+                    React.createElement("path", { className: "logo-vibes", fillRule: "evenodd", clipRule: "evenodd", d: "M291.409,229.748c-3.621-0.394-7.838-0.587-11.94-1.379  c-3.577-0.69-6.343-2.991-8.213-6.163c-1.763-2.99-0.301-5.6,3.139-5.292c2.287,0.205,4.512,1.129,6.758,1.755  c6.281,1.751,12.643,1.892,19.053,0.951c0.667-0.098,1.31-0.416,1.941-0.686c1.502-0.644,2.55-1.682,2.581-3.415  c0.031-1.74-1.195-2.749-2.579-3.132c-2.298-0.637-4.688-1.021-7.065-1.273c-5.062-0.536-10.252-0.401-15.187-1.475  c-9.677-2.105-11.678-10.53-10.101-16.009c1.62-5.625,5.911-8.92,11.318-9.73c8.388-1.257,16.925-1.491,25.279,0.654  c3.702,0.951,6.615,3.072,7.883,6.931c0.918,2.792-0.332,4.6-3.268,4.357c-1.684-0.139-3.367-0.676-4.974-1.248  c-6.711-2.387-13.572-2.897-20.569-1.783c-1.001,0.159-2.146,0.414-2.875,1.034c-0.901,0.766-2.016,1.981-1.98,2.964  c0.041,1.128,0.995,2.733,1.991,3.206c1.81,0.857,3.925,1.279,5.948,1.441c5.152,0.41,10.356,0.296,15.479,0.905  c7.98,0.949,13.779,9.833,11.241,17.125c-1.959,5.628-6.44,8.489-12.143,9.322C299.455,229.344,295.715,229.419,291.409,229.748z" }),
+                    React.createElement("path", { className: "logo-diy", fillRule: "evenodd", clipRule: "evenodd", d: "M388.313,210.147c0-6.356,0.034-12.713-0.023-19.069  c-0.015-1.61,0.359-2.472,2.19-2.346c2.887,0.198,5.809,0.045,8.671,0.398c4.396,0.542,8.019,4.294,8.144,8.904  c0.223,8.142,0.265,16.304-0.074,24.439c-0.248,5.945-4.552,9.662-10.491,9.831c-1.999,0.057-4.003-0.081-6.006-0.09  c-1.746-0.008-2.439-0.853-2.428-2.584C388.34,223.136,388.313,216.642,388.313,210.147z M393.418,210.324c-0.037,0-0.075,0-0.114,0  c0,4.55-0.038,9.101,0.015,13.65c0.031,2.688,0.926,3.439,3.56,3.239c3.273-0.248,5.493-2.511,5.534-6.04  c0.082-7.099,0.054-14.2-0.033-21.299c-0.041-3.268-1.739-5.241-4.87-6.092c-2.68-0.728-4.025,0.161-4.07,2.896  C393.364,201.226,393.418,205.775,393.418,210.324z" }),
+                    React.createElement("path", { className: "logo-diy", fillRule: "evenodd", clipRule: "evenodd", d: "M440.516,210.627c0,6.281,0.007,12.563-0.004,18.844  c-0.004,2.067-0.805,3.038-2.531,3.015c-1.877-0.025-2.365-1.136-2.359-2.876c0.046-12.631,0.019-25.263,0.029-37.895  c0.002-2.592,0.525-3.205,2.419-3.148c1.856,0.057,2.479,1.03,2.466,2.803C440.484,197.788,440.515,204.208,440.516,210.627z" }),
+                    React.createElement("path", { className: "logo-diy", fillRule: "evenodd", clipRule: "evenodd", d: "M416.875,210.721c0.068-3.305,1.849-5.306,4.727-5.309  c2.765-0.003,4.924,2.404,4.816,5.371c-0.106,2.956-2.355,5.212-5.12,5.138C418.626,215.849,416.813,213.718,416.875,210.721z" }),
+                    React.createElement("path", { className: "logo-diy", fillRule: "evenodd", clipRule: "evenodd", d: "M449.933,210.636c0.102-3.331,1.886-5.279,4.778-5.22  c2.67,0.055,4.829,2.432,4.762,5.243c-0.073,3.021-2.404,5.36-5.242,5.261C451.606,215.829,449.84,213.657,449.933,210.636z" }),
+                    React.createElement("path", { className: "logo-diy", fillRule: "evenodd", clipRule: "evenodd", d: "M478.079,200.8c0.674-1.566,1.121-2.53,1.506-3.519  c0.673-1.73,1.252-3.5,1.981-5.205c0.315-0.737,0.766-1.654,1.407-1.961c1.094-0.523,2.388-0.63,3.598-0.912  c0.205,1.142,0.798,2.381,0.537,3.404c-0.606,2.388-1.448,4.756-2.507,6.984c-3.981,8.389-4.352,17.254-3.78,26.282  c0.091,1.438,0.031,2.899-0.105,4.335c-0.14,1.473-0.989,2.428-2.542,2.497c-1.514,0.067-2.311-0.903-2.54-2.23  c-0.232-1.348-0.394-2.754-0.277-4.108c0.94-10.972-1.116-21.38-5.626-31.375c-0.586-1.298-0.899-2.762-1.093-4.183  c-0.233-1.712,0.825-2.592,2.379-1.843c1.164,0.561,2.345,1.55,2.973,2.657c1.078,1.897,1.712,4.043,2.568,6.07  C476.918,198.547,477.370,199.361,478.079,200.8z" }))),
+            React.createElement("div", { "data-vibe-panel": true, "data-panel-hidden": true },
+                React.createElement("div", { "data-panel-mode": "default" },
+                    React.createElement("div", { "data-label-container": true },
+                        React.createElement("div", { "data-label": true, "data-disappear": true },
+                            React.createElement("span", null, "Launcher")),
+                        React.createElement("div", { "data-button-wrapper": true },
+                            React.createElement("button", { "data-action": "logout", "data-variant": "blue", "data-has-icon": true, type: "button" },
+                                React.createElement("div", { "data-content-wrapper": true },
+                                    React.createElement("div", { "data-icon-container": true },
+                                        React.createElement("div", { "data-icon": true },
+                                            React.createElement("svg", { width: "45", height: "45", viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                                                React.createElement("circle", { cx: "22", cy: "22", r: "22", fill: "var(--vibes-button-icon-bg)" }),
+                                                React.createElement("path", { d: "M21.895 25.562C23.266 25.562 24.581 25.0176 25.5506 24.048C26.5202 23.0784 27.0646 21.7635 27.0646 20.3922C27.0646 19.021 26.5202 17.7061 25.5506 16.7365C24.581 15.7669 23.266 15.2225 21.895 15.2225C20.524 15.2225 19.2089 15.7669 18.2393 16.7365C17.2697 17.7061 16.7253 19.021 16.7253 20.3922C16.7253 21.7635 17.2697 23.0784 18.2393 24.048C19.2089 25.0176 20.524 25.562 21.895 25.562ZM30.1624 31.7676C30.1624 33.8395 30.1624 33.8395 21.895 33.8395C13.6277 33.8395 13.6277 33.8395 13.6277 31.7676C13.6277 29.1817 17.3309 27.078 21.895 27.078C26.4591 27.078 30.1624 29.1817 30.1624 31.7676Z", fill: "var(--vibes-button-icon-fill)" })))),
+                                    React.createElement("span", null, "Logout"))),
+                            React.createElement("button", { "data-action": "remix", "data-variant": "red", "data-has-icon": true, type: "button" },
+                                React.createElement("div", { "data-content-wrapper": true },
+                                    React.createElement("div", { "data-icon-container": true },
+                                        React.createElement("div", { "data-icon": true },
+                                            React.createElement("svg", { width: "45", height: "45", viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                                                React.createElement("circle", { cx: "22", cy: "22", r: "22", fill: "var(--vibes-button-icon-bg)" }),
+                                                React.createElement("path", { d: "M27.3889 13.2222L30.7778 16.6111M30.7778 16.6111L27.3889 20M30.7778 16.6111H18.5556C17.6558 16.6111 16.7929 16.9686 16.1552 17.6063C15.5175 18.244 15.1601 19.1069 15.1601 20.0067V21.7044M16.6111 30.7778L13.2222 27.3889M13.2222 27.3889L16.6111 24M13.2222 27.3889L25.4445 27.3889C26.3442 27.3889 27.2071 27.0314 27.8448 26.3937C28.4825 25.756 28.84 24.8931 28.84 23.9933L28.84 22.2956", stroke: "var(--vibes-button-icon-fill)", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" })))),
+                                    React.createElement("span", null, "Remix"))),
+                            React.createElement("button", { "data-action": "invite", "data-variant": "yellow", "data-has-icon": true, type: "button" },
+                                React.createElement("div", { "data-content-wrapper": true },
+                                    React.createElement("div", { "data-icon-container": true },
+                                        React.createElement("div", { "data-icon": true },
+                                            React.createElement("svg", { width: "45", height: "45", viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                                                React.createElement("circle", { cx: "22", cy: "22", r: "22", fill: "var(--vibes-button-icon-bg)" }),
+                                                React.createElement("path", { d: "M19.1262 23.3156C20.2853 23.3156 21.3969 22.8551 22.2166 22.0354C23.0362 21.2157 23.4967 20.1041 23.4967 18.9451C23.4967 17.786 23.0362 16.6744 22.2166 15.8547C21.3969 15.0351 20.2853 14.5745 19.1262 14.5745C17.9672 14.5745 16.8556 15.0351 16.0359 15.8547C15.2162 16.6744 14.7557 17.786 14.7557 18.9451C14.7557 20.1041 15.2162 21.2157 16.0359 22.0354C16.8556 22.8551 17.9672 23.3156 19.1262 23.3156ZM26.1148 23.3156C26.9589 23.3156 27.7685 22.9804 28.3651 22.3838C28.9617 21.7872 29.2968 20.9776 29.2968 20.1335C29.2968 19.2895 28.9617 18.4799 28.3651 17.8832C27.7685 17.2866 26.9589 16.9515 26.1148 16.9515M11.9328 30.3042C11.9328 27.3327 15.1575 24.9222 19.1262 24.9222C23.095 24.9222 26.3197 27.3327 26.3197 30.3042M29.2968 25.7255C31.2891 26.2717 32.8082 27.7629 32.8082 29.5009", stroke: "var(--vibes-button-icon-fill)", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })))),
+                                    React.createElement("span", null, "Invite"))),
+                            React.createElement("button", { "data-action": "home", "data-variant": "gray", "data-has-icon": true, type: "button" },
+                                React.createElement("div", { "data-content-wrapper": true },
+                                    React.createElement("div", { "data-icon-container": true },
+                                        React.createElement("div", { "data-icon": true },
+                                            React.createElement("svg", { width: "45", height: "45", viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                                                React.createElement("circle", { cx: "22", cy: "22", r: "22", fill: "var(--vibes-button-icon-bg)" }),
+                                                React.createElement("path", { d: "M22.6107 12.5279C22.4369 12.3756 22.2139 12.2915 21.9831 12.2915C21.7523 12.2915 21.5293 12.3756 21.3555 12.5279L12.3887 20.3792C12.2947 20.4616 12.2189 20.563 12.166 20.6768C12.1131 20.7906 12.0843 20.9143 12.0815 21.0399C12.0787 21.1655 12.1019 21.2904 12.1497 21.4064C12.1974 21.5224 12.2686 21.627 12.3588 21.7135C12.449 21.8 12.5564 21.8666 12.6743 21.9093C12.7922 21.9521 12.9179 21.9699 13.0432 21.9618C13.1686 21.9537 13.2909 21.9197 13.4024 21.862C13.5138 21.8043 13.612 21.7242 13.6905 21.6266L14.0788 21.2869V29.6111C14.0788 29.9844 14.2271 30.3424 14.4911 30.6064C14.7551 30.8704 15.1131 31.0186 15.4863 31.0186H18.6527C18.9065 31.0186 19.1499 30.9178 19.3294 30.7382C19.509 30.5587 19.6098 30.3152 19.6098 30.0615V25.8379C19.6098 25.5842 19.7106 25.3408 19.8901 25.1612C20.0697 24.9817 20.3131 24.8809 20.5669 24.8809H23.3992C23.6529 24.8809 23.8964 24.9817 24.0759 25.1612C24.2555 25.3408 24.3563 25.5842 24.3563 25.8379V30.0615C24.3563 30.3152 24.4571 30.5587 24.6366 30.7382C24.8162 30.9178 25.0596 31.0186 25.3133 31.0186H28.4798C28.8531 31.0186 29.211 30.8704 29.4751 30.6064C29.7391 30.3424 29.8873 29.9844 29.8873 29.6111V21.2869L30.2756 21.6266C30.4406 21.7631 30.6507 21.8305 30.8631 21.8155C31.0755 21.8004 31.2737 21.7041 31.4177 21.5459C31.5616 21.3877 31.6397 21.1803 31.6356 20.9674C31.6315 20.7545 31.5455 20.5503 31.3954 20.3978L22.6107 12.5279Z", fill: "var(--vibes-button-icon-fill)" })))),
+                                    React.createElement("span", null, "Home")))))),
+                React.createElement("div", { "data-panel-mode": "mutate", "data-mode-hidden": true },
+                    React.createElement("div", { "data-label-container": true },
+                        React.createElement("div", { "data-label": true, "data-disappear": true },
+                            React.createElement("span", null, "Remix")),
+                        React.createElement("div", { "data-button-wrapper": true },
+                            React.createElement("button", { "data-action": "fresh-start", "data-variant": "blue", "data-has-icon": true, type: "button" },
+                                React.createElement("div", { "data-content-wrapper": true },
+                                    React.createElement("div", { "data-icon-container": true },
+                                        React.createElement("div", { "data-icon": true },
+                                            React.createElement("svg", { width: "45", height: "45", viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                                                React.createElement("circle", { cx: "22", cy: "22", r: "22", fill: "var(--vibes-button-icon-bg)" }),
+                                                React.createElement("path", { d: "M27.3889 13.2222L30.7778 16.6111M30.7778 16.6111L27.3889 20M30.7778 16.6111H18.5556C17.6558 16.6111 16.7929 16.9686 16.1552 17.6063C15.5175 18.244 15.1601 19.1069 15.1601 20.0067V21.7044M16.6111 30.7778L13.2222 27.3889M13.2222 27.3889L16.6111 24M13.2222 27.3889L25.4445 27.3889C26.3442 27.3889 27.2071 27.0314 27.8448 26.3937C28.4825 25.756 28.84 24.8931 28.84 23.9933L28.84 22.2956", stroke: "var(--vibes-button-icon-fill)", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" })))),
+                                    React.createElement("span", null, "Fresh Start"))),
+                            React.createElement("button", { "data-action": "remix-code", "data-variant": "red", "data-has-icon": true, type: "button" },
+                                React.createElement("div", { "data-content-wrapper": true },
+                                    React.createElement("div", { "data-icon-container": true },
+                                        React.createElement("div", { "data-icon": true },
+                                            React.createElement("svg", { width: "45", height: "45", viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                                                React.createElement("circle", { cx: "22", cy: "22", r: "22", fill: "var(--vibes-button-icon-bg)" }),
+                                                React.createElement("path", { d: "M27.3889 13.2222L30.7778 16.6111M30.7778 16.6111L27.3889 20M30.7778 16.6111H18.5556C17.6558 16.6111 16.7929 16.9686 16.1552 17.6063C15.5175 18.244 15.1601 19.1069 15.1601 20.0067V21.7044M16.6111 30.7778L13.2222 27.3889M13.2222 27.3889L16.6111 24M13.2222 27.3889L25.4445 27.3889C26.3442 27.3889 27.2071 27.0314 27.8448 26.3937C28.4825 25.756 28.84 24.8931 28.84 23.9933L28.84 22.2956", stroke: "var(--vibes-button-icon-fill)", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" })))),
+                                    React.createElement("span", null, "Remix Code"))),
+                            React.createElement("button", { "data-action": "back", "data-variant": "yellow", "data-has-icon": true, type: "button" },
+                                React.createElement("div", { "data-content-wrapper": true },
+                                    React.createElement("div", { "data-icon-container": true },
+                                        React.createElement("div", { "data-icon": true },
+                                            React.createElement("svg", { width: "45", height: "45", viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                                                React.createElement("circle", { cx: "22", cy: "22", r: "22", fill: "var(--vibes-button-icon-bg)" }),
+                                                React.createElement("path", { d: "M25.5 14L17.5 22L25.5 30", stroke: "var(--vibes-button-icon-fill)", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" })))),
+                                    React.createElement("span", null, "Back")))))),
+                React.createElement("div", { "data-panel-mode": "invite", "data-mode-hidden": true },
+                    React.createElement("div", { "data-label-container": true, "data-label-yellow": true },
+                        React.createElement("div", { "data-label": true, "data-disappear": true },
+                            React.createElement("span", null, "Invite")),
+                        React.createElement("div", { "data-button-wrapper": true },
+                            React.createElement("form", { "data-invite-form": true, action: "/invite", method: "GET" },
+                                React.createElement("input", { type: "hidden", name: "db", id: "vibe-db", value: "" }),
+                                React.createElement("input", { type: "hidden", name: "vibe", id: "vibe-vibe", value: "" }),
+                                React.createElement("input", { type: "hidden", name: "group", id: "vibe-group", value: "" }),
+                                React.createElement("label", { htmlFor: "vibe-invite-email" }, "Invite by email"),
+                                React.createElement("input", { id: "vibe-invite-email", type: "email", name: "email", placeholder: "friend@example.com", autoComplete: "email", required: true }),
+                                React.createElement("button", { type: "submit", "data-variant": "blue" }, "Send Invite")),
+                            React.createElement("div", { "data-invite-status": true, style: { display: "none" } }),
+                            React.createElement("button", { "data-action": "back", "data-variant": "yellow", "data-has-icon": true, type: "button" },
+                                React.createElement("div", { "data-content-wrapper": true },
+                                    React.createElement("div", { "data-icon-container": true },
+                                        React.createElement("div", { "data-icon": true },
+                                            React.createElement("svg", { width: "45", height: "45", viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                                                React.createElement("circle", { cx: "22", cy: "22", r: "22", fill: "var(--vibes-button-icon-bg)" }),
+                                                React.createElement("path", { d: "M25.5 14L17.5 22L25.5 30", stroke: "var(--vibes-button-icon-fill)", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" })))),
+                                    React.createElement("span", null, "Back")))))))),
+        React.createElement("script", { type: "module", src: "/dist/vibes.diy/pkg/serve/vibes-controls/scripts.js" })));
+}
+//# sourceMappingURL=vibes-control.js.map

package/react/components/vibes-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vibes-control.js","sourceRoot":"","sources":["../../../jsr/react/components/vibes-control.tsx"],"names":[],"mappings":"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"}

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": [
+    "/Users/menabe/Software/fproof/vibes.diy-main/tsconfig.dist.json"
+  ],
+  "compilerOptions": {
+    "outDir": "../npm/",
+    "noEmit": false
+  },
+  "include": [
+    "**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+    ".git",
+    ".vscode"
+  ]
+}