feat(guides): rebuild the hub as a directory, and restore the theme's font tokens

patches/@aziontech__webkit@5.0.0.patch

@@ -1,5 +1,5 @@
 diff --git a/package.json b/package.json
-index b2b7bc4..1d6cab3 100644
+index b2b7bc46f632597afdc1104ddc701ab5c3aa3eb3..1d6cab340858046f4d112e39d0f2eaed47410002 100644
 --- a/package.json
 +++ b/package.json
 @@ -348,6 +348,7 @@
@@ -11,7 +11,7 @@ index b2b7bc4..1d6cab3 100644
      "./vite": "./src/vite/index.js"
    }
 diff --git a/src/components/documentation/doc-page-header/doc-page-header.vue b/src/components/documentation/doc-page-header/doc-page-header.vue
-index bd7aee0..bf37ca2 100644
+index bd7aee09c96243e3d40418608c2e3c579a25b309..bf37ca2e51cda1e24ec7fbf790c5bc40a760607f 100644
 --- a/src/components/documentation/doc-page-header/doc-page-header.vue
 +++ b/src/components/documentation/doc-page-header/doc-page-header.vue
 @@ -41,6 +41,10 @@
@@ -53,7 +53,7 @@ index bd7aee0..bf37ca2 100644
          </span>
        </p>
 diff --git a/src/components/documentation/doc-prose/doc-prose.vue b/src/components/documentation/doc-prose/doc-prose.vue
-index 090fd5e..f79ea6d 100644
+index 090fd5e0dad546180edb21b4a6d3cb0dde0dd7b1..f79ea6d19780b927a12f717b60c2c6ee80f1e103 100644
 --- a/src/components/documentation/doc-prose/doc-prose.vue
 +++ b/src/components/documentation/doc-prose/doc-prose.vue
 @@ -1,6 +1,8 @@
@@ -87,7 +87,7 @@ index 090fd5e..f79ea6d 100644
          enter-active-class="animate-popup-scale-in motion-reduce:animate-none"
          leave-active-class="animate-popup-scale-out motion-reduce:animate-none"
 diff --git a/src/components/documentation/doc-step/doc-step.vue b/src/components/documentation/doc-step/doc-step.vue
-index 6c963f0..640d2cf 100644
+index 6c963f0ac90595a07c58e83cb9e88c654c7dfdd8..640d2cf523441a631709ea03633e1e594e13a04a 100644
 --- a/src/components/documentation/doc-step/doc-step.vue
 +++ b/src/components/documentation/doc-step/doc-step.vue
 @@ -1,7 +1,7 @@
@@ -135,7 +135,7 @@ index 6c963f0..640d2cf 100644
          data-step-connector
          class="w-px flex-1 bg-(--border-default)"
 diff --git a/src/components/documentation/doc-steps/doc-steps.vue b/src/components/documentation/doc-steps/doc-steps.vue
-index bedd592..291587d 100644
+index bedd592536501fe4bb7cec496784b1a40020e7ed..291587d3cf4f29ddd875eb9f7a88ae2a6ece41b8 100644
 --- a/src/components/documentation/doc-steps/doc-steps.vue
 +++ b/src/components/documentation/doc-steps/doc-steps.vue
 @@ -46,6 +46,7 @@
@@ -146,8 +146,38 @@ index bedd592..291587d 100644
      :data-testid="testId"
      class="flex w-full flex-col items-start"
    >
