@jjlmoya/utils-developer 1.18.0 → 1.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-developer",
-    "version": "1.18.0",
+    "version": "1.20.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/entries.ts

@@ -52,6 +52,8 @@ export { jwtDecoder } from './tool/jwtDecoder/entry';
 export type { JwtDecoderLocaleContent } from './tool/jwtDecoder/entry';
 export { visualCssGridFlexboxGenerator } from './tool/visualCssGridFlexboxGenerator/entry';
 export type { VisualCssGridFlexboxGeneratorLocaleContent } from './tool/visualCssGridFlexboxGenerator/entry';
+export { cssBoxShadowGenerator } from './tool/cssBoxShadowGenerator/entry';
+export type { CssBoxShadowGeneratorLocaleContent } from './tool/cssBoxShadowGenerator/entry';
 export { developerCategory } from './category';
 import { aspectRatio } from './tool/aspectRatio/entry';
 import { calculadoraTiempoDatos } from './tool/calculadoraTiempoDatos/entry';
@@ -80,4 +82,5 @@ import { utmGenerator } from './tool/utmGenerator/entry';
 import { serpPixelSimulator } from './tool/serpPixelSimulator/entry';
 import { jwtDecoder } from './tool/jwtDecoder/entry';
 import { visualCssGridFlexboxGenerator } from './tool/visualCssGridFlexboxGenerator/entry';
-export const ALL_ENTRIES = [aspectRatio, calculadoraTiempoDatos, colorConverter, conversorExcelCsvHtml, cronGenerator, cssSpecificityCalculator, cssToInlineConverter, duplicateCssRemover, generadorSecurityTxt, hashGenerator, inspectorCertificadosSsl, jsonFormatter, keycode, llmCostCalculator, mobileMockupGenerator, musicalTypography, placeholderGenerator, promptLibrary, readabilityCalculator, svgSanitizer, svgToCss, urlCleaner, urlEncoderDecoder, utmGenerator, serpPixelSimulator, jwtDecoder, visualCssGridFlexboxGenerator];
+import { cssBoxShadowGenerator } from './tool/cssBoxShadowGenerator/entry';
+export const ALL_ENTRIES = [aspectRatio, calculadoraTiempoDatos, colorConverter, conversorExcelCsvHtml, cronGenerator, cssSpecificityCalculator, cssToInlineConverter, duplicateCssRemover, generadorSecurityTxt, hashGenerator, inspectorCertificadosSsl, jsonFormatter, keycode, llmCostCalculator, mobileMockupGenerator, musicalTypography, placeholderGenerator, promptLibrary, readabilityCalculator, svgSanitizer, svgToCss, urlCleaner, urlEncoderDecoder, utmGenerator, serpPixelSimulator, jwtDecoder, visualCssGridFlexboxGenerator, cssBoxShadowGenerator];

package/src/index.ts

@@ -70,3 +70,4 @@ export { SERP_PIXEL_SIMULATOR_TOOL } from './tool/serpPixelSimulator/index';
 export { JWT_DECODER_TOOL } from './tool/jwtDecoder/index';
 
 export { VISUAL_CSS_GRID_FLEXBOX_GENERATOR_TOOL } from './tool/visualCssGridFlexboxGenerator/index';
+export { CSS_BOX_SHADOW_GENERATOR_TOOL } from './tool/cssBoxShadowGenerator/index';

package/src/tests/locale_completeness.test.ts

@@ -35,7 +35,7 @@ describe('Locale Completeness Validation', () => {
     });
   });
 
-  it('all 27 tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(27);
+  it('all 28 tools registered', () => {
+    expect(ALL_TOOLS.length).toBe(28);
   });
 });

package/src/tests/tool_validation.test.ts

