webserial-core 2.0.0-dev.1 → 2.0.1

package/dist/demos/assets/web-usb-D7sSHjku.js

@@ -0,0 +1 @@
+import{_ as e,a as t,b as n,d as r,f as i,g as a,h as o,i as s,l as ee,m as te,n as ne,o as re,p as c,r as l,t as u,v as ie,x as ae,y as oe}from"./demo-shared-DnvFynUr.js";var se=32,ce=34,d=0,le=30,ue=3,de=7,fe=1,pe=0,me=771,he=768,f=255,ge=8,p=`none`,m=1,_e=[16,8,7,6,5],ve=[1,2],ye=[`none`,`even`,`odd`],be=[`none`,`odd`,`even`],xe=[1,1.5,2],h={usbControlInterfaceClass:2,usbTransferInterfaceClass:10,protocol:void 0};function g(e,t){let n=e.configurations[0];if(!n)return null;for(let e of n.interfaces)if(e.alternates[0]?.interfaceClass===t)return e;return null}function _(e,t){let n=e.configurations[0];if(!n)return null;for(let e of n.interfaces){let n=e.alternates[0];if(!n||n.interfaceClass!==t)continue;let r=n.endpoints.some(e=>e.direction===`in`),i=n.endpoints.some(e=>e.direction===`out`);if(r&&i)return e}return null}function v(e,t){let n=e.alternates[0];if(n){for(let e of n.endpoints)if(e.direction===t)return e}throw TypeError(`Interface ${e.interfaceNumber} does not have an ${t} endpoint.`)}function Se(e,t){return t===2?`cdc_acm`:e.vendorId===4292?`cp210x`:`none`}var Ce=class{device_;endpoint_;onError_;constructor(e,t,n){this.device_=e,this.endpoint_=t,this.onError_=n}pull(e){(async()=>{let t=this.endpoint_.packetSize;try{let n=await this.device_.transferIn(this.endpoint_.endpointNumber,t);if(n.status!==`ok`){e.error(`USB error: ${n.status}`),this.onError_();return}if(n.data?.buffer&&n.data.byteLength>0){let t=new Uint8Array(n.data.buffer,n.data.byteOffset,n.data.byteLength);t.length>0&&e.enqueue(t)}}catch(t){e.error(String(t)),this.onError_()}})()}},we=class{device_;endpoint_;onError_;constructor(e,t,n){this.device_=e,this.endpoint_=t,this.onError_=n}async write(e,t){try{let n=await this.device_.transferOut(this.endpoint_.endpointNumber,e.buffer);n.status!==`ok`&&(t.error(n.status),this.onError_())}catch(e){t.error(String(e)),this.onError_()}}},y=class{device_;protocol_;controlInterface_;transferInterface_;inEndpoint_;outEndpoint_;serialOptions_;readable_=null;writable_=null;cdcOutputSignals_={dataTerminalReady:!1,requestToSend:!1,break:!1};constructor(e,t){this.device_=e;let n={...h,...t};this.protocol_=n.protocol??Se(e,n.usbControlInterfaceClass);let r=n.usbControlInterfaceClass,i=n.usbTransferInterfaceClass;if(r===i){let t=_(e,i);if(!t)throw TypeError(`Unable to find interface with class ${i} that has both IN and OUT endpoints.`);this.controlInterface_=t,this.transferInterface_=t}else{let t=g(e,r);if(!t)throw TypeError(`Unable to find control interface with class ${r}.`);let n=_(e,i)??g(e,i);if(!n)throw TypeError(`Unable to find transfer interface with class ${i}.`);this.controlInterface_=t,this.transferInterface_=n}this.inEndpoint_=v(this.transferInterface_,`in`),this.outEndpoint_=v(this.transferInterface_,`out`)}get readable(){return!this.readable_&&this.device_.opened&&(this.readable_=new ReadableStream(new Ce(this.device_,this.inEndpoint_,()=>{this.readable_=null}),{highWaterMark:this.serialOptions_?.bufferSize??f})),this.readable_}get writable(){return!this.writable_&&this.device_.opened&&(this.writable_=new WritableStream(new we(this.device_,this.outEndpoint_,()=>{this.writable_=null}),new ByteLengthQueuingStrategy({highWaterMark:this.serialOptions_?.bufferSize??f}))),this.writable_}async open(e){this.serialOptions_=e,this.validateOptions();try{switch(await this.device_.open(),this.device_.configuration===null&&await this.device_.selectConfiguration(1),await this.device_.claimInterface(this.controlInterface_.interfaceNumber),this.controlInterface_!==this.transferInterface_&&await this.device_.claimInterface(this.transferInterface_.interfaceNumber),this.protocol_){case`cdc_acm`:await this.cdcInit();break;case`cp210x`:await this.cp210xInit();break;case`none`:break}}catch(e){throw this.device_.opened&&await this.device_.close(),Error(`Error setting up device: `+(e instanceof Error?e.message:String(e)),{cause:e})}}async close(){let e=[];if(this.readable_&&e.push(this.readable_.cancel()),this.writable_&&e.push(this.writable_.abort()),await Promise.all(e),this.readable_=null,this.writable_=null,this.device_.opened){switch(this.protocol_){case`cdc_acm`:await this.cdcSetSignals({dataTerminalReady:!1,requestToSend:!1});break;case`cp210x`:await this.cp210xDeinit();break}await this.device_.close()}}async forget(){return this.device_.forget()}getInfo(){return{usbVendorId:this.device_.vendorId,usbProductId:this.device_.productId}}async cdcInit(){await this.cdcSetLineCoding(),await this.cdcSetSignals({dataTerminalReady:!0})}async cdcSetSignals(e){if(this.cdcOutputSignals_={...this.cdcOutputSignals_,...e},e.dataTerminalReady!==void 0||e.requestToSend!==void 0){let e=(this.cdcOutputSignals_.dataTerminalReady?1:0)|(this.cdcOutputSignals_.requestToSend?2:0);await this.device_.controlTransferOut({requestType:`class`,recipient:`interface`,request:ce,value:e,index:this.controlInterface_.interfaceNumber})}}async cdcSetLineCoding(){let e=new ArrayBuffer(7),t=new DataView(e);if(t.setUint32(0,this.serialOptions_.baudRate,!0),t.setUint8(4,xe.indexOf(this.serialOptions_.stopBits??m)),t.setUint8(5,be.indexOf(this.serialOptions_.parity??p)),t.setUint8(6,this.serialOptions_.dataBits??ge),(await this.device_.controlTransferOut({requestType:`class`,recipient:`interface`,request:se,value:0,index:this.controlInterface_.interfaceNumber},e)).status!==`ok`)throw new DOMException(`Failed to set line coding.`,`NetworkError`)}async cp210xInit(){let e=this.controlInterface_.interfaceNumber;await this.device_.controlTransferOut({requestType:`vendor`,recipient:`interface`,request:d,value:fe,index:e});let t=new ArrayBuffer(4);new DataView(t).setUint32(0,this.serialOptions_.baudRate,!0),await this.device_.controlTransferOut({requestType:`vendor`,recipient:`interface`,request:le,value:0,index:e},t);let n=this.serialOptions_.dataBits??ge,r={none:0,odd:16,even:32}[this.serialOptions_.parity??p]??0,i=({1:0,2:2}[this.serialOptions_.stopBits??m]??0)<<8|r|n;await this.device_.controlTransferOut({requestType:`vendor`,recipient:`interface`,request:ue,value:i,index:e}),await this.device_.controlTransferOut({requestType:`vendor`,recipient:`interface`,request:de,value:me,index:e})}async cp210xDeinit(){let e=this.controlInterface_.interfaceNumber;await this.device_.controlTransferOut({requestType:`vendor`,recipient:`interface`,request:de,value:he,index:e}),await this.device_.controlTransferOut({requestType:`vendor`,recipient:`interface`,request:d,value:pe,index:e})}validateOptions(){if(this.serialOptions_.baudRate%1!=0)throw RangeError(`Invalid baud rate: ${this.serialOptions_.baudRate}`);if(this.serialOptions_.dataBits!==void 0&&!_e.includes(this.serialOptions_.dataBits))throw RangeError(`Invalid dataBits: ${this.serialOptions_.dataBits}`);if(this.serialOptions_.stopBits!==void 0&&!ve.includes(this.serialOptions_.stopBits))throw RangeError(`Invalid stopBits: ${this.serialOptions_.stopBits}`);if(this.serialOptions_.parity!==void 0&&!ye.includes(this.serialOptions_.parity))throw RangeError(`Invalid parity: ${this.serialOptions_.parity}`)}},Te=class{options_;constructor(e){this.options_={...h,...e}}async requestPort(e,t){let n={...this.options_,...t},r=[];if(e?.filters&&e.filters.length>0)for(let t of e.filters){let e={};t.usbVendorId!==void 0&&(e.vendorId=t.usbVendorId),t.usbProductId!==void 0&&(e.productId=t.usbProductId),n.usbControlInterfaceClass!==void 0&&n.usbControlInterfaceClass!==255?e.classCode=n.usbControlInterfaceClass:e.vendorId===void 0&&e.productId===void 0&&(e.classCode=n.usbControlInterfaceClass??2),r.push(e)}else r.push({classCode:n.usbControlInterfaceClass??2});return new y(await navigator.usb.requestDevice({filters:r}),n)}async getPorts(e){let t={...this.options_,...e},n=await navigator.usb.getDevices(),r=[];for(let e of n)try{let n=new y(e,t);r.push(n)}catch{}return r}},b=[],x=[],Ee=class extends ae{_hsCmd;_hsCmdMode;_hsExpect;_hsExpectMode;constructor(e,t,n,r,i){super(e),this._hsCmd=t,this._hsCmdMode=n,this._hsExpect=r,this._hsExpectMode=i}async handshake(){if(!this._hsCmd||(this._hsCmdMode===`hex`?await this.send(L(this._hsCmd)):await this.send(l(this._hsCmd)),!this._hsExpect))return!0;let e=this._hsExpect.trim();return new Promise(t=>{let n=r=>{if(this.off(`serial:data`,n),this._hsExpectMode===`hex`){let e=new TextEncoder().encode(String(r)),n=L(this._hsExpect);t(e.length===n.length&&e.every((e,t)=>e===n[t]))}else t(String(r).trim()===e)};this.on(`serial:data`,n)})}},S=e=>document.getElementById(e),C=S(`messages`),w=S(`btn-connect`),De=S(`btn-disconnect`),Oe=S(`btn-send`),T=S(`input-send`),ke=S(`mode-toggle`),Ae=S(`status-dot`),je=S(`status-text`),Me=S(`console-dot`),E=S(`console-text`),D=S(`sidebar`),O=S(`code-panel`),k=S(`code-view`),A=S(`code-tab`),Ne=S(`menu-btn`),Pe=S(`code-toggle-btn`),j=S(`theme-btn`),Fe=S(`clear-btn`),M=S(`copy-btn`),Ie=S(`dl-btn`),Le=S(`cfg-export-btn`),N=S(`cfg-import-input`);function P(){let e=e=>(S(e)?.value??``).trim(),t=(t,n)=>parseInt(e(t))||n,n=e=>S(e)?.value??``,r=e=>S(e)?.checked??!1,i=e(`cfg-vendor`),a=e(`cfg-product`),o=[];if(i||a){let e={};i&&(e.usbVendorId=parseInt(i,16)),a&&(e.usbProductId=parseInt(a,16)),o.push(e)}return{usbControlInterfaceClass:t(`cfg-ctrl-class`,255),usbTransferInterfaceClass:t(`cfg-xfer-class`,255),baudRate:t(`cfg-baud`,9600),dataBits:t(`cfg-databits`,8),stopBits:t(`cfg-stopbits`,1),parity:n(`cfg-parity`)||`none`,flowControl:n(`cfg-flow`)||`none`,bufferSize:t(`cfg-bufsize`,255),commandTimeout:t(`cfg-timeout`,3e3),autoReconnect:r(`cfg-autoreconnect`),autoReconnectInterval:t(`cfg-reconnect-ms`,1500),handshakeTimeout:t(`cfg-handshake`,2e3),delimiter:e(`cfg-delim`)||`\\n`,prepend:e(`cfg-prepend`),append:e(`cfg-append`),hsCmd:e(`cfg-hs-cmd`),hsCmdMode:n(`cfg-hs-cmd-mode`)||`text`,hsExpect:e(`cfg-hs-expect`),hsExpectMode:n(`cfg-hs-expect-mode`)||`text`,filters:o}}function Re(e){let t=(e,t)=>{let n=document.getElementById(e);n&&(n instanceof HTMLInputElement&&n.type===`checkbox`?n.checked=!!t:(n instanceof HTMLInputElement||n instanceof HTMLSelectElement)&&(n.value=String(t??``)))};t(`cfg-ctrl-class`,e.usbControlInterfaceClass??255),t(`cfg-xfer-class`,e.usbTransferInterfaceClass??255),t(`cfg-baud`,e.baudRate??9600),t(`cfg-databits`,e.dataBits??8),t(`cfg-stopbits`,e.stopBits??1),t(`cfg-parity`,e.parity??`none`),t(`cfg-flow`,e.flowControl??`none`),t(`cfg-bufsize`,e.bufferSize??255),t(`cfg-timeout`,e.commandTimeout??3e3),t(`cfg-handshake`,e.handshakeTimeout??2e3),t(`cfg-reconnect-ms`,e.autoReconnectInterval??1500),t(`cfg-autoreconnect`,e.autoReconnect??!1),t(`cfg-vendor`,e.filters?.[0]?.usbVendorId==null?``:e.filters[0].usbVendorId.toString(16)),t(`cfg-product`,e.filters?.[0]?.usbProductId==null?``:e.filters[0].usbProductId.toString(16)),t(`cfg-delim`,e.delimiter??`\\n`),t(`cfg-prepend`,e.prepend??``),t(`cfg-append`,e.append??``),t(`cfg-hs-cmd`,e.hsCmd??``),t(`cfg-hs-cmd-mode`,e.hsCmdMode??`text`),t(`cfg-hs-expect`,e.hsExpect??``),t(`cfg-hs-expect-mode`,e.hsExpectMode??`text`)}function F(e){let t=e.replace(/[^a-zA-Z0-9_$]/g,``).replace(/^[^a-zA-Z_$]/,`C`);return t.charAt(0).toUpperCase()+t.slice(1)||`MyDevice`}function I(e){return Array.from(e).map(e=>e.toString(16).toUpperCase().padStart(2,`0`)).join(` `)}function L(e){let t=e.replace(/\s+/g,``);if(t.length%2!=0)throw Error(`Odd number of hex characters.`);let n=new Uint8Array(t.length/2);for(let e=0;e<t.length;e+=2)n[e/2]=parseInt(t.substring(e,e+2),16);return n}function R(e,t){[Ae,Me].forEach(t=>{t&&(t.className=`status-dot`,e!==`disconnected`&&t.classList.add(e))}),je&&(je.textContent=t),E&&(E.textContent=t)}var z=null;function B(){z&&clearTimeout(z),z=setTimeout(()=>{let e=P(),t=F((S(`dl-name`)?.value??`MyUsbDevice`).trim()),n=(document.querySelector(`input[name='dl-lang']:checked`)?.value??`ts`)===`ts`,r=n?`ts`:`js`;ie(k,ee(e,t,n,b,x)),A&&(A.textContent=`${t.substring(0,10).toLowerCase()}.${r}`)},180)}var ze=c();j&&(j.textContent=ze===`dark`?`☀️`:`🌙`),Ne?.addEventListener(`click`,()=>D.classList.toggle(`collapsed`)),Pe?.addEventListener(`click`,()=>O.classList.toggle(`collapsed`));var V=S(`resize-handle`);if(V){let e=0,t=0,n=n=>{let r=Math.max(180,Math.min(700,t+(e-n.clientX)));document.documentElement.style.setProperty(`--code-w`,`${r}px`)},r=()=>{V.classList.remove(`dragging`),document.removeEventListener(`pointermove`,n)};V.addEventListener(`pointerdown`,i=>{e=i.clientX,t=O.getBoundingClientRect().width,V.classList.add(`dragging`),document.addEventListener(`pointermove`,n),document.addEventListener(`pointerup`,r,{once:!0}),i.preventDefault()})}var H=S(`sidebar-resize-handle`);if(H){let e=0,t=0,n=n=>{let r=Math.max(200,Math.min(600,t+(n.clientX-e)));document.documentElement.style.setProperty(`--sidebar-w`,`${r}px`)},r=()=>{H.classList.remove(`dragging`),document.removeEventListener(`pointermove`,n)};H.addEventListener(`pointerdown`,i=>{e=i.clientX,t=D.getBoundingClientRect().width,H.classList.add(`dragging`),document.addEventListener(`pointermove`,n),document.addEventListener(`pointerup`,r,{once:!0}),i.preventDefault()})}window.innerWidth<=960&&O.classList.add(`collapsed`),window.innerWidth<=640&&D.classList.add(`collapsed`),j?.addEventListener(`click`,()=>{let e=oe();j&&(j.textContent=e===`dark`?`☀️`:`🌙`)}),Fe?.addEventListener(`click`,()=>ne(C)),M?.addEventListener(`click`,async()=>{let e=k?.textContent??``;try{await navigator.clipboard.writeText(e),M&&(M.textContent=`Copied!`,M.classList.add(`copied`),setTimeout(()=>{M.textContent=`Copy`,M.classList.remove(`copied`)},1500))}catch{}}),Ie?.addEventListener(`click`,()=>{let n=P(),r=(S(`dl-name`)?.value??`my-usb-device`).trim(),i=F(r),s=(document.querySelector(`input[name='dl-lang']:checked`)?.value??`ts`)===`ts`,ne=document.querySelector(`input[name='dl-type']:checked`)?.value??`file`,c=s?`ts`:`js`,l=ee(n,i,s,b,x);ne===`project`?re([{name:`device.${c}`,content:l},{name:`package.json`,content:o(r,s,`usb`)},{name:`index.html`,content:te(i,c,`WebUSB`)},{name:`README.md`,content:a(i,c,`WebUSB`,`Requires a Chromium browser. Common USB-to-serial chips: CP2102 (0x10c4/0xea60), CH340 (0x1a86/0x7523).`)},...s?[{name:`tsconfig.json`,content:e()}]:[]],`${r}-project`):t(`${r}.${c}`,l)}),Le?.addEventListener(`click`,()=>{let e=(S(`dl-name`)?.value??`my-usb-device`).trim(),t=F(e);s({$version:1,provider:`usb`,className:e,language:document.querySelector(`input[name='dl-lang']:checked`)?.value??`ts`,dlType:document.querySelector(`input[name='dl-type']:checked`)?.value??`file`,cfg:P(),commands:b,listeners:x},t+`-config`)}),N?.addEventListener(`change`,()=>{let e=N.files?.[0];if(!e)return;let t=new FileReader;t.onload=e=>{try{let t=JSON.parse(e.target?.result);if(t.$version!==1||t.provider!==`usb`)return;let n=S(`dl-name`);n&&(n.value=t.className),document.querySelectorAll(`input[name='dl-lang']`).forEach(e=>{e.checked=e.value===t.language}),document.querySelectorAll(`input[name='dl-type']`).forEach(e=>{e.checked=e.value===t.dlType}),Re(t.cfg),b=t.commands.map(e=>({...e,id:crypto.randomUUID()})),x=t.listeners.map(e=>({...e,id:crypto.randomUUID()})),Q(),$(),B()}catch{}N.value=``},t.readAsText(e)}),[`cfg-ctrl-class`,`cfg-xfer-class`,`cfg-baud`,`cfg-databits`,`cfg-stopbits`,`cfg-parity`,`cfg-flow`,`cfg-bufsize`,`cfg-timeout`,`cfg-handshake`,`cfg-reconnect-ms`,`cfg-autoreconnect`,`cfg-vendor`,`cfg-product`,`cfg-delim`,`cfg-prepend`,`cfg-append`,`cfg-hs-cmd`,`cfg-hs-cmd-mode`,`cfg-hs-expect`,`cfg-hs-expect-mode`,`dl-name`].forEach(e=>{let t=document.getElementById(e);t?.addEventListener(`change`,B),t?.addEventListener(`input`,B)}),document.querySelectorAll(`input[name='dl-lang']`).forEach(e=>e.addEventListener(`change`,B)),B();var U=`text`;ke?.addEventListener(`click`,()=>{U=U===`text`?`hex`:`text`,ke.textContent=U===`text`?`TXT`:`HEX`,T.placeholder=U===`text`?`Type a command, e.g. LED_ON`:`Hex bytes, e.g. FF 01 A3`});var W=null;function Be(e){Oe.disabled=!e,T.disabled=!e,De.disabled=!e,w.disabled=e}w?.addEventListener(`click`,async()=>{if(W){try{await W.disconnect()}catch{}W=null}let e=P();ae.setProvider(new Te({usbControlInterfaceClass:e.usbControlInterfaceClass,usbTransferInterfaceClass:e.usbTransferInterfaceClass}));let t=l(e.delimiter);W=new Ee({baudRate:e.baudRate,dataBits:e.dataBits,stopBits:e.stopBits,parity:e.parity,flowControl:e.flowControl,bufferSize:e.bufferSize,commandTimeout:e.commandTimeout,parser:n(t),autoReconnect:e.autoReconnect,autoReconnectInterval:e.autoReconnectInterval,handshakeTimeout:e.handshakeTimeout,filters:e.filters??[]},e.hsCmd,e.hsCmdMode,e.hsExpect,e.hsExpectMode),W.on(`serial:connecting`,()=>{R(`connecting`,`Connecting…`),w.disabled=!0,u(C,`Connecting via WebUSB…`,{kind:`system`})}),W.on(`serial:connected`,()=>{R(`connected`,`Connected`),Be(!0),u(C,`Connected via WebUSB!`,{kind:`system`})}),W.on(`serial:disconnected`,()=>{R(`disconnected`,`Disconnected`),Be(!1),u(C,`Disconnected.`,{kind:`system`}),W=null}),W.on(`serial:data`,e=>{u(C,String(e),{kind:`received`,label:`Device`})}),W.on(`serial:error`,e=>{R(`error`,`Error`),u(C,`Error: ${e.message}`,{kind:`error`}),w.disabled=!1}),W.on(`serial:need-permission`,()=>{R(`error`,`Permission denied`),u(C,`Permission denied — allow access to the USB device.`,{kind:`error`}),w.disabled=!1}),W.on(`serial:timeout`,e=>{u(C,`Timeout: ${I(e)}`,{kind:`error`})}),W.on(`serial:reconnecting`,()=>{R(`connecting`,`Reconnecting…`),u(C,`Auto-reconnecting via WebUSB…`,{kind:`system`})});try{await W.connect()}catch{}}),De?.addEventListener(`click`,async()=>{await W?.disconnect()});async function G(){let e=T.value.trim();if(!e||!W)return;let t=P(),n=t.append?l(t.append):l(t.delimiter);try{if(U===`hex`){let t=L(e);u(C,`HEX: ${I(t)}`,{kind:`sent`,label:`You`}),await W.send(t)}else{let r=t.prepend+e+n;u(C,e,{kind:`sent`,label:`You`}),await W.send(r)}T.value=``,T.focus()}catch(e){u(C,`Send error: ${e instanceof Error?e.message:String(e)}`,{kind:`error`})}}Oe?.addEventListener(`click`,G),T?.addEventListener(`keydown`,e=>{e.key===`Enter`&&G()});var K=S(`cmd-name`),q=S(`cmd-value`),Ve=S(`cmd-mode`),He=S(`cmd-add`),J=S(`cmd-list`),Y=S(`lst-name`),X=S(`lst-pattern`),Ue=S(`lst-match`),We=S(`lst-add`),Z=S(`lst-list`);function Q(){if(J){J.innerHTML=``;for(let e of b){let t=document.createElement(`div`);t.className=`chip`;let n=document.createElement(`span`);n.className=`chip-badge`,n.textContent=e.mode.toUpperCase();let r=document.createElement(`span`);r.className=`chip-name`,r.textContent=e.name;let i=document.createElement(`span`);i.className=`chip-val`,i.textContent=e.value;let a=document.createElement(`button`);a.className=`chip-send`,a.title=`Send now`,a.textContent=`▶`,a.addEventListener(`click`,()=>{if(W)if(e.mode===`hex`){let t=L(e.value);W.send(t).catch(()=>{}),u(C,`HEX: ${I(t)}`,{kind:`sent`,label:`You`})}else{let t=P(),n=t.append?l(t.append):l(t.delimiter);W.send(t.prepend+e.value+n).catch(()=>{}),u(C,e.name,{kind:`sent`,label:`You`})}});let o=document.createElement(`button`);o.className=`chip-del`,o.title=`Remove`,o.textContent=`×`,o.addEventListener(`click`,()=>{b=b.filter(t=>t.id!==e.id),Q(),B()}),t.append(n,r,i,a,o),J.appendChild(t)}}}function $(){if(Z){Z.innerHTML=``;for(let e of x){let t=document.createElement(`div`);t.className=`chip`;let n=document.createElement(`span`);n.className=`chip-badge`,n.textContent=e.match;let r=document.createElement(`span`);r.className=`chip-name`,r.textContent=e.name;let i=document.createElement(`span`);i.className=`chip-val`,i.textContent=e.pattern;let a=document.createElement(`button`);a.className=`chip-del`,a.title=`Remove`,a.textContent=`×`,a.addEventListener(`click`,()=>{x=x.filter(t=>t.id!==e.id),$(),B()}),t.append(n,r,i,a),Z.appendChild(t)}}}He?.addEventListener(`click`,()=>{let e=K?.value.trim(),t=q?.value.trim();!e||!t||(b.push({id:crypto.randomUUID(),name:e,value:t,mode:Ve?.value??`text`}),K&&(K.value=``),q&&(q.value=``),Q(),B())}),We?.addEventListener(`click`,()=>{let e=Y?.value.trim(),t=X?.value.trim();!e||!t||(x.push({id:crypto.randomUUID(),name:e,pattern:t,match:Ue?.value??`exact`}),Y&&(Y.value=``),X&&(X.value=``),$(),B())}),u(C,`WebUSB demo ready — CP2102/ESP32 (0x10c4/0xea60), CH340/Arduino (0x1a86/0x7523). Configure and click Connect.`,{kind:`system`}),r(C),i();

