Screen

npx @glasskit-ui/cli add screen

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/screen.tsximport type { ReactNode } from "react";import { cn } from "../lib/utils";/** * <Screen> — the on-lens layout shell: a status region (block-start), a * centered stage (the one task), and a cue region (block-end). Renders * *inside* a <GlassViewport>; it does not own the 600×600 surface. * * Keeps ≥50–60% of the surface pure black (apple-feel §3) by reserving * the center for a single readout/action and pinning chrome to the edges. */export function Screen({  status,  cue,  children,  className,}: {  /** Optional top region (e.g. a Heading). System status is OS chrome, not an   * app component, so most app screens leave this empty. */  status?: ReactNode;  /** Bottom hint line — typically a <Cue>. */  cue?: ReactNode;  /** The stage: the one task for this view. */  children: ReactNode;  className?: string;}) {  return (    <div className={cn("gk-screen", className)}>      {status ? <div className="gk-screen__status">{status}</div> : null}      <div className="gk-screen__stage">{children}</div>      {cue ? <div className="gk-screen__cue">{cue}</div> : null}    </div>  );}