@@ -4,8 +4,8 @@ import { developerCategory } from '../data';
 
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
-    it('should have 27 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(27);
+    it('should have 28 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(28);
     });
 
     it('developerCategory should be defined', () => {

package/src/tool/cssBoxShadowGenerator/bibliography.astro

@@ -0,0 +1,14 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { cssBoxShadowGenerator } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await cssBoxShadowGenerator.i18n[locale]?.();
+---
+
+{content && <SharedBibliography links={content.bibliography} />}

package/src/tool/cssBoxShadowGenerator/bibliography.ts

@@ -0,0 +1,14 @@
+export const bibliography = [
+  {
+    name: 'MDN: box-shadow',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow',
+  },
+  {
+    name: 'CSS-Tricks: CSS Box Shadow',
+    url: 'https://css-tricks.com/snippets/css/css-box-shadow/',
+  },
+  {
+    name: 'W3C: CSS Backgrounds and Borders Module Level 3',
+    url: 'https://www.w3.org/TR/css-backgrounds-3/#box-shadow',
+  },
+];

package/src/tool/cssBoxShadowGenerator/box-shadow-generator.css

@@ -0,0 +1,376 @@
+.bsg-root { width: 100%; }
+
+.bsg-card {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+  padding: 1.25rem;
+  background:
+    radial-gradient(circle at 20% 10%, rgba(59, 130, 246, 0.08), transparent 32%),
+    linear-gradient(135deg, rgb(250, 250, 252), rgb(241, 245, 249));
+  border: 1px solid rgb(203, 213, 225);
+  border-radius: 1.25rem;
+  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
+}
+
+.theme-dark .bsg-card {
+  background:
+    radial-gradient(circle at 20% 10%, rgba(59, 130, 246, 0.06), transparent 32%),
+    linear-gradient(135deg, rgb(12, 18, 28), rgb(20, 28, 45));
+  border-color: rgb(51, 65, 85);
+}
+
+/* ---- Preview ---- */
+
+.bsg-preview-area {
+  display: grid;
+  place-items: center;
+  min-height: 20rem;
+  padding: 2.5rem;
+  background:
+    linear-gradient(90deg, rgba(148, 163, 184, 0.14) 1px, transparent 1px),
+    linear-gradient(rgba(148, 163, 184, 0.14) 1px, transparent 1px);
+  background-size: 20px 20px;
+  border: 1px dashed rgb(180, 192, 208);
+  border-radius: 1rem;
+}
+
+.theme-dark .bsg-preview-area {
+  background:
+    linear-gradient(90deg, rgba(71, 85, 105, 0.3) 1px, transparent 1px),
+    linear-gradient(rgba(71, 85, 105, 0.3) 1px, transparent 1px);
+  background-size: 20px 20px;
+  background-color: rgba(15, 23, 42, 0.6);
+  border-color: rgb(71, 85, 105);
+}
+
+.bsg-preview-box {
+  width: 180px;
+  height: 180px;
+  background: #fff;
+  border-radius: 1.5rem;
+  transition: box-shadow 0.15s ease;
+}
+
+.theme-dark .bsg-preview-box {
+  background: #fff;
+  box-shadow: none;
+}
+
+/* ---- Presets row ---- */
+
+.bsg-presets-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+.bsg-grow { flex: 1; }
+
+.bsg-chip {
+  padding: 0.35rem 0.7rem;
+  font-size: 0.8rem;
+  font-weight: 750;
+  color: rgb(71, 85, 105);
+  cursor: pointer;
+  background: #fff;
+  border: 1px solid rgb(203, 213, 225);
+  border-radius: 0.5rem;
+  transition: all 0.15s;
+}
+
+.bsg-chip:hover {
+  background: rgb(219, 234, 254);
+  color: rgb(37, 99, 235);
+  border-color: rgb(147, 197, 253);
+}
+
+.bsg-chip.bsg-active {
+  background: rgb(59, 130, 246);
+  color: #fff;
+  border-color: rgb(59, 130, 246);
+}
+
+.bsg-icon-sm {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.1rem;
+  height: 2.1rem;
+  color: rgb(71, 85, 105);
+  cursor: pointer;
+  background: #fff;
+  border: 1px solid rgb(203, 213, 225);
+  border-radius: 0.5rem;
+}
+
+.bsg-icon-sm svg {
+  width: 0.95rem;
+  height: 0.95rem;
+}
+
+.bsg-icon-sm:hover {
+  background: rgb(219, 234, 254);
+  border-color: rgb(147, 197, 253);
+}
+
+.theme-dark .bsg-chip,
+.theme-dark .bsg-icon-sm {
+  color: rgb(148, 163, 184);
+  background: rgb(30, 41, 59);
+  border-color: rgb(51, 65, 85);
+}
+
+.theme-dark .bsg-chip:hover,
+.theme-dark .bsg-icon-sm:hover {
+  background: rgba(59, 130, 246, 0.18);
+  border-color: rgb(59, 130, 246);
+  color: rgb(147, 197, 253);
+}
+
+.theme-dark .bsg-chip.bsg-active {
+  background: rgb(59, 130, 246);
+  color: #fff;
+  border-color: rgb(59, 130, 246);
+}
+
+/* ---- Layer tabs ---- */
+
+.bsg-layers {
+  display: flex;
+  gap: 0.4rem;
+}
+
+.bsg-layer-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.3rem 0.6rem;
+  font-size: 0.78rem;
+  font-weight: 700;
+  color: rgb(100, 116, 139);
+  cursor: pointer;
+  background: transparent;
+  border: 1.5px solid transparent;
+  border-radius: 0.45rem;
+}
+
+.bsg-layer-tab:hover {
+  background: rgba(59, 130, 246, 0.06);
+  color: rgb(59, 130, 246);
+}
+
+.bsg-layer-tab.bsg-active {
+  background: rgb(219, 234, 254);
+  border-color: rgb(147, 197, 253);
+  color: rgb(37, 99, 235);
+}
+
+.bsg-dot {
+  display: block;
+  width: 0.6rem;
+  height: 0.6rem;
+  border-radius: 50%;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.theme-dark .bsg-layer-tab { color: rgb(148, 163, 184); }
+.theme-dark .bsg-layer-tab:hover {
+  color: rgb(147, 197, 253);
+  background: rgba(59, 130, 246, 0.1);
+}
+.theme-dark .bsg-layer-tab.bsg-active {
+  background: rgba(59, 130, 246, 0.15);
+  border-color: rgb(59, 130, 246);
+  color: rgb(147, 197, 253);
+}
+
+/* ---- Sliders ---- */
+
+.bsg-sliders {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+  gap: 0.65rem;
+}
+
+.bsg-slider {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  padding: 0.55rem 0.65rem;
+  background: rgba(248, 250, 252, 0.8);
+  border: 1px solid rgba(203, 213, 225, 0.7);
+  border-radius: 0.6rem;
+}
+
+.bsg-slider label {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 0.72rem;
+  font-weight: 800;
+  color: rgb(100, 116, 139);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.bsg-slider output {
+  font-size: 0.82rem;
+  font-weight: 750;
+  color: rgb(30, 41, 59);
+  font-variant-numeric: tabular-nums;
+}
+
+.bsg-slider input[type="range"] {
+  width: 100%;
+  height: 0.4rem;
+  accent-color: rgb(59, 130, 246);
+  cursor: pointer;
+}
+
+.theme-dark .bsg-slider {
+  background: rgba(30, 41, 59, 0.6);
+  border-color: rgba(71, 85, 105, 0.6);
+}
+
+.theme-dark .bsg-slider label { color: rgb(148, 163, 184); }
+.theme-dark .bsg-slider output { color: rgb(226, 232, 240); }
+
+/* ---- Inline options ---- */
+
+.bsg-inline-opts {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.85rem;
+}
+
+.bsg-switch {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.8rem;
+  font-weight: 750;
+  color: rgb(71, 85, 105);
+  cursor: pointer;
+}
+
+.bsg-switch input[type="checkbox"] {
+  width: 1.1rem;
+  height: 1.1rem;
+  accent-color: rgb(59, 130, 246);
+  cursor: pointer;
+}
+
+.bsg-color-pick {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.2rem 0.5rem;
+  background: #fff;
+  border: 1px solid rgb(203, 213, 225);
+  border-radius: 0.5rem;
+}
+
+.bsg-color-pick span {
+  font-size: 0.78rem;
+  font-weight: 750;
+  color: rgb(71, 85, 105);
+}
+
+.bsg-color-pick input[type="color"] {
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  cursor: pointer;
+  border: none;
+  border-radius: 0.25rem;
+  background: none;
+}
+
+.bsg-color-pick code {
+  font-size: 0.76rem;
+  font-weight: 700;
+  color: rgb(30, 41, 59);
+}
+
+.theme-dark .bsg-switch { color: rgb(148, 163, 184); }
+.theme-dark .bsg-color-pick {
+  background: rgb(30, 41, 59);
+  border-color: rgb(51, 65, 85);
+}
+.theme-dark .bsg-color-pick span { color: rgb(148, 163, 184); }
+.theme-dark .bsg-color-pick code { color: rgb(226, 232, 240); }
+
+/* ---- Code ---- */
+
+.bsg-code-block {
+  overflow: hidden;
+  background: rgb(15, 23, 42);
+  border-radius: 0.8rem;
+}
+
+.bsg-code-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
+}
+
+.bsg-code-bar span {
+  font-size: 0.72rem;
+  font-weight: 850;
+  color: rgb(100, 116, 139);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.bsg-copy-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.3rem 0.6rem;
+  font-size: 0.76rem;
+  font-weight: 750;
+  color: rgb(148, 163, 184);
+  cursor: pointer;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(148, 163, 184, 0.25);
+  border-radius: 0.4rem;
+  transition: all 0.15s;
+}
+
+.bsg-copy-btn svg {
+  width: 0.8rem;
+  height: 0.8rem;
+}
+
+.bsg-copy-btn:hover {
+  background: rgba(59, 130, 246, 0.2);
+  border-color: rgb(59, 130, 246);
+  color: rgb(147, 197, 253);
+}
+
+.bsg-copy-btn[data-copied] {
+  background: rgb(59, 130, 246);
+  border-color: rgb(59, 130, 246);
+  color: #fff;
+}
+
+.bsg-code {
+  padding: 0.75rem;
+  margin: 0;
+  min-height: 2.5rem;
+  overflow: auto;
+  font-size: 0.82rem;
+  line-height: 1.5;
+  color: rgb(203, 213, 225);
+  white-space: pre-wrap;
+}
+
+@media (min-width: 640px) {
+  .bsg-sliders { grid-template-columns: repeat(5, 1fr); }
+}

package/src/tool/cssBoxShadowGenerator/component.astro

@@ -0,0 +1,234 @@
+---
+import { Icon } from 'astro-icon/components';
+import type { CssBoxShadowGeneratorUI } from './ui';
+import './box-shadow-generator.css';
+
+interface Props {
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+const t = (ui ?? {}) as CssBoxShadowGeneratorUI;
+---
+
+<div id="bsg-root" class="bsg-root" data-i18n={JSON.stringify(t)}>
+  <div class="bsg-card">
+    <div class="bsg-preview-area">
+      <div id="bsg-preview" class="bsg-preview-box" aria-label={t.previewLabel}></div>
+    </div>
+
+    <div class="bsg-presets-row">
+      <button class="bsg-chip" data-preset="card" type="button">{t.presetCard}</button>
+      <button class="bsg-chip" data-preset="float" type="button">{t.presetFloat}</button>
+      <button class="bsg-chip" data-preset="inset" type="button">{t.presetInset}</button>
+      <button class="bsg-chip" data-preset="glow" type="button">{t.presetGlow}</button>
+      <button class="bsg-chip" data-preset="layered" type="button">{t.presetLayered}</button>
+      <span class="bsg-grow"></span>
+      <button id="bsg-add-layer" class="bsg-icon-sm" type="button" title={t.addLayer}><Icon name="mdi:plus" /></button>
+      <button id="bsg-remove-layer" class="bsg-icon-sm" type="button" title={t.removeLayer}><Icon name="mdi:minus" /></button>
+      <button id="bsg-reset" class="bsg-icon-sm" type="button" title={t.resetAll}><Icon name="mdi:restore" /></button>
+    </div>
+
+    <div class="bsg-layers" id="bsg-layers">
+      <button class="bsg-layer-tab bsg-active" data-layer="0">
+        <span class="bsg-dot" style="background:#059669"></span>{t.layerPrefix} 1
+      </button>
+    </div>
+
+    <div class="bsg-sliders">
+      <div class="bsg-slider">
+        <label for="bsg-ox">{t.offsetXLabel} <output id="bsg-ox-val">0</output></label>
+        <input id="bsg-ox" type="range" min="-80" max="80" value="0" />
+      </div>
+      <div class="bsg-slider">
+        <label for="bsg-oy">{t.offsetYLabel} <output id="bsg-oy-val">16</output></label>
+        <input id="bsg-oy" type="range" min="-80" max="80" value="16" />
+      </div>
+      <div class="bsg-slider">
+        <label for="bsg-blur">{t.blurLabel} <output id="bsg-blur-val">32</output></label>
+        <input id="bsg-blur" type="range" min="0" max="120" value="32" />
+      </div>
+      <div class="bsg-slider">
+        <label for="bsg-spread">{t.spreadLabel} <output id="bsg-spread-val">-8</output></label>
+        <input id="bsg-spread" type="range" min="-40" max="40" value="-8" />
+      </div>
+      <div class="bsg-slider">
+        <label for="bsg-opacity">{t.opacityLabel} <output id="bsg-opacity-val">0.28</output></label>
+        <input id="bsg-opacity" type="range" min="0" max="100" value="28" />
+      </div>
+    </div>
+
+    <div class="bsg-inline-opts">
+      <label class="bsg-switch">
+        <input id="bsg-inset" type="checkbox" />
+        <span>{t.insetLabel}</span>
+      </label>
+      <label class="bsg-color-pick">
+        <input id="bsg-color" type="color" value="#059669" />
+        <code id="bsg-color-hex">#059669</code>
+      </label>
+      <label class="bsg-color-pick">
+        <span>{t.bgColorLabel}</span>
+        <input id="bsg-bg" type="color" value="#ffffff" />
+      </label>
+    </div>
+
+    <div class="bsg-code-block">
+      <div class="bsg-code-bar">
+        <span>CSS</span>
+        <button id="bsg-copy" class="bsg-copy-btn" type="button"><Icon name="mdi:content-copy" /> {t.copyCode}</button>
+      </div>
+      <pre id="bsg-code" class="bsg-code"></pre>
+    </div>
+  </div>
+</div>
+
+<script>
+  import { buildShadowCss, buildShadowValue } from './logic';
+  import type { ShadowLayer } from './logic';
+  import type { CssBoxShadowGeneratorUI } from './ui';
+
+  const root = document.getElementById('bsg-root') as HTMLElement;
+  const t = JSON.parse(root.dataset.i18n ?? '{}') as CssBoxShadowGeneratorUI;
+
+  const preview = document.getElementById('bsg-preview') as HTMLElement;
+  const code = document.getElementById('bsg-code') as HTMLElement;
+  const ox = document.getElementById('bsg-ox') as HTMLInputElement;
+  const oy = document.getElementById('bsg-oy') as HTMLInputElement;
+  const blur = document.getElementById('bsg-blur') as HTMLInputElement;
+  const spread = document.getElementById('bsg-spread') as HTMLInputElement;
+  const opacity = document.getElementById('bsg-opacity') as HTMLInputElement;
+  const color = document.getElementById('bsg-color') as HTMLInputElement;
+  const bg = document.getElementById('bsg-bg') as HTMLInputElement;
+  const inset = document.getElementById('bsg-inset') as HTMLInputElement;
+  const layersEl = document.getElementById('bsg-layers') as HTMLElement;
+
+  let activeLayer = 0;
+  const layers: ShadowLayer[] = [
+    { offsetX: 0, offsetY: 16, blur: 32, spread: -8, color: '#059669', opacity: 0.28, inset: false },
+  ];
+
+  const PRESETS: Record<string, ShadowLayer[]> = {
+    card: [{ offsetX: 0, offsetY: 6, blur: 16, spread: -2, color: '#0f172a', opacity: 0.15, inset: false }],
+    float: [{ offsetX: 0, offsetY: 16, blur: 40, spread: -8, color: '#0f172a', opacity: 0.2, inset: false }],
+    inset: [{ offsetX: 0, offsetY: 3, blur: 10, spread: -1, color: '#0f172a', opacity: 0.18, inset: true }],
+    glow: [{ offsetX: 0, offsetY: 0, blur: 30, spread: 6, color: '#3b82f6', opacity: 0.45, inset: false }],
+    layered: [
+      { offsetX: 0, offsetY: 1, blur: 2, spread: 0, color: '#0f172a', opacity: 0.12, inset: false },
+      { offsetX: 0, offsetY: 10, blur: 28, spread: -6, color: '#0f172a', opacity: 0.14, inset: false },
+      { offsetX: 0, offsetY: 28, blur: 60, spread: -12, color: '#0f172a', opacity: 0.08, inset: false },
+    ],
+  };
+
+  function readLayer(): ShadowLayer {
+    return {
+      offsetX: Number(ox.value), offsetY: Number(oy.value),
+      blur: Number(blur.value), spread: Number(spread.value),
+      color: color.value, opacity: Number(opacity.value) / 100,
+      inset: inset.checked,
+    };
+  }
+
+  function showLayer(l: ShadowLayer) {
+    ox.value = String(l.offsetX); oy.value = String(l.offsetY);
+    blur.value = String(l.blur); spread.value = String(l.spread);
+    color.value = l.color; opacity.value = String(Math.round(l.opacity * 100));
+    inset.checked = l.inset;
+  }
+
+  function sync() {
+    const l = layers[activeLayer];
+    (document.getElementById('bsg-ox-val')!).textContent = String(l.offsetX);
+    (document.getElementById('bsg-oy-val')!).textContent = String(l.offsetY);
+    (document.getElementById('bsg-blur-val')!).textContent = String(l.blur);
+    (document.getElementById('bsg-spread-val')!).textContent = String(l.spread);
+    (document.getElementById('bsg-opacity-val')!).textContent = l.opacity.toFixed(2);
+    (document.getElementById('bsg-color-hex')!).textContent = l.color;
+    preview.style.boxShadow = buildShadowValue(layers);
+    preview.style.backgroundColor = bg.value;
+    code.textContent = buildShadowCss(layers);
+  }
+
+  function renderTabs() {
+    layersEl.innerHTML = '';
+    layers.forEach((l, i) => {
+      const btn = document.createElement('button');
+      btn.className = 'bsg-layer-tab' + (i === activeLayer ? ' bsg-active' : '');
+      const dot = document.createElement('span');
+      dot.className = 'bsg-dot';
+      dot.style.backgroundColor = l.color;
+      btn.append(dot, `${t.layerPrefix} ${i + 1}`);
+      btn.addEventListener('click', () => {
+        layers[activeLayer] = readLayer();
+        activeLayer = i;
+        showLayer(layers[i]);
+        renderTabs();
+        sync();
+      });
+      layersEl.append(btn);
+    });
+  }
+
+  function onInput() { layers[activeLayer] = readLayer(); sync(); }
+
+  function addLayer() {
+    if (layers.length >= 5) return;
+    layers[activeLayer] = readLayer();
+    layers.push({ offsetX: 4, offsetY: 4, blur: 10, spread: 0, color: '#6366f1', opacity: 0.35, inset: false });
+    activeLayer = layers.length - 1;
+    showLayer(layers[activeLayer]);
+    renderTabs();
+    sync();
+  }
+
+  function removeLayer() {
+    if (layers.length <= 1) return;
+    layers.splice(activeLayer, 1);
+    if (activeLayer >= layers.length) activeLayer = layers.length - 1;
+    showLayer(layers[activeLayer]);
+    renderTabs();
+    sync();
+  }
+
+  function resetAll() {
+    layers.splice(0, layers.length, { offsetX: 0, offsetY: 16, blur: 32, spread: -8, color: '#059669', opacity: 0.28, inset: false });
+    activeLayer = 0;
+    bg.value = '#ffffff';
+    showLayer(layers[0]);
+    document.querySelectorAll('.bsg-chip').forEach((b) => b.classList.remove('bsg-active'));
+    renderTabs();
+    sync();
+  }
+
+  [ox, oy, blur, spread, opacity, color, inset, bg].forEach((el) => {
+    el.addEventListener('input', onInput);
+  });
+
+  document.getElementById('bsg-add-layer')!.addEventListener('click', addLayer);
+  document.getElementById('bsg-remove-layer')!.addEventListener('click', removeLayer);
+  document.getElementById('bsg-reset')!.addEventListener('click', resetAll);
+
+  document.querySelectorAll('.bsg-chip').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const name = (btn as HTMLElement).dataset.preset;
+      if (!name || !PRESETS[name]) return;
+      document.querySelectorAll('.bsg-chip').forEach((b) => b.classList.remove('bsg-active'));
+      btn.classList.add('bsg-active');
+      layers.splice(0, layers.length, ...PRESETS[name].map((l) => ({ ...l })));
+      activeLayer = 0;
+      showLayer(layers[0]);
+      renderTabs();
+      sync();
+    });
+  });
+
+  const copyBtn = document.getElementById('bsg-copy')!;
+  copyBtn.addEventListener('click', async () => {
+    await navigator.clipboard.writeText(code.textContent ?? '');
+    copyBtn.dataset.copied = t.copied;
+    window.setTimeout(() => { delete copyBtn.dataset.copied; }, 1400);
+  });
+
+  renderTabs();
+  sync();
+</script>