fix: make the app keyboard-reachable, and close four DoS-able patterns

The bulk of what SonarQube still had open on the reliability side, read site by
site rather than swept. Two clusters are worth calling out because they are
defects, not lint.

**Four regexes could be made to hang the process.** The worst is
`/.+@.+\..+/` in the forgot-password path: three unbounded `.+` that all
overlap, unanchored, on an endpoint that needs no login and whose schema is a
bare z.string() under a 100kb body cap. A thousand '@' characters had not
finished after 100 seconds — one request pins the event loop, and Node has one.
EMAIL_REGEX in auth.helpers is the same shape on register and profile update
(310ms for 8kb). The two tag strippers over an uploaded KML description and over
Commons metadata took 0.52s on a 16k run of '<'. Each rewrite was proven
equivalent by brute force against the original — millions of strings for the
coordinate patterns, 671,876 for the tag stripper — because a subtly different
regex on a parsing path is worse than the finding.

`<[^>]+>` could not be fixed in the pattern: `[^>]` matches `<` too, so the only
unambiguous form changes what happens to malformed markup. It is now a scan in
common/stripHtmlTags.ts, quirks included — `<>` is left alone, `<a<b>` is one
tag — with the equivalence pinned by a test that compares against the old regex
over every string up to length six.

**And roughly 500 places could only be reached with a mouse.** Clickable divs
became real buttons where the markup allowed (52 of them), took
role + tabIndex + Enter/Space where they had to stay divs, and modal backdrops
took role="presentation" — the honest role, since a backdrop is a mouse shortcut
for a Cancel control that is already in the tab order, and making it a button
plants a nameless full-screen tab stop around its own contents.

Alongside those: `.sort()` calls that now say the order they always had, `{n &&
<X/>}` guards that rendered a literal "0" for a zero-byte file and for a place at
latitude 0, an optimistic budget write that stored a boolean where the contract
and both transports use 0/1, and the Number statics.

sonar-project.properties documents the six that were deliberately left: two wiki
patterns with no overlapping quantifier pair whose "fix" would stop parsing
`[see [1]](url)`, four tar header fields bounded at 12-155 bytes by the format,
two djb2 hashes where the 32-bit wrap is the algorithm, two `| 0` that are also
coercing undefined to 0 on a path where the API sends no user_id, and the MCP
session maps Sonar reads as empty because they are filled from another module.

client/src/components/Packing/PackingListPanel.test.tsx

@@ -1,6 +1,6 @@
 // FE-COMP-PACKING-001 to FE-COMP-PACKING-020
 import { vi } from 'vitest';
-import { render, screen, waitFor, fireEvent } from '../../../tests/helpers/render';
+import { render, screen, waitFor, fireEvent, within } from '../../../tests/helpers/render';
 import userEvent from '@testing-library/user-event';
 import { http, HttpResponse } from 'msw';
 import { server } from '../../../tests/helpers/msw/server';
