@madebywild/wvk 0.1.1 → 0.1.2

package/dist/styles.css

@@ -22,8 +22,6 @@
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
-  --color-destructive: var(--destructive);
-
   /* Semantic surface (Figma: surface/bold, surface/muted, …) */
   --color-wvk-bold: var(--wvk-surface-bold);
   --color-wvk-muted: var(--wvk-surface-muted);
@@ -142,7 +140,6 @@
   --border: var(--wvk-border-default);
   --input: var(--wvk-border-default);
   --ring: var(--wvk-foreground-secondary);
-  --destructive: #ff3b30;
 
   /*
    * Field chrome (inputs, selects, textareas on blue canvas in dark mode):
@@ -245,7 +242,6 @@ html.wvk-cursor-style-arrow {
   --border: var(--wvk-border-default);
   --input: rgba(255, 255, 255, 0.4);
   --ring: rgba(255, 255, 255, 0.8);
-  --destructive: #ff6961;
 
   /*
    * Field chrome on blue canvas: frosted surface + white value/placeholder text

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@madebywild/wvk",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Wireframe kit — components, icons, and design tokens",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,10 @@
       "import": "./dist/icons.js",
       "require": "./dist/icons.cjs"
     },
-    "./styles.css": "./dist/styles.css"
+    "./styles.css": {
+      "style": "./dist/styles.css",
+      "default": "./dist/styles.css"
+    }
   },
   "sideEffects": [
     "./dist/styles.css"
@@ -35,6 +38,7 @@
   "files": [
     "dist",
     "bin",
+    "templates",
     "AGENTS.md",
     "README.md"
   ],

package/templates/next-app/README.md

@@ -0,0 +1,55 @@
+# my wvk app
+
+A starter Next.js app powered by [`@madebywild/wvk`](https://www.npmjs.com/package/@madebywild/wvk) — wild vibeframe kit components, icons, and design tokens.
+
+## Getting started
+
+Install dependencies and run the dev server:
+
+```bash
+npm install
+npm run dev
+# or
+pnpm install
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) to see the app.
+
+## What's included
+
+- **Next.js 16** with the App Router
+- **React 19**
+- **Tailwind CSS v4** wired up via `@tailwindcss/postcss`
+- **`@madebywild/wvk`** — components, icons, theme provider, and design tokens
+- A `Header` composition with `ThemeSwitcher` for light/dark toggling
+- Strict TypeScript and Next's recommended ESLint config
+- An `AGENTS.md` carrying the wvk authoring rules — your agent harness (Claude Code, Cursor, Copilot, etc.) will pick it up automatically and constrain code generation to the kit's tokens, components, and styles
+
+## Where to look first
+
+- `src/app/layout.tsx` — root layout with `ThemeProvider` and the early-paint theme init script.
+- `src/app/globals.css` — imports Tailwind v4 and `@madebywild/wvk/styles.css`, plus the `dark` custom variant. Do not remove the `@source` directive — Tailwind needs it to generate utility classes referenced from the package's `dist/`.
+- `src/app/page.tsx` — example landing page using kit components (`Alert`, `Button`, `Tag`, icons).
+- `src/components/header.tsx` — example `Header` composed from `ThemeSwitcher` and a brand link.
+
+## Using the kit
+
+Import components and icons from the package:
+
+```tsx
+import { Button, Alert, ThemeSwitcher } from "@madebywild/wvk";
+import { ArrowRight } from "@madebywild/wvk/icons";
+```
+
+Reach for kit components and semantic tokens (`bg-wvk-surface-primary`, `text-wvk-foreground-secondary`, `border-wvk-border-default`, etc.) before writing one-off styles.
+
+## Scripts
+
+| Script | Description |
+| --- | --- |
+| `dev` | Start the Next.js dev server |
+| `build` | Build for production |
+| `start` | Run the production build |
+| `lint` | Lint with `eslint-config-next` |
+| `typecheck` | Run `tsc --noEmit` |

package/templates/next-app/eslint.config.mjs

@@ -0,0 +1,11 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  globalIgnores([".next/**", "out/**", "build/**", "next-env.d.ts"]),
+]);
+
+export default eslintConfig;

package/templates/next-app/gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

package/templates/next-app/next.config.ts

@@ -0,0 +1,5 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {};
+
+export default nextConfig;

package/templates/next-app/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "my-wvk-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@madebywild/wvk": "0.1.2",
+    "next": "16.2.2",
+    "react": "19.2.4",
+    "react-dom": "19.2.4"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.2.2",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

package/templates/next-app/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

package/templates/next-app/src/app/globals.css

@@ -0,0 +1,8 @@
+@import "tailwindcss";
+@import "@madebywild/wvk/styles.css";
+
+/* Tailwind v4 needs to scan the kit's compiled output to generate the
+ * utility classes referenced by wvk components. Do not remove. */
+@source "../../node_modules/@madebywild/wvk/dist";
+
+@custom-variant dark (&:where(.dark, .dark *));

