create-sia-app 0.1.14 → 0.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-sia-app",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "type": "module",
   "bin": {
     "create-sia-app": "./dist/index.js"

package/template/CLAUDE.md

@@ -2,9 +2,9 @@
 
 ## Overview
 
-A starter template for building decentralized storage apps on the Sia network. Uses [`sia-storage`](https://www.npmjs.com/package/sia-storage) — a TypeScript SDK that ships a pre-compiled WASM binary for encryption, uploads, downloads, and key management. WASM runs on the main thread (Rust async — no workers required).
+A starter template for building decentralized storage apps on the Sia network. Uses [`@siafoundation/sia-storage`](https://www.npmjs.com/package/@siafoundation/sia-storage) — a TypeScript SDK that ships a pre-compiled WASM binary for encryption, uploads, downloads, and key management. WASM runs on the main thread (Rust async — no workers required).
 
-**Tech stack:** React 19, TypeScript, Vite, Tailwind CSS 4, Zustand, `sia-storage`
+**Tech stack:** React 19, TypeScript, Vite, Tailwind CSS 4, Zustand, `@siafoundation/sia-storage`
 
 ## Architecture
 
@@ -28,7 +28,7 @@ Returning users skip `requestConnection`/`waitForApproval`/`register` entirely.
 
 ### SDK
 
-`sia-storage` handles:
+`@siafoundation/sia-storage` handles:
 - Encrypted file uploads/downloads (erasure coding + encryption)
 - Key derivation from recovery phrases (BIP-39)
 - Object pinning and metadata management
@@ -62,7 +62,7 @@ Auth state persists to localStorage via Zustand's `persist` middleware. The stor
 ### Upload a file
 
 ```ts
-import { PinnedObject } from 'sia-storage'
+import { PinnedObject } from '@siafoundation/sia-storage'
 
 const object = new PinnedObject()
 const pinnedObject = await sdk.upload(object, file.stream(), {

package/template/README.md

@@ -76,7 +76,7 @@ const sdk = useAuthStore((s) => s.sdk)
 - [Tailwind CSS](https://tailwindcss.com) 4
 - [Zustand](https://zustand.docs.pmnd.rs) (state management)
 - [Biome](https://biomejs.dev) (linting & formatting)
-- [sia-storage](https://www.npmjs.com/package/sia-storage) (Sia SDK — encryption, erasure coding, direct host transfers via WASM)
+- [@siafoundation/sia-storage](https://www.npmjs.com/package/@siafoundation/sia-storage) (Sia SDK — encryption, erasure coding, direct host transfers via WASM)
 
 ## Project Structure
 
@@ -94,4 +94,4 @@ src/
 ## Learn More
 
 - [Sia Documentation](https://docs.sia.tech)
-- [sia-storage](https://www.npmjs.com/package/sia-storage)
+- [@siafoundation/sia-storage](https://www.npmjs.com/package/@siafoundation/sia-storage)

package/template/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "sia-storage": "^0.0.8",
+    "@siafoundation/sia-storage": "^0.0.8",
     "zustand": "^5.0.11"
   },
   "devDependencies": {

package/template/src/components/CopyButton.tsx

@@ -16,7 +16,7 @@ export function CopyButton({
         navigator.clipboard.writeText(value)
         addToast(label)
       }}
-      className="p-1 text-neutral-500 hover:text-neutral-300 transition-colors"
+      className="p-1 text-neutral-400 hover:text-neutral-700 transition-colors"
       title="Copy"
     >
       <svg

package/template/src/components/DevNote.tsx

@@ -8,12 +8,12 @@ export function DevNote({
   children: ReactNode
 }) {
   return (
-    <div className="border-l-4 border-amber-500 bg-amber-950/50 rounded-r-lg p-4 space-y-1">
-      <p className="text-amber-400 text-xs font-semibold uppercase tracking-wider">
+    <div className="border-l-4 border-amber-500 bg-amber-50 rounded-r-lg p-4 space-y-1">
+      <p className="text-amber-700 text-xs font-semibold uppercase tracking-wider">
         Developer Note
       </p>
-      <p className="text-amber-200 text-sm font-medium">{title}</p>
-      <div className="text-amber-200/80 text-xs leading-relaxed">
+      <p className="text-amber-900 text-sm font-medium">{title}</p>
+      <div className="text-amber-900/80 text-xs leading-relaxed">
         {children}
       </div>
     </div>

package/template/src/components/Navbar.tsx

@@ -23,16 +23,16 @@ export function Navbar() {
   }
 
   return (
-    <header className="border-b border-neutral-800/60">
+    <header className="border-b border-neutral-200/80">
       <div className="flex items-center justify-between px-6 py-3 max-w-5xl mx-auto">
-        <h1 className="text-sm font-semibold text-white tracking-tight">
+        <h1 className="text-sm font-semibold text-neutral-900 tracking-tight">
           {APP_NAME}
         </h1>
         {isConnected && publicKey && (
           <div className="flex items-center gap-3">
             <span className="relative flex h-2 w-2">
-              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
-              <span className="relative inline-flex rounded-full h-2 w-2 bg-green-500" />
+              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75" />
+              <span className="relative inline-flex rounded-full h-2 w-2 bg-green-600" />
             </span>
             <span
               className="text-[11px] font-mono text-neutral-500"
@@ -44,7 +44,7 @@ export function Navbar() {
             <button
               type="button"
               onClick={handleSignOut}
-              className="text-xs text-neutral-500 hover:text-neutral-300 transition-colors ml-1"
+              className="text-xs text-neutral-500 hover:text-neutral-900 transition-colors ml-1"
             >
               Sign Out
             </button>

package/template/src/components/Toast.tsx

@@ -10,7 +10,7 @@ export function Toasts() {
       {toasts.map((toast) => (
         <div
           key={toast.id}
-          className="animate-fade-in px-4 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-200 shadow-lg"
+          className="animate-fade-in px-4 py-2 bg-white border border-neutral-200 rounded-lg text-sm text-neutral-700 shadow-lg"
         >
           {toast.message}
         </div>

package/template/src/components/auth/ApproveScreen.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
-import type { Builder } from 'sia-storage'
+import type { Builder } from '@siafoundation/sia-storage'
 import { useAuthStore } from '../../stores/auth'
 import { CopyButton } from '../CopyButton'
 import { DevNote } from '../DevNote'
@@ -63,10 +63,10 @@ export function ApproveScreen({
     <div className="flex flex-col items-center justify-center flex-1 px-4">
       <div className="w-full max-w-md space-y-6">
         <div className="text-center space-y-2">
-          <h1 className="text-2xl font-semibold text-white">
+          <h1 className="text-2xl font-semibold text-neutral-900">
             Approve Connection
           </h1>
-          <p className="text-neutral-400 text-sm">
+          <p className="text-neutral-600 text-sm">
             Open the link below to approve this app, then return here.
           </p>
         </div>
@@ -76,15 +76,15 @@ export function ApproveScreen({
             The user must visit the approval URL in another tab (or on the
             indexer&apos;s dashboard) to authorize your app. This is an
             out-of-band step — your app polls for approval via{' '}
-            <code className="text-amber-300">builder.waitForApproval()</code>.
+            <code className="text-amber-700">builder.waitForApproval()</code>.
             Once approved, the flow continues to recovery phrase setup.
           </p>
         </DevNote>
 
         {approvalUrl && (
           <div className="space-y-3">
-            <div className="flex items-center gap-2 p-3 bg-neutral-900 border border-neutral-700 rounded-lg">
-              <span className="flex-1 text-sm font-mono text-neutral-400 truncate">
+            <div className="flex items-center gap-2 p-3 bg-white border border-neutral-300 rounded-lg">
+              <span className="flex-1 text-sm font-mono text-neutral-600 truncate">
                 {approvalUrl}
               </span>
               <CopyButton value={approvalUrl} label="URL copied" />
@@ -104,11 +104,11 @@ export function ApproveScreen({
           type="button"
           onClick={handleManualCheck}
           disabled={manualChecking}
-          className="w-full py-3 bg-neutral-800 hover:bg-neutral-700 disabled:bg-neutral-700 disabled:text-neutral-500 text-white font-medium rounded-lg transition-colors"
+          className="w-full py-3 bg-neutral-100 hover:bg-neutral-200 disabled:bg-neutral-200 disabled:text-neutral-400 text-neutral-900 font-medium rounded-lg transition-colors"
         >
           {manualChecking ? (
             <span className="flex items-center justify-center gap-2">
-              <span className="w-4 h-4 border-2 border-neutral-400 border-t-white rounded-full animate-spin" />
+              <span className="w-4 h-4 border-2 border-neutral-300 border-t-neutral-900 rounded-full animate-spin" />
               Checking...
             </span>
           ) : (
@@ -116,12 +116,12 @@ export function ApproveScreen({
           )}
         </button>
 
-        <div className="flex items-center justify-center gap-2 text-xs text-neutral-600">
+        <div className="flex items-center justify-center gap-2 text-xs text-neutral-500">
           {polling ? (
             <>
               <span className="relative flex h-1.5 w-1.5">
-                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
-                <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-green-500" />
+                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75" />
+                <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-green-600" />
               </span>
               Polling for approval...
             </>

package/template/src/components/auth/AuthFlow.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react'
-import { AppKey, Builder, initSia } from 'sia-storage'
+import { AppKey, Builder, initSia } from '@siafoundation/sia-storage'
 import { APP_META } from '../../lib/constants'
 import { useAuthStore } from '../../stores/auth'
 import { ApproveScreen } from './ApproveScreen'
@@ -54,12 +54,12 @@ export function AuthFlow() {
   return (
     <div className="flex-1 flex flex-col">
       {error && (
-        <div className="fixed top-4 left-1/2 -translate-x-1/2 z-50 px-4 py-2 bg-red-900/90 border border-red-700 rounded-lg text-red-200 text-sm max-w-md text-center">
+        <div className="fixed top-4 left-1/2 -translate-x-1/2 z-50 px-4 py-2 bg-red-50 border border-red-200 rounded-lg text-red-800 text-sm max-w-md text-center shadow-sm">
           {error}
           <button
             type="button"
             onClick={() => setError(null)}
-            className="ml-2 text-red-400 hover:text-red-300"
+            className="ml-2 text-red-600 hover:text-red-900"
           >
             Dismiss
           </button>

package/template/src/components/auth/ConnectScreen.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Builder } from 'sia-storage'
+import { Builder } from '@siafoundation/sia-storage'
 import { APP_META, DEFAULT_INDEXER_URL } from '../../lib/constants'
 import { useAuthStore } from '../../stores/auth'
 import { DevNote } from '../DevNote'
@@ -45,10 +45,10 @@ export function ConnectScreen({
     <div className="flex flex-col items-center justify-center flex-1 px-4">
       <div className="w-full max-w-md space-y-6">
         <div className="text-center space-y-2">
-          <h1 className="text-2xl font-semibold text-white">
+          <h1 className="text-2xl font-semibold text-neutral-900">
             Connect to Indexer
           </h1>
-          <p className="text-neutral-400 text-sm">
+          <p className="text-neutral-600 text-sm">
             Enter your Sia indexer URL to get started
           </p>
         </div>
@@ -56,9 +56,9 @@ export function ConnectScreen({
         <DevNote title="Indexer URL & App Key">
           <p>
             The indexer URL points to your Sia storage provider. The default is{' '}
-            <code className="text-amber-300">https://sia.storage</code>. Your
+            <code className="text-amber-700">https://sia.storage</code>. Your
             app key (set in{' '}
-            <code className="text-amber-300">src/lib/constants.ts</code>)
+            <code className="text-amber-700">src/lib/constants.ts</code>)
             uniquely identifies your app to the indexer.
           </p>
           <p className="mt-1">
@@ -73,14 +73,14 @@ export function ConnectScreen({
             value={url}
             onChange={(e) => setUrl(e.target.value)}
             placeholder="https://sia.storage"
-            className="w-full px-4 py-3 bg-neutral-900 border border-neutral-700 rounded-lg text-white placeholder-neutral-500 focus:outline-none focus:border-green-500"
+            className="w-full px-4 py-3 bg-white border border-neutral-300 rounded-lg text-neutral-900 placeholder-neutral-400 focus:outline-none focus:border-green-600"
           />
 
           <button
             type="button"
             onClick={handleConnect}
             disabled={loading || !url}
-            className="w-full py-3 bg-green-600 hover:bg-green-700 disabled:bg-neutral-700 disabled:text-neutral-500 text-white font-medium rounded-lg transition-colors"
+            className="w-full py-3 bg-green-600 hover:bg-green-700 disabled:bg-neutral-200 disabled:text-neutral-400 text-white font-medium rounded-lg transition-colors"
           >
             {loading ? 'Connecting...' : 'Connect'}
           </button>

package/template/src/components/auth/LoadingScreen.tsx

@@ -1,8 +1,8 @@
 export function LoadingScreen({ message }: { message?: string }) {
   return (
     <div className="flex flex-col items-center justify-center flex-1 gap-4">
-      <div className="w-8 h-8 border-2 border-neutral-600 border-t-green-500 rounded-full animate-spin" />
-      <p className="text-neutral-400 text-sm">{message || 'Initializing...'}</p>
+      <div className="w-8 h-8 border-2 border-neutral-300 border-t-green-600 rounded-full animate-spin" />
+      <p className="text-neutral-500 text-sm">{message || 'Initializing...'}</p>
     </div>
   )
 }

package/template/src/components/auth/RecoveryScreen.tsx

@@ -3,7 +3,7 @@ import {
   type Builder,
   generateRecoveryPhrase,
   validateRecoveryPhrase,
-} from 'sia-storage'
+} from '@siafoundation/sia-storage'
 import { useAuthStore } from '../../stores/auth'
 import { CopyButton } from '../CopyButton'
 import { DevNote } from '../DevNote'
@@ -71,10 +71,10 @@ export function RecoveryScreen({
       <div className="flex flex-col items-center justify-center flex-1 px-4">
         <div className="w-full max-w-md space-y-6">
           <div className="text-center space-y-2">
-            <h1 className="text-2xl font-semibold text-white">
+            <h1 className="text-2xl font-semibold text-neutral-900">
               Recovery Phrase
             </h1>
-            <p className="text-neutral-400 text-sm">
+            <p className="text-neutral-600 text-sm">
               Generate a new recovery phrase or enter an existing one.
             </p>
           </div>
@@ -100,7 +100,7 @@ export function RecoveryScreen({
             <button
               type="button"
               onClick={() => setMode('import')}
-              className="w-full py-3 bg-neutral-800 hover:bg-neutral-700 text-white font-medium rounded-lg transition-colors"
+              className="w-full py-3 bg-neutral-100 hover:bg-neutral-200 text-neutral-900 font-medium rounded-lg transition-colors"
             >
               Enter Existing Phrase
             </button>
@@ -114,12 +114,12 @@ export function RecoveryScreen({
     <div className="flex flex-col items-center justify-center flex-1 px-4">
       <div className="w-full max-w-md space-y-6">
         <div className="text-center space-y-2">
-          <h1 className="text-2xl font-semibold text-white">
+          <h1 className="text-2xl font-semibold text-neutral-900">
             {mode === 'generate'
               ? 'Save Your Recovery Phrase'
               : 'Enter Recovery Phrase'}
           </h1>
-          <p className="text-neutral-400 text-sm">
+          <p className="text-neutral-600 text-sm">
             {mode === 'generate'
               ? 'Write down these 12 words in order. You will need them to recover your account.'
               : 'Enter your 12-word recovery phrase.'}
@@ -128,14 +128,14 @@ export function RecoveryScreen({
 
         {mode === 'generate' ? (
           <div className="space-y-2">
-            <div className="grid grid-cols-3 gap-2 p-4 bg-neutral-900 rounded-lg border border-neutral-700">
+            <div className="grid grid-cols-3 gap-2 p-4 bg-white rounded-lg border border-neutral-300">
               {generatedPhrase.split(' ').map((word, i) => (
                 <div
                   key={`${word}-${i}`}
-                  className="text-center py-2 bg-neutral-800 rounded text-sm"
+                  className="text-center py-2 bg-neutral-100 rounded text-sm"
                 >
-                  <span className="text-neutral-500 mr-1">{i + 1}.</span>
-                  <span className="text-white">{word}</span>
+                  <span className="text-neutral-400 mr-1">{i + 1}.</span>
+                  <span className="text-neutral-900">{word}</span>
                 </div>
               ))}
             </div>
@@ -153,10 +153,10 @@ export function RecoveryScreen({
               onChange={(e) => handleValidatePhrase(e.target.value)}
               placeholder="Enter your 12-word recovery phrase..."
               rows={3}
-              className="w-full px-4 py-3 bg-neutral-900 border border-neutral-700 rounded-lg text-white placeholder-neutral-500 focus:outline-none focus:border-green-500"
+              className="w-full px-4 py-3 bg-white border border-neutral-300 rounded-lg text-neutral-900 placeholder-neutral-400 focus:outline-none focus:border-green-600"
             />
             {phraseError && (
-              <p className="text-red-400 text-sm">{phraseError}</p>
+              <p className="text-red-600 text-sm">{phraseError}</p>
             )}
           </div>
         )}
@@ -165,7 +165,7 @@ export function RecoveryScreen({
           type="button"
           onClick={handleRegister}
           disabled={loading || !phrase.trim()}
-          className="w-full py-3 bg-green-600 hover:bg-green-700 disabled:bg-neutral-700 disabled:text-neutral-500 text-white font-medium rounded-lg transition-colors"
+          className="w-full py-3 bg-green-600 hover:bg-green-700 disabled:bg-neutral-200 disabled:text-neutral-400 text-white font-medium rounded-lg transition-colors"
         >
           {loading ? 'Registering...' : 'Complete Setup'}
         </button>
@@ -178,7 +178,7 @@ export function RecoveryScreen({
             setGeneratedPhrase('')
             setPhraseError(null)
           }}
-          className="w-full py-2 text-neutral-400 hover:text-neutral-300 text-sm transition-colors"
+          className="w-full py-2 text-neutral-500 hover:text-neutral-900 text-sm transition-colors"
         >
           Back
         </button>

package/template/src/components/upload/UploadZone.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { encodedSize, PinnedObject, type ShardProgress } from 'sia-storage'
+import { encodedSize, PinnedObject, type ShardProgress } from '@siafoundation/sia-storage'
 import { APP_KEY, DATA_SHARDS, PARITY_SHARDS } from '../../lib/constants'
 import { useAuthStore } from '../../stores/auth'
 import { DevNote } from '../DevNote'
@@ -233,34 +233,34 @@ export function UploadZone() {
         <DevNote title="Replace Your App Key">
           <p>
             You&apos;re using the template placeholder. Set your own key in{' '}
-            <code className="text-amber-300">src/lib/constants.ts</code> or
+            <code className="text-amber-700">src/lib/constants.ts</code> or
             scaffold a fresh project with{' '}
-            <code className="text-amber-300">bunx create-sia-app</code>.
+            <code className="text-amber-700">bunx create-sia-app</code>.
           </p>
         </DevNote>
       )}
 
       <DevNote title="Upload & Download">
         <p>
-          <code className="text-amber-300">
+          <code className="text-amber-700">
             sdk.upload(object, file.stream(), opts)
           </code>{' '}
           encrypts, erasure-codes, and streams shards directly to Sia hosts.{' '}
-          <code className="text-amber-300">sdk.download(object, opts)</code>{' '}
-          returns a <code className="text-amber-300">ReadableStream</code> of
+          <code className="text-amber-700">sdk.download(object, opts)</code>{' '}
+          returns a <code className="text-amber-700">ReadableStream</code> of
           decrypted bytes. Per-shard progress is reported via{' '}
-          <code className="text-amber-300">onShardUploaded</code> /{' '}
-          <code className="text-amber-300">onShardDownloaded</code>.
+          <code className="text-amber-700">onShardUploaded</code> /{' '}
+          <code className="text-amber-700">onShardDownloaded</code>.
         </p>
       </DevNote>
 
       {error && (
-        <div className="flex items-center justify-between px-4 py-2.5 bg-red-950/80 border border-red-900 rounded-lg text-red-300 text-sm">
+        <div className="flex items-center justify-between px-4 py-2.5 bg-red-50 border border-red-200 rounded-lg text-red-800 text-sm">
           <span>{error}</span>
           <button
             type="button"
             onClick={() => setError(null)}
-            className="text-red-500 hover:text-red-300 text-xs ml-4 shrink-0"
+            className="text-red-600 hover:text-red-900 text-xs ml-4 shrink-0"
           >
             Dismiss
           </button>
@@ -280,10 +280,10 @@ export function UploadZone() {
         }}
         className={`relative block border-2 border-dashed rounded-xl p-16 text-center transition-all duration-150 ${
           uploading
-            ? 'border-neutral-800 cursor-default'
+            ? 'border-neutral-300 cursor-default'
             : dragOver
-              ? 'border-green-500 bg-green-500/5 cursor-pointer'
-              : 'border-neutral-800 hover:border-neutral-600 cursor-pointer'
+              ? 'border-green-600 bg-green-600/5 cursor-pointer'
+              : 'border-neutral-300 hover:border-neutral-400 cursor-pointer'
         }`}
       >
         <input
@@ -300,24 +300,24 @@ export function UploadZone() {
 
         {activeUpload ? (
           <div className="space-y-4">
-            <p className="text-neutral-300 text-sm">
+            <p className="text-neutral-700 text-sm">
               Uploading{' '}
-              <span className="text-white">{activeUpload.fileName}</span>{' '}
+              <span className="text-neutral-900">{activeUpload.fileName}</span>{' '}
               <span className="text-neutral-500">
                 ({formatBytes(activeUpload.fileSize)})
               </span>
             </p>
-            <div className="w-full max-w-xs mx-auto bg-neutral-800 rounded-full h-1.5 overflow-hidden">
+            <div className="w-full max-w-xs mx-auto bg-neutral-200 rounded-full h-1.5 overflow-hidden">
               {activeUpload.shardsDone === 0 ? (
-                <div className="bg-green-500 h-full rounded-full w-1/4 animate-indeterminate" />
+                <div className="bg-green-600 h-full rounded-full w-1/4 animate-indeterminate" />
               ) : (
                 <div
-                  className="bg-green-500 h-full rounded-full transition-all duration-300"
+                  className="bg-green-600 h-full rounded-full transition-all duration-300"
                   style={{ width: `${uploadPercent}%` }}
                 />
               )}
             </div>
-            <p className="text-neutral-600 text-xs font-mono">
+            <p className="text-neutral-500 text-xs font-mono">
               {activeUpload.shardsDone} shards &middot;{' '}
               {formatBytes(
                 (activeUpload.bytesUploaded / activeUpload.encodedTotal) *
@@ -329,7 +329,7 @@ export function UploadZone() {
         ) : (
           <div className="space-y-2">
             <svg
-              className="w-8 h-8 mx-auto text-neutral-700"
+              className="w-8 h-8 mx-auto text-neutral-400"
               viewBox="0 0 24 24"
               fill="none"
               stroke="currentColor"
@@ -339,10 +339,10 @@ export function UploadZone() {
               <path d="M12 16V4m0 0l-4 4m4-4l4 4" />
               <path d="M20 16v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2" />
             </svg>
-            <p className="text-neutral-400 text-sm">
+            <p className="text-neutral-600 text-sm">
               Drop files here or click to browse
             </p>
-            <p className="text-neutral-600 text-xs">
+            <p className="text-neutral-500 text-xs">
               Encrypted end-to-end and stored on the Sia network
             </p>
           </div>
@@ -355,7 +355,7 @@ export function UploadZone() {
           <h2 className="text-xs font-medium text-neutral-500 uppercase tracking-wider">
             {files.length} file{files.length !== 1 ? 's' : ''}
           </h2>
-          <div className="divide-y divide-neutral-800/60">
+          <div className="divide-y divide-neutral-200/80">
             {files.map((file) => {
               const isDownloading = downloading === file.id
               return (
@@ -364,10 +364,10 @@ export function UploadZone() {
                   className="flex items-center justify-between py-3 group"
                 >
                   <div className="flex-1 min-w-0 mr-4">
-                    <p className="text-sm text-neutral-200 truncate">
+                    <p className="text-sm text-neutral-900 truncate">
                       {file.metadata.name}
                     </p>
-                    <p className="text-xs text-neutral-600 mt-0.5">
+                    <p className="text-xs text-neutral-500 mt-0.5">
                       {formatBytes(file.metadata.size)}
                       {file.metadata.type !== 'application/octet-stream' && (
                         <span> &middot; {file.metadata.type}</span>
@@ -388,7 +388,7 @@ export function UploadZone() {
                       type="button"
                       onClick={() => downloadFile(file)}
                       disabled={downloading !== null}
-                      className="text-xs text-neutral-600 hover:text-neutral-300 disabled:opacity-30 disabled:cursor-default transition-colors"
+                      className="text-xs text-neutral-500 hover:text-neutral-900 disabled:opacity-30 disabled:cursor-default transition-colors"
                       title="Download"
                     >
                       {isDownloading ? (
@@ -418,7 +418,7 @@ export function UploadZone() {
                       )}
                     </button>
                     <span
-                      className="text-[11px] text-neutral-700 font-mono group-hover:text-neutral-500 transition-colors"
+                      className="text-[11px] text-neutral-400 font-mono group-hover:text-neutral-700 transition-colors"
                       title={file.metadata.hash}
                     >
                       {file.metadata.hash.slice(0, 8)}...

package/template/src/index.css

@@ -2,8 +2,8 @@
 
 body {
   margin: 0;
-  background-color: #0a0a0a;
-  color: #e5e5e5;
+  background-color: #fafafa;
+  color: #171717;
   font-family:
     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 }

package/template/src/lib/constants.ts

@@ -1,6 +1,6 @@
-import type { AppMetadata } from 'sia-storage'
+import type { AppMetadata } from '@siafoundation/sia-storage'
 
-// biome-ignore format: scaffolder substitutes a 64-char hex string here
+// biome-ignore format: long hex literal
 export const APP_KEY = '{{APP_KEY}}'
 export const APP_NAME = '{{APP_NAME}}'
 export const DEFAULT_INDEXER_URL = '{{INDEXER_URL}}'

package/template/src/stores/auth.ts

@@ -1,6 +1,7 @@
-import type { Sdk } from 'sia-storage'
+import type { Sdk } from '@siafoundation/sia-storage'
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
+import { APP_KEY } from '../lib/constants'
 
 export type AuthStep =
   | 'loading'
@@ -50,7 +51,7 @@ export const useAuthStore = create<AuthState>()(
         }),
     }),
     {
-      name: '{{APP_NAME}}-auth',
+      name: `sia-auth-${APP_KEY.slice(0, 16)}`,
       partialize: (state) => ({
         storedKeyHex: state.storedKeyHex,
         indexerUrl: state.indexerUrl,

package/template/vite.config.ts

@@ -6,5 +6,5 @@ export default defineConfig({
   plugins: [react(), tailwindcss()],
   // sia-storage loads its WASM via `new URL(..., import.meta.url)`; excluding
   // it from the deps pre-bundler keeps that URL pointing at the real file.
-  optimizeDeps: { exclude: ['sia-storage'] },
+  optimizeDeps: { exclude: ['@siafoundation/sia-storage'] },
 })