@mhmo91/schmancy 0.10.5 → 0.10.7

package/dist/qr-scanner.cjs

@@ -1,35 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./chunk-CncqDLb2.cjs`),t=require(`./mixins-CAb0b03r.cjs`),n=require(`./decorate-DpFmy0nm.cjs`);let r=require(`rxjs`),i=require(`rxjs/operators`),a=require(`lit/decorators.js`),o=require(`lit`),s=require(`lit/directives/when.js`),c=require(`jsqr`);c=e.r(c,1);var l=class extends t.s{constructor(...e){super(...e),this.continuous=!0,this.hasPermission=!1,this.error=``,this.showSuccess=!1,this.stream=null,this.destroy$=new r.Subject,this.videoElement=null}static{this.styles=[o.css`
-	:host {
-		display: block;
-		width: 100%;
-		height: 100%;
-		min-height: 300px;
-	}
-`]}connectedCallback(){super.connectedCallback(),this.startCamera()}async startCamera(){try{let e={video:{facingMode:`environment`,width:{ideal:1280},height:{ideal:720}}};this.stream=await navigator.mediaDevices.getUserMedia(e),this.hasPermission=!0,this.error=``,await this.updateComplete,this.videoElement=this.shadowRoot?.querySelector(`#video`),this.videoElement&&(this.videoElement.srcObject=this.stream,await this.videoElement.play(),this.startScanning())}catch{this.hasPermission=!1,this.error=`Camera access is required to scan QR codes. Please allow camera access and try again.`}}stopCamera(){this.destroy$.next(),this.stream&&=(this.stream.getTracks().forEach(e=>e.stop()),null),this.videoElement&&=(this.videoElement.srcObject=null,null),this.hasPermission=!1,this.error=``,this.showSuccess=!1}startScanning(){this.videoElement&&this.hasPermission&&(0,r.animationFrames)().pipe((0,i.map)(()=>this.scanFrame()),(0,i.filter)(e=>e!==null),(0,i.distinctUntilChanged)((e,t)=>e.data===t.data&&t.timestamp-e.timestamp<2e3),(0,i.throttleTime)(500),(0,i.takeUntil)(this.destroy$)).subscribe({next:e=>this.handleScanResult(e),error:e=>{}})}scanFrame(){if(!this.videoElement||this.videoElement.readyState!==HTMLMediaElement.HAVE_ENOUGH_DATA)return null;try{let e=document.createElement(`canvas`);e.width=this.videoElement.videoWidth,e.height=this.videoElement.videoHeight;let t=e.getContext(`2d`);if(!t)return null;t.drawImage(this.videoElement,0,0);let n=t.getImageData(0,0,e.width,e.height),r=(0,c.default)(n.data,n.width,n.height);if(r&&r.data)return{data:r.data,timestamp:Date.now()}}catch{}return null}handleScanResult(e){this.showSuccessFlash(),navigator.vibrate&&navigator.vibrate([100,50,100]),this.playSuccessSound(),this.dispatchEvent(new CustomEvent(`scan-result`,{detail:{data:e.data,timestamp:e.timestamp},bubbles:!0,composed:!0}))}showSuccessFlash(){this.showSuccess=!0,(0,r.timer)(500).pipe((0,i.takeUntil)(this.destroy$)).subscribe(()=>{this.showSuccess=!1})}playSuccessSound(){try{let e=new(window.AudioContext||window.webkitAudioContext),t=e.createOscillator(),n=e.createGain();t.connect(n),n.connect(e.destination),t.frequency.setValueAtTime(800,e.currentTime),t.frequency.setValueAtTime(1e3,e.currentTime+.1),n.gain.setValueAtTime(.3,e.currentTime),n.gain.exponentialRampToValueAtTime(.01,e.currentTime+.2),t.start(e.currentTime),t.stop(e.currentTime+.2)}catch{}}disconnectedCallback(){super.disconnectedCallback(),this.stopCamera(),this.destroy$.complete()}render(){return this.error?o.html`
-				<div class="w-full h-full flex flex-col items-center justify-center bg-black text-white text-center p-5">
-					<schmancy-icon size="64" class="mb-4">camera_alt</schmancy-icon>
-					<schmancy-typography type="headline" token="md" class="mb-4">Camera Permission Required</schmancy-typography>
-					<schmancy-typography type="body" token="md" class="mb-6 max-w-sm">${this.error}</schmancy-typography>
-					<schmancy-button variant="filled" @click=${()=>window.location.reload()}>Retry</schmancy-button>
-				</div>
-			`:o.html`
-			<div class="relative w-full h-full bg-black overflow-hidden rounded-xl">
-				<!-- Video Stream -->
-				<video id="video" class="absolute inset-0 w-full h-full object-cover" autoplay muted playsinline></video>
-
-				<!-- Success Flash -->
-				${(0,s.when)(this.showSuccess,()=>o.html`<div class="absolute inset-0 bg-green-400/30 pointer-events-none"></div>`)}
-
-				<!-- Minimal corner brackets - Apple style -->
-				<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[250px] h-[250px] pointer-events-none animate-pulse">
-					<!-- Top-left corner -->
-					<div class="absolute top-0 left-0 w-12 h-12 border-t-4 border-l-4 border-white rounded-tl-2xl"></div>
-					<!-- Top-right corner -->
-					<div class="absolute top-0 right-0 w-12 h-12 border-t-4 border-r-4 border-white rounded-tr-2xl"></div>
-					<!-- Bottom-left corner -->
-					<div class="absolute bottom-0 left-0 w-12 h-12 border-b-4 border-l-4 border-white rounded-bl-2xl"></div>
-					<!-- Bottom-right corner -->
-					<div class="absolute bottom-0 right-0 w-12 h-12 border-b-4 border-r-4 border-white rounded-br-2xl"></div>
-				</div>
-			</div>
-		`}};n.t([(0,a.property)({type:Boolean})],l.prototype,`continuous`,void 0),n.t([(0,a.state)()],l.prototype,`hasPermission`,void 0),n.t([(0,a.state)()],l.prototype,`error`,void 0),n.t([(0,a.state)()],l.prototype,`showSuccess`,void 0),l=n.t([(0,a.customElement)(`schmancy-qr-scanner`)],l),Object.defineProperty(exports,`SchmancyQRScanner`,{enumerable:!0,get:function(){return l}});

package/dist/qr-scanner.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"qr-scanner.cjs","names":[],"sources":["../src/qr-scanner/qr-scanner.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport jsQR from 'jsqr'\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\nimport { animationFrames, Subject, timer } from 'rxjs'\nimport { distinctUntilChanged, filter, map, takeUntil, throttleTime } from 'rxjs/operators'\n\ninterface QRScanResult {\n\tdata: string\n\ttimestamp: number\n}\n\n@customElement('schmancy-qr-scanner')\nexport class SchmancyQRScanner extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tmin-height: 300px;\n\t}\n`]\n\n\t@property({ type: Boolean }) continuous = true\n\n\t@state() private hasPermission = false\n\t@state() private error = ''\n\t@state() private showSuccess = false\n\n\tprivate stream: MediaStream | null = null\n\tprivate destroy$ = new Subject<void>()\n\tprivate videoElement: HTMLVideoElement | null = null\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\tthis.startCamera()\n\t}\n\n\tprivate async startCamera(): Promise<void> {\n\t\ttry {\n\t\t\tconst constraints: MediaStreamConstraints = {\n\t\t\t\tvideo: {\n\t\t\t\t\tfacingMode: 'environment',\n\t\t\t\t\twidth: { ideal: 1280 },\n\t\t\t\t\theight: { ideal: 720 },\n\t\t\t\t},\n\t\t\t}\n\n\t\t\tthis.stream = await navigator.mediaDevices.getUserMedia(constraints)\n\t\t\tthis.hasPermission = true\n\t\t\tthis.error = ''\n\n\t\t\tawait this.updateComplete\n\n\t\t\tthis.videoElement = this.shadowRoot?.querySelector('#video') as HTMLVideoElement\n\t\t\tif (this.videoElement) {\n\t\t\t\tthis.videoElement.srcObject = this.stream\n\t\t\t\tawait this.videoElement.play()\n\t\t\t\tthis.startScanning()\n\t\t\t}\n\t\t} catch (error) {\n\t\t\tconsole.error('Camera access denied:', error)\n\t\t\tthis.hasPermission = false\n\t\t\tthis.error = 'Camera access is required to scan QR codes. Please allow camera access and try again.'\n\t\t}\n\t}\n\n\tprivate stopCamera(): void {\n\t\tthis.destroy$.next()\n\n\t\tif (this.stream) {\n\t\t\tthis.stream.getTracks().forEach(track => track.stop())\n\t\t\tthis.stream = null\n\t\t}\n\n\t\tif (this.videoElement) {\n\t\t\tthis.videoElement.srcObject = null\n\t\t\tthis.videoElement = null\n\t\t}\n\n\t\tthis.hasPermission = false\n\t\tthis.error = ''\n\t\tthis.showSuccess = false\n\t}\n\n\tprivate startScanning(): void {\n\t\tif (!this.videoElement || !this.hasPermission) {\n\t\t\treturn\n\t\t}\n\n\t\tanimationFrames()\n\t\t\t.pipe(\n\t\t\t\tmap(() => this.scanFrame()),\n\t\t\t\tfilter((result): result is QRScanResult => result !== null),\n\t\t\t\tdistinctUntilChanged((prev, curr) => {\n\t\t\t\t\tif (prev.data !== curr.data) return false\n\t\t\t\t\treturn curr.timestamp - prev.timestamp < 2000\n\t\t\t\t}),\n\t\t\t\tthrottleTime(500),\n\t\t\t\ttakeUntil(this.destroy$),\n\t\t\t)\n\t\t\t.subscribe({\n\t\t\t\tnext: result => this.handleScanResult(result),\n\t\t\t\terror: error => {\n\t\t\t\t\tconsole.error('Scanning error:', error)\n\t\t\t\t},\n\t\t\t})\n\t}\n\n\tprivate scanFrame(): QRScanResult | null {\n\t\tif (!this.videoElement || this.videoElement.readyState !== HTMLMediaElement.HAVE_ENOUGH_DATA) {\n\t\t\treturn null\n\t\t}\n\n\t\ttry {\n\t\t\tconst canvas = document.createElement('canvas')\n\t\t\tcanvas.width = this.videoElement.videoWidth\n\t\t\tcanvas.height = this.videoElement.videoHeight\n\n\t\t\tconst ctx = canvas.getContext('2d')\n\t\t\tif (!ctx) return null\n\n\t\t\tctx.drawImage(this.videoElement, 0, 0)\n\t\t\tconst imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)\n\n\t\t\tconst code = jsQR(imageData.data, imageData.width, imageData.height)\n\n\t\t\tif (code && code.data) {\n\t\t\t\treturn {\n\t\t\t\t\tdata: code.data,\n\t\t\t\t\ttimestamp: Date.now(),\n\t\t\t\t}\n\t\t\t}\n\t\t} catch (error) {\n\t\t\tconsole.error('Frame scan error:', error)\n\t\t}\n\n\t\treturn null\n\t}\n\n\tprivate handleScanResult(result: QRScanResult): void {\n\t\tthis.showSuccessFlash()\n\n\t\t// Haptic feedback if available\n\t\tif (navigator.vibrate) {\n\t\t\tnavigator.vibrate([100, 50, 100])\n\t\t}\n\n\t\t// Audio feedback\n\t\tthis.playSuccessSound()\n\n\t\t// Dispatch scan result\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('scan-result', {\n\t\t\t\tdetail: { data: result.data, timestamp: result.timestamp },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\n\t}\n\n\tprivate showSuccessFlash(): void {\n\t\tthis.showSuccess = true\n\t\ttimer(500)\n\t\t\t.pipe(takeUntil(this.destroy$))\n\t\t\t.subscribe(() => {\n\t\t\t\tthis.showSuccess = false\n\t\t\t})\n\t}\n\n\tprivate playSuccessSound(): void {\n\t\ttry {\n\t\t\tconst AudioContextClass = window.AudioContext || (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext\n\t\t\tconst audioContext = new AudioContextClass()\n\t\t\tconst oscillator = audioContext.createOscillator()\n\t\t\tconst gainNode = audioContext.createGain()\n\n\t\t\toscillator.connect(gainNode)\n\t\t\tgainNode.connect(audioContext.destination)\n\n\t\t\toscillator.frequency.setValueAtTime(800, audioContext.currentTime)\n\t\t\toscillator.frequency.setValueAtTime(1000, audioContext.currentTime + 0.1)\n\n\t\t\tgainNode.gain.setValueAtTime(0.3, audioContext.currentTime)\n\t\t\tgainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.2)\n\n\t\t\toscillator.start(audioContext.currentTime)\n\t\t\toscillator.stop(audioContext.currentTime + 0.2)\n\t\t} catch {\n\t\t\t// Audio feedback failed silently\n\t\t}\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\tthis.stopCamera()\n\t\tthis.destroy$.complete()\n\t}\n\n\trender() {\n\t\tif (this.error) {\n\t\t\treturn html`\n\t\t\t\t<div class=\"w-full h-full flex flex-col items-center justify-center bg-black text-white text-center p-5\">\n\t\t\t\t\t<schmancy-icon size=\"64\" class=\"mb-4\">camera_alt</schmancy-icon>\n\t\t\t\t\t<schmancy-typography type=\"headline\" token=\"md\" class=\"mb-4\">Camera Permission Required</schmancy-typography>\n\t\t\t\t\t<schmancy-typography type=\"body\" token=\"md\" class=\"mb-6 max-w-sm\">${this.error}</schmancy-typography>\n\t\t\t\t\t<schmancy-button variant=\"filled\" @click=${() => window.location.reload()}>Retry</schmancy-button>\n\t\t\t\t</div>\n\t\t\t`\n\t\t}\n\n\t\treturn html`\n\t\t\t<div class=\"relative w-full h-full bg-black overflow-hidden rounded-xl\">\n\t\t\t\t<!-- Video Stream -->\n\t\t\t\t<video id=\"video\" class=\"absolute inset-0 w-full h-full object-cover\" autoplay muted playsinline></video>\n\n\t\t\t\t<!-- Success Flash -->\n\t\t\t\t${when(this.showSuccess, () => html`<div class=\"absolute inset-0 bg-green-400/30 pointer-events-none\"></div>`)}\n\n\t\t\t\t<!-- Minimal corner brackets - Apple style -->\n\t\t\t\t<div class=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[250px] h-[250px] pointer-events-none animate-pulse\">\n\t\t\t\t\t<!-- Top-left corner -->\n\t\t\t\t\t<div class=\"absolute top-0 left-0 w-12 h-12 border-t-4 border-l-4 border-white rounded-tl-2xl\"></div>\n\t\t\t\t\t<!-- Top-right corner -->\n\t\t\t\t\t<div class=\"absolute top-0 right-0 w-12 h-12 border-t-4 border-r-4 border-white rounded-tr-2xl\"></div>\n\t\t\t\t\t<!-- Bottom-left corner -->\n\t\t\t\t\t<div class=\"absolute bottom-0 left-0 w-12 h-12 border-b-4 border-l-4 border-white rounded-bl-2xl\"></div>\n\t\t\t\t\t<!-- Bottom-right corner -->\n\t\t\t\t\t<div class=\"absolute bottom-0 right-0 w-12 h-12 border-b-4 border-r-4 border-white rounded-br-2xl\"></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-qr-scanner': SchmancyQRScanner\n\t}\n}\n"],"mappings":"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"}

package/dist/qr-scanner.js

@@ -1,123 +0,0 @@
-import { s as e } from "./mixins-B34UxxCe.js";
-import { t } from "./decorate-23nYs4Le.js";
-import { Subject as n, animationFrames as r, timer as i } from "rxjs";
-import { distinctUntilChanged as a, filter as o, map as s, takeUntil as c, throttleTime as l } from "rxjs/operators";
-import { customElement as u, property as d, state as f } from "lit/decorators.js";
-import { css as p, html as m } from "lit";
-import { when as h } from "lit/directives/when.js";
-import g from "jsqr";
-var _ = class extends e {
-	constructor(...e) {
-		super(...e), this.continuous = !0, this.hasPermission = !1, this.error = "", this.showSuccess = !1, this.stream = null, this.destroy$ = new n(), this.videoElement = null;
-	}
-	static {
-		this.styles = [p`
-	:host {
-		display: block;
-		width: 100%;
-		height: 100%;
-		min-height: 300px;
-	}
-`];
-	}
-	connectedCallback() {
-		super.connectedCallback(), this.startCamera();
-	}
-	async startCamera() {
-		try {
-			let e = { video: {
-				facingMode: "environment",
-				width: { ideal: 1280 },
-				height: { ideal: 720 }
-			} };
-			this.stream = await navigator.mediaDevices.getUserMedia(e), this.hasPermission = !0, this.error = "", await this.updateComplete, this.videoElement = this.shadowRoot?.querySelector("#video"), this.videoElement && (this.videoElement.srcObject = this.stream, await this.videoElement.play(), this.startScanning());
-		} catch {
-			this.hasPermission = !1, this.error = "Camera access is required to scan QR codes. Please allow camera access and try again.";
-		}
-	}
-	stopCamera() {
-		this.destroy$.next(), this.stream &&= (this.stream.getTracks().forEach((e) => e.stop()), null), this.videoElement &&= (this.videoElement.srcObject = null, null), this.hasPermission = !1, this.error = "", this.showSuccess = !1;
-	}
-	startScanning() {
-		this.videoElement && this.hasPermission && r().pipe(s(() => this.scanFrame()), o((e) => e !== null), a((e, t) => e.data === t.data && t.timestamp - e.timestamp < 2e3), l(500), c(this.destroy$)).subscribe({
-			next: (e) => this.handleScanResult(e),
-			error: (e) => {}
-		});
-	}
-	scanFrame() {
-		if (!this.videoElement || this.videoElement.readyState !== HTMLMediaElement.HAVE_ENOUGH_DATA) return null;
-		try {
-			let e = document.createElement("canvas");
-			e.width = this.videoElement.videoWidth, e.height = this.videoElement.videoHeight;
-			let t = e.getContext("2d");
-			if (!t) return null;
-			t.drawImage(this.videoElement, 0, 0);
-			let n = t.getImageData(0, 0, e.width, e.height), r = g(n.data, n.width, n.height);
-			if (r && r.data) return {
-				data: r.data,
-				timestamp: Date.now()
-			};
-		} catch {}
-		return null;
-	}
-	handleScanResult(e) {
-		this.showSuccessFlash(), navigator.vibrate && navigator.vibrate([
-			100,
-			50,
-			100
-		]), this.playSuccessSound(), this.dispatchEvent(new CustomEvent("scan-result", {
-			detail: {
-				data: e.data,
-				timestamp: e.timestamp
-			},
-			bubbles: !0,
-			composed: !0
-		}));
-	}
-	showSuccessFlash() {
-		this.showSuccess = !0, i(500).pipe(c(this.destroy$)).subscribe(() => {
-			this.showSuccess = !1;
-		});
-	}
-	playSuccessSound() {
-		try {
-			let e = new (window.AudioContext || window.webkitAudioContext)(), t = e.createOscillator(), n = e.createGain();
-			t.connect(n), n.connect(e.destination), t.frequency.setValueAtTime(800, e.currentTime), t.frequency.setValueAtTime(1e3, e.currentTime + .1), n.gain.setValueAtTime(.3, e.currentTime), n.gain.exponentialRampToValueAtTime(.01, e.currentTime + .2), t.start(e.currentTime), t.stop(e.currentTime + .2);
-		} catch {}
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback(), this.stopCamera(), this.destroy$.complete();
-	}
-	render() {
-		return this.error ? m`
-				<div class="w-full h-full flex flex-col items-center justify-center bg-black text-white text-center p-5">
-					<schmancy-icon size="64" class="mb-4">camera_alt</schmancy-icon>
-					<schmancy-typography type="headline" token="md" class="mb-4">Camera Permission Required</schmancy-typography>
-					<schmancy-typography type="body" token="md" class="mb-6 max-w-sm">${this.error}</schmancy-typography>
-					<schmancy-button variant="filled" @click=${() => window.location.reload()}>Retry</schmancy-button>
-				</div>
-			` : m`
-			<div class="relative w-full h-full bg-black overflow-hidden rounded-xl">
-				<!-- Video Stream -->
-				<video id="video" class="absolute inset-0 w-full h-full object-cover" autoplay muted playsinline></video>
-
-				<!-- Success Flash -->
-				${h(this.showSuccess, () => m`<div class="absolute inset-0 bg-green-400/30 pointer-events-none"></div>`)}
-
-				<!-- Minimal corner brackets - Apple style -->
-				<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[250px] h-[250px] pointer-events-none animate-pulse">
-					<!-- Top-left corner -->
-					<div class="absolute top-0 left-0 w-12 h-12 border-t-4 border-l-4 border-white rounded-tl-2xl"></div>
-					<!-- Top-right corner -->
-					<div class="absolute top-0 right-0 w-12 h-12 border-t-4 border-r-4 border-white rounded-tr-2xl"></div>
-					<!-- Bottom-left corner -->
-					<div class="absolute bottom-0 left-0 w-12 h-12 border-b-4 border-l-4 border-white rounded-bl-2xl"></div>
-					<!-- Bottom-right corner -->
-					<div class="absolute bottom-0 right-0 w-12 h-12 border-b-4 border-r-4 border-white rounded-br-2xl"></div>
-				</div>
-			</div>
-		`;
-	}
-};
-t([d({ type: Boolean })], _.prototype, "continuous", void 0), t([f()], _.prototype, "hasPermission", void 0), t([f()], _.prototype, "error", void 0), t([f()], _.prototype, "showSuccess", void 0), _ = t([u("schmancy-qr-scanner")], _);
-export { _ as SchmancyQRScanner };

package/dist/qr-scanner.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"qr-scanner.js","names":[],"sources":["../src/qr-scanner/qr-scanner.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport jsQR from 'jsqr'\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\nimport { animationFrames, Subject, timer } from 'rxjs'\nimport { distinctUntilChanged, filter, map, takeUntil, throttleTime } from 'rxjs/operators'\n\ninterface QRScanResult {\n\tdata: string\n\ttimestamp: number\n}\n\n@customElement('schmancy-qr-scanner')\nexport class SchmancyQRScanner extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tmin-height: 300px;\n\t}\n`]\n\n\t@property({ type: Boolean }) continuous = true\n\n\t@state() private hasPermission = false\n\t@state() private error = ''\n\t@state() private showSuccess = false\n\n\tprivate stream: MediaStream | null = null\n\tprivate destroy$ = new Subject<void>()\n\tprivate videoElement: HTMLVideoElement | null = null\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\tthis.startCamera()\n\t}\n\n\tprivate async startCamera(): Promise<void> {\n\t\ttry {\n\t\t\tconst constraints: MediaStreamConstraints = {\n\t\t\t\tvideo: {\n\t\t\t\t\tfacingMode: 'environment',\n\t\t\t\t\twidth: { ideal: 1280 },\n\t\t\t\t\theight: { ideal: 720 },\n\t\t\t\t},\n\t\t\t}\n\n\t\t\tthis.stream = await navigator.mediaDevices.getUserMedia(constraints)\n\t\t\tthis.hasPermission = true\n\t\t\tthis.error = ''\n\n\t\t\tawait this.updateComplete\n\n\t\t\tthis.videoElement = this.shadowRoot?.querySelector('#video') as HTMLVideoElement\n\t\t\tif (this.videoElement) {\n\t\t\t\tthis.videoElement.srcObject = this.stream\n\t\t\t\tawait this.videoElement.play()\n\t\t\t\tthis.startScanning()\n\t\t\t}\n\t\t} catch (error) {\n\t\t\tconsole.error('Camera access denied:', error)\n\t\t\tthis.hasPermission = false\n\t\t\tthis.error = 'Camera access is required to scan QR codes. Please allow camera access and try again.'\n\t\t}\n\t}\n\n\tprivate stopCamera(): void {\n\t\tthis.destroy$.next()\n\n\t\tif (this.stream) {\n\t\t\tthis.stream.getTracks().forEach(track => track.stop())\n\t\t\tthis.stream = null\n\t\t}\n\n\t\tif (this.videoElement) {\n\t\t\tthis.videoElement.srcObject = null\n\t\t\tthis.videoElement = null\n\t\t}\n\n\t\tthis.hasPermission = false\n\t\tthis.error = ''\n\t\tthis.showSuccess = false\n\t}\n\n\tprivate startScanning(): void {\n\t\tif (!this.videoElement || !this.hasPermission) {\n\t\t\treturn\n\t\t}\n\n\t\tanimationFrames()\n\t\t\t.pipe(\n\t\t\t\tmap(() => this.scanFrame()),\n\t\t\t\tfilter((result): result is QRScanResult => result !== null),\n\t\t\t\tdistinctUntilChanged((prev, curr) => {\n\t\t\t\t\tif (prev.data !== curr.data) return false\n\t\t\t\t\treturn curr.timestamp - prev.timestamp < 2000\n\t\t\t\t}),\n\t\t\t\tthrottleTime(500),\n\t\t\t\ttakeUntil(this.destroy$),\n\t\t\t)\n\t\t\t.subscribe({\n\t\t\t\tnext: result => this.handleScanResult(result),\n\t\t\t\terror: error => {\n\t\t\t\t\tconsole.error('Scanning error:', error)\n\t\t\t\t},\n\t\t\t})\n\t}\n\n\tprivate scanFrame(): QRScanResult | null {\n\t\tif (!this.videoElement || this.videoElement.readyState !== HTMLMediaElement.HAVE_ENOUGH_DATA) {\n\t\t\treturn null\n\t\t}\n\n\t\ttry {\n\t\t\tconst canvas = document.createElement('canvas')\n\t\t\tcanvas.width = this.videoElement.videoWidth\n\t\t\tcanvas.height = this.videoElement.videoHeight\n\n\t\t\tconst ctx = canvas.getContext('2d')\n\t\t\tif (!ctx) return null\n\n\t\t\tctx.drawImage(this.videoElement, 0, 0)\n\t\t\tconst imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)\n\n\t\t\tconst code = jsQR(imageData.data, imageData.width, imageData.height)\n\n\t\t\tif (code && code.data) {\n\t\t\t\treturn {\n\t\t\t\t\tdata: code.data,\n\t\t\t\t\ttimestamp: Date.now(),\n\t\t\t\t}\n\t\t\t}\n\t\t} catch (error) {\n\t\t\tconsole.error('Frame scan error:', error)\n\t\t}\n\n\t\treturn null\n\t}\n\n\tprivate handleScanResult(result: QRScanResult): void {\n\t\tthis.showSuccessFlash()\n\n\t\t// Haptic feedback if available\n\t\tif (navigator.vibrate) {\n\t\t\tnavigator.vibrate([100, 50, 100])\n\t\t}\n\n\t\t// Audio feedback\n\t\tthis.playSuccessSound()\n\n\t\t// Dispatch scan result\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('scan-result', {\n\t\t\t\tdetail: { data: result.data, timestamp: result.timestamp },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\n\t}\n\n\tprivate showSuccessFlash(): void {\n\t\tthis.showSuccess = true\n\t\ttimer(500)\n\t\t\t.pipe(takeUntil(this.destroy$))\n\t\t\t.subscribe(() => {\n\t\t\t\tthis.showSuccess = false\n\t\t\t})\n\t}\n\n\tprivate playSuccessSound(): void {\n\t\ttry {\n\t\t\tconst AudioContextClass = window.AudioContext || (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext\n\t\t\tconst audioContext = new AudioContextClass()\n\t\t\tconst oscillator = audioContext.createOscillator()\n\t\t\tconst gainNode = audioContext.createGain()\n\n\t\t\toscillator.connect(gainNode)\n\t\t\tgainNode.connect(audioContext.destination)\n\n\t\t\toscillator.frequency.setValueAtTime(800, audioContext.currentTime)\n\t\t\toscillator.frequency.setValueAtTime(1000, audioContext.currentTime + 0.1)\n\n\t\t\tgainNode.gain.setValueAtTime(0.3, audioContext.currentTime)\n\t\t\tgainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.2)\n\n\t\t\toscillator.start(audioContext.currentTime)\n\t\t\toscillator.stop(audioContext.currentTime + 0.2)\n\t\t} catch {\n\t\t\t// Audio feedback failed silently\n\t\t}\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\tthis.stopCamera()\n\t\tthis.destroy$.complete()\n\t}\n\n\trender() {\n\t\tif (this.error) {\n\t\t\treturn html`\n\t\t\t\t<div class=\"w-full h-full flex flex-col items-center justify-center bg-black text-white text-center p-5\">\n\t\t\t\t\t<schmancy-icon size=\"64\" class=\"mb-4\">camera_alt</schmancy-icon>\n\t\t\t\t\t<schmancy-typography type=\"headline\" token=\"md\" class=\"mb-4\">Camera Permission Required</schmancy-typography>\n\t\t\t\t\t<schmancy-typography type=\"body\" token=\"md\" class=\"mb-6 max-w-sm\">${this.error}</schmancy-typography>\n\t\t\t\t\t<schmancy-button variant=\"filled\" @click=${() => window.location.reload()}>Retry</schmancy-button>\n\t\t\t\t</div>\n\t\t\t`\n\t\t}\n\n\t\treturn html`\n\t\t\t<div class=\"relative w-full h-full bg-black overflow-hidden rounded-xl\">\n\t\t\t\t<!-- Video Stream -->\n\t\t\t\t<video id=\"video\" class=\"absolute inset-0 w-full h-full object-cover\" autoplay muted playsinline></video>\n\n\t\t\t\t<!-- Success Flash -->\n\t\t\t\t${when(this.showSuccess, () => html`<div class=\"absolute inset-0 bg-green-400/30 pointer-events-none\"></div>`)}\n\n\t\t\t\t<!-- Minimal corner brackets - Apple style -->\n\t\t\t\t<div class=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[250px] h-[250px] pointer-events-none animate-pulse\">\n\t\t\t\t\t<!-- Top-left corner -->\n\t\t\t\t\t<div class=\"absolute top-0 left-0 w-12 h-12 border-t-4 border-l-4 border-white rounded-tl-2xl\"></div>\n\t\t\t\t\t<!-- Top-right corner -->\n\t\t\t\t\t<div class=\"absolute top-0 right-0 w-12 h-12 border-t-4 border-r-4 border-white rounded-tr-2xl\"></div>\n\t\t\t\t\t<!-- Bottom-left corner -->\n\t\t\t\t\t<div class=\"absolute bottom-0 left-0 w-12 h-12 border-b-4 border-l-4 border-white rounded-bl-2xl\"></div>\n\t\t\t\t\t<!-- Bottom-right corner -->\n\t\t\t\t\t<div class=\"absolute bottom-0 right-0 w-12 h-12 border-b-4 border-r-4 border-white rounded-br-2xl\"></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-qr-scanner': SchmancyQRScanner\n\t}\n}\n"],"mappings":"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"}

