@eifi1/ui-kit 0.35.0 → 0.36.0

package/dist/notifications/quiet-hours-setting.js

@@ -0,0 +1,131 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { Button } from "../components/button.js";
+import { Card } from "../components/card.js";
+import { TimeInput } from "../components/time-input.js";
+import { COMMIT_EXCEPT_BILLING } from "../components/write-lock.js";
+import { CARD_DESCRIPTION_CLASS } from "../settings/settings-card-classes.js";
+import { SettingsCardTitle } from "../settings/settings-heading.js";
+import { settle, useMounted } from "../account/account-parts.js";
+import { describeFailure, FailureLine, useNotificationsLabels, useWriteOverlay } from "./notification-parts.js";
+import { deviceTimeZone, TimeZoneSelect, zoneName } from "./time-zone-select.js";
+const DEFAULT_FALLBACK_ZONE = "Europe/Zurich";
+function QuietHoursSetting({
+  start,
+  end,
+  timezone,
+  onChange,
+  fallbackZone = DEFAULT_FALLBACK_ZONE,
+  inbox = false,
+  disabled = false,
+  describeError,
+  labels: labelsProp,
+  className,
+  ...rest
+}) {
+  const labels = useNotificationsLabels(labelsProp);
+  const overlay = useWriteOverlay(`${start}|${end}|${timezone}`);
+  const [failure, setFailure] = useState(null);
+  const mounted = useMounted();
+  const id = useId();
+  const shown = (field, server) => overlay.has(field) ? overlay.get(field) ?? null : server;
+  const startShown = shown("quiet_hours_start", start);
+  const endShown = shown("quiet_hours_end", end);
+  const zoneShown = shown("timezone", timezone);
+  const effectiveZone = zoneShown ?? fallbackZone;
+  const device = deviceTimeZone();
+  const save = (patch) => {
+    const fields = Object.keys(patch);
+    setFailure(null);
+    for (const field of fields) overlay.set(field, patch[field] ?? null);
+    settle(() => onChange(patch)).then(
+      () => {
+        if (mounted.current) for (const field of fields) overlay.settle(field, true);
+      },
+      (error) => {
+        if (!mounted.current) return;
+        for (const field of fields) overlay.settle(field, false);
+        setFailure(describeFailure(describeError?.(error), labels.failed));
+      }
+    );
+  };
+  const saveTime = (field, value) => {
+    const next = value || null;
+    if (next === shown(field, field === "quiet_hours_start" ? start : end)) return;
+    const patch = { [field]: next };
+    if (next && zoneShown === null) patch.timezone = device;
+    save(patch);
+  };
+  const anySet = Boolean(startShown || endShown);
+  const halfSet = Boolean(startShown) !== Boolean(endShown);
+  return /* @__PURE__ */ jsxs(Card, { ...rest, className: cn("p-4 space-y-3", className), children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(SettingsCardTitle, { children: labels.quietTitle }),
+      /* @__PURE__ */ jsx("div", { className: CARD_DESCRIPTION_CLASS, children: labels.quietDescription(inbox) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-end gap-3", children: [
+      /* @__PURE__ */ jsx(
+        TimeInput,
+        {
+          id: `${id}-start`,
+          label: labels.quietFrom,
+          value: startShown ?? "",
+          disabled,
+          commit: COMMIT_EXCEPT_BILLING,
+          onValueChange: (value) => saveTime("quiet_hours_start", value),
+          className: "w-36"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TimeInput,
+        {
+          id: `${id}-end`,
+          label: labels.quietUntil,
+          value: endShown ?? "",
+          disabled,
+          commit: COMMIT_EXCEPT_BILLING,
+          onValueChange: (value) => saveTime("quiet_hours_end", value),
+          className: "w-36"
+        }
+      )
+    ] }),
+    halfSet && /* @__PURE__ */ jsx("p", { className: "text-xs text-warning", "data-quiet-incomplete": "", children: labels.quietIncomplete }),
+    anySet && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(
+        TimeZoneSelect,
+        {
+          id: `${id}-zone`,
+          value: effectiveZone,
+          disabled,
+          commit: COMMIT_EXCEPT_BILLING,
+          onChange: (zone) => save({ timezone: zone }),
+          className: "max-w-72",
+          labels: labelsProp
+        }
+      ),
+      device !== effectiveZone && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1", children: [
+        /* @__PURE__ */ jsx("span", { id: `${id}-device`, className: CARD_DESCRIPTION_CLASS, children: labels.deviceZone(zoneName(device, labels.regions)) }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            variant: "link",
+            disabled,
+            commit: COMMIT_EXCEPT_BILLING,
+            "aria-describedby": `${id}-device`,
+            onClick: () => save({ timezone: device }),
+            children: labels.useDeviceZone
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(FailureLine, { children: failure })
+  ] });
+}
+export {
+  QuietHoursSetting
+};
+//# sourceMappingURL=quiet-hours-setting.js.map

