@craftzbay/create-app 1.0.0 → 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 craftzbay
+
+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.

package/README.md

@@ -43,7 +43,7 @@ npm create @craftzbay/app my-app -- --template vite-dashboard
 
 ## Docs
 
-- Showcase: <https://design.runestonetechnologies.com>
-- Components: <https://design.runestonetechnologies.com/#components>
-- Templates: <https://design.runestonetechnologies.com/#templates>
-- Guides: <https://design.runestonetechnologies.com/#guides>
+- Showcase: <https://components.runestonetechnologies.com>
+- Components: <https://components.runestonetechnologies.com/#components>
+- Templates: <https://components.runestonetechnologies.com/#templates>
+- Guides: <https://components.runestonetechnologies.com/#guides>

package/dist/index.js

@@ -5,22 +5,17 @@ import { existsSync, mkdirSync, readFileSync, readdirSync, statSync, writeFileSy
 import path from "path";
 import { fileURLToPath } from "url";
 import { spawnSync } from "child_process";
-import {
-  cancel,
-  confirm,
-  intro,
-  isCancel,
-  log,
-  outro,
-  select,
-  text
-} from "@clack/prompts";
+import { cancel, confirm, intro, isCancel, log, outro, select, text } from "@clack/prompts";
 import kleur from "kleur";
 var __dirname = path.dirname(fileURLToPath(import.meta.url));
 var TEMPLATES_DIR = path.resolve(__dirname, "../templates");
 var TEMPLATES = [
   { id: "vite-blank", label: "Vite + Blank", hint: "Minimal Vite + React + @craftzbay/ui starter" },
-  { id: "vite-dashboard", label: "Vite + Dashboard", hint: "AppShell + Dashboard template, ready to wire data" }
+  {
+    id: "vite-dashboard",
+    label: "Vite + Dashboard",
+    hint: "Sidebar + TopNav dashboard shell, ready to wire data"
+  }
 ];
 function detectPackageManager() {
   const ua = process.env.npm_config_user_agent ?? "";
@@ -197,7 +192,7 @@ async function run() {
       ...installNow ? [] : [`    ${kleur.cyan(`${pm} install`)}`],
       `    ${kleur.cyan(`${pm} run dev`)}`,
       "",
-      kleur.gray("  Docs: https://design.runestonetechnologies.com")
+      kleur.gray("  Docs: https://components.runestonetechnologies.com")
     ].join("\n")
   );
 }

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@craftzbay/create-app",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Scaffold a new project preconfigured with @craftzbay/ui. Invoke via `npm create @craftzbay/app my-app`.",
   "license": "MIT",
   "author": "craftzbay",
-  "homepage": "https://design.runestonetechnologies.com",
+  "homepage": "https://components.runestonetechnologies.com",
   "repository": {
     "type": "git",
-    "url": "https://github.com/craftzbay/design-system.git",
+    "url": "https://github.com/craftzbay/craftzbay-ui.git",
     "directory": "packages/create-app"
   },
   "bugs": {
-    "url": "https://github.com/craftzbay/design-system/issues"
+    "url": "https://github.com/craftzbay/craftzbay-ui/issues"
   },
   "keywords": [
     "create-app",
@@ -33,12 +33,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "build": "tsup src/index.ts --format esm --target node18 --out-dir dist --clean",
-    "dev": "tsup src/index.ts --format esm --target node18 --out-dir dist --watch",
-    "test": "pnpm build && node scripts/smoke.mjs",
-    "prepublishOnly": "pnpm build"
-  },
   "dependencies": {
     "@clack/prompts": "^0.8.2",
     "kleur": "^4.1.5"
@@ -50,5 +44,10 @@
   },
   "engines": {
     "node": ">=18"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --target node18 --out-dir dist --clean",
+    "dev": "tsup src/index.ts --format esm --target node18 --out-dir dist --watch",
+    "test": "pnpm build && node scripts/smoke.mjs"
   }
-}
+}

package/templates/vite-blank/_package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@craftzbay/ui": "^0.7.0",
+    "@craftzbay/ui": "^0.9.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

package/templates/vite-blank/index.html

@@ -4,6 +4,12 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>__PROJECT_NAME__</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="root"></div>

package/templates/vite-dashboard/_package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@craftzbay/ui": "^0.7.0",
+    "@craftzbay/ui": "^0.9.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

package/templates/vite-dashboard/index.html

@@ -4,6 +4,12 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>__PROJECT_NAME__</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="root"></div>

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

