Keep first menu actions across media-query transitions

public/r/styles/base-luma/on-media.json

@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/lib/on-media.ts",
-      "content": "type Trigger = { root: Element; selector: string; event?: string }\n\n/** Import and mount only while the query matches; dispose on exit. */\nexport function onMedia<T>(\n  query: string,\n  load: () => Promise<T>,\n  mount: (module: T) => () => void,\n  trigger?: Trigger\n) {\n  const media = window.matchMedia(query)\n  let disposed = false\n  let epoch = 0\n  let cleanup: (() => void) | undefined\n  let pendingClick: HTMLElement | undefined\n  let pendingEvent: CustomEvent | undefined\n\n  const replayClick = () => {\n    const target = pendingClick\n    const event = pendingEvent\n    pendingClick = undefined\n    pendingEvent = undefined\n    if (event && trigger?.root.isConnected)\n      trigger.root.dispatchEvent(\n        new CustomEvent(event.type, { detail: event.detail })\n      )\n    else if (target?.isConnected)\n      target.dispatchEvent(new MouseEvent(\"click\", { cancelable: true }))\n  }\n\n  const update = async () => {\n    const current = ++epoch\n    pendingClick = undefined\n    pendingEvent = undefined\n    cleanup?.()\n    cleanup = undefined\n    if (!media.matches || disposed) return\n    try {\n      const module = await load()\n      if (disposed || !media.matches || current !== epoch) return\n      cleanup = mount(module)\n      replayClick()\n    } catch (error) {\n      if (!disposed && current === epoch) {\n        pendingClick = undefined\n        pendingEvent = undefined\n        console.error(error)\n      }\n    }\n  }\n  const click = (event: Event) => {\n    if (\n      !trigger ||\n      cleanup ||\n      disposed ||\n      !media.matches ||\n      event.defaultPrevented\n    )\n      return\n    if (!(event.target instanceof Element)) return\n    const target = event.target.closest<HTMLElement>(trigger.selector)\n    if (!target || !trigger.root.contains(target)) return\n    pendingClick ??= target\n    pendingEvent = undefined\n    event.preventDefault()\n  }\n  const request = (event: Event) => {\n    if (cleanup || disposed || !media.matches || event.target !== trigger?.root)\n      return\n    if (!(event instanceof CustomEvent)) return\n    pendingEvent = event\n    pendingClick = undefined\n  }\n  const change = () => void update()\n  media.addEventListener(\"change\", change)\n  trigger?.root.addEventListener(\"click\", click, true)\n  if (trigger?.event) trigger.root.addEventListener(trigger.event, request)\n  change()\n  return () => {\n    disposed = true\n    epoch++\n    pendingClick = undefined\n    pendingEvent = undefined\n    media.removeEventListener(\"change\", change)\n    trigger?.root.removeEventListener(\"click\", click, true)\n    if (trigger?.event) trigger.root.removeEventListener(trigger.event, request)\n    cleanup?.()\n    cleanup = undefined\n  }\n}\n",
+      "content": "type Trigger = { root: Element; selector: string; event?: string }\n\n/** Import and mount only while the query matches; dispose on exit. */\nexport function onMedia<T>(\n  query: string,\n  load: () => Promise<T>,\n  mount: (module: T) => () => void,\n  trigger?: Trigger\n) {\n  const media = window.matchMedia(query)\n  let disposed = false\n  let epoch = 0\n  let cleanup: (() => void) | undefined\n  let pendingClick: HTMLElement | undefined\n  let pendingEvent: CustomEvent | undefined\n\n  const matches = () => {\n    const matching = window.matchMedia(query).matches\n    if (!matching) {\n      pendingClick = undefined\n      pendingEvent = undefined\n    }\n    return matching\n  }\n\n  const replayClick = () => {\n    const target = pendingClick\n    const event = pendingEvent\n    pendingClick = undefined\n    pendingEvent = undefined\n    if (event && trigger?.root.isConnected)\n      trigger.root.dispatchEvent(\n        new CustomEvent(event.type, { detail: event.detail })\n      )\n    else if (target?.isConnected)\n      target.dispatchEvent(new MouseEvent(\"click\", { cancelable: true }))\n  }\n\n  const update = async () => {\n    const current = ++epoch\n    cleanup?.()\n    cleanup = undefined\n    if (!matches() || disposed) {\n      pendingClick = undefined\n      pendingEvent = undefined\n      return\n    }\n    try {\n      const module = await load()\n      if (disposed || current !== epoch || !matches()) return\n      cleanup = mount(module)\n      replayClick()\n    } catch (error) {\n      if (!disposed && current === epoch) {\n        pendingClick = undefined\n        pendingEvent = undefined\n        console.error(error)\n      }\n    }\n  }\n  const click = (event: Event) => {\n    if (!trigger || cleanup || disposed || !matches() || event.defaultPrevented)\n      return\n    if (!(event.target instanceof Element)) return\n    const target = event.target.closest<HTMLElement>(trigger.selector)\n    if (!target || !trigger.root.contains(target)) return\n    pendingClick ??= target\n    pendingEvent = undefined\n    event.preventDefault()\n  }\n  const request = (event: Event) => {\n    if (cleanup || disposed || !matches() || event.target !== trigger?.root)\n      return\n    if (!(event instanceof CustomEvent)) return\n    pendingEvent = event\n    pendingClick = undefined\n  }\n  const change = () => void update()\n  media.addEventListener(\"change\", change)\n  trigger?.root.addEventListener(\"click\", click, true)\n  if (trigger?.event) trigger.root.addEventListener(trigger.event, request)\n  change()\n  return () => {\n    disposed = true\n    epoch++\n    pendingClick = undefined\n    pendingEvent = undefined\n    media.removeEventListener(\"change\", change)\n    trigger?.root.removeEventListener(\"click\", click, true)\n    if (trigger?.event) trigger.root.removeEventListener(trigger.event, request)\n    cleanup?.()\n    cleanup = undefined\n  }\n}\n",
       "type": "registry:lib"
     }
   ],

