@publier/shell 2.1.1

package/src/styles/base.css

@@ -0,0 +1,627 @@
+/* @publier/shell — base CSS layer (Phase 4 daisyUI rewrite)
+ *
+ * Foundational styles + residual rules for components that aren't fully
+ * expressible in daisyUI / Tailwind utilities. Auto-injected globally by
+ * `docsShell()` so landing / blog / docs pages all share the same
+ * foundation; customers never import it manually.
+ *
+ * Imports `@publier/ui/src/css/rules.css` (NOT `…/base.css`) — Tailwind +
+ * daisyUI + preset directives are owned by shell's auto-composed entry
+ * (`<root>/.astro/publier-tailwind-entry.css`). Importing the directive-
+ * carrying `base.css` here would trigger a SECOND Tailwind compilation
+ * over a slightly different `@source` set, fragmenting the cascade in
+ * dev mode (two `<style>` tags fighting for `.hidden` vs. `.lg:block`
+ * ordering, sidebar invisible at desktop). The directive-free
+ * `rules.css` adds Publier-specific styles only — no duplicate compile.
+ */
+@import "./rules.css";
+
+.katex-display {
+	margin: 1rem 0;
+	padding: 1rem;
+	background: var(--color-base-100);
+	border-radius: 0.5rem;
+}
+
+.katex {
+	font-size: 1em;
+}
+
+/* What stays here post-Phase 4:
+ *   - html / body foundation + `.prose` var bridging
+ *   - SkipLink (a11y primitive)
+ *   - ThemeToggle button (Qwik island)
+ *   - AnnouncementBanner (Astro + inline-script; pre-paint hide)
+ *   - TableOfContents (Astro + inline-script; scroll-spy)
+ *   - VersionSwitcher (Astro + native <details>)
+ *   - OpenInAI (Astro + inline-script; dropdown menu)
+ *
+ * What was removed in Phase 4 Commit 4 (replaced by daisyUI + Tailwind utilities
+ * directly in each component): Badge, Aside, Card/CardGrid, LinkCard,
+ * LinkButton, Steps, DocsLayout, Sidebar/SidebarEntry, Tabs, CodeGroup,
+ * FileTree/Node, Columns, Panels, Tile/TileGrid, UpdateBadge, Breadcrumbs,
+ * LastModified, TopNav, TopNavMobile, PackageInstall.
+ */
+
+/* ─── Global Foundation ───────────────────────────────────── */
+html {
+	-webkit-text-size-adjust: 100%;
+	text-size-adjust: 100%;
+	scroll-behavior: smooth;
+	/* 16px root, matching publier.net's reference layout. Customers who
+	 * want a larger UI surface can set `--publier-font-size-root` at :root
+	 * in their own CSS and every rem-based utility will scale with it. */
+	font-size: var(--publier-font-size-root, 16px);
+}
+
+body {
+	background-color: var(--color-base-100);
+	color: var(--color-base-content);
+	font-family: var(--font-body);
+	font-weight: var(--publier-font-weight-body, 400);
+	line-height: 1.6;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+/* ─── daisyUI v5 `<details>` collapse-arrow rotation patch ──
+ * v5 only rotates `.collapse-arrow::after` on `.collapse-open` or
+ * `:checked~` siblings — it forgot the `<details>[open]` path, so
+ * chevrons on our native-disclosure AccordionItem don't flip. Re-
+ * applying the same 225deg transform restores the expected motion. */
+@media (prefers-reduced-motion: no-preference) {
+	details.collapse.collapse-arrow[open] > summary.collapse-title::after {
+		transform: translateY(-50%) rotate(225deg);
+	}
+}
+
+/* Heading weight follows the theme token so customers can flatten
+ * headings (e.g. 600 instead of 700/800) without touching prose. */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	font-weight: var(--publier-font-weight-heading, 700);
+}
+
+/* ─── Prose overrides — wire @tailwindcss/typography to Publier roles ───
+ *
+ * Readability hierarchy (Fumadocs / shadcn convention):
+ *   - Body, headings, bold, quotes ─ full `base-content`. Crisp, legible,
+ *     high-contrast against the page surface. This is the most-read text
+ *     on the page; it should NEVER be muted.
+ *   - Lead paragraph ───────────── `pl-muted`. Themed, slightly de-
+ *     emphasized; signals "this is the intro summary, body starts below".
+ *   - Captions / counters / table-headers ─ `pl-subtle`. The quietest
+ *     text on the page.
+ *   - Links ──────────────────── `primary`. Accents the interactive path.
+ *   - Bullets / borders / hr ──── `pl-border{,-strong}`.
+ *
+ * Rationale: body text that carries the theme hue looks nice in isolation
+ * but drops contrast vs. the surface and becomes harder to read on long-
+ * form docs. Reserving the themed tint for the LEAD + sidebar section
+ * titles keeps the "themed feel" without sacrificing body legibility.
+ */
+.prose {
+	--tw-prose-body: var(--color-base-content);
+	--tw-prose-headings: var(--color-base-content);
+	--tw-prose-lead: var(--color-pl-muted);
+	--tw-prose-links: var(--color-primary);
+	--tw-prose-bold: var(--color-base-content);
+	--tw-prose-counters: var(--color-pl-subtle);
+	--tw-prose-bullets: var(--color-pl-border-strong);
+	--tw-prose-hr: var(--color-pl-border);
+	--tw-prose-quotes: var(--color-base-content);
+	--tw-prose-quote-borders: var(--color-pl-border-strong);
+	--tw-prose-captions: var(--color-pl-subtle);
+	--tw-prose-code: var(--color-base-content);
+	--tw-prose-pre-code: var(--color-base-content);
+	--tw-prose-pre-bg: var(--color-pl-card);
+	--tw-prose-th-borders: var(--color-pl-border-strong);
+	--tw-prose-td-borders: var(--color-pl-border);
+}
+
+/* Docs body size matches publier.net's pre-sweep reference: body 1.125rem
+ * (18px) / 1.7 line-height for generous long-form reading. H1 leans on the
+ * 800-weight heading stack so the article title visually outweighs section
+ * H2s without needing a separate display font. */
+.prose {
+	font-size: 1.125rem;
+	line-height: 1.7;
+}
+.prose > :where(h1):not(:where([class~="not-prose"] *)) {
+	font-size: 2.25rem;
+	font-weight: var(--publier-font-weight-heading, 800);
+	line-height: 1.15;
+}
+.prose > :where(p):not(:where([class~="not-prose"] *)) {
+	line-height: 1.7;
+}
+
+/* ─── Top-nav active link — brand-tinted highlight ─────────
+ *
+ * The active tab / link is signalled via `aria-current="page"` (semantic,
+ * set both server-side by `render_nav_link` in the native renderer and
+ * client-side by `NAV_ACTIVE_UPDATE_SCRIPT` after persisted navigation).
+ * The visual tint comes from here — NOT from a JS-stamped color class —
+ * and the selector is pinned to `a.btn-ghost` so it can only ever match
+ * the ghost-styled nav links. Filled-button variants (`btn-primary` CTA,
+ * `btn-secondary`, `btn-accent`, `btn-error`, …) are immune: the CSS
+ * rule simply doesn't apply to them, so their daisyUI-derived
+ * foreground/background pair stays intact.
+ */
+[data-publier-top-nav] a.btn-ghost[aria-current="page"] {
+	color: var(--color-primary);
+	background-color: color-mix(in oklab, var(--color-primary) 12%, transparent);
+}
+
+/* ─── SkipLink ───────────────────────────────────────────── */
+.publier-skip-link {
+	position: fixed;
+	top: 0.75rem;
+	inset-inline-start: 0.75rem;
+	clip: rect(0, 0, 0, 0);
+	z-index: 50;
+}
+.publier-skip-link:focus {
+	clip: unset;
+	display: block;
+	padding: 0.5rem 1rem;
+	text-decoration: none;
+	color: var(--color-primary-content);
+	background-color: var(--color-primary);
+	border-radius: 0.375rem;
+	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+}
+
+/* ─── ThemeToggle ─────────────────────────────────────────
+ * `<publier-theme-toggle>` custom element rendered by `theme-toggle.astro`;
+ * icon-only button that cycles auto → light → dark. Upgrades lazily via
+ * the shell's lazy-upgrade bootstrap on first interaction. Only one of
+ * the three inline icons is visible; `data-mode` on the host (set by an
+ * inline `<script>` reading localStorage synchronously) picks which one,
+ * so there's no FOUC between SSR and upgrade.
+ *
+ * Uses the active theme's foreground color so the icon is always readable;
+ * hover state lifts the background slightly. */
+publier-theme-toggle {
+	display: inline-flex;
+}
+.publier-theme-toggle > button {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 2.25rem;
+	height: 2.25rem;
+	padding: 0.375rem;
+	border-radius: 0.375rem;
+	color: var(--color-base-content);
+	background-color: transparent;
+	border: none;
+	cursor: pointer;
+	transition: background-color 150ms ease;
+}
+.publier-theme-toggle > button:hover {
+	background-color: var(--color-base-300);
+}
+.publier-theme-toggle > button:focus-visible {
+	outline: 2px solid var(--color-primary);
+	outline-offset: 2px;
+}
+.publier-theme-toggle__icon {
+	display: none;
+}
+.publier-theme-toggle[data-mode="auto"] .publier-theme-toggle__icon--auto,
+.publier-theme-toggle[data-mode="light"] .publier-theme-toggle__icon--light,
+.publier-theme-toggle[data-mode="dark"] .publier-theme-toggle__icon--dark {
+	display: inline-block;
+}
+
+/* ─── AnnouncementBanner ──────────────────────────────────
+ * Pre-paint hide: `BANNER_INIT_SCRIPT` stamps
+ * `data-banner-dismissed="true"` on <html> synchronously before first
+ * paint; this rule hides the banner with zero flash.
+ *
+ * `!important` is required because daisyUI's `header.alert[data-publier-banner]`
+ * rule has equal specificity (1 element + 1 class + 1 attr = 1 element + 2 attr
+ * = (0,2,1)) and source-order makes its `display: flex` win. Without `!important`
+ * the click-to-dismiss handler runs but the banner stays visible. */
+html[data-banner-dismissed="true"] [data-publier-banner] {
+	display: none !important;
+}
+
+/* ─── TableOfContents ─────────────────────────────────────
+ * Right-rail per-page navigation. Indented by heading depth;
+ * active entry gets primary color via scroll-spy signal. */
+.publier-toc {
+	font-size: 0.875rem;
+	line-height: 1.4;
+}
+
+.publier-toc__label {
+	font-size: 0.8125rem;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.025em;
+	color: var(--color-base-content);
+	margin: 0 0 0.75rem 0;
+}
+
+.publier-toc__list {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	border-inline-start: 1px solid var(--color-base-300);
+}
+
+.publier-toc__item {
+	margin: 0;
+}
+
+.publier-toc__link {
+	display: block;
+	padding: 0.3125rem 0.75rem;
+	margin-inline-start: -1px;
+	border-inline-start: 1px solid transparent;
+	color: var(--color-base-content);
+	text-decoration: none;
+	transition:
+		color 100ms ease,
+		border-color 100ms ease;
+}
+
+.publier-toc__link:hover {
+	color: var(--color-primary);
+}
+
+.publier-toc__link--active {
+	color: var(--color-primary);
+	border-inline-start-color: var(--color-primary);
+	font-weight: 500;
+}
+
+.publier-toc__link--depth-0 {
+	padding-inline-start: 0.75rem;
+}
+.publier-toc__link--depth-1 {
+	padding-inline-start: 1.5rem;
+}
+.publier-toc__link--depth-2 {
+	padding-inline-start: 2.25rem;
+}
+.publier-toc__link--depth-3 {
+	padding-inline-start: 3rem;
+}
+.publier-toc__link--depth-4 {
+	padding-inline-start: 3.75rem;
+}
+
+/* ─── VersionSwitcher ─────────────────────────────────────
+ * Compact dropdown for switching between doc versions. Trigger looks like
+ * a select; opens a floating listbox anchored to the trigger. Active
+ * version gets a check icon. Uses native <details> — no JS. */
+.publier-version-switcher {
+	position: relative;
+}
+
+.publier-version-switcher > summary {
+	list-style: none;
+}
+.publier-version-switcher > summary::-webkit-details-marker {
+	display: none;
+}
+
+.publier-version-switcher__trigger {
+	display: flex;
+	align-items: center;
+	gap: 0.375rem;
+	width: 100%;
+	padding: 0.375rem 0.625rem;
+	border: 1px solid var(--color-base-300);
+	border-radius: 0.375rem;
+	background-color: var(--color-base-200);
+	color: var(--color-base-content);
+	font-size: 0.875rem;
+	font-weight: 500;
+	font-family: inherit;
+	cursor: pointer;
+	text-align: start;
+	transition:
+		background-color 100ms ease,
+		border-color 100ms ease;
+}
+
+.publier-version-switcher__trigger:hover {
+	background-color: var(--color-base-300);
+	border-color: var(--color-primary);
+}
+
+.publier-version-switcher__trigger:focus-visible {
+	outline: 2px solid var(--color-primary);
+	outline-offset: 2px;
+}
+
+.publier-version-switcher__current {
+	flex: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.publier-version-switcher__chevron {
+	flex: none;
+	margin-inline-start: auto;
+	color: var(--color-base-content);
+	transition: transform 150ms ease;
+}
+
+.publier-version-switcher[open] .publier-version-switcher__chevron {
+	transform: rotate(90deg);
+}
+
+.publier-version-switcher__dropdown {
+	position: absolute;
+	inset-inline-start: 0;
+	inset-inline-end: 0;
+	top: calc(100% + 0.25rem);
+	z-index: 20;
+	margin: 0;
+	padding: 0.25rem;
+	background-color: var(--color-base-200);
+	border: 1px solid var(--color-base-300);
+	border-radius: 0.5rem;
+	box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
+	max-height: 16rem;
+	overflow-y: auto;
+}
+
+.publier-version-switcher__option {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	padding: 0.375rem 0.625rem;
+	border-radius: 0.3125rem;
+	font-size: 0.875rem;
+	cursor: pointer;
+	color: var(--color-base-content);
+	text-decoration: none;
+	transition: background-color 100ms ease;
+}
+
+.publier-version-switcher__option:hover {
+	background-color: var(--color-base-300);
+}
+
+.publier-version-switcher__option--active {
+	color: var(--color-primary);
+	font-weight: 600;
+}
+
+.publier-version-switcher__option-label {
+	flex: 1;
+}
+
+.publier-version-switcher__check {
+	flex: none;
+	color: var(--color-primary);
+}
+
+.publier-version-switcher__badge {
+	display: inline-flex;
+	align-items: center;
+	font-size: 0.6875rem;
+	font-weight: 500;
+	line-height: 1;
+	padding: 0.1875rem 0.375rem;
+	border-radius: 9999px;
+	text-transform: capitalize;
+}
+
+.publier-version-switcher__badge--stable {
+	background-color: color-mix(in oklab, var(--color-primary) 12%, transparent);
+	color: var(--color-primary);
+}
+.publier-version-switcher__badge--beta {
+	background-color: color-mix(in oklab, var(--color-accent) 14%, transparent);
+	color: var(--color-accent);
+}
+.publier-version-switcher__badge--deprecated {
+	background-color: color-mix(in oklab, var(--color-error) 12%, transparent);
+	color: var(--color-error);
+}
+.publier-version-switcher__badge--legacy {
+	background-color: var(--color-base-300);
+	color: var(--color-base-content);
+}
+
+/* ─── OpenInAI ────────────────────────────────────────────
+ * Per-page action button + dropdown for opening page content in an AI
+ * tool. Positioned inline, typically near the page heading. */
+.publier-open-in-ai {
+	position: relative;
+	display: inline-flex;
+}
+
+.publier-open-in-ai__trigger {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.375rem;
+	padding: 0.375rem 0.75rem;
+	border: 1px solid var(--color-base-300);
+	border-radius: 0.375rem;
+	background-color: var(--color-base-200);
+	color: var(--color-base-content);
+	font-size: 0.8125rem;
+	font-family: inherit;
+	font-weight: 500;
+	line-height: 1.4;
+	cursor: pointer;
+	transition:
+		background-color 100ms ease,
+		border-color 100ms ease,
+		color 100ms ease;
+}
+
+.publier-open-in-ai__trigger:hover,
+.publier-open-in-ai__trigger--active {
+	background-color: var(--color-base-300);
+	border-color: var(--color-primary);
+	color: var(--color-base-content);
+}
+
+.publier-open-in-ai__trigger:focus-visible {
+	outline: 2px solid var(--color-primary);
+	outline-offset: 2px;
+}
+
+.publier-open-in-ai__trigger-icon {
+	flex: none;
+	color: var(--color-primary);
+}
+
+.publier-open-in-ai__chevron {
+	flex: none;
+	transition: transform 150ms ease;
+}
+
+.publier-open-in-ai__chevron--open {
+	transform: rotate(180deg);
+}
+
+.publier-open-in-ai__dropdown {
+	position: absolute;
+	top: calc(100% + 0.375rem);
+	inset-inline-end: 0;
+	min-width: 13rem;
+	padding: 0.375rem;
+	background-color: var(--color-base-200);
+	border: 1px solid var(--color-base-300);
+	border-radius: 0.5rem;
+	box-shadow:
+		0 4px 6px -1px rgb(0 0 0 / 0.1),
+		0 2px 4px -2px rgb(0 0 0 / 0.1);
+	z-index: 20;
+}
+
+.publier-open-in-ai__option {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	width: 100%;
+	padding: 0.5rem 0.625rem;
+	border: none;
+	background: transparent;
+	color: var(--color-base-content);
+	font-size: 0.8125rem;
+	font-family: inherit;
+	font-weight: 400;
+	line-height: 1.4;
+	text-decoration: none;
+	border-radius: 0.375rem;
+	cursor: pointer;
+	transition: background-color 100ms ease;
+}
+
+.publier-open-in-ai__option:hover {
+	background-color: var(--color-base-300);
+}
+
+.publier-open-in-ai__option:focus-visible {
+	outline: 2px solid var(--color-primary);
+	outline-offset: -2px;
+}
+
+.publier-open-in-ai__option--button {
+	text-align: start;
+}
+
+.publier-open-in-ai__option-icon {
+	flex: none;
+	color: var(--color-base-content);
+}
+
+.publier-open-in-ai__external-icon {
+	flex: none;
+	margin-inline-start: auto;
+	color: var(--color-base-content);
+	opacity: 0.5;
+}
+
+.publier-open-in-ai__divider {
+	border: none;
+	border-top: 1px solid var(--color-base-300);
+	margin: 0.375rem 0;
+}
+
+/* ─── Callouts / Asides ───────────────────────────────────
+ * DaisyUI `alert alert-{type} alert-soft` drives background tint.
+ * Overrides below shape it into a compact docs callout:
+ *   - Body text size matches surrounding prose (1rem) instead of DaisyUI's
+ *     baked-in 0.875rem so callouts sit visually flush with paragraphs.
+ *   - Body text takes a tinted color (mix of variant accent + base-content)
+ *     so the callout reads as themed without being hard-to-read.
+ *   - Padding/gap/radius tightened to match the site's content density.
+ *   - No left accent border — the soft tint + tinted body text carry the
+ *     semantic cue.
+ *   - First child margin reset prevents prose margin-top from misaligning
+ *     the callout body with the icon top.
+ */
+aside.alert {
+	align-items: start;
+	padding: 0.625rem 0.875rem;
+	gap: 0.625rem;
+	border-radius: 0.5rem;
+	/* Match prose body text size — DaisyUI's default is 0.875rem (text-sm). */
+	font-size: 1rem;
+	line-height: 1.6;
+	/* Tinted body text: 70% base-content, 30% variant accent — readable but themed. */
+	color: color-mix(in oklch, var(--alert-color) 30%, var(--color-base-content));
+}
+/* Icon keeps the semantic accent color. */
+aside.alert svg {
+	color: var(--alert-color);
+	flex-shrink: 0;
+}
+/* Titled callout: heading inherits full accent so it anchors the color cue. */
+aside.alert p.font-semibold {
+	color: var(--alert-color);
+}
+/* No left accent border — soft tint alone carries the semantic cue. */
+aside.alert-soft {
+	border-inline-start-width: 0;
+}
+aside.alert .pl-callout__body > :first-child {
+	margin-top: 0;
+}
+
+/* ─── Announcement banner ─────────────────────────────────
+ * DaisyUI `.alert` defaults give the banner a 12 px block padding + grid
+ * layout that left-aligns content. Override to match the publier.net banner:
+ *   - Compact 8 px block padding so the banner is ~40 px tall.
+ *   - Flex layout so `justify-center` actually centers the message.
+ *   - Body text reverts to base-content (white-ish on dark themes) instead
+ *     of the variant accent — keeps the soft tinted background but lets the
+ *     copy read clearly.
+ *   - Dismiss button absolutely positioned so it doesn't push the centered
+ *     message off-axis.
+ */
+header.alert[data-publier-banner] {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding-block: 0.5rem;
+	color: var(--color-base-content);
+	position: relative;
+}
+header.alert[data-publier-banner] .link,
+header.alert[data-publier-banner] > span {
+	color: var(--color-base-content);
+}
+header.alert[data-publier-banner] [data-publier-banner-dismiss] {
+	position: absolute;
+	inset-inline-end: 0.5rem;
+	margin-inline-start: 0;
+	color: var(--color-base-content);
+}

package/src/styles/expressive-code.css

@@ -0,0 +1,41 @@
+/* @publier/shell — expressive-code bridge
+ *
+ * Maps astro-expressive-code's CSS custom properties to daisyUI v5 semantic
+ * tokens. Only the frame chrome is overridden here — syntax highlighting
+ * colors come from EC's own theme (github-light / github-dark by default).
+ *
+ * How to import: add this after @publier/shell/styles/base.css in your
+ * docs page layout, or let docsShell() handle it automatically via the
+ * ./styles/expressive-code.css export.
+ *
+ * EC variable reference: https://expressive-code.com/reference/configuration/#cssvar
+ */
+
+.expressive-code {
+	/* Frame border — daisyUI base-300 plays the border role */
+	--ec-borderColor: var(--color-base-300);
+
+	/* Tab bar background — subdued surface */
+	--ec-frm-tabBarBg: var(--color-base-300);
+	--ec-frm-tabBarBorderBottomColor: var(--color-base-300);
+
+	/* Code area background — left to EC's own per-theme value.
+	 *
+	 * History: a previous attempt overrode --ec-codeBg + --ec-frm-edBg to
+	 * a daisyUI token to fix maple-light's base-200=#fff invisibility
+	 * against the warm-cream page. That broke darker themes by forcing a
+	 * dark bg while EC's syntax-highlight tokens (red/blue keywords, dark
+	 * text) stayed pinned to the github-light palette — dark fg on dark
+	 * bg = unreadable. EC ships its bg AND its fg as a coordinated pair
+	 * per theme (github-light, github-dark); the bridge must not split
+	 * them. If a customer theme makes code blocks invisible against the
+	 * page, fix it in the theme tokens, not here. */
+
+	/* Font families — wired through Astro's Fonts API. The body / heading
+	 * fallbacks chain into `--font-sans` (Astro emits `@font-face` for Inter
+	 * and binds it to `--font-sans` via the Fonts API). Customers can
+	 * still override at the theme level via `--publier-font-body` /
+	 * `--publier-font-mono`. */
+	--ec-codeFontFamily: var(--publier-font-mono, var(--font-mono));
+	--ec-uiFontFamily: var(--publier-font-body, var(--font-sans));
+}