# Cyberdeck UI

> Copy-paste cyberpunk components for the web, in HTML/CSS and React.

A free, open-source library of cyberpunk UI components: neon buttons, glitch text, HUD cards, forms, menus, a command palette, backgrounds and more. Every component comes as plain HTML/CSS and as a typed React component, with no dependencies.

56 components in 9 categories. Free and open source (MIT). Made by Ricardo Gonçalves (https://riagoncalves.dev).

How to use a component:

1. Optionally load the fonts from Google Fonts: Orbitron (display), Rajdhani (body) and Share Tech Mono (mono).
2. Add tokens.css once, globally. It defines the --cy-* CSS custom properties (colours, fonts, corner size) that every component uses.
3. Copy the component: its HTML + CSS (+ a small vanilla JS file for interactive ones), or its React .tsx file + the same CSS.

Conventions: class names start with "cy-", CSS variables with "--cy-". No dependencies and no build step. Animations respect prefers-reduced-motion, and interactive components use native elements (<dialog>, <details>, checkboxes, radios, range inputs) with keyboard support and ARIA where needed.

## Design tokens (tokens.css)

Add this once, before any component.

```css
/*
 * Cyberdeck UI — design tokens.
 * Add this once (globally) before using any component.
 *
 * Fonts (optional, but the components are designed around them):
 * <link rel="preconnect" href="https://fonts.googleapis.com">
 * <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 * <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
 */
:root {
  /* Surfaces */
  --cy-bg: #07050d;
  --cy-surface: #0d0a17;
  --cy-surface-2: #151024;
  --cy-border: rgba(0, 240, 255, 0.18);

  /* Neon accents */
  --cy-cyan: #00f0ff;
  --cy-pink: #ff2a6d;
  --cy-yellow: #fcee0a;
  --cy-purple: #b967ff;
  --cy-green: #05ffa1;

  /* Text */
  --cy-text: #e5e7eb;
  --cy-muted: #9ca3af;
  --cy-dim: #6b7280;

  /* Typography */
  --cy-font-display: 'Orbitron', ui-sans-serif, system-ui, sans-serif;
  --cy-font-body: 'Rajdhani', ui-sans-serif, system-ui, sans-serif;
  --cy-font-mono: 'Share Tech Mono', ui-monospace, monospace;

  /* Shape & motion */
  --cy-cut: 14px; /* size of clipped corners */
  --cy-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --cy-glow-cyan: 0 0 6px rgba(0, 240, 255, 0.6), 0 0 18px rgba(0, 240, 255, 0.35);
  --cy-glow-pink: 0 0 6px rgba(255, 42, 109, 0.6), 0 0 18px rgba(255, 42, 109, 0.35);
}
```

## Components

### Buttons / Neon Button

URL: https://cyberdeck-ui.netlify.app/components/buttons#neon-button

The primary action: solid yellow with clipped corners, turning cyan on hover and focus.

React usage:

```tsx
<NeonButton onClick={jackIn}>Jack in</NeonButton>
```

#### neon-button.html

```html
<button class="cy-btn-neon" type="button">Jack in</button>
<button class="cy-btn-neon" type="button" disabled>Offline</button>
```

#### neon-button.css

```css
.cy-btn-neon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.75rem;
  border: 0;
  background: var(--cy-yellow);
  color: #000;
  font-family: var(--cy-font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: polygon(
    0 0, calc(100% - var(--cy-cut)) 0, 100% var(--cy-cut),
    100% 100%, var(--cy-cut) 100%, 0 calc(100% - var(--cy-cut))
  );
  transition: background-color 0.2s var(--cy-ease), transform 0.2s var(--cy-ease);
}

/* clip-path also clips outlines, so focus uses the same colour change as hover */
.cy-btn-neon:hover:not(:disabled),
.cy-btn-neon:focus-visible {
  background: var(--cy-cyan);
  outline: none;
}

.cy-btn-neon:active:not(:disabled) {
  transform: translateY(1px);
}

.cy-btn-neon:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
```

#### NeonButton.tsx

```tsx
import type { ButtonHTMLAttributes } from 'react';
import './neon-button.css';

export function NeonButton({ className = '', type = 'button', ...props }: ButtonHTMLAttributes<HTMLButtonElement>) {
  return <button type={type} className={`cy-btn-neon ${className}`.trim()} {...props} />;
}
```

---

### Buttons / Outline Button

URL: https://cyberdeck-ui.netlify.app/components/buttons#outline-button

A secondary action with a neon border and glow. Comes in cyan and pink.

React usage:

```tsx
<OutlineButton>Get in touch</OutlineButton>
<OutlineButton tone="pink">Abort</OutlineButton>
```

#### outline-button.html

```html
<button class="cy-btn-outline" type="button">Get in touch</button>
<button class="cy-btn-outline cy-btn-outline--pink" type="button">Abort</button>
```

#### outline-button.css

```css
.cy-btn-outline {
  --cy-btn: 0 240 255; /* RGB channels of the accent colour */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.75rem;
  border: 1px solid rgb(var(--cy-btn) / 0.6);
  background: transparent;
  color: rgb(var(--cy-btn));
  font-family: var(--cy-font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.cy-btn-outline--pink {
  --cy-btn: 255 42 109;
}

.cy-btn-outline:hover,
.cy-btn-outline:focus-visible {
  outline: none;
  border-color: rgb(var(--cy-btn));
  background: rgb(var(--cy-btn) / 0.1);
  box-shadow: 0 0 20px rgb(var(--cy-btn) / 0.35), inset 0 0 12px rgb(var(--cy-btn) / 0.15);
}

.cy-btn-outline:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
```

#### OutlineButton.tsx

```tsx
import type { ButtonHTMLAttributes } from 'react';
import './outline-button.css';

interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
  tone?: 'cyan' | 'pink';
}

export function OutlineButton({ tone = 'cyan', className = '', type = 'button', ...props }: Props) {
  const toneClass = tone === 'pink' ? 'cy-btn-outline--pink' : '';

  return <button type={type} className={`cy-btn-outline ${toneClass} ${className}`.trim()} {...props} />;
}
```

---

### Buttons / Glitch Button

URL: https://cyberdeck-ui.netlify.app/components/buttons#glitch-button

The label splits into cyan and magenta slices on hover and keyboard focus.

React usage:

```tsx
<GlitchButton>Hack the grid</GlitchButton>
```

#### glitch-button.html

```html
<button class="cy-btn-glitch" type="button" data-text="Hack the grid">Hack the grid</button>
```

#### glitch-button.css

```css
.cy-btn-glitch {
  position: relative;
  padding: 0.85rem 2rem;
  border: 1px solid var(--cy-pink);
  background: var(--cy-surface);
  color: var(--cy-text);
  font-family: var(--cy-font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: box-shadow 0.2s, color 0.2s;
}

/* Two copies of the label, sliced and offset while hovered */
.cy-btn-glitch::before,
.cy-btn-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: inherit;
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
}

.cy-btn-glitch::before { color: var(--cy-cyan); }
.cy-btn-glitch::after { color: var(--cy-pink); }

.cy-btn-glitch:hover,
.cy-btn-glitch:focus-visible {
  outline: none;
  color: #fff;
  box-shadow: 0 0 18px rgba(255, 42, 109, 0.45);
}

.cy-btn-glitch:hover::before,
.cy-btn-glitch:focus-visible::before {
  animation: cy-btn-glitch-a 0.45s steps(2) infinite;
}

.cy-btn-glitch:hover::after,
.cy-btn-glitch:focus-visible::after {
  animation: cy-btn-glitch-b 0.45s steps(2) infinite reverse;
}

@keyframes cy-btn-glitch-a {
  0% { clip-path: inset(20% 0 60% 0); transform: translate(-4px, 0); }
  25% { clip-path: inset(60% 0 10% 0); transform: translate(4px, 0); }
  50% { clip-path: inset(40% 0 40% 0); transform: translate(-2px, 0); }
  75% { clip-path: inset(80% 0 5% 0); transform: translate(3px, 0); }
  100% { clip-path: inset(10% 0 75% 0); transform: translate(-3px, 0); }
}

@keyframes cy-btn-glitch-b {
  0% { clip-path: inset(70% 0 10% 0); transform: translate(3px, 0); }
  25% { clip-path: inset(15% 0 70% 0); transform: translate(-3px, 0); }
  50% { clip-path: inset(50% 0 30% 0); transform: translate(2px, 0); }
  75% { clip-path: inset(5% 0 85% 0); transform: translate(-4px, 0); }
  100% { clip-path: inset(35% 0 45% 0); transform: translate(4px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .cy-btn-glitch::before,
  .cy-btn-glitch::after {
    display: none;
  }
}
```

#### GlitchButton.tsx

```tsx
import type { ButtonHTMLAttributes } from 'react';
import './glitch-button.css';

interface Props extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
  /** Plain text: the glitch layers repeat it via data-text. */
  children: string;
}

export function GlitchButton({ children, className = '', type = 'button', ...props }: Props) {
  return (
    <button type={type} data-text={children} className={`cy-btn-glitch ${className}`.trim()} {...props}>
      {children}
    </button>
  );
}
```

---

### Buttons / Bracket Button

URL: https://cyberdeck-ui.netlify.app/components/buttons#bracket-button

A minimal terminal-style button whose brackets spread apart on hover.

React usage:

```tsx
<BracketButton>Execute</BracketButton>
```

#### bracket-button.html

```html
<button class="cy-btn-bracket" type="button">Execute</button>
```

#### bracket-button.css

```css
.cy-btn-bracket {
  position: relative;
  padding: 0.6rem 1.5rem;
  border: 0;
  background: transparent;
  color: var(--cy-text);
  font-family: var(--cy-font-mono);
  font-size: 1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s, text-shadow 0.2s;
}

.cy-btn-bracket::before,
.cy-btn-bracket::after {
  position: absolute;
  top: 50%;
  color: var(--cy-pink);
  transform: translateY(-50%);
  transition: transform 0.2s var(--cy-ease);
}

.cy-btn-bracket::before { content: '['; left: 0; }
.cy-btn-bracket::after { content: ']'; right: 0; }

.cy-btn-bracket:hover,
.cy-btn-bracket:focus-visible {
  outline: none;
  color: var(--cy-cyan);
  text-shadow: var(--cy-glow-cyan);
}

.cy-btn-bracket:hover::before,
.cy-btn-bracket:focus-visible::before {
  transform: translate(-6px, -50%);
}

.cy-btn-bracket:hover::after,
.cy-btn-bracket:focus-visible::after {
  transform: translate(6px, -50%);
}
```

#### BracketButton.tsx

```tsx
import type { ButtonHTMLAttributes } from 'react';
import './bracket-button.css';

export function BracketButton({ className = '', type = 'button', ...props }: ButtonHTMLAttributes<HTMLButtonElement>) {
  return <button type={type} className={`cy-btn-bracket ${className}`.trim()} {...props} />;
}
```

---

### Buttons / Icon Button

URL: https://cyberdeck-ui.netlify.app/components/buttons#icon-button

A square, glowing icon-only button with a required accessible label.

React usage:

```tsx
<IconButton label="Back to top" onClick={scrollToTop}>
  <ChevronUpIcon aria-hidden="true" />
</IconButton>
```

#### icon-button.html

```html
<button class="cy-icon-btn" type="button" aria-label="Back to top" title="Back to top">
  <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
    <path d="m6 15 6-6 6 6" />
  </svg>
</button>
```

#### icon-button.css

```css
.cy-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid rgba(0, 240, 255, 0.5);
  background: rgba(7, 5, 13, 0.85);
  color: var(--cy-cyan);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.2);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.cy-icon-btn:hover,
.cy-icon-btn:focus-visible {
  outline: none;
  background: var(--cy-cyan);
  color: #000;
  box-shadow: 0 0 24px rgba(0, 240, 255, 0.6);
}
```

#### IconButton.tsx

```tsx
import type { ButtonHTMLAttributes, ReactNode } from 'react';
import './icon-button.css';

interface Props extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
  /** Accessible name; icon-only buttons have no visible text. */
  label: string;
  /** The icon, e.g. an inline SVG with aria-hidden="true". */
  children: ReactNode;
}

export function IconButton({ label, children, className = '', type = 'button', ...props }: Props) {
  return (
    <button type={type} aria-label={label} title={label} className={`cy-icon-btn ${className}`.trim()} {...props}>
      {children}
    </button>
  );
}
```

---

### Typography / Glitch Text

URL: https://cyberdeck-ui.netlify.app/components/typography#glitch-text

A headline that glitches into cyan and magenta every few seconds, or only on hover.

React usage:

```tsx
<GlitchText text="Night Shift" />
<GlitchText text="Projects" as="h2" hoverOnly />
```

#### glitch-text.html

```html
<h1 class="cy-glitch" data-text="Night Shift">Night Shift</h1>
```

#### glitch-text.css

```css
.cy-glitch {
  position: relative;
  display: inline-block;
  margin: 0;
  color: #fff;
  font-family: var(--cy-font-display);
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: var(--cy-glow-pink);
}

.cy-glitch::before,
.cy-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

.cy-glitch::before {
  color: var(--cy-cyan);
  transform: translate(-2px, 0);
  animation: cy-glitch-top 3.5s infinite steps(1);
}

.cy-glitch::after {
  color: var(--cy-pink);
  transform: translate(2px, 0);
  animation: cy-glitch-bottom 3.5s infinite steps(1);
}

/* Only glitch while hovered */
.cy-glitch--hover::before,
.cy-glitch--hover::after {
  animation-duration: 1.2s;
  animation-play-state: paused;
}

.cy-glitch--hover:hover::before,
.cy-glitch--hover:hover::after {
  animation-play-state: running;
}

@keyframes cy-glitch-top {
  0%, 88%, 100% { clip-path: inset(0 0 100% 0); }
  89% { clip-path: inset(10% 0 60% 0); transform: translate(-6px, -1px); }
  91% { clip-path: inset(40% 0 35% 0); transform: translate(5px, 1px); }
  93% { clip-path: inset(70% 0 5% 0); transform: translate(-3px, 0); }
  95% { clip-path: inset(0 0 100% 0); }
}

@keyframes cy-glitch-bottom {
  0%, 89%, 100% { clip-path: inset(100% 0 0 0); }
  90% { clip-path: inset(55% 0 20% 0); transform: translate(6px, 1px); }
  92% { clip-path: inset(15% 0 70% 0); transform: translate(-5px, -1px); }
  94% { clip-path: inset(80% 0 2% 0); transform: translate(3px, 0); }
  96% { clip-path: inset(100% 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  .cy-glitch::before,
  .cy-glitch::after {
    display: none;
  }
}
```

#### GlitchText.tsx

```tsx
import './glitch-text.css';

interface Props {
  text: string;
  as?: 'h1' | 'h2' | 'h3' | 'p' | 'span';
  /** Glitch only on hover instead of every few seconds. */
  hoverOnly?: boolean;
  className?: string;
}

export function GlitchText({ text, as: Tag = 'h1', hoverOnly = false, className = '' }: Props) {
  const classes = `cy-glitch ${hoverOnly ? 'cy-glitch--hover' : ''} ${className}`.trim();

  return (
    <Tag data-text={text} className={classes}>
      {text}
    </Tag>
  );
}
```

---

### Typography / Neon Text

URL: https://cyberdeck-ui.netlify.app/components/typography#neon-text

Glowing sign text in four colours, with an optional loose-wire flicker.

React usage:

```tsx
<NeonText>Open 24/7</NeonText>
<NeonText tone="pink" flicker>No signal</NeonText>
```

#### neon-text.html

```html
<p class="cy-neon">Open 24/7</p>
<p class="cy-neon cy-neon--pink cy-neon--flicker">No signal</p>
```

#### neon-text.css

```css
.cy-neon {
  --cy-neon: 0 240 255; /* RGB channels of the glow */
  margin: 0;
  color: #fff;
  font-family: var(--cy-font-display);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow:
    0 0 4px #fff,
    0 0 10px rgb(var(--cy-neon)),
    0 0 24px rgb(var(--cy-neon)),
    0 0 48px rgb(var(--cy-neon) / 0.6);
}

.cy-neon--pink { --cy-neon: 255 42 109; }
.cy-neon--yellow { --cy-neon: 252 238 10; }
.cy-neon--green { --cy-neon: 5 255 161; }

/* A sign with a loose wire */
.cy-neon--flicker {
  animation: cy-neon-flicker 4s infinite;
}

@keyframes cy-neon-flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0.35; text-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cy-neon--flicker {
    animation: none;
  }
}
```

#### NeonText.tsx

```tsx
import type { ReactNode } from 'react';
import './neon-text.css';

interface Props {
  children: ReactNode;
  tone?: 'cyan' | 'pink' | 'yellow' | 'green';
  flicker?: boolean;
  as?: 'p' | 'span' | 'h1' | 'h2' | 'h3';
  className?: string;
}

export function NeonText({ children, tone = 'cyan', flicker = false, as: Tag = 'p', className = '' }: Props) {
  const classes = [
    'cy-neon',
    tone !== 'cyan' && `cy-neon--${tone}`,
    flicker && 'cy-neon--flicker',
    className,
  ].filter(Boolean).join(' ');

  return <Tag className={classes}>{children}</Tag>;
}
```

---

### Typography / Terminal Prompt

URL: https://cyberdeck-ui.netlify.app/components/typography#terminal-prompt

A mono label with a prompt arrow and a blinking cursor.

React usage:

```tsx
<TerminalPrompt>Hi, I'm</TerminalPrompt>
```

#### terminal-prompt.html

```html
<p class="cy-prompt">Hi, I'm</p>
```

#### terminal-prompt.css

```css
.cy-prompt {
  margin: 0;
  color: var(--cy-cyan);
  font-family: var(--cy-font-mono);
  font-size: 1rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.cy-prompt::before {
  content: '> ';
}

.cy-prompt::after {
  content: '_';
  margin-left: 2px;
  animation: cy-prompt-blink 1s steps(1) infinite;
}

@keyframes cy-prompt-blink {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cy-prompt::after {
    animation: none;
  }
}
```

#### TerminalPrompt.tsx

```tsx
import type { ReactNode } from 'react';
import './terminal-prompt.css';

interface Props {
  children: ReactNode;
  className?: string;
}

export function TerminalPrompt({ children, className = '' }: Props) {
  return <p className={`cy-prompt ${className}`.trim()}>{children}</p>;
}
```

---

### Typography / Section Heading

URL: https://cyberdeck-ui.netlify.app/components/typography#section-heading

Numbered section title with a glowing divider and subtitle. Glitches on hover.

React usage:

```tsx
<SectionHeading index={1} title="Projects" subtitle="Things I've built and launched" />
```

#### section-heading.html

```html
<div class="cy-section-heading">
  <span class="cy-section-heading__index">// 01</span>
  <h2 class="cy-section-heading__title" data-text="Projects">Projects</h2>
  <div class="cy-section-heading__divider" aria-hidden="true"><span></span><i></i><span></span></div>
  <p class="cy-section-heading__subtitle">Things I've built and launched</p>
</div>
```

#### section-heading.css

```css
.cy-section-heading {
  text-align: center;
}

.cy-section-heading__index {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--cy-pink);
  font-family: var(--cy-font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.3em;
}

.cy-section-heading__title {
  position: relative;
  display: inline-block;
  margin: 0 0 1rem;
  color: #fff;
  font-family: var(--cy-font-display);
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: var(--cy-glow-cyan);
}

/* Glitches on hover */
.cy-section-heading__title::before,
.cy-section-heading__title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  clip-path: inset(0 0 100% 0);
}

.cy-section-heading__title::before { color: var(--cy-cyan); }
.cy-section-heading__title::after { color: var(--cy-pink); }

.cy-section-heading__title:hover::before {
  animation: cy-sh-glitch 0.6s steps(2) infinite;
}

.cy-section-heading__title:hover::after {
  animation: cy-sh-glitch 0.6s steps(2) infinite reverse;
}

@keyframes cy-sh-glitch {
  0% { clip-path: inset(10% 0 60% 0); transform: translate(-4px, 0); }
  33% { clip-path: inset(50% 0 25% 0); transform: translate(4px, 0); }
  66% { clip-path: inset(75% 0 5% 0); transform: translate(-2px, 0); }
  100% { clip-path: inset(30% 0 50% 0); transform: translate(3px, 0); }
}

.cy-section-heading__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.cy-section-heading__divider span {
  width: 4rem;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(0, 240, 255, 0.7));
}

.cy-section-heading__divider span:last-child {
  transform: scaleX(-1);
}

.cy-section-heading__divider i {
  width: 6px;
  height: 6px;
  background: var(--cy-yellow);
  transform: rotate(45deg);
}

.cy-section-heading__subtitle {
  margin: 0;
  color: var(--cy-muted);
  font-family: var(--cy-font-mono);
  font-size: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .cy-section-heading__title::before,
  .cy-section-heading__title::after {
    display: none;
  }
}
```

#### SectionHeading.tsx

```tsx
import './section-heading.css';

interface Props {
  title: string;
  subtitle?: string;
  /** Shown above the title as "// 01". */
  index?: number;
  as?: 'h1' | 'h2' | 'h3';
}

export function SectionHeading({ title, subtitle, index, as: Heading = 'h2' }: Props) {
  return (
    <div className='cy-section-heading'>
      {index !== undefined && (
        <span className='cy-section-heading__index'>{`// ${String(index).padStart(2, '0')}`}</span>
      )}
      <Heading className='cy-section-heading__title' data-text={title}>{title}</Heading>
      <div className='cy-section-heading__divider' aria-hidden='true'><span /><i /><span /></div>
      {subtitle && <p className='cy-section-heading__subtitle'>{subtitle}</p>}
    </div>
  );
}
```

---

### Typography / Decrypt Text

URL: https://cyberdeck-ui.netlify.app/components/typography#decrypt-text

Scrambled glyphs resolve into the real text on load and on hover. Screen readers get the text immediately.

React usage:

```tsx
<DecryptText text="Access granted. Welcome back, operator." />
```

#### decrypt-text.html

```html
<p class="cy-decrypt" data-cy-decrypt>Access granted. Welcome back, operator.</p>
```

#### decrypt-text.css

```css
.cy-decrypt {
  margin: 0;
  color: var(--cy-green);
  font-family: var(--cy-font-mono);
  font-size: 1.25rem;
  letter-spacing: 0.08em;
  cursor: default;
}

.cy-decrypt__noise {
  color: var(--cy-pink);
  opacity: 0.8;
}

.cy-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
```

#### decrypt-text.js

```js
// Scrambles [data-cy-decrypt] text into place on load and on hover.
// Screen readers get the final text straight away; the animation is aria-hidden.
(() => {
  const GLYPHS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#%&@$*<>/';
  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  const randomGlyph = () => GLYPHS[Math.floor(Math.random() * GLYPHS.length)];

  document.querySelectorAll('[data-cy-decrypt]').forEach((el) => {
    const text = el.textContent.trim();
    const label = document.createElement('span');
    const visual = document.createElement('span');
    const revealed = document.createElement('span');
    const noise = document.createElement('span');

    label.className = 'cy-sr-only';
    label.textContent = text;
    visual.setAttribute('aria-hidden', 'true');
    noise.className = 'cy-decrypt__noise';
    visual.append(revealed, noise);
    el.replaceChildren(label, visual);

    let timer;

    const play = () => {
      clearInterval(timer);
      if (reduceMotion) {
        revealed.textContent = text;
        noise.textContent = '';
        return;
      }

      let count = 0;
      timer = setInterval(() => {
        count += 1;
        revealed.textContent = text.slice(0, count);
        noise.textContent = [...text.slice(count)].map((c) => (c === ' ' ? ' ' : randomGlyph())).join('');
        if (count >= text.length) clearInterval(timer);
      }, 35);
    };

    el.addEventListener('mouseenter', play);
    play();
  });
})();
```

#### DecryptText.tsx

```tsx
'use client';

import { useCallback, useEffect, useRef, useState } from 'react';
import './decrypt-text.css';

const GLYPHS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#%&@$*<>/';

const scramble = (text: string) =>
  [...text].map((c) => (c === ' ' ? ' ' : GLYPHS[Math.floor(Math.random() * GLYPHS.length)])).join('');

interface Props {
  text: string;
  /** Milliseconds per revealed character. */
  speed?: number;
  className?: string;
}

