@wcstack/media-query 2.1.1

package/README.ja.md

@@ -0,0 +1,218 @@
+# @wcstack/media-query
+
+> 🤖 **AI coding agents**: This README is a package-level reference, not the primary entry point for building a wcstack application. If you have not already done so, first read the repository [README](https://github.com/wcstack/wcstack#readme) and [AGENTS.md](https://github.com/wcstack/wcstack/blob/main/AGENTS.md), then use the [wcstack-app skill](https://github.com/wcstack/wcstack-skill).
+
+`@wcstack/media-query` は wcstack エコシステム向けのヘッドレスな `matchMedia` コンポーネントです。
+
+視覚的な UI ウィジェットではありません。
+`@wcstack/network` が回線品質シグナルをリアクティブな state に変えるのと同じように、CSS メディアクエリの真偽をリアクティブな state に変える **非同期プリミティブノード** です。
+
+`@wcstack/state` と組み合わせると、`<wcs-media-query>` はパス契約で直接バインドできます:
+
+- **入力サーフェス**: `query` — `query` 属性にミラーされるメディアクエリ文字列
+- **出力 state サーフェス**: `matched`、`media`、`supported`
+
+これにより「ダークモードか」「reduced-motion を望んでいるか」「ビューポートが 600px 未満か」が state 上の素の boolean になり、`data-wcs` の条件分岐・computed getter・他の I/O ノードから、UI 層で `matchMedia` や `change` リスナーの配線を書かずに使えます。
+
+`@wcstack/media-query` は [CSBC](https://github.com/csbc-dev/arch/blob/main/README.md)（Core / Shell / Binding Contract）アーキテクチャに従います:
+
+- **Core**（`MediaQueryCore`）が `matchMedia(query)` を呼び、リストの live な `change` イベントを追従
+- **Shell**（`<wcs-media-query>`）がその state を DOM ライフサイクルに接続し、`query` 変更時に購読を張り替える
+- **Binding Contract**（`static wcBindable`）が観測可能な `properties` と 1 つの `input`（`query`）を宣言（**コマンドは持たない**）
+
+## なぜ存在するか — CSS には `@media` があるが、state には無い
+
+*スタイル*だけを切り替えるメディアクエリはスタイルシートに書くべきです。このノードは、答えが**ロジック**に届く必要がある場面のためにあります: テーマの既定値を決める、`prefers-reduced-motion` で `<wcs-raf>` のループを止める、ブレークポイント未満でテーブルをカードリストに差し替える、`(display-mode: standalone)` で PWA としてのインストールを検知する。いずれも手書きなら 4 行の命令的配線（`matchMedia` → `addEventListener("change")` → 初期同期 → 後始末）が要りますが、ここでは他の wcstack I/O ノードと同じ骨格を持つ 1 タグです。
+
+> **`matches` ではなく `matched`。** プラットフォームのプロパティは `MediaQueryList.matches` ですが、`Element.prototype.matches(selector)` が全要素に既に存在し、wc-bindable のプロパティは Shell から直接読まれるため、DOM メソッドを潰さないよう出力名を `matched` にしています。`docs/media-query-tag-design.md` §2.1 参照。
+
+> **secure context 不要・権限不要。** `matchMedia` はあらゆるページで使えます。
+
+## インストール
+
+```bash
+npm install @wcstack/media-query
+```
+
+CDN（バージョン固定）: `https://esm.run/@wcstack/media-query@2.1.1/auto`
+
+## クイックスタート
+
+### 1. テーマのダークモード既定値
+
+```html
+<script type="module" src="https://esm.run/@wcstack/state/auto"></script>
+<script type="module" src="https://esm.run/@wcstack/media-query/auto"></script>
+
+<wcs-state>
+  <script type="module">
+    export default {
+      isDark: false,
+      get theme() {
+        return this.isDark ? "dark" : "light";
+      },
+    };
+  </script>
+</wcs-state>
+
+<wcs-media-query query="(prefers-color-scheme: dark)" data-wcs="matched: isDark"></wcs-media-query>
+
+<main data-wcs="attr.data-theme: theme">…</main>
+```
+
+このページの全例に共通するタイミング規則が 1 つあります: `<wcs-media-query>` はスナップショットを `wcs-media-query:change` イベントで公開しますが、*初回*のスナップショットは接続時に同期発火するため、`@wcstack/state` がバインドリスナーを張るより先に流れてしまいます。それでも初期値が届くのは、`<wcs-media-query>` の観測可能プロパティがすべて output-only（`properties` にのみ宣言され `inputs` に無い）だからです — 既定の binding authority が `element` になり、バインド確立時に**イベントを待たずプロパティを直接読みます**（directional initial sync、v1.21.0 以降は既定 ON）。手動 pull は不要です（「注意・制限」参照）。
+
+### 2. `<wcs-raf>` のループで `prefers-reduced-motion` を尊重する
+
+```html
+<wcs-state>
+  <script type="module">
+    export default {
+      reduceMotion: false,
+      frame: 0,
+    };
+  </script>
+</wcs-state>
+
+<wcs-media-query query="(prefers-reduced-motion: reduce)" data-wcs="matched: reduceMotion"></wcs-media-query>
+<wcs-raf data-wcs="tick: frame; command.pause: reduceMotion|truthy; command.resume: reduceMotion|not" manual></wcs-raf>
+```
+
+（`<wcs-raf>` にはまさにこの用途の `reduced-motion="pause"` 属性もあります。この例は一般形 — 任意の I/O ノードのコマンドをメディアクエリから駆動できる — を示すものです。）
+
+### 3. ブレークポイントでのレイアウト切り替え
+
+```html
+<wcs-state>
+  <script type="module">
+    export default {
+      narrow: false,
+      rows: [],
+    };
+  </script>
+</wcs-state>
+
+<wcs-media-query query="(max-width: 600px)" data-wcs="matched: narrow"></wcs-media-query>
+
+<template data-wcs="if: narrow">
+  <ul data-wcs="for: rows"><li data-wcs="textContent: rows.*.name"></li></ul>
+</template>
+<template data-wcs="if: narrow|not">
+  <table>…</table>
+</template>
+```
+
+バインドする state パスは必ず事前に宣言してください — 未宣言パスへのバインドは初期化時に例外になります。`matched` は厳密な boolean（`null` になり得ない）なので `|not` が安全です。
+
+## 属性 / 入力
+
+| 属性     | プロパティ | 説明 |
+| -------- | ---------- | ---- |
+| `query`  | `query`    | `matchMedia()` に渡すメディアクエリ文字列。接続中に変更すると旧 `MediaQueryList` の購読を解除して新しいリストを購読します。属性を除去すると「何も監視しない」となり `matched` は `false` に落ちます。不正なクエリでも throw しません（ブラウザは `media: "not all"`、`matched: false` を報告）。 |
+
+`query` は唯一の入力で、`wcBindable.inputs` に `attribute: "query"` で宣言されています。upgrade 前のプロパティ代入は接続時に取り込まれます（property upgrade）。
+
+## 観測可能プロパティ（出力）
+
+| プロパティ   | イベント                  | semantics | 説明 |
+| ------------ | ------------------------- | --------- | ---- |
+| `matched`    | `wcs-media-query:change`  | `state`   | `MediaQueryList.matches`。live なリストが無いとき（非対応・空 `query`・`matchMedia` が throw）は `false`。 |
+| `media`      | `wcs-media-query:change`  | `state`   | ブラウザが正規化した `MediaQueryList.media` 文字列（不正クエリは `"not all"`）。リストが無ければ `""`。 |
+| `supported`  | `wcs-media-query:change`  | `state`   | この環境で `matchMedia` が関数なら `true`。購読のたびに解決（コンストラクタでキャッシュしない）。 |
+
+3 つすべては単一の `wcs-media-query:change` イベント（スナップショット全体 `{ matched, media, supported }`）から派生します。query 変更で `media` と `matched` が同時に変わる場合も、1 つの整合した更新として届きます。値はプリミティブのみで、解放すべきライブハンドルや所有オブジェクトはありません。
+
+## コマンド
+
+**無し。** `MediaQueryList` には呼ぶべきアクションがありません。`<wcs-media-query>` は純粋なモニタです。
+
+## 注意・制限
+
+- **1 タグ 1 クエリ。** 複数のクエリは `<wcs-media-query>` を並べてください。`queries` 配列は全ノード共通の「1 イベント＋派生 getter」の形を崩します。
+- **初回スナップショットの*イベント*はバインドに届きませんが、値は届きます。** 最初の `wcs-media-query:change` は `connectedCallback` 中に同期発火し、`@wcstack/state` のバインドリスナー確立はそれより後です。イベントは後から購読した相手に再送されません。それでも初期値が失われないのは、本ノードの観測可能プロパティがすべて output-only で既定の binding authority が `element` になるためです: バインドは確立時にプロパティを直接読みます（directional initial sync）。`enableDirectionalInitialSync: false` に倒した構成でのみ `$connectedCallback` + `whenDefined` の手動 pull が必要です。
+- **世代ガード。** 購読自体は同期ですが、query の変更は購読を*置き換え*ます。各購読の `change` リスナーは世代を捕捉し、新しい購読ができた後のイベントを無視するため、`removeEventListener` が効かない `MediaQueryList` でも古い query の値が新しい query の値を上書きすることはありません。`docs/media-query-tag-design.md` §6。
+- **旧 Safari。** リストに `addEventListener` が無ければ非推奨の `addListener` / `removeListener` ペアを使い、どちらも無ければ購読時点のスナップショットだけを報告します。
+- **再接続で再購読。** 要素を取り外すとリスナーを解除し、再挿入時に（その時点の `query` で）再確立します。
+- **SSR（`@wcstack/server`）。** `static hasConnectedCallbackPromise = true` を宣言し `connectedCallbackPromise` を公開しますが、`observe()` が同期的なため常に即座に settle します。`matchMedia` の無い環境（Node）では `supported` と `matched` は `false`、`media` は `""` です。
+- **同値ガード。** フィールド単位の比較で冗長な dispatch を抑止します — 旧 `addListener` の二重発火や、ブラウザが同じ `media` に正規化する等価クエリへの再購読など。
+
+## `:state()` による CSS スタイリング
+
+`<wcs-media-query>` は 2 つの boolean 出力ステートを
+[`ElementInternals` の `CustomStateSet`](https://developer.mozilla.org/ja/docs/Web/API/CustomStateSet)
+に反映します。そのため `data-wcs` バインディングやクラスの手動トグルなしに、CSS の
+`:state()` 疑似クラスで直接スタイリングできます。
+
+| ステート | on になる条件 |
+|----------|----------------|
+| `matched` | `wcs-media-query:change` が `matched === true` で発火 |
+| `supported` | `wcs-media-query:change` が `supported === true` で発火 |
+
+`media` は文字列なので反映されません。
+
+```css
+/* JS 配線なしの兄弟要素駆動テーマ */
+wcs-media-query:state(matched) ~ main { color-scheme: dark; }
+body:has(wcs-media-query:not(:state(supported))) .needs-js-media { display: none; }
+```
+
+属性やクラスと異なり `:state()` は要素の外部から書き込めないため、この出力ステートが
+入力と混同される心配がありません。
+
+**対応ブラウザ**（新構文 `:state(x)`）: Chrome/Edge 125+、Safari 17.4+、Firefox 126+。
+非対応の環境ではステートが一切 set されないだけです — `:state()` セレクタがマッチしなく
+なりますが、`<wcs-media-query>` 自体は通常どおり動作し続けます（graceful degradation・never-throw）。
+
+**SSR:** `:state()` は HTML にシリアライズできないため、サーバーレンダリングされた
+マークアップの初期ペイントにはこれらのステートは乗りません（`@wcstack/server` は無改変）。
+ハイドレーション前の見た目を制御したい場合は、代わりに `wcs-media-query:not(:defined)` と組み合わせてください。
+
+### デバッグ
+
+カスタムステートは DevTools の Elements パネルには表示されず、`attachInternals()`
+は同一要素に 2 回呼べないため、コンソールから直接覗く手段がありません。そのための
+デバッグ専用の補助を 2 つ用意しています:
+
+- `el.debugStates` — 現在 on になっているステート名の**スナップショット**配列
+  （例: `["matched", "supported"]`）。`wc-bindable` の一部ではなく（バインド対象ではない）、
+  形状も契約として保証されません — デバッグ用途にのみ使ってください。
+- `debug-states` 属性（opt-in・既定 OFF）は、ステート変化を要素の
+  `data-wcs-state-matched` / `data-wcs-state-supported` 属性にミラーします。
+  Elements パネルを開いておけば、トグルのたびにハイライトされます:
+
+  ```html
+  <wcs-media-query query="(max-width: 600px)" debug-states></wcs-media-query>
+  ```
+
+**CSS は `data-wcs-state-*` ではなく `:state()` に書いてください。** ミラーされた
+属性は、DevTools を開いた状態でステート変化を可視化するためだけのものであり、
+スタイリング用の正式なフックではありません。
+
+## ヘッドレス利用（`MediaQueryCore`）
+
+Core は DOM 非依存で、`@wc-bindable/core` の `bind()` と直接使えます:
+
+```typescript
+import { MediaQueryCore } from "@wcstack/media-query";
+
+const mq = new MediaQueryCore();
+mq.addEventListener("wcs-media-query:change", (e) => {
+  console.log((e as CustomEvent).detail); // { matched, media, supported }
+});
+
+mq.observe("(prefers-color-scheme: dark)"); // 同期的 — データ取得に promise を待つ必要は無い
+console.log(mq.matched);
+
+mq.observe("(max-width: 600px)");            // query 切替: 旧リストを解放し新リストを購読
+
+// 後始末:
+mq.dispose();                                 // live な `change` リスナーを外す
+```
+
+コンストラクタ: `new MediaQueryCore(target?, { matchMedia? })`。`target` はイベントの dispatch 先 `EventTarget`（省略時は Core 自身）、`matchMedia` は `globalThis.matchMedia` を呼び出し時に解決する代わりに使う関数の注入（テストや window の無いホスト向け）。ライフサイクルは手動です: `observe(query)` / `dispose()`。
+
+Core の構造サーフェスは wcstack I/O ノード横断の規範です([async-io-node-guidelines §3.9](../../docs/async-io-node-guidelines.ja.md))。要素なしで signals に束縛するには [@wcstack/signals — Core を直接束縛する](../signals/README.ja.md#core-を直接束縛する要素なし) を参照。
+
+## ライセンス
+
+MIT

package/README.md

@@ -0,0 +1,220 @@
+# @wcstack/media-query
+
+> 🤖 **AI coding agents**: This README is a package-level reference, not the primary entry point for building a wcstack application. If you have not already done so, first read the repository [README](https://github.com/wcstack/wcstack#readme) and [AGENTS.md](https://github.com/wcstack/wcstack/blob/main/AGENTS.md), then use the [wcstack-app skill](https://github.com/wcstack/wcstack-skill).
+
+`@wcstack/media-query` is a headless `matchMedia` component for the wcstack ecosystem.
+
+It is not a visual UI widget.
+It is an **async primitive node** that turns a CSS media query into reactive state — the same way `@wcstack/network` turns the connection-quality signal into reactive state.
+
+With `@wcstack/state`, `<wcs-media-query>` can be bound directly through path contracts:
+
+- **input surface**: `query` — the media query string, mirrored from the `query` attribute
+- **output state surface**: `matched`, `media`, `supported`
+
+This means "is the user in dark mode", "does the user prefer reduced motion", "is the viewport narrower than 600px" become plain booleans in state — usable by `data-wcs` conditionals, computed getters, and other I/O nodes — without writing `matchMedia` / `change`-listener glue in your UI layer.
+
+`@wcstack/media-query` follows the [CSBC](https://github.com/csbc-dev/arch/blob/main/README.md) (Core / Shell / Binding Contract) architecture:
+
+- **Core** (`MediaQueryCore`) calls `matchMedia(query)` and tracks the list's live `change` event
+- **Shell** (`<wcs-media-query>`) connects that state to DOM lifecycle and re-subscribes when `query` changes
+- **Binding Contract** (`static wcBindable`) declares observable `properties`, one `input` (`query`), and **no commands**
+
+## Why this exists — CSS already has `@media`; state does not
+
+A media query that only changes *styling* belongs in a stylesheet. This node is for the cases where the answer has to reach **logic**: choosing a default theme value, pausing a `<wcs-raf>` loop under `prefers-reduced-motion`, swapping a table for a card list below a breakpoint, or detecting `(display-mode: standalone)` for a PWA. Each of those is four lines of imperative wiring by hand (`matchMedia` → `addEventListener("change")` → initial sync → cleanup); here it is one tag with the same skeleton as every other wcstack I/O node.
+
+> **`matched`, not `matches`.** The platform property is `MediaQueryList.matches`, but `Element.prototype.matches(selector)` already exists on every element and a wc-bindable property is read straight off the Shell — so the output is named `matched` to leave the DOM method intact. See `docs/media-query-tag-design.md` §2.1.
+
+> **No secure-context requirement, no permission.** `matchMedia` is available on every page.
+
+## Install
+
+```bash
+npm install @wcstack/media-query
+```
+
+CDN (pinned): `https://esm.run/@wcstack/media-query@2.1.1/auto`
+
+## Quick Start
+
+### 1. Dark-mode default for a theme
+
+```html
+<script type="module" src="https://esm.run/@wcstack/state/auto"></script>
+<script type="module" src="https://esm.run/@wcstack/media-query/auto"></script>
+
+<wcs-state>
+  <script type="module">
+    export default {
+      isDark: false,
+      get theme() {
+        return this.isDark ? "dark" : "light";
+      },
+    };
+  </script>
+</wcs-state>
+
+<wcs-media-query query="(prefers-color-scheme: dark)" data-wcs="matched: isDark"></wcs-media-query>
+
+<main data-wcs="attr.data-theme: theme">…</main>
+```
+
+One timing rule applies to every example on this page: `<wcs-media-query>` publishes its snapshot through `wcs-media-query:change` events, and the *first* snapshot fires synchronously at connect — before `@wcstack/state` has attached its binding listeners. The initial value still arrives, because every observable property on `<wcs-media-query>` is output-only (declared in `properties`, absent from `inputs`): that makes the default binding authority `element`, so the binding **reads the property directly when it attaches** instead of waiting for an event it already missed (directional initial sync, on by default since v1.21.0). No manual pull is needed (see Notes & limitations).
+
+### 2. Respect `prefers-reduced-motion` in a `<wcs-raf>` loop
+
+```html
+<wcs-state>
+  <script type="module">
+    export default {
+      reduceMotion: false,
+      frame: 0,
+    };
+  </script>
+</wcs-state>
+
+<wcs-media-query query="(prefers-reduced-motion: reduce)" data-wcs="matched: reduceMotion"></wcs-media-query>
+<wcs-raf data-wcs="tick: frame; command.pause: reduceMotion|truthy; command.resume: reduceMotion|not" manual></wcs-raf>
+```
+
+(`<wcs-raf>` also has its own `reduced-motion="pause"` attribute for exactly this case; the example shows the general shape — any I/O node's commands can be driven from a media query.)
+
+### 3. Layout switch at a breakpoint
+
+```html
+<wcs-state>
+  <script type="module">
+    export default {
+      narrow: false,
+      rows: [],
+    };
+  </script>
+</wcs-state>
+
+<wcs-media-query query="(max-width: 600px)" data-wcs="matched: narrow"></wcs-media-query>
+
+<template data-wcs="if: narrow">
+  <ul data-wcs="for: rows"><li data-wcs="textContent: rows.*.name"></li></ul>
+</template>
+<template data-wcs="if: narrow|not">
+  <table>…</table>
+</template>
+```
+
+Every bound state path must be declared up front — binding an undeclared path throws at initialization. `matched` is a strict boolean (never `null`), so `|not` is safe here.
+
+## Attributes / Inputs
+
+| Attribute | Property | Description |
+| --------- | -------- | ----------- |
+| `query`   | `query`  | The media query string passed to `matchMedia()`. Changing it while connected tears down the old `MediaQueryList` subscription and subscribes to the new one. Removing the attribute means "watch nothing" — `matched` drops to `false`. An invalid query does not throw (browsers report `media: "not all"`, `matched: false`). |
+
+`query` is the only input, declared in `wcBindable.inputs` with `attribute: "query"`. Property assignment before the element is upgraded is picked up on connect (property upgrade).
+
+## Observable Properties (outputs)
+
+| Property    | Event                   | Semantics | Description |
+| ----------- | ----------------------- | --------- | ----------- |
+| `matched`   | `wcs-media-query:change` | `state`  | `MediaQueryList.matches`. `false` whenever there is no live list (unsupported, empty `query`, or a `matchMedia` call that threw). |
+| `media`     | `wcs-media-query:change` | `state`  | The browser-normalized `MediaQueryList.media` string (`"not all"` for an invalid query); `""` when there is no list. |
+| `supported` | `wcs-media-query:change` | `state`  | `true` when `matchMedia` is a function in this environment, resolved on every subscription (never cached at construction). |
+
+All three derive from the single `wcs-media-query:change` event (a full snapshot `{ matched, media, supported }`), so a query change that flips `media` and `matched` together arrives as one consistent update. Values are primitives; there are no live handles or owned objects to release.
+
+## Commands
+
+**None.** A `MediaQueryList` has no action to invoke. `<wcs-media-query>` is a pure monitor.
+
+## Notes & limitations
+
+- **One tag, one query.** Compose several `<wcs-media-query>` elements for several queries; a `queries` array would break the "one event plus derived getters" shape every node shares.
+- **The initial snapshot *event* misses bindings, but the value still arrives.** The first `wcs-media-query:change` fires synchronously during `connectedCallback` — before `@wcstack/state` attaches its binding listeners — and events are not replayed to late subscribers. The value is not lost, because every observable here is output-only, which makes the default binding authority `element`: the binding reads the property directly when it attaches (directional initial sync). Only with `enableDirectionalInitialSync: false` do you need a manual `$connectedCallback` + `whenDefined` pull.
+- **Generation guard.** Subscribing is synchronous, but a query change *replaces* a subscription. Each subscription's `change` listener captures a generation and ignores events once a newer subscription exists, so a `MediaQueryList` whose `removeEventListener` misbehaves can never write the old query's value over the new one's. See `docs/media-query-tag-design.md` §6.
+- **Old Safari.** If the list lacks `addEventListener`, the deprecated `addListener` / `removeListener` pair is used; if it has neither, only the snapshot taken at subscription time is reported.
+- **Reconnect re-subscribes.** Removing and re-inserting the element tears down the listener on disconnect and re-establishes it (for the current `query`) on reconnect.
+- **SSR (`@wcstack/server`).** Declares `static hasConnectedCallbackPromise = true` and exposes `connectedCallbackPromise`; since `observe()` is synchronous this promise settles immediately. Without a `matchMedia` (Node), `supported` and `matched` are `false` and `media` is `""`.
+- **Same-value guard.** A field-by-field comparison suppresses a redundant dispatch — a legacy `addListener` double-fire, or re-subscribing to an equivalent query the browser normalizes to the same `media`.
+
+## CSS styling with `:state()`
+
+`<wcs-media-query>` reflects two boolean output states onto its
+[`ElementInternals` `CustomStateSet`](https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet),
+so you can style from CSS with the `:state()` pseudo-class — no `data-wcs`
+binding or class toggling required.
+
+| State | On when |
+|-------|---------|
+| `matched` | `wcs-media-query:change` fires with `matched === true` |
+| `supported` | `wcs-media-query:change` fires with `supported === true` |
+
+`media` is a string and is not reflected.
+
+```css
+/* Sibling-driven theming without JS glue */
+wcs-media-query:state(matched) ~ main { color-scheme: dark; }
+body:has(wcs-media-query:not(:state(supported))) .needs-js-media { display: none; }
+```
+
+Unlike attributes or classes, `:state()` cannot be written from outside the
+element, so there is no risk of confusing this output state with an input.
+
+**Browser support** (`:state(x)` syntax): Chrome/Edge 125+, Safari 17.4+,
+Firefox 126+. In older browsers the states are simply never set — `:state()`
+selectors never match, but `<wcs-media-query>` itself keeps working normally
+(graceful degradation, never-throw).
+
+**SSR**: `:state()` cannot be serialized into HTML, so server-rendered markup
+never carries these states on first paint (`@wcstack/server` is unaffected).
+If you need to style the pre-hydration gap, pair your rule with
+`wcs-media-query:not(:defined)` instead.
+
+### Debugging
+
+Custom states are invisible in DevTools' Elements panel and `attachInternals()`
+cannot be called twice, so there is no console way to inspect them directly.
+Two debug-only aids are provided for that:
+
+- `el.debugStates` — a **snapshot** array of the currently-on state names
+  (e.g. `["matched", "supported"]`). It is not part of `wc-bindable` (not a bind
+  target) and its shape is not a guaranteed contract — use it for debugging only.
+- The `debug-states` attribute (opt-in, default off) mirrors state changes
+  onto `data-wcs-state-matched` / `data-wcs-state-supported` attributes on
+  the element, so the Elements panel highlights them as they toggle:
+
+  ```html
+  <wcs-media-query query="(max-width: 600px)" debug-states></wcs-media-query>
+  ```
+
+**Write your CSS against `:state()`, not `data-wcs-state-*`.** The mirrored
+attributes exist purely to make state changes visible while debugging with
+DevTools open; they are not a supported styling hook.
+
+## Headless usage (`MediaQueryCore`)
+
+The Core has no DOM dependency and can be used directly with `bind()` from `@wc-bindable/core`:
+
+```typescript
+import { MediaQueryCore } from "@wcstack/media-query";
+
+const mq = new MediaQueryCore();
+mq.addEventListener("wcs-media-query:change", (e) => {
+  console.log((e as CustomEvent).detail); // { matched, media, supported }
+});
+
+mq.observe("(prefers-color-scheme: dark)"); // synchronous — no promise to await for data
+console.log(mq.matched);
+
+mq.observe("(max-width: 600px)");            // switch query: old list released, new one subscribed
+
+// later, when done:
+mq.dispose();                                 // detach the live `change` listener
+```
+
+Constructor: `new MediaQueryCore(target?, { matchMedia? })`. `target` is the `EventTarget` events are dispatched to (the Core itself when omitted); `matchMedia` injects the function to call instead of resolving `globalThis.matchMedia` at call time — useful in tests and non-window hosts. The lifecycle is manual: `observe(query)` / `dispose()`.
+
+The structural Core surface is normative across wcstack IO nodes ([async-io-node-guidelines §3.9](../../docs/async-io-node-guidelines.md)); to bind it into signals with no element at all, see [@wcstack/signals — Binding a Core directly](../signals/README.md#binding-a-core-directly-no-element).
+
+## License
+
+MIT

package/dist/auto.min.js

@@ -0,0 +1,2 @@
+const e={tagNames:{mediaQuery:"wcs-media-query"}},t=Object.freeze({matched:!1,media:"",supported:!1}),s=Object.freeze({matched:!1,media:"",supported:!0});class n extends EventTarget{static wcBindable={protocol:"wc-bindable",version:1,properties:[{name:"matched",event:"wcs-media-query:change",semantics:"state",getter:e=>e.detail.matched},{name:"media",event:"wcs-media-query:change",semantics:"state",getter:e=>e.detail.media},{name:"supported",event:"wcs-media-query:change",semantics:"state",getter:e=>e.detail.supported}],commands:[]};_target;_snapshot=t;_query="";_unsubscribe=null;_subscribed=!1;_gen=0;_injectedMatchMedia;_ready=Promise.resolve();constructor(e,t){super(),this._target=e??this,this._injectedMatchMedia=t?.matchMedia??null}get ready(){return this._ready}get query(){return this._query}get matched(){return this._snapshot.matched}get media(){return this._snapshot.media}get supported(){return this._snapshot.supported}observe(e=this._query){return this._subscribed&&e===this._query||(this._teardown(),this._query=e,this._subscribed=!0,this._subscribe(e)),this._ready}dispose(){this._subscribed=!1,this._teardown()}_resolveMatchMedia(){if(null!==this._injectedMatchMedia)return this._injectedMatchMedia;const e=globalThis;return"function"==typeof e.matchMedia?t=>e.matchMedia(t):null}_subscribe(e){const n=++this._gen,i=this._resolveMatchMedia();if(null===i)return void this._apply(t);if(""===e)return void this._apply(s);let r=null;try{r=i(e);const t=()=>{n===this._gen&&this._apply(this._read(r))};this._unsubscribe=function(e,t){if("function"==typeof e.addEventListener&&"function"==typeof e.removeEventListener)return e.addEventListener("change",t),()=>e.removeEventListener("change",t);if("function"==typeof e.addListener&&"function"==typeof e.removeListener)return e.addListener(t),()=>e.removeListener(t);return()=>{}}(r,t)}catch{r=null,this._unsubscribe=null}this._apply(null===r?s:this._read(r))}_teardown(){if(this._gen++,null!==this._unsubscribe){const e=this._unsubscribe;this._unsubscribe=null;try{e()}catch{}}}_read(e){return{matched:!0===e.matches,media:"string"==typeof e.media?e.media:"",supported:!0}}_apply(e){const t=this._snapshot;t.matched===e.matched&&t.media===e.media&&t.supported===e.supported||(this._snapshot=e,this._target.dispatchEvent(new CustomEvent("wcs-media-query:change",{detail:e,bubbles:!0})))}}function i(e,t){let s=Object.getPrototypeOf(e);for(;null!==s;){const e=Object.getOwnPropertyDescriptor(s,t);if(void 0!==e)return"function"==typeof e.get||"function"==typeof e.set;s=Object.getPrototypeOf(s)}return!1}class r extends HTMLElement{static hasConnectedCallbackPromise=!0;static wcBindable={...n.wcBindable,inputs:[{name:"query",attribute:"query"}],commands:n.wcBindable.commands};static get observedAttributes(){return["query"]}_core;_connectedCallbackPromise=Promise.resolve();_internals=null;constructor(){super(),this._core=new n(this),this._internals=this._initInternals(),this._wireStates({"wcs-media-query:change":e=>({matched:!0===e.matched,supported:!0===e.supported})})}get debugStates(){return this._internals?[...this._internals.states]:[]}_initInternals(){try{if("function"!=typeof this.attachInternals)return null;const e=this.attachInternals();return e.states.add("wcs-probe"),e.states.delete("wcs-probe"),e}catch{return null}}_wireStates(e){if(null===this._internals)return;const t=this._internals.states;for(const[s,n]of Object.entries(e))this.addEventListener(s,e=>{const s=this.hasAttribute("debug-states");for(const[i,r]of Object.entries(n(e.detail))){try{r?t.add(i):t.delete(i)}catch{}s&&this.toggleAttribute(`data-wcs-state-${i}`,r)}})}get query(){return this.getAttribute("query")??""}set query(e){this.setAttribute("query",e)}get matched(){return this._core.matched}get media(){return this._core.media}get supported(){return this._core.supported}get connectedCallbackPromise(){return this._connectedCallbackPromise}attributeChangedCallback(e,t,s){"query"===e&&this.isConnected&&this._core.observe(s??"")}connectedCallback(){!function(e){const t=e.constructor?.wcBindable,s=t?.inputs;if(void 0!==s)for(const t of s){const s=t.name;if(!Object.prototype.hasOwnProperty.call(e,s))continue;if(!i(e,s))continue;const n=e,r=n[s];delete n[s],n[s]=r}}(this),this.style.display="none",this._connectedCallbackPromise=this._core.observe(this.query)}disconnectedCallback(){this._core.dispose()}}var a;!function(t=customElements){t.get(e.tagNames.mediaQuery)||t.define(e.tagNames.mediaQuery,r)}(a);
+//# sourceMappingURL=auto.min.js.map

package/dist/auto.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"auto.min.js","sources":["../src/config.ts","../src/core/MediaQueryCore.ts","../src/protocol/upgradeProperties.ts","../src/components/MediaQuery.ts","../src/bootstrapMediaQuery.ts","../src/registerComponents.ts"],"sourcesContent":["import { IConfig, IWritableConfig } from \"./types.js\";\r\n\r\ninterface IInternalConfig extends IConfig {\r\n  tagNames: {\r\n    mediaQuery: string;\r\n  };\r\n}\r\n\r\nconst _config: IInternalConfig = {\r\n  tagNames: {\r\n    mediaQuery: \"wcs-media-query\",\r\n  },\r\n};\r\n\r\nfunction deepFreeze<T>(obj: T): T {\r\n  if (obj === null || typeof obj !== \"object\") return obj;\r\n  Object.freeze(obj);\r\n  for (const key of Object.keys(obj)) {\r\n    deepFreeze((obj as Record<string, unknown>)[key]);\r\n  }\r\n  return obj;\r\n}\r\n\r\nfunction deepClone<T>(obj: T): T {\r\n  if (obj === null || typeof obj !== \"object\") return obj;\r\n  const clone: Record<string, unknown> = {};\r\n  for (const key of Object.keys(obj)) {\r\n    clone[key] = deepClone((obj as Record<string, unknown>)[key]);\r\n  }\r\n  return clone as T;\r\n}\r\n\r\nlet frozenConfig: IConfig | null = null;\r\n\r\nexport const config: IConfig = _config as IConfig;\r\n\r\nexport function getConfig(): IConfig {\r\n  if (!frozenConfig) {\r\n    frozenConfig = deepFreeze(deepClone(_config));\r\n  }\r\n  return frozenConfig;\r\n}\r\n\r\nexport function setConfig(partialConfig: IWritableConfig): void {\r\n  if (partialConfig.tagNames) {\r\n    Object.assign(_config.tagNames, partialConfig.tagNames);\r\n  }\r\n  frozenConfig = null;\r\n}\r\n","import {\r\n  IWcBindable, WcsMatchMedia, WcsMediaQueryCoreOptions, WcsMediaQueryList, WcsMediaQuerySnapshot,\r\n} from \"../types.js\";\r\n\r\nconst UNSUPPORTED_SNAPSHOT: WcsMediaQuerySnapshot = Object.freeze({\r\n  matched: false,\r\n  media: \"\",\r\n  supported: false,\r\n});\r\n\r\n// \"matchMedia exists but there is nothing to watch\": an empty query, or a\r\n// matchMedia call that threw. Same shape as UNSUPPORTED_SNAPSHOT except that\r\n// `supported` stays honest about the API being present.\r\nconst IDLE_SNAPSHOT: WcsMediaQuerySnapshot = Object.freeze({\r\n  matched: false,\r\n  media: \"\",\r\n  supported: true,\r\n});\r\n\r\n/**\r\n * Headless media-query primitive. A thin, framework-agnostic wrapper around\r\n * `window.matchMedia` exposed through the wc-bindable protocol.\r\n *\r\n * `observe(query)` subscribes to one `MediaQueryList` and republishes its\r\n * `matches` / `media` as `matched` / `media` state; a different query while subscribed tears the\r\n * old list down and subscribes to the new one. Subscribing is synchronous, but\r\n * — unlike `@wcstack/network` — this Core does keep a `_gen` generation guard\r\n * (§3.4): each subscription's `change` listener captures the generation it was\r\n * created under and bails when it is stale, so a `MediaQueryList` whose\r\n * `removeEventListener` / `removeListener` misbehaves can never write the old\r\n * query's `matched` over the new query's (docs/media-query-tag-design.md §6).\r\n *\r\n * `matchMedia` is universally available in browsers; `supported === false` is\r\n * the non-browser case (SSR, workers) rather than a browser quirk.\r\n */\r\nexport class MediaQueryCore extends EventTarget {\r\n  static wcBindable: IWcBindable = {\r\n    protocol: \"wc-bindable\",\r\n    version: 1,\r\n    properties: [\r\n      { name: \"matched\", event: \"wcs-media-query:change\", semantics: \"state\", getter: (e: Event) => (e as CustomEvent).detail.matched },\r\n      { name: \"media\", event: \"wcs-media-query:change\", semantics: \"state\", getter: (e: Event) => (e as CustomEvent).detail.media },\r\n      { name: \"supported\", event: \"wcs-media-query:change\", semantics: \"state\", getter: (e: Event) => (e as CustomEvent).detail.supported },\r\n    ],\r\n    // Pure monitor: a MediaQueryList has no action to invoke.\r\n    //\r\n    // `matched`, not `matches`: `Element.prototype.matches(selector)` exists on\r\n    // every element, and a wc-bindable property name is read straight off the\r\n    // Shell — a boolean `matches` would shadow the platform method\r\n    // (docs/media-query-tag-design.md §2.1).\r\n    commands: [],\r\n  };\r\n\r\n  private _target: EventTarget;\r\n  private _snapshot: WcsMediaQuerySnapshot = UNSUPPORTED_SNAPSHOT;\r\n\r\n  // The query currently subscribed (or last requested). \"\" means \"nothing to watch\".\r\n  private _query = \"\";\r\n\r\n  // Detaches the live `change` listener of the current subscription, if any.\r\n  private _unsubscribe: (() => void) | null = null;\r\n\r\n  // True between observe() and dispose(). Guards observe() so a redundant call\r\n  // with the same query does not re-subscribe; dispose() resets it.\r\n  private _subscribed = false;\r\n\r\n  // Generation guard (§3.4). Bumped by every (re)subscription and by dispose().\r\n  // A `change` listener captures its generation and ignores the event once a\r\n  // newer subscription exists — see the class docs for why this is kept even\r\n  // though subscribing itself is synchronous.\r\n  private _gen = 0;\r\n\r\n  // Injected matchMedia (tests / non-window hosts). `null` = resolve\r\n  // `globalThis.matchMedia` at call time (§3.7).\r\n  private _injectedMatchMedia: WcsMatchMedia | null;\r\n\r\n  // SSR (§3.8): no asynchronous probe to await — observe() completes\r\n  // synchronously, so readiness is immediate.\r\n  private _ready: Promise<void> = Promise.resolve();\r\n\r\n  constructor(target?: EventTarget, options?: WcsMediaQueryCoreOptions) {\r\n    super();\r\n    this._target = target ?? this;\r\n    this._injectedMatchMedia = options?.matchMedia ?? null;\r\n  }\r\n\r\n  get ready(): Promise<void> {\r\n    return this._ready;\r\n  }\r\n\r\n  get query(): string {\r\n    return this._query;\r\n  }\r\n\r\n  get matched(): boolean {\r\n    return this._snapshot.matched;\r\n  }\r\n\r\n  get media(): string {\r\n    return this._snapshot.media;\r\n  }\r\n\r\n  get supported(): boolean {\r\n    return this._snapshot.supported;\r\n  }\r\n\r\n  // Lifecycle (§3.5). Idempotent: observe() with the query already subscribed\r\n  // is a no-op (no double listener, no redundant dispatch). A different query\r\n  // re-subscribes (dispose-then-observe semantics in one call). Omitting the\r\n  // argument keeps the current query — the reconnect case for the Shell.\r\n  // Synchronous overall (no probe to await), so the returned promise is only\r\n  // for API uniformity with other IO nodes.\r\n  observe(query: string = this._query): Promise<void> {\r\n    if (this._subscribed && query === this._query) {\r\n      return this._ready;\r\n    }\r\n    this._teardown();\r\n    this._query = query;\r\n    this._subscribed = true;\r\n    this._subscribe(query);\r\n    return this._ready;\r\n  }\r\n\r\n  dispose(): void {\r\n    this._subscribed = false;\r\n    this._teardown();\r\n  }\r\n\r\n  // API resolution is call-time, never cached (§3.7): lets tests install/remove\r\n  // globalThis.matchMedia freely and lets a non-browser host be detected\r\n  // correctly on every observe(). Called as a method of globalThis so the\r\n  // native implementation keeps its `this` (calling it unbound throws).\r\n  private _resolveMatchMedia(): WcsMatchMedia | null {\r\n    if (this._injectedMatchMedia !== null) {\r\n      return this._injectedMatchMedia;\r\n    }\r\n    const g = globalThis as { matchMedia?: WcsMatchMedia };\r\n    return typeof g.matchMedia === \"function\" ? (q: string) => g.matchMedia!(q) : null;\r\n  }\r\n\r\n  private _subscribe(query: string): void {\r\n    const gen = ++this._gen;\r\n    const matchMedia = this._resolveMatchMedia();\r\n    if (matchMedia === null) {\r\n      this._apply(UNSUPPORTED_SNAPSHOT);\r\n      return;\r\n    }\r\n    if (query === \"\") {\r\n      this._apply(IDLE_SNAPSHOT);\r\n      return;\r\n    }\r\n    // never-throw (§3.6): browsers do not throw on an invalid query string\r\n    // (they return `media: \"not all\"`), but a hostile host or a broken\r\n    // MediaQueryList polyfill might — that must not kill observe().\r\n    let list: WcsMediaQueryList | null = null;\r\n    try {\r\n      list = matchMedia(query);\r\n      const onChange = (): void => {\r\n        if (gen !== this._gen) return; // stale subscription — never write\r\n        this._apply(this._read(list!));\r\n      };\r\n      this._unsubscribe = attachChange(list, onChange);\r\n    } catch {\r\n      list = null;\r\n      this._unsubscribe = null;\r\n    }\r\n    this._apply(list === null ? IDLE_SNAPSHOT : this._read(list));\r\n  }\r\n\r\n  private _teardown(): void {\r\n    this._gen++;\r\n    if (this._unsubscribe !== null) {\r\n      const unsubscribe = this._unsubscribe;\r\n      this._unsubscribe = null;\r\n      try {\r\n        unsubscribe();\r\n      } catch {\r\n        // never-throw: a list that refuses to detach is already neutralized\r\n        // by the generation bump above.\r\n      }\r\n    }\r\n  }\r\n\r\n  private _read(list: WcsMediaQueryList): WcsMediaQuerySnapshot {\r\n    return {\r\n      matched: list.matches === true,\r\n      media: typeof list.media === \"string\" ? list.media : \"\",\r\n      supported: true,\r\n    };\r\n  }\r\n\r\n  // Same-value guard (§3.3 MUST): the native `change` event already fires only\r\n  // when `matches` flips, but this Core still verifies field-by-field before\r\n  // dispatching — a re-subscription to an equivalent query, or a legacy\r\n  // `addListener` double-fire, must not produce a redundant event.\r\n  private _apply(next: WcsMediaQuerySnapshot): void {\r\n    const prev = this._snapshot;\r\n    if (\r\n      prev.matched === next.matched &&\r\n      prev.media === next.media &&\r\n      prev.supported === next.supported\r\n    ) {\r\n      return;\r\n    }\r\n    this._snapshot = next;\r\n    this._target.dispatchEvent(new CustomEvent(\"wcs-media-query:change\", {\r\n      detail: next,\r\n      // Family-wide MUST (async-io-node-guidelines.md §3.3): the event bubbles\r\n      // from the Shell element so document-level consumers can delegate.\r\n      bubbles: true,\r\n    }));\r\n  }\r\n}\r\n\r\n// Subscribe to a MediaQueryList's `change` with whichever listener API it has.\r\n// Modern engines: EventTarget-style. Old Safari (< 14): the deprecated\r\n// addListener / removeListener pair. Neither: no live updates — the snapshot\r\n// taken at observe() is all there is (a static polyfill, for instance).\r\n// Returns the matching detach function.\r\nfunction attachChange(list: WcsMediaQueryList, listener: () => void): () => void {\r\n  if (typeof list.addEventListener === \"function\" && typeof list.removeEventListener === \"function\") {\r\n    list.addEventListener(\"change\", listener);\r\n    return () => list.removeEventListener!(\"change\", listener);\r\n  }\r\n  if (typeof list.addListener === \"function\" && typeof list.removeListener === \"function\") {\r\n    list.addListener(listener);\r\n    return () => list.removeListener!(listener);\r\n  }\r\n  return () => {};\r\n}\r\n","// ===========================================================================\r\n// AUTO-GENERATED FILE - DO NOT EDIT.\r\n// Generated from /protocol/upgrade-properties.ts by scripts/sync-protocol-types.mjs.\r\n// Run `node scripts/sync-protocol-types.mjs` after editing the source.\r\n// ===========================================================================\r\n\r\n// custom element の property upgrade — `static wcBindable.inputs` に宣言した入力のうち、\r\n// 要素が upgrade される前に代入された own データプロパティを取り込み直す。\r\n//\r\n// なぜ必要か:\r\n//   未定義タグの要素は素の HTMLElement なので、`el.url = \"...\"` は own データプロパティを作る。\r\n//   upgrade 後にクラスの accessor が prototype へ入っても own プロパティが優先されるため、\r\n//   setter は二度と呼ばれず、値は要素へ届かないまま消える（エラーも警告も出ない）。\r\n//   常にプロパティ代入を行う framework（Angular の `[prop]`、Lit の `.prop=`、\r\n//   Solid の `prop:`、Vue の `.prop` 修飾子）× 遅延定義（autoloader / CDN / code-split）で\r\n//   常態的に起きる。docs/architecture-hardening/13-framework-adapter-binding-constraints.md §1.2。\r\n//\r\n// 安全側の判定:\r\n//   own プロパティがあっても、prototype チェーンに accessor が無ければ「シャドウ」ではなく\r\n//   その own プロパティ自体が正規の格納先なので触らない（public class field を壊さない）。\r\n//\r\n// SINGLE SOURCE OF TRUTH: edit only this file (/protocol/upgrade-properties.ts), then run\r\n// `node scripts/sync-protocol-types.mjs` to regenerate the per-package copies\r\n// (packages/<pkg>/src/protocol/upgradeProperties.ts). Those copies are generated — do not edit them.\r\nimport { IWcBindable } from \"./wcBindable.js\";\r\n\r\nfunction hasAccessorOnPrototype(target: object, name: string): boolean {\r\n  let proto = Object.getPrototypeOf(target);\r\n  while (proto !== null) {\r\n    const descriptor = Object.getOwnPropertyDescriptor(proto, name);\r\n    if (descriptor !== undefined) {\r\n      return typeof descriptor.get === \"function\" || typeof descriptor.set === \"function\";\r\n    }\r\n    proto = Object.getPrototypeOf(proto);\r\n  }\r\n  return false;\r\n}\r\n\r\n/**\r\n * `connectedCallback` の先頭で呼ぶ。宣言済み input のうち upgrade 前の代入で\r\n * accessor をシャドウしている own プロパティを、delete → 再代入で setter に通し直す。\r\n *\r\n * - 冪等: 再代入は accessor を通るので own プロパティは残らず、2 回目以降は no-op。\r\n * - 宣言に `inputs` が無い要素、`wcBindable` を持たない要素では何もしない。\r\n * - 値の意味は変えない。今まで捨てられていた代入が届くようになる一方向の変化。\r\n */\r\nexport function upgradeProperties(element: object): void {\r\n  const declaration = (element as { constructor?: { wcBindable?: IWcBindable } }).constructor?.wcBindable;\r\n  const inputs = declaration?.inputs;\r\n  if (inputs === undefined) return;\r\n  for (const input of inputs) {\r\n    const name = input.name;\r\n    if (!Object.prototype.hasOwnProperty.call(element, name)) continue;\r\n    if (!hasAccessorOnPrototype(element, name)) continue;\r\n    const record = element as Record<string, unknown>;\r\n    const value = record[name];\r\n    delete record[name];\r\n    record[name] = value;\r\n  }\r\n}\r\n","import { IWcBindable } from \"../types.js\";\r\nimport { MediaQueryCore } from \"../core/MediaQueryCore.js\";\r\nimport { upgradeProperties } from \"../protocol/upgradeProperties.js\";\r\n\r\n/**\r\n * `<wcs-media-query query=\"(prefers-color-scheme: dark)\">` — declarative\r\n * `matchMedia` monitor.\r\n *\r\n * One attribute (`query`), three outputs (`matched` / `media` / `supported`),\r\n * no commands. Changing `query` while connected re-subscribes the Core to the\r\n * new MediaQueryList (docs/media-query-tag-design.md §7).\r\n */\r\nexport class WcsMediaQuery extends HTMLElement {\r\n  // SSR (§4.4): observe() completes synchronously, but the Shell still exposes\r\n  // connectedCallbackPromise so SSR (@wcstack/server render.ts) can await it\r\n  // uniformly across all IO nodes before snapshotting the HTML.\r\n  static hasConnectedCallbackPromise = true;\r\n\r\n  static wcBindable: IWcBindable = {\r\n    ...MediaQueryCore.wcBindable,\r\n    // Shell-level settable surface: the media query string, mirrored to the\r\n    // `query` attribute (idempotent reflect, so a binder writing through\r\n    // inputs[].attribute is safe).\r\n    inputs: [\r\n      { name: \"query\", attribute: \"query\" },\r\n    ],\r\n    // Core の commands をそのまま継承（単一情報源）。network と同型。\r\n    commands: MediaQueryCore.wcBindable.commands,\r\n  };\r\n\r\n  // `query` is the only attribute worth re-subscribing for; it is the whole\r\n  // configuration of this node.\r\n  static get observedAttributes(): string[] { return [\"query\"]; }\r\n\r\n  private _core: MediaQueryCore;\r\n  private _connectedCallbackPromise: Promise<void> = Promise.resolve();\r\n  private _internals: ElementInternals | null = null;\r\n\r\n  constructor() {\r\n    super();\r\n    this._core = new MediaQueryCore(this);\r\n    this._internals = this._initInternals();\r\n    this._wireStates({\r\n      \"wcs-media-query:change\": (d) => ({\r\n        matched: d.matched === true,\r\n        supported: d.supported === true,\r\n      }),\r\n    });\r\n  }\r\n\r\n  // CSS state reflection (:state()) — debug-only snapshot getter. NOT part of\r\n  // wc-bindable (not a bind target); see README \"CSS styling with :state()\".\r\n  // MUST NOT return the live CustomStateSet (that would let callers write\r\n  // states from outside, defeating the point of :state() being read-only).\r\n  get debugStates(): string[] {\r\n    return this._internals ? [...this._internals.states] : [];\r\n  }\r\n\r\n  private _initInternals(): ElementInternals | null {\r\n    // never-throw (async-io-node-guidelines.md §3.6): attachInternals is absent\r\n    // in happy-dom / older environments, and pre-125 Chromium rejects\r\n    // non-dashed state names from states.add() (probed and discarded here).\r\n    // Either case silently disables reflection — the component still works,\r\n    // it just doesn't expose :state() selectors.\r\n    try {\r\n      if (typeof this.attachInternals !== \"function\") return null;\r\n      const internals = this.attachInternals();\r\n      internals.states.add(\"wcs-probe\");\r\n      internals.states.delete(\"wcs-probe\");\r\n      return internals;\r\n    } catch {\r\n      return null;\r\n    }\r\n  }\r\n\r\n  private _wireStates(map: Record<string, (detail: any) => Record<string, boolean>>): void {\r\n    if (this._internals === null) return;\r\n    const states = this._internals.states;\r\n    for (const [event, toStates] of Object.entries(map)) {\r\n      this.addEventListener(event, (e) => {\r\n        const debug = this.hasAttribute(\"debug-states\");\r\n        for (const [name, on] of Object.entries(toStates((e as CustomEvent).detail))) {\r\n          try {\r\n            if (on) { states.add(name); } else { states.delete(name); }\r\n          } catch { /* never-throw */ }\r\n          if (debug) this.toggleAttribute(`data-wcs-state-${name}`, on);\r\n        }\r\n      });\r\n    }\r\n  }\r\n\r\n  // --- Attribute accessors ---\r\n\r\n  get query(): string {\r\n    return this.getAttribute(\"query\") ?? \"\";\r\n  }\r\n\r\n  set query(value: string) {\r\n    this.setAttribute(\"query\", value);\r\n  }\r\n\r\n  // --- Core delegated getters ---\r\n\r\n  get matched(): boolean {\r\n    return this._core.matched;\r\n  }\r\n\r\n  get media(): string {\r\n    return this._core.media;\r\n  }\r\n\r\n  get supported(): boolean {\r\n    return this._core.supported;\r\n  }\r\n\r\n  get connectedCallbackPromise(): Promise<void> {\r\n    return this._connectedCallbackPromise;\r\n  }\r\n\r\n  // --- Lifecycle ---\r\n\r\n  attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void {\r\n    // Re-subscribe on a live query change. Removing the attribute (newValue\r\n    // null) is a real change too — it means \"watch nothing\", so `matched`\r\n    // drops to false instead of lingering on the old query's value. Before\r\n    // connect the attribute is simply read by connectedCallback.\r\n    if (name === \"query\" && this.isConnected) {\r\n      this._core.observe(newValue ?? \"\");\r\n    }\r\n  }\r\n\r\n  connectedCallback(): void {\r\n    // upgrade 前に代入された input を取り込み直す（doc 13 §1.2 / Phase A1）\r\n    upgradeProperties(this);\r\n    this.style.display = \"none\";\r\n    this._connectedCallbackPromise = this._core.observe(this.query);\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this._core.dispose();\r\n  }\r\n}\r\n","import { setConfig } from \"./config.js\";\r\nimport { registerComponents } from \"./registerComponents.js\";\r\nimport { IWritableConfig } from \"./types.js\";\r\n\r\nexport function bootstrapMediaQuery(userConfig?: IWritableConfig, registry?: CustomElementRegistry): void {\r\n  if (userConfig) {\r\n    setConfig(userConfig);\r\n  }\r\n  registerComponents(registry);\r\n}\r\n","import { WcsMediaQuery } from \"./components/MediaQuery.js\";\r\nimport { config } from \"./config.js\";\r\n\r\n/**\r\n * Register this package's tags. Pass a scoped `CustomElementRegistry` to define\r\n * them for a single shadow tree -- scoped registries do not inherit the global\r\n * one, so a tree using one needs its own definitions.\r\n */\r\nexport function registerComponents(registry: CustomElementRegistry = customElements): void {\r\n  if (!registry.get(config.tagNames.mediaQuery)) {\r\n    registry.define(config.tagNames.mediaQuery, WcsMediaQuery);\r\n  }\r\n}\r\n"],"names":["config","tagNames","mediaQuery","UNSUPPORTED_SNAPSHOT","Object","freeze","matched","media","supported","IDLE_SNAPSHOT","MediaQueryCore","EventTarget","static","protocol","version","properties","name","event","semantics","getter","e","detail","commands","_target","_snapshot","_query","_unsubscribe","_subscribed","_gen","_injectedMatchMedia","_ready","Promise","resolve","constructor","target","options","super","this","matchMedia","ready","query","observe","_teardown","_subscribe","dispose","_resolveMatchMedia","g","globalThis","q","gen","_apply","list","onChange","_read","listener","addEventListener","removeEventListener","addListener","removeListener","attachChange","unsubscribe","matches","next","prev","dispatchEvent","CustomEvent","bubbles","hasAccessorOnPrototype","proto","getPrototypeOf","descriptor","getOwnPropertyDescriptor","undefined","get","set","WcsMediaQuery","HTMLElement","wcBindable","inputs","attribute","observedAttributes","_core","_connectedCallbackPromise","_internals","_initInternals","_wireStates","d","debugStates","states","attachInternals","internals","add","delete","map","toStates","entries","debug","hasAttribute","on","toggleAttribute","getAttribute","value","setAttribute","connectedCallbackPromise","attributeChangedCallback","_oldValue","newValue","isConnected","connectedCallback","element","declaration","input","prototype","hasOwnProperty","call","record","upgradeProperties","style","display","disconnectedCallback","registry","customElements","define","registerComponents"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,191 @@
+/**
+ * Observation semantics of a `properties` entry.
+ *
+ *   "state"  — current value. A snapshot may cache it, and equality-based dedupe is safe.
+ *   "event"  — occurrence. Repeated identical payloads are distinct occurrences; never dedupe.
+ *   "handle" — live / opaque resource with its own lifecycle (e.g. MediaStream). Not
+ *              snapshot-safe and not necessarily serializable; consumers need an explicit
+ *              ref / callback surface rather than a value slot.
+ */
+type WcBindableSemantics = "state" | "event" | "handle";
+interface IWcBindableProperty {
+    readonly name: string;
+    readonly event: string;
+    readonly getter?: (event: Event) => any;
+    /**
+     * Optional, additive, forward-compatible. An absent value means **unspecified**, NOT
+     * "state": a reader that finds no `semantics` MUST keep the behavior it had before this
+     * field existed (deliver the update as-is; do not start deduping, caching or serializing
+     * on assumption). Only an explicit value licenses a reader to change its handling.
+     */
+    readonly semantics?: WcBindableSemantics;
+}
+interface IWcBindableInput {
+    readonly name: string;
+    readonly attribute?: string;
+}
+interface IWcBindableCommand {
+    readonly name: string;
+    readonly async?: boolean;
+}
+interface IWcBindable {
+    readonly protocol: "wc-bindable";
+    /** Integer protocol version. All versions >= 1 are core-compatible. */
+    readonly version: number;
+    readonly properties: readonly IWcBindableProperty[];
+    readonly inputs?: readonly IWcBindableInput[];
+    readonly commands?: readonly IWcBindableCommand[];
+}
+
+interface ITagNames {
+    readonly mediaQuery: string;
+}
+interface IWritableTagNames {
+    mediaQuery?: string;
+}
+interface IConfig {
+    readonly tagNames: ITagNames;
+}
+interface IWritableConfig {
+    tagNames?: IWritableTagNames;
+}
+
+/**
+ * The subset of `MediaQueryList` this node reads and subscribes to. Modern
+ * engines expose `addEventListener("change", …)`; old Safari (< 14) only has
+ * the deprecated `addListener` / `removeListener` pair, so both are optional
+ * here and the Core picks whichever exists (docs/media-query-tag-design.md §5).
+ */
+interface WcsMediaQueryList {
+    readonly matches: boolean;
+    readonly media: string;
+    addEventListener?(type: "change", listener: () => void): void;
+    removeEventListener?(type: "change", listener: () => void): void;
+    addListener?(listener: () => void): void;
+    removeListener?(listener: () => void): void;
+}
+/**
+ * Injectable `matchMedia` for MediaQueryCore. The default resolves
+ * `globalThis.matchMedia` at call time (§3.7); tests inject a fake whose
+ * `matches` and `change` dispatch they drive directly — happy-dom's
+ * MediaQueryList change delivery is not reliable enough to test against
+ * (the same precedent as `@wcstack/raf`'s reduced-motion gate).
+ */
+type WcsMatchMedia = (query: string) => WcsMediaQueryList;
+interface WcsMediaQueryCoreOptions {
+    matchMedia?: WcsMatchMedia;
+}
+/**
+ * A single snapshot of the subscribed `MediaQueryList`, or the "nothing to
+ * watch" default. `matched` (the list's `matches`) is `false` and `media` is `""` whenever there is
+ * no live list — `matchMedia` absent (`supported === false`), an empty query,
+ * or a `matchMedia` call that threw. `supported` answers only "is
+ * `matchMedia` a function here", resolved on every observe().
+ */
+interface WcsMediaQuerySnapshot {
+    matched: boolean;
+    media: string;
+    supported: boolean;
+}
+/**
+ * Value types for MediaQueryCore (headless) — the observable state properties.
+ * Use with `bind()` from a wc-bindable binding core for compile-time type checking.
+ *
+ * @example
+ * ```typescript
+ * const core = new MediaQueryCore();
+ * bind(core, (name: keyof WcsMediaQueryCoreValues, value) => { ... });
+ * ```
+ */
+type WcsMediaQueryCoreValues = WcsMediaQuerySnapshot;
+/**
+ * Value types for the Shell (`<wcs-media-query>`) — the Core's observable
+ * surface plus the one attribute-linked input, `query`.
+ */
+type WcsMediaQueryValues = WcsMediaQueryCoreValues & {
+    query: string;
+};
+
+declare function bootstrapMediaQuery(userConfig?: IWritableConfig, registry?: CustomElementRegistry): void;
+
+declare function getConfig(): IConfig;
+
+/**
+ * Headless media-query primitive. A thin, framework-agnostic wrapper around
+ * `window.matchMedia` exposed through the wc-bindable protocol.
+ *
+ * `observe(query)` subscribes to one `MediaQueryList` and republishes its
+ * `matches` / `media` as `matched` / `media` state; a different query while subscribed tears the
+ * old list down and subscribes to the new one. Subscribing is synchronous, but
+ * — unlike `@wcstack/network` — this Core does keep a `_gen` generation guard
+ * (§3.4): each subscription's `change` listener captures the generation it was
+ * created under and bails when it is stale, so a `MediaQueryList` whose
+ * `removeEventListener` / `removeListener` misbehaves can never write the old
+ * query's `matched` over the new query's (docs/media-query-tag-design.md §6).
+ *
+ * `matchMedia` is universally available in browsers; `supported === false` is
+ * the non-browser case (SSR, workers) rather than a browser quirk.
+ */
+declare class MediaQueryCore extends EventTarget {
+    static wcBindable: IWcBindable;
+    private _target;
+    private _snapshot;
+    private _query;
+    private _unsubscribe;
+    private _subscribed;
+    private _gen;
+    private _injectedMatchMedia;
+    private _ready;
+    constructor(target?: EventTarget, options?: WcsMediaQueryCoreOptions);
+    get ready(): Promise<void>;
+    get query(): string;
+    get matched(): boolean;
+    get media(): string;
+    get supported(): boolean;
+    observe(query?: string): Promise<void>;
+    dispose(): void;
+    private _resolveMatchMedia;
+    private _subscribe;
+    private _teardown;
+    private _read;
+    private _apply;
+}
+
+/**
+ * `<wcs-media-query query="(prefers-color-scheme: dark)">` — declarative
+ * `matchMedia` monitor.
+ *
+ * One attribute (`query`), three outputs (`matched` / `media` / `supported`),
+ * no commands. Changing `query` while connected re-subscribes the Core to the
+ * new MediaQueryList (docs/media-query-tag-design.md §7).
+ */
+declare class WcsMediaQuery extends HTMLElement {
+    static hasConnectedCallbackPromise: boolean;
+    static wcBindable: IWcBindable;
+    static get observedAttributes(): string[];
+    private _core;
+    private _connectedCallbackPromise;
+    private _internals;
+    constructor();
+    get debugStates(): string[];
+    private _initInternals;
+    private _wireStates;
+    get query(): string;
+    set query(value: string);
+    get matched(): boolean;
+    get media(): string;
+    get supported(): boolean;
+    get connectedCallbackPromise(): Promise<void>;
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "wcs-media-query": WcsMediaQuery;
+    }
+}
+
+export { MediaQueryCore, WcsMediaQuery, bootstrapMediaQuery, getConfig };
+export type { IWritableConfig, IWritableTagNames, WcsMatchMedia, WcsMediaQueryCoreOptions, WcsMediaQueryCoreValues, WcsMediaQueryList, WcsMediaQuerySnapshot, WcsMediaQueryValues };

package/dist/index.esm.js

@@ -0,0 +1,435 @@
+const _config = {
+    tagNames: {
+        mediaQuery: "wcs-media-query",
+    },
+};
+function deepFreeze(obj) {
+    if (obj === null || typeof obj !== "object")
+        return obj;
+    Object.freeze(obj);
+    for (const key of Object.keys(obj)) {
+        deepFreeze(obj[key]);
+    }
+    return obj;
+}
+function deepClone(obj) {
+    if (obj === null || typeof obj !== "object")
+        return obj;
+    const clone = {};
+    for (const key of Object.keys(obj)) {
+        clone[key] = deepClone(obj[key]);
+    }
+    return clone;
+}
+let frozenConfig = null;
+const config = _config;
+function getConfig() {
+    if (!frozenConfig) {
+        frozenConfig = deepFreeze(deepClone(_config));
+    }
+    return frozenConfig;
+}
+function setConfig(partialConfig) {
+    if (partialConfig.tagNames) {
+        Object.assign(_config.tagNames, partialConfig.tagNames);
+    }
+    frozenConfig = null;
+}
+
+const UNSUPPORTED_SNAPSHOT = Object.freeze({
+    matched: false,
+    media: "",
+    supported: false,
+});
+// "matchMedia exists but there is nothing to watch": an empty query, or a
+// matchMedia call that threw. Same shape as UNSUPPORTED_SNAPSHOT except that
+// `supported` stays honest about the API being present.
+const IDLE_SNAPSHOT = Object.freeze({
+    matched: false,
+    media: "",
+    supported: true,
+});
+/**
+ * Headless media-query primitive. A thin, framework-agnostic wrapper around
+ * `window.matchMedia` exposed through the wc-bindable protocol.
+ *
+ * `observe(query)` subscribes to one `MediaQueryList` and republishes its
+ * `matches` / `media` as `matched` / `media` state; a different query while subscribed tears the
+ * old list down and subscribes to the new one. Subscribing is synchronous, but
+ * — unlike `@wcstack/network` — this Core does keep a `_gen` generation guard
+ * (§3.4): each subscription's `change` listener captures the generation it was
+ * created under and bails when it is stale, so a `MediaQueryList` whose
+ * `removeEventListener` / `removeListener` misbehaves can never write the old
+ * query's `matched` over the new query's (docs/media-query-tag-design.md §6).
+ *
+ * `matchMedia` is universally available in browsers; `supported === false` is
+ * the non-browser case (SSR, workers) rather than a browser quirk.
+ */
+class MediaQueryCore extends EventTarget {
+    static wcBindable = {
+        protocol: "wc-bindable",
+        version: 1,
+        properties: [
+            { name: "matched", event: "wcs-media-query:change", semantics: "state", getter: (e) => e.detail.matched },
+            { name: "media", event: "wcs-media-query:change", semantics: "state", getter: (e) => e.detail.media },
+            { name: "supported", event: "wcs-media-query:change", semantics: "state", getter: (e) => e.detail.supported },
+        ],
+        // Pure monitor: a MediaQueryList has no action to invoke.
+        //
+        // `matched`, not `matches`: `Element.prototype.matches(selector)` exists on
+        // every element, and a wc-bindable property name is read straight off the
+        // Shell — a boolean `matches` would shadow the platform method
+        // (docs/media-query-tag-design.md §2.1).
+        commands: [],
+    };
+    _target;
+    _snapshot = UNSUPPORTED_SNAPSHOT;
+    // The query currently subscribed (or last requested). "" means "nothing to watch".
+    _query = "";
+    // Detaches the live `change` listener of the current subscription, if any.
+    _unsubscribe = null;
+    // True between observe() and dispose(). Guards observe() so a redundant call
+    // with the same query does not re-subscribe; dispose() resets it.
+    _subscribed = false;
+    // Generation guard (§3.4). Bumped by every (re)subscription and by dispose().
+    // A `change` listener captures its generation and ignores the event once a
+    // newer subscription exists — see the class docs for why this is kept even
+    // though subscribing itself is synchronous.
+    _gen = 0;
+    // Injected matchMedia (tests / non-window hosts). `null` = resolve
+    // `globalThis.matchMedia` at call time (§3.7).
+    _injectedMatchMedia;
+    // SSR (§3.8): no asynchronous probe to await — observe() completes
+    // synchronously, so readiness is immediate.
+    _ready = Promise.resolve();
+    constructor(target, options) {
+        super();
+        this._target = target ?? this;
+        this._injectedMatchMedia = options?.matchMedia ?? null;
+    }
+    get ready() {
+        return this._ready;
+    }
+    get query() {
+        return this._query;
+    }
+    get matched() {
+        return this._snapshot.matched;
+    }
+    get media() {
+        return this._snapshot.media;
+    }
+    get supported() {
+        return this._snapshot.supported;
+    }
+    // Lifecycle (§3.5). Idempotent: observe() with the query already subscribed
+    // is a no-op (no double listener, no redundant dispatch). A different query
+    // re-subscribes (dispose-then-observe semantics in one call). Omitting the
+    // argument keeps the current query — the reconnect case for the Shell.
+    // Synchronous overall (no probe to await), so the returned promise is only
+    // for API uniformity with other IO nodes.
+    observe(query = this._query) {
+        if (this._subscribed && query === this._query) {
+            return this._ready;
+        }
+        this._teardown();
+        this._query = query;
+        this._subscribed = true;
+        this._subscribe(query);
+        return this._ready;
+    }
+    dispose() {
+        this._subscribed = false;
+        this._teardown();
+    }
+    // API resolution is call-time, never cached (§3.7): lets tests install/remove
+    // globalThis.matchMedia freely and lets a non-browser host be detected
+    // correctly on every observe(). Called as a method of globalThis so the
+    // native implementation keeps its `this` (calling it unbound throws).
+    _resolveMatchMedia() {
+        if (this._injectedMatchMedia !== null) {
+            return this._injectedMatchMedia;
+        }
+        const g = globalThis;
+        return typeof g.matchMedia === "function" ? (q) => g.matchMedia(q) : null;
+    }
+    _subscribe(query) {
+        const gen = ++this._gen;
+        const matchMedia = this._resolveMatchMedia();
+        if (matchMedia === null) {
+            this._apply(UNSUPPORTED_SNAPSHOT);
+            return;
+        }
+        if (query === "") {
+            this._apply(IDLE_SNAPSHOT);
+            return;
+        }
+        // never-throw (§3.6): browsers do not throw on an invalid query string
+        // (they return `media: "not all"`), but a hostile host or a broken
+        // MediaQueryList polyfill might — that must not kill observe().
+        let list = null;
+        try {
+            list = matchMedia(query);
+            const onChange = () => {
+                if (gen !== this._gen)
+                    return; // stale subscription — never write
+                this._apply(this._read(list));
+            };
+            this._unsubscribe = attachChange(list, onChange);
+        }
+        catch {
+            list = null;
+            this._unsubscribe = null;
+        }
+        this._apply(list === null ? IDLE_SNAPSHOT : this._read(list));
+    }
+    _teardown() {
+        this._gen++;
+        if (this._unsubscribe !== null) {
+            const unsubscribe = this._unsubscribe;
+            this._unsubscribe = null;
+            try {
+                unsubscribe();
+            }
+            catch {
+                // never-throw: a list that refuses to detach is already neutralized
+                // by the generation bump above.
+            }
+        }
+    }
+    _read(list) {
+        return {
+            matched: list.matches === true,
+            media: typeof list.media === "string" ? list.media : "",
+            supported: true,
+        };
+    }
+    // Same-value guard (§3.3 MUST): the native `change` event already fires only
+    // when `matches` flips, but this Core still verifies field-by-field before
+    // dispatching — a re-subscription to an equivalent query, or a legacy
+    // `addListener` double-fire, must not produce a redundant event.
+    _apply(next) {
+        const prev = this._snapshot;
+        if (prev.matched === next.matched &&
+            prev.media === next.media &&
+            prev.supported === next.supported) {
+            return;
+        }
+        this._snapshot = next;
+        this._target.dispatchEvent(new CustomEvent("wcs-media-query:change", {
+            detail: next,
+            // Family-wide MUST (async-io-node-guidelines.md §3.3): the event bubbles
+            // from the Shell element so document-level consumers can delegate.
+            bubbles: true,
+        }));
+    }
+}
+// Subscribe to a MediaQueryList's `change` with whichever listener API it has.
+// Modern engines: EventTarget-style. Old Safari (< 14): the deprecated
+// addListener / removeListener pair. Neither: no live updates — the snapshot
+// taken at observe() is all there is (a static polyfill, for instance).
+// Returns the matching detach function.
+function attachChange(list, listener) {
+    if (typeof list.addEventListener === "function" && typeof list.removeEventListener === "function") {
+        list.addEventListener("change", listener);
+        return () => list.removeEventListener("change", listener);
+    }
+    if (typeof list.addListener === "function" && typeof list.removeListener === "function") {
+        list.addListener(listener);
+        return () => list.removeListener(listener);
+    }
+    return () => { };
+}
+
+// ===========================================================================
+// AUTO-GENERATED FILE - DO NOT EDIT.
+// Generated from /protocol/upgrade-properties.ts by scripts/sync-protocol-types.mjs.
+// Run `node scripts/sync-protocol-types.mjs` after editing the source.
+// ===========================================================================
+function hasAccessorOnPrototype(target, name) {
+    let proto = Object.getPrototypeOf(target);
+    while (proto !== null) {
+        const descriptor = Object.getOwnPropertyDescriptor(proto, name);
+        if (descriptor !== undefined) {
+            return typeof descriptor.get === "function" || typeof descriptor.set === "function";
+        }
+        proto = Object.getPrototypeOf(proto);
+    }
+    return false;
+}
+/**
+ * `connectedCallback` の先頭で呼ぶ。宣言済み input のうち upgrade 前の代入で
+ * accessor をシャドウしている own プロパティを、delete → 再代入で setter に通し直す。
+ *
+ * - 冪等: 再代入は accessor を通るので own プロパティは残らず、2 回目以降は no-op。
+ * - 宣言に `inputs` が無い要素、`wcBindable` を持たない要素では何もしない。
+ * - 値の意味は変えない。今まで捨てられていた代入が届くようになる一方向の変化。
+ */
+function upgradeProperties(element) {
+    const declaration = element.constructor?.wcBindable;
+    const inputs = declaration?.inputs;
+    if (inputs === undefined)
+        return;
+    for (const input of inputs) {
+        const name = input.name;
+        if (!Object.prototype.hasOwnProperty.call(element, name))
+            continue;
+        if (!hasAccessorOnPrototype(element, name))
+            continue;
+        const record = element;
+        const value = record[name];
+        delete record[name];
+        record[name] = value;
+    }
+}
+
+/**
+ * `<wcs-media-query query="(prefers-color-scheme: dark)">` — declarative
+ * `matchMedia` monitor.
+ *
+ * One attribute (`query`), three outputs (`matched` / `media` / `supported`),
+ * no commands. Changing `query` while connected re-subscribes the Core to the
+ * new MediaQueryList (docs/media-query-tag-design.md §7).
+ */
+class WcsMediaQuery extends HTMLElement {
+    // SSR (§4.4): observe() completes synchronously, but the Shell still exposes
+    // connectedCallbackPromise so SSR (@wcstack/server render.ts) can await it
+    // uniformly across all IO nodes before snapshotting the HTML.
+    static hasConnectedCallbackPromise = true;
+    static wcBindable = {
+        ...MediaQueryCore.wcBindable,
+        // Shell-level settable surface: the media query string, mirrored to the
+        // `query` attribute (idempotent reflect, so a binder writing through
+        // inputs[].attribute is safe).
+        inputs: [
+            { name: "query", attribute: "query" },
+        ],
+        // Core の commands をそのまま継承（単一情報源）。network と同型。
+        commands: MediaQueryCore.wcBindable.commands,
+    };
+    // `query` is the only attribute worth re-subscribing for; it is the whole
+    // configuration of this node.
+    static get observedAttributes() { return ["query"]; }
+    _core;
+    _connectedCallbackPromise = Promise.resolve();
+    _internals = null;
+    constructor() {
+        super();
+        this._core = new MediaQueryCore(this);
+        this._internals = this._initInternals();
+        this._wireStates({
+            "wcs-media-query:change": (d) => ({
+                matched: d.matched === true,
+                supported: d.supported === true,
+            }),
+        });
+    }
+    // CSS state reflection (:state()) — debug-only snapshot getter. NOT part of
+    // wc-bindable (not a bind target); see README "CSS styling with :state()".
+    // MUST NOT return the live CustomStateSet (that would let callers write
+    // states from outside, defeating the point of :state() being read-only).
+    get debugStates() {
+        return this._internals ? [...this._internals.states] : [];
+    }
+    _initInternals() {
+        // never-throw (async-io-node-guidelines.md §3.6): attachInternals is absent
+        // in happy-dom / older environments, and pre-125 Chromium rejects
+        // non-dashed state names from states.add() (probed and discarded here).
+        // Either case silently disables reflection — the component still works,
+        // it just doesn't expose :state() selectors.
+        try {
+            if (typeof this.attachInternals !== "function")
+                return null;
+            const internals = this.attachInternals();
+            internals.states.add("wcs-probe");
+            internals.states.delete("wcs-probe");
+            return internals;
+        }
+        catch {
+            return null;
+        }
+    }
+    _wireStates(map) {
+        if (this._internals === null)
+            return;
+        const states = this._internals.states;
+        for (const [event, toStates] of Object.entries(map)) {
+            this.addEventListener(event, (e) => {
+                const debug = this.hasAttribute("debug-states");
+                for (const [name, on] of Object.entries(toStates(e.detail))) {
+                    try {
+                        if (on) {
+                            states.add(name);
+                        }
+                        else {
+                            states.delete(name);
+                        }
+                    }
+                    catch { /* never-throw */ }
+                    if (debug)
+                        this.toggleAttribute(`data-wcs-state-${name}`, on);
+                }
+            });
+        }
+    }
+    // --- Attribute accessors ---
+    get query() {
+        return this.getAttribute("query") ?? "";
+    }
+    set query(value) {
+        this.setAttribute("query", value);
+    }
+    // --- Core delegated getters ---
+    get matched() {
+        return this._core.matched;
+    }
+    get media() {
+        return this._core.media;
+    }
+    get supported() {
+        return this._core.supported;
+    }
+    get connectedCallbackPromise() {
+        return this._connectedCallbackPromise;
+    }
+    // --- Lifecycle ---
+    attributeChangedCallback(name, _oldValue, newValue) {
+        // Re-subscribe on a live query change. Removing the attribute (newValue
+        // null) is a real change too — it means "watch nothing", so `matched`
+        // drops to false instead of lingering on the old query's value. Before
+        // connect the attribute is simply read by connectedCallback.
+        if (name === "query" && this.isConnected) {
+            this._core.observe(newValue ?? "");
+        }
+    }
+    connectedCallback() {
+        // upgrade 前に代入された input を取り込み直す（doc 13 §1.2 / Phase A1）
+        upgradeProperties(this);
+        this.style.display = "none";
+        this._connectedCallbackPromise = this._core.observe(this.query);
+    }
+    disconnectedCallback() {
+        this._core.dispose();
+    }
+}
+
+/**
+ * Register this package's tags. Pass a scoped `CustomElementRegistry` to define
+ * them for a single shadow tree -- scoped registries do not inherit the global
+ * one, so a tree using one needs its own definitions.
+ */
+function registerComponents(registry = customElements) {
+    if (!registry.get(config.tagNames.mediaQuery)) {
+        registry.define(config.tagNames.mediaQuery, WcsMediaQuery);
+    }
+}
+
+function bootstrapMediaQuery(userConfig, registry) {
+    if (userConfig) {
+        setConfig(userConfig);
+    }
+    registerComponents(registry);
+}
+
+export { MediaQueryCore, WcsMediaQuery, bootstrapMediaQuery, getConfig };
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../src/config.ts","../src/core/MediaQueryCore.ts","../src/protocol/upgradeProperties.ts","../src/components/MediaQuery.ts","../src/registerComponents.ts","../src/bootstrapMediaQuery.ts"],"sourcesContent":["import { IConfig, IWritableConfig } from \"./types.js\";\r\n\r\ninterface IInternalConfig extends IConfig {\r\n  tagNames: {\r\n    mediaQuery: string;\r\n  };\r\n}\r\n\r\nconst _config: IInternalConfig = {\r\n  tagNames: {\r\n    mediaQuery: \"wcs-media-query\",\r\n  },\r\n};\r\n\r\nfunction deepFreeze<T>(obj: T): T {\r\n  if (obj === null || typeof obj !== \"object\") return obj;\r\n  Object.freeze(obj);\r\n  for (const key of Object.keys(obj)) {\r\n    deepFreeze((obj as Record<string, unknown>)[key]);\r\n  }\r\n  return obj;\r\n}\r\n\r\nfunction deepClone<T>(obj: T): T {\r\n  if (obj === null || typeof obj !== \"object\") return obj;\r\n  const clone: Record<string, unknown> = {};\r\n  for (const key of Object.keys(obj)) {\r\n    clone[key] = deepClone((obj as Record<string, unknown>)[key]);\r\n  }\r\n  return clone as T;\r\n}\r\n\r\nlet frozenConfig: IConfig | null = null;\r\n\r\nexport const config: IConfig = _config as IConfig;\r\n\r\nexport function getConfig(): IConfig {\r\n  if (!frozenConfig) {\r\n    frozenConfig = deepFreeze(deepClone(_config));\r\n  }\r\n  return frozenConfig;\r\n}\r\n\r\nexport function setConfig(partialConfig: IWritableConfig): void {\r\n  if (partialConfig.tagNames) {\r\n    Object.assign(_config.tagNames, partialConfig.tagNames);\r\n  }\r\n  frozenConfig = null;\r\n}\r\n","import {\r\n  IWcBindable, WcsMatchMedia, WcsMediaQueryCoreOptions, WcsMediaQueryList, WcsMediaQuerySnapshot,\r\n} from \"../types.js\";\r\n\r\nconst UNSUPPORTED_SNAPSHOT: WcsMediaQuerySnapshot = Object.freeze({\r\n  matched: false,\r\n  media: \"\",\r\n  supported: false,\r\n});\r\n\r\n// \"matchMedia exists but there is nothing to watch\": an empty query, or a\r\n// matchMedia call that threw. Same shape as UNSUPPORTED_SNAPSHOT except that\r\n// `supported` stays honest about the API being present.\r\nconst IDLE_SNAPSHOT: WcsMediaQuerySnapshot = Object.freeze({\r\n  matched: false,\r\n  media: \"\",\r\n  supported: true,\r\n});\r\n\r\n/**\r\n * Headless media-query primitive. A thin, framework-agnostic wrapper around\r\n * `window.matchMedia` exposed through the wc-bindable protocol.\r\n *\r\n * `observe(query)` subscribes to one `MediaQueryList` and republishes its\r\n * `matches` / `media` as `matched` / `media` state; a different query while subscribed tears the\r\n * old list down and subscribes to the new one. Subscribing is synchronous, but\r\n * — unlike `@wcstack/network` — this Core does keep a `_gen` generation guard\r\n * (§3.4): each subscription's `change` listener captures the generation it was\r\n * created under and bails when it is stale, so a `MediaQueryList` whose\r\n * `removeEventListener` / `removeListener` misbehaves can never write the old\r\n * query's `matched` over the new query's (docs/media-query-tag-design.md §6).\r\n *\r\n * `matchMedia` is universally available in browsers; `supported === false` is\r\n * the non-browser case (SSR, workers) rather than a browser quirk.\r\n */\r\nexport class MediaQueryCore extends EventTarget {\r\n  static wcBindable: IWcBindable = {\r\n    protocol: \"wc-bindable\",\r\n    version: 1,\r\n    properties: [\r\n      { name: \"matched\", event: \"wcs-media-query:change\", semantics: \"state\", getter: (e: Event) => (e as CustomEvent).detail.matched },\r\n      { name: \"media\", event: \"wcs-media-query:change\", semantics: \"state\", getter: (e: Event) => (e as CustomEvent).detail.media },\r\n      { name: \"supported\", event: \"wcs-media-query:change\", semantics: \"state\", getter: (e: Event) => (e as CustomEvent).detail.supported },\r\n    ],\r\n    // Pure monitor: a MediaQueryList has no action to invoke.\r\n    //\r\n    // `matched`, not `matches`: `Element.prototype.matches(selector)` exists on\r\n    // every element, and a wc-bindable property name is read straight off the\r\n    // Shell — a boolean `matches` would shadow the platform method\r\n    // (docs/media-query-tag-design.md §2.1).\r\n    commands: [],\r\n  };\r\n\r\n  private _target: EventTarget;\r\n  private _snapshot: WcsMediaQuerySnapshot = UNSUPPORTED_SNAPSHOT;\r\n\r\n  // The query currently subscribed (or last requested). \"\" means \"nothing to watch\".\r\n  private _query = \"\";\r\n\r\n  // Detaches the live `change` listener of the current subscription, if any.\r\n  private _unsubscribe: (() => void) | null = null;\r\n\r\n  // True between observe() and dispose(). Guards observe() so a redundant call\r\n  // with the same query does not re-subscribe; dispose() resets it.\r\n  private _subscribed = false;\r\n\r\n  // Generation guard (§3.4). Bumped by every (re)subscription and by dispose().\r\n  // A `change` listener captures its generation and ignores the event once a\r\n  // newer subscription exists — see the class docs for why this is kept even\r\n  // though subscribing itself is synchronous.\r\n  private _gen = 0;\r\n\r\n  // Injected matchMedia (tests / non-window hosts). `null` = resolve\r\n  // `globalThis.matchMedia` at call time (§3.7).\r\n  private _injectedMatchMedia: WcsMatchMedia | null;\r\n\r\n  // SSR (§3.8): no asynchronous probe to await — observe() completes\r\n  // synchronously, so readiness is immediate.\r\n  private _ready: Promise<void> = Promise.resolve();\r\n\r\n  constructor(target?: EventTarget, options?: WcsMediaQueryCoreOptions) {\r\n    super();\r\n    this._target = target ?? this;\r\n    this._injectedMatchMedia = options?.matchMedia ?? null;\r\n  }\r\n\r\n  get ready(): Promise<void> {\r\n    return this._ready;\r\n  }\r\n\r\n  get query(): string {\r\n    return this._query;\r\n  }\r\n\r\n  get matched(): boolean {\r\n    return this._snapshot.matched;\r\n  }\r\n\r\n  get media(): string {\r\n    return this._snapshot.media;\r\n  }\r\n\r\n  get supported(): boolean {\r\n    return this._snapshot.supported;\r\n  }\r\n\r\n  // Lifecycle (§3.5). Idempotent: observe() with the query already subscribed\r\n  // is a no-op (no double listener, no redundant dispatch). A different query\r\n  // re-subscribes (dispose-then-observe semantics in one call). Omitting the\r\n  // argument keeps the current query — the reconnect case for the Shell.\r\n  // Synchronous overall (no probe to await), so the returned promise is only\r\n  // for API uniformity with other IO nodes.\r\n  observe(query: string = this._query): Promise<void> {\r\n    if (this._subscribed && query === this._query) {\r\n      return this._ready;\r\n    }\r\n    this._teardown();\r\n    this._query = query;\r\n    this._subscribed = true;\r\n    this._subscribe(query);\r\n    return this._ready;\r\n  }\r\n\r\n  dispose(): void {\r\n    this._subscribed = false;\r\n    this._teardown();\r\n  }\r\n\r\n  // API resolution is call-time, never cached (§3.7): lets tests install/remove\r\n  // globalThis.matchMedia freely and lets a non-browser host be detected\r\n  // correctly on every observe(). Called as a method of globalThis so the\r\n  // native implementation keeps its `this` (calling it unbound throws).\r\n  private _resolveMatchMedia(): WcsMatchMedia | null {\r\n    if (this._injectedMatchMedia !== null) {\r\n      return this._injectedMatchMedia;\r\n    }\r\n    const g = globalThis as { matchMedia?: WcsMatchMedia };\r\n    return typeof g.matchMedia === \"function\" ? (q: string) => g.matchMedia!(q) : null;\r\n  }\r\n\r\n  private _subscribe(query: string): void {\r\n    const gen = ++this._gen;\r\n    const matchMedia = this._resolveMatchMedia();\r\n    if (matchMedia === null) {\r\n      this._apply(UNSUPPORTED_SNAPSHOT);\r\n      return;\r\n    }\r\n    if (query === \"\") {\r\n      this._apply(IDLE_SNAPSHOT);\r\n      return;\r\n    }\r\n    // never-throw (§3.6): browsers do not throw on an invalid query string\r\n    // (they return `media: \"not all\"`), but a hostile host or a broken\r\n    // MediaQueryList polyfill might — that must not kill observe().\r\n    let list: WcsMediaQueryList | null = null;\r\n    try {\r\n      list = matchMedia(query);\r\n      const onChange = (): void => {\r\n        if (gen !== this._gen) return; // stale subscription — never write\r\n        this._apply(this._read(list!));\r\n      };\r\n      this._unsubscribe = attachChange(list, onChange);\r\n    } catch {\r\n      list = null;\r\n      this._unsubscribe = null;\r\n    }\r\n    this._apply(list === null ? IDLE_SNAPSHOT : this._read(list));\r\n  }\r\n\r\n  private _teardown(): void {\r\n    this._gen++;\r\n    if (this._unsubscribe !== null) {\r\n      const unsubscribe = this._unsubscribe;\r\n      this._unsubscribe = null;\r\n      try {\r\n        unsubscribe();\r\n      } catch {\r\n        // never-throw: a list that refuses to detach is already neutralized\r\n        // by the generation bump above.\r\n      }\r\n    }\r\n  }\r\n\r\n  private _read(list: WcsMediaQueryList): WcsMediaQuerySnapshot {\r\n    return {\r\n      matched: list.matches === true,\r\n      media: typeof list.media === \"string\" ? list.media : \"\",\r\n      supported: true,\r\n    };\r\n  }\r\n\r\n  // Same-value guard (§3.3 MUST): the native `change` event already fires only\r\n  // when `matches` flips, but this Core still verifies field-by-field before\r\n  // dispatching — a re-subscription to an equivalent query, or a legacy\r\n  // `addListener` double-fire, must not produce a redundant event.\r\n  private _apply(next: WcsMediaQuerySnapshot): void {\r\n    const prev = this._snapshot;\r\n    if (\r\n      prev.matched === next.matched &&\r\n      prev.media === next.media &&\r\n      prev.supported === next.supported\r\n    ) {\r\n      return;\r\n    }\r\n    this._snapshot = next;\r\n    this._target.dispatchEvent(new CustomEvent(\"wcs-media-query:change\", {\r\n      detail: next,\r\n      // Family-wide MUST (async-io-node-guidelines.md §3.3): the event bubbles\r\n      // from the Shell element so document-level consumers can delegate.\r\n      bubbles: true,\r\n    }));\r\n  }\r\n}\r\n\r\n// Subscribe to a MediaQueryList's `change` with whichever listener API it has.\r\n// Modern engines: EventTarget-style. Old Safari (< 14): the deprecated\r\n// addListener / removeListener pair. Neither: no live updates — the snapshot\r\n// taken at observe() is all there is (a static polyfill, for instance).\r\n// Returns the matching detach function.\r\nfunction attachChange(list: WcsMediaQueryList, listener: () => void): () => void {\r\n  if (typeof list.addEventListener === \"function\" && typeof list.removeEventListener === \"function\") {\r\n    list.addEventListener(\"change\", listener);\r\n    return () => list.removeEventListener!(\"change\", listener);\r\n  }\r\n  if (typeof list.addListener === \"function\" && typeof list.removeListener === \"function\") {\r\n    list.addListener(listener);\r\n    return () => list.removeListener!(listener);\r\n  }\r\n  return () => {};\r\n}\r\n","// ===========================================================================\r\n// AUTO-GENERATED FILE - DO NOT EDIT.\r\n// Generated from /protocol/upgrade-properties.ts by scripts/sync-protocol-types.mjs.\r\n// Run `node scripts/sync-protocol-types.mjs` after editing the source.\r\n// ===========================================================================\r\n\r\n// custom element の property upgrade — `static wcBindable.inputs` に宣言した入力のうち、\r\n// 要素が upgrade される前に代入された own データプロパティを取り込み直す。\r\n//\r\n// なぜ必要か:\r\n//   未定義タグの要素は素の HTMLElement なので、`el.url = \"...\"` は own データプロパティを作る。\r\n//   upgrade 後にクラスの accessor が prototype へ入っても own プロパティが優先されるため、\r\n//   setter は二度と呼ばれず、値は要素へ届かないまま消える（エラーも警告も出ない）。\r\n//   常にプロパティ代入を行う framework（Angular の `[prop]`、Lit の `.prop=`、\r\n//   Solid の `prop:`、Vue の `.prop` 修飾子）× 遅延定義（autoloader / CDN / code-split）で\r\n//   常態的に起きる。docs/architecture-hardening/13-framework-adapter-binding-constraints.md §1.2。\r\n//\r\n// 安全側の判定:\r\n//   own プロパティがあっても、prototype チェーンに accessor が無ければ「シャドウ」ではなく\r\n//   その own プロパティ自体が正規の格納先なので触らない（public class field を壊さない）。\r\n//\r\n// SINGLE SOURCE OF TRUTH: edit only this file (/protocol/upgrade-properties.ts), then run\r\n// `node scripts/sync-protocol-types.mjs` to regenerate the per-package copies\r\n// (packages/<pkg>/src/protocol/upgradeProperties.ts). Those copies are generated — do not edit them.\r\nimport { IWcBindable } from \"./wcBindable.js\";\r\n\r\nfunction hasAccessorOnPrototype(target: object, name: string): boolean {\r\n  let proto = Object.getPrototypeOf(target);\r\n  while (proto !== null) {\r\n    const descriptor = Object.getOwnPropertyDescriptor(proto, name);\r\n    if (descriptor !== undefined) {\r\n      return typeof descriptor.get === \"function\" || typeof descriptor.set === \"function\";\r\n    }\r\n    proto = Object.getPrototypeOf(proto);\r\n  }\r\n  return false;\r\n}\r\n\r\n/**\r\n * `connectedCallback` の先頭で呼ぶ。宣言済み input のうち upgrade 前の代入で\r\n * accessor をシャドウしている own プロパティを、delete → 再代入で setter に通し直す。\r\n *\r\n * - 冪等: 再代入は accessor を通るので own プロパティは残らず、2 回目以降は no-op。\r\n * - 宣言に `inputs` が無い要素、`wcBindable` を持たない要素では何もしない。\r\n * - 値の意味は変えない。今まで捨てられていた代入が届くようになる一方向の変化。\r\n */\r\nexport function upgradeProperties(element: object): void {\r\n  const declaration = (element as { constructor?: { wcBindable?: IWcBindable } }).constructor?.wcBindable;\r\n  const inputs = declaration?.inputs;\r\n  if (inputs === undefined) return;\r\n  for (const input of inputs) {\r\n    const name = input.name;\r\n    if (!Object.prototype.hasOwnProperty.call(element, name)) continue;\r\n    if (!hasAccessorOnPrototype(element, name)) continue;\r\n    const record = element as Record<string, unknown>;\r\n    const value = record[name];\r\n    delete record[name];\r\n    record[name] = value;\r\n  }\r\n}\r\n","import { IWcBindable } from \"../types.js\";\r\nimport { MediaQueryCore } from \"../core/MediaQueryCore.js\";\r\nimport { upgradeProperties } from \"../protocol/upgradeProperties.js\";\r\n\r\n/**\r\n * `<wcs-media-query query=\"(prefers-color-scheme: dark)\">` — declarative\r\n * `matchMedia` monitor.\r\n *\r\n * One attribute (`query`), three outputs (`matched` / `media` / `supported`),\r\n * no commands. Changing `query` while connected re-subscribes the Core to the\r\n * new MediaQueryList (docs/media-query-tag-design.md §7).\r\n */\r\nexport class WcsMediaQuery extends HTMLElement {\r\n  // SSR (§4.4): observe() completes synchronously, but the Shell still exposes\r\n  // connectedCallbackPromise so SSR (@wcstack/server render.ts) can await it\r\n  // uniformly across all IO nodes before snapshotting the HTML.\r\n  static hasConnectedCallbackPromise = true;\r\n\r\n  static wcBindable: IWcBindable = {\r\n    ...MediaQueryCore.wcBindable,\r\n    // Shell-level settable surface: the media query string, mirrored to the\r\n    // `query` attribute (idempotent reflect, so a binder writing through\r\n    // inputs[].attribute is safe).\r\n    inputs: [\r\n      { name: \"query\", attribute: \"query\" },\r\n    ],\r\n    // Core の commands をそのまま継承（単一情報源）。network と同型。\r\n    commands: MediaQueryCore.wcBindable.commands,\r\n  };\r\n\r\n  // `query` is the only attribute worth re-subscribing for; it is the whole\r\n  // configuration of this node.\r\n  static get observedAttributes(): string[] { return [\"query\"]; }\r\n\r\n  private _core: MediaQueryCore;\r\n  private _connectedCallbackPromise: Promise<void> = Promise.resolve();\r\n  private _internals: ElementInternals | null = null;\r\n\r\n  constructor() {\r\n    super();\r\n    this._core = new MediaQueryCore(this);\r\n    this._internals = this._initInternals();\r\n    this._wireStates({\r\n      \"wcs-media-query:change\": (d) => ({\r\n        matched: d.matched === true,\r\n        supported: d.supported === true,\r\n      }),\r\n    });\r\n  }\r\n\r\n  // CSS state reflection (:state()) — debug-only snapshot getter. NOT part of\r\n  // wc-bindable (not a bind target); see README \"CSS styling with :state()\".\r\n  // MUST NOT return the live CustomStateSet (that would let callers write\r\n  // states from outside, defeating the point of :state() being read-only).\r\n  get debugStates(): string[] {\r\n    return this._internals ? [...this._internals.states] : [];\r\n  }\r\n\r\n  private _initInternals(): ElementInternals | null {\r\n    // never-throw (async-io-node-guidelines.md §3.6): attachInternals is absent\r\n    // in happy-dom / older environments, and pre-125 Chromium rejects\r\n    // non-dashed state names from states.add() (probed and discarded here).\r\n    // Either case silently disables reflection — the component still works,\r\n    // it just doesn't expose :state() selectors.\r\n    try {\r\n      if (typeof this.attachInternals !== \"function\") return null;\r\n      const internals = this.attachInternals();\r\n      internals.states.add(\"wcs-probe\");\r\n      internals.states.delete(\"wcs-probe\");\r\n      return internals;\r\n    } catch {\r\n      return null;\r\n    }\r\n  }\r\n\r\n  private _wireStates(map: Record<string, (detail: any) => Record<string, boolean>>): void {\r\n    if (this._internals === null) return;\r\n    const states = this._internals.states;\r\n    for (const [event, toStates] of Object.entries(map)) {\r\n      this.addEventListener(event, (e) => {\r\n        const debug = this.hasAttribute(\"debug-states\");\r\n        for (const [name, on] of Object.entries(toStates((e as CustomEvent).detail))) {\r\n          try {\r\n            if (on) { states.add(name); } else { states.delete(name); }\r\n          } catch { /* never-throw */ }\r\n          if (debug) this.toggleAttribute(`data-wcs-state-${name}`, on);\r\n        }\r\n      });\r\n    }\r\n  }\r\n\r\n  // --- Attribute accessors ---\r\n\r\n  get query(): string {\r\n    return this.getAttribute(\"query\") ?? \"\";\r\n  }\r\n\r\n  set query(value: string) {\r\n    this.setAttribute(\"query\", value);\r\n  }\r\n\r\n  // --- Core delegated getters ---\r\n\r\n  get matched(): boolean {\r\n    return this._core.matched;\r\n  }\r\n\r\n  get media(): string {\r\n    return this._core.media;\r\n  }\r\n\r\n  get supported(): boolean {\r\n    return this._core.supported;\r\n  }\r\n\r\n  get connectedCallbackPromise(): Promise<void> {\r\n    return this._connectedCallbackPromise;\r\n  }\r\n\r\n  // --- Lifecycle ---\r\n\r\n  attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void {\r\n    // Re-subscribe on a live query change. Removing the attribute (newValue\r\n    // null) is a real change too — it means \"watch nothing\", so `matched`\r\n    // drops to false instead of lingering on the old query's value. Before\r\n    // connect the attribute is simply read by connectedCallback.\r\n    if (name === \"query\" && this.isConnected) {\r\n      this._core.observe(newValue ?? \"\");\r\n    }\r\n  }\r\n\r\n  connectedCallback(): void {\r\n    // upgrade 前に代入された input を取り込み直す（doc 13 §1.2 / Phase A1）\r\n    upgradeProperties(this);\r\n    this.style.display = \"none\";\r\n    this._connectedCallbackPromise = this._core.observe(this.query);\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this._core.dispose();\r\n  }\r\n}\r\n","import { WcsMediaQuery } from \"./components/MediaQuery.js\";\r\nimport { config } from \"./config.js\";\r\n\r\n/**\r\n * Register this package's tags. Pass a scoped `CustomElementRegistry` to define\r\n * them for a single shadow tree -- scoped registries do not inherit the global\r\n * one, so a tree using one needs its own definitions.\r\n */\r\nexport function registerComponents(registry: CustomElementRegistry = customElements): void {\r\n  if (!registry.get(config.tagNames.mediaQuery)) {\r\n    registry.define(config.tagNames.mediaQuery, WcsMediaQuery);\r\n  }\r\n}\r\n","import { setConfig } from \"./config.js\";\r\nimport { registerComponents } from \"./registerComponents.js\";\r\nimport { IWritableConfig } from \"./types.js\";\r\n\r\nexport function bootstrapMediaQuery(userConfig?: IWritableConfig, registry?: CustomElementRegistry): void {\r\n  if (userConfig) {\r\n    setConfig(userConfig);\r\n  }\r\n  registerComponents(registry);\r\n}\r\n"],"names":[],"mappings":"AAQA,MAAM,OAAO,GAAoB;AAC/B,IAAA,QAAQ,EAAE;AACR,QAAA,UAAU,EAAE,iBAAiB;AAC9B,KAAA;CACF;AAED,SAAS,UAAU,CAAI,GAAM,EAAA;AAC3B,IAAA,IAAI,GAAG,KAAK,IAAI,IAAI,OAAO,GAAG,KAAK,QAAQ;AAAE,QAAA,OAAO,GAAG;AACvD,IAAA,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC;IAClB,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE;AAClC,QAAA,UAAU,CAAE,GAA+B,CAAC,GAAG,CAAC,CAAC;IACnD;AACA,IAAA,OAAO,GAAG;AACZ;AAEA,SAAS,SAAS,CAAI,GAAM,EAAA;AAC1B,IAAA,IAAI,GAAG,KAAK,IAAI,IAAI,OAAO,GAAG,KAAK,QAAQ;AAAE,QAAA,OAAO,GAAG;IACvD,MAAM,KAAK,GAA4B,EAAE;IACzC,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE;QAClC,KAAK,CAAC,GAAG,CAAC,GAAG,SAAS,CAAE,GAA+B,CAAC,GAAG,CAAC,CAAC;IAC/D;AACA,IAAA,OAAO,KAAU;AACnB;AAEA,IAAI,YAAY,GAAmB,IAAI;AAEhC,MAAM,MAAM,GAAY,OAAkB;SAEjC,SAAS,GAAA;IACvB,IAAI,CAAC,YAAY,EAAE;QACjB,YAAY,GAAG,UAAU,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IAC/C;AACA,IAAA,OAAO,YAAY;AACrB;AAEM,SAAU,SAAS,CAAC,aAA8B,EAAA;AACtD,IAAA,IAAI,aAAa,CAAC,QAAQ,EAAE;QAC1B,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,EAAE,aAAa,CAAC,QAAQ,CAAC;IACzD;IACA,YAAY,GAAG,IAAI;AACrB;;AC5CA,MAAM,oBAAoB,GAA0B,MAAM,CAAC,MAAM,CAAC;AAChE,IAAA,OAAO,EAAE,KAAK;AACd,IAAA,KAAK,EAAE,EAAE;AACT,IAAA,SAAS,EAAE,KAAK;AACjB,CAAA,CAAC;AAEF;AACA;AACA;AACA,MAAM,aAAa,GAA0B,MAAM,CAAC,MAAM,CAAC;AACzD,IAAA,OAAO,EAAE,KAAK;AACd,IAAA,KAAK,EAAE,EAAE;AACT,IAAA,SAAS,EAAE,IAAI;AAChB,CAAA,CAAC;AAEF;;;;;;;;;;;;;;;AAeG;AACG,MAAO,cAAe,SAAQ,WAAW,CAAA;IAC7C,OAAO,UAAU,GAAgB;AAC/B,QAAA,QAAQ,EAAE,aAAa;AACvB,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,UAAU,EAAE;YACV,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,wBAAwB,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAQ,KAAM,CAAiB,CAAC,MAAM,CAAC,OAAO,EAAE;YACjI,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,wBAAwB,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAQ,KAAM,CAAiB,CAAC,MAAM,CAAC,KAAK,EAAE;YAC7H,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,wBAAwB,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAQ,KAAM,CAAiB,CAAC,MAAM,CAAC,SAAS,EAAE;AACtI,SAAA;;;;;;;AAOD,QAAA,QAAQ,EAAE,EAAE;KACb;AAEO,IAAA,OAAO;IACP,SAAS,GAA0B,oBAAoB;;IAGvD,MAAM,GAAG,EAAE;;IAGX,YAAY,GAAwB,IAAI;;;IAIxC,WAAW,GAAG,KAAK;;;;;IAMnB,IAAI,GAAG,CAAC;;;AAIR,IAAA,mBAAmB;;;AAInB,IAAA,MAAM,GAAkB,OAAO,CAAC,OAAO,EAAE;IAEjD,WAAA,CAAY,MAAoB,EAAE,OAAkC,EAAA;AAClE,QAAA,KAAK,EAAE;AACP,QAAA,IAAI,CAAC,OAAO,GAAG,MAAM,IAAI,IAAI;QAC7B,IAAI,CAAC,mBAAmB,GAAG,OAAO,EAAE,UAAU,IAAI,IAAI;IACxD;AAEA,IAAA,IAAI,KAAK,GAAA;QACP,OAAO,IAAI,CAAC,MAAM;IACpB;AAEA,IAAA,IAAI,KAAK,GAAA;QACP,OAAO,IAAI,CAAC,MAAM;IACpB;AAEA,IAAA,IAAI,OAAO,GAAA;AACT,QAAA,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO;IAC/B;AAEA,IAAA,IAAI,KAAK,GAAA;AACP,QAAA,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK;IAC7B;AAEA,IAAA,IAAI,SAAS,GAAA;AACX,QAAA,OAAO,IAAI,CAAC,SAAS,CAAC,SAAS;IACjC;;;;;;;AAQA,IAAA,OAAO,CAAC,KAAA,GAAgB,IAAI,CAAC,MAAM,EAAA;QACjC,IAAI,IAAI,CAAC,WAAW,IAAI,KAAK,KAAK,IAAI,CAAC,MAAM,EAAE;YAC7C,OAAO,IAAI,CAAC,MAAM;QACpB;QACA,IAAI,CAAC,SAAS,EAAE;AAChB,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK;AACnB,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI;AACvB,QAAA,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;QACtB,OAAO,IAAI,CAAC,MAAM;IACpB;IAEA,OAAO,GAAA;AACL,QAAA,IAAI,CAAC,WAAW,GAAG,KAAK;QACxB,IAAI,CAAC,SAAS,EAAE;IAClB;;;;;IAMQ,kBAAkB,GAAA;AACxB,QAAA,IAAI,IAAI,CAAC,mBAAmB,KAAK,IAAI,EAAE;YACrC,OAAO,IAAI,CAAC,mBAAmB;QACjC;QACA,MAAM,CAAC,GAAG,UAA4C;QACtD,OAAO,OAAO,CAAC,CAAC,UAAU,KAAK,UAAU,GAAG,CAAC,CAAS,KAAK,CAAC,CAAC,UAAW,CAAC,CAAC,CAAC,GAAG,IAAI;IACpF;AAEQ,IAAA,UAAU,CAAC,KAAa,EAAA;AAC9B,QAAA,MAAM,GAAG,GAAG,EAAE,IAAI,CAAC,IAAI;AACvB,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,kBAAkB,EAAE;AAC5C,QAAA,IAAI,UAAU,KAAK,IAAI,EAAE;AACvB,YAAA,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC;YACjC;QACF;AACA,QAAA,IAAI,KAAK,KAAK,EAAE,EAAE;AAChB,YAAA,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC;YAC1B;QACF;;;;QAIA,IAAI,IAAI,GAA6B,IAAI;AACzC,QAAA,IAAI;AACF,YAAA,IAAI,GAAG,UAAU,CAAC,KAAK,CAAC;YACxB,MAAM,QAAQ,GAAG,MAAW;AAC1B,gBAAA,IAAI,GAAG,KAAK,IAAI,CAAC,IAAI;AAAE,oBAAA,OAAO;gBAC9B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,CAAC;AAChC,YAAA,CAAC;YACD,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC,IAAI,EAAE,QAAQ,CAAC;QAClD;AAAE,QAAA,MAAM;YACN,IAAI,GAAG,IAAI;AACX,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI;QAC1B;QACA,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,IAAI,GAAG,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAC/D;IAEQ,SAAS,GAAA;QACf,IAAI,CAAC,IAAI,EAAE;AACX,QAAA,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI,EAAE;AAC9B,YAAA,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY;AACrC,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI;AACxB,YAAA,IAAI;AACF,gBAAA,WAAW,EAAE;YACf;AAAE,YAAA,MAAM;;;YAGR;QACF;IACF;AAEQ,IAAA,KAAK,CAAC,IAAuB,EAAA;QACnC,OAAO;AACL,YAAA,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,IAAI;AAC9B,YAAA,KAAK,EAAE,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE;AACvD,YAAA,SAAS,EAAE,IAAI;SAChB;IACH;;;;;AAMQ,IAAA,MAAM,CAAC,IAA2B,EAAA;AACxC,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS;AAC3B,QAAA,IACE,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO;AAC7B,YAAA,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK;AACzB,YAAA,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,SAAS,EACjC;YACA;QACF;AACA,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI;QACrB,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,wBAAwB,EAAE;AACnE,YAAA,MAAM,EAAE,IAAI;;;AAGZ,YAAA,OAAO,EAAE,IAAI;AACd,SAAA,CAAC,CAAC;IACL;;AAGF;AACA;AACA;AACA;AACA;AACA,SAAS,YAAY,CAAC,IAAuB,EAAE,QAAoB,EAAA;AACjE,IAAA,IAAI,OAAO,IAAI,CAAC,gBAAgB,KAAK,UAAU,IAAI,OAAO,IAAI,CAAC,mBAAmB,KAAK,UAAU,EAAE;AACjG,QAAA,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC;QACzC,OAAO,MAAM,IAAI,CAAC,mBAAoB,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC5D;AACA,IAAA,IAAI,OAAO,IAAI,CAAC,WAAW,KAAK,UAAU,IAAI,OAAO,IAAI,CAAC,cAAc,KAAK,UAAU,EAAE;AACvF,QAAA,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC;QAC1B,OAAO,MAAM,IAAI,CAAC,cAAe,CAAC,QAAQ,CAAC;IAC7C;AACA,IAAA,OAAO,MAAK,EAAE,CAAC;AACjB;;ACrOA;AACA;AACA;AACA;AACA;AAsBA,SAAS,sBAAsB,CAAC,MAAc,EAAE,IAAY,EAAA;IAC1D,IAAI,KAAK,GAAG,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC;AACzC,IAAA,OAAO,KAAK,KAAK,IAAI,EAAE;QACrB,MAAM,UAAU,GAAG,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,IAAI,CAAC;AAC/D,QAAA,IAAI,UAAU,KAAK,SAAS,EAAE;AAC5B,YAAA,OAAO,OAAO,UAAU,CAAC,GAAG,KAAK,UAAU,IAAI,OAAO,UAAU,CAAC,GAAG,KAAK,UAAU;QACrF;AACA,QAAA,KAAK,GAAG,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC;IACtC;AACA,IAAA,OAAO,KAAK;AACd;AAEA;;;;;;;AAOG;AACG,SAAU,iBAAiB,CAAC,OAAe,EAAA;AAC/C,IAAA,MAAM,WAAW,GAAI,OAA0D,CAAC,WAAW,EAAE,UAAU;AACvG,IAAA,MAAM,MAAM,GAAG,WAAW,EAAE,MAAM;IAClC,IAAI,MAAM,KAAK,SAAS;QAAE;AAC1B,IAAA,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE;AAC1B,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI;AACvB,QAAA,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC;YAAE;AAC1D,QAAA,IAAI,CAAC,sBAAsB,CAAC,OAAO,EAAE,IAAI,CAAC;YAAE;QAC5C,MAAM,MAAM,GAAG,OAAkC;AACjD,QAAA,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC;AAC1B,QAAA,OAAO,MAAM,CAAC,IAAI,CAAC;AACnB,QAAA,MAAM,CAAC,IAAI,CAAC,GAAG,KAAK;IACtB;AACF;;ACvDA;;;;;;;AAOG;AACG,MAAO,aAAc,SAAQ,WAAW,CAAA;;;;AAI5C,IAAA,OAAO,2BAA2B,GAAG,IAAI;IAEzC,OAAO,UAAU,GAAgB;QAC/B,GAAG,cAAc,CAAC,UAAU;;;;AAI5B,QAAA,MAAM,EAAE;AACN,YAAA,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE;AACtC,SAAA;;AAED,QAAA,QAAQ,EAAE,cAAc,CAAC,UAAU,CAAC,QAAQ;KAC7C;;;IAID,WAAW,kBAAkB,GAAA,EAAe,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;AAEtD,IAAA,KAAK;AACL,IAAA,yBAAyB,GAAkB,OAAO,CAAC,OAAO,EAAE;IAC5D,UAAU,GAA4B,IAAI;AAElD,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE;QACP,IAAI,CAAC,KAAK,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC;AACrC,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,cAAc,EAAE;QACvC,IAAI,CAAC,WAAW,CAAC;AACf,YAAA,wBAAwB,EAAE,CAAC,CAAC,MAAM;AAChC,gBAAA,OAAO,EAAE,CAAC,CAAC,OAAO,KAAK,IAAI;AAC3B,gBAAA,SAAS,EAAE,CAAC,CAAC,SAAS,KAAK,IAAI;aAChC,CAAC;AACH,SAAA,CAAC;IACJ;;;;;AAMA,IAAA,IAAI,WAAW,GAAA;AACb,QAAA,OAAO,IAAI,CAAC,UAAU,GAAG,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,GAAG,EAAE;IAC3D;IAEQ,cAAc,GAAA;;;;;;AAMpB,QAAA,IAAI;AACF,YAAA,IAAI,OAAO,IAAI,CAAC,eAAe,KAAK,UAAU;AAAE,gBAAA,OAAO,IAAI;AAC3D,YAAA,MAAM,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE;AACxC,YAAA,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,WAAW,CAAC;AACjC,YAAA,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC;AACpC,YAAA,OAAO,SAAS;QAClB;AAAE,QAAA,MAAM;AACN,YAAA,OAAO,IAAI;QACb;IACF;AAEQ,IAAA,WAAW,CAAC,GAA6D,EAAA;AAC/E,QAAA,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI;YAAE;AAC9B,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM;AACrC,QAAA,KAAK,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YACnD,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,CAAC,CAAC,KAAI;gBACjC,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC;AAC/C,gBAAA,KAAK,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAE,CAAiB,CAAC,MAAM,CAAC,CAAC,EAAE;AAC5E,oBAAA,IAAI;wBACF,IAAI,EAAE,EAAE;AAAE,4BAAA,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC;wBAAE;6BAAO;AAAE,4BAAA,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC;wBAAE;oBAC5D;AAAE,oBAAA,MAAM,oBAAoB;AAC5B,oBAAA,IAAI,KAAK;wBAAE,IAAI,CAAC,eAAe,CAAC,CAAA,eAAA,EAAkB,IAAI,CAAA,CAAE,EAAE,EAAE,CAAC;gBAC/D;AACF,YAAA,CAAC,CAAC;QACJ;IACF;;AAIA,IAAA,IAAI,KAAK,GAAA;QACP,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE;IACzC;IAEA,IAAI,KAAK,CAAC,KAAa,EAAA;AACrB,QAAA,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC;IACnC;;AAIA,IAAA,IAAI,OAAO,GAAA;AACT,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO;IAC3B;AAEA,IAAA,IAAI,KAAK,GAAA;AACP,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK;IACzB;AAEA,IAAA,IAAI,SAAS,GAAA;AACX,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,SAAS;IAC7B;AAEA,IAAA,IAAI,wBAAwB,GAAA;QAC1B,OAAO,IAAI,CAAC,yBAAyB;IACvC;;AAIA,IAAA,wBAAwB,CAAC,IAAY,EAAE,SAAwB,EAAE,QAAuB,EAAA;;;;;QAKtF,IAAI,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC,WAAW,EAAE;YACxC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,IAAI,EAAE,CAAC;QACpC;IACF;IAEA,iBAAiB,GAAA;;QAEf,iBAAiB,CAAC,IAAI,CAAC;AACvB,QAAA,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM;AAC3B,QAAA,IAAI,CAAC,yBAAyB,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;IACjE;IAEA,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE;IACtB;;;ACzIF;;;;AAIG;AACG,SAAU,kBAAkB,CAAC,QAAA,GAAkC,cAAc,EAAA;AACjF,IAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;QAC7C,QAAQ,CAAC,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,UAAU,EAAE,aAAa,CAAC;IAC5D;AACF;;ACRM,SAAU,mBAAmB,CAAC,UAA4B,EAAE,QAAgC,EAAA;IAChG,IAAI,UAAU,EAAE;QACd,SAAS,CAAC,UAAU,CAAC;IACvB;IACA,kBAAkB,CAAC,QAAQ,CAAC;AAC9B;;"}

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@wcstack/media-query",
+  "version": "2.1.1",
+  "description": "Declarative matchMedia component for Web Components. Framework-agnostic media-query monitor (prefers-color-scheme, prefers-reduced-motion, viewport width) via wc-bindable-protocol.",
+  "type": "module",
+  "main": "./dist/index.esm.js",
+  "module": "./dist/index.esm.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.esm.js"
+    },
+    "./auto": "./dist/auto.min.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "clean": "rimraf dist .tsc-out",
+    "build": "rimraf dist .tsc-out && tsc && rollup -c",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "lint": "eslint src",
+    "version:patch": "npm version patch",
+    "version:minor": "npm version minor",
+    "version:major": "npm version major",
+    "prepublishOnly": "npm run build && npm run test:coverage"
+  },
+  "keywords": [
+    "web-components",
+    "matchmedia",
+    "media-query",
+    "prefers-color-scheme",
+    "prefers-reduced-motion",
+    "responsive",
+    "custom-elements",
+    "wc-bindable",
+    "declarative",
+    "zero-dependencies",
+    "framework-agnostic"
+  ],
+  "author": "mogera551",
+  "homepage": "https://wcstack.github.io",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wcstack/wcstack.git",
+    "directory": "packages/media-query"
+  },
+  "bugs": {
+    "url": "https://github.com/wcstack/wcstack/issues"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@vitest/coverage-v8": "^4.0.15",
+    "@vitest/ui": "^4.0.15",
+    "eslint": "^9.39.1",
+    "globals": "^16.5.0",
+    "happy-dom": "^20.0.11",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.22.4",
+    "rollup-plugin-dts": "^6.1.1",
+    "rollup-plugin-copy": "^3.5.0",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.49.0",
+    "vitest": "^4.0.15"
+  }
+}