widgies 0.1.0

package/dist/ambient.min.js

@@ -0,0 +1,191 @@
+import{a as o}from"./chunk-BP7C5X5K.min.js";var n=class extends o{constructor(){super(...arguments);this.audioContext=null;this.oscillators=[];this.gainNodes=[];this.gainNode=null;this.isPlaying=!1;this.currentSound="rain";this.playButton=null;this.soundSelect=null;this.volumeSlider=null;this.sounds={rain:{name:"Rain",icon:"\u{1F327}\uFE0F"},ocean:{name:"Ocean Waves",icon:"\u{1F30A}"},forest:{name:"Forest",icon:"\u{1F332}"},river:{name:"River",icon:"\u{1F3DE}\uFE0F"},campfire:{name:"Crackling Campfire",icon:"\u{1F525}"}}}render(){this.shadow.innerHTML="";let t=this.createStyleSheet();t&&this.shadow.appendChild(t);let e=this.getAttribute("sound")||"rain";e in this.sounds&&(this.currentSound=e);let i=document.createElement("div");i.innerHTML=`
+      <div class="ambient" role="application" aria-label="Ambient sound player">
+        <div class="sound-display">
+          <span class="sound-icon">${this.sounds[this.currentSound].icon}</span>
+          <span class="sound-name">${this.sounds[this.currentSound].name}</span>
+        </div>
+        
+        <div class="controls">
+          <select class="sound-select" aria-label="Choose ambient sound">
+            ${Object.entries(this.sounds).map(([a,s])=>`<option value="${a}" ${a===this.currentSound?"selected":""}>${s.icon} ${s.name}</option>`).join("")}
+          </select>
+          
+          <button class="play-btn" aria-label="Play or pause ambient sound">
+            <span class="play-icon">\u25B6</span>
+            <span class="pause-icon" style="display: none">\u23F8</span>
+          </button>
+        </div>
+        
+        <div class="volume-control">
+          <label>
+            <span class="volume-label">\u{1F50A} Volume</span>
+            <input type="range" class="volume-slider" min="0" max="100" value="50" aria-label="Volume control">
+          </label>
+        </div>
+        
+        <div class="status" aria-live="polite" aria-label="Player status">
+          Ready to play
+        </div>
+      </div>
+    `,this.shadow.appendChild(i),this.playButton=this.shadow.querySelector(".play-btn"),this.soundSelect=this.shadow.querySelector(".sound-select"),this.volumeSlider=this.shadow.querySelector(".volume-slider")}attachEventListeners(){this.playButton?.addEventListener("click",()=>{this.togglePlayback()}),this.soundSelect?.addEventListener("change",()=>{this.changeSound(this.soundSelect.value)}),this.volumeSlider?.addEventListener("input",()=>{this.updateVolume()}),this.addEventListener("keydown",t=>{t.key===" "&&(t.preventDefault(),this.togglePlayback())})}async initAudioContext(){this.audioContext||(this.audioContext=new(window.AudioContext||window.webkitAudioContext)),this.audioContext.state==="suspended"&&await this.audioContext.resume(),this.gainNode||(this.gainNode=this.audioContext.createGain(),this.gainNode.connect(this.audioContext.destination))}createWhiteNoise(){if(!this.audioContext)throw new Error("AudioContext not initialized");let t=this.audioContext.sampleRate*2,e=this.audioContext.createBuffer(1,t,this.audioContext.sampleRate),i=e.getChannelData(0);for(let s=0;s<t;s++)i[s]=Math.random()*2-1;let a=this.audioContext.createBufferSource();return a.buffer=e,a.loop=!0,a}createRainSound(){let t=this.createWhiteNoise(),e=this.audioContext.createBiquadFilter();return e.type="lowpass",e.frequency.value=1e3,t.connect(e),e.connect(this.gainNode),t}createOceanSound(){let t=this.createWhiteNoise(),e=this.audioContext.createBiquadFilter();e.type="lowpass",e.frequency.value=400;let i=this.audioContext.createOscillator(),a=this.audioContext.createGain();return i.frequency.value=.1,a.gain.value=200,i.connect(a),a.connect(e.frequency),t.connect(e),e.connect(this.gainNode),i.start(),t}createForestSound(){let t=this.createWhiteNoise(),e=this.audioContext.createBiquadFilter();return e.type="bandpass",e.frequency.value=800,e.Q.value=.5,t.connect(e),e.connect(this.gainNode),t}createCampfireSound(){let t=this.createWhiteNoise(),e=this.audioContext.createBiquadFilter();return e.type="lowpass",e.frequency.value=300,t.connect(e),e.connect(this.gainNode),t}async togglePlayback(){try{await this.initAudioContext(),this.isPlaying?this.stopSound():await this.playSound()}catch{this.updateStatus("Audio not available")}}async playSound(){if(!this.audioContext||!this.gainNode)return;let t=this.sounds[this.currentSound],e=parseInt(this.volumeSlider?.value||"50")/100;this.gainNode.gain.setValueAtTime(e*.3,this.audioContext.currentTime);let i;switch(this.currentSound){case"rain":i=this.createRainSound();break;case"ocean":i=this.createOceanSound();break;case"forest":i=this.createForestSound();break;case"campfire":i=this.createCampfireSound();break;case"river":i=this.createForestSound();break;default:i=this.createRainSound()}i.start(),this.oscillators=[i],this.isPlaying=!0,this.updatePlayButton(),this.updateStatus(`Playing ${t.name}`),this.dispatchEvent(new CustomEvent("ambient-started",{detail:{sound:this.currentSound,volume:e},bubbles:!0}))}stopSound(){this.oscillators.forEach(t=>{this.audioContext&&t.stop&&t.stop(this.audioContext.currentTime+.1)}),this.gainNode&&this.audioContext&&this.gainNode.gain.linearRampToValueAtTime(0,this.audioContext.currentTime+.1),this.oscillators=[],this.gainNodes=[],this.isPlaying=!1,this.updatePlayButton(),this.updateStatus("Stopped"),this.dispatchEvent(new CustomEvent("ambient-stopped",{detail:{sound:this.currentSound},bubbles:!0}))}changeSound(t){let e=this.isPlaying;this.isPlaying&&this.stopSound(),this.currentSound=t,this.updateSoundDisplay(),e&&setTimeout(()=>this.playSound(),200),this.dispatchEvent(new CustomEvent("ambient-changed",{detail:{sound:this.currentSound},bubbles:!0}))}updateVolume(){if(!this.volumeSlider||!this.isPlaying||!this.gainNode||!this.audioContext)return;let t=parseInt(this.volumeSlider.value)/100;this.gainNode.gain.linearRampToValueAtTime(t*.3,this.audioContext.currentTime+.1)}updatePlayButton(){let t=this.shadow.querySelector(".play-icon"),e=this.shadow.querySelector(".pause-icon");t&&e&&(this.isPlaying?(t.style.display="none",e.style.display="inline"):(t.style.display="inline",e.style.display="none"))}updateSoundDisplay(){let t=this.shadow.querySelector(".sound-icon"),e=this.shadow.querySelector(".sound-name"),i=this.sounds[this.currentSound];t&&(t.textContent=i.icon),e&&(e.textContent=i.name)}updateStatus(t){let e=this.shadow.querySelector(".status");e&&(e.textContent=t)}static get observedAttributes(){return["sound"]}attributeChangedCallback(t,e,i){t==="sound"&&i&&i in this.sounds&&(this.changeSound(i),this.soundSelect&&(this.soundSelect.value=i))}disconnectedCallback(){super.disconnectedCallback(),this.isPlaying&&this.stopSound(),this.audioContext&&this.audioContext.close()}getStyles(){return`
+      ${this.getBaseStyles()}
+
+      .ambient {
+        width: 300px;
+        text-align: center;
+      }
+
+      .sound-display {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.75rem;
+        margin-bottom: 1.5rem;
+        padding: 1rem;
+        background: linear-gradient(135deg, 
+          var(--widgies-accent, var(--widgies-accent-light, #6c4cff)) 10%, 
+          transparent 50%);
+        border-radius: var(--widgies-radius, 0.5rem);
+        border: 1px solid color-mix(in srgb, var(--widgies-accent, var(--widgies-accent-light, #6c4cff)) 30%, transparent);
+      }
+
+      .sound-icon {
+        font-size: 2rem;
+      }
+
+      .sound-name {
+        font-size: 1.2rem;
+        font-weight: 600;
+        color: var(--widgies-accent, var(--widgies-accent-light, #6c4cff));
+      }
+
+      .controls {
+        display: flex;
+        gap: 1rem;
+        margin-bottom: 1.5rem;
+        align-items: center;
+      }
+
+      .sound-select {
+        flex: 1;
+        padding: 0.75rem;
+        border: 1px solid color-mix(in srgb, var(--widgies-text, var(--widgies-text-light, #1a1a1a)) 30%, transparent);
+        border-radius: var(--widgies-radius, 0.5rem);
+        background: var(--widgies-surface, var(--widgies-surface-light, #ffffffe6));
+        color: var(--widgies-text, var(--widgies-text-light, #1a1a1a));
+        font: inherit;
+      }
+
+      .sound-select:focus {
+        outline: 2px solid var(--widgies-accent, var(--widgies-accent-light, #6c4cff));
+        outline-offset: 1px;
+      }
+
+      .play-btn {
+        width: 60px;
+        height: 60px;
+        border-radius: 50%;
+        font-size: 1.5rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        box-shadow: 0 4px 12px color-mix(in srgb, var(--widgies-accent, var(--widgies-accent-light, #6c4cff)) 25%, transparent);
+      }
+
+      .volume-control {
+        margin-bottom: 1rem;
+      }
+
+      .volume-control label {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+        align-items: center;
+      }
+
+      .volume-label {
+        font-size: 0.9rem;
+        font-weight: 500;
+      }
+
+      .volume-slider {
+        width: 100%;
+        height: 8px;
+        border-radius: 4px;
+        background: color-mix(in srgb, var(--widgies-text, var(--widgies-text-light, #1a1a1a)) 20%, transparent);
+        outline: none;
+        -webkit-appearance: none;
+      }
+
+      .volume-slider::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        background: var(--widgies-accent, var(--widgies-accent-light, #6c4cff));
+        cursor: pointer;
+        box-shadow: 0 2px 6px color-mix(in srgb, var(--widgies-accent, var(--widgies-accent-light, #6c4cff)) 40%, transparent);
+      }
+
+      .volume-slider::-moz-range-thumb {
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        background: var(--widgies-accent, var(--widgies-accent-light, #6c4cff));
+        cursor: pointer;
+        border: none;
+        box-shadow: 0 2px 6px color-mix(in srgb, var(--widgies-accent, var(--widgies-accent-light, #6c4cff)) 40%, transparent);
+      }
+
+      .status {
+        font-size: 0.9rem;
+        color: color-mix(in srgb, var(--widgies-text, var(--widgies-text-light, #1a1a1a)) 70%, transparent);
+        font-style: italic;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        .sound-display {
+          background: linear-gradient(135deg, 
+            var(--widgies-accent, var(--widgies-accent-dark, #a88bff)) 10%, 
+            transparent 50%);
+          border-color: color-mix(in srgb, var(--widgies-accent, var(--widgies-accent-dark, #a88bff)) 30%, transparent);
+        }
+
+        .sound-name {
+          color: var(--widgies-accent, var(--widgies-accent-dark, #a88bff));
+        }
+
+        .sound-select {
+          background: var(--widgies-surface, var(--widgies-surface-dark, #181824e6));
+          color: var(--widgies-text, var(--widgies-text-dark, #f5f5ff));
+          border-color: color-mix(in srgb, var(--widgies-text, var(--widgies-text-dark, #f5f5ff)) 30%, transparent);
+        }
+
+        .sound-select:focus {
+          outline-color: var(--widgies-accent, var(--widgies-accent-dark, #a88bff));
+        }
+
+        .play-btn {
+          box-shadow: 0 4px 12px color-mix(in srgb, var(--widgies-accent, var(--widgies-accent-dark, #a88bff)) 25%, transparent);
+        }
+
+        .volume-slider {
+          background: color-mix(in srgb, var(--widgies-text, var(--widgies-text-dark, #f5f5ff)) 20%, transparent);
+        }
+
+        .volume-slider::-webkit-slider-thumb {
+          background: var(--widgies-accent, var(--widgies-accent-dark, #a88bff));
+          box-shadow: 0 2px 6px color-mix(in srgb, var(--widgies-accent, var(--widgies-accent-dark, #a88bff)) 40%, transparent);
+        }
+
+        .volume-slider::-moz-range-thumb {
+          background: var(--widgies-accent, var(--widgies-accent-dark, #a88bff));
+          box-shadow: 0 2px 6px color-mix(in srgb, var(--widgies-accent, var(--widgies-accent-dark, #a88bff)) 40%, transparent);
+        }
+
+        .status {
+          color: color-mix(in srgb, var(--widgies-text, var(--widgies-text-dark, #f5f5ff)) 70%, transparent);
+        }
+      }
+    `}};function r(){customElements.get("widgies-ambient")||customElements.define("widgies-ambient",n)}r();export{n as AmbientWidget,r as register};

