@endfield-ui/react 1.0.0 → 1.1.0

package/dist/index.js

@@ -1487,7 +1487,7 @@ function DashIndicator({ count, index, className, ...props }) {
 		role: "img",
 		"aria-label": `第 ${current + 1} 项，共 ${total} 项`,
 		...props,
-		className: cn("inline-flex items-center gap-1", className),
+		className: cn("inline-flex max-w-full min-w-0 items-center gap-1", className),
 		children: Array.from({ length: total }, (_, position) => /* @__PURE__ */ jsx("span", {
 			"data-current": position === current ? "" : void 0,
 			className: cn("h-0.5 transition-[width,background-color] duration-(--duration-base) ease-standard", position === current ? "w-8 bg-accent-ink forced-colors:bg-[Highlight]" : "w-4 bg-line-strong forced-colors:bg-[CanvasText]")
@@ -1644,7 +1644,7 @@ function Carousel({ index: indexProp, defaultIndex = 0, onIndexChange, loop = fa
 				"aria-hidden": "true",
 				className: "flex items-center gap-3",
 				children: [/* @__PURE__ */ jsx("span", {
-					className: "font-tech text-xs text-ink-secondary tabular-nums",
+					className: "shrink-0 font-tech text-xs whitespace-nowrap text-ink-secondary tabular-nums",
 					children: `${index + 1} / ${count}`
 				}), indicator && /* @__PURE__ */ jsx(DashIndicator, {
 					count,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@endfield-ui/react",
-  "version": "1.0.0",
+  "version": "1.1.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) |
@@ -138,7 +140,7 @@ components/
 - 每个交互组件都要有 `:focus-visible` 样式，用 [`focusRing`](../lib/focus-ring.ts)；会被滚动容器裁切的地方用 `focusRingInset`；外框自己不能聚焦、里面的控件能（输入框）时用 `focusRingWithin`。焦点环不能被 `clip-path` 裁掉（做法见 [切角与斜楔](../../../../docs/design/elements/corner-and-wedge.md)）。
 - 悬停用 Tailwind 的 `hover:`，它只在有指针的设备上生效。
 - 组件内部的响应式看**自身宽度**，用容器查询（`@container` + `@md:` 这类变体），不用视口断点（`md:`）：组件不知道自己会被放进多窄的栏里。视口断点只留给"必须和页面布局同步切换"的地方，目前只有 `SectionTitle` 的 `side` 形态。
-- 会出现英文长单词的大号文字加 `wrap-anywhere` 兜底，并确保它所在的弹性子项能收缩（`min-w-0` 或 `max-w-full`）。有意不换行的控件（按钮、标签、页签）除外。
+- 会出现英文长单词的大号文字加 `wrap-anywhere` 兜底，并确保它所在的弹性子项能收缩（`min-w-0` 或 `max-w-full`）。有意不换行的控件（按钮、标签、页签）除外。中间带空格的短读数（轮播的 `1 / 5`）不折行也不收缩（`shrink-0 whitespace-nowrap`）：同一行里让别的东西去收，不然它被挤成一竖条。
 - 装饰元素（竖条、箭头、分隔线）加 `aria-hidden`。
 - 动效遵守 `prefers-reduced-motion`：降级后内容必须停在终态。循环动画停下来的样子不能被看成一个具体的值：不确定进度的色块停在正中，进度环换成一圈虚线。
 - 用 `group` / `peer` 时给 `group` 起名字（`group/card` + `group-hover/card:`）：不起名的 `group-hover:` 会被外层任何一个 `group` 的悬停带着走，控件一旦被放进别的可悬停容器就会出错。

package/src/components/carousel/Carousel.tsx

@@ -186,7 +186,8 @@ export function Carousel({
       <div className="flex flex-col gap-1">
         {/* 看得见的计数和短横只给眼睛：同样的话下面的说明区会播报 */}
         <div aria-hidden="true" className="flex items-center gap-3">
-          <span className="font-tech text-xs text-ink-secondary tabular-nums">
+          {/* 这一行放不下时让短横去收窄：计数中间有空格，被挤了会折成一竖条 */}
+          <span className="shrink-0 font-tech text-xs whitespace-nowrap text-ink-secondary tabular-nums">
             {`${index + 1} / ${count}`}
           </span>
           {indicator && <DashIndicator count={count} index={index} />}

package/src/components/dash-indicator/DashIndicator.tsx

@@ -26,7 +26,11 @@ export function DashIndicator({
       role="img"
       aria-label={`第 ${current + 1} 项，共 ${total} 项`}
       {...props}
-      className={cn("inline-flex items-center gap-1", className)}
+      className={cn(
+        // 放不下时各根等比收窄，不顶出容器：短横本来就能收，卡住的是这一层自己的最小宽度
+        "inline-flex max-w-full min-w-0 items-center gap-1",
+        className,
+      )}
     >
       {Array.from({ length: total }, (_, position) => (
         <span

package/src/styles/README.md

@@ -6,13 +6,17 @@
 | [utilities.css](utilities.css) | `@utility`：母题工具类（斜纹、切角、斜楔、角括号、镂空字、警示条纹、竖条变箭头），以及菱形表单符号的开关 |
 | [index.css](index.css) | 入口：`tailwindcss` → `theme.css` → `utilities.css` → 基础样式 → `@source` |
 
-对外的三个入口（见包的 `exports`）：
+对外的入口（见包的 `exports`）：
 
 | 引入路径 | 对应 | 给谁用 |
 | --- | --- | --- |
 | `@endfield-ui/react/tailwind.css` | `index.css` | 用 Tailwind v4 的项目，代替 `@import "tailwindcss"` |
 | `@endfield-ui/react/styles.css` | `dist/styles.css` | 不用 Tailwind 的项目，预编译产物 |
 | `@endfield-ui/react/theme.css` | `theme.css` | 只要令牌、不要组件 |
+| `@endfield-ui/react/utilities.css` | `utilities.css` | 只要母题工具类 |
+| `@endfield-ui/react/game.css` | `dist/game/styles.css` | 用了 [Game 实机风格](../game/README.md)那一类控件的项目；纯 CSS，和上面的主样式一起引 |
+
+Game 实机风格的样式不在这个目录里，也不在主样式里：源码是 [`../game/styles.css`](../game/styles.css) 汇总的每个控件一份纯 CSS，`index.css` 用 `@source not` 把那个目录排除在扫描之外。
 
 ## theme.css 的结构
 

package/src/styles/index.css

@@ -16,6 +16,11 @@
  * 焦点环这类共用的类名写在 lib 里。
  */
 @source "../";
+/*
+ * game 目录不扫：那一类是独立入口（`@endfield-ui/react/game`），样式自己一份纯 CSS，
+ * 不用工具类。扫了它，源码里碰巧和工具类同名的词会混进这份产物。
+ */
+@source not "../game";
 
 @layer base {
   body {