@alfakit/vue 0.1.9 → 0.1.10

package/dist/components/notifications/NotificationsMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationsMenu.js","names":["_sfc_main","NotificationsMenu_vue_vue_type_script_setup_true_lang_default","NotificationsMenu_default"],"sources":["../../../src/components/notifications/NotificationsMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  NotificationCenter,\n  notificationTintStyles,\n  onDatabaseNotificationsSent,\n  onOpenDatabaseNotifications,\n} from '@alfakit/core'\nimport { BellIcon, CheckCheckIcon, Trash2Icon } from '@lucide/vue'\nimport { computed, onMounted, onScopeDispose, ref, watch } from 'vue'\nimport { useStore } from '../../composables/use-store'\nimport { useDirection, useFormatter, usePanel, useT } from '../../context'\nimport { cssColor, textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Button from '../ui/Button.vue'\nimport Popover from '../ui/Popover.vue'\nimport PopoverContent from '../ui/PopoverContent.vue'\nimport PopoverTrigger from '../ui/PopoverTrigger.vue'\nimport ScrollArea from '../ui/ScrollArea.vue'\nimport Spinner from '../ui/Spinner.vue'\nimport NotificationActionButton from './NotificationActionButton.vue'\n\n/**\n * Bell menu for database notifications. It also opens when something calls\n * `openDatabaseNotifications()` (or an action with `->openDatabaseNotifications()`).\n * `variant=\"sidebar\"`: a full-width row with a label, for layouts that put it in the sidebar.\n */\nconst props = withDefaults(defineProps<{ variant?: 'topbar' | 'sidebar' }>(), {\n  variant: 'topbar',\n})\nconst t = useT()\nconst direction = useDirection()\nconst panel = usePanel()\nconst config = computed(() => panel.value.databaseNotifications)\nconst endpoints = panel.value.endpoints\n\nconst center =\n  endpoints.notifications && endpoints.notificationsReadAll && endpoints.notificationsDestroyAll\n    ? new NotificationCenter(\n        {\n          notifications: endpoints.notifications,\n          notificationsReadAll: endpoints.notificationsReadAll,\n          notificationsDestroyAll: endpoints.notificationsDestroyAll,\n        },\n        config.value?.unreadCount ?? 0,\n      )\n    : null\n\nconst open = ref(false)\nconst state = useStore(\n  center?.store ?? {\n    get: () => ({ notifications: [], unreadCount: 0, loading: false, hasMore: false, page: 0 }),\n    subscribe: () => () => {},\n  },\n)\n\n// Polling starts in the browser only: a server render must not leave timers behind.\nonMounted(() => {\n  watch(\n    () => config.value?.pollingInterval,\n    (interval) => center?.startPolling(interval),\n    { immediate: true },\n  )\n})\n\nwatch(open, (isOpen) => {\n  if (isOpen) void center?.load()\n})\n\n// Every visit brings the server's unread count (another user after impersonating, or\n// notifications read in another tab): follow it instead of waiting for the next poll.\nwatch(\n  () => config.value?.unreadCount,\n  (count) => {\n    if (center && typeof count === 'number' && count !== center.store.get().unreadCount) {\n      center.store.update({ unreadCount: count })\n    }\n  },\n)\n\n// Realtime notifications announce stored ones, so the unread count updates right away.\nlet stopListening: (() => void) | null = null\nonMounted(() => {\n  stopListening = center ? onDatabaseNotificationsSent(() => void center.load()) : null\n})\nonScopeDispose(() => stopListening?.())\n\n// `openDatabaseNotifications()`: opened from code or an action.\nlet stopOpenListener: (() => void) | null = null\nonMounted(() => {\n  stopOpenListener = onOpenDatabaseNotifications(() => (open.value = true))\n})\nonScopeDispose(() => stopOpenListener?.())\n\nonScopeDispose(() => center?.stopPolling())\nconst format = useFormatter()\n</script>\n\n<template>\n  <Popover v-if=\"config && center\" :open=\"open\" @update:open=\"open = $event\">\n    <PopoverTrigger as-child>\n      <Button\n        v-if=\"props.variant === 'sidebar'\"\n        type=\"button\"\n        variant=\"ghost\"\n        class=\"relative w-full justify-start gap-2 group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-0\"\n        data-slot=\"notifications-trigger\"\n        data-variant=\"sidebar\"\n      >\n        <!-- In a collapsed (icon) sidebar only the bell and its badge stay visible. -->\n        <Icon\n          name=\"alfakit::panels.topbar.open-database-notifications-button\"\n          :fallback=\"BellIcon\"\n        />\n        <span class=\"flex-1 text-start group-data-[collapsible=icon]:sr-only\">{{\n          t('notifications', {}, 'Notifications')\n        }}</span>\n        <span\n          v-if=\"state.unreadCount > 0\"\n          class=\"bg-primary text-primary-foreground flex h-5 min-w-5 items-center justify-center rounded-full px-1 text-xs font-medium group-data-[collapsible=icon]:absolute group-data-[collapsible=icon]:-end-1 group-data-[collapsible=icon]:-top-1 group-data-[collapsible=icon]:h-4 group-data-[collapsible=icon]:min-w-4 group-data-[collapsible=icon]:text-[10px]\"\n          >{{ state.unreadCount > 99 ? '99+' : state.unreadCount }}\n          <span class=\"sr-only\">{{ t('unread_notifications', {}, 'unread') }}</span></span\n        >\n      </Button>\n      <Button\n        v-else\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"icon\"\n        class=\"relative\"\n        data-slot=\"notifications-trigger\"\n        :aria-label=\"t('notifications', {}, 'Notifications')\"\n      >\n        <Icon\n          name=\"alfakit::panels.topbar.open-database-notifications-button\"\n          :fallback=\"BellIcon\"\n        />\n        <span\n          v-if=\"state.unreadCount > 0\"\n          class=\"bg-primary text-primary-foreground absolute -end-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-medium\"\n          >{{ state.unreadCount > 99 ? '99+' : state.unreadCount }}</span\n        >\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent\n      :align=\"props.variant === 'sidebar' ? 'start' : 'end'\"\n      :side=\"props.variant === 'sidebar' ? (direction === 'rtl' ? 'left' : 'right') : 'bottom'\"\n      class=\"w-80 p-0 sm:w-96\"\n    >\n      <div class=\"flex items-center justify-between border-b px-3 py-2\">\n        <span class=\"text-sm font-semibold\">{{ t('notifications', {}, 'Notifications') }}</span>\n        <div class=\"flex items-center gap-1\">\n          <Button\n            v-if=\"state.unreadCount > 0\"\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            :title=\"t('mark_all_read', {}, 'Mark all as read')\"\n            @click=\"void center.markAllAsRead()\"\n            ><CheckCheckIcon\n          /></Button>\n          <Button\n            v-if=\"state.notifications.length > 0\"\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            :title=\"t('clear_notifications', {}, 'Clear notifications')\"\n            @click=\"void center.clear()\"\n            ><Trash2Icon\n          /></Button>\n        </div>\n      </div>\n      <ScrollArea class=\"max-h-96\">\n        <div\n          v-if=\"state.loading && state.notifications.length === 0\"\n          class=\"flex justify-center py-8\"\n        >\n          <Spinner />\n        </div>\n        <p\n          v-else-if=\"state.notifications.length === 0\"\n          class=\"text-muted-foreground px-3 py-8 text-center text-sm\"\n        >\n          {{ t('no_notifications', {}, 'You have no notifications.') }}\n        </p>\n        <ul v-else class=\"divide-y\">\n          <li\n            v-for=\"notification in state.notifications\"\n            :key=\"notification.id\"\n            :class=\"cn('flex gap-3 px-3 py-3', !notification.readAt && 'bg-primary/5')\"\n            :style=\"\n              notification.color\n                ? notificationTintStyles(cssColor(notification.color)).item\n                : undefined\n            \"\n          >\n            <Icon\n              v-if=\"notification.icon\"\n              :name=\"notification.icon\"\n              :class=\"\n                cn(\n                  'mt-0.5 size-5 shrink-0',\n                  notification.iconColor && textColorClasses[notification.iconColor],\n                )\n              \"\n            />\n            <div class=\"flex min-w-0 flex-1 flex-col gap-1\">\n              <div class=\"flex items-start justify-between gap-2\">\n                <p class=\"text-sm font-medium\">{{ notification.title }}</p>\n                <button\n                  v-if=\"!notification.readAt\"\n                  type=\"button\"\n                  class=\"focus-visible:ring-ring/50 -me-2 -mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full outline-none focus-visible:ring-[3px]\"\n                  :aria-label=\"t('mark_as_read', {}, 'Mark as read')\"\n                  @click=\"void center.markAsRead(notification.id)\"\n                >\n                  <span class=\"bg-primary size-2 rounded-full\" aria-hidden=\"true\" />\n                </button>\n              </div>\n              <p\n                v-if=\"notification.body\"\n                class=\"text-muted-foreground text-sm\"\n                v-html=\"notification.body\"\n              />\n              <time v-if=\"notification.date\" class=\"text-muted-foreground text-xs\">{{\n                format.relative(notification.date)\n              }}</time>\n              <div v-if=\"notification.actions\" class=\"flex flex-wrap gap-1\">\n                <NotificationActionButton\n                  v-for=\"action in notification.actions\"\n                  :key=\"action.name\"\n                  :action=\"action\"\n                  :on-mark-as-read=\"() => void center!.markAsRead(notification.id)\"\n                  :on-mark-as-unread=\"() => void center!.markAsUnread(notification.id)\"\n                />\n              </div>\n            </div>\n          </li>\n        </ul>\n        <div\n          v-if=\"state.hasMore && state.notifications.length > 0\"\n          class=\"flex justify-center border-t p-2\"\n        >\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"sm\"\n            :disabled=\"state.loading\"\n            @click=\"void center!.loadMore()\"\n          >\n            <Spinner v-if=\"state.loading\" />\n            {{ t('load_more', {}, 'Load more') }}\n          </Button>\n        </div>\n      </ScrollArea>\n    </PopoverContent>\n  </Popover>\n</template>\n"],"mappings":""}
+{"version":3,"file":"NotificationsMenu.js","names":["_sfc_main","NotificationsMenu_vue_vue_type_script_setup_true_lang_default","NotificationsMenu_default"],"sources":["../../../src/components/notifications/NotificationsMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  NotificationCenter,\n  notificationTintStyles,\n  onDatabaseNotificationsSent,\n  onOpenDatabaseNotifications,\n  pwaStore,\n  startPwa,\n  togglePushNotifications,\n} from '@alfakit/core'\nimport { BellIcon, BellOffIcon, BellRingIcon, CheckCheckIcon, Trash2Icon } from '@lucide/vue'\nimport { computed, onMounted, onScopeDispose, ref, watch } from 'vue'\nimport { toast } from 'vue-sonner'\nimport { useStore } from '../../composables/use-store'\nimport { useDirection, useFormatter, usePanel, useT } from '../../context'\nimport { cssColor, textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Button from '../ui/Button.vue'\nimport Popover from '../ui/Popover.vue'\nimport PopoverContent from '../ui/PopoverContent.vue'\nimport PopoverTrigger from '../ui/PopoverTrigger.vue'\nimport ScrollArea from '../ui/ScrollArea.vue'\nimport Spinner from '../ui/Spinner.vue'\nimport NotificationActionButton from './NotificationActionButton.vue'\n\n/**\n * Bell menu for database notifications. It also opens when something calls\n * `openDatabaseNotifications()` (or an action with `->openDatabaseNotifications()`).\n * `variant=\"sidebar\"`: a full-width row with a label, for layouts that put it in the sidebar.\n */\nconst props = withDefaults(defineProps<{ variant?: 'topbar' | 'sidebar' }>(), {\n  variant: 'topbar',\n})\nconst t = useT()\nconst direction = useDirection()\nconst panel = usePanel()\nconst config = computed(() => panel.value.databaseNotifications)\nconst endpoints = panel.value.endpoints\n\nconst center =\n  endpoints.notifications && endpoints.notificationsReadAll && endpoints.notificationsDestroyAll\n    ? new NotificationCenter(\n        {\n          notifications: endpoints.notifications,\n          notificationsReadAll: endpoints.notificationsReadAll,\n          notificationsDestroyAll: endpoints.notificationsDestroyAll,\n        },\n        config.value?.unreadCount ?? 0,\n      )\n    : null\n\nconst open = ref(false)\nconst state = useStore(\n  center?.store ?? {\n    get: () => ({ notifications: [], unreadCount: 0, loading: false, hasMore: false, page: 0 }),\n    subscribe: () => () => {},\n  },\n)\n\n// Polling starts in the browser only: a server render must not leave timers behind.\nonMounted(() => {\n  watch(\n    () => config.value?.pollingInterval,\n    (interval) => center?.startPolling(interval),\n    { immediate: true },\n  )\n})\n\nwatch(open, (isOpen) => {\n  if (isOpen) void center?.load()\n})\n\n// Every visit brings the server's unread count (another user after impersonating, or\n// notifications read in another tab): follow it instead of waiting for the next poll.\nwatch(\n  () => config.value?.unreadCount,\n  (count) => {\n    if (center && typeof count === 'number' && count !== center.store.get().unreadCount) {\n      center.store.update({ unreadCount: count })\n    }\n  },\n)\n\n// Realtime notifications announce stored ones, so the unread count updates right away.\nlet stopListening: (() => void) | null = null\nonMounted(() => {\n  stopListening = center ? onDatabaseNotificationsSent(() => void center.load()) : null\n})\nonScopeDispose(() => stopListening?.())\n\n// `openDatabaseNotifications()`: opened from code or an action.\nlet stopOpenListener: (() => void) | null = null\nonMounted(() => {\n  stopOpenListener = onOpenDatabaseNotifications(() => (open.value = true))\n})\nonScopeDispose(() => stopOpenListener?.())\n\nonScopeDispose(() => center?.stopPolling())\nconst format = useFormatter()\n\n// `pwa(push: true)` in a starter kit: the app's user menu has no AlfaKit entries, so Web\n// Push is turned on or off from the bell's menu.\nconst pwa = useStore(pwaStore)\nconst pushToggle = computed(\n  () =>\n    Boolean(panel.value.starterKit && panel.value.pwa?.push) && pwa.value.push !== 'unsupported',\n)\nonMounted(() => {\n  if (panel.value.starterKit && panel.value.pwa?.push) startPwa(panel.value.pwa)\n})\nasync function togglePush() {\n  const { message } = await togglePushNotifications()\n  const text = t(message.key, {}, message.fallback)\n\n  if (message.error) toast.error(text)\n  else toast.success(text)\n}\n</script>\n\n<template>\n  <Popover v-if=\"config && center\" :open=\"open\" @update:open=\"open = $event\">\n    <PopoverTrigger as-child>\n      <Button\n        v-if=\"props.variant === 'sidebar'\"\n        type=\"button\"\n        variant=\"ghost\"\n        class=\"relative w-full justify-start gap-2 group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-0\"\n        data-slot=\"notifications-trigger\"\n        data-variant=\"sidebar\"\n      >\n        <!-- In a collapsed (icon) sidebar only the bell and its badge stay visible. -->\n        <Icon\n          name=\"alfakit::panels.topbar.open-database-notifications-button\"\n          :fallback=\"BellIcon\"\n        />\n        <span class=\"flex-1 text-start group-data-[collapsible=icon]:sr-only\">{{\n          t('notifications', {}, 'Notifications')\n        }}</span>\n        <span\n          v-if=\"state.unreadCount > 0\"\n          class=\"bg-primary text-primary-foreground flex h-5 min-w-5 items-center justify-center rounded-full px-1 text-xs font-medium group-data-[collapsible=icon]:absolute group-data-[collapsible=icon]:-end-1 group-data-[collapsible=icon]:-top-1 group-data-[collapsible=icon]:h-4 group-data-[collapsible=icon]:min-w-4 group-data-[collapsible=icon]:text-[10px]\"\n          >{{ state.unreadCount > 99 ? '99+' : state.unreadCount }}\n          <span class=\"sr-only\">{{ t('unread_notifications', {}, 'unread') }}</span></span\n        >\n      </Button>\n      <Button\n        v-else\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"icon\"\n        class=\"relative\"\n        data-slot=\"notifications-trigger\"\n        :aria-label=\"t('notifications', {}, 'Notifications')\"\n      >\n        <Icon\n          name=\"alfakit::panels.topbar.open-database-notifications-button\"\n          :fallback=\"BellIcon\"\n        />\n        <span\n          v-if=\"state.unreadCount > 0\"\n          class=\"bg-primary text-primary-foreground absolute -end-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-medium\"\n          >{{ state.unreadCount > 99 ? '99+' : state.unreadCount }}</span\n        >\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent\n      :align=\"props.variant === 'sidebar' ? 'start' : 'end'\"\n      :side=\"props.variant === 'sidebar' ? (direction === 'rtl' ? 'left' : 'right') : 'bottom'\"\n      class=\"w-80 p-0 sm:w-96\"\n    >\n      <div class=\"flex items-center justify-between border-b px-3 py-2\">\n        <span class=\"text-sm font-semibold\">{{ t('notifications', {}, 'Notifications') }}</span>\n        <div class=\"flex items-center gap-1\">\n          <Button\n            v-if=\"pushToggle\"\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            data-slot=\"pwa-push\"\n            :disabled=\"pwa.pushBusy || pwa.push === 'denied'\"\n            :title=\"\n              pwa.push === 'subscribed'\n                ? t('pwa.notifications.disable', {}, 'Turn off notifications')\n                : t('pwa.notifications.enable', {}, 'Turn on notifications')\n            \"\n            :aria-label=\"\n              pwa.push === 'subscribed'\n                ? t('pwa.notifications.disable', {}, 'Turn off notifications')\n                : t('pwa.notifications.enable', {}, 'Turn on notifications')\n            \"\n            @click=\"void togglePush()\"\n          >\n            <BellOffIcon v-if=\"pwa.push === 'subscribed'\" />\n            <BellRingIcon v-else />\n          </Button>\n          <Button\n            v-if=\"state.unreadCount > 0\"\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            :title=\"t('mark_all_read', {}, 'Mark all as read')\"\n            @click=\"void center.markAllAsRead()\"\n            ><CheckCheckIcon\n          /></Button>\n          <Button\n            v-if=\"state.notifications.length > 0\"\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            :title=\"t('clear_notifications', {}, 'Clear notifications')\"\n            @click=\"void center.clear()\"\n            ><Trash2Icon\n          /></Button>\n        </div>\n      </div>\n      <ScrollArea class=\"max-h-96\">\n        <div\n          v-if=\"state.loading && state.notifications.length === 0\"\n          class=\"flex justify-center py-8\"\n        >\n          <Spinner />\n        </div>\n        <p\n          v-else-if=\"state.notifications.length === 0\"\n          class=\"text-muted-foreground px-3 py-8 text-center text-sm\"\n        >\n          {{ t('no_notifications', {}, 'You have no notifications.') }}\n        </p>\n        <ul v-else class=\"divide-y\">\n          <li\n            v-for=\"notification in state.notifications\"\n            :key=\"notification.id\"\n            :class=\"cn('flex gap-3 px-3 py-3', !notification.readAt && 'bg-primary/5')\"\n            :style=\"\n              notification.color\n                ? notificationTintStyles(cssColor(notification.color)).item\n                : undefined\n            \"\n          >\n            <Icon\n              v-if=\"notification.icon\"\n              :name=\"notification.icon\"\n              :class=\"\n                cn(\n                  'mt-0.5 size-5 shrink-0',\n                  notification.iconColor && textColorClasses[notification.iconColor],\n                )\n              \"\n            />\n            <div class=\"flex min-w-0 flex-1 flex-col gap-1\">\n              <div class=\"flex items-start justify-between gap-2\">\n                <p class=\"text-sm font-medium\">{{ notification.title }}</p>\n                <button\n                  v-if=\"!notification.readAt\"\n                  type=\"button\"\n                  class=\"focus-visible:ring-ring/50 -me-2 -mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full outline-none focus-visible:ring-[3px]\"\n                  :aria-label=\"t('mark_as_read', {}, 'Mark as read')\"\n                  @click=\"void center.markAsRead(notification.id)\"\n                >\n                  <span class=\"bg-primary size-2 rounded-full\" aria-hidden=\"true\" />\n                </button>\n              </div>\n              <p\n                v-if=\"notification.body\"\n                class=\"text-muted-foreground text-sm\"\n                v-html=\"notification.body\"\n              />\n              <time v-if=\"notification.date\" class=\"text-muted-foreground text-xs\">{{\n                format.relative(notification.date)\n              }}</time>\n              <div v-if=\"notification.actions\" class=\"flex flex-wrap gap-1\">\n                <NotificationActionButton\n                  v-for=\"action in notification.actions\"\n                  :key=\"action.name\"\n                  :action=\"action\"\n                  :on-mark-as-read=\"() => void center!.markAsRead(notification.id)\"\n                  :on-mark-as-unread=\"() => void center!.markAsUnread(notification.id)\"\n                />\n              </div>\n            </div>\n          </li>\n        </ul>\n        <div\n          v-if=\"state.hasMore && state.notifications.length > 0\"\n          class=\"flex justify-center border-t p-2\"\n        >\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"sm\"\n            :disabled=\"state.loading\"\n            @click=\"void center!.loadMore()\"\n          >\n            <Spinner v-if=\"state.loading\" />\n            {{ t('load_more', {}, 'Load more') }}\n          </Button>\n        </div>\n      </ScrollArea>\n    </PopoverContent>\n  </Popover>\n</template>\n"],"mappings":""}

package/dist/components/notifications/NotificationsMenu.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationsMenu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/notifications/NotificationsMenu.vue"],"names":[],"mappings":"AAyRA;;;;GAIG;AACH,KAAK,WAAW,GAAG;IAAE,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;CAAE,CAAC;;aAAvB,QAAQ,GAAG,SAAS;;AAomBnD,wBAOG"}
+{"version":3,"file":"NotificationsMenu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/notifications/NotificationsMenu.vue"],"names":[],"mappings":"AAyUA;;;;GAIG;AACH,KAAK,WAAW,GAAG;IAAE,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;CAAE,CAAC;;aAAvB,QAAQ,GAAG,SAAS;;AAgsBnD,wBAOG"}

