@_tc/template-core 0.0.1-bate.6 → 0.0.1-bate.60

package/fe/packages/common/i18n/index.js

@@ -0,0 +1,162 @@
+import "./default.js";
+import "./en-US.js";
+import { defaultLanguage, languageLocalKey, translations } from "./locales.js";
+//#region packages/common/i18n/index.ts
+var isPlainI18nDictionary = (value) => {
+	return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+};
+/**
+* 深合并单个语言包。
+* 嵌套对象递归合并，字符串、数组、数字等叶子节点直接以 patch 覆盖 base。
+*/
+var mergeI18nDictionary = (base = {}, patch = {}) => {
+	const next = { ...base };
+	Object.entries(patch).forEach(([key, value]) => {
+		const current = next[key];
+		if (isPlainI18nDictionary(current) && isPlainI18nDictionary(value)) {
+			next[key] = mergeI18nDictionary(current, value);
+			return;
+		}
+		next[key] = value;
+	});
+	return next;
+};
+/**
+* 合并多语言资源。
+* 结构示例：{ 'zh-CN': { common: { ok: '确定' } }, 'en-US': { common: { ok: 'OK' } } }
+*/
+var mergeI18nResources = (base = {}, patch = {}) => {
+	const next = { ...base };
+	Object.entries(patch).forEach(([language, messages]) => {
+		if (!messages) return;
+		next[language] = mergeI18nDictionary(next[language], messages);
+	});
+	return next;
+};
+/**
+* 根据点分 key 从语言包中取值。
+* 例如 common.submit 会读取 resources[language].common.submit。
+*/
+var getI18nPathValue = (dictionary, key) => {
+	if (!dictionary) return void 0;
+	return key.split(".").reduce((value, currentKey) => {
+		if (!isPlainI18nDictionary(value)) return void 0;
+		return value[currentKey];
+	}, dictionary);
+};
+/**
+* 替换文案中的插值占位符。
+* 例如 "Hello, {name}" + { name: "Tom" } => "Hello, Tom"。
+*/
+var interpolateI18nMessage = (value, data) => {
+	if (!data) return value;
+	return value.replace(/\{([A-Za-z0-9_]+)\}/g, (match, key) => {
+		const nextValue = data[key];
+		return typeof nextValue === "undefined" || nextValue === null ? match : String(nextValue);
+	});
+};
+/**
+* 纯翻译函数：只依赖传入的 state。
+* 优先级：指定语言 -> 兜底语言 -> options.fallback -> 原 key。
+*/
+var translate = (state, key, fillingData, options) => {
+	const language = options?.language || state.language;
+	const fallbackLanguage = options?.fallbackLanguage || state.fallbackLanguage;
+	const value = getI18nPathValue(state.resources[language], key) ?? getI18nPathValue(state.resources[fallbackLanguage], key) ?? options?.fallback ?? key;
+	return typeof value === "string" ? interpolateI18nMessage(value, fillingData) : value;
+};
+var getBrowserWindow = () => {
+	return globalThis.window;
+};
+/**
+* 初始化时优先读取本地缓存语言。
+* SSR 环境没有 window，直接回退到默认语言。
+*/
+var getStoredLanguage = (storageKey) => {
+	const windowRef = getBrowserWindow();
+	if (!windowRef) return defaultLanguage;
+	return windowRef.localStorage.getItem(storageKey) || "zh-CN";
+};
+/**
+* 持久化当前语言，用于刷新页面后保持用户选择。
+*/
+var persistLanguage = (storageKey, language) => {
+	const windowRef = getBrowserWindow();
+	if (!windowRef) return;
+	windowRef.localStorage.setItem(storageKey, language);
+};
+var createInitialState = () => ({
+	language: getStoredLanguage(languageLocalKey),
+	fallbackLanguage: defaultLanguage,
+	resources: translations,
+	storageKey: languageLocalKey,
+	persist: true
+});
+var createI18nStore = () => {
+	let state;
+	const listeners = /* @__PURE__ */ new Set();
+	const setState = (partial) => {
+		const previousState = state;
+		const nextPartial = typeof partial === "function" ? partial(state) : partial;
+		state = {
+			...state,
+			...nextPartial
+		};
+		listeners.forEach((listener) => listener(state, previousState));
+	};
+	state = {
+		...createInitialState(),
+		t: (key, fillingData, options) => i18n(key, fillingData, options),
+		setLanguage: (language) => {
+			setState({ language });
+			const { persist, storageKey } = state;
+			if (persist) persistLanguage(storageKey, language);
+		},
+		setFallbackLanguage: (fallbackLanguage) => {
+			setState({ fallbackLanguage });
+		},
+		setResources: (resources, options) => {
+			setState((currentState) => ({ resources: options?.merge ? mergeI18nResources(currentState.resources, resources) : resources }));
+		},
+		addResources: (language, messages, options) => {
+			setState((currentState) => {
+				const shouldMerge = options?.merge ?? true;
+				const currentMessages = currentState.resources[language];
+				return { resources: {
+					...currentState.resources,
+					[language]: shouldMerge ? mergeI18nDictionary(currentMessages, messages) : messages
+				} };
+			});
+		},
+		configureI18n: (config) => {
+			setState(config);
+		},
+		resetI18n: () => {
+			setState(createInitialState());
+		}
+	};
+	const initialStoreState = state;
+	return {
+		getState: () => state,
+		getInitialState: () => initialStoreState,
+		setState,
+		subscribe: (listener) => {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		}
+	};
+};
+var i18nStore = createI18nStore();
+/**
+* 对外使用的 i18n 函数。
+* 每次调用都会读取最新 state，适合在非 React 代码中直接使用。
+*/
+var i18n = (key, fillingData, options) => {
+	return translate(i18nStore.getState(), key, fillingData, options);
+};
+var t = i18n;
+var getLanguage = i18n;
+//#endregion
+export { getI18nPathValue, getLanguage, i18n, i18nStore, interpolateI18nMessage, isPlainI18nDictionary, mergeI18nDictionary, mergeI18nResources, t, translate };

