@exxatdesignux/ui 0.2.16 → 0.2.17

package/template/components/site-header.tsx

@@ -12,7 +12,12 @@
  */
 
 import * as React from "react"
-import Link from "next/link"
+import {
+  PageBreadcrumbBack,
+  PageBreadcrumbTrail,
+  type PageBreadcrumbBackProps,
+  type PageBreadcrumbTrailItem,
+} from "@/components/page-breadcrumb-trail"
 import { Separator } from "@/components/ui/separator"
 import { SidebarTrigger } from "@/components/ui/sidebar"
 import { Kbd, KbdGroup } from "@/components/ui/kbd"
@@ -25,19 +30,26 @@ import { AskLeoToggle } from "@/components/ask-leo-sidebar"
 import { useModKeyLabel } from "@/hooks/use-mod-key-label"
 import { cn } from "@/lib/utils"
 
-export interface BreadcrumbItem {
-  label: string
-  href?: string
-}
+export type BreadcrumbItem = PageBreadcrumbTrailItem
+export type SiteHeaderBackLink = Pick<PageBreadcrumbBackProps, "label" | "href">
 
 export interface SiteHeaderProps {
-  /** Current page title (last breadcrumb segment) */
+  /** Current page title (last breadcrumb segment in trail mode). */
   title?: string
   /** Full breadcrumb trail — each item can be a link or plain text. Title is appended automatically as the last segment. */
   breadcrumbs?: BreadcrumbItem[]
+  /**
+   * Back-icon variant — parent link only (no `title` segment in the header).
+   * Prefer when the page `<h1>` carries the current title (e.g. New question composer).
+   */
+  back?: SiteHeaderBackLink
 }
 
