@almadar/ui 5.94.1 → 5.96.0

package/dist/components/index.js

@@ -1,6 +1,6 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import * as React74 from 'react';
-import React74__default, { createContext, useContext, useMemo, useRef, useEffect, useCallback, useState, Suspense, lazy, useLayoutEffect, useId, useSyncExternalStore } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React75 from 'react';
+import React75__default, { createContext, useContext, useMemo, useRef, useEffect, useCallback, useState, Suspense, lazy, useLayoutEffect, useId, useSyncExternalStore } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { EventBusContext, useTraitScope, useCurrentPagePath, useEntitySchemaOptional, TraitScopeProvider } from '@almadar/ui/providers';
@@ -227,7 +227,7 @@ var init_SvgFlow = __esm({
       width = 100,
       height = 100
     }) => {
-      const markerId = React74__default.useMemo(() => {
+      const markerId = React75__default.useMemo(() => {
         flowIdCounter += 1;
         return `almadar-flow-arrow-${flowIdCounter}`;
       }, []);
@@ -820,7 +820,7 @@ var init_SvgRing = __esm({
       width = 100,
       height = 100
     }) => {
-      const gradientId = React74__default.useMemo(() => {
+      const gradientId = React75__default.useMemo(() => {
         ringIdCounter += 1;
         return `almadar-ring-glow-${ringIdCounter}`;
       }, []);
@@ -1232,7 +1232,7 @@ function loadLib(key, importer) {
   return p;
 }
 function lazyFamilyIcon(libKey, importer, pick, fallbackName, family) {
-  const Lazy = React74__default.lazy(async () => {
+  const Lazy = React75__default.lazy(async () => {
     const lib = await loadLib(libKey, importer);
     const Comp = pick(lib);
     if (!Comp) {
@@ -1242,7 +1242,7 @@ function lazyFamilyIcon(libKey, importer, pick, fallbackName, family) {
     return { default: Comp };
   });
   const Wrapped = (props) => /* @__PURE__ */ jsx(
-    React74__default.Suspense,
+    React75__default.Suspense,
     {
       fallback: /* @__PURE__ */ jsx(
         "span",
@@ -1973,7 +1973,7 @@ var init_Icon = __esm({
       const directIcon = typeof icon === "string" ? void 0 : icon;
       const effectiveName = typeof icon === "string" ? icon : name;
       const family = useIconFamily();
-      const RenderedComponent = React74__default.useMemo(() => {
+      const RenderedComponent = React75__default.useMemo(() => {
         if (directIcon) return null;
         return effectiveName ? resolveIconForFamily(effectiveName, family) : null;
       }, [directIcon, effectiveName, family]);
@@ -2023,6 +2023,210 @@ var init_Icon = __esm({
     Icon.displayName = "Icon";
   }
 });
+
+// lib/atlasSlice.ts
+function isTilesheet(a) {
+  return typeof a.tileWidth === "number";
+}
+function getAtlas(url, onReady) {
+  if (atlasCache.has(url)) return atlasCache.get(url) ?? void 0;
+  atlasCache.set(url, void 0);
+  fetch(url).then((r) => r.json()).then((json) => {
+    atlasCache.set(url, json);
+    onReady();
+  }).catch(() => {
+    atlasCache.set(url, null);
+  });
+  return void 0;
+}
+function subRectFor(atlas, sprite) {
+  if (isTilesheet(atlas)) {
+    let col;
+    let row;
+    if (sprite.includes(",")) {
+      const [c, r] = sprite.split(",").map((n) => Number(n.trim()));
+      col = c;
+      row = r;
+    } else {
+      const i = Number(sprite);
+      if (!Number.isFinite(i)) return null;
+      col = i % atlas.columns;
+      row = Math.floor(i / atlas.columns);
+    }
+    if (!Number.isFinite(col) || !Number.isFinite(row) || col < 0 || row < 0 || col >= atlas.columns || row >= atlas.rows) return null;
+    const margin = atlas.margin ?? 0;
+    const spacing = atlas.spacing ?? 0;
+    return {
+      sx: margin + col * (atlas.tileWidth + spacing),
+      sy: margin + row * (atlas.tileHeight + spacing),
+      sw: atlas.tileWidth,
+      sh: atlas.tileHeight
+    };
+  }
+  const st = atlas.subTextures[sprite];
+  if (!st) return null;
+  return { sx: st.x, sy: st.y, sw: st.width, sh: st.height };
+}
+function isAtlasAsset(asset) {
+  return !!asset && typeof asset.atlas === "string" && typeof asset.sprite === "string";
+}
+function resolveAssetSource(img, asset, onReady) {
+  if (isAtlasAsset(asset)) {
+    const atlas = getAtlas(asset.atlas, onReady);
+    if (!atlas) return null;
+    const rect = subRectFor(atlas, asset.sprite);
+    if (!rect) return null;
+    return { img, rect, aspect: rect.sw / rect.sh };
+  }
+  const natW = img.naturalWidth || 1;
+  const natH = img.naturalHeight || 1;
+  return { img, rect: null, aspect: natW / natH };
+}
+function blit(ctx, src, dx, dy, dw, dh) {
+  if (src.rect) ctx.drawImage(src.img, src.rect.sx, src.rect.sy, src.rect.sw, src.rect.sh, dx, dy, dw, dh);
+  else ctx.drawImage(src.img, dx, dy, dw, dh);
+}
+var atlasCache;
+var init_atlasSlice = __esm({
+  "lib/atlasSlice.ts"() {
+    "use client";
+    atlasCache = /* @__PURE__ */ new Map();
+  }
+});
+function useAtlasSliceDataUrl(asset) {
+  const [, bump] = React75.useReducer((x) => x + 1, 0);
+  if (!isAtlasAsset(asset)) return void 0;
+  const key = `${asset.atlas}#${asset.sprite}`;
+  const cached = sliceDataUrlCache.get(key);
+  if (cached) return cached;
+  const atlas = getAtlas(asset.atlas, bump);
+  const img = asset?.url ? getSheetImage(asset.url, bump) : null;
+  if (!atlas || !img) return void 0;
+  const rect = subRectFor(atlas, asset.sprite);
+  if (!rect) return void 0;
+  const canvas = document.createElement("canvas");
+  canvas.width = rect.sw;
+  canvas.height = rect.sh;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return void 0;
+  ctx.imageSmoothingEnabled = false;
+  ctx.drawImage(img, rect.sx, rect.sy, rect.sw, rect.sh, 0, 0, rect.sw, rect.sh);
+  const url = canvas.toDataURL();
+  sliceDataUrlCache.set(key, url);
+  return url;
+}
+function AtlasPanel({ asset, borderSlice = 16, borderWidth = 16, mode = "nineSlice", className, style, children, "aria-hidden": ariaHidden }) {
+  const dataUrl = useAtlasSliceDataUrl(asset);
+  const skin = !dataUrl ? {} : mode === "repeat" ? { backgroundImage: `url(${dataUrl})`, backgroundRepeat: "repeat" } : {
+    borderStyle: "solid",
+    borderWidth,
+    borderImageSource: `url(${dataUrl})`,
+    borderImageSlice: `${borderSlice} fill`,
+    borderImageWidth: borderWidth,
+    borderImageRepeat: "stretch",
+    imageRendering: "pixelated"
+  };
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": ariaHidden, className: cn("inline-block", className), style: { ...skin, ...style }, children });
+}
+function getSheetImage(url, onReady) {
+  const cached = imageCache.get(url);
+  if (cached) return cached;
+  (imageWaiters.get(url) ?? imageWaiters.set(url, /* @__PURE__ */ new Set()).get(url)).add(onReady);
+  if (!imageCache.has(url)) {
+    imageCache.set(url, null);
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => {
+      imageCache.set(url, img);
+      imageWaiters.get(url)?.forEach((fn) => fn());
+      imageWaiters.delete(url);
+    };
+    img.src = url;
+  }
+  return null;
+}
+function AtlasImage({
+  asset,
+  size,
+  width,
+  height,
+  fill = false,
+  fit = "contain",
+  alt,
+  className,
+  style,
+  "aria-hidden": ariaHidden
+}) {
+  const [, bump] = React75.useReducer((x) => x + 1, 0);
+  const canvasRef = React75.useRef(null);
+  const sliced = isAtlasAsset(asset);
+  const atlas = sliced ? getAtlas(asset.atlas, bump) : void 0;
+  const img = sliced && asset?.url ? getSheetImage(asset.url, bump) : null;
+  const rect = sliced && atlas ? subRectFor(atlas, asset.sprite) : null;
+  React75.useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !img || !rect) return;
+    canvas.width = rect.sw;
+    canvas.height = rect.sh;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.imageSmoothingEnabled = false;
+    ctx.clearRect(0, 0, rect.sw, rect.sh);
+    ctx.drawImage(img, rect.sx, rect.sy, rect.sw, rect.sh, 0, 0, rect.sw, rect.sh);
+  }, [img, rect?.sx, rect?.sy, rect?.sw, rect?.sh]);
+  const w = fill ? "100%" : width ?? size;
+  const h = fill ? "100%" : height ?? size;
+  const boxStyle = {
+    ...fill ? { position: "absolute", inset: 0 } : {},
+    width: w,
+    height: h,
+    objectFit: fit,
+    imageRendering: "pixelated",
+    ...style
+  };
+  if (!asset?.url) return null;
+  if (sliced) {
+    if (!rect || !img) {
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("inline-block flex-shrink-0", className), style: { ...boxStyle, objectFit: void 0 } });
+    }
+    return /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        ref: canvasRef,
+        role: ariaHidden ? void 0 : "img",
+        "aria-hidden": ariaHidden,
+        "aria-label": ariaHidden ? void 0 : alt ?? asset.name ?? asset.category ?? "",
+        className: cn("flex-shrink-0", className),
+        style: boxStyle
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: asset.url,
+      alt: alt ?? asset.name ?? asset.category ?? "",
+      "aria-hidden": ariaHidden,
+      ...typeof w === "number" ? { width: w } : {},
+      ...typeof h === "number" ? { height: h } : {},
+      className: cn("flex-shrink-0", className),
+      style: boxStyle
+    }
+  );
+}
+var sliceDataUrlCache, imageCache, imageWaiters;
+var init_AtlasImage = __esm({
+  "components/core/atoms/AtlasImage.tsx"() {
+    "use client";
+    init_atlasSlice();
+    init_cn();
+    sliceDataUrlCache = /* @__PURE__ */ new Map();
+    AtlasPanel.displayName = "AtlasPanel";
+    imageCache = /* @__PURE__ */ new Map();
+    imageWaiters = /* @__PURE__ */ new Map();
+    AtlasImage.displayName = "AtlasImage";
+  }
+});
 function isIconLike(v) {
   return typeof v.render === "function";
 }
@@ -2035,7 +2239,7 @@ function resolveIconProp(value, sizeClass) {
     const IconComp = value;
     return /* @__PURE__ */ jsx(IconComp, { className: sizeClass });
   }
-  if (React74__default.isValidElement(value)) {
+  if (React75__default.isValidElement(value)) {
     return value;
   }
   if (typeof value === "object" && value !== null && isIconLike(value)) {
@@ -2051,6 +2255,7 @@ var init_Button = __esm({
     init_cn();
     init_useEventBus();
     init_Icon();
+    init_AtlasImage();
     variantStyles = {
       primary: [
         "bg-primary text-primary-foreground",
@@ -2111,7 +2316,7 @@ var init_Button = __esm({
       md: "h-icon-default w-icon-default",
       lg: "h-icon-default w-icon-default"
     };
-    Button = React74__default.forwardRef(
+    Button = React75__default.forwardRef(
       ({
         className,
         variant = "primary",
@@ -2135,7 +2340,7 @@ var init_Button = __esm({
         const leftIconValue = leftIcon || iconProp;
         const rightIconValue = rightIcon || iconRightProp;
         const px = size === "sm" ? 16 : size === "lg" ? 20 : 16;
-        const resolvedLeftIcon = iconAsset?.url ? /* @__PURE__ */ jsx("img", { src: iconAsset.url, alt: iconAsset.name ?? iconAsset.category ?? "", width: px, height: px, style: { imageRendering: "pixelated", objectFit: "contain", width: px, height: px }, className: "flex-shrink-0" }) : resolveIconProp(leftIconValue, iconSizeStyles[size]);
+        const resolvedLeftIcon = iconAsset?.url ? /* @__PURE__ */ jsx(AtlasImage, { asset: iconAsset, size: px, alt: iconAsset.name ?? iconAsset.category ?? "", className: "flex-shrink-0" }) : resolveIconProp(leftIconValue, iconSizeStyles[size]);
         const resolvedRightIcon = resolveIconProp(rightIconValue, iconSizeStyles[size]);
         const handleClick = (e) => {
           if (action) {
@@ -2181,7 +2386,7 @@ var init_Input = __esm({
     init_cn();
     init_Icon();
     init_useEventBus();
-    Input = React74__default.forwardRef(
+    Input = React75__default.forwardRef(
       ({
         className,
         inputType,
@@ -2341,7 +2546,7 @@ var Label;
 var init_Label = __esm({
   "components/core/atoms/Label.tsx"() {
     init_cn();
-    Label = React74__default.forwardRef(
+    Label = React75__default.forwardRef(
       ({ className, required, children, ...props }, ref) => {
         return /* @__PURE__ */ jsxs(
           "label",
@@ -2368,7 +2573,7 @@ var init_Textarea = __esm({
   "components/core/atoms/Textarea.tsx"() {
     init_cn();
     init_useEventBus();
-    Textarea = React74__default.forwardRef(
+    Textarea = React75__default.forwardRef(
       ({ className, error, onChange, ...props }, ref) => {
         const eventBus = useEventBus();
         const handleChange = (e) => {
@@ -2607,7 +2812,7 @@ var init_Select = __esm({
     init_cn();
     init_Icon();
     init_useEventBus();
-    Select = React74__default.forwardRef(
+    Select = React75__default.forwardRef(
       (props, _ref) => {
         const { multiple, searchable, clearable } = props;
         if (multiple || searchable || clearable) {
@@ -2624,7 +2829,7 @@ var init_Checkbox = __esm({
   "components/core/atoms/Checkbox.tsx"() {
     init_cn();
     init_useEventBus();
-    Checkbox = React74__default.forwardRef(
+    Checkbox = React75__default.forwardRef(
       ({ className, label, id, onChange, ...props }, ref) => {
         const inputId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
         const eventBus = useEventBus();
@@ -2678,7 +2883,7 @@ var init_Spinner = __esm({
       md: "h-6 w-6",
       lg: "h-8 w-8"
     };
-    Spinner = React74__default.forwardRef(
+    Spinner = React75__default.forwardRef(
       ({ className, size = "md", overlay, ...props }, ref) => {
         if (overlay) {
           return /* @__PURE__ */ jsx(
@@ -2768,7 +2973,7 @@ var init_Card = __esm({
       chip: "shadow-none rounded-pill border-[length:var(--border-width)] border-border",
       "tile-image-first": "p-0 overflow-hidden"
     };
-    Card = React74__default.forwardRef(
+    Card = React75__default.forwardRef(
       ({
         className,
         variant = "bordered",
@@ -2816,9 +3021,9 @@ var init_Card = __esm({
       }
     );
     Card.displayName = "Card";
-    CardHeader = React74__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
+    CardHeader = React75__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
     CardHeader.displayName = "CardHeader";
-    CardTitle = React74__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    CardTitle = React75__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
       "h3",
       {
         ref,
@@ -2831,11 +3036,11 @@ var init_Card = __esm({
       }
     ));
     CardTitle.displayName = "CardTitle";
-    CardContent = React74__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
+    CardContent = React75__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
     CardContent.displayName = "CardContent";
     CardBody = CardContent;
     CardBody.displayName = "CardBody";
-    CardFooter = React74__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    CardFooter = React75__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
       "div",
       {
         ref,
@@ -2851,6 +3056,7 @@ var init_Badge = __esm({
   "components/core/atoms/Badge.tsx"() {
     init_cn();
     init_Icon();
+    init_AtlasImage();
     variantStyles3 = {
       default: [
         "bg-muted text-foreground",
@@ -2888,7 +3094,7 @@ var init_Badge = __esm({
       md: "px-2.5 py-1 text-sm",
       lg: "px-3 py-1.5 text-base"
     };
-    Badge = React74__default.forwardRef(
+    Badge = React75__default.forwardRef(
       ({ className, variant = "default", size = "sm", amount, label, icon, iconAsset, children, onRemove, removeLabel, ...props }, ref) => {
         const iconSizes3 = {
           sm: "h-icon-default w-icon-default",
@@ -2896,7 +3102,7 @@ var init_Badge = __esm({
           lg: "h-icon-default w-icon-default"
         };
         const iconPx = size === "lg" ? 20 : 16;
-        const resolvedIcon = iconAsset?.url ? /* @__PURE__ */ jsx("img", { src: iconAsset.url, alt: iconAsset.name ?? iconAsset.category ?? "", width: iconPx, height: iconPx, style: { imageRendering: "pixelated", objectFit: "contain", width: iconPx, height: iconPx }, className: "flex-shrink-0" }) : typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, className: iconSizes3[size] }) : icon ? /* @__PURE__ */ jsx(Icon, { icon, className: iconSizes3[size] }) : null;
+        const resolvedIcon = iconAsset?.url ? /* @__PURE__ */ jsx(AtlasImage, { asset: iconAsset, size: iconPx, alt: iconAsset.name ?? iconAsset.category ?? "", className: "flex-shrink-0" }) : typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, className: iconSizes3[size] }) : icon ? /* @__PURE__ */ jsx(Icon, { icon, className: iconSizes3[size] }) : null;
         return /* @__PURE__ */ jsxs(
           "span",
           {
@@ -2982,7 +3188,7 @@ var init_FilterPill = __esm({
       md: "w-3.5 h-3.5",
       lg: "w-4 h-4"
     };
-    FilterPill = React74__default.forwardRef(
+    FilterPill = React75__default.forwardRef(
       ({
         className,
         variant = "default",
@@ -3111,8 +3317,8 @@ var init_Avatar = __esm({
       actionPayload
     }) => {
       const eventBus = useEventBus();
-      const [imgFailed, setImgFailed] = React74__default.useState(false);
-      React74__default.useEffect(() => {
+      const [imgFailed, setImgFailed] = React75__default.useState(false);
+      React75__default.useEffect(() => {
         setImgFailed(false);
       }, [src]);
       const initials = providedInitials ?? (name ? generateInitials(name) : void 0);
@@ -3364,7 +3570,7 @@ var init_Box = __esm({
       fixed: "fixed",
       sticky: "sticky"
     };
-    Box = React74__default.forwardRef(
+    Box = React75__default.forwardRef(
       ({
         padding,
         paddingX,
@@ -3429,7 +3635,7 @@ var init_Box = __esm({
           onPointerDown?.(e);
         }, [hoverEvent, tapReveal, triggerProps, onPointerDown]);
         const isClickable = action || onClick;
-        return React74__default.createElement(
+        return React75__default.createElement(
           Component,
           {
             ref,
@@ -3483,7 +3689,7 @@ var init_Center = __esm({
       as: Component = "div"
     }) => {
       const mergedStyle = minHeight ? { minHeight, ...style } : style;
-      return React74__default.createElement(Component, {
+      return React75__default.createElement(Component, {
         className: cn(
           inline ? "inline-flex" : "flex",
           horizontal && "justify-center",
@@ -3751,7 +3957,7 @@ var init_Radio = __esm({
       md: "w-2.5 h-2.5",
       lg: "w-3 h-3"
     };
-    Radio = React74__default.forwardRef(
+    Radio = React75__default.forwardRef(
       ({
         label,
         helperText,
@@ -3768,12 +3974,12 @@ var init_Radio = __esm({
         onChange,
         ...props
       }, ref) => {
-        const reactId = React74__default.useId();
+        const reactId = React75__default.useId();
         const baseId = id || `radio-${reactId}`;
         const hasError = !!error;
         const eventBus = useEventBus();
-        const [selected, setSelected] = React74__default.useState(value);
-        React74__default.useEffect(() => {
+        const [selected, setSelected] = React75__default.useState(value);
+        React75__default.useEffect(() => {
           if (value !== void 0) setSelected(value);
         }, [value]);
         const pick = (next, e) => {
@@ -3955,7 +4161,7 @@ var init_Switch = __esm({
   "components/core/atoms/Switch.tsx"() {
     "use client";
     init_cn();
-    Switch = React74.forwardRef(
+    Switch = React75.forwardRef(
       ({
         checked,
         defaultChecked = false,
@@ -3966,10 +4172,10 @@ var init_Switch = __esm({
         name,
         className
       }, ref) => {
-        const [isChecked, setIsChecked] = React74.useState(
+        const [isChecked, setIsChecked] = React75.useState(
           checked !== void 0 ? checked : defaultChecked
         );
-        React74.useEffect(() => {
+        React75.useEffect(() => {
           if (checked !== void 0) {
             setIsChecked(checked);
           }
@@ -4132,7 +4338,7 @@ var init_Stack = __esm({
       };
       const isHorizontal = direction === "horizontal";
       const directionClass = responsive && isHorizontal ? reverse ? "flex-col-reverse md:flex-row-reverse" : "flex-col md:flex-row" : isHorizontal ? reverse ? "flex-row-reverse" : "flex-row" : reverse ? "flex-col-reverse" : "flex-col";
-      return React74__default.createElement(
+      return React75__default.createElement(
         Component,
         {
           className: cn(
@@ -4328,7 +4534,7 @@ var init_Typography = __esm({
     }) => {
       const variant = variantProp ?? (level ? `h${level}` : "body1");
       const Component = as || defaultElements[variant];
-      return React74__default.createElement(
+      return React75__default.createElement(
         Component,
         {
           id,
@@ -4487,7 +4693,7 @@ var Dialog;
 var init_Dialog = __esm({
   "components/core/atoms/Dialog.tsx"() {
     init_cn();
-    Dialog = React74__default.forwardRef(
+    Dialog = React75__default.forwardRef(
       ({
         role = "dialog",
         "aria-modal": ariaModal = true,
@@ -4513,7 +4719,7 @@ var Aside;
 var init_Aside = __esm({
   "components/core/atoms/Aside.tsx"() {
     init_cn();
-    Aside = React74__default.forwardRef(
+    Aside = React75__default.forwardRef(
       ({ className, children, ...rest }, ref) => /* @__PURE__ */ jsx("aside", { ref, className: cn(className), ...rest, children })
     );
     Aside.displayName = "Aside";
@@ -4592,9 +4798,9 @@ var init_LawReferenceTooltip = __esm({
       className
     }) => {
       const { t } = useTranslate();
-      const [isVisible, setIsVisible] = React74__default.useState(false);
-      const timeoutRef = React74__default.useRef(null);
-      const triggerRef = React74__default.useRef(null);
+      const [isVisible, setIsVisible] = React75__default.useState(false);
+      const timeoutRef = React75__default.useRef(null);
+      const triggerRef = React75__default.useRef(null);
       const handleMouseEnter = () => {
         if (timeoutRef.current) clearTimeout(timeoutRef.current);
         timeoutRef.current = setTimeout(() => setIsVisible(true), 200);
@@ -4605,7 +4811,7 @@ var init_LawReferenceTooltip = __esm({
       };
       const { revealed, triggerProps } = useTapReveal({ refs: [triggerRef] });
       const open = isVisible || revealed;
-      React74__default.useEffect(() => {
+      React75__default.useEffect(() => {
         return () => {
           if (timeoutRef.current) clearTimeout(timeoutRef.current);
         };
@@ -4815,7 +5021,7 @@ var init_StatusDot = __esm({
       md: "w-2.5 h-2.5",
       lg: "w-3 h-3"
     };
-    StatusDot = React74__default.forwardRef(
+    StatusDot = React75__default.forwardRef(
       ({ className, status = "offline", pulse = false, size = "md", label, ...props }, ref) => {
         return /* @__PURE__ */ jsx(
           "span",
@@ -4869,7 +5075,7 @@ var init_TrendIndicator = __esm({
       down: "trending-down",
       flat: "arrow-right"
     };
-    TrendIndicator = React74__default.forwardRef(
+    TrendIndicator = React75__default.forwardRef(
       ({
         className,
         value,
@@ -4936,7 +5142,7 @@ var init_RangeSlider = __esm({
       md: "w-4 h-4",
       lg: "w-5 h-5"
     };
-    RangeSlider = React74__default.forwardRef(
+    RangeSlider = React75__default.forwardRef(
       ({
         className,
         min = 0,
@@ -5530,7 +5736,7 @@ var init_ContentSection = __esm({
       md: "py-16",
       lg: "py-24"
     };
-    ContentSection = React74__default.forwardRef(
+    ContentSection = React75__default.forwardRef(
       ({ children, background = "default", padding = "lg", id, className }, ref) => {
         return /* @__PURE__ */ jsx(
           Box,
@@ -6064,7 +6270,7 @@ var init_AnimatedReveal = __esm({
       "scale-up": { opacity: 1, transform: "scale(1) translateY(0)" },
       "none": {}
     };
-    AnimatedReveal = React74__default.forwardRef(
+    AnimatedReveal = React75__default.forwardRef(
       ({
         trigger = "scroll",
         animation = "fade-up",
@@ -6224,7 +6430,7 @@ var init_AnimatedGraphic = __esm({
   "components/marketing/atoms/AnimatedGraphic.tsx"() {
     "use client";
     init_cn();
-    AnimatedGraphic = React74__default.forwardRef(
+    AnimatedGraphic = React75__default.forwardRef(
       ({
         src,
         svgContent,
@@ -6247,7 +6453,7 @@ var init_AnimatedGraphic = __esm({
         const fetchedSvg = useFetchedSvg(svgContent ? void 0 : src);
         const resolvedSvg = svgContent ?? fetchedSvg;
         const prevAnimateRef = useRef(animate);
-        const setRef = React74__default.useCallback(
+        const setRef = React75__default.useCallback(
           (node) => {
             containerRef.current = node;
             if (typeof ref === "function") ref(node);
@@ -6920,7 +7126,7 @@ var init_ErrorBoundary = __esm({
         }
       );
     };
-    ErrorBoundary = class extends React74__default.Component {
+    ErrorBoundary = class extends React75__default.Component {
       constructor(props) {
         super(props);
         __publicField(this, "reset", () => {
@@ -7216,7 +7422,7 @@ var init_Container = __esm({
       as: Component = "div"
     }) => {
       const resolvedSize = maxWidth ?? size ?? "lg";
-      return React74__default.createElement(
+      return React75__default.createElement(
         Component,
         {
           className: cn(
@@ -7933,13 +8139,11 @@ function GameIcon({ assetUrl, icon, size = "md", alt, className }) {
   const px = typeof size === "number" ? size : sizeMap[size];
   if (assetUrl?.url) {
     return /* @__PURE__ */ jsx(
-      "img",
+      AtlasImage,
       {
-        src: assetUrl.url,
+        asset: assetUrl,
+        size: px,
         alt: alt ?? assetUrl.category ?? "",
-        width: px,
-        height: px,
-        style: { imageRendering: "pixelated", objectFit: "contain", width: px, height: px },
         className: cn("flex-shrink-0", className)
       }
     );
@@ -7953,6 +8157,7 @@ var init_GameIcon = __esm({
     "use client";
     init_cn();
     init_Icon();
+    init_AtlasImage();
     sizeMap = {
       sm: 16,
       md: 24,
@@ -8549,6 +8754,462 @@ var init_ComponentPatterns = __esm({
     AlertPattern.displayName = "AlertPattern";
   }
 });
+function resolveColor2(color, ctx, fallback) {
+  if (!color) return fallback;
+  if (color.startsWith("var(")) {
+    ctx.canvas.style;
+    const m = /^var\((--[^,)]+)(?:,\s*([^)]+))?\)$/.exec(color);
+    if (m) {
+      const computed = getComputedStyle(ctx.canvas).getPropertyValue(m[1]).trim();
+      return computed || m[2]?.trim() || fallback;
+    }
+  }
+  return color;
+}
+function shapeBounds(shape) {
+  switch (shape.type) {
+    case "line":
+    case "arrow":
+      if (shape.x1 == null || shape.y1 == null || shape.x2 == null || shape.y2 == null) return null;
+      return {
+        x: Math.min(shape.x1, shape.x2) - 6,
+        y: Math.min(shape.y1, shape.y2) - 6,
+        w: Math.abs(shape.x2 - shape.x1) + 12,
+        h: Math.abs(shape.y2 - shape.y1) + 12
+      };
+    case "circle":
+      if (shape.x == null || shape.y == null || shape.radius == null) return null;
+      return {
+        x: shape.x - shape.radius - 4,
+        y: shape.y - shape.radius - 4,
+        w: shape.radius * 2 + 8,
+        h: shape.radius * 2 + 8
+      };
+    case "rect":
+      if (shape.x == null || shape.y == null || shape.width == null || shape.height == null) return null;
+      return { x: shape.x - 4, y: shape.y - 4, w: shape.width + 8, h: shape.height + 8 };
+    case "polygon":
+      if (!shape.points || shape.points.length === 0) return null;
+      {
+        const xs = shape.points.map((p) => p.x);
+        const ys = shape.points.map((p) => p.y);
+        const minX = Math.min(...xs);
+        const minY = Math.min(...ys);
+        return {
+          x: minX - 4,
+          y: minY - 4,
+          w: Math.max(...xs) - minX + 8,
+          h: Math.max(...ys) - minY + 8
+        };
+      }
+    case "text":
+      if (shape.x == null || shape.y == null) return null;
+      return { x: shape.x - 4, y: shape.y - (shape.fontSize ?? 14) - 4, w: 120, h: (shape.fontSize ?? 14) + 8 };
+    default:
+      return null;
+  }
+}
+function drawArrowHead(ctx, x1, y1, x2, y2, size) {
+  const angle = Math.atan2(y2 - y1, x2 - x1);
+  ctx.beginPath();
+  ctx.moveTo(x2, y2);
+  ctx.lineTo(x2 - size * Math.cos(angle - Math.PI / 6), y2 - size * Math.sin(angle - Math.PI / 6));
+  ctx.lineTo(x2 - size * Math.cos(angle + Math.PI / 6), y2 - size * Math.sin(angle + Math.PI / 6));
+  ctx.closePath();
+  ctx.fill();
+}
+function drawShape(ctx, shape, width, height) {
+  ctx.save();
+  const opacity = shape.opacity ?? 1;
+  ctx.globalAlpha = opacity;
+  const stroke = resolveColor2(shape.color, ctx, "#333333");
+  const fill = shape.fill ? resolveColor2(shape.fill, ctx, "#cccccc") : void 0;
+  ctx.lineWidth = shape.lineWidth ?? 2;
+  switch (shape.type) {
+    case "grid": {
+      const step = shape.step ?? 40;
+      ctx.strokeStyle = stroke;
+      ctx.globalAlpha = opacity * 0.25;
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      for (let x = 0; x <= width; x += step) {
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, height);
+      }
+      for (let y = 0; y <= height; y += step) {
+        ctx.moveTo(0, y);
+        ctx.lineTo(width, y);
+      }
+      ctx.stroke();
+      break;
+    }
+    case "axis": {
+      const axis = shape.axis ?? "x";
+      ctx.strokeStyle = stroke;
+      ctx.lineWidth = shape.lineWidth ?? 2;
+      ctx.beginPath();
+      if (axis === "x") {
+        ctx.moveTo(0, height / 2);
+        ctx.lineTo(width, height / 2);
+      } else {
+        ctx.moveTo(width / 2, 0);
+        ctx.lineTo(width / 2, height);
+      }
+      ctx.stroke();
+      break;
+    }
+    case "line": {
+      if (shape.x1 == null || shape.y1 == null || shape.x2 == null || shape.y2 == null) break;
+      ctx.strokeStyle = stroke;
+      ctx.beginPath();
+      ctx.moveTo(shape.x1, shape.y1);
+      ctx.lineTo(shape.x2, shape.y2);
+      ctx.stroke();
+      break;
+    }
+    case "arrow": {
+      if (shape.x1 == null || shape.y1 == null || shape.x2 == null || shape.y2 == null) break;
+      ctx.strokeStyle = stroke;
+      ctx.fillStyle = stroke;
+      ctx.beginPath();
+      ctx.moveTo(shape.x1, shape.y1);
+      ctx.lineTo(shape.x2, shape.y2);
+      ctx.stroke();
+      drawArrowHead(ctx, shape.x1, shape.y1, shape.x2, shape.y2, 10);
+      break;
+    }
+    case "circle": {
+      if (shape.x == null || shape.y == null || shape.radius == null) break;
+      ctx.beginPath();
+      ctx.arc(shape.x, shape.y, shape.radius, 0, Math.PI * 2);
+      if (fill) {
+        ctx.fillStyle = fill;
+        ctx.fill();
+      }
+      ctx.strokeStyle = stroke;
+      ctx.stroke();
+      break;
+    }
+    case "rect": {
+      if (shape.x == null || shape.y == null || shape.width == null || shape.height == null) break;
+      if (fill) {
+        ctx.fillStyle = fill;
+        ctx.fillRect(shape.x, shape.y, shape.width, shape.height);
+      }
+      ctx.strokeStyle = stroke;
+      ctx.strokeRect(shape.x, shape.y, shape.width, shape.height);
+      break;
+    }
+    case "polygon": {
+      if (!shape.points || shape.points.length < 2) break;
+      ctx.beginPath();
+      ctx.moveTo(shape.points[0].x, shape.points[0].y);
+      for (let i = 1; i < shape.points.length; i++) {
+        ctx.lineTo(shape.points[i].x, shape.points[i].y);
+      }
+      ctx.closePath();
+      if (fill) {
+        ctx.fillStyle = fill;
+        ctx.fill();
+      }
+      ctx.strokeStyle = stroke;
+      ctx.stroke();
+      break;
+    }
+    case "path": {
+      if (!shape.path) break;
+      const p = new Path2D(shape.path);
+      if (fill) {
+        ctx.fillStyle = fill;
+        ctx.fill(p);
+      }
+      ctx.strokeStyle = stroke;
+      ctx.stroke(p);
+      break;
+    }
+    case "text": {
+      if (shape.x == null || shape.y == null || !shape.text) break;
+      ctx.fillStyle = stroke;
+      ctx.font = `${shape.fontSize ?? 14}px system-ui, sans-serif`;
+      ctx.textAlign = shape.align ?? "left";
+      ctx.textBaseline = "middle";
+      ctx.fillText(shape.text, shape.x, shape.y);
+      break;
+    }
+  }
+  ctx.restore();
+}
+var LearningCanvas;
+var init_LearningCanvas = __esm({
+  "components/learning/atoms/LearningCanvas.tsx"() {
+    "use client";
+    init_cn();
+    init_useEventBus();
+    LearningCanvas = ({
+      className,
+      width = 600,
+      height = 400,
+      backgroundColor,
+      shapes = [],
+      interactive = false,
+      animate = false,
+      onShapeClick,
+      onShapeHover,
+      isLoading,
+      error
+    }) => {
+      const canvasRef = useRef(null);
+      const eventBus = useEventBus();
+      const animRef = useRef(0);
+      const hoverIndexRef = useRef(-1);
+      const findShapeAt = useCallback((clientX, clientY) => {
+        const canvas = canvasRef.current;
+        if (!canvas) return -1;
+        const rect = canvas.getBoundingClientRect();
+        const x = clientX - rect.left;
+        const y = clientY - rect.top;
+        for (let i = shapes.length - 1; i >= 0; i--) {
+          const b = shapeBounds(shapes[i]);
+          if (b && x >= b.x && x <= b.x + b.w && y >= b.y && y <= b.y + b.h) {
+            return i;
+          }
+        }
+        return -1;
+      }, [shapes]);
+      const draw = useCallback(() => {
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+        const ctx = canvas.getContext("2d");
+        if (!ctx) return;
+        const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+        canvas.width = Math.max(1, Math.floor(width * dpr));
+        canvas.height = Math.max(1, Math.floor(height * dpr));
+        canvas.style.width = `${width}px`;
+        canvas.style.height = `${height}px`;
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        ctx.clearRect(0, 0, width, height);
+        if (backgroundColor) {
+          ctx.fillStyle = backgroundColor;
+          ctx.fillRect(0, 0, width, height);
+        }
+        for (const shape of shapes) {
+          drawShape(ctx, shape, width, height);
+        }
+      }, [width, height, backgroundColor, shapes]);
+      useEffect(() => {
+        draw();
+      }, [draw]);
+      useEffect(() => {
+        if (!animate) return;
+        const loop = () => {
+          draw();
+          animRef.current = requestAnimationFrame(loop);
+        };
+        animRef.current = requestAnimationFrame(loop);
+        return () => cancelAnimationFrame(animRef.current);
+      }, [animate, draw]);
+      const handlePointerMove = useCallback(
+        (e) => {
+          if (!interactive) return;
+          const idx = findShapeAt(e.clientX, e.clientY);
+          if (idx !== hoverIndexRef.current) {
+            hoverIndexRef.current = idx;
+            if (idx >= 0) {
+              const shape = shapes[idx];
+              const payload = { id: shape.id, type: shape.type, index: idx };
+              if (onShapeHover) onShapeHover(payload);
+              else if (eventBus) eventBus.emit(`UI:SHAPE_HOVER`, payload);
+            }
+          }
+        },
+        [interactive, onShapeHover, eventBus, findShapeAt, shapes]
+      );
+      const handleClick = useCallback(
+        (e) => {
+          if (!interactive) return;
+          const idx = findShapeAt(e.clientX, e.clientY);
+          if (idx >= 0) {
+            const shape = shapes[idx];
+            const payload = { id: shape.id, type: shape.type, index: idx };
+            if (onShapeClick) onShapeClick(payload);
+            else if (eventBus) eventBus.emit(`UI:SHAPE_CLICK`, payload);
+          }
+        },
+        [interactive, onShapeClick, eventBus, findShapeAt, shapes]
+      );
+      if (isLoading || error) {
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex items-center justify-center rounded border border-border bg-surface",
+              className
+            ),
+            style: { width, height },
+            children: error ? /* @__PURE__ */ jsx("span", { className: "text-sm text-destructive", children: error.message }) : /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Loading canvas\u2026" })
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        "canvas",
+        {
+          ref: canvasRef,
+          className: cn("block touch-none rounded border border-border", className),
+          style: { width, height },
+          onClick: handleClick,
+          onPointerMove: handlePointerMove
+        }
+      );
+    };
+  }
+});
+var DEFAULT_BAR_COLOR, DEFAULT_CELL_COLOR, DEFAULT_POINTER_COLOR, POINTER_BAND, TOP_PAD, AlgorithmCanvas;
+var init_AlgorithmCanvas = __esm({
+  "components/learning/molecules/AlgorithmCanvas.tsx"() {
+    "use client";
+    init_atoms();
+    init_Stack();
+    init_LearningCanvas();
+    DEFAULT_BAR_COLOR = "#3b82f6";
+    DEFAULT_CELL_COLOR = "#e5e7eb";
+    DEFAULT_POINTER_COLOR = "#dc2626";
+    POINTER_BAND = 34;
+    TOP_PAD = 12;
+    AlgorithmCanvas = ({
+      className,
+      width = 600,
+      height = 400,
+      title,
+      backgroundColor,
+      bars = [],
+      cells = [],
+      pointers = [],
+      shapes = [],
+      interactive = false,
+      animate = false,
+      onShapeClick,
+      isLoading,
+      error
+    }) => {
+      const derivedShapes = useMemo(() => {
+        const out = [];
+        if (bars.length > 0) {
+          const slot = width / bars.length;
+          const barW = slot * 0.8;
+          const gap = slot * 0.1;
+          const baseline = height - POINTER_BAND;
+          const usableH = baseline - TOP_PAD;
+          const maxV = Math.max(1, ...bars.map((b) => Number.isFinite(b.value) ? b.value : 0));
+          bars.forEach((bar, i) => {
+            const v = Number.isFinite(bar.value) ? bar.value : 0;
+            const bh = Math.max(0, v / maxV * usableH);
+            const x = i * slot + gap;
+            const color = bar.color ?? DEFAULT_BAR_COLOR;
+            out.push({
+              type: "rect",
+              id: `bar-${i}`,
+              x,
+              y: baseline - bh,
+              width: barW,
+              height: bh,
+              color,
+              fill: color
+            });
+            const label = bar.label ?? (bars.length <= 24 ? String(v) : void 0);
+            if (label) {
+              out.push({
+                type: "text",
+                x: x + barW / 2,
+                y: baseline - bh - 8,
+                text: label,
+                color: "#374151",
+                fontSize: 11,
+                align: "center"
+              });
+            }
+          });
+          pointers.forEach((p) => {
+            if (p.index < 0 || p.index >= bars.length) return;
+            const cx = p.index * slot + slot / 2;
+            const color = p.color ?? DEFAULT_POINTER_COLOR;
+            out.push({
+              type: "arrow",
+              x1: cx,
+              y1: height - 6,
+              x2: cx,
+              y2: baseline + 4,
+              color,
+              lineWidth: 2
+            });
+            if (p.label) {
+              out.push({
+                type: "text",
+                x: cx,
+                y: height - 22,
+                text: p.label,
+                color,
+                fontSize: 11,
+                align: "center"
+              });
+            }
+          });
+        }
+        if (cells.length > 0) {
+          const maxCol = Math.max(0, ...cells.map((c) => c.col)) + 1;
+          const maxRow = Math.max(0, ...cells.map((c) => c.row)) + 1;
+          const cw = width / maxCol;
+          const ch = height / maxRow;
+          cells.forEach((c, i) => {
+            const x = c.col * cw;
+            const y = c.row * ch;
+            const color = c.color ?? DEFAULT_CELL_COLOR;
+            out.push({
+              type: "rect",
+              id: `cell-${i}`,
+              x: x + 1,
+              y: y + 1,
+              width: cw - 2,
+              height: ch - 2,
+              color: "#9ca3af",
+              fill: color
+            });
+            const label = c.label ?? (c.value != null ? String(c.value) : void 0);
+            if (label && cw >= 18 && ch >= 14) {
+              out.push({
+                type: "text",
+                x: x + cw / 2,
+                y: y + ch / 2,
+                text: label,
+                color: "#111827",
+                fontSize: 12,
+                align: "center"
+              });
+            }
+          });
+        }
+        out.push(...shapes);
+        return out;
+      }, [bars, cells, pointers, shapes, width, height]);
+      return /* @__PURE__ */ jsx(Card, { className, children: /* @__PURE__ */ jsxs(VStack, { gap: "sm", children: [
+        title ? /* @__PURE__ */ jsx(Typography, { variant: "h4", children: title }) : null,
+        /* @__PURE__ */ jsx(
+          LearningCanvas,
+          {
+            width,
+            height,
+            backgroundColor,
+            shapes: derivedShapes,
+            interactive,
+            animate,
+            onShapeClick,
+            isLoading,
+            error
+          }
+        )
+      ] }) });
+    };
+  }
+});
 var AuthLayout;
 var init_AuthLayout = __esm({
   "components/marketing/templates/AuthLayout.tsx"() {
@@ -9517,315 +10178,6 @@ var init_BehaviorView = __esm({
     BehaviorView.displayName = "BehaviorView";
   }
 });
-function resolveColor2(color, ctx, fallback) {
-  if (!color) return fallback;
-  if (color.startsWith("var(")) {
-    ctx.canvas.style;
-    const m = /^var\((--[^,)]+)(?:,\s*([^)]+))?\)$/.exec(color);
-    if (m) {
-      const computed = getComputedStyle(ctx.canvas).getPropertyValue(m[1]).trim();
-      return computed || m[2]?.trim() || fallback;
-    }
-  }
-  return color;
-}
-function shapeBounds(shape) {
-  switch (shape.type) {
-    case "line":
-    case "arrow":
-      if (shape.x1 == null || shape.y1 == null || shape.x2 == null || shape.y2 == null) return null;
-      return {
-        x: Math.min(shape.x1, shape.x2) - 6,
-        y: Math.min(shape.y1, shape.y2) - 6,
-        w: Math.abs(shape.x2 - shape.x1) + 12,
-        h: Math.abs(shape.y2 - shape.y1) + 12
-      };
-    case "circle":
-      if (shape.x == null || shape.y == null || shape.radius == null) return null;
-      return {
-        x: shape.x - shape.radius - 4,
-        y: shape.y - shape.radius - 4,
-        w: shape.radius * 2 + 8,
-        h: shape.radius * 2 + 8
-      };
-    case "rect":
-      if (shape.x == null || shape.y == null || shape.width == null || shape.height == null) return null;
-      return { x: shape.x - 4, y: shape.y - 4, w: shape.width + 8, h: shape.height + 8 };
-    case "polygon":
-      if (!shape.points || shape.points.length === 0) return null;
-      {
-        const xs = shape.points.map((p) => p.x);
-        const ys = shape.points.map((p) => p.y);
-        const minX = Math.min(...xs);
-        const minY = Math.min(...ys);
-        return {
-          x: minX - 4,
-          y: minY - 4,
-          w: Math.max(...xs) - minX + 8,
-          h: Math.max(...ys) - minY + 8
-        };
-      }
-    case "text":
-      if (shape.x == null || shape.y == null) return null;
-      return { x: shape.x - 4, y: shape.y - (shape.fontSize ?? 14) - 4, w: 120, h: (shape.fontSize ?? 14) + 8 };
-    default:
-      return null;
-  }
-}
-function drawArrowHead(ctx, x1, y1, x2, y2, size) {
-  const angle = Math.atan2(y2 - y1, x2 - x1);
-  ctx.beginPath();
-  ctx.moveTo(x2, y2);
-  ctx.lineTo(x2 - size * Math.cos(angle - Math.PI / 6), y2 - size * Math.sin(angle - Math.PI / 6));
-  ctx.lineTo(x2 - size * Math.cos(angle + Math.PI / 6), y2 - size * Math.sin(angle + Math.PI / 6));
-  ctx.closePath();
-  ctx.fill();
-}
-function drawShape(ctx, shape, width, height) {
-  ctx.save();
-  const opacity = shape.opacity ?? 1;
-  ctx.globalAlpha = opacity;
-  const stroke = resolveColor2(shape.color, ctx, "#333333");
-  const fill = shape.fill ? resolveColor2(shape.fill, ctx, "#cccccc") : void 0;
-  ctx.lineWidth = shape.lineWidth ?? 2;
-  switch (shape.type) {
-    case "grid": {
-      const step = shape.step ?? 40;
-      ctx.strokeStyle = stroke;
-      ctx.globalAlpha = opacity * 0.25;
-      ctx.lineWidth = 1;
-      ctx.beginPath();
-      for (let x = 0; x <= width; x += step) {
-        ctx.moveTo(x, 0);
-        ctx.lineTo(x, height);
-      }
-      for (let y = 0; y <= height; y += step) {
-        ctx.moveTo(0, y);
-        ctx.lineTo(width, y);
-      }
-      ctx.stroke();
-      break;
-    }
-    case "axis": {
-      const axis = shape.axis ?? "x";
-      ctx.strokeStyle = stroke;
-      ctx.lineWidth = shape.lineWidth ?? 2;
-      ctx.beginPath();
-      if (axis === "x") {
-        ctx.moveTo(0, height / 2);
-        ctx.lineTo(width, height / 2);
-      } else {
-        ctx.moveTo(width / 2, 0);
-        ctx.lineTo(width / 2, height);
-      }
-      ctx.stroke();
-      break;
-    }
-    case "line": {
-      if (shape.x1 == null || shape.y1 == null || shape.x2 == null || shape.y2 == null) break;
-      ctx.strokeStyle = stroke;
-      ctx.beginPath();
-      ctx.moveTo(shape.x1, shape.y1);
-      ctx.lineTo(shape.x2, shape.y2);
-      ctx.stroke();
-      break;
-    }
-    case "arrow": {
-      if (shape.x1 == null || shape.y1 == null || shape.x2 == null || shape.y2 == null) break;
-      ctx.strokeStyle = stroke;
-      ctx.fillStyle = stroke;
-      ctx.beginPath();
-      ctx.moveTo(shape.x1, shape.y1);
-      ctx.lineTo(shape.x2, shape.y2);
-      ctx.stroke();
-      drawArrowHead(ctx, shape.x1, shape.y1, shape.x2, shape.y2, 10);
-      break;
-    }
-    case "circle": {
-      if (shape.x == null || shape.y == null || shape.radius == null) break;
-      ctx.beginPath();
-      ctx.arc(shape.x, shape.y, shape.radius, 0, Math.PI * 2);
-      if (fill) {
-        ctx.fillStyle = fill;
-        ctx.fill();
-      }
-      ctx.strokeStyle = stroke;
-      ctx.stroke();
-      break;
-    }
-    case "rect": {
-      if (shape.x == null || shape.y == null || shape.width == null || shape.height == null) break;
-      if (fill) {
-        ctx.fillStyle = fill;
-        ctx.fillRect(shape.x, shape.y, shape.width, shape.height);
-      }
-      ctx.strokeStyle = stroke;
-      ctx.strokeRect(shape.x, shape.y, shape.width, shape.height);
-      break;
-    }
-    case "polygon": {
-      if (!shape.points || shape.points.length < 2) break;
-      ctx.beginPath();
-      ctx.moveTo(shape.points[0].x, shape.points[0].y);
-      for (let i = 1; i < shape.points.length; i++) {
-        ctx.lineTo(shape.points[i].x, shape.points[i].y);
-      }
-      ctx.closePath();
-      if (fill) {
-        ctx.fillStyle = fill;
-        ctx.fill();
-      }
-      ctx.strokeStyle = stroke;
-      ctx.stroke();
-      break;
-    }
-    case "path": {
-      if (!shape.path) break;
-      const p = new Path2D(shape.path);
-      if (fill) {
-        ctx.fillStyle = fill;
-        ctx.fill(p);
-      }
-      ctx.strokeStyle = stroke;
-      ctx.stroke(p);
-      break;
-    }
-    case "text": {
-      if (shape.x == null || shape.y == null || !shape.text) break;
-      ctx.fillStyle = stroke;
-      ctx.font = `${shape.fontSize ?? 14}px system-ui, sans-serif`;
-      ctx.textAlign = shape.align ?? "left";
-      ctx.textBaseline = "middle";
-      ctx.fillText(shape.text, shape.x, shape.y);
-      break;
-    }
-  }
-  ctx.restore();
-}
-var LearningCanvas;
-var init_LearningCanvas = __esm({
-  "components/learning/atoms/LearningCanvas.tsx"() {
-    "use client";
-    init_cn();
-    init_useEventBus();
-    LearningCanvas = ({
-      className,
-      width = 600,
-      height = 400,
-      backgroundColor,
-      shapes = [],
-      interactive = false,
-      animate = false,
-      onShapeClick,
-      onShapeHover,
-      isLoading,
-      error
-    }) => {
-      const canvasRef = useRef(null);
-      const eventBus = useEventBus();
-      const animRef = useRef(0);
-      const hoverIndexRef = useRef(-1);
-      const findShapeAt = useCallback((clientX, clientY) => {
-        const canvas = canvasRef.current;
-        if (!canvas) return -1;
-        const rect = canvas.getBoundingClientRect();
-        const x = clientX - rect.left;
-        const y = clientY - rect.top;
-        for (let i = shapes.length - 1; i >= 0; i--) {
-          const b = shapeBounds(shapes[i]);
-          if (b && x >= b.x && x <= b.x + b.w && y >= b.y && y <= b.y + b.h) {
-            return i;
-          }
-        }
-        return -1;
-      }, [shapes]);
-      const draw = useCallback(() => {
-        const canvas = canvasRef.current;
-        if (!canvas) return;
-        const ctx = canvas.getContext("2d");
-        if (!ctx) return;
-        const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
-        canvas.width = Math.max(1, Math.floor(width * dpr));
-        canvas.height = Math.max(1, Math.floor(height * dpr));
-        canvas.style.width = `${width}px`;
-        canvas.style.height = `${height}px`;
-        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-        ctx.clearRect(0, 0, width, height);
-        if (backgroundColor) {
-          ctx.fillStyle = backgroundColor;
-          ctx.fillRect(0, 0, width, height);
-        }
-        for (const shape of shapes) {
-          drawShape(ctx, shape, width, height);
-        }
-      }, [width, height, backgroundColor, shapes]);
-      useEffect(() => {
-        draw();
-      }, [draw]);
-      useEffect(() => {
-        if (!animate) return;
-        const loop = () => {
-          draw();
-          animRef.current = requestAnimationFrame(loop);
-        };
-        animRef.current = requestAnimationFrame(loop);
-        return () => cancelAnimationFrame(animRef.current);
-      }, [animate, draw]);
-      const handlePointerMove = useCallback(
-        (e) => {
-          if (!interactive) return;
-          const idx = findShapeAt(e.clientX, e.clientY);
-          if (idx !== hoverIndexRef.current) {
-            hoverIndexRef.current = idx;
-            if (idx >= 0) {
-              const shape = shapes[idx];
-              const payload = { id: shape.id, type: shape.type, index: idx };
-              if (onShapeHover) onShapeHover(payload);
-              else if (eventBus) eventBus.emit(`UI:SHAPE_HOVER`, payload);
-            }
-          }
-        },
-        [interactive, onShapeHover, eventBus, findShapeAt, shapes]
-      );
-      const handleClick = useCallback(
-        (e) => {
-          if (!interactive) return;
-          const idx = findShapeAt(e.clientX, e.clientY);
-          if (idx >= 0) {
-            const shape = shapes[idx];
-            const payload = { id: shape.id, type: shape.type, index: idx };
-            if (onShapeClick) onShapeClick(payload);
-            else if (eventBus) eventBus.emit(`UI:SHAPE_CLICK`, payload);
-          }
-        },
-        [interactive, onShapeClick, eventBus, findShapeAt, shapes]
-      );
-      if (isLoading || error) {
-        return /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "flex items-center justify-center rounded border border-border bg-surface",
-              className
-            ),
-            style: { width, height },
-            children: error ? /* @__PURE__ */ jsx("span", { className: "text-sm text-destructive", children: error.message }) : /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Loading canvas\u2026" })
-          }
-        );
-      }
-      return /* @__PURE__ */ jsx(
-        "canvas",
-        {
-          ref: canvasRef,
-          className: cn("block touch-none rounded border border-border", className),
-          style: { width, height },
-          onClick: handleClick,
-          onPointerMove: handlePointerMove
-        }
-      );
-    };
-  }
-});
 var BiologyCanvas;
 var init_BiologyCanvas = __esm({
   "components/learning/molecules/BiologyCanvas.tsx"() {
@@ -10410,7 +10762,7 @@ var init_CodeBlock = __esm({
     DIFF_STYLE_FALLBACK = { bg: "", prefix: " ", text: "text-foreground" };
     LINE_PROPS_FN = (n) => ({ "data-line": String(n - 1) });
     HIDDEN_LINE_NUMBERS = { display: "none" };
-    CodeBlock = React74__default.memo(
+    CodeBlock = React75__default.memo(
       ({
         code: rawCode,
         language = "text",
@@ -10997,7 +11349,7 @@ var init_MarkdownContent = __esm({
     init_Box();
     init_CodeBlock();
     init_cn();
-    MarkdownContent = React74__default.memo(
+    MarkdownContent = React75__default.memo(
       ({ content, direction = "ltr", className }) => {
         const { t: _t } = useTranslate();
         const safeContent = typeof content === "string" ? content : String(content ?? "");
@@ -12324,7 +12676,7 @@ var init_StateMachineView = __esm({
                 style: { top: title ? 30 : 0 },
                 children: [
                   entity && /* @__PURE__ */ jsx(EntityBox, { entity, config }),
-                  states.map((state) => renderStateNode ? /* @__PURE__ */ jsx(React74__default.Fragment, { children: renderStateNode(state, config) }, state.id) : /* @__PURE__ */ jsx(
+                  states.map((state) => renderStateNode ? /* @__PURE__ */ jsx(React75__default.Fragment, { children: renderStateNode(state, config) }, state.id) : /* @__PURE__ */ jsx(
                     StateNode,
                     {
                       state,
@@ -14948,8 +15300,8 @@ function MiniMap({
   tileAssets,
   unitAssets
 }) {
-  const canvasRef = React74.useRef(null);
-  const imgCacheRef = React74.useRef(/* @__PURE__ */ new Map());
+  const canvasRef = React75.useRef(null);
+  const imgCacheRef = React75.useRef(/* @__PURE__ */ new Map());
   function loadImg(url) {
     const cached = imgCacheRef.current.get(url);
     if (cached) return cached.complete ? cached : null;
@@ -14964,7 +15316,7 @@ function MiniMap({
     imgCacheRef.current.set(url, img);
     return null;
   }
-  React74.useEffect(() => {
+  React75.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
@@ -15938,7 +16290,7 @@ function isoToScreen(tileX, tileY, scale, baseOffsetX, layout = "isometric") {
   }
   if (layout === "flat") {
     const screenX2 = tileX * scaledTileWidth + baseOffsetX;
-    const screenY2 = tileY * scaledFloorHeight;
+    const screenY2 = tileY * scaledTileWidth;
     return { x: screenX2, y: screenY2 };
   }
   const screenX = (tileX - tileY) * (scaledTileWidth / 2) + baseOffsetX;
@@ -15955,7 +16307,7 @@ function screenToIso(screenX, screenY, scale, baseOffsetX, layout = "isometric")
   }
   if (layout === "flat") {
     const col = Math.round((screenX - baseOffsetX) / scaledTileWidth);
-    const row = Math.round(screenY / scaledFloorHeight);
+    const row = Math.round(screenY / scaledTileWidth);
     return { x: col, y: row };
   }
   const adjustedX = screenX - baseOffsetX;
@@ -16002,11 +16354,11 @@ function SideView({
   const canvasRef = useRef(null);
   const eventBus = useEventBus();
   const keysRef = useRef(/* @__PURE__ */ new Set());
-  const imageCache = useRef(/* @__PURE__ */ new Map());
+  const imageCache2 = useRef(/* @__PURE__ */ new Map());
   const [loadedImages, setLoadedImages] = useState(/* @__PURE__ */ new Set());
   const loadImage = useCallback((url) => {
     if (!url) return null;
-    const cached = imageCache.current.get(url);
+    const cached = imageCache2.current.get(url);
     if (cached?.complete && cached.naturalWidth > 0) {
       if (!loadedImages.has(url)) setLoadedImages((prev) => new Set(prev).add(url));
       return cached;
@@ -16016,7 +16368,7 @@ function SideView({
       img.crossOrigin = "anonymous";
       img.src = url;
       img.onload = () => setLoadedImages((prev) => new Set(prev).add(url));
-      imageCache.current.set(url, img);
+      imageCache2.current.set(url, img);
     }
     return null;
   }, [loadedImages]);
@@ -16133,7 +16485,10 @@ function SideView({
         camY = Math.max(0, Math.min(py - ch / 2 - 50, wh - ch));
       }
       const bgImage = bgImg ? loadImage(bgImg.url) : null;
-      if (bgImage) {
+      const bgSrc = bgImage ? resolveAssetSource(bgImage, bgImg, NOOP) : null;
+      if (bgSrc) {
+        blit(ctx, bgSrc, 0, 0, cw, ch);
+      } else if (bgImage) {
         ctx.drawImage(bgImage, 0, 0, cw, ch);
       } else if (bg) {
         ctx.fillStyle = bg;
@@ -16166,15 +16521,18 @@ function SideView({
         const platType = plat.type ?? "ground";
         const spriteAsset = tSprites?.[platType];
         const tileImg = spriteAsset ? loadImage(spriteAsset.url) : null;
-        if (tileImg) {
-          const tileW = tileImg.naturalWidth;
-          const tileH = tileImg.naturalHeight;
+        const tileSrc = tileImg ? resolveAssetSource(tileImg, spriteAsset, NOOP) : null;
+        if (tileSrc) {
+          const originX = tileSrc.rect ? tileSrc.rect.sx : 0;
+          const originY = tileSrc.rect ? tileSrc.rect.sy : 0;
+          const tileW = tileSrc.rect ? tileSrc.rect.sw : tileImg.naturalWidth;
+          const tileH = tileSrc.rect ? tileSrc.rect.sh : tileImg.naturalHeight;
           const scaleH = plat.height / tileH;
           const scaledW = tileW * scaleH;
           for (let tx = 0; tx < plat.width; tx += scaledW) {
             const drawW = Math.min(scaledW, plat.width - tx);
             const srcW = drawW / scaleH;
-            ctx.drawImage(tileImg, 0, 0, srcW, tileH, platX + tx, platY, drawW, plat.height);
+            ctx.drawImage(tileImg, originX, originY, srcW, tileH, platX + tx, platY, drawW, plat.height);
           }
         } else {
           const color = PLATFORM_COLORS[platType] ?? PLATFORM_COLORS.ground;
@@ -16208,14 +16566,15 @@ function SideView({
       const ppy = py - camY;
       const facingRight = auth.facingRight ?? true;
       const playerImg = pSprite ? loadImage(pSprite.url) : null;
-      if (playerImg) {
+      const playerSrc = playerImg ? resolveAssetSource(playerImg, pSprite, NOOP) : null;
+      if (playerSrc) {
         ctx.save();
         if (!facingRight) {
           ctx.translate(ppx + pw, ppy);
           ctx.scale(-1, 1);
-          ctx.drawImage(playerImg, 0, 0, pw, ph);
+          blit(ctx, playerSrc, 0, 0, pw, ph);
         } else {
-          ctx.drawImage(playerImg, ppx, ppy, pw, ph);
+          blit(ctx, playerSrc, ppx, ppy, pw, ph);
         }
         ctx.restore();
       } else {
@@ -16327,6 +16686,7 @@ function Canvas2D({
   const isSide = projection === "side";
   const isFree = projection === "free";
   const flatLike = projection === "hex" || projection === "flat" || isFree;
+  const squareGrid = projection === "flat";
   const tilesProp = Array.isArray(_tilesPropRaw) ? _tilesPropRaw : [];
   const unitsProp = Array.isArray(_unitsPropRaw) ? _unitsPropRaw : [];
   const featuresProp = Array.isArray(_featuresPropRaw) ? _featuresPropRaw : [];
@@ -16409,17 +16769,18 @@ function Canvas2D({
   const effectiveDiamondTopY = diamondTopYProp ?? DIAMOND_TOP_Y;
   const scaledDiamondTopY = effectiveDiamondTopY * scale;
   const baseOffsetX = useMemo(() => {
-    if (isFree) return 0;
+    if (isFree || projection === "flat") return 0;
     return (gridHeight - 1) * (scaledTileWidth / 2);
-  }, [isFree, gridHeight, scaledTileWidth]);
+  }, [isFree, projection, gridHeight, scaledTileWidth]);
   const validMoveSet = useMemo(() => new Set(validMoves.map((p) => `${p.x},${p.y}`)), [validMoves]);
   const attackTargetSet = useMemo(() => new Set(attackTargets.map((p) => `${p.x},${p.y}`)), [attackTargets]);
   const spriteUrls = useMemo(() => {
     const urls = [];
+    const toUrl = (x) => typeof x === "string" ? x : x?.url;
     for (const tile of sortedTiles) {
       if (tile.terrainSprite) urls.push(tile.terrainSprite.url);
       else if (getTerrainSprite) {
-        const url = getTerrainSprite(tile.terrain ?? "");
+        const url = toUrl(getTerrainSprite(tile.terrain ?? ""));
         if (url) urls.push(url);
       } else {
         const url = assetManifest?.terrains?.[tile.terrain ?? ""]?.url;
@@ -16429,7 +16790,7 @@ function Canvas2D({
     for (const feature of features) {
       if (feature.sprite) urls.push(feature.sprite.url);
       else if (getFeatureSprite) {
-        const url = getFeatureSprite(feature.type);
+        const url = toUrl(getFeatureSprite(feature.type));
         if (url) urls.push(url);
       } else {
         const url = assetManifest?.features?.[feature.type]?.url;
@@ -16439,7 +16800,7 @@ function Canvas2D({
     for (const unit of units) {
       if (unit.sprite) urls.push(unit.sprite.url);
       else if (getUnitSprite) {
-        const url = getUnitSprite(unit);
+        const url = toUrl(getUnitSprite(unit));
         if (url) urls.push(url);
       } else if (unit.unitType) {
         const url = assetManifest?.units?.[unit.unitType]?.url;
@@ -16480,14 +16841,25 @@ function Canvas2D({
     screenToWorld,
     lerpToTarget
   } = useCamera();
-  const resolveTerrainSpriteUrl = useCallback((tile) => {
-    return tile.terrainSprite?.url || getTerrainSprite?.(tile.terrain ?? "") || assetManifest?.terrains?.[tile.terrain ?? ""]?.url;
+  const [, setAtlasVersion] = useState(0);
+  const bumpAtlas = useCallback(() => setAtlasVersion((v) => v + 1), []);
+  const resolveTerrainAsset = useCallback((tile) => {
+    if (tile.terrainSprite) return tile.terrainSprite;
+    const s = getTerrainSprite?.(tile.terrain ?? "");
+    if (s) return typeof s === "string" ? { url: s } : s;
+    return assetManifest?.terrains?.[tile.terrain ?? ""];
   }, [getTerrainSprite, assetManifest]);
-  const resolveFeatureSpriteUrl = useCallback((featureType) => {
-    return getFeatureSprite?.(featureType) || assetManifest?.features?.[featureType]?.url;
+  const resolveFeatureAsset = useCallback((feature) => {
+    if (feature.sprite) return feature.sprite;
+    const s = getFeatureSprite?.(feature.type);
+    if (s) return typeof s === "string" ? { url: s } : s;
+    return assetManifest?.features?.[feature.type];
   }, [getFeatureSprite, assetManifest]);
-  const resolveUnitSpriteUrl = useCallback((unit) => {
-    return unit.sprite?.url || getUnitSprite?.(unit) || (unit.unitType ? assetManifest?.units?.[unit.unitType]?.url : void 0);
+  const resolveUnitAsset = useCallback((unit) => {
+    if (unit.sprite) return unit.sprite;
+    const s = getUnitSprite?.(unit);
+    if (s) return typeof s === "string" ? { url: s } : s;
+    return unit.unitType ? assetManifest?.units?.[unit.unitType] : void 0;
   }, [getUnitSprite, assetManifest]);
   const miniMapTiles = useMemo(() => {
     if (!showMinimap) return [];
@@ -16520,7 +16892,13 @@ function Canvas2D({
     ctx.clearRect(0, 0, viewportSize.width, viewportSize.height);
     if (backgroundImage) {
       const bgImg = getImage(backgroundImage.url);
-      if (bgImg) {
+      const bgSrc = bgImg ? resolveAssetSource(bgImg, backgroundImage, bumpAtlas) : null;
+      if (bgSrc?.rect) {
+        const k = Math.max(viewportSize.width / bgSrc.rect.sw, viewportSize.height / bgSrc.rect.sh);
+        const dw = bgSrc.rect.sw * k;
+        const dh = bgSrc.rect.sh * k;
+        blit(ctx, bgSrc, (viewportSize.width - dw) / 2, (viewportSize.height - dh) / 2, dw, dh);
+      } else if (bgImg) {
         const cam2 = cameraRef.current;
         const patW = bgImg.naturalWidth;
         const patH = bgImg.naturalHeight;
@@ -16551,18 +16929,23 @@ function Canvas2D({
       if (pos.x + scaledTileWidth < visLeft || pos.x > visRight || pos.y + scaledTileHeight < visTop || pos.y > visBottom) {
         continue;
       }
-      const spriteUrl = resolveTerrainSpriteUrl(tile);
-      const img = spriteUrl ? getImage(spriteUrl) : null;
-      if (img) {
-        if (img.naturalWidth === 0) {
-          ctx.drawImage(img, pos.x, pos.y, scaledTileWidth, scaledTileHeight);
-        } else {
-          const drawW = scaledTileWidth;
-          const drawH = scaledTileWidth * (img.naturalHeight / img.naturalWidth);
-          const drawX = pos.x;
-          const drawY = flatLike ? pos.y : pos.y + scaledTileHeight - drawH;
-          ctx.drawImage(img, drawX, drawY, drawW, drawH);
-        }
+      const terrainAsset = resolveTerrainAsset(tile);
+      const img = terrainAsset?.url ? getImage(terrainAsset.url) : null;
+      const src = img ? resolveAssetSource(img, terrainAsset, bumpAtlas) : null;
+      if (src) {
+        const drawW = scaledTileWidth;
+        const drawH = squareGrid ? scaledTileWidth : scaledTileWidth / src.aspect;
+        const drawX = pos.x;
+        const drawY = flatLike ? pos.y : pos.y + scaledTileHeight - drawH;
+        blit(ctx, src, drawX, drawY, drawW, drawH);
+      } else if (img && img.naturalWidth === 0) {
+        ctx.drawImage(img, pos.x, pos.y, scaledTileWidth, scaledTileHeight);
+      } else if (squareGrid) {
+        ctx.fillStyle = tile.terrain === "water" ? "#3b82f6" : tile.terrain === "mountain" ? "#78716c" : tile.terrain === "stone" ? "#9ca3af" : "#4ade80";
+        ctx.fillRect(pos.x, pos.y, scaledTileWidth, scaledTileWidth);
+        ctx.strokeStyle = "rgba(0,0,0,0.2)";
+        ctx.lineWidth = 1;
+        ctx.strokeRect(pos.x, pos.y, scaledTileWidth, scaledTileWidth);
       } else {
         const centerX = pos.x + scaledTileWidth / 2;
         const topY = pos.y + scaledDiamondTopY;
@@ -16579,9 +16962,13 @@ function Canvas2D({
         ctx.stroke();
       }
       const drawHighlight = (color) => {
+        ctx.fillStyle = color;
+        if (squareGrid) {
+          ctx.fillRect(pos.x, pos.y, scaledTileWidth, scaledTileWidth);
+          return;
+        }
         const centerX = pos.x + scaledTileWidth / 2;
         const topY = pos.y + scaledDiamondTopY;
-        ctx.fillStyle = color;
         ctx.beginPath();
         ctx.moveTo(centerX, topY);
         ctx.lineTo(pos.x + scaledTileWidth, topY + scaledFloorHeight / 2);
@@ -16598,7 +16985,7 @@ function Canvas2D({
       if (attackTargetSet.has(tileKey)) drawHighlight("rgba(239, 68, 68, 0.35)");
       if (debug2) {
         const centerX = pos.x + scaledTileWidth / 2;
-        const centerY = pos.y + scaledFloorHeight / 2 + scaledDiamondTopY;
+        const centerY = squareGrid ? pos.y + scaledTileWidth / 2 : pos.y + scaledFloorHeight / 2 + scaledDiamondTopY;
         ctx.fillStyle = "rgba(0, 0, 0, 0.7)";
         ctx.font = `${12 * scale * 2}px monospace`;
         ctx.textAlign = "center";
@@ -16616,15 +17003,16 @@ function Canvas2D({
       if (pos.x + scaledTileWidth < visLeft || pos.x > visRight || pos.y + scaledTileHeight < visTop || pos.y > visBottom) {
         continue;
       }
-      const spriteUrl = feature.sprite?.url || resolveFeatureSpriteUrl(feature.type);
-      const img = spriteUrl ? getImage(spriteUrl) : null;
+      const featureAsset = resolveFeatureAsset(feature);
+      const img = featureAsset?.url ? getImage(featureAsset.url) : null;
+      const src = img ? resolveAssetSource(img, featureAsset, bumpAtlas) : null;
       const centerX = pos.x + scaledTileWidth / 2;
-      const featureGroundY = pos.y + scaledDiamondTopY + scaledFloorHeight * 0.5;
+      const featureGroundY = squareGrid ? pos.y + scaledTileWidth * 0.92 : pos.y + scaledDiamondTopY + scaledFloorHeight * 0.5;
       const isCastle = feature.type === "castle";
-      const featureDrawH = isCastle ? scaledFloorHeight * 3.5 : scaledFloorHeight * 1.6;
+      const featureDrawH = squareGrid ? isCastle ? scaledTileWidth * 1.4 : scaledTileWidth * 0.8 : isCastle ? scaledFloorHeight * 3.5 : scaledFloorHeight * 1.6;
       const maxFeatureW = isCastle ? scaledTileWidth * 1.8 : scaledTileWidth * 0.7;
-      if (img) {
-        const ar = img.naturalWidth / img.naturalHeight;
+      if (src) {
+        const ar = src.aspect;
         let drawH = featureDrawH;
         let drawW = featureDrawH * ar;
         if (drawW > maxFeatureW) {
@@ -16633,7 +17021,7 @@ function Canvas2D({
         }
         const drawX = centerX - drawW / 2;
         const drawY = featureGroundY - drawH;
-        ctx.drawImage(img, drawX, drawY, drawW, drawH);
+        blit(ctx, src, drawX, drawY, drawW, drawH);
       } else {
         const color = FEATURE_COLORS[feature.type] || FEATURE_COLORS.default;
         ctx.beginPath();
@@ -16660,19 +17048,20 @@ function Canvas2D({
       }
       const isSelected = unit.id === selectedUnitId;
       const centerX = pos.x + scaledTileWidth / 2;
-      const groundY = pos.y + scaledDiamondTopY + scaledFloorHeight * 0.5;
+      const groundY = squareGrid ? pos.y + scaledTileWidth * 0.92 : pos.y + scaledDiamondTopY + scaledFloorHeight * 0.5;
       const breatheOffset = 0;
-      const unitSpriteUrl = resolveUnitSpriteUrl(unit);
-      const img = unitSpriteUrl ? getImage(unitSpriteUrl) : null;
-      const unitDrawH = scaledFloorHeight * spriteHeightRatio * unitScale;
+      const unitAsset = resolveUnitAsset(unit);
+      const img = unitAsset?.url ? getImage(unitAsset.url) : null;
+      const unitDrawH = squareGrid ? scaledTileWidth * 0.55 * spriteHeightRatio * unitScale : scaledFloorHeight * spriteHeightRatio * unitScale;
       const maxUnitW = scaledTileWidth * spriteMaxWidthRatio * unitScale;
       const unitIsSheet = unit.spriteSheet?.url !== void 0;
+      const unitSrc = img && !unitIsSheet ? resolveAssetSource(img, unitAsset, bumpAtlas) : null;
       const SHEET_ROWS = 5;
       const sheetFrameW = img ? img.naturalWidth / SHEET_COLUMNS : 0;
       const sheetFrameH = img ? img.naturalHeight / SHEET_ROWS : 0;
       const frameW = unitIsSheet ? sheetFrameW : img?.naturalWidth ?? 1;
       const frameH = unitIsSheet ? sheetFrameH : img?.naturalHeight ?? 1;
-      const ar = frameW / (frameH || 1);
+      const ar = unitIsSheet ? sheetFrameW / (sheetFrameH || 1) : unitSrc ? unitSrc.aspect : frameW / (frameH || 1);
       let drawH = unitDrawH;
       let drawW = unitDrawH * ar;
       if (drawW > maxUnitW) {
@@ -16682,12 +17071,14 @@ function Canvas2D({
       if (unit.previousPosition && (unit.previousPosition.x !== unit.position.x || unit.previousPosition.y !== unit.position.y)) {
         const ghostPos = project(unit.previousPosition.x, unit.previousPosition.y, baseOffsetX);
         const ghostCenterX = ghostPos.x + scaledTileWidth / 2;
-        const ghostGroundY = ghostPos.y + scaledDiamondTopY + scaledFloorHeight * 0.5;
+        const ghostGroundY = squareGrid ? ghostPos.y + scaledTileWidth * 0.92 : ghostPos.y + scaledDiamondTopY + scaledFloorHeight * 0.5;
         ctx.save();
         ctx.globalAlpha = 0.25;
         if (img) {
           if (unitIsSheet) {
             ctx.drawImage(img, 0, 0, sheetFrameW, sheetFrameH, ghostCenterX - drawW / 2, ghostGroundY - drawH, drawW, drawH);
+          } else if (unitSrc) {
+            blit(ctx, unitSrc, ghostCenterX - drawW / 2, ghostGroundY - drawH, drawW, drawH);
           } else {
             ctx.drawImage(img, ghostCenterX - drawW / 2, ghostGroundY - drawH, drawW, drawH);
           }
@@ -16736,6 +17127,8 @@ function Canvas2D({
         const drawUnit = (x) => {
           if (unitIsSheet) {
             ctx.drawImage(img, 0, 0, sheetFrameW, sheetFrameH, x, spriteY, drawW, drawH);
+          } else if (unitSrc) {
+            blit(ctx, unitSrc, x, spriteY, drawW, drawH);
           } else {
             ctx.drawImage(img, x, spriteY, drawW, drawH);
           }
@@ -16761,17 +17154,24 @@ function Canvas2D({
       }
     }
     for (const fx of effects) {
-      const spriteUrl = assetManifest?.effects?.[fx.key]?.url;
-      if (!spriteUrl) continue;
-      const img = getImage(spriteUrl);
+      const fxAsset = assetManifest?.effects?.[fx.key];
+      if (!fxAsset?.url) continue;
+      const img = getImage(fxAsset.url);
       if (!img) continue;
+      const src = resolveAssetSource(img, fxAsset, bumpAtlas);
       const pos = project(fx.x, fx.y, baseOffsetX);
       const cx = pos.x + scaledTileWidth / 2;
-      const cy = pos.y + scaledDiamondTopY + scaledFloorHeight * 0.5;
+      const cy = squareGrid ? pos.y + scaledTileWidth / 2 : pos.y + scaledDiamondTopY + scaledFloorHeight * 0.5;
       const alpha = Math.min(1, fx.ttl / 4);
       const prev = ctx.globalAlpha;
       ctx.globalAlpha = alpha;
-      ctx.drawImage(img, cx - img.naturalWidth / 2, cy - img.naturalHeight / 2);
+      if (src?.rect) {
+        const dw = scaledTileWidth;
+        const dh = dw / src.aspect;
+        blit(ctx, src, cx - dw / 2, cy - dh / 2, dw, dh);
+      } else {
+        ctx.drawImage(img, cx - img.naturalWidth / 2, cy - img.naturalHeight / 2);
+      }
       ctx.globalAlpha = prev;
     }
     onDrawEffects?.(ctx, 0, getImage);
@@ -16784,13 +17184,15 @@ function Canvas2D({
     effects,
     project,
     flatLike,
+    squareGrid,
     scale,
     debug2,
-    resolveTerrainSpriteUrl,
-    resolveFeatureSpriteUrl,
-    resolveUnitSpriteUrl,
+    resolveTerrainAsset,
+    resolveFeatureAsset,
+    resolveUnitAsset,
     resolveFrameForUnit,
     getImage,
+    bumpAtlas,
     baseOffsetX,
     scaledTileWidth,
     scaledTileHeight,
@@ -16816,12 +17218,12 @@ function Canvas2D({
     if (!unit?.position) return;
     const pos = project(unit.position.x, unit.position.y, baseOffsetX);
     const centerX = pos.x + scaledTileWidth / 2;
-    const centerY = pos.y + scaledDiamondTopY + scaledFloorHeight / 2;
+    const centerY = squareGrid ? pos.y + scaledTileWidth / 2 : pos.y + scaledDiamondTopY + scaledFloorHeight / 2;
     targetCameraRef.current = {
       x: centerX - viewportSize.width / 2,
       y: centerY - viewportSize.height / 2
     };
-  }, [camera, selectedUnitId, units, project, baseOffsetX, scaledTileWidth, scaledDiamondTopY, scaledFloorHeight, viewportSize, targetCameraRef]);
+  }, [camera, selectedUnitId, units, project, baseOffsetX, scaledTileWidth, squareGrid, scaledDiamondTopY, scaledFloorHeight, viewportSize, targetCameraRef]);
   useEffect(() => {
     if (isSide || !interpolateUnits) return;
     unitInterp.onSnapshot(
@@ -16892,11 +17294,11 @@ function Canvas2D({
     if (!tileHoverEvent || !canvasRef.current) return;
     const world = screenToWorld(e.clientX, e.clientY, canvasRef.current, viewportSize);
     const adjustedX = world.x - scaledTileWidth / 2;
-    const adjustedY = world.y - scaledDiamondTopY - scaledFloorHeight / 2;
+    const adjustedY = squareGrid ? world.y - scaledTileWidth / 2 : world.y - scaledDiamondTopY - scaledFloorHeight / 2;
     const isoPos = unproject(adjustedX, adjustedY, baseOffsetX);
     const tileExists = tilesProp.some((t2) => t2.x === isoPos.x && t2.y === isoPos.y);
     if (tileExists) eventBus.emit(`UI:${tileHoverEvent}`, { x: isoPos.x, y: isoPos.y });
-  }, [screenToWorld, viewportSize, scaledTileWidth, scaledDiamondTopY, scaledFloorHeight, unproject, baseOffsetX, tilesProp, tileHoverEvent, eventBus]);
+  }, [screenToWorld, viewportSize, scaledTileWidth, squareGrid, scaledDiamondTopY, scaledFloorHeight, unproject, baseOffsetX, tilesProp, tileHoverEvent, eventBus]);
   const handleCanvasPointerUp = useCallback((e) => {
     singlePointerActiveRef.current = false;
     if (enableCamera) handlePointerUp();
@@ -16904,7 +17306,7 @@ function Canvas2D({
     if (!canvasRef.current) return;
     const world = screenToWorld(e.clientX, e.clientY, canvasRef.current, viewportSize);
     const adjustedX = world.x - scaledTileWidth / 2;
-    const adjustedY = world.y - scaledDiamondTopY - scaledFloorHeight / 2;
+    const adjustedY = squareGrid ? world.y - scaledTileWidth / 2 : world.y - scaledDiamondTopY - scaledFloorHeight / 2;
     const isoPos = unproject(adjustedX, adjustedY, baseOffsetX);
     const clickedUnit = units.find((u) => u.position?.x === isoPos.x && u.position?.y === isoPos.y);
     if (clickedUnit && unitClickEvent) {
@@ -16913,7 +17315,7 @@ function Canvas2D({
       const tileExists = tilesProp.some((t2) => t2.x === isoPos.x && t2.y === isoPos.y);
       if (tileExists) eventBus.emit(`UI:${tileClickEvent}`, { x: isoPos.x, y: isoPos.y });
     }
-  }, [enableCamera, handlePointerUp, dragDistance, screenToWorld, viewportSize, scaledTileWidth, scaledDiamondTopY, scaledFloorHeight, unproject, baseOffsetX, units, tilesProp, unitClickEvent, tileClickEvent, eventBus]);
+  }, [enableCamera, handlePointerUp, dragDistance, screenToWorld, viewportSize, scaledTileWidth, squareGrid, scaledDiamondTopY, scaledFloorHeight, unproject, baseOffsetX, units, tilesProp, unitClickEvent, tileClickEvent, eventBus]);
   const handleCanvasPointerLeave = useCallback(() => {
     handleMouseLeave();
     if (tileLeaveEvent) eventBus.emit(`UI:${tileLeaveEvent}`, {});
@@ -16963,11 +17365,12 @@ function Canvas2D({
     return units.filter((u) => !!u.position).map((u) => {
       const pos = project(u.position.x, u.position.y, baseOffsetX);
       const cam = cameraRef.current;
+      const anchorY = squareGrid ? pos.y + scaledTileWidth * 0.92 : pos.y + scaledDiamondTopY + scaledFloorHeight * 0.5;
       const screenX = (pos.x + scaledTileWidth / 2 - (cam.x + viewportSize.width / 2)) * cam.zoom + viewportSize.width / 2;
-      const screenY = (pos.y + scaledDiamondTopY + scaledFloorHeight * 0.5 - (cam.y + viewportSize.height / 2)) * cam.zoom + viewportSize.height / 2;
+      const screenY = (anchorY - (cam.y + viewportSize.height / 2)) * cam.zoom + viewportSize.height / 2;
       return { unit: u, screenX, screenY };
     });
-  }, [units, project, baseOffsetX, scaledTileWidth, scaledDiamondTopY, scaledFloorHeight, viewportSize, cameraRef]);
+  }, [units, project, baseOffsetX, scaledTileWidth, squareGrid, scaledDiamondTopY, scaledFloorHeight, viewportSize, cameraRef]);
   if (error) {
     return /* @__PURE__ */ jsx(Box, { className: cn("flex items-center justify-center w-full h-full bg-[var(--color-card)] rounded-container", className), children: /* @__PURE__ */ jsxs(Stack, { direction: "vertical", gap: "md", align: "center", children: [
       /* @__PURE__ */ jsx(Icon, { name: "alert-circle", size: "xl" }),
@@ -17104,7 +17507,7 @@ function Canvas2D({
     }
   );
 }
-var PLATFORM_COLORS, PLAYER_COLOR, PLAYER_EYE_COLOR, SKY_GRADIENT_TOP, SKY_GRADIENT_BOTTOM, GRID_COLOR, DEFAULT_PLATFORMS;
+var PLATFORM_COLORS, NOOP, PLAYER_COLOR, PLAYER_EYE_COLOR, SKY_GRADIENT_TOP, SKY_GRADIENT_BOTTOM, GRID_COLOR, DEFAULT_PLATFORMS;
 var init_Canvas2D = __esm({
   "components/game/2d/molecules/Canvas2D.tsx"() {
     "use client";
@@ -17118,6 +17521,7 @@ var init_Canvas2D = __esm({
     init_MiniMap();
     init_HealthBar();
     init_useImageCache();
+    init_atlasSlice();
     init_useCamera();
     init_useCanvasGestures();
     init_useRenderInterpolation();
@@ -17131,6 +17535,8 @@ var init_Canvas2D = __esm({
       hazard: "#c0392b",
       goal: "#f1c40f"
     };
+    NOOP = () => {
+    };
     PLAYER_COLOR = "#3498db";
     PLAYER_EYE_COLOR = "#ffffff";
     SKY_GRADIENT_TOP = "#1a1a2e";
@@ -19661,9 +20067,9 @@ function ControlButton({
   className
 }) {
   const eventBus = useEventBus();
-  const [isPressed, setIsPressed] = React74.useState(false);
+  const [isPressed, setIsPressed] = React75.useState(false);
   const actualPressed = pressed ?? isPressed;
-  const handlePointerDown = React74.useCallback(
+  const handlePointerDown = React75.useCallback(
     (e) => {
       e.preventDefault();
       if (disabled) return;
@@ -19673,7 +20079,7 @@ function ControlButton({
     },
     [disabled, pressEvent, eventBus, onPress]
   );
-  const handlePointerUp = React74.useCallback(
+  const handlePointerUp = React75.useCallback(
     (e) => {
       e.preventDefault();
       if (disabled) return;
@@ -19683,7 +20089,7 @@ function ControlButton({
     },
     [disabled, releaseEvent, eventBus, onRelease]
   );
-  const handlePointerLeave = React74.useCallback(
+  const handlePointerLeave = React75.useCallback(
     (e) => {
       if (isPressed) {
         setIsPressed(false);
@@ -19776,8 +20182,8 @@ function ControlGrid({
   className
 }) {
   const eventBus = useEventBus();
-  const [active, setActive] = React74.useState(/* @__PURE__ */ new Set());
-  const handlePress = React74.useCallback(
+  const [active, setActive] = React75.useState(/* @__PURE__ */ new Set());
+  const handlePress = React75.useCallback(
     (id) => {
       setActive((prev) => new Set(prev).add(id));
       if (actionEvent) eventBus.emit(`UI:${actionEvent}`, { id, pressed: true });
@@ -19791,7 +20197,7 @@ function ControlGrid({
     },
     [kind, actionEvent, directionEvent, directionEvents, eventBus, onAction, onDirection]
   );
-  const handleRelease = React74.useCallback(
+  const handleRelease = React75.useCallback(
     (id) => {
       setActive((prev) => {
         const next = new Set(prev);
@@ -21057,8 +21463,8 @@ var init_Menu = __esm({
         "bottom-end": "bottom-start"
       };
       const effectivePosition = direction === "rtl" ? rtlMirror[position] ?? position : position;
-      const triggerChild = React74__default.isValidElement(trigger) ? trigger : /* @__PURE__ */ jsx(Typography, { variant: "small", as: "span", children: trigger });
-      const triggerElement = React74__default.cloneElement(
+      const triggerChild = React75__default.isValidElement(trigger) ? trigger : /* @__PURE__ */ jsx(Typography, { variant: "small", as: "span", children: trigger });
+      const triggerElement = React75__default.cloneElement(
         triggerChild,
         {
           ref: triggerRef,
@@ -21153,14 +21559,14 @@ function useDataDnd(args) {
   const isZone = Boolean(dragGroup || accepts || sortable);
   const enabled = isZone || Boolean(dndRoot);
   const eventBus = useEventBus();
-  const parentRoot = React74__default.useContext(RootCtx);
+  const parentRoot = React75__default.useContext(RootCtx);
   const isRoot = enabled && parentRoot === null;
-  const zoneId = React74__default.useId();
+  const zoneId = React75__default.useId();
   const ownGroup = dragGroup ?? accepts ?? zoneId;
-  const [optimisticOrders, setOptimisticOrders] = React74__default.useState(() => /* @__PURE__ */ new Map());
-  const optimisticOrdersRef = React74__default.useRef(optimisticOrders);
+  const [optimisticOrders, setOptimisticOrders] = React75__default.useState(() => /* @__PURE__ */ new Map());
+  const optimisticOrdersRef = React75__default.useRef(optimisticOrders);
   optimisticOrdersRef.current = optimisticOrders;
-  const clearOptimisticOrder = React74__default.useCallback((group) => {
+  const clearOptimisticOrder = React75__default.useCallback((group) => {
     setOptimisticOrders((prev) => {
       if (!prev.has(group)) return prev;
       const next = new Map(prev);
@@ -21185,7 +21591,7 @@ function useDataDnd(args) {
     const raw = it[dndItemIdField];
     return raw != null ? String(raw) : `__idx_${idx}`;
   }).join("|");
-  const itemIds = React74__default.useMemo(
+  const itemIds = React75__default.useMemo(
     () => orderedItems.map((it, idx) => {
       const raw = it[dndItemIdField];
       return raw != null ? String(raw) : `__idx_${idx}`;
@@ -21196,7 +21602,7 @@ function useDataDnd(args) {
     const raw = it[dndItemIdField];
     return raw != null ? String(raw) : `__${idx}`;
   }).join("|");
-  React74__default.useEffect(() => {
+  React75__default.useEffect(() => {
     const root = isRoot ? null : parentRoot;
     if (root) {
       root.clearOptimisticOrder(ownGroup);
@@ -21204,20 +21610,20 @@ function useDataDnd(args) {
       clearOptimisticOrder(ownGroup);
     }
   }, [itemsContentSig, ownGroup]);
-  const zonesRef = React74__default.useRef(/* @__PURE__ */ new Map());
-  const registerZone = React74__default.useCallback((zoneId2, meta2) => {
+  const zonesRef = React75__default.useRef(/* @__PURE__ */ new Map());
+  const registerZone = React75__default.useCallback((zoneId2, meta2) => {
     zonesRef.current.set(zoneId2, meta2);
   }, []);
-  const unregisterZone = React74__default.useCallback((zoneId2) => {
+  const unregisterZone = React75__default.useCallback((zoneId2) => {
     zonesRef.current.delete(zoneId2);
   }, []);
-  const [activeDrag, setActiveDrag] = React74__default.useState(null);
-  const [overZoneGroup, setOverZoneGroup] = React74__default.useState(null);
-  const meta = React74__default.useMemo(
+  const [activeDrag, setActiveDrag] = React75__default.useState(null);
+  const [overZoneGroup, setOverZoneGroup] = React75__default.useState(null);
+  const meta = React75__default.useMemo(
     () => ({ group: ownGroup, dropEvent, reorderEvent, positionEvent, itemIds, rawItems: items, idField: dndItemIdField }),
     [ownGroup, dropEvent, reorderEvent, positionEvent, itemIds, items, dndItemIdField]
   );
-  React74__default.useEffect(() => {
+  React75__default.useEffect(() => {
     const target = isRoot ? null : parentRoot;
     if (!target) {
       zonesRef.current.set(zoneId, meta);
@@ -21236,7 +21642,7 @@ function useDataDnd(args) {
   }, [parentRoot, isRoot, zoneId, meta]);
   const sensors = useAlmadarDndSensors(true);
   const collisionDetection = almadarDndCollisionDetection;
-  const findZoneByItem = React74__default.useCallback(
+  const findZoneByItem = React75__default.useCallback(
     (id) => {
       for (const z of zonesRef.current.values()) {
         if (z.itemIds.includes(id)) return z;
@@ -21245,7 +21651,7 @@ function useDataDnd(args) {
     },
     []
   );
-  React74__default.useCallback(
+  React75__default.useCallback(
     (group) => {
       for (const z of zonesRef.current.values()) {
         if (z.group === group) return z;
@@ -21254,7 +21660,7 @@ function useDataDnd(args) {
     },
     []
   );
-  const handleDragEnd = React74__default.useCallback(
+  const handleDragEnd = React75__default.useCallback(
     (event) => {
       const { active, over } = event;
       const activeIdStr = String(active.id);
@@ -21345,8 +21751,8 @@ function useDataDnd(args) {
     },
     [eventBus]
   );
-  const sortableData = React74__default.useMemo(() => ({ dndGroup: ownGroup }), [ownGroup]);
-  const SortableItem = React74__default.useCallback(
+  const sortableData = React75__default.useMemo(() => ({ dndGroup: ownGroup }), [ownGroup]);
+  const SortableItem = React75__default.useCallback(
     ({ id, children }) => {
       const {
         attributes,
@@ -21386,7 +21792,7 @@ function useDataDnd(args) {
       id: droppableId,
       data: sortableData
     });
-    const ctx = React74__default.useContext(RootCtx);
+    const ctx = React75__default.useContext(RootCtx);
     const activeDrag2 = ctx?.activeDrag ?? null;
     const overZoneGroup2 = ctx?.overZoneGroup ?? null;
     const isThisZoneOver = overZoneGroup2 === ownGroup;
@@ -21401,7 +21807,7 @@ function useDataDnd(args) {
       showForeignPlaceholder,
       ctxAvailable: ctx != null
     });
-    React74__default.useEffect(() => {
+    React75__default.useEffect(() => {
       dndLog.info("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, isThisZoneOver, showForeignPlaceholder, activeDragSourceGroup: activeDrag2?.sourceGroup ?? null });
     }, [droppableId, isOver, isThisZoneOver, showForeignPlaceholder]);
     return /* @__PURE__ */ jsx(
@@ -21415,11 +21821,11 @@ function useDataDnd(args) {
       }
     );
   };
-  const rootContextValue = React74__default.useMemo(
+  const rootContextValue = React75__default.useMemo(
     () => ({ registerZone, unregisterZone, activeDrag, overZoneGroup, optimisticOrders, clearOptimisticOrder }),
     [registerZone, unregisterZone, activeDrag, overZoneGroup, optimisticOrders, clearOptimisticOrder]
   );
-  const handleDragStart = React74__default.useCallback((event) => {
+  const handleDragStart = React75__default.useCallback((event) => {
     const sourceZone = findZoneByItem(event.active.id);
     const rect = event.active.rect.current.initial;
     const height = rect?.height && rect.height > 0 ? rect.height : 64;
@@ -21438,7 +21844,7 @@ function useDataDnd(args) {
       isRoot
     });
   }, [findZoneByItem, isRoot, zoneId]);
-  const handleDragOver = React74__default.useCallback((event) => {
+  const handleDragOver = React75__default.useCallback((event) => {
     const { active, over } = event;
     const overData = over?.data?.current;
     const overGroup = overData?.dndGroup ?? null;
@@ -21508,7 +21914,7 @@ function useDataDnd(args) {
       return next;
     });
   }, []);
-  const handleDragCancel = React74__default.useCallback((event) => {
+  const handleDragCancel = React75__default.useCallback((event) => {
     setActiveDrag(null);
     setOverZoneGroup(null);
     dndLog.warn("dragCancel", {
@@ -21516,12 +21922,12 @@ function useDataDnd(args) {
       reason: "dnd-kit cancelled the drag (escape key, pointer interrupted, or external)"
     });
   }, []);
-  const handleDragEndWithCleanup = React74__default.useCallback((event) => {
+  const handleDragEndWithCleanup = React75__default.useCallback((event) => {
     handleDragEnd(event);
     setActiveDrag(null);
     setOverZoneGroup(null);
   }, [handleDragEnd]);
-  const wrapContainer = React74__default.useCallback(
+  const wrapContainer = React75__default.useCallback(
     (children) => {
       if (!enabled) return children;
       const strategy = layout === "grid" ? rectSortingStrategy : verticalListSortingStrategy;
@@ -21575,7 +21981,7 @@ var init_useDataDnd = __esm({
     init_useAlmadarDndCollision();
     init_Box();
     dndLog = createLogger("almadar:ui:dnd");
-    RootCtx = React74__default.createContext(null);
+    RootCtx = React75__default.createContext(null);
   }
 });
 function renderIconInput(icon, props) {
@@ -22101,7 +22507,7 @@ function DataList({
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
-  const [visibleCount, setVisibleCount] = React74__default.useState(pageSize || Infinity);
+  const [visibleCount, setVisibleCount] = React75__default.useState(pageSize || Infinity);
   const fieldDefs = fields ?? columns ?? [];
   const allDataRaw = Array.isArray(entity) ? entity : entity ? [entity] : [];
   const dnd = useDataDnd({
@@ -22120,7 +22526,7 @@ function DataList({
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
   const hasMoreLocal = pageSize > 0 && visibleCount < allData.length;
   const hasRenderProp = typeof children === "function";
-  React74__default.useEffect(() => {
+  React75__default.useEffect(() => {
     const renderItemTypeOf = typeof schemaRenderItem;
     const childrenTypeOf = typeof children;
     if (data.length > 0 && !hasRenderProp) {
@@ -22224,7 +22630,7 @@ function DataList({
     const items2 = [...data];
     const groups2 = groupBy ? groupData(items2, groupBy) : [{ label: "", items: items2 }];
     const contentField = titleField?.name ?? fieldDefs[0]?.name ?? "";
-    return /* @__PURE__ */ jsx(VStack, { gap: "sm", className: cn("py-2", className), children: groups2.map((group, gi) => /* @__PURE__ */ jsxs(React74__default.Fragment, { children: [
+    return /* @__PURE__ */ jsx(VStack, { gap: "sm", className: cn("py-2", className), children: groups2.map((group, gi) => /* @__PURE__ */ jsxs(React75__default.Fragment, { children: [
       group.label && /* @__PURE__ */ jsx(Divider, { label: group.label, className: "my-2" }),
       group.items.map((itemData, index) => {
         const id = itemData.id || `${gi}-${index}`;
@@ -22365,7 +22771,7 @@ function DataList({
           className
         ),
         children: [
-          groups.map((group, gi) => /* @__PURE__ */ jsxs(React74__default.Fragment, { children: [
+          groups.map((group, gi) => /* @__PURE__ */ jsxs(React75__default.Fragment, { children: [
             group.label && /* @__PURE__ */ jsx(Divider, { label: group.label, className: gi > 0 ? "mt-4" : "mt-0" }),
             group.items.map(
               (itemData, index) => renderItem(itemData, index, gi === groups.length - 1 && index === group.items.length - 1)
@@ -22472,8 +22878,8 @@ function ScalarControl({
   }
   const numeric = typeof value === "number";
   const initial = value === null ? "" : String(value);
-  const [draft, setDraft] = React74__default.useState(initial);
-  React74__default.useEffect(() => setDraft(initial), [initial]);
+  const [draft, setDraft] = React75__default.useState(initial);
+  React75__default.useEffect(() => setDraft(initial), [initial]);
   const commit = () => {
     if (numeric) {
       const n = draft.trim() === "" ? 0 : Number(draft);
@@ -22541,8 +22947,8 @@ function Row({
   onRemove,
   readonly
 }) {
-  const [keyDraft, setKeyDraft] = React74__default.useState(rowKey);
-  React74__default.useEffect(() => setKeyDraft(rowKey), [rowKey]);
+  const [keyDraft, setKeyDraft] = React75__default.useState(rowKey);
+  React75__default.useEffect(() => setKeyDraft(rowKey), [rowKey]);
   const container = isObj(value) || isArr(value);
   return /* @__PURE__ */ jsxs(VStack, { gap: "none", className: "group w-max min-w-full", children: [
     /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", className: "py-0.5 w-max", children: [
@@ -22585,7 +22991,7 @@ function ContainerNode({
   depth,
   readonly
 }) {
-  const [open, setOpen] = React74__default.useState(depth < 2);
+  const [open, setOpen] = React75__default.useState(depth < 2);
   const array = isArr(value);
   const entries = array ? value.map((v, i) => [String(i), v]) : Object.entries(value);
   const setObjValue = (key, next) => {
@@ -22727,7 +23133,7 @@ var init_FormSection = __esm({
       columns = 1,
       className
     }) => {
-      const [collapsed, setCollapsed] = React74__default.useState(defaultCollapsed);
+      const [collapsed, setCollapsed] = React75__default.useState(defaultCollapsed);
       const { t } = useTranslate();
       const eventBus = useEventBus();
       const gridClass = {
@@ -22735,7 +23141,7 @@ var init_FormSection = __esm({
         2: "grid-cols-1 md:grid-cols-2",
         3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
       }[columns];
-      React74__default.useCallback(() => {
+      React75__default.useCallback(() => {
         if (collapsible) {
           setCollapsed((prev) => !prev);
           eventBus.emit("UI:TOGGLE_COLLAPSE", { collapsed: !collapsed });
@@ -23143,8 +23549,8 @@ function TextLikeControl({
   onCommit
 }) {
   const initial = value === void 0 || value === null ? "" : String(value);
-  const [draft, setDraft] = React74__default.useState(initial);
-  React74__default.useEffect(() => setDraft(initial), [initial]);
+  const [draft, setDraft] = React75__default.useState(initial);
+  React75__default.useEffect(() => setDraft(initial), [initial]);
   const commit = () => {
     if (numeric) {
       const n = draft.trim() === "" ? 0 : Number(draft);
@@ -23329,14 +23735,14 @@ var init_NodeSlotEditor = __esm({
     isObj2 = (v) => v !== null && v !== void 0 && typeof v === "object" && !Array.isArray(v);
     NodeSlotEditor = ({ value, onChange, className }) => {
       const { type, props, wasArray } = normalize(value);
-      const patterns = React74__default.useMemo(() => {
+      const patterns = React75__default.useMemo(() => {
         try {
           return [...getKnownPatterns()].sort();
         } catch {
           return [];
         }
       }, []);
-      const options = React74__default.useMemo(
+      const options = React75__default.useMemo(
         () => [{ value: "", label: "\u2014 none \u2014" }, ...patterns.map((p) => ({ value: p, label: p }))],
         [patterns]
       );
@@ -23348,7 +23754,7 @@ var init_NodeSlotEditor = __esm({
         const pattern = { type: nextType, ...nextProps };
         onChange(wasArray || value === void 0 ? [pattern] : pattern);
       };
-      const schemaEntries = React74__default.useMemo(() => {
+      const schemaEntries = React75__default.useMemo(() => {
         if (!type) return [];
         const def = getPatternDefinition(type);
         if (!def?.propsSchema) return [];
@@ -24250,7 +24656,7 @@ var init_Flex = __esm({
           flexStyle.flexBasis = typeof basis === "number" ? `${basis}px` : basis;
         }
       }
-      return React74__default.createElement(Component, {
+      return React75__default.createElement(Component, {
         className: cn(
           inline ? "inline-flex" : "flex",
           directionStyles[direction],
@@ -24369,7 +24775,7 @@ var init_Grid = __esm({
       as: Component = "div"
     }) => {
       const mergedStyle = rows2 ? { gridTemplateRows: `repeat(${rows2}, minmax(0, 1fr))`, ...style } : style;
-      return React74__default.createElement(
+      return React75__default.createElement(
         Component,
         {
           className: cn(
@@ -24565,9 +24971,9 @@ var init_Popover = __esm({
         onMouseLeave: handleClose,
         onPointerDown: tapTriggerProps.onPointerDown
       };
-      const childElement = React74__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
+      const childElement = React75__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
       const childPointerDown = childElement.props.onPointerDown;
-      const triggerElement = React74__default.cloneElement(
+      const triggerElement = React75__default.cloneElement(
         childElement,
         {
           ref: triggerRef,
@@ -25419,9 +25825,9 @@ var init_Tooltip = __esm({
           if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
         };
       }, []);
-      const triggerElement = React74__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
+      const triggerElement = React75__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
       const childPointerDown = triggerElement.props.onPointerDown;
-      const trigger = React74__default.cloneElement(triggerElement, {
+      const trigger = React75__default.cloneElement(triggerElement, {
         ref: triggerRef,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
@@ -25511,7 +25917,7 @@ var init_WizardProgress = __esm({
           children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: normalizedSteps.map((step, index) => {
             const isActive = index === currentStep;
             const isCompleted = index < currentStep;
-            return /* @__PURE__ */ jsxs(React74__default.Fragment, { children: [
+            return /* @__PURE__ */ jsxs(React75__default.Fragment, { children: [
               /* @__PURE__ */ jsx(
                 "button",
                 {
@@ -26625,13 +27031,12 @@ function GameCard({
   className
 }) {
   const eventBus = useEventBus();
-  const handleClick = React74.useCallback(() => {
+  const handleClick = React75.useCallback(() => {
     if (disabled) return;
     onClick?.(id);
     if (clickEvent) eventBus.emit(`UI:${clickEvent}`, { cardId: id });
   }, [disabled, id, onClick, clickEvent, eventBus]);
   const artPx = artPxMap[size];
-  const frameStyle = frameAsset?.url ? { backgroundImage: `url(${frameAsset.url})`, backgroundSize: "100% 100%", backgroundRepeat: "no-repeat" } : {};
   return /* @__PURE__ */ jsxs(
     Button,
     {
@@ -26639,11 +27044,10 @@ function GameCard({
       onClick: handleClick,
       disabled,
       title: name,
-      style: frameStyle,
       className: cn(
-        "relative flex flex-col items-center rounded-interactive",
-        "bg-card/90 px-1.5 pt-1.5 pb-1 transition-all duration-150",
-        frameAsset?.url ? "border-0" : "border-2",
+        "relative isolate flex flex-col items-center rounded-interactive",
+        "px-1.5 pt-1.5 pb-1 transition-all duration-150",
+        frameAsset?.url ? "border-0" : "border-2 bg-card/90",
         cardSizeMap[size],
         disabled ? "border-border opacity-50 cursor-not-allowed" : "border-accent hover:brightness-125 hover:-translate-y-1 cursor-pointer",
         selected && "ring-2 ring-foreground ring-offset-1 ring-offset-background -translate-y-1",
@@ -26651,6 +27055,7 @@ function GameCard({
         className
       ),
       children: [
+        frameAsset?.url && /* @__PURE__ */ jsx(AtlasImage, { asset: frameAsset, fill: true, fit: "fill", "aria-hidden": true, style: { zIndex: -1 } }),
         cost != null && /* @__PURE__ */ jsx(
           Typography,
           {
@@ -26689,6 +27094,7 @@ var init_GameCard = __esm({
     init_Box();
     init_Button();
     init_Typography();
+    init_AtlasImage();
     init_GameIcon();
     cardSizeMap = {
       sm: "w-16 h-24",
@@ -26706,7 +27112,7 @@ var init_GameCard = __esm({
   }
 });
 function ScoreDisplay({
-  assetUrl = DEFAULT_ASSET_URL5,
+  assetUrl,
   value,
   score,
   label,
@@ -26733,7 +27139,7 @@ function ScoreDisplay({
     }
   );
 }
-var sizeMap8, DEFAULT_ASSET_URL5;
+var sizeMap8;
 var init_ScoreDisplay = __esm({
   "components/game/2d/atoms/ScoreDisplay.tsx"() {
     init_cn();
@@ -26747,11 +27153,6 @@ var init_ScoreDisplay = __esm({
       lg: "text-2xl",
       xl: "text-4xl"
     };
-    DEFAULT_ASSET_URL5 = {
-      url: "https://almadar-kflow-assets.web.app/shared/effects/particles/star_01.png",
-      role: "effect",
-      category: "effect"
-    };
     ScoreDisplay.displayName = "ScoreDisplay";
   }
 });
@@ -26875,7 +27276,7 @@ function isKnownState(s) {
   return s in DEFAULT_STATE_STYLES;
 }
 function StateIndicator({
-  assetUrl = DEFAULT_ASSET_URL6,
+  assetUrl = DEFAULT_ASSET_URL5,
   state = "idle",
   label,
   size = "md",
@@ -26905,14 +27306,14 @@ function StateIndicator({
     }
   );
 }
-var DEFAULT_ASSET_URL6, DEFAULT_STATE_STYLES, DEFAULT_STYLE, STATIC_STATES, SIZE_CLASSES;
+var DEFAULT_ASSET_URL5, DEFAULT_STATE_STYLES, DEFAULT_STYLE, STATIC_STATES, SIZE_CLASSES;
 var init_StateIndicator = __esm({
   "components/game/2d/atoms/StateIndicator.tsx"() {
     init_Box();
     init_Icon();
     init_cn();
     init_GameIcon();
-    DEFAULT_ASSET_URL6 = {
+    DEFAULT_ASSET_URL5 = {
       url: "https://almadar-kflow-assets.web.app/shared/isometric-dungeon/Isometric/chestClosed_E.png",
       role: "ui",
       category: "state"
@@ -26998,7 +27399,7 @@ var init_TimerDisplay = __esm({
   }
 });
 function ResourceCounter({
-  assetUrl = DEFAULT_ASSET_URL7,
+  assetUrl = DEFAULT_ASSET_URL6,
   icon,
   label = "Gold",
   value = 250,
@@ -27031,7 +27432,7 @@ function ResourceCounter({
     }
   );
 }
-var colorTokenClasses2, DEFAULT_ASSET_URL7, sizeMap10;
+var colorTokenClasses2, DEFAULT_ASSET_URL6, sizeMap10;
 var init_ResourceCounter = __esm({
   "components/game/2d/atoms/ResourceCounter.tsx"() {
     init_cn();
@@ -27047,7 +27448,7 @@ var init_ResourceCounter = __esm({
       error: "text-error",
       muted: "text-muted-foreground"
     };
-    DEFAULT_ASSET_URL7 = {
+    DEFAULT_ASSET_URL6 = {
       url: "https://almadar-kflow-assets.web.app/shared/world-map/gold_mine.png",
       role: "ui",
       category: "coin"
@@ -27061,7 +27462,7 @@ var init_ResourceCounter = __esm({
   }
 });
 function ItemSlot({
-  assetUrl = DEFAULT_ASSET_URL8,
+  assetUrl = DEFAULT_ASSET_URL7,
   icon = "sword",
   label = "Iron Sword",
   quantity,
@@ -27116,7 +27517,7 @@ function ItemSlot({
     }
   );
 }
-var sizeMap11, rarityBorderMap, rarityGlowMap, DEFAULT_ASSET_URL8, assetSizeMap;
+var sizeMap11, rarityBorderMap, rarityGlowMap, DEFAULT_ASSET_URL7, assetSizeMap;
 var init_ItemSlot = __esm({
   "components/game/2d/atoms/ItemSlot.tsx"() {
     "use client";
@@ -27146,7 +27547,7 @@ var init_ItemSlot = __esm({
       epic: "shadow-lg",
       legendary: "shadow-lg"
     };
-    DEFAULT_ASSET_URL8 = {
+    DEFAULT_ASSET_URL7 = {
       url: "https://almadar-kflow-assets.web.app/shared/isometric-dungeon/Isometric/chestClosed_E.png",
       role: "item",
       category: "item"
@@ -27160,7 +27561,7 @@ var init_ItemSlot = __esm({
   }
 });
 function TurnIndicator({
-  assetUrl = DEFAULT_ASSET_URL9,
+  assetUrl = DEFAULT_ASSET_URL8,
   currentTurn = 1,
   maxTurns,
   activeTeam,
@@ -27200,7 +27601,7 @@ function TurnIndicator({
     }
   );
 }
-var sizeMap12, DEFAULT_ASSET_URL9;
+var sizeMap12, DEFAULT_ASSET_URL8;
 var init_TurnIndicator = __esm({
   "components/game/2d/atoms/TurnIndicator.tsx"() {
     init_cn();
@@ -27212,7 +27613,7 @@ var init_TurnIndicator = __esm({
       md: { wrapper: "text-sm gap-2 px-3 py-1", dot: "w-2 h-2" },
       lg: { wrapper: "text-base gap-2.5 px-4 py-1.5", dot: "w-2.5 h-2.5" }
     };
-    DEFAULT_ASSET_URL9 = {
+    DEFAULT_ASSET_URL8 = {
       url: "https://almadar-kflow-assets.web.app/shared/effects/particles/symbol_01.png",
       role: "ui",
       category: "turn"
@@ -27221,7 +27622,7 @@ var init_TurnIndicator = __esm({
   }
 });
 function WaypointMarker({
-  assetUrl = DEFAULT_ASSET_URL10,
+  assetUrl = DEFAULT_ASSET_URL9,
   label,
   icon,
   active = true,
@@ -27281,7 +27682,7 @@ function WaypointMarker({
     )
   ] });
 }
-var DEFAULT_ASSET_URL10, sizeMap13, checkIcon;
+var DEFAULT_ASSET_URL9, sizeMap13, checkIcon;
 var init_WaypointMarker = __esm({
   "components/game/2d/atoms/WaypointMarker.tsx"() {
     init_cn();
@@ -27289,7 +27690,7 @@ var init_WaypointMarker = __esm({
     init_Box();
     init_Typography();
     init_GameIcon();
-    DEFAULT_ASSET_URL10 = {
+    DEFAULT_ASSET_URL9 = {
       url: "https://almadar-kflow-assets.web.app/shared/world-map/battle_marker.png",
       role: "ui",
       category: "waypoint"
@@ -27310,7 +27711,7 @@ function formatDuration(seconds) {
   return `${Math.round(seconds)}s`;
 }
 function StatusEffect({
-  assetUrl = DEFAULT_ASSET_URL11,
+  assetUrl = DEFAULT_ASSET_URL10,
   icon,
   label = "Shield",
   duration = 30,
@@ -27361,7 +27762,7 @@ function StatusEffect({
     label && /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-xs text-muted-foreground mt-0.5 text-center whitespace-nowrap", children: label })
   ] });
 }
-var DEFAULT_ASSET_URL11, sizeMap14, variantStyles8;
+var DEFAULT_ASSET_URL10, sizeMap14, variantStyles8;
 var init_StatusEffect = __esm({
   "components/game/2d/atoms/StatusEffect.tsx"() {
     init_cn();
@@ -27369,7 +27770,7 @@ var init_StatusEffect = __esm({
     init_Box();
     init_Typography();
     init_GameIcon();
-    DEFAULT_ASSET_URL11 = {
+    DEFAULT_ASSET_URL10 = {
       url: "https://almadar-kflow-assets.web.app/shared/effects/particles/flame_01.png",
       role: "ui",
       category: "effect"
@@ -27533,7 +27934,7 @@ function InventoryGrid({
   const eventBus = useEventBus();
   const slotCount = totalSlots ?? items.length;
   const emptySlotCount = Math.max(0, slotCount - items.length);
-  const handleSelect = React74.useCallback(
+  const handleSelect = React75.useCallback(
     (id) => {
       onSelect?.(id);
       if (selectEvent) {
@@ -27750,7 +28151,7 @@ function GameMenu({
 }) {
   const resolvedOptions = options ?? menuItems ?? DEFAULT_MENU_OPTIONS;
   const eventBus = useEventBus();
-  const handleOptionClick = React74.useCallback(
+  const handleOptionClick = React75.useCallback(
     (option) => {
       if (option.event) {
         eventBus.emit(`UI:${option.event}`, { option });
@@ -27976,7 +28377,7 @@ function StateGraph({
 }) {
   const eventBus = useEventBus();
   const nodes = states ?? [];
-  const positions = React74.useMemo(() => layoutStates(nodes, width, height), [nodes, width, height]);
+  const positions = React75.useMemo(() => layoutStates(nodes, width, height), [nodes, width, height]);
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -28412,7 +28813,7 @@ function LinearView({
     /* @__PURE__ */ jsx(HStack, { className: "flex-wrap items-center", gap: "xs", children: trait.states.map((state, i) => {
       const isDone = i < currentIdx;
       const isCurrent = i === currentIdx;
-      return /* @__PURE__ */ jsxs(React74__default.Fragment, { children: [
+      return /* @__PURE__ */ jsxs(React75__default.Fragment, { children: [
         i > 0 && /* @__PURE__ */ jsx(
           Typography,
           {
@@ -29045,7 +29446,7 @@ function SequenceBar({
     else onSlotRemove?.(index);
   }, [emit, slotRemoveEvent, onSlotRemove, playing]);
   const paddedSlots = Array.from({ length: maxSlots }, (_, i) => slots[i]);
-  return /* @__PURE__ */ jsx(HStack, { className: cn("items-center", className), gap: "sm", children: paddedSlots.map((slot, i) => /* @__PURE__ */ jsxs(React74__default.Fragment, { children: [
+  return /* @__PURE__ */ jsx(HStack, { className: cn("items-center", className), gap: "sm", children: paddedSlots.map((slot, i) => /* @__PURE__ */ jsxs(React75__default.Fragment, { children: [
     i > 0 && /* @__PURE__ */ jsx(
       Typography,
       {
@@ -30931,82 +31332,167 @@ var init_GameTemplate = __esm({
     GameTemplate.displayName = "GameTemplate";
   }
 });
-var GameShell;
+var FONT_BASE, GAME_FONTS, FONT_FACES, GameShell;
 var init_GameShell = __esm({
   "components/game/2d/templates/GameShell.tsx"() {
     init_cn();
     init_Box();
-    init_Stack();
     init_Typography();
+    init_AtlasImage();
+    FONT_BASE = "https://almadar-kflow-assets.web.app/shared/_shared/kenney-fonts/fonts";
+    GAME_FONTS = {
+      future: "Kenney Future",
+      "future-narrow": "Kenney Future Narrow",
+      pixel: "Kenney Pixel",
+      blocks: "Kenney Blocks",
+      mini: "Kenney Mini"
+    };
+    FONT_FACES = `
+@font-face { font-family: 'Kenney Future'; src: url('${FONT_BASE}/Kenney%20Future.ttf') format('truetype'); font-display: swap; }
+@font-face { font-family: 'Kenney Future Narrow'; src: url('${FONT_BASE}/Kenney%20Future%20Narrow.ttf') format('truetype'); font-display: swap; }
+@font-face { font-family: 'Kenney Pixel'; src: url('${FONT_BASE}/Kenney%20Pixel.ttf') format('truetype'); font-display: swap; }
+@font-face { font-family: 'Kenney Blocks'; src: url('${FONT_BASE}/Kenney%20Blocks.ttf') format('truetype'); font-display: swap; }
+@font-face { font-family: 'Kenney Mini'; src: url('${FONT_BASE}/Kenney%20Mini.ttf') format('truetype'); font-display: swap; }
+.game-shell, .game-shell * { font-family: inherit; }
+`;
     GameShell = ({
       appName = "Game",
       hud,
+      addons,
+      controls,
+      overlay,
       className,
       showTopBar = true,
       children,
       backgroundAsset,
-      hudBackgroundAsset
+      hudBackgroundAsset,
+      fontFamily = "future"
     }) => {
+      const font = GAME_FONTS[fontFamily] ?? fontFamily;
       return /* @__PURE__ */ jsxs(
         Box,
         {
-          display: "flex",
-          className: cn(
-            "game-shell",
-            "flex-col w-full h-screen overflow-hidden",
-            className
-          ),
+          className: cn("game-shell", className),
           style: {
+            position: "relative",
             width: "100vw",
             height: "100vh",
             overflow: "hidden",
-            background: backgroundAsset ? `url(${backgroundAsset.url}) center/cover no-repeat` : "var(--color-background, #0a0a0f)",
-            color: "var(--color-text, #e0e0e0)"
+            background: "var(--color-background, #0a0a0f)",
+            color: "var(--color-text, #e0e0e0)",
+            fontFamily: `'${font}', system-ui, sans-serif`
           },
           children: [
-            showTopBar && /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx("style", { children: FONT_FACES }),
+            backgroundAsset && /* @__PURE__ */ jsx(
+              AtlasPanel,
+              {
+                asset: backgroundAsset,
+                mode: "repeat",
+                "aria-hidden": true,
+                className: "game-shell__bg",
+                style: { position: "absolute", inset: 0, opacity: 0.18, zIndex: 0, display: "block" }
+              }
+            ),
+            /* @__PURE__ */ jsx(Box, { className: "game-shell__content", style: { position: "absolute", inset: 0, zIndex: 1 }, children }),
+            (showTopBar || hud) && /* @__PURE__ */ jsxs(
               Box,
               {
-                className: "game-shell__header",
+                className: "game-shell__top pointer-events-none",
                 style: {
-                  flexShrink: 0,
-                  background: hudBackgroundAsset ? `url(${hudBackgroundAsset.url}) center/cover no-repeat` : "var(--color-surface, #12121f)",
-                  borderBottom: "1px solid var(--color-border, #2a2a3a)"
+                  position: "absolute",
+                  top: 12,
+                  left: 12,
+                  right: 12,
+                  zIndex: 2,
+                  display: "flex",
+                  alignItems: "flex-start",
+                  gap: 12
                 },
                 children: [
-                  /* @__PURE__ */ jsx(
-                    HStack,
+                  showTopBar && /* @__PURE__ */ jsx(
+                    AtlasPanel,
                     {
-                      align: "center",
-                      justify: "between",
-                      style: { padding: "0.375rem 1rem" },
+                      asset: hudBackgroundAsset,
+                      borderSlice: 12,
+                      borderWidth: 10,
+                      className: "game-shell__title pointer-events-auto",
+                      style: {
+                        padding: "6px 16px",
+                        background: hudBackgroundAsset ? void 0 : "rgba(18, 18, 31, 0.85)",
+                        borderRadius: hudBackgroundAsset ? void 0 : 10,
+                        boxShadow: "0 4px 14px rgba(0,0,0,0.45)",
+                        flexShrink: 0
+                      },
                       children: /* @__PURE__ */ jsx(
                         Typography,
                         {
-                          variant: "h6",
+                          as: "span",
                           style: {
                             fontWeight: 700,
-                            letterSpacing: "0.02em"
+                            fontSize: "1.05rem",
+                            letterSpacing: "0.06em",
+                            textShadow: "0 2px 0 rgba(0,0,0,0.5)",
+                            whiteSpace: "nowrap"
                           },
                           children: appName
                         }
                       )
                     }
                   ),
-                  hud && /* @__PURE__ */ jsx(Box, { className: "game-shell__hud", style: { width: "100%" }, children: hud })
+                  hud && /* @__PURE__ */ jsx(Box, { className: "game-shell__hud pointer-events-auto", style: { flex: 1, minWidth: 0 }, children: hud })
                 ]
               }
             ),
-            /* @__PURE__ */ jsx(
+            controls && /* @__PURE__ */ jsx(
               Box,
               {
-                className: "game-shell__content",
+                className: "game-shell__controls pointer-events-auto",
                 style: {
-                  flex: 1,
-                  overflow: "hidden",
-                  position: "relative"
+                  position: "absolute",
+                  left: 16,
+                  bottom: 16,
+                  zIndex: 2,
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "flex-start",
+                  gap: 10,
+                  filter: "drop-shadow(0 6px 12px rgba(0,0,0,0.5))"
                 },
-                children
+                children: controls
+              }
+            ),
+            addons && /* @__PURE__ */ jsx(
+              Box,
+              {
+                className: "game-shell__actions pointer-events-auto",
+                style: {
+                  position: "absolute",
+                  right: 16,
+                  bottom: 16,
+                  zIndex: 2,
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "flex-end",
+                  gap: 10,
+                  filter: "drop-shadow(0 6px 12px rgba(0,0,0,0.5))"
+                },
+                children: addons
+              }
+            ),
+            overlay && /* @__PURE__ */ jsx(
+              Box,
+              {
+                className: "game-shell__overlay pointer-events-none",
+                style: {
+                  position: "absolute",
+                  inset: 0,
+                  zIndex: 3,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center"
+                },
+                children: /* @__PURE__ */ jsx(Box, { className: "pointer-events-auto", children: overlay })
               }
             )
           ]
@@ -31679,13 +32165,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect69, useRef: useRef64, useCallback: useCallback113, useState: useState108 } = React74__default;
+      const { useEffect: useEffect70, useRef: useRef65, useCallback: useCallback113, useState: useState108 } = React75__default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus2 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
         const map = useMap();
-        const prevRef = useRef64({ centerLat, centerLng, zoom });
-        useEffect69(() => {
+        const prevRef = useRef65({ centerLat, centerLng, zoom });
+        useEffect70(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -31696,7 +32182,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect69(() => {
+        useEffect70(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -32594,8 +33080,8 @@ function TableView({
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
-  const [visibleCount, setVisibleCount] = React74__default.useState(pageSize > 0 ? pageSize : Infinity);
-  const [localSelected, setLocalSelected] = React74__default.useState(/* @__PURE__ */ new Set());
+  const [visibleCount, setVisibleCount] = React75__default.useState(pageSize > 0 ? pageSize : Infinity);
+  const [localSelected, setLocalSelected] = React75__default.useState(/* @__PURE__ */ new Set());
   const colDefs = columns ?? fields ?? [];
   const allDataRaw = Array.isArray(entity) ? entity : entity ? [entity] : [];
   const dnd = useDataDnd({
@@ -32790,12 +33276,12 @@ function TableView({
         ]
       }
     );
-    return dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: row[idField] ?? id, children: rowInner }, id) : /* @__PURE__ */ jsx(React74__default.Fragment, { children: rowInner }, id);
+    return dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: row[idField] ?? id, children: rowInner }, id) : /* @__PURE__ */ jsx(React75__default.Fragment, { children: rowInner }, id);
   };
   const items = Array.from(data);
   const groups = groupBy ? groupData2(items, groupBy) : [{ label: "", items }];
   let runningIndex = 0;
-  const body = /* @__PURE__ */ jsx(Box, { role: "rowgroup", children: groups.map((group, gi) => /* @__PURE__ */ jsxs(React74__default.Fragment, { children: [
+  const body = /* @__PURE__ */ jsx(Box, { role: "rowgroup", children: groups.map((group, gi) => /* @__PURE__ */ jsxs(React75__default.Fragment, { children: [
     group.label && /* @__PURE__ */ jsx(Divider, { label: group.label, className: gi > 0 ? "mt-3" : "mt-0" }),
     group.items.map((row) => renderRow(row, runningIndex++))
   ] }, gi)) });
@@ -34152,7 +34638,7 @@ var init_StepFlow = __esm({
       className
     }) => {
       if (orientation === "vertical") {
-        return /* @__PURE__ */ jsx(VStack, { gap: "none", className: cn("w-full", className), children: steps.map((step, index) => /* @__PURE__ */ jsx(React74__default.Fragment, { children: /* @__PURE__ */ jsxs(HStack, { gap: "md", align: "start", className: "w-full", children: [
+        return /* @__PURE__ */ jsx(VStack, { gap: "none", className: cn("w-full", className), children: steps.map((step, index) => /* @__PURE__ */ jsx(React75__default.Fragment, { children: /* @__PURE__ */ jsxs(HStack, { gap: "md", align: "start", className: "w-full", children: [
           /* @__PURE__ */ jsxs(VStack, { gap: "none", align: "center", children: [
             /* @__PURE__ */ jsx(StepCircle, { step, index }),
             showConnectors && index < steps.length - 1 && /* @__PURE__ */ jsx(Box, { className: "w-px h-8 bg-border" })
@@ -34163,7 +34649,7 @@ var init_StepFlow = __esm({
           ] })
         ] }) }, index)) });
       }
-      return /* @__PURE__ */ jsx(Box, { className: cn("w-full flex flex-col md:flex-row items-start gap-0", className), children: steps.map((step, index) => /* @__PURE__ */ jsxs(React74__default.Fragment, { children: [
+      return /* @__PURE__ */ jsx(Box, { className: cn("w-full flex flex-col md:flex-row items-start gap-0", className), children: steps.map((step, index) => /* @__PURE__ */ jsxs(React75__default.Fragment, { children: [
         /* @__PURE__ */ jsxs(VStack, { gap: "sm", align: "center", className: "flex-1 w-full md:w-auto", children: [
           /* @__PURE__ */ jsx(StepCircle, { step, index }),
           /* @__PURE__ */ jsx(Typography, { variant: "h4", className: "text-center", children: step.title }),
@@ -35148,7 +35634,7 @@ var init_LikertScale = __esm({
       md: "text-base",
       lg: "text-lg"
     };
-    LikertScale = React74__default.forwardRef(
+    LikertScale = React75__default.forwardRef(
       ({
         question,
         options = DEFAULT_LIKERT_OPTIONS,
@@ -35160,7 +35646,7 @@ var init_LikertScale = __esm({
         variant = "radios",
         className
       }, ref) => {
-        const groupId = React74__default.useId();
+        const groupId = React75__default.useId();
         const eventBus = useEventBus();
         const handleSelect = useCallback(
           (next) => {
@@ -37442,7 +37928,7 @@ var init_DocBreadcrumb = __esm({
           "aria-label": t("aria.breadcrumb"),
           children: /* @__PURE__ */ jsx(HStack, { gap: "xs", align: "center", wrap: true, children: items.map((item, idx) => {
             const isLast = idx === items.length - 1;
-            return /* @__PURE__ */ jsxs(React74__default.Fragment, { children: [
+            return /* @__PURE__ */ jsxs(React75__default.Fragment, { children: [
               idx > 0 && /* @__PURE__ */ jsx(
                 Icon,
                 {
@@ -38311,7 +38797,7 @@ var init_MiniStateMachine = __esm({
           const x = 2 + i * (NODE_W + GAP2 + ARROW_W + GAP2);
           const tc = transitionCounts[s.name] ?? 0;
           const role = getStateRole(s.name, s.isInitial ?? void 0, s.isTerminal ?? void 0, tc, maxTC);
-          return /* @__PURE__ */ jsxs(React74__default.Fragment, { children: [
+          return /* @__PURE__ */ jsxs(React75__default.Fragment, { children: [
             /* @__PURE__ */ jsx(
               AvlState,
               {
@@ -38515,7 +39001,7 @@ var init_PageHeader = __esm({
         info: "bg-info/10 text-info"
       };
       return /* @__PURE__ */ jsxs(Box, { className: cn("mb-6", className), children: [
-        breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx(Box, { as: "nav", className: "mb-4", children: /* @__PURE__ */ jsx(Box, { as: "ol", className: "flex items-center gap-2 text-sm", children: breadcrumbs.map((crumb, idx) => /* @__PURE__ */ jsxs(React74__default.Fragment, { children: [
+        breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx(Box, { as: "nav", className: "mb-4", children: /* @__PURE__ */ jsx(Box, { as: "ol", className: "flex items-center gap-2 text-sm", children: breadcrumbs.map((crumb, idx) => /* @__PURE__ */ jsxs(React75__default.Fragment, { children: [
           idx > 0 && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", children: "/" }),
           crumb.href ? /* @__PURE__ */ jsx(
             "a",
@@ -38873,7 +39359,7 @@ var init_Section = __esm({
       as: Component = "section"
     }) => {
       const hasHeader = title || description || action;
-      return React74__default.createElement(
+      return React75__default.createElement(
         Component,
         {
           className: cn(
@@ -39247,7 +39733,7 @@ var init_WizardContainer = __esm({
               const isCompleted = index < currentStep;
               const stepKey = step.id ?? step.tabId ?? `step-${index}`;
               const stepTitle = step.title ?? step.name ?? `Step ${index + 1}`;
-              return /* @__PURE__ */ jsxs(React74__default.Fragment, { children: [
+              return /* @__PURE__ */ jsxs(React75__default.Fragment, { children: [
                 /* @__PURE__ */ jsx(
                   Button,
                   {
@@ -40883,6 +41369,7 @@ var init_molecules2 = __esm({
     init_PhysicsCanvas();
     init_BiologyCanvas();
     init_ChemistryCanvas();
+    init_AlgorithmCanvas();
     init_GraphView();
     init_MapView();
     init_NumberStepper();
@@ -41896,7 +42383,7 @@ var init_DetailPanel = __esm({
   }
 });
 function extractTitle(children) {
-  if (!React74__default.isValidElement(children)) return void 0;
+  if (!React75__default.isValidElement(children)) return void 0;
   const props = children.props;
   if (typeof props.title === "string") {
     return props.title;
@@ -42246,12 +42733,12 @@ var init_Form = __esm({
       const isSchemaEntity = isOrbitalEntitySchema(entity);
       const resolvedEntity = isSchemaEntity ? entity : void 0;
       const entityName = typeof entity === "string" ? entity : resolvedEntity?.name;
-      const normalizedInitialData = React74__default.useMemo(() => {
+      const normalizedInitialData = React75__default.useMemo(() => {
         const entityRowAsInitial = isPlainEntityRow(entity) ? entity : void 0;
         const callerInitial = initialData !== null && typeof initialData === "object" && !Array.isArray(initialData) ? initialData : {};
         return entityRowAsInitial !== void 0 ? { ...entityRowAsInitial, ...callerInitial } : callerInitial;
       }, [entity, initialData]);
-      const entityDerivedFields = React74__default.useMemo(() => {
+      const entityDerivedFields = React75__default.useMemo(() => {
         if (fields && fields.length > 0) return void 0;
         if (!resolvedEntity) return void 0;
         return resolvedEntity.fields.map(
@@ -42272,16 +42759,16 @@ var init_Form = __esm({
       const conditionalFields = typeof conditionalFieldsRaw === "boolean" ? {} : conditionalFieldsRaw;
       const hiddenCalculations = typeof hiddenCalculationsRaw === "boolean" ? [] : hiddenCalculationsRaw;
       const violationTriggers = typeof violationTriggersRaw === "boolean" ? [] : violationTriggersRaw;
-      const [formData, setFormData] = React74__default.useState(
+      const [formData, setFormData] = React75__default.useState(
         normalizedInitialData
       );
-      const [collapsedSections, setCollapsedSections] = React74__default.useState(
+      const [collapsedSections, setCollapsedSections] = React75__default.useState(
         /* @__PURE__ */ new Set()
       );
-      const [submitError, setSubmitError] = React74__default.useState(null);
-      const formRef = React74__default.useRef(null);
+      const [submitError, setSubmitError] = React75__default.useState(null);
+      const formRef = React75__default.useRef(null);
       const formMode = props.mode;
-      const mountedRef = React74__default.useRef(false);
+      const mountedRef = React75__default.useRef(false);
       if (!mountedRef.current) {
         mountedRef.current = true;
         debug("forms", "mount", {
@@ -42294,7 +42781,7 @@ var init_Form = __esm({
         });
       }
       const shouldShowCancel = showCancel ?? (fields && fields.length > 0);
-      const evalContext = React74__default.useMemo(
+      const evalContext = React75__default.useMemo(
         () => ({
           formValues: formData,
           globalVariables: externalContext?.globalVariables ?? {},
@@ -42303,7 +42790,7 @@ var init_Form = __esm({
         }),
         [formData, externalContext]
       );
-      React74__default.useEffect(() => {
+      React75__default.useEffect(() => {
         debug("forms", "initialData-sync", {
           mode: formMode,
           normalizedInitialData,
@@ -42314,7 +42801,7 @@ var init_Form = __esm({
           setFormData(normalizedInitialData);
         }
       }, [normalizedInitialData]);
-      const processCalculations = React74__default.useCallback(
+      const processCalculations = React75__default.useCallback(
         (changedFieldId, newFormData) => {
           if (!hiddenCalculations.length) return;
           const context = {
@@ -42339,7 +42826,7 @@ var init_Form = __esm({
         },
         [hiddenCalculations, externalContext, eventBus]
       );
-      const checkViolations = React74__default.useCallback(
+      const checkViolations = React75__default.useCallback(
         (changedFieldId, newFormData) => {
           if (!violationTriggers.length) return;
           const context = {
@@ -42377,7 +42864,7 @@ var init_Form = __esm({
         processCalculations(name, newFormData);
         checkViolations(name, newFormData);
       };
-      const isFieldVisible = React74__default.useCallback(
+      const isFieldVisible = React75__default.useCallback(
         (fieldName) => {
           const condition = conditionalFields[fieldName];
           if (!condition) return true;
@@ -42385,7 +42872,7 @@ var init_Form = __esm({
         },
         [conditionalFields, evalContext]
       );
-      const isSectionVisible = React74__default.useCallback(
+      const isSectionVisible = React75__default.useCallback(
         (section) => {
           if (!section.condition) return true;
           return Boolean(evaluateFormExpression(section.condition, evalContext));
@@ -42461,7 +42948,7 @@ var init_Form = __esm({
           eventBus.emit(`UI:${onCancel}`);
         }
       };
-      const renderField = React74__default.useCallback(
+      const renderField = React75__default.useCallback(
         (field) => {
           const fieldName = field.name || field.field;
           if (!fieldName) return null;
@@ -42482,7 +42969,7 @@ var init_Form = __esm({
         [formData, isFieldVisible, relationsData, relationsLoading, isLoading]
       );
       const effectiveFields = entityDerivedFields ?? fields;
-      const normalizedFields = React74__default.useMemo(() => {
+      const normalizedFields = React75__default.useMemo(() => {
         if (!effectiveFields || effectiveFields.length === 0) return [];
         return effectiveFields.map((field) => {
           if (typeof field === "string") {
@@ -42506,7 +42993,7 @@ var init_Form = __esm({
           return field;
         });
       }, [effectiveFields, resolvedEntity]);
-      const schemaFields = React74__default.useMemo(() => {
+      const schemaFields = React75__default.useMemo(() => {
         if (normalizedFields.length === 0) return null;
         if (isDebugEnabled()) {
           debugGroup(`Form: ${entityName || "unknown"}`);
@@ -42516,7 +43003,7 @@ var init_Form = __esm({
         }
         return normalizedFields.map(renderField).filter(Boolean);
       }, [normalizedFields, renderField, entityName, conditionalFields]);
-      const sectionElements = React74__default.useMemo(() => {
+      const sectionElements = React75__default.useMemo(() => {
         if (!sections || sections.length === 0) return null;
         return sections.map((section) => {
           if (!isSectionVisible(section)) {
@@ -43241,7 +43728,7 @@ var init_List = __esm({
         if (entity && typeof entity === "object" && "id" in entity) return [entity];
         return [];
       }, [entity]);
-      const getItemActions = React74__default.useCallback(
+      const getItemActions = React75__default.useCallback(
         (item) => {
           if (!itemActions) return [];
           if (typeof itemActions === "function") {
@@ -43716,7 +44203,7 @@ var init_MediaGallery = __esm({
         [selectable, selectedItems, selectionEvent, eventBus]
       );
       const entityData = Array.isArray(entity) ? entity : [];
-      const items = React74__default.useMemo(() => {
+      const items = React75__default.useMemo(() => {
         if (propItems) return propItems;
         if (entityData.length === 0) return [];
         return entityData.map((record, idx) => {
@@ -43879,7 +44366,7 @@ var init_MediaGallery = __esm({
   }
 });
 function extractTitle2(children) {
-  if (!React74__default.isValidElement(children)) return void 0;
+  if (!React75__default.isValidElement(children)) return void 0;
   const props = children.props;
   if (typeof props.title === "string") {
     return props.title;
@@ -44134,7 +44621,7 @@ var init_debugRegistry = __esm({
   }
 });
 function useDebugData() {
-  const [data, setData] = React74.useState(() => ({
+  const [data, setData] = React75.useState(() => ({
     traits: [],
     ticks: [],
     guards: [],
@@ -44148,7 +44635,7 @@ function useDebugData() {
     },
     lastUpdate: Date.now()
   }));
-  React74.useEffect(() => {
+  React75.useEffect(() => {
     const updateData = () => {
       setData({
         traits: getAllTraits(),
@@ -44257,12 +44744,12 @@ function layoutGraph(states, transitions, initialState, width, height) {
   return positions;
 }
 function WalkMinimap() {
-  const [walkStep, setWalkStep] = React74.useState(null);
-  const [traits2, setTraits] = React74.useState([]);
-  const [coveredEdges, setCoveredEdges] = React74.useState([]);
-  const [completedTraits, setCompletedTraits] = React74.useState(/* @__PURE__ */ new Set());
-  const prevTraitRef = React74.useRef(null);
-  React74.useEffect(() => {
+  const [walkStep, setWalkStep] = React75.useState(null);
+  const [traits2, setTraits] = React75.useState([]);
+  const [coveredEdges, setCoveredEdges] = React75.useState([]);
+  const [completedTraits, setCompletedTraits] = React75.useState(/* @__PURE__ */ new Set());
+  const prevTraitRef = React75.useRef(null);
+  React75.useEffect(() => {
     const interval = setInterval(() => {
       const w = window;
       const step = w.__orbitalWalkStep;
@@ -44698,15 +45185,15 @@ var init_EntitiesTab = __esm({
 });
 function EventFlowTab({ events: events2 }) {
   const { t } = useTranslate();
-  const [filter, setFilter] = React74.useState("all");
-  const containerRef = React74.useRef(null);
-  const [autoScroll, setAutoScroll] = React74.useState(true);
-  React74.useEffect(() => {
+  const [filter, setFilter] = React75.useState("all");
+  const containerRef = React75.useRef(null);
+  const [autoScroll, setAutoScroll] = React75.useState(true);
+  React75.useEffect(() => {
     if (autoScroll && containerRef.current) {
       containerRef.current.scrollTop = containerRef.current.scrollHeight;
     }
   }, [events2.length, autoScroll]);
-  const filteredEvents = React74.useMemo(() => {
+  const filteredEvents = React75.useMemo(() => {
     if (filter === "all") return events2;
     return events2.filter((e) => e.type === filter);
   }, [events2, filter]);
@@ -44822,7 +45309,7 @@ var init_EventFlowTab = __esm({
 });
 function GuardsPanel({ guards }) {
   const { t } = useTranslate();
-  const [filter, setFilter] = React74.useState("all");
+  const [filter, setFilter] = React75.useState("all");
   if (guards.length === 0) {
     return /* @__PURE__ */ jsx(
       EmptyState,
@@ -44835,7 +45322,7 @@ function GuardsPanel({ guards }) {
   }
   const passedCount = guards.filter((g) => g.result).length;
   const failedCount = guards.length - passedCount;
-  const filteredGuards = React74.useMemo(() => {
+  const filteredGuards = React75.useMemo(() => {
     if (filter === "all") return guards;
     if (filter === "passed") return guards.filter((g) => g.result);
     return guards.filter((g) => !g.result);
@@ -44998,10 +45485,10 @@ function EffectBadge({ effect }) {
 }
 function TransitionTimeline({ transitions }) {
   const { t } = useTranslate();
-  const containerRef = React74.useRef(null);
-  const [autoScroll, setAutoScroll] = React74.useState(true);
-  const [expandedId, setExpandedId] = React74.useState(null);
-  React74.useEffect(() => {
+  const containerRef = React75.useRef(null);
+  const [autoScroll, setAutoScroll] = React75.useState(true);
+  const [expandedId, setExpandedId] = React75.useState(null);
+  React75.useEffect(() => {
     if (autoScroll && containerRef.current) {
       containerRef.current.scrollTop = containerRef.current.scrollHeight;
     }
@@ -45281,9 +45768,9 @@ function getAllEvents(traits2) {
 function EventDispatcherTab({ traits: traits2, schema }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
-  const [log18, setLog] = React74.useState([]);
-  const prevStatesRef = React74.useRef(/* @__PURE__ */ new Map());
-  React74.useEffect(() => {
+  const [log18, setLog] = React75.useState([]);
+  const prevStatesRef = React75.useRef(/* @__PURE__ */ new Map());
+  React75.useEffect(() => {
     for (const trait of traits2) {
       const prev = prevStatesRef.current.get(trait.id);
       if (prev && prev !== trait.currentState) {
@@ -45452,10 +45939,10 @@ function VerifyModePanel({
   localCount
 }) {
   const { t } = useTranslate();
-  const [expanded, setExpanded] = React74.useState(true);
-  const scrollRef = React74.useRef(null);
-  const prevCountRef = React74.useRef(0);
-  React74.useEffect(() => {
+  const [expanded, setExpanded] = React75.useState(true);
+  const scrollRef = React75.useRef(null);
+  const prevCountRef = React75.useRef(0);
+  React75.useEffect(() => {
     if (expanded && transitions.length > prevCountRef.current && scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }
@@ -45512,10 +45999,10 @@ function RuntimeDebugger({
   schema
 }) {
   const { t } = useTranslate();
-  const [isCollapsed, setIsCollapsed] = React74.useState(mode === "verify" ? true : defaultCollapsed);
-  const [isVisible, setIsVisible] = React74.useState(mode === "inline" || mode === "verify" || isDebugEnabled2());
+  const [isCollapsed, setIsCollapsed] = React75.useState(mode === "verify" ? true : defaultCollapsed);
+  const [isVisible, setIsVisible] = React75.useState(mode === "inline" || mode === "verify" || isDebugEnabled2());
   const debugData = useDebugData();
-  React74.useEffect(() => {
+  React75.useEffect(() => {
     if (mode === "inline") return;
     return onDebugToggle((enabled) => {
       setIsVisible(enabled);
@@ -45524,7 +46011,7 @@ function RuntimeDebugger({
       }
     });
   }, [mode]);
-  React74.useEffect(() => {
+  React75.useEffect(() => {
     if (mode === "inline") return;
     const handleKeyDown = (e) => {
       if (e.key === "`" && isVisible) {
@@ -46044,7 +46531,7 @@ var init_StatCard = __esm({
       const labelToUse = propLabel ?? propTitle;
       const eventBus = useEventBus();
       const { t } = useTranslate();
-      const handleActionClick = React74__default.useCallback(() => {
+      const handleActionClick = React75__default.useCallback(() => {
         if (action?.event) {
           eventBus.emit(`UI:${action.event}`, {});
         }
@@ -46055,7 +46542,7 @@ var init_StatCard = __esm({
       const data = Array.isArray(entity) ? entity : entity ? [entity] : [];
       const isLoading = externalLoading ?? false;
       const error = externalError;
-      const computeMetricValue = React74__default.useCallback(
+      const computeMetricValue = React75__default.useCallback(
         (metric, items) => {
           if (metric.value !== void 0) {
             return metric.value;
@@ -46094,7 +46581,7 @@ var init_StatCard = __esm({
         },
         []
       );
-      const schemaStats = React74__default.useMemo(() => {
+      const schemaStats = React75__default.useMemo(() => {
         if (!metrics || metrics.length === 0) return null;
         return metrics.map((metric) => ({
           label: metric.label,
@@ -46102,7 +46589,7 @@ var init_StatCard = __esm({
           format: metric.format
         }));
       }, [metrics, data, computeMetricValue]);
-      const calculatedTrend = React74__default.useMemo(() => {
+      const calculatedTrend = React75__default.useMemo(() => {
         if (manualTrend !== void 0) return manualTrend;
         if (previousValue === void 0 || currentValue2 === void 0)
           return void 0;
@@ -46742,8 +47229,8 @@ var init_SubagentTracePanel = __esm({
       ] });
     };
     InlineActivityStream = ({ activities, autoScroll = true, className }) => {
-      const endRef = React74__default.useRef(null);
-      React74__default.useEffect(() => {
+      const endRef = React75__default.useRef(null);
+      React75__default.useEffect(() => {
         if (!autoScroll) return;
         endRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
       }, [activities.length, autoScroll]);
@@ -46837,7 +47324,7 @@ var init_SubagentTracePanel = __esm({
     };
     SubagentRichCard = ({ subagent }) => {
       const { t } = useTranslate();
-      const activities = React74__default.useMemo(
+      const activities = React75__default.useMemo(
         () => subagentMessagesToActivities(subagent.messages),
         [subagent.messages]
       );
@@ -46914,8 +47401,8 @@ var init_SubagentTracePanel = __esm({
       ] });
     };
     CoordinatorConversation = ({ messages, autoScroll = true, className }) => {
-      const endRef = React74__default.useRef(null);
-      React74__default.useEffect(() => {
+      const endRef = React75__default.useRef(null);
+      React75__default.useEffect(() => {
         if (!autoScroll) return;
         endRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
       }, [messages.length, autoScroll]);
@@ -47345,7 +47832,7 @@ var init_Timeline = __esm({
     }) => {
       const { t } = useTranslate();
       const entityData = entity ?? [];
-      const items = React74__default.useMemo(() => {
+      const items = React75__default.useMemo(() => {
         if (propItems) return propItems;
         if (entityData.length === 0) return [];
         return entityData.map((record, idx) => {
@@ -47447,7 +47934,7 @@ var init_Timeline = __esm({
   }
 });
 function extractToastProps(children) {
-  if (!React74__default.isValidElement(children)) {
+  if (!React75__default.isValidElement(children)) {
     if (typeof children === "string") {
       return { message: children };
     }
@@ -47489,7 +47976,7 @@ var init_ToastSlot = __esm({
         eventBus.emit(`${prefix}CLOSE`);
       };
       if (!isVisible) return null;
-      const isCustomContent = React74__default.isValidElement(children) && !message;
+      const isCustomContent = React75__default.isValidElement(children) && !message;
       return /* @__PURE__ */ jsx(Box, { className: "fixed bottom-4 right-4 z-50", children: isCustomContent ? children : /* @__PURE__ */ jsx(
         Toast,
         {
@@ -47506,7 +47993,7 @@ var init_ToastSlot = __esm({
   }
 });
 function lazyThree(name, loader) {
-  const Lazy = React74__default.lazy(
+  const Lazy = React75__default.lazy(
     () => loader().then((m) => {
       const Resolved = m[name];
       if (!Resolved) {
@@ -47518,13 +48005,13 @@ function lazyThree(name, loader) {
     })
   );
   function ThreeWrapper(props) {
-    return React74__default.createElement(
+    return React75__default.createElement(
       ThreeBoundary,
       { name },
-      React74__default.createElement(
-        React74__default.Suspense,
+      React75__default.createElement(
+        React75__default.Suspense,
         { fallback: null },
-        React74__default.createElement(Lazy, props)
+        React75__default.createElement(Lazy, props)
       )
     );
   }
@@ -47541,11 +48028,13 @@ var init_component_registry_generated = __esm({
     init_ActionTile();
     init_ActivationBlock();
     init_ComponentPatterns();
+    init_AlgorithmCanvas();
     init_AnimatedCounter();
     init_AnimatedGraphic();
     init_AnimatedReveal();
     init_ArticleSection();
     init_Aside();
+    init_AtlasImage();
     init_AuthLayout();
     init_Avatar();
     init_Badge();
@@ -47803,7 +48292,7 @@ var init_component_registry_generated = __esm({
     init_WizardContainer();
     init_WizardNavigation();
     init_WizardProgress();
-    ThreeBoundary = class extends React74__default.Component {
+    ThreeBoundary = class extends React75__default.Component {
       constructor() {
         super(...arguments);
         __publicField(this, "state", { failed: false });
@@ -47813,7 +48302,7 @@ var init_component_registry_generated = __esm({
       }
       render() {
         if (this.state.failed) {
-          return React74__default.createElement(
+          return React75__default.createElement(
             "div",
             {
               "data-testid": "three-unavailable",
@@ -47839,11 +48328,14 @@ var init_component_registry_generated = __esm({
       "ActivationBlock": ActivationBlock,
       "Alert": AlertPattern,
       "AlertPattern": AlertPattern,
+      "AlgorithmCanvas": AlgorithmCanvas,
       "AnimatedCounter": AnimatedCounter,
       "AnimatedGraphic": AnimatedGraphic,
       "AnimatedReveal": AnimatedReveal,
       "ArticleSection": ArticleSection,
       "Aside": Aside,
+      "AtlasImage": AtlasImage,
+      "AtlasPanel": AtlasPanel,
       "AuthLayout": AuthLayout,
       "Avatar": Avatar,
       "Badge": Badge,
@@ -48136,7 +48628,7 @@ function SuspenseConfigProvider({
   config,
   children
 }) {
-  return React74__default.createElement(
+  return React75__default.createElement(
     SuspenseConfigContext.Provider,
     { value: config },
     children
@@ -48178,7 +48670,7 @@ function enrichFormFields(fields, entityDef) {
       }
       return { name: field, label: field.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/\b\w/g, (c) => c.toUpperCase()) };
     }
-    if (field && typeof field === "object" && !Array.isArray(field) && !React74__default.isValidElement(field) && !(field instanceof Date)) {
+    if (field && typeof field === "object" && !Array.isArray(field) && !React75__default.isValidElement(field) && !(field instanceof Date)) {
       const obj = field;
       const fieldName = typeof obj.name === "string" ? obj.name : typeof obj.field === "string" ? obj.field : void 0;
       if (!fieldName) return field;
@@ -48631,7 +49123,7 @@ function renderPatternChildren(children, onDismiss, parentId = "root", parentPat
         const key = `${parentId}-${index}-trait:${traitName}`;
         return /* @__PURE__ */ jsx(TraitFrame, { traitName }, key);
       }
-      return /* @__PURE__ */ jsx(React74__default.Fragment, { children: child }, `${parentId}-${index}`);
+      return /* @__PURE__ */ jsx(React75__default.Fragment, { children: child }, `${parentId}-${index}`);
     }
     if (!child || typeof child !== "object") return null;
     const childId = `${parentId}-${index}`;
@@ -48671,14 +49163,14 @@ function isPatternConfig(value) {
   if (value === null || value === void 0) return false;
   if (typeof value !== "object") return false;
   if (Array.isArray(value)) return false;
-  if (React74__default.isValidElement(value)) return false;
+  if (React75__default.isValidElement(value)) return false;
   if (value instanceof Date) return false;
   if (typeof value === "function") return false;
   const record = value;
   return "type" in record && typeof record.type === "string" && getComponentForPattern$1(record.type) !== null;
 }
 function isPlainConfigObject(value) {
-  if (React74__default.isValidElement(value)) return false;
+  if (React75__default.isValidElement(value)) return false;
   if (value instanceof Date) return false;
   const proto = Object.getPrototypeOf(value);
   return proto === Object.prototype || proto === null;
@@ -48804,7 +49296,7 @@ function SlotContentRenderer({
     for (const slotKey of CONTENT_NODE_SLOTS) {
       const slotVal = restProps[slotKey];
       if (slotVal === void 0 || slotVal === null) continue;
-      if (React74__default.isValidElement(slotVal) || typeof slotVal === "string" || typeof slotVal === "number" || typeof slotVal === "boolean") continue;
+      if (React75__default.isValidElement(slotVal) || typeof slotVal === "string" || typeof slotVal === "number" || typeof slotVal === "boolean") continue;
       if (Array.isArray(slotVal) || typeof slotVal === "object" && "type" in slotVal) {
         nodeSlotOverrides[slotKey] = renderPatternChildren(
           slotVal,
@@ -48853,7 +49345,7 @@ function SlotContentRenderer({
     const resolvedItems = Array.isArray(entityVal) && entityVal[0] !== "fn" ? entityVal : null;
     if (resolvedItems && resolvedItems.length > 0 && !finalProps.fields && !finalProps.columns) {
       const sample = resolvedItems[0];
-      if (sample && typeof sample === "object" && !Array.isArray(sample) && !React74__default.isValidElement(sample) && !(sample instanceof Date)) {
+      if (sample && typeof sample === "object" && !Array.isArray(sample) && !React75__default.isValidElement(sample) && !(sample instanceof Date)) {
         const keys = Object.keys(sample).filter((k) => k !== "id" && k !== "_id");
         finalProps.fields = keys.map((k, i) => ({ name: k, variant: i === 0 ? "h4" : "body" }));
       }
@@ -49014,7 +49506,9 @@ var init_UISlotRenderer = __esm({
       "content",
       "addons",
       "hud",
-      "fallback"
+      "fallback",
+      "controls",
+      "overlay"
     ]);
     PATTERNS_WITH_CHILDREN = /* @__PURE__ */ new Set([
       "stack",
@@ -49111,6 +49605,7 @@ var init_atoms = __esm({
     init_Checkbox();
     init_Card();
     init_Badge();
+    init_AtlasImage();
     init_FilterPill();
     init_Spinner();
     init_Avatar();
@@ -51354,4 +51849,4 @@ function useGitHubBranches(owner, repo, enabled = true) {
   });
 }
 
-export { ALL_PRESETS, ALMADAR_DND_MIME, AR_BOOK_FIELDS, AboutPageTemplate, Accordion, ActionButton, Card2 as ActionCard, ActionPalette, ActionTile, ActivationBlock, Alert, AnimatedCounter, AnimatedGraphic, AnimatedReveal, ArticleSection, Aside, AssetPicker, AuthLayout, Avatar, Badge, BehaviorView, BiologyCanvas, BloomQuizBlock, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, Box, BranchingLogicBuilder, Breadcrumb, BuilderBoard, Button, ButtonGroup, CTABanner, CalendarGrid, Canvas2D, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, CaseStudyCard, CaseStudyOrganism, Center, Chart, ChartLegend, ChatBar, Checkbox, ChemistryCanvas, ChoiceButton, ClassifierBoard, Coachmark, CodeBlock, CodeRunnerPanel, CollapsibleSection, ComboCounter, CommunityLinks, ConditionalWrapper, ConfettiEffect, ConfirmDialog, ConnectionBlock, Container, ContentRenderer, ContentSection, ControlButton, ControlGrid, CounterTemplate, DEFAULT_LIKERT_OPTIONS, DEFAULT_MATRIX_COLUMNS, DEFAULT_SLOTS, DIAMOND_TOP_Y, DamageNumber, DashboardGrid, DashboardLayout, DataGrid, DataList, DataTable, DateRangePicker, DateRangeSelector, DayCell, DebuggerBoard, DetailPanel, Dialog, DialogueBubble, Divider, DocBreadcrumb, DocPagination, DocSearch, DocSidebar, DocTOC, DocumentViewer, StateMachineView as DomStateMachineVisualizer, Drawer, DrawerSlot, ELEMENT_SELECTED_EVENT, EMPTY_EFFECT_STATE, EdgeDecoration, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EmptyState, EntityDisplayEvents, ErrorBoundary, ErrorState, EventHandlerBoard, EventLog, FEATURE_COLORS, FEATURE_TYPES, FLOOR_HEIGHT, FeatureCard, FeatureDetailPageTemplate, FeatureGrid, FeatureGridOrganism, FileTree, FilterGroup, FilterPill, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormActions, FormField, FormLayout, FormSection, FormSectionHeader, GameAudioContext, GameAudioProvider, GameAudioToggle, GameCard, GameHud, GameIcon, GameMenu, GameShell, GameTemplate, GenericAppTemplate, GeometricPattern, GradientDivider, GraphCanvas, GraphView, Grid, GridPicker, HStack, Header, HealthBar, HeroOrganism, HeroSection, I18nProvider, IDENTITY_BOOK_FIELDS, Icon, IconPicker, InfiniteScrollSentinel, Input, InputGroup, InstallBox, InventoryGrid, ItemSlot, JazariStateMachine, JsonTreeEditor, Label, LandingPageTemplate, LawReferenceTooltip, LearningCanvas, Lightbox, LikertScale, LineChart2 as LineChart, List3 as List, LoadingState, MapView, MarkdownContent, MarketingFooter, MarketingStatCard, MasterDetail, MasterDetailLayout, MathCanvas, MatrixQuestion, MediaGallery, Menu, Meter, MiniMap, Modal, ModalSlot, ModuleCard, Navigation, NegotiatorBoard, NodeSlotEditor, NotifyListener, NumberStepper, ObjectRulePanel, OnboardingSpotlight, OptionConstraintGroup, StateMachineView as OrbitalStateMachineView, OrbitalVisualization, Overlay, PageHeader, Pagination, PatternTile, PhysicsCanvas, Popover, PositionedCanvas, PricingCard, PricingGrid, PricingOrganism, PricingPageTemplate, ProgressBar, ProgressDots, PropertyInspector, PullQuote, PullToRefresh, QrScanner, QuizBlock, Radio, RangeSlider, ReflectionBlock, RelationSelect, RepeatableFormSection, ReplyTree, ResourceBar, ResourceCounter, RichBlockEditor, RuleEditor, RuntimeDebugger, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, ScaledDiagram, ScoreDisplay, SearchInput, Section, SectionHeader, SegmentRenderer, Select, SequenceBar, SequencerBoard, ServiceCatalog, ShowcaseCard, ShowcaseOrganism, SidePanel, Sidebar, SignaturePad, SimpleGrid, SimulatorBoard, Skeleton, SlotContentRenderer, SocialProof, SortableList, Spacer, Sparkline, Spinner, Split, SplitPane, SplitSection, Sprite, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateArchitectBoard, StateGraph, StateIndicator, StateJsonView, StateMachineView, StateNode2 as StateNode, StatsGrid, StatsOrganism, StatusBar, StatusDot, StatusEffect, StepFlow, StepFlowOrganism, SubagentTracePanel, SvgBranch, SvgConnection, SvgFlow, SvgGrid, SvgLobe, SvgMesh, SvgMorph, SvgNode, SvgPulse, SvgRing, SvgShield, SvgStack, SwipeableRow, Switch, TERRAIN_COLORS, TILE_HEIGHT, TILE_WIDTH, TabbedContainer, TableView, Tabs, TagCloud, TagInput, TeamCard, TeamOrganism, TerrainPalette, TextHighlight, Textarea, ThemeToggle, TimeSlotCell, Timeline, TimerDisplay, Toast, ToastSlot, Tooltip, TraitFrame, TraitSlot, TraitStateViewer, TransitionArrow, TrendIndicator, TurnIndicator, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UploadDropZone, VStack, VariablePanel, VersionDiff, ViolationAlert, VoteStack, WaypointMarker, WizardContainer, WizardNavigation, WizardProgress, boardEntity, bool, calculateAttackTargets, calculateValidMoves, cn, createInitialGameState, createTranslate, createUnitAnimationState, drawSprite, getCurrentFrame, getTileDimensions, inferDirection, isoToScreen, makeAsset, makeAssetMap, mapBookData, num, objAvailableActions, objAvailableEvents, objCurrentState, objIcon, objId, objMaxRules, objName, objRules, objStates, parseEditFocus, parseLessonSegments, parseMarkdownWithCodeBlocks, parseQueryBinding, pendulum, projectileMotion, resolveFieldMap, resolveFrame, resolveSheetDirection, rows, screenToIso, springOscillator, str, tickAnimationState, toCodeLanguage, transitionAnimation, unitHealth, unitPosition, unitTeam, useAgentChat, useAnchorRect, useAuthContext, useCamera, useCanvasGestures, useCompile, useConnectGitHub, useDeepAgentGeneration, useDisconnectGitHub, useDragReorder, useDraggable, useDropZone, useEmitEvent, useEventBus, useEventListener, useExtensions, useFileEditor, useFileSystem, useGameAudio, useGameAudioContext, useGitHubBranches, useGitHubRepo, useGitHubRepos, useGitHubStatus, useImageCache, useInfiniteScroll, useLongPress, useOrbitalHistory, usePreview, usePullToRefresh, useQuerySingleton, useRenderInterpolation, useSwipeGesture, useTapReveal, useTraitListens, useTranslate127 as useTranslate, useUIEvents, useUISlotManager, useUnitSpriteAtlas, useValidation, vec2 };
+export { ALL_PRESETS, ALMADAR_DND_MIME, AR_BOOK_FIELDS, AboutPageTemplate, Accordion, ActionButton, Card2 as ActionCard, ActionPalette, ActionTile, ActivationBlock, Alert, AlgorithmCanvas, AnimatedCounter, AnimatedGraphic, AnimatedReveal, ArticleSection, Aside, AssetPicker, AtlasImage, AtlasPanel, AuthLayout, Avatar, Badge, BehaviorView, BiologyCanvas, BloomQuizBlock, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, Box, BranchingLogicBuilder, Breadcrumb, BuilderBoard, Button, ButtonGroup, CTABanner, CalendarGrid, Canvas2D, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, CaseStudyCard, CaseStudyOrganism, Center, Chart, ChartLegend, ChatBar, Checkbox, ChemistryCanvas, ChoiceButton, ClassifierBoard, Coachmark, CodeBlock, CodeRunnerPanel, CollapsibleSection, ComboCounter, CommunityLinks, ConditionalWrapper, ConfettiEffect, ConfirmDialog, ConnectionBlock, Container, ContentRenderer, ContentSection, ControlButton, ControlGrid, CounterTemplate, DEFAULT_LIKERT_OPTIONS, DEFAULT_MATRIX_COLUMNS, DEFAULT_SLOTS, DIAMOND_TOP_Y, DamageNumber, DashboardGrid, DashboardLayout, DataGrid, DataList, DataTable, DateRangePicker, DateRangeSelector, DayCell, DebuggerBoard, DetailPanel, Dialog, DialogueBubble, Divider, DocBreadcrumb, DocPagination, DocSearch, DocSidebar, DocTOC, DocumentViewer, StateMachineView as DomStateMachineVisualizer, Drawer, DrawerSlot, ELEMENT_SELECTED_EVENT, EMPTY_EFFECT_STATE, EdgeDecoration, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EmptyState, EntityDisplayEvents, ErrorBoundary, ErrorState, EventHandlerBoard, EventLog, FEATURE_COLORS, FEATURE_TYPES, FLOOR_HEIGHT, FeatureCard, FeatureDetailPageTemplate, FeatureGrid, FeatureGridOrganism, FileTree, FilterGroup, FilterPill, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormActions, FormField, FormLayout, FormSection, FormSectionHeader, GameAudioContext, GameAudioProvider, GameAudioToggle, GameCard, GameHud, GameIcon, GameMenu, GameShell, GameTemplate, GenericAppTemplate, GeometricPattern, GradientDivider, GraphCanvas, GraphView, Grid, GridPicker, HStack, Header, HealthBar, HeroOrganism, HeroSection, I18nProvider, IDENTITY_BOOK_FIELDS, Icon, IconPicker, InfiniteScrollSentinel, Input, InputGroup, InstallBox, InventoryGrid, ItemSlot, JazariStateMachine, JsonTreeEditor, Label, LandingPageTemplate, LawReferenceTooltip, LearningCanvas, Lightbox, LikertScale, LineChart2 as LineChart, List3 as List, LoadingState, MapView, MarkdownContent, MarketingFooter, MarketingStatCard, MasterDetail, MasterDetailLayout, MathCanvas, MatrixQuestion, MediaGallery, Menu, Meter, MiniMap, Modal, ModalSlot, ModuleCard, Navigation, NegotiatorBoard, NodeSlotEditor, NotifyListener, NumberStepper, ObjectRulePanel, OnboardingSpotlight, OptionConstraintGroup, StateMachineView as OrbitalStateMachineView, OrbitalVisualization, Overlay, PageHeader, Pagination, PatternTile, PhysicsCanvas, Popover, PositionedCanvas, PricingCard, PricingGrid, PricingOrganism, PricingPageTemplate, ProgressBar, ProgressDots, PropertyInspector, PullQuote, PullToRefresh, QrScanner, QuizBlock, Radio, RangeSlider, ReflectionBlock, RelationSelect, RepeatableFormSection, ReplyTree, ResourceBar, ResourceCounter, RichBlockEditor, RuleEditor, RuntimeDebugger, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, ScaledDiagram, ScoreDisplay, SearchInput, Section, SectionHeader, SegmentRenderer, Select, SequenceBar, SequencerBoard, ServiceCatalog, ShowcaseCard, ShowcaseOrganism, SidePanel, Sidebar, SignaturePad, SimpleGrid, SimulatorBoard, Skeleton, SlotContentRenderer, SocialProof, SortableList, Spacer, Sparkline, Spinner, Split, SplitPane, SplitSection, Sprite, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateArchitectBoard, StateGraph, StateIndicator, StateJsonView, StateMachineView, StateNode2 as StateNode, StatsGrid, StatsOrganism, StatusBar, StatusDot, StatusEffect, StepFlow, StepFlowOrganism, SubagentTracePanel, SvgBranch, SvgConnection, SvgFlow, SvgGrid, SvgLobe, SvgMesh, SvgMorph, SvgNode, SvgPulse, SvgRing, SvgShield, SvgStack, SwipeableRow, Switch, TERRAIN_COLORS, TILE_HEIGHT, TILE_WIDTH, TabbedContainer, TableView, Tabs, TagCloud, TagInput, TeamCard, TeamOrganism, TerrainPalette, TextHighlight, Textarea, ThemeToggle, TimeSlotCell, Timeline, TimerDisplay, Toast, ToastSlot, Tooltip, TraitFrame, TraitSlot, TraitStateViewer, TransitionArrow, TrendIndicator, TurnIndicator, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UploadDropZone, VStack, VariablePanel, VersionDiff, ViolationAlert, VoteStack, WaypointMarker, WizardContainer, WizardNavigation, WizardProgress, boardEntity, bool, calculateAttackTargets, calculateValidMoves, cn, createInitialGameState, createTranslate, createUnitAnimationState, drawSprite, getCurrentFrame, getTileDimensions, inferDirection, isoToScreen, makeAsset, makeAssetMap, mapBookData, num, objAvailableActions, objAvailableEvents, objCurrentState, objIcon, objId, objMaxRules, objName, objRules, objStates, parseEditFocus, parseLessonSegments, parseMarkdownWithCodeBlocks, parseQueryBinding, pendulum, projectileMotion, resolveFieldMap, resolveFrame, resolveSheetDirection, rows, screenToIso, springOscillator, str, tickAnimationState, toCodeLanguage, transitionAnimation, unitHealth, unitPosition, unitTeam, useAgentChat, useAnchorRect, useAtlasSliceDataUrl, useAuthContext, useCamera, useCanvasGestures, useCompile, useConnectGitHub, useDeepAgentGeneration, useDisconnectGitHub, useDragReorder, useDraggable, useDropZone, useEmitEvent, useEventBus, useEventListener, useExtensions, useFileEditor, useFileSystem, useGameAudio, useGameAudioContext, useGitHubBranches, useGitHubRepo, useGitHubRepos, useGitHubStatus, useImageCache, useInfiniteScroll, useLongPress, useOrbitalHistory, usePreview, usePullToRefresh, useQuerySingleton, useRenderInterpolation, useSwipeGesture, useTapReveal, useTraitListens, useTranslate127 as useTranslate, useUIEvents, useUISlotManager, useUnitSpriteAtlas, useValidation, vec2 };