@groupviz/react 2.0.0

package/package/react.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @groupviz/react 门面 — FGVE 阶段 3 双包产物（vite lib 构建入口）。
+ *
+ * 导出清单（随视图入包批次扩充）：
+ *   - 视图 Scene：SetView / CycleView / CayleyView / CosetStripScene 等纯渲染内核。
+ *     Scene 仅依赖 i18n context（文案 key）+ core；不读 useGroup/useHover/useTheme
+ *     —— context 组装壳（*View/*FromContext）留在主应用，不入包。
+ *   - I18nProvider：react 包自带中文/英文语言包（translations.ts 全量打包），
+ *     Scene 文案消费方需以 <I18nProvider> 包裹（缺省 Provider 时 t() 回落 key）。
+ *
+ * 注意：本文件内不要直接 import '../../core/...' —— core 由宿主安装的
+ * @groupviz/core 包供给（构建期 coreToPackage 插件把相对 core 引用 external）。
+ */
+export { SetView } from '../components/Canvas/SetView.js';
+export type { SetViewProps } from '../components/Canvas/SetView.js';
+export { CycleView } from '../components/Canvas/CycleView.js';
+export type { CycleViewProps } from '../components/Canvas/CycleView.js';
+export { CayleyView } from '../components/Canvas/CayleyView.js';
+export type { CayleyViewProps } from '../components/Canvas/CayleyView.js';
+export { CosetStripScene } from '../components/Canvas/CosetStripScene.js';
+export type { CosetStripSceneProps } from '../components/Canvas/CosetStripScene.js';
+export { TableView } from '../components/Canvas/TableView.js';
+export type { TableViewProps } from '../components/Canvas/TableView.js';
+export { ActionScene } from '../components/Canvas/ActionScene.js';
+export type { ActionSceneProps } from '../components/Canvas/ActionScene.js';
+export { HomomorphismScene } from '../components/Canvas/HomomorphismScene.js';
+export type { HomomorphismSceneProps } from '../components/Canvas/HomomorphismScene.js';
+export { SymmetryViewScene } from '../components/Canvas/SymmetryViewScene.js';
+export type { SymmetryViewSceneProps } from '../components/Canvas/SymmetryViewScene.js';
+export { Cayley3DScene } from '../components/Canvas/Cayley3DScene.js';
+export type { Cayley3DSceneProps } from '../components/Canvas/Cayley3DScene.js';
+export { SublatticeScene } from '../components/Canvas/SublatticeScene.js';
+export type { SublatticeSceneProps } from '../components/Canvas/SublatticeScene.js';
+export { SceneWindow } from '../components/Canvas/SceneWindow.js';
+export type { SceneWindowProps, SceneWindowConfig, SceneWindowCaps, SceneWindowTheme } from '../components/Canvas/SceneWindow.js';
+export { I18nProvider } from '../i18n/I18nContext.js';
+export type { Group, GroupElement } from '@groupviz/core';

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@groupviz/react",
+  "version": "2.0.0",
+  "description": "GroupViz 群论可视化 React 视图组件",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rrCathy/GroupViz.git"
+  },
+  "keywords": [
+    "group-theory",
+    "abstract-algebra",
+    "mathematics",
+    "visualization",
+    "cayley-graph",
+    "react",
+    "svg",
+    "threejs"
+  ],
+  "type": "module",
+  "main": "./index.js",
+  "types": "./package/react.d.ts",
+  "exports": {
+    ".": {
+      "types": "./package/react.d.ts",
+      "import": "./index.js"
+    },
+    "./theme.css": "./theme.css"
+  },
+  "peerDependencies": {
+    "@groupviz/core": "^2.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "three": ">=0.184.0 <0.186.0",
+    "@react-three/fiber": "^9.0.0",
+    "@react-three/drei": "^10.0.0",
+    "katex": "^0.16.0"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ]
+}

package/theme/ThemeContext.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+export type Theme = 'dark' | 'light';
+export interface ThemeContextValue {
+    theme: Theme;
+    toggleTheme: () => void;
+    /** 视图窗口（浮动窗/ViewWindow）独立的深浅色主题，与主界面 theme 解耦 */
+    viewWindowTheme: Theme;
+    toggleViewWindowTheme: () => void;
+}
+export declare const ThemeContext: import("react").Context<ThemeContextValue>;
+export declare function ThemeProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/theme/useTheme.d.ts

@@ -0,0 +1,4 @@
+import { ThemeProvider } from './ThemeContext.js';
+export declare function useTheme(): import("./ThemeContext").ThemeContextValue;
+export { ThemeProvider };
+export type { Theme } from './ThemeContext.js';

