sh3-core 0.16.1 → 0.17.2

package/dist/viewport/classify.test.js

@@ -0,0 +1,32 @@
+/*
+ * Table-driven tests for the viewport classifier. Each row is a real
+ * device (or a deliberately-chosen edge case) with the signal tuple
+ * expected from a real browser/matchMedia in that device's typical
+ * orientation.
+ */
+import { describe, it, expect } from 'vitest';
+import { classify } from './classify';
+const ROWS = [
+    { name: 'phone portrait', width: 393, coarsePointer: true, noHover: true, dpr: 3, expected: 'compact' },
+    { name: 'phone landscape', width: 852, coarsePointer: true, noHover: true, dpr: 3, expected: 'compact' },
+    { name: 'tablet portrait', width: 768, coarsePointer: true, noHover: true, dpr: 2, expected: 'compact' },
+    { name: 'tablet landscape', width: 1024, coarsePointer: true, noHover: true, dpr: 2, expected: 'compact' },
+    { name: 'desktop wide', width: 1920, coarsePointer: false, noHover: false, dpr: 1, expected: 'desktop' },
+    { name: 'desktop narrow window', width: 700, coarsePointer: false, noHover: false, dpr: 1, expected: 'compact' },
+    { name: 'iPad with mouse attached', width: 1024, coarsePointer: false, noHover: false, dpr: 2, expected: 'desktop' },
+    { name: 'small laptop', width: 1366, coarsePointer: false, noHover: false, dpr: 1, expected: 'desktop' },
+    { name: 'phone with stylus (hover ok)', width: 412, coarsePointer: true, noHover: false, dpr: 3, expected: 'compact' },
+];
+describe('classify', () => {
+    for (const row of ROWS) {
+        it(`${row.name} → ${row.expected}`, () => {
+            const result = classify({
+                width: row.width,
+                coarsePointer: row.coarsePointer,
+                noHover: row.noHover,
+                dpr: row.dpr,
+            });
+            expect(result).toBe(row.expected);
+        });
+    }
+});

package/dist/viewport/store.browser.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/viewport/store.browser.test.js

@@ -0,0 +1,33 @@
+/*
+ * Real-signal viewport classification — boots the viewport store under
+ * Chromium and asserts initial class + override behavior. happy-dom's
+ * matchMedia stub is shallow, so this is the contract pin against a
+ * real browser engine.
+ */
+import { describe, it, expect, beforeEach } from 'vitest';
+import { viewportStore } from './store.svelte';
+beforeEach(() => {
+    viewportStore.__reset();
+});
+describe('viewport store under real browser', () => {
+    it('returns a viewport class consistent with the test runner window', () => {
+        const info = viewportStore.current;
+        expect(info.class).toMatch(/desktop|compact/);
+        expect(info.width).toBeGreaterThan(0);
+        expect(info.height).toBeGreaterThan(0);
+    });
+    it('override(compact) immediately flips class', () => {
+        const fires = [];
+        const unsub = viewportStore.subscribe((i) => fires.push(i.class));
+        viewportStore.override('compact');
+        expect(viewportStore.current.class).toBe('compact');
+        expect(fires).toContain('compact');
+        unsub();
+    });
+    it('override(null) restores auto-derived class', () => {
+        viewportStore.override('compact');
+        expect(viewportStore.pinned).toBe('compact');
+        viewportStore.override(null);
+        expect(viewportStore.pinned).toBeNull();
+    });
+});

package/dist/viewport/store.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ViewportClass, ViewportInfo } from './types';
+export declare const viewportStore: {
+    readonly current: ViewportInfo;
+    subscribe(cb: (i: ViewportInfo) => void): () => void;
+    override(cls: ViewportClass | null): void;
+    readonly pinned: ViewportClass | null;
+    /** Test-only reset hook. Not exported from index.ts. */
+    __reset(): void;
+};

package/dist/viewport/store.svelte.js

