@janga/norna 0.7.26 → 0.7.28

package/src/styles/navigation-continuity.css

@@ -0,0 +1,163 @@
+/* Stable reading positions and progressive navigation transitions. */
+@view-transition {
+	navigation: auto;
+}
+
+:root[data-navigation-continuity]:not([data-navigation-motion-ready]) {
+	scroll-behavior: auto !important;
+}
+
+/* Keep label widths stable when a page or its parent branch becomes current. */
+:root[data-navigation-continuity] .navigation-page-tree
+	:is(.navigation-page-link, .navigation-page-open-link, .navigation-page-summary) {
+	font-weight: 400;
+}
+
+:root[data-navigation-continuity]
+	:is(.navigation-page-tree-mobile, .navigation-page-tree-submenu)
+	:is(.navigation-page-link, .navigation-page-open-link) {
+	font-weight: 500;
+}
+
+:root[data-navigation-continuity] .site-top {
+	view-transition-name: norna-header;
+}
+
+:root[data-navigation-continuity] .tree-local-navigation {
+	/* Keep this in the static root snapshot: Safari can blank a separately
+	   captured scroll container after restoring a deep scroll position. */
+	view-transition-name: none;
+	max-height: calc(100svh - var(--navigation-scrollport-top,
+		calc(var(--site-top-anchor-offset) + 1.25rem)) - 1.25rem);
+	/* Leave a clear ending below the final visible row when the tree is scrolled. */
+	padding-block-end: 3rem;
+}
+
+/* Mask the scrollport's top padding as rows pass behind the sticky controls. */
+:root[data-navigation-continuity] .tree-local-navigation .navigation-tree-controls::before {
+	position: absolute;
+	inset-inline: 0;
+	bottom: 100%;
+	height: 1.25rem;
+	background: inherit;
+	content: '';
+}
+
+:root[data-navigation-continuity] .navigation-category-link {
+	color: inherit;
+	font: inherit;
+	text-decoration: none;
+}
+
+:root[data-navigation-continuity] .navigation-category-link:hover,
+:root[data-navigation-continuity] .navigation-category-link:focus-visible {
+	text-decoration: underline;
+	text-underline-offset: 0.28em;
+}
+
+/* Keep the article in the viewport's root snapshot. Capturing a long article
+   separately delays Safari's first paint even with a zero-duration fade. */
+
+::view-transition-group(*) {
+	animation: none;
+}
+
+::view-transition-old(root),
+::view-transition-old(norna-header) {
+	display: none;
+}
+
+::view-transition-new(root),
+::view-transition-new(norna-header) {
+	animation: none;
+	mix-blend-mode: normal;
+}
+
+:root[data-navigation-continuity] .navigation-page-chevron::before {
+	transition: transform 120ms ease-out;
+}
+
+:root[data-navigation-continuity]:not([data-navigation-motion-ready])
+	.navigation-page-chevron::before {
+	/* Restoring an open branch is not a new disclosure interaction. */
+	transition: none;
+}
+
+:root[data-navigation-continuity] [data-navigation-motion-open='true']
+	> summary .navigation-page-chevron::before {
+	transform: rotate(90deg);
+}
+
+:root[data-navigation-continuity] [data-navigation-motion-open='false']
+	> summary .navigation-page-chevron::before {
+	transform: rotate(0deg);
+}
+
+:root[data-navigation-continuity] .navigation-page-tree-sidebar
+	[data-navigation-motion-open='true'] > summary .navigation-page-chevron::before {
+	transform: rotate(45deg);
+}
+
+:root[data-navigation-continuity] .navigation-page-tree-sidebar
+	[data-navigation-motion-open='false'] > summary .navigation-page-chevron::before {
+	transform: rotate(-45deg);
+}
+
+:root[data-navigation-continuity] [data-navigation-motion-active] {
+	overflow: clip;
+}
+
+:root[data-navigation-continuity] .page-contents-links[data-navigation-marker] {
+	position: relative;
+}
+
+:root[data-navigation-continuity] [data-navigation-marker] a[aria-current='location'] {
+	background: transparent;
+	box-shadow: none;
+}
+
+:root[data-navigation-continuity] [data-navigation-marker]
+	a[aria-current='location']:not(:hover):not(:focus-visible) {
+	text-decoration: none;
+}
+
+:root[data-navigation-continuity] [data-navigation-marker] a[aria-current='location']::before {
+	content: none;
+}
+
+:root[data-navigation-continuity] [data-navigation-marker]::after {
+	position: absolute;
+	top: 0;
+	left: -0.85rem;
+	width: 2px;
+	height: var(--navigation-marker-height, 0px);
+	border-radius: 2px;
+	background: var(--color-primary-text);
+	content: '';
+	opacity: var(--navigation-marker-opacity, 0);
+	pointer-events: none;
+	transform: translateY(var(--navigation-marker-top, 0px));
+	transition: transform 160ms ease-out, height 160ms ease-out, opacity 120ms ease-out;
+}
+
+:root[data-navigation-continuity] [data-navigation-marker-initial]::after {
+	transition: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	@view-transition { navigation: none; }
+
+	:root[data-navigation-continuity][data-navigation-motion-ready] {
+		scroll-behavior: auto !important;
+	}
+
+	:root[data-navigation-continuity] .navigation-page-chevron::before,
+	:root[data-navigation-continuity] [data-navigation-marker]::after {
+		transition: none;
+	}
+
+	::view-transition-old(*),
+	::view-transition-new(*) {
+		animation: none !important;
+	}
+}