package/theme.css

@@ -0,0 +1,186 @@
+/**
+ * @groupviz/react 主题 CSS — 由 scripts/pkg/finalize-pkg.mjs 自动提取自 src/index.css。
+ * 消费者入口：import '@groupviz/react/theme.css'
+ */
+/* ===== 深色（默认）===== */
+:root,
+[data-theme="dark"] {
+  --bg-primary: #0f0f1a;
+  --bg-secondary: #151525;
+  --bg-canvas: #0a0a14;
+  --bg-canvas-gradient: #12121f;
+  --bg-interactive: #1a1a2e;
+  --bg-interactive-hover: #1e1e36;
+  --bg-input: #1a1a2e;
+  --bg-header-start: #1a1a2e;
+  --bg-header-end: #0f0f1a;
+  --bg-tooltip: rgba(21, 21, 37, 0.95);
+  --bg-hint: rgba(16, 16, 30, 0.96);
+  --bg-dark-chip: #111111;
+  --bg-preview-circle: #0c0c1a;
+  --bg-element-chip: #1a1a2e;
+  --bg-chart: rgba(12, 12, 26, 0.95);
+
+  --text-primary: #e0e0e0;
+  --text-heading: #ffffff;
+  --text-secondary: #cccccc;
+  --text-muted: #aaaaaa;
+  --text-dim: #888888;
+  --text-subtle: #666666;
+  --text-meta: #999999;
+  --text-special: #a0a0c0;
+  --text-welcome-label: #8a8abb;
+
+  --text-welcome-tagline: #8888aa;
+
+  --text-welcome-feature: #c0c0e0;
+  --text-lang-hover: #d0d0f0;
+  --text-active: #e0e0f0;
+  --text-chip-hover: #ffffff;
+
+  --border-primary: #2d2d4a;
+  --border-subtle: #1e1e36;
+  --border-hover: #4a4a7a;
+
+  --accent-teal: #4ecdc4;
+  --accent-teal-hover: #5eddd4;
+  --accent-indigo: #6366f1;
+  --accent-purple: #a78bfa;
+  --accent-yellow: #ffd93d;
+  --accent-yellow-text: #ffd93d;
+  --accent-normal: #9b59b6;
+  --accent-simple-end: #8e44ad;
+  --accent-danger: #ff6666;
+  --accent-danger-hover: #ff3333;
+  --accent-sponsor: #f5576c;
+  --accent-sponsor-hover: #ff8a95;
+  --accent-blue: #3b82f6;
+  --accent-green: #22c55e;
+  --accent-red: #ff6b6b;
+  --accent-orange: #f97316;
+  --btn-on-accent: #0f0f1a;
+  --text-accent: #4ecdc4;
+
+  --bg-elevated: var(--bg-interactive-hover);
+  --bg-muted: var(--bg-secondary);
+  --bg-panel: var(--bg-secondary);
+  --bg-hover: var(--bg-interactive-hover);
+  --border-color: var(--border-primary);
+  --canvas-bg: var(--bg-canvas);
+  --input-bg: var(--bg-input);
+  --panel-bg: var(--bg-secondary);
+  --panel-border: var(--border-primary);
+  --text: var(--text-primary);
+
+  --gradient-header: linear-gradient(180deg, var(--bg-header-start) 0%, var(--bg-header-end) 100%);
+  --gradient-canvas: radial-gradient(circle at center, var(--bg-canvas-gradient) 0%, var(--bg-canvas) 100%);
+
+  --shadow-hint: 0 4px 16px rgba(0, 0, 0, 0.5);
+  --shadow-preview: 0 0 40px rgba(99, 102, 241, 0.2), 0 8px 32px rgba(0, 0, 0, 0.6);
+
+  --table-cell-bg: #ffffff0e;
+  --table-cell-border: #ffffff44;
+
+  --node-fill: #1e2a3e;
+  --node-stroke: white;
+  --node-fill-selected: #2a3a56;
+  --node-text: white;
+
+  --preview-bg-center: #1e2040;
+  --preview-bg-edge: #0c0c1a;
+  --preview-pointer-color: #1e2040;
+  --preview-node-fill: #1a1a2e;
+  --preview-node-stroke: #4a4a7a;
+  --preview-text: #d0d0f0;
+}
+
+
+/* ===== 浅色 ===== */
+[data-theme="light"] {
+  --bg-primary: #ffffff;
+  --bg-secondary: #f9f9fb;
+  --bg-canvas: #f4f4f7;
+  --bg-canvas-gradient: #eeeef2;
+  --bg-interactive: #edeef2;
+  --bg-interactive-hover: #e2e4ea;
+  --bg-input: #f5f5f8;
+  --bg-header-start: #f9f9fb;
+  --bg-header-end: #ffffff;
+  --bg-tooltip: rgba(255, 255, 255, 0.97);
+  --bg-hint: rgba(252, 252, 255, 0.97);
+  --bg-dark-chip: #eeeef3;
+  --bg-preview-circle: #ffffff;
+  --bg-element-chip: #edeef2;
+  --bg-chart: rgba(255, 255, 255, 0.97);
+
+  --text-primary: #1c1c28;
+  --text-heading: #0f0f1a;
+  --text-secondary: #4a4a5a;
+  --text-muted: #6e6e7e;
+  --text-dim: #828294;
+  --text-subtle: #9c9cac;
+  --text-meta: #8e8ea0;
+  --text-special: #56569e;
+  --text-welcome-label: #434380;
+
+  --text-welcome-tagline: #5353a0;
+
+  --text-welcome-feature: #585868;
+  --text-lang-hover: #4a4a5a;
+  --text-active: #383848;
+  --text-chip-hover: #141420;
+
+  --border-primary: #e2e3e9;
+  --border-subtle: #edeef3;
+  --border-hover: #c8cad5;
+
+  --accent-teal: #0ea5a0;
+  --accent-teal-hover: #0d8d88;
+  --accent-indigo: #4f46e5;
+  --accent-yellow-text: #92400e;
+  --accent-blue: #2563eb;
+  --accent-green: #16a34a;
+  --accent-red: #d64545;
+  --accent-orange: #ea580c;
+  --accent-danger: #d64545;
+  --accent-danger-hover: #b91c1c;
+  --btn-on-accent: #ffffff;
+  --text-accent: #0ea5a0;
+
+  --shadow-hint: 0 4px 16px rgba(0, 0, 0, 0.06);
+  --shadow-preview: 0 0 40px rgba(99, 102, 241, 0.10), 0 8px 32px rgba(0, 0, 0, 0.08);
+
+  --table-cell-bg: #00000008;
+  --table-cell-border: #00000022;
+
+  --node-fill: #e0e3ea;
+  --node-stroke: #3a3a4e;
+  --node-fill-selected: #cdd2dc;
+  --node-text: #1c1c28;
+
+  --preview-bg-center: #f0f1f6;
+  --preview-bg-edge: #fafbfe;
+  --preview-pointer-color: #f0f1f6;
+  --preview-node-fill: #d4d7de;
+  --preview-node-stroke: #c5c8d2;
+  --preview-text: #4a4a5e;
+}
+
+
+/* ===== 视图基础类 ===== */
+.view-svg {
+  width: 100%;
+  height: 100%;
+}
+.view-svg text {
+  user-select: none;
+  -webkit-user-select: none;
+}
+.view-empty {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-subtle);
+}

