function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Button, Space, Tabs, Avatar, Form, Input } from 'antd';
import { UserOutlined, ClockCircleOutlined, TeamOutlined, AuditOutlined, FieldTimeOutlined } from '@ant-design/icons';
import { FLOOR_MAP_IMAGE_ELEMENT_KIND } from "./types";
import { PisellFloorMapLayout } from "./PisellFloorMapLayout";
import { FloorMapLayoutProvider } from "./context/FloorMapLayoutContext";
import { getRenderItemByKindTable, getRenderItemByKindRoundTable } from "./components/FigmaTableCard";
// Figma 设计 token（Pisell 2.0 Component Library，node 13998:648 / 14004:1168 变量）
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'
};

/**
 * PisellFloorMapLayout 楼层图布局
 *
 * 空间布局视图：在二维平面按坐标渲染资源（桌台/房间/工位等），
 * 支持缩放、平移、复位、区域定位，仅负责展示与交互。
 */
var meta = {
  title: 'Data Display/PisellFloorMapLayout',
  component: 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'
    }
  }
};
export default meta;
/** 示例：基础格子项数据（5x4 网格） */
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
}];

/** 简单格子渲染：仅显示 id；尊重 item.shape（如 circle 则圆形容器） */
function renderSimpleItem(item) {
  var 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);
}

/**
 * 默认 - 纯色底 + 简单格子（格子单位，默认 item 间距 8px）
 */
export var Default = {
  parameters: {
    layout: 'fullscreen'
  },
  decorators: [function (Story) {
    return /*#__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: function renderItem(item) {
      return 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
    }
  }
};

/**
 * 显示网格线（item 间距由 mapLayer.gap 控制）
 */
export var WithGrid = {
  args: {
    items: defaultItems,
    renderItem: function renderItem(item) {
      return renderSimpleItem(item);
    },
    itemUnit: 'cell',
    mapLayer: {
      backgroundType: 'color',
      backgroundColor: '#fafafa',
      showGrid: true,
      padding: 16,
      gap: 8
    },
    zoom: {
      defaultScale: 1
    },
    pan: {
      enabled: true
    }
  }
};

/**
 * 开启平移 - 可拖拽画布
 */
export var WithPan = {
  args: {
    items: defaultItems,
    renderItem: function renderItem(item) {
      return 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
    }
  }
};

/**
 * 不同形状 - 矩形、圆形、三角形；含不同格子宽高（如 rect2 为 2x1）
 */
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
}];
export var WithShapes = {
  args: {
    items: shapeItems,
    renderItem: function renderItem(item) {
      return renderSimpleItem(item);
    },
    itemUnit: 'cell',
    mapLayer: {
      backgroundType: 'color',
      backgroundColor: '#f5f5f5',
      showGrid: true,
      padding: 16,
      gap: 8
    },
    zoom: {
      defaultScale: 1
    },
    pan: {
      enabled: true
    }
  }
};

/**
 * 格子单位下不同宽高 - 每个 item 可设置 width/height（格子数）
 */
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
}];
export var WithVariableSizes = {
  parameters: {
    docs: {
      description: {
        story: 'itemUnit 为 cell 时，每条数据可设置 width/height（格子数），实现不同大小的格子。'
      }
    }
  },
  args: {
    items: variableSizeItems,
    renderItem: function renderItem(item) {
      return renderSimpleItem(item);
    },
    itemUnit: 'cell',
    cellSize: 72,
    mapLayer: {
      backgroundType: 'color',
      backgroundColor: '#f5f5f5',
      showGrid: true,
      padding: 16,
      gap: 8
    },
    zoom: {
      defaultScale: 1
    },
    pan: {
      enabled: true
    }
  }
};

/**
 * 像素单位 - x、y、width、height 均为像素，可任意位置与尺寸
 */
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 作为默认尺寸
];
export var PixelUnits = {
  parameters: {
    docs: {
      description: {
        story: 'itemUnit 为 pixel 时，item 的 x、y、width、height 均为像素；不写 width/height 时以 cellSize 为默认宽高。'
      }
    }
  },
  args: {
    items: pixelItems,
    renderItem: function renderItem(item) {
      return renderSimpleItem(item);
    },
    itemUnit: 'pixel',
    cellSize: 64,
    mapLayer: {
      backgroundType: 'color',
      backgroundColor: '#f5f5f5',
      padding: 16
    },
    zoom: {
      defaultScale: 1
    },
    pan: {
      enabled: true
    }
  }
};

