widgies 0.1.0

package/README.md

@@ -0,0 +1,105 @@
+# Widgies
+
+A tiny, zero-dependency set of Web Component widgets you can drop into any web page with one script tag.
+
+- **Plain English docs**—no jargon.
+- **Accessible by default**—ARIA labels, keyboard support, high-contrast, `prefers-reduced-motion`.
+- **Auto light & dark themes**—switches with `prefers-color-scheme`.
+- **Works everywhere**—React, Vue, Svelte, or just HTML.
+
+## Quick Start
+
+```html
+<!-- 1. Import Widgies from a CDN or your build folder -->
+<script type="module" src="https://unpkg.com/widgies@0.1.0/dist/widgies.min.js"></script>
+
+<!-- 2. Optional: override design tokens -->
+<style>
+  :root {
+    /* universal */
+    --widgies-radius: 0.5rem;
+    --widgies-font: 16px/1.4 Inter, sans-serif;
+
+    /* light mode */
+    --widgies-surface-light: #ffffffe6;
+    --widgies-text-light: #1a1a1a;
+    --widgies-accent-light: #6c4cff;
+
+    /* dark mode */
+    --widgies-surface-dark: #181824e6;
+    --widgies-text-dark: #f5f5ff;
+    --widgies-accent-dark: #a88bff;
+  }
+</style>
+
+<!-- 3. Drop a widget – no extra JS needed -->
+<widgies-timer minutes="25" aria-label="25-minute timer"></widgies-timer>
+```
+
+## Widgets in v0.1.0
+
+| Tag                       | What it does               | Key attributes      |
+| ------------------------- | -------------------------- | ------------------- |
+| `<widgies-calculator>`    | 4-function calculator      | –                   |
+| `<widgies-random-number>` | Cryptographically safe RNG | `min` `max`         |
+| `<widgies-timer>`         | Countdown / Pomodoro       | `seconds` `minutes` |
+| `<widgies-affirmation>`   | Random positive message    | `interval` (ms)     |
+| `<widgies-qr-code>`       | QR code generator          | `value` `size`      |
+| `<widgies-ambient>`       | Rain, ocean, forest sounds | `sound`             |
+
+All widgets share **theme tokens**, **focus rings**, and **ARIA roles**. Bundle size ≈10 kB gzipped.
+
+## Installation
+
+```bash
+npm install widgies
+```
+
+```js
+// Option 1: Import all widgets (auto-registers)
+import 'widgies';
+
+// Option 2: Import individual widgets
+import 'widgies/calculator';
+import 'widgies/timer';
+import 'widgies/random-number';
+import 'widgies/affirmation';
+import 'widgies/ambient';
+import 'widgies/qr-code';
+
+// Option 3: Import widget classes for manual registration
+import { CalculatorWidget } from 'widgies';
+CalculatorWidget.register();
+```
+
+Or via CDN:
+
+```html
+<script type="module" src="https://unpkg.com/widgies@latest/dist/widgies.min.js"></script>
+```
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Build the widget bundle
+npm run build
+
+# Generate TypeScript declarations
+npm run types
+
+# Build and watch for changes
+npm run dev
+
+# Run tests
+npm test
+
+# Full build (bundle + types)
+npm run prepare
+```
+
+## License
+
+MIT

package/dist/affirmation.d.ts

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

package/dist/affirmation.js

@@ -0,0 +1,129 @@
+import{a as r}from"./chunk-3F3FJ7VN.js";var i=class extends r{constructor(){super(...arguments);this.display=null;this.newButton=null;this.intervalId=null;this.autoInterval=0;this.affirmations=["You are capable of amazing things.","Every challenge is an opportunity to grow.","You have the strength to overcome anything.","Your potential is limitless.","You are exactly where you need to be.","Progress, not perfection, is the goal.","You deserve good things in your life.","Your efforts are making a difference.","You are braver than you believe.","Today is full of possibilities.","You are worthy of love and respect.","Your unique perspective matters.","You have overcome challenges before.","Small steps lead to big changes.","You are learning and growing every day.","Your kindness makes the world better.","You have everything you need within you.","You are creating your own path.","Your dreams are valid and achievable.","You radiate positive energy.","You are enough, just as you are.","Every day is a fresh start.","You choose how to respond to life.","Your creativity knows no bounds.","You make a positive impact on others."];this.currentAffirmation=""}render(){this.shadow.innerHTML="";let e=this.createStyleSheet();e&&this.shadow.appendChild(e),this.autoInterval=parseInt(this.getAttribute("interval")||"0"),this.currentAffirmation=this.getRandomAffirmation();let t=document.createElement("div");t.innerHTML=`
+      <div class="affirmation" role="region" aria-label="Daily affirmation">
+        <div class="display" aria-live="polite" aria-label="Current affirmation">
+          ${this.currentAffirmation}
+        </div>
+        <button class="new-btn" aria-label="Get new affirmation">
+          \u2728 New Affirmation
+        </button>
+        ${this.autoInterval>0?'<div class="auto-indicator">Auto-refreshing</div>':""}
+      </div>
+    `,this.shadow.appendChild(t),this.display=this.shadow.querySelector(".display"),this.newButton=this.shadow.querySelector(".new-btn")}attachEventListeners(){this.newButton?.addEventListener("click",()=>{this.showNewAffirmation()}),this.addEventListener("keydown",e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.showNewAffirmation())})}getRandomAffirmation(){let e;do{let t=Math.floor(Math.random()*this.affirmations.length);e=this.affirmations[t]}while(e===this.currentAffirmation&&this.affirmations.length>1);return e}showNewAffirmation(){this.display&&(this.display.classList.add("fade-out"),setTimeout(()=>{this.currentAffirmation=this.getRandomAffirmation(),this.display&&(this.display.textContent=this.currentAffirmation,this.display.classList.remove("fade-out"),this.display.classList.add("fade-in"),setTimeout(()=>{this.display?.classList.remove("fade-in")},300)),this.dispatchEvent(new CustomEvent("affirmation-changed",{detail:{affirmation:this.currentAffirmation},bubbles:!0}))},150))}startAutoInterval(){this.autoInterval>0&&(this.intervalId=window.setInterval(()=>{this.showNewAffirmation()},this.autoInterval))}stopAutoInterval(){this.intervalId&&(clearInterval(this.intervalId),this.intervalId=null)}static get observedAttributes(){return["interval"]}attributeChangedCallback(e,t,o){if(e==="interval"){this.stopAutoInterval(),this.autoInterval=parseInt(o||"0"),this.autoInterval>0&&this.startAutoInterval();let a=this.shadow.querySelector(".auto-indicator");a&&(a.style.display=this.autoInterval>0?"block":"none")}}connectedCallback(){super.connectedCallback(),this.startAutoInterval()}disconnectedCallback(){super.disconnectedCallback(),this.stopAutoInterval()}getStyles(){return`
+      ${this.getBaseStyles()}
+
+      .affirmation {
+        width: 350px;
+        text-align: center;
+      }
+
+      .display {
+        padding: 2rem 1.5rem;
+        margin-bottom: 1rem;
+        border-radius: var(--widgies-radius, 0.5rem);
+        background: linear-gradient(135deg, 
+          var(--widgies-accent, var(--widgies-accent-light, #6c4cff)) 0%, 
+          color-mix(in srgb, var(--widgies-accent, var(--widgies-accent-light, #6c4cff)) 80%, var(--widgies-surface, var(--widgies-surface-light, #ffffffe6))) 100%);
+        color: white;
+        font-size: 1.2rem;
+        font-weight: 500;
+        line-height: 1.6;
+        min-height: 4rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        box-shadow: 0 4px 12px color-mix(in srgb, var(--widgies-accent, var(--widgies-accent-light, #6c4cff)) 25%, transparent);
+        transition: opacity 0.15s ease, transform 0.15s ease;
+      }
+
+      .display.fade-out {
+        opacity: 0;
+        transform: translateY(-10px);
+      }
+
+      .display.fade-in {
+        opacity: 1;
+        transform: translateY(0);
+      }
+
+      .new-btn {
+        width: 100%;
+        padding: 0.75rem 1.5rem;
+        font-size: 1rem;
+        font-weight: 600;
+        background: var(--widgies-surface, var(--widgies-surface-light, #ffffffe6));
+        color: var(--widgies-accent, var(--widgies-accent-light, #6c4cff));
+        border: 2px solid var(--widgies-accent, var(--widgies-accent-light, #6c4cff));
+        transition: all 0.2s ease;
+      }
+
+      .new-btn:hover {
+        background: var(--widgies-accent, var(--widgies-accent-light, #6c4cff));
+        color: white;
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px color-mix(in srgb, var(--widgies-accent, var(--widgies-accent-light, #6c4cff)) 30%, transparent);
+      }
+
+      .new-btn:active {
+        transform: translateY(0);
+      }
+
+      .auto-indicator {
+        margin-top: 0.5rem;
+        font-size: 0.8rem;
+        color: color-mix(in srgb, var(--widgies-text, var(--widgies-text-light, #1a1a1a)) 70%, transparent);
+        font-style: italic;
+      }
+
+      .auto-indicator::before {
+        content: "\u{1F504} ";
+        animation: rotate 2s linear infinite;
+      }
+
+      @keyframes rotate {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+      }
+
+      @media (prefers-color-scheme: dark) {
+        .display {
+          background: linear-gradient(135deg, 
+            var(--widgies-accent, var(--widgies-accent-dark, #a88bff)) 0%, 
+            color-mix(in srgb, var(--widgies-accent, var(--widgies-accent-dark, #a88bff)) 80%, var(--widgies-surface, var(--widgies-surface-dark, #181824e6))) 100%);
+          box-shadow: 0 4px 12px color-mix(in srgb, var(--widgies-accent, var(--widgies-accent-dark, #a88bff)) 25%, transparent);
+        }
+
+        .new-btn {
+          background: var(--widgies-surface, var(--widgies-surface-dark, #181824e6));
+          color: var(--widgies-accent, var(--widgies-accent-dark, #a88bff));
+          border-color: var(--widgies-accent, var(--widgies-accent-dark, #a88bff));
+        }
+
+        .new-btn:hover {
+          background: var(--widgies-accent, var(--widgies-accent-dark, #a88bff));
+          box-shadow: 0 4px 12px color-mix(in srgb, var(--widgies-accent, var(--widgies-accent-dark, #a88bff)) 30%, transparent);
+        }
+
+        .auto-indicator {
+          color: color-mix(in srgb, var(--widgies-text, var(--widgies-text-dark, #f5f5ff)) 70%, transparent);
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .display {
+          transition: none;
+        }
+
+        .new-btn {
+          transition: none;
+        }
+
+        .new-btn:hover {
+          transform: none;
+        }
+
+        .auto-indicator::before {
+          animation: none;
+        }
+      }
+    `}};function n(){customElements.get("widgies-affirmation")||customElements.define("widgies-affirmation",i)}n();export{i as AffirmationWidget,n as register};

package/dist/affirmation.min.js

@@ -0,0 +1,129 @@
+import{a as r}from"./chunk-BP7C5X5K.min.js";var i=class extends r{constructor(){super(...arguments);this.display=null;this.newButton=null;this.intervalId=null;this.autoInterval=0;this.affirmations=["You are capable of amazing things.","Every challenge is an opportunity to grow.","You have the strength to overcome anything.","Your potential is limitless.","You are exactly where you need to be.","Progress, not perfection, is the goal.","You deserve good things in your life.","Your efforts are making a difference.","You are braver than you believe.","Today is full of possibilities.","You are worthy of love and respect.","Your unique perspective matters.","You have overcome challenges before.","Small steps lead to big changes.","You are learning and growing every day.","Your kindness makes the world better.","You have everything you need within you.","You are creating your own path.","Your dreams are valid and achievable.","You radiate positive energy.","You are enough, just as you are.","Every day is a fresh start.","You choose how to respond to life.","Your creativity knows no bounds.","You make a positive impact on others."];this.currentAffirmation=""}render(){this.shadow.innerHTML="";let e=this.createStyleSheet();e&&this.shadow.appendChild(e),this.autoInterval=parseInt(this.getAttribute("interval")||"0"),this.currentAffirmation=this.getRandomAffirmation();let t=document.createElement("div");t.innerHTML=`
+      <div class="affirmation" role="region" aria-label="Daily affirmation">
+        <div class="display" aria-live="polite" aria-label="Current affirmation">
+          ${this.currentAffirmation}
+        </div>
+        <button class="new-btn" aria-label="Get new affirmation">
+          \u2728 New Affirmation
+        </button>
+        ${this.autoInterval>0?'<div class="auto-indicator">Auto-refreshing</div>':""}
+      </div>
+    `,this.shadow.appendChild(t),this.display=this.shadow.querySelector(".display"),this.newButton=this.shadow.querySelector(".new-btn")}attachEventListeners(){this.newButton?.addEventListener("click",()=>{this.showNewAffirmation()}),this.addEventListener("keydown",e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.showNewAffirmation())})}getRandomAffirmation(){let e;do{let t=Math.floor(Math.random()*this.affirmations.length);e=this.affirmations[t]}while(e===this.currentAffirmation&&this.affirmations.length>1);return e}showNewAffirmation(){this.display&&(this.display.classList.add("fade-out"),setTimeout(()=>{this.currentAffirmation=this.getRandomAffirmation(),this.display&&(this.display.textContent=this.currentAffirmation,this.display.classList.remove("fade-out"),this.display.classList.add("fade-in"),setTimeout(()=>{this.display?.classList.remove("fade-in")},300)),this.dispatchEvent(new CustomEvent("affirmation-changed",{detail:{affirmation:this.currentAffirmation},bubbles:!0}))},150))}startAutoInterval(){this.autoInterval>0&&(this.intervalId=window.setInterval(()=>{this.showNewAffirmation()},this.autoInterval))}stopAutoInterval(){this.intervalId&&(clearInterval(this.intervalId),this.intervalId=null)}static get observedAttributes(){return["interval"]}attributeChangedCallback(e,t,o){if(e==="interval"){this.stopAutoInterval(),this.autoInterval=parseInt(o||"0"),this.autoInterval>0&&this.startAutoInterval();let a=this.shadow.querySelector(".auto-indicator");a&&(a.style.display=this.autoInterval>0?"block":"none")}}connectedCallback(){super.connectedCallback(),this.startAutoInterval()}disconnectedCallback(){super.disconnectedCallback(),this.stopAutoInterval()}getStyles(){return`
+      ${this.getBaseStyles()}
+
+      .affirmation {
+        width: 350px;
+        text-align: center;
+      }
+
+      .display {
+        padding: 2rem 1.5rem;
+        margin-bottom: 1rem;
+        border-radius: var(--widgies-radius, 0.5rem);
+        background: linear-gradient(135deg, 
+          var(--widgies-accent, var(--widgies-accent-light, #6c4cff)) 0%, 
+          color-mix(in srgb, var(--widgies-accent, var(--widgies-accent-light, #6c4cff)) 80%, var(--widgies-surface, var(--widgies-surface-light, #ffffffe6))) 100%);
+        color: white;
+        font-size: 1.2rem;
+        font-weight: 500;
+        line-height: 1.6;
+        min-height: 4rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        box-shadow: 0 4px 12px color-mix(in srgb, var(--widgies-accent, var(--widgies-accent-light, #6c4cff)) 25%, transparent);
+        transition: opacity 0.15s ease, transform 0.15s ease;
+      }
+
+      .display.fade-out {
+        opacity: 0;
+        transform: translateY(-10px);
+      }
+
+      .display.fade-in {
+        opacity: 1;
+        transform: translateY(0);
+      }
+
+      .new-btn {
+        width: 100%;
+        padding: 0.75rem 1.5rem;
+        font-size: 1rem;
+        font-weight: 600;
+        background: var(--widgies-surface, var(--widgies-surface-light, #ffffffe6));
+        color: var(--widgies-accent, var(--widgies-accent-light, #6c4cff));
+        border: 2px solid var(--widgies-accent, var(--widgies-accent-light, #6c4cff));
+        transition: all 0.2s ease;
+      }
+
+      .new-btn:hover {
+        background: var(--widgies-accent, var(--widgies-accent-light, #6c4cff));
+        color: white;
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px color-mix(in srgb, var(--widgies-accent, var(--widgies-accent-light, #6c4cff)) 30%, transparent);
+      }
+
+      .new-btn:active {
+        transform: translateY(0);
+      }
+
+      .auto-indicator {
+        margin-top: 0.5rem;
+        font-size: 0.8rem;
+        color: color-mix(in srgb, var(--widgies-text, var(--widgies-text-light, #1a1a1a)) 70%, transparent);
+        font-style: italic;
+      }
+
+      .auto-indicator::before {
+        content: "\u{1F504} ";
+        animation: rotate 2s linear infinite;
+      }
+
+      @keyframes rotate {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+      }
+
+      @media (prefers-color-scheme: dark) {
+        .display {
+          background: linear-gradient(135deg, 
+            var(--widgies-accent, var(--widgies-accent-dark, #a88bff)) 0%, 
+            color-mix(in srgb, var(--widgies-accent, var(--widgies-accent-dark, #a88bff)) 80%, var(--widgies-surface, var(--widgies-surface-dark, #181824e6))) 100%);
+          box-shadow: 0 4px 12px color-mix(in srgb, var(--widgies-accent, var(--widgies-accent-dark, #a88bff)) 25%, transparent);
+        }
+
+        .new-btn {
+          background: var(--widgies-surface, var(--widgies-surface-dark, #181824e6));
+          color: var(--widgies-accent, var(--widgies-accent-dark, #a88bff));
+          border-color: var(--widgies-accent, var(--widgies-accent-dark, #a88bff));
+        }
+
+        .new-btn:hover {
+          background: var(--widgies-accent, var(--widgies-accent-dark, #a88bff));
+          box-shadow: 0 4px 12px color-mix(in srgb, var(--widgies-accent, var(--widgies-accent-dark, #a88bff)) 30%, transparent);
+        }
+
+        .auto-indicator {
+          color: color-mix(in srgb, var(--widgies-text, var(--widgies-text-dark, #f5f5ff)) 70%, transparent);
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .display {
+          transition: none;
+        }
+
+        .new-btn {
+          transition: none;
+        }
+
+        .new-btn:hover {
+          transform: none;
+        }
+
+        .auto-indicator::before {
+          animation: none;
+        }
+      }
+    `}};function n(){customElements.get("widgies-affirmation")||customElements.define("widgies-affirmation",i)}n();export{i as AffirmationWidget,n as register};

package/dist/ambient.d.ts

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

package/dist/ambient.js

@@ -0,0 +1,191 @@
+import{a as o}from"./chunk-3F3FJ7VN.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};