@@ -899,9 +899,10 @@ describe('PackingListPanel', () => {
     const packageBtn = container.querySelector('svg.lucide-package')?.closest('button');
     fireEvent.click(packageBtn!);
 
-    // Picker is open - find "Trolley" button inside the dropdown
-    // The dropdown renders as an absolute positioned div inside the item row
-    const trolleyBtn = await screen.findByRole('button', { name: /Trolley/ });
+    // Picker is open - find "Trolley" button inside the dropdown. The bag
+    // sidebar carries the same name on its own button, so scope the query to
+    // the picker (the dropdown is a sibling of the package button).
+    const trolleyBtn = await within(packageBtn!.parentElement!).findByRole('button', { name: /Trolley/ });
     fireEvent.click(trolleyBtn);
 
     await waitFor(() => expect(putBody).toMatchObject({ bag_id: 7 }));

client/src/components/Packing/PackingListPanelBagCard.tsx

@@ -59,7 +59,8 @@ export function BagCard({ bag, bagItems, totalWeight, pct, tripId, tripMembers,
             onBlur={saveName} onKeyDown={e => { if (e.key === 'Enter') saveName(); if (e.key === 'Escape') { setEditingName(false); setNameVal(bag.name) } }}
             style={{ flex: 1, fontSize: sz.name, fontWeight: 600, padding: '1px 4px', borderRadius: 4, border: '1px solid var(--border-primary)', outline: 'none', fontFamily: 'inherit', color: 'var(--text-primary)', background: 'transparent' }} />
         ) : (
-          <span onClick={() => canEdit && setEditingName(true)} style={{ flex: 1, fontSize: sz.name, fontWeight: 600, color: compact ? 'var(--text-secondary)' : 'var(--text-primary)', cursor: canEdit ? 'text' : 'default' }}>{bag.name}</span>
+          <button type="button" disabled={!canEdit} onClick={() => setEditingName(true)}
+            style={{ flex: 1, fontSize: sz.name, fontWeight: 600, color: compact ? 'var(--text-secondary)' : 'var(--text-primary)', cursor: canEdit ? 'text' : 'default', background: 'none', border: 'none', padding: 0, textAlign: 'left', fontFamily: 'inherit' }}>{bag.name}</button>
         )}
         <span style={{ fontSize: sz.weight, color: 'var(--text-faint)', fontWeight: 500, display: 'inline-flex', alignItems: 'center', gap: 3 }}>
           {totalWeight >= 1000 ? `${(totalWeight / 1000).toFixed(1)} kg` : `${totalWeight} g`}
@@ -74,10 +75,10 @@ export function BagCard({ bag, bagItems, totalWeight, pct, tripId, tripMembers,
               <span>kg</span>
             </>
           ) : bag.weight_limit_grams ? (
-            <span onClick={() => canEdit && setEditingLimit(true)} title={t('packing.bagLimit')}
-              style={{ cursor: canEdit ? 'text' : 'default' }}>
+            <button type="button" disabled={!canEdit} onClick={() => setEditingLimit(true)} title={t('packing.bagLimit')}
+              style={{ cursor: canEdit ? 'text' : 'default', background: 'none', border: 'none', padding: 0, fontFamily: 'inherit', fontSize: 'inherit' }}>
               / {(bag.weight_limit_grams / 1000).toFixed(1)} kg
-            </span>
+            </button>
           ) : canEdit ? (
             <button type="button" onClick={() => setEditingLimit(true)} title={t('packing.bagLimit')}
               style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer', color: 'var(--text-faint)', fontSize: sz.count, fontFamily: 'inherit', textDecoration: 'underline dotted' }}>
@@ -89,17 +90,22 @@ export function BagCard({ bag, bagItems, totalWeight, pct, tripId, tripMembers,
       </div>
       {/* Members */}
       <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginBottom: 4, flexWrap: 'wrap', position: 'relative' }}>
-        {(bag.members || []).map(m => (
-          <span key={m.user_id} title={m.username} onClick={() => canEdit && toggleMember(m.user_id)} style={{ cursor: canEdit ? 'pointer' : 'default', display: 'inline-flex' }}>
-            {m.avatar ? (
-              <img src={m.avatar} alt={m.username} style={{ width: sz.avatar, height: sz.avatar, borderRadius: '50%', objectFit: 'cover', border: `1.5px solid ${bag.color}`, boxSizing: 'border-box' }} />
-            ) : (
-              <span style={{ width: sz.avatar, height: sz.avatar, borderRadius: '50%', background: bag.color + '25', color: bag.color, fontSize: sz.avatar * 0.45, fontWeight: 700, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', border: `1.5px solid ${bag.color}`, boxSizing: 'border-box' }}>
-                {m.username[0].toUpperCase()}
-              </span>
-            )}
-          </span>
-        ))}
+        {(bag.members || []).map(m => {
+          const face = m.avatar ? (
+            <img src={m.avatar} alt={m.username} style={{ width: sz.avatar, height: sz.avatar, borderRadius: '50%', objectFit: 'cover', border: `1.5px solid ${bag.color}`, boxSizing: 'border-box' }} />
+          ) : (
+            <span style={{ width: sz.avatar, height: sz.avatar, borderRadius: '50%', background: bag.color + '25', color: bag.color, fontSize: sz.avatar * 0.45, fontWeight: 700, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', border: `1.5px solid ${bag.color}`, boxSizing: 'border-box' }}>
+              {m.username[0].toUpperCase()}
+            </span>
+          )
+          if (!canEdit) return <span key={m.user_id} title={m.username} style={{ display: 'inline-flex' }}>{face}</span>
+          return (
+            <button type="button" key={m.user_id} title={m.username} aria-label={m.username} onClick={() => toggleMember(m.user_id)}
+              style={{ cursor: 'pointer', display: 'inline-flex', background: 'none', border: 'none', padding: 0 }}>
+              {face}
+            </button>
+          )
+        })}
         {canEdit && (
           <button type="button" onClick={() => setShowUserPicker(v => !v)} style={{ width: sz.avatar, height: sz.avatar, borderRadius: '50%', border: '1.5px dashed var(--border-primary)', background: 'none', color: 'var(--text-faint)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 0, boxSizing: 'border-box' }}>
             <Plus size={sz.avatar * 0.5} />

client/src/components/Packing/PackingListPanelBagModal.tsx

@@ -15,8 +15,13 @@ export function BagModal(S: PackingState) {
   const heaviestBagWeight = Math.max(...bags.map(b => myItems.filter(i => i.bag_id === b.id).reduce((s, i) => s + itemWeight(i), 0)), 1)
   return (
     <div style={{ position: 'fixed', inset: 0, zIndex: 100, background: 'rgba(0,0,0,0.3)', display: 'flex', alignItems: 'flex-start', justifyContent: 'center', padding: 20, paddingTop: 140, paddingBottom: 'calc(20px + var(--bottom-nav-h))', overflowY: 'auto' }}
-      onClick={() => setShowBagModal(false)}>
-      <div style={{ background: 'var(--bg-card)', borderRadius: 16, width: '100%', maxWidth: 360, maxHeight: 'calc(100vh - 80px)', overflow: 'auto', padding: 20, boxShadow: '0 16px 48px rgba(0,0,0,0.15)', flexShrink: 0 }}
+      role="button" tabIndex={0} aria-label={t('common.close')}
+      onClick={() => setShowBagModal(false)}
+      onKeyDown={e => {
+        if (e.target !== e.currentTarget) return
+        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setShowBagModal(false) }
+      }}>
+      <div role="presentation" style={{ background: 'var(--bg-card)', borderRadius: 16, width: '100%', maxWidth: 360, maxHeight: 'calc(100vh - 80px)', overflow: 'auto', padding: 20, boxShadow: '0 16px 48px rgba(0,0,0,0.15)', flexShrink: 0 }}
         onClick={e => e.stopPropagation()}>
         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
           <h3 style={{ margin: 0, fontSize: 'calc(16px * var(--fs-scale-subtitle, 1))', fontWeight: 700, color: 'var(--text-primary)' }}>{t('packing.bags')}</h3>

client/src/components/Packing/PackingListPanelCategoryGroup.test.tsx

@@ -377,7 +377,10 @@ describe('KategorieGruppe — assignees', () => {
     })
     fireEvent.click(container.querySelector('svg.lucide-user-plus')!.closest('button')!)
 
-    fireEvent.click(within(screen.getByRole('button', { name: /alice/ })).getByText('alice').closest('button')!)
+    // Scoped to the dropdown: an assigned member also has a chip button carrying
+    // their name, so an unscoped role query matches two elements.
+    const dropdown = within(container.querySelector('svg.lucide-user-plus')!.closest('div')!)
+    fireEvent.click(dropdown.getByRole('button', { name: /alice/ }))
 
     expect(onSetAssignees).toHaveBeenCalledWith('Gear', [1])
   })
@@ -388,8 +391,9 @@ describe('KategorieGruppe — assignees', () => {
       assignees: [{ user_id: 1, username: 'owner' }],
     })
     fireEvent.click(container.querySelector('svg.lucide-user-plus')!.closest('button')!)
-    const assigned = screen.getByRole('button', { name: /owner/ })
-    const free = screen.getByRole('button', { name: /alice/ })
+    const dropdown = within(container.querySelector('svg.lucide-user-plus')!.closest('div')!)
+    const assigned = dropdown.getByRole('button', { name: /owner/ })
+    const free = dropdown.getByRole('button', { name: /alice/ })
 
     fireEvent.mouseEnter(free)
     expect(free.style.background).toBe('var(--bg-tertiary)')

client/src/components/Packing/PackingListPanelCategoryGroup.tsx

@@ -137,32 +137,43 @@ export function KategorieGruppe({ kategorie, items, tripId, allCategories, onRen
 
         {/* Assignee chips */}
         <div style={{ display: 'flex', alignItems: 'center', gap: 3, flex: 1, minWidth: 0, marginLeft: 4 }}>
-          {assignees.map(a => (
-            <div key={a.user_id} style={{ position: 'relative' }}
-              onClick={e => { e.stopPropagation(); if (canEdit) onSetAssignees(kategorie, assignees.filter(x => x.user_id !== a.user_id).map(x => x.user_id)) }}
-            >
-              <div className="assignee-chip"
-                style={{
-                  width: 22, height: 22, borderRadius: '50%', flexShrink: 0, cursor: canEdit ? 'pointer' : 'default',
-                  background: `hsl(${a.username.charCodeAt(0) * 37 % 360}, 55%, 55%)`,
-                  display: 'flex', alignItems: 'center', justifyContent: 'center',
-                  fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 700, color: 'white', textTransform: 'uppercase',
-                  border: '2px solid var(--bg-card)', transition: 'opacity 0.15s',
-                }}
+          {assignees.map(a => {
+            // The chip is only ever clickable for an editor, so read-only members
+            // get the plain div back rather than a focusable stop that does nothing.
+            const chip = (
+              <>
+                <div className="assignee-chip"
+                  style={{
+                    width: 22, height: 22, borderRadius: '50%', flexShrink: 0, cursor: canEdit ? 'pointer' : 'default',
+                    background: `hsl(${(a.username.codePointAt(0) ?? 0) * 37 % 360}, 55%, 55%)`,
+                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 700, color: 'white', textTransform: 'uppercase',
+                    border: '2px solid var(--bg-card)', transition: 'opacity 0.15s',
+                  }}
+                >
+                  {a.username[0]}
+                </div>
+                <div className="assignee-tooltip" style={{
+                  position: 'absolute', top: '100%', left: '50%', transform: 'translateX(-50%)',
+                  marginTop: 6, padding: '3px 8px', borderRadius: 6, zIndex: 60,
+                  background: 'var(--text-primary)', color: 'var(--bg-primary)',
+                  fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 600, whiteSpace: 'nowrap',
+                  pointerEvents: 'none', opacity: 0, transition: 'opacity 0.15s',
+                }}>
+                  {a.username}
+                </div>
+              </>
+            )
+            if (!canEdit) return <div key={a.user_id} style={{ position: 'relative' }}>{chip}</div>
+            return (
+              <button type="button" key={a.user_id}
+                style={{ position: 'relative', background: 'none', border: 'none', padding: 0, font: 'inherit', cursor: 'pointer' }}
+                onClick={e => { e.stopPropagation(); onSetAssignees(kategorie, assignees.filter(x => x.user_id !== a.user_id).map(x => x.user_id)) }}
               >
-                {a.username[0]}
-              </div>
-              <div className="assignee-tooltip" style={{
-                position: 'absolute', top: '100%', left: '50%', transform: 'translateX(-50%)',
-                marginTop: 6, padding: '3px 8px', borderRadius: 6, zIndex: 60,
-                background: 'var(--text-primary)', color: 'var(--bg-primary)',
-                fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 600, whiteSpace: 'nowrap',
-                pointerEvents: 'none', opacity: 0, transition: 'opacity 0.15s',
-              }}>
-                {a.username}
-              </div>
-            </div>
-          ))}
+                {chip}
+              </button>
+            )
+          })}
           {canEdit && (
           <div ref={assigneeDropdownRef} style={{ position: 'relative' }}>
             <button type="button" onClick={e => { e.stopPropagation(); setShowAssigneeDropdown(v => !v) }}
@@ -204,7 +215,7 @@ export function KategorieGruppe({ kategorie, items, tripId, allCategories, onRen
                     >
                       <div style={{
                         width: 20, height: 20, borderRadius: '50%', flexShrink: 0,
-                        background: `hsl(${m.username.charCodeAt(0) * 37 % 360}, 55%, 55%)`,
+                        background: `hsl(${(m.username.codePointAt(0) ?? 0) * 37 % 360}, 55%, 55%)`,
                         display: 'flex', alignItems: 'center', justifyContent: 'center',
                         fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 700, color: 'white', textTransform: 'uppercase',
                       }}>
@@ -244,7 +255,7 @@ export function KategorieGruppe({ kategorie, items, tripId, allCategories, onRen
             const rect = menuBtnRef.current?.getBoundingClientRect();
             return (
             <>
-              <div style={{ position: 'fixed', inset: 0, zIndex: 99 }} onClick={() => setShowMenu(false)} />
+              <div role="presentation" style={{ position: 'fixed', inset: 0, zIndex: 99 }} onClick={() => setShowMenu(false)} />
               <div style={{ position: 'fixed', right: rect ? window.innerWidth - rect.right : 0, top: rect ? rect.bottom + 4 : 0, zIndex: 100, background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 10, boxShadow: '0 4px 16px rgba(0,0,0,0.1)', padding: 4, minWidth: 170 }}>
                 {canEdit && <MenuItem icon={<Pencil size={13} />} label={t('packing.menuRename')} onClick={() => { setEditingName(true); setShowMenu(false) }} />}
                 <MenuItem icon={<CheckCheck size={13} />} label={t('packing.menuCheckAll')} onClick={() => { handleCheckAll(); setShowMenu(false) }} />

client/src/components/Packing/PackingListPanelImportModal.tsx

@@ -9,12 +9,12 @@ export function BulkImportModal(S: PackingState) {
       position: 'fixed', inset: 0, zIndex: 1000,
       display: 'flex', alignItems: 'center', justifyContent: 'center',
       background: 'rgba(0,0,0,0.3)', backdropFilter: 'blur(3px)',
-    }} onClick={() => setShowImportModal(false)}>
+    }} role="presentation" onClick={e => { if (e.target === e.currentTarget) setShowImportModal(false) }}>
       <div style={{
         width: 420, maxHeight: '80vh', background: 'var(--bg-card)', borderRadius: 16,
         boxShadow: '0 16px 48px rgba(0,0,0,0.22)', padding: '22px 22px 18px',
         display: 'flex', flexDirection: 'column', gap: 14,
-      }} onClick={e => e.stopPropagation()}>
+      }}>
         <div style={{ fontSize: 'calc(15px * var(--fs-scale-subtitle, 1))', fontWeight: 600, color: 'var(--text-primary)' }}>{t('packing.importTitle')}</div>
         <div style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-faint)', lineHeight: 1.5 }}>{t('packing.importHint')}</div>
         <div style={{ display: 'flex', border: '1px solid var(--border-primary)', borderRadius: 10, overflow: 'hidden', background: 'var(--bg-input)' }}>

client/src/components/Packing/PackingListPanelItemRow.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState, type ReactNode } from 'react'
+import { useRef, useState, type CSSProperties, type ReactNode } from 'react'
 import { useTripStore } from '../../store/tripStore'
 import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'
@@ -94,6 +94,17 @@ export function ArtikelZeile({ item, tripId, categories, onCategoryChange: _onCa
   const canDrag = canEdit && !isPlaceholder && !!drag
   const selectedBag = bags.find(b => b.id === item.bag_id)
 
+  // Shared by both shells of the name: a renameable name is a real button so
+  // the rename can be reached with the keyboard, everything else is plain text.
+  const nameStyle: CSSProperties = {
+    flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+    fontSize: 'calc(13.5px * var(--fs-scale-body, 1))',
+    cursor: !canEdit || item.checked ? 'default' : 'text',
+    color: isPlaceholder ? 'var(--text-faint)' : (item.checked ? 'var(--text-faint)' : 'var(--text-primary)'),
+    transition: 'color 200ms cubic-bezier(0.23,1,0.32,1)',
+    textDecoration: item.checked ? 'line-through' : 'none',
+  }
+
   return (
     <div
       className="group packing-item-row"
@@ -151,19 +162,17 @@ export function ArtikelZeile({ item, tripId, categories, onCategoryChange: _onCa
           onKeyDown={e => { if (e.key === 'Enter') handleSaveName(); if (e.key === 'Escape') { setEditing(false); setEditName(isPlaceholder ? '' : item.name) } }}
           style={{ flex: 1, minWidth: 0, fontSize: 'calc(13.5px * var(--fs-scale-body, 1))', padding: '2px 8px', borderRadius: 6, border: '1px solid var(--border-primary)', outline: 'none', fontFamily: 'inherit' }}
         />
-      ) : (
-        <span
-          onClick={() => canEdit && !item.checked && setEditing(true)}
-          style={{
-            flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
-            fontSize: 'calc(13.5px * var(--fs-scale-body, 1))',
-            cursor: !canEdit || item.checked ? 'default' : 'text',
-            color: isPlaceholder ? 'var(--text-faint)' : (item.checked ? 'var(--text-faint)' : 'var(--text-primary)'),
-            transition: 'color 200ms cubic-bezier(0.23,1,0.32,1)',
-            textDecoration: item.checked ? 'line-through' : 'none',
-          }}
+      ) : canEdit && !item.checked ? (
+        <button
+          type="button"
+          onClick={() => setEditing(true)}
+          style={{ ...nameStyle, border: 'none', background: 'none', padding: 0, textAlign: 'left', fontFamily: 'inherit' }}
         >
           {item.name}
+        </button>
+      ) : (
+        <span style={nameStyle}>
+          {item.name}
         </span>
       )}
 
@@ -356,7 +365,7 @@ export function ArtikelZeile({ item, tripId, categories, onCategoryChange: _onCa
             const rect = itemMenuBtnRef.current?.getBoundingClientRect()
             return (
               <>
-                <div style={{ position: 'fixed', inset: 0, zIndex: 1098 }} onClick={() => { setShowItemMenu(false); setShowMenuCategories(false) }} />
+                <div role="presentation" style={{ position: 'fixed', inset: 0, zIndex: 1098 }} onClick={() => { setShowItemMenu(false); setShowMenuCategories(false) }} />
                 <div className="trek-menu-enter" style={{
                   position: 'fixed',
                   right: rect ? Math.max(8, window.innerWidth - rect.right) : 8,

client/src/components/Packing/PackingListPanelViewTabs.tsx

@@ -20,7 +20,7 @@ export function PackingViewTabs(S: PackingState) {
   const viewPill = (id: 'common' | 'personal', icon: React.ReactNode, label: string, count: number) => {
     const active = view === id
     return (
-      <button onClick={() => setView(id)} style={{
+      <button type="button" onClick={() => setView(id)} style={{
         ...pillBase,
         background: active ? 'var(--text-primary)' : 'transparent',
         borderColor: active ? 'var(--text-primary)' : 'var(--border-primary)',
@@ -39,7 +39,7 @@ export function PackingViewTabs(S: PackingState) {
   const filterPill = (id: string, label: string) => {
     const active = filter === id
     return (
-      <button key={id} onClick={() => setFilter(id)} style={{
+      <button type="button" key={id} onClick={() => setFilter(id)} style={{
         ...pillBase, gap: 0, border: '1px solid transparent', fontWeight: active ? 600 : 400,
         background: active ? 'var(--text-primary)' : 'transparent',
         color: active ? 'var(--bg-primary)' : 'var(--text-muted)',

client/src/components/Packing/PackingShareControl.tsx

@@ -80,7 +80,7 @@ export default function PackingShareControl({ item, tripMembers, currentUserId,
       </button>
       {open && pos && createPortal(
         <>
-          <div style={{ position: 'fixed', inset: 0, zIndex: 1099 }} onClick={() => setOpen(false)} />
+          <div role="presentation" style={{ position: 'fixed', inset: 0, zIndex: 1099 }} onClick={() => setOpen(false)} />
           <div style={{
             position: 'fixed', top: pos.top, right: pos.right, zIndex: 1100,
             background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 10,
@@ -101,7 +101,7 @@ export default function PackingShareControl({ item, tripMembers, currentUserId,
                   style={{ display: 'flex', alignItems: 'center', gap: 8, width: '100%', padding: '6px 10px', borderRadius: 7, border: 'none', cursor: 'pointer', background: 'none', fontFamily: 'inherit', fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-primary)' }}
                   onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-tertiary)'}
                   onMouseLeave={e => e.currentTarget.style.background = 'none'}>
-                  <span style={{ width: 18, height: 18, borderRadius: '50%', flexShrink: 0, background: `hsl(${m.username.charCodeAt(0) * 37 % 360}, 55%, 55%)`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 700, color: 'white', textTransform: 'uppercase' }}>{m.username[0]}</span>
+                  <span style={{ width: 18, height: 18, borderRadius: '50%', flexShrink: 0, background: `hsl(${(m.username.codePointAt(0) ?? 0) * 37 % 360}, 55%, 55%)`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 700, color: 'white', textTransform: 'uppercase' }}>{m.username[0]}</span>
                   <span style={{ flex: 1, textAlign: 'left', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.username}</span>
                   {on && <Check size={13} className="text-content-muted" />}
                 </button>

client/src/components/Packing/packingListPanel.helpers.ts

@@ -6,7 +6,7 @@ export function katColor(kat: string, allCategories?: string[]): string {
   if (idx >= 0) return KAT_COLORS[idx % KAT_COLORS.length]
   // Fallback: hash-based
   let h = 0
-  for (let i = 0; i < kat.length; i++) h = ((h << 5) - h + kat.charCodeAt(i)) | 0
+  for (let i = 0; i < kat.length; i++) h = ((h << 5) - h + (kat.codePointAt(i) ?? 0)) | 0
   return KAT_COLORS[Math.abs(h) % KAT_COLORS.length]
 }