package/dist/skills/charts.md

@@ -1,93 +0,0 @@
-# Schmancy Charts
-
-> Canvas-rendered area chart and horizontal pill chart. Theme-aware, lazy-animated, with auto peak highlighting.
-
-## schmancy-area-chart
-
-> Smooth Catmull-Rom spline area chart with peak markers and hover tooltips.
-
-```html
-<schmancy-area-chart
-  .data=${[
-    { label: '9 AM', value: 12.4 },
-    { label: '10 AM', value: 18.9 },
-    { label: '11 AM', value: 42.1, metadata: { users: 320 } },
-    { label: '12 PM', value: 56.7 },
-  ]}
-  value-prefix="EUR "
-  value-decimals="2"
-  peak-count="2"
-  height="240"
-></schmancy-area-chart>
-```
-
-### Properties
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `data` | `ChartDataPoint[]` | `[]` | `{ label, value, metadata? }[]` |
-| `height` | number | `200` | Chart height in px |
-| `showGrid` | boolean | `true` | Background grid lines |
-| `showLabels` | boolean | `true` | X-axis labels |
-| `showTooltip` | boolean | `true` | Hover tooltip |
-| `peakCount` | number | `3` | Top-N points highlighted larger |
-| `animationDuration` | number | `800` | Entrance animation ms |
-| `animated` | boolean | `true` | Animate on first visible |
-| `valuePrefix` | string | `''` | Display prefix (e.g. `"EUR "`) |
-| `valueSuffix` | string | `''` | Display suffix (e.g. `"%"`) |
-| `valueDecimals` | number | `2` | Decimal places |
-| `theme` | `Partial<ChartTheme>` | `{}` | Override colors, stroke, radii |
-
-### ChartTheme
-| Key | Default | Description |
-|-----|---------|-------------|
-| `primaryColor` | `--schmancy-sys-color-primary` | Line + fill gradient color |
-| `gradientOpacity` | `[0.4, 0.05]` | Top/bottom fill opacity |
-| `strokeWidth` | `2` | Line thickness |
-| `pointRadius` | `4` | Normal point radius |
-| `peakRadius` | `6` | Peak point radius |
-
-## schmancy-pills
-
-> Horizontal bar chart with optional stacked segments, medal ranks, and peak/low styling.
-
-```html
-<schmancy-pills
-  .data=${[
-    { label: 'Mon', value: 1240, rank: 1 },
-    { label: 'Tue', value: 980 },
-    { label: 'Wed', value: 1830, rank: 2, segments: [
-      { label: 'Pizza', value: 1200 },
-      { label: 'Drinks', value: 630 }
-    ]},
-  ]}
-></schmancy-pills>
-```
-
-### Properties
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `data` | `PillDataPoint[]` | `[]` | Rows with optional stacked `segments` |
-| `valuePrefix` / `valueSuffix` / `valueDecimals` | — | — | Value formatting (same as area chart) |
-| `showMedals` | boolean | `true` | Show 🥇🥈🥉 for rank 1/2/3 |
-
-### PillDataPoint
-```typescript
-{
-  label: string
-  value: number
-  segments?: { label, value, color }[]  // stacked
-  isPeak?: boolean   // highlighted
-  isLow?: boolean    // muted
-  rank?: 1 | 2 | 3   // medal
-  metadata?: Record<string, unknown>
-}
-```
-
-## Behavior
-- Both charts use an IntersectionObserver to defer animation until visible.
-- Responsive — resize triggers a re-render.
-- Dark/light aware via theme CSS variables.
-
-## When to Use
-- Area chart: time-series or comparative trends.
-- Pills: ranked categorical data (leaderboards, top days, distribution).