export function DecryptText({ text, speed = 35, className = '' }: Props) {
  const [count, setCount] = useState(0);
  const [noise, setNoise] = useState('');
  const timer = useRef<ReturnType<typeof setInterval> | undefined>(undefined);

  const play = useCallback(() => {
    clearInterval(timer.current);
    // With reduced motion, the first tick reveals everything.
    const step = window.matchMedia('(prefers-reduced-motion: reduce)').matches ? text.length : 1;

    let next = 0;
    timer.current = setInterval(() => {
      next = Math.min(text.length, next + step);
      setCount(next);
      setNoise(scramble(text.slice(next)));
      if (next >= text.length) clearInterval(timer.current);
    }, speed);
  }, [text, speed]);

  useEffect(() => {
    play();
    return () => clearInterval(timer.current);
  }, [play]);

  return (
    <p className={`cy-decrypt ${className}`.trim()} onMouseEnter={play}>
      <span className='cy-sr-only'>{text}</span>
      <span aria-hidden='true'>
        {text.slice(0, count)}
        <span className='cy-decrypt__noise'>{noise}</span>
      </span>
    </p>
  );
}
```

---

### Typography / Typewriter

URL: https://cyberdeck-ui.netlify.app/components/typography#typewriter

Types out a list of phrases one by one, deleting and looping. Screen readers get the full text once.

React usage:

```tsx
const phrases = ['Booting neural link…', 'Bypassing ICE…', 'Access granted.'];

<Typewriter phrases={phrases} />
```

#### typewriter.html

```html
<p class="cy-typewriter" data-cy-typewriter='["Booting neural link…", "Bypassing ICE…", "Access granted."]'>
  <span class="cy-typewriter__sr">Booting neural link… Bypassing ICE… Access granted.</span>
  <span class="cy-typewriter__text" aria-hidden="true"></span><span class="cy-typewriter__caret" aria-hidden="true"></span>
</p>
```

#### typewriter.css

```css
.cy-typewriter {
  min-height: 1.5em;
  margin: 0;
  color: var(--cy-green);
  font-family: var(--cy-font-mono);
  font-size: 1.35rem;
  letter-spacing: 0.05em;
  text-shadow: 0 0 8px rgba(5, 255, 161, 0.5);
}

.cy-typewriter__text {
  white-space: pre;
}

.cy-typewriter__caret {
  display: inline-block;
  width: 0.6em;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: currentColor;
  box-shadow: 0 0 8px rgba(5, 255, 161, 0.8);
  animation: cy-typewriter-blink 1s steps(1) infinite;
}

/* The full text for screen readers; the animated copy is hidden from them. */
.cy-typewriter__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@keyframes cy-typewriter-blink {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cy-typewriter__caret {
    animation: none;
  }
}
```

#### typewriter.js

```js
// Types each phrase, pauses, deletes it and moves on to the next, forever.
// With reduced motion, the first phrase is shown as is.
document.querySelectorAll('[data-cy-typewriter]').forEach((root) => {
  const phrases = JSON.parse(root.dataset.cyTypewriter);
  const output = root.querySelector('.cy-typewriter__text');

  if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
    output.textContent = phrases[0];
    return;
  }

  let phrase = 0;
  let length = 0;
  let deleting = false;

  const tick = () => {
    const text = phrases[phrase];
    length += deleting ? -1 : 1;
    output.textContent = text.slice(0, length);

    let delay = deleting ? 30 : 70;
    if (!deleting && length >= text.length) {
      deleting = true;
      delay = 1600;
    } else if (deleting && length <= 0) {
      deleting = false;
      phrase = (phrase + 1) % phrases.length;
      delay = 400;
    }
    setTimeout(tick, delay);
  };

  tick();
});
```

#### Typewriter.tsx

```tsx
'use client';

import { useEffect, useState } from 'react';
import './typewriter.css';

interface Props {
  /** Define the array outside the component (or memoize it) so the animation doesn't restart on every render. */
  phrases: string[];
  /** Milliseconds per typed character. */
  typeSpeed?: number;
  /** Milliseconds per deleted character. */
  deleteSpeed?: number;
  /** Milliseconds a finished phrase stays on screen. */
  pause?: number;
  as?: 'p' | 'span' | 'h1' | 'h2' | 'h3';
}

export function Typewriter({ phrases, typeSpeed = 70, deleteSpeed = 30, pause = 1600, as: Tag = 'p' }: Props) {
  const [text, setText] = useState('');

  useEffect(() => {
    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    let phrase = 0;
    let length = 0;
    let deleting = false;
    let timer = 0;

    const tick = () => {
      if (reducedMotion) {
        setText(phrases[0] ?? '');
        return;
      }

      const current = phrases[phrase] ?? '';
      length += deleting ? -1 : 1;
      setText(current.slice(0, length));

      let delay = deleting ? deleteSpeed : typeSpeed;
      if (!deleting && length >= current.length) {
        deleting = true;
        delay = pause;
      } else if (deleting && length <= 0) {
        deleting = false;
        phrase = (phrase + 1) % phrases.length;
        delay = 400;
      }
      timer = window.setTimeout(tick, delay);
    };

    timer = window.setTimeout(tick, 0);
    return () => window.clearTimeout(timer);
  }, [phrases, typeSpeed, deleteSpeed, pause]);

  return (
    <Tag className='cy-typewriter'>
      <span className='cy-typewriter__sr'>{phrases.join(' ')}</span>
      <span className='cy-typewriter__text' aria-hidden='true'>{text}</span>
      <span className='cy-typewriter__caret' aria-hidden='true' />
    </Tag>
  );
}
```

---

### Typography / Ticker

URL: https://cyberdeck-ui.netlify.app/components/typography#ticker

A scrolling news ticker with a live label. Pauses on hover and stops for reduced motion.

React usage:

```tsx
<Ticker
  label="Live"
  items={['Grid sector 7 back online', 'Transit line 3 delayed 12 min', 'Market index +2.4%']}
/>
```

#### ticker.html

```html
<div class="cy-ticker" style="--cy-ticker-duration: 30s">
  <span class="cy-ticker__label">Live</span>
  <div class="cy-ticker__viewport">
    <ul class="cy-ticker__track">
      <li>Grid sector 7 back online</li>
      <li>Rain advisory for the lower district</li>
      <li>Transit line 3 delayed 12 min</li>
      <li>New firmware 4.2.1 available</li>
      <li>Market index +2.4%</li>
    </ul>
    <!-- A copy of the list makes the loop seamless; hidden from screen readers. -->
    <ul class="cy-ticker__track" aria-hidden="true">
      <li>Grid sector 7 back online</li>
      <li>Rain advisory for the lower district</li>
      <li>Transit line 3 delayed 12 min</li>
      <li>New firmware 4.2.1 available</li>
      <li>Market index +2.4%</li>
    </ul>
  </div>
</div>
```

#### ticker.css

```css
.cy-ticker {
  --cy-ticker-duration: 30s;
  display: flex;
  width: 100%;
  overflow: hidden;
  border-block: 1px solid rgba(252, 238, 10, 0.35);
  background: var(--cy-surface);
  font-family: var(--cy-font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cy-ticker__label {
  position: relative;
  z-index: 1;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.5rem 0.6rem 1rem;
  background: var(--cy-yellow);
  color: #000;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

.cy-ticker__label::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cy-pink);
  animation: cy-ticker-pulse 1s ease-in-out infinite;
}

.cy-ticker__viewport {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
}

.cy-ticker__track {
  display: flex;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: cy-ticker-scroll var(--cy-ticker-duration) linear infinite;
}

.cy-ticker__track li {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.6rem 0 0.6rem 1.5rem;
  color: var(--cy-text);
  white-space: nowrap;
}

.cy-ticker__track li::before {
  content: '◆';
  color: var(--cy-pink);
  font-size: 0.6em;
}

.cy-ticker:hover .cy-ticker__track,
.cy-ticker:focus-within .cy-ticker__track {
  animation-play-state: paused;
}

@keyframes cy-ticker-scroll {
  to { transform: translateX(-100%); }
}

@keyframes cy-ticker-pulse {
  50% { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
  .cy-ticker__track,
  .cy-ticker__label::before {
    animation: none;
  }

  .cy-ticker__track[aria-hidden='true'] {
    display: none;
  }

  .cy-ticker__viewport {
    overflow-x: auto;
  }
}
```

#### Ticker.tsx

```tsx
import type { CSSProperties, ReactNode } from 'react';
import './ticker.css';

type TickerStyle = CSSProperties & { '--cy-ticker-duration': string };

interface Props {
  /** Use enough items to be wider than the ticker, or the loop shows a gap. */
  items: ReactNode[];
  label?: string;
  /** Seconds for one full loop. */
  duration?: number;
}

export function Ticker({ items, label = 'Live', duration = 30 }: Props) {
  const style: TickerStyle = { '--cy-ticker-duration': `${duration}s` };
  // The second copy makes the loop seamless and is hidden from screen readers.
  const track = (copy: boolean) => (
    <ul className='cy-ticker__track' aria-hidden={copy || undefined}>
      {items.map((item, index) => <li key={index}>{item}</li>)}
    </ul>
  );

  return (
    <div className='cy-ticker' style={style}>
      <span className='cy-ticker__label'>{label}</span>
      <div className='cy-ticker__viewport'>
        {track(false)}
        {track(true)}
      </div>
    </div>
  );
}
```

---

### Cards / HUD Card

URL: https://cyberdeck-ui.netlify.app/components/cards#hud-card

A project card with corner brackets that grow and glow on hover, plus tech tags.

React usage:

```tsx
<HudCard index={1} title="Ghostline" href="https://github.com/…" tags={['Rust', 'WebRTC']}>
  An encrypted messaging relay.
</HudCard>
```

#### hud-card.html

```html
<article class="cy-hud-card">
  <header class="cy-hud-card__header">
    <span class="cy-hud-card__index">[ 01 ]</span>
    <a class="cy-hud-card__link" href="#" aria-label="View repository">
      <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /><path d="M15 3h6v6" /><path d="M10 14 21 3" />
      </svg>
    </a>
  </header>
  <h3 class="cy-hud-card__title">Ghostline</h3>
  <p class="cy-hud-card__body">An encrypted messaging relay that routes every packet through three anonymous nodes before it reaches the grid.</p>
  <ul class="cy-hud-card__tags">
    <li>Rust</li>
    <li>WebRTC</li>
    <li>Redis</li>
  </ul>
</article>
```

#### hud-card.css

```css
.cy-hud-card {
  --cy-hud: var(--cy-cyan);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 22rem;
  padding: 1.5rem;
  border: 1px solid rgba(0, 240, 255, 0.15);
  background: rgba(13, 10, 23, 0.8);
  font-family: var(--cy-font-body);
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

/* HUD corner brackets */
.cy-hud-card::before,
.cy-hud-card::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  opacity: 0.5;
  pointer-events: none;
  transition: all 0.2s ease;
}

.cy-hud-card::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid var(--cy-hud);
  border-left: 2px solid var(--cy-hud);
}

.cy-hud-card::after {
  right: -1px;
  bottom: -1px;
  border-right: 2px solid var(--cy-hud);
  border-bottom: 2px solid var(--cy-hud);
}

.cy-hud-card:hover,
.cy-hud-card:focus-within {
  border-color: rgba(0, 240, 255, 0.5);
  transform: translateY(-4px);
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.12);
}

.cy-hud-card:hover::before,
.cy-hud-card:hover::after,
.cy-hud-card:focus-within::before,
.cy-hud-card:focus-within::after {
  width: 24px;
  height: 24px;
  opacity: 1;
  filter: drop-shadow(0 0 4px var(--cy-hud));
}

.cy-hud-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.cy-hud-card__index {
  color: var(--cy-pink);
  font-family: var(--cy-font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
}

.cy-hud-card__link {
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.2s;
}

.cy-hud-card__link:hover,
.cy-hud-card__link:focus-visible {
  color: var(--cy-cyan);
}

.cy-hud-card__title {
  margin: 0;
  color: #fff;
  font-family: var(--cy-font-display);
  font-size: 1.125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.2s, text-shadow 0.2s;
}

.cy-hud-card:hover .cy-hud-card__title {
  color: var(--cy-cyan);
  text-shadow: var(--cy-glow-cyan);
}

.cy-hud-card__body {
  flex: 1;
  margin: 0;
  color: var(--cy-muted);
  font-size: 1rem;
  line-height: 1.6;
}

.cy-hud-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cy-hud-card__tags li {
  padding: 0.25rem 0.6rem;
  border: 1px solid rgba(0, 240, 255, 0.25);
  background: rgba(0, 240, 255, 0.05);
  color: rgba(0, 240, 255, 0.8);
  font-family: var(--cy-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
```

#### HudCard.tsx

```tsx
import type { ReactNode } from 'react';
import './hud-card.css';

interface Props {
  title: string;
  children: ReactNode;
  /** Shown top-left as "[ 01 ]". */
  index?: number;
  tags?: string[];
  href?: string;
  linkLabel?: string;
}

export function HudCard({ title, children, index, tags = [], href, linkLabel = 'Open' }: Props) {
  return (
    <article className='cy-hud-card'>
      <header className='cy-hud-card__header'>
        <span className='cy-hud-card__index'>
          {index !== undefined && `[ ${String(index).padStart(2, '0')} ]`}
        </span>
        {href && (
          <a className='cy-hud-card__link' href={href} aria-label={linkLabel}>
            <svg viewBox='0 0 24 24' width='18' height='18' fill='none' stroke='currentColor' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' aria-hidden='true'>
              <path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6' /><path d='M15 3h6v6' /><path d='M10 14 21 3' />
            </svg>
          </a>
        )}
      </header>
      <h3 className='cy-hud-card__title'>{title}</h3>
      <p className='cy-hud-card__body'>{children}</p>
      {tags.length > 0 && (
        <ul className='cy-hud-card__tags'>
          {tags.map((tag) => <li key={tag}>{tag}</li>)}
        </ul>
      )}
    </article>
  );
}
```

---

### Cards / Skill Tile

URL: https://cyberdeck-ui.netlify.app/components/cards#skill-tile

Small icon tiles with a per-tile accent colour, for skills or features.

React usage:

```tsx
<ul className="cy-skill-grid">
  <SkillTile label="Frontend" icon={<CodeIcon />} />
  <SkillTile label="Databases" icon={<DbIcon />} accent="var(--cy-pink)" />
</ul>
```

#### skill-tile.html

```html
<ul class="cy-skill-grid">
  <li class="cy-skill-tile" style="--cy-hud: var(--cy-cyan)">
    <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true"><path d="m8 7-5 5 5 5M16 7l5 5-5 5M14 4l-4 16" /></svg>
    <span>Frontend</span>
  </li>
  <li class="cy-skill-tile" style="--cy-hud: var(--cy-pink)">
    <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true"><ellipse cx="12" cy="5" rx="8" ry="3" /><path d="M4 5v14c0 1.7 3.6 3 8 3s8-1.3 8-3V5M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3" /></svg>
    <span>Databases</span>
  </li>
  <li class="cy-skill-tile" style="--cy-hud: var(--cy-green)">
    <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true"><rect x="3" y="4" width="18" height="16" /><path d="m7 9 3 3-3 3M12 15h5" /></svg>
    <span>DevOps</span>
  </li>
  <li class="cy-skill-tile" style="--cy-hud: var(--cy-purple)">
    <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true"><rect x="6" y="6" width="12" height="12" /><path d="M9 2v4M15 2v4M9 18v4M15 18v4M2 9h4M2 15h4M18 9h4M18 15h4" /></svg>
    <span>AI</span>
  </li>
</ul>
```

#### skill-tile.css

```css
.cy-skill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cy-skill-tile {
  --cy-hud: var(--cy-cyan); /* accent; override per tile */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  width: 6.5rem;
  padding: 1rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(13, 10, 23, 0.8);
  color: var(--cy-hud);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.cy-skill-tile::before,
.cy-skill-tile::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  opacity: 0.5;
  transition: all 0.2s ease;
}

.cy-skill-tile::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid var(--cy-hud);
  border-left: 2px solid var(--cy-hud);
}

.cy-skill-tile::after {
  right: -1px;
  bottom: -1px;
  border-right: 2px solid var(--cy-hud);
  border-bottom: 2px solid var(--cy-hud);
}

.cy-skill-tile span {
  color: var(--cy-muted);
  font-family: var(--cy-font-mono);
  font-size: 0.75rem;
  text-align: center;
  transition: color 0.2s;
}

.cy-skill-tile:hover {
  border-color: var(--cy-hud);
  transform: translateY(-4px);
  box-shadow: 0 0 24px color-mix(in srgb, var(--cy-hud) 25%, transparent);
}

.cy-skill-tile:hover::before,
.cy-skill-tile:hover::after {
  width: 18px;
  height: 18px;
  opacity: 1;
}

.cy-skill-tile:hover span {
  color: #fff;
}
```

#### SkillTile.tsx

```tsx
import type { CSSProperties, ReactNode } from 'react';
import './skill-tile.css';

type AccentStyle = CSSProperties & { '--cy-hud'?: string };

interface Props {
  label: string;
  /** Icon, e.g. an inline SVG with aria-hidden="true". */
  icon: ReactNode;
  /** Any CSS colour; defaults to cyan. */
  accent?: string;
}

/** Render inside <ul className="cy-skill-grid">. */
export function SkillTile({ label, icon, accent }: Props) {
  const style: AccentStyle = accent ? { '--cy-hud': accent } : {};

  return (
    <li className='cy-skill-tile' style={style}>
      {icon}
      <span>{label}</span>
    </li>
  );
}
```

---

### Cards / Stat Card

URL: https://cyberdeck-ui.netlify.app/components/cards#stat-card

A big glowing number with a segmented meter and a caption.

React usage:

```tsx
<StatCard label="Neural sync" value={72} unit="%" delta="▲ 4.2% since last boot" />
```

#### stat-card.html

```html
<div class="cy-stat" style="--cy-stat: 72">
  <span class="cy-stat__label" id="cy-stat-sync">Neural sync</span>
  <span class="cy-stat__value">72<small>%</small></span>
  <div class="cy-stat__meter" role="meter" aria-labelledby="cy-stat-sync" aria-valuemin="0" aria-valuemax="100" aria-valuenow="72"><span></span></div>
  <span class="cy-stat__delta">▲ 4.2% since last boot</span>
</div>
```

#### stat-card.css

```css
.cy-stat {
  --cy-stat: 0; /* 0–100 */
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
  max-width: 18rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--cy-border);
  border-left: 3px solid var(--cy-cyan);
  background: var(--cy-surface);
}

.cy-stat__label {
  color: var(--cy-muted);
  font-family: var(--cy-font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.cy-stat__value {
  color: #fff;
  font-family: var(--cy-font-display);
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: var(--cy-glow-cyan);
}

.cy-stat__value small {
  margin-left: 0.15em;
  color: var(--cy-cyan);
  font-size: 0.5em;
}

.cy-stat__meter {
  position: relative;
  height: 10px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 8px, transparent 8px 11px);
}

.cy-stat__meter span {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--cy-stat) * 1%);
  background: linear-gradient(90deg, var(--cy-cyan), var(--cy-pink));
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 11px);
  mask: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 11px);
  filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.6));
}

.cy-stat__delta {
  color: var(--cy-green);
  font-family: var(--cy-font-mono);
  font-size: 0.8rem;
}
```

#### StatCard.tsx

```tsx
import type { CSSProperties } from 'react';
import './stat-card.css';

type StatStyle = CSSProperties & { '--cy-stat': number };

interface Props {
  label: string;
  value: number;
  max?: number;
  unit?: string;
  /** Small caption under the meter, e.g. "▲ 4.2% since last boot". */
  delta?: string;
}

export function StatCard({ label, value, max = 100, unit, delta }: Props) {
  const percent = Math.min(100, Math.max(0, (value / max) * 100));
  const style: StatStyle = { '--cy-stat': percent };

  return (
    <div className='cy-stat' style={style}>
      <span className='cy-stat__label'>{label}</span>
      <span className='cy-stat__value'>
        {value}
        {unit && <small>{unit}</small>}
      </span>
      <div className='cy-stat__meter' role='meter' aria-label={label} aria-valuemin={0} aria-valuemax={max} aria-valuenow={value}>
        <span />
      </div>
      {delta && <span className='cy-stat__delta'>{delta}</span>}
    </div>
  );
}
```

---

### Cards / Profile Card

URL: https://cyberdeck-ui.netlify.app/components/cards#profile-card

A hexagonal avatar with a status dot, name, role and a row of stats.

React usage:

```tsx
<ProfileCard
  name="Kira Vance"
  role="Netrunner · Level 42"
  initials="KV"
  status="online"
  stats={[{ label: 'Rep', value: '9.8k' }, { label: 'Gigs', value: '142' }]}
/>
```

#### profile-card.html

```html
<article class="cy-profile">
  <div class="cy-profile__avatar">
    <span class="cy-profile__initials" aria-hidden="true">KV</span>
    <span class="cy-profile__status cy-profile__status--online"><span class="cy-sr-only">Online</span></span>
  </div>
  <div class="cy-profile__info">
    <h3 class="cy-profile__name">Kira Vance</h3>
    <p class="cy-profile__role">Netrunner · Level 42</p>
  </div>
  <dl class="cy-profile__stats">
    <div><dt>Rep</dt><dd>9.8k</dd></div>
    <div><dt>Gigs</dt><dd>142</dd></div>
    <div><dt>Credits</dt><dd>88k</dd></div>
  </dl>
</article>
```

#### profile-card.css

```css
.cy-profile {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem 1.25rem;
  align-items: center;
  width: 100%;
  max-width: 22rem;
  padding: 1.5rem;
  border: 1px solid var(--cy-border);
  background: linear-gradient(135deg, rgba(185, 103, 255, 0.12), transparent 60%), var(--cy-surface);
  font-family: var(--cy-font-body);
}

.cy-profile__avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  /* Gradient "border": the hexagon behind the inner hexagon */
  background: linear-gradient(135deg, var(--cy-cyan), var(--cy-pink));
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
}

