@pisell/materials 1.0.1056 → 1.0.1058

package/lib/components/pisellFloorMapLayout/PisellFloorMapLayout.stories.js

@@ -0,0 +1,755 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellFloorMapLayout/PisellFloorMapLayout.stories.tsx
+var PisellFloorMapLayout_stories_exports = {};
+__export(PisellFloorMapLayout_stories_exports, {
+  ControlsHidden: () => ControlsHidden,
+  Default: () => Default,
+  FigmaDesign: () => FigmaDesign,
+  PixelUnits: () => PixelUnits,
+  WithEvents: () => WithEvents,
+  WithGrid: () => WithGrid,
+  WithPan: () => WithPan,
+  WithRefControls: () => WithRefControls,
+  WithShapes: () => WithShapes,
+  WithVariableSizes: () => WithVariableSizes,
+  default: () => PisellFloorMapLayout_stories_default
+});
+module.exports = __toCommonJS(PisellFloorMapLayout_stories_exports);
+var import_react = require("react");
+var import_antd = require("antd");
+var import_icons = require("@ant-design/icons");
+var import_PisellFloorMapLayout = require("./PisellFloorMapLayout");
+var FIGMA = {
+  white: "#FFFFFF",
+  gray50: "#F9FAFB",
+  gray100: "#F2F4F7",
+  gray200: "#EAECF0",
+  gray300: "#D0D5DD",
+  gray400: "#98A2B3",
+  gray500: "#667085",
+  gray700: "#344054",
+  gray900: "#101828",
+  shadowSm: "0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1)",
+  fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+  // 状态色（与图例、卡片边框及小条一致）
+  available: "#EAECF0",
+  reserved: "#9254de",
+  waiting: "#fa8c16",
+  dining: "#1890ff",
+  billed: "#52c41a",
+  availableSoon: "#f5222d",
+  /** 选中 Tab 背景（node 13998:648） */
+  tabActiveBg: "#1890ff",
+  /** 矩形外小条：Available 用灰，有状态用对应边框色 */
+  barFillAvailable: "#EAECF0",
+  /** 图例圆点色（Figma 14131:6266 设计 token） */
+  legendReserved: "#D6BBFB",
+  legendWaiting: "#FEC84B",
+  legendDining: "#84CAFF",
+  legendBilled: "#75E0A7",
+  legendAvailableSoon: "#FDA29B"
+};
+var meta = {
+  title: "Data Display/PisellFloorMapLayout",
+  component: import_PisellFloorMapLayout.PisellFloorMapLayout,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: "在二维平面按坐标渲染资源，状态由外部通过 item 与 renderItem 传入。支持 itemUnit：cell（格子数）或 pixel（像素）；格子模式下可用 mapLayer.gap 控制 item 间距。支持底层背景/网格、缩放/平移、内置视图控制按钮。"
+      }
+    }
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    itemUnit: {
+      control: "select",
+      options: ["cell", "pixel"],
+      description: "item 坐标与尺寸单位：cell 格子数，pixel 像素"
+    },
+    layoutMode: {
+      control: "select",
+      options: ["free", "grid"],
+      description: "布局模式"
+    },
+    enableHover: {
+      control: "boolean",
+      description: "是否开启 hover"
+    }
+  }
+};
+var PisellFloorMapLayout_stories_default = meta;
+var defaultItems = [
+  { id: "S-1", x: 0, y: 0 },
+  { id: "S-2", x: 1, y: 0 },
+  { id: "S-3", x: 2, y: 0 },
+  { id: "S-4", x: 3, y: 0 },
+  { id: "M-1", x: 0, y: 1 },
+  { id: "M-2", x: 1, y: 1 },
+  { id: "M-3", x: 2, y: 1 },
+  { id: "M-4", x: 3, y: 1 },
+  { id: "L-1", x: 0, y: 2 },
+  { id: "L-2", x: 1, y: 2 },
+  { id: "L-3", x: 2, y: 2 },
+  { id: "X-1", x: 0, y: 3 },
+  { id: "X-2", x: 1, y: 3 },
+  { id: "X-3", x: 2, y: 3 },
+  { id: "X-4", x: 3, y: 3 }
+];
+function renderSimpleItem(item) {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "#fff",
+        border: "4px solid #d9d9d9",
+        borderRadius: 4,
+        fontSize: 12
+      }
+    },
+    item.id
+  );
+}
+var Default = {
+  args: {
+    items: defaultItems,
+    renderItem: (item) => renderSimpleItem(item),
+    itemUnit: "cell",
+    mapLayer: {
+      backgroundType: "color",
+      backgroundColor: "#f5f5f5",
+      padding: 16,
+      gap: 8
+    },
+    zoom: { defaultScale: 1, min: 0.5, max: 2 },
+    pan: { enabled: false },
+    enableHover: true
+  }
+};
+var WithGrid = {
+  args: {
+    items: defaultItems,
+    renderItem: (item) => renderSimpleItem(item),
+    itemUnit: "cell",
+    mapLayer: {
+      backgroundType: "color",
+      backgroundColor: "#fafafa",
+      showGrid: true,
+      padding: 16,
+      gap: 8
+    },
+    zoom: { defaultScale: 1 },
+    pan: { enabled: true }
+  }
+};
+var WithPan = {
+  args: {
+    items: defaultItems,
+    renderItem: (item) => renderSimpleItem(item),
+    itemUnit: "cell",
+    mapLayer: {
+      backgroundType: "color",
+      backgroundColor: "#f0f5ff",
+      showGrid: true,
+      padding: 16,
+      gap: 8
+    },
+    zoom: { defaultScale: 1 },
+    pan: { enabled: true },
+    controls: { showZoom: true, showReset: true, showFitBounds: true }
+  }
+};
+var shapeItems = [
+  { id: "rect", x: 0, y: 0, shape: "rect" },
+  { id: "circle", x: 2, y: 0, shape: "circle" },
+  { id: "triangle", x: 4, y: 0, shape: "triangle" },
+  { id: "rect2", x: 0, y: 2, width: 2, height: 1 }
+];
+var WithShapes = {
+  args: {
+    items: shapeItems,
+    renderItem: (item) => renderSimpleItem(item),
+    itemUnit: "cell",
+    mapLayer: {
+      backgroundType: "color",
+      backgroundColor: "#f5f5f5",
+      showGrid: true,
+      padding: 16,
+      gap: 8
+    },
+    zoom: { defaultScale: 1 },
+    pan: { enabled: true }
+  }
+};
+var variableSizeItems = [
+  { id: "1x1", x: 0, y: 0 },
+  { id: "2x1", x: 1, y: 0, width: 2, height: 1 },
+  { id: "1x2", x: 3, y: 0, width: 1, height: 2 },
+  { id: "2x2", x: 0, y: 2, width: 2, height: 2 },
+  { id: "3x1", x: 2, y: 2, width: 3, height: 1 }
+];
+var WithVariableSizes = {
+  parameters: {
+    docs: {
+      description: {
+        story: "itemUnit 为 cell 时，每条数据可设置 width/height（格子数），实现不同大小的格子。"
+      }
+    }
+  },
+  args: {
+    items: variableSizeItems,
+    renderItem: (item) => renderSimpleItem(item),
+    itemUnit: "cell",
+    cellSize: 72,
+    mapLayer: {
+      backgroundType: "color",
+      backgroundColor: "#f5f5f5",
+      showGrid: true,
+      padding: 16,
+      gap: 8
+    },
+    zoom: { defaultScale: 1 },
+    pan: { enabled: true }
+  }
+};
+var pixelItems = [
+  { id: "A", x: 20, y: 20, width: 100, height: 80 },
+  { id: "B", x: 140, y: 20, width: 200, height: 80 },
+  { id: "C", x: 20, y: 120, width: 80, height: 100 },
+  { id: "D", x: 120, y: 120, width: 150, height: 120 },
+  { id: "E", x: 290, y: 120 }
+  // 不写 width/height 时使用 cellSize 作为默认尺寸
+];
+var PixelUnits = {
+  parameters: {
+    docs: {
+      description: {
+        story: "itemUnit 为 pixel 时，item 的 x、y、width、height 均为像素；不写 width/height 时以 cellSize 为默认宽高。"
+      }
+    }
+  },
+  args: {
+    items: pixelItems,
+    renderItem: (item) => renderSimpleItem(item),
+    itemUnit: "pixel",
+    cellSize: 64,
+    mapLayer: {
+      backgroundType: "color",
+      backgroundColor: "#f5f5f5",
+      padding: 16
+    },
+    zoom: { defaultScale: 1 },
+    pan: { enabled: true }
+  }
+};
+var WithEvents = {
+  args: {
+    items: defaultItems.slice(0, 6),
+    renderItem: (item) => renderSimpleItem(item),
+    itemUnit: "cell",
+    mapLayer: {
+      backgroundType: "color",
+      backgroundColor: "#f5f5f5",
+      padding: 16,
+      gap: 8
+    },
+    enableHover: true,
+    onItemClick: (item) => {
+      console.log("click", item.id);
+      alert(`点击了 ${item.id}`);
+    },
+    onItemHover: (item) => console.log("hover", item.id),
+    onItemLeave: (item) => console.log("leave", item.id)
+  }
+};
+var WithRefControls = {
+  render: function WithRefControlsRender() {
+    const ref = (0, import_react.useRef)(null);
+    return /* @__PURE__ */ React.createElement(import_antd.Space, { direction: "vertical", style: { width: "100%" }, size: "middle" }, /* @__PURE__ */ React.createElement(import_antd.Space, null, /* @__PURE__ */ React.createElement(import_antd.Button, { onClick: () => {
+      var _a;
+      return (_a = ref.current) == null ? void 0 : _a.zoomIn();
+    } }, "放大"), /* @__PURE__ */ React.createElement(import_antd.Button, { onClick: () => {
+      var _a;
+      return (_a = ref.current) == null ? void 0 : _a.zoomOut();
+    } }, "缩小"), /* @__PURE__ */ React.createElement(import_antd.Button, { onClick: () => {
+      var _a;
+      return (_a = ref.current) == null ? void 0 : _a.reset();
+    } }, "复位"), /* @__PURE__ */ React.createElement(import_antd.Button, { onClick: () => {
+      var _a;
+      return (_a = ref.current) == null ? void 0 : _a.fitBounds();
+    } }, "区域定位")), /* @__PURE__ */ React.createElement("div", { style: { height: 400 } }, /* @__PURE__ */ React.createElement(
+      import_PisellFloorMapLayout.PisellFloorMapLayout,
+      {
+        ref,
+        items: defaultItems,
+        renderItem: (item) => renderSimpleItem(item),
+        itemUnit: "cell",
+        mapLayer: {
+          backgroundType: "color",
+          backgroundColor: "#fafafa",
+          showGrid: true,
+          padding: 16,
+          gap: 8
+        },
+        zoom: { defaultScale: 1 },
+        pan: { enabled: true },
+        style: { height: 400 }
+      }
+    )));
+  }
+};
+var ControlsHidden = {
+  args: {
+    items: defaultItems.slice(0, 4),
+    renderItem: (item) => renderSimpleItem(item),
+    itemUnit: "cell",
+    mapLayer: {
+      backgroundType: "color",
+      backgroundColor: "#f5f5f5",
+      padding: 16,
+      gap: 8
+    },
+    controls: {
+      showZoom: false,
+      showReset: true,
+      showFitBounds: false
+    }
+  }
+};
+var STATUS_BORDER = {
+  available: FIGMA.gray200,
+  reserved: FIGMA.reserved,
+  waiting: FIGMA.waiting,
+  dining: FIGMA.dining,
+  billed: FIGMA.billed,
+  availableSoon: FIGMA.availableSoon
+};
+var GAP = 50;
+var SMALL_W = 160;
+var MED_W = 240;
+var LARGE_W = 350;
+var XL_W = 460;
+var H = 160;
+var figma13998PixelItems = [
+  // Row 0: S-1, S-2, M-1, L-0（大格带内容，Figma 14000:335）
+  { id: "S-1", x: 0, y: 0, width: SMALL_W, height: H, status: "reserved", customerName: "Carolino", reserveTime: "13:00" },
+  { id: "S-2", x: SMALL_W + GAP, y: 0, width: SMALL_W, height: H, status: "available" },
+  { id: "M-1", x: (SMALL_W + GAP) * 2, y: 0, width: MED_W, height: H, status: "available" },
+  { id: "L-0", x: (SMALL_W + GAP) * 2 + MED_W + GAP, y: 0, width: LARGE_W, height: H, status: "dining", guests: 4, dishes: "5/5 Dishes", duration: "18m20s" },
+  { id: "M-0", x: (SMALL_W + GAP) * 2 + MED_W + GAP + LARGE_W + GAP, y: 0, width: MED_W, height: H, status: "available" },
+  // Row 1: S-3, M-4, S-5, S-6, XL-0（第二个改成 m，最后添加 xl）
+  { id: "S-3", x: 0, y: H + GAP, width: SMALL_W, height: H, status: "availableSoon", guests: 7, dishes: "5/5 Dishes", duration: "35m30s" },
+  { id: "M-4", x: SMALL_W + GAP, y: H + GAP, width: MED_W, height: H, status: "available" },
+  { id: "S-5", x: SMALL_W + GAP + MED_W + GAP, y: H + GAP, width: SMALL_W, height: H, status: "dining", guests: 2, dishes: "3/5 Dishes", duration: "15m30s" },
+  { id: "S-6", x: SMALL_W + GAP + MED_W + GAP + SMALL_W + GAP, y: H + GAP, width: SMALL_W, height: H, status: "reserved", customerName: "Alex", reserveTime: "14:00" },
+  { id: "XL-0", x: (SMALL_W + GAP) * 2 + MED_W + GAP + SMALL_W + GAP, y: H + GAP, width: XL_W, height: H, status: "available" },
+  // Row 2: L-1(MED), L-2(LARGE), L-5(LARGE), S-7, S-10（S-7 紧接 L-5 右边界 + GAP，避免与 L-5 重叠）
+  { id: "L-1", x: 0, y: (H + GAP) * 2, width: MED_W, height: H, status: "available" },
+  { id: "L-2", x: MED_W + GAP, y: (H + GAP) * 2, width: LARGE_W, height: H, status: "billed", guests: 5, dishes: "5/5 Dishes", duration: "25m30s" },
+  { id: "L-5", x: MED_W + GAP + LARGE_W + GAP, y: (H + GAP) * 2, width: LARGE_W, height: H, status: "available" },
+  { id: "S-7", x: MED_W + GAP + LARGE_W + GAP + LARGE_W + GAP, y: (H + GAP) * 2, width: SMALL_W, height: H, status: "reserved", customerName: "Carolino", reserveTime: "13:00" },
+  { id: "S-10", x: MED_W + GAP + LARGE_W + GAP + LARGE_W + GAP + SMALL_W + GAP, y: (H + GAP) * 2, width: SMALL_W, height: H, status: "available" },
+  // Row 3: M-3, L-3, S-8, M-5（第四格 = S-8 右边界 + GAP，避免重叠）
+  { id: "M-3", x: 0, y: (H + GAP) * 3, width: MED_W, height: H, status: "waiting", guests: 2, dishes: "3/5 Dishes", duration: "15m30s" },
+  { id: "L-3", x: MED_W + GAP, y: (H + GAP) * 3, width: LARGE_W, height: H, status: "available" },
+  { id: "S-8", x: MED_W + GAP + LARGE_W + GAP, y: (H + GAP) * 3, width: SMALL_W, height: H, status: "dining", guests: 6, dishes: "4/5 Dishes", duration: "24m30s" },
+  { id: "M-5", x: MED_W + GAP + LARGE_W + GAP + SMALL_W + GAP, y: (H + GAP) * 3, width: MED_W, height: H, status: "available" },
+  // Row 4: X-1, S-9, X-2, L-4
+  { id: "X-1", x: 0, y: (H + GAP) * 4, width: LARGE_W, height: H, status: "available" },
+  { id: "S-9", x: LARGE_W + GAP, y: (H + GAP) * 4, width: SMALL_W, height: H, status: "available" },
+  { id: "X-2", x: LARGE_W + GAP + SMALL_W + GAP, y: (H + GAP) * 4, width: LARGE_W, height: H, status: "waiting", guests: 2, dishes: "3/5 Dishes", duration: "15m30s" },
+  { id: "L-4", x: LARGE_W + GAP + SMALL_W + GAP + LARGE_W + GAP, y: (H + GAP) * 4, width: LARGE_W, height: H, status: "billed", guests: 5, dishes: "5/5 Dishes", duration: "25m30s" },
+  // Row 5: XL-1 超大格
+  { id: "XL-1", x: 0, y: (H + GAP) * 5, width: XL_W, height: H, status: "dining", guests: 12, dishes: "8/8 Dishes", duration: "45m00s" }
+];
+function FigmaCardRow({
+  icon,
+  children
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 4,
+        fontFamily: FIGMA.fontFamily,
+        fontSize: 14,
+        lineHeight: "20px",
+        fontWeight: 400,
+        color: FIGMA.gray700,
+        flexShrink: 0,
+        minHeight: "20px"
+      }
+    },
+    /* @__PURE__ */ React.createElement("span", { style: { flexShrink: 0, color: FIGMA.gray400, fontSize: 14 } }, icon),
+    /* @__PURE__ */ React.createElement("span", { style: { flexShrink: 0 } }, children)
+  );
+}
+function getBarCountFromItemId(id) {
+  const upper = id.toUpperCase();
+  if (upper.startsWith("XL-")) return 4;
+  if (upper.startsWith("L-") || upper.startsWith("X-")) return 3;
+  if (upper.startsWith("M-")) return 2;
+  return 1;
+}
+var CARD_BAR_WIDTH = 80;
+var CARD_BAR_HEIGHT = 12;
+function CardBars({
+  count,
+  position,
+  barColor
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "row",
+        gap: 30,
+        justifyContent: "center",
+        flexShrink: 0,
+        padding: position === "top" ? "0 0 4px 0" : "4px 0 0 0"
+      }
+    },
+    Array.from({ length: count }, (_, i) => /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        key: i,
+        style: {
+          width: CARD_BAR_WIDTH,
+          height: CARD_BAR_HEIGHT,
+          borderRadius: 6,
+          background: barColor
+        }
+      }
+    ))
+  );
+}
+function renderFigmaTableCard(item) {
+  const status = item.status ?? "available";
+  const borderColor = STATUS_BORDER[status];
+  const isAvailable = status === "available";
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: "figma-table-card",
+      style: {
+        width: "100%",
+        height: "100%",
+        boxSizing: "border-box",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "flex-start",
+        gap: 0,
+        fontFamily: FIGMA.fontFamily,
+        overflow: "hidden"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      CardBars,
+      {
+        count: getBarCountFromItemId(item.id),
+        position: "top",
+        barColor: isAvailable ? FIGMA.barFillAvailable : borderColor
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          flex: 1,
+          minHeight: 0,
+          padding: 8,
+          boxSizing: "border-box",
+          background: FIGMA.white,
+          border: isAvailable ? `4px solid ${FIGMA.gray200}` : `4px solid ${borderColor}`,
+          borderRadius: 8,
+          boxShadow: FIGMA.shadowSm,
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: isAvailable ? "flex-start" : "center",
+          alignItems: isAvailable ? "stretch" : "center",
+          gap: 4
+        }
+      },
+      isAvailable ? (
+        /* 空闲：仅 ID 居中 */
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              flex: 1,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              minHeight: 0,
+              fontWeight: 600,
+              fontSize: 18,
+              lineHeight: "24px",
+              color: FIGMA.gray400,
+              letterSpacing: 0
+            }
+          },
+          item.id
+        )
+      ) : (
+        /* 有内容：ID + 状态行整体居中 */
+        /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              fontWeight: 600,
+              fontSize: 18,
+              lineHeight: "24px",
+              color: FIGMA.gray900,
+              letterSpacing: 0,
+              textAlign: "center"
+            }
+          },
+          item.id
+        ), status === "reserved" && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+          FigmaCardRow,
+          {
+            icon: /* @__PURE__ */ React.createElement(
+              import_antd.Avatar,
+              {
+                size: 16,
+                icon: /* @__PURE__ */ React.createElement(import_icons.UserOutlined, null),
+                style: { backgroundColor: FIGMA.gray200 }
+              }
+            )
+          },
+          /* @__PURE__ */ React.createElement("span", null, item.customerName ?? "")
+        ), /* @__PURE__ */ React.createElement(FigmaCardRow, { icon: /* @__PURE__ */ React.createElement(import_icons.ClockCircleOutlined, null) }, /* @__PURE__ */ React.createElement("span", null, item.reserveTime ?? ""))), (status === "dining" || status === "waiting" || status === "billed" || status === "availableSoon") && item.guests != null && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(FigmaCardRow, { icon: /* @__PURE__ */ React.createElement(import_icons.TeamOutlined, null) }, /* @__PURE__ */ React.createElement("span", null, item.guests)), item.dishes && /* @__PURE__ */ React.createElement(FigmaCardRow, { icon: /* @__PURE__ */ React.createElement(import_icons.AuditOutlined, null) }, /* @__PURE__ */ React.createElement("span", null, item.dishes)), item.duration && /* @__PURE__ */ React.createElement(FigmaCardRow, { icon: /* @__PURE__ */ React.createElement(import_icons.FieldTimeOutlined, null) }, /* @__PURE__ */ React.createElement("span", null, item.duration))))
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      CardBars,
+      {
+        count: getBarCountFromItemId(item.id),
+        position: "bottom",
+        barColor: isAvailable ? FIGMA.barFillAvailable : borderColor
+      }
+    )
+  );
+}
+function LegendItem14131({
+  color,
+  label,
+  fill = false
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 6,
+        fontFamily: FIGMA.fontFamily,
+        fontSize: 14,
+        fontWeight: 500,
+        lineHeight: "20px",
+        color: "#000000"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        style: {
+          width: 16,
+          height: 16,
+          borderRadius: "50%",
+          background: fill ? color : FIGMA.white,
+          border: fill ? "none" : `1px solid ${FIGMA.gray200}`,
+          flexShrink: 0
+        }
+      }
+    ),
+    label
+  );
+}
+var FigmaDesign = {
+  parameters: {
+    docs: {
+      description: {
+        story: "Figma node 14131:6266 还原：顶部 Tabs 灰底容器、选中白底+阴影、16px Semibold；图例 16px 圆点（Available 白底灰边/其余实心）、14px Medium 黑字、gap 12px 40px。内容区未改。"
+      }
+    }
+  },
+  render: function FigmaDesignRender() {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: 20,
+          background: FIGMA.gray50,
+          padding: 24,
+          borderRadius: 12,
+          fontFamily: FIGMA.fontFamily
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "figma-story-header-14131",
+          style: {
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+            flexWrap: "nowrap",
+            gap: 24
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: "figma-story-tabs-wrap-14131",
+            style: {
+              flexShrink: 0,
+              background: FIGMA.gray50,
+              border: `1px solid ${FIGMA.gray200}`,
+              padding: 6,
+              borderRadius: 8,
+              display: "inline-flex",
+              gap: 8
+            }
+          },
+          /* @__PURE__ */ React.createElement(
+            import_antd.Tabs,
+            {
+              defaultActiveKey: "main",
+              size: "middle",
+              style: { marginBottom: 0 },
+              items: [
+                { key: "main", label: "Main Area" },
+                { key: "secondary", label: "Secondary Area" },
+                { key: "vip", label: "VIP Area" }
+              ],
+              className: "figma-story-tabs figma-story-tabs-14131"
+            }
+          )
+        ),
+        /* @__PURE__ */ React.createElement("div", { className: "figma-story-legend-14131", style: { display: "flex", flexWrap: "wrap", gap: "12px 40px", alignItems: "center", justifyContent: "flex-end", minWidth: 0 } }, /* @__PURE__ */ React.createElement(LegendItem14131, { color: FIGMA.gray200, label: "Available (4)", fill: false }), /* @__PURE__ */ React.createElement(LegendItem14131, { color: FIGMA.legendReserved, label: "Reserved (2)", fill: true }), /* @__PURE__ */ React.createElement(LegendItem14131, { color: FIGMA.legendWaiting, label: "Waiting (3)", fill: true }), /* @__PURE__ */ React.createElement(LegendItem14131, { color: FIGMA.legendDining, label: "Dining (1)", fill: true }), /* @__PURE__ */ React.createElement(LegendItem14131, { color: FIGMA.legendBilled, label: "Billed (2)", fill: true }), /* @__PURE__ */ React.createElement(LegendItem14131, { color: FIGMA.legendAvailableSoon, label: "Available Soon (1)", fill: true }))
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "figma-story-map-wrap",
+          style: {
+            height: 520,
+            background: FIGMA.white,
+            border: `4px solid ${FIGMA.gray200}`,
+            borderRadius: 8,
+            overflow: "hidden",
+            boxShadow: FIGMA.shadowSm
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          import_PisellFloorMapLayout.PisellFloorMapLayout,
+          {
+            className: "figma-story-map",
+            items: figma13998PixelItems,
+            renderItem: (item) => renderFigmaTableCard(item),
+            itemUnit: "pixel",
+            cellSize: 64,
+            mapLayer: {
+              showGrid: false,
+              padding: 20
+            },
+            zoom: { defaultScale: 0.8, min: 0.5, max: 2 },
+            pan: { enabled: true },
+            controls: { showZoom: true },
+            style: { height: "100%" }
+          }
+        )
+      ),
+      /* @__PURE__ */ React.createElement("style", null, `
+          .figma-story-tabs-wrap-14131 .ant-tabs-nav {
+            margin: 0;
+          }
+          .figma-story-tabs-wrap-14131 .ant-tabs-nav-list {
+            gap: 8px;
+          }
+          .figma-story-tabs.figma-story-tabs-14131 .ant-tabs-tab {
+            font-family: ${FIGMA.fontFamily};
+            padding: 10px 14px;
+            margin: 0;
+            font-size: 16px;
+            font-weight: 600;
+            line-height: 24px;
+            color: ${FIGMA.gray500};
+            border-radius: 6px;
+          }
+          .figma-story-tabs.figma-story-tabs-14131 .ant-tabs-tab.ant-tabs-tab-active {
+            background: ${FIGMA.white};
+            box-shadow: ${FIGMA.shadowSm};
+          }
+          .figma-story-tabs.figma-story-tabs-14131 .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+            color: ${FIGMA.gray700};
+          }
+          .figma-story-tabs.figma-story-tabs-14131 .ant-tabs-ink-bar {
+            display: none;
+          }
+          .figma-story-tabs.figma-story-tabs-14131 .ant-tabs-nav::before {
+            display: none;
+          }
+          .figma-story-map-wrap [class*="react-transform-wrapper"],
+          .figma-story-map-wrap [class*="react-transform-element"] {
+            overflow: visible !important;
+          }
+          .figma-story-map-wrap .pisell-floor-map-layout {
+            overflow: visible !important;
+          }
+          .figma-table-card,
+          .figma-table-card * {
+            visibility: visible !important;
+          }
+          .figma-table-card {
+            color: ${FIGMA.gray900};
+          }
+          .figma-table-card .ant-avatar {
+            flex-shrink: 0;
+          }
+        `)
+    );
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ControlsHidden,
+  Default,
+  FigmaDesign,
+  PixelUnits,
+  WithEvents,
+  WithGrid,
+  WithPan,
+  WithRefControls,
+  WithShapes,
+  WithVariableSizes
+});