@almadar/ui 5.79.0 → 5.79.2

package/dist/avl/index.cjs

@@ -14093,7 +14093,7 @@ function GameHud({
 }) {
   const rawStats = propStats ?? items ?? (elements && Array.isArray(elements) ? convertElementsToStats(elements) : DEFAULT_HUD_STATS);
   const stats = Array.isArray(rawStats) ? rawStats : [];
-  const position = propPosition ?? "corners";
+  const position = propPosition ?? "top";
   if (position === "corners") {
     const leftStats = stats.slice(0, Math.ceil(stats.length / 2));
     const rightStats = stats.slice(Math.ceil(stats.length / 2));
@@ -14102,17 +14102,37 @@ function GameHud({
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4 flex flex-col gap-2 items-end pointer-events-auto", children: rightStats.map((stat, i) => /* @__PURE__ */ jsxRuntime.jsx(StatBadge, { ...stat, size }, i)) })
     ] });
   }
+  if (position === "top" || position === "bottom") {
+    const mid = Math.ceil(stats.length / 2);
+    const leftStats = stats.slice(0, mid);
+    const rightStats = stats.slice(mid);
+    const isTop = position === "top";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-between w-full",
+          "px-4 py-2 gap-4",
+          !transparent && (isTop ? "border-b border-border/40 bg-surface/90 backdrop-blur-sm" : "border-t border-border/40 bg-surface/90 backdrop-blur-sm"),
+          transparent && (isTop ? "border-b border-white/10 bg-black/40 backdrop-blur-sm" : "border-t border-white/10 bg-black/40 backdrop-blur-sm"),
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3 flex-shrink-0", children: leftStats.map((stat, i) => /* @__PURE__ */ jsxRuntime.jsx(StatBadge, { ...stat, size }, i)) }),
+          rightStats.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3 flex-shrink-0", children: rightStats.map((stat, i) => /* @__PURE__ */ jsxRuntime.jsx(StatBadge, { ...stat, size }, i)) })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: cn(
-        "relative z-10",
-        positionMap[position],
-        transparent && "bg-gradient-to-b from-background/50 to-transparent",
-        position === "bottom" && "bg-gradient-to-t from-background/50 to-transparent",
+        "relative z-10 flex items-center gap-4 px-4 py-2",
+        transparent ? "bg-black/30 backdrop-blur-sm" : "bg-surface/90 backdrop-blur-sm",
         className
       ),
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-4", children: stats.map((stat, i) => /* @__PURE__ */ jsxRuntime.jsx(StatBadge, { ...stat, size }, i)) })
+      children: stats.map((stat, i) => /* @__PURE__ */ jsxRuntime.jsx(StatBadge, { ...stat, size }, i))
     }
   );
 }
@@ -14122,8 +14142,6 @@ var init_GameHud = __esm({
     init_cn();
     init_StatBadge();
     positionMap = {
-      top: "top-0 left-0 right-0 flex justify-between items-start p-4",
-      bottom: "bottom-0 left-0 right-0 flex justify-between items-end p-4",
       corners: "inset-0 pointer-events-none"
     };
     DEFAULT_HUD_STATS = [
@@ -22741,7 +22759,8 @@ function asDescriptor(v) {
   if (typeof o.type !== "string") return null;
   const props = o.props !== void 0 && typeof o.props === "object" && !Array.isArray(o.props) && o.props !== null ? o.props : void 0;
   const _id = typeof o._id === "string" ? o._id : void 0;
-  return { type: o.type, props, _id };
+  const sourceTrait = typeof o.sourceTrait === "string" ? o.sourceTrait : void 0;
+  return { type: o.type, props, _id, sourceTrait };
 }
 function getSlotContentRenderer3() {
   if (_scr2) return _scr2;
@@ -22760,7 +22779,13 @@ function resolveDescriptor2(value, idPrefix) {
     const desc = asDescriptor(value);
     if (desc !== null && patterns.getComponentForPattern(desc.type) !== null) {
       const resolvedProps = desc.props ?? {};
-      const content = { id: desc._id ?? idPrefix, pattern: desc.type, props: resolvedProps, priority: 0 };
+      const content = {
+        id: desc._id ?? idPrefix,
+        pattern: desc.type,
+        props: resolvedProps,
+        priority: 0,
+        ...desc.sourceTrait !== void 0 && { sourceTrait: desc.sourceTrait }
+      };
       const SCR = getSlotContentRenderer3();
       return /* @__PURE__ */ jsxRuntime.jsx(SCR, { content, onDismiss: () => void 0 }, content.id);
     }
@@ -22800,30 +22825,35 @@ var init_GameShell = __esm({
           },
           children: [
             showTopBar && /* @__PURE__ */ jsxRuntime.jsxs(
-              HStack,
+              Box,
               {
-                align: "center",
-                justify: "between",
                 className: "game-shell__header",
                 style: {
-                  padding: "0.5rem 1rem",
-                  borderBottom: "1px solid var(--color-border, #2a2a3a)",
+                  flexShrink: 0,
                   background: "var(--color-surface, #12121f)",
-                  flexShrink: 0
+                  borderBottom: "1px solid var(--color-border, #2a2a3a)"
                 },
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    Typography,
+                    HStack,
                     {
-                      variant: "h6",
-                      style: {
-                        fontWeight: 700,
-                        letterSpacing: "0.02em"
-                      },
-                      children: appName
+                      align: "center",
+                      justify: "between",
+                      style: { padding: "0.375rem 1rem" },
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        Typography,
+                        {
+                          variant: "h6",
+                          style: {
+                            fontWeight: 700,
+                            letterSpacing: "0.02em"
+                          },
+                          children: appName
+                        }
+                      )
                     }
                   ),
-                  hud && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "game-shell__hud", children: resolveDescriptor2(hud, "gs-hud") })
+                  hud && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "game-shell__hud", style: { width: "100%" }, children: resolveDescriptor2(hud, "gs-hud") })
                 ]
               }
             ),

package/dist/avl/index.js

@@ -14047,7 +14047,7 @@ function GameHud({
 }) {
   const rawStats = propStats ?? items ?? (elements && Array.isArray(elements) ? convertElementsToStats(elements) : DEFAULT_HUD_STATS);
   const stats = Array.isArray(rawStats) ? rawStats : [];
-  const position = propPosition ?? "corners";
+  const position = propPosition ?? "top";
   if (position === "corners") {
     const leftStats = stats.slice(0, Math.ceil(stats.length / 2));
     const rightStats = stats.slice(Math.ceil(stats.length / 2));
@@ -14056,17 +14056,37 @@ function GameHud({
       /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4 flex flex-col gap-2 items-end pointer-events-auto", children: rightStats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i)) })
     ] });
   }
