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,
  DarkBackground: () => DarkBackground,
  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 DarkBackground = {
  parameters: {
    docs: {
      description: {
        story: '未显式传入当前画布或根级 `mapLayer.backgroundColor` 时，`appearanceMode="dark"` 仅切换 floorMap 画布背景为灰黑色，不改变 dock、HUD 或控件配色。'
      }
    }
  },
  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",
    appearanceMode: "dark",
    mapLayer: {
      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,
  DarkBackground,
  Default,
  FigmaDesign,
  FloorMapViewEdit,
  FloorMapViewEditCustomRecordForm,
  FloorMapViewRead,
  FloorMapWithLayoutProvider,
  PixelUnits,
  WithEvents,
  WithGrid,
  WithPan,
  WithRefControls,
  WithShapes,
  WithVariableSizes
});
