@endfield-ui/react 1.1.0 → 1.2.1

package/src/components/toast/Toast.tsx

@@ -1,6 +1,5 @@
 import { Toast as BaseToast } from "@base-ui/react/toast";
 import {
-  createContext,
   isValidElement,
   useContext,
   useMemo,
@@ -15,6 +14,7 @@ import { StatusSuccess } from "../../icons/StatusSuccess";
 import { StatusWarning } from "../../icons/StatusWarning";
 import { cn } from "../../lib/cn";
 import { focusRing, focusRingInset } from "../../lib/focus-ring";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 export type ToastTone = "neutral" | "info" | "success" | "warning" | "danger";
 export type ToastPlacement = "bottom" | "center";
@@ -51,11 +51,13 @@ type ToastData = {
 /* 带操作的提示默认停留的时间：要留出读完再去点的工夫 */
 const ACTION_DURATION = 8000;
 
-const ToastContext = createContext<ToastApi | null>(null);
+const getToastContext = /* @__PURE__ */ createLazyContext<ToastApi | null>(
+  null,
+);
 
 /** 弹出轻提示。要在 `ToastProvider` 里面用。 */
 export function useToast(): ToastApi {
-  const toast = useContext(ToastContext);
+  const toast = useContext(getToastContext());
   if (!toast) {
     throw new Error("useToast 要在 <ToastProvider> 里面用");
   }
@@ -125,6 +127,7 @@ type ToastHostProps = {
 };
 
 function ToastHost({ placement, label, closeLabel, children }: ToastHostProps) {
+  const ToastContext = getToastContext();
   const { toasts, add, close } = BaseToast.useToastManager<ToastData>();
 
   const api = useMemo<ToastApi>(() => {
@@ -157,7 +160,7 @@ function ToastHost({ placement, label, closeLabel, children }: ToastHostProps) {
   }, [add, close]);
 
   return (
-    <ToastContext value={api}>
+    <ToastContext.Provider value={api}>
       {children}
       <BaseToast.Portal>
         <BaseToast.Viewport
@@ -178,9 +181,10 @@ function ToastHost({ placement, label, closeLabel, children }: ToastHostProps) {
                 data-theme="dark"
                 className={cn(
                   "pointer-events-auto absolute left-1/2 w-max max-w-full",
-                  // 边线是给暗色页面的：那里黑底和页面几乎一样深，要靠它把提示勾出来。
-                  // 亮色页面上它和提示的底几乎同色，看不出来
-                  "border border-line bg-black/80 text-base leading-[1.4] text-white",
+                  // 暗色页面上黑底和页面只差一档，靠环境阴影分开
+                  "bg-black/80 shadow-sm text-base leading-[1.4] text-white",
+                  // 高对比模式下系统把阴影关掉、底色换成页面色，提示就没有边界了：补一圈线
+                  "forced-colors:border forced-colors:border-[CanvasText]",
                   // 三样各走各的：淡入淡出 200ms；进场的位移 300ms；没划够就松手，滑回原位 200ms。
                   // 拖动中基元把过渡整个关掉，位置贴着手指
                   "transition-[opacity,translate,transform] duration-[var(--duration-fast),var(--duration-base),var(--duration-fast)] ease-[var(--ease-standard),var(--ease-exit),var(--ease-standard)]",
@@ -233,7 +237,7 @@ function ToastHost({ placement, label, closeLabel, children }: ToastHostProps) {
           })}
         </BaseToast.Viewport>
       </BaseToast.Portal>
-    </ToastContext>
+    </ToastContext.Provider>
   );
 }
 

package/src/components/toc/Toc.tsx

@@ -1,6 +1,5 @@
 import {
   Children,
-  createContext,
   useCallback,
   useContext,
   useEffect,
@@ -24,10 +23,11 @@ import { dropEmptyStyle } from "../../lib/inline-style";
 import { mergeRefs } from "../../lib/merge-refs";
 import { indicator } from "../../lib/motion";
 import { LinkElement, type LinkRender } from "../link-element/LinkElement";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 export type TocLevel = 1 | 2 | 3;
 
-const TocContext = createContext<{
+const getTocContext = /* @__PURE__ */ createLazyContext<{
   active: string | null;
   pick: (section: string) => void;
 }>({ active: null, pick: () => {} });
@@ -110,6 +110,7 @@ export function Toc({
   children,
   ...props
 }: TocProps) {
+  const TocContext = getTocContext();
   const navRef = useRef<HTMLElement>(null);
   // 当前项的粗条画在列表上：换一项时是同一段沿引线滑过去
   const listRef = useIndicator<HTMLUListElement>("[aria-current]");
@@ -262,7 +263,7 @@ export function Toc({
           "forced-colors:after:bg-[Highlight]",
         )}
       >
-        <TocContext value={context}>{children}</TocContext>
+        <TocContext.Provider value={context}>{children}</TocContext.Provider>
       </ul>
     </nav>
   );
@@ -310,7 +311,7 @@ export function TocItem({
   children,
   ...props
 }: TocItemProps) {
-  const { active, pick } = useContext(TocContext);
+  const { active, pick } = useContext(getTocContext());
   const current = section !== undefined && section === active;
 
   return (

package/src/components/toolbar/Toolbar.tsx

@@ -2,7 +2,6 @@ import { Toggle as BaseToggle } from "@base-ui/react/toggle";
 import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
 import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
 import {
-  createContext,
   useContext,
   useMemo,
   type ComponentProps,
@@ -13,12 +12,13 @@ import {
 import { cn } from "../../lib/cn";
 import { focusRing } from "../../lib/focus-ring";
 import type { LinkRender } from "../link-element/LinkElement";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 export type ToolbarSize = "sm" | "md";
 export type ToolbarVariant = "sunken" | "outline";
 export type ToolbarOrientation = "horizontal" | "vertical";
 
-const ToolbarContext = createContext<{
+const getToolbarContext = /* @__PURE__ */ createLazyContext<{
   size: ToolbarSize;
   orientation: ToolbarOrientation;
 }>({ size: "md", orientation: "horizontal" });
@@ -76,6 +76,7 @@ export function Toolbar({
   onKeyDown,
   ...props
 }: ToolbarProps) {
+  const ToolbarContext = getToolbarContext();
   const context = useMemo(() => ({ size, orientation }), [size, orientation]);
 
   // 基元只管方向键，Home / End 在这里补上：到第一个、最后一个
@@ -97,7 +98,7 @@ export function Toolbar({
   };
 
   return (
-    <ToolbarContext value={context}>
+    <ToolbarContext.Provider value={context}>
       <BaseToolbar.Root
         {...props}
         orientation={orientation}
@@ -114,7 +115,7 @@ export function Toolbar({
           className,
         )}
       />
-    </ToolbarContext>
+    </ToolbarContext.Provider>
   );
 }
 
@@ -171,7 +172,7 @@ const itemIcon = [
 ].join(" ");
 
 function useItemClass(iconOnly: boolean, className: string | undefined) {
-  const { size } = useContext(ToolbarContext);
+  const { size } = useContext(getToolbarContext());
   return cn(
     itemBase,
     itemSize[size],
@@ -359,7 +360,7 @@ export function ToolbarToggleGroup({
   className,
   ...props
 }: ToolbarToggleGroupProps) {
-  const { orientation } = useContext(ToolbarContext);
+  const { orientation } = useContext(getToolbarContext());
 
   return (
     <BaseToggleGroup

package/src/components/tooltip/Tooltip.tsx

@@ -1,7 +1,6 @@
 import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
 import {
   cloneElement,
-  createContext,
   useContext,
   useId,
   useSyncExternalStore,
@@ -12,6 +11,7 @@ import { createPortal } from "react-dom";
 import { usePortalScope } from "../../hooks/usePortalScope";
 import { cn } from "../../lib/cn";
 import { enterFromSide } from "../../lib/motion";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 export type TooltipSide = "top" | "bottom" | "left" | "right";
 export type TooltipAlign = "start" | "center" | "end";
@@ -19,7 +19,7 @@ export type TooltipAlign = "start" | "center" | "end";
 /* 规范：出现前约 300ms，消失不延迟 */
 const DEFAULT_DELAY = 300;
 
-const InProviderContext = createContext(false);
+const getInProviderContext = /* @__PURE__ */ createLazyContext(false);
 
 export type TooltipProviderProps = {
   /** 这一组提示统一的延迟，毫秒 */
@@ -37,9 +37,12 @@ export function TooltipProvider({
   timeout,
   children,
 }: TooltipProviderProps) {
+  const InProviderContext = getInProviderContext();
   return (
     <BaseTooltip.Provider delay={delay} timeout={timeout}>
-      <InProviderContext value={true}>{children}</InProviderContext>
+      <InProviderContext.Provider value={true}>
+        {children}
+      </InProviderContext.Provider>
     </BaseTooltip.Provider>
   );
 }
@@ -107,7 +110,7 @@ export function Tooltip({
   className,
 }: TooltipProps) {
   const descriptionId = useId();
-  const inProvider = useContext(InProviderContext);
+  const inProvider = useContext(getInProviderContext());
   // 提示是一块和页面相反的颜色。做成相反主题的局部主题，而不是直接用反转色：
   // 里面的键位提示、着色词因此也按这块底色取值，不会和底融在一起
   const { anchorRef, portalRef } = usePortalScope({ invertTheme: true });

package/src/components/top-bar/TopBar.tsx

@@ -1,6 +1,6 @@
 import type { ComponentProps, ReactNode } from "react";
 import { cn } from "../../lib/cn";
-import { NavActionContext } from "../nav-action/NavAction";
+import { getNavActionContext } from "../nav-action/NavAction";
 
 export type TopBarProps = ComponentProps<"header"> & {
   /** 最左边的标志。本库不带标志，传你自己的 */
@@ -28,6 +28,7 @@ export function TopBar({
   children,
   ...props
 }: TopBarProps) {
+  const NavActionContext = getNavActionContext();
   return (
     <header
       {...props}
@@ -40,7 +41,11 @@ export function TopBar({
       {brand && <div className="flex min-w-0 items-center">{brand}</div>}
       <div className="min-w-0 flex-1">{children}</div>
       {tools && <div className="flex shrink-0 items-center gap-1">{tools}</div>}
-      {action && <NavActionContext value="inline">{action}</NavActionContext>}
+      {action && (
+        <NavActionContext.Provider value="inline">
+          {action}
+        </NavActionContext.Provider>
+      )}
       {menu}
     </header>
   );

package/src/icons/ArrowCorner.tsx

@@ -1,7 +1,7 @@
 import { createIcon } from "./createIcon";
 
 /** 斜箭头 ↘：分节引导、"查看详情" */
-export const ArrowCorner = createIcon(
+export const ArrowCorner = /* @__PURE__ */ createIcon(
   "ArrowCorner",
   <path d="M5 5l14 14M19 7v12H7" />,
 );

package/src/icons/ArrowLeft.tsx

@@ -1,6 +1,6 @@
 import { createIcon } from "./createIcon";
 
-export const ArrowLeft = createIcon(
+export const ArrowLeft = /* @__PURE__ */ createIcon(
   "ArrowLeft",
   <path d="M20 12H5M11 5l-7 7 7 7" />,
 );

package/src/icons/ArrowRight.tsx

@@ -1,6 +1,6 @@
 import { createIcon } from "./createIcon";
 
-export const ArrowRight = createIcon(
+export const ArrowRight = /* @__PURE__ */ createIcon(
   "ArrowRight",
   <path d="M4 12h15M13 5l7 7-7 7" />,
 );

package/src/icons/CalendarIcon.tsx

@@ -4,7 +4,7 @@ import { createIcon } from "./createIcon";
  * 日历：日期字段右侧的记号。
  * 名字带 `Icon` 是因为 `Calendar` 已经是月历控件了
  */
-export const CalendarIcon = createIcon(
+export const CalendarIcon = /* @__PURE__ */ createIcon(
   "CalendarIcon",
   <path d="M4 6h16v14H4zM4 11h16M8 3v5M16 3v5" />,
 );

package/src/icons/Check.tsx

@@ -1,4 +1,7 @@
 import { createIcon } from "./createIcon";
 
 /** 对勾：已选、已完成 */
-export const Check = createIcon("Check", <path d="M4 12l6 6L20 6" />);
+export const Check = /* @__PURE__ */ createIcon(
+  "Check",
+  <path d="M4 12l6 6L20 6" />,
+);

package/src/icons/ChevronDown.tsx

@@ -1,3 +1,6 @@
 import { createIcon } from "./createIcon";
 
-export const ChevronDown = createIcon("ChevronDown", <path d="M4 9l8 8 8-8" />);
+export const ChevronDown = /* @__PURE__ */ createIcon(
+  "ChevronDown",
+  <path d="M4 9l8 8 8-8" />,
+);

package/src/icons/ChevronLeft.tsx

@@ -1,6 +1,6 @@
 import { createIcon } from "./createIcon";
 
-export const ChevronLeft = createIcon(
+export const ChevronLeft = /* @__PURE__ */ createIcon(
   "ChevronLeft",
   <path d="M15 4l-8 8 8 8" />,
 );

package/src/icons/ChevronRight.tsx

@@ -1,6 +1,6 @@
 import { createIcon } from "./createIcon";
 
-export const ChevronRight = createIcon(
+export const ChevronRight = /* @__PURE__ */ createIcon(
   "ChevronRight",
   <path d="M9 4l8 8-8 8" />,
 );

package/src/icons/Close.tsx

@@ -1,3 +1,6 @@
 import { createIcon } from "./createIcon";
 
-export const Close = createIcon("Close", <path d="M5 5l14 14M19 5L5 19" />);
+export const Close = /* @__PURE__ */ createIcon(
+  "Close",
+  <path d="M5 5l14 14M19 5L5 19" />,
+);

package/src/icons/Crosshair.tsx

@@ -1,7 +1,7 @@
 import { createIcon } from "./createIcon";
 
 /** 四个取景角加中心的准星：图鉴里"未获得"的占位符 */
-export const Crosshair = createIcon(
+export const Crosshair = /* @__PURE__ */ createIcon(
   "Crosshair",
   <path d="M3 8V3h5M16 3h5v5M21 16v5h-5M8 21H3v-5M12 9v6M9 12h6" />,
 );

package/src/icons/Lock.tsx

@@ -1,6 +1,6 @@
 import { createIcon } from "./createIcon";
 
-export const Lock = createIcon(
+export const Lock = /* @__PURE__ */ createIcon(
   "Lock",
   <path d="M5 11h14v10H5zM8 11V7a4 4 0 0 1 8 0v4" />,
 );

package/src/icons/Menu.tsx

@@ -1,4 +1,7 @@
 import { createIcon } from "./createIcon";
 
 /** 三条横线：打开菜单 */
-export const Menu = createIcon("Menu", <path d="M3 6h18M3 12h18M3 18h18" />);
+export const Menu = /* @__PURE__ */ createIcon(
+  "Menu",
+  <path d="M3 6h18M3 12h18M3 18h18" />,
+);

package/src/icons/Minus.tsx

@@ -1,4 +1,4 @@
 import { createIcon } from "./createIcon";
 
 /** 短横：半选、减少 */
-export const Minus = createIcon("Minus", <path d="M4 12h16" />);
+export const Minus = /* @__PURE__ */ createIcon("Minus", <path d="M4 12h16" />);

package/src/icons/Plus.tsx

@@ -1,3 +1,6 @@
 import { createIcon } from "./createIcon";
 
-export const Plus = createIcon("Plus", <path d="M12 4v16M4 12h16" />);
+export const Plus = /* @__PURE__ */ createIcon(
+  "Plus",
+  <path d="M12 4v16M4 12h16" />,
+);

package/src/icons/StatusDanger.tsx

@@ -1,7 +1,7 @@
 import { createIcon } from "./createIcon";
 
 /** 菱形：危险、错误 */
-export const StatusDanger = createIcon(
+export const StatusDanger = /* @__PURE__ */ createIcon(
   "StatusDanger",
   <path d="M12 2.5l9.5 9.5-9.5 9.5L2.5 12zM12 7v6M12 15v2" />,
 );

package/src/icons/StatusInfo.tsx

@@ -1,7 +1,7 @@
 import { createIcon } from "./createIcon";
 
 /** 方框：说明。四种状态图标各用一种外形，不只靠颜色区分 */
-export const StatusInfo = createIcon(
+export const StatusInfo = /* @__PURE__ */ createIcon(
   "StatusInfo",
   <path d="M4 4h16v16H4zM12 11v6M12 7v2" />,
 );

package/src/icons/StatusSuccess.tsx

@@ -1,7 +1,7 @@
 import { createIcon } from "./createIcon";
 
 /** 圆 + 对勾：成功 */
-export const StatusSuccess = createIcon(
+export const StatusSuccess = /* @__PURE__ */ createIcon(
   "StatusSuccess",
   <>
     <circle cx="12" cy="12" r="9" />

package/src/icons/StatusWarning.tsx

@@ -1,7 +1,7 @@
 import { createIcon } from "./createIcon";
 
 /** 三角：警告 */
-export const StatusWarning = createIcon(
+export const StatusWarning = /* @__PURE__ */ createIcon(
   "StatusWarning",
   <path d="M12 4l9 16H3zM12 10v5M12 16.5v2" />,
 );

package/src/icons/TriangleRight.tsx

@@ -1,7 +1,7 @@
 import { createIcon } from "./createIcon";
 
 /** 实心三角 ▶：前往、展开 */
-export const TriangleRight = createIcon(
+export const TriangleRight = /* @__PURE__ */ createIcon(
   "TriangleRight",
   <path d="M7 4l12 8-12 8z" fill="currentColor" stroke="none" />,
 );

package/src/icons/Upload.tsx

@@ -1,7 +1,7 @@
 import { createIcon } from "./createIcon";
 
 /** 上传：一个托盘，上面一支朝上的箭头 */
-export const Upload = createIcon(
+export const Upload = /* @__PURE__ */ createIcon(
   "Upload",
   <path d="M12 16V4M7 9l5-5 5 5M4 15v5h16v-5" />,
 );

package/src/index.ts

@@ -63,6 +63,7 @@ export * from "./components/skeleton";
 export * from "./components/slider";
 export * from "./components/sparkline";
 export * from "./components/spinner";
+export * from "./components/splash-screen";
 export * from "./components/stat";
 export * from "./components/stepper";
 export * from "./components/steps";

package/src/lib/cn.ts

@@ -5,7 +5,7 @@ import { extendTailwindMerge } from "tailwind-merge";
  * theme.css 里的自定义令牌名需要登记，否则 tailwind-merge 会把 `text-micro`
  * 当成颜色，与 `text-ink` 互相覆盖。改动 theme.css 的令牌名时同步改这里。
  */
-const twMerge = extendTailwindMerge({
+const twMerge = /* @__PURE__ */ extendTailwindMerge({
   extend: {
     theme: {
       text: ["micro", "ghost"],

package/src/lib/create-lazy-context.ts

@@ -0,0 +1,6 @@
+import { createContext, type Context } from "react";
+
+export function createLazyContext<T>(defaultValue: T) {
+  let context: Context<T> | undefined;
+  return () => (context ??= createContext(defaultValue));
+}

package/src/styles/theme.css

@@ -374,6 +374,7 @@
   --animate-turn-in: ef-turn-in 300ms ease-out both;
   --animate-fade-in: ef-fade-in 300ms ease-out both;
   --animate-indeterminate: ef-indeterminate 1.2s linear infinite alternate;
+  --animate-indeterminate-y: ef-indeterminate-y 1.2s linear infinite alternate;
   --animate-pulse: ef-pulse 2s ease-in-out infinite;
   --animate-bracket-in: ef-bracket-in 200ms ease-out both;
   --animate-shift-in: ef-shift-in 300ms ease-out both;
@@ -507,6 +508,16 @@
     }
   }
 
+  /* 同上，竖着的轨道：开屏页贴左缘的那根条 */
+  @keyframes ef-indeterminate-y {
+    from {
+      transform: translateY(0);
+    }
+    to {
+      transform: translateY(150%);
+    }
+  }
+
   /* 骨架：很轻的明度往返，不是扫光 */
   @keyframes ef-pulse {
     0%,
@@ -610,6 +621,28 @@
   --color-info: var(--ef-info);
 }
 
+/* ------------------------------------------------------------------ */
+/* 开屏页的进度                                                         */
+/* ------------------------------------------------------------------ */
+
+/*
+ * SplashScreen 把进度写成根上的这两个变量，注册成数值之后才能过渡：条长、读数的位置、
+ * 底图的模糊都由第一个算，读数的数字是第二个（整数，经计数器显示）。两个一起过渡，
+ * 所以这四样天然同拍，半路改值也是从当前的位置折过去。
+ * 不认 @property 的浏览器里它们只是普通变量：值照样对，只是不补间、直接到位。
+ */
+@property --ef-splash-progress {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+
+@property --ef-splash-percent {
+  syntax: "<integer>";
+  inherits: true;
+  initial-value: 0;
+}
+
 /* ------------------------------------------------------------------ */
 /* 主题切换                                                             */
 /* ------------------------------------------------------------------ */

package/src/styles/utilities.css

@@ -240,3 +240,11 @@
 /* ------------------------------------------------------------------ */
 
 @custom-variant choice-diamond (&:where([data-choice="diamond"], [data-choice="diamond"] *));
+
+/* ------------------------------------------------------------------ */
+/* 所在的容器是竖着的（高大于宽）：开屏页据此换成竖排。                  */
+/* 看的是最近的尺寸容器（container-type: size），不是视口——             */
+/* 放进一个框里的开屏页，横竖由那个框说了算                              */
+/* ------------------------------------------------------------------ */
+
+@custom-variant cq-portrait (@container (orientation: portrait));