package/dist/calculator.d.ts

@@ -0,0 +1 @@
+export { CalculatorWidget, register } from './widgets/calculator.js';

package/dist/calculator.js

@@ -0,0 +1,97 @@
+import{a as i}from"./chunk-3F3FJ7VN.js";var e=class extends i{constructor(){super(...arguments);this.display=null;this.currentValue="0";this.previousValue="";this.operator="";this.waitingForOperand=!1}render(){this.shadow.innerHTML="";let t=this.createStyleSheet();t&&this.shadow.appendChild(t);let a=document.createElement("div");a.innerHTML=`
+      <div class="calculator">
+        <div class="display" role="textbox" aria-live="polite" aria-label="Calculator display">${this.currentValue}</div>
+        <div class="buttons">
+          <button class="btn clear" data-action="clear">C</button>
+          <button class="btn operator" data-action="operator" data-operator="/">\xF7</button>
+          <button class="btn operator" data-action="operator" data-operator="*">\xD7</button>
+          <button class="btn operator" data-action="operator" data-operator="-">\u2212</button>
+          
+          <button class="btn number" data-action="input" data-number="7">7</button>
+          <button class="btn number" data-action="input" data-number="8">8</button>
+          <button class="btn number" data-action="input" data-number="9">9</button>
+          <button class="btn operator" data-action="operator" data-operator="+">+</button>
+          
+          <button class="btn number" data-action="input" data-number="4">4</button>
+          <button class="btn number" data-action="input" data-number="5">5</button>
+          <button class="btn number" data-action="input" data-number="6">6</button>
+          <button class="btn equals" data-action="calculate" rowspan="2">=</button>
+          
+          <button class="btn number" data-action="input" data-number="1">1</button>
+          <button class="btn number" data-action="input" data-number="2">2</button>
+          <button class="btn number" data-action="input" data-number="3">3</button>
+          
+          <button class="btn number zero" data-action="input" data-number="0">0</button>
+          <button class="btn number" data-action="input" data-number=".">.</button>
+        </div>
+      </div>
+    `,this.shadow.appendChild(a),this.display=this.shadow.querySelector(".display")}attachEventListeners(){this.shadow.addEventListener("click",t=>{let a=t.target;if(!a.matches("button"))return;let r=a.dataset.action,n=a.dataset.number,o=a.dataset.operator;switch(r){case"input":this.inputNumber(n);break;case"operator":this.inputOperator(o);break;case"calculate":this.calculate();break;case"clear":this.clear();break}})}inputNumber(t){this.waitingForOperand?(this.currentValue=t,this.waitingForOperand=!1):this.currentValue=this.currentValue==="0"?t:this.currentValue+t,this.updateDisplay()}inputOperator(t){let a=parseFloat(this.currentValue);if(this.previousValue==="")this.previousValue=this.currentValue;else if(this.operator){let r=this.performCalculation();this.currentValue=String(r),this.previousValue=this.currentValue,this.updateDisplay()}this.waitingForOperand=!0,this.operator=t}calculate(){if(this.previousValue!==""&&this.operator){let t=this.performCalculation();this.currentValue=String(t),this.previousValue="",this.operator="",this.waitingForOperand=!0,this.updateDisplay()}}performCalculation(){let t=parseFloat(this.previousValue),a=parseFloat(this.currentValue);switch(this.operator){case"+":return t+a;case"-":return t-a;case"*":return t*a;case"/":return a!==0?t/a:0;default:return a}}clear(){this.currentValue="0",this.previousValue="",this.operator="",this.waitingForOperand=!1,this.updateDisplay()}updateDisplay(){this.display&&(this.display.textContent=this.currentValue)}getStyles(){return`
+      ${this.getBaseStyles()}
+
+      .calculator {
+        width: 240px;
+      }
+
+      .display {
+        background: color-mix(in srgb, var(--widgies-surface, var(--widgies-surface-light, #ffffffe6)) 70%, var(--widgies-text, var(--widgies-text-light, #1a1a1a)));
+        color: var(--widgies-text, var(--widgies-text-light, #1a1a1a));
+        padding: 1rem;
+        margin-bottom: 0.5rem;
+        border-radius: var(--widgies-radius, 0.5rem);
+        text-align: right;
+        font-size: 1.5rem;
+        font-weight: bold;
+        min-height: 1.5rem;
+        overflow: hidden;
+      }
+
+      .buttons {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 0.5rem;
+      }
+
+      .btn {
+        height: 3rem;
+        font-size: 1.1rem;
+        font-weight: bold;
+      }
+
+      .btn.zero {
+        grid-column: span 2;
+      }
+
+      .btn.operator {
+        background: color-mix(in srgb, var(--widgies-accent, var(--widgies-accent-light, #6c4cff)) 80%, black);
+      }
+
+      .btn.equals {
+        background: var(--widgies-accent, var(--widgies-accent-light, #6c4cff));
+        grid-row: span 2;
+      }
+
+      .btn.number {
+        background: color-mix(in srgb, var(--widgies-surface, var(--widgies-surface-light, #ffffffe6)) 90%, var(--widgies-text, var(--widgies-text-light, #1a1a1a)));
+        color: var(--widgies-text, var(--widgies-text-light, #1a1a1a));
+      }
+
+      @media (prefers-color-scheme: dark) {
+        .display {
+          background: color-mix(in srgb, var(--widgies-surface, var(--widgies-surface-dark, #181824e6)) 70%, var(--widgies-text, var(--widgies-text-dark, #f5f5ff)));
+          color: var(--widgies-text, var(--widgies-text-dark, #f5f5ff));
+        }
+
+        .btn.operator {
+          background: color-mix(in srgb, var(--widgies-accent, var(--widgies-accent-dark, #a88bff)) 80%, white);
+        }
+
+        .btn.equals {
+          background: var(--widgies-accent, var(--widgies-accent-dark, #a88bff));
+        }
+
+        .btn.number {
+          background: color-mix(in srgb, var(--widgies-surface, var(--widgies-surface-dark, #181824e6)) 90%, var(--widgies-text, var(--widgies-text-dark, #f5f5ff)));
+          color: var(--widgies-text, var(--widgies-text-dark, #f5f5ff));
+        }
+      }
+    `}};function s(){customElements.get("widgies-calculator")||customElements.define("widgies-calculator",e)}s();export{e as CalculatorWidget,s as register};

