autokap 1.0.6 → 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (130) hide show
  1. package/assets/chrome/ios-statusbar-comparison-reference.jpg +0 -0
  2. package/assets/chrome/ios-statusbar-dark-reference.jpg +0 -0
  3. package/assets/chrome/ios-statusbar-light-reference.jpg +0 -0
  4. package/assets/devices/ipad-pro-11-m4.json +52 -0
  5. package/assets/devices/iphone-16-pro.json +53 -0
  6. package/assets/devices/macbook-air-13.json +45 -0
  7. package/assets/frames/MacBook Air 13.svg +242 -0
  8. package/assets/frames/Status bar - iPhone.png +0 -0
  9. Menu bar- iPad.png +0 -0
  10. package/assets/frames/iPad Pro M4 11_.png +0 -0
  11. package/assets/frames/iPhone 16 Pro.png +0 -0
  12. package/assets/icons/Cellular Connection.svg +3 -0
  13. package/assets/icons/Union.svg +6 -0
  14. package/assets/icons/Wifi.svg +3 -0
  15. package/assets/icons/battery.svg +5 -0
  16. package/assets/icons/battery_charging.svg +8 -0
  17. package/dist/abort.d.ts +5 -0
  18. package/dist/abort.js +44 -0
  19. package/dist/agent.d.ts +142 -0
  20. package/dist/agent.js +4511 -0
  21. package/dist/billing-operation-logging.d.ts +38 -0
  22. package/dist/billing-operation-logging.js +248 -0
  23. package/dist/browser-bar.d.ts +40 -0
  24. package/dist/browser-bar.js +147 -0
  25. package/dist/browser.d.ts +25 -0
  26. package/dist/browser.js +177 -9
  27. package/dist/capture-alt-text.d.ts +12 -0
  28. package/dist/capture-alt-text.js +51 -0
  29. package/dist/capture-encryption.d.ts +10 -0
  30. package/dist/capture-encryption.js +41 -0
  31. package/dist/capture-language-preflight.d.ts +41 -0
  32. package/dist/capture-language-preflight.js +286 -0
  33. package/dist/capture-llm-page-identity.d.ts +15 -0
  34. package/dist/capture-llm-page-identity.js +116 -0
  35. package/dist/capture-model-resolution.d.ts +9 -0
  36. package/dist/capture-model-resolution.js +21 -0
  37. package/dist/capture-page-identity.d.ts +9 -0
  38. package/dist/capture-page-identity.js +219 -0
  39. package/dist/capture-preset-credentials.d.ts +12 -0
  40. package/dist/capture-preset-credentials.js +57 -0
  41. package/dist/capture-request-plan.d.ts +58 -0
  42. package/dist/capture-request-plan.js +216 -0
  43. package/dist/capture-run-optimizer.d.ts +139 -0
  44. package/dist/capture-run-optimizer.js +848 -0
  45. package/dist/capture-selector-memory.d.ts +26 -0
  46. package/dist/capture-selector-memory.js +327 -0
  47. package/dist/capture-session-profile-encryption.d.ts +2 -0
  48. package/dist/capture-session-profile-encryption.js +22 -0
  49. package/dist/capture-step-timeout.d.ts +10 -0
  50. package/dist/capture-step-timeout.js +30 -0
  51. package/dist/capture-studio-sync.d.ts +22 -0
  52. package/dist/capture-studio-sync.js +166 -0
  53. package/dist/capture-variant-state.d.ts +54 -0
  54. package/dist/capture-variant-state.js +156 -0
  55. package/dist/cli.js +15 -0
  56. package/dist/clip-orchestrator.d.ts +148 -0
  57. package/dist/clip-orchestrator.js +950 -0
  58. package/dist/clip-postprocess.d.ts +42 -0
  59. package/dist/clip-postprocess.js +192 -0
  60. package/dist/cost-logging.d.ts +27 -0
  61. package/dist/cost-logging.js +128 -0
  62. package/dist/credential-templates.d.ts +5 -0
  63. package/dist/credential-templates.js +60 -0
  64. package/dist/element-capture.d.ts +53 -0
  65. package/dist/element-capture.js +766 -0
  66. package/dist/hybrid-navigator.d.ts +138 -0
  67. package/dist/hybrid-navigator.js +468 -0
  68. package/dist/index.d.ts +15 -0
  69. package/dist/index.js +11 -0
  70. package/dist/llm-usage.d.ts +17 -0
  71. package/dist/llm-usage.js +45 -0
  72. package/dist/mockup-html.d.ts +119 -0
  73. package/dist/mockup-html.js +253 -0
  74. package/dist/mockup.d.ts +94 -0
  75. package/dist/mockup.js +608 -0
  76. package/dist/mouse-animation.d.ts +46 -0
  77. package/dist/mouse-animation.js +100 -0
  78. package/dist/overlay-utils.d.ts +14 -0
  79. package/dist/overlay-utils.js +13 -0
  80. package/dist/posthog.d.ts +4 -0
  81. package/dist/posthog.js +26 -0
  82. package/dist/prompt-cache.d.ts +10 -0
  83. package/dist/prompt-cache.js +24 -0
  84. package/dist/prompts.d.ts +167 -0
  85. package/dist/prompts.js +1165 -0
  86. package/dist/remote-browser.d.ts +191 -0
  87. package/dist/remote-browser.js +305 -0
  88. package/dist/security.d.ts +20 -0
  89. package/dist/security.js +569 -0
  90. package/dist/server-capture-runtime.d.ts +123 -0
  91. package/dist/server-capture-runtime.js +638 -0
  92. package/dist/server-credit-usage.d.ts +12 -0
  93. package/dist/server-credit-usage.js +41 -0
  94. package/dist/server-posthog.d.ts +2 -0
  95. package/dist/server-posthog.js +16 -0
  96. package/dist/server-project-webhooks.d.ts +45 -0
  97. package/dist/server-project-webhooks.js +97 -0
  98. package/dist/server-screenshot-watermark.d.ts +7 -0
  99. package/dist/server-screenshot-watermark.js +38 -0
  100. package/dist/session-profile.d.ts +86 -0
  101. package/dist/session-profile.js +1373 -0
  102. package/dist/sf-pro-fonts.d.ts +4 -0
  103. package/dist/sf-pro-fonts.js +7 -0
  104. package/dist/status-bar-l10n.d.ts +14 -0
  105. package/dist/status-bar-l10n.js +177 -0
  106. package/dist/status-bar.d.ts +44 -0
  107. package/dist/status-bar.js +336 -0
  108. package/dist/tools.d.ts +4 -0
  109. package/dist/tools.js +578 -0
  110. package/dist/video-agent.d.ts +143 -0
  111. package/dist/video-agent.js +4783 -0
  112. package/dist/video-observation.d.ts +36 -0
  113. package/dist/video-observation.js +192 -0
  114. package/dist/video-planner.d.ts +12 -0
  115. package/dist/video-planner.js +500 -0
  116. package/dist/video-prompts.d.ts +37 -0
  117. package/dist/video-prompts.js +554 -0
  118. package/dist/video-tools.d.ts +3 -0
  119. package/dist/video-tools.js +59 -0
  120. package/dist/video-variant-state.d.ts +29 -0
  121. package/dist/video-variant-state.js +80 -0
  122. package/dist/vision-model.d.ts +17 -0
  123. package/dist/vision-model.js +74 -0
  124. package/dist/ws-auth.d.ts +20 -0
  125. package/dist/ws-auth.js +67 -0
  126. package/dist/ws-handler.d.ts +10 -0
  127. package/dist/ws-handler.js +1663 -0
  128. package/dist/ws-server.d.ts +9 -0
  129. package/dist/ws-server.js +52 -0
  130. package/package.json +93 -39
