@nrg-ui/ember-media 0.1.1

package/LICENSE.md

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright (c) 2025
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,132 @@
+# @nrg-ui/ember-media
+
+An Ember addon for safe media query handling.
+
+## Compatibility
+
+- Ember.js v5.12 or above
+- Embroider or ember-auto-import v2
+
+## Installation
+
+```sh
+ember install @nrg-ui/ember-media
+```
+
+## Usage
+
+### Breakpoints
+
+There are 6 breakpoints available, with the following media queries:
+
+| Breakpoint | Media Query                                   |
+| ---------- | --------------------------------------------- |
+| xsmall     | `(min-width: 0px) and (max-width: 575px)`     |
+| small      | `(min-width: 576px) and (max-width: 767px)`   |
+| medium     | `(min-width: 768px) and (max-width: 991px)`   |
+| large      | `(min-width: 992px) and (max-width: 1199px)`  |
+| xlarge     | `(min-width: 1200px) and (max-width: 1399px)` |
+| xxlarge    | `(min-width: 1400px)`                         |
+
+There is a corresponding property on the media service for each breakpoint, e.g. `isSmall`, `isMedium`, etc.
+
+The queries can be adjusted via the Embroider build config, if needed:
+
+```js
+// ember-cli-build.js
+module.exports = function (defaults) {
+  let app = new EmberApp(defaults, {
+    '@embroider/macros': {
+      '@nrg-ui/ember-media': {
+        breakpoints: {
+          small: '(min-width: 600px) and (max-width: 799px)',
+          // other breakpoints...
+        },
+      },
+    },
+  });
+
+  return app;
+};
+```
+
+### Events
+
+The media service emits a `change` event whenever the matched media queries change. You can listen for this event to react to changes in screen size.
+
+```ts
+export default class MyComponent extends Component {
+  @service
+  declare media: MediaService;
+
+  constructor(owner: Owner, args: unknown) {
+    super(owner, args);
+
+    this.media.on('change', () => {
+      console.log('Matched media queries:', Array.from(this.media.matches));
+    });
+  }
+}
+```
+
+### Testing
+
+When testing components or services that depend on the media service, you can use the provided test helpers to simulate different screen sizes.
+
+```ts
+import { setupRenderingTest } from 'ember-qunit';
+import { module, test } from 'qunit';
+import { setBreakpoint } from '@nrg-ui/ember-media/test-support';
+
+module('Integration | Component | my-component', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('my test', async function (assert) {
+    const service = this.owner.lookup('service:media');
+
+    await setBreakpoint('small');
+    // ...
+  });
+});
+```
+
+### Example
+
+Inject the media service into your component, controller, or route:
+
+```ts
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+
+import type { Owner } from '@ember/owner';
+import type MediaService from '@nrg-ui/ember-media/services/media';
+
+export default class MyComponent extends Component {
+  @service
+  declare media: MediaService;
+
+  constructor(owner: unknown, args: unknown) {
+    super(owner, args);
+
+    this.media.on('change', this.handleMediaChange);
+  }
+
+  onClick = () => {
+    if (this.media.isLarge) {
+      // Do something for large screens
+    }
+  };
+
+  handleMediaChange = () => {
+    console.log('Matched media queries:', Array.from(this.media.matches));
+  };
+}
+```
+
+## Contributing
+
+See the [Contributing](CONTRIBUTING.md) guide for details.
+
+## License
+
+This project is licensed under the [MIT License](LICENSE.md).

package/addon-main.cjs

@@ -0,0 +1,5 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+'use strict';
+
+const { addonV1Shim } = require('@embroider/addon-shim');
+module.exports = addonV1Shim(__dirname);

package/declarations/index.d.ts

@@ -0,0 +1,4 @@
+import type MediaService from './services/media.ts';
+export type { MediaService };
+export { defaultBreakpoints } from './services/media.ts';
+//# sourceMappingURL=index.d.ts.map

