@bespokeagentics/microdots-host 0.1.0

package/src/placementChecks.ts

@@ -0,0 +1,428 @@
+import { Array, Option, Order } from 'effect'
+
+import type { ManifestTag, MicroDotManifest } from '@bespokeagentics/microdots-element'
+
+import {
+  type ResolvedPlacement,
+  conditionLabel,
+  conditionsOverlap,
+} from './rules.ts'
+import type { HostSlotManifest } from './slots.ts'
+import type { WireEnv } from './wire.ts'
+
+/**
+ * The placement CHECKS — six of the spec's seven, run as a pure lint engine
+ * over `resolvePlacements`' output. Phase 5 work item 4 of
+ * `wiki/plans/shipped/microdots-platform-phase-5-pages-design.md`;
+ * the seven checks' severities and sentences are the handoff spec's, lifted
+ * verbatim where the fixture wrote them. Check 5 (anchor selector crawl) is
+ * deferred with anchors.
+ *
+ * Reading B's qualifier lands here exactly as
+ * `question-does-the-override-contest-consider-condition.md` predicted: a
+ * placement overridden ENTIRELY raises no issues — it renders for nobody, so
+ * its problems are not the user's problem — but a PARTIALLY overridden one is
+ * still checked, because it still renders for somebody.
+ *
+ * Derived fresh on every call, never stored — `deriveWireState`'s precedent.
+ */
+
+export type PlacementCheckId =
+  | 'not-deployed'
+  | 'slot-not-in-theme'
+  | 'required-attribute-unset'
+  | 'mounts-twice-overlapping'
+  | 'over-weight-budget'
+  | 'placed-twice-disjoint'
+
+export type PlacementCheckSeverity = 'error' | 'warning' | 'note'
+
+/** One finding: which check, on which placement, what happens if ignored,
+ *  and what to do about it — the spec's inspector row, as data. */
+export type PlacementIssue = {
+  readonly check: PlacementCheckId
+  readonly severity: PlacementCheckSeverity
+  readonly placementId: string
+  readonly consequence: string
+  readonly action: string
+}
+
+/**
+ * A check that could NOT run — a missing slot manifest, a tag with no emitted
+ * manifest. Reported instead of silently skipped: an unverifiable check is
+ * not a green check, and the screen must be able to say so.
+ */
+export type UnverifiableCheck = {
+  readonly check: PlacementCheckId
+  readonly reason: string
+}
+
+export type PlacementCheckReport = {
+  readonly issues: ReadonlyArray<PlacementIssue>
+  readonly unverifiable: ReadonlyArray<UnverifiableCheck>
+}
+
+export type PlacementCheckContext = {
+  /** The emitted MicroDot manifests — whole manifests, not just tags, because
+   *  check 1 reads `service.deployedApiUrl` and check 6 reads
+   *  `bundle.gzipBytes`, both of which live beside the tags. */
+  readonly manifests: ReadonlyArray<MicroDotManifest>
+  /** Absent when the topology predates the slot manifest — check 2 is then
+   *  reported unverifiable rather than silently green. */
+  readonly slotManifest?: HostSlotManifest
+  readonly env: WireEnv
+  /** The page-weight budget in KB (KiB). The spec's default is 180. */
+  readonly budgetKb?: number
+}
+
+const DEFAULT_BUDGET_KB = 180
+const BYTES_PER_KB = 1024
+
+const kbOf = (bytes: number): number => Math.round(bytes / BYTES_PER_KB)
+
+/** The manifest that ships a tag, with the tag's own surface beside it. */
+const manifestForTag = (
+  manifests: ReadonlyArray<MicroDotManifest>,
+  tag: string,
+): Option.Option<{
+  readonly manifest: MicroDotManifest
+  readonly tagSpec: ManifestTag
+}> =>
+  Array.findFirst(manifests, manifest =>
+    Option.map(
+      Array.findFirst(manifest.tags, tagSpec => tagSpec.tag === tag),
+      tagSpec => ({ manifest, tagSpec }),
+    ),
+  )
+
+/**
+ * The DISTINCT tags among the rendered placements that no manifest ships.
+ *
+ * Deduped, because "no manifest for X" is a fact about the tag, not about the
+ * placement: three placements of one manifest-less tag on a route used to
+ * produce three byte-identical unverifiable lines in checks 1 and 3 while
+ * check 6 (which deduped from the start) produced one. An unverifiable list
+ * that repeats itself reads as three separate gaps and buries the others.
+ */
+const tagsWithoutManifest = (
+  rendered: ReadonlyArray<ResolvedPlacement>,
+  manifests: ReadonlyArray<MicroDotManifest>,
+): ReadonlyArray<string> =>
+  Array.dedupe(
+    Array.getSomes(
+      Array.map(rendered, (placement): Option.Option<string> =>
+        Option.isNone(manifestForTag(manifests, placement.tag))
+          ? Option.some(placement.tag)
+          : Option.none(),
+      ),
+    ),
+  )
+
+/* ============================================================
+   Check 1 — not deployed to this environment. Error.
+
+   Reachability is APPROXIMATED from the manifest, the phase's recorded
+   approximation refined by Phase 7: `dev` is always reachable (the local
+   service exists by construction), `preview`/`prod` are reachable iff the
+   manifest carries `service.deployedApiUrl`.
+   ============================================================ */
+
+const checkNotDeployed = (
+  rendered: ReadonlyArray<ResolvedPlacement>,
+  context: PlacementCheckContext,
+): PlacementCheckReport => {
+  if (context.env === 'dev') {
+    return { issues: [], unverifiable: [] }
+  }
+  const issues = Array.getSomes(
+    Array.map(rendered, (placement): Option.Option<PlacementIssue> =>
+      Option.flatMap(manifestForTag(context.manifests, placement.tag), found =>
+        found.manifest.service.deployedApiUrl === undefined
+          ? Option.some({
+              check: 'not-deployed',
+              severity: 'error',
+              placementId: placement.id,
+              // The fixture's sentence: the build stops short of this
+              // environment. Under the manifest approximation a dot without a
+              // deployedApiUrl stops at dev.
+              consequence: `Build ${found.manifest.build} stops at dev. In this environment the tag resolves to nothing and the slot collapses.`,
+              action: `Open build ${found.manifest.build}`,
+            })
+          : Option.none(),
+      ),
+    ),
+  )
+  const unverifiable = tagsWithoutManifest(rendered, context.manifests).map(
+    (tag): UnverifiableCheck => ({
+      check: 'not-deployed',
+      reason: `no manifest for ${tag} — deployment reachability cannot be verified`,
+    }),
+  )
+  return { issues, unverifiable }
+}
+
+/* ============================================================
+   Check 2 — slot not in the theme. Error.
+
+   The message carries the manifest's `theme@version`, so "valid under an
+   earlier theme version" is sayable. An absent slot manifest makes the whole
+   check unverifiable — reported, never silently green.
+   ============================================================ */
+
+const checkSlotInTheme = (
+  rendered: ReadonlyArray<ResolvedPlacement>,
+  slotManifest: HostSlotManifest | undefined,
+): PlacementCheckReport => {
+  if (slotManifest === undefined) {
+    return {
+      issues: [],
+      unverifiable: [
+        {
+          check: 'slot-not-in-theme',
+          reason:
+            'the topology declares no slotManifest — slot checks skipped, not passed',
+        },
+      ],
+    }
+  }
+  const theme = `${slotManifest.theme.name}@${slotManifest.theme.version}`
+  const issues = Array.getSomes(
+    Array.map(rendered, (placement): Option.Option<PlacementIssue> =>
+      Array.some(slotManifest.slots, slot => slot.id === placement.slotId)
+        ? Option.none()
+        : Option.some({
+            check: 'slot-not-in-theme',
+            severity: 'error',
+            placementId: placement.id,
+            consequence: `Slot ${placement.slotId} is not in ${theme}. The theme manifest declares ${slotManifest.slots.length} slots and this is not one of them. It was valid in an earlier theme version.`,
+            action: 'Move it to a declared slot',
+          }),
+    ),
+  )
+  return { issues, unverifiable: [] }
+}
+
+/* ============================================================
+   Check 3 — required attribute unset. Warning.
+
+   A manifest-`required` attribute with no default and `ownership: 'dot'`,
+   with no value in the resolved placement's supplied set. `environment` and
+   `host-input` attributes are exempt — the loader and the host supply those.
+   An empty-string value counts as unset: the loader drops empty overrides,
+   so `''` never reaches the element as a value.
+   ============================================================ */
+
+const checkRequiredAttributes = (
+  rendered: ReadonlyArray<ResolvedPlacement>,
+  manifests: ReadonlyArray<MicroDotManifest>,
+): PlacementCheckReport => {
+  const issues = Array.getSomes(
+    Array.map(rendered, (placement): Option.Option<PlacementIssue> =>
+      Option.flatMap(manifestForTag(manifests, placement.tag), found => {
+        const missing = Array.filter(
+          found.tagSpec.attributes,
+          attribute =>
+            attribute.required &&
+            attribute.default === undefined &&
+            attribute.ownership === 'dot' &&
+            (placement.values[attribute.name] === undefined ||
+              placement.values[attribute.name] === ''),
+        )
+        if (missing.length === 0) {
+          return Option.none()
+        }
+        const names = missing.map(attribute => attribute.name).join(', ')
+        const [isAre, itThem] =
+          missing.length > 1 ? ['are', 'them'] : ['is', 'it']
+        return Option.some({
+          check: 'required-attribute-unset',
+          severity: 'warning',
+          placementId: placement.id,
+          consequence: `${names} ${isAre} unset. ${placement.tag} declares ${itThem} required. Nothing on this route sets a value, so the element mounts and errors on first render.`,
+          action: 'Set a value above',
+        })
+      }),
+    ),
+  )
+  const unverifiable = tagsWithoutManifest(rendered, manifests).map(
+    (tag): UnverifiableCheck => ({
+      check: 'required-attribute-unset',
+      reason: `no manifest for ${tag} — its required attributes cannot be verified`,
+    }),
+  )
+  return { issues, unverifiable }
+}
+
+/* ============================================================
+   Checks 4 and 7 — the same dot twice on the route. Warning / note.
+
+   Computed over the RESOLUTION's output, so reading B's cross-level twins
+   fire. A pair where one member overrides the other is NOT a twin pair: the
+   override already resolved that collision — only one of them renders for
+   any given visitor — and its badge, not a duplicate warning, is how the
+   screen tells that story. Every other same-tag pair splits on condition
+   overlap: overlapping → check 4 (two instances run side by side),
+   disjoint → check 7 (legitimate variant work).
+   ============================================================ */
+
+const overridePair = (a: ResolvedPlacement, b: ResolvedPlacement): boolean =>
+  Array.some(a.overriddenBy, override => override.winnerId === b.id) ||
+  Array.some(b.overriddenBy, override => override.winnerId === a.id)
+
+const sourceName = (placement: ResolvedPlacement): string =>
+  placement.source._tag === 'route' ? 'this route' : placement.source.label
+
+const checkTwins = (
+  rendered: ReadonlyArray<ResolvedPlacement>,
+): PlacementCheckReport => {
+  const issues = Array.getSomes(
+    Array.map(rendered, (placement): Option.Option<PlacementIssue> => {
+      const twins = Array.filter(
+        rendered,
+        other =>
+          other !== placement &&
+          other.tag === placement.tag &&
+          !overridePair(placement, other),
+      )
+      const clash = Array.filter(twins, other =>
+        conditionsOverlap(other.condition, placement.condition),
+      )
+      const firstClash = Array.head(clash)
+      if (Option.isSome(firstClash)) {
+        const other = firstClash.value
+        return Option.some({
+          check: 'mounts-twice-overlapping',
+          severity: 'warning',
+          placementId: placement.id,
+          consequence: `${placement.tag} is also placed in ${other.slotId} (${sourceName(other)}). Both conditions match the same visitor, so two instances run side by side.`,
+          action: 'Narrow one condition',
+        })
+      }
+      const firstTwin = Array.head(twins)
+      if (Option.isSome(firstTwin)) {
+        const other = firstTwin.value
+        return Option.some({
+          check: 'placed-twice-disjoint',
+          severity: 'note',
+          placementId: placement.id,
+          consequence: `The other placement renders for ${conditionLabel(other.condition).toLowerCase()}. Only one instance can mount per visit — legitimate variant work, stated so it doesn't read as a mistake.`,
+          action: 'No action needed',
+        })
+      }
+      return Option.none()
+    }),
+  )
+  return { issues, unverifiable: [] }
+}
+
+/* ============================================================
+   Check 6 — over the page-weight budget. Warning.
+
+   Sums DISTINCT bundles' `gzipBytes` over the rendered placements —
+   distinct because `loadMicroDot` dedupes the fetch, so two tags from one
+   bundle (the workbench's three, bespoke-contact's two) weigh once, where
+   the fixture's per-placement sum would double-count. Names the largest.
+   The issue lands on the first placement of the largest bundle — the spec
+   shows it on the route inspector, and the largest contributor is the
+   actionable one.
+   ============================================================ */
+
+const checkWeightBudget = (
+  rendered: ReadonlyArray<ResolvedPlacement>,
+  context: PlacementCheckContext,
+): PlacementCheckReport => {
+  const budgetKb = context.budgetKb ?? DEFAULT_BUDGET_KB
+  const missingTags = tagsWithoutManifest(rendered, context.manifests)
+  const unverifiable: ReadonlyArray<UnverifiableCheck> =
+    missingTags.length === 0
+      ? []
+      : [
+          {
+            check: 'over-weight-budget',
+            reason: `no manifest for ${missingTags.join(', ')} — the route weight is a lower bound`,
+          },
+        ]
+
+  const contributors = Array.dedupeWith(
+    Array.getSomes(
+      Array.map(rendered, placement =>
+        Option.map(
+          manifestForTag(context.manifests, placement.tag),
+          found => found.manifest,
+        ),
+      ),
+    ),
+    (a, b) => a.name === b.name,
+  )
+  const totalBytes = Array.reduce(
+    contributors,
+    0,
+    (total, manifest) => total + manifest.bundle.gzipBytes,
+  )
+  if (totalBytes <= budgetKb * BYTES_PER_KB) {
+    return { issues: [], unverifiable }
+  }
+  if (!Array.isReadonlyArrayNonEmpty(contributors)) {
+    // Over budget with no contributors is unreachable for a non-negative
+    // budget (no contributors ⇒ zero bytes) — but `Array.max` demands a
+    // non-empty array, and this guard proves it without an assertion.
+    return { issues: [], unverifiable }
+  }
+  const largestManifest = Array.max(
+    contributors,
+    Order.mapInput(
+      Order.Number,
+      (manifest: MicroDotManifest) => manifest.bundle.gzipBytes,
+    ),
+  )
+  const largestTags = new Set(largestManifest.tags.map(tagSpec => tagSpec.tag))
+  const carrier = Array.findFirst(rendered, placement =>
+    largestTags.has(placement.tag),
+  )
+  return Option.match(carrier, {
+    onNone: (): PlacementCheckReport => ({ issues: [], unverifiable }),
+    onSome: (placement): PlacementCheckReport => ({
+      issues: [
+        {
+          check: 'over-weight-budget',
+          severity: 'warning',
+          placementId: placement.id,
+          consequence: `Total bundle weight of everything mounting on this route is ${kbOf(totalBytes)} KB gzipped against a ${budgetKb} KB budget. The largest is ${largestManifest.name} at ${kbOf(largestManifest.bundle.gzipBytes)} KB.`,
+          action: `Remove or split ${largestManifest.name}, or raise the budget`,
+        },
+      ],
+      unverifiable,
+    }),
+  })
+}
+
+/* ============================================================
+   The engine.
+   ============================================================ */
+
+/**
+ * Runs checks 1, 2, 3, 4, 6 and 7 over a resolution's output. Pure: same
+ * inputs, same report. Placements overridden ENTIRELY are excluded before
+ * any check runs — they render for nobody — while partially-overridden ones
+ * are checked like any other, the reading-B qualifier.
+ */
+export const checkPlacements = (
+  resolved: ReadonlyArray<ResolvedPlacement>,
+  context: PlacementCheckContext,
+): PlacementCheckReport => {
+  const rendered = Array.filter(
+    resolved,
+    placement => placement.state !== 'overridden',
+  )
+  const reports = [
+    checkNotDeployed(rendered, context),
+    checkSlotInTheme(rendered, context.slotManifest),
+    checkRequiredAttributes(rendered, context.manifests),
+    checkTwins(rendered),
+    checkWeightBudget(rendered, context),
+  ]
+  return {
+    issues: Array.flatMap(reports, report => report.issues),
+    unverifiable: Array.flatMap(reports, report => report.unverifiable),
+  }
+}

