@almadar/ui 5.36.0 → 5.38.0

package/dist/components/index.cjs

@@ -7,9 +7,6 @@ var tailwindMerge = require('tailwind-merge');
 var providers = require('@almadar/ui/providers');
 var logger = require('@almadar/logger');
 var LucideIcons2 = require('lucide-react');
-var PhosphorIcons = require('@phosphor-icons/react');
-var TablerIcons = require('@tabler/icons-react');
-var FaIcons = require('react-icons/fa');
 var hooks = require('@almadar/ui/hooks');
 var evaluator = require('@almadar/evaluator');
 var reactDom = require('react-dom');
@@ -68,9 +65,6 @@ function _interopNamespace(e) {
 
 var React77__namespace = /*#__PURE__*/_interopNamespace(React77);
 var LucideIcons2__namespace = /*#__PURE__*/_interopNamespace(LucideIcons2);
-var PhosphorIcons__namespace = /*#__PURE__*/_interopNamespace(PhosphorIcons);
-var TablerIcons__namespace = /*#__PURE__*/_interopNamespace(TablerIcons);
-var FaIcons__namespace = /*#__PURE__*/_interopNamespace(FaIcons);
 var ELK__default = /*#__PURE__*/_interopDefault(ELK);
 var SyntaxHighlighter__default = /*#__PURE__*/_interopDefault(SyntaxHighlighter);
 var dark__default = /*#__PURE__*/_interopDefault(dark);
@@ -1274,6 +1268,41 @@ function kebabToPascal(name) {
     return part.charAt(0).toUpperCase() + part.slice(1);
   }).join("");
 }
