matrix-design-system 1.1.1 → 2.0.0

package/README.md

@@ -77,13 +77,52 @@ import NextImage from "next/image";
 
 <InternalLink to="/blog" linkComponent={NextLink}>Blog</InternalLink>
 <ImageGlow src={photo} alt="" imageComponent={NextImage} />
-<Menu currentPath={usePathname()} navHrefs={...} linkComponent={NextLink} />
+<Menu currentPath={usePathname()} entries={entries} linkComponent={NextLink} />
 ```
 
 Without them you get a real `<a>` and a real `<img>` — `PlainImage` reproduces `next/image`'s
 `fill`, placeholder and lazy-loading behaviour — so the components work anywhere, just without
 client-side routing or image optimisation.
 
+## Navigation is injected
+
+`Menu` and `Footer` know nothing about your site: you hand them the navigation.
+
+```tsx
+const entries: MenuEntry[] = [
+    { label: "Home", to: "/" },
+    {
+        label: "Blog",
+        groups: [
+            { label: "Posts", items: [{ label: "Latest posts", to: "/blog", onClick: trackBlog }] },
+            { label: "Elsewhere", items: [{ label: "Docs", to: "https://example.com", external: true }] },
+        ],
+    },
+];
+
+<Menu currentPath={pathname} entries={entries} pinnedOnPaths={["/chat"]} linkComponent={NextLink} />
+<Footer author="Jane" links={[{ label: "Home", to: "/" }]} contactHref="/contact" socialLinks={social} />
+```
+
+An entry is either a link (`MenuLink`) or a dropdown of grouped links (`MenuDropdown`, told apart by its
+`groups`). A link is marked selected when its `to` equals `currentPath`, or when `currentPath` starts with one of
+its optional `activePathPrefixes` (for a detail route that lives outside the link's own path, e.g. an "Authors"
+link to `/blog/authors` with `activePathPrefixes: ["/blog/author/"]`); external links never are, and a dropdown
+holding a selected link is highlighted too. A link's
+`onClick` is where tracking goes, and the mobile panel closes on click by itself. The menu hides on scroll
+except on `pinnedOnPaths`.
+
+### Migrating from 1.x
+
+- `Menu`: `navHrefs` and `tracking` are gone. Build a `MenuEntry[]` (labels and hrefs included) and pass it as
+  `entries`; each former `onTrack*` callback becomes the `onClick` of its link. The chat path that used to be
+  hardcoded is now `pinnedOnPaths={[chatPath]}`. The Authors link that used to stay selected on author pages is
+  now `{ label: "Authors", to: "/blog/authors", activePathPrefixes: ["/blog/author/"] }`.
+- `Footer`: `navHrefs` and `navTracking` are gone. Pass `links` (`{ label, to, onClick? }`, Home included) and
+  `contactHref`. `socialTracking` is unchanged.
+- The exported types `MenuNavHrefs`, `MenuTrackingCallbacks`, `FooterNavHrefs` and `FooterNavTrackingCallbacks`
+  are removed; `MenuEntry`, `MenuLink`, `MenuGroup`, `MenuDropdown` and `FooterLink` replace them.
+
 ## No provider required
 
 There is no theme or context provider to wrap anything in. Components read their styling from CSS

package/dist/index.d.mts

@@ -109,10 +109,10 @@ import "./molecules/video/self-hosted-video/index.mjs";
 import { Youtube } from "./molecules/video/youtube/youtube.mjs";
 import "./molecules/video/youtube/index.mjs";
 import { CookieConsentBanner } from "./organism/cookie-consent-banner/cookie-consent-banner.mjs";
-import { FooterNavTrackingCallbacks, FooterSocialTrackingCallbacks } from "./organism/footer/use-footer-store.mjs";
+import { FooterSocialTrackingCallbacks } from "./organism/footer/use-footer-store.mjs";
 import { SocialContactLinks, SocialContacts, SocialContactsProps } from "./organism/social-contacts/social-contacts.mjs";
 import "./organism/social-contacts/index.mjs";
-import { Footer, FooterNavHrefs, FooterProps } from "./organism/footer/footer.mjs";
+import { Footer, FooterLink, FooterProps } from "./organism/footer/footer.mjs";
 import "./organism/footer/index.mjs";
 import { BrandHeader, BrandHeaderProps } from "./organism/header/brand-header/brand-header.mjs";
 import "./organism/header/brand-header/index.mjs";
@@ -121,9 +121,7 @@ import "./organism/image-carousel/index.mjs";
 import { Lightbox } from "./organism/lightbox/lightbox.mjs";
 import "./organism/lightbox/index.mjs";
 import { LoadingBar } from "./organism/loading-bar/loading-bar.mjs";
-import { OsModifierKey, useOsModifierKey } from "./hooks/use-os-modifier-key.mjs";
-import { MenuTrackingCallbacks } from "./organism/menu/use-menu-store.mjs";
-import { Menu, MenuNavHrefs, MenuProps } from "./organism/menu/menu.mjs";
+import { Menu, MenuDropdown, MenuEntry, MenuGroup, MenuLink, MenuProps } from "./organism/menu/menu.mjs";
 import "./organism/menu/index.mjs";
 import { ProfileHero, ProfileHeroProps } from "./organism/profile-hero/profile-hero.mjs";
 import "./organism/profile-hero/index.mjs";
@@ -141,6 +139,7 @@ import { useLockBodyScroll } from "./hooks/use-lock-body-scroll.mjs";
 import { MATRIX_RAIN_DEFAULTS, MATRIX_RAIN_PRESETS, MatrixRainProps, MatrixRainSettings, matrixSettingsChangeEvent, readMatrixSettings, settingsToProps, writeMatrixSettings } from "./state/matrix-rain/matrix-settings.mjs";
 import { useMatrixSettingsStore } from "./hooks/use-matrix-settings-store.mjs";
 import { useMotionStore } from "./hooks/use-motion-store.mjs";
+import { OsModifierKey, useOsModifierKey } from "./hooks/use-os-modifier-key.mjs";
 import { useReadingProgress } from "./hooks/use-reading-progress.mjs";
 import { useReducedMotions } from "./hooks/use-reduced-motions.mjs";
 import { ScrollDirection, useScrollDirection } from "./hooks/use-scroll-direction.mjs";
@@ -150,4 +149,4 @@ import { CommandPaletteClose, CommandPaletteContext } from "./state/command-pale
 import { closeCommandPalette, commandPaletteCloseEvent, commandPaletteOpenEvent, openCommandPalette } from "./state/command-palette/command-palette-events.mjs";
 import { LightboxOpenDetail, lightboxOpenEvent, openLightbox } from "./state/lightbox/lightbox-events.mjs";
 import { hasMotion, motionChangeEvent, writeMotion } from "./state/motion/motion.mjs";
-export { Accordion, AnchorLink, BluePill, BluePillButton, BluePillLink, BrandHeader, type BrandHeaderProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, CallToActionExternalWithTracking, CallToActionInternalWithTracking, type CallToActionInternalWithTrackingProps, ChatIcon, Chip, type ChipProps, Close, CommandPaletteClose, CommandPaletteContext, CommandPaletteTrigger, ContentContainer, ContentProgressBar, ControlSlider, CookieConsentBanner, CopiedIcon, CopyErrorIcon, CopyIcon, Cursor, DropdownMenu, ErrorText, ExternalLink, FilterInput, type FilterInputProps, Footer, type FooterNavHrefs, type FooterNavTrackingCallbacks, type FooterProps, type FooterSocialTrackingCallbacks, FormErrorSummary, type FormErrorSummaryProps, FormField, type FormFieldProps, FormSuccessMessage, type FormSuccessMessageProps, FormTextarea, type FormTextareaProps, GlassmorphismBackground, HamburgerMenu, ImageCarousel, type ImageCarouselProps, type ImageComponent, type ImageComponentProps, ImageGlow, type ImageGlowProps, type ImagePlaceholder, type ImageSource, InputField, InternalLink, type InternalLinkProps, Label, type LabelProps, Lightbox, LightboxImage, LightboxOpenDetail, type LinkComponent, type LinkComponentProps, Loader, LoadingBar, MATRIX_RAIN_DEFAULTS, MATRIX_RAIN_PRESETS, MatrixBackground, MatrixHeaderBackground, MatrixRain, MatrixRainProps, MatrixRainSettings, MatrixTerminal, Menu, MenuItem, type MenuItemProps, type MenuNavHrefs, type MenuProps, type MenuTrackingCallbacks, MotionDiv, OsModifierKey, Overlay, type OverlayProps, type PageNavigationProps, PageTitle, PaginationNavigation, ParagraphTitleWithIcon, type PillProps, PlainImage, type PrefetchStrategy, ProfileHero, type ProfileHeroProps, ProfilePhoto, type ProfilePhotoProps, QuoteText, RedPill, RedPillButton, RedPillLink, RedPillNoReflection, RoundedIcon, ScrollDirection, SectionHeading, type SectionHeadingProps, type SegmentOption, SegmentedControl, SelfHostedVideo, SocialContact, type SocialContactLinks, type SocialContactProps, SocialContacts, type SocialContactsProps, StatCard, type StatCardProps, SuccessText, Switch, Tag, type TagProps, TerminalButton, type TerminalButtonProps, TerminalLine, TerminalListItem, type TerminalListItemProps, TerminalProgressBar, TerminalQuoteLine, Textarea, Youtube, closeCommandPalette, commandPaletteCloseEvent, commandPaletteOpenEvent, hasMotion, imageShimmerPlaceholder, lightboxOpenEvent, matrixSettingsChangeEvent, motionChangeEvent, openCommandPalette, openLightbox, readMatrixSettings, settingsToProps, useClipboardAvailable, useDeviceCapabilities, useGlassmorphism, useInView, useInViewList, useIsIOS, useLockBodyScroll, useMatrixSettingsStore, useMotionStore, useOsModifierKey, useReadingProgress, useReducedMotions, useScrollDirection, useTypewriter, useWebGpuSupported, writeMatrixSettings, writeMotion };
+export { Accordion, AnchorLink, BluePill, BluePillButton, BluePillLink, BrandHeader, type BrandHeaderProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, CallToActionExternalWithTracking, CallToActionInternalWithTracking, type CallToActionInternalWithTrackingProps, ChatIcon, Chip, type ChipProps, Close, CommandPaletteClose, CommandPaletteContext, CommandPaletteTrigger, ContentContainer, ContentProgressBar, ControlSlider, CookieConsentBanner, CopiedIcon, CopyErrorIcon, CopyIcon, Cursor, DropdownMenu, ErrorText, ExternalLink, FilterInput, type FilterInputProps, Footer, type FooterLink, type FooterProps, type FooterSocialTrackingCallbacks, FormErrorSummary, type FormErrorSummaryProps, FormField, type FormFieldProps, FormSuccessMessage, type FormSuccessMessageProps, FormTextarea, type FormTextareaProps, GlassmorphismBackground, HamburgerMenu, ImageCarousel, type ImageCarouselProps, type ImageComponent, type ImageComponentProps, ImageGlow, type ImageGlowProps, type ImagePlaceholder, type ImageSource, InputField, InternalLink, type InternalLinkProps, Label, type LabelProps, Lightbox, LightboxImage, LightboxOpenDetail, type LinkComponent, type LinkComponentProps, Loader, LoadingBar, MATRIX_RAIN_DEFAULTS, MATRIX_RAIN_PRESETS, MatrixBackground, MatrixHeaderBackground, MatrixRain, MatrixRainProps, MatrixRainSettings, MatrixTerminal, Menu, type MenuDropdown, type MenuEntry, type MenuGroup, MenuItem, type MenuItemProps, type MenuLink, type MenuProps, MotionDiv, OsModifierKey, Overlay, type OverlayProps, type PageNavigationProps, PageTitle, PaginationNavigation, ParagraphTitleWithIcon, type PillProps, PlainImage, type PrefetchStrategy, ProfileHero, type ProfileHeroProps, ProfilePhoto, type ProfilePhotoProps, QuoteText, RedPill, RedPillButton, RedPillLink, RedPillNoReflection, RoundedIcon, ScrollDirection, SectionHeading, type SectionHeadingProps, type SegmentOption, SegmentedControl, SelfHostedVideo, SocialContact, type SocialContactLinks, type SocialContactProps, SocialContacts, type SocialContactsProps, StatCard, type StatCardProps, SuccessText, Switch, Tag, type TagProps, TerminalButton, type TerminalButtonProps, TerminalLine, TerminalListItem, type TerminalListItemProps, TerminalProgressBar, TerminalQuoteLine, Textarea, Youtube, closeCommandPalette, commandPaletteCloseEvent, commandPaletteOpenEvent, hasMotion, imageShimmerPlaceholder, lightboxOpenEvent, matrixSettingsChangeEvent, motionChangeEvent, openCommandPalette, openLightbox, readMatrixSettings, settingsToProps, useClipboardAvailable, useDeviceCapabilities, useGlassmorphism, useInView, useInViewList, useIsIOS, useLockBodyScroll, useMatrixSettingsStore, useMotionStore, useOsModifierKey, useReadingProgress, useReducedMotions, useScrollDirection, useTypewriter, useWebGpuSupported, writeMatrixSettings, writeMotion };

package/dist/organism/footer/footer.d.mts

@@ -1,24 +1,23 @@
 import { LinkComponent } from "../../atoms/links/anchor-link/anchor-link.mjs";
 import "../../atoms/links/anchor-link/index.mjs";
-import { FooterNavTrackingCallbacks, FooterSocialTrackingCallbacks } from "./use-footer-store.mjs";
+import { FooterSocialTrackingCallbacks } from "./use-footer-store.mjs";
 import { SocialContactLinks } from "../social-contacts/social-contacts.mjs";
 import "../social-contacts/index.mjs";
 import { FC } from "react";
 //#region src/organism/footer/footer.d.ts
-export interface FooterNavHrefs {
-  blog: string;
-  art: string;
-  aboutMe: string;
-  archive: string;
-  tags: string;
-  contact: string;
+export interface FooterLink {
+  label: string;
+  to: string;
+  onClick?: () => void;
 }
 export interface FooterProps {
   linkComponent?: LinkComponent;
   author: string;
-  navHrefs: FooterNavHrefs;
+  /** The navigation links, in display order. */
+  links: FooterLink[];
+  /** Where the contact call to action of the social contacts leads. */
+  contactHref: string;
   socialLinks: SocialContactLinks;
-  navTracking?: FooterNavTrackingCallbacks;
   socialTracking?: FooterSocialTrackingCallbacks;
 }
 export declare const Footer: FC<FooterProps>;

package/dist/organism/footer/footer.mjs

@@ -7,125 +7,49 @@ import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/organism/footer/footer.tsx
 const Footer = (t0) => {
-	const $ = c(52);
-	const { author, navHrefs, socialLinks, navTracking, socialTracking, linkComponent } = t0;
-	const { effects } = useFooterStore(navTracking, socialTracking);
-	const { onTrackHome, onTrackBlog, onTrackArt, onTrackAboutMe, onTrackArchive, onTrackTags, onTrackGithub, onTrackLinkedin, onTrackContact, onTrackMedium, onTrackDevto, onTrackTwitter, onTrackFacebook, onTrackInstagram } = effects;
+	const $ = c(29);
+	const { author, links, contactHref, socialLinks, socialTracking, linkComponent } = t0;
+	const { effects } = useFooterStore(socialTracking);
+	const { onTrackGithub, onTrackLinkedin, onTrackContact, onTrackMedium, onTrackDevto, onTrackTwitter, onTrackFacebook, onTrackInstagram } = effects;
 	let t1;
-	if ($[0] !== linkComponent || $[1] !== onTrackHome) {
-		t1 = /* @__PURE__ */ jsx(MenuItem, {
-			linkComponent,
-			to: "/",
-			onClick: onTrackHome,
-			selected: false,
-			children: "Home"
-		});
+	if ($[0] !== linkComponent || $[1] !== links) {
+		let t2;
+		if ($[3] !== linkComponent) {
+			t2 = (link) => /* @__PURE__ */ jsx(MenuItem, {
+				linkComponent,
+				to: link.to,
+				onClick: link.onClick,
+				selected: false,
+				children: link.label
+			}, link.label);
+			$[3] = linkComponent;
+			$[4] = t2;
+		} else t2 = $[4];
+		t1 = links.map(t2);
 		$[0] = linkComponent;
-		$[1] = onTrackHome;
+		$[1] = links;
 		$[2] = t1;
 	} else t1 = $[2];
 	let t2;
-	if ($[3] !== linkComponent || $[4] !== navHrefs.blog || $[5] !== onTrackBlog) {
-		t2 = /* @__PURE__ */ jsx(MenuItem, {
-			linkComponent,
-			to: navHrefs.blog,
-			onClick: onTrackBlog,
-			selected: false,
-			children: "Blog"
+	if ($[5] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			className: "grid w-full grid-cols-2 gap-3 px-5 py-7 sm:mx-auto sm:max-w-4xl sm:auto-cols-auto sm:grid-flow-col sm:grid-cols-none sm:justify-center",
+			children: t1
 		});
-		$[3] = linkComponent;
-		$[4] = navHrefs.blog;
-		$[5] = onTrackBlog;
+		$[5] = t1;
 		$[6] = t2;
 	} else t2 = $[6];
 	let t3;
-	if ($[7] !== linkComponent || $[8] !== navHrefs.art || $[9] !== onTrackArt) {
-		t3 = /* @__PURE__ */ jsx(MenuItem, {
-			linkComponent,
-			to: navHrefs.art,
-			onClick: onTrackArt,
-			selected: false,
-			children: "Art"
-		});
-		$[7] = linkComponent;
-		$[8] = navHrefs.art;
-		$[9] = onTrackArt;
-		$[10] = t3;
-	} else t3 = $[10];
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx("hr", {});
+		$[7] = t3;
+	} else t3 = $[7];
 	let t4;
-	if ($[11] !== linkComponent || $[12] !== navHrefs.aboutMe || $[13] !== onTrackAboutMe) {
-		t4 = /* @__PURE__ */ jsx(MenuItem, {
-			linkComponent,
-			to: navHrefs.aboutMe,
-			onClick: onTrackAboutMe,
-			selected: false,
-			children: "About Me"
-		});
-		$[11] = linkComponent;
-		$[12] = navHrefs.aboutMe;
-		$[13] = onTrackAboutMe;
-		$[14] = t4;
-	} else t4 = $[14];
-	let t5;
-	if ($[15] !== linkComponent || $[16] !== navHrefs.archive || $[17] !== onTrackArchive) {
-		t5 = /* @__PURE__ */ jsx(MenuItem, {
-			linkComponent,
-			to: navHrefs.archive,
-			onClick: onTrackArchive,
-			selected: false,
-			children: "Archive"
-		});
-		$[15] = linkComponent;
-		$[16] = navHrefs.archive;
-		$[17] = onTrackArchive;
-		$[18] = t5;
-	} else t5 = $[18];
-	let t6;
-	if ($[19] !== linkComponent || $[20] !== navHrefs.tags || $[21] !== onTrackTags) {
-		t6 = /* @__PURE__ */ jsx(MenuItem, {
-			linkComponent,
-			to: navHrefs.tags,
-			onClick: onTrackTags,
-			selected: false,
-			children: "Tags"
-		});
-		$[19] = linkComponent;
-		$[20] = navHrefs.tags;
-		$[21] = onTrackTags;
-		$[22] = t6;
-	} else t6 = $[22];
-	let t7;
-	if ($[23] !== t1 || $[24] !== t2 || $[25] !== t3 || $[26] !== t4 || $[27] !== t5 || $[28] !== t6) {
-		t7 = /* @__PURE__ */ jsxs("div", {
-			className: "grid w-full grid-cols-2 gap-3 px-5 py-7 sm:mx-auto sm:max-w-4xl sm:grid-cols-[repeat(6,auto)] sm:justify-center",
-			children: [
-				t1,
-				t2,
-				t3,
-				t4,
-				t5,
-				t6
-			]
-		});
-		$[23] = t1;
-		$[24] = t2;
-		$[25] = t3;
-		$[26] = t4;
-		$[27] = t5;
-		$[28] = t6;
-		$[29] = t7;
-	} else t7 = $[29];
-	let t8;
-	if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
-		t8 = /* @__PURE__ */ jsx("hr", {});
-		$[30] = t8;
-	} else t8 = $[30];
-	let t9;
-	if ($[31] !== linkComponent || $[32] !== navHrefs.contact || $[33] !== onTrackContact || $[34] !== onTrackDevto || $[35] !== onTrackFacebook || $[36] !== onTrackGithub || $[37] !== onTrackInstagram || $[38] !== onTrackLinkedin || $[39] !== onTrackMedium || $[40] !== onTrackTwitter || $[41] !== socialLinks) {
-		t9 = /* @__PURE__ */ jsx(SocialContacts, {
+	if ($[8] !== contactHref || $[9] !== linkComponent || $[10] !== onTrackContact || $[11] !== onTrackDevto || $[12] !== onTrackFacebook || $[13] !== onTrackGithub || $[14] !== onTrackInstagram || $[15] !== onTrackLinkedin || $[16] !== onTrackMedium || $[17] !== onTrackTwitter || $[18] !== socialLinks) {
+		t4 = /* @__PURE__ */ jsx(SocialContacts, {
 			linkComponent,
 			links: socialLinks,
-			contactHref: navHrefs.contact,
+			contactHref,
 			onTrackGithub,
 			onTrackLinkedin,
 			onTrackContact,
@@ -135,59 +59,59 @@ const Footer = (t0) => {
 			onTrackFacebook,
 			onTrackInstagram
 		});
-		$[31] = linkComponent;
-		$[32] = navHrefs.contact;
-		$[33] = onTrackContact;
-		$[34] = onTrackDevto;
-		$[35] = onTrackFacebook;
-		$[36] = onTrackGithub;
-		$[37] = onTrackInstagram;
-		$[38] = onTrackLinkedin;
-		$[39] = onTrackMedium;
-		$[40] = onTrackTwitter;
-		$[41] = socialLinks;
-		$[42] = t9;
-	} else t9 = $[42];
-	const t10 = `> Made with 💝 by ${author} 'Chicio'`;
-	let t11;
-	if ($[43] === Symbol.for("react.memo_cache_sentinel")) {
-		t11 = /* @__PURE__ */ jsx(Cursor, {});
-		$[43] = t11;
-	} else t11 = $[43];
-	let t12;
-	if ($[44] !== t10) {
-		t12 = /* @__PURE__ */ jsxs(TerminalLine, { children: [t10, t11] });
-		$[44] = t10;
-		$[45] = t12;
-	} else t12 = $[45];
-	let t13;
-	if ($[46] !== t12 || $[47] !== t9) {
-		t13 = /* @__PURE__ */ jsxs("div", {
+		$[8] = contactHref;
+		$[9] = linkComponent;
+		$[10] = onTrackContact;
+		$[11] = onTrackDevto;
+		$[12] = onTrackFacebook;
+		$[13] = onTrackGithub;
+		$[14] = onTrackInstagram;
+		$[15] = onTrackLinkedin;
+		$[16] = onTrackMedium;
+		$[17] = onTrackTwitter;
+		$[18] = socialLinks;
+		$[19] = t4;
+	} else t4 = $[19];
+	const t5 = `> Made with 💝 by ${author} 'Chicio'`;
+	let t6;
+	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(Cursor, {});
+		$[20] = t6;
+	} else t6 = $[20];
+	let t7;
+	if ($[21] !== t5) {
+		t7 = /* @__PURE__ */ jsxs(TerminalLine, { children: [t5, t6] });
+		$[21] = t5;
+		$[22] = t7;
+	} else t7 = $[22];
+	let t8;
+	if ($[23] !== t4 || $[24] !== t7) {
+		t8 = /* @__PURE__ */ jsxs("div", {
 			className: "from-general-background-light to-primary-color-dark flex w-full flex-col items-center justify-center gap-3 bg-gradient-to-b px-4 py-6",
-			children: [t9, t12]
+			children: [t4, t7]
 		});
-		$[46] = t12;
-		$[47] = t9;
-		$[48] = t13;
-	} else t13 = $[48];
-	let t14;
-	if ($[49] !== t13 || $[50] !== t7) {
-		t14 = /* @__PURE__ */ jsx("footer", {
+		$[23] = t4;
+		$[24] = t7;
+		$[25] = t8;
+	} else t8 = $[25];
+	let t9;
+	if ($[26] !== t2 || $[27] !== t8) {
+		t9 = /* @__PURE__ */ jsx("footer", {
 			className: "bg-primary-dark border-t-accent relative w-full shrink-0 snap-start border-t-2 border-solid shadow-lg",
 			children: /* @__PURE__ */ jsxs("div", {
 				className: "flex w-full flex-col items-center",
 				children: [
-					t7,
-					t8,
-					t13
+					t2,
+					t3,
+					t8
 				]
 			})
 		});
-		$[49] = t13;
-		$[50] = t7;
-		$[51] = t14;
-	} else t14 = $[51];
-	return t14;
+		$[26] = t2;
+		$[27] = t8;
+		$[28] = t9;
+	} else t9 = $[28];
+	return t9;
 };
 //#endregion
 export { Footer };

package/dist/organism/footer/index.d.mts

@@ -1,3 +1,3 @@
-import { FooterNavTrackingCallbacks, FooterSocialTrackingCallbacks } from "./use-footer-store.mjs";
-import { Footer, FooterNavHrefs, FooterProps } from "./footer.mjs";
-export { Footer, type FooterNavHrefs, type FooterNavTrackingCallbacks, type FooterProps, type FooterSocialTrackingCallbacks };
+import { FooterSocialTrackingCallbacks } from "./use-footer-store.mjs";
+import { Footer, FooterLink, FooterProps } from "./footer.mjs";
+export { Footer, type FooterLink, type FooterProps, type FooterSocialTrackingCallbacks };

package/dist/organism/footer/use-footer-store.d.mts

@@ -1,13 +1,5 @@
 import "matrix-component-store";
 //#region src/organism/footer/use-footer-store.d.ts
-export interface FooterNavTrackingCallbacks {
-  onTrackHome?: () => void;
-  onTrackBlog?: () => void;
-  onTrackArt?: () => void;
-  onTrackAboutMe?: () => void;
-  onTrackArchive?: () => void;
-  onTrackTags?: () => void;
-}
 export interface FooterSocialTrackingCallbacks {
   onTrackGithub?: () => void;
   onTrackLinkedin?: () => void;

package/dist/organism/footer/use-footer-store.mjs

@@ -1,14 +1,8 @@
 "use client";
 import { c } from "react/compiler-runtime";
 //#region src/organism/footer/use-footer-store.ts
-const useFooterStore = (navTracking, socialTracking) => {
-	const $ = c(15);
-	const onTrackHome = navTracking?.onTrackHome;
-	const onTrackBlog = navTracking?.onTrackBlog;
-	const onTrackArt = navTracking?.onTrackArt;
-	const onTrackAboutMe = navTracking?.onTrackAboutMe;
-	const onTrackArchive = navTracking?.onTrackArchive;
-	const onTrackTags = navTracking?.onTrackTags;
+const useFooterStore = (socialTracking) => {
+	const $ = c(9);
 	const onTrackGithub = socialTracking?.onTrackGithub;
 	const onTrackLinkedin = socialTracking?.onTrackLinkedin;
 	const onTrackContact = socialTracking?.onTrackContact;
@@ -18,14 +12,8 @@ const useFooterStore = (navTracking, socialTracking) => {
 	const onTrackFacebook = socialTracking?.onTrackFacebook;
 	const onTrackInstagram = socialTracking?.onTrackInstagram;
 	let t0;
-	if ($[0] !== onTrackAboutMe || $[1] !== onTrackArchive || $[2] !== onTrackArt || $[3] !== onTrackBlog || $[4] !== onTrackContact || $[5] !== onTrackDevto || $[6] !== onTrackFacebook || $[7] !== onTrackGithub || $[8] !== onTrackHome || $[9] !== onTrackInstagram || $[10] !== onTrackLinkedin || $[11] !== onTrackMedium || $[12] !== onTrackTags || $[13] !== onTrackTwitter) {
+	if ($[0] !== onTrackContact || $[1] !== onTrackDevto || $[2] !== onTrackFacebook || $[3] !== onTrackGithub || $[4] !== onTrackInstagram || $[5] !== onTrackLinkedin || $[6] !== onTrackMedium || $[7] !== onTrackTwitter) {
 		t0 = { effects: {
-			onTrackHome,
-			onTrackBlog,
-			onTrackArt,
-			onTrackAboutMe,
-			onTrackArchive,
-			onTrackTags,
 			onTrackGithub,
 			onTrackLinkedin,
 			onTrackContact,
@@ -35,22 +23,16 @@ const useFooterStore = (navTracking, socialTracking) => {
 			onTrackFacebook,
 			onTrackInstagram
 		} };
-		$[0] = onTrackAboutMe;
-		$[1] = onTrackArchive;
-		$[2] = onTrackArt;
-		$[3] = onTrackBlog;
-		$[4] = onTrackContact;
-		$[5] = onTrackDevto;
-		$[6] = onTrackFacebook;
-		$[7] = onTrackGithub;
-		$[8] = onTrackHome;
-		$[9] = onTrackInstagram;
-		$[10] = onTrackLinkedin;
-		$[11] = onTrackMedium;
-		$[12] = onTrackTags;
-		$[13] = onTrackTwitter;
-		$[14] = t0;
-	} else t0 = $[14];
+		$[0] = onTrackContact;
+		$[1] = onTrackDevto;
+		$[2] = onTrackFacebook;
+		$[3] = onTrackGithub;
+		$[4] = onTrackInstagram;
+		$[5] = onTrackLinkedin;
+		$[6] = onTrackMedium;
+		$[7] = onTrackTwitter;
+		$[8] = t0;
+	} else t0 = $[8];
 	return t0;
 };
 //#endregion

package/dist/organism/menu/index.d.mts

@@ -1,3 +1,2 @@
-import { MenuTrackingCallbacks } from "./use-menu-store.mjs";
-import { Menu, MenuNavHrefs, MenuProps } from "./menu.mjs";
-export { Menu, type MenuNavHrefs, type MenuProps, type MenuTrackingCallbacks };
+import { Menu, MenuDropdown, MenuEntry, MenuGroup, MenuLink, MenuProps } from "./menu.mjs";
+export { Menu, type MenuDropdown, type MenuEntry, type MenuGroup, type MenuLink, type MenuProps };

package/dist/organism/menu/menu.d.mts

@@ -1,32 +1,33 @@
 import { LinkComponent } from "../../atoms/links/anchor-link/anchor-link.mjs";
 import "../../atoms/links/anchor-link/index.mjs";
-import { MenuTrackingCallbacks } from "./use-menu-store.mjs";
 import { FC } from "react";
 //#region src/organism/menu/menu.d.ts
-export interface MenuNavHrefs {
-  blog: string;
-  blogAuthors: string;
-  blogAuthor: string;
-  blogTags: string;
-  blogArchive: string;
-  blogStats: string;
-  dsaRoadmap: string;
-  dsaExercises: string;
-  chat: string;
-  mcp: string;
-  easterEggHunt: string;
-  aboutMe: string;
-  art: string;
-  videogames: string;
-  contact: string;
+export interface MenuLink {
+  label: string;
+  to: string;
+  external?: boolean;
+  onClick?: () => void;
+  /** Path prefixes that also mark this link selected (e.g. `/blog/author/`). */
+  activePathPrefixes?: string[];
 }
+export interface MenuGroup {
+  label: string;
+  items: MenuLink[];
+}
+export interface MenuDropdown {
+  label: string;
+  groups: MenuGroup[];
+}
+export type MenuEntry = MenuLink | MenuDropdown;
 export interface MenuProps {
   linkComponent?: LinkComponent;
   /** The path currently being viewed, used to mark the active entry. Injected by the consumer's router. */
   currentPath: string;
-  navHrefs: MenuNavHrefs;
+  /** The navigation tree, in display order: top-level links and dropdowns of grouped links. */
+  entries: MenuEntry[];
+  /** Paths on which the menu never hides on scroll. */
+  pinnedOnPaths?: string[];
   onPaletteTrigger?: () => void;
-  tracking?: MenuTrackingCallbacks;
 }
 export declare const Menu: FC<MenuProps>;
 //#endregion