package/declarations/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,YAAY,MAAM,qBAAqB,CAAC;AAEpD,YAAY,EAAE,YAAY,EAAE,CAAC;AAC7B,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC"}

package/declarations/services/media.d.ts

@@ -0,0 +1,50 @@
+import Service from '@ember/service';
+import { TrackedSet } from 'tracked-built-ins';
+import type Owner from '@ember/owner';
+type Fn = () => unknown | Promise<unknown>;
+type Callbacks = {
+    change: Set<Fn>;
+};
+export declare const defaultBreakpoints: Readonly<{
+    xsmall: "(min-width: 0px) and (max-width: 575px)";
+    small: "(min-width: 576px) and (max-width: 767px)";
+    medium: "(min-width: 768px) and (max-width: 991px)";
+    large: "(min-width: 992px) and (max-width: 1199px)";
+    xlarge: "(min-width: 1200px) and (max-width: 1399px)";
+    xxlarge: "(min-width: 1400px)";
+}>;
+export default class Media extends Service {
+    #private;
+    _mockedBreakpoint: string;
+    _matches: TrackedSet<string>;
+    mocked: boolean;
+    callbacks: Callbacks;
+    breakpoints: {
+        xsmall: string;
+        small: string;
+        medium: string;
+        large: string;
+        xlarge: string;
+        xxlarge: string;
+    };
+    constructor(owner: Owner);
+    get matches(): Set<string>;
+    private set matches(value);
+    get isXSmall(): boolean;
+    get isSmall(): boolean;
+    get isMedium(): boolean;
+    get isLarge(): boolean;
+    get isXLarge(): boolean;
+    get isXXLarge(): boolean;
+    on(name: keyof Callbacks, callback: Fn): void;
+    off(name: keyof Callbacks, callback: Fn): void;
+    trigger(name: keyof Callbacks): void;
+    match(name: string, query: string): void;
+}
+declare module '@ember/service' {
+    interface Registry {
+        media: Media;
+    }
+}
+export {};
+//# sourceMappingURL=media.d.ts.map

package/declarations/services/media.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media.d.ts","sourceRoot":"","sources":["../../src/services/media.ts"],"names":[],"mappings":"AACA,OAAO,OAAO,MAAM,gBAAgB,CAAC;AASrC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,OAAO,KAAK,KAAK,MAAM,cAAc,CAAC;AAEtC,KAAK,EAAE,GAAG,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;AAC3C,KAAK,SAAS,GAAG;IACf,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;CACjB,CAAC;AAMF,eAAO,MAAM,kBAAkB;;;;;;;EAO7B,CAAC;AAEH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,OAAO;;IACxC,iBAAiB,SAAa;IAG9B,QAAQ,qBAA4B;IAGpC,MAAM,UAAmE;IAEzE,SAAS,EAAE,SAAS,CAElB;IAEF,WAAW;;;;;;;MAGT;gBAEU,KAAK,EAAE,KAAK;IAQxB,IAAI,OAAO,IAAI,GAAG,CAAC,MAAM,CAAC,CASzB;IAED,OAAO,KAAK,OAAO,QAElB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,SAAS,IAAI,OAAO,CAEvB;IAUD,EAAE,CAAC,IAAI,EAAE,MAAM,SAAS,EAAE,QAAQ,EAAE,EAAE;IAMtC,GAAG,CAAC,IAAI,EAAE,MAAM,SAAS,EAAE,QAAQ,EAAE,EAAE;IAMvC,OAAO,CAAC,IAAI,EAAE,MAAM,SAAS;IAW7B,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;CA+BlC;AAED,OAAO,QAAQ,gBAAgB,CAAC;IAC9B,UAAU,QAAQ;QAChB,KAAK,EAAE,KAAK,CAAC;KACd;CACF"}

package/declarations/template-registry.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=template-registry.d.ts.map

