@vyr/engine 0.0.39 → 0.0.40

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@vyr/engine",
-  "version": "0.0.39",
+  "version": "0.0.40",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@vyr/locale": "0.0.39",
+    "@vyr/locale": "0.0.40",
     "decamelize-keys": "^2.0.1",
     "camelcase-keys": "^10.0.1",
     "tinycolor2": "1.6.0",

package/src/descriptor/HTML.ts

@@ -18,5 +18,84 @@ export interface HTML extends Descriptor {
      */
     visible: boolean
 
+    /**
+    * HTML属性集合
+    * 
+    * 提供结构化的方式定义和管理HTML元素的所有原生属性。
+    * style和classNames为基础通用属性，其余属性参照DSL定义。
+    * 
+    * classNames(共享CSS类名列表)
+    * 
+    * 引用在Scene的sharedCSSStyle中定义的共享样式类。
+    * 这些类名应用于当前HTML节点，提供可复用的视觉样式效果。
+    * 
+    * 设计原则：
+    * 1. 使用共享样式类而不是重复定义相同的样式
+    * 2. 组合多个类名实现复杂的视觉效果
+    * 3. 类名中定义的样式可以被行内样式（style）覆盖
+    * 
+    * 工作流程：
+    * 1. 在Scene的sharedCSSStyle中定义共享样式类
+    * 2. 在此属性中引用这些类名
+    * 3. 渲染时自动应用对应的样式规则
+    * 
+    * 特性说明：
+    * - 支持多个类名组合：['theme-primary', 'shadow-large', 'rounded']
+    * - 类名样式可以被行内样式覆盖
+    * - 支持伪类状态（如:hover、:active）
+    * - 支持动画类名引用animations中定义的动画
+    * 
+    * ✅ 正确使用示例：
+    * 1. 应用主题样式：['theme-primary', 'font-heading']
+    * 2. 添加视觉效果：['shadow-medium', 'rounded-corner']
+    * 3. 应用动画效果：['fade-in-animation']
+    * 4. 状态样式组合：['button-base', 'hover-effect', 'active-state']
+    * 
+    * ❌ 错误使用示例：
+    * 1. 直接在此处定义样式字符串（应在sharedCSSStyle中定义）
+    * 2. 包含布局尺寸的类名（布局应由自身的style控制）
+    * 
+    * style(HTML元素行内样式定义)
+    * 
+    * 用于定义单个HTML节点的私有样式属性，优先级高于共享CSS样式。
+    * 每个属性对应一个CSS样式规则，采用大驼峰命名（CamelCase）。
+    * 
+    * 设计原则：
+    * 1. 行内样式具有最高优先级，会覆盖外部样式表中的相同属性
+    * 2. 适合定义节点特有的样式，避免与共享样式冲突
+    * 3. 对于可复用的样式，建议使用Scene中的共享样式
+    * 4. 样式优先级：行内样式（大驼峰） > 共享样式（kebab-case） > 浏览器默认
+    * 
+    * @example
+    * // Scene中定义的共享样式：
+    * sharedCSSStyle: {
+    *   classNames: {
+    *     '.theme-primary': {
+    *       'background-color': '#007bff',
+    *       'color': '#ffffff'
+    *     },
+    *     '.shadow-medium': {
+    *       'box-shadow': '0 4px 8px rgba(0,0,0,0.1)'
+    *     },
+    *     '.fade-in': {
+    *       'animation': 'fade-in 0.5s ease-in-out'
+    *     }
+    *   },
+    *   animations: {
+    *     'fade-in': {
+    *       '0%': { 'opacity': '0' },
+    *       '100%': { 'opacity': '1' }
+    *     }
+    *   }
+    * }
+    * 
+    * // HTML节点中定义HTML属性集合
+    * htmlAttributes: {
+    *   // 与行内样式组合使用（行内样式优先级更高）：
+    *   classNames: ['theme-primary'], // 共享背景色和文字颜色
+    *   style: { margin: '8px 0' },
+    * }
+    * 
+    */
     htmlAttributes: HtmlAttributes
 }

package/src/descriptor/Input.ts

@@ -1,5 +1,5 @@
 import { DeserializationObject } from "../Serialization"
-import { HtmlAttributes, InputAttributesSchema } from "../schema"
+import { InputAttributes, InputAttributesSchema } from "../schema"
 import { Descriptor } from "./Descriptor"
 import { HTML } from "./HTML"
 