package/dist/calculator.min.js

@@ -0,0 +1,97 @@
+import{a as i}from"./chunk-BP7C5X5K.min.js";var e=class extends i{constructor(){super(...arguments);this.display=null;this.currentValue="0";this.previousValue="";this.operator="";this.waitingForOperand=!1}render(){this.shadow.innerHTML="";let t=this.createStyleSheet();t&&this.shadow.appendChild(t);let a=document.createElement("div");a.innerHTML=`
+      <div class="calculator">
+        <div class="display" role="textbox" aria-live="polite" aria-label="Calculator display">${this.currentValue}</div>
+        <div class="buttons">
+          <button class="btn clear" data-action="clear">C</button>
+          <button class="btn operator" data-action="operator" data-operator="/">\xF7</button>
+          <button class="btn operator" data-action="operator" data-operator="*">\xD7</button>
+          <button class="btn operator" data-action="operator" data-operator="-">\u2212</button>
+          
+          <button class="btn number" data-action="input" data-number="7">7</button>
+          <button class="btn number" data-action="input" data-number="8">8</button>
+          <button class="btn number" data-action="input" data-number="9">9</button>
+          <button class="btn operator" data-action="operator" data-operator="+">+</button>
+          
+          <button class="btn number" data-action="input" data-number="4">4</button>
+          <button class="btn number" data-action="input" data-number="5">5</button>
+          <button class="btn number" data-action="input" data-number="6">6</button>
+          <button class="btn equals" data-action="calculate" rowspan="2">=</button>
+          
+          <button class="btn number" data-action="input" data-number="1">1</button>
+          <button class="btn number" data-action="input" data-number="2">2</button>
+          <button class="btn number" data-action="input" data-number="3">3</button>
+          
+          <button class="btn number zero" data-action="input" data-number="0">0</button>
+          <button class="btn number" data-action="input" data-number=".">.</button>
+        </div>
+      </div>
+    `,this.shadow.appendChild(a),this.display=this.shadow.querySelector(".display")}attachEventListeners(){this.shadow.addEventListener("click",t=>{let a=t.target;if(!a.matches("button"))return;let r=a.dataset.action,n=a.dataset.number,o=a.dataset.operator;switch(r){case"input":this.inputNumber(n);break;case"operator":this.inputOperator(o);break;case"calculate":this.calculate();break;case"clear":this.clear();break}})}inputNumber(t){this.waitingForOperand?(this.currentValue=t,this.waitingForOperand=!1):this.currentValue=this.currentValue==="0"?t:this.currentValue+t,this.updateDisplay()}inputOperator(t){let a=parseFloat(this.currentValue);if(this.previousValue==="")this.previousValue=this.currentValue;else if(this.operator){let r=this.performCalculation();this.currentValue=String(r),this.previousValue=this.currentValue,this.updateDisplay()}this.waitingForOperand=!0,this.operator=t}calculate(){if(this.previousValue!==""&&this.operator){let t=this.performCalculation();this.currentValue=String(t),this.previousValue="",this.operator="",this.waitingForOperand=!0,this.updateDisplay()}}performCalculation(){let t=parseFloat(this.previousValue),a=parseFloat(this.currentValue);switch(this.operator){case"+":return t+a;case"-":return t-a;case"*":return t*a;case"/":return a!==0?t/a:0;default:return a}}clear(){this.currentValue="0",this.previousValue="",this.operator="",this.waitingForOperand=!1,this.updateDisplay()}updateDisplay(){this.display&&(this.display.textContent=this.currentValue)}getStyles(){return`
+      ${this.getBaseStyles()}
+
+      .calculator {
+        width: 240px;
+      }
+
+      .display {
+        background: color-mix(in srgb, var(--widgies-surface, var(--widgies-surface-light, #ffffffe6)) 70%, var(--widgies-text, var(--widgies-text-light, #1a1a1a)));
+        color: var(--widgies-text, var(--widgies-text-light, #1a1a1a));
+        padding: 1rem;
+        margin-bottom: 0.5rem;
+        border-radius: var(--widgies-radius, 0.5rem);
+        text-align: right;
+        font-size: 1.5rem;
+        font-weight: bold;
+        min-height: 1.5rem;
+        overflow: hidden;
+      }
+
+      .buttons {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 0.5rem;
+      }
+
+      .btn {
+        height: 3rem;
+        font-size: 1.1rem;
+        font-weight: bold;
+      }
+
+      .btn.zero {
+        grid-column: span 2;
+      }
+
+      .btn.operator {
+        background: color-mix(in srgb, var(--widgies-accent, var(--widgies-accent-light, #6c4cff)) 80%, black);
+      }
+
+      .btn.equals {
+        background: var(--widgies-accent, var(--widgies-accent-light, #6c4cff));
+        grid-row: span 2;
+      }
+
+      .btn.number {
+        background: color-mix(in srgb, var(--widgies-surface, var(--widgies-surface-light, #ffffffe6)) 90%, var(--widgies-text, var(--widgies-text-light, #1a1a1a)));
+        color: var(--widgies-text, var(--widgies-text-light, #1a1a1a));
+      }
+
+      @media (prefers-color-scheme: dark) {
+        .display {
+          background: color-mix(in srgb, var(--widgies-surface, var(--widgies-surface-dark, #181824e6)) 70%, var(--widgies-text, var(--widgies-text-dark, #f5f5ff)));
+          color: var(--widgies-text, var(--widgies-text-dark, #f5f5ff));
+        }
+
+        .btn.operator {
+          background: color-mix(in srgb, var(--widgies-accent, var(--widgies-accent-dark, #a88bff)) 80%, white);
+        }
+
+        .btn.equals {
+          background: var(--widgies-accent, var(--widgies-accent-dark, #a88bff));
+        }
+
+        .btn.number {
+          background: color-mix(in srgb, var(--widgies-surface, var(--widgies-surface-dark, #181824e6)) 90%, var(--widgies-text, var(--widgies-text-dark, #f5f5ff)));
+          color: var(--widgies-text, var(--widgies-text-dark, #f5f5ff));
+        }
+      }
+    `}};function s(){customElements.get("widgies-calculator")||customElements.define("widgies-calculator",e)}s();export{e as CalculatorWidget,s as register};