package/dist/skills/code-highlight.md

@@ -1,47 +0,0 @@
-# schmancy-code
-
-> Syntax-highlighted code block with line numbers, copy button, and collapsible display.
-
-## Usage
-```html
-<schmancy-code language="typescript" .code=${'const x = 42'}></schmancy-code>
-```
-
-## Properties
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| code | string | `''` | Code content to highlight |
-| language | string | `'javascript'` | Language for syntax highlighting |
-| filename | string | `undefined` | Filename shown in header |
-| lineNumbers | boolean | `false` | Show line numbers |
-| copyButton | boolean | `true` | Show copy-to-clipboard button |
-| highlightLines | string | `undefined` | Lines to highlight (e.g., `'1-3,5,7-9'`) |
-| maxHeight | string | `undefined` | Max height before scrolling |
-
-## Supported Languages
-javascript, typescript, html, xml, markdown, bash
-
-## Examples
-```html
-<!-- TypeScript with line numbers and highlighted lines -->
-<schmancy-code
-  language="typescript"
-  lineNumbers
-  highlightLines="2-3"
-  .code=${`import { html } from 'lit'
-const greeting = 'Hello'
-console.log(greeting)`}>
-</schmancy-code>
-
-<!-- Bash with filename -->
-<schmancy-code language="bash" filename="install.sh"
-  .code=${'npm install @mhmo91/schmancy'}>
-</schmancy-code>
-
-<!-- With max height -->
-<schmancy-code language="javascript" maxHeight="300px"
-  .code=${longCodeString}>
-</schmancy-code>
-```
-
-Renders inside a collapsible `schmancy-details` with a macOS-style header (colored dots + language label). Uses highlight.js with schmancy color tokens.