@@ -1,26 +1,200 @@
-import { AppShell, Dashboard, ToastProvider, ToastViewport, TooltipProvider } from '@craftzbay/ui';
+import { useState } from 'react';
+import {
+  Avatar,
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  EmptyState,
+  Icons,
+  Input,
+  Sidebar,
+  SidebarItem,
+  SidebarSection,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Toaster,
+  TooltipProvider,
+  TopNav,
+  toast,
+} from '@craftzbay/ui';
+
+type NavKey = 'overview' | 'projects' | 'customers' | 'billing' | 'settings';
+
+const stats = [
+  { label: 'Revenue', value: '$48,200', delta: '+12.4%', tone: 'success' as const },
+  { label: 'Active users', value: '2,310', delta: '+3.1%', tone: 'success' as const },
+  { label: 'Open tickets', value: '14', delta: '-2', tone: 'neutral' as const },
+  { label: 'Churn', value: '1.8%', delta: '+0.2%', tone: 'warning' as const },
+];
+
+const orders = [
+  { id: 'ORD-1042', customer: 'Alex Morgan', amount: '$1,200.00', status: 'Paid' },
+  { id: 'ORD-1041', customer: 'Jamie Lee', amount: '$340.00', status: 'Pending' },
+  { id: 'ORD-1040', customer: 'Sam Patel', amount: '$89.00', status: 'Failed' },
+  { id: 'ORD-1039', customer: 'Riley Chen', amount: '$2,050.00', status: 'Paid' },
+];
+
+const statusTone = { Paid: 'success', Pending: 'warning', Failed: 'danger' } as const;
 
 const Brand = () => (
   <span className="flex items-center gap-2 text-sm font-semibold">
-    <span className="inline-flex size-6 items-center justify-center rounded-md bg-accent text-on-accent text-xs">
-      ✦
+    <span className="bg-accent text-on-accent inline-flex size-6 items-center justify-center rounded-md text-xs">
+      <Icons.Zap className="size-3.5" />
     </span>
     __PROJECT_NAME__
   </span>
 );
 
 export function App() {
+  const [active, setActive] = useState<NavKey>('overview');
+
   return (
     <TooltipProvider>
-      <ToastProvider>
-        <AppShell brand={<Brand />} active="home">
-          <Dashboard
-            title="Overview"
-            subtitle="Replace this with your own data — every section is a prop."
+      <div className="bg-background text-foreground flex min-h-screen">
+        <Sidebar header={<Brand />}>
+          <SidebarSection label="Workspace">
+            <SidebarItem
+              icon={<Icons.Home />}
+              active={active === 'overview'}
+              onClick={() => setActive('overview')}
+            >
+              Overview
+            </SidebarItem>
+            <SidebarItem
+              icon={<Icons.Folder />}
+              active={active === 'projects'}
+              onClick={() => setActive('projects')}
+            >
+              Projects
+            </SidebarItem>
+            <SidebarItem
+              icon={<Icons.Users />}
+              active={active === 'customers'}
+              onClick={() => setActive('customers')}
+              trailing={<Badge tone="accent">3</Badge>}
+            >
+              Customers
+            </SidebarItem>
+          </SidebarSection>
+          <SidebarSection label="Account">
+            <SidebarItem
+              icon={<Icons.CreditCard />}
+              active={active === 'billing'}
+              onClick={() => setActive('billing')}
+            >
+              Billing
+            </SidebarItem>
+            <SidebarItem
+              icon={<Icons.Settings />}
+              active={active === 'settings'}
+              onClick={() => setActive('settings')}
+            >
+              Settings
+            </SidebarItem>
+          </SidebarSection>
+        </Sidebar>
+
+        <div className="flex min-w-0 flex-1 flex-col">
+          <TopNav
+            logo={<span className="text-sm font-medium capitalize">{active}</span>}
+            search={<Input type="search" placeholder="Search…" aria-label="Search" />}
+            actions={
+              <>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  aria-label="Notifications"
+                  onClick={() => toast({ title: 'No new notifications' })}
+                >
+                  <Icons.Bell />
+                </Button>
+                <Avatar fallback="AM" alt="Alex Morgan" size="sm" />
+              </>
+            }
           />
-        </AppShell>
-        <ToastViewport />
-      </ToastProvider>
+
+          <main className="flex flex-1 flex-col gap-6 p-6">
+            {active === 'overview' ? (
+              <>
+                <div className="flex items-center justify-between">
+                  <div>
+                    <h1 className="text-lg font-semibold">Overview</h1>
+                    <p className="text-foreground-muted text-sm">
+                      Replace this with your own data — every section is a primitive.
+                    </p>
+                  </div>
+                  <Button onClick={() => toast({ title: 'Report queued', variant: 'success' })}>
+                    <Icons.Download />
+                    Export
+                  </Button>
+                </div>
+
+                <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+                  {stats.map((s) => (
+                    <Card key={s.label}>
+                      <CardHeader>
+                        <CardDescription>{s.label}</CardDescription>
+                        <CardTitle className="text-2xl tabular-nums">{s.value}</CardTitle>
+                      </CardHeader>
+                      <CardContent>
+                        <Badge tone={s.tone}>{s.delta}</Badge>
+                      </CardContent>
+                    </Card>
+                  ))}
+                </div>
+
+                <Card>
+                  <CardHeader>
+                    <CardTitle>Recent orders</CardTitle>
+                    <CardDescription>Last 24 hours.</CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <Table>
+                      <TableHeader>
+                        <TableRow>
+                          <TableHead>Order</TableHead>
+                          <TableHead>Customer</TableHead>
+                          <TableHead>Status</TableHead>
+                          <TableHead className="text-right">Amount</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {orders.map((o) => (
+                          <TableRow key={o.id}>
+                            <TableCell className="font-mono text-xs">{o.id}</TableCell>
+                            <TableCell>{o.customer}</TableCell>
+                            <TableCell>
+                              <Badge tone={statusTone[o.status as keyof typeof statusTone]} dot>
+                                {o.status}
+                              </Badge>
+                            </TableCell>
+                            <TableCell className="text-right tabular-nums">{o.amount}</TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </CardContent>
+                </Card>
+              </>
+            ) : (
+              <EmptyState
+                title={`Nothing in ${active} yet`}
+                description="This page is a placeholder — build it from @craftzbay/ui primitives."
+                action={<Button onClick={() => setActive('overview')}>Back to overview</Button>}
+              />
+            )}
+          </main>
+        </div>
+      </div>
+      <Toaster />
     </TooltipProvider>
   );
 }