@mohou/ui 1.0.20

package/src/blocks/stat-card.tsx

@@ -0,0 +1,50 @@
+import type { ReactNode } from 'react'
+
+import { Card, CardContent, CardHeader, CardTitle } from '@mohou/ui/components/card'
+import { cn } from '@mohou/ui/lib/utils'
+
+export type StatCardProps = {
+  title: string
+  value: ReactNode
+  delta?: string | undefined
+  trend?: 'up' | 'down' | 'flat' | undefined
+  children?: ReactNode | undefined
+}
+
+/**
+ * KPI card: title, value, optional delta/trend.
+ * @when Dashboard metric strip
+ * @example
+ * <StatCard title="Pass rate" value="98%" delta="+1.2%" trend="up" />
+ * @family Chart & data
+ */
+export function StatCard({ title, value, delta, trend = 'flat', children }: StatCardProps) {
+  return (
+    <Card data-testid="stat-card">
+      <CardHeader>
+        <CardTitle className="text-muted-foreground text-sm font-normal">
+          {title}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-2">
+        <div className="text-2xl font-medium" data-testid="stat-card-value">
+          {value}
+        </div>
+        {delta ? (
+          <div
+            data-testid="stat-card-delta"
+            className={cn(
+              'text-xs',
+              trend === 'up' && 'text-emerald-600',
+              trend === 'down' && 'text-destructive',
+              trend === 'flat' && 'text-muted-foreground'
+            )}
+          >
+            {delta}
+          </div>
+        ) : null}
+        {children}
+      </CardContent>
+    </Card>
+  )
+}

package/src/blocks/status-badge.tsx

@@ -0,0 +1,40 @@
+import { Badge } from '@mohou/ui/components/badge'
+import { cn } from '@mohou/ui/lib/utils'
+
+export const statusTone = {
+  pass: 'border-transparent bg-emerald-600/15 text-emerald-700 dark:text-emerald-400',
+  fail: 'border-transparent bg-destructive/15 text-destructive',
+  blocked: 'border-transparent bg-amber-500/15 text-amber-700 dark:text-amber-400',
+  flaky: 'border-transparent bg-orange-500/15 text-orange-700 dark:text-orange-400',
+  running: 'border-transparent bg-sky-500/15 text-sky-700 dark:text-sky-400',
+  pending: 'border-transparent bg-muted text-muted-foreground',
+} as const
+
+export type StatusKey = keyof typeof statusTone
+
+/**
+ * Toned badge for run/test status.
+ * @when pass | fail | blocked | flaky | running | pending cells and chips
+ * @example
+ * <StatusBadge status="pass" />
+ * @family Feedback & status
+ */
+export function StatusBadge({
+  status,
+  className,
+}: {
+  status: StatusKey | string
+  className?: string
+}) {
+  const tone = statusTone[status as StatusKey] ?? statusTone.pending
+  return (
+    <Badge
+      variant="outline"
+      data-testid="status-badge"
+      data-status={status}
+      className={cn('capitalize', tone, className)}
+    >
+      {status}
+    </Badge>
+  )
+}

package/src/blocks/table-page.tsx

