@janga/norna 0.7.13 → 0.7.15

package/src/styles/global.css

@@ -18,14 +18,14 @@
 	--font-serif: Georgia, 'Times New Roman', serif;
 	--page-width: 1180px;
 	--text-width: 680px;
-	--gallery-width: 900px;
-	--gallery-max-available-width-desktop: 100%;
-	--gallery-max-available-width-mobile: 100%;
-	--gallery-max-available-width: var(--gallery-max-available-width-desktop);
-	--gallery-layout-width: min(var(--gallery-width), var(--gallery-max-available-width));
-	--gallery-max-image-height-desktop: 74svh;
-	--gallery-max-image-height-mobile: 68svh;
-	--gallery-max-image-height: var(--gallery-max-image-height-desktop);
+	--image-width: 900px;
+	--image-max-available-width-desktop: 100%;
+	--image-max-available-width-mobile: 100%;
+	--image-max-available-width: var(--image-max-available-width-desktop);
+	--image-layout-width: min(var(--image-width), var(--image-max-available-width));
+	--image-max-height-desktop: 74svh;
+	--image-max-height-mobile: 68svh;
+	--image-max-height: var(--image-max-height-desktop);
 	--nav-top-safety-inset: 0px;
 
 	--space-nav-to-first-section-desktop: clamp(1.875rem, 3vw, 2.75rem);
@@ -38,9 +38,9 @@
 	--space-heading-to-block-desktop: 0.75em;
 	--space-heading-to-block-mobile: 0.7em;
 	--space-heading-to-block: var(--space-heading-to-block-desktop);
-	--space-gallery-item-desktop: clamp(1.5rem, 3.5vw, 2.75rem);
-	--space-gallery-item-mobile: 2.75rem;
-	--space-gallery-item: var(--space-gallery-item-desktop);
+	--space-image-item-desktop: clamp(1.5rem, 3.5vw, 2.75rem);
+	--space-image-item-mobile: 2.75rem;
+	--space-image-item: var(--space-image-item-desktop);
 	--space-section-to-section-desktop: clamp(2.55rem, 4.2vw, 3.9rem);
 	--space-section-to-section-mobile: 2.25rem;
 	--space-section-to-section: var(--space-section-to-section-desktop);
@@ -625,7 +625,7 @@ ul {
 }
 
 .section-markdown > :last-child,