package/fe/packages/common/i18n/locales.d.ts

@@ -0,0 +1,7 @@
+import type { I18nResources } from "./types";
+export declare const defaultLanguage: "zh-CN";
+export declare const languageLocalKey = "tc_language";
+export declare const translations: I18nResources;
+export type Language = keyof typeof translations | (string & {});
+export * from "./default";
+export * from "./en-US";

package/fe/packages/common/i18n/locales.js

@@ -0,0 +1,11 @@
+import { defaultLanguageResources } from "./default.js";
+import { defaultEnglishResources } from "./en-US.js";
+//#region packages/common/i18n/locales.ts
+var defaultLanguage = "zh-CN";
+var languageLocalKey = "tc_language";
+var translations = {
+	"zh-CN": defaultLanguageResources,
+	"en-US": defaultEnglishResources
+};
+//#endregion
+export { defaultLanguage, languageLocalKey, translations };

package/fe/packages/common/i18n/types.d.ts

@@ -0,0 +1,46 @@
+export type I18nLanguage = string;
+export type I18nPrimitive = string | number | boolean | null | undefined;
+export type I18nMessage = I18nPrimitive | I18nMessage[] | readonly I18nMessage[] | I18nDictionary;
+export interface I18nDictionary {
+    [key: string]: I18nMessage;
+}
+export type I18nResources<Language extends I18nLanguage = I18nLanguage> = Partial<Record<Language, I18nDictionary>>;
+export type I18nInterpolationValues = Record<string, I18nPrimitive>;
+export interface I18nTranslateState {
+    language: I18nLanguage;
+    fallbackLanguage: I18nLanguage;
+    resources: I18nResources;
+}
+export interface I18nState extends I18nTranslateState {
+    storageKey: string;
+    persist: boolean;
+}
+export interface I18nTranslateOptions {
+    language?: I18nLanguage;
+    fallbackLanguage?: I18nLanguage;
+    fallback?: I18nMessage;
+}
+export interface I18nSetResourcesOptions {
+    merge?: boolean;
+}
+export interface I18nAddResourcesOptions {
+    merge?: boolean;
+}
+export type I18nTranslator = <T = string>(key: string, fillingData?: I18nInterpolationValues, options?: I18nTranslateOptions) => T | string;
+export interface I18nActions {
+    setLanguage: (language: I18nLanguage) => void;
+    setFallbackLanguage: (language: I18nLanguage) => void;
+    setResources: (resources: I18nResources, options?: I18nSetResourcesOptions) => void;
+    addResources: (language: I18nLanguage, messages: I18nDictionary, options?: I18nAddResourcesOptions) => void;
+    configureI18n: (config: Partial<Pick<I18nState, 'storageKey' | 'persist'>>) => void;
+    resetI18n: () => void;
+    t: I18nTranslator;
+}
+export type I18nStore = I18nState & I18nActions;
+export type I18nStoreListener = (state: I18nStore, previousState: I18nStore) => void;
+export interface I18nStoreApi {
+    getState: () => I18nStore;
+    getInitialState: () => I18nStore;
+    setState: (partial: Partial<I18nStore> | ((state: I18nStore) => Partial<I18nStore>)) => void;
+    subscribe: (listener: I18nStoreListener) => () => void;
+}

