feat(shared): add detail level enums and optional text/css fields to

TargetedElement

Author: ashtonchew

packages/shared/src/detail.ts

@@ -0,0 +1,76 @@
+import { CSSDetailLevel, TextDetailLevel } from './types';
+
+export const TEXT_DETAIL_OPTIONS: readonly TextDetailLevel[] = ['full', 'visible', 'none'];
+
+export const CSS_DETAIL_OPTIONS: readonly CSSDetailLevel[] = [0, 1, 2, 3];
+
+export const CSS_LEVEL_1_FIELDS: readonly string[] = [
+  'display',
+  'position',
+  'fontSize',
+  'color',
+  'backgroundColor',
+];
+
+const CSS_LEVEL_2_EXTRA_FIELDS = [
+  'margin',
+  'marginTop',
+  'marginRight',
+  'marginBottom',
+  'marginLeft',
+  'padding',
+  'paddingTop',
+  'paddingRight',
+  'paddingBottom',
+  'paddingLeft',
+  'lineHeight',
+  'textAlign',
+  'fontWeight',
+  'fontFamily',
+  'width',
+  'height',
+  'minWidth',
+  'maxWidth',
+  'minHeight',
+  'maxHeight',
+  'border',
+  'borderTop',
+  'borderRight',
+  'borderBottom',
+  'borderLeft',
+  'borderRadius',
+  'borderTopLeftRadius',
+  'borderTopRightRadius',
+  'borderBottomRightRadius',
+  'borderBottomLeftRadius',
+  'boxSizing',
+  'flexDirection',
+  'justifyContent',
+  'alignItems',
+  'gap',
+  'overflow',
+  'overflowX',
+  'overflowY',
+] as const;
+
+export const CSS_LEVEL_2_FIELDS: readonly string[] = Object.freeze([
+  ...CSS_LEVEL_1_FIELDS,
+  ...CSS_LEVEL_2_EXTRA_FIELDS,
+]);
+
+export const CSS_LEVEL_FIELD_MAP: Record<
+Exclude<CSSDetailLevel, 0>,
+readonly string[]
+> = Object.freeze({
+  1: CSS_LEVEL_1_FIELDS,
+  2: CSS_LEVEL_2_FIELDS,
+  3: [],
+});
+
+export function isValidTextDetail(detail: unknown): detail is TextDetailLevel {
+  return typeof detail === 'string' && (TEXT_DETAIL_OPTIONS as readonly string[]).includes(detail);
+}
+
+export function isValidCSSLevel(level: unknown): level is CSSDetailLevel {
+  return typeof level === 'number' && (CSS_DETAIL_OPTIONS as readonly number[]).includes(level);
+}

packages/shared/src/types.ts

@@ -1,17 +1,24 @@
+export type TextDetailLevel = 'full' | 'visible' | 'none';
+
+export type CSSDetailLevel = 0 | 1 | 2 | 3;
+
+export const DEFAULT_TEXT_DETAIL: TextDetailLevel = 'full';
+
+export const DEFAULT_CSS_LEVEL: CSSDetailLevel = 1;
+
+export interface TextSnapshots {
+  visible: string;
+  full: string;
+}
+
 export interface ElementPosition {
   x: number;
   y: number;
   width: number;
   height: number;
 }
 
-export interface CSSProperties {
-  display: string;
-  position: string;
-  fontSize: string;
-  color: string;
-  backgroundColor: string;
-}
+export type CSSProperties = Record<string, string>;
 
 export interface ComponentInfo {
   name?: string;
@@ -24,10 +31,15 @@ export interface TargetedElement {
   tagName: string;
   id?: string;
   classes: string[];
-  innerText: string;
+  innerText?: string;
+  textContent?: string;
+  textDetail?: TextDetailLevel;
+  textVariants?: TextSnapshots;
   attributes: Record<string, string>;
   position: ElementPosition;
-  cssProperties: CSSProperties;
+  cssLevel?: CSSDetailLevel;
+  cssProperties?: CSSProperties;
+  cssComputed?: Record<string, string>;
   componentInfo?: ComponentInfo;
   timestamp: number;
   url: string;