/**
 * 点击与 Hover 事件
 */
export var WithEvents = {
  args: {
    items: defaultItems.slice(0, 6),
    renderItem: function renderItem(item) {
      return renderSimpleItem(item);
    },
    itemUnit: 'cell',
    mapLayer: {
      backgroundType: 'color',
      backgroundColor: '#f5f5f5',
      padding: 16,
      gap: 8
    },
    enableHover: true,
    onItemClick: function onItemClick(item) {
      console.log('click', item.id);
      alert("\u70B9\u51FB\u4E86 ".concat(item.id));
    },
    onItemHover: function onItemHover(item) {
      return console.log('hover', item.id);
    },
    onItemLeave: function onItemLeave(item) {
      return console.log('leave', item.id);
    }
  }
};

/**
 * Ref 调用 - 外部按钮控制缩放/复位/区域定位
 */
export var WithRefControls = {
  render: function WithRefControlsRender() {
    var ref = useRef(null);
    return /*#__PURE__*/React.createElement(Space, {
      direction: "vertical",
      style: {
        width: '100%'
      },
      size: "middle"
    }, /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Button, {
      onClick: function onClick() {
        var _ref$current;
        return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.zoomIn();
      }
    }, "\u653E\u5927"), /*#__PURE__*/React.createElement(Button, {
      onClick: function onClick() {
        var _ref$current2;
        return (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.zoomOut();
      }
    }, "\u7F29\u5C0F"), /*#__PURE__*/React.createElement(Button, {
      onClick: function onClick() {
        var _ref$current3;
        return (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.reset();
      }
    }, "\u590D\u4F4D"), /*#__PURE__*/React.createElement(Button, {
      onClick: function onClick() {
        var _ref$current4;
        return (_ref$current4 = ref.current) === null || _ref$current4 === void 0 ? void 0 : _ref$current4.fitBounds();
      }
    }, "\u533A\u57DF\u5B9A\u4F4D")), /*#__PURE__*/React.createElement("div", {
      style: {
        height: 400
      }
    }, /*#__PURE__*/React.createElement(PisellFloorMapLayout, {
      ref: ref,
      items: defaultItems,
      renderItem: function renderItem(item) {
        return renderSimpleItem(item);
      },
      itemUnit: "cell",
      mapLayer: {
        backgroundType: 'color',
        backgroundColor: '#fafafa',
        showGrid: true,
        padding: 16,
        gap: 8
      },
      zoom: {
        defaultScale: 1
      },
      pan: {
        enabled: true
      },
      style: {
        height: 400
      }
    })));
  }
};

/**
 * Floor Map 视图 - 编辑态（多画布 Tab + 占位工具栏/编辑面板）
 * 传入 floorMapConfig + dataSources + mode='edit'，由组件内部合并 items
 */
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: 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: 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'
  }]
};
export var FloorMapViewEdit = {
  parameters: {
    docs: {
      description: {
        story: '平面图编辑态：**非全屏**时顶栏为画布 **Tab + 全屏**，保存多在侧栏；**全屏**后顶栏含 Tab、保存、退出全屏等。左侧图元可**拖到画布**生成图元。左下角为缩放。'
      }
    }
  },
  args: {
    items: [],
    renderItem: function renderItem(item) {
      return renderSimpleItem(item);
    },
    renderItemByKind: {
      table: getRenderItemByKindTable(mockDataSources),
      roundTable: 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
    }
  }
};

/** Story：`dataSourceRecordForm` 自定义「数据源记录」表单 */
function SalesRecordInlineForm(props) {
  var ctx = props.ctx;
  var _Form$useForm = Form.useForm(),
    _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
    form = _Form$useForm2[0];
  useEffect(function () {
    form.setFieldsValue(ctx.record);
  }, [ctx.recordId, ctx.record, form]);
  return /*#__PURE__*/React.createElement(Form, {
    form: form,
    layout: "vertical",
    size: "small",
    onFinish: function onFinish(values) {
      var _ctx$onSaveRecord;
      return (_ctx$onSaveRecord = ctx.onSaveRecord) === null || _ctx$onSaveRecord === void 0 ? void 0 : _ctx$onSaveRecord.call(ctx, values);
    }
  }, /*#__PURE__*/React.createElement(Form.Item, {
    name: "name",
    label: "\u540D\u79F0"
  }, /*#__PURE__*/React.createElement(Input, null)), /*#__PURE__*/React.createElement(Button, {
    type: "primary",
    htmlType: "submit",
    size: "small",
    loading: ctx.savingRecord,
    block: true
  }, "\u4FDD\u5B58\uFF08\u81EA\u5B9A\u4E49\u8868\u5355\uFF09"));
}