+  if (position === "top" || position === "bottom") {
+    const mid = Math.ceil(stats.length / 2);
+    const leftStats = stats.slice(0, mid);
+    const rightStats = stats.slice(mid);
+    const isTop = position === "top";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-between w-full",
+          "px-4 py-2 gap-4",
+          !transparent && (isTop ? "border-b border-border/40 bg-surface/90 backdrop-blur-sm" : "border-t border-border/40 bg-surface/90 backdrop-blur-sm"),
+          transparent && (isTop ? "border-b border-white/10 bg-black/40 backdrop-blur-sm" : "border-t border-white/10 bg-black/40 backdrop-blur-sm"),
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 flex-shrink-0", children: leftStats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i)) }),
+          rightStats.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 flex-shrink-0", children: rightStats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i)) })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
-        "relative z-10",
-        positionMap[position],
-        transparent && "bg-gradient-to-b from-background/50 to-transparent",
-        position === "bottom" && "bg-gradient-to-t from-background/50 to-transparent",
+        "relative z-10 flex items-center gap-4 px-4 py-2",
+        transparent ? "bg-black/30 backdrop-blur-sm" : "bg-surface/90 backdrop-blur-sm",
         className
       ),
-      children: /* @__PURE__ */ jsx("div", { className: "flex gap-4", children: stats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i)) })
+      children: stats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i))
     }
   );
 }
