@mohou/ui 1.0.20

package/src/blocks/donut-chart.tsx

@@ -0,0 +1,54 @@
+
+import { Pie, PieChart } from 'recharts'
+
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from '@mohou/ui/components/chart'
+
+import { cn } from '@mohou/ui/lib/utils'
+
+export type Slice = { name: string; value: number; fill: string }
+
+/**
+ * Ring chart with centre label.
+ * @when Part-of-whole (≤6 slices): storage usage, status split. More categories → `StackedBarChart`.
+ * @example
+ * <DonutChart data={[{ label: "OK", value: 82, color: "var(--primary)" }]} center="82%" />
+ * @family Chart & data
+ */
+export function DonutChart({
+  data,
+  config,
+  center,
+  size,
+  className,
+}: {
+  data: Slice[]
+  config: ChartConfig
+  center?: string
+  size?: number
+  className?: string
+}) {
+  return (
+    <div className={cn('relative', className)} data-testid="donut-chart">
+      <ChartContainer
+        config={config}
+        className={cn('mx-auto aspect-square', size ? '' : 'w-full max-w-80')}
+        style={size ? { width: size, height: size } : undefined}
+      >
+        <PieChart>
+          <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+          <Pie data={data} dataKey="value" nameKey="name" innerRadius={50} />
+        </PieChart>
+      </ChartContainer>
+      {center ? (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center text-sm font-medium">
+          {center}
+        </div>
+      ) : null}
+    </div>
+  )
+}

package/src/blocks/env-badge.tsx

@@ -0,0 +1,30 @@
+import { Badge } from '@mohou/ui/components/badge'
+import { cn } from '@mohou/ui/lib/utils'
+
+const tone: Record<string, string> = {
+  prd: 'bg-destructive/15 text-destructive',
+  prod: 'bg-destructive/15 text-destructive',
+  stg: 'bg-amber-500/15 text-amber-700 dark:text-amber-400',
+  staging: 'bg-amber-500/15 text-amber-700 dark:text-amber-400',
+  dev: 'bg-sky-500/15 text-sky-700 dark:text-sky-400',
+  local: 'bg-muted text-muted-foreground',
+}
+
+/**
+ * Coloured pill for an environment name.
+ * @when prd / stg / dev markers in headers and tables.
+ * @example
+ * <EnvBadge env="production" />
+ * @family Feedback & status
+ */
+export function EnvBadge({ env }: { env: string }) {
+  return (
+    <Badge
+      variant="outline"
+      data-testid="env-badge"
+      className={cn('border-transparent uppercase', tone[env.toLowerCase()] ?? tone.local)}
+    >
+      {env}
+    </Badge>
+  )
+}

package/src/blocks/env-table.tsx

