bsmnt 0.2.11 → 0.3.1

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

@@ -0,0 +1,71 @@
+{
+  "name": "next-pagebuilder",
+  "description": "Basement Next.js starter template",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "analyze": "cross-env ANALYZE=true bun run build",
+    "analyze:experimental": "next experimental-analyze",
+    "build": "next build",
+    "dev": "next dev",
+    "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",
+    "start": "next start",
+    "test": "bun test",
+    "typecheck": "tsgo --noEmit",
+    "typecheck:compare": "bun run typecheck:tsc && bun run typecheck",
+    "typecheck:tsc": "tsc --noEmit --incremental false",
+    "sanity:extract": "cd lib/integrations/sanity && bun --env-file ../../../.env.local sanity schema extract",
+    "sanity:typegen": "bun ./lib/scripts/sanity-typegen.ts",
+    "predev": "bun run sanity:typegen",
+    "prebuild": "bun run sanity:typegen"
+  },
+  "dependencies": {
+    "@phosphor-icons/react": "^2.1.10",
+    "@portabletext/types": "^4.0.2",
+    "@sanity/asset-utils": "^2.3.0",
+    "@sanity/image-url": "^2.0.3",
+    "@sanity/table": "^2.0.1",
+    "@sanity/vision": "^5.17.1",
+    "@sanity/visual-editing": "^5.3.1",
+    "class-variance-authority": "^0.7.1",
+    "next": "16.2.3",
+    "next-sanity": "^12.1.4",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "react-use": "^17.6.0",
+    "sanity": "^5.17.1",
+    "sanity-plugin-media": "^4.1.1",
+    "schema-dts": "^2.0.0",
+    "tailwind-merge": "^3.5.0",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.4.8",
+    "@clack/prompts": "^1.1.0",
+    "@csstools/postcss-global-data": "^4.0.0",
+    "@next/bundle-analyzer": "16.2.1",
+    "@svgr/webpack": "^8.1.0",
+    "@tailwindcss/postcss": "^4.2.2",
+    "@types/bun": "^1.3.11",
+    "@types/node": "^25.5.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@typescript/native-preview": "^7.0.0-dev.20260323.1",
+    "babel-plugin-react-compiler": "1.0.0",
+    "cross-env": "^10.1.0",
+    "postcss-functions": "^4.0.2",
+    "postcss-preset-env": "^11.2.0",
+    "tailwindcss": "^4.2.2",
+    "typescript": "^5.9.3"
+  },
+  "trustedDependencies": [
+    "@biomejs/biome",
+    "@tailwindcss/oxide",
+    "esbuild",
+    "sharp"
+  ]
+}

package/src/templates/next-pagebuilder/postcss.config.mjs

@@ -0,0 +1,39 @@
+/**
+ * PostCSS preset-env config
+ * @see Docs {@link https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/README.md#options}
+ * @see Features Flags {@link https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md}
+ * @type {import('postcss-preset-env').pluginOptions}
+ */
+const presetEnvConfig = {
+  autoprefixer: {
+    flexbox: "no-2009",
+  },
+  stage: 3,
+  features: {
+    "custom-properties": false,
+    "custom-media-queries": true,
+    "nesting-rules": true,
+  },
+}
+
+/**
+ * PostCSS global data config
+ * Makes sure the css module files have access to these context files
+ * @see {@link https://github.com/csstools/postcss-global-data?tab=readme-ov-file#options}
+ * @type {import('@csstools/postcss-global-data').pluginOptions}
+ */
+const globalDataConfig = {
+  files: ["./lib/styles/global.css"],
+}
+
+const postcssConfig = {
+  // NOTE: Order is important
+  plugins: {
+    "@tailwindcss/postcss": {},
+    "@csstools/postcss-global-data": globalDataConfig,
+    // NOTE: This has to be last config
+    "postcss-preset-env": presetEnvConfig,
+  },
+}
+
+export default postcssConfig

package/src/templates/next-pagebuilder/proxy.ts

