@publier/shell 2.1.1

package/src/components/index.ts

@@ -0,0 +1,155 @@
+
+
+export { getIconDef, ICON_DEFS, type IconDef, type IconName } from '../icons/index';
+export { resolveIcon } from '../icons/resolve';
+export {
+	BANNER_DEFAULT_STORAGE_KEY,
+	buildBannerInitScript,
+} from '../runtime/banner-init.ts';
+export { LAZY_UPGRADE_SCRIPT } from '../runtime/lazy-upgrade-init.ts';
+export { SIDEBAR_SCROLL_STORAGE_KEY } from '../runtime/sidebar-scroll-init.ts';
+export {
+	type AppearanceOptions,
+	buildThemeInitScript,
+	THEME_INIT_SCRIPT,
+} from '../runtime/theme-init.ts';
+export { default as AnnouncementBanner } from './announcement-banner.astro';
+export { default as Aside } from './aside.astro';
+export { default as Badge } from './badge.astro';
+export { default as Breadcrumbs } from './breadcrumbs.astro';
+export { default as Caution } from './callouts/caution.astro';
+export { default as Check } from './callouts/check.astro';
+export { default as Danger } from './callouts/danger.astro';
+export { default as Info } from './callouts/info.astro';
+export { default as Note } from './callouts/note.astro';
+export { default as Tip } from './callouts/tip.astro';
+export { default as Warning } from './callouts/warning.astro';
+export { default as Card } from './card.astro';
+export { default as CardGrid } from './card-grid.astro';
+export { default as CodeGroup } from './code-group.astro';
+export { default as Columns } from './columns.astro';
+export { default as DocsLayout } from './docs-layout.astro';
+export { default as FileTree } from './file-tree.astro';
+export { default as Icon } from './icon.astro';
+export { default as LastModified } from './LastModified.astro';
+export { default as LinkButton } from './link-button.astro';
+export { default as LinkCard } from './link-card.astro';
+export { default as OpenInAI } from './open-in-ai.astro';
+export { default as PackageInstall } from './package-install.astro';
+export { default as Panels } from './panels.astro';
+export { default as SearchButton } from './search-button.astro';
+export { default as Sidebar } from './sidebar.astro';
+export { default as SkipLink } from './skip-link.astro';
+export { default as Steps } from './steps.astro';
+export { default as TableOfContents } from './table-of-contents.astro';
+export { default as Tabs } from './tabs.astro';
+export { THEME_STORAGE_KEY, type Theme } from './theme-storage.ts';
+export { default as ThemeToggle } from './theme-toggle.astro';
+export { default as Tile } from './tile.astro';
+export { default as TileGrid } from './tile-grid.astro';
+export { default as TopNav } from './top-nav.astro';
+export { default as TopNavMobile } from './top-nav-mobile.astro';
+
+export type {
+	AnnouncementBannerProps,
+	AnnouncementBannerVariant,
+	AsideProps,
+	AsideType,
+	BadgeProps,
+	BadgeSize,
+	BadgeVariant,
+	BreadcrumbItem,
+	BreadcrumbsProps,
+	CalloutProps,
+	CardGridProps,
+	CardProps,
+	CardVariant,
+	CodeGroupItem,
+	CodeGroupProps,
+	ColumnCount,
+	ColumnGap,
+	ColumnsProps,
+	DocsLayoutProps,
+	DocVersion,
+	FileTreeDirectory,
+	FileTreeEntry,
+	FileTreeFile,
+	FileTreePlaceholder,
+	FileTreeProps,
+	IconProps,
+	LinkButtonIconPlacement,
+	LinkButtonProps,
+	LinkButtonVariant,
+	LinkCardProps,
+	OpenInAIProps,
+	PackageInstallProps,
+	PanelsProps,
+	PanelVariant,
+	SidebarAnchor,
+	SidebarEntry,
+	SidebarGroupEntry,
+	SidebarLink,
+	SidebarProps,
+	SidebarSection,
+	SkipLinkProps,
+	StepsProps,
+	TableOfContentsProps,
+	TileGridProps,
+	TileProps,
+	TocHeading,
+	TopNavMobileProps,
+	TopNavProps,
+	UpdateBadgeProps,
+	UpdateBadgeType,
+	VersionSwitcherProps,
+} from './types.ts';
+
+export { default as BlurImage } from './ui/blur-image.astro';
+export { default as ChangelogEntry } from './ui/changelog-entry.astro';
+export { default as CtaBand } from './ui/cta-band.astro';
+export { default as FeatureGrid } from './ui/feature-grid.astro';
+export { default as FeatureSection } from './ui/feature-section.astro';
+export { default as Frame } from './ui/frame.astro';
+export { default as Hero } from './ui/hero.astro';
+export { default as JobsList } from './ui/jobs-list.astro';
+export { default as LogoCloud } from './ui/logo-cloud.astro';
+export { default as PressGallery } from './ui/press-gallery.astro';
+export { default as PricingComparisonTable } from './ui/pricing-comparison-table.astro';
+export { default as PricingSection } from './ui/pricing-section.astro';
+export { default as PricingTable } from './ui/pricing-table.astro';
+export { default as StatusIndicator } from './ui/status-indicator.astro';
+export { default as TeamGrid } from './ui/team-grid.astro';
+export { default as TestimonialCard } from './ui/testimonial-card.astro';
+
+export type {
+	BillingPeriod,
+	BlurImageProps,
+	ChangelogEntryProps,
+	ChangelogEntryType,
+	CtaBandProps,
+	FeatureGridItem,
+	FeatureGridProps,
+	FeatureSectionProps,
+	FrameProps,
+	HeroProps,
+	JobsListItem,
+	JobsListProps,
+	LogoCloudItem,
+	LogoCloudProps,
+	PressGalleryItem,
+	PressGalleryProps,
+	PricingCellValue,
+	PricingComparisonCategory,
+	PricingComparisonRow,
+	PricingComparisonTableProps,
+	PricingSectionProps,
+	PricingTableProps,
+	PricingTier,
+	StatusIndicatorProps,
+	StatusLevel,
+	TeamGridMember,
+	TeamGridProps,
+	TestimonialCardProps,
+} from './ui/types.ts';
+export { default as UpdateBadge } from './update-badge.astro';
+export { default as VersionSwitcher } from './version-switcher.astro';

