@publier/shell 0.2.0 → 0.4.0

package/src/components/top-nav.astro

@@ -4,7 +4,7 @@ import { navConfig, type NavVariant } from 'virtual:publier-nav-config';
 import type { TopNavProps } from './types.ts';
 
 const EMPTY: NavVariant = { brand: '', logo: null, tabs: [], links: [], cta: null };
-const { variant = 'default', currentPath = '', variantConfig } = Astro.props as TopNavProps;
+const { variant = 'default', currentPath = '', variantConfig, navVariant } = Astro.props as TopNavProps;
 const v = variantConfig ?? navConfig.variants[variant] ?? navConfig.variants.default ?? EMPTY;
 const [searchSlotHtml, themeSlotHtml, mobileSlotHtml] = await Promise.all([
 	Astro.slots.has('search') ? Astro.slots.render('search') : Promise.resolve(null),
@@ -12,7 +12,7 @@ const [searchSlotHtml, themeSlotHtml, mobileSlotHtml] = await Promise.all([
 	Astro.slots.has('mobile') ? Astro.slots.render('mobile') : Promise.resolve(null),
 ]);
 const html = shellRenderTopNav(JSON.stringify({
-	variant, currentPath, v,
+	variant, navVariant, currentPath, v,
 	searchEnabled: navConfig.searchEnabled,
 	searchSlotHtml, themeSlotHtml, mobileSlotHtml,
 }));

package/src/components/types.ts

@@ -479,12 +479,16 @@ export interface TopNavProps {
 	variantConfig?: import('virtual:publier-nav-config').NavVariant;
 	/** Current page path for active highlighting. Pass `Astro.url.pathname`. */
 	currentPath?: string;
+	/** Navigation style: `"mega"` renders group panels; anything else is the simple dropdown nav. */
+	navVariant?: string;
 }
 
 export interface TopNavMobileProps {
 	variant?: string;
 	variantConfig?: import('virtual:publier-nav-config').NavVariant;
 	currentPath?: string;
+	/** Same value as `TopNavProps.navVariant`. */
+	navVariant?: string;
 }
 
 // ---------------------------------------------------------------------------

package/src/layouts/base-layout.astro

@@ -12,6 +12,7 @@ import { feeds } from 'virtual:publier-feeds';
 import { fonts } from 'virtual:publier-fonts';
 import { navConfig, type NavVariant } from 'virtual:publier-nav-config';
 import { site } from 'virtual:publier-site';
+import { fullPreset, variants } from 'virtual:publier-theme-variants';
 
 interface Props { title: string; description?: string; nav?: string | false; navConfig?: NavVariant; class?: string; lang?: string }
 const { title, description, nav: navProp, navConfig: resolvedNav, class: className, lang = Astro.currentLocale ?? 'en' } = Astro.props;
@@ -28,6 +29,10 @@ if (navProp !== undefined) {
 			: (JSON.parse(matched) as string);
 }
 
+const htmlHooks = fullPreset
+	? Object.fromEntries([['data-full-preset', ''], ...Object.entries(variants).map(([k, v]) => [`data-variant-${k}`, v])])
+	: {};
+
 const emailProtectionStart = '<!--email_off-->';
 const emailProtectionEnd = '<!--/email_off-->';
 const storageKey = announcement?.storageKey ?? 'publier-announcement';
@@ -38,7 +43,7 @@ const [head, bodyOpen, bodyClose] = JSON.parse(shellRenderBaseLayout(JSON.string
 }))) as [string, string, string];
 ---
 <!doctype html>
-<html lang={lang}>
+<html lang={lang} {...htmlHooks}>
 <head>
 <Fragment set:html={head} />
 <Font cssVariable="--publier-font-builtin-sans" preload />