+diff --git a/src/components/layout/sidebar/sidebar.vue b/src/components/layout/sidebar/sidebar.vue
+index fd51d19623ddc9940b10fa338fb4e42e41487ed1..a8943e38d42fdbf6732ffc4547bdbd55afb0ca19 100644
+--- a/src/components/layout/sidebar/sidebar.vue
++++ b/src/components/layout/sidebar/sidebar.vue
+@@ -157,16 +157,17 @@
+     INNER_MOTION_CLASS
+   )
+
+-  const FOOTER_REGION_CLASS = 'w-full shrink-0 px-(--spacing-md) pb-(--spacing-md)'
++  // The footer is a bar, not a padded block: one row at the header's own height, so
++  // the rail ends on the same baseline the top bar starts on. The rule belongs to the
++  // region (full-bleed across the rail); the band inside it only lays the row out.
++  const FOOTER_REGION_CLASS =
++    'flex h-(--size-14) w-full shrink-0 items-center border-t border-(--border-default) px-(--spacing-md)'
+
+   const footerBandClass = computed(() =>
+-    props.collapsible
+-      ? cn(
+-          'flex items-center gap-(--spacing-xs)',
+-          'border-t border-(--border-muted) pt-(--spacing-md)',
+-          !slots['footer'] ? 'justify-end' : undefined
+-        )
+-      : undefined
++    cn(
++      'flex min-w-0 flex-1 items-center gap-(--spacing-xs)',
++      props.collapsible && !slots['footer'] ? 'justify-end' : undefined
++    )
+   )
+
+   const scrollClass = computed(() =>
 diff --git a/src/components/navigation/dropdown/dropdown.vue b/src/components/navigation/dropdown/dropdown.vue
-index 91e42e8..0a3cba6 100644
+index 91e42e8da0ac60a784937bc248d70b620e669510..0a3cba6d2193fcdb8a210c278dd67105dd0a9748 100644
 --- a/src/components/navigation/dropdown/dropdown.vue
 +++ b/src/components/navigation/dropdown/dropdown.vue
 @@ -12,6 +12,7 @@
@@ -180,7 +210,7 @@ index 91e42e8..0a3cba6 100644
          enter-active-class="animate-popup-scale-in motion-reduce:animate-none"
          leave-active-class="animate-popup-scale-out motion-reduce:animate-none"
 diff --git a/src/components/navigation/menu/menu-sub-trigger/menu-sub-trigger.vue b/src/components/navigation/menu/menu-sub-trigger/menu-sub-trigger.vue
-index 6b29257..ec17332 100644
+index 6b29257f9aa685228948543b717e680aa7e6abaf..ec17332390bf1e1a4f17e1a3ec5e740100789099 100644
 --- a/src/components/navigation/menu/menu-sub-trigger/menu-sub-trigger.vue
 +++ b/src/components/navigation/menu/menu-sub-trigger/menu-sub-trigger.vue
 @@ -62,8 +62,9 @@
@@ -196,7 +226,7 @@ index 6b29257..ec17332 100644
    // Names the arrow: an inline arrow names the disclosure state, a drill arrow names the level it opens.
    const arrowAriaLabel = computed(() => {
 diff --git a/src/components/navigation/tab-view/tab-view-panel.vue b/src/components/navigation/tab-view/tab-view-panel.vue
-index 607875d..f8fd34b 100644
+index 607875d360f1e8fca6f6bef35dffbccac38a087c..f8fd34bd6f6652d5301ae3c9c6b8ad377f3d2778 100644
 --- a/src/components/navigation/tab-view/tab-view-panel.vue
 +++ b/src/components/navigation/tab-view/tab-view-panel.vue
 @@ -69,6 +69,10 @@
@@ -211,7 +241,7 @@ index 607875d..f8fd34b 100644
          motionReady.value = true
        })
 diff --git a/src/components/overlay/tooltip/tooltip.vue b/src/components/overlay/tooltip/tooltip.vue
-index bc46309..2a57369 100644
+index bc46309e6fd6c3734f59c7338770e02d09012eb0..2a57369713bd76f09c83cb17b806d567a5d3494e 100644
 --- a/src/components/overlay/tooltip/tooltip.vue
 +++ b/src/components/overlay/tooltip/tooltip.vue
 @@ -2,6 +2,7 @@
@@ -245,7 +275,7 @@ index bc46309..2a57369 100644
        leave-active-class="animate-popup-scale-out motion-reduce:animate-none"
 diff --git a/src/composables/use-mounted/index.ts b/src/composables/use-mounted/index.ts
 new file mode 100644
-index 0000000..c4816ed
+index 0000000000000000000000000000000000000000..c4816edb01a52d096d2e917156b831b855dedfb7
 --- /dev/null
 +++ b/src/composables/use-mounted/index.ts
 @@ -0,0 +1,22 @@

src/components/Footer.vue

@@ -42,7 +42,6 @@
 
 			<template #language>
 				<slot name="action" />
-				<slot name="theme-switch" />
 			</template>
 		</Footer>
 	</div>
@@ -89,8 +88,6 @@ defineSlots<{
 	'system-status'(): unknown;
 	/** The language switcher. */
 	action(): unknown;
-	/** The light/dark control. */
-	'theme-switch'(): unknown;
 }>();
 
 // The treatment every other brand redirect in the app carries: hover opacity, focus ring.

src/components/GuidesHomeSection.astro

@@ -1,10 +1,20 @@
 ---
+/** The guides DIRECTORY: a masthead band, then the catalog band. */
+// The masthead is the docs home's, rung for rung — the two hubs are the same kind of page.
+// The reading chrome a doc page carries (breadcrumb, last-updated, Copy as Markdown, Agent
+// setup) is deliberately absent: none of it describes a catalog.
 import { getLanguageFromURL } from '~/util';
 import { useTranslations } from '~/i18n/util';
 import type { Lang } from '~/nav/index';
 import { guidesCatalog, guidesCatalogHref } from '~/util/guidesCatalog';
 import GuidesHome, { PAGE_SIZE } from '~/components/webkit/GuidesHome.vue';
 
+interface Props {
+	/** The page's own heading; falls back to the catalogue's name. */
+	title: string;
+}
+
+const { title } = Astro.props;
 const lang = getLanguageFromURL(Astro.url.pathname) as Lang;
 const t = useTranslations(Astro);
 const { rows, kinds, products } = await guidesCatalog(lang);
@@ -31,13 +41,35 @@ const labels = {
 	countMany: t('guides.count.many'),
 	clear: t('guides.clear'),
 	empty: t('guides.empty'),
+	emptyHint: t('guides.emptyHint'),
+	error: t('guides.error'),
+	retry: t('guides.retry'),
+	loading: t('guides.loading'),
 	pagination: t('guides.pagination'),
 	previous: t('guides.previous'),
 	next: t('guides.next'),
 	range: t('guides.range'),
 };
 ---
 
+{
+	/*
+	  The lede comes from the page's own MDX so the sentence — and the link inside it —
+	  stays in the file a translator edits. `[&_p]:m-0` is what lets it arrive as a
+	  paragraph without opening a second margin under the one this header already sets.
+	*/
+}
+<header class="mb-(--spacing-xxl) sm:mb-16">
+	<h1 class="m-0 max-w-(--container-2xl) text-balance text-heading-2xl text-(--text-default)">
+		{title}
+	</h1>
+	<div
+		class="mt-(--spacing-lg) max-w-(--container-xl) text-pretty text-body-lg leading-relaxed text-(--text-muted) [&_a:hover]:text-(--text-link-hover) [&_a]:text-(--text-link-color) [&_a]:underline [&_a]:underline-offset-2 [&_p]:m-0"
+	>
+		<slot />
+	</div>
+</header>
+
 <GuidesHome
 	client:load
 	initial={rows.slice(0, PAGE_SIZE)}

src/components/LeftSidebar/LeftSidebar.astro

@@ -1,7 +1,7 @@
 ---
+import DocsSidebar from '~/components/webkit/DocsSidebar.vue';
 import { useTranslations } from '~/i18n/util';
 import type { SidebarModel } from '~/nav/index';
-import DocsSidebar from '~/components/webkit/DocsSidebar.vue';
 
 export interface Props {
 	sidebar: SidebarModel;

src/components/homes/DocsHome.astro

@@ -31,7 +31,7 @@ const { hero, interfaceSection, sections } = content;
   under it (644) so it breaks to two even lines instead of a stub.
 */
 }
-<header data-doc-chrome class="mb-12 sm:mb-16">
+<header data-doc-chrome class="mb-(--spacing-12) sm:mb-(--spacing-16)">
 	<h1 class="m-0 max-w-(--container-2xl) text-balance text-heading-2xl text-(--text-default)">
 		{hero.title}
 	</h1>

src/components/webkit/AgentMark.vue

@@ -2,6 +2,7 @@
 	<!-- eslint-disable vue/no-v-html -- body is the hardcoded MARKS constant below, never user input -->
 	<svg
 		v-if="body"
+		v-bind="$attrs"
 		:viewBox="mark.viewBox"
 		xmlns="http://www.w3.org/2000/svg"
 		role="img"
@@ -12,6 +13,7 @@
 	<!-- eslint-enable vue/no-v-html -->
 	<svg
 		v-else
+		v-bind="$attrs"
 		:viewBox="mark.viewBox"
 		xmlns="http://www.w3.org/2000/svg"
 		role="img"
@@ -27,6 +29,13 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
+/*
+ * Own the root: the template's v-if/v-else pair is wrapped in eslint pragma comments,
+ * which count as root nodes in a dev build and make this a fragment — and Vue drops
+ * automatic attribute inheritance on a fragment, silently discarding a consumer's class.
+ */
+defineOptions({ name: 'AgentMark', inheritAttrs: false });
+
 export type AgentName =
 	| 'claude'
 	| 'codex'

src/components/webkit/DocsSidebar.vue

@@ -1,17 +1,11 @@
 <template>
-	<!-- eslint-disable webkit/no-style-override -- `--rail-w` IS the collapse
-	     mechanism: the computed style drives the width the rail animates to, and
-	     the class is what consumes it. Composing this inside a slot is not
-	     possible, so the override stays, deliberately and in one place. -->
 	<Sidebar
 		ref="sidebarRef"
 		v-model:collapsed="collapsed"
 		v-model:width="width"
 		resizable
 		collapsible
 		:aria-label="ariaLabel"
-		class="h-full w-(--rail-w)"
-		:style="railWidthStyle"
 	>
 		<DocsSidebarMenu
 			presentation
@@ -21,14 +15,19 @@
 			:filter="filter"
 			:no-matches-label="noMatchesLabel"
 		/>
+
+		<template #footer>
+			<DropdownThemeSwitcher />
+		</template>
 	</Sidebar>
 </template>
 
 <script setup lang="ts">
 import Sidebar from '@aziontech/webkit/sidebar';
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
 import DocsSidebarMenu from './DocsSidebarMenu.vue';
+import DropdownThemeSwitcher from './DropdownThemeSwitcher.vue';
 
 import type { MenuGroupNode, SidebarHeader as SidebarHeaderModel } from '~/nav/resolve';
 
@@ -62,14 +61,6 @@ const width = ref<number | null>(null);
 /** The webkit `Sidebar` instance; only its `measure()` affordance is used. */
 const sidebarRef = ref<{ measure?: () => void } | null>(null);
 
-const railWidthStyle = computed(() => ({
-	'--rail-w': collapsed.value
-		? '0px'
-		: width.value != null
-		? `${width.value}px`
-		: 'var(--container-xs)',
-}));
-
 const railQuery = typeof window !== 'undefined' ? window.matchMedia('(min-width: 1024px)') : null;
 const isRail = ref(false);
 const remeasure = () => {

src/components/webkit/DropdownThemeSwitcher.vue

@@ -1,7 +1,5 @@
 <template>
-	<span class="inline-flex h-8 items-center">
-		<ThemeSwitcher v-model:value="mode" aria-label="Theme" />
-	</span>
+	<ThemeSwitcher v-model:value="mode" aria-label="Theme" />
 </template>
 
 <script setup>