public/r/styles/base-lyra/on-media.json

@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/lib/on-media.ts",
-      "content": "type Trigger = { root: Element; selector: string; event?: string }\n\n/** Import and mount only while the query matches; dispose on exit. */\nexport function onMedia<T>(\n  query: string,\n  load: () => Promise<T>,\n  mount: (module: T) => () => void,\n  trigger?: Trigger\n) {\n  const media = window.matchMedia(query)\n  let disposed = false\n  let epoch = 0\n  let cleanup: (() => void) | undefined\n  let pendingClick: HTMLElement | undefined\n  let pendingEvent: CustomEvent | undefined\n\n  const replayClick = () => {\n    const target = pendingClick\n    const event = pendingEvent\n    pendingClick = undefined\n    pendingEvent = undefined\n    if (event && trigger?.root.isConnected)\n      trigger.root.dispatchEvent(\n        new CustomEvent(event.type, { detail: event.detail })\n      )\n    else if (target?.isConnected)\n      target.dispatchEvent(new MouseEvent(\"click\", { cancelable: true }))\n  }\n\n  const update = async () => {\n    const current = ++epoch\n    pendingClick = undefined\n    pendingEvent = undefined\n    cleanup?.()\n    cleanup = undefined\n    if (!media.matches || disposed) return\n    try {\n      const module = await load()\n      if (disposed || !media.matches || current !== epoch) return\n      cleanup = mount(module)\n      replayClick()\n    } catch (error) {\n      if (!disposed && current === epoch) {\n        pendingClick = undefined\n        pendingEvent = undefined\n        console.error(error)\n      }\n    }\n  }\n  const click = (event: Event) => {\n    if (\n      !trigger ||\n      cleanup ||\n      disposed ||\n      !media.matches ||\n      event.defaultPrevented\n    )\n      return\n    if (!(event.target instanceof Element)) return\n    const target = event.target.closest<HTMLElement>(trigger.selector)\n    if (!target || !trigger.root.contains(target)) return\n    pendingClick ??= target\n    pendingEvent = undefined\n    event.preventDefault()\n  }\n  const request = (event: Event) => {\n    if (cleanup || disposed || !media.matches || event.target !== trigger?.root)\n      return\n    if (!(event instanceof CustomEvent)) return\n    pendingEvent = event\n    pendingClick = undefined\n  }\n  const change = () => void update()\n  media.addEventListener(\"change\", change)\n  trigger?.root.addEventListener(\"click\", click, true)\n  if (trigger?.event) trigger.root.addEventListener(trigger.event, request)\n  change()\n  return () => {\n    disposed = true\n    epoch++\n    pendingClick = undefined\n    pendingEvent = undefined\n    media.removeEventListener(\"change\", change)\n    trigger?.root.removeEventListener(\"click\", click, true)\n    if (trigger?.event) trigger.root.removeEventListener(trigger.event, request)\n    cleanup?.()\n    cleanup = undefined\n  }\n}\n",
+      "content": "type Trigger = { root: Element; selector: string; event?: string }\n\n/** Import and mount only while the query matches; dispose on exit. */\nexport function onMedia<T>(\n  query: string,\n  load: () => Promise<T>,\n  mount: (module: T) => () => void,\n  trigger?: Trigger\n) {\n  const media = window.matchMedia(query)\n  let disposed = false\n  let epoch = 0\n  let cleanup: (() => void) | undefined\n  let pendingClick: HTMLElement | undefined\n  let pendingEvent: CustomEvent | undefined\n\n  const matches = () => {\n    const matching = window.matchMedia(query).matches\n    if (!matching) {\n      pendingClick = undefined\n      pendingEvent = undefined\n    }\n    return matching\n  }\n\n  const replayClick = () => {\n    const target = pendingClick\n    const event = pendingEvent\n    pendingClick = undefined\n    pendingEvent = undefined\n    if (event && trigger?.root.isConnected)\n      trigger.root.dispatchEvent(\n        new CustomEvent(event.type, { detail: event.detail })\n      )\n    else if (target?.isConnected)\n      target.dispatchEvent(new MouseEvent(\"click\", { cancelable: true }))\n  }\n\n  const update = async () => {\n    const current = ++epoch\n    cleanup?.()\n    cleanup = undefined\n    if (!matches() || disposed) {\n      pendingClick = undefined\n      pendingEvent = undefined\n      return\n    }\n    try {\n      const module = await load()\n      if (disposed || current !== epoch || !matches()) return\n      cleanup = mount(module)\n      replayClick()\n    } catch (error) {\n      if (!disposed && current === epoch) {\n        pendingClick = undefined\n        pendingEvent = undefined\n        console.error(error)\n      }\n    }\n  }\n  const click = (event: Event) => {\n    if (!trigger || cleanup || disposed || !matches() || event.defaultPrevented)\n      return\n    if (!(event.target instanceof Element)) return\n    const target = event.target.closest<HTMLElement>(trigger.selector)\n    if (!target || !trigger.root.contains(target)) return\n    pendingClick ??= target\n    pendingEvent = undefined\n    event.preventDefault()\n  }\n  const request = (event: Event) => {\n    if (cleanup || disposed || !matches() || event.target !== trigger?.root)\n      return\n    if (!(event instanceof CustomEvent)) return\n    pendingEvent = event\n    pendingClick = undefined\n  }\n  const change = () => void update()\n  media.addEventListener(\"change\", change)\n  trigger?.root.addEventListener(\"click\", click, true)\n  if (trigger?.event) trigger.root.addEventListener(trigger.event, request)\n  change()\n  return () => {\n    disposed = true\n    epoch++\n    pendingClick = undefined\n    pendingEvent = undefined\n    media.removeEventListener(\"change\", change)\n    trigger?.root.removeEventListener(\"click\", click, true)\n    if (trigger?.event) trigger.root.removeEventListener(trigger.event, request)\n    cleanup?.()\n    cleanup = undefined\n  }\n}\n",
       "type": "registry:lib"
     }
   ],