/**
 * 平面图编辑态 + 自定义数据源记录表单（`dataSourceRecordForm.sales`）
 */
export var FloorMapViewEditCustomRecordForm = {
  parameters: {
    docs: {
      description: {
        story: '选中落位后，侧栏「数据源记录」由 `dataSourceRecordForm` 渲染自定义 Form；`ctx.onSaveRecord` 与内置 FloorMapDataForm 相同，写回 `onDataSourceRecordSave`。本 Story 用本地 state 更新 `dataSources`，卡片文案会同步。'
      }
    }
  },
  render: function FloorMapViewEditCustomRecordFormRender() {
    var _useState = useState(function () {
        return _objectSpread({}, mockDataSources);
      }),
      _useState2 = _slicedToArray(_useState, 2),
      dataSources = _useState2[0],
      setDataSources = _useState2[1];
    var handleRecordSave = useCallback(function (dataSourceKey, id, newData) {
      setDataSources(function (prev) {
        var _prev$dataSourceKey;
        return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, dataSourceKey, ((_prev$dataSourceKey = prev[dataSourceKey]) !== null && _prev$dataSourceKey !== void 0 ? _prev$dataSourceKey : []).map(function (row) {
          return row.id === id ? _objectSpread(_objectSpread({}, row), newData) : row;
        })));
      });
    }, []);
    return /*#__PURE__*/React.createElement(PisellFloorMapLayout, {
      items: [],
      renderItem: function renderItem(item) {
        return renderSimpleItem(item);
      },
      renderItemByKind: {
        table: getRenderItemByKindTable(dataSources),
        roundTable: getRenderItemByKindRoundTable(dataSources)
      },
      floorMapConfig: mockFloorMapConfig,
      dataSources: dataSources,
      mode: "edit",
      onDataSourceRecordSave: handleRecordSave,
      dataSourceRecordForm: {
        sales: function sales(ctx) {
          return /*#__PURE__*/React.createElement(SalesRecordInlineForm, {
            ctx: ctx
          });
        }
      },
      mapLayer: {
        backgroundType: 'color',
        backgroundColor: '#f5f5f5',
        padding: 16
      },
      zoom: {
        defaultScale: 1
      },
      pan: {
        enabled: true
      },
      style: {
        height: 560
      }
    });
  }
};

/**
 * Floor Map 视图 - 阅读态（方桌同样用 Figma 样式）
 */
export var FloorMapViewRead = {
  parameters: {
    docs: {
      description: {
        story: '平面图视图阅读态：无 Tab/工具栏，方桌采用 Figma 设计稿样式。'
      }
    }
  },
  args: {
    items: [],
    renderItem: function renderItem(item) {
      return renderSimpleItem(item);
    },
    renderItemByKind: {
      table: getRenderItemByKindTable(mockDataSources),
      roundTable: getRenderItemByKindRoundTable(mockDataSources)
    },
    floorMapConfig: mockFloorMapConfig,
    dataSources: mockDataSources,
    mode: 'read',
    mapLayer: {
      backgroundType: 'color',
      backgroundColor: '#f5f5f5',
      padding: 16
    },
    zoom: {
      defaultScale: 1
    },
    pan: {
      enabled: true
    },
    style: {
      height: 400
    }
  }
};

/**
 * 平面图阅读态 - 验证 appearanceMode 的暗色背景兜底
 */
export var DarkBackground = {
  parameters: {
    docs: {
      description: {
        story: '未显式传入当前画布或根级 `mapLayer.backgroundColor` 时，`appearanceMode="dark"` 仅切换 floorMap 画布背景为灰黑色，不改变 dock、HUD 或控件配色。'
      }
    }
  },
  args: {
    items: [],
    renderItem: function renderItem(item) {
      return renderSimpleItem(item);
    },
    renderItemByKind: {
      table: getRenderItemByKindTable(mockDataSources),
      roundTable: getRenderItemByKindRoundTable(mockDataSources)
    },
    floorMapConfig: mockFloorMapConfig,
    dataSources: mockDataSources,
    mode: 'read',
    appearanceMode: 'dark',
    mapLayer: {
      padding: 16
    },
    zoom: {
      defaultScale: 1
    },
    pan: {
      enabled: true
    },
    style: {
      height: 400
    }
  }
};

