@hgdc/docs 0.3.0 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hgdc/docs",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Modèle de site de HGDC Docs : documentation MDX (docs.json) construite avec Astro Starlight, recherche, versions, llms.txt et assistant.",
   "license": "UNLICENSED",
   "type": "module",

package/src/build/content.ts

@@ -0,0 +1,82 @@
+import type { Element, ElementContent, Root, RootContent } from "hast"
+
+/**
+ * Mise en forme du contenu, au build.
+ *
+ * Titre d'endpoint (`## GET /v9/projects`) en barre de méthode : la méthode en pastille
+ * colorée, le chemin en police mono, ses paramètres (`:id`, `{id}`) soulignés. Le texte du
+ * titre ne change pas : l'ancre, la table des matières et la recherche restent les mêmes.
+ * Tableau : enveloppé dans `.hd-table`, qui défile en largeur sans déborder de la colonne.
+ */
+const ENDPOINT = /^(GET|POST|PUT|PATCH|DELETE|HEAD|OPTIONS)\s+(\/\S*)$/
+const PARAM = /(:[A-Za-z_][\w]*|\{[^}/]+\})/
+
+export function parseEndpoint(text: string): { method: string; path: string } | null {
+  const match = ENDPOINT.exec(text.trim())
+  return match ? { method: match[1]!, path: match[2]! } : null
+}
+
+function textOf(node: Element): string | null {
+  let text = ""
+  for (const child of node.children) {
+    if (child.type === "text") text += child.value
+    else if (child.type === "element" && child.tagName === "code") {
+      for (const inner of child.children) if (inner.type === "text") text += inner.value
+    } else return null
+  }
+  return text
+}
+
+function pathChildren(path: string): Array<ElementContent> {
+  return path
+    .split(PARAM)
+    .filter(Boolean)
+    .map((part) =>
+      PARAM.test(part)
+        ? {
+            type: "element",
+            tagName: "span",
+            properties: { className: ["hd-path__param"] },
+            children: [{ type: "text", value: part }],
+          }
+        : { type: "text", value: part },
+    )
+}
+
+export function rehypeDocsContent() {
+  const walk = (nodes: Array<RootContent | ElementContent>) => {
+    for (const [index, node] of nodes.entries()) {
+      if (node.type !== "element") continue
+      // Tableau : un cadre qui défile seul en largeur, le tableau garde toute la largeur.
+      if (node.tagName === "table") {
+        nodes[index] = { type: "element", tagName: "div", properties: { className: ["hd-table"] }, children: [node] }
+        continue
+      }
+      if (node.tagName !== "h2" && node.tagName !== "h3") {
+        walk(node.children)
+        continue
+      }
+      const text = textOf(node)
+      const endpoint = text ? parseEndpoint(text) : null
+      if (!endpoint) continue
+      node.properties.className = [...((node.properties.className as Array<string>) ?? []), "hd-endpoint"]
+      node.children = [
+        {
+          type: "element",
+          tagName: "span",
+          properties: { className: ["hd-method"], dataMethod: endpoint.method.toLowerCase() },
+          children: [{ type: "text", value: endpoint.method }],
+        },
+        { type: "text", value: " " },
+        {
+          type: "element",
+          tagName: "code",
+          properties: { className: ["hd-path"] },
+          children: pathChildren(endpoint.path),
+        },
+      ]
+    }
+  }
+  // Typé en `unknown` : Astro et ce paquet ne résolvent pas toujours le même @types/hast.
+  return (tree: unknown) => walk((tree as Root).children)
+}

package/src/build/markdown.ts

@@ -70,12 +70,17 @@ function replaceCodeBlocks(content: Element): void {
   }
 }
 