package/fe/packages/common/index.d.ts

@@ -0,0 +1,10 @@
+export * from "./array";
+export * from "./cache";
+export * from "./guards";
+export * from "./http";
+export * from "./i18n";
+export * from "./log";
+export * from "./number";
+export * from "./object";
+export * from "./string";
+export * from "./types";

package/fe/packages/common/log/index.d.ts

@@ -0,0 +1,32 @@
+export declare const ANSI_RESET = "\u001B[0m";
+export declare const ansiColors: {
+    readonly black: "\u001B[30m";
+    readonly red: "\u001B[31m";
+    readonly green: "\u001B[32m";
+    readonly yellow: "\u001B[33m";
+    readonly blue: "\u001B[34m";
+    readonly magenta: "\u001B[35m";
+    readonly pink: "\u001B[95m";
+    readonly cyan: "\u001B[36m";
+    readonly white: "\u001B[37m";
+    readonly gray: "\u001B[90m";
+};
+export type LogColor = keyof typeof ansiColors;
+export type ColorLogOptions = {
+    color?: LogColor;
+    prefix?: string;
+    suffix?: string;
+};
+export type ColorLogAffixes = Omit<ColorLogOptions, 'color'>;
+export declare const colorize: (message: unknown, color?: LogColor) => string;
+export declare const joinColorized: (...messages: readonly unknown[]) => string;
+export declare const logJoinColorized: (...messages: readonly unknown[]) => void;
+export declare function colorLog(color: LogColor, ...data: unknown[]): void;
+export declare function colorLog(...data: unknown[]): void;
+export declare const logColor: (color: LogColor, ...data: unknown[]) => void;
+export declare const logColorized: (...messages: readonly unknown[]) => void;
+export declare const logGreen: (...data: unknown[]) => void;
+export declare const logYellow: (...data: unknown[]) => void;
+export declare const logPink: (...data: unknown[]) => void;
+export declare const logWhite: (...data: unknown[]) => void;
+export declare const logRed: (...data: unknown[]) => void;

package/fe/packages/common/number/index.d.ts

@@ -0,0 +1,2 @@
+export declare const clamp: (value: number, min: number, max: number) => number;
+export declare const toFiniteNumber: (value: unknown, fallback?: number) => number;

package/fe/packages/common/object/filterEmpty.d.ts

@@ -0,0 +1,2 @@
+export declare function filterEmpty<T>(data: T): T | undefined;
+export declare const filtereEmpty: typeof filterEmpty;

package/fe/packages/common/object/filterEmpty.js