package/dist/demos/assets/websocket-DREvCVt-.js

@@ -0,0 +1 @@
+import{_ as e,a as t,b as n,d as r,f as i,g as a,h as o,i as s,m as c,n as l,o as ee,p as u,r as d,t as f,u as p,v as te,x as m,y as ne}from"./demo-shared-DnvFynUr.js";function re(e){return new Promise((t,n)=>{e.addEventListener(`open`,()=>t(),{once:!0}),e.addEventListener(`error`,e=>n(e),{once:!0})})}function h(e,t){return new Promise(n=>{let r=i=>{let a=JSON.parse(i.data);a.type===t&&(e.removeEventListener(`message`,r),n(a.payload))};e.addEventListener(`message`,r)})}function g(e,t){let n=null,r=null;return{get readable(){return n},get writable(){return r},getInfo(){return{usbVendorId:t.vendorId,usbProductId:t.productId}},async open(i){e.send(JSON.stringify({type:`open`,path:t.path,baudRate:i.baudRate,dataBits:i.dataBits,stopBits:i.stopBits,parity:i.parity,parser:{type:`delimiter`,value:`\\n`}})),await h(e,`opened`);let a=[],o=null,s=!1;function c(e){let t=JSON.parse(e.data);if(t.type===`data`&&t.bytes){let e=new Uint8Array(t.bytes);o?o.enqueue(e):a.push(e)}t.type===`closed`&&(s=!0,o&&o.close())}e.addEventListener(`message`,c),n=new ReadableStream({start(e){o=e;for(let t of a)e.enqueue(t);a.length=0,s&&e.close()},cancel(){e.removeEventListener(`message`,c),o=null}}),r=new WritableStream({write(t){e.send(JSON.stringify({type:`write`,bytes:Array.from(t)}))}})},async close(){e.send(JSON.stringify({type:`close`})),n=null,r=null,e.close()}}}function ie(e){return{async requestPort(t){let n=new WebSocket(e);await re(n),n.send(JSON.stringify({type:`list-ports`,filters:t?.filters??[]}));let r=(await h(n,`port-list`))[0];if(!r)throw Error(`No ports available on the bridge server. Make sure the Node.js server is running and a device is connected.`);return g(n,r)},async getPorts(){let t=new WebSocket(e);return await re(t),t.send(JSON.stringify({type:`list-ports`,filters:[]})),(await h(t,`port-list`)).map(e=>g(t,e))}}}var _=[],v=[],ae=class extends m{_hsCmd;_hsCmdMode;_hsExpect;_hsExpectMode;constructor(e,t,n,r,i){super(e),this._hsCmd=t,this._hsCmdMode=n,this._hsExpect=r,this._hsExpectMode=i}async handshake(){if(!this._hsCmd||(this._hsCmdMode===`hex`?await this.send(I(this._hsCmd)):await this.send(d(this._hsCmd)),!this._hsExpect))return!0;let e=this._hsExpect.trim();return new Promise(t=>{let n=r=>{if(this.off(`serial:data`,n),this._hsExpectMode===`hex`){let e=new TextEncoder().encode(String(r)),n=I(this._hsExpect);t(e.length===n.length&&e.every((e,t)=>e===n[t]))}else t(String(r).trim()===e)};this.on(`serial:data`,n)})}},y=e=>document.getElementById(e),b=y(`messages`),x=y(`btn-connect`),S=y(`btn-disconnect`),C=y(`btn-send`),w=y(`input-send`),T=y(`mode-toggle`),oe=y(`status-dot`),E=y(`status-text`),se=y(`console-dot`),D=y(`console-text`),O=y(`sidebar`),k=y(`code-panel`),ce=y(`code-view`),le=y(`code-tab`),ue=y(`menu-btn`),de=y(`code-toggle-btn`),A=y(`theme-btn`),fe=y(`clear-btn`),j=y(`copy-btn`),pe=y(`dl-btn`),me=y(`cfg-export-btn`),M=y(`cfg-import-input`);function N(){let e=e=>(y(e)?.value??``).trim(),t=(t,n)=>parseInt(e(t))||n,n=e=>y(e)?.value??``;return{wsUrl:e(`cfg-wsurl`)||`ws://localhost:8080`,baudRate:t(`cfg-baud`,9600),dataBits:t(`cfg-databits`,8),stopBits:t(`cfg-stopbits`,1),parity:n(`cfg-parity`)||`none`,flowControl:n(`cfg-flow`)||`none`,bufferSize:t(`cfg-bufsize`,255),commandTimeout:t(`cfg-timeout`,3e3),autoReconnect:(e=>y(e)?.checked??!1)(`cfg-autoreconnect`),autoReconnectInterval:t(`cfg-reconnect-ms`,1500),handshakeTimeout:t(`cfg-handshake`,2e3),delimiter:e(`cfg-delim`)||`\\n`,prepend:e(`cfg-prepend`),append:e(`cfg-append`),hsCmd:e(`cfg-hs-cmd`),hsCmdMode:n(`cfg-hs-cmd-mode`)||`text`,hsExpect:e(`cfg-hs-expect`),hsExpectMode:n(`cfg-hs-expect-mode`)||`text`}}function he(e){let t=(e,t)=>{let n=document.getElementById(e);n&&(n instanceof HTMLInputElement&&n.type===`checkbox`?n.checked=!!t:(n instanceof HTMLInputElement||n instanceof HTMLSelectElement)&&(n.value=String(t??``)))};t(`cfg-wsurl`,e.wsUrl??`ws://localhost:8080`),t(`cfg-baud`,e.baudRate??9600),t(`cfg-databits`,e.dataBits??8),t(`cfg-stopbits`,e.stopBits??1),t(`cfg-parity`,e.parity??`none`),t(`cfg-flow`,e.flowControl??`none`),t(`cfg-bufsize`,e.bufferSize??255),t(`cfg-timeout`,e.commandTimeout??3e3),t(`cfg-handshake`,e.handshakeTimeout??2e3),t(`cfg-reconnect-ms`,e.autoReconnectInterval??1500),t(`cfg-autoreconnect`,e.autoReconnect??!1),t(`cfg-delim`,e.delimiter??`\\n`),t(`cfg-prepend`,e.prepend??``),t(`cfg-append`,e.append??``),t(`cfg-hs-cmd`,e.hsCmd??``),t(`cfg-hs-cmd-mode`,e.hsCmdMode??`text`),t(`cfg-hs-expect`,e.hsExpect??``),t(`cfg-hs-expect-mode`,e.hsExpectMode??`text`)}function P(e){let t=e.replace(/[^a-zA-Z0-9_$]/g,``).replace(/^[^a-zA-Z_$]/,`C`);return t.charAt(0).toUpperCase()+t.slice(1)||`MyDevice`}function F(e){return Array.from(e).map(e=>e.toString(16).toUpperCase().padStart(2,`0`)).join(` `)}function I(e){let t=e.replace(/\s+/g,``);if(t.length%2!=0)throw Error(`Odd number of hex characters.`);let n=new Uint8Array(t.length/2);for(let e=0;e<t.length;e+=2)n[e/2]=parseInt(t.substring(e,e+2),16);return n}function L(e,t){[oe,se].forEach(t=>{t&&(t.className=`status-dot`,e!==`disconnected`&&t.classList.add(e))}),E&&(E.textContent=t),D&&(D.textContent=t)}var R=null;function z(){R&&clearTimeout(R),R=setTimeout(()=>{let e=N(),t=P((y(`dl-name`)?.value??`MyWsDevice`).trim()),n=(document.querySelector(`input[name='dl-lang']:checked`)?.value??`ts`)===`ts`,r=n?`ts`:`js`;te(ce,p(e,t,n,_,v)),le&&(le.textContent=`${t.substring(0,10).toLowerCase()}.${r}`)},180)}var ge=u();A&&(A.textContent=ge===`dark`?`☀️`:`🌙`),ue?.addEventListener(`click`,()=>O.classList.toggle(`collapsed`)),de?.addEventListener(`click`,()=>k.classList.toggle(`collapsed`));var B=y(`resize-handle`);if(B){let e=0,t=0,n=n=>{let r=Math.max(180,Math.min(700,t+(e-n.clientX)));document.documentElement.style.setProperty(`--code-w`,`${r}px`)},r=()=>{B.classList.remove(`dragging`),document.removeEventListener(`pointermove`,n)};B.addEventListener(`pointerdown`,i=>{e=i.clientX,t=k.getBoundingClientRect().width,B.classList.add(`dragging`),document.addEventListener(`pointermove`,n),document.addEventListener(`pointerup`,r,{once:!0}),i.preventDefault()})}var V=y(`sidebar-resize-handle`);if(V){let e=0,t=0,n=n=>{let r=Math.max(200,Math.min(600,t+(n.clientX-e)));document.documentElement.style.setProperty(`--sidebar-w`,`${r}px`)},r=()=>{V.classList.remove(`dragging`),document.removeEventListener(`pointermove`,n)};V.addEventListener(`pointerdown`,i=>{e=i.clientX,t=O.getBoundingClientRect().width,V.classList.add(`dragging`),document.addEventListener(`pointermove`,n),document.addEventListener(`pointerup`,r,{once:!0}),i.preventDefault()})}window.innerWidth<=960&&k.classList.add(`collapsed`),window.innerWidth<=640&&O.classList.add(`collapsed`),A?.addEventListener(`click`,()=>{let e=ne();A&&(A.textContent=e===`dark`?`☀️`:`🌙`)}),fe?.addEventListener(`click`,()=>l(b)),j?.addEventListener(`click`,async()=>{let e=ce?.textContent??``;try{await navigator.clipboard.writeText(e),j&&(j.textContent=`Copied!`,j.classList.add(`copied`),setTimeout(()=>{j.textContent=`Copy`,j.classList.remove(`copied`)},1500))}catch{}}),pe?.addEventListener(`click`,()=>{let n=N(),r=(y(`dl-name`)?.value??`my-ws-device`).trim(),i=P(r),s=(document.querySelector(`input[name='dl-lang']:checked`)?.value??`ts`)===`ts`,l=document.querySelector(`input[name='dl-type']:checked`)?.value??`file`,u=s?`ts`:`js`,d=p(n,i,s,_,v);l===`project`?ee([{name:`device.${u}`,content:d},{name:`package.json`,content:o(r,s,`ws`)},{name:`index.html`,content:c(i,u,`WebSocket`)},{name:`README.md`,content:a(i,u,`WebSocket`,"Requires a WebSocket-to-serial bridge. Start the bridge: `cd demos/websocket && node server.js`")},...s?[{name:`tsconfig.json`,content:e()}]:[]],`${r}-project`):t(`${r}.${u}`,d)}),me?.addEventListener(`click`,()=>{let e=(y(`dl-name`)?.value??`my-ws-device`).trim(),t=P(e);s({$version:1,provider:`ws`,className:e,language:document.querySelector(`input[name='dl-lang']:checked`)?.value??`ts`,dlType:document.querySelector(`input[name='dl-type']:checked`)?.value??`file`,cfg:N(),commands:_,listeners:v},t+`-config`)}),M?.addEventListener(`change`,()=>{let e=M.files?.[0];if(!e)return;let t=new FileReader;t.onload=e=>{try{let t=JSON.parse(e.target?.result);if(t.$version!==1||t.provider!==`ws`)return;let n=y(`dl-name`);n&&(n.value=t.className),document.querySelectorAll(`input[name='dl-lang']`).forEach(e=>{e.checked=e.value===t.language}),document.querySelectorAll(`input[name='dl-type']`).forEach(e=>{e.checked=e.value===t.dlType}),he(t.cfg),_=t.commands.map(e=>({...e,id:crypto.randomUUID()})),v=t.listeners.map(e=>({...e,id:crypto.randomUUID()})),Q(),$(),z()}catch{}M.value=``},t.readAsText(e)}),[`cfg-wsurl`,`cfg-baud`,`cfg-databits`,`cfg-stopbits`,`cfg-parity`,`cfg-flow`,`cfg-bufsize`,`cfg-timeout`,`cfg-handshake`,`cfg-reconnect-ms`,`cfg-autoreconnect`,`cfg-delim`,`cfg-prepend`,`cfg-append`,`cfg-hs-cmd`,`cfg-hs-cmd-mode`,`cfg-hs-expect`,`cfg-hs-expect-mode`,`dl-name`].forEach(e=>{let t=document.getElementById(e);t?.addEventListener(`change`,z),t?.addEventListener(`input`,z)}),document.querySelectorAll(`input[name='dl-lang']`).forEach(e=>e.addEventListener(`change`,z)),z();var H=`text`;T?.addEventListener(`click`,()=>{H=H===`text`?`hex`:`text`,T.textContent=H===`text`?`TXT`:`HEX`,w.placeholder=H===`text`?`Type a command, e.g. LED_ON`:`Hex bytes, e.g. FF 01 A3`});var U=null;function W(e){C.disabled=!e,w.disabled=!e,S.disabled=!e,x.disabled=e}x?.addEventListener(`click`,async()=>{if(U){try{await U.disconnect()}catch{}U=null}let e=N();m.setProvider(ie(e.wsUrl));let t=d(e.delimiter);U=new ae({baudRate:e.baudRate,dataBits:e.dataBits,stopBits:e.stopBits,parity:e.parity,flowControl:e.flowControl,bufferSize:e.bufferSize,commandTimeout:e.commandTimeout,parser:n(t),autoReconnect:e.autoReconnect,autoReconnectInterval:e.autoReconnectInterval,handshakeTimeout:e.handshakeTimeout},e.hsCmd,e.hsCmdMode,e.hsExpect,e.hsExpectMode),U.on(`serial:connecting`,()=>{L(`connecting`,`Connecting…`),x.disabled=!0,f(b,`Connecting to ${e.wsUrl}…`,{kind:`system`})}),U.on(`serial:connected`,()=>{L(`connected`,`Connected`),W(!0),f(b,`Connected via WebSocket (${e.wsUrl})!`,{kind:`system`})}),U.on(`serial:disconnected`,()=>{L(`disconnected`,`Disconnected`),W(!1),f(b,`Disconnected.`,{kind:`system`}),U=null}),U.on(`serial:data`,e=>{f(b,String(e),{kind:`received`,label:`Device`})}),U.on(`serial:error`,e=>{L(`error`,`Error`),f(b,`Error: ${e.message}`,{kind:`error`}),x.disabled=!1}),U.on(`serial:need-permission`,()=>{L(`error`,`Connection refused`),f(b,`Could not connect — is the WebSocket bridge running?`,{kind:`error`}),x.disabled=!1}),U.on(`serial:timeout`,e=>{f(b,`Timeout: ${F(e)}`,{kind:`error`})}),U.on(`serial:reconnecting`,()=>{L(`connecting`,`Reconnecting…`),f(b,`Auto-reconnecting via WebSocket…`,{kind:`system`})});try{await U.connect()}catch{}}),S?.addEventListener(`click`,async()=>{await U?.disconnect()});async function G(){let e=w.value.trim();if(!e||!U)return;let t=N(),n=t.append?d(t.append):d(t.delimiter);try{if(H===`hex`){let t=I(e);f(b,`HEX: ${F(t)}`,{kind:`sent`,label:`You`}),await U.send(t)}else{let r=t.prepend+e+n;f(b,e,{kind:`sent`,label:`You`}),await U.send(r)}w.value=``,w.focus()}catch(e){f(b,`Send error: ${e instanceof Error?e.message:String(e)}`,{kind:`error`})}}C?.addEventListener(`click`,G),w?.addEventListener(`keydown`,e=>{e.key===`Enter`&&G()});var K=y(`cmd-name`),q=y(`cmd-value`),_e=y(`cmd-mode`),ve=y(`cmd-add`),J=y(`cmd-list`),Y=y(`lst-name`),X=y(`lst-pattern`),ye=y(`lst-match`),be=y(`lst-add`),Z=y(`lst-list`);function Q(){if(J){J.innerHTML=``;for(let e of _){let t=document.createElement(`div`);t.className=`chip`;let n=document.createElement(`span`);n.className=`chip-badge`,n.textContent=e.mode.toUpperCase();let r=document.createElement(`span`);r.className=`chip-name`,r.textContent=e.name;let i=document.createElement(`span`);i.className=`chip-val`,i.textContent=e.value;let a=document.createElement(`button`);a.className=`chip-send`,a.title=`Send now`,a.textContent=`▶`,a.addEventListener(`click`,()=>{if(U)if(e.mode===`hex`){let t=I(e.value);U.send(t).catch(()=>{}),f(b,`HEX: ${F(t)}`,{kind:`sent`,label:`You`})}else{let t=N(),n=t.append?d(t.append):d(t.delimiter);U.send(t.prepend+e.value+n).catch(()=>{}),f(b,e.name,{kind:`sent`,label:`You`})}});let o=document.createElement(`button`);o.className=`chip-del`,o.title=`Remove`,o.textContent=`×`,o.addEventListener(`click`,()=>{_=_.filter(t=>t.id!==e.id),Q(),z()}),t.append(n,r,i,a,o),J.appendChild(t)}}}function $(){if(Z){Z.innerHTML=``;for(let e of v){let t=document.createElement(`div`);t.className=`chip`;let n=document.createElement(`span`);n.className=`chip-badge`,n.textContent=e.match;let r=document.createElement(`span`);r.className=`chip-name`,r.textContent=e.name;let i=document.createElement(`span`);i.className=`chip-val`,i.textContent=e.pattern;let a=document.createElement(`button`);a.className=`chip-del`,a.title=`Remove`,a.textContent=`×`,a.addEventListener(`click`,()=>{v=v.filter(t=>t.id!==e.id),$(),z()}),t.append(n,r,i,a),Z.appendChild(t)}}}ve?.addEventListener(`click`,()=>{let e=K?.value.trim(),t=q?.value.trim();if(!e||!t)return;let n=_e?.value??`text`;_.push({id:crypto.randomUUID(),name:e,value:t,mode:n}),K&&(K.value=``),q&&(q.value=``),Q(),z()}),be?.addEventListener(`click`,()=>{let e=Y?.value.trim(),t=X?.value.trim();if(!e||!t)return;let n=ye?.value??`exact`;v.push({id:crypto.randomUUID(),name:e,pattern:t,match:n}),Y&&(Y.value=``),X&&(X.value=``),$(),z()}),f(b,`WebSocket bridge demo — start the Node.js bridge first: cd demos/websocket && node server.js`,{kind:`system`}),r(b),i();