package/dist/components/notifications/NotificationsMenu.vue_vue_type_script_setup_true_lang.js

@@ -1,52 +1,53 @@
-import { useDirection as e, useFormatter as t, usePanel as ee, useT as te } from "../../context.js";
-import { cn as n } from "../../lib/utils.js";
-import { useStore as ne } from "../../composables/use-store.js";
-import { cssColor as r, textColorClasses as i } from "../../lib/colors.js";
-import a from "../../lib/Icon.js";
-import o from "../ui/Button2.js";
-import s from "../ui/Spinner.js";
-import re from "./NotificationActionButton.js";
-import c from "../ui/Popover.js";
-import l from "../ui/PopoverContent.js";
-import u from "../ui/PopoverTrigger.js";
-import d from "../ui/ScrollArea.js";
-import { NotificationCenter as f, notificationTintStyles as ie, onDatabaseNotificationsSent as ae, onOpenDatabaseNotifications as oe } from "@alfakit/core";
-import { Fragment as p, computed as se, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createTextVNode as v, createVNode as y, defineComponent as b, normalizeClass as x, normalizeStyle as ce, onMounted as S, onScopeDispose as C, openBlock as w, ref as le, renderList as T, toDisplayString as E, unref as D, watch as O, withCtx as k } from "vue";
-import { BellIcon as A, CheckCheckIcon as j, Trash2Icon as M } from "@lucide/vue";
+import { useDirection as e, useFormatter as t, usePanel as ee, useT as n } from "../../context.js";
+import { cn as r } from "../../lib/utils.js";
+import { useStore as i } from "../../composables/use-store.js";
+import { cssColor as a, textColorClasses as te } from "../../lib/colors.js";
+import o from "../../lib/Icon.js";
+import s from "../ui/Button2.js";
+import c from "../ui/Spinner.js";
+import ne from "./NotificationActionButton.js";
+import re from "../ui/Popover.js";
+import ie from "../ui/PopoverContent.js";
+import l from "../ui/PopoverTrigger.js";
+import u from "../ui/ScrollArea.js";
+import { NotificationCenter as d, notificationTintStyles as ae, onDatabaseNotificationsSent as oe, onOpenDatabaseNotifications as se, pwaStore as ce, startPwa as le, togglePushNotifications as ue } from "@alfakit/core";
+import { Fragment as f, computed as p, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createTextVNode as v, createVNode as y, defineComponent as b, normalizeClass as x, normalizeStyle as S, onMounted as C, onScopeDispose as w, openBlock as T, ref as de, renderList as E, toDisplayString as D, unref as O, watch as k, withCtx as A } from "vue";
+import { BellIcon as j, BellOffIcon as M, BellRingIcon as N, CheckCheckIcon as P, Trash2Icon as F } from "@lucide/vue";
+import { toast as I } from "vue-sonner";
 //#region src/components/notifications/NotificationsMenu.vue?vue&type=script&setup=true&lang.ts