package/src/components/link-button.astro

@@ -0,0 +1,21 @@
+---
+import { shellRenderLinkButton } from '@publier/native';
+
+export type LinkButtonVariant = 'primary' | 'secondary' | 'minimal';
+export type LinkButtonIconPlacement = 'start' | 'end';
+
+interface Props {
+	href: string;
+	variant?: LinkButtonVariant;
+	iconPlacement?: LinkButtonIconPlacement;
+	rel?: string;
+	target?: '_blank' | '_self' | '_parent' | '_top';
+	class?: string;
+}
+
+const { href, variant = 'primary', iconPlacement = 'end', rel, target, class: customClass } = Astro.props;
+const slotHtml = await Astro.slots.render('default');
+const html = shellRenderLinkButton(href, variant, iconPlacement, rel ?? null, target ?? null, customClass ?? null, slotHtml);
+---
+
+<Fragment set:html={html} />

package/src/components/link-card.astro

@@ -0,0 +1,21 @@
+---
+import { shellRenderLinkCard } from '@publier/native';
+
+interface Props {
+	title: string;
+	href: string;
+	description?: string;
+	rel?: string;
+	target?: '_blank' | '_self' | '_parent' | '_top';
+	class?: string;
+}
+
+const p = Astro.props;
+
+const isOutbound = /^https?:\/\//i.test(p.href);
+const target = p.target ?? (isOutbound ? '_blank' : null);
+const rel = p.rel ?? (isOutbound ? 'noopener noreferrer' : null);
+const html = shellRenderLinkCard(p.title, p.href, p.description ?? null, rel, target, p.class ?? null);
+---
+
+<Fragment set:html={html} />

package/src/components/open-in-ai.astro