@@ -14076,8 +14096,6 @@ var init_GameHud = __esm({
     init_cn();
     init_StatBadge();
     positionMap = {
-      top: "top-0 left-0 right-0 flex justify-between items-start p-4",
-      bottom: "bottom-0 left-0 right-0 flex justify-between items-end p-4",
       corners: "inset-0 pointer-events-none"
     };
     DEFAULT_HUD_STATS = [
@@ -22695,7 +22713,8 @@ function asDescriptor(v) {
   if (typeof o.type !== "string") return null;
   const props = o.props !== void 0 && typeof o.props === "object" && !Array.isArray(o.props) && o.props !== null ? o.props : void 0;
   const _id = typeof o._id === "string" ? o._id : void 0;
-  return { type: o.type, props, _id };
+  const sourceTrait = typeof o.sourceTrait === "string" ? o.sourceTrait : void 0;
+  return { type: o.type, props, _id, sourceTrait };
 }
 function getSlotContentRenderer3() {
   if (_scr2) return _scr2;
@@ -22714,7 +22733,13 @@ function resolveDescriptor2(value, idPrefix) {
     const desc = asDescriptor(value);
     if (desc !== null && getComponentForPattern(desc.type) !== null) {
       const resolvedProps = desc.props ?? {};
-      const content = { id: desc._id ?? idPrefix, pattern: desc.type, props: resolvedProps, priority: 0 };
+      const content = {
+        id: desc._id ?? idPrefix,
+        pattern: desc.type,
+        props: resolvedProps,
+        priority: 0,
+        ...desc.sourceTrait !== void 0 && { sourceTrait: desc.sourceTrait }
+      };
       const SCR = getSlotContentRenderer3();
       return /* @__PURE__ */ jsx(SCR, { content, onDismiss: () => void 0 }, content.id);
     }
@@ -22754,30 +22779,35 @@ var init_GameShell = __esm({
           },
           children: [
             showTopBar && /* @__PURE__ */ jsxs(
-              HStack,
+              Box,
               {
-                align: "center",
-                justify: "between",
                 className: "game-shell__header",
                 style: {
-                  padding: "0.5rem 1rem",
-                  borderBottom: "1px solid var(--color-border, #2a2a3a)",
+                  flexShrink: 0,
                   background: "var(--color-surface, #12121f)",
-                  flexShrink: 0
+                  borderBottom: "1px solid var(--color-border, #2a2a3a)"
                 },
                 children: [
                   /* @__PURE__ */ jsx(
-                    Typography,
+                    HStack,
                     {
-                      variant: "h6",
-                      style: {
-                        fontWeight: 700,
-                        letterSpacing: "0.02em"
-                      },
-                      children: appName
+                      align: "center",
+                      justify: "between",
+                      style: { padding: "0.375rem 1rem" },
+                      children: /* @__PURE__ */ jsx(
+                        Typography,
+                        {
+                          variant: "h6",
+                          style: {
+                            fontWeight: 700,
+                            letterSpacing: "0.02em"
+                          },
+                          children: appName
+                        }
+                      )
                     }
                   ),
-                  hud && /* @__PURE__ */ jsx(Box, { className: "game-shell__hud", children: resolveDescriptor2(hud, "gs-hud") })
+                  hud && /* @__PURE__ */ jsx(Box, { className: "game-shell__hud", style: { width: "100%" }, children: resolveDescriptor2(hud, "gs-hud") })
                 ]
               }
             ),

package/dist/components/core/molecules/parseLessonSegments.d.ts

@@ -10,6 +10,7 @@
  */
 import type { BloomLevel } from './BloomQuizBlock';
 import { type MixedSegment } from './lessonSegmentUtils';
+export type InteractiveOrbitalType = 'chart' | 'simulation' | 'math' | 'physics' | 'biology' | 'chemistry' | 'probability';
 export type LessonSegment = MixedSegment | {
     type: 'quiz';
     question: string;
@@ -30,7 +31,7 @@ export type LessonSegment = MixedSegment | {
     answer: string;
 } | {
     type: 'visualization';
-    visualizationType: 'chart' | 'simulation';
+    visualizationType: InteractiveOrbitalType;
     description: string;
 };
 /** User progress state passed into SegmentRenderer. */

package/dist/components/core/organisms/SegmentRenderer.d.ts

@@ -12,7 +12,7 @@
  */
 import React from 'react';
 import { type CodeSimulationOutput } from './CodeRunnerPanel';
-import type { LessonSegment, LessonUserProgress } from '../molecules/parseLessonSegments';
+import type { LessonSegment, LessonUserProgress, InteractiveOrbitalType } from '../molecules/parseLessonSegments';
 export type { LessonSegment, LessonUserProgress, CodeSimulationOutput };
 export interface SegmentRendererProps {
     /** Parsed lesson segments (see `parseLessonSegments`) */
@@ -33,6 +33,6 @@ export interface SegmentRendererProps {
      * visualization segments are silently skipped. Callers can wire this to any
      * custom component or orbital generator.
      */
-    onRenderVisualization?: (type: 'chart' | 'simulation', description: string, index: number) => React.ReactNode;
+    onRenderVisualization?: (type: InteractiveOrbitalType, description: string, index: number) => React.ReactNode;
 }
 export declare const SegmentRenderer: React.FC<SegmentRendererProps>;

package/dist/components/index.cjs

@@ -30362,7 +30362,7 @@ function GameHud({
 }) {
   const rawStats = propStats ?? items ?? (elements && Array.isArray(elements) ? convertElementsToStats(elements) : DEFAULT_HUD_STATS);
   const stats = Array.isArray(rawStats) ? rawStats : [];
-  const position = propPosition ?? "corners";
+  const position = propPosition ?? "top";
   if (position === "corners") {
     const leftStats = stats.slice(0, Math.ceil(stats.length / 2));
     const rightStats = stats.slice(Math.ceil(stats.length / 2));
@@ -30371,17 +30371,37 @@ function GameHud({
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4 flex flex-col gap-2 items-end pointer-events-auto", children: rightStats.map((stat, i) => /* @__PURE__ */ jsxRuntime.jsx(StatBadge, { ...stat, size }, i)) })
     ] });
   }
+  if (position === "top" || position === "bottom") {
+    const mid = Math.ceil(stats.length / 2);
+    const leftStats = stats.slice(0, mid);
+    const rightStats = stats.slice(mid);
+    const isTop = position === "top";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-between w-full",
+          "px-4 py-2 gap-4",
+          !transparent && (isTop ? "border-b border-border/40 bg-surface/90 backdrop-blur-sm" : "border-t border-border/40 bg-surface/90 backdrop-blur-sm"),
+          transparent && (isTop ? "border-b border-white/10 bg-black/40 backdrop-blur-sm" : "border-t border-white/10 bg-black/40 backdrop-blur-sm"),
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3 flex-shrink-0", children: leftStats.map((stat, i) => /* @__PURE__ */ jsxRuntime.jsx(StatBadge, { ...stat, size }, i)) }),
+          rightStats.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3 flex-shrink-0", children: rightStats.map((stat, i) => /* @__PURE__ */ jsxRuntime.jsx(StatBadge, { ...stat, size }, i)) })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: cn(
-        "relative z-10",
-        positionMap[position],
-        transparent && "bg-gradient-to-b from-background/50 to-transparent",
-        position === "bottom" && "bg-gradient-to-t from-background/50 to-transparent",
+        "relative z-10 flex items-center gap-4 px-4 py-2",
+        transparent ? "bg-black/30 backdrop-blur-sm" : "bg-surface/90 backdrop-blur-sm",
         className
       ),
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-4", children: stats.map((stat, i) => /* @__PURE__ */ jsxRuntime.jsx(StatBadge, { ...stat, size }, i)) })
+      children: stats.map((stat, i) => /* @__PURE__ */ jsxRuntime.jsx(StatBadge, { ...stat, size }, i))
     }
   );
 }
@@ -30391,8 +30411,6 @@ var init_GameHud = __esm({
     init_cn();
     init_StatBadge();
     positionMap = {
-      top: "top-0 left-0 right-0 flex justify-between items-start p-4",
-      bottom: "bottom-0 left-0 right-0 flex justify-between items-end p-4",
       corners: "inset-0 pointer-events-none"
     };
     DEFAULT_HUD_STATS = [
@@ -36362,7 +36380,8 @@ function asDescriptor(v) {
   if (typeof o.type !== "string") return null;
   const props = o.props !== void 0 && typeof o.props === "object" && !Array.isArray(o.props) && o.props !== null ? o.props : void 0;
   const _id = typeof o._id === "string" ? o._id : void 0;
-  return { type: o.type, props, _id };
+  const sourceTrait = typeof o.sourceTrait === "string" ? o.sourceTrait : void 0;
+  return { type: o.type, props, _id, sourceTrait };
 }
 function getSlotContentRenderer2() {
   if (_scr2) return _scr2;
@@ -36381,7 +36400,13 @@ function resolveDescriptor2(value, idPrefix) {
     const desc = asDescriptor(value);
     if (desc !== null && patterns.getComponentForPattern(desc.type) !== null) {
       const resolvedProps = desc.props ?? {};
-      const content = { id: desc._id ?? idPrefix, pattern: desc.type, props: resolvedProps, priority: 0 };
+      const content = {
+        id: desc._id ?? idPrefix,
+        pattern: desc.type,
+        props: resolvedProps,
+        priority: 0,
+        ...desc.sourceTrait !== void 0 && { sourceTrait: desc.sourceTrait }
+      };
       const SCR = getSlotContentRenderer2();
       return /* @__PURE__ */ jsxRuntime.jsx(SCR, { content, onDismiss: () => void 0 }, content.id);
     }
@@ -36421,30 +36446,35 @@ var init_GameShell = __esm({
           },
           children: [
             showTopBar && /* @__PURE__ */ jsxRuntime.jsxs(
-              exports.HStack,
+              exports.Box,
               {
-                align: "center",
-                justify: "between",
                 className: "game-shell__header",
                 style: {
-                  padding: "0.5rem 1rem",
-                  borderBottom: "1px solid var(--color-border, #2a2a3a)",
+                  flexShrink: 0,
                   background: "var(--color-surface, #12121f)",
-                  flexShrink: 0
+                  borderBottom: "1px solid var(--color-border, #2a2a3a)"
                 },
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    exports.Typography,
+                    exports.HStack,
                     {
-                      variant: "h6",
-                      style: {
-                        fontWeight: 700,
-                        letterSpacing: "0.02em"
-                      },
-                      children: appName
+                      align: "center",
+                      justify: "between",
+                      style: { padding: "0.375rem 1rem" },
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        exports.Typography,
+                        {
+                          variant: "h6",
+                          style: {
+                            fontWeight: 700,
+                            letterSpacing: "0.02em"
+                          },
+                          children: appName
+                        }
+                      )
                     }
                   ),
-                  hud && /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "game-shell__hud", children: resolveDescriptor2(hud, "gs-hud") })
+                  hud && /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "game-shell__hud", style: { width: "100%" }, children: resolveDescriptor2(hud, "gs-hud") })
                 ]
               }
             ),
@@ -46720,7 +46750,7 @@ function parseLessonSegments(lesson) {
     content = content.replace(connectResult.fullMatch, "").trim();
   }
   const tagRegex = new RegExp(
-    '(?<reflect><reflect>(?<reflectClosed>[\\s\\S]*?)<\\/reflect>)|(?<reflectUnclosed><reflect>(?<reflectOpen>[\\s\\S]*?)(?=<(?:activate|connect|reflect|bloom|prq|question|answer|visualize)|\\n\\n#|$))|(?<bloom><bloom\\s+level="(?<bloomLevel>remember|understand|apply|analyze|evaluate|create)">(?<bloomClosed>[\\s\\S]*?)<\\/bloom>)|(?<bloomUnclosed><bloom\\s+level="(?<bloomLevelUn>remember|understand|apply|analyze|evaluate|create)">(?<bloomOpen>[\\s\\S]*?)(?=<(?:activate|connect|reflect|bloom|prq|question|answer|visualize)|\\n\\n#|$))|(?<quiz><question>(?<quizQuestion>[\\s\\S]*?)<\\/question>\\s*<answer>(?<quizAnswer>[\\s\\S]*?)<\\/answer>)|(?<visualize><visualize\\s+type="(?<vizType>chart|simulation)"\\s+description="(?<vizDesc>[^"]*?)"\\s*\\/?>)',
+    '(?<reflect><reflect>(?<reflectClosed>[\\s\\S]*?)<\\/reflect>)|(?<reflectUnclosed><reflect>(?<reflectOpen>[\\s\\S]*?)(?=<(?:activate|connect|reflect|bloom|prq|question|answer|visualize)|\\n\\n#|$))|(?<bloom><bloom\\s+level="(?<bloomLevel>remember|understand|apply|analyze|evaluate|create)">(?<bloomClosed>[\\s\\S]*?)<\\/bloom>)|(?<bloomUnclosed><bloom\\s+level="(?<bloomLevelUn>remember|understand|apply|analyze|evaluate|create)">(?<bloomOpen>[\\s\\S]*?)(?=<(?:activate|connect|reflect|bloom|prq|question|answer|visualize)|\\n\\n#|$))|(?<quiz><question>(?<quizQuestion>[\\s\\S]*?)<\\/question>\\s*<answer>(?<quizAnswer>[\\s\\S]*?)<\\/answer>)|(?<visualize><visualize\\s+type="(?<vizType>chart|simulation|math|physics|biology|chemistry|probability)"\\s+description="(?<vizDesc>[^"]*?)"\\s*\\/?>)',
     "gi"
   );
   let lastIndex = 0;

package/dist/components/index.js

@@ -30316,7 +30316,7 @@ function GameHud({
 }) {
   const rawStats = propStats ?? items ?? (elements && Array.isArray(elements) ? convertElementsToStats(elements) : DEFAULT_HUD_STATS);
   const stats = Array.isArray(rawStats) ? rawStats : [];
-  const position = propPosition ?? "corners";
+  const position = propPosition ?? "top";
   if (position === "corners") {
     const leftStats = stats.slice(0, Math.ceil(stats.length / 2));
     const rightStats = stats.slice(Math.ceil(stats.length / 2));
@@ -30325,17 +30325,37 @@ function GameHud({
       /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4 flex flex-col gap-2 items-end pointer-events-auto", children: rightStats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i)) })
     ] });
   }
+  if (position === "top" || position === "bottom") {
+    const mid = Math.ceil(stats.length / 2);
+    const leftStats = stats.slice(0, mid);
+    const rightStats = stats.slice(mid);
+    const isTop = position === "top";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-between w-full",
+          "px-4 py-2 gap-4",
+          !transparent && (isTop ? "border-b border-border/40 bg-surface/90 backdrop-blur-sm" : "border-t border-border/40 bg-surface/90 backdrop-blur-sm"),
+          transparent && (isTop ? "border-b border-white/10 bg-black/40 backdrop-blur-sm" : "border-t border-white/10 bg-black/40 backdrop-blur-sm"),
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 flex-shrink-0", children: leftStats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i)) }),
+          rightStats.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 flex-shrink-0", children: rightStats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i)) })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
-        "relative z-10",
-        positionMap[position],
-        transparent && "bg-gradient-to-b from-background/50 to-transparent",
-        position === "bottom" && "bg-gradient-to-t from-background/50 to-transparent",
+        "relative z-10 flex items-center gap-4 px-4 py-2",
+        transparent ? "bg-black/30 backdrop-blur-sm" : "bg-surface/90 backdrop-blur-sm",
         className
       ),
-      children: /* @__PURE__ */ jsx("div", { className: "flex gap-4", children: stats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i)) })
+      children: stats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i))
     }
   );
 }
