(function(){
  window.BridgeBlocksCustomElements = window.BridgeBlocksCustomElements || [];
  window.BridgeBlocksCustomElements.push(function(ctx){
    const { bm, addOnce, css } = ctx;
    addOnce(bm, 'cust-table', { id:'cust-table', label:'🧩 Tabelle (2xN)',
      content:`<table data-bridge-table="1" data-bridge-rows="3" data-bridge-cols="2" role="presentation" width="100%" cellpadding="0" cellspacing="0" style="${css({'font-family':'Arial,sans-serif','border-collapse':'collapse','width':'100%','margin-bottom':'16px'})}">
        <tbody>
          <tr>
            <th style="${css({'text-align':'left','padding':'8px','border':'1px solid #e2e8f0','background-color':'#f8fafc','font-size':'13px'})}">Spalte A</th>
            <th style="${css({'text-align':'left','padding':'8px','border':'1px solid #e2e8f0','background-color':'#f8fafc','font-size':'13px'})}">Spalte B</th>
          </tr>
          <tr>
            <td style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">Zeile 1</td>
            <td style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">...</td>
          </tr>
          <tr>
            <td style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">Zeile 2</td>
            <td style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">...</td>
          </tr>
        </tbody>
      </table>`
    });
  });
})();