@reykjavik/webtools 0.3.10 → 0.3.12

package/CHANGELOG.md

@@ -4,19 +4,20 @@
 
 - ... <!-- Add new lines here. -->
 
-## 0.3.10
+## 0.3.12
 
-_2026-03-16_
+_2026-03-17_
 
-- `@reykjavik/webtools/alertsStore/react`:
-  - fix: Add missing `onClick` prop to `LinkRendererProps`
+- `@reykjavik/webtools/alertsStore`:
+  - feat: Make alert `type` property disabled by default, enabled via config
+  - feat: Add `AlerterConfig.title?:boolean` to enable optional alert `title`s
 
-## 0.3.7 – 0.3.9
+## 0.3.7 – 0.3.11
 
 _2026-03-16_
 
 - feat: Add `@reykjavik/webtools/alertsStore` for toasts and other global UI
-  feedback messages along with helpers
+  feedback messages along with `@reykjavik/webtools/alertsStore/react` helpers
 
 ## 0.3.6
 

package/README.md

@@ -1032,7 +1032,6 @@ setTimeout(unsubscribe, 3_600_000);
 import { alerter } from '../alerterStore';
 alerter.success({
   message: 'All is good',
-  // type: 'something',
   // flags: ['pristine'],
   duration: 'MEDIUM',
   delay: 500, // Optional delay
@@ -1086,7 +1085,11 @@ The configuration options are as follows:
   The allowed alert "types", which can be used to, for example, dispatch both
   "toasts" vs. "static alert banners" via the same store.  
   This can also be used for more basic styling or categorization purposes.  
-  Default: no restrictions, any string value is allowed.
+  Default: `[ ]` (No types and the `type` property not allowed).
+
+- **`title?: boolean`**  
+  Whether to allow an optional `title` property on alerts.  
+  Default: `false`.
 
 - **`flags?: Array<string>`**  
   The allowed alert "flags", which can be changed during the lifetime of an
@@ -1167,8 +1170,8 @@ import { Toast } from '../components/Toast';
 `renderAlertMessage(message: AlertInfo['message'], onLinkClick?: (e: MouseEvent) => void, linkComponent?: renderAlertMessage.LinkRenderer): ReactNode`
 
 Helper to render an alerter alert message, which can be a simple string or a
-more complex array of strings and objects representing links and rich (bold)
-text formatting.
+more complex array of strings and objects representing links, `br` elements
+and rich (`strong`/`em`) text formatting.
 
 You can optionally pass an additional `onLinkClick` handler as a second
 parameter. (For example the alert's `dismiss` dispatcher.)

package/alertsStore/index.d.ts

@@ -7,18 +7,12 @@ declare const messageSchema: v.UnionSchema<[v.StringSchema<undefined>, v.ArraySc
     readonly hrefLang: v.OptionalSchema<v.StringSchema<undefined>, undefined>;
     readonly lang: v.OptionalSchema<v.StringSchema<undefined>, undefined>;
 }, undefined>, v.ObjectSchema<{
-    readonly tag: v.LiteralSchema<"strong", undefined>;
+    readonly tag: v.LiteralSchema<"br", undefined>;
+}, undefined>, v.ObjectSchema<{
+    readonly tag: v.PicklistSchema<["strong", "em"], undefined>;
     readonly text: v.StringSchema<undefined>;
 }, undefined>], undefined>, undefined>], undefined>;
 export type AlertMessage = v.InferOutput<typeof messageSchema>;
-type _AlertNotification<Level, Type, Flag> = {
-    level: Level;
-    message: AlertMessage;
-    type?: Type;
-    flags?: Array<Flag>;
-    duration?: number;
-    id: string;
-};
 declare const defaultAlertLevels: readonly ["info", "warning", "success", "error"];
 declare const defaultDurations: {
     BLINK: number;
@@ -34,7 +28,7 @@ declare const defaultDurations: {
  *
  * @see https://github.com/reykjavikcity/webtools/blob/v0.3/README.md#type-alerterconfig
  */
-export type AlerterConfig<Level extends string = (typeof defaultAlertLevels)[number], Type extends string = string, Flag extends string = string, Duration extends string = keyof typeof defaultDurations, Durations extends Record<Duration, number> = Record<Duration, number>> = {
+export type AlerterConfig<Level extends string = (typeof defaultAlertLevels)[number], Type extends string = string, Flag extends string = string, Title extends boolean = false, Duration extends string = keyof typeof defaultDurations, Durations extends Record<Duration, number> = Record<Duration, number>> = {
     /**
      * Identifier for the alerts store, used to create the key to persist alerts
      * in `sessionStorage` (or other provided storage).
@@ -58,7 +52,7 @@ export type AlerterConfig<Level extends string = (typeof defaultAlertLevels)[num
      *
      * This can also be used for more basic styling or categorization purposes.
      *
-     * Default: no restrictions, any string value is allowed.
+     * Default: `[ ]`  (No types and the `type` property not allowed).
      */
     types?: Array<Type>;
     /**
@@ -95,6 +89,12 @@ export type AlerterConfig<Level extends string = (typeof defaultAlertLevels)[num
      * is `0` (indefinite)
      */
     defaultDuration?: Durations extends Record<infer D, number> ? D : never;
+    /**
+     * Whether to allow an optional `title` property on alerts.
+     *
+     * Default: `false`.
+     */
+    title?: Title;
     /**
      * Optional custom storage object to use instead of `sessionStorage` (the
      * default) for persisting alerts across page reloads, etc.
@@ -110,7 +110,7 @@ export type AlerterConfig<Level extends string = (typeof defaultAlertLevels)[num
  *
  * @see https://github.com/reykjavikcity/webtools/blob/v0.3/README.md#createalerterstore
  */
-export declare const createAlerterStore: <Level extends string = (typeof defaultAlertLevels)[number], Type extends string = string, Flag extends string = string, Duration extends string = keyof typeof defaultDurations>(cfg?: AlerterConfig<Level, Type, Flag, Duration>) => {
+export declare const createAlerterStore: <Level extends string = (typeof defaultAlertLevels)[number], Type extends string = string, Flag extends string = string, Title extends boolean = false, Duration extends string = keyof typeof defaultDurations>(cfg?: AlerterConfig<Level, Type, Flag, Title, Duration>) => {
     /**
      * Singleton object with methods for showing alerts of different levels.
      * Pass a payload object to the method of the level you want to dispatch,
@@ -133,13 +133,6 @@ export declare const createAlerterStore: <Level extends string = (typeof default
          * them.)
          */
         message: AlertMessage;
-        /**
-         * Allows distinguishing between different "types" of alerts, for example,
-         * to dispatch both "toasts" vs. "static alert banners" via the same store.
-         *
-         * May also be used for more basic styling or categorization purposes.
-         */
-        type?: Type;
         /**
          * Flag values can be changed during the lifetime of
          * an alert using the `setFlags` function on each `AlertInfo` object.
@@ -157,7 +150,20 @@ export declare const createAlerterStore: <Level extends string = (typeof default
          */
         duration?: Duration;
         delay?: number;
-    }) => void>;
+    } & (Title extends true ? {
+        /**
+         * Optional title to accompany the alert message.
+         */
+        title?: string;
+    } : unknown) & (string extends Type ? unknown : {
+        /**
+         * Allows distinguishing between different "types" of alerts, for example,
+         * to dispatch both "toasts" vs. "static alert banners" via the same store.
+         *
+         * May also be used for more basic styling or categorization purposes.
+         */
+        type?: Type;
+    })) => void>;
     /**
      * Subscribes to alert events. The provided callback will be called whenever a
      * alert is added or cleared.
@@ -170,7 +176,17 @@ export declare const createAlerterStore: <Level extends string = (typeof default
      *
      * @see https://github.com/reykjavikcity/webtools/blob/v0.3/README.md#createalerterstore
      */
-    subscribe: (callback: (notifications: Array<_AlertNotification<Level, Type, Flag> & {
+    subscribe: (callback: (notifications: Array<{
+        level: Level;
+        message: AlertMessage;
+        flags?: Flag[] | undefined;
+        duration?: number;
+        id: string;
+    } & (Title extends true ? {
+        title?: string;
+    } : unknown) & (string extends Type ? unknown : {
+        type?: Type | undefined;
+    }) & {
         /** Dispatcher function that dismisses/hides/removes the callback */
         dismiss: () => void;
         /**

package/alertsStore/index.js

@@ -50,9 +50,13 @@ const messageSchema = v.union([
             hrefLang: v.optional(v.string()),
             lang: v.optional(v.string()),
         }),
+        // line break elements
+        v.object({
+            tag: v.literal('br'),
+        }),
         // strong/bold elements
         v.object({
-            tag: v.literal('strong'),
+            tag: v.picklist(['strong', 'em']),
             text: v.string(),
         }),
     ])),
@@ -91,8 +95,9 @@ const createAlerterStore = (cfg = {}) => {
         : defaultDefaultDuration;
     const _notificationSchema = v.object({
         level: v.picklist(alertLevels),
+        title: cfg.title ? v.optional(v.string()) : v.never(),
         message: messageSchema,
-        type: v.optional(cfg.types ? v.picklist(cfg.types) : v.string()),
+        type: cfg.types && cfg.types.length ? v.optional(v.picklist(cfg.types)) : v.never(),
         flags: v.optional(v.array(cfg.flags ? v.picklist(cfg.flags) : v.string())),
         duration: v.optional(v.number()),
         id: v.string(),

package/alertsStore/react.js

@@ -81,6 +81,9 @@ const renderAlertMessage = (message, onLinkClick, linkComponent) => {
                     react_1.default.createElement(Link, { key: i, ...linkProps, onClick: onLinkClick && ((e) => onLinkClick(e)) }, text),
                 ];
             }
+            if (part.tag === 'br') {
+                return react_1.default.createElement("br", { key: i });
+            }
             return [' ', react_1.default.createElement(part.tag, { key: i }, part.text)];
         });
 };

package/esm/alertsStore/index.d.ts

@@ -7,18 +7,12 @@ declare const messageSchema: v.UnionSchema<[v.StringSchema<undefined>, v.ArraySc
     readonly hrefLang: v.OptionalSchema<v.StringSchema<undefined>, undefined>;
     readonly lang: v.OptionalSchema<v.StringSchema<undefined>, undefined>;
 }, undefined>, v.ObjectSchema<{
-    readonly tag: v.LiteralSchema<"strong", undefined>;
+    readonly tag: v.LiteralSchema<"br", undefined>;
+}, undefined>, v.ObjectSchema<{
+    readonly tag: v.PicklistSchema<["strong", "em"], undefined>;
     readonly text: v.StringSchema<undefined>;
 }, undefined>], undefined>, undefined>], undefined>;
 export type AlertMessage = v.InferOutput<typeof messageSchema>;
-type _AlertNotification<Level, Type, Flag> = {
-    level: Level;
-    message: AlertMessage;
-    type?: Type;
-    flags?: Array<Flag>;
-    duration?: number;
-    id: string;
-};
 declare const defaultAlertLevels: readonly ["info", "warning", "success", "error"];
 declare const defaultDurations: {
     BLINK: number;
@@ -34,7 +28,7 @@ declare const defaultDurations: {
  *
  * @see https://github.com/reykjavikcity/webtools/blob/v0.3/README.md#type-alerterconfig
  */
-export type AlerterConfig<Level extends string = (typeof defaultAlertLevels)[number], Type extends string = string, Flag extends string = string, Duration extends string = keyof typeof defaultDurations, Durations extends Record<Duration, number> = Record<Duration, number>> = {
+export type AlerterConfig<Level extends string = (typeof defaultAlertLevels)[number], Type extends string = string, Flag extends string = string, Title extends boolean = false, Duration extends string = keyof typeof defaultDurations, Durations extends Record<Duration, number> = Record<Duration, number>> = {
     /**
      * Identifier for the alerts store, used to create the key to persist alerts
      * in `sessionStorage` (or other provided storage).
@@ -58,7 +52,7 @@ export type AlerterConfig<Level extends string = (typeof defaultAlertLevels)[num
      *
      * This can also be used for more basic styling or categorization purposes.
      *
-     * Default: no restrictions, any string value is allowed.
+     * Default: `[ ]`  (No types and the `type` property not allowed).
      */
     types?: Array<Type>;
     /**
@@ -95,6 +89,12 @@ export type AlerterConfig<Level extends string = (typeof defaultAlertLevels)[num
      * is `0` (indefinite)
      */
     defaultDuration?: Durations extends Record<infer D, number> ? D : never;
+    /**
+     * Whether to allow an optional `title` property on alerts.
+     *
+     * Default: `false`.
+     */
+    title?: Title;
     /**
      * Optional custom storage object to use instead of `sessionStorage` (the
      * default) for persisting alerts across page reloads, etc.
@@ -110,7 +110,7 @@ export type AlerterConfig<Level extends string = (typeof defaultAlertLevels)[num
  *
  * @see https://github.com/reykjavikcity/webtools/blob/v0.3/README.md#createalerterstore
  */
-export declare const createAlerterStore: <Level extends string = (typeof defaultAlertLevels)[number], Type extends string = string, Flag extends string = string, Duration extends string = keyof typeof defaultDurations>(cfg?: AlerterConfig<Level, Type, Flag, Duration>) => {
+export declare const createAlerterStore: <Level extends string = (typeof defaultAlertLevels)[number], Type extends string = string, Flag extends string = string, Title extends boolean = false, Duration extends string = keyof typeof defaultDurations>(cfg?: AlerterConfig<Level, Type, Flag, Title, Duration>) => {
     /**
      * Singleton object with methods for showing alerts of different levels.
      * Pass a payload object to the method of the level you want to dispatch,
@@ -133,13 +133,6 @@ export declare const createAlerterStore: <Level extends string = (typeof default
          * them.)
          */
         message: AlertMessage;
-        /**
-         * Allows distinguishing between different "types" of alerts, for example,
-         * to dispatch both "toasts" vs. "static alert banners" via the same store.
-         *
-         * May also be used for more basic styling or categorization purposes.
-         */
-        type?: Type;
         /**
          * Flag values can be changed during the lifetime of
          * an alert using the `setFlags` function on each `AlertInfo` object.
@@ -157,7 +150,20 @@ export declare const createAlerterStore: <Level extends string = (typeof default
          */
         duration?: Duration;
         delay?: number;
-    }) => void>;
+    } & (Title extends true ? {
+        /**
+         * Optional title to accompany the alert message.
+         */
+        title?: string;
+    } : unknown) & (string extends Type ? unknown : {
+        /**
+         * Allows distinguishing between different "types" of alerts, for example,
+         * to dispatch both "toasts" vs. "static alert banners" via the same store.
+         *
+         * May also be used for more basic styling or categorization purposes.
+         */
+        type?: Type;
+    })) => void>;
     /**
      * Subscribes to alert events. The provided callback will be called whenever a
      * alert is added or cleared.
@@ -170,7 +176,17 @@ export declare const createAlerterStore: <Level extends string = (typeof default
      *
      * @see https://github.com/reykjavikcity/webtools/blob/v0.3/README.md#createalerterstore
      */
-    subscribe: (callback: (notifications: Array<_AlertNotification<Level, Type, Flag> & {
+    subscribe: (callback: (notifications: Array<{
+        level: Level;
+        message: AlertMessage;
+        flags?: Flag[] | undefined;
+        duration?: number;
+        id: string;
+    } & (Title extends true ? {
+        title?: string;
+    } : unknown) & (string extends Type ? unknown : {
+        type?: Type | undefined;
+    }) & {
         /** Dispatcher function that dismisses/hides/removes the callback */
         dismiss: () => void;
         /**

package/esm/alertsStore/index.js

@@ -14,9 +14,13 @@ const messageSchema = v.union([
             hrefLang: v.optional(v.string()),
             lang: v.optional(v.string()),
         }),
+        // line break elements
+        v.object({
+            tag: v.literal('br'),
+        }),
         // strong/bold elements
         v.object({
-            tag: v.literal('strong'),
+            tag: v.picklist(['strong', 'em']),
             text: v.string(),
         }),
     ])),
@@ -55,8 +59,9 @@ export const createAlerterStore = (cfg = {}) => {
         : defaultDefaultDuration;
     const _notificationSchema = v.object({
         level: v.picklist(alertLevels),
+        title: cfg.title ? v.optional(v.string()) : v.never(),
         message: messageSchema,
-        type: v.optional(cfg.types ? v.picklist(cfg.types) : v.string()),
+        type: cfg.types && cfg.types.length ? v.optional(v.picklist(cfg.types)) : v.never(),
         flags: v.optional(v.array(cfg.flags ? v.picklist(cfg.flags) : v.string())),
         duration: v.optional(v.number()),
         id: v.string(),

package/esm/alertsStore/react.js

@@ -44,6 +44,9 @@ export const renderAlertMessage = (message, onLinkClick, linkComponent) => {
                     React.createElement(Link, { key: i, ...linkProps, onClick: onLinkClick && ((e) => onLinkClick(e)) }, text),
                 ];
             }
+            if (part.tag === 'br') {
+                return React.createElement("br", { key: i });
+            }
             return [' ', React.createElement(part.tag, { key: i }, part.text)];
         });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/webtools",
-	"version": "0.3.10",
+	"version": "0.3.12",
 	"description": "Misc. JS/TS helpers used by Reykjavík City's web dev teams.",
 	"main": "index.js",
 	"repository": "ssh://git@github.com:reykjavikcity/webtools.git",