@@ -0,0 +1,315 @@
+
+import * as React from 'react';
+import { Check, ClipboardList, Copy, Eye, EyeOff } from 'lucide-react';
+
+import { useLabels } from '@mohou/ui/i18n/context';
+import { writeClipboard } from '@mohou/ui/lib/clipboard';
+import { cn } from '@mohou/ui/lib/utils';
+
+export type Environment =
+  | 'production'
+  | 'preview'
+  | 'development'
+  | (string & {})
+
+export type EnvVariable = {
+  /** Variable name (e.g. DATABASE_URL). */
+  key: string
+  /** Variable value. Masked by default. */
+  value: string
+  /** Target environment. When provided, renders as a pill. */
+  environment?: Environment
+  /** Optional description shown below the key. */
+  description?: string
+}
+
+export type EnvTableProps = Omit<
+  React.ComponentProps<'div'>,
+  'children' | 'title'
+> & {
+  /** Environment variables to display. */
+  variables: EnvVariable[]
+  /** Optional heading above the table. */
+  title?: string
+  /** Start with all values revealed. Defaults to false. */
+  defaultRevealed?: boolean
+}
+
+function envBadgeColor(env: Environment): string {
+  switch (env) {
+    case 'production':
+      return 'bg-emerald-500/15 text-emerald-700 dark:text-emerald-400';
+    case 'preview':
+      return 'bg-sky-500/15 text-sky-700 dark:text-sky-400';
+    case 'development':
+      return 'bg-amber-500/15 text-amber-700 dark:text-amber-400';
+    default:
+      return 'bg-muted text-muted-foreground';
+  }
+}
+
+function maskValue(value: string): string {
+  if (value.length <= 4) return '••••••••';
+  return `${value.slice(0, 4)}••••••••`
+}
+
+function CopyButton({
+  value,
+  label,
+  className,
+}: {
+  value: string
+  label: string
+  className?: string
+}) {
+  const [copied, setCopied] = React.useState(false)
+
+  const handleCopy = React.useCallback(() => {
+    void writeClipboard(value).then((ok) => {
+      if (!ok) return
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1500)
+    });
+  }, [value])
+
+  return (
+    <button
+      type="button"
+      onClick={handleCopy}
+      aria-label={label}
+      className={cn(
+        'inline-flex items-center justify-center rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+        className,
+      )}
+    >
+      {copied ? (
+        <Check className="size-3.5 text-emerald-500" />
+      ) : (
+        <Copy className="size-3.5" />
+      )}
+    </button>
+  )
+}
+
+function RevealButton({
+  revealed,
+  onToggle,
+  label,
+}: {
+  revealed: boolean
+  onToggle: () => void
+  label: string
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onToggle}
+      aria-label={label}
+      className="inline-flex items-center justify-center rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    >
+      {revealed ? (
+        <EyeOff className="size-3.5" />
+      ) : (
+        <Eye className="size-3.5" />
+      )}
+    </button>
+  )
+}
+
+function EnvRow({
+  variable,
+  revealed,
+  onToggleReveal,
+}: {
+  variable: EnvVariable
+  revealed: boolean
+  onToggleReveal: () => void
+}) {
+  const t = useLabels('envTable');
+  const displayValue = revealed ? variable.value : maskValue(variable.value)
+
+  return (
+    <div
+      data-slot="env-row"
+      className="group flex items-start gap-3 px-3 py-2.5 sm:items-center sm:px-4"
+    >
+      <div className="flex min-w-0 flex-1 flex-col gap-1.5 sm:flex-row sm:items-center sm:gap-4">
+        <div className="flex shrink-0 items-center gap-2 sm:w-[220px]">
+          <span className="truncate font-mono text-xs font-semibold text-foreground">
+            {variable.key}
+          </span>
+          {variable.environment ? (
+            <span
+              className={cn(
+                'shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium leading-none',
+                envBadgeColor(variable.environment),
+              )}
+            >
+              {variable.environment}
+            </span>
+          ) : null}
+        </div>
+
+        <div className="min-w-0 flex-1">
+          <span
+            className={cn(
+              'break-all font-mono text-xs',
+              revealed ? 'text-foreground' : 'text-muted-foreground',
+            )}
+          >
+            {displayValue}
+          </span>
+          {variable.description ? (
+            <p className="mt-0.5 text-[11px] text-muted-foreground/70">
+              {variable.description}
+            </p>
+          ) : null}
+        </div>
+      </div>
+
+      <div className="flex shrink-0 items-center gap-0.5">
+        <RevealButton
+          revealed={revealed}
+          onToggle={onToggleReveal}
+          label={revealed ? t.hideKey(variable.key) : t.revealKey(variable.key)}
+        />
+        <CopyButton value={variable.value} label={t.copyValue(variable.key)} />
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Read-only env var table with masked values and copy.
+ * @when Settings / deploy preview / secrets display
+ * @example
+ * <EnvTable variables={[{ key: "API_URL", value: "https://…", environment: "production" }]} />
+ * @family Data & tables
+ */
+export function EnvTable({
+  variables,
+  title,
+  defaultRevealed = false,
+  className,
+  ...props
+}: EnvTableProps) {
+  const t = useLabels('envTable');
+  const [revealedIndices, setRevealedIndices] = React.useState<Set<number>>(
+    () => (defaultRevealed ? new Set(variables.map((_, i) => i)) : new Set()),
+  )
+  const [copiedAll, setCopiedAll] = React.useState(false)
+
+  const allRevealed =
+    variables.length > 0 && revealedIndices.size === variables.length
+
+  const toggleIndex = React.useCallback((index: number) => {
+    setRevealedIndices((prev) => {
+      const next = new Set(prev)
+      if (next.has(index)) {
+        next.delete(index)
+      } else {
+        next.add(index)
+      }
+      return next
+    });
+  }, [])
+
+  const toggleAll = React.useCallback(() => {
+    if (allRevealed) {
+      setRevealedIndices(new Set())
+    } else {
+      setRevealedIndices(new Set(variables.map((_, i) => i)))
+    }
+  }, [allRevealed, variables])
+
+  const copyAllAsEnv = React.useCallback(() => {
+    const text = variables.map(v => `${v.key}=${v.value}`).join('\n');
+    void writeClipboard(text).then((ok) => {
+      if (!ok) return
+      setCopiedAll(true)
+      setTimeout(() => setCopiedAll(false), 1500)
+    });
+  }, [variables])
+
+  if (variables.length === 0) {
+    return (
+      <div
+        data-testid="env-table"
+        data-slot="env-table"
+        className={cn(
+          'flex items-center justify-center rounded-xl border border-border/60 bg-card py-10 text-sm text-muted-foreground shadow-sm',
+          className,
+        )}
+        {...props}
+      >
+        {t.empty}
+      </div>
+    )
+  }
+
+  return (
+    <div
+      data-testid="env-table"
+      data-slot="env-table"
+      className={cn(
+        'overflow-hidden rounded-xl border border-border/60 bg-card shadow-sm',
+        className,
+      )}
+      {...props}
+    >
+      <div className="flex items-center justify-between border-b border-border/40 px-3 py-2.5 sm:px-4">
+        <div className="flex items-center gap-2">
+          {title ? (
+            <h3 className="text-sm font-semibold text-foreground">{title}</h3>
+          ) : null}
+          <span className="rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
+            {variables.length}
+          </span>
+        </div>
+        <div className="flex items-center gap-1">
+          <button
+            type="button"
+            onClick={toggleAll}
+            aria-label={allRevealed ? t.hideAllValues : t.revealAllValues}
+            className="inline-flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            {allRevealed ? (
+              <EyeOff className="size-3.5" />
+            ) : (
+              <Eye className="size-3.5" />
+            )}
+            <span className="hidden sm:inline">
+              {allRevealed ? t.hideAll : t.revealAll}
+            </span>
+          </button>
+          <button
+            type="button"
+            onClick={copyAllAsEnv}
+            aria-label={t.copyEnv}
+            className="inline-flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            {copiedAll ? (
+              <Check className="size-3.5 text-emerald-500" />
+            ) : (
+              <ClipboardList className="size-3.5" />
+            )}
+            <span className="hidden sm:inline">
+              {copiedAll ? t.copied : t.copyEnv}
+            </span>
+          </button>
+        </div>
+      </div>
+
+      <div className="divide-y divide-border/40">
+        {variables.map((variable, i) => (
+          <EnvRow
+            key={`${variable.key}-${i}`}
+            variable={variable}
+            revealed={revealedIndices.has(i)}
+            onToggleReveal={() => toggleIndex(i)}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/blocks/file-tree.tsx

@@ -0,0 +1,12 @@
+import { TreeView, type TreeNode } from '@mohou/ui/products/tree-view'
+
+/**
+ * Expandable file/dir tree (icons built in).
+ * @when Repo/zip contents where selection matters. Plain nested list → `TreeView`.
+ * @example
+ * <FileTree nodes={[{ name: "src", children: [{ name: "main.api.ts" }] }]} />
+ * @family Data & tables
+ */
+export function FileTree({ nodes }: { nodes: TreeNode[] }) {
+  return <TreeView nodes={nodes} />
+}

package/src/blocks/filter-bar.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react'
+
+/**
+ * Horizontal wrap row for filters and toolbar controls.
+ * @when Above DataGrid or any filtered list
+ * @example
+ * <FilterBar>
+ *   <DateRangePicker value={range} onChange={setRange} />
+ *   <SearchInput value={q} onChange={setQ} />
+ * </FilterBar>
+ * @family Data & tables
+ */
+export function FilterBar({ children }: { children: ReactNode }) {
+  return (
+    <div
+      className="flex flex-wrap items-center gap-2"
+      data-testid="filter-bar"
+    >
+      {children}
+    </div>
+  )
+}

package/src/blocks/form-sheet.tsx

@@ -0,0 +1,159 @@
+
+import * as React from 'react';
+import type { FormEvent, ReactNode } from 'react';
+
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@mohou/ui/components/alert-dialog';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@mohou/ui/components/sheet';
+import { useLabels } from '@mohou/ui/i18n/context';
+import { cn } from '@mohou/ui/lib/utils';
+
+export type FormSheetProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  title: ReactNode
+  description?: ReactNode
+  /** Anything below the title: a badge, a record id, a tab strip. */
+  header?: ReactNode
+  /** The scrolling form fields. */
+  children: ReactNode
+  /** Action row, pinned. Put the primary control in here with `type="submit"`. */
+  footer?: ReactNode
+  /** One submit path for the whole sheet: Enter in a field and the footer button land here. */
+  onSubmit?: (e: FormEvent<HTMLFormElement>) => void
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  width?: string | number
+  /** Ask before throwing edits away. The app owns the check; the preset owns the prompt. */
+  dirty?: boolean
+  className?: string
+}
+
+/**
+ * Create / edit form over a list you do not want to lose.
+ *
+ * The usual build has three cracks: the header and footer scroll away with the fields (so the
+ * Cancel button is somewhere the user has to hunt for), Enter in a text field submits *something
+ * else* or nothing because there is no form around the inputs, and Escape closes a sheet full of
+ * unsaved edits. Here only the body is a scroller — header, form and footer are siblings inside a
+ * flex column — the fields and the footer share one `<form onSubmit>`, and a dirty sheet asks
+ * first.
+ *
+ * @when Page shape: focused create/edit over a list — new record, edit record, wizard-less config
+ * @example
+ * <FormSheet
+ *   open={Boolean(editing)}
+ *   onOpenChange={(o) => !o && setEditing(null)}
+ *   title="Edit issue"
+ *   dirty={dirty}
+ *   onSubmit={save}
+ *   footer={<Button type="submit">Save</Button>}
+ * >
+ *   <Input name="summary" />
+ * </FormSheet>
+ * @family Layout & structure
+ */
+export function FormSheet({
+  open,
+  onOpenChange,
+  title,
+  description,
+  header,
+  children,
+  footer,
+  onSubmit,
+  side = 'right',
+  width = 480,
+  dirty = false,
+  className,
+}: FormSheetProps) {
+  const t = useLabels('formSheet');
+  const [guard, setGuard] = React.useState(false)
+
+  const request = (next: boolean) => {
+    if (!next && dirty) {
+      setGuard(true)
+      return;
+    }
+    onOpenChange(next)
+  };
+
+  return (
+    <>
+      <Sheet open={open} onOpenChange={request}>
+        <SheetContent
+          side={side}
+          width={width}
+          className={cn('flex min-h-0 flex-col gap-0 p-0', className)}
+          data-testid="form-sheet"
+        >
+          <SheetHeader className="border-border shrink-0 border-b px-6 py-4 text-left">
+            <SheetTitle className="text-base">{title}</SheetTitle>
+            {description ? (
+              <SheetDescription>{description}</SheetDescription>
+            ) : null}
+            {header}
+          </SheetHeader>
+
+          {/* One form wraps the scroller *and* the footer, so Enter and the button are the same path. */}
+          <form
+            className="flex min-h-0 flex-1 flex-col"
+            onSubmit={(e) => {
+              e.preventDefault()
+              onSubmit?.(e)
+            }}
+            data-testid="form-sheet-form"
+          >
+            <div
+              className="min-h-0 flex-1 overflow-y-auto px-6 py-4"
+              data-testid="form-sheet-body"
+            >
+              {children}
+            </div>
+            {footer ? (
+              <div
+                className="border-border bg-background shrink-0 border-t px-6 py-3"
+                data-testid="form-sheet-footer"
+              >
+                {footer}
+              </div>
+            ) : null}
+          </form>
+        </SheetContent>
+      </Sheet>
+
+      <AlertDialog open={guard} onOpenChange={setGuard}>
+        <AlertDialogContent data-testid="form-sheet-guard">
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t.discardTitle}</AlertDialogTitle>
+            <AlertDialogDescription>{t.discardBody}</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t.keepEditing}</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={() => {
+                setGuard(false)
+                onOpenChange(false)
+              }}
+            >
+              {t.discard}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  )
+}

package/src/blocks/gauge.tsx

@@ -0,0 +1,36 @@
+import { ProgressRing } from '@mohou/ui/blocks/progress-ring'
+import { cn } from '@mohou/ui/lib/utils'
+
+/**
+ * Arc gauge for one 0–100 metric.
+ * @when A single health/capacity number that needs a zone (SLO, disk). Series over time → `Sparkline`.
+ * @example
+ * <Gauge value={73} label="磁盘" />
+ * @family Chart & data
+ */
+export function Gauge({
+  value,
+  label,
+  size = 112,
+  className,
+}: {
+  value: number
+  label?: string
+  size?: number
+  className?: string
+}) {
+  return (
+    <div
+      className={cn('flex flex-col items-center gap-2', className)}
+      data-testid="gauge"
+    >
+      <div className="relative" style={{ width: size, height: size }}>
+        <ProgressRing value={value} className="h-full w-full" />
+        <div className="absolute inset-0 flex flex-col items-center justify-center">
+          <span className="text-2xl font-semibold tabular-nums">{value}%</span>
+        </div>
+      </div>
+      {label ? <div className="text-xs text-muted-foreground">{label}</div> : null}
+    </div>
+  )
+}