package/dist/skills/extra.md

@@ -1,59 +0,0 @@
-# Schmancy Extra
-
-> Data-driven dropdowns for common localization fields. Country and timezone pickers, form-associated and autocomplete-backed.
-
-## schmancy-select-countries
-Fully autocomplete-searchable country dropdown. Form-associated (participates in `<form>` submission and validation via `ElementInternals`).
-
-```html
-<schmancy-select-countries
-  name="country"
-  label="Country"
-  placeholder="Select a country"
-  required
-  value="DE"
-  @change=${e => this.country = e.target.value}
-></schmancy-select-countries>
-```
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `value` | string | — | ISO country code (reflected) |
-| `name` | string | `''` | Form field name |
-| `label` | string | `'Country'` | Visible label |
-| `hint` | string | `'Please select a country'` | Helper text |
-| `placeholder` | string | `'Select a country'` | Placeholder in the input |
-| `required` | boolean | `false` | Validation constraint |
-
-## schmancy-select-timezones
-Same pattern as countries, backed by timezone data.
-
-```html
-<schmancy-select-timezones
-  name="timezone"
-  label="Timezone"
-  value="Europe/Berlin"
-></schmancy-select-timezones>
-```
-
-Accepts the same set of properties (`value`, `name`, `label`, `hint`, `placeholder`, `required`).
-
-## Raw Data Exports
-If you want the underlying data without the component:
-```typescript
-import countries from '@mhmo91/schmancy'   // default export from countries.data
-import timezones from '@mhmo91/schmancy'   // default export from timezones.data
-```
-
-Each countries row: `{ code, name, dialCode?, flag?, ... }`. Timezones: `{ name, offset, label, ... }`.
-
-## Form Integration
-Both use `formAssociated = true` and register with the parent `<form>`. Works with native `form.checkValidity()` and with [`schmancy-form`](./form.md).
-
-```html
-<schmancy-form @submit=${this.onSubmit}>
-  <schmancy-select-countries name="country" required></schmancy-select-countries>
-  <schmancy-select-timezones name="timezone" required></schmancy-select-timezones>
-  <schmancy-button type="submit" variant="filled">Save</schmancy-button>
-</schmancy-form>
-```