package/declarations/template-registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"template-registry.d.ts","sourceRoot":"","sources":["../src/template-registry.ts"],"names":[],"mappings":""}

package/declarations/test-support/index.d.ts

@@ -0,0 +1,2 @@
+export declare function setBreakpoint(breakpoint: string): Promise<void>;
+//# sourceMappingURL=index.d.ts.map

package/declarations/test-support/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/test-support/index.ts"],"names":[],"mappings":"AAKA,wBAAsB,aAAa,CAAC,UAAU,EAAE,MAAM,iBAkBrD"}

package/dist/_app_/services/media.js

@@ -0,0 +1 @@
+export { default } from "@nrg-ui/ember-media/services/media";

package/dist/index.js

@@ -0,0 +1,2 @@
+export { defaultBreakpoints } from './services/media.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/services/media.js

@@ -0,0 +1,122 @@
+import { assert } from '@ember/debug';
+import Service from '@ember/service';
+import { macroCondition, isTesting, isDevelopingApp, getOwnConfig } from '@embroider/macros';
+import { tracked } from '@glimmer/tracking';
+import { runTask } from 'ember-lifeline';
+import { TrackedSet } from 'tracked-built-ins';
+import { g, i } from 'decorator-transforms/runtime-esm';
+
+const defaultBreakpoints = Object.freeze({
+  xsmall: '(min-width: 0px) and (max-width: 575px)',
+  small: '(min-width: 576px) and (max-width: 767px)',
+  medium: '(min-width: 768px) and (max-width: 991px)',
+  large: '(min-width: 992px) and (max-width: 1199px)',
+  xlarge: '(min-width: 1200px) and (max-width: 1399px)',
+  xxlarge: '(min-width: 1400px)'
+});
+class Media extends Service {
+  _mockedBreakpoint = 'desktop';
+  static {
+    g(this.prototype, "_matches", [tracked], function () {
+      return new TrackedSet();
+    });
+  }
+  #_matches = (i(this, "_matches"), void 0);
+  static {
+    g(this.prototype, "mocked", [tracked], function () {
+      return macroCondition(isTesting() || isDevelopingApp()) ? true : false;
+    });
+  }
+  #mocked = (i(this, "mocked"), void 0);
+  callbacks = {
+    change: new Set()
+  };
+  breakpoints = {
+    ...defaultBreakpoints,
+    ...getOwnConfig()?.breakpoints
+  };
+  constructor(owner) {
+    super(owner);
+    for (const [name, query] of Object.entries(this.breakpoints)) {
+      this.match(name, query);
+    }
+  }
+  get matches() {
+    if ((macroCondition(isTesting() || isDevelopingApp()) ? true : false) && this.mocked) {
+      return new TrackedSet([this._mockedBreakpoint]);
+    }
+    return this._matches;
+  }
+  set matches(value) {
+    this._matches = new TrackedSet(value);
+  }
+  get isXSmall() {
+    return this.matches.has('xsmall');
+  }
+  get isSmall() {
+    return this.matches.has('small');
+  }
+  get isMedium() {
+    return this.matches.has('medium');
+  }
+  get isLarge() {
+    return this.matches.has('large');
+  }
+  get isXLarge() {
+    return this.matches.has('xlarge');
+  }
+  get isXXLarge() {
+    return this.matches.has('xxlarge');
+  }
+  #getCallbackList(name) {
+    const callbackList = this.callbacks[name];
+    assert(`Callback '${name}' is not valid`, callbackList !== undefined);
+    return callbackList;
+  }
+  on(name, callback) {
+    const callbackList = this.#getCallbackList(name);
+    callbackList.add(callback);
+  }
+  off(name, callback) {
+    const callbackList = this.#getCallbackList(name);
+    callbackList.delete(callback);
+  }
+  trigger(name) {
+    const callbackList = this.#getCallbackList(name);
+    for (const callback of callbackList) {
+      try {
+        callback();
+      } catch {
+        // Ignore
+      }
+    }
+  }
+  match(name, query) {
+    if (macroCondition(isTesting() || isDevelopingApp())) {
+      return;
+    }
+    const mediaQueryList = matchMedia(query);
+    const listener = matcher => {
+      let changed = false;
+      if (matcher.matches) {
+        if (!this.matches.has(name)) {
+          this.matches.add(name);
+          changed = true;
+        }
+      } else {
+        changed = this.matches.has(name);
+        this.matches.delete(name);
+      }
+      if (changed) {
+        runTask(this, () => this.trigger('change'));
+      }
+    };
+    mediaQueryList.addEventListener('change', event => {
+      runTask(this, () => listener(event));
+    });
+    listener(mediaQueryList);
+  }
+}
+
+export { Media as default, defaultBreakpoints };
+//# sourceMappingURL=media.js.map

