Cue

npx @glasskit-ui/cli add cue

npm install @glasskit-ui/react

// components/lib/utils.tsexport type ClassValue = string | number | null | undefined | false;/** * Join truthy class names. Dependency-free on purpose: the lens components * style via bespoke semantic classes (no conflicting Tailwind utilities to * de-dupe), so this needs no clsx/tailwind-merge and resolves from anywhere * the registry is vendored. */export function cn(...inputs: ClassValue[]): string {  return inputs.filter(Boolean).join(" ");}/** * Accessible name from a free-form `label` prop: the label itself when it's a * plain string, otherwise undefined (a ReactNode can't become an aria-label). */export function stringLabel(label: unknown): string | undefined {  return typeof label === "string" ? label : undefined;}

// components/glasskit/cue.tsximport type { ReactNode } from "react";import { cn } from "../lib/utils";/** * <Cue> — a caption / hint line: what to do next, or a transient status * ("Listening…"). Pure display. Caption-tier type, dim by default; set * `emphasis="accent"` for a live state. No glow on this body text * (glow on running text kills legibility). */export function Cue({  children,  emphasis = "default",  icon,  className,}: {  children: ReactNode;  /** Visual weight — accent marks a live/active state. */  emphasis?: "default" | "accent";  /** Optional leading glyph — typically a <GlowIcon>. */  icon?: ReactNode;  className?: string;}) {  return (    // The screen's narration line — `status` announces updates politely    // without stealing focus (one Cue per screen keeps this sane).    <p      role="status"      className={cn(        "gk-cue t-caption",        emphasis === "accent" && "gk-cue--accent",        className,      )}    >      {icon}      {children}    </p>  );}