50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1245,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { ChevronLeftIcon, MenuIcon, SearchIcon } from "./icons"; import "@/components/ui/kakao/styles/kakao.css"; interface ChatHeaderProps extends Omit, "title"> { /** * `chat` — inside a chat room (translucent over the chat background). * `main` — a tab's large-title header ("채팅", "친구"). */ variant?: "chat" | "main"; title: React.ReactNode; /** Group chats show the member count next to the title. */ memberCount?: number; /** Second line under the title, e.g. "공유하기" or a status. */ subtitle?: React.ReactNode; /** Total unread chats, shown beside the back chevron. */ unreadTotal?: number; onBack?: () => void; onSearch?: () => void; onMenu?: () => void; /** Replace the default trailing buttons. */ actions?: React.ReactNode; } const GLASS = "border border-kk-glass-border bg-kk-glass-bg shadow-[0_2px_12px_rgba(0,0,0,0.08)] backdrop-blur-xl backdrop-saturate-150"; function IconButton({ label, onClick, size = 40, children, }: { label: string; onClick?: () => void; size?: number; children: React.ReactNode; }) { return ( ); } const ChatHeader = React.forwardRef( ( { className, variant = "chat", title, memberCount, subtitle, unreadTotal, onBack, onSearch, onMenu, actions, ...props }, ref ) => { const trailing = actions ?? ( <> ); if (variant === "main") { return (

{title}

{trailing}

); } const hasCount = !!unreadTotal && unreadTotal > 0; // iOS 26 layout: the bar itself is transparent; the back button and the // trailing actions are floating glass pills, the title sits centered. return (

{title} {memberCount != null && ( {memberCount} )}

{subtitle &&

{subtitle}

}

{trailing}

); } ); ChatHeader.displayName = "ChatHeader"; export { ChatHeader, type ChatHeaderProps }; 53:T105b,import * as React from "react"; /** * Inline UI icons. Stroke paths come from Lucide (ISC license, * https://lucide.dev) and are copied into the repo so every registry item * installs without an icon-library dependency. No Kakao logos or characters. */ type IconProps = React.SVGProps & { size?: number }; function strokeIcon(name: string, children: React.ReactNode) { const Icon = ({ size = 24, ...props }: IconProps) => ( ); Icon.displayName = name; return Icon; } export const ChevronLeftIcon = strokeIcon("ChevronLeftIcon", ); export const ChevronRightIcon = strokeIcon("ChevronRightIcon", ); export const SearchIcon = strokeIcon( "SearchIcon", <> ); export const MenuIcon = strokeIcon("MenuIcon", ); export const PlusIcon = strokeIcon("PlusIcon", ); export const SmileIcon = strokeIcon( "SmileIcon", <> ); /** Face without the outline — sits inside the input bar's round emoji button. */ export const EmojiFaceIcon = strokeIcon("EmojiFaceIcon", ); export const HashIcon = strokeIcon("HashIcon", ); export const ArrowUpIcon = strokeIcon("ArrowUpIcon", ); export const BellOffIcon = strokeIcon( "BellOffIcon", ); export const PinIcon = strokeIcon( "PinIcon", ); export const CalendarIcon = strokeIcon( "CalendarIcon", <> ); export const DownloadIcon = strokeIcon("DownloadIcon", ); export const TicketIcon = strokeIcon( "TicketIcon", ); export const MessageCircleIcon = strokeIcon( "MessageCircleIcon", ); export const SettingsIcon = strokeIcon( "SettingsIcon", <> ); /** Default profile silhouette (filled, original drawing). */ export function SilhouetteIcon({ size = 24, ...props }: IconProps) { return ( ); } 54:T28b1,/* * Katok UI Design Tokens (unofficial) * * Reconstructed for KakaoTalk iOS 26.x. No official KakaoTalk design system is * public, so every value carries an evidence grade — see DESIGN.md: * O = official (developers.kakao.com) T = official theme-creation spec * C = clone approximation D = measured on device (iOS @3x) * S = measured from Kakao's own published imagery (App Store screenshots, * Kakao Business guide) M = pending on-device measurement * * Token names follow the KakaoTalk theme slots where one exists * (BackgroundStyle-ChatRoom, MessageCellStyle-Send/Receive, InputBarStyle-Chat, * MainViewStyle-Primary), so the library stays theme-compatible. */ @theme inline { /* === Brand === */ --color-kk-yellow: var(--kk-yellow); --color-kk-yellow-pressed: var(--kk-yellow-pressed); --color-kk-on-yellow: var(--kk-on-yellow); --color-kk-brown: var(--kk-brown); /* === Neutral === */ --color-kk-gray-50: var(--kk-gray-50); --color-kk-gray-100: var(--kk-gray-100); --color-kk-gray-200: var(--kk-gray-200); --color-kk-gray-300: var(--kk-gray-300); --color-kk-gray-400: var(--kk-gray-400); --color-kk-gray-500: var(--kk-gray-500); --color-kk-gray-600: var(--kk-gray-600); --color-kk-gray-700: var(--kk-gray-700); --color-kk-gray-800: var(--kk-gray-800); --color-kk-gray-900: var(--kk-gray-900); --color-kk-always-white: var(--kk-always-white); --color-kk-always-black: var(--kk-always-black); /* === Text === */ --color-kk-text-primary: var(--kk-text-primary); --color-kk-text-secondary: var(--kk-text-secondary); --color-kk-text-tertiary: var(--kk-text-tertiary); --color-kk-text-link: var(--kk-text-link); --color-kk-critical: var(--kk-critical); /* === Chat room (BackgroundStyle-ChatRoom) === */ --color-kk-chat-bg: var(--kk-chat-bg); --color-kk-chat-header-bg: var(--kk-chat-header-bg); --color-kk-chat-header-fg: var(--kk-chat-header-fg); --color-kk-chat-meta: var(--kk-chat-meta); --color-kk-chat-sender: var(--kk-chat-sender); --color-kk-chat-pill-bg: var(--kk-chat-pill-bg); --color-kk-chat-pill-fg: var(--kk-chat-pill-fg); --color-kk-glass-bg: var(--kk-glass-bg); --color-kk-glass-border: var(--kk-glass-border); /* === Bubbles (MessageCellStyle-Send / -Receive) === */ --color-kk-bubble-outgoing: var(--kk-bubble-outgoing); --color-kk-bubble-outgoing-fg: var(--kk-bubble-outgoing-fg); --color-kk-bubble-incoming: var(--kk-bubble-incoming); --color-kk-bubble-incoming-fg: var(--kk-bubble-incoming-fg); --color-kk-unread: var(--kk-unread); /* === Input bar (InputBarStyle-Chat) === */ --color-kk-input-bar-bg: var(--kk-input-bar-bg); --color-kk-input-icon: var(--kk-input-icon); --color-kk-input-placeholder: var(--kk-input-placeholder); --color-kk-input-border: var(--kk-input-border); --color-kk-input-button-bg: var(--kk-input-button-bg); --color-kk-input-emoji-bg: var(--kk-input-emoji-bg); --color-kk-send-bg: var(--kk-send-bg); --color-kk-send-fg: var(--kk-send-fg); /* === Lists (MainViewStyle-Primary) === */ --color-kk-list-bg: var(--kk-list-bg); --color-kk-list-title: var(--kk-list-title); --color-kk-list-description: var(--kk-list-description); --color-kk-list-meta: var(--kk-list-meta); --color-kk-list-pressed: var(--kk-list-pressed); --color-kk-badge: var(--kk-badge); --color-kk-badge-fg: var(--kk-badge-fg); --color-kk-divider: var(--kk-divider); /* === Biz Message === */ --color-kk-biz-band: var(--kk-biz-band); --color-kk-biz-band-fg: var(--kk-biz-band-fg); --color-kk-biz-surface: var(--kk-biz-surface); --color-kk-biz-button-bg: var(--kk-biz-button-bg); --color-kk-biz-button-fg: var(--kk-biz-button-fg); --color-kk-biz-emphasis: var(--kk-biz-emphasis); --color-kk-biz-muted: var(--kk-biz-muted); --color-kk-biz-coupon-bg: var(--kk-biz-coupon-bg); --color-kk-biz-coupon-accent: var(--kk-biz-coupon-accent); --color-kk-biz-coupon-border: var(--kk-biz-coupon-border); --color-kk-biz-opt-out: var(--kk-biz-opt-out); --color-kk-biz-badge: var(--kk-biz-badge); --color-kk-biz-badge-fg: var(--kk-biz-badge-fg); /* === Avatar placeholder === */ --color-kk-avatar-bg: var(--kk-avatar-bg); --color-kk-avatar-fg: var(--kk-avatar-fg); /* === Typography === */ --font-kk: var(--kk-font-family); } :root { /* Brand */ --kk-yellow: #fee500; /* O */ --kk-yellow-pressed: #f2d900; /* M */ --kk-on-yellow: rgba(0, 0, 0, 0.85); /* O — login label #000 85% */ --kk-brown: #3c1e1e; /* C */ /* Neutral */ --kk-gray-50: #f8f8f8; --kk-gray-100: #f2f2f2; --kk-gray-200: #e5e5e5; --kk-gray-300: #d4d4d4; --kk-gray-400: #b2b2b2; --kk-gray-500: #8e8e8e; --kk-gray-600: #6e6e6e; --kk-gray-700: #4c4c4c; --kk-gray-800: #2c2c2c; --kk-gray-900: #191919; /* T — Apeach -ios-button-text-color */ --kk-always-white: #ffffff; --kk-always-black: #000000; /* Text */ --kk-text-primary: #191919; /* T */ --kk-text-secondary: #6e6e6e; /* M */ --kk-text-tertiary: #a0a0a0; /* M */ --kk-text-link: #2b6bd6; /* M */ --kk-critical: #ff4b3e; /* M */ /* Chat room */ --kk-chat-bg: #abc1d1; /* S — App Store + Biz guide both render #abc1d1 */ --kk-chat-header-bg: transparent; /* S — iOS 26: header floats, only the pills are glass */ --kk-chat-header-fg: #191919; /* S */ --kk-chat-meta: rgba(0, 0, 0, 0.5); /* S — #535c63 on #abc1d1 */ --kk-chat-sender: rgba(0, 0, 0, 0.88); /* S — #1a1d1f on #abc1d1 */ --kk-chat-pill-bg: rgba(0, 0, 0, 0.15); /* C */ --kk-chat-pill-fg: #ffffff; /* C */ --kk-glass-bg: rgba(255, 255, 255, 0.22); /* S — #bdcedb over #abc1d1 */ --kk-glass-border: rgba(255, 255, 255, 0.55); /* S */ /* Bubbles */ --kk-bubble-outgoing: #fee500; /* O/C */ --kk-bubble-outgoing-fg: #191919; --kk-bubble-incoming: #ffffff; /* S */ --kk-bubble-incoming-fg: #191919; --kk-unread: #fee500; /* D (dark) — theme slot -ios-unread-text-color */ /* Input bar */ --kk-input-bar-bg: #d8e7ef; /* S — floating pill */ --kk-input-icon: #191919; /* S */ --kk-input-placeholder: #8c9599; /* S */ --kk-input-border: rgba(255, 255, 255, 0.5); /* S */ --kk-input-button-bg: #ffffff; /* S — + and # circles */ --kk-input-emoji-bg: rgba(0, 0, 0, 0.1); /* S — #c1ced5 on the pill */ --kk-send-bg: #fee500; --kk-send-fg: #191919; /* Lists */ --kk-list-bg: #ffffff; --kk-list-title: #191919; --kk-list-description: #767676; /* S */ --kk-list-meta: #767676; /* S */ --kk-list-pressed: rgba(0, 0, 0, 0.05); /* T */ --kk-badge: #f4551e; /* S */ --kk-badge-fg: #ffffff; --kk-divider: rgba(0, 0, 0, 0.09); /* T */ /* Biz Message */ --kk-biz-band: #fee500; /* S — "알림톡 도착" band */ --kk-biz-band-fg: #191919; --kk-biz-surface: #ffffff; --kk-biz-button-bg: #f5f5f5; /* S */ --kk-biz-button-fg: #191919; --kk-biz-emphasis: #191919; --kk-biz-muted: #8a8a8a; /* S */ --kk-biz-coupon-bg: #e6f1fb; /* S — download panel */ --kk-biz-coupon-accent: #0a73dc; /* S — download arrow + "COUPON" */ --kk-biz-coupon-border: #ebebeb; /* S */ --kk-biz-opt-out: rgba(0, 0, 0, 0.6); /* S — #444d54 on #abc1d1 */ --kk-biz-badge: #333333; /* S — round "kakao" mark on the corner */ --kk-biz-badge-fg: #ffffff; /* Avatar */ --kk-avatar-bg: #a9c3e6; /* C — default profile silhouette bg */ --kk-avatar-fg: #ffffff; /* Typography — iOS system stack (Apple SD Gothic Neo for Hangul) */ --kk-font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif; /* Sizing */ --kk-text-message: 16px; /* D — default font size setting */ --kk-leading-message: 21px; /* D — 1-line bubble is 35px tall */ --kk-text-meta: 10px; /* C */ --kk-text-sender: 12px; --kk-text-pill: 11px; /* C */ --kk-radius-bubble: 13px; /* D */ --kk-radius-avatar: 40%; /* C — squircle */ --kk-radius-biz: 14px; --kk-avatar-chat: 34px; /* D */ --kk-avatar-list: 48px; /* C */ --kk-header-height: 60px; /* D — 44px glass pills + 8px above/below */ --kk-msg-max-width: min(70%, 264px); /* C */ --kk-biz-width: 268px; /* S — Biz guide renders at 1.9x: 510px card */ --kk-gap-grouped: 4px; /* C */ --kk-gap-meta: 4px; /* D */ --kk-gap-group: 12px; } .dark, [data-theme="dark"] { /* Brand stays yellow in dark mode */ --kk-yellow-pressed: #e6cf00; --kk-gray-50: #1c1c1e; --kk-gray-100: #232325; --kk-gray-200: #2c2c2e; --kk-gray-300: #3a3a3c; --kk-gray-400: #545456; --kk-gray-500: #7c7c80; --kk-gray-600: #a1a1a6; --kk-gray-700: #c7c7cc; --kk-gray-800: #e5e5ea; --kk-gray-900: #f2f2f7; --kk-text-primary: #f2f2f2; /* D */ --kk-text-secondary: #a1a1a6; --kk-text-tertiary: #7c7c80; --kk-text-link: #6aa5ff; --kk-critical: #ff6b5e; --kk-chat-bg: #080808; /* D */ --kk-chat-header-bg: transparent; --kk-chat-header-fg: #ededed; /* D */ --kk-chat-meta: #9c9c9c; /* D */ --kk-chat-sender: #cfcfcf; /* D */ --kk-chat-pill-bg: rgba(255, 255, 255, 0.12); --kk-chat-pill-fg: rgba(255, 255, 255, 0.85); --kk-glass-bg: rgba(255, 255, 255, 0.17); /* D — #333333 over #080808 */ --kk-glass-border: rgba(255, 255, 255, 0.2); /* D */ --kk-bubble-outgoing: #fee500; --kk-bubble-outgoing-fg: #191919; --kk-bubble-incoming: #282828; /* D */ --kk-bubble-incoming-fg: #f2f2f2; /* D */ --kk-unread: #fee500; /* D */ --kk-input-bar-bg: #141414; /* D */ --kk-input-icon: #f2f2f2; /* D */ --kk-input-placeholder: #6d6d6d; /* D */ --kk-input-border: rgba(255, 255, 255, 0.14); /* D — #353535 rim */ --kk-input-button-bg: #2e2e2e; /* D */ --kk-input-emoji-bg: rgba(255, 255, 255, 0.11); /* D — #2f2f2f */ --kk-list-bg: #1c1c1e; --kk-list-title: #ededed; --kk-list-description: #8e8e93; --kk-list-meta: #7c7c80; --kk-list-pressed: rgba(255, 255, 255, 0.06); --kk-divider: rgba(255, 255, 255, 0.1); --kk-biz-surface: #2c2c2e; --kk-biz-button-bg: #3a3a3c; --kk-biz-button-fg: #ededed; --kk-biz-emphasis: #ededed; --kk-biz-muted: #a1a1a6; --kk-biz-coupon-bg: #1e2a36; /* C */ --kk-biz-coupon-accent: #4ea1f5; /* C */ --kk-biz-coupon-border: rgba(255, 255, 255, 0.12); --kk-biz-opt-out: #9c9c9c; --kk-biz-badge: #4a4a4a; /* C */ --kk-avatar-bg: #4a5b70; } .font-kk { font-family: var(--kk-font-family); -webkit-font-smoothing: antialiased; } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@katok-ui","registryDependencies":["utils"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/ui/kakao/chat-header.tsx","content":"$52","type":"registry:component","target":"components/ui/kakao/chat-header.tsx"},{"path":"components/ui/kakao/icons.tsx","content":"$53","type":"registry:component","target":"components/ui/kakao/icons.tsx"},{"path":"components/ui/kakao/styles/kakao.css","content":"$54","type":"registry:file","target":"components/ui/kakao/styles/kakao.css"}],"className":"h-[70svh] min-h-80"}]]}]