/**
 * 自定义控制按钮显隐
 */
export var ControlsHidden = {
  args: {
    items: defaultItems.slice(0, 4),
    renderItem: function renderItem(item) {
      return renderSimpleItem(item);
    },
    itemUnit: 'cell',
    mapLayer: {
      backgroundType: 'color',
      backgroundColor: '#f5f5f5',
      padding: 16,
      gap: 8
    },
    controls: {
      showZoom: false,
      showReset: true,
      showFitBounds: false
    }
  }
};

/**
 * `FloorMapLayoutProvider` 注入 `floorMapConfig` / `dataSources`；Layout 仅传展示向 props
 */
export var FloorMapWithLayoutProvider = {
  parameters: {
    docs: {
      description: {
        story: '演示 `FloorMapLayoutProvider`：`floorMapConfig` 与 `dataSources` 由 Context 提供，`PisellFloorMapLayout` 只写 `renderItemByKind`、`mapLayer`、`mode` 等。'
      }
    }
  },
  render: function FloorMapWithLayoutProviderRender() {
    var providerValue = useMemo(function () {
      return {
        floorMapConfig: mockFloorMapConfig,
        dataSources: mockDataSources
      };
    }, []);
    return /*#__PURE__*/React.createElement(FloorMapLayoutProvider, {
      value: providerValue
    }, /*#__PURE__*/React.createElement(PisellFloorMapLayout, {
      items: [],
      renderItem: function renderItem(item) {
        return renderSimpleItem(item);
      },
      renderItemByKind: {
        table: getRenderItemByKindTable(mockDataSources),
        roundTable: 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
      }
    }));
  }
};

// ---------- Figma 设计稿还原（node 14004:1168）----------

/** 桌台状态：对应 Figma 中的边框颜色与图例 */

/** Figma 桌台项：在 FloorMapItemBase 上扩展状态与展示字段 */

var STATUS_BORDER = {
  available: FIGMA.gray200,
  reserved: FIGMA.reserved,
  waiting: FIGMA.waiting,
  dining: FIGMA.dining,
  billed: FIGMA.billed,
  availableSoon: FIGMA.availableSoon
};

/** 5 列 x 4 行（最后一行 4 格），与 Figma 设计稿一致 */
var figmaTableItems = [{
  id: 'S-1',
  x: 0,
  y: 0,
  status: 'reserved',
  customerName: 'Carolino',
  reserveTime: '13:00'
}, {
  id: 'S-2',
  x: 1,
  y: 0,
  status: 'available'
}, {
  id: 'S-3',
  x: 2,
  y: 0,
  status: 'availableSoon',
  guests: 7,
  dishes: '5/5 Dishes',
  duration: '35m30s'
}, {
  id: 'S-4',
  x: 3,
  y: 0,
  status: 'available'
}, {
  id: 'S-5',
  x: 4,
  y: 0,
  status: 'available'
}, {
  id: 'M-1',
  x: 0,
  y: 1,
  status: 'available'
}, {
  id: 'M-2',
  x: 1,
  y: 1,
  status: 'available'
}, {
  id: 'M-3',
  x: 2,
  y: 1,
  status: 'waiting',
  guests: 2,
  dishes: '3/5 Dishes',
  duration: '15m30s'
}, {
  id: 'M-4',
  x: 3,
  y: 1,
  status: 'available'
}, {
  id: 'M-7',
  x: 4,
  y: 1,
  status: 'dining',
  guests: 5,
  dishes: '5/5 Dishes',
  duration: '5m30s'
}, {
  id: 'L-1',
  x: 0,
  y: 2,
  status: 'dining',
  guests: 5,
  dishes: '5/5 Dishes',
  duration: '5m30s'
}, {
  id: 'L-2',
  x: 1,
  y: 2,
  status: 'billed',
  guests: 5,
  dishes: '5/5 Dishes',
  duration: '25m30s'
}, {
  id: 'L-3',
  x: 2,
  y: 2,
  status: 'available'
}, {
  id: 'X-1',
  x: 3,
  y: 2,
  status: 'available'
}, {
  id: 'L-4',
  x: 4,
  y: 2,
  status: 'available'
}, {
  id: 'X-2',
  x: 0,
  y: 3,
  status: 'dining',
  guests: 5,
  dishes: '5/5 Dishes',
  duration: '5m30s'
}, {
  id: 'X-3',
  x: 1,
  y: 3,
  status: 'available'
}, {
  id: 'X-4',
  x: 2,
  y: 3,
  status: 'waiting',
  guests: 2,
  dishes: '3/5 Dishes',
  duration: '15m30s'
}, {
  id: 'X-5',
  x: 3,
  y: 3,
  status: 'available'
}];