package/dist/notifications/quiet-hours-setting.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/notifications/quiet-hours-setting.tsx"],"sourcesContent":["import { useId, useState } from \"react\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\n\nimport type { LabelOverride } from \"../i18n/kit-labels\";\nimport { cn } from \"../lib/cn\";\nimport { Button } from \"../components/button\";\nimport { Card } from \"../components/card\";\nimport { TimeInput } from \"../components/time-input\";\nimport { COMMIT_EXCEPT_BILLING } from \"../components/write-lock\";\nimport { CARD_DESCRIPTION_CLASS } from \"../settings/settings-card-classes\";\nimport { SettingsCardTitle } from \"../settings/settings-heading\";\nimport { settle, useMounted } from \"../account/account-parts\";\nimport { describeFailure, FailureLine, useNotificationsLabels, useWriteOverlay } from \"./notification-parts\";\nimport type { NotificationsLabels } from \"./notifications-labels\";\nimport type { NotificationSettingsPatch } from \"./notification-types\";\nimport { deviceTimeZone, TimeZoneSelect, zoneName } from \"./time-zone-select\";\n\n/** The zone the server applies while the account has none (§2.6): every app's. */\nconst DEFAULT_FALLBACK_ZONE = \"Europe/Zurich\";\n\nexport interface QuietHoursSettingProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\" | \"onChange\"> {\n  /** The `GET`'s `quiet_hours_start`, `\"HH:MM\"`, or `null`. */\n  start: string | null;\n  /** The `GET`'s `quiet_hours_end`. */\n  end: string | null;\n  /** The `GET`'s `timezone`, an IANA name, or `null` (the app's zone applies). */\n  timezone: string | null;\n  /**\n   * Save one change — `PATCH /notifications/settings`: a time (`null` when cleared), with\n   * the device's zone the first time one is entered while `timezone` is `null`; or\n   * `{timezone}`. The field shows the new value while the call runs and goes back if it\n   * rejects.\n   */\n  onChange: (patch: NotificationSettingsPatch) => Promise<unknown> | void;\n  /** The zone shown, and the one the server applies, while `timezone` is `null`.\n   *  Default `\"Europe/Zurich\"`, every app's (decision 6). */\n  fallbackZone?: string;\n  /** The app keeps an inbox, and the description says a held push still reaches it. */\n  inbox?: boolean;\n  disabled?: boolean;\n  /** The app's own words for a failed save, or `undefined` for the kit's `failed`. */\n  describeError?: (error: unknown) => ReactNode | undefined;\n  labels?: LabelOverride<NotificationsLabels>;\n}\n\ntype QuietField = \"quiet_hours_start\" | \"quiet_hours_end\" | \"timezone\";\n\n/**\n * Quiet hours (docs/notifications-harmonization.md §2.4, §2.6, §4.2): a window of local\n * times in the account's zone, which may cross midnight, when no push of a machine-sent\n * type is sent. A held push is dropped, not delayed; the inbox row and the mail go as\n * usual. keksdose's block, as a card of its own.\n *\n * - **Two times**, each saved as it is entered; a cleared time sends `null`. While only\n *   one is set the card says so: the window fails open until both are.\n * - **The zone** shows while a time is set. The first time entered while the account has\n *   none sends this device's zone with it, so \"22:00\" means the person's 22:00\n *   (keksdose `notifications-card.tsx:288-292`). With none stored, the card shows\n *   `fallbackZone` — the zone the server then applies — never the device's (keksdose's\n *   card showed the device's zone while its server applied UTC).\n * - **\"This device is in …\"** with \"Use it\" when the device's zone is not the one in\n *   effect. Never written on its own: a zone is written by a person's pick (§2.6).\n *\n * Under a write lock the fields are `commit` controls exempt from billing.\n */\nexport function QuietHoursSetting({\n  start,\n  end,\n  timezone,\n  onChange,\n  fallbackZone = DEFAULT_FALLBACK_ZONE,\n  inbox = false,\n  disabled = false,\n  describeError,\n  labels: labelsProp,\n  className,\n  ...rest\n}: QuietHoursSettingProps) {\n  const labels = useNotificationsLabels(labelsProp);\n  const overlay = useWriteOverlay<string | null>(`${start}|${end}|${timezone}`);\n  const [failure, setFailure] = useState<ReactNode>(null);\n  const mounted = useMounted();\n  const id = useId();\n\n  const shown = (field: QuietField, server: string | null) =>\n    overlay.has(field) ? (overlay.get(field) ?? null) : server;\n  const startShown = shown(\"quiet_hours_start\", start);\n  const endShown = shown(\"quiet_hours_end\", end);\n  const zoneShown = shown(\"timezone\", timezone);\n  const effectiveZone = zoneShown ?? fallbackZone;\n  const device = deviceTimeZone();\n\n  const save = (patch: NotificationSettingsPatch) => {\n    const fields = Object.keys(patch) as QuietField[];\n    setFailure(null);\n    for (const field of fields) overlay.set(field, patch[field] ?? null);\n    settle(() => onChange(patch)).then(\n      () => {\n        if (mounted.current) for (const field of fields) overlay.settle(field, true);\n      },\n      (error: unknown) => {\n        if (!mounted.current) return;\n        for (const field of fields) overlay.settle(field, false);\n        setFailure(describeFailure(describeError?.(error), labels.failed));\n      },\n    );\n  };\n\n  const saveTime = (field: \"quiet_hours_start\" | \"quiet_hours_end\", value: string) => {\n    const next = value || null;\n    if (next === shown(field, field === \"quiet_hours_start\" ? start : end)) return;\n    const patch: NotificationSettingsPatch = { [field]: next };\n    if (next && zoneShown === null) patch.timezone = device;\n    save(patch);\n  };\n\n  const anySet = Boolean(startShown || endShown);\n  const halfSet = Boolean(startShown) !== Boolean(endShown);\n\n  return (\n    <Card {...rest} className={cn(\"p-4 space-y-3\", className)}>\n      <div>\n        <SettingsCardTitle>{labels.quietTitle}</SettingsCardTitle>\n        <div className={CARD_DESCRIPTION_CLASS}>{labels.quietDescription(inbox)}</div>\n      </div>\n      <div className=\"flex flex-wrap items-end gap-3\">\n        <TimeInput\n          id={`${id}-start`}\n          label={labels.quietFrom}\n          value={startShown ?? \"\"}\n          disabled={disabled}\n          commit={COMMIT_EXCEPT_BILLING}\n          onValueChange={(value) => saveTime(\"quiet_hours_start\", value)}\n          className=\"w-36\"\n        />\n        <TimeInput\n          id={`${id}-end`}\n          label={labels.quietUntil}\n          value={endShown ?? \"\"}\n          disabled={disabled}\n          commit={COMMIT_EXCEPT_BILLING}\n          onValueChange={(value) => saveTime(\"quiet_hours_end\", value)}\n          className=\"w-36\"\n        />\n      </div>\n      {halfSet && (\n        <p className=\"text-xs text-warning\" data-quiet-incomplete=\"\">\n          {labels.quietIncomplete}\n        </p>\n      )}\n      {anySet && (\n        <div className=\"space-y-2\">\n          <TimeZoneSelect\n            id={`${id}-zone`}\n            value={effectiveZone}\n            disabled={disabled}\n            commit={COMMIT_EXCEPT_BILLING}\n            onChange={(zone) => save({ timezone: zone })}\n            className=\"max-w-72\"\n            labels={labelsProp}\n          />\n          {device !== effectiveZone && (\n            <div className=\"flex flex-wrap items-center gap-x-2 gap-y-1\">\n              <span id={`${id}-device`} className={CARD_DESCRIPTION_CLASS}>\n                {labels.deviceZone(zoneName(device, labels.regions))}\n              </span>\n              <Button\n                type=\"button\"\n                size=\"sm\"\n                variant=\"link\"\n                disabled={disabled}\n                commit={COMMIT_EXCEPT_BILLING}\n                aria-describedby={`${id}-device`}\n                onClick={() => save({ timezone: device })}\n              >\n                {labels.useDeviceZone}\n              </Button>\n            </div>\n          )}\n        </div>\n      )}\n      <FailureLine>{failure}</FailureLine>\n    </Card>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/notifications/time-zone-select.d.ts