package/src/registry.ts

@@ -0,0 +1,63 @@
+/**
+ * What a host knows about one registered ELEMENT.
+ *
+ * The cardinality is the part that misleads: `bespoke-contact` is one MicroDot
+ * (one contract, one client, one service, one bundle) registering TWO elements,
+ * so five MicroDots produce six entries. `findEntry` is keyed by tag
+ * accordingly. See `wiki/_schema/glossary.md` for MicroDot vs element.
+ *
+ * A host knows five things about an element: its tag, where to fetch its bundle,
+ * where its API lives locally, where it lives deployed, and the attributes to
+ * apply on create. It imports no MicroDot code, so shipping a new version of a
+ * MicroDot never requires rebuilding the host.
+ */
+export type MicroDotEntry = {
+  readonly tag: string
+  readonly bundle: string
+  /** Port the service listens on under `bun run dev`. */
+  readonly localPort: number
+  /** Public HTTPS URL of the deployed service. ABSENT until the dot's first
+   *  deploy — the manifest ruling — so a host may register a local-only dot
+   *  (the workbench, until Phase 7's real deploys). `apiUrlFor` fails closed
+   *  on a non-local page rather than mounting a dot that cannot reach its
+   *  service. */
+  readonly deployedApiUrl?: string
+  /** Initial attributes applied when the element is created. */
+  readonly attributes: Readonly<Record<string, string>>
+}
+
+/** A host's whole registry: one entry per element it may mount. */
+export type MicroDotRegistry = ReadonlyArray<MicroDotEntry>
+
+const LOCAL_HOSTNAMES = ['localhost', '127.0.0.1']
+
+/**
+ * Resolved at runtime, not baked in at build time. A deployed HTTPS page cannot
+ * call http://localhost — browsers block it as mixed content — so the same build
+ * has to point at local services during `bun run dev` and at the deployed
+ * services everywhere else.
+ */
+export const apiUrlFor = (entry: MicroDotEntry, hostname: string): string => {
+  if (LOCAL_HOSTNAMES.includes(hostname)) {
+    return `http://localhost:${entry.localPort}`
+  }
+  if (entry.deployedApiUrl === undefined) {
+    throw new Error(
+      `"${entry.tag}" has no deployedApiUrl and this page is not local — the dot cannot reach its service from here`,
+    )
+  }
+  return entry.deployedApiUrl
+}
+
+/**
+ * A function OF a registry, not of a module-level literal.
+ *
+ * The demo host's registry used to be a `const` in the same file as this lookup,
+ * which made the lookup unusable by any other host — including the cross-origin
+ * demo, which therefore grew its own registry-free copy of the loader. Taking
+ * the table as an argument is the whole of the extraction.
+ */
+export const findEntry = (
+  registry: MicroDotRegistry,
+  tag: string,
+): MicroDotEntry | undefined => registry.find(entry => entry.tag === tag)

