@publier/shell 2.1.1

package/src/components/ui/team-grid.astro

@@ -0,0 +1,63 @@
+---
+interface Member {
+	name: string;
+	role: string;
+	bio?: string;
+	avatarUrl?: string;
+	socials?: { label: string; href: string }[];
+}
+
+interface Props {
+	members: Member[];
+	columns?: 2 | 3 | 4;
+}
+
+const { members, columns = 3 } = Astro.props;
+
+const colCls = columns === 2
+	? 'md:grid-cols-2'
+	: columns === 4
+		? 'md:grid-cols-2 lg:grid-cols-4'
+		: 'md:grid-cols-2 lg:grid-cols-3';
+---
+
+<ul class={`list-none grid gap-6 ${colCls}`}>
+	{members.map((member) => (
+		<li class="card bg-base-100 border border-base-300">
+			<div class="card-body items-center text-center">
+				{member.avatarUrl ? (
+					<div class="avatar">
+						<div class="w-20 rounded-full">
+							<img src={member.avatarUrl} alt={`${member.name} avatar`} width="80" height="80" loading="lazy" />
+						</div>
+					</div>
+				) : (
+					<div class="avatar placeholder">
+						<div class="bg-neutral text-neutral-content w-20 rounded-full">
+							<span class="text-2xl">{member.name.charAt(0)}</span>
+						</div>
+					</div>
+				)}
+				<h3 class="card-title text-base-content">{member.name}</h3>
+				<p class="text-sm text-base-content/60">{member.role}</p>
+				{member.bio && <p class="text-sm text-base-content/70">{member.bio}</p>}
+				{member.socials && member.socials.length > 0 && (
+					<ul class="list-none flex gap-3 mt-2">
+						{member.socials.map((s) => (
+							<li>
+								<a
+									class="link link-primary text-sm"
+									href={s.href}
+									target="_blank"
+									rel="noopener noreferrer"
+								>
+									{s.label}
+								</a>
+							</li>
+						))}
+					</ul>
+				)}
+			</div>
+		</li>
+	))}
+</ul>

package/src/components/ui/testimonial-card.astro

@@ -0,0 +1,42 @@
+---
+interface Props {
+	quote: string;
+	author: string;
+	role?: string;
+	company?: string;
+	avatarUrl?: string;
+}
+
+const { quote, author, role, company, avatarUrl } = Astro.props;
+
+const meta = [role, company].filter(Boolean).join(', ');
+---
+
+<figure class="card bg-base-100 border border-base-300">
+	<div class="card-body">
+		<svg
+			class="text-primary mb-2"
+			width="28"
+			height="20"
+			viewBox="0 0 28 20"
+			fill="currentColor"
+			aria-hidden="true"
+		>
+			<path d="M0 20V10C0 4.48 4.48 0 10 0v4c-3.31 0-6 2.69-6 6v10H0Zm16 0V10c0-5.52 4.48-10 10-10v4c-3.31 0-6 2.69-6 6v10h-4Z" />
+		</svg>
+		<blockquote class="text-base-content text-lg leading-relaxed">{quote}</blockquote>
+		<figcaption class="mt-4 flex items-center gap-3">
+			{avatarUrl && (
+				<div class="avatar">
+					<div class="w-10 rounded-full">
+						<img src={avatarUrl} alt={`${author} avatar`} width="40" height="40" loading="lazy" />
+					</div>
+				</div>
+			)}
+			<div class="flex flex-col">
+				<span class="font-semibold text-base-content">{author}</span>
+				{meta && <span class="text-sm text-base-content/60">{meta}</span>}
+			</div>
+		</figcaption>
+	</div>
+</figure>

package/src/components/ui/types.ts

