@fleetbase/fleetops-engine 0.6.65 → 0.6.66

package/addon/controllers/management/vendors/index.js

@@ -2,6 +2,8 @@ import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { buildIdentityStub } from '../../../utils/identity-cell-resource';
+import relationValue from '../../../utils/relation-value';
 import fleetOpsOptions from '../../../utils/fleet-ops-options';
 
 export default class ManagementVendorsIndexController extends Controller {
@@ -118,7 +120,7 @@ export default class ManagementVendorsIndexController extends Controller {
                 sticky: true,
                 label: this.intl.t('column.name'),
                 valuePath: 'name',
-                cellComponent: 'table/cell/media-name',
+                cellComponent: 'cell/vendor-identity',
                 mediaPath: 'logo_url',
                 action: this.vendorActions.transition.view,
                 permission: 'fleet-ops view vendor',
@@ -178,8 +180,9 @@ export default class ManagementVendorsIndexController extends Controller {
             {
                 label: this.intl.t('column.address'),
                 valuePath: 'address',
-                cellComponent: 'table/cell/anchor',
-                action: this.vendorActions.viewPlace,
+                cellComponent: 'cell/place-identity',
+                permission: 'fleet-ops view place',
+                resourcePath: (vendor) => relationValue(vendor, 'place') ?? buildIdentityStub(vendor, { type: 'place', nameKey: 'address', load: () => vendor.get('place') }),
                 resizable: true,
                 sortable: true,
                 filterable: true,

package/addon/controllers/operations/orders/index.js

@@ -1,10 +1,15 @@
 import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
+import { action, get } from '@ember/object';
+import { buildIdentityStub } from '../../../utils/identity-cell-resource';
+import relationValue from '../../../utils/relation-value';
 
 export default class OperationsOrdersIndexController extends Controller {
     @service orderActions;
+    @service driverActions;
+    @service vehicleActions;
+    @service store;
     @service orderSocketEvents;
     @service leafletMapManager;
     @service mapDrawer;
@@ -164,7 +169,8 @@ export default class OperationsOrdersIndexController extends Controller {
             {
                 label: this.intl.t('column.payload'),
                 valuePath: 'payload.public_id',
-                cellComponent: 'click-to-copy',
+                cellComponent: 'cell/payload-identity',
+                resourcePath: (order) => relationValue(order, 'payload'),
                 resizable: true,
                 hidden: true,
                 filterable: true,
@@ -174,9 +180,13 @@ export default class OperationsOrdersIndexController extends Controller {
             },
             {
                 label: this.intl.t('column.driver-assigned'),
-                cellComponent: 'cell/driver-name',
+                cellComponent: 'cell/driver-identity',
                 valuePath: 'driver_assigned',
-                modelPath: 'driver_assigned',
+                permission: 'fleet-ops view driver',
+                action: this.driverActions.panel.view,
+                resourcePath: (order) =>
+                    relationValue(order, 'driver_assigned') ??
+                    buildIdentityStub(order, { type: 'driver', load: () => (order.driver_assigned_uuid ? this.store.findRecord('driver', order.driver_assigned_uuid) : null) }),
                 resizable: true,
                 sortable: true,
                 filterable: true,
@@ -188,7 +198,9 @@ export default class OperationsOrdersIndexController extends Controller {
             {
                 label: this.intl.t('column.pickup'),
                 valuePath: 'pickupName',
-                cellComponent: 'table/cell/base',
+                cellComponent: 'cell/place-identity',
+                permission: 'fleet-ops view place',
+                resourcePath: (order) => relationValue(relationValue(order, 'payload'), 'pickup') ?? buildIdentityStub(order, { type: 'place', nameKey: 'pickupName' }),
                 resizable: true,
                 sortable: true,
                 filterable: true,
@@ -202,7 +214,9 @@ export default class OperationsOrdersIndexController extends Controller {
             {
                 label: this.intl.t('column.dropoff'),
                 valuePath: 'dropoffName',
-                cellComponent: 'table/cell/base',
+                cellComponent: 'cell/place-identity',
+                permission: 'fleet-ops view place',
+                resourcePath: (order) => relationValue(relationValue(order, 'payload'), 'dropoff') ?? buildIdentityStub(order, { type: 'place', nameKey: 'dropoffName' }),
                 resizable: true,
                 sortable: true,
                 filterable: true,
@@ -215,7 +229,8 @@ export default class OperationsOrdersIndexController extends Controller {
             {
                 label: this.intl.t('column.customer'),
                 valuePath: 'customer.name',
-                cellComponent: 'table/cell/base',
+                cellComponent: 'cell/customer-identity',
+                resourcePath: (order) => relationValue(order, 'customer') ?? buildIdentityStub(order, { type: order.customer_type ?? 'customer', nameKey: 'customer_name' }),
                 resizable: true,
                 sortable: true,
                 hidden: false,
@@ -227,10 +242,17 @@ export default class OperationsOrdersIndexController extends Controller {
             },
             {
                 label: this.intl.t('column.vehicle-assigned'),
-                cellComponent: 'cell/vehicle-name',
+                cellComponent: 'cell/vehicle-identity',
                 valuePath: 'vehicle_assigned.display_name',
-                modelPath: 'vehicle_assigned',
-                showOnlineIndicator: true,
+                permission: 'fleet-ops view vehicle',
+                action: this.vehicleActions.panel.view,
+                resourcePath: (order) =>
+                    relationValue(order, 'vehicle_assigned') ??
+                    buildIdentityStub(order, {
+                        type: 'vehicle',
+                        name: get(order, 'vehicle_assigned.display_name'),
+                        load: () => (order.vehicle_assigned_uuid ? this.store.findRecord('vehicle', order.vehicle_assigned_uuid) : null),
+                    }),
                 hidden: true,
                 resizable: true,
                 sortable: true,
@@ -244,7 +266,8 @@ export default class OperationsOrdersIndexController extends Controller {
             {
                 label: this.intl.t('column.facilitator'),
                 valuePath: 'facilitator.name',
-                cellComponent: 'table/cell/base',
+                cellComponent: 'cell/facilitator-identity',
+                resourcePath: (order) => relationValue(order, 'facilitator') ?? buildIdentityStub(order, { type: order.facilitator_type ?? 'facilitator', nameKey: 'facilitator_name' }),
                 resizable: true,
                 hidden: true,
                 sortable: true,
@@ -333,6 +356,8 @@ export default class OperationsOrdersIndexController extends Controller {
             {
                 label: this.intl.t('column.created-by'),
                 valuePath: 'created_by_name',
+                cellComponent: 'table/cell/user-identity',
+                resourcePath: (order) => buildIdentityStub(order, { type: 'user', nameKey: 'created_by_name' }),
                 resizable: true,
                 hidden: true,
                 filterable: true,
@@ -344,6 +369,8 @@ export default class OperationsOrdersIndexController extends Controller {
             {
                 label: this.intl.t('column.updated-by'),
                 valuePath: 'updated_by_name',
+                cellComponent: 'table/cell/user-identity',
+                resourcePath: (order) => buildIdentityStub(order, { type: 'user', nameKey: 'updated_by_name' }),
                 resizable: true,
                 hidden: true,
                 filterable: true,

package/addon/controllers/operations/service-rates/index.js

@@ -1,5 +1,8 @@
 import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
+import { get } from '@ember/object';
+import { buildIdentityStub } from '../../../utils/identity-cell-resource';
+import relationValue from '../../../utils/relation-value';
 import { tracked } from '@glimmer/tracking';
 
 export default class OperationsServiceRatesIndexController extends Controller {
@@ -74,7 +77,10 @@ export default class OperationsServiceRatesIndexController extends Controller {
             {
                 label: this.intl.t('column.service-area'),
                 valuePath: 'service_area.name',
-                cellComponent: 'table/cell/base',
+                cellComponent: 'cell/service-area-identity',
+                resourcePath: (rate) =>
+                    relationValue(rate, 'service_area') ??
+                    buildIdentityStub(rate, { type: 'service-area', name: rate.service_area_name ?? get(rate, 'service_area.name'), load: () => rate.get('service_area') }),
                 resizable: true,
                 sortable: true,
                 filterable: true,
@@ -86,7 +92,9 @@ export default class OperationsServiceRatesIndexController extends Controller {
             {
                 label: this.intl.t('column.zone'),
                 valuePath: 'zone.name',
-                cellComponent: 'table/cell/base',
+                cellComponent: 'cell/zone-identity',
+                resourcePath: (rate) =>
+                    relationValue(rate, 'zone') ?? buildIdentityStub(rate, { type: 'zone', name: rate.zone_name ?? get(rate, 'zone.name'), load: () => rate.get('zone') }),
                 resizable: true,
                 sortable: true,
                 filterable: true,

package/addon/controllers/settings/payments/index.js

@@ -5,8 +5,11 @@ import { isEmpty } from '@ember/utils';
 import { task } from 'ember-concurrency';
 import config from 'ember-get-config';
 import { action } from '@ember/object';
+import { buildIdentityStub } from '../../../utils/identity-cell-resource';
+import relationValue from '../../../utils/relation-value';
 
 export default class SettingsPaymentsIndexController extends Controller {
+    @service store;
     @service fetch;
     @tracked hasStripeConnectAccount = true;
     @tracked table;
@@ -24,16 +27,22 @@ export default class SettingsPaymentsIndexController extends Controller {
         {
             label: 'Service Quote',
             valuePath: 'service_quote_id',
-            cellComponent: 'click-to-copy',
+            cellComponent: 'cell/service-quote-identity',
+            resourcePath: (payment) => relationValue(payment, 'service_quote') ?? buildIdentityStub(payment, { type: 'service-quote', nameKey: 'service_quote_id' }),
         },
         {
             label: 'Order',
             valuePath: 'order_id',
-            cellComponent: 'click-to-copy',
+            cellComponent: 'cell/order-identity',
+            resourcePath: (payment) =>
+                relationValue(payment, 'order') ??
+                buildIdentityStub(payment, { type: 'order', nameKey: 'order_id', load: () => (payment.order_uuid ? this.store.findRecord('order', payment.order_uuid) : null) }),
         },
         {
             label: 'Customer',
             valuePath: 'customer.name',
+            cellComponent: 'cell/customer-identity',
+            resourcePath: (payment) => relationValue(payment, 'customer') ?? buildIdentityStub(payment, { type: payment.customer_type ?? 'customer', nameKey: 'customer_name' }),
         },
         {
             label: 'Amount',

package/addon/extension.js

@@ -13,6 +13,12 @@ export default {
             priority: 0,
             description: 'Dispatch, fleet management, driver tracking, and logistics operations.',
             shortcuts: [
+                {
+                    title: 'Radar',
+                    description: 'Everything across resources, maintenance and staffing that needs a decision today.',
+                    icon: 'satellite-dish',
+                    route: 'console.fleet-ops.management.index',
+                },
                 {
                     title: 'Orders',
                     description: 'Create, dispatch, and track delivery orders in real time.',
@@ -118,6 +124,21 @@ export default {
             })
         );
 
+        menuService.registerMenuItem(
+            'auth:login',
+            new MenuItem({
+                title: 'Inspection',
+                route: 'virtual',
+                slug: 'inspection',
+                type: 'link',
+                wrapperClass: 'hidden',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'public-inspection'),
+                onClick: (menuItem) => {
+                    universe.transitionMenuItem('virtual', menuItem);
+                },
+            })
+        );
+
         // Register widgets
         this.registerWidgets(widgetService);
 
@@ -205,6 +226,16 @@ export default {
                 category: 'KPI Tiles',
                 default: true,
             }),
+            new Widget({
+                id: 'fleet-ops-radar-widget',
+                name: 'Radar',
+                description: 'What needs a decision across the fleet right now: open, overdue and snoozed items, linking to Radar.',
+                icon: 'satellite-dish',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'widget/radar'),
+                grid_options: { w: 3, h: 4, minW: 3, minH: 4 },
+                category: 'KPI Tiles',
+                default: true,
+            }),
             new Widget({
                 id: 'fleet-ops-kpi-open-issues-widget',
                 name: 'Open Issues',
@@ -394,6 +425,11 @@ export default {
             'fleet-ops:component:maintenance:form',
             'fleet-ops:component:maintenance:form:details',
             'fleet-ops:component:maintenance:details',
+            'fleet-ops:component:inspection-form:form',
+            'fleet-ops:component:inspection-form:details',
+            'fleet-ops:component:inspection-submission:form',
+            'fleet-ops:component:inspection-submission:details',
+            'fleet-ops:component:public-inspection',
             'fleet-ops:component:work-order:form',
             'fleet-ops:component:work-order:form:details',
             'fleet-ops:component:work-order:details',

package/addon/helpers/initials.js

@@ -0,0 +1,6 @@
+import { helper } from '@ember/component/helper';
+import { initialsOf } from '../utils/radar';
+
+export default helper(function initials([name]) {
+    return initialsOf(name);
+});

package/addon/helpers/leaflet-tile-url.js

@@ -5,9 +5,14 @@ import { inject as service } from '@ember/service';
  * Resolves the Leaflet tile URL from Fleet-Ops map settings.
  *
  * Usage:
- *   <layers.tile @url={{leaflet-tile-url}} />
+ *   <layers.tile @url={{(leaflet-tile-url)}} />
  *   <layers.tile @url={{leaflet-tile-url theme="dark"}} />
  *
+ * With no arguments it must be invoked in parentheses. A bare
+ * `@url={{leaflet-tile-url}}` passes the helper by name, which Glimmer refuses
+ * with "A resolved helper cannot be passed as a named argument" and the whole
+ * template fails to render.
+ *
  * Recomputes automatically when map settings load or change.
  */
 export default class LeafletTileUrlHelper extends Helper {

package/addon/instance-initializers/register-fleetops-resource-descriptors.js

@@ -0,0 +1,29 @@
+import { buildFleetOpsResourceDescriptors } from '../utils/resource-descriptors';
+
+/**
+ * Registers every FleetOps resource descriptor with the resource registry
+ * ember-ui provides. Runs with the engine instance, so the descriptors'
+ * open actions reach the engine's action services and router. A host whose
+ * ember-ui predates the registry has no `resource-registry` service, and
+ * the identity components simply fall back to text.
+ */
+export function initialize(engineInstance) {
+    let registry;
+
+    try {
+        registry = engineInstance.lookup('service:resource-registry');
+    } catch {
+        registry = null;
+    }
+
+    if (!registry || typeof registry.registerDescriptors !== 'function') {
+        return;
+    }
+
+    registry.registerDescriptors(buildFleetOpsResourceDescriptors(engineInstance));
+}
+
+export default {
+    name: 'register-fleetops-resource-descriptors',
+    initialize,
+};

package/addon/modifiers/inspection-flyout.js

@@ -0,0 +1,237 @@
+import { modifier } from 'ember-modifier';
+
+/** Room left between the flyout and its field, and between it and the sheet's edge. */
+const GAP = 8;
+const EDGE = 8;
+
+/** The nearest ancestor that actually scrolls, or null for the window. */
+function scrollParentOf(element) {
+    let node = element?.parentElement;
+
+    while (node && node !== document.body) {
+        const { overflowY } = getComputedStyle(node);
+
+        if (/(auto|scroll|overlay)/.test(overflowY) && node.scrollHeight > node.clientHeight) {
+            return node;
+        }
+
+        node = node.parentElement;
+    }
+
+    return null;
+}
+
+/**
+ * Place a floating flyout against its field.
+ *
+ * Both live inside the same sheet, so they scroll together and nothing has to
+ * follow the scroll. The flyout goes below the field unless only the visible
+ * space above it can hold it, is kept inside the sheet horizontally, and
+ * points its caret at the field's Fail button.
+ */
+export function placeFlyout(element, anchor, container) {
+    const containerRect = container.getBoundingClientRect();
+    const anchorRect = anchor.getBoundingClientRect();
+    const width = element.offsetWidth;
+    const height = element.offsetHeight;
+
+    const scroller = scrollParentOf(anchor);
+    const viewTop = scroller ? scroller.getBoundingClientRect().top : 0;
+    const viewBottom = scroller ? scroller.getBoundingClientRect().bottom : window.innerHeight;
+
+    const fitsBelow = viewBottom - anchorRect.bottom >= height + GAP;
+    const fitsAbove = anchorRect.top - viewTop >= height + GAP;
+
+    // Below, unless only the space above can hold it. Whatever hangs below a
+    // field can always be scrolled to — an absolutely placed panel extends
+    // the scroll area — but a panel pushed above the start of the sheet
+    // cannot be reached at all, so "more room above" is not reason enough.
+    const below = fitsBelow || !fitsAbove;
+
+    const top = below ? anchorRect.bottom - containerRect.top + GAP : anchorRect.top - containerRect.top - height - GAP;
+
+    const maxLeft = Math.max(EDGE, container.clientWidth - width - EDGE);
+    const left = Math.max(EDGE, Math.min(anchorRect.left - containerRect.left, maxLeft));
+
+    element.style.top = `${Math.round(top)}px`;
+    element.style.left = `${Math.round(left)}px`;
+    element.dataset.placement = below ? 'bottom' : 'top';
+
+    const pointAt = anchor.querySelector('[data-answer="fail"]') ?? anchor;
+    const pointRect = pointAt.getBoundingClientRect();
+    const caret = pointRect.left + pointRect.width / 2 - containerRect.left - left;
+
+    element.style.setProperty('--flyout-caret-x', `${Math.round(Math.max(16, Math.min(caret, width - 16)))}px`);
+
+    // Where it now sits, worked out from layout rather than read off its
+    // rendered box: the open animation is still translating it, and a reveal
+    // measured from the moving box stops exactly that many pixels short.
+    const flyoutTop = containerRect.top + top;
+
+    return { placement: below ? 'bottom' : 'top', flyoutTop, flyoutBottom: flyoutTop + height, viewTop, viewBottom, scroller };
+}
+
+/**
+ * Scroll just enough to bring a newly opened flyout fully into view, keeping
+ * a small margin from the edge. If it is taller than the view, its top — the
+ * title, and the first thing to answer — is what stays in view. Returns how
+ * far it scrolled.
+ */
+export function revealFlyout({ flyoutTop, flyoutBottom, viewTop, viewBottom, scroller }) {
+    let delta = 0;
+
+    if (flyoutBottom + EDGE > viewBottom) {
+        delta = flyoutBottom + EDGE - viewBottom;
+    }
+
+    if (flyoutTop - delta - EDGE < viewTop) {
+        delta = flyoutTop - EDGE - viewTop;
+    }
+
+    if (Math.abs(delta) < 1) {
+        return 0;
+    }
+
+    const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+    (scroller ?? window).scrollBy({ top: delta, behavior: reduce ? 'auto' : 'smooth' });
+
+    return delta;
+}
+
+/**
+ * Run something once the flyout's opening animation has finished.
+ *
+ * The animation translates the panel, and a translated box changes the
+ * scrollable area: a reveal worked out mid-animation is clamped against a
+ * scroll area that is briefly too short, and lands short by exactly the
+ * animated offset. Without an animation — reduced motion — it runs at once.
+ * Returns a timer to clear on teardown.
+ */
+function afterOpening(element, callback) {
+    const style = getComputedStyle(element);
+    const seconds = parseFloat(style.animationDuration) || 0;
+
+    if (style.animationName === 'none' || seconds === 0) {
+        callback();
+        return null;
+    }
+
+    let done = false;
+    const finish = () => {
+        if (done) {
+            return;
+        }
+
+        done = true;
+        element.removeEventListener('animationend', finish);
+        callback();
+    };
+
+    element.addEventListener('animationend', finish);
+
+    // In case the event never comes: a hidden tab, an interrupted animation.
+    return setTimeout(finish, seconds * 1000 + 50);
+}
+
+/**
+ * Keep a defect flyout attached to its field, and close it the natural way.
+ *
+ *     <div {{inspection-flyout this.anchor presentation="floating" onDismiss=this.dismiss}}>
+ *
+ * It closes on a press outside itself and outside its own field, and on
+ * Escape. It deliberately does not close on blur or on scroll: focus leaves
+ * the page for the native photo picker, and scrolling moves the flyout with
+ * its field anyway. Nothing is lost by closing, because every answer is saved
+ * as it is typed.
+ *
+ * A bottom sheet is placed by its stylesheet, so it only takes the
+ * dismissal half of this.
+ */
+export default modifier(function inspectionFlyout(element, [anchor], { presentation = 'floating', onDismiss, focus } = {}) {
+    if (!(anchor instanceof Element)) {
+        return;
+    }
+
+    const container = anchor.closest('.inspection-sheet') ?? document.body;
+    const floating = presentation === 'floating';
+    let frame = null;
+    let revealed = false;
+    let revealTimer = null;
+
+    const place = () => {
+        if (!floating || !element.isConnected || !anchor.isConnected) {
+            return;
+        }
+
+        cancelAnimationFrame(frame);
+        frame = requestAnimationFrame(() => {
+            placeFlyout(element, anchor, container);
+
+            // A panel that opens half off the page is not natural. Bring it
+            // into view once, by the least scroll that will do it, as soon as
+            // it has finished opening; after that the inspector is in charge
+            // of the scrolling.
+            if (!revealed) {
+                revealed = true;
+                revealTimer = afterOpening(element, () => {
+                    if (element.isConnected && anchor.isConnected) {
+                        revealFlyout(placeFlyout(element, anchor, container));
+                    }
+                });
+            }
+        });
+    };
+
+    const dismiss = (reason) => {
+        if (typeof onDismiss === 'function') {
+            onDismiss(reason);
+        }
+    };
+
+    // A press anywhere but the flyout or its own field closes it. Pointerdown,
+    // not click, so pressing another field's Fail closes this one first.
+    const onPointerDown = (event) => {
+        const target = event.target;
+
+        if (element.contains(target) || anchor.contains(target)) {
+            return;
+        }
+
+        dismiss('outside');
+    };
+
+    const onKeyDown = (event) => {
+        if (event.key === 'Escape') {
+            event.stopPropagation();
+            dismiss('escape');
+        }
+    };
+
+    document.addEventListener('pointerdown', onPointerDown, true);
+    document.addEventListener('keydown', onKeyDown, true);
+    window.addEventListener('resize', place);
+
+    // Re-place when anything around it changes height: a field above it
+    // gaining a line, or the flyout itself growing as a photo is added.
+    const observer = typeof ResizeObserver === 'function' ? new ResizeObserver(place) : null;
+    observer?.observe(container);
+    observer?.observe(element);
+
+    place();
+
+    if (focus) {
+        requestAnimationFrame(() => {
+            const target = focus === true ? element : element.querySelector(focus);
+            target?.focus({ preventScroll: true });
+        });
+    }
+
+    return () => {
+        cancelAnimationFrame(frame);
+        clearTimeout(revealTimer);
+        document.removeEventListener('pointerdown', onPointerDown, true);
+        document.removeEventListener('keydown', onKeyDown, true);
+        window.removeEventListener('resize', place);
+        observer?.disconnect();
+    };
+});

package/addon/modifiers/radar-keyboard.js

@@ -0,0 +1,78 @@
+import { modifier } from 'ember-modifier';
+
+/**
+ * The Radar keyboard layer: j/k move, x selects, e acknowledges, s snoozes,
+ * a assigns, Enter opens the record, Escape closes what is open.
+ *
+ * Keys are ignored while the user is typing in a field or a modal or
+ * overlay is open, so the list never steals a keystroke from a form.
+ * `handlers` is a hash of key => function; a missing key is ignored.
+ */
+const KEYS = {
+    j: 'next',
+    k: 'previous',
+    ArrowDown: 'next',
+    ArrowUp: 'previous',
+    x: 'select',
+    e: 'acknowledge',
+    s: 'snooze',
+    a: 'assign',
+    Enter: 'open',
+    Escape: 'close',
+    '/': 'search',
+};
+
+export function isTypingTarget(target) {
+    if (!target || typeof target.closest !== 'function') {
+        return false;
+    }
+
+    if (target.isContentEditable) {
+        return true;
+    }
+
+    const tag = (target.tagName || '').toLowerCase();
+    if (['input', 'textarea', 'select'].includes(tag)) {
+        return true;
+    }
+
+    return Boolean(target.closest('.ember-basic-dropdown-content, .modal, .next-content-overlay-panel, [role="dialog"], .ember-power-select-dropdown'));
+}
+
+export default modifier(function radarKeyboard(element, [handlers = {}], { enabled = true } = {}) {
+    const onKeydown = (event) => {
+        if (!enabled || event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey) {
+            return;
+        }
+
+        // A letter arrives as typed; the map is lowercase.
+        const key = typeof event.key === 'string' && event.key.length === 1 ? event.key.toLowerCase() : event.key;
+        const name = KEYS[key];
+        if (!name) {
+            return;
+        }
+
+        // "/" focuses the search even from a field; every other key only
+        // fires when the user is not typing.
+        if (name !== 'search' && isTypingTarget(event.target)) {
+            return;
+        }
+        if (name === 'search' && isTypingTarget(event.target)) {
+            return;
+        }
+
+        const handler = handlers[name];
+        if (typeof handler !== 'function') {
+            return;
+        }
+
+        event.preventDefault();
+        handler(event);
+    };
+
+    document.addEventListener('keydown', onKeydown);
+
+    return () => {
+        document.removeEventListener('keydown', onKeydown);
+    };
+});