@@ -30345,8 +30365,6 @@ var init_GameHud = __esm({
     init_cn();
     init_StatBadge();
     positionMap = {
-      top: "top-0 left-0 right-0 flex justify-between items-start p-4",
-      bottom: "bottom-0 left-0 right-0 flex justify-between items-end p-4",
       corners: "inset-0 pointer-events-none"
     };
     DEFAULT_HUD_STATS = [
@@ -36316,7 +36334,8 @@ function asDescriptor(v) {
   if (typeof o.type !== "string") return null;
   const props = o.props !== void 0 && typeof o.props === "object" && !Array.isArray(o.props) && o.props !== null ? o.props : void 0;
   const _id = typeof o._id === "string" ? o._id : void 0;
-  return { type: o.type, props, _id };
+  const sourceTrait = typeof o.sourceTrait === "string" ? o.sourceTrait : void 0;
+  return { type: o.type, props, _id, sourceTrait };
 }
 function getSlotContentRenderer2() {
   if (_scr2) return _scr2;
@@ -36335,7 +36354,13 @@ function resolveDescriptor2(value, idPrefix) {
     const desc = asDescriptor(value);
     if (desc !== null && getComponentForPattern(desc.type) !== null) {
       const resolvedProps = desc.props ?? {};
-      const content = { id: desc._id ?? idPrefix, pattern: desc.type, props: resolvedProps, priority: 0 };
+      const content = {
+        id: desc._id ?? idPrefix,
+        pattern: desc.type,
+        props: resolvedProps,
+        priority: 0,
+        ...desc.sourceTrait !== void 0 && { sourceTrait: desc.sourceTrait }
+      };
       const SCR = getSlotContentRenderer2();
       return /* @__PURE__ */ jsx(SCR, { content, onDismiss: () => void 0 }, content.id);
     }
@@ -36375,30 +36400,35 @@ var init_GameShell = __esm({
           },
           children: [
             showTopBar && /* @__PURE__ */ jsxs(
-              HStack,
+              Box,
               {
-                align: "center",
-                justify: "between",
                 className: "game-shell__header",
                 style: {
-                  padding: "0.5rem 1rem",
-                  borderBottom: "1px solid var(--color-border, #2a2a3a)",
+                  flexShrink: 0,
                   background: "var(--color-surface, #12121f)",
-                  flexShrink: 0
+                  borderBottom: "1px solid var(--color-border, #2a2a3a)"
                 },
                 children: [
                   /* @__PURE__ */ jsx(
-                    Typography,
+                    HStack,
                     {
-                      variant: "h6",
-                      style: {
-                        fontWeight: 700,
-                        letterSpacing: "0.02em"
-                      },
-                      children: appName
+                      align: "center",
+                      justify: "between",
+                      style: { padding: "0.375rem 1rem" },
+                      children: /* @__PURE__ */ jsx(
+                        Typography,
+                        {
+                          variant: "h6",
+                          style: {
+                            fontWeight: 700,
+                            letterSpacing: "0.02em"
+                          },
+                          children: appName
+                        }
+                      )
                     }
                   ),
-                  hud && /* @__PURE__ */ jsx(Box, { className: "game-shell__hud", children: resolveDescriptor2(hud, "gs-hud") })
+                  hud && /* @__PURE__ */ jsx(Box, { className: "game-shell__hud", style: { width: "100%" }, children: resolveDescriptor2(hud, "gs-hud") })
                 ]
               }
             ),
@@ -46674,7 +46704,7 @@ function parseLessonSegments(lesson) {
     content = content.replace(connectResult.fullMatch, "").trim();
   }
   const tagRegex = new RegExp(
-    '(?<reflect><reflect>(?<reflectClosed>[\\s\\S]*?)<\\/reflect>)|(?<reflectUnclosed><reflect>(?<reflectOpen>[\\s\\S]*?)(?=<(?:activate|connect|reflect|bloom|prq|question|answer|visualize)|\\n\\n#|$))|(?<bloom><bloom\\s+level="(?<bloomLevel>remember|understand|apply|analyze|evaluate|create)">(?<bloomClosed>[\\s\\S]*?)<\\/bloom>)|(?<bloomUnclosed><bloom\\s+level="(?<bloomLevelUn>remember|understand|apply|analyze|evaluate|create)">(?<bloomOpen>[\\s\\S]*?)(?=<(?:activate|connect|reflect|bloom|prq|question|answer|visualize)|\\n\\n#|$))|(?<quiz><question>(?<quizQuestion>[\\s\\S]*?)<\\/question>\\s*<answer>(?<quizAnswer>[\\s\\S]*?)<\\/answer>)|(?<visualize><visualize\\s+type="(?<vizType>chart|simulation)"\\s+description="(?<vizDesc>[^"]*?)"\\s*\\/?>)',
+    '(?<reflect><reflect>(?<reflectClosed>[\\s\\S]*?)<\\/reflect>)|(?<reflectUnclosed><reflect>(?<reflectOpen>[\\s\\S]*?)(?=<(?:activate|connect|reflect|bloom|prq|question|answer|visualize)|\\n\\n#|$))|(?<bloom><bloom\\s+level="(?<bloomLevel>remember|understand|apply|analyze|evaluate|create)">(?<bloomClosed>[\\s\\S]*?)<\\/bloom>)|(?<bloomUnclosed><bloom\\s+level="(?<bloomLevelUn>remember|understand|apply|analyze|evaluate|create)">(?<bloomOpen>[\\s\\S]*?)(?=<(?:activate|connect|reflect|bloom|prq|question|answer|visualize)|\\n\\n#|$))|(?<quiz><question>(?<quizQuestion>[\\s\\S]*?)<\\/question>\\s*<answer>(?<quizAnswer>[\\s\\S]*?)<\\/answer>)|(?<visualize><visualize\\s+type="(?<vizType>chart|simulation|math|physics|biology|chemistry|probability)"\\s+description="(?<vizDesc>[^"]*?)"\\s*\\/?>)',
     "gi"
   );
   let lastIndex = 0;

package/dist/providers/index.cjs

@@ -10338,7 +10338,7 @@ function GameHud({
 }) {
   const rawStats = propStats ?? items ?? (elements && Array.isArray(elements) ? convertElementsToStats(elements) : DEFAULT_HUD_STATS);
   const stats = Array.isArray(rawStats) ? rawStats : [];
-  const position = propPosition ?? "corners";
+  const position = propPosition ?? "top";
   if (position === "corners") {
     const leftStats = stats.slice(0, Math.ceil(stats.length / 2));
     const rightStats = stats.slice(Math.ceil(stats.length / 2));
@@ -10347,17 +10347,37 @@ function GameHud({
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4 flex flex-col gap-2 items-end pointer-events-auto", children: rightStats.map((stat, i) => /* @__PURE__ */ jsxRuntime.jsx(StatBadge, { ...stat, size }, i)) })
     ] });
   }
+  if (position === "top" || position === "bottom") {
+    const mid = Math.ceil(stats.length / 2);
+    const leftStats = stats.slice(0, mid);
+    const rightStats = stats.slice(mid);
+    const isTop = position === "top";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-between w-full",
+          "px-4 py-2 gap-4",
+          !transparent && (isTop ? "border-b border-border/40 bg-surface/90 backdrop-blur-sm" : "border-t border-border/40 bg-surface/90 backdrop-blur-sm"),
+          transparent && (isTop ? "border-b border-white/10 bg-black/40 backdrop-blur-sm" : "border-t border-white/10 bg-black/40 backdrop-blur-sm"),
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3 flex-shrink-0", children: leftStats.map((stat, i) => /* @__PURE__ */ jsxRuntime.jsx(StatBadge, { ...stat, size }, i)) }),
+          rightStats.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3 flex-shrink-0", children: rightStats.map((stat, i) => /* @__PURE__ */ jsxRuntime.jsx(StatBadge, { ...stat, size }, i)) })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: cn(
-        "relative z-10",
-        positionMap[position],
-        transparent && "bg-gradient-to-b from-background/50 to-transparent",
-        position === "bottom" && "bg-gradient-to-t from-background/50 to-transparent",
+        "relative z-10 flex items-center gap-4 px-4 py-2",
+        transparent ? "bg-black/30 backdrop-blur-sm" : "bg-surface/90 backdrop-blur-sm",
         className
       ),
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-4", children: stats.map((stat, i) => /* @__PURE__ */ jsxRuntime.jsx(StatBadge, { ...stat, size }, i)) })
+      children: stats.map((stat, i) => /* @__PURE__ */ jsxRuntime.jsx(StatBadge, { ...stat, size }, i))
     }
   );
 }
@@ -10367,8 +10387,6 @@ var init_GameHud = __esm({
     init_cn();
     init_StatBadge();
     positionMap = {
-      top: "top-0 left-0 right-0 flex justify-between items-start p-4",
-      bottom: "bottom-0 left-0 right-0 flex justify-between items-end p-4",
       corners: "inset-0 pointer-events-none"
     };
     DEFAULT_HUD_STATS = [
@@ -18986,7 +19004,8 @@ function asDescriptor(v) {
   if (typeof o.type !== "string") return null;
   const props = o.props !== void 0 && typeof o.props === "object" && !Array.isArray(o.props) && o.props !== null ? o.props : void 0;
   const _id = typeof o._id === "string" ? o._id : void 0;
-  return { type: o.type, props, _id };
+  const sourceTrait = typeof o.sourceTrait === "string" ? o.sourceTrait : void 0;
+  return { type: o.type, props, _id, sourceTrait };
 }
 function getSlotContentRenderer3() {
   if (_scr2) return _scr2;
@@ -19005,7 +19024,13 @@ function resolveDescriptor2(value, idPrefix) {
     const desc = asDescriptor(value);
     if (desc !== null && patterns.getComponentForPattern(desc.type) !== null) {
       const resolvedProps = desc.props ?? {};
-      const content = { id: desc._id ?? idPrefix, pattern: desc.type, props: resolvedProps, priority: 0 };
+      const content = {
+        id: desc._id ?? idPrefix,
+        pattern: desc.type,
+        props: resolvedProps,
+        priority: 0,
+        ...desc.sourceTrait !== void 0 && { sourceTrait: desc.sourceTrait }
+      };
       const SCR = getSlotContentRenderer3();
       return /* @__PURE__ */ jsxRuntime.jsx(SCR, { content, onDismiss: () => void 0 }, content.id);
     }
@@ -19045,30 +19070,35 @@ var init_GameShell = __esm({
           },
           children: [
             showTopBar && /* @__PURE__ */ jsxRuntime.jsxs(
-              HStack,
+              Box,
               {
-                align: "center",
-                justify: "between",
                 className: "game-shell__header",
                 style: {
-                  padding: "0.5rem 1rem",
-                  borderBottom: "1px solid var(--color-border, #2a2a3a)",
+                  flexShrink: 0,
                   background: "var(--color-surface, #12121f)",
-                  flexShrink: 0
+                  borderBottom: "1px solid var(--color-border, #2a2a3a)"
                 },
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    Typography,
+                    HStack,
                     {
-                      variant: "h6",
-                      style: {
-                        fontWeight: 700,
-                        letterSpacing: "0.02em"
-                      },
-                      children: appName
+                      align: "center",
+                      justify: "between",
+                      style: { padding: "0.375rem 1rem" },
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        Typography,
+                        {
+                          variant: "h6",
+                          style: {
+                            fontWeight: 700,
+                            letterSpacing: "0.02em"
+                          },
+                          children: appName
+                        }
+                      )
                     }
                   ),
-                  hud && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "game-shell__hud", children: resolveDescriptor2(hud, "gs-hud") })
+                  hud && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "game-shell__hud", style: { width: "100%" }, children: resolveDescriptor2(hud, "gs-hud") })
                 ]
               }
             ),

package/dist/providers/index.js

@@ -10293,7 +10293,7 @@ function GameHud({
 }) {
   const rawStats = propStats ?? items ?? (elements && Array.isArray(elements) ? convertElementsToStats(elements) : DEFAULT_HUD_STATS);
   const stats = Array.isArray(rawStats) ? rawStats : [];
-  const position = propPosition ?? "corners";
+  const position = propPosition ?? "top";
   if (position === "corners") {
     const leftStats = stats.slice(0, Math.ceil(stats.length / 2));
     const rightStats = stats.slice(Math.ceil(stats.length / 2));
@@ -10302,17 +10302,37 @@ function GameHud({
       /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4 flex flex-col gap-2 items-end pointer-events-auto", children: rightStats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i)) })
     ] });
   }
+  if (position === "top" || position === "bottom") {
+    const mid = Math.ceil(stats.length / 2);
+    const leftStats = stats.slice(0, mid);
+    const rightStats = stats.slice(mid);
+    const isTop = position === "top";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-between w-full",
+          "px-4 py-2 gap-4",
+          !transparent && (isTop ? "border-b border-border/40 bg-surface/90 backdrop-blur-sm" : "border-t border-border/40 bg-surface/90 backdrop-blur-sm"),
+          transparent && (isTop ? "border-b border-white/10 bg-black/40 backdrop-blur-sm" : "border-t border-white/10 bg-black/40 backdrop-blur-sm"),
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 flex-shrink-0", children: leftStats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i)) }),
+          rightStats.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 flex-shrink-0", children: rightStats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i)) })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
-        "relative z-10",
-        positionMap[position],
-        transparent && "bg-gradient-to-b from-background/50 to-transparent",
-        position === "bottom" && "bg-gradient-to-t from-background/50 to-transparent",
+        "relative z-10 flex items-center gap-4 px-4 py-2",
+        transparent ? "bg-black/30 backdrop-blur-sm" : "bg-surface/90 backdrop-blur-sm",
         className
       ),
-      children: /* @__PURE__ */ jsx("div", { className: "flex gap-4", children: stats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i)) })
+      children: stats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i))
     }
   );
 }