-var N = { class: "flex-1 text-start group-data-[collapsible=icon]:sr-only" }, P = {
+var L = { class: "flex-1 text-start group-data-[collapsible=icon]:sr-only" }, R = {
 	key: 0,
 	class: "bg-primary text-primary-foreground flex h-5 min-w-5 items-center justify-center rounded-full px-1 text-xs font-medium group-data-[collapsible=icon]:absolute group-data-[collapsible=icon]:-end-1 group-data-[collapsible=icon]:-top-1 group-data-[collapsible=icon]:h-4 group-data-[collapsible=icon]:min-w-4 group-data-[collapsible=icon]:text-[10px]"
-}, F = { class: "sr-only" }, I = {
+}, z = { class: "sr-only" }, B = {
 	key: 0,
 	class: "bg-primary text-primary-foreground absolute -end-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-medium"
-}, L = { class: "flex items-center justify-between border-b px-3 py-2" }, R = { class: "text-sm font-semibold" }, z = { class: "flex items-center gap-1" }, B = {
+}, V = { class: "flex items-center justify-between border-b px-3 py-2" }, H = { class: "text-sm font-semibold" }, fe = { class: "flex items-center gap-1" }, pe = {
 	key: 0,
 	class: "flex justify-center py-8"
-}, ue = {
+}, me = {
 	key: 1,
 	class: "text-muted-foreground px-3 py-8 text-center text-sm"
-}, V = {
+}, he = {
 	key: 2,
 	class: "divide-y"
-}, H = { class: "flex min-w-0 flex-1 flex-col gap-1" }, U = { class: "flex items-start justify-between gap-2" }, de = { class: "text-sm font-medium" }, fe = ["aria-label", "onClick"], pe = ["innerHTML"], me = {
+}, ge = { class: "flex min-w-0 flex-1 flex-col gap-1" }, _e = { class: "flex items-start justify-between gap-2" }, ve = { class: "text-sm font-medium" }, ye = ["aria-label", "onClick"], be = ["innerHTML"], xe = {
 	key: 1,
 	class: "text-muted-foreground text-xs"
-}, he = {
+}, Se = {
 	key: 2,
 	class: "flex flex-wrap gap-1"
-}, ge = {
+}, Ce = {
 	key: 3,
 	class: "flex justify-center border-t p-2"
-}, W = /*@__PURE__*/ b({
+}, U = /*@__PURE__*/ b({
 	__name: "NotificationsMenu",
 	props: { variant: { default: "topbar" } },
 	setup(b) {
-		let W = b, G = te(), _e = e(), K = ee(), q = se(() => K.value.databaseNotifications), J = K.value.endpoints, Y = J.notifications && J.notificationsReadAll && J.notificationsDestroyAll ? new f({
-			notifications: J.notifications,
-			notificationsReadAll: J.notificationsReadAll,
-			notificationsDestroyAll: J.notificationsDestroyAll
-		}, q.value?.unreadCount ?? 0) : null, X = le(!1), Z = ne(Y?.store ?? {
+		let U = b, W = n(), we = e(), G = ee(), K = p(() => G.value.databaseNotifications), q = G.value.endpoints, J = q.notifications && q.notificationsReadAll && q.notificationsDestroyAll ? new d({
+			notifications: q.notifications,
+			notificationsReadAll: q.notificationsReadAll,
+			notificationsDestroyAll: q.notificationsDestroyAll
+		}, K.value?.unreadCount ?? 0) : null, Y = de(!1), X = i(J?.store ?? {
 			get: () => ({
 				notifications: [],
 				unreadCount: 0,
@@ -56,29 +57,36 @@ var N = { class: "flex-1 text-start group-data-[collapsible=icon]:sr-only" }, P
 			}),
 			subscribe: () => () => {}
 		});
-		S(() => {
-			O(() => q.value?.pollingInterval, (e) => Y?.startPolling(e), { immediate: !0 });
-		}), O(X, (e) => {
-			e && Y?.load();
-		}), O(() => q.value?.unreadCount, (e) => {
-			Y && typeof e == "number" && e !== Y.store.get().unreadCount && Y.store.update({ unreadCount: e });
+		C(() => {
+			k(() => K.value?.pollingInterval, (e) => J?.startPolling(e), { immediate: !0 });
+		}), k(Y, (e) => {
+			e && J?.load();
+		}), k(() => K.value?.unreadCount, (e) => {
+			J && typeof e == "number" && e !== J.store.get().unreadCount && J.store.update({ unreadCount: e });
 		});
+		let Z = null;
+		C(() => {
+			Z = J ? oe(() => void J.load()) : null;
+		}), w(() => Z?.());
 		let Q = null;
-		S(() => {
-			Q = Y ? ae(() => void Y.load()) : null;
-		}), C(() => Q?.());
-		let $ = null;
-		S(() => {
-			$ = oe(() => X.value = !0);
-		}), C(() => $?.()), C(() => Y?.stopPolling());
-		let ve = t();
-		return (e, t) => q.value && D(Y) ? (w(), m(c, {
+		C(() => {
+			Q = se(() => Y.value = !0);
+		}), w(() => Q?.()), w(() => J?.stopPolling());
+		let Te = t(), $ = i(ce), Ee = p(() => !!(G.value.starterKit && G.value.pwa?.push) && $.value.push !== "unsupported");
+		C(() => {
+			G.value.starterKit && G.value.pwa?.push && le(G.value.pwa);
+		});
+		async function De() {
+			let { message: e } = await ue(), t = W(e.key, {}, e.fallback);
+			e.error ? I.error(t) : I.success(t);
+		}
+		return (e, t) => K.value && O(J) ? (T(), m(re, {
 			key: 0,
-			open: X.value,
-			"onUpdate:open": t[3] ||= (e) => X.value = e
+			open: Y.value,
+			"onUpdate:open": t[4] ||= (e) => Y.value = e
 		}, {
-			default: k(() => [y(u, { "as-child": "" }, {
-				default: k(() => [W.variant === "sidebar" ? (w(), m(o, {
+			default: A(() => [y(l, { "as-child": "" }, {
+				default: A(() => [U.variant === "sidebar" ? (T(), m(s, {
 					key: 0,
 					type: "button",
 					variant: "ghost",
@@ -86,100 +94,121 @@ var N = { class: "flex-1 text-start group-data-[collapsible=icon]:sr-only" }, P
 					"data-slot": "notifications-trigger",
 					"data-variant": "sidebar"
 				}, {
-					default: k(() => [
-						y(D(a), {
+					default: A(() => [
+						y(O(o), {
 							name: "alfakit::panels.topbar.open-database-notifications-button",
-							fallback: D(A)
+							fallback: O(j)
 						}, null, 8, ["fallback"]),
-						_("span", N, E(D(G)("notifications", {}, "Notifications")), 1),
-						D(Z).unreadCount > 0 ? (w(), g("span", P, [v(E(D(Z).unreadCount > 99 ? "99+" : D(Z).unreadCount) + " ", 1), _("span", F, E(D(G)("unread_notifications", {}, "unread")), 1)])) : h("", !0)
+						_("span", L, D(O(W)("notifications", {}, "Notifications")), 1),
+						O(X).unreadCount > 0 ? (T(), g("span", R, [v(D(O(X).unreadCount > 99 ? "99+" : O(X).unreadCount) + " ", 1), _("span", z, D(O(W)("unread_notifications", {}, "unread")), 1)])) : h("", !0)
 					]),
 					_: 1
-				})) : (w(), m(o, {
+				})) : (T(), m(s, {
 					key: 1,
 					type: "button",
 					variant: "ghost",
 					size: "icon",
 					class: "relative",
 					"data-slot": "notifications-trigger",
-					"aria-label": D(G)("notifications", {}, "Notifications")
+					"aria-label": O(W)("notifications", {}, "Notifications")
 				}, {
-					default: k(() => [y(D(a), {
+					default: A(() => [y(O(o), {
 						name: "alfakit::panels.topbar.open-database-notifications-button",
-						fallback: D(A)
-					}, null, 8, ["fallback"]), D(Z).unreadCount > 0 ? (w(), g("span", I, E(D(Z).unreadCount > 99 ? "99+" : D(Z).unreadCount), 1)) : h("", !0)]),
+						fallback: O(j)
+					}, null, 8, ["fallback"]), O(X).unreadCount > 0 ? (T(), g("span", B, D(O(X).unreadCount > 99 ? "99+" : O(X).unreadCount), 1)) : h("", !0)]),
 					_: 1
 				}, 8, ["aria-label"]))]),
 				_: 1
-			}), y(l, {
-				align: W.variant === "sidebar" ? "start" : "end",
-				side: W.variant === "sidebar" ? D(_e) === "rtl" ? "left" : "right" : "bottom",
+			}), y(ie, {
+				align: U.variant === "sidebar" ? "start" : "end",
+				side: U.variant === "sidebar" ? O(we) === "rtl" ? "left" : "right" : "bottom",
 				class: "w-80 p-0 sm:w-96"
 			}, {
-				default: k(() => [_("div", L, [_("span", R, E(D(G)("notifications", {}, "Notifications")), 1), _("div", z, [D(Z).unreadCount > 0 ? (w(), m(o, {
-					key: 0,
-					type: "button",
-					variant: "ghost",
-					size: "icon-sm",
-					title: D(G)("mark_all_read", {}, "Mark all as read"),
-					onClick: t[0] ||= (e) => void D(Y).markAllAsRead()
-				}, {
-					default: k(() => [y(D(j))]),
-					_: 1
-				}, 8, ["title"])) : h("", !0), D(Z).notifications.length > 0 ? (w(), m(o, {
-					key: 1,
-					type: "button",
-					variant: "ghost",
-					size: "icon-sm",
-					title: D(G)("clear_notifications", {}, "Clear notifications"),
-					onClick: t[1] ||= (e) => void D(Y).clear()
-				}, {
-					default: k(() => [y(D(M))]),
-					_: 1
-				}, 8, ["title"])) : h("", !0)])]), y(d, { class: "max-h-96" }, {
-					default: k(() => [D(Z).loading && D(Z).notifications.length === 0 ? (w(), g("div", B, [y(s)])) : D(Z).notifications.length === 0 ? (w(), g("p", ue, E(D(G)("no_notifications", {}, "You have no notifications.")), 1)) : (w(), g("ul", V, [(w(!0), g(p, null, T(D(Z).notifications, (e) => (w(), g("li", {
+				default: A(() => [_("div", V, [_("span", H, D(O(W)("notifications", {}, "Notifications")), 1), _("div", fe, [
+					Ee.value ? (T(), m(s, {
+						key: 0,
+						type: "button",
+						variant: "ghost",
+						size: "icon-sm",
+						"data-slot": "pwa-push",
+						disabled: O($).pushBusy || O($).push === "denied",
+						title: O($).push === "subscribed" ? O(W)("pwa.notifications.disable", {}, "Turn off notifications") : O(W)("pwa.notifications.enable", {}, "Turn on notifications"),
+						"aria-label": O($).push === "subscribed" ? O(W)("pwa.notifications.disable", {}, "Turn off notifications") : O(W)("pwa.notifications.enable", {}, "Turn on notifications"),
+						onClick: t[0] ||= (e) => void De()
+					}, {
+						default: A(() => [O($).push === "subscribed" ? (T(), m(O(M), { key: 0 })) : (T(), m(O(N), { key: 1 }))]),
+						_: 1
+					}, 8, [
+						"disabled",
+						"title",
+						"aria-label"
+					])) : h("", !0),
+					O(X).unreadCount > 0 ? (T(), m(s, {
+						key: 1,
+						type: "button",
+						variant: "ghost",
+						size: "icon-sm",
+						title: O(W)("mark_all_read", {}, "Mark all as read"),
+						onClick: t[1] ||= (e) => void O(J).markAllAsRead()
+					}, {
+						default: A(() => [y(O(P))]),
+						_: 1
+					}, 8, ["title"])) : h("", !0),
+					O(X).notifications.length > 0 ? (T(), m(s, {
+						key: 2,
+						type: "button",
+						variant: "ghost",
+						size: "icon-sm",
+						title: O(W)("clear_notifications", {}, "Clear notifications"),
+						onClick: t[2] ||= (e) => void O(J).clear()
+					}, {
+						default: A(() => [y(O(F))]),
+						_: 1
+					}, 8, ["title"])) : h("", !0)
+				])]), y(u, { class: "max-h-96" }, {
+					default: A(() => [O(X).loading && O(X).notifications.length === 0 ? (T(), g("div", pe, [y(c)])) : O(X).notifications.length === 0 ? (T(), g("p", me, D(O(W)("no_notifications", {}, "You have no notifications.")), 1)) : (T(), g("ul", he, [(T(!0), g(f, null, E(O(X).notifications, (e) => (T(), g("li", {
 						key: e.id,
-						class: x(D(n)("flex gap-3 px-3 py-3", !e.readAt && "bg-primary/5")),
-						style: ce(e.color ? D(ie)(D(r)(e.color)).item : void 0)
-					}, [e.icon ? (w(), m(D(a), {
+						class: x(O(r)("flex gap-3 px-3 py-3", !e.readAt && "bg-primary/5")),
+						style: S(e.color ? O(ae)(O(a)(e.color)).item : void 0)
+					}, [e.icon ? (T(), m(O(o), {
 						key: 0,
 						name: e.icon,
-						class: x(D(n)("mt-0.5 size-5 shrink-0", e.iconColor && D(i)[e.iconColor]))
-					}, null, 8, ["name", "class"])) : h("", !0), _("div", H, [
-						_("div", U, [_("p", de, E(e.title), 1), e.readAt ? h("", !0) : (w(), g("button", {
+						class: x(O(r)("mt-0.5 size-5 shrink-0", e.iconColor && O(te)[e.iconColor]))
+					}, null, 8, ["name", "class"])) : h("", !0), _("div", ge, [
+						_("div", _e, [_("p", ve, D(e.title), 1), e.readAt ? h("", !0) : (T(), g("button", {
 							key: 0,
 							type: "button",
 							class: "focus-visible:ring-ring/50 -me-2 -mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full outline-none focus-visible:ring-[3px]",
-							"aria-label": D(G)("mark_as_read", {}, "Mark as read"),
-							onClick: (t) => void D(Y).markAsRead(e.id)
-						}, [...t[4] ||= [_("span", {
+							"aria-label": O(W)("mark_as_read", {}, "Mark as read"),
+							onClick: (t) => void O(J).markAsRead(e.id)
+						}, [...t[5] ||= [_("span", {
 							class: "bg-primary size-2 rounded-full",
 							"aria-hidden": "true"
-						}, null, -1)]], 8, fe))]),
-						e.body ? (w(), g("p", {
+						}, null, -1)]], 8, ye))]),
+						e.body ? (T(), g("p", {
 							key: 0,
 							class: "text-muted-foreground text-sm",
 							innerHTML: e.body
-						}, null, 8, pe)) : h("", !0),
-						e.date ? (w(), g("time", me, E(D(ve).relative(e.date)), 1)) : h("", !0),
-						e.actions ? (w(), g("div", he, [(w(!0), g(p, null, T(e.actions, (t) => (w(), m(re, {
+						}, null, 8, be)) : h("", !0),
+						e.date ? (T(), g("time", xe, D(O(Te).relative(e.date)), 1)) : h("", !0),
+						e.actions ? (T(), g("div", Se, [(T(!0), g(f, null, E(e.actions, (t) => (T(), m(ne, {
 							key: t.name,
 							action: t,
-							"on-mark-as-read": () => void D(Y).markAsRead(e.id),
-							"on-mark-as-unread": () => void D(Y).markAsUnread(e.id)
+							"on-mark-as-read": () => void O(J).markAsRead(e.id),
+							"on-mark-as-unread": () => void O(J).markAsUnread(e.id)
 						}, null, 8, [
 							"action",
 							"on-mark-as-read",
 							"on-mark-as-unread"
 						]))), 128))])) : h("", !0)
-					])], 6))), 128))])), D(Z).hasMore && D(Z).notifications.length > 0 ? (w(), g("div", ge, [y(o, {
+					])], 6))), 128))])), O(X).hasMore && O(X).notifications.length > 0 ? (T(), g("div", Ce, [y(s, {
 						type: "button",
 						variant: "ghost",
 						size: "sm",
-						disabled: D(Z).loading,
-						onClick: t[2] ||= (e) => void D(Y).loadMore()
+						disabled: O(X).loading,
+						onClick: t[3] ||= (e) => void O(J).loadMore()
 					}, {
-						default: k(() => [D(Z).loading ? (w(), m(s, { key: 0 })) : h("", !0), v(" " + E(D(G)("load_more", {}, "Load more")), 1)]),
+						default: A(() => [O(X).loading ? (T(), m(c, { key: 0 })) : h("", !0), v(" " + D(O(W)("load_more", {}, "Load more")), 1)]),
 						_: 1
 					}, 8, ["disabled"])])) : h("", !0)]),
 					_: 1
@@ -191,6 +220,6 @@ var N = { class: "flex-1 text-start group-data-[collapsible=icon]:sr-only" }, P
 	}
 });
 //#endregion
-export { W as default };
+export { U as default };
 
 //# sourceMappingURL=NotificationsMenu.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/notifications/NotificationsMenu.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationsMenu.vue_vue_type_script_setup_true_lang.js","names":["_unref","_openBlock","_createBlock","Popover","_withCtx","_createVNode","PopoverTrigger","Button","Icon","_createElementVNode","_toDisplayString","_createElementBlock","_createTextVNode","_createCommentVNode","PopoverContent","ScrollArea","Spinner","_Fragment","_renderList","_normalizeClass","_normalizeStyle","NotificationActionButton","Icon_default","Button_default","Spinner_default","NotificationActionButton_default","Popover_default","PopoverContent_default","PopoverTrigger_default","ScrollArea_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","_hoisted_14","_hoisted_15","_hoisted_16","_hoisted_17","_hoisted_18","NotificationsMenu_vue_vue_type_script_setup_true_lang_default","props","__props","t","useT","direction","useDirection","panel","usePanel","config","computed","endpoints","center","NotificationCenter","open","ref","state","useStore","onMounted","interval","watch","isOpen","count","stopListening","onDatabaseNotificationsSent","onScopeDispose","stopOpenListener","onOpenDatabaseNotifications","format","useFormatter","unref","openBlock","createBlock","_cache","$event","withCtx","createVNode","BellIcon","createElementVNode","toDisplayString","createElementBlock","createTextVNode","createCommentVNode","CheckCheckIcon","Trash2Icon","Fragment","renderList","notification","normalizeClass","cn","normalizeStyle","notificationTintStyles","cssColor","textColorClasses","action"],"sources":["../../../src/components/notifications/NotificationsMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  NotificationCenter,\n  notificationTintStyles,\n  onDatabaseNotificationsSent,\n  onOpenDatabaseNotifications,\n} from '@alfakit/core'\nimport { BellIcon, CheckCheckIcon, Trash2Icon } from '@lucide/vue'\nimport { computed, onMounted, onScopeDispose, ref, watch } from 'vue'\nimport { useStore } from '../../composables/use-store'\nimport { useDirection, useFormatter, usePanel, useT } from '../../context'\nimport { cssColor, textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Button from '../ui/Button.vue'\nimport Popover from '../ui/Popover.vue'\nimport PopoverContent from '../ui/PopoverContent.vue'\nimport PopoverTrigger from '../ui/PopoverTrigger.vue'\nimport ScrollArea from '../ui/ScrollArea.vue'\nimport Spinner from '../ui/Spinner.vue'\nimport NotificationActionButton from './NotificationActionButton.vue'\n\n/**\n * Bell menu for database notifications. It also opens when something calls\n * `openDatabaseNotifications()` (or an action with `->openDatabaseNotifications()`).\n * `variant=\"sidebar\"`: a full-width row with a label, for layouts that put it in the sidebar.\n */\nconst props = withDefaults(defineProps<{ variant?: 'topbar' | 'sidebar' }>(), {\n  variant: 'topbar',\n})\nconst t = useT()\nconst direction = useDirection()\nconst panel = usePanel()\nconst config = computed(() => panel.value.databaseNotifications)\nconst endpoints = panel.value.endpoints\n\nconst center =\n  endpoints.notifications && endpoints.notificationsReadAll && endpoints.notificationsDestroyAll\n    ? new NotificationCenter(\n        {\n          notifications: endpoints.notifications,\n          notificationsReadAll: endpoints.notificationsReadAll,\n          notificationsDestroyAll: endpoints.notificationsDestroyAll,\n        },\n        config.value?.unreadCount ?? 0,\n      )\n    : null\n\nconst open = ref(false)\nconst state = useStore(\n  center?.store ?? {\n    get: () => ({ notifications: [], unreadCount: 0, loading: false, hasMore: false, page: 0 }),\n    subscribe: () => () => {},\n  },\n)\n\n// Polling starts in the browser only: a server render must not leave timers behind.\nonMounted(() => {\n  watch(\n    () => config.value?.pollingInterval,\n    (interval) => center?.startPolling(interval),\n    { immediate: true },\n  )\n})\n\nwatch(open, (isOpen) => {\n  if (isOpen) void center?.load()\n})\n\n// Every visit brings the server's unread count (another user after impersonating, or\n// notifications read in another tab): follow it instead of waiting for the next poll.\nwatch(\n  () => config.value?.unreadCount,\n  (count) => {\n    if (center && typeof count === 'number' && count !== center.store.get().unreadCount) {\n      center.store.update({ unreadCount: count })\n    }\n  },\n)\n\n// Realtime notifications announce stored ones, so the unread count updates right away.\nlet stopListening: (() => void) | null = null\nonMounted(() => {\n  stopListening = center ? onDatabaseNotificationsSent(() => void center.load()) : null\n})\nonScopeDispose(() => stopListening?.())\n\n// `openDatabaseNotifications()`: opened from code or an action.\nlet stopOpenListener: (() => void) | null = null\nonMounted(() => {\n  stopOpenListener = onOpenDatabaseNotifications(() => (open.value = true))\n})\nonScopeDispose(() => stopOpenListener?.())\n\nonScopeDispose(() => center?.stopPolling())\nconst format = useFormatter()\n</script>\n\n<template>\n  <Popover v-if=\"config && center\" :open=\"open\" @update:open=\"open = $event\">\n    <PopoverTrigger as-child>\n      <Button\n        v-if=\"props.variant === 'sidebar'\"\n        type=\"button\"\n        variant=\"ghost\"\n        class=\"relative w-full justify-start gap-2 group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-0\"\n        data-slot=\"notifications-trigger\"\n        data-variant=\"sidebar\"\n      >\n        <!-- In a collapsed (icon) sidebar only the bell and its badge stay visible. -->\n        <Icon\n          name=\"alfakit::panels.topbar.open-database-notifications-button\"\n          :fallback=\"BellIcon\"\n        />\n        <span class=\"flex-1 text-start group-data-[collapsible=icon]:sr-only\">{{\n          t('notifications', {}, 'Notifications')\n        }}</span>\n        <span\n          v-if=\"state.unreadCount > 0\"\n          class=\"bg-primary text-primary-foreground flex h-5 min-w-5 items-center justify-center rounded-full px-1 text-xs font-medium group-data-[collapsible=icon]:absolute group-data-[collapsible=icon]:-end-1 group-data-[collapsible=icon]:-top-1 group-data-[collapsible=icon]:h-4 group-data-[collapsible=icon]:min-w-4 group-data-[collapsible=icon]:text-[10px]\"\n          >{{ state.unreadCount > 99 ? '99+' : state.unreadCount }}\n          <span class=\"sr-only\">{{ t('unread_notifications', {}, 'unread') }}</span></span\n        >\n      </Button>\n      <Button\n        v-else\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"icon\"\n        class=\"relative\"\n        data-slot=\"notifications-trigger\"\n        :aria-label=\"t('notifications', {}, 'Notifications')\"\n      >\n        <Icon\n          name=\"alfakit::panels.topbar.open-database-notifications-button\"\n          :fallback=\"BellIcon\"\n        />\n        <span\n          v-if=\"state.unreadCount > 0\"\n          class=\"bg-primary text-primary-foreground absolute -end-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-medium\"\n          >{{ state.unreadCount > 99 ? '99+' : state.unreadCount }}</span\n        >\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent\n      :align=\"props.variant === 'sidebar' ? 'start' : 'end'\"\n      :side=\"props.variant === 'sidebar' ? (direction === 'rtl' ? 'left' : 'right') : 'bottom'\"\n      class=\"w-80 p-0 sm:w-96\"\n    >\n      <div class=\"flex items-center justify-between border-b px-3 py-2\">\n        <span class=\"text-sm font-semibold\">{{ t('notifications', {}, 'Notifications') }}</span>\n        <div class=\"flex items-center gap-1\">\n          <Button\n            v-if=\"state.unreadCount > 0\"\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            :title=\"t('mark_all_read', {}, 'Mark all as read')\"\n            @click=\"void center.markAllAsRead()\"\n            ><CheckCheckIcon\n          /></Button>\n          <Button\n            v-if=\"state.notifications.length > 0\"\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            :title=\"t('clear_notifications', {}, 'Clear notifications')\"\n            @click=\"void center.clear()\"\n            ><Trash2Icon\n          /></Button>\n        </div>\n      </div>\n      <ScrollArea class=\"max-h-96\">\n        <div\n          v-if=\"state.loading && state.notifications.length === 0\"\n          class=\"flex justify-center py-8\"\n        >\n          <Spinner />\n        </div>\n        <p\n          v-else-if=\"state.notifications.length === 0\"\n          class=\"text-muted-foreground px-3 py-8 text-center text-sm\"\n        >\n          {{ t('no_notifications', {}, 'You have no notifications.') }}\n        </p>\n        <ul v-else class=\"divide-y\">\n          <li\n            v-for=\"notification in state.notifications\"\n            :key=\"notification.id\"\n            :class=\"cn('flex gap-3 px-3 py-3', !notification.readAt && 'bg-primary/5')\"\n            :style=\"\n              notification.color\n                ? notificationTintStyles(cssColor(notification.color)).item\n                : undefined\n            \"\n          >\n            <Icon\n              v-if=\"notification.icon\"\n              :name=\"notification.icon\"\n              :class=\"\n                cn(\n                  'mt-0.5 size-5 shrink-0',\n                  notification.iconColor && textColorClasses[notification.iconColor],\n                )\n              \"\n            />\n            <div class=\"flex min-w-0 flex-1 flex-col gap-1\">\n              <div class=\"flex items-start justify-between gap-2\">\n                <p class=\"text-sm font-medium\">{{ notification.title }}</p>\n                <button\n                  v-if=\"!notification.readAt\"\n                  type=\"button\"\n                  class=\"focus-visible:ring-ring/50 -me-2 -mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full outline-none focus-visible:ring-[3px]\"\n                  :aria-label=\"t('mark_as_read', {}, 'Mark as read')\"\n                  @click=\"void center.markAsRead(notification.id)\"\n                >\n                  <span class=\"bg-primary size-2 rounded-full\" aria-hidden=\"true\" />\n                </button>\n              </div>\n              <p\n                v-if=\"notification.body\"\n                class=\"text-muted-foreground text-sm\"\n                v-html=\"notification.body\"\n              />\n              <time v-if=\"notification.date\" class=\"text-muted-foreground text-xs\">{{\n                format.relative(notification.date)\n              }}</time>\n              <div v-if=\"notification.actions\" class=\"flex flex-wrap gap-1\">\n                <NotificationActionButton\n                  v-for=\"action in notification.actions\"\n                  :key=\"action.name\"\n                  :action=\"action\"\n                  :on-mark-as-read=\"() => void center!.markAsRead(notification.id)\"\n                  :on-mark-as-unread=\"() => void center!.markAsUnread(notification.id)\"\n                />\n              </div>\n            </div>\n          </li>\n        </ul>\n        <div\n          v-if=\"state.hasMore && state.notifications.length > 0\"\n          class=\"flex justify-center border-t p-2\"\n        >\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"sm\"\n            :disabled=\"state.loading\"\n            @click=\"void center!.loadMore()\"\n          >\n            <Spinner v-if=\"state.loading\" />\n            {{ t('load_more', {}, 'Load more') }}\n          </Button>\n        </div>\n      </ScrollArea>\n    </PopoverContent>\n  </Popover>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"NotificationsMenu.vue_vue_type_script_setup_true_lang.js","names":["_unref","_openBlock","_createBlock","Popover","_withCtx","_createVNode","PopoverTrigger","Button","Icon","_createElementVNode","_toDisplayString","_createElementBlock","_createTextVNode","_createCommentVNode","PopoverContent","ScrollArea","Spinner","_Fragment","_renderList","_normalizeClass","_normalizeStyle","NotificationActionButton","Icon_default","Button_default","Spinner_default","NotificationActionButton_default","Popover_default","PopoverContent_default","PopoverTrigger_default","ScrollArea_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","_hoisted_14","_hoisted_15","_hoisted_16","_hoisted_17","_hoisted_18","NotificationsMenu_vue_vue_type_script_setup_true_lang_default","props","__props","t","useT","direction","useDirection","panel","usePanel","config","computed","endpoints","center","NotificationCenter","open","ref","state","useStore","onMounted","interval","watch","isOpen","count","stopListening","onDatabaseNotificationsSent","onScopeDispose","stopOpenListener","onOpenDatabaseNotifications","format","useFormatter","pwa","pwaStore","pushToggle","startPwa","togglePush","togglePushNotifications","text","message","toast","unref","openBlock","createBlock","_cache","$event","withCtx","createVNode","BellIcon","createElementVNode","toDisplayString","createElementBlock","createTextVNode","createCommentVNode","BellOffIcon","BellRingIcon","CheckCheckIcon","Trash2Icon","Fragment","renderList","notification","normalizeClass","cn","normalizeStyle","notificationTintStyles","cssColor","textColorClasses","action"],"sources":["../../../src/components/notifications/NotificationsMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  NotificationCenter,\n  notificationTintStyles,\n  onDatabaseNotificationsSent,\n  onOpenDatabaseNotifications,\n  pwaStore,\n  startPwa,\n  togglePushNotifications,\n} from '@alfakit/core'\nimport { BellIcon, BellOffIcon, BellRingIcon, CheckCheckIcon, Trash2Icon } from '@lucide/vue'\nimport { computed, onMounted, onScopeDispose, ref, watch } from 'vue'\nimport { toast } from 'vue-sonner'\nimport { useStore } from '../../composables/use-store'\nimport { useDirection, useFormatter, usePanel, useT } from '../../context'\nimport { cssColor, textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Button from '../ui/Button.vue'\nimport Popover from '../ui/Popover.vue'\nimport PopoverContent from '../ui/PopoverContent.vue'\nimport PopoverTrigger from '../ui/PopoverTrigger.vue'\nimport ScrollArea from '../ui/ScrollArea.vue'\nimport Spinner from '../ui/Spinner.vue'\nimport NotificationActionButton from './NotificationActionButton.vue'\n\n/**\n * Bell menu for database notifications. It also opens when something calls\n * `openDatabaseNotifications()` (or an action with `->openDatabaseNotifications()`).\n * `variant=\"sidebar\"`: a full-width row with a label, for layouts that put it in the sidebar.\n */\nconst props = withDefaults(defineProps<{ variant?: 'topbar' | 'sidebar' }>(), {\n  variant: 'topbar',\n})\nconst t = useT()\nconst direction = useDirection()\nconst panel = usePanel()\nconst config = computed(() => panel.value.databaseNotifications)\nconst endpoints = panel.value.endpoints\n\nconst center =\n  endpoints.notifications && endpoints.notificationsReadAll && endpoints.notificationsDestroyAll\n    ? new NotificationCenter(\n        {\n          notifications: endpoints.notifications,\n          notificationsReadAll: endpoints.notificationsReadAll,\n          notificationsDestroyAll: endpoints.notificationsDestroyAll,\n        },\n        config.value?.unreadCount ?? 0,\n      )\n    : null\n\nconst open = ref(false)\nconst state = useStore(\n  center?.store ?? {\n    get: () => ({ notifications: [], unreadCount: 0, loading: false, hasMore: false, page: 0 }),\n    subscribe: () => () => {},\n  },\n)\n\n// Polling starts in the browser only: a server render must not leave timers behind.\nonMounted(() => {\n  watch(\n    () => config.value?.pollingInterval,\n    (interval) => center?.startPolling(interval),\n    { immediate: true },\n  )\n})\n\nwatch(open, (isOpen) => {\n  if (isOpen) void center?.load()\n})\n\n// Every visit brings the server's unread count (another user after impersonating, or\n// notifications read in another tab): follow it instead of waiting for the next poll.\nwatch(\n  () => config.value?.unreadCount,\n  (count) => {\n    if (center && typeof count === 'number' && count !== center.store.get().unreadCount) {\n      center.store.update({ unreadCount: count })\n    }\n  },\n)\n\n// Realtime notifications announce stored ones, so the unread count updates right away.\nlet stopListening: (() => void) | null = null\nonMounted(() => {\n  stopListening = center ? onDatabaseNotificationsSent(() => void center.load()) : null\n})\nonScopeDispose(() => stopListening?.())\n\n// `openDatabaseNotifications()`: opened from code or an action.\nlet stopOpenListener: (() => void) | null = null\nonMounted(() => {\n  stopOpenListener = onOpenDatabaseNotifications(() => (open.value = true))\n})\nonScopeDispose(() => stopOpenListener?.())\n\nonScopeDispose(() => center?.stopPolling())\nconst format = useFormatter()\n\n// `pwa(push: true)` in a starter kit: the app's user menu has no AlfaKit entries, so Web\n// Push is turned on or off from the bell's menu.\nconst pwa = useStore(pwaStore)\nconst pushToggle = computed(\n  () =>\n    Boolean(panel.value.starterKit && panel.value.pwa?.push) && pwa.value.push !== 'unsupported',\n)\nonMounted(() => {\n  if (panel.value.starterKit && panel.value.pwa?.push) startPwa(panel.value.pwa)\n})\nasync function togglePush() {\n  const { message } = await togglePushNotifications()\n  const text = t(message.key, {}, message.fallback)\n\n  if (message.error) toast.error(text)\n  else toast.success(text)\n}\n</script>\n\n<template>\n  <Popover v-if=\"config && center\" :open=\"open\" @update:open=\"open = $event\">\n    <PopoverTrigger as-child>\n      <Button\n        v-if=\"props.variant === 'sidebar'\"\n        type=\"button\"\n        variant=\"ghost\"\n        class=\"relative w-full justify-start gap-2 group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-0\"\n        data-slot=\"notifications-trigger\"\n        data-variant=\"sidebar\"\n      >\n        <!-- In a collapsed (icon) sidebar only the bell and its badge stay visible. -->\n        <Icon\n          name=\"alfakit::panels.topbar.open-database-notifications-button\"\n          :fallback=\"BellIcon\"\n        />\n        <span class=\"flex-1 text-start group-data-[collapsible=icon]:sr-only\">{{\n          t('notifications', {}, 'Notifications')\n        }}</span>\n        <span\n          v-if=\"state.unreadCount > 0\"\n          class=\"bg-primary text-primary-foreground flex h-5 min-w-5 items-center justify-center rounded-full px-1 text-xs font-medium group-data-[collapsible=icon]:absolute group-data-[collapsible=icon]:-end-1 group-data-[collapsible=icon]:-top-1 group-data-[collapsible=icon]:h-4 group-data-[collapsible=icon]:min-w-4 group-data-[collapsible=icon]:text-[10px]\"\n          >{{ state.unreadCount > 99 ? '99+' : state.unreadCount }}\n          <span class=\"sr-only\">{{ t('unread_notifications', {}, 'unread') }}</span></span\n        >\n      </Button>\n      <Button\n        v-else\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"icon\"\n        class=\"relative\"\n        data-slot=\"notifications-trigger\"\n        :aria-label=\"t('notifications', {}, 'Notifications')\"\n      >\n        <Icon\n          name=\"alfakit::panels.topbar.open-database-notifications-button\"\n          :fallback=\"BellIcon\"\n        />\n        <span\n          v-if=\"state.unreadCount > 0\"\n          class=\"bg-primary text-primary-foreground absolute -end-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-medium\"\n          >{{ state.unreadCount > 99 ? '99+' : state.unreadCount }}</span\n        >\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent\n      :align=\"props.variant === 'sidebar' ? 'start' : 'end'\"\n      :side=\"props.variant === 'sidebar' ? (direction === 'rtl' ? 'left' : 'right') : 'bottom'\"\n      class=\"w-80 p-0 sm:w-96\"\n    >\n      <div class=\"flex items-center justify-between border-b px-3 py-2\">\n        <span class=\"text-sm font-semibold\">{{ t('notifications', {}, 'Notifications') }}</span>\n        <div class=\"flex items-center gap-1\">\n          <Button\n            v-if=\"pushToggle\"\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            data-slot=\"pwa-push\"\n            :disabled=\"pwa.pushBusy || pwa.push === 'denied'\"\n            :title=\"\n              pwa.push === 'subscribed'\n                ? t('pwa.notifications.disable', {}, 'Turn off notifications')\n                : t('pwa.notifications.enable', {}, 'Turn on notifications')\n            \"\n            :aria-label=\"\n              pwa.push === 'subscribed'\n                ? t('pwa.notifications.disable', {}, 'Turn off notifications')\n                : t('pwa.notifications.enable', {}, 'Turn on notifications')\n            \"\n            @click=\"void togglePush()\"\n          >\n            <BellOffIcon v-if=\"pwa.push === 'subscribed'\" />\n            <BellRingIcon v-else />\n          </Button>\n          <Button\n            v-if=\"state.unreadCount > 0\"\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            :title=\"t('mark_all_read', {}, 'Mark all as read')\"\n            @click=\"void center.markAllAsRead()\"\n            ><CheckCheckIcon\n          /></Button>\n          <Button\n            v-if=\"state.notifications.length > 0\"\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            :title=\"t('clear_notifications', {}, 'Clear notifications')\"\n            @click=\"void center.clear()\"\n            ><Trash2Icon\n          /></Button>\n        </div>\n      </div>\n      <ScrollArea class=\"max-h-96\">\n        <div\n          v-if=\"state.loading && state.notifications.length === 0\"\n          class=\"flex justify-center py-8\"\n        >\n          <Spinner />\n        </div>\n        <p\n          v-else-if=\"state.notifications.length === 0\"\n          class=\"text-muted-foreground px-3 py-8 text-center text-sm\"\n        >\n          {{ t('no_notifications', {}, 'You have no notifications.') }}\n        </p>\n        <ul v-else class=\"divide-y\">\n          <li\n            v-for=\"notification in state.notifications\"\n            :key=\"notification.id\"\n            :class=\"cn('flex gap-3 px-3 py-3', !notification.readAt && 'bg-primary/5')\"\n            :style=\"\n              notification.color\n                ? notificationTintStyles(cssColor(notification.color)).item\n                : undefined\n            \"\n          >\n            <Icon\n              v-if=\"notification.icon\"\n              :name=\"notification.icon\"\n              :class=\"\n                cn(\n                  'mt-0.5 size-5 shrink-0',\n                  notification.iconColor && textColorClasses[notification.iconColor],\n                )\n              \"\n            />\n            <div class=\"flex min-w-0 flex-1 flex-col gap-1\">\n              <div class=\"flex items-start justify-between gap-2\">\n                <p class=\"text-sm font-medium\">{{ notification.title }}</p>\n                <button\n                  v-if=\"!notification.readAt\"\n                  type=\"button\"\n                  class=\"focus-visible:ring-ring/50 -me-2 -mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full outline-none focus-visible:ring-[3px]\"\n                  :aria-label=\"t('mark_as_read', {}, 'Mark as read')\"\n                  @click=\"void center.markAsRead(notification.id)\"\n                >\n                  <span class=\"bg-primary size-2 rounded-full\" aria-hidden=\"true\" />\n                </button>\n              </div>\n              <p\n                v-if=\"notification.body\"\n                class=\"text-muted-foreground text-sm\"\n                v-html=\"notification.body\"\n              />\n              <time v-if=\"notification.date\" class=\"text-muted-foreground text-xs\">{{\n                format.relative(notification.date)\n              }}</time>\n              <div v-if=\"notification.actions\" class=\"flex flex-wrap gap-1\">\n                <NotificationActionButton\n                  v-for=\"action in notification.actions\"\n                  :key=\"action.name\"\n                  :action=\"action\"\n                  :on-mark-as-read=\"() => void center!.markAsRead(notification.id)\"\n                  :on-mark-as-unread=\"() => void center!.markAsUnread(notification.id)\"\n                />\n              </div>\n            </div>\n          </li>\n        </ul>\n        <div\n          v-if=\"state.hasMore && state.notifications.length > 0\"\n          class=\"flex justify-center border-t p-2\"\n        >\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"sm\"\n            :disabled=\"state.loading\"\n            @click=\"void center!.loadMore()\"\n          >\n            <Spinner v-if=\"state.loading\" />\n            {{ t('load_more', {}, 'Load more') }}\n          </Button>\n        </div>\n      </ScrollArea>\n    </PopoverContent>\n  </Popover>\n</template>\n"],"mappings":"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"}

package/dist/components/panel/ShortcutsOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"ShortcutsOverlay.js","names":["_sfc_main","ShortcutsOverlay_vue_vue_type_script_setup_true_lang_default","ShortcutsOverlay_default"],"sources":["../../../src/components/panel/ShortcutsOverlay.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ShortcutListGroup, ShortcutListItem } from '@alfakit/core'\nimport {\n  bindingFromEvent,\n  flattenActionGroup,\n  saveShortcutOverrides,\n  shortcutOverlayGroups,\n  shortcuts,\n} from '@alfakit/core'\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport { usePageSchema, useT } from '../../context'\nimport Button from '../ui/Button.vue'\nimport Dialog from '../ui/Dialog.vue'\nimport DialogContent from '../ui/DialogContent.vue'\nimport DialogDescription from '../ui/DialogDescription.vue'\nimport DialogHeader from '../ui/DialogHeader.vue'\nimport DialogTitle from '../ui/DialogTitle.vue'\nimport ShortcutKeys from './ShortcutKeys.vue'\n\n/** The `?` overlay: every shortcut on the page, grouped; users may change their keys. */\nconst props = defineProps<{ open: boolean; customizable: boolean; endpoint?: string }>()\nconst emit = defineEmits<{ 'update:open': [open: boolean] }>()\n\nconst t = useT()\nconst page = usePageSchema()\nconst version = ref(shortcuts.getVersion())\nconst recording = ref<string | null>(null)\nconst message = ref('')\n\n// Subscribed once mounted: a server render must not leave listeners on the shared registry.\nlet unsubscribe = () => {}\n\nonMounted(() => {\n  version.value = shortcuts.getVersion()\n  unsubscribe = shortcuts.subscribe(() => {\n    version.value = shortcuts.getVersion()\n  })\n})\n\nonBeforeUnmount(() => unsubscribe())\n\nconst groups = computed(() => {\n  void version.value\n\n  return shortcutOverlayGroups(\n    shortcuts.list(),\n    flattenActionGroup(page.value?.headerActions ?? []),\n  )\n})\n\nconst groupLabel = (group: ShortcutListGroup['group']) =>\n  ({\n    general: t('shortcuts.groups.general', {}, 'General'),\n    navigation: t('shortcuts.groups.navigation', {}, 'Navigation'),\n    commands: t('shortcuts.groups.commands', {}, 'Commands'),\n    actions: t('shortcuts.groups.actions', {}, 'Actions on this page'),\n  })[group]\n\nconst save = async (id: string, keys: string[] | null) => {\n  if (!props.endpoint) return\n\n  try {\n    shortcuts.setOverrides(await saveShortcutOverrides(props.endpoint, { [id]: keys }))\n    message.value = t('shortcuts.saved', {}, 'Shortcut saved.')\n  } catch {\n    message.value = t('shortcuts.save_failed', {}, 'The shortcut could not be saved.')\n  }\n}\n\nconst change = (item: ShortcutListItem) => {\n  message.value = t(\n    'shortcuts.recording',\n    { label: item.label },\n    `Press the new keys for “${item.label}”. Escape cancels.`,\n  )\n  recording.value = item.id\n}\n\n// While recording, the next key press is the new binding (Escape cancels). Listening in the\n// capture phase keeps the key from closing the dialog or running another shortcut.\nwatch(recording, (id, _old, onCleanup) => {\n  if (!id || typeof window === 'undefined') return\n\n  shortcuts.setPaused(true)\n\n  const listener = (event: KeyboardEvent) => {\n    event.preventDefault()\n    event.stopPropagation()\n\n    if (event.key === 'Escape') {\n      recording.value = null\n      message.value = t('shortcuts.cancelled', {}, 'Change cancelled.')\n\n      return\n    }\n\n    const binding = bindingFromEvent(event)\n\n    if (!binding) return\n\n    const conflict = shortcuts.conflict([binding], id)\n\n    recording.value = null\n\n    if (conflict) {\n      message.value = t(\n        'shortcuts.conflict',\n        { label: conflict.label },\n        `Already used by “${conflict.label}”.`,\n      )\n\n      return\n    }\n\n    void save(id, [binding])\n  }\n\n  window.addEventListener('keydown', listener, true)\n  onCleanup(() => {\n    window.removeEventListener('keydown', listener, true)\n    shortcuts.setPaused(false)\n  })\n})\n\nconst update = (next: boolean) => {\n  recording.value = null\n  message.value = ''\n  emit('update:open', next)\n}\n</script>\n\n<template>\n  <Dialog :open=\"props.open\" @update:open=\"update\">\n    <DialogContent class=\"max-h-[85vh] overflow-y-auto sm:max-w-lg\">\n      <div data-slot=\"shortcuts-overlay\" class=\"flex flex-col gap-4\">\n        <DialogHeader>\n          <DialogTitle>{{ t('shortcuts.title', {}, 'Keyboard shortcuts') }}</DialogTitle>\n          <DialogDescription>{{\n            t('shortcuts.description', {}, 'Shortcuts available on this page.')\n          }}</DialogDescription>\n        </DialogHeader>\n        <div role=\"status\" aria-live=\"polite\" class=\"text-muted-foreground min-h-5 text-sm\">\n          {{ message }}\n        </div>\n        <div class=\"flex flex-col gap-5\">\n          <section\n            v-for=\"group in groups\"\n            :key=\"group.group\"\n            :data-group=\"group.group\"\n            :aria-labelledby=\"`shortcuts-${group.group}`\"\n          >\n            <h3\n              :id=\"`shortcuts-${group.group}`\"\n              class=\"text-muted-foreground mb-2 text-xs font-medium uppercase\"\n            >\n              {{ groupLabel(group.group) }}\n            </h3>\n            <ul class=\"flex flex-col divide-y rounded-md border\">\n              <li\n                v-for=\"item in group.items\"\n                :key=\"item.id\"\n                :data-shortcut=\"item.id\"\n                class=\"flex items-center gap-3 px-3 py-2 text-sm\"\n              >\n                <span class=\"min-w-0 flex-1 truncate\">{{ item.label }}</span>\n                <span v-if=\"recording === item.id\" class=\"text-primary text-xs\">{{\n                  t('shortcuts.press_keys', {}, 'Press keys…')\n                }}</span>\n                <span v-else-if=\"item.keys.length === 0\" class=\"text-muted-foreground text-xs\">{{\n                  t('shortcuts.off', {}, 'Off')\n                }}</span>\n                <span v-else class=\"flex flex-wrap items-center justify-end gap-2\">\n                  <ShortcutKeys v-for=\"key in item.keys\" :key=\"key\" :binding=\"key\" />\n                </span>\n                <span v-if=\"props.customizable && item.customizable\" class=\"flex shrink-0 gap-1\">\n                  <Button\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"xs\"\n                    :aria-label=\"\n                      t(\n                        'shortcuts.change_label',\n                        { label: item.label },\n                        `Change the shortcut for ${item.label}`,\n                      )\n                    \"\n                    @click=\"change(item)\"\n                    >{{ t('shortcuts.change', {}, 'Change') }}</Button\n                  >\n                  <Button\n                    v-if=\"item.keys.length > 0\"\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"xs\"\n                    :aria-label=\"\n                      t(\n                        'shortcuts.turn_off_label',\n                        { label: item.label },\n                        `Turn off the shortcut for ${item.label}`,\n                      )\n                    \"\n                    @click=\"save(item.id, [])\"\n                    >{{ t('shortcuts.turn_off', {}, 'Turn off') }}</Button\n                  >\n                  <Button\n                    v-if=\"item.customized\"\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"xs\"\n                    :aria-label=\"\n                      t(\n                        'shortcuts.reset_label',\n                        { label: item.label },\n                        `Restore the default shortcut for ${item.label}`,\n                      )\n                    \"\n                    @click=\"save(item.id, null)\"\n                    >{{ t('shortcuts.reset', {}, 'Reset') }}</Button\n                  >\n                </span>\n              </li>\n            </ul>\n          </section>\n        </div>\n      </div>\n    </DialogContent>\n  </Dialog>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ShortcutsOverlay.js","names":["_sfc_main","ShortcutsOverlay_vue_vue_type_script_setup_true_lang_default","ShortcutsOverlay_default"],"sources":["../../../src/components/panel/ShortcutsOverlay.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ShortcutListGroup, ShortcutListItem } from '@alfakit/core'\nimport {\n  ShortcutRecorder,\n  flattenActionGroup,\n  saveShortcutOverrides,\n  shortcutOverlayGroups,\n  shortcuts,\n} from '@alfakit/core'\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport { usePageSchema, useT } from '../../context'\nimport Button from '../ui/Button.vue'\nimport Dialog from '../ui/Dialog.vue'\nimport DialogContent from '../ui/DialogContent.vue'\nimport DialogDescription from '../ui/DialogDescription.vue'\nimport DialogHeader from '../ui/DialogHeader.vue'\nimport DialogTitle from '../ui/DialogTitle.vue'\nimport ShortcutKeys from './ShortcutKeys.vue'\n\n/** The `?` overlay: every shortcut on the page, grouped; users may change their keys. */\nconst props = defineProps<{ open: boolean; customizable: boolean; endpoint?: string }>()\nconst emit = defineEmits<{ 'update:open': [open: boolean] }>()\n\nconst t = useT()\nconst page = usePageSchema()\nconst version = ref(shortcuts.getVersion())\nconst recording = ref<string | null>(null)\nconst message = ref('')\n\n// Subscribed once mounted: a server render must not leave listeners on the shared registry.\nlet unsubscribe = () => {}\n\nonMounted(() => {\n  version.value = shortcuts.getVersion()\n  unsubscribe = shortcuts.subscribe(() => {\n    version.value = shortcuts.getVersion()\n  })\n})\n\nonBeforeUnmount(() => unsubscribe())\n\nconst groups = computed(() => {\n  void version.value\n\n  return shortcutOverlayGroups(\n    shortcuts.list(),\n    flattenActionGroup(page.value?.headerActions ?? []),\n  )\n})\n\nconst groupLabel = (group: ShortcutListGroup['group']) =>\n  ({\n    general: t('shortcuts.groups.general', {}, 'General'),\n    navigation: t('shortcuts.groups.navigation', {}, 'Navigation'),\n    commands: t('shortcuts.groups.commands', {}, 'Commands'),\n    actions: t('shortcuts.groups.actions', {}, 'Actions on this page'),\n  })[group]\n\nconst save = async (id: string, keys: string[] | null) => {\n  if (!props.endpoint) return\n\n  try {\n    shortcuts.setOverrides(await saveShortcutOverrides(props.endpoint, { [id]: keys }))\n    message.value = t('shortcuts.saved', {}, 'Shortcut saved.')\n  } catch {\n    message.value = t('shortcuts.save_failed', {}, 'The shortcut could not be saved.')\n  }\n}\n\nconst change = (item: ShortcutListItem) => {\n  message.value = t(\n    'shortcuts.recording',\n    { label: item.label },\n    `Press the new keys for “${item.label}”. Escape cancels.`,\n  )\n  recording.value = item.id\n}\n\n// While recording, the keys pressed are the new binding: one key (with modifiers) or a\n// sequence (\"g o\"), finished a second after the last key (Escape cancels). Listening in\n// the capture phase keeps the keys from closing the dialog or running another shortcut.\nwatch(recording, (id, _old, onCleanup) => {\n  if (!id || typeof window === 'undefined') return\n\n  shortcuts.setPaused(true)\n\n  const recorder = new ShortcutRecorder({\n    onDone: (binding) => {\n      recording.value = null\n\n      const conflict = shortcuts.conflict([binding], id)\n\n      if (conflict) {\n        message.value = t(\n          'shortcuts.conflict',\n          { label: conflict.label },\n          `Already used by “${conflict.label}”.`,\n        )\n\n        return\n      }\n\n      void save(id, [binding])\n    },\n  })\n\n  const listener = (event: KeyboardEvent) => {\n    event.preventDefault()\n    event.stopPropagation()\n\n    if (event.key === 'Escape') {\n      recorder.cancel()\n      recording.value = null\n      message.value = t('shortcuts.cancelled', {}, 'Change cancelled.')\n\n      return\n    }\n\n    recorder.press(event)\n  }\n\n  window.addEventListener('keydown', listener, true)\n  onCleanup(() => {\n    recorder.cancel()\n    window.removeEventListener('keydown', listener, true)\n    shortcuts.setPaused(false)\n  })\n})\n\nconst update = (next: boolean) => {\n  recording.value = null\n  message.value = ''\n  emit('update:open', next)\n}\n</script>\n\n<template>\n  <Dialog :open=\"props.open\" @update:open=\"update\">\n    <DialogContent class=\"max-h-[85vh] overflow-y-auto sm:max-w-lg\">\n      <div data-slot=\"shortcuts-overlay\" class=\"flex flex-col gap-4\">\n        <DialogHeader>\n          <DialogTitle>{{ t('shortcuts.title', {}, 'Keyboard shortcuts') }}</DialogTitle>\n          <DialogDescription>{{\n            t('shortcuts.description', {}, 'Shortcuts available on this page.')\n          }}</DialogDescription>\n        </DialogHeader>\n        <div role=\"status\" aria-live=\"polite\" class=\"text-muted-foreground min-h-5 text-sm\">\n          {{ message }}\n        </div>\n        <div class=\"flex flex-col gap-5\">\n          <section\n            v-for=\"group in groups\"\n            :key=\"group.group\"\n            :data-group=\"group.group\"\n            :aria-labelledby=\"`shortcuts-${group.group}`\"\n          >\n            <h3\n              :id=\"`shortcuts-${group.group}`\"\n              class=\"text-muted-foreground mb-2 text-xs font-medium uppercase\"\n            >\n              {{ groupLabel(group.group) }}\n            </h3>\n            <ul class=\"flex flex-col divide-y rounded-md border\">\n              <li\n                v-for=\"item in group.items\"\n                :key=\"item.id\"\n                :data-shortcut=\"item.id\"\n                class=\"flex items-center gap-3 px-3 py-2 text-sm\"\n              >\n                <span class=\"min-w-0 flex-1 truncate\">{{ item.label }}</span>\n                <span v-if=\"recording === item.id\" class=\"text-primary text-xs\">{{\n                  t('shortcuts.press_keys', {}, 'Press keys…')\n                }}</span>\n                <span v-else-if=\"item.keys.length === 0\" class=\"text-muted-foreground text-xs\">{{\n                  t('shortcuts.off', {}, 'Off')\n                }}</span>\n                <span v-else class=\"flex flex-wrap items-center justify-end gap-2\">\n                  <ShortcutKeys v-for=\"key in item.keys\" :key=\"key\" :binding=\"key\" />\n                </span>\n                <span v-if=\"props.customizable && item.customizable\" class=\"flex shrink-0 gap-1\">\n                  <Button\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"xs\"\n                    :aria-label=\"\n                      t(\n                        'shortcuts.change_label',\n                        { label: item.label },\n                        `Change the shortcut for ${item.label}`,\n                      )\n                    \"\n                    @click=\"change(item)\"\n                    >{{ t('shortcuts.change', {}, 'Change') }}</Button\n                  >\n                  <Button\n                    v-if=\"item.keys.length > 0\"\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"xs\"\n                    :aria-label=\"\n                      t(\n                        'shortcuts.turn_off_label',\n                        { label: item.label },\n                        `Turn off the shortcut for ${item.label}`,\n                      )\n                    \"\n                    @click=\"save(item.id, [])\"\n                    >{{ t('shortcuts.turn_off', {}, 'Turn off') }}</Button\n                  >\n                  <Button\n                    v-if=\"item.customized\"\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"xs\"\n                    :aria-label=\"\n                      t(\n                        'shortcuts.reset_label',\n                        { label: item.label },\n                        `Restore the default shortcut for ${item.label}`,\n                      )\n                    \"\n                    @click=\"save(item.id, null)\"\n                    >{{ t('shortcuts.reset', {}, 'Reset') }}</Button\n                  >\n                </span>\n              </li>\n            </ul>\n          </section>\n        </div>\n      </div>\n    </DialogContent>\n  </Dialog>\n</template>\n"],"mappings":""}

package/dist/components/panel/ShortcutsOverlay.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ShortcutsOverlay.vue.d.ts","sourceRoot":"","sources":["../../../src/components/panel/ShortcutsOverlay.vue"],"names":[],"mappings":"AAwPA,yFAAyF;AACzF,KAAK,WAAW,GAAG;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,YAAY,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;;;;;;AAsc/E,wBAOG"}
+{"version":3,"file":"ShortcutsOverlay.vue.d.ts","sourceRoot":"","sources":["../../../src/components/panel/ShortcutsOverlay.vue"],"names":[],"mappings":"AA6PA,yFAAyF;AACzF,KAAK,WAAW,GAAG;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,YAAY,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;;;;;;AA2c/E,wBAOG"}