package/dist/chunk-3F3FJ7VN.js

@@ -0,0 +1,82 @@
+var r=class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"})}connectedCallback(){this.render(),this.attachEventListeners(),this.handleAccessibility()}disconnectedCallback(){this.cleanup()}attachEventListeners(){}cleanup(){}handleAccessibility(){this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),this.addEventListener("keydown",e=>{(e.key==="Enter"||e.key===" ")&&this.handleActivation(e)})}handleActivation(e){}getStyles(){return this.getBaseStyles()}getBaseStyles(){return`
+      :host {
+        ${this.getThemeVariables()}
+        display: inline-block;
+        font: var(--widgies-font);
+        border-radius: var(--widgies-radius);
+        background: var(--widgies-surface);
+        color: var(--widgies-text);
+        border: 1px solid color-mix(in srgb, var(--widgies-text) 20%, transparent);
+        padding: 1rem;
+        box-sizing: border-box;
+        overflow: hidden;
+      }
+
+      :host > * {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+      }
+
+      :host(:focus-visible) {
+        outline: 3px solid var(--widgies-accent);
+        outline-offset: 2px;
+      }
+
+      button {
+        background: var(--widgies-accent);
+        color: white;
+        border: none;
+        border-radius: var(--widgies-radius);
+        padding: 0.5rem 1rem;
+        font: inherit;
+        cursor: pointer;
+        transition: background-color 0.2s ease;
+      }
+
+      button:hover {
+        background: color-mix(in srgb, var(--widgies-accent) 80%, black);
+      }
+
+      button:focus-visible {
+        outline: 2px solid var(--widgies-accent);
+        outline-offset: 2px;
+      }
+
+      button:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        :host {
+          --widgies-surface: var(--widgies-surface-dark);
+          --widgies-text: var(--widgies-text-dark);
+          --widgies-accent: var(--widgies-accent-dark);
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        *, *::before, *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+    `}getThemeVariables(){return`
+      --widgies-font: 16px/1.4 Inter, sans-serif;
+      --widgies-radius: 0.5rem;
+      --widgies-surface-light: #ffffffe6;
+      --widgies-text-light: #1a1a1a;
+      --widgies-accent-light: #6c4cff;
+      --widgies-surface-dark: #181824e6;
+      --widgies-text-dark: #f5f5ff;
+      --widgies-accent-dark: #a88bff;
+      --widgies-surface: var(--widgies-surface-light);
+      --widgies-text: var(--widgies-text-light);
+      --widgies-accent: var(--widgies-accent-light);
+    `}createStyleSheet(){let e=this.getStyles();if("adoptedStyleSheets"in this.shadow)try{let i=new CSSStyleSheet;return i.replaceSync(e),this.shadow.adoptedStyleSheets=[i],null}catch{}let t=document.createElement("style");return t.setAttribute("type","text/css"),t.innerHTML=e,t}};export{r as a};

package/dist/chunk-BP7C5X5K.min.js

@@ -0,0 +1,82 @@
+var r=class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"})}connectedCallback(){this.render(),this.attachEventListeners(),this.handleAccessibility()}disconnectedCallback(){this.cleanup()}attachEventListeners(){}cleanup(){}handleAccessibility(){this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),this.addEventListener("keydown",e=>{(e.key==="Enter"||e.key===" ")&&this.handleActivation(e)})}handleActivation(e){}getStyles(){return this.getBaseStyles()}getBaseStyles(){return`
+      :host {
+        ${this.getThemeVariables()}
+        display: inline-block;
+        font: var(--widgies-font);
+        border-radius: var(--widgies-radius);
+        background: var(--widgies-surface);
+        color: var(--widgies-text);
+        border: 1px solid color-mix(in srgb, var(--widgies-text) 20%, transparent);
+        padding: 1rem;
+        box-sizing: border-box;
+        overflow: hidden;
+      }
+
+      :host > * {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+      }
+
+      :host(:focus-visible) {
+        outline: 3px solid var(--widgies-accent);
+        outline-offset: 2px;
+      }
+
+      button {
+        background: var(--widgies-accent);
+        color: white;
+        border: none;
+        border-radius: var(--widgies-radius);
+        padding: 0.5rem 1rem;
+        font: inherit;
+        cursor: pointer;
+        transition: background-color 0.2s ease;
+      }
+
+      button:hover {
+        background: color-mix(in srgb, var(--widgies-accent) 80%, black);
+      }
+
+      button:focus-visible {
+        outline: 2px solid var(--widgies-accent);
+        outline-offset: 2px;
+      }
+
+      button:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        :host {
+          --widgies-surface: var(--widgies-surface-dark);
+          --widgies-text: var(--widgies-text-dark);
+          --widgies-accent: var(--widgies-accent-dark);
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        *, *::before, *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+    `}getThemeVariables(){return`
+      --widgies-font: 16px/1.4 Inter, sans-serif;
+      --widgies-radius: 0.5rem;
+      --widgies-surface-light: #ffffffe6;
+      --widgies-text-light: #1a1a1a;
+      --widgies-accent-light: #6c4cff;
+      --widgies-surface-dark: #181824e6;
+      --widgies-text-dark: #f5f5ff;
+      --widgies-accent-dark: #a88bff;
+      --widgies-surface: var(--widgies-surface-light);
+      --widgies-text: var(--widgies-text-light);
+      --widgies-accent: var(--widgies-accent-light);
+    `}createStyleSheet(){let e=this.getStyles();if("adoptedStyleSheets"in this.shadow)try{let i=new CSSStyleSheet;return i.replaceSync(e),this.shadow.adoptedStyleSheets=[i],null}catch{}let t=document.createElement("style");return t.setAttribute("type","text/css"),t.innerHTML=e,t}};export{r as a};

package/dist/core/BaseWidget.d.ts

@@ -0,0 +1,15 @@
+export declare abstract class BaseWidget extends HTMLElement {
+    protected shadow: ShadowRoot;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected abstract render(): void;
+    protected attachEventListeners(): void;
+    protected cleanup(): void;
+    protected handleAccessibility(): void;
+    protected handleActivation(event: KeyboardEvent): void;
+    protected getStyles(): string;
+    protected getBaseStyles(): string;
+    private getThemeVariables;
+    protected createStyleSheet(): HTMLStyleElement | null;
+}

package/dist/core/theme.d.ts

@@ -0,0 +1,2 @@
+export declare const themeVariables = "\n  /* Light theme (default) */\n  --widgies-font: 16px/1.4 Inter, sans-serif;\n  --widgies-radius: 0.5rem;\n  --widgies-surface-light: #ffffffe6;\n  --widgies-text-light: #1a1a1a;\n  --widgies-accent-light: #6c4cff;\n\n  /* Dark theme */\n  --widgies-surface-dark: #181824e6;\n  --widgies-text-dark: #f5f5ff;\n  --widgies-accent-dark: #a88bff;\n\n  /* Auto-switching variables */\n  --widgies-surface: var(--widgies-surface-light);\n  --widgies-text: var(--widgies-text-light);\n  --widgies-accent: var(--widgies-accent-light);\n";
+export declare const baseWidgetStyles = "\n  :host {\n    display: inline-block;\n    font: var(--widgies-font);\n    border-radius: var(--widgies-radius);\n    background: var(--widgies-surface);\n    color: var(--widgies-text);\n    border: 1px solid color-mix(in srgb, var(--widgies-text) 20%, transparent);\n    padding: 1rem;\n    box-sizing: border-box;\n    overflow: hidden;\n  }\n\n  :host > * {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    box-sizing: border-box;\n  }\n\n  :host(:focus-visible) {\n    outline: 3px solid var(--widgies-accent);\n    outline-offset: 2px;\n  }\n\n  button {\n    background: var(--widgies-accent);\n    color: white;\n    border: none;\n    border-radius: var(--widgies-radius);\n    padding: 0.5rem 1rem;\n    font: inherit;\n    cursor: pointer;\n    transition: background-color 0.2s ease;\n  }\n\n  button:hover {\n    background: color-mix(in srgb, var(--widgies-accent) 80%, black);\n  }\n\n  button:focus-visible {\n    outline: 2px solid var(--widgies-accent);\n    outline-offset: 2px;\n  }\n\n  button:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n      --widgies-surface: var(--widgies-surface-dark);\n      --widgies-text: var(--widgies-text-dark);\n      --widgies-accent: var(--widgies-accent-dark);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    *, *::before, *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n    }\n  }\n";

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { BaseWidget } from './core/BaseWidget.js';
+export { CalculatorWidget } from './widgets/calculator.js';
+export { RandomNumberWidget } from './widgets/random-number.js';
+export { TimerWidget } from './widgets/timer.js';
+export { AffirmationWidget } from './widgets/affirmation.js';
+export { AmbientWidget } from './widgets/ambient.js';
+export { QRCodeWidget } from './widgets/qr-code.js';
+export declare function registerAllWidgets(): void;

package/dist/qr-code.d.ts

@@ -0,0 +1 @@
+export { QRCodeWidget, register } from './widgets/qr-code.js';