mechanica 2.0.0-alpha.8 → 2.0.0-alpha.9

package/dist/cli.js

@@ -302,7 +302,8 @@ async function backfillImageMeta(pages, blocksMap, mechDir, warn) {
 * `<cwd>/.mech`.
 *
 * Beyond the pages it also: rewrites + copies uploaded assets
-* (`/@mechanica/assets/…` → `/media/…`), warns about dead internal links,
+* (`/@mechanica/assets/…` → `/media/…`, or `<assetsUrl>/media/…` when a CDN
+* base is set), warns about dead internal links,
 * orphaned uploads and page-level SEO issues, emits `404.html` when a `/404`
 * page exists, and — when a site url is known (plugin `siteUrl` option or
 * `--site-url`) — injects the automatic SEO tags (canonical, `og:url`,
@@ -314,6 +315,7 @@ async function exportProject(cwd, ssr, options = {}) {
 	const index = await readFile(join(cwd, "dist/index.html"), "utf-8");
 	const siteUrl = options.siteUrl ?? ssr.site?.url;
 	const siteName = options.siteName ?? ssr.site?.name;
+	const assetsBase = (options.assetsUrl ?? ssr.assetsUrl ?? "").replace(/\/+$/, "");
 	const composedDefs = ssr.composedList ?? [];
 	const blocks = [...ssr.blocksList.map(toBlockMeta), ...composedDefs.map(composedBlockMeta)];
 	const blocksMap = new Map(blocks.map((block) => [block.id, block]));
@@ -420,7 +422,7 @@ async function exportProject(cwd, ssr, options = {}) {
 		if (typeof src !== "string" || !src.startsWith("/@mechanica/assets/")) return src;
 		const relative = decodeURIComponent(src.slice(UPLOADS_PREFIX.length));
 		referenced.add(relative);
-		return `/${MEDIA_DIR}/${relative}`;
+		return `${assetsBase}/${MEDIA_DIR}/${relative}`;
 	};
 	const blockAssets = await readBlockAssets(cwd);
 	const pageLinks = blockAssets ? (content) => {
@@ -447,6 +449,7 @@ async function exportProject(cwd, ssr, options = {}) {
 			url: siteUrl,
 			name: siteName
 		},
+		assetsUrl: assetsBase || void 0,
 		locales: config ?? void 0,
 		render: (state) => ssr.render(state, { resolveQuery: resolveForPage(state.page?.pagination?.page ?? 1, state.page?.locale) }),
 		onFile,
@@ -1364,7 +1367,9 @@ Usage:
                             (a site url — the plugin's siteUrl option or
                              --site-url <origin> — also turns on the automatic
                              SEO tags and emits sitemap.xml + robots.txt;
-                             --site-name <name> adds WebSite JSON-LD)
+                             --site-name <name> adds WebSite JSON-LD;
+                             --assets-url <origin> serves /assets and /media from
+                             a CDN base — files still land in export/)
   mechanica push [--key]    Upload dist/ to a backend (--key, --host, --dir)
   mechanica shot <blockId>  Screenshot one block via the dev preview route
   mechanica shot </path>    Screenshot a whole page (editor overlay stripped)
@@ -1389,7 +1394,8 @@ async function run(argv) {
 		case "build": return runBuild();
 		case "export": return runExport({
 			siteUrl: str(flags["site-url"]),
-			siteName: str(flags["site-name"])
+			siteName: str(flags["site-name"]),
+			assetsUrl: str(flags["assets-url"])
 		});
 		case "images": return runImages({ force: flags.force === true });
 		case "push": return runPush({

package/dist/editor.css

@@ -4802,7 +4802,7 @@ from {
   justify-content: flex-end;
   gap: 8px;
   margin-top: 4px;
-}.mech-pages[data-v-5f70933a] {
+}.mech-pages[data-v-665bb42e] {
   display: flex;
   align-items: stretch;
   justify-content: center;
@@ -4811,7 +4811,7 @@ from {
   max-width: 1200px;
   height: min(620px, 82vh);
 }
-.mech-pages__card[data-v-5f70933a] {
+.mech-pages__card[data-v-665bb42e] {
   display: flex;
   flex-direction: column;
   flex: 0 1 840px;
@@ -4821,20 +4821,20 @@ from {
   box-shadow: var(--mech-shadow-dialog);
   overflow: hidden;
 }
-.mech-pages__header[data-v-5f70933a] {
+.mech-pages__header[data-v-665bb42e] {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 18px 14px 12px 24px;
   flex: none;
 }
-.mech-pages__title[data-v-5f70933a] {
+.mech-pages__title[data-v-665bb42e] {
   margin: 0;
   font-size: 16px;
   font-weight: 600;
   letter-spacing: -0.01em;
 }
-.mech-pages__count[data-v-5f70933a] {
+.mech-pages__count[data-v-665bb42e] {
   padding: 2px 8px;
   border-radius: var(--mech-radius-pill);
   background: var(--mech-active);
@@ -4842,7 +4842,7 @@ from {
   font-size: 11.5px;
   font-weight: 600;
 }
-.mech-pages__close[data-v-5f70933a] {
+.mech-pages__close[data-v-665bb42e] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -4855,25 +4855,49 @@ from {
   border-radius: var(--mech-radius-pill);
   cursor: pointer;
 }
-.mech-pages__close .vicon[data-v-5f70933a] {
+.mech-pages__close .vicon[data-v-665bb42e] {
   width: 18px;
   height: 18px;
 }
-.mech-pages__close[data-v-5f70933a]:hover {
+.mech-pages__close[data-v-665bb42e]:hover {
   background: var(--mech-hover);
   color: var(--mech-fg);
 }
-.mech-pages__toolbar[data-v-5f70933a] {
+.mech-pages__toolbar[data-v-665bb42e] {
   display: flex;
   gap: 8px;
-  padding: 0 24px 14px;
+  padding: 0 24px 12px;
   flex: none;
 }
-.mech-pages__search-wrap[data-v-5f70933a] {
+.mech-pages__search-wrap[data-v-665bb42e] {
   position: relative;
   flex: 1;
 }
-.mech-pages__search-icon[data-v-5f70933a] {
+.mech-pages__filters[data-v-665bb42e] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 0 24px 14px;
+  flex: none;
+}
+.mech-pages__sort[data-v-665bb42e] {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+}
+.mech-pages__sort-label[data-v-665bb42e] {
+  font-size: 10.5px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--mech-muted);
+}
+.mech-pages__toggle[data-v-665bb42e] {
+  flex: none;
+  white-space: nowrap;
+}
+.mech-pages__search-icon[data-v-665bb42e] {
   position: absolute;
   left: 12px;
   top: 50%;
@@ -4883,18 +4907,18 @@ from {
   color: var(--mech-muted);
   pointer-events: none;
 }
-.mech-pages__search[data-v-5f70933a] {
+.mech-pages__search[data-v-665bb42e] {
   width: 100%;
   padding-left: 36px;
 }
-.mech-pages__content[data-v-5f70933a] {
+.mech-pages__content[data-v-665bb42e] {
   display: flex;
   gap: 14px;
   flex: 1;
   min-height: 0;
   padding: 0 24px 20px;
 }
-.mech-pages__rail[data-v-5f70933a] {
+.mech-pages__rail[data-v-665bb42e] {
   flex: none;
   width: 172px;
   display: flex;
@@ -4903,7 +4927,7 @@ from {
   overflow-y: auto;
   padding-right: 2px;
 }
-.mech-pages__rail-item[data-v-5f70933a] {
+.mech-pages__rail-item[data-v-665bb42e] {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -4917,51 +4941,51 @@ from {
   color: var(--mech-fg-alt);
   cursor: pointer;
 }
-.mech-pages__rail-item .vicon[data-v-5f70933a] {
+.mech-pages__rail-item .vicon[data-v-665bb42e] {
   flex: none;
   width: 15px;
   height: 15px;
   color: var(--mech-muted);
 }
-.mech-pages__rail-item[data-v-5f70933a]:hover {
+.mech-pages__rail-item[data-v-665bb42e]:hover {
   background: var(--mech-hover);
 }
-.mech-pages__rail-item.is-active[data-v-5f70933a] {
+.mech-pages__rail-item.is-active[data-v-665bb42e] {
   background: var(--mech-accent-soft);
   color: var(--mech-accent);
   font-weight: 500;
 }
-.mech-pages__rail-item.is-active .vicon[data-v-5f70933a] {
+.mech-pages__rail-item.is-active .vicon[data-v-665bb42e] {
   color: var(--mech-accent);
 }
-.mech-pages__rail-name[data-v-5f70933a] {
+.mech-pages__rail-name[data-v-665bb42e] {
   flex: 1;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.mech-pages__rail-count[data-v-5f70933a] {
+.mech-pages__rail-count[data-v-665bb42e] {
   flex: none;
   font-size: 11px;
   color: var(--mech-placeholder);
 }
-.mech-pages__rail-item.is-active .mech-pages__rail-count[data-v-5f70933a] {
+.mech-pages__rail-item.is-active .mech-pages__rail-count[data-v-665bb42e] {
   color: var(--mech-accent);
   opacity: 0.7;
 }
-.mech-pages__list[data-v-5f70933a] {
+.mech-pages__list[data-v-665bb42e] {
   flex: 1;
   min-width: 0;
   overflow-y: auto;
 }
-.mech-pages__row[data-v-5f70933a], .mech-pages__thead[data-v-5f70933a] {
+.mech-pages__row[data-v-665bb42e], .mech-pages__thead[data-v-665bb42e] {
   display: grid;
   grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 96px;
   align-items: center;
   column-gap: 12px;
 }
-.mech-pages__thead[data-v-5f70933a] {
+.mech-pages__thead[data-v-665bb42e] {
   position: sticky;
   top: 0;
   z-index: 1;
@@ -4969,14 +4993,14 @@ from {
   background: var(--mech-bg);
   box-shadow: 0 1px 0 var(--mech-border);
 }
-.mech-pages__thead span[data-v-5f70933a] {
+.mech-pages__thead span[data-v-665bb42e] {
   font-size: 10.5px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--mech-muted);
 }
-.mech-pages__group[data-v-5f70933a] {
+.mech-pages__group[data-v-665bb42e] {
   display: flex;
   align-items: center;
   gap: 7px;
@@ -4995,36 +5019,36 @@ from {
   border-radius: var(--mech-radius-sm);
   cursor: pointer;
 }
-.mech-pages__group .vicon[data-v-5f70933a] {
+.mech-pages__group .vicon[data-v-665bb42e] {
   width: 13px;
   height: 13px;
 }
-.mech-pages__group[data-v-5f70933a]:hover {
+.mech-pages__group[data-v-665bb42e]:hover {
   color: var(--mech-fg);
 }
-.mech-pages__row[data-v-5f70933a] {
+.mech-pages__row[data-v-665bb42e] {
   padding: 0 10px;
   height: 38px;
   border-radius: var(--mech-radius-sm);
   cursor: pointer;
 }
-.mech-pages__row.is-active[data-v-5f70933a] {
+.mech-pages__row.is-active[data-v-665bb42e] {
   background: var(--mech-accent-soft);
 }
-.mech-pages__cell-name[data-v-5f70933a] {
+.mech-pages__cell-name[data-v-665bb42e] {
   display: flex;
   align-items: center;
   gap: 8px;
   min-width: 0;
 }
-.mech-pages__name[data-v-5f70933a] {
+.mech-pages__name[data-v-665bb42e] {
   font-size: 13.5px;
   font-weight: 500;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.mech-pages__badge[data-v-5f70933a] {
+.mech-pages__badge[data-v-665bb42e] {
   flex: none;
   font-size: 10px;
   font-weight: 600;
@@ -5036,17 +5060,17 @@ from {
   border-radius: var(--mech-radius-pill);
   padding: 1px 7px;
 }
-.mech-pages__badge.is-draft[data-v-5f70933a] {
+.mech-pages__badge.is-draft[data-v-665bb42e] {
   color: var(--mech-muted);
 }
-.mech-pages__locales[data-v-5f70933a] {
+.mech-pages__locales[data-v-665bb42e] {
   flex: none;
   display: inline-flex;
   align-items: center;
   gap: 3px;
   margin-left: 2px;
 }
-.mech-pages__loc[data-v-5f70933a] {
+.mech-pages__loc[data-v-665bb42e] {
   min-width: 15px;
   padding: 1px 4px;
   border-radius: var(--mech-radius-sm);
@@ -5060,12 +5084,12 @@ from {
   letter-spacing: 0.02em;
   opacity: 0.5;
 }
-.mech-pages__loc.is-on[data-v-5f70933a] {
+.mech-pages__loc.is-on[data-v-665bb42e] {
   background: var(--mech-accent-soft);
   color: var(--mech-accent);
   opacity: 1;
 }
-.mech-pages__cell-path[data-v-5f70933a] {
+.mech-pages__cell-path[data-v-665bb42e] {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -5073,16 +5097,16 @@ from {
   font-size: 12.5px;
   color: var(--mech-muted);
 }
-.mech-pages__actions[data-v-5f70933a] {
+.mech-pages__actions[data-v-665bb42e] {
   display: flex;
   justify-content: flex-end;
   gap: 1px;
   opacity: 0;
 }
-.mech-pages__row.is-active .mech-pages__actions[data-v-5f70933a], .mech-pages__row:hover .mech-pages__actions[data-v-5f70933a] {
+.mech-pages__row.is-active .mech-pages__actions[data-v-665bb42e], .mech-pages__row:hover .mech-pages__actions[data-v-665bb42e] {
   opacity: 1;
 }
-.mech-pages__actions button[data-v-5f70933a] {
+.mech-pages__actions button[data-v-665bb42e] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -5095,24 +5119,24 @@ from {
   cursor: pointer;
   line-height: 1;
 }
-.mech-pages__actions button .vicon[data-v-5f70933a] {
+.mech-pages__actions button .vicon[data-v-665bb42e] {
   width: 15px;
   height: 15px;
 }
-.mech-pages__actions button[data-v-5f70933a]:hover {
+.mech-pages__actions button[data-v-665bb42e]:hover {
   background: var(--mech-active);
   color: var(--mech-fg);
 }
-.mech-pages__actions button.is-danger[data-v-5f70933a]:hover {
+.mech-pages__actions button.is-danger[data-v-665bb42e]:hover {
   color: var(--mech-error);
 }
-.mech-pages__empty[data-v-5f70933a] {
+.mech-pages__empty[data-v-665bb42e] {
   padding: 24px 10px;
   margin: 0;
   color: var(--mech-muted);
   font-size: 13px;
 }
-.mech-pages__preview[data-v-5f70933a] {
+.mech-pages__preview[data-v-665bb42e] {
   flex: none;
   align-self: flex-start;
   max-height: 100%;
@@ -5124,18 +5148,18 @@ from {
   box-shadow: var(--mech-shadow-dialog);
   overflow: hidden;
 }
-.mech-pages__preview-frame[data-v-5f70933a] {
+.mech-pages__preview-frame[data-v-665bb42e] {
   flex: 0 1 auto;
   min-height: 0;
   overflow: hidden;
   background: var(--mech-app-bg);
 }
-.mech-pages__preview-frame img[data-v-5f70933a] {
+.mech-pages__preview-frame img[data-v-665bb42e] {
   display: block;
   width: 100%;
   height: auto;
 }
-.mech-pages__preview-empty[data-v-5f70933a] {
+.mech-pages__preview-empty[data-v-665bb42e] {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -5144,16 +5168,16 @@ from {
   padding: 48px 16px;
   color: var(--mech-muted);
 }
-.mech-pages__preview-empty p[data-v-5f70933a] {
+.mech-pages__preview-empty p[data-v-665bb42e] {
   margin: 8px 0 0;
   font-size: 13px;
   font-weight: 500;
 }
-.mech-pages__preview-empty code[data-v-5f70933a] {
+.mech-pages__preview-empty code[data-v-665bb42e] {
   font-size: 11.5px;
   color: var(--mech-placeholder);
 }
-.mech-pages__preview-monogram[data-v-5f70933a] {
+.mech-pages__preview-monogram[data-v-665bb42e] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -5164,7 +5188,7 @@ from {
   font-size: 22px;
   font-weight: 600;
 }
-.mech-pages__preview-caption[data-v-5f70933a] {
+.mech-pages__preview-caption[data-v-665bb42e] {
   flex: none;
   display: flex;
   flex-direction: column;
@@ -5172,14 +5196,14 @@ from {
   padding: 12px 16px 14px;
   border-top: 1px solid var(--mech-border);
 }
-.mech-pages__preview-name[data-v-5f70933a] {
+.mech-pages__preview-name[data-v-665bb42e] {
   font-size: 13px;
   font-weight: 600;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.mech-pages__preview-path[data-v-5f70933a] {
+.mech-pages__preview-path[data-v-665bb42e] {
   font-size: 11.5px;
   color: var(--mech-muted);
   overflow: hidden;
@@ -5187,7 +5211,7 @@ from {
   white-space: nowrap;
 }
 @media (max-width: 1160px) {
-.mech-pages__preview[data-v-5f70933a] {
+.mech-pages__preview[data-v-665bb42e] {
     display: none;
 }
 }.mech-pagebar[data-v-a0f85ad0] {

package/dist/editor.js

@@ -3,7 +3,7 @@ import { f as createRouter, h as mechanicaKey, i as renderBlocks, n as pushState
 import { i as getDataEntries, t as buildPreviewContent } from "./chunks/preview-G5_AFI5P.js";
 import { A as groupPagesByFolder, C as registerBuiltinFieldEditors, D as VSegmented_default, E as createContextMenu, M as pathFromName, O as fetchPages, P as VPopover_default, T as contextMenuKey, _ as findParentSlot, b as relocateBlock, c as compareBlocks, f as cloneBlock, h as findBlock, j as pageThumbUrl, k as filterPages, l as createContentBlock, n as createSaveQueue, o as shortcutChar, p as duplicateBlock, r as SchemaForm_default, s as blockAvailableIn, t as SaveConflictError, u as toBlockMeta, v as moveBlock, w as registerRichTextWidgets, x as removeBlock, y as placeBlock } from "./chunks/editor-9tquvDcS.js";
 import { c as useDialog, d as _plugin_vue_export_helper_default, l as VIcon_default, n as VDialog_default, o as createDialogStore, s as dialogKey } from "./chunks/ImagePickerDialog-CY-mn2UP.js";
-import { Fragment, Teleport, Transition, TransitionGroup, computed, createApp, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, markRaw, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onErrorCaptured, onMounted, onScopeDispose, openBlock, provide, reactive, ref, renderList, resolveComponent, resolveDynamicComponent, shallowRef, toDisplayString, unref, useTemplateRef, vModelText, watch, withCtx, withDirectives, withModifiers } from "vue";
+import { Fragment, Teleport, Transition, TransitionGroup, computed, createApp, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, markRaw, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onErrorCaptured, onMounted, onScopeDispose, openBlock, provide, reactive, ref, renderList, resolveComponent, resolveDynamicComponent, shallowRef, toDisplayString, unref, useTemplateRef, vModelCheckbox, vModelText, watch, withCtx, withDirectives, withModifiers } from "vue";
 import { getDefaultValue, localeLabel, localePath, parseLocalePath, registerFieldSchemas } from "mechanica-shared";
 import { blocksList } from "virtual:mechanica/blocks";
 import { composedList } from "virtual:mechanica/composed";
@@ -1886,62 +1886,70 @@ var _hoisted_3$3 = { class: "mech-pages__header" };
 var _hoisted_4$3 = { class: "mech-pages__count" };
 var _hoisted_5$2 = { class: "mech-pages__toolbar" };
 var _hoisted_6$2 = { class: "mech-pages__search-wrap" };
-var _hoisted_7$2 = { class: "mech-pages__content" };
-var _hoisted_8$2 = {
+var _hoisted_7$2 = { class: "mech-pages__filters" };
+var _hoisted_8$2 = { class: "mech-pages__sort" };
+var _hoisted_9$2 = {
+	key: 0,
+	class: "mech-checkbox mech-pages__toggle"
+};
+var _hoisted_10$2 = { class: "mech-pages__content" };
+var _hoisted_11$1 = {
 	key: 0,
 	class: "mech-pages__rail"
 };
-var _hoisted_9$2 = { class: "mech-pages__rail-count" };
-var _hoisted_10$2 = ["onClick"];
-var _hoisted_11$1 = { class: "mech-pages__rail-name" };
 var _hoisted_12 = { class: "mech-pages__rail-count" };
 var _hoisted_13 = ["onClick"];
-var _hoisted_14 = [
+var _hoisted_14 = { class: "mech-pages__rail-name" };
+var _hoisted_15 = { class: "mech-pages__rail-count" };
+var _hoisted_16 = ["onClick"];
+var _hoisted_17 = [
 	"onClick",
 	"onMouseenter",
 	"onContextmenu"
 ];
-var _hoisted_15 = { class: "mech-pages__cell-name" };
-var _hoisted_16 = { class: "mech-pages__name" };
-var _hoisted_17 = {
+var _hoisted_18 = { class: "mech-pages__cell-name" };
+var _hoisted_19 = { class: "mech-pages__name" };
+var _hoisted_20 = {
 	key: 0,
 	class: "mech-pages__badge is-draft"
 };
-var _hoisted_18 = {
+var _hoisted_21 = {
 	key: 1,
 	class: "mech-pages__badge"
 };
-var _hoisted_19 = {
+var _hoisted_22 = {
 	key: 2,
 	class: "mech-pages__badge"
 };
-var _hoisted_20 = {
+var _hoisted_23 = {
 	key: 3,
 	class: "mech-pages__locales"
 };
-var _hoisted_21 = ["title"];
-var _hoisted_22 = { class: "mech-pages__cell-path" };
-var _hoisted_23 = ["onClick"];
-var _hoisted_24 = ["onClick"];
-var _hoisted_25 = ["onClick"];
-var _hoisted_26 = {
+var _hoisted_24 = ["title"];
+var _hoisted_25 = { class: "mech-pages__cell-path" };
+var _hoisted_26 = ["onClick"];
+var _hoisted_27 = ["onClick"];
+var _hoisted_28 = ["onClick"];
+var _hoisted_29 = {
 	key: 0,
 	class: "mech-pages__empty"
 };
-var _hoisted_27 = { class: "mech-pages__preview" };
-var _hoisted_28 = { class: "mech-pages__preview-frame" };
-var _hoisted_29 = ["src", "data-path"];
-var _hoisted_30 = {
+var _hoisted_30 = { class: "mech-pages__preview" };
+var _hoisted_31 = { class: "mech-pages__preview-frame" };
+var _hoisted_32 = ["src", "data-path"];
+var _hoisted_33 = {
 	key: 1,
 	class: "mech-pages__preview-empty"
 };
-var _hoisted_31 = { class: "mech-pages__preview-monogram" };
-var _hoisted_32 = {
+var _hoisted_34 = { class: "mech-pages__preview-monogram" };
+var _hoisted_35 = {
 	key: 0,
 	class: "mech-pages__preview-caption"
 };
-var _hoisted_33 = { class: "mech-pages__preview-name" };
-var _hoisted_34 = { class: "mech-pages__preview-path" };
+var _hoisted_36 = { class: "mech-pages__preview-name" };
+var _hoisted_37 = { class: "mech-pages__preview-path" };
+var SHOW_GENERATED_KEY = "mech:pages:show-generated";
+var SORT_KEY = "mech:pages:sort";
 //#endregion
 //#region src/editor/dialogs/PagesDialog.vue
 var PagesDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -1963,20 +1971,42 @@ var PagesDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		const searchInput = useTemplateRef("searchInput");
 		const listEl = useTemplateRef("listEl");
 		const searching = computed(() => !!query.value.trim());
+		const showGenerated = ref(typeof localStorage === "undefined" || localStorage.getItem(SHOW_GENERATED_KEY) !== "0");
+		watch(showGenerated, (value) => {
+			try {
+				localStorage.setItem(SHOW_GENERATED_KEY, value ? "1" : "0");
+			} catch {}
+		});
+		const hasGenerated = computed(() => pages.value.some((page) => page.generated));
+		const listedPages = computed(() => showGenerated.value ? pages.value : pages.value.filter((page) => !page.generated));
+		const sortKey = ref((typeof localStorage !== "undefined" && localStorage.getItem(SORT_KEY)) === "name" ? "name" : "path");
+		watch(sortKey, (value) => {
+			try {
+				localStorage.setItem(SORT_KEY, value);
+			} catch {}
+		});
+		const sortOptions = [{
+			value: "path",
+			label: "Path"
+		}, {
+			value: "name",
+			label: "Name"
+		}];
 		const folders = computed(() => {
 			const counts = /* @__PURE__ */ new Map();
-			for (const page of pages.value) if (page.folderPath) counts.set(page.folderPath, (counts.get(page.folderPath) ?? 0) + 1);
+			for (const page of listedPages.value) if (page.folderPath) counts.set(page.folderPath, (counts.get(page.folderPath) ?? 0) + 1);
 			return [...counts.entries()].sort(([a], [b]) => a.localeCompare(b)).map(([name, count]) => ({
 				name,
 				count
 			}));
 		});
 		const visible = computed(() => {
-			if (searching.value) return filterPages(pages.value, query.value);
-			if (activeFolder.value) return pages.value.filter((page) => page.folderPath === activeFolder.value);
-			return pages.value;
+			if (searching.value) return filterPages(listedPages.value, query.value);
+			if (activeFolder.value) return listedPages.value.filter((page) => page.folderPath === activeFolder.value);
+			return listedPages.value;
 		});
-		const groups = computed(() => groupPagesByFolder(visible.value));
+		const sorted = computed(() => [...visible.value].sort((a, b) => sortKey.value === "name" ? (a.name || a.path).localeCompare(b.name || b.path) : a.path.localeCompare(b.path)));
+		const groups = computed(() => groupPagesByFolder(sorted.value));
 		/** Flat list in render order — keyboard navigation walks this. */
 		const rows = computed(() => groups.value.flatMap((group) => group.pages));
 		const showGroupHeaders = computed(() => searching.value || !activeFolder.value);
@@ -1985,7 +2015,7 @@ var PagesDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		onMounted(async () => {
 			await load();
 			searchInput.value?.focus();
-			activePath.value = pages.value.some((page) => page.path === current.value) ? current.value : rows.value[0]?.path ?? null;
+			activePath.value = rows.value.some((page) => page.path === current.value) ? current.value : rows.value[0]?.path ?? null;
 		});
 		watch(rows, (list) => {
 			if (!list.some((page) => page.path === activePath.value)) activePath.value = list[0]?.path ?? null;
@@ -2135,8 +2165,8 @@ var PagesDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1$4, [createElementVNode("div", _hoisted_2$4, [
 				createElementVNode("header", _hoisted_3$3, [
-					_cache[4] || (_cache[4] = createElementVNode("h2", { class: "mech-pages__title" }, "Pages", -1)),
-					createElementVNode("span", _hoisted_4$3, toDisplayString(pages.value.length), 1),
+					_cache[6] || (_cache[6] = createElementVNode("h2", { class: "mech-pages__title" }, "Pages", -1)),
+					createElementVNode("span", _hoisted_4$3, toDisplayString(listedPages.value.length), 1),
 					createElementVNode("button", {
 						type: "button",
 						class: "mech-pages__close",
@@ -2159,15 +2189,25 @@ var PagesDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 					type: "button",
 					class: "mech-button is-primary",
 					onClick: startCreate
-				}, [createVNode(VIcon_default, { name: "plus" }), _cache[5] || (_cache[5] = createTextVNode(" New page ", -1))])]),
-				createElementVNode("div", _hoisted_7$2, [folders.value.length ? (openBlock(), createElementBlock("nav", _hoisted_8$2, [createElementVNode("button", {
+				}, [createVNode(VIcon_default, { name: "plus" }), _cache[7] || (_cache[7] = createTextVNode(" New page ", -1))])]),
+				createElementVNode("div", _hoisted_7$2, [createElementVNode("div", _hoisted_8$2, [_cache[8] || (_cache[8] = createElementVNode("span", { class: "mech-pages__sort-label" }, "Sort", -1)), createVNode(VSegmented_default, {
+					modelValue: sortKey.value,
+					"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => sortKey.value = $event),
+					options: sortOptions,
+					size: "sm",
+					"aria-label": "Sort pages"
+				}, null, 8, ["modelValue"])]), hasGenerated.value ? (openBlock(), createElementBlock("label", _hoisted_9$2, [withDirectives(createElementVNode("input", {
+					"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => showGenerated.value = $event),
+					type: "checkbox"
+				}, null, 512), [[vModelCheckbox, showGenerated.value]]), _cache[9] || (_cache[9] = createElementVNode("span", null, "Show generated pages", -1))])) : createCommentVNode("", true)]),
+				createElementVNode("div", _hoisted_10$2, [folders.value.length ? (openBlock(), createElementBlock("nav", _hoisted_11$1, [createElementVNode("button", {
 					type: "button",
 					class: normalizeClass(["mech-pages__rail-item", { "is-active": !activeFolder.value && !searching.value }]),
-					onClick: _cache[2] || (_cache[2] = ($event) => selectFolder(null))
+					onClick: _cache[4] || (_cache[4] = ($event) => selectFolder(null))
 				}, [
 					createVNode(VIcon_default, { name: "book" }),
-					_cache[6] || (_cache[6] = createElementVNode("span", { class: "mech-pages__rail-name" }, "All pages", -1)),
-					createElementVNode("span", _hoisted_9$2, toDisplayString(pages.value.length), 1)
+					_cache[10] || (_cache[10] = createElementVNode("span", { class: "mech-pages__rail-name" }, "All pages", -1)),
+					createElementVNode("span", _hoisted_12, toDisplayString(listedPages.value.length), 1)
 				], 2), (openBlock(true), createElementBlock(Fragment, null, renderList(folders.value, (folder) => {
 					return openBlock(), createElementBlock("button", {
 						key: folder.name,
@@ -2176,15 +2216,15 @@ var PagesDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 						onClick: ($event) => selectFolder(folder.name)
 					}, [
 						createVNode(VIcon_default, { name: "folder" }),
-						createElementVNode("span", _hoisted_11$1, toDisplayString(folder.name), 1),
-						createElementVNode("span", _hoisted_12, toDisplayString(folder.count), 1)
-					], 10, _hoisted_10$2);
+						createElementVNode("span", _hoisted_14, toDisplayString(folder.name), 1),
+						createElementVNode("span", _hoisted_15, toDisplayString(folder.count), 1)
+					], 10, _hoisted_13);
 				}), 128))])) : createCommentVNode("", true), createElementVNode("div", {
 					ref_key: "listEl",
 					ref: listEl,
 					class: "mech-pages__list"
 				}, [
-					_cache[7] || (_cache[7] = createElementVNode("div", { class: "mech-pages__thead" }, [
+					_cache[11] || (_cache[11] = createElementVNode("div", { class: "mech-pages__thead" }, [
 						createElementVNode("span", null, "Name"),
 						createElementVNode("span", null, "Path"),
 						createElementVNode("span", { "aria-hidden": "true" })
@@ -2196,7 +2236,7 @@ var PagesDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 							class: "mech-pages__group",
 							title: "Show only this folder",
 							onClick: ($event) => selectFolder(group.folder)
-						}, [createVNode(VIcon_default, { name: "folder" }), createTextVNode(" " + toDisplayString(group.folder), 1)], 8, _hoisted_13)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(group.pages, (page) => {
+						}, [createVNode(VIcon_default, { name: "folder" }), createTextVNode(" " + toDisplayString(group.folder), 1)], 8, _hoisted_16)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(group.pages, (page) => {
 							return openBlock(), createElementBlock("div", {
 								key: page.path,
 								class: normalizeClass(["mech-pages__row", {
@@ -2207,57 +2247,57 @@ var PagesDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 								onMouseenter: ($event) => activePath.value = page.path,
 								onContextmenu: ($event) => onRowMenu($event, page)
 							}, [
-								createElementVNode("span", _hoisted_15, [
-									createElementVNode("span", _hoisted_16, toDisplayString(page.name || page.path), 1),
-									page.draft ? (openBlock(), createElementBlock("span", _hoisted_17, "Draft")) : createCommentVNode("", true),
-									page.generated ? (openBlock(), createElementBlock("span", _hoisted_18, "Generated")) : createCommentVNode("", true),
-									page.path === currentLogical.value ? (openBlock(), createElementBlock("span", _hoisted_19, "Current")) : createCommentVNode("", true),
-									unref(localeConfig) && page.locales ? (openBlock(), createElementBlock("span", _hoisted_20, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(localeCodes), (code) => {
+								createElementVNode("span", _hoisted_18, [
+									createElementVNode("span", _hoisted_19, toDisplayString(page.name || page.path), 1),
+									page.draft ? (openBlock(), createElementBlock("span", _hoisted_20, "Draft")) : createCommentVNode("", true),
+									page.generated ? (openBlock(), createElementBlock("span", _hoisted_21, "Generated")) : createCommentVNode("", true),
+									page.path === currentLogical.value ? (openBlock(), createElementBlock("span", _hoisted_22, "Current")) : createCommentVNode("", true),
+									unref(localeConfig) && page.locales ? (openBlock(), createElementBlock("span", _hoisted_23, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(localeCodes), (code) => {
 										return openBlock(), createElementBlock("span", {
 											key: code,
 											class: normalizeClass(["mech-pages__loc", { "is-on": page.locales.includes(code) }]),
 											title: `${localeName(code)}: ${page.locales.includes(code) ? "translated" : "not translated"}`
-										}, toDisplayString(code), 11, _hoisted_21);
+										}, toDisplayString(code), 11, _hoisted_24);
 									}), 128))])) : createCommentVNode("", true)
 								]),
-								createElementVNode("span", _hoisted_22, toDisplayString(page.path), 1),
+								createElementVNode("span", _hoisted_25, toDisplayString(page.path), 1),
 								!page.generated ? (openBlock(), createElementBlock("span", {
 									key: 0,
 									class: "mech-pages__actions",
-									onClick: _cache[3] || (_cache[3] = withModifiers(() => {}, ["stop"]))
+									onClick: _cache[5] || (_cache[5] = withModifiers(() => {}, ["stop"]))
 								}, [
 									createElementVNode("button", {
 										type: "button",
 										title: "Rename",
 										onClick: ($event) => startEdit(page)
-									}, [createVNode(VIcon_default, { name: "pencil" })], 8, _hoisted_23),
+									}, [createVNode(VIcon_default, { name: "pencil" })], 8, _hoisted_26),
 									createElementVNode("button", {
 										type: "button",
 										title: "Duplicate",
 										onClick: ($event) => startDuplicate(page)
-									}, [createVNode(VIcon_default, { name: "copy" })], 8, _hoisted_24),
+									}, [createVNode(VIcon_default, { name: "copy" })], 8, _hoisted_27),
 									createElementVNode("button", {
 										type: "button",
 										title: "Delete",
 										class: "is-danger",
 										onClick: ($event) => confirmRemove(page)
-									}, [createVNode(VIcon_default, { name: "trash" })], 8, _hoisted_25)
+									}, [createVNode(VIcon_default, { name: "trash" })], 8, _hoisted_28)
 								])) : createCommentVNode("", true)
-							], 42, _hoisted_14);
+							], 42, _hoisted_17);
 						}), 128))], 64);
 					}), 128)),
-					!rows.value.length ? (openBlock(), createElementBlock("p", _hoisted_26, toDisplayString(query.value ? `No pages match “${query.value}”.` : "No pages yet."), 1)) : createCommentVNode("", true)
+					!rows.value.length ? (openBlock(), createElementBlock("p", _hoisted_29, toDisplayString(query.value ? `No pages match “${query.value}”.` : "No pages yet."), 1)) : createCommentVNode("", true)
 				], 512)])
-			]), createElementVNode("aside", _hoisted_27, [createElementVNode("div", _hoisted_28, [previewPage.value && !thumbFailed.has(previewPage.value.path) ? (openBlock(), createElementBlock("img", {
+			]), createElementVNode("aside", _hoisted_30, [createElementVNode("div", _hoisted_31, [previewPage.value && !thumbFailed.has(previewPage.value.path) ? (openBlock(), createElementBlock("img", {
 				key: previewPage.value.path,
 				src: thumbSrc(previewPage.value),
 				"data-path": previewPage.value.path,
 				alt: "",
 				onError: onThumbError
-			}, null, 40, _hoisted_29)) : (openBlock(), createElementBlock("div", _hoisted_30, [createElementVNode("span", _hoisted_31, toDisplayString(monogram.value), 1), previewPage.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_cache[8] || (_cache[8] = createElementVNode("p", null, "No preview yet", -1)), _cache[9] || (_cache[9] = createElementVNode("code", null, "mechanica thumbs", -1))], 64)) : createCommentVNode("", true)]))]), previewPage.value ? (openBlock(), createElementBlock("div", _hoisted_32, [createElementVNode("span", _hoisted_33, toDisplayString(previewPage.value.name || previewPage.value.path), 1), createElementVNode("span", _hoisted_34, toDisplayString(previewPage.value.path), 1)])) : createCommentVNode("", true)])]);
+			}, null, 40, _hoisted_32)) : (openBlock(), createElementBlock("div", _hoisted_33, [createElementVNode("span", _hoisted_34, toDisplayString(monogram.value), 1), previewPage.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_cache[12] || (_cache[12] = createElementVNode("p", null, "No preview yet", -1)), _cache[13] || (_cache[13] = createElementVNode("code", null, "mechanica thumbs", -1))], 64)) : createCommentVNode("", true)]))]), previewPage.value ? (openBlock(), createElementBlock("div", _hoisted_35, [createElementVNode("span", _hoisted_36, toDisplayString(previewPage.value.name || previewPage.value.path), 1), createElementVNode("span", _hoisted_37, toDisplayString(previewPage.value.path), 1)])) : createCommentVNode("", true)])]);
 		};
 	}
-}), [["__scopeId", "data-v-5f70933a"]]);
+}), [["__scopeId", "data-v-665bb42e"]]);
 //#endregion
 //#region src/editor/components/PageBar.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$3 = { class: "mech-pagebar__icon" };

package/dist/plugin.js

@@ -775,6 +775,7 @@ function generateSsrEntry(options) {
 		``,
 		`registerComponents(blocksMap)`,
 		`export const site = ${JSON.stringify(options.site ?? {})}`,
+		`export const assetsUrl = ${JSON.stringify(options.assetsUrl ?? null)}`,
 		`export const locales = ${JSON.stringify(options.locales ?? null)}`,
 		`export const generatedPages = ${JSON.stringify(options.generatedPages ?? [])}`,
 		`export const dataEntries = getDataEntries()`,
@@ -1689,6 +1690,7 @@ function mechanica(options = {}) {
 					url: options.siteUrl,
 					name: options.siteName
 				},
+				assetsUrl: options.assetsUrl,
 				locales,
 				generatedPages: await loadGeneratedPages()
 			});

package/dist/types/cli/export.d.ts

@@ -22,6 +22,8 @@ export interface SsrBundle {
         url?: string;
         name?: string;
     };
+    /** CDN base URL for static assets, baked from the plugin's `assetsUrl` option. */
+    assetsUrl?: string | null;
     /** The site's locale config baked in from the plugin's `locales` option. */
     locales?: LocalesConfig | null;
     /** Programmatically generated pages (plugin `generatePages`), baked as plain
@@ -37,6 +39,12 @@ export interface ExportOptions {
     siteUrl?: string;
     /** Site display name (WebSite JSON-LD). Overrides the plugin's `siteName`. */
     siteName?: string;
+    /**
+     * Base URL (CDN origin) to serve static assets from — prefixes both the build
+     * assets (`/assets/…`) and uploaded media (`/media/…`). Overrides the plugin's
+     * `assetsUrl`. Files still land in `export/`; upload them to the CDN yourself.
+     */
+    assetsUrl?: string;
     /** Warning sink (broken links, orphaned assets). Defaults to `console.warn`. */
     onWarn?: (message: string) => void;
 }
@@ -49,7 +57,8 @@ export interface ExportOptions {
  * `<cwd>/.mech`.
  *
  * Beyond the pages it also: rewrites + copies uploaded assets
- * (`/@mechanica/assets/…` → `/media/…`), warns about dead internal links,
+ * (`/@mechanica/assets/…` → `/media/…`, or `<assetsUrl>/media/…` when a CDN
+ * base is set), warns about dead internal links,
  * orphaned uploads and page-level SEO issues, emits `404.html` when a `/404`
  * page exists, and — when a site url is known (plugin `siteUrl` option or
  * `--site-url`) — injects the automatic SEO tags (canonical, `og:url`,

package/dist/types/vite/entries.d.ts

@@ -58,6 +58,9 @@ export interface SsrEntryOptions {
         url?: string;
         name?: string;
     };
+    /** CDN base URL for static assets (plugin `assetsUrl`) — rides the bundle so
+     *  `mechanica export` can serve `/assets/…` and `/media/…` from it. */
+    assetsUrl?: string;
     /** The site's locale config (multi-language) — rides the bundle so the export
      *  can walk translations, and gets baked into each page's `state.locales`. */
     locales?: import('mechanica-shared').LocalesConfig | null;

package/dist/types/vite/plugin.d.ts

@@ -50,6 +50,21 @@ export interface MechanicaPluginOptions {
     siteUrl?: string;
     /** The site's display name — `{{ site.name }}` + WebSite JSON-LD at export. */
     siteName?: string;
+    /**
+     * Base URL to serve static assets from at export — a CDN origin like
+     * `https://cdn.example.com`. When set, `mechanica export` rewrites both the
+     * build assets (`/assets/…`) and uploaded media (`/media/…`) to
+     * `<assetsUrl>/assets/…` and `<assetsUrl>/media/…`. Files are still emitted
+     * into `export/` — upload them to the CDN yourself (e.g. in CI). A trailing
+     * slash is ignored. `mechanica export --assets-url <origin>` overrides it.
+     *
+     * Only affects the static export; the dev server keeps serving assets
+     * locally. For build assets referenced from inside CSS/JS chunks (fonts,
+     * `url(...)` backgrounds) on a cross-origin CDN, set Vite's `base` instead —
+     * this option rewrites HTML asset tags and uploaded media, not chunk-internal
+     * references.
+     */
+    assetsUrl?: string;
     /**
      * Multi-language configuration. Either a full config
      * (`{ default: 'en', all: ['en', 'ru'], labels? }`) or a bare list of codes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mechanica",
-  "version": "2.0.0-alpha.8",
+  "version": "2.0.0-alpha.9",
   "description": "Build Vue 3 websites with a visual block editor",
   "license": "MIT",
   "repository": {
@@ -63,7 +63,7 @@
     "prepublishOnly": "bun run build"
   },
   "dependencies": {
-    "mechanica-shared": "2.0.0-alpha.8",
+    "mechanica-shared": "2.0.0-alpha.9",
     "@vue/compiler-sfc": "^3.5.38",
     "compact-json-schema": "^0.1.5",
     "estree-walker": "^3.0.3",

package/src/cli/cli.ts

@@ -14,7 +14,9 @@ Usage:
                             (a site url — the plugin's siteUrl option or
                              --site-url <origin> — also turns on the automatic
                              SEO tags and emits sitemap.xml + robots.txt;
-                             --site-name <name> adds WebSite JSON-LD)
+                             --site-name <name> adds WebSite JSON-LD;
+                             --assets-url <origin> serves /assets and /media from
+                             a CDN base — files still land in export/)
   mechanica push [--key]    Upload dist/ to a backend (--key, --host, --dir)
   mechanica shot <blockId>  Screenshot one block via the dev preview route
   mechanica shot </path>    Screenshot a whole page (editor overlay stripped)
@@ -42,7 +44,11 @@ export async function run(argv: string[]): Promise<void> {
     case 'build':
       return runBuild()
     case 'export':
-      return runExport({ siteUrl: str(flags['site-url']), siteName: str(flags['site-name']) })
+      return runExport({
+        siteUrl: str(flags['site-url']),
+        siteName: str(flags['site-name']),
+        assetsUrl: str(flags['assets-url']),
+      })
     case 'images':
       return runImages({ force: flags.force === true })
     case 'push':

package/src/cli/export.ts

@@ -227,6 +227,8 @@ export interface SsrBundle {
   dataEntries?: { id: string; props: any }[]
   /** Site identity baked in from the plugin's `siteUrl` / `siteName` options. */
   site?: { url?: string; name?: string }
+  /** CDN base URL for static assets, baked from the plugin's `assetsUrl` option. */
+  assetsUrl?: string | null
   /** The site's locale config baked in from the plugin's `locales` option. */
   locales?: LocalesConfig | null
   /** Programmatically generated pages (plugin `generatePages`), baked as plain
@@ -268,6 +270,12 @@ export interface ExportOptions {
   siteUrl?: string
   /** Site display name (WebSite JSON-LD). Overrides the plugin's `siteName`. */
   siteName?: string
+  /**
+   * Base URL (CDN origin) to serve static assets from — prefixes both the build
+   * assets (`/assets/…`) and uploaded media (`/media/…`). Overrides the plugin's
+   * `assetsUrl`. Files still land in `export/`; upload them to the CDN yourself.
+   */
+  assetsUrl?: string
   /** Warning sink (broken links, orphaned assets). Defaults to `console.warn`. */
   onWarn?: (message: string) => void
 }
@@ -375,7 +383,8 @@ async function backfillImageMeta(
  * `<cwd>/.mech`.
  *
  * Beyond the pages it also: rewrites + copies uploaded assets
- * (`/@mechanica/assets/…` → `/media/…`), warns about dead internal links,
+ * (`/@mechanica/assets/…` → `/media/…`, or `<assetsUrl>/media/…` when a CDN
+ * base is set), warns about dead internal links,
  * orphaned uploads and page-level SEO issues, emits `404.html` when a `/404`
  * page exists, and — when a site url is known (plugin `siteUrl` option or
  * `--site-url`) — injects the automatic SEO tags (canonical, `og:url`,
@@ -393,6 +402,9 @@ export async function exportProject(
   // CLI flags win over the site config baked into the SSR bundle.
   const siteUrl = options.siteUrl ?? ssr.site?.url
   const siteName = options.siteName ?? ssr.site?.name
+  // CDN base for static assets (plugin `assetsUrl` or `--assets-url`); trim a
+  // trailing slash so we build `<base>/media/…` and `<base>/assets/…` cleanly.
+  const assetsBase = (options.assetsUrl ?? ssr.assetsUrl ?? '').replace(/\/+$/, '')
 
   // Composed blocks join the block set: their (unfolded) schemas fill placed
   // data defaults, and they count as known blocks for link/unknown checks.
@@ -536,7 +548,8 @@ export async function exportProject(
     if (typeof src !== 'string' || !src.startsWith(UPLOADS_PREFIX)) return src
     const relative = decodeURIComponent(src.slice(UPLOADS_PREFIX.length))
     referenced.add(relative)
-    return `/${MEDIA_DIR}/${relative}`
+    // `assetsBase` is a trimmed CDN origin (or '' — then this stays root-relative).
+    return `${assetsBase}/${MEDIA_DIR}/${relative}`
   }
 
   // Blocks are code-split in the client build: give each page stylesheet +
@@ -569,6 +582,9 @@ export async function exportProject(
     dataEntries: ssr.dataEntries ?? [],
     projectData,
     site: { url: siteUrl, name: siteName },
+    // Serve the build assets (`/assets/…` in the HTML) from the CDN base too, so
+    // the whole `export/` tree can be hosted there. Empty = keep them local.
+    assetsUrl: assetsBase || undefined,
     // Bake the locale config into each page's `state.locales` so the runtime
     // prefixes internal links for `state.page.locale`.
     locales: config ?? undefined,

package/src/editor/dialogs/PagesDialog.vue

@@ -3,7 +3,7 @@
     <div class="mech-pages__card" role="dialog" aria-modal="true">
       <header class="mech-pages__header">
         <h2 class="mech-pages__title">Pages</h2>
-        <span class="mech-pages__count">{{ pages.length }}</span>
+        <span class="mech-pages__count">{{ listedPages.length }}</span>
         <button type="button" class="mech-pages__close" aria-label="Close" @click="dialog.back()">
           <VIcon name="close" />
         </button>
@@ -26,6 +26,18 @@
         </button>
       </div>
 
+      <!-- Filter / sort row — a home for sorting and toggles like generated pages. -->
+      <div class="mech-pages__filters">
+        <div class="mech-pages__sort">
+          <span class="mech-pages__sort-label">Sort</span>
+          <VSegmented v-model="sortKey" :options="sortOptions" size="sm" aria-label="Sort pages" />
+        </div>
+        <label v-if="hasGenerated" class="mech-checkbox mech-pages__toggle">
+          <input v-model="showGenerated" type="checkbox" />
+          <span>Show generated pages</span>
+        </label>
+      </div>
+
       <div class="mech-pages__content">
         <nav v-if="folders.length" class="mech-pages__rail">
           <button
@@ -36,7 +48,7 @@
           >
             <VIcon name="book" />
             <span class="mech-pages__rail-name">All pages</span>
-            <span class="mech-pages__rail-count">{{ pages.length }}</span>
+            <span class="mech-pages__rail-count">{{ listedPages.length }}</span>
           </button>
           <button
             v-for="folder in folders"
@@ -146,6 +158,7 @@
 <script setup lang="ts">
 import { computed, inject, nextTick, onMounted, reactive, ref, useTemplateRef, watch } from 'vue'
 import VIcon from '../components/VIcon.vue'
+import VSegmented from '../components/VSegmented.vue'
 import ConfirmDialog from './ConfirmDialog.vue'
 import PageFormDialog from './PageFormDialog.vue'
 import { useDialog } from '../ui/dialog'
@@ -178,9 +191,45 @@ const listEl = useTemplateRef<HTMLDivElement>('listEl')
 
 const searching = computed(() => !!query.value.trim())
 
+// Generated pages (plugin `generatePages`) can be numerous — a big catalog or
+// API-doc set. This toggle hides them from the list; the preference persists per
+// dev-server origin and defaults to shown. `listedPages` is the filtered set that
+// every count, folder, and row below derives from.
+const SHOW_GENERATED_KEY = 'mech:pages:show-generated'
+const showGenerated = ref(typeof localStorage === 'undefined' || localStorage.getItem(SHOW_GENERATED_KEY) !== '0')
+watch(showGenerated, (value) => {
+  try {
+    localStorage.setItem(SHOW_GENERATED_KEY, value ? '1' : '0')
+  } catch {
+    /* storage unavailable */
+  }
+})
+const hasGenerated = computed(() => pages.value.some((page) => page.generated))
+const listedPages = computed(() =>
+  showGenerated.value ? pages.value : pages.value.filter((page) => !page.generated),
+)
+
+// Sort order within each folder group. Defaults to `path` (the server's own
+// order — the folder rail is path-shaped), persisted like `showGenerated`.
+const SORT_KEY = 'mech:pages:sort'
+const sortKey = ref<'path' | 'name'>(
+  (typeof localStorage !== 'undefined' && localStorage.getItem(SORT_KEY)) === 'name' ? 'name' : 'path',
+)
+watch(sortKey, (value) => {
+  try {
+    localStorage.setItem(SORT_KEY, value)
+  } catch {
+    /* storage unavailable */
+  }
+})
+const sortOptions = [
+  { value: 'path', label: 'Path' },
+  { value: 'name', label: 'Name' },
+]
+
 const folders = computed(() => {
   const counts = new Map<string, number>()
-  for (const page of pages.value) {
+  for (const page of listedPages.value) {
     if (page.folderPath) counts.set(page.folderPath, (counts.get(page.folderPath) ?? 0) + 1)
   }
   return [...counts.entries()]
@@ -190,11 +239,19 @@ const folders = computed(() => {
 
 // Search is global — it ignores the folder filter so a match can never hide.
 const visible = computed(() => {
-  if (searching.value) return filterPages(pages.value, query.value)
-  if (activeFolder.value) return pages.value.filter((page) => page.folderPath === activeFolder.value)
-  return pages.value
+  if (searching.value) return filterPages(listedPages.value, query.value)
+  if (activeFolder.value) return listedPages.value.filter((page) => page.folderPath === activeFolder.value)
+  return listedPages.value
 })
-const groups = computed(() => groupPagesByFolder(visible.value))
+// Sort within each folder group by the chosen key (grouping is preserved).
+const sorted = computed(() =>
+  [...visible.value].sort((a, b) =>
+    sortKey.value === 'name'
+      ? (a.name || a.path).localeCompare(b.name || b.path)
+      : a.path.localeCompare(b.path),
+  ),
+)
+const groups = computed(() => groupPagesByFolder(sorted.value))
 /** Flat list in render order — keyboard navigation walks this. */
 const rows = computed(() => groups.value.flatMap((group) => group.pages))
 // Inside a single folder the rail already names it; headers would be noise.
@@ -208,7 +265,9 @@ const monogram = computed(() =>
 onMounted(async () => {
   await load()
   searchInput.value?.focus()
-  activePath.value = pages.value.some((page) => page.path === current.value)
+  // Highlight the current page when it's in the (possibly filtered) list, else
+  // the first row — a generated current page hidden by the toggle falls back.
+  activePath.value = rows.value.some((page) => page.path === current.value)
     ? current.value
     : (rows.value[0]?.path ?? null)
 })
@@ -447,13 +506,39 @@ async function toggleDraft(page: PageItem) {
 .mech-pages__toolbar {
   display: flex;
   gap: 8px;
-  padding: 0 24px 14px;
+  padding: 0 24px 12px;
   flex: none;
 }
 .mech-pages__search-wrap {
   position: relative;
   flex: 1;
 }
+
+// ── Filter / sort row ────────────────────────────────────────────────────────
+.mech-pages__filters {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 0 24px 14px;
+  flex: none;
+}
+.mech-pages__sort {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+}
+.mech-pages__sort-label {
+  font-size: 10.5px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--mech-muted);
+}
+.mech-pages__toggle {
+  flex: none;
+  white-space: nowrap;
+}
 .mech-pages__search-icon {
   position: absolute;
   left: 12px;

package/src/vite/entries.ts

@@ -150,6 +150,9 @@ export interface SsrEntryOptions {
   /** Site identity (origin, name) from the plugin options — rides the bundle so
    *  `mechanica export` can emit canonical URLs, sitemap.xml and robots.txt. */
   site?: { url?: string; name?: string }
+  /** CDN base URL for static assets (plugin `assetsUrl`) — rides the bundle so
+   *  `mechanica export` can serve `/assets/…` and `/media/…` from it. */
+  assetsUrl?: string
   /** The site's locale config (multi-language) — rides the bundle so the export
    *  can walk translations, and gets baked into each page's `state.locales`. */
   locales?: import('mechanica-shared').LocalesConfig | null
@@ -178,6 +181,7 @@ export function generateSsrEntry(options: SsrEntryOptions): string {
     ``,
     `registerComponents(blocksMap)`,
     `export const site = ${JSON.stringify(options.site ?? {})}`,
+    `export const assetsUrl = ${JSON.stringify(options.assetsUrl ?? null)}`,
     `export const locales = ${JSON.stringify(options.locales ?? null)}`,
     `export const generatedPages = ${JSON.stringify(options.generatedPages ?? [])}`,
     `export const dataEntries = getDataEntries()`,

package/src/vite/plugin.ts

@@ -92,6 +92,21 @@ export interface MechanicaPluginOptions {
   siteUrl?: string
   /** The site's display name — `{{ site.name }}` + WebSite JSON-LD at export. */
   siteName?: string
+  /**
+   * Base URL to serve static assets from at export — a CDN origin like
+   * `https://cdn.example.com`. When set, `mechanica export` rewrites both the
+   * build assets (`/assets/…`) and uploaded media (`/media/…`) to
+   * `<assetsUrl>/assets/…` and `<assetsUrl>/media/…`. Files are still emitted
+   * into `export/` — upload them to the CDN yourself (e.g. in CI). A trailing
+   * slash is ignored. `mechanica export --assets-url <origin>` overrides it.
+   *
+   * Only affects the static export; the dev server keeps serving assets
+   * locally. For build assets referenced from inside CSS/JS chunks (fonts,
+   * `url(...)` backgrounds) on a cross-origin CDN, set Vite's `base` instead —
+   * this option rewrites HTML asset tags and uploaded media, not chunk-internal
+   * references.
+   */
+  assetsUrl?: string
   /**
    * Multi-language configuration. Either a full config
    * (`{ default: 'en', all: ['en', 'ru'], labels? }`) or a bare list of codes
@@ -465,6 +480,7 @@ export function mechanica(options: MechanicaPluginOptions = {}): Plugin {
         return generateSsrEntry({
           userEntry,
           site: { url: options.siteUrl, name: options.siteName },
+          assetsUrl: options.assetsUrl,
           locales,
           generatedPages: await loadGeneratedPages(),
         })