update_glass_toggle.js

const fs = require('fs');

// 1. Update page.tsx preview and source code
const pageTsxPath = 'frontend/app/dashboard/components/page.tsx';
let pageTsx = fs.readFileSync(pageTsxPath, 'utf8');

// Update the preview rendering
pageTsx = pageTsx.replace(
  /if \(comp\.style === 'aesthetic-gloss'\) \{\s*return <AestheticGlossButton>Action<\/AestheticGlossButton>\s*\}/,
  `if (comp.style === 'aesthetic-gloss') {
    return (
      <div className="flex items-center justify-center rounded-2xl bg-gradient-to-br from-[#4a5568] via-[#5a6577] to-[#3d4f5f] p-8" style={{ minHeight: 140 }}>
        <AestheticGlossButton />
      </div>
    )
  }`
);

// Update source code in COMPONENT_DETAILS
const newCode = fs.readFileSync('frontend/components/buttons/aesthetic-gloss-button.tsx', 'utf8');
const arrCode = newCode.split('\n').map(l => JSON.stringify(l));

const oldBlock = /'aesthetic-gloss': \{[^}]*filename: 'AestheticGlossButton\.tsx'[^}]*deps:[^}]*install:[^}]*code: \[[\s\S]*?\]\.join\('\\n'\)\s*\}/;

const newBlock = `'aesthetic-gloss': {
    filename: 'GlassToggleButton.tsx',
    deps: 'react · clsx · tailwind-merge',
    install: 'npm i clsx tailwind-merge',
    code: [
      ${arrCode.join(',\n      ')}
    ].join('\\n')
  }`;

pageTsx = pageTsx.replace(oldBlock, newBlock);

fs.writeFileSync(pageTsxPath, pageTsx);

// 2. Update mock-data name
const mockPath = 'backend/src/data/mock-data.ts';
let mock = fs.readFileSync(mockPath, 'utf8');
mock = mock.replace(
  "name: 'Aesthetic Gloss'",
  "name: 'Glass Toggle'"
);
fs.writeFileSync(mockPath, mock);

// 3. Update changelog
const clPath = 'frontend/app/dashboard/changelog/page.tsx';
let cl = fs.readFileSync(clPath, 'utf8');
cl = cl.replace(
  "Introduced 'Aesthetic Gloss': A top 0.1% professional glossy button, available completely for free.",
  "Introduced 'Glass Toggle': A glassmorphic toggle button with frosted glass effect, available completely for free."
);
fs.writeFileSync(clPath, cl);