@keplerstudio/mockup-editor-panel
v0.1.2
Published
Reusable floating visual editor panel for mockups and design previews.
Readme
@keplerstudio/mockup-editor-panel
Panel flotante para editar temas visuales de mockups.
Instalacion
npm i @keplerstudio/mockup-editor-panelUso en navegador
El paquete publica estos archivos:
dist/editor-panel.jsdist/editor-panel.css
Y expone el global MockupEditorPanel.
Ejemplo completo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mockup Editor Panel</title>
<link rel="stylesheet" href="node_modules/@keplerstudio/mockup-editor-panel/dist/editor-panel.css" />
<style>
:root {
--color-primary: #0f172a;
--color-accent: #ef4444;
--color-bg: #f4f7fb;
--color-surface: #ffffff;
--color-text: #0f172a;
--color-muted: #64748b;
--font-sans: 'Inter', system-ui, sans-serif;
--radius: 20px;
--space: 16px;
--shadow-blur: 18;
}
</style>
</head>
<body>
<main>
<h1>Demo</h1>
</main>
<script src="node_modules/@keplerstudio/mockup-editor-panel/dist/editor-panel.js"></script>
<script>
const themeObject = {
mode: 'light',
'--color-primary': '#0f172a',
'--color-accent': '#ef4444',
'--color-bg': '#f4f7fb',
'--color-surface': '#ffffff',
'--color-text': '#0f172a',
'--color-muted': '#64748b',
'--font-sans': "'Inter', system-ui, sans-serif",
'--radius': '20px',
'--space': '16px',
'--shadow-blur': '18',
};
MockupEditorPanel.mount({
storageKey: 'my-project-editor-position',
theme: themeObject,
defaultTheme: themeObject,
onThemeChange(nextTheme) {
Object.entries(nextTheme).forEach(([key, value]) => {
if (key === 'mode') {
document.body.dataset.theme = value;
return;
}
document.documentElement.style.setProperty(key, value);
});
},
});
</script>
</body>
</html>API
MockupEditorPanel.mount(options)
Devuelve una instancia con:
open()close()toggle()setTheme(theme)getTheme()destroy()
Options
root: elemento donde monta el panel. Default:document.body.storageKey: clave para guardar la posicion enlocalStorage.theme: tema inicial.defaultTheme: base usada en reset.triggerLabel: texto del boton flotante.title: titulo del panel.onThemeChange(theme): se dispara en cada cambio.onSave(theme): se dispara al guardar.onReset(theme): se dispara al restaurar.
Theme tokens
Soporta estos tokens:
mode--color-primary--color-accent--color-bg--color-surface--color-text--color-muted--font-sans--radius--space--shadow-blur
Example standalone
Para ver una demo lista para abrir, usa:
example/standalone.htmlBuild
npm run buildnpm publish ejecuta prepack, que genera dist/ antes de publicar.