@@ -0,0 +1,50 @@
+import type { ReactNode } from "react";
+import type { LabelOverride } from "../i18n/kit-labels.js";
+import type { ComboOption } from "../components/combobox-core.js";
+import type { CommitScope } from "../components/write-lock.js";
+import type { NotificationRegionLabels, NotificationsLabels } from "./notifications-labels.js";
+/**
+ * This device's IANA zone ("Europe/Zurich"), or `"UTC"` where the runtime names none —
+ * the zone quiet hours are entered in the first time (§2.6), and the one the card offers
+ * when it differs from the account's.
+ */
+export declare function deviceTimeZone(): string;
+/**
+ * The zone picker's rows (keksdose `notifications-card.tsx:131-146`): every zone `Intl`
+ * lists, as its city ("Argentina / Buenos Aires") under its region, the region named by
+ * `regionLabel` — which answers `undefined` for a region it does not know, and the region
+ * keeps its IANA name. A zone with no region ("UTC") comes first, ahead of every heading,
+ * rather than trailing the last group as if it were Pacific. `current` is kept even when
+ * the runtime does not list it (an old alias such as "Europe/Kiev"): a picker without its
+ * own value would show an empty field.
+ */
+export declare function timeZoneOptions(current: string, regionLabel: (region: string) => string | undefined): ComboOption<string>[];
+/** The region's name in `regions`, or `undefined` for one the labels do not know.
+ *  @internal Not part of the barrel. */
+export declare function regionName(regions: NotificationRegionLabels, region: string): string | undefined;
+/** A zone as the picker shows it, for a sentence: "Europe / Zurich", the region in the
+ *  kit's words. @internal Not part of the barrel. */
+export declare function zoneName(zone: string, regions: NotificationRegionLabels): string;
+export interface TimeZoneSelectProps {
+    /** The IANA zone. Not clearable: a zone can be changed, never emptied. */
+    value: string;
+    /** The zone picked. Never called for the value it already has. */
+    onChange: (zone: string) => void;
+    /** Default `labels.timeZone`. */
+    label?: ReactNode;
+    disabled?: boolean;
+    /** The input's id. */
+    id?: string;
+    className?: string;
+    /** The picker SAVES on change (quiet hours do): locked under a write lock in scope. */
+    commit?: CommitScope;
+    labels?: LabelOverride<NotificationsLabels>;
+}
+/**
+ * An IANA time zone, searchable (docs/notifications-harmonization.md §4.2, keksdose's
+ * quiet-hours picker): type "Zur" for Europe/Zurich, and on a phone the kit's sheet with
+ * a search box instead of a 400-row wheel. Rows are the city under its region, the region
+ * in the kit's words (`labels.regions`); a zone with no region first; a stored zone the
+ * runtime does not list is kept. On the kit's {@link InlineEntityCombobox}.
+ */
+export declare function TimeZoneSelect({ value, onChange, label, disabled, id, className, commit, labels: labelsProp, }: TimeZoneSelectProps): import("react").JSX.Element;