package/templates/next-app/src/app/layout.tsx

@@ -0,0 +1,48 @@
+import type { Metadata, Viewport } from "next";
+import { Inter } from "next/font/google";
+import { ThemeProvider } from "@madebywild/wvk";
+import "./globals.css";
+
+const inter = Inter({
+  variable: "--font-inter",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "my wvk app",
+  description: "A starter Next.js app powered by @madebywild/wvk.",
+};
+
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+};
+
+const themeInitScript = `
+(function(){
+  try {
+    var t = localStorage.getItem('wvk-theme');
+    if (t === 'dark') document.documentElement.classList.add('dark');
+    else document.documentElement.classList.remove('dark');
+  } catch (e) {}
+})();
+`;
+
+export default function RootLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html
+      lang="en"
+      className={`${inter.variable} h-full antialiased`}
+      suppressHydrationWarning
+    >
+      <head>
+        <script suppressHydrationWarning>{themeInitScript}</script>
+      </head>
+      <body className="min-h-full bg-background font-sans text-foreground">
+        <ThemeProvider>{children}</ThemeProvider>
+      </body>
+    </html>
+  );
+}

package/templates/next-app/src/app/page.tsx

@@ -0,0 +1,48 @@
+import { Alert, Button, Tag } from "@madebywild/wvk";
+import { ArrowRight, Checkmark } from "@madebywild/wvk/icons";
+import { Header } from "@/components/header";
+
+export default function Page() {
+  return (
+    <>
+      <Header />
+      <main className="min-h-[calc(100vh-65px)] bg-wvk-surface-secondary">
+        <section className="mx-auto flex w-full max-w-6xl flex-col gap-8 px-6 py-16">
+          <div className="space-y-4">
+            <Tag showLeadingIcon leadingIcon="Rocket">
+              New project
+            </Tag>
+            <h1 className="text-4xl font-semibold tracking-tight md:text-5xl">
+              Welcome to your wvk app
+            </h1>
+            <p className="max-w-2xl text-base leading-7 text-wvk-foreground-secondary">
+              Edit{" "}
+              <code className="rounded bg-wvk-surface-primary px-1.5 py-0.5 text-sm">
+                src/app/page.tsx
+              </code>{" "}
+              to start building. Components, icons, design tokens, and theme support
+              are wired up — pick a kit component and compose.
+            </p>
+          </div>
+
+          <Alert
+            title="Everything is wired up"
+            icon={<Checkmark aria-hidden />}
+          >
+            <code>ThemeProvider</code> is mounted, design tokens and component styles
+            are loaded, and Tailwind v4 is scanning the kit&apos;s output. Try
+            toggling the theme switcher in the header.
+          </Alert>
+
+          <div className="flex flex-wrap gap-3">
+            <Button>
+              Read the docs
+              <ArrowRight className="size-[var(--wvk-icon-sm)]" aria-hidden />
+            </Button>
+            <Button variant="ghost">Browse components</Button>
+          </div>
+        </section>
+      </main>
+    </>
+  );
+}

package/templates/next-app/src/components/header.tsx

@@ -0,0 +1,17 @@
+import Link from "next/link";
+import { ThemeSwitcher } from "@madebywild/wvk";
+import { Package } from "@madebywild/wvk/icons";
+
+export function Header() {
+  return (
+    <header className="sticky top-0 z-10 border-b border-wvk-border-default bg-wvk-surface-primary">
+      <div className="mx-auto flex w-full max-w-6xl items-center justify-between gap-4 px-6 py-4">
+        <Link href="/" className="flex items-center gap-2 text-sm font-bold">
+          <Package className="size-[var(--wvk-icon-md)]" aria-hidden />
+          <span>my wvk app</span>
+        </Link>
+        <ThemeSwitcher />
+      </div>
+    </header>
+  );
+}

package/templates/next-app/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "plugins": [{ "name": "next" }],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": ["node_modules"]
+}