@publier/shell 2.1.1

package/src/styles/rules.css

@@ -0,0 +1,66 @@
+/* @publier/ui — Tailwind-directive-free rules.
+ *
+ * Pure CSS rules that work against Tailwind's emitted custom properties
+ * (`--color-*`, `--color-base-*`) without re-declaring any Tailwind
+ * directives. Imported in two places:
+ *   1) `@publier/ui/src/css/base.css` (the standalone-ui marketing entry,
+ *      which DOES declare `@import "tailwindcss"` etc. on top of these
+ *      rules) — for sites using `@publier/ui` without `@publier/shell`.
+ *   2) `@publier/shell/src/styles/base.css` (the docs entry chained from
+ *      BaseLayout) — which already runs Tailwind via the shell's auto-
+ *      composed entry, so it MUST NOT pick up a second `@import
+ *      "tailwindcss"`. Importing this rules-only sibling avoids that
+ *      double-compile (which previously fragmented the cascade in dev:
+ *      two competing `<style>` tags fighting for `.hidden` vs. `.lg:block`
+ *      ordering).
+ */
+
+/* Shiki dual-theme toggle — toggle light/dark colors based on .dark class. */
+.dark .shiki,
+.dark .shiki span {
+	color: var(--shiki-dark) !important;
+	background-color: var(--shiki-dark-bg) !important;
+	font-style: var(--shiki-dark-font-style) !important;
+	font-weight: var(--shiki-dark-font-weight) !important;
+	text-decoration: var(--shiki-dark-text-decoration) !important;
+}
+
+/* Shiki line / word / diff highlighting (transformers). */
+.shiki .highlighted {
+	background-color: color-mix(in oklab, var(--color-base-content) 12%, transparent);
+	display: inline-block;
+	width: 100%;
+}
+.shiki .highlighted-word {
+	background-color: color-mix(in oklab, var(--color-base-content) 18%, transparent);
+	border-radius: 0.25rem;
+	padding: 0.125rem 0.25rem;
+	margin: -0.125rem -0.25rem;
+}
+.shiki .diff {
+	position: relative;
+	padding-left: 1.25rem;
+}
+.shiki .diff.add {
+	background-color: color-mix(in oklab, var(--color-success) 16%, transparent);
+	display: inline-block;
+	width: 100%;
+}
+.shiki .diff.add::before {
+	content: "+";
+	color: var(--color-success);
+	position: absolute;
+	left: 0.25rem;
+}
+.shiki .diff.remove {
+	background-color: color-mix(in oklab, var(--color-error) 16%, transparent);
+	display: inline-block;
+	width: 100%;
+	opacity: 0.7;
+}
+.shiki .diff.remove::before {
+	content: "-";
+	color: var(--color-error);
+	position: absolute;
+	left: 0.25rem;
+}

package/src/styles/tailwind-sources.css

@@ -0,0 +1,17 @@
+/* Tailwind v4 source scan registration for @publier/shell.
+ *
+ * `@import`ed from the auto-composed Tailwind entry generated by `docsShell()`
+ * at `<root>/.astro/publier-tailwind-entry.css`. Tailwind v4 resolves the
+ * @source pattern below relative to THIS file's on-disk location, so the
+ * shell's components (including absorbed ui/ marketing components) are scanned
+ * regardless of where the consumer's CSS lives on disk.
+ *
+ * Why this file exists: a consumer `@source "../../../shell/src/components/**"`
+ * relative path only resolves under npm's flat layout. pnpm places each
+ * package in its own `.pnpm/<pkg>@<ver>/` directory, so the sibling path
+ * points to a directory that doesn't exist — classes used exclusively inside
+ * shell components (navbar, drawer-*, lg:drawer-open, min-h-14, md:hidden, …)
+ * get tree-shaken out. Making shell own its own @source declaration and
+ * shipping it as a package export sidesteps the pnpm path problem entirely. */
+
+@source "../components/**/*.{ts,tsx,astro}";

package/src/tailwind/preset.css

