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:Tf16,"use client"; import { cva, type VariantProps } from "class-variance-authority"; import { motion, useReducedMotion } from "motion/react"; import { useEffect, useState, type ComponentProps } from "react"; import { Skeleton } from "@/components/ui/skeleton"; import { cn } from "@/lib/utils"; import { TextShimmerLabel } from "../text-shimmer-label/text-shimmer-label"; const loaderVariants = cva("inline-flex max-w-full text-muted-foreground", { variants: { size: { sm: "gap-1 text-xs", default: "gap-1.5 text-sm", lg: "gap-2 text-base", }, }, defaultVariants: { size: "default" }, }); const dotSize = { sm: "size-1", default: "size-1.5", lg: "size-2" } as const; const lineHeight = { sm: "h-2.5", default: "h-3", lg: "h-3.5" } as const; const WIDTHS = ["w-full", "w-11/12", "w-4/5", "w-2/3"] as const; export type ChatLoaderProps = Omit, "children"> & VariantProps & { /** "dots" typing dots, "lines" skeleton lines for text on its way, "text" a shimmering status word. */ variant?: "dots" | "lines" | "text"; /** Skeleton line count for `variant="lines"`. */ lines?: 1 | 2 | 3 | 4; /** Text for `variant="text"`; for the others it is the screen-reader message. */ label?: string; /** Wrap the dots in an assistant-style pill. */ bubble?: boolean; /** Milliseconds to wait before showing anything, so a fast answer never flashes a loader. */ delay?: number; }; /** * Loading indicator for a reply that has not started yet. Motion honours `prefers-reduced-motion`: * dots hold still, skeleton and text shimmer stop, and the status is still announced. */ export function ChatLoader({ variant = "dots", size = "default", lines = 3, label, bubble = false, delay = 0, className, ...props }: ChatLoaderProps) { const reduce = useReducedMotion(); const [shown, setShown] = useState(delay <= 0); useEffect(() => { if (delay <= 0) return; const t = setTimeout(() => setShown(true), delay); return () => clearTimeout(t); }, [delay]); const message = label ?? (variant === "text" ? "Thinking" : "Assistant is responding"); if (!shown) return null; return (

{variant === "dots" ? ( <> {[0, 1, 2].map((i) => ( ))} {message} ) : variant === "lines" ? ( <> {Array.from({ length: lines }, (_, i) => ( 1 ? "w-2/3" : WIDTHS[i % WIDTHS.length])} /> ))} {message} ) : ( {message} )}

); } export { loaderVariants as chatLoaderVariants }; 31:Ta4a,import { cva, type VariantProps } from "class-variance-authority"; import type { ComponentProps } from "react"; import { TextShimmer } from "@/components/ui/text-shimmer"; import { cn } from "@/lib/utils"; /** * The shimmer sweeps over `currentColor`, so the label's color is just a text color on the * wrapper. `tone` picks a token, never a raw color. */ const labelVariants = cva("inline-flex max-w-full items-center align-baseline", { variants: { tone: { muted: "text-muted-foreground", foreground: "text-foreground", primary: "text-primary", info: "text-info", success: "text-success", warning: "text-warning", error: "text-destructive", }, size: { sm: "text-xs", default: "text-sm", lg: "text-base", }, }, defaultVariants: { tone: "muted", size: "default" }, }); export type TextShimmerLabelProps = Omit, "children"> & VariantProps & { children: string; /** * "component" runs Kobra's TextShimmer (its sweep width follows the string length). * "css" uses the `shimmer` utility: no inline style, no JS, the cheapest option for dense lists. */ engine?: "component" | "css"; /** Seconds per sweep. Only the component engine takes it; the CSS engine is a fixed 2s. */ duration?: number; /** Width of the highlight, in px per character. Component engine only. */ spread?: number; /** `false` renders plain, static text in the same color (the finished state). */ active?: boolean; }; /** * A label that shimmers while something is working ("Thinking", "Searching the plan"). * Reduced motion drops the sweep and shows the label at full strength. */ export function TextShimmerLabel({ children, tone, size, engine = "component", duration, spread, active = true, className, ...props }: TextShimmerLabelProps) { const reduced = "motion-reduce:[&>span]:![-webkit-text-fill-color:currentColor] motion-reduce:[&>span]:![animation:none] motion-reduce:[&>span]:![background-image:none]"; return ( {!active ? ( children ) : engine === "css" ? ( {children} ) : ( {children} )} ); } export { labelVariants as textShimmerLabelVariants }; 32:T68a,"use client"; import { useState } from "react"; import { Button } from "@/components/ui/button"; import { DemoPage, DemoSection } from "../../_shared/variant-frame"; import { ChatLoader } from "./chat-loader"; export function ChatLoaderDemo() { const [round, setRound] = useState(0); return (

); } 33:T5ab,import type { BlockMeta } from "../../../lib/block-meta"; export const chatLoaderMeta: BlockMeta = { slug: "chat-loader", title: "Chat loader", description: "What a reply looks like before it has started: typing dots, skeleton lines in the shape of text, or a shimmering status word. Static under reduced motion, announced as a status, optional start delay.", group: "ai", kobraDeps: ["skeleton", "text-shimmer"], files: [ "blocks/ai/chat-loader/chat-loader.tsx", "blocks/ai/text-shimmer-label/text-shimmer-label.tsx", ], props: [ { name: "variant", type: "'dots' | 'lines' | 'text'", default: "'dots'", description: "Typing dots, skeleton lines, or a shimmering word." }, { name: "size", type: "'sm' | 'default' | 'lg'", default: "'default'", description: "Dot, line and type size." }, { name: "lines", type: "1 | 2 | 3 | 4", default: "3", description: "Skeleton lines for the lines variant." }, { name: "label", type: "string", description: "Visible word for the text variant; screen-reader message for the others." }, { name: "bubble", type: "boolean", default: "false", description: "Put the dots in an assistant-style pill." }, { name: "delay", type: "number", default: "0", description: "Milliseconds before anything shows." }, { name: "className", type: "string", description: "Layout slotting on the root." }, ], tags: ["ai", "loading", "typing", "skeleton"], 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":"/#ai","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"AI"}]}],["$","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 loader"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Chat loader"}],["$","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":"What a reply looks like before it has started: typing dots, skeleton lines in the shape of text, or a shimmering status word. Static under reduced motion, announced as a status, optional start delay."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"chat-loader","group":"ai","minHeight":640,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/ai/chat-loader/chat-loader.tsx","code":"$30"},{"path":"blocks/ai/text-shimmer-label/text-shimmer-label.tsx","code":"$31"},{"path":"blocks/ai/chat-loader/demo.tsx","code":"$32"},{"path":"blocks/ai/chat-loader/meta.ts","code":"$33"}]}],"props":"$L34"}],"$L35"]}]