glashjs 0.13.5 → 0.14.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glashjs",
-  "version": "0.13.5",
+  "version": "0.14.1",
   "description": "glashjs — The Postgres-native full-stack framework for builders who want to ship without DevOps. Framework, hosting, database, auth, and deploy in one GlashDB-native runtime.",
   "type": "module",
   "bin": {
@@ -21,7 +21,8 @@
     "./image": "./src/components/image.mjs",
     "./video": "./src/components/video.mjs",
     "./link": "./src/components/link.mjs",
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./i18n": "./src/i18n.mjs"
   },
   "files": [
     "bin",

package/src/assets/animated-favicon.mjs

@@ -1,8 +1,7 @@
 // glashjs animated favicon
 // ---------------------------------------------------------------------------
-// Ships an animated favicon with every build. Two reliable modes:
-//   - animated SVG (SMIL)  -> set once; browsers that support it animate the
-//                             tab icon natively (the default glash mark).
+// Ships an optional animated/favicon runtime with every build. Two reliable modes:
+//   - SVG                  -> set once; the default is the official glash mark.
 //   - frame cycling        -> a tiny runtime swaps the <link rel=icon> href
 //                             across frames on an interval. Works everywhere,
 //                             and pauses while the tab is hidden (no wasted CPU).
@@ -47,7 +46,7 @@ if (CONFIG.auto) startGlashFavicon();
 /**
  * Resolve + emit the animated favicon for a build.
  * cfg.animatedFavicon may be:
- *   true                       -> the bundled default glash animated mark
+ *   true                       -> the bundled default glash mark
  *   "<path>"                   -> a project animated SVG/GIF
  *   { frames:[...], fps, auto } -> frame-cycling animation
  */
@@ -59,14 +58,14 @@ export async function generateAnimatedFavicon(outDir, cfg, root, log = () => {})
 
   if (setting === true || typeof setting === 'string') {
     const src = setting === true
-      ? fileURLToPath(new URL('../../templates/favicon-animated.svg', import.meta.url))
+      ? fileURLToPath(new URL('../../templates/glash_favicon.svg', import.meta.url))
       : path.resolve(root, setting);
     const out = 'favicon-animated' + path.extname(src);
     try {
       await fs.copyFile(src, path.join(outDir, out));
     } catch {
-      log(`  ! animated favicon source not found (${setting}) — using bundled default`);
-      await fs.copyFile(fileURLToPath(new URL('../../templates/favicon-animated.svg', import.meta.url)), path.join(outDir, 'favicon-animated.svg'));
+      log(`  ! animated favicon source not found (${setting}) — using bundled glash_favicon.svg`);
+      await fs.copyFile(fileURLToPath(new URL('../../templates/glash_favicon.svg', import.meta.url)), path.join(outDir, 'favicon-animated.svg'));
       baked.animated = '/favicon-animated.svg';
     }
     baked.animated = baked.animated || '/' + out;

package/src/build.mjs

@@ -115,7 +115,7 @@ export async function build({ root = process.cwd(), log = console.log } = {}) {
   log(`  saved         ${t.savedPercent}%  (${kb(t.originalBytes - t.optimizedBytes)})`);
   log(`  routes        ${routesBuilt.compiled} JSX route(s) precompiled (no runtime esbuild in prod)`);
   log(`  offline       ${cfg.offline ? `${offline.precached} files precached (works offline after first visit)` : 'disabled'}`);
-  log(`  favicon       static glashdb logo${animated.enabled ? ' + animated (glash-favicon.mjs)' : ''}`);
+  log(`  favicon       glash_favicon.svg${animated.enabled ? ' + animated (glash-favicon.mjs)' : ''}`);
   log(`  version       ${version}`);
   log(`  security      strict CSP + ${Object.keys(securityHeaders(cfg.security)).length} headers\n`);
 
@@ -126,7 +126,7 @@ export async function build({ root = process.cwd(), log = console.log } = {}) {
 // framework. Try the configured path first, then fall back to that bundled logo
 // so the glashdb favicon shows out-of-the-box even before any override.
 async function copyFavicon(cfg, root, outDir, log) {
-  const bundled = path.resolve(fileURLToPath(new URL('../templates/favicon.svg', import.meta.url)));
+  const bundled = path.resolve(fileURLToPath(new URL('../templates/glash_favicon.svg', import.meta.url)));
   const candidates = [path.resolve(root, cfg.favicon), bundled];
   for (const src of candidates) {
     try {
@@ -134,7 +134,7 @@ async function copyFavicon(cfg, root, outDir, log) {
       return;
     } catch { /* try next */ }
   }
-  log(`  ! favicon not found (looked in ${cfg.favicon}, bundled glashdb logo) — preview favicon will be missing`);
+  log(`  ! favicon not found (looked in ${cfg.favicon}, bundled glash_favicon.svg) — preview favicon will be missing`);
 }
 
 function kb(bytes) {

package/src/config.mjs

@@ -11,11 +11,11 @@ export const DEFAULT_CONFIG = {
   shortName: undefined,
   // The preview favicon defaults to the official glashdb logo shipped with the
   // framework; override with your own path relative to the project root.
-  favicon: 'node_modules/glashjs/templates/favicon.svg',
+  favicon: 'node_modules/glashjs/templates/glash_favicon.svg',
   // Animated favicon: true = bundled animated glash mark, a path to your own
   // animated SVG/GIF, or { frames: ['/f0.svg', ...], fps: 8 } to cycle frames.
   // false disables it. Emits `glash-favicon.mjs` — call startGlashFavicon() once.
-  animatedFavicon: true,
+  animatedFavicon: false,
   publicDir: 'public',
   // File-based routes (pages + api/) served by `glash dev` / `glash serve`.
   routesDir: 'routes',

package/src/create.mjs

@@ -42,6 +42,8 @@ async function collectAnswers(options, rl) {
   const auth = boolAnswer(options.auth, await ask(rl, 'Add glashAuth routes?', 'yes'));
   const sqlRunner = boolAnswer(options.sqlRunner, await ask(rl, 'Add SQL runner support?', 'yes'));
   const aiPrompts = boolAnswer(options.aiPrompts, await ask(rl, 'Add AI deployment prompts?', 'yes'));
+  const translate = boolAnswer(options.translate, await ask(rl, 'Add built-in IP auto-translation?', 'yes'));
+  const animation = boolAnswer(options.animation, await ask(rl, 'Add motion + 3D (motion, three.js)?', 'no'));
   const install = boolAnswer(options.install, await ask(rl, 'Install dependencies now?', 'yes'));
   const packageManager = normalizeChoice(options.packageManager || await ask(rl, 'Package manager (npm/pnpm/yarn/bun)', detectPackageManager()), PM_CHOICES, 'npm');
   const git = boolAnswer(options.git, await ask(rl, 'Initialize git?', 'yes'));
@@ -54,6 +56,8 @@ async function collectAnswers(options, rl) {
     auth,
     sqlRunner,
     aiPrompts,
+    translate,
+    animation,
     install,
     packageManager,
     git,
@@ -85,6 +89,8 @@ function projectFiles(answers) {
     pg: '^8.16.3',
     preact: '^10.29.2',
     'preact-render-to-string': '^6.7.0',
+    // Motion (animation) + three.js (3D), bundled client-side via esbuild.
+    ...(answers.animation ? { motion: '^11.15.0', three: '^0.171.0' } : {}),
   };
   const devDependencies = answers.css === 'tailwind'
     ? { tailwindcss: '^4.1.0', '@tailwindcss/cli': '^4.1.0' }
@@ -105,7 +111,7 @@ function projectFiles(answers) {
     '.env.local': envLocal(answers),
     'glash.config.mjs': configFile(answers, hasCss),
     'README.md': projectReadme(answers),
-    'routes/_layout.jsx': layoutRoute(),
+    'routes/_layout.jsx': layoutRoute(answers),
     'routes/index.jsx': indexRoute(answers),
     'routes/api/health.mjs': healthRoute(),
     'db/schema.sql': schemaSql(answers),
@@ -113,6 +119,8 @@ function projectFiles(answers) {
     ...(answers.css === 'tailwind' ? { 'styles/input.css': tailwindInput() } : {}),
     ...(answers.auth ? authRoutes() : {}),
     ...(answers.sqlRunner ? sqlRunnerRoutes() : {}),
+    ...(answers.translate ? { 'routes/api/_glash/geo.mjs': geoRoute() } : {}),
+    ...(answers.animation ? { 'routes/demo/motion.jsx': motionDemoRoute() } : {}),
     ...(answers.aiPrompts ? { '.glash/prompts/deploy.md': aiDeployPrompt(answers) } : {}),
     'public/favicon.svg': faviconSvg(),
   };
@@ -140,10 +148,19 @@ export default defineConfig({
 `;
 }
 
-function layoutRoute() {
-  return `import { Link } from 'glashjs/link';
+function layoutRoute(answers = {}) {
+  const t = answers.translate;
+  const imports = [`import { Link } from 'glashjs/link';`];
+  if (t) {
+    imports.push(`import { useEffect } from 'preact/hooks';`);
+    imports.push(`import { glashAutoTranslate } from 'glashjs/i18n';`);
+  }
+  return `${imports.join('\n')}
 
-export default function RootLayout({ children }) {
+export default function RootLayout({ children }) {${t ? `
+  // Built-in IP auto-translation: detect the visitor's country and offer to
+  // translate the page into their native language. Reads /api/_glash/geo.
+  useEffect(() => { glashAutoTranslate(); }, []);` : ''}
   return (
     <div className="shell">
       <header className="nav">
@@ -160,6 +177,58 @@ export default function RootLayout({ children }) {
 `;
 }
 
+function geoRoute() {
+  return `// IP -> country -> native language, read from the edge geo header
+// (CF-IPCountry / X-Glash-Country on glashDB hosting). The client i18n runtime
+// calls this to decide whether to offer auto-translation.
+import { geoRouteHandler } from 'glashjs/i18n';
+
+export const GET = geoRouteHandler;
+`;
+}
+
+function motionDemoRoute() {
+  return `import { useEffect, useRef } from 'preact/hooks';
+import { animate } from 'motion';
+import * as THREE from 'three';
+
+export const metadata = { title: 'Motion + 3D' };
+
+export default function MotionDemo() {
+  const card = useRef(null);
+  const canvas = useRef(null);
+
+  useEffect(() => {
+    if (card.current) {
+      animate(card.current, { rotate: [0, 8, -8, 0], scale: [1, 1.06, 1] }, { duration: 2.4, repeat: Infinity });
+    }
+    const el = canvas.current;
+    if (!el) return;
+    const renderer = new THREE.WebGLRenderer({ canvas: el, antialias: true, alpha: true });
+    renderer.setSize(240, 240, false);
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(60, 1, 0.1, 100);
+    camera.position.z = 3;
+    const cube = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshNormalMaterial());
+    scene.add(cube);
+    let raf;
+    const loop = () => { cube.rotation.x += 0.01; cube.rotation.y += 0.013; renderer.render(scene, camera); raf = requestAnimationFrame(loop); };
+    loop();
+    return () => cancelAnimationFrame(raf);
+  }, []);
+
+  return (
+    <main className="hero">
+      <h1>Motion + 3D</h1>
+      <p className="lede">motion drives the card animation; three.js renders the cube.</p>
+      <div ref={card} style={{ width: '120px', height: '120px', borderRadius: '16px', background: '#e8eaed' }} />
+      <canvas ref={canvas} width={240} height={240} />
+    </main>
+  );
+}
+`;
+}
+
 function indexRoute(answers) {
   return `import { useState } from 'preact/hooks';
 import { callServerFunction } from 'glashjs/server-functions';

package/src/i18n.mjs

@@ -0,0 +1,185 @@
+// glashjs/i18n — built-in IP-based auto-translation.
+//
+// Server:
+//   detectCountry(req)        -> 'US' | null   (reads edge/CDN geo headers)
+//   languageForCountry('FR')  -> { code: 'fr', name: 'Français' } | null
+//
+// Client:
+//   glashAutoTranslate(opts)  -> looks up the visitor's country (via a glashjs
+//     geo API route, falling back to a public IP service), maps it to a language,
+//     and — if that differs from the page language — shows a small prompt to
+//     translate the page into the visitor's native language. No API key: it uses
+//     the Google website-translate widget (cookie-driven, in-place).
+//
+// Wire it up in a client effect:
+//   import { glashAutoTranslate } from 'glashjs/i18n';
+//   useEffect(() => glashAutoTranslate(), []);
+// and scaffold `routes/api/_glash/geo.mjs` (see geoRouteHandler) so detection
+// works on glashDB hosting, where the edge sets the country header.
+
+// country code -> [BCP-47 language, native name]
+export const COUNTRY_LANGUAGE = {
+  US: ['en', 'English'], GB: ['en', 'English'], AU: ['en', 'English'], CA: ['en', 'English'],
+  IE: ['en', 'English'], NZ: ['en', 'English'], NG: ['en', 'English'], GH: ['en', 'English'],
+  KE: ['en', 'English'], ZA: ['en', 'English'], IN: ['hi', 'हिन्दी'], PK: ['ur', 'اردو'],
+  FR: ['fr', 'Français'], BE: ['fr', 'Français'], LU: ['fr', 'Français'], CI: ['fr', 'Français'],
+  SN: ['fr', 'Français'], CM: ['fr', 'Français'], ES: ['es', 'Español'], MX: ['es', 'Español'],
+  AR: ['es', 'Español'], CO: ['es', 'Español'], CL: ['es', 'Español'], PE: ['es', 'Español'],
+  VE: ['es', 'Español'], DE: ['de', 'Deutsch'], AT: ['de', 'Deutsch'], CH: ['de', 'Deutsch'],
+  IT: ['it', 'Italiano'], PT: ['pt', 'Português'], BR: ['pt', 'Português'], AO: ['pt', 'Português'],
+  NL: ['nl', 'Nederlands'], RU: ['ru', 'Русский'], UA: ['uk', 'Українська'], PL: ['pl', 'Polski'],
+  CZ: ['cs', 'Čeština'], SK: ['sk', 'Slovenčina'], RO: ['ro', 'Română'], HU: ['hu', 'Magyar'],
+  GR: ['el', 'Ελληνικά'], TR: ['tr', 'Türkçe'], SE: ['sv', 'Svenska'], NO: ['no', 'Norsk'],
+  DK: ['da', 'Dansk'], FI: ['fi', 'Suomi'], IS: ['is', 'Íslenska'], CN: ['zh-CN', '中文'],
+  TW: ['zh-TW', '繁體中文'], HK: ['zh-TW', '繁體中文'], JP: ['ja', '日本語'], KR: ['ko', '한국어'],
+  TH: ['th', 'ไทย'], VN: ['vi', 'Tiếng Việt'], ID: ['id', 'Bahasa Indonesia'], MY: ['ms', 'Bahasa Melayu'],
+  PH: ['tl', 'Filipino'], SA: ['ar', 'العربية'], AE: ['ar', 'العربية'], EG: ['ar', 'العربية'],
+  MA: ['ar', 'العربية'], DZ: ['ar', 'العربية'], IQ: ['ar', 'العربية'], IL: ['he', 'עברית'],
+  IR: ['fa', 'فارسی'], BD: ['bn', 'বাংলা'], ET: ['am', 'አማርኛ'],
+};
+
+export function detectCountry(req) {
+  const h = (req && req.headers) || {};
+  const get = (k) => (typeof h.get === 'function' ? h.get(k) : (h[k] ?? h[k.toLowerCase()]));
+  const cc = String(
+    get('cf-ipcountry') || get('x-glash-country') || get('x-vercel-ip-country') || get('x-country-code') || '',
+  ).split(',')[0].trim().toUpperCase();
+  return /^[A-Z]{2}$/.test(cc) && cc !== 'XX' ? cc : null;
+}
+
+export function languageForCountry(country) {
+  const entry = COUNTRY_LANGUAGE[String(country || '').toUpperCase()];
+  return entry ? { code: entry[0], name: entry[1] } : null;
+}
+
+/** Drop-in handler for `routes/api/_glash/geo.mjs` (export const GET = geoRouteHandler). */
+export function geoRouteHandler(ctx) {
+  const country = detectCountry({ headers: (ctx && ctx.headers) || {} });
+  const language = country ? languageForCountry(country) : null;
+  return { country, language };
+}
+
+// ---- client ---------------------------------------------------------------
+
+function baseLang(code) { return String(code || '').toLowerCase().split('-')[0]; }
+
+async function lookupLanguage(geoEndpoint) {
+  // 1) glashjs geo route (works on glashDB hosting via the edge country header).
+  try {
+    const r = await fetch(geoEndpoint, { headers: { accept: 'application/json' } });
+    if (r.ok) {
+      const d = await r.json();
+      if (d && d.language && d.language.code) return d.language;
+      if (d && d.country) { const l = languageForCountry(d.country); if (l) return l; }
+    }
+  } catch { /* fall through */ }
+  // 2) Public IP geolocation fallback (no key, CORS-enabled).
+  try {
+    const r = await fetch('https://ipapi.co/json/');
+    if (r.ok) {
+      const d = await r.json();
+      const l = d && d.country_code ? languageForCountry(d.country_code) : null;
+      if (l) return l;
+    }
+  } catch { /* fall through */ }
+  return null;
+}
+
+function setGoogTransCookie(from, to) {
+  const val = `/${from}/${to}`;
+  const host = location.hostname;
+  document.cookie = `googtrans=${val};path=/`;
+  document.cookie = `googtrans=${val};path=/;domain=${host}`;
+  if (host.split('.').length > 1) document.cookie = `googtrans=${val};path=/;domain=.${host}`;
+}
+
+function loadGoogleWidget(pageLanguage) {
+  if (window.__glashGTLoaded) return;
+  window.__glashGTLoaded = true;
+  if (!document.getElementById('glash-gt')) {
+    const el = document.createElement('div');
+    el.id = 'glash-gt';
+    el.style.display = 'none';
+    document.body.appendChild(el);
+  }
+  window.googleTranslateElementInit = function () {
+    try { new window.google.translate.TranslateElement({ pageLanguage, autoDisplay: false }, 'glash-gt'); } catch { /* ignore */ }
+  };
+  const s = document.createElement('script');
+  s.src = 'https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
+  document.head.appendChild(s);
+}
+
+function showPrompt(language, onAccept, onDismiss) {
+  if (document.getElementById('glash-translate-prompt')) return;
+  const box = document.createElement('div');
+  box.id = 'glash-translate-prompt';
+  box.setAttribute('role', 'dialog');
+  box.style.cssText = [
+    'position:fixed', 'z-index:2147483646', 'left:50%', 'bottom:20px', 'transform:translateX(-50%)',
+    'max-width:min(92vw,460px)', 'display:flex', 'gap:12px', 'align-items:center',
+    'padding:12px 14px', 'border-radius:12px', 'font:14px/1.4 system-ui,sans-serif',
+    'background:#0b0d12', 'color:#e8eaed', 'border:1px solid rgba(255,255,255,0.12)',
+    'box-shadow:0 8px 30px rgba(0,0,0,0.45)',
+  ].join(';');
+  const text = document.createElement('span');
+  text.style.cssText = 'flex:1';
+  text.textContent = `View this site in ${language.name}?`;
+  const yes = document.createElement('button');
+  yes.textContent = 'Translate';
+  yes.style.cssText = 'cursor:pointer;border:0;border-radius:8px;padding:7px 12px;font:inherit;background:#e8eaed;color:#0b0d12;font-weight:600';
+  const no = document.createElement('button');
+  no.textContent = 'No thanks';
+  no.style.cssText = 'cursor:pointer;border:0;border-radius:8px;padding:7px 10px;font:inherit;background:transparent;color:#9aa0a6';
+  yes.addEventListener('click', () => { box.remove(); onAccept(); });
+  no.addEventListener('click', () => { box.remove(); onDismiss(); });
+  box.append(text, yes, no);
+  document.body.appendChild(box);
+}
+
+/**
+ * Detect the visitor's country by IP, map it to their native language, and (if it
+ * differs from the page language) prompt to auto-translate the page in place.
+ *
+ * Options:
+ *   pageLanguage  language the site is authored in (default: <html lang> or 'en')
+ *   geoEndpoint   glashjs geo route (default: '/api/_glash/geo')
+ *   auto          translate immediately without prompting (default: false)
+ *   storageKey    localStorage key remembering the choice
+ */
+export function glashAutoTranslate(opts = {}) {
+  if (typeof window === 'undefined' || typeof document === 'undefined') return;
+  const {
+    pageLanguage = baseLang(document.documentElement.lang) || 'en',
+    geoEndpoint = '/api/_glash/geo',
+    auto = false,
+    storageKey = 'glash:autotranslate',
+  } = opts;
+
+  // If a previous choice already translated the page, re-apply the widget so the
+  // translation persists across navigations, then stop.
+  if (/(^|;\s*)googtrans=\//.test(document.cookie)) { loadGoogleWidget(pageLanguage); return; }
+  let saved = null;
+  try { saved = localStorage.getItem(storageKey); } catch { /* ignore */ }
+  if (saved === 'dismissed') return;
+
+  const translateTo = (code) => {
+    setGoogTransCookie(pageLanguage, code);
+    loadGoogleWidget(pageLanguage);
+    setTimeout(() => location.reload(), 60);
+  };
+
+  if (saved && saved !== pageLanguage) { translateTo(saved); return; }
+
+  lookupLanguage(geoEndpoint).then((language) => {
+    if (!language || baseLang(language.code) === pageLanguage) return;
+    if (auto) { try { localStorage.setItem(storageKey, language.code); } catch {} translateTo(language.code); return; }
+    showPrompt(
+      language,
+      () => { try { localStorage.setItem(storageKey, language.code); } catch {} translateTo(language.code); },
+      () => { try { localStorage.setItem(storageKey, 'dismissed'); } catch {} },
+    );
+  }).catch(() => {});
+}
+
+export default { detectCountry, languageForCountry, geoRouteHandler, glashAutoTranslate, COUNTRY_LANGUAGE };

package/src/server/html.mjs

@@ -49,7 +49,7 @@ ${headHtml}
 `;
 }
 
-function shellTail({ offline = true, animatedFavicon = true, dev = false, nonce = '' }) {
+function shellTail({ offline = true, animatedFavicon = false, dev = false, nonce = '' }) {
   const n = nonce ? ` nonce="${escapeHtml(nonce)}"` : '';
   const fav = animatedFavicon
     ? `<script type="module"${n}>try{const m=await import("/glash-favicon.mjs");m.startGlashFavicon&&m.startGlashFavicon();}catch{}</script>`

package/templates/glash_favicon.svg

@@ -0,0 +1,79 @@
+<svg width="508" height="508" viewBox="0 0 508 508" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_ii_12189_2)">
+<rect x="43.9863" y="34.4604" width="420.999" height="420.999" rx="102.477" fill="url(#paint0_linear_12189_2)"/>
+</g>
+<rect x="45.1251" y="35.5992" width="418.722" height="418.722" rx="101.338" stroke="#D4D4D4" stroke-width="2.27759"/>
+<g opacity="0.6" filter="url(#filter1_f_12189_2)" style="mix-blend-mode:overlay">
+<circle cx="253.556" cy="253.556" r="119.602" fill="url(#paint1_linear_12189_2)"/>
+<circle cx="253.556" cy="253.556" r="118.463" stroke="#D4D4D4" stroke-width="2.27759"/>
+</g>
+<mask id="mask0_12189_2" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="43" y="34" width="422" height="422">
+<rect x="45.1241" y="35.5997" width="418.722" height="418.722" rx="101.338" fill="url(#paint2_linear_12189_2)" stroke="#D4D4D4" stroke-width="2.27759"/>
+</mask>
+<g mask="url(#mask0_12189_2)">
+<g filter="url(#filter2_f_12189_2)">
+<ellipse cx="259.269" cy="23.0167" rx="215.284" ry="122.507" fill="url(#paint3_linear_12189_2)"/>
+<path d="M259.269 -98.3521C318.557 -98.3521 372.177 -84.6747 410.935 -62.6196C449.725 -40.5457 473.414 -10.2249 473.414 23.0171C473.414 56.2589 449.725 86.579 410.935 108.653C372.177 130.708 318.557 144.385 259.269 144.385C199.98 144.385 146.361 130.708 107.604 108.653C68.813 86.579 45.1242 56.2589 45.124 23.0171C45.124 -10.2249 68.8128 -40.5457 107.604 -62.6196C146.361 -84.6747 199.98 -98.352 259.269 -98.3521Z" stroke="#D4D4D4" stroke-width="2.27759"/>
+</g>
+<g filter="url(#filter3_f_12189_2)" style="mix-blend-mode:plus-lighter">
+<ellipse cx="254.486" cy="29.677" rx="47.8408" ry="81.3294" fill="url(#paint4_linear_12189_2)"/>
+<path d="M254.486 -50.5137C267.129 -50.5137 278.78 -41.7943 287.333 -27.2539C295.871 -12.7399 301.188 7.3854 301.188 29.6768C301.188 51.9682 295.871 72.0943 287.333 86.6084C278.78 101.149 267.129 109.867 254.486 109.867C241.844 109.867 230.193 101.149 221.64 86.6084C213.102 72.0943 207.784 51.9682 207.784 29.6768C207.784 7.3854 213.102 -12.7399 221.64 -27.2539C230.193 -41.7943 241.844 -50.5137 254.486 -50.5137Z" stroke="#D4D4D4" stroke-width="2.27759"/>
+</g>
+</g>
+<path d="M336.671 312.331L239.265 374.956L164.548 342.247L261.906 279.621L336.671 312.331Z" fill="#FEFFFF"/>
+<path d="M264.17 166.655C286.185 166.655 304.057 184.575 304.057 206.591C304.057 213.479 302.371 219.983 299.047 225.956C292.014 238.626 278.67 246.478 264.17 246.478C258.148 246.478 252.367 245.178 246.972 242.624C233.146 236.025 224.234 221.91 224.234 206.591C224.234 184.575 242.155 166.655 264.17 166.655ZM264.17 128.116C220.814 128.116 185.695 163.235 185.695 206.591C185.695 237.807 203.953 264.784 230.352 277.406C240.565 282.319 252.03 285.017 264.122 285.017C293.604 285.017 319.328 268.734 332.672 244.648C338.983 233.375 342.548 220.416 342.548 206.591C342.548 163.283 307.43 128.116 264.122 128.116H264.17Z" fill="#FEFFFF"/>
+<defs>
+<filter id="filter0_ii_12189_2" x="43.9863" y="34.4604" width="420.999" height="449.704" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="19.1363"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.24 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_12189_2"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="28.7045"/>
+<feGaussianBlur stdDeviation="19.1363"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_12189_2" result="effect2_innerShadow_12189_2"/>
+</filter>
+<filter id="filter1_f_12189_2" x="-0.000152588" y="-0.000152588" width="507.113" height="507.113" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="66.9771" result="effect1_foregroundBlur_12189_2"/>
+</filter>
+<filter id="filter2_f_12189_2" x="-109.105" y="-252.581" width="736.749" height="551.196" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="76.5453" result="effect1_foregroundBlur_12189_2"/>
+</filter>
+<filter id="filter3_f_12189_2" x="149.237" y="-109.061" width="210.5" height="277.477" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="28.7045" result="effect1_foregroundBlur_12189_2"/>
+</filter>
+<linearGradient id="paint0_linear_12189_2" x1="254.486" y1="34.4604" x2="254.486" y2="455.46" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0.3"/>
+<stop offset="1" stop-opacity="0.6"/>
+</linearGradient>
+<linearGradient id="paint1_linear_12189_2" x1="253.556" y1="133.954" x2="253.556" y2="373.158" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0"/>
+<stop offset="1" stop-opacity="0.6"/>
+</linearGradient>
+<linearGradient id="paint2_linear_12189_2" x1="254.485" y1="34.4609" x2="254.485" y2="455.46" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4B4B4B"/>
+<stop offset="1" stop-color="#AFAFAF"/>
+</linearGradient>
+<linearGradient id="paint3_linear_12189_2" x1="272.501" y1="142.813" x2="267.703" y2="-48.6569" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D8D8D8" stop-opacity="0.05"/>
+<stop offset="0.61" stop-color="#B2B2B2" stop-opacity="0.05"/>
+<stop offset="0.98" stop-color="#404040"/>
+</linearGradient>
+<linearGradient id="paint4_linear_12189_2" x1="254.486" y1="-51.6523" x2="254.486" y2="111.006" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0"/>
+<stop offset="1" stop-opacity="0.6"/>
+</linearGradient>
+</defs>
+</svg>