@thinkingos/vsl-sdk 0.1.0 → 0.2.0

package/dist/index.d.mts

@@ -60,6 +60,18 @@ interface ElementCss {
     pointerEvents?: string;
     overflow?: string;
     height?: string;
+    /** Background color (computed) — для sty.bg в VslObject. */
+    backgroundColor?: string;
+    /** Text/foreground color (computed) — для sty.fg в VslObject. */
+    color?: string;
+    /** Border shorthand (computed) — для sty.border в VslObject. */
+    border?: string;
+    /** Border radius (computed) — для sty.radius в VslObject. */
+    borderRadius?: string;
+    /** Box shadow (computed) — для sty.shadow в VslObject. */
+    boxShadow?: string;
+    /** Font family (computed) — для sty.font.family в VslObject. */
+    fontFamily?: string;
 }
 /** Собственный текст элемента: только прямые текстовые узлы, whitespace-нормализация. */
 declare function ownText(el: Element): string;
@@ -76,7 +88,7 @@ declare function extractDomTree(root?: Element): ExtractedElement[];
  * Семантический тип объекта VSL (поле `t`): L1-теги + L2-роли (T1.1.3/T1.1.4),
  * L3-CSS (T1.5.1), L4-структурные (T1.5.2), L5-vision (T1.5.4).
  */
-type VslType = 'button' | 'input' | 'link' | 'nav' | 'header' | 'main' | 'container' | 'image' | 'select' | 'textarea' | 'modal' | 'tab' | 'heading' | 'footer' | 'scrollable_container' | 'toolbar' | 'list' | 'grid' | 'form_field' | 'tab_bar' | 'layout' | 'icon' | 'chart' | 'custom_widget' | 'unknown';
+type VslType = 'button' | 'input' | 'file_input' | 'link' | 'nav' | 'header' | 'main' | 'container' | 'image' | 'select' | 'textarea' | 'modal' | 'tab' | 'heading' | 'footer' | 'scrollable_container' | 'toolbar' | 'list' | 'grid' | 'form_field' | 'tab_bar' | 'layout' | 'icon' | 'chart' | 'custom_widget' | 'unknown';
 /** Состояние объекта VSL (поле `st`) — из ARIA-атрибутов (T1.1.4). */
 type VslState = 'checked' | 'expanded' | 'disabled';
 /** Тип визуального фрагмента — выход классификации vision (§2.2.2 Шаг 2). */
@@ -89,6 +101,29 @@ interface VslFragmentMeta$1 {
     hash?: string;
     cached_at?: string;
 }
+/**
+ * Визуальные стили объекта VSL (DESIGN_SYSTEM.md §4.3).
+ * Optional: только для визуально значимых элементов.
+ * Все значения — computed styles в момент snapshot.
+ */
+interface VslStyle {
+    /** Background color (computed). */
+    bg?: string;
+    /** Text/foreground color (computed). */
+    fg?: string;
+    /** Border shorthand (computed). */
+    border?: string;
+    /** Border radius (computed). */
+    radius?: string;
+    /** Box shadow (computed). */
+    shadow?: string;
+    /** Font properties. */
+    font?: {
+        family?: string;
+        size?: string;
+        weight?: string;
+    };
+}
 /**
  * Запись реестра visual_fragments документа (§2.2.2, ARCHITECTURE.md:L265-284).
  * ТОЛЬКО метаданные: base64-данные изображений живут в VisualFragmentStore
@@ -148,6 +183,12 @@ interface VslObject {
     vf?: string;
     /** Метаданные фрагмента (§4.4). */
     vf_meta?: VslFragmentMeta$1;
