mirror of
https://github.com/backnotprop/plannotator.git
synced 2026-09-14 14:17:26 +08:00
Michael Ramos
47157e7a55
* feat(editor): add Vim keyboard annotation controls * feat(ui): add optional live Vim HUD * feat(ui): finish Vim HUD experience * feat(ui): promote Vim to dedicated settings panel * feat(ui): make Vim document focus automatic * feat(ui): let Vim HUD hide its key panel * fix(ui): harden Vim selection UX
696 lines
20 KiB
TypeScript
696 lines
20 KiB
TypeScript
import { EyeOff } from 'lucide-react';
|
|
import { useLayoutEffect, useRef, useState } from 'react';
|
|
import type { InputMethod } from '../types';
|
|
import {
|
|
getVimHudLegendGroups,
|
|
isVimHudLegendGroupActive,
|
|
type VimHudCommand,
|
|
type VimHudLegendGroup,
|
|
type VimHudLegendGroupId,
|
|
type VimHudPhase,
|
|
} from '../utils/vimHud';
|
|
|
|
const HUD_MONO_FONT = '"SFMono-Regular", "JetBrains Mono", Menlo, var(--font-mono), monospace';
|
|
// Match the seven-frame pressed state in the 30fps product-demo HUD.
|
|
const PRESSED_DURATION_MS = (7 / 30) * 1000;
|
|
const KEY_MAP_COLUMNS: readonly (readonly VimHudLegendGroupId[])[] = [
|
|
['structure', 'control'],
|
|
['text'],
|
|
['selection', 'annotation'],
|
|
];
|
|
const KEY_MAP_GROUPS = getVimHudLegendGroups();
|
|
|
|
interface PreviousKeyProps {
|
|
readonly keyLabel: string;
|
|
readonly opacity: number;
|
|
}
|
|
|
|
function PreviousKey({ keyLabel, opacity }: PreviousKeyProps) {
|
|
return (
|
|
<div
|
|
data-vim-hud-previous-key={keyLabel}
|
|
style={{
|
|
width: 34,
|
|
height: 34,
|
|
display: 'grid',
|
|
flex: '0 0 auto',
|
|
placeItems: 'center',
|
|
borderRadius: 9,
|
|
color: '#cfc8dc',
|
|
background: 'rgba(26,24,34,0.9)',
|
|
border: '1px solid rgba(255,255,255,0.09)',
|
|
borderBottom: '3px solid rgba(0,0,0,0.72)',
|
|
opacity,
|
|
fontFamily: HUD_MONO_FONT,
|
|
fontSize: keyLabel.length > 1 ? 9 : 14,
|
|
fontWeight: 850,
|
|
}}
|
|
>
|
|
{keyLabel}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface ActiveKeyProps {
|
|
readonly keyLabel: string;
|
|
readonly pressed: boolean;
|
|
}
|
|
|
|
function ActiveKey({ keyLabel, pressed }: ActiveKeyProps) {
|
|
return (
|
|
<div
|
|
data-vim-hud-active-key={keyLabel}
|
|
data-pressed={pressed ? 'true' : 'false'}
|
|
style={{
|
|
width: 58,
|
|
height: 58,
|
|
display: 'grid',
|
|
flex: '0 0 auto',
|
|
placeItems: 'center',
|
|
borderRadius: 14,
|
|
color: pressed ? '#1b1427' : '#f5f0ff',
|
|
background: pressed
|
|
? 'linear-gradient(180deg, #eee9ff, #a78bfa)'
|
|
: 'linear-gradient(180deg, #292535, #15121d)',
|
|
border: pressed
|
|
? '1px solid rgba(255,255,255,0.92)'
|
|
: '1px solid rgba(196,181,253,0.34)',
|
|
borderBottom: pressed
|
|
? '4px solid #6750a4'
|
|
: '4px solid rgba(0,0,0,0.82)',
|
|
boxShadow: pressed
|
|
? '0 0 32px rgba(167,139,250,0.72), 0 8px 24px rgba(0,0,0,0.42)'
|
|
: '0 0 20px rgba(167,139,250,0.17), 0 8px 24px rgba(0,0,0,0.42)',
|
|
fontFamily: HUD_MONO_FONT,
|
|
fontSize: keyLabel.length > 1 ? 13 : 29,
|
|
fontWeight: 900,
|
|
}}
|
|
>
|
|
{keyLabel}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface VimKeyMapGroupProps {
|
|
readonly group: VimHudLegendGroup;
|
|
readonly phase: VimHudPhase;
|
|
readonly activeActionId: VimHudCommand['actionId'] | null;
|
|
}
|
|
|
|
function VimKeyMapGroup({
|
|
group,
|
|
phase,
|
|
activeActionId,
|
|
}: VimKeyMapGroupProps) {
|
|
const active = isVimHudLegendGroupActive(group.id, phase);
|
|
|
|
return (
|
|
<section
|
|
data-vim-key-map-group={group.id}
|
|
data-current={active ? 'true' : 'false'}
|
|
aria-current={active ? 'true' : undefined}
|
|
style={{
|
|
padding: '11px 12px 9px',
|
|
borderRadius: 13,
|
|
border: active
|
|
? '1px solid rgba(196,181,253,0.34)'
|
|
: '1px solid rgba(255,255,255,0.075)',
|
|
color: '#f5f0ff',
|
|
background: active
|
|
? 'linear-gradient(180deg, rgba(97,71,148,0.25), rgba(24,19,34,0.24))'
|
|
: 'rgba(13,11,20,0.22)',
|
|
boxShadow: active
|
|
? 'inset 0 1px 0 rgba(255,255,255,0.06), 0 0 24px rgba(139,92,246,0.08)'
|
|
: 'inset 0 1px 0 rgba(255,255,255,0.035)',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'flex-start',
|
|
justifyContent: 'space-between',
|
|
gap: 8,
|
|
marginBottom: 7,
|
|
}}
|
|
>
|
|
<div style={{ minWidth: 0 }}>
|
|
<div
|
|
style={{
|
|
color: active ? '#d8ccff' : '#b4acc1',
|
|
fontFamily: HUD_MONO_FONT,
|
|
fontSize: 10,
|
|
fontWeight: 900,
|
|
letterSpacing: '0.14em',
|
|
lineHeight: 1.1,
|
|
textTransform: 'uppercase',
|
|
}}
|
|
>
|
|
{group.title}
|
|
</div>
|
|
<div
|
|
style={{
|
|
marginTop: 4,
|
|
color: '#817989',
|
|
fontSize: 10,
|
|
fontWeight: 590,
|
|
lineHeight: 1.25,
|
|
}}
|
|
>
|
|
{group.description}
|
|
</div>
|
|
</div>
|
|
{active && (
|
|
<span
|
|
style={{
|
|
flex: '0 0 auto',
|
|
padding: '3px 5px',
|
|
borderRadius: 5,
|
|
color: '#d8ccff',
|
|
background: 'rgba(167,139,250,0.13)',
|
|
fontFamily: HUD_MONO_FONT,
|
|
fontSize: 7,
|
|
fontWeight: 900,
|
|
letterSpacing: '0.11em',
|
|
}}
|
|
>
|
|
NOW
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<div style={{ display: 'grid', gap: 3 }}>
|
|
{group.items.map((item) => {
|
|
const isNavigationGroup = group.id === 'structure' || group.id === 'text';
|
|
const isLatestAction = item.actionId === activeActionId
|
|
&& (!isNavigationGroup || active);
|
|
return (
|
|
<div
|
|
key={`${group.id}-${item.actionId}`}
|
|
data-vim-key-map-action={item.actionId}
|
|
data-latest={isLatestAction ? 'true' : 'false'}
|
|
style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: '48px minmax(0, 1fr)',
|
|
alignItems: 'center',
|
|
minHeight: 23,
|
|
gap: 7,
|
|
borderRadius: 7,
|
|
color: isLatestAction ? '#f7f3ff' : '#bbb4c4',
|
|
background: isLatestAction
|
|
? 'rgba(167,139,250,0.095)'
|
|
: 'transparent',
|
|
}}
|
|
>
|
|
<kbd
|
|
style={{
|
|
minWidth: 29,
|
|
width: 'fit-content',
|
|
maxWidth: 48,
|
|
height: 21,
|
|
display: 'inline-grid',
|
|
placeItems: 'center',
|
|
padding: '0 6px',
|
|
overflow: 'hidden',
|
|
border: isLatestAction
|
|
? '1px solid rgba(216,204,255,0.52)'
|
|
: '1px solid rgba(255,255,255,0.11)',
|
|
borderBottom: isLatestAction
|
|
? '3px solid rgba(103,80,164,0.92)'
|
|
: '3px solid rgba(0,0,0,0.64)',
|
|
borderRadius: 6,
|
|
color: isLatestAction ? '#f6f0ff' : '#d5cedf',
|
|
background: isLatestAction
|
|
? 'linear-gradient(180deg, rgba(107,82,158,0.72), rgba(44,34,63,0.75))'
|
|
: 'linear-gradient(180deg, rgba(43,39,51,0.84), rgba(23,20,29,0.84))',
|
|
fontFamily: HUD_MONO_FONT,
|
|
fontSize: item.key.length > 3 ? 8 : 10,
|
|
fontWeight: 850,
|
|
lineHeight: 1,
|
|
whiteSpace: 'nowrap',
|
|
}}
|
|
>
|
|
{item.key}
|
|
</kbd>
|
|
<span
|
|
style={{
|
|
minWidth: 0,
|
|
fontSize: 10,
|
|
fontWeight: isLatestAction ? 680 : 580,
|
|
lineHeight: 1.15,
|
|
}}
|
|
>
|
|
{item.description}
|
|
</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
/** Props for the pixel-faithful, live Vim HUD used by both document renderers. */
|
|
export interface VimKeyHudProps {
|
|
readonly command: VimHudCommand | null;
|
|
readonly phase: VimHudPhase;
|
|
readonly inputMethod: InputMethod;
|
|
readonly expanded: boolean;
|
|
readonly onExpandedChange: (expanded: boolean) => void;
|
|
/** Hide the persistent key panel while leaving the targeting HUD enabled. */
|
|
readonly onHide?: () => void;
|
|
/** Notify the owner when keyboard focus leaves the HUD for another surface. */
|
|
readonly onFocusLeave?: () => void;
|
|
}
|
|
|
|
/**
|
|
* Render the video HUD against real handled Vim commands.
|
|
*
|
|
* Key feedback changes instantly rather than animating navigation, preserving
|
|
* the responsiveness expected by high-frequency keyboard users.
|
|
*/
|
|
export function VimKeyHud({
|
|
command,
|
|
phase,
|
|
inputMethod,
|
|
expanded,
|
|
onExpandedChange,
|
|
onHide,
|
|
onFocusLeave,
|
|
}: VimKeyHudProps) {
|
|
const [history, setHistory] = useState<readonly VimHudCommand[]>([]);
|
|
const [pressedSequence, setPressedSequence] = useState<number | null>(null);
|
|
const releaseTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
|
|
useLayoutEffect(() => {
|
|
if (!command) {
|
|
if (releaseTimerRef.current) clearTimeout(releaseTimerRef.current);
|
|
releaseTimerRef.current = null;
|
|
setHistory((current) => (current.length === 0 ? current : []));
|
|
setPressedSequence(null);
|
|
return;
|
|
}
|
|
|
|
setHistory((current) => {
|
|
if (current.at(-1)?.sequence === command.sequence) return current;
|
|
return [...current, command].slice(-4);
|
|
});
|
|
setPressedSequence(command.sequence);
|
|
if (releaseTimerRef.current) clearTimeout(releaseTimerRef.current);
|
|
releaseTimerRef.current = setTimeout(() => {
|
|
setPressedSequence((current) => (
|
|
current === command.sequence ? null : current
|
|
));
|
|
}, PRESSED_DURATION_MS);
|
|
|
|
return () => {
|
|
if (releaseTimerRef.current) clearTimeout(releaseTimerRef.current);
|
|
releaseTimerRef.current = null;
|
|
};
|
|
}, [command]);
|
|
|
|
const previous = history
|
|
.filter((entry) => entry.sequence !== command?.sequence)
|
|
.slice(-3);
|
|
const keyLabel = command?.key ?? '·';
|
|
const description = command?.description ?? 'Move by document meaning';
|
|
const inputLabel = inputMethod === 'pinpoint' ? 'PINPOINT' : 'SELECT';
|
|
|
|
return (
|
|
<div
|
|
data-vim-key-hud
|
|
data-expanded={expanded ? 'true' : 'false'}
|
|
role="region"
|
|
aria-label="Vim keyboard HUD"
|
|
onBlur={(event) => {
|
|
if (
|
|
event.relatedTarget instanceof Node
|
|
&& event.currentTarget.contains(event.relatedTarget)
|
|
) {
|
|
return;
|
|
}
|
|
onFocusLeave?.();
|
|
}}
|
|
style={{
|
|
position: 'fixed',
|
|
right: 'min(48px, 4vw)',
|
|
bottom: 150,
|
|
zIndex: 120,
|
|
width: expanded
|
|
? 'min(860px, calc(100vw - 32px))'
|
|
: 'min(650px, calc(100vw - 32px))',
|
|
height: expanded
|
|
? 'min(560px, calc(100dvh - 174px))'
|
|
: 88,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'stretch',
|
|
overflow: 'hidden',
|
|
padding: '12px 16px',
|
|
borderRadius: 20,
|
|
color: '#f7f4ff',
|
|
background: 'linear-gradient(180deg, rgba(43,35,59,0.46), rgba(13,11,20,0.34))',
|
|
border: '1px solid rgba(196,181,253,0.25)',
|
|
boxShadow: '0 22px 58px rgba(0,0,0,0.52), 0 0 32px rgba(167,139,250,0.1), inset 0 1px 0 rgba(255,255,255,0.07)',
|
|
backdropFilter: 'blur(10px)',
|
|
WebkitBackdropFilter: 'blur(10px)',
|
|
pointerEvents: 'none',
|
|
}}
|
|
>
|
|
<div
|
|
data-vim-hud-summary
|
|
style={{
|
|
width: '100%',
|
|
height: 63,
|
|
display: 'flex',
|
|
flex: '0 0 auto',
|
|
alignItems: 'center',
|
|
}}
|
|
>
|
|
<div
|
|
data-vim-hud-history
|
|
aria-hidden="true"
|
|
style={{
|
|
width: 112,
|
|
display: 'flex',
|
|
flex: '0 0 auto',
|
|
alignItems: 'center',
|
|
justifyContent: 'flex-end',
|
|
gap: 5,
|
|
}}
|
|
>
|
|
{previous.map((entry, index) => (
|
|
<PreviousKey
|
|
key={entry.sequence}
|
|
keyLabel={entry.key}
|
|
opacity={0.28 + index * 0.24}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
<div
|
|
aria-hidden="true"
|
|
style={{
|
|
width: 1,
|
|
height: 46,
|
|
flex: '0 0 auto',
|
|
margin: '0 15px',
|
|
background: 'linear-gradient(180deg, transparent, rgba(255,255,255,0.14), transparent)',
|
|
}}
|
|
/>
|
|
|
|
<ActiveKey
|
|
keyLabel={keyLabel}
|
|
pressed={command?.sequence === pressedSequence}
|
|
/>
|
|
|
|
<div
|
|
style={{
|
|
minWidth: 0,
|
|
flex: 1,
|
|
marginLeft: 16,
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
color: '#a99fba',
|
|
fontFamily: HUD_MONO_FONT,
|
|
fontSize: 10,
|
|
fontWeight: 850,
|
|
letterSpacing: '0.16em',
|
|
}}
|
|
>
|
|
<span
|
|
aria-hidden="true"
|
|
style={{
|
|
width: 6,
|
|
height: 6,
|
|
flex: '0 0 auto',
|
|
borderRadius: 99,
|
|
background: '#a78bfa',
|
|
boxShadow: '0 0 13px rgba(167,139,250,0.88)',
|
|
}}
|
|
/>
|
|
<span data-vim-hud-phase>{phase} / {inputLabel}</span>
|
|
</div>
|
|
<div
|
|
data-vim-hud-command
|
|
style={{
|
|
marginTop: 5,
|
|
overflow: 'hidden',
|
|
color: '#f4f0f8',
|
|
fontSize: 19,
|
|
fontWeight: 690,
|
|
lineHeight: 1.08,
|
|
whiteSpace: 'nowrap',
|
|
textOverflow: 'ellipsis',
|
|
}}
|
|
>
|
|
{description}
|
|
</div>
|
|
<span
|
|
role="status"
|
|
aria-live="polite"
|
|
className="sr-only"
|
|
>
|
|
{phase} {inputLabel}: {keyLabel}, {description}
|
|
</span>
|
|
</div>
|
|
|
|
{onHide && (
|
|
<button
|
|
type="button"
|
|
data-vim-key-panel-hide
|
|
aria-label="Hide Vim key panel"
|
|
title="Hide key panel (keep target reticle)"
|
|
onPointerDown={(event) => {
|
|
// Preserve document ownership for pointer users. Keyboard
|
|
// activation is handed back by the owner after hiding.
|
|
event.preventDefault();
|
|
}}
|
|
onClick={onHide}
|
|
style={{
|
|
width: 40,
|
|
height: 40,
|
|
display: 'grid',
|
|
flex: '0 0 auto',
|
|
placeItems: 'center',
|
|
marginLeft: 10,
|
|
padding: 0,
|
|
border: '1px solid rgba(196,181,253,0.16)',
|
|
borderRadius: 10,
|
|
color: '#aaa0ba',
|
|
background: 'rgba(17,14,24,0.2)',
|
|
cursor: 'pointer',
|
|
pointerEvents: 'auto',
|
|
}}
|
|
>
|
|
<EyeOff size={15} strokeWidth={1.8} aria-hidden="true" />
|
|
</button>
|
|
)}
|
|
|
|
<button
|
|
type="button"
|
|
data-vim-key-map-toggle
|
|
aria-expanded={expanded}
|
|
aria-controls="vim-hud-key-map"
|
|
aria-label={expanded ? 'Collapse Vim key map' : 'Expand Vim key map'}
|
|
onPointerDown={(event) => {
|
|
// Keep keyboard ownership on the document/iframe while the pointer
|
|
// toggles this fixed HUD control.
|
|
event.preventDefault();
|
|
}}
|
|
onClick={() => onExpandedChange(!expanded)}
|
|
className="vim-key-hud__map-toggle"
|
|
style={{
|
|
width: 92,
|
|
minWidth: 44,
|
|
minHeight: 44,
|
|
display: 'grid',
|
|
flex: '0 0 auto',
|
|
gridTemplateColumns: '1fr auto',
|
|
alignItems: 'center',
|
|
gap: 7,
|
|
marginLeft: 12,
|
|
padding: '7px 8px 7px 10px',
|
|
border: '1px solid rgba(196,181,253,0.18)',
|
|
borderRadius: 11,
|
|
color: '#afa5bf',
|
|
background: expanded
|
|
? 'rgba(167,139,250,0.13)'
|
|
: 'rgba(17,14,24,0.22)',
|
|
fontFamily: HUD_MONO_FONT,
|
|
cursor: 'pointer',
|
|
pointerEvents: 'auto',
|
|
}}
|
|
>
|
|
<span
|
|
style={{
|
|
display: 'grid',
|
|
justifyItems: 'start',
|
|
fontSize: 8,
|
|
fontWeight: 850,
|
|
letterSpacing: '0.1em',
|
|
lineHeight: 1.35,
|
|
}}
|
|
>
|
|
<span>VIM</span>
|
|
<span style={{ color: '#b39ce7' }}>
|
|
{expanded ? 'CLOSE' : 'KEY MAP'}
|
|
</span>
|
|
</span>
|
|
<kbd
|
|
aria-hidden="true"
|
|
style={{
|
|
width: 25,
|
|
height: 25,
|
|
display: 'grid',
|
|
placeItems: 'center',
|
|
border: '1px solid rgba(216,204,255,0.34)',
|
|
borderBottom: '3px solid rgba(0,0,0,0.66)',
|
|
borderRadius: 7,
|
|
color: '#eee8ff',
|
|
background: 'linear-gradient(180deg, rgba(64,55,78,0.9), rgba(27,23,35,0.9))',
|
|
fontSize: 12,
|
|
fontWeight: 900,
|
|
}}
|
|
>
|
|
?
|
|
</kbd>
|
|
</button>
|
|
</div>
|
|
|
|
{expanded && (
|
|
<div
|
|
id="vim-hud-key-map"
|
|
data-vim-key-map
|
|
style={{
|
|
minHeight: 0,
|
|
display: 'flex',
|
|
flex: 1,
|
|
flexDirection: 'column',
|
|
paddingTop: 10,
|
|
borderTop: '1px solid rgba(255,255,255,0.085)',
|
|
pointerEvents: 'auto',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
flex: '0 0 auto',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
gap: 16,
|
|
padding: '2px 2px 10px',
|
|
}}
|
|
>
|
|
<div>
|
|
<div
|
|
style={{
|
|
color: '#f4efff',
|
|
fontSize: 14,
|
|
fontWeight: 760,
|
|
lineHeight: 1.15,
|
|
}}
|
|
>
|
|
Vim key map
|
|
</div>
|
|
<div
|
|
style={{
|
|
marginTop: 3,
|
|
color: '#92899e',
|
|
fontSize: 10,
|
|
fontWeight: 570,
|
|
}}
|
|
>
|
|
The highlighted section matches your current navigation level.
|
|
</div>
|
|
</div>
|
|
<div
|
|
style={{
|
|
flex: '0 0 auto',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 7,
|
|
color: '#a99fba',
|
|
fontFamily: HUD_MONO_FONT,
|
|
fontSize: 9,
|
|
fontWeight: 850,
|
|
letterSpacing: '0.11em',
|
|
}}
|
|
>
|
|
<span
|
|
aria-hidden="true"
|
|
style={{
|
|
width: 6,
|
|
height: 6,
|
|
borderRadius: 99,
|
|
background: '#a78bfa',
|
|
boxShadow: '0 0 12px rgba(167,139,250,0.82)',
|
|
}}
|
|
/>
|
|
{phase} MODE
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className="vim-key-hud__map-scroll"
|
|
style={{
|
|
minHeight: 0,
|
|
flex: 1,
|
|
overflow: 'auto',
|
|
overscrollBehavior: 'contain',
|
|
padding: '0 2px 4px',
|
|
scrollbarGutter: 'stable',
|
|
}}
|
|
>
|
|
<div className="vim-key-hud__map-columns">
|
|
{KEY_MAP_COLUMNS.map((groupIds, columnIndex) => (
|
|
<div
|
|
key={columnIndex}
|
|
style={{
|
|
display: 'grid',
|
|
alignContent: 'start',
|
|
gap: 9,
|
|
}}
|
|
>
|
|
{KEY_MAP_GROUPS
|
|
.filter((group) => groupIds.includes(group.id))
|
|
.map((group) => (
|
|
<VimKeyMapGroup
|
|
key={group.id}
|
|
group={group}
|
|
phase={phase}
|
|
activeActionId={command?.actionId ?? null}
|
|
/>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
flex: '0 0 auto',
|
|
justifyContent: 'space-between',
|
|
gap: 12,
|
|
padding: '9px 2px 0',
|
|
color: '#777080',
|
|
fontFamily: HUD_MONO_FONT,
|
|
fontSize: 8,
|
|
fontWeight: 780,
|
|
letterSpacing: '0.08em',
|
|
}}
|
|
>
|
|
<span>PRESS ? TO CLOSE</span>
|
|
<span>ESC BACKS OUT ONE LEVEL</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|