package/src/routes.ts

@@ -0,0 +1,156 @@
+import { Array, Option } from 'effect'
+
+/**
+ * Where one MicroDot element goes: its tag and the slot that holds it.
+ *
+ * NOT a "mount point" — that name belongs to `@bespokeagentics/microdots-element`'s
+ * `mountPoint`, which returns the container Foldkit renders into and which
+ * `embed` destroys at first paint. A `Placement` is durable authored
+ * configuration; the container is transient. Four nested things, named once
+ * here:
+ *
+ *   section (route reveals) > slot (Placement.slotId) > element (tag) > container
+ *
+ * `slot` here is a plain `<div id="…-slot">` in the host's markup. It is NOT a
+ * Web Components `<slot>`: nothing in this repo calls `attachShadow`, so there
+ * is no shadow root for a real slot to project into.
+ *
+ * **This is two fields of the twelve the Platform's `Placement` carries** — no
+ * environment, condition, span, order, loading strategy, attribute values or
+ * anchor selector. See
+ * `wiki/framework/composition/gap-placement-is-source-code-not-data.md`.
+ */
+export type Placement = {
+  readonly tag: string
+  readonly slotId: string
+}
+
+/**
+ * A pseudo-route.
+ *
+ * Routing is hash-based on purpose: a host built as a static bundle served from
+ * a CDN-shaped origin needs no server rewrite for `#/chat` the way `/chat`
+ * would. A route reveals its sections and mounts its MicroDots; everything else
+ * on the page stays put.
+ */
+export type RouteDefinition = {
+  readonly path: string
+  readonly label: string
+  readonly title: string
+  readonly sectionIds: ReadonlyArray<string>
+  readonly mounts: ReadonlyArray<Placement>
+}
+
+/**
+ * A host's whole route table, plus the route an unknown path lands on.
+ *
+ * Every function below takes one of these rather than closing over a
+ * module-level literal, which is the difference between "the demo host's
+ * routes" and "a route table". The demo host builds one in
+ * `apps/host/src/routes.ts` and passes it in.
+ */
+export type RouteTable = {
+  readonly routes: ReadonlyArray<RouteDefinition>
+  /** Where an unrecognised path goes. Usually the overview. */
+  readonly fallback: RouteDefinition
+}
+
+export const hrefFor = (route: RouteDefinition): string => `#${route.path}`
+
+/**
+ * `#/price` → `/price`. Also accepts `#price`, a trailing slash and a query
+ * string, because a hand-typed or shared URL arrives in all of those shapes.
+ *
+ * Independent of any table, so it takes none.
+ */
+export const parseRoutePath = (hash: string): string => {
+  const afterHash = hash.startsWith('#') ? hash.slice(1) : hash
+  const beforeQuery = Option.getOrElse(
+    Option.fromNullishOr(afterHash.split('?')[0]),
+    () => '',
+  )
+  const trimmed = beforeQuery.replace(/\/+$/, '')
+
+  if (trimmed === '') {
+    return '/'
+  }
+  return trimmed.startsWith('/') ? trimmed : `/${trimmed}`
+}
+
+/** Every section the router owns — the ones it hides when a route excludes them. */
+export const allSectionIds = (table: RouteTable): ReadonlyArray<string> =>
+  Array.dedupe(Array.flatMap(table.routes, route => route.sectionIds))
+
+export const findRoute = (
+  table: RouteTable,
+  path: string,
+): Option.Option<RouteDefinition> =>
+  Array.findFirst(table.routes, route => route.path === path)
+
+/** An unknown path lands on the fallback rather than a blank page. */
+export const routeForHash = (
+  table: RouteTable,
+  hash: string,
+): RouteDefinition =>
+  Option.getOrElse(findRoute(table, parseRoutePath(hash)), () => table.fallback)
+
+/**
+ * The placement for a tag, searched across the whole table.
+ *
+ * Searched across every route rather than only the fallback: a host whose
+ * fallback does not mount everything would otherwise be unable to find a
+ * placement for a tag that only appears on one route. The first match wins,
+ * which matches the previous behaviour for a table whose fallback is the
+ * union of the others.
+ */
+export const findPlacement = (
+  table: RouteTable,
+  tag: string,
+): Option.Option<Placement> =>
+  Array.findFirst(
+    Array.flatMap(table.routes, route => route.mounts),
+    mount => mount.tag === tag,
+  )
+
+/**
+ * Registry tags no route mounts.
+ *
+ * Adding a MicroDot without adding a route used to be impossible — the host
+ * mounted the whole registry — and would now be invisible: the element simply
+ * never appears. A host is expected to throw on a non-empty result at startup.
+ */
+export const unroutedTags = (
+  table: RouteTable,
+  tags: ReadonlyArray<string>,
+): ReadonlyArray<string> => {
+  const routed = new Set(
+    Array.flatMap(table.routes, route => route.mounts.map(mount => mount.tag)),
+  )
+  return Array.filter(tags, tag => !routed.has(tag))
+}
+
+/**
+ * Builds a table whose fallback shows everything the component routes show.
+ *
+ * The landing route derived rather than repeated is what keeps a brokered demo
+ * honest: two MicroDots wired to each other are only legible with both halves on
+ * screen.
+ */
+export const makeRouteTable = (
+  componentRoutes: ReadonlyArray<RouteDefinition>,
+  overview: Omit<RouteDefinition, 'sectionIds' | 'mounts'> & {
+    readonly leadingSectionIds?: ReadonlyArray<string>
+  },
+): RouteTable => {
+  const fallback: RouteDefinition = {
+    path: overview.path,
+    label: overview.label,
+    title: overview.title,
+    sectionIds: [
+      ...(overview.leadingSectionIds ?? []),
+      ...Array.flatMap(componentRoutes, route => route.sectionIds),
+    ],
+    mounts: Array.flatMap(componentRoutes, route => route.mounts),
+  }
+  return { routes: Array.prepend(componentRoutes, fallback), fallback }
+}