@spacesync/client 0.1.0

package/dist/layout-canvas-view.js

@@ -0,0 +1,974 @@
+import * as React from 'react';
+import { useMemo, useState, useRef, useCallback, useEffect } from 'react';
+import { Minus, Plus, Maximize2, Box, DoorOpen, Armchair, Search, Calendar } from 'lucide-react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { useTheme } from 'next-themes';
+
+// src/live-space/layout-canvas-view.tsx
+
+// src/live-space/layout-canvas-types.ts
+var DEFAULT_CANVAS_WIDTH = 1200;
+var DEFAULT_CANVAS_HEIGHT = 900;
+var LIVE_RESOURCE_TYPE_META = {
+  desks: {
+    label: "Desk",
+    rowAccent: "text-blue-700 bg-blue-50 border-blue-100",
+    Icon: Armchair,
+    iconTile: "bg-blue-50 text-blue-600 border-blue-100 dark:bg-blue-950/50 dark:text-blue-400 dark:border-blue-900/50"
+  },
+  rooms: {
+    label: "Room",
+    rowAccent: "text-orange-700 bg-orange-50 border-orange-100",
+    Icon: DoorOpen,
+    iconTile: "bg-orange-50 text-orange-600 border-orange-100 dark:bg-orange-950/50 dark:text-orange-400 dark:border-orange-900/50"
+  },
+  other: {
+    label: "Other",
+    rowAccent: "text-purple-700 bg-purple-50 border-purple-100",
+    Icon: Box,
+    iconTile: "bg-purple-50 text-purple-600 border-purple-100 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-900/50"
+  }
+};
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium cursor-pointer transition-all disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80 active:scale-[0.98]",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 active:bg-destructive/80 active:scale-[0.98] focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 dark:active:bg-destructive/70",
+        outline: "border bg-background text-foreground hover:bg-accent hover:text-accent-foreground active:bg-accent/80 active:scale-[0.98] dark:bg-input/30 dark:border-input dark:hover:bg-input/50 dark:active:bg-input/60",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 active:bg-secondary/70 active:scale-[0.98]",
+        ghost: "hover:bg-accent hover:text-accent-foreground active:bg-accent/90 active:scale-[0.98] dark:hover:bg-accent/50 dark:active:bg-accent/40",
+        link: "text-primary underline-offset-4 hover:underline active:text-primary/80"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9 rounded-md"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React.forwardRef(function Button2({ className, variant, size, asChild = false, ...props }, ref) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size }), className),
+      ...props
+    }
+  );
+});
+Button.displayName = "Button";
+var inputVariants = cva(
+  "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-border bg-card text-foreground flex w-full min-w-0 rounded-md border px-3 py-1 text-base transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:border-blue-400 focus-visible:ring-[3px] focus-visible:ring-blue-500/25 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-red-400 aria-invalid:ring-red-500/20 md:text-sm",
+  {
+    variants: {
+      size: {
+        sm: "h-8 text-sm",
+        default: "h-9",
+        lg: "h-10",
+        xl: "h-11"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var Input = React.forwardRef(function Input2({ className, type, size, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref,
+      type,
+      "data-slot": "input",
+      className: cn(inputVariants({ size }), className),
+      ...props
+    }
+  );
+});
+function SearchField({
+  value,
+  onChange,
+  placeholder,
+  className,
+  size = "default",
+  "aria-label": ariaLabel
+}) {
+  const heightClass = size === "lg" ? "h-11" : "h-10";
+  const iconSize = size === "lg" ? 16 : 16;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-2 rounded-md border border-border bg-card px-3 w-full focus-within:border-blue-400 focus-within:ring-[3px] focus-within:ring-blue-500/25 transition-all",
+        heightClass,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Search, { size: iconSize, className: "text-muted-foreground shrink-0", strokeWidth: 2.25 }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "search",
+            value,
+            onChange: (e) => onChange(e.target.value),
+            placeholder,
+            "aria-label": ariaLabel,
+            className: "flex-1 border-0 bg-transparent shadow-none focus-visible:ring-0 px-0 min-w-0 h-auto"
+          }
+        )
+      ]
+    }
+  );
+}
+function PageListSearchField({
+  value,
+  onChange,
+  placeholder,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    SearchField,
+    {
+      value,
+      onChange,
+      placeholder,
+      className
+    }
+  );
+}
+function Popover({ ...props }) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    PopoverPrimitive.Content,
+    {
+      "data-slot": "popover-content",
+      align,
+      sideOffset,
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border border-white/10 p-4 shadow-md outline-hidden",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function PopoverAnchor({ ...props }) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
+}
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TooltipPrimitive.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({ ...props }) {
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
+}
+function TooltipTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+    TooltipPrimitive.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+      ]
+    }
+  ) });
+}
+function matchesCanvasResourceSearch(resourceName, planName, query) {
+  const q = query.trim().toLowerCase();
+  if (!q) return true;
+  const name = resourceName.toLowerCase();
+  const plan = planName?.toLowerCase() ?? "";
+  return name.includes(q) || plan.includes(q);
+}
+function resourceMatchesSearch(row, query) {
+  return matchesCanvasResourceSearch(row.resource.name, row.plan?.name, query);
+}
+var CLICK_THRESHOLD_PX = 5;
+var POPOVER_CLOSE_DELAY_MS = 250;
+var CANVAS_QUICK_BOOK_POPOVER_CLASS = "z-[100] w-56 border-border bg-card p-3 text-card-foreground shadow-lg";
+function usePrefersHover() {
+  const [prefersHover, setPrefersHover] = useState(
+    () => typeof window !== "undefined" && window.matchMedia("(hover: hover)").matches
+  );
+  useEffect(() => {
+    const mql = window.matchMedia("(hover: hover)");
+    const onChange = () => setPrefersHover(mql.matches);
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return prefersHover;
+}
+function isCanvasResourceTarget(target) {
+  return target instanceof HTMLElement && target.closest("[data-canvas-resource]") != null;
+}
+function ResourceQuickBookPopoverContent({
+  row,
+  onBook,
+  getBookingHref
+}) {
+  const { resource, merged } = row;
+  const meta = LIVE_RESOURCE_TYPE_META[resource.resourceType];
+  const TypeIcon = meta.Icon;
+  const bookingHref = getBookingHref?.(resource.id);
+  const handleBookPointerDown = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onBook?.(resource.id);
+  };
+  const bookLabel = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Calendar, { size: 14 }),
+    "Book"
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-2.5", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border",
+            meta.iconTile
+          ),
+          "aria-hidden": true,
+          children: /* @__PURE__ */ jsx(TypeIcon, { size: 16, strokeWidth: 1.75 })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-semibold leading-snug text-card-foreground", children: resource.name }),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: cn(
+              "mt-1.5 inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] font-medium",
+              merged.occupied ? "border-red-100 bg-red-50 text-red-700 dark:border-red-900/50 dark:bg-red-950/50 dark:text-red-300" : "border-emerald-100 bg-emerald-50 text-emerald-800 dark:border-emerald-900/50 dark:bg-emerald-950/50 dark:text-emerald-300"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "h-1.5 w-1.5 shrink-0 rounded-full",
+                    merged.occupied ? "bg-red-500" : "bg-emerald-500"
+                  )
+                }
+              ),
+              merged.occupied ? "Occupied" : "Free"
+            ]
+          }
+        ),
+        merged.occupied && merged.expectedFreeLabel && merged.expectedFreeLabel !== "\u2014" ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: merged.expectedFreeLabel }) : null
+      ] })
+    ] }),
+    onBook ? bookingHref ? /* @__PURE__ */ jsx(Button, { asChild: true, size: "sm", className: "w-full", children: /* @__PURE__ */ jsx("a", { href: bookingHref, onPointerDown: handleBookPointerDown, children: bookLabel }) }) : /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        size: "sm",
+        className: "w-full",
+        onPointerDown: handleBookPointerDown,
+        children: bookLabel
+      }
+    ) : /* @__PURE__ */ jsx("p", { className: "text-xs leading-relaxed text-muted-foreground", children: "Booking is not available for your account." })
+  ] });
+}
+var MIN_ZOOM = 0.12;
+var MAX_ZOOM = 4;
+var MIN_CARD_W = 90;
+var MIN_CARD_H = 56;
+var CANVAS_GRID_SIZE = 40;
+function canvasGridBackground(isDark) {
+  const line = isDark ? "oklch(0.35 0 0)" : "#e5e7eb";
+  return `linear-gradient(to right, ${line} 1px, transparent 1px),linear-gradient(to bottom, ${line} 1px, transparent 1px)`;
+}
+var CANVAS_GRID_BG_SIZE = `${CANVAS_GRID_SIZE}px ${CANVAS_GRID_SIZE}px`;
+var TYPE_META_CARD = {
+  desks: {
+    border: "border-amber-200",
+    bg: "bg-card",
+    iconBg: "bg-amber-100",
+    iconColor: "text-amber-600",
+    badgeBg: "bg-amber-50",
+    badgeText: "text-amber-700"
+  },
+  rooms: {
+    border: "border-blue-200",
+    bg: "bg-card",
+    iconBg: "bg-blue-100",
+    iconColor: "text-blue-600 dark:text-blue-400",
+    badgeBg: "bg-blue-50",
+    badgeText: "text-blue-700 dark:text-blue-400"
+  },
+  other: {
+    border: "border-slate-200",
+    bg: "bg-card",
+    iconBg: "bg-slate-100",
+    iconColor: "text-slate-600",
+    badgeBg: "bg-slate-50",
+    badgeText: "text-slate-600"
+  }
+};
+var TYPE_ICON = {
+  desks: Armchair,
+  rooms: DoorOpen,
+  other: Box
+};
+function isFloorResourceType(type) {
+  return type === "desks" || type === "rooms";
+}
+function poolSlotsLabel(totalSlots) {
+  if (totalSlots == null) return null;
+  return `${totalSlots} slot${totalSlots !== 1 ? "s" : ""}`;
+}
+function PoolResourceChip({
+  row,
+  onClick,
+  quickBookConfig,
+  searchQuery,
+  isMatch
+}) {
+  const { resource, merged } = row;
+  const m = TYPE_META_CARD.other;
+  const slots = poolSlotsLabel(resource.totalSlots);
+  const searchActive = searchQuery.trim().length > 0;
+  const chip = /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "data-canvas-resource": "",
+      onClick: (e) => {
+        e.stopPropagation();
+        if (quickBookConfig) {
+          if (!quickBookConfig.shouldIgnoreToggle()) quickBookConfig.onToggle();
+        } else onClick?.();
+      },
+      onMouseEnter: () => {
+        if (quickBookConfig?.hover.prefersHover) {
+          quickBookConfig.hover.clearClose();
+          quickBookConfig.onOpen();
+        }
+      },
+      onMouseLeave: () => {
+        if (quickBookConfig?.hover.prefersHover) quickBookConfig.hover.scheduleClose();
+      },
+      className: cn(
+        "inline-flex items-center gap-2 shrink-0 px-3 py-1.5 rounded-lg border bg-card hover:bg-accent transition-colors text-left",
+        m.border,
+        searchActive && !isMatch && "opacity-40 saturate-50"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "w-6 h-6 rounded-md flex items-center justify-center shrink-0",
+              m.iconBg,
+              m.iconColor
+            ),
+            children: /* @__PURE__ */ jsx(Box, { size: 12 })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground whitespace-nowrap", children: resource.name }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "h-2 w-2 rounded-full shrink-0",
+              merged.occupied ? "bg-red-500" : "bg-emerald-500"
+            )
+          }
+        ),
+        slots && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground whitespace-nowrap", children: slots })
+      ]
+    }
+  );
+  if (!quickBookConfig) return chip;
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      modal: false,
+      open: quickBookConfig.open,
+      onOpenChange: quickBookConfig.onOpenChange,
+      children: [
+        /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: chip }),
+        /* @__PURE__ */ jsx(
+          PopoverContent,
+          {
+            side: "top",
+            align: "center",
+            sideOffset: 6,
+            className: CANVAS_QUICK_BOOK_POPOVER_CLASS,
+            onOpenAutoFocus: (e) => e.preventDefault(),
+            onMouseEnter: quickBookConfig.hover.clearClose,
+            onMouseLeave: quickBookConfig.hover.scheduleClose,
+            children: /* @__PURE__ */ jsx(
+              ResourceQuickBookPopoverContent,
+              {
+                row,
+                onBook: quickBookConfig.quickBook.onBook,
+                getBookingHref: quickBookConfig.quickBook.getBookingHref
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function PlacedCardView({
+  id,
+  rect,
+  row,
+  onSelect,
+  quickBookConfig,
+  searchQuery,
+  isMatch
+}) {
+  const { resource, merged, plan } = row;
+  const type = resource.resourceType;
+  const m = TYPE_META_CARD[type];
+  const TypeIcon = TYPE_ICON[type];
+  const w = Math.max(rect.w, MIN_CARD_W);
+  const h = Math.max(rect.h, MIN_CARD_H);
+  const statusLabel = merged.occupied ? "Occupied" : merged.manual ? "Vacant" : "Free";
+  const pointerStart = useRef(null);
+  const searchActive = searchQuery.trim().length > 0;
+  const handlePointerDown = (e) => {
+    if (e.button !== 0) return;
+    e.stopPropagation();
+    pointerStart.current = { x: e.clientX, y: e.clientY };
+  };
+  const handlePointerUp = (e) => {
+    e.stopPropagation();
+    const start = pointerStart.current;
+    pointerStart.current = null;
+    if (!start || quickBookConfig) return;
+    if (Math.hypot(e.clientX - start.x, e.clientY - start.y) < CLICK_THRESHOLD_PX) {
+      onSelect?.(id);
+    }
+  };
+  const statusDot = /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "block h-2.5 w-2.5 rounded-full ring-2 ring-white shadow-sm",
+        merged.occupied ? "bg-red-500 animate-pulse" : "bg-emerald-500"
+      ),
+      "aria-label": statusLabel
+    }
+  );
+  const card = /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "data-canvas-resource": "",
+      style: {
+        position: "absolute",
+        left: rect.x,
+        top: rect.y,
+        width: w,
+        height: h,
+        touchAction: "manipulation"
+      },
+      className: cn(
+        "rounded-xl border shadow-sm overflow-hidden select-none text-left cursor-pointer hover:shadow-md transition-shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/40",
+        m.border,
+        m.bg,
+        searchActive && !isMatch && "opacity-40 saturate-50"
+      ),
+      onPointerDown: handlePointerDown,
+      onPointerUp: handlePointerUp,
+      onPointerCancel: handlePointerUp,
+      onClick: (e) => {
+        e.stopPropagation();
+        if (quickBookConfig && !quickBookConfig.shouldIgnoreToggle()) {
+          quickBookConfig.onToggle();
+        }
+      },
+      onMouseEnter: () => {
+        if (quickBookConfig?.hover.prefersHover) {
+          quickBookConfig.hover.clearClose();
+          quickBookConfig.onOpen();
+        }
+      },
+      onMouseLeave: () => {
+        if (quickBookConfig?.hover.prefersHover) quickBookConfig.hover.scheduleClose();
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 z-10 pointer-events-none", children: quickBookConfig ? statusDot : /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: statusDot }),
+          /* @__PURE__ */ jsx(TooltipContent, { side: "top", className: "text-xs", children: statusLabel })
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex flex-col justify-between p-3 pointer-events-none", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 min-w-0 pr-4", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "shrink-0 rounded-lg flex items-center justify-center",
+                  m.iconBg,
+                  m.iconColor
+                ),
+                style: { width: 28, height: 28 },
+                children: /* @__PURE__ */ jsx(TypeIcon, { size: 14, strokeWidth: 2 })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "text-xs font-semibold text-foreground leading-tight pt-0.5 line-clamp-2 min-w-0 flex-1",
+                style: { wordBreak: "break-word" },
+                children: resource.name
+              }
+            )
+          ] }),
+          plan && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "text-[9px] font-medium px-1.5 py-0.5 rounded-md self-start",
+                m.badgeBg,
+                m.badgeText
+              ),
+              children: plan.name
+            }
+          )
+        ] })
+      ]
+    }
+  );
+  if (!quickBookConfig) return card;
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      modal: false,
+      open: quickBookConfig.open,
+      onOpenChange: quickBookConfig.onOpenChange,
+      children: [
+        /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: card }),
+        /* @__PURE__ */ jsx(
+          PopoverContent,
+          {
+            side: "top",
+            align: "center",
+            sideOffset: 6,
+            className: CANVAS_QUICK_BOOK_POPOVER_CLASS,
+            onOpenAutoFocus: (e) => e.preventDefault(),
+            onMouseEnter: quickBookConfig.hover.clearClose,
+            onMouseLeave: quickBookConfig.hover.scheduleClose,
+            children: /* @__PURE__ */ jsx(
+              ResourceQuickBookPopoverContent,
+              {
+                row,
+                onBook: quickBookConfig.quickBook.onBook,
+                getBookingHref: quickBookConfig.quickBook.getBookingHref
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function LayoutCanvasView({
+  layout,
+  rows,
+  onResourceSelect,
+  resourceQuickBook,
+  searchQuery = "",
+  onSearchQueryChange,
+  searchPlaceholder = "Search resources\u2026"
+}) {
+  const { resolvedTheme } = useTheme();
+  const isDarkCanvas = resolvedTheme === "dark";
+  const { placedItems, bgImage } = layout;
+  const prefersHover = usePrefersHover();
+  const canvasSize = useMemo(
+    () => ({
+      w: layout.canvasWidth ?? DEFAULT_CANVAS_WIDTH,
+      h: layout.canvasHeight ?? DEFAULT_CANVAS_HEIGHT
+    }),
+    [layout.canvasWidth, layout.canvasHeight]
+  );
+  const [zoom, setZoom] = useState(0.5);
+  const [pan, setPan] = useState({ x: 40, y: 40 });
+  const [isPanning, setIsPanning] = useState(false);
+  const [openResourceId, setOpenResourceId] = useState(null);
+  const viewportRef = useRef(null);
+  const gestureRef = useRef(null);
+  const zoomRef = useRef(zoom);
+  const panRef = useRef(pan);
+  const popoverCloseTimerRef = useRef(null);
+  const suppressResourceToggleRef = useRef(false);
+  const clearPopoverCloseTimer = useCallback(() => {
+    if (popoverCloseTimerRef.current) {
+      clearTimeout(popoverCloseTimerRef.current);
+      popoverCloseTimerRef.current = null;
+    }
+  }, []);
+  const schedulePopoverClose = useCallback(() => {
+    clearPopoverCloseTimer();
+    popoverCloseTimerRef.current = setTimeout(() => {
+      setOpenResourceId(null);
+      popoverCloseTimerRef.current = null;
+    }, POPOVER_CLOSE_DELAY_MS);
+  }, [clearPopoverCloseTimer]);
+  const popoverHover = useMemo(
+    () => ({
+      prefersHover,
+      clearClose: clearPopoverCloseTimer,
+      scheduleClose: schedulePopoverClose
+    }),
+    [prefersHover, clearPopoverCloseTimer, schedulePopoverClose]
+  );
+  const openPopover = useCallback(
+    (id) => {
+      clearPopoverCloseTimer();
+      setOpenResourceId(id);
+    },
+    [clearPopoverCloseTimer]
+  );
+  const togglePopover = useCallback(
+    (id) => {
+      clearPopoverCloseTimer();
+      setOpenResourceId((current) => current === id ? null : id);
+    },
+    [clearPopoverCloseTimer]
+  );
+  useEffect(() => () => clearPopoverCloseTimer(), [clearPopoverCloseTimer]);
+  useEffect(() => {
+    zoomRef.current = zoom;
+  }, [zoom]);
+  useEffect(() => {
+    panRef.current = pan;
+  }, [pan]);
+  const rowById = useMemo(() => new Map(rows.map((r) => [r.resource.id, r])), [rows]);
+  const otherRows = useMemo(
+    () => rows.filter((r) => r.resource.resourceType === "other"),
+    [rows]
+  );
+  const fitCanvas = useCallback(() => {
+    const vp = viewportRef.current;
+    if (!vp) return;
+    const vpRect = vp.getBoundingClientRect();
+    const newZoom = Math.max(
+      MIN_ZOOM,
+      Math.min(
+        MAX_ZOOM,
+        Math.min((vpRect.width - 80) / canvasSize.w, (vpRect.height - 80) / canvasSize.h)
+      )
+    );
+    setPan({
+      x: (vpRect.width - canvasSize.w * newZoom) / 2,
+      y: (vpRect.height - canvasSize.h * newZoom) / 2
+    });
+    setZoom(newZoom);
+  }, [canvasSize.h, canvasSize.w]);
+  useEffect(() => {
+    fitCanvas();
+  }, [fitCanvas]);
+  useEffect(() => {
+    const el = viewportRef.current;
+    if (!el) return;
+    const onWheel = (e) => {
+      e.preventDefault();
+      const vpRect = el.getBoundingClientRect();
+      const mx = e.clientX - vpRect.left;
+      const my = e.clientY - vpRect.top;
+      const factor = e.deltaY < 0 ? 1.08 : 1 / 1.08;
+      const curZ = zoomRef.current;
+      const newZ = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, curZ * factor));
+      const curP = panRef.current;
+      setZoom(newZ);
+      setPan({
+        x: mx - (mx - curP.x) * (newZ / curZ),
+        y: my - (my - curP.y) * (newZ / curZ)
+      });
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => el.removeEventListener("wheel", onWheel);
+  }, []);
+  const stepZoom = (delta) => {
+    const vp = viewportRef.current;
+    const curZ = zoomRef.current;
+    const newZ = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, curZ + delta));
+    if (vp) {
+      const vpRect = vp.getBoundingClientRect();
+      const cx = vpRect.width / 2;
+      const cy = vpRect.height / 2;
+      const curP = panRef.current;
+      setPan({
+        x: cx - (cx - curP.x) * (newZ / curZ),
+        y: cy - (cy - curP.y) * (newZ / curZ)
+      });
+    }
+    setZoom(newZ);
+  };
+  useEffect(() => {
+    const onKeyDown = (e) => {
+      const tag = e.target?.tagName;
+      if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
+      if (e.key === "+" || e.key === "=") {
+        e.preventDefault();
+        stepZoom(0.15);
+      } else if (e.key === "-" || e.key === "_") {
+        e.preventDefault();
+        stepZoom(-0.15);
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  });
+  const handleViewportPointerDown = (e) => {
+    if (e.button !== 0 && e.button !== 1) return;
+    if (isCanvasResourceTarget(e.target)) return;
+    clearPopoverCloseTimer();
+    setOpenResourceId(null);
+    e.preventDefault();
+    e.currentTarget.setPointerCapture(e.pointerId);
+    setIsPanning(true);
+    gestureRef.current = {
+      type: "pan",
+      startMX: e.clientX,
+      startMY: e.clientY,
+      startPanX: panRef.current.x,
+      startPanY: panRef.current.y
+    };
+  };
+  const handleViewportPointerMove = (e) => {
+    const g = gestureRef.current;
+    if (g?.type !== "pan") return;
+    setPan({
+      x: g.startPanX + (e.clientX - g.startMX),
+      y: g.startPanY + (e.clientY - g.startMY)
+    });
+  };
+  const handleViewportPointerUp = () => {
+    if (gestureRef.current?.type === "pan") {
+      gestureRef.current = null;
+      setIsPanning(false);
+    }
+  };
+  const handleSelect = (id) => onResourceSelect?.(id);
+  const quickBookConfigFor = useCallback(
+    (resourceId) => {
+      if (!resourceQuickBook) return void 0;
+      const wrappedOnBook = resourceQuickBook.onBook ? (id) => {
+        suppressResourceToggleRef.current = true;
+        clearPopoverCloseTimer();
+        setOpenResourceId(null);
+        resourceQuickBook.onBook?.(id);
+        window.setTimeout(() => {
+          suppressResourceToggleRef.current = false;
+        }, 400);
+      } : void 0;
+      return {
+        quickBook: {
+          ...resourceQuickBook,
+          onBook: wrappedOnBook
+        },
+        open: openResourceId === resourceId,
+        onOpenChange: (open) => {
+          clearPopoverCloseTimer();
+          setOpenResourceId(open ? resourceId : null);
+        },
+        hover: popoverHover,
+        onOpen: () => openPopover(resourceId),
+        onToggle: () => togglePopover(resourceId),
+        shouldIgnoreToggle: () => suppressResourceToggleRef.current
+      };
+    },
+    [
+      resourceQuickBook,
+      openResourceId,
+      clearPopoverCloseTimer,
+      popoverHover,
+      openPopover,
+      togglePopover
+    ]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 min-h-0 bg-card", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 p-2 border-b border-border bg-card shrink-0", children: [
+      onSearchQueryChange != null ? /* @__PURE__ */ jsx(
+        PageListSearchField,
+        {
+          value: searchQuery,
+          onChange: onSearchQueryChange,
+          placeholder: searchPlaceholder,
+          className: "min-w-0 flex-1 max-w-md h-9"
+        }
+      ) : null,
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0 ml-auto", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => stepZoom(-0.15),
+            className: "w-7 h-7 rounded-lg border border-border bg-card flex items-center justify-center text-muted-foreground hover:bg-accent transition-colors",
+            "aria-label": "Zoom out",
+            children: /* @__PURE__ */ jsx(Minus, { size: 12 })
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground w-10 text-center tabular-nums select-none", children: [
+          Math.round(zoom * 100),
+          "%"
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => stepZoom(0.15),
+            className: "w-7 h-7 rounded-lg border border-border bg-card flex items-center justify-center text-muted-foreground hover:bg-accent transition-colors",
+            "aria-label": "Zoom in",
+            children: /* @__PURE__ */ jsx(Plus, { size: 12 })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: fitCanvas,
+            className: "inline-flex items-center gap-1 px-2.5 h-7 rounded-lg border border-border bg-card text-xs text-muted-foreground hover:bg-accent transition-colors",
+            children: [
+              /* @__PURE__ */ jsx(Maximize2, { size: 11 }),
+              "Fit"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 min-w-0 min-h-0", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: viewportRef,
+          tabIndex: 0,
+          className: "flex-1 min-h-[420px] overflow-hidden relative bg-card outline-none",
+          style: { cursor: isPanning ? "grabbing" : "grab" },
+          onPointerDown: handleViewportPointerDown,
+          onPointerMove: handleViewportPointerMove,
+          onPointerUp: handleViewportPointerUp,
+          onPointerCancel: handleViewportPointerUp,
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                transformOrigin: "0px 0px",
+                transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
+                width: canvasSize.w,
+                height: canvasSize.h,
+                backgroundImage: bgImage ? "none" : canvasGridBackground(isDarkCanvas),
+                backgroundSize: bgImage ? "auto" : CANVAS_GRID_BG_SIZE,
+                backgroundColor: "var(--card)",
+                boxShadow: isDarkCanvas ? "0 2px 16px rgba(0,0,0,0.45)" : "0 2px 16px rgba(0,0,0,0.12)"
+              },
+              children: [
+                bgImage && /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: bgImage,
+                    alt: "Floor plan",
+                    draggable: false,
+                    style: {
+                      position: "absolute",
+                      inset: 0,
+                      width: "100%",
+                      height: "100%",
+                      objectFit: "cover",
+                      pointerEvents: "none",
+                      userSelect: "none"
+                    }
+                  }
+                ),
+                Object.entries(placedItems).map(([id, rect]) => {
+                  const row = rowById.get(id);
+                  if (!row || !isFloorResourceType(row.resource.resourceType)) return null;
+                  return /* @__PURE__ */ jsx(
+                    PlacedCardView,
+                    {
+                      id,
+                      rect,
+                      row,
+                      onSelect: resourceQuickBook ? void 0 : handleSelect,
+                      quickBookConfig: quickBookConfigFor(id),
+                      searchQuery,
+                      isMatch: resourceMatchesSearch(row, searchQuery)
+                    },
+                    id
+                  );
+                })
+              ]
+            }
+          )
+        }
+      ),
+      otherRows.length > 0 && /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t border-border bg-card px-4 py-2.5", children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 overflow-x-auto pb-0.5", children: otherRows.map((row) => {
+        const resourceId = row.resource.id;
+        return /* @__PURE__ */ jsx(
+          PoolResourceChip,
+          {
+            row,
+            onClick: resourceQuickBook ? void 0 : () => handleSelect(resourceId),
+            quickBookConfig: quickBookConfigFor(resourceId),
+            searchQuery,
+            isMatch: resourceMatchesSearch(row, searchQuery)
+          },
+          resourceId
+        );
+      }) }) })
+    ] })
+  ] });
+}
+
+export { LayoutCanvasView, matchesCanvasResourceSearch };
+//# sourceMappingURL=layout-canvas-view.js.map
+//# sourceMappingURL=layout-canvas-view.js.map