package/dist/skills/mailbox.md

@@ -1,102 +0,0 @@
-# Schmancy Mailbox
-
-> Full email composition + campaign management system. Orchestrates recipients, templates, editor, attachments, and preview.
-
-## Components
-
-| Tag | Purpose |
-|-----|---------|
-| `schmancy-mailbox` | Top-level orchestrator |
-| `schmancy-email-editor` | Subject + body composition |
-| `schmancy-email-viewer` | HTML/plaintext preview |
-| `schmancy-email-recipients` | Recipient list with import/CSV |
-| `schmancy-email-layout-selector` | Layout template picker |
-| `schmancy-email-template-picker` | Email template browser |
-
-## Usage
-```html
-<schmancy-mailbox
-  .config=${{
-    sendEndpoint: '/api/emails/send',
-    uploadEndpoint: '/api/uploads',
-    authenticateRequest: (req) => ({ ...req, headers: { Authorization: `Bearer ${token}` } })
-  }}
-  .templates=${myTemplates}
-  .importSources=${[
-    { id: 'ticketholders', label: 'Ticket holders', icon: 'confirmation_number', handler: loadTicketHolders },
-    { id: 'waitlist', label: 'Waitlist', icon: 'hourglass_empty', handler: loadWaitlist },
-  ]}
-></schmancy-mailbox>
-```
-
-## schmancy-mailbox Properties
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `config` | `EmailComposeConfig` | `{}` | Endpoints, auth, upload handlers |
-| `templates` | `EmailTemplate[]` | `[]` | Available email templates |
-| `importSources` | `ImportSource[]` | `[]` | Import buttons shown in recipients panel |
-| `disabled` | boolean | `false` | Disable all interactions |
-| `recipientsTitle` | string | `'Recipients'` | Recipients panel heading |
-| `recipientsEmptyTitle` | string | `'No recipients yet'` | Empty state title |
-| `recipientsEmptyMessage` | string | `'Import from sources or upload a CSV'` | Empty state body |
-| `enableCsvImport` | boolean | `true` | Allow CSV file import |
-| `enableDragDrop` | boolean | `true` | Accept dropped CSV files |
-
-## Key Types
-```typescript
-interface EmailTemplate { id, name, subject, body, category?, thumbnail? }
-
-interface EmailComposeConfig {
-  sendEndpoint?: string
-  templatesEndpoint?: string
-  uploadEndpoint?: string
-  authenticateRequest?: (req: RequestInit) => RequestInit
-  uploadHandler?: (file: File) => Promise<string>
-  imageUploadHandler?: (file: File) => Promise<string>
-}
-
-interface SendEmailRequest {
-  recipients: string[]
-  subject: string
-  body: string
-  attachments: EmailAttachment[]
-  templateId?: string | null
-}
-
-interface ImportSource {
-  id: string
-  label: string
-  icon: string       // Material icon name
-  handler: () => void // Populates recipients via events
-}
-```
-
-## Events
-| Event | Detail | Where |
-|-------|--------|-------|
-| `emails-imported` | `{ emails, source }` | Recipients |
-| `recipient-removed` | `{ email }` | Recipients |
-| `recipients-cleared` | `{}` | Recipients |
-| `selection-changed` | `{ selectedEmails }` | Recipients |
-| `compose-changed` | `{ subject, body, templateId, attachments }` | Editor |
-| `send-email` | `{ request: SendEmailRequest }` | Mailbox — consumer POSTs to backend |
-| `send-error` | `{ error }` | Mailbox |
-
-## Recipients Flow
-1. User clicks an `ImportSource` button (or drops a CSV).
-2. CSV is parsed → `validEmails`, `invalidEmails`, `duplicates` reported.
-3. `emails-imported` event fires; mailbox merges into selected recipients.
-4. User edits subject/body via email-editor; changes bubble as `compose-changed`.
-5. On send, `send-email` fires with the full `SendEmailRequest` — parent handles network.
-
-## Minimal Integration
-```typescript
-<schmancy-mailbox
-  .config=${config}
-  .templates=${templates}
-  @send-email=${async (e: CustomEvent<{ request: SendEmailRequest }>) => {
-    const result = await api.sendCampaign(e.detail.request)
-    if (!result.success) this.dispatchError(result.message)
-  }}
-></schmancy-mailbox>
-```