@@ -0,0 +1,71 @@
+/*
+ * viewport store — reactive ViewportInfo with subscribe + override.
+ *
+ * Subscribes to window.resize, screen.orientation.change, and matchMedia
+ * change events for `pointer: coarse` / `hover: none`. Re-runs classify(),
+ * notifies subscribers only on class change (not every resize tick).
+ *
+ * Module is loaded eagerly by createShell, but the listener-wiring branch
+ * is gated on `typeof window` so node-only test runs don't crash.
+ */
+import { classify } from './classify';
+let pinnedClass = $state(null);
+const subscribers = new Set();
+function read() {
+    if (typeof window === 'undefined') {
+        return { class: 'desktop', width: 1920, height: 1080, coarsePointer: false, noHover: false, dpr: 1 };
+    }
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+    const coarsePointer = window.matchMedia('(pointer: coarse)').matches;
+    const noHover = window.matchMedia('(hover: none)').matches;
+    const dpr = window.devicePixelRatio;
+    const cls = pinnedClass !== null && pinnedClass !== void 0 ? pinnedClass : classify({ width, coarsePointer, noHover, dpr });
+    return { class: cls, width, height, coarsePointer, noHover, dpr };
+}
+let cached = $state(read());
+function recompute() {
+    const next = read();
+    const prevClass = cached.class;
+    cached = next;
+    if (next.class !== prevClass) {
+        for (const cb of subscribers)
+            cb(next);
+    }
+}
+if (typeof window !== 'undefined') {
+    window.addEventListener('resize', recompute);
+    window.matchMedia('(pointer: coarse)').addEventListener('change', recompute);
+    window.matchMedia('(hover: none)').addEventListener('change', recompute);
+    if (typeof screen !== 'undefined' && screen.orientation) {
+        screen.orientation.addEventListener('change', recompute);
+    }
+}
+export const viewportStore = {
+    get current() {
+        return cached;
+    },
+    subscribe(cb) {
+        subscribers.add(cb);
+        return () => { subscribers.delete(cb); };
+    },
+    override(cls) {
+        if (pinnedClass === cls)
+            return;
+        pinnedClass = cls;
+        recompute();
+        // recompute only fires subscribers on class change. If override pins
+        // to the same class as the auto-derived one, the visible class doesn't
+        // change. Force-fire so consumers re-read the override state.
+        for (const cb of subscribers)
+            cb(cached);
+    },
+    get pinned() {
+        return pinnedClass;
+    },
+    /** Test-only reset hook. Not exported from index.ts. */
+    __reset() {
+        pinnedClass = null;
+        subscribers.clear();
+    },
+};

package/dist/viewport/store.svelte.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/viewport/store.svelte.test.js

@@ -0,0 +1,54 @@
+/*
+ * DOM tests for the viewport store. happy-dom's matchMedia stub returns
+ * { matches: false, addEventListener, removeEventListener } so we can
+ * verify the wiring without driving the real browser engine.
+ *
+ * These tests intentionally use the store's __reset hook between cases
+ * to isolate subscriber state.
+ */
+import { describe, it, expect, beforeEach } from 'vitest';
+import { viewportStore } from './store.svelte';
+describe('viewport store (dom)', () => {
+    beforeEach(() => {
+        viewportStore.__reset();
+    });
+    it('current returns a ViewportInfo with shape', () => {
+        const info = viewportStore.current;
+        expect(info.class).toMatch(/desktop|compact/);
+        expect(typeof info.width).toBe('number');
+        expect(typeof info.height).toBe('number');
+    });
+    it('override(compact) flips class to compact', () => {
+        viewportStore.override('compact');
+        expect(viewportStore.current.class).toBe('compact');
+        expect(viewportStore.pinned).toBe('compact');
+    });
+    it('override(null) restores pinned to null', () => {
+        viewportStore.override('compact');
+        viewportStore.override(null);
+        expect(viewportStore.pinned).toBeNull();
+    });
+    it('subscribers fire on class change via override', () => {
+        const fires = [];
+        const unsub = viewportStore.subscribe((i) => fires.push(i.class));
+        viewportStore.override('compact');
+        expect(fires).toContain('compact');
+        unsub();
+    });
+    it('subscribers fire on override even when class does not change', () => {
+        // Auto-class on happy-dom is desktop (default width 1024 + fine pointer).
+        // override('desktop') should still fire so consumers see pin state change.
+        const fires = [];
+        const unsub = viewportStore.subscribe((i) => fires.push(i.class));
+        viewportStore.override('desktop');
+        expect(fires.length).toBeGreaterThan(0);
+        unsub();
+    });
+    it('unsubscribe stops further notifications', () => {
+        const fires = [];
+        const unsub = viewportStore.subscribe((i) => fires.push(i.class));
+        unsub();
+        viewportStore.override('compact');
+        expect(fires).toEqual([]);
+    });
+});

package/dist/viewport/types.d.ts

@@ -0,0 +1,9 @@
+export type ViewportClass = 'desktop' | 'compact';
+export interface ViewportInfo {
+    class: ViewportClass;
+    width: number;
+    height: number;
+    coarsePointer: boolean;
+    noHover: boolean;
+    dpr: number;
+}

package/dist/viewport/types.js

@@ -0,0 +1,6 @@
+/*
+ * Viewport class types. The classifier (./classify.ts) is pure; the
+ * store (./store.svelte.ts) wires it to matchMedia and exposes a
+ * reactive ViewportInfo via Sh3.viewport.
+ */
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh3-core",
-  "version": "0.16.1",
+  "version": "0.17.2",
   "type": "module",
   "files": [
     "dist"