@@ -0,0 +1,323 @@
+/**
+ * Public prop types for the Astro-rendered components of `@publier/ui`.
+ *
+ * These live in a separate `.ts` file (rather than inline in each `.astro`'s
+ * frontmatter) so the barrel `index.ts` can re-export them without relying
+ * on TypeScript's `.astro` module inference — which is only provided in
+ * Astro build contexts, not during our plain `tsc --noEmit` check. The
+ * inline `interface Props` in each `.astro` must stay in sync with these.
+ *
+ * Mirrors `packages/shell/src/components/types.ts`; see Phase 3b kickoff.
+ */
+
+// ---------------------------------------------------------------------------
+// Hero
+// ---------------------------------------------------------------------------
+
+export interface HeroProps {
+	/** Small, muted label rendered above the title. */
+	eyebrow?: string;
+	/** Main page title (rendered as `<h1>`). */
+	title: string;
+	/** Supporting copy below the title. */
+	subtitle?: string;
+	/** Primary button `{ label, href }`. */
+	primaryCta?: { label: string; href: string };
+	/** Secondary button `{ label, href }`. */
+	secondaryCta?: { label: string; href: string };
+	/** Horizontal alignment. Default: `'center'`. */
+	align?: 'center' | 'left';
+}
+
+// ---------------------------------------------------------------------------
+// CtaBand
+// ---------------------------------------------------------------------------
+
+export interface CtaBandProps {
+	/** Headline of the call-to-action band. */
+	title: string;
+	/** Supporting copy below the title. */
+	description?: string;
+	/** Primary button `{ label, href }`. */
+	primaryCta: { label: string; href: string };
+	/** Secondary button `{ label, href }`. */
+	secondaryCta?: { label: string; href: string };
+	/** `'primary'` (default) uses the brand color; `'muted'` uses the muted surface. */
+	variant?: 'primary' | 'muted';
+}
+
+// ---------------------------------------------------------------------------
+// TestimonialCard
+// ---------------------------------------------------------------------------
+
+export interface TestimonialCardProps {
+	/** The testimonial body. */
+	quote: string;
+	/** Author's full name. */
+	author: string;
+	/** Author's role / title. */
+	role?: string;
+	/** Optional company name. */
+	company?: string;
+	/** Optional avatar URL. */
+	avatarUrl?: string;
+}
+
+// ---------------------------------------------------------------------------
+// FeatureSection
+// ---------------------------------------------------------------------------
+
+export interface FeatureSectionProps {
+	/** ALLCAPS tag rendered above the title. */
+	eyebrow?: string;
+	/** Section heading (rendered as `<h2>`). */
+	title: string;
+	/** Supporting copy below the title. */
+	subtitle?: string;
+	/** Optional check-style feature list. */
+	bullets?: string[];
+	/** Optional inline call-to-action link. */
+	primaryCta?: { label: string; href: string };
+	/** When true, flips text ↔ visual columns. */
+	reverse?: boolean;
+	/** Extra class names on the outer `<section>`. */
+	class?: string;
+}
+
+// ---------------------------------------------------------------------------
+// FeatureGrid
+// ---------------------------------------------------------------------------
+
+/** A single feature card rendered inside `FeatureGrid`. */
+export interface FeatureGridItem {
+	/** Emoji, unicode glyph, or short icon label rendered above the title. */
+	icon?: string;
+	/** Feature title. */
+	title: string;
+	/** Short description paragraph. */
+	description: string;
+	/** Optional link made clickable via the card's overlay anchor. */
+	href?: string;
+}
+
+export interface FeatureGridProps {
+	items: FeatureGridItem[];
+	/** Number of columns on desktop. 2, 3 (default), or 4. */
+	columns?: 2 | 3 | 4;
+}
+
+// ---------------------------------------------------------------------------
+// LogoCloud
+// ---------------------------------------------------------------------------
+
+/** A single logo rendered by `LogoCloud`. */
+export interface LogoCloudItem {
+	name: string;
+	src: string;
+	/** Accessible alt text. Falls back to `name` if omitted. */
+	alt?: string;
+	/** Optional link wrapping the logo. */
+	href?: string;
+	/** Explicit intrinsic width in px. Defaults to `144` to avoid CLS. */
+	width?: number;
+	/** Explicit intrinsic height in px. Defaults to `40` to avoid CLS. */
+	height?: number;
+}
+
+export interface LogoCloudProps {
+	items: LogoCloudItem[];
+	/** Section title rendered above the grid. */
+	title?: string;
+	/** Supporting copy under the title. */
+	subtitle?: string;
+	/** Target columns on desktop. Default `5`. */
+	columns?: 3 | 4 | 5 | 6;
+}
+
+// ---------------------------------------------------------------------------
+// TeamGrid
+// ---------------------------------------------------------------------------
+
+/** A single team member rendered by `TeamGrid`. */
+export interface TeamGridMember {
+	name: string;
+	role: string;
+	bio?: string;
+	avatarUrl?: string;
+	socials?: { label: string; href: string }[];
+}
+
+export interface TeamGridProps {
+	members: TeamGridMember[];
+	columns?: 2 | 3 | 4;
+}
+
+// ---------------------------------------------------------------------------
+// PressGallery
+// ---------------------------------------------------------------------------
+
+/** A single press mention rendered by `PressGallery`. */
+export interface PressGalleryItem {
+	/** Publication name (e.g. "TechCrunch"). */
+	outlet: string;
+	/** Optional logo URL. If omitted, the outlet name is rendered as text. */
+	logoUrl?: string;
+	/** Optional quote / headline from the article. */
+	quote?: string;
+	/** Link to the source article. */
+	href: string;
+	/** ISO date (`YYYY-MM-DD`) of the article. */
+	date?: string;
+}
+
+export interface PressGalleryProps {
+	items: PressGalleryItem[];
+}
+
+// ---------------------------------------------------------------------------
+// Frame
+// ---------------------------------------------------------------------------
+
+export interface FrameProps {
+	caption?: string;
+	hint?: string;
+	video?: boolean;
+	src?: string;
+	autoPlay?: boolean;
+	loop?: boolean;
+	muted?: boolean;
+	poster?: string;
+}
+
+// ---------------------------------------------------------------------------
+// StatusIndicator
+// ---------------------------------------------------------------------------
+
+/** Semantic status level. Controls the dot color and aria labeling. */
+export type StatusLevel = 'operational' | 'degraded' | 'outage' | 'maintenance';
+
+export interface StatusIndicatorProps {
+	status: StatusLevel;
+	label?: string;
+	service?: string;
+}
+
+// ---------------------------------------------------------------------------
+// JobsList
+// ---------------------------------------------------------------------------
+
+/** A single job posting rendered by `JobsList`. */
+export interface JobsListItem {
+	title: string;
+	department: string;
+	location: string;
+	/** Employment type: `"Full-time"`, `"Contract"`, etc. */
+	type?: string;
+	/** Link to the job description. */
+	href: string;
+}
+
+export interface JobsListProps {
+	jobs: JobsListItem[];
+	/** Optional heading rendered above the list. */
+	heading?: string;
+	/** Message shown when `jobs` is empty. */
+	emptyMessage?: string;
+}
+
+// ---------------------------------------------------------------------------
+// ChangelogEntry
+// ---------------------------------------------------------------------------
+
+/** Semantic type of a changelog entry. Controls the colored badge. */
+export type ChangelogEntryType = 'feature' | 'fix' | 'breaking' | 'security' | 'deprecation';
+
+export interface ChangelogEntryProps {
+	date: string;
+	version?: string;
+	type?: ChangelogEntryType;
+	title: string;
+}
+
+// ---------------------------------------------------------------------------
+// PricingTable + PricingSection
+// ---------------------------------------------------------------------------
+
+/** A single pricing tier displayed by {@link PricingTable}. */
+export interface PricingTier {
+	name: string;
+	/** E.g. `"$19/mo"` or `"Free"`. */
+	price: string;
+	/** Short tagline rendered below the price. */
+	tagline?: string;
+	/** Bullet list of included features. */
+	features: string[];
+	/** Call-to-action button. */
+	cta: { label: string; href: string };
+	/** When true, highlights the tier as the featured plan. */
+	featured?: boolean;
+}
+
+export interface PricingTableProps {
+	tiers: PricingTier[];
+}
+
+export type BillingPeriod = 'monthly' | 'yearly';
+
+export interface PricingSectionProps {
+	title?: string;
+	subtitle?: string;
+	monthlyTiers: PricingTier[];
+	/** When omitted, the billing-period toggle is hidden. */
+	yearlyTiers?: PricingTier[];
+	/** Initial period. Defaults to `'monthly'`. */
+	defaultPeriod?: BillingPeriod;
+	/** Copy rendered next to the yearly option (e.g. `"Save 15%"`). */
+	yearlyDiscountLabel?: string;
+}
+
+// ---------------------------------------------------------------------------
+// PricingComparisonTable
+// ---------------------------------------------------------------------------
+
+/**
+ * A single cell value in the comparison table.
+ * - `true`  → check mark
+ * - `false` → em-dash
+ * - string  → rendered verbatim (e.g. `"Unlimited"`, `"250/mo"`)
+ */
+export type PricingCellValue = boolean | string;
+
+export interface PricingComparisonRow {
+	feature: string;
+	/** One value per tier, aligned index-wise with `PricingComparisonTableProps.tiers`. */
+	values: PricingCellValue[];
+}
+
+export interface PricingComparisonCategory {
+	title: string;
+	rows: PricingComparisonRow[];
+}
+
+export interface PricingComparisonTableProps {
+	/** Column headers — aligned index-wise with each row's `values`. */
+	tiers: string[];
+	categories: PricingComparisonCategory[];
+	/** When true (default), the header row is sticky during vertical scroll. */
+	stickyHeader?: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// BlurImage
+// ---------------------------------------------------------------------------
+
+export interface BlurImageProps {
+	src: string;
+	alt: string;
+	/** Intrinsic width in pixels (helps prevent CLS). */
+	width?: number;
+	/** Intrinsic height in pixels (helps prevent CLS). */
+	height?: number;
+	/** Additional CSS classes appended after `publier-blur-image`. */
+	class?: string;
+}

package/src/components/update-badge.astro

@@ -0,0 +1,15 @@
+---
+import { shellRenderUpdateBadge } from '@publier/native';
+
+export type UpdateBadgeType = 'new' | 'improved' | 'fixed' | 'deprecated' | 'breaking';
+
+interface Props {
+	type: UpdateBadgeType;
+	version?: string;
+	class?: string;
+}
+
+const { type, version, class: customClass } = Astro.props;
+const html = shellRenderUpdateBadge(JSON.stringify({ type, version, customClass }));
+---
+<Fragment set:html={html} />

package/src/components/version-switcher.astro

@@ -0,0 +1,20 @@
+---
+import { shellRenderVersionSwitcher } from '@publier/native';
+
+interface DocVersion {
+	label: string;
+	path: string;
+	badge?: 'stable' | 'beta' | 'deprecated' | 'legacy';
+	default?: boolean;
+}
+
+interface Props {
+	versions: DocVersion[];
+	currentPath?: string;
+}
+
+const { versions, currentPath } = Astro.props;
+const html = shellRenderVersionSwitcher(JSON.stringify({ versions, currentPath }));
+---
+
+<Fragment set:html={html} />