@pisell/materials 6.11.16 → 6.11.18

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

@@ -0,0 +1,1353 @@
+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,
+  FloorMapViewEdit: () => FloorMapViewEdit,
+  FloorMapViewEditCustomRecordForm: () => FloorMapViewEditCustomRecordForm,
+  FloorMapViewRead: () => FloorMapViewRead,
+  FloorMapWithLayoutProvider: () => FloorMapWithLayoutProvider,
+  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_types = require("./types");
+var import_PisellFloorMapLayout = require("./PisellFloorMapLayout");
+var import_FloorMapLayoutContext = require("./context/FloorMapLayoutContext");
+var import_FigmaTableCard = require("./components/FigmaTableCard");
+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) {
+  const isCircle = item.shape === "circle";
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "#fff",
+        border: "4px solid #d9d9d9",
+        borderRadius: isCircle ? "50%" : 4,
+        fontSize: 12
+      }
+    },
+    item.id
+  );
+}
+var Default = {
+  parameters: {
+    layout: "fullscreen"
+  },
+  decorators: [
+    (Story) => /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          boxSizing: "border-box",
+          height: "100vh",
+          minHeight: "100vh",
+          padding: 16,
+          display: "flex",
+          flexDirection: "column"
+        }
+      },
+      /* @__PURE__ */ React.createElement("div", { style: { flex: 1, minHeight: 0, minWidth: 0 } }, /* @__PURE__ */ React.createElement(Story, null))
+    )
+  ],
+  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,
+    style: { height: "100%", width: "100%", minHeight: 0 }
+  }
+};
+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,
+      showFullscreen: 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 mockFloorMapConfig = {
+  canvasUi: { canCreate: true, canEdit: true },
+  canvases: [
+    { id: "f1", name: "1楼", order: 0, enabled: true },
+    { id: "f2", name: "2楼", order: 1, enabled: true }
+  ],
+  elementKindCategories: [
+    { id: "c1", label: "餐桌", order: 0 },
+    { id: "c2", label: "装饰", order: 1 }
+  ],
+  elementKinds: [
+    {
+      value: "table",
+      label: "方桌",
+      categoryId: "c1",
+      dataBindingPolicy: "optional",
+      allowedDataSourceKeys: ["sales"]
+    },
+    {
+      value: "roundTable",
+      label: "圆桌",
+      categoryId: "c1",
+      dataBindingPolicy: "optional",
+      allowedDataSourceKeys: ["sales"],
+      defaultShape: "circle"
+    },
+    {
+      value: "deco",
+      label: "装饰",
+      categoryId: "c2",
+      dataBindingPolicy: "none"
+    },
+    {
+      value: "stage",
+      label: "舞台/区域",
+      categoryId: "c2",
+      dataBindingPolicy: "none"
+    },
+    {
+      value: import_types.FLOOR_MAP_IMAGE_ELEMENT_KIND,
+      label: "图片（底图）",
+      categoryId: "c2",
+      dataBindingPolicy: "none"
+    }
+  ],
+  sceneElements: [
+    {
+      instanceId: "elm_bg_demo",
+      canvasId: "f1",
+      x: 40,
+      y: 40,
+      width: 520,
+      height: 280,
+      zIndex: -8,
+      elementKind: import_types.FLOOR_MAP_IMAGE_ELEMENT_KIND,
+      name: "底图示例",
+      imageUrl: ""
+    },
+    {
+      instanceId: "elm_s1",
+      canvasId: "f1",
+      x: 50,
+      y: 50,
+      elementKind: "table",
+      width: 180,
+      height: 120,
+      zIndex: 0,
+      dataBinding: { dataSourceKey: "sales", recordId: "s1" }
+    },
+    {
+      instanceId: "elm_s2",
+      canvasId: "f1",
+      x: 150,
+      y: 50,
+      elementKind: "table",
+      width: 180,
+      height: 120,
+      zIndex: 0,
+      dataBinding: { dataSourceKey: "sales", recordId: "s2" }
+    },
+    {
+      instanceId: "elm_r1",
+      canvasId: "f1",
+      x: 250,
+      y: 50,
+      elementKind: "roundTable",
+      width: 100,
+      height: 100,
+      zIndex: 0,
+      dataBinding: { dataSourceKey: "sales", recordId: "r1" }
+    },
+    {
+      instanceId: "elm_d1",
+      canvasId: "f1",
+      x: 200,
+      y: 120,
+      width: 60,
+      height: 60,
+      shape: "circle",
+      elementKind: "deco",
+      zIndex: 0
+    }
+  ]
+};
+var mockDataSources = {
+  sales: [
+    { id: "s1", name: "桌台 A" },
+    { id: "s2", name: "桌台 B" },
+    { id: "r1", name: "圆桌1" }
+  ]
+};
+var FloorMapViewEdit = {
+  parameters: {
+    docs: {
+      description: {
+        story: "平面图编辑态：**非全屏**时顶栏为画布 **Tab + 全屏**，保存多在侧栏；**全屏**后顶栏含 Tab、保存、退出全屏等。左侧图元可**拖到画布**生成图元。左下角为缩放。"
+      }
+    }
+  },
+  args: {
+    items: [],
+    renderItem: (item) => renderSimpleItem(item),
+    renderItemByKind: {
+      table: (0, import_FigmaTableCard.getRenderItemByKindTable)(mockDataSources),
+      roundTable: (0, import_FigmaTableCard.getRenderItemByKindRoundTable)(mockDataSources)
+    },
+    floorMapConfig: mockFloorMapConfig,
+    dataSources: mockDataSources,
+    mode: "edit",
+    mapLayer: {
+      backgroundType: "color",
+      backgroundColor: "#f5f5f5",
+      padding: 16
+    },
+    zoom: { defaultScale: 1 },
+    pan: { enabled: true },
+    controls: { showZoom: true, showFullscreen: true, showFitBounds: true },
+    style: { height: 560 }
+  }
+};
+function SalesRecordInlineForm(props) {
+  const { ctx } = props;
+  const [form] = import_antd.Form.useForm();
+  (0, import_react.useEffect)(() => {
+    form.setFieldsValue(ctx.record);
+  }, [ctx.recordId, ctx.record, form]);
+  return /* @__PURE__ */ React.createElement(
+    import_antd.Form,
+    {
+      form,
+      layout: "vertical",
+      size: "small",
+      onFinish: (values) => {
+        var _a;
+        return (_a = ctx.onSaveRecord) == null ? void 0 : _a.call(ctx, values);
+      }
+    },
+    /* @__PURE__ */ React.createElement(import_antd.Form.Item, { name: "name", label: "名称" }, /* @__PURE__ */ React.createElement(import_antd.Input, null)),
+    /* @__PURE__ */ React.createElement(
+      import_antd.Button,
+      {
+        type: "primary",
+        htmlType: "submit",
+        size: "small",
+        loading: ctx.savingRecord,
+        block: true
+      },
+      "保存（自定义表单）"
+    )
+  );
+}
+var FloorMapViewEditCustomRecordForm = {
+  parameters: {
+    docs: {
+      description: {
+        story: "选中落位后，侧栏「数据源记录」由 `dataSourceRecordForm` 渲染自定义 Form；`ctx.onSaveRecord` 与内置 FloorMapDataForm 相同，写回 `onDataSourceRecordSave`。本 Story 用本地 state 更新 `dataSources`，卡片文案会同步。"
+      }
+    }
+  },
+  render: function FloorMapViewEditCustomRecordFormRender() {
+    const [dataSources, setDataSources] = (0, import_react.useState)(() => ({
+      ...mockDataSources
+    }));
+    const handleRecordSave = (0, import_react.useCallback)(
+      (dataSourceKey, id, newData) => {
+        setDataSources((prev) => ({
+          ...prev,
+          [dataSourceKey]: (prev[dataSourceKey] ?? []).map(
+            (row) => row.id === id ? { ...row, ...newData } : row
+          )
+        }));
+      },
+      []
+    );
+    return /* @__PURE__ */ React.createElement(
+      import_PisellFloorMapLayout.PisellFloorMapLayout,
+      {
+        items: [],
+        renderItem: (item) => renderSimpleItem(item),
+        renderItemByKind: {
+          table: (0, import_FigmaTableCard.getRenderItemByKindTable)(dataSources),
+          roundTable: (0, import_FigmaTableCard.getRenderItemByKindRoundTable)(dataSources)
+        },
+        floorMapConfig: mockFloorMapConfig,
+        dataSources,
+        mode: "edit",
+        onDataSourceRecordSave: handleRecordSave,
+        dataSourceRecordForm: {
+          sales: (ctx) => /* @__PURE__ */ React.createElement(SalesRecordInlineForm, { ctx })
+        },
+        mapLayer: {
+          backgroundType: "color",
+          backgroundColor: "#f5f5f5",
+          padding: 16
+        },
+        zoom: { defaultScale: 1 },
+        pan: { enabled: true },
+        style: { height: 560 }
+      }
+    );
+  }
+};
+var FloorMapViewRead = {
+  parameters: {
+    docs: {
+      description: {
+        story: "平面图视图阅读态：无 Tab/工具栏，方桌采用 Figma 设计稿样式。"
+      }
+    }
+  },
+  args: {
+    items: [],
+    renderItem: (item) => renderSimpleItem(item),
+    renderItemByKind: {
+      table: (0, import_FigmaTableCard.getRenderItemByKindTable)(mockDataSources),
+      roundTable: (0, import_FigmaTableCard.getRenderItemByKindRoundTable)(mockDataSources)
+    },
+    floorMapConfig: mockFloorMapConfig,
+    dataSources: mockDataSources,
+    mode: "read",
+    mapLayer: {
+      backgroundType: "color",
+      backgroundColor: "#f5f5f5",
+      padding: 16
+    },
+    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 FloorMapWithLayoutProvider = {
+  parameters: {
+    docs: {
+      description: {
+        story: "演示 `FloorMapLayoutProvider`：`floorMapConfig` 与 `dataSources` 由 Context 提供，`PisellFloorMapLayout` 只写 `renderItemByKind`、`mapLayer`、`mode` 等。"
+      }
+    }
+  },
+  render: function FloorMapWithLayoutProviderRender() {
+    const providerValue = (0, import_react.useMemo)(
+      () => ({
+        floorMapConfig: mockFloorMapConfig,
+        dataSources: mockDataSources
+      }),
+      []
+    );
+    return /* @__PURE__ */ React.createElement(import_FloorMapLayoutContext.FloorMapLayoutProvider, { value: providerValue }, /* @__PURE__ */ React.createElement(
+      import_PisellFloorMapLayout.PisellFloorMapLayout,
+      {
+        items: [],
+        renderItem: (item) => renderSimpleItem(item),
+        renderItemByKind: {
+          table: (0, import_FigmaTableCard.getRenderItemByKindTable)(mockDataSources),
+          roundTable: (0, import_FigmaTableCard.getRenderItemByKindRoundTable)(mockDataSources)
+        },
+        mode: "edit",
+        mapLayer: {
+          backgroundType: "color",
+          backgroundColor: "#f5f5f5",
+          padding: 16
+        },
+        zoom: { defaultScale: 1 },
+        pan: { enabled: true },
+        controls: {
+          showZoom: true,
+          showFullscreen: true,
+          showFitBounds: true
+        },
+        style: { height: 560 }
+      }
+    ));
+  }
+};
+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-") || id.endsWith("-XL")) return 4;
+  if (upper.startsWith("L-") || upper.startsWith("X-") || id.endsWith("-L") || id.endsWith("-X"))
+    return 3;
+  if (upper.startsWith("M-") || id.endsWith("-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 renderFigmaStyleTableCard(cardItem) {
+  const status = cardItem.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(cardItem.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 ? /* @__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
+          }
+        },
+        cardItem.displayName ?? cardItem.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"
+          }
+        },
+        cardItem.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, cardItem.customerName ?? "")
+      ), /* @__PURE__ */ React.createElement(FigmaCardRow, { icon: /* @__PURE__ */ React.createElement(import_icons.ClockCircleOutlined, null) }, /* @__PURE__ */ React.createElement("span", null, cardItem.reserveTime ?? ""))), (status === "dining" || status === "waiting" || status === "billed" || status === "availableSoon") && cardItem.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, cardItem.guests)), cardItem.dishes && /* @__PURE__ */ React.createElement(FigmaCardRow, { icon: /* @__PURE__ */ React.createElement(import_icons.AuditOutlined, null) }, /* @__PURE__ */ React.createElement("span", null, cardItem.dishes)), cardItem.duration && /* @__PURE__ */ React.createElement(FigmaCardRow, { icon: /* @__PURE__ */ React.createElement(import_icons.FieldTimeOutlined, null) }, /* @__PURE__ */ React.createElement("span", null, cardItem.duration))))
+    ),
+    /* @__PURE__ */ React.createElement(
+      CardBars,
+      {
+        count: getBarCountFromItemId(cardItem.id),
+        position: "bottom",
+        barColor: isAvailable ? FIGMA.barFillAvailable : borderColor
+      }
+    )
+  );
+}
+function renderFigmaTableCard(item) {
+  return renderFigmaStyleTableCard({
+    id: item.id,
+    status: item.status,
+    customerName: item.customerName,
+    reserveTime: item.reserveTime,
+    guests: item.guests,
+    dishes: item.dishes,
+    duration: item.duration
+  });
+}
+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, showFullscreen: 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,
+  FloorMapViewEdit,
+  FloorMapViewEditCustomRecordForm,
+  FloorMapViewRead,
+  FloorMapWithLayoutProvider,
+  PixelUnits,
+  WithEvents,
+  WithGrid,
+  WithPan,
+  WithRefControls,
+  WithShapes,
+  WithVariableSizes
+});