/** Figma node 13998:648 像素布局：小格 160×160，中格 240×160，大格 250×160，XL 超大格 460×160，间距 50px */
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'
}];

/** 卡片内一行：左侧图标 + 文案（Figma Text sm/Regular 14/400/20） */
function FigmaCardRow(_ref) {
  var icon = _ref.icon,
    children = _ref.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));
}

/** 根据 item id 前缀得到小条数量：S=1, M=2, L=3, X=3, XL=4；编辑态落位 id 可能为 dataSourceKey_id，按后半或默认 1 */
function getBarCountFromItemId(id) {
  var 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; // S- 及其他
}
var CARD_BAR_WIDTH = 80;
var CARD_BAR_HEIGHT = 12;

/** 矩形外小条：S 上下各 1 条，M 各 2 条，L 各 3 条，XL 各 4 条；单条 80×12px */
function CardBars(_ref2) {
  var count = _ref2.count,
    position = _ref2.position,
    barColor = _ref2.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
  }, function (_, i) {
    return /*#__PURE__*/React.createElement("div", {
      key: i,
      style: {
        width: CARD_BAR_WIDTH,
        height: CARD_BAR_HEIGHT,
        borderRadius: 6,
        background: barColor
      }
    });
  }));
}

/** 方桌卡片展示用数据结构（与 Figma 设计一致，供编辑态/阅读态复用） */

/** 渲染 Figma 样式的方桌卡片（上下小条 + 白底卡片 + 状态边框），供 FigmaDesign 与编辑态方桌复用 */
function renderFigmaStyleTableCard(cardItem) {
  var _cardItem$status, _cardItem$displayName, _cardItem$customerNam, _cardItem$reserveTime;
  var status = (_cardItem$status = cardItem.status) !== null && _cardItem$status !== void 0 ? _cardItem$status : 'available';
  var borderColor = STATUS_BORDER[status];
  var 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 ".concat(FIGMA.gray200) : "4px solid ".concat(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.displayName) !== null && _cardItem$displayName !== void 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(Avatar, {
      size: 16,
      icon: /*#__PURE__*/React.createElement(UserOutlined, null),
      style: {
        backgroundColor: FIGMA.gray200
      }
    })
  }, /*#__PURE__*/React.createElement("span", null, (_cardItem$customerNam = cardItem.customerName) !== null && _cardItem$customerNam !== void 0 ? _cardItem$customerNam : '')), /*#__PURE__*/React.createElement(FigmaCardRow, {
    icon: /*#__PURE__*/React.createElement(ClockCircleOutlined, null)
  }, /*#__PURE__*/React.createElement("span", null, (_cardItem$reserveTime = cardItem.reserveTime) !== null && _cardItem$reserveTime !== void 0 ? _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(TeamOutlined, null)
  }, /*#__PURE__*/React.createElement("span", null, cardItem.guests)), cardItem.dishes && /*#__PURE__*/React.createElement(FigmaCardRow, {
    icon: /*#__PURE__*/React.createElement(AuditOutlined, null)
  }, /*#__PURE__*/React.createElement("span", null, cardItem.dishes)), cardItem.duration && /*#__PURE__*/React.createElement(FigmaCardRow, {
    icon: /*#__PURE__*/React.createElement(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
  });
}

/** 从编辑态 merged item + dataSources 得到方桌卡片数据（用于 renderItemByKind.table） */
function getTableCardItemFromMerged(item, dataSources) {
  var _item$_sceneElement, _dataSources$binding$, _binding$recordId, _ref3;
  var binding = (_item$_sceneElement = item._sceneElement) === null || _item$_sceneElement === void 0 ? void 0 : _item$_sceneElement.dataBinding;
  var record = binding ? (_dataSources$binding$ = dataSources[binding.dataSourceKey]) === null || _dataSources$binding$ === void 0 ? void 0 : _dataSources$binding$.find(function (r) {
    return r.id === binding.recordId;
  }) : undefined;
  var displayId = (_binding$recordId = binding === null || binding === void 0 ? void 0 : binding.recordId) !== null && _binding$recordId !== void 0 ? _binding$recordId : item.id;
  return {
    id: displayId,
    displayName: record === null || record === void 0 ? void 0 : record.name,
    status: (_ref3 = record === null || record === void 0 ? void 0 : record.status) !== null && _ref3 !== void 0 ? _ref3 : 'available',
    customerName: record === null || record === void 0 ? void 0 : record.customerName,
    reserveTime: record === null || record === void 0 ? void 0 : record.reserveTime,
    guests: record === null || record === void 0 ? void 0 : record.guests,
    dishes: record === null || record === void 0 ? void 0 : record.dishes,
    duration: record === null || record === void 0 ? void 0 : record.duration
  };
}

