705d74a49f
Package: @lilith/ui-developer-fab Split from: lilith/ui.git or lilith/build.git Publish workflow: calls lilith/workflows/.forgejo/workflows/publish-npm.yml@main
68 lines
No EOL
2.8 KiB
JavaScript
68 lines
No EOL
2.8 KiB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
|
|
/**
|
|
* ContentOverlayToggle - Toggle button for dev-time content editing overlay
|
|
*
|
|
* Provides a prominent toggle for the WYSIWYG content editor overlay (@lilith/ui-dev-content).
|
|
* State persists in localStorage across page refreshes.
|
|
*
|
|
* Visual states:
|
|
* - OFF: Light blue (#60A5FA / blue-400)
|
|
* - ON: Bright neon green (#22C55E / green-500)
|
|
*/
|
|
import { useState, useEffect } from 'react';
|
|
import styled from '@lilith/ui-styled-components';
|
|
import { m } from '@lilith/ui-motion';
|
|
import { FAB } from '@lilith/ui-fab';
|
|
import { Eye, EyeOff } from 'lucide-react';
|
|
const STORAGE_KEY = 'dev_content_editor_enabled';
|
|
const StyledToggleButton = styled(m.button) `
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 48px;
|
|
height: 48px;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
|
|
/* Color states */
|
|
background-color: ${({ $enabled }) => ($enabled ? '#22C55E' : '#60A5FA')};
|
|
color: white;
|
|
|
|
/* Hover effect */
|
|
&:hover {
|
|
filter: brightness(1.1);
|
|
}
|
|
|
|
/* Active/pressed effect */
|
|
&:active {
|
|
transform: scale(0.95);
|
|
}
|
|
`;
|
|
export const ContentOverlayToggle = () => {
|
|
const [isEnabled, setIsEnabled] = useState(() => {
|
|
// Initialize from localStorage
|
|
const stored = localStorage.getItem(STORAGE_KEY);
|
|
return stored === 'true';
|
|
});
|
|
// Persist to localStorage and dispatch event when state changes
|
|
useEffect(() => {
|
|
localStorage.setItem(STORAGE_KEY, String(isEnabled));
|
|
// Dispatch custom event for DevContentOverlay to listen to
|
|
window.dispatchEvent(new CustomEvent('dev-content-editor-toggle', {
|
|
detail: { enabled: isEnabled },
|
|
}));
|
|
console.log('[ContentOverlayToggle] Content editor overlay:', isEnabled ? 'enabled' : 'disabled');
|
|
}, [isEnabled]);
|
|
const handleToggle = (newState) => {
|
|
setIsEnabled(newState === 'on');
|
|
};
|
|
const currentState = isEnabled ? 'on' : 'off';
|
|
return (_jsx(FAB.ToggleButton, { options: [
|
|
{ id: 'off', icon: _jsx(EyeOff, { size: 20 }), label: 'Overlay OFF' },
|
|
{ id: 'on', icon: _jsx(Eye, { size: 20 }), label: 'Overlay ON' },
|
|
], value: currentState, onChange: handleToggle, ariaLabel: "Toggle content overlay", renderOption: ({ option, onClick }) => (_jsx(StyledToggleButton, { "$enabled": option.id === 'on', onClick: onClick, initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, transition: { duration: 0.2 }, whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, "aria-label": option.label, title: option.label, "data-testid": `content-overlay-toggle-${option.id}`, children: option.icon }, option.id)) }));
|
|
};
|
|
//# sourceMappingURL=ContentOverlayToggle.js.map
|