@@ -0,0 +1,28 @@
+import { isPlainObject } from "../guards/index.js";
+//#region packages/common/object/filterEmpty.ts
+var isEmptyValue = (value) => {
+	if (value === void 0) return true;
+	if (Array.isArray(value)) return value.length === 0;
+	if (isPlainObject(value)) return Object.keys(value).length === 0;
+	return false;
+};
+var filterEmptyValue = (value) => {
+	if (Array.isArray(value)) {
+		const result = value.map((item) => filterEmptyValue(item)).filter((item) => !isEmptyValue(item));
+		return result.length > 0 ? result : void 0;
+	}
+	if (isPlainObject(value)) {
+		const result = {};
+		for (const [key, item] of Object.entries(value)) {
+			const nextValue = filterEmptyValue(item);
+			if (!isEmptyValue(nextValue)) result[key] = nextValue;
+		}
+		return Object.keys(result).length > 0 ? result : void 0;
+	}
+	return value;
+};
+function filterEmpty(data) {
+	return filterEmptyValue(data);
+}
+//#endregion
+export { filterEmpty };

package/fe/packages/common/object/filtereEmpty.d.ts

@@ -0,0 +1 @@
+export { filterEmpty, filtereEmpty } from "./filterEmpty";

package/fe/packages/common/object/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./filterEmpty";
+export declare const pick: <T extends object, K extends keyof T>(target: T, keys: readonly K[]) => Pick<T, K>;
+export declare const omit: <T extends object, K extends keyof T>(target: T, keys: readonly K[]) => Omit<T, K>;
+export declare const mapValues: <T extends object, TResult>(target: T, mapper: <K extends keyof T>(value: T[K], key: K) => TResult) => { [K in keyof T]: TResult; };

package/fe/packages/common/string/index.d.ts

@@ -0,0 +1,3 @@
+export declare const isBlank: (value: string | null | undefined) => boolean;
+export declare const capitalize: (value: string) => string;
+export declare const kebabCase: (value: string) => string;

package/fe/packages/common/types/index.d.ts

@@ -0,0 +1,3 @@
+export type Maybe<T> = T | null | undefined;
+export type Primitive = string | number | boolean | bigint | symbol | null | undefined;
+export type Dictionary<T = unknown> = Record<string, T>;

package/fe/packages/react/hooks/useBreadcrumb.d.ts

@@ -0,0 +1,9 @@
+export declare const useBreadcrumb: import("zustand").UseBoundStore<import("zustand").StoreApi<{
+    items: import("../ui/index").BreadcrumbItemData[];
+} & {
+    setItems: (items: import("../ui/index").BreadcrumbItemData[]) => void;
+    addItem: (item: import("../ui/index").BreadcrumbItemData) => void;
+    removeItem: (id: string | number) => void;
+    clearItems: () => void;
+    setActiveItem: (id: string | number) => void;
+}>>;

package/fe/packages/react/hooks/useBreadcrumb.js

@@ -0,0 +1,5 @@
+import { useBreadcrumbStore } from "../ui/stores/breadcrumb.js";
+//#region packages/react/hooks/useBreadcrumb.ts
+var useBreadcrumb = useBreadcrumbStore;
+//#endregion
+export { useBreadcrumb };

package/fe/packages/react/hooks/useExecuteOnce.d.ts

@@ -0,0 +1,11 @@
+export declare const executionPhaseType: {
+    readonly mount: "mount";
+    readonly render: "render";
+    readonly unMount: "unMount";
+};
+type ExecutionPhaseTypeKeys = keyof typeof executionPhaseType;
+export type ExecutionPhaseType = (typeof executionPhaseType)[ExecutionPhaseTypeKeys];
+export default function useExecuteOnce<T>(factory: () => T, options?: {
+    executionPhase: ExecutionPhaseType[] | ExecutionPhaseType;
+}): T | null;
+export {};

package/fe/packages/react/hooks/useExecuteOnce.js

