@orbit-work/ui 0.1.0

package/src/components/composite/TranscriptDividers/TranscriptDividers.stories.tsx

@@ -0,0 +1,160 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { BackTop } from "../../primitives/BackTop"
+import { BranchDivider, CompressionDivider, DateDivider, JumpToLatest, UnreadDivider } from "./index"
+
+const meta = {
+  title: "Composite/TranscriptDividers",
+  component: DateDivider,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof DateDivider>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const Stream = ({ children }: { children: React.ReactNode }) => (
+  <div style={{ width: 520, maxWidth: "100%", background: "var(--ow-bg)", padding: 16 }}>{children}</div>
+)
+
+const Line = ({ text }: { text: string }) => (
+  <p style={{ margin: "8px 0", fontSize: "var(--ow-fs-ui, 13px)", color: "var(--ow-text-2)" }}>{text}</p>
+)
+
+export const Date_: Story = {
+  name: "DateDivider",
+  render: () => (
+    <Stream>
+      <Line text="昨天的最后一条消息。" />
+      <DateDivider label="2026-08-31" />
+      <Line text="今天的第一条消息。" />
+    </Stream>
+  ),
+}
+
+export const DateRelative: Story = {
+  name: "DateDivider · 相对日期",
+  render: () => (
+    <Stream>
+      <Line text="上面是更早的消息。" />
+      <DateDivider label="今天" />
+      <Line text="下面是今天的消息。" />
+    </Stream>
+  ),
+}
+
+export const Unread: Story = {
+  name: "UnreadDivider",
+  render: () => (
+    <Stream>
+      <Line text="你已经读过的消息。" />
+      <UnreadDivider />
+      <Line text="这条还没读。" />
+    </Stream>
+  ),
+}
+
+export const UnreadWithCount: Story = {
+  name: "UnreadDivider · 带计数",
+  render: () => (
+    <Stream>
+      <Line text="你已经读过的消息。" />
+      <UnreadDivider count={12} />
+      <Line text="这条还没读。" />
+    </Stream>
+  ),
+}
+
+export const Jump: Story = {
+  name: "JumpToLatest",
+  render: () => (
+    <div style={{ position: "relative", height: 200, background: "var(--ow-bg)", padding: 16 }}>
+      <Line text="会话内容区，浮钮贴底居中。" />
+      <JumpToLatest />
+    </div>
+  ),
+}
+
+export const JumpStates: Story = {
+  name: "JumpToLatest · 状态成行",
+  render: () => (
+    <div style={{ position: "relative", height: 220, background: "var(--ow-bg)", padding: 16 }}>
+      <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
+        <JumpToLatest className="static translate-x-0" />
+        <JumpToLatest className="static translate-x-0" count={9} />
+        <JumpToLatest className="static translate-x-0" disabled />
+      </div>
+      <p style={{ marginTop: 12, fontSize: "var(--ow-fs-ui, 13px)", color: "var(--ow-text-3)" }}>
+        默认 / 带未读计数 / 禁用。悬停与按下走弹层 pop 档。
+      </p>
+    </div>
+  ),
+}
+
+export const WithBackTop: Story = {
+  name: "与 BackTop 同族浮钮",
+  render: () => (
+    <div style={{ position: "relative", height: 240, background: "var(--ow-bg)", padding: 16 }}>
+      <Line text="BackTop 与 JumpToLatest 共用同一浮钮配方（弹层档），方向相反。" />
+      <BackTop alwaysVisible className="absolute right-6 bottom-6" />
+      <JumpToLatest />
+    </div>
+  ),
+}
+
+export const Compression: Story = {
+  name: "CompressionDivider",
+  render: () => (
+    <Stream>
+      <Line text="上面是压缩之前的对话。" />
+      <CompressionDivider count={18}>
+        <p style={{ margin: 0, fontSize: "var(--ow-fs-ui, 13px)", color: "var(--ow-text-2)" }}>
+          被折叠的 18 条消息摘要放在这里。
+        </p>
+      </CompressionDivider>
+      <Line text="下面接着往下聊。" />
+    </Stream>
+  ),
+}
+
+export const CompressionExpanded: Story = {
+  name: "CompressionDivider · 展开",
+  render: () => (
+    <Stream>
+      <CompressionDivider defaultExpanded count={18}>
+        <p style={{ margin: 0, fontSize: "var(--ow-fs-ui, 13px)", color: "var(--ow-text-2)" }}>
+          展开后详情区由宿主决定卡面；组件只负责边界行与展开语义。
+        </p>
+      </CompressionDivider>
+    </Stream>
+  ),
+}
+
+export const Branch: Story = {
+  name: "BranchDivider",
+  render: () => (
+    <Stream>
+      <BranchDivider sourceTitle="把设计规范同步到组件库（8 月 24 日）" />
+      <Line text="从这里开始是新分支的对话。" />
+    </Stream>
+  ),
+}
+
+export const DualTheme: Story = {
+  name: "双主题对照",
+  parameters: { layout: "fullscreen" },
+  render: () => (
+    <div style={{ display: "flex" }}>
+      {(["light", "dark"] as const).map((theme) => (
+        <div key={theme} data-theme={theme} style={{ flex: 1, background: "var(--ow-bg)", padding: 16 }}>
+          <DateDivider label="2026-08-31" />
+          <UnreadDivider count={12} />
+          <CompressionDivider count={18} />
+          <BranchDivider sourceTitle="来源会话标题" />
+          <div style={{ position: "relative", height: 72 }}>
+            <JumpToLatest count={3} />
+          </div>
+        </div>
+      ))}
+    </div>
+  ),
+}

package/src/components/composite/TranscriptDividers/TranscriptDividersSource.test.mjs

@@ -0,0 +1,90 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+const source = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
+/** 注释里点名退役写法是文档，不是用法——禁令只在剥掉注释的代码上验。 */
+const code = source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/^[ \t]*\/\/.*$/gm, "")
+
+test("三件合并到一处：DateDivider / UnreadDivider / JumpToLatest", () => {
+  assert.match(source, /export function DateDivider/)
+  assert.match(source, /export function UnreadDivider/)
+  assert.match(source, /export function JumpToLatest/)
+})
+
+test("DateDivider = 文字 + 双侧 1px --ow-border 线，日期作读数走 mono + tabular-nums", () => {
+  assert.match(source, /const dividerLineClass = "h-px flex-1 bg-\[var\(--ow-border\)\]"/)
+  assert.match(source, /data-slot="date-divider"[\s\S]*?font-\[family-name:var\(--ow-font-mono\)\] tabular-nums/)
+  assert.doesNotMatch(source, /data-slot="date-divider"[\s\S]*?--ow-eyebrow/)
+})
+
+test("UnreadDivider 走 info 族 --ow-unread，且 R1 双编码保留文字标签", () => {
+  assert.match(source, /bg-\[var\(--ow-unread\)\]/)
+  assert.match(source, /text-\[color:var\(--ow-unread\)\]/)
+  assert.match(source, /label = "未读消息"/)
+  assert.match(source, /data-ow-part="count"[\s\S]*?font-\[family-name:var\(--ow-font-mono\)\] tabular-nums/)
+})
+
+test("JumpToLatest 复用 BackTop 的弹层档浮钮配方，不自造立面", () => {
+  assert.match(source, /import \{ owFloatingActionClass \} from "\.\.\/\.\.\/primitives\/BackTop"/)
+  assert.match(source, /owFloatingActionClass,/)
+  // W3：§7 形状表——999 只留给带状态点/计数的 chip 与真圆形元素，动作钮落 8px 档。
+  assert.match(source, /\[border-radius:var\(--ow-radius-action\)\]/)
+  assert.doesNotMatch(code, /--ow-radius-pill/)
+  assert.match(source, /z-\[var\(--ow-z-sticky\)\]/)
+  assert.doesNotMatch(source, /shadow-ow-shadow-[23]|rounded-full/)
+})
+
+test("R3 中性件：分隔件与浮钮都不带信标/荧黄", () => {
+  assert.doesNotMatch(source, /var\(--ow-beacon|var\(--ow-accent-dot|var\(--ow-yellow/)
+})
+
+test("任意值 var() 全部带类型标注（防 tailwind-merge 吞类）", () => {
+  assert.doesNotMatch(source, /(?:text|border)-\[var\(--ow-/)
+  assert.doesNotMatch(source, /font-\[var\(--ow-font-/)
+})
+
+/* ── DS2 P5（批次③）：CompressionDivider / BranchDivider 续入本族 ── */
+
+test("批次③ 两件同族落地：CompressionDivider / BranchDivider", () => {
+  assert.match(source, /export function CompressionDivider/)
+  assert.match(source, /export function BranchDivider/)
+})
+
+test("两件与 DateDivider 同语法：双侧线复用 dividerLineClass，内容槽共享度量", () => {
+  const compression = source.slice(source.indexOf("export function CompressionDivider"))
+  assert.match(compression, /className=\{dividerLineClass\}/)
+  const branch = source.slice(source.indexOf("export function BranchDivider"))
+  assert.match(branch, /className=\{dividerLineClass\}/)
+  assert.match(source, /const dividerContentClass = \[/)
+})
+
+test("操作链接走 .ow-link（info 蓝），不再沿用 --ow-fg-link", () => {
+  assert.match(source, /data-ow-part="action" className="ow-link shrink-0"/)
+  assert.match(source, /data-ow-part="source"\s*\n\s*className="ow-link min-w-0 truncate"/)
+  assert.doesNotMatch(source, /var\(--ow-fg-link\)/)
+})
+
+test("CompressionDivider 展开态可访问：aria-expanded / aria-controls / hidden 齐备", () => {
+  assert.match(source, /aria-expanded=\{expanded\}/)
+  assert.match(source, /aria-controls=\{children != null \? detailsId : undefined\}/)
+  assert.match(source, /hidden=\{!expanded\}/)
+  assert.match(source, /role="region"/)
+})
+
+test("§6 状态：触发器 hover=--ow-hover→press=--ow-press，focus-visible 2px 环 + 2px 缝", () => {
+  assert.match(
+    source,
+    /hover:bg-\[var\(--ow-hover\)\] hover:text-\[color:var\(--ow-text-2\)\] active:bg-\[var\(--ow-press\)\]/,
+  )
+  assert.match(
+    source,
+    /focus-visible:\[outline:2px_solid_var\(--ow-focus-ring\)\] focus-visible:\[outline-offset:2px\]/,
+  )
+})
+
+test("§9 chevron 只转不移，走 ease-beacon", () => {
+  assert.match(source, /transition-transform duration-\[var\(--ow-dur-1\)\] ease-\[var\(--ow-ease-beacon\)\]/)
+  assert.match(source, /expanded \? "rotate-0" : "-rotate-90"/)
+  assert.doesNotMatch(source, /hover:(?:scale|translate)/)
+})

package/src/components/composite/TranscriptDividers/index.tsx

@@ -0,0 +1,352 @@
+"use client"
+
+import { type HTMLAttributes, type MouseEvent, type ReactNode, useCallback, useId, useState } from "react"
+import { cn } from "../../../lib/utils"
+import { owFloatingActionClass } from "../../primitives/BackTop"
+import { Button } from "../../primitives/Button"
+import { ArrowDown, Branch, ChevDown, Memo } from "../Icons"
+
+/**
+ * TranscriptDividers — 会话流分隔件（DS 2.0 模式件，蓝图批次② 合并件：
+ * DateDivider / UnreadDivider / JumpToLatest / BackTop；批次③ 续入
+ * CompressionDivider / BranchDivider）。
+ *
+ * R3 中性件：全族不带信标、不用荧黄，品牌感只来自字体、灰阶、间距。
+ * - DateDivider：文字 ＋ 双侧 1px --ow-border；日期是读数 → mono + tabular-nums。
+ * - UnreadDivider：info 族（--ow-unread）着色，R1 双编码——颜色之外必有「未读」文字，
+ *   未读不用荧黄（§4「其余角色永不荧黄：未读=info」）。
+ * - JumpToLatest：浮钮，立面走 §5 弹层档（配方 owFloatingActionClass，与 BackTop 同料）。
+ * - CompressionDivider：可展开的边界（图标＋文字＋操作链接＋chevron），双侧线同 DateDivider。
+ * - BranchDivider：分支来源边界（图标＋文字＋来源会话链接），双侧线同 DateDivider。
+ *
+ * 两件的操作链接口径照 ui-status-links 卡＝info 蓝＋下划线 offset 3px，直接套 `.ow-link`
+ * 工具类（旧 desktop-surfaces 的 `.compression-divider__action`/`.branch-divider__source`
+ * 走 `--ow-fg-link`，浅档解析为 navy 墨蓝，不是链接蓝——新件不再沿用）。
+ *
+ * 回到顶部浮钮见 primitives/BackTop——同一族浮钮，方向相反，配方共用。
+ */
+
+/* ───────────────────────── DateDivider ───────────────────────── */
+
+export interface DateDividerProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+  /** 日期文案，如「2026 年 8 月 31 日」「今天」 */
+  label: ReactNode
+  /** 供读屏使用的完整日期（默认取 label 的文本） */
+  "aria-label"?: string
+  className?: string
+}
+
+/** 线条几何与 primitives/Divider 一致（1px --ow-border 双侧撑满），标签改 mono 读数而非眉标。 */
+const dividerLineClass = "h-px flex-1 bg-[var(--ow-border)]"
+
+export function DateDivider({ label, className, ...rest }: DateDividerProps) {
+  return (
+    <div
+      data-slot="date-divider"
+      data-ow-part="divider"
+      role="separator"
+      aria-orientation="horizontal"
+      className={cn("flex w-full items-center gap-3 py-2", className)}
+      {...rest}
+    >
+      <span aria-hidden="true" className={dividerLineClass} />
+      <span
+        data-ow-part="label"
+        className={cn(
+          "whitespace-nowrap leading-none",
+          "text-[length:var(--ow-fs-ui)] text-[color:var(--ow-text-3)]",
+          "font-[family-name:var(--ow-font-mono)] tabular-nums",
+        )}
+      >
+        {label}
+      </span>
+      <span aria-hidden="true" className={dividerLineClass} />
+    </div>
+  )
+}
+
+/* ──────────────────────── UnreadDivider ──────────────────────── */
+
+export interface UnreadDividerProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+  /** 未读条数；给出时以 mono 读数追加在文字后 */
+  count?: number
+  /** 文字标签，默认「未读消息」；R1 要求颜色之外必须有文字编码，勿传空串 */
+  label?: string
+  className?: string
+}
+
+export function UnreadDivider({ count, label = "未读消息", className, ...rest }: UnreadDividerProps) {
+  return (
+    <div
+      data-slot="unread-divider"
+      data-ow-part="divider"
+      data-ow-state="unread"
+      role="separator"
+      aria-orientation="horizontal"
+      aria-label={count != null ? `${label} ${count}` : label}
+      className={cn("flex w-full items-center gap-3 py-2", className)}
+      {...rest}
+    >
+      <span aria-hidden="true" className="h-px flex-1 bg-[var(--ow-unread)]" />
+      <span
+        data-ow-part="label"
+        aria-hidden="true"
+        className={cn(
+          "inline-flex items-center gap-1.5 whitespace-nowrap leading-none",
+          "text-[length:var(--ow-fs-ui)] font-medium text-[color:var(--ow-unread)]",
+        )}
+      >
+        {label}
+        {count != null && (
+          <span data-ow-part="count" className="font-[family-name:var(--ow-font-mono)] tabular-nums font-normal">
+            {count}
+          </span>
+        )}
+      </span>
+      <span aria-hidden="true" className="h-px flex-1 bg-[var(--ow-unread)]" />
+    </div>
+  )
+}
+
+/* ──────────────────────── JumpToLatest ───────────────────────── */
+
+export interface JumpToLatestProps {
+  onClick?: () => void
+  /** 未读条数；给出时以 mono 读数显示在文案后 */
+  count?: number
+  /** 按钮文案，默认「跳到最新」（原型 template.dc.html:1424） */
+  label?: string
+  /** 不渲染（滚动已在底部时） */
+  hidden?: boolean
+  disabled?: boolean
+  className?: string
+}
+
+/**
+ * 跳到最新浮钮：立面 §5 弹层档（popover-bg ＋ 1px border ＋ shadow-pop，hover/press 走 pop 档），
+ * --ow-radius-action(8) 圆角、高 32（控件档），z=--ow-z-sticky。默认贴容器底居中，父容器需 position: relative。
+ *
+ * W3 验收修：原为 --ow-radius-pill 胶囊。§7 只把 999 留给带状态点/计数的 chip 与真圆形元素，
+ * 这枚是带图标与文字的动作钮，落 8px 档；与同料的 BackTop 一起改。
+ */
+export function JumpToLatest({ onClick, count, label = "跳到最新", hidden, disabled, className }: JumpToLatestProps) {
+  if (hidden) return null
+
+  return (
+    <Button
+      data-slot="jump-to-latest"
+      data-ow-part="action"
+      data-ow-role="navigation"
+      variant="unstyled"
+      disabled={disabled}
+      onClick={onClick}
+      className={cn(
+        owFloatingActionClass,
+        "h-8 gap-1.5 px-3 [border-radius:var(--ow-radius-action)]",
+        "text-[length:var(--ow-fs-ui)] z-[var(--ow-z-sticky)]",
+        "absolute bottom-4 left-1/2 -translate-x-1/2",
+        className,
+      )}
+    >
+      <ArrowDown aria-hidden="true" style={{ width: 16, height: 16 }} />
+      <span>{label}</span>
+      {count != null && (
+        <span data-ow-part="count" className="font-[family-name:var(--ow-font-mono)] tabular-nums">
+          {count}
+        </span>
+      )}
+    </Button>
+  )
+}
+
+/* ────────────────── CompressionDivider / BranchDivider ────────────────── */
+
+/** 边界行内容槽的共享度量：图标 16、gap 6、最长 70%/420px，单行不折。 */
+const dividerContentClass = [
+  "inline-flex min-w-0 max-w-[min(70%,420px)] items-center gap-1.5 whitespace-nowrap",
+  "text-[length:var(--ow-fs-ui)] leading-[1.5] text-[color:var(--ow-text-3)]",
+].join(" ")
+
+export interface CompressionDividerProps {
+  /** 边界文案，默认「上下文已压缩」 */
+  label?: ReactNode
+  /** 展开时的内容（详情区）；不传则只画边界 */
+  children?: ReactNode
+  /** 受控展开态；不传走内部状态 */
+  expanded?: boolean
+  defaultExpanded?: boolean
+  onExpandedChange?: (expanded: boolean) => void
+  /** 左侧图标，默认 Memo（16 档） */
+  icon?: ReactNode
+  /** 操作链接文案，默认折叠「查看」/ 展开「收起」 */
+  expandLabel?: string
+  collapseLabel?: string
+  /** 详情区可访问名 */
+  detailsLabel?: string
+  /** 折叠条数等读数，mono + tabular-nums */
+  count?: number
+  className?: string
+  /** 详情区附加类（宿主可继续用自己的卡面样式） */
+  detailsClassName?: string
+}
+
+/**
+ * CompressionDivider —— 上下文压缩边界：文字 ＋ 双侧线 ＋ 操作链接（.ow-link）。
+ * 触发器是按钮（aria-expanded/aria-controls 齐备），chevron 折叠 -90°、展开 0°，
+ * 只转不移（§9）；hover 走所在表面档 `--ow-hover`，focus-visible 2px 环＋2px 缝。
+ */
+export function CompressionDivider({
+  label = "上下文已压缩",
+  children,
+  expanded: expandedProp,
+  defaultExpanded = false,
+  onExpandedChange,
+  icon,
+  expandLabel = "查看",
+  collapseLabel = "收起",
+  detailsLabel = "已压缩内容",
+  count,
+  className,
+  detailsClassName,
+}: CompressionDividerProps) {
+  const detailsId = useId()
+  const [uncontrolled, setUncontrolled] = useState(defaultExpanded)
+  const expanded = expandedProp ?? uncontrolled
+  const toggle = useCallback(() => {
+    const next = !expanded
+    if (expandedProp === undefined) setUncontrolled(next)
+    onExpandedChange?.(next)
+  }, [expanded, expandedProp, onExpandedChange])
+  const actionLabel = expanded ? `${collapseLabel}${detailsLabel}` : `${expandLabel}${detailsLabel}`
+
+  return (
+    <>
+      <div
+        data-slot="compression-divider"
+        data-ow-part="divider"
+        data-ow-state={expanded ? "expanded" : "collapsed"}
+        className={cn("flex w-full items-center gap-2.5 py-2", className)}
+      >
+        <span aria-hidden="true" className={dividerLineClass} />
+        <Button
+          variant="unstyled"
+          type="button"
+          data-ow-part="trigger"
+          onClick={toggle}
+          aria-expanded={expanded}
+          aria-controls={children != null ? detailsId : undefined}
+          aria-label={actionLabel}
+          title={actionLabel}
+          className={cn(
+            dividerContentClass,
+            "cursor-pointer rounded-[var(--ow-radius-2xs)] px-1.5 py-[3px]",
+            "transition-[background-color,color] duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)]",
+            "hover:bg-[var(--ow-hover)] hover:text-[color:var(--ow-text-2)] active:bg-[var(--ow-press)]",
+            "focus-visible:outline-none focus-visible:[outline:2px_solid_var(--ow-focus-ring)] focus-visible:[outline-offset:2px]",
+          )}
+        >
+          <span aria-hidden="true" className="inline-flex shrink-0 [&>svg]:h-4 [&>svg]:w-4">
+            {icon ?? <Memo aria-hidden="true" />}
+          </span>
+          <span data-ow-part="label" className="shrink-0">
+            {label}
+          </span>
+          {count != null && (
+            <span data-ow-part="count" className="shrink-0 font-[family-name:var(--ow-font-mono)] tabular-nums">
+              {count}
+            </span>
+          )}
+          <span data-ow-part="action" className="ow-link shrink-0">
+            {expanded ? collapseLabel : expandLabel}
+          </span>
+          <ChevDown
+            aria-hidden="true"
+            className={cn(
+              "shrink-0 text-[color:var(--ow-text-3)]",
+              "transition-transform duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)]",
+              expanded ? "rotate-0" : "-rotate-90",
+            )}
+            style={{ width: 16, height: 16 }}
+          />
+        </Button>
+        <span aria-hidden="true" className={dividerLineClass} />
+      </div>
+      {children != null && (
+        <div
+          id={detailsId}
+          data-ow-part="details"
+          role="region"
+          aria-label={detailsLabel}
+          hidden={!expanded}
+          className={detailsClassName}
+        >
+          {children}
+        </div>
+      )}
+    </>
+  )
+}
+
+export interface BranchDividerProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "onClick"> {
+  /** 来源会话标题 */
+  sourceTitle: string
+  /** 来源标题前的文字，默认「此任务源自」 */
+  label?: ReactNode
+  /** 点击来源链接（跳回来源会话） */
+  onSourceClick?: () => void
+  /** 真实链接地址；不传时渲染为 button 语义的行内链接 */
+  href?: string
+  /** 左侧图标，默认 Branch（16 档） */
+  icon?: ReactNode
+  className?: string
+}
+
+/**
+ * BranchDivider —— 分支来源边界：文字 ＋ 双侧线 ＋ 来源会话链接（.ow-link）。
+ * 链接是唯一焦点位（整行不是按钮），焦点环由 `.ow-link:focus-visible` 承担。
+ */
+export function BranchDivider({
+  sourceTitle,
+  label = "此任务源自",
+  onSourceClick,
+  href,
+  icon,
+  className,
+  ...rest
+}: BranchDividerProps) {
+  const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {
+    if (!href) event.preventDefault()
+    onSourceClick?.()
+  }
+
+  return (
+    <div
+      data-slot="branch-divider"
+      data-ow-part="divider"
+      role="separator"
+      aria-orientation="horizontal"
+      className={cn("flex w-full items-center gap-2.5 py-2", className)}
+      {...rest}
+    >
+      <span aria-hidden="true" className={dividerLineClass} />
+      <span className={dividerContentClass}>
+        <span aria-hidden="true" className="inline-flex shrink-0 [&>svg]:h-4 [&>svg]:w-4">
+          {icon ?? <Branch aria-hidden="true" />}
+        </span>
+        <span data-ow-part="label" className="shrink-0">
+          {label}
+        </span>
+        <a
+          data-ow-part="source"
+          className="ow-link min-w-0 truncate"
+          href={href ?? "#"}
+          title={sourceTitle}
+          onClick={handleClick}
+        >
+          {sourceTitle}
+        </a>
+      </span>
+      <span aria-hidden="true" className={dividerLineClass} />
+    </div>
+  )
+}