+    /** Визуальные стили (DESIGN_SYSTEM.md §4.3). Optional: только для визуально значимых элементов. */
+    sty?: VslStyle;
+    /** Accept attribute для file_input (например, '.pdf,.docx'). */
+    accept?: string;
+    /** Multiple attribute для file_input — разрешена загрузка нескольких файлов. */
+    multiple?: boolean;
 }
 interface VslDocument {
     vsl_version: string;
@@ -250,6 +291,8 @@ interface SegmentedElement {
     txt: string | null;
     /** Состояние из ARIA (checked/expanded/disabled) или null. */
     st: VslState | null;
+    /** CSS-подмножество для визуальных стилей (передаётся в Builder для sty). */
+    css?: ElementCss;
     ch: SegmentedElement[];
     /** Ссылка на визуальный фрагмент (заполняется enrichWithVision, T1.5.4). */
     vf?: string;
@@ -1055,7 +1098,7 @@ declare const ACTION_TOOL_SCHEMA: {
         action: {
             type: string;
             description: string;
-            enum: ("select" | "click" | "close" | "type" | "check" | "uncheck" | "clear" | "scroll" | "hover" | "focus" | "blur" | "drag" | "drop" | "submit" | "reset" | "open" | "expand" | "collapse" | "wait" | "navigate" | "go_back" | "go_forward" | "refresh" | "download")[];
+            enum: ("select" | "type" | "click" | "close" | "check" | "uncheck" | "clear" | "scroll" | "hover" | "focus" | "blur" | "drag" | "drop" | "submit" | "reset" | "open" | "expand" | "collapse" | "wait" | "navigate" | "go_back" | "go_forward" | "refresh" | "download")[];
         };
         target_id: {
             type: string;

package/dist/index.d.ts

@@ -60,6 +60,18 @@ interface ElementCss {
     pointerEvents?: string;
     overflow?: string;
     height?: string;
+    /** Background color (computed) — для sty.bg в VslObject. */
+    backgroundColor?: string;
+    /** Text/foreground color (computed) — для sty.fg в VslObject. */
+    color?: string;
+    /** Border shorthand (computed) — для sty.border в VslObject. */
+    border?: string;
+    /** Border radius (computed) — для sty.radius в VslObject. */
+    borderRadius?: string;
+    /** Box shadow (computed) — для sty.shadow в VslObject. */
+    boxShadow?: string;
+    /** Font family (computed) — для sty.font.family в VslObject. */
+    fontFamily?: string;
 }
 /** Собственный текст элемента: только прямые текстовые узлы, whitespace-нормализация. */
 declare function ownText(el: Element): string;
@@ -76,7 +88,7 @@ declare function extractDomTree(root?: Element): ExtractedElement[];
  * Семантический тип объекта VSL (поле `t`): L1-теги + L2-роли (T1.1.3/T1.1.4),
  * L3-CSS (T1.5.1), L4-структурные (T1.5.2), L5-vision (T1.5.4).
  */
-type VslType = 'button' | 'input' | 'link' | 'nav' | 'header' | 'main' | 'container' | 'image' | 'select' | 'textarea' | 'modal' | 'tab' | 'heading' | 'footer' | 'scrollable_container' | 'toolbar' | 'list' | 'grid' | 'form_field' | 'tab_bar' | 'layout' | 'icon' | 'chart' | 'custom_widget' | 'unknown';
+type VslType = 'button' | 'input' | 'file_input' | 'link' | 'nav' | 'header' | 'main' | 'container' | 'image' | 'select' | 'textarea' | 'modal' | 'tab' | 'heading' | 'footer' | 'scrollable_container' | 'toolbar' | 'list' | 'grid' | 'form_field' | 'tab_bar' | 'layout' | 'icon' | 'chart' | 'custom_widget' | 'unknown';
 /** Состояние объекта VSL (поле `st`) — из ARIA-атрибутов (T1.1.4). */
 type VslState = 'checked' | 'expanded' | 'disabled';
 /** Тип визуального фрагмента — выход классификации vision (§2.2.2 Шаг 2). */
@@ -89,6 +101,29 @@ interface VslFragmentMeta$1 {
     hash?: string;
     cached_at?: string;
 }
+/**
+ * Визуальные стили объекта VSL (DESIGN_SYSTEM.md §4.3).
+ * Optional: только для визуально значимых элементов.
+ * Все значения — computed styles в момент snapshot.
+ */
+interface VslStyle {
+    /** Background color (computed). */
+    bg?: string;
+    /** Text/foreground color (computed). */
+    fg?: string;
+    /** Border shorthand (computed). */
+    border?: string;
+    /** Border radius (computed). */
+    radius?: string;
+    /** Box shadow (computed). */
+    shadow?: string;
+    /** Font properties. */
+    font?: {
+        family?: string;
+        size?: string;
+        weight?: string;
+    };
+}
 /**
  * Запись реестра visual_fragments документа (§2.2.2, ARCHITECTURE.md:L265-284).
  * ТОЛЬКО метаданные: base64-данные изображений живут в VisualFragmentStore
@@ -148,6 +183,12 @@ interface VslObject {
     vf?: string;
     /** Метаданные фрагмента (§4.4). */
     vf_meta?: VslFragmentMeta$1;
+    /** Визуальные стили (DESIGN_SYSTEM.md §4.3). Optional: только для визуально значимых элементов. */
+    sty?: VslStyle;
+    /** Accept attribute для file_input (например, '.pdf,.docx'). */
+    accept?: string;
+    /** Multiple attribute для file_input — разрешена загрузка нескольких файлов. */
+    multiple?: boolean;
 }
 interface VslDocument {
     vsl_version: string;
@@ -250,6 +291,8 @@ interface SegmentedElement {
     txt: string | null;
     /** Состояние из ARIA (checked/expanded/disabled) или null. */
     st: VslState | null;
+    /** CSS-подмножество для визуальных стилей (передаётся в Builder для sty). */
+    css?: ElementCss;
     ch: SegmentedElement[];
     /** Ссылка на визуальный фрагмент (заполняется enrichWithVision, T1.5.4). */
     vf?: string;
@@ -1055,7 +1098,7 @@ declare const ACTION_TOOL_SCHEMA: {
         action: {
             type: string;
             description: string;
-            enum: ("select" | "click" | "close" | "type" | "check" | "uncheck" | "clear" | "scroll" | "hover" | "focus" | "blur" | "drag" | "drop" | "submit" | "reset" | "open" | "expand" | "collapse" | "wait" | "navigate" | "go_back" | "go_forward" | "refresh" | "download")[];
+            enum: ("select" | "type" | "click" | "close" | "check" | "uncheck" | "clear" | "scroll" | "hover" | "focus" | "blur" | "drag" | "drop" | "submit" | "reset" | "open" | "expand" | "collapse" | "wait" | "navigate" | "go_back" | "go_forward" | "refresh" | "download")[];
         };
         target_id: {
             type: string;

package/dist/index.js

@@ -109,7 +109,13 @@ var CSS_PROPERTIES = [
   ["opacity", "opacity"],
   ["pointerEvents", "pointer-events"],
   ["overflow", "overflow"],
-  ["height", "height"]
+  ["height", "height"],
+  ["backgroundColor", "background-color"],
+  ["color", "color"],
+  ["border", "border"],
+  ["borderRadius", "border-radius"],
+  ["boxShadow", "box-shadow"],
+  ["fontFamily", "font-family"]
 ];
 function captureCss(el) {
   const view = viewOf(el);
@@ -319,14 +325,16 @@ function isAriaHidden(attributes) {
 }
 function segmentOne(el) {
   const { attributes } = el;
+  const isFileInput = el.tag === "input" && attributes["type"] === "file";
   return {
     tag: el.tag,
     indexPath: el.indexPath,
     rect: el.rect,
     attributes,
-    t: resolveLevel1Type(el.tag) ?? resolveAriaRoleType(attributes["role"]) ?? resolveLevel3Type(el.css, attributes),
+    t: isFileInput ? "file_input" : resolveLevel1Type(el.tag) ?? resolveAriaRoleType(attributes["role"]) ?? resolveLevel3Type(el.css, attributes),
     txt: attributes["aria-label"] ?? el.text,
     st: resolveSt(attributes),
+    css: el.css,
     ch: []
   };
 }
@@ -379,6 +387,8 @@ function defaultActions(t, st, attributes) {
       return ["click", "select"];
     case "textarea":
       return ["click", "type", "clear"];
+    case "file_input":
+      return ["click", "upload"];
     default:
       return void 0;
   }
@@ -391,6 +401,39 @@ function baseSemanticScore(el) {
   if (el.txt) score += 1;
   return score;
 }
+function extractVisualStyles(css) {
+  if (!css) return void 0;
+  const style = {};
+  let hasContent = false;
+  if (css.backgroundColor && css.backgroundColor !== "transparent" && !css.backgroundColor.includes("rgba(0, 0, 0, 0)")) {
+    style.bg = css.backgroundColor;
+    hasContent = true;
+  }
+  if (css.color && css.color !== "rgb(0, 0, 0)") {
+    style.fg = css.color;
+    hasContent = true;
+  }
+  if (css.border && css.border !== "none" && !css.border.startsWith("0px")) {
+    style.border = css.border;
+    hasContent = true;
+  }
+  if (css.borderRadius && css.borderRadius !== "0px") {
+    style.radius = css.borderRadius;
+    hasContent = true;
+  }
+  if (css.boxShadow && css.boxShadow !== "none") {
+    style.shadow = css.boxShadow;
+    hasContent = true;
+  }
+  if (css.fontFamily || css.fontSize || css.fontWeight) {
+    style.font = {};
+    if (css.fontFamily) style.font.family = css.fontFamily;
+    if (css.fontSize) style.font.size = css.fontSize;
+    if (css.fontWeight) style.font.weight = css.fontWeight;
+    hasContent = true;
+  }
+  return hasContent ? style : void 0;
+}
 function toVslObject(el, viewport, includedChildren, textBlocks, counter) {
   const t = el.t ?? "container";
   const object = {
@@ -417,6 +460,12 @@ function toVslObject(el, viewport, includedChildren, textBlocks, counter) {
   if (includedChildren.length > 0) object.ch = includedChildren;
   if (el.vf !== void 0) object.vf = el.vf;
   if (el.vf_meta !== void 0) object.vf_meta = el.vf_meta;
+  const sty = extractVisualStyles(el.css);
+  if (sty !== void 0) object.sty = sty;
+  if (t === "file_input") {
+    if (el.attributes["accept"] !== void 0) object.accept = el.attributes["accept"];
+    if (el.attributes["multiple"] !== void 0) object.multiple = true;
+  }
   return object;
 }
 function convert(el, viewport, textBlocks, counter) {