// edit-modes-canvas.jsx — five edit-mode patterns on the pannable canvas.
const EW = 402, EH = 874;
const eFrame = { background: 'transparent', boxShadow: 'none', borderRadius: 0, overflow: 'visible' };
function EF({ children }) { return <window.IOSDevice width={EW} height={EH}>{children}</window.IOSDevice>; }

function EditModesBoard() {
  return (
    <window.DesignCanvas>
      <window.DCSection id="modes" title="進入編輯模式 — 批次收藏 / 加入提醒" subtitle="選股結果列表的五種常見樣式 · 雙平台通用">
        <window.DCArtboard id="m-editbar" label="A · iOS 編輯模式（左勾選＋底部工具列）" width={EW} height={EH} style={eFrame}>
          <EF><window.PatternEditBar/></EF>
        </window.DCArtboard>
        <window.DCArtboard id="m-cab" label="B · 情境頂欄 CAB（深色頂欄＋右上動作）" width={EW} height={EH} style={eFrame}>
          <EF><window.PatternCAB/></EF>
        </window.DCArtboard>
        <window.DCArtboard id="m-swipe" label="C · 逐列滑動操作（免進模式）" width={EW} height={EH} style={eFrame}>
          <EF><window.PatternSwipe/></EF>
        </window.DCArtboard>
        <window.DCArtboard id="m-inline" label="D · 逐列常駐快捷鈕" width={EW} height={EH} style={eFrame}>
          <EF><window.PatternInline/></EF>
        </window.DCArtboard>
        <window.DCArtboard id="m-pill" label="E · 長按多選＋浮動膠囊列" width={EW} height={EH} style={eFrame}>
          <EF><window.PatternFloatingPill/></EF>
        </window.DCArtboard>
      </window.DCSection>
    </window.DesignCanvas>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<EditModesBoard/>);