@@ -0,0 +1,38 @@
1
+ import type { SupabaseClient } from '@supabase/supabase-js';
2
+ import type { StepUsage } from './types.js';
3
+ export type BillingOperationType = 'screenshot' | 'clip' | 'video';
4
+ type BillingOperationOutcome = 'succeeded' | 'failed' | 'cancelled';
5
+ interface BillingOperationContext {
6
+ runId: string;
7
+ userId: string;
8
+ projectId?: string | null;
9
+ presetId?: string | null;
10
+ captureId?: string | null;
11
+ videoId?: string | null;
12
+ clipRecordId?: string | null;
13
+ operationType: BillingOperationType;
14
+ captureType?: 'fullpage' | 'element' | 'video' | null;
15
+ lang?: string | null;
16
+ theme?: 'light' | 'dark' | string | null;
17
+ elementName?: string;
18
+ targetId?: string;
19
+ viewportWidth?: number | null;
20
+ viewportHeight?: number | null;
21
+ deviceFrame?: string | null;
22
+ }
23
+ interface BillingOperationParams {
24
+ outcome: BillingOperationOutcome;
25
+ outcomeReason?: string | null;
26
+ billable: boolean;
27
+ creditsCharged: number;
28
+ costLogIds: string[];
29
+ usage: StepUsage[];
30
+ metadata?: Record<string, unknown>;
31
+ }
32
+ export declare function insertBillingOperationLog(supabase: SupabaseClient, ctx: BillingOperationContext, params: BillingOperationParams): Promise<string | null>;
33
+ export declare function insertScreenshotOperationLog(supabase: SupabaseClient, ctx: Omit<BillingOperationContext, 'operationType'>, params: BillingOperationParams): Promise<string | null>;
34
+ export declare function insertClipOperationLog(supabase: SupabaseClient, ctx: Omit<BillingOperationContext, 'operationType'>, params: BillingOperationParams): Promise<string | null>;
35
+ export declare function insertVideoOperationLog(supabase: SupabaseClient, ctx: Omit<BillingOperationContext, 'operationType'>, params: BillingOperationParams): Promise<string | null>;
36
+ export declare function cancelScreenshotOperationLogsForCapture(supabase: SupabaseClient, captureId: string, reason: string): Promise<void>;
37
+ export declare function reconcilePendingBillingOperationCosts(supabase: SupabaseClient, operationIds?: string[]): Promise<void>;
38
+ export {};
@@ -0,0 +1,248 @@
1
+ function uniqNonEmpty(values) {
2
+ return Array.from(new Set(values
3
+ .map((value) => value?.trim())
4
+ .filter((value) => !!value)));
5
+ }
6
+ function summarizeUsage(usage) {
7
+ return {
8
+ llmCallCount: usage.length,
9
+ promptTokens: usage.reduce((sum, step) => sum + (step.promptTokens ?? 0), 0),
10
+ completionTokens: usage.reduce((sum, step) => sum + (step.completionTokens ?? 0), 0),
11
+ totalTokens: usage.reduce((sum, step) => sum + (step.totalTokens ?? 0), 0),
12
+ cacheReadTokens: usage.reduce((sum, step) => sum + (step.cacheReadTokens ?? 0), 0),
13
+ cacheWriteTokens: usage.reduce((sum, step) => sum + (step.cacheWriteTokens ?? 0), 0),
14
+ imagesInPrompt: usage.reduce((sum, step) => sum + (step.imagesInPrompt ?? 0), 0),
15
+ modelRequested: uniqNonEmpty(usage.map((step) => step.modelRequested)).join(', ') || null,
16
+ modelUsed: uniqNonEmpty(usage.map((step) => step.modelUsed)).join(', ') || null,
17
+ generationIds: uniqNonEmpty(usage.map((step) => step.generationId)),
18
+ };
19
+ }
20
+ async function resolveCostLogs(supabase, costLogIds) {
21
+ if (costLogIds.length === 0) {
22
+ return {
23
+ costUsd: 0,
24
+ costSource: 'no_llm',
25
+ costResolved: true,
26
+ costResolutionStatus: 'resolved',
27
+ costResolutionError: null,
28
+ resolvedAt: new Date().toISOString(),
29
+ };
30
+ }
31
+ const { data, error } = await supabase
32
+ .from('cost_logs')
33
+ .select('id, generation_id, cost_resolved, cost_usd')
34
+ .in('id', costLogIds);
35
+ if (error) {
36
+ return {
37
+ costUsd: null,
38
+ costSource: 'cost_logs_lookup_failed',
39
+ costResolved: false,
40
+ costResolutionStatus: 'unresolvable',
41
+ costResolutionError: error.message,
42
+ resolvedAt: null,
43
+ };
44
+ }
45
+ const rows = data ?? [];
46
+ if (rows.length !== costLogIds.length) {
47
+ return {
48
+ costUsd: null,
49
+ costSource: 'missing_cost_logs',
50
+ costResolved: false,
51
+ costResolutionStatus: 'unresolvable',
52
+ costResolutionError: `Expected ${costLogIds.length} cost log rows, found ${rows.length}.`,
53
+ resolvedAt: null,
54
+ };
55
+ }
56
+ if (rows.some((row) => !row.cost_resolved || row.cost_usd == null)) {
57
+ if (rows.some((row) => !row.cost_resolved && row.cost_usd == null && row.generation_id == null)) {
58
+ return {
59
+ costUsd: null,
60
+ costSource: 'missing_generation_id',
61
+ costResolved: false,
62
+ costResolutionStatus: 'unresolvable',
63
+ costResolutionError: 'At least one referenced cost log is missing a generation_id, so OpenRouter cannot return the real cost.',
64
+ resolvedAt: null,
65
+ };
66
+ }
67
+ return {
68
+ costUsd: null,
69
+ costSource: 'aggregated_cost_logs_pending',
70
+ costResolved: false,
71
+ costResolutionStatus: 'pending',
72
+ costResolutionError: null,
73
+ resolvedAt: null,
74
+ };
75
+ }
76
+ const costUsd = rows.reduce((sum, row) => sum + Number(row.cost_usd ?? 0), 0);
77
+ return {
78
+ costUsd,
79
+ costSource: 'aggregated_cost_logs',
80
+ costResolved: true,
81
+ costResolutionStatus: 'resolved',
82
+ costResolutionError: null,
83
+ resolvedAt: new Date().toISOString(),
84
+ };
85
+ }
86
+ function deriveInitialCostResolution(usage, costLogIds) {
87
+ if (usage.length === 0) {
88
+ return {
89
+ costUsd: 0,
90
+ costSource: 'no_llm',
91
+ costResolved: true,
92
+ costResolutionStatus: 'resolved',
93
+ costResolutionError: null,
94
+ resolvedAt: new Date().toISOString(),
95
+ };
96
+ }
97
+ if (costLogIds.length !== usage.length) {
98
+ return {
99
+ costUsd: null,
100
+ costSource: 'missing_cost_logs',
101
+ costResolved: false,
102
+ costResolutionStatus: 'unresolvable',
103
+ costResolutionError: `Expected ${usage.length} cost log ids, received ${costLogIds.length}.`,
104
+ resolvedAt: null,
105
+ };
106
+ }
107
+ const missingGenerationCount = usage.filter((step) => !step.generationId?.trim()).length;
108
+ if (missingGenerationCount > 0) {
109
+ return {
110
+ costUsd: null,
111
+ costSource: 'missing_generation_id',
112
+ costResolved: false,
113
+ costResolutionStatus: 'unresolvable',
114
+ costResolutionError: `Expected generation ids for all usage steps, but ${missingGenerationCount} step(s) are missing them.`,
115
+ resolvedAt: null,
116
+ };
117
+ }
118
+ return null;
119
+ }
120
+ export async function insertBillingOperationLog(supabase, ctx, params) {
121
+ const usageSummary = summarizeUsage(params.usage);
122
+ const forcedResolution = deriveInitialCostResolution(params.usage, params.costLogIds);
123
+ const costResolution = forcedResolution ?? await resolveCostLogs(supabase, params.costLogIds);
124
+ const id = crypto.randomUUID();
125
+ const { error } = await supabase.from('billing_operation_logs').insert({
126
+ id,
127
+ run_id: ctx.runId,
128
+ user_id: ctx.userId,
129
+ project_id: ctx.projectId ?? null,
130
+ preset_id: ctx.presetId ?? null,
131
+ capture_id: ctx.captureId ?? null,
132
+ video_id: ctx.videoId ?? null,
133
+ clip_record_id: ctx.clipRecordId ?? null,
134
+ operation_type: ctx.operationType,
135
+ operation_outcome: params.outcome,
136
+ outcome_reason: params.outcomeReason ?? null,
137
+ billable: params.billable,
138
+ credits_charged: params.creditsCharged,
139
+ cost_usd: costResolution.costUsd,
140
+ cost_resolved: costResolution.costResolved,
141
+ cost_resolution_status: costResolution.costResolutionStatus,
142
+ cost_source: costResolution.costSource,
143
+ cost_resolution_error: costResolution.costResolutionError,
144
+ resolved_at: costResolution.resolvedAt,
145
+ cost_log_ids: params.costLogIds,
146
+ llm_call_count: usageSummary.llmCallCount,
147
+ prompt_tokens: usageSummary.promptTokens,
148
+ completion_tokens: usageSummary.completionTokens,
149
+ total_tokens: usageSummary.totalTokens,
150
+ cache_read_tokens: usageSummary.cacheReadTokens,
151
+ cache_write_tokens: usageSummary.cacheWriteTokens,
152
+ images_in_prompt: usageSummary.imagesInPrompt,
153
+ model_requested: usageSummary.modelRequested,
154
+ model_used: usageSummary.modelUsed,
155
+ capture_type: ctx.captureType ?? null,
156
+ target_id: ctx.targetId ?? null,
157
+ element_name: ctx.elementName ?? null,
158
+ lang: ctx.lang ?? null,
159
+ theme: ctx.theme ?? null,
160
+ viewport_width: ctx.viewportWidth ?? null,
161
+ viewport_height: ctx.viewportHeight ?? null,
162
+ device_frame: ctx.deviceFrame ?? null,
163
+ metadata: {
164
+ ...(params.metadata ?? {}),
165
+ generationIds: usageSummary.generationIds,
166
+ },
167
+ });
168
+ if (error) {
169
+ console.error('Failed to insert billing operation log:', error.message);
170
+ return null;
171
+ }
172
+ return id;
173
+ }
174
+ export async function insertScreenshotOperationLog(supabase, ctx, params) {
175
+ return insertBillingOperationLog(supabase, { ...ctx, operationType: 'screenshot' }, params);
176
+ }
177
+ export async function insertClipOperationLog(supabase, ctx, params) {
178
+ return insertBillingOperationLog(supabase, { ...ctx, operationType: 'clip' }, params);
179
+ }
180
+ export async function insertVideoOperationLog(supabase, ctx, params) {
181
+ return insertBillingOperationLog(supabase, { ...ctx, operationType: 'video' }, params);
182
+ }
183
+ export async function cancelScreenshotOperationLogsForCapture(supabase, captureId, reason) {
184
+ try {
185
+ const { error } = await supabase
186
+ .from('billing_operation_logs')
187
+ .update({
188
+ operation_outcome: 'cancelled',
189
+ outcome_reason: reason,
190
+ billable: false,
191
+ credits_charged: 0,
192
+ })
193
+ .eq('capture_id', captureId)
194
+ .eq('operation_type', 'screenshot');
195
+ if (error) {
196
+ console.error('Failed to cancel screenshot billing operation logs:', error.message);
197
+ }
198
+ }
199
+ catch (error) {
200
+ console.error('Failed to cancel screenshot billing operation logs:', error.message);
201
+ }
202
+ }
203
+ export async function reconcilePendingBillingOperationCosts(supabase, operationIds) {
204
+ try {
205
+ let query = supabase
206
+ .from('billing_operation_logs')
207
+ .select('id, cost_log_ids')
208
+ .eq('cost_resolution_status', 'pending');
209
+ if (operationIds?.length) {
210
+ query = query.in('id', operationIds);
211
+ }
212
+ else {
213
+ query = query.limit(100);
214
+ }
215
+ const { data, error } = await query;
216
+ if (error) {
217
+ console.error('Failed to load pending billing operations:', error.message);
218
+ return;
219
+ }
220
+ for (const row of data ?? []) {
221
+ const costLogIds = Array.isArray(row.cost_log_ids)
222
+ ? row.cost_log_ids.filter((value) => typeof value === 'string')
223
+ : [];
224
+ const resolution = await resolveCostLogs(supabase, costLogIds);
225
+ if (!resolution.costResolved && resolution.costResolutionStatus === 'pending') {
226
+ continue;
227
+ }
228
+ const { error: updateError } = await supabase
229
+ .from('billing_operation_logs')
230
+ .update({
231
+ cost_usd: resolution.costUsd,
232
+ cost_resolved: resolution.costResolved,
233
+ cost_resolution_status: resolution.costResolutionStatus,
234
+ cost_source: resolution.costSource,
235
+ cost_resolution_error: resolution.costResolutionError,
236
+ resolved_at: resolution.resolvedAt,
237
+ })
238
+ .eq('id', row.id);
239
+ if (updateError) {
240
+ console.error(`Failed to reconcile billing operation log ${row.id}:`, updateError.message);
241
+ }
242
+ }
243
+ }
244
+ catch (error) {
245
+ console.error('Failed to reconcile pending billing operation costs:', error.message);
246
+ }
247
+ }
248
+ //# sourceMappingURL=billing-operation-logging.js.map
@@ -0,0 +1,40 @@
1
+ /**
2
+ * Chrome macOS browser bar — pixel-perfect from toolbar4.svg.
3
+ *
4
+ * Inlines the real Chrome SVG (cleaned), with dynamic width support:
5
+ * right-anchored elements (tab overflow, star, profile, extensions)
6
+ * and address bar width are computed from the target width.
7
+ *
8
+ * Dynamic content (page title, URL, favicon) overlaid as HTML.
9
+ * SF Pro embedded fonts for cross-OS rendering.
10
+ *
11
+ * Reference: 2160×129 @ 1.5× (toolbar4.svg)
12
+ */
13
+ export interface BrowserBarConfig {
14
+ url?: string;
15
+ pageTitle?: string;
16
+ tabIconUrl?: string;
17
+ colorScheme?: 'light' | 'dark';
18
+ }
19
+ export interface BrowserBarZoneRect {
20
+ x: number;
21
+ y: number;
22
+ width: number;
23
+ height: number;
24
+ fontSize?: number;
25
+ fontWeight?: number | string;
26
+ textAlign?: 'left' | 'center' | 'right';
27
+ }
28
+ export interface BrowserBarZones {
29
+ favicon?: BrowserBarZoneRect;
30
+ pageTitle?: BrowserBarZoneRect;
31
+ url?: BrowserBarZoneRect;
32
+ }
33
+ export interface BrowserBarRenderOptions {
34
+ config: BrowserBarConfig;
35
+ width: number;
36
+ height: number;
37
+ scale: number;
38
+ pixelScale?: number;
39
+ }
40
+ export declare function generateBrowserBarHtml(options: BrowserBarRenderOptions): string;
@@ -0,0 +1,147 @@
1
+ /**
2
+ * Chrome macOS browser bar — pixel-perfect from toolbar4.svg.
3
+ *
4
+ * Inlines the real Chrome SVG (cleaned), with dynamic width support:
5
+ * right-anchored elements (tab overflow, star, profile, extensions)
6
+ * and address bar width are computed from the target width.
7
+ *
8
+ * Dynamic content (page title, URL, favicon) overlaid as HTML.
9
+ * SF Pro embedded fonts for cross-OS rendering.
10
+ *
11
+ * Reference: 2160×129 @ 1.5× (toolbar4.svg)
12
+ */
13
+ import { SF_PRO_TEXT_REGULAR, SF_PRO_TEXT_SEMIBOLD, } from './sf-pro-fonts.js';
14
+ // ── SF Pro ───────────────────────────────────────────────────────────────
15
+ const SF = `<style>
16
+ @font-face{font-family:'SF Pro Text';src:local('SF Pro Text'),local('.SFNSText'),url('${SF_PRO_TEXT_REGULAR}') format('woff2');font-weight:400;font-style:normal}
17
+ @font-face{font-family:'SF Pro Text';src:local('SF Pro Text Semibold'),local('.SFNSText-Semibold'),url('${SF_PRO_TEXT_SEMIBOLD}') format('woff2');font-weight:600;font-style:normal}
18
+ </style>`;
19
+ const FF = "'SF Pro Text',-apple-system,BlinkMacSystemFont,system-ui,sans-serif";
20
+ // ── Reference ────────────────────────────────────────────────────────────
21
+ const REF_W = 2160;
22
+ const REF_H = 129; // SVG viewBox height (includes 1.5px bottom border)
23
+ // Right margins (distance from right edge at ref width 2160)
24
+ const TAB_OVERFLOW_MR = 51; // tab overflow rect x=2109 → margin 51
25
+ const ADDR_BAR_ML = 174; // address bar left x (was 234 with home icon)
26
+ const ADDR_BAR_MR = 126; // address bar right margin (2160-2034)
27
+ const PROFILE_MR = 102; // profile rect x=2058 → margin 102
28
+ const EAR_R_MR = 16.5; // right ear margin
29
+ // ── Generator ────────────────────────────────────────────────────────────
30
+ export function generateBrowserBarHtml(options) {
31
+ const { config, width, height, pixelScale = 1 } = options;
32
+ const title = esc(config.pageTitle || 'New Tab');
33
+ const rawUrl = config.url || 'example.com';
34
+ const url = esc(rawUrl.replace(/^https?:\/\//, '').replace(/\/$/, ''));
35
+ const icon = config.tabIconUrl;
36
+ const isDark = config.colorScheme === 'dark';
37
+ // Scale: fit reference height into target height
38
+ const s = height / REF_H;
39
+ const iw = Math.round(width / s); // internal width at reference scale
40
+ const ts = s * pixelScale;
41
+ // Dynamic right-anchored positions
42
+ const dx = iw - REF_W; // offset for right-anchored elements
43
+ const tabOverflowX = iw - TAB_OVERFLOW_MR;
44
+ const addrBarW = iw - ADDR_BAR_ML - ADDR_BAR_MR;
45
+ const profileX = iw - PROFILE_MR;
46
+ const earRX = iw - EAR_R_MR;
47
+ // Color tokens: light ↔ dark
48
+ const tabStripBg = isDark ? '#1F2020' : '#DEDEDE';
49
+ const tabBg = isDark ? '#3C3C3C' : '#FFFFFF';
50
+ const toolbarBg = isDark ? '#3C3C3C' : '#FFFFFF';
51
+ const addrBarBg = isDark ? '#282828' : '#F1F1F1';
52
+ const addrIconBg = isDark ? '#3C3C3C' : '#FFFFFF';
53
+ const borderColor = isDark ? '#454746' : '#CFCFCF';
54
+ const textColor = isDark ? '#E3E3E3' : '#1D1D1D';
55
+ const textSec = isDark ? '#C7C7C7' : '#5F6368';
56
+ const iconActive = isDark ? '#C7C7C7' : '#5F6368';
57
+ const iconDis = isDark ? '#7B7B7B' : '#BBBFC4';
58
+ // Tab favicon overlay — aligned with close X center (y=30, icon 24px → top=18)
59
+ const tabFaviconOverlay = icon
60
+ ? `<div style="position:absolute;left:152px;top:18px;width:24px;height:24px;display:flex;align-items:center;justify-content:center"><img src="${attr(icon)}" style="width:21px;height:21px;border-radius:4px;object-fit:contain" alt=""></div>`
61
+ : `<div style="position:absolute;left:152px;top:18px;width:24px;height:24px;display:flex;align-items:center;justify-content:center"><svg width="21" height="21" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="${iconActive}" stroke-width="1.2"/><ellipse cx="8" cy="8" rx="3" ry="6.5" stroke="${iconActive}" stroke-width="1.2"/><line x1="1.5" y1="8" x2="14.5" y2="8" stroke="${iconActive}" stroke-width="1.2"/></svg></div>`;
62
+ return `${SF}<div style="width:${iw}px;height:${REF_H}px;position:relative;transform:scale(${ts});transform-origin:top left;font-family:${FF};overflow:hidden">
63
+ <svg width="${iw}" height="${REF_H}" viewBox="0 0 ${iw} ${REF_H}" fill="none" xmlns="http://www.w3.org/2000/svg">
64
+ <!-- TAB STRIP -->
65
+ <g>
66
+ <rect width="${iw}" height="60" fill="${tabStripBg}"/>
67
+ <!-- Traffic lights -->
68
+ <circle cx="40.5" cy="30.75" r="9" fill="#EC6A5E"/>
69
+ <circle cx="40.5" cy="30.75" r="8.25" stroke="#1F1F1F" stroke-opacity="0.06" stroke-width="1.5"/>
70
+ <circle cx="70.5" cy="30.75" r="9" fill="#F4BF4F"/>
71
+ <circle cx="70.5" cy="30.75" r="8.25" stroke="#1F1F1F" stroke-opacity="0.06" stroke-width="1.5"/>
72
+ <circle cx="100.5" cy="30.75" r="9" fill="#61C554"/>
73
+ <circle cx="100.5" cy="30.75" r="8.25" stroke="#1F1F1F" stroke-opacity="0.06" stroke-width="1.5"/>
74
+ <!-- Left ear -->
75
+ <path d="M120 60C129.941 60 138 51.9411 138 42V60H120Z" fill="${tabBg}"/>
76
+ <!-- Active tab -->
77
+ <path d="M138 24C138 15.7157 144.716 9 153 9H471C479.284 9 486 15.7157 486 24V60H138V24Z" fill="${tabBg}"/>
78
+ <!-- Close X -->
79
+ <path d="M457.668 35.5689L456.431 34.3314L460.762 30.0001L456.431 25.6689L457.668 24.4314L461.999 28.7626L466.331 24.4314L467.568 25.6689L463.237 30.0001L467.568 34.3314L466.331 35.5689L461.999 31.2376L457.668 35.5689Z" fill="${textColor}"/>
80
+ <!-- Right ear -->
81
+ <path d="M504 60C494.059 60 486 51.9411 486 42V60H504Z" fill="${tabBg}"/>
82
+ <!-- New tab + -->
83
+ <path d="M513.327 31.1749H506.877V28.8249H513.327V22.3499H515.677V28.8249H522.152V31.1749H515.677V37.6249H513.327V31.1749Z" fill="${iconActive}"/>
84
+ <!-- Tab overflow (right-anchored) -->
85
+ <rect x="${tabOverflowX}" y="9" width="42" height="42" rx="15" fill="${tabBg}"/>
86
+ <path d="M${tabOverflowX + 21} 33.95L${tabOverflowX + 14.4} 27.35L${tabOverflowX + 16.07} 25.675L${tabOverflowX + 21} 30.625L${tabOverflowX + 25.92} 25.7L${tabOverflowX + 27.6} 27.375L${tabOverflowX + 21} 33.95Z" fill="${textColor}"/>
87
+ </g>
88
+ <!-- BOTTOM EARS -->
89
+ <path d="M16.5 60C7.3873 60 0 67.3873 0 76.5V60H16.5Z" fill="${tabStripBg}"/>
90
+ <path d="M${earRX} 60C${earRX + 9.11} 60 ${iw} 67.3873 ${iw} 76.5V60H${earRX}Z" fill="${tabStripBg}"/>
91
+ <!-- TOOLBAR -->
92
+ <g clip-path="url(#bb_clip_toolbar)">
93
+ <path d="M0 76C0 67.1634 7.16344 60 16 60H${iw - 16}C${iw - 7.16} 60 ${iw} 67.1634 ${iw} 76V129H0V76Z" fill="${toolbarBg}"/>
94
+ <!-- Back arrow -->
95
+ <path d="M28.3125 95.625L34.5938 101.906L33 103.5L24 94.5L33 85.5L34.5938 87.0938L28.3125 93.375H42V95.625H28.3125Z" fill="${iconDis}"/>
96
+ <!-- Forward arrow -->
97
+ <path d="M91.6875 95.625L85.4062 101.906L87 103.5L96 94.5L87 85.5L85.4062 87.0938L91.6875 93.375H78V95.625H91.6875Z" fill="${iconDis}"/>
98
+ <!-- Reload -->
99
+ <path d="M141 103.5C138.5 103.5 136.375 102.625 134.625 100.875C132.875 99.125 132 97 132 94.5C132 92 132.875 89.875 134.625 88.125C136.375 86.375 138.5 85.5 141 85.5C142.354 85.5 143.609 85.7812 144.766 86.3438C145.922 86.9062 146.917 87.6562 147.75 88.5938V85.5H150V93H142.5V90.75H146.594C145.99 89.8333 145.198 89.1042 144.219 88.5625C143.24 88.0208 142.167 87.75 141 87.75C139.125 87.75 137.531 88.4062 136.219 89.7188C134.906 91.0312 134.25 92.625 134.25 94.5C134.25 96.375 134.906 97.9688 136.219 99.2812C137.531 100.594 139.125 101.25 141 101.25C142.75 101.25 144.25 100.672 145.5 99.5156C146.75 98.3594 147.469 96.9375 147.656 95.25H149.969C149.781 97.5833 148.833 99.5417 147.125 101.125C145.417 102.708 143.375 103.5 141 103.5Z" fill="${iconActive}"/>
100
+ <!-- Address bar pill (dynamic width) -->
101
+ <rect x="${ADDR_BAR_ML}" y="69" width="${addrBarW}" height="51" rx="25.5" fill="${addrBarBg}"/>
102
+ <!-- Site icon circle -->
103
+ <rect x="${ADDR_BAR_ML + 7.5}" y="76.5" width="36" height="36" rx="18" fill="${addrIconBg}"/>
104
+ <!-- Control center / sliders icon (from Union.svg, scaled to 18×18 and centered in the 36×36 circle) -->
105
+ <g transform="translate(${ADDR_BAR_ML + 16.5},${76.5 + 9}) scale(1.5)">
106
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 6.70898C10.8806 6.70898 11.9998 7.82848 12 9.20898C12 10.5897 10.8807 11.709 9.5 11.709C8.11929 11.709 7 10.5897 7 9.20898C7.00024 7.82848 8.11944 6.70898 9.5 6.70898ZM9.5 8.20898C8.94786 8.20898 8.50024 8.6569 8.5 9.20898C8.5 9.76127 8.94772 10.209 9.5 10.209C10.0523 10.209 10.5 9.76127 10.5 9.20898C10.4998 8.6569 10.0521 8.20898 9.5 8.20898Z" fill="${iconActive}"/>
107
+ <path d="M6 10H0V8.5H6V10Z" fill="${iconActive}"/>
108
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 0C3.88071 0 5 1.11929 5 2.5C5 3.88071 3.88071 5 2.5 5C1.11929 5 0 3.88071 0 2.5C0 1.11929 1.11929 0 2.5 0ZM2.5 1.5C1.94772 1.5 1.5 1.94772 1.5 2.5C1.5 3.05228 1.94772 3.5 2.5 3.5C3.05228 3.5 3.5 3.05228 3.5 2.5C3.5 1.94772 3.05228 1.5 2.5 1.5Z" fill="${iconActive}"/>
109
+ <path d="M12 3.20898H6V1.70898H12V3.20898Z" fill="${iconActive}"/>
110
+ </g>
111
+ <!-- Star (right-anchored) -->
112
+ <path transform="translate(${dx},0)" d="M1994 100.344L1998 97.9688L2002.03 100.344L2000.97 95.8438L2004.44 92.875L1999.84 92.4688L1998 88.1875L1996.16 92.4688L1991.56 92.875L1995.06 95.8438L1994 100.344ZM1990.59 105L1992.56 96.6875L1986 91.0938L1994.62 90.3438L1998 82.5L2001.38 90.375L2010 91.0938L2003.44 96.6875L2005.41 105L1998 100.594L1990.59 105Z" fill="${iconActive}"/>
113
+ <!-- Profile avatar (right-anchored) -->
114
+ <rect x="${profileX}" y="79.5" width="30" height="30" rx="15" fill="url(#bb_profile_grad)"/>
115
+ <rect x="${profileX + 0.75}" y="80.25" width="28.5" height="28.5" rx="14.25" stroke="#1F1F1F" stroke-opacity="0.06" stroke-width="1.5"/>
116
+ <!-- Extensions dots (right-anchored) -->
117
+ <path transform="translate(${dx},0)" d="M2127 105.404C2126.38 105.404 2125.85 105.183 2125.41 104.743C2124.97 104.302 2124.75 103.773 2124.75 103.154C2124.75 102.535 2124.97 102.005 2125.41 101.565C2125.85 101.124 2126.38 100.904 2127 100.904C2127.62 100.904 2128.15 101.124 2128.59 101.565C2129.03 102.005 2129.25 102.535 2129.25 103.154C2129.25 103.773 2129.03 104.302 2128.59 104.743C2128.15 105.183 2127.62 105.404 2127 105.404ZM2127 96.7499C2126.38 96.7499 2125.85 96.5296 2125.41 96.089C2124.97 95.6484 2124.75 95.1187 2124.75 94.5C2124.75 93.8812 2124.97 93.3516 2125.41 92.9109C2125.85 92.4703 2126.38 92.25 2127 92.25C2127.62 92.25 2128.15 92.4703 2128.59 92.9109C2129.03 93.3516 2129.25 93.8812 2129.25 94.5C2129.25 95.1187 2129.03 95.6484 2128.59 96.089C2128.15 96.5296 2127.62 96.7499 2127 96.7499ZM2127 88.0961C2126.38 88.0961 2125.85 87.8758 2125.41 87.4351C2124.97 86.9945 2124.75 86.4649 2124.75 85.8461C2124.75 85.2274 2124.97 84.6977 2125.41 84.2571C2125.85 83.8165 2126.38 83.5962 2127 83.5962C2127.62 83.5962 2128.15 83.8165 2128.59 84.2571C2129.03 84.6977 2129.25 85.2274 2129.25 85.8461C2129.25 86.4649 2129.03 86.9945 2128.59 87.4351C2128.15 87.8758 2127.62 88.0961 2127 88.0961Z" fill="${iconActive}"/>
118
+ </g>
119
+ <!-- TOOLBAR BORDER -->
120
+ <path d="M0 60H${iw}H0M${iw} 130.5H0V127.5H${iw}V130.5ZM${iw} 127.5M0 129V60V129M0 129M${iw} 60V129V60" fill="${borderColor}" mask="url(#bb_mask_toolbar)"/>
121
+ <!-- DEFS -->
122
+ <defs>
123
+ <linearGradient id="bb_profile_grad" x1="${profileX + 15}" y1="109.5" x2="${profileX + 15}" y2="79.5" gradientUnits="userSpaceOnUse">
124
+ <stop stop-color="#D5D8E4"/><stop offset="0.45" stop-color="#D1CAD6"/><stop offset="1" stop-color="#B7BAD1"/>
125
+ </linearGradient>
126
+ <mask id="bb_mask_toolbar" fill="white">
127
+ <path d="M0 76C0 67.1634 7.16344 60 16 60H${iw - 16}C${iw - 7.16} 60 ${iw} 67.1634 ${iw} 76V129H0V76Z"/>
128
+ </mask>
129
+ <clipPath id="bb_clip_toolbar">
130
+ <path d="M0 76C0 67.1634 7.16344 60 16 60H${iw - 16}C${iw - 7.16} 60 ${iw} 67.1634 ${iw} 76V129H0V76Z"/>
131
+ </clipPath>
132
+ </defs>
133
+ </svg>
134
+ <!-- DYNAMIC OVERLAYS -->
135
+ ${tabFaviconOverlay}
136
+ <div style="position:absolute;left:187px;top:15px;width:260px;height:30px;display:flex;align-items:center;overflow:hidden;-webkit-mask-image:linear-gradient(to right,#000 85%,transparent 100%);mask-image:linear-gradient(to right,#000 85%,transparent 100%)"><span style="font-size:18px;font-weight:400;color:${textColor};white-space:nowrap;line-height:30px">${title}</span></div>
137
+ <div style="position:absolute;left:${ADDR_BAR_ML + 58}px;top:69px;right:${iw - (ADDR_BAR_ML + addrBarW - 18)}px;height:51px;display:flex;align-items:center;overflow:hidden"><span style="font-size:19.5px;font-weight:400;color:${textSec};white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:30px">${url}</span></div>
138
+ </div>`;
139
+ }
140
+ // ── Helpers ───────────────────────────────────────────────────────────────
141
+ function esc(s) {
142
+ return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
143
+ }
144
+ function attr(s) {
145
+ return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;');
146
+ }
147
+ //# sourceMappingURL=browser-bar.js.map
package/dist/browser.d.ts CHANGED
@@ -67,6 +67,22 @@ export interface BrowserVideoVerificationBundle extends BrowserVerificationBundl
67
67
  interactiveElements: InteractiveElement[];
68
68
  scrollInfo: PageState['scrollInfo'];
69
69
  }
70
+ export interface BrowserSelectorProbe {
71
+ tag: string;
72
+ role: string;
73
+ href: string | null;
74
+ label: string;
75
+ inputType: string | null;
76
+ ariaExpanded?: string | null;
77
+ ariaControls?: string | null;
78
+ ariaHasPopup?: string | null;
79
+ }
80
+ export interface BrowserStorageHintWriteParams {
81
+ storageName: 'localStorage' | 'sessionStorage';
82
+ key: string;
83
+ candidate: string;
84
+ kind: 'locale' | 'theme';
85
+ }
70
86
  export declare function describeObservationChange(before: BrowserObservation, after: BrowserObservation): BrowserReaction;
71
87
  export declare class Browser {
72
88
  private options;
@@ -101,6 +117,8 @@ export declare class Browser {
101
117
  */
102
118
  closeContext(): Promise<void>;
103
119
  launch(): Promise<void>;
120
+ recreateContext(options?: Partial<Pick<BrowserOptions, 'viewport' | 'deviceScaleFactor' | 'lang' | 'colorScheme' | 'storageState'>>): Promise<void>;
121
+ setDeviceScaleFactor(deviceScaleFactor: number): Promise<void>;
104
122
  addCookies(cookies: Array<{
105
123
  name: string;
106
124
  value: string;
@@ -140,6 +158,12 @@ export declare class Browser {
140
158
  getPageStateLite(): Promise<PageStateLite>;
141
159
  exportStorageState(): Promise<BrowserStorageState>;
142
160
  exportSessionStorage(): Promise<BrowserSessionStorageState>;
161
+ reloadCurrentPage(options?: {
162
+ waitUntil?: 'load' | 'domcontentloaded' | 'networkidle' | 'commit';
163
+ timeout?: number;
164
+ }): Promise<void>;
165
+ writeStorageHintCandidate(params: BrowserStorageHintWriteParams): Promise<boolean>;
166
+ probeSelector(selector: string): Promise<BrowserSelectorProbe | null>;
143
167
  prepareSessionStorage(bundle: BrowserSessionStorageState | undefined, options?: {
144
168
  replace?: boolean;
145
169
  }): Promise<void>;
@@ -275,5 +299,6 @@ export declare class Browser {
275
299
  clearRouteInterception(): Promise<void>;
276
300
  private ensurePage;
277
301
  private ensureContext;
302
+ private buildContextOptions;
278
303
  }
279
304
  export {};