package/dist/demos/web-bluetooth.html

@@ -0,0 +1,408 @@
+<!doctype html>
+<html lang="en" data-theme="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <title>Web Bluetooth — webserial-core demo</title>
+    <style>
+      :root {
+        --accent: #a855f7;
+        --accent-dark: #9333ea;
+        --accent-glow: rgba(168, 85, 247, 0.12);
+        --accent-badge: #faf5ff;
+      }
+    </style>
+    <script
+      type="module"
+      crossorigin
+      src="/demos/assets/web-bluetooth-VVwTClLx.js"
+    ></script>
+    <link
+      rel="modulepreload"
+      crossorigin
+      href="/demos/assets/demo-shared-DnvFynUr.js"
+    />
+    <link
+      rel="stylesheet"
+      crossorigin
+      href="/demos/assets/demo-shared-DLFsukQx.css"
+    />
+  </head>
+  <body>
+    <!-- ── Topbar ──────────────────────────────────────────── -->
+    <header class="topbar">
+      <button class="icon-btn" id="menu-btn" title="Toggle sidebar">
+        <i data-lucide="menu"></i>
+      </button>
+      <a class="topbar-brand" href="/demos/web-serial.html">
+        <span class="brand-icon"><i data-lucide="bluetooth"></i></span>
+        <span class="brand-name">webserial-core</span>
+        <span class="brand-ver">v2</span>
+      </a>
+      <span class="provider-pill">Bluetooth</span>
+      <span class="flex-1"></span>
+
+      <nav class="topbar-nav">
+        <a class="nav-item" href="/demos/web-serial.html"
+          ><i data-lucide="zap"></i><span class="nav-lbl"> Web Serial</span></a
+        >
+        <a class="nav-item active" href="/demos/web-bluetooth.html"
+          ><i data-lucide="bluetooth"></i
+          ><span class="nav-lbl"> Bluetooth</span></a
+        >
+        <a class="nav-item" href="/demos/web-usb.html"
+          ><i data-lucide="usb"></i><span class="nav-lbl"> WebUSB</span></a
+        >
+        <a class="nav-item" href="/demos/websocket.html"
+          ><i data-lucide="globe"></i><span class="nav-lbl"> WebSocket</span></a
+        >
+      </nav>
+
+      <div class="topbar-actions">
+        <div class="status-pill">
+          <div class="status-dot" id="status-dot"></div>
+          <span id="status-text">Disconnected</span>
+        </div>
+        <button class="icon-btn" id="theme-btn" title="Toggle theme">🌙</button>
+        <button
+          class="icon-btn code-toggle"
+          id="code-toggle-btn"
+          title="Toggle code panel"
+        >
+          <i data-lucide="code-2"></i>
+        </button>
+        <button class="btn btn-connect" id="btn-connect">Pair Device</button>
+        <button class="btn btn-disconnect" id="btn-disconnect" disabled>
+          Disconnect
+        </button>
+      </div>
+    </header>
+
+    <!-- ── App layout ───────────────────────────────────────── -->
+    <div class="app-layout">
+      <!-- ── Sidebar ─────────────────────────────────────────── -->
+      <aside class="sidebar" id="sidebar">
+        <div class="sidebar-scroll">
+          <!-- BLE info notice -->
+          <div class="sb-section">
+            <div class="notice">
+              Uses <strong>Nordic UART Service (NUS)</strong> over GATT.
+              Compatible: nRF52, ESP32 BLE UART, or any NUS device
+              (<code>6e400001-…</code>).<br />
+              Requires <strong>HTTPS</strong> or <code>localhost</code> +
+              Chromium with Web Bluetooth enabled.
+            </div>
+          </div>
+
+          <!-- Connection settings (limited for BLE) -->
+          <div class="sb-section">
+            <div class="sb-title">Connection</div>
+
+            <div class="field-row">
+              <div class="field">
+                <label for="cfg-bufsize">Buffer Size</label>
+                <input
+                  type="number"
+                  id="cfg-bufsize"
+                  value="255"
+                  min="64"
+                  max="65536"
+                />
+              </div>
+              <div class="field">
+                <label for="cfg-timeout">Cmd Timeout (ms)</label>
+                <input type="number" id="cfg-timeout" value="3000" min="0" />
+              </div>
+            </div>
+            <div class="field">
+              <label for="cfg-handshake">Handshake Timeout (ms)</label>
+              <input type="number" id="cfg-handshake" value="2000" min="0" />
+            </div>
+
+            <div class="notice" style="margin-top: 6px">
+              <strong>Baud rate</strong> is not used over BLE — link speed is
+              negotiated at the GATT level.
+            </div>
+          </div>
+
+          <!-- Message format -->
+          <div class="sb-section">
+            <div class="sb-title">Message Format</div>
+            <div class="field">
+              <label for="cfg-delim">Delimiter</label>
+              <input
+                type="text"
+                id="cfg-delim"
+                value="\n"
+                placeholder="\n \r\n | etc."
+              />
+            </div>
+            <div class="field-row">
+              <div class="field">
+                <label for="cfg-prepend">Prepend</label>
+                <input
+                  type="text"
+                  id="cfg-prepend"
+                  value=""
+                  placeholder="e.g. STX"
+                />
+              </div>
+              <div class="field">
+                <label for="cfg-append">Append</label>
+                <input
+                  type="text"
+                  id="cfg-append"
+                  value="\n"
+                  placeholder="e.g. \n"
+                />
+              </div>
+            </div>
+          </div>
+
+          <!-- Handshake -->
+          <div class="sb-section">
+            <div class="sb-title">Handshake on Connect</div>
+            <div class="notice" style="margin-bottom: 6px">
+              Sent automatically right after the GATT link opens. Leave
+              <em>Command</em> empty to skip entirely.
+            </div>
+            <div class="field-row">
+              <div class="field">
+                <label for="cfg-hs-cmd">Command to send</label>
+                <input
+                  type="text"
+                  id="cfg-hs-cmd"
+                  value=""
+                  placeholder="e.g. PING\n  or  FF 01 A3"
+                />
+              </div>
+              <div class="field" style="flex: 0 0 62px">
+                <label for="cfg-hs-cmd-mode">Mode</label>
+                <select id="cfg-hs-cmd-mode">
+                  <option value="text" selected>TXT</option>
+                  <option value="hex">HEX</option>
+                </select>
+              </div>
+            </div>
+            <div class="field-row">
+              <div class="field">
+                <label for="cfg-hs-expect"
+                  >Expected <small>(empty = no check)</small></label
+                >
+                <input
+                  type="text"
+                  id="cfg-hs-expect"
+                  value=""
+                  placeholder="e.g. PONG  or  OK"
+                />
+              </div>
+              <div class="field" style="flex: 0 0 62px">
+                <label for="cfg-hs-expect-mode">Mode</label>
+                <select id="cfg-hs-expect-mode">
+                  <option value="text" selected>TXT</option>
+                  <option value="hex">HEX</option>
+                </select>
+              </div>
+            </div>
+          </div>
+
+          <!-- Saved Commands -->
+          <div class="sb-section">
+            <div class="sb-title">Saved Commands</div>
+            <div class="notice" style="margin-bottom: 6px">
+              Pre-defined commands to send. Use <em>HEX</em> for raw bytes.
+            </div>
+            <div class="field-row">
+              <div class="field" style="flex: 0 0 72px">
+                <label for="cmd-name">Name</label>
+                <input type="text" id="cmd-name" placeholder="LED ON" />
+              </div>
+              <div class="field">
+                <label for="cmd-value">Command</label>
+                <input type="text" id="cmd-value" placeholder="LED_ON\n" />
+              </div>
+              <div class="field" style="flex: 0 0 62px">
+                <label for="cmd-mode">Mode</label>
+                <select id="cmd-mode">
+                  <option value="text" selected>TXT</option>
+                  <option value="hex">HEX</option>
+                </select>
+              </div>
+            </div>
+            <button
+              class="btn btn-ghost"
+              id="cmd-add"
+              style="width: 100%; margin-top: 3px"
+            >
+              <i data-lucide="plus"></i> Add Command
+            </button>
+            <div class="chip-list" id="cmd-list"></div>
+          </div>
+
+          <!-- Data Listeners -->
+          <div class="sb-section">
+            <div class="sb-title">Data Listeners</div>
+            <div class="notice" style="margin-bottom: 6px">
+              Patterns for <code>on('serial:data')</code> — skeleton code in
+              download.
+            </div>
+            <div class="field-row">
+              <div class="field" style="flex: 0 0 64px">
+                <label for="lst-name">Name</label>
+                <input type="text" id="lst-name" placeholder="Temp" />
+              </div>
+              <div class="field">
+                <label for="lst-pattern">Pattern</label>
+                <input type="text" id="lst-pattern" placeholder="TEMP:" />
+              </div>
+              <div class="field" style="flex: 0 0 62px">
+                <label for="lst-match">Match</label>
+                <select id="lst-match">
+                  <option value="exact">exact</option>
+                  <option value="contains" selected>has</option>
+                  <option value="startsWith">starts</option>
+                  <option value="hex">hex</option>
+                </select>
+              </div>
+            </div>
+            <button
+              class="btn btn-ghost"
+              id="lst-add"
+              style="width: 100%; margin-top: 3px"
+            >
+              <i data-lucide="plus"></i> Add Listener
+            </button>
+            <div class="chip-list" id="lst-list"></div>
+          </div>
+
+          <!-- Download -->
+          <div class="sb-section">
+            <div class="sb-title">Download Code</div>
+            <div class="field">
+              <label for="dl-name">Class / File name</label>
+              <input
+                type="text"
+                id="dl-name"
+                value="MyBleDevice"
+                placeholder="MyBleDevice"
+              />
+            </div>
+            <div class="dl-lang-row">
+              <label class="dl-opt"
+                ><input type="radio" name="dl-lang" value="ts" checked />
+                TypeScript</label
+              >
+              <label class="dl-opt"
+                ><input type="radio" name="dl-lang" value="js" />
+                JavaScript</label
+              >
+            </div>
+            <div class="dl-type-row">
+              <label class="dl-opt"
+                ><input type="radio" name="dl-type" value="file" checked />
+                Standalone file</label
+              >
+              <label class="dl-opt"
+                ><input type="radio" name="dl-type" value="project" /> Full
+                project (ZIP)</label
+              >
+            </div>
+            <div class="dl-btns">
+              <button class="btn btn-dl" id="dl-btn">
+                <i data-lucide="download"></i> Download
+              </button>
+              <button
+                class="btn btn-ghost"
+                id="cfg-export-btn"
+                title="Export configuration as JSON"
+              >
+                <i data-lucide="share"></i> Export config
+              </button>
+              <label
+                class="btn btn-ghost"
+                title="Import configuration from JSON"
+              >
+                <i data-lucide="upload"></i> Import config
+                <input
+                  type="file"
+                  id="cfg-import-input"
+                  accept=".json"
+                  style="display: none"
+                />
+              </label>
+            </div>
+          </div>
+        </div>
+        <!-- /sidebar-scroll -->
+      </aside>
+      <div class="sidebar-resize-handle" id="sidebar-resize-handle"></div>
+
+      <!-- ── Chat console ─────────────────────────────────── -->
+      <main class="console-area">
+        <div class="console-hdr">
+          <div class="status-pill">
+            <div class="status-dot" id="console-dot"></div>
+            <span id="console-text">Pair a Bluetooth device to begin</span>
+          </div>
+          <button
+            class="btn btn-ghost"
+            id="clear-btn"
+            style="margin-left: auto; font-size: 0.7rem; padding: 4px 10px"
+          >
+            Clear
+          </button>
+        </div>
+
+        <div class="messages" id="messages">
+          <div class="empty-state">
+            <div class="empty-icon">📡</div>
+            <span>Pair a BLE device to begin</span>
+          </div>
+        </div>
+
+        <div class="input-bar">
+          <button class="btn btn-mode" id="mode-toggle">TXT</button>
+          <input
+            class="msg-input"
+            id="input-send"
+            type="text"
+            placeholder="Type a command, e.g. LED_ON"
+            disabled
+          />
+          <button class="btn btn-send" id="btn-send" disabled>Send</button>
+        </div>
+      </main>
+
+      <!-- ── Code panel ────────────────────────────────────── -->
+      <div class="resize-handle" id="resize-handle"></div>
+      <aside class="code-panel" id="code-panel">
+        <div class="cp-hdr">
+          <div class="cp-title">
+            <span>Code Preview</span>
+            <span class="cp-tab" id="code-tab">device.ts</span>
+          </div>
+          <div class="cp-actions">
+            <button class="cp-btn" id="copy-btn">Copy</button>
+          </div>
+        </div>
+        <pre class="code-view" id="code-view"></pre>
+      </aside>
+    </div>
+    <!-- /app-layout -->
+
+    <footer class="app-footer">
+      © 2025
+      <a
+        href="https://github.com/danidoble"
+        style="color: inherit; text-decoration: none"
+        >@danidoble</a
+      >
+      · webserial-core v2
+    </footer>
+    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+    <script>
+      lucide.createIcons();
+    </script>
+  </body>
+</html>