@bapla/site-theme 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 RK Création (SAS FR)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,170 @@
-# Temporary Holding Version
+# @bapla/site-theme
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Le thème de départ des sites hébergés par Bapla Websites
+(`docs/features/websites.md` §7.5) : le thème Tailwind tiré de l'Apparence,
+le rendu des blocs standards, des médias, du texte riche et des menus. React
+18 ou 19, Tailwind CSS 4, ni Astro ni Next : les routes viendront dans
+`@bapla/site-astro` et `@bapla/site-next`.
+
+Public sur npmjs, sous licence MIT : `npm install @bapla/site-theme`, sans
+jeton — le build d'un site sur Coolify l'installe comme n'importe quel
+paquet.
+
+## Le thème
+
+L'API de lecture sert l'Apparence du site, défauts résolus
+(`ResolvedAppearance`). Au build, et à chaque revalidation, le site en écrit
+la feuille :
+
+```ts
+import { fontImports, themeCss } from '@bapla/site-theme'
+
+const appearance = await delivery.appearance()
+await writeFile('src/styles/theme.css', themeCss(appearance))
+await writeFile('src/styles/fonts.ts', fontImports(appearance).map((p) => `import '${p}'`).join('\n'))
+```
+
+```css
+/* src/styles/site.css */
+@import "tailwindcss";
+@import "@bapla/site-theme/base.css";
+@import "./theme.css";
+```
+
+`themeCss` produit un bloc `@theme` (`--color-primary-50…950` et
+`secondary`, `accent`, `neutral` ; `--color-background`, `--color-text` ;
+`--font-body`, `--font-heading` ; `--text-h1…h6`, `--text-p` avec leur
+interligne, leur espacement et leur graisse ; `--radius-base`) : les classes
+`bg-primary-600`, `font-heading`, `text-h2`, `rounded-base` existent. En mode
+`both`, le sombre suit `prefers-color-scheme` et se lit dans la rampe
+`neutral`. Une valeur qui n'est ni une couleur ni une longueur est écartée.
+
+## Les polices
+
+**Auto-hébergées, toujours** : jamais d'appel à Google Fonts ni à un CDN depuis
+la page. Le site installe les paquets Fontsource de ses polices, et
+`fontImports` dit lesquels importer :
+
+```sh
+npm install @fontsource-variable/inter @fontsource-variable/playfair-display
+```
+
+Une police sans version variable : `fontImports(appearance, { variable: false })`
+donne `@fontsource/<id>/<graisse>.css` pour les graisses utilisées.
+
+## Les blocs
+
+```tsx
+import { Blocks, BlocksProvider } from '@bapla/site-theme'
+
+<BlocksProvider resolveLink={(id) => paths[id] ?? null} resolveMedia={(id) => media[id] ?? null}>
+  <Blocks blocks={node.data.body} />
+</BlocksProvider>
+```
+
+Les quatorze blocs standards fonctionnent sans une ligne du thème : section,
+grille (colonnes égales, autant que la largeur minimale en permet, ou chaque
+colonne sa largeur en douzièmes ou en pourcentages ; empilement sous un point
+de rupture), colonne, texte, média, carrousel, onglets, accordéon (au clavier,
+ARIA), bouton, intégration (YouTube, Vimeo, Dailymotion, cartes ; une autre
+adresse devient un lien), séparateur, espace. Un type inconnu ne rend rien.
+
+Un lien qui ne se résout pas n'est pas suivi : un id de node que
+`resolveLink` ne connaît pas, une adresse qui n'est ni un chemin, ni une
+ancre, ni `mailto:`, `tel:`, `http(s)`.
+
+### Remplacer ou ajouter un bloc
+
+Un thème importe le composant de base et le réécrit, ou l'habille :
+
+```tsx
+import { BlocksProvider, Grid, type BlockProps } from '@bapla/site-theme'
+
+function MyGrid(props: BlockProps) {
+  return <div className="my-grid"><Grid {...props} /></div>
+}
+
+function Hero({ props }: BlockProps<{ title?: string }>) {
+  return <h1 className="text-h1 text-primary-700">{props.title}</h1>
+}
+
+<BlocksProvider components={{ grid: MyGrid, hero: Hero }}>…</BlocksProvider>
+```
+
+Les composants de base portent des classes `bapla-*` et des attributs
+`data-*` (`.bapla-grid[data-gap='lg']`), stylés dans `base.css`, en
+`@layer components` : une utilitaire Tailwind ou une règle du thème l'emporte
+sans `!important`.
+
+## Les médias
+
+Un média se sert **sur le domaine du site**, `/_media/<web_med_…>/<nom>`, avec
+`?w=&h=&fit=&fm=&q=` : le site relaie à l'app, qui lit le stockage. `<Media>`
+donne un `srcset` (320 à 1920, jamais plus large que l'original) et place le
+point focal en `object-position`.
+
+### Le compagnon d'images
+
+Hébergé, un site a son **imgproxy sur `/_img`** (`websites.md` §5.9) : les
+images transformées y passent, par des **URL signées** avec la clé du site,
+que l'hébergement lui donne (`BAPLA_IMAGES_KEY`, `BAPLA_IMAGES_SALT`,
+`BAPLA_IMAGES_PATH`). La signature se fait **sur le serveur seulement** :
+
+```tsx
+import { BlocksProvider } from '@bapla/site-theme'
+import { imgproxyUrlsFromEnv } from '@bapla/site-theme/server'
+
+<BlocksProvider imageUrl={imgproxyUrlsFromEnv()} imageSizes={{ banner: { w: 1600, h: 500, fit: 'cover' } }}>
+```
+
+Sans ces variables (le développement), les URL restent celles de `/_media`.
+SVG, GIF et vidéos ne passent jamais par le compagnon.
+
+### `<Image>`
+
+```tsx
+<Image media={photo} size="card" />                       // 300×300 recadré, 1x et 2x
+<Image media={photo} w={640} h={360} fit="cover" />        // une boîte directe
+<Image media={photo} size="card" w={500} />                // le nom, w remplacé
+<Image media={hero} w={1600} widths={[480, 960, 1600]} sizes="100vw" formats={['avif', 'webp']} priority />
+```
+
+- **Tailles nommées** : `thumbnail` (150×150), `card` (300×300), `medium`
+  (768 de large), `large` (1280) ; un site en ajoute ou en remplace par
+  `imageSizes` du `BlocksProvider`. Un paramètre direct l'emporte sur le nom.
+- **`<img>`** : la boîte en 1x et 2x (2x seulement si l'original suffit),
+  `width` et `height` posés pour la mise en page ; avec `widths` et `sizes`,
+  un `srcset` en largeurs.
+- **`<picture>`** avec `formats` : une source par format moderne, l'`<img>`
+  au format de l'original en repli.
+- Jamais agrandie ; `cover` recadre autour du point focal ; `priority` charge
+  tout de suite (`fetchpriority="high"`).
+
+## Les menus
+
+`<NavBar items={menu.items} brand={…} />` : la barre, ses sous-menus (motif
+« disclosure » : des liens, et un bouton qui montre les enfants), les
+méga-menus (`panel` : un arbre de blocs, où `menu_links` liste les enfants de
+l'élément), le menu mobile sous `md`. Échap ferme et rend le focus, sortir de
+la barre ferme tout. `<Breadcrumb items={…} />` pour le fil d'Ariane.
+
+La forme d'un élément de menu (`src/menu/types.ts`) est **provisoire** : le
+modèle des menus est encore en discussion (`websites.md` §5.8).
+
+## Les libellés
+
+Français par défaut ; un site dans une autre langue passe les siens :
+`<BlocksProvider labels={{ menu: 'Menu', next: 'Next', … }}>`.
+
+## Développer
+
+```sh
+npm run build -w @bapla/site-theme
+npm test -w @bapla/site-theme
+```
+
+## Publier
+
+Une étiquette `site-theme/vX.Y.Z`, égale à la version de `package.json`,
+publie sur npmjs (`publish:site-theme` dans `.gitlab-ci.yml`, avec la
+variable `NPM_TOKEN`).

package/dist/base.css

@@ -0,0 +1,331 @@
+/*
+ * @bapla/site-theme — the base style of a site.
+ *
+ * Imported after Tailwind and the theme of the Appearance:
+ *
+ *   @import "tailwindcss";
+ *   @import "@bapla/site-theme/base.css";
+ *   (then the generated `themeCss(appearance)`)
+ *
+ * Everything sits in `@layer components` (and `base` for elements), so a
+ * Tailwind utility or a theme's own rule wins without `!important`. Colours
+ * read the variables of the Appearance, with a fallback for a site that has
+ * not generated them yet.
+ */
+
+@layer base {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  html {
+    -webkit-text-size-adjust: 100%;
+    text-rendering: optimizeLegibility;
+  }
+
+  body {
+    margin: 0;
+    background-color: var(--color-background, #ffffff);
+    color: var(--color-text, #1f2937);
+    font-family: var(--font-body, ui-sans-serif, system-ui, sans-serif);
+    line-height: 1.6;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-heading, inherit);
+    line-height: 1.2;
+    margin: 0 0 0.5em;
+    text-wrap: balance;
+  }
+
+  p, ul, ol, blockquote, pre, figure, table {
+    margin: 0 0 1em;
+  }
+
+  img, video, iframe {
+    display: block;
+    max-width: 100%;
+  }
+
+  img, video {
+    height: auto;
+  }
+
+  a {
+    color: var(--color-primary-700, #1d4ed8);
+    text-underline-offset: 0.15em;
+  }
+
+  a:hover {
+    color: var(--color-primary-800, #1e40af);
+  }
+
+  :focus-visible {
+    outline: 2px solid var(--color-primary-600, #2563eb);
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+      animation-duration: 0.01ms !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}
+
+@layer components {
+  /* Layout ---------------------------------------------------------------- */
+
+  .bapla-container {
+    width: 100%;
+    max-width: var(--bapla-container, 72rem);
+    margin-inline: auto;
+    padding-inline: 1rem;
+  }
+
+  .bapla-section[data-width='narrow'] { --bapla-container: 46rem; }
+  .bapla-section[data-width='wide'] { --bapla-container: 90rem; }
+  .bapla-section[data-width='full'] { --bapla-container: none; }
+  .bapla-section[data-width='full'] > .bapla-container { padding-inline: 0; }
+
+  .bapla-section[data-padding='none'] { padding-block: 0; }
+  .bapla-section[data-padding='sm'] { padding-block: 1.5rem; }
+  .bapla-section[data-padding='md'] { padding-block: 3rem; }
+  .bapla-section[data-padding='lg'] { padding-block: 6rem; }
+
+  .bapla-section[data-background='muted'] { background-color: var(--color-neutral-100, #f3f4f6); }
+  .bapla-section[data-background='accent'] { background-color: var(--color-primary-50, #eff6ff); }
+  .bapla-section[data-background='dark'] {
+    background-color: var(--color-neutral-900, #111827);
+    color: var(--color-neutral-50, #f9fafb);
+  }
+  .bapla-section[data-background='dark'] a { color: var(--color-primary-300, #93c5fd); }
+  .bapla-section[data-background='image'] {
+    background-size: cover;
+    background-position: center;
+  }
+
+  .bapla-grid {
+    display: grid;
+    grid-template-columns: var(--bapla-grid-cols, minmax(0, 1fr));
+    gap: var(--bapla-gap, 1.5rem);
+  }
+
+  .bapla-grid[data-gap='none'] { --bapla-gap: 0; }
+  .bapla-grid[data-gap='sm'] { --bapla-gap: 0.75rem; }
+  .bapla-grid[data-gap='md'] { --bapla-gap: 1.5rem; }
+  .bapla-grid[data-gap='lg'] { --bapla-gap: 3rem; }
+
+  .bapla-grid[data-align='start'] { align-items: start; }
+  .bapla-grid[data-align='center'] { align-items: center; }
+  .bapla-grid[data-align='end'] { align-items: end; }
+  .bapla-grid[data-align='stretch'] { align-items: stretch; }
+
+  .bapla-column {
+    min-width: 0;
+    grid-column: var(--bapla-col-span, auto);
+  }
+
+  .bapla-column[data-align='start'] { align-self: start; }
+  .bapla-column[data-align='center'] { align-self: center; }
+  .bapla-column[data-align='end'] { align-self: end; }
+
+  /* Stacked into one column below its breakpoint. */
+  @media (max-width: 1023.98px) {
+    .bapla-grid[data-stack='lg'] { grid-template-columns: minmax(0, 1fr); }
+    .bapla-grid[data-stack='lg'] > .bapla-column { grid-column: auto; }
+  }
+  @media (max-width: 767.98px) {
+    .bapla-grid[data-stack='md'] { grid-template-columns: minmax(0, 1fr); }
+    .bapla-grid[data-stack='md'] > .bapla-column { grid-column: auto; }
+  }
+  @media (max-width: 639.98px) {
+    .bapla-grid[data-stack='sm'] { grid-template-columns: minmax(0, 1fr); }
+    .bapla-grid[data-stack='sm'] > .bapla-column { grid-column: auto; }
+  }
+
+  .bapla-divider {
+    border: 0;
+    border-top: 1px solid var(--color-neutral-200, #e5e7eb);
+    margin-block: 1.5rem;
+  }
+  .bapla-divider[data-size='none'] { margin-block: 0; }
+  .bapla-divider[data-size='sm'] { margin-block: 0.75rem; }
+  .bapla-divider[data-size='lg'] { margin-block: 3rem; }
+
+  .bapla-spacer { height: 2rem; }
+  .bapla-spacer[data-size='sm'] { height: 1rem; }
+  .bapla-spacer[data-size='lg'] { height: 4rem; }
+  .bapla-spacer[data-size='xl'] { height: 8rem; }
+
+  /* Content --------------------------------------------------------------- */
+
+  .bapla-richtext > :last-child { margin-bottom: 0; }
+  .bapla-richtext blockquote {
+    border-left: 3px solid var(--color-primary-300, #93c5fd);
+    padding-left: 1rem;
+    color: var(--color-neutral-700, #374151);
+  }
+  .bapla-richtext pre {
+    overflow-x: auto;
+    padding: 1rem;
+    border-radius: var(--radius-base, 0.5rem);
+    background-color: var(--color-neutral-100, #f3f4f6);
+  }
+  .bapla-table { overflow-x: auto; }
+  .bapla-table table { border-collapse: collapse; width: 100%; }
+  .bapla-table th, .bapla-table td {
+    border: 1px solid var(--color-neutral-200, #e5e7eb);
+    padding: 0.5rem 0.75rem;
+    text-align: left;
+  }
+
+  .bapla-figure { margin: 0; }
+  .bapla-figure .bapla-media { width: 100%; border-radius: var(--radius-base, 0.5rem); }
+  .bapla-figure[data-aspect='16:9'] .bapla-media { aspect-ratio: 16 / 9; }
+  .bapla-figure[data-aspect='4:3'] .bapla-media { aspect-ratio: 4 / 3; }
+  .bapla-figure[data-aspect='1:1'] .bapla-media { aspect-ratio: 1; }
+  .bapla-figure[data-aspect='3:4'] .bapla-media { aspect-ratio: 3 / 4; }
+  .bapla-figure figcaption {
+    margin-top: 0.5rem;
+    font-size: 0.875em;
+    color: var(--color-neutral-600, #4b5563);
+  }
+
+  .bapla-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5em;
+    padding: 0.625em 1.25em;
+    border: 2px solid transparent;
+    border-radius: var(--radius-base, 0.5rem);
+    font-weight: 600;
+    line-height: 1.2;
+    text-decoration: none;
+    cursor: pointer;
+    transition: background-color 150ms, color 150ms, border-color 150ms;
+  }
+  .bapla-button[data-size='sm'] { font-size: 0.875rem; }
+  .bapla-button[data-size='lg'] { font-size: 1.125rem; }
+  .bapla-button[data-variant='primary'] { background-color: var(--color-primary-600, #2563eb); color: #ffffff; }
+  .bapla-button[data-variant='primary']:hover { background-color: var(--color-primary-700, #1d4ed8); color: #ffffff; }
+  .bapla-button[data-variant='secondary'] { background-color: var(--color-secondary-600, #4b5563); color: #ffffff; }
+  .bapla-button[data-variant='secondary']:hover { background-color: var(--color-secondary-700, #374151); color: #ffffff; }
+  .bapla-button[data-variant='outline'] { border-color: currentColor; color: var(--color-primary-700, #1d4ed8); background: transparent; }
+  .bapla-button[data-variant='link'] { padding-inline: 0; color: var(--color-primary-700, #1d4ed8); text-decoration: underline; }
+  .bapla-button[aria-disabled='true'] { opacity: 0.6; cursor: default; }
+
+  .bapla-embed { position: relative; aspect-ratio: 16 / 9; }
+  .bapla-embed[data-aspect='4:3'] { aspect-ratio: 4 / 3; }
+  .bapla-embed[data-aspect='1:1'] { aspect-ratio: 1; }
+  .bapla-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
+
+  /* Interactive ----------------------------------------------------------- */
+
+  .bapla-carousel { position: relative; }
+  .bapla-carousel-controls { display: flex; justify-content: flex-end; gap: 0.5rem; margin-bottom: 0.5rem; }
+  .bapla-carousel-controls button,
+  .bapla-tablist [role='tab'],
+  .bapla-accordion-item button,
+  .bapla-nav-toggle,
+  .bapla-nav-disclosure {
+    font: inherit;
+    color: inherit;
+    background: none;
+    border: 0;
+    cursor: pointer;
+  }
+  .bapla-carousel-controls button {
+    padding: 0.375rem 0.75rem;
+    border: 1px solid var(--color-neutral-300, #d1d5db);
+    border-radius: var(--radius-base, 0.5rem);
+    background-color: var(--color-background, #ffffff);
+  }
+  .bapla-carousel-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 0.75rem; }
+  .bapla-carousel-dots button {
+    width: 0.75rem;
+    height: 0.75rem;
+    padding: 0;
+    border-radius: 9999px;
+    border: 0;
+    background-color: var(--color-neutral-300, #d1d5db);
+    cursor: pointer;
+  }
+  .bapla-carousel-dots button[aria-current='true'] { background-color: var(--color-primary-600, #2563eb); }
+
+  .bapla-tablist { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--color-neutral-200, #e5e7eb); margin-bottom: 1rem; overflow-x: auto; }
+  .bapla-tabs[data-alignment='center'] .bapla-tablist { justify-content: center; }
+  .bapla-tabs[data-alignment='stretch'] [role='tab'] { flex: 1; }
+  .bapla-tablist [role='tab'] { padding: 0.625rem 1rem; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
+  .bapla-tablist [role='tab'][aria-selected='true'] { border-bottom-color: var(--color-primary-600, #2563eb); color: var(--color-primary-700, #1d4ed8); font-weight: 600; }
+
+  .bapla-accordion-item { border-bottom: 1px solid var(--color-neutral-200, #e5e7eb); }
+  .bapla-accordion-item h3 { margin: 0; font-size: inherit; }
+  .bapla-accordion-item button { display: flex; width: 100%; justify-content: space-between; padding: 1rem 0; text-align: left; font-weight: 600; }
+  .bapla-accordion-item button::after { content: '+'; }
+  .bapla-accordion-item button[aria-expanded='true']::after { content: '−'; }
+  .bapla-accordion-panel { padding-bottom: 1rem; }
+
+  /* Navigation ------------------------------------------------------------ */
+
+  .bapla-nav { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
+  .bapla-nav-brand { margin-right: auto; }
+  .bapla-nav ul { list-style: none; margin: 0; padding: 0; }
+  .bapla-nav-list { display: flex; align-items: center; gap: 0.25rem; }
+  .bapla-nav-item { position: relative; display: flex; flex-wrap: wrap; align-items: center; }
+  .bapla-nav-link,
+  .bapla-nav-disclosure { display: inline-flex; align-items: center; padding: 0.5rem 0.75rem; color: inherit; text-decoration: none; border-radius: var(--radius-base, 0.5rem); }
+  .bapla-nav-link:hover,
+  .bapla-nav-disclosure:hover { background-color: var(--color-neutral-100, #f3f4f6); }
+  .bapla-nav-item[data-active='true'] > .bapla-nav-link,
+  .bapla-nav-link[aria-current='page'] { color: var(--color-primary-700, #1d4ed8); font-weight: 600; }
+  .bapla-nav-caret { width: 0.5em; height: 0.5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-25%); }
+  .bapla-nav-heading { display: block; padding: 0.5rem 0.75rem; font-weight: 600; font-size: 0.875em; color: var(--color-neutral-600, #4b5563); }
+  .bapla-nav-toggle { display: none; padding: 0.5rem 0.75rem; border: 1px solid var(--color-neutral-300, #d1d5db); border-radius: var(--radius-base, 0.5rem); }
+
+  .bapla-nav-submenu,
+  .bapla-mega {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 50;
+    min-width: 14rem;
+    padding: 0.5rem;
+    background-color: var(--color-background, #ffffff);
+    border: 1px solid var(--color-neutral-200, #e5e7eb);
+    border-radius: var(--radius-base, 0.5rem);
+    box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.2);
+  }
+  .bapla-nav-submenu .bapla-nav-submenu { position: static; border: 0; box-shadow: none; padding: 0 0 0 0.75rem; }
+  .bapla-nav-submenu .bapla-nav-item { display: block; }
+  .bapla-nav-submenu .bapla-nav-link { display: flex; }
+  .bapla-nav-item[data-kind='panel'] { position: static; }
+  .bapla-mega { left: 0; right: 0; padding: 1.5rem; }
+
+  .bapla-menu-links,
+  .bapla-menu-links ul { list-style: none; margin: 0; padding: 0; }
+  .bapla-menu-links a { display: block; padding: 0.25rem 0; text-decoration: none; color: inherit; }
+  .bapla-menu-links a:hover { color: var(--color-primary-700, #1d4ed8); }
+  .bapla-menu-heading { display: block; font-weight: 600; margin-top: 0.5rem; }
+
+  @media (max-width: 767.98px) {
+    .bapla-nav-toggle { display: inline-flex; }
+    .bapla-nav-list { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; }
+    .bapla-nav-list[data-open='true'] { display: flex; }
+    .bapla-nav-submenu,
+    .bapla-mega { position: static; box-shadow: none; border: 0; padding: 0 0 0 1rem; min-width: 0; }
+  }
+
+  .bapla-breadcrumb ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; font-size: 0.875em; }
+  .bapla-breadcrumb li + li::before { content: '/'; margin-inline: 0.5rem; color: var(--color-neutral-400, #9ca3af); }
+  .bapla-breadcrumb [aria-current='page'] { color: var(--color-neutral-600, #4b5563); }
+}

package/dist/chunk-RYCW4YWV.js

@@ -0,0 +1,69 @@
+// src/media/urls.ts
+var MEDIA_WIDTHS = [320, 480, 640, 768, 1024, 1280, 1536, 1920];
+var MEDIA_ID = /^web_med_[0-9a-f-]{36}$/;
+function mediaUrl(media, transform = {}) {
+  const base = media.url !== "" ? media.url : `/_media/${media.id}/${encodeURIComponent(media.filename)}`;
+  const params = new URLSearchParams();
+  for (const key of ["w", "h", "fit", "fm", "q"]) {
+    const value = transform[key];
+    if (value !== void 0) params.set(key, String(value));
+  }
+  const query = params.toString();
+  return query === "" ? base : `${base}${base.includes("?") ? "&" : "?"}${query}`;
+}
+function readMedia(value, resolve) {
+  if (typeof value === "string") return MEDIA_ID.test(value) ? resolve(value) : null;
+  if (value === null || typeof value !== "object") return null;
+  const media = value;
+  if (typeof media.id !== "string" || typeof media.url !== "string") return null;
+  if (!media.url.startsWith("/") || media.url.startsWith("//")) return null;
+  return {
+    id: media.id,
+    url: media.url,
+    filename: typeof media.filename === "string" ? media.filename : "",
+    mime: typeof media.mime === "string" ? media.mime : "",
+    width: typeof media.width === "number" ? media.width : null,
+    height: typeof media.height === "number" ? media.height : null,
+    alt: typeof media.alt === "string" ? media.alt : null,
+    focal_point: media.focal_point ?? null
+  };
+}
+function objectPosition(focal) {
+  if (!focal) return void 0;
+  const pct = (v) => `${Math.round(Math.min(1, Math.max(0, v)) * 100)}%`;
+  return `${pct(focal.x)} ${pct(focal.y)}`;
+}
+
+// src/media/imgproxy.ts
+function imgproxyPath(media, transform = {}) {
+  const options = [];
+  const fit = transform.fit ?? "inside";
+  if (transform.w !== void 0 || transform.h !== void 0) {
+    const kind = fit === "cover" ? "fill" : "fit";
+    options.push(`rs:${kind}:${Math.round(transform.w ?? 0)}:${Math.round(transform.h ?? 0)}:0`);
+  }
+  if (fit === "cover") {
+    const focal = media.focal_point;
+    options.push(focal ? `g:fp:${number(focal.x)}:${number(focal.y)}` : "g:ce");
+  }
+  options.push(`q:${transform.q ?? 80}`);
+  let path = `/${options.join("/")}/plain/${media.id}/${encodeURIComponent(media.filename)}`;
+  if (transform.fm !== void 0) path += `@${transform.fm === "jpeg" ? "jpg" : transform.fm}`;
+  return path;
+}
+function isTransformable(media) {
+  return ["image/jpeg", "image/png", "image/webp", "image/avif"].includes(media.mime);
+}
+function number(value) {
+  const fixed = Math.min(1, Math.max(0, value)).toFixed(4);
+  return fixed.replace(/0+$/, "").replace(/\.$/, "") || "0";
+}
+
+export {
+  MEDIA_WIDTHS,
+  mediaUrl,
+  readMedia,
+  objectPosition,
+  imgproxyPath,
+  isTransformable
+};