Schema
The shapes Weevar uses internally
This is useful if you're customizing prompt templates or building tooling around Weevar's output.
Element identity#
type ElementIdentity = {
fiberPath?: FiberPathSegment[];
source?: SourceLocation;
domPath: DomPathSegment[];
tag: string;
classList: string[];
contentHash: string;
label: string;
componentName?: string;
testId?: string;
textSnippet?: string;
inPortal?: boolean;
childElementCount?: number;
};
type FiberPathSegment = {
componentName?: string;
key?: string | number | null;
index: number;
source?: SourceLocation;
};
type DomPathSegment = {
tag: string;
index: number;
classes?: string[];
};
type SourceLocation = {
file: string;
line: number;
col: number;
};
contentHash is a short fingerprint of the element's text content. It's used as a tie-breaker when DOM paths alone aren't unique.
inPortal is true when the element is rendered through a React portal; useful in prompts because portal children live in a different DOM subtree from their parent.
childElementCount is the number of direct element children at the time identity is captured. It's included in prompts when the target is a container, so the agent knows the move involves a subtree and not just a text node or leaf element.
Change types#
V2 sessions track two kinds of change. Both live in the same changes array on the session object.
type WeevarChange =
| LayoutChange
| StyleTweak;
Layout change#
A single drag-and-drop produces one of these:
type LayoutChange =
| LayoutChangeReorder
| LayoutChangeMove;
type LayoutChangeReorder = {
kind: "reorder";
target: ElementIdentity;
parent: ElementIdentity;
fromIndex: number;
toIndex: number;
siblings: ElementIdentity[]; // in new order, including the target
layoutType: LayoutType;
};
type LayoutChangeMove = {
kind: "move";
target: ElementIdentity;
fromParent: ElementIdentity;
toParent: ElementIdentity;
fromIndex: number;
toIndex: number;
destinationSiblings?: ElementIdentity[];
fromLayoutType: LayoutType;
toLayoutType: LayoutType;
};
type LayoutType = {
display: string; // "flex" | "grid" | "block" | "inline-flex" | …
flexDirection?: string; // "row" | "column" | "row-reverse" | "column-reverse"
};
Layout type comes from getComputedStyle(parent) at the moment of the drop.
Style tweak#
An Edit Tray commit produces one of these. Multiple commits to the same element in one session are merged — earliest fromValue, latest toValue per property.
type StyleTweak = {
kind: "style";
target: ElementIdentity;
elementCategory: ElementCategory;
changes: StylePropertyChange[];
};
type StylePropertyChange = {
cssProperty: string; // e.g. "font-size", "color", "border-width"
fromValue: string; // computed value before the edit
toValue: string; // value after the edit
};
type ElementCategory =
| "text"
| "image"
| "svg"
| "stack"
| "generic";
elementCategory is determined by classifyElement at selection time and drives which controls appear in the Edit Tray. It's included in Detailed prompts so the agent understands what kind of element it's working with.
Session#
type EditSession = {
changes: BatchedChange[];
startedAt: number;
};
// MoveSession is a deprecated alias for EditSession.
// It remains so existing TypeScript imports compile.
type MoveSession = EditSession;
type BatchedChange = {
ordinal: number;
change: WeevarChange;
badgeAnchor: ElementIdentity;
capturedAt: number;
};
Repeated changes to the same target element are collapsed at prompt-generation time. The prompt describes the net change, not every intermediate state.
Generated prompt#
type GeneratedPrompt = {
short: string;
detailed: string;
meta: {
targetTool: TargetTool;
timestamp: number;
change: WeevarChange;
};
};
type TargetTool = "claude-code" | "codex" | "generic";
type PromptLength = "short" | "detailed";
The Prompt tray copies whichever string matches the user's current Settings. For batched sessions, generateBatchedPrompt produces a single combined prompt covering all changes in ordinal order.