@@ -0,0 +1,47 @@
+import { useEffect, useMemo, useRef } from "react";
+//#region packages/react/hooks/useExecuteOnce.ts
+var executionPhaseType = {
+	mount: "mount",
+	render: "render",
+	unMount: "unMount"
+};
+/**
+* 
+* @description 在各个阶段只触发一次
+*  @demo
+* ```
+const count = useExecuteOnce(() => {
+console.log('123'); // 只会在第一次render时触发
+return 123
+})
+
+// count 123
+
+* ```
+*/
+function useExecuteOnce(factory, options) {
+	const { executionPhase: pExecutionPhase = executionPhaseType.render } = options ?? {};
+	const result = useRef(null);
+	const _executionPhase = useMemo(() => typeof pExecutionPhase === "string" ? [pExecutionPhase] : pExecutionPhase, [pExecutionPhase]);
+	const allowExecution = useRef([]);
+	const executionPhase = useRef(_executionPhase);
+	const runFN = (phase) => {
+		if (!allowExecution.current.includes(phase)) {
+			result.current = factory();
+			allowExecution.current.push(phase);
+		}
+	};
+	const fn = useRef(runFN);
+	executionPhase.current = _executionPhase;
+	fn.current = runFN;
+	if (executionPhase.current.includes(executionPhaseType.render)) fn.current(executionPhaseType.render);
+	useEffect(() => {
+		if (executionPhase.current.includes(executionPhaseType.mount)) fn.current(executionPhaseType["mount"]);
+		return () => {
+			if (executionPhase.current.includes(executionPhaseType["unMount"])) fn.current(executionPhaseType["unMount"]);
+		};
+	}, []);
+	return result.current;
+}
+//#endregion
+export { useExecuteOnce as default, executionPhaseType };

package/fe/packages/react/hooks/useInit.d.ts

@@ -0,0 +1,2 @@
+declare const useInit: (callback: (isInit: boolean) => void) => void;
+export default useInit;

package/fe/packages/react/hooks/useInit.js

@@ -0,0 +1,11 @@
+import { useRef } from "react";
+//#region packages/react/hooks/useInit.ts
+var useInit = (callback) => {
+	const isInit = useRef(false);
+	if (!isInit.current) {
+		callback(isInit.current);
+		isInit.current = true;
+	}
+};
+//#endregion
+export { useInit as default };

package/fe/packages/react/hooks/useLanguage.d.ts

@@ -0,0 +1 @@
+export declare function useLanguage(): import("../ui/index").I18nStore;

package/fe/packages/react/hooks/useLanguage.js

@@ -0,0 +1,8 @@
+import { useI18nStore } from "../ui/i18n/useI18n.js";
+import "../ui/stores/language.js";
+//#region packages/react/hooks/useLanguage.ts
+function useLanguage() {
+	return useI18nStore();
+}
+//#endregion
+export { useLanguage };

package/fe/packages/react/hooks/usePagination.d.ts

@@ -0,0 +1,15 @@
+type PaginationValue = {
+    current: number;
+    size: number;
+    total: number;
+};
+type IParams = {
+    defaultValue?: PaginationValue;
+};
+export default function usePagination(params?: IParams): import("react").RefObject<{
+    current: number;
+    size: number;
+    total: number;
+    onChange: (params: Partial<PaginationValue>) => void;
+}>;
+export {};

package/fe/packages/react/hooks/usePagination.js

@@ -0,0 +1,30 @@
+import useInit from "./useInit.js";
+import { useCallback, useRef, useState } from "react";
+//#region packages/react/hooks/usePagination.ts
+function usePagination(params) {
+	const paginationData = useRef({
+		...params?.defaultValue ?? {
+			current: 1,
+			size: 10,
+			total: 0
+		},
+		onChange: () => {}
+	});
+	const [, changeView] = useState(0);
+	const updata = useCallback((params) => {
+		if (typeof params.current !== "undefined") paginationData.current.current = params.current;
+		if (typeof params.size !== "undefined") paginationData.current.size = params.size;
+		if (typeof params.total !== "undefined") paginationData.current.total = params.total;
+		if ([
+			params.size,
+			params.current,
+			params.total
+		].some((i) => typeof i !== "undefined")) changeView((e) => e + 1);
+	}, []);
+	useInit(() => {
+		paginationData.current.onChange = updata;
+	});
+	return paginationData;
+}
+//#endregion
+export { usePagination as default };

package/fe/packages/react/hooks/useRefState.d.ts