@@ -0,0 +1,82 @@
+
+import type { ReactNode } from 'react';
+
+import { cn } from '@mohou/ui/lib/utils';
+
+export type TablePageProps = {
+  /** Page-level actions above the table: search, filters, "New". Pinned; it never scrolls away. */
+  toolbar?: ReactNode
+  /** The table itself (a `DataGrid`, usually). The only slot that scrolls. */
+  grid?: ReactNode
+  /** First-run / no-match placeholder. Renders when `grid` is not given. */
+  empty?: ReactNode
+  /** A pager you own. `DataGrid` already renders its own when `features.pagination` is on. */
+  pagination?: ReactNode
+  /** Bulk actions. Floats over the bottom of the grid instead of pushing the rows around. */
+  bulk?: ReactNode
+  className?: string
+}
+
+/**
+ * Full-height table page: toolbar pinned, one scrolling band for the grid, bulk bar floating.
+ *
+ * Without it a `DataGrid` is dropped into a plain flex column, the tallest child wins, and the
+ * page scrolls instead of the table: the toolbar slides off, pagination ends up below the fold,
+ * and selecting 200 rows shoves the table down every time the bulk bar appears. The band owns
+ * `min-h-0` + `overflow-y-auto` here, and the bulk bar is out of flow with `pointer-events-none`
+ * on its track so the rows under it stay clickable.
+ *
+ * @when Page shape: one wide filterable table is the product — inventories, ledgers, saved views
+ * @example
+ * <TablePage
+ *   toolbar={<FilterBar {...{ query, onQueryChange, filters }} />}
+ *   grid={rows.length ? <DataGrid columns={columns} data={rows} /> : undefined}
+ *   empty={<FirstRun onImport={import} />}
+ *   bulk={selected.size ? <BulkBar count={selected.size} onClear={clear} /> : undefined}
+ * />
+ * @family Layout & structure
+ */
+export function TablePage({
+  toolbar,
+  grid,
+  empty,
+  pagination,
+  bulk,
+  className,
+}: TablePageProps) {
+  return (
+    <div
+      className={cn('relative flex h-full min-h-0 w-full flex-col', className)}
+      data-testid="table-page"
+    >
+      {toolbar ? (
+        <div className="shrink-0" data-testid="table-page-toolbar">
+          {toolbar}
+        </div>
+      ) : null}
+
+      {/* The one scroller. `grid ?? empty` keeps "no rows" the app's decision, not a prop. */}
+      <div
+        className="min-h-0 flex-1 overflow-y-auto"
+        data-testid="table-page-grid"
+      >
+        {grid ?? empty ?? null}
+      </div>
+
+      {pagination ? (
+        <div className="shrink-0" data-testid="table-page-pagination">
+          {pagination}
+        </div>
+      ) : null}
+
+      {bulk ? (
+        <div
+          className="pointer-events-none absolute inset-x-0 bottom-0 flex justify-center px-4 pb-4"
+          data-testid="table-page-bulk"
+        >
+          <div className="pointer-events-auto">{bulk}</div>
+        </div>
+      ) : null}
+    </div>
+  )
+}

package/src/blocks/terminal.tsx

@@ -0,0 +1,28 @@
+import { cn } from '@mohou/ui/lib/utils';
+
+/**
+ * Fixed-width console block.
+ * @when Showing a command + its output verbatim. Timestamped levels/scrolling → `LogViewer`.
+ * @example
+ * <Terminal lines={["$ df -h", "/dev/disk1  62%"]} />
+ * @family Realtime
+ */
+export function Terminal({
+  lines,
+  className,
+}: {
+  lines: string[]
+  className?: string
+}) {
+  return (
+    <pre
+      data-testid="terminal"
+      className={cn(
+        'overflow-auto rounded-xl bg-zinc-950 p-3 font-mono text-xs leading-6 text-zinc-100',
+        className,
+      )}
+    >
+      {lines.join('\n')}
+    </pre>
+  )
+}

package/src/blocks/test-step-list.tsx

@@ -0,0 +1,26 @@
+import { StatusBadge, type StatusKey } from '@mohou/ui/blocks/status-badge'
+
+export type TestStep = { id: string; title: string; status: StatusKey | string }
+
+/**
+ * Numbered test steps with expected/actual + status.
+ * @when QA cases, checklists that get executed and graded.
+ * @example
+ * <TestStepList steps={[{ id: "s1", name: "登录", status: "pass" }]} />
+ * @family Data & tables
+ */
+export function TestStepList({ steps }: { steps: TestStep[] }) {
+  return (
+    <ol className="flex flex-col gap-2" data-testid="test-step-list">
+      {steps.map((step, index) => (
+        <li key={step.id} className="flex items-center justify-between gap-3 text-sm">
+          <span>
+            <span className="text-muted-foreground mr-2">{index + 1}.</span>
+            {step.title}
+          </span>
+          <StatusBadge status={step.status} />
+        </li>
+      ))}
+    </ol>
+  )
+}

package/src/blocks/trend-card.tsx

