@endfield-ui/react 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@endfield-ui/react",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "终末地风格的 React 基础控件库（非官方）",
   "keywords": [
     "react",

package/src/components/README.md

@@ -62,6 +62,7 @@
 | `skeleton/` | `Skeleton` | [反馈](../../../../docs/design/components/feedback.md) |
 | `empty-state/` | `EmptyState` | [反馈](../../../../docs/design/components/feedback.md) |
 | `loader/` | `Loader` | [反馈](../../../../docs/design/components/feedback.md) |
+| `splash-screen/` | `SplashScreen`（开屏页：照官网首次载入的那一页排的，标志和底图是插槽） | [反馈](../../../../docs/design/components/feedback.md#开屏页) |
 | `spinner/` | `Spinner` | [反馈](../../../../docs/design/components/feedback.md) |
 | `completion-banner/` | `CompletionBanner` | [反馈](../../../../docs/design/components/feedback.md) |
 | `tooltip/` | `Tooltip`、`TooltipProvider` | [浮层](../../../../docs/design/components/overlay.md) |

package/src/components/alert/Alert.tsx

@@ -126,7 +126,7 @@ export function Alert({
       // 正在收起的提示条点不到、Tab 不进去
       inert={leaving}
       className={cn(
-        "flex items-start gap-3 border border-l-4 border-line bg-surface-raised py-3 pr-3 pl-3 text-sm text-ink",
+        "flex items-start gap-3 border-l-4 bg-surface-raised py-3 pr-3 pl-3 text-sm text-ink",
         toneBar[tone],
         leaving && [
           "pointer-events-none overflow-hidden",

package/src/components/date-picker/DateField.tsx

@@ -91,8 +91,6 @@ export function DateField({
         data-invalid={invalid ? "" : undefined}
         className={cn(
           controlBox({ variant, invalid, disabled, readOnly: false }),
-          // 面板开着的时候边线保持聚焦的墨色
-          !disabled && !invalid && "has-data-popup-open:border-ink",
           controlSize[size],
           className,
         )}

package/src/components/dropdown-menu/menu-style.ts

@@ -16,6 +16,10 @@ export const MenuVariantContext = createContext<MenuVariant>("plain");
 /**
  * 面板：直角、1px 线、环境阴影；顶部一条半宽的行动色细条，展开时从 0 伸到一半宽。
  *
+ * 细条上挂一个朝下的小三角，和它是同一个伪元素裁出来的：条高 3px，三角露出 8×4px，
+ * 中心距条的左端 32px（实机风格弹窗分隔条的一半大）。它是条上的记号，不指向触发处——
+ * 面板翻到上面、在侧边时照旧在顶上、朝下。三角探进第一行 2px，所以压在各行的底色之上
+ *
  * 进场：淡入（200ms），同时从触发处那一侧挪过来 4px（300ms，和细条同一拍）。
  * 退场只淡出——位移只写在起点上。两个时长、两条缓动按属性一一对应
  */
@@ -24,7 +28,8 @@ export const menuPanel = [
   "origin-(--transform-origin) transition-[opacity,translate] duration-[var(--duration-fast),var(--duration-base)] ease-[var(--ease-standard),var(--ease-exit)]",
   "data-ending-style:opacity-0 data-starting-style:opacity-0",
   enterFromSide,
-  "before:pointer-events-none before:absolute before:-top-px before:-left-px before:h-[3px] before:w-1/2 before:origin-left before:bg-action before:content-['']",
+  "before:pointer-events-none before:absolute before:-top-px before:-left-px before:z-1 before:h-[7px] before:w-1/2 before:origin-left before:bg-action before:content-['']",
+  "before:[clip-path:polygon(0_0,100%_0,100%_3px,36px_3px,32px_100%,28px_3px,0_3px)]",
   "before:transition-transform before:duration-(--duration-base) before:ease-exit data-starting-style:before:scale-x-0",
   "forced-colors:before:hidden",
 ].join(" ");

package/src/components/file-upload/FileUpload.tsx

@@ -1,5 +1,6 @@
 import {
   useEffect,
+  useLayoutEffect,
   useRef,
   useState,
   type ChangeEvent,
@@ -235,9 +236,11 @@ export function FileUpload({
     }
   }, [files, revision]);
 
-  // 移除之后焦点落到哪：等这一次渲染完
+  // 移除之后焦点落到哪：等这一次渲染落到页面上，当场交出去。
+  // 不用 useEffect：它晚一拍，上一次渲染留下的那一份可能在这次移除之后才补跑——
+  // 看到的还是移除之前的页面，焦点留在马上要收起的那一行上，随后掉到 body
   const pendingFocus = useRef<number | null>(null);
-  useEffect(() => {
+  useLayoutEffect(() => {
     const index = pendingFocus.current;
     if (index === null) return;
     pendingFocus.current = null;

package/src/components/input/control-box.ts

@@ -5,7 +5,7 @@ import { focusRingWithin } from "../../lib/focus-ring";
  * 输入框与多行文本共用的外框，直角，两种画法：
  * - `sunken` 凹陷的底 + 一条 2px 的底边线，默认；
  * - `outline` 四边 1px 的描边 + 页面底色，放在凹陷底色的区域里时用。
- * 状态都靠边线的颜色变化：默认灰 → 悬停深一档 → 聚焦墨 → 错误红。
+ * 状态靠边线说：默认灰 → 悬停深一档 → 错误红；聚焦另画一条墨线。
  */
 
 export type ControlVariant = "sunken" | "outline";
@@ -41,11 +41,29 @@ const fill: Record<ControlVariant, string> = {
   outline: "bg-surface",
 };
 
-/**
- * 只读时留着占位的那条透明边线，高对比模式下写成页面色：系统会把透明的边线也换成字色
- * 显出来，而底色本来就都没了——只读的就和能填的一个样。输入框和验证码输入共用
- */
-export const readOnlyFrame = "forced-colors:border-[Canvas]";
+/* 画在 `::before` 上：分段选择的 `::after` 是选中的那块底 */
+const lineFrame: Record<ControlVariant, string> = {
+  sunken:
+    "before:pointer-events-none before:absolute before:inset-x-0 before:-bottom-[2px] before:h-[2px] before:origin-left before:scale-x-0 before:bg-ink before:content-[''] forced-colors:before:bg-[Highlight]",
+  outline:
+    "before:pointer-events-none before:absolute before:-inset-px before:border before:border-ink before:[clip-path:inset(0_100%_0_0)] before:content-['']",
+};
+
+const lineOpen: Record<ControlVariant, string> = {
+  sunken:
+    "focus-within:before:scale-x-100 has-data-popup-open:before:scale-x-100",
+  outline:
+    "focus-within:before:[clip-path:inset(0)] has-data-popup-open:before:[clip-path:inset(0)]",
+};
+
+/* 擦出 300ms、收回 200ms */
+const lineMotion =
+  "before:transition-[scale,clip-path] before:duration-(--duration-fast) before:ease-standard focus-within:before:duration-(--duration-base) focus-within:before:ease-exit has-data-popup-open:before:duration-(--duration-base) has-data-popup-open:before:ease-exit";
+
+/** 聚焦的墨线，接在带 `relative` 的外框上用 */
+export function controlLine(variant: ControlVariant = "sunken") {
+  return cn(lineFrame[variant], lineOpen[variant], lineMotion);
+}
 
 export function controlBox({
   variant = "sunken",
@@ -54,7 +72,7 @@ export function controlBox({
   readOnly,
 }: BoxState) {
   return cn(
-    "flex w-full min-w-0 text-ink",
+    "relative flex w-full min-w-0 text-ink",
     frame[variant],
     "transition-colors duration-(--duration-fast) ease-standard",
     focusRingWithin,
@@ -62,15 +80,17 @@ export function controlBox({
       ? // 只读：没有边线、底变透明。边线留透明的，尺寸不跳
         "border-transparent bg-transparent"
       : fill[variant],
-    // 只在透明的那条线真的作数时：禁用、错误各有自己的边线颜色，排在后面盖掉它
-    readOnly && !disabled && !invalid && readOnlyFrame,
+    // 高对比模式下系统会把透明的边线也换成字色显出来，而底色本来就都没了：
+    // 只读的写成页面色，不然和能填的一个样
+    readOnly && !disabled && !invalid && "forced-colors:border-[Canvas]",
     disabled
       ? "cursor-not-allowed border-line text-ink-disabled"
       : invalid
         ? "border-danger"
         : !readOnly &&
           // 悬停只在没聚焦时生效：生成的 CSS 里 hover 排在 focus-within 之后，会盖掉聚焦的墨色
-          "border-line-strong hover:not-focus-within:border-ink-secondary focus-within:border-ink",
+          "border-line-strong hover:not-focus-within:border-ink-secondary",
+    !disabled && !invalid && !readOnly && controlLine(variant),
   );
 }
 

package/src/components/otp-input/OtpInput.tsx

@@ -1,10 +1,10 @@
 import { OTPField as BaseOtpField } from "@base-ui/react/otp-field";
 import { Fragment, useId, type ComponentProps } from "react";
 import { cn } from "../../lib/cn";
-import { focusRing } from "../../lib/focus-ring";
 import { useFieldContext, useFieldControl } from "../field/Field";
 import {
-  readOnlyFrame,
+  controlBox,
+  controlElement,
   type ControlSize,
   type ControlVariant,
 } from "../input/control-box";
@@ -53,21 +53,17 @@ export type OtpInputProps = Omit<
   slotLabel?: (position: number, length: number) => string;
 };
 
-/* 格子见方；容器窄了宽度可以让，高度不变 */
+/* 格子见方；容器窄了宽度可以让，高度不变。字号在里面那个 <input> 上 */
 const slotSize: Record<ControlSize, string> = {
-  sm: "h-8 w-8 text-base",
-  md: "h-10 w-10 text-lg",
-  lg: "h-14 w-14 text-2xl",
+  sm: "h-8 w-8",
+  md: "h-10 w-10",
+  lg: "h-14 w-14",
 };
 
-const slotFrame: Record<ControlVariant, string> = {
-  sunken: "border-b-2",
-  outline: "border",
-};
-
-const slotFill: Record<ControlVariant, string> = {
-  sunken: "bg-surface-sunken",
-  outline: "bg-surface",
+const slotText: Record<ControlSize, string> = {
+  sm: "text-base",
+  md: "text-lg",
+  lg: "text-2xl",
 };
 
 const gapClass: Record<ControlSize, string> = {
@@ -132,27 +128,12 @@ export function OtpInput({
   const ownLabel = ariaLabelledBy ?? (ariaLabel ? labelId : undefined);
   const groupLabel = ownLabel ?? fieldContext?.labelId;
 
-  const slotClass = cn(
-    // 字色：空格是透明的，填上（基元给的 data-filled）才有颜色。下面那条颜色的过渡
-    // 本来是给边线的，字色跟着它走——所以填进去的那一位是淡入的。光标另有自己的颜色
-    "min-w-0 shrink text-center font-tech font-medium tabular-nums text-transparent caret-ink",
+  const inputClass = cn(
+    controlElement,
+    "h-full w-full text-center font-tech font-medium tabular-nums caret-ink text-transparent",
     "transition-colors duration-(--duration-fast) ease-standard",
     disabled ? "data-filled:text-ink-disabled" : "data-filled:text-ink",
-    focusRing,
-    slotSize[size],
-    slotFrame[variant],
-    readOnly
-      ? // 只读：没有边线、底变透明。边线留透明的，尺寸不跳
-        "border-transparent bg-transparent"
-      : slotFill[variant],
-    readOnly && !disabled && !invalid && readOnlyFrame,
-    disabled
-      ? "cursor-not-allowed border-line"
-      : invalid
-        ? "border-danger"
-        : !readOnly &&
-          // 悬停只在没聚焦时生效：聚焦中的格子不会因为鼠标经过而变浅
-          "border-line-strong hover:not-focus:border-ink-secondary focus:border-ink",
+    slotText[size],
   );
 
   const group = groupSize !== undefined && groupSize > 0 ? groupSize : 0;
@@ -203,16 +184,27 @@ export function OtpInput({
               className="h-0.5 w-2 shrink-0 bg-line-strong forced-colors:bg-[CanvasText]"
             />
           )}
-          <BaseOtpField.Input
-            // 第一格的名称是字段的标签（或者上面那段隐藏的文字），说明文字也挂在它上面
-            {...(index === 0
-              ? { "aria-labelledby": ownLabel, "aria-describedby": describedBy }
-              : { "aria-label": slotLabel(index + 1, length) })}
-            aria-invalid={invalid || undefined}
-            autoFocus={autoFocus && index === 0}
-            autoCapitalize={uppercase ? "characters" : "none"}
-            className={slotClass}
-          />
+          <span
+            className={cn(
+              controlBox({ variant, invalid, disabled, readOnly }),
+              "shrink items-center justify-center",
+              slotSize[size],
+            )}
+          >
+            <BaseOtpField.Input
+              // 第一格的名称是字段的标签（或者上面那段隐藏的文字），说明文字也挂在它上面
+              {...(index === 0
+                ? {
+                    "aria-labelledby": ownLabel,
+                    "aria-describedby": describedBy,
+                  }
+                : { "aria-label": slotLabel(index + 1, length) })}
+              aria-invalid={invalid || undefined}
+              autoFocus={autoFocus && index === 0}
+              autoCapitalize={uppercase ? "characters" : "none"}
+              className={inputClass}
+            />
+          </span>
         </Fragment>
       ))}
     </BaseOtpField.Root>

package/src/components/segmented-control/SegmentedControl.tsx

@@ -13,6 +13,7 @@ import { mergeRefs } from "../../lib/merge-refs";
 import { indicator, indicatorBox } from "../../lib/motion";
 import { useFieldContext } from "../field/Field";
 import {
+  controlLine,
   controlSize,
   type ControlSize,
   type ControlVariant,
@@ -140,12 +141,11 @@ export function SegmentedControl({
           "forced-colors:after:bg-[Highlight] forced-colors:has-[[data-selected][data-disabled]]:after:bg-[GrayText]",
           track[variant],
           controlSize[size],
-          // 和输入框一样靠边线说状态
           disabled
             ? "border-line"
             : invalid
               ? "border-danger"
-              : "border-line-strong focus-within:border-ink",
+              : ["border-line-strong", controlLine(variant)],
           className,
         )}
       />

package/src/components/select/Select.tsx

@@ -191,8 +191,6 @@ export function Select(props: SelectProps) {
         data-invalid={invalid ? "" : undefined}
         className={cn(
           controlBox({ variant, invalid, disabled, readOnly: false }),
-          // 面板开着的时候边线保持聚焦的墨色
-          !disabled && !invalid && "has-data-popup-open:border-ink",
           controlSize[size],
           className,
         )}

package/src/components/splash-screen/SplashScreen.tsx

@@ -0,0 +1,340 @@
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ComponentProps,
+  type CSSProperties,
+  type KeyboardEvent,
+  type ReactNode,
+} from "react";
+import { usePresence } from "../../hooks/usePresence";
+import { cn } from "../../lib/cn";
+import { decor as decorLayer } from "../../lib/decor";
+import { mergeRefs } from "../../lib/merge-refs";
+
+export type SplashScreenProps = Omit<ComponentProps<"div">, "children"> & {
+  /** 真实进度，0 – 100。不知道就不传：显示不确定进度，不显示数字 */
+  value?: number;
+  /** 标志：自己的图或 SVG。放在画面偏右的一个盒子里，竖排时居中 */
+  logo?: ReactNode;
+  /** 标志下面的一行标语 */
+  tagline?: ReactNode;
+  /** 标语上方那组微标里的微文字。纯氛围，对读屏隐藏 */
+  caption?: ReactNode;
+  /**
+   * 换掉标语上方的整组微标。不传是代码画的一组（小方框、`caption`、方点阵，旁边一枚三角标），
+   * 传 `null` 是不要
+   */
+  decor?: ReactNode;
+  /** 读数下面的状态字。默认 `LOADING` */
+  status?: ReactNode;
+  /** 底图：铺满整块，随进度从模糊变清晰 */
+  backdrop?: ReactNode;
+  /** 置为 `false` 开始退场：走满、铺满、淡出，结束后卸载。默认 `true` */
+  open?: boolean;
+  /** 铺满视口并锁住页面（默认）；关掉则铺满所在的定位容器 */
+  fullscreen?: boolean;
+  /** 进度条的可访问名称 */
+  label?: string;
+  /** 开始淡出、页面露出来的那一刻触发：页面自己的入场从这里起 */
+  onReveal?: () => void;
+  /** 淡出结束、已经卸载之后触发 */
+  onExited?: () => void;
+};
+
+/*
+ * 进度的补间 0.5s（官网实测）。两个变量一起走：位置用小数的那个，读数用整数的那个。
+ * 退场时再加上整层的淡出：等 1.4s（走满 0.5s、铺满 0.6s、停一下）之后淡 1s。
+ */
+const progressTransition =
+  "[transition:--ef-splash-progress_500ms_var(--ease-exit),--ef-splash-percent_500ms_var(--ease-exit)]";
+const leavingTransition =
+  "[transition:--ef-splash-progress_500ms_var(--ease-exit),--ef-splash-percent_500ms_var(--ease-exit),opacity_1s_var(--ease-standard)_1.4s]";
+
+/** 三角标：三个朝下的小三角拼成一个倒三角 */
+function Mark() {
+  return (
+    <svg
+      viewBox="0 0 24 21"
+      aria-hidden="true"
+      className={cn(
+        decorLayer,
+        "absolute -top-[calc(var(--ef-splash-unit)*2.5)] -left-[calc(var(--ef-splash-unit)*3.375)] h-[calc(var(--ef-splash-unit)*1.3125)] w-[calc(var(--ef-splash-unit)*1.4375)] fill-action cq-portrait:hidden",
+      )}
+    >
+      <path d="M0 0h11.6L5.8 10zM12.4 0H24l-5.8 10zM6.2 11h11.6L12 21z" />
+    </svg>
+  );
+}
+
+/**
+ * 代码画的那组微标：带框的加号、微文字、两排方点。至少占官网那张图的高度（4 个单位）；
+ * 微文字有字号的下限，多出来的往上长。竖排时上面紧挨着进度条的读数，放不下微文字
+ */
+function DefaultDecor({ caption }: { caption: ReactNode }) {
+  return (
+    <div className="flex min-h-[calc(var(--ef-splash-unit)*4)] flex-col items-start justify-between gap-[calc(var(--ef-splash-unit)*0.5)] text-neutral-600">
+      <svg
+        viewBox="0 0 12 12"
+        fill="none"
+        stroke="currentColor"
+        className="size-[calc(var(--ef-splash-unit)*1.125)]"
+      >
+        <path d="M.5.5h11v11H.5zM6 3v6M3 6h6" />
+      </svg>
+      {caption !== undefined && (
+        <p className="font-latin text-[length:max(calc(var(--ef-splash-unit)*0.75),var(--text-micro))] leading-[1.2] font-medium tracking-label whitespace-pre-line text-ink-tertiary uppercase cq-portrait:hidden">
+          {caption}
+        </p>
+      )}
+      {/* 画成一张图：方点只有半个单位大，一个个排成元素的话，小尺寸下间隔会忽宽忽窄 */}
+      <svg
+        viewBox="0 0 62 18"
+        fill="currentColor"
+        className="h-[calc(var(--ef-splash-unit)*1.125)] w-[calc(var(--ef-splash-unit)*3.875)]"
+      >
+        {[0, 11].flatMap((y) =>
+          [0, 11, 22, 33, 44, 55].map((x) => (
+            <rect key={`${x}-${y}`} x={x} y={y} width="7" height="7" />
+          )),
+        )}
+      </svg>
+    </div>
+  );
+}
+
+/**
+ * 开屏页：照官网首次载入的那一页排的。近黑底，一根贴边的黄色进度条，读数跟着条的末端走；
+ * 画面偏右是标志，下面一组微标、一条分隔线和一行标语。就绪后黄色铺满整屏，再整层淡出。
+ *
+ * 标志和底图是插槽，库里不带任何图。横竖看它所在的那一块自己的宽高比，不看视口；
+ * 尺寸跟着那一块的宽度等比缩放，插槽里的东西可以用 `--ef-splash-unit` 跟着缩。
+ *
+ * 只要一块盖住整页的等待、不要这些排场，用 `Loader`。
+ */
+export function SplashScreen({
+  value,
+  logo,
+  tagline,
+  caption,
+  decor,
+  status = "LOADING",
+  backdrop,
+  open = true,
+  fullscreen = true,
+  label = "加载中",
+  onReveal,
+  onExited,
+  onKeyDown,
+  className,
+  style,
+  ref,
+  ...props
+}: SplashScreenProps) {
+  // 页面露出来了没有：开始淡出的那一刻。在那之前这一层一直盖着、锁着
+  const [revealed, setRevealed] = useState(false);
+  if (open && revealed) setRevealed(false);
+
+  const handlers = useRef({ onReveal });
+  const fired = useRef(false);
+  useLayoutEffect(() => {
+    handlers.current = { onReveal };
+    if (open) fired.current = false;
+  });
+  const reveal = useCallback(() => {
+    if (fired.current) return;
+    fired.current = true;
+    setRevealed(true);
+    handlers.current.onReveal?.();
+  }, []);
+
+  // 退出：淡出的过渡走完后卸载；重新打开立刻挂回来
+  const { ref: rootRef, mounted } = usePresence<HTMLDivElement>(open, {
+    onExited: () => {
+      // 没有过渡可等的环境里等不到"开始淡出"：卸载之前补上
+      reveal();
+      onExited?.();
+    },
+  });
+  const leaving = mounted && !open;
+
+  // 淡出排在铺满之后，等的是它真的开始的那一刻（延迟走完），不是退场的开头
+  useLayoutEffect(() => {
+    const node = rootRef.current;
+    if (!leaving || !node) return;
+    const onStart = (event: TransitionEvent) => {
+      if (event.target === node && event.propertyName === "opacity") reveal();
+    };
+    node.addEventListener("transitionstart", onStart);
+    return () => node.removeEventListener("transitionstart", onStart);
+  }, [leaving, rootRef, reveal]);
+
+  /*
+   * 整页模式：锁住页面滚动，把焦点收进来。和 Loader 不一样，开始退场时不放开——
+   * 黄色铺满的那一段页面还完全被盖着，放开了只会点到看不见的东西。到开始淡出才放
+   */
+  const blocking = mounted && (open || !revealed);
+  useEffect(() => {
+    if (!fullscreen || !blocking) return;
+    const page = document.documentElement;
+    const previousOverflow = page.style.overflow;
+    const previousFocus = document.activeElement;
+    page.style.overflow = "hidden";
+    rootRef.current?.focus({ preventScroll: true });
+    return () => {
+      page.style.overflow = previousOverflow;
+      if (previousFocus instanceof HTMLElement && previousFocus.isConnected) {
+        previousFocus.focus({ preventScroll: true });
+      }
+    };
+  }, [fullscreen, blocking, rootRef]);
+
+  if (!mounted) return null;
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    onKeyDown?.(event);
+    // 焦点留在开屏页上，不让 Tab 走到被盖住的内容里
+    if (fullscreen && blocking && event.key === "Tab") event.preventDefault();
+  };
+
+  const indeterminate = value === undefined;
+  const current = indeterminate ? 0 : Math.min(Math.max(value, 0), 100);
+  // 退场先把条走满：就绪就是百分之百，铺满前的那半秒留给它
+  const shown = open ? current : 100;
+  const travelling = indeterminate && open;
+
+  return (
+    <div
+      tabIndex={-1}
+      {...props}
+      ref={mergeRefs(rootRef, ref)}
+      // 固定的近黑底，不随页面的主题变：做成局部的暗色主题，插槽里照常用语义令牌
+      data-theme="dark"
+      data-state={open ? "open" : "closing"}
+      onKeyDown={handleKeyDown}
+      style={
+        {
+          ...style,
+          "--ef-splash-progress": shown,
+          "--ef-splash-percent": Math.round(shown),
+        } as CSSProperties
+      }
+      className={cn(
+        "overflow-hidden bg-surface text-ink outline-none [container-type:size]",
+        fullscreen ? "fixed inset-0 z-(--z-loader)" : "absolute inset-0",
+        leaving ? leavingTransition : progressTransition,
+        leaving && "opacity-0",
+        !blocking && "pointer-events-none",
+        className,
+      )}
+    >
+      {/*
+       * 一个单位是官网的 1rem：横排是宽度的 1/160，竖排是 1/67.5。
+       * 状态字和标语有字号的下限（官网在小屏上会缩到看不清），收成两个变量：
+       * 竖排时下面那一摞是从底边往上排的，条要按它们多占的高度往上让
+       */}
+      <div className="absolute inset-0 [--_status:max(var(--ef-splash-unit),var(--text-xs))] [--_tagline:max(calc(var(--ef-splash-unit)*1.5),var(--text-xs))] [--ef-splash-unit:0.625cqw] cq-portrait:[--ef-splash-unit:1.4815cqw]">
+        {backdrop !== undefined && (
+          <div
+            aria-hidden="true"
+            className={cn(
+              decorLayer,
+              "absolute inset-0 blur-[calc((100_-_var(--ef-splash-progress))*0.08px)] *:size-full [&>img]:object-cover",
+            )}
+          >
+            {backdrop}
+          </div>
+        )}
+
+        {/*
+         * 纵向位置和官网一样按宽度定（标志在上 27.625 个单位，微标组的分隔线在 63.375），
+         * 所以 16:9 以外的比例下这一列不在正中。官网在超宽的屏上会掉出底边：这里放不下时
+         * 往上收，标语的底边至少离底 4 个单位。竖排的标志同理，不低于高度的 41.667%
+         */}
+        {logo !== undefined && (
+          <div className="absolute top-[min(calc(var(--ef-splash-unit)*27.625),calc(100%_-_var(--ef-splash-unit)*44.25))] left-[64.4531%] flex h-[calc(var(--ef-splash-unit)*16.75)] w-[calc(var(--ef-splash-unit)*16.5)] items-center justify-center cq-portrait:top-[min(calc(var(--ef-splash-unit)*50),41.667%)] cq-portrait:left-1/2 cq-portrait:h-[calc(var(--ef-splash-unit)*20.9375)] cq-portrait:w-[calc(var(--ef-splash-unit)*19.3125)] cq-portrait:-translate-1/2 [&>:is(img,svg)]:size-full [&>img]:object-contain">
+            {logo}
+          </div>
+        )}
+
+        <div className="absolute top-[min(calc(var(--ef-splash-unit)*63.375),calc(100%_-_var(--ef-splash-unit)*8.5))] right-[calc(var(--ef-splash-unit)*2)] left-[64.4531%] cq-portrait:top-auto cq-portrait:right-[calc(var(--ef-splash-unit)*4.625)] cq-portrait:bottom-[calc(var(--ef-splash-unit)*5.75)] cq-portrait:left-[calc(var(--ef-splash-unit)*4.625)]">
+          {decor === undefined && <Mark />}
+          {decor !== null && (
+            <div
+              aria-hidden="true"
+              className={cn(decorLayer, "absolute bottom-full left-0")}
+            >
+              {decor === undefined ? <DefaultDecor caption={caption} /> : decor}
+            </div>
+          )}
+          <span
+            aria-hidden="true"
+            className={cn(
+              decorLayer,
+              "mt-[calc(var(--ef-splash-unit)*1.25)] mb-[calc(var(--ef-splash-unit))] -ml-[calc(var(--ef-splash-unit)*21.625)] block h-0.5 w-[calc(var(--ef-splash-unit)*70)] bg-linear-to-r from-transparent via-neutral-0/10 to-transparent",
+            )}
+          />
+          {tagline !== undefined && (
+            <p className="text-[length:var(--_tagline)] leading-[1.35] wrap-anywhere">
+              {tagline}
+            </p>
+          )}
+        </div>
+
+        <div
+          role="progressbar"
+          aria-label={label}
+          aria-valuemin={0}
+          aria-valuemax={100}
+          aria-valuenow={travelling ? undefined : shown}
+          // 高对比模式下底色都被系统换掉：轨道剩一圈线，填充用系统的"选中"色（同 Progress）
+          className="absolute top-0 left-0 h-full w-[calc(var(--ef-splash-unit)*1.25)] forced-colors:outline forced-colors:-outline-offset-1 forced-colors:outline-[CanvasText] cq-portrait:top-auto cq-portrait:bottom-[calc(var(--ef-splash-unit)*17.75_+_(var(--_status)_-_var(--ef-splash-unit))*1.25_+_(var(--_tagline)_-_var(--ef-splash-unit)*1.5)*1.35)] cq-portrait:h-[calc(var(--ef-splash-unit)*2.5)] cq-portrait:w-[82.4074%]"
+        >
+          {travelling ? (
+            <span className="absolute inset-0 overflow-hidden">
+              <span className="absolute inset-x-0 top-0 h-2/5 animate-indeterminate-y bg-action motion-reduce:translate-y-3/4 forced-colors:bg-[Highlight] cq-portrait:inset-x-auto cq-portrait:inset-y-0 cq-portrait:left-0 cq-portrait:h-auto cq-portrait:w-2/5 cq-portrait:animate-indeterminate cq-portrait:motion-reduce:translate-x-3/4 cq-portrait:motion-reduce:translate-y-0" />
+            </span>
+          ) : (
+            <span className="absolute top-0 left-0 h-[calc(var(--ef-splash-progress)*1%)] w-full bg-action forced-colors:bg-[Highlight] cq-portrait:h-full cq-portrait:w-[calc(var(--ef-splash-progress)*1%)]" />
+          )}
+
+          {/* 读数骑在条的末端上：一条没有高度的基线，数字在线上面，状态字在线下面 */}
+          <div
+            aria-hidden="true"
+            className={cn(
+              "absolute top-[calc(var(--ef-splash-progress)*1%)] left-[calc(var(--ef-splash-unit)*3.125)] h-0 whitespace-nowrap cq-portrait:top-auto cq-portrait:-bottom-[calc(var(--ef-splash-unit)*1.75)] cq-portrait:left-[calc(var(--ef-splash-progress)*1%)] cq-portrait:ml-[calc(var(--ef-splash-unit)*0.75)]",
+              // 没有数字的时候条的末端不在哪：状态字往下让一点，别贴着上沿
+              travelling &&
+                "translate-y-[calc(var(--ef-splash-unit)*3)] cq-portrait:translate-y-0",
+            )}
+          >
+            {!indeterminate && (
+              <p className="absolute bottom-[calc(var(--ef-splash-unit)*1.625)] left-0 leading-none text-action">
+                <span className="mb-[calc(var(--ef-splash-unit)*0.25)] block h-[calc(var(--ef-splash-unit)*1.875)] w-[calc(var(--ef-splash-unit)*0.5)] rounded-[calc(var(--ef-splash-unit)*0.25)] bg-action" />
+                {/* 数字是计数器画的：它跟着那个整数变量补间，脚本不用一帧一帧去写 */}
+                <span className="text-[length:calc(var(--ef-splash-unit)*4.375)] font-medium tabular-nums [counter-reset:ef-splash_var(--ef-splash-percent)] before:content-[counter(ef-splash)]" />
+                <span className="text-[length:calc(var(--ef-splash-unit)*3.25)]">
+                  %
+                </span>
+              </p>
+            )}
+            <p className="absolute -top-[calc(var(--ef-splash-unit)*0.5)] left-0 text-[length:var(--_status)] leading-[1.25] text-ink-tertiary">
+              <span className="block h-[calc(var(--ef-splash-unit)*0.5)] w-[calc(var(--ef-splash-unit)*1.25)] border-x-[length:calc(var(--ef-splash-unit)*0.5)] border-current" />
+              {status}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* 铺满：等条走满（0.5s）再从左往右盖过去，0.6s，先慢后快（官网实测） */}
+      {leaving && (
+        <span
+          aria-hidden="true"
+          className="absolute inset-0 origin-left animate-fill bg-action [animation-delay:500ms] [animation-timing-function:cubic-bezier(1,0,0.7,1)] motion-reduce:hidden forced-colors:bg-[Highlight]"
+        />
+      )}
+    </div>
+  );
+}

package/src/components/splash-screen/index.ts

@@ -0,0 +1 @@
+export { SplashScreen, type SplashScreenProps } from "./SplashScreen";