kmcom-nuxt-layers 1.0.1

package/.claude/rules/nuxt-layers.md

@@ -0,0 +1,23 @@
+---
+paths:
+  - "layers/**/*"
+---
+
+# Nuxt Layers Development
+
+## Layer Structure
+Each layer is an independent package that extends Nuxt apps with:
+- Components (`components/`)
+- Composables (`composables/`)
+- Utilities (`utils/`)
+- Nuxt config (`nuxt.config.ts`)
+
+## Best Practices
+- Layers should be self-contained and composable
+- Avoid circular dependencies between layers
+- Test changes against the playground app
+
+## Layer Dependencies
+- `ui` → depends on nothing
+- `layout` → may use `ui` components
+- `core` → base utilities, no UI dependencies

package/.claude/rules/typescript.md

@@ -0,0 +1,16 @@
+---
+paths:
+  - "**/*.ts"
+  - "**/*.tsx"
+---
+
+# TypeScript Conventions
+
+## Style
+- No semicolons, single quotes, ES5 trailing commas
+- Max line length: 100 characters
+
+## Type Definitions
+- Prefer interfaces for object shapes
+- Use type aliases for unions/intersections
+- Export types alongside implementations

package/.claude/rules/vue-components.md

@@ -0,0 +1,34 @@
+---
+paths:
+  - "**/*.vue"
+---
+
+# Vue Component Conventions
+
+## Script Setup
+- Always use `<script setup lang="ts">`
+- Use type-based declarations with destructuring
+
+## Block Order
+`<script>` → `<template>` → `<style>`
+
+## Macro Ordering
+`defineProps` → `defineEmits` → `defineExpose` → `withDefaults`
+
+## Component Names
+- Use PascalCase in templates
+
+## Example
+
+```vue
+<script setup lang="ts">
+const { title, count = 0 } = defineProps<{
+  title: string
+  count?: number
+}>()
+
+const emit = defineEmits<{
+  update: [value: string]
+}>()
+</script>
+```

package/.claude/settings.local.json

