@endfield-ui/react 1.0.1 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@endfield-ui/react",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "description": "终末地风格的 React 基础控件库（非官方）",
   "keywords": [
     "react",
@@ -32,6 +32,7 @@
     "src",
     "!src/**/*.test.*",
     "!src/test",
+    "!src/game",
     "NOTICE.md"
   ],
   "exports": {
@@ -43,6 +44,11 @@
     "./styles.css": "./dist/styles.css",
     "./theme.css": "./src/styles/theme.css",
     "./utilities.css": "./src/styles/utilities.css",
+    "./game": {
+      "types": "./dist/game.d.ts",
+      "default": "./dist/game.js"
+    },
+    "./game.css": "./dist/game/styles.css",
     "./package.json": "./package.json"
   },
   "peerDependencies": {
@@ -77,8 +83,9 @@
     "vitest": "^5.0.3"
   },
   "scripts": {
-    "build": "tsdown && pnpm build:css",
+    "build": "tsdown && pnpm build:css && pnpm build:game",
     "build:css": "tailwindcss -i src/styles/index.css -o dist/styles.css --minify",
+    "build:game": "tailwindcss -i src/game/styles.css -o dist/game/styles.css --minify && node scripts/copy-game-assets.mjs",
     "test": "vitest run",
     "test:watch": "vitest",
     "typecheck": "tsc --noEmit"

package/src/components/README.md

@@ -1,5 +1,7 @@
 # components
 
+主入口（`@endfield-ui/react`）的控件。照游戏内界面复刻的那一组在 [`../game`](../game/README.md)，独立入口，约定不同；这个目录里的东西不许引它。
+
 | 目录 | 导出 | 规范 |
 | --- | --- | --- |
 | `button/` | `Button`、`ButtonGroup` | [按钮](../../../../docs/design/components/button.md) |
@@ -60,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,
         )}