@janga/norna 0.7.17 → 0.7.22

package/scripts/lib/project-config.mjs

@@ -51,6 +51,16 @@ const readEnum = (object, key, path, allowedValues, fallback, sourceLabel = site
 	return value;
 };
 
+const readBoolean = (object, key, path, fallback, sourceLabel = siteConfigLabel) => {
+	const value = object[key] ?? fallback;
+
+	if (typeof value !== 'boolean') {
+		throw new Error(`${path}.${key} must be true or false in ${sourceLabel}.`);
+	}
+
+	return value;
+};
+
 const readFontFamily = (object, key, path, fallback, sourceLabel = siteConfigLabel) => {
 	const value = object[key] ?? fallback;
 
@@ -184,28 +194,54 @@ const readSiteUrl = (config) => {
 const localeLabels = Object.freeze({
 	en: Object.freeze({
 		breadcrumb: 'Breadcrumb',
+		colorMode: 'Color mode',
+		colorModeDark: 'Dark',
+		colorModeLight: 'Light',
+		colorModeSystem: 'System',
+		displaySettings: 'Display',
+		focusReading: 'Focus reading',
+		readingWidth: 'Reading width',
+		readingWidthNarrow: 'Narrow',
+		readingWidthStandard: 'Standard',
+		readingWidthWide: 'Wide',
+		resetDisplaySettings: 'Reset',
 		dismissBanner: 'Dismiss notice',
 		built: 'Built',
 		images: 'Images',
-		navigationBack: 'Back to pages',
+		imageCarousel: 'image carousel',
+		navigationChildren: 'Child pages',
 		navigationMenu: 'Menu',
-		navigationOverview: 'Overview',
+		nextImage: 'Next image',
 		note: 'Note',
-		pageNavigation: 'On this page',
+		pageNavigation: 'Page contents',
+		previousImage: 'Previous image',
 		siteBanners: 'Site notices',
 		siteNavigation: 'Pages',
 		skipToContent: 'Skip to content',
 	}),
 	sv: Object.freeze({
 		breadcrumb: 'Brödsmulor',
+		colorMode: 'Färgläge',
+		colorModeDark: 'Mörkt',
+		colorModeLight: 'Ljust',
+		colorModeSystem: 'System',
+		displaySettings: 'Visning',
+		focusReading: 'Fokuserad läsning',
+		readingWidth: 'Textbredd',
+		readingWidthNarrow: 'Smal',
+		readingWidthStandard: 'Standard',
+		readingWidthWide: 'Bred',
+		resetDisplaySettings: 'Återställ',
 		dismissBanner: 'Stäng meddelande',
 		built: 'Byggd',
 		images: 'Bilder',
-		navigationBack: 'Tillbaka till sidor',
+		imageCarousel: 'bildkarusell',
+		navigationChildren: 'Undersidor',
 		navigationMenu: 'Meny',
-		navigationOverview: 'Översikt',
+		nextImage: 'Nästa bild',
 		note: 'Not',
-		pageNavigation: 'På den här sidan',
+		pageNavigation: 'Sidinnehåll',
+		previousImage: 'Föregående bild',
 		siteBanners: 'Meddelanden',
 		siteNavigation: 'Sidor',
 		skipToContent: 'Hoppa till innehållet',
@@ -239,8 +275,8 @@ const siteUrl = readSiteUrl(rawConfig);
 const scrollBehaviorNames = ['instant', 'smooth'];
 
 const defaultFontFamily = "Arial, 'Helvetica Neue', Helvetica, sans-serif";
-const layoutDensityNames = ['compact', 'normal', 'airy'];
-const layoutDensityProfiles = Object.freeze({
+const contentSpacingNames = ['compact', 'normal', 'spacious'];
+const contentSpacingProfiles = Object.freeze({
 	compact: Object.freeze({
 		blockGap: Object.freeze({
 			desktop: '1.25em',
@@ -293,7 +329,7 @@ const layoutDensityProfiles = Object.freeze({
 			mobile: '1.5rem',
 		}),
 	}),
-	airy: Object.freeze({
+	spacious: Object.freeze({
 		blockGap: Object.freeze({
 			desktop: '1.75em',
 			mobile: '1.5em',
@@ -326,12 +362,21 @@ export const resolveThemeVisualConfig = (theme, sourceLabel = siteThemeLabel) =>
 	const rawLayoutSpacingConfig = assertObject(rawLayoutConfig.spacing ?? {}, 'layout.spacing', sourceLabel);
 	const rawImagesConfig = assertObject(rawThemeConfig.images ?? {}, 'images', sourceLabel);
 	const rawTypographyConfig = assertObject(rawThemeConfig.typography ?? {}, 'typography', sourceLabel);
-	const resolvedLayoutDensity = readEnum(rawLayoutConfig, 'density', 'layout', layoutDensityNames, 'normal', sourceLabel);
-	const resolvedLayoutSpacingDefaults = layoutDensityProfiles[resolvedLayoutDensity];
+	const resolvedContentSpacing = readEnum(rawLayoutConfig, 'contentSpacing', 'layout', contentSpacingNames, 'normal', sourceLabel);
+	const resolvedLayoutSpacingDefaults = contentSpacingProfiles[resolvedContentSpacing];
+	const corners = readEnum(rawThemeConfig, 'corners', 'theme', ['square', 'rounded'], 'rounded', sourceLabel);
 
 	return Object.freeze({
 		layout: Object.freeze({
-			density: resolvedLayoutDensity,
+			contentSpacing: resolvedContentSpacing,
+			textWidth: readEnum(rawLayoutConfig, 'textWidth', 'layout', ['narrow', 'normal', 'wide'], 'normal', sourceLabel),
+			localNavigationGap: readCssLengthValue(
+				rawLayoutConfig.localNavigationGap ?? 'clamp(1.5rem, 3vw, 3rem)',
+				'layout.localNavigationGap',
+				sourceLabel,
+			),
+			noteWidth: readCssLengthValue(rawLayoutConfig.noteWidth ?? '12rem', 'layout.noteWidth', sourceLabel),
+			noteGap: readCssLengthValue(rawLayoutConfig.noteGap ?? '1.25rem', 'layout.noteGap', sourceLabel),
 			gutter: readResponsiveCssLength(rawLayoutConfig, 'gutter', 'layout', Object.freeze({
 				desktop: 'clamp(1.25rem, 4vw, 3rem)',
 				mobile: '1rem',
@@ -360,12 +405,17 @@ export const resolveThemeVisualConfig = (theme, sourceLabel = siteThemeLabel) =>
 		typography: Object.freeze({
 			fontFamily: readFontFamily(rawTypographyConfig, 'fontFamily', 'typography', defaultFontFamily, sourceLabel),
 		}),
+		corners: Object.freeze({
+			name: corners,
+			radiusSmall: corners === 'square' ? '0' : '2px',
+			radiusMedium: corners === 'square' ? '0' : '6px',
+			radiusLarge: corners === 'square' ? '0' : '8px',
+		}),
 	});
 };
 
-export const resolveThemeNavigationConfig = (theme, sourceLabel = siteThemeLabel) => {
-	const resolvedTheme = assertObject(resolveThemeConfig(theme, sourceLabel), 'theme YAML', sourceLabel);
-	const rawNavigation = assertObject(resolvedTheme.navigation ?? {}, 'navigation', sourceLabel);
+export const resolveNavigationConfig = (config, sourceLabel = siteConfigLabel) => {
+	const rawNavigation = assertObject(config.navigation ?? {}, 'navigation', sourceLabel);
 
 	return Object.freeze({
 		mode: readEnum(
@@ -376,6 +426,13 @@ export const resolveThemeNavigationConfig = (theme, sourceLabel = siteThemeLabel
 			'automatic',
 			sourceLabel,
 		),
+		sectionTracking: readBoolean(
+			rawNavigation,
+			'sectionTracking',
+			'navigation',
+			false,
+			sourceLabel,
+		),
 	});
 };
 
@@ -386,7 +443,7 @@ export const projectConfig = Object.freeze({
 	}),
 	...resolveThemeVisualConfig(rawTheme, siteThemeLabel),
 	navigation: Object.freeze({
-		...resolveThemeNavigationConfig(rawTheme, siteThemeLabel),
+		...resolveNavigationConfig(rawConfig, siteConfigLabel),
 		scrollBehavior: readEnum(
 			rawConfig,
 			'scrollBehavior',

package/scripts/lib/schema-definitions.mjs

@@ -1,5 +1,6 @@
 import { z } from 'astro/zod';
 import { navigationModeNames } from './navigation-model.mjs';
+import { presentationPaletteNames } from './presentation-palette-metadata.mjs';
 import { themePresetNames } from './theme-presets.mjs';
 
 const isDateOnly = (value) => {
@@ -11,18 +12,37 @@ const isDateOnly = (value) => {
 
 const textAlign = z.enum(['left', 'center', 'right']).describe('Text alignment. Omit an override to keep the active typography profile.');
 const textSize = z.enum(['small', 'medium', 'large', 'xlarge']).describe('Text size from the active typography system. Omit an override to keep the profile value.');
-const textWidth = z.enum(['narrow', 'normal', 'wide']).describe('Maximum width of body text. Omit an override to keep the profile value.');
+const textWidth = z.enum(['narrow', 'normal', 'wide']).describe('Maximum width of body text. Omit this to keep the inherited page setting.');
 const headingWeight = z.union([z.literal(400), z.literal(500), z.literal(600), z.literal(700)]).describe('CSS font weight.');
 const typographyProfile = z.enum(['restrained', 'dense', 'reading', 'statement']).describe('Coordinated typography defaults. Omit this to use the selected preset.');
 const themePreset = z.enum(themePresetNames).describe('Complete Norna visual preset. Start here and add overrides only when needed.');
-const presentationPalette = z.enum(['dark', 'light', 'paper']).describe('Coordinated site color palette. Omit this to use the selected preset.');
-const sectionSurface = z.enum(['base', 'soft', 'emphasis']).describe('Semantic section surface from the active palette.');
+const presentationPalette = z.enum(presentationPaletteNames).describe('Coordinated site color palette. Every palette provides light and dark variants. Omit this to use the selected preset.');
+const themeColorMode = z.object({
+	default: z.enum(['system', 'light', 'dark']).optional().describe('Initial color mode. System follows the visitor\'s operating-system preference.'),
+}).strict().refine(
+	(value) => value.default !== undefined,
+	'Specify default.',
+).describe('Site-wide light and dark mode behaviour.');
+const readerControls = z.object({
+	colorMode: z.boolean().optional().describe('Let readers choose System, Light, or Dark color mode in the site-wide Display panel.'),
+	focusReading: z.boolean().optional().describe('Let readers temporarily hide navigation and other secondary page chrome while reading. Tree navigation always provides this control.'),
+}).strict().refine(
+	(value) => value.colorMode !== undefined || value.focusReading !== undefined,
+	'Specify colorMode, focusReading, or both.',
+).describe('Optional site-wide reader choices grouped with the always-available reading-width choice in the Display panel.');
 const spacingDensity = z.enum(['compact', 'normal', 'airy']).describe('Coordinated spacing density. Omit this to use the selected preset.');
+const contentSpacing = z.enum(['compact', 'normal', 'spacious']).describe('Vertical spacing between page sections and structured content blocks.');
+const backgroundPattern = z.enum(['uniform', 'alternating', 'accented']).describe('How coordinated backgrounds are assigned to H2 sections. Non-uniform patterns are unavailable with tree navigation.');
+const cornerTreatment = z.enum(['square', 'rounded']).describe('Site-wide corner treatment for navigation, cards and framed content.');
+const cardListWidth = z.enum(['text', 'narrow', 'normal', 'wide']).describe('Default maximum width for card lists. A width written in a norna-card-list block overrides this value.');
 const navigationMode = z.enum(navigationModeNames).describe('Site-wide navigation model. Automatic selects from the site structure.');
-const lineHeight = z.number()
-	.min(1, 'Use a unitless line height of at least 1.')
-	.max(3, 'Use a unitless line height of at most 3.')
-	.describe('Unitless line height between 1 and 3.');
+const createLineHeight = (minimum, role) => z.number()
+	.min(minimum, `Use a unitless ${role} line height of at least ${minimum}.`)
+	.max(3, `Use a unitless ${role} line height of at most 3.`)
+	.describe(`Unitless ${role} line height between ${minimum} and 3.`);
+const headingLineHeight = createLineHeight(1, 'heading');
+const bodyLineHeight = createLineHeight(1.4, 'body-text');
+const captionLineHeight = createLineHeight(1.25, 'caption');
 const cssLength = z.string().regex(
 	/^(?:0|(?:\d+(?:\.\d+)?|\.\d+)(?:px|rem|em|ch|lh))$/,
 	'Use a CSS length such as "0", "0.8em", "1rem", or "12px".',
@@ -57,10 +77,10 @@ const overrideResponsiveTextAlign = z.object({
 const commonTextPresentationOverride = {
 	align: overrideResponsiveTextAlign.optional().describe('Responsive text alignment override.'),
 	size: textSize.optional(),
-	lineHeight: lineHeight.optional(),
 };
 const headingPresentationOverride = z.object({
 	...commonTextPresentationOverride,
+	lineHeight: headingLineHeight.optional(),
 	weight: headingWeight.optional().describe('Heading font weight. Omit this to keep the profile value.'),
 	spacingBefore: cssLength.optional().describe('Vertical space before the heading.'),
 	spacingAfter: cssLength.optional().describe('Vertical space after the heading.'),
@@ -73,11 +93,12 @@ const headingLevelsPresentationOverride = z.object({
 }).strict().describe('Heading overrides by Markdown level.');
 const bodyPresentationOverride = z.object({
 	...commonTextPresentationOverride,
-	width: textWidth.optional().describe('Maximum body-text line length.'),
+	lineHeight: bodyLineHeight.optional(),
 	paragraphSpacing: cssLength.optional().describe('Vertical space between body paragraphs.'),
 }).strict().describe('Focused overrides for body text.');
 const captionPresentationOverride = z.object({
 	...commonTextPresentationOverride,
+	lineHeight: captionLineHeight.optional(),
 	spacingBefore: cssLength.optional().describe('Vertical space between an image and its caption.'),
 }).strict().describe('Focused overrides for image captions.');
 const typographyOverrides = z.object({
@@ -121,23 +142,46 @@ const themeLayoutSpacing = z.object({
 	sectionGap: responsiveCssLength.optional().describe('Vertical separation between page sections.'),
 }).strict().describe('Fine-grained spacing overrides applied after layout density.');
 const themeLayout = z.object({
-	density: spacingDensity.optional().describe('Overall spacing density. Omit this to keep the selected preset.'),
+	contentSpacing: contentSpacing.optional().describe('Page content spacing. Omit this to keep the selected preset or inherited page setting.'),
+	textWidth: textWidth.optional().describe('Body-text line length. Omit this to keep the selected preset or inherited page setting.'),
 	pageWidth: visualCssLength.optional().describe('Maximum width of the site layout. Omit this to keep the selected preset.'),
 	gutter: responsiveCssLength.optional().describe('Horizontal page gutter as one value or separate desktop and mobile values.'),
 	spacing: themeLayoutSpacing.optional().describe('Fine-grained spacing overrides.'),
 }).strict().describe('Optional layout overrides applied after the preset.');
+const pageThemeLayout = z.object({
+	contentSpacing: contentSpacing.optional().describe('Page content spacing. Descendant pages inherit this value.'),
+	textWidth: textWidth.optional().describe('Body-text line length. Descendant pages inherit this value.'),
+}).strict().refine(
+	(value) => value.contentSpacing !== undefined || value.textWidth !== undefined,
+	'Specify contentSpacing, textWidth, or both.',
+).describe('Page-local layout settings inherited by descendant pages.');
 const themeImages = z.object({
 	width: visualCssLength.optional().describe('Maximum managed-image width. Omit this to keep the selected preset.'),
 	maxAvailableWidthPercent: responsivePercent.optional().describe('Maximum percentage of available horizontal space used by managed images.'),
 	maxAvailableHeightPercent: responsivePercent.optional().describe('Maximum percentage of viewport height used by managed images.'),
 }).strict().describe('Optional defaults for managed image presentation.');
-const themeNavigation = z.object({
-	mode: navigationMode.optional().describe('Navigation model. Omit this to keep the selected preset.'),
-}).strict().describe('Site-wide navigation behavior. This may be set only in the root theme.');
-const sectionSurfaces = z.array(sectionSurface).min(1).max(3).refine(
-	(value) => new Set(value).size === value.length,
-	'Each section surface may appear only once.',
-).describe('Surface sequence cycled across page sections.');
+const themeCardList = z.object({
+	width: cardListWidth,
+}).strict().describe('Site-wide card-list defaults.');
+const themeBlocks = z.object({
+	cardList: themeCardList.optional(),
+}).strict().refine(
+	(value) => value.cardList !== undefined,
+	'Specify cardList.',
+).describe('Optional site-wide defaults for structured Norna content blocks.');
+const configNavigation = z.object({
+	mode: navigationMode.optional().describe('Navigation model. Omit this to let Norna choose from the site structure.'),
+	sectionTracking: z.boolean().optional().default(false).describe('As the reader scrolls in tree navigation, mark the last H2 or H3 that has reached the reading area below the sticky header. The URL and keyboard focus do not change.'),
+}).strict().describe('Site-wide navigation behavior.');
+const themeSections = z.object({
+	backgroundPattern: backgroundPattern.optional().describe('Section background pattern. Alternating and accented create full-width bands with sections or top navigation; tree navigation requires uniform.'),
+}).strict().describe('Defaults for page section presentation.');
+const pageThemeSections = z.object({
+	backgroundPattern: backgroundPattern.optional().describe('Section background sequence inherited by descendant pages. Non-uniform patterns are invalid with tree navigation.'),
+}).strict().refine(
+	(value) => value.backgroundPattern !== undefined,
+	'Specify backgroundPattern.',
+).describe('Page-local section presentation inherited by descendant pages.');
 const pageNavigation = z.object({
 	listed: z.boolean().optional().default(true).describe('List this page in site navigation. The page remains public when false.'),
 }).strict();
@@ -145,7 +189,7 @@ const pageMetadata = z.object({
 	description: z.string().min(1).optional().describe('Optional page-specific meta description.'),
 }).strict().describe('Optional metadata for this homepage or additional page. The Markdown H1 supplies the page title.');
 const sitewideLogo = z.object({
-	height: visualCssLength.optional().describe('Displayed logo height. Width follows the intrinsic aspect ratio.'),
+	height: visualCssLength.optional().describe('Displayed logo height on wider screens. Omit it to use 2.6rem; narrow screens cap the height at 2.15rem. Width follows the intrinsic aspect ratio.'),
 }).strict().describe('Optional display settings for a convention-based navigation logo.');
 
 const banner = z.object({
@@ -167,6 +211,7 @@ const sitewideFooter = z.object({
 const configShape = {
 	url: z.string().url().describe('Absolute public URL for the built site.'),
 	language: z.string().regex(/^(?:en|sv)(?:-[a-zA-Z0-9]+)*$/).optional().describe('Site language tag using Norna\'s English or Swedish interface text; the default is en.'),
+	navigation: configNavigation.optional(),
 	scrollBehavior: z.enum(['instant', 'smooth']).optional().default('instant').describe('Use instant anchors by default or the browser\'s native smooth scrolling.'),
 };
 
@@ -177,12 +222,21 @@ const siteShape = {
 
 const themeVisualShape = {
 	preset: themePreset.optional().describe('Complete visual starting point. Add only the overrides the site actually needs.'),
-	navigation: themeNavigation.optional(),
+	colorMode: themeColorMode.optional(),
+	readerControls: readerControls.optional(),
+	corners: cornerTreatment.optional().describe('Site-wide corner treatment. Omit this to use the selected preset.'),
 	layout: themeLayout.optional(),
 	images: themeImages.optional(),
+	blocks: themeBlocks.optional(),
 	typography: themeTypography.optional(),
 	palette: presentationPalette.optional(),
-	sectionSurfaces: sectionSurfaces.optional().describe('Surface sequence cycled through page sections. Omit this to keep the selected preset.'),
+	sections: themeSections.optional(),
+};
+
+const pageThemeShape = {
+	layout: pageThemeLayout.optional(),
+	images: themeImages.optional(),
+	sections: pageThemeSections.optional(),
 };
 
 const sitewideShape = {
@@ -191,18 +245,32 @@ const sitewideShape = {
 	footer: sitewideFooter.optional().describe('Site-wide footer content.'),
 };
 
+const categoryShape = {
+	label: z.string().trim().min(1).describe('Navigation label for this non-routable page category.'),
+};
+
 export const schemaTopLevelKeys = Object.freeze({
 	config: Object.freeze(Object.keys(configShape)),
+	category: Object.freeze(Object.keys(categoryShape)),
 	content: Object.freeze(Object.keys(siteShape)),
 	sitewide: Object.freeze(Object.keys(sitewideShape)),
 	theme: Object.freeze(Object.keys(themeVisualShape)),
+	pageTheme: Object.freeze(Object.keys(pageThemeShape)),
 });
 
 export const configSchema = z.object(configShape).strict()
 	.describe('Technical settings for one Norna site. Additional pages cannot provide technical configuration.');
+export const categorySchema = z.object(categoryShape).strict()
+	.describe('A non-routable navigation category containing child pages.');
 export const siteSchema = z.object(siteShape).strict()
 	.describe('Frontmatter for a homepage or additional page content.md file.');
 export const themeVisualSchema = z.object(themeVisualShape).strict()
-	.describe('Visual settings for a site or page. A page theme replaces the inherited visual theme; navigation logo settings remain site-wide.');
+	.describe('Site-wide visual identity and default page presentation. Presets may be selected only in the root theme.');
+export const pageThemeSchema = z.object(pageThemeShape).strict()
+	.refine(
+		(value) => value.layout !== undefined || value.images !== undefined || value.sections !== undefined,
+		'Specify layout, images, sections, or a combination of them.',
+	)
+	.describe('Limited page presentation overrides inherited by descendant pages. Site colors, corners, typography, content-block defaults and navigation remain global.');
 export const sitewideSchema = z.object(sitewideShape).strict()
 	.describe('Editorial content and optional navigation logo display settings shared by every page.');