bsmnt 0.3.0 → 0.3.2

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

@@ -1,246 +0,0 @@
-/**
- * String & Object Utilities
- *
- * Helper functions for string manipulation, object operations, and refs.
- */
-
-import type { Ref } from "react"
-
-// =============================================================================
-// STRING UTILITIES
-// =============================================================================
-
-/**
- * Converts text to URL-friendly slug format.
- *
- * @param text - Text to convert (must have toString method)
- * @returns URL-safe slug string
- *
- * @example
- * ```ts
- * slugify('Hello World!') // 'hello-world'
- * slugify('Café & Restaurant') // 'cafe-restaurant'
- * ```
- */
-export function slugify(text: { toString: () => string }) {
-  return text
-    .toString()
-    .normalize("NFKD")
-    .toLowerCase()
-    .trim()
-    .replace(/\s+/g, "-")
-    .replace(/[^\w-]+/g, "")
-    .replace(/--+/g, "-")
-}
-
-/**
- * Converts first character to lowercase (camelCase format).
- *
- * @param inputString - String to convert
- * @returns String with lowercase first character
- *
- * @example
- * ```ts
- * convertToCamelCase('HelloWorld') // 'helloWorld'
- * ```
- */
-export function convertToCamelCase(inputString: string) {
-  return inputString.charAt(0).toLowerCase() + inputString.slice(1)
-}
-
-/**
- * Capitalizes the first letter of a string.
- *
- * @param inputString - String to capitalize
- * @returns String with capitalized first letter
- *
- * @example
- * ```ts
- * capitalizeFirstLetter('hello') // 'Hello'
- * capitalizeFirstLetter('world') // 'World'
- * ```
- */
-export function capitalizeFirstLetter(inputString: string) {
-  return inputString.charAt(0).toUpperCase() + inputString.slice(1)
-}
-
-/**
- * Formats a number as a two-digit string (padding with zero).
- *
- * @param number - Number to format
- * @returns Two-digit string representation
- *
- * @example
- * ```ts
- * twoDigits(5)  // '05'
- * twoDigits(23) // '23'
- * ```
- */
-export function twoDigits(number: number) {
-  return number > 9 ? `${number}` : `0${number}`
-}
-
-/**
- * Adds commas as thousands separators to numbers.
- *
- * @param x - Number to format (must have toString method)
- * @returns String with comma separators
- *
- * @example
- * ```ts
- * numberWithCommas(1234)     // '1,234'
- * numberWithCommas(1234567)  // '1,234,567'
- * ```
- */
-export function numberWithCommas(x: { toString: () => string }) {
-  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
-}
-
-// =============================================================================
-// ARRAY & OBJECT UTILITIES
-// =============================================================================
-
-export function checkIsArray<T>(value: T): T extends unknown[] ? T[0] : T {
-  return (Array.isArray(value) ? value[0] : value) as T extends unknown[]
-    ? T[0]
-    : T
-}
-
-/**
- * Checks if an object is empty (has no enumerable properties).
- *
- * @param obj - Object to check
- * @returns True if object is empty or null/undefined
- *
- * @example
- * ```ts
- * isEmptyObject({})        // true
- * isEmptyObject({ a: 1 })  // false
- * isEmptyObject(null)      // true
- * ```
- */
-export function isEmptyObject(obj: Record<string, unknown>) {
-  if (!obj) return true
-  return Object.keys(obj).length === 0
-}
-
-/**
- * Checks if an array is empty or if the input is not an array.
- *
- * @param arr - Array or value to check
- * @returns True if empty array or not an array
- *
- * @example
- * ```ts
- * isEmptyArray([])      // true
- * isEmptyArray([1, 2])  // false
- * isEmptyArray('test')  // true (not an array)
- * isEmptyArray(null)    // true
- * ```
- */
-export function isEmptyArray(arr: string | unknown[]) {
-  if (!arr) return true
-  return Array.isArray(arr) && arr.length === 0
-}
-
-export function arraytoObject(array: Record<string, unknown>[]) {
-  return array.reduce((acc: Record<string, unknown>, currentObj) => {
-    const key = Object.keys(currentObj)[0]
-    if (key !== undefined) {
-      acc[key] = currentObj[key]
-    }
-    return acc
-  }, {})
-}
-
-export function shortenObjectKeys(
-  obj: Record<string, unknown>,
-  keyword: string
-) {
-  const regex = new RegExp(`[^]+${keyword}(.*)`)
-
-  for (const key in obj) {
-    const match = key.match(regex)
-
-    if (match?.[1]) {
-      const newKey = convertToCamelCase(match[1])
-      obj[newKey] = obj[key]
-      delete obj[key]
-    }
-  }
-
-  return obj
-}
-
-export function filterObjectKeys(
-  obj: { [x: string]: unknown },
-  keyword: string
-) {
-  const newObj: { [x: string]: unknown } = {}
-
-  for (const key in obj) {
-    const match = key.includes(keyword)
-
-    if (match) {
-      newObj[key] = obj[key]
-    }
-  }
-
-  return newObj
-}
-
-export function iterableObject(
-  obj: { [s: string]: unknown } | ArrayLike<unknown>
-) {
-  return Object.entries(obj).map(([, value]) => {
-    return value
-  })
-}
-
-// =============================================================================
-// REF UTILITIES
-// =============================================================================
-
-/**
- * Merges multiple React refs into a single ref callback.
- *
- * Useful when you need to assign multiple refs to the same element,
- * such as combining a local ref with a forwarded ref.
- *
- * @param refs - Refs to merge (functions and ref objects supported)
- * @returns A ref callback that updates all provided refs
- *
- * @example
- * ```tsx
- * // Component that needs both local and forwarded ref
- * function MyComponent({ ref }: { ref: React.Ref<HTMLDivElement> }) {
- *   const localRef = useRef<HTMLDivElement>(null)
- *   const mergedRef = mergeRefs(localRef, ref)
- *
- *   return <div ref={mergedRef}>Content</div>
- * }
- *
- * // Forward ref pattern
- * const ForwardedComponent = forwardRef(MyComponent)
- * ```
- */
-export function mergeRefs<T>(...refs: (Ref<T> | undefined)[]): Ref<T> {
-  return (value) => {
-    const cleanups = refs.reduce<VoidFunction[]>((accumulator, ref) => {
-      if (typeof ref === "function") {
-        const cleanup = ref(value)
-        if (typeof cleanup === "function") {
-          accumulator.push(cleanup)
-        }
-      } else if (ref) {
-        ref.current = value
-      }
-
-      return accumulator
-    }, [])
-
-    return () => {
-      for (const cleanup of cleanups) cleanup()
-    }
-  }
-}

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

@@ -1,15 +0,0 @@
-// Type augmentations and module declarations
-
-// React CSS custom properties support
-import "react"
-
-declare module "react" {
-  interface CSSProperties {
-    [key: `--${string}`]: string | number
-  }
-}
-
-// Global window extensions
-declare global {
-  interface Window {}
-}

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

@@ -1,199 +0,0 @@
-/**
- * Viewport Utilities
- *
- * Convert pixel values to viewport-relative sizes and relative units.
- * Mirrors the SASS functions for consistent responsive scaling.
- *
- * @example
- * ```ts
- * import { tovw, torem, toem } from '@/utils/viewport'
- *
- * // Convert to viewport width units
- * const paddingX = tovw(16, 24) // "1.5625vw" with a minimum of 24px
- * const fontSize = tovw(16, 'mobile') // "4.27vw" (no undefined needed!)
- * const width = tovw(100, 50, 'desktop') // "max(50px, 6.94vw)"
- *
- * // Convert to rem/em
- * const spacing = torem(24) // "1.5rem"
- * const padding = toem(16, 14) // "1.14em"
- * ```
- *
- * ## When to Use
- *
- * - **CSS**: Prefer the PostCSS functions `tovw()`, `torem()`, and `toem()`
- * - **JavaScript/TypeScript**: Use these for dynamic calculations or inline styles
- * - **Runtime calculations**: Use for canvas, WebGL, or dynamic sizing
- */
-
-const BREAKPOINTS = {
-  "desktop-large": 1920,
-  desktop: 1440,
-  "tablet-lg": 1024,
-  tablet: 768,
-  mobile: 640,
-} as const
-
-type ContextSize = keyof typeof BREAKPOINTS | number
-
-/**
- * Resolves a context size to a pixel value.
- *
- * @param context - Context identifier or pixel value
- * @returns Pixel value
- */
-function resolveContext(context: ContextSize): number {
-  if (typeof context === "number") {
-    return context
-  }
-  return BREAKPOINTS[context] ?? BREAKPOINTS.desktop
-}
-
-/**
- * Checks if a value is a context identifier (breakpoint key).
- *
- * @param value - Value to check
- * @returns True if value is a breakpoint key
- */
-function isContextIdentifier(
-  value: unknown
-): value is keyof typeof BREAKPOINTS {
-  return typeof value === "string" && value in BREAKPOINTS
-}
-
-/**
- * Rounds a number to a maximum of 4 decimal places, removing trailing zeros.
- *
- * @param value - Number to round
- * @returns Rounded number as string without trailing zeros
- */
-function roundToMaxDecimals(value: number): string {
-  // Round to 4 decimal places
-  const rounded = Math.round(value * 10000) / 10000
-  // Convert to string and remove trailing zeros only after decimal point
-  return rounded
-    .toString()
-    .replace(/\.0+$/, "")
-    .replace(/(\.\d*?)0+$/, "$1")
-}
-
-// Function overloads for tovw
-export function tovw(target: number): string
-export function tovw(target: number, min: number): string
-export function tovw(target: number, context: ContextSize): string
-export function tovw(target: number, min: number, context: ContextSize): string
-/**
- * Converts a pixel value to viewport width units (vw).
- * Optionally applies a minimum value using CSS max().
- *
- * Supports flexible parameter patterns:
- * - `tovw(target)` - Uses default desktop context
- * - `tovw(target, min)` - Sets minimum value
- * - `tovw(target, context)` - Sets context (auto-detected if string identifier)
- * - `tovw(target, min, context)` - Sets both min and context
- *
- * @param target - Target pixel value to convert
- * @param minOrContext - Optional minimum pixel value OR context identifier
- * @param context - Context size identifier (if min was provided)
- * @returns CSS string with vw units (e.g., "6.94vw" or "max(50px, 6.94vw)")
- *
- * @example
- * ```ts
- * // Basic conversion
- * tovw(100) // "6.94vw"
- * tovw(16, 'mobile') // "4.27vw" (no undefined needed!)
- *
- * // With minimum value
- * tovw(100, 50) // "max(50px, 6.94vw)"
- * tovw(100, 50, 'mobile') // "max(50px, 6.94vw)" with mobile context
- *
- * // Custom context
- * tovw(100, 1920) // "5.21vw"
- *
- * // Handles zero
- * tovw(0) // "0"
- * ```
- */
-export function tovw(
-  target: number,
-  minOrContext?: number | ContextSize,
-  context?: ContextSize
-): string {
-  if (target === 0) {
-    return "0"
-  }
-
-  let min: number | undefined
-  let resolvedContext: ContextSize = "desktop"
-
-  if (minOrContext !== undefined) {
-    if (isContextIdentifier(minOrContext)) {
-      // Second param is context
-      resolvedContext = minOrContext
-      if (context !== undefined) {
-        resolvedContext = context
-      }
-    } else if (typeof minOrContext === "number") {
-      // Second param is min value
-      min = minOrContext
-      if (context !== undefined) {
-        resolvedContext = context
-      }
-    }
-  } else if (context !== undefined) {
-    // Only context provided as third param (legacy support)
-    resolvedContext = context
-  }
-
-  const contextSize = resolveContext(resolvedContext)
-  const vwValue = (target / contextSize) * 100
-
-  if (min !== undefined) {
-    return `max(${min}px, ${roundToMaxDecimals(vwValue)}vw)`
-  }
-
-  return `${roundToMaxDecimals(vwValue)}vw`
-}
-
-/**
- * Converts a pixel value to rem units.
- *
- * @param target - Target pixel value to convert
- * @param context - Base font size in pixels (default: 16)
- * @returns CSS string with rem units (e.g., "1.5rem")
- *
- * @example
- * ```ts
- * torem(24) // "1.5rem" (24 / 16)
- * torem(18, 14) // "1.29rem" (18 / 14)
- * torem(0) // "0"
- * ```
- */
-export function torem(target: number, context = 16): string {
-  if (target === 0) {
-    return "0"
-  }
-
-  return `${roundToMaxDecimals(target / context)}rem`
-}
-
-/**
- * Converts a pixel value to em units.
- *
- * @param target - Target pixel value to convert
- * @param context - Context size in pixels (required)
- * @returns CSS string with em units (e.g., "1.5em")
- *
- * @example
- * ```ts
- * toem(24, 16) // "1.5em" (24 / 16)
- * toem(18, 14) // "1.29em" (18 / 14)
- * toem(0, 16) // "0"
- * ```
- */
-export function toem(target: number, context: number): string {
-  if (target === 0) {
-    return "0"
-  }
-
-  return `${roundToMaxDecimals(target / context)}em`
-}

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

@@ -1,32 +0,0 @@
-/**
- * Cross-platform Next.js dev launcher.
- */
-
-import { bunExecutable, colorEnv } from "./utils"
-
-const isHttps = process.argv.includes("--https")
-const isInspect = process.argv.includes("--inspect")
-
-// Build next dev command args
-const nextDevArgs = [bunExecutable, "next", "dev"]
-if (isHttps) nextDevArgs.push("--experimental-https")
-if (isInspect) nextDevArgs.push("--inspect")
-
-const devEnv = colorEnv()
-
-const nextDevProcess = Bun.spawn(nextDevArgs, {
-  stdout: "inherit",
-  stderr: "inherit",
-  env: devEnv,
-})
-
-const cleanup = () => {
-  nextDevProcess.kill()
-  process.exit(0)
-}
-
-process.on("SIGINT", cleanup)
-process.on("SIGTERM", cleanup)
-
-await nextDevProcess.exited
-cleanup()

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

@@ -1,13 +0,0 @@
-# Styles
-
-Minimal Tailwind setup for the starter.
-
-## Files
-
-| File | Purpose |
-|------|---------|
-| `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-experiments/lib/styles/fonts.ts

@@ -1,20 +0,0 @@
-import { Geist_Mono } from "next/font/google";
-
-const mono = Geist_Mono({
-  subsets: ["latin"],
-  display: "swap",
-  variable: "--geist-mono",
-  fallback: [
-    "ui-monospace",
-    "SFMono-Regular",
-    "Consolas",
-    "Liberation Mono",
-    "Menlo",
-    "monospace",
-  ],
-});
-
-const fonts = [mono];
-const fontsVariable = fonts.map((font) => font.variable).join(" ");
-
-export { fontsVariable };

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

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

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

@@ -1,179 +0,0 @@
-@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"] *));