(null);
+ const showFavicon =
+ faviconUrl !== undefined &&
+ !failedFaviconUrls.has(faviconUrl) &&
+ localFailedUrl !== faviconUrl;
+
+ const baseStyle = {
+ width: `${size}px`,
+ height: `${size}px`,
+ borderRadius: '4px',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ flex: '0 0 auto',
+ overflow: 'hidden',
+ fontFamily: APP_FONT,
+ fontSize: size <= 14 ? '8px' : '9px',
+ fontWeight: 600,
+ lineHeight: 1,
+ } as const;
+
+ if (showFavicon) {
+ return (
+
+ {
+ failedFaviconUrls.add(faviconUrl);
+ setLocalFailedUrl(faviconUrl);
+ }}
+ />
+
+ );
+ }
+
+ const initials = label ? getInitials(label) : '?';
+
+ return (
+
+ {initials.slice(0, 1)}
+
+ );
+}
+
+// -- Sidebar icon rendering --
+
+function renderSidebarIcon(icon: HeroSidebarIcon): ReactNode {
+ if (icon.kind === 'brand') {
+ return (
+
+
+ {icon.overlay === 'link' ? (
+
+
+
+ ) : null}
+
+ );
+ }
+
+ if (icon.kind === 'avatar') {
+ const tone = SIDEBAR_TONES[icon.tone] ?? SIDEBAR_TONES.gray;
+
+ return (
+
+
+ {icon.label}
+
+
+ );
+ }
+
+ const tone = SIDEBAR_TONES[icon.tone] ?? SIDEBAR_TONES.gray;
+ const TablerIcon = TABLER_ICON_MAP[icon.name];
+
+ return (
+
+ {TablerIcon ? (
+
+ ) : null}
+ {icon.overlay === 'link' ? (
+
+
+
+ ) : null}
+
+ );
+}
+
+// -- Sidebar item component --
+
+function SidebarItemComponent({
+ depth = 0,
+ interactive = true,
+ item,
+ onSelect,
+ selectedLabel,
+}: {
+ depth?: number;
+ interactive?: boolean;
+ item: HeroSidebarItem;
+ onSelect?: (label: string) => void;
+ selectedLabel?: string;
+}) {
+ const rowActive =
+ interactive && selectedLabel !== undefined && item.label === selectedLabel;
+
+ return (
+ <>
+ onSelect?.(item.label) : undefined}
+ style={{ cursor: interactive ? 'pointer' : 'default' }}
+ >
+ {renderSidebarIcon(item.icon)}
+
+ {item.label}
+ {item.meta ? ยท {item.meta} : null}
+
+ {item.showChevron || (item.children && item.children.length > 0) ? (
+
+
+
+ ) : null}
+
+ {item.children && item.children.length > 0 ? (
+
+
+ {item.children.map((child) => (
+
+ ))}
+
+ ) : null}
+
+ );
+}
+
+// -- Cell rendering components --
+
+function PersonTokenCell({
+ token,
+ hovered = false,
+ withCopyAction = true,
+}: {
+ token: HeroCellPerson;
+ hovered?: boolean;
+ withCopyAction?: boolean;
+}) {
+ const tone = PERSON_TONES[token.tone ?? 'gray'] ?? PERSON_TONES.gray;
+ const square =
+ token.kind === 'api' ||
+ token.kind === 'system' ||
+ token.kind === 'workflow';
+
+ return (
+
+
+ {token.avatarUrl ? (
+
+ ) : (
+ (token.shortLabel ?? getInitials(token.name))
+ )}
+
+ }
+ />
+
+ {withCopyAction ? (
+
+
+
+ ) : null}
+
+
+
+
+
+
+ {cell.items.map((item) => {
+ const tone = PERSON_TONES[item.tone ?? 'gray'] ?? PERSON_TONES.gray;
+
+ return (
+
+ {item.shortLabel ?? getInitials(item.name)}
+
+ }
+ />
+ );
+ })}
+
+
+
+
+
+
+
+
+
+