@spacesync/client 0.1.6 → 0.1.9

package/dist/layout-canvas-view.js

@@ -1,753 +1,19 @@
-import { useTheme } from './chunk-XU3EFSQX.js';
+export { LayoutCanvasView, matchesCanvasResourceSearch } from './chunk-CKCXQBHQ.js';
+import './chunk-XU3EFSQX.js';
 import './chunk-4Y5DBM6Z.js';
-import { LIVE_RESOURCE_TYPE_META } from './chunk-ZIJQ7BXU.js';
-import { Tooltip, TooltipTrigger, TooltipContent, Popover, PopoverAnchor, PopoverContent } from './chunk-H3CNZCYU.js';
+import './chunk-ZIJQ7BXU.js';
+import './chunk-F7MU5T46.js';
 import './chunk-RV5PMZYZ.js';
 import './chunk-L65F4EMK.js';
 import './chunk-PBNBLCC2.js';
 import './chunk-VVXGQKN7.js';
 import './chunk-7YCAAP43.js';
 import './chunk-DC4QH6W2.js';
-import { PageListSearchField } from './chunk-H7EX6B6N.js';
+import './chunk-H7EX6B6N.js';
 import './chunk-LUB7QWGU.js';
-import { Button } from './chunk-VHINHHZQ.js';
+import './chunk-VHINHHZQ.js';
 import './chunk-FCY5FYJB.js';
 import './chunk-OWNUMPUC.js';
-import { cn } from './chunk-DMPSQ22Q.js';
-import { useMemo, useState, useRef, useCallback, useEffect } from 'react';
-import { Minus, Plus, Maximize2, Box, Calendar } from 'lucide-react';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-
-// src/live-space/layout-canvas-types.ts
-var DEFAULT_CANVAS_WIDTH = 1200;
-var DEFAULT_CANVAS_HEIGHT = 900;
-
-// src/live-space/plan-color.ts
-var PLAN_COLOR_PRESETS = [
-  "#4285F4",
-  "#10b981",
-  "#06b6d4",
-  "#f59e0b",
-  "#ef4444",
-  "#6366f1",
-  "#a16207",
-  "#64748b"
-];
-var DEFAULT_PLAN_COLOR = PLAN_COLOR_PRESETS[0];
-var HEX_RE = /^#[0-9A-Fa-f]{6}$/;
-function isPlanColorHex(value) {
-  return typeof value === "string" && HEX_RE.test(value);
-}
-function resolvePlanColor(color) {
-  if (isPlanColorHex(color)) return color.toUpperCase();
-  return DEFAULT_PLAN_COLOR;
-}
-function planColorBadgeStyle(hex) {
-  const normalized = isPlanColorHex(hex) ? hex : DEFAULT_PLAN_COLOR;
-  return {
-    backgroundColor: `${normalized}1F`,
-    color: normalized
-  };
-}
-function planColorCardStyle(hex) {
-  const normalized = isPlanColorHex(hex) ? hex : DEFAULT_PLAN_COLOR;
-  return {
-    backgroundColor: `color-mix(in srgb, ${normalized} 9%, color-mix(in srgb, var(--card) 78%, transparent))`,
-    borderColor: `color-mix(in srgb, ${normalized} 28%, color-mix(in srgb, var(--border) 82%, transparent))`
-  };
-}
-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`;
-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, plan } = row;
-  const planColor = resolvePlanColor(plan?.color);
-  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 hover:bg-accent transition-colors text-left",
-        searchActive && !isMatch && "opacity-40 saturate-50"
-      ),
-      style: planColorCardStyle(planColor),
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "w-6 h-6 rounded-md flex items-center justify-center shrink-0",
-            style: planColorBadgeStyle(planColor),
-            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 planColor = resolvePlanColor(plan?.color);
-  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",
-        ...planColorCardStyle(planColor)
-      },
-      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",
-        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__ */ jsx("div", { className: "min-w-0 pr-4", children: /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "text-xs font-semibold text-foreground leading-tight line-clamp-2",
-              style: { wordBreak: "break-word" },
-              children: resource.name
-            }
-          ) }),
-          plan && /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "text-[9px] font-medium px-1.5 py-0.5 rounded-md self-start",
-              style: planColorBadgeStyle(planColor),
-              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 };
+import './chunk-DMPSQ22Q.js';
 //# sourceMappingURL=layout-canvas-view.js.map
 //# sourceMappingURL=layout-canvas-view.js.map