@@ -0,0 +1,13 @@
+---
+import { shellRenderOpenInAi } from '@publier/native';
+
+interface Props {
+	pageUrl?: string;
+	pageTitle?: string;
+}
+
+const { pageUrl = '', pageTitle = '' } = Astro.props;
+const html = shellRenderOpenInAi(pageUrl, pageTitle);
+---
+
+<Fragment set:html={html} />

package/src/components/package-install.astro

@@ -0,0 +1,17 @@
+---
+import { shellRenderPackageInstall } from '@publier/native';
+
+interface Props {
+	pkg?: string;
+	type?: 'prod' | 'dev' | 'exec';
+	command?: string;
+	syncKey?: string;
+}
+
+const { pkg, type, command, syncKey } = Astro.props;
+const id = `publier-tabs-${Math.random().toString(36).slice(2, 10)}`;
+const html = shellRenderPackageInstall(
+	JSON.stringify({ type, pkg, command, syncKey, id }),
+);
+---
+<Fragment set:html={html} />

package/src/components/panels.astro

@@ -0,0 +1,16 @@
+---
+import { shellRenderPanels } from '@publier/native';
+
+export type PanelVariant = 'default' | 'outlined' | 'filled';
+
+interface Props {
+	title?: string;
+	variant?: PanelVariant;
+	class?: string;
+}
+
+const { title, variant = 'default', class: customClass } = Astro.props;
+const slotHtml = await Astro.slots.render('default');
+const html = shellRenderPanels(JSON.stringify({ title, variant, customClass, slotHtml }));
+---
+<Fragment set:html={html} />

package/src/components/search-button.astro

@@ -0,0 +1,21 @@
+---
+import { shellRenderSearchButton } from '@publier/native';
+
+interface Props {
+	label?: string;
+	shortcut?: string;
+	'aria-label'?: string;
+	class?: string;
+}
+
+const {
+	label,
+	shortcut,
+	'aria-label': ariaLabel,
+	class: customClass,
+} = Astro.props;
+const html = shellRenderSearchButton(
+	JSON.stringify({ label, shortcut, ariaLabel, customClass }),
+);
+---
+<Fragment set:html={html} />

package/src/components/sidebar.astro

@@ -0,0 +1,12 @@
+---
+import { shellRenderSidebar } from '@publier/native';
+import VersionSwitcher from './version-switcher.astro';
+import type { SidebarProps } from './types.ts';
+
+const { items, currentPath = '', label = 'Primary', class: customClass, versions, anchors, scope } = Astro.props as SidebarProps;
+const hasVersions = Array.isArray(versions) && versions.length > 0;
+const [prefix, suffix] = shellRenderSidebar(
+	JSON.stringify({ items, currentPath, label, customClass, scope, anchors: anchors ?? [] }),
+).split('<!--publier-sidebar-vs-slot-->');
+---
+<Fragment set:html={prefix} />{hasVersions && <div class="px-2"><VersionSwitcher versions={versions!} currentPath={currentPath} /></div>}<Fragment set:html={suffix} />

package/src/components/skip-link.astro

@@ -0,0 +1,12 @@
+---
+import { shellRenderSkipLink } from '@publier/native';
+
+interface Props {
+	targetId?: string;
+	label?: string;
+}
+
+const { targetId = 'publier-main', label = 'Skip to content' } = Astro.props;
+const html = shellRenderSkipLink(JSON.stringify({ targetId, label }));
+---
+<Fragment set:html={html} />

package/src/components/steps.astro

@@ -0,0 +1,13 @@
+---
+import { shellRenderSteps } from '@publier/native';
+
+interface Props {
+	start?: number;
+	class?: string;
+}
+
+const { start, class: customClass } = Astro.props;
+const slotHtml = await Astro.slots.render('default');
+const html = shellRenderSteps(JSON.stringify({ start, customClass, slotHtml }));
+---
+<Fragment set:html={html} />

package/src/components/table-of-contents.astro

@@ -0,0 +1,22 @@
+---
+import { shellRenderTableOfContents } from '@publier/native';
+
+interface TocHeading {
+	slug: string;
+	text: string;
+	depth: number;
+}
+
+interface Props {
+	headings: TocHeading[];
+	label?: string;
+	minDepth?: number;
+	class?: string;
+}
+
+const { headings, label, minDepth, class: customClass } = Astro.props;
+const html = shellRenderTableOfContents(
+	JSON.stringify({ headings, label, minDepth, customClass }),
+);
+---
+<Fragment set:html={html} />