-export function SiteHeader({ title = "Dashboard", breadcrumbs }: SiteHeaderProps) {
+export function SiteHeader({
+  title = "Dashboard",
+  breadcrumbs,
+  back,
+}: SiteHeaderProps) {
   const mod = useModKeyLabel()
   const [isStuck, setIsStuck] = React.useState(false)
 
@@ -51,7 +63,13 @@ export function SiteHeader({ title = "Dashboard", breadcrumbs }: SiteHeaderProps
   return (
     <div
       className={cn(
-        "sticky top-0 z-60 transition-colors",
+        // Sticky page chrome sits BELOW every Radix overlay (DropdownMenu /
+        // Popover / Select / Dialog / Sheet / Tooltip / Drawer all render at
+        // z-50). Previously `z-60` here caused the school/product switcher
+        // dropdown to open behind the breadcrumb. `z-30` keeps the header
+        // above page content (charts, tables, scrolled rows) but below
+        // floating overlays.
+        "sticky top-0 z-30 transition-colors",
         isStuck ? "bg-sidebar border-b border-border" : "bg-transparent",
       )}
     >
@@ -78,29 +96,16 @@ export function SiteHeader({ title = "Dashboard", breadcrumbs }: SiteHeaderProps
           className="mx-2 data-[orientation=vertical]:h-4 data-[orientation=vertical]:self-auto"
         />
 
-        {/* Breadcrumb trail */}
-        <nav aria-label="Breadcrumb" className="flex items-center gap-1.5 min-w-0 overflow-hidden">
-          {breadcrumbs?.map((crumb, i) => (
-            <span key={i} className="flex items-center gap-1.5 shrink-0">
-              {crumb.href ? (
-                <Link
-                  href={crumb.href}
-                  className="font-sans text-sm text-muted-foreground hover:text-interactive-hover-foreground transition-colors tracking-normal"
-                >
-                  {crumb.label}
-                </Link>
-              ) : (
-                <span className="font-sans text-sm text-muted-foreground tracking-normal">
-                  {crumb.label}
-                </span>
-              )}
-              <i className="fa-light fa-chevron-right text-xs text-muted-foreground/50" aria-hidden="true" />
-            </span>
-          ))}
-          <span className="font-sans text-sm font-medium text-foreground tracking-normal truncate">
-            {title}
-          </span>
-        </nav>
+        {back ? (
+          <PageBreadcrumbBack {...back} className="min-w-0 flex-1" />
+        ) : (
+          <PageBreadcrumbTrail
+            variant="header"
+            items={breadcrumbs}
+            currentPage={title}
+            className="flex-1"
+          />
+        )}
 
         <div className="ml-auto shrink-0">
           <AskLeoToggle />

package/template/components/sites-list-view.tsx

@@ -3,45 +3,40 @@
 import Link from "next/link"
 import type { SiteDirectoryRow } from "@/lib/mock/sites-directory"
 import { ListPageBoardCard } from "@/components/data-views/list-page-board-card"
+import { DataRowList } from "@/components/data-views/data-row-list"
 
 export function SitesListView({ rows }: { rows: SiteDirectoryRow[] }) {
-  if (rows.length === 0) {
-    return (
-      <div className="px-4 py-16 text-center lg:px-6">
-        <p className="text-sm text-muted-foreground">No sites match your search.</p>
-      </div>
-    )
-  }
-
   return (
-    <ul className="flex list-none flex-col gap-2 px-4 pb-8 pt-2 lg:px-6">
-      {rows.map(site => (
-        <li key={site.id}>
-          <Link
-            href={site.url}
-            className="block rounded-xl text-inherit no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    <DataRowList<SiteDirectoryRow>
+      rows={rows}
+      getRowId={site => site.id}
+      emptyState="No sites match your search."
+      ariaLabel="Sites"
+      renderRow={site => (
+        <Link
+          href={site.url}
+          className="block rounded-xl text-inherit no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <ListPageBoardCard
+            layout="row"
+            interactive
+            rowContainerClassName="flex flex-row items-center gap-3"
+            leading={
+              <span className="inline-flex size-9 shrink-0 items-center justify-center rounded-md bg-brand/10 text-brand">
+                <i className="fa-light fa-hospital text-sm" aria-hidden="true" />
+              </span>
+            }
+            rowEnd={
+              <i className="fa-light fa-chevron-right text-xs text-muted-foreground" aria-hidden="true" />
+            }
           >
-            <ListPageBoardCard
-              layout="row"
-              interactive
-              rowContainerClassName="flex flex-row items-center gap-3"
-              leading={
-                <span className="inline-flex size-9 shrink-0 items-center justify-center rounded-md bg-brand/10 text-brand">
-                  <i className="fa-light fa-hospital text-sm" aria-hidden="true" />
-                </span>
-              }
-              rowEnd={
-                <i className="fa-light fa-chevron-right text-xs text-muted-foreground" aria-hidden="true" />
-              }
-            >
-              <div className="space-y-0.5">
-                <p className="truncate text-sm font-semibold text-foreground">{site.name}</p>
-                <p className="truncate text-xs text-muted-foreground">{site.id}</p>
-              </div>
-            </ListPageBoardCard>
-          </Link>
-        </li>
-      ))}
-    </ul>
+            <div className="space-y-0.5">
+              <p className="truncate text-sm font-semibold text-foreground">{site.name}</p>
+              <p className="truncate text-xs text-muted-foreground">{site.id}</p>
+            </div>
+          </ListPageBoardCard>
+        </Link>
+      )}
+    />
   )
 }

package/template/components/sites-table.tsx

@@ -10,6 +10,7 @@ import Link from "next/link"
 import type { SiteDirectoryRow } from "@/lib/mock/sites-directory"
 import { DataTable, DataTableToolbar } from "@/components/data-table"
 import { useTableState } from "@/components/data-table/use-table-state"
+import { useTableStateLifecycle } from "@/lib/table-state-lifecycle"
 import type { ColumnDef } from "@/components/data-table/types"
 import type { DataListViewType } from "@/lib/data-list-view"
 import type { OpenTablePropertiesHandle } from "@/lib/list-page-table-properties"
@@ -193,6 +194,25 @@ export const SitesTable = React.forwardRef<
 
   const tableState = useTableState<SiteDirectoryRow>(sites, columns, { key: "name", dir: "asc" })
 
+  // Persist this hub's table lifecycle (sort / search / filters / column
+  // visibility / etc.) to localStorage. See `lib/table-state-lifecycle`.
+  const lifecycleColumnKeys = React.useMemo(
+    () => new Set(columns.map(c => c.key)),
+    [columns],
+  )
+  useTableStateLifecycle({
+    namespace: "sites",
+    tabId: "main",
+    tableState,
+    columnKeys: lifecycleColumnKeys,
+    extras: { conditionalRules },
+    onLoadExtras: e => {
+      if (e && Array.isArray(e.conditionalRules)) {
+        setConditionalRules(e.conditionalRules as ConditionalRule[])
+      }
+    },
+  })
+
   React.useImperativeHandle(
     ref,
     () => ({
@@ -200,6 +220,10 @@ export const SitesTable = React.forwardRef<
         tableState.setSheetOpen(true)
       },
     }),
+    // `tableState` is freshly returned each render by useTableState; depending
+    // on it would re-create the imperative handle on every render. Only the
+    // React setter is needed (and is referentially stable).
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [tableState.setSheetOpen],
   )
 

package/template/components/table-properties/drawer.tsx

@@ -250,7 +250,7 @@ export function TablePropertiesDrawer({
         showOverlay={false}
         // w-[min(20rem,calc(100vw-1rem))]: cap to viewport width - 1rem at narrow/zoomed viewports
         // so the drawer never overflows horizontally. Use 100svh so height is correct on mobile.
-        className="w-[min(20rem,calc(100vw-1rem))] p-0 gap-0 flex flex-col border border-border shadow-xl rounded-xl overflow-hidden"
+        className="z-[80] w-[min(20rem,calc(100vw-1rem))] p-0 gap-0 flex flex-col border border-border shadow-xl rounded-xl overflow-hidden"
         style={{ top: "0.5rem", bottom: "0.5rem", right: "0.5rem", height: "calc(100svh - 1rem)" }}
       >
 

package/template/components/team-client.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 /**
- * Team page — primary list template: ListPageTemplate + KeyMetrics + TeamTable (same composition as DataListClient).
+ * Team page — primary list template: ListPageTemplate + KeyMetrics + TeamTable (same composition as PlacementsClient).
  * Imports from `@/components/data-views` for shared list-page + view types.
  */
 

package/template/components/team-list-view.tsx

@@ -2,11 +2,13 @@
 
 /**
  * TeamListView — full-width rows for team roster (same data as DataTable / board).
+ * Shell from generic `DataRowList`; row body stays team-specific (avatar,
+ * name, role, email, status badge).
  */
 
-import * as React from "react"
 import { ListHubStatusBadge } from "@/components/list-hub-status-badge"
 import { ListPageBoardCard, ListPageBoardCardAvatar } from "@/components/data-views/list-page-board-card"
+import { DataRowList } from "@/components/data-views/data-row-list"
 import {
   TEAM_MEMBER_STATUS_BADGE_CLASS,
   TEAM_MEMBER_STATUS_ICON,
@@ -14,42 +16,6 @@ import {
 } from "@/lib/list-status-badges"
 import type { TeamMember } from "@/lib/mock/team"
 
-function TeamListRow({
-  member,
-  onRowActivate,
-}: {
-  member: TeamMember
-  onRowActivate?: (member: TeamMember) => void
-}) {
-  return (
-    <li>
-      <ListPageBoardCard
-        layout="row"
-        rowContainerClassName="flex flex-row items-center gap-3"
-        onClick={onRowActivate ? () => onRowActivate(member) : undefined}
-        leading={<ListPageBoardCardAvatar initials={member.initials} className="size-9" />}
-        rowEnd={
-          <div className="flex shrink-0 items-center gap-2">
-            <ListHubStatusBadge
-              surface="board"
-              label={TEAM_MEMBER_STATUS_LABEL[member.status]}
-              tintClassName={TEAM_MEMBER_STATUS_BADGE_CLASS[member.status]}
-              icon={TEAM_MEMBER_STATUS_ICON[member.status]}
-            />
-            <i className="fa-light fa-chevron-right text-xs text-muted-foreground" aria-hidden="true" />
-          </div>
-        }
-      >
-        <div className="space-y-0.5">
-          <p className="truncate text-sm font-semibold text-foreground">{member.name}</p>
-          <p className="text-xs text-muted-foreground">{member.role}</p>
-          <p className="truncate text-xs text-muted-foreground">{member.email}</p>
-        </div>
-      </ListPageBoardCard>
-    </li>
-  )
-}
-
 export function TeamListView({
   members,
   onRowActivate,
@@ -57,19 +23,37 @@ export function TeamListView({
   members: TeamMember[]
   onRowActivate?: (member: TeamMember) => void
 }) {
-  if (members.length === 0) {
-    return (
-      <div className="px-4 py-16 text-center lg:px-6">
-        <p className="text-sm text-muted-foreground">No team members match your filters.</p>
-      </div>
-    )
-  }
-
   return (
-    <ul className="flex list-none flex-col gap-2 px-4 pb-8 pt-2 lg:px-6">
-      {members.map(m => (
-        <TeamListRow key={m.id} member={m} onRowActivate={onRowActivate} />
-      ))}
-    </ul>
+    <DataRowList<TeamMember>
+      rows={members}
+      getRowId={m => m.id}
+      emptyState="No team members match your filters."
+      ariaLabel="Team members"
+      renderRow={member => (
+        <ListPageBoardCard
+          layout="row"
+          rowContainerClassName="flex flex-row items-center gap-3"
+          onClick={onRowActivate ? () => onRowActivate(member) : undefined}
+          leading={<ListPageBoardCardAvatar initials={member.initials} className="size-9" />}
+          rowEnd={
+            <div className="flex shrink-0 items-center gap-2">
+              <ListHubStatusBadge
+                surface="board"
+                label={TEAM_MEMBER_STATUS_LABEL[member.status]}
+                tintClassName={TEAM_MEMBER_STATUS_BADGE_CLASS[member.status]}
+                icon={TEAM_MEMBER_STATUS_ICON[member.status]}
+              />
+              <i className="fa-light fa-chevron-right text-xs text-muted-foreground" aria-hidden="true" />
+            </div>
+          }
+        >
+          <div className="space-y-0.5">
+            <p className="truncate text-sm font-semibold text-foreground">{member.name}</p>
+            <p className="text-xs text-muted-foreground">{member.role}</p>
+            <p className="truncate text-xs text-muted-foreground">{member.email}</p>
+          </div>
+        </ListPageBoardCard>
+      )}
+    />
   )
 }

package/template/components/team-table.tsx

@@ -13,6 +13,7 @@ import {
   TEAM_MEMBER_STATUS_ICON,
   TEAM_MEMBER_STATUS_LABEL,
 } from "@/lib/list-status-badges"
+import { mailtoHref } from "@/lib/mailto"
 import type { TeamMember } from "@/lib/mock/team"
 import { DataTable, DataTableToolbar } from "@/components/data-table"
 import {
@@ -37,6 +38,7 @@ import type { DataListViewType } from "@/lib/data-list-view"
 import type { OpenTablePropertiesHandle } from "@/lib/list-page-table-properties"
 import type { ColumnDef } from "@/components/data-table/types"
 import { useTableState } from "@/components/data-table/use-table-state"
+import { useTableStateLifecycle } from "@/lib/table-state-lifecycle"
 import { TablePropertiesDrawerButton } from "@/components/table-properties"
 import type { ConditionalRule, FilterFieldDef, FilterOperator } from "@/components/table-properties/types"
 import { ListHubStatusBadge } from "@/components/list-hub-status-badge"
@@ -154,7 +156,7 @@ function TeamFinderDetail({
               <i className="fa-light fa-envelope text-[10px]" aria-hidden="true" /> Email
             </dt>
             <dd className="text-[13px]">
-              <a href={`mailto:${member.email}`} className="text-interactive-foreground hover:underline">{member.email}</a>
+              <a href={mailtoHref(member.email)} className="text-interactive-foreground hover:underline">{member.email}</a>
             </dd>
           </div>
           <div className="flex flex-col gap-0.5">
@@ -277,7 +279,7 @@ function buildTeamColumns(members: TeamMember[]): ColumnDef<TeamMember>[] {
         operators: ["contains", "not_contains"],
       },
       cell: row => (
-        <a href={`mailto:${row.email}`} className="text-sm text-primary hover:underline truncate block">
+        <a href={mailtoHref(row.email)} className="text-sm text-primary hover:underline truncate block">
           {row.email}
         </a>
       ),
@@ -341,7 +343,7 @@ function buildTeamColumns(members: TeamMember[]): ColumnDef<TeamMember>[] {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
-              <DropdownMenuItem onClick={() => window.open(`mailto:${row.email}`)}>
+              <DropdownMenuItem onClick={() => window.open(mailtoHref(row.email))}>
                 <i className="fa-light fa-envelope" aria-hidden="true" />
                 Email
               </DropdownMenuItem>
@@ -400,6 +402,26 @@ export const TeamTable = React.forwardRef<
 
   const tableState = useTableState(members, columns, { key: "name", dir: "asc" })
 
+  // Persist this hub's table lifecycle (sort / search / filters / column
+  // visibility / etc.) to localStorage. See `lib/table-state-lifecycle` for
+  // the centralised hook; pass `extras` for any non-table state.
+  const lifecycleColumnKeys = React.useMemo(
+    () => new Set(columns.map(c => c.key)),
+    [columns],
+  )
+  useTableStateLifecycle({
+    namespace: "team",
+    tabId: "main",
+    tableState,
+    columnKeys: lifecycleColumnKeys,
+    extras: { conditionalRules },
+    onLoadExtras: e => {
+      if (e && Array.isArray(e.conditionalRules)) {
+        setConditionalRules(e.conditionalRules as ConditionalRule[])
+      }
+    },
+  })
+
   const dashboardKpi = React.useMemo(
     () => ({
       metrics: teamKpiMetrics(tableState.rows),
@@ -501,6 +523,10 @@ export const TeamTable = React.forwardRef<
     openPropertiesDrawer: () => {
       tableState.setSheetOpen(true)
     },
+  // `tableState` is freshly returned each render by useTableState; depending on
+  // it would re-create the imperative handle on every render. Only the React
+  // setter is needed (and is referentially stable).
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }), [tableState.setSheetOpen])
 
   const teamPanelFinderGroups = React.useMemo(

package/template/components/templates/nested-secondary-panel-shell.tsx

@@ -34,10 +34,16 @@ export function NestedSecondaryPanelShell({
         "transition-[width,margin,opacity] duration-200 ease-linear",
         open
           ? cn(
+              // Match the primary sidebar: fill the full viewport height
+              // (minus our 0.5rem top + 0.5rem bottom margin from `m-2` →
+              // 1rem on desktop where the panel is `md:sticky md:top-2`;
+              // 2rem on mobile where the panel scrolls inline and we leave
+              // a little more breathing room). No upper cap so tall screens
+              // get a fully-extended rail.
               "shrink-0 m-2 mx-2 rounded-xl ring-1 ring-border shadow-sm relative md:sticky md:top-2 bg-[var(--secondary-panel-bg)]",
               compact
-                ? "w-12 min-w-12 max-w-12 h-[min(calc(100svh-2rem),800px)] md:h-[min(calc(100svh-1rem),800px)]"
-                : "w-64 min-w-64 max-w-64 h-[min(calc(100svh-2rem),800px)] md:h-[min(calc(100svh-1rem),800px)]",
+                ? "w-12 min-w-12 max-w-12 h-[calc(100svh-2rem)] md:h-[calc(100svh-1rem)]"
+                : "w-64 min-w-64 max-w-64 h-[calc(100svh-2rem)] md:h-[calc(100svh-1rem)]",
             )
           : "h-0 min-h-0 shrink overflow-hidden border-0 p-0 m-0 min-w-0 w-0 max-w-0 opacity-0 pointer-events-none",
         className,

package/template/components/ui/dot-pattern.tsx

@@ -37,8 +37,32 @@ type Cloud = {
   delay: number
 }
 
-function rand(min: number, max: number) {
-  return min + Math.random() * (max - min)
+/**
+ * Tiny deterministic PRNG (mulberry32). We use a seeded RNG instead of
+ * `Math.random()` so the SVG attributes emitted on the server match the
+ * client's first paint — otherwise React reports a hydration mismatch and
+ * has to re-paint every drifting `<motion.circle>` on mount, which is both
+ * a perf cost and a visible jump.
+ */
+function mulberry32(seed: number): () => number {
+  let s = seed >>> 0
+  return () => {
+    s = (s + 0x6d2b79f5) >>> 0
+    let t = s
+    t = Math.imul(t ^ (t >>> 15), t | 1)
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61)
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
+  }
+}
+
+function hashString(str: string): number {
+  // Cheap FNV-1a-style hash. Stable across SSR + CSR for the same input.
+  let h = 2166136261
+  for (let i = 0; i < str.length; i++) {
+    h ^= str.charCodeAt(i)
+    h = Math.imul(h, 16777619)
+  }
+  return h >>> 0
 }
 
 export function DotPattern({
@@ -59,33 +83,33 @@ export function DotPattern({
   const maskId = `${id}-mask`
   const gradId = `${id}-grad`
 
-  const clouds = React.useMemo<Cloud[]>(
-    () =>
-      Array.from({ length: glowCount }).map((_, i) => {
-        // Drift diagonally: bottom-right → top-left. Start/end partly off-canvas
-        // so the cloud enters and exits softly without a visible edge.
-        const startX = rand(85, 120)
-        const endX = rand(-20, 15)
-        const midX = (startX + endX) / 2 + rand(-6, 6)
+  const clouds = React.useMemo<Cloud[]>(() => {
+    const rng = mulberry32(hashString(`${id}|${glowCount}`))
+    const rand = (min: number, max: number) => min + rng() * (max - min)
+    return Array.from({ length: glowCount }).map((_, i) => {
+      // Drift diagonally: bottom-right → top-left. Start/end partly off-canvas
+      // so the cloud enters and exits softly without a visible edge.
+      const startX = rand(85, 120)
+      const endX = rand(-20, 15)
+      const midX = (startX + endX) / 2 + rand(-6, 6)
 
-        const startY = rand(85, 115)
-        const endY = rand(-15, 10)
-        const midY = (startY + endY) / 2 + rand(-4, 4)
+      const startY = rand(85, 115)
+      const endY = rand(-15, 10)
+      const midY = (startY + endY) / 2 + rand(-4, 4)
 
-        const duration = rand(8, 12)
-        // Offset clouds by half a cycle so one is arriving as the other leaves.
-        const delay = -(i / glowCount) * duration
+      const duration = rand(8, 12)
+      // Offset clouds by half a cycle so one is arriving as the other leaves.
+      const delay = -(i / glowCount) * duration
 
-        return {
-          key: i,
-          xs: [`${startX}%`, `${midX}%`, `${endX}%`],
-          ys: [`${startY}%`, `${midY}%`, `${endY}%`],
-          duration,
-          delay,
-        }
-      }),
-    [glowCount],
-  )
+      return {
+        key: i,
+        xs: [`${startX}%`, `${midX}%`, `${endX}%`],
+        ys: [`${startY}%`, `${midY}%`, `${endY}%`],
+        duration,
+        delay,
+      }
+    })
+  }, [glowCount, id])
 
   return (
     <svg

package/template/components/ui/leo-icon.tsx

@@ -618,14 +618,34 @@ function InteractiveIcon({ sz, reduced }: { sz: SZ; reduced: boolean }) {
   const onDown = React.useCallback(() => setPressed(true), [])
   const onUp = React.useCallback(() => setPressed(false), [])
 
+  // Track click-effect timers so unmounting (Ask Leo sidebar close) doesn't
+  // leave timers running that then call setState on an unmounted component.
+  const clickTimersRef = React.useRef<Set<ReturnType<typeof setTimeout>>>(new Set())
+  React.useEffect(() => {
+    const set = clickTimersRef.current
+    return () => {
+      for (const t of set) clearTimeout(t)
+      set.clear()
+    }
+  }, [])
+
+  const ringIdRef = React.useRef(0)
   const onClick = React.useCallback(() => {
     if (reduced) return
     setCast(true)
-    setTimeout(() => setCast(false), 720)
+    const tCast = setTimeout(() => {
+      clickTimersRef.current.delete(tCast)
+      setCast(false)
+    }, 720)
+    clickTimersRef.current.add(tCast)
 
-    const id = Date.now() + Math.random()
+    const id = ++ringIdRef.current
     setRings(prev => [...prev, id])
-    setTimeout(() => setRings(prev => prev.filter(r => r !== id)), 800)
+    const tRing = setTimeout(() => {
+      clickTimersRef.current.delete(tRing)
+      setRings(prev => prev.filter(r => r !== id))
+    }, 800)
+    clickTimersRef.current.add(tRing)
 
     spawnBurst(6)
   }, [reduced, spawnBurst])