1/**
2 * Framework-neutral Impeccable live chrome contract.
3 *
4 * The production browser bundle is intentionally plain DOM so Svelte, React,
5 * Vue, and static adapters can all mount the same chrome. This module is the
6 * testable contract/inventory for that bundle; live-browser.js mirrors these
7 * values at runtime because it is served as a standalone script.
8 */
9 
10export const LIVE_CHROME_MOUNT_CONTRACT = Object.freeze([
11  'root',
12  'transport',
13  'state',
14  'actions',
15]);
16 
17export const LIVE_UI_SURFACES = Object.freeze([
18  {
19    key: 'global-bottom-bar',
20    ids: [
21      'impeccable-live-global-bar',
22      'impeccable-live-global-bar-brand',
23      'impeccable-live-pick-toggle',
24      'impeccable-live-insert-toggle',
25      'impeccable-live-detect-toggle',
26      'impeccable-live-detect-badge',
27      'impeccable-live-design-toggle',
28      'impeccable-live-page-chat',
29      'impeccable-live-page-chat-input',
30      'impeccable-live-page-chat-voice',
31    ],
32    states: ['rest', 'hover', 'focus-visible', 'pressed', 'active', 'tooltip'],
33  },
34  {
35    key: 'pending-copy-edit-dock',
36    ids: ['impeccable-live-pending-dock'],
37    states: ['closed', 'open', 'hover', 'pressed', 'loading', 'rollback', 'keep-fixing'],
38  },
39  {
40    key: 'element-selection-chrome',
41    ids: [
42      'impeccable-live-highlight',
43      'impeccable-live-tooltip',
44      'impeccable-live-bar',
45      'impeccable-live-selection-pill',
46      'impeccable-live-input',
47      'impeccable-live-configure-voice',
48      'impeccable-live-configure-bar-tooltip',
49    ],
50    states: ['rest', 'hover', 'focus-visible', 'pressed', 'disabled'],
51  },
52  {
53    key: 'action-picker',
54    ids: ['impeccable-live-picker'],
55    states: ['closed', 'open', 'option-hover', 'option-focus'],
56  },
57  {
58    key: 'edit-chrome',
59    ids: ['impeccable-live-edit-badge'],
60    states: ['enabled', 'disabled', 'editing', 'cancel', 'save', 'edited-content'],
61  },
62  {
63    key: 'generating-row',
64    ids: ['impeccable-live-bar', 'impeccable-live-shader'],
65    states: ['action-label', 'animated-dots', 'generating', 'done'],
66  },
67  {
68    key: 'variant-cycling-row',
69    ids: ['impeccable-live-bar', 'impeccable-live-params-panel'],
70    states: ['variant-1', 'variant-2', 'variant-3', 'left-disabled', 'right-disabled', 'dot-click', 'accept', 'discard'],
71  },
72  {
73    key: 'variant-params-panel',
74    ids: ['impeccable-live-params-panel'],
75    states: ['closed', 'open-above', 'open-below', 'range', 'steps', 'toggle'],
76  },
77  {
78    key: 'saving-confirmed-rows',
79    ids: ['impeccable-live-bar'],
80    states: ['saving', 'applying-variant', 'confirmed'],
81  },
82  {
83    key: 'insert-mode-chrome',
84    ids: [
85      'impeccable-live-insert-line',
86      'impeccable-live-insert-placeholder',
87      'impeccable-live-placeholder-resize',
88      'impeccable-live-insert-input',
89      'impeccable-live-insert-voice',
90      'impeccable-live-insert-create',
91      'impeccable-live-insert-create-tooltip',
92    ],
93    states: ['toggle-active', 'line', 'placeholder', 'resize', 'enabled', 'disabled', 'tooltip'],
94  },
95  {
96    key: 'annotation-chrome',
97    ids: [
98      'impeccable-live-annot',
99      'impeccable-live-annot-svg',
100      'impeccable-live-annot-pins',
101      'impeccable-live-annot-clear',
102    ],
103    states: ['overlay', 'drawing', 'pin', 'pin-edit', 'clear'],
104  },
105  {
106    key: 'design-system-panel',
107    ids: ['impeccable-live-design-host'],
108    states: ['closed', 'open', 'tabs', 'token-tiles', 'copy'],
109  },
110  {
111    key: 'toasts-and-errors',
112    ids: ['impeccable-live-toast'],
113    states: ['normal', 'error', 'no-variants-mounted'],
114  },
115  {
116    key: 'css-isolation-boundary',
117    ids: ['impeccable-live-root'],
118    states: ['shadow-root', 'style-tags', 'hostile-css'],
119  },
120]);
121 
122export const LIVE_UI_COMPONENT_IDS = Object.freeze([
123  ...new Set(LIVE_UI_SURFACES.flatMap((surface) => surface.ids)),
124]);
125 
126export function resolveLiveUiRoot(env = globalThis) {
127  const doc = env?.document;
128  const explicit = env?.__IMPECCABLE_LIVE_UI_ROOT__
129    || env?.window?.__IMPECCABLE_LIVE_UI_ROOT__;
130  if (explicit && typeof explicit.appendChild === 'function') return explicit;
131  return doc?.body || null;
132}
133 
134export function getLiveUiElementById(id, env = globalThis) {
135  const doc = env?.document;
136  const root = resolveLiveUiRoot(env);
137  if (!id) return null;
138  if (root?.getElementById) {
139    const found = root.getElementById(id);
140    if (found) return found;
141  }
142  if (root?.querySelector) {
143    const found = root.querySelector('#' + escapeCssIdent(id));
144    if (found) return found;
145  }
146  return doc?.getElementById?.(id) || null;
147}
148 
149export function appendToLiveUiRoot(el, env = globalThis) {
150  const root = resolveLiveUiRoot(env);
151  if (!root) throw new Error('Impeccable live UI root is not available');
152  root.appendChild(el);
153  return el;
154}
155 
156export function appendStyleToLiveUiRoot(styleEl, env = globalThis) {
157  const doc = env?.document;
158  const root = resolveLiveUiRoot(env);
159  if (root && root !== doc?.body) {
160    root.appendChild(styleEl);
161  } else {
162    (doc?.head || doc?.body || root).appendChild(styleEl);
163  }
164  return styleEl;
165}
166 
167export function activeElementDeep(doc = globalThis.document) {
168  let active = doc?.activeElement || null;
169  while (active?.shadowRoot?.activeElement) {
170    active = active.shadowRoot.activeElement;
171  }
172  return active;
173}
174 
175function escapeCssIdent(value) {
176  if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') {
177    return CSS.escape(String(value));
178  }
179  return String(value).replace(/([ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~])/g, '\\$1');
180}
181