.cy-profile__initials {
  display: grid;
  place-items: center;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  background: var(--cy-surface-2);
  color: #fff;
  font-family: var(--cy-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  clip-path: inherit;
}

.cy-profile__status {
  position: absolute;
  right: 14%;
  bottom: 10%;
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid var(--cy-surface);
  border-radius: 50%;
  background: var(--cy-dim);
}

.cy-profile__status--online { background: var(--cy-green); box-shadow: 0 0 8px var(--cy-green); }
.cy-profile__status--away { background: var(--cy-yellow); }

.cy-profile__name {
  margin: 0;
  color: #fff;
  font-family: var(--cy-font-display);
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cy-profile__role {
  margin: 0.25rem 0 0;
  color: var(--cy-purple);
  font-family: var(--cy-font-mono);
  font-size: 0.85rem;
}

.cy-profile__stats {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 1rem;
  text-align: center;
}

.cy-profile__stats div + div {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.cy-profile__stats dt {
  color: var(--cy-dim);
  font-family: var(--cy-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.cy-profile__stats dd {
  margin: 0.25rem 0 0;
  color: var(--cy-cyan);
  font-family: var(--cy-font-display);
  font-size: 1.1rem;
  font-weight: 700;
}

.cy-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
```

#### ProfileCard.tsx

```tsx
import './profile-card.css';

type Status = 'online' | 'away' | 'offline';

interface Props {
  name: string;
  role: string;
  initials: string;
  status?: Status;
  stats?: { label: string; value: string }[];
}

const STATUS_LABELS: Record<Status, string> = {
  online: 'Online',
  away: 'Away',
  offline: 'Offline',
};

export function ProfileCard({ name, role, initials, status = 'offline', stats = [] }: Props) {
  return (
    <article className='cy-profile'>
      <div className='cy-profile__avatar'>
        <span className='cy-profile__initials' aria-hidden='true'>{initials}</span>
        <span className={`cy-profile__status cy-profile__status--${status}`}>
          <span className='cy-sr-only'>{STATUS_LABELS[status]}</span>
        </span>
      </div>
      <div className='cy-profile__info'>
        <h3 className='cy-profile__name'>{name}</h3>
        <p className='cy-profile__role'>{role}</p>
      </div>
      {stats.length > 0 && (
        <dl className='cy-profile__stats'>
          {stats.map((stat) => (
            <div key={stat.label}>
              <dt>{stat.label}</dt>
              <dd>{stat.value}</dd>
            </div>
          ))}
        </dl>
      )}
    </article>
  );
}
```

---

### Cards / Pricing Card

URL: https://cyberdeck-ui.netlify.app/components/cards#pricing-card

A pricing tier with a feature list and call to action. The featured variant switches to yellow.

React usage:

```tsx
<PricingCard
  tier="Runner"
  price="€19"
  period="/ month"
  description="For crews who ship every night."
  features={['Unlimited projects', 'Encrypted uplinks', 'Priority support']}
  cta={{ label: 'Jack in', href: '/signup' }}
  featured
  badge="Most popular"
/>
```

#### pricing-card.html

```html
<article class="cy-pricing">
  <h3 class="cy-pricing__tier">Street</h3>
  <p class="cy-pricing__price"><span class="cy-pricing__amount">€0</span><span class="cy-pricing__period">/ forever</span></p>
  <p class="cy-pricing__desc">Everything you need to get on the grid.</p>
  <ul class="cy-pricing__features">
    <li>3 active projects</li>
    <li>Community support</li>
    <li>Public uplinks</li>
  </ul>
  <a class="cy-pricing__cta" href="#">Start free</a>
</article>

<article class="cy-pricing cy-pricing--featured">
  <span class="cy-pricing__badge">Most popular</span>
  <h3 class="cy-pricing__tier">Runner</h3>
  <p class="cy-pricing__price"><span class="cy-pricing__amount">€19</span><span class="cy-pricing__period">/ month</span></p>
  <p class="cy-pricing__desc">For crews who ship every night.</p>
  <ul class="cy-pricing__features">
    <li>Unlimited projects</li>
    <li>Encrypted uplinks</li>
    <li>Priority support</li>
    <li>Custom domains</li>
  </ul>
  <a class="cy-pricing__cta" href="#">Jack in</a>
</article>
```

#### pricing-card.css

```css
.cy-pricing {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 19rem;
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--cy-border);
  background: linear-gradient(180deg, rgba(0, 240, 255, 0.05), transparent 40%), var(--cy-surface);
  color: var(--cy-text);
  font-family: var(--cy-font-body);
  clip-path: polygon(0 0, calc(100% - var(--cy-cut)) 0, 100% var(--cy-cut), 100% 100%, var(--cy-cut) 100%, 0 calc(100% - var(--cy-cut)));
}

.cy-pricing--featured {
  border-color: rgba(252, 238, 10, 0.6);
  background: linear-gradient(180deg, rgba(252, 238, 10, 0.08), transparent 45%), var(--cy-surface);
}

.cy-pricing__badge {
  align-self: flex-start;
  padding: 0.25rem 0.6rem;
  background: var(--cy-yellow);
  color: #000;
  font-family: var(--cy-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.cy-pricing__tier {
  margin: 0;
  color: var(--cy-cyan);
  font-family: var(--cy-font-display);
  font-size: 1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.cy-pricing--featured .cy-pricing__tier {
  color: var(--cy-yellow);
}

.cy-pricing__price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
}

.cy-pricing__amount {
  color: #fff;
  font-family: var(--cy-font-display);
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1;
}

.cy-pricing__period {
  color: var(--cy-dim);
  font-family: var(--cy-font-mono);
  font-size: 0.85rem;
}

.cy-pricing__desc {
  margin: 0;
  color: var(--cy-muted);
  font-size: 1.05rem;
  line-height: 1.5;
}

.cy-pricing__features {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 1rem 0 0;
  border-top: 1px dashed rgba(0, 240, 255, 0.2);
  font-size: 1.05rem;
  list-style: none;
}

.cy-pricing__features li {
  display: flex;
  gap: 0.6rem;
}

.cy-pricing__features li::before {
  content: '▸';
  color: var(--cy-green);
}

.cy-pricing__cta {
  margin-top: auto;
  padding: 0.8rem 1rem;
  border: 1px solid var(--cy-cyan);
  color: var(--cy-cyan);
  font-family: var(--cy-font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.cy-pricing__cta:hover,
.cy-pricing__cta:focus-visible {
  outline: none;
  background: var(--cy-cyan);
  color: #000;
}

.cy-pricing--featured .cy-pricing__cta {
  border-color: var(--cy-yellow);
  background: var(--cy-yellow);
  color: #000;
}

.cy-pricing--featured .cy-pricing__cta:hover,
.cy-pricing--featured .cy-pricing__cta:focus-visible {
  border-color: var(--cy-cyan);
  background: var(--cy-cyan);
}
```

#### PricingCard.tsx

```tsx
import './pricing-card.css';

interface Props {
  tier: string;
  /** Pre-formatted, e.g. "€19". */
  price: string;
  period?: string;
  description: string;
  features: string[];
  cta: { label: string; href: string };
  /** Highlights the card in yellow. */
  featured?: boolean;
  badge?: string;
}

export function PricingCard({ tier, price, period, description, features, cta, featured = false, badge }: Props) {
  return (
    <article className={`cy-pricing ${featured ? 'cy-pricing--featured' : ''}`.trim()}>
      {badge && <span className='cy-pricing__badge'>{badge}</span>}
      <h3 className='cy-pricing__tier'>{tier}</h3>
      <p className='cy-pricing__price'>
        <span className='cy-pricing__amount'>{price}</span>
        {period && <span className='cy-pricing__period'>{period}</span>}
      </p>
      <p className='cy-pricing__desc'>{description}</p>
      <ul className='cy-pricing__features'>
        {features.map((feature) => <li key={feature}>{feature}</li>)}
      </ul>
      <a className='cy-pricing__cta' href={cta.href}>{cta.label}</a>
    </article>
  );
}
```

---

### Forms / Text Input

URL: https://cyberdeck-ui.netlify.app/components/forms#text-input

A labelled mono input with a cyan focus glow and an error state.

React usage:

```tsx
<TextInput id="handle" label="Handle" placeholder="operator_01" />
<TextInput id="email" label="Email" type="email" error="Enter a valid email address." />
```

#### text-input.html

```html
<div class="cy-field">
  <label class="cy-label" for="cy-handle">Handle</label>
  <input class="cy-input" id="cy-handle" type="text" placeholder="operator_01">
</div>

<div class="cy-field">
  <label class="cy-label" for="cy-email">Email</label>
  <input class="cy-input" id="cy-email" type="email" value="not-an-email" aria-invalid="true" aria-describedby="cy-email-error">
  <p class="cy-field__error" id="cy-email-error">Enter a valid email address.</p>
</div>
```

#### text-input.css

```css
.cy-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cy-label {
  color: var(--cy-pink);
  font-family: var(--cy-font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.cy-field__error {
  margin: 0;
  color: var(--cy-pink);
  font-family: var(--cy-font-mono);
  font-size: 0.8rem;
}

.cy-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 0;
  background: rgba(7, 5, 13, 0.8);
  color: #fff;
  font-family: var(--cy-font-mono);
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.cy-input::placeholder {
  color: #4b5563;
}

.cy-input:focus {
  outline: none;
  border-color: var(--cy-cyan);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.25);
}

.cy-input[aria-invalid='true'] {
  border-color: var(--cy-pink);
}

.cy-input[aria-invalid='true']:focus {
  box-shadow: 0 0 16px rgba(255, 42, 109, 0.3);
}
```

#### TextInput.tsx

```tsx
import type { InputHTMLAttributes } from 'react';
import './text-input.css';

interface Props extends InputHTMLAttributes<HTMLInputElement> {
  id: string;
  label: string;
  /** Shown under the field and announced to screen readers. */
  error?: string;
}

export function TextInput({ id, label, error, className = '', type = 'text', ...props }: Props) {
  const errorId = `${id}-error`;

  return (
    <div className='cy-field'>
      <label className='cy-label' htmlFor={id}>{label}</label>
      <input
        id={id}
        type={type}
        className={`cy-input ${className}`.trim()}
        aria-invalid={error ? true : undefined}
        aria-describedby={error ? errorId : undefined}
        {...props}
      />
      {error && <p className='cy-field__error' id={errorId}>{error}</p>}
    </div>
  );
}
```

---

### Forms / Textarea

URL: https://cyberdeck-ui.netlify.app/components/forms#textarea

The multi-line companion to the text input.

React usage:

```tsx
<Textarea id="message" label="Message" placeholder="Transmit your message..." />
```

#### textarea.html

```html
<div class="cy-field">
  <label class="cy-label" for="cy-message">Message</label>
  <textarea class="cy-textarea" id="cy-message" rows="4" placeholder="Transmit your message..."></textarea>
</div>
```

#### textarea.css

```css
.cy-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cy-label {
  color: var(--cy-pink);
  font-family: var(--cy-font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.cy-field__error {
  margin: 0;
  color: var(--cy-pink);
  font-family: var(--cy-font-mono);
  font-size: 0.8rem;
}

.cy-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 0;
  background: rgba(7, 5, 13, 0.8);
  color: #fff;
  font-family: var(--cy-font-mono);
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  min-height: 7rem;
  resize: vertical;
}

.cy-textarea::placeholder {
  color: #4b5563;
}

.cy-textarea:focus {
  outline: none;
  border-color: var(--cy-cyan);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.25);
}
```

#### Textarea.tsx

```tsx
import type { TextareaHTMLAttributes } from 'react';
import './textarea.css';

interface Props extends TextareaHTMLAttributes<HTMLTextAreaElement> {
  id: string;
  label: string;
}

export function Textarea({ id, label, className = '', rows = 4, ...props }: Props) {
  return (
    <div className='cy-field'>
      <label className='cy-label' htmlFor={id}>{label}</label>
      <textarea id={id} rows={rows} className={`cy-textarea ${className}`.trim()} {...props} />
    </div>
  );
}
```

---

### Forms / Search Input

URL: https://cyberdeck-ui.netlify.app/components/forms#search-input

A search field with an icon and a keyboard shortcut ("/" by default) that focuses it from anywhere.

React usage:

```tsx
<SearchInput label="Search the archive" onChange={(event) => setQuery(event.target.value)} />
```

#### search-input.html

```html
<div class="cy-search" role="search">
  <label class="cy-search__label" for="cy-search-input">Search the archive</label>
  <div class="cy-search__field">
    <svg class="cy-search__icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7" /><path d="m20 20-4-4" /></svg>
    <input class="cy-search__input" id="cy-search-input" type="search" placeholder="Search the archive" autocomplete="off" data-cy-search-shortcut="/">
    <kbd class="cy-search__kbd" aria-hidden="true">/</kbd>
  </div>
</div>
```

#### search-input.css

```css
.cy-search {
  width: 100%;
  max-width: 28rem;
}

.cy-search__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cy-search__field {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0.9rem;
  border: 1px solid rgba(0, 240, 255, 0.3);
  background: rgba(7, 5, 13, 0.8);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.cy-search__field:focus-within {
  border-color: var(--cy-cyan);
  box-shadow: 0 0 0 1px var(--cy-cyan), var(--cy-glow-cyan);
}

.cy-search__icon {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: var(--cy-cyan);
  stroke-width: 2;
  stroke-linecap: square;
}

.cy-search__input {
  flex: 1;
  min-width: 0;
  padding: 0.85rem 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font-family: var(--cy-font-mono);
  font-size: 1rem;
  letter-spacing: 0.05em;
}

.cy-search__input::placeholder {
  color: #4b5563;
}

.cy-search__input::-webkit-search-cancel-button {
  filter: hue-rotate(150deg) saturate(3);
  cursor: pointer;
}

.cy-search__kbd {
  padding: 0.1rem 0.45rem;
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-bottom-width: 2px;
  color: var(--cy-cyan);
  font-family: var(--cy-font-mono);
  font-size: 0.8rem;
  transition: opacity 0.15s;
}

/* Hide the shortcut hint while typing. */
.cy-search__field:focus-within .cy-search__kbd,
.cy-search__input:not(:placeholder-shown) + .cy-search__kbd {
  opacity: 0;
}
```

#### search-input.js

```js
// Press the shortcut key (e.g. "/") anywhere outside a text field to jump to the search input.
// Escape leaves the field.
document.querySelectorAll('[data-cy-search-shortcut]').forEach((input) => {
  const shortcut = input.dataset.cySearchShortcut;

  document.addEventListener('keydown', (event) => {
    const target = event.target;
    const typing =
      target instanceof HTMLElement && (target.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName));
    if (event.key !== shortcut || typing || event.metaKey || event.ctrlKey || event.altKey) return;

    event.preventDefault();
    input.focus();
  });

  input.addEventListener('keydown', (event) => {
    if (event.key === 'Escape') input.blur();
  });
});
```

#### SearchInput.tsx

```tsx
'use client';

import { useEffect, useId, useRef } from 'react';
import type { InputHTMLAttributes } from 'react';
import './search-input.css';

interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
  /** Accessible label, also used as the placeholder by default. */
  label: string;
  /** Key that focuses the input from anywhere on the page. Pass null to turn it off. */
  shortcut?: string | null;
}

export function SearchInput({ label, shortcut = '/', id, placeholder = label, onKeyDown, ...props }: Props) {
  const generatedId = useId();
  const inputId = id ?? generatedId;
  const input = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (!shortcut) return;

    const onShortcut = (event: KeyboardEvent) => {
      const target = event.target;
      const typing =
        target instanceof HTMLElement && (target.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName));
      if (event.key !== shortcut || typing || event.metaKey || event.ctrlKey || event.altKey) return;

      event.preventDefault();
      input.current?.focus();
    };

    document.addEventListener('keydown', onShortcut);
    return () => document.removeEventListener('keydown', onShortcut);
  }, [shortcut]);

  return (
    <div className='cy-search' role='search'>
      <label className='cy-search__label' htmlFor={inputId}>{label}</label>
      <div className='cy-search__field'>
        <svg className='cy-search__icon' viewBox='0 0 24 24' aria-hidden='true'>
          <circle cx='11' cy='11' r='7' />
          <path d='m20 20-4-4' />
        </svg>
        <input
          ref={input}
          id={inputId}
          className='cy-search__input'
          type='search'
          placeholder={placeholder}
          autoComplete='off'
          onKeyDown={(event) => {
            if (event.key === 'Escape') event.currentTarget.blur();
            onKeyDown?.(event);
          }}
          {...props}
        />
        {shortcut && <kbd className='cy-search__kbd' aria-hidden='true'>{shortcut}</kbd>}
      </div>
    </div>
  );
}
```

---

### Forms / Toggle Switch

URL: https://cyberdeck-ui.netlify.app/components/forms#toggle-switch

An on/off switch built on a real checkbox with role="switch".

React usage:

```tsx
<ToggleSwitch label="Stealth mode" defaultChecked />
```

#### toggle-switch.html

```html
<label class="cy-toggle">
  <input class="cy-toggle__input" type="checkbox" role="switch" checked>
  <span class="cy-toggle__track" aria-hidden="true"><span class="cy-toggle__thumb"></span></span>
  <span class="cy-toggle__label">Stealth mode</span>
</label>

<label class="cy-toggle">
  <input class="cy-toggle__input" type="checkbox" role="switch">
  <span class="cy-toggle__track" aria-hidden="true"><span class="cy-toggle__thumb"></span></span>
  <span class="cy-toggle__label">Auto-reboot</span>
</label>
```

#### toggle-switch.css

```css
.cy-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--cy-text);
  font-family: var(--cy-font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Visually hidden but still focusable and announced */
.cy-toggle__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.cy-toggle__track {
  position: relative;
  width: 3.25rem;
  height: 1.6rem;
  border: 1px solid rgba(0, 240, 255, 0.4);
  background: var(--cy-surface);
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.cy-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(1.6rem - 8px);
  height: calc(1.6rem - 8px);
  background: var(--cy-dim);
  clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 30% 100%, 0 70%);
  transition: transform 0.2s var(--cy-ease), background-color 0.2s;
}

.cy-toggle__input:checked + .cy-toggle__track {
  border-color: var(--cy-cyan);
  background: rgba(0, 240, 255, 0.12);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.35);
}

.cy-toggle__input:checked + .cy-toggle__track .cy-toggle__thumb {
  background: var(--cy-cyan);
  transform: translateX(1.65rem);
}

.cy-toggle__input:focus-visible + .cy-toggle__track {
  outline: 2px solid var(--cy-yellow);
  outline-offset: 3px;
}

.cy-toggle__input:disabled + .cy-toggle__track,
.cy-toggle__input:disabled ~ .cy-toggle__label {
  opacity: 0.5;
}
```

#### ToggleSwitch.tsx

```tsx
import type { InputHTMLAttributes } from 'react';
import './toggle-switch.css';

interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'role'> {
  label: string;
}

export function ToggleSwitch({ label, className = '', ...props }: Props) {
  return (
    <label className={`cy-toggle ${className}`.trim()}>
      <input className='cy-toggle__input' type='checkbox' role='switch' {...props} />
      <span className='cy-toggle__track' aria-hidden='true'><span className='cy-toggle__thumb' /></span>
      <span className='cy-toggle__label'>{label}</span>
    </label>
  );
}
```

---

### Forms / Checkbox

URL: https://cyberdeck-ui.netlify.app/components/forms#checkbox

A square magenta checkbox with an animated check mark.

React usage:

```tsx
<Checkbox defaultChecked>Install cyberware</Checkbox>
```

#### checkbox.html

```html
<label class="cy-check">
  <input class="cy-check__input" type="checkbox" checked>
  <span class="cy-check__box" aria-hidden="true"></span>
  Install cyberware
</label>

<label class="cy-check">
  <input class="cy-check__input" type="checkbox">
  <span class="cy-check__box" aria-hidden="true"></span>
  Share telemetry
</label>
```

#### checkbox.css

```css
.cy-check {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--cy-text);
  font-family: var(--cy-font-body);
  font-size: 1.05rem;
  cursor: pointer;
}

.cy-check__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.cy-check__box {
  position: relative;
  flex-shrink: 0;
  width: 1.2rem;
  height: 1.2rem;
  border: 1px solid var(--cy-pink);
  background: var(--cy-surface);
  transition: background-color 0.15s, box-shadow 0.15s;
}

/* Check mark */
.cy-check__box::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 6px;
  width: 5px;
  height: 10px;
  border: solid #000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.15s var(--cy-ease);
}

.cy-check__input:checked + .cy-check__box {
  background: var(--cy-pink);
  box-shadow: 0 0 12px rgba(255, 42, 109, 0.6);
}

.cy-check__input:checked + .cy-check__box::after {
  transform: rotate(45deg) scale(1);
}

.cy-check__input:focus-visible + .cy-check__box {
  outline: 2px solid var(--cy-yellow);
  outline-offset: 3px;
}
```

#### Checkbox.tsx

```tsx
import type { InputHTMLAttributes, ReactNode } from 'react';
import './checkbox.css';

interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
  children: ReactNode;
}

export function Checkbox({ children, className = '', ...props }: Props) {
  return (
    <label className={`cy-check ${className}`.trim()}>
      <input className='cy-check__input' type='checkbox' {...props} />
      <span className='cy-check__box' aria-hidden='true' />
      {children}
    </label>
  );
}
```

---

### Forms / Radio Group

URL: https://cyberdeck-ui.netlify.app/components/forms#radio-group

A fieldset of selectable rows with diamond markers and optional descriptions.

React usage:

```tsx
<RadioGroup
  legend="Choose your class"
  name="class"
  defaultValue="runner"
  options={[
    { value: 'runner', label: 'Runner', description: 'Fast, quiet, always on the move' },
    { value: 'fixer', label: 'Fixer', description: 'Knows everyone, owes no one' },
  ]}
/>
```

#### radio-group.html

```html
<fieldset class="cy-radio-group">
  <legend>Choose your class</legend>

  <label class="cy-radio">
    <input class="cy-radio__input" type="radio" name="cy-class" value="runner" checked>
    <span class="cy-radio__mark" aria-hidden="true"></span>
    <span class="cy-radio__label">Runner <small>Fast, quiet, always on the move</small></span>
  </label>

  <label class="cy-radio">
    <input class="cy-radio__input" type="radio" name="cy-class" value="fixer">
    <span class="cy-radio__mark" aria-hidden="true"></span>
    <span class="cy-radio__label">Fixer <small>Knows everyone, owes no one</small></span>
  </label>

  <label class="cy-radio">
    <input class="cy-radio__input" type="radio" name="cy-class" value="medic" disabled>
    <span class="cy-radio__mark" aria-hidden="true"></span>
    <span class="cy-radio__label">Street medic <small>Locked: complete the tutorial</small></span>
  </label>