@@ -18,7 +18,7 @@ export class Input extends Descriptor implements HTML {
 
   visible: boolean
 
-  htmlAttributes: HtmlAttributes
+  htmlAttributes: InputAttributes
 
   constructor(descriptor: Partial<DeserializationObject<Input>> = {}) {
     super(descriptor)

package/src/descriptor/Scene.ts

@@ -94,11 +94,6 @@ export class Scene extends Descriptor {
    */
   camera: string
 
-  /**
-   * 共享CSS样式对象
-   * 包含类名样式和动画定义，可在场景内的服务节点间共享
-   * 用于实现样式复用和统一管理
-   */
   sharedCSSStyle: SharedCSSStyle
 
   constructor(descriptor: Partial<DeserializationObject> = {}) {

package/src/schema/HTML.ts

@@ -34,25 +34,6 @@ export const HTMLStyleSchema = z.object({
     height: z.string().default(''),
 }).catchall(z.string())
 
-/**
- * HTML元素行内样式定义
- * 
- * 用于定义单个HTML节点的私有样式属性，优先级高于共享CSS样式。
- * 每个属性对应一个CSS样式规则，采用大驼峰命名（CamelCase）。
- * 
- * 设计原则：
- * 1. 行内样式具有最高优先级，会覆盖外部样式表中的相同属性
- * 2. 适合定义节点特有的样式，避免与共享样式冲突
- * 3. 对于可复用的样式，建议使用Scene中的共享样式
- * 4. 样式优先级：行内样式（大驼峰） > 共享样式（kebab-case） > 浏览器默认
- * 
- * 强制使用border-box的原因：
- * - 确保布局行为的一致性和可预测性
- * - width/height = 内容宽度/高度 + padding + border
- * - 添加padding或border不会改变元素的实际占用空间
- * - 简化响应式布局的计算，精确控制尺寸
- * - 避免组件嵌套时混合盒模型带来的计算复杂度
- */
 export type HTMLStyle = z.infer<typeof HTMLStyleSchema>
 
 const ClassNamesSchema = z.array(z.string()).default([])
@@ -70,88 +51,8 @@ export const HtmlAttributesSchema = z.object({
      * CSS类名集合 - 所有HTML元素通用
      */
     classNames: ClassNamesSchema,
-
 }).default({ style: HTMLStyleSchema.parse({}), classNames: ClassNamesSchema.parse([]) })
 
-/**
- * HTML属性集合
- * 
- * 提供结构化的方式定义和管理HTML元素的所有原生属性。
- * style和classNames为基础通用属性，其余属性参照DSL定义。
- * 
- * classNames(共享CSS类名列表)
- * 
- * 引用在Scene的sharedCSSStyle中定义的共享样式类。
- * 这些类名应用于当前HTML节点，提供可复用的视觉样式效果。
- * 
- * 设计原则：
- * 1. 使用共享样式类而不是重复定义相同的样式
- * 2. 组合多个类名实现复杂的视觉效果
- * 3. 类名中定义的样式可以被行内样式（style）覆盖
- * 
- * 工作流程：
- * 1. 在Scene的sharedCSSStyle中定义共享样式类
- * 2. 在此属性中引用这些类名
- * 3. 渲染时自动应用对应的样式规则
- * 
- * 特性说明：
- * - 支持多个类名组合：['theme-primary', 'shadow-large', 'rounded']
- * - 类名样式可以被行内样式覆盖
- * - 支持伪类状态（如:hover、:active）
- * - 支持动画类名引用animations中定义的动画
- * 
- * ✅ 正确使用示例：
- * 1. 应用主题样式：['theme-primary', 'font-heading']
- * 2. 添加视觉效果：['shadow-medium', 'rounded-corner']
- * 3. 应用动画效果：['fade-in-animation']
- * 4. 状态样式组合：['button-base', 'hover-effect', 'active-state']
- * 
- * ❌ 错误使用示例：
- * 1. 直接在此处定义样式字符串（应在sharedCSSStyle中定义）
- * 2. 包含布局尺寸的类名（布局应由自身的style控制）
- * 
- * style(HTML元素行内样式定义)
- * 
- * 用于定义单个HTML节点的私有样式属性，优先级高于共享CSS样式。
- * 每个属性对应一个CSS样式规则，采用大驼峰命名（CamelCase）。
- * 
- * 设计原则：
- * 1. 行内样式具有最高优先级，会覆盖外部样式表中的相同属性
- * 2. 适合定义节点特有的样式，避免与共享样式冲突
- * 3. 对于可复用的样式，建议使用Scene中的共享样式
- * 4. 样式优先级：行内样式（大驼峰） > 共享样式（kebab-case） > 浏览器默认
- * 
- * @example
- * // Scene中定义的共享样式：
- * sharedCSSStyle: {
- *   classNames: {
- *     '.theme-primary': {
- *       'background-color': '#007bff',
- *       'color': '#ffffff'
- *     },
- *     '.shadow-medium': {
- *       'box-shadow': '0 4px 8px rgba(0,0,0,0.1)'
- *     },
- *     '.fade-in': {
- *       'animation': 'fade-in 0.5s ease-in-out'
- *     }
- *   },
- *   animations: {
- *     'fade-in': {
- *       '0%': { 'opacity': '0' },
- *       '100%': { 'opacity': '1' }
- *     }
- *   }
- * }
- * 
- * // HTML节点中定义HTML属性集合
- * htmlAttributes: {
- *   // 与行内样式组合使用（行内样式优先级更高）：
- *   classNames: ['theme-primary'], // 共享背景色和文字颜色
- *   style: { margin: '8px 0' },
- * }
- * 
- */
 export type HtmlAttributes = z.infer<typeof HtmlAttributesSchema>
 
 export const InputAttributesSchema = z.object({
@@ -234,3 +135,5 @@ export const InputAttributesSchema = z.object({
     capture: z.union([z.string(), z.boolean()]).optional(),
 }).default({ style: HTMLStyleSchema.parse({}), classNames: ClassNamesSchema.parse([]) })
 
+export type InputAttributes = z.infer<typeof InputAttributesSchema>
+