@publier/shell 2.1.1

package/src/components/LastModified.astro

@@ -0,0 +1,25 @@
+---
+import { shellRenderLastModified } from '@publier/native';
+
+interface Props {
+	date: Date | string | null | undefined;
+	format?: 'relative' | 'absolute';
+}
+
+const { date, format = 'relative' } = Astro.props;
+
+const parsed: Date | null = date
+	? date instanceof Date
+		? Number.isNaN(date.getTime())
+			? null
+			: date
+		: (() => {
+				const d = new Date(date);
+				return Number.isNaN(d.getTime()) ? null : d;
+			})()
+	: null;
+
+const html = shellRenderLastModified(parsed ? parsed.getTime() : null, Date.now(), format);
+---
+
+<Fragment set:html={html} />

package/src/components/announcement-banner.astro

@@ -0,0 +1,25 @@
+---
+import { shellRenderAnnouncementBanner } from '@publier/native';
+
+export type AnnouncementBannerVariant = 'info' | 'warning' | 'success';
+
+interface Props {
+	message: string;
+	href?: string;
+	variant?: AnnouncementBannerVariant;
+	dismissible?: boolean;
+	storageKey?: string;
+}
+
+const {
+	message,
+	href,
+	variant = 'info',
+	dismissible = true,
+	storageKey = 'publier-banner-dismissed',
+} = Astro.props;
+
+const html = shellRenderAnnouncementBanner(message, href ?? null, variant, dismissible, storageKey);
+---
+
+<Fragment set:html={html} />

package/src/components/aside.astro

@@ -0,0 +1,17 @@
+---
+import { shellRenderAside } from '@publier/native';
+
+export type AsideType = 'note' | 'tip' | 'caution' | 'danger';
+
+interface Props {
+	type?: AsideType;
+	title?: string;
+}
+
+const { type = 'note', title } = Astro.props;
+const titleId = `publier-aside-${Math.random().toString(36).slice(2, 10)}`;
+const slotHtml = await Astro.slots.render('default');
+const html = shellRenderAside(type, title ?? null, slotHtml, titleId);
+---
+
+<Fragment set:html={html} />

package/src/components/ask-ai.tsx