@@ -0,0 +1,17 @@
+import { RefObject } from "react";
+type SetState<S> = (value: S | ((preValue: S) => S), callback?: CallBackFN<S>) => void;
+type CallBackFN<T> = (value: T) => void;
+type RefState<T> = RefObject<{
+    data: T;
+}>;
+export default function useRefState<S>(initialState: S | (() => S)): [
+    S,
+    SetState<S>,
+    RefState<S>
+];
+export default function useRefState<S = undefined>(): [
+    S | undefined,
+    SetState<S | undefined>,
+    RefState<S | undefined>
+];
+export {};

package/fe/packages/react/hooks/useRefState.js

@@ -0,0 +1,35 @@
+import useInit from "./useInit.js";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+//#region packages/react/hooks/useRefState.ts
+function useRefState(initialState) {
+	const [v, setValue] = useState(initialState);
+	const data = useRef({ data: void 0 });
+	const callbackRef = useRef(null);
+	const [callbackVersion, setCallbackVersion] = useState(0);
+	useInit(() => {
+		data.current.data = v;
+	});
+	const setData = useCallback((action, callback) => {
+		const value = typeof action === "function" ? action(data.current.data) : action;
+		setValue(value);
+		data.current.data = value;
+		if (callback) {
+			callbackRef.current = callback;
+			setCallbackVersion((version) => version + 1);
+		}
+	}, [setCallbackVersion, setValue]);
+	useLayoutEffect(() => {
+		if (callbackRef.current) {
+			const callback = callbackRef.current;
+			callbackRef.current = null;
+			callback(data.current.data);
+		}
+	}, [callbackVersion]);
+	return [
+		v,
+		setData,
+		data
+	];
+}
+//#endregion
+export { useRefState as default };

package/fe/packages/react/hooks/useWatch.d.ts

@@ -0,0 +1,14 @@
+export type WatchCallback<T> = (value: T, prevValue: T | undefined) => void | (() => void);
+export type WatchCompare<T> = (value: T, prevValue: T) => boolean;
+export type WatchCompareType = 'identity' | 'shallow';
+export type WatchSelector<TSource, TValue> = (source: TSource) => TValue;
+export type UseWatchOptions<T> = {
+    immediate?: boolean;
+    compare?: WatchCompareType | WatchCompare<T>;
+};
+export declare const identityCompare: <T>(value: T, prevValue: T) => boolean;
+export declare const shallowCompare: <T>(value: T, prevValue: T) => boolean;
+export declare const defaultCompare: <T>(value: T, prevValue: T) => boolean;
+export declare function useWatch<T>(value: T, callback: WatchCallback<T>, options?: UseWatchOptions<T>): void;
+export declare function useWatch<TSource, TValue>(source: TSource, selector: WatchSelector<TSource, TValue>, callback: WatchCallback<TValue>, options?: UseWatchOptions<TValue>): void;
+export default useWatch;

package/fe/packages/react/hooks/useWatch.js