package/dist/notifications/time-zone-select.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { InlineEntityCombobox } from "../components/inline-entity-combobox.js";
+import { useNotificationsLabels } from "./notification-parts.js";
+function deviceTimeZone() {
+  try {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
+  } catch {
+    return "UTC";
+  }
+}
+function runtimeZones() {
+  const intl = Intl;
+  return typeof intl.supportedValuesOf === "function" ? intl.supportedValuesOf("timeZone") : [];
+}
+function cityOf(rest) {
+  return rest.replace(/_/g, " ").replace(/\//g, " / ");
+}
+function timeZoneOptions(current, regionLabel) {
+  const zones = runtimeZones();
+  const all = !current || zones.includes(current) ? zones : [...zones, current].sort();
+  const rows = all.map((zone) => {
+    const slash = zone.indexOf("/");
+    if (slash < 0) return { value: zone, label: zone };
+    const region = zone.slice(0, slash);
+    return { value: zone, label: cityOf(zone.slice(slash + 1)), group: regionLabel(region) ?? region };
+  });
+  return [...rows.filter((row) => !row.group), ...rows.filter((row) => row.group)];
+}
+function regionName(regions, region) {
+  return Object.prototype.hasOwnProperty.call(regions, region) ? regions[region] : void 0;
+}
+function zoneName(zone, regions) {
+  const slash = zone.indexOf("/");
+  if (slash < 0) return zone;
+  const region = zone.slice(0, slash);
+  return `${regionName(regions, region) ?? region} / ${cityOf(zone.slice(slash + 1))}`;
+}
+function TimeZoneSelect({
+  value,
+  onChange,
+  label,
+  disabled,
+  id,
+  className,
+  commit,
+  labels: labelsProp
+}) {
+  const labels = useNotificationsLabels(labelsProp);
+  const { regions } = labels;
+  const options = useMemo(() => timeZoneOptions(value, (region) => regionName(regions, region)), [value, regions]);
+  return /* @__PURE__ */ jsx(
+    InlineEntityCombobox,
+    {
+      id,
+      label: label ?? labels.timeZone,
+      value,
+      options,
+      disabled,
+      commit,
+      onChange: (zone) => {
+        if (zone && zone !== value) onChange(zone);
+      },
+      className
+    }
+  );
+}
+export {
+  TimeZoneSelect,
+  deviceTimeZone,
+  regionName,
+  timeZoneOptions,
+  zoneName
+};
+//# sourceMappingURL=time-zone-select.js.map

package/dist/notifications/time-zone-select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/notifications/time-zone-select.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport type { ReactNode } from \"react\";\n\nimport type { LabelOverride } from \"../i18n/kit-labels\";\nimport type { ComboOption } from \"../components/combobox-core\";\nimport { InlineEntityCombobox } from \"../components/inline-entity-combobox\";\nimport type { CommitScope } from \"../components/write-lock\";\nimport { useNotificationsLabels } from \"./notification-parts\";\nimport type { NotificationRegionLabels, NotificationsLabels } from \"./notifications-labels\";\n\n/**\n * This device's IANA zone (\"Europe/Zurich\"), or `\"UTC\"` where the runtime names none —\n * the zone quiet hours are entered in the first time (§2.6), and the one the card offers\n * when it differs from the account's.\n */\nexport function deviceTimeZone(): string {\n  try {\n    return Intl.DateTimeFormat().resolvedOptions().timeZone || \"UTC\";\n  } catch {\n    return \"UTC\";\n  }\n}\n\n/** Every zone the runtime lists; `[]` where `Intl.supportedValuesOf` is missing. */\nfunction runtimeZones(): string[] {\n  const intl = Intl as typeof Intl & { supportedValuesOf?: (key: \"timeZone\") => string[] };\n  return typeof intl.supportedValuesOf === \"function\" ? intl.supportedValuesOf(\"timeZone\") : [];\n}\n\n/** \"Argentina/Buenos_Aires\" → \"Argentina / Buenos Aires\": the zone's city, as a row. */\nfunction cityOf(rest: string): string {\n  return rest.replace(/_/g, \" \").replace(/\\//g, \" / \");\n}\n\n/**\n * The zone picker's rows (keksdose `notifications-card.tsx:131-146`): every zone `Intl`\n * lists, as its city (\"Argentina / Buenos Aires\") under its region, the region named by\n * `regionLabel` — which answers `undefined` for a region it does not know, and the region\n * keeps its IANA name. A zone with no region (\"UTC\") comes first, ahead of every heading,\n * rather than trailing the last group as if it were Pacific. `current` is kept even when\n * the runtime does not list it (an old alias such as \"Europe/Kiev\"): a picker without its\n * own value would show an empty field.\n */\nexport function timeZoneOptions(\n  current: string,\n  regionLabel: (region: string) => string | undefined,\n): ComboOption<string>[] {\n  const zones = runtimeZones();\n  const all = !current || zones.includes(current) ? zones : [...zones, current].sort();\n  const rows = all.map((zone): ComboOption<string> => {\n    const slash = zone.indexOf(\"/\");\n    if (slash < 0) return { value: zone, label: zone };\n    const region = zone.slice(0, slash);\n    return { value: zone, label: cityOf(zone.slice(slash + 1)), group: regionLabel(region) ?? region };\n  });\n  return [...rows.filter((row) => !row.group), ...rows.filter((row) => row.group)];\n}\n\n/** The region's name in `regions`, or `undefined` for one the labels do not know.\n *  @internal Not part of the barrel. */\nexport function regionName(regions: NotificationRegionLabels, region: string): string | undefined {\n  return Object.prototype.hasOwnProperty.call(regions, region)\n    ? regions[region as keyof NotificationRegionLabels]\n    : undefined;\n}\n\n/** A zone as the picker shows it, for a sentence: \"Europe / Zurich\", the region in the\n *  kit's words. @internal Not part of the barrel. */\nexport function zoneName(zone: string, regions: NotificationRegionLabels): string {\n  const slash = zone.indexOf(\"/\");\n  if (slash < 0) return zone;\n  const region = zone.slice(0, slash);\n  return `${regionName(regions, region) ?? region} / ${cityOf(zone.slice(slash + 1))}`;\n}\n\nexport interface TimeZoneSelectProps {\n  /** The IANA zone. Not clearable: a zone can be changed, never emptied. */\n  value: string;\n  /** The zone picked. Never called for the value it already has. */\n  onChange: (zone: string) => void;\n  /** Default `labels.timeZone`. */\n  label?: ReactNode;\n  disabled?: boolean;\n  /** The input's id. */\n  id?: string;\n  className?: string;\n  /** The picker SAVES on change (quiet hours do): locked under a write lock in scope. */\n  commit?: CommitScope;\n  labels?: LabelOverride<NotificationsLabels>;\n}\n\n/**\n * An IANA time zone, searchable (docs/notifications-harmonization.md §4.2, keksdose's\n * quiet-hours picker): type \"Zur\" for Europe/Zurich, and on a phone the kit's sheet with\n * a search box instead of a 400-row wheel. Rows are the city under its region, the region\n * in the kit's words (`labels.regions`); a zone with no region first; a stored zone the\n * runtime does not list is kept. On the kit's {@link InlineEntityCombobox}.\n */\nexport function TimeZoneSelect({\n  value,\n  onChange,\n  label,\n  disabled,\n  id,\n  className,\n  commit,\n  labels: labelsProp,\n}: TimeZoneSelectProps) {\n  const labels = useNotificationsLabels(labelsProp);\n  const { regions } = labels;\n  const options = useMemo(() => timeZoneOptions(value, (region) => regionName(regions, region)), [value, regions]);\n  return (\n    <InlineEntityCombobox<string>\n      id={id}\n      label={label ?? labels.timeZone}\n      value={value}\n      options={options}\n      disabled={disabled}\n      commit={commit}\n      onChange={(zone) => {\n        if (zone && zone !== value) onChange(zone);\n      }}\n      className={className}\n    />\n  );\n}\n"],"mappings":";AAgHI;AAhHJ,SAAS,eAAe;AAKxB,SAAS,4BAA4B;AAErC,SAAS,8BAA8B;AAQhC,SAAS,iBAAyB;AACvC,MAAI;AACF,WAAO,KAAK,eAAe,EAAE,gBAAgB,EAAE,YAAY;AAAA,EAC7D,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAGA,SAAS,eAAyB;AAChC,QAAM,OAAO;AACb,SAAO,OAAO,KAAK,sBAAsB,aAAa,KAAK,kBAAkB,UAAU,IAAI,CAAC;AAC9F;AAGA,SAAS,OAAO,MAAsB;AACpC,SAAO,KAAK,QAAQ,MAAM,GAAG,EAAE,QAAQ,OAAO,KAAK;AACrD;AAWO,SAAS,gBACd,SACA,aACuB;AACvB,QAAM,QAAQ,aAAa;AAC3B,QAAM,MAAM,CAAC,WAAW,MAAM,SAAS,OAAO,IAAI,QAAQ,CAAC,GAAG,OAAO,OAAO,EAAE,KAAK;AACnF,QAAM,OAAO,IAAI,IAAI,CAAC,SAA8B;AAClD,UAAM,QAAQ,KAAK,QAAQ,GAAG;AAC9B,QAAI,QAAQ,EAAG,QAAO,EAAE,OAAO,MAAM,OAAO,KAAK;AACjD,UAAM,SAAS,KAAK,MAAM,GAAG,KAAK;AAClC,WAAO,EAAE,OAAO,MAAM,OAAO,OAAO,KAAK,MAAM,QAAQ,CAAC,CAAC,GAAG,OAAO,YAAY,MAAM,KAAK,OAAO;AAAA,EACnG,CAAC;AACD,SAAO,CAAC,GAAG,KAAK,OAAO,CAAC,QAAQ,CAAC,IAAI,KAAK,GAAG,GAAG,KAAK,OAAO,CAAC,QAAQ,IAAI,KAAK,CAAC;AACjF;AAIO,SAAS,WAAW,SAAmC,QAAoC;AAChG,SAAO,OAAO,UAAU,eAAe,KAAK,SAAS,MAAM,IACvD,QAAQ,MAAwC,IAChD;AACN;AAIO,SAAS,SAAS,MAAc,SAA2C;AAChF,QAAM,QAAQ,KAAK,QAAQ,GAAG;AAC9B,MAAI,QAAQ,EAAG,QAAO;AACtB,QAAM,SAAS,KAAK,MAAM,GAAG,KAAK;AAClC,SAAO,GAAG,WAAW,SAAS,MAAM,KAAK,MAAM,MAAM,OAAO,KAAK,MAAM,QAAQ,CAAC,CAAC,CAAC;AACpF;AAyBO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AACV,GAAwB;AACtB,QAAM,SAAS,uBAAuB,UAAU;AAChD,QAAM,EAAE,QAAQ,IAAI;AACpB,QAAM,UAAU,QAAQ,MAAM,gBAAgB,OAAO,CAAC,WAAW,WAAW,SAAS,MAAM,CAAC,GAAG,CAAC,OAAO,OAAO,CAAC;AAC/G,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO,SAAS,OAAO;AAAA,MACvB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,CAAC,SAAS;AAClB,YAAI,QAAQ,SAAS,MAAO,UAAS,IAAI;AAAA,MAC3C;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/notifications/unsubscribe-panel.d.ts