package/dist/services/media.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media.js","sources":["../../src/services/media.ts"],"sourcesContent":["import { assert } from '@ember/debug';\nimport Service from '@ember/service';\nimport {\n  getOwnConfig,\n  isDevelopingApp,\n  isTesting,\n  macroCondition,\n} from '@embroider/macros';\nimport { tracked } from '@glimmer/tracking';\nimport { runTask } from 'ember-lifeline';\nimport { TrackedSet } from 'tracked-built-ins';\n\nimport type Owner from '@ember/owner';\n\ntype Fn = () => unknown | Promise<unknown>;\ntype Callbacks = {\n  change: Set<Fn>;\n};\ntype Matcher = {\n  matches: boolean;\n  media: string;\n};\n\nexport const defaultBreakpoints = Object.freeze({\n  xsmall: '(min-width: 0px) and (max-width: 575px)',\n  small: '(min-width: 576px) and (max-width: 767px)',\n  medium: '(min-width: 768px) and (max-width: 991px)',\n  large: '(min-width: 992px) and (max-width: 1199px)',\n  xlarge: '(min-width: 1200px) and (max-width: 1399px)',\n  xxlarge: '(min-width: 1400px)',\n});\n\nexport default class Media extends Service {\n  _mockedBreakpoint = 'desktop';\n\n  @tracked\n  _matches = new TrackedSet<string>();\n\n  @tracked\n  mocked = macroCondition(isTesting() || isDevelopingApp()) ? true : false;\n\n  callbacks: Callbacks = {\n    change: new Set(),\n  };\n\n  breakpoints = {\n    ...defaultBreakpoints,\n    ...getOwnConfig()?.breakpoints,\n  };\n\n  constructor(owner: Owner) {\n    super(owner);\n\n    for (const [name, query] of Object.entries(this.breakpoints)) {\n      this.match(name, query);\n    }\n  }\n\n  get matches(): Set<string> {\n    if (\n      (macroCondition(isTesting() || isDevelopingApp()) ? true : false) &&\n      this.mocked\n    ) {\n      return new TrackedSet([this._mockedBreakpoint]);\n    }\n\n    return this._matches;\n  }\n\n  private set matches(value: Iterable<string>) {\n    this._matches = new TrackedSet(value);\n  }\n\n  get isXSmall(): boolean {\n    return this.matches.has('xsmall');\n  }\n\n  get isSmall(): boolean {\n    return this.matches.has('small');\n  }\n\n  get isMedium(): boolean {\n    return this.matches.has('medium');\n  }\n\n  get isLarge(): boolean {\n    return this.matches.has('large');\n  }\n\n  get isXLarge(): boolean {\n    return this.matches.has('xlarge');\n  }\n\n  get isXXLarge(): boolean {\n    return this.matches.has('xxlarge');\n  }\n\n  #getCallbackList(name: keyof Callbacks) {\n    const callbackList = this.callbacks[name];\n\n    assert(`Callback '${name}' is not valid`, callbackList !== undefined);\n\n    return callbackList;\n  }\n\n  on(name: keyof Callbacks, callback: Fn) {\n    const callbackList = this.#getCallbackList(name);\n\n    callbackList.add(callback);\n  }\n\n  off(name: keyof Callbacks, callback: Fn) {\n    const callbackList = this.#getCallbackList(name);\n\n    callbackList.delete(callback);\n  }\n\n  trigger(name: keyof Callbacks) {\n    const callbackList = this.#getCallbackList(name);\n    for (const callback of callbackList) {\n      try {\n        callback();\n      } catch {\n        // Ignore\n      }\n    }\n  }\n\n  match(name: string, query: string) {\n    if (macroCondition(isTesting() || isDevelopingApp())) {\n      return;\n    }\n\n    const mediaQueryList = matchMedia(query);\n\n    const listener = (matcher: Matcher) => {\n      let changed = false;\n\n      if (matcher.matches) {\n        if (!this.matches.has(name)) {\n          this.matches.add(name);\n          changed = true;\n        }\n      } else {\n        changed = this.matches.has(name);\n        this.matches.delete(name);\n      }\n\n      if (changed) {\n        runTask(this, () => this.trigger('change'));\n      }\n    };\n\n    mediaQueryList.addEventListener('change', (event) => {\n      runTask(this, () => listener(event));\n    });\n\n    listener(mediaQueryList);\n  }\n}\n\ndeclare module '@ember/service' {\n  interface Registry {\n    media: Media;\n  }\n}\n"],"names":["defaultBreakpoints","Object","freeze","xsmall","small","medium","large","xlarge","xxlarge","Media","Service","_mockedBreakpoint","g","prototype","tracked","TrackedSet","i","macroCondition","isTesting","isDevelopingApp","callbacks","change","Set","breakpoints","getOwnConfig","constructor","owner","name","query","entries","match","matches","mocked","_matches","value","isXSmall","has","isSmall","isMedium","isLarge","isXLarge","isXXLarge","#getCallbackList","callbackList","assert","undefined","on","callback","add","off","delete","trigger","mediaQueryList","matchMedia","listener","matcher","changed","runTask","addEventListener","event"],"mappings":"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"}

package/dist/template-registry.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=template-registry.js.map

package/dist/template-registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template-registry.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/test-support/index.js

@@ -0,0 +1,22 @@
+import { getContext, settled } from '@ember/test-helpers';
+
+async function setBreakpoint(breakpoint) {
+  const {
+    owner
+  } = getContext();
+  const media = owner.lookup('service:media');
+  if (breakpoint === 'auto') {
+    media.mocked = false;
+    return;
+  }
+  if (Object.keys(media.breakpoints).indexOf(breakpoint) === -1) {
+    throw new Error(`Breakpoint "${breakpoint}" not defined as a breakpoint`);
+  }
+  media.mocked = true;
+  media._mockedBreakpoint = breakpoint;
+  media.trigger('change');
+  await settled();
+}
+
+export { setBreakpoint };
+//# sourceMappingURL=index.js.map

package/dist/test-support/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/test-support/index.ts"],"sourcesContent":["import { getContext, settled } from '@ember/test-helpers';\n\nimport type Media from '../services/media.ts';\nimport type { TestContext } from '@ember/test-helpers';\n\nexport async function setBreakpoint(breakpoint: string) {\n  const { owner } = getContext() as TestContext;\n  const media = owner.lookup('service:media') as Media;\n\n  if (breakpoint === 'auto') {\n    media.mocked = false;\n    return;\n  }\n\n  if (Object.keys(media.breakpoints).indexOf(breakpoint) === -1) {\n    throw new Error(`Breakpoint \"${breakpoint}\" not defined as a breakpoint`);\n  }\n\n  media.mocked = true;\n  media._mockedBreakpoint = breakpoint;\n  media.trigger('change');\n\n  await settled();\n}\n"],"names":["setBreakpoint","breakpoint","owner","getContext","media","lookup","mocked","Object","keys","breakpoints","indexOf","Error","_mockedBreakpoint","trigger","settled"],"mappings":";;AAKO,eAAeA,aAAaA,CAACC,UAAkB,EAAE;EACtD,MAAM;AAAEC,IAAAA;GAAO,GAAGC,UAAU,EAAiB;AAC7C,EAAA,MAAMC,KAAK,GAAGF,KAAK,CAACG,MAAM,CAAC,eAAe,CAAU;EAEpD,IAAIJ,UAAU,KAAK,MAAM,EAAE;IACzBG,KAAK,CAACE,MAAM,GAAG,KAAK;AACpB,IAAA;AACF,EAAA;AAEA,EAAA,IAAIC,MAAM,CAACC,IAAI,CAACJ,KAAK,CAACK,WAAW,CAAC,CAACC,OAAO,CAACT,UAAU,CAAC,KAAK,EAAE,EAAE;AAC7D,IAAA,MAAM,IAAIU,KAAK,CAAC,CAAA,YAAA,EAAeV,UAAU,+BAA+B,CAAC;AAC3E,EAAA;EAEAG,KAAK,CAACE,MAAM,GAAG,IAAI;EACnBF,KAAK,CAACQ,iBAAiB,GAAGX,UAAU;AACpCG,EAAAA,KAAK,CAACS,OAAO,CAAC,QAAQ,CAAC;EAEvB,MAAMC,OAAO,EAAE;AACjB;;;;"}

package/package.json

@@ -0,0 +1,120 @@
+{
+  "name": "@nrg-ui/ember-media",
+  "version": "0.1.1",
+  "description": "An Ember addon for safe media query handling",
+  "keywords": [
+    "ember-addon"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/knoxville-utilities-board/ember-media.git"
+  },
+  "license": "MIT",
+  "author": "",
+  "imports": {
+    "#src/*": "./src/*"
+  },
+  "exports": {
+    ".": {
+      "types": "./declarations/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./test-support": {
+      "types": "./declarations/test-support/index.d.ts",
+      "default": "./dist/test-support/index.js"
+    },
+    "./addon-main.js": "./addon-main.cjs",
+    "./*.css": "./dist/*.css",
+    "./*": {
+      "types": "./declarations/*.d.ts",
+      "default": "./dist/*.js"
+    }
+  },
+  "files": [
+    "addon-main.cjs",
+    "declarations",
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@embroider/addon-shim": "^1.10.2",
+    "decorator-transforms": "^2.3.1",
+    "ember-lifeline": "^7.0.0",
+    "tracked-built-ins": "^4.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.28.5",
+    "@babel/eslint-parser": "^7.28.5",
+    "@babel/plugin-transform-typescript": "^7.28.5",
+    "@babel/runtime": "^7.28.4",
+    "@ember/app-tsconfig": "^2.0.0",
+    "@ember/library-tsconfig": "^2.0.0",
+    "@ember/test-helpers": "^5.4.1",
+    "@ember/test-waiters": "^4.1.1",
+    "@embroider/addon-dev": "^8.2.0",
+    "@embroider/compat": "^4.1.12",
+    "@embroider/core": "^4.4.2",
+    "@embroider/macros": "^1.19.6",
+    "@embroider/vite": "^1.5.0",
+    "@eslint/js": "^9.39.2",
+    "@glimmer/component": "^2.0.0",
+    "@glint/ember-tsc": "^1.0.8",
+    "@glint/template": "^1.7.3",
+    "@glint/tsserver-plugin": "^2.0.8",
+    "@nrg-ui/standards": "^0.6.2",
+    "@rollup/plugin-babel": "^6.1.0",
+    "@types/qunit": "^2.19.13",
+    "babel-plugin-ember-template-compilation": "^3.0.1",
+    "concurrently": "^9.2.1",
+    "ember-page-title": "^9.0.3",
+    "ember-qunit": "^9.0.4",
+    "ember-source": "^6.9.0",
+    "ember-strict-application-resolver": "^0.1.1",
+    "ember-template-lint": "^7.9.3",
+    "eslint": "^9.39.2",
+    "eslint-plugin-decorator-position": "^6.0.0",
+    "eslint-plugin-ember": "^12.7.5",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-n": "^17.23.1",
+    "eslint-plugin-qunit": "^8.2.5",
+    "prettier": "^3.7.4",
+    "prettier-plugin-ember-template-tag": "^2.1.2",
+    "qunit": "^2.25.0",
+    "qunit-dom": "^3.5.0",
+    "release-plan": "^0.17.0",
+    "rollup": "^4.54.0",
+    "testem": "^3.17.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.51.0",
+    "vite": "^7.3.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "ember": {
+    "edition": "octane"
+  },
+  "ember-addon": {
+    "version": 2,
+    "type": "addon",
+    "main": "addon-main.cjs",
+    "app-js": {
+      "./services/media.js": "./dist/_app_/services/media.js"
+    }
+  },
+  "scripts": {
+    "build": "rollup --config",
+    "format": "prettier . --cache --write",
+    "lint": "concurrently \"pnpm:lint:*(!fix)\" --names \"lint:\" --prefixColors auto",
+    "lint:fix": "concurrently \"pnpm:lint:*:fix\" --names \"fix:\" --prefixColors auto && pnpm run format",
+    "lint:format": "prettier . --cache --check",
+    "lint:hbs": "ember-template-lint . --no-error-on-unmatched-pattern",
+    "lint:hbs:fix": "ember-template-lint . --fix --no-error-on-unmatched-pattern",
+    "lint:js": "eslint . --cache",
+    "lint:js:fix": "eslint . --fix",
+    "lint:types": "ember-tsc --noEmit",
+    "start": "vite dev",
+    "test": "vite build --mode=development --out-dir dist-tests && testem --file testem.cjs ci --port 0"
+  }
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+import type MediaService from './services/media.ts';
+
+export type { MediaService };
+export { defaultBreakpoints } from './services/media.ts';

package/src/services/media.ts

@@ -0,0 +1,166 @@
+import { assert } from '@ember/debug';
+import Service from '@ember/service';
+import {
+  getOwnConfig,
+  isDevelopingApp,
+  isTesting,
+  macroCondition,
+} from '@embroider/macros';
+import { tracked } from '@glimmer/tracking';
+import { runTask } from 'ember-lifeline';
+import { TrackedSet } from 'tracked-built-ins';
+
+import type Owner from '@ember/owner';
+
+type Fn = () => unknown | Promise<unknown>;
+type Callbacks = {
+  change: Set<Fn>;
+};
+type Matcher = {
+  matches: boolean;
+  media: string;
+};
+
+export const defaultBreakpoints = Object.freeze({
+  xsmall: '(min-width: 0px) and (max-width: 575px)',
+  small: '(min-width: 576px) and (max-width: 767px)',
+  medium: '(min-width: 768px) and (max-width: 991px)',
+  large: '(min-width: 992px) and (max-width: 1199px)',
+  xlarge: '(min-width: 1200px) and (max-width: 1399px)',
+  xxlarge: '(min-width: 1400px)',
+});
+
+export default class Media extends Service {
+  _mockedBreakpoint = 'desktop';
+
+  @tracked
+  _matches = new TrackedSet<string>();
+
+  @tracked
+  mocked = macroCondition(isTesting() || isDevelopingApp()) ? true : false;
+
+  callbacks: Callbacks = {
+    change: new Set(),
+  };
+
+  breakpoints = {
+    ...defaultBreakpoints,
+    ...getOwnConfig()?.breakpoints,
+  };
+
+  constructor(owner: Owner) {
+    super(owner);
+
+    for (const [name, query] of Object.entries(this.breakpoints)) {
+      this.match(name, query);
+    }
+  }
+
+  get matches(): Set<string> {
+    if (
+      (macroCondition(isTesting() || isDevelopingApp()) ? true : false) &&
+      this.mocked
+    ) {
+      return new TrackedSet([this._mockedBreakpoint]);
+    }
+
+    return this._matches;
+  }
+
+  private set matches(value: Iterable<string>) {
+    this._matches = new TrackedSet(value);
+  }
+
+  get isXSmall(): boolean {
+    return this.matches.has('xsmall');
+  }
+
+  get isSmall(): boolean {
+    return this.matches.has('small');
+  }
+
+  get isMedium(): boolean {
+    return this.matches.has('medium');
+  }
+
+  get isLarge(): boolean {
+    return this.matches.has('large');
+  }
+
+  get isXLarge(): boolean {
+    return this.matches.has('xlarge');
+  }
+
+  get isXXLarge(): boolean {
+    return this.matches.has('xxlarge');
+  }
+
+  #getCallbackList(name: keyof Callbacks) {
+    const callbackList = this.callbacks[name];
+
+    assert(`Callback '${name}' is not valid`, callbackList !== undefined);
+
+    return callbackList;
+  }
+
+  on(name: keyof Callbacks, callback: Fn) {
+    const callbackList = this.#getCallbackList(name);
+
+    callbackList.add(callback);
+  }
+
+  off(name: keyof Callbacks, callback: Fn) {
+    const callbackList = this.#getCallbackList(name);
+
+    callbackList.delete(callback);
+  }
+
+  trigger(name: keyof Callbacks) {
+    const callbackList = this.#getCallbackList(name);
+    for (const callback of callbackList) {
+      try {
+        callback();
+      } catch {
+        // Ignore
+      }
+    }
+  }
+
+  match(name: string, query: string) {
+    if (macroCondition(isTesting() || isDevelopingApp())) {
+      return;
+    }
+
+    const mediaQueryList = matchMedia(query);
+
+    const listener = (matcher: Matcher) => {
+      let changed = false;
+
+      if (matcher.matches) {
+        if (!this.matches.has(name)) {
+          this.matches.add(name);
+          changed = true;
+        }
+      } else {
+        changed = this.matches.has(name);
+        this.matches.delete(name);
+      }
+
+      if (changed) {
+        runTask(this, () => this.trigger('change'));
+      }
+    };
+
+    mediaQueryList.addEventListener('change', (event) => {
+      runTask(this, () => listener(event));
+    });
+
+    listener(mediaQueryList);
+  }
+}
+
+declare module '@ember/service' {
+  interface Registry {
+    media: Media;
+  }
+}

package/src/template-registry.ts

@@ -0,0 +1,10 @@
+// Easily allow apps, which are not yet using strict mode templates, to consume your Glint types, by importing this file.
+// Add all your components, helpers and modifiers to the template registry here, so apps don't have to do this.
+// See https://typed-ember.gitbook.io/glint/environments/ember/authoring-addons
+
+// import type MyComponent from './components/my-component';
+
+// Uncomment this once entries have been added! 👇
+// export default interface Registry {
+//   MyComponent: typeof MyComponent
+// }

package/src/test-support/index.ts

@@ -0,0 +1,24 @@
+import { getContext, settled } from '@ember/test-helpers';
+
+import type Media from '../services/media.ts';
+import type { TestContext } from '@ember/test-helpers';
+
+export async function setBreakpoint(breakpoint: string) {
+  const { owner } = getContext() as TestContext;
+  const media = owner.lookup('service:media') as Media;
+
+  if (breakpoint === 'auto') {
+    media.mocked = false;
+    return;
+  }
+
+  if (Object.keys(media.breakpoints).indexOf(breakpoint) === -1) {
+    throw new Error(`Breakpoint "${breakpoint}" not defined as a breakpoint`);
+  }
+
+  media.mocked = true;
+  media._mockedBreakpoint = breakpoint;
+  media.trigger('change');
+
+  await settled();
+}