@publier/shell 4.2.2 → 4.3.1

package/README.md

@@ -39,14 +39,30 @@ nav:
       href: /contact
 ```
 
-The default variant serves both marketing and documentation pages. Keep one
-canonical configuration; if named variants are needed, reuse the same YAML anchor
-instead of copying the items. Only one level is supported. Empty groups, malformed
+Configure marketing navigation in `default` or a named marketing variant, and
+documentation navigation in `docs`. Without a `docs` variant, documentation routes
+derive section links from `docs.tabSections`. Reuse YAML anchors for shared destinations. Only one level is supported. Empty groups, malformed
 children, and nested groups are omitted. Descriptions are plain text and are
 escaped along with labels and destinations. Children support local paths,
 fragments, HTTP(S), mail and telephone links; executable URL schemes are omitted.
 `external: true` opens a new tab with `noopener noreferrer`.
 
+Documentation selectors open on click or keyboard activation. Their labels stay
+stationary while the disclosure arrow rotates smoothly. The menu itself opens
+without an entrance animation.
+
+Outside the `docs` variant, desktop groups also open on hover for fine pointers.
+Their panels span the header width and arrange destinations in two columns, with
+a brief Motion entrance. Corners and shadow follow the theme’s `--radius-box`,
+`--radius-selector` and `--shadow-lg` tokens; `--publier-page-max-width` aligns
+the inner content with the page. Reduced motion disables panel and arrow
+animation. Touch uses tap;
+keyboard opening, selection and Escape remain owned by details-menu. Pointer
+opening informs that element's mouse-modality listener so hover does not steal
+focus. Moving into the panel keeps it open; leaving dismisses after a short grace
+period unless a panel link retains keyboard focus. Astro swaps clear timers and
+animations before wiring the new header. Plain-link variants need no groups.
+
 Desktop menus appear at `lg` (1024px). Each group is a native `<details>` with
 `data-publier-nav-group` set to its label. Its direct `<details-menu>` child has
 `data-publier-nav-menu`, `role="menu"`, and links with `role="menuitem"`. The

package/dist/index.mjs

@@ -1 +1 @@
-import{a as e,i as t,t as n}from"./integration-DgDVMttc.mjs";export{t as HASHED_ASSET_RE,n as docsShell,e as publierCacheControl};
+import{a as e,i as t,t as n}from"./integration-B__TDsKV.mjs";export{t as HASHED_ASSET_RE,n as docsShell,e as publierCacheControl};

package/dist/{integration-DgDVMttc.mjs → integration-B__TDsKV.mjs}

@@ -11,7 +11,7 @@ if (import.meta.hot) {
 `),i+=t.join(`
 `),i.endsWith(`
 `)||(i+=`
-`)),i}function we(){return{name:`publier-cascade-hoist`,enforce:`post`,transform(e,t){if(!t.endsWith(`.css`)&&!t.includes(`.css?`))return null;let n=Z(e);return n===e?null:{code:n,map:null}},generateBundle(e,t){for(let e of Object.keys(t)){if(!e.endsWith(`.css`))continue;let n=t[e];if(!n||n.type!==`asset`)continue;let r=typeof n.source==`string`?n.source:new TextDecoder().decode(n.source),i=Z(r);i!==r&&(n.source=i)}}}}function Q(e,t,n){let r=`\0${e}`,i=`export const ${t} = ${JSON.stringify(n)};`;return{name:`publier-${e.replace(/^virtual:publier-/,``)}`,resolveId(t){if(t===e)return r},load(e){if(e===r)return i}}}function Te(e,t=6){return e.length===0?`[]`:e.length<=t?`[${e.join(`, `)}]`:`[${e.slice(0,t).join(`, `)}, +${e.length-t} more]`}function Ee(e){let t=[ve,a,i,f(),v(),C()];return e.searchEnabled&&t.push(S(),x()),t.join(`
+`)),i}function we(){return{name:`publier-cascade-hoist`,enforce:`post`,transform(e,t){if(!t.endsWith(`.css`)&&!t.includes(`.css?`))return null;let n=Z(e);return n===e?null:{code:n,map:null}},generateBundle(e,t){for(let e of Object.keys(t)){if(!e.endsWith(`.css`))continue;let n=t[e];if(!n||n.type!==`asset`)continue;let r=typeof n.source==`string`?n.source:new TextDecoder().decode(n.source),i=Z(r);i!==r&&(n.source=i)}}}}function Q(e,t,n){let r=`\0${e}`,i=`export const ${t} = ${JSON.stringify(n)};`;return{name:`publier-${e.replace(/^virtual:publier-/,``)}`,resolveId(t){if(t===e)return r},load(e){if(e===r)return i}}}function Te(e,t=6){return e.length===0?`[]`:e.length<=t?`[${e.join(`, `)}]`:`[${e.slice(0,t).join(`, `)}, +${e.length-t} more]`}function Ee(e){let t=[`import '@publier/shell/runtime/marketing-nav';`,ve,a,i,f(),v(),C()];return e.searchEnabled&&t.push(S(),x()),t.join(`
 `)}function De(e,t){let n=[],r=[],i=[];for(let a of[`heading`,`body`,`mono`]){let o=e[a];if(!o?.family)continue;let s=`--publier-font-${a}`,c=a===`mono`?[`monospace`]:[`system-ui`,`sans-serif`],l=[o.weight??`400`],u=[o.style??`normal`];if(o.googleFontsUrl)n.push({name:o.family,cssVariable:s,provider:M.google(),fallbacks:c,weights:l,styles:u,subsets:[`latin`]}),r.push(a);else if(o.src){let e=A.isAbsolute(o.src)&&w(o.src)?o.src:A.join(t,`public`,o.src.replace(/^\/+/,``));n.push({name:o.family,cssVariable:s,provider:M.local(),fallbacks:c,weights:l,styles:u,subsets:[`latin`],options:{variants:[{weight:l[0],style:u[0],src:[e]}]}}),r.push(a)}else i.push(`${s}:"${o.family}",${c.join(`,`)};`)}return{entries:n,familyOnlyCss:i.length?`:root{${i.join(``)}}`:``,slots:r}}const Oe=[{pkg:`astro-expressive-code`,aliases:[`astro-expressive-code`]},{pkg:`@astrojs/mdx`,aliases:[`@astrojs/mdx`]},{pkg:`@astrojs/sitemap`,aliases:[`@astrojs/sitemap`]},{pkg:`astro-pagefind`,aliases:[`astro-pagefind`,`pagefind`]},{pkg:`@qwik.dev/astro`,aliases:[`@qwik.dev/astro`]}];function $(e,t){let n=A.join(e,`src`,`content`,t);if(!w(n))return!1;try{return D(n,{recursive:!0}).some(e=>typeof e==`string`&&/\.mdx?$/.test(e))}catch{return!1}}function ke(e={}){let t=null;return{name:`@publier/shell`,hooks:{"astro:config:setup":async({config:n,updateConfig:r,injectScript:i,injectRoute:a,logger:l})=>{let u=n.root?j(n.root):process.cwd();try{oe()}catch(e){let t=e instanceof Error?e.message:String(e),n=ee(t);throw n?Error(n):e}let f=c(A.join(u,`package.json`)),p=JSON.stringify(e),m=de(fe(u)??``),h=m.site;t={llms:m.llms,siteName:h.name,siteDescription:h.description??void 0};let g=m.vars,_=m.fonts,v=m.nav,y=m.announcement,b=m.docs,x=typeof h.url==`string`&&h.url.length>0;x&&!n.site&&r({site:h.url});let S=new Set(n.integrations.map(e=>e.name)),C=Oe.filter(({aliases:e})=>!e.some(e=>S.has(e)));C.length>0&&l.warn(`[@publier/shell] Required framework integrations are not registered in
 astro.config.ts. As of @publier/shell@2.0.0, docsShell() no longer
 auto-wires these. Add the following to your integrations[] array

package/dist/integration.mjs

@@ -1 +1 @@
-import{n as e,r as t,t as n}from"./integration-DgDVMttc.mjs";export{n as docsShell,e as hoistMediaOutOfUtilitiesLayer,t as publierCascadeHoistPlugin};
+import{n as e,r as t,t as n}from"./integration-B__TDsKV.mjs";export{n as docsShell,e as hoistMediaOutOfUtilitiesLayer,t as publierCascadeHoistPlugin};

package/dist/runtime/marketing-nav.d.mts

@@ -0,0 +1 @@
+import "@github/details-menu-element";

package/dist/runtime/marketing-nav.mjs

@@ -0,0 +1 @@
+import"@github/details-menu-element";const e=matchMedia(`(min-width: 1024px)`),t=matchMedia(`(hover: hover) and (pointer: fine)`),n=matchMedia(`(prefers-reduced-motion: reduce)`);let r,i,a;function o(){return i||=import(`motion/mini`).then(e=>{r=e.animate}).catch(()=>{i=void 0}),i}function s(){a?.();let i=Array.from(document.querySelectorAll(`[data-publier-top-nav]:not([data-publier-docs-header]) details.dropdown[data-publier-nav-group]:not([data-publier-docs-selector])`));if(!i.length)return;let s=new AbortController,c={signal:s.signal},l=new Set;e.matches&&!n.matches&&o();for(let a of i){let i=a.querySelector(`:scope > summary`),u=a.querySelector(`:scope > details-menu`);if(!i||!u)continue;let d,f,p=0,m=!1,h=()=>{clearTimeout(d),d=void 0},g=()=>{p+=1,f?.cancel(),f=void 0},_=()=>{h(),g(),m=!1,a.open=!1};l.add(_),a.addEventListener(`pointerenter`,n=>{n.pointerType===`touch`||!e.matches||!t.matches||(h(),!a.open&&(a.dispatchEvent(new MouseEvent(`mousedown`)),m=!0,a.open=!0))},c),a.addEventListener(`pointerleave`,e=>{e.pointerType!==`touch`&&(h(),d=setTimeout(()=>{u.contains(document.activeElement)||_()},160))},c),i.addEventListener(`click`,e=>{e.detail>0&&m&&a.open&&e.preventDefault(),m=!1},c),document.addEventListener(`keydown`,e=>{e.key===`Escape`&&!e.defaultPrevented&&a.open&&!a.contains(document.activeElement)&&(_(),e.preventDefault())},c),a.addEventListener(`focusout`,()=>{queueMicrotask(()=>{!a.contains(document.activeElement)&&!a.matches(`:hover`)&&_()})},c),a.addEventListener(`toggle`,()=>{if(g(),!a.open){m=!1;return}if(n.matches||!e.matches)return;let t=p;o().then(()=>{t!==p||s.signal.aborted||!a.isConnected||!a.open||n.matches||!e.matches||(f=r?.(u,{opacity:[0,1],transform:[`translateY(6px)`,`translateY(0)`]},{duration:.18,ease:[.16,1,.3,1]}))})},c),n.addEventListener(`change`,g,c)}e.addEventListener(`change`,()=>{for(let e of l)e()},c),t.addEventListener(`change`,()=>{for(let e of l)e()},c),a=()=>{s.abort();for(let e of l)e();a=void 0}}s(),document.addEventListener(`astro:before-swap`,()=>a?.()),document.addEventListener(`astro:after-swap`,s);export{};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@publier/shell",
-  "version": "4.2.2",
+  "version": "4.3.1",
   "license": "UNLICENSED",
   "description": "Qwik + Astro docs layout for Publier sites.",
   "type": "module",
@@ -101,7 +101,11 @@
       "import": "./dist/tailwind/loader.mjs"
     },
     "./tailwind/preset.css": "./src/tailwind/preset.css",
-    "./tailwind/themes/*": "./dist/themes/*"
+    "./tailwind/themes/*": "./dist/themes/*",
+    "./runtime/marketing-nav": {
+      "types": "./dist/runtime/marketing-nav.d.mts",
+      "import": "./dist/runtime/marketing-nav.mjs"
+    }
   },
   "publishConfig": {
     "access": "public"
@@ -133,7 +137,8 @@
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
     "unist-util-visit": "^5.1.0",
-    "yaml": "^2.9.0"
+    "yaml": "^2.9.0",
+    "motion": "^14.0.0"
   },
   "peerDependencies": {
     "@astrojs/markdown-remark": ">=7.0.0",

package/src/styles/base.css

@@ -172,6 +172,7 @@ h6 {
 	border-right: 1.5px solid currentColor;
 	border-bottom: 1.5px solid currentColor;
 	transform: translateY(-0.1rem) rotate(45deg);
+	transition: transform 150ms ease;
 }
 
 [data-publier-top-nav] details[data-publier-nav-group].dropdown[open] > summary::after {
@@ -707,3 +708,98 @@ aside[aria-label="Table of contents"] {
 body:has([data-publier-docs-header]) :is(h2, h3, h4)[id] {
 	scroll-margin-top: calc(var(--publier-header-height, 4rem) + 1rem);
 }
+
+/* Header controls remain stationary while the disclosure indicator changes. */
+[data-publier-docs-header] .btn,
+[data-publier-docs-selector] > summary,
+[data-publier-top-nav] details[data-publier-nav-group] > summary {
+	translate: none;
+	scale: none;
+}
+[data-publier-docs-selector] > summary {
+	color: var(--color-base-content);
+	transform: none;
+	transition: none;
+	background-color: transparent;
+	box-shadow: none;
+}
+[data-publier-docs-selector] > summary > span[aria-hidden="true"] {
+	display: inline-block;
+	width: 0.4rem;
+	height: 0.4rem;
+	font-size: 0;
+	border-right: 1.5px solid currentColor;
+	border-bottom: 1.5px solid currentColor;
+	transform: rotate(45deg);
+	transition: transform 150ms ease;
+}
+[data-publier-docs-selector][open] > summary > span[aria-hidden="true"] {
+	transform: rotate(225deg);
+}
+[data-publier-docs-header] .dropdown-content {
+	animation: none;
+	transition: none;
+	scale: 1;
+}
+
+/* Marketing uses the existing menu surface, expanded across the header into an airy link grid.
+ * Native disclosure still works without JavaScript; Motion enhances entrance. */
+@media (width >= 64rem) {
+	[data-publier-top-nav]:not([data-publier-docs-header]) > .navbar {
+		position: static;
+	}
+	[data-publier-top-nav]:not([data-publier-docs-header])
+		details.dropdown[data-publier-nav-group]:not([data-publier-docs-selector]) {
+		position: static;
+	}
+	[data-publier-top-nav]:not([data-publier-docs-header])
+		details.dropdown[data-publier-nav-group]:not([data-publier-docs-selector])
+		> summary {
+		transform: none;
+		background-color: transparent;
+		box-shadow: none;
+		transition: color 150ms ease;
+	}
+	[data-publier-top-nav]:not([data-publier-docs-header])
+		details.dropdown[data-publier-nav-group]:not([data-publier-docs-selector])
+		> [data-publier-nav-menu] {
+		inset-inline: 0;
+		top: 100%;
+		width: 100%;
+		max-width: none;
+		max-height: calc(100dvh - 6rem);
+		margin-inline: auto;
+		padding-block: 2.5rem;
+		padding-inline: max(2rem, calc((100% - var(--publier-page-max-width, 80rem)) / 2));
+		overflow-y: auto;
+		border-radius: 0 0 var(--radius-box) var(--radius-box);
+		box-shadow: var(--shadow-lg);
+		scale: 1;
+		animation: none;
+		transition: none;
+		transform-origin: top center;
+	}
+	[data-publier-top-nav]:not([data-publier-docs-header]) [data-publier-nav-menu] > ul {
+		display: grid;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		gap: 1rem 3rem;
+	}
+	[data-publier-top-nav]:not([data-publier-docs-header]) [data-publier-nav-menu] > ul > li > a {
+		height: 100%;
+		padding: 1rem;
+		border-radius: var(--radius-selector);
+		font-size: 1.25rem;
+		line-height: 1.4;
+	}
+	[data-publier-top-nav]:not([data-publier-docs-header]) [data-publier-nav-description] {
+		margin-top: 0.375rem;
+		color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
+		line-height: 1.5;
+	}
+}
+@media (prefers-reduced-motion: reduce) {
+	[data-publier-top-nav] details[data-publier-nav-group] > summary::after,
+	[data-publier-docs-selector] > summary > span[aria-hidden="true"] {
+		transition: none;
+	}
+}