@@ -0,0 +1,53 @@
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import type { LabelOverride } from "../i18n/kit-labels.js";
+import type { AuthHeadingLevel } from "../auth/status-parts.js";
+import type { NotificationsLabels } from "./notifications-labels.js";
+/**
+ * The notification type an unsubscribe token names, read from its `<data>` half —
+ * `v1.<base64url("<user_id>:<type id>")>.<mac>` (docs/notifications-harmonization.md
+ * §3.6) — or `null` for a token that does not parse. Only the claim is read: the MAC is
+ * the server's to check, so a forged token still names a type here and the server
+ * refuses it. For the page's words ("You get e-mails about: Overdue invoices").
+ */
+export declare function unsubscribeTokenType(token: string): string | null;
+export interface UnsubscribePanelProps extends Omit<ComponentPropsWithRef<"div">, "children" | "title"> {
+    /** The `token` from the page's query (`/unsubscribe?token=…`). */
+    token: string;
+    /** The app's name, for "Stop all notification e-mails from {app}". */
+    appName: string;
+    /** The type's name in the app's words, from {@link unsubscribeTokenType}. Without it
+     *  the page says only that notification mail comes. */
+    typeLabel?: string;
+    /** `POST /notifications/unsubscribe/{token}`: that type's e-mail off. */
+    onStop: (token: string) => Promise<unknown>;
+    /** `POST /notifications/unsubscribe/{token}/all`: every e-mail switch off. */
+    onStopAll: (token: string) => Promise<unknown>;
+    /** Settings → Notifications, through the provider's link component. */
+    settingsHref: string;
+    /** Whether a rejection means the link is no good. Default: a 400 with
+     *  `code: "unsubscribe_invalid"`. Anything else is "try again". */
+    isInvalid?: (error: unknown) => boolean;
+    /** The heading. Default `labels.unsubscribeTitle`; `null` draws none, for a page that
+     *  puts it in `AuthLayout`'s `title`. */
+    title?: ReactNode;
+    /** The heading's level. Default `h2`, under the page's `h1`. */
+    headingAs?: AuthHeadingLevel;
+    labels?: LabelOverride<NotificationsLabels>;
+}
+/**
+ * The body of an app's signed-out `/unsubscribe` page (docs/notifications-harmonization.md
+ * §3.6, §4.2) — the page a notification mail's footer links to. It works signed in or
+ * out (auth §7), and is not a card.
+ *
+ * **Nothing happens on a GET**: link scanners fetch every URL, so the page asks first —
+ * "Stop these e-mails", or "Stop all notification e-mails from {app}" — and only a press
+ * POSTs. A mail client's one-click POST goes to the server's route directly, without
+ * this page. Account mail is not a notification and keeps coming; the page says so, and
+ * then how to turn the mail back on (Settings → Notifications).
+ *
+ * A token that does not parse is "this link doesn't work" at once, with no request; the
+ * server's refusal (`unsubscribe_invalid`) says the same. Any other failure is "try
+ * again", the buttons still there. A valid token always answers 200 — also when the
+ * switch was already off or the account is gone — so the done state reveals nothing.
+ */
+export declare function UnsubscribePanel({ token, appName, typeLabel, onStop, onStopAll, settingsHref, isInvalid, title, headingAs: Heading, labels: labelsProp, className, ...rest }: UnsubscribePanelProps): import("react").JSX.Element;

package/dist/notifications/unsubscribe-panel.js

