@sequenceholdings/artifact-studio 0.1.0

package/templates/react-vite/src/App.tsx

@@ -0,0 +1,54 @@
+import { seq } from '@sequenceholdings/artifact-studio'
+import {
+  Button,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  Badge,
+} from '@sequenceholdings/atlas-ui'
+
+const CARDS = [
+  { label: 'Source model', value: 'Vite React' },
+  { label: 'Runtime', value: 'Atlas iframe' },
+  { label: 'Release mode', value: 'Immutable' },
+]
+
+export default function App() {
+  async function pingAtlas() {
+    const response = await seq.api.get<{ ok?: boolean }>('/api/health')
+    alert(`Atlas responded: ${JSON.stringify(response)}`)
+  }
+
+  return (
+    <main className="min-h-screen bg-background p-10">
+      <p className="text-xs font-extrabold tracking-widest uppercase text-primary mb-2">
+        Artifact Studio
+      </p>
+      <h1 className="text-lg font-bold tracking-tight">Build on Atlas</h1>
+      <p className="text-muted-foreground leading-relaxed max-w-2xl mt-2">
+        This app uses Atlas&apos;s shared UI component library. Import any
+        component from <code className="text-sm font-mono">@sequenceholdings/atlas-ui</code>.
+      </p>
+
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-sm mt-7 max-w-3xl">
+        {CARDS.map((card) => (
+          <Card key={card.label}>
+            <CardHeader>
+              <CardTitle className="text-sm text-muted-foreground">
+                {card.label}
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <Badge variant="secondary">{card.value}</Badge>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      <Button className="mt-6" onClick={pingAtlas}>
+        Test Atlas API bridge
+      </Button>
+    </main>
+  )
+}

package/templates/react-vite/src/lib/api.ts

@@ -0,0 +1,13 @@
+import { seq } from '@sequenceholdings/artifact-studio'
+
+export async function unwrap<T>(p: Promise<unknown>): Promise<T> {
+  const json = await p
+  if (json && typeof json === 'object' && 'success' in json && 'data' in json) {
+    const env = json as { success: boolean; data: T; error?: string }
+    if (!env.success) throw new Error(env.error ?? 'API call failed')
+    return env.data
+  }
+  return json as T
+}
+
+export { seq }

package/templates/react-vite/src/main.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { PortalContainerProvider } from '@sequenceholdings/atlas-ui'
+import App from './App'
+import './styles.css'
+
+const queryClient = new QueryClient()
+
+createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <PortalContainerProvider>
+        <App />
+      </PortalContainerProvider>
+    </QueryClientProvider>
+  </React.StrictMode>,
+)

package/templates/react-vite/src/styles.css

@@ -0,0 +1,3 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "@sequenceholdings/atlas-ui/tokens.css";

package/templates/react-vite/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+})