bsmnt 0.1.3 → 0.2.4

package/packages/create-basement-app/templates/experiment/.github/workflows/lighthouse-to-slack.yml

@@ -1,136 +0,0 @@
-# Lighthouse Performance Reports
-#
-# Runs Lighthouse on Vercel deployments and posts results as commit comments.
-# Our GitHub → Slack integration forwards these to Slack automatically.
-#
-# Required GitHub Secrets:
-#   VERCEL_TOKEN - Vercel API token (Settings → Tokens)
-
-name: Lighthouse
-
-on:
-  push:
-    branches: [main]
-  pull_request:
-    types: [opened, synchronize]
-    branches: [main]
-    paths:
-      # Only runs when relevant files change
-      - 'app/**'
-      - 'components/**'
-      - 'lib/**'
-      - 'public/**'
-      - 'package.json'
-      - 'package-lock.json'
-      - 'next.config.**'
-
-permissions:
-  contents: write
-  pull-requests: write
-  actions: read
-
-jobs:
-  lighthouse:
-    runs-on: ubuntu-latest
-    timeout-minutes: 10
-
-    steps:
-      - name: Discover Vercel Project
-        id: vercel_info
-        env:
-          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
-        run: |
-          project_name="${GITHUB_REPOSITORY##*/}"
-          echo "Looking for Vercel project: $project_name"
-
-          # Get team ID for basement.studio
-          teams=$(curl -s -H "Authorization: Bearer $VERCEL_TOKEN" "https://api.vercel.com/v2/teams")
-          team_id=$(echo "$teams" | jq -r '.teams[] | select(.slug=="basement") | .id')
-          echo "Team ID: $team_id"
-
-          # Get project ID by matching repo name
-          projects=$(curl -s -H "Authorization: Bearer $VERCEL_TOKEN" "https://api.vercel.com/v9/projects?teamId=$team_id")
-          project_id=$(echo "$projects" | jq -r ".projects[] | select(.name==\"$project_name\") | .id")
-          echo "Project ID: $project_id"
-
-          echo "team_id=$team_id" >> $GITHUB_OUTPUT
-          echo "project_id=$project_id" >> $GITHUB_OUTPUT
-
-      - name: Get Vercel Preview URL
-        id: vercel_url
-        uses: zentered/vercel-preview-url@v1.4.0
-        env:
-          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
-        with:
-          vercel_team_id: ${{ steps.vercel_info.outputs.team_id }}
-          vercel_project_id: ${{ steps.vercel_info.outputs.project_id }}
-
-      - name: Wait for Deployment
-        id: await
-        uses: UnlyEd/github-action-await-vercel@v2.0.0
-        env:
-          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
-        with:
-          deployment-url: ${{ steps.vercel_url.outputs.preview_url }}
-          timeout: 300
-          poll-interval: 10
-        continue-on-error: true
-
-      - name: Run Lighthouse
-        if: steps.await.outcome == 'success'
-        id: lighthouse
-        uses: treosh/lighthouse-ci-action@v12
-        env:
-          LHCI_BUILD_CONTEXT__CURRENT_HASH: ${{ github.sha }}
-        with:
-          urls: https://${{ steps.vercel_url.outputs.preview_url }}
-          uploadArtifacts: true
-          temporaryPublicStorage: true
-
-      - name: Format Results
-        id: format
-        uses: actions/github-script@v8
-        env:
-          DEPLOYMENT_FAILED: ${{ steps.await.outcome != 'success' }}
-          PREVIEW_URL: ${{ steps.vercel_url.outputs.preview_url }}
-          MANIFEST: ${{ steps.lighthouse.outputs.manifest }}
-          LINKS: ${{ steps.lighthouse.outputs.links }}
-        with:
-          script: |
-            if (process.env.DEPLOYMENT_FAILED === 'true') {
-              core.setOutput('comment', '⚠️ Vercel deployment failed or timed out. Lighthouse audit skipped.');
-              return;
-            }
-
-            try {
-              const manifest = JSON.parse(process.env.MANIFEST);
-              const links = JSON.parse(process.env.LINKS);
-              const previewUrl = process.env.PREVIEW_URL;
-
-              const scores = manifest[0].summary;
-              const reportUrl = Object.values(links)[0];
-
-              const emoji = (score) => score >= 0.9 ? '🟢' : score >= 0.5 ? '🟠' : '🔴';
-              const format = (score) => Math.round(score * 100);
-
-              const comment = [
-                `⚡️ [Lighthouse report](${reportUrl}) for this commit:`,
-                '',
-                `${emoji(scores.performance)} Performance: ${format(scores.performance)}`,
-                `${emoji(scores.accessibility)} Accessibility: ${format(scores.accessibility)}`,
-                `${emoji(scores['best-practices'])} Best Practices: ${format(scores['best-practices'])}`,
-                `${emoji(scores.seo)} SEO: ${format(scores.seo)}`,
-                '',
-                `*Tested on [${previewUrl}](https://${previewUrl})*`
-              ].join('\n');
-
-              core.setOutput('comment', comment);
-            } catch (error) {
-              console.error('Error:', error);
-              core.setOutput('comment', '⚠️ Failed to generate Lighthouse report. Check workflow logs.');
-            }
-
-      - name: Post Commit Comment
-        uses: peter-evans/commit-comment@v4
-        with:
-          body: ${{ steps.format.outputs.comment }}

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/.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.
-