@greypan/web-ui 8.0.0 → 9.0.0

package/dist/shared/theme/root-sync.js

@@ -1,42 +1,48 @@
 //#region src/shared/theme/root-sync.ts
-var e = "--wui-color-page", t = /* @__PURE__ */ new Set(), n;
-function r(e) {
+var e = "--wui-color-page", t = /* @__PURE__ */ new Set(), n, r = /* @__PURE__ */ new Set();
+function i(e) {
 	return t.values().next().value === e;
 }
-function i(t) {
+function a(t) {
 	return getComputedStyle(t).getPropertyValue(e).trim();
 }
-function a() {
+function o() {
 	let n = t.values().next().value;
 	if (!n || !n.isConnected) return;
-	let r = i(n);
+	let r = a(n);
 	if (!r) return;
-	let a = document.documentElement.style;
-	a.getPropertyValue(e) !== r && a.setProperty(e, r);
-}
-function o() {
-	a();
+	let i = document.documentElement.style;
+	i.getPropertyValue(e) !== r && i.setProperty(e, r);
 }
 function s() {
-	if (t.size > 0) {
+	o();
+	for (let e of r) e();
+}
+function c() {
+	if (t.size > 0 || r.size > 0) {
 		if (n) return;
 		try {
 			n = window.matchMedia("(prefers-color-scheme: dark)");
 		} catch {
 			return;
 		}
-		n.addEventListener("change", o);
+		n.addEventListener("change", s);
 		return;
 	}
-	n &&= (n.removeEventListener("change", o), void 0);
-}
-function c(e) {
-	t.add(e), s(), r(e) && a();
+	n &&= (n.removeEventListener("change", s), void 0);
 }
 function l(e) {
-	t.delete(e) && (s(), a());
+	return r.add(e), c(), () => {
+		r.delete(e) && c();
+	};
+}
+function u(e) {
+	t.add(e), c(), i(e) && o();
+}
+function d(e) {
+	t.delete(e) && (c(), o());
 }
 //#endregion
-export { c as registerThemeRootSync, l as unregisterThemeRootSync };
+export { u as registerThemeRootSync, l as subscribeThemeSystemAppearanceChange, d as unregisterThemeRootSync };
 
 //# sourceMappingURL=root-sync.js.map

package/dist/shared/theme/root-sync.js.map

@@ -1 +1 @@
-{"version":3,"file":"root-sync.js","names":[],"sources":["../../../src/shared/theme/root-sync.ts"],"sourcesContent":["/**\n * 根节点 page 色同步 —— 「哪一层最外层」的唯一拥有者。\n *\n * macOS 橡皮筋回弹露白的成因不在 body 而在画布：body 的背景只覆盖滚动范围，回弹时被扯出来的\n * 那一圈用的是 documentElement 的画布背景。而 `--wui-color-page` 定义在 `<web-ui-theme>` 的\n * shadow 作用域里，自定义属性的继承链到 documentElement 就断了，所以消费方写\n * `body { background: var(--wui-color-page) }` 也管不到回弹区。\n *\n * 本模块补上这一环：最外层 active theme 把自己计算出的 `--wui-color-page` 写到 documentElement\n * 的行内自定义属性上，消费方仍然只需要那一行 body 规则。\n *\n * 为什么按 connect 顺序取「第一个 active 实例」，而不是去判「DOM 上最外层的那一个」：\n * 组件无法可靠地回答后者——portal、shadow host 与 slot 都会让「谁包着谁」的物理关系和主题\n * 作用域不一致（`WebUiTheme._findThemeAncestor()` 正是为此单独实现了跨 shadow 边界的祖先链）。\n * root 值只可能有一个来源，按 connect 顺序取第一个是唯一不需要猜树形状的判据，且与用户视角\n * 一致：嵌套主题总是后 connect，先进页面那个主题范围就是盖住整页的那个。\n *\n * 其余取舍：\n *\n * - 同步权在已登记实例之间按同一顺序顺延：最外层断开时下一个已连接实例接管，不查 DOM。\n *   重新挂载的实例按新的一次 connect 排到队尾——队首才是当前 outermost。\n * - 写入值取该实例的**计算值**，因此消费者在 host 上覆盖 `--wui-color-page`（包括在自己的\n *   媒体查询里覆盖）会被原样镜像，主题与消费者的优先级关系不因此改变。\n * - 全部断开时**保留最后值**：清掉属性会让 body 背景在主题卸载/重挂的间隙闪回 UA 白底，\n *   而那正是本能力要消除的观感。代价是最后一个主题卸载后 documentElement 上仍留着一个自定义\n *   属性；消费者自己写 body 背景时它不产生任何影响。\n * - `appearance=\"system\"` 的计算值由组件内部 CSS 的 `prefers-color-scheme` 媒体查询决定，JS 侧\n *   没有订阅，所以登记表非空期间挂一个系统 scheme 监听，翻转时重算。\n * - 登记表强引用实例，但删除路径只有组件自己的 disconnectedCallback：自定义元素反应保证移除\n *   必然触发它，不存在 open-overlay 那种「面板被 portal 搬运」需要惰性兜底回收的形状。\n */\n\nconst ROOT_PAGE_TOKEN = '--wui-color-page'\n\n/** 按 connect 顺序排列的已登记 active 实例；队首持有 root 同步权。 */\nconst registered = new Set<HTMLElement>()\n\nlet schemeQuery: MediaQueryList | undefined\n\n/*\n * dev 期测试钩子：登记表尺寸。\n *\n * 「组件卸载后忘了撤销登记」是这层唯一的结构性风险，而 `registered` 无法从公开面观察——\n * 调用方只看见 documentElement 上的值，看不到注册表。有了它，泄漏在测试里是一个可直接断言的\n * 数字。`import.meta.env.DEV` 是编译期常量，生产构建里整段消失。\n */\ndeclare global {\n  // eslint-disable-next-line no-var\n  var __webUiThemeRootSyncCount: () => number\n}\n\nif (import.meta.env.DEV) {\n  globalThis.__webUiThemeRootSyncCount = () => registered.size\n}\n\nfunction isRootSyncOwner(host: HTMLElement): boolean {\n  return registered.values().next().value === host\n}\n\n/** 计算值可能为空（jsdom、未激活作用域、已断开），空值不写入也不删除既有值。 */\nfunction readPageColor(host: HTMLElement): string {\n  return getComputedStyle(host).getPropertyValue(ROOT_PAGE_TOKEN).trim()\n}\n\nfunction syncRootPageColor(): void {\n  const owner = registered.values().next().value as HTMLElement | undefined\n  if (!owner) return\n  // 已断开的所有者不能再写 root：整棵子树一起卸载时，队首顺延到的实例已经不在文档里\n  // （浏览器对 detached 元素取不到计算值，jsdom 却仍按选择器匹配返回旧值），\n  // 不设这道坎就会在两种环境里得到不同的 root 末值。\n  if (!owner.isConnected) return\n  const value = readPageColor(owner)\n  if (!value) return\n  const style = document.documentElement.style\n  // 与当前行内值比较而不是与模块记忆的上次写入比较：消费者中途覆写时，下一次同步仍然夺回\n  // 归属权，而值没变时不做无谓的样式写入。\n  if (style.getPropertyValue(ROOT_PAGE_TOKEN) === value) return\n  style.setProperty(ROOT_PAGE_TOKEN, value)\n}\n\nfunction handleSchemeChange(): void {\n  syncRootPageColor()\n}\n\nfunction syncSchemeListener(): void {\n  if (registered.size > 0) {\n    if (schemeQuery) return\n    try {\n      schemeQuery = window.matchMedia('(prefers-color-scheme: dark)')\n    } catch {\n      // jsdom 等没有 matchMedia 的环境：system 档跟随不到系统翻转，登记表行为不受影响。\n      return\n    }\n    schemeQuery.addEventListener('change', handleSchemeChange)\n    return\n  }\n  if (!schemeQuery) return\n  schemeQuery.removeEventListener('change', handleSchemeChange)\n  schemeQuery = undefined\n}\n\n/**\n * 登记一个 active theme。幂等，组件的 connectedCallback 与 updated() 可以无条件调用：\n * 已在表中的实例重复登记保留原队序，只有队首实例会刷新 root 值。\n */\nexport function registerThemeRootSync(host: HTMLElement): void {\n  registered.add(host)\n  syncSchemeListener()\n  // 嵌套实例的变更按契约不影响 root 值；顺延不到新实例时 root 值同样不变。\n  if (!isRootSyncOwner(host)) return\n  syncRootPageColor()\n}\n\n/** 撤销登记。移交同步权时由新的队首实例立即接管 root 值。 */\nexport function unregisterThemeRootSync(host: HTMLElement): void {\n  if (!registered.delete(host)) return\n  syncSchemeListener()\n  syncRootPageColor()\n}\n"],"mappings":";AAgCA,IAAM,IAAkB,oBAGlB,oBAAa,IAAI,IAAiB,GAEpC;AAkBJ,SAAS,EAAgB,GAA4B;CACnD,OAAO,EAAW,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,UAAU;AAC9C;AAGA,SAAS,EAAc,GAA2B;CAChD,OAAO,iBAAiB,CAAI,CAAC,CAAC,iBAAiB,CAAe,CAAC,CAAC,KAAK;AACvE;AAEA,SAAS,IAA0B;CACjC,IAAM,IAAQ,EAAW,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC;CAKzC,IAJI,CAAC,KAID,CAAC,EAAM,aAAa;CACxB,IAAM,IAAQ,EAAc,CAAK;CACjC,IAAI,CAAC,GAAO;CACZ,IAAM,IAAQ,SAAS,gBAAgB;CAGnC,EAAM,iBAAiB,CAAe,MAAM,KAChD,EAAM,YAAY,GAAiB,CAAK;AAC1C;AAEA,SAAS,IAA2B;CAClC,EAAkB;AACpB;AAEA,SAAS,IAA2B;CAClC,IAAI,EAAW,OAAO,GAAG;EACvB,IAAI,GAAa;EACjB,IAAI;GACF,IAAc,OAAO,WAAW,8BAA8B;EAChE,QAAQ;GAEN;EACF;EACA,EAAY,iBAAiB,UAAU,CAAkB;EACzD;CACF;CACK,AAEL,OADA,EAAY,oBAAoB,UAAU,CAAkB,GAC9C,KAAA;AAChB;AAMA,SAAgB,EAAsB,GAAyB;CAC7D,EAAW,IAAI,CAAI,GACnB,EAAmB,GAEd,EAAgB,CAAI,KACzB,EAAkB;AACpB;AAGA,SAAgB,EAAwB,GAAyB;CAC1D,EAAW,OAAO,CAAI,MAC3B,EAAmB,GACnB,EAAkB;AACpB"}
+{"version":3,"file":"root-sync.js","names":[],"sources":["../../../src/shared/theme/root-sync.ts"],"sourcesContent":["/**\n * 根节点 page 色同步 —— 「哪一层最外层」的唯一拥有者。\n *\n * macOS 橡皮筋回弹露白的成因不在 body 而在画布：body 的背景只覆盖滚动范围，回弹时被扯出来的\n * 那一圈用的是 documentElement 的画布背景。而 `--wui-color-page` 定义在 `<web-ui-theme>` 的\n * shadow 作用域里，自定义属性的继承链到 documentElement 就断了，所以消费方写\n * `body { background: var(--wui-color-page) }` 也管不到回弹区。\n *\n * 本模块补上这一环：最外层 active theme 把自己计算出的 `--wui-color-page` 写到 documentElement\n * 的行内自定义属性上，消费方仍然只需要那一行 body 规则。\n *\n * 为什么按 connect 顺序取「第一个 active 实例」，而不是去判「DOM 上最外层的那一个」：\n * 组件无法可靠地回答后者——portal、shadow host 与 slot 都会让「谁包着谁」的物理关系和主题\n * 作用域不一致（`WebUiTheme._findThemeAncestor()` 正是为此单独实现了跨 shadow 边界的祖先链）。\n * root 值只可能有一个来源，按 connect 顺序取第一个是唯一不需要猜树形状的判据，且与用户视角\n * 一致：嵌套主题总是后 connect，先进页面那个主题范围就是盖住整页的那个。\n *\n * 其余取舍：\n *\n * - 同步权在已登记实例之间按同一顺序顺延：最外层断开时下一个已连接实例接管，不查 DOM。\n *   重新挂载的实例按新的一次 connect 排到队尾——队首才是当前 outermost。\n * - 写入值取该实例的**计算值**，因此消费者在 host 上覆盖 `--wui-color-page`（包括在自己的\n *   媒体查询里覆盖）会被原样镜像，主题与消费者的优先级关系不因此改变。\n * - 全部断开时**保留最后值**：清掉属性会让 body 背景在主题卸载/重挂的间隙闪回 UA 白底，\n *   而那正是本能力要消除的观感。代价是最后一个主题卸载后 documentElement 上仍留着一个自定义\n *   属性；消费者自己写 body 背景时它不产生任何影响。\n * - `appearance=\"system\"` 的 token 计算值仍由组件内部 CSS 的 `prefers-color-scheme` 决定；\n *   root 同步与 `resolved-appearance` 输出共用同一个 MediaQueryList 监听，翻转时一次重算。\n * - 登记表强引用实例，但删除路径只有组件自己的 disconnectedCallback：自定义元素反应保证移除\n *   必然触发它，不存在 open-overlay 那种「面板被 portal 搬运」需要惰性兜底回收的形状。\n */\n\nconst ROOT_PAGE_TOKEN = '--wui-color-page'\n\n/** 按 connect 顺序排列的已登记 active 实例；队首持有 root 同步权。 */\nconst registered = new Set<HTMLElement>()\n\nlet schemeQuery: MediaQueryList | undefined\nconst schemeSubscribers = new Set<() => void>()\n\n/*\n * dev 期测试钩子：登记表尺寸。\n *\n * 「组件卸载后忘了撤销登记」是这层唯一的结构性风险，而 `registered` 无法从公开面观察——\n * 调用方只看见 documentElement 上的值，看不到注册表。有了它，泄漏在测试里是一个可直接断言的\n * 数字。`import.meta.env.DEV` 是编译期常量，生产构建里整段消失。\n */\ndeclare global {\n  // eslint-disable-next-line no-var\n  var __webUiThemeRootSyncCount: () => number\n}\n\nif (import.meta.env.DEV) {\n  globalThis.__webUiThemeRootSyncCount = () => registered.size\n}\n\nfunction isRootSyncOwner(host: HTMLElement): boolean {\n  return registered.values().next().value === host\n}\n\n/** 计算值可能为空（jsdom、未激活作用域、已断开），空值不写入也不删除既有值。 */\nfunction readPageColor(host: HTMLElement): string {\n  return getComputedStyle(host).getPropertyValue(ROOT_PAGE_TOKEN).trim()\n}\n\nfunction syncRootPageColor(): void {\n  const owner = registered.values().next().value as HTMLElement | undefined\n  if (!owner) return\n  // 已断开的所有者不能再写 root：整棵子树一起卸载时，队首顺延到的实例已经不在文档里\n  // （浏览器对 detached 元素取不到计算值，jsdom 却仍按选择器匹配返回旧值），\n  // 不设这道坎就会在两种环境里得到不同的 root 末值。\n  if (!owner.isConnected) return\n  const value = readPageColor(owner)\n  if (!value) return\n  const style = document.documentElement.style\n  // 与当前行内值比较而不是与模块记忆的上次写入比较：消费者中途覆写时，下一次同步仍然夺回\n  // 归属权，而值没变时不做无谓的样式写入。\n  if (style.getPropertyValue(ROOT_PAGE_TOKEN) === value) return\n  style.setProperty(ROOT_PAGE_TOKEN, value)\n}\n\nfunction handleSchemeChange(): void {\n  syncRootPageColor()\n  for (const subscriber of schemeSubscribers) subscriber()\n}\n\nfunction syncSchemeListener(): void {\n  if (registered.size > 0 || schemeSubscribers.size > 0) {\n    if (schemeQuery) return\n    try {\n      schemeQuery = window.matchMedia('(prefers-color-scheme: dark)')\n    } catch {\n      // jsdom 等没有 matchMedia 的环境：system 档跟随不到系统翻转，登记与输出仍保持当前值。\n      return\n    }\n    schemeQuery.addEventListener('change', handleSchemeChange)\n    return\n  }\n  if (!schemeQuery) return\n  schemeQuery.removeEventListener('change', handleSchemeChange)\n  schemeQuery = undefined\n}\n\n/*\n * 复用 root 同步已经持有的系统 scheme 监听：resolved-appearance 只登记回调，不另建 MediaQueryList。\n * 登记先于订阅或订阅先于登记都可以；syncSchemeListener 以两者任一非空为准。\n */\nexport function subscribeThemeSystemAppearanceChange(listener: () => void): () => void {\n  schemeSubscribers.add(listener)\n  syncSchemeListener()\n  return () => {\n    if (!schemeSubscribers.delete(listener)) return\n    syncSchemeListener()\n  }\n}\n\n/**\n * 登记一个 active theme。幂等，组件的 connectedCallback 与 updated() 可以无条件调用：\n * 已在表中的实例重复登记保留原队序，只有队首实例会刷新 root 值。\n */\nexport function registerThemeRootSync(host: HTMLElement): void {\n  registered.add(host)\n  syncSchemeListener()\n  // 嵌套实例的变更按契约不影响 root 值；顺延不到新实例时 root 值同样不变。\n  if (!isRootSyncOwner(host)) return\n  syncRootPageColor()\n}\n\n/** 撤销登记。移交同步权时由新的队首实例立即接管 root 值。 */\nexport function unregisterThemeRootSync(host: HTMLElement): void {\n  if (!registered.delete(host)) return\n  syncSchemeListener()\n  syncRootPageColor()\n}\n"],"mappings":";AAgCA,IAAM,IAAkB,oBAGlB,oBAAa,IAAI,IAAiB,GAEpC,GACE,oBAAoB,IAAI,IAAgB;AAkB9C,SAAS,EAAgB,GAA4B;CACnD,OAAO,EAAW,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,UAAU;AAC9C;AAGA,SAAS,EAAc,GAA2B;CAChD,OAAO,iBAAiB,CAAI,CAAC,CAAC,iBAAiB,CAAe,CAAC,CAAC,KAAK;AACvE;AAEA,SAAS,IAA0B;CACjC,IAAM,IAAQ,EAAW,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC;CAKzC,IAJI,CAAC,KAID,CAAC,EAAM,aAAa;CACxB,IAAM,IAAQ,EAAc,CAAK;CACjC,IAAI,CAAC,GAAO;CACZ,IAAM,IAAQ,SAAS,gBAAgB;CAGnC,EAAM,iBAAiB,CAAe,MAAM,KAChD,EAAM,YAAY,GAAiB,CAAK;AAC1C;AAEA,SAAS,IAA2B;CAClC,EAAkB;CAClB,KAAK,IAAM,KAAc,GAAmB,EAAW;AACzD;AAEA,SAAS,IAA2B;CAClC,IAAI,EAAW,OAAO,KAAK,EAAkB,OAAO,GAAG;EACrD,IAAI,GAAa;EACjB,IAAI;GACF,IAAc,OAAO,WAAW,8BAA8B;EAChE,QAAQ;GAEN;EACF;EACA,EAAY,iBAAiB,UAAU,CAAkB;EACzD;CACF;CACK,AAEL,OADA,EAAY,oBAAoB,UAAU,CAAkB,GAC9C,KAAA;AAChB;AAMA,SAAgB,EAAqC,GAAkC;CAGrF,OAFA,EAAkB,IAAI,CAAQ,GAC9B,EAAmB,SACN;EACN,EAAkB,OAAO,CAAQ,KACtC,EAAmB;CACrB;AACF;AAMA,SAAgB,EAAsB,GAAyB;CAC7D,EAAW,IAAI,CAAI,GACnB,EAAmB,GAEd,EAAgB,CAAI,KACzB,EAAkB;AACpB;AAGA,SAAgB,EAAwB,GAAyB;CAC1D,EAAW,OAAO,CAAI,MAC3B,EAAmB,GACnB,EAAkB;AACpB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greypan/web-ui",
-  "version": "8.0.0",
+  "version": "9.0.0",
   "description": "Lit-based web components for React, Vue, and vanilla JS",
   "license": "MIT",
   "repository": {
@@ -37,14 +37,18 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
-    "@greypan/browser-kit": "3.0.0",
-    "@greypan/js-kit": "3.0.0",
+    "@greypan/browser-kit": "3.0.1",
+    "@greypan/js-kit": "3.0.1",
     "@lit/context": "^1.1.6"
   },
   "devDependencies": {
     "@greypan/tsconfig": "1.0.5",
+    "@iconify-json/akar-icons": "^1.2.7",
+    "@iconify-json/bi": "^1.2.7",
+    "@iconify-json/fluent": "^1.2.58",
     "@iconify-json/jam": "^1.2.3",
     "@iconify-json/lucide": "^1.2.126",
+    "@iconify-json/mdi": "^1.2.3",
     "@iconify-json/si": "^1.2.17",
     "@iconify-json/tabler": "^1.2.38",
     "@iconify-json/heroicons": "^1.2.3",
@@ -85,7 +89,7 @@
   "scripts": {
     "build": "vp build",
     "test": "vp test run",
-    "dev": "vp build --watch",
+    "dev": "vp build --watch --emptyOutDir=false",
     "generate-icons": "node --experimental-strip-types scripts/generate-icons.ts"
   }
 }