// Derive editor preview styles from the site CSS so the preview cannot drift.
// The preview template in src/pages/admin/index.astro renders the same markup
// as the Example pages, so the page hero, figure and prose rules apply as-is.
import { readFileSync, writeFileSync } from 'node:fs';

const css = readFileSync(new URL('../src/styles/global.css', import.meta.url), 'utf8').replace(/\r\n/g, '\n');
const between = (start, end) => {
  const from = css.indexOf(start);
  const to = end ? css.indexOf(end, from) : css.length;
  if (from < 0 || to < 0) throw new Error(`preview-styles: marker not found in global.css: ${from < 0 ? start : end}`);
  return css.slice(from, to).trim();
};
const preview = [
  between('/* ===', '/* Header'), // fonts, tokens, base, utilities
  between('/* Page hero', '/* Footer'), // hero, figure, prose, buttons
  between('/* Responsive page'), // responsive page, preferences
  `/* Preview frame
   ========================================================================== */

/* There is no site header above the hero */
.page-hero {
  margin-top: 0;
  padding-top: 3rem;
}

/* Sveltia wraps the image preview in a paragraph */
.page-figure p {
  margin: 0;
}`,
];
writeFileSync(new URL('../public/admin/preview.css', import.meta.url),
  '/* Generated by scripts/preview-styles.mjs; edit src/styles/global.css. */\n\n' + preview.join('\n\n') + '\n');