@@ -0,0 +1,81 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(git -C /Users/kieranmansfield/Developer/layers/nuxt-layers log --oneline -10)",
+      "Bash(pnpm lint:*)",
+      "Bash(pnpm -F @layers/core lint -- --fix)",
+      "Bash(npx eslint:*)",
+      "Bash(npx stylelint:*)",
+      "Bash(pnpm exec stylelint:*)",
+      "Bash(pnpm ls:*)",
+      "Bash(code:*)",
+      "Bash(tree:*)",
+      "mcp__ide__getDiagnostics",
+      "Bash(curl:*)",
+      "Bash(pkill:*)",
+      "Bash(git ls-tree:*)",
+      "Bash(gh repo view:*)",
+      "Bash(gh api:*)",
+      "Bash(git add:*)",
+      "Bash(git commit -m \"$\\(cat <<''EOF''\nchore\\(layout\\): remove placeholder before subtree import\n\nCo-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>\nEOF\n\\)\")",
+      "Bash(git subtree:*)",
+      "Bash(pnpm install:*)",
+      "Bash(timeout 20 pnpm:*)",
+      "Bash(git commit:*)",
+      "Bash(timeout 25 pnpm:*)",
+      "Bash(PLAYGROUND_LAYERS=core,ui,layout,motion pnpm -F playground dev)",
+      "Bash(pnpm dev)",
+      "Bash(ls:*)",
+      "Bash(find:*)",
+      "Bash(xargs rm -f find apps -type f -name \"*.js\" ! -path \"*/node_modules/*\" ! -name \"*.config.*\")",
+      "Bash(xargs rm -f echo \"Cleaned up stray JS files\")",
+      "Bash(pnpm -F playground dev:*)",
+      "Bash(pnpm nuxt prepare:*)",
+      "Bash(true rm -rf apps/playground/.nuxt apps/playground/node_modules/.cache layers/*/.nuxt layers/*/node_modules/.cache pnpm install)",
+      "Bash(lsof:*)",
+      "Bash(pnpm -F playground nuxt prepare:*)",
+      "Bash(npx nuxt prepare:*)",
+      "Bash(xargs:*)",
+      "Bash(pnpm typecheck:*)",
+      "Bash(pnpm -F playground nuxt typecheck:*)",
+      "WebSearch",
+      "WebFetch(domain:scroll.locomotive.ca)",
+      "WebFetch(domain:github.com)",
+      "Bash(done)",
+      "WebFetch(domain:docs.tresjs.org)",
+      "WebFetch(domain:blog.maximeheckel.com)",
+      "Bash(pnpm view:*)",
+      "Bash(npx nuxi typecheck:*)",
+      "Bash(grep:*)",
+      "Bash(pnpm -F playground typecheck:*)",
+      "Bash(kill:*)",
+      "Bash(killall:*)",
+      "mcp__nuxt-ui-remote__list-components",
+      "mcp__nuxt-ui-remote__get-component",
+      "Bash(pnpm -F @layers/forms typecheck:*)",
+      "Bash(pnpm nuxt typecheck:*)",
+      "Bash(pnpm list:*)",
+      "Bash(pnpm exec nuxt typecheck:*)",
+      "WebFetch(domain:discourse.threejs.org)",
+      "Bash(node -e:*)",
+      "mcp__nuxt-ui-remote__get-documentation-page",
+      "mcp__nuxt-ui-remote__list-documentation-pages",
+      "mcp__nuxt-ui-remote__search-components-by-category",
+      "Bash(pnpm add:*)",
+      "Bash(pnpm rebuild:*)",
+      "Bash(npx --yes prebuild-install:*)",
+      "Bash(npx --yes node-gyp rebuild:*)",
+      "WebFetch(domain:localhost)",
+      "Bash(pnpm -F playground dev:prepare:*)",
+      "Bash(npx nuxi prepare:*)",
+      "Bash(pnpm -F playground nuxi prepare:*)",
+      "Bash(npx nuxi build:*)",
+      "Bash(for page in core ui layout motion shader forms theme content)",
+      "Bash(do echo \"=== /$page ===\")",
+      "WebFetch(domain:nuxt.studio)",
+      "WebFetch(domain:content.nuxt.com)",
+      "Bash(python3:*)",
+      "Bash(pnpm -F playground nuxi typecheck:*)"
+    ]
+  }
+}

package/.editorconfig

@@ -0,0 +1,27 @@
+root = true
+
+# Global defaults
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+max_line_length = 100
+
+# Markdown files: keep trailing whitespace
+[*.md]
+trim_trailing_whitespace = false
+
+# Vue files: preserve template whitespace
+[*.vue]
+trim_trailing_whitespace = false
+
+# JSON files
+[*.json]
+indent_size = 2
+
+# YAML files
+[*.yml]
+indent_size = 2

package/.github/workflows/npm-publish.yml

@@ -0,0 +1,33 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Node.js Package
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - run: npm ci
+      - run: npm test
+
+  publish-npm:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: https://registry.npmjs.org/
+      - run: npm ci
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

package/.oxlintrc.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "extends": ["oxlint:recommended"],
+  "categories": {
+    "correctness": "warn"
+  },
+  "rules": {
+    "eslint/no-unused-vars": "error"
+  }
+}

package/.prettierignore

@@ -0,0 +1,87 @@
+# Dependencies
+node_modules/
+.pnpm-store/
+
+# Build outputs
+.output/
+.nuxt/
+dist/
+.netlify/
+
+# Cache directories
+.cache/
+.data/
+.vscode/
+.github/
+
+# Generated files
+*.min.js
+*.min.css
+*.bundle.js
+*.bundle.css
+
+# Archive and backup files
+*.zip
+*.tar.gz
+*.rar
+OLD/
+oldApp/
+Archive.zip
+appOLD.zip
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Lock files
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
+
+# Environment files
+.env
+.env.*
+
+# System files
+.DS_Store
+Thumbs.db
+
+# IDE
+.vscode/
+.idea/
+
+# Static assets that shouldn't be formatted
+public/images/
+public/icons/
+*.ico
+*.png
+*.jpg
+*.jpeg
+*.gif
+*.svg
+*.webp
+*.avif
+
+# Fonts
+*.woff
+*.woff2
+*.ttf
+*.otf
+*.eot
+
+# Config files that might have specific formatting
+netlify.toml
+robots.txt
+
+# Shader files (handled by prettier-plugin-glsl but might want to exclude some)
+# *.glsl
+# *.vert
+# *.frag
+
+# Documentation that might need specific formatting
+README.md
+CHANGELOG.md

