@furystack/shades 11.1.0 → 12.0.0

package/esm/services/screen-service.d.ts

@@ -1,27 +1,94 @@
 import { ObservableValue } from '@furystack/utils';
+/**
+ * Available screen size breakpoint identifiers, ordered from smallest to largest.
+ */
 export declare const ScreenSizes: readonly ["xs", "sm", "md", "lg", "xl"];
+/**
+ * A screen size breakpoint identifier.
+ */
 export type ScreenSize = (typeof ScreenSizes)[number];
+/**
+ * Breakpoint definition with name and size constraints.
+ */
 export type Breakpoint = {
     name: ScreenSize;
     minSize: number;
     maxSize?: number;
 };
 /**
- * Service for handling screen size changes
+ * Service for detecting and subscribing to screen size and orientation changes.
+ *
+ * This service provides reactive observables for responsive design decisions.
+ * Use `screenSize.atLeast[size]` to check if the viewport is at least a certain size.
+ *
+ * **Breakpoint Thresholds:**
+ * - `xs`: 0px+ (all sizes)
+ * - `sm`: 600px+ (small tablets and up)
+ * - `md`: 960px+ (tablets and up)
+ * - `lg`: 1280px+ (desktops and up)
+ * - `xl`: 1920px+ (large desktops)
+ *
+ * @example
+ * ```typescript
+ * const screenService = injector.getInstance(ScreenService);
+ *
+ * // Check if screen is at least medium size
+ * if (screenService.screenSize.atLeast.md.getValue()) {
+ *   // Show desktop layout
+ * }
+ *
+ * // Subscribe to size changes for responsive behavior
+ * screenService.screenSize.atLeast.md.subscribe((isAtLeastMd) => {
+ *   if (isAtLeastMd) {
+ *     console.log('Desktop or tablet view');
+ *   } else {
+ *     console.log('Mobile view');
+ *   }
+ * });
+ *
+ * // Get current breakpoint by checking from largest to smallest
+ * const getCurrentBreakpoint = (): ScreenSize => {
+ *   if (screenService.screenSize.atLeast.xl.getValue()) return 'xl';
+ *   if (screenService.screenSize.atLeast.lg.getValue()) return 'lg';
+ *   if (screenService.screenSize.atLeast.md.getValue()) return 'md';
+ *   if (screenService.screenSize.atLeast.sm.getValue()) return 'sm';
+ *   return 'xs';
+ * };
+ *
+ * // Subscribe to orientation changes
+ * screenService.orientation.subscribe((orientation) => {
+ *   console.log(`Screen is now in ${orientation} mode`);
+ * });
+ * ```
  */
 export declare class ScreenService implements Disposable {
     private getOrientation;
     /**
-     * The definitions of the breakpoints
+     * The definitions of the breakpoint thresholds in pixels.
+     * Each breakpoint represents the minimum width for that size category.
      */
     readonly breakpoints: {
         [K in ScreenSize]: {
             minSize: number;
         };
     };
+    /**
+     * Cleans up event listeners when the service is disposed.
+     */
     [Symbol.dispose](): void;
     /**
-     * Observers for the current screen size. Will refresh on resize
+     * Observable values for checking if the screen is at least a certain size.
+     *
+     * Each observable emits `true` when the viewport width is >= the breakpoint threshold,
+     * and `false` otherwise. Values update automatically on window resize.
+     *
+     * @example
+     * ```typescript
+     * // Hide sidebar on small screens
+     * screenService.screenSize.atLeast.md.subscribe((isAtLeastMd) => {
+     *   sidebarVisible.setValue(isAtLeastMd);
+     * });
+     * ```
      */
     readonly screenSize: {
         atLeast: {
@@ -30,7 +97,17 @@ export declare class ScreenService implements Disposable {
     };
     private screenSizeAtLeast;
     /**
-     * Observable value for tracking the screen orientation
+     * Observable value for tracking the screen orientation.
+     * Emits 'landscape' or 'portrait' based on the current viewport dimensions.
+     *
+     * @example
+     * ```typescript
+     * screenService.orientation.subscribe((orientation) => {
+     *   if (orientation === 'landscape') {
+     *     // Adjust layout for landscape mode
+     *   }
+     * });
+     * ```
      */
     orientation: ObservableValue<"landscape" | "portrait">;
     private onResizeListener;

package/esm/services/screen-service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"screen-service.d.ts","sourceRoot":"","sources":["../../src/services/screen-service.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAElD,eAAO,MAAM,WAAW,yCAA0C,CAAA;AAElE,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAErD,MAAM,MAAM,UAAU,GAAG;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAEhF;;GAEG;AACH,qBACa,aAAc,YAAW,UAAU;IAC9C,OAAO,CAAC,cAAc,CAA2F;IAEjH;;OAEG;IACH,SAAgB,WAAW,EAAE;SAAG,CAAC,IAAI,UAAU,GAAG;YAAE,OAAO,EAAE,MAAM,CAAA;SAAE;KAAE,CAMtE;IAEM,CAAC,MAAM,CAAC,OAAO,CAAC;IAIvB;;OAEG;IACH,SAAgB,UAAU,EAAE;QAC1B,OAAO,EAAE;aAAG,CAAC,IAAI,UAAU,GAAG,eAAe,CAAC,OAAO,CAAC;SAAE,CAAA;KACzD,CAQA;IAED,OAAO,CAAC,iBAAiB;IAIzB;;OAEG;IACI,WAAW,4CAAuE;IAEzF,OAAO,CAAC,gBAAgB,CAEvB;IAED,OAAO,CAAC,aAAa;;CAWtB"}
+{"version":3,"file":"screen-service.d.ts","sourceRoot":"","sources":["../../src/services/screen-service.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAElD;;GAEG;AACH,eAAO,MAAM,WAAW,yCAA0C,CAAA;AAElE;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAErD;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAEhF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,qBACa,aAAc,YAAW,UAAU;IAC9C,OAAO,CAAC,cAAc,CAA2F;IAEjH;;;OAGG;IACH,SAAgB,WAAW,EAAE;SAAG,CAAC,IAAI,UAAU,GAAG;YAAE,OAAO,EAAE,MAAM,CAAA;SAAE;KAAE,CAMtE;IAED;;OAEG;IACI,CAAC,MAAM,CAAC,OAAO,CAAC;IAIvB;;;;;;;;;;;;;OAaG;IACH,SAAgB,UAAU,EAAE;QAC1B,OAAO,EAAE;aAAG,CAAC,IAAI,UAAU,GAAG,eAAe,CAAC,OAAO,CAAC;SAAE,CAAA;KACzD,CAQA;IAED,OAAO,CAAC,iBAAiB;IAIzB;;;;;;;;;;;;OAYG;IACI,WAAW,4CAAuE;IAEzF,OAAO,CAAC,gBAAgB,CAEvB;IAED,OAAO,CAAC,aAAa;;CAWtB"}

package/esm/services/screen-service.js

@@ -9,14 +9,61 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { Injectable } from '@furystack/inject';
 import { ObservableValue } from '@furystack/utils';
+/**
+ * Available screen size breakpoint identifiers, ordered from smallest to largest.
+ */
 export const ScreenSizes = ['xs', 'sm', 'md', 'lg', 'xl'];
 /**
- * Service for handling screen size changes
+ * Service for detecting and subscribing to screen size and orientation changes.
+ *
+ * This service provides reactive observables for responsive design decisions.
+ * Use `screenSize.atLeast[size]` to check if the viewport is at least a certain size.
+ *
+ * **Breakpoint Thresholds:**
+ * - `xs`: 0px+ (all sizes)
+ * - `sm`: 600px+ (small tablets and up)
+ * - `md`: 960px+ (tablets and up)
+ * - `lg`: 1280px+ (desktops and up)
+ * - `xl`: 1920px+ (large desktops)
+ *
+ * @example
+ * ```typescript
+ * const screenService = injector.getInstance(ScreenService);
+ *
+ * // Check if screen is at least medium size
+ * if (screenService.screenSize.atLeast.md.getValue()) {
+ *   // Show desktop layout
+ * }
+ *
+ * // Subscribe to size changes for responsive behavior
+ * screenService.screenSize.atLeast.md.subscribe((isAtLeastMd) => {
+ *   if (isAtLeastMd) {
+ *     console.log('Desktop or tablet view');
+ *   } else {
+ *     console.log('Mobile view');
+ *   }
+ * });
+ *
+ * // Get current breakpoint by checking from largest to smallest
+ * const getCurrentBreakpoint = (): ScreenSize => {
+ *   if (screenService.screenSize.atLeast.xl.getValue()) return 'xl';
+ *   if (screenService.screenSize.atLeast.lg.getValue()) return 'lg';
+ *   if (screenService.screenSize.atLeast.md.getValue()) return 'md';
+ *   if (screenService.screenSize.atLeast.sm.getValue()) return 'sm';
+ *   return 'xs';
+ * };
+ *
+ * // Subscribe to orientation changes
+ * screenService.orientation.subscribe((orientation) => {
+ *   console.log(`Screen is now in ${orientation} mode`);
+ * });
+ * ```
  */
 let ScreenService = class ScreenService {
     getOrientation = () => (window.matchMedia?.('(orientation:landscape').matches ? 'landscape' : 'portrait');
     /**
-     * The definitions of the breakpoints
+     * The definitions of the breakpoint thresholds in pixels.
+     * Each breakpoint represents the minimum width for that size category.
      */
     breakpoints = {
         xl: { minSize: 1920 },
@@ -25,11 +72,25 @@ let ScreenService = class ScreenService {
         sm: { minSize: 600 },
         xs: { minSize: 0 },
     };
+    /**
+     * Cleans up event listeners when the service is disposed.
+     */
     [Symbol.dispose]() {
         window.removeEventListener('resize', this.onResizeListener);
     }
     /**
-     * Observers for the current screen size. Will refresh on resize
+     * Observable values for checking if the screen is at least a certain size.
+     *
+     * Each observable emits `true` when the viewport width is >= the breakpoint threshold,
+     * and `false` otherwise. Values update automatically on window resize.
+     *
+     * @example
+     * ```typescript
+     * // Hide sidebar on small screens
+     * screenService.screenSize.atLeast.md.subscribe((isAtLeastMd) => {
+     *   sidebarVisible.setValue(isAtLeastMd);
+     * });
+     * ```
      */
     screenSize = {
         atLeast: {
@@ -44,7 +105,17 @@ let ScreenService = class ScreenService {
         return window.innerWidth >= this.breakpoints[size].minSize;
     }
     /**
-     * Observable value for tracking the screen orientation
+     * Observable value for tracking the screen orientation.
+     * Emits 'landscape' or 'portrait' based on the current viewport dimensions.
+     *
+     * @example
+     * ```typescript
+     * screenService.orientation.subscribe((orientation) => {
+     *   if (orientation === 'landscape') {
+     *     // Adjust layout for landscape mode
+     *   }
+     * });
+     * ```
      */
     orientation = new ObservableValue(this.getOrientation());
     onResizeListener = () => {

package/esm/services/screen-service.js.map

@@ -1 +1 @@
-{"version":3,"file":"screen-service.js","sourceRoot":"","sources":["../../src/services/screen-service.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAElD,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU,CAAA;AAMlE;;GAEG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAa;IAChB,cAAc,GAAG,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,wBAAwB,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAA;IAEjH;;OAEG;IACa,WAAW,GAA+C;QACxE,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QACrB,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QACrB,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;QACpB,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;QACpB,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;KACnB,CAAA;IAEM,CAAC,MAAM,CAAC,OAAO,CAAC;QACrB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAA;IAC7D,CAAC;IAED;;OAEG;IACa,UAAU,GAEtB;QACF,OAAO,EAAE;YACP,EAAE,EAAE,IAAI,eAAe,CAAU,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;YAC9D,EAAE,EAAE,IAAI,eAAe,CAAU,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;YAC9D,EAAE,EAAE,IAAI,eAAe,CAAU,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;YAC9D,EAAE,EAAE,IAAI,eAAe,CAAU,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;YAC9D,EAAE,EAAE,IAAI,eAAe,CAAU,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;SAC/D;KACF,CAAA;IAEO,iBAAiB,CAAC,IAAgB;QACxC,OAAO,MAAM,CAAC,UAAU,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,OAAO,CAAA;IAC5D,CAAC;IAED;;OAEG;IACI,WAAW,GAAG,IAAI,eAAe,CAA2B,IAAI,CAAC,cAAc,EAAE,CAAC,CAAA;IAEjF,gBAAgB,GAAG,GAAG,EAAE;QAC9B,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC,CAAA;IAEO,aAAa;QACnB,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAA;QAChD,WAAW,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YAC3B,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAA;QACtE,CAAC,CAAC,CAAA;IACJ,CAAC;IAED;QACE,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAA;QACxD,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;CACF,CAAA;AAzDY,aAAa;IADzB,UAAU,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC;;GACzB,aAAa,CAyDzB"}
+{"version":3,"file":"screen-service.js","sourceRoot":"","sources":["../../src/services/screen-service.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAElD;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU,CAAA;AAYlE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAa;IAChB,cAAc,GAAG,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,wBAAwB,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAA;IAEjH;;;OAGG;IACa,WAAW,GAA+C;QACxE,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QACrB,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QACrB,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;QACpB,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;QACpB,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;KACnB,CAAA;IAED;;OAEG;IACI,CAAC,MAAM,CAAC,OAAO,CAAC;QACrB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAA;IAC7D,CAAC;IAED;;;;;;;;;;;;;OAaG;IACa,UAAU,GAEtB;QACF,OAAO,EAAE;YACP,EAAE,EAAE,IAAI,eAAe,CAAU,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;YAC9D,EAAE,EAAE,IAAI,eAAe,CAAU,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;YAC9D,EAAE,EAAE,IAAI,eAAe,CAAU,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;YAC9D,EAAE,EAAE,IAAI,eAAe,CAAU,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;YAC9D,EAAE,EAAE,IAAI,eAAe,CAAU,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;SAC/D;KACF,CAAA;IAEO,iBAAiB,CAAC,IAAgB;QACxC,OAAO,MAAM,CAAC,UAAU,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,OAAO,CAAA;IAC5D,CAAC;IAED;;;;;;;;;;;;OAYG;IACI,WAAW,GAAG,IAAI,eAAe,CAA2B,IAAI,CAAC,cAAc,EAAE,CAAC,CAAA;IAEjF,gBAAgB,GAAG,GAAG,EAAE;QAC9B,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC,CAAA;IAEO,aAAa;QACnB,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAA;QAChD,WAAW,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YAC3B,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAA;QACtE,CAAC,CAAC,CAAA;IACJ,CAAC;IAED;QACE,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAA;QACxD,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;CACF,CAAA;AAlFY,aAAa;IADzB,UAAU,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC;;GACzB,aAAa,CAkFzB"}

package/esm/services/screen-service.spec.js

@@ -1,24 +1,108 @@
 import { Injector } from '@furystack/inject';
 import { usingAsync } from '@furystack/utils';
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
-import { ScreenService } from './screen-service.js';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { ScreenService, ScreenSizes } from './screen-service.js';
 describe('ScreenService', () => {
     beforeEach(() => {
         document.body.innerHTML = '<div id="root"></div>';
     });
     afterEach(() => {
         document.body.innerHTML = '';
+        vi.restoreAllMocks();
     });
-    it('Shuld be constructed', async () => {
+    it('Should be constructed', async () => {
         await usingAsync(new Injector(), async (i) => {
             const s = i.getInstance(ScreenService);
             expect(s).toBeInstanceOf(ScreenService);
         });
     });
-    it('Shuld update state on events', async () => {
-        await usingAsync(new Injector(), async (i) => {
-            i.getInstance(ScreenService);
-            /** TODO */
+    describe('breakpoints', () => {
+        it('Should have correct breakpoint definitions', async () => {
+            await usingAsync(new Injector(), async (i) => {
+                const s = i.getInstance(ScreenService);
+                expect(s.breakpoints.xs.minSize).toBe(0);
+                expect(s.breakpoints.sm.minSize).toBe(600);
+                expect(s.breakpoints.md.minSize).toBe(960);
+                expect(s.breakpoints.lg.minSize).toBe(1280);
+                expect(s.breakpoints.xl.minSize).toBe(1920);
+            });
+        });
+    });
+    describe('screenSize.atLeast', () => {
+        it('Should have observable for each screen size', async () => {
+            await usingAsync(new Injector(), async (i) => {
+                const s = i.getInstance(ScreenService);
+                for (const size of ScreenSizes) {
+                    expect(s.screenSize.atLeast[size]).toBeDefined();
+                    expect(typeof s.screenSize.atLeast[size].getValue()).toBe('boolean');
+                }
+            });
+        });
+        it('Should return true for xs on any screen size', async () => {
+            await usingAsync(new Injector(), async (i) => {
+                const s = i.getInstance(ScreenService);
+                // xs has minSize 0, so it should always be true
+                expect(s.screenSize.atLeast.xs.getValue()).toBe(true);
+            });
+        });
+        it('Should update screenSize observables on window resize', async () => {
+            await usingAsync(new Injector(), async (i) => {
+                const s = i.getInstance(ScreenService);
+                // Mock window.innerWidth to simulate a large screen
+                vi.spyOn(window, 'innerWidth', 'get').mockReturnValue(1920);
+                // Trigger resize event
+                window.dispatchEvent(new Event('resize'));
+                // All breakpoints should be true for 1920px width
+                expect(s.screenSize.atLeast.xs.getValue()).toBe(true);
+                expect(s.screenSize.atLeast.sm.getValue()).toBe(true);
+                expect(s.screenSize.atLeast.md.getValue()).toBe(true);
+                expect(s.screenSize.atLeast.lg.getValue()).toBe(true);
+                expect(s.screenSize.atLeast.xl.getValue()).toBe(true);
+                // Mock a small screen
+                vi.spyOn(window, 'innerWidth', 'get').mockReturnValue(500);
+                window.dispatchEvent(new Event('resize'));
+                // Only xs should be true for 500px width
+                expect(s.screenSize.atLeast.xs.getValue()).toBe(true);
+                expect(s.screenSize.atLeast.sm.getValue()).toBe(false);
+                expect(s.screenSize.atLeast.md.getValue()).toBe(false);
+                expect(s.screenSize.atLeast.lg.getValue()).toBe(false);
+                expect(s.screenSize.atLeast.xl.getValue()).toBe(false);
+            });
+        });
+    });
+    describe('orientation', () => {
+        it('Should have an orientation observable', async () => {
+            await usingAsync(new Injector(), async (i) => {
+                const s = i.getInstance(ScreenService);
+                const orientation = s.orientation.getValue();
+                expect(['landscape', 'portrait']).toContain(orientation);
+            });
+        });
+        it('Should update orientation on resize', async () => {
+            // Mock matchMedia before creating the service
+            const matchMediaMock = vi.fn();
+            window.matchMedia = matchMediaMock;
+            await usingAsync(new Injector(), async (i) => {
+                // Set initial orientation to landscape
+                matchMediaMock.mockReturnValue({ matches: true });
+                const s = i.getInstance(ScreenService);
+                // Verify initial landscape
+                window.dispatchEvent(new Event('resize'));
+                expect(s.orientation.getValue()).toBe('landscape');
+                // Change to portrait
+                matchMediaMock.mockReturnValue({ matches: false });
+                window.dispatchEvent(new Event('resize'));
+                expect(s.orientation.getValue()).toBe('portrait');
+            });
+        });
+    });
+    describe('disposal', () => {
+        it('Should remove resize event listener on dispose', async () => {
+            const removeEventListenerSpy = vi.spyOn(window, 'removeEventListener');
+            await usingAsync(new Injector(), async (i) => {
+                i.getInstance(ScreenService);
+            });
+            expect(removeEventListenerSpy).toHaveBeenCalledWith('resize', expect.any(Function));
         });
     });
 });

package/esm/services/screen-service.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"screen-service.spec.js","sourceRoot":"","sources":["../../src/services/screen-service.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAA;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAEnD,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAC7B,UAAU,CAAC,GAAG,EAAE;QACd,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,uBAAuB,CAAA;IACnD,CAAC,CAAC,CAAA;IACF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAA;IAC9B,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE;YAC3C,MAAM,CAAC,GAAG,CAAC,CAAC,WAAW,CAAC,aAAa,CAAC,CAAA;YACtC,MAAM,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,aAAa,CAAC,CAAA;QACzC,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;QAC5C,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE;YAC3C,CAAC,CAAC,WAAW,CAAC,aAAa,CAAC,CAAA;YAC5B,WAAW;QACb,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}
+{"version":3,"file":"screen-service.spec.js","sourceRoot":"","sources":["../../src/services/screen-service.spec.ts"],"names":[],"mappings":"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"}

package/esm/shade-component.d.ts

@@ -1,10 +1,15 @@
 import type { ChildrenList, ShadeComponent } from './models/index.js';
 /**
- * Appends a list of items to a HTML element
+ * When true, the JSX factory produces VNode descriptors instead of real DOM elements.
+ * Set to true by `_performUpdate` before calling `render()`, then back to false after.
+ */
+export declare const setRenderMode: (mode: boolean) => void;
+/**
+ * Appends a list of items to an element
  * @param el the root element
  * @param children array of items to append
  */
-export declare const appendChild: (el: HTMLElement | DocumentFragment, children: ChildrenList) => void;
+export declare const appendChild: (el: Element | DocumentFragment, children: ChildrenList) => void;
 export declare const hasStyle: (props: unknown) => props is {
     style: Partial<CSSStyleDeclaration>;
 };
@@ -20,6 +25,14 @@ export declare const attachDataAttributes: <TProps extends object>(el: HTMLEleme
  * @param props The Props to attach
  */
 export declare const attachProps: <TProps extends object>(el: HTMLElement, props: TProps) => void;
+/**
+ * Attaches properties to an SVG element via setAttribute.
+ * SVG attributes are XML-based and must be set via setAttribute,
+ * not via property assignment like HTML elements.
+ * @param el The target SVG element
+ * @param props The props to attach
+ */
+export declare const attachSvgProps: <TProps extends object>(el: Element, props: TProps) => void;
 type CreateComponentArgs<TProps> = [
     elementType: string | ShadeComponent<TProps>,
     props: TProps,
@@ -29,9 +42,9 @@ type CreateComponentArgs<TProps> = [
  * Factory method that creates a component. This should be configured as a default JSX Factory in tsconfig.
  * @returns the created JSX element
  */
-export declare const createComponentInner: <TProps extends object>(...[elementType, props, ...children]: CreateComponentArgs<TProps>) => HTMLElement | undefined;
+export declare const createComponentInner: <TProps extends object>(...[elementType, props, ...children]: CreateComponentArgs<TProps>) => HTMLElement | SVGElement | undefined;
 type CreateFragmentArgs = [props: null, ...children: ChildrenList];
 export declare const createFragmentInner: (...[_props, ...children]: CreateFragmentArgs) => DocumentFragment;
-export declare const createComponent: <TProps extends object>(...args: CreateComponentArgs<TProps> | CreateFragmentArgs) => HTMLElement | DocumentFragment | undefined;
+export declare const createComponent: <TProps extends object>(...args: CreateComponentArgs<TProps> | CreateFragmentArgs) => HTMLElement | SVGElement | DocumentFragment | undefined;
 export {};
 //# sourceMappingURL=shade-component.d.ts.map

package/esm/shade-component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shade-component.d.ts","sourceRoot":"","sources":["../src/shade-component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAGrE;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,IAAI,WAAW,GAAG,gBAAgB,EAAE,UAAU,YAAY,SAYrF,CAAA;AAED,eAAO,MAAM,QAAQ,GAAI,OAAO,OAAO,KAAG,KAAK,IAAI;IAAE,KAAK,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;CAIvF,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,IAAI,WAAW,EAAE,OAAO,OAAO,SAS3D,CAAA;AAED,eAAO,MAAM,oBAAoB,GAAI,MAAM,SAAS,MAAM,EAAE,IAAI,WAAW,EAAE,OAAO,MAAM,SAMzF,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,MAAM,SAAS,MAAM,EAAE,IAAI,WAAW,EAAE,OAAO,MAAM,SAahF,CAAA;AAED,KAAK,mBAAmB,CAAC,MAAM,IAAI;IACjC,WAAW,EAAE,MAAM,GAAG,cAAc,CAAC,MAAM,CAAC;IAC5C,KAAK,EAAE,MAAM;IACb,GAAG,QAAQ,EAAE,YAAY;CAC1B,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,oBAAoB,GAAI,MAAM,SAAS,MAAM,EACxD,GAAG,mCAAmC,mBAAmB,CAAC,MAAM,CAAC,4BAiBlE,CAAA;AAED,KAAK,kBAAkB,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,QAAQ,EAAE,YAAY,CAAC,CAAA;AAElE,eAAO,MAAM,mBAAmB,GAAI,GAAG,uBAAuB,kBAAkB,qBAI/E,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,MAAM,SAAS,MAAM,EAAE,GAAG,MAAM,mBAAmB,CAAC,MAAM,CAAC,GAAG,kBAAkB,+CAK/G,CAAA"}
+{"version":3,"file":"shade-component.d.ts","sourceRoot":"","sources":["../src/shade-component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAWrE;;;GAGG;AACH,eAAO,MAAM,aAAa,GAAI,MAAM,OAAO,KAAG,IAE7C,CAAA;AAMD;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,IAAI,OAAO,GAAG,gBAAgB,EAAE,UAAU,YAAY,SAYjF,CAAA;AAED,eAAO,MAAM,QAAQ,GAAI,OAAO,OAAO,KAAG,KAAK,IAAI;IAAE,KAAK,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;CAIvF,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,IAAI,WAAW,EAAE,OAAO,OAAO,SAS3D,CAAA;AAED,eAAO,MAAM,oBAAoB,GAAI,MAAM,SAAS,MAAM,EAAE,IAAI,WAAW,EAAE,OAAO,MAAM,SAMzF,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,MAAM,SAAS,MAAM,EAAE,IAAI,WAAW,EAAE,OAAO,MAAM,SAahF,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,GAAI,MAAM,SAAS,MAAM,EAAE,IAAI,OAAO,EAAE,OAAO,MAAM,SAiB/E,CAAA;AAED,KAAK,mBAAmB,CAAC,MAAM,IAAI;IACjC,WAAW,EAAE,MAAM,GAAG,cAAc,CAAC,MAAM,CAAC;IAC5C,KAAK,EAAE,MAAM;IACb,GAAG,QAAQ,EAAE,YAAY;CAC1B,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,oBAAoB,GAAI,MAAM,SAAS,MAAM,EACxD,GAAG,mCAAmC,mBAAmB,CAAC,MAAM,CAAC,yCAsBlE,CAAA;AAED,KAAK,kBAAkB,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,QAAQ,EAAE,YAAY,CAAC,CAAA;AAElE,eAAO,MAAM,mBAAmB,GAAI,GAAG,uBAAuB,kBAAkB,qBAI/E,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,MAAM,SAAS,MAAM,EAAE,GAAG,MAAM,mBAAmB,CAAC,MAAM,CAAC,GAAG,kBAAkB,4DAoB/G,CAAA"}

package/esm/shade-component.js

@@ -1,6 +1,22 @@
 import { isShadeComponent } from './models/shade-component.js';
+import { SVG_NS, isSvgTag } from './svg.js';
+import { createVNode } from './vnode.js';
+// ---------------------------------------------------------------------------
+// Render-mode toggle
+// ---------------------------------------------------------------------------
+let renderMode = false;
 /**
- * Appends a list of items to a HTML element
+ * When true, the JSX factory produces VNode descriptors instead of real DOM elements.
+ * Set to true by `_performUpdate` before calling `render()`, then back to false after.
+ */
+export const setRenderMode = (mode) => {
+    renderMode = mode;
+};
+// ---------------------------------------------------------------------------
+// Real-DOM helpers (used outside render mode)
+// ---------------------------------------------------------------------------
+/**
+ * Appends a list of items to an element
  * @param el the root element
  * @param children array of items to append
  */
@@ -10,7 +26,7 @@ export const appendChild = (el, children) => {
             el.appendChild(document.createTextNode(child));
         }
         else {
-            if (child instanceof HTMLElement || child instanceof DocumentFragment) {
+            if (child instanceof Element || child instanceof DocumentFragment) {
                 el.appendChild(child);
             }
             else if (child instanceof Array) {
@@ -39,7 +55,7 @@ export const attachStyles = (el, props) => {
 export const attachDataAttributes = (el, props) => {
     if (props) {
         Object.entries(props)
-            .filter(([key]) => key.startsWith('data-'))
+            .filter(([key]) => key.startsWith('data-') || key.startsWith('aria-'))
             .forEach(([key, value]) => el.setAttribute(key, value || ''));
     }
 };
@@ -62,14 +78,50 @@ export const attachProps = (el, props) => {
     }
     attachDataAttributes(el, props);
 };
+/**
+ * Attaches properties to an SVG element via setAttribute.
+ * SVG attributes are XML-based and must be set via setAttribute,
+ * not via property assignment like HTML elements.
+ * @param el The target SVG element
+ * @param props The props to attach
+ */
+export const attachSvgProps = (el, props) => {
+    if (!props) {
+        return;
+    }
+    for (const [key, value] of Object.entries(props)) {
+        if (key === 'style' && typeof value === 'object' && value !== null) {
+            for (const [sk, sv] of Object.entries(value)) {
+                ;
+                el.style[sk] = sv;
+            }
+        }
+        else if (key === 'className') {
+            el.setAttribute('class', String(value));
+        }
+        else if (key.startsWith('on') && typeof value === 'function') {
+            ;
+            el[key] = value;
+        }
+        else if (value !== null && value !== undefined && value !== false) {
+            el.setAttribute(key, String(value));
+        }
+    }
+};
 /**
  * Factory method that creates a component. This should be configured as a default JSX Factory in tsconfig.
  * @returns the created JSX element
  */
 export const createComponentInner = (...[elementType, props, ...children]) => {
     if (typeof elementType === 'string') {
-        const el = document.createElement(elementType);
-        attachProps(el, props);
+        const isSvg = isSvgTag(elementType);
+        const el = isSvg ? document.createElementNS(SVG_NS, elementType) : document.createElement(elementType);
+        if (isSvg) {
+            attachSvgProps(el, props);
+        }
+        else {
+            attachProps(el, props);
+        }
         if (children) {
             appendChild(el, children);
         }
@@ -88,6 +140,16 @@ export const createFragmentInner = (...[_props, ...children]) => {
     return fragment;
 };
 export const createComponent = (...args) => {
+    // In render mode, produce VNode descriptors instead of real DOM elements
+    if (renderMode) {
+        const [type, props, ...children] = args;
+        // When jsxFragmentFactory === jsxFactory (both "createComponent"), the compiler
+        // passes createComponent itself as the first arg for fragments: createComponent(createComponent, null, ...)
+        if (type === null || type === createComponent) {
+            return createVNode(null, null, ...children);
+        }
+        return createVNode(type, props, ...children);
+    }
     if (args[0] === null) {
         return createFragmentInner(...args);
     }

package/esm/shade-component.js.map

@@ -1 +1 @@
-{"version":3,"file":"shade-component.js","sourceRoot":"","sources":["../src/shade-component.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"shade-component.js","sourceRoot":"","sources":["../src/shade-component.ts"],"names":[],"mappings":"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"}

package/esm/shade-host-props-ref.integration.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=shade-host-props-ref.integration.spec.d.ts.map

package/esm/shade-host-props-ref.integration.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shade-host-props-ref.integration.spec.d.ts","sourceRoot":"","sources":["../src/shade-host-props-ref.integration.spec.tsx"],"names":[],"mappings":""}