@almadar/ui 2.9.4 → 2.11.0

package/dist/{chunk-P6NZVIE5.js → chunk-7M2KEJTF.js}

@@ -5,7 +5,7 @@ import { cn, debugGroup, debug, debugGroupEnd, updateAssetStatus, bindCanvasCapt
 import { isPortalSlot } from './chunk-K2D5D3WK.js';
 import { __publicField } from './chunk-PKBMQBKP.js';
 import * as LucideIcons from 'lucide-react';
-import { Loader2, ChevronDown, X, ArrowRight, TrendingDown, TrendingUp, Check, Copy, AlertCircle, User, Sun, Moon, FileQuestion, Inbox, Search, Info, XCircle, CheckCircle, AlertTriangle, ChevronRight, Filter, Plus, ChevronLeft, HelpCircle, ChevronUp, Zap, Sword, Move, Heart, Shield, Minus, Star, FileWarning, Upload, MoreHorizontal, ArrowLeft, Calendar, Tag, Clock, CheckCircle2, DollarSign, FileText, Package } from 'lucide-react';
+import { Loader2, ChevronDown, X, ArrowRight, TrendingDown, TrendingUp, Check, Copy, AlertCircle, User, Sun, Moon, FileQuestion, Inbox, Search, Info, XCircle, CheckCircle, AlertTriangle, ChevronRight, Filter, Plus, ChevronLeft, HelpCircle, ChevronUp, Zap, Sword, Move, Heart, Shield, Minus, Star, FileWarning, Upload, MoreHorizontal, ArrowLeft, Pause, Play, SkipForward, RotateCcw, Calendar, Tag, Clock, CheckCircle2, DollarSign, FileText, Package } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React80 from 'react';
 import React80__default, { useCallback, useState, useRef, useLayoutEffect, useEffect, lazy, createContext, useMemo, useId, useContext, Suspense } from 'react';
@@ -667,7 +667,7 @@ var Avatar = ({
   alt,
   name,
   initials: providedInitials,
-  icon: Icon2,
+  icon: Icon3,
   size = "md",
   status,
   badge,
@@ -680,7 +680,7 @@ var Avatar = ({
   const initials = providedInitials ?? (name ? generateInitials(name) : void 0);
   const hasImage = !!src;
   const hasInitials = !!initials;
-  const hasIcon = !!Icon2;
+  const hasIcon = !!Icon3;
   const getInitialsBackground = () => "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]";
   const isClickable = action || onClick;
   const handleClick = () => {
@@ -725,7 +725,7 @@ var Avatar = ({
             children: initials.substring(0, 2).toUpperCase()
           }
         ) : hasIcon ? /* @__PURE__ */ jsx(
-          Icon2,
+          Icon3,
           {
             className: cn(
               "text-[var(--color-foreground)]",
@@ -3949,7 +3949,7 @@ var EmptyState = ({
     if (actionEvent) eventBus.emit(`UI:${actionEvent}`, {});
     onAction?.();
   };
-  const Icon2 = typeof icon === "string" ? ICON_MAP[icon] : icon;
+  const Icon3 = typeof icon === "string" ? ICON_MAP[icon] : icon;
   const isDestructive = destructive || variant === "error";
   const isSuccess = variant === "success";
   const displayText = title || message || t("empty.noItems");
@@ -3962,7 +3962,7 @@ var EmptyState = ({
         className
       ),
       children: [
-        Icon2 && /* @__PURE__ */ jsx(
+        Icon3 && /* @__PURE__ */ jsx(
           Box,
           {
             className: cn(
@@ -3970,7 +3970,7 @@ var EmptyState = ({
               isDestructive ? "bg-[var(--color-error)]/10" : isSuccess ? "bg-[var(--color-success)]/10" : "bg-[var(--color-muted)]"
             ),
             children: /* @__PURE__ */ jsx(
-              Icon2,
+              Icon3,
               {
                 className: cn(
                   "h-8 w-8",
@@ -14047,7 +14047,7 @@ var StatCard = ({
   isLoading: externalLoading,
   error: externalError
 }) => {
-  const Icon2 = typeof iconProp === "string" ? resolveIcon(iconProp) ?? void 0 : iconProp;
+  const Icon3 = typeof iconProp === "string" ? resolveIcon(iconProp) ?? void 0 : iconProp;
   const labelToUse = propLabel ?? propTitle;
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -14190,7 +14190,7 @@ var StatCard = ({
         subtitle && !calculatedTrend && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "secondary", children: subtitle })
       ] }),
       /* @__PURE__ */ jsxs(VStack, { gap: "xs", align: "end", children: [
-        Icon2 && /* @__PURE__ */ jsx(Box, { className: cn("p-3", iconBg), children: /* @__PURE__ */ jsx(Icon2, { className: cn("h-6 w-6", iconColor) }) }),
+        Icon3 && /* @__PURE__ */ jsx(Box, { className: cn("p-3", iconBg), children: /* @__PURE__ */ jsx(Icon3, { className: cn("h-6 w-6", iconColor) }) }),
         sparklineData && sparklineData.length > 1 && (() => {
           const w = 80;
           const h = 32;
@@ -16836,6 +16836,585 @@ function CanvasEffect(props) {
   return /* @__PURE__ */ jsx(EmojiEffect, { ...enhancedProps });
 }
 CanvasEffect.displayName = "CanvasEffect";
+
+// components/organisms/game/physics-sim/presets/mechanics.ts
+var projectileMotion = {
+  id: "mechanics-projectile",
+  name: "Projectile Motion",
+  description: "Launch a ball and observe parabolic trajectory under gravity.",
+  domain: "natural",
+  gravity: { x: 0, y: 9.81 },
+  bodies: [
+    { id: "ball", x: 50, y: 350, vx: 80, vy: -120, mass: 1, radius: 10, color: "#e94560", fixed: false },
+    { id: "ground", x: 300, y: 390, vx: 0, vy: 0, mass: 1e3, radius: 400, color: "#333", fixed: true }
+  ],
+  showVelocity: true,
+  parameters: {
+    angle: { value: 45, min: 0, max: 90, step: 1, label: "Launch angle (deg)" },
+    velocity: { value: 100, min: 10, max: 200, step: 5, label: "Initial velocity (m/s)" },
+    gravity: { value: 9.81, min: 0, max: 20, step: 0.1, label: "Gravity (m/s\xB2)" }
+  }
+};
+var pendulum = {
+  id: "mechanics-pendulum",
+  name: "Simple Pendulum",
+  description: "A mass on a string swinging under gravity.",
+  domain: "natural",
+  gravity: { x: 0, y: 9.81 },
+  bodies: [
+    { id: "pivot", x: 300, y: 50, vx: 0, vy: 0, mass: 1e3, radius: 5, color: "#888", fixed: true },
+    { id: "bob", x: 400, y: 200, vx: 0, vy: 0, mass: 5, radius: 15, color: "#e94560", fixed: false }
+  ],
+  constraints: [{ bodyA: 0, bodyB: 1, length: 180, stiffness: 1 }],
+  parameters: {
+    length: { value: 180, min: 50, max: 300, step: 10, label: "String length (px)" },
+    mass: { value: 5, min: 1, max: 20, step: 0.5, label: "Mass (kg)" },
+    gravity: { value: 9.81, min: 0, max: 20, step: 0.1, label: "Gravity (m/s\xB2)" }
+  }
+};
+var springOscillator = {
+  id: "mechanics-spring",
+  name: "Spring Oscillator",
+  description: "A mass bouncing on a spring \u2014 simple harmonic motion.",
+  domain: "natural",
+  gravity: { x: 0, y: 0 },
+  bodies: [
+    { id: "anchor", x: 300, y: 50, vx: 0, vy: 0, mass: 1e3, radius: 8, color: "#888", fixed: true },
+    { id: "mass", x: 300, y: 250, vx: 0, vy: 0, mass: 2, radius: 20, color: "#0f3460", fixed: false }
+  ],
+  constraints: [{ bodyA: 0, bodyB: 1, length: 150, stiffness: 0.5 }],
+  parameters: {
+    stiffness: { value: 0.5, min: 0.1, max: 2, step: 0.05, label: "Spring stiffness (k)" },
+    mass: { value: 2, min: 0.5, max: 10, step: 0.5, label: "Mass (kg)" },
+    damping: { value: 0, min: 0, max: 0.5, step: 0.01, label: "Damping" }
+  }
+};
+
+// components/organisms/game/physics-sim/presets/index.ts
+var ALL_PRESETS = [
+  projectileMotion,
+  pendulum,
+  springOscillator
+];
+function resolvePreset(preset) {
+  if (typeof preset !== "string") return preset;
+  const needle = preset.toLowerCase();
+  return ALL_PRESETS.find(
+    (p2) => p2.id === preset || p2.id.includes(needle) || p2.name.toLowerCase().includes(needle)
+  ) ?? projectileMotion;
+}
+function SimulationCanvas({
+  preset: presetProp,
+  width = 600,
+  height = 400,
+  running,
+  speed = 1,
+  className
+}) {
+  const preset = useMemo(() => resolvePreset(presetProp), [presetProp]);
+  const canvasRef = useRef(null);
+  const bodiesRef = useRef(structuredClone(preset.bodies));
+  useEffect(() => {
+    bodiesRef.current = structuredClone(preset.bodies);
+  }, [preset]);
+  const step = useCallback(() => {
+    const dt = Math.min(1 / 60 * speed, 1 / 15);
+    const gx = preset.gravity?.x ?? 0;
+    const gy = preset.gravity?.y ?? 9.81;
+    const bodies = bodiesRef.current;
+    const maxVel = Math.max(width, height) * 5;
+    for (const body of bodies) {
+      if (body.fixed) continue;
+      body.vx += gx * dt;
+      body.vy += gy * dt;
+      body.vx = Math.max(-maxVel, Math.min(maxVel, body.vx));
+      body.vy = Math.max(-maxVel, Math.min(maxVel, body.vy));
+      body.x += body.vx * dt;
+      body.y += body.vy * dt;
+      if (body.y + body.radius > height) {
+        body.y = height - body.radius;
+        body.vy = -body.vy * 0.8;
+      }
+      if (body.y - body.radius < 0) {
+        body.y = body.radius;
+        body.vy = -body.vy * 0.8;
+      }
+      if (body.x + body.radius > width) {
+        body.x = width - body.radius;
+        body.vx = -body.vx * 0.8;
+      }
+      if (body.x - body.radius < 0) {
+        body.x = body.radius;
+        body.vx = -body.vx * 0.8;
+      }
+    }
+    if (preset.constraints) {
+      for (const c of preset.constraints) {
+        const a = bodies[c.bodyA];
+        const b = bodies[c.bodyB];
+        if (!a || !b) continue;
+        const dx = b.x - a.x;
+        const dy = b.y - a.y;
+        const dist = Math.sqrt(dx * dx + dy * dy) || 1e-3;
+        const diff = (dist - c.length) / dist;
+        const fx = dx * diff * c.stiffness;
+        const fy = dy * diff * c.stiffness;
+        if (!a.fixed) {
+          a.vx += fx * dt;
+          a.vy += fy * dt;
+        }
+        if (!b.fixed) {
+          b.vx -= fx * dt;
+          b.vy -= fy * dt;
+        }
+      }
+    }
+  }, [preset, width, height, speed]);
+  const draw = useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const bodies = bodiesRef.current;
+    ctx.clearRect(0, 0, width, height);
+    ctx.fillStyle = preset.backgroundColor ?? "#1a1a2e";
+    ctx.fillRect(0, 0, width, height);
+    if (preset.constraints) {
+      for (const c of preset.constraints) {
+        const a = bodies[c.bodyA];
+        const b = bodies[c.bodyB];
+        if (a && b) {
+          ctx.beginPath();
+          ctx.moveTo(a.x, a.y);
+          ctx.lineTo(b.x, b.y);
+          ctx.strokeStyle = "#533483";
+          ctx.lineWidth = 1;
+          ctx.setLineDash([4, 4]);
+          ctx.stroke();
+          ctx.setLineDash([]);
+        }
+      }
+    }
+    for (const body of bodies) {
+      ctx.beginPath();
+      ctx.arc(body.x, body.y, body.radius, 0, Math.PI * 2);
+      ctx.fillStyle = body.color ?? "#e94560";
+      ctx.fill();
+      if (preset.showVelocity) {
+        ctx.beginPath();
+        ctx.moveTo(body.x, body.y);
+        ctx.lineTo(body.x + body.vx * 0.1, body.y + body.vy * 0.1);
+        ctx.strokeStyle = "#16213e";
+        ctx.lineWidth = 2;
+        ctx.stroke();
+      }
+    }
+  }, [width, height, preset]);
+  useEffect(() => {
+    if (!running) return;
+    let raf;
+    const loop = () => {
+      step();
+      draw();
+      raf = requestAnimationFrame(loop);
+    };
+    raf = requestAnimationFrame(loop);
+    return () => cancelAnimationFrame(raf);
+  }, [running, step, draw]);
+  useEffect(() => {
+    draw();
+  }, [draw]);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    bindCanvasCapture(() => canvas.toDataURL("image/png"));
+    return () => {
+      bindCanvasCapture(() => null);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(Box, { className: cn("flex justify-center", className), children: /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      ref: canvasRef,
+      width,
+      height,
+      className: "rounded-md block max-w-full h-auto"
+    }
+  ) });
+}
+SimulationCanvas.displayName = "SimulationCanvas";
+function SimulationControls({
+  running,
+  speed,
+  parameters,
+  onPlay,
+  onPause,
+  onStep,
+  onReset,
+  onSpeedChange,
+  onParameterChange,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(VStack, { gap: "md", className, children: [
+    /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "center", children: [
+      running ? /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: onPause, icon: Pause, children: "Pause" }) : /* @__PURE__ */ jsx(Button, { size: "sm", variant: "primary", onClick: onPlay, icon: Play, children: "Play" }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: onStep, icon: SkipForward, disabled: running, children: "Step" }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: onReset, icon: RotateCcw, children: "Reset" })
+    ] }),
+    /* @__PURE__ */ jsxs(VStack, { gap: "xs", children: [
+      /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "muted", children: [
+        "Speed: ",
+        speed.toFixed(1),
+        "x"
+      ] }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          min: 0.1,
+          max: 5,
+          step: 0.1,
+          value: speed,
+          onChange: (e) => onSpeedChange(parseFloat(e.target.value)),
+          className: "w-full"
+        }
+      )
+    ] }),
+    Object.entries(parameters).map(([name, param]) => /* @__PURE__ */ jsxs(VStack, { gap: "xs", children: [
+      /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "muted", children: [
+        param.label,
+        ": ",
+        param.value.toFixed(2)
+      ] }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          min: param.min,
+          max: param.max,
+          step: param.step,
+          value: param.value,
+          onChange: (e) => onParameterChange(name, parseFloat(e.target.value)),
+          className: "w-full"
+        }
+      )
+    ] }, name))
+  ] });
+}
+SimulationControls.displayName = "SimulationControls";
+function SimulationGraph({
+  label,
+  unit,
+  data,
+  maxPoints = 200,
+  width = 300,
+  height = 120,
+  color = "#e94560",
+  className
+}) {
+  const canvasRef = useRef(null);
+  const visibleData = data.slice(-maxPoints);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || visibleData.length < 2) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.clearRect(0, 0, width, height);
+    ctx.fillStyle = "#0f0f23";
+    ctx.fillRect(0, 0, width, height);
+    ctx.strokeStyle = "#1a1a3e";
+    ctx.lineWidth = 0.5;
+    for (let i = 0; i < 5; i++) {
+      const y = height / 5 * i;
+      ctx.beginPath();
+      ctx.moveTo(0, y);
+      ctx.lineTo(width, y);
+      ctx.stroke();
+    }
+    let minVal = Infinity;
+    let maxVal = -Infinity;
+    for (const pt of visibleData) {
+      if (pt.value < minVal) minVal = pt.value;
+      if (pt.value > maxVal) maxVal = pt.value;
+    }
+    const range = maxVal - minVal || 1;
+    const pad = height * 0.1;
+    ctx.beginPath();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 2;
+    for (let i = 0; i < visibleData.length; i++) {
+      const x = i / (maxPoints - 1) * width;
+      const y = pad + (maxVal - visibleData[i].value) / range * (height - 2 * pad);
+      if (i === 0) ctx.moveTo(x, y);
+      else ctx.lineTo(x, y);
+    }
+    ctx.stroke();
+    const last = visibleData[visibleData.length - 1];
+    ctx.fillStyle = color;
+    ctx.font = "12px monospace";
+    ctx.fillText(`${last.value.toFixed(2)} ${unit}`, width - 80, 16);
+  }, [visibleData, width, height, color, unit, maxPoints]);
+  return /* @__PURE__ */ jsx(Card, { padding: "sm", className, children: /* @__PURE__ */ jsxs(VStack, { gap: "xs", children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "caption", weight: "bold", children: label }),
+    /* @__PURE__ */ jsx("canvas", { ref: canvasRef, width, height, className: "rounded" })
+  ] }) });
+}
+SimulationGraph.displayName = "SimulationGraph";
+var CHART_COLORS = [
+  "var(--color-primary)",
+  "var(--color-success)",
+  "var(--color-warning)",
+  "var(--color-error)",
+  "var(--color-info)",
+  "var(--color-accent)"
+];
+var BarChart = ({ data, height, showValues }) => {
+  const maxValue = Math.max(...data.map((d) => d.value), 1);
+  return /* @__PURE__ */ jsx(HStack, { gap: "xs", align: "end", className: "w-full", style: { height }, children: data.map((point, idx) => {
+    const barHeight = point.value / maxValue * 100;
+    const color = point.color || CHART_COLORS[idx % CHART_COLORS.length];
+    return /* @__PURE__ */ jsxs(VStack, { gap: "xs", align: "center", flex: true, className: "min-w-0", children: [
+      showValues && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", className: "tabular-nums", children: point.value }),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          className: cn(
+            "w-full rounded-t-[var(--radius-sm)] transition-all duration-500 ease-out min-h-[4px]"
+          ),
+          style: {
+            height: `${barHeight}%`,
+            backgroundColor: color
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          variant: "caption",
+          color: "secondary",
+          className: "truncate w-full text-center",
+          children: point.label
+        }
+      )
+    ] }, point.label);
+  }) });
+};
+var PieChart = ({ data, height, showValues, donut = false }) => {
+  const total = data.reduce((sum, d) => sum + d.value, 0);
+  const size = Math.min(height, 200);
+  const radius = size / 2 - 8;
+  const innerRadius = donut ? radius * 0.6 : 0;
+  const center = size / 2;
+  const segments = useMemo(() => {
+    let currentAngle = -Math.PI / 2;
+    return data.map((point, idx) => {
+      const angle = point.value / total * 2 * Math.PI;
+      const startAngle = currentAngle;
+      const endAngle = currentAngle + angle;
+      currentAngle = endAngle;
+      const largeArc = angle > Math.PI ? 1 : 0;
+      const x1 = center + radius * Math.cos(startAngle);
+      const y1 = center + radius * Math.sin(startAngle);
+      const x2 = center + radius * Math.cos(endAngle);
+      const y2 = center + radius * Math.sin(endAngle);
+      let d;
+      if (innerRadius > 0) {
+        const ix1 = center + innerRadius * Math.cos(startAngle);
+        const iy1 = center + innerRadius * Math.sin(startAngle);
+        const ix2 = center + innerRadius * Math.cos(endAngle);
+        const iy2 = center + innerRadius * Math.sin(endAngle);
+        d = `M ${ix1} ${iy1} L ${x1} ${y1} A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2} L ${ix2} ${iy2} A ${innerRadius} ${innerRadius} 0 ${largeArc} 0 ${ix1} ${iy1} Z`;
+      } else {
+        d = `M ${center} ${center} L ${x1} ${y1} A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2} Z`;
+      }
+      return {
+        d,
+        color: point.color || CHART_COLORS[idx % CHART_COLORS.length],
+        label: point.label,
+        value: point.value,
+        percentage: (point.value / total * 100).toFixed(1)
+      };
+    });
+  }, [data, total, radius, innerRadius, center]);
+  return /* @__PURE__ */ jsxs(HStack, { gap: "md", align: "center", justify: "center", className: "w-full", children: [
+    /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [
+      segments.map((seg, idx) => /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: seg.d,
+          fill: seg.color,
+          stroke: "var(--color-card)",
+          strokeWidth: "2",
+          className: "transition-opacity duration-200 hover:opacity-80"
+        },
+        idx
+      )),
+      donut && /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: center,
+          y: center,
+          textAnchor: "middle",
+          dominantBaseline: "middle",
+          fill: "var(--color-foreground)",
+          fontSize: "14",
+          fontWeight: "bold",
+          children: total
+        }
+      )
+    ] }),
+    showValues && /* @__PURE__ */ jsx(VStack, { gap: "xs", children: segments.map((seg, idx) => /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          className: "w-3 h-3 rounded-[var(--radius-sm)] flex-shrink-0",
+          style: { backgroundColor: seg.color }
+        }
+      ),
+      /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "secondary", className: "truncate", children: [
+        seg.label,
+        ": ",
+        seg.percentage,
+        "%"
+      ] })
+    ] }, idx)) })
+  ] });
+};
+var LineChart2 = ({ data, height, showValues, fill = false }) => {
+  const maxValue = Math.max(...data.map((d) => d.value), 1);
+  const width = 400;
+  const padding = { top: 20, right: 20, bottom: 30, left: 40 };
+  const chartWidth = width - padding.left - padding.right;
+  const chartHeight = height - padding.top - padding.bottom;
+  const points = useMemo(() => {
+    return data.map((point, idx) => ({
+      x: padding.left + idx / Math.max(data.length - 1, 1) * chartWidth,
+      y: padding.top + chartHeight - point.value / maxValue * chartHeight,
+      ...point
+    }));
+  }, [data, maxValue, chartWidth, chartHeight, padding]);
+  const linePath = points.map((p2, i) => `${i === 0 ? "M" : "L"} ${p2.x} ${p2.y}`).join(" ");
+  const areaPath = `${linePath} L ${points[points.length - 1]?.x ?? 0} ${padding.top + chartHeight} L ${padding.left} ${padding.top + chartHeight} Z`;
+  return /* @__PURE__ */ jsxs("svg", { width: "100%", height, viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "xMidYMid meet", children: [
+    [0, 0.25, 0.5, 0.75, 1].map((frac) => {
+      const y = padding.top + chartHeight * (1 - frac);
+      return /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: padding.left,
+          y1: y,
+          x2: width - padding.right,
+          y2: y,
+          stroke: "var(--color-border)",
+          strokeDasharray: "4 4",
+          opacity: 0.5
+        },
+        frac
+      );
+    }),
+    fill && /* @__PURE__ */ jsx("path", { d: areaPath, fill: "var(--color-primary)", opacity: 0.1 }),
+    /* @__PURE__ */ jsx("path", { d: linePath, fill: "none", stroke: "var(--color-primary)", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+    points.map((p2, idx) => /* @__PURE__ */ jsxs("g", { children: [
+      /* @__PURE__ */ jsx("circle", { cx: p2.x, cy: p2.y, r: "4", fill: "var(--color-card)", stroke: "var(--color-primary)", strokeWidth: "2" }),
+      showValues && /* @__PURE__ */ jsx("text", { x: p2.x, y: p2.y - 10, textAnchor: "middle", fill: "var(--color-foreground)", fontSize: "10", fontWeight: "500", children: p2.value }),
+      /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: p2.x,
+          y: height - 8,
+          textAnchor: "middle",
+          fill: "var(--color-muted-foreground)",
+          fontSize: "9",
+          children: p2.label
+        }
+      )
+    ] }, idx))
+  ] });
+};
+var Chart = ({
+  title,
+  subtitle,
+  chartType = "bar",
+  series,
+  data: simpleData,
+  height = 200,
+  showLegend = true,
+  showValues = false,
+  actions,
+  entity,
+  isLoading = false,
+  error,
+  className
+}) => {
+  const eventBus = useEventBus();
+  const { t } = useTranslate();
+  const handleAction = useCallback(
+    (action) => {
+      if (action.event) {
+        eventBus.emit(`UI:${action.event}`, {});
+      }
+    },
+    [eventBus]
+  );
+  const normalizedData = useMemo(() => {
+    if (simpleData) return simpleData;
+    if (series && series.length > 0) return series[0].data;
+    return [];
+  }, [simpleData, series]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(LoadingState, { message: "Loading chart...", className });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx(
+      ErrorState,
+      {
+        title: "Chart error",
+        message: error.message,
+        className
+      }
+    );
+  }
+  if (normalizedData.length === 0) {
+    return /* @__PURE__ */ jsx(EmptyState, { title: t("empty.noData"), description: t("empty.noData"), className });
+  }
+  return /* @__PURE__ */ jsx(Card, { className: cn("p-6", className), children: /* @__PURE__ */ jsxs(VStack, { gap: "md", children: [
+    (title || subtitle || actions && actions.length > 0) && /* @__PURE__ */ jsxs(HStack, { justify: "between", align: "start", children: [
+      /* @__PURE__ */ jsxs(VStack, { gap: "xs", children: [
+        title && /* @__PURE__ */ jsx(Typography, { variant: "h5", weight: "semibold", children: title }),
+        subtitle && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "secondary", children: subtitle })
+      ] }),
+      actions && actions.length > 0 && /* @__PURE__ */ jsx(HStack, { gap: "xs", children: actions.map((action, idx) => /* @__PURE__ */ jsx(
+        Badge,
+        {
+          variant: "default",
+          className: "cursor-pointer hover:opacity-80 transition-opacity",
+          onClick: () => handleAction(action),
+          children: action.label
+        },
+        idx
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { className: "w-full", children: [
+      chartType === "bar" && /* @__PURE__ */ jsx(BarChart, { data: normalizedData, height, showValues }),
+      chartType === "line" && /* @__PURE__ */ jsx(LineChart2, { data: normalizedData, height, showValues }),
+      chartType === "area" && /* @__PURE__ */ jsx(LineChart2, { data: normalizedData, height, showValues, fill: true }),
+      chartType === "pie" && /* @__PURE__ */ jsx(PieChart, { data: normalizedData, height, showValues: showLegend }),
+      chartType === "donut" && /* @__PURE__ */ jsx(PieChart, { data: normalizedData, height, showValues: showLegend, donut: true })
+    ] }),
+    showLegend && series && series.length > 1 && /* @__PURE__ */ jsx(HStack, { gap: "md", justify: "center", wrap: true, children: series.map((s, idx) => /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          className: "w-3 h-3 rounded-[var(--radius-full)] flex-shrink-0",
+          style: { backgroundColor: s.color || CHART_COLORS[idx % CHART_COLORS.length] }
+        }
+      ),
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: s.name })
+    ] }, idx)) })
+  ] }) });
+};
+Chart.displayName = "Chart";
 function VStackPattern({
   gap = "md",
   align = "stretch",
@@ -16955,14 +17534,16 @@ function ButtonPattern({
   size = "md",
   disabled = false,
   onClick,
+  event,
   icon,
   iconPosition = "left",
   className
 }) {
   const { emit } = useEventBus();
+  const eventName = onClick ?? event;
   const handleClick = () => {
-    if (onClick && !disabled) {
-      emit(`UI:${onClick}`, {});
+    if (eventName && !disabled) {
+      emit(`UI:${eventName}`, {});
     }
   };
   return /* @__PURE__ */ jsxs(
@@ -17818,6 +18399,10 @@ var COMPONENT_REGISTRY = {
   InventoryPanel,
   GameHud,
   GameMenu,
+  IsometricCanvas,
+  PlatformerCanvas,
+  SimulationCanvas,
+  Chart,
   FilterGroup: ButtonGroup,
   ErrorState: EmptyState,
   Toast: AlertPattern,
@@ -18200,4 +18785,4 @@ function UISlotRenderer({
 }
 UISlotRenderer.displayName = "UISlotRenderer";
 
-export { Accordion, ActionButton, ActionButtons, Alert, AnimatedCounter, Avatar, Badge, Box, Breadcrumb, Button, ButtonGroup, CalendarGrid, CanvasEffect, Card, Card2, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, Center, ChartLegend, Checkbox, ChoiceButton, CodeBlock, CombatLog, ComboCounter, ConditionalWrapper, ConfettiEffect, Container, ControlButton, CraftingRecipe, DIAMOND_TOP_Y, DPad, DamageNumber, DataGrid, DataList, DataTable, DateRangeSelector, DayCell, DetailPanel, DialogueBox, DialogueBubble, Divider, Drawer, EmptyState, EnemyPlate, EntityDisplayEvents, ErrorBoundary, ErrorState, FEATURE_COLORS, FLOOR_HEIGHT, FilterGroup, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormField, FormSectionHeader, GameCanvas2D, GameHud, GameMenu, GameOverScreen, GraphView, Grid, HStack, Heading, HealthBar, HealthPanel, Icon, InfiniteScrollSentinel, Input, InputGroup, InventoryGrid, InventoryPanel, IsometricCanvas, IsometricCanvas_default, ItemSlot, Label, LawReferenceTooltip, Lightbox, LineChart, LoadingState, MapView, MarkdownContent, MasterDetail, Menu, Meter, MiniMap, Modal, NumberStepper, Overlay, PageHeader, Pagination, PlatformerCanvas, Popover, PowerupSlots, ProgressBar, ProgressDots, PullToRefresh, QuestTracker, QuizBlock, Radio, RangeSlider, RelationSelect, RepeatableFormSection, ResourceBar, ResourceCounter, ScaledDiagram, ScoreBoard, ScoreDisplay, SearchInput, Select, SidePanel, SimpleGrid, Skeleton, SlotContentRenderer, SortableList, Spacer, Spinner, Sprite, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateIndicator, StatusDot, StatusEffect, SuspenseConfigProvider, SwipeableRow, Switch, TILE_HEIGHT, TILE_WIDTH, Tabs, Text, TextHighlight, Textarea, ThemeSelector, ThemeToggle, TimeSlotCell, TimerDisplay, Toast, Tooltip, TrendIndicator, TurnIndicator, TurnPanel, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UnitCommandBar, UploadDropZone, VStack, ViolationAlert, WaypointMarker, WizardNavigation, WizardProgress, XPBar, drawSprite, isoToScreen, screenToIso, useCamera, useImageCache };
+export { ALL_PRESETS, Accordion, ActionButton, ActionButtons, Alert, AnimatedCounter, Avatar, Badge, Box, Breadcrumb, Button, ButtonGroup, CalendarGrid, CanvasEffect, Card, Card2, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, Center, Chart, ChartLegend, Checkbox, ChoiceButton, CodeBlock, CombatLog, ComboCounter, ConditionalWrapper, ConfettiEffect, Container, ControlButton, CraftingRecipe, DIAMOND_TOP_Y, DPad, DamageNumber, DataGrid, DataList, DataTable, DateRangeSelector, DayCell, DetailPanel, DialogueBox, DialogueBubble, Divider, Drawer, EmptyState, EnemyPlate, EntityDisplayEvents, ErrorBoundary, ErrorState, FEATURE_COLORS, FLOOR_HEIGHT, FilterGroup, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormField, FormSectionHeader, GameCanvas2D, GameHud, GameMenu, GameOverScreen, GraphView, Grid, HStack, Heading, HealthBar, HealthPanel, Icon, InfiniteScrollSentinel, Input, InputGroup, InventoryGrid, InventoryPanel, IsometricCanvas, IsometricCanvas_default, ItemSlot, Label, LawReferenceTooltip, Lightbox, LineChart, LoadingState, MapView, MarkdownContent, MasterDetail, Menu, Meter, MiniMap, Modal, NumberStepper, Overlay, PageHeader, Pagination, PlatformerCanvas, Popover, PowerupSlots, ProgressBar, ProgressDots, PullToRefresh, QuestTracker, QuizBlock, Radio, RangeSlider, RelationSelect, RepeatableFormSection, ResourceBar, ResourceCounter, ScaledDiagram, ScoreBoard, ScoreDisplay, SearchInput, Select, SidePanel, SimpleGrid, SimulationCanvas, SimulationControls, SimulationGraph, Skeleton, SlotContentRenderer, SortableList, Spacer, Spinner, Sprite, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateIndicator, StatusDot, StatusEffect, SuspenseConfigProvider, SwipeableRow, Switch, TILE_HEIGHT, TILE_WIDTH, Tabs, Text, TextHighlight, Textarea, ThemeSelector, ThemeToggle, TimeSlotCell, TimerDisplay, Toast, Tooltip, TrendIndicator, TurnIndicator, TurnPanel, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UnitCommandBar, UploadDropZone, VStack, ViolationAlert, WaypointMarker, WizardNavigation, WizardProgress, XPBar, drawSprite, isoToScreen, pendulum, projectileMotion, screenToIso, springOscillator, useCamera, useImageCache };