-.gallery-meta :last-child {
+.image-meta :last-child {
 	margin-bottom: 0;
 }
 
@@ -683,10 +683,10 @@ ul {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
 	gap: var(--card-list-gap, clamp(0.9rem, 2vw, 1.25rem));
-	width: min(100%, var(--card-list-width, var(--gallery-layout-width)));
+	width: min(100%, var(--card-list-width, min(56rem, var(--page-width))));
 	margin: 0 auto;
 	text-align: left;
-	--card-list-width: var(--gallery-layout-width);
+	--card-list-width: min(56rem, var(--page-width));
 	--card-list-gap: clamp(0.9rem, 2vw, 1.25rem);
 	--card-list-item-gap: 0.85rem;
 	--card-list-padding: clamp(0.9rem, 2vw, 1.15rem);
@@ -699,7 +699,7 @@ ul {
 
 .section-body > .section-reading-layout:not(:last-child),
 .section-body > .section-markdown:not(:last-child),
-.section-body > .gallery:not(:last-child) {
+.section-body > :is(.image-stack, .managed-images):not(:last-child) {
 	margin-bottom: var(--space-content-block-gap);
 }
 
@@ -739,7 +739,7 @@ ul {
 }
 
 .card-list-width-narrow {
-	--card-list-width: min(48rem, var(--gallery-layout-width));
+	--card-list-width: min(48rem, var(--page-width));
 }
 
 .card-list-width-wide {
@@ -892,120 +892,120 @@ ul {
 	line-height: var(--section-body-line-height, 1.5);
 }
 
-.gallery {
+:is(.image-stack, .managed-images) {
 	display: grid;
-	gap: var(--space-gallery-item);
+	gap: var(--space-image-item);
 	margin-top: 0;
 }
 
-.gallery-item {
+.managed-image-item {
 	display: grid;
 	gap: 0.55rem;
 	align-content: start;
 	margin: 0;
 }
 
-.gallery-image-frame {
+.managed-image-frame {
 	display: grid;
-	width: min(100%, var(--gallery-layout-width));
+	width: min(100%, var(--image-layout-width));
 	margin: 0 auto;
 	background: transparent;
 	place-items: center;
 }
 
-.gallery-image {
+.managed-image {
 	display: block;
 	width: auto;
 	margin: 0 auto;
 	background: transparent;
 	height: auto;
 	max-width: 100%;
-	max-height: var(--gallery-max-image-height);
+	max-height: var(--image-max-height);
 	object-fit: contain;
 }
 
-.gallery-image.gallery-image-landscape {
+.managed-image.managed-image-landscape {
 	width: 100%;
 	max-height: none;
 }
 
-.gallery-carousel {
+.image-carousel {
 	position: relative;
 	outline: none;
 }
 
-.gallery-carousel:focus-visible {
+.image-carousel:focus-visible {
 	outline: 2px solid currentColor;
 	outline-offset: 0.5rem;
 }
 
-.gallery-carousel-slide {
+.image-carousel-slide {
 	flex: 0 0 100%;
 	min-width: 0;
 	margin: 0;
 }
 
-.gallery-carousel-stage {
+.image-carousel-stage {
 	position: relative;
 	display: grid;
-	width: min(100%, var(--gallery-layout-width));
-	max-height: var(--gallery-max-image-height);
+	width: min(100%, var(--image-layout-width));
+	max-height: var(--image-max-height);
 	margin: 0 auto;
-	aspect-ratio: var(--gallery-carousel-aspect-ratio, auto);
+	aspect-ratio: var(--image-carousel-aspect-ratio, auto);
 }
 
-.gallery-carousel-viewport {
+.image-carousel-viewport {
 	height: 100%;
 }
 
-.gallery-carousel-image-frame {
+.image-carousel-frame {
 	display: grid;
 	width: 100%;
 	height: 100%;
 	place-items: center;
 }
 
-.gallery-carousel[data-carousel-ready='true'] .gallery-carousel-viewport {
+.image-carousel[data-carousel-ready='true'] .image-carousel-viewport {
 	overflow: hidden;
 }
 
-.gallery-carousel[data-carousel-ready='true'] .gallery-carousel-slides {
+.image-carousel[data-carousel-ready='true'] .image-carousel-slides {
 	display: flex;
 	height: 100%;
 	touch-action: pan-y pinch-zoom;
 }
 
-.gallery-carousel[data-carousel-ready='true'] .gallery-carousel-slide {
+.image-carousel[data-carousel-ready='true'] .image-carousel-slide {
 	display: grid;
 	height: 100%;
 	align-content: start;
 }
 
-.gallery-carousel-image-frame .gallery-image.gallery-image-landscape {
+.image-carousel-frame .managed-image.managed-image-landscape {
 	width: 100%;
 	height: auto;
 	max-width: 100%;
 	max-height: 100%;
 }
 
-.gallery-carousel-image-frame .gallery-image:not(.gallery-image-landscape) {
+.image-carousel-frame .managed-image:not(.managed-image-landscape) {
 	width: auto;
 	height: 100%;
 	max-width: 100%;
 	max-height: 100%;
 }
 
-.gallery-carousel-button,
-.gallery-carousel-position {
+.image-carousel-button,
+.image-carousel-position {
 	display: none;
 }
 
-.gallery-carousel[data-carousel-ready='true'] .gallery-carousel-button,
-.gallery-carousel[data-carousel-ready='true'] .gallery-carousel-position {
+.image-carousel[data-carousel-ready='true'] .image-carousel-button,
+.image-carousel[data-carousel-ready='true'] .image-carousel-position {
 	display: grid;
 }
 
-.gallery-carousel-button {
+.image-carousel-button {
 	position: absolute;
 	top: 50%;
 	z-index: 2;
@@ -1026,28 +1026,28 @@ ul {
 	transform: translateY(-50%);
 }
 
-.gallery-carousel-button:hover:not(:disabled),
-.gallery-carousel-button:focus-visible:not(:disabled) {
+.image-carousel-button:hover:not(:disabled),
+.image-carousel-button:focus-visible:not(:disabled) {
 	background: currentColor;
 	color: var(--section-background-color, var(--color-page));
 	opacity: 1;
 }
 
-.gallery-carousel-button:disabled {
+.image-carousel-button:disabled {
 	cursor: default;
 	opacity: 0;
 	pointer-events: none;
 }
 
-.gallery-carousel-button-previous {
+.image-carousel-button-previous {
 	left: 0.75rem;
 }
 
-.gallery-carousel-button-next {
+.image-carousel-button-next {
 	right: 0.75rem;
 }
 
-.gallery-carousel-position {
+.image-carousel-position {
 	position: absolute;
 	right: 0.75rem;
 	bottom: 0.75rem;
@@ -1063,38 +1063,38 @@ ul {
 	text-align: center;
 }
 
-.gallery-carousel-captions {
-	width: min(100%, var(--gallery-layout-width), 72ch);
+.image-carousel-captions {
+	width: min(100%, var(--image-layout-width), 72ch);
 	margin: 0 auto;
 }
 
-.gallery-carousel-caption {
+.image-carousel-caption {
 	margin-bottom: 0;
 }
 
-.gallery-carousel[data-carousel-ready='true'] .gallery-carousel-captions {
+.image-carousel[data-carousel-ready='true'] .image-carousel-captions {
 	display: grid;
 }
 
-.gallery-carousel[data-carousel-ready='true'] .gallery-carousel-caption {
+.image-carousel[data-carousel-ready='true'] .image-carousel-caption {
 	grid-area: 1 / 1;
 	visibility: hidden;
 	pointer-events: none;
 }
 
-.gallery-carousel[data-carousel-ready='true'] .gallery-carousel-caption.is-active {
+.image-carousel[data-carousel-ready='true'] .image-carousel-caption.is-active {
 	visibility: visible;
 	pointer-events: auto;
 }
 
-.gallery-meta {
-	width: min(100%, var(--gallery-layout-width), 72ch);
+.image-meta {
+	width: min(100%, var(--image-layout-width), 72ch);
 	margin: var(--section-caption-spacing-before, 0.5em) auto 0;
 	font-size: var(--section-caption-font-size-desktop, 0.95rem);
 	text-align: var(--section-caption-align-desktop, center);
 }
 
-.gallery-details {
+.image-details {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: baseline;
@@ -1113,12 +1113,12 @@ ul {
 		--space-nav-to-first-section: var(--space-nav-to-first-section-mobile);
 		--space-content-block-gap: var(--space-content-block-gap-mobile);
 		--space-heading-to-block: var(--space-heading-to-block-mobile);
-		--space-gallery-item: var(--space-gallery-item-mobile);
+		--space-image-item: var(--space-image-item-mobile);
 		--space-section-to-section: var(--space-section-to-section-mobile);
 		--space-final-section-bottom: var(--space-final-section-bottom-mobile);
 		--content-gutter: var(--content-gutter-mobile);
-		--gallery-max-available-width: var(--gallery-max-available-width-mobile);
-		--gallery-max-image-height: var(--gallery-max-image-height-mobile);
+		--image-max-available-width: var(--image-max-available-width-mobile);
+		--image-max-height: var(--image-max-height-mobile);
 		--site-top-anchor-offset: 6.25rem;
 	}
 
@@ -1286,12 +1286,12 @@ ul {
 		text-align: var(--section-body-align-mobile, var(--section-body-align-desktop, left));
 	}
 
-	.gallery-meta {
+	.image-meta {
 		font-size: var(--section-caption-font-size-mobile, var(--section-caption-font-size-desktop, 0.95rem));
 		text-align: var(--section-caption-align-mobile, var(--section-caption-align-desktop, center));
 	}
 
-	.gallery-details {
+	.image-details {
 		justify-content: var(--section-caption-justify-mobile, var(--section-caption-justify-desktop, center));
 	}
 
@@ -1321,25 +1321,25 @@ ul {
 		display: block;
 	}
 
-	.gallery-item img {
-		max-height: var(--gallery-max-image-height);
+	.managed-image-item img {
+		max-height: var(--image-max-height);
 	}
 
-	.gallery-carousel-stage {
+	.image-carousel-stage {
 		aspect-ratio: auto;
 	}
 
-	.gallery-carousel-viewport {
+	.image-carousel-viewport {
 		width: 100%;
 		height: auto;
-		aspect-ratio: var(--gallery-carousel-aspect-ratio, auto);
+		aspect-ratio: var(--image-carousel-aspect-ratio, auto);
 	}
 
-	.gallery-carousel[data-carousel-ready='true'] .gallery-carousel-button {
+	.image-carousel[data-carousel-ready='true'] .image-carousel-button {
 		display: none;
 	}
 
-	.gallery-carousel-position {
+	.image-carousel-position {
 		position: absolute;
 		right: 0.5rem;
 		bottom: 0.5rem;
@@ -1350,11 +1350,11 @@ ul {
 		opacity: 0.88;
 	}
 
-	.gallery {
-		gap: var(--space-gallery-item);
+	:is(.image-stack, .managed-images) {
+		gap: var(--space-image-item);
 	}
 
-	.gallery-details {
+	.image-details {
 		padding: 0 0.25rem;
 		font-size: 1rem;
 	}

package/starters/basic/.github/workflows/deploy.yml

@@ -42,7 +42,7 @@ jobs:
         run: npm ci
 
       - name: Check and build
-        run: npm run build
+        run: npm run norna:build
 
       - name: Configure Pages
         uses: actions/configure-pages@v5

package/starters/basic/README.md

@@ -6,19 +6,20 @@ This is a minimal site repository starter for `@janga/norna`.
 
 ```sh
 npm install
-npm run dev
+npm run norna:dev
 ```
 
 If the standard local port is blocked, start with:
 
 ```sh
-npm run dev -- --kill
+npm run norna:dev -- --kill
 ```
 
-Edit shared brand, logo, banners and footer in `site/sitewide-content.md`,
-site-wide visual defaults in `site/theme.md`, homepage content and section
+Edit the shared navigation label, 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/content.md`, and technical settings such as URL and locale
-in `site/config.md`. Keep source images under `site/images/<section-id>/`
+in `site/config.yaml`. Keep source images under `site/images/<section-id>/`
 and static public files under `site/public/`. The image folder name should
 match the section id in Markdown, for example `## Work {#work}` uses
 `site/images/work/`.
@@ -27,9 +28,7 @@ For a GitHub Pages project site without a custom domain, include the repository
 path in the public URL:
 
 ```yaml
----
 url: https://owner.github.io/repository-name/
----
 ```
 
 Norna derives `/repository-name/` as the base path. Use a root URL such as
@@ -39,8 +38,8 @@ In GitHub repository settings, configure Pages to build from GitHub Actions.
 
 Page width, side gutters, layout density, typography rhythm, image width, image
 height limits, font, palettes, section surfaces, and site-wide typography are
-configured in `site/theme.md`. A route may replace that visual theme with its
-own `theme.md`.
+configured in `site/theme.yaml`. A route may replace that visual theme with its
+own `theme.yaml`.
 
 Commit `package-lock.json` after the first install so GitHub Actions can use
 `npm ci`.
@@ -50,15 +49,18 @@ Use `norna:*` scripts for norna-specific work:
 ```sh
 npm run norna:content:check
 npm run norna:sync
-npm run norna:typography:presets
+npm run norna:typography:profiles
 npm run norna:typography:show
 npm run norna:build
 ```
 
 This keeps Norna commands separate from repository-specific build or publishing
 commands in projects that embed a Norna site inside a larger GitHub project.
-This pure starter also keeps `npm run build` as an alias for
-`npm run norna:build`.
+This standalone starter also keeps `npm run dev` and `npm run build` as aliases.
+
+For direct `norna dev`, `norna check`, and `norna build` commands, install the
+launcher globally with `npm install --global @janga/norna@latest`. The launcher
+still selects this project's locally installed Norna version.
 
 Use `npm run norna:engine:version` to inspect the installed engine and
 `npm run norna:engine:update` to update it.
@@ -66,7 +68,8 @@ Use `npm run norna:engine:version` to inspect the installed engine and
 Generic documentation lives in the `norna` repository:
 
 - `docs/getting-started.md`
-- `docs/site-structure.md`
+- `docs/site-files.md`
+- `docs/public-files.md`
 - `docs/content.md`
 - `docs/theme.md`
 - `docs/typography.md`

package/starters/basic/package.json

@@ -10,12 +10,13 @@
     "norna:dev:status": "norna dev:status",
     "norna:dev:logs": "norna dev:logs",
     "norna:dev:stop": "norna dev:stop",
-    "norna:check": "npm run norna:config:check && npm run norna:content:check",
+    "norna:check": "norna check",
     "norna:config:check": "norna config:check",
     "norna:content:check": "norna content:check",
     "norna:sync": "norna content:sync",
+    "norna:theme:presets": "norna theme:presets",
     "norna:theme:export": "norna theme:export",
-    "norna:typography:presets": "norna typography presets",
+    "norna:typography:profiles": "norna typography profiles",
     "norna:typography:show": "norna typography show",
     "norna:public": "norna site:public",
     "norna:images": "norna images",

package/starters/basic/site/{config.md → config.yaml}

@@ -1,3 +1 @@
----
 url: https://example.com/
----

package/starters/basic/site/content.md

@@ -9,7 +9,7 @@ routes defined, the navigation menu will be a sticky bar with anchor links for
 ease of use on phones etc. **Highlighted inline text** when a short
 phrase needs emphasis
 ## Work {#work}
-Add Norna managed media blocks in Markdown where the media should appear. Put
+Add Norna image blocks in Markdown where the images should appear. Put
 matching source images under `images/work/`.
 
 ````

package/starters/basic/site/{sitewide-content.md → sitewide-content.yaml}

@@ -1,6 +1,5 @@
----
 navigation:
-  brand: Example Site
+  label: Example Site
 footer:
   copyrightMessage: (c) Example Owner.
   buildInfo:
@@ -11,4 +10,3 @@ footer:
       timeZone: UTC
       dateStyle: short
       timeStyle: short
----

package/starters/basic/site/{theme.md → theme.yaml}

@@ -1,4 +1,3 @@
----
 # norna:start theme-help
 # Site-wide visual defaults. Remove a value to use the engine default.
 # Active values below are ordinary YAML; this marked comment block is only help text.
@@ -29,7 +28,7 @@
 #     imageGap:
 #       desktop: CSS length or clamp(), e.g. clamp(1.25rem, 2.8vw, 2rem)
 #       mobile: CSS length, e.g. 1.5rem
-# gallery:
+# images:
 #   width: CSS length, e.g. 900px
 #   maxAvailableWidthPercent:
 #     desktop: number from 1 through 100
@@ -39,7 +38,7 @@
 #     mobile: number from 1 through 100
 # typography:
 #   fontFamily: CSS font-family stack
-#   preset: quiet-gallery | compact-gallery | text-forward | statement
+#   profile: restrained | dense | reading | statement
 #   rhythm: compact | normal | airy
 #   overrides:
 #     headings:
@@ -81,11 +80,8 @@
 #       size: small | medium | large | xlarge
 #       lineHeight: number from 1 through 3
 #       spacingBefore: CSS length, e.g. 0.5em
-# presentation:
-#   palette: dark  # Alternatives: light, paper
-#   sectionSurfaces:
-#     mode: none | cycle
-#     sequence: [base, soft, emphasis]
+# palette: dark  # Alternatives: light, paper
+# sectionSurfaces: [base, soft, emphasis]
 # norna:end theme-help
 layout:
   density: normal
@@ -93,7 +89,7 @@ layout:
   gutter:
     desktop: clamp(1.25rem, 4vw, 3rem)
     mobile: 1rem
-gallery:
+images:
   width: 900px
   maxAvailableWidthPercent:
     desktop: 100
@@ -103,10 +99,7 @@ gallery:
     mobile: 68
 typography:
   fontFamily: "Arial, 'Helvetica Neue', Helvetica, sans-serif"
-  preset: quiet-gallery
+  profile: restrained
   rhythm: normal
-presentation:
-  palette: dark  # Alternatives: light, paper
-  sectionSurfaces:
-    mode: cycle
----
+palette: dark  # Alternatives: light, paper
+sectionSurfaces: [base, soft, emphasis]

package/starters/project/.github/workflows/deploy.yml

@@ -42,7 +42,7 @@ jobs:
         run: npm ci
 
       - name: Check and build
-        run: npm run build
+        run: npm run norna:build
 
       - name: Configure Pages
         uses: actions/configure-pages@v5

package/starters/project/README.md

@@ -7,25 +7,25 @@ libraries, and similar project sites.
 
 ```sh
 npm install
-npm run dev
+npm run norna:dev
 ```
 
 If the standard local port is blocked, start with:
 
 ```sh
-npm run dev -- --kill
+npm run norna:dev -- --kill
 ```
 
 ## Files
 
-- `site/config.md`: public URL and optional language and smooth scrolling.
-- `site/sitewide-content.md`: shared brand or logo, banners and footer content.
-- `site/theme.md`: site-wide visual settings such as layout density, typography
+- `site/config.yaml`: public URL and optional language and smooth scrolling.
+- `site/sitewide-content.yaml`: shared navigation identity, banners, and footer.
+- `site/theme.yaml`: site-wide visual settings such as layout density, typography
   rhythm, palettes, section surfaces, and typography.
 - `site/content.md`: homepage title, sections, placeholders, project summary,
-  links, install command, example usage, benefits, next steps, managed media
-  blocks, and license.
-- `site/routes/010-guide/route-content.md`: short secondary page with realistic
+  links, install command, example usage, benefits, next steps, Norna blocks,
+  and license.
+- `site/routes/010-guide/content.md`: short secondary page with realistic
   project guide content.
 - `site/public/robots.txt`: static public file copied into the built site.
 
@@ -37,14 +37,15 @@ GitHub Pages workflow uses `npm ci`.
 
 1. Replace the project name, tagline, links, install command, example usage,
    benefits, use cases, and license in `site/content.md`.
-2. Replace the guide examples in `site/routes/010-guide/route-content.md`, or
+2. Replace the guide examples in `site/routes/010-guide/content.md`, or
    delete the route if the homepage is enough.
-3. Edit `site/sitewide-content.md` for the brand or logo, banners and footer.
-4. Edit `site/theme.md` for layout density, typography rhythm, palette, section
+3. Edit `site/sitewide-content.yaml` for the navigation label, logo display,
+   banners, and footer.
+4. Edit `site/theme.yaml` for layout density, typography rhythm, palette, section
    surfaces, and typography.
 5. Put any local source images in the image folder for the Markdown section
    that references them, for example `site/images/intro/`.
-6. Edit `site/config.md` for the public URL and, when needed, language or smooth
+6. Edit `site/config.yaml` for the public URL and, when needed, language or smooth
    scrolling. Deploy commands discover the GitHub repository and default branch.
 7. Update `package.json` with the site's package name and keep
    `package-lock.json` committed.
@@ -55,20 +56,26 @@ GitHub Pages workflow uses `npm ci`.
 npm run norna:check
 npm run norna:sync
 npm run norna:typography:show
-npm run build
+npm run norna:build
 ```
 
+The standalone aliases `npm run dev` and `npm run build` are also available.
+For direct `norna dev`, `norna check`, and `norna build` commands, install the
+launcher globally with `npm install --global @janga/norna@latest`; it delegates
+to this project's locally installed Norna version.
+
 To verify the same install path used by GitHub Pages:
 
 ```sh
 npm ci
-npm run build
+npm run norna:build
 ```
 
 Generic Norna documentation lives in the Norna repository:
 
 - `docs/getting-started.md`
-- `docs/site-structure.md`
+- `docs/site-files.md`
+- `docs/public-files.md`
 - `docs/content.md`
 - `docs/theme.md`
 - `docs/typography.md`