2c:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2d:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2e:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 2f:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 30:T1b62,"use client"; import { Avatar, AvatarFallback } from "@/components/ui/avatar"; import { Badge } from "@/components/ui/badge"; import { cn } from "@/lib/utils"; import { formatMoney } from "../../../lib/commerce/select"; import type { ChatMessage, ChatSender } from "./messages"; import { Eyebrow } from "../../ui/eyebrow/eyebrow"; import { ProductPicture } from "../../ui/_kit/product-picture"; import { RISE } from "../../ui/_kit/hero"; import { defaultProductHref, type ProductHref } from "../../ui/_kit/types"; import "../../ui/_kit/kit.css"; export type ChatFeedProps = { messages: ChatMessage[]; senders: ChatSender[]; /** `group-chat` shows sender names (many senders), `dm` is two people, `receipts` adds read receipts and reactions. */ variant?: "group-chat" | "dm" | "receipts"; /** Name of who is typing at the end of the thread. `false` hides the indicator. */ typing?: string | false; heading?: string; productHref?: ProductHref; className?: string; }; const initialsOf = (s: ChatSender) => (s.initials ?? s.name.replace(/[^\p{L}\p{N}]/gu, "").slice(0, 2)).toLocaleUpperCase(); function Typing({ name }: { name: string }) { return (

{[0, 1, 2].map((i) => ( {name}

); } /** A group-chat feed of the brand's lines: bubbles alternate sides, products ride along as attachments. */ export function ChatFeedView({ messages, senders, variant = "group-chat", typing, heading, productHref = defaultProductHref, className, }: ChatFeedProps) { if (messages.length === 0) return null; const byName = new Map(senders.map((s) => [s.name, s])); const selfName = (senders.find((s) => s.self) ?? senders[0])?.name; const typingName = typing === undefined ? senders.find((s) => s.name !== selfName)?.name : typing || undefined; return (

{heading ? {heading} : null}

0 && "mt-4", RISE[Math.min(i, RISE.length - 1)], )} > {variant !== "dm" || !mine ? ( {lastOfRun && !mine ? ( {initialsOf(sender)} ) : null} ) : null}
{showName || (m.at && firstOfRun) ? ( {showName ? sender.name : null} {showName && m.at ? " · " : null} {m.at ? {m.at} : null} ) : null}

{m.text}
{m.product ? ( {m.product.title} {formatMoney(m.product.priceRange.min)} ) : null}
{variant === "receipts" && m.reactions?.length ? ( {m.reactions.map((r) => ( {r} ))} ) : null}
{receipt ? {receipt} : null}

); } export default ChatFeedView; 31:T5b5,import type { Product } from "../../../lib/commerce/types"; export type ChatSender = { name: string; /** Avatar letters. Defaults to the first two letters of the name. */ initials?: string; /** Messages from this sender sit on the end side. The first sender is "self" when none is flagged. */ self?: boolean; }; export type ChatMessage = { /** Sender name (matches `ChatSender.name`). */ from: string; text: string; /** Rendered as a small attachment card linking to the product. */ product?: Product; /** Timestamp label, e.g. "9:41". Shown in .micro. */ at?: string; /** `receipts`: reactions shown as badges on the bubble. */ reactions?: string[]; /** `receipts`: show a read receipt under this message (true, or a label such as "Read 9:42"). */ read?: boolean | string; }; /** * Turns products into a thread: each product's line (or title) becomes a message, senders rotate, * and every `attachEvery`th message carries the product as an attachment. */ export function messagesFromProducts( products: Product[], senders: ChatSender[], options: { attachEvery?: number; times?: string[] } = {}, ): ChatMessage[] { const { attachEvery = 1, times = [] } = options; if (senders.length === 0) return []; return products.map((product, i) => ({ from: senders[i % senders.length].name, text: product.line ?? product.title, product: i % attachEvery === 0 ? product : undefined, at: times[i], })); } 32:T50a,import type { ProductImage } from "../../../lib/commerce/types"; import { cn } from "@/lib/utils"; export type ProductPictureProps = { image: ProductImage; /** `sizes` attribute. Defaults to a half-viewport guess. */ sizes?: string; loading?: "eager" | "lazy"; /** Use for the one above-the-fold LCP image. */ priority?: boolean; className?: string; }; /** * Plain for a product mockup. Uses the 600px twin as the small source when one exists, * always carries width/height so the box is reserved before the image arrives. */ export function ProductPicture({ image, sizes = "(min-width: 768px) 50vw, 100vw", loading = "lazy", priority = false, className, }: ProductPictureProps) { const width = image.width ?? 1200; const height = image.height ?? 1200; return ( // eslint-disable-next-line @next/next/no-img-element {image.alt}

); } 33:T5ef,/* * Shared motion for the heroes and landing blocks. Plain CSS because it owns keyframes. * Everything here answers prefers-reduced-motion. Easing and durations are the Kobra house numbers. */ /* Entrance: opacity + 8px rise, 220ms --ease-out, staggered 80ms by --kc-i, delay capped at 600ms. */ @keyframes kc-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .kc-rise { animation: kc-rise 220ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)) both; animation-delay: min(calc(var(--kc-i, 0) * 80ms), 600ms); } /* Retro blinking caret (lonelyboi window). */ @keyframes kc-blink { 50% { opacity: 0; } } .kc-caret { animation: kc-blink 1.1s steps(1) infinite; } /* Hotspot ping ring (lookbook). */ @keyframes kc-ping { from { opacity: 0.5; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } } .kc-ping { animation: kc-ping 1.8s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)) infinite; } @media (prefers-reduced-motion: reduce) { .kc-rise, .kc-caret, .kc-ping { animation: none; } } /* Typing indicator dots (chat-feed). */ @keyframes kc-typing { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } .kc-typing-dot { animation: kc-typing 1.1s var(--ease-out, ease-out) infinite; } @media (prefers-reduced-motion: reduce) { .kc-typing-dot { animation: none; opacity: 0.6; } } 34:Ta9c,import type { Money, Product, ProductImage, Variant } from "./types"; /** Price range of a variant list. Empty list gives a zero range in `currency`. */ export function priceRangeOf( variants: Variant[], currency = "USD", ): { min: Money; max: Money } { if (variants.length === 0) { const zero = { amount: 0, currency }; return { min: zero, max: zero }; } const sorted = [...variants].sort((a, b) => a.price.amount - b.price.amount); return { min: sorted[0].price, max: sorted[sorted.length - 1].price }; } /** Lowest priced variant, preferring available ones. Undefined when the product has no variants. */ export function findCheapestVariant(product: Product): Variant | undefined { if (product.variants.length === 0) return undefined; const pool = product.variants.some((v) => v.available) ? product.variants.filter((v) => v.available) : product.variants; return pool.reduce((a, b) => (b.price.amount < a.price.amount ? b : a)); } /** * Same as `findCheapestVariant` but typed non-optional so existing call sites keep compiling. * Adapters never emit a product without variants, so the throw is unreachable for adapter * output; hand-built products should use `findCheapestVariant`. */ export function cheapestVariant(product: Product): Variant { const v = findCheapestVariant(product); if (!v) throw new Error(`cheapestVariant: product "${product.handle}" has no variants (use findCheapestVariant)`); return v; } /** First variant whose options contain every given key/value. */ export function variantFor( product: Product, options: Record, ): Variant | undefined { return product.variants.find((v) => Object.entries(options).every(([k, val]) => v.options[k] === val), ); } export function optionValues(product: Product, name: string): string[] { return product.options.find((o) => o.name === name)?.values ?? []; } /** Images to show for a variant: its own image first, then the rest of the product. */ export function imagesFor(product: Product, variant?: Variant): ProductImage[] { if (!variant?.image) return product.images; const own = variant.image; return [own, ...product.images.filter((i) => i.src !== own.src)]; } export function formatMoney(money: Money, locale = "en-US"): string { const whole = Number.isInteger(money.amount); return new Intl.NumberFormat(locale, { style: "currency", currency: money.currency, minimumFractionDigits: whole ? 0 : 2, maximumFractionDigits: 2, }).format(money.amount); } /** True when at least one variant can be bought somewhere. */ export function isBuyable(product: Product): boolean { return product.variants.some((v) => v.available && v.storeUrl); } 35:T6b3,import { ChatFeed, messagesFromProducts, type ChatSender } from "./chat-feed"; import { brandFixture } from "../../../lib/commerce/fixtures/heroes"; import { DemoStack, VariantFrame } from "../../ui/_kit/variant-frame"; const GROUP: ChatSender[] = [ { name: "You", initials: "ME", self: true }, { name: "Maya", initials: "MA" }, { name: "Dev", initials: "DV" }, { name: "Priya", initials: "PR" }, ]; const DM: ChatSender[] = [ { name: "You", initials: "ME", self: true }, { name: "Sam", initials: "SA" }, ]; export function ChatFeedDemo({ brand }: { brand?: string }) { const f = brandFixture(brand); const products = f.products; const group = messagesFromProducts(products.slice(0, 6), GROUP, { times: ["9:41", "9:41", "9:42", "9:43", "9:43", "9:44"], attachEvery: 2 }); const dm = messagesFromProducts(products.slice(0, 4), DM, { times: ["22:10", "22:10", "22:11", "22:12"] }); const receipts = messagesFromProducts(products.slice(0, 4), DM, { times: ["22:10", "22:10", "22:11", "22:12"] }).map((m, i) => ({ ...m, read: i === 2 ? "Read 22:12" : i === 0, reactions: i === 1 ? ["+1"] : i === 2 ? ["haha", "+1"] : undefined, })); return ( ); } export default ChatFeedDemo; 36:T753,import type { BlockMeta } from "../../../lib/block-meta"; export const chatFeedMeta: BlockMeta = { slug: "chat-feed", title: "Chat feed", description: "A message thread of the brand's lines: bubbles alternate sides with initials avatars, products ride along as linked attachments, typing indicator at the end. Group chat, DM, or receipts with read marks and reactions.", group: "landing", kobraDeps: ["avatar", "badge"], files: [ "blocks/landing/chat-feed/chat-feed.tsx", "blocks/landing/chat-feed/chat-feed-view.tsx", "blocks/landing/chat-feed/messages.ts", "blocks/ui/eyebrow/eyebrow.tsx", "blocks/ui/_kit/product-picture.tsx", "blocks/ui/_kit/hero.ts", "blocks/ui/_kit/types.ts", "blocks/ui/_kit/kit.css", "lib/commerce/select.ts", ], props: [ { name: "messages", type: "ChatMessage[]", description: "{ from, text, product?, at?, reactions?, read? }." }, { name: "senders", type: "ChatSender[]", description: "{ name, initials?, self? }; the self sender sits on the end side." }, { name: "variant", type: "'group-chat' | 'dm' | 'receipts'", default: "'group-chat'", description: "Sender names, two-person thread, or receipts and reactions." }, { name: "typing", type: "string | false", description: "Who is typing at the end; defaults to the first non-self sender, false hides it. Static under reduced motion." }, { name: "heading", type: "string", description: "Mono label above the thread." }, { name: "productHref", type: "(p: Product) => string", default: "/products/", description: "Attachment link builder." }, { name: "messagesFromProducts()", type: "(products, senders, { attachEvery?, times? }) => ChatMessage[]", description: "Helper: each product line becomes a message, senders rotate." }, ], tags: ["chat", "feed", "notpolite", "landing"], status: "ready", }; 23:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/#landing","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Landing"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Chat feed"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Chat feed"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"A message thread of the brand's lines: bubbles alternate sides with initials avatars, products ride along as linked attachments, typing indicator at the end. Group chat, DM, or receipts with read marks and reactions."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"chat-feed","group":"landing","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/landing/chat-feed/chat-feed.tsx","code":"// Server-safe entry: the thread itself is a client component (Kobra badge), the helper stays callable from server code.\nimport { ChatFeedView } from \"./chat-feed-view\";\n\nexport { ChatFeedView as ChatFeed } from \"./chat-feed-view\";\nexport type { ChatFeedProps } from \"./chat-feed-view\";\nexport { messagesFromProducts } from \"./messages\";\nexport type { ChatMessage, ChatSender } from \"./messages\";\n\nexport default ChatFeedView;\n"},{"path":"blocks/landing/chat-feed/chat-feed-view.tsx","code":"$30"},{"path":"blocks/landing/chat-feed/messages.ts","code":"$31"},{"path":"blocks/ui/eyebrow/eyebrow.tsx","code":"import type { ReactNode } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/** Small mono label that sits above a headline. */\nexport function Eyebrow({\n children,\n className,\n as: Tag = \"p\",\n}: {\n children: ReactNode;\n className?: string;\n as?: \"p\" | \"span\" | \"div\";\n}) {\n return {children};\n}\n\nexport default Eyebrow;\n"},{"path":"blocks/ui/_kit/product-picture.tsx","code":"$32"},{"path":"blocks/ui/_kit/hero.ts","code":"import type { Brand } from \"../../../lib/commerce/types\";\n\n/** Stagger steps for the one-time entrance (80ms apart, capped at 600ms in kit.css). Full class names on purpose. */\nexport const RISE = [\n \"kc-rise [--kc-i:0]\",\n \"kc-rise [--kc-i:1]\",\n \"kc-rise [--kc-i:2]\",\n \"kc-rise [--kc-i:3]\",\n \"kc-rise [--kc-i:4]\",\n \"kc-rise [--kc-i:5]\",\n \"kc-rise [--kc-i:6]\",\n] as const;\n\n/**\n * display-xl for short headlines, display-l when the line is long enough that display-xl would\n * run past three lines. Condensed CAPS faces (nopermission) carry roughly twice the characters.\n */\nexport function headlineScale(\n headline: string,\n brand: Pick,\n /** Set when the headline shares the row with an image (half width): always display-l. */\n half = false,\n): \"display-xl\" | \"display-l\" {\n if (half) return \"display-l\";\n const limit = brand.voice.caps ? 40 : 22;\n return headline.length > limit ? \"display-l\" : \"display-xl\";\n}\n"},{"path":"blocks/ui/_kit/types.ts","code":"import type { Product } from \"../../../lib/commerce/types\";\n\n/** A call to action: label and where it goes. */\nexport type Cta = { label: string; href: string };\n\n/** A navigation link. `href: null` renders as plain text (no destination yet). */\nexport type NavLink = { label: string; href: string | null };\n\n/** Where a product tile links. Override with the `productHref` prop on any block. */\nexport const defaultProductHref = (p: Product) => `/products/${p.handle}`;\n\nexport type ProductHref = (product: Product) => string;\n"},{"path":"blocks/ui/_kit/kit.css","code":"$33"},{"path":"lib/commerce/select.ts","code":"$34"},{"path":"blocks/landing/chat-feed/demo.tsx","code":"$35"},{"path":"blocks/landing/chat-feed/meta.ts","code":"$36"}]}],"props":"$L37"}],"$L38"]}]