@@ -0,0 +1,139 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { CheckCircle2, Link2Off } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { errorBodyWithCode, httpStatusOf } from "../auth/auth-errors.js";
+import { INTRO_CLASS, OUTCOME_CLASS, STATUS_HEADING_CLASS, useFocusWhen } from "../auth/status-parts.js";
+import { Button } from "../components/button.js";
+import { EmptyState } from "../components/empty-state.js";
+import { useMounted } from "../account/account-parts.js";
+import { FailureLine, useNotificationsLabels } from "./notification-parts.js";
+const TYPE_ID = /^[a-z][a-z0-9_]{1,39}$/;
+const BASE64URL = /^[A-Za-z0-9_-]+$/;
+function unsubscribeTokenType(token) {
+  const parts = token.split(".");
+  if (parts.length !== 3) return null;
+  const [version, data, mac] = parts;
+  if (version !== "v1" || !BASE64URL.test(data) || !BASE64URL.test(mac) || data.length % 4 === 1) return null;
+  let claim;
+  try {
+    claim = atob(data.replace(/-/g, "+").replace(/_/g, "/") + "=".repeat((4 - data.length % 4) % 4));
+  } catch {
+    return null;
+  }
+  const colon = claim.indexOf(":");
+  if (colon < 1) return null;
+  const type = claim.slice(colon + 1);
+  return TYPE_ID.test(type) ? type : null;
+}
+function defaultIsInvalid(error) {
+  const coded = errorBodyWithCode(error, (code) => code === "unsubscribe_invalid") !== void 0;
+  const status = httpStatusOf(error);
+  return coded && (status === void 0 || status === 400);
+}
+function UnsubscribePanel({
+  token,
+  appName,
+  typeLabel,
+  onStop,
+  onStopAll,
+  settingsHref,
+  isInvalid = defaultIsInvalid,
+  title,
+  headingAs: Heading = "h2",
+  labels: labelsProp,
+  className,
+  ...rest
+}) {
+  const labels = useNotificationsLabels(labelsProp);
+  const parses = unsubscribeTokenType(token) !== null;
+  const [phase, setPhase] = useState("ready");
+  const mounted = useMounted();
+  const outcomeRef = useRef(null);
+  const shown = parses ? phase : "invalid";
+  const done = shown === "stopped-these" || shown === "stopped-all";
+  useFocusWhen(done, outcomeRef);
+  const stop = (which) => {
+    if (shown !== "ready" && shown !== "failed") return;
+    setPhase(which);
+    const call = which === "these" ? onStop : onStopAll;
+    call(token).then(
+      () => {
+        if (mounted.current) setPhase(which === "these" ? "stopped-these" : "stopped-all");
+      },
+      (error) => {
+        if (mounted.current) setPhase(isInvalid(error) ? "invalid" : "failed");
+      }
+    );
+  };
+  const settingsLink = /* @__PURE__ */ jsx(Button, { href: settingsHref, variant: "secondary", children: labels.openSettings });
+  let body;
+  if (shown === "invalid") {
+    body = /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        tone: "danger",
+        icon: /* @__PURE__ */ jsx(Link2Off, {}),
+        title: labels.invalidLink,
+        action: settingsLink,
+        className: OUTCOME_CLASS
+      }
+    );
+  } else if (done) {
+    body = /* @__PURE__ */ jsx("div", { ref: outcomeRef, tabIndex: -1, className: "outline-none", children: /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        tone: "success",
+        icon: /* @__PURE__ */ jsx(CheckCircle2, {}),
+        title: shown === "stopped-these" ? labels.stoppedThese : labels.stoppedAll(appName),
+        hint: /* @__PURE__ */ jsxs(Fragment, { children: [
+          labels.accountMail,
+          " ",
+          labels.turnBackOn
+        ] }),
+        action: settingsLink,
+        className: OUTCOME_CLASS
+      }
+    ) });
+  } else {
+    const working = shown === "these" || shown === "all";
+    body = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("p", { className: INTRO_CLASS, children: typeLabel ? labels.unsubscribeAbout(typeLabel) : labels.unsubscribeGeneric }),
+      /* @__PURE__ */ jsx("p", { className: INTRO_CLASS, children: labels.accountMail }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:flex-wrap", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            pending: shown === "these",
+            disabled: working && shown !== "these",
+            onClick: () => stop("these"),
+            children: labels.stopThese
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "secondary",
+            pending: shown === "all",
+            disabled: working && shown !== "all",
+            onClick: () => stop("all"),
+            children: labels.stopAll(appName)
+          }
+        )
+      ] }),
+      shown === "failed" && /* @__PURE__ */ jsx(FailureLine, { children: labels.failed })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { ...rest, "data-state": shown, className: cn("space-y-3", className), children: [
+    title === null ? null : /* @__PURE__ */ jsx(Heading, { className: STATUS_HEADING_CLASS, children: title ?? labels.unsubscribeTitle }),
+    body
+  ] });
+}
+export {
+  UnsubscribePanel,
+  unsubscribeTokenType
+};
+//# sourceMappingURL=unsubscribe-panel.js.map

