Dictation

npx @glasskit-ui/cli add dictation

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/dictation.tsximport type { ReactNode } from "react";import { cn } from "../lib/utils";/** * <Dictation> — the voice-to-text surface (there is no keyboard on the lens — * text is voice or Neural-Band handwriting). A live waveform + the running * transcript; `listening` animates the bars. Pure display — you own the speech * recognition and feed `transcript`. */export function Dictation({  transcript,  listening = true,  placeholder = "Speak now…",  className,}: {  transcript?: ReactNode;  listening?: boolean;  placeholder?: ReactNode;  className?: string;}) {  return (    <div      className={cn(        "gk-dictation",        listening && "gk-dictation--listening",        className,      )}      role="status"    >      <span className="gk-dictation__wave" aria-hidden="true">        <span />        <span />        <span />        <span />        <span />      </span>      <span className="gk-dictation__text t-readout">        {transcript != null && transcript !== "" ? (          transcript        ) : (          <span className="gk-dictation__placeholder">{placeholder}</span>        )}      </span>    </div>  );}