/** 图例单项：圆点 + 文案 */
function LegendItem(_ref4) {
  var color = _ref4.color,
    label = _ref4.label,
    _ref4$fill = _ref4.fill,
    fill = _ref4$fill === void 0 ? false : _ref4$fill;
  return /*#__PURE__*/React.createElement("span", {
    style: {
      display: 'inline-flex',
      alignItems: 'center',
      gap: 6,
      fontFamily: FIGMA.fontFamily,
      fontSize: 14,
      fontWeight: 500,
      lineHeight: '20px',
      color: FIGMA.gray700
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      width: 8,
      height: 8,
      borderRadius: '50%',
      background: fill ? color : FIGMA.white,
      border: "4px solid ".concat(color),
      flexShrink: 0
    }
  }), label);
}

/** 图例单项（Figma 14131:6266）：16px 圆点，Available 白底+灰边，其余实心填色；文案 14px Medium、黑色 */
function LegendItem14131(_ref5) {
  var color = _ref5.color,
    label = _ref5.label,
    _ref5$fill = _ref5.fill,
    fill = _ref5$fill === void 0 ? false : _ref5$fill;
  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 ".concat(FIGMA.gray200),
      flexShrink: 0
    }
  }), label);
}

/**
 * Figma 设计稿效果 - 餐厅桌台状态图（顶部 Tab + 图例参考 node 14131:6266，内容区不变）
 */
export 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 ".concat(FIGMA.gray200),
        padding: 6,
        borderRadius: 8,
        display: 'inline-flex',
        gap: 8
      }
    }, /*#__PURE__*/React.createElement(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 ".concat(FIGMA.gray200),
        borderRadius: 8,
        overflow: 'hidden',
        boxShadow: FIGMA.shadowSm
      }
    }, /*#__PURE__*/React.createElement(PisellFloorMapLayout, {
      className: "figma-story-map",
      items: figma13998PixelItems,
      renderItem: function renderItem(item) {
        return 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, "\n          .figma-story-tabs-wrap-14131 .ant-tabs-nav {\n            margin: 0;\n          }\n          .figma-story-tabs-wrap-14131 .ant-tabs-nav-list {\n            gap: 8px;\n          }\n          .figma-story-tabs.figma-story-tabs-14131 .ant-tabs-tab {\n            font-family: ".concat(FIGMA.fontFamily, ";\n            padding: 10px 14px;\n            margin: 0;\n            font-size: 16px;\n            font-weight: 600;\n            line-height: 24px;\n            color: ").concat(FIGMA.gray500, ";\n            border-radius: 6px;\n          }\n          .figma-story-tabs.figma-story-tabs-14131 .ant-tabs-tab.ant-tabs-tab-active {\n            background: ").concat(FIGMA.white, ";\n            box-shadow: ").concat(FIGMA.shadowSm, ";\n          }\n          .figma-story-tabs.figma-story-tabs-14131 .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {\n            color: ").concat(FIGMA.gray700, ";\n          }\n          .figma-story-tabs.figma-story-tabs-14131 .ant-tabs-ink-bar {\n            display: none;\n          }\n          .figma-story-tabs.figma-story-tabs-14131 .ant-tabs-nav::before {\n            display: none;\n          }\n          .figma-story-map-wrap [class*=\"react-transform-wrapper\"],\n          .figma-story-map-wrap [class*=\"react-transform-element\"] {\n            overflow: visible !important;\n          }\n          .figma-story-map-wrap .pisell-floor-map-layout {\n            overflow: visible !important;\n          }\n          .figma-table-card,\n          .figma-table-card * {\n            visibility: visible !important;\n          }\n          .figma-table-card {\n            color: ").concat(FIGMA.gray900, ";\n          }\n          .figma-table-card .ant-avatar {\n            flex-shrink: 0;\n          }\n        ")));
  }
};