@publier/shell 4.2.2 → 4.3.0

package/README.md

@@ -39,14 +39,26 @@ 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; the disclosure arrow changes orientation without an entrance animation.
+
+Outside the `docs` variant, desktop groups also open on hover for fine pointers.
+Their wider panels arrange destinations in two columns, with a brief Motion
+entrance. Reduced-motion preferences disable the 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.0",
   "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

@@ -707,3 +707,97 @@ 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);
+}
+[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 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])
+		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]
+		> summary::after {
+		transition: transform 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: min(56rem, calc(100vw - 3rem));
+		max-width: none;
+		max-height: calc(100dvh - 6rem);
+		margin-inline: auto;
+		padding: 1.5rem;
+		overflow-y: auto;
+		border-radius: 0 0 0.75rem 0.75rem;
+		box-shadow: 0 18px 32px -16px rgb(0 0 0 / 0.2);
+		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: 0.5rem 1.5rem;
+	}
+	[data-publier-top-nav]:not([data-publier-docs-header]) [data-publier-nav-menu] > ul > li > a {
+		height: 100%;
+		padding: 1rem;
+		border-radius: 0.375rem;
+		font-size: 1.0625rem;
+		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 {
+		transition: none;
+	}
+}