@@ -0,0 +1,193 @@
+/* @publier/tailwind — base preset (daisyUI v5).
+ *
+ * Consumer cascade:
+ *   @import "tailwindcss";
+ *   @import "@publier/tailwind/preset.css";     ← this file
+ *   @import "virtual:publier-theme-css";        ← resolves to one themes/<name>.css
+ *
+ * daisyUI built-in themes are disabled — Publier ships its own 14-theme set.
+ * Theme files each declare two daisyUI named themes (`light` + `dark`) carrying
+ * that preset's palette, so the runtime toggle writing `data-theme="light|dark"`
+ * activates either variant without importing more CSS.
+ *
+ * Everything daisyUI owns (semantic color tokens, component CSS, utility
+ * classes) comes from the plugin below. Publier-specific structural tokens
+ * (shadow tinting, layout widths, fonts) live on `--publier-*` and get wired
+ * to Tailwind utilities via the `@theme` block.
+ */
+
+@plugin "daisyui" {
+	themes: false;
+}
+
+@theme {
+	/* ─── daisyUI component variable overrides ────────────────
+	 * --menu-font-size bumps the sidebar nav from daisyUI's
+	 * 14px default to 15px so docs navigation reads comfortably
+	 * without needing a scoped font-size override in base.css. */
+	--menu-font-size: 0.9375rem;
+
+	/* ─── Typography ──────────────────────────────────────────
+	 * One layered resolution per slot, namespaces disjoint:
+	 *
+	 *   `--publier-font-{body,heading,mono}`     — customer override hook
+	 *                                              (theme.yaml#typography or
+	 *                                              theme CSS); set by Astro
+	 *                                              Fonts API for customer-
+	 *                                              configured Google/local
+	 *                                              fonts with metric
+	 *                                              optimization.
+	 *   `--publier-font-builtin-{sans,mono}`     — Astro Fonts API output
+	 *                                              for the bundled Inter +
+	 *                                              JetBrains Mono (with
+	 *                                              optimized fallback
+	 *                                              metric overrides for CLS).
+	 *   `--font-{body,heading,sans,mono}`        — resolved consumer surface
+	 *                                              (Tailwind utilities,
+	 *                                              `--default-font-family`,
+	 *                                              base.css read here).
+	 *
+	 * Resolution at every step: customer override → built-in → system.
+	 * `--font-sans` aliases body so a customer who sets a body font also
+	 * gets it from the `font-sans` utility class. Headings inherit body by
+	 * default, so a single typography override on body cascades to h1–h6
+	 * without further config.
+	 *
+	 * Font-weight defaults are tunable — Inter's variable axis runs
+	 * 300–700 and the shipped subsets cover the full range, so themes
+	 * (and customers via `theme.yaml#typography`) can nudge body
+	 * weight up to 450/500 for a slightly chunkier feel without
+	 * loading extra font files.
+	 */
+	--font-body: var(
+		--publier-font-body,
+		var(--publier-font-builtin-sans, ui-sans-serif, system-ui, sans-serif)
+	);
+	--font-heading: var(--publier-font-heading, var(--font-body));
+	--font-mono: var(
+		--publier-font-mono,
+		var(--publier-font-builtin-mono, ui-monospace, SFMono-Regular, Menlo, monospace)
+	);
+
+	--font-sans: var(--font-body);
+
+	--default-font-family: var(--font-body);
+	--default-mono-font-family: var(--font-mono);
+
+	/* Body / heading weight defaults. Themes or customers override via
+	 * `--publier-font-weight-*` on `:root`. Values are free-form
+	 * (any valid CSS font-weight) — integer variable-axis values
+	 * let Inter render at exactly 450 if someone wants it. */
+	--publier-font-weight-body: 400;
+	--publier-font-weight-heading: 700;
+
+	/* ─── Shadows ─────────────────────────────────────────────
+	 * --publier-shadow-color lets themes tint elevation (warm amber for
+	 * maple, cool slate for ocean). Defaults to neutral slate. The token
+	 * holds a bare `R G B` triplet so Tailwind's `rgb(var(...) / alpha)`
+	 * compiler path keeps working — these three values are curator-set
+	 * per theme, not customer-overridable. */
+	--shadow-xs: 0 1px 2px 0
+		rgb(var(--publier-shadow-color, 15 23 42) / var(--publier-shadow-opacity, 0.04));
+	--shadow-sm:
+		0 1px 3px 0 rgb(var(--publier-shadow-color, 15 23 42) / var(--publier-shadow-opacity, 0.06)),
+		0 1px 2px -1px rgb(var(--publier-shadow-color, 15 23 42) / var(--publier-shadow-opacity, 0.06));
+	--shadow-md:
+		0 4px 6px -1px rgb(var(--publier-shadow-color, 15 23 42) / var(--publier-shadow-opacity, 0.08)),
+		0 2px 4px -2px rgb(var(--publier-shadow-color, 15 23 42) / var(--publier-shadow-opacity, 0.06));
+	--shadow-lg:
+		0 10px 15px -3px
+		rgb(var(--publier-shadow-color, 15 23 42) / var(--publier-shadow-opacity, 0.08)),
+		0 4px 6px -4px rgb(var(--publier-shadow-color, 15 23 42) / var(--publier-shadow-opacity, 0.06));
+	--shadow-xl:
+		0 20px 25px -5px rgb(var(--publier-shadow-color, 15 23 42) / var(--publier-shadow-opacity, 0.1)),
+		0 8px 10px -6px rgb(var(--publier-shadow-color, 15 23 42) / var(--publier-shadow-opacity, 0.06));
+
+	/* ─── Motion ──────────────────────────────────────────── */
+	--default-transition-duration: var(--publier-transition-duration, 150ms);
+	--default-transition-timing-function: var(
+		--publier-transition-timing,
+		cubic-bezier(0.4, 0, 0.2, 1)
+	);
+
+	/* ─── Layout ──────────────────────────────────────────── */
+	--layout-width: var(--publier-layout-width, 1400px);
+
+	/* ─── daisyUI status color fallbacks ─────────────────────
+	 * daisyUI v5 `alert-info/success/warning/error` read these tokens but
+	 * they are optional — daisyUI's built-in themes define them, Publier's
+	 * 14 custom themes do not. These defaults ensure every callout, badge,
+	 * and alert renders with correct color on any Publier theme. Individual
+	 * theme files can override them per-theme if needed. */
+	--color-info: oklch(55% 0.12 240);
+	--color-info-content: oklch(97% 0.01 240);
+	--color-success: oklch(72.3% 0.219 149.579);
+	--color-success-content: oklch(97.8% 0.014 149.579);
+	--color-warning: oklch(76.9% 0.188 70.08);
+	--color-warning-content: oklch(97.8% 0.014 70.08);
+	--color-error: oklch(63.7% 0.237 25.331);
+	--color-error-content: oklch(97.8% 0.014 25.331);
+
+	/* ─── Publier semantic role surface ──────────────────────
+	 * 19 per-theme roles + 5 static status roles, inspired by
+	 * shadcn/ui's paired bg/foreground pattern (also used by
+	 * Fumadocs). Components should prefer `*-pl-*` utilities
+	 * over raw daisyUI `--color-base-*` so theme authors can
+	 * inject one coherent palette from a single place.
+	 *
+	 * Defaults below alias the daisyUI base tokens — themes
+	 * override only the roles that need a theme-specific
+	 * chroma (`muted`, `card-hover`, `shadow`, etc.) in their
+	 * own `:root[data-theme="light|dark"]` blocks.
+	 *
+	 * Static status roles (bottom of the list) never re-theme
+	 * — a warning should look like a warning regardless of
+	 * which preset is active. */
+
+	/* Foundation ­— aliases existing daisyUI tokens so there's
+	 * a single source of truth per page-level surface. */
+	--color-pl-bg: var(--color-base-100);
+	--color-pl-fg: var(--color-base-content);
+
+	/* De-emphasized — the "themed body copy" role that publier.net
+	 * had as `--qw-color-muted-foreground`. Default derives from
+	 * base-content via color-mix so un-overridden themes still
+	 * look reasonable; themes with a deliberate warm/cool tint
+	 * should override. */
+	--color-pl-muted: color-mix(in oklch, var(--color-base-content) 62%, var(--color-base-100));
+	--color-pl-muted-bg: var(--color-base-200);
+	--color-pl-subtle: color-mix(in oklch, var(--color-base-content) 45%, var(--color-base-100));
+
+	/* Raised — tile / card surfaces. `card-hover` is the
+	 * visible lift on pointer hover; missing in the daisyUI
+	 * sweep which is why tiles currently look flat. */
+	--color-pl-card: var(--color-base-100);
+	--color-pl-card-fg: var(--color-base-content);
+	--color-pl-card-hover: var(--color-base-200);
+
+	/* Overlay — tooltips, popovers, search dialog. Distinct
+	 * z-plane from card; Fumadocs pattern. */
+	--color-pl-popover: var(--color-base-100);
+	--color-pl-popover-fg: var(--color-base-content);
+
+	/* Dividers + focus */
+	--color-pl-border: color-mix(in oklch, var(--color-base-300) 70%, var(--color-base-100));
+	--color-pl-border-strong: var(--color-base-300);
+	--color-pl-ring: var(--color-primary);
+
+	/* Sidebar sub-theme — shadcn pattern. `sidebar-accent` is
+	 * the nav-item hover bg; `sidebar-active` is the current-
+	 * page item. Both were lost when `.btn-ghost` + `.menu-active`
+	 * replaced publier.net's `--qw-nav-item-bg-*` tokens. */
+	--color-pl-sidebar-bg: var(--color-pl-bg);
+	--color-pl-sidebar-fg: var(--color-pl-fg);
+	--color-pl-sidebar-muted: var(--color-pl-muted);
+	--color-pl-sidebar-accent: var(--color-pl-muted-bg);
+	--color-pl-sidebar-accent-fg: var(--color-pl-fg);
+	/* Active item uses a translucent primary tint rather than a solid
+	 * primary fill — the publier.net pre-migration pattern. Soft bg
+	 * + colored text keeps the active row legible without shouting. */
+	--color-pl-sidebar-active: color-mix(in oklch, var(--color-primary) 10%, transparent);
+	--color-pl-sidebar-active-fg: var(--color-primary);
+	--color-pl-sidebar-border: var(--color-pl-border);
+}