package/src/components/tabs.astro

@@ -0,0 +1,17 @@
+---
+import { shellRenderTabs } from '@publier/native';
+
+interface Props {
+	labels: string[];
+	defaultIndex?: number;
+	syncKey?: string;
+	class?: string;
+}
+
+const { labels, defaultIndex = 0, syncKey, class: customClass } = Astro.props;
+const id = `publier-tabs-${Math.random().toString(36).slice(2, 10)}`;
+const slots = await Promise.all(labels.map((_l, i) => Astro.slots.render(`tab-${i}`)));
+const html = shellRenderTabs(JSON.stringify(labels), JSON.stringify(slots), defaultIndex, syncKey ?? null, id, customClass ?? null);
+---
+
+<Fragment set:html={html} />

package/src/components/theme-storage.ts

@@ -0,0 +1,5 @@
+
+
+export const THEME_STORAGE_KEY = 'publier-theme';
+
+export type Theme = 'light' | 'dark' | 'auto';

package/src/components/theme-toggle-element.ts

@@ -0,0 +1,85 @@
+
+
+import { THEME_STORAGE_KEY, type Theme } from './theme-storage.ts';
+
+function parseMode(value: unknown): Theme {
+	return value === 'light' || value === 'dark' ? value : 'auto';
+}
+
+function nextMode(current: Theme): Theme {
+	return current === 'auto' ? 'light' : current === 'light' ? 'dark' : 'auto';
+}
+
+class PublierThemeToggleElement extends HTMLElement {
+	#mq: MediaQueryList | null = null;
+	#onSystemChange: (() => void) | null = null;
+	#onClick: ((e: Event) => void) | null = null;
+
+	connectedCallback(): void {
+		const button = this.querySelector('button');
+		if (!button) return;
+
+		this.#onClick = (e) => {
+			e.preventDefault();
+			this.#cycle();
+		};
+		button.addEventListener('click', this.#onClick);
+
+		
+		
+		
+		if ((this.dataset.defaultScheme ?? 'system') === 'system') {
+			this.#mq = window.matchMedia('(prefers-color-scheme: dark)');
+			this.#onSystemChange = () => {
+				if ((this.dataset.mode ?? 'auto') === 'auto') this.#applyTheme();
+			};
+			this.#mq.addEventListener('change', this.#onSystemChange);
+		}
+	}
+
+	disconnectedCallback(): void {
+		const button = this.querySelector('button');
+		if (button && this.#onClick) button.removeEventListener('click', this.#onClick);
+		if (this.#mq && this.#onSystemChange) {
+			this.#mq.removeEventListener('change', this.#onSystemChange);
+		}
+		this.#mq = null;
+		this.#onSystemChange = null;
+		this.#onClick = null;
+	}
+
+	#cycle(): void {
+		const current = parseMode(this.dataset.mode);
+		const next = nextMode(current);
+		try {
+			if (next === 'auto') localStorage.removeItem(THEME_STORAGE_KEY);
+			else localStorage.setItem(THEME_STORAGE_KEY, next);
+		} catch {
+			
+			
+		}
+		this.dataset.mode = next;
+		const label = this.dataset[`label${next.charAt(0).toUpperCase() + next.slice(1)}`];
+		const button = this.querySelector('button');
+		if (button && label) {
+			button.setAttribute('aria-label', label);
+			button.setAttribute('title', label);
+		}
+		this.#applyTheme();
+	}
+
+	#applyTheme(): void {
+		const mode = parseMode(this.dataset.mode);
+		const defaultScheme = this.dataset.defaultScheme ?? 'system';
+		const systemDark =
+			typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches;
+		const autoDark = defaultScheme === 'dark' || (defaultScheme === 'system' && systemDark);
+		const isDark = mode === 'dark' || (mode === 'auto' && autoDark);
+		document.documentElement.classList.toggle('dark', isDark);
+		document.documentElement.dataset.theme = isDark ? 'dark' : 'light';
+	}
+}
+
+if (typeof customElements !== 'undefined' && !customElements.get('publier-theme-toggle')) {
+	customElements.define('publier-theme-toggle', PublierThemeToggleElement);
+}