@@ -59,10 +64,10 @@ const [head, bodyOpen, bodyClose] = JSON.parse(shellRenderBaseLayout(JSON.string
 <slot name="skip" />
 <Fragment set:html={bodyOpen} />
 {navVariant !== false && (
-	<TopNav variant={navVariant} variantConfig={resolvedNav} currentPath={currentPath}>
+	<TopNav variant={navVariant} variantConfig={resolvedNav} currentPath={currentPath} navVariant={variants.nav}>
 		{navConfig.searchEnabled && <SearchButton slot="search" />}
 		<ThemeToggle slot="theme" default={appearance.default} strict={appearance.strict} />
-		<TopNavMobile slot="mobile" variant={navVariant} variantConfig={resolvedNav} currentPath={currentPath} />
+		<TopNavMobile slot="mobile" variant={navVariant} variantConfig={resolvedNav} currentPath={currentPath} navVariant={variants.nav} />
 	</TopNav>
 )}
 <slot />

package/src/tailwind/preset.css

@@ -193,3 +193,122 @@
 	--color-pl-sidebar-active-fg: var(--color-primary);
 	--color-pl-sidebar-border: var(--color-pl-border);
 }
+
+/* ─── Full-preset base layer ────────────────────────────────
+ * Every element a full preset can set, with neutral defaults, so a preset or
+ * `theme.yaml` can override any one of them and the colour-only presets keep
+ * looking as they do today. Cascade: this base, then the preset's theme file,
+ * then `theme.yaml` overrides, then `customCss`.
+ *
+ * The consuming rules below apply only when the document carries
+ * `data-full-preset` (a full preset, or a `theme.yaml` that sets one of these
+ * sections). Renderers emit the same markup either way; presets switch
+ * components through `data-variant-*` hooks on <html>. */
+@layer publier-theme {
+	:root {
+		--publier-radius-button: var(--radius-field, 0.5rem);
+		--publier-radius-control: var(--radius-field, 0.5rem);
+		--publier-radius-card: var(--radius-box, 0.75rem);
+		--publier-radius-panel: var(--radius-box, 0.75rem);
+		--publier-radius-chip: var(--radius-selector, 0.5rem);
+
+		--publier-space-xxs: 0.125rem;
+		--publier-space-xs: 0.25rem;
+		--publier-space-sm: 0.5rem;
+		--publier-space-md: 0.75rem;
+		--publier-space-base: 1rem;
+		--publier-space-lg: 1.5rem;
+		--publier-space-xl: 2rem;
+		--publier-space-xxl: 3rem;
+		--publier-space-section: 4rem;
+
+		--publier-elevation-flat: none;
+		--publier-elevation-raised: var(--shadow-sm);
+		--publier-elevation-overlay: var(--shadow-lg);
+
+		--publier-motion-duration-fast: 100ms;
+		--publier-motion-duration-base: 150ms;
+		--publier-motion-duration-slow: 240ms;
+		--publier-motion-easing: cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	html[data-full-preset] {
+		--publier-transition-duration: var(--publier-motion-duration-base);
+		--publier-transition-timing: var(--publier-motion-easing);
+		--publier-card-radius: var(--publier-radius-card);
+		--publier-control-radius: var(--publier-radius-control);
+		--publier-surface-radius: var(--publier-radius-panel);
+	}
+
+	html[data-full-preset] .prose :where(h1) {
+		font-size: var(--publier-scale-display-lg-size);
+		font-weight: var(--publier-scale-display-lg-weight);
+		line-height: var(--publier-scale-display-lg-line-height);
+		letter-spacing: var(--publier-scale-display-lg-tracking);
+	}
+	html[data-full-preset] .prose :where(h2) {
+		font-size: var(--publier-scale-heading-lg-size);
+		font-weight: var(--publier-scale-heading-lg-weight);
+		line-height: var(--publier-scale-heading-lg-line-height);
+		letter-spacing: var(--publier-scale-heading-lg-tracking);
+	}
+	html[data-full-preset] .prose :where(h3) {
+		font-size: var(--publier-scale-heading-md-size);
+		font-weight: var(--publier-scale-heading-md-weight);
+		line-height: var(--publier-scale-heading-md-line-height);
+		letter-spacing: var(--publier-scale-heading-md-tracking);
+	}
+	html[data-full-preset] .prose :where(h4) {
+		font-size: var(--publier-scale-heading-sm-size);
+		font-weight: var(--publier-scale-heading-sm-weight);
+		line-height: var(--publier-scale-heading-sm-line-height);
+	}
+	html[data-full-preset] .prose :where(p, li) {
+		font-size: var(--publier-scale-body-md-size);
+		line-height: var(--publier-scale-body-md-line-height);
+	}
+	html[data-full-preset] .prose :where(.lead) {
+		font-size: var(--publier-scale-body-lg-size);
+		line-height: var(--publier-scale-body-lg-line-height);
+	}
+	html[data-full-preset] .btn {
+		font-size: var(--publier-scale-label-size);
+		font-weight: var(--publier-scale-label-weight);
+		border-radius: var(--publier-radius-button);
+	}
+	html[data-full-preset] .badge {
+		border-radius: var(--publier-radius-chip);
+	}
+	html[data-full-preset] .card {
+		border-radius: var(--publier-radius-card);
+	}
+	html[data-full-preset] :where(.dropdown-content, .menu.dropdown-content, [popover]) {
+		box-shadow: var(--publier-elevation-overlay);
+		border-radius: var(--publier-radius-card);
+	}
+	html[data-full-preset] :where(section, .publier-section) {
+		--publier-section-gap: var(--publier-space-section);
+	}
+
+	/* Component variants. */
+	html[data-full-preset][data-variant-button="pill"] .btn {
+		border-radius: 9999px;
+	}
+	html[data-full-preset][data-variant-button="square"] .btn {
+		border-radius: 0;
+	}
+	html[data-full-preset][data-variant-card="elevated"] .card {
+		box-shadow: var(--publier-elevation-raised);
+		border-color: transparent;
+	}
+	html[data-full-preset][data-variant-card="filled"] .card {
+		background-color: var(--color-pl-muted-bg);
+		border-color: transparent;
+	}
+	html[data-full-preset][data-variant-card="hairline"] .card {
+		border: 1px solid var(--color-pl-border);
+	}
+	html[data-full-preset][data-variant-card="hairline"] .card:hover {
+		box-shadow: var(--publier-elevation-raised);
+	}
+}

package/src/virtual-modules.d.ts

@@ -21,6 +21,13 @@ declare module 'virtual:publier-appearance' {
 }
 
 declare module 'virtual:publier-theme-css';
+
+declare module 'virtual:publier-theme-variants' {
+	import type { VariantSet } from './tailwind/presets.ts';
+	/** True for a full preset, or when `theme.yaml` sets a non-colour element. */
+	export const fullPreset: boolean;
+	export const variants: VariantSet;
+}
 declare module 'virtual:publier-custom-css';
 
 declare module 'virtual:publier-nav-config' {
@@ -29,6 +36,21 @@ declare module 'virtual:publier-nav-config' {
 		href: string;
 		external?: boolean;
 		description?: string;
+		/** Mega menu: local path or https URL of a small decorative image. */
+		icon?: string;
+	}
+
+	/** Mega menu: a titled sub-group of a group; sub-groups nest up to three levels. */
+	export interface NavGroup {
+		label: string;
+		items?: NavItem[];
+		groups?: NavGroup[];
+	}
+
+	/** Mega menu: the column shared by every group's panel (featured links). */
+	export interface NavAside {
+		label?: string;
+		items: NavItem[];
 	}
 
 	/** A plain link, or a labelled group of one-level navigation items. */
@@ -37,6 +59,14 @@ declare module 'virtual:publier-nav-config' {
 		href?: string;
 		external?: boolean;
 		items?: NavItem[];
+		/** Mega menu: titled sub-groups (a tree). */
+		groups?: NavGroup[];
+		/** Mega menu: sub-group columns on desktop, 1 to 4 (default 2). */
+		columns?: 1 | 2 | 3 | 4;
+		/** Mega menu: links under the group's body. */
+		footer?: NavItem[];
+		/** Mega menu: show a filter field in the group's panel. */
+		search?: boolean;
 	}
 
 	export interface NavCta {
@@ -69,6 +99,8 @@ declare module 'virtual:publier-nav-config' {
 		links: NavLink[];
 		/** Primary CTA button. Null when absent. */
 		cta: NavCta | null;
+		/** Mega menu: featured links shown in every group's panel. */
+		aside?: NavAside;
 	}
 
 	/**

package/dist/presets-CYFX0GLA.mjs

@@ -1 +0,0 @@
-const e=[`almond`,`aspen`,`catppuccin`,`dark`,`dusk`,`emerald`,`enterprise`,`light`,`maple`,`neutral`,`ocean`,`purple`,`ruby`,`solar`,`vitepress`];function t(){return e}function n(t){return e.includes(t)}export{n,t as r,e as t};