@micelio/strapi-plugin-core 0.1.0 → 0.2.0

package/dist/admin/MicelioLayout-DMMsKnMo.mjs

@@ -0,0 +1,1021 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { Typography, Link, Flex, Button, Box, Badge, useNotifyAT, Table, Thead, Tr, Th, Tbody, Td } from "@strapi/design-system";
+import { useFetchClient, Page, Layouts, useAuth, SubNav } from "@strapi/strapi/admin";
+import { useRef, useState, useEffect, forwardRef, useCallback, useImperativeHandle, useMemo, lazy, Suspense } from "react";
+import { useIntl } from "react-intl";
+import { useParams, useSearchParams, useNavigate, NavLink, useHref, Routes, Route, Navigate } from "react-router-dom";
+import { S as STATUS_READ_PERMISSION, u as useMessages, P as PREVIEW_PERMISSION, h as hasMessage } from "./permissions-CYirM30e.mjs";
+import { P as PLUGIN_ID, p as pageLoaderOf } from "./index-Dwr15ZsB.mjs";
+import styled from "styled-components";
+import { z } from "zod";
+function useAdminPages() {
+  const client = useFetchClient();
+  const clientRef = useRef(client);
+  clientRef.current = client;
+  const [state, setState] = useState({ pages: [], hasFailed: false, isLoading: true });
+  useEffect(() => {
+    let isCurrent = true;
+    void (async () => {
+      try {
+        const response = await clientRef.current.get(
+          "/micelio/admin-pages"
+        );
+        if (isCurrent) setState({ pages: response.data.data, hasFailed: false, isLoading: false });
+      } catch {
+        if (isCurrent) setState({ pages: [], hasFailed: true, isLoading: false });
+      }
+    })();
+    return () => {
+      isCurrent = false;
+    };
+  }, []);
+  return state;
+}
+const NAV_GROUPS = ["overview", "content", "site", "about"];
+const CORE_NAV_ITEMS = [
+  { id: "status", group: "overview", to: "", permission: STATUS_READ_PERMISSION },
+  { id: "about", group: "about", to: "about" }
+];
+function visibleNavItems(items, permissions) {
+  return items.filter(
+    (item) => !item.permission || permissions.some(({ action }) => action === item.permission?.action)
+  );
+}
+function localised(text2, locale) {
+  const language = locale.split("-")[0] ?? "en";
+  const found = language === "es" ? text2.es : void 0;
+  return found && found.trim() !== "" ? found : text2.en;
+}
+function AboutPage() {
+  const { t } = useMessages();
+  return /* @__PURE__ */ jsxs(Page.Main, { children: [
+    /* @__PURE__ */ jsx(Page.Title, { children: t("about.title") }),
+    /* @__PURE__ */ jsx(Layouts.Header, { title: t("about.title"), subtitle: t("about.subtitle") }),
+    /* @__PURE__ */ jsx(Layouts.Content, { children: /* @__PURE__ */ jsx(Typography, { children: t("about.body") }) })
+  ] });
+}
+const PREVIEW_PROTOCOL_VERSION = 1;
+const envelope = z.object({
+  v: z.literal(PREVIEW_PROTOCOL_VERSION),
+  type: z.string().min(1),
+  payload: z.unknown()
+});
+const readyMessage = envelope.extend({
+  type: z.literal("ready"),
+  payload: z.object({
+    /** The envelope versions the frame speaks. */
+    v: z.array(z.int().positive()).min(1),
+    documentId: z.string().min(1),
+    /** `null` for a draft that is not localised. */
+    locale: z.string().min(1).nullable(),
+    version: z.string().min(1)
+  })
+}).meta({
+  id: "ready",
+  title: "ready",
+  description: "Frame → admin: the frame has loaded a draft."
+});
+const loadDraftMessage = envelope.extend({
+  type: z.literal("load-draft"),
+  payload: z.object({
+    documentId: z.string().min(1),
+    /** `null` for a draft that is not localised. */
+    locale: z.string().min(1).nullable()
+  })
+}).meta({
+  id: "load-draft",
+  title: "load-draft",
+  description: "Admin → frame: reload the draft after a save."
+});
+const previewMessage = z.union([readyMessage, loadDraftMessage]);
+function parsePreviewMessage(data) {
+  const result = previewMessage.safeParse(data);
+  return result.success ? result.data : void 0;
+}
+const DEVICES = [
+  { id: "phone", width: 320 },
+  { id: "tablet", width: 768 },
+  { id: "desktop", width: 1280 }
+];
+const GRANT_REFRESH_MINUTES = 14;
+const SAVE_POLL_MS = 4e3;
+const SPOKEN_VERSIONS = [PREVIEW_PROTOCOL_VERSION];
+function frameTarget(url, mode) {
+  let parsed;
+  try {
+    parsed = new URL(url);
+  } catch {
+    return void 0;
+  }
+  if (parsed.protocol !== "http:" && parsed.protocol !== "https:") return void 0;
+  if (mode === "static") parsed.searchParams.set("mode", "static");
+  return { src: parsed.toString(), origin: parsed.origin };
+}
+const NON_TEXT_INPUTS = [
+  "button",
+  "checkbox",
+  "radio",
+  "submit",
+  "reset",
+  "image",
+  "range",
+  "color"
+];
+function isTypingTarget(target) {
+  const element = target;
+  if (!element || typeof element.tagName !== "string") return false;
+  const tag = element.tagName.toUpperCase();
+  if (tag === "INPUT")
+    return !NON_TEXT_INPUTS.includes(String(element.type ?? "text").toLowerCase());
+  return element.isContentEditable === true || tag === "TEXTAREA" || tag === "SELECT";
+}
+function previewShortcut(event) {
+  if (isTypingTarget(event.target)) return void 0;
+  if (event.ctrlKey === event.metaKey || !event.shiftKey || event.altKey) return void 0;
+  const device = DEVICES[["Digit1", "Digit2", "Digit3"].indexOf(event.code)];
+  if (device) return { action: "device", device: device.id };
+  if (event.code === "KeyS") return { action: "static" };
+  if (event.key === "ArrowLeft") return { action: "back" };
+  return void 0;
+}
+const FADE_OUT_MS = 400;
+const NO_VERSIONS = [];
+const Stage = styled.div`
+  position: relative;
+  box-sizing: border-box;
+  width: min(${({ $width }) => $width}px, 100%);
+  max-width: 100%;
+  height: 100%;
+  min-height: 32rem;
+  margin-inline: auto;
+  background: #ffffff;
+  box-shadow: 0 0 0 1px #dcdce4;
+  border-radius: 4px;
+  overflow: hidden;
+  transition: width var(--m-base) cubic-bezier(0.2, 0, 0, 1);
+`;
+const FrameLayer = styled.iframe`
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: #ffffff;
+  opacity: ${({ $phase }) => $phase === "shown" ? 1 : 0};
+  visibility: ${({ $phase }) => $phase === "loading" ? "hidden" : "visible"};
+  pointer-events: ${({ $phase }) => $phase === "shown" ? "auto" : "none"};
+  transition: opacity var(--m-slow) linear;
+`;
+const PreviewFrame = forwardRef(function PreviewFrame2(props, ref) {
+  const { src, origin, documentId, locale, title, width, onChange, onBlocked } = props;
+  const [layers, setLayers] = useState([]);
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [protocol, setProtocol] = useState({ key: -1, protocol: "waiting", versions: NO_VERSIONS });
+  const frames = useRef(/* @__PURE__ */ new Map());
+  const protocols = useRef(/* @__PURE__ */ new Map());
+  const nextKey = useRef(0);
+  const shownKey = layers.find((layer) => layer.phase === "shown")?.key;
+  const timers = useRef([]);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const onBlockedRef = useRef(onBlocked);
+  onBlockedRef.current = onBlocked;
+  useEffect(
+    () => () => {
+      for (const timer of timers.current) window.clearTimeout(timer);
+    },
+    []
+  );
+  useEffect(() => {
+    if (!src) {
+      setLayers([]);
+      return;
+    }
+    const key = nextKey.current++;
+    setLayers((current) => [
+      ...current,
+      { key, src, phase: current.length === 0 ? "shown" : "loading" }
+    ]);
+  }, [src]);
+  useEffect(() => {
+    if (!origin) return;
+    function onViolation(event) {
+      const isFrameDirective = ["frame-src", "child-src", "default-src"].includes(
+        event.effectiveDirective
+      );
+      if (isFrameDirective && event.blockedURI.startsWith(origin)) onBlockedRef.current();
+    }
+    document.addEventListener("securitypolicyviolation", onViolation);
+    return () => document.removeEventListener("securitypolicyviolation", onViolation);
+  }, [origin]);
+  useEffect(() => {
+    for (const key of protocols.current.keys()) {
+      if (!layers.some((layer) => layer.key === key)) protocols.current.delete(key);
+    }
+  }, [layers]);
+  const reveal = useCallback((key) => {
+    setLayers((current) => {
+      if (current.find((layer) => layer.key === key)?.phase !== "loading") return current;
+      return current.map(
+        (layer) => layer.key === key ? { ...layer, phase: "shown" } : layer.phase === "shown" ? { ...layer, phase: "leaving" } : layer
+      );
+    });
+    timers.current.push(
+      window.setTimeout(
+        () => setLayers((current) => current.filter((layer) => layer.phase !== "leaving")),
+        FADE_OUT_MS
+      )
+    );
+  }, []);
+  useEffect(() => {
+    if (!origin) return;
+    function onMessage(event) {
+      if (event.origin !== origin) return;
+      const key = [...frames.current].find(([, frame]) => frame.contentWindow === event.source)?.[0];
+      if (key === void 0) return;
+      const message = parsePreviewMessage(event.data);
+      if (message?.type !== "ready") return;
+      if (message.payload.documentId !== documentId || message.payload.locale !== locale) return;
+      const versions = message.payload.v;
+      const state = {
+        protocol: SPOKEN_VERSIONS.some((spoken) => versions.includes(spoken)) ? "ok" : "upgrade",
+        versions
+      };
+      protocols.current.set(key, state);
+      setProtocol({ key, ...state });
+      setIsUpdating(false);
+    }
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [origin, documentId, locale]);
+  useImperativeHandle(
+    ref,
+    () => ({
+      loadDraft() {
+        const frame = shownKey === void 0 ? void 0 : frames.current.get(shownKey);
+        if (!origin || !frame?.contentWindow || protocols.current.get(shownKey ?? -1)?.protocol !== "ok") {
+          return false;
+        }
+        const message = {
+          v: PREVIEW_PROTOCOL_VERSION,
+          type: "load-draft",
+          payload: { documentId, locale }
+        };
+        frame.contentWindow.postMessage(message, origin);
+        setIsUpdating(true);
+        return true;
+      }
+    }),
+    [shownKey, origin, documentId, locale]
+  );
+  const inView = protocol.key === shownKey ? protocol : { protocol: "waiting", versions: NO_VERSIONS };
+  const isBusy = isUpdating || layers.some((layer) => layer.phase === "loading");
+  useEffect(() => {
+    onChangeRef.current({ protocol: inView.protocol, versions: inView.versions, isBusy });
+  }, [inView.protocol, inView.versions, isBusy]);
+  return /* @__PURE__ */ jsx(Stage, { $width: width, children: layers.map((layer) => /* @__PURE__ */ jsx(
+    FrameLayer,
+    {
+      $phase: layer.phase,
+      src: layer.src,
+      title,
+      sandbox: "allow-scripts allow-same-origin allow-forms",
+      referrerPolicy: "no-referrer",
+      ref: (frame) => {
+        if (frame) frames.current.set(layer.key, frame);
+        else frames.current.delete(layer.key);
+      },
+      onLoad: () => {
+        reveal(layer.key);
+        if (layer.phase === "shown") setIsUpdating(false);
+      }
+    },
+    layer.key
+  )) });
+});
+function statusOf(error) {
+  if (typeof error !== "object" || error === null) return void 0;
+  const { status, response } = error;
+  if (typeof status === "number") return status;
+  return typeof response?.status === "number" ? response.status : void 0;
+}
+function text(value) {
+  return typeof value === "string" && value !== "" ? value : void 0;
+}
+function toEntry(answer, documentId) {
+  const locale = text(answer.data.locale) ?? null;
+  const others = (answer.meta?.availableLocales ?? []).flatMap(
+    ({ locale: other }) => text(other) ?? []
+  );
+  return {
+    title: text(answer.data.title) ?? text(answer.data.name) ?? text(answer.data.slug) ?? documentId,
+    locale,
+    locales: locale === null ? [] : [.../* @__PURE__ */ new Set([locale, ...others])],
+    updatedAt: text(answer.data.updatedAt) ?? ""
+  };
+}
+function useEntry(uid, documentId, locale) {
+  const client = useFetchClient();
+  const clientRef = useRef(client);
+  clientRef.current = client;
+  const [resource, setResource] = useState({ kind: "loading" });
+  const scope = `${uid}/${documentId}/${locale ?? ""}`;
+  const [saves, setSaves] = useState({ scope, count: 0 });
+  useEffect(() => {
+    let isCurrent = true;
+    let isReading = false;
+    let lastSeen;
+    async function read(isFirst) {
+      if (isReading) return;
+      isReading = true;
+      try {
+        const response = await clientRef.current.get(
+          `/content-manager/collection-types/${uid}/${documentId}`,
+          { params: locale ? { locale } : {} }
+        );
+        if (!isCurrent) return;
+        const entry = toEntry(response.data, documentId);
+        if (lastSeen !== void 0 && entry.updatedAt !== lastSeen) {
+          setSaves((current) => ({ scope, count: current.scope === scope ? current.count + 1 : 1 }));
+        }
+        lastSeen = entry.updatedAt;
+        setResource({ kind: "ready", entry });
+      } catch (error) {
+        if (isCurrent && isFirst) setResource({ kind: "error", status: statusOf(error) });
+      } finally {
+        isReading = false;
+      }
+    }
+    setResource({ kind: "loading" });
+    setSaves({ scope, count: 0 });
+    void read(true);
+    const timer = window.setInterval(() => {
+      if (document.visibilityState === "visible") void read(false);
+    }, SAVE_POLL_MS);
+    const onVisible = () => {
+      if (document.visibilityState === "visible") void read(false);
+    };
+    document.addEventListener("visibilitychange", onVisible);
+    return () => {
+      isCurrent = false;
+      window.clearInterval(timer);
+      document.removeEventListener("visibilitychange", onVisible);
+    };
+  }, [uid, documentId, locale]);
+  return { resource, savedCount: saves.scope === scope ? saves.count : 0 };
+}
+const REASONS = {
+  400: "unsupported",
+  403: "forbidden",
+  404: "missing",
+  409: "unavailable",
+  429: "busy"
+};
+function usePreviewSource(entry, mode) {
+  const client = useFetchClient();
+  const clientRef = useRef(client);
+  clientRef.current = client;
+  const [source, setSource] = useState({ kind: "loading" });
+  const [count, setCount] = useState(0);
+  const uid = entry?.uid;
+  const documentId = entry?.documentId;
+  const locale = entry?.locale;
+  useEffect(() => {
+    if (!uid || !documentId) return;
+    let isCurrent = true;
+    let timer;
+    void (async () => {
+      try {
+        const response = await clientRef.current.post(
+          "/micelio/preview/token",
+          { uid, documentId, locale }
+        );
+        const target = frameTarget(response.data.data.url, mode);
+        if (!isCurrent) return;
+        if (!target) {
+          setSource({ kind: "error", reason: "unavailable" });
+          return;
+        }
+        setSource({ kind: "ready", ...target });
+        timer = window.setTimeout(
+          () => setCount((value) => value + 1),
+          GRANT_REFRESH_MINUTES * 6e4
+        );
+      } catch (error) {
+        const status = statusOf(error);
+        if (isCurrent) setSource({ kind: "error", reason: status && REASONS[status] || "failed" });
+      }
+    })();
+    return () => {
+      isCurrent = false;
+      window.clearTimeout(timer);
+    };
+  }, [uid, documentId, locale, mode, count]);
+  const reload = useCallback(() => setCount((value) => value + 1), []);
+  return { source, reload };
+}
+const Root = styled.div`
+  --m-fast: 120ms;
+  --m-base: 200ms;
+  --m-slow: 320ms;
+  @media (prefers-reduced-motion: reduce) {
+    --m-fast: 1ms;
+    --m-base: 1ms;
+    --m-slow: 1ms;
+  }
+`;
+const Columns = styled.div`
+  display: grid;
+  grid-template-columns: minmax(16rem, 1fr) minmax(0, 2fr);
+  gap: 1.5rem;
+  align-items: start;
+  @media (max-width: 62rem) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+`;
+const Select = styled.select`
+  min-height: 2rem;
+  padding: 0 0.5rem;
+  border: 1px solid #8e8ea9;
+  border-radius: 4px;
+  background: #ffffff;
+  color: #32324d;
+  font: inherit;
+`;
+const StageBox = styled.div`
+  height: calc(100vh - 20rem);
+  min-height: 32rem;
+`;
+const SHORTCUTS = {
+  phone: "Control+Shift+1 Meta+Shift+1",
+  tablet: "Control+Shift+2 Meta+Shift+2",
+  desktop: "Control+Shift+3 Meta+Shift+3",
+  static: "Control+Shift+S Meta+Shift+S"
+};
+function PreviewPage() {
+  return /* @__PURE__ */ jsx(Page.Protect, { permissions: [PREVIEW_PERMISSION], children: /* @__PURE__ */ jsx(PreviewPane, {}) });
+}
+function PreviewPane() {
+  const { t, date } = useMessages();
+  const { uid = "", documentId = "" } = useParams();
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const permissions = useAuth("PreviewPage", (state) => state.permissions);
+  const [locale, setLocale] = useState(searchParams.get("locale"));
+  const [device, setDevice] = useState("desktop");
+  const [mode, setMode] = useState("live");
+  const [frameState, setFrameState] = useState({
+    protocol: "waiting",
+    versions: [],
+    isBusy: false
+  });
+  const [isBlocked, setIsBlocked] = useState(false);
+  const frame = useRef(null);
+  const { resource, savedCount } = useEntry(uid, documentId, locale);
+  const entry = resource.kind === "ready" ? resource.entry : void 0;
+  const { source, reload } = usePreviewSource(
+    entry ? { uid, documentId, locale: entry.locale } : void 0,
+    mode
+  );
+  const canEdit = permissions.some(
+    ({ action, subject }) => action === "plugin::content-manager.explorer.update" && subject === uid
+  );
+  const entryPath = `/content-manager/collection-types/${uid}/${documentId}${entry?.locale ? `?plugins[i18n][locale]=${entry.locale}` : ""}`;
+  const handled = useRef({ locale, count: 0 });
+  useEffect(() => {
+    if (handled.current.locale !== locale) handled.current = { locale, count: 0 };
+    if (savedCount === 0 || savedCount === handled.current.count) return;
+    handled.current.count = savedCount;
+    if (!frame.current?.loadDraft()) reload();
+  }, [savedCount, locale, reload]);
+  const origin = source.kind === "ready" ? source.origin : void 0;
+  useEffect(() => setIsBlocked(false), [origin]);
+  useEffect(() => {
+    function onKeyDown(event) {
+      const shortcut = previewShortcut(event);
+      if (!shortcut) return;
+      event.preventDefault();
+      if (shortcut.action === "device") setDevice(shortcut.device);
+      else if (shortcut.action === "static")
+        setMode((current) => current === "live" ? "static" : "live");
+      else navigate(entryPath);
+    }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [navigate, entryPath]);
+  if (resource.kind === "error") {
+    return /* @__PURE__ */ jsxs(Page.Main, { children: [
+      /* @__PURE__ */ jsx(Page.Title, { children: t("preview.title") }),
+      /* @__PURE__ */ jsx(Layouts.Header, { title: t("preview.title") }),
+      /* @__PURE__ */ jsx(Layouts.Content, { children: /* @__PURE__ */ jsx(Typography, { role: "alert", children: t(resource.status === 404 ? "preview.error.missing" : "preview.error.entry") }) })
+    ] });
+  }
+  const title = entry?.title ?? t("preview.title");
+  const width = DEVICES.find((item) => item.id === device)?.width ?? 1280;
+  const reason = source.kind === "error" ? source.reason : void 0;
+  const isUpgradeNeeded = frameState.protocol === "upgrade";
+  return /* @__PURE__ */ jsx(Root, { children: /* @__PURE__ */ jsxs(Page.Main, { children: [
+    /* @__PURE__ */ jsx(Page.Title, { children: t("preview.page", { title }) }),
+    /* @__PURE__ */ jsx(
+      Layouts.Header,
+      {
+        title,
+        subtitle: t("preview.subtitle"),
+        navigationAction: /* @__PURE__ */ jsx(
+          Link,
+          {
+            tag: NavLink,
+            to: entryPath,
+            "aria-keyshortcuts": "Control+Shift+ArrowLeft Meta+Shift+ArrowLeft",
+            children: t("preview.back")
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(Layouts.Content, { children: /* @__PURE__ */ jsxs(Columns, { children: [
+      /* @__PURE__ */ jsx(EntryColumn, { entry, canEdit, entryPath, date }),
+      /* @__PURE__ */ jsxs("section", { "aria-label": t("preview.pane"), children: [
+        /* @__PURE__ */ jsxs(Flex, { gap: 4, wrap: "wrap", alignItems: "center", marginBottom: 3, children: [
+          /* @__PURE__ */ jsx(Flex, { gap: 2, role: "group", "aria-label": t("preview.device.group"), children: DEVICES.map((item) => /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              size: "S",
+              variant: device === item.id ? "default" : "tertiary",
+              "aria-pressed": device === item.id,
+              "aria-keyshortcuts": SHORTCUTS[item.id],
+              onClick: () => setDevice(item.id),
+              children: t(`preview.device.${item.id}`, { width: item.width })
+            },
+            item.id
+          )) }),
+          /* @__PURE__ */ jsxs(Flex, { tag: "label", gap: 2, alignItems: "center", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: mode === "static",
+                "aria-keyshortcuts": SHORTCUTS.static,
+                onChange: (event) => setMode(event.target.checked ? "static" : "live")
+              }
+            ),
+            /* @__PURE__ */ jsx(Typography, { children: t("preview.static") })
+          ] }),
+          entry && entry.locales.length > 1 ? /* @__PURE__ */ jsxs(Flex, { tag: "label", gap: 2, alignItems: "center", children: [
+            /* @__PURE__ */ jsx(Typography, { children: t("preview.locale") }),
+            /* @__PURE__ */ jsx(
+              Select,
+              {
+                value: entry.locale ?? "",
+                onChange: (event) => setLocale(event.target.value),
+                children: entry.locales.map((code) => /* @__PURE__ */ jsx("option", { value: code, children: code }, code))
+              }
+            )
+          ] }) : null,
+          /* @__PURE__ */ jsx(Button, { type: "button", size: "S", variant: "tertiary", onClick: reload, children: t("preview.reload") }),
+          /* @__PURE__ */ jsx(Typography, { role: "status", textColor: "neutral700", children: frameState.isBusy ? t("preview.updating") : "" })
+        ] }),
+        /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral700", tag: "p", children: t("preview.shortcuts") }),
+        /* @__PURE__ */ jsxs(Box, { marginTop: 3, marginBottom: 3, children: [
+          reason ? /* @__PURE__ */ jsx(Notice, { role: "alert", text: t(`preview.error.${reason}`) }) : null,
+          isBlocked ? /* @__PURE__ */ jsx(
+            Notice,
+            {
+              role: "alert",
+              title: t("preview.blocked.title"),
+              text: t("preview.blocked.body", { origin: origin ?? "" })
+            }
+          ) : null,
+          isUpgradeNeeded ? /* @__PURE__ */ jsx(
+            Notice,
+            {
+              role: "status",
+              title: t("preview.upgrade.title"),
+              text: t("preview.upgrade.body", { versions: frameState.versions.join(", ") })
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsx(StageBox, { children: isBlocked || source.kind === "error" ? null : /* @__PURE__ */ jsx(
+          PreviewFrame,
+          {
+            ref: frame,
+            src: source.kind === "ready" ? source.src : void 0,
+            origin,
+            documentId,
+            locale: entry?.locale ?? null,
+            title: t("preview.frame.title", { title }),
+            width,
+            onChange: setFrameState,
+            onBlocked: () => setIsBlocked(true)
+          }
+        ) })
+      ] })
+    ] }) })
+  ] }) });
+}
+function EntryColumn(props) {
+  const { t } = useMessages();
+  const { locale } = useIntl();
+  const { entry, canEdit, entryPath, date } = props;
+  const href = useHref(entryPath);
+  return /* @__PURE__ */ jsx("section", { "aria-label": t("preview.entry.title"), children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 3, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "delta", tag: "h2", children: t("preview.entry.title") }),
+    canEdit ? null : /* @__PURE__ */ jsx(Badge, { backgroundColor: "neutral150", textColor: "neutral700", children: t("preview.entry.readOnly") }),
+    /* @__PURE__ */ jsx(Typography, { children: t(canEdit ? "preview.entry.body" : "preview.entry.bodyReadOnly") }),
+    entry?.locale ? /* @__PURE__ */ jsx(Typography, { textColor: "neutral700", children: t("preview.entry.locale", { locale: entry.locale }) }) : null,
+    entry?.updatedAt ? /* @__PURE__ */ jsx(Typography, { textColor: "neutral700", lang: locale, children: t("preview.entry.saved", { date: date(entry.updatedAt) }) }) : null,
+    /* @__PURE__ */ jsx(Link, { href, isExternal: true, children: t(canEdit ? "preview.entry.open" : "preview.entry.view") })
+  ] }) });
+}
+function Notice(props) {
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      role: props.role,
+      padding: 3,
+      marginBottom: 2,
+      background: "warning100",
+      borderColor: "warning200",
+      hasRadius: true,
+      children: [
+        props.title ? /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", tag: "p", children: props.title }) : null,
+        /* @__PURE__ */ jsx(Typography, { tag: "p", children: props.text })
+      ]
+    }
+  );
+}
+function useHostCheckRun(initial) {
+  const client = useFetchClient();
+  const clientRef = useRef(client);
+  clientRef.current = client;
+  const [report, setReport] = useState(initial);
+  const [isRunning, setIsRunning] = useState(false);
+  const [hasFailed, setHasFailed] = useState(false);
+  const run = useCallback(async () => {
+    setIsRunning(true);
+    setHasFailed(false);
+    try {
+      const response = await clientRef.current.post(
+        "/micelio/status/host-check"
+      );
+      setReport(response.data.data);
+      return response.data.data;
+    } catch {
+      setHasFailed(true);
+      return null;
+    } finally {
+      setIsRunning(false);
+    }
+  }, []);
+  return { report, isRunning, hasFailed, run };
+}
+function useStatus() {
+  const client = useFetchClient();
+  const clientRef = useRef(client);
+  clientRef.current = client;
+  const [resource, setResource] = useState({ kind: "loading" });
+  const [count, setCount] = useState(0);
+  useEffect(() => {
+    let isCurrent = true;
+    void (async () => {
+      try {
+        const response = await clientRef.current.get("/micelio/status");
+        if (isCurrent) setResource({ kind: "ready", data: response.data.data });
+      } catch {
+        if (isCurrent) setResource({ kind: "error" });
+      }
+    })();
+    return () => {
+      isCurrent = false;
+    };
+  }, [count]);
+  const reload = useCallback(() => {
+    setResource({ kind: "loading" });
+    setCount((value) => value + 1);
+  }, []);
+  const refresh = useCallback(async () => {
+    try {
+      const response = await clientRef.current.get("/micelio/status");
+      setResource({ kind: "ready", data: response.data.data });
+    } catch {
+    }
+  }, []);
+  return { resource, reload, refresh };
+}
+function checkText(result, part, isKnown) {
+  const fallback = part === "title" ? result.title : result.fix;
+  if (fallback === void 0) return null;
+  const messageId = `status.hostCheck.check.${result.id}.${part}`;
+  return isKnown(messageId) ? { messageId } : { text: fallback };
+}
+function diagnosticsText(report) {
+  const lines = [`Micelio ${report.plugin.version} (core release line ${report.plugin.coreLine})`];
+  if (report.hostCheck) {
+    const failed = report.hostCheck.results.filter(({ status }) => status === "fail").length;
+    lines.push(`Host check: ${report.hostCheck.ok ? "ok" : "fails"} (${failed} failed)`);
+  } else {
+    lines.push("Host check: not run");
+  }
+  for (const [id, result] of Object.entries(report.plugins)) lines.push(pluginLine(id, result));
+  return lines.join("\n");
+}
+function pluginLine(id, result) {
+  if (result.ranAt === null) return `${id}: checks not run`;
+  const count = (status) => result.checks.filter((check) => check.status === status).length;
+  return `${id}: ${count("ok")} ok, ${count("warn")} warn, ${count("fail")} fail`;
+}
+const TONES = {
+  success: { backgroundColor: "success100", textColor: "success700" },
+  danger: { backgroundColor: "danger100", textColor: "danger700" },
+  // warning700 on warning100 is 4.0:1, below the 4.5:1 of WCAG AA.
+  warning: { backgroundColor: "warning100", textColor: "neutral800" },
+  neutral: { backgroundColor: "neutral150", textColor: "neutral700" }
+};
+const CHECK_TONES = {
+  pass: "success",
+  fail: "danger",
+  skip: "neutral"
+};
+function StatusPage() {
+  const { t } = useMessages();
+  return /* @__PURE__ */ jsx(Page.Protect, { permissions: [STATUS_READ_PERMISSION], children: /* @__PURE__ */ jsxs(Page.Main, { children: [
+    /* @__PURE__ */ jsx(Page.Title, { children: t("status.title") }),
+    /* @__PURE__ */ jsx(Layouts.Header, { title: t("status.title"), subtitle: t("status.subtitle") }),
+    /* @__PURE__ */ jsx(Layouts.Content, { children: /* @__PURE__ */ jsx(StatusContent, {}) })
+  ] }) });
+}
+function StatusContent() {
+  const { t } = useMessages();
+  const { resource, reload, refresh } = useStatus();
+  if (resource.kind === "loading") return /* @__PURE__ */ jsx(Page.Loading, { children: t("status.loading") });
+  if (resource.kind === "error") {
+    return /* @__PURE__ */ jsx(Section, { title: t("status.error.title"), children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 2, children: [
+      /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: t("status.error") }),
+      /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "S", onClick: reload, children: t("status.retry") })
+    ] }) });
+  }
+  const report = resource.data;
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 6, children: [
+    /* @__PURE__ */ jsx(PluginSection, { report }),
+    /* @__PURE__ */ jsx(HostCheckSection, { initial: report.hostCheck, onRan: refresh }),
+    /* @__PURE__ */ jsx(PluginChecksSections, { report }),
+    /* @__PURE__ */ jsx(FrontendsSection, { frontends: report.frontends }),
+    /* @__PURE__ */ jsx(SitesSection, { sites: report.sites }),
+    /* @__PURE__ */ jsx(DiagnosticsButton, { report })
+  ] });
+}
+function Section({ title, children }) {
+  return /* @__PURE__ */ jsx(Box, { tag: "section", background: "neutral0", hasRadius: true, shadow: "filterShadow", padding: 6, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "delta", tag: "h2", children: title }),
+    children
+  ] }) });
+}
+function StatusBadge({ tone, children }) {
+  return /* @__PURE__ */ jsx(Badge, { ...TONES[tone], children });
+}
+function Fact({ label, value }) {
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", tag: "dt", children: label }),
+    /* @__PURE__ */ jsx(Typography, { tag: "dd", children: value })
+  ] });
+}
+function PluginSection({ report }) {
+  const { t } = useMessages();
+  return /* @__PURE__ */ jsx(Section, { title: t("status.plugin.title"), children: /* @__PURE__ */ jsxs(Flex, { tag: "dl", gap: 8, wrap: "wrap", alignItems: "flex-start", children: [
+    /* @__PURE__ */ jsx(Fact, { label: t("status.plugin.version"), value: report.plugin.version }),
+    /* @__PURE__ */ jsx(Fact, { label: t("status.plugin.coreLine"), value: report.plugin.coreLine }),
+    /* @__PURE__ */ jsx(Fact, { label: t("status.blocks.count"), value: report.blocks.count }),
+    /* @__PURE__ */ jsx(Fact, { label: t("status.sites.count"), value: report.sites.length })
+  ] }) });
+}
+function HostCheckSection({
+  initial,
+  onRan
+}) {
+  const { t, date } = useMessages();
+  const { notifyStatus, notifyAlert } = useNotifyAT();
+  const { report, isRunning, hasFailed, run } = useHostCheckRun(initial);
+  const say = (text2) => "messageId" in text2 ? t(text2.messageId) : text2.text;
+  const verdict = (current) => `${t(current.ok ? "status.hostCheck.ok" : "status.hostCheck.failed")} ${t(
+    "status.hostCheck.checkedAt",
+    { date: date(current.checkedAt), environment: current.environment }
+  )}`;
+  const runAgain = async () => {
+    const answer = await run();
+    if (answer) await onRan();
+    if (answer) notifyStatus(verdict(answer));
+    else notifyAlert(t("status.hostCheck.runFailed"));
+  };
+  const header = /* @__PURE__ */ jsxs(Flex, { gap: 4, wrap: "wrap", justifyContent: "space-between", alignItems: "center", children: [
+    /* @__PURE__ */ jsx(Typography, { textColor: report ? void 0 : "neutral600", children: report ? verdict(report) : t("status.hostCheck.notRun") }),
+    /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "S", loading: isRunning, onClick: runAgain, children: t(isRunning ? "status.hostCheck.running" : "status.hostCheck.runAgain") })
+  ] });
+  const failure = hasFailed ? /* @__PURE__ */ jsx(Typography, { textColor: "danger700", children: t("status.hostCheck.runFailed") }) : null;
+  if (!report) {
+    return /* @__PURE__ */ jsxs(Section, { title: t("status.hostCheck.title"), children: [
+      header,
+      failure
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Section, { title: t("status.hostCheck.title"), children: [
+    header,
+    failure,
+    /* @__PURE__ */ jsxs(Table, { colCount: 3, rowCount: report.results.length + 1, children: [
+      /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("status.hostCheck.column.check") }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("status.hostCheck.column.status") }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("status.hostCheck.column.found") }) })
+      ] }) }),
+      /* @__PURE__ */ jsx(Tbody, { children: report.results.map((result) => {
+        const title = checkText(result, "title", hasMessage);
+        const fix = result.status === "fail" ? checkText(result, "fix", hasMessage) : null;
+        return /* @__PURE__ */ jsxs(Tr, { children: [
+          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
+            /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", children: title ? say(title) : result.id }),
+            /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: t(
+              result.required ? "status.hostCheck.required" : "status.hostCheck.optional"
+            ) })
+          ] }) }),
+          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(StatusBadge, { tone: CHECK_TONES[result.status], children: t(`status.hostCheck.status.${result.status}`) }) }),
+          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
+            /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", children: result.detail }),
+            fix ? /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral800", children: [
+              /* @__PURE__ */ jsxs("strong", { children: [
+                t("status.hostCheck.fix"),
+                ":"
+              ] }),
+              " ",
+              say(fix)
+            ] }) : null
+          ] }) })
+        ] }, result.id);
+      }) })
+    ] }),
+    /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: t("status.hostCheck.rerun") })
+  ] });
+}
+function FrontendsSection({ frontends }) {
+  const { t } = useMessages();
+  if (frontends.length === 0) {
+    return /* @__PURE__ */ jsx(Section, { title: t("status.frontends.title"), children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: t("status.frontends.none") }) });
+  }
+  return /* @__PURE__ */ jsx(Section, { title: t("status.frontends.title"), children: /* @__PURE__ */ jsxs(Table, { colCount: 4, rowCount: frontends.length + 1, children: [
+    /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
+      /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("status.frontends.column.origin") }) }),
+      /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("status.frontends.column.sites") }) }),
+      /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("status.frontends.column.health") }) }),
+      /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("status.frontends.column.version") }) })
+    ] }) }),
+    /* @__PURE__ */ jsx(Tbody, { children: frontends.map((frontend) => /* @__PURE__ */ jsxs(Tr, { children: [
+      /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { children: frontend.origin }) }),
+      /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { children: frontend.sites.join(", ") }) }),
+      /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
+        /* @__PURE__ */ jsx(StatusBadge, { tone: frontend.health === "reachable" ? "success" : "neutral", children: t(`status.frontends.health.${frontend.health}`) }),
+        frontend.health === "unavailable" ? /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: t("status.frontends.unavailable") }) : null
+      ] }) }),
+      /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { children: frontend.version ?? t("status.frontends.noVersion") }) })
+    ] }, frontend.origin)) })
+  ] }) });
+}
+function SitesSection({ sites }) {
+  const { t } = useMessages();
+  return /* @__PURE__ */ jsx(Section, { title: t("status.sites.title"), children: /* @__PURE__ */ jsxs(Table, { colCount: 4, rowCount: sites.length + 1, children: [
+    /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
+      /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("status.sites.column.name") }) }),
+      /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("status.sites.column.slug") }) }),
+      /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("status.sites.column.hosts") }) }),
+      /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("status.sites.column.url") }) })
+    ] }) }),
+    /* @__PURE__ */ jsx(Tbody, { children: sites.map((site) => /* @__PURE__ */ jsxs(Tr, { children: [
+      /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+        /* @__PURE__ */ jsx(Typography, { children: site.name }),
+        site.isDefault ? /* @__PURE__ */ jsx(Badge, { children: t("status.sites.default") }) : null
+      ] }) }),
+      /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { children: site.slug }) }),
+      /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { children: site.hosts.length > 0 ? site.hosts.join(", ") : t("status.sites.noHosts") }) }),
+      /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { children: site.origin ?? t("status.sites.noUrl") }) })
+    ] }, site.documentId)) })
+  ] }) });
+}
+const PLUGIN_TONES = {
+  ok: "success",
+  warn: "warning",
+  fail: "danger"
+};
+function PluginChecksSections({ report }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: Object.entries(report.plugins).map(([id, result]) => /* @__PURE__ */ jsx(PluginChecksCard, { result, sites: report.sites }, id)) });
+}
+function PluginChecksCard({ result, sites }) {
+  const { t, date } = useMessages();
+  const { locale } = useIntl();
+  const slugOf = (documentId) => sites.find((site) => site.documentId === documentId)?.slug ?? documentId;
+  return /* @__PURE__ */ jsxs(Section, { title: localised(result.label, locale), children: [
+    /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: result.ranAt === null ? t("status.plugins.notRun") : t("status.plugins.ranAt", { date: date(result.ranAt) }) }),
+    result.ranAt !== null && result.checks.length === 0 ? /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: t("status.plugins.empty") }) : null,
+    result.checks.length > 0 ? /* @__PURE__ */ jsxs(Table, { colCount: 4, rowCount: result.checks.length + 1, children: [
+      /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("status.plugins.column.site") }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("status.plugins.column.check") }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("status.plugins.column.status") }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("status.plugins.column.found") }) })
+      ] }) }),
+      /* @__PURE__ */ jsx(Tbody, { children: result.checks.map((check) => /* @__PURE__ */ jsxs(Tr, { children: [
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { children: slugOf(check.site) }) }),
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", children: localised(check.title, locale) }) }),
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(StatusBadge, { tone: PLUGIN_TONES[check.status], children: t(`status.plugins.status.${check.status}`) }) }),
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
+          check.detail ? /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", children: localised(check.detail, locale) }) : null,
+          check.fix ? /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral800", children: [
+            /* @__PURE__ */ jsxs("strong", { children: [
+              t("status.plugins.fix"),
+              ":"
+            ] }),
+            " ",
+            localised(check.fix, locale)
+          ] }) : null
+        ] }) })
+      ] }, `${check.site}:${check.id}`)) })
+    ] }) : null
+  ] });
+}
+function DiagnosticsButton({ report }) {
+  const { t } = useMessages();
+  const { notifyStatus, notifyAlert } = useNotifyAT();
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(diagnosticsText(report));
+      notifyStatus(t("status.diagnostics.copied"));
+    } catch {
+      notifyAlert(t("status.diagnostics.failed"));
+    }
+  };
+  return /* @__PURE__ */ jsx(Flex, { children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "S", onClick: copy, children: t("status.diagnostics.copy") }) });
+}
+function MicelioLayout() {
+  const { t } = useMessages();
+  const { locale } = useIntl();
+  const { pages, hasFailed, isLoading } = useAdminPages();
+  const isLoadingPermissions = useAuth("MicelioLayout", (state) => state.isLoading);
+  const permissions = useAuth("MicelioLayout", (state) => state.permissions);
+  const canReadStatus = permissions.some(({ action }) => action === STATUS_READ_PERMISSION.action);
+  const coreItems = visibleNavItems(CORE_NAV_ITEMS, permissions);
+  const linksOf = (group) => [
+    ...coreItems.filter((item) => item.group === group).map((item) => /* @__PURE__ */ jsx(
+      SubNav.Link,
+      {
+        to: item.to ? `/plugins/${PLUGIN_ID}/${item.to}` : `/plugins/${PLUGIN_ID}`,
+        end: !item.to,
+        label: t(`nav.${item.id}`)
+      },
+      item.id
+    )),
+    ...pages.filter((page) => page.group === group).map((page) => /* @__PURE__ */ jsx(
+      SubNav.Link,
+      {
+        to: `/plugins/${PLUGIN_ID}/${page.to}`,
+        label: localised(page.label, locale)
+      },
+      page.id
+    ))
+  ];
+  if (isLoadingPermissions) return /* @__PURE__ */ jsx(Page.Loading, {});
+  return /* @__PURE__ */ jsx(
+    Layouts.Root,
+    {
+      sideNav: /* @__PURE__ */ jsxs(SubNav.Main, { "aria-label": t("nav.label"), children: [
+        /* @__PURE__ */ jsx(SubNav.Header, { label: t("nav.title") }),
+        /* @__PURE__ */ jsxs(SubNav.Sections, { children: [
+          NAV_GROUPS.map((group) => ({ group, links: linksOf(group) })).filter(({ links }) => links.length > 0).map(({ group, links }) => /* @__PURE__ */ jsx(SubNav.Section, { label: t(`nav.group.${group}`), children: links }, group)),
+          hasFailed ? /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: t("nav.error") }) : null
+        ] })
+      ] }),
+      children: /* @__PURE__ */ jsxs(Routes, { children: [
+        /* @__PURE__ */ jsx(Route, { index: true, element: canReadStatus ? /* @__PURE__ */ jsx(StatusPage, {}) : /* @__PURE__ */ jsx(Navigate, { to: "about", replace: true }) }),
+        /* @__PURE__ */ jsx(Route, { path: "about", element: /* @__PURE__ */ jsx(AboutPage, {}) }),
+        /* @__PURE__ */ jsx(Route, { path: "preview/:uid/:documentId", element: /* @__PURE__ */ jsx(PreviewPage, {}) }),
+        /* @__PURE__ */ jsx(Route, { path: "*", element: /* @__PURE__ */ jsx(ExtensionPage, { pages, isLoading }) })
+      ] })
+    }
+  );
+}
+function ExtensionPage({ pages, isLoading }) {
+  const { t } = useMessages();
+  const path = useParams()["*"] ?? "";
+  const page = pages.find((candidate) => candidate.to === path);
+  const Component = useMemo(() => {
+    const loader = page ? pageLoaderOf(page.id) : void 0;
+    return loader ? lazy(loader) : null;
+  }, [page]);
+  if (isLoading) return /* @__PURE__ */ jsx(Page.Loading, {});
+  if (!Component) {
+    return /* @__PURE__ */ jsxs(Page.Main, { children: [
+      /* @__PURE__ */ jsx(Page.Title, { children: t("page.unavailable.title") }),
+      /* @__PURE__ */ jsx(Layouts.Header, { title: t("page.unavailable.title") }),
+      /* @__PURE__ */ jsx(Layouts.Content, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: t("page.unavailable") }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Page.Loading, {}), children: /* @__PURE__ */ jsx(Component, {}) });
+}
+export {
+  MicelioLayout as default
+};