package/src/components/theme-toggle.astro

@@ -0,0 +1,25 @@
+---
+import { shellRenderThemeToggle } from '@publier/native';
+import type { Theme } from './theme-storage.ts';
+
+export interface Props {
+	labels?: Partial<Record<Theme, string>>;
+	class?: string;
+	strict?: boolean;
+	default?: 'system' | 'light' | 'dark';
+}
+
+const { labels = {}, class: customClass, strict = false, default: defaultScheme = 'system' } =
+	Astro.props;
+const html = shellRenderThemeToggle(
+	JSON.stringify({
+		labelAuto: labels.auto,
+		labelLight: labels.light,
+		labelDark: labels.dark,
+		customClass,
+		strict,
+		defaultScheme,
+	}),
+);
+---
+<Fragment set:html={html} />

package/src/components/tile-grid.astro

@@ -0,0 +1,13 @@
+---
+import { shellRenderTileGrid } from '@publier/native';
+
+interface Props {
+	minColumnWidth?: string;
+	class?: string;
+}
+
+const { minColumnWidth = '200px', class: customClass } = Astro.props;
+const slotHtml = await Astro.slots.render('default');
+const html = shellRenderTileGrid(JSON.stringify({ minColumnWidth, customClass, slotHtml }));
+---
+<Fragment set:html={html} />

package/src/components/tile.astro

@@ -0,0 +1,17 @@
+---
+import { shellRenderTile } from '@publier/native';
+
+interface Props {
+	title: string;
+	description?: string;
+	href?: string;
+	class?: string;
+}
+
+const { title, description, href, class: customClass } = Astro.props;
+const iconSlotHtml = Astro.slots.has('icon') ? await Astro.slots.render('icon') : null;
+const html = shellRenderTile(
+	JSON.stringify({ title, description, href, customClass, iconSlotHtml }),
+);
+---
+<Fragment set:html={html} />

package/src/components/top-nav-mobile.astro

@@ -0,0 +1,11 @@
+---
+import { shellRenderTopNavMobile } from '@publier/native';
+import { navConfig, type NavVariant } from 'virtual:publier-nav-config';
+import type { TopNavMobileProps } from './types.ts';
+
+const EMPTY: NavVariant = { brand: '', logo: null, tabs: [], links: [], cta: null };
+const { variant = 'default', currentPath = '' } = Astro.props as TopNavMobileProps;
+const v = navConfig.variants[variant] ?? navConfig.variants.default ?? EMPTY;
+const html = shellRenderTopNavMobile(JSON.stringify({ currentPath, v }));
+---
+<Fragment set:html={html} />

package/src/components/top-nav.astro

@@ -0,0 +1,20 @@
+---
+import { shellRenderTopNav } from '@publier/native';
+import { navConfig, type NavVariant } from 'virtual:publier-nav-config';
+import type { TopNavProps } from './types.ts';
+
+const EMPTY: NavVariant = { brand: '', logo: null, tabs: [], links: [], cta: null };
+const { variant = 'default', currentPath = '' } = Astro.props as TopNavProps;
+const v = navConfig.variants[variant] ?? navConfig.variants.default ?? EMPTY;
+const [searchSlotHtml, themeSlotHtml, mobileSlotHtml] = await Promise.all([
+	Astro.slots.has('search') ? Astro.slots.render('search') : Promise.resolve(null),
+	Astro.slots.has('theme') ? Astro.slots.render('theme') : Promise.resolve(null),
+	Astro.slots.has('mobile') ? Astro.slots.render('mobile') : Promise.resolve(null),
+]);
+const html = shellRenderTopNav(JSON.stringify({
+	variant, currentPath, v,
+	searchEnabled: navConfig.searchEnabled,
+	searchSlotHtml, themeSlotHtml, mobileSlotHtml,
+}));
+---
+<Fragment set:html={html} />