@@ -10322,8 +10342,6 @@ var init_GameHud = __esm({
     init_cn();
     init_StatBadge();
     positionMap = {
-      top: "top-0 left-0 right-0 flex justify-between items-start p-4",
-      bottom: "bottom-0 left-0 right-0 flex justify-between items-end p-4",
       corners: "inset-0 pointer-events-none"
     };
     DEFAULT_HUD_STATS = [
@@ -18941,7 +18959,8 @@ function asDescriptor(v) {
   if (typeof o.type !== "string") return null;
   const props = o.props !== void 0 && typeof o.props === "object" && !Array.isArray(o.props) && o.props !== null ? o.props : void 0;
   const _id = typeof o._id === "string" ? o._id : void 0;
-  return { type: o.type, props, _id };
+  const sourceTrait = typeof o.sourceTrait === "string" ? o.sourceTrait : void 0;
+  return { type: o.type, props, _id, sourceTrait };
 }
 function getSlotContentRenderer3() {
   if (_scr2) return _scr2;
@@ -18960,7 +18979,13 @@ function resolveDescriptor2(value, idPrefix) {
     const desc = asDescriptor(value);
     if (desc !== null && getComponentForPattern(desc.type) !== null) {
       const resolvedProps = desc.props ?? {};
-      const content = { id: desc._id ?? idPrefix, pattern: desc.type, props: resolvedProps, priority: 0 };
+      const content = {
+        id: desc._id ?? idPrefix,
+        pattern: desc.type,
+        props: resolvedProps,
+        priority: 0,
+        ...desc.sourceTrait !== void 0 && { sourceTrait: desc.sourceTrait }
+      };
       const SCR = getSlotContentRenderer3();
       return /* @__PURE__ */ jsx(SCR, { content, onDismiss: () => void 0 }, content.id);
     }
@@ -19000,30 +19025,35 @@ var init_GameShell = __esm({
           },
           children: [
             showTopBar && /* @__PURE__ */ jsxs(
-              HStack,
+              Box,
               {
-                align: "center",
-                justify: "between",
                 className: "game-shell__header",
                 style: {
-                  padding: "0.5rem 1rem",
-                  borderBottom: "1px solid var(--color-border, #2a2a3a)",
+                  flexShrink: 0,
                   background: "var(--color-surface, #12121f)",
-                  flexShrink: 0
+                  borderBottom: "1px solid var(--color-border, #2a2a3a)"
                 },
                 children: [
                   /* @__PURE__ */ jsx(
-                    Typography,
+                    HStack,
                     {
-                      variant: "h6",
-                      style: {
-                        fontWeight: 700,
-                        letterSpacing: "0.02em"
-                      },
-                      children: appName
+                      align: "center",
+                      justify: "between",
+                      style: { padding: "0.375rem 1rem" },
+                      children: /* @__PURE__ */ jsx(
+                        Typography,
+                        {
+                          variant: "h6",
+                          style: {
+                            fontWeight: 700,
+                            letterSpacing: "0.02em"
+                          },
+                          children: appName
+                        }
+                      )
                     }
                   ),
-                  hud && /* @__PURE__ */ jsx(Box, { className: "game-shell__hud", children: resolveDescriptor2(hud, "gs-hud") })
+                  hud && /* @__PURE__ */ jsx(Box, { className: "game-shell__hud", style: { width: "100%" }, children: resolveDescriptor2(hud, "gs-hud") })
                 ]
               }
             ),

package/dist/runtime/index.cjs

@@ -10864,7 +10864,7 @@ function GameHud({
 }) {
   const rawStats = propStats ?? items ?? (elements && Array.isArray(elements) ? convertElementsToStats(elements) : DEFAULT_HUD_STATS);
   const stats = Array.isArray(rawStats) ? rawStats : [];
-  const position = propPosition ?? "corners";
+  const position = propPosition ?? "top";
   if (position === "corners") {
     const leftStats = stats.slice(0, Math.ceil(stats.length / 2));
     const rightStats = stats.slice(Math.ceil(stats.length / 2));
@@ -10873,17 +10873,37 @@ function GameHud({
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4 flex flex-col gap-2 items-end pointer-events-auto", children: rightStats.map((stat, i) => /* @__PURE__ */ jsxRuntime.jsx(StatBadge, { ...stat, size }, i)) })
     ] });
   }
+  if (position === "top" || position === "bottom") {
+    const mid = Math.ceil(stats.length / 2);
+    const leftStats = stats.slice(0, mid);
+    const rightStats = stats.slice(mid);
+    const isTop = position === "top";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-between w-full",
+          "px-4 py-2 gap-4",
+          !transparent && (isTop ? "border-b border-border/40 bg-surface/90 backdrop-blur-sm" : "border-t border-border/40 bg-surface/90 backdrop-blur-sm"),
+          transparent && (isTop ? "border-b border-white/10 bg-black/40 backdrop-blur-sm" : "border-t border-white/10 bg-black/40 backdrop-blur-sm"),
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3 flex-shrink-0", children: leftStats.map((stat, i) => /* @__PURE__ */ jsxRuntime.jsx(StatBadge, { ...stat, size }, i)) }),
+          rightStats.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3 flex-shrink-0", children: rightStats.map((stat, i) => /* @__PURE__ */ jsxRuntime.jsx(StatBadge, { ...stat, size }, i)) })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: cn(
-        "relative z-10",
-        positionMap[position],
-        transparent && "bg-gradient-to-b from-background/50 to-transparent",
-        position === "bottom" && "bg-gradient-to-t from-background/50 to-transparent",
+        "relative z-10 flex items-center gap-4 px-4 py-2",
+        transparent ? "bg-black/30 backdrop-blur-sm" : "bg-surface/90 backdrop-blur-sm",
         className
       ),
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-4", children: stats.map((stat, i) => /* @__PURE__ */ jsxRuntime.jsx(StatBadge, { ...stat, size }, i)) })
+      children: stats.map((stat, i) => /* @__PURE__ */ jsxRuntime.jsx(StatBadge, { ...stat, size }, i))
     }
   );
 }
@@ -10893,8 +10913,6 @@ var init_GameHud = __esm({
     init_cn();
     init_StatBadge();
     positionMap = {
-      top: "top-0 left-0 right-0 flex justify-between items-start p-4",
-      bottom: "bottom-0 left-0 right-0 flex justify-between items-end p-4",
       corners: "inset-0 pointer-events-none"
     };
     DEFAULT_HUD_STATS = [
@@ -19333,7 +19351,8 @@ function asDescriptor(v) {
   if (typeof o.type !== "string") return null;
   const props = o.props !== void 0 && typeof o.props === "object" && !Array.isArray(o.props) && o.props !== null ? o.props : void 0;
   const _id = typeof o._id === "string" ? o._id : void 0;
-  return { type: o.type, props, _id };
+  const sourceTrait = typeof o.sourceTrait === "string" ? o.sourceTrait : void 0;
+  return { type: o.type, props, _id, sourceTrait };
 }
 function getSlotContentRenderer3() {
   if (_scr2) return _scr2;
@@ -19352,7 +19371,13 @@ function resolveDescriptor2(value, idPrefix) {
     const desc = asDescriptor(value);
     if (desc !== null && patterns.getComponentForPattern(desc.type) !== null) {
       const resolvedProps = desc.props ?? {};
-      const content = { id: desc._id ?? idPrefix, pattern: desc.type, props: resolvedProps, priority: 0 };
+      const content = {
+        id: desc._id ?? idPrefix,
+        pattern: desc.type,
+        props: resolvedProps,
+        priority: 0,
+        ...desc.sourceTrait !== void 0 && { sourceTrait: desc.sourceTrait }
+      };
       const SCR = getSlotContentRenderer3();
       return /* @__PURE__ */ jsxRuntime.jsx(SCR, { content, onDismiss: () => void 0 }, content.id);
     }
@@ -19392,30 +19417,35 @@ var init_GameShell = __esm({
           },
           children: [
             showTopBar && /* @__PURE__ */ jsxRuntime.jsxs(
-              HStack,
+              Box,
               {
-                align: "center",
-                justify: "between",
                 className: "game-shell__header",
                 style: {
-                  padding: "0.5rem 1rem",
-                  borderBottom: "1px solid var(--color-border, #2a2a3a)",
+                  flexShrink: 0,
                   background: "var(--color-surface, #12121f)",
-                  flexShrink: 0
+                  borderBottom: "1px solid var(--color-border, #2a2a3a)"
                 },
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    Typography,
+                    HStack,
                     {
-                      variant: "h6",
-                      style: {
-                        fontWeight: 700,
-                        letterSpacing: "0.02em"
-                      },
-                      children: appName
+                      align: "center",
+                      justify: "between",
+                      style: { padding: "0.375rem 1rem" },
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        Typography,
+                        {
+                          variant: "h6",
+                          style: {
+                            fontWeight: 700,
+                            letterSpacing: "0.02em"
+                          },
+                          children: appName
+                        }
+                      )
                     }
                   ),
-                  hud && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "game-shell__hud", children: resolveDescriptor2(hud, "gs-hud") })
+                  hud && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "game-shell__hud", style: { width: "100%" }, children: resolveDescriptor2(hud, "gs-hud") })
                 ]
               }
             ),

package/dist/runtime/index.js

@@ -10819,7 +10819,7 @@ function GameHud({
 }) {
   const rawStats = propStats ?? items ?? (elements && Array.isArray(elements) ? convertElementsToStats(elements) : DEFAULT_HUD_STATS);
   const stats = Array.isArray(rawStats) ? rawStats : [];
-  const position = propPosition ?? "corners";
+  const position = propPosition ?? "top";
   if (position === "corners") {
     const leftStats = stats.slice(0, Math.ceil(stats.length / 2));
     const rightStats = stats.slice(Math.ceil(stats.length / 2));
@@ -10828,17 +10828,37 @@ function GameHud({
       /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4 flex flex-col gap-2 items-end pointer-events-auto", children: rightStats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i)) })
     ] });
   }
+  if (position === "top" || position === "bottom") {
+    const mid = Math.ceil(stats.length / 2);
+    const leftStats = stats.slice(0, mid);
+    const rightStats = stats.slice(mid);
+    const isTop = position === "top";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-between w-full",
+          "px-4 py-2 gap-4",
+          !transparent && (isTop ? "border-b border-border/40 bg-surface/90 backdrop-blur-sm" : "border-t border-border/40 bg-surface/90 backdrop-blur-sm"),
+          transparent && (isTop ? "border-b border-white/10 bg-black/40 backdrop-blur-sm" : "border-t border-white/10 bg-black/40 backdrop-blur-sm"),
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 flex-shrink-0", children: leftStats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i)) }),
+          rightStats.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 flex-shrink-0", children: rightStats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i)) })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
-        "relative z-10",
-        positionMap[position],
-        transparent && "bg-gradient-to-b from-background/50 to-transparent",
-        position === "bottom" && "bg-gradient-to-t from-background/50 to-transparent",
+        "relative z-10 flex items-center gap-4 px-4 py-2",
+        transparent ? "bg-black/30 backdrop-blur-sm" : "bg-surface/90 backdrop-blur-sm",
         className
       ),
-      children: /* @__PURE__ */ jsx("div", { className: "flex gap-4", children: stats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i)) })
+      children: stats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i))
     }
   );
 }