@@ -0,0 +1,146 @@
+import { $, component$, useOnDocument, useSignal, useVisibleTask$ } from '@qwik.dev/core';
+import { MessageCircle, Send, Sparkles, X } from '../icons/index';
+
+export const AskAi = component$(() => {
+	const open = useSignal(false);
+	const input = useSignal('');
+	const textareaRef = useSignal<HTMLTextAreaElement>();
+
+	
+	useOnDocument(
+		'keydown',
+		$((e: Event) => {
+			const ke = e as KeyboardEvent;
+			if ((ke.metaKey || ke.ctrlKey) && ke.key === '/') {
+				ke.preventDefault();
+				open.value = !open.value;
+			}
+			if (ke.key === 'Escape' && open.value) {
+				open.value = false;
+			}
+		}),
+	);
+
+	
+	useOnDocument(
+		'publier:ai-toggle',
+		$(() => {
+			open.value = !open.value;
+		}),
+	);
+
+	
+	
+	// biome-ignore lint/correctness/noQwikUseVisibleTask: focusing a dialog input after it mounts requires DOM access.
+	useVisibleTask$(({ track }) => {
+		track(() => open.value);
+		if (open.value) {
+			textareaRef.value?.focus();
+		}
+	});
+
+	return (
+		<>
+			{}
+			<button
+				type="button"
+				class={[
+					'fixed bottom-4 right-4 z-50 inline-flex items-center gap-2 rounded-full border border-border bg-background px-4 py-2.5 text-sm font-medium text-foreground shadow-lg transition-all hover:bg-accent',
+					open.value ? 'translate-y-10 opacity-0 pointer-events-none' : '',
+				].join(' ')}
+				onClick$={() => {
+					open.value = true;
+				}}
+				aria-label="Ask AI"
+			>
+				<MessageCircle width={16} height={16} />
+				<span>Ask AI</span>
+			</button>
+
+			{}
+			{open.value && (
+				<>
+					{}
+					<div
+						class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm lg:hidden"
+						onClick$={() => {
+							open.value = false;
+						}}
+					/>
+
+					{}
+					<div
+						role="dialog"
+						aria-modal="true"
+						aria-label="Ask AI"
+						class="fixed inset-x-2 top-4 z-50 flex flex-col rounded-2xl border border-border bg-background shadow-2xl lg:inset-x-auto lg:inset-y-2 lg:right-2 lg:w-[460px] lg:rounded-xl"
+					>
+						{}
+						<div class="flex items-center justify-between border-b border-border px-4 py-3">
+							<div class="flex items-center gap-2">
+								<Sparkles width={16} height={16} class="text-primary" />
+								<span class="text-sm font-medium">Ask AI</span>
+							</div>
+							<button
+								type="button"
+								class="rounded-md p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+								onClick$={() => {
+									open.value = false;
+								}}
+								aria-label="Close"
+							>
+								<X width={16} height={16} />
+							</button>
+						</div>
+
+						{}
+						<div class="flex-1 overflow-y-auto px-4 py-6">
+							<div class="flex flex-col items-center justify-center gap-3 text-center text-muted-foreground">
+								<div class="flex size-12 items-center justify-center rounded-full bg-accent">
+									<Sparkles width={24} height={24} class="text-primary" />
+								</div>
+								<p class="text-sm font-medium text-foreground">How can I help you?</p>
+								<p class="text-xs">Ask a question about the documentation.</p>
+								<p class="mt-4 text-xs">AI integration coming soon.</p>
+							</div>
+						</div>
+
+						{}
+						<div class="border-t border-border p-3">
+							<div class="flex items-end gap-2">
+								<textarea
+									ref={textareaRef}
+									class="max-h-32 min-h-[40px] flex-1 resize-none rounded-lg border border-border bg-muted/40 px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none"
+									placeholder="Ask a question..."
+									rows={1}
+									value={input.value}
+									onInput$={(_, el) => {
+										input.value = el.value;
+									}}
+								/>
+								<button
+									type="button"
+									class="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50"
+									disabled={!input.value.trim()}
+									aria-label="Send"
+								>
+									<Send width={16} height={16} />
+								</button>
+							</div>
+							<div class="mt-2 flex items-center justify-between text-[10px] text-muted-foreground">
+								<span>
+									Press{' '}
+									<kbd class="rounded border border-border bg-background px-1 py-0.5 font-mono">
+										⌘/
+									</kbd>{' '}
+									to toggle
+								</span>
+								<span>Powered by Publier AI</span>
+							</div>
+						</div>
+					</div>
+				</>
+			)}
+		</>
+	);
+});

package/src/components/badge.astro

@@ -0,0 +1,18 @@
+---
+import { shellRenderBadge } from '@publier/native';
+
+export type BadgeVariant = 'default' | 'note' | 'tip' | 'caution' | 'danger' | 'success';
+export type BadgeSize = 'small' | 'medium' | 'large';
+
+interface Props {
+	text: string;
+	variant?: BadgeVariant;
+	size?: BadgeSize;
+	class?: string;
+}
+
+const { text, variant = 'default', size = 'medium', class: customClass } = Astro.props;
+const html = shellRenderBadge(text, variant, size, customClass ?? null);
+---
+
+<Fragment set:html={html} />

package/src/components/breadcrumbs.astro

@@ -0,0 +1,23 @@
+---
+import { shellRenderBreadcrumbs } from '@publier/native';
+
+export interface BreadcrumbItem {
+	label: string;
+	href?: string;
+}
+
+interface Props {
+	items: BreadcrumbItem[];
+	label?: string;
+	class?: string;
+}
+
+const { items, label, class: customClass } = Astro.props;
+const html = shellRenderBreadcrumbs(
+	JSON.stringify(Array.isArray(items) ? items : []),
+	label ?? null,
+	customClass ?? null,
+);
+---
+
+<Fragment set:html={html} />

package/src/components/callouts/caution.astro

@@ -0,0 +1,13 @@
+---
+import Aside from '../aside.astro';
+
+interface Props {
+	title?: string;
+}
+
+const { title } = Astro.props;
+---
+
+<Aside type="caution" title={title}>
+	<slot />
+</Aside>

