@downcity/ui 0.1.0 → 0.1.1

package/dist/index.js

@@ -194,18 +194,183 @@ function CardFooter({ className, ...props }) {
   );
 }
 
+// src/components/checkbox.tsx
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+import { CheckIcon } from "lucide-react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Checkbox({ className, ...props }) {
+  return /* @__PURE__ */ jsx3(
+    CheckboxPrimitive.Root,
+    {
+      "data-slot": "checkbox",
+      className: cn(
+        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx3(
+        CheckboxPrimitive.Indicator,
+        {
+          "data-slot": "checkbox-indicator",
+          className: "grid place-content-center text-current transition-none [&>svg]:size-3.5",
+          children: /* @__PURE__ */ jsx3(CheckIcon, {})
+        }
+      )
+    }
+  );
+}
+
+// src/components/dialog.tsx
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { XIcon } from "lucide-react";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+function Dialog(props) {
+  return /* @__PURE__ */ jsx4(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogTrigger(props) {
+  return /* @__PURE__ */ jsx4(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal(props) {
+  return /* @__PURE__ */ jsx4(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose(props) {
+  return /* @__PURE__ */ jsx4(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({ className, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    DialogPrimitive.Backdrop,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "fixed inset-0 z-50 bg-black/20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsx4(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Popup,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "fixed top-1/2 left-1/2 z-50 w-[min(92vw,760px)] max-h-[86vh] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-[24px] bg-card text-sm shadow-[0_22px_70px_rgba(15,23,42,0.12)] transition duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:scale-[0.985] data-starting-style:scale-[0.985]",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton ? /* @__PURE__ */ jsxs(
+            DialogPrimitive.Close,
+            {
+              "data-slot": "dialog-close",
+              render: /* @__PURE__ */ jsx4(Button, { size: "icon-sm", variant: "ghost", className: "absolute top-3 right-3" }),
+              children: [
+                /* @__PURE__ */ jsx4(XIcon, {}),
+                /* @__PURE__ */ jsx4("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          ) : null
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-0.5 p-4 pr-12", className),
+      ...props
+    }
+  );
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn("flex items-center justify-end gap-2 p-4", className),
+      ...props
+    }
+  );
+}
+function DialogTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    DialogPrimitive.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-base font-medium text-foreground", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    DialogPrimitive.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+
+// src/components/input.tsx
+import { Input as InputPrimitive } from "@base-ui/react/input";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx5(
+    InputPrimitive,
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "h-9 w-full min-w-0 rounded-[12px] border border-transparent bg-secondary/85 px-3 py-2 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:bg-secondary focus-visible:ring-3 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/45 disabled:opacity-50 aria-invalid:bg-destructive/5 aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/label.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function Label({ className, ...props }) {
+  return /* @__PURE__ */ jsx6(
+    "label",
+    {
+      "data-slot": "label",
+      className: cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
 // src/components/dropdown-menu.tsx
 import { Menu as MenuPrimitive } from "@base-ui/react/menu";
-import { CheckIcon, ChevronRightIcon } from "lucide-react";
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { CheckIcon as CheckIcon2, ChevronRightIcon } from "lucide-react";
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
 function DropdownMenu({ ...props }) {
-  return /* @__PURE__ */ jsx3(MenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+  return /* @__PURE__ */ jsx7(MenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
 }
 function DropdownMenuPortal({ ...props }) {
-  return /* @__PURE__ */ jsx3(MenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
+  return /* @__PURE__ */ jsx7(MenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
 }
 function DropdownMenuTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx3(MenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+  return /* @__PURE__ */ jsx7(MenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
 }
 function DropdownMenuContent({
   align = "start",
@@ -215,7 +380,7 @@ function DropdownMenuContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(MenuPrimitive.Portal, { children: /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx7(MenuPrimitive.Portal, { children: /* @__PURE__ */ jsx7(
     MenuPrimitive.Positioner,
     {
       className: "isolate z-50 outline-none",
@@ -223,7 +388,7 @@ function DropdownMenuContent({
       alignOffset,
       side,
       sideOffset,
-      children: /* @__PURE__ */ jsx3(
+      children: /* @__PURE__ */ jsx7(
         MenuPrimitive.Popup,
         {
           "data-slot": "dropdown-menu-content",
@@ -238,14 +403,14 @@ function DropdownMenuContent({
   ) });
 }
 function DropdownMenuGroup({ ...props }) {
-  return /* @__PURE__ */ jsx3(MenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
+  return /* @__PURE__ */ jsx7(MenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
 }
 function DropdownMenuLabel({
   className,
   inset,
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx7(
     MenuPrimitive.GroupLabel,
     {
       "data-slot": "dropdown-menu-label",
@@ -264,7 +429,7 @@ function DropdownMenuItem({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx7(
     MenuPrimitive.Item,
     {
       "data-slot": "dropdown-menu-item",
@@ -279,7 +444,7 @@ function DropdownMenuItem({
   );
 }
 function DropdownMenuSub({ ...props }) {
-  return /* @__PURE__ */ jsx3(MenuPrimitive.SubmenuRoot, { "data-slot": "dropdown-menu-sub", ...props });
+  return /* @__PURE__ */ jsx7(MenuPrimitive.SubmenuRoot, { "data-slot": "dropdown-menu-sub", ...props });
 }
 function DropdownMenuSubTrigger({
   className,
@@ -287,7 +452,7 @@ function DropdownMenuSubTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     MenuPrimitive.SubmenuTrigger,
     {
       "data-slot": "dropdown-menu-sub-trigger",
@@ -299,7 +464,7 @@ function DropdownMenuSubTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx3(ChevronRightIcon, { className: "ml-auto" })
+        /* @__PURE__ */ jsx7(ChevronRightIcon, { className: "ml-auto" })
       ]
     }
   );
@@ -312,7 +477,7 @@ function DropdownMenuSubContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx7(
     DropdownMenuContent,
     {
       "data-slot": "dropdown-menu-sub-content",
@@ -335,7 +500,7 @@ function DropdownMenuCheckboxItem({
   inset,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     MenuPrimitive.CheckboxItem,
     {
       "data-slot": "dropdown-menu-checkbox-item",
@@ -347,12 +512,12 @@ function DropdownMenuCheckboxItem({
       checked,
       ...props,
       children: [
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx7(
           "span",
           {
             className: "pointer-events-none absolute right-2 flex items-center justify-center",
             "data-slot": "dropdown-menu-checkbox-item-indicator",
-            children: /* @__PURE__ */ jsx3(MenuPrimitive.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx3(CheckIcon, {}) })
+            children: /* @__PURE__ */ jsx7(MenuPrimitive.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx7(CheckIcon2, {}) })
           }
         ),
         children
@@ -361,7 +526,7 @@ function DropdownMenuCheckboxItem({
   );
 }
 function DropdownMenuRadioGroup({ ...props }) {
-  return /* @__PURE__ */ jsx3(MenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props });
+  return /* @__PURE__ */ jsx7(MenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props });
 }
 function DropdownMenuRadioItem({
   className,
@@ -369,7 +534,7 @@ function DropdownMenuRadioItem({
   inset,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     MenuPrimitive.RadioItem,
     {
       "data-slot": "dropdown-menu-radio-item",
@@ -380,12 +545,12 @@ function DropdownMenuRadioItem({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx7(
           "span",
           {
             className: "pointer-events-none absolute right-2 flex items-center justify-center",
             "data-slot": "dropdown-menu-radio-item-indicator",
-            children: /* @__PURE__ */ jsx3(MenuPrimitive.RadioItemIndicator, { children: /* @__PURE__ */ jsx3(CheckIcon, {}) })
+            children: /* @__PURE__ */ jsx7(MenuPrimitive.RadioItemIndicator, { children: /* @__PURE__ */ jsx7(CheckIcon2, {}) })
           }
         ),
         children
@@ -397,7 +562,7 @@ function DropdownMenuSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx7(
     MenuPrimitive.Separator,
     {
       "data-slot": "dropdown-menu-separator",
@@ -410,7 +575,7 @@ function DropdownMenuShortcut({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx7(
     "span",
     {
       "data-slot": "dropdown-menu-shortcut",
@@ -425,12 +590,12 @@ function DropdownMenuShortcut({
 
 // src/components/popover.tsx
 import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function Popover({ ...props }) {
-  return /* @__PURE__ */ jsx4(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+  return /* @__PURE__ */ jsx8(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
 }
 function PopoverTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx4(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+  return /* @__PURE__ */ jsx8(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
 }
 function PopoverContent({
   className,
@@ -440,7 +605,7 @@ function PopoverContent({
   alignOffset = 0,
   ...props
 }) {
-  return /* @__PURE__ */ jsx4(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx8(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx8(
     PopoverPrimitive.Positioner,
     {
       side,
@@ -448,7 +613,7 @@ function PopoverContent({
       align,
       alignOffset,
       className: "isolate z-50",
-      children: /* @__PURE__ */ jsx4(
+      children: /* @__PURE__ */ jsx8(
         PopoverPrimitive.Popup,
         {
           "data-slot": "popover-content",
@@ -463,21 +628,259 @@ function PopoverContent({
   ) });
 }
 
+// src/components/separator.tsx
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
+import { jsx as jsx9 } from "react/jsx-runtime";
+function Separator({
+  className,
+  orientation = "horizontal",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx9(
+    SeparatorPrimitive,
+    {
+      "data-slot": "separator",
+      orientation,
+      className: cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/sheet.tsx
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
+import { XIcon as XIcon2 } from "lucide-react";
+import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+function Sheet({ ...props }) {
+  return /* @__PURE__ */ jsx10(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
+}
+function SheetTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx10(SheetPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
+}
+function SheetClose({ ...props }) {
+  return /* @__PURE__ */ jsx10(SheetPrimitive.Close, { "data-slot": "sheet-close", ...props });
+}
+function SheetPortal({ ...props }) {
+  return /* @__PURE__ */ jsx10(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
+}
+function SheetOverlay({ className, ...props }) {
+  return /* @__PURE__ */ jsx10(
+    SheetPrimitive.Backdrop,
+    {
+      "data-slot": "sheet-overlay",
+      className: cn(
+        "fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs3(SheetPortal, { children: [
+    /* @__PURE__ */ jsx10(SheetOverlay, {}),
+    /* @__PURE__ */ jsxs3(
+      SheetPrimitive.Popup,
+      {
+        "data-slot": "sheet-content",
+        "data-side": side,
+        className: cn(
+          "fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton ? /* @__PURE__ */ jsxs3(
+            SheetPrimitive.Close,
+            {
+              "data-slot": "sheet-close",
+              render: /* @__PURE__ */ jsx10(Button, { variant: "ghost", className: "absolute top-3 right-3", size: "icon-sm" }),
+              children: [
+                /* @__PURE__ */ jsx10(XIcon2, {}),
+                /* @__PURE__ */ jsx10("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          ) : null
+        ]
+      }
+    )
+  ] });
+}
+function SheetHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      "data-slot": "sheet-header",
+      className: cn("flex flex-col gap-0.5 p-4", className),
+      ...props
+    }
+  );
+}
+function SheetFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      "data-slot": "sheet-footer",
+      className: cn("mt-auto flex flex-col gap-2 p-4", className),
+      ...props
+    }
+  );
+}
+function SheetTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx10(
+    SheetPrimitive.Title,
+    {
+      "data-slot": "sheet-title",
+      className: cn("text-base font-medium text-foreground", className),
+      ...props
+    }
+  );
+}
+function SheetDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx10(
+    SheetPrimitive.Description,
+    {
+      "data-slot": "sheet-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+
+// src/components/skeleton.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsx11(
+    "div",
+    {
+      "data-slot": "skeleton",
+      className: cn("animate-pulse rounded-md bg-muted", className),
+      ...props
+    }
+  );
+}
+
+// src/components/tabs.tsx
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { cva as cva3 } from "class-variance-authority";
+import { jsx as jsx12 } from "react/jsx-runtime";
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx12(
+    TabsPrimitive.Root,
+    {
+      "data-slot": "tabs",
+      "data-orientation": orientation,
+      className: cn("group/tabs flex gap-2 data-horizontal:flex-col", className),
+      ...props
+    }
+  );
+}
+var tabsListVariants = cva3(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx12(
+    TabsPrimitive.List,
+    {
+      "data-slot": "tabs-list",
+      "data-variant": variant,
+      className: cn(tabsListVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function TabsTrigger({ className, ...props }) {
+  return /* @__PURE__ */ jsx12(
+    TabsPrimitive.Tab,
+    {
+      "data-slot": "tabs-trigger",
+      className: cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabsContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx12(
+    TabsPrimitive.Panel,
+    {
+      "data-slot": "tabs-content",
+      className: cn("flex-1 text-sm outline-none", className),
+      ...props
+    }
+  );
+}
+
+// src/components/textarea.tsx
+import * as React from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var Textarea = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx13(
+      "textarea",
+      {
+        ref,
+        "data-slot": "textarea",
+        className: cn(
+          "flex min-h-[96px] w-full rounded-[16px] border border-transparent bg-secondary/85 px-3 py-2.5 text-sm outline-none transition placeholder:text-muted-foreground focus-visible:bg-secondary focus-visible:ring-3 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-55",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+
 // src/components/sonner.tsx
 import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon } from "lucide-react";
 import { Toaster as Sonner } from "sonner";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function Toaster({ ...props }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx14(
     Sonner,
     {
       className: "toaster group",
       icons: {
-        success: /* @__PURE__ */ jsx5(CircleCheckIcon, { className: "size-4" }),
-        info: /* @__PURE__ */ jsx5(InfoIcon, { className: "size-4" }),
-        warning: /* @__PURE__ */ jsx5(TriangleAlertIcon, { className: "size-4" }),
-        error: /* @__PURE__ */ jsx5(OctagonXIcon, { className: "size-4" }),
-        loading: /* @__PURE__ */ jsx5(Loader2Icon, { className: "size-4 animate-spin" })
+        success: /* @__PURE__ */ jsx14(CircleCheckIcon, { className: "size-4" }),
+        info: /* @__PURE__ */ jsx14(InfoIcon, { className: "size-4" }),
+        warning: /* @__PURE__ */ jsx14(TriangleAlertIcon, { className: "size-4" }),
+        error: /* @__PURE__ */ jsx14(OctagonXIcon, { className: "size-4" }),
+        loading: /* @__PURE__ */ jsx14(Loader2Icon, { className: "size-4 animate-spin" })
       },
       style: {
         "--normal-bg": "var(--popover)",
@@ -494,6 +897,3390 @@ function Toaster({ ...props }) {
     }
   );
 }
+
+// src/components/toggle.tsx
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import { cva as cva4 } from "class-variance-authority";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var toggleVariants = cva4(
+  "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent hover:bg-muted"
+      },
+      size: {
+        default: "h-8 min-w-8 px-2",
+        sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem]",
+        lg: "h-9 min-w-9 px-2.5"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Toggle({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx15(
+    TogglePrimitive,
+    {
+      "data-slot": "toggle",
+      className: cn(toggleVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/components/toggle-group.tsx
+import * as React2 from "react";
+import { Toggle as TogglePrimitive2 } from "@base-ui/react/toggle";
+import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var ToggleGroupContext = React2.createContext({
+  size: "default",
+  variant: "default",
+  spacing: 0,
+  orientation: "horizontal"
+});
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 0,
+  orientation = "horizontal",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx16(
+    ToggleGroupPrimitive,
+    {
+      "data-slot": "toggle-group",
+      "data-variant": variant,
+      "data-size": size,
+      "data-spacing": spacing,
+      "data-orientation": orientation,
+      style: { "--gap": spacing },
+      className: cn(
+        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx16(ToggleGroupContext.Provider, { value: { variant, size, spacing, orientation }, children })
+    }
+  );
+}
+function ToggleGroupItem({
+  className,
+  children,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  const context = React2.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx16(
+    TogglePrimitive2,
+    {
+      "data-slot": "toggle-group-item",
+      "data-variant": context.variant || variant,
+      "data-size": context.size || size,
+      "data-spacing": context.spacing,
+      className: cn(
+        "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size
+        }),
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+
+// src/components/tooltip.tsx
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+import { jsx as jsx17, jsxs as jsxs4 } from "react/jsx-runtime";
+function TooltipProvider({
+  delay = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx17(
+    TooltipPrimitive.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delay,
+      ...props
+    }
+  );
+}
+function Tooltip({ ...props }) {
+  return /* @__PURE__ */ jsx17(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
+}
+function TooltipTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx17(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx17(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx17(
+    TooltipPrimitive.Positioner,
+    {
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      className: "isolate z-50",
+      children: /* @__PURE__ */ jsxs4(
+        TooltipPrimitive.Popup,
+        {
+          "data-slot": "tooltip-content",
+          className: cn(
+            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          ),
+          ...props,
+          children: [
+            children,
+            /* @__PURE__ */ jsx17(TooltipPrimitive.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })
+          ]
+        }
+      )
+    }
+  ) });
+}
+
+// src/components/workboard.tsx
+import * as React7 from "react";
+import {
+  Maximize2Icon,
+  Minimize2Icon,
+  RefreshCwIcon
+} from "lucide-react";
+
+// src/components/workboard-game-atlas.tsx
+import * as React4 from "react";
+
+// src/components/workboard-stage-map.tsx
+import { jsx as jsx18, jsxs as jsxs5 } from "react/jsx-runtime";
+var TILE_SIZE = 40;
+var GRID_COLS = 40;
+var GRID_ROWS = 24;
+var STAGE_WIDTH = TILE_SIZE * GRID_COLS;
+var STAGE_HEIGHT = TILE_SIZE * GRID_ROWS;
+var WORKBOARD_TOWN_PLAZA_POINT = { x: 800, y: 480 };
+var WORKBOARD_ZONE_GATE_POINTS = {
+  engaged: { x: 560, y: 400 },
+  steady: { x: 1040, y: 400 },
+  quiet: { x: 560, y: 560 },
+  drift: { x: 1040, y: 560 }
+};
+var WORKBOARD_ZONE_LAYOUT = {
+  engaged: { x: 2.5, y: 12.5, w: 35, h: 29.167, hubX: 20, hubY: 27.083 },
+  steady: { x: 62.5, y: 12.5, w: 35, h: 29.167, hubX: 80, hubY: 27.083 },
+  quiet: { x: 2.5, y: 58.333, w: 35, h: 33.333, hubX: 20, hubY: 75 },
+  drift: { x: 62.5, y: 58.333, w: 35, h: 33.333, hubX: 80, hubY: 75 }
+};
+var ZONE_PIXEL_PALETTE = {
+  engaged: {
+    fill: "rgba(195,230,214,0.9)",
+    fillStrong: "rgba(126,190,162,0.96)",
+    stroke: "rgba(39,110,80,0.95)",
+    line: "rgba(52,144,111,0.78)",
+    shadow: "rgba(37,86,66,0.24)"
+  },
+  steady: {
+    fill: "rgba(225,235,184,0.92)",
+    fillStrong: "rgba(186,207,103,0.96)",
+    stroke: "rgba(112,132,38,0.92)",
+    line: "rgba(145,161,63,0.72)",
+    shadow: "rgba(98,112,35,0.2)"
+  },
+  quiet: {
+    fill: "rgba(225,221,211,0.94)",
+    fillStrong: "rgba(190,183,169,0.98)",
+    stroke: "rgba(103,96,87,0.9)",
+    line: "rgba(130,124,112,0.7)",
+    shadow: "rgba(84,78,71,0.18)"
+  },
+  drift: {
+    fill: "rgba(245,214,178,0.94)",
+    fillStrong: "rgba(231,162,92,0.96)",
+    stroke: "rgba(161,91,32,0.92)",
+    line: "rgba(194,121,55,0.78)",
+    shadow: "rgba(146,78,28,0.2)"
+  }
+};
+var TOWN_PATH_TILES = [
+  { col: 0, row: 10, cols: 40, rows: 4 },
+  { col: 19, row: 0, cols: 2, rows: 24 },
+  { col: 12, row: 7, cols: 7, rows: 2 },
+  { col: 21, row: 7, cols: 7, rows: 2 },
+  { col: 12, row: 15, cols: 7, rows: 2 },
+  { col: 21, row: 15, cols: 7, rows: 2 }
+];
+var TOWN_WATER_TILES = [
+  { col: 0, row: 0, cols: 10, rows: 2 },
+  { col: 30, row: 0, cols: 10, rows: 2 },
+  { col: 0, row: 22, cols: 11, rows: 2 },
+  { col: 29, row: 22, cols: 11, rows: 2 },
+  { col: 0, row: 2, cols: 2, rows: 5 },
+  { col: 38, row: 17, cols: 2, rows: 5 }
+];
+var TOWN_FENCE_TILES = [
+  { col: 2, row: 2, cols: 15, rows: 1 },
+  { col: 23, row: 2, cols: 15, rows: 1 },
+  { col: 2, row: 22, cols: 15, rows: 1 },
+  { col: 23, row: 22, cols: 15, rows: 1 }
+];
+var TOWN_BUILDINGS = [
+  {
+    col: 1,
+    row: 3,
+    cols: 14,
+    rows: 7,
+    zoneId: "engaged",
+    floor: "rgba(230,199,170,0.98)",
+    wall: "rgba(135,73,56,0.96)",
+    entrance: "bottom",
+    walls: [
+      { col: 5, row: 3, cols: 1, rows: 7 },
+      { col: 10, row: 3, cols: 1, rows: 7 },
+      { col: 1, row: 6, cols: 14, rows: 1 }
+    ],
+    props: [
+      { col: 2, row: 4, cols: 1, rows: 1, kind: "desk" },
+      { col: 7, row: 4, cols: 2, rows: 1, kind: "shelf" },
+      { col: 12, row: 4, cols: 1, rows: 1, kind: "desk" },
+      { col: 2, row: 8, cols: 2, rows: 1, kind: "table" },
+      { col: 7, row: 8, cols: 1, rows: 1, kind: "sofa" },
+      { col: 12, row: 8, cols: 1, rows: 1, kind: "sofa" }
+    ]
+  },
+  {
+    col: 25,
+    row: 3,
+    cols: 14,
+    rows: 7,
+    zoneId: "steady",
+    floor: "rgba(244,236,174,0.98)",
+    wall: "rgba(118,95,68,0.96)",
+    entrance: "bottom",
+    walls: [
+      { col: 29, row: 3, cols: 1, rows: 7 },
+      { col: 34, row: 3, cols: 1, rows: 7 },
+      { col: 25, row: 6, cols: 14, rows: 1 }
+    ],
+    props: [
+      { col: 26, row: 4, cols: 1, rows: 1, kind: "desk" },
+      { col: 31, row: 4, cols: 2, rows: 1, kind: "shelf" },
+      { col: 36, row: 4, cols: 1, rows: 1, kind: "desk" },
+      { col: 26, row: 8, cols: 2, rows: 1, kind: "table" },
+      { col: 31, row: 8, cols: 1, rows: 1, kind: "bed" },
+      { col: 36, row: 8, cols: 1, rows: 1, kind: "sofa" }
+    ]
+  },
+  {
+    col: 1,
+    row: 14,
+    cols: 14,
+    rows: 8,
+    zoneId: "quiet",
+    floor: "rgba(231,226,207,0.98)",
+    wall: "rgba(116,107,97,0.96)",
+    entrance: "top",
+    walls: [
+      { col: 5, row: 14, cols: 1, rows: 8 },
+      { col: 10, row: 14, cols: 1, rows: 8 },
+      { col: 1, row: 18, cols: 14, rows: 1 }
+    ],
+    props: [
+      { col: 2, row: 15, cols: 1, rows: 1, kind: "bed" },
+      { col: 7, row: 15, cols: 2, rows: 1, kind: "shelf" },
+      { col: 12, row: 15, cols: 1, rows: 1, kind: "bed" },
+      { col: 2, row: 20, cols: 2, rows: 1, kind: "table" },
+      { col: 7, row: 20, cols: 1, rows: 1, kind: "sofa" },
+      { col: 12, row: 20, cols: 1, rows: 1, kind: "sofa" }
+    ]
+  },
+  {
+    col: 25,
+    row: 14,
+    cols: 14,
+    rows: 8,
+    zoneId: "drift",
+    floor: "rgba(244,211,166,0.98)",
+    wall: "rgba(155,85,43,0.96)",
+    entrance: "top",
+    walls: [
+      { col: 29, row: 14, cols: 1, rows: 8 },
+      { col: 34, row: 14, cols: 1, rows: 8 },
+      { col: 25, row: 18, cols: 14, rows: 1 }
+    ],
+    props: [
+      { col: 26, row: 15, cols: 1, rows: 1, kind: "desk" },
+      { col: 31, row: 15, cols: 2, rows: 1, kind: "shelf" },
+      { col: 36, row: 15, cols: 1, rows: 1, kind: "desk" },
+      { col: 26, row: 20, cols: 2, rows: 1, kind: "table" },
+      { col: 31, row: 20, cols: 1, rows: 1, kind: "sofa" },
+      { col: 36, row: 20, cols: 1, rows: 1, kind: "sofa" }
+    ]
+  }
+];
+var TOWN_TREE_POINTS = [
+  { col: 19, row: 2 },
+  { col: 20, row: 21 },
+  { col: 7, row: 2 },
+  { col: 32, row: 2 },
+  { col: 17, row: 4 },
+  { col: 22, row: 4 },
+  { col: 17, row: 19 },
+  { col: 22, row: 19 }
+];
+var TOWN_SHRUB_POINTS = [
+  { col: 16, row: 8 },
+  { col: 23, row: 8 },
+  { col: 16, row: 15 },
+  { col: 23, row: 15 },
+  { col: 4, row: 2 },
+  { col: 35, row: 2 },
+  { col: 4, row: 22 },
+  { col: 35, row: 22 }
+];
+var TOWN_FLOWER_POINTS = [
+  { col: 6, row: 11 },
+  { col: 11, row: 12 },
+  { col: 16, row: 9 },
+  { col: 23, row: 14 },
+  { col: 29, row: 11 },
+  { col: 34, row: 12 },
+  { col: 18, row: 5 },
+  { col: 21, row: 18 },
+  { col: 3, row: 21 },
+  { col: 36, row: 2 }
+];
+function tileToRect(tile) {
+  return {
+    x: tile.col * TILE_SIZE,
+    y: tile.row * TILE_SIZE,
+    width: tile.cols * TILE_SIZE,
+    height: tile.rows * TILE_SIZE
+  };
+}
+function estimateTextWidth(text) {
+  return Array.from(text).reduce((acc, char) => acc + (char.charCodeAt(0) > 255 ? 9 : 6), 0);
+}
+function fitPixelLabel(text, maxWidth) {
+  if (estimateTextWidth(text) <= maxWidth) return text;
+  let current = "";
+  for (const char of Array.from(text)) {
+    const next = `${current}${char}`;
+    if (estimateTextWidth(`${next}...`) > maxWidth) {
+      return current.length > 0 ? `${current}...` : text;
+    }
+    current = next;
+  }
+  return current;
+}
+function TileRectSvg(props) {
+  const rect2 = tileToRect(props.tile);
+  return /* @__PURE__ */ jsx18(
+    "rect",
+    {
+      x: rect2.x,
+      y: rect2.y,
+      width: rect2.width,
+      height: rect2.height,
+      fill: props.fill,
+      stroke: props.stroke,
+      strokeWidth: props.stroke ? 2 : void 0,
+      opacity: props.opacity
+    }
+  );
+}
+function renderGrassTiles() {
+  return Array.from({ length: GRID_COLS * GRID_ROWS }, (_, index) => {
+    const col = index % GRID_COLS;
+    const row = Math.floor(index / GRID_COLS);
+    const fill = (col + row) % 2 === 0 ? "rgba(104,136,76,0.98)" : "rgba(91,124,70,0.98)";
+    const rect2 = tileToRect({ col, row, cols: 1, rows: 1 });
+    return /* @__PURE__ */ jsxs5("g", { children: [
+      /* @__PURE__ */ jsx18("rect", { x: rect2.x, y: rect2.y, width: TILE_SIZE, height: TILE_SIZE, fill }),
+      /* @__PURE__ */ jsx18("rect", { x: rect2.x + 6, y: rect2.y + 8, width: "4", height: "4", fill: "rgba(40,78,45,0.26)" }),
+      /* @__PURE__ */ jsx18("rect", { x: rect2.x + 27, y: rect2.y + 25, width: "4", height: "4", fill: "rgba(142,161,89,0.18)" })
+    ] }, `grass-${col}-${row}`);
+  });
+}
+function renderTownPath(tile, index) {
+  const rect2 = tileToRect(tile);
+  const cobbles = Array.from({ length: tile.cols * tile.rows }, (_, cobbleIndex) => {
+    const col = tile.col + cobbleIndex % tile.cols;
+    const row = tile.row + Math.floor(cobbleIndex / tile.cols);
+    const x = col * TILE_SIZE + ((col + row) % 2 === 0 ? 8 : 22);
+    const y = row * TILE_SIZE + ((col * 3 + row) % 2 === 0 ? 10 : 24);
+    return /* @__PURE__ */ jsx18("rect", { x, y, width: "8", height: "5", fill: "rgba(134,105,67,0.24)" }, `town-path-cobble-${index}-${cobbleIndex}`);
+  });
+  return /* @__PURE__ */ jsxs5("g", { children: [
+    /* @__PURE__ */ jsx18("rect", { x: rect2.x, y: rect2.y, width: rect2.width, height: rect2.height, fill: "rgba(193,165,104,0.98)" }),
+    /* @__PURE__ */ jsx18("rect", { x: rect2.x, y: rect2.y, width: rect2.width, height: "4", fill: "rgba(116,92,62,0.34)" }),
+    /* @__PURE__ */ jsx18("rect", { x: rect2.x, y: rect2.y + rect2.height - 4, width: rect2.width, height: "4", fill: "rgba(116,92,62,0.28)" }),
+    cobbles
+  ] }, `town-path-${index}`);
+}
+function renderTownWater(tile, index) {
+  const rect2 = tileToRect(tile);
+  return /* @__PURE__ */ jsxs5("g", { children: [
+    /* @__PURE__ */ jsx18("rect", { x: rect2.x, y: rect2.y, width: rect2.width, height: rect2.height, fill: "rgba(82,139,149,0.9)" }),
+    /* @__PURE__ */ jsx18("rect", { x: rect2.x + 8, y: rect2.y + 10, width: Math.max(12, rect2.width - 16), height: "4", fill: "rgba(160,205,199,0.34)" }),
+    /* @__PURE__ */ jsx18("rect", { x: rect2.x + 18, y: rect2.y + rect2.height - 14, width: Math.max(18, rect2.width - 48), height: "4", fill: "rgba(53,103,112,0.24)" })
+  ] }, `town-water-${index}`);
+}
+function renderTownFence(tile, index) {
+  const rect2 = tileToRect(tile);
+  const posts = Array.from({ length: tile.cols }, (_, postIndex) => {
+    const x = rect2.x + postIndex * TILE_SIZE + 16;
+    return /* @__PURE__ */ jsx18("rect", { x, y: rect2.y + 8, width: "8", height: "24", fill: "rgba(111,78,47,0.88)" }, `town-fence-post-${index}-${postIndex}`);
+  });
+  return /* @__PURE__ */ jsxs5("g", { children: [
+    /* @__PURE__ */ jsx18("rect", { x: rect2.x + 8, y: rect2.y + 15, width: rect2.width - 16, height: "6", fill: "rgba(151,104,61,0.82)" }),
+    /* @__PURE__ */ jsx18("rect", { x: rect2.x + 8, y: rect2.y + 25, width: rect2.width - 16, height: "5", fill: "rgba(126,88,54,0.7)" }),
+    posts
+  ] }, `town-fence-${index}`);
+}
+function renderTownPlaza() {
+  return /* @__PURE__ */ jsxs5("g", { children: [
+    /* @__PURE__ */ jsx18(TileRectSvg, { tile: { col: 17, row: 9, cols: 6, rows: 6 }, fill: "rgba(211,189,128,0.96)", stroke: "rgba(126,97,58,0.36)" }),
+    /* @__PURE__ */ jsx18(TileRectSvg, { tile: { col: 18, row: 10, cols: 4, rows: 4 }, fill: "rgba(232,210,148,0.98)", stroke: "rgba(126,97,58,0.32)" }),
+    /* @__PURE__ */ jsx18("rect", { x: "776", y: "456", width: "48", height: "48", fill: "rgba(116,160,178,0.92)", stroke: "rgba(64,91,105,0.76)", strokeWidth: "4" }),
+    /* @__PURE__ */ jsx18("rect", { x: "788", y: "468", width: "24", height: "24", fill: "rgba(178,226,228,0.88)" }),
+    /* @__PURE__ */ jsx18("rect", { x: "796", y: "444", width: "8", height: "24", fill: "rgba(101,112,109,0.9)" }),
+    /* @__PURE__ */ jsx18("rect", { x: "784", y: "516", width: "32", height: "12", fill: "rgba(113,79,48,0.86)" }),
+    /* @__PURE__ */ jsx18("rect", { x: "736", y: "436", width: "8", height: "8", fill: "rgba(238,228,183,0.9)" }),
+    /* @__PURE__ */ jsx18("rect", { x: "856", y: "436", width: "8", height: "8", fill: "rgba(238,228,183,0.9)" }),
+    /* @__PURE__ */ jsx18("rect", { x: "736", y: "556", width: "8", height: "8", fill: "rgba(238,228,183,0.9)" }),
+    /* @__PURE__ */ jsx18("rect", { x: "856", y: "556", width: "8", height: "8", fill: "rgba(238,228,183,0.9)" })
+  ] }, "town-plaza");
+}
+function renderTree(point, index) {
+  const x = point.col * TILE_SIZE;
+  const y = point.row * TILE_SIZE;
+  return /* @__PURE__ */ jsxs5("g", { children: [
+    /* @__PURE__ */ jsx18("rect", { x: x + 17, y: y + 22, width: "8", height: "12", fill: "rgba(103,73,42,0.92)" }),
+    /* @__PURE__ */ jsx18("rect", { x: x + 10, y: y + 10, width: "22", height: "18", fill: "rgba(58,145,77,0.95)" }),
+    /* @__PURE__ */ jsx18("rect", { x: x + 14, y: y + 4, width: "14", height: "12", fill: "rgba(80,174,86,0.96)" }),
+    /* @__PURE__ */ jsx18("rect", { x: x + 8, y: y + 18, width: "26", height: "8", fill: "rgba(38,122,67,0.84)" })
+  ] }, `tree-${index}`);
+}
+function renderShrub(point, index) {
+  const x = point.col * TILE_SIZE;
+  const y = point.row * TILE_SIZE;
+  return /* @__PURE__ */ jsxs5("g", { children: [
+    /* @__PURE__ */ jsx18("rect", { x: x + 8, y: y + 18, width: "24", height: "12", fill: "rgba(53,111,61,0.86)" }),
+    /* @__PURE__ */ jsx18("rect", { x: x + 14, y: y + 12, width: "14", height: "10", fill: "rgba(72,132,67,0.9)" }),
+    /* @__PURE__ */ jsx18("rect", { x: x + 5, y: y + 27, width: "30", height: "5", fill: "rgba(33,76,43,0.32)" })
+  ] }, `shrub-${index}`);
+}
+function renderFlower(point, index) {
+  const x = point.col * TILE_SIZE;
+  const y = point.row * TILE_SIZE;
+  return /* @__PURE__ */ jsxs5("g", { children: [
+    /* @__PURE__ */ jsx18("rect", { x: x + 11, y: y + 13, width: "4", height: "4", fill: "rgba(240,97,135,0.86)" }),
+    /* @__PURE__ */ jsx18("rect", { x: x + 24, y: y + 20, width: "4", height: "4", fill: "rgba(248,219,82,0.9)" }),
+    /* @__PURE__ */ jsx18("rect", { x: x + 17, y: y + 26, width: "4", height: "4", fill: "rgba(134,104,218,0.76)" })
+  ] }, `flower-${index}`);
+}
+function renderTownProp(prop, index) {
+  const rect2 = tileToRect(prop);
+  const x = rect2.x + 6;
+  const y = rect2.y + 7;
+  if (prop.kind === "bed") {
+    return /* @__PURE__ */ jsxs5("g", { children: [
+      /* @__PURE__ */ jsx18("rect", { x, y, width: "28", height: "24", fill: "rgba(178,112,68,0.88)" }),
+      /* @__PURE__ */ jsx18("rect", { x: x + 4, y: y + 4, width: "20", height: "8", fill: "rgba(249,209,122,0.9)" }),
+      /* @__PURE__ */ jsx18("rect", { x: x + 4, y: y + 14, width: "20", height: "7", fill: "rgba(208,94,67,0.78)" })
+    ] }, `town-prop-${index}`);
+  }
+  if (prop.kind === "shelf") {
+    return /* @__PURE__ */ jsxs5("g", { children: [
+      /* @__PURE__ */ jsx18("rect", { x, y, width: Math.max(24, rect2.width - 12), height: "9", fill: "rgba(124,83,56,0.92)" }),
+      /* @__PURE__ */ jsx18("rect", { x, y: y + 12, width: Math.max(24, rect2.width - 12), height: "9", fill: "rgba(124,83,56,0.84)" }),
+      /* @__PURE__ */ jsx18("rect", { x: x + 5, y: y + 3, width: "5", height: "4", fill: "rgba(229,195,96,0.9)" })
+    ] }, `town-prop-${index}`);
+  }
+  if (prop.kind === "table") {
+    return /* @__PURE__ */ jsxs5("g", { children: [
+      /* @__PURE__ */ jsx18("rect", { x: x + 3, y: y + 5, width: Math.max(28, rect2.width - 18), height: "18", fill: "rgba(156,103,64,0.92)" }),
+      /* @__PURE__ */ jsx18("rect", { x: x + 8, y: y + 9, width: "6", height: "6", fill: "rgba(236,226,188,0.9)" })
+    ] }, `town-prop-${index}`);
+  }
+  if (prop.kind === "sofa") {
+    return /* @__PURE__ */ jsxs5("g", { children: [
+      /* @__PURE__ */ jsx18("rect", { x, y: y + 4, width: "26", height: "19", fill: "rgba(99,143,178,0.88)" }),
+      /* @__PURE__ */ jsx18("rect", { x: x + 4, y: y + 8, width: "18", height: "7", fill: "rgba(145,185,211,0.9)" })
+    ] }, `town-prop-${index}`);
+  }
+  return /* @__PURE__ */ jsxs5("g", { children: [
+    /* @__PURE__ */ jsx18("rect", { x, y: y + 4, width: "26", height: "16", fill: "rgba(124,83,56,0.92)" }),
+    /* @__PURE__ */ jsx18("rect", { x: x + 4, y, width: "18", height: "8", fill: "rgba(194,214,221,0.9)" })
+  ] }, `town-prop-${index}`);
+}
+function renderTownBuilding(building, activeZoneId) {
+  const rect2 = tileToRect(building);
+  const active = building.zoneId === activeZoneId;
+  const doorX = rect2.x + rect2.width / 2 - 24;
+  const doorY = building.entrance === "top" ? rect2.y - 6 : rect2.y + rect2.height - 10;
+  const stepY = building.entrance === "top" ? rect2.y - 22 : rect2.y + rect2.height + 6;
+  return /* @__PURE__ */ jsxs5("g", { children: [
+    /* @__PURE__ */ jsx18("rect", { x: doorX + 4, y: stepY, width: "40", height: "22", fill: "rgba(193,165,104,0.92)", opacity: "0.9" }),
+    /* @__PURE__ */ jsx18("rect", { x: rect2.x - 6, y: rect2.y - 6, width: rect2.width + 12, height: rect2.height + 12, fill: building.wall, opacity: active ? 1 : 0.82 }),
+    /* @__PURE__ */ jsx18("rect", { x: rect2.x + 8, y: rect2.y + 8, width: rect2.width - 16, height: rect2.height - 16, fill: building.floor }),
+    Array.from({ length: building.cols * building.rows }, (_, index) => {
+      const col = building.col + index % building.cols;
+      const row = building.row + Math.floor(index / building.cols);
+      const tile = tileToRect({ col, row, cols: 1, rows: 1 });
+      return /* @__PURE__ */ jsx18(
+        "rect",
+        {
+          x: tile.x + 8,
+          y: tile.y + 8,
+          width: TILE_SIZE - 16,
+          height: TILE_SIZE - 16,
+          fill: (col + row) % 2 === 0 ? "rgba(255,255,255,0.16)" : "rgba(0,0,0,0.04)"
+        },
+        `${building.zoneId}-floor-${col}-${row}`
+      );
+    }),
+    building.walls.map((wall, index) => {
+      const wallRect = tileToRect(wall);
+      return /* @__PURE__ */ jsx18(
+        "rect",
+        {
+          x: wallRect.x + 4,
+          y: wallRect.y + 4,
+          width: wallRect.width - 8,
+          height: wallRect.height - 8,
+          fill: building.wall,
+          opacity: "0.88"
+        },
+        `${building.zoneId}-wall-${index}`
+      );
+    }),
+    /* @__PURE__ */ jsx18("rect", { x: doorX, y: doorY, width: "48", height: "16", fill: "rgba(226,204,139,0.98)" }),
+    /* @__PURE__ */ jsx18("rect", { x: doorX + 8, y: doorY + 4, width: "32", height: "8", fill: "rgba(91,65,44,0.55)" }),
+    building.props.map(renderTownProp),
+    /* @__PURE__ */ jsx18("rect", { x: rect2.x - 8, y: rect2.y - 8, width: rect2.width + 16, height: rect2.height + 16, fill: "none", stroke: active ? ZONE_PIXEL_PALETTE[building.zoneId].stroke : "rgba(17,17,19,0.34)", strokeWidth: active ? 5 : 3 })
+  ] }, `town-building-${building.zoneId}`);
+}
+function PixelAtlasMap(props) {
+  const activeZoneId = props.zones.find((zone) => zone.active)?.id;
+  return /* @__PURE__ */ jsxs5(
+    "svg",
+    {
+      viewBox: `0 0 ${props.stageWidth} ${props.stageHeight}`,
+      className: "pointer-events-none absolute inset-0 h-full w-full",
+      preserveAspectRatio: "xMidYMid meet",
+      shapeRendering: "crispEdges",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx18("rect", { x: 0, y: 0, width: STAGE_WIDTH, height: STAGE_HEIGHT, fill: "rgba(247,244,236,0.98)" }),
+        renderGrassTiles(),
+        TOWN_WATER_TILES.map(renderTownWater),
+        TOWN_PATH_TILES.map(renderTownPath),
+        renderTownPlaza(),
+        TOWN_FENCE_TILES.map(renderTownFence),
+        TOWN_SHRUB_POINTS.map(renderShrub),
+        TOWN_TREE_POINTS.map(renderTree),
+        TOWN_FLOWER_POINTS.map(renderFlower),
+        TOWN_BUILDINGS.map((building) => renderTownBuilding(building, activeZoneId)),
+        props.zones.map((zone) => {
+          const building = TOWN_BUILDINGS.find((item) => item.zoneId === zone.id);
+          if (!building) return null;
+          const layout = WORKBOARD_ZONE_LAYOUT[zone.id];
+          const active = zone.active;
+          const palette = ZONE_PIXEL_PALETTE[zone.id];
+          const rect2 = tileToRect(building);
+          const label = fitPixelLabel(zone.title, 112);
+          const signWidth = Math.max(104, estimateTextWidth(label) + 34);
+          const signX = rect2.x + 14;
+          const signY = rect2.y - 30;
+          const hubX = layout.hubX / 100 * STAGE_WIDTH;
+          const hubY = layout.hubY / 100 * STAGE_HEIGHT;
+          return /* @__PURE__ */ jsxs5("g", { children: [
+            /* @__PURE__ */ jsx18("rect", { x: signX - 5, y: signY + 5, width: signWidth, height: "22", fill: "rgba(72,50,33,0.34)" }),
+            /* @__PURE__ */ jsx18("rect", { x: signX, y: signY, width: signWidth, height: "22", fill: "rgba(250,236,178,0.98)", stroke: palette.stroke, strokeWidth: active ? 4 : 3 }),
+            /* @__PURE__ */ jsx18("rect", { x: signX + 7, y: signY + 22, width: "6", height: "16", fill: "rgba(111,78,47,0.86)" }),
+            /* @__PURE__ */ jsx18("rect", { x: signX + signWidth - 13, y: signY + 22, width: "6", height: "16", fill: "rgba(111,78,47,0.86)" }),
+            /* @__PURE__ */ jsx18("rect", { x: hubX - 16, y: hubY - 16, width: "32", height: "32", fill: "rgba(255,252,247,0.94)", stroke: palette.stroke, strokeWidth: "3" }),
+            /* @__PURE__ */ jsx18("rect", { x: hubX - 8, y: hubY - 8, width: "16", height: "16", fill: palette.fillStrong }),
+            /* @__PURE__ */ jsx18("rect", { x: hubX - 3, y: hubY - 3, width: "6", height: "6", fill: palette.stroke }),
+            /* @__PURE__ */ jsx18(
+              "text",
+              {
+                x: signX + 10,
+                y: signY + 15,
+                fill: "rgba(17,17,19,0.78)",
+                fontSize: "10",
+                fontWeight: "700",
+                fontFamily: "var(--font-geist-mono, var(--font-sans))",
+                children: label
+              }
+            ),
+            /* @__PURE__ */ jsx18("rect", { x: rect2.x + rect2.width - 44, y: rect2.y + 14, width: "30", height: "24", fill: palette.fillStrong, stroke: "rgba(17,17,19,0.34)", strokeWidth: "2" }),
+            /* @__PURE__ */ jsx18(
+              "text",
+              {
+                x: rect2.x + rect2.width - 29,
+                y: rect2.y + 31,
+                textAnchor: "end",
+                fill: palette.stroke,
+                fontSize: "15",
+                fontWeight: "800",
+                fontFamily: "var(--font-geist-mono, var(--font-sans))",
+                children: zone.count
+              }
+            )
+          ] }, `zone-${zone.id}`);
+        })
+      ]
+    }
+  );
+}
+function PixelRoute(props) {
+  if (props.points.length < 2) return null;
+  const d = props.points.map((point, index) => `${index === 0 ? "M" : "L"} ${point.x} ${point.y}`).join(" ");
+  return /* @__PURE__ */ jsx18(
+    "path",
+    {
+      d,
+      fill: "none",
+      className: props.className,
+      strokeWidth: 3,
+      strokeLinecap: "square",
+      strokeLinejoin: "miter",
+      strokeDasharray: props.dashed ? "8 8" : void 0
+    }
+  );
+}
+function PixelHoverTag(props) {
+  if (!props.tag) return null;
+  const text = fitPixelLabel(props.tag.label, 160);
+  const width = Math.max(78, estimateTextWidth(text) + 18);
+  const height = 20;
+  const x = Math.min(Math.max(props.tag.x - width / 2, 6), props.stageWidth - width - 6);
+  const y = Math.min(Math.max(props.tag.y - height - 14, 6), props.stageHeight - height - 6);
+  return /* @__PURE__ */ jsxs5("g", { pointerEvents: "none", children: [
+    /* @__PURE__ */ jsx18("rect", { x, y, width, height, fill: "rgba(255,252,247,0.98)", stroke: "rgba(17,17,19,0.44)", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx18("rect", { x: x + 10, y: y + height, width: "10", height: "6", fill: "rgba(255,252,247,0.98)", stroke: "rgba(17,17,19,0.44)", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx18(
+      "text",
+      {
+        x: x + 8,
+        y: y + 13,
+        fill: "rgba(17,17,19,0.72)",
+        fontSize: "10",
+        fontWeight: "700",
+        fontFamily: "var(--font-geist-mono, var(--font-sans))",
+        children: text
+      }
+    )
+  ] });
+}
+
+// src/components/workboard-pixel-agent.tsx
+import * as React3 from "react";
+import { jsx as jsx19, jsxs as jsxs6 } from "react/jsx-runtime";
+var PIXEL_PALETTES = [
+  {
+    skin: "#f1c7a5",
+    hair: "#4c3327",
+    outfit: "#3f7c63",
+    accent: "#d4eadf",
+    outline: "#241a16"
+  },
+  {
+    skin: "#dbb08a",
+    hair: "#2d2a3b",
+    outfit: "#8b6b37",
+    accent: "#ead6bf",
+    outline: "#231f18"
+  },
+  {
+    skin: "#f0d1b5",
+    hair: "#70462d",
+    outfit: "#667b42",
+    accent: "#dde8c7",
+    outline: "#2a251d"
+  },
+  {
+    skin: "#c98d66",
+    hair: "#3b281f",
+    outfit: "#925a45",
+    accent: "#efdfd1",
+    outline: "#241b16"
+  }
+];
+function hashText(value) {
+  let hash = 0;
+  for (const char of value) {
+    hash = hash * 31 + char.charCodeAt(0) >>> 0;
+  }
+  return hash;
+}
+function rect(x, y, w, h, fill) {
+  return `<rect x="${x}" y="${y}" width="${w}" height="${h}" fill="${fill}" />`;
+}
+function buildPixelAvatarSvg(params) {
+  const seed = hashText(`${params.agentId}:${params.name}`);
+  const palette = PIXEL_PALETTES[seed % PIXEL_PALETTES.length];
+  const hairVariant = seed % 3;
+  const eyeVariant = (seed >> 2) % 2;
+  const accentVariant = (seed >> 4) % 3;
+  const facingUp = params.direction === "up";
+  const facingSide = params.direction === "left" || params.direction === "right";
+  const parts = [
+    `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" shape-rendering="crispEdges">`,
+    rect(0, 0, 16, 16, "transparent"),
+    rect(3, 2, 10, 2, palette.hair),
+    rect(2, 4, 12, 1, palette.hair),
+    rect(3, 5, 10, 5, palette.skin),
+    rect(4, 10, 8, 4, palette.outfit),
+    rect(2, 10, 2, 3, palette.outfit),
+    rect(12, 10, 2, 3, palette.outfit),
+    rect(5, 14, 2, 2, palette.outline),
+    rect(9, 14, 2, 2, palette.outline),
+    rect(4, 11, 1, 3, palette.outline),
+    rect(11, 11, 1, 3, palette.outline),
+    rect(6, 4, 4, 1, palette.accent)
+  ];
+  if (facingUp) {
+    parts.push(
+      rect(3, 4, 10, 5, palette.hair),
+      rect(5, 8, 6, 2, palette.hair),
+      rect(6, 11, 4, 2, palette.accent)
+    );
+  } else if (facingSide) {
+    parts.push(
+      rect(5, 6, 1, 1, palette.outline),
+      rect(9, 7, 2, 1, palette.outline),
+      rect(8, 8, 2, 1, "#9d6f4d"),
+      rect(11, 5, 2, 4, palette.hair)
+    );
+  } else {
+    parts.push(
+      rect(6, 6, 1, 1, palette.outline),
+      rect(9, 6, 1, 1, palette.outline),
+      rect(7, 8, 2, 1, "#9d6f4d")
+    );
+  }
+  if (hairVariant === 0) {
+    parts.push(rect(2, 3, 1, 4, palette.hair), rect(13, 3, 1, 4, palette.hair));
+  } else if (hairVariant === 1) {
+    parts.push(rect(2, 3, 2, 2, palette.hair), rect(12, 3, 2, 2, palette.hair));
+  } else {
+    parts.push(rect(4, 1, 8, 1, palette.hair), rect(3, 2, 1, 2, palette.hair), rect(12, 2, 1, 2, palette.hair));
+  }
+  if (!facingUp && eyeVariant === 1) {
+    parts.push(rect(5, 6, 1, 1, palette.outline), rect(10, 6, 1, 1, palette.outline));
+  }
+  if (accentVariant === 0) {
+    parts.push(rect(6, 11, 4, 1, palette.accent));
+  } else if (accentVariant === 1) {
+    parts.push(rect(4, 12, 8, 1, palette.accent));
+  } else {
+    parts.push(rect(7, 10, 2, 3, palette.accent));
+  }
+  parts.push(rect(4, 9, 1, 1, palette.outline), rect(11, 9, 1, 1, palette.outline), `</svg>`);
+  return parts.join("");
+}
+function svgToDataUri(svg) {
+  return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+}
+function WorkboardPixelAgent(props) {
+  const src = React3.useMemo(
+    () => svgToDataUri(buildPixelAvatarSvg({ agentId: props.agentId, name: props.name, direction: props.direction })),
+    [props.agentId, props.name, props.direction]
+  );
+  const flipped = props.direction === "left";
+  return /* @__PURE__ */ jsxs6(
+    "span",
+    {
+      className: cn(
+        "relative inline-flex overflow-visible",
+        props.faded ? "opacity-65" : "opacity-100",
+        props.className
+      ),
+      style: { width: props.size, height: props.size },
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx19("span", { className: "absolute bottom-[1px] left-1/2 h-[4px] w-[70%] -translate-x-1/2 bg-[rgba(45,36,25,0.24)]" }),
+        /* @__PURE__ */ jsx19(
+          "img",
+          {
+            src,
+            alt: "",
+            width: props.size,
+            height: props.size,
+            draggable: false,
+            className: "h-full w-full [image-rendering:pixelated]",
+            style: {
+              animation: props.walking ? "workboard-sprite-step 0.42s steps(2, end) infinite" : void 0,
+              transform: flipped ? "scaleX(-1)" : void 0
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/workboard-room-layout.ts
+var WORKBOARD_ROOM_PALETTE = {
+  engaged: {
+    floorA: "rgba(217,160,111,0.98)",
+    floorB: "rgba(198,139,94,0.98)",
+    wall: "rgba(107,58,45,0.98)",
+    wallLight: "rgba(154,86,61,0.94)",
+    rug: "rgba(183,69,50,0.72)",
+    rugStrong: "rgba(226,118,77,0.86)",
+    accent: "rgba(39,110,80,0.95)"
+  },
+  steady: {
+    floorA: "rgba(218,190,111,0.98)",
+    floorB: "rgba(197,166,91,0.98)",
+    wall: "rgba(94,76,51,0.98)",
+    wallLight: "rgba(139,113,70,0.94)",
+    rug: "rgba(148,169,72,0.72)",
+    rugStrong: "rgba(188,207,91,0.88)",
+    accent: "rgba(112,132,38,0.92)"
+  },
+  quiet: {
+    floorA: "rgba(205,194,166,0.98)",
+    floorB: "rgba(186,174,148,0.98)",
+    wall: "rgba(89,82,73,0.98)",
+    wallLight: "rgba(126,117,103,0.94)",
+    rug: "rgba(123,132,144,0.62)",
+    rugStrong: "rgba(171,179,186,0.86)",
+    accent: "rgba(103,96,87,0.9)"
+  },
+  drift: {
+    floorA: "rgba(223,166,95,0.98)",
+    floorB: "rgba(202,137,75,0.98)",
+    wall: "rgba(121,66,36,0.98)",
+    wallLight: "rgba(172,94,49,0.94)",
+    rug: "rgba(196,89,44,0.72)",
+    rugStrong: "rgba(236,145,65,0.9)",
+    accent: "rgba(161,91,32,0.92)"
+  }
+};
+var LARGE_ROOM_FLOORS = [
+  { col: 2, row: 3, cols: 8, rows: 6 },
+  { col: 11, row: 3, cols: 8, rows: 6 },
+  { col: 21, row: 3, cols: 8, rows: 6 },
+  { col: 30, row: 3, cols: 8, rows: 6 },
+  { col: 2, row: 15, cols: 8, rows: 7 },
+  { col: 11, row: 15, cols: 8, rows: 7 },
+  { col: 21, row: 15, cols: 8, rows: 7 },
+  { col: 30, row: 15, cols: 8, rows: 7 }
+];
+var LARGE_ROOM_CORRIDORS = [
+  { col: 1, row: 10, cols: 38, rows: 4 },
+  { col: 19, row: 0, cols: 2, rows: 24 },
+  { col: 9, row: 8, cols: 11, rows: 2 },
+  { col: 20, row: 8, cols: 11, rows: 2 },
+  { col: 9, row: 14, cols: 11, rows: 2 },
+  { col: 20, row: 14, cols: 11, rows: 2 }
+];
+var LARGE_ROOM_WALLS = [
+  { col: 1, row: 2, cols: 38, rows: 1 },
+  { col: 1, row: 22, cols: 38, rows: 1 },
+  { col: 1, row: 2, cols: 1, rows: 21 },
+  { col: 38, row: 2, cols: 1, rows: 21 },
+  { col: 10, row: 3, cols: 1, rows: 6 },
+  { col: 20, row: 3, cols: 1, rows: 6 },
+  { col: 29, row: 3, cols: 1, rows: 6 },
+  { col: 10, row: 15, cols: 1, rows: 7 },
+  { col: 20, row: 15, cols: 1, rows: 7 },
+  { col: 29, row: 15, cols: 1, rows: 7 },
+  { col: 2, row: 9, cols: 17, rows: 1 },
+  { col: 21, row: 9, cols: 17, rows: 1 },
+  { col: 2, row: 14, cols: 17, rows: 1 },
+  { col: 21, row: 14, cols: 17, rows: 1 }
+];
+var LARGE_ROOM_DOORS = [
+  { col: 5, row: 9, cols: 2, rows: 1 },
+  { col: 14, row: 9, cols: 2, rows: 1 },
+  { col: 24, row: 9, cols: 2, rows: 1 },
+  { col: 33, row: 9, cols: 2, rows: 1 },
+  { col: 5, row: 14, cols: 2, rows: 1 },
+  { col: 14, row: 14, cols: 2, rows: 1 },
+  { col: 24, row: 14, cols: 2, rows: 1 },
+  { col: 33, row: 14, cols: 2, rows: 1 },
+  { col: 20, row: 5, cols: 1, rows: 2 },
+  { col: 20, row: 17, cols: 1, rows: 2 }
+];
+var LARGE_ROOM_EXTERIOR_PATHS = [
+  { col: 0, row: 10, cols: 40, rows: 4 },
+  { col: 19, row: 0, cols: 2, rows: 24 },
+  { col: 0, row: 0, cols: 6, rows: 1 },
+  { col: 34, row: 0, cols: 6, rows: 1 },
+  { col: 0, row: 23, cols: 6, rows: 1 },
+  { col: 34, row: 23, cols: 6, rows: 1 }
+];
+var LARGE_ROOM_TREES = [
+  { col: 1, row: 2 },
+  { col: 13, row: 1 },
+  { col: 26, row: 1 },
+  { col: 38, row: 2 },
+  { col: 1, row: 22 },
+  { col: 13, row: 22 },
+  { col: 26, row: 22 },
+  { col: 38, row: 22 }
+];
+var LARGE_ROOM_SHRUBS = [
+  { col: 6, row: 1 },
+  { col: 12, row: 9 },
+  { col: 27, row: 9 },
+  { col: 33, row: 1 },
+  { col: 6, row: 22 },
+  { col: 12, row: 14 },
+  { col: 27, row: 14 },
+  { col: 33, row: 22 }
+];
+function createRoomPlan(zoneId) {
+  const focusedRugs = {
+    engaged: [
+      { col: 17, row: 9, cols: 6, rows: 6 },
+      { col: 2, row: 3, cols: 8, rows: 6 },
+      { col: 30, row: 3, cols: 8, rows: 6 }
+    ],
+    steady: [
+      { col: 2, row: 10, cols: 36, rows: 4 },
+      { col: 18, row: 3, cols: 4, rows: 19 }
+    ],
+    quiet: [
+      { col: 17, row: 9, cols: 6, rows: 6 },
+      { col: 2, row: 15, cols: 8, rows: 7 },
+      { col: 30, row: 15, cols: 8, rows: 7 }
+    ],
+    drift: [
+      { col: 16, row: 8, cols: 8, rows: 8 },
+      { col: 2, row: 3, cols: 8, rows: 6 },
+      { col: 30, row: 15, cols: 8, rows: 7 }
+    ]
+  };
+  const focusedProps = {
+    engaged: [
+      { id: "engaged-board", kind: "board", x: 140, y: 654 },
+      { id: "engaged-blueprint", kind: "blueprint", x: 1260, y: 650 },
+      { id: "engaged-console-a", kind: "console", x: 710, y: 158 },
+      { id: "engaged-rack-a", kind: "rack", x: 1352, y: 152 },
+      { id: "engaged-table-a", kind: "table", x: 206, y: 206 },
+      { id: "engaged-table-b", kind: "table", x: 1214, y: 688 }
+    ],
+    steady: [
+      { id: "steady-board", kind: "board", x: 140, y: 654 },
+      { id: "steady-blueprint", kind: "blueprint", x: 1260, y: 650 },
+      { id: "steady-bench-a", kind: "bench", x: 210, y: 200 },
+      { id: "steady-rack-a", kind: "rack", x: 706, y: 156 },
+      { id: "steady-crate-a", kind: "crate", x: 904, y: 682 },
+      { id: "steady-console-a", kind: "console", x: 1326, y: 192 }
+    ],
+    quiet: [
+      { id: "quiet-board", kind: "board", x: 140, y: 654 },
+      { id: "quiet-blueprint", kind: "blueprint", x: 1260, y: 650 },
+      { id: "quiet-bed-a", kind: "bed", x: 196, y: 182 },
+      { id: "quiet-bed-b", kind: "bed", x: 1292, y: 182 },
+      { id: "quiet-bed-c", kind: "bed", x: 684, y: 684 },
+      { id: "quiet-plant-a", kind: "plant", x: 906, y: 166 }
+    ],
+    drift: [
+      { id: "drift-board", kind: "board", x: 140, y: 654 },
+      { id: "drift-blueprint", kind: "blueprint", x: 1260, y: 650 },
+      { id: "drift-console-a", kind: "console", x: 706, y: 156 },
+      { id: "drift-rack-a", kind: "rack", x: 1328, y: 190 },
+      { id: "drift-crate-a", kind: "crate", x: 210, y: 684 },
+      { id: "drift-bench-a", kind: "bench", x: 1190, y: 686 }
+    ]
+  };
+  return {
+    floors: LARGE_ROOM_FLOORS,
+    corridors: LARGE_ROOM_CORRIDORS,
+    rugs: focusedRugs[zoneId],
+    walls: LARGE_ROOM_WALLS,
+    doors: LARGE_ROOM_DOORS,
+    exteriorPaths: LARGE_ROOM_EXTERIOR_PATHS,
+    trees: LARGE_ROOM_TREES,
+    shrubs: LARGE_ROOM_SHRUBS,
+    props: focusedProps[zoneId]
+  };
+}
+var WORKBOARD_ROOM_PLANS = {
+  engaged: createRoomPlan("engaged"),
+  steady: createRoomPlan("steady"),
+  quiet: createRoomPlan("quiet"),
+  drift: createRoomPlan("drift")
+};
+var WORKBOARD_FOCUSED_STATIONS_BY_ZONE = {
+  engaged: [
+    { x: 250, y: 206 },
+    { x: 686, y: 194 },
+    { x: 1236, y: 206 },
+    { x: 360, y: 460 },
+    { x: 940, y: 460 },
+    { x: 250, y: 714 },
+    { x: 686, y: 730 },
+    { x: 1236, y: 714 }
+  ],
+  steady: [
+    { x: 246, y: 196 },
+    { x: 668, y: 206 },
+    { x: 934, y: 206 },
+    { x: 1350, y: 196 },
+    { x: 366, y: 480 },
+    { x: 250, y: 728 },
+    { x: 800, y: 730 },
+    { x: 1350, y: 728 }
+  ],
+  quiet: [
+    { x: 250, y: 206 },
+    { x: 688, y: 206 },
+    { x: 1238, y: 206 },
+    { x: 360, y: 480 },
+    { x: 940, y: 480 },
+    { x: 250, y: 714 },
+    { x: 688, y: 730 },
+    { x: 1238, y: 714 }
+  ],
+  drift: [
+    { x: 250, y: 206 },
+    { x: 688, y: 194 },
+    { x: 1238, y: 206 },
+    { x: 360, y: 480 },
+    { x: 940, y: 480 },
+    { x: 250, y: 714 },
+    { x: 800, y: 730 },
+    { x: 1238, y: 714 }
+  ]
+};
+var WORKBOARD_FOCUSED_PATROL_ROUTES = {
+  engaged: [
+    [
+      { x: 240, y: 200 },
+      { x: 800, y: 200 },
+      { x: 1360, y: 200 },
+      { x: 1360, y: 480 },
+      { x: 1360, y: 720 },
+      { x: 800, y: 720 },
+      { x: 240, y: 720 },
+      { x: 240, y: 480 }
+    ],
+    [
+      { x: 420, y: 320 },
+      { x: 800, y: 320 },
+      { x: 1180, y: 320 },
+      { x: 1180, y: 480 },
+      { x: 1180, y: 620 },
+      { x: 800, y: 620 },
+      { x: 420, y: 620 },
+      { x: 420, y: 480 }
+    ],
+    [
+      { x: 240, y: 480 },
+      { x: 800, y: 480 },
+      { x: 1360, y: 480 },
+      { x: 800, y: 480 },
+      { x: 800, y: 200 },
+      { x: 800, y: 720 },
+      { x: 800, y: 480 }
+    ]
+  ],
+  steady: [
+    [
+      { x: 240, y: 480 },
+      { x: 800, y: 480 },
+      { x: 1360, y: 480 },
+      { x: 1360, y: 720 },
+      { x: 800, y: 720 },
+      { x: 240, y: 720 }
+    ],
+    [
+      { x: 240, y: 200 },
+      { x: 800, y: 200 },
+      { x: 1360, y: 200 },
+      { x: 1360, y: 480 },
+      { x: 800, y: 480 },
+      { x: 240, y: 480 }
+    ],
+    [
+      { x: 800, y: 160 },
+      { x: 800, y: 800 },
+      { x: 1080, y: 800 },
+      { x: 1080, y: 480 },
+      { x: 520, y: 480 },
+      { x: 520, y: 800 },
+      { x: 800, y: 800 }
+    ]
+  ],
+  quiet: [
+    [
+      { x: 240, y: 200 },
+      { x: 800, y: 200 },
+      { x: 1360, y: 200 },
+      { x: 1360, y: 720 },
+      { x: 800, y: 720 },
+      { x: 240, y: 720 }
+    ],
+    [
+      { x: 420, y: 480 },
+      { x: 800, y: 480 },
+      { x: 1180, y: 480 },
+      { x: 1180, y: 640 },
+      { x: 800, y: 640 },
+      { x: 420, y: 640 }
+    ],
+    [
+      { x: 800, y: 200 },
+      { x: 800, y: 720 },
+      { x: 420, y: 720 },
+      { x: 420, y: 480 },
+      { x: 1180, y: 480 },
+      { x: 1180, y: 720 },
+      { x: 800, y: 720 }
+    ]
+  ],
+  drift: [
+    [
+      { x: 240, y: 200 },
+      { x: 800, y: 200 },
+      { x: 1360, y: 200 },
+      { x: 1360, y: 620 },
+      { x: 800, y: 720 },
+      { x: 240, y: 620 }
+    ],
+    [
+      { x: 240, y: 480 },
+      { x: 800, y: 480 },
+      { x: 1360, y: 480 },
+      { x: 1360, y: 720 },
+      { x: 800, y: 720 },
+      { x: 240, y: 720 }
+    ],
+    [
+      { x: 800, y: 160 },
+      { x: 800, y: 720 },
+      { x: 1080, y: 620 },
+      { x: 1080, y: 320 },
+      { x: 520, y: 320 },
+      { x: 520, y: 620 },
+      { x: 800, y: 720 }
+    ]
+  ]
+};
+
+// src/components/workboard-stage.tsx
+import { Fragment, jsx as jsx20, jsxs as jsxs7 } from "react/jsx-runtime";
+var WORKBOARD_STAGE_HEIGHT = 960;
+var WORKBOARD_STAGE_WIDTH = 1600;
+var NODE_PLACEMENTS = [
+  { left: 18, top: 26, delay: 0 },
+  { left: 42, top: 19, delay: 0.4 },
+  { left: 66, top: 29, delay: 0.8 },
+  { left: 29, top: 54, delay: 1.2 },
+  { left: 57, top: 56, delay: 1.6 },
+  { left: 75, top: 47, delay: 2 },
+  { left: 14, top: 70, delay: 2.4 },
+  { left: 46, top: 74, delay: 2.8 }
+];
+var WORKBOARD_ZONE_DEFINITIONS = [
+  {
+    id: "engaged",
+    title: "\u5C55\u5F00\u4E2D",
+    subtitle: "active field",
+    description: "\u5F53\u524D\u5BF9\u5916\u6700\u6709\u52A8\u52BF\u7684\u4E00\u7EC4 agent\u3002",
+    badge: "Live",
+    areaClassName: "bg-[linear-gradient(145deg,rgba(238,248,244,0.92),rgba(248,251,249,0.78))]",
+    borderClassName: "border-emerald-300/65",
+    glowClassName: "bg-[radial-gradient(circle,rgba(52,144,111,0.18),transparent_70%)]",
+    nodeClassName: "border-emerald-300/70 bg-[linear-gradient(145deg,rgba(248,252,250,0.98),rgba(235,247,242,0.94))]",
+    lineClassName: "stroke-emerald-400/55"
+  },
+  {
+    id: "steady",
+    title: "\u6301\u7EED\u63A8\u8FDB",
+    subtitle: "steady lane",
+    description: "\u5904\u4E8E\u7A33\u5B9A\u8282\u594F\uFF0C\u6301\u7EED\u5411\u524D\u63A8\u8FDB\u7684\u4E00\u7EC4 agent\u3002",
+    badge: "Steady",
+    areaClassName: "bg-[linear-gradient(145deg,rgba(244,246,236,0.9),rgba(252,250,244,0.75))]",
+    borderClassName: "border-lime-300/60",
+    glowClassName: "bg-[radial-gradient(circle,rgba(151,169,72,0.16),transparent_72%)]",
+    nodeClassName: "border-lime-300/65 bg-[linear-gradient(145deg,rgba(252,252,247,0.98),rgba(243,246,233,0.95))]",
+    lineClassName: "stroke-lime-400/50"
+  },
+  {
+    id: "quiet",
+    title: "\u9759\u5019\u4E2D",
+    subtitle: "quiet deck",
+    description: "\u6682\u65F6\u5B89\u9759\u3001\u7B49\u5F85\u4E0B\u4E00\u6B21\u89E6\u53D1\u7684\u4E00\u7EC4 agent\u3002",
+    badge: "Quiet",
+    areaClassName: "bg-[linear-gradient(145deg,rgba(244,243,239,0.92),rgba(251,250,248,0.76))]",
+    borderClassName: "border-stone-300/65",
+    glowClassName: "bg-[radial-gradient(circle,rgba(130,124,112,0.14),transparent_72%)]",
+    nodeClassName: "border-stone-300/65 bg-[linear-gradient(145deg,rgba(252,251,249,0.98),rgba(241,239,234,0.96))]",
+    lineClassName: "stroke-stone-400/50"
+  },
+  {
+    id: "drift",
+    title: "\u8F7B\u5FAE\u6CE2\u52A8",
+    subtitle: "watch deck",
+    description: "\u51FA\u73B0\u4E2D\u65AD\u3001\u544A\u8B66\u6216\u9700\u8981\u91CD\u65B0\u89C2\u5BDF\u7684\u4E00\u7EC4 agent\u3002",
+    badge: "Watch",
+    areaClassName: "bg-[linear-gradient(145deg,rgba(251,241,235,0.92),rgba(252,248,244,0.76))]",
+    borderClassName: "border-amber-300/70",
+    glowClassName: "bg-[radial-gradient(circle,rgba(194,121,55,0.18),transparent_72%)]",
+    nodeClassName: "border-amber-300/70 bg-[linear-gradient(145deg,rgba(253,250,245,0.98),rgba(249,239,229,0.95))]",
+    lineClassName: "stroke-amber-400/55"
+  }
+];
+function createHoverTag(params) {
+  return {
+    id: params.id,
+    label: params.label,
+    x: params.point.x,
+    y: params.point.y
+  };
+}
+function resolveAgentGlyph(item) {
+  const hasIssue = item.snapshot.current.some((entry) => entry.status === "issue") || item.snapshot.recent.some((entry) => entry.status === "issue") || item.snapshot.signals.some((entry) => entry.tone === "warning");
+  if (hasIssue) {
+    return {
+      label: "!",
+      className: "border-amber-700/50 bg-amber-400 text-amber-950"
+    };
+  }
+  if (item.snapshot.current.some((entry) => entry.status === "active")) {
+    return {
+      label: ">",
+      className: "border-emerald-700/45 bg-emerald-400 text-emerald-950"
+    };
+  }
+  if (item.running) {
+    return {
+      label: "~",
+      className: "border-lime-700/45 bg-lime-300 text-lime-950"
+    };
+  }
+  return {
+    label: ".",
+    className: "border-stone-500/45 bg-stone-300 text-stone-800"
+  };
+}
+function resolveZoneId(item) {
+  const hasIssue = item.snapshot.current.some((entry) => entry.status === "issue") || item.snapshot.recent.some((entry) => entry.status === "issue") || item.snapshot.signals.some((entry) => entry.tone === "warning");
+  if (hasIssue) return "drift";
+  const hasActive = item.snapshot.current.some((entry) => entry.status === "active");
+  if (hasActive) return "engaged";
+  const hasRecentMotion = item.running && (item.snapshot.current.length > 0 || item.snapshot.recent.length > 0 || item.currentCount > 0);
+  if (hasRecentMotion) return "steady";
+  return "quiet";
+}
+function resolveZoneDefinition(zoneId) {
+  return WORKBOARD_ZONE_DEFINITIONS.find((item) => item.id === zoneId) || WORKBOARD_ZONE_DEFINITIONS[0];
+}
+function formatWorkboardRelativeTime(value) {
+  if (!value) return "-";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  const delta = Math.max(0, Date.now() - date.getTime());
+  const minutes = Math.floor(delta / 6e4);
+  if (minutes < 1) return "just now";
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+function buildWorkboardTilePath(params) {
+  const midX = params.from.x + (params.to.x - params.from.x) * 0.5;
+  return `M ${params.from.x} ${params.from.y} H ${midX} V ${params.to.y} H ${params.to.x}`;
+}
+function toStagePoint(zoneId, placement) {
+  const zone = WORKBOARD_ZONE_LAYOUT[zoneId];
+  const left = zone.x + zone.w * placement.left / 100;
+  const top = zone.y + zone.h * placement.top / 100;
+  return {
+    x: left / 100 * WORKBOARD_STAGE_WIDTH,
+    y: top / 100 * WORKBOARD_STAGE_HEIGHT
+  };
+}
+function toZoneHubPoint(zoneId) {
+  const zone = WORKBOARD_ZONE_LAYOUT[zoneId];
+  return {
+    x: zone.hubX / 100 * WORKBOARD_STAGE_WIDTH,
+    y: zone.hubY / 100 * WORKBOARD_STAGE_HEIGHT
+  };
+}
+function deriveStageNodes(board) {
+  const items = board?.agents || [];
+  const buckets = /* @__PURE__ */ new Map();
+  items.forEach((item) => {
+    const zoneId = resolveZoneId(item);
+    const group = buckets.get(zoneId) || [];
+    group.push(item);
+    buckets.set(zoneId, group);
+  });
+  return WORKBOARD_ZONE_DEFINITIONS.flatMap((zone) => {
+    const group = buckets.get(zone.id) || [];
+    return group.map((item, index) => ({
+      item,
+      zone,
+      placement: NODE_PLACEMENTS[index % NODE_PLACEMENTS.length]
+    }));
+  });
+}
+function deriveFocusedClusterNodes(items, zoneId) {
+  const stations = WORKBOARD_FOCUSED_STATIONS_BY_ZONE[zoneId];
+  return items.map((item, index) => {
+    const station = stations[index % stations.length];
+    return {
+      item,
+      x: station.x,
+      y: station.y,
+      delay: index * 0.18
+    };
+  });
+}
+function buildOverviewPatrolRoute(params) {
+  const anchor = toStagePoint(params.zoneId, params.placement);
+  const hub = toZoneHubPoint(params.zoneId);
+  const gate = WORKBOARD_ZONE_GATE_POINTS[params.zoneId];
+  const laneIndex = Math.round((params.placement.left + params.placement.top) / 32) % 3;
+  const laneOffset = (laneIndex - 1) * 10;
+  const roadY = params.zoneId === "engaged" || params.zoneId === "steady" ? 460 : 500;
+  const plazaLane = {
+    x: WORKBOARD_TOWN_PLAZA_POINT.x + laneOffset,
+    y: WORKBOARD_TOWN_PLAZA_POINT.y + (roadY < WORKBOARD_TOWN_PLAZA_POINT.y ? -10 : 10)
+  };
+  return [
+    anchor,
+    { x: anchor.x, y: hub.y },
+    hub,
+    { x: gate.x, y: hub.y },
+    gate,
+    { x: gate.x, y: roadY },
+    { x: plazaLane.x, y: roadY },
+    plazaLane,
+    WORKBOARD_TOWN_PLAZA_POINT,
+    plazaLane,
+    { x: plazaLane.x, y: roadY },
+    { x: gate.x, y: roadY },
+    gate,
+    { x: gate.x, y: hub.y },
+    hub,
+    { x: anchor.x, y: hub.y },
+    anchor
+  ];
+}
+function buildFocusedPatrolRoute(params) {
+  const routes = WORKBOARD_FOCUSED_PATROL_ROUTES[params.zoneId];
+  return routes[params.index % routes.length];
+}
+function WorkboardStageZone(props) {
+  const layout = WORKBOARD_ZONE_LAYOUT[props.zone.id];
+  const hubPoint = {
+    x: layout.hubX / 100 * WORKBOARD_STAGE_WIDTH,
+    y: layout.hubY / 100 * WORKBOARD_STAGE_HEIGHT
+  };
+  return /* @__PURE__ */ jsx20(
+    "button",
+    {
+      type: "button",
+      onClick: () => props.onSelect?.(props.zone.id),
+      onMouseEnter: () => props.onHoverChange?.(
+        createHoverTag({
+          id: `zone-${props.zone.id}`,
+          label: `${props.zone.title} \xB7 ${props.count}`,
+          point: { x: hubPoint.x + 24, y: hubPoint.y - 18 }
+        })
+      ),
+      onMouseLeave: () => props.onHoverChange?.(null),
+      onFocus: () => props.onHoverChange?.(
+        createHoverTag({
+          id: `zone-${props.zone.id}`,
+          label: `${props.zone.title} \xB7 ${props.count}`,
+          point: { x: hubPoint.x + 24, y: hubPoint.y - 18 }
+        })
+      ),
+      onBlur: () => props.onHoverChange?.(null),
+      className: "absolute z-10 bg-transparent text-left focus:outline-none",
+      "aria-label": `${props.zone.title} ${props.count}`,
+      style: {
+        left: `${layout.x}%`,
+        top: `${layout.y}%`,
+        width: `${layout.w}%`,
+        height: `${layout.h}%`,
+        clipPath: "polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) calc(100% - 16px),calc(100% - 16px) 100%,0 100%)"
+      }
+    }
+  );
+}
+function WorkboardStageAgentNode(props) {
+  const compact = props.mode === "overview";
+  const avatarSize = compact ? 28 : 36;
+  const direction = "direction" in props.point ? props.point.direction : void 0;
+  const walking = "state" in props.point ? props.point.state === "walking" : false;
+  const glyph = resolveAgentGlyph(props.item);
+  return /* @__PURE__ */ jsx20(
+    "button",
+    {
+      type: "button",
+      onClick: () => props.onSelect?.(props.item.id),
+      onMouseEnter: () => props.onHoverChange?.(
+        createHoverTag({
+          id: `agent-${props.item.id}`,
+          label: `${props.item.name} \xB7 ${props.item.posture}`,
+          point: props.point
+        })
+      ),
+      onMouseLeave: () => props.onHoverChange?.(null),
+      onFocus: () => props.onHoverChange?.(
+        createHoverTag({
+          id: `agent-${props.item.id}`,
+          label: `${props.item.name} \xB7 ${props.item.posture}`,
+          point: props.point
+        })
+      ),
+      onBlur: () => props.onHoverChange?.(null),
+      className: cn(
+        "group absolute z-20 -translate-x-1/2 -translate-y-1/2 transition-all duration-300 focus:outline-none",
+        props.active ? "scale-[1.08]" : "hover:scale-[1.04] focus-visible:scale-[1.04]",
+        props.faded ? "opacity-30 saturate-50" : "opacity-100"
+      ),
+      style: {
+        left: props.point.x,
+        top: props.point.y
+      },
+      "aria-label": props.item.name,
+      children: /* @__PURE__ */ jsxs7("span", { className: "relative block", children: [
+        props.active ? /* @__PURE__ */ jsxs7(Fragment, { children: [
+          /* @__PURE__ */ jsx20(
+            "span",
+            {
+              className: "pointer-events-none absolute -inset-2 border border-foreground/45",
+              style: { animation: "workboard-pulse 1.6s steps(2, end) infinite" }
+            }
+          ),
+          /* @__PURE__ */ jsx20("span", { className: "pointer-events-none absolute -left-1 -top-1 h-1.5 w-1.5 bg-foreground/70" }),
+          /* @__PURE__ */ jsx20("span", { className: "pointer-events-none absolute -right-1 -bottom-1 h-1.5 w-1.5 bg-foreground/60" })
+        ] }) : null,
+        !props.active && !props.faded ? /* @__PURE__ */ jsx20("span", { className: "pointer-events-none absolute -inset-1 border border-foreground/22 opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-visible:opacity-100" }) : null,
+        /* @__PURE__ */ jsx20(
+          WorkboardPixelAgent,
+          {
+            agentId: props.item.id,
+            name: props.item.name,
+            size: avatarSize,
+            active: props.active,
+            faded: props.faded,
+            direction,
+            walking,
+            className: cn(
+              props.active ? "shadow-[0_0_0_1px_rgba(17,17,19,0.14),0_3px_0_rgba(17,17,19,0.22)]" : "",
+              compact ? "" : "scale-[1.03]"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx20(
+          "span",
+          {
+            className: cn(
+              "absolute -bottom-1 -right-1 grid size-3 place-items-center border text-[8px] font-bold leading-none",
+              glyph.className
+            ),
+            "aria-hidden": "true",
+            children: glyph.label
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/components/workboard-game-atlas.tsx
+import { jsx as jsx21, jsxs as jsxs8 } from "react/jsx-runtime";
+var PIXEL_PANEL_CLIP = "polygon(0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 0px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px))";
+function WorkboardAtlasPortalSign(props) {
+  const zone = props.zones.find((item) => item.id === props.activeZoneId) || props.zones[0];
+  if (!zone) return null;
+  const point = toZoneHubPoint(zone.id);
+  const left = Math.min(Math.max(point.x + 22, 18), WORKBOARD_STAGE_WIDTH - 198);
+  const top = Math.min(Math.max(point.y - 54, 76), WORKBOARD_STAGE_HEIGHT - 120);
+  return /* @__PURE__ */ jsxs8(
+    "button",
+    {
+      type: "button",
+      onClick: () => props.onSelectZone(zone.id),
+      className: "absolute z-30 w-40 border-[3px] border-[#6e4d2f] bg-[#f8de8d] px-3 py-2 text-left shadow-[5px_5px_0_rgba(72,50,33,0.28)] transition-[filter,transform] hover:-translate-y-0.5 hover:brightness-105 focus:outline-none focus-visible:-translate-y-0.5",
+      style: { left, top, clipPath: PIXEL_PANEL_CLIP },
+      children: [
+        /* @__PURE__ */ jsx21("span", { className: "absolute left-3 top-full h-5 w-2 bg-[#6e4d2f]" }),
+        /* @__PURE__ */ jsx21("span", { className: "absolute right-3 top-full h-5 w-2 bg-[#6e4d2f]" }),
+        /* @__PURE__ */ jsx21("span", { className: "block text-[9px] uppercase tracking-[0.18em] text-[#6e4d2f]/70", children: "zone gate" }),
+        /* @__PURE__ */ jsx21("span", { className: "mt-1 block truncate text-sm font-semibold leading-5 tracking-[-0.04em] text-[#352516]", children: zone.title }),
+        /* @__PURE__ */ jsxs8("span", { className: "mt-1 grid grid-cols-[1fr_auto] items-center gap-2", children: [
+          /* @__PURE__ */ jsx21("span", { className: "h-2 border border-[#6e4d2f]/35 bg-[#fff1bd]", children: /* @__PURE__ */ jsx21(
+            "span",
+            {
+              className: "block h-full bg-[#6e4d2f]/70",
+              style: { width: `${Math.max(8, Math.min(100, zone.count * 18))}%` }
+            }
+          ) }),
+          /* @__PURE__ */ jsx21("span", { className: "text-[10px] font-semibold text-[#6e4d2f]/75", children: zone.count })
+        ] })
+      ]
+    }
+  );
+}
+function WorkboardGameAtlas(props) {
+  const [hoveredTag, setHoveredTag] = React4.useState(null);
+  const zones = props.gameMap.zones;
+  const actors = props.gameMap.actors;
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      className: "relative overflow-hidden border-2 border-border/70 bg-[linear-gradient(145deg,rgba(251,250,247,0.96),rgba(245,248,245,0.88))]",
+      style: { width: WORKBOARD_STAGE_WIDTH, height: WORKBOARD_STAGE_HEIGHT, clipPath: PIXEL_PANEL_CLIP, imageRendering: "pixelated" },
+      children: [
+        /* @__PURE__ */ jsxs8("div", { className: "absolute left-3 top-3 z-20 px-1", children: [
+          /* @__PURE__ */ jsx21("div", { className: "text-[10px] uppercase tracking-[0.2em] text-foreground/42", children: "world atlas" }),
+          /* @__PURE__ */ jsx21("div", { className: "mt-1 text-[11px] text-foreground/66", children: "enter a zone" })
+        ] }),
+        /* @__PURE__ */ jsx21(
+          "div",
+          {
+            className: "absolute right-3 top-3 z-20 border border-border/50 bg-background/72 px-2 py-1 text-right",
+            style: { clipPath: PIXEL_PANEL_CLIP },
+            children: /* @__PURE__ */ jsx21("div", { className: "text-[10px] uppercase tracking-[0.16em] text-foreground/42", children: props.flowMode })
+          }
+        ),
+        /* @__PURE__ */ jsx21(PixelAtlasMap, { zones, stageWidth: WORKBOARD_STAGE_WIDTH, stageHeight: WORKBOARD_STAGE_HEIGHT }),
+        zones.map((zone) => /* @__PURE__ */ jsx21(
+          WorkboardStageZone,
+          {
+            zone: resolveZoneDefinition(zone.id),
+            count: zone.count,
+            active: zone.id === props.activeZoneId,
+            onSelect: props.onSelectZone,
+            onHoverChange: setHoveredTag
+          },
+          zone.id
+        )),
+        /* @__PURE__ */ jsx21(
+          WorkboardAtlasPortalSign,
+          {
+            activeZoneId: props.activeZoneId,
+            zones,
+            onSelectZone: props.onSelectZone
+          }
+        ),
+        /* @__PURE__ */ jsxs8(
+          "svg",
+          {
+            viewBox: `0 0 ${WORKBOARD_STAGE_WIDTH} ${WORKBOARD_STAGE_HEIGHT}`,
+            className: "pointer-events-none absolute inset-0 h-full w-full",
+            preserveAspectRatio: "xMidYMid meet",
+            "aria-hidden": "true",
+            children: [
+              props.gameMap.corridors.map((route) => /* @__PURE__ */ jsx21(
+                PixelRoute,
+                {
+                  points: route.points,
+                  className: cn("stroke-foreground/8", route.active ? "opacity-100" : "opacity-60"),
+                  dashed: true
+                },
+                route.id
+              )),
+              actors.map((actor) => {
+                const faded = actor.zoneId !== props.activeZoneId;
+                return /* @__PURE__ */ jsxs8("g", { opacity: faded ? 0.18 : 0.72, children: [
+                  /* @__PURE__ */ jsx21(
+                    "rect",
+                    {
+                      x: actor.overviewGate.x - 5,
+                      y: actor.overviewGate.y - 5,
+                      width: "10",
+                      height: "10",
+                      fill: "rgba(255,252,247,0.92)",
+                      stroke: "rgba(17,17,19,0.36)",
+                      strokeWidth: "2"
+                    }
+                  ),
+                  props.selectedAgentId === actor.id ? /* @__PURE__ */ jsx21(
+                    "rect",
+                    {
+                      x: actor.overviewGate.x - 9,
+                      y: actor.overviewGate.y - 9,
+                      width: "18",
+                      height: "18",
+                      fill: "none",
+                      stroke: "rgba(17,17,19,0.42)",
+                      strokeWidth: "2",
+                      strokeDasharray: "3 4"
+                    }
+                  ) : null
+                ] }, `gate-${actor.id}`);
+              })
+            ]
+          }
+        ),
+        actors.map((actor) => /* @__PURE__ */ jsx21(
+          WorkboardStageAgentNode,
+          {
+            item: actor.agent,
+            zone: resolveZoneDefinition(actor.zoneId),
+            point: props.motionFrames[actor.id] || actor.overviewAnchor,
+            active: props.selectedAgentId === actor.id,
+            faded: actor.zoneId !== props.activeZoneId,
+            mode: "overview",
+            onSelect: (agentId) => props.onSelectAgent?.(agentId, actor.zoneId),
+            onHoverChange: setHoveredTag
+          },
+          actor.id
+        )),
+        /* @__PURE__ */ jsx21(
+          "svg",
+          {
+            viewBox: `0 0 ${WORKBOARD_STAGE_WIDTH} ${WORKBOARD_STAGE_HEIGHT}`,
+            className: "pointer-events-none absolute inset-0 h-full w-full",
+            preserveAspectRatio: "xMidYMid meet",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx21(PixelHoverTag, { tag: hoveredTag, stageWidth: WORKBOARD_STAGE_WIDTH, stageHeight: WORKBOARD_STAGE_HEIGHT })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/workboard-game-inspector.tsx
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import {
+  AnimatedPxlKitIcon,
+  PxlKitIcon,
+  isAnimatedIcon
+} from "@pxlkit/core";
+import { RadarPing } from "@pxlkit/effects";
+import { Clock as PixelClock, Sparkles as PixelSparkles, WarningTriangle } from "@pxlkit/feedback";
+import { Crown } from "@pxlkit/gamification";
+import { jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
+var PIXEL_PANEL_CLIP2 = "polygon(0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 0px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px))";
+function activityIcon(kind) {
+  if (kind === "focus") return Crown;
+  if (kind === "progress") return RadarPing;
+  return PixelClock;
+}
+function ActivityLine(props) {
+  const icon = activityIcon(props.item.kind);
+  return /* @__PURE__ */ jsxs9("li", { className: "flex items-start gap-2 border-b border-border/50 py-2 last:border-b-0", children: [
+    /* @__PURE__ */ jsx22("span", { className: "mt-0.5 inline-flex size-5 items-center justify-center border border-border/60 bg-background/82 text-foreground/70", children: isAnimatedIcon(icon) ? /* @__PURE__ */ jsx22(AnimatedPxlKitIcon, { icon, size: 14, colorful: true, speed: 0.8 }) : /* @__PURE__ */ jsx22(PxlKitIcon, { icon, size: 14, colorful: true }) }),
+    /* @__PURE__ */ jsxs9("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "flex flex-wrap items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx22("span", { className: "text-sm font-medium text-foreground", children: props.item.title }),
+        /* @__PURE__ */ jsx22("span", { className: "border border-border/50 bg-background/72 px-1.5 py-0.5 text-[10px] uppercase tracking-[0.12em] text-foreground/54", children: props.item.status })
+      ] }),
+      /* @__PURE__ */ jsx22("div", { className: "mt-1 text-sm leading-6 text-muted-foreground", children: props.item.summary })
+    ] })
+  ] });
+}
+function CueLine(props) {
+  return /* @__PURE__ */ jsxs9(
+    "li",
+    {
+      className: cn(
+        "flex items-start justify-between gap-3 border-b border-border/50 py-2 text-sm last:border-b-0",
+        props.item.tone === "warning" ? "text-amber-800" : "text-foreground"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs9("span", { className: "inline-flex items-center gap-1.5 text-foreground/48", children: [
+          props.item.tone === "warning" ? /* @__PURE__ */ jsx22(PxlKitIcon, { icon: WarningTriangle, size: 12, colorful: true }) : /* @__PURE__ */ jsx22(PxlKitIcon, { icon: PixelSparkles, size: 12, colorful: true }),
+          props.item.label
+        ] }),
+        /* @__PURE__ */ jsx22("span", { className: "border border-border/50 bg-background/72 px-1.5 py-0.5 font-medium", children: props.item.value })
+      ]
+    }
+  );
+}
+function PixelStat(props) {
+  return /* @__PURE__ */ jsxs9("div", { className: "border border-border/60 bg-background/72 px-2 py-1.5", children: [
+    /* @__PURE__ */ jsx22("div", { className: "text-[10px] uppercase tracking-[0.14em] text-foreground/42", children: props.label }),
+    /* @__PURE__ */ jsx22("div", { className: "mt-1 text-sm font-medium text-foreground", children: props.value })
+  ] });
+}
+function SpriteRoster(props) {
+  const visiblePeers = props.peers.filter((item) => item.id !== props.selectedAgentId).slice(0, 6);
+  if (visiblePeers.length === 0) {
+    return /* @__PURE__ */ jsx22("div", { className: "border border-dashed border-border/70 bg-background/70 px-3 py-2 text-sm text-muted-foreground", children: "\u5F53\u524D\u533A\u57DF\u6CA1\u6709\u5176\u4ED6 sprite\u3002" });
+  }
+  return /* @__PURE__ */ jsx22("div", { className: "grid gap-1.5", children: visiblePeers.map((item, index) => /* @__PURE__ */ jsxs9(
+    "button",
+    {
+      type: "button",
+      onClick: () => props.onSelectAgent?.(item.id),
+      className: "inline-flex items-center justify-between gap-2 border border-border/70 bg-background/90 px-2 py-1.5 text-sm text-foreground transition-colors hover:border-foreground/20",
+      children: [
+        /* @__PURE__ */ jsxs9("span", { className: "inline-flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx22("span", { className: "inline-flex h-5 min-w-5 items-center justify-center border border-border/60 bg-background/72 px-1 text-[10px] uppercase tracking-[0.12em] text-foreground/54", children: index + 1 }),
+          /* @__PURE__ */ jsx22(WorkboardPixelAgent, { agentId: item.id, name: item.name, size: 18 }),
+          /* @__PURE__ */ jsx22("span", { children: item.name })
+        ] }),
+        /* @__PURE__ */ jsx22("span", { className: "text-[10px] uppercase tracking-[0.12em] text-foreground/42", children: item.momentum })
+      ]
+    },
+    item.id
+  )) });
+}
+function WorkboardGameInspector(props) {
+  return /* @__PURE__ */ jsx22("aside", { className: "absolute bottom-3 right-3 z-30 w-[min(420px,calc(100%-24px))]", children: /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      className: "relative border-2 border-border/70 bg-[rgba(255,252,247,0.94)] shadow-[0_6px_0_rgba(17,17,19,0.12)] backdrop-blur-[1px]",
+      style: { clipPath: PIXEL_PANEL_CLIP2 },
+      children: [
+        /* @__PURE__ */ jsx22("span", { className: "pointer-events-none absolute left-2 top-2 h-2 w-2 bg-foreground/16" }),
+        /* @__PURE__ */ jsx22("span", { className: "pointer-events-none absolute right-2 top-2 h-2 w-2 bg-foreground/10" }),
+        /* @__PURE__ */ jsx22("span", { className: "pointer-events-none absolute bottom-2 left-2 h-2 w-2 bg-foreground/10" }),
+        /* @__PURE__ */ jsxs9(
+          "button",
+          {
+            type: "button",
+            onClick: props.onToggleCollapsed,
+            className: "flex w-full items-center justify-between px-3 py-2 text-left",
+            "aria-expanded": !props.collapsed,
+            children: [
+              /* @__PURE__ */ jsx22("span", { className: "text-xs uppercase tracking-[0.16em] text-foreground/46", children: "codex log" }),
+              /* @__PURE__ */ jsxs9("span", { className: "inline-flex items-center gap-1 text-xs text-foreground/56", children: [
+                props.collapsed ? "Open" : "Close",
+                props.collapsed ? /* @__PURE__ */ jsx22(ChevronUpIcon, { className: "size-3.5" }) : /* @__PURE__ */ jsx22(ChevronDownIcon, { className: "size-3.5" })
+              ] })
+            ]
+          }
+        ),
+        !props.collapsed ? /* @__PURE__ */ jsxs9("div", { className: "border-t-2 border-border/70 px-3 pb-3 pt-2", children: [
+          /* @__PURE__ */ jsxs9("div", { className: "border border-border/60 bg-background/72 px-2.5 py-2", children: [
+            /* @__PURE__ */ jsxs9("div", { className: "flex items-start justify-between gap-3", children: [
+              /* @__PURE__ */ jsxs9("div", { children: [
+                /* @__PURE__ */ jsx22("p", { className: "text-[10px] uppercase tracking-[0.16em] text-foreground/42", children: "active zone" }),
+                /* @__PURE__ */ jsx22("h3", { className: "mt-1 text-xl font-semibold tracking-[-0.04em] text-foreground", children: props.activeZone.title })
+              ] }),
+              /* @__PURE__ */ jsx22("span", { className: "border border-border/60 bg-background px-1.5 py-0.5 text-[10px] uppercase tracking-[0.14em] text-foreground/52", children: props.stageLevel === "clusters" ? "world" : "room" })
+            ] }),
+            /* @__PURE__ */ jsx22("p", { className: "mt-2 text-sm leading-6 text-muted-foreground", children: props.activeZone.description }),
+            /* @__PURE__ */ jsx22("p", { className: "mt-1 text-[11px] uppercase tracking-[0.14em] text-foreground/42", children: props.activeZone.subtitle })
+          ] }),
+          /* @__PURE__ */ jsxs9("div", { className: "mt-3", children: [
+            /* @__PURE__ */ jsx22("p", { className: "text-xs uppercase tracking-[0.12em] text-foreground/46", children: "nearby sprites" }),
+            /* @__PURE__ */ jsx22("div", { className: "mt-2 max-h-28 overflow-auto pr-1", children: /* @__PURE__ */ jsx22(
+              SpriteRoster,
+              {
+                peers: props.selectedPeers,
+                selectedAgentId: props.selected?.id || "",
+                onSelectAgent: props.onSelectAgent
+              }
+            ) })
+          ] }),
+          props.selected ? /* @__PURE__ */ jsxs9("div", { className: "mt-3 border-t-2 border-border/70 pt-3", children: [
+            /* @__PURE__ */ jsxs9("div", { className: "flex items-start justify-between gap-3", children: [
+              /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx22(WorkboardPixelAgent, { agentId: props.selected.id, name: props.selected.name, size: 24, active: true }),
+                /* @__PURE__ */ jsxs9("div", { children: [
+                  /* @__PURE__ */ jsx22("p", { className: "text-xs uppercase tracking-[0.12em] text-foreground/46", children: "selected sprite" }),
+                  /* @__PURE__ */ jsx22("p", { className: "text-sm font-semibold text-foreground", children: props.selected.name })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx22("span", { className: "border border-border/60 bg-background px-1.5 py-0.5 text-[10px] uppercase tracking-[0.14em] text-foreground/52", children: formatWorkboardRelativeTime(props.selected.collectedAt) })
+            ] }),
+            /* @__PURE__ */ jsxs9("div", { className: "mt-3 grid grid-cols-3 gap-1.5", children: [
+              /* @__PURE__ */ jsx22(PixelStat, { label: "posture", value: props.selected.posture }),
+              /* @__PURE__ */ jsx22(PixelStat, { label: "tempo", value: props.selected.momentum }),
+              /* @__PURE__ */ jsx22(PixelStat, { label: "life", value: props.selected.running ? "live" : "quiet" })
+            ] }),
+            /* @__PURE__ */ jsxs9("div", { className: "mt-3 border border-border/60 bg-background/78 px-2.5 py-2", children: [
+              /* @__PURE__ */ jsx22("p", { className: "text-[10px] uppercase tracking-[0.14em] text-foreground/42", children: "speech line" }),
+              /* @__PURE__ */ jsxs9("p", { className: "mt-1 text-sm leading-6 text-foreground", children: [
+                "\u201C",
+                props.selected.snapshot.current[0]?.summary || props.selected.headline,
+                "\u201D"
+              ] }),
+              /* @__PURE__ */ jsx22("p", { className: "mt-1 text-[11px] text-muted-foreground", children: props.selected.statusText })
+            ] }),
+            /* @__PURE__ */ jsxs9("div", { className: "mt-3", children: [
+              /* @__PURE__ */ jsx22("p", { className: "text-xs uppercase tracking-[0.12em] text-foreground/46", children: "quest beats" }),
+              /* @__PURE__ */ jsx22("ul", { className: "mt-1 border border-border/60 bg-background/74 px-2 py-1", children: (props.selected.snapshot.current || []).slice(0, 3).map((item) => /* @__PURE__ */ jsx22(ActivityLine, { item }, item.id)) })
+            ] }),
+            /* @__PURE__ */ jsxs9("div", { className: "mt-3", children: [
+              /* @__PURE__ */ jsx22("p", { className: "text-xs uppercase tracking-[0.12em] text-foreground/46", children: "recent drops" }),
+              (props.selected.snapshot.recent || []).length === 0 ? /* @__PURE__ */ jsx22("p", { className: "mt-1 border border-dashed border-border/60 bg-background/70 px-2 py-2 text-sm text-muted-foreground", children: "\u6682\u65E0\u8FD1\u671F\u7247\u6BB5\u3002" }) : /* @__PURE__ */ jsx22("ul", { className: "mt-1 border border-border/60 bg-background/74 px-2 py-1", children: (props.selected.snapshot.recent || []).slice(0, 3).map((item) => /* @__PURE__ */ jsx22(ActivityLine, { item }, item.id)) })
+            ] }),
+            /* @__PURE__ */ jsxs9("div", { className: "mt-3", children: [
+              /* @__PURE__ */ jsx22("p", { className: "text-xs uppercase tracking-[0.12em] text-foreground/46", children: "world cues" }),
+              (props.selected.snapshot.signals || []).length === 0 ? /* @__PURE__ */ jsx22("p", { className: "mt-1 border border-dashed border-border/60 bg-background/70 px-2 py-2 text-sm text-muted-foreground", children: "\u5F53\u524D\u6CA1\u6709\u516C\u5F00\u7EBF\u7D22\u3002" }) : /* @__PURE__ */ jsx22("ul", { className: "mt-1 border border-border/60 bg-background/74 px-2 py-1", children: (props.selected.snapshot.signals || []).slice(0, 4).map((item) => /* @__PURE__ */ jsx22(CueLine, { item }, item.label)) })
+            ] })
+          ] }) : /* @__PURE__ */ jsx22("div", { className: "mt-3 border border-dashed border-border/60 bg-background/70 px-3 py-3 text-sm text-muted-foreground", children: "\u9009\u4E2D\u4E00\u4E2A sprite \u540E\uFF0C\u8FD9\u91CC\u4F1A\u51FA\u73B0\u5B83\u7684\u516C\u5F00\u7247\u6BB5\u4E0E\u7EBF\u7D22\u3002" })
+        ] }) : null
+      ]
+    }
+  ) });
+}
+
+// src/components/workboard-game-map.ts
+var OVERVIEW_ROUTE_DWELL = 0.22;
+var FOCUSED_ROUTE_DWELL = 0.28;
+var PIXEL_STEP_SIZE = 2;
+function resolveOverviewGate(params) {
+  if (params.zoneId === "engaged" || params.zoneId === "quiet") {
+    return params.route[1] || params.route[0] || toZoneHubPoint(params.zoneId);
+  }
+  return params.route[2] || params.route[1] || params.route[0] || toZoneHubPoint(params.zoneId);
+}
+var FOCUSED_PROP_ITEMS = {
+  engaged: [],
+  steady: [],
+  quiet: [],
+  drift: []
+};
+var FOCUSED_AREA_LABELS = {
+  engaged: [
+    { id: "engaged-briefing", label: "briefing node", x: 166, y: 118 },
+    { id: "engaged-relay", label: "relay desk", x: 660, y: 118 },
+    { id: "engaged-dispatch", label: "dispatch rack", x: 1194, y: 118 }
+  ],
+  steady: [
+    { id: "steady-focus", label: "focus lane", x: 166, y: 118 },
+    { id: "steady-desk", label: "steady desk", x: 660, y: 118 },
+    { id: "steady-throughput", label: "throughput rail", x: 1194, y: 118 }
+  ],
+  quiet: [
+    { id: "quiet-standby", label: "standby desk", x: 166, y: 118 },
+    { id: "quiet-idle", label: "idle rail", x: 660, y: 118 },
+    { id: "quiet-sleep", label: "sleep shelf", x: 1194, y: 118 }
+  ],
+  drift: [
+    { id: "drift-watch", label: "watch point", x: 166, y: 118 },
+    { id: "drift-issue", label: "issue console", x: 660, y: 118 },
+    { id: "drift-signal", label: "signal rack", x: 1194, y: 118 }
+  ]
+};
+function buildZones(params) {
+  return WORKBOARD_ZONE_DEFINITIONS.map((zone) => ({
+    id: zone.id,
+    title: zone.title,
+    subtitle: zone.subtitle,
+    description: zone.description,
+    badge: zone.badge,
+    count: params.board.agents.filter((item) => resolveZoneId(item) === zone.id).length,
+    active: zone.id === params.activeZoneId,
+    hub: toZoneHubPoint(zone.id)
+  }));
+}
+function buildActors(params) {
+  const stageNodes = deriveStageNodes(params.board);
+  const focusedLookup = /* @__PURE__ */ new Map();
+  WORKBOARD_ZONE_DEFINITIONS.forEach((zone) => {
+    const items = params.board.agents.filter((item) => resolveZoneId(item) === zone.id);
+    const focusedNodes = deriveFocusedClusterNodes(items, zone.id);
+    focusedNodes.forEach((node, index) => {
+      focusedLookup.set(node.item.id, {
+        anchor: { x: node.x, y: node.y },
+        routeId: `patrol-${zone.id}-${index % 3}`
+      });
+    });
+  });
+  return stageNodes.map((node) => {
+    const overviewRoute = buildOverviewPatrolRoute({
+      zoneId: node.zone.id,
+      placement: node.placement
+    });
+    const focused = focusedLookup.get(node.item.id);
+    return {
+      id: node.item.id,
+      agent: node.item,
+      zoneId: node.zone.id,
+      overviewAnchor: overviewRoute[0] || toZoneHubPoint(node.zone.id),
+      overviewRoute,
+      overviewGate: resolveOverviewGate({
+        zoneId: node.zone.id,
+        route: overviewRoute
+      }),
+      focusedAnchor: focused?.anchor,
+      focusedStation: focused?.anchor,
+      focusedRouteId: focused?.routeId,
+      active: node.item.id === params.selectedAgentId
+    };
+  });
+}
+function buildPatrols(params) {
+  const laneCount = Math.max(
+    1,
+    Math.min(
+      3,
+      params.board.agents.filter((item) => resolveZoneId(item) === params.activeZoneId).length
+    )
+  );
+  return Array.from({ length: laneCount }, (_, index) => ({
+    id: `patrol-${params.activeZoneId}-${index}`,
+    kind: "patrol",
+    points: buildFocusedPatrolRoute({ index, zoneId: params.activeZoneId }),
+    zoneId: params.activeZoneId,
+    dwellRatio: FOCUSED_ROUTE_DWELL,
+    snapSize: PIXEL_STEP_SIZE,
+    label: `lane ${index + 1}`,
+    active: index === 0
+  }));
+}
+function buildCorridors(params) {
+  return params.actors.map((actor) => ({
+    id: `corridor-${actor.id}`,
+    kind: "corridor",
+    points: actor.overviewRoute,
+    zoneId: actor.zoneId,
+    dwellRatio: OVERVIEW_ROUTE_DWELL,
+    snapSize: PIXEL_STEP_SIZE,
+    label: actor.agent.name,
+    active: actor.zoneId === params.activeZoneId
+  }));
+}
+function buildWorkboardGameMapConfig(params) {
+  const zones = buildZones(params);
+  const actors = buildActors(params);
+  const patrols = buildPatrols(params);
+  const corridors = buildCorridors({ actors, activeZoneId: params.activeZoneId });
+  return {
+    board: params.board,
+    activeZoneId: params.activeZoneId,
+    selectedAgentId: params.selectedAgentId,
+    zones,
+    actors,
+    corridors,
+    patrols,
+    pointsOfInterest: [
+      ...FOCUSED_PROP_ITEMS[params.activeZoneId],
+      {
+        id: `${params.activeZoneId}-hub`,
+        kind: "hub",
+        x: 800,
+        y: 480,
+        active: true
+      }
+    ],
+    areaLabels: FOCUSED_AREA_LABELS[params.activeZoneId]
+  };
+}
+
+// src/components/workboard-game-room.tsx
+import * as React5 from "react";
+
+// src/components/workboard-room-field.tsx
+import { jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
+var TILE_SIZE2 = 40;
+var GRID_COLS2 = 40;
+var GRID_ROWS2 = 24;
+var STAGE_WIDTH2 = TILE_SIZE2 * GRID_COLS2;
+var STAGE_HEIGHT2 = TILE_SIZE2 * GRID_ROWS2;
+function tileToRect2(tile) {
+  return {
+    x: tile.col * TILE_SIZE2,
+    y: tile.row * TILE_SIZE2,
+    width: tile.cols * TILE_SIZE2,
+    height: tile.rows * TILE_SIZE2
+  };
+}
+function estimateTextWidth2(text) {
+  return Array.from(text).reduce((acc, char) => acc + (char.charCodeAt(0) > 255 ? 9 : 6), 0);
+}
+function renderGrassTiles2() {
+  return Array.from({ length: GRID_COLS2 * GRID_ROWS2 }, (_, index) => {
+    const col = index % GRID_COLS2;
+    const row = Math.floor(index / GRID_COLS2);
+    const rect2 = tileToRect2({ col, row, cols: 1, rows: 1 });
+    const fill = (col + row) % 2 === 0 ? "rgba(104,136,76,0.98)" : "rgba(91,124,70,0.98)";
+    return /* @__PURE__ */ jsxs10("g", { children: [
+      /* @__PURE__ */ jsx23("rect", { x: rect2.x, y: rect2.y, width: TILE_SIZE2, height: TILE_SIZE2, fill }),
+      /* @__PURE__ */ jsx23("rect", { x: rect2.x + 6, y: rect2.y + 8, width: "4", height: "4", fill: "rgba(40,78,45,0.24)" }),
+      /* @__PURE__ */ jsx23("rect", { x: rect2.x + 27, y: rect2.y + 25, width: "4", height: "4", fill: "rgba(142,161,89,0.18)" })
+    ] }, `room-grass-${col}-${row}`);
+  });
+}
+function renderPath(tile, index) {
+  const rect2 = tileToRect2(tile);
+  return /* @__PURE__ */ jsxs10("g", { children: [
+    /* @__PURE__ */ jsx23("rect", { x: rect2.x, y: rect2.y, width: rect2.width, height: rect2.height, fill: "rgba(210,184,120,0.98)" }),
+    /* @__PURE__ */ jsx23("rect", { x: rect2.x, y: rect2.y + rect2.height - 5, width: rect2.width, height: "5", fill: "rgba(137,104,67,0.28)" }),
+    Array.from({ length: Math.max(1, tile.cols * tile.rows) }, (_, chipIndex) => /* @__PURE__ */ jsx23(
+      "rect",
+      {
+        x: rect2.x + 8 + chipIndex % Math.max(1, tile.cols) * TILE_SIZE2,
+        y: rect2.y + 10 + Math.floor(chipIndex / Math.max(1, tile.cols)) * TILE_SIZE2,
+        width: "12",
+        height: "4",
+        fill: "rgba(96,74,51,0.16)"
+      },
+      `room-path-chip-${index}-${chipIndex}`
+    ))
+  ] }, `room-path-${index}`);
+}
+function renderTree2(point, index) {
+  const x = point.col * TILE_SIZE2;
+  const y = point.row * TILE_SIZE2;
+  return /* @__PURE__ */ jsxs10("g", { children: [
+    /* @__PURE__ */ jsx23("rect", { x: x + 17, y: y + 22, width: "8", height: "18", fill: "rgba(92,62,40,0.94)" }),
+    /* @__PURE__ */ jsx23("rect", { x: x + 10, y: y + 10, width: "22", height: "18", fill: "rgba(74,126,76,0.98)" }),
+    /* @__PURE__ */ jsx23("rect", { x: x + 5, y: y + 17, width: "32", height: "16", fill: "rgba(61,112,65,0.98)" }),
+    /* @__PURE__ */ jsx23("rect", { x: x + 14, y: y + 4, width: "18", height: "12", fill: "rgba(91,150,82,0.96)" })
+  ] }, `room-tree-${index}`);
+}
+function renderShrub2(point, index) {
+  const x = point.col * TILE_SIZE2;
+  const y = point.row * TILE_SIZE2;
+  return /* @__PURE__ */ jsxs10("g", { children: [
+    /* @__PURE__ */ jsx23("rect", { x: x + 5, y: y + 22, width: "12", height: "9", fill: "rgba(70,121,66,0.96)" }),
+    /* @__PURE__ */ jsx23("rect", { x: x + 15, y: y + 18, width: "18", height: "12", fill: "rgba(87,142,75,0.96)" }),
+    /* @__PURE__ */ jsx23("rect", { x: x + 28, y: y + 24, width: "7", height: "7", fill: "rgba(58,103,58,0.9)" })
+  ] }, `room-shrub-${index}`);
+}
+function renderFloor(tile, index, palette) {
+  return /* @__PURE__ */ jsx23("g", { children: Array.from({ length: tile.cols * tile.rows }, (_, plankIndex) => {
+    const col = tile.col + plankIndex % tile.cols;
+    const row = tile.row + Math.floor(plankIndex / tile.cols);
+    const rect2 = tileToRect2({ col, row, cols: 1, rows: 1 });
+    return /* @__PURE__ */ jsxs10("g", { children: [
+      /* @__PURE__ */ jsx23("rect", { x: rect2.x, y: rect2.y, width: TILE_SIZE2, height: TILE_SIZE2, fill: (col + row) % 2 === 0 ? palette.floorA : palette.floorB }),
+      /* @__PURE__ */ jsx23("rect", { x: rect2.x, y: rect2.y + TILE_SIZE2 - 4, width: TILE_SIZE2, height: "4", fill: "rgba(81,56,39,0.2)" }),
+      /* @__PURE__ */ jsx23("rect", { x: rect2.x + 10, y: rect2.y + 12, width: "10", height: "4", fill: "rgba(248,214,149,0.13)" })
+    ] }, `room-plank-${index}-${col}-${row}`);
+  }) }, `room-floor-${index}`);
+}
+function renderBlock(tile, index, fill, stroke) {
+  const rect2 = tileToRect2(tile);
+  return /* @__PURE__ */ jsx23(
+    "rect",
+    {
+      x: rect2.x,
+      y: rect2.y,
+      width: rect2.width,
+      height: rect2.height,
+      fill,
+      stroke,
+      strokeWidth: stroke ? 2 : void 0
+    },
+    `room-block-${index}`
+  );
+}
+function renderWall(tile, index, palette) {
+  const rect2 = tileToRect2(tile);
+  return /* @__PURE__ */ jsxs10("g", { children: [
+    /* @__PURE__ */ jsx23("rect", { x: rect2.x, y: rect2.y, width: rect2.width, height: rect2.height, fill: palette.wall }),
+    /* @__PURE__ */ jsx23("rect", { x: rect2.x + 4, y: rect2.y + 4, width: Math.max(0, rect2.width - 8), height: Math.max(0, rect2.height - 8), fill: palette.wallLight }),
+    /* @__PURE__ */ jsx23("rect", { x: rect2.x, y: rect2.y, width: rect2.width, height: "5", fill: "rgba(242,168,97,0.32)" })
+  ] }, `room-wall-${index}`);
+}
+function renderDoor(tile, index) {
+  const rect2 = tileToRect2(tile);
+  return /* @__PURE__ */ jsxs10("g", { children: [
+    /* @__PURE__ */ jsx23("rect", { x: rect2.x, y: rect2.y, width: rect2.width, height: rect2.height, fill: "rgba(215,184,110,0.98)" }),
+    /* @__PURE__ */ jsx23("rect", { x: rect2.x + 8, y: rect2.y + 10, width: Math.max(10, rect2.width - 16), height: "5", fill: "rgba(95,69,43,0.34)" })
+  ] }, `room-door-${index}`);
+}
+function renderRug(tile, index, palette) {
+  const rect2 = tileToRect2(tile);
+  return /* @__PURE__ */ jsxs10("g", { children: [
+    /* @__PURE__ */ jsx23("rect", { x: rect2.x, y: rect2.y, width: rect2.width, height: rect2.height, fill: index === 0 ? palette.rug : palette.rugStrong }),
+    /* @__PURE__ */ jsx23("rect", { x: rect2.x + 8, y: rect2.y + 8, width: Math.max(0, rect2.width - 16), height: Math.max(0, rect2.height - 16), fill: "none", stroke: palette.accent, strokeWidth: "3", opacity: "0.42" })
+  ] }, `room-rug-${index}`);
+}
+function renderRoomProp(prop) {
+  if (prop.kind === "hub") return null;
+  if (prop.kind === "board") {
+    return /* @__PURE__ */ jsxs10("g", { children: [
+      /* @__PURE__ */ jsx23("rect", { x: prop.x, y: prop.y, width: "170", height: "82", fill: "rgba(196,127,73,0.98)", stroke: "rgba(94,61,39,0.9)", strokeWidth: "4" }),
+      /* @__PURE__ */ jsx23("rect", { x: prop.x + 12, y: prop.y + 12, width: "54", height: "24", fill: "rgba(255,241,189,0.92)" }),
+      /* @__PURE__ */ jsx23("rect", { x: prop.x + 78, y: prop.y + 12, width: "72", height: "18", fill: "rgba(255,241,189,0.86)" }),
+      /* @__PURE__ */ jsx23("rect", { x: prop.x + 18, y: prop.y + 48, width: "132", height: "18", fill: "rgba(255,241,189,0.78)" })
+    ] });
+  }
+  if (prop.kind === "blueprint") {
+    return /* @__PURE__ */ jsxs10("g", { children: [
+      /* @__PURE__ */ jsx23("rect", { x: prop.x, y: prop.y + 22, width: "120", height: "34", fill: "rgba(111,78,47,0.9)" }),
+      /* @__PURE__ */ jsx23("rect", { x: prop.x + 10, y: prop.y, width: "100", height: "64", fill: "rgba(67,116,138,0.96)", stroke: "rgba(53,37,22,0.6)", strokeWidth: "3" }),
+      /* @__PURE__ */ jsx23("rect", { x: prop.x + 22, y: prop.y + 12, width: "30", height: "18", fill: "none", stroke: "rgba(219,236,224,0.78)", strokeWidth: "3" }),
+      /* @__PURE__ */ jsx23("path", { d: `M ${prop.x + 64} ${prop.y + 16} H ${prop.x + 94} V ${prop.y + 42} H ${prop.x + 44}`, fill: "none", stroke: "rgba(219,236,224,0.7)", strokeWidth: "3" })
+    ] });
+  }
+  if (prop.kind === "desk" || prop.kind === "table") {
+    return /* @__PURE__ */ jsxs10("g", { children: [
+      /* @__PURE__ */ jsx23("rect", { x: prop.x, y: prop.y, width: prop.kind === "table" ? 48 : 32, height: prop.kind === "table" ? 24 : 12, fill: "rgba(126,91,67,0.94)" }),
+      /* @__PURE__ */ jsx23("rect", { x: prop.x + 4, y: prop.y + 16, width: "6", height: "14", fill: "rgba(77,57,43,0.9)" }),
+      /* @__PURE__ */ jsx23("rect", { x: prop.x + 32, y: prop.y + 16, width: "6", height: "14", fill: "rgba(77,57,43,0.9)" })
+    ] });
+  }
+  if (prop.kind === "rack") {
+    return /* @__PURE__ */ jsxs10("g", { children: [
+      /* @__PURE__ */ jsx23("rect", { x: prop.x, y: prop.y, width: "14", height: "36", fill: "rgba(88,82,75,0.92)" }),
+      /* @__PURE__ */ jsx23("rect", { x: prop.x + 5, y: prop.y + 6, width: "24", height: "5", fill: "rgba(166,149,112,0.88)" }),
+      /* @__PURE__ */ jsx23("rect", { x: prop.x + 5, y: prop.y + 18, width: "24", height: "5", fill: "rgba(166,149,112,0.88)" }),
+      /* @__PURE__ */ jsx23("rect", { x: prop.x + 5, y: prop.y + 30, width: "24", height: "5", fill: "rgba(166,149,112,0.88)" })
+    ] });
+  }
+  if (prop.kind === "console") {
+    return /* @__PURE__ */ jsxs10("g", { children: [
+      /* @__PURE__ */ jsx23("rect", { x: prop.x, y: prop.y, width: "34", height: "22", fill: "rgba(72,95,86,0.94)" }),
+      /* @__PURE__ */ jsx23("rect", { x: prop.x + 7, y: prop.y + 6, width: "18", height: "6", fill: "rgba(215,236,222,0.92)" }),
+      /* @__PURE__ */ jsx23("rect", { x: prop.x + 7, y: prop.y + 22, width: "6", height: "12", fill: "rgba(56,64,60,0.88)" }),
+      /* @__PURE__ */ jsx23("rect", { x: prop.x + 22, y: prop.y + 22, width: "6", height: "12", fill: "rgba(56,64,60,0.88)" })
+    ] });
+  }
+  if (prop.kind === "bench") {
+    return /* @__PURE__ */ jsxs10("g", { children: [
+      /* @__PURE__ */ jsx23("rect", { x: prop.x, y: prop.y, width: "44", height: "10", fill: "rgba(145,108,76,0.92)" }),
+      /* @__PURE__ */ jsx23("rect", { x: prop.x + 7, y: prop.y + 10, width: "5", height: "14", fill: "rgba(82,62,49,0.9)" }),
+      /* @__PURE__ */ jsx23("rect", { x: prop.x + 32, y: prop.y + 10, width: "5", height: "14", fill: "rgba(82,62,49,0.9)" })
+    ] });
+  }
+  if (prop.kind === "plant") {
+    return /* @__PURE__ */ jsxs10("g", { children: [
+      /* @__PURE__ */ jsx23("rect", { x: prop.x + 6, y: prop.y + 18, width: "16", height: "12", fill: "rgba(127,90,63,0.92)" }),
+      /* @__PURE__ */ jsx23("rect", { x: prop.x + 3, y: prop.y + 8, width: "22", height: "14", fill: "rgba(100,145,80,0.92)" }),
+      /* @__PURE__ */ jsx23("rect", { x: prop.x + 10, y: prop.y, width: "8", height: "12", fill: "rgba(136,179,101,0.9)" })
+    ] });
+  }
+  if (prop.kind === "bed") {
+    return /* @__PURE__ */ jsxs10("g", { children: [
+      /* @__PURE__ */ jsx23("rect", { x: prop.x, y: prop.y, width: "52", height: "34", fill: "rgba(111,82,63,0.95)" }),
+      /* @__PURE__ */ jsx23("rect", { x: prop.x + 5, y: prop.y + 5, width: "18", height: "12", fill: "rgba(238,229,198,0.94)" }),
+      /* @__PURE__ */ jsx23("rect", { x: prop.x + 25, y: prop.y + 5, width: "22", height: "24", fill: "rgba(151,168,181,0.84)" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs10("g", { children: [
+    /* @__PURE__ */ jsx23("rect", { x: prop.x, y: prop.y + 4, width: "20", height: "18", fill: "rgba(143,105,70,0.9)" }),
+    /* @__PURE__ */ jsx23("rect", { x: prop.x + 20, y: prop.y + 8, width: "14", height: "14", fill: "rgba(177,136,94,0.9)" })
+  ] });
+}
+function renderAreaLabel(label, index) {
+  const width = Math.max(72, estimateTextWidth2(label.label) + 16);
+  return /* @__PURE__ */ jsxs10("g", { opacity: "0.94", children: [
+    /* @__PURE__ */ jsx23("rect", { x: label.x, y: label.y, width, height: "20", fill: "rgba(250,236,178,0.94)", stroke: "rgba(110,77,47,0.64)", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx23(
+      "text",
+      {
+        x: label.x + 7,
+        y: label.y + 14,
+        fill: "rgba(17,17,19,0.72)",
+        fontSize: "9",
+        fontWeight: "700",
+        fontFamily: "var(--font-geist-mono, var(--font-sans))",
+        children: label.label
+      }
+    )
+  ] }, `room-label-${index}`);
+}
+function renderHub(zone, palette) {
+  return /* @__PURE__ */ jsxs10("g", { children: [
+    /* @__PURE__ */ jsx23("rect", { x: 736, y: 422, width: "128", height: "116", fill: "rgba(250,236,178,0.94)", stroke: palette.accent, strokeWidth: "4" }),
+    /* @__PURE__ */ jsx23("rect", { x: 758, y: 444, width: "84", height: "70", fill: palette.rugStrong, opacity: "0.9" }),
+    /* @__PURE__ */ jsx23("rect", { x: 788, y: 470, width: "28", height: "22", fill: palette.accent, opacity: "0.92" }),
+    /* @__PURE__ */ jsx23("rect", { x: 774, y: 540, width: "52", height: "14", fill: "rgba(111,78,47,0.82)" }),
+    /* @__PURE__ */ jsx23(
+      "text",
+      {
+        x: "800",
+        y: "414",
+        textAnchor: "middle",
+        fill: palette.accent,
+        fontSize: "10",
+        fontWeight: "800",
+        fontFamily: "var(--font-geist-mono, var(--font-sans))",
+        children: zone.badge.toUpperCase()
+      }
+    )
+  ] });
+}
+function WorkboardRoomField(props) {
+  const plan = WORKBOARD_ROOM_PLANS[props.zone.id];
+  const palette = WORKBOARD_ROOM_PALETTE[props.zone.id];
+  const externalPoi = props.pointsOfInterest.filter((item) => item.kind !== "hub");
+  return /* @__PURE__ */ jsxs10(
+    "svg",
+    {
+      viewBox: `0 0 ${props.stageWidth} ${props.stageHeight}`,
+      className: "pointer-events-none absolute inset-0 h-full w-full",
+      preserveAspectRatio: "xMidYMid meet",
+      shapeRendering: "crispEdges",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx23("rect", { x: 0, y: 0, width: STAGE_WIDTH2, height: STAGE_HEIGHT2, fill: "rgba(247,244,236,0.98)" }),
+        renderGrassTiles2(),
+        plan.exteriorPaths.map(renderPath),
+        plan.trees.map(renderTree2),
+        plan.shrubs.map(renderShrub2),
+        plan.floors.map((tile, index) => renderFloor(tile, index, palette)),
+        plan.corridors.map((tile, index) => renderBlock(tile, index, "rgba(203,171,104,0.96)", "rgba(92,67,45,0.2)")),
+        plan.rugs.map((tile, index) => renderRug(tile, index, palette)),
+        plan.props.map((prop) => /* @__PURE__ */ jsx23("g", { opacity: "0.96", children: renderRoomProp(prop) }, prop.id)),
+        externalPoi.map((poi) => /* @__PURE__ */ jsx23("g", { opacity: "0.58", children: renderRoomProp(poi) }, poi.id)),
+        props.areaLabels.map(renderAreaLabel),
+        plan.walls.map((tile, index) => renderWall(tile, index, palette)),
+        plan.doors.map(renderDoor),
+        renderHub(props.zone, palette)
+      ]
+    }
+  );
+}
+
+// src/components/workboard-game-room.tsx
+import { jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
+var PIXEL_PANEL_CLIP3 = "polygon(0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 0px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px))";
+function resolveRoomPoint(params) {
+  return params.motionFrames?.[params.agentId] || params.fallback;
+}
+function ActiveSpeechBubble(props) {
+  if (!props.item || !props.point) return null;
+  const line = props.item.snapshot.current[0]?.summary || props.item.snapshot.recent[0]?.summary || props.item.headline;
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      className: "pointer-events-none absolute z-30 max-w-[20rem] border-[3px] border-[#6e4d2f] bg-[#fff1bd] px-3 py-2 text-sm shadow-[5px_5px_0_rgba(72,50,33,0.22)]",
+      style: {
+        left: Math.min(Math.max(props.point.x + 28, 48), WORKBOARD_STAGE_WIDTH - 260),
+        top: Math.min(Math.max(props.point.y - 74, 20), WORKBOARD_STAGE_HEIGHT - 72),
+        clipPath: PIXEL_PANEL_CLIP3
+      },
+      children: [
+        /* @__PURE__ */ jsxs11("p", { className: "text-[9px] uppercase tracking-[0.14em] text-[#6e4d2f]/70", children: [
+          props.item.name,
+          " \xB7 ",
+          props.item.posture
+        ] }),
+        /* @__PURE__ */ jsxs11("p", { className: "mt-1 leading-6 text-[#352516]", children: [
+          "\u201C",
+          line,
+          "\u201D"
+        ] }),
+        /* @__PURE__ */ jsx24("span", { className: "absolute -bottom-[11px] left-5 block h-[11px] w-[16px] border-x-[3px] border-b-[3px] border-[#6e4d2f] bg-[#fff1bd]" })
+      ]
+    }
+  );
+}
+function resolveQuestEntries(item) {
+  if (!item) return [];
+  return [...item.snapshot.current, ...item.snapshot.recent].slice(0, 3);
+}
+function WorkboardRoomQuestLedger(props) {
+  const entries = resolveQuestEntries(props.item);
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      className: "pointer-events-none absolute left-[128px] top-[662px] z-10 w-64 border-[3px] border-[#6e4d2f] bg-[#c48752] px-3 py-2 shadow-[5px_5px_0_rgba(72,50,33,0.24)]",
+      style: { clipPath: PIXEL_PANEL_CLIP3 },
+      children: [
+        /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx24("div", { className: "text-[9px] uppercase tracking-[0.18em] text-[#fff1bd]/80", children: "wall board" }),
+          /* @__PURE__ */ jsx24("div", { className: "text-[9px] uppercase tracking-[0.14em] text-[#fff1bd]/70", children: props.item ? props.item.posture : "empty" })
+        ] }),
+        /* @__PURE__ */ jsx24("div", { className: "mt-2 space-y-1.5", children: entries.length > 0 ? entries.map((entry, index) => /* @__PURE__ */ jsxs11("div", { className: "grid grid-cols-[1.5rem_1fr] gap-2 bg-[#fff1bd]/88 px-1.5 py-1 text-xs shadow-[2px_2px_0_rgba(72,50,33,0.18)]", children: [
+          /* @__PURE__ */ jsxs11("span", { className: "grid h-5 place-items-center border border-[#6e4d2f]/35 bg-[#f8de8d] text-[9px] font-semibold text-[#6e4d2f]/70", children: [
+            "Q",
+            index + 1
+          ] }),
+          /* @__PURE__ */ jsxs11("span", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx24("span", { className: "block truncate font-semibold leading-5 text-[#352516]", children: entry.title }),
+            /* @__PURE__ */ jsx24("span", { className: "block truncate text-[11px] leading-4 text-[#6e4d2f]/70", children: entry.status })
+          ] })
+        ] }, entry.id)) : /* @__PURE__ */ jsx24("div", { className: "bg-[#fff1bd]/88 px-2 py-1 text-xs leading-5 text-[#6e4d2f]/70", children: "No public quest beats." }) })
+      ]
+    }
+  );
+}
+function WorkboardRoomMiniMap(props) {
+  const miniWidth = 144;
+  const miniHeight = 88;
+  const scaleX = miniWidth / WORKBOARD_STAGE_WIDTH;
+  const scaleY = miniHeight / WORKBOARD_STAGE_HEIGHT;
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      className: "pointer-events-none absolute left-[1228px] top-[662px] z-10 border-[3px] border-[#6e4d2f] bg-[#8a6040] p-2 shadow-[5px_5px_0_rgba(72,50,33,0.24)]",
+      style: { clipPath: PIXEL_PANEL_CLIP3 },
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx24("div", { className: "mb-1 text-[9px] uppercase tracking-[0.16em] text-[#fff1bd]/75", children: "floor plan" }),
+        /* @__PURE__ */ jsxs11("svg", { width: miniWidth, height: miniHeight, viewBox: `0 0 ${miniWidth} ${miniHeight}`, shapeRendering: "crispEdges", children: [
+          /* @__PURE__ */ jsx24("rect", { x: "0", y: "0", width: miniWidth, height: miniHeight, fill: "rgba(241,225,166,0.95)" }),
+          /* @__PURE__ */ jsx24("rect", { x: "6", y: "6", width: miniWidth - 12, height: miniHeight - 12, fill: "rgba(255,241,189,0.9)", stroke: "rgba(110,77,47,0.42)", strokeWidth: "2" }),
+          /* @__PURE__ */ jsx24("line", { x1: "12", y1: miniHeight / 2, x2: miniWidth - 12, y2: miniHeight / 2, stroke: "rgba(110,77,47,0.18)", strokeWidth: "2" }),
+          /* @__PURE__ */ jsx24("line", { x1: miniWidth / 2, y1: "12", x2: miniWidth / 2, y2: miniHeight - 12, stroke: "rgba(110,77,47,0.18)", strokeWidth: "2" }),
+          props.nodes.map((node) => {
+            const active = node.item.id === props.activeItemId;
+            return /* @__PURE__ */ jsx24(
+              "rect",
+              {
+                x: Math.max(8, Math.min(miniWidth - 10, node.x * scaleX)),
+                y: Math.max(8, Math.min(miniHeight - 10, node.y * scaleY)),
+                width: active ? 6 : 4,
+                height: active ? 6 : 4,
+                fill: active ? "rgba(53,37,22,0.86)" : "rgba(110,77,47,0.48)"
+              },
+              node.item.id
+            );
+          }),
+          props.activePoint ? /* @__PURE__ */ jsx24(
+            "rect",
+            {
+              x: Math.max(8, Math.min(miniWidth - 12, props.activePoint.x * scaleX)) - 3,
+              y: Math.max(8, Math.min(miniHeight - 12, props.activePoint.y * scaleY)) - 3,
+              width: "10",
+              height: "10",
+              fill: "none",
+              stroke: "rgba(53,37,22,0.86)",
+              strokeWidth: "2"
+            }
+          ) : null
+        ] })
+      ]
+    }
+  );
+}
+function RoomEntranceSign(props) {
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      className: "pointer-events-none absolute left-[674px] top-[850px] z-10 border-[3px] border-[#6e4d2f] bg-[#fff1bd] px-3 py-2 text-center shadow-[4px_4px_0_rgba(72,50,33,0.22)]",
+      style: { clipPath: PIXEL_PANEL_CLIP3 },
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx24("div", { className: "text-[9px] uppercase tracking-[0.18em] text-[#6e4d2f]/65", children: props.zone.subtitle }),
+        /* @__PURE__ */ jsxs11("div", { className: "mt-1 text-[11px] font-bold uppercase tracking-[0.12em] text-[#352516]", children: [
+          props.flowMode,
+          " room"
+        ] })
+      ]
+    }
+  );
+}
+function buildRoomPolylinePath(points) {
+  return points.map((point, index) => `${index === 0 ? "M" : "L"} ${point.x} ${point.y}`).join(" ");
+}
+function RoomPatrolTrail(props) {
+  const d = buildRoomPolylinePath(props.route.points);
+  return /* @__PURE__ */ jsxs11("g", { opacity: props.route.active ? 0.68 : 0.34, children: [
+    /* @__PURE__ */ jsx24(
+      "path",
+      {
+        d,
+        fill: "none",
+        stroke: "rgba(101,75,52,0.34)",
+        strokeWidth: props.route.active ? 12 : 8,
+        strokeLinecap: "square",
+        strokeLinejoin: "miter"
+      }
+    ),
+    /* @__PURE__ */ jsx24(
+      "path",
+      {
+        d,
+        fill: "none",
+        stroke: "rgba(245,211,142,0.38)",
+        strokeWidth: props.route.active ? 4 : 3,
+        strokeDasharray: "6 12",
+        strokeLinecap: "square",
+        strokeLinejoin: "miter"
+      }
+    ),
+    props.route.points.map((point, index) => /* @__PURE__ */ jsx24(
+      "rect",
+      {
+        x: point.x - 4,
+        y: point.y - 4,
+        width: "8",
+        height: "8",
+        fill: "rgba(245,211,142,0.52)"
+      },
+      `${props.route.id}-trail-${index}`
+    ))
+  ] });
+}
+function RoomHubMapObject(props) {
+  return /* @__PURE__ */ jsx24(
+    "div",
+    {
+      className: "pointer-events-none absolute z-20 -translate-x-1/2 -translate-y-1/2",
+      style: { left: props.point.x, top: props.point.y },
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxs11("div", { className: "relative h-24 w-28", children: [
+        /* @__PURE__ */ jsx24("div", { className: "absolute left-4 top-5 h-14 w-20 border-[3px] border-[#6e4d2f] bg-[#f8de8d] shadow-[4px_4px_0_rgba(72,50,33,0.28)]" }),
+        /* @__PURE__ */ jsx24("div", { className: "absolute left-8 top-8 h-7 w-12 bg-[#6b8f83]" }),
+        /* @__PURE__ */ jsx24("div", { className: "absolute left-11 top-11 h-2 w-6 bg-[#cde6d9]" }),
+        /* @__PURE__ */ jsx24("div", { className: "absolute left-7 top-[3.9rem] h-3 w-4 bg-[#6e4d2f]" }),
+        /* @__PURE__ */ jsx24("div", { className: "absolute right-7 top-[3.9rem] h-3 w-4 bg-[#6e4d2f]" }),
+        /* @__PURE__ */ jsxs11("div", { className: "absolute left-1/2 top-0 -translate-x-1/2 border-2 border-[#6e4d2f] bg-[#fff1bd] px-2 py-1 text-center shadow-[3px_3px_0_rgba(72,50,33,0.18)]", children: [
+          /* @__PURE__ */ jsx24("div", { className: "text-[8px] uppercase tracking-[0.13em] text-[#6e4d2f]/70", children: props.badge }),
+          /* @__PURE__ */ jsx24("div", { className: "max-w-20 truncate text-[10px] font-bold leading-3 text-[#352516]", children: props.title })
+        ] })
+      ] })
+    }
+  );
+}
+function renderRoomStationObject(params) {
+  const deskFill = params.active ? "rgba(158,107,65,0.98)" : "rgba(138,96,65,0.84)";
+  const chairFill = params.active ? "rgba(93,128,103,0.95)" : "rgba(91,91,78,0.72)";
+  return /* @__PURE__ */ jsxs11("g", { opacity: params.active ? 0.96 : 0.66, children: [
+    /* @__PURE__ */ jsx24("rect", { x: params.node.x - 23, y: params.node.y - 19, width: "46", height: "24", fill: deskFill, stroke: "rgba(72,50,33,0.56)", strokeWidth: "3" }),
+    /* @__PURE__ */ jsx24("rect", { x: params.node.x - 15, y: params.node.y - 14, width: "18", height: "7", fill: "rgba(231,211,148,0.76)" }),
+    /* @__PURE__ */ jsx24("rect", { x: params.node.x + 7, y: params.node.y - 15, width: "10", height: "9", fill: "rgba(79,102,96,0.9)" }),
+    /* @__PURE__ */ jsx24("rect", { x: params.node.x - 12, y: params.node.y + 8, width: "24", height: "12", fill: chairFill }),
+    /* @__PURE__ */ jsx24("rect", { x: params.node.x - 21, y: params.node.y + 22, width: "8", height: "7", fill: "rgba(72,50,33,0.34)" }),
+    /* @__PURE__ */ jsx24("rect", { x: params.node.x + 13, y: params.node.y + 22, width: "8", height: "7", fill: "rgba(72,50,33,0.34)" }),
+    /* @__PURE__ */ jsx24("rect", { x: params.node.x + 20, y: params.node.y - 26, width: "22", height: "14", fill: "rgba(250,236,178,0.92)", stroke: "rgba(110,77,47,0.54)", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx24(
+      "text",
+      {
+        x: params.node.x + 31,
+        y: params.node.y - 16,
+        textAnchor: "middle",
+        fill: "rgba(72,50,33,0.78)",
+        fontSize: "8",
+        fontWeight: "800",
+        fontFamily: "var(--font-geist-mono, var(--font-sans))",
+        children: params.index + 1
+      }
+    ),
+    params.active ? /* @__PURE__ */ jsx24("rect", { x: params.node.x - 29, y: params.node.y - 25, width: "58", height: "58", fill: "none", stroke: "rgba(17,17,19,0.42)", strokeWidth: "2", strokeDasharray: "4 5" }) : null
+  ] }, `focused-station-${params.node.item.id}`);
+}
+function WorkboardGameRoom(props) {
+  const [hoveredTag, setHoveredTag] = React5.useState(null);
+  const hubPoint = React5.useMemo(
+    () => props.gameMap.pointsOfInterest.find((item) => item.kind === "hub") || {
+      id: `${props.zone.id}-hub-fallback`,
+      kind: "hub",
+      x: WORKBOARD_STAGE_WIDTH / 2,
+      y: WORKBOARD_STAGE_HEIGHT / 2
+    },
+    [props.gameMap.pointsOfInterest, props.zone.id]
+  );
+  const center = { x: hubPoint.x, y: hubPoint.y };
+  const roomNodes = React5.useMemo(
+    () => props.gameMap.actors.filter((actor) => actor.zoneId === props.zone.id && actor.focusedAnchor).map((actor) => ({
+      item: actor.agent,
+      x: actor.focusedAnchor?.x || hubPoint.x,
+      y: actor.focusedAnchor?.y || hubPoint.y,
+      routeId: actor.focusedRouteId
+    })),
+    [hubPoint.x, hubPoint.y, props.gameMap.actors, props.zone.id]
+  );
+  const activeItem = React5.useMemo(
+    () => props.items.find((item) => item.id === props.selectedAgentId) || props.items[0] || null,
+    [props.items, props.selectedAgentId]
+  );
+  const activeNode = React5.useMemo(
+    () => activeItem ? roomNodes.find((entry) => entry.item.id === activeItem.id) || null : null,
+    [activeItem, roomNodes]
+  );
+  const activePoint = React5.useMemo(() => {
+    if (!activeItem || !activeNode) return null;
+    return resolveRoomPoint({
+      agentId: activeNode.item.id,
+      fallback: { x: activeNode.x, y: activeNode.y },
+      motionFrames: props.motionFrames
+    });
+  }, [activeItem, activeNode, props.motionFrames]);
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      className: cn(
+        "relative overflow-hidden border-2 bg-[linear-gradient(145deg,rgba(251,250,247,0.96),rgba(245,248,245,0.88))]",
+        props.zone.borderClassName
+      ),
+      style: { width: WORKBOARD_STAGE_WIDTH, height: WORKBOARD_STAGE_HEIGHT, clipPath: PIXEL_PANEL_CLIP3, imageRendering: "pixelated" },
+      children: [
+        /* @__PURE__ */ jsx24(
+          WorkboardRoomField,
+          {
+            zone: props.zone,
+            stageWidth: WORKBOARD_STAGE_WIDTH,
+            stageHeight: WORKBOARD_STAGE_HEIGHT,
+            pointsOfInterest: props.gameMap.pointsOfInterest,
+            areaLabels: props.gameMap.areaLabels
+          }
+        ),
+        /* @__PURE__ */ jsx24("div", { className: cn("pointer-events-none absolute left-1/2 top-1/2 h-56 w-56 -translate-x-1/2 -translate-y-1/2", props.zone.glowClassName) }),
+        /* @__PURE__ */ jsx24(RoomEntranceSign, { zone: props.zone, flowMode: props.flowMode }),
+        /* @__PURE__ */ jsxs11(
+          "svg",
+          {
+            viewBox: `0 0 ${WORKBOARD_STAGE_WIDTH} ${WORKBOARD_STAGE_HEIGHT}`,
+            className: "pointer-events-none absolute inset-0 h-full w-full",
+            preserveAspectRatio: "xMidYMid meet",
+            "aria-hidden": "true",
+            children: [
+              props.gameMap.patrols.map((route) => /* @__PURE__ */ jsx24(RoomPatrolTrail, { route }, route.id)),
+              activePoint ? /* @__PURE__ */ jsxs11("g", { children: [
+                /* @__PURE__ */ jsx24(
+                  "path",
+                  {
+                    d: buildWorkboardTilePath({ from: center, to: activePoint }),
+                    fill: "none",
+                    stroke: "rgba(245,211,142,0.58)",
+                    strokeWidth: "10",
+                    strokeOpacity: "0.52",
+                    strokeLinecap: "square"
+                  }
+                ),
+                /* @__PURE__ */ jsx24(
+                  "rect",
+                  {
+                    x: activePoint.x - 14,
+                    y: activePoint.y - 14,
+                    width: "28",
+                    height: "28",
+                    fill: "none",
+                    className: props.zone.lineClassName,
+                    strokeWidth: "2",
+                    strokeDasharray: "4 5",
+                    style: { animation: "workboard-dash 1.5s linear infinite" }
+                  }
+                ),
+                /* @__PURE__ */ jsx24(
+                  "rect",
+                  {
+                    x: center.x - 7,
+                    y: center.y - 7,
+                    width: "14",
+                    height: "14",
+                    fill: "none",
+                    className: props.zone.lineClassName,
+                    strokeWidth: "2",
+                    strokeOpacity: "0.72"
+                  }
+                )
+              ] }) : null,
+              roomNodes.map((node) => {
+                const point = resolveRoomPoint({
+                  agentId: node.item.id,
+                  fallback: { x: node.x, y: node.y },
+                  motionFrames: props.motionFrames
+                });
+                const path = buildWorkboardTilePath({ from: center, to: point });
+                return /* @__PURE__ */ jsx24(
+                  "path",
+                  {
+                    d: path,
+                    fill: "none",
+                    className: cn(
+                      props.zone.lineClassName,
+                      props.selectedAgentId === node.item.id ? "opacity-78" : "opacity-34"
+                    ),
+                    strokeWidth: props.selectedAgentId === node.item.id ? 2.8 : 1.5,
+                    strokeDasharray: props.selectedAgentId === node.item.id ? "6 8" : "4 10",
+                    style: {
+                      animation: `workboard-dash ${props.flowMode === "turbo" ? "1.6s" : "2.8s"} linear infinite`
+                    }
+                  },
+                  `focused-line-${node.item.id}`
+                );
+              }),
+              roomNodes.map(
+                (node, index) => renderRoomStationObject({
+                  node,
+                  index,
+                  active: props.selectedAgentId === node.item.id
+                })
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx24(RoomHubMapObject, { badge: props.zone.badge, title: props.zone.title, point: hubPoint }),
+        /* @__PURE__ */ jsxs11(
+          "div",
+          {
+            className: "pointer-events-none absolute z-20 border-2 border-[#6e4d2f]/70 bg-[#fff1bd]/90 px-2 py-1 text-[10px] uppercase tracking-[0.14em] text-[#6e4d2f]/70 shadow-[3px_3px_0_rgba(72,50,33,0.16)]",
+            style: { left: hubPoint.x + 38, top: hubPoint.y + 18, clipPath: PIXEL_PANEL_CLIP3 },
+            children: [
+              "sprites ",
+              props.items.length
+            ]
+          }
+        ),
+        roomNodes.map((node) => {
+          const point = resolveRoomPoint({
+            agentId: node.item.id,
+            fallback: { x: node.x, y: node.y },
+            motionFrames: props.motionFrames
+          });
+          return /* @__PURE__ */ jsx24(
+            WorkboardStageAgentNode,
+            {
+              item: node.item,
+              zone: props.zone,
+              point,
+              active: props.selectedAgentId === node.item.id,
+              faded: false,
+              mode: "focused",
+              onSelect: props.onSelectAgent,
+              onHoverChange: setHoveredTag
+            },
+            `focused-node-${node.item.id}`
+          );
+        }),
+        /* @__PURE__ */ jsx24(WorkboardRoomQuestLedger, { item: activeItem }),
+        /* @__PURE__ */ jsx24(WorkboardRoomMiniMap, { activePoint, activeItemId: activeItem?.id, nodes: roomNodes }),
+        /* @__PURE__ */ jsx24(ActiveSpeechBubble, { item: activeItem, point: activePoint }),
+        /* @__PURE__ */ jsx24(
+          "svg",
+          {
+            viewBox: `0 0 ${WORKBOARD_STAGE_WIDTH} ${WORKBOARD_STAGE_HEIGHT}`,
+            className: "pointer-events-none absolute inset-0 h-full w-full",
+            preserveAspectRatio: "xMidYMid meet",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx24(PixelHoverTag, { tag: hoveredTag, stageWidth: WORKBOARD_STAGE_WIDTH, stageHeight: WORKBOARD_STAGE_HEIGHT })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/workboard-motion.ts
+import * as React6 from "react";
+function distance(a, b) {
+  return Math.hypot(b.x - a.x, b.y - a.y);
+}
+function resolveDirection(params) {
+  const dx = params.to.x - params.from.x;
+  const dy = params.to.y - params.from.y;
+  if (Math.abs(dx) >= Math.abs(dy)) {
+    return dx < 0 ? "left" : "right";
+  }
+  return dy < 0 ? "up" : "down";
+}
+function resolveRouteFrame(params) {
+  if (params.route.length < 2) {
+    return {
+      ...params.route[0] || { x: 0, y: 0 },
+      direction: "down",
+      state: "dwell"
+    };
+  }
+  const dwellRatio = Math.min(Math.max(params.dwellRatio || 0, 0), 0.72);
+  if (dwellRatio > 0) {
+    const legCount = params.route.length;
+    const legProgress = params.progress % 1 * legCount;
+    const legIndex = Math.floor(legProgress) % legCount;
+    const localProgress = legProgress - Math.floor(legProgress);
+    const from = params.route[legIndex];
+    const to = params.route[(legIndex + 1) % params.route.length];
+    const travelRatio = 1 - dwellRatio;
+    const direction = resolveDirection({ from, to });
+    if (localProgress > travelRatio) {
+      return {
+        ...to,
+        direction,
+        state: "dwell"
+      };
+    }
+    const easedProgress = Math.min(localProgress / travelRatio, 1);
+    return {
+      x: from.x + (to.x - from.x) * easedProgress,
+      y: from.y + (to.y - from.y) * easedProgress,
+      direction,
+      state: "walking"
+    };
+  }
+  const segments = params.route.map((point, index) => {
+    const next = params.route[(index + 1) % params.route.length];
+    return {
+      from: point,
+      to: next,
+      length: distance(point, next)
+    };
+  });
+  const totalLength = segments.reduce((acc, segment) => acc + segment.length, 0);
+  if (totalLength <= 0) {
+    return {
+      ...params.route[0],
+      direction: "down",
+      state: "dwell"
+    };
+  }
+  let cursor = params.progress % 1 * totalLength;
+  for (const segment of segments) {
+    if (cursor <= segment.length) {
+      const ratio = segment.length <= 0 ? 0 : cursor / segment.length;
+      return {
+        x: segment.from.x + (segment.to.x - segment.from.x) * ratio,
+        y: segment.from.y + (segment.to.y - segment.from.y) * ratio,
+        direction: resolveDirection({ from: segment.from, to: segment.to }),
+        state: "walking"
+      };
+    }
+    cursor -= segment.length;
+  }
+  return {
+    ...params.route[0],
+    direction: "down",
+    state: "dwell"
+  };
+}
+function snapPoint(params) {
+  const snapSize = params.snapSize || 0;
+  if (snapSize <= 0) {
+    return params.point;
+  }
+  return {
+    ...params.point,
+    x: Math.round(params.point.x / snapSize) * snapSize,
+    y: Math.round(params.point.y / snapSize) * snapSize
+  };
+}
+function useWorkboardMotion(params) {
+  const [frames, setFrames] = React6.useState({});
+  React6.useEffect(() => {
+    if (params.nodes.length === 0) {
+      setFrames({});
+      return;
+    }
+    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (reduceMotion) {
+      const stillFrames = params.nodes.reduce(
+        (acc, node) => {
+          acc[node.id] = {
+            x: node.anchor.x,
+            y: node.anchor.y,
+            direction: "down",
+            state: "dwell"
+          };
+          return acc;
+        },
+        {}
+      );
+      setFrames(stillFrames);
+      return;
+    }
+    let rafId = 0;
+    let start = performance.now();
+    const frame = (now) => {
+      const elapsed = (now - start) / 1e3;
+      const flowFactor = params.flowMode === "turbo" ? 1.45 : 0.78;
+      const nextFrames = params.nodes.reduce(
+        (acc, node) => {
+          if (node.mode === "route" && node.route && node.route.length > 1) {
+            const routePoint = resolveRouteFrame({
+              route: node.route,
+              progress: elapsed * node.speed * 0.09 * flowFactor + node.phase * 0.07,
+              dwellRatio: node.dwellRatio
+            });
+            acc[node.id] = snapPoint({ point: routePoint, snapSize: node.snapSize });
+            return acc;
+          }
+          const t = elapsed * node.speed * flowFactor + node.phase;
+          const driftX = Math.sin(t) * node.swayX + Math.cos(t * 0.61 + node.phase) * node.swayX * 0.4;
+          const driftY = Math.cos(t * 0.9 + node.phase * 0.8) * node.swayY + Math.sin(t * 0.55) * node.swayY * 0.35;
+          const point = {
+            x: node.anchor.x + driftX,
+            y: node.anchor.y + driftY
+          };
+          acc[node.id] = snapPoint({
+            snapSize: node.snapSize,
+            point: {
+              ...point,
+              direction: resolveDirection({ from: node.anchor, to: point }),
+              state: "walking"
+            }
+          });
+          return acc;
+        },
+        {}
+      );
+      setFrames(nextFrames);
+      rafId = window.requestAnimationFrame(frame);
+    };
+    rafId = window.requestAnimationFrame(frame);
+    return () => {
+      window.cancelAnimationFrame(rafId);
+    };
+  }, [params.flowMode, params.nodes]);
+  return frames;
+}
+
+// src/components/workboard.tsx
+import { Fragment as Fragment3, jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
+var PIXEL_PANEL_CLIP4 = "polygon(0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 0px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px))";
+function resolveSelectedAgent(params) {
+  const items = params.board?.agents || [];
+  if (items.length === 0) return null;
+  return items.find((item) => item.id === params.selectedAgentId) || items[0] || null;
+}
+function resolveZoneLead(params) {
+  const items = (params.board?.agents || []).filter((item) => resolveZoneId(item) === params.zoneId);
+  if (items.length === 0) return null;
+  return items.find((item) => item.snapshot.current.some((entry) => entry.status === "active")) || items.find((item) => item.running) || items[0] || null;
+}
+function useWorkboardStageViewportScale(params) {
+  const [size, setSize] = React7.useState({ width: WORKBOARD_STAGE_WIDTH, height: WORKBOARD_STAGE_HEIGHT });
+  React7.useEffect(() => {
+    const element = params.viewportRef.current;
+    if (!element) return void 0;
+    const updateSize = () => {
+      const rect2 = element.getBoundingClientRect();
+      setSize({
+        width: Math.max(1, rect2.width),
+        height: Math.max(1, rect2.height)
+      });
+    };
+    updateSize();
+    if (typeof ResizeObserver === "undefined") {
+      window.addEventListener("resize", updateSize);
+      return () => window.removeEventListener("resize", updateSize);
+    }
+    const observer = new ResizeObserver(updateSize);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [params.viewportRef]);
+  const horizontalPadding = params.isFullscreen ? 0 : 16;
+  const verticalHudReserve = params.isFullscreen ? 0 : 20;
+  const widthScale = (size.width - horizontalPadding) / WORKBOARD_STAGE_WIDTH;
+  const heightScale = (size.height - verticalHudReserve) / WORKBOARD_STAGE_HEIGHT;
+  const rawScale = params.isFullscreen ? Math.max(widthScale, heightScale) : Math.min(widthScale, heightScale);
+  return Math.max(params.isFullscreen ? 1 : 0.72, Math.min(params.isFullscreen ? 4 : 1.35, rawScale || 1));
+}
+function WorkboardScaledStage(props) {
+  return /* @__PURE__ */ jsx25(
+    "div",
+    {
+      className: "relative shrink-0",
+      style: {
+        width: WORKBOARD_STAGE_WIDTH * props.scale,
+        height: WORKBOARD_STAGE_HEIGHT * props.scale
+      },
+      children: /* @__PURE__ */ jsx25(
+        "div",
+        {
+          className: "absolute left-0 top-0",
+          style: {
+            width: WORKBOARD_STAGE_WIDTH,
+            height: WORKBOARD_STAGE_HEIGHT,
+            transform: `scale(${props.scale})`,
+            transformOrigin: "left top",
+            imageRendering: "pixelated"
+          },
+          children: props.children
+        }
+      )
+    }
+  );
+}
+function WorkboardGameHud(props) {
+  const worldLine = [
+    `sprites ${props.board.summary.totalAgents}`,
+    `live ${props.board.summary.liveAgents}`,
+    `active ${props.board.summary.activeAgents}`,
+    `quiet ${props.board.summary.quietAgents}`,
+    props.selected ? `focus ${props.selected.name}` : "focus world",
+    `tick ${formatWorkboardRelativeTime(props.board.collectedAt)}`
+  ];
+  return /* @__PURE__ */ jsxs12(Fragment3, { children: [
+    /* @__PURE__ */ jsxs12("div", { className: "absolute inset-x-2 top-2 z-40 flex flex-wrap items-start justify-between gap-2", children: [
+      /* @__PURE__ */ jsxs12(
+        "div",
+        {
+          className: "border-2 border-border/70 bg-[rgba(255,252,247,0.92)] px-3 py-2 shadow-[0_3px_0_rgba(17,17,19,0.12)]",
+          style: { clipPath: PIXEL_PANEL_CLIP4 },
+          children: [
+            /* @__PURE__ */ jsx25("div", { className: "text-[10px] uppercase tracking-[0.2em] text-foreground/42", children: props.stageLevel === "clusters" ? "world map" : `${props.activeZone.title} room` }),
+            /* @__PURE__ */ jsx25("div", { className: "mt-1 text-lg font-semibold leading-none tracking-[-0.06em] text-foreground", children: "Workboard Game World" }),
+            /* @__PURE__ */ jsx25("div", { className: "mt-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-[10px] uppercase tracking-[0.16em] text-foreground/42", children: worldLine.map((item, index) => /* @__PURE__ */ jsxs12(React7.Fragment, { children: [
+              index > 0 ? /* @__PURE__ */ jsx25("span", { className: "text-foreground/20", children: "/" }) : null,
+              /* @__PURE__ */ jsx25("span", { children: item })
+            ] }, item)) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs12("div", { className: "flex flex-wrap justify-end gap-1.5", children: [
+        props.stageLevel === "agents" ? /* @__PURE__ */ jsx25(
+          "button",
+          {
+            type: "button",
+            onClick: props.onBackToAtlas,
+            className: "border-2 border-border/70 bg-[rgba(255,252,247,0.9)] px-2 py-1 text-[11px] uppercase tracking-[0.14em] shadow-[0_2px_0_rgba(17,17,19,0.12)] transition-[filter] hover:brightness-105",
+            style: { clipPath: PIXEL_PANEL_CLIP4 },
+            children: "world"
+          }
+        ) : null,
+        /* @__PURE__ */ jsx25(
+          "button",
+          {
+            type: "button",
+            onClick: props.onToggleFlowMode,
+            className: "border-2 border-border/70 bg-[rgba(255,252,247,0.9)] px-2 py-1 text-[11px] uppercase tracking-[0.14em] shadow-[0_2px_0_rgba(17,17,19,0.12)] transition-[filter] hover:brightness-105",
+            style: { clipPath: PIXEL_PANEL_CLIP4 },
+            "aria-pressed": props.flowMode === "turbo",
+            children: props.flowMode
+          }
+        ),
+        /* @__PURE__ */ jsxs12(
+          "button",
+          {
+            type: "button",
+            onClick: () => props.onRefresh?.(),
+            className: "inline-flex items-center gap-1.5 border-2 border-border/70 bg-[rgba(255,252,247,0.9)] px-2 py-1 text-[11px] uppercase tracking-[0.14em] shadow-[0_2px_0_rgba(17,17,19,0.12)] transition-[filter] hover:brightness-105 disabled:opacity-45",
+            style: { clipPath: PIXEL_PANEL_CLIP4 },
+            disabled: !props.onRefresh,
+            children: [
+              /* @__PURE__ */ jsx25(RefreshCwIcon, { className: cn("size-3.5", props.loading ? "animate-spin" : "") }),
+              "tick"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs12(
+          "button",
+          {
+            type: "button",
+            onClick: props.onToggleFullscreen,
+            className: "inline-flex items-center gap-1.5 border-2 border-border/70 bg-[rgba(255,252,247,0.9)] px-2 py-1 text-[11px] uppercase tracking-[0.14em] shadow-[0_2px_0_rgba(17,17,19,0.12)] transition-[filter] hover:brightness-105",
+            style: { clipPath: PIXEL_PANEL_CLIP4 },
+            "aria-pressed": props.isFullscreen,
+            children: [
+              props.isFullscreen ? /* @__PURE__ */ jsx25(Minimize2Icon, { className: "size-3.5" }) : /* @__PURE__ */ jsx25(Maximize2Icon, { className: "size-3.5" }),
+              props.isFullscreen ? "exit" : "full"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx25("div", { className: "absolute inset-x-2 bottom-2 z-40 flex justify-center", children: /* @__PURE__ */ jsx25(
+      "div",
+      {
+        className: "flex max-w-full gap-1 overflow-x-auto border-2 border-border/70 bg-[rgba(255,252,247,0.9)] px-2 py-1.5 shadow-[0_3px_0_rgba(17,17,19,0.12)]",
+        style: { clipPath: PIXEL_PANEL_CLIP4 },
+        "aria-label": "Workboard zone portals",
+        children: props.zones.map((zone) => /* @__PURE__ */ jsx25(
+          WorkboardZonePortalButton,
+          {
+            zone,
+            current: zone.id === props.activeZone.id,
+            onSelect: props.onSelectZone
+          },
+          zone.id
+        ))
+      }
+    ) }),
+    /* @__PURE__ */ jsx25("div", { className: "pointer-events-none absolute bottom-[4.7rem] left-2 z-40 hidden border-2 border-border/60 bg-[rgba(255,252,247,0.82)] px-2 py-1 text-[9px] uppercase tracking-[0.13em] text-foreground/44 shadow-[0_2px_0_rgba(17,17,19,0.1)] md:block", style: { clipPath: PIXEL_PANEL_CLIP4 }, children: "left/right switch zone / enter open / esc world" })
+  ] });
+}
+function WorkboardZonePortalButton(props) {
+  return /* @__PURE__ */ jsxs12(
+    "button",
+    {
+      type: "button",
+      onClick: () => props.onSelect?.(props.zone.id),
+      className: cn(
+        "group inline-flex min-w-24 items-center gap-2 border border-border/50 px-2 py-1 text-left transition-[filter,transform] duration-200 hover:-translate-y-0.5 hover:brightness-105 focus:outline-none focus-visible:-translate-y-0.5",
+        props.current ? "bg-foreground text-background" : "bg-[rgba(255,252,247,0.76)] text-foreground"
+      ),
+      style: { clipPath: PIXEL_PANEL_CLIP4 },
+      "aria-pressed": props.current,
+      children: [
+        /* @__PURE__ */ jsx25(
+          "span",
+          {
+            className: cn(
+              "grid size-5 place-items-center border text-[10px] font-semibold leading-none",
+              props.current ? "border-background/70" : "border-foreground/35"
+            ),
+            "aria-hidden": "true",
+            children: props.zone.count
+          }
+        ),
+        /* @__PURE__ */ jsxs12("span", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx25("span", { className: "block truncate text-[10px] font-semibold uppercase tracking-[0.13em]", children: props.zone.badge }),
+          /* @__PURE__ */ jsx25("span", { className: cn("block truncate text-[9px]", props.current ? "text-background/70" : "text-foreground/46"), children: "portal" })
+        ] })
+      ]
+    }
+  );
+}
+function WorkboardWorldPortalOverlay(props) {
+  if (!props.portal) return null;
+  return /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      className: "pointer-events-none absolute inset-0 z-50 grid place-items-center bg-[rgba(255,252,247,0.18)]",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx25("div", { className: "absolute inset-y-0 left-0 w-1/2 origin-left bg-[rgba(17,17,19,0.82)] workboard-portal-left" }),
+        /* @__PURE__ */ jsx25("div", { className: "absolute inset-y-0 right-0 w-1/2 origin-right bg-[rgba(17,17,19,0.82)] workboard-portal-right" }),
+        /* @__PURE__ */ jsxs12(
+          "div",
+          {
+            className: "relative z-10 border-2 border-background/80 bg-[rgba(17,17,19,0.88)] px-4 py-3 text-center text-background shadow-[0_4px_0_rgba(17,17,19,0.2)] workboard-portal-label",
+            style: { clipPath: PIXEL_PANEL_CLIP4 },
+            children: [
+              /* @__PURE__ */ jsx25("div", { className: "text-[10px] uppercase tracking-[0.22em] text-background/58", children: props.portal.mode === "enter" ? "enter room" : "return atlas" }),
+              /* @__PURE__ */ jsx25("div", { className: "mt-1 text-base font-semibold tracking-[-0.05em]", children: props.portal.label })
+            ]
+          }
+        )
+      ]
+    },
+    props.portal.key
+  );
+}
+function WorkboardGameStyles() {
+  return /* @__PURE__ */ jsx25("style", { children: `
+      @keyframes workboard-dash {
+        from { stroke-dashoffset: 0; }
+        to { stroke-dashoffset: 18; }
+      }
+      @keyframes workboard-pulse {
+        0% { opacity: 0.15; transform: scale(0.98); }
+        50% { opacity: 0.5; transform: scale(1.08); }
+        100% { opacity: 0.15; transform: scale(0.98); }
+      }
+      @keyframes workboard-sprite-step {
+        0% { translate: 0 0; }
+        50% { translate: 0 -1px; }
+        100% { translate: 0 0; }
+      }
+      @keyframes workboard-world-scan {
+        0% { transform: translateY(-16px); opacity: 0.08; }
+        50% { opacity: 0.18; }
+        100% { transform: translateY(16px); opacity: 0.08; }
+      }
+      @keyframes workboard-portal-left {
+        0% { transform: scaleX(0); }
+        35% { transform: scaleX(1); }
+        70% { transform: scaleX(1); }
+        100% { transform: scaleX(0); }
+      }
+      @keyframes workboard-portal-right {
+        0% { transform: scaleX(0); }
+        35% { transform: scaleX(1); }
+        70% { transform: scaleX(1); }
+        100% { transform: scaleX(0); }
+      }
+      @keyframes workboard-portal-label {
+        0% { opacity: 0; transform: translateY(6px) scale(0.96); }
+        28% { opacity: 1; transform: translateY(0) scale(1); }
+        74% { opacity: 1; transform: translateY(0) scale(1); }
+        100% { opacity: 0; transform: translateY(-6px) scale(0.98); }
+      }
+      .workboard-portal-left { animation: workboard-portal-left 560ms steps(7, end) both; }
+      .workboard-portal-right { animation: workboard-portal-right 560ms steps(7, end) both; }
+      .workboard-portal-label { animation: workboard-portal-label 560ms steps(6, end) both; }
+      @media (prefers-reduced-motion: reduce) {
+        .workboard-portal-left,
+        .workboard-portal-right,
+        .workboard-portal-label {
+          animation-duration: 1ms;
+        }
+      }
+    ` });
+}
+function resolveAdjacentZoneId(params) {
+  if (params.zones.length === 0) return params.activeZoneId;
+  const currentIndex = Math.max(
+    0,
+    params.zones.findIndex((zone) => zone.id === params.activeZoneId)
+  );
+  const nextIndex = (currentIndex + params.direction + params.zones.length) % params.zones.length;
+  return params.zones[nextIndex]?.id || params.activeZoneId;
+}
+function Workboard(props) {
+  const { board, loading, selectedAgentId, onRefresh, onSelectAgent, className } = props;
+  const selected = resolveSelectedAgent({ board, selectedAgentId });
+  const containerRef = React7.useRef(null);
+  const stageViewportRef = React7.useRef(null);
+  const [stageLevel, setStageLevel] = React7.useState("clusters");
+  const [detailsCollapsed, setDetailsCollapsed] = React7.useState(true);
+  const [flowMode, setFlowMode] = React7.useState("cruise");
+  const [isFullscreen, setIsFullscreen] = React7.useState(false);
+  const [portal, setPortal] = React7.useState(null);
+  const previousSelectedIdRef = React7.useRef(selected?.id);
+  const [activeZoneId, setActiveZoneId] = React7.useState(
+    () => selected ? resolveZoneId(selected) : "engaged"
+  );
+  React7.useEffect(() => {
+    if (!selected?.id) {
+      previousSelectedIdRef.current = void 0;
+      return;
+    }
+    if (selected.id === previousSelectedIdRef.current) return;
+    previousSelectedIdRef.current = selected.id;
+    setActiveZoneId(resolveZoneId(selected));
+  }, [selected]);
+  React7.useEffect(() => {
+    if (!portal) return void 0;
+    const timeout = window.setTimeout(() => setPortal(null), 620);
+    return () => window.clearTimeout(timeout);
+  }, [portal]);
+  React7.useEffect(() => {
+    const onFullscreenChange = () => {
+      setIsFullscreen(document.fullscreenElement === containerRef.current);
+    };
+    document.addEventListener("fullscreenchange", onFullscreenChange);
+    return () => document.removeEventListener("fullscreenchange", onFullscreenChange);
+  }, []);
+  const activeZone = resolveZoneDefinition(activeZoneId);
+  const activeZoneItems = React7.useMemo(
+    () => (board?.agents || []).filter((item) => resolveZoneId(item) === activeZoneId),
+    [activeZoneId, board]
+  );
+  const selectedPeers = React7.useMemo(
+    () => (board?.agents || []).filter((item) => resolveZoneId(item) === activeZoneId),
+    [activeZoneId, board]
+  );
+  const gameMap = React7.useMemo(
+    () => board ? buildWorkboardGameMapConfig({
+      board,
+      activeZoneId,
+      selectedAgentId: selected?.id
+    }) : null,
+    [activeZoneId, board, selected?.id]
+  );
+  const motionNodes = React7.useMemo(() => {
+    if (!gameMap) return [];
+    if (stageLevel === "clusters") {
+      return gameMap.actors.map((actor, index) => {
+        const route = gameMap.corridors.find((item) => item.id === `corridor-${actor.id}`);
+        return {
+          id: actor.id,
+          anchor: actor.overviewAnchor,
+          swayX: 6 + index % 3 * 2.5,
+          swayY: 4 + index % 4 * 1.7,
+          phase: index * 0.9,
+          speed: 0.8 + index % 5 * 0.08,
+          mode: "route",
+          route: route?.points || actor.overviewRoute,
+          dwellRatio: route?.dwellRatio,
+          snapSize: route?.snapSize
+        };
+      });
+    }
+    return gameMap.actors.filter((actor) => actor.zoneId === activeZoneId && actor.focusedAnchor).map((actor, index) => {
+      const route = gameMap.patrols.find((item) => item.id === actor.focusedRouteId);
+      const fallbackPoint = actor.focusedAnchor || {
+        x: WORKBOARD_STAGE_WIDTH / 2,
+        y: WORKBOARD_STAGE_HEIGHT / 2
+      };
+      return {
+        id: actor.id,
+        anchor: fallbackPoint,
+        swayX: 9 + index % 3 * 2.2,
+        swayY: 6 + index % 4 * 1.6,
+        phase: index * 0.82,
+        speed: 0.95 + index % 5 * 0.1,
+        mode: "route",
+        route: route?.points || gameMap.patrols[index % Math.max(gameMap.patrols.length, 1)]?.points || [fallbackPoint],
+        dwellRatio: route?.dwellRatio,
+        snapSize: route?.snapSize
+      };
+    });
+  }, [activeZoneId, gameMap, stageLevel]);
+  const motionFrames = useWorkboardMotion({ nodes: motionNodes, flowMode });
+  const stageScale = useWorkboardStageViewportScale({
+    viewportRef: stageViewportRef,
+    isFullscreen
+  });
+  const triggerPortal = React7.useCallback((label, mode) => {
+    setPortal((prev) => ({
+      key: (prev?.key || 0) + 1,
+      label,
+      mode
+    }));
+  }, []);
+  const openZone = React7.useCallback(
+    (zoneId) => {
+      triggerPortal(resolveZoneDefinition(zoneId).title, "enter");
+      setActiveZoneId(zoneId);
+      setStageLevel("agents");
+      setDetailsCollapsed(true);
+      const lead = resolveZoneLead({ board, zoneId });
+      if (lead) onSelectAgent?.(lead.id);
+    },
+    [board, onSelectAgent, triggerPortal]
+  );
+  const openAgent = React7.useCallback(
+    (agentId) => {
+      const item = (board?.agents || []).find((entry) => entry.id === agentId);
+      if (!item) return;
+      const nextZoneId = resolveZoneId(item);
+      if (stageLevel === "clusters" || nextZoneId !== activeZoneId) {
+        triggerPortal(resolveZoneDefinition(nextZoneId).title, "enter");
+      }
+      setActiveZoneId(nextZoneId);
+      setStageLevel("agents");
+      setDetailsCollapsed(true);
+      onSelectAgent?.(agentId);
+    },
+    [activeZoneId, board, onSelectAgent, stageLevel, triggerPortal]
+  );
+  const backToAtlas = React7.useCallback(() => {
+    triggerPortal("World Atlas", "world");
+    setStageLevel("clusters");
+  }, [triggerPortal]);
+  const handleWorldKeyDown = React7.useCallback(
+    (event) => {
+      if (!gameMap) return;
+      if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+        event.preventDefault();
+        const nextZoneId = resolveAdjacentZoneId({
+          zones: gameMap.zones,
+          activeZoneId,
+          direction: event.key === "ArrowRight" ? 1 : -1
+        });
+        setActiveZoneId(nextZoneId);
+        return;
+      }
+      if (event.key === "Enter" && stageLevel === "clusters") {
+        event.preventDefault();
+        openZone(activeZoneId);
+        return;
+      }
+      if (event.key === "Escape" && stageLevel === "agents") {
+        event.preventDefault();
+        backToAtlas();
+      }
+    },
+    [activeZoneId, backToAtlas, gameMap, openZone, stageLevel]
+  );
+  const toggleFullscreen = React7.useCallback(async () => {
+    const container = containerRef.current;
+    if (!container) return;
+    if (document.fullscreenElement === container) {
+      await document.exitFullscreen();
+      return;
+    }
+    if (document.fullscreenElement) await document.exitFullscreen();
+    await container.requestFullscreen();
+  }, []);
+  if (!board || !gameMap) {
+    return /* @__PURE__ */ jsx25(
+      "div",
+      {
+        className: cn(
+          "grid min-h-72 place-items-center border-2 border-dashed border-border/70 bg-[linear-gradient(145deg,rgba(247,244,236,0.84),rgba(255,255,255,0.95))] text-sm text-muted-foreground",
+          className
+        ),
+        style: { clipPath: PIXEL_PANEL_CLIP4 },
+        children: loading ? "\u6B63\u5728\u751F\u6210 workboard game world..." : "\u5F53\u524D\u6CA1\u6709\u53EF\u5C55\u793A\u7684 workboard game world\u3002"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs12("section", { className: cn("min-h-full", className), children: [
+    /* @__PURE__ */ jsx25(WorkboardGameStyles, {}),
+    /* @__PURE__ */ jsxs12(
+      "section",
+      {
+        ref: containerRef,
+        tabIndex: 0,
+        onKeyDown: handleWorldKeyDown,
+        className: cn(
+          "relative overflow-hidden bg-[linear-gradient(145deg,rgba(236,232,218,0.96),rgba(255,252,247,0.98)_42%,rgba(217,231,224,0.76))] outline-none focus-visible:ring-2 focus-visible:ring-foreground/30",
+          isFullscreen ? "h-[100dvh] rounded-none" : "border-2 border-border/70 p-2 shadow-[0_8px_0_rgba(17,17,19,0.12)]"
+        ),
+        style: isFullscreen ? void 0 : { clipPath: PIXEL_PANEL_CLIP4 },
+        children: [
+          /* @__PURE__ */ jsx25("div", { className: "pointer-events-none absolute inset-0 z-10 bg-[linear-gradient(rgba(17,17,19,0.04)_1px,transparent_1px),linear-gradient(90deg,rgba(17,17,19,0.04)_1px,transparent_1px)] bg-[size:18px_18px] opacity-40" }),
+          /* @__PURE__ */ jsx25(
+            "div",
+            {
+              className: "pointer-events-none absolute inset-x-0 top-0 z-10 h-16 bg-[linear-gradient(180deg,transparent,rgba(17,17,19,0.08),transparent)]",
+              style: { animation: "workboard-world-scan 4.5s steps(6, end) infinite" }
+            }
+          ),
+          /* @__PURE__ */ jsx25(
+            WorkboardGameHud,
+            {
+              board,
+              stageLevel,
+              activeZone,
+              selected,
+              flowMode,
+              loading,
+              isFullscreen,
+              zones: gameMap.zones,
+              onSelectZone: openZone,
+              onBackToAtlas: backToAtlas,
+              onToggleFlowMode: () => setFlowMode((prev) => prev === "cruise" ? "turbo" : "cruise"),
+              onRefresh,
+              onToggleFullscreen: toggleFullscreen
+            }
+          ),
+          /* @__PURE__ */ jsxs12(
+            "div",
+            {
+              ref: stageViewportRef,
+              className: cn(
+                "z-20 grid w-full place-items-center",
+                isFullscreen ? "absolute inset-0 overflow-hidden" : "relative overflow-auto border-2 border-border/70 bg-[linear-gradient(145deg,rgba(251,250,247,0.96),rgba(245,248,245,0.88))]"
+              ),
+              style: isFullscreen ? void 0 : { minHeight: 720, clipPath: PIXEL_PANEL_CLIP4 },
+              children: [
+                /* @__PURE__ */ jsx25(WorkboardScaledStage, { scale: stageScale, children: stageLevel === "clusters" ? /* @__PURE__ */ jsx25(
+                  WorkboardGameAtlas,
+                  {
+                    board,
+                    gameMap,
+                    activeZoneId,
+                    selectedAgentId: selected?.id,
+                    flowMode,
+                    motionFrames,
+                    onSelectZone: openZone,
+                    onSelectAgent: (agentId) => openAgent(agentId)
+                  }
+                ) : /* @__PURE__ */ jsx25(
+                  WorkboardGameRoom,
+                  {
+                    zone: activeZone,
+                    items: activeZoneItems,
+                    gameMap,
+                    selectedAgentId: selected?.id,
+                    motionFrames,
+                    flowMode,
+                    onSelectAgent: openAgent
+                  }
+                ) }),
+                /* @__PURE__ */ jsx25(WorkboardWorldPortalOverlay, { portal }),
+                /* @__PURE__ */ jsx25(
+                  WorkboardGameInspector,
+                  {
+                    selected,
+                    activeZone,
+                    selectedPeers,
+                    stageLevel,
+                    collapsed: detailsCollapsed,
+                    onToggleCollapsed: () => setDetailsCollapsed((prev) => !prev),
+                    onSelectAgent: openAgent
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
 export {
   Badge,
   Button,
@@ -504,6 +4291,17 @@ export {
   CardFooter,
   CardHeader,
   CardTitle,
+  Checkbox,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
@@ -519,11 +4317,41 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
+  Input,
+  Label,
   Popover,
   PopoverContent,
   PopoverTrigger,
+  Separator,
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+  Skeleton,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Textarea,
   Toaster,
+  Toggle,
+  ToggleGroup,
+  ToggleGroupItem,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  Workboard,
   badgeVariants,
+  buildWorkboardGameMapConfig,
   buttonVariants,
-  cn
+  cn,
+  tabsListVariants,
+  toggleVariants
 };