@alfakit/vue 0.1.9 → 0.1.11

package/dist/components/layout/WizardComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"WizardComponent.js","names":["_sfc_main","WizardComponent_vue_vue_type_script_setup_true_lang_default","WizardComponent_default"],"sources":["../../../src/components/layout/WizardComponent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { WizardSchema } from '@alfakit/core'\nimport {\n  collectFields,\n  completedStepIcon,\n  initialWizardStep,\n  persistWizardStep,\n  reportWizardProgress,\n  wizardRequestedStepIndex,\n  wizardStepFieldPaths,\n  wizardStepQueryKey,\n  wizardStepToReveal,\n  schemaGapClass,\n} from '@alfakit/core'\nimport { CheckIcon } from '@lucide/vue'\nimport { computed, ref, watch } from 'vue'\nimport { useStoreSelector } from '../../composables/use-store'\nimport { useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport ActionButton from '../actions/ActionButton.vue'\nimport { usePageActionContext } from '../actions/action-context'\nimport { useOptionalFormStore } from '../form/form-context'\nimport SchemaRenderer from '../schema/SchemaRenderer.vue'\nimport Button from '../ui/Button.vue'\nimport DeferredSchema from './DeferredSchema.vue'\n\n/**\n * \"Next\" validates the current step's fields on the server before moving on; the submit\n * validates the whole form, and the wizard jumps to the first step containing an error\n * when new errors arrive (the user can still move between steps afterwards).\n */\nconst props = defineProps<{ component: WizardSchema }>()\nconst t = useT()\nconst steps = computed(() => props.component.schema ?? [])\nconst current = ref(\n  initialWizardStep(\n    steps.value.length,\n    props.component.startStep,\n    props.component.persistStepInQueryString,\n  ),\n)\n\nconst stepQueryKey = computed(() => wizardStepQueryKey(props.component.persistStepInQueryString))\nconst actionContext = usePageActionContext()\n\nwatch(\n  current,\n  (step) => {\n    if (stepQueryKey.value) persistWizardStep(step, stepQueryKey.value)\n  },\n  { immediate: true },\n)\nconst store = useOptionalFormStore()\n\n// An action modal around this wizard shows its submit button on the last step only.\nwatch(\n  [current, () => steps.value.length],\n  ([step, count]) => reportWizardProgress(store, step, count),\n  { immediate: true },\n)\nconst errors = useStoreSelector(\n  store?.store ?? {\n    get: () => ({ errors: {} as Record<string, string[]> }),\n    subscribe: () => () => {},\n  },\n  (state) => state.errors,\n)\n\nconst stepHasError = (index: number) => {\n  const step = steps.value[index]\n\n  return step\n    ? collectFields(step.schema ?? []).some((field) => errors.value[field.statePath])\n    : false\n}\n\nwatch(\n  errors,\n  (next, previous) => {\n    const reveal = wizardStepToReveal(steps.value, previous ?? {}, next)\n\n    if (reveal !== null) current.value = reveal\n  },\n  { immediate: true },\n)\n\n// `goToStep()` from the server: move once per request (each carries a new id).\nwatch(\n  () => props.component.goToStep?.id,\n  (id) => {\n    if (!id) return\n\n    const requested = wizardRequestedStepIndex(\n      steps.value,\n      props.component.goToStep,\n      current.value,\n      props.component.skippable,\n    )\n\n    if (requested !== null) current.value = requested\n  },\n)\n\nconst activeIndex = computed(() => current.value)\nconst validating = ref(false)\n\nconst next = async () => {\n  const step = steps.value[activeIndex.value]\n\n  if (store && step) {\n    validating.value = true\n    const valid = await store.validateStep(\n      step.key,\n      step.deferred ? (step.deferredPaths ?? []) : wizardStepFieldPaths(step),\n    )\n    validating.value = false\n\n    if (!valid) return\n  }\n\n  current.value = activeIndex.value + 1\n}\n</script>\n\n<template>\n  <div\n    data-surface=\"wizard\"\n    class=\"bg-card rounded-xl border shadow-xs\"\n    v-bind=\"props.component.extraAttributes\"\n  >\n    <ol class=\"flex flex-wrap gap-2 border-b p-4\" :aria-label=\"t('steps', {}, 'Steps')\">\n      <li v-for=\"(step, index) in steps\" :key=\"step.key\" class=\"flex items-center gap-2\">\n        <button\n          type=\"button\"\n          :disabled=\"!(props.component.skippable || index <= activeIndex)\"\n          :class=\"\n            cn(\n              'flex items-center gap-2 rounded-md px-2 py-1 text-sm transition-colors disabled:cursor-default',\n              index === activeIndex ? 'text-foreground font-medium' : 'text-muted-foreground',\n              (props.component.skippable || index <= activeIndex) &&\n                index !== activeIndex &&\n                'hover:text-foreground',\n            )\n          \"\n          @click=\"current = index\"\n        >\n          <span\n            :class=\"\n              cn(\n                'flex size-6 items-center justify-center rounded-full border text-xs',\n                index === activeIndex && 'border-primary bg-primary text-primary-foreground',\n                index < activeIndex && 'border-success bg-success text-success-foreground',\n                stepHasError(index) && 'border-destructive text-destructive',\n              )\n            \"\n          >\n            <template v-if=\"index < activeIndex\">\n              <Icon\n                v-if=\"completedStepIcon(step, props.component)\"\n                :name=\"completedStepIcon(step, props.component)\"\n                class=\"size-3.5\"\n              />\n              <Icon\n                v-else\n                name=\"alfakit::schemas.wizard.completed-step\"\n                :fallback=\"CheckIcon\"\n                class=\"size-3.5\"\n              />\n            </template>\n            <Icon v-else-if=\"step.icon\" :name=\"step.icon\" class=\"size-3.5\" />\n            <template v-else>{{ index + 1 }}</template>\n          </span>\n          <span class=\"flex flex-col items-start leading-tight\">\n            {{ step.label }}\n            <span v-if=\"step.description\" class=\"text-muted-foreground text-xs font-normal\">{{\n              step.description\n            }}</span>\n          </span>\n        </button>\n        <span v-if=\"index < steps.length - 1\" class=\"bg-border hidden h-px w-6 sm:block\" />\n      </li>\n    </ol>\n    <div\n      v-for=\"(step, index) in steps\"\n      :key=\"step.key\"\n      :class=\"cn('p-6', index !== activeIndex && 'hidden')\"\n    >\n      <DeferredSchema v-slot=\"{ component: loaded }\" :component=\"step\">\n        <SchemaRenderer\n          :components=\"loaded.schema ?? []\"\n          :columns=\"loaded.columns\"\n          :attributes=\"loaded.extraAttributes\"\n          :class=\"schemaGapClass(loaded) || undefined\"\n        />\n      </DeferredSchema>\n    </div>\n    <div class=\"flex items-center justify-between gap-2 border-t p-4\">\n      <span v-if=\"props.component.previousAction === false\" />\n      <ActionButton\n        v-else-if=\"props.component.previousAction\"\n        :action=\"{ ...props.component.previousAction, disabled: activeIndex === 0 || undefined }\"\n        :context=\"actionContext\"\n        :on-trigger=\"() => void (current = activeIndex - 1)\"\n      />\n      <Button\n        v-else\n        type=\"button\"\n        variant=\"outline\"\n        :disabled=\"activeIndex === 0\"\n        @click=\"current = activeIndex - 1\"\n        >{{ props.component.previousActionLabel ?? t('form.previous_step', {}, 'Back') }}</Button\n      >\n      <template v-if=\"activeIndex < steps.length - 1\">\n        <span v-if=\"props.component.nextAction === false\" />\n        <ActionButton\n          v-else-if=\"props.component.nextAction\"\n          :action=\"{\n            ...props.component.nextAction,\n            disabled: props.component.nextAction.disabled || validating || undefined,\n          }\"\n          :context=\"actionContext\"\n          :on-trigger=\"() => next()\"\n        />\n        <Button\n          v-else\n          type=\"button\"\n          :disabled=\"validating\"\n          :aria-busy=\"validating || undefined\"\n          @click=\"next\"\n          >{{ props.component.nextActionLabel ?? t('form.next_step', {}, 'Next') }}</Button\n        >\n      </template>\n      <ActionButton\n        v-else-if=\"props.component.submitAction\"\n        :action=\"props.component.submitAction\"\n        :context=\"actionContext\"\n      />\n      <div\n        v-else-if=\"props.component.submitActionHtml\"\n        data-slot=\"wizard-submit\"\n        v-html=\"props.component.submitActionHtml\"\n      />\n      <span v-else class=\"text-muted-foreground text-xs\">{{\n        props.component.submitActionLabel\n      }}</span>\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"WizardComponent.js","names":["_sfc_main","WizardComponent_vue_vue_type_script_setup_true_lang_default","WizardComponent_default"],"sources":["../../../src/components/layout/WizardComponent.vue"],"mappings":""}

package/dist/components/layout/WizardComponent.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"WizardComponent.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_mergeProps","_createElementVNode","_unref","_Fragment","_renderList","_normalizeClass","_createBlock","Icon","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode","DeferredSchema","_withCtx","SchemaRenderer","ActionButton","Button","Icon_default","Button_default","ActionButton_default","SchemaRenderer_default","DeferredSchema_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","WizardComponent_vue_vue_type_script_setup_true_lang_default","props","__props","t","useT","steps","computed","current","ref","initialWizardStep","stepQueryKey","wizardStepQueryKey","actionContext","usePageActionContext","persistWizardStep","step","store","useOptionalFormStore","count","reportWizardProgress","errors","useStoreSelector","state","stepHasError","index","collectFields","field","watch","reveal","wizardStepToReveal","previous","next","id","requested","wizardRequestedStepIndex","activeIndex","validating","valid","wizardStepFieldPaths","openBlock","createElementBlock","mergeProps","createElementVNode","unref","Fragment","renderList","normalizeClass","cn","completedStepIcon","createBlock","CheckIcon","createTextVNode","toDisplayString","createCommentVNode","createVNode","withCtx","loaded","schemaGapClass","_cache"],"sources":["../../../src/components/layout/WizardComponent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { WizardSchema } from '@alfakit/core'\nimport {\n  collectFields,\n  completedStepIcon,\n  initialWizardStep,\n  persistWizardStep,\n  reportWizardProgress,\n  wizardRequestedStepIndex,\n  wizardStepFieldPaths,\n  wizardStepQueryKey,\n  wizardStepToReveal,\n  schemaGapClass,\n} from '@alfakit/core'\nimport { CheckIcon } from '@lucide/vue'\nimport { computed, ref, watch } from 'vue'\nimport { useStoreSelector } from '../../composables/use-store'\nimport { useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport ActionButton from '../actions/ActionButton.vue'\nimport { usePageActionContext } from '../actions/action-context'\nimport { useOptionalFormStore } from '../form/form-context'\nimport SchemaRenderer from '../schema/SchemaRenderer.vue'\nimport Button from '../ui/Button.vue'\nimport DeferredSchema from './DeferredSchema.vue'\n\n/**\n * \"Next\" validates the current step's fields on the server before moving on; the submit\n * validates the whole form, and the wizard jumps to the first step containing an error\n * when new errors arrive (the user can still move between steps afterwards).\n */\nconst props = defineProps<{ component: WizardSchema }>()\nconst t = useT()\nconst steps = computed(() => props.component.schema ?? [])\nconst current = ref(\n  initialWizardStep(\n    steps.value.length,\n    props.component.startStep,\n    props.component.persistStepInQueryString,\n  ),\n)\n\nconst stepQueryKey = computed(() => wizardStepQueryKey(props.component.persistStepInQueryString))\nconst actionContext = usePageActionContext()\n\nwatch(\n  current,\n  (step) => {\n    if (stepQueryKey.value) persistWizardStep(step, stepQueryKey.value)\n  },\n  { immediate: true },\n)\nconst store = useOptionalFormStore()\n\n// An action modal around this wizard shows its submit button on the last step only.\nwatch(\n  [current, () => steps.value.length],\n  ([step, count]) => reportWizardProgress(store, step, count),\n  { immediate: true },\n)\nconst errors = useStoreSelector(\n  store?.store ?? {\n    get: () => ({ errors: {} as Record<string, string[]> }),\n    subscribe: () => () => {},\n  },\n  (state) => state.errors,\n)\n\nconst stepHasError = (index: number) => {\n  const step = steps.value[index]\n\n  return step\n    ? collectFields(step.schema ?? []).some((field) => errors.value[field.statePath])\n    : false\n}\n\nwatch(\n  errors,\n  (next, previous) => {\n    const reveal = wizardStepToReveal(steps.value, previous ?? {}, next)\n\n    if (reveal !== null) current.value = reveal\n  },\n  { immediate: true },\n)\n\n// `goToStep()` from the server: move once per request (each carries a new id).\nwatch(\n  () => props.component.goToStep?.id,\n  (id) => {\n    if (!id) return\n\n    const requested = wizardRequestedStepIndex(\n      steps.value,\n      props.component.goToStep,\n      current.value,\n      props.component.skippable,\n    )\n\n    if (requested !== null) current.value = requested\n  },\n)\n\nconst activeIndex = computed(() => current.value)\nconst validating = ref(false)\n\nconst next = async () => {\n  const step = steps.value[activeIndex.value]\n\n  if (store && step) {\n    validating.value = true\n    const valid = await store.validateStep(\n      step.key,\n      step.deferred ? (step.deferredPaths ?? []) : wizardStepFieldPaths(step),\n    )\n    validating.value = false\n\n    if (!valid) return\n  }\n\n  current.value = activeIndex.value + 1\n}\n</script>\n\n<template>\n  <div\n    data-surface=\"wizard\"\n    class=\"bg-card rounded-xl border shadow-xs\"\n    v-bind=\"props.component.extraAttributes\"\n  >\n    <ol class=\"flex flex-wrap gap-2 border-b p-4\" :aria-label=\"t('steps', {}, 'Steps')\">\n      <li v-for=\"(step, index) in steps\" :key=\"step.key\" class=\"flex items-center gap-2\">\n        <button\n          type=\"button\"\n          :disabled=\"!(props.component.skippable || index <= activeIndex)\"\n          :class=\"\n            cn(\n              'flex items-center gap-2 rounded-md px-2 py-1 text-sm transition-colors disabled:cursor-default',\n              index === activeIndex ? 'text-foreground font-medium' : 'text-muted-foreground',\n              (props.component.skippable || index <= activeIndex) &&\n                index !== activeIndex &&\n                'hover:text-foreground',\n            )\n          \"\n          @click=\"current = index\"\n        >\n          <span\n            :class=\"\n              cn(\n                'flex size-6 items-center justify-center rounded-full border text-xs',\n                index === activeIndex && 'border-primary bg-primary text-primary-foreground',\n                index < activeIndex && 'border-success bg-success text-success-foreground',\n                stepHasError(index) && 'border-destructive text-destructive',\n              )\n            \"\n          >\n            <template v-if=\"index < activeIndex\">\n              <Icon\n                v-if=\"completedStepIcon(step, props.component)\"\n                :name=\"completedStepIcon(step, props.component)\"\n                class=\"size-3.5\"\n              />\n              <Icon\n                v-else\n                name=\"alfakit::schemas.wizard.completed-step\"\n                :fallback=\"CheckIcon\"\n                class=\"size-3.5\"\n              />\n            </template>\n            <Icon v-else-if=\"step.icon\" :name=\"step.icon\" class=\"size-3.5\" />\n            <template v-else>{{ index + 1 }}</template>\n          </span>\n          <span class=\"flex flex-col items-start leading-tight\">\n            {{ step.label }}\n            <span v-if=\"step.description\" class=\"text-muted-foreground text-xs font-normal\">{{\n              step.description\n            }}</span>\n          </span>\n        </button>\n        <span v-if=\"index < steps.length - 1\" class=\"bg-border hidden h-px w-6 sm:block\" />\n      </li>\n    </ol>\n    <div\n      v-for=\"(step, index) in steps\"\n      :key=\"step.key\"\n      :class=\"cn('p-6', index !== activeIndex && 'hidden')\"\n    >\n      <DeferredSchema v-slot=\"{ component: loaded }\" :component=\"step\">\n        <SchemaRenderer\n          :components=\"loaded.schema ?? []\"\n          :columns=\"loaded.columns\"\n          :attributes=\"loaded.extraAttributes\"\n          :class=\"schemaGapClass(loaded) || undefined\"\n        />\n      </DeferredSchema>\n    </div>\n    <div class=\"flex items-center justify-between gap-2 border-t p-4\">\n      <span v-if=\"props.component.previousAction === false\" />\n      <ActionButton\n        v-else-if=\"props.component.previousAction\"\n        :action=\"{ ...props.component.previousAction, disabled: activeIndex === 0 || undefined }\"\n        :context=\"actionContext\"\n        :on-trigger=\"() => void (current = activeIndex - 1)\"\n      />\n      <Button\n        v-else\n        type=\"button\"\n        variant=\"outline\"\n        :disabled=\"activeIndex === 0\"\n        @click=\"current = activeIndex - 1\"\n        >{{ props.component.previousActionLabel ?? t('form.previous_step', {}, 'Back') }}</Button\n      >\n      <template v-if=\"activeIndex < steps.length - 1\">\n        <span v-if=\"props.component.nextAction === false\" />\n        <ActionButton\n          v-else-if=\"props.component.nextAction\"\n          :action=\"{\n            ...props.component.nextAction,\n            disabled: props.component.nextAction.disabled || validating || undefined,\n          }\"\n          :context=\"actionContext\"\n          :on-trigger=\"() => next()\"\n        />\n        <Button\n          v-else\n          type=\"button\"\n          :disabled=\"validating\"\n          :aria-busy=\"validating || undefined\"\n          @click=\"next\"\n          >{{ props.component.nextActionLabel ?? t('form.next_step', {}, 'Next') }}</Button\n        >\n      </template>\n      <ActionButton\n        v-else-if=\"props.component.submitAction\"\n        :action=\"props.component.submitAction\"\n        :context=\"actionContext\"\n      />\n      <div\n        v-else-if=\"props.component.submitActionHtml\"\n        data-slot=\"wizard-submit\"\n        v-html=\"props.component.submitActionHtml\"\n      />\n      <span v-else class=\"text-muted-foreground text-xs\">{{\n        props.component.submitActionLabel\n      }}</span>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"WizardComponent.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_mergeProps","_createElementVNode","_unref","_Fragment","_renderList","_normalizeClass","_createBlock","Icon","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode","DeferredSchema","_withCtx","SchemaRenderer","ActionButton","Button","Icon_default","Button_default","ActionButton_default","SchemaRenderer_default","DeferredSchema_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","WizardComponent_vue_vue_type_script_setup_true_lang_default","props","__props","t","useT","steps","computed","current","ref","initialWizardStep","stepQueryKey","wizardStepQueryKey","actionContext","usePageActionContext","persistWizardStep","step","store","useOptionalFormStore","count","reportWizardProgress","errors","useStoreSelector","state","stepHasError","index","collectFields","field","watch","reveal","wizardStepToReveal","previous","next","id","requested","wizardRequestedStepIndex","activeIndex","validating","valid","wizardStepFieldPaths","openBlock","createElementBlock","mergeProps","createElementVNode","unref","Fragment","renderList","normalizeClass","cn","completedStepIcon","createBlock","CheckIcon","createTextVNode","toDisplayString","createCommentVNode","createVNode","withCtx","loaded","schemaGapClass","_cache"],"sources":["../../../src/components/layout/WizardComponent.vue"],"mappings":"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"}

package/dist/components/layout/component-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"component-context.js","names":["NO_FORM","useSchemaComponentContext","form","useOptionalFormStore","state","useStoreSelector","value","computed","current","toValue","component","createSchemaComponentContext"],"sources":["../../../src/components/layout/component-context.ts"],"sourcesContent":["import type { BaseComponent, FormState, SchemaComponentContextValue, Store } from '@alfakit/core'\nimport { createSchemaComponentContext } from '@alfakit/core'\nimport { computed, toValue, type ComputedRef, type MaybeRefOrGetter } from 'vue'\nimport { useStoreSelector } from '../../composables/use-store'\nimport { useOptionalFormStore } from '../form/form-context'\n\nconst NO_FORM: Pick<Store<FormState | null>, 'get' | 'subscribe'> = {\n  get: () => null,\n  subscribe: () => () => {},\n}\n\n/**\n * What a custom schema component can read about its schema: other components' state\n * (`get('../other')`, like PHP's `$get()`), the whole form `state`, and the `operation`,\n * `recordKey`, `record` attributes and `data` the PHP component exposes with\n * `exposeContext()`. Outside a form (infolists) `state` is `null`.\n */\nexport function useSchemaComponentContext(\n  component: MaybeRefOrGetter<Pick<BaseComponent, 'context'> & { statePath?: string }>,\n): ComputedRef<SchemaComponentContextValue> {\n  const form = useOptionalFormStore()\n  const state = useStoreSelector<FormState | null, Record<string, unknown> | null>(\n    form?.store ?? NO_FORM,\n    (value) => (value ? value.values : null),\n  )\n\n  return computed(() => {\n    const current = toValue(component)\n\n    return createSchemaComponentContext(current.context, state.value, current.statePath)\n  })\n}\n"],"mappings":";;;;;AAMA,IAAMA,IAA8D;CAClE,WAAW;CACX,uBAAuB,CAAC;AAC1B;AAQA,SAAgBC,EACd,GAC0C;CAC1C,IAAMC,IAAOC,EAAqB,GAC5BC,IAAQC,EACZH,GAAM,SAASF,IACd,MAAWM,IAAQA,EAAM,SAAS,IACrC;CAEA,OAAOC,QAAe;EACpB,IAAMC,IAAUC,EAAQC,CAAS;EAEjC,OAAOC,EAA6BH,EAAQ,SAASJ,EAAM,OAAOI,EAAQ,SAAS;CACrF,CAAC;AACH"}
+{"version":3,"file":"component-context.js","names":["NO_FORM","useSchemaComponentContext","form","useOptionalFormStore","state","useStoreSelector","value","computed","current","toValue","component","createSchemaComponentContext"],"sources":["../../../src/components/layout/component-context.ts"],"mappings":";;;;;AAMA,IAAMA,IAA8D;CAClE,WAAW;CACX,uBAAuB,CAAC;AAC1B;AAQA,SAAgBC,EACd,GAC0C;CAC1C,IAAMC,IAAOC,EAAqB,GAC5BC,IAAQC,EACZH,GAAM,SAASF,IACd,MAAWM,IAAQA,EAAM,SAAS,IACrC;CAEA,OAAOC,QAAe;EACpB,IAAMC,IAAUC,EAAQC,CAAS;EAEjC,OAAOC,EAA6BH,EAAQ,SAASJ,EAAM,OAAOI,EAAQ,SAAS;CACrF,CAAC;AACH"}

