feat(dees-button-group): add new button group component with demo and styling

fix(dees-chart-area): improve real-time updates and chart element handling
fix(dees-chart-log): refactor demo to store log element reference
chore: update dependencies in package.json and pnpm-lock.yaml

ts_web/elements/dees-chart-log.demo.ts

@@ -1,7 +1,10 @@
 import { html } from '@design.estate/dees-element';
+import type { DeesChartLog } from './dees-chart-log.js';
+import '@design.estate/dees-wcctools';
 
 export const demoFunc = () => {
   let intervalId: number;
+  let logElement: DeesChartLog;
 
   const serverSources = ['Server', 'Database', 'API', 'Auth', 'Cache', 'Queue', 'WebSocket', 'Scheduler'];
   
@@ -44,7 +47,6 @@ export const demoFunc = () => {
   };
 
   const generateRandomLog = () => {
-    const logElement = (window as any).__demoLogElement;
     if (!logElement) {
       console.warn('Log element not ready yet');
       return;
@@ -119,7 +121,11 @@ export const demoFunc = () => {
 
 
   return html`
-    <style>
+    <dees-demowrapper .runAfterRender=${async (element: HTMLElement) => {
+      // Store the log element reference
+      logElement = element.querySelector('dees-chart-log') as DeesChartLog;
+    }}>
+      <style>
       .demoBox {
         position: relative;
         background: #000000;
@@ -152,6 +158,7 @@ export const demoFunc = () => {
       <dees-chart-log
         .label=${'Production Server Logs'}
       ></dees-chart-log>
-    </div>
+      </div>
+    </dees-demowrapper>
   `;
 };