@@ -0,0 +1,81 @@
+import type { NextRequest } from "next/server"
+import { NextResponse } from "next/server"
+import {
+  acceptHeaderRoutes,
+  ignoredPaths,
+  mdExtensionRoutes,
+} from "@/lib/integrations/sanity/markdown-proxy.config"
+
+export function proxy(request: NextRequest) {
+  const { pathname } = request.nextUrl
+  const acceptHeader = request.headers.get("accept") || ""
+
+  if (ignoredPaths.some((p) => pathname.startsWith(p))) {
+    return NextResponse.next()
+  }
+
+  if (pathname === "/" && acceptHeader.includes("text/markdown")) {
+    const url = request.nextUrl.clone()
+    url.pathname = "/api/index.md"
+    return NextResponse.rewrite(url)
+  }
+
+  // 1. Rewrite .md extension URLs to API routes
+  //    e.g. /about.md → /api/about.md
+  for (const route of mdExtensionRoutes) {
+    const match = route.regex.exec(pathname)
+    if (match) {
+      const slug = match[1]
+      const url = request.nextUrl.clone()
+      url.pathname = route.apiPath.replace("[slug]", slug!)
+      return NextResponse.rewrite(url)
+    }
+  }
+
+  // 2. Accept: text/markdown — rewrite to markdown API route
+  if (acceptHeader.includes("text/markdown")) {
+    for (const route of acceptHeaderRoutes) {
+      const match = route.regex.exec(pathname)
+      if (match) {
+        const slug = match[1]
+        const url = request.nextUrl.clone()
+        url.pathname = route.apiPath.replace("[slug]", slug!)
+        return NextResponse.rewrite(url)
+      }
+    }
+  }
+
+  // 3. Add Link header for markdown discoverability on HTML page requests
+  const response = NextResponse.next()
+
+  if (pathname === "/") {
+    response.headers.set(
+      "Link",
+      '</index.md>; rel="alternate"; type="text/markdown"'
+    )
+    response.headers.set("Vary", "Accept")
+    return response
+  }
+
+  for (const route of acceptHeaderRoutes) {
+    const match = route.regex.exec(pathname)
+    if (match) {
+      const slug = match[1]
+      const mdUrl = route.publicPath.replace("[slug]", slug!)
+      response.headers.set(
+        "Link",
+        `<${mdUrl}>; rel="alternate"; type="text/markdown"`
+      )
+      response.headers.set("Vary", "Accept")
+      break
+    }
+  }
+
+  return response
+}
+
+export const config = {
+  matcher: [
+    "/((?!_next/static|_next/image|favicon.ico|sitemap.xml|sitemap.md|robots.txt).*)",
+  ],
+}

package/src/templates/next-pagebuilder/svg.d.ts

@@ -0,0 +1,5 @@
+declare module "*.svg" {
+  import type { FC, SVGProps } from "react"
+  const content: FC<SVGProps<SVGSVGElement>>
+  export default content
+}

package/src/templates/next-pagebuilder/tsconfig.json

@@ -0,0 +1,38 @@
+{
+  "compilerOptions": {
+    "target": "ES2023",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "noImplicitOverride": true,
+    "exactOptionalPropertyTypes": true,
+    "useUnknownInCatchVariables": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitReturns": true,
+    "noUncheckedSideEffectImports": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noUncheckedIndexedAccess": true,
+    "plugins": [{ "name": "next" }],
+    "types": ["bun", "node"],
+    "paths": { "@/*": ["./*"] }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}

package/src/templates/next-webgl/.vscode/settings.json

@@ -82,7 +82,7 @@
     ["cn\\(([^)]*)\\)", "(?:'|\"|`)([^\"'`]*)(?:'|\"|`)"],
     ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
   ],
-  "tailwindCSS.experimental.configFile": "./lib/styles/css/tailwind.css",
+  "tailwindCSS.experimental.configFile": "./lib/styles/global.css",
   "tailwindCSS.includeLanguages": {
     "typescriptreact": "html"
   },

package/src/templates/next-webgl/README.md

@@ -35,17 +35,16 @@ lib/
   scripts/
   store/
   styles/
-    index.css
-    tokens.css
     global.css
-    fonts.ts
     cn.ts
   utils/