@@ -0,0 +1,57 @@
+
+import type { ReactNode } from 'react'
+import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
+
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from '@mohou/ui/components/chart'
+import { StatCard } from '@mohou/ui/blocks/stat-card'
+
+export type TrendPoint = { label: string; value: number }
+
+const chartConfig = {
+  value: { label: 'Value', color: 'var(--primary)' },
+} satisfies ChartConfig
+
+/**
+ * KPI card with a trend series.
+ * @when Metric + direction over time. Metric only → `StatCard`.
+ * @example
+ * <TrendCard title="请求数" value="1.2k" trend="up" data={[{ value: 9 }, { value: 12 }]} />
+ * @family Chart & data
+ */
+export function TrendCard({
+  title,
+  value,
+  delta,
+  trend,
+  data,
+}: {
+  title: string
+  value: ReactNode
+  delta?: string
+  trend?: 'up' | 'down' | 'flat'
+  data: TrendPoint[]
+}) {
+  return (
+    <StatCard title={title} value={value} delta={delta} trend={trend}>
+      <ChartContainer config={chartConfig} className="h-[120px] w-full">
+        <LineChart data={data} accessibilityLayer>
+          <CartesianGrid vertical={false} />
+          <XAxis dataKey="label" tickLine={false} axisLine={false} />
+          <ChartTooltip content={<ChartTooltipContent />} />
+          <Line
+            dataKey="value"
+            type="monotone"
+            stroke="var(--color-value)"
+            strokeWidth={2}
+            dot={false}
+          />
+        </LineChart>
+      </ChartContainer>
+    </StatCard>
+  )
+}

package/src/blocks/wizard-shell.tsx

