bsmnt 0.2.9 → 0.2.10

package/src/templates/next-default/lib/hooks/use-device-detection.ts

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react"
 import { useMedia } from "react-use"
-import { breakpoints } from "@/lib/styles/config"
+
+const MOBILE_BREAKPOINT = 640
 
 /**
  * Hook for detecting device capabilities and characteristics.
@@ -58,7 +59,7 @@ import { breakpoints } from "@/lib/styles/config"
  * ```
  */
 export function useDeviceDetection() {
-  const isMobile = useMedia(`(max-width: ${breakpoints.mobile - 1}px)`, true)
+  const isMobile = useMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`, true)
   const isReducedMotion = useMedia("(prefers-reduced-motion: reduce)")
   const [dpr, setDpr] = useState<number | undefined>(undefined)
   const [isSafari, setIsSafari] = useState<boolean | undefined>(undefined)

package/src/templates/next-default/lib/hooks/use-media-breakpoint.ts

@@ -1,5 +1,12 @@
 import { useMedia } from "react-use"
-import { breakpoints } from "@/lib/styles/config"
+
+const BREAKPOINTS = {
+  "desktop-large": 1920,
+  desktop: 1440,
+  "tablet-lg": 1024,
+  tablet: 768,
+  mobile: 640,
+} as const
 
 /**
  * Hook for detecting if the viewport is at a specific breakpoint.
@@ -8,8 +15,8 @@ import { breakpoints } from "@/lib/styles/config"
  * @returns True if the viewport is at the breakpoint
  */
 export function useMediaBreakpoint(
-  breakpoint: keyof typeof breakpoints,
+  breakpoint: keyof typeof BREAKPOINTS,
   defaultState = false
 ) {
-  return useMedia(`(min-width: ${breakpoints[breakpoint]}px)`, defaultState)
+  return useMedia(`(min-width: ${BREAKPOINTS[breakpoint]}px)`, defaultState)
 }

package/src/templates/next-default/lib/scripts/dev.ts

@@ -1,7 +1,5 @@
 /**
- * Cross-platform parallel dev script
- * Replaces npm-run-all for running multiple processes simultaneously
- * Works on Windows, macOS, and Linux using Bun's native APIs
+ * Cross-platform Next.js dev launcher.
  */
 
 import { bunExecutable, colorEnv } from "./utils"
@@ -14,39 +12,21 @@ const nextDevArgs = [bunExecutable, "next", "dev"]
 if (isHttps) nextDevArgs.push("--experimental-https")
 if (isInspect) nextDevArgs.push("--inspect")
 
-// Build environment with FORCE_COLOR
 const devEnv = colorEnv()
 
-const processes = [
-  // Style watcher
-  Bun.spawn(
-    [bunExecutable, "--watch", "./lib/styles/scripts/setup-styles.ts"],
-    {
-      stdout: "inherit",
-      stderr: "inherit",
-      env: devEnv,
-    }
-  ),
-
-  // Next.js dev server
-  Bun.spawn(nextDevArgs, {
-    stdout: "inherit",
-    stderr: "inherit",
-    env: devEnv,
-  }),
-]
-
-// Handle graceful shutdown
+const nextDevProcess = Bun.spawn(nextDevArgs, {
+  stdout: "inherit",
+  stderr: "inherit",
+  env: devEnv,
+})
+
 const cleanup = () => {
-  for (const proc of processes) {
-    proc.kill()
-  }
+  nextDevProcess.kill()
   process.exit(0)
 }
 
 process.on("SIGINT", cleanup)
 process.on("SIGTERM", cleanup)
 
-// Wait for any process to exit (if one crashes, we want to know)
-await Promise.race(processes.map((p) => p.exited))
+await nextDevProcess.exited
 cleanup()

package/src/templates/next-default/lib/styles/README.md

@@ -1,64 +1,13 @@
 # Styles
 
-Hybrid styling with Tailwind CSS v4 and custom PostCSS functions.
+Minimal Tailwind setup for the starter.
 
-## PostCSS Functions
-
-```css
-/* Viewport-relative sizing */
-.element {
-  width: tovw(100);                    /* 6.94vw (100px at 1440px) */
-  width: tovw(100, 50);                 /* max(50px, 6.94vw) */
-  width: tovw(16, undefined, 'mobile'); /* 4.27vw (16px at 375px) */
-}
-
-/* Relative units */
-.text {
-  font-size: torem(24);    /* 1.5rem (24px / 16px) */
-  padding: toem(16, 14);   /* 1.14em (16px / 14px) */
-}
-
-/* Grid columns */
-.sidebar {
-  width: columns(3);       /* Spans 3 columns + gaps */
-}
-```
-
-## Custom Utilities (`dr-*`)
-
-```tsx
-// Responsive sizing (scales with viewport)
-<div className="dr-w-150 dr-h-100" />
-
-// Column-based sizing
-<div className="dr-w-col-4" />  {/* 4 columns wide */}
-
-// Grid layout
-<div className="dr-grid" />     {/* 4 cols mobile, 12 cols desktop */}
-```
-
-## Breakpoints
-
-```css
-@media (--mobile) { /* <= 799px */ }
-@media (--desktop) { /* >= 800px */ }
-```
-
-## Configuration
+## Files
 
 | File | Purpose |
 |------|---------|
-| `colors.ts` | Color palette & themes |
-| `typography.ts` | Font sizes & weights |
-| `layout.mjs` | Grid, breakpoints, spacing |
-| `easings.ts` | Animation curves |
-| `fonts.ts` | Font loading |
-
-After changing config: `bun setup:styles`
-
-## Generated Files (Don't Edit)
-
-- `css/root.css` — CSS custom properties
-- `css/tailwind.css` — Tailwind utilities
-
-See [scripts/README.md](scripts/README.md) for generation details.
+| `index.css` | Single stylesheet entrypoint imported by `app/layout.tsx` |
+| `tokens.css` | Theme variables, breakpoints, and custom Tailwind utilities |
+| `global.css` | Reset and global app styles |
+| `fonts.ts` | Font variable setup |
+| `cn.ts` | Tailwind class merging helper |

package/src/templates/next-default/lib/styles/fonts.ts

@@ -1,17 +1,9 @@
-import localFont from "next/font/local"
+import { Geist_Mono } from "next/font/google";
 
-const mono = localFont({
-  src: [
-    {
-      path: "../../public/fonts/geist/Geist-Mono.woff2",
-      weight: "400",
-      style: "normal",
-    },
-  ],
+const mono = Geist_Mono({
+  subsets: ["latin"],
   display: "swap",
   variable: "--geist-mono",
-  preload: true,
-  adjustFontFallback: "Arial",
   fallback: [
     "ui-monospace",
     "SFMono-Regular",
@@ -20,9 +12,9 @@ const mono = localFont({
     "Menlo",
     "monospace",
   ],
-})
+});
 
-const fonts = [mono]
-const fontsVariable = fonts.map((font) => font.variable).join(" ")
+const fonts = [mono];
+const fontsVariable = fonts.map((font) => font.variable).join(" ");
 
-export { fontsVariable }
+export { fontsVariable };

package/src/templates/next-default/lib/styles/global.css

@@ -0,0 +1,198 @@
+/***
+    The new CSS reset - version 1.11.3 (last updated 25.08.2024)
+    GitHub page: https://github.com/elad2412/the-new-css-reset
+***/
+
+*:where(
+    :not(
+        html,
+        iframe,
+        canvas,
+        img,
+        svg,
+        video,
+        audio,
+        dialog,
+        vercel-live-feedback,
+        nextjs-portal,
+        :where(select, option)
+      ):not(svg *, symbol *)
+  ) {
+  all: unset;
+  display: revert;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  --scrollbar-gutter: 0px;
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  scrollbar-gutter: stable;
+  text-rendering: optimizeLegibility;
+  text-size-adjust: none;
+
+  &.lenis-stopped {
+    --scrollbar-gutter: var(--scrollbar-width);
+  }
+}
+
+html.overflow-hidden {
+  overflow: hidden;
+  touch-action: none;
+}
+
+a,
+button {
+  -webkit-tap-highlight-color: transparent;
+  cursor: revert;
+}
+
+ol,
+ul,
+menu,
+summary {
+  list-style: none;
+}
+
+ol {
+  counter-reset: revert;
+}
+
+img,
+video,
+audio {
+  max-block-size: 100%;
+  max-inline-size: 100%;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+input,
+textarea {
+  -webkit-user-select: auto;
+}
+
+textarea {
+  white-space: revert;
+}
+
+meter {
+  -webkit-appearance: revert;
+  appearance: revert;
+}
+
+:where(pre) {
+  all: revert;
+  box-sizing: border-box;
+}
+
+::placeholder {
+  color: unset;
+}
+
+:where([hidden]) {
+  display: none;
+}
+
+:where([contenteditable]:not([contenteditable="false"])) {
+  -moz-user-modify: read-write;
+  -webkit-line-break: after-white-space;
+  -webkit-user-modify: read-write;
+  -webkit-user-select: auto;
+  overflow-wrap: break-word;
+}
+
+:where([draggable="true"]) {
+  -webkit-user-drag: element;
+}
+
+:where(dialog:modal) {
+  all: revert;
+  box-sizing: border-box;
+}
+
+::-webkit-details-marker {
+  display: none;
+}
+
+:root {
+  color-scheme: light dark;
+}
+
+:where(input[type="file"]) {
+  -webkit-appearance: none;
+  appearance: none;
+  cursor: default;
+}
+
+body {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  background-color: var(--color-primary);
+  color: var(--color-secondary);
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  overscroll-behavior: none;
+}
+
+*::selection {
+  background-color: var(--color-contrast);
+  color: var(--color-primary);
+}
+
+svg.icon {
+  path[fill],
+  rect[fill],
+  circle[fill] {
+    fill: currentColor;
+  }
+
+  path[stroke],
+  rect[stroke],
+  circle[stroke] {
+    stroke: currentColor;
+  }
+}
+
+.link {
+  @media (--hover) {
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+*:focus-visible {
+  outline: 2px solid var(--color-contrast);
+}
+
+html.scrollbar-grabbing,
+img {
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+button {
+  cursor: pointer;
+  text-box-edge: cap alphabetic;
+  text-box-trim: both;
+  user-select: none;
+}
+
+html.screenshot {
+  *:not(:has(canvas), canvas, :has(#orchestra), #orchestra, #orchestra *) {
+    opacity: 0 !important;
+  }
+}

package/src/templates/next-default/lib/styles/index.css

@@ -0,0 +1,3 @@
+@import "tailwindcss/utilities.css";
+@import "./tokens.css";
+@import "./global.css";

package/src/templates/next-default/lib/styles/tokens.css

@@ -0,0 +1,179 @@
+@custom-media --hover (hover: hover);
+@custom-media --reduced-motion (prefers-reduced-motion: reduce);
+@custom-media --mobile-only (width < 768px);
+@custom-media --tablet (width >= 768px);
+@custom-media --tablet-lg (width >= 1024px);
+@custom-media --desktop (width >= 1440px);
+@custom-media --desktop-large (width >= 1920px);
+
+:root {
+  --device-width: 640;
+  --device-height: 650;
+  --columns: 4;
+  --gap: 16px;
+  --safe: 16px;
+  --header-height: 58px;
+  --layout-width: calc(100vw - (2 * var(--safe)));
+  --column-width: calc(
+    (var(--layout-width) - (var(--columns) - 1) * var(--gap)) / var(--columns)
+  );
+  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
+  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
+  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
+  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
+  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
+  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
+  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
+  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
+  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
+  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
+  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
+  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+  --ease-gleasing: cubic-bezier(0.4, 0, 0, 1);
+  --color-black: #000000;
+  --color-white: #ffffff;
+  --color-orange: #ff4d00;
+  --color-blue: #487cff;
+  --color-green: #00ff9b;
+  --color-violet: #f101a5;
+  --color-pink: #ff73a6;
+  --color-gray: #666666;
+
+  @variant desktop {
+    --device-width: 1440;
+    --device-height: 816;
+    --columns: 12;
+    --header-height: 98px;
+  }
+}
+
+@theme {
+  --breakpoint-*: initial;
+  --breakpoint-desktop-large: 1920px;
+  --breakpoint-desktop: 1440px;
+  --breakpoint-tablet-lg: 1024px;
+  --breakpoint-tablet: 768px;
+  --breakpoint-mobile: 640px;
+
+  --color-*: initial;
+  --color-primary: #ffffff;
+  --color-secondary: #000000;
+  --color-contrast: #ff4d00;
+  --color-black: #000000;
+  --color-white: #ffffff;
+  --color-orange: #ff4d00;
+  --color-blue: #487cff;
+  --color-green: #00ff9b;
+  --color-violet: #f101a5;
+  --color-pink: #ff73a6;
+  --color-gray: #666666;
+  --color-gray-50: #f5f5f5;
+  --color-gray-100: #e0e0e0;
+  --color-gray-200: #c2c2c2;
+  --color-gray-300: #a3a3a3;
+  --color-gray-400: #858585;
+  --color-gray-500: #666666;
+  --color-gray-600: #4d4d4d;
+  --color-gray-700: #333333;
+  --color-gray-800: #1a1a1a;
+
+  --spacing: 0.25rem;
+  --spacing-0: 0;
+  --spacing-safe: var(--safe);
+  --spacing-gap: var(--gap);
+  --spacing-header-height: var(--header-height);
+
+  --font-*: initial;
+  --font-mono: var(--geist-mono);
+
+  --ease-*: initial;
+  --ease-in-quad: var(--ease-in-quad);
+  --ease-in-cubic: var(--ease-in-cubic);
+  --ease-in-quart: var(--ease-in-quart);
+  --ease-in-quint: var(--ease-in-quint);
+  --ease-in-expo: var(--ease-in-expo);
+  --ease-in-circ: var(--ease-in-circ);
+  --ease-out-quad: var(--ease-out-quad);
+  --ease-out-cubic: var(--ease-out-cubic);
+  --ease-out-quart: var(--ease-out-quart);
+  --ease-out-quint: var(--ease-out-quint);
+  --ease-out-expo: var(--ease-out-expo);
+  --ease-out-circ: var(--ease-out-circ);
+  --ease-in-out-quad: var(--ease-in-out-quad);
+  --ease-in-out-cubic: var(--ease-in-out-cubic);
+  --ease-in-out-quart: var(--ease-in-out-quart);
+  --ease-in-out-quint: var(--ease-in-out-quint);
+  --ease-in-out-expo: var(--ease-in-out-expo);
+  --ease-in-out-circ: var(--ease-in-out-circ);
+  --ease-gleasing: var(--ease-gleasing);
+}
+
+[data-theme="light"] {
+  --color-primary: #ffffff;
+  --color-secondary: #000000;
+  --color-contrast: #ff4d00;
+}
+
+[data-theme="dark"] {
+  --color-primary: #000000;
+  --color-secondary: #ffffff;
+  --color-contrast: #ff4d00;
+}
+
+@utility test-mono {
+  font-family: var(--geist-mono);
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 90%;
+
+  @variant desktop {
+    font-size: 24px;
+  }
+}
+
+@utility desktop-only {
+  @media (--mobile-only) {
+    display: none !important;
+  }
+}
+
+@utility mobile-only {
+  @media (--tablet) {
+    display: none !important;
+  }
+}
+
+@utility b-grid {
+  column-gap: var(--gap);
+  display: grid;
+  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
+}
+
+@utility b-layout-block {
+  margin-inline: auto;
+  width: calc(100% - 2 * var(--safe));
+}
+
+@utility b-layout-block-inner {
+  padding-inline: var(--safe);
+  width: 100%;
+}
+
+@utility b-layout-grid {
+  @apply b-layout-block b-grid;
+}
+
+@utility b-layout-grid-inner {
+  @apply b-layout-block-inner b-grid;
+}
+
+@custom-variant light (&:where([data-theme="light"], [data-theme="light"] *));
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));

package/src/templates/next-default/lib/utils/global-css.d.ts

@@ -0,0 +1 @@
+declare module "@/lib/styles/index.css";

package/src/templates/next-default/lib/utils/viewport.ts

@@ -25,9 +25,15 @@
  * - **Runtime calculations**: Use for canvas, WebGL, or dynamic sizing
  */
 
-import { breakpoints } from "@/lib/styles/config"
+const BREAKPOINTS = {
+  "desktop-large": 1920,
+  desktop: 1440,
+  "tablet-lg": 1024,
+  tablet: 768,
+  mobile: 640,
+} as const
 
-type ContextSize = keyof typeof breakpoints | number
+type ContextSize = keyof typeof BREAKPOINTS | number
 
 /**
  * Resolves a context size to a pixel value.
@@ -39,7 +45,7 @@ function resolveContext(context: ContextSize): number {
   if (typeof context === "number") {
     return context
   }
-  return breakpoints[context] ?? breakpoints.desktop
+  return BREAKPOINTS[context] ?? BREAKPOINTS.desktop
 }
 
 /**
@@ -50,8 +56,8 @@ function resolveContext(context: ContextSize): number {
  */
 function isContextIdentifier(
   value: unknown
-): value is keyof typeof breakpoints {
-  return typeof value === "string" && value in breakpoints
+): value is keyof typeof BREAKPOINTS {
+  return typeof value === "string" && value in BREAKPOINTS
 }
 
 /**

package/src/templates/next-default/next.config.ts

@@ -67,7 +67,6 @@ const nextConfig: NextConfig = {
       "three",
       "postprocessing",
       "lenis",
-      "zustand",
     ],
   },
   images: {

package/src/templates/next-default/package.json

@@ -7,40 +7,34 @@
   "scripts": {
     "analyze": "cross-env ANALYZE=true bun run build",
     "analyze:experimental": "next experimental-analyze",
-    "build": "bun run setup:styles && next build",
+    "build": "next build",
     "dev": "bun ./lib/scripts/dev.ts",
     "dev:https": "bun ./lib/scripts/dev.ts --https",
     "dev:inspect": "bun ./lib/scripts/dev.ts --inspect",
     "format": "biome format --write .",
-    "generate": "bun ./lib/scripts/generate.ts",
     "lighthouse": "bunx @unlighthouse/cli --site http://localhost:3000",
     "lint": "biome lint --max-diagnostics=200",
     "lint:fix": "biome lint --write --unsafe --max-diagnostics=200",
-    "setup:styles": "bun ./lib/styles/scripts/setup-styles.ts",
     "start": "next start",
-    "test": "bun test",
-    "test:setup": "bun test lib/scripts/setup-project.test.ts",
     "typecheck": "tsgo --noEmit",
     "typecheck:compare": "bun run typecheck:tsc && bun run typecheck",
     "typecheck:tsc": "tsc --noEmit --incremental false"
   },
   "dependencies": {
     "class-variance-authority": "^0.7.1",
-    "next": "16.1.6",
-    "react": "19.2.4",
-    "react-dom": "19.2.4",
+    "clsx": "^2.1.1",
+    "next": "^16",
+    "react": "^19",
+    "react-dom": "^19",
     "react-use": "^17.6.0",
     "tailwind-merge": "^3.4.0",
-    "zod": "^4.3.6",
-    "zustand": "^5.0.10"
+    "zod": "^4.3.6"
   },
   "devDependencies": {
     "@biomejs/biome": "2.3.14",
-    "@clack/prompts": "^0.11.0",
-    "@csstools/postcss-global-data": "^3.1.0",
-    "@next/bundle-analyzer": "16.1.6",
+    "@next/bundle-analyzer": "^16",
     "@svgr/webpack": "^8.1.0",
-    "@tailwindcss/postcss": "^4.1.18",
+    "@tailwindcss/postcss": "^4",
     "@types/bun": "^1.3.6",
     "@types/node": "^20.19.30",
     "@types/react": "^19.2.9",
@@ -48,10 +42,9 @@
     "@typescript/native-preview": "^7.0.0-dev.20260122.3",
     "babel-plugin-react-compiler": "1.0.0",
     "cross-env": "^10.1.0",
-    "postcss-functions": "^4.0.2",
     "postcss-preset-env": "^10.6.1",
-    "tailwindcss": "^4.1.18",
-    "typescript": "^5.9.3"
+    "tailwindcss": "^4",
+    "typescript": "^5"
   },
   "trustedDependencies": [
     "@biomejs/biome",