@@ -10848,8 +10868,6 @@ var init_GameHud = __esm({
     init_cn();
     init_StatBadge();
     positionMap = {
-      top: "top-0 left-0 right-0 flex justify-between items-start p-4",
-      bottom: "bottom-0 left-0 right-0 flex justify-between items-end p-4",
       corners: "inset-0 pointer-events-none"
     };
     DEFAULT_HUD_STATS = [
@@ -19288,7 +19306,8 @@ function asDescriptor(v) {
   if (typeof o.type !== "string") return null;
   const props = o.props !== void 0 && typeof o.props === "object" && !Array.isArray(o.props) && o.props !== null ? o.props : void 0;
   const _id = typeof o._id === "string" ? o._id : void 0;
-  return { type: o.type, props, _id };
+  const sourceTrait = typeof o.sourceTrait === "string" ? o.sourceTrait : void 0;
+  return { type: o.type, props, _id, sourceTrait };
 }
 function getSlotContentRenderer3() {
   if (_scr2) return _scr2;
@@ -19307,7 +19326,13 @@ function resolveDescriptor2(value, idPrefix) {
     const desc = asDescriptor(value);
     if (desc !== null && getComponentForPattern(desc.type) !== null) {
       const resolvedProps = desc.props ?? {};
-      const content = { id: desc._id ?? idPrefix, pattern: desc.type, props: resolvedProps, priority: 0 };
+      const content = {
+        id: desc._id ?? idPrefix,
+        pattern: desc.type,
+        props: resolvedProps,
+        priority: 0,
+        ...desc.sourceTrait !== void 0 && { sourceTrait: desc.sourceTrait }
+      };
       const SCR = getSlotContentRenderer3();
       return /* @__PURE__ */ jsx(SCR, { content, onDismiss: () => void 0 }, content.id);
     }
@@ -19347,30 +19372,35 @@ var init_GameShell = __esm({
           },
           children: [
             showTopBar && /* @__PURE__ */ jsxs(
-              HStack,
+              Box,
               {
-                align: "center",
-                justify: "between",
                 className: "game-shell__header",
                 style: {
-                  padding: "0.5rem 1rem",
-                  borderBottom: "1px solid var(--color-border, #2a2a3a)",
+                  flexShrink: 0,
                   background: "var(--color-surface, #12121f)",
-                  flexShrink: 0
+                  borderBottom: "1px solid var(--color-border, #2a2a3a)"
                 },
                 children: [
                   /* @__PURE__ */ jsx(
-                    Typography,
+                    HStack,
                     {
-                      variant: "h6",
-                      style: {
-                        fontWeight: 700,
-                        letterSpacing: "0.02em"
-                      },
-                      children: appName
+                      align: "center",
+                      justify: "between",
+                      style: { padding: "0.375rem 1rem" },
+                      children: /* @__PURE__ */ jsx(
+                        Typography,
+                        {
+                          variant: "h6",
+                          style: {
+                            fontWeight: 700,
+                            letterSpacing: "0.02em"
+                          },
+                          children: appName
+                        }
+                      )
                     }
                   ),
-                  hud && /* @__PURE__ */ jsx(Box, { className: "game-shell__hud", children: resolveDescriptor2(hud, "gs-hud") })
+                  hud && /* @__PURE__ */ jsx(Box, { className: "game-shell__hud", style: { width: "100%" }, children: resolveDescriptor2(hud, "gs-hud") })
                 ]
               }
             ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "5.79.0",
+  "version": "5.79.2",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [