bsmnt 0.4.0 → 0.4.2

package/src/templates/next-experiments/components/ui/image/index.tsx

@@ -4,13 +4,13 @@
  * Next.js Image wrapper with optimized defaults and error handling.
  * Always use this component instead of next/image directly.
  */
-"use client";
+"use client"
 
-import cn from "clsx";
-import NextImage, { type ImageProps as NextImageProps } from "next/image";
-import type { CSSProperties, Ref } from "react";
+import cn from "clsx"
+import NextImage, { type ImageProps as NextImageProps } from "next/image"
+import type { CSSProperties, Ref } from "react"
 
-const DESKTOP_BREAKPOINT = 1440;
+const DESKTOP_BREAKPOINT = 1440
 
 /**
  * Enhanced Image component props extending Next.js Image.
@@ -20,26 +20,26 @@ const DESKTOP_BREAKPOINT = 1440;
  */
 export type ImageProps = Omit<NextImageProps, "objectFit" | "alt"> & {
   /** CSS object-fit property for image positioning */
-  objectFit?: CSSProperties["objectFit"];
+  objectFit?: CSSProperties["objectFit"]
   /** Display as block element (adds display: block) */
-  block?: boolean;
+  block?: boolean
   /** Size on mobile devices (e.g., "100vw", "50vw") */
-  mobileSize?: `${number}vw`;
+  mobileSize?: `${number}vw`
   /** Size on desktop devices (e.g., "33vw", "25vw") */
-  desktopSize?: `${number}vw`;
+  desktopSize?: `${number}vw`
   /** Ref for accessing the underlying img element */
-  ref?: Ref<HTMLImageElement>;
+  ref?: Ref<HTMLImageElement>
   /** Alt text for accessibility (required for meaningful images) */
-  alt?: string;
+  alt?: string
   /** Aspect ratio for automatic placeholder and layout stability */
-  aspectRatio?: number;
-};
+  aspectRatio?: number
+}
 
 // Memoize helper functions to avoid recreation
 const toBase64 = (str: string) =>
   typeof window === "undefined"
     ? Buffer.from(str).toString("base64")
-    : window.btoa(str);
+    : window.btoa(str)
 
 // Helper to generate blur placeholder with transparent background by default
 const generateShimmer = (w: number, h: number) => `
@@ -54,7 +54,7 @@ const generateShimmer = (w: number, h: number) => `
     <rect width="${w}" height="${h}" fill="rgba(0,0,0,0)" />
     <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
     <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
