bsmnt 0.2.9 → 0.2.11

package/src/templates/next-webgl/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-webgl/lib/styles/index.css

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

package/src/templates/next-webgl/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-webgl/lib/utils/global-css.d.ts

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

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

@@ -0,0 +1,199 @@
+import type {
+  Article,
+  BreadcrumbList,
+  Organization,
+  SearchAction,
+  Thing,
+  WebPage,
+  WebSite,
+  WithContext,
+} from "schema-dts";
+
+const APP_BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
+
+function isAbsoluteUrl(value: string) {
+  return /^https?:\/\//.test(value);
+}
+
+function resolveUrl(value?: string) {
+  if (!value) return APP_BASE_URL;
+  if (isAbsoluteUrl(value)) return value;
+  if (!APP_BASE_URL) return undefined;
+
+  return new URL(value, APP_BASE_URL).toString();
+}
+
+/* -------------------------------- Component ------------------------------- */
+
+export function JsonLd<T extends Thing>({
+  data,
+}: {
+  data: WithContext<T>;
+}) {
+  return (
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{
+        __html: JSON.stringify(data).replace(/</g, "\\u003c"),
+      }}
+    />
+  );
+}
+
+/* -------------------------------- Generators ------------------------------ */
+
+interface WebSiteJsonLdOptions {
+  name: string;
+  url?: string;
+  description?: string;
+  /** URL to site-wide search (e.g. "/search?q={search_term_string}") */
+  searchUrl?: string;
+}
+
+export function generateWebSiteJsonLd(
+  options: WebSiteJsonLdOptions
+): WithContext<WebSite> {
+  const { name, url, description, searchUrl } = options;
+  const resolvedUrl = resolveUrl(url);
+  const resolvedSearchUrl = resolveUrl(searchUrl);
+
+  return {
+    "@context": "https://schema.org",
+    "@type": "WebSite",
+    name,
+    ...(resolvedUrl && { url: resolvedUrl }),
+    ...(description && { description }),
+    ...(resolvedSearchUrl && {
+      potentialAction: {
+        "@type": "SearchAction",
+        target: resolvedSearchUrl,
+        "query-input": "required name=search_term_string",
+      } as SearchAction & { "query-input": string },
+    }),
+  };
+}
+
+interface OrganizationJsonLdOptions {
+  name: string;
+  url?: string;
+  logo?: string;
+  description?: string;
+  sameAs?: string[];
+}
+
+export function generateOrganizationJsonLd(
+  options: OrganizationJsonLdOptions
+): WithContext<Organization> {
+  const { name, url, logo, description, sameAs } = options;
+  const resolvedUrl = resolveUrl(url);
+  const resolvedLogo = resolveUrl(logo);
+
+  return {
+    "@context": "https://schema.org",
+    "@type": "Organization",
+    name,
+    ...(resolvedUrl && { url: resolvedUrl }),
+    ...(resolvedLogo && { logo: resolvedLogo }),
+    ...(description && { description }),
+    ...(sameAs && { sameAs }),
+  };
+}
+
+interface WebPageJsonLdOptions {
+  title: string;
+  url?: string;
+  description?: string;
+  image?: string;
+  datePublished?: string;
+  dateModified?: string;
+}
+
+export function generateWebPageJsonLd(
+  options: WebPageJsonLdOptions
+): WithContext<WebPage> {
+  const { title, url, description, image, datePublished, dateModified } =
+    options;
+  const resolvedUrl = resolveUrl(url);
+  const resolvedImage = resolveUrl(image);
+
+  return {
+    "@context": "https://schema.org",
+    "@type": "WebPage",
+    name: title,
+    ...(resolvedUrl && { url: resolvedUrl }),
+    ...(description && { description }),
+    ...(resolvedImage && { image: resolvedImage }),
+    ...(datePublished && { datePublished }),
+    ...(dateModified && { dateModified }),
+  };
+}
+
+interface ArticleJsonLdOptions {
+  title: string;
+  url?: string;
+  description?: string;
+  image?: string;
+  datePublished?: string;
+  dateModified?: string;
+  authorName?: string;
+  authorUrl?: string;
+}
+
+export function generateArticleJsonLd(
+  options: ArticleJsonLdOptions
+): WithContext<Article> {
+  const {
+    title,
+    url,
+    description,
+    image,
+    datePublished,
+    dateModified,
+    authorName,
+    authorUrl,
+  } = options;
+  const resolvedUrl = resolveUrl(url);
+  const resolvedImage = resolveUrl(image);
+
+  return {
+    "@context": "https://schema.org",
+    "@type": "Article",
+    headline: title,
+    ...(resolvedUrl && { url: resolvedUrl }),
+    ...(description && { description }),
+    ...(resolvedImage && { image: resolvedImage }),
+    ...(datePublished && { datePublished }),
+    ...(dateModified && { dateModified }),
+    ...(authorName && {
+      author: {
+        "@type": "Person",
+        name: authorName,
+        ...(authorUrl && { url: authorUrl }),
+      },
+    }),
+  };
+}
+
+interface BreadcrumbItem {
+  name: string;
+  url: string;
+}
+
+export function generateBreadcrumbJsonLd(
+  items: BreadcrumbItem[]
+): WithContext<BreadcrumbList> {
+  return {
+    "@context": "https://schema.org",
+    "@type": "BreadcrumbList",
+    itemListElement: items.map((item, index) => {
+      const resolvedItemUrl = resolveUrl(item.url);
+
+      return {
+        "@type": "ListItem",
+        position: index + 1,
+        name: item.name,
+        ...(resolvedItemUrl && { item: resolvedItemUrl }),
+      };
+    }),
+  };
+}

package/src/templates/next-webgl/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-webgl/next.config.ts

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

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

@@ -7,45 +7,36 @@
   "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": {
-    "@radix-ui/react-navigation-menu": "^1.2.5",
     "@react-three/drei": "^11.0.0-alpha.4",
     "@react-three/fiber": "10.0.0-alpha.2",
     "class-variance-authority": "^0.7.1",
-    "leva": "^0.9.35",
-    "next": "16.1.6",
-    "react": "19.2.4",
-    "react-dom": "19.2.4",
-    "react-use": "^17.6.0",
+    "clsx": "^2.1.1",
+    "next": "^16",
+    "react": "^19",
+    "react-dom": "^19",
     "tailwind-merge": "^3.4.0",
     "three": "^0.182.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",
@@ -54,10 +45,10 @@
     "@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"
+    "schema-dts": "^2.0.0",
+    "tailwindcss": "^4",
+    "typescript": "^5"
   },
   "trustedDependencies": [
     "@biomejs/biome",