create-sia-app 0.1.7 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-sia-app",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "type": "module",
   "bin": {
     "create-sia-app": "./dist/index.js"
@@ -11,11 +11,7 @@
   ],
   "scripts": {
     "build": "tsup src/index.ts --format esm --dts --clean && rm -rf ./template && cp -r ../../template ./template && rm -rf ./template/node_modules",
-    "dev": "tsup src/index.ts --format esm --watch",
-    "release:patch": "node -e \"const p=require('./package.json');const v=p.version.split('.');v[2]++;p.version=v.join('.');require('fs').writeFileSync('./package.json',JSON.stringify(p,null,2)+'\\n')\" && bun run release:push",
-    "release:minor": "node -e \"const p=require('./package.json');const v=p.version.split('.');v[1]++;v[2]=0;p.version=v.join('.');require('fs').writeFileSync('./package.json',JSON.stringify(p,null,2)+'\\n')\" && bun run release:push",
-    "release:major": "node -e \"const p=require('./package.json');const v=p.version.split('.');v[0]++;v[1]=0;v[2]=0;p.version=v.join('.');require('fs').writeFileSync('./package.json',JSON.stringify(p,null,2)+'\\n')\" && bun run release:push",
-    "release:push": "git add package.json && git commit -m \"v$(node -p 'require(\"./package.json\").version')\" && git tag v$(node -p 'require(\"./package.json\").version') && git push && git push --tags"
+    "dev": "tsup src/index.ts --format esm --watch"
   },
   "dependencies": {
     "@clack/prompts": "^0.10.0",

package/template/AGENTS.md

@@ -0,0 +1,143 @@
+# Sia Starter — AI Assistant Guide
+
+## Overview
+
+A starter template for building decentralized storage apps on the Sia network. Uses `@siafoundation/sia` — a TypeScript SDK that ships a pre-compiled WASM binary for encryption, uploads, downloads, and key management.
+
+**Tech stack:** React 19, TypeScript, Vite, Tailwind CSS 4, Zustand, `@siafoundation/sia`
+
+## Architecture
+
+### Auth Flow State Machine
+
+The app uses a step-based auth flow managed by Zustand (`src/stores/auth.ts`):
+
+```
+loading → connect → approve → recovery → connected
+```
+
+- **loading**: WASM initializes, checks for stored app key
+- **connect**: User enters indexer URL, app requests connection
+- **approve**: User visits approval URL in another tab
+- **recovery**: User generates or enters 12-word recovery phrase
+- **connected**: SDK is ready, main app UI renders
+
+### SDK
+
+The SDK (`@siafoundation/sia`) is an npm package that handles:
+- Encrypted file uploads/downloads (erasure coding + encryption)
+- Key derivation from recovery phrases (BIP-39)
+- Object pinning and metadata management
+- Connection auth with indexers
+- Parallel multi-worker uploads and downloads
+
+### Zustand Persistence
+
+Auth state persists to localStorage via Zustand's `persist` middleware. The storage key is `{app-name}-auth`. Persisted fields: `storedKeyHex`, `indexerUrl`.
+
+## Key Files
+
+| File | Description |
+|------|-------------|
+| `src/lib/constants.ts` | App key, app name, indexer URL, app metadata |
+| `src/stores/auth.ts` | Auth state machine (Zustand + persist) |
+| `src/stores/toast.ts` | Toast notification store (auto-dismiss) |
+| `src/components/Navbar.tsx` | App navbar with title, public key, sign out |
+| `src/components/Toast.tsx` | Toast overlay component |
+| `src/components/CopyButton.tsx` | Copy-to-clipboard button with toast |
+| `src/components/auth/AuthFlow.tsx` | Auth orchestrator |
+| `src/components/auth/ConnectScreen.tsx` | Indexer connection + CORS fallback |
+| `src/components/auth/ApproveScreen.tsx` | Approval polling (auto-polls on mount) |
+| `src/components/auth/RecoveryScreen.tsx` | Recovery phrase generation/import |
+| `src/components/upload/UploadZone.tsx` | File upload/download dropzone + file list |
+| `src/components/DevNote.tsx` | Developer callout component (unused, available for customization) |
+
+## SDK Usage Patterns
+
+### Upload a file
+
+```ts
+const pinnedObject = await client.upload(file, (progress) => {
+  // progress.phase: 'connecting' | 'uploading' | 'assembling' | 'pinning'
+  console.log(`${progress.slabsComplete}/${progress.slabsTotal} slabs`)
+})
+pinnedObject.updateMetadata(new TextEncoder().encode(JSON.stringify({
+  name: 'file.txt',
+  type: 'text/plain',
+  size: file.size,
+  hash: '...',
+})))
+await client.pinObject(pinnedObject)
+await client.updateObjectMetadata(pinnedObject)
+```
+
+### Download a file
+
+```ts
+const data = await client.download(pinnedObject, (progress) => {
+  // progress.phase: 'connecting' | 'downloading' | 'assembling'
+  console.log(`${progress.slabsComplete}/${progress.slabsTotal} slabs`)
+})
+// data is Uint8Array
+```
+
+### List files
+
+```ts
+import { decodeMetadata } from '@siafoundation/sia'
+
+const events = await client.objectEvents(null, 100)
+for (const event of events) {
+  if (!event.deleted && event.object) {
+    const meta = decodeMetadata(event.object.metadata())
+    console.log(meta.name, event.object.size())
+  }
+}
+```
+
+### Delete a file
+
+```ts
+await client.deleteObject(objectId)
+```
+
+### Share a file
+
+```ts
+const validUntil = Date.now() + 7 * 24 * 60 * 60 * 1000 // 7 days
+const shareUrl = client.shareObject(pinnedObject, validUntil)
+```
+
+### Download shared file
+
+```ts
+const object = await client.sharedObject(shareUrl)
+const data = await client.download(object)
+```
+
+## Customization
+
+### Change app key
+
+Edit `src/lib/constants.ts`. The app key is a 32-byte hex string that identifies your app to the indexer. Generate one with:
+
+```ts
+crypto.randomBytes(32).toString('hex')
+```
+
+### Replace the upload UI
+
+The post-auth UI is rendered in `src/App.tsx`. Replace `<UploadZone />` with your own component. The `SiaClient` is available via `useAuthStore((s) => s.client)`. `SiaClient` exposes all SDK methods directly — use `client.upload()`, `client.download()`, `client.objectEvents()`, etc.
+
+### Add routes
+
+Install `react-router-dom` and wrap your app. The auth flow should gate all routes.
+
+## Common Commands
+
+```bash
+bun install     # Install dependencies
+bun dev         # Start dev server
+bun run build   # Production build
+bun run check   # Lint with Biome
+```

package/template/CLAUDE.md

@@ -2,9 +2,9 @@
 
 ## Overview
 
-A starter template for building decentralized storage apps on the Sia network. Uses a WASM SDK compiled from Rust to handle encryption, uploads, downloads, and key management.
+A starter template for building decentralized storage apps on the Sia network. Uses `@siafoundation/sia` — a TypeScript SDK that ships a pre-compiled WASM binary for encryption, uploads, downloads, and key management.
 
-**Tech stack:** React 19, TypeScript, Vite, Tailwind CSS 4, Zustand, WASM (Rust)
+**Tech stack:** React 19, TypeScript, Vite, Tailwind CSS 4, Zustand, `@siafoundation/sia`
 
 ## Architecture
 
@@ -22,15 +22,14 @@ loading → connect → approve → recovery → connected
 - **recovery**: User generates or enters 12-word recovery phrase
 - **connected**: SDK is ready, main app UI renders
 
-### WASM SDK
+### SDK
 
-The SDK (`indexd_wasm`) is a Rust-compiled WASM module that handles:
+The SDK (`@siafoundation/sia`) is an npm package that handles:
 - Encrypted file uploads/downloads (erasure coding + encryption)
 - Key derivation from recovery phrases (BIP-39)
 - Object pinning and metadata management
 - Connection auth with indexers
-
-Initialized via `src/lib/sdk.ts`, which wraps the WASM init and re-exports types.
+- Parallel multi-worker uploads and downloads
 
 ### Zustand Persistence
 
@@ -40,12 +39,8 @@ Auth state persists to localStorage via Zustand's `persist` middleware. The stor
 
 | File | Description |
 |------|-------------|
-| `src/lib/sdk.ts` | WASM init + re-exports (AppKey, Builder, SDK, PinnedObject) |
 | `src/lib/constants.ts` | App key, app name, indexer URL, app metadata |
-| `src/lib/hex.ts` | Hex encode/decode utilities |
-| `src/lib/format.ts` | FileMetadata type, formatBytes, formatDate |
-| `src/lib/wasm-env.ts` | `now()` stub for WASM chrono |
-| `src/stores/auth.ts` | Auth state machine + balanced preset |
+| `src/stores/auth.ts` | Auth state machine (Zustand + persist) |
 | `src/stores/toast.ts` | Toast notification store (auto-dismiss) |
 | `src/components/Navbar.tsx` | App navbar with title, public key, sign out |
 | `src/components/Toast.tsx` | Toast overlay component |
@@ -54,36 +49,34 @@ Auth state persists to localStorage via Zustand's `persist` middleware. The stor
 | `src/components/auth/ConnectScreen.tsx` | Indexer connection + CORS fallback |
 | `src/components/auth/ApproveScreen.tsx` | Approval polling (auto-polls on mount) |
 | `src/components/auth/RecoveryScreen.tsx` | Recovery phrase generation/import |
-| `src/components/upload/UploadZone.tsx` | File upload dropzone + file list |
+| `src/components/upload/UploadZone.tsx` | File upload/download dropzone + file list |
 | `src/components/DevNote.tsx` | Developer callout component (unused, available for customization) |
-| `wasm/indexd_wasm/` | Pre-built WASM binary + JS glue + types |
-| `rust/sia-sdk-rs/` | Rust SDK source (cloned on install, gitignored) |
 
 ## SDK Usage Patterns
 
 ### Upload a file
 
 ```ts
-const data = new Uint8Array(arrayBuffer)
-const pinnedObject = await sdk.uploadWithProgress(data, (current, total) => {
-  console.log(`${current}/${total} shards`)
+const pinnedObject = await client.upload(file, (progress) => {
+  // progress.phase: 'connecting' | 'uploading' | 'assembling' | 'pinning'
+  console.log(`${progress.slabsComplete}/${progress.slabsTotal} slabs`)
 })
 pinnedObject.updateMetadata(new TextEncoder().encode(JSON.stringify({
   name: 'file.txt',
   type: 'text/plain',
-  size: data.byteLength,
+  size: file.size,
   hash: '...',
 })))
-await sdk.pinObject(pinnedObject)
-await sdk.updateObjectMetadata(pinnedObject)
+await client.pinObject(pinnedObject)
+await client.updateObjectMetadata(pinnedObject)
 ```
 
 ### Download a file
 
 ```ts
-const object = await sdk.object(objectId)
-const data = await sdk.downloadWithProgress(object, (current, total) => {
-  console.log(`${current}/${total} slabs`)
+const data = await client.download(pinnedObject, (progress) => {
+  // progress.phase: 'connecting' | 'downloading' | 'assembling'
+  console.log(`${progress.slabsComplete}/${progress.slabsTotal} slabs`)
 })
 // data is Uint8Array
 ```
@@ -91,10 +84,12 @@ const data = await sdk.downloadWithProgress(object, (current, total) => {
 ### List files
 
 ```ts
-const events = await sdk.objectEvents(null, 100)
+import { decodeMetadata } from '@siafoundation/sia'
+
+const events = await client.objectEvents(null, 100)
 for (const event of events) {
   if (!event.deleted && event.object) {
-    const meta = JSON.parse(new TextDecoder().decode(event.object.metadata()))
+    const meta = decodeMetadata(event.object.metadata())
     console.log(meta.name, event.object.size())
   }
 }
@@ -103,21 +98,21 @@ for (const event of events) {
 ### Delete a file
 
 ```ts
-await sdk.deleteObject(objectId)
+await client.deleteObject(objectId)
 ```
 
 ### Share a file
 
 ```ts
 const validUntil = Date.now() + 7 * 24 * 60 * 60 * 1000 // 7 days
-const shareUrl = sdk.shareObject(pinnedObject, validUntil)
+const shareUrl = client.shareObject(pinnedObject, validUntil)
 ```
 
 ### Download shared file
 
 ```ts
-const object = await sdk.sharedObject(shareUrl)
-const data = await sdk.download(object)
+const object = await client.sharedObject(shareUrl)
+const data = await client.download(object)
 ```
 
 ## Customization
@@ -132,28 +127,12 @@ crypto.randomBytes(32).toString('hex')
 
 ### Replace the upload UI
 
-The post-auth UI is rendered in `src/App.tsx`. Replace `<UploadZone />` with your own component. The SDK is available via `useAuthStore((s) => s.sdk)`.
+The post-auth UI is rendered in `src/App.tsx`. Replace `<UploadZone />` with your own component. The `SiaClient` is available via `useAuthStore((s) => s.client)`. `SiaClient` exposes all SDK methods directly — use `client.upload()`, `client.download()`, `client.objectEvents()`, etc.
 
 ### Add routes
 
 Install `react-router-dom` and wrap your app. The auth flow should gate all routes.
 
-### Change performance defaults
-
-Edit the `applyBalancedPreset` function in `src/stores/auth.ts`.
-
-## WASM / Rust Setup
-
-The `wasm/indexd_wasm/` directory contains pre-built WASM artifacts. The `rust/sia-sdk-rs/` directory is cloned automatically on `bun install` from [alexfreska/sia-sdk-rs](https://github.com/alexfreska/sia-sdk-rs) (branch `alex/wasm-experimental`). To rebuild:
-
-```bash
-cd rust/sia-sdk-rs
-cargo install wasm-pack
-wasm-pack build indexd_wasm --target web --out-dir pkg
-```
-
-Then copy the output to `wasm/indexd_wasm/`.
-
 ## Common Commands
 
 ```bash

package/template/README.md

@@ -23,7 +23,7 @@ Open [http://localhost:5173](http://localhost:5173) in your browser.
 
 - **Full auth flow** — connect to an indexer, approve the connection, set up a recovery phrase
 - **File upload** — drag & drop files, track upload progress, list uploaded files
-- **WASM SDK** — Rust-compiled SDK handles encryption, erasure coding, and direct host transfers in the browser
+- **Sia SDK** — handles encryption, erasure coding, and direct host transfers in the browser
 - **Developer notes** — amber callout boxes throughout the UI explaining how everything works (remove them when you ship)
 
 ## How It Works
@@ -52,7 +52,7 @@ Indexer service
 
 ### Upload Flow
 
-Files are encrypted in the browser, erasure coded into shards, and uploaded directly to Sia hosts. The SDK handles all of this — your code just calls `sdk.upload(data)`. Metadata (filename, type, size) is also encrypted and pinned to the indexer.
+Files are encrypted in the browser, erasure coded into shards, and uploaded directly to Sia hosts. The SDK handles all of this — your code just calls `client.upload(file, onProgress)`. Metadata (filename, type, size) is also encrypted and pinned to the indexer.
 
 ## Customization
 
@@ -65,13 +65,9 @@ Edit `src/lib/constants.ts` to set your app key, name, description, and indexer
 The main post-auth component is `src/components/upload/UploadZone.tsx`. Replace it with your own UI — the SDK is available via:
 
 ```tsx
-const sdk = useAuthStore((s) => s.sdk)
+const client = useAuthStore((s) => s.client)
 ```
 
-### Performance Presets
-
-Edit `src/stores/auth.ts` to change the `PRESETS` object for concurrent operation limits.
-
 ## Tech Stack
 
 - [React](https://react.dev) 19
@@ -80,23 +76,21 @@ Edit `src/stores/auth.ts` to change the `PRESETS` object for concurrent operatio
 - [Tailwind CSS](https://tailwindcss.com) 4
 - [Zustand](https://zustand.docs.pmnd.rs) (state management)
 - [Biome](https://biomejs.dev) (linting & formatting)
-- [indexd_wasm](https://github.com/SiaFoundation/sia-sdk-rs) (Sia SDK, compiled from Rust to WASM)
+- [@siafoundation/sia](https://www.npmjs.com/package/@siafoundation/sia) (Sia SDK — encryption, erasure coding, host transfers)
 
 ## Project Structure
 
 ```
 src/
-├── lib/            # SDK wrapper, constants, utilities
+├── lib/            # Constants, utilities
 ├── stores/         # Zustand auth store
 └── components/
     ├── auth/       # Auth flow screens
     ├── upload/     # Upload dropzone
     └── DevNote.tsx # Developer callout (remove in production)
-wasm/               # Pre-built WASM binary
-rust/               # Rust SDK source (cloned on install)
 ```
 
 ## Learn More
 
 - [Sia Documentation](https://docs.sia.tech)
-- [Sia SDK (Rust)](https://github.com/SiaFoundation/sia-sdk-rs)
+- [@siafoundation/sia](https://www.npmjs.com/package/@siafoundation/sia)

package/template/_gitignore

@@ -2,4 +2,3 @@ node_modules
 dist
 *.local
 .DS_Store
-rust/sia-sdk-rs/

package/template/dist/assets/index-BEylY2j7.css

@@ -0,0 +1 @@
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-y-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-200:oklch(88.5% .062 18.334);--color-red-300:oklch(80.8% .114 19.571);--color-red-400:oklch(70.4% .191 22.216);--color-red-500:oklch(63.7% .237 25.331);--color-red-700:oklch(50.5% .213 27.518);--color-red-900:oklch(39.6% .141 25.723);--color-red-950:oklch(25.8% .092 26.042);--color-amber-200:oklch(92.4% .12 95.746);--color-amber-300:oklch(87.9% .169 91.605);--color-amber-400:oklch(82.8% .189 84.429);--color-amber-500:oklch(76.9% .188 70.08);--color-amber-950:oklch(27.9% .077 45.635);--color-green-400:oklch(79.2% .209 151.711);--color-green-500:oklch(72.3% .219 149.579);--color-green-600:oklch(62.7% .194 149.214);--color-green-700:oklch(52.7% .154 150.069);--color-neutral-200:oklch(92.2% 0 0);--color-neutral-300:oklch(87% 0 0);--color-neutral-400:oklch(70.8% 0 0);--color-neutral-500:oklch(55.6% 0 0);--color-neutral-600:oklch(43.9% 0 0);--color-neutral-700:oklch(37.1% 0 0);--color-neutral-800:oklch(26.9% 0 0);--color-neutral-900:oklch(20.5% 0 0);--color-neutral-950:oklch(14.5% 0 0);--color-white:#fff;--spacing:.25rem;--container-xs:20rem;--container-md:28rem;--container-5xl:64rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--font-weight-medium:500;--font-weight-semibold:600;--tracking-tight:-.025em;--tracking-wider:.05em;--leading-relaxed:1.625;--radius-lg:.5rem;--radius-xl:.75rem;--animate-spin:spin 1s linear infinite;--animate-ping:ping 1s cubic-bezier(0,0,.2,1)infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.top-4{top:calc(var(--spacing)*4)}.bottom-6{bottom:calc(var(--spacing)*6)}.left-1\/2{left:50%}.z-50{z-index:50}.mx-auto{margin-inline:auto}.mt-0\.5{margin-top:calc(var(--spacing)*.5)}.mt-1{margin-top:calc(var(--spacing)*1)}.mr-1{margin-right:calc(var(--spacing)*1)}.mr-4{margin-right:calc(var(--spacing)*4)}.ml-1{margin-left:calc(var(--spacing)*1)}.ml-2{margin-left:calc(var(--spacing)*2)}.ml-4{margin-left:calc(var(--spacing)*4)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-1\.5{height:calc(var(--spacing)*1.5)}.h-2{height:calc(var(--spacing)*2)}.h-3\.5{height:calc(var(--spacing)*3.5)}.h-4{height:calc(var(--spacing)*4)}.h-8{height:calc(var(--spacing)*8)}.h-full{height:100%}.min-h-screen{min-height:100vh}.w-1\.5{width:calc(var(--spacing)*1.5)}.w-1\/4{width:25%}.w-2{width:calc(var(--spacing)*2)}.w-3\.5{width:calc(var(--spacing)*3.5)}.w-4{width:calc(var(--spacing)*4)}.w-8{width:calc(var(--spacing)*8)}.w-full{width:100%}.max-w-5xl{max-width:var(--container-5xl)}.max-w-md{max-width:var(--container-md)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing)*0)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}.animate-ping{animation:var(--animate-ping)}.animate-spin{animation:var(--animate-spin)}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*3)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*5)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-neutral-800\/60>:not(:last-child)){border-color:#26262699}@supports (color:color-mix(in lab,red,red)){:where(.divide-neutral-800\/60>:not(:last-child)){border-color:color-mix(in oklab,var(--color-neutral-800)60%,transparent)}}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-r-lg{border-top-right-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-amber-500{border-color:var(--color-amber-500)}.border-green-500{border-color:var(--color-green-500)}.border-neutral-400{border-color:var(--color-neutral-400)}.border-neutral-600{border-color:var(--color-neutral-600)}.border-neutral-700{border-color:var(--color-neutral-700)}.border-neutral-800{border-color:var(--color-neutral-800)}.border-neutral-800\/60{border-color:#26262699}@supports (color:color-mix(in lab,red,red)){.border-neutral-800\/60{border-color:color-mix(in oklab,var(--color-neutral-800)60%,transparent)}}.border-red-700{border-color:var(--color-red-700)}.border-red-900{border-color:var(--color-red-900)}.border-t-green-500{border-top-color:var(--color-green-500)}.border-t-white{border-top-color:var(--color-white)}.bg-amber-950\/50{background-color:#46190180}@supports (color:color-mix(in lab,red,red)){.bg-amber-950\/50{background-color:color-mix(in oklab,var(--color-amber-950)50%,transparent)}}.bg-green-400{background-color:var(--color-green-400)}.bg-green-500{background-color:var(--color-green-500)}.bg-green-500\/5{background-color:#00c7580d}@supports (color:color-mix(in lab,red,red)){.bg-green-500\/5{background-color:color-mix(in oklab,var(--color-green-500)5%,transparent)}}.bg-green-600{background-color:var(--color-green-600)}.bg-neutral-800{background-color:var(--color-neutral-800)}.bg-neutral-900{background-color:var(--color-neutral-900)}.bg-neutral-950{background-color:var(--color-neutral-950)}.bg-red-900\/90{background-color:#82181ae6}@supports (color:color-mix(in lab,red,red)){.bg-red-900\/90{background-color:color-mix(in oklab,var(--color-red-900)90%,transparent)}}.bg-red-950\/80{background-color:#460809cc}@supports (color:color-mix(in lab,red,red)){.bg-red-950\/80{background-color:color-mix(in oklab,var(--color-red-950)80%,transparent)}}.p-1{padding:calc(var(--spacing)*1)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.p-16{padding:calc(var(--spacing)*16)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-2{padding-block:calc(var(--spacing)*2)}.py-2\.5{padding-block:calc(var(--spacing)*2.5)}.py-3{padding-block:calc(var(--spacing)*3)}.text-center{text-align:center}.font-mono{font-family:var(--font-mono)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[11px\]{font-size:11px}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-amber-200{color:var(--color-amber-200)}.text-amber-200\/80{color:#fee685cc}@supports (color:color-mix(in lab,red,red)){.text-amber-200\/80{color:color-mix(in oklab,var(--color-amber-200)80%,transparent)}}.text-amber-300{color:var(--color-amber-300)}.text-amber-400{color:var(--color-amber-400)}.text-green-400{color:var(--color-green-400)}.text-neutral-200{color:var(--color-neutral-200)}.text-neutral-300{color:var(--color-neutral-300)}.text-neutral-400{color:var(--color-neutral-400)}.text-neutral-500{color:var(--color-neutral-500)}.text-neutral-600{color:var(--color-neutral-600)}.text-neutral-700{color:var(--color-neutral-700)}.text-red-200{color:var(--color-red-200)}.text-red-300{color:var(--color-red-300)}.text-red-400{color:var(--color-red-400)}.text-red-500{color:var(--color-red-500)}.text-white{color:var(--color-white)}.uppercase{text-transform:uppercase}.placeholder-neutral-500::placeholder{color:var(--color-neutral-500)}.opacity-75{opacity:.75}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-300{--tw-duration:.3s;transition-duration:.3s}@media(hover:hover){.group-hover\:text-neutral-500:is(:where(.group):hover *){color:var(--color-neutral-500)}.hover\:border-neutral-600:hover{border-color:var(--color-neutral-600)}.hover\:bg-green-700:hover{background-color:var(--color-green-700)}.hover\:bg-neutral-700:hover{background-color:var(--color-neutral-700)}.hover\:text-neutral-300:hover{color:var(--color-neutral-300)}.hover\:text-red-300:hover{color:var(--color-red-300)}}.focus\:border-green-500:focus{border-color:var(--color-green-500)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.disabled\:cursor-default:disabled{cursor:default}.disabled\:bg-neutral-700:disabled{background-color:var(--color-neutral-700)}.disabled\:text-neutral-500:disabled{color:var(--color-neutral-500)}.disabled\:opacity-30:disabled{opacity:.3}}body{color:#e5e5e5;background-color:#0a0a0a;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}@keyframes fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes indeterminate{0%{transform:translate(-100%)}to{transform:translate(400%)}}.animate-fade-in{animation:.2s ease-out fade-in}.animate-indeterminate{animation:1.5s ease-in-out infinite indeterminate}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}