package/dist/notifications/unsubscribe-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/notifications/unsubscribe-panel.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\nimport { CheckCircle2, Link2Off } from \"lucide-react\";\n\nimport type { LabelOverride } from \"../i18n/kit-labels\";\nimport { cn } from \"../lib/cn\";\nimport { errorBodyWithCode, httpStatusOf } from \"../auth/auth-errors\";\nimport { INTRO_CLASS, OUTCOME_CLASS, STATUS_HEADING_CLASS, useFocusWhen } from \"../auth/status-parts\";\nimport type { AuthHeadingLevel } from \"../auth/status-parts\";\nimport { Button } from \"../components/button\";\nimport { EmptyState } from \"../components/empty-state\";\nimport { useMounted } from \"../account/account-parts\";\nimport { FailureLine, useNotificationsLabels } from \"./notification-parts\";\nimport type { NotificationsLabels } from \"./notifications-labels\";\n\n/** A type id, as the server's registry allows it (§2.1). */\nconst TYPE_ID = /^[a-z][a-z0-9_]{1,39}$/;\n/** base64url, unpadded, as the token's `<data>` is written (§3.6). */\nconst BASE64URL = /^[A-Za-z0-9_-]+$/;\n\n/**\n * The notification type an unsubscribe token names, read from its `<data>` half —\n * `v1.<base64url(\"<user_id>:<type id>\")>.<mac>` (docs/notifications-harmonization.md\n * §3.6) — or `null` for a token that does not parse. Only the claim is read: the MAC is\n * the server's to check, so a forged token still names a type here and the server\n * refuses it. For the page's words (\"You get e-mails about: Overdue invoices\").\n */\nexport function unsubscribeTokenType(token: string): string | null {\n  const parts = token.split(\".\");\n  if (parts.length !== 3) return null;\n  const [version, data, mac] = parts;\n  if (version !== \"v1\" || !BASE64URL.test(data) || !BASE64URL.test(mac) || data.length % 4 === 1) return null;\n  let claim: string;\n  try {\n    claim = atob(data.replace(/-/g, \"+\").replace(/_/g, \"/\") + \"=\".repeat((4 - (data.length % 4)) % 4));\n  } catch {\n    return null;\n  }\n  const colon = claim.indexOf(\":\");\n  if (colon < 1) return null;\n  const type = claim.slice(colon + 1);\n  return TYPE_ID.test(type) ? type : null;\n}\n\n/** server-kit's `UnsubscribeTokenError`: 400 `{code: \"unsubscribe_invalid\"}`. A body\n *  thrown as it came, with no status, counts on its code. */\nfunction defaultIsInvalid(error: unknown): boolean {\n  const coded = errorBodyWithCode(error, (code) => code === \"unsubscribe_invalid\") !== undefined;\n  const status = httpStatusOf(error);\n  return coded && (status === undefined || status === 400);\n}\n\nexport interface UnsubscribePanelProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\" | \"title\"> {\n  /** The `token` from the page's query (`/unsubscribe?token=…`). */\n  token: string;\n  /** The app's name, for \"Stop all notification e-mails from {app}\". */\n  appName: string;\n  /** The type's name in the app's words, from {@link unsubscribeTokenType}. Without it\n   *  the page says only that notification mail comes. */\n  typeLabel?: string;\n  /** `POST /notifications/unsubscribe/{token}`: that type's e-mail off. */\n  onStop: (token: string) => Promise<unknown>;\n  /** `POST /notifications/unsubscribe/{token}/all`: every e-mail switch off. */\n  onStopAll: (token: string) => Promise<unknown>;\n  /** Settings → Notifications, through the provider's link component. */\n  settingsHref: string;\n  /** Whether a rejection means the link is no good. Default: a 400 with\n   *  `code: \"unsubscribe_invalid\"`. Anything else is \"try again\". */\n  isInvalid?: (error: unknown) => boolean;\n  /** The heading. Default `labels.unsubscribeTitle`; `null` draws none, for a page that\n   *  puts it in `AuthLayout`'s `title`. */\n  title?: ReactNode;\n  /** The heading's level. Default `h2`, under the page's `h1`. */\n  headingAs?: AuthHeadingLevel;\n  labels?: LabelOverride<NotificationsLabels>;\n}\n\ntype Phase = \"ready\" | \"these\" | \"all\" | \"stopped-these\" | \"stopped-all\" | \"invalid\" | \"failed\";\n\n/**\n * The body of an app's signed-out `/unsubscribe` page (docs/notifications-harmonization.md\n * §3.6, §4.2) — the page a notification mail's footer links to. It works signed in or\n * out (auth §7), and is not a card.\n *\n * **Nothing happens on a GET**: link scanners fetch every URL, so the page asks first —\n * \"Stop these e-mails\", or \"Stop all notification e-mails from {app}\" — and only a press\n * POSTs. A mail client's one-click POST goes to the server's route directly, without\n * this page. Account mail is not a notification and keeps coming; the page says so, and\n * then how to turn the mail back on (Settings → Notifications).\n *\n * A token that does not parse is \"this link doesn't work\" at once, with no request; the\n * server's refusal (`unsubscribe_invalid`) says the same. Any other failure is \"try\n * again\", the buttons still there. A valid token always answers 200 — also when the\n * switch was already off or the account is gone — so the done state reveals nothing.\n */\nexport function UnsubscribePanel({\n  token,\n  appName,\n  typeLabel,\n  onStop,\n  onStopAll,\n  settingsHref,\n  isInvalid = defaultIsInvalid,\n  title,\n  headingAs: Heading = \"h2\",\n  labels: labelsProp,\n  className,\n  ...rest\n}: UnsubscribePanelProps) {\n  const labels = useNotificationsLabels(labelsProp);\n  const parses = unsubscribeTokenType(token) !== null;\n  const [phase, setPhase] = useState<Phase>(\"ready\");\n  const mounted = useMounted();\n  const outcomeRef = useRef<HTMLDivElement>(null);\n  const shown: Phase = parses ? phase : \"invalid\";\n  const done = shown === \"stopped-these\" || shown === \"stopped-all\";\n  useFocusWhen(done, outcomeRef);\n\n  const stop = (which: \"these\" | \"all\") => {\n    if (shown !== \"ready\" && shown !== \"failed\") return;\n    setPhase(which);\n    const call = which === \"these\" ? onStop : onStopAll;\n    call(token).then(\n      () => {\n        if (mounted.current) setPhase(which === \"these\" ? \"stopped-these\" : \"stopped-all\");\n      },\n      (error: unknown) => {\n        if (mounted.current) setPhase(isInvalid(error) ? \"invalid\" : \"failed\");\n      },\n    );\n  };\n\n  const settingsLink = (\n    <Button href={settingsHref} variant=\"secondary\">\n      {labels.openSettings}\n    </Button>\n  );\n\n  let body: ReactNode;\n  if (shown === \"invalid\") {\n    body = (\n      <EmptyState\n        tone=\"danger\"\n        icon={<Link2Off />}\n        title={labels.invalidLink}\n        action={settingsLink}\n        className={OUTCOME_CLASS}\n      />\n    );\n  } else if (done) {\n    body = (\n      <div ref={outcomeRef} tabIndex={-1} className=\"outline-none\">\n        <EmptyState\n          tone=\"success\"\n          icon={<CheckCircle2 />}\n          title={shown === \"stopped-these\" ? labels.stoppedThese : labels.stoppedAll(appName)}\n          hint={\n            <>\n              {labels.accountMail} {labels.turnBackOn}\n            </>\n          }\n          action={settingsLink}\n          className={OUTCOME_CLASS}\n        />\n      </div>\n    );\n  } else {\n    const working = shown === \"these\" || shown === \"all\";\n    body = (\n      <>\n        <p className={INTRO_CLASS}>{typeLabel ? labels.unsubscribeAbout(typeLabel) : labels.unsubscribeGeneric}</p>\n        <p className={INTRO_CLASS}>{labels.accountMail}</p>\n        <div className=\"flex flex-col gap-2 sm:flex-row sm:flex-wrap\">\n          <Button\n            type=\"button\"\n            pending={shown === \"these\"}\n            disabled={working && shown !== \"these\"}\n            onClick={() => stop(\"these\")}\n          >\n            {labels.stopThese}\n          </Button>\n          <Button\n            type=\"button\"\n            variant=\"secondary\"\n            pending={shown === \"all\"}\n            disabled={working && shown !== \"all\"}\n            onClick={() => stop(\"all\")}\n          >\n            {labels.stopAll(appName)}\n          </Button>\n        </div>\n        {shown === \"failed\" && <FailureLine>{labels.failed}</FailureLine>}\n      </>\n    );\n  }\n\n  return (\n    <div {...rest} data-state={shown} className={cn(\"space-y-3\", className)}>\n      {title === null ? null : <Heading className={STATUS_HEADING_CLASS}>{title ?? labels.unsubscribeTitle}</Heading>}\n      {body}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/notifications/use-push-device.d.ts