</fieldset>
```

#### radio-group.css

```css
.cy-radio-group {
  display: grid;
  gap: 0.6rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.cy-radio-group legend {
  margin-bottom: 0.75rem;
  padding: 0;
  color: var(--cy-pink);
  font-family: var(--cy-font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.cy-radio {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--cy-border);
  background: var(--cy-surface);
  color: var(--cy-text);
  font-family: var(--cy-font-body);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

.cy-radio:hover {
  border-color: rgba(0, 240, 255, 0.45);
}

.cy-radio:has(:checked) {
  border-color: var(--cy-cyan);
  background: rgba(0, 240, 255, 0.06);
  box-shadow: inset 3px 0 0 var(--cy-cyan);
}

.cy-radio:has(:disabled) {
  cursor: not-allowed;
  opacity: 0.45;
}

.cy-radio__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Diamond marker */
.cy-radio__mark {
  position: relative;
  flex-shrink: 0;
  width: 0.85rem;
  height: 0.85rem;
  margin-inline: 0.15rem;
  border: 1px solid var(--cy-cyan);
  transform: rotate(45deg);
  transition: box-shadow 0.15s;
}

.cy-radio__mark::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: var(--cy-cyan);
  transform: scale(0);
  transition: transform 0.15s var(--cy-ease);
}

.cy-radio__input:checked + .cy-radio__mark {
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
}

.cy-radio__input:checked + .cy-radio__mark::after {
  transform: scale(1);
}

.cy-radio__input:focus-visible + .cy-radio__mark {
  outline: 2px solid var(--cy-yellow);
  outline-offset: 4px;
}

.cy-radio__label {
  display: grid;
  gap: 0.15rem;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.cy-radio__label small {
  color: var(--cy-dim);
  font-size: 0.9rem;
  font-weight: 500;
}
```

#### RadioGroup.tsx

```tsx
import type { ReactNode } from 'react';
import './radio-group.css';

export interface RadioOption<T extends string> {
  value: T;
  label: ReactNode;
  description?: ReactNode;
  disabled?: boolean;
}

interface Props<T extends string> {
  legend: string;
  name: string;
  options: RadioOption<T>[];
  /** Controlled value. Leave undefined and use defaultValue for an uncontrolled group. */
  value?: T;
  defaultValue?: T;
  onChange?: (value: T) => void;
}

export function RadioGroup<T extends string>({ legend, name, options, value, defaultValue, onChange }: Props<T>) {
  const controlled = value !== undefined;

  return (
    <fieldset className='cy-radio-group'>
      <legend>{legend}</legend>
      {options.map((option) => (
        <label key={option.value} className='cy-radio'>
          <input
            className='cy-radio__input'
            type='radio'
            name={name}
            value={option.value}
            checked={controlled ? value === option.value : undefined}
            defaultChecked={controlled ? undefined : defaultValue === option.value}
            disabled={option.disabled}
            onChange={() => onChange?.(option.value)}
          />
          <span className='cy-radio__mark' aria-hidden='true' />
          <span className='cy-radio__label'>
            {option.label}
            {option.description && <small>{option.description}</small>}
          </span>
        </label>
      ))}
    </fieldset>
  );
}
```

---

### Forms / Range Slider

URL: https://cyberdeck-ui.netlify.app/components/forms#range-slider

A native range input with a glowing filled track, a diamond thumb and a live value.

React usage:

```tsx
<RangeSlider id="bandwidth" label="Bandwidth" defaultValue={64} onChange={setBandwidth} />
```

#### range-slider.html

```html
<div class="cy-range">
  <div class="cy-range__head">
    <label for="cy-bandwidth">Bandwidth</label>
    <output for="cy-bandwidth">64</output>
  </div>
  <input class="cy-range__input" id="cy-bandwidth" type="range" min="0" max="100" value="64">
</div>
```

#### range-slider.css

```css
.cy-range {
  --cy-fill: 50%; /* updated by script from the input value */
  width: 100%;
  max-width: 22rem;
}

.cy-range__head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  font-family: var(--cy-font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.cy-range__head label { color: var(--cy-pink); }
.cy-range__head output { color: var(--cy-yellow); }

.cy-range__input {
  width: 100%;
  height: 1.5rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.cy-range__input::-webkit-slider-runnable-track {
  height: 4px;
  background: linear-gradient(90deg, var(--cy-cyan) var(--cy-fill), rgba(255, 255, 255, 0.12) var(--cy-fill));
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.35);
}

.cy-range__input::-moz-range-track {
  height: 4px;
  background: linear-gradient(90deg, var(--cy-cyan) var(--cy-fill), rgba(255, 255, 255, 0.12) var(--cy-fill));
}

.cy-range__input::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border: 0;
  background: var(--cy-yellow);
  box-shadow: 0 0 10px rgba(252, 238, 10, 0.7);
  transform: rotate(45deg);
  -webkit-appearance: none;
  appearance: none;
}

.cy-range__input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 0;
  background: var(--cy-yellow);
  box-shadow: 0 0 10px rgba(252, 238, 10, 0.7);
  transform: rotate(45deg);
}

.cy-range__input:focus-visible {
  outline: 2px solid var(--cy-yellow);
  outline-offset: 4px;
}
```

#### range-slider.js

```js
// Keeps the filled part of the track and the <output> in sync with the value.
document.querySelectorAll('.cy-range').forEach((range) => {
  const input = range.querySelector('.cy-range__input');
  const output = range.querySelector('output');

  const update = () => {
    const min = Number(input.min || 0);
    const max = Number(input.max || 100);
    const percent = ((Number(input.value) - min) / (max - min)) * 100;

    range.style.setProperty('--cy-fill', `${percent}%`);
    if (output) output.textContent = input.value;
  };

  input.addEventListener('input', update);
  update();
});
```

#### RangeSlider.tsx

```tsx
'use client';

import { useState } from 'react';
import type { CSSProperties } from 'react';
import './range-slider.css';

type RangeStyle = CSSProperties & { '--cy-fill': string };

interface Props {
  id: string;
  label: string;
  min?: number;
  max?: number;
  defaultValue?: number;
  onChange?: (value: number) => void;
}

export function RangeSlider({ id, label, min = 0, max = 100, defaultValue = min, onChange }: Props) {
  const [value, setValue] = useState(defaultValue);
  const style: RangeStyle = { '--cy-fill': `${((value - min) / (max - min)) * 100}%` };

  return (
    <div className='cy-range' style={style}>
      <div className='cy-range__head'>
        <label htmlFor={id}>{label}</label>
        <output htmlFor={id}>{value}</output>
      </div>
      <input
        id={id}
        className='cy-range__input'
        type='range'
        min={min}
        max={max}
        value={value}
        onChange={(event) => {
          const next = Number(event.target.value);
          setValue(next);
          onChange?.(next);
        }}
      />
    </div>
  );
}
```

---

### Forms / Select

URL: https://cyberdeck-ui.netlify.app/components/forms#select

A native select restyled to match the inputs, with a neon chevron.

React usage:

```tsx
<Select
  id="district"
  label="District"
  options={[{ value: 'neon-row', label: 'Neon Row' }, { value: 'skyline', label: 'Skyline' }]}
/>
```

#### select.html

```html
<div class="cy-field">
  <label class="cy-label" for="cy-district">District</label>
  <div class="cy-select">
    <select id="cy-district">
      <option>Neon Row</option>
      <option>Old Harbor</option>
      <option>Skyline</option>
      <option>The Stacks</option>
    </select>
  </div>
</div>
```

#### select.css

```css
.cy-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cy-label {
  color: var(--cy-pink);
  font-family: var(--cy-font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.cy-field__error {
  margin: 0;
  color: var(--cy-pink);
  font-family: var(--cy-font-mono);
  font-size: 0.8rem;
}

.cy-select {
  position: relative;
}

.cy-select select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 0;
  background: rgba(7, 5, 13, 0.8);
  color: #fff;
  font-family: var(--cy-font-mono);
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  padding-right: 2.75rem;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.cy-select select:focus {
  outline: none;
  border-color: var(--cy-cyan);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.25);
}

.cy-select option {
  background: var(--cy-surface);
}

/* Chevron */
.cy-select::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 1.1rem;
  width: 7px;
  height: 7px;
  border: solid var(--cy-cyan);
  border-width: 0 2px 2px 0;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
```

#### Select.tsx

```tsx
import type { SelectHTMLAttributes } from 'react';
import './select.css';

interface Option {
  value: string;
  label: string;
}

interface Props extends SelectHTMLAttributes<HTMLSelectElement> {
  id: string;
  label: string;
  options: Option[];
}

export function Select({ id, label, options, ...props }: Props) {
  return (
    <div className='cy-field'>
      <label className='cy-label' htmlFor={id}>{label}</label>
      <div className='cy-select'>
        <select id={id} {...props}>
          {options.map((option) => (
            <option key={option.value} value={option.value}>{option.label}</option>
          ))}
        </select>
      </div>
    </div>
  );
}
```

---

### Navigation / Navbar

URL: https://cyberdeck-ui.netlify.app/components/navigation#navbar

A blurred top bar with a brand, mono links and a right-hand slot (here a language switcher).

React usage:

```tsx
<Navbar
  brand="Cyber"
  brandAccent="deck"
  links={[{ label: 'Projects', href: '/projects', current: true }, { label: 'Blog', href: '/blog' }]}
  actions={<a href="/pt">PT</a>}
/>
```

#### navbar.html

```html
<header class="cy-navbar">
  <a class="cy-navbar__brand" href="#">Cyber<span>deck</span></a>
  <nav aria-label="Main">
    <ul class="cy-navbar__links">
      <li><a href="#" aria-current="page">Projects</a></li>
      <li><a href="#">Experience</a></li>
      <li><a href="#">Blog</a></li>
    </ul>
  </nav>
  <div class="cy-navbar__lang">
    <span aria-current="true">EN</span>
    <i aria-hidden="true">/</i>
    <a href="#" hreflang="pt">PT</a>
  </div>
</header>
```

#### navbar.css

```css
.cy-navbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(0, 240, 255, 0.2);
  background: rgba(7, 5, 13, 0.8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.cy-navbar__brand {
  color: #fff;
  font-family: var(--cy-font-display);
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}

.cy-navbar__brand span {
  color: var(--cy-pink);
}

.cy-navbar__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cy-navbar__links a,
.cy-navbar__lang a {
  color: #d1d5db;
  font-family: var(--cy-font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s, text-shadow 0.2s;
}

.cy-navbar__links a:hover,
.cy-navbar__links a:focus-visible,
.cy-navbar__links a[aria-current='page'],
.cy-navbar__lang a:hover {
  color: var(--cy-cyan);
  text-shadow: var(--cy-glow-cyan);
}

.cy-navbar__lang {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 2rem;
  border-left: 1px solid rgba(0, 240, 255, 0.2);
  font-family: var(--cy-font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
}

.cy-navbar__lang [aria-current] { color: var(--cy-yellow); }
.cy-navbar__lang i { color: rgba(255, 42, 109, 0.7); font-style: normal; }
```

#### Navbar.tsx

```tsx
import type { ReactNode } from 'react';
import './navbar.css';

interface NavLink {
  label: string;
  href: string;
  current?: boolean;
}

interface Props {
  brand: string;
  /** The last word is highlighted in pink when brandAccent is set. */
  brandAccent?: string;
  brandHref?: string;
  links: NavLink[];
  /** Right-hand slot, e.g. a language switcher. */
  actions?: ReactNode;
}

export function Navbar({ brand, brandAccent, brandHref = '/', links, actions }: Props) {
  return (
    <header className='cy-navbar'>
      <a className='cy-navbar__brand' href={brandHref}>
        {brand}
        {brandAccent && <span>{brandAccent}</span>}
      </a>
      <nav aria-label='Main'>
        <ul className='cy-navbar__links'>
          {links.map((link) => (
            <li key={link.href}>
              <a href={link.href} aria-current={link.current ? 'page' : undefined}>{link.label}</a>
            </li>
          ))}
        </ul>
      </nav>
      {actions && <div className='cy-navbar__lang'>{actions}</div>}
    </header>
  );
}
```

---

### Navigation / Segmented Control

URL: https://cyberdeck-ui.netlify.app/components/navigation#segmented-control

Radio buttons styled as a compact switcher, e.g. for language or view options.

React usage:

```tsx
<SegmentedControl
  label="Language"
  name="lang"
  defaultValue="en"
  options={[{ value: 'en', label: 'EN' }, { value: 'pt', label: 'PT' }]}
/>
```

#### segmented-control.html

```html
<fieldset class="cy-segmented">
  <legend class="cy-sr-only">Language</legend>
  <label><input type="radio" name="cy-lang" value="en" checked><span>EN</span></label>
  <label><input type="radio" name="cy-lang" value="pt"><span>PT</span></label>
  <label><input type="radio" name="cy-lang" value="jp"><span>JP</span></label>
</fieldset>
```

#### segmented-control.css

```css
.cy-segmented {
  display: inline-flex;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(0, 240, 255, 0.3);
}

.cy-segmented label {
  cursor: pointer;
}

.cy-segmented label + label {
  border-left: 1px solid rgba(255, 42, 109, 0.4);
}

.cy-segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cy-segmented span {
  display: block;
  padding: 0.45rem 1rem;
  color: var(--cy-muted);
  font-family: var(--cy-font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color 0.2s, background-color 0.2s;
}

.cy-segmented label:hover span {
  color: var(--cy-cyan);
}

.cy-segmented input:checked + span {
  background: rgba(0, 240, 255, 0.12);
  color: var(--cy-yellow);
}

.cy-segmented input:focus-visible + span {
  outline: 2px solid var(--cy-yellow);
  outline-offset: -2px;
}

.cy-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
```

#### SegmentedControl.tsx

```tsx
import './segmented-control.css';

interface Option {
  value: string;
  label: string;
}

interface Props {
  /** Accessible name for the group. */
  label: string;
  name: string;
  options: Option[];
  value?: string;
  defaultValue?: string;
  onChange?: (value: string) => void;
}

export function SegmentedControl({ label, name, options, value, defaultValue, onChange }: Props) {
  return (
    <fieldset className='cy-segmented'>
      <legend className='cy-sr-only'>{label}</legend>
      {options.map((option) => (
        <label key={option.value}>
          <input
            type='radio'
            name={name}
            value={option.value}
            checked={value === undefined ? undefined : value === option.value}
            defaultChecked={value === undefined ? defaultValue === option.value : undefined}
            onChange={() => onChange?.(option.value)}
          />
          <span>{option.label}</span>
        </label>
      ))}
    </fieldset>
  );
}
```

---

### Navigation / Tabs

URL: https://cyberdeck-ui.netlify.app/components/navigation#tabs

Accessible tabs with a glowing underline, arrow-key navigation and roving focus.

React usage:

```tsx
<Tabs
  label="System"
  tabs={[
    { id: 'status', label: 'Status', content: 'All systems nominal.' },
    { id: 'logs', label: 'Logs', content: <LogList /> },
  ]}
/>
```

#### tabs.html

```html
<div class="cy-tabs" data-cy-tabs>
  <div class="cy-tabs__list" role="tablist" aria-label="System">
    <button class="cy-tabs__tab" role="tab" id="cy-tab-status" aria-controls="cy-panel-status" aria-selected="true">Status</button>
    <button class="cy-tabs__tab" role="tab" id="cy-tab-logs" aria-controls="cy-panel-logs" aria-selected="false" tabindex="-1">Logs</button>
    <button class="cy-tabs__tab" role="tab" id="cy-tab-net" aria-controls="cy-panel-net" aria-selected="false" tabindex="-1">Network</button>
  </div>
  <div class="cy-tabs__panel" role="tabpanel" id="cy-panel-status" aria-labelledby="cy-tab-status">All systems nominal. Core temperature at 41°C.</div>
  <div class="cy-tabs__panel" role="tabpanel" id="cy-panel-logs" aria-labelledby="cy-tab-logs" hidden>03:12:44 — Intrusion attempt blocked from 10.0.8.12.</div>
  <div class="cy-tabs__panel" role="tabpanel" id="cy-panel-net" aria-labelledby="cy-tab-net" hidden>Uplink 940 Mbps · Downlink 1.2 Gbps · 3 relays active.</div>
</div>
```

#### tabs.css

```css
.cy-tabs {
  width: 100%;
  max-width: 32rem;
}

.cy-tabs__list {
  display: flex;
  border-bottom: 1px solid rgba(0, 240, 255, 0.2);
}

.cy-tabs__tab {
  position: relative;
  padding: 0.75rem 1.25rem;
  border: 0;
  background: none;
  color: var(--cy-muted);
  font-family: var(--cy-font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s, text-shadow 0.2s;
}

.cy-tabs__tab::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--cy-cyan);
  box-shadow: 0 0 8px var(--cy-cyan);
  transform: scaleX(0);
  transition: transform 0.25s var(--cy-ease);
}

.cy-tabs__tab:hover {
  color: var(--cy-text);
}

.cy-tabs__tab[aria-selected='true'] {
  color: var(--cy-cyan);
  text-shadow: var(--cy-glow-cyan);
}

.cy-tabs__tab[aria-selected='true']::after {
  transform: scaleX(1);
}

.cy-tabs__tab:focus-visible {
  outline: 2px solid var(--cy-yellow);
  outline-offset: -2px;
}

.cy-tabs__panel {
  padding: 1.25rem 0.25rem;
  color: var(--cy-text);
  font-family: var(--cy-font-body);
  font-size: 1.05rem;
  line-height: 1.6;
}
```

#### tabs.js

```js
// Accessible tabs: click to select, arrow keys/Home/End to move between tabs.
document.querySelectorAll('[data-cy-tabs]').forEach((root) => {
  const tabs = [...root.querySelectorAll('[role="tab"]')];

  const select = (tab) => {
    tabs.forEach((t) => {
      const selected = t === tab;
      t.setAttribute('aria-selected', String(selected));
      t.tabIndex = selected ? 0 : -1;
      root.querySelector(`#${t.getAttribute('aria-controls')}`).hidden = !selected;
    });
    tab.focus();
  };

  tabs.forEach((tab, i) => {
    tab.addEventListener('click', () => select(tab));
    tab.addEventListener('keydown', (event) => {
      const moves = { ArrowRight: i + 1, ArrowLeft: i - 1, Home: 0, End: tabs.length - 1 };
      if (!(event.key in moves)) return;
      event.preventDefault();
      select(tabs[(moves[event.key] + tabs.length) % tabs.length]);
    });
  });
});
```

#### Tabs.tsx

```tsx
'use client';

import { useId, useRef, useState } from 'react';
import type { KeyboardEvent, ReactNode } from 'react';
import './tabs.css';

interface Tab {
  id: string;
  label: string;
  content: ReactNode;
}

interface Props {
  /** Accessible name for the tab list. */
  label: string;
  tabs: Tab[];
  defaultTab?: string;
}

export function Tabs({ label, tabs, defaultTab = tabs[0]?.id }: Props) {
  const [selected, setSelected] = useState(defaultTab);
  const buttons = useRef<(HTMLButtonElement | null)[]>([]);
  const baseId = useId();

  const select = (index: number) => {
    const next = (index + tabs.length) % tabs.length;
    setSelected(tabs[next].id);
    buttons.current[next]?.focus();
  };

  const onKeyDown = (event: KeyboardEvent, index: number) => {
    const moves: Record<string, number> = { ArrowRight: index + 1, ArrowLeft: index - 1, Home: 0, End: tabs.length - 1 };
    if (!(event.key in moves)) return;
    event.preventDefault();
    select(moves[event.key]);
  };

  return (
    <div className='cy-tabs'>
      <div className='cy-tabs__list' role='tablist' aria-label={label}>
        {tabs.map((tab, i) => (
          <button
            key={tab.id}
            ref={(el) => { buttons.current[i] = el; }}
            className='cy-tabs__tab'
            role='tab'
            id={`${baseId}-tab-${tab.id}`}
            aria-controls={`${baseId}-panel-${tab.id}`}
            aria-selected={selected === tab.id}
            tabIndex={selected === tab.id ? 0 : -1}
            onClick={() => select(i)}
            onKeyDown={(event) => onKeyDown(event, i)}
          >
            {tab.label}
          </button>
        ))}
      </div>
      {tabs.map((tab) => (
        <div
          key={tab.id}
          className='cy-tabs__panel'
          role='tabpanel'
          id={`${baseId}-panel-${tab.id}`}
          aria-labelledby={`${baseId}-tab-${tab.id}`}
          hidden={selected !== tab.id}
        >
          {tab.content}
        </div>
      ))}
    </div>
  );
}
```

---

### Navigation / Breadcrumbs

URL: https://cyberdeck-ui.netlify.app/components/navigation#breadcrumbs

A mono breadcrumb trail with // separators.

React usage:

```tsx
<Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: 'Blog', href: '/blog' }, { label: 'Ghost in the shell script' }]} />
```

#### breadcrumbs.html

```html
<nav class="cy-breadcrumbs" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><span aria-current="page">Ghost in the shell script</span></li>
  </ol>
</nav>
```

#### breadcrumbs.css

```css
.cy-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--cy-font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.cy-breadcrumbs li + li::before {
  content: '//';
  margin: 0 0.75rem;
  color: rgba(255, 42, 109, 0.7);
}

.cy-breadcrumbs a {
  color: var(--cy-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.cy-breadcrumbs a:hover,
.cy-breadcrumbs a:focus-visible {
  color: var(--cy-cyan);
}

.cy-breadcrumbs [aria-current='page'] {
  color: var(--cy-yellow);
}
```

#### Breadcrumbs.tsx

```tsx
import './breadcrumbs.css';

interface Crumb {
  label: string;
  /** Omit for the current page. */
  href?: string;
}

export function Breadcrumbs({ items }: { items: Crumb[] }) {
  return (
    <nav className='cy-breadcrumbs' aria-label='Breadcrumb'>
      <ol>
        {items.map((item) => (
          <li key={item.label}>
            {item.href ? <a href={item.href}>{item.label}</a> : <span aria-current='page'>{item.label}</span>}
          </li>
        ))}
      </ol>
    </nav>
  );
}
```

---

### Navigation / Pagination

URL: https://cyberdeck-ui.netlify.app/components/navigation#pagination

Page links with a clipped highlight on the current page and automatic gaps.

React usage:

```tsx
<Pagination page={2} totalPages={12} hrefFor={(page) => `/blog?page=${page}`} />
```

#### pagination.html

```html
<nav class="cy-pagination" aria-label="Pagination">
  <a class="cy-pagination__item" href="#" aria-label="Previous page">&lsaquo;</a>
  <a class="cy-pagination__item" href="#">1</a>
  <a class="cy-pagination__item" href="#" aria-current="page">2</a>
  <a class="cy-pagination__item" href="#">3</a>
  <span class="cy-pagination__gap" aria-hidden="true">&hellip;</span>
  <a class="cy-pagination__item" href="#">12</a>
  <a class="cy-pagination__item" href="#" aria-label="Next page">&rsaquo;</a>
</nav>
```

#### pagination.css

```css
.cy-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--cy-font-mono);
}

.cy-pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.5rem;
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: var(--cy-muted);
  font-size: 0.95rem;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.cy-pagination__item:hover,
.cy-pagination__item:focus-visible {
  outline: none;
  border-color: var(--cy-cyan);
  color: var(--cy-cyan);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.3);
}

.cy-pagination__item[aria-current='page'] {
  border-color: var(--cy-yellow);
  background: var(--cy-yellow);
  color: #000;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

.cy-pagination__gap {
  padding: 0 0.25rem;
  color: var(--cy-dim);
}
```

#### Pagination.tsx

```tsx
import './pagination.css';

interface Props {
  page: number;
  totalPages: number;
  hrefFor: (page: number) => string;
  /** Pages shown either side of the current one. */
  siblings?: number;
}

// 1 … 4 5 [6] 7 8 … 20
const pageList = (page: number, total: number, siblings: number): (number | 'gap')[] => {
  const pages = new Set([1, total]);
  for (let p = page - siblings; p <= page + siblings; p++) {
    if (p >= 1 && p <= total) pages.add(p);
  }

  const sorted = [...pages].sort((a, b) => a - b);
  return sorted.flatMap((p, i) => (i > 0 && p - sorted[i - 1] > 1 ? ['gap' as const, p] : [p]));
};

export function Pagination({ page, totalPages, hrefFor, siblings = 1 }: Props) {
  return (
    <nav className='cy-pagination' aria-label='Pagination'>
      {page > 1 && (
        <a className='cy-pagination__item' href={hrefFor(page - 1)} aria-label='Previous page'>&lsaquo;</a>
      )}
      {pageList(page, totalPages, siblings).map((item, i) =>
        item === 'gap' ? (
          <span key={`gap-${i}`} className='cy-pagination__gap' aria-hidden='true'>&hellip;</span>
        ) : (
          <a
            key={item}
            className='cy-pagination__item'
            href={hrefFor(item)}
            aria-current={item === page ? 'page' : undefined}
          >
            {item}
          </a>
        )
      )}
      {page < totalPages && (
        <a className='cy-pagination__item' href={hrefFor(page + 1)} aria-label='Next page'>&rsaquo;</a>
      )}
    </nav>
  );
}
```

---

### Navigation / Stepper

URL: https://cyberdeck-ui.netlify.app/components/navigation#stepper

Progress through a multi-step flow: completed, current and upcoming steps, with aria-current.

React usage:

```tsx
<Stepper label="Setup progress" steps={['Identity', 'Implants', 'Loadout', 'Deploy']} current={2} />
```

#### stepper.html

```html
<nav aria-label="Setup progress">
  <ol class="cy-stepper">
    <li class="cy-stepper__step" data-state="complete">
      <span class="cy-stepper__marker" aria-hidden="true"></span>
      <span class="cy-stepper__label">Identity <span class="cy-stepper__sr">(completed)</span></span>
    </li>
    <li class="cy-stepper__step" data-state="complete">
      <span class="cy-stepper__marker" aria-hidden="true"></span>
      <span class="cy-stepper__label">Implants <span class="cy-stepper__sr">(completed)</span></span>
    </li>
    <li class="cy-stepper__step" data-state="current" aria-current="step">
      <span class="cy-stepper__marker" aria-hidden="true"></span>
      <span class="cy-stepper__label">Loadout</span>
    </li>
    <li class="cy-stepper__step">
      <span class="cy-stepper__marker" aria-hidden="true"></span>
      <span class="cy-stepper__label">Deploy</span>
    </li>
  </ol>
</nav>
```

#### stepper.css

```css
.cy-stepper {
  display: flex;
  width: 100%;
  max-width: 40rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: cy-step;
}

.cy-stepper__step {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  min-width: 7rem;
  padding-inline: 0.5rem;
  color: var(--cy-dim);
  font-family: var(--cy-font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  counter-increment: cy-step;
}

/* Connector to the previous step */
.cy-stepper__step + .cy-stepper__step::before {
  content: '';
  position: absolute;
  top: calc(1.1rem - 1px);
  right: calc(50% + 1.6rem);
  left: calc(-50% + 1.6rem);
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--cy-dim) 0 6px, transparent 6px 10px);
  opacity: 0.6;
}

.cy-stepper__step:is([data-state='complete'], [data-state='current'])::before {
  background: var(--cy-green);
  box-shadow: 0 0 6px rgba(5, 255, 161, 0.6);
  opacity: 1;
}

.cy-stepper__marker {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid currentColor;
  background: var(--cy-bg);
  font-size: 0.85rem;
  transition: box-shadow 0.2s, background-color 0.2s;
}

.cy-stepper__marker::before {
  content: counter(cy-step, decimal-leading-zero);
}

.cy-stepper__step[data-state='complete'] {
  color: var(--cy-green);
}

.cy-stepper__step[data-state='complete'] .cy-stepper__marker::before {
  content: '✓';
}

.cy-stepper__step[data-state='current'] {
  color: var(--cy-cyan);
}

.cy-stepper__step[data-state='current'] .cy-stepper__marker {
  background: #0a1a24;
  box-shadow: var(--cy-glow-cyan);
}

.cy-stepper__step[data-state='current'] .cy-stepper__label {
  color: #fff;
}

.cy-stepper__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
```

#### Stepper.tsx

```tsx
import './stepper.css';

interface Props {
  steps: string[];
  /** Zero-based index of the current step. Earlier steps show as completed. */
  current: number;
  label?: string;
}

export function Stepper({ steps, current, label = 'Progress' }: Props) {
  return (
    <nav aria-label={label}>
      <ol className='cy-stepper'>
        {steps.map((step, index) => {
          const state = index < current ? 'complete' : index === current ? 'current' : undefined;
          return (
            <li key={step} className='cy-stepper__step' data-state={state} aria-current={state === 'current' ? 'step' : undefined}>
              <span className='cy-stepper__marker' aria-hidden='true' />
              <span className='cy-stepper__label'>
                {step}
                {state === 'complete' && <span className='cy-stepper__sr'> (completed)</span>}
              </span>
            </li>
          );
        })}
      </ol>
    </nav>
  );
}
```

---

### Feedback / Alert

URL: https://cyberdeck-ui.netlify.app/components/feedback#alert

Info, success, warning and danger messages with the right ARIA role for each.

React usage:

```tsx
<Alert title="Uplink established">Secure channel to the grid is online.</Alert>
<Alert tone="danger" title="Intrusion detected">ICE breached on node 7.</Alert>
```

#### alert.html

```html
<div class="cy-alert" role="status">
  <span class="cy-alert__tag">SYS</span>
  <div>
    <p class="cy-alert__title">Uplink established</p>
    <p class="cy-alert__body">Secure channel to the grid is online.</p>
  </div>
</div>

<div class="cy-alert cy-alert--warning" role="status">
  <span class="cy-alert__tag">WARN</span>
  <div>
    <p class="cy-alert__title">Heat rising</p>
    <p class="cy-alert__body">Core temperature is above 80°C. Throttling in 30 seconds.</p>
  </div>
</div>

<div class="cy-alert cy-alert--danger" role="alert">
  <span class="cy-alert__tag">ERR</span>
  <div>
    <p class="cy-alert__title">Intrusion detected</p>
    <p class="cy-alert__body">ICE breached on node 7. Isolating the subnet.</p>
  </div>
</div>
```

#### alert.css

```css
.cy-alert {
  --cy-alert: 0 240 255; /* RGB channels; set by the tone modifiers */
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  width: 100%;
  max-width: 32rem;
  padding: 1rem 1.25rem;
  border: 1px solid rgb(var(--cy-alert) / 0.35);
  border-left: 3px solid rgb(var(--cy-alert));
  background: rgb(var(--cy-alert) / 0.06);
  font-family: var(--cy-font-body);
}

.cy-alert--success { --cy-alert: 5 255 161; }
.cy-alert--warning { --cy-alert: 252 238 10; }
.cy-alert--danger { --cy-alert: 255 42 109; }

.cy-alert__tag {
  align-self: start;
  padding: 0.15rem 0.45rem;
  background: rgb(var(--cy-alert));
  color: #000;
  font-family: var(--cy-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

.cy-alert__title {
  margin: 0;
  color: rgb(var(--cy-alert));
  font-family: var(--cy-font-display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cy-alert__body {
  margin: 0.35rem 0 0;
  color: var(--cy-muted);
  font-size: 1rem;
  line-height: 1.5;
}
```

#### Alert.tsx

```tsx
import type { ReactNode } from 'react';
import './alert.css';

type Tone = 'info' | 'success' | 'warning' | 'danger';

interface Props {
  title: string;
  children?: ReactNode;
  tone?: Tone;
  /** Short label in the badge, e.g. "SYS" or "ERR". */
  tag?: string;
}

const DEFAULT_TAGS: Record<Tone, string> = {
  info: 'SYS',
  success: 'OK',
  warning: 'WARN',
  danger: 'ERR',
};

export function Alert({ title, children, tone = 'info', tag = DEFAULT_TAGS[tone] }: Props) {
  // Errors interrupt screen readers; everything else is announced politely.
  const role = tone === 'danger' ? 'alert' : 'status';

  return (
    <div className={`cy-alert ${tone === 'info' ? '' : `cy-alert--${tone}`}`.trim()} role={role}>
      <span className='cy-alert__tag'>{tag}</span>
      <div>
        <p className='cy-alert__title'>{title}</p>
        {children && <p className='cy-alert__body'>{children}</p>}
      </div>
    </div>
  );
}
```

---

### Feedback / Progress Bar

URL: https://cyberdeck-ui.netlify.app/components/feedback#progress-bar

A segmented, glowing progress bar, plus an indeterminate scanning variant.

React usage:

```tsx
<ProgressBar label="Flashing firmware" value={68} />
<ProgressBar label="Scanning subnet" />
```

#### progress-bar.html

```html
<div class="cy-progress">
  <div class="cy-progress__head"><span id="cy-progress-fw">Flashing firmware</span><span>68%</span></div>
  <div class="cy-progress__track" role="progressbar" aria-labelledby="cy-progress-fw" aria-valuemin="0" aria-valuemax="100" aria-valuenow="68" style="--cy-progress: 68">
    <span></span>
  </div>
</div>

<div class="cy-progress">
  <div class="cy-progress__head"><span id="cy-progress-scan">Scanning subnet</span></div>
  <div class="cy-progress__track cy-progress__track--indeterminate" role="progressbar" aria-labelledby="cy-progress-scan">
    <span></span>
  </div>
</div>
```

#### progress-bar.css

```css
.cy-progress {
  width: 100%;
  max-width: 28rem;
}

.cy-progress__head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.6rem;
  color: var(--cy-muted);
  font-family: var(--cy-font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.cy-progress__head span:last-child:not(:first-child) {
  color: var(--cy-cyan);
}

.cy-progress__track {
  --cy-progress: 0; /* 0–100 */
  position: relative;
  height: 14px;
  overflow: hidden;
  border: 1px solid rgba(0, 240, 255, 0.3);
  background: var(--cy-surface);
}

.cy-progress__track span {
  position: absolute;
  inset: 2px auto 2px 2px;
  width: calc((100% - 4px) * var(--cy-progress) / 100);
  background: repeating-linear-gradient(90deg, var(--cy-cyan) 0 10px, transparent 10px 13px);
  filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.8));
  transition: width 0.3s var(--cy-ease);
}

.cy-progress__track--indeterminate span {
  width: 30%;
  background: repeating-linear-gradient(90deg, var(--cy-pink) 0 10px, transparent 10px 13px);
  filter: drop-shadow(0 0 4px rgba(255, 42, 109, 0.8));
  animation: cy-progress-scan 1.4s var(--cy-ease) infinite;
}

@keyframes cy-progress-scan {
  from { transform: translateX(-100%); }
  to { transform: translateX(340%); }
}

@media (prefers-reduced-motion: reduce) {
  .cy-progress__track--indeterminate span {
    width: calc(100% - 4px);
    opacity: 0.5;
    animation: none;
  }
}
```

#### ProgressBar.tsx

```tsx
'use client';

import { useId } from 'react';
import type { CSSProperties } from 'react';
import './progress-bar.css';

type ProgressStyle = CSSProperties & { '--cy-progress': number };

interface Props {
  label: string;
  /** Omit for an indeterminate (unknown duration) bar. */
  value?: number;
  max?: number;
}

export function ProgressBar({ label, value, max = 100 }: Props) {
  const labelId = useId();
  const indeterminate = value === undefined;
  const percent = indeterminate ? 0 : Math.round(Math.min(100, Math.max(0, (value / max) * 100)));
  const style: ProgressStyle = { '--cy-progress': percent };

  return (
    <div className='cy-progress'>
      <div className='cy-progress__head'>
        <span id={labelId}>{label}</span>
        {!indeterminate && <span>{percent}%</span>}
      </div>
      <div
        className={`cy-progress__track ${indeterminate ? 'cy-progress__track--indeterminate' : ''}`.trim()}
        role='progressbar'
        aria-labelledby={labelId}
        aria-valuemin={indeterminate ? undefined : 0}
        aria-valuemax={indeterminate ? undefined : max}
        aria-valuenow={indeterminate ? undefined : value}
        style={style}
      >
        <span />
      </div>
    </div>
  );
}
```

---

### Feedback / Loader

URL: https://cyberdeck-ui.netlify.app/components/feedback#loader

An equaliser-style loader with animated dots.

React usage:

```tsx
<Loader label="Booting" />
```

#### loader.html

```html
<div class="cy-loader" role="status">
  <span class="cy-loader__bars" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></span>
  <span class="cy-loader__text">Booting</span>
</div>
```

#### loader.css

```css
.cy-loader {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.cy-loader__bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 2rem;
}

.cy-loader__bars i {
  width: 5px;
  height: 100%;
  background: linear-gradient(to top, var(--cy-pink), var(--cy-cyan));
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
  transform-origin: bottom;
  animation: cy-loader-bar 0.9s ease-in-out infinite;
}

.cy-loader__bars i:nth-child(2) { animation-delay: 0.1s; }
.cy-loader__bars i:nth-child(3) { animation-delay: 0.2s; }
.cy-loader__bars i:nth-child(4) { animation-delay: 0.3s; }
.cy-loader__bars i:nth-child(5) { animation-delay: 0.4s; }

@keyframes cy-loader-bar {
  0%, 100% { transform: scaleY(0.25); }
  50% { transform: scaleY(1); }
}

.cy-loader__text {
  color: var(--cy-cyan);
  font-family: var(--cy-font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.cy-loader__text::after {
  content: '';
  display: inline-block;
  width: 3ch;
  text-align: left;
  animation: cy-loader-dots 1.2s steps(1) infinite;
}

@keyframes cy-loader-dots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
}

@media (prefers-reduced-motion: reduce) {
  .cy-loader__bars i,
  .cy-loader__text::after {
    animation: none;
  }

  .cy-loader__text::after {
    content: '...';
  }
}
```

#### Loader.tsx

```tsx
import './loader.css';

export function Loader({ label = 'Loading' }: { label?: string }) {
  return (
    <div className='cy-loader' role='status'>
      <span className='cy-loader__bars' aria-hidden='true'><i /><i /><i /><i /><i /></span>
      <span className='cy-loader__text'>{label}</span>
    </div>
  );
}
```

---

### Feedback / Skeleton

URL: https://cyberdeck-ui.netlify.app/components/feedback#skeleton

Placeholder lines and blocks with a scanning shimmer while content loads.

React usage:

```tsx
<SkeletonGroup label="Loading profile">
  <Skeleton shape="block" />
  <Skeleton width="55%" height="1rem" />
  <Skeleton width="35%" />
  <Skeleton />
  <Skeleton width="70%" />
</SkeletonGroup>
```

#### skeleton.html

```html
<div class="cy-skeleton-group" role="status" aria-label="Loading profile">
  <span class="cy-skeleton cy-skeleton--block"></span>
  <span class="cy-skeleton" style="--cy-skeleton-width: 55%; --cy-skeleton-height: 1rem"></span>
  <span class="cy-skeleton" style="--cy-skeleton-width: 35%"></span>
  <span class="cy-skeleton"></span>
  <span class="cy-skeleton"></span>
  <span class="cy-skeleton" style="--cy-skeleton-width: 70%"></span>
</div>
```

#### skeleton.css

```css
.cy-skeleton-group {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.7rem 1rem;
  width: 100%;
  max-width: 26rem;
  padding: 1.25rem;
  border: 1px solid var(--cy-border);
  background: var(--cy-surface);
}

/* Lines span the full width, except the two next to a leading block. */
.cy-skeleton-group > .cy-skeleton {
  grid-column: 1 / -1;
}

.cy-skeleton-group > .cy-skeleton--block {
  grid-row: span 2;
  grid-column: 1;
}

.cy-skeleton-group > .cy-skeleton--block + .cy-skeleton,
.cy-skeleton-group > .cy-skeleton--block + .cy-skeleton + .cy-skeleton {
  grid-column: 2;
}

.cy-skeleton {
  display: block;
  width: var(--cy-skeleton-width, 100%);
  height: var(--cy-skeleton-height, 0.75rem);
  background:
    linear-gradient(90deg, transparent 40%, rgba(0, 240, 255, 0.22) 50%, transparent 60%) 0 0 / 250% 100%,
    var(--cy-surface-2);
  animation: cy-skeleton-scan 1.6s linear infinite;
}

.cy-skeleton--block {
  width: var(--cy-skeleton-width, 3.5rem);
  height: var(--cy-skeleton-height, 3.5rem);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

@keyframes cy-skeleton-scan {
  from { background-position: 100% 0, 0 0; }
  to { background-position: 0 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cy-skeleton {
    animation: none;
  }
}
```

#### Skeleton.tsx

```tsx
import type { CSSProperties, ReactNode } from 'react';
import './skeleton.css';

type SkeletonStyle = CSSProperties & { '--cy-skeleton-width'?: string; '--cy-skeleton-height'?: string };

interface SkeletonProps {
  /** Any CSS width, e.g. "60%" or "8rem". */
  width?: string;
  height?: string;
  /** block: a square with cut corners, for avatars and thumbnails. */
  shape?: 'line' | 'block';
}

export function Skeleton({ width, height, shape = 'line' }: SkeletonProps) {
  const style: SkeletonStyle = { '--cy-skeleton-width': width, '--cy-skeleton-height': height };
  return <span className={`cy-skeleton ${shape === 'block' ? 'cy-skeleton--block' : ''}`.trim()} style={style} aria-hidden='true' />;
}

interface GroupProps {
  /** Announced to screen readers while loading. */
  label: string;
  children: ReactNode;
}

export function SkeletonGroup({ label, children }: GroupProps) {
  return (
    <div className='cy-skeleton-group' role='status' aria-label={label}>
      {children}
    </div>
  );
}
```

---

### Feedback / Toast

URL: https://cyberdeck-ui.netlify.app/components/feedback#toast

Slide-in notifications that dismiss themselves. The React version is a provider plus a useToast() hook.

React usage:

```tsx
// Once, near the root:
<ToastProvider>{children}</ToastProvider>

// Anywhere inside:
const toast = useToast();
toast('Data shard uploaded to node 7');
```

#### toast.html

```html
<button class="cy-toast-trigger" type="button" data-cy-toast="Data shard uploaded to node 7">Upload shard</button>

<div class="cy-toast-region" aria-live="polite"></div>
```

#### toast.css

```css
.cy-toast-trigger {
  padding: 0.7rem 1.4rem;
  border: 1px solid rgba(0, 240, 255, 0.6);
  background: transparent;
  color: var(--cy-cyan);
  font-family: var(--cy-font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
}

.cy-toast-trigger:hover,
.cy-toast-trigger:focus-visible {
  outline: none;
  background: rgba(0, 240, 255, 0.1);
}

.cy-toast-region {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: min(22rem, calc(100vw - 2.5rem));
}

.cy-toast {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(5, 255, 161, 0.4);
  border-left: 3px solid var(--cy-green);
  background: var(--cy-surface);
  box-shadow: 0 0 24px rgba(5, 255, 161, 0.15);
  color: var(--cy-text);
  font-family: var(--cy-font-body);
  font-size: 1rem;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  animation: cy-toast-in 0.3s var(--cy-ease);
}

.cy-toast__tag {
  color: var(--cy-green);
  font-family: var(--cy-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

.cy-toast__close {
  padding: 0.25rem;
  border: 0;
  background: none;
  color: var(--cy-dim);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.cy-toast__close:hover,
.cy-toast__close:focus-visible {
  color: var(--cy-pink);
}

@keyframes cy-toast-in {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .cy-toast {
    animation: none;
  }
}
```

#### toast.js

```js
// Shows a toast for any [data-cy-toast] button; toasts dismiss after 4 seconds.
(() => {
  const region = document.querySelector('.cy-toast-region');

  const showToast = (message) => {
    const toast = document.createElement('div');
    const tag = document.createElement('span');
    const text = document.createElement('span');
    const close = document.createElement('button');

    toast.className = 'cy-toast';
    tag.className = 'cy-toast__tag';
    tag.textContent = '[OK]';
    text.textContent = message;
    close.className = 'cy-toast__close';
    close.type = 'button';
    close.setAttribute('aria-label', 'Dismiss');
    close.textContent = '✕';

    const dismiss = () => toast.remove();
    close.addEventListener('click', dismiss);
    setTimeout(dismiss, 4000);

    toast.append(tag, text, close);
    region.append(toast);
  };

  document.querySelectorAll('[data-cy-toast]').forEach((button) => {
    button.addEventListener('click', () => showToast(button.dataset.cyToast));
  });
})();
```

#### Toast.tsx

```tsx
'use client';

import { createContext, useCallback, useContext, useState } from 'react';
import type { ReactNode } from 'react';
import './toast.css';

interface Toast {
  id: number;
  message: string;
}

const ToastContext = createContext<((message: string) => void) | null>(null);

let nextId = 0;

/** Wrap your app (or a section) once; then call useToast() anywhere inside. */
export function ToastProvider({ children, duration = 4000 }: { children: ReactNode; duration?: number }) {
  const [toasts, setToasts] = useState<Toast[]>([]);

  const dismiss = useCallback((id: number) => {
    setToasts((current) => current.filter((toast) => toast.id !== id));
  }, []);

  const show = useCallback((message: string) => {
    const id = nextId++;
    setToasts((current) => [...current, { id, message }]);
    setTimeout(() => dismiss(id), duration);
  }, [dismiss, duration]);

  return (
    <ToastContext.Provider value={show}>
      {children}
      <div className='cy-toast-region' aria-live='polite'>
        {toasts.map((toast) => (
          <div key={toast.id} className='cy-toast'>
            <span className='cy-toast__tag'>[OK]</span>
            <span>{toast.message}</span>
            <button type='button' className='cy-toast__close' aria-label='Dismiss' onClick={() => dismiss(toast.id)}>✕</button>
          </div>
        ))}
      </div>
    </ToastContext.Provider>
  );
}

export function useToast() {
  const show = useContext(ToastContext);
  if (!show) throw new Error('useToast must be used inside <ToastProvider>');
  return show;
}
```

---

### Feedback / Tooltip

URL: https://cyberdeck-ui.netlify.app/components/feedback#tooltip

A CSS-only tooltip that also opens on keyboard focus, linked with aria-describedby.

React usage:

```tsx
<Tooltip label="Encryption" content="AES-256 · keys rotated hourly" />
```

#### tooltip.html

```html
<span class="cy-tooltip">
  <button class="cy-tooltip__trigger" type="button" aria-describedby="cy-tip-enc">Encryption</button>
  <span class="cy-tooltip__bubble" role="tooltip" id="cy-tip-enc">AES-256 · keys rotated hourly</span>
</span>
```

#### tooltip.css

```css
.cy-tooltip {
  position: relative;
  display: inline-block;
}

.cy-tooltip__trigger {
  padding: 0.25rem 0;
  border: 0;
  border-bottom: 1px dashed var(--cy-cyan);
  background: none;
  color: var(--cy-cyan);
  font-family: var(--cy-font-mono);
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: help;
}

.cy-tooltip__bubble {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  z-index: 10;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--cy-pink);
  background: var(--cy-surface);
  box-shadow: 0 0 16px rgba(255, 42, 109, 0.3);
  color: var(--cy-text);
  font-family: var(--cy-font-mono);
  font-size: 0.8rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}

/* Arrow */
.cy-tooltip__bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-right: 1px solid var(--cy-pink);
  border-bottom: 1px solid var(--cy-pink);
  background: var(--cy-surface);
  transform: translate(-50%, -4px) rotate(45deg);
}

.cy-tooltip:hover .cy-tooltip__bubble,
.cy-tooltip:focus-within .cy-tooltip__bubble {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
```

#### Tooltip.tsx

```tsx
'use client';

import { useId } from 'react';
import './tooltip.css';

interface Props {
  /** The trigger's text. */
  label: string;
  /** What the tooltip says. */
  content: string;
}

export function Tooltip({ label, content }: Props) {
  const id = useId();

  return (
    <span className='cy-tooltip'>
      <button type='button' className='cy-tooltip__trigger' aria-describedby={id}>{label}</button>
      <span className='cy-tooltip__bubble' role='tooltip' id={id}>{content}</span>
    </span>
  );
}
```

---

### Data Display / Chip List

URL: https://cyberdeck-ui.netlify.app/components/data-display#chip-list

Small mono tags for technologies or categories, in cyan or pink.

React usage:

```tsx
<ChipList items={['Ruby on Rails', 'React', 'TypeScript']} />
<ChipList items={['netrunning']} tone="pink" />
```

#### chip-list.html

```html
<ul class="cy-chips">
  <li>Ruby on Rails</li>
  <li>React</li>
  <li>TypeScript</li>
  <li>PostgreSQL</li>
</ul>

<ul class="cy-chips cy-chips--pink">
  <li>netrunning</li>
  <li>cyberware</li>
</ul>
```

#### chip-list.css

```css
.cy-chips {
  --cy-chip: 0 240 255; /* RGB channels */
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cy-chips--pink { --cy-chip: 255 42 109; }

.cy-chips li {
  padding: 0.25rem 0.65rem;
  border: 1px solid rgb(var(--cy-chip) / 0.3);
  background: rgb(var(--cy-chip) / 0.05);
  color: rgb(var(--cy-chip) / 0.9);
  font-family: var(--cy-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background-color 0.2s, border-color 0.2s;
}

.cy-chips li:hover {
  border-color: rgb(var(--cy-chip) / 0.6);
  background: rgb(var(--cy-chip) / 0.15);
}
```

#### ChipList.tsx

```tsx
import './chip-list.css';

interface Props {
  items: string[];
  tone?: 'cyan' | 'pink';
}

export function ChipList({ items, tone = 'cyan' }: Props) {
  if (items.length === 0) return null;

  return (
    <ul className={`cy-chips ${tone === 'pink' ? 'cy-chips--pink' : ''}`.trim()}>
      {items.map((item) => <li key={item}>{item}</li>)}
    </ul>
  );
}
```

---

### Data Display / Timeline

URL: https://cyberdeck-ui.netlify.app/components/data-display#timeline

A vertical timeline with diamond markers. The current entry pulses.

React usage:

```tsx
<Timeline
  items={[
    { period: '2025 — Present', title: 'Senior Engineer', org: 'Neotek Systems', meta: 'Remote' },
    { period: '2021 — 2025', title: 'Software Engineer', org: 'Halcyon Labs' },
  ]}
/>
```

#### timeline.html

```html
<ol class="cy-timeline">
  <li class="cy-timeline__item cy-timeline__item--current">
    <span class="cy-timeline__marker" aria-hidden="true"></span>
    <div>
      <span class="cy-timeline__period">2025 — Present</span>
      <h3 class="cy-timeline__title">Senior Engineer <span>@ Neotek Systems</span></h3>
      <p class="cy-timeline__meta">Remote</p>
      <p class="cy-timeline__body">Leading the platform team behind a real-time city grid monitor.</p>
    </div>
  </li>
  <li class="cy-timeline__item">
    <span class="cy-timeline__marker" aria-hidden="true"></span>
    <div>
      <span class="cy-timeline__period">2021 — 2025</span>
      <h3 class="cy-timeline__title">Software Engineer <span>@ Halcyon Labs</span></h3>
      <p class="cy-timeline__meta">Lisbon</p>
      <p class="cy-timeline__body">Built the payments core and its end-to-end test suite.</p>
    </div>
  </li>
</ol>
```

#### timeline.css

```css
.cy-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--cy-font-body);
}

.cy-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 1.25rem;
  padding-bottom: 2.5rem;
}

/* Connecting line */
.cy-timeline__item:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 1.4rem;
  bottom: 0.25rem;
  left: calc(0.75rem - 0.5px);
  width: 1px;
  background: linear-gradient(to bottom, rgba(0, 240, 255, 0.5), rgba(0, 240, 255, 0.05));
}

.cy-timeline__marker {
  position: relative;
  justify-self: center;
  width: 12px;
  height: 12px;
  margin-top: 0.35rem;
  border: 2px solid rgba(0, 240, 255, 0.7);
  background: var(--cy-bg);
  transform: rotate(45deg);
}

.cy-timeline__item--current .cy-timeline__marker {
  border-color: var(--cy-pink);
  background: var(--cy-pink);
  box-shadow: 0 0 12px rgba(255, 42, 109, 0.8);
}

.cy-timeline__item--current .cy-timeline__marker::after {
  content: '';
  position: absolute;
  inset: -6px;
  background: rgba(255, 42, 109, 0.4);
  animation: cy-timeline-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes cy-timeline-ping {
  75%, 100% { opacity: 0; transform: scale(2); }
}

.cy-timeline__period {
  color: var(--cy-yellow);
  font-family: var(--cy-font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.15em;
}

.cy-timeline__title {
  margin: 0.25rem 0 0;
  color: #fff;
  font-family: var(--cy-font-display);
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cy-timeline__title span {
  color: var(--cy-cyan);
}

.cy-timeline__meta {
  margin: 0.25rem 0 0;
  color: var(--cy-dim);
  font-family: var(--cy-font-mono);
  font-size: 0.85rem;
}

.cy-timeline__body {
  margin: 0.75rem 0 0;
  color: #d1d5db;
  font-size: 1.05rem;
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .cy-timeline__item--current .cy-timeline__marker::after {
    animation: none;
  }
}
```

#### Timeline.tsx

```tsx
import './timeline.css';

interface Entry {
  period: string;
  title: string;
  org?: string;
  meta?: string;
  description?: string;
}

interface Props {
  /** Newest first; the first entry is highlighted as current. */
  items: Entry[];
  highlightFirst?: boolean;
}

export function Timeline({ items, highlightFirst = true }: Props) {
  return (
    <ol className='cy-timeline'>
      {items.map((item, i) => (
        <li
          key={`${item.title}-${item.period}`}
          className={`cy-timeline__item ${highlightFirst && i === 0 ? 'cy-timeline__item--current' : ''}`.trim()}
        >
          <span className='cy-timeline__marker' aria-hidden='true' />
          <div>
            <span className='cy-timeline__period'>{item.period}</span>
            <h3 className='cy-timeline__title'>
              {item.title} {item.org && <span>@ {item.org}</span>}
            </h3>
            {item.meta && <p className='cy-timeline__meta'>{item.meta}</p>}
            {item.description && <p className='cy-timeline__body'>{item.description}</p>}
          </div>
        </li>
      ))}
    </ol>
  );
}
```

---

### Data Display / Terminal Window

URL: https://cyberdeck-ui.netlify.app/components/data-display#terminal-window

A fake terminal for commands and output, with coloured status lines and a blinking cursor.

React usage:

```tsx
<TerminalWindow
  lines={[
    { kind: 'command', text: 'ping grid.local' },
    { kind: 'ok', text: '64 bytes from 10.0.0.1: time=0.42 ms' },
  ]}
/>
```

#### terminal-window.html

```html
<div class="cy-terminal">
  <div class="cy-terminal__bar">
    <span class="cy-terminal__dots" aria-hidden="true"><i></i><i></i><i></i></span>
    <span class="cy-terminal__title">root@deck:~</span>
  </div>
  <pre class="cy-terminal__body"><code><span class="cy-terminal__prompt">$</span> ping grid.local
<span class="cy-terminal__ok">64 bytes from 10.0.0.1: time=0.42 ms</span>
<span class="cy-terminal__prompt">$</span> decrypt shard.bin
<span class="cy-terminal__warn">[!] ICE detected — rerouting...</span>
<span class="cy-terminal__ok">[✓] Access granted</span>
<span class="cy-terminal__prompt">$</span> <span class="cy-terminal__cursor"></span></code></pre>
</div>
```

#### terminal-window.css

```css
.cy-terminal {
  width: 100%;
  max-width: 34rem;
  border: 1px solid rgba(0, 240, 255, 0.3);
  background: #05030a;
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.08);
}

.cy-terminal__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid rgba(0, 240, 255, 0.2);
  background: var(--cy-surface-2);
}

.cy-terminal__dots {
  display: flex;
  gap: 6px;
}

.cy-terminal__dots i {
  width: 10px;
  height: 10px;
  background: var(--cy-pink);
}

.cy-terminal__dots i:nth-child(2) { background: var(--cy-yellow); }
.cy-terminal__dots i:nth-child(3) { background: var(--cy-green); }

.cy-terminal__title {
  color: var(--cy-dim);
  font-family: var(--cy-font-mono);
  font-size: 0.8rem;
}

.cy-terminal__body {
  margin: 0;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  color: var(--cy-text);
  font-family: var(--cy-font-mono);
  font-size: 0.9rem;
  line-height: 1.7;
}

.cy-terminal__prompt { color: var(--cy-pink); }
.cy-terminal__ok { color: var(--cy-green); }
.cy-terminal__warn { color: var(--cy-yellow); }
.cy-terminal__error { color: var(--cy-pink); }

.cy-terminal__cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.1em;
  background: var(--cy-cyan);
  vertical-align: text-bottom;
  animation: cy-terminal-blink 1s steps(1) infinite;
}

@keyframes cy-terminal-blink {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cy-terminal__cursor {
    animation: none;
  }
}
```

#### TerminalWindow.tsx

```tsx
import { Fragment } from 'react';
import './terminal-window.css';

type LineKind = 'command' | 'output' | 'ok' | 'warn' | 'error';

interface Line {
  kind: LineKind;
  text: string;
}

interface Props {
  title?: string;
  lines: Line[];
  /** Show a blinking cursor on a final empty prompt. */
  cursor?: boolean;
}

const CLASS_FOR: Partial<Record<LineKind, string>> = {
  ok: 'cy-terminal__ok',
  warn: 'cy-terminal__warn',
  error: 'cy-terminal__error',
};

export function TerminalWindow({ title = 'root@deck:~', lines, cursor = true }: Props) {
  return (
    <div className='cy-terminal'>
      <div className='cy-terminal__bar'>
        <span className='cy-terminal__dots' aria-hidden='true'><i /><i /><i /></span>
        <span className='cy-terminal__title'>{title}</span>
      </div>
      <pre className='cy-terminal__body'>
        <code>
          {lines.map((line, i) => (
            <Fragment key={i}>
              {line.kind === 'command' && <span className='cy-terminal__prompt'>$ </span>}
              <span className={CLASS_FOR[line.kind]}>{line.text}</span>
              {'\n'}
            </Fragment>
          ))}
          {cursor && (
            <>
              <span className='cy-terminal__prompt'>$ </span>
              <span className='cy-terminal__cursor' />
            </>
          )}
        </code>
      </pre>
    </div>
  );
}
```

---

### Data Display / Data Table

URL: https://cyberdeck-ui.netlify.app/components/data-display#data-table

A typed, generic table with a caption, numeric columns and custom cell renderers.

React usage:

```tsx
<DataTable
  caption="Active runners"
  rows={runners}
  rowKey={(r) => r.handle}
  columns={[
    { key: 'handle', header: 'Handle' },
    { key: 'ping', header: 'Ping', numeric: true, render: (r) => `${r.ping} ms` },
  ]}
/>
```

#### data-table.html

```html
<div class="cy-table-wrap">
  <table class="cy-table">
    <caption>Active runners</caption>
    <thead>
      <tr>
        <th scope="col">Handle</th>
        <th scope="col">Role</th>
        <th scope="col">Status</th>
        <th scope="col" class="cy-table__num">Ping</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>nyx</td><td>Netrunner</td><td><span class="cy-table__tag cy-table__tag--ok">Online</span></td><td class="cy-table__num">12 ms</td></tr>
      <tr><td>halo_9</td><td>Fixer</td><td><span class="cy-table__tag cy-table__tag--warn">Idle</span></td><td class="cy-table__num">48 ms</td></tr>
      <tr><td>vex</td><td>Techie</td><td><span class="cy-table__tag cy-table__tag--off">Offline</span></td><td class="cy-table__num">—</td></tr>
    </tbody>
  </table>
</div>
```

#### data-table.css

```css
.cy-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid rgba(0, 240, 255, 0.2);
  background: var(--cy-surface);
}

.cy-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--cy-font-body);
  font-size: 1rem;
}

.cy-table caption {
  padding: 0.85rem 1rem;
  color: var(--cy-pink);
  font-family: var(--cy-font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-align: left;
  text-transform: uppercase;
}

.cy-table th {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid rgba(0, 240, 255, 0.3);
  background: var(--cy-surface-2);
  color: var(--cy-cyan);
  font-family: var(--cy-font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-align: left;
  text-transform: uppercase;
}

.cy-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--cy-text);
}

.cy-table tbody tr {
  transition: background-color 0.15s;
}

.cy-table tbody tr:hover {
  background: rgba(0, 240, 255, 0.05);
}

.cy-table tbody tr:last-child td {
  border-bottom: 0;
}

.cy-table .cy-table__num {
  font-family: var(--cy-font-mono);
  text-align: right;
}

.cy-table__tag {
  font-family: var(--cy-font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cy-table__tag--ok { color: var(--cy-green); }
.cy-table__tag--warn { color: var(--cy-yellow); }
.cy-table__tag--off { color: var(--cy-dim); }
```

#### DataTable.tsx

```tsx
import type { ReactNode } from 'react';
import './data-table.css';

export interface Column<Row> {
  key: keyof Row & string;
  header: string;
  /** Right-aligned, monospace: for numbers. */
  numeric?: boolean;
  render?: (row: Row) => ReactNode;
}

interface Props<Row> {
  caption: string;
  columns: Column<Row>[];
  rows: Row[];
  rowKey: (row: Row) => string;
}

export function DataTable<Row>({ caption, columns, rows, rowKey }: Props<Row>) {
  return (
    <div className='cy-table-wrap'>
      <table className='cy-table'>
        <caption>{caption}</caption>
        <thead>
          <tr>
            {columns.map((column) => (
              <th key={column.key} scope='col' className={column.numeric ? 'cy-table__num' : undefined}>
                {column.header}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((row) => (
            <tr key={rowKey(row)}>
              {columns.map((column) => (
                <td key={column.key} className={column.numeric ? 'cy-table__num' : undefined}>
                  {column.render ? column.render(row) : String(row[column.key] ?? '')}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}
```

---

### Data Display / Status Badge

URL: https://cyberdeck-ui.netlify.app/components/data-display#status-badge

Online, away, offline and alert badges with a glowing (pulsing) dot.

React usage:

```tsx
<StatusBadge status="online" />
<StatusBadge status="alert">Breach</StatusBadge>
```

#### status-badge.html

```html
<span class="cy-status cy-status--online">Online</span>
<span class="cy-status cy-status--away">Idle</span>
<span class="cy-status cy-status--offline">Offline</span>
<span class="cy-status cy-status--alert">Breach</span>
```

#### status-badge.css

```css
.cy-status {
  --cy-status: 107 114 128; /* RGB channels; set by the modifiers */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid rgb(var(--cy-status) / 0.4);
  background: rgb(var(--cy-status) / 0.08);
  color: rgb(var(--cy-status));
  font-family: var(--cy-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.cy-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--cy-status));
  box-shadow: 0 0 6px rgb(var(--cy-status));
}

.cy-status--online { --cy-status: 5 255 161; }
.cy-status--away { --cy-status: 252 238 10; }
.cy-status--alert { --cy-status: 255 42 109; }

.cy-status--online::before,
.cy-status--alert::before {
  animation: cy-status-pulse 1.6s ease-in-out infinite;
}

@keyframes cy-status-pulse {
  50% { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
  .cy-status::before {
    animation: none;
  }
}
```

#### StatusBadge.tsx

```tsx
import type { ReactNode } from 'react';
import './status-badge.css';

type Status = 'online' | 'away' | 'offline' | 'alert';

interface Props {
  status: Status;
  /** Defaults to the status name. */
  children?: ReactNode;
}

export function StatusBadge({ status, children = status }: Props) {
  return <span className={`cy-status cy-status--${status}`}>{children}</span>;
}
```

---

### Data Display / Radial Gauge

URL: https://cyberdeck-ui.netlify.app/components/data-display#radial-gauge

A circular meter with a tick ring and a glowing arc, in four colours. Uses role="meter".

React usage:

```tsx
<RadialGauge label="Neural sync" value={72} />
<RadialGauge label="Core heat" value={38} tone="pink" />
```

#### radial-gauge.html

```html
<div class="cy-gauge" role="meter" aria-label="Neural sync" aria-valuemin="0" aria-valuemax="100" aria-valuenow="72" style="--cy-gauge: 72">
  <svg viewBox="0 0 120 120" aria-hidden="true">
    <circle class="cy-gauge__ticks" cx="60" cy="60" r="56" />
    <circle class="cy-gauge__track" cx="60" cy="60" r="46" />
    <circle class="cy-gauge__value" cx="60" cy="60" r="46" />
  </svg>
  <div class="cy-gauge__readout" aria-hidden="true"><strong>72<small>%</small></strong><span>Neural sync</span></div>
</div>

<div class="cy-gauge cy-gauge--pink" role="meter" aria-label="Core heat" aria-valuemin="0" aria-valuemax="100" aria-valuenow="38" style="--cy-gauge: 38">
  <svg viewBox="0 0 120 120" aria-hidden="true">
    <circle class="cy-gauge__ticks" cx="60" cy="60" r="56" />
    <circle class="cy-gauge__track" cx="60" cy="60" r="46" />
    <circle class="cy-gauge__value" cx="60" cy="60" r="46" />
  </svg>
  <div class="cy-gauge__readout" aria-hidden="true"><strong>38<small>%</small></strong><span>Core heat</span></div>
</div>
```

#### radial-gauge.css

```css
.cy-gauge {
  --cy-gauge: 0; /* 0–100 */
  --cy-gauge-color: var(--cy-cyan);
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 10rem;
  aspect-ratio: 1;
}

.cy-gauge--pink { --cy-gauge-color: var(--cy-pink); }
.cy-gauge--yellow { --cy-gauge-color: var(--cy-yellow); }
.cy-gauge--green { --cy-gauge-color: var(--cy-green); }

.cy-gauge svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
}

.cy-gauge circle {
  fill: none;
}

/* 60 ticks around a circle of radius 56 (circumference ≈ 351.9) */
.cy-gauge__ticks {
  stroke: var(--cy-gauge-color);
  stroke-dasharray: 1px 4.865px;
  stroke-opacity: 0.35;
  stroke-width: 4;
}

.cy-gauge__track {
  stroke: var(--cy-surface-2);
  stroke-width: 8;
}

/* Radius 46: circumference ≈ 289.03, so 1% ≈ 2.89 */
.cy-gauge__value {
  stroke: var(--cy-gauge-color);
  stroke-dasharray: calc(var(--cy-gauge) * 2.8903px) 289.03px;
  stroke-width: 8;
  filter: drop-shadow(0 0 4px var(--cy-gauge-color));
  transition: stroke-dasharray 0.6s var(--cy-ease);
}

.cy-gauge__readout {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
}

.cy-gauge__readout strong {
  color: #fff;
  font-family: var(--cy-font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 0 10px var(--cy-gauge-color);
}

.cy-gauge__readout small {
  color: var(--cy-gauge-color);
  font-size: 0.5em;
}

.cy-gauge__readout span {
  margin-top: 0.35rem;
  color: var(--cy-muted);
  font-family: var(--cy-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .cy-gauge__value {
    transition: none;
  }
}
```

#### RadialGauge.tsx

```tsx
import type { CSSProperties } from 'react';
import './radial-gauge.css';

type GaugeStyle = CSSProperties & { '--cy-gauge': number };

interface Props {
  label: string;
  value: number;
  max?: number;
  /** Shown after the value. Pass an empty string for none. */
  unit?: string;
  tone?: 'cyan' | 'pink' | 'yellow' | 'green';
}

export function RadialGauge({ label, value, max = 100, unit = '%', tone = 'cyan' }: Props) {
  const percent = Math.min(100, Math.max(0, (value / max) * 100));
  const style: GaugeStyle = { '--cy-gauge': percent };

  return (
    <div
      className={`cy-gauge ${tone === 'cyan' ? '' : `cy-gauge--${tone}`}`.trim()}
      role='meter'
      aria-label={label}
      aria-valuemin={0}
      aria-valuemax={max}
      aria-valuenow={value}
      style={style}
    >
      <svg viewBox='0 0 120 120' aria-hidden='true'>
        <circle className='cy-gauge__ticks' cx='60' cy='60' r='56' />
        <circle className='cy-gauge__track' cx='60' cy='60' r='46' />
        <circle className='cy-gauge__value' cx='60' cy='60' r='46' />
      </svg>
      <div className='cy-gauge__readout' aria-hidden='true'>
        <strong>
          {value}
          {unit && <small>{unit}</small>}
        </strong>
        <span>{label}</span>
      </div>
    </div>
  );
}
```

---

### Data Display / Avatar

URL: https://cyberdeck-ui.netlify.app/components/data-display#avatar

A hexagonal avatar with a gradient ring, initials or a photo, a status dot and a stacked group.

React usage:

```tsx
<Avatar name="Vex Kade" status="online" size="lg" />
<Avatar name="Juno Ash" src="/juno.jpg" />
```

#### avatar.html

```html
<span class="cy-avatar cy-avatar--lg" data-status="online" role="img" aria-label="Vex Kade, online">
  <span class="cy-avatar__frame"><span class="cy-avatar__initials">VK</span></span>
</span>

<span class="cy-avatar" data-status="away" role="img" aria-label="Juno Ash, away">
  <span class="cy-avatar__frame"><span class="cy-avatar__initials">JA</span></span>
</span>

<span class="cy-avatar cy-avatar--sm" data-status="busy" role="img" aria-label="Rook, busy">
  <span class="cy-avatar__frame"><span class="cy-avatar__initials">R</span></span>
</span>

<!-- Photos work too: <span class="cy-avatar__frame"><img src="…" alt=""></span> -->

<div class="cy-avatar-group" role="group" aria-label="Crew">
  <span class="cy-avatar cy-avatar--sm" role="img" aria-label="Vex Kade">
    <span class="cy-avatar__frame"><span class="cy-avatar__initials">VK</span></span>
  </span>
  <span class="cy-avatar cy-avatar--sm" role="img" aria-label="Juno Ash">
    <span class="cy-avatar__frame"><span class="cy-avatar__initials">JA</span></span>
  </span>
  <span class="cy-avatar cy-avatar--sm" role="img" aria-label="Rook">
    <span class="cy-avatar__frame"><span class="cy-avatar__initials">R</span></span>
  </span>
</div>
```

#### avatar.css

```css
.cy-avatar {
  --cy-avatar-size: 3.5rem;
  --cy-avatar-shape: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: var(--cy-avatar-size);
  height: var(--cy-avatar-size);
}

.cy-avatar--sm {
  --cy-avatar-size: 2.5rem;
}

.cy-avatar--lg {
  --cy-avatar-size: 5rem;
}

/* Gradient hexagon ring */
.cy-avatar__frame {
  display: block;
  width: 100%;
  height: 100%;
  padding: 2px;
  background: linear-gradient(135deg, var(--cy-cyan), var(--cy-purple) 50%, var(--cy-pink));
  clip-path: var(--cy-avatar-shape);
}

.cy-avatar__frame > img,
.cy-avatar__initials {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--cy-surface-2);
  clip-path: var(--cy-avatar-shape);
}

.cy-avatar__initials {
  color: var(--cy-cyan);
  font-family: var(--cy-font-display);
  font-size: calc(var(--cy-avatar-size) * 0.3);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
}

/* Status dot */
.cy-avatar[data-status]::after {
  content: '';
  position: absolute;
  right: 4%;
  bottom: 6%;
  width: 24%;
  height: 24%;
  border: 2px solid var(--cy-bg);
  border-radius: 50%;
  background: var(--cy-dim);
}

.cy-avatar[data-status='online']::after {
  background: var(--cy-green);
  box-shadow: 0 0 8px var(--cy-green);
}

.cy-avatar[data-status='away']::after {
  background: var(--cy-yellow);
  box-shadow: 0 0 8px var(--cy-yellow);
}

.cy-avatar[data-status='busy']::after {
  background: var(--cy-pink);
  box-shadow: 0 0 8px var(--cy-pink);
}

.cy-avatar-group {
  display: flex;
}

.cy-avatar-group > .cy-avatar + .cy-avatar {
  margin-left: calc(var(--cy-avatar-size) * -0.15);
}
```

#### Avatar.tsx

```tsx
import './avatar.css';

type Status = 'online' | 'away' | 'busy' | 'offline';

interface Props {
  name: string;
  /** Photo URL. Without one, the initials are shown. */
  src?: string;
  size?: 'sm' | 'md' | 'lg';
  status?: Status;
}

const initialsOf = (name: string) =>
  name
    .split(/\s+/)
    .filter(Boolean)
    .slice(0, 2)
    .map((part) => part[0])
    .join('')
    .toUpperCase();

export function Avatar({ name, src, size = 'md', status }: Props) {
  return (
    <span
      className={`cy-avatar ${size === 'md' ? '' : `cy-avatar--${size}`}`.trim()}
      data-status={status}
      role='img'
      aria-label={status ? `${name}, ${status}` : name}
    >
      <span className='cy-avatar__frame'>
        {src ? <img src={src} alt='' /> : <span className='cy-avatar__initials'>{initialsOf(name)}</span>}
      </span>
    </span>
  );
}
```

---

### Data Display / Accordion

URL: https://cyberdeck-ui.netlify.app/components/data-display#accordion

Numbered collapsible sections on native <details>, optionally one open at a time.

React usage:

```tsx
<Accordion
  exclusive
  defaultOpen={0}
  items={[
    { title: 'What is a cyberdeck?', content: <p>A portable rig for jacking into the net.</p> },
    { title: 'Do I need to install anything?', content: <p>No. Copy and paste.</p> },
  ]}
/>
```

#### accordion.html

```html
<!-- Items sharing a name open one at a time (native exclusive <details>). Drop the name to allow several. -->
<div class="cy-accordion">
  <details class="cy-accordion__item" name="cy-faq" open>
    <summary>What is a cyberdeck?</summary>
    <div class="cy-accordion__panel">
      <p>A portable rig for jacking into the net: keyboard, screen and a lot of questionable wiring.</p>
    </div>
  </details>
  <details class="cy-accordion__item" name="cy-faq">
    <summary>Do I need to install anything?</summary>
    <div class="cy-accordion__panel">
      <p>No. Copy the HTML and CSS, or the React component, and you're done.</p>
    </div>
  </details>
  <details class="cy-accordion__item" name="cy-faq">
    <summary>Can I change the colours?</summary>
    <div class="cy-accordion__panel">
      <p>Every colour comes from a design token. Override the tokens and the whole kit follows.</p>
    </div>
  </details>
</div>
```

#### accordion.css

```css
.cy-accordion {
  width: 100%;
  max-width: 36rem;
  border-top: 1px solid var(--cy-border);
  counter-reset: cy-accordion;
}

.cy-accordion__item {
  border-bottom: 1px solid var(--cy-border);
  counter-increment: cy-accordion;
}

.cy-accordion__item summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0.25rem;
  color: var(--cy-text);
  font-family: var(--cy-font-display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
  transition: color 0.15s, text-shadow 0.15s;
}

.cy-accordion__item summary::-webkit-details-marker {
  display: none;
}

/* 01, 02, 03… */
.cy-accordion__item summary::before {
  content: counter(cy-accordion, decimal-leading-zero);
  color: var(--cy-pink);
  font-family: var(--cy-font-mono);
  font-size: 0.8rem;
  font-weight: 400;
}

.cy-accordion__item summary::after {
  content: '+';
  margin-left: auto;
  color: var(--cy-cyan);
  font-family: var(--cy-font-mono);
  font-size: 1.25rem;
  font-weight: 400;
  transition: transform 0.2s var(--cy-ease);
}

.cy-accordion__item[open] summary::after {
  transform: rotate(45deg);
}

.cy-accordion__item summary:hover,
.cy-accordion__item[open] summary {
  color: var(--cy-cyan);
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.45);
}

.cy-accordion__item summary:focus-visible {
  outline: 2px solid var(--cy-yellow);
  outline-offset: 2px;
}

.cy-accordion__panel {
  padding: 0 0.25rem 1.25rem 2.6rem;
  color: var(--cy-muted);
  font-family: var(--cy-font-body);
  font-size: 1.05rem;
  line-height: 1.6;
}

.cy-accordion__panel p {
  margin: 0;
}

.cy-accordion__item[open] .cy-accordion__panel {
  animation: cy-accordion-in 0.25s var(--cy-ease);
}

@keyframes cy-accordion-in {
  from { opacity: 0; transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .cy-accordion__item[open] .cy-accordion__panel {
    animation: none;
  }
}
```

#### Accordion.tsx

```tsx
import { useId } from 'react';
import type { ReactNode } from 'react';
import './accordion.css';

export interface AccordionItem {
  title: string;
  content: ReactNode;
}

interface Props {
  items: AccordionItem[];
  /** Only one item open at a time, using native exclusive <details>. */
  exclusive?: boolean;
  /** Index of the item that starts open. */
  defaultOpen?: number;
}

export function Accordion({ items, exclusive = false, defaultOpen }: Props) {
  const name = useId();

  return (
    <div className='cy-accordion'>
      {items.map((item, index) => (
        <details key={item.title} className='cy-accordion__item' name={exclusive ? name : undefined} open={index === defaultOpen}>
          <summary>{item.title}</summary>
          <div className='cy-accordion__panel'>{item.content}</div>
        </details>
      ))}
    </div>
  );
}
```

---

### Data Display / Keyboard Key

URL: https://cyberdeck-ui.netlify.app/components/data-display#kbd

Glowing keycaps for shortcuts, single keys or combinations, using nested <kbd>.

React usage:

```tsx
<Kbd keys="Esc" />
<Kbd keys={['Ctrl', 'K']} />
```

#### kbd.html

```html
<p class="cy-kbd-text">
  Press <kbd class="cy-kbd-combo"><kbd class="cy-kbd">Ctrl</kbd>+<kbd class="cy-kbd">K</kbd></kbd> to open the command palette.
</p>

<p class="cy-kbd-text">
  <kbd class="cy-kbd">Esc</kbd> to disconnect, <kbd class="cy-kbd">↑</kbd> <kbd class="cy-kbd">↓</kbd> to navigate.
</p>
```

#### kbd.css

```css
.cy-kbd {
  display: inline-block;
  min-width: 1.9em;
  padding: 0.15em 0.5em;
  border: 1px solid rgba(0, 240, 255, 0.45);
  border-bottom-width: 3px;
  background: linear-gradient(var(--cy-surface-2), var(--cy-surface));
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.12);
  color: var(--cy-cyan);
  font-family: var(--cy-font-mono);
  font-size: 0.85em;
  line-height: 1.3;
  text-align: center;
  text-shadow: 0 0 6px rgba(0, 240, 255, 0.6);
}

/* A key combination: <kbd class="cy-kbd-combo"><kbd>Ctrl</kbd>+<kbd>K</kbd></kbd> */
.cy-kbd-combo {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: var(--cy-dim);
  font-family: var(--cy-font-mono);
  font-size: inherit;
}

/* Optional: body text around the keys. */
.cy-kbd-text {
  margin: 0;
  color: var(--cy-muted);
  font-family: var(--cy-font-body);
  font-size: 1.15rem;
}
```

#### Kbd.tsx

```tsx
import { Fragment } from 'react';
import './kbd.css';

interface Props {
  /** One key, or several for a combination like ['Ctrl', 'K']. */
  keys: string | string[];
}

export function Kbd({ keys }: Props) {
  if (typeof keys === 'string') return <kbd className='cy-kbd'>{keys}</kbd>;

  return (
    <kbd className='cy-kbd-combo'>
      {keys.map((key, index) => (
        <Fragment key={key}>
          {index > 0 && '+'}
          <kbd className='cy-kbd'>{key}</kbd>
        </Fragment>
      ))}
    </kbd>
  );
}
```

---

### Overlays / Modal

URL: https://cyberdeck-ui.netlify.app/components/overlays#modal

A HUD-framed dialog using native <dialog>: focus trapping, Escape to close and a blurred backdrop for free.

React usage:

```tsx
const [open, setOpen] = useState(false);

<Modal
  open={open}
  onClose={() => setOpen(false)}
  title="Confirm upload"
  actions={<NeonButton onClick={upload}>Upload</NeonButton>}
>
  Push this shard to the public net?
</Modal>
```

#### modal.html

```html
<button class="cy-modal-open" type="button" data-cy-modal-open="cy-upload-modal">Upload shard</button>

<dialog class="cy-modal" id="cy-upload-modal" aria-labelledby="cy-upload-modal-title">
  <form method="dialog" class="cy-modal__inner">
    <header class="cy-modal__header">
      <h2 id="cy-upload-modal-title">Confirm upload</h2>
      <button class="cy-modal__close" value="cancel" aria-label="Close">✕</button>
    </header>
    <p class="cy-modal__body">Push this shard to the public net? Once it's out there, it can't be pulled back.</p>
    <footer class="cy-modal__actions">
      <button class="cy-modal__btn" value="cancel">Abort</button>
      <button class="cy-modal__btn cy-modal__btn--primary" value="confirm">Upload</button>
    </footer>
  </form>
</dialog>
```

#### modal.css

```css
.cy-modal-open {
  padding: 0.7rem 1.4rem;
  border: 1px solid rgba(0, 240, 255, 0.6);
  background: transparent;
  color: var(--cy-cyan);
  font-family: var(--cy-font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
}

.cy-modal-open:hover,
.cy-modal-open:focus-visible {
  outline: none;
  background: rgba(0, 240, 255, 0.1);
}

.cy-modal {
  width: calc(100% - 2rem);
  max-width: 28rem;
  padding: 0;
  overflow: visible;
  border: 1px solid rgba(0, 240, 255, 0.4);
  background: var(--cy-surface);
  box-shadow: 0 0 40px rgba(0, 240, 255, 0.15);
  color: var(--cy-text);
  font-family: var(--cy-font-body);
}

.cy-modal[open] {
  animation: cy-modal-in 0.25s var(--cy-ease);
}

.cy-modal::backdrop {
  background: rgba(7, 5, 13, 0.75);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* HUD corner brackets */
.cy-modal::before,
.cy-modal::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  pointer-events: none;
}

.cy-modal::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid var(--cy-cyan);
  border-left: 2px solid var(--cy-cyan);
}

.cy-modal::after {
  right: -1px;
  bottom: -1px;
  border-right: 2px solid var(--cy-cyan);
  border-bottom: 2px solid var(--cy-cyan);
}

.cy-modal__inner {
  padding: 1.5rem;
}

.cy-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.cy-modal__header h2 {
  margin: 0;
  color: #fff;
  font-family: var(--cy-font-display);
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: var(--cy-glow-cyan);
}

.cy-modal__close {
  border: 0;
  background: none;
  color: var(--cy-dim);
  font-size: 1.1rem;
  cursor: pointer;
}

.cy-modal__close:hover,
.cy-modal__close:focus-visible {
  color: var(--cy-pink);
}

.cy-modal__body {
  margin: 1rem 0 1.5rem;
  color: var(--cy-muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

.cy-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

.cy-modal__btn {
  padding: 0.6rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: var(--cy-text);
  font-family: var(--cy-font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
}

.cy-modal__btn--primary {
  border-color: var(--cy-yellow);
  background: var(--cy-yellow);
  color: #000;
}

.cy-modal__btn:hover,
.cy-modal__btn:focus-visible {
  outline: none;
  border-color: var(--cy-cyan);
}

.cy-modal__btn--primary:hover,
.cy-modal__btn--primary:focus-visible {
  border-color: var(--cy-cyan);
  background: var(--cy-cyan);
}

@keyframes cy-modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cy-modal[open] {
    animation: none;
  }
}
```

#### modal.js

```js
// Opens <dialog class="cy-modal"> from [data-cy-modal-open="<dialog id>"] buttons.
// Buttons inside <form method="dialog"> close it; clicking the backdrop does too.
document.querySelectorAll('[data-cy-modal-open]').forEach((button) => {
  const dialog = document.getElementById(button.dataset.cyModalOpen);

  button.addEventListener('click', () => dialog.showModal());
  dialog.addEventListener('click', (event) => {
    if (event.target === dialog) dialog.close('cancel');
  });
});
```

#### Modal.tsx

```tsx
'use client';

import { useEffect, useId, useRef } from 'react';
import type { ReactNode } from 'react';
import './modal.css';

interface Props {
  open: boolean;
  onClose: () => void;
  title: string;
  children: ReactNode;
  /** Buttons for the footer. */
  actions?: ReactNode;
}

export function Modal({ open, onClose, title, children, actions }: Props) {
  const dialog = useRef<HTMLDialogElement>(null);
  const titleId = useId();

  useEffect(() => {
    const el = dialog.current;
    if (!el) return;
    if (open && !el.open) el.showModal();
    if (!open && el.open) el.close();
  }, [open]);

  return (
    <dialog
      ref={dialog}
      className='cy-modal'
      aria-labelledby={titleId}
      onClose={onClose}
      onClick={(event) => {
        if (event.target === event.currentTarget) onClose();
      }}
    >
      <div className='cy-modal__inner'>
        <header className='cy-modal__header'>
          <h2 id={titleId}>{title}</h2>
          <button type='button' className='cy-modal__close' aria-label='Close' onClick={onClose}>✕</button>
        </header>
        <div className='cy-modal__body'>{children}</div>
        {actions && <footer className='cy-modal__actions'>{actions}</footer>}
      </div>
    </dialog>
  );
}
```

---

### Overlays / Drawer

URL: https://cyberdeck-ui.netlify.app/components/overlays#drawer

A side panel on native <dialog> that slides in from the right or left, with a pinned footer.

React usage:

```tsx
<Drawer
  open={open}
  onClose={() => setOpen(false)}
  title="Loadout"
  footer={<NeonButton onClick={equip}>Equip</NeonButton>}
>
  <LoadoutList />
</Drawer>
```

#### drawer.html

```html
<button class="cy-drawer-open" type="button" data-cy-drawer-open="cy-loadout-drawer">Open loadout</button>

<dialog class="cy-drawer" id="cy-loadout-drawer" aria-labelledby="cy-loadout-drawer-title">
  <div class="cy-drawer__inner">
    <header class="cy-drawer__header">
      <h2 id="cy-loadout-drawer-title">Loadout</h2>
      <button class="cy-drawer__close" type="button" aria-label="Close" data-cy-drawer-close>✕</button>
    </header>
    <div class="cy-drawer__body">
      <ul class="cy-drawer__list">
        <li><span>Optical camo</span><small>Skin</small></li>
        <li><span>Reflex booster</span><small>Nervous system</small></li>
        <li><span>Subdermal plating</span><small>Skeleton</small></li>
        <li><span>Neural uplink</span><small>Cortex</small></li>
      </ul>
    </div>
    <footer class="cy-drawer__footer">
      <button class="cy-drawer__btn" type="button" data-cy-drawer-close>Equip</button>
    </footer>
  </div>
</dialog>
```

#### drawer.css

```css
.cy-drawer-open {
  padding: 0.7rem 1.4rem;
  border: 1px solid rgba(0, 240, 255, 0.6);
  background: transparent;
  color: var(--cy-cyan);
  font-family: var(--cy-font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
}

.cy-drawer-open:hover,
.cy-drawer-open:focus-visible {
  outline: none;
  background: rgba(0, 240, 255, 0.1);
}

.cy-drawer {
  width: min(22rem, calc(100% - 3rem));
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-left: 1px solid rgba(0, 240, 255, 0.4);
  background: var(--cy-surface);
  box-shadow: -20px 0 60px rgba(0, 240, 255, 0.12);
  color: var(--cy-text);
  font-family: var(--cy-font-body);
}

.cy-drawer--left {
  margin: 0 auto 0 0;
  border-right: 1px solid rgba(0, 240, 255, 0.4);
  border-left: 0;
  box-shadow: 20px 0 60px rgba(0, 240, 255, 0.12);
}

.cy-drawer[open] {
  animation: cy-drawer-in-right 0.3s var(--cy-ease);
}

.cy-drawer--left[open] {
  animation-name: cy-drawer-in-left;
}

.cy-drawer::backdrop {
  background: rgba(7, 5, 13, 0.7);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.cy-drawer__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cy-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--cy-border);
}

.cy-drawer__header h2 {
  margin: 0;
  color: #fff;
  font-family: var(--cy-font-display);
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: var(--cy-glow-cyan);
}

.cy-drawer__close {
  border: 0;
  background: none;
  color: var(--cy-dim);
  font-size: 1.1rem;
  cursor: pointer;
}

.cy-drawer__close:hover,
.cy-drawer__close:focus-visible {
  color: var(--cy-pink);
}

.cy-drawer__body {
  flex: 1;
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
}

.cy-drawer__list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cy-drawer__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--cy-border);
  background: var(--cy-surface-2);
  font-size: 1.05rem;
  font-weight: 600;
}

.cy-drawer__list small {
  color: var(--cy-pink);
  font-family: var(--cy-font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.cy-drawer__footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--cy-border);
}

.cy-drawer__btn {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--cy-yellow);
  background: var(--cy-yellow);
  color: #000;
  font-family: var(--cy-font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
}

.cy-drawer__btn:hover,
.cy-drawer__btn:focus-visible {
  outline: none;
  border-color: var(--cy-cyan);
  background: var(--cy-cyan);
}

@keyframes cy-drawer-in-right {
  from { transform: translateX(100%); }
}

@keyframes cy-drawer-in-left {
  from { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .cy-drawer[open] {
    animation: none;
  }
}
```

#### drawer.js

```js
// Opens <dialog class="cy-drawer"> from [data-cy-drawer-open="<dialog id>"] buttons.
// [data-cy-drawer-close] buttons, Escape and clicking the backdrop close it.
document.querySelectorAll('[data-cy-drawer-open]').forEach((button) => {
  const drawer = document.getElementById(button.dataset.cyDrawerOpen);

  button.addEventListener('click', () => drawer.showModal());
  drawer.querySelectorAll('[data-cy-drawer-close]').forEach((close) => {
    close.addEventListener('click', () => drawer.close());
  });
  drawer.addEventListener('click', (event) => {
    if (event.target === drawer) drawer.close();
  });
});
```

#### Drawer.tsx

```tsx
'use client';

import { useEffect, useId, useRef } from 'react';
import type { ReactNode } from 'react';
import './drawer.css';

interface Props {
  open: boolean;
  onClose: () => void;
  title: string;
  side?: 'right' | 'left';
  children: ReactNode;
  /** Pinned to the bottom of the drawer. */
  footer?: ReactNode;
}

export function Drawer({ open, onClose, title, side = 'right', children, footer }: Props) {
  const dialog = useRef<HTMLDialogElement>(null);
  const titleId = useId();

  useEffect(() => {
    const el = dialog.current;
    if (!el) return;
    if (open && !el.open) el.showModal();
    if (!open && el.open) el.close();
  }, [open]);

  return (
    <dialog
      ref={dialog}
      className={`cy-drawer ${side === 'left' ? 'cy-drawer--left' : ''}`.trim()}
      aria-labelledby={titleId}
      onClose={onClose}
      onClick={(event) => {
        if (event.target === event.currentTarget) onClose();
      }}
    >
      <div className='cy-drawer__inner'>
        <header className='cy-drawer__header'>
          <h2 id={titleId}>{title}</h2>
          <button type='button' className='cy-drawer__close' aria-label='Close' onClick={onClose}>✕</button>
        </header>
        <div className='cy-drawer__body'>{children}</div>
        {footer && <footer className='cy-drawer__footer'>{footer}</footer>}
      </div>
    </dialog>
  );
}
```

---

### Overlays / Dropdown Menu

URL: https://cyberdeck-ui.netlify.app/components/overlays#dropdown-menu

A menu button following the ARIA menu pattern: arrow keys, Home/End, Escape and click outside.

React usage:

```tsx
<DropdownMenu
  label="Actions"
  items={[
    { label: 'Scan network', shortcut: 'Ctrl S', onSelect: scan },
    'separator',
    { label: 'Wipe drive', danger: true, onSelect: wipe },
  ]}
/>
```

#### dropdown-menu.html

```html
<div class="cy-menu" data-cy-menu>
  <button class="cy-menu__trigger" id="cy-actions-trigger" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="cy-actions-menu">
    Actions <span class="cy-menu__caret" aria-hidden="true">▾</span>
  </button>
  <ul class="cy-menu__list" id="cy-actions-menu" role="menu" aria-labelledby="cy-actions-trigger" hidden>
    <li role="none"><button class="cy-menu__item" type="button" role="menuitem" tabindex="-1">Scan network <kbd>Ctrl S</kbd></button></li>
    <li role="none"><button class="cy-menu__item" type="button" role="menuitem" tabindex="-1">Open uplink <kbd>Ctrl U</kbd></button></li>
    <li role="none"><button class="cy-menu__item" type="button" role="menuitem" tabindex="-1">Copy address</button></li>
    <li class="cy-menu__separator" role="separator"></li>
    <li role="none"><button class="cy-menu__item cy-menu__item--danger" type="button" role="menuitem" tabindex="-1">Wipe drive</button></li>
  </ul>
</div>
```

#### dropdown-menu.css

```css
.cy-menu {
  position: relative;
  display: inline-block;
}

.cy-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.2rem;
  border: 1px solid rgba(0, 240, 255, 0.6);
  background: transparent;
  color: var(--cy-cyan);
  font-family: var(--cy-font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s, box-shadow 0.15s;
}

.cy-menu__trigger:hover,
.cy-menu__trigger:focus-visible,
.cy-menu__trigger[aria-expanded='true'] {
  outline: none;
  background: rgba(0, 240, 255, 0.1);
  box-shadow: var(--cy-glow-cyan);
}

.cy-menu__caret {
  transition: transform 0.15s;
}

.cy-menu__trigger[aria-expanded='true'] .cy-menu__caret {
  transform: rotate(180deg);
}

.cy-menu__list {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 10;
  min-width: 15rem;
  margin: 0;
  padding: 0.35rem;
  border: 1px solid rgba(0, 240, 255, 0.4);
  background: var(--cy-surface);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 24px rgba(0, 240, 255, 0.12);
  list-style: none;
  animation: cy-menu-in 0.15s var(--cy-ease);
}

.cy-menu__list[hidden] {
  display: none;
}

.cy-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 0;
  background: none;
  color: var(--cy-text);
  font-family: var(--cy-font-body);
  font-size: 1.05rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.cy-menu__item:hover,
.cy-menu__item:focus {
  outline: none;
  background: rgba(0, 240, 255, 0.1);
  box-shadow: inset 2px 0 0 var(--cy-cyan);
  color: var(--cy-cyan);
}

.cy-menu__item kbd {
  color: var(--cy-dim);
  font-family: var(--cy-font-mono);
  font-size: 0.75rem;
}

.cy-menu__item--danger {
  color: var(--cy-pink);
}

.cy-menu__item--danger:hover,
.cy-menu__item--danger:focus {
  background: rgba(255, 42, 109, 0.1);
  box-shadow: inset 2px 0 0 var(--cy-pink);
  color: var(--cy-pink);
}

.cy-menu__separator {
  height: 1px;
  margin: 0.35rem 0.25rem;
  background: var(--cy-border);
}

@keyframes cy-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .cy-menu__list {
    animation: none;
  }
}
```

#### dropdown-menu.js

```js
// Menu button: click or Arrow Down/Up to open; arrows, Home and End to move;
// Escape closes and returns focus; Tab or a click outside closes.
document.querySelectorAll('[data-cy-menu]').forEach((root) => {
  const trigger = root.querySelector('[aria-haspopup="menu"]');
  const list = root.querySelector('[role="menu"]');
  const items = [...list.querySelectorAll('[role="menuitem"]')];

  const focusItem = (index) => items[(index + items.length) % items.length].focus();

  const open = (index) => {
    list.hidden = false;
    trigger.setAttribute('aria-expanded', 'true');
    focusItem(index);
  };

  const close = (returnFocus) => {
    list.hidden = true;
    trigger.setAttribute('aria-expanded', 'false');
    if (returnFocus) trigger.focus();
  };

  trigger.addEventListener('click', () => {
    if (list.hidden) open(0);
    else close(true);
  });

  trigger.addEventListener('keydown', (event) => {
    if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
    event.preventDefault();
    open(event.key === 'ArrowDown' ? 0 : -1);
  });

  list.addEventListener('keydown', (event) => {
    const current = items.indexOf(document.activeElement);
    const moves = { ArrowDown: current + 1, ArrowUp: current - 1, Home: 0, End: items.length - 1 };

    if (event.key in moves) {
      event.preventDefault();
      focusItem(moves[event.key]);
    } else if (event.key === 'Escape') {
      event.preventDefault();
      close(true);
    } else if (event.key === 'Tab') {
      close(false);
    }
  });

  items.forEach((item) => item.addEventListener('click', () => close(true)));

  document.addEventListener('pointerdown', (event) => {
    if (!list.hidden && !root.contains(event.target)) close(false);
  });
});
```

#### DropdownMenu.tsx

```tsx
'use client';

import { useEffect, useId, useRef, useState } from 'react';
import type { KeyboardEvent } from 'react';
import './dropdown-menu.css';

export interface MenuAction {
  label: string;
  onSelect: () => void;
  shortcut?: string;
  danger?: boolean;
}

/** An action, or 'separator' for a divider. */
export type MenuEntry = MenuAction | 'separator';

interface Props {
  label: string;
  items: MenuEntry[];
}

export function DropdownMenu({ label, items }: Props) {
  const [open, setOpen] = useState(false);
  const root = useRef<HTMLDivElement>(null);
  const trigger = useRef<HTMLButtonElement>(null);
  /** Item to focus when the menu opens: 0 for the first, -1 for the last. */
  const focusOnOpen = useRef(0);
  const menuId = useId();
  const triggerId = useId();

  const menuItems = () => [...(root.current?.querySelectorAll<HTMLButtonElement>('[role="menuitem"]') ?? [])];

  useEffect(() => {
    if (!open) return;
    const els = [...(root.current?.querySelectorAll<HTMLButtonElement>('[role="menuitem"]') ?? [])];
    els.at(focusOnOpen.current)?.focus();

    const onPointerDown = (event: PointerEvent) => {
      if (!root.current?.contains(event.target as Node)) setOpen(false);
    };
    document.addEventListener('pointerdown', onPointerDown);
    return () => document.removeEventListener('pointerdown', onPointerDown);
  }, [open]);

  const openAt = (index: number) => {
    focusOnOpen.current = index;
    setOpen(true);
  };

  const close = (returnFocus = true) => {
    setOpen(false);
    if (returnFocus) trigger.current?.focus();
  };

  const onTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
    if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
    event.preventDefault();
    openAt(event.key === 'ArrowDown' ? 0 : -1);
  };

  const onMenuKeyDown = (event: KeyboardEvent<HTMLUListElement>) => {
    const els = menuItems();
    const current = els.indexOf(document.activeElement as HTMLButtonElement);
    const moves: Record<string, number> = { ArrowDown: current + 1, ArrowUp: current - 1, Home: 0, End: els.length - 1 };
    const target = moves[event.key];

    if (target !== undefined) {
      event.preventDefault();
      els[(target + els.length) % els.length]?.focus();
    } else if (event.key === 'Escape') {
      event.preventDefault();
      close();
    } else if (event.key === 'Tab') {
      close(false);
    }
  };

  return (
    <div className='cy-menu' ref={root}>
      <button
        ref={trigger}
        id={triggerId}
        type='button'
        className='cy-menu__trigger'
        aria-haspopup='menu'
        aria-expanded={open}
        aria-controls={menuId}
        onClick={() => (open ? close() : openAt(0))}
        onKeyDown={onTriggerKeyDown}
      >
        {label} <span className='cy-menu__caret' aria-hidden='true'>▾</span>
      </button>
      <ul id={menuId} role='menu' aria-labelledby={triggerId} className='cy-menu__list' hidden={!open} onKeyDown={onMenuKeyDown}>
        {items.map((item, index) =>
          item === 'separator' ? (
            <li key={index} role='separator' className='cy-menu__separator' />
          ) : (
            <li key={index} role='none'>
              <button
                type='button'
                role='menuitem'
                tabIndex={-1}
                className={`cy-menu__item ${item.danger ? 'cy-menu__item--danger' : ''}`.trim()}
                onClick={() => {
                  close();
                  item.onSelect();
                }}
              >
                {item.label}
                {item.shortcut && <kbd>{item.shortcut}</kbd>}
              </button>
            </li>
          ),
        )}
      </ul>
    </div>
  );
}
```

---

### Overlays / Command Palette

URL: https://cyberdeck-ui.netlify.app/components/overlays#command-palette

Ctrl/Cmd + K to open, type to filter, arrows and Enter to run. A combobox with a listbox inside a <dialog>.

React usage:

```tsx
const [open, setOpen] = useState(false);

<CommandPalette
  open={open}
  onOpenChange={setOpen}
  commands={[
    { id: 'scan', label: 'Scan network', group: 'System', run: scan },
    { id: 'logout', label: 'Disconnect', group: 'Session', run: logout },
  ]}
/>
```

#### command-palette.html

```html
<button class="cy-cmdk-open" type="button" data-cy-cmdk-open="cy-cmdk">
  Command palette <kbd>Ctrl K</kbd>
</button>

<dialog class="cy-cmdk" id="cy-cmdk" aria-label="Command palette">
  <div class="cy-cmdk__search">
    <span class="cy-cmdk__prompt" aria-hidden="true">&gt;</span>
    <input class="cy-cmdk__input" type="text" role="combobox" aria-expanded="true" aria-controls="cy-cmdk-list"
      aria-autocomplete="list" aria-label="Type a command" placeholder="Type a command…" autocomplete="off" spellcheck="false">
  </div>
  <ul class="cy-cmdk__list" id="cy-cmdk-list" role="listbox" aria-label="Commands">
    <li class="cy-cmdk__item" id="cy-cmdk-scan" role="option" aria-selected="false" data-command="scan"><span>Scan network</span><small>System</small></li>
    <li class="cy-cmdk__item" id="cy-cmdk-uplink" role="option" aria-selected="false" data-command="uplink"><span>Open secure uplink</span><small>Network</small></li>
    <li class="cy-cmdk__item" id="cy-cmdk-trace" role="option" aria-selected="false" data-command="trace"><span>Trace last connection</span><small>Network</small></li>
    <li class="cy-cmdk__item" id="cy-cmdk-decrypt" role="option" aria-selected="false" data-command="decrypt"><span>Decrypt shard</span><small>Data</small></li>
    <li class="cy-cmdk__item" id="cy-cmdk-backup" role="option" aria-selected="false" data-command="backup"><span>Back up memory</span><small>Data</small></li>
    <li class="cy-cmdk__item" id="cy-cmdk-theme" role="option" aria-selected="false" data-command="theme"><span>Toggle night mode</span><small>Settings</small></li>
    <li class="cy-cmdk__item" id="cy-cmdk-logout" role="option" aria-selected="false" data-command="logout"><span>Disconnect</span><small>Session</small></li>
  </ul>
  <p class="cy-cmdk__empty" hidden>No matching commands</p>
  <footer class="cy-cmdk__footer" aria-hidden="true">
    <span><kbd>↑</kbd><kbd>↓</kbd> Navigate</span>
    <span><kbd>Enter</kbd> Run</span>
    <span><kbd>Esc</kbd> Close</span>
  </footer>
</dialog>
```

#### command-palette.css

```css
.cy-cmdk-open {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1.4rem;
  border: 1px solid rgba(0, 240, 255, 0.6);
  background: transparent;
  color: var(--cy-cyan);
  font-family: var(--cy-font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
}

.cy-cmdk-open:hover,
.cy-cmdk-open:focus-visible {
  outline: none;
  background: rgba(0, 240, 255, 0.1);
}

.cy-cmdk-open kbd {
  padding: 0.1rem 0.4rem;
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: var(--cy-dim);
  font-family: inherit;
  font-size: 0.75rem;
}

.cy-cmdk {
  width: calc(100% - 2rem);
  max-width: 34rem;
  margin: 12vh auto auto;
  padding: 0;
  border: 1px solid rgba(0, 240, 255, 0.45);
  background: var(--cy-surface);
  box-shadow: 0 0 50px rgba(0, 240, 255, 0.15);
  color: var(--cy-text);
  font-family: var(--cy-font-body);
}

.cy-cmdk[open] {
  animation: cy-cmdk-in 0.2s var(--cy-ease);
}

.cy-cmdk::backdrop {
  background: rgba(7, 5, 13, 0.75);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.cy-cmdk__search {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1.1rem;
  border-bottom: 1px solid var(--cy-border);
}

.cy-cmdk__prompt {
  color: var(--cy-pink);
  font-family: var(--cy-font-mono);
  font-size: 1.1rem;
}

.cy-cmdk__input {
  flex: 1;
  min-width: 0;
  padding: 1rem 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font-family: var(--cy-font-mono);
  font-size: 1.05rem;
  caret-color: var(--cy-pink);
}

.cy-cmdk__input::placeholder {
  color: var(--cy-dim);
}

.cy-cmdk__list {
  max-height: 16rem;
  margin: 0;
  padding: 0.4rem;
  overflow-y: auto;
  list-style: none;
}

.cy-cmdk__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0.8rem;
  color: var(--cy-text);
  font-size: 1.05rem;
  font-weight: 500;
  cursor: pointer;
}

.cy-cmdk__item[hidden] {
  display: none;
}

.cy-cmdk__item small {
  color: var(--cy-dim);
  font-family: var(--cy-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.cy-cmdk__item[aria-selected='true'] {
  background: rgba(0, 240, 255, 0.1);
  box-shadow: inset 2px 0 0 var(--cy-cyan);
  color: var(--cy-cyan);
}

.cy-cmdk__empty {
  margin: 0;
  padding: 1.5rem;
  color: var(--cy-dim);
  font-family: var(--cy-font-mono);
  font-size: 0.85rem;
  text-align: center;
}

.cy-cmdk__footer {
  display: flex;
  gap: 1.25rem;
  padding: 0.65rem 1.1rem;
  border-top: 1px solid var(--cy-border);
  color: var(--cy-dim);
  font-family: var(--cy-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cy-cmdk__footer kbd {
  margin-right: 0.25rem;
  padding: 0 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-family: inherit;
}

@keyframes cy-cmdk-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
}

@media (prefers-reduced-motion: reduce) {
  .cy-cmdk[open] {
    animation: none;
  }
}
```

#### command-palette.js

```js
// Command palette: Ctrl/Cmd + K or [data-cy-cmdk-open] opens it, typing filters,
// arrows move, Enter runs. Listen for the result with:
//   dialog.addEventListener('cy-command', (event) => console.log(event.detail));
document.querySelectorAll('.cy-cmdk').forEach((dialog) => {
  const input = dialog.querySelector('.cy-cmdk__input');
  const items = [...dialog.querySelectorAll('[role="option"]')];
  const empty = dialog.querySelector('.cy-cmdk__empty');
  let active = 0;

  const visible = () => items.filter((item) => !item.hidden);

  const highlight = (index) => {
    const list = visible();
    items.forEach((item) => item.setAttribute('aria-selected', 'false'));
    empty.hidden = list.length > 0;
    if (!list.length) {
      input.removeAttribute('aria-activedescendant');
      return;
    }
    active = (index + list.length) % list.length;
    list[active].setAttribute('aria-selected', 'true');
    list[active].scrollIntoView({ block: 'nearest' });
    input.setAttribute('aria-activedescendant', list[active].id);
  };

  const open = () => {
    input.value = '';
    items.forEach((item) => (item.hidden = false));
    dialog.showModal();
    highlight(0);
  };

  const run = (item) => {
    dialog.close();
    dialog.dispatchEvent(new CustomEvent('cy-command', { detail: item.dataset.command }));
  };

  input.addEventListener('input', () => {
    const query = input.value.trim().toLowerCase();
    items.forEach((item) => (item.hidden = !item.textContent.toLowerCase().includes(query)));
    highlight(0);
  });

  input.addEventListener('keydown', (event) => {
    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
      event.preventDefault();
      highlight(active + (event.key === 'ArrowDown' ? 1 : -1));
    } else if (event.key === 'Enter') {
      event.preventDefault();
      const item = visible()[active];
      if (item) run(item);
    }
  });

  items.forEach((item) => {
    item.addEventListener('click', () => run(item));
    item.addEventListener('mousemove', () => {
      if (item.getAttribute('aria-selected') !== 'true') highlight(visible().indexOf(item));
    });
  });

  dialog.addEventListener('click', (event) => {
    if (event.target === dialog) dialog.close();
  });

  document.querySelectorAll(`[data-cy-cmdk-open="${dialog.id}"]`).forEach((button) => {
    button.addEventListener('click', open);
  });

  document.addEventListener('keydown', (event) => {
    if (!(event.metaKey || event.ctrlKey) || event.key.toLowerCase() !== 'k') return;
    event.preventDefault();
    if (dialog.open) dialog.close();
    else open();
  });
});
```

#### CommandPalette.tsx

```tsx
'use client';

import { useEffect, useId, useRef, useState } from 'react';
import type { KeyboardEvent } from 'react';
import './command-palette.css';

export interface Command {
  id: string;
  label: string;
  /** Shown on the right, e.g. "Navigation". */
  group?: string;
  run: () => void;
}

interface Props {
  open: boolean;
  /** Also called by the Ctrl/Cmd + K shortcut. */
  onOpenChange: (open: boolean) => void;
  commands: Command[];
  placeholder?: string;
}

export function CommandPalette({ open, onOpenChange, commands, placeholder = 'Type a command…' }: Props) {
  const dialog = useRef<HTMLDialogElement>(null);
  const listId = useId();
  const [query, setQuery] = useState('');
  const [active, setActive] = useState(0);

  const needle = query.trim().toLowerCase();
  const results = commands.filter((command) => command.label.toLowerCase().includes(needle));
  const activeIndex = Math.min(active, results.length - 1);
  const optionId = (index: number) => `${listId}-option-${index}`;

  useEffect(() => {
    const el = dialog.current;
    if (!el) return;
    if (open && !el.open) el.showModal();
    if (!open && el.open) el.close();
  }, [open]);

  useEffect(() => {
    const onShortcut = (event: globalThis.KeyboardEvent) => {
      if (!(event.metaKey || event.ctrlKey) || event.key.toLowerCase() !== 'k') return;
      event.preventDefault();
      onOpenChange(!open);
    };
    document.addEventListener('keydown', onShortcut);
    return () => document.removeEventListener('keydown', onShortcut);
  }, [open, onOpenChange]);

  useEffect(() => {
    if (open) dialog.current?.querySelector('[aria-selected="true"]')?.scrollIntoView({ block: 'nearest' });
  }, [open, activeIndex]);

  const run = (command: Command) => {
    onOpenChange(false);
    command.run();
  };

  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
      event.preventDefault();
      if (!results.length) return;
      const step = event.key === 'ArrowDown' ? 1 : -1;
      setActive((activeIndex + step + results.length) % results.length);
    } else if (event.key === 'Enter') {
      event.preventDefault();
      const command = results[activeIndex];
      if (command) run(command);
    }
  };

  return (
    <dialog
      ref={dialog}
      className='cy-cmdk'
      aria-label='Command palette'
      onClose={() => {
        setQuery('');
        setActive(0);
        onOpenChange(false);
      }}
      onClick={(event) => {
        if (event.target === event.currentTarget) onOpenChange(false);
      }}
    >
      <div className='cy-cmdk__search'>
        <span className='cy-cmdk__prompt' aria-hidden='true'>&gt;</span>
        <input
          className='cy-cmdk__input'
          type='text'
          role='combobox'
          aria-expanded='true'
          aria-controls={listId}
          aria-autocomplete='list'
          aria-activedescendant={activeIndex >= 0 ? optionId(activeIndex) : undefined}
          aria-label='Type a command'
          placeholder={placeholder}
          autoComplete='off'
          spellCheck={false}
          value={query}
          onChange={(event) => {
            setQuery(event.target.value);
            setActive(0);
          }}
          onKeyDown={onKeyDown}
        />
      </div>
      <ul id={listId} className='cy-cmdk__list' role='listbox' aria-label='Commands'>
        {results.map((command, index) => (
          <li
            key={command.id}
            id={optionId(index)}
            className='cy-cmdk__item'
            role='option'
            aria-selected={index === activeIndex}
            onClick={() => run(command)}
            onMouseMove={() => setActive(index)}
          >
            <span>{command.label}</span>
            {command.group && <small>{command.group}</small>}
          </li>
        ))}
      </ul>
      {results.length === 0 && <p className='cy-cmdk__empty'>No matching commands</p>}
      <footer className='cy-cmdk__footer' aria-hidden='true'>
        <span><kbd>↑</kbd><kbd>↓</kbd> Navigate</span>
        <span><kbd>Enter</kbd> Run</span>
        <span><kbd>Esc</kbd> Close</span>
      </footer>
    </dialog>
  );
}
```

---

### Backgrounds & Effects / Cyber Grid

URL: https://cyberdeck-ui.netlify.app/components/backgrounds#cyber-grid

An animated perspective floor with a glowing horizon, for hero sections.

React usage:

```tsx
<CyberGrid>
  <h2>Welcome to the grid</h2>
</CyberGrid>
```

#### cyber-grid.html

```html
<section class="cy-grid-scene">
  <div class="cy-grid-scene__glow" aria-hidden="true"></div>
  <div class="cy-grid-scene__horizon" aria-hidden="true"></div>
  <div class="cy-grid-scene__floor" aria-hidden="true"></div>
  <div class="cy-grid-scene__content">
    <h2>Welcome to the grid</h2>
  </div>
</section>
```

#### cyber-grid.css

```css
.cy-grid-scene {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 22rem;
  overflow: hidden;
  background: var(--cy-bg);
}

.cy-grid-scene__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 10%, rgba(185, 103, 255, 0.25), transparent 45%),
    radial-gradient(circle at 10% 50%, rgba(0, 240, 255, 0.12), transparent 40%);
}

.cy-grid-scene__horizon {
  position: absolute;
  top: 55%;
  right: 0;
  left: 0;
  height: 1px;
  background: rgba(255, 42, 109, 0.7);
  box-shadow: 0 0 30px 8px rgba(255, 42, 109, 0.35);
}

/* Perspective floor, scrolling towards the viewer */
.cy-grid-scene__floor {
  position: absolute;
  top: 55%;
  right: -50%;
  left: -50%;
  height: 90%;
  background-image:
    linear-gradient(rgba(255, 42, 109, 0.45) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.3) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(400px) rotateX(65deg);
  transform-origin: center top;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%);
  animation: cy-grid-move 4s linear infinite;
}

@keyframes cy-grid-move {
  from { background-position: 0 0; }
  to { background-position: 0 60px; }
}

.cy-grid-scene__content {
  position: relative;
  z-index: 1;
  padding: 2rem;
  text-align: center;
}

.cy-grid-scene__content h2 {
  margin: 0;
  color: #fff;
  font-family: var(--cy-font-display);
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: var(--cy-glow-pink);
}

@media (prefers-reduced-motion: reduce) {
  .cy-grid-scene__floor {
    animation: none;
  }
}
```

#### CyberGrid.tsx

```tsx
import type { ReactNode } from 'react';
import './cyber-grid.css';

export function CyberGrid({ children }: { children?: ReactNode }) {
  return (
    <section className='cy-grid-scene'>
      <div className='cy-grid-scene__glow' aria-hidden='true' />
      <div className='cy-grid-scene__horizon' aria-hidden='true' />
      <div className='cy-grid-scene__floor' aria-hidden='true' />
      <div className='cy-grid-scene__content'>{children}</div>
    </section>
  );
}
```

---

### Backgrounds & Effects / Circuit Pattern

URL: https://cyberdeck-ui.netlify.app/components/backgrounds#circuit-pattern

A seamless circuit-board background with a pulse of current sweeping across. CSS only.

React usage:

```tsx
<CircuitPattern>
  <h2>Signal routing</h2>
  <p>Content sits on top of the board.</p>
</CircuitPattern>
```

#### circuit-pattern.html

```html
<div class="cy-circuit">
  <span class="cy-circuit__pulse" aria-hidden="true"></span>
  <div class="cy-circuit__content">
    <h2>Signal routing</h2>
    <p>A tiling circuit board with a pulse of current sweeping across it.</p>
  </div>
</div>
```

#### circuit-pattern.css

```css
.cy-circuit {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 18rem;
  padding: 3rem 1.5rem;
  overflow: hidden;
  background: var(--cy-bg);
  color: var(--cy-text);
  text-align: center;
}

/* The board: a 120px tile that repeats seamlessly. Change the colour in the SVG (%2300f0ff = #00f0ff). */
.cy-circuit::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%2300f0ff' stroke-opacity='.28' stroke-width='1.5'%3E%3Cpath d='M0 30h30l15 15v35h45M60 0v20l10 10h50M60 120v-10L45 95H20M100 0v12M100 120v-20M0 75h10M120 75h-15'/%3E%3Cg fill='%2300f0ff' fill-opacity='.7' stroke='none'%3E%3Ccircle cx='90' cy='80' r='3'/%3E%3Ccircle cx='20' cy='95' r='3'/%3E%3Ccircle cx='100' cy='12' r='2.5'/%3E%3Ccircle cx='100' cy='100' r='2.5'/%3E%3Ccircle cx='10' cy='75' r='2.5'/%3E%3Ccircle cx='105' cy='75' r='2.5'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 120px 120px;
}

/* The pulse: the same board in pink, revealed by a moving mask. */
.cy-circuit__pulse {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23ff2a6d' stroke-opacity='.9' stroke-width='1.5'%3E%3Cpath d='M0 30h30l15 15v35h45M60 0v20l10 10h50M60 120v-10L45 95H20M100 0v12M100 120v-20M0 75h10M120 75h-15'/%3E%3Cg fill='%23ff2a6d' fill-opacity='1' stroke='none'%3E%3Ccircle cx='90' cy='80' r='3'/%3E%3Ccircle cx='20' cy='95' r='3'/%3E%3Ccircle cx='100' cy='12' r='2.5'/%3E%3Ccircle cx='100' cy='100' r='2.5'/%3E%3Ccircle cx='10' cy='75' r='2.5'/%3E%3Ccircle cx='105' cy='75' r='2.5'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 120px 120px;
  -webkit-mask-image: linear-gradient(100deg, transparent 40%, #000 50%, transparent 60%);
  mask-image: linear-gradient(100deg, transparent 40%, #000 50%, transparent 60%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  animation: cy-circuit-pulse 6s linear infinite;
}

/* Vignette, so content in the middle stays readable. */
.cy-circuit::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at center, rgba(7, 5, 13, 0.85) 0, transparent 55%),
    radial-gradient(ellipse at center, transparent 40%, var(--cy-bg) 95%);
}

.cy-circuit__content {
  max-width: 32rem;
}

.cy-circuit__content h2 {
  margin: 0 0 0.75rem;
  color: #fff;
  font-family: var(--cy-font-display);
  font-size: 1.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: var(--cy-glow-cyan);
}

.cy-circuit__content p {
  margin: 0;
  color: var(--cy-muted);
  font-family: var(--cy-font-body);
  font-size: 1.1rem;
}

@keyframes cy-circuit-pulse {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to { -webkit-mask-position: 0 0; mask-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cy-circuit__pulse {
    display: none;
  }
}
```

#### CircuitPattern.tsx

```tsx
import type { ReactNode } from 'react';
import './circuit-pattern.css';

interface Props {
  children?: ReactNode;
}

export function CircuitPattern({ children }: Props) {
  return (
    <div className='cy-circuit'>
      <span className='cy-circuit__pulse' aria-hidden='true' />
      <div className='cy-circuit__content'>{children}</div>
    </div>
  );
}
```

---

### Backgrounds & Effects / Scanlines

URL: https://cyberdeck-ui.netlify.app/components/backgrounds#scanlines

A CRT scanline overlay for a single element or the whole screen.

React usage:

```tsx
<Scanlines>
  <YourContent />
</Scanlines>

// Whole page:
<Scanlines screen />
```

#### scanlines.html

```html
<div class="cy-scanlines cy-scanlines-demo">
  <p>Transmission 0451 // signal degraded</p>
</div>
```

#### scanlines.css

```css
/* Add to any container. For the whole page, use .cy-scanlines--screen on an empty div. */
.cy-scanlines {
  position: relative;
}

.cy-scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.04) 0,
    rgba(255, 255, 255, 0.04) 1px,
    transparent 1px,
    transparent 3px
  );
}

.cy-scanlines--screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

/* Demo container only */
.cy-scanlines-demo {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 30rem;
  min-height: 10rem;
  border: 1px solid rgba(0, 240, 255, 0.3);
  background: radial-gradient(circle, rgba(0, 240, 255, 0.15), transparent 70%), var(--cy-surface);
}

.cy-scanlines-demo p {
  margin: 0;
  color: var(--cy-cyan);
  font-family: var(--cy-font-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-shadow: var(--cy-glow-cyan);
}
```

#### Scanlines.tsx

```tsx
import type { ReactNode } from 'react';
import './scanlines.css';

interface Props {
  children?: ReactNode;
  /** Cover the whole viewport instead of wrapping children. */
  screen?: boolean;
  className?: string;
}

export function Scanlines({ children, screen = false, className = '' }: Props) {
  if (screen) {
    return <div className='cy-scanlines cy-scanlines--screen' aria-hidden='true' />;
  }

  return <div className={`cy-scanlines ${className}`.trim()}>{children}</div>;
}
```

---

### Backgrounds & Effects / Digital Rain

URL: https://cyberdeck-ui.netlify.app/components/backgrounds#digital-rain

Falling glyph columns on a canvas. Pauses off-screen and respects reduced motion.

React usage:

```tsx
<DigitalRain>Decoding the stream</DigitalRain>
```

#### digital-rain.html

```html
<div class="cy-rain">
  <canvas class="cy-rain__canvas" data-cy-rain aria-hidden="true"></canvas>
  <p class="cy-rain__label">Decoding the stream</p>
</div>
```

#### digital-rain.css

```css
.cy-rain {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 18rem;
  overflow: hidden;
  background: var(--cy-bg);
}

.cy-rain__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cy-rain__label {
  position: relative;
  margin: 0;
  padding: 0.5rem 1rem;
  background: rgba(7, 5, 13, 0.8);
  color: #fff;
  font-family: var(--cy-font-display);
  font-size: 1.25rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-shadow: var(--cy-glow-cyan);
}
```

#### digital-rain.js

```js
// Falling glyph columns on a <canvas data-cy-rain>. Pauses when off-screen
// and draws a single still frame for users who prefer reduced motion.
document.querySelectorAll('[data-cy-rain]').forEach((canvas) => {
  const ctx = canvas.getContext('2d');
  const glyphs = 'アカサタナハマヤラワ0123456789ABCDEF<>/#$%';
  const size = 16;
  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  let drops = [];
  let visible = true;

  const resize = () => {
    canvas.width = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;
    drops = Array.from({ length: Math.ceil(canvas.width / size) }, () => Math.random() * -50);
  };

  const draw = () => {
    ctx.fillStyle = 'rgba(7, 5, 13, 0.12)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.font = `${size}px monospace`;

    drops.forEach((y, i) => {
      const glyph = glyphs[Math.floor(Math.random() * glyphs.length)];
      ctx.fillStyle = Math.random() > 0.97 ? '#ff2a6d' : i % 3 ? '#05ffa1' : '#00f0ff';
      ctx.fillText(glyph, i * size, y * size);
      drops[i] = y * size > canvas.height && Math.random() > 0.975 ? 0 : y + 1;
    });
  };

  let last = 0;
  const loop = (time) => {
    if (visible && time - last > 50) {
      draw();
      last = time;
    }
    requestAnimationFrame(loop);
  };

  new ResizeObserver(resize).observe(canvas);
  new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; }).observe(canvas);
  resize();

  if (reduceMotion) {
    for (let i = 0; i < 40; i++) draw();
  } else {
    requestAnimationFrame(loop);
  }
});
```

#### DigitalRain.tsx

```tsx
'use client';

import { useEffect, useRef } from 'react';
import type { ReactNode } from 'react';
import './digital-rain.css';

const GLYPHS = 'アカサタナハマヤラワ0123456789ABCDEF<>/#$%';
const SIZE = 16;

interface Props {
  /** Overlay content, e.g. a heading. */
  children?: ReactNode;
}

export function DigitalRain({ children }: Props) {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas?.getContext('2d');
    if (!canvas || !ctx) return;

    let drops: number[] = [];
    let frame = 0;
    let last = 0;
    let visible = true;

    const resize = () => {
      canvas.width = canvas.offsetWidth;
      canvas.height = canvas.offsetHeight;
      drops = Array.from({ length: Math.ceil(canvas.width / SIZE) }, () => Math.random() * -50);
    };

    const draw = () => {
      ctx.fillStyle = 'rgba(7, 5, 13, 0.12)';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.font = `${SIZE}px monospace`;
      drops.forEach((y, i) => {
        ctx.fillStyle = Math.random() > 0.97 ? '#ff2a6d' : i % 3 ? '#05ffa1' : '#00f0ff';
        ctx.fillText(GLYPHS[Math.floor(Math.random() * GLYPHS.length)], i * SIZE, y * SIZE);
        drops[i] = y * SIZE > canvas.height && Math.random() > 0.975 ? 0 : y + 1;
      });
    };

    const loop = (time: number) => {
      if (visible && time - last > 50) {
        draw();
        last = time;
      }
      frame = requestAnimationFrame(loop);
    };

    const resizeObserver = new ResizeObserver(resize);
    const visibilityObserver = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; });
    resizeObserver.observe(canvas);
    visibilityObserver.observe(canvas);
    resize();

    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
      for (let i = 0; i < 40; i++) draw();
    } else {
      frame = requestAnimationFrame(loop);
    }

    return () => {
      cancelAnimationFrame(frame);
      resizeObserver.disconnect();
      visibilityObserver.disconnect();
    };
  }, []);

  return (
    <div className='cy-rain'>
      <canvas ref={canvasRef} className='cy-rain__canvas' aria-hidden='true' />
      {children && <p className='cy-rain__label'>{children}</p>}
    </div>
  );
}
```

---

### Backgrounds & Effects / Glow Divider

URL: https://cyberdeck-ui.netlify.app/components/backgrounds#glow-divider

A fading neon rule with a diamond or a label in the middle.

React usage:

```tsx
<GlowDivider />
<GlowDivider label="End of transmission" />
```

#### glow-divider.html

```html
<div class="cy-divider" role="separator"><span></span><i></i><span></span></div>

<div class="cy-divider" role="separator"><span></span><b>End of transmission</b><span></span></div>
```

#### glow-divider.css

```css
.cy-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}

.cy-divider span {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(0, 240, 255, 0.7));
}

.cy-divider span:last-child {
  transform: scaleX(-1);
}

.cy-divider i {
  width: 6px;
  height: 6px;
  background: var(--cy-yellow);
  box-shadow: 0 0 8px var(--cy-yellow);
  transform: rotate(45deg);
}

.cy-divider b {
  color: var(--cy-pink);
  font-family: var(--cy-font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
}
```

#### GlowDivider.tsx

```tsx
import './glow-divider.css';

export function GlowDivider({ label }: { label?: string }) {
  return (
    <div className='cy-divider' role='separator'>
      <span />
      {label ? <b>{label}</b> : <i />}
      <span />
    </div>
  );
}
```

---

### Backgrounds & Effects / HUD Frame

URL: https://cyberdeck-ui.netlify.app/components/backgrounds#hud-frame

Corner brackets for any container, in any colour.

React usage:

```tsx
<HudFrame accent="var(--cy-pink)">
  <p>Anything goes in here.</p>
</HudFrame>
```

#### hud-frame.html

```html
<div class="cy-hud-frame">
  <p>Wrap anything in HUD brackets. They grow and glow on hover.</p>
</div>

<div class="cy-hud-frame" style="--cy-hud: var(--cy-pink)">
  <p>Set <code>--cy-hud</code> for another colour.</p>
</div>
```

#### hud-frame.css

```css
.cy-hud-frame {
  --cy-hud: var(--cy-cyan);
  position: relative;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--cy-surface);
  color: var(--cy-text);
  font-family: var(--cy-font-body);
}

.cy-hud-frame::before,
.cy-hud-frame::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  opacity: 0.6;
  pointer-events: none;
  transition: all 0.2s ease;
}

.cy-hud-frame::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid var(--cy-hud);
  border-left: 2px solid var(--cy-hud);
}