package/dist/components/layout/deferred.js.map

@@ -1 +1 @@
-{"version":3,"file":"deferred.js","names":["emptyFormState","createStore","useDeferredBadge","form","useOptionalFormStore","panel","usePanel","page","usePageActionContext","badge","ref","tab","controller","onMounted","url","loadDeferredBadge","loaded","error","reportRequestError","onScopeDispose"],"sources":["../../../src/components/layout/deferred.ts"],"sourcesContent":["import type { DeferredBadgeSchema, FormState } from '@alfakit/core'\nimport { createStore, loadDeferredBadge, reportRequestError } from '@alfakit/core'\nimport { onMounted, onScopeDispose, ref, type Ref } from 'vue'\nimport { usePanel } from '../../context'\nimport { usePageActionContext } from '../actions/action-context'\nimport { useOptionalFormStore } from '../form/form-context'\n\n/** Stands in for the form store outside forms (infolists). */\nexport const emptyFormState = createStore<Pick<FormState, 'errors'>>({ errors: {} })\n\n/**\n * `Tab::deferBadge()`: the tab's badge, loaded after mounting (so SSR renders the tab\n * without it). Non-deferred tabs return their own badge.\n */\nexport function useDeferredBadge(tab: {\n  key: string\n  badgeDeferred?: boolean\n  badge?: string | number\n  badgeColor?: string\n  badgeTooltip?: string\n}): Ref<DeferredBadgeSchema> {\n  const form = useOptionalFormStore()\n  const panel = usePanel()\n  const page = usePageActionContext()\n  const badge = ref<DeferredBadgeSchema>(\n    tab.badgeDeferred\n      ? {}\n      : { badge: tab.badge, badgeColor: tab.badgeColor, badgeTooltip: tab.badgeTooltip },\n  )\n  const controller = typeof AbortController === 'undefined' ? null : new AbortController()\n\n  onMounted(() => {\n    const url = panel.value?.endpoints?.schemaDeferred\n\n    if (!tab.badgeDeferred || !url) return\n\n    loadDeferredBadge({\n      url,\n      token: page.token,\n      key: tab.key,\n      form,\n      signal: controller?.signal,\n    })\n      .then((loaded) => {\n        badge.value = loaded\n      })\n      .catch((error: Error) => {\n        if (error.name !== 'AbortError') reportRequestError(error)\n      })\n  })\n\n  onScopeDispose(() => controller?.abort())\n\n  return badge\n}\n"],"mappings":";;;;;;AAQA,IAAaA,IAAiBC,EAAuC,EAAE,QAAQ,CAAC,EAAE,CAAC;AAMnF,SAAgBC,EAAiB,GAMJ;CAC3B,IAAMC,IAAOC,EAAqB,GAC5BC,IAAQC,EAAS,GACjBC,IAAOC,EAAqB,GAC5BC,IAAQC,EACZC,EAAI,gBACA,CAAC,IACD;EAAE,OAAOA,EAAI;EAAO,YAAYA,EAAI;EAAY,cAAcA,EAAI;CAAa,CACrF,GACMC,IAAa,OAAO,kBAAoB,MAAc,OAAO,IAAI,gBAAgB;CAwBvF,OAtBAC,QAAgB;EACd,IAAMC,IAAMT,EAAM,OAAO,WAAW;EAEpC,AAAKM,EAAI,iBAAkBG,KAE3BC,EAAkB;GAChB;GACA,OAAOR,EAAK;GACZ,KAAKI,EAAI;GACT;GACA,QAAQC,GAAY;EACtB,CAAC,CAAC,CACC,MAAM,MAAW;GAChB,EAAM,QAAQI;EAChB,CAAC,CAAC,CACD,OAAO,MAAiB;GACvB,AAAIC,EAAM,SAAS,gBAAcC,EAAmBD,CAAK;EAC3D,CAAC;CACL,CAAC,GAEDE,QAAqBP,GAAY,MAAM,CAAC,GAEjCH;AACT"}
+{"version":3,"file":"deferred.js","names":["emptyFormState","createStore","useDeferredBadge","form","useOptionalFormStore","panel","usePanel","page","usePageActionContext","badge","ref","tab","controller","onMounted","url","loadDeferredBadge","loaded","error","reportRequestError","onScopeDispose"],"sources":["../../../src/components/layout/deferred.ts"],"mappings":";;;;;;AAQA,IAAaA,IAAiBC,EAAuC,EAAE,QAAQ,CAAC,EAAE,CAAC;AAMnF,SAAgBC,EAAiB,GAMJ;CAC3B,IAAMC,IAAOC,EAAqB,GAC5BC,IAAQC,EAAS,GACjBC,IAAOC,EAAqB,GAC5BC,IAAQC,EACZC,EAAI,gBACA,CAAC,IACD;EAAE,OAAOA,EAAI;EAAO,YAAYA,EAAI;EAAY,cAAcA,EAAI;CAAa,CACrF,GACMC,IAAa,OAAO,kBAAoB,MAAc,OAAO,IAAI,gBAAgB;CAwBvF,OAtBAC,QAAgB;EACd,IAAMC,IAAMT,EAAM,OAAO,WAAW;EAEpC,AAAKM,EAAI,iBAAkBG,KAE3BC,EAAkB;GAChB;GACA,OAAOR,EAAK;GACZ,KAAKI,EAAI;GACT;GACA,QAAQC,GAAY;EACtB,CAAC,CAAC,CACC,MAAM,MAAW;GAChB,EAAM,QAAQI;EAChB,CAAC,CAAC,CACD,OAAO,MAAiB;GACvB,AAAIC,EAAM,SAAS,gBAAcC,EAAmBD,CAAK;EAC3D,CAAC;CACL,CAAC,GAEDE,QAAqBP,GAAY,MAAM,CAAC,GAEjCH;AACT"}

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

