@janga/norna 0.7.9 → 0.7.11

package/examples/feature-demos/media-and-surfaces/.astro/content-modules.mjs

@@ -0,0 +1 @@
+export default new Map();

package/examples/feature-demos/media-and-surfaces/.astro/content.d.ts

@@ -0,0 +1,183 @@
+declare module 'astro:content' {
+	export interface RenderResult {
+		Content: import('astro/runtime/server/index.js').AstroComponentFactory;
+		headings: import('astro').MarkdownHeading[];
+		remarkPluginFrontmatter: Record<string, any>;
+	}
+	interface Render {
+		'.md': Promise<RenderResult>;
+	}
+
+	export interface RenderedContent {
+		html: string;
+		metadata?: {
+			imagePaths: Array<string>;
+			[key: string]: unknown;
+		};
+	}
+
+	type Flatten<T> = T extends { [K: string]: infer U } ? U : never;
+
+	export type CollectionKey = keyof DataEntryMap;
+	export type CollectionEntry<C extends CollectionKey> = Flatten<DataEntryMap[C]>;
+
+	type AllValuesOf<T> = T extends any ? T[keyof T] : never;
+
+	export type ReferenceDataEntry<
+		C extends CollectionKey,
+		E extends keyof DataEntryMap[C] = string,
+	> = {
+		collection: C;
+		id: E;
+	};
+
+	export type ReferenceLiveEntry<C extends keyof LiveContentConfig['collections']> = {
+		collection: C;
+		id: string;
+	};
+
+	export function getCollection<C extends keyof DataEntryMap, E extends CollectionEntry<C>>(
+		collection: C,
+		filter?: (entry: CollectionEntry<C>) => entry is E,
+	): Promise<E[]>;
+	export function getCollection<C extends keyof DataEntryMap>(
+		collection: C,
+		filter?: (entry: CollectionEntry<C>) => unknown,
+	): Promise<CollectionEntry<C>[]>;
+
+	export function getLiveCollection<C extends keyof LiveContentConfig['collections']>(
+		collection: C,
+		filter?: LiveLoaderCollectionFilterType<C>,
+	): Promise<
+		import('astro').LiveDataCollectionResult<LiveLoaderDataType<C>, LiveLoaderErrorType<C>>
+	>;
+
+	export function getEntry<
+		C extends keyof DataEntryMap,
+		E extends keyof DataEntryMap[C] | (string & {}),
+	>(
+		entry: ReferenceDataEntry<C, E>,
+	): E extends keyof DataEntryMap[C]
+		? Promise<DataEntryMap[C][E]>
+		: Promise<CollectionEntry<C> | undefined>;
+	export function getEntry<
+		C extends keyof DataEntryMap,
+		E extends keyof DataEntryMap[C] | (string & {}),
+	>(
+		collection: C,
+		id: E,
+	): E extends keyof DataEntryMap[C]
+		? string extends keyof DataEntryMap[C]
+			? Promise<DataEntryMap[C][E]> | undefined
+			: Promise<DataEntryMap[C][E]>
+		: Promise<CollectionEntry<C> | undefined>;
+	export function getLiveEntry<C extends keyof LiveContentConfig['collections']>(
+		collection: C,
+		filter: string | LiveLoaderEntryFilterType<C>,
+	): Promise<import('astro').LiveDataEntryResult<LiveLoaderDataType<C>, LiveLoaderErrorType<C>>>;
+
+	/** Resolve an array of entry references from the same collection */
+	export function getEntries<C extends keyof DataEntryMap>(
+		entries: ReferenceDataEntry<C, keyof DataEntryMap[C]>[],
+	): Promise<CollectionEntry<C>[]>;
+
+	export function render<C extends keyof DataEntryMap>(
+		entry: DataEntryMap[C][string],
+	): Promise<RenderResult>;
+
+	export function render<C extends keyof LiveContentConfig['collections']>(
+		entry: import('astro').LiveDataEntry<LiveLoaderDataType<C>>,
+	): Promise<RenderResult>;
+
+	export function reference<
+		C extends
+			| keyof DataEntryMap
+			// Allow generic `string` to avoid excessive type errors in the config
+			// if `dev` is not running to update as you edit.
+			// Invalid collection names will be caught at build time.
+			| (string & {}),
+	>(
+		collection: C,
+	): import('astro/zod').ZodPipe<
+		import('astro/zod').ZodString,
+		import('astro/zod').ZodTransform<
+			C extends keyof DataEntryMap
+				? {
+						collection: C;
+						id: string;
+					}
+				: never,
+			string
+		>
+	>;
+
+	type ReturnTypeOrOriginal<T> = T extends (...args: any[]) => infer R ? R : T;
+	type InferEntrySchema<C extends keyof DataEntryMap> = import('astro/zod').infer<
+		ReturnTypeOrOriginal<Required<ContentConfig['collections'][C]>['schema']>
+	>;
+	type ExtractLoaderConfig<T> = T extends { loader: infer L } ? L : never;
+	type InferLoaderSchema<
+		C extends keyof DataEntryMap,
+		L = ExtractLoaderConfig<ContentConfig['collections'][C]>,
+	> = L extends { schema: import('astro/zod').ZodSchema }
+		? import('astro/zod').infer<L['schema']>
+		: any;
+
+	type DataEntryMap = {
+		"site": Record<string, {
+  id: string;
+  body?: string;
+  collection: "site";
+  data: InferEntrySchema<"site">;
+  rendered?: RenderedContent;
+  filePath?: string;
+}>;
+"sitewide": Record<string, {
+  id: string;
+  body?: string;
+  collection: "sitewide";
+  data: InferEntrySchema<"sitewide">;
+  rendered?: RenderedContent;
+  filePath?: string;
+}>;
+"theme": Record<string, {
+  id: string;
+  body?: string;
+  collection: "theme";
+  data: InferEntrySchema<"theme">;
+  rendered?: RenderedContent;
+  filePath?: string;
+}>;
+
+	};
+
+	type ExtractLoaderTypes<T> = T extends import('astro/loaders').LiveLoader<
+		infer TData,
+		infer TEntryFilter,
+		infer TCollectionFilter,
+		infer TError
+	>
+		? { data: TData; entryFilter: TEntryFilter; collectionFilter: TCollectionFilter; error: TError }
+		: { data: never; entryFilter: never; collectionFilter: never; error: never };
+	type ExtractEntryFilterType<T> = ExtractLoaderTypes<T>['entryFilter'];
+	type ExtractCollectionFilterType<T> = ExtractLoaderTypes<T>['collectionFilter'];
+	type ExtractErrorType<T> = ExtractLoaderTypes<T>['error'];
+	type ExtractDataType<T> = ExtractLoaderTypes<T>['data'];
+
+	type LiveLoaderDataType<C extends keyof LiveContentConfig['collections']> =
+		LiveContentConfig['collections'][C]['schema'] extends undefined
+			? ExtractDataType<LiveContentConfig['collections'][C]['loader']>
+			: import('astro/zod').infer<
+					Exclude<LiveContentConfig['collections'][C]['schema'], undefined>
+				>;
+	type LiveLoaderEntryFilterType<C extends keyof LiveContentConfig['collections']> =
+		ExtractEntryFilterType<LiveContentConfig['collections'][C]['loader']>;
+	type LiveLoaderCollectionFilterType<C extends keyof LiveContentConfig['collections']> =
+		ExtractCollectionFilterType<LiveContentConfig['collections'][C]['loader']>;
+	type LiveLoaderErrorType<C extends keyof LiveContentConfig['collections']> = ExtractErrorType<
+		LiveContentConfig['collections'][C]['loader']
+	>;
+
+	export type ContentConfig = typeof import("../../../../src/content.config.js");
+	export type LiveContentConfig = never;
+}

