---
/**
* CelestialFrame.astro
* ---------------------------------------------------------------------------
* An ornamental frame for imagery: rounded image container with a gold border
* + small star-burst flourishes in the corners and a faint sacred-geometry tint
* behind. Wraps an (or any media) passed via the default slot.
*
* CORNER FIT: the gold border lives on the outer . The media container
* is INSET by exactly the border width (via --frame-bw) and its corner radius
* is reduced by the same amount, so the image nests flush inside the border at
* every corner — no gap, no mismatch. Adjust --frame-bw here in one place if
* the border width changes.
*/
import StarBurst from "./StarBurst.astro";
interface Props {
class?: string;
/** Corner rounding. */
rounded?: "lg" | "xl" | "2xl" | "none";
/** Stroke emphasis on the frame border. */
emphasis?: "subtle" | "strong";
}
const {
class: className = "",
rounded = "2xl",
emphasis = "subtle",
} = Astro.props;
// Outer radius (px) per option. The inner media radius is outer - border width
// so the image corner nests perfectly inside the border's corner.
const outerPx = { none: 0, lg: 8, xl: 12, "2xl": 16 }[rounded];
const bw = emphasis === "strong" ? 4 : 3; // border width in px (matches border-2 / 3px)
const innerPx = Math.max(0, outerPx - bw);
---
{/* Faint sacred-geometry tint behind the image (fills the full figure). */}
{
/* The media itself, in normal flow (defines the figure's height via the slot's
aspect-ratio div). Its radius = outer radius - border width, so the image's
rounded corner nests PERFECTLY inside the border's rounded corner. The
figure's `overflow: hidden` clips the tint layer to the outer radius. */
}
{/* Corner star-burst flourishes (sit on the border corners). */}