package/src/components/callouts/check.astro

@@ -0,0 +1,13 @@
+---
+import Aside from '../aside.astro';
+
+interface Props {
+	title?: string;
+}
+
+const { title } = Astro.props;
+---
+
+<Aside type="tip" title={title ?? 'Check'}>
+	<slot />
+</Aside>

package/src/components/callouts/danger.astro

@@ -0,0 +1,13 @@
+---
+import Aside from '../aside.astro';
+
+interface Props {
+	title?: string;
+}
+
+const { title } = Astro.props;
+---
+
+<Aside type="danger" title={title}>
+	<slot />
+</Aside>

package/src/components/callouts/info.astro

@@ -0,0 +1,13 @@
+---
+import Aside from '../aside.astro';
+
+interface Props {
+	title?: string;
+}
+
+const { title } = Astro.props;
+---
+
+<Aside type="note" title={title ?? 'Info'}>
+	<slot />
+</Aside>

package/src/components/callouts/note.astro

@@ -0,0 +1,13 @@
+---
+import Aside from '../aside.astro';
+
+interface Props {
+	title?: string;
+}
+
+const { title } = Astro.props;
+---
+
+<Aside type="note" title={title}>
+	<slot />
+</Aside>

package/src/components/callouts/tip.astro

@@ -0,0 +1,13 @@
+---
+import Aside from '../aside.astro';
+
+interface Props {
+	title?: string;
+}
+
+const { title } = Astro.props;
+---
+
+<Aside type="tip" title={title}>
+	<slot />
+</Aside>

package/src/components/callouts/warning.astro

@@ -0,0 +1,13 @@
+---
+import Aside from '../aside.astro';
+
+interface Props {
+	title?: string;
+}
+
+const { title } = Astro.props;
+---
+
+<Aside type="caution" title={title ?? 'Warning'}>
+	<slot />
+</Aside>

package/src/components/card-grid.astro

@@ -0,0 +1,14 @@
+---
+import { shellRenderCardGrid } from '@publier/native';
+
+interface Props {
+	minColumnWidth?: string;
+	class?: string;
+}
+
+const { minColumnWidth = '15rem', class: customClass } = Astro.props;
+const slotHtml = await Astro.slots.render('default');
+const html = shellRenderCardGrid(minColumnWidth, customClass ?? null, slotHtml);
+---
+
+<Fragment set:html={html} />

package/src/components/card.astro

@@ -0,0 +1,18 @@
+---
+import { shellRenderCard } from '@publier/native';
+
+export type CardVariant = 'default' | 'note' | 'tip' | 'danger' | 'success';
+
+interface Props {
+	title: string;
+	variant?: CardVariant;
+	class?: string;
+}
+
+const { title, variant = 'default', class: customClass } = Astro.props;
+const iconSlot = Astro.slots.has('icon') ? await Astro.slots.render('icon') : null;
+const slotHtml = await Astro.slots.render('default');
+const html = shellRenderCard(title, variant, customClass ?? null, iconSlot, slotHtml);
+---
+
+<Fragment set:html={html} />

package/src/components/code-group.astro

@@ -0,0 +1,55 @@
+---
+import { Code } from 'astro-expressive-code/components';
+
+export interface CodeGroupItem {
+	label: string;
+	code: string;
+	lang?: string;
+	filename?: string;
+}
+
+interface Props {
+	items: CodeGroupItem[];
+	syncKey?: string;
+}
+
+const { items, syncKey } = Astro.props;
+const id = `publier-cg-${Math.random().toString(36).slice(2, 10)}`;
+---
+
+<tab-container
+	class="not-prose my-4 rounded-box overflow-hidden border border-base-300 bg-base-200"
+	data-publier-cg
+	data-sync-key={syncKey}
+>
+	<div role="tablist" class="tabs tabs-border px-2">
+		{items.map((item, i) => (
+			<button
+				type="button"
+				role="tab"
+				id={`${id}-tab-${i}`}
+				aria-controls={`${id}-panel-${i}`}
+				aria-selected={i === 0 ? 'true' : 'false'}
+				tabindex={i === 0 ? 0 : -1}
+				class="tab font-mono"
+				data-tab-label={item.label}
+			>
+				{item.label}
+			</button>
+		))}
+	</div>
+	{items.map((item, i) => (
+		<div
+			id={`${id}-panel-${i}`}
+			role="tabpanel"
+			aria-labelledby={`${id}-tab-${i}`}
+			hidden={i !== 0}
+		>
+			<Code
+				code={item.code}
+				lang={item.lang ?? 'plaintext'}
+				title={item.filename}
+			/>
+		</div>
+	))}
+</tab-container>

