bsmnt 0.1.3 → 0.2.0

package/packages/create-basement-app/templates/experiment/app/page.tsx

@@ -1,275 +0,0 @@
-import { Wrapper } from "@/components/layout/wrapper"
-import { Link } from "@/components/ui/link"
-import { colors } from "@/lib/styles/colors"
-import { breakpoints, layout } from "@/lib/styles/layout.mjs"
-
-const TECH_STACK = [
-  { description: "App Router, Turbopack", name: "Next.js", version: "16.1" },
-  { description: "React Compiler enabled", name: "React", version: "19" },
-  { description: "Strict mode", name: "TypeScript", version: "5.9" },
-  { description: "CSS-first config", name: "Tailwind CSS", version: "4" },
-  { description: "Lint + Format", name: "Biome", version: "2.3" },
-  { description: "Package manager", name: "Bun", version: "1.3" },
-]
-
-const FEATURES = [
-  {
-    description:
-      "Pre-configured colors, breakpoints, typography, and 30+ easing functions ready to use.",
-    title: "Design System",
-  },
-  {
-    description:
-      "Enhanced Image and Link components with blur placeholders, connection-aware prefetching.",
-    title: "Smart Components",
-  },
-  {
-    description:
-      "Light/dark theme with CSS custom properties and React context.",
-    title: "Theme Support",
-  },
-  {
-    description:
-      "Custom scripts for component scaffolding, style generation, and HTTPS dev server.",
-    title: "Developer Experience",
-  },
-  {
-    description:
-      "Bundle analyzer, optimized imports, security headers, and image optimization.",
-    title: "Performance Optimized",
-  },
-]
-
-const SCRIPTS = [
-  { cmd: "bun dev", desc: "Start development server" },
-  { cmd: "bun dev:https", desc: "Start with HTTPS" },
-  { cmd: "bun build", desc: "Build for production" },
-  { cmd: "bun generate", desc: "Scaffold components" },
-  { cmd: "bun lint:fix", desc: "Fix lint issues" },
-  { cmd: "bun typecheck", desc: "Type check with tsgo" },
-]
-
-const VERSION = "1.0.0"
-
-export default function Home() {
-  return (
-    <Wrapper theme="dark">
-      {/* Hero */}
-      <section className="flex min-h-[80vh] flex-col justify-center px-safe pt-header-height">
-        <div className="max-w-3xl">
-          <p className="font-mono text-contrast text-sm uppercase tracking-wider">
-            Next.js Starter Template v{VERSION}
-          </p>
-          <h1 className="mt-4 font-semibold text-4xl leading-tight tracking-tight md:text-6xl">
-            Basement Next Starter
-          </h1>
-          <p className="mt-6 max-w-xl text-lg text-secondary/70">
-            A production-ready Next.js starter with React 19, Tailwind CSS v4,
-            TypeScript strict mode, and everything you need to build modern web
-            applications.
-          </p>
-          <div className="mt-8 flex flex-wrap gap-4 font-mono text-sm uppercase">
-            <Link
-              href="https://github.com/basementstudio/next-starter/generate"
-              className="bg-secondary px-6 py-3 text-primary transition-opacity hover:opacity-80"
-            >
-              Use this template
-            </Link>
-            <Link
-              href="https://github.com/basementstudio/next-starter"
-              className="border border-secondary/30 px-6 py-3 transition-colors hover:border-secondary"
-            >
-              View on GitHub
-            </Link>
-          </div>
-        </div>
-      </section>
-
-      {/* Tech Stack */}
-      <section className="px-safe py-24">
-        <h2 className="font-mono text-contrast text-sm uppercase tracking-wider">
-          Tech Stack
-        </h2>
-        <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-          {TECH_STACK.map((tech) => (
-            <div
-              key={tech.name}
-              className="border border-secondary/10 p-6 transition-colors hover:border-secondary/30"
-            >
-              <div className="flex items-baseline justify-between">
-                <span className="font-semibold text-lg">{tech.name}</span>
-                <span className="font-mono text-contrast text-sm">
-                  v{tech.version}
-                </span>
-              </div>
-              <p className="mt-2 text-secondary/60 text-sm">
-                {tech.description}
-              </p>
-            </div>
-          ))}
-        </div>
-      </section>
-
-      {/* Features */}
-      <section className="px-safe py-24">
-        <h2 className="font-mono text-contrast text-sm uppercase tracking-wider">
-          Features
-        </h2>
-        <div className="mt-8 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
-          {FEATURES.map((feature) => (
-            <div key={feature.title}>
-              <h3 className="font-semibold text-lg">{feature.title}</h3>
-              <p className="mt-2 text-secondary/60">{feature.description}</p>
-            </div>
-          ))}
-        </div>
-      </section>
-
-      {/* Design System */}
-      <section className="px-safe py-24">
-        <h2 className="font-mono text-contrast text-sm uppercase tracking-wider">
-          Design System
-        </h2>
-
-        {/* Colors */}
-        <div className="mt-8">
-          <h3 className="font-mono text-secondary/60 text-xs uppercase">
-            Colors
-          </h3>
-          <div className="mt-4 flex flex-wrap gap-3">
-            {Object.entries(colors).map(([name, value]) => (
-              <div key={name} className="flex items-center gap-2">
-                <div
-                  className="size-8 rounded border border-secondary/20"
-                  style={{ backgroundColor: value }}
-                />
-                <div className="font-mono text-xs">
-                  <div className="text-secondary">{name}</div>
-                  <div className="text-secondary/40">{value}</div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        {/* Breakpoints */}
-        <div className="mt-12">
-          <h3 className="font-mono text-secondary/60 text-xs uppercase">
-            Breakpoints
-          </h3>
-          <div className="mt-4 flex flex-wrap gap-4">
-            {Object.entries(breakpoints).map(([name, value]) => (
-              <div
-                key={name}
-                className="border border-secondary/10 px-4 py-2 font-mono text-sm"
-              >
-                <span className="text-secondary">{name}</span>
-                <span className="ml-2 text-secondary/40">{value}px</span>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        {/* Grid */}
-        <div className="mt-12">
-          <h3 className="font-mono text-secondary/60 text-xs uppercase">
-            Grid System
-          </h3>
-          <div className="mt-4 flex gap-8 font-mono text-sm">
-            <div>
-              <span className="text-secondary/40">Mobile:</span>{" "}
-              <span className="text-secondary">
-                {layout.columns.mobile} columns
-              </span>
-            </div>
-            <div>
-              <span className="text-secondary/40">Desktop:</span>{" "}
-              <span className="text-secondary">
-                {layout.columns.desktop} columns
-              </span>
-            </div>
-            <div>
-              <span className="text-secondary/40">Gap:</span>{" "}
-              <span className="text-secondary">{layout.gap.desktop}px</span>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Quick Start */}
-      <section className="px-safe py-24">
-        <h2 className="font-mono text-contrast text-sm uppercase tracking-wider">
-          Quick Start
-        </h2>
-
-        <div className="mt-8 max-w-2xl">
-          <div className="border border-secondary/10 bg-secondary/5 p-6 font-mono text-sm">
-            <div className="text-secondary/40"># Clone the template</div>
-            <div className="mt-1 text-secondary">
-              bunx degit basementstudio/next-starter my-project
-            </div>
-            <div className="mt-4 text-secondary/40"># Install dependencies</div>
-            <div className="mt-1 text-secondary">
-              cd my-project && bun install
-            </div>
-            <div className="mt-4 text-secondary/40"># Start development</div>
-            <div className="mt-1 text-secondary">bun dev</div>
-          </div>
-        </div>
-
-        <div className="mt-12">
-          <h3 className="font-mono text-secondary/60 text-xs uppercase">
-            Available Scripts
-          </h3>
-          <div className="mt-4 grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
-            {SCRIPTS.map((script) => (
-              <div
-                key={script.cmd}
-                className="flex items-center justify-between border border-secondary/10 px-4 py-3 font-mono text-sm"
-              >
-                <code className="text-secondary">{script.cmd}</code>
-                <span className="text-secondary/40">{script.desc}</span>
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* Project Structure */}
-      <section className="px-safe py-24">
-        <h2 className="font-mono text-contrast text-sm uppercase tracking-wider">
-          Project Structure
-        </h2>
-        <div className="mt-8 max-w-2xl border border-secondary/10 bg-secondary/5 p-6 font-mono text-sm leading-relaxed">
-          <pre className="text-secondary/80">
-            {`app/                 # Next.js pages and routes
-components/
-  ├── layout/        # Header, Footer, Wrapper, Theme
-  └── ui/            # Image, Link, SanityImage
-lib/
-  ├── hooks/         # useDeviceDetection, useMediaBreakpoint
-  ├── scripts/       # Dev tools, generators
-  ├── store/         # Zustand global state
-  ├── styles/        # Design tokens, CSS config
-  └── utils/         # Easings, math, strings, fetch`}
-          </pre>
-        </div>
-      </section>
-
-      {/* CTA */}
-      <section className="px-safe py-24 text-center">
-        <p className="font-mono text-secondary/60 text-sm uppercase">
-          Ready to build something great?
-        </p>
-        <div className="mt-6 flex justify-center gap-4 font-mono text-sm uppercase">
-          <Link
-            href="https://github.com/basementstudio/next-starter/generate"
-            className="bg-contrast px-8 py-4 text-primary transition-opacity hover:opacity-80"
-          >
-            Get Started
-          </Link>
-        </div>
-      </section>
-    </Wrapper>
-  )
-}

package/packages/create-basement-app/templates/webgl/.biome/plugins/README.md

@@ -1,21 +0,0 @@
-## Plugins
-
-### 1. `no-anchor-element.grit`
-Enforces using Next.js `<Link>` component instead of HTML `<a>` elements.
-
-### 2. `no-unnecessary-forwardref.grit`
-Checks for unnecessary `forwardRef` usage in React 19 with the compiler.
-
-### 3. `no-relative-parent-imports.grit`
-Forbids relative parent imports (`../`) and encourages alias imports (`@/`).
-
-## Plugin Configuration
-
-The plugins are configured in `biome.json`:
-```json
-"plugins": [
-  "./biome-plugins/no-anchor-element.grit",
-  "./biome-plugins/no-unnecessary-forwardref.grit",
-  "./biome-plugins/no-relative-parent-imports.grit"
-]
-``` 

package/packages/create-basement-app/templates/webgl/.biome/plugins/no-anchor-element.grit

@@ -1,12 +0,0 @@
-language js;
-
-`<a $attrs>$content</a>` as $anchor where {
-    !$anchor <: within `if ($condition) { return ($jsx) }` where {
-        $condition <: contains or { `isExternal`, `isExternalSSR` }
-    },
-    register_diagnostic(
-        span = $anchor,
-        message = "Use custom Link component instead of <a> element. The Link component handles both internal and external links automatically.",
-        severity = "error"
-    )
-} 

package/packages/create-basement-app/templates/webgl/.biome/plugins/no-relative-parent-imports.grit

@@ -1,10 +0,0 @@
-language js;
-
-`import $imports from $source` as $import where {
-    $source <: r"['\"]\.\.\/\.\.\/.*['\"]",
-    register_diagnostic(
-        span = $import,
-        message = "Use alias imports (~/dir/) instead of deep relative imports (../../). Single level imports (../) are allowed for colocated files.",
-        severity = "error"
-    )
-} 

package/packages/create-basement-app/templates/webgl/.biome/plugins/no-unnecessary-forwardref.grit

@@ -1,9 +0,0 @@
-language js;
-
-`forwardRef($func)` as $ref where {
-    register_diagnostic(
-        span = $ref,
-        message = "forwardRef is unnecessary in React 19 with the compiler",
-        severity = "warning"
-    )
-} 

package/packages/create-basement-app/templates/webgl/.cursor/rules/README.md

@@ -1,184 +0,0 @@
-# Cursor Rules Documentation
-
-This directory contains consolidated Cursor AI rules for the Satus project. The rules are organized into 5 focused files for easy maintenance and efficient AI context loading.
-
-## 📁 File Structure
-
-### 1. `main.mdc` - Project Overview & Cross-Cutting Concerns
-**Purpose**: High-level overview and concerns that apply across the entire project
-
-**Contents**:
-- Technology stack (Next.js 16+, React 19+, Tailwind v4, Biome, Bun)
-- React 19+ new features (`<Activity />`, `useEffectEvent`, `cacheSignal`)
-- Next.js 16 Cache Components gotchas and best practices
-- File organization
-- React Compiler & memoization guidelines (single source of truth)
-- Image optimization guidelines (single source of truth)
-- Development vs production guidelines (single source of truth)
-- Core utility libraries (`@/utils`)
-
-**When to reference**: Starting a new project, understanding the tech stack, cross-cutting concerns
-
----
-
-### 2. `components.mdc` - React Component Patterns & WebGL
-**Purpose**: All React component patterns including standard components and WebGL/Three.js
-
-**Contents**:
-- Component structure and imports
-- Props interfaces and React 19 ref handling
-- Forms and responsive design
-- Performance best practices (code splitting)
-- Error handling
-- WebGL/Three.js setup and patterns
-- React Three Fiber
-- Drei components
-- Custom shaders
-- Animation and interaction
-- Post-processing
-
-**When to reference**: Building React components, creating WebGL experiences, working with Three.js
-
----
-
-### 3. `styling.mdc` - CSS Modules & Tailwind CSS v4
-**Purpose**: All styling approaches including CSS Modules and Tailwind CSS v4
-
-**Contents**:
-- CSS Modules (file naming, class naming, imports)
-- Responsive design (viewport functions, breakpoints, grid system)
-- Typography and colors
-- Animations and transitions
-- Tailwind CSS v4 (CSS-first configuration, theme variables, new features)
-- 3D transforms, gradients, shadows
-- New variants (composable, `starting`, `not-*`, `nth-*`)
-- Custom extensions (`@utility`, `@variant`, `@plugin`)
-- Breaking changes and migration
-- Project-specific custom utilities (`b-*` classes)
-- PostCSS functions
-
-**When to reference**: Styling components, using Tailwind, creating responsive designs
-
----
-
-### 4. `integrations.mdc` - Third-Party Integrations
-**Purpose**: Guidelines for all third-party service integrations
-
-**Contents**:
-- **Sanity CMS**: Configuration, schema management, GROQ queries, visual editing, TypeScript generation, cacheSignal integration
-- **Shopify**: API configuration, product management, cart operations, cacheSignal integration
-- General best practices (environment variables, API resilience, error handling)
-- Cache Components gotchas for integrations (user-specific data, real-time data)
-- Type safety and performance
-- Security and integration management
-- Webhook handling
-
-**When to reference**: Integrating with Sanity, Shopify, or other third-party services
-
----
-
-### 5. `architecture.mdc` - Architecture Patterns & Best Practices
-**Purpose**: Architectural patterns, state management, routing, and code quality guidelines
-
-**Contents**:
-- Type safety (TypeScript configuration)
-- State management (React state, Zustand)
-- Routing & navigation (Next.js App Router, Link component)
-- Metadata & SEO
-- Performance (server components, code splitting, caching)
-- Cache Components (Next.js 16) - Suspense, invalidation, gotchas
-- Security (environment variables, input validation, authentication)
-- Testing & debugging (unit tests, debugging tools, error boundaries)
-- Code quality (linting, formatting, code organization)
-- Development workflow (package manager, git workflow, client/server boundaries)
-
-**When to reference**: Architectural decisions, state management, routing patterns, code quality
-
----
-
-## 🎯 Quick Reference Guide
-
-### I want to...
-
-- **Start a new feature** → Read `main.mdc` for overview, then `architecture.mdc` for patterns
-- **Build a React component** → `components.mdc`
-- **Add WebGL/Three.js** → `components.mdc` § WebGL Components & Activity Integration
-- **Style with CSS Modules** → `styling.mdc` § CSS Modules
-- **Style with Tailwind** → `styling.mdc` § Tailwind CSS v4
-- **Use custom utilities** → `styling.mdc` § Project-Specific Custom Utilities
-- **Integrate Sanity CMS** → `integrations.mdc` § Sanity CMS Integration
-- **Integrate Shopify** → `integrations.mdc` § Shopify Integration
-- **Manage state** → `architecture.mdc` § State Management
-- **Add routing** → `architecture.mdc` § Routing & Navigation
-- **Optimize performance** → `architecture.mdc` § Performance
-- **Handle security** → `architecture.mdc` § Security
-- **Debug issues** → `architecture.mdc` § Testing & Debugging
-- **Understand React Compiler** → `main.mdc` § React Compiler & Memoization
-- **Handle images** → `main.mdc` § Image Optimization (`@/components/ui/image`)
-- **Dev vs prod differences** → `main.mdc` § Development vs Production
-- **Use utility functions** → `main.mdc` § Core Utility Libraries (`@/utils`)
-
----
-
-## 📝 Maintenance Guidelines
-
-### When Editing Rules
-
-1. **Avoid Duplication**: If content applies to multiple areas, put it in `main.mdc` and reference it
-2. **Use Cross-References**: Link to other sections instead of duplicating content
-3. **Keep It Focused**: Each file should maintain its specific purpose
-4. **Update Dates**: Update the "Last updated" date when making changes
-5. **Check Dependencies**: When updating one file, check if related files need updates
-
-### Example Cross-Reference Pattern
-
-```markdown
-<!-- In components.mdc -->
-## Performance Optimization
-See main.mdc § React Compiler & Memoization for optimization guidelines.
-```
-
-### Adding New Content
-
-**Ask yourself**:
-- Is this component-specific? → `components.mdc`
-- Is this styling-related? → `styling.mdc`
-- Is this an integration? → `integrations.mdc`
-- Is this architectural? → `architecture.mdc`
-- Is this cross-cutting? → `main.mdc`
-
----
-
-## 🚀 For Developers
-
-### Quick Setup
-1. These rules are automatically loaded by Cursor AI
-2. All files have `alwaysApply: true` in frontmatter
-3. Files apply to: `*.tsx, *.jsx, *.css, *.js, *.ts`
-
-### Contributing
-When adding new guidelines:
-1. Choose the appropriate file
-2. Follow existing formatting patterns
-3. Add clear examples
-4. Update this README if needed
-5. Keep content focused and actionable
-
----
-
-## 📊 File Statistics
-
-| File | Purpose | Key Topics |
-|------|---------|------------|
-| `main.mdc` | Overview & Cross-cutting | Tech stack, React 19+ features, Cache Components, React Compiler, Images, Dev/Prod |
-| `components.mdc` | React & WebGL | Components, Forms, WebGL, Three.js, Shaders, Activity |
-| `styling.mdc` | All Styling | CSS Modules, Tailwind v4, Responsive, Custom utilities |
-| `integrations.mdc` | Third-party Services | Sanity, Shopify, Cache Components, cacheSignal |
-| `architecture.mdc` | Patterns & Quality | State, Routing, Performance, Cache Components, Security, Testing |
-
----
-
-Last updated: 2026-01-26
-
-For questions or suggestions about these rules, contact the development team.
-