package/utils/cayley3dControls.d.ts

@@ -0,0 +1,18 @@
+import type * as THREE from 'three';
+export interface Cayley3DOrbitSnapshot {
+    theta: number;
+    phi: number;
+    radius: number;
+    target: THREE.Vector3;
+}
+export interface Cayley3DControlAPI {
+    isReady: () => boolean;
+    snapshotOrbit: () => Cayley3DOrbitSnapshot;
+    beginRotation: (radPerSec: number) => void;
+    endRotation: (snapshot?: Cayley3DOrbitSnapshot | null) => void;
+    displayAngVel: () => number;
+    frameAt: (index: number, frameDelayMs: number) => HTMLCanvasElement | null;
+}
+export declare function registerCayley3DControls(api: Cayley3DControlAPI): void;
+export declare function unregisterCayley3DControls(api: Cayley3DControlAPI): void;
+export declare function getCayley3DControls(): Cayley3DControlAPI | null;

package/utils/download.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 通用 Blob 下载触发 —— 与导出链（gifenc/渲染收集）解耦的纯 DOM 工具。
+ *
+ * 独立成模块的动机（FGVE 阶段 3 入包）：TableView 等纯内核 Scene 需要
+ * "导出当前 SVG" 能力，但 utils/export.ts 整模块顶层依赖 gifenc（GIF 编码，
+ * 无 sideEffects 声明时会被打包器保守内嵌）。把 triggerDownload 抽到零依赖
+ * 模块后，react 包的程序图不再触及 export.ts，gifenc 不会进入包产物。
+ */
+export declare function triggerDownload(blob: Blob, filename: string): void;

package/utils/texify.d.ts

@@ -0,0 +1,2 @@
+export declare function texify(text: string): string;
+export declare function renderTex(math: string, displayMode?: boolean): string;