@@ -1 +1 @@
-{"version":3,"file":"FlashToasts.js","names":["_sfc_main","FlashToasts_vue_vue_type_script_setup_true_lang_default","FlashToasts_default"],"sources":["../../../src/components/notifications/FlashToasts.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted } from 'vue'\nimport { useRegistry } from '../../context'\nimport { ensureFlashToasts } from '../../standalone/runtime'\n\n/** Turns flashed Alfakit notifications into sonner toasts. Mount once. */\nconst registry = useRegistry()\n\n// Inertia 3 delivers flash data as `page.flash` (and a `flash` event), not as a page prop,\n// so this shares the listener the standalone toaster uses. Mounted only: showing toasts\n// during a server render would leak them into other requests.\nonMounted(() => {\n  ensureFlashToasts(registry)\n})\n</script>\n\n<template>\n  <slot />\n</template>\n"],"mappings":""}
+{"version":3,"file":"FlashToasts.js","names":["_sfc_main","FlashToasts_vue_vue_type_script_setup_true_lang_default","FlashToasts_default"],"sources":["../../../src/components/notifications/FlashToasts.vue"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"FlashToasts.vue_vue_type_script_setup_true_lang.js","names":["_renderSlot","FlashToasts_vue_vue_type_script_setup_true_lang_default","registry","useRegistry","onMounted","renderSlot","_ctx"],"sources":["../../../src/components/notifications/FlashToasts.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted } from 'vue'\nimport { useRegistry } from '../../context'\nimport { ensureFlashToasts } from '../../standalone/runtime'\n\n/** Turns flashed Alfakit notifications into sonner toasts. Mount once. */\nconst registry = useRegistry()\n\n// Inertia 3 delivers flash data as `page.flash` (and a `flash` event), not as a page prop,\n// so this shares the listener the standalone toaster uses. Mounted only: showing toasts\n// during a server render would leak them into other requests.\nonMounted(() => {\n  ensureFlashToasts(registry)\n})\n</script>\n\n<template>\n  <slot />\n</template>\n"],"mappings":";;;;;;;EAMA,IAAME,IAAWC,EAAY;SAK7BC,QAAgB;GACd,EAAkBF,CAAQ;EAC5B,CAAC,aAICF,EAAQM,EAAA,QAAA,SAAA"}
+{"version":3,"file":"FlashToasts.vue_vue_type_script_setup_true_lang.js","names":["_renderSlot","FlashToasts_vue_vue_type_script_setup_true_lang_default","registry","useRegistry","onMounted","renderSlot","_ctx"],"sources":["../../../src/components/notifications/FlashToasts.vue"],"mappings":";;;;;;;EAMA,IAAME,IAAWC,EAAY;SAK7BC,QAAgB;GACd,EAAkBF,CAAQ;EAC5B,CAAC,aAICF,EAAQM,EAAA,QAAA,SAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationActionButton.js","names":["_sfc_main","NotificationActionButton_vue_vue_type_script_setup_true_lang_default","NotificationActionButton_default"],"sources":["../../../src/components/notifications/NotificationActionButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { NotificationActionSchema } from '@alfakit/core'\nimport { resolveActionSize } from '@alfakit/core'\nimport { router } from '@inertiajs/vue3'\nimport { computed } from 'vue'\nimport { toast } from 'vue-sonner'\nimport {\n  colorClass,\n  ghostButtonColorClasses,\n  outlineButtonColorClasses,\n  solidButtonColorClasses,\n  textColorClasses,\n} from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport Button from '../ui/Button.vue'\n\nconst props = defineProps<{\n  action: NotificationActionSchema\n  toastId?: string\n  onMarkAsRead?: () => void\n  /** Database notifications: `markAsUnread()`. */\n  onMarkAsUnread?: () => void\n}>()\n\nconst run = () => {\n  if (props.action.dispatch) {\n    window.dispatchEvent(\n      new CustomEvent(props.action.dispatch.event, { detail: props.action.dispatch.data }),\n    )\n  }\n\n  if (props.action.markAsRead) props.onMarkAsRead?.()\n  if (props.action.markAsUnread) props.onMarkAsUnread?.()\n  if (props.action.close && props.toastId) toast.dismiss(props.toastId)\n\n  if (props.action.url) {\n    if (props.action.openUrlInNewTab) window.open(props.action.url, '_blank', 'noopener')\n    else router.visit(props.action.url)\n  }\n}\n\nconst variant = computed(() => {\n  switch (props.action.variant) {\n    case 'button':\n      return 'default'\n    case 'outline':\n      return 'outline'\n    case 'ghost':\n    case 'icon-button':\n      return 'ghost'\n    default:\n      return 'link'\n  }\n})\n\n// The action's `color()` applied to its variant (links default to the primary colour).\nconst colorClasses = computed(() => {\n  const color = props.action.color\n\n  if (!color) return undefined\n\n  switch (props.action.variant) {\n    case 'button':\n      return colorClass(solidButtonColorClasses, color, 'primary')\n    case 'outline':\n      return colorClass(outlineButtonColorClasses, color, 'gray')\n    case 'ghost':\n    case 'icon-button':\n      return colorClass(ghostButtonColorClasses, color, 'gray')\n    default:\n      return colorClass(textColorClasses, color, 'primary')\n  }\n})\n</script>\n\n<template>\n  <Button\n    type=\"button\"\n    :size=\"resolveActionSize(props.action.size, 'xs')\"\n    :variant=\"variant\"\n    :class=\"colorClasses\"\n    @click=\"run\"\n  >\n    <Icon v-if=\"props.action.icon\" :name=\"props.action.icon\" class=\"size-3.5\" />\n    {{ props.action.label }}\n  </Button>\n</template>\n"],"mappings":""}
+{"version":3,"file":"NotificationActionButton.js","names":["_sfc_main","NotificationActionButton_vue_vue_type_script_setup_true_lang_default","NotificationActionButton_default"],"sources":["../../../src/components/notifications/NotificationActionButton.vue"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationActionButton.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","Button","_unref","_normalizeClass","_withCtx","Icon","_createCommentVNode","_createTextVNode","_toDisplayString","Icon_default","Button_default","NotificationActionButton_vue_vue_type_script_setup_true_lang_default","props","__props","run","toast","router","variant","computed","colorClasses","color","colorClass","solidButtonColorClasses","outlineButtonColorClasses","ghostButtonColorClasses","textColorClasses","openBlock","createBlock","unref","resolveActionSize","normalizeClass","withCtx","createCommentVNode","createTextVNode","toDisplayString"],"sources":["../../../src/components/notifications/NotificationActionButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { NotificationActionSchema } from '@alfakit/core'\nimport { resolveActionSize } from '@alfakit/core'\nimport { router } from '@inertiajs/vue3'\nimport { computed } from 'vue'\nimport { toast } from 'vue-sonner'\nimport {\n  colorClass,\n  ghostButtonColorClasses,\n  outlineButtonColorClasses,\n  solidButtonColorClasses,\n  textColorClasses,\n} from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport Button from '../ui/Button.vue'\n\nconst props = defineProps<{\n  action: NotificationActionSchema\n  toastId?: string\n  onMarkAsRead?: () => void\n  /** Database notifications: `markAsUnread()`. */\n  onMarkAsUnread?: () => void\n}>()\n\nconst run = () => {\n  if (props.action.dispatch) {\n    window.dispatchEvent(\n      new CustomEvent(props.action.dispatch.event, { detail: props.action.dispatch.data }),\n    )\n  }\n\n  if (props.action.markAsRead) props.onMarkAsRead?.()\n  if (props.action.markAsUnread) props.onMarkAsUnread?.()\n  if (props.action.close && props.toastId) toast.dismiss(props.toastId)\n\n  if (props.action.url) {\n    if (props.action.openUrlInNewTab) window.open(props.action.url, '_blank', 'noopener')\n    else router.visit(props.action.url)\n  }\n}\n\nconst variant = computed(() => {\n  switch (props.action.variant) {\n    case 'button':\n      return 'default'\n    case 'outline':\n      return 'outline'\n    case 'ghost':\n    case 'icon-button':\n      return 'ghost'\n    default:\n      return 'link'\n  }\n})\n\n// The action's `color()` applied to its variant (links default to the primary colour).\nconst colorClasses = computed(() => {\n  const color = props.action.color\n\n  if (!color) return undefined\n\n  switch (props.action.variant) {\n    case 'button':\n      return colorClass(solidButtonColorClasses, color, 'primary')\n    case 'outline':\n      return colorClass(outlineButtonColorClasses, color, 'gray')\n    case 'ghost':\n    case 'icon-button':\n      return colorClass(ghostButtonColorClasses, color, 'gray')\n    default:\n      return colorClass(textColorClasses, color, 'primary')\n  }\n})\n</script>\n\n<template>\n  <Button\n    type=\"button\"\n    :size=\"resolveActionSize(props.action.size, 'xs')\"\n    :variant=\"variant\"\n    :class=\"colorClasses\"\n    @click=\"run\"\n  >\n    <Icon v-if=\"props.action.icon\" :name=\"props.action.icon\" class=\"size-3.5\" />\n    {{ props.action.label }}\n  </Button>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAgBA,IAAMa,IAAQC,GAQRC,UAAY;GAWhB,AAVIF,EAAM,OAAO,YACf,OAAO,cACL,IAAI,YAAYA,EAAM,OAAO,SAAS,OAAO,EAAE,QAAQA,EAAM,OAAO,SAAS,KAAK,CAAC,CACrF,GAGEA,EAAM,OAAO,cAAYA,EAAM,eAAe,GAC9CA,EAAM,OAAO,gBAAcA,EAAM,iBAAiB,GAClDA,EAAM,OAAO,SAASA,EAAM,WAASG,EAAM,QAAQH,EAAM,OAAO,GAEhEA,EAAM,OAAO,QACXA,EAAM,OAAO,kBAAiB,OAAO,KAAKA,EAAM,OAAO,KAAK,UAAU,UAAU,IAC/EI,EAAO,MAAMJ,EAAM,OAAO,GAAG;EAEtC,GAEMK,IAAUC,QAAe;GAC7B,QAAQN,EAAM,OAAO,SAArB;IACE,KAAK,UACH,OAAO;IACT,KAAK,WACH,OAAO;IACT,KAAK;IACL,KAAK,eACH,OAAO;IACT,SACE,OAAO;GACX;EACF,CAAC,GAGKO,IAAeD,QAAe;GAClC,IAAME,IAAQR,EAAM,OAAO;GAE3B,IAAKQ,GAEL,QAAQR,EAAM,OAAO,SAArB;IACE,KAAK,UACH,OAAOS,EAAWC,GAAyBF,GAAO,SAAS;IAC7D,KAAK,WACH,OAAOC,EAAWE,GAA2BH,GAAO,MAAM;IAC5D,KAAK;IACL,KAAK,eACH,OAAOC,EAAWG,GAAyBJ,GAAO,MAAM;IAC1D,SACE,OAAOC,EAAWI,GAAkBL,GAAO,SAAS;GACxD;EACF,CAAC;oBAICrB,EAAA,GAAAC,EASSC,GAAA;GARP,MAAK;GACJ,MAAMC,EAAA2B,CAAA,CAAiB,CAACjB,EAAM,OAAO,MAAI,IAAA;GACzC,SAASK,EAAA;GACT,OAAKd,EAAEgB,EAAA,KAAY;GACnB,SAAOL;;GAER,SAAAV,QAA4E,CAAhEQ,EAAM,OAAO,QAAzBb,EAAA,GAAAC,EAA4EE,EAAAG,CAAA,GAAA;;IAA5C,MAAMO,EAAM,OAAO;IAAM,OAAM;GAAaL,GAAAA,MAAAA,GAAAA,CAAAA,MAAAA,CAAAA,KAAAA,EAAAA,IAAAA,EAAAA,GAAAA,EAAA,MAC5EC,EAAGI,EAAM,OAAO,KAAK,GAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"NotificationActionButton.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","Button","_unref","_normalizeClass","_withCtx","Icon","_createCommentVNode","_createTextVNode","_toDisplayString","Icon_default","Button_default","NotificationActionButton_vue_vue_type_script_setup_true_lang_default","props","__props","run","toast","router","variant","computed","colorClasses","color","colorClass","solidButtonColorClasses","outlineButtonColorClasses","ghostButtonColorClasses","textColorClasses","openBlock","createBlock","unref","resolveActionSize","normalizeClass","withCtx","createCommentVNode","createTextVNode","toDisplayString"],"sources":["../../../src/components/notifications/NotificationActionButton.vue"],"mappings":";;;;;;;;;;;;;;;;;EAgBA,IAAMa,IAAQC,GAQRC,UAAY;GAWhB,AAVIF,EAAM,OAAO,YACf,OAAO,cACL,IAAI,YAAYA,EAAM,OAAO,SAAS,OAAO,EAAE,QAAQA,EAAM,OAAO,SAAS,KAAK,CAAC,CACrF,GAGEA,EAAM,OAAO,cAAYA,EAAM,eAAe,GAC9CA,EAAM,OAAO,gBAAcA,EAAM,iBAAiB,GAClDA,EAAM,OAAO,SAASA,EAAM,WAASG,EAAM,QAAQH,EAAM,OAAO,GAEhEA,EAAM,OAAO,QACXA,EAAM,OAAO,kBAAiB,OAAO,KAAKA,EAAM,OAAO,KAAK,UAAU,UAAU,IAC/EI,EAAO,MAAMJ,EAAM,OAAO,GAAG;EAEtC,GAEMK,IAAUC,QAAe;GAC7B,QAAQN,EAAM,OAAO,SAArB;IACE,KAAK,UACH,OAAO;IACT,KAAK,WACH,OAAO;IACT,KAAK;IACL,KAAK,eACH,OAAO;IACT,SACE,OAAO;GACX;EACF,CAAC,GAGKO,IAAeD,QAAe;GAClC,IAAME,IAAQR,EAAM,OAAO;GAE3B,IAAKQ,GAEL,QAAQR,EAAM,OAAO,SAArB;IACE,KAAK,UACH,OAAOS,EAAWC,GAAyBF,GAAO,SAAS;IAC7D,KAAK,WACH,OAAOC,EAAWE,GAA2BH,GAAO,MAAM;IAC5D,KAAK;IACL,KAAK,eACH,OAAOC,EAAWG,GAAyBJ,GAAO,MAAM;IAC1D,SACE,OAAOC,EAAWI,GAAkBL,GAAO,SAAS;GACxD;EACF,CAAC;oBAICrB,EAAA,GAAAC,EASSC,GAAA;GARP,MAAK;GACJ,MAAMC,EAAA2B,CAAA,CAAiB,CAACjB,EAAM,OAAO,MAAI,IAAA;GACzC,SAASK,EAAA;GACT,OAAKd,EAAEgB,EAAA,KAAY;GACnB,SAAOL;;GAER,SAAAV,QAA4E,CAAhEQ,EAAM,OAAO,QAAzBb,EAAA,GAAAC,EAA4EE,EAAAG,CAAA,GAAA;;IAA5C,MAAMO,EAAM,OAAO;IAAM,OAAM;GAAaL,GAAAA,MAAAA,GAAAA,CAAAA,MAAAA,CAAAA,KAAAA,EAAAA,IAAAA,EAAAA,GAAAA,EAAA,MAC5EC,EAAGI,EAAM,OAAO,KAAK,GAAA,CAAA,CAAA,CAAA"}

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"],"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