@@ -0,0 +1,122 @@
+/**
+ * This browser's Web Push subscription for the signed-in account
+ * (docs/notifications-harmonization.md §2.7, §3.5, §4.2) — keksdose's
+ * `shared/push/use-push.ts`, lifted. The service worker with its `push` and
+ * `notificationclick` handlers stays the app's; this hook owns the browser's side:
+ * permission, subscribe with the server's VAPID key, register the subscription, and
+ * unsubscribe. The kit makes no request of its own: the app hands it one function per
+ * endpoint.
+ */
+/** The browser's notification permission, or `"unsupported"` where it has no push. */
+export type PushPermission = NotificationPermission | "unsupported";
+/** Why turning push on or off could not finish — a {@link PushDeviceError}'s `code`. */
+export type PushDeviceErrorCode = "no_service_worker" | "push_timeout";
+/**
+ * The two failures the card has words of its own for: no service worker registered (or
+ * one not ready in 10 s) — "reload and try again" — and a browser push service that did
+ * not answer in 15 s — "check your connection". Anything else is the app's request
+ * failing, rejected as it came.
+ */
+export declare class PushDeviceError extends Error {
+    readonly code: PushDeviceErrorCode;
+    constructor(code: PushDeviceErrorCode);
+}
+/** What `register` sends: `POST /notifications/devices` (§3.5). */
+export interface PushSubscriptionInput {
+    endpoint: string;
+    keys: {
+        p256dh: string;
+        auth: string;
+    };
+    user_agent: string | null;
+}
+export interface UsePushDeviceOptions {
+    /** `GET /notifications/push-key` → its `key`; `""` when push is off on the server. */
+    pushKey: () => Promise<string>;
+    /** `POST /notifications/devices`. A 409 (another account's endpoint) is recovered
+     *  once: the hook unsubscribes and registers a fresh endpoint. */
+    register: (subscription: PushSubscriptionInput) => Promise<unknown>;
+    /** `POST /notifications/devices/unregister {endpoint}` — the endpoint never goes in a
+     *  URL. */
+    unregister: (endpoint: string) => Promise<unknown>;
+    /** `GET /notifications/devices`: the account's own list, which says whether THIS
+     *  account holds this browser's subscription. */
+    devices: () => Promise<readonly {
+        endpoint: string;
+    }[]>;
+    /** `POST /notifications/test` → how many devices the push service accepted it for. */
+    test: () => Promise<{
+        sent: number;
+    }>;
+    /** Whether `register` refused another account's endpoint. Default: HTTP 409. */
+    isEndpointTaken?: (error: unknown) => boolean;
+    /** After an enable or a disable: the app refreshes its device queries. */
+    onChange?: () => void;
+}
+/** What {@link usePushDevice} answers. */
+export interface PushDevice {
+    /** The browser exposes service workers, `PushManager` and `Notification`. */
+    supported: boolean;
+    /** The server has VAPID keys; `undefined` until `pushKey` answered (or when it failed). */
+    configured: boolean | undefined;
+    /** Running as an installed app: `display-mode: standalone`, or iOS's
+     *  `navigator.standalone`. */
+    installed: boolean;
+    /** iPhone or iPad — where push reaches only the installed app. */
+    ios: boolean;
+    permission: PushPermission;
+    /** THIS account holds this browser's subscription. An unreachable device list falls
+     *  back to the browser's own answer. */
+    subscribed: boolean;
+    /** This browser holds a subscription that belongs to another account (two accounts in
+     *  one browser profile): `subscribed` is false, and turning on mints a fresh one. */
+    foreignSubscription: boolean;
+    /** This browser's subscription endpoint, or `null` — marks "This device" in a list. */
+    currentEndpoint: string | null;
+    /** An enable or a disable is running. */
+    busy: boolean;
+    /** Ask for permission (the browser's one prompt), subscribe and register. `false` when
+     *  the permission was not granted or push is off on the server; rejects with a
+     *  {@link PushDeviceError} or the app's request's error. */
+    enable: () => Promise<boolean>;
+    /** Tell the server first, then the browser, so a dropped device stops at once. */
+    disable: () => Promise<void>;
+    sendTest: () => Promise<{
+        sent: number;
+    }>;
+}
+/**
+ * The window event every mounted {@link usePushDevice} re-reads its state on. Fired by
+ * every enable and disable, and by `PushDevicesSetting` when it removes this device — so
+ * an app's own card on the same hook (keksdose's check-up) stays in step. The hook that
+ * fires it does not re-read: it knows what it changed. Namespaced for the kit;
+ * keksdose's was `"keksdose:push-subscription-changed"`.
+ */
+export declare const PUSH_SUBSCRIPTION_CHANGED = "eifi1:push-subscription-changed";
+/** Tell every {@link usePushDevice} that this browser's subscription changed. */
+export declare function notifyPushSubscriptionChanged(): void;
+/** Whether this browser has the APIs push needs. iOS exposes them only to an INSTALLED
+ *  app (Add to Home Screen). */
+export declare function pushSupported(): boolean;
+/**
+ * This browser's push for the signed-in account. Hand it one function per endpoint
+ * (§3.8); {@link PushDeviceSetting} draws it, and an app's own card may use it too.
+ *
+ * **"Subscribed" means this account**, not "this browser holds a subscription": a
+ * browser profile's subscription has no account in it, so a second account in the same
+ * profile would read the first's as its own (keksdose). The endpoint is checked against
+ * the account's own `devices()`; when that list cannot be read (offline), the browser's
+ * answer stands — a wrong "on" costs what it did before the check, a wrong "off" invites
+ * re-subscribing a device that is fine.
+ *
+ * **A 409 from `register`** — the endpoint belongs to another account, and the server
+ * will not re-home what it cannot prove this browser holds — unsubscribes and registers
+ * a fresh endpoint, once.
+ *
+ * **Timeouts:** no registration fails at once and a worker not ready in 10 s fails, both
+ * `PushDeviceError("no_service_worker")`; the browser's subscribe and unsubscribe are cut
+ * at 15 s, `PushDeviceError("push_timeout")` — so `busy` can never latch.
+ *
+ * Every mounted hook re-reads its state on {@link PUSH_SUBSCRIPTION_CHANGED}.
+ */
+export declare function usePushDevice(options: UsePushDeviceOptions): PushDevice;