-  </svg>`;
+  </svg>`
 
 // Helper to determine if blur placeholder should be used
 const shouldUseBlurPlaceholder = (
@@ -62,10 +62,10 @@ const shouldUseBlurPlaceholder = (
   placeholder: string,
   blurDataURL: string | undefined
 ): boolean => {
-  if (!src) return false;
-  const isSvg = typeof src === "string" && src.includes(".svg");
-  return !isSvg && placeholder === "blur" && !blurDataURL;
-};
+  if (!src) return false
+  const isSvg = typeof src === "string" && src.includes(".svg")
+  return !isSvg && placeholder === "blur" && !blurDataURL
+}
 
 // Helper to generate blur data URL
 const generateBlurDataURL = (
@@ -73,11 +73,11 @@ const generateBlurDataURL = (
   aspectRatio: number | undefined,
   existingBlurDataURL: string | undefined
 ): string | undefined => {
-  if (!(shouldUse && aspectRatio)) return existingBlurDataURL;
+  if (!(shouldUse && aspectRatio)) return existingBlurDataURL
 
-  const shimmerSvg = generateShimmer(700, Math.round(700 / aspectRatio));
-  return `data:image/svg+xml;base64,${toBase64(shimmerSvg)}`;
-};
+  const shimmerSvg = generateShimmer(700, Math.round(700 / aspectRatio))
+  return `data:image/svg+xml;base64,${toBase64(shimmerSvg)}`
+}
 
 // Helper to determine final placeholder value
 const getFinalPlaceholder = (
@@ -89,11 +89,11 @@ const getFinalPlaceholder = (
   if (!shouldUse) {
     return originalPlaceholder === "blur" && !blurDataURL
       ? "empty"
-      : originalPlaceholder;
+      : originalPlaceholder
   }
 
-  return aspectRatio || blurDataURL ? "blur" : "empty";
-};
+  return aspectRatio || blurDataURL ? "blur" : "empty"
+}
 
 /**
  * Enhanced Image component with responsive sizing and automatic optimizations.
@@ -168,29 +168,29 @@ export function Image({
   // Generate responsive sizes if not provided
   const finalSizes =
     sizes ||
-    `(max-width: ${DESKTOP_BREAKPOINT}px) ${mobileSize}, ${desktopSize}`;
+    `(max-width: ${DESKTOP_BREAKPOINT}px) ${mobileSize}, ${desktopSize}`
 
   // Early return after hooks
-  if (!src) return null;
+  if (!src) return null
 
   // Determine SVG status and placeholder logic
-  const isSvg = typeof src === "string" && src.includes(".svg");
+  const isSvg = typeof src === "string" && src.includes(".svg")
   const shouldUsePlaceholder = shouldUseBlurPlaceholder(
     src,
     placeholder,
     props.blurDataURL
-  );
+  )
   const blurDataURL = generateBlurDataURL(
     shouldUsePlaceholder,
     aspectRatio,
     props.blurDataURL
-  );
+  )
   const finalPlaceholder = getFinalPlaceholder(
     shouldUsePlaceholder,
     aspectRatio,
     props.blurDataURL,
     placeholder
-  );
+  )
 
   return (
     <NextImage
@@ -215,5 +215,5 @@ export function Image({
       {...(blurDataURL && { blurDataURL })}
       {...props}
     />
-  );
+  )
 }

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

@@ -7,8 +7,12 @@ Non-UI code: hooks, integrations, styles, and utilities.
 ## Quick Imports
 
 ```tsx
-import { generatePageMetadata } from '@/lib/utils/metadata'
-import { createJsonLd, serializeJsonLd } from '@/lib/utils/json-ld'
+// Utilities - explicit imports for better tree-shaking
+import { clamp, lerp } from '@/lib/utils/math'
+import { slugify } from '@/lib/utils/strings'
+
+// Styles
+import { colors, themes, breakpoints } from '@/lib/styles/config'
 ```
 
 ## Directories
@@ -16,8 +20,8 @@ import { createJsonLd, serializeJsonLd } from '@/lib/utils/json-ld'
 | Directory | Purpose | Optional? |
 |-----------|---------|-----------|
 | [hooks/](hooks/README.md) | React hooks + Zustand store | ❌ Core |
-| `styles/` | Global styles and class utilities | ❌ Core |
-| `utils/` | Metadata and content serialization helpers | ❌ Core |
+| [styles/](styles/README.md) | CSS & Tailwind config | ❌ Core |
+| [utils/](utils/README.md) | Pure utility functions | ❌ Core |
 
 ## Scripts
 

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

@@ -1,12 +1,14 @@
 import { useEffect, useState } from "react"
 
 export function useMedia(mediaQuery: string, initialValue?: boolean) {
-  const [isVerified, setIsVerified] = useState<boolean | undefined>(initialValue)
+  const [isVerified, setIsVerified] = useState<boolean | undefined>(
+    initialValue
+  )
 
   useEffect(() => {
     if (typeof window === "undefined" || !("matchMedia" in window)) {
       console.warn("matchMedia is not supported by your current browser")
-      return undefined
+      return
     }
     const mediaQueryList = window.matchMedia(mediaQuery)
     const changeHandler = () => setIsVerified(!!mediaQueryList.matches)
@@ -17,7 +19,8 @@ export function useMedia(mediaQuery: string, initialValue?: boolean) {
       return () => {
         mediaQueryList.removeEventListener("change", changeHandler)
       }
-    } else if (typeof mediaQueryList.addListener === "function") {
+    }
+    if (typeof mediaQueryList.addListener === "function") {
       mediaQueryList.addListener(changeHandler)
       return () => {
         mediaQueryList.removeListener(changeHandler)

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

@@ -0,0 +1,32 @@
+/**
+ * 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

@@ -0,0 +1,13 @@
+# 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

@@ -0,0 +1,20 @@
+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/global.css

@@ -1,205 +1,23 @@
-@import "tailwindcss/utilities.css";
-
-@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"] *));
-
 /***
     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 *)
-  ) {
+  :not(
+    html,
+    iframe,
+    canvas,
+    img,
+    svg,
+    video,
+    audio,
+    dialog,
+    vercel-live-feedback,
+    nextjs-portal,
+    :where(select, option)
+  ):not(svg *, symbol *)
+) {
   all: unset;
   display: revert;
 }
@@ -375,6 +193,8 @@ button {
 
 html.screenshot {
   *:not(:has(canvas), canvas, :has(#orchestra), #orchestra, #orchestra *) {
+    /* biome-ignore lint/complexity/noImportantStyles: needs to override any inline
+   opacity for screenshot mode */
     opacity: 0 !important;
   }
 }

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

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

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

@@ -0,0 +1,182 @@
+@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) {
+    /* biome-ignore lint/complexity/noImportantStyles: utility class must override inline/component styles */
+    display: none !important;
+  }
+}
+
+@utility mobile-only {
+  @media (--tablet) {
+    /* biome-ignore lint/complexity/noImportantStyles: utility class must override inline/component styles */
+    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"] *));