package/src/virtual-modules.d.ts

@@ -0,0 +1,164 @@
+/**
+ * TypeScript declarations for Vite virtual modules emitted by docsShell().
+ * Not real files — generated at dev/build time by Vite plugins inside the integration.
+ *
+ *   virtual:publier-nav-config       — typed nav config from publier.config.yaml#nav
+ *   virtual:publier-announcement     — typed announcement-banner config from #announcement
+ *   virtual:publier-site             — footer text + service-worker flag from #site
+ *   virtual:publier-docs-config      — tab sections + sidebar meta/versions/anchors from #docs
+ *   virtual:publier-theme-css        — bare-side-effect CSS module: theme preset import
+ *   virtual:publier-custom-css       — bare-side-effect CSS module: customCss[] imports
+ *
+ * The two bare-side-effect CSS modules are imported via
+ * `injectScript('page-ssr', "import '…'")` so Astro emits the resulting
+ * `<link rel="stylesheet">` tag for every page — the declarations exist so
+ * `tsc --noEmit` resolves the specifiers if anything in the workspace
+ * imports them directly.
+ */
+
+declare module 'virtual:publier-theme-css';
+declare module 'virtual:publier-custom-css';
+
+declare module 'virtual:publier-nav-config' {
+	export interface NavLink {
+		label: string;
+		href: string;
+		external?: boolean;
+	}
+
+	export interface NavCta {
+		label: string;
+		href: string;
+	}
+
+	export interface NavVariant {
+		/** Brand text next to (or replacing) the logo. */
+		brand: string;
+		/** Logo paths. Null when no logo configured. */
+		logo: { light?: string; dark?: string } | null;
+		/** Center tab links . */
+		tabs: NavLink[];
+		/** Right-side links. */
+		links: NavLink[];
+		/** Primary CTA button. Null when absent. */
+		cta: NavCta | null;
+	}
+
+	/**
+	 * One URL-path → variant mapping. Evaluated first-match-wins by
+	 * BaseLayout when the page doesn't pass an explicit `nav` prop.
+	 * `variant: false` disables the nav entirely for matching paths.
+	 */
+	export interface NavPathRule {
+		path: string;
+		variant: string | false;
+	}
+
+	export interface NavConfig {
+		/** All named variants keyed by name (e.g., "default", "docs", "marketing"). */
+		variants: Record<string, NavVariant>;
+		/** URL-path-to-variant routing table. Evaluated first-match-wins. */
+		pathRules: NavPathRule[];
+		/** Variant name used when no `pathRules` entry matches. Defaults to `"default"`. */
+		defaultVariant: string;
+		/** Whether search is enabled (`search.enabled` from publier.config.yaml). */
+		searchEnabled: boolean;
+	}
+
+	export const navConfig: NavConfig;
+}
+
+declare module 'virtual:publier-announcement' {
+	export interface AnnouncementConfig {
+		message: string;
+		href?: string;
+		variant?: 'info' | 'warning' | 'success';
+		storageKey?: string;
+	}
+
+	/** `null` when `announcement:` is absent from publier.config.yaml. */
+	export const announcement: AnnouncementConfig | null;
+}
+
+declare module 'virtual:publier-site' {
+	/**
+	 * BaseLayout's rendering surface. Mirrors the `site:` block in
+	 * publier.config.yaml 1:1 — identity (name, url, description, logo,
+	 * favicon) and chrome (footer, serviceWorker).
+	 */
+	export interface SiteConfig {
+		/** Site name. Shown as `<title>` fallback + OG defaults. */
+		name: string;
+		/** Production URL. `null` → canonical tags + absolute OG refs skipped. */
+		url: string | null;
+		/** Site description / meta tag fallback. `null` → no meta description emitted. */
+		description: string | null;
+		/** Logo paths. `null` when no logo configured. */
+		logo: { light?: string; dark?: string } | null;
+		/** Favicon path. `null` → BaseLayout falls back to `/favicon.svg`. */
+		favicon: string | null;
+		/** Footer text rendered by BaseLayout. `null` → no footer. */
+		footer: string | null;
+		/** When true, BaseLayout emits a `navigator.serviceWorker.register('/sw.js')` call. */
+		serviceWorker: boolean;
+	}
+
+	export const site: SiteConfig;
+}
+
+declare module 'virtual:publier-feeds' {
+	/**
+	 * Discovery-link source for `<link rel="alternate" type="application/rss+xml">`
+	 * tags emitted by BaseLayout. Derived from `shellPlanDefaultRoutes` so
+	 * opt-outs (`routes.rss: false`, `routes.blog: false`, missing
+	 * `site.url`) automatically suppress the matching link tag.
+	 *
+	 * `href` is a site-relative path (e.g. `/blog/rss.xml`). BaseLayout
+	 * prefixes it with `site.url` so the emitted tag is absolute.
+	 */
+	export interface FeedDescriptor {
+		title: string;
+		href: string;
+	}
+	export const feeds: FeedDescriptor[];
+}
+
+declare module 'virtual:publier-fonts' {
+	/**
+	 * Active customer font slots from `publier.config.yaml#fonts`. Each entry
+	 * names a slot whose font was registered with Astro's Fonts API via
+	 * `fontProviders.google()` or `fontProviders.local()` — base-layout emits
+	 * `<Font cssVariable="--publier-font-{slot}" />` for each so the
+	 * generated @font-face + preload tags reach the page.
+	 *
+	 * Slots that the customer left at family-only (no provider, just a CSS
+	 * var alias) are NOT included here — those are handled by an inline
+	 * `<style>` injection that doesn't need a `<Font />` emitter.
+	 */
+	export interface FontsConfig {
+		slots: Array<'heading' | 'body' | 'mono'>;
+	}
+	export const fonts: FontsConfig;
+}
+
+declare module 'virtual:publier-docs-config' {
+	import type { DocVersion, SidebarAnchor } from '@publier/shell/components';
+	import type { SidebarMetaOverride } from '@publier/shell/search';
+
+	export interface DocsConfig {
+		/**
+		 * Top-level folders under `src/content/docs/` that render as their own
+		 * tab-scoped sidebars. Empty array → single flat sidebar for every
+		 * docs page.
+		 */
+		tabSections: string[];
+		/** Display + ordering overrides keyed by group path. */
+		sidebarMeta: Record<string, SidebarMetaOverride>;
+		/** Optional versions row rendered above the sidebar. */
+		versions: DocVersion[];
+		/** Optional anchor links rendered below the sidebar. */
+		anchors: SidebarAnchor[];
+	}
+
+	export const docsConfig: DocsConfig;
+}