@pisell/materials 1.0.1059 → 1.0.1062

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

@@ -22,6 +22,10 @@ __export(PisellFloorMapLayout_stories_exports, {
   ControlsHidden: () => ControlsHidden,
   Default: () => Default,
   FigmaDesign: () => FigmaDesign,
+  FloorMapViewEdit: () => FloorMapViewEdit,
+  FloorMapViewEditCustomRecordForm: () => FloorMapViewEditCustomRecordForm,
+  FloorMapViewRead: () => FloorMapViewRead,
+  FloorMapWithLayoutProvider: () => FloorMapWithLayoutProvider,
   PixelUnits: () => PixelUnits,
   WithEvents: () => WithEvents,
   WithGrid: () => WithGrid,
@@ -35,7 +39,10 @@ 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",
@@ -114,6 +121,7 @@ var defaultItems = [
   { id: "X-4", x: 3, y: 3 }
 ];
 function renderSimpleItem(item) {
+  const isCircle = item.shape === "circle";
   return /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -125,7 +133,7 @@ function renderSimpleItem(item) {
         justifyContent: "center",
         background: "#fff",
         border: "4px solid #d9d9d9",
-        borderRadius: 4,
+        borderRadius: isCircle ? "50%" : 4,
         fontSize: 12
       }
     },
@@ -133,6 +141,25 @@ function renderSimpleItem(item) {
   );
 }
 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),
@@ -145,7 +172,8 @@ var Default = {
     },
     zoom: { defaultScale: 1, min: 0.5, max: 2 },
     pan: { enabled: false },
-    enableHover: true
+    enableHover: true,
+    style: { height: "100%", width: "100%", minHeight: 0 }
   }
 };
 var WithGrid = {
@@ -178,7 +206,12 @@ var WithPan = {
     },
     zoom: { defaultScale: 1 },
     pan: { enabled: true },
-    controls: { showZoom: true, showReset: true, showFitBounds: true, showFullscreen: true }
+    controls: {
+      showZoom: true,
+      showReset: true,
+      showFitBounds: true,
+      showFullscreen: true
+    }
   }
 };
 var shapeItems = [
@@ -320,6 +353,256 @@ var WithRefControls = {
     )));
   }
 };
+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),
@@ -338,6 +621,49 @@ var ControlsHidden = {
     }
   }
 };
+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,
@@ -354,35 +680,236 @@ 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" },
+  {
+    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" },
+  {
+    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" },
+  {
+    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" },
+  {
+    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" },
+  {
+    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" }
+  {
+    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,
@@ -410,9 +937,10 @@ function FigmaCardRow({
 }
 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;
+  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;
@@ -448,8 +976,8 @@ function CardBars({
     ))
   );
 }
-function renderFigmaTableCard(item) {
-  const status = item.status ?? "available";
+function renderFigmaStyleTableCard(cardItem) {
+  const status = cardItem.status ?? "available";
   const borderColor = STATUS_BORDER[status];
   const isAvailable = status === "available";
   return /* @__PURE__ */ React.createElement(
@@ -471,7 +999,7 @@ function renderFigmaTableCard(item) {
     /* @__PURE__ */ React.createElement(
       CardBars,
       {
-        count: getBarCountFromItemId(item.id),
+        count: getBarCountFromItemId(cardItem.id),
         position: "top",
         barColor: isAvailable ? FIGMA.barFillAvailable : borderColor
       }
@@ -495,67 +1023,72 @@ function renderFigmaTableCard(item) {
           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"
+      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 }
             }
-          },
-          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("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(item.id),
+        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,
@@ -655,7 +1188,68 @@ var FigmaDesign = {
             }
           )
         ),
-        /* @__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-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",
@@ -745,6 +1339,10 @@ var FigmaDesign = {
   ControlsHidden,
   Default,
   FigmaDesign,
+  FloorMapViewEdit,
+  FloorMapViewEditCustomRecordForm,
+  FloorMapViewRead,
+  FloorMapWithLayoutProvider,
   PixelUnits,
   WithEvents,
   WithGrid,