diff --git a/src/styles/marketplace.css b/src/styles/marketplace.css
index fb91551..d6da730 100644
--- a/src/styles/marketplace.css
+++ b/src/styles/marketplace.css
@@ -4,9 +4,6 @@
@source "../src/templates/**/*.js";
@source "../scripts/**/*.js";
-/* ── Class-based dark mode — also covers wf-html.dark used by web-fragments ── */
-@custom-variant dark (&:where(.dark, .dark *));
-
/* ── Design tokens ──────────────────────────────────────────────────────── */
@theme {
/* Brand palette */
@@ -23,12 +20,13 @@
--font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', ui-monospace, monospace;
}
-/* ── Semantic CSS variables (light & dark) ─────────────────────────────── */
-/* Note: @tailwindcss/vite compiles :root to :root,:host automatically, so
+/* ── Semantic CSS variables ─────────────────────────────────────────────── */
+/* The marketplace is light-only — there is deliberately no dark palette here,
+ so an embedding host's dark theme cannot bleed into the fragment.
+ Note: @tailwindcss/vite compiles :root to :root,:host automatically, so
custom properties are available inside shadow DOMs via :host inheritance.
- Shadow DOM element-level declarations (wf-html, wf-document) and the
- :host(.dark) dark-mode override are injected as an inline `.trim();
-
-// ── Helpers ───────────────────────────────────────────────────────────────────
-
-function escHtml(str) {
- return String(str ?? '')
- .replace(/&/g, '&')
- .replace(//g, '>')
- .replace(/"/g, '"');
-}
-
-export function appIconSvg(icon, size = 18) {
- const s = size;
- const icons = {
- 'book-open': ``,
- 'cube': ``,
- 'chip': ``,
- 'chart-bar': ``,
- 'shield': ``,
- 'cog': ``,
- 'terminal': ``,
- 'globe': ``,
- 'layers': ``,
- 'lightning-bolt':``,
- 'document': ``,
- 'collection': ``,
- 'puzzle': ``,
- 'database': ``,
- };
- return icons[icon] ?? icons['book-open'];
-}
diff --git a/src/templates/shadow-compat.js b/src/templates/shadow-compat.js
new file mode 100644
index 0000000..b5c5c07
--- /dev/null
+++ b/src/templates/shadow-compat.js
@@ -0,0 +1,22 @@
+// src/templates/shadow-compat.js
+//
+// Inline `.trim();
diff --git a/src/utils/transform.js b/src/utils/transform.js
index 1da34db..95db714 100644
--- a/src/utils/transform.js
+++ b/src/utils/transform.js
@@ -1,8 +1,12 @@
// src/utils/transform.js
//
// Pure sub-app HTML transformation utilities for the Astro catchall page.
-
-import { chromeHtml, chromeScript, marketplaceRouterScript, shadowCompatStyle } from '../templates/chrome.js';
+//
+// Packaged sub-app pages arrive as complete pre-built documents. Rather than
+// emitting them verbatim, the catchall route renders them through Base.astro so
+// the layout owns the masthead, fonts, marketplace CSS and ]*rel\s*=\s*["']stylesheet["'][^>]*)>/gi,
(match, attrs) => {
if (attrs.includes('data-astro-transition-persist')) return match;
@@ -109,65 +89,65 @@ export function transformSubAppHtml(html, apps, slug, fileRelDir, prefix, headle
return ``;
},
);
+}
- // 3. Inject marketplace CSS via /__wf/ gateway route
- const stylePath = `/__wf/${prefix}/style.css`;
- if (!html.includes(`href="${stylePath}"`)) {
- html = html.replace(/<\/head>/i, ` \n`);
- }
-
- // 4. Inject font preconnect if Inter isn't loaded
- if (!html.includes('fonts.googleapis.com')) {
- const fontsPersist = FONT_PRECONNECT.replace(
- /rel="stylesheet"/,
- 'rel="stylesheet" data-astro-transition-persist="css-google-fonts-inter"',
- );
- html = html.replace(/<\/head>/i, ` ${fontsPersist}\n`);
- }
-
- if (headless) {
- // H-a. Force light mode: remove `dark` class and localStorage theme script
- html = html.replace(
- /(]*)\bclass=(["'])([^"']*)\2([^>]*>)/i,
- (_, pre, q, cls, post) => {
- const cleaned = cls.replace(/\bdark\b/g, '').replace(/\s+/g, ' ').trim();
- const classAttr = cleaned ? ` class=${q}${cleaned}${q}` : '';
- return `${pre.trimEnd()}${classAttr}${post}`;
- },
- );
- html = html.replace(/
-
-
-
-
-
diff --git a/src/components/Masthead.astro b/src/components/Masthead.astro
new file mode 100644
index 0000000..5c2af1f
--- /dev/null
+++ b/src/components/Masthead.astro
@@ -0,0 +1,81 @@
+---
+// src/components/Masthead.astro
+//
+// Persistent Knowledge base masthead. Rendered by every page through Base.astro
+// (landing catalog, packaged sub-app pages, iframe entries) in both headless and
+// standalone builds, so the branding and the way back to the catalog never
+// disappear once a user opens a documentation app.
+//
+// Sub-navigation:
+// • "Library" → the catalog of all documentation sites
+// • a dynamic second entry naming the app currently being viewed
+// The entry matching the current location is inert text with aria-current="page"
+// rather than a link to itself.
+import AppIcon from './AppIcon.astro';
+
+interface App {
+ slug: string;
+ name: string;
+ icon?: string;
+}
+
+interface Props {
+ apps: App[];
+ activeSlug?: string;
+ base?: string;
+ /** True when the current page is the active app's own index (its crumb is then inert). */
+ appRoot?: boolean;
+}
+
+const { apps, activeSlug = '', base = '/knowledge-base', appRoot = false } = Astro.props;
+
+const activeApp = apps.find(a => a.slug === activeSlug);
+const onLibrary = !activeApp;
+---
+
+
-
-
-
- Marketplace
-
-
-
-
-
-
-
-
-
-
-
- {apps.map(app => (
-
-
-
+
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index fb1af71..756077d 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -1,23 +1,40 @@
---
// src/layouts/Base.astro
+//
+// The single document shell for every marketplace page — landing catalog,
+// packaged sub-app pages and iframe entries alike. It owns , the fonts,
+// the marketplace stylesheet,
+ , so the masthead title stays non-heading text. */}
+ {onLibrary
+ ?
+
+
+
+
+ Docs
+
+
+ {/* On the catalog the masthead IS the page heading; on a documentation page the
+ sub-app supplies its own , so the masthead title stays non-heading text. */}
+ {onLibrary
+ ? Knowledge base
+ :
Knowledge base
+ } + ++ Browse and access all documentation sites. Each app is independently + maintained and deployed — one consistent experience. +
+ + +
-
-
-
-
-
-
-
-
-
-
- Docs
- - Knowledge base -
-- Browse and access all documentation sites. Each app is independently - maintained and deployed — one consistent experience. -
-