+function loadLib(key, importer) {
+  let p2 = libPromises.get(key);
+  if (!p2) {
+    p2 = importer().then((m) => m);
+    libPromises.set(key, p2);
+  }
+  return p2;
+}
+function lazyFamilyIcon(libKey, importer, pick, fallbackName, family) {
+  const Lazy = React77__namespace.default.lazy(async () => {
+    const lib = await loadLib(libKey, importer);
+    const Comp = pick(lib);
+    if (!Comp) {
+      warnFallback(fallbackName, family);
+      return { default: makeLucideAdapter(fallbackName, true) };
+    }
+    return { default: Comp };
+  });
+  const Wrapped = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+    React77__namespace.default.Suspense,
+    {
+      fallback: /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: props.className,
+          style: { display: "inline-block", ...props.style }
+        }
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(Lazy, { ...props })
+    }
+  );
+  Wrapped.displayName = `Lazy.${libKey}.${fallbackName}`;
+  return Wrapped;
+}
 function resolveLucide(name) {
   if (lucideAliases[name]) return lucideAliases[name];
   const pascal = kebabToPascal(name);
@@ -1284,60 +1313,81 @@ function resolveLucide(name) {
   if (asIs && typeof asIs === "object") return asIs;
   return LucideIcons2__namespace.HelpCircle;
 }
-function resolvePhosphor(name, weight) {
+function resolvePhosphor(name, weight, family) {
   const target = phosphorAliases[name] ?? kebabToPascal(name);
-  const map = PhosphorIcons__namespace;
-  const PhosphorComp = map[target];
-  if (!PhosphorComp || typeof PhosphorComp !== "object") return null;
-  const Component = PhosphorComp;
-  const Adapter = (props) => /* @__PURE__ */ jsxRuntime.jsx(
-    Component,
-    {
-      weight,
-      className: props.className,
-      style: props.style,
-      size: props.size ?? "1em"
-    }
+  return lazyFamilyIcon(
+    "phosphor",
+    () => import('@phosphor-icons/react'),
+    (lib) => {
+      const PhosphorComp = lib[target];
+      if (!PhosphorComp || typeof PhosphorComp !== "object") return null;
+      const Component = PhosphorComp;
+      const Adapter = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+        Component,
+        {
+          weight,
+          className: props.className,
+          style: props.style,
+          size: props.size ?? "1em"
+        }
+      );
+      Adapter.displayName = `Phosphor.${target}.${weight}`;
+      return Adapter;
+    },
+    name,
+    family
   );
-  Adapter.displayName = `Phosphor.${target}.${weight}`;
-  return Adapter;
 }
-function resolveTabler(name) {
+function resolveTabler(name, family) {
   const suffix = tablerAliases[name] ?? kebabToPascal(name);
   const target = `Icon${suffix}`;
-  const map = TablerIcons__namespace;
-  const TablerComp = map[target];
-  if (!TablerComp || typeof TablerComp !== "object") return null;
-  const Component = TablerComp;
-  const Adapter = (props) => /* @__PURE__ */ jsxRuntime.jsx(
-    Component,
-    {
-      stroke: props.strokeWidth ?? 1.5,
-      className: props.className,
-      style: props.style,
-      size: props.size ?? 24
-    }
+  return lazyFamilyIcon(
+    "tabler",
+    () => import('@tabler/icons-react'),
+    (lib) => {
+      const TablerComp = lib[target];
+      if (!TablerComp || typeof TablerComp !== "object") return null;
+      const Component = TablerComp;
+      const Adapter = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+        Component,
+        {
+          stroke: props.strokeWidth ?? 1.5,
+          className: props.className,
+          style: props.style,
+          size: props.size ?? 24
+        }
+      );
+      Adapter.displayName = `Tabler.${target}`;
+      return Adapter;
+    },
+    name,
+    family
   );
-  Adapter.displayName = `Tabler.${target}`;
-  return Adapter;
 }
-function resolveFa(name) {
+function resolveFa(name, family) {
   const suffix = faAliases[name] ?? kebabToPascal(name);
   const target = `Fa${suffix}`;
-  const map = FaIcons__namespace;
-  const FaComp = map[target];
-  if (!FaComp || typeof FaComp !== "function") return null;
-  const Component = FaComp;
-  const Adapter = (props) => /* @__PURE__ */ jsxRuntime.jsx(
-    Component,
-    {
-      className: props.className,
-      style: props.style,
-      size: props.size ?? "1em"
-    }
+  return lazyFamilyIcon(
+    "fa",
+    () => import('react-icons/fa'),
+    (lib) => {
+      const FaComp = lib[target];
+      if (!FaComp || typeof FaComp !== "function") return null;
+      const Component = FaComp;
+      const Adapter = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+        Component,
+        {
+          className: props.className,
+          style: props.style,
+          size: props.size ?? "1em"
+        }
+      );
+      Adapter.displayName = `Fa.${target}`;
+      return Adapter;
+    },
+    name,
+    family
   );
-  Adapter.displayName = `Fa.${target}`;
-  return Adapter;
 }
 function warnFallback(name, family) {
   const key = `${family}::${name}`;
@@ -1371,39 +1421,22 @@ function resolveIconForFamily(name, family) {
   switch (family) {
     case "lucide":
       return makeLucideAdapter(name, false);
-    case "phosphor-outline": {
-      const p2 = resolvePhosphor(name, "regular");
-      if (p2) return p2;
-      warnFallback(name, family);
-      return makeLucideAdapter(name, true);
-    }
-    case "phosphor-fill": {
-      const p2 = resolvePhosphor(name, "fill");
-      if (p2) return p2;
-      warnFallback(name, family);
-      return makeLucideAdapter(name, true);
-    }
-    case "phosphor-duotone": {
-      const p2 = resolvePhosphor(name, "duotone");
-      if (p2) return p2;
-      warnFallback(name, family);
-      return makeLucideAdapter(name, true);
-    }
-    case "tabler": {
-      const t = resolveTabler(name);
-      if (t) return t;
-      warnFallback(name, family);
-      return makeLucideAdapter(name, true);
-    }
-    case "fa-solid": {
-      const f3 = resolveFa(name);
-      if (f3) return f3;
-      warnFallback(name, family);
-      return makeLucideAdapter(name, true);
-    }
-  }
-}
-var DEFAULT_FAMILY, VALID_FAMILIES, cachedFamily, listeners, observer, lucideAliases, phosphorAliases, tablerAliases, faAliases, warned;
+    // Non-lucide families resolve to a lazy, Suspense-wrapped component that
+    // dynamic-imports the library on first render and falls back to lucide
+    // internally when the family lacks the icon (see lazyFamilyIcon).
+    case "phosphor-outline":
+      return resolvePhosphor(name, "regular", family);
+    case "phosphor-fill":
+      return resolvePhosphor(name, "fill", family);
+    case "phosphor-duotone":
+      return resolvePhosphor(name, "duotone", family);
+    case "tabler":
+      return resolveTabler(name, family);
+    case "fa-solid":
+      return resolveFa(name, family);
+  }
+}
+var DEFAULT_FAMILY, VALID_FAMILIES, cachedFamily, listeners, observer, libPromises, lucideAliases, phosphorAliases, tablerAliases, faAliases, warned;
 var init_iconFamily = __esm({
   "lib/iconFamily.tsx"() {
     "use client";
@@ -1419,6 +1452,7 @@ var init_iconFamily = __esm({
     cachedFamily = null;
     listeners = /* @__PURE__ */ new Set();
     observer = null;
+    libPromises = /* @__PURE__ */ new Map();
     lucideAliases = {
       close: LucideIcons2__namespace.X,
       trash: LucideIcons2__namespace.Trash2,
@@ -9591,7 +9625,7 @@ function IsometricCanvas({
   // Rendering options
   scale = 0.4,
   debug: debug2 = false,
-  backgroundImage = "https://almadar-kflow-assets.web.app/shared/scenes/court.png",
+  backgroundImage = "https://almadar-kflow-assets.web.app/shared/scenes/dark_clouds_from_above.png",
   showMinimap = true,
   enableCamera = true,
   unitScale = 1,
@@ -23343,7 +23377,7 @@ var init_FormSection = __esm({
     exports.FormActions.displayName = "FormActions";
   }
 });
-var ALL_CATEGORY; exports.GridPicker = void 0;
+var ALL_CATEGORY, MAX_RENDERED; exports.GridPicker = void 0;
 var init_GridPicker = __esm({
   "components/core/molecules/GridPicker.tsx"() {
     "use client";
@@ -23352,6 +23386,7 @@ var init_GridPicker = __esm({
     init_Badge();
     init_Stack();
     ALL_CATEGORY = "__all__";
+    MAX_RENDERED = 300;
     exports.GridPicker = ({
       items,
       value,
@@ -23381,6 +23416,8 @@ var init_GridPicker = __esm({
           return matchesCategory && matchesSearch;
         });
       }, [items, search, activeCategory]);
+      const visible = React77.useMemo(() => filtered.slice(0, MAX_RENDERED), [filtered]);
+      const truncated = filtered.length - visible.length;
       const select = React77.useCallback(
         (item) => {
           onChange(item.id);
@@ -23482,7 +23519,7 @@ var init_GridPicker = __esm({
             style: {
               gridTemplateColumns: `repeat(auto-fill, minmax(${cellSize}px, 1fr))`
             },
-            children: filtered.map((item, index) => {
+            children: visible.map((item, index) => {
               const selected = item.id === value;
               return /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
@@ -23509,7 +23546,8 @@ var init_GridPicker = __esm({
               );
             })
           }
-        )
+        ),
+        truncated > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-1 text-xs text-muted-foreground", children: `+${truncated} more \u2014 refine your search` })
       ] });
     };
     exports.GridPicker.displayName = "GridPicker";
@@ -27323,7 +27361,7 @@ function GameCanvas2D({
   tickEvent,
   drawEvent,
   fps = 60,
-  backgroundImage = "https://almadar-kflow-assets.web.app/shared/scenes/resonators.jpeg",
+  backgroundImage = "https://almadar-kflow-assets.web.app/shared/scenes/dark_clouds_from_above.png",
   assetBaseUrl = "https://almadar-kflow-assets.web.app/shared/",
   className
 }) {
@@ -28589,7 +28627,7 @@ function PlatformerCanvas({
   bgColor,
   playerSprite = "https://almadar-kflow-assets.web.app/shared/platformer/characters/platformChar_idle.png",
   tileSprites,
-  backgroundImage = "https://almadar-kflow-assets.web.app/shared/scenes/court.png",
+  backgroundImage = "https://almadar-kflow-assets.web.app/shared/scenes/dark_clouds_from_above.png",
   assetBaseUrl = "https://almadar-kflow-assets.web.app/shared/platformer/",
   leftEvent = "MOVE_LEFT",
   rightEvent = "MOVE_RIGHT",

package/dist/components/index.js

@@ -7,9 +7,6 @@ import { EventBusContext, useTraitScope, TraitScopeProvider } from '@almadar/ui/
 import { createLogger, isLogLevelEnabled } from '@almadar/logger';
 import * as LucideIcons2 from 'lucide-react';
 import { Loader2, X, List, Printer, ChevronRight, ChevronLeft, CheckCircle, XCircle, Wrench, RotateCcw, Send, Play, Terminal, Search, ChevronUp, ChevronDown, MoreHorizontal, Bug, Package, Calendar, Pencil, Eye, Image as Image$1, Upload, ZoomIn, ArrowRight, Pause, SkipForward, TrendingUp, TrendingDown, Minus, AlertCircle, Circle, Clock, CheckCircle2, Code, FileText, WrapText, Check, Copy, HelpCircle, Type, Heading1, Heading2, Heading3, ListOrdered, Quote, GitBranch, Plus, Trash, ArrowLeft, Menu as Menu$1, AlertTriangle, Trash2, Eraser, ZoomOut, Download, Lightbulb, PauseCircle, Link2, Tag, User, DollarSign, Zap, Sword, Move, Heart, Shield } from 'lucide-react';
-import * as PhosphorIcons from '@phosphor-icons/react';
-import * as TablerIcons from '@tabler/icons-react';
-import * as FaIcons from 'react-icons/fa';
 import { useTranslate } from '@almadar/ui/hooks';
 export * from '@almadar/ui/hooks';
 import { evaluate, createMinimalContext } from '@almadar/evaluator';
@@ -1226,6 +1223,41 @@ function kebabToPascal(name) {
     return part.charAt(0).toUpperCase() + part.slice(1);
   }).join("");
 }
+function loadLib(key, importer) {
+  let p2 = libPromises.get(key);
+  if (!p2) {
+    p2 = importer().then((m) => m);
+    libPromises.set(key, p2);
+  }
+  return p2;
+}
+function lazyFamilyIcon(libKey, importer, pick, fallbackName, family) {
+  const Lazy = React77__default.lazy(async () => {
+    const lib = await loadLib(libKey, importer);
+    const Comp = pick(lib);
+    if (!Comp) {
+      warnFallback(fallbackName, family);
+      return { default: makeLucideAdapter(fallbackName, true) };
+    }
+    return { default: Comp };
+  });
+  const Wrapped = (props) => /* @__PURE__ */ jsx(
+    React77__default.Suspense,
+    {
+      fallback: /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: props.className,
+          style: { display: "inline-block", ...props.style }
+        }
+      ),
+      children: /* @__PURE__ */ jsx(Lazy, { ...props })
+    }
+  );
+  Wrapped.displayName = `Lazy.${libKey}.${fallbackName}`;
+  return Wrapped;
+}
 function resolveLucide(name) {
   if (lucideAliases[name]) return lucideAliases[name];
   const pascal = kebabToPascal(name);
@@ -1236,60 +1268,81 @@ function resolveLucide(name) {
   if (asIs && typeof asIs === "object") return asIs;
   return LucideIcons2.HelpCircle;
 }
-function resolvePhosphor(name, weight) {
+function resolvePhosphor(name, weight, family) {
   const target = phosphorAliases[name] ?? kebabToPascal(name);
-  const map = PhosphorIcons;
-  const PhosphorComp = map[target];
-  if (!PhosphorComp || typeof PhosphorComp !== "object") return null;
-  const Component = PhosphorComp;
-  const Adapter = (props) => /* @__PURE__ */ jsx(
-    Component,
-    {
-      weight,
-      className: props.className,
-      style: props.style,
-      size: props.size ?? "1em"
-    }
+  return lazyFamilyIcon(
+    "phosphor",
+    () => import('@phosphor-icons/react'),
+    (lib) => {
+      const PhosphorComp = lib[target];
+      if (!PhosphorComp || typeof PhosphorComp !== "object") return null;
+      const Component = PhosphorComp;
+      const Adapter = (props) => /* @__PURE__ */ jsx(
+        Component,
+        {
+          weight,
+          className: props.className,
+          style: props.style,
+          size: props.size ?? "1em"
+        }
+      );
+      Adapter.displayName = `Phosphor.${target}.${weight}`;
+      return Adapter;
+    },
+    name,
+    family
   );
-  Adapter.displayName = `Phosphor.${target}.${weight}`;
-  return Adapter;
 }
-function resolveTabler(name) {
+function resolveTabler(name, family) {
   const suffix = tablerAliases[name] ?? kebabToPascal(name);
   const target = `Icon${suffix}`;
-  const map = TablerIcons;
-  const TablerComp = map[target];
-  if (!TablerComp || typeof TablerComp !== "object") return null;
-  const Component = TablerComp;
-  const Adapter = (props) => /* @__PURE__ */ jsx(
-    Component,
-    {
-      stroke: props.strokeWidth ?? 1.5,
-      className: props.className,
-      style: props.style,
-      size: props.size ?? 24
-    }
+  return lazyFamilyIcon(
+    "tabler",
+    () => import('@tabler/icons-react'),
+    (lib) => {
+      const TablerComp = lib[target];
+      if (!TablerComp || typeof TablerComp !== "object") return null;
+      const Component = TablerComp;
+      const Adapter = (props) => /* @__PURE__ */ jsx(
+        Component,
+        {
+          stroke: props.strokeWidth ?? 1.5,
+          className: props.className,
+          style: props.style,
+          size: props.size ?? 24
+        }
+      );
+      Adapter.displayName = `Tabler.${target}`;
+      return Adapter;
+    },
+    name,
+    family
   );
-  Adapter.displayName = `Tabler.${target}`;
-  return Adapter;
 }
-function resolveFa(name) {
+function resolveFa(name, family) {
   const suffix = faAliases[name] ?? kebabToPascal(name);
   const target = `Fa${suffix}`;
-  const map = FaIcons;
-  const FaComp = map[target];
-  if (!FaComp || typeof FaComp !== "function") return null;
-  const Component = FaComp;
-  const Adapter = (props) => /* @__PURE__ */ jsx(
-    Component,
-    {
-      className: props.className,
-      style: props.style,
-      size: props.size ?? "1em"
-    }
+  return lazyFamilyIcon(
+    "fa",
+    () => import('react-icons/fa'),
+    (lib) => {
+      const FaComp = lib[target];
+      if (!FaComp || typeof FaComp !== "function") return null;
+      const Component = FaComp;
+      const Adapter = (props) => /* @__PURE__ */ jsx(
+        Component,
+        {
+          className: props.className,
+          style: props.style,
+          size: props.size ?? "1em"
+        }
+      );
+      Adapter.displayName = `Fa.${target}`;
+      return Adapter;
+    },
+    name,
+    family
   );
-  Adapter.displayName = `Fa.${target}`;
-  return Adapter;
 }
 function warnFallback(name, family) {
   const key = `${family}::${name}`;
@@ -1323,39 +1376,22 @@ function resolveIconForFamily(name, family) {
   switch (family) {
     case "lucide":
       return makeLucideAdapter(name, false);
-    case "phosphor-outline": {
-      const p2 = resolvePhosphor(name, "regular");
-      if (p2) return p2;
-      warnFallback(name, family);
-      return makeLucideAdapter(name, true);
-    }
-    case "phosphor-fill": {
-      const p2 = resolvePhosphor(name, "fill");
-      if (p2) return p2;
-      warnFallback(name, family);
-      return makeLucideAdapter(name, true);
-    }
-    case "phosphor-duotone": {
-      const p2 = resolvePhosphor(name, "duotone");
-      if (p2) return p2;
-      warnFallback(name, family);
-      return makeLucideAdapter(name, true);
-    }
-    case "tabler": {
-      const t = resolveTabler(name);
-      if (t) return t;
-      warnFallback(name, family);
-      return makeLucideAdapter(name, true);
-    }
-    case "fa-solid": {
-      const f3 = resolveFa(name);
-      if (f3) return f3;
-      warnFallback(name, family);
-      return makeLucideAdapter(name, true);
-    }
-  }
-}
-var DEFAULT_FAMILY, VALID_FAMILIES, cachedFamily, listeners, observer, lucideAliases, phosphorAliases, tablerAliases, faAliases, warned;
+    // Non-lucide families resolve to a lazy, Suspense-wrapped component that
+    // dynamic-imports the library on first render and falls back to lucide
+    // internally when the family lacks the icon (see lazyFamilyIcon).
+    case "phosphor-outline":
+      return resolvePhosphor(name, "regular", family);
+    case "phosphor-fill":
+      return resolvePhosphor(name, "fill", family);
+    case "phosphor-duotone":
+      return resolvePhosphor(name, "duotone", family);
+    case "tabler":
+      return resolveTabler(name, family);
+    case "fa-solid":
+      return resolveFa(name, family);
+  }
+}
+var DEFAULT_FAMILY, VALID_FAMILIES, cachedFamily, listeners, observer, libPromises, lucideAliases, phosphorAliases, tablerAliases, faAliases, warned;
 var init_iconFamily = __esm({
   "lib/iconFamily.tsx"() {
     "use client";
@@ -1371,6 +1407,7 @@ var init_iconFamily = __esm({
     cachedFamily = null;
     listeners = /* @__PURE__ */ new Set();
     observer = null;
+    libPromises = /* @__PURE__ */ new Map();
     lucideAliases = {
       close: LucideIcons2.X,
       trash: LucideIcons2.Trash2,
@@ -9543,7 +9580,7 @@ function IsometricCanvas({
   // Rendering options
   scale = 0.4,
   debug: debug2 = false,
-  backgroundImage = "https://almadar-kflow-assets.web.app/shared/scenes/court.png",
+  backgroundImage = "https://almadar-kflow-assets.web.app/shared/scenes/dark_clouds_from_above.png",
   showMinimap = true,
   enableCamera = true,
   unitScale = 1,
@@ -23295,7 +23332,7 @@ var init_FormSection = __esm({
     FormActions.displayName = "FormActions";
   }
 });
-var ALL_CATEGORY, GridPicker;
+var ALL_CATEGORY, MAX_RENDERED, GridPicker;
 var init_GridPicker = __esm({
   "components/core/molecules/GridPicker.tsx"() {
     "use client";
@@ -23304,6 +23341,7 @@ var init_GridPicker = __esm({
     init_Badge();
     init_Stack();
     ALL_CATEGORY = "__all__";
+    MAX_RENDERED = 300;
     GridPicker = ({
       items,
       value,
@@ -23333,6 +23371,8 @@ var init_GridPicker = __esm({
           return matchesCategory && matchesSearch;
         });
       }, [items, search, activeCategory]);
+      const visible = useMemo(() => filtered.slice(0, MAX_RENDERED), [filtered]);
+      const truncated = filtered.length - visible.length;
       const select = useCallback(
         (item) => {
           onChange(item.id);
@@ -23434,7 +23474,7 @@ var init_GridPicker = __esm({
             style: {
               gridTemplateColumns: `repeat(auto-fill, minmax(${cellSize}px, 1fr))`
             },
-            children: filtered.map((item, index) => {
+            children: visible.map((item, index) => {
               const selected = item.id === value;
               return /* @__PURE__ */ jsx(
                 "button",
@@ -23461,7 +23501,8 @@ var init_GridPicker = __esm({
               );
             })
           }
-        )
+        ),
+        truncated > 0 && /* @__PURE__ */ jsx("div", { className: "px-1 text-xs text-muted-foreground", children: `+${truncated} more \u2014 refine your search` })
       ] });
     };
     GridPicker.displayName = "GridPicker";
@@ -27275,7 +27316,7 @@ function GameCanvas2D({
   tickEvent,
   drawEvent,
   fps = 60,
-  backgroundImage = "https://almadar-kflow-assets.web.app/shared/scenes/resonators.jpeg",
+  backgroundImage = "https://almadar-kflow-assets.web.app/shared/scenes/dark_clouds_from_above.png",
   assetBaseUrl = "https://almadar-kflow-assets.web.app/shared/",
   className
 }) {
@@ -28541,7 +28582,7 @@ function PlatformerCanvas({
   bgColor,
   playerSprite = "https://almadar-kflow-assets.web.app/shared/platformer/characters/platformChar_idle.png",
   tileSprites,
-  backgroundImage = "https://almadar-kflow-assets.web.app/shared/scenes/court.png",
+  backgroundImage = "https://almadar-kflow-assets.web.app/shared/scenes/dark_clouds_from_above.png",
   assetBaseUrl = "https://almadar-kflow-assets.web.app/shared/platformer/",
   leftEvent = "MOVE_LEFT",
   rightEvent = "MOVE_RIGHT",