-/** Encadré → citation dont la première ligne porte le titre en gras : `> **Note**`. */
+/**
+ * Encadré → citation dont la première ligne porte le titre en gras : `> **Note**`. Le titre
+ * est celui de la page, sinon le nom du type (`aria-label` de `.hd-callout`).
+ */
 function replaceAsides(content: Element): void {
-  for (const aside of selectAll("aside.starlight-aside", content)) {
-    const title = select(".starlight-aside__title", aside)
-    const body = select(".starlight-aside__content", aside)
-    const label = title ? toString(title as Parameters<typeof toString>[0]).trim() : ""
+  for (const aside of selectAll("aside.starlight-aside, aside.hd-callout", content)) {
+    const title = select(".starlight-aside__title, .hd-callout__title", aside)
+    const body = select(".starlight-aside__content, .hd-callout__body", aside)
+    if (body && title) body.children = body.children.filter((child) => child !== title)
+    const named = typeof aside.properties["ariaLabel"] === "string" ? aside.properties["ariaLabel"] : ""
+    const label = title ? toString(title as Parameters<typeof toString>[0]).trim() : named
     const quote: Element = {
       type: "element",
       tagName: "blockquote",

package/src/components/Accordion.astro

@@ -1,4 +1,6 @@
 ---
+import Icon from "../overrides/Icon.astro"
+
 interface Props {
   title: string
   defaultOpen?: boolean
@@ -7,6 +9,6 @@ const { title, defaultOpen = false } = Astro.props
 ---
 
 <details class="hgdc-accordion" open={defaultOpen}>
-  <summary>{title}</summary>
+  <summary><Icon name="chevron-right" size={16} class="hgdc-accordion__chevron" /><span>{title}</span></summary>
   <div class="hgdc-accordion__body"><slot /></div>
 </details>

package/src/components/Callout.astro

@@ -0,0 +1,31 @@
+---
+import Icon from "../overrides/Icon.astro"
+
+/**
+ * Encadré commun à Note, Info, Tip, Check, Warning et Danger : un lavis de sa couleur, un
+ * filet de la même teinte et son icône. Le type est dit au lecteur d'écran.
+ */
+export type CalloutTone = "note" | "info" | "tip" | "check" | "warning" | "danger"
+interface Props {
+  tone: CalloutTone
+  title?: string | undefined
+}
+const LABELS: Record<CalloutTone, string> = {
+  note: "Note",
+  info: "Info",
+  tip: "Astuce",
+  check: "Validé",
+  warning: "Attention",
+  danger: "Danger",
+}
+const ICONS = { note: "note", info: "info", tip: "tip", check: "circle-check", warning: "warning", danger: "danger" } as const
+const { tone, title } = Astro.props
+---
+
+<aside class="hd-callout" data-tone={tone} aria-label={title ?? LABELS[tone]}>
+  <Icon name={ICONS[tone]} class="hd-callout__icon" />
+  <div class="hd-callout__body">
+    {title && <p class="hd-callout__title">{title}</p>}
+    <slot />
+  </div>
+</aside>

package/src/components/Card.astro

@@ -1,4 +1,6 @@
 ---
+import Icon from "../overrides/Icon.astro"
+
 interface Props {
   title: string
   href?: string
@@ -10,6 +12,6 @@ const Tag = href ? "a" : "div"
 ---
 
 <Tag class:list={["hgdc-card", { "hgdc-card--link": href }]} href={href}>
-  <span class="hgdc-card__title">{title}</span>
+  <span class="hgdc-card__title">{title}{href && <Icon name="arrow-right" size={16} class="hgdc-card__arrow" />}</span>
   <div class="hgdc-card__body"><slot /></div>
 </Tag>

package/src/components/Check.astro

@@ -1,10 +1,9 @@
 ---
-import { Aside } from "@astrojs/starlight/components"
+import Callout from "./Callout.astro"
 
 interface Props {
   title?: string
 }
-const { title } = Astro.props
 ---
 
-<Aside type="tip" title={title}><slot /></Aside>
+<Callout tone="check" title={Astro.props.title}><slot /></Callout>

package/src/components/CodeGroup.astro

@@ -1,4 +1,12 @@
 ---
+// Plusieurs blocs de code en onglets, nommés d'après le titre de chaque bloc (```bash npm).
+// Sans JavaScript, seul le premier bloc s'affiche ; le script ajoute les onglets.
 ---
 
-<div class="hgdc-code-group"><slot /></div>
+<hd-code-group class="hgdc-code-group not-content"><slot /></hd-code-group>
+
+<script>
+  import { defineCodeGroup } from "../widget/code.ts"
+
+  defineCodeGroup()
+</script>

package/src/components/Danger.astro

@@ -1,10 +1,9 @@
 ---
-import { Aside } from "@astrojs/starlight/components"
+import Callout from "./Callout.astro"
 
 interface Props {
   title?: string
 }
-const { title } = Astro.props
 ---
 
-<Aside type="danger" title={title}><slot /></Aside>
+<Callout tone="danger" title={Astro.props.title}><slot /></Callout>

package/src/components/Info.astro

@@ -1,10 +1,9 @@
 ---
-import { Aside } from "@astrojs/starlight/components"
+import Callout from "./Callout.astro"
 
 interface Props {
   title?: string
 }
-const { title = "Info" } = Astro.props
 ---
 
-<Aside type="note" title={title}><slot /></Aside>
+<Callout tone="info" title={Astro.props.title}><slot /></Callout>

package/src/components/Note.astro

@@ -1,10 +1,9 @@
 ---
-import { Aside } from "@astrojs/starlight/components"
+import Callout from "./Callout.astro"
 
 interface Props {
   title?: string
 }
-const { title } = Astro.props
 ---
 
-<Aside type="note" title={title}><slot /></Aside>
+<Callout tone="note" title={Astro.props.title}><slot /></Callout>

package/src/components/Tip.astro

@@ -1,10 +1,9 @@
 ---
-import { Aside } from "@astrojs/starlight/components"
+import Callout from "./Callout.astro"
 
 interface Props {
   title?: string
 }
-const { title } = Astro.props
 ---
 
-<Aside type="tip" title={title}><slot /></Aside>
+<Callout tone="tip" title={Astro.props.title}><slot /></Callout>

package/src/components/Warning.astro

@@ -1,10 +1,9 @@
 ---
-import { Aside } from "@astrojs/starlight/components"
+import Callout from "./Callout.astro"
 
 interface Props {
   title?: string
 }
-const { title } = Astro.props
 ---
 
-<Aside type="caution" title={title}><slot /></Aside>
+<Callout tone="warning" title={Astro.props.title}><slot /></Callout>

package/src/core/feedback-api.ts

@@ -5,13 +5,23 @@ import { z } from "zod"
  * et la console. Aucune donnée personnelle : la page, la réponse, un commentaire facultatif.
  */
 export const MAX_FEEDBACK_COMMENT = 1000
+/** Code joint à un signalement « Signaler un code faux », tronqué par le site. */
+export const MAX_FEEDBACK_CODE = 2000
 
-export const feedbackRequestSchema = z.object({
-  project: z.string().regex(/^[a-z0-9]{8,64}$/),
-  /** Chemin de la page, `base` compris (`/docs/guides/publier/`). */
-  page: z.string().startsWith("/").max(512),
-  helpful: z.boolean(),
-  comment: z.string().trim().max(MAX_FEEDBACK_COMMENT).optional(),
-})
+export const feedbackRequestSchema = z
+  .object({
+    project: z.string().regex(/^[a-z0-9]{8,64}$/),
+    /** Chemin de la page, `base` compris (`/docs/guides/publier/`). */
+    page: z.string().startsWith("/").max(512),
+    helpful: z.boolean(),
+    comment: z.string().trim().max(MAX_FEEDBACK_COMMENT).optional(),
+    /** `code` : « Signaler un code faux » sur un bloc de code ; absent, l'avis porte sur la page. */
+    kind: z.enum(["page", "code"]).optional(),
+    code: z.string().max(MAX_FEEDBACK_CODE).optional(),
+  })
+  .refine((value) => value.kind !== "code" || Boolean(value.comment), {
+    message: "un signalement de code dit ce qui ne va pas",
+    path: ["comment"],
+  })
 
 export type FeedbackRequest = z.infer<typeof feedbackRequestSchema>

package/src/core/theme.ts

@@ -12,8 +12,10 @@ export type Theme = { light: AccentPalette; dark: AccentPalette }
 /** Accent violet de la DA HGDC (`--brand-accent` du kit), si le client n'en donne pas. */
 export const HGDC_ACCENT = "#7c3aed"
 
-const LIGHT_BG = "#ffffff"
-const DARK_BG = "#0f0f10"
+/** Fonds sur lesquels l'accent doit tenir 4,5:1 : la surface la plus proche de lui (élément
+ *  courant teinté, encart `muted`), un cran plus foncé ou plus clair que la page. */
+const LIGHT_BG = "#f2f2f2"
+const DARK_BG = "#2a2a2a"
 
 export function themeFor(primary: string = HGDC_ACCENT, dark?: string): Theme {
   const base = hexToOklch(primary)
@@ -48,7 +50,8 @@ export function withContrast(color: Oklch, background: string, ratio: number): s
 export function themeCss(theme: Theme): string {
   const vars = (p: AccentPalette) =>
     `--sl-color-accent-low:${p.low};--sl-color-accent:${p.accent};--sl-color-accent-high:${p.high};--hgdc-on-accent:${p.onAccent};`
-  return `:root{${vars(theme.dark)}}:root[data-theme="light"]{${vars(theme.light)}}`
+  // Clair par défaut : le sombre ne vaut que choisi (`data-hd-theme`, overrides/ThemeProvider.astro).
+  return `:root{${vars(theme.dark)}}:root:not([data-hd-theme="dark"]){${vars(theme.light)}}`
 }
 
 // --- Conversions sRGB ↔ OKLCH (Björn Ottosson) et contraste WCAG 2 ---

package/src/integration.ts

@@ -8,6 +8,7 @@ import type { AstroIntegration, AstroUserConfig } from "astro"
 
 import { remarkAutoImport } from "./build/auto-import.ts"
 import { remarkBaseLinks } from "./build/base-links.ts"
+import { rehypeDocsContent } from "./build/content.ts"
 import { publicFiles } from "./build/public-files.ts"
 import { writeMachineReadable } from "./build/outputs.ts"
 import { parseDocsConfig, socialNetwork, withHostProject, type DocsConfig } from "./core/config.ts"
@@ -95,9 +96,12 @@ function collectPublic(contentDir: string, declared: ReadonlyArray<string>): str
   return target
 }
 
-/** Pages du dépôt (`guides/publier`) et leur `sidebarTitle` éventuel (champ Mintlify). */
-function scanPages(contentDir: string): Map<string, string | null> {
-  const pages = new Map<string, string | null>()
+/** Ce que le frontmatter d'une page change dans la barre : `sidebarTitle` et `tag` (champs Mintlify). */
+type PageMeta = { label: string | null; tag: string | null }
+
+/** Pages du dépôt (`guides/publier`) et leurs réglages de barre latérale. */
+function scanPages(contentDir: string): Map<string, PageMeta> {
+  const pages = new Map<string, PageMeta>()
   const walk = (dir: string) => {
     for (const name of readdirSync(dir)) {
       if (name.startsWith(".") || IGNORED_DIRS.has(name)) continue
@@ -108,8 +112,9 @@ function scanPages(contentDir: string): Map<string, string | null> {
           .replaceAll("\\", "/")
           .replace(/\.mdx?$/, "")
         const frontmatter = /^---\r?\n([\s\S]*?)\r?\n---/.exec(readFileSync(path, "utf8"))?.[1] ?? ""
-        const label = /^sidebarTitle:\s*["']?(.+?)["']?\s*$/m.exec(frontmatter)?.[1] ?? null
-        pages.set(pageToSlug(page), label)
+        const field = (name: string) =>
+          new RegExp(`^${name}:\\s*["']?(.+?)["']?\\s*$`, "m").exec(frontmatter)?.[1] ?? null
+        pages.set(pageToSlug(page), { label: field("sidebarTitle"), tag: field("tag") })
       }
     }
   }
@@ -117,15 +122,21 @@ function scanPages(contentDir: string): Map<string, string | null> {
   return pages
 }
 
-type SidebarItem = { slug: string; label?: string } | { label: string; collapsed: boolean; items: Array<SidebarItem> }
+type SidebarItem =
+  | { slug: string; label?: string; badge?: { text: string; variant: "note" } }
+  | { label: string; collapsed: boolean; items: Array<SidebarItem> }
 
-function sidebarItems(items: Array<NavItem>, labels: ReadonlyMap<string, string | null>): Array<SidebarItem> {
+function sidebarItems(items: Array<NavItem>, labels: ReadonlyMap<string, PageMeta>): Array<SidebarItem> {
   return items.map((item) => {
     if (item.type === "group")
       return { label: item.label, collapsed: !item.expanded, items: sidebarItems(item.items, labels) }
     const slug = pageToSlug(item.page)
-    const label = labels.get(slug)
-    return label ? { slug, label } : { slug }
+    const meta = labels.get(slug)
+    return {
+      slug,
+      ...(meta?.label ? { label: meta.label } : {}),
+      ...(meta?.tag ? { badge: { text: meta.tag.slice(0, 16), variant: "note" as const } } : {}),
+    }
   })
 }
 
@@ -133,10 +144,7 @@ function sidebarItems(items: Array<NavItem>, labels: ReadonlyMap<string, string
  * Une entrée de premier niveau par couple (version, onglet), dans l'ordre de l'arbre ;
  * `route-data.ts` ne garde ensuite que celle de la page affichée.
  */
-export function starlightSidebar(
-  tree: NavTree,
-  labels: ReadonlyMap<string, string | null> = new Map(),
-): Array<SidebarItem> {
+export function starlightSidebar(tree: NavTree, labels: ReadonlyMap<string, PageMeta> = new Map()): Array<SidebarItem> {
   const sections = tree.versions.flatMap((version) => version.tabs)
   if (sections.length === 1) return sidebarItems(sections[0]!.items, labels)
   return tree.versions.flatMap((version) =>
@@ -242,8 +250,14 @@ export function createAstroConfig(options: SiteOptions = readSiteOptions()): Ast
     site: options.site ?? undefined,
     ...(base ? { base } : {}),
     trailingSlash: "always",
+    devToolbar: { enabled: false },
     redirects: astroRedirects(config.redirects ?? [], base),
-    markdown: { processor: unified({ remarkPlugins: [remarkAutoImport, [remarkBaseLinks, { base }]] }) },
+    markdown: {
+      processor: unified({
+        remarkPlugins: [remarkAutoImport, [remarkBaseLinks, { base }]],
+        rehypePlugins: [rehypeDocsContent],
+      }),
+    },
     vite: {
       plugins: [virtualConfigPlugin(data)],
       server: { fs: { allow: [options.contentDir, file("..")] } },
@@ -264,13 +278,57 @@ export function createAstroConfig(options: SiteOptions = readSiteOptions()): Ast
         routeMiddleware: file("./overrides/route-data.ts"),
         components: {
           Head: file("./overrides/Head.astro"),
+          Header: file("./overrides/Header.astro"),
+          ThemeProvider: file("./overrides/ThemeProvider.astro"),
+          Search: file("./overrides/Search.astro"),
           Sidebar: file("./overrides/Sidebar.astro"),
           PageTitle: file("./overrides/PageTitle.astro"),
           PageFrame: file("./overrides/PageFrame.astro"),
-          SocialIcons: file("./overrides/SocialIcons.astro"),
+          PageSidebar: file("./overrides/PageSidebar.astro"),
+          TwoColumnContent: file("./overrides/TwoColumnContent.astro"),
           Footer: file("./overrides/Footer.astro"),
         },
-        expressiveCode: { themes: ["github-dark-default", "github-light-default"] },
+        expressiveCode: {
+          // Clair d'abord (thème par défaut du site) ; le sombre suit `data-hd-theme` (ThemeProvider).
+          themes: ["github-light-default", "github-dark-default"],
+          useDarkModeMediaQuery: false,
+          themeCssSelector: (theme) => (theme.type === "dark" ? '[data-hd-theme="dark"]' : false),
+          // Blocs dessinés par theme.css (filet, en-tête, actions) : un cadre unique pour le
+          // shell comme pour le reste. Le bouton Copier d'Expressive Code reste dans le HTML,
+          // caché : son `data-code` porte le texte exact (build/markdown.ts, widget/code.ts).
+          defaultProps: { frame: "code" },
+          styleOverrides: {
+            borderRadius: "1rem",
+            borderColor: "var(--hd-border)",
+            borderWidth: "1px",
+            codeBackground: "var(--hd-code-bg)",
+            codeFontFamily: "var(--hd-font-mono)",
+            codeFontSize: "0.8125rem",
+            codeLineHeight: "1.7",
+            codePaddingBlock: "0.875rem",
+            codePaddingInline: "1rem",
+            uiFontFamily: "var(--hd-font-sans)",
+            uiFontSize: "0.8125rem",
+            frames: {
+              frameBoxShadowCssValue: "none",
+              editorTabBarBackground: "var(--hd-code-header)",
+              editorTabBarBorderBottomColor: "var(--hd-border)",
+              editorActiveTabBackground: "transparent",
+              editorActiveTabForeground: "var(--hd-fg)",
+              editorActiveTabBorderColor: "transparent",
+              editorActiveTabIndicatorTopColor: "transparent",
+              editorActiveTabIndicatorBottomColor: "var(--hd-accent)",
+              editorActiveTabIndicatorHeight: "2px",
+              editorTabBorderRadius: "0",
+              editorBackground: "var(--hd-code-bg)",
+              terminalBackground: "var(--hd-code-bg)",
+              terminalTitlebarBackground: "var(--hd-code-header)",
+              terminalTitlebarBorderBottomColor: "var(--hd-border)",
+              terminalTitlebarForeground: "var(--hd-muted-fg)",
+              terminalTitlebarDotsOpacity: "0",
+            },
+          },
+        },
         pagination: true,
       }),
       machineReadableOutputs(data, options),

package/src/overrides/Assistant.astro

@@ -1,39 +1,25 @@
 ---
 import data from "virtual:hgdc-docs/config"
 
-// Widget de l'assistant : panneau latéral non modal (la page reste lisible), plein écran
-// sur téléphone. Logique dans `../widget/client.ts`.
+import Icon from "./Icon.astro"
+
+// Assistant. Fermé : une barre « Pose une question… » au bas du contenu. Ouvert : un
+// panneau à droite qui pousse la page (une feuille qui monte du bas sur téléphone).
+// Logique dans `../widget/client.ts`.
 const endpoint = new URL("/api/v1/ask", data.config.assistant?.endpoint ?? data.apiEndpoint).toString()
 ---
 
 <hgdc-assistant data-endpoint={endpoint} data-project={data.config.project} data-name={data.config.name}>
-  <button type="button" class="hgdc-launcher" data-open aria-haspopup="dialog" aria-expanded="false">
-    <svg aria-hidden="true" viewBox="0 0 24 24" width="18" height="18">
-      <path d="M12 3l1.9 4.6L18.5 9.5l-4.6 1.9L12 16l-1.9-4.6L5.5 9.5l4.6-1.9z" fill="currentColor"></path>
-      <path d="M18.5 15l.8 1.9 1.9.8-1.9.8-.8 1.9-.8-1.9-1.9-.8 1.9-.8z" fill="currentColor"></path>
-    </svg>
-    <span>Demander à l'IA</span>
-    <kbd class="hgdc-kbd" data-shortcut aria-hidden="true">Ctrl I</kbd>
-  </button>
-
-  <section class="hgdc-panel" role="dialog" aria-modal="false" aria-labelledby="hgdc-assistant-title" hidden>
+  <section class="hgdc-panel" role="dialog" aria-modal="false" aria-labelledby="hgdc-assistant-title" data-panel inert>
+    <div class="hgdc-panel__grip" aria-hidden="true"></div>
     <header class="hgdc-panel__header">
-      <div>
-        <h2 id="hgdc-assistant-title">Assistant</h2>
-        <p>Répond à partir de cette documentation, avec ses sources.</p>
-      </div>
+      <h2 id="hgdc-assistant-title"><Icon name="sparkles" />Assistant</h2>
       <div class="hgdc-panel__tools">
-        <button type="button" class="hgdc-icon-button" data-reset aria-label="Nouvelle conversation" hidden>
-          <svg aria-hidden="true" viewBox="0 0 24 24" width="18" height="18"
-            ><path d="M4 12a8 8 0 1 0 2.3-5.7M4 4v4h4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"
-            ></path></svg
-          >
+        <button type="button" class="hd-icon-button" data-reset aria-label="Nouvelle conversation" title="Nouvelle conversation" hidden>
+          <Icon name="rotate" />
         </button>
-        <button type="button" class="hgdc-icon-button" data-close aria-label="Fermer l'assistant">
-          <svg aria-hidden="true" viewBox="0 0 24 24" width="18" height="18"
-            ><path d="M6 6l12 12M18 6 6 18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"
-            ></path></svg
-          >
+        <button type="button" class="hd-icon-button" data-close aria-label="Fermer l'assistant" title="Fermer (Échap)">
+          <Icon name="x" />
         </button>
       </div>
     </header>
@@ -41,26 +27,18 @@ const endpoint = new URL("/api/v1/ask", data.config.assistant?.endpoint ?? data.
     <div class="hgdc-panel__body" data-log aria-live="polite">
       <div class="hgdc-empty" data-empty>
         <p class="hgdc-empty__title">Pose ta question sur {data.config.name}.</p>
-        <p>
-          Je cherche dans les pages de cette documentation et je cite mes sources. Si la réponse n'y est pas, je te le
-          dis.
-        </p>
+        <p>Je cherche dans les pages de cette documentation et je cite mes sources. Si la réponse n'y est pas, je te le dis.</p>
       </div>
     </div>
 
     <form class="hgdc-panel__form" data-form>
       <label class="sr-only" for="hgdc-question">Ta question</label>
-      <textarea id="hgdc-question" data-input rows="1" maxlength="1000" placeholder="Comment publier ma doc ?" required
-      ></textarea>
-      <button type="submit" class="hgdc-send" data-send aria-label="Envoyer la question">
-        <svg aria-hidden="true" viewBox="0 0 24 24" width="18" height="18"
-          ><path d="M12 19V5M5 12l7-7 7 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-          ></path></svg
-        >
-      </button>
+      <textarea id="hgdc-question" data-input rows="1" maxlength="1000" placeholder="Pose une question…" required></textarea>
+      <button type="submit" class="hd-send" data-send aria-label="Envoyer la question"><Icon name="arrow-up" size={16} /></button>
     </form>
     <p class="hgdc-panel__note">
-      Réponses générées par IA (Claude, d'Anthropic), à vérifier. Les questions sont conservées 90 jours pour améliorer cette documentation.
+      Réponses générées par IA (Claude, d'Anthropic), à vérifier. Les questions sont conservées 90 jours pour améliorer
+      cette documentation.
     </p>
   </section>
 </hgdc-assistant>