package/dist/skills/map.md

@@ -1,55 +0,0 @@
-# schmancy-map
-
-> Google Maps component. Accepts address string (auto-geocoded) or exact lat/lng. Singleton-loaded Maps SDK.
-
-## Usage
-```html
-<!-- By address -->
-<schmancy-map
-  address="Times Square, New York"
-  api-key="YOUR_GOOGLE_MAPS_KEY"
-></schmancy-map>
-
-<!-- By coordinates -->
-<schmancy-map
-  .latitude=${40.758}
-  .longitude=${-73.985}
-  .zoom=${15}
-  type="satellite"
-  api-key="YOUR_GOOGLE_MAPS_KEY"
-></schmancy-map>
-```
-
-## Properties
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `address` | string | — | Location for geocoding (e.g. `"Eiffel Tower, Paris"`) |
-| `latitude` | number | — | Precise latitude (takes precedence over address) |
-| `longitude` | number | — | Precise longitude |
-| `zoom` | number | default Maps default | Map zoom level |
-| `type` | `'roadmap' \| 'satellite' \| 'hybrid' \| 'terrain'` | `'roadmap'` | Map style |
-| `height` | string | — | Custom height (e.g. `'400px'`, `'60vh'`) |
-| `apiKey` | string | **required** | Google Maps API key |
-
-## Behavior
-- The first `schmancy-map` instance triggers a singleton script load of `maps.googleapis.com/maps/api/js` with the `places` library.
-- Subsequent instances reuse the same loader — no duplicate network requests.
-- If `address` is provided without coordinates, the built-in `Geocoder` resolves it before rendering.
-- Errors (invalid key, unauthorized domain, geocode failure) render a fallback message inside the host.
-
-## Setup
-1. Acquire a Google Maps JavaScript API key from Google Cloud Console.
-2. Enable the **Maps JavaScript API** and **Geocoding API**.
-3. Add your domain to the authorized list.
-
-## Example
-```html
-<schmancy-surface type="subtle" rounded="all">
-  <schmancy-map
-    address="1600 Amphitheatre Parkway, Mountain View, CA"
-    height="320px"
-    type="hybrid"
-    .apiKey=${import.meta.env.VITE_GOOGLE_MAPS_KEY}
-  ></schmancy-map>
-</schmancy-surface>
-```