package/src/components/columns.astro

@@ -0,0 +1,18 @@
+---
+import { shellRenderColumns } from '@publier/native';
+
+export type ColumnCount = 2 | 3 | 4;
+export type ColumnGap = 'sm' | 'md' | 'lg';
+
+interface Props {
+	cols?: ColumnCount;
+	gap?: ColumnGap;
+	class?: string;
+}
+
+const { cols = 2, gap = 'md', class: customClass } = Astro.props;
+const slotHtml = await Astro.slots.render('default');
+const html = shellRenderColumns(cols, gap, customClass ?? null, slotHtml);
+---
+
+<Fragment set:html={html} />

package/src/components/docs-layout.astro

@@ -0,0 +1,25 @@
+---
+import { shellRenderDocsLayout } from '@publier/native';
+
+interface BreadcrumbItem { label: string; href?: string }
+interface Props {
+	class?: string;
+	breadcrumbs?: BreadcrumbItem[];
+	lastModified?: Date | string | null;
+	sidebarPersistKey?: string;
+}
+
+const { class: customClass, breadcrumbs, lastModified, sidebarPersistKey } = Astro.props;
+const parsed = lastModified instanceof Date ? lastModified : lastModified ? new Date(lastModified) : null;
+const lastModifiedMs = parsed && !Number.isNaN(parsed.getTime()) ? parsed.getTime() : null;
+const [headerHtml, sidebarHtml, tocHtml, footerHtml, defaultHtml] = await Promise.all([
+	Astro.slots.render('header'), Astro.slots.render('sidebar'), Astro.slots.render('toc'),
+	Astro.slots.render('footer'), Astro.slots.render('default'),
+]);
+const html = shellRenderDocsLayout(JSON.stringify({
+	customClass, breadcrumbs: Array.isArray(breadcrumbs) ? breadcrumbs : [],
+	sidebarPersistKey, headerHtml, sidebarHtml, tocHtml, footerHtml, defaultHtml,
+	lastModifiedMs, nowMs: Date.now(),
+}));
+---
+<Fragment set:html={html} />

package/src/components/file-tree-node.astro

@@ -0,0 +1,13 @@
+---
+import { shellRenderFileTreeNode } from '@publier/native';
+import type { FileTreeEntry } from './types.ts';
+
+interface Props {
+	entry: FileTreeEntry;
+}
+
+const { entry } = Astro.props as Props;
+const html = shellRenderFileTreeNode(JSON.stringify(entry));
+---
+
+<Fragment set:html={html} />

package/src/components/file-tree.astro

@@ -0,0 +1,9 @@
+---
+import { shellRenderFileTree } from '@publier/native';
+import type { FileTreeProps } from './types.ts';
+
+const { tree, label = 'File tree', class: customClass } = Astro.props as FileTreeProps;
+const html = shellRenderFileTree(JSON.stringify(tree), label, customClass ?? null);
+---
+
+<Fragment set:html={html} />

package/src/components/icon.astro

@@ -0,0 +1,18 @@
+---
+import { shellRenderIcon } from '@publier/native';
+import { getIconDef } from '../icons/index';
+
+interface Props {
+	name: string;
+	size?: number;
+	class?: string;
+}
+
+const { name, size = 16, class: customClass } = Astro.props;
+const def = getIconDef(name);
+const html = def
+	? shellRenderIcon(def.path, def.fill ?? false, def.viewBox ?? null, def.strokeWidth ?? null, size, customClass ?? null)
+	: '';
+---
+
+<Fragment set:html={html} />