@orbit-work/ui 0.1.2-preview.0 → 0.1.2

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

@@ -1,160 +0,0 @@
-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

@@ -1,90 +0,0 @@
-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

@@ -1,352 +0,0 @@
-"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>
-  )
-}