.cy-hud-frame::after {
  right: -1px;
  bottom: -1px;
  border-right: 2px solid var(--cy-hud);
  border-bottom: 2px solid var(--cy-hud);
}

.cy-hud-frame:hover::before,
.cy-hud-frame:hover::after,
.cy-hud-frame:focus-within::before,
.cy-hud-frame:focus-within::after {
  width: 26px;
  height: 26px;
  opacity: 1;
  filter: drop-shadow(0 0 4px var(--cy-hud));
}

.cy-hud-frame p {
  margin: 0;
}

.cy-hud-frame code {
  color: var(--cy-yellow);
  font-family: var(--cy-font-mono);
}
```

#### HudFrame.tsx

```tsx
import type { CSSProperties, ReactNode } from 'react';
import './hud-frame.css';

type FrameStyle = CSSProperties & { '--cy-hud'?: string };

interface Props {
  children: ReactNode;
  /** Bracket colour: any CSS colour. Defaults to cyan. */
  accent?: string;
  className?: string;
}

export function HudFrame({ children, accent, className = '' }: Props) {
  const style: FrameStyle = accent ? { '--cy-hud': accent } : {};

  return (
    <div className={`cy-hud-frame ${className}`.trim()} style={style}>
      {children}
    </div>
  );
}
```