public/r/styles/base-maia/on-media.json

@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/lib/on-media.ts",
-      "content": "type Trigger = { root: Element; selector: string; event?: string }\n\n/** Import and mount only while the query matches; dispose on exit. */\nexport function onMedia<T>(\n  query: string,\n  load: () => Promise<T>,\n  mount: (module: T) => () => void,\n  trigger?: Trigger\n) {\n  const media = window.matchMedia(query)\n  let disposed = false\n  let epoch = 0\n  let cleanup: (() => void) | undefined\n  let pendingClick: HTMLElement | undefined\n  let pendingEvent: CustomEvent | undefined\n\n  const replayClick = () => {\n    const target = pendingClick\n    const event = pendingEvent\n    pendingClick = undefined\n    pendingEvent = undefined\n    if (event && trigger?.root.isConnected)\n      trigger.root.dispatchEvent(\n        new CustomEvent(event.type, { detail: event.detail })\n      )\n    else if (target?.isConnected)\n      target.dispatchEvent(new MouseEvent(\"click\", { cancelable: true }))\n  }\n\n  const update = async () => {\n    const current = ++epoch\n    pendingClick = undefined\n    pendingEvent = undefined\n    cleanup?.()\n    cleanup = undefined\n    if (!media.matches || disposed) return\n    try {\n      const module = await load()\n      if (disposed || !media.matches || current !== epoch) return\n      cleanup = mount(module)\n      replayClick()\n    } catch (error) {\n      if (!disposed && current === epoch) {\n        pendingClick = undefined\n        pendingEvent = undefined\n        console.error(error)\n      }\n    }\n  }\n  const click = (event: Event) => {\n    if (\n      !trigger ||\n      cleanup ||\n      disposed ||\n      !media.matches ||\n      event.defaultPrevented\n    )\n      return\n    if (!(event.target instanceof Element)) return\n    const target = event.target.closest<HTMLElement>(trigger.selector)\n    if (!target || !trigger.root.contains(target)) return\n    pendingClick ??= target\n    pendingEvent = undefined\n    event.preventDefault()\n  }\n  const request = (event: Event) => {\n    if (cleanup || disposed || !media.matches || event.target !== trigger?.root)\n      return\n    if (!(event instanceof CustomEvent)) return\n    pendingEvent = event\n    pendingClick = undefined\n  }\n  const change = () => void update()\n  media.addEventListener(\"change\", change)\n  trigger?.root.addEventListener(\"click\", click, true)\n  if (trigger?.event) trigger.root.addEventListener(trigger.event, request)\n  change()\n  return () => {\n    disposed = true\n    epoch++\n    pendingClick = undefined\n    pendingEvent = undefined\n    media.removeEventListener(\"change\", change)\n    trigger?.root.removeEventListener(\"click\", click, true)\n    if (trigger?.event) trigger.root.removeEventListener(trigger.event, request)\n    cleanup?.()\n    cleanup = undefined\n  }\n}\n",
+      "content": "type Trigger = { root: Element; selector: string; event?: string }\n\n/** Import and mount only while the query matches; dispose on exit. */\nexport function onMedia<T>(\n  query: string,\n  load: () => Promise<T>,\n  mount: (module: T) => () => void,\n  trigger?: Trigger\n) {\n  const media = window.matchMedia(query)\n  let disposed = false\n  let epoch = 0\n  let cleanup: (() => void) | undefined\n  let pendingClick: HTMLElement | undefined\n  let pendingEvent: CustomEvent | undefined\n\n  const matches = () => {\n    const matching = window.matchMedia(query).matches\n    if (!matching) {\n      pendingClick = undefined\n      pendingEvent = undefined\n    }\n    return matching\n  }\n\n  const replayClick = () => {\n    const target = pendingClick\n    const event = pendingEvent\n    pendingClick = undefined\n    pendingEvent = undefined\n    if (event && trigger?.root.isConnected)\n      trigger.root.dispatchEvent(\n        new CustomEvent(event.type, { detail: event.detail })\n      )\n    else if (target?.isConnected)\n      target.dispatchEvent(new MouseEvent(\"click\", { cancelable: true }))\n  }\n\n  const update = async () => {\n    const current = ++epoch\n    cleanup?.()\n    cleanup = undefined\n    if (!matches() || disposed) {\n      pendingClick = undefined\n      pendingEvent = undefined\n      return\n    }\n    try {\n      const module = await load()\n      if (disposed || current !== epoch || !matches()) return\n      cleanup = mount(module)\n      replayClick()\n    } catch (error) {\n      if (!disposed && current === epoch) {\n        pendingClick = undefined\n        pendingEvent = undefined\n        console.error(error)\n      }\n    }\n  }\n  const click = (event: Event) => {\n    if (!trigger || cleanup || disposed || !matches() || event.defaultPrevented)\n      return\n    if (!(event.target instanceof Element)) return\n    const target = event.target.closest<HTMLElement>(trigger.selector)\n    if (!target || !trigger.root.contains(target)) return\n    pendingClick ??= target\n    pendingEvent = undefined\n    event.preventDefault()\n  }\n  const request = (event: Event) => {\n    if (cleanup || disposed || !matches() || event.target !== trigger?.root)\n      return\n    if (!(event instanceof CustomEvent)) return\n    pendingEvent = event\n    pendingClick = undefined\n  }\n  const change = () => void update()\n  media.addEventListener(\"change\", change)\n  trigger?.root.addEventListener(\"click\", click, true)\n  if (trigger?.event) trigger.root.addEventListener(trigger.event, request)\n  change()\n  return () => {\n    disposed = true\n    epoch++\n    pendingClick = undefined\n    pendingEvent = undefined\n    media.removeEventListener(\"change\", change)\n    trigger?.root.removeEventListener(\"click\", click, true)\n    if (trigger?.event) trigger.root.removeEventListener(trigger.event, request)\n    cleanup?.()\n    cleanup = undefined\n  }\n}\n",
       "type": "registry:lib"
     }
   ],