8b284e01b9
Package: @lilith/ui-dev-content Split from: lilith/ui.git or lilith/build.git Publish workflow: calls lilith/workflows/.forgejo/workflows/publish-npm.yml@main
50 lines
2.2 KiB
JavaScript
50 lines
2.2 KiB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
/**
|
|
* OverlayToggle - Master on/off switch for the overlay
|
|
*
|
|
* Fixed toggle button in bottom-right corner to show/hide the overlay
|
|
*/
|
|
import { useEffect } from 'react';
|
|
import styled from '@lilith/ui-styled-components';
|
|
import { Button } from '@lilith/ui-primitives';
|
|
import { EyeIcon, EyeOffIcon } from '@lilith/ui-icons';
|
|
import { ZINDEX_LAYERS } from '@lilith/ui-zname';
|
|
import { useOverlayState } from '../core/ContentEditingContext';
|
|
// ============================================================================
|
|
// Styled Components
|
|
// ============================================================================
|
|
const Kbd = styled.kbd `
|
|
margin-left: 8px;
|
|
padding: 2px 6px;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 3px;
|
|
font-size: 10px;
|
|
font-family: monospace;
|
|
`;
|
|
// ============================================================================
|
|
// Component
|
|
// ============================================================================
|
|
/**
|
|
* Fixed toggle button to show/hide the content editing overlay
|
|
*/
|
|
export function OverlayToggle() {
|
|
const [visible, setVisible] = useOverlayState();
|
|
// Keyboard shortcut: Cmd/Ctrl + Shift + E
|
|
useEffect(() => {
|
|
const handleKeyDown = (e) => {
|
|
if (e.key === 'E' && e.shiftKey && (e.metaKey || e.ctrlKey)) {
|
|
e.preventDefault();
|
|
setVisible(!visible);
|
|
}
|
|
};
|
|
window.addEventListener('keydown', handleKeyDown);
|
|
return () => window.removeEventListener('keydown', handleKeyDown);
|
|
}, [visible, setVisible]);
|
|
return (_jsxs(Button, { "data-testid": "overlay-toggle", variant: visible ? 'primary' : 'ghost', size: "sm", icon: visible ? _jsx(EyeIcon, { size: 16 }) : _jsx(EyeOffIcon, { size: 16 }), onClick: () => setVisible(!visible), title: `Toggle content editing overlay (${visible ? 'ON' : 'OFF'})`, style: {
|
|
position: 'fixed',
|
|
bottom: '20px',
|
|
right: '20px',
|
|
zIndex: ZINDEX_LAYERS.system + 1, /* Above all highlights */
|
|
pointerEvents: 'auto', /* Ensure always clickable */
|
|
}, children: [visible ? 'Hide Overlay' : 'Show Overlay', _jsx(Kbd, { children: "\u21E7\u2318E" })] }));
|
|
}
|