@navette-js/panels 1.0.0-beta.3 → 1.0.0-beta.5

package/lib/notifications.d.ts

@@ -3,6 +3,13 @@ export type NotificationActionData = {
     label: string;
     url: string | null;
     openUrlInNewTab: boolean;
+    close?: boolean;
+    dispatch?: {
+        event: string;
+        data: Record<string, unknown>;
+    } | null;
+    color?: string | null;
+    button?: boolean;
 };
 export type NotificationData = {
     id: string;
@@ -40,11 +47,22 @@ export declare class Notification {
     iconColor(color: string): this;
     duration(ms: number): this;
     persistent(): this;
-    /** Links shown under the text. Only displayed in the database notifications panel. */
+    /**
+     * Actions under the text: links (`url`), or buttons that `close` the notification and/or `dispatch` a Livewire event
+     * (`{ event: 'undoDelete', data: { id: 5 } }`). `button: true` renders a button instead of a link. Buttons are only shown in
+     * flash notifications; the database notifications panel shows the links.
+     */
     actions(actions: {
         label: string;
         url?: string | null;
         openUrlInNewTab?: boolean;
+        close?: boolean;
+        dispatch?: {
+            event: string;
+            data?: Record<string, unknown>;
+        } | null;
+        color?: string | null;
+        button?: boolean;
     }[]): this;
     getData(): NotificationData;
     /** Stores the notification for this user (panel bell): `await Notification.make()….sendToDatabase(panel.getDatabaseNotifications(), user.id)`. Does nothing without a store. */
@@ -52,7 +70,7 @@ export declare class Notification {
     /** Queues the notification for the browser of the current request. */
     send(): this;
 }
-/** Renders a flash notification (no date, actions or inline mode). Title and body are escaped. */
+/** Renders a flash notification (no date or inline mode). Title, body and action labels are escaped. */
 export declare function renderNotification(n: NotificationData): string;
 /** Container component for flash notifications. */
 export declare class Notifications extends Component {

package/lib/notifications.js

@@ -53,8 +53,24 @@ export class Notification {
     iconColor(color) { this.data.iconColor = color; return this; }
     duration(ms) { this.data.duration = ms; return this; }
     persistent() { this.data.duration = 'persistent'; return this; }
-    /** Links shown under the text. Only displayed in the database notifications panel. */
-    actions(actions) { this.data.actions = actions.slice(0, 10).map((action) => ({ label: String(action.label), url: action.url ?? null, openUrlInNewTab: action.openUrlInNewTab === true })); return this; }
+    /**
+     * Actions under the text: links (`url`), or buttons that `close` the notification and/or `dispatch` a Livewire event
+     * (`{ event: 'undoDelete', data: { id: 5 } }`). `button: true` renders a button instead of a link. Buttons are only shown in
+     * flash notifications; the database notifications panel shows the links.
+     */
+    actions(actions) {
+        this.data.actions = actions.slice(0, 10).map((action) => {
+            const event = action.dispatch?.event;
+            if (event !== undefined && !/^[A-Za-z0-9_.:-]{1,100}$/.test(event))
+                throw new Error(`Invalid notification event name: ${event}`);
+            return {
+                label: String(action.label), url: action.url ?? null, openUrlInNewTab: action.openUrlInNewTab === true, close: action.close === true,
+                dispatch: event ? { event, data: action.dispatch?.data ?? {} } : null,
+                color: action.color && /^[a-z]+$/.test(action.color) ? action.color : null, button: action.button === true,
+            };
+        });
+        return this;
+    }
     getData() { return { ...this.data }; }
     /** Stores the notification for this user (panel bell): `await Notification.make()….sendToDatabase(panel.getDatabaseNotifications(), user.id)`. Does nothing without a store. */
     async sendToDatabase(store, user) { if (store)
@@ -68,7 +84,21 @@ export class Notification {
         return this;
     }
 }
-/** Renders a flash notification (no date, actions or inline mode). Title and body are escaped. */
+/** Actions of a notification: links (only local or http(s) URLs) and buttons closing it or dispatching a Livewire event. */
+function notificationActionsHtml(n) {
+    const safeUrl = (url) => typeof url === 'string' && /^(\/(?!\/)|https?:\/\/)/.test(url);
+    const items = (n.actions ?? []).filter((action) => action.label !== '' && (safeUrl(action.url) || action.close || action.dispatch)).map((action) => {
+        const color = action.color ?? 'primary';
+        const classes = action.button ? `fi-ac-btn-action fi-btn fi-size-sm` : `fi-ac-link-action fi-link fi-size-sm fi-color fi-color-${color} fi-text-color-600 dark:fi-text-color-400`;
+        const label = action.button ? e(action.label) : `<span class="fi-link-label">${e(action.label)}</span>`;
+        const clicks = [action.dispatch ? `Livewire.dispatch(${js(action.dispatch.event)}, ${js(action.dispatch.data)})` : null, action.close ? 'close()' : null].filter(Boolean).join('; ');
+        if (safeUrl(action.url))
+            return `<a href="${e(action.url)}"${action.openUrlInNewTab ? ' target="_blank" rel="noopener noreferrer"' : ''}${clicks ? ` x-on:click="${e(clicks)}"` : ''} class="${classes}">${label}</a>`;
+        return `<button type="button" x-on:click="${e(clicks)}" class="${classes}">${label}</button>`;
+    });
+    return items.length ? `<div class="fi-ac fi-no-notification-actions">${items.join('')}</div>` : '';
+}
+/** Renders a flash notification (no date or inline mode). Title, body and action labels are escaped. */
 export function renderNotification(n) {
     const closeLabel = t('filament-notifications::notification.actions.close.label');
     const attributes = new Attributes()
@@ -77,7 +107,7 @@ export function renderNotification(n) {
     const iconName = n.icon ?? (n.status ? STATUS_ICON[n.status] : null);
     const iconColor = n.iconColor ?? n.status;
     const iconHtml = iconName ? icon(iconName, { size: 'lg', attributes: new Attributes().class([...(iconColor && iconColor !== 'gray' ? ['fi-color', `fi-color-${iconColor}`] : []), 'fi-no-notification-icon']) }) : '';
-    return `<div x-data="notificationComponent({ notification: ${e(js({ id: n.id, duration: n.duration }))} })" x-transition:enter-start="fi-transition-enter-start" x-transition:enter-end="fi-transition-enter-end" x-transition:leave-start="fi-transition-leave-start" x-transition:leave-end="fi-transition-leave-end" x-on:mouseenter="pauseDuration('hover')" x-on:mouseleave="resumeDuration('hover')" x-on:focusin="handleFocusIn($event)" x-on:focusout="handleFocusOut($event)" x-on:keydown.escape="handleEscape($event)" ${attributes.toHtml().replace(/"if \(\$event\.detail\.id == '([^']*)'\) close\(\)"/, (_m, id) => `"if ($event.detail.id == '${id}') close()"`)}>${iconHtml}<div class="fi-no-notification-main">${n.title !== null || n.body !== null ? `<div class="fi-no-notification-text">${n.title !== null ? `<h3 class="fi-no-notification-title">${e(n.title)}</h3>` : ''}${n.body !== null ? `<div class="fi-no-notification-body">${e(n.body)}</div>` : ''}</div>` : ''}</div><button type="button" x-on:click="dismiss()" aria-label="${e(closeLabel)}" title="${e(closeLabel)}" class="fi-icon-btn fi-no-notification-close-btn">${icon('m-x-mark')}</button></div>`;
+    return `<div x-data="notificationComponent({ notification: ${e(js({ id: n.id, duration: n.duration }))} })" x-transition:enter-start="fi-transition-enter-start" x-transition:enter-end="fi-transition-enter-end" x-transition:leave-start="fi-transition-leave-start" x-transition:leave-end="fi-transition-leave-end" x-on:mouseenter="pauseDuration('hover')" x-on:mouseleave="resumeDuration('hover')" x-on:focusin="handleFocusIn($event)" x-on:focusout="handleFocusOut($event)" x-on:keydown.escape="handleEscape($event)" ${attributes.toHtml().replace(/"if \(\$event\.detail\.id == '([^']*)'\) close\(\)"/, (_m, id) => `"if ($event.detail.id == '${id}') close()"`)}>${iconHtml}<div class="fi-no-notification-main">${n.title !== null || n.body !== null ? `<div class="fi-no-notification-text">${n.title !== null ? `<h3 class="fi-no-notification-title">${e(n.title)}</h3>` : ''}${n.body !== null ? `<div class="fi-no-notification-body">${e(n.body)}</div>` : ''}</div>` : ''}${notificationActionsHtml(n)}</div><button type="button" x-on:click="dismiss()" aria-label="${e(closeLabel)}" title="${e(closeLabel)}" class="fi-icon-btn fi-no-notification-close-btn">${icon('m-x-mark')}</button></div>`;
 }
 /** Container component for flash notifications. */
 export class Notifications extends Component {

package/lib/qr-code.d.ts

@@ -0,0 +1,16 @@
+export type QrErrorCorrection = 'L' | 'M' | 'Q' | 'H';
+/** Module matrix of a QR Code: `true` for a dark module. Raises an error when the data does not fit (about 2.3 KB at level M). */
+export declare function qrCodeMatrix(text: string | Uint8Array, errorCorrection?: QrErrorCorrection): boolean[][];
+export type QrCodeSvgOptions = {
+    errorCorrection?: QrErrorCorrection;
+    /** Quiet zone around the code, in modules (4 by default, as the standard requires). */
+    margin?: number;
+    dark?: string;
+    light?: string;
+    /** Accessible name of the image (`<title>`). */
+    title?: string | null;
+};
+/** QR Code as an SVG document (scalable: give it a size with CSS). */
+export declare function qrCodeSvg(text: string, options?: QrCodeSvgOptions): string;
+/** QR Code as a `data:` URI, for an `<img src>`. */
+export declare const qrCodeDataUri: (text: string, options?: QrCodeSvgOptions) => string;

package/lib/qr-code.js

@@ -0,0 +1,255 @@
+// QR Code generator (ISO/IEC 18004), byte mode, versions 1 to 40, rendered as SVG. No dependency.
+// Follows the structure of Project Nayuki's QR Code generator (https://www.nayuki.io/page/qr-code-generator-library):
+// Copyright (c) Project Nayuki. MIT License: permission is hereby granted, free of charge, to any person obtaining a copy of
+// this software and associated documentation files, to deal in the Software without restriction, subject to including this
+// notice; the Software is provided "as is", without warranty of any kind.
+const LEVELS = { L: { ordinal: 0, formatBits: 1 }, M: { ordinal: 1, formatBits: 0 }, Q: { ordinal: 2, formatBits: 3 }, H: { ordinal: 3, formatBits: 2 } };
+const ECC_CODEWORDS_PER_BLOCK = [
+    [-1, 7, 10, 15, 20, 26, 18, 20, 24, 30, 18, 20, 24, 26, 30, 22, 24, 28, 30, 28, 28, 28, 28, 30, 30, 26, 28, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
+    [-1, 10, 16, 26, 18, 24, 16, 18, 22, 22, 26, 30, 22, 22, 24, 24, 28, 28, 26, 26, 26, 26, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28],
+    [-1, 13, 22, 18, 26, 18, 24, 18, 22, 20, 24, 28, 26, 24, 20, 30, 24, 28, 28, 26, 30, 28, 30, 30, 30, 30, 28, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
+    [-1, 17, 28, 22, 16, 22, 28, 26, 26, 24, 28, 24, 28, 22, 24, 24, 30, 28, 28, 26, 28, 30, 24, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
+];
+const NUM_ERROR_CORRECTION_BLOCKS = [
+    [-1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 4, 4, 4, 4, 4, 6, 6, 6, 6, 7, 8, 8, 9, 9, 10, 12, 12, 12, 13, 14, 15, 16, 17, 18, 19, 19, 20, 21, 22, 24, 25],
+    [-1, 1, 1, 1, 2, 2, 4, 4, 4, 5, 5, 5, 8, 9, 9, 10, 10, 11, 13, 14, 16, 17, 17, 18, 20, 21, 23, 25, 26, 28, 29, 31, 33, 35, 37, 38, 40, 43, 45, 47, 49],
+    [-1, 1, 1, 2, 2, 4, 4, 6, 6, 8, 8, 8, 10, 12, 16, 12, 17, 16, 18, 21, 20, 23, 23, 25, 27, 29, 34, 34, 35, 38, 40, 43, 45, 48, 51, 53, 56, 59, 62, 65, 68],
+    [-1, 1, 1, 2, 4, 4, 4, 5, 6, 8, 8, 11, 11, 16, 16, 18, 16, 19, 21, 25, 25, 25, 34, 30, 32, 35, 37, 40, 42, 45, 48, 51, 54, 57, 60, 63, 66, 70, 74, 77, 81],
+];
+const bit = (value, index) => ((value >>> index) & 1) !== 0;
+function rawDataModules(version) {
+    let result = (16 * version + 128) * version + 64;
+    if (version >= 2) {
+        const alignments = Math.floor(version / 7) + 2;
+        result -= (25 * alignments - 10) * alignments - 55;
+        if (version >= 7)
+            result -= 36;
+    }
+    return result;
+}
+const dataCodewords = (version, level) => Math.floor(rawDataModules(version) / 8) - ECC_CODEWORDS_PER_BLOCK[level][version] * NUM_ERROR_CORRECTION_BLOCKS[level][version];
+// Reed-Solomon over GF(2^8), polynomial 0x11D.
+function multiply(x, y) {
+    let z = 0;
+    for (let i = 7; i >= 0; i--) {
+        z = (z << 1) ^ ((z >>> 7) * 0x11d);
+        z ^= ((y >>> i) & 1) * x;
+    }
+    return z & 0xff;
+}
+function divisor(degree) {
+    const result = new Array(degree - 1).fill(0).concat([1]);
+    let root = 1;
+    for (let i = 0; i < degree; i++) {
+        for (let j = 0; j < result.length; j++) {
+            result[j] = multiply(result[j], root);
+            if (j + 1 < result.length)
+                result[j] ^= result[j + 1];
+        }
+        root = multiply(root, 0x02);
+    }
+    return result;
+}
+function remainder(data, generator) {
+    const result = generator.map(() => 0);
+    for (const byte of data) {
+        const factor = byte ^ result.shift();
+        result.push(0);
+        generator.forEach((coefficient, i) => { result[i] ^= multiply(coefficient, factor); });
+    }
+    return result;
+}
+/** Module matrix of a QR Code: `true` for a dark module. Raises an error when the data does not fit (about 2.3 KB at level M). */
+export function qrCodeMatrix(text, errorCorrection = 'M') {
+    const level = LEVELS[errorCorrection];
+    if (!level)
+        throw new Error(`Unknown error correction level: ${errorCorrection}`);
+    const bytes = typeof text === 'string' ? new TextEncoder().encode(text) : text;
+    let version = 1;
+    for (;; version++) {
+        if (version > 40)
+            throw new Error('Data too long for a QR Code.');
+        const countBits = version <= 9 ? 8 : 16;
+        if (4 + countBits + bytes.length * 8 <= dataCodewords(version, level.ordinal) * 8)
+            break;
+    }
+    // Data bits: byte mode, character count, bytes, terminator, padding.
+    const bits = [];
+    const append = (value, length) => { for (let i = length - 1; i >= 0; i--)
+        bits.push((value >>> i) & 1); };
+    append(0b0100, 4);
+    append(bytes.length, version <= 9 ? 8 : 16);
+    for (const byte of bytes)
+        append(byte, 8);
+    const capacity = dataCodewords(version, level.ordinal) * 8;
+    append(0, Math.min(4, capacity - bits.length));
+    append(0, (8 - (bits.length % 8)) % 8);
+    for (let pad = 0xec; bits.length < capacity; pad ^= 0xec ^ 0x11)
+        append(pad, 8);
+    const data = [];
+    for (let i = 0; i < bits.length; i += 8)
+        data.push(bits.slice(i, i + 8).reduce((byte, b) => (byte << 1) | b, 0));
+    // Error correction blocks, interleaved.
+    const numBlocks = NUM_ERROR_CORRECTION_BLOCKS[level.ordinal][version];
+    const blockEccLength = ECC_CODEWORDS_PER_BLOCK[level.ordinal][version];
+    const rawCodewords = Math.floor(rawDataModules(version) / 8);
+    const numShortBlocks = numBlocks - (rawCodewords % numBlocks);
+    const shortBlockLength = Math.floor(rawCodewords / numBlocks);
+    const generator = divisor(blockEccLength);
+    const blocks = [];
+    for (let i = 0, k = 0; i < numBlocks; i++) {
+        const block = data.slice(k, k + shortBlockLength - blockEccLength + (i < numShortBlocks ? 0 : 1));
+        k += block.length;
+        const ecc = remainder(block, generator);
+        if (i < numShortBlocks)
+            block.push(0);
+        blocks.push(block.concat(ecc));
+    }
+    const codewords = [];
+    for (let i = 0; i < blocks[0].length; i++)
+        blocks.forEach((block, j) => { if (i !== shortBlockLength - blockEccLength || j >= numShortBlocks)
+            codewords.push(block[i]); });
+    // Function patterns.
+    const size = version * 4 + 17;
+    const modules = Array.from({ length: size }, () => new Array(size).fill(false));
+    const isFunction = Array.from({ length: size }, () => new Array(size).fill(false));
+    const set = (x, y, dark) => { modules[y][x] = dark; isFunction[y][x] = true; };
+    for (let i = 0; i < size; i++) {
+        set(6, i, i % 2 === 0);
+        set(i, 6, i % 2 === 0);
+    }
+    for (const [cx, cy] of [[3, 3], [size - 4, 3], [3, size - 4]]) {
+        for (let dy = -4; dy <= 4; dy++)
+            for (let dx = -4; dx <= 4; dx++) {
+                const distance = Math.max(Math.abs(dx), Math.abs(dy)), x = cx + dx, y = cy + dy;
+                if (x >= 0 && x < size && y >= 0 && y < size)
+                    set(x, y, distance !== 2 && distance !== 4);
+            }
+    }
+    const alignments = [];
+    if (version > 1) {
+        const count = Math.floor(version / 7) + 2;
+        const step = Math.floor((version * 8 + count * 3 + 5) / (count * 4 - 4)) * 2;
+        alignments.push(6);
+        for (let position = size - 7; alignments.length < count; position -= step)
+            alignments.splice(1, 0, position);
+    }
+    alignments.forEach((cx, i) => alignments.forEach((cy, j) => {
+        if ((i === 0 && j === 0) || (i === 0 && j === alignments.length - 1) || (i === alignments.length - 1 && j === 0))
+            return;
+        for (let dy = -2; dy <= 2; dy++)
+            for (let dx = -2; dx <= 2; dx++)
+                set(cx + dx, cy + dy, Math.max(Math.abs(dx), Math.abs(dy)) !== 1);
+    }));
+    const drawFormat = (mask) => {
+        const formatData = (level.formatBits << 3) | mask;
+        let rem = formatData;
+        for (let i = 0; i < 10; i++)
+            rem = (rem << 1) ^ ((rem >>> 9) * 0x537);
+        const format = ((formatData << 10) | rem) ^ 0x5412;
+        for (let i = 0; i <= 5; i++)
+            set(8, i, bit(format, i));
+        set(8, 7, bit(format, 6));
+        set(8, 8, bit(format, 7));
+        set(7, 8, bit(format, 8));
+        for (let i = 9; i < 15; i++)
+            set(14 - i, 8, bit(format, i));
+        for (let i = 0; i < 8; i++)
+            set(size - 1 - i, 8, bit(format, i));
+        for (let i = 8; i < 15; i++)
+            set(8, size - 15 + i, bit(format, i));
+        set(8, size - 8, true);
+    };
+    drawFormat(0); // reserves the format areas before the data is placed
+    if (version >= 7) {
+        let rem = version;
+        for (let i = 0; i < 12; i++)
+            rem = (rem << 1) ^ ((rem >>> 11) * 0x1f25);
+        const versionBits = (version << 12) | rem;
+        for (let i = 0; i < 18; i++) {
+            const a = size - 11 + (i % 3), b = Math.floor(i / 3);
+            set(a, b, bit(versionBits, i));
+            set(b, a, bit(versionBits, i));
+        }
+    }
+    // Codewords, in the zigzag order.
+    let index = 0;
+    for (let right = size - 1; right >= 1; right -= 2) {
+        if (right === 6)
+            right = 5;
+        for (let vertical = 0; vertical < size; vertical++)
+            for (let j = 0; j < 2; j++) {
+                const x = right - j, upward = ((right + 1) & 2) === 0, y = upward ? size - 1 - vertical : vertical;
+                if (!isFunction[y][x] && index < codewords.length * 8) {
+                    modules[y][x] = bit(codewords[index >>> 3], 7 - (index & 7));
+                    index++;
+                }
+            }
+    }
+    // Mask: the one with the lowest penalty.
+    const masks = [
+        (x, y) => (x + y) % 2 === 0, (_x, y) => y % 2 === 0, (x) => x % 3 === 0, (x, y) => (x + y) % 3 === 0,
+        (x, y) => (Math.floor(x / 3) + Math.floor(y / 2)) % 2 === 0, (x, y) => ((x * y) % 2) + ((x * y) % 3) === 0,
+        (x, y) => (((x * y) % 2) + ((x * y) % 3)) % 2 === 0, (x, y) => (((x + y) % 2) + ((x * y) % 3)) % 2 === 0,
+    ];
+    const applyMask = (mask) => { for (let y = 0; y < size; y++)
+        for (let x = 0; x < size; x++)
+            if (!isFunction[y][x] && masks[mask](x, y))
+                modules[y][x] = !modules[y][x]; };
+    let best = 0, bestPenalty = Infinity;
+    for (let mask = 0; mask < 8; mask++) {
+        applyMask(mask);
+        drawFormat(mask);
+        const score = penalty(modules);
+        if (score < bestPenalty) {
+            best = mask;
+            bestPenalty = score;
+        }
+        applyMask(mask); // XOR again: undoes the mask
+    }
+    applyMask(best);
+    drawFormat(best);
+    return modules;
+}
+function penalty(modules) {
+    const size = modules.length;
+    let score = 0;
+    const lines = [...modules, ...modules[0].map((_, x) => modules.map((row) => row[x]))];
+    const finderLike = [[true, false, true, true, true, false, true, false, false, false, false], [false, false, false, false, true, false, true, true, true, false, true]];
+    for (const line of lines) {
+        for (let i = 0, run = 1; i < size; i++, run++) {
+            if (i === size - 1 || line[i] !== line[i + 1]) {
+                if (run >= 5)
+                    score += 3 + run - 5;
+                run = 0;
+            }
+        }
+        for (let i = 0; i + 11 <= size; i++)
+            for (const pattern of finderLike)
+                if (pattern.every((dark, k) => line[i + k] === dark))
+                    score += 40;
+    }
+    for (let y = 0; y + 1 < size; y++)
+        for (let x = 0; x + 1 < size; x++) {
+            const color = modules[y][x];
+            if (color === modules[y][x + 1] && color === modules[y + 1][x] && color === modules[y + 1][x + 1])
+                score += 3;
+        }
+    const dark = modules.reduce((sum, row) => sum + row.filter(Boolean).length, 0), total = size * size;
+    score += (Math.ceil(Math.abs(dark * 20 - total * 10) / total) - 1) * 10;
+    return score;
+}
+const escapeXml = (value) => value.replace(/[&<>"']/g, (char) => `&#${char.charCodeAt(0)};`);
+/** QR Code as an SVG document (scalable: give it a size with CSS). */
+export function qrCodeSvg(text, options = {}) {
+    const modules = qrCodeMatrix(text, options.errorCorrection ?? 'M');
+    const margin = Math.max(0, Math.floor(options.margin ?? 4));
+    const size = modules.length + margin * 2;
+    let path = '';
+    modules.forEach((row, y) => row.forEach((dark, x) => { if (dark)
+        path += `M${x + margin},${y + margin}h1v1h-1z`; }));
+    const color = (value, fallback) => escapeXml(value ?? fallback);
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${size} ${size}" shape-rendering="crispEdges">${options.title ? `<title>${escapeXml(options.title)}</title>` : ''}<rect width="100%" height="100%" fill="${color(options.light, '#ffffff')}"/><path d="${path}" fill="${color(options.dark, '#000000')}"/></svg>`;
+}
+/** QR Code as a `data:` URI, for an `<img src>`. */
+export const qrCodeDataUri = (text, options = {}) => `data:image/svg+xml;base64,${Buffer.from(qrCodeSvg(text, options)).toString('base64')}`;

package/lib/session-store.d.ts

@@ -0,0 +1,21 @@
+/** Storage of small per-session values. Implement it to keep them in a database or a cache shared by several processes. */
+export interface SessionStore {
+    get(session: string, key: string): unknown | Promise<unknown>;
+    set(session: string, key: string, value: unknown): void | Promise<void>;
+}
+/**
+ * In-memory store: values are lost when the process restarts and are not shared between processes.
+ * Sessions idle for longer than `ttl` are dropped, and the oldest sessions go first beyond `maxSessions`.
+ */
+export declare class MemorySessionStore implements SessionStore {
+    private sessions;
+    private readonly options;
+    constructor(options?: {
+        ttl?: number;
+        maxSessions?: number;
+        maxValueLength?: number;
+    });
+    private get ttl();
+    get(session: string, key: string): unknown;
+    set(session: string, key: string, value: unknown): void;
+}

package/lib/session-store.js

@@ -0,0 +1,35 @@
+// Per-browser session data (persisted table filters, search and sort). The default store keeps it in memory.
+/**
+ * In-memory store: values are lost when the process restarts and are not shared between processes.
+ * Sessions idle for longer than `ttl` are dropped, and the oldest sessions go first beyond `maxSessions`.
+ */
+export class MemorySessionStore {
+    sessions = new Map();
+    options;
+    constructor(options = {}) { this.options = options; }
+    get ttl() { return this.options.ttl ?? 12 * 60 * 60 * 1000; }
+    get(session, key) {
+        const entry = this.sessions.get(session);
+        if (!entry || Date.now() - entry.at > this.ttl) {
+            this.sessions.delete(session);
+            return undefined;
+        }
+        const raw = entry.values.get(key);
+        return raw === undefined ? undefined : JSON.parse(raw);
+    }
+    set(session, key, value) {
+        const raw = JSON.stringify(value ?? null);
+        // Values come from the browser: an oversized one is not kept.
+        if (raw.length > (this.options.maxValueLength ?? 64 * 1024))
+            return;
+        const entry = this.sessions.get(session) ?? { at: Date.now(), values: new Map() };
+        entry.at = Date.now();
+        entry.values.set(key, raw);
+        // Most recently used last: re-inserting moves the session to the end.
+        this.sessions.delete(session);
+        this.sessions.set(session, entry);
+        const max = this.options.maxSessions ?? 10000;
+        while (this.sessions.size > max)
+            this.sessions.delete(this.sessions.keys().next().value);
+    }
+}

package/lib/throttle.d.ts

@@ -0,0 +1,10 @@
+/** In-memory rate limiter: `max` attempts per window, per key. Fine for a single instance; use a shared store when running several. */
+export declare class Throttle {
+    private hits;
+    private max;
+    private windowMs;
+    constructor(max?: number, windowMs?: number);
+    /** Records an attempt; returns 0 if allowed, otherwise the number of seconds to wait. */
+    hit(key: string, now?: number): number;
+    clear(key: string): void;
+}

package/lib/throttle.js

@@ -0,0 +1,25 @@
+// Rate limiting of sensitive endpoints (login, password reset, multi-factor challenges).
+/** In-memory rate limiter: `max` attempts per window, per key. Fine for a single instance; use a shared store when running several. */
+export class Throttle {
+    hits = new Map();
+    max;
+    windowMs;
+    constructor(max = 5, windowMs = 60_000) { this.max = max; this.windowMs = windowMs; }
+    /** Records an attempt; returns 0 if allowed, otherwise the number of seconds to wait. */
+    hit(key, now = Date.now()) {
+        const recent = (this.hits.get(key) ?? []).filter((at) => at > now - this.windowMs);
+        if (recent.length >= this.max) {
+            this.hits.set(key, recent);
+            return Math.max(1, Math.ceil((recent[0] + this.windowMs - now) / 1000));
+        }
+        recent.push(now);
+        this.hits.set(key, recent);
+        // Keep the store from growing forever.
+        if (this.hits.size > 10_000)
+            for (const [k, v] of this.hits)
+                if (!v.some((at) => at > now - this.windowMs))
+                    this.hits.delete(k);
+        return 0;
+    }
+    clear(key) { this.hits.delete(key); }
+}

package/lib/topbar.d.ts

@@ -5,7 +5,9 @@ export declare const notificationBodyHtml: (body: string) => string;
 export type GlobalSearchResult = {
     title: string;
     url: string;
-    details: Record<string, string>;
+    details: Record<string, string>; /** Buttons under the result: links (`url()`) or Livewire events (`dispatch()`). */
+    actions?: any[];
+    record?: unknown;
 };
 export type GlobalSearchCategory = {
     label: string;

package/lib/topbar.js

@@ -54,6 +54,22 @@ export class GlobalSearch extends Component {
         }).class(['fi-input', 'fi-input-has-inline-prefix']).toHtml()} />`;
         const focus = "if (! $event.target.closest('.fi-input-wrp-actions')) $dispatch('focus-input')";
         const field = `<div class="fi-input-wrp"><div x-on:click="${e(focus)}" class="fi-input-wrp-prefix fi-input-wrp-prefix-has-content fi-inline">${icon('m-magnifying-glass', { attributes: new Attributes({ 'wire:loading.remove.delay.default': '1', 'wire:target': 'search' }) })}${loadingIndicator(new Attributes({ 'wire:loading.delay.default': '', 'wire:target': 'search' }))}</div><div class="fi-input-wrp-content-ctn">${input}</div>${suffix ? `<div x-on:click="${e(focus)}" class="fi-input-wrp-suffix fi-inline fi-input-wrp-suffix-has-label"><span class="fi-input-wrp-label">${e(suffix)}</span></div>` : ''}</div>`;
+        // Actions of each result: rendered first (async), then placed under the result's link.
+        const actionsHtml = new Map();
+        for (const [groupIndex, category] of (categories ?? []).entries()) {
+            for (const [index, result] of category.results.entries()) {
+                const rendered = [];
+                for (const action of result.actions ?? []) {
+                    const ctx = { livewire: this, component: null, operation: null, record: result.record ?? null, get: () => undefined, state: undefined };
+                    if (!(await action.isVisible(ctx)))
+                        continue;
+                    const describedBy = `${id}-group-${groupIndex} ${id}-group-${groupIndex}-result-${index}`;
+                    rendered.push(String(await action.toHtml(ctx)).replace(/^<(a|button)\s/, (_m, tag) => `<${tag} aria-describedby="${e(describedBy)}" data-global-search-action="1" `));
+                }
+                if (rendered.length)
+                    actionsHtml.set(result, rendered);
+            }
+        }
         let results = '';
         if (categories !== null) {
             results = categories.length === 0
@@ -62,7 +78,8 @@ export class GlobalSearch extends Component {
                     const groupId = `${id}-group-${groupIndex}`;
                     return `<li class="fi-global-search-result-group"><h3 id="${e(groupId)}" class="fi-global-search-result-group-header">${e(category.label)}</h3><ul class="fi-global-search-result-group-results">${category.results.map((result, index) => {
                         const details = Object.entries(result.details);
-                        return `<li class="fi-global-search-result"><a href="${e(result.url)}" wire:navigate class="fi-global-search-result-link"><h4 id="${e(`${groupId}-result-${index}`)}" class="fi-global-search-result-heading">${e(result.title)}</h4>${details.length ? `<dl class="fi-global-search-result-details">${details.map(([label, value]) => `<div class="fi-global-search-result-detail"><dt class="fi-global-search-result-detail-label">${e(label)}:</dt><dd class="fi-global-search-result-detail-value">${e(value)}</dd></div>`).join('')}</dl>` : ''}</a></li>`;
+                        const actions = actionsHtml.get(result);
+                        return `<li class="${actions ? 'fi-global-search-result fi-global-search-result-has-actions' : 'fi-global-search-result'}"><a href="${e(result.url)}" wire:navigate class="fi-global-search-result-link"><h4 id="${e(`${groupId}-result-${index}`)}" class="fi-global-search-result-heading">${e(result.title)}</h4>${details.length ? `<dl class="fi-global-search-result-details">${details.map(([label, value]) => `<div class="fi-global-search-result-detail"><dt class="fi-global-search-result-detail-label">${e(label)}:</dt><dd class="fi-global-search-result-detail-value">${e(value)}</dd></div>`).join('')}</dl>` : ''}</a>${actions ? `<div class="fi-global-search-result-actions">${actions.join('')}</div>` : ''}</li>`;
                     }).join('')}</ul></li>`;
                 }).join('')}</ul>`;
         }

package/lib/totp.d.ts

@@ -0,0 +1,38 @@
+/** RFC 4648 base32, without padding (the format of authenticator app secrets). */
+export declare function base32Encode(bytes: Uint8Array): string;
+/** Decodes base32 (case, spaces and padding ignored). Throws on any other character. */
+export declare function base32Decode(text: string): Buffer;
+export type TotpAlgorithm = 'sha1' | 'sha256' | 'sha512';
+export type TotpOptions = {
+    /** Seconds per code (30 by default, what every app expects). */
+    period?: number;
+    /** Code length (6 by default). */
+    digits?: number;
+    /** HMAC algorithm (`sha1` by default: most apps ignore any other value). */
+    algorithm?: TotpAlgorithm;
+};
+/** Random base32 secret of `bytes` bytes (20 by default: 160 bits, as RFC 4226 recommends). */
+export declare function generateTotpSecret(bytes?: number): string;
+/** HOTP value for a counter. */
+export declare function hotp(secret: string | Uint8Array, counter: number, options?: Pick<TotpOptions, 'digits' | 'algorithm'>): string;
+/** Time step (counter) of a moment: `floor(unix seconds / period)`. */
+export declare const totpTimestep: (at?: number, period?: number) => number;
+/** Current code of a secret (or the code at `at`, in milliseconds). */
+export declare function totpCode(secret: string, options?: TotpOptions & {
+    at?: number;
+}): string;
+/**
+ * Checks a code against the secret, accepting `window` time steps before and after the current one (clock drift).
+ * Returns the matched time step, or `null`. Pass the last accepted step as `after` to refuse a code that was already
+ * used, or any older one (RFC 6238 §5.2): store the returned step and pass it next time.
+ */
+export declare function verifyTotp(secret: string, code: unknown, options?: TotpOptions & {
+    window?: number;
+    at?: number;
+    after?: number | null;
+}): number | null;
+/**
+ * `otpauth://` URI to show as a QR code: `issuer` is the application name, `account` the user's (their email).
+ * See https://github.com/google/google-authenticator/wiki/Key-Uri-Format.
+ */
+export declare function totpUri(secret: string, account: string, issuer: string, options?: TotpOptions): string;