Reticle

npx @glasskit-ui/cli add reticle

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/reticle.tsximport { cn } from "../lib/utils";/** * <Reticle> — an aim-to-select target: four corner brackets framing the * center of the lens. `active` brightens it over a hittable target. * * Platform note (2026-06): there is no gaze/eye-tracking API for web apps — * the Display can't tell you what the wearer looks at. `active` is app-driven * state: derive it from your own logic (e.g. a projected world point entering * the center region), not from a sensor this component could read. * * WORLD-ANCHORED but symmetric. The corners use PHYSICAL CSS positioning (not * logical), so `dir` can never flip them. No inline style — static class rules. */export function Reticle({  active = false,  label,  className,}: {  active?: boolean;  /** a11y label for the aim target. */  label?: string;  className?: string;}) {  return (    <div      className={cn("gk-reticle", active && "gk-reticle--active", className)}      role="img"      aria-label={label ?? "Aim target"}    >      <span className="gk-reticle__corner gk-reticle__corner--tl" />      <span className="gk-reticle__corner gk-reticle__corner--tr" />      <span className="gk-reticle__corner gk-reticle__corner--bl" />      <span className="gk-reticle__corner gk-reticle__corner--br" />    </div>  );}