@hoardodile/ui 0.0.0

package/src/components/pagination.tsx

@@ -0,0 +1,139 @@
+import * as React from "react"
+
+import { cn } from "@hoardodile/ui/lib/utils"
+import { Button } from "@hoardodile/ui/components/button"
+import { AltArrowLeft } from "@hoardodile/ui/icons/registry"
+import { AltArrowRight } from "@hoardodile/ui/icons/registry"
+import { MenuDots } from "@hoardodile/ui/icons/registry"
+import { useTranslation } from "react-i18next"
+
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+  const { t } = useTranslation("ui", { useSuspense: false })
+  return (
+    <nav
+      role="navigation"
+      aria-label={t("pagination.region")}
+      data-slot="pagination"
+      className={cn("mx-auto flex w-full justify-center", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn("flex items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+  return <li data-slot="pagination-item" {...props} />
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
+  React.ComponentProps<"a">
+
+function PaginationLink({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) {
+  return (
+    <Button
+      variant={isActive ? "outline" : "ghost"}
+      size={size}
+      className={cn(className)}
+      nativeButton={false}
+      render={
+        <a
+          aria-current={isActive ? "page" : undefined}
+          data-slot="pagination-link"
+          data-active={isActive}
+          {...props}
+        />
+      }
+    />
+  )
+}
+
+function PaginationPrevious({
+  className,
+  text,
+  ...props
+}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+  const { t } = useTranslation("ui", { useSuspense: false })
+  return (
+    <PaginationLink
+      aria-label={t("pagination.previous")}
+      size="default"
+      className={cn("pl-2!", className)}
+      {...props}
+    >
+      <AltArrowLeft data-icon="inline-start" />
+      <span className="hidden sm:block">
+        {text ?? t("pagination.previous")}
+      </span>
+    </PaginationLink>
+  )
+}
+
+function PaginationNext({
+  className,
+  text,
+  ...props
+}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+  const { t } = useTranslation("ui", { useSuspense: false })
+  return (
+    <PaginationLink
+      aria-label={t("pagination.next")}
+      size="default"
+      className={cn("pr-2!", className)}
+      {...props}
+    >
+      <span className="hidden sm:block">{text ?? t("pagination.next")}</span>
+      <AltArrowRight data-icon="inline-end" />
+    </PaginationLink>
+  )
+}
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  const { t } = useTranslation("ui", { useSuspense: false })
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn(
+        "flex size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <MenuDots
+      />
+      <span className="sr-only">{t("pagination.morePages")}</span>
+    </span>
+  )
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+}

package/src/components/panel-toolbar.tsx

@@ -0,0 +1,99 @@
+import { Button } from "@hoardodile/ui/components/button"
+import { Icon } from "@hoardodile/ui/components/icon"
+import { Add } from "@hoardodile/ui/icons/actions"
+import { HamburgerMenu } from "@hoardodile/ui/icons/registry"
+import { useTranslation } from "react-i18next"
+import { ChipButton } from "./chip-button"
+import { SearchField } from "./search-field"
+
+export type PanelToolbarProps = {
+	readonly placeholder: string
+	readonly query: string
+	readonly onQuery: (query: string) => void
+	readonly reorder: boolean
+	readonly onToggleReorder: () => void
+	readonly unusedCount: number
+	readonly unusedOnly: boolean
+	readonly onToggleUnused: () => void
+	/** Add button — opens the shared create dialog. */
+	readonly onAdd: () => void
+	/** Add button label — defaults to the shared "Add" copy. */
+	readonly addLabel?: string
+	/** Unused chip label — defaults to the shared "Unused" copy. */
+	readonly unusedLabel?: string
+	/** Reorder chip label — defaults to the shared "Reorder" copy. */
+	readonly reorderLabel?: string
+	/** Forwarded to the filter field's `maxLength` (e.g. the query limit). */
+	readonly maxLength?: number
+	readonly testIds?: {
+		readonly filter?: string
+		readonly unused?: string
+		readonly reorder?: string
+		readonly add?: string
+	}
+}
+
+/**
+ * One toolbar per custom-page panel: filter left; triage, structure and
+ * add right. Unused and Reorder ride ChipButton — the Unused filter wears
+ * the dashed outline, Reorder quiet text, both latching the accent fill
+ * when on. The Unused chip only appears when there is something to clean.
+ */
+export function PanelToolbar(props: PanelToolbarProps) {
+	const {
+		placeholder,
+		query,
+		onQuery,
+		reorder,
+		onToggleReorder,
+		unusedCount,
+		unusedOnly,
+		onToggleUnused,
+		onAdd,
+		addLabel,
+		unusedLabel,
+		reorderLabel,
+		maxLength,
+		testIds,
+	} = props
+	const { t } = useTranslation("ui", { useSuspense: false })
+	const resolvedAddLabel = addLabel ?? t("panelToolbar.add")
+	const resolvedUnusedLabel = unusedLabel ?? t("panelToolbar.unused")
+	const resolvedReorderLabel = reorderLabel ?? t("panelToolbar.reorder")
+	return (
+		<div className="flex flex-wrap items-center justify-between gap-3">
+			<SearchField
+				value={query}
+				onCommit={onQuery}
+				placeholder={placeholder}
+				maxLength={maxLength}
+				className="w-60"
+				testId={testIds?.filter}
+			/>
+			<div className="flex shrink-0 flex-wrap items-center gap-2">
+				{unusedCount > 0 ? (
+					<ChipButton
+						dashed
+						active={unusedOnly}
+						onClick={onToggleUnused}
+						testId={testIds?.unused}
+					>
+						{resolvedUnusedLabel} · {unusedCount}
+					</ChipButton>
+				) : null}
+				<ChipButton
+					icon={HamburgerMenu}
+					active={reorder}
+					onClick={onToggleReorder}
+					testId={testIds?.reorder}
+				>
+					{resolvedReorderLabel}
+				</ChipButton>
+				<Button variant="secondary" onClick={onAdd} data-testid={testIds?.add}>
+					<Icon icon={Add} />
+					{resolvedAddLabel}
+				</Button>
+			</div>
+		</div>
+	)
+}

package/src/components/pill-tabs.test.tsx

@@ -0,0 +1,84 @@
+import { fireEvent, render, screen } from "@testing-library/react"
+import { describe, expect, it, vi } from "vitest"
+import { PillTabs, pillButtonClassName } from "./pill-tabs"
+
+describe("pillButtonClassName", () => {
+	it("uses the chip-sized pill", () => {
+		expect(pillButtonClassName(false)).toContain("h-chip px-3")
+	})
+
+	it("lifts the active pill to the card fill", () => {
+		// tailwind-merge reorders classes — assert tokens, not a sequence.
+		const active = pillButtonClassName(true)
+		expect(active).toContain("bg-card")
+		expect(active).toContain("font-medium")
+		expect(active).toContain("text-foreground")
+		expect(pillButtonClassName(false)).not.toContain("bg-card")
+	})
+})
+
+describe("PillTabs", () => {
+	const items = [
+		{ value: "a", label: "Alpha" },
+		{ value: "b", label: "Beta" },
+	]
+
+	it("renders the track with one button per item and the active state", () => {
+		render(<PillTabs value="b" items={items} />)
+		expect(screen.getByRole("button", { name: "Alpha" })).toBeInTheDocument()
+		const beta = screen.getByRole("button", { name: "Beta" })
+		expect(beta.className).toContain("bg-card")
+		expect(
+			screen.getByRole("button", { name: "Alpha" }).className,
+		).not.toContain("bg-card")
+	})
+
+	it("reports the picked value through onChange", () => {
+		const onChange = vi.fn()
+		render(<PillTabs value="a" items={items} onChange={onChange} />)
+		fireEvent.click(screen.getByRole("button", { name: "Beta" }))
+		expect(onChange).toHaveBeenCalledWith("b")
+	})
+
+	it("lets a render slot replace the button (Link-style items)", () => {
+		render(
+			<PillTabs
+				value="a"
+				items={[
+					{
+						value: "a",
+						label: "Alpha",
+						render: (active, className) => (
+							<a href="/stats" className={className} data-active={active}>
+								Alpha link
+							</a>
+						),
+					},
+				]}
+			/>,
+		)
+		const link = screen.getByRole("link", { name: "Alpha link" })
+		expect(link.getAttribute("data-active")).toBe("true")
+		expect(link.className).toContain("bg-card")
+	})
+
+	it("announces the active pill via aria-pressed when requested", () => {
+		render(
+			<PillTabs
+				value="a"
+				items={items.map((item) => ({
+					...item,
+					ariaPressed: item.value === "a",
+				}))}
+			/>,
+		)
+		expect(screen.getByRole("button", { name: "Alpha" })).toHaveAttribute(
+			"aria-pressed",
+			"true",
+		)
+		expect(screen.getByRole("button", { name: "Beta" })).toHaveAttribute(
+			"aria-pressed",
+			"false",
+		)
+	})
+})

package/src/components/pill-tabs.tsx

@@ -0,0 +1,77 @@
+import { cn } from "@hoardodile/ui/lib/utils"
+import type { ReactNode } from "react"
+
+export type PillTabItem<T extends string> = {
+	readonly value: T
+	readonly label: ReactNode
+	readonly testId?: string
+	/** Toggle-state announcement for the settings variants; plain buttons
+	    render without it. */
+	readonly ariaPressed?: boolean
+	/** Screen-reader name when the label alone is not descriptive. */
+	readonly ariaLabel?: string
+	/** Layout overrides for the pill (e.g. the relationship-kind grid). */
+	readonly className?: string
+	/** Replaces the button element entirely (e.g. a Link) — receives the
+	    active state and the pill classes to apply. */
+	readonly render?: (active: boolean, className: string) => ReactNode
+}
+
+export type PillTabsProps<T extends string> = {
+	readonly value: T
+	readonly items: readonly PillTabItem<T>[]
+	readonly onChange?: (value: T) => void
+	readonly className?: string
+	/** Disables every pill (e.g. while a sibling control takes over). */
+	readonly disabled?: boolean
+}
+
+export function pillButtonClassName(active: boolean): string {
+	return cn(
+		"inline-flex cursor-pointer font-medium appearance-none items-center rounded-md border-0 text-xs h-chip px-3 disabled:pointer-events-none disabled:opacity-50",
+		active
+			? "bg-card text-foreground"
+			: "bg-transparent text-muted-foreground hover:text-secondary-foreground",
+	)
+}
+
+/** Segmented pill tab group: a muted track whose active pill lifts to
+    the card fill. Shared by the stats Time/Views toggle, the settings
+    segmented controls, and the filter-bar toggles. */
+export function PillTabs<T extends string>(props: PillTabsProps<T>) {
+	const { value, items, onChange, className, disabled } = props
+	return (
+		<span
+			className={cn(
+				"inline-flex shrink-0 items-center gap-0.5 rounded-lg bg-muted p-0.5",
+				className,
+			)}
+		>
+			{items.map((item) => {
+				const active = item.value === value
+				const buttonClassName = pillButtonClassName(active)
+				if (item.render !== undefined) {
+					return (
+						<span key={item.value} data-testid={item.testId}>
+							{item.render(active, buttonClassName)}
+						</span>
+					)
+				}
+				return (
+					<button
+						key={item.value}
+						type="button"
+						aria-pressed={item.ariaPressed}
+						aria-label={item.ariaLabel}
+						data-testid={item.testId}
+						disabled={disabled}
+						onClick={() => onChange?.(item.value)}
+						className={cn(buttonClassName, item.className)}
+					>
+						{item.label}
+					</button>
+				)
+			})}
+		</span>
+	)
+}

package/src/components/plugin-download-consent.test.tsx

@@ -0,0 +1,90 @@
+import { cleanup, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { afterEach, describe, expect, it, vi } from "vitest"
+import { renderWithI18n, testI18n } from "../test/i18n"
+import {
+	PluginDownloadConsentDialog,
+	type PluginConsentTicket,
+} from "./plugin-download-consent"
+
+const TICKET: PluginConsentTicket = {
+	ticketId: "t-1",
+	pluginId: "p-1",
+	pluginName: "Gallery",
+	url: "https://example.com/runtime/live2d.min.js?x=1",
+	dest: "runtime/live2d.min.js",
+	sizeBytes: 2048,
+	reason: "live2d runtime",
+}
+
+afterEach(() => {
+	cleanup()
+	void testI18n.changeLanguage("en")
+})
+
+function renderDialog(
+	overrides: Partial<Parameters<typeof PluginDownloadConsentDialog>[0]> = {},
+) {
+	const onDeny = vi.fn()
+	const onAllow = vi.fn()
+	renderWithI18n(
+		<PluginDownloadConsentDialog
+			entry={TICKET}
+			onDeny={onDeny}
+			onAllow={onAllow}
+			formatBytes={(n) => `${n} B`}
+			{...overrides}
+		/>,
+	)
+	return { onDeny, onAllow }
+}
+
+describe("PluginDownloadConsentDialog", () => {
+	it("shows the URL verbatim, destination and plugin reason", async () => {
+		renderDialog()
+		// Base UI mounts the dialog portal on effects; wait for the first
+		// assertion instead of querying the pre-mount tree.
+		expect(await screen.findByTestId("plugin-download-url")).toHaveTextContent(
+			"https://example.com/runtime/live2d.min.js?x=1",
+		)
+		expect(screen.getByTestId("plugin-download-dest")).toHaveTextContent(
+			"runtime/live2d.min.js",
+		)
+		expect(screen.getByText("live2d runtime")).toBeInTheDocument()
+		expect(screen.getByText(/2048 B/)).toBeInTheDocument()
+		expect(screen.getByTestId("plugin-download-deny")).toHaveTextContent("Deny")
+		expect(screen.getByTestId("plugin-download-allow")).toHaveTextContent("Allow")
+	})
+
+	it("Deny reports the ticket id", async () => {
+		const { onDeny } = renderDialog()
+		await userEvent.click(screen.getByTestId("plugin-download-deny"))
+		expect(onDeny).toHaveBeenCalledWith("t-1")
+	})
+
+	it("Allow reports the ticket id with the remember flag", async () => {
+		const { onAllow } = renderDialog()
+		await userEvent.click(screen.getByTestId("plugin-download-allow"))
+		expect(onAllow).toHaveBeenCalledWith("t-1", false)
+		await userEvent.click(screen.getByRole("checkbox"))
+		await userEvent.click(screen.getByTestId("plugin-download-allow"))
+		expect(onAllow).toHaveBeenLastCalledWith("t-1", true)
+	})
+
+	it("renders nothing actionable when no ticket is queued", () => {
+		renderDialog({ entry: null })
+		expect(
+			screen.queryByTestId("plugin-download-allow"),
+		).not.toBeInTheDocument()
+	})
+
+	it("follows the host language via the ui catalog", async () => {
+		await testI18n.changeLanguage("zh")
+		renderDialog()
+		// Base UI mounts the dialog portal on effects; wait for the first
+		// assertion instead of querying the pre-mount tree.
+		expect(
+			await screen.findByRole("button", { name: "允许" }),
+		).toBeInTheDocument()
+	})
+})

package/src/components/plugin-download-consent.tsx

@@ -0,0 +1,183 @@
+import { Button } from "./button.tsx"
+import { Checkbox } from "./checkbox.tsx"
+import { AppDialog } from "./app-dialog.tsx"
+import { useEffect, useState } from "react"
+import { useTranslation } from "react-i18next"
+
+/**
+ * The shared plugin asset-download consent dialog — host chrome used by
+ * both host surfaces (the app and the workbench) so the user sees one
+ * dialog with one contract wherever a plugin asks to download.
+ *
+ * Presentational by design: the queue lives in the host's consent store
+ * (`@hoardodile/host-web`), this component renders exactly one ticket
+ * and reports the decision through callbacks. Copy comes from the shared
+ * `ui` catalog namespace (`pluginDownload.*`), so every React surface
+ * renders the same localized strings; nothing here imports anything
+ * outside `@hoardodile/ui` + `@hoardodile/i18n`, keeping the SDK closure
+ * intact.
+ */
+
+/**
+ * A queued consent ticket, structurally identical to the server's
+ * `pluginDownloadRequested` SSE event minus its `type` discriminator
+ * (and to `@hoardodile/host-web`'s consent-store entry). Declared here
+ * instead of imported so this package stays closure-clean.
+ */
+export type PluginConsentTicket = {
+	readonly ticketId: string
+	readonly pluginId: string
+	readonly pluginName: string
+	readonly url: string
+	readonly dest: string
+	readonly sizeBytes?: number
+	readonly reason?: string
+}
+
+export type PluginDownloadConsentDialogProps = {
+	/** Ticket to show; `null` hides the dialog (one at a time). */
+	readonly entry: PluginConsentTicket | null
+	/** Decision callbacks — the host wires them to its own decide path. */
+	readonly onDeny: (ticketId: string) => void
+	readonly onAllow: (ticketId: string, remember: boolean) => void
+	/** Byte formatter; defaults to `"<n> B"`. */
+	readonly formatBytes?: (bytes: number) => string
+}
+
+/**
+ * Renders the shared consent question: URL verbatim (selectable
+ * monospace, never a link), the vault-relative destination and the
+ * plugin's stated reason, with Allow / Deny and a session-remember
+ * checkbox.
+ *
+ * Design contract (hd-plugin-design): card + hairline + `--radius-2xl`
+ * + `--shadow-dialog`, footer parted by an inset hairline, focus on the
+ * dialog container; the danger stays in copy and actions, never in color.
+ */
+export function PluginDownloadConsentDialog(
+	props: PluginDownloadConsentDialogProps,
+) {
+	const { entry, onDeny, onAllow } = props
+	const { t } = useTranslation("ui", { useSuspense: false })
+	const formatBytes = props.formatBytes ?? ((bytes: number) => `${bytes} B`)
+	const activeId = entry === null ? null : entry.ticketId
+	const [remember, setRemember] = useState(false)
+
+	// A fresh ticket starts with "remember" unchecked — the choice must
+	// never leak from one download to the next.
+	useEffect(() => {
+		setRemember(false)
+	}, [activeId])
+
+	return (
+		<AppDialog
+			open={entry !== null}
+			onOpenChange={(open) => {
+				if (!open && activeId !== null) onDeny(activeId)
+			}}
+			title={t("pluginDownload.title", undefined)}
+			eyebrow={t("pluginDownload.eyebrow", undefined)}
+			description={
+				entry === null
+					? undefined
+					: t("pluginDownload.description", {
+							pluginName: entry.pluginName,
+						})
+			}
+			size="md"
+			contentTestId="plugin-download-consent"
+			footer={
+				<div className="flex w-full items-center justify-between">
+					<Button
+						variant="outline"
+						size="sm"
+						disabled={activeId === null}
+						onClick={() => activeId !== null && onDeny(activeId)}
+						data-testid="plugin-download-deny"
+					>
+						{t("pluginDownload.deny", undefined)}
+					</Button>
+					<Button
+						size="sm"
+						disabled={activeId === null}
+						onClick={() =>
+							activeId !== null && onAllow(activeId, remember)
+						}
+						data-testid="plugin-download-allow"
+					>
+						{t("pluginDownload.allow", undefined)}
+					</Button>
+				</div>
+			}
+		>
+			{entry === null ? null : (
+				<ConsentBody
+					entry={entry}
+					remember={remember}
+					onRememberChange={setRemember}
+					formatBytes={formatBytes}
+				/>
+			)}
+		</AppDialog>
+	)
+}
+
+function ConsentBody(props: {
+	readonly entry: PluginConsentTicket
+	readonly remember: boolean
+	readonly onRememberChange: (value: boolean) => void
+	readonly formatBytes: (bytes: number) => string
+}) {
+	const { entry, remember, onRememberChange, formatBytes } = props
+	const { t } = useTranslation("ui", { useSuspense: false })
+	return (
+		<div className="flex flex-col gap-4">
+			<div className="flex flex-col gap-1.5">
+				<span className="text-xs tracking-label text-muted-foreground uppercase">
+					{t("pluginDownload.urlLabel", undefined)}
+				</span>
+				<code
+					className="rounded-sm bg-muted px-2 py-1.5 text-xs text-secondary-foreground break-all select-all"
+					data-testid="plugin-download-url"
+				>
+					{entry.url}
+				</code>
+			</div>
+			<div className="flex flex-col gap-1.5">
+				<span className="text-xs tracking-label text-muted-foreground uppercase">
+					{t("pluginDownload.destLabel", undefined)}
+				</span>
+				<code
+					className="text-xs text-secondary-foreground break-all select-all"
+					data-testid="plugin-download-dest"
+				>
+					{entry.dest}
+				</code>
+			</div>
+			<div className="text-xs text-muted-foreground">
+				{t("pluginDownload.sizeLabel", undefined)}:{" "}
+				{entry.sizeBytes === undefined
+					? t("pluginDownload.unknownSize", undefined)
+					: formatBytes(entry.sizeBytes)}
+			</div>
+			{entry.reason !== undefined && entry.reason.length > 0 ? (
+				<p className="text-xs text-secondary-foreground italic">
+					{entry.reason}
+				</p>
+			) : null}
+			<div className="flex items-center gap-2 border-t pt-3">
+				<Checkbox
+					checked={remember}
+					onCheckedChange={(checked) => onRememberChange(checked === true)}
+					id="plugin-download-remember"
+				/>
+				<label
+					htmlFor="plugin-download-remember"
+					className="text-xs text-secondary-foreground select-none"
+				>
+					{t("pluginDownload.remember", undefined)}
+				</label>
+			</div>
+		</div>
+	)
+}