package/CLAUDE.md

@@ -0,0 +1,71 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is a Nuxt 4 monorepo using pnpm workspaces and Turbo for task orchestration. The project implements a layers-based architecture for building scalable Vue applications.
+
+## Commands
+
+```bash
+# Development
+pnpm dev                    # Start all dev servers via Turbo
+pnpm -F playground dev      # Start only the playground app
+
+# Build & Type Check
+pnpm build                  # Build all packages
+pnpm typecheck              # Type check all packages
+pnpm lint                   # Lint all packages
+
+# Cleanup
+pnpm clean                  # Remove node_modules, .nuxt, dist from all packages
+```
+
+## Architecture
+
+```
+nuxt-layers/
+├── apps/
+│   └── playground/         # Demo/development Nuxt app
+├── layers/
+│   ├── core/              # Core layer (base utilities)
+│   ├── layout/            # Layout components layer
+│   ├── motion/            # Motion and animation layer
+│   └── ui/                # UI components layer
+└── packages/              # Shared utilities (placeholder)
+```
+
+**Nuxt Layers Pattern:** Each layer in `layers/` is an independent package that can be composed into Nuxt apps. Layers extend the app with components, composables, utilities, and configuration.
+
+## Tech Stack
+
+- **Nuxt 4** / Vue 3 / TypeScript 5.9
+- **@nuxt/ui** with Tailwind CSS 4
+- **Turbo** for monorepo task running
+- **Vitest** for unit tests, **Playwright/Cypress** for E2E
+- **Changesets** for versioning
+
+## Git Subtree Layers
+
+The `core`, `ui`, `layout`, and `motion` layers are managed as git subtrees from separate repositories. To push changes back to their upstream repos:
+
+```bash
+# Push changes to upstream (replace <layer> with core, ui, layout, or motion)
+git subtree push --prefix=layers/<layer> <remote-url> main
+
+# Example: Push layout layer changes
+git subtree push --prefix=layers/layout https://github.com/kieranmansfield/ui-layout-layer.git main
+
+# Pull updates from upstream
+git subtree pull --prefix=layers/<layer> <remote-url> main --squash
+```
+
+**Note:** Always commit your changes to the monorepo first, then push to upstream if needed.
+
+## Path-Based Rules
+
+Detailed coding conventions are in `.claude/rules/`:
+- `vue-components.md` - Vue SFC patterns (applies to `**/*.vue`)
+- `nuxt-layers.md` - Layer development (applies to `layers/**/*`)
+- `typescript.md` - TypeScript conventions (applies to `**/*.ts`, `**/*.tsx`)

package/apps/playground/README.md

@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

package/apps/playground/app/app.config.ts

@@ -0,0 +1,10 @@
+export default defineAppConfig({
+  coreLayer: {
+    name: 'My amazing Nuxt layer (overwritten)',
+    // Loading screen configuration (initial app load only)
+    loading: {
+      // Master toggle - set to false to disable completely
+      enabled: false,
+    },
+  },
+})

package/apps/playground/app/app.vue

@@ -0,0 +1,12 @@
+<template>
+  <NuxtLayout>
+    <NuxtRouteAnnouncer />
+    <NuxtPage />
+  </NuxtLayout>
+
+  <ClientOnly>
+    <div class="fixed top-4 right-4 z-50">
+      <ThemePickerMenu />
+    </div>
+  </ClientOnly>
+</template>