package/examples/feature-demos/media-and-surfaces/.astro/data-store.json

@@ -0,0 +1 @@
+[["Map",1,2,9,10,103,104,124,125],"meta::meta",["Map",3,4,5,6,7,8],"astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":\"jsx\",\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":\"127.0.0.1\",\"port\":49811,\"allowedHosts\":[\"127.0.0.1\",\"127.0.0.1\",\"127.0.0.1\",\"127.0.0.1\"]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"dangerouslyProcessSVG\":false,\"domains\":[],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"processor\":{\"name\":\"satteri\",\"options\":{\"mdastPlugins\":[],\"hastPlugins\":[],\"features\":{}}}},\"security\":{\"checkOrigin\":true,\"allowedDomains\":[],\"csp\":false,\"actionBodySizeLimit\":1048576,\"serverIslandBodySizeLimit\":1048576},\"env\":{\"schema\":{},\"validateSecrets\":false},\"prerenderConflictBehavior\":\"warn\",\"fetchFile\":\"fetch\",\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"chromeDevtoolsWorkspace\":false,\"collectionStorage\":\"single-file\"},\"legacy\":{\"collectionsBackwardsCompat\":false}}","astro-version","7.1.3","content-config-digest","ef24ddbc7d731e37","site",["Map",11,12,47,48,75,76],"site-content",{"id":11,"data":13,"body":19,"filePath":20,"digest":21,"rendered":22},{"title":14,"description":15,"navigation":16,"sections":18},"Media and Surfaces","A visual test bench for Norna's managed media and presentation surfaces.",{"label":17},"Home",{},"## Media and surfaces {#intro}\n\nThis site is a focused test bench for Norna's managed media blocks, sidenotes,\npalettes and section-surface controls.\n\nThe examples are ordinary Norna files: a theme chooses the site's visual\ndefaults, routes can use their own complete themes, and Markdown blocks place\nmanaged media in the content flow.\n\n## New: palettes and surfaces {#palette}\n\nThe palette is a small, named choice rather than a collection of unrelated\ncolours. The site theme selects one of the built-in palettes:\n\n```yaml\npresentation:\n  palette: paper\n```\n\nThe palette supplies the page, navigation and frame colours. A site can also\ncycle through base, soft and emphasis section surfaces:\n\n```yaml\npresentation:\n  sectionSurfaces:\n    mode: cycle\n    sequence: [base, soft, emphasis]\n```\n\nThis keeps the visual rhythm consistent without asking each section to invent\nits own colours.\n\n## New: explicit section surfaces {#surfaces}\n\nThis page uses the theme's surface sequence. `palette` is the visual family;\n`sectionSurfaces` chooses a bounded sequence of base, soft and emphasis\ntreatments for the page.\n\nThe result is a restrained change in background and text treatment, while the\nsame typography and content model remain in place.\n\n## Managed content blocks {#blocks}\n\nManaged image stacks, carousels, card lists and sidenotes provide bounded ways\nto place common visual structures in Markdown. They are shown together on the\nMedia blocks route.\n\nThe important distinction is that these controls are named and bounded. They\nprovide useful visual variation without turning every page into a new template\nor CSS project.\n\n## Explore the examples {#next}\n\nRead [Media blocks](/media/) to compare image stacks, carousels and card lists.\n\nRead [Surfaces](/surfaces/) for the relationship between palette defaults and\ntheme-level surface choices.","site/content.md","64caddd1790aa4a5",{"html":23,"metadata":24},"\u003Ch2 id=\"media-and-surfaces-intro\">Media and surfaces {#intro}\u003C/h2>\n\u003Cp>This site is a focused test bench for Norna’s managed media blocks, sidenotes,\npalettes and section-surface controls.\u003C/p>\n\u003Cp>The examples are ordinary Norna files: a theme chooses the site’s visual\ndefaults, routes can use their own complete themes, and Markdown blocks place\nmanaged media in the content flow.\u003C/p>\n\u003Ch2 id=\"new-palettes-and-surfaces-palette\">New: palettes and surfaces {#palette}\u003C/h2>\n\u003Cp>The palette is a small, named choice rather than a collection of unrelated\ncolours. The site theme selects one of the built-in palettes:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"yaml\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\">presentation\u003C/span>\u003Cspan style=\"color:#E1E4E8\">:\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\">  palette\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#9ECBFF\">paper\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>The palette supplies the page, navigation and frame colours. A site can also\ncycle through base, soft and emphasis section surfaces:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"yaml\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\">presentation\u003C/span>\u003Cspan style=\"color:#E1E4E8\">:\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\">  sectionSurfaces\u003C/span>\u003Cspan style=\"color:#E1E4E8\">:\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\">    mode\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#9ECBFF\">cycle\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\">    sequence\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: [\u003C/span>\u003Cspan style=\"color:#9ECBFF\">base\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, \u003C/span>\u003Cspan style=\"color:#9ECBFF\">soft\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, \u003C/span>\u003Cspan style=\"color:#9ECBFF\">emphasis\u003C/span>\u003Cspan style=\"color:#E1E4E8\">]\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>This keeps the visual rhythm consistent without asking each section to invent\nits own colours.\u003C/p>\n\u003Ch2 id=\"new-explicit-section-surfaces-surfaces\">New: explicit section surfaces {#surfaces}\u003C/h2>\n\u003Cp>This page uses the theme’s surface sequence. \u003Ccode>palette\u003C/code> is the visual family;\n\u003Ccode>sectionSurfaces\u003C/code> chooses a bounded sequence of base, soft and emphasis\ntreatments for the page.\u003C/p>\n\u003Cp>The result is a restrained change in background and text treatment, while the\nsame typography and content model remain in place.\u003C/p>\n\u003Ch2 id=\"managed-content-blocks-blocks\">Managed content blocks {#blocks}\u003C/h2>\n\u003Cp>Managed image stacks, carousels, card lists and sidenotes provide bounded ways\nto place common visual structures in Markdown. They are shown together on the\nMedia blocks route.\u003C/p>\n\u003Cp>The important distinction is that these controls are named and bounded. They\nprovide useful visual variation without turning every page into a new template\nor CSS project.\u003C/p>\n\u003Ch2 id=\"explore-the-examples-next\">Explore the examples {#next}\u003C/h2>\n\u003Cp>Read \u003Ca href=\"/media/\">Media blocks\u003C/a> to compare image stacks, carousels and card lists.\u003C/p>\n\u003Cp>Read \u003Ca href=\"/surfaces/\">Surfaces\u003C/a> for the relationship between palette defaults and\ntheme-level surface choices.\u003C/p>\n",{"headings":25,"localImagePaths":42,"remoteImagePaths":43,"frontmatter":44,"imagePaths":46},[26,30,33,36,39],{"depth":27,"slug":28,"text":29},2,"media-and-surfaces-intro","Media and surfaces {#intro}",{"depth":27,"slug":31,"text":32},"new-palettes-and-surfaces-palette","New: palettes and surfaces {#palette}",{"depth":27,"slug":34,"text":35},"new-explicit-section-surfaces-surfaces","New: explicit section surfaces {#surfaces}",{"depth":27,"slug":37,"text":38},"managed-content-blocks-blocks","Managed content blocks {#blocks}",{"depth":27,"slug":40,"text":41},"explore-the-examples-next","Explore the examples {#next}",[],[],{"title":14,"description":15,"navigation":45},{"label":17},[],"site-route-010-media",{"id":47,"data":49,"body":54,"filePath":55,"digest":56,"rendered":57},{"title":50,"description":51,"navigation":52,"sections":53},"Media blocks","Compare Norna's managed image stacks, carousels and card lists.",{"label":50},{},"## Image stack {#stack}\n\nAn image stack places one or more managed images in the normal Markdown flow.\nEach source file belongs in the section's image folder, and Norna creates the\nresponsive output used by the browser.{note-ref}\n\n{note: This note belongs to the introductory text above the image stack. On a wide screen it should sit in the margin and align with its reference paragraph.}\n\n````\n```norna-image-stack\n- image: stack-one.svg\n  alt: A pale panel with a single large circle.\n  caption: One image can introduce a visual idea.\n- image: stack-two.svg\n  alt: A dark panel with three aligned blocks.\n  caption: A stack can contain several related images.\n```\n````\n\n```norna-image-stack\n- image: stack-one.svg\n  alt: A pale panel with a single large circle.\n  caption: One image can introduce a visual idea.\n- image: stack-two.svg\n  alt: A dark panel with three aligned blocks.\n  caption: A stack can contain several related images.\n```\n\n## Image carousel {#carousel}\n\nA carousel keeps a related group together while showing one image at a time.\nThe controls, keyboard interaction and current position are provided by\nNorna.{note-ref}\n\n{note: The note remains explanatory text beside the paragraph; the carousel keeps its full managed image area below.}\n\n```norna-image-carousel\n- image: carousel-one.svg\n  alt: A green panel with a diagonal line.\n  caption: First frame: a broad direction.\n- image: carousel-two.svg\n  alt: A blue panel with two overlapping circles.\n  caption: Second frame: a closer relationship.\n- image: carousel-three.svg\n  alt: A red panel with a compact grid.\n  caption: Third frame: a denser detail.\n```\n\n## Card list {#cards}\n\nCards are useful when several short items need the same visual treatment. The\nblock controls the layout and size without requiring a component for each\ncard.{note-ref}\n\n{note: This third note makes the numbering and spacing between several sidenotes visible on one page.}\n\n```norna-card-list\nlayout: image-top\nflow: grid\nsize: m\nwidth: normal\n\n- title: Image stack\n  text: A simple vertical sequence of managed images.\n  image: card-stack.svg\n  badge-text: Established\n- title: Carousel\n  text: A focused sequence with controls and captions.\n  image: card-carousel.svg\n  badge-text: Established\n- title: Section surfaces\n  text: A bounded way to create rhythm between sections.\n  image: card-surfaces.svg\n  badge-text: New\n```\n\nThe examples above are still ordinary Markdown blocks. Their presentation is\nopinionated, so the same source remains predictable on smaller screens.","site/routes/010-media/route-content.md","fddd96f4b053bfe9",{"html":58,"metadata":59},"\u003Ch2 id=\"image-stack-stack\">Image stack {#stack}\u003C/h2>\n\u003Cp>An image stack places one or more managed images in the normal Markdown flow.\nEach source file belongs in the section’s image folder, and Norna creates the\nresponsive output used by the browser.{note-ref}\u003C/p>\n\u003Cp>{note: This note belongs to the introductory text above the image stack. On a wide screen it should sit in the margin and align with its reference paragraph.}\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"plaintext\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan>```norna-image-stack\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>- image: stack-one.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  alt: A pale panel with a single large circle.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  caption: One image can introduce a visual idea.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>- image: stack-two.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  alt: A dark panel with three aligned blocks.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  caption: A stack can contain several related images.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>```\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"plaintext\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan>- image: stack-one.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  alt: A pale panel with a single large circle.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  caption: One image can introduce a visual idea.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>- image: stack-two.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  alt: A dark panel with three aligned blocks.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  caption: A stack can contain several related images.\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"image-carousel-carousel\">Image carousel {#carousel}\u003C/h2>\n\u003Cp>A carousel keeps a related group together while showing one image at a time.\nThe controls, keyboard interaction and current position are provided by\nNorna.{note-ref}\u003C/p>\n\u003Cp>{note: The note remains explanatory text beside the paragraph; the carousel keeps its full managed image area below.}\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"plaintext\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan>- image: carousel-one.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  alt: A green panel with a diagonal line.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  caption: First frame: a broad direction.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>- image: carousel-two.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  alt: A blue panel with two overlapping circles.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  caption: Second frame: a closer relationship.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>- image: carousel-three.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  alt: A red panel with a compact grid.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  caption: Third frame: a denser detail.\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"card-list-cards\">Card list {#cards}\u003C/h2>\n\u003Cp>Cards are useful when several short items need the same visual treatment. The\nblock controls the layout and size without requiring a component for each\ncard.{note-ref}\u003C/p>\n\u003Cp>{note: This third note makes the numbering and spacing between several sidenotes visible on one page.}\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"plaintext\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan>layout: image-top\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>flow: grid\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>size: m\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>width: normal\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>- title: Image stack\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  text: A simple vertical sequence of managed images.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  image: card-stack.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  badge-text: Established\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>- title: Carousel\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  text: A focused sequence with controls and captions.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  image: card-carousel.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  badge-text: Established\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>- title: Section surfaces\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  text: A bounded way to create rhythm between sections.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  image: card-surfaces.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  badge-text: New\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>The examples above are still ordinary Markdown blocks. Their presentation is\nopinionated, so the same source remains predictable on smaller screens.\u003C/p>\n",{"headings":60,"localImagePaths":70,"remoteImagePaths":71,"frontmatter":72,"imagePaths":74},[61,64,67],{"depth":27,"slug":62,"text":63},"image-stack-stack","Image stack {#stack}",{"depth":27,"slug":65,"text":66},"image-carousel-carousel","Image carousel {#carousel}",{"depth":27,"slug":68,"text":69},"card-list-cards","Card list {#cards}",[],[],{"title":50,"description":51,"navigation":73},{"label":50},[],"site-route-020-surfaces",{"id":75,"data":77,"body":82,"filePath":83,"digest":84,"rendered":85},{"title":78,"description":79,"navigation":80,"sections":81},"Surfaces","See how palette defaults and section surfaces work together.",{"label":78},{},"## Palette options {#palette-options}\n\nNorna currently provides a small set of named palettes. The theme chooses one\nfor the whole site:\n\n```yaml\npresentation:\n  palette: dark\n```\n\nThe available choices are `dark`, `light` and `paper`. A palette defines the\npage, navigation, frame and section colours together, so these parts stay in\nbalance.\n\n## Emphasis surface {#emphasis-surface}\n\nThe route theme uses a palette and a surface sequence when a visual pause or\nchange of rhythm helps the reader. This is not a free-form colour override:\n\n```yaml\npresentation:\n  sectionSurfaces:\n    mode: cycle\n    sequence: [base, soft, emphasis]\n```\n\nThe theme can cycle through the selected surfaces automatically. Individual\nsections do not select their own colours.\n\n## A practical rule {#practical-rule}\n\nUse the site palette for the overall tone. Use soft and emphasis surfaces for a\nsmall number of meaningful transitions, not to make every section look\nunrelated.\n\nTypography presets and media blocks can vary the content inside that system;\nsurfaces provide the route-level rhythm around it.","site/routes/020-surfaces/route-content.md","015a14c50585a829",{"html":86,"metadata":87},"\u003Ch2 id=\"palette-options-palette-options\">Palette options {#palette-options}\u003C/h2>\n\u003Cp>Norna currently provides a small set of named palettes. The theme chooses one\nfor the whole site:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"yaml\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\">presentation\u003C/span>\u003Cspan style=\"color:#E1E4E8\">:\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\">  palette\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#9ECBFF\">dark\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>The available choices are \u003Ccode>dark\u003C/code>, \u003Ccode>light\u003C/code> and \u003Ccode>paper\u003C/code>. A palette defines the\npage, navigation, frame and section colours together, so these parts stay in\nbalance.\u003C/p>\n\u003Ch2 id=\"emphasis-surface-emphasis-surface\">Emphasis surface {#emphasis-surface}\u003C/h2>\n\u003Cp>The route theme uses a palette and a surface sequence when a visual pause or\nchange of rhythm helps the reader. This is not a free-form colour override:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"yaml\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\">presentation\u003C/span>\u003Cspan style=\"color:#E1E4E8\">:\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\">  sectionSurfaces\u003C/span>\u003Cspan style=\"color:#E1E4E8\">:\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\">    mode\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#9ECBFF\">cycle\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\">    sequence\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: [\u003C/span>\u003Cspan style=\"color:#9ECBFF\">base\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, \u003C/span>\u003Cspan style=\"color:#9ECBFF\">soft\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, \u003C/span>\u003Cspan style=\"color:#9ECBFF\">emphasis\u003C/span>\u003Cspan style=\"color:#E1E4E8\">]\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>The theme can cycle through the selected surfaces automatically. Individual\nsections do not select their own colours.\u003C/p>\n\u003Ch2 id=\"a-practical-rule-practical-rule\">A practical rule {#practical-rule}\u003C/h2>\n\u003Cp>Use the site palette for the overall tone. Use soft and emphasis surfaces for a\nsmall number of meaningful transitions, not to make every section look\nunrelated.\u003C/p>\n\u003Cp>Typography presets and media blocks can vary the content inside that system;\nsurfaces provide the route-level rhythm around it.\u003C/p>\n",{"headings":88,"localImagePaths":98,"remoteImagePaths":99,"frontmatter":100,"imagePaths":102},[89,92,95],{"depth":27,"slug":90,"text":91},"palette-options-palette-options","Palette options {#palette-options}",{"depth":27,"slug":93,"text":94},"emphasis-surface-emphasis-surface","Emphasis surface {#emphasis-surface}",{"depth":27,"slug":96,"text":97},"a-practical-rule-practical-rule","A practical rule {#practical-rule}",[],[],{"title":78,"description":79,"navigation":101},{"label":78},[],"sitewide",["Map",105,106],"site-sitewide",{"id":105,"data":107,"filePath":112,"digest":113,"rendered":114},{"navigation":108,"banners":109,"footer":110},{"brand":14},[],{"copyrightMessage":111},"Norna media and surfaces example.","site/sitewide-content.md","a62822e81bc10bcf",{"html":115,"metadata":116},"",{"headings":117,"localImagePaths":118,"remoteImagePaths":119,"frontmatter":120,"imagePaths":123},[],[],[],{"navigation":121,"footer":122},{"brand":14},{"copyrightMessage":111},[],"theme",["Map",126,127],"theme.md",{"id":126,"data":128,"filePath":130,"digest":131,"rendered":132},{"preset":129},"project","site/theme.md","d19ab283a10fb060",{"html":115,"metadata":133},{"headings":134,"localImagePaths":135,"remoteImagePaths":136,"frontmatter":137,"imagePaths":138},[],[],[],{"preset":129},[]]

package/examples/feature-demos/media-and-surfaces/.astro/dev.log

@@ -0,0 +1,11 @@
+{"message":"connected.","label":"vite","level":"info"}
+{"message":"Generated 0ms","label":"types","level":"info"}
+{"message":"connected.","label":"vite","level":"info"}
+{"message":"Syncing content","label":"content","level":"info"}
+[Shiki] The language "norna-image-stack" doesn't exist, falling back to "plaintext".
+[Shiki] The language "norna-image-carousel" doesn't exist, falling back to "plaintext".
+[Shiki] The language "norna-card-list" doesn't exist, falling back to "plaintext".
+{"message":"Synced content","label":"content","level":"info"}
+{"message":" astro  v7.1.3 ready in 1166 ms\n┃ Local    http://127.0.0.1:49301/","label":"SKIP_FORMAT","level":"info"}
+{"message":"watching for file changes...","label":null,"level":"info"}
+{"message":"\n update  ▶ New version of Astro available: 7.2.4\n  Run npx @astrojs/upgrade to update\n","label":"SKIP_FORMAT","level":"warn"}

package/examples/feature-demos/media-and-surfaces/.astro/settings.json

@@ -0,0 +1,5 @@
+{
+	"_variables": {
+		"lastUpdateCheck": 1787285527691
+	}
+}

package/examples/feature-demos/media-and-surfaces/.astro/types.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="astro/client" />
+/// <reference path="content.d.ts" />

package/examples/feature-demos/media-and-surfaces/README.md

@@ -0,0 +1,15 @@
+# Media and surfaces
+
+This example is a visual test bench for Norna's presentation features.
+
+It shows managed image stacks, carousels, card lists and sidenotes alongside
+the palette and section-surface model. The SVG files are hand-authored local
+assets so the example does not depend on external images.
+
+Run it from the repository root with:
+
+```sh
+node bin/norna.mjs --site-dir examples/feature-demos/media-and-surfaces/site dev:local
+```
+
+The site has a home page plus routes for media blocks and surfaces.

package/examples/feature-demos/media-and-surfaces/node_modules/.vite/deps/_metadata.json

@@ -0,0 +1,74 @@
+{
+  "hash": "8628106a",
+  "configHash": "703f8416",
+  "lockfileHash": "808f2e8e",
+  "browserHash": "7129ba0c",
+  "optimized": {
+    "astro > aria-query": {
+      "src": "../../../../../../node_modules/aria-query/lib/index.js",
+      "file": "astro_n_aria-query.js",
+      "fileHash": "f2224a32",
+      "needsInterop": true
+    },
+    "astro > axobject-query": {
+      "src": "../../../../../../node_modules/axobject-query/lib/index.js",
+      "file": "astro_n_axobject-query.js",
+      "fileHash": "6ccc4ef0",
+      "needsInterop": true
+    },
+    "astro > html-escaper": {
+      "src": "../../../../../../node_modules/html-escaper/esm/index.js",
+      "file": "astro_n_html-escaper.js",
+      "fileHash": "aef09322",
+      "needsInterop": false
+    },
+    "astro/runtime/client/dev-toolbar/entrypoint.js": {
+      "src": "../../../../../../node_modules/astro/dist/runtime/client/dev-toolbar/entrypoint.js",
+      "file": "astro_runtime_client_dev-toolbar_entrypoint__js.js",
+      "fileHash": "31ae3c6f",
+      "needsInterop": false
+    }
+  },
+  "chunks": {
+    "astro-B3JHJyiv": {
+      "file": "astro-B3JHJyiv.js",
+      "isDynamicEntry": true
+    },
+    "audit-C3SVr7dT": {
+      "file": "audit-C3SVr7dT.js",
+      "isDynamicEntry": true
+    },
+    "highlight-BLtvqtzO": {
+      "file": "highlight-BLtvqtzO.js",
+      "isDynamicEntry": false
+    },
+    "icons-C92i61-2": {
+      "file": "icons-C92i61-2.js",
+      "isDynamicEntry": false
+    },
+    "rolldown-runtime-BvCyGRYZ": {
+      "file": "rolldown-runtime-BvCyGRYZ.js",
+      "isDynamicEntry": false
+    },
+    "settings-v5GgKks_": {
+      "file": "settings-v5GgKks_.js",
+      "isDynamicEntry": true
+    },
+    "toolbar-BFvJVp26": {
+      "file": "toolbar-BFvJVp26.js",
+      "isDynamicEntry": true
+    },
+    "ui-library-Cd35oAvo": {
+      "file": "ui-library-Cd35oAvo.js",
+      "isDynamicEntry": true
+    },
+    "window-vo3A6TMn": {
+      "file": "window-vo3A6TMn.js",
+      "isDynamicEntry": false
+    },
+    "xray-DwhzGckb": {
+      "file": "xray-DwhzGckb.js",
+      "isDynamicEntry": true
+    }
+  }
+}