+    metadata.ts
+    portable-text-to-markdown.ts
+    json-ld.ts
 ```
 
 ## Styling
 
-- Import `@/lib/styles/index.css` once in `app/layout.tsx`.
-- Edit `lib/styles/tokens.css` for theme variables, breakpoints, and custom Tailwind utilities.
-- Edit `lib/styles/global.css` for reset rules and app-wide global styles.
-- `lib/styles/fonts.ts` handles font variables.
+- Import `@/lib/styles/global.css` once in `app/layout.tsx`.
+- `lib/styles/global.css` includes Tailwind utilities, theme tokens, and app-wide global styles.
+- `lib/styles/cn.ts` is the shared class merge helper.

package/src/templates/next-webgl/app/layout.tsx

@@ -1,10 +1,9 @@
 import type { Metadata, Viewport } from "next";
-import { Geist } from "next/font/google";
+import { Geist, Geist_Mono } from "next/font/google";
 import { type PropsWithChildren, Suspense } from "react";
 import { Link } from "@/components/ui/link";
-import { fontsVariable } from "@/lib/styles/fonts";
 import AppData from "@/package.json";
-import "@/lib/styles/index.css";
+import "@/lib/styles/global.css";
 import { cn } from "@/lib/styles/cn";
 import {
   JsonLd,
@@ -23,6 +22,20 @@ const geist = Geist({
   subsets: ["latin"],
 });
 
+const mono = Geist_Mono({
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--geist-mono",
+  fallback: [
+    "ui-monospace",
+    "SFMono-Regular",
+    "Consolas",
+    "Liberation Mono",
+    "Menlo",
+    "monospace",
+  ],
+});
+
 export const metadata: Metadata = {
   alternates: {
     canonical: "/",
@@ -86,7 +99,7 @@ export default async function Layout({ children }: PropsWithChildren) {
     <html
       lang="en"
       dir="ltr"
-      className={cn(fontsVariable, geist.className)}
+      className={cn(mono.variable, geist.className)}
       // NOTE: This is due to the data-theme attribute being set which causes hydration errors
       suppressHydrationWarning
     >

package/src/templates/next-webgl/biome.json

@@ -214,7 +214,7 @@
       }
     },
     {
-      "includes": ["lib/styles/tokens.css"],
+      "includes": ["lib/styles/global.css"],
       "linter": {
         "rules": {
           "suspicious": {

package/src/templates/next-webgl/css.d.ts

@@ -0,0 +1 @@
+declare module "*.css"

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

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

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

@@ -6,7 +6,7 @@ export function useMedia(mediaQuery: string, initialValue?: boolean) {
   useEffect(() => {
     if (typeof window === "undefined" || !("matchMedia" in window)) {
       console.warn("matchMedia is not supported by your current browser")
-      return
+      return undefined
     }
     const mediaQueryList = window.matchMedia(mediaQuery)
     const changeHandler = () => setIsVerified(!!mediaQueryList.matches)
@@ -23,6 +23,8 @@ export function useMedia(mediaQuery: string, initialValue?: boolean) {
         mediaQueryList.removeListener(changeHandler)
       }
     }
+
+    return undefined
   }, [mediaQuery])
 
   return isVerified

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

@@ -1,3 +1,185 @@
+@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

package/src/templates/next-webgl/lib/utils/json-ld.tsx

@@ -1,13 +1,8 @@
-import type {
-  Article,
-  BreadcrumbList,
-  Organization,
-  SearchAction,
-  Thing,
-  WebPage,
-  WebSite,
-  WithContext,
-} from "schema-dts";
+type JsonLdValue = {
+  "@context": "https://schema.org";
+  "@type": string;
+  [key: string]: unknown;
+};
 
 const APP_BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
 
@@ -25,10 +20,10 @@ function resolveUrl(value?: string) {
 
 /* -------------------------------- Component ------------------------------- */
 
-export function JsonLd<T extends Thing>({
+export function JsonLd<T extends JsonLdValue>({
   data,
 }: {
-  data: WithContext<T>;
+  data: T;
 }) {
   return (
     <script
@@ -52,7 +47,7 @@ interface WebSiteJsonLdOptions {
 
 export function generateWebSiteJsonLd(
   options: WebSiteJsonLdOptions
-): WithContext<WebSite> {
+): JsonLdValue {
   const { name, url, description, searchUrl } = options;
   const resolvedUrl = resolveUrl(url);
   const resolvedSearchUrl = resolveUrl(searchUrl);
@@ -68,7 +63,7 @@ export function generateWebSiteJsonLd(
         "@type": "SearchAction",
         target: resolvedSearchUrl,
         "query-input": "required name=search_term_string",
-      } as SearchAction & { "query-input": string },
+      },
     }),
   };
 }
@@ -83,7 +78,7 @@ interface OrganizationJsonLdOptions {
 
 export function generateOrganizationJsonLd(
   options: OrganizationJsonLdOptions
-): WithContext<Organization> {
+): JsonLdValue {
   const { name, url, logo, description, sameAs } = options;
   const resolvedUrl = resolveUrl(url);
   const resolvedLogo = resolveUrl(logo);
@@ -110,7 +105,7 @@ interface WebPageJsonLdOptions {
 
 export function generateWebPageJsonLd(
   options: WebPageJsonLdOptions
-): WithContext<WebPage> {
+): JsonLdValue {
   const { title, url, description, image, datePublished, dateModified } =
     options;
   const resolvedUrl = resolveUrl(url);
@@ -141,7 +136,7 @@ interface ArticleJsonLdOptions {
 
 export function generateArticleJsonLd(
   options: ArticleJsonLdOptions
-): WithContext<Article> {
+): JsonLdValue {
   const {
     title,
     url,
@@ -181,7 +176,7 @@ interface BreadcrumbItem {
 
 export function generateBreadcrumbJsonLd(
   items: BreadcrumbItem[]
-): WithContext<BreadcrumbList> {
+): JsonLdValue {
   return {
     "@context": "https://schema.org",
     "@type": "BreadcrumbList",