package/dist/skills/qr-scanner.md

@@ -1,51 +0,0 @@
-# schmancy-qr-scanner
-
-> Camera-based QR code scanner using `jsQR`. Requests rear-camera access, decodes frames in real time, deduplicates reads.
-
-## Usage
-```html
-<schmancy-qr-scanner
-  continuous
-  @scan-result=${e => this.handleScan(e.detail.data)}
-></schmancy-qr-scanner>
-```
-
-```typescript
-handleScan(data: string) {
-  console.log('QR decoded:', data)
-}
-```
-
-## Properties
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `continuous` | boolean | `true` | Keep scanning after a successful read (dedupe repeated reads) |
-
-## Events
-| Event | Detail | When |
-|-------|--------|------|
-| `scan-result` | `{ data: string, timestamp: number }` | QR code successfully decoded |
-
-## Behavior
-- Requests `getUserMedia` with `facingMode: 'environment'` (rear camera) at 1280×720.
-- Decodes via `jsQR` on `animationFrames` stream with `throttleTime` to avoid CPU thrashing.
-- `distinctUntilChanged` prevents duplicate emissions for the same code.
-- Brief success flash on each valid read.
-- Stops camera + tears down subscriptions on disconnect.
-- Displays an error state if camera permission is denied.
-
-## Requires
-- HTTPS (or `localhost`) for camera access.
-- User permission to the camera.
-
-## Example
-```html
-<schmancy-surface type="glass" rounded="all">
-  <schmancy-qr-scanner
-    @scan-result=${(e: CustomEvent<{ data: string }>) => {
-      $notify.success(`Scanned: ${e.detail.data}`)
-      this.scannedCode = e.detail.data
-    }}
-  ></schmancy-qr-scanner>
-</schmancy-surface>
-```