@allbluecn/web-app 0.18.2 → 0.19.0

package/src/components/layout/sidebar-03/user-menu.tsx

@@ -45,7 +45,7 @@ import { signOut, useSession } from "@/lib/auth/auth-client";
 import { useRouter, useMatches } from "@tanstack/react-router";
 import { getQueryClient } from "@/lib/query-client-seam";
 import { UserAvatar } from "@/components/shared-kit";
-import type { AvatarConfig, ShapeType } from "@allbluecn/kernel";
+import type { AvatarConfig } from "@allbluecn/kernel";
 import { SparklesText } from "@/components/magicui/sparkles-text";
 import { m } from "@/paraglide/messages.js";
 
@@ -59,7 +59,7 @@ export function UserMenu() {
   const matches = useMatches();
 
   const navMatch = matches.find((m) => m.routeId === '/_nav');
-  const contextSession = navMatch?.context?.session as { user?: { id?: string; email?: string; name?: string | null; role?: string; image?: string | null; avatarConfig?: AvatarConfig; bgShape?: ShapeType; bgColor?: string } } | null;
+  const contextSession = navMatch?.context?.session as { user?: { id?: string; email?: string; name?: string | null; role?: string; image?: string | null; avatarConfig?: AvatarConfig; bgShape?: string | null; bgColor?: string } } | null;
   const session = clientSession || contextSession;
 
   const user = session?.user;
@@ -68,7 +68,7 @@ export function UserMenu() {
   const userRole = (user as { role?: string })?.role;
   const isAdmin = userRole === "ADMIN" || userRole === "SUPER_ADMIN";
   const avatarConfig = (user as { avatarConfig?: AvatarConfig })?.avatarConfig;
-  const bgShape = (user as { bgShape?: string })?.bgShape as ShapeType | undefined;
+  const bgShape = (user as { bgShape?: string })?.bgShape;
   const bgColor = (user as { bgColor?: string })?.bgColor;
   const userImage = user?.image;
   const isGuest = (user as { isGuest?: boolean })?.isGuest === true;

package/src/components/project/create-project-dialog.tsx

@@ -172,7 +172,7 @@ export function CreateProjectDialog({
 
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogContent className="sm:max-w-260 -mt-50">
+      <DialogContent className="sm:max-w-[min(65rem,calc(100%-4rem))] max-w-[calc(100%-4rem)] max-h-[calc(100dvh-2rem)] [@media(min-height:64rem)]:-mt-50 overflow-y-auto">
         <DialogHeader>
           <DialogTitle className="text-xl">{editMode ? m.projects_project_edit_title() : m.projects_project_create_title()}</DialogTitle>
         </DialogHeader>

package/src/components/project/invite-member-dialog.tsx

@@ -178,7 +178,7 @@ export function InviteMemberDialog({
                     <UserAvatar
                       name={member.username}
                       avatarConfig={member.avatarConfig as any}
-                      bgShape={member.bgShape as any}
+                      bgShape={member.bgShape}
                       bgColor={member.bgColor}
                       imageUrl={undefined}
                       size="sm"

package/src/components/project/project-activity-list.tsx

@@ -15,7 +15,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 import { UserAvatar } from "@/components/shared-kit";
-import type { AvatarConfig, ShapeType } from "@allbluecn/kernel";
+import type { AvatarConfig } from "@allbluecn/kernel";
 import { cn } from "@/lib/utils";
 import { useTimezone } from "@/providers/timezone-provider";
 import type { ProjectActivity } from "@/types/project";
@@ -87,7 +87,7 @@ export function ProjectActivityList({
             <UserAvatar
               name={activity.user?.username}
               avatarConfig={activity.user?.avatarConfig as AvatarConfig | undefined}
-              bgShape={activity.user?.bgShape as ShapeType | undefined}
+              bgShape={activity.user?.bgShape}
               bgColor={activity.user?.bgColor ?? undefined}
               size="md"
             />

package/src/components/project/project-member-manager.tsx

@@ -30,7 +30,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { ConfirmDialog } from "@/components/confirm-dialog";
 import { UserAvatar } from "@/components/shared-kit";
-import type { AvatarConfig, ShapeType } from "@allbluecn/kernel";
+import type { AvatarConfig } from "@allbluecn/kernel";
 import { InviteMemberDialog } from "./invite-member-dialog";
 import {
   removeProjectMemberFn,
@@ -137,7 +137,7 @@ export function ProjectMemberManager({
               <UserAvatar
                 name={member.user?.username}
                 avatarConfig={member.user?.avatarConfig as AvatarConfig | undefined}
-                bgShape={member.user?.bgShape as ShapeType | undefined}
+                bgShape={member.user?.bgShape}
                 bgColor={member.user?.bgColor ?? undefined}
                 size="lg"
               />

package/src/components/reui/__tests__/kanban-drop-indicator.test.ts

@@ -0,0 +1,88 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+// 落点指示器 store 的关键契约：
+// ① 非目标列恒取到 null（引用稳定 → 不触发列内容重渲染，这是大看板不卡的前提）
+// ② onDragMove 每帧写值，同值必须不通知
+import { describe, expect, it, vi } from "vitest";
+import { createDropIndicatorStore } from "../kanban";
+
+const state = (container: string, insertIndex: number, height = 100) => ({
+  container,
+  insertIndex,
+  sourceContainer: "src",
+  sourceIndex: 0,
+  height,
+  itemId: "drag-1",
+  overItemKey: "s-target",
+});
+
+describe("createDropIndicatorStore", () => {
+  it("按列取用：只有目标列拿到视图，其余列为稳定 null", () => {
+    const store = createDropIndicatorStore();
+    expect(store.getForColumn("a")).toBeNull();
+
+    store.set(state("a", 1));
+    expect(store.getForColumn("a")).toEqual({
+      insertIndex: 1,
+      height: 100,
+      itemId: "drag-1",
+      overItemKey: "s-target",
+    });
+    expect(store.getForColumn("b")).toBeNull();
+    // 同一列重复读取必须是同一引用（useSyncExternalStore 的快照契约）
+    expect(store.getForColumn("a")).toBe(store.getForColumn("a"));
+  });
+
+  it("同值写入不通知（onDragMove 每帧调用）", () => {
+    const store = createDropIndicatorStore();
+    const listener = vi.fn();
+    store.subscribe(listener);
+
+    store.set(state("a", 1));
+    expect(listener).toHaveBeenCalledTimes(1);
+
+    store.set(state("a", 1));
+    expect(listener).toHaveBeenCalledTimes(1);
+
+    store.set(state("a", 2));
+    expect(listener).toHaveBeenCalledTimes(2);
+  });
+
+  it("切换目标列与清空：通知一次并让旧列回落为 null", () => {
+    const store = createDropIndicatorStore();
+    const listener = vi.fn();
+    store.subscribe(listener);
+
+    store.set(state("a", 1));
+    store.set(state("b", 0));
+    expect(store.getForColumn("a")).toBeNull();
+    expect(store.getForColumn("b")).toEqual({
+      insertIndex: 0,
+      height: 100,
+      itemId: "drag-1",
+      overItemKey: "s-target",
+    });
+
+    store.set(null);
+    expect(store.getForColumn("b")).toBeNull();
+    expect(listener).toHaveBeenCalledTimes(3);
+
+    store.set(null);
+    expect(listener).toHaveBeenCalledTimes(3);
+  });
+});

package/src/components/reui/__tests__/kanban-keyboard.test.ts

@@ -0,0 +1,262 @@
+import { KeyboardCode, type ClientRect, type SensorContext, type UniqueIdentifier } from "@dnd-kit/core"
+import { describe, expect, it, vi } from "vitest"
+
+import {
+  makeKanbanKeyboardCoordinateGetter,
+  resolveKeyboardMove,
+} from "../kanban-keyboard"
+
+// #470：上游 KeyboardSensor 对视口外目标「只滚动容器、return 不下发 move」，
+// translate 型碰撞检测对滚动不变，over 永不更新 → 窄屏键盘拖列原地踏步。
+// 这里锁定修复后的契约：move 恒下发、位移不做滚动折算、列拖拽只在列候选中选目标。
+
+function rect(left: number, top: number, width = 288, height = 600): ClientRect {
+  return { left, top, right: left + width, bottom: top + height, width, height } as ClientRect
+}
+
+function keyboardEvent(code: string): KeyboardEvent {
+  return { code, type: "keydown", preventDefault: () => {} } as unknown as KeyboardEvent
+}
+
+// SensorContext 字段远多于被测路径所需，测试只构造被消费的字段
+function fakeContext(overrides: {
+  activeId?: UniqueIdentifier
+  collisionRect?: ClientRect | null
+  containers?: Array<Record<string, unknown>>
+  rects?: Map<UniqueIdentifier, ClientRect>
+  overId?: UniqueIdentifier | null
+  scrollableAncestors?: Element[]
+}): SensorContext {
+  const containers = overrides.containers ?? []
+  const registry = {
+    getEnabled: () => containers,
+    get: (id: UniqueIdentifier) => containers.find((c) => c.id === id) ?? null,
+  }
+  return {
+    active: { id: overrides.activeId ?? "col-a", data: { current: {} } },
+    collisionRect: overrides.collisionRect ?? null,
+    droppableRects: overrides.rects ?? new Map(),
+    droppableContainers: registry,
+    over: overrides.overId != null ? { id: overrides.overId } : null,
+    scrollableAncestors: overrides.scrollableAncestors ?? [],
+    activatorEvent: null,
+    activeNode: null,
+    collisions: null,
+    draggableNodes: { registered: [] },
+    draggingNode: null,
+    draggingNodeRect: null,
+    scrollAdjustedTranslate: null,
+  } as unknown as SensorContext
+}
+
+function sortableEntry(id: string, containerId: string, index: number) {
+  return {
+    id,
+    disabled: false,
+    // 上游委托路径会读 node.current 并取其滚动祖先，须为真实元素
+    node: { current: document.createElement("div") },
+    data: { current: { sortable: { containerId, index } } },
+  }
+}
+
+describe("resolveKeyboardMove", () => {
+  it("end/cancel 键返回终止/取消决策", () => {
+    const context = fakeContext({ collisionRect: rect(0, 0) })
+    expect(
+      resolveKeyboardMove({ event: keyboardEvent(KeyboardCode.Space), active: "col-a", context, referenceCoordinates: null }).kind
+    ).toBe("end")
+    expect(
+      resolveKeyboardMove({ event: keyboardEvent(KeyboardCode.Enter), active: "col-a", context, referenceCoordinates: null }).kind
+    ).toBe("end")
+    expect(
+      resolveKeyboardMove({ event: keyboardEvent(KeyboardCode.Tab), active: "col-a", context, referenceCoordinates: null }).kind
+    ).toBe("end")
+    expect(
+      resolveKeyboardMove({ event: keyboardEvent(KeyboardCode.Esc), active: "col-a", context, referenceCoordinates: null }).kind
+    ).toBe("cancel")
+  })
+
+  it("非方向键走默认 getter 得到 ignore", () => {
+    const context = fakeContext({ collisionRect: rect(0, 0) })
+    const decision = resolveKeyboardMove({
+      event: keyboardEvent("KeyA"),
+      active: "col-a",
+      context,
+      referenceCoordinates: null,
+    })
+    expect(decision.kind).toBe("ignore")
+  })
+
+  it("首按时 reference 取当前位置，位移为目标的完整增量（无滚动折算）", () => {
+    const context = fakeContext({ collisionRect: rect(16, 100) })
+    const target = { x: 316, y: 100 }
+    const decision = resolveKeyboardMove({
+      event: keyboardEvent(KeyboardCode.Right),
+      active: "col-a",
+      options: { coordinateGetter: () => target },
+      context,
+      referenceCoordinates: null,
+    })
+    expect(decision).toEqual({
+      kind: "move",
+      coordinates: { x: 300, y: 0 },
+      referenceCoordinates: { x: 16, y: 100 },
+    })
+  })
+
+  it("后续按键相对既有 reference 计算绝对位移，且绝不因滚动吞掉 move", () => {
+    const context = fakeContext({ collisionRect: rect(16, 100) })
+    // 上游此处会返回 undefined（scroll-only 分支）；修复后必须返回完整增量
+    const decision = resolveKeyboardMove({
+      event: keyboardEvent(KeyboardCode.Right),
+      active: "col-a",
+      options: { coordinateGetter: () => ({ x: 616, y: 100 }) },
+      context,
+      referenceCoordinates: { x: 16, y: 100 },
+    })
+    expect(decision).toEqual({
+      kind: "move",
+      coordinates: { x: 600, y: 0 },
+      referenceCoordinates: { x: 16, y: 100 },
+    })
+  })
+
+  it("默认 getter 沿上游 25px 步进", () => {
+    const decision = resolveKeyboardMove({
+      event: keyboardEvent(KeyboardCode.Right),
+      active: "card-1",
+      context: fakeContext({ collisionRect: rect(0, 0) }),
+      referenceCoordinates: null,
+    })
+    expect(decision.kind === "move" && decision.coordinates).toEqual({ x: 25, y: 0 })
+  })
+})
+
+describe("makeKanbanKeyboardCoordinateGetter", () => {
+  const isColumnId = (id: UniqueIdentifier) => ["col-a", "col-b", "col-c"].includes(id as string)
+  const getter = makeKanbanKeyboardCoordinateGetter(isColumnId)
+
+  it("列拖拽只在列候选中选目标：更近的卡片角不参与", () => {
+    // card-1 与 col-b 左边对齐、top 更近（角距离 0 < 300），若未过滤卡片将胜出
+    const containers = [
+      sortableEntry("col-a", "board", 0),
+      sortableEntry("col-b", "board", 1),
+      sortableEntry("col-c", "board", 2),
+      sortableEntry("card-1", "col-b", 0),
+    ]
+    const rects = new Map<UniqueIdentifier, ClientRect>([
+      ["col-a", rect(0, 0)],
+      ["col-b", rect(300, 0)],
+      ["col-c", rect(600, 0)],
+      ["card-1", rect(300, 0, 272, 100)],
+    ])
+    const context = fakeContext({
+      collisionRect: rect(0, 0),
+      containers,
+      rects,
+    })
+    const result = getter(keyboardEvent(KeyboardCode.Right), {
+      active: "col-a",
+      currentCoordinates: { x: 0, y: 0 },
+      context,
+    })
+    expect(result).toEqual({ x: 300, y: 0 })
+  })
+
+  it("目标与 over 相同且存在次优候选时切到次优（上游同款规则）", () => {
+    const containers = [
+      sortableEntry("col-a", "board", 0),
+      sortableEntry("col-b", "board", 1),
+      sortableEntry("col-c", "board", 2),
+    ]
+    const rects = new Map<UniqueIdentifier, ClientRect>([
+      ["col-a", rect(0, 0)],
+      ["col-b", rect(300, 0)],
+      ["col-c", rect(600, 0)],
+    ])
+    const context = fakeContext({ collisionRect: rect(0, 0), containers, rects, overId: "col-b" })
+    const result = getter(keyboardEvent(KeyboardCode.Right), {
+      active: "col-a",
+      currentCoordinates: { x: 0, y: 0 },
+      context,
+    })
+    expect(result).toEqual({ x: 600, y: 0 })
+  })
+
+  it("卡片拖拽委托上游 getter：同列内取相邻卡", () => {
+    const containers = [
+      sortableEntry("card-0", "col-b", 0),
+      sortableEntry("card-1", "col-b", 1),
+      sortableEntry("card-2", "col-b", 2),
+    ]
+    const rects = new Map<UniqueIdentifier, ClientRect>([
+      ["card-0", rect(300, 0, 272, 100)],
+      ["card-1", rect(300, 108, 272, 100)],
+      ["card-2", rect(300, 216, 272, 100)],
+    ])
+    const context = fakeContext({
+      activeId: "card-1",
+      collisionRect: rect(300, 108, 272, 100),
+      containers,
+      rects,
+    })
+    const result = getter(keyboardEvent(KeyboardCode.Down), {
+      active: "card-1",
+      currentCoordinates: { x: 300, y: 108 },
+      context,
+    })
+    expect(result).toEqual({ x: 300, y: 216 })
+  })
+
+  it("方向上无候选返回 undefined（不位移）", () => {
+    const containers = [sortableEntry("col-a", "board", 0)]
+    const rects = new Map<UniqueIdentifier, ClientRect>([["col-a", rect(0, 0)]])
+    const context = fakeContext({ collisionRect: rect(0, 0), containers, rects })
+    const result = getter(keyboardEvent(KeyboardCode.Right), {
+      active: "col-a",
+      currentCoordinates: { x: 0, y: 0 },
+      context,
+    })
+    expect(result).toBeUndefined()
+  })
+
+  it("非方向键返回 undefined", () => {
+    const context = fakeContext({ collisionRect: rect(0, 0) })
+    const result = getter(keyboardEvent("KeyA"), {
+      active: "col-a",
+      currentCoordinates: { x: 0, y: 0 },
+      context,
+    })
+    expect(result).toBeUndefined()
+  })
+})
+
+// 防回归哨兵：滚动分支已从传感器删除，resolveKeyboardMove 不得引入任何滚动副作用
+describe("resolveKeyboardMove 无滚动副作用", () => {
+  it("不消费 scrollableAncestors、不调用 scrollBy", () => {
+    const scrollBy = vi.fn()
+    const scrollContainer = {
+      scrollLeft: 0,
+      scrollTop: 0,
+      scrollWidth: 1488,
+      scrollHeight: 600,
+      clientWidth: 800,
+      clientHeight: 600,
+      getBoundingClientRect: () => ({ left: 16, top: 0, right: 816, bottom: 600, width: 800, height: 600 }),
+      scrollBy,
+    }
+    const context = fakeContext({
+      collisionRect: rect(16, 0),
+      scrollableAncestors: [scrollContainer as unknown as Element],
+    })
+    const decision = resolveKeyboardMove({
+      event: keyboardEvent(KeyboardCode.Right),
+      active: "col-a",
+      options: { coordinateGetter: () => ({ x: 616, y: 0 }) },
+      context,
+      referenceCoordinates: null,
+    })
+    expect(decision.kind).toBe("move")
+    expect(scrollBy).not.toHaveBeenCalled()
+  })
+})

package/src/components/reui/event-calendar/event-calendar-agenda-view.tsx

@@ -0,0 +1,236 @@
+import { useMemo } from "react"
+import {
+  EventCalendarViewContext,
+  useEventCalendar,
+  useEventCalendarSelector,
+  useEventCalendarSettings,
+  useEventCalendarViewConfig,
+} from "@/components/reui/event-calendar/event-calendar"
+import { EventCalendarEvent } from "@/components/reui/event-calendar/event-calendar-event"
+import {
+  getDayKey,
+  getRangeKey,
+  toZoned,
+  zonedStartOfDay,
+} from "@/components/reui/event-calendar/event-calendar-lib"
+import type {
+  EventCalendarDateRange,
+  EventCalendarSegment,
+} from "@/components/reui/event-calendar/event-calendar-types"
+import { IconStack } from "@/components/reui/icon-stack"
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { addDays, format } from "date-fns"
+
+import { cn } from "cn"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { CalendarIcon } from "lucide-react"
+
+// The agenda window length is the agendaDayCount SETTING (the store derives
+// visibleRange from it); a per-view prop here would silently disagree.
+type EventCalendarAgendaViewProps = useRender.ComponentProps<"div">
+
+function EventCalendarAgendaView({
+  className,
+  render,
+  ...props
+}: EventCalendarAgendaViewProps) {
+  const instance = useEventCalendar()
+  const settings = useEventCalendarSettings()
+  const viewConfig = useEventCalendarViewConfig()
+  const visibleRange = useEventCalendarSelector<
+    unknown,
+    EventCalendarDateRange
+  >((state) => state.visibleRange, {
+    isEqual: (a, b) => getRangeKey(a) === getRangeKey(b),
+  })
+  // The index rebuilds whenever the events change, so its identity is the
+  // subscription. Read it here, not in render: React Compiler caches a bare
+  // getIndex() on the stable `instance`, and an edit never repainted a row.
+  const index = useEventCalendarSelector(() => instance.internals.getIndex())
+
+  const days = useMemo(() => {
+    const result: Date[] = []
+    let cursor = zonedStartOfDay(visibleRange.start, settings.timeZone)
+    while (cursor < visibleRange.end) {
+      result.push(cursor)
+      cursor = zonedStartOfDay(
+        addDays(toZoned(cursor, settings.timeZone), 1),
+        settings.timeZone
+      )
+    }
+    return result
+  }, [visibleRange, settings.timeZone])
+
+  const groups = days
+    .map((day) => ({
+      day,
+      bucket: index.byDay.get(getDayKey(day, settings.timeZone)),
+    }))
+    .filter((group) => {
+      const total =
+        (group.bucket?.allDay.length ?? 0) + (group.bucket?.timed.length ?? 0)
+      return total > 0
+    })
+
+  const isToday = (day: Date) =>
+    getDayKey(day, settings.timeZone) ===
+    getDayKey(new Date(), settings.timeZone)
+
+  const native = viewConfig.scrollbars === "native"
+
+  const body = (
+    <>
+      {groups.length === 0 ? (
+        <div
+          data-slot="event-calendar-no-events"
+          className={cn(
+            "flex min-h-72 flex-col items-center justify-center gap-4 py-16",
+            viewConfig.classNames?.noEvents
+          )}
+        >
+          {viewConfig.renderNoEvents?.() ?? (
+            <>
+              <IconStack>
+                <CalendarIcon className="size-5" aria-hidden="true" />
+              </IconStack>
+              <span className="text-muted-foreground text-sm">
+                {settings.i18n.labels.noEvents}
+              </span>
+            </>
+          )}
+        </div>
+      ) : (
+        // Drop the very last row's bottom border so it does not double up with
+        // the calendar container's own bottom border. Targets the last day
+        // group's last child (its last agenda item); per-item `border-b` is
+        // kept everywhere else, including each day's internal rows.
+        <div className="flex flex-col [&>*:last-child>*:last-child]:border-b-0">
+          {groups.map(({ day, bucket }) => {
+            const items = [...(bucket?.allDay ?? []), ...(bucket?.timed ?? [])]
+            const zoned = toZoned(day, settings.timeZone)
+            const weekday = format(zoned, "EEEE", { locale: settings.locale })
+            const dayDate = format(zoned, "MMMM d, yyyy", {
+              locale: settings.locale,
+            })
+            return (
+              <div
+                key={day.getTime()}
+                data-slot="event-calendar-agenda-day"
+                data-today={isToday(day) || undefined}
+                // A named group per day so a screen reader can step day by day
+                // (and hear how full one is) instead of arrowing every row.
+                role="group"
+                aria-label={`${weekday}, ${dayDate}, ${settings.i18n.labels.events(items.length)}`}
+              >
+                {/* Group header: weekday (leading) + full date (trailing) */}
+                <div
+                  data-slot="event-calendar-agenda-day-header"
+                  // The day bar is the agenda's only structure, so give it a
+                  // heading level: the H key and the rotor can jump between
+                  // days, which is the whole point of a long agenda.
+                  role="heading"
+                  aria-level={3}
+                  className={cn(
+                    "bg-muted/60 sticky top-0 z-10 flex items-baseline justify-between gap-4 border-b px-4 py-2",
+                    // The custom ScrollArea's overlay scrollbar (w-2.5 = 10px)
+                    // is painted UNDER this sticky, z-10, opaque header, so the
+                    // thumb vanishes behind the day bar at the top of the view.
+                    // Inset the header by the scrollbar lane so its background
+                    // stops before the scrollbar instead of covering it. Native
+                    // scrollbars already sit outside the content box, so this
+                    // only applies to the custom-scrollbar path.
+                    !native && "me-2.5",
+                    viewConfig.classNames?.agendaDayHeader
+                  )}
+                >
+                  <span
+                    className={cn(
+                      "text-foreground font-semibold",
+                      isToday(day) && "text-primary"
+                    )}
+                  >
+                    {weekday}
+                  </span>
+                  <span className="text-muted-foreground font-medium tabular-nums">
+                    {dayDate}
+                  </span>
+                </div>
+                {items.map((segment) => (
+                  <EventCalendarAgendaItem
+                    key={segment.occurrence.key}
+                    segment={segment}
+                  />
+                ))}
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </>
+  )
+
+  const defaultProps = {
+    "data-slot": "event-calendar-agenda-view",
+    "data-view": "agenda",
+    // Unlike the grid views the agenda has no row/column semantics to carry a
+    // name, so label the region with the day range it covers - through
+    // formatDayRange, so a consumer override reaches it.
+    role: "group",
+    "aria-label": settings.i18n.functions.formatDayRange(visibleRange, {
+      locale: settings.locale,
+    }),
+    className: cn(
+      "flex min-h-0 flex-1 flex-col overflow-hidden border-t",
+      viewConfig.classNames?.agendaView,
+      className
+    ),
+    children: native ? (
+      <div
+        data-slot="scroll-area-viewport"
+        data-ec-native-scroll=""
+        className="h-full overflow-y-auto"
+      >
+        {body}
+      </div>
+    ) : (
+      <ScrollArea className="h-full">{body}</ScrollArea>
+    ),
+  }
+
+  return (
+    <EventCalendarViewContext.Provider value={{ view: "agenda" }}>
+      {useRender({
+        defaultTagName: "div",
+        render,
+        props: mergeProps<"div">(defaultProps, props),
+      })}
+    </EventCalendarViewContext.Provider>
+  )
+}
+
+/**
+ * One agenda row: a full-width, selectable table row - time column, color dot,
+ * and title (all replaceable via renderAgendaEvent). Clicking selects the
+ * event (drag/resize stay off in the agenda).
+ */
+function EventCalendarAgendaItem({
+  segment,
+}: {
+  segment: EventCalendarSegment
+}) {
+  const viewConfig = useEventCalendarViewConfig()
+  return (
+    <EventCalendarEvent
+      segment={segment}
+      className={cn(
+        // read-only list: hover only, no selected/focused styling on click
+        "hover:bg-accent/40 gap-3 rounded-none border-b px-4 py-2.5 transition-colors",
+        viewConfig.classNames?.agendaItem
+      )}
+    />
+  )
+}
+
+export { EventCalendarAgendaView }
+export type { EventCalendarAgendaViewProps }