@@ -0,0 +1,131 @@
+
+import type { ReactNode } from 'react';
+
+import { Button } from '@mohou/ui/components/button';
+import { Stepper, StepperItem } from '@mohou/ui/products/stepper';
+import { useLabels } from '@mohou/ui/i18n/context';
+import { cn } from '@mohou/ui/lib/utils';
+
+export type WizardStep = {
+  id: string
+  label: string
+  /** Pass `false` while the step's form is incomplete — Next disables itself. Omit to allow. */
+  valid?: boolean
+}
+
+export type WizardShellProps = {
+  /** The steps, in order. The rail is generated from this, so it cannot disagree with the body. */
+  steps: WizardStep[]
+  /** Which step is showing. The app owns it — the preset never navigates on its own. */
+  index: number
+  /** Current step's content. The only scrolling area. */
+  body: ReactNode
+  /** Replaces the generated Back/Next/Finish row (a preview pane, a second action…). */
+  footer?: ReactNode
+  onBack?: () => void
+  onNext?: () => void
+  /** Fires on the last step's primary action. Without it the last step still shows Next. */
+  onSubmit?: () => void
+  /** Greys the primary action and swaps in the busy label. */
+  submitting?: boolean
+  className?: string
+}
+
+/**
+ * Multi-step flow: step rail on top, scrolling body, action row that never moves.
+ *
+ * Hand-rolled, a wizard's footer rides along inside the scrolling column, so every step change
+ * jumps the buttons to a different height and the user chases them with the cursor; and Next is
+ * enabled into an invalid step because the validity check lives in the form and the button lives
+ * outside it. Here the footer is a `shrink-0` sibling of the scroller, and Next/Finish are
+ * disabled straight from `steps[index].valid`, which is the only place that can know.
+ *
+ * @when Page shape: create / import / onboarding, one step at a time with validation per step
+ * @example
+ * <WizardShell
+ *   steps={[{ id: "pick", label: "Choose file", valid: Boolean(file) }, { id: "map", label: "Map columns", valid: mapped }]}
+ *   index={step}
+ *   body={<StepBody />}
+ *   onBack={() => setStep((s) => s - 1)}
+ *   onNext={() => setStep((s) => s + 1)}
+ *   onSubmit={() => void run()}
+ * />
+ * @family Layout & structure
+ */
+export function WizardShell({
+  steps,
+  index,
+  body,
+  footer,
+  onBack,
+  onNext,
+  onSubmit,
+  submitting = false,
+  className,
+}: WizardShellProps) {
+  const t = useLabels('wizardShell');
+  const current = steps[index]
+  const last = index >= steps.length - 1
+  const canAdvance = current?.valid !== false
+  const primary = last && onSubmit ? t.finish : t.next
+
+  return (
+    <div
+      className={cn('flex h-full min-h-0 w-full flex-col', className)}
+      data-testid="wizard-shell"
+    >
+      <div
+        className="border-border shrink-0 border-b px-4 py-3"
+        data-testid="wizard-rail"
+      >
+        <Stepper orientation="horizontal">
+          {steps.map((s, i) => (
+            <StepperItem
+              key={s.id}
+              step={i + 1}
+              title={s.label}
+              status={
+                i < index ? 'completed' : i === index ? 'active' : 'default'
+              }
+            />
+          ))}
+        </Stepper>
+      </div>
+
+      <div
+        className="min-h-0 flex-1 overflow-y-auto px-4 py-4"
+        data-testid="wizard-body"
+      >
+        {body}
+      </div>
+
+      <div
+        className="border-border bg-background flex shrink-0 items-center justify-between gap-3 border-t px-4 py-3"
+        data-testid="wizard-footer"
+      >
+        {footer ?? (
+          <>
+            <Button
+              variant="ghost"
+              onClick={onBack}
+              disabled={index === 0 || submitting}
+              data-testid="wizard-back"
+            >
+              {t.back}
+            </Button>
+            <span className="text-muted-foreground text-xs tabular-nums">
+              {t.stepOf(index + 1, steps.length)}
+            </span>
+            <Button
+              onClick={last && onSubmit ? onSubmit : onNext}
+              disabled={!canAdvance || submitting}
+              data-testid="wizard-next"
+            >
+              {submitting ? t.working : primary}
+            </Button>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/cdn-modules.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Heavy editors load CodeMirror / shiki from esm.sh on demand (not npm peers).
+ * Ambient so `import("https://esm.sh/...")` type-checks in the IDE.
+ */
+declare module 'https://esm.sh/*';

package/src/components/accordion.tsx

@@ -0,0 +1,79 @@
+import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion'
+
+import { cn } from '@mohou/ui/lib/utils'
+import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react'
+
+/**
+ * Vertically expanding sections.
+ * @when Collapsible groups in settings/details.
+ * @example
+ * <Accordion type="single"><AccordionItem value="s1"><AccordionTrigger>高级</AccordionTrigger><AccordionContent>…</AccordionContent></AccordionItem></Accordion>
+ * @family Surface
+ */
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn('flex w-full flex-col', className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn('not-last:border-b', className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Trigger.Props) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          'group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
+        <ChevronUpIcon data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Panel.Props) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
+      {...props}
+    >
+      <div
+        className={cn(
+          'h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4',
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Panel>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/src/components/alert-dialog.tsx

@@ -0,0 +1,192 @@
+import * as React from 'react'
+import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog'
+
+import { cn } from '@mohou/ui/lib/utils'
+import { Button } from '@mohou/ui/components/button'
+
+/**
+ * Blocking confirm modal (no click-outside dismiss).
+ * @when Deleting/irreversible actions that must be answered.
+ * @example
+ * <AlertDialog open={ask} onOpenChange={setAsk}><AlertDialogContent><AlertDialogTitle>确定删除？</AlertDialogTitle><AlertDialogAction onClick={del}>删除</AlertDialogAction></AlertDialogContent></AlertDialog>
+ * @family Surface
+ */
+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: AlertDialogPrimitive.Backdrop.Props) {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        'fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  size = 'default',
+  ...props
+}: AlertDialogPrimitive.Popup.Props & {
+  size?: 'default' | 'sm'
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Popup
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          'group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-card p-4 text-card-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        '-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        'font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        'text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  return (
+    <Button
+      data-slot="alert-dialog-action"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  variant = 'outline',
+  size = 'default',
+  ...props
+}: AlertDialogPrimitive.Close.Props &
+  Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
+  return (
+    <AlertDialogPrimitive.Close
+      data-slot="alert-dialog-cancel"
+      className={cn(className)}
+      render={<Button variant={variant} size={size} />}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+}