@@ -0,0 +1,60 @@
+import { useEffect, useRef } from "react";
+//#region packages/react/hooks/useWatch.ts
+var identityCompare = (value, prevValue) => Object.is(value, prevValue);
+var shallowCompare = (value, prevValue) => {
+	if (Object.is(value, prevValue)) return true;
+	if (Array.isArray(value) && Array.isArray(prevValue)) {
+		if (value.length !== prevValue.length) return false;
+		return value.every((item, index) => Object.is(item, prevValue[index]));
+	}
+	if (value && prevValue && typeof value === "object" && typeof prevValue === "object") {
+		const valuePrototype = Object.getPrototypeOf(value);
+		if (valuePrototype !== Object.getPrototypeOf(prevValue) || valuePrototype !== Object.prototype && valuePrototype !== null) return false;
+		const valueKeys = Object.keys(value);
+		const prevValueKeys = Object.keys(prevValue);
+		if (valueKeys.length !== prevValueKeys.length) return false;
+		return valueKeys.every((key) => Object.prototype.hasOwnProperty.call(prevValue, key) && Object.is(value[key], prevValue[key]));
+	}
+	return false;
+};
+var defaultCompare = (value, prevValue) => {
+	if (Array.isArray(value) && Array.isArray(prevValue)) return shallowCompare(value, prevValue);
+	return identityCompare(value, prevValue);
+};
+var getCompare = (compare) => {
+	if (compare === "identity") return identityCompare;
+	if (compare === "shallow") return shallowCompare;
+	return compare ?? defaultCompare;
+};
+var useStableWatchValue = (value, compare) => {
+	const valueRef = useRef(value);
+	if (!compare(value, valueRef.current)) valueRef.current = value;
+	return valueRef.current;
+};
+function useWatch(source, selectorOrCallback, callbackOrOptions, options) {
+	const hasSelector = typeof callbackOrOptions === "function";
+	const selector = hasSelector ? selectorOrCallback : null;
+	const callback = hasSelector ? callbackOrOptions : selectorOrCallback;
+	const watchOptions = hasSelector ? options : callbackOrOptions;
+	const stableValue = useStableWatchValue(selector ? selector(source) : source, getCompare(watchOptions?.compare));
+	const isInit = useRef(false);
+	const valueRef = useRef(stableValue);
+	const callbackRef = useRef(callback);
+	const optionsRef = useRef(watchOptions);
+	callbackRef.current = callback;
+	optionsRef.current = watchOptions;
+	useEffect(() => {
+		if (!isInit.current) {
+			isInit.current = true;
+			valueRef.current = stableValue;
+			if (optionsRef.current?.immediate) return callbackRef.current(stableValue, void 0);
+			return;
+		}
+		const prevValue = valueRef.current;
+		if (Object.is(stableValue, prevValue)) return;
+		valueRef.current = stableValue;
+		return callbackRef.current(stableValue, prevValue);
+	}, [stableValue]);
+}
+//#endregion
+export { useWatch as default, useWatch, defaultCompare, identityCompare, shallowCompare };

package/fe/packages/react/hooks/useWatch.test.js

@@ -0,0 +1,24 @@
+import { defaultCompare, identityCompare, shallowCompare } from "./useWatch.js";
+import assert from "node:assert/strict";
+import test from "node:test";
+//#region packages/react/hooks/useWatch.test.ts
+test("defaultCompare treats inline arrays with the same items as equal", () => {
+	assert.equal(defaultCompare([1, "a"], [1, "a"]), true);
+});
+test("defaultCompare detects changed array items", () => {
+	assert.equal(defaultCompare([1, "a"], [1, "b"]), false);
+});
+test("defaultCompare uses identity for object values", () => {
+	assert.equal(defaultCompare({ current: 1 }, { current: 1 }), false);
+});
+test("identityCompare detects changed array references", () => {
+	assert.equal(identityCompare([1, 2], [1, 2]), false);
+});
+test("shallowCompare supports selector array results", () => {
+	assert.equal(shallowCompare([1, 10], [1, 10]), true);
+	assert.equal(shallowCompare([1, 10], [2, 10]), false);
+});
+test("shallowCompare does not treat non-plain objects as equal by empty keys", () => {
+	assert.equal(shallowCompare(/* @__PURE__ */ new Date(0), /* @__PURE__ */ new Date(0)), false);
+});
+//#endregion

package/fe/packages/react/ui/assets/table/no-result.js

@@ -0,0 +1,4 @@
+//#region packages/react/ui/assets/table/no-result.svg
+var no_result_default = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='120'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3e%3crect%20x='3'%20y='3'%20width='18'%20height='18'%20rx='2'%20ry='2'/%3e%3cline%20x1='3'%20y1='9'%20x2='21'%20y2='9'/%3e%3cline%20x1='9'%20y1='21'%20x2='9'%20y2='9'/%3e%3c/svg%3e";
+//#endregion
+export { no_result_default as default };

package/fe/packages/react/ui/assets/table/no-result.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+  <line x1="3" y1="9" x2="21" y2="9"/>
+  <line x1="9" y1="21" x2="9" y2="9"/>
+</svg>