// edit-pill-canvas.jsx — floating-pill variants on the pannable canvas.
const PW = 402, PH = 874;
const pFrame = { background: 'transparent', boxShadow: 'none', borderRadius: 0, overflow: 'visible' };
function PF({ children }) { return <window.IOSDevice width={PW} height={PH}>{children}</window.IOSDevice>; }

function PillBoard() {
  return (
    <window.DesignCanvas>
      <window.DCSection id="pills" title="浮動膠囊 — 變體" subtitle="批次收藏 / 加入提醒 · 同一多選清單，比較膠囊樣式">
        <window.DCArtboard id="pv-labeled" label="1 · 深色膠囊＋文字標籤" width={PW} height={PH} style={pFrame}>
          <PF><window.PillLabeled/></PF>
        </window.DCArtboard>
        <window.DCArtboard id="pv-light" label="2 · 淺色卡片膠囊（文字按鈕）" width={PW} height={PH} style={pFrame}>
          <PF><window.PillLightCard/></PF>
        </window.DCArtboard>
        <window.DCArtboard id="pv-primary" label="3 · 主操作優先（加入提醒 primary）" width={PW} height={PH} style={pFrame}>
          <PF><window.PillPrimary/></PF>
        </window.DCArtboard>
        <window.DCArtboard id="pv-wide" label="4 · 近全寬底部浮動 bar" width={PW} height={PH} style={pFrame}>
          <PF><window.PillWideBar/></PF>
        </window.DCArtboard>
        <window.DCArtboard id="pv-stacked" label="5 · 膠囊＋上方展開更多動作" width={PW} height={PH} style={pFrame}>
          <PF><window.PillStacked/></PF>
        </window.DCArtboard>
      </window.DCSection>
    </window.DesignCanvas>
  );
}

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