Max-Width Prose Container

---
//    VELOCITY COMPONENT · theming
// 
//    Colours here are Tailwind `primary-*` / `accent-*`, which resolve through
//    the Velocity preset. Out of the box they are a neutral indigo — NOT the
//    Aidxn brand — so this drops into your project without dragging our look in.
// 
//    ⚡ NOT USING VELOCITY? Run this once, in your project root:
// 
//          velocityx theme
// 
//    It writes velocity-preset.cjs + velocity-theme.css. Add the preset to your
//    tailwind.config, import the css, then set your whole brand in ONE place:
// 
//          :root {
//            --vx-brand: custom;
//            --vx-primary-600: 220 38 38;   <- your action colour
//            --vx-primary-700: 185 28 28;
//          }
// 
//    ⚠️  Raw RGB channels, space separated — NOT hex. `#DC2626` here silently
//        breaks every /opacity variant in the library (bg-primary-600/20 etc).
// 
//    Prefer not to install anything? Find-and-replace `primary-` with your own
//    scale name. Nothing else in this file depends on Velocity.
/**
 * ProseContainer — Thin, centred reading-measure column for long-form
 * copy (articles, legal pages, blog bodies). Defaults to ~68ch, the
 * commonly-cited comfortable reading-measure ceiling — override with
 * `maxWidth` for a brand's own reader column token if one exists in the
 * host project (this component stays generic/portable on its own).
 *
 * Renders as <article> by default since prose containers usually wrap a
 * single piece of long-form content; pass `as="div"` for a plain wrapper.
 */
export interface Props {
  as?: 'article' | 'div' | 'section';
  maxWidth?: string;
  className?: string;
}

const { as: As = 'article', maxWidth = '68ch', className = '' } = Astro.props;
---

<As
  class:list={[
    'mx-auto w-full',
    'text-secondary-700 dark:text-secondary-300 leading-relaxed',
    '[&_h2]:mt-10 [&_h2]:mb-3 [&_h2]:font-semibold [&_h2]:text-secondary-900 dark:[&_h2]:text-white',
    '[&_h3]:mt-8 [&_h3]:mb-2 [&_h3]:font-semibold [&_h3]:text-secondary-900 dark:[&_h3]:text-white',
    '[&_p]:mt-4 [&_a]:text-primary-600 dark:[&_a]:text-primary-300 [&_a]:underline [&_a]:underline-offset-2',
    '[&_ul]:mt-4 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:mt-4 [&_ol]:list-decimal [&_ol]:pl-5',
    className,
  ]}
  style={`max-width:${maxWidth};`}
>
  <slot />
</As>