panda.config.ts

import { basePreset } from "@microbit/ui/base-preset";
import { defineConfig } from "@pandacss/dev";
import { appPreset } from "./src/deployment/default/panda-preset";

// Optionally pull in the private brand preset, mirroring the `theme-package`
// alias swap in vite.config.ts. When the private package is installed it
// overrides brand tokens (colours, fonts) and brand recipe variants; otherwise
// the OSS default preset stands alone. The two are merged by Panda at codegen
// time.
//
// Panda loads this config as CommonJS, so `require` is the real (sync) require;
// Node 24 resolves the ESM private package through it.
let brandPreset: unknown;
try {
  brandPreset = (
    // eslint-disable-next-line @typescript-eslint/no-var-requires
    require("@microbit-foundation/ml-trainer-microbit/panda-preset") as {
      default: unknown;
    }
  ).default;
} catch {
  brandPreset = undefined;
}

export default defineConfig({
  preflight: true,
  // `npm run panda` (panda codegen) generates the styled-system/* helpers; the
  // CSS is generated by @pandacss/dev/postcss (see postcss.config.cjs), which
  // injects it into the cascade-layer declaration in src/layers.css.
  jsxFramework: "react",
  // Drop Panda's default theme preset; the preset stack below supplies the
  // full token system. preset-base still provides the utilities.
  eject: true,
  // Later presets override earlier ones: @microbit/ui's base preset (the
  // complete design system + recipes, with OSS default brand values), this
  // app's own preset, then the optional private brand preset which overrides
  // the OSS default brand values (brand/brand2 ramps + display font).
  // staticCss lives in the base preset.
  presets: [
    "@pandacss/preset-base",
    basePreset,
    appPreset,
    ...(brandPreset ? [brandPreset] : []),
  ],
  include: [
    "./src/**/*.{ts,tsx}",
    // @microbit/ui ships as source; include it so Panda extracts the styles
    // its components use. Beware: a glob that matches nothing fails silently,
    // and recipe styling still works via the preset's staticCss, so a wrong
    // path shows up only as broken non-recipe styling (unsized icons,
    // collapsed fields).
    "./node_modules/@microbit/ui/src/**/*.{ts,tsx}",
    "./node_modules/@microbit/ui-patterns/src/**/*.{ts,tsx}",
  ],
  outdir: "styled-system",
});