package/src/styles/page-layout.css

@@ -19,11 +19,10 @@
 .site-page-layout-tree {
 	--tree-layout-width: max(var(--page-width), 86rem);
 	--tree-layout-outer-margin: max(var(--content-gutter), calc((100vw - var(--tree-layout-width)) / 2));
-	--tree-navigation-width: 14rem;
-	--contents-navigation-width: 11rem;
+	--tree-navigation-width: 16rem;
 	--tree-layout-gap: var(--local-navigation-gap, clamp(1.5rem, 3vw, 3rem));
 	display: grid;
-	grid-template-columns: var(--tree-navigation-width) minmax(0, 1fr) var(--contents-navigation-width);
+	grid-template-columns: var(--tree-navigation-width) minmax(0, 1fr);
 	align-items: start;
 	gap: var(--tree-layout-gap);
 	min-height: calc(100svh - var(--site-top-anchor-offset));
@@ -48,7 +47,7 @@
 	}
 }
 
-:is(.tree-local-navigation, .mobile-site-nav, .page-contents-navigation) {
+:is(.tree-local-navigation, .mobile-site-nav) {
 	--tree-disclosure-icon-width: 0.9rem;
 	--tree-disclosure-gap: 0.6rem;
 	--tree-disclosure-offset: calc(var(--tree-disclosure-icon-width) + var(--tree-disclosure-gap));
@@ -181,7 +180,7 @@
 }
 
 :root[data-appearance='dark']
-	:is(.tree-local-navigation, .mobile-site-nav, .page-contents-navigation) {
+	:is(.tree-local-navigation, .mobile-site-nav) {
 	--tree-current-item-background: color-mix(
 		in srgb,
 		var(--color-surface-emphasis-background) 64%,
@@ -191,7 +190,7 @@
 
 @media (prefers-color-scheme: dark) {
 	:root[data-appearance='system']
-		:is(.tree-local-navigation, .mobile-site-nav, .page-contents-navigation) {
+		:is(.tree-local-navigation, .mobile-site-nav) {
 		--tree-current-item-background: color-mix(
 			in srgb,
 			var(--color-surface-emphasis-background) 64%,
@@ -200,50 +199,11 @@
 	}
 }
 
-.page-contents-navigation {
-	color: var(--color-secondary-text);
-}
-
-.page-contents-navigation-rail {
-	position: sticky;
-	top: calc(var(--site-top-anchor-offset) + 1.25rem);
-	z-index: 3;
-	min-height: 0;
-	max-height: calc(100svh - var(--site-top-anchor-offset) - 2.5rem);
-	border-inline-start: 1px solid var(--color-nav-separator);
-	padding: 1.5rem 0 1.5rem 1rem;
-	background: var(--color-page);
-	overflow-y: auto;
-	overscroll-behavior: contain;
-}
-
-.page-contents-navigation-label {
-	margin: 0 0 0.65rem;
-	color: var(--color-primary-text);
-	font-size: 0.7rem;
-	font-weight: 700;
-	letter-spacing: 0;
-	line-height: 1.3;
-}
-
 @media (min-width: 961px) and (max-width: 1280px) {
 	.site-page-layout-tree {
 		--tree-layout-width: max(var(--page-width), 76rem);
 		grid-template-columns: var(--tree-navigation-width) minmax(0, 1fr);
 	}
-
-	.page-contents-navigation-rail {
-		display: none;
-	}
-}
-
-@media (min-width: 1281px) {
-	.site-page-layout-tree[data-page-contents-placement='contents-rail']
-		.tree-local-navigation .navigation-page-sections,
-	.site-page-layout-tree[data-page-contents-placement='contents-rail']
-		.tree-local-navigation .navigation-page-sections-disclosure {
-		display: none;
-	}
 }
 
 @media (max-width: 960px) {
@@ -256,8 +216,7 @@
 		width: min(calc(100% - (var(--content-gutter) * 2)), var(--page-width));
 	}
 
-	.tree-local-navigation,
-	.page-contents-navigation {
+	.tree-local-navigation {
 		display: none;
 	}
 }
@@ -268,9 +227,15 @@
 	padding: 0.15rem 0 0.2rem 0.75rem;
 }
 
+.navigation-page-tree-sidebar .navigation-page-sections {
+	margin-inline-start: 0;
+	border-left: 0;
+	padding-inline-start: 1rem;
+}
+
 .navigation-page-tree-sidebar
-	.navigation-page-sections-disclosure > .navigation-page-sections {
-	margin-inline-start: var(--tree-disclosure-offset);
+	.navigation-page-node-page-disclosure > .navigation-page-branch-content > .navigation-page-sections {
+	padding-inline-start: 0;
 }
 
 .navigation-page-sections-disclosure > summary {
@@ -292,6 +257,11 @@
 	display: none;
 }
 
+.navigation-page-tree-sidebar .navigation-page-sections-disclosure > summary {
+	right: 0;
+	left: auto;
+}
+
 .navigation-page-sections-disclosure > summary:hover,
 .navigation-page-sections-disclosure > summary:focus-visible {
 	background: color-mix(in srgb, currentColor 8%, transparent);
@@ -320,8 +290,9 @@
 
 .navigation-page-tree-sidebar .navigation-page-link {
 	display: block;
+	width: calc(100% - var(--tree-disclosure-offset));
 	border-radius: var(--corner-radius-small, 2px);
-	padding: 0.375rem 0.3rem 0.375rem var(--tree-disclosure-offset);
+	padding: 0.375rem 0.3rem 0.375rem 0;
 	color: var(--color-secondary-text);
 	font-size: 0.84rem;
 	font-weight: 400;
@@ -358,9 +329,8 @@
 }
 
 .navigation-page-tree-sidebar .navigation-page-tree-sidebar {
-	margin: 0.15rem 0 0.2rem 0.25rem;
-	border-left: 1px solid color-mix(in srgb, currentColor 16%, transparent);
-	padding-left: 0.75rem;
+	margin: 0.15rem 0 0.2rem;
+	padding-left: 1rem;
 }
 
 .navigation-page-disclosure > .navigation-page-summary {
@@ -397,25 +367,27 @@
 .navigation-page-disclosure-sidebar.navigation-category-disclosure
 	> .navigation-page-summary {
 	display: grid;
-	grid-template-columns: var(--tree-disclosure-icon-width) minmax(0, 1fr);
-	column-gap: var(--tree-disclosure-gap);
+	grid-template-columns: minmax(0, 1fr) var(--tree-disclosure-offset);
+	align-items: start;
 	justify-content: normal;
+	padding-inline-end: 0;
 }
 
 .navigation-page-disclosure-sidebar.navigation-category-disclosure
 	> .navigation-page-summary > .navigation-page-summary-title {
-	grid-column: 2;
+	grid-column: 1;
 	width: auto;
+	padding-inline-end: 0.3rem;
 }
 
 .navigation-page-disclosure-sidebar.navigation-category-disclosure
 	> .navigation-page-summary > .navigation-page-chevron {
-	grid-column: 1;
+	grid-column: 2;
 	grid-row: 1;
 	display: grid;
 	place-items: center;
-	width: var(--tree-disclosure-icon-width);
-	height: 1.35em;
+	width: var(--tree-disclosure-offset);
+	height: 1.4em;
 }
 
 .navigation-page-node-page-disclosure {
@@ -445,6 +417,26 @@
 	grid-row: 1;
 }
 
+/* Labels keep their depth; disclosures share the tree's right edge. */
+.navigation-page-tree-sidebar .navigation-page-node-page-disclosure {
+	grid-template-columns: minmax(0, 1fr) var(--tree-disclosure-offset);
+}
+
+.navigation-page-tree-sidebar
+	.navigation-page-node-page-disclosure > .navigation-page-disclosure {
+	grid-column: 2;
+}
+
+.navigation-page-tree-sidebar
+	.navigation-page-node-page-disclosure > .navigation-page-disclosure > .navigation-page-summary {
+	justify-content: normal;
+}
+
+.navigation-page-tree-sidebar
+	.navigation-page-node-page-disclosure > .navigation-page-open-link {
+	grid-column: 1;
+}
+
 .navigation-page-node-page-disclosure > .navigation-page-branch-content {
 	grid-column: 1 / -1;
 	grid-row: 2;
@@ -586,9 +578,8 @@
 
 .navigation-page-tree-sidebar .navigation-page-disclosure > .navigation-page-branch-content,
 .navigation-page-tree-sidebar .navigation-page-node-page-disclosure > .navigation-page-branch-content {
-	margin: 0.1rem 0 0.2rem 0.25rem;
-	border-left: 1px solid color-mix(in srgb, currentColor 16%, transparent);
-	padding-left: 0.75rem;
+	margin: 0.1rem 0 0.2rem;
+	padding-left: 1rem;
 }
 
 .navigation-page-tree-sidebar .navigation-page-disclosure .navigation-page-tree-sidebar,
@@ -609,6 +600,10 @@
 	list-style: none;
 }
 
+.navigation-page-tree-sidebar .page-contents-links ol {
+	border-left: 0;
+}
+
 .page-contents-links a {
 	position: relative;
 	display: block;
@@ -626,12 +621,6 @@
 	text-underline-offset: 0.25em;
 }
 
-.page-contents-navigation-rail .page-contents-links a[aria-current='location'] {
-	border-radius: var(--corner-radius-small, 2px);
-	background: var(--tree-current-item-background);
-	box-shadow: 0 0 0 0.2rem var(--tree-current-item-background);
-}
-
 .page-contents-links a[aria-current='location']::before {
 	position: absolute;
 	top: 0.15em;

package/src/styles/responsive.css

@@ -385,10 +385,6 @@
 		display: none;
 	}
 
-	.page-contents-navigation {
-		display: none;
-	}
-
 	.page-sequence-navigation {
 		grid-template-columns: 1fr;
 	}

package/starters/basic/README.md

@@ -13,11 +13,11 @@ Open the address printed by the development server. Stop it later with
 `npm run norna:dev:stop`.
 
 Edit shared logo settings, banners, and footer in
-`site/sitewide-content.yaml`,
-site-wide visual defaults in `site/theme.yaml`, homepage content and section
-metadata in `site/pages/000-home/content.md`, and technical settings such as URL
-and locale in `site/config.yaml`. Keep managed homepage source images under
-`site/pages/000-home/images/` and static public files under `site/public/`.
+`site/site-config/shared-content.yaml`,
+site-wide visual defaults in `site/root/tree-theme.yaml`, homepage content and section
+metadata in `site/root/content.md`, and technical settings such as URL
+and locale in `site/site-config/settings.yaml`. Keep managed homepage source images under
+`site/root/images/` and static public files under `site/public/`.
 
 For a GitHub Pages project site without a custom domain, include the repository
 path in the public URL:
@@ -32,9 +32,10 @@ Norna derives `/repository-name/` as the base path. Use a root URL such as
 In GitHub repository settings, configure Pages to build from GitHub Actions.
 
 Page width, side gutters, content spacing, image sizing, palette, corners, and
-site-wide typography are configured in `site/theme.yaml`. A page may use a
-limited `theme.yaml` for local text width, content spacing, managed-image
-sizing, and section background pattern.
+typography are configured in the required `site/root/tree-theme.yaml`, including
+a `preset`. A descendant `tree-theme.yaml` modifies inherited settings for its
+branch; `page-theme.yaml` affects only its own page. Both accept all visual
+settings. Adding `preset` starts a new base instead of inheriting ancestor values.
 
 Commit `package-lock.json` after the first install so GitHub Actions can use
 `npm ci`.
@@ -61,5 +62,5 @@ Use `npm run norna:engine:version` to inspect the installed engine and
 `npm run norna:engine:update` to update it.
 
 Start with the [illustrated Getting Started guide](https://janga.github.io/norna/getting-started/install-norna/).
-Use the [Markdown reference index](https://github.com/janga/norna/blob/main/docs/README.md)
+Use the [Norna reference](https://janga.github.io/norna/reference/)
 for exact file contracts, syntax, commands, and publishing behavior.

package/starters/basic/site/{pages/000-home → root}/content.md

@@ -10,11 +10,11 @@ of what visitors can find here.
 
 ## Welcome
 
-Edit this page in `site/pages/000-home/content.md`. Every H2 starts a section
+Edit this page in `site/root/content.md`. Every H2 starts a section
 and becomes a destination in this one-page site's navigation.
 
 ## Next steps
 
-Add your own text, then choose a preset in `site/theme.yaml`. Put local images
+Add your own text, then choose a preset in `site/root/tree-theme.yaml`. Put local images
 in this page's `images/` directory and reference them through a Norna image
 block when the site needs them.

package/schemas/category.schema.json

@@ -1,20 +0,0 @@
-{
-  "$schema": "http://json-schema.org/draft-07/schema#",
-  "type": "object",
-  "properties": {
-    "label": {
-      "type": "string",
-      "minLength": 1,
-      "description": "Navigation label for this non-routable page category.",
-      "markdownDescription": "```yaml\nlabel: Guides\n```\n\nThe category label shown in global navigation, tree navigation, mobile navigation, and breadcrumbs.\n\n[Navigation category reference](https://github.com/janga/norna/blob/v0.7.26/docs/pages.md#navigation-categories)"
-    }
-  },
-  "required": [
-    "label"
-  ],
-  "additionalProperties": false,
-  "description": "A non-routable navigation category containing child pages.",
-  "$id": "https://janga.github.io/norna/schemas/category.schema.json",
-  "title": "Norna page category",
-  "markdownDescription": "```yaml\nlabel: Guides\n```\n\n`category.yaml` groups child pages without editorial content. Its URL opens the first listed direct page, or a generated child list when the first child is a category.\n\n[Navigation category reference](https://github.com/janga/norna/blob/v0.7.26/docs/pages.md#navigation-categories)"
-}

package/src/components/PageContentsNavigation.astro

@@ -1,20 +0,0 @@
----
-import projectConfig from '../../scripts/lib/project-config.mjs';
-import type { HeadingNavigation } from '../lib/sectionContent';
-import PageContentsLinks from './PageContentsLinks.astro';
-
-interface Props {
-	headings: HeadingNavigation[];
-	pageTitle: string;
-}
-
-const { headings, pageTitle } = Astro.props;
-const label = `${projectConfig.locale.labels.pageNavigation}: ${pageTitle}`;
----
-
-<aside class="page-contents-navigation page-contents-navigation-rail">
-	<nav aria-label={label}>
-		<p class="page-contents-navigation-label">{projectConfig.locale.labels.pageNavigation}</p>
-		<PageContentsLinks headings={headings} variant="desktop" />
-	</nav>
-</aside>