fixdog 0.0.1 → 0.0.2

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 (93) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +80 -433
  3. package/dist/api/client.d.ts +74 -0
  4. package/dist/components/ConversationalInputReact.d.ts +26 -0
  5. package/dist/components/ElementInfoDisplayReact.d.ts +9 -0
  6. package/dist/components/FixdogSidebarReact.d.ts +29 -0
  7. package/dist/fiber.d.ts +9 -0
  8. package/dist/index.cjs.js +33 -0
  9. package/dist/index.cjs.js.map +1 -0
  10. package/dist/index.d.ts +6 -158
  11. package/dist/index.esm.js +29 -0
  12. package/dist/index.esm.js.map +1 -0
  13. package/dist/inspector-B4F5CBT7.cjs.js +1159 -0
  14. package/dist/inspector-B4F5CBT7.cjs.js.map +1 -0
  15. package/dist/inspector-BL2pNjn-.cjs.js +1173 -0
  16. package/dist/inspector-BL2pNjn-.cjs.js.map +1 -0
  17. package/dist/inspector-Bg6uSvk0.esm.js +1273 -0
  18. package/dist/inspector-Bg6uSvk0.esm.js.map +1 -0
  19. package/dist/inspector-BuOffbVc.cjs.js +1280 -0
  20. package/dist/inspector-BuOffbVc.cjs.js.map +1 -0
  21. package/dist/inspector-CNgFkZOU.esm.js +1185 -0
  22. package/dist/inspector-CNgFkZOU.esm.js.map +1 -0
  23. package/dist/inspector-CPF1N9dL.esm.js +1185 -0
  24. package/dist/inspector-CPF1N9dL.esm.js.map +1 -0
  25. package/dist/inspector-CPGK5Lg7.esm.js +1155 -0
  26. package/dist/inspector-CPGK5Lg7.esm.js.map +1 -0
  27. package/dist/inspector-CWcTSREy.cjs.js +1174 -0
  28. package/dist/inspector-CWcTSREy.cjs.js.map +1 -0
  29. package/dist/inspector-Cn_bl9Io.cjs.js +1189 -0
  30. package/dist/inspector-Cn_bl9Io.cjs.js.map +1 -0
  31. package/dist/inspector-D9DuXirp.cjs.js +1189 -0
  32. package/dist/inspector-D9DuXirp.cjs.js.map +1 -0
  33. package/dist/inspector-DQEtAjyM.esm.js +1129 -0
  34. package/dist/inspector-DQEtAjyM.esm.js.map +1 -0
  35. package/dist/inspector-DVlU9p44.cjs.js +1189 -0
  36. package/dist/inspector-DVlU9p44.cjs.js.map +1 -0
  37. package/dist/inspector-DaRVppX9.cjs.js +1134 -0
  38. package/dist/inspector-DaRVppX9.cjs.js.map +1 -0
  39. package/dist/inspector-huqtI2MD.esm.js +1170 -0
  40. package/dist/inspector-huqtI2MD.esm.js.map +1 -0
  41. package/dist/inspector-spoCY1tf.esm.js +1169 -0
  42. package/dist/inspector-spoCY1tf.esm.js.map +1 -0
  43. package/dist/inspector-tY1kJK5_.esm.js +1185 -0
  44. package/dist/inspector-tY1kJK5_.esm.js.map +1 -0
  45. package/dist/inspector.d.ts +43 -0
  46. package/dist/keyboard.d.ts +10 -0
  47. package/dist/overlay.d.ts +31 -0
  48. package/dist/react/InspectorProvider.d.ts +6 -0
  49. package/dist/react/index.cjs.js +32 -0
  50. package/dist/react/index.cjs.js.map +1 -0
  51. package/dist/react/index.esm.js +30 -0
  52. package/dist/react/index.esm.js.map +1 -0
  53. package/dist/sidebar/SidebarRuntime.d.ts +8 -0
  54. package/dist/sidebar-runtime.esm.js +2122 -0
  55. package/dist/sidebar-runtime.esm.js.map +1 -0
  56. package/dist/sidebar-runtime.iife.js +2991 -0
  57. package/dist/styles/sidebarStyles.d.ts +2 -0
  58. package/dist/styles.d.ts +8 -0
  59. package/dist/types/sidebar.d.ts +62 -0
  60. package/dist/types.d.ts +47 -0
  61. package/dist/utils/cookies.d.ts +10 -0
  62. package/dist/utils/devMode.d.ts +17 -0
  63. package/dist/utils/sessionStorage.d.ts +19 -0
  64. package/package.json +57 -40
  65. package/USAGE.md +0 -77
  66. package/dist/client/index.d.mts +0 -110
  67. package/dist/client/index.d.ts +0 -110
  68. package/dist/client/index.js +0 -1601
  69. package/dist/client/index.mjs +0 -1582
  70. package/dist/client/init.d.mts +0 -67
  71. package/dist/client/init.d.ts +0 -67
  72. package/dist/client/init.js +0 -1609
  73. package/dist/client/init.mjs +0 -1593
  74. package/dist/index.d.mts +0 -158
  75. package/dist/index.js +0 -1635
  76. package/dist/index.mjs +0 -1606
  77. package/src/api/client.ts +0 -141
  78. package/src/client/index.ts +0 -75
  79. package/src/client/init.tsx +0 -78
  80. package/src/components/ConversationalInputReact.tsx +0 -406
  81. package/src/components/ElementInfoDisplayReact.tsx +0 -84
  82. package/src/components/UiDogSidebarReact.tsx +0 -49
  83. package/src/element-detector.ts +0 -186
  84. package/src/index.ts +0 -228
  85. package/src/instrument.ts +0 -171
  86. package/src/sidebar-initializer.ts +0 -171
  87. package/src/source-resolver.ts +0 -121
  88. package/src/styles/sidebarStyles.ts +0 -597
  89. package/src/types/css.d.ts +0 -9
  90. package/src/types/sidebar.ts +0 -56
  91. package/src/types.ts +0 -119
  92. package/tsconfig.json +0 -23
  93. package/tsup.config.ts +0 -40
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025 fixdog
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,478 +1,125 @@
1
- # uidog-sdk-next
1
+ # fixdog-sdk
2
2
 
3
- Next.js integration for UiDog using [Bippy](https://github.com/aidenybai/bippy) - element source detection for React apps.
3
+ > Option+Click any React component to instantly see its source location.
4
4
 
5
- This package provides **Alt+click element inspection** for Next.js applications, allowing you to click on any element in your app and see its source location (file, line, column) in a sidebar UI.
5
+ [![fixdog](https://img.shields.io/badge/fixdog-inspector-61dafb?logo=react&labelColor=20232a)](#)
6
+ _GIF demo placeholder goes here_
6
7
 
7
- ## Features
8
+ ## Quick start (3 steps)
8
9
 
9
- - **Alt+click** any element to inspect its source location
10
- - **Hover highlighting** when Alt is pressed
11
- - **Sidebar UI** for viewing element info and making edit requests
12
- - Supports **VS Code, Cursor, WebStorm, Atom, Sublime** editors
13
- - Works with **Next.js 14+** (App Router and Pages Router)
14
- - **Zero build configuration** - just import and use
15
-
16
- ## Requirements
17
-
18
- - Next.js 14.0.0 or higher
19
- - React 17.0.0 or higher
20
- - Development mode only (`_debugSource` is stripped in production)
10
+ 1. `npm install fixdog-sdk`
11
+ 2. In your app entry, import and init:
12
+ ```ts
13
+ import { init } from "fixdog-sdk";
14
+ init();
15
+ ```
16
+ 3. Option/Alt + click a component in the browser to log its source.
21
17
 
22
18
  ## Installation
23
19
 
24
- ```bash
25
- npm install uidog-sdk-next
26
- # or
27
- yarn add uidog-sdk-next
28
- # or
29
- pnpm add uidog-sdk-next
30
- ```
31
-
32
- ## Quick Start
33
-
34
- ### Step 1: Create the instrumentation file
35
-
36
- Bippy must load **before React** to properly hook into React's internals. The setup differs based on your Next.js version.
37
-
38
- #### Next.js 15.3+ (Recommended)
39
-
40
- Create `instrumentation-client.ts` in your project root (same level as `package.json`):
41
-
42
- ```typescript
43
- // instrumentation-client.ts
44
- import "uidog-sdk-next/client";
45
- ```
46
-
47
- That's it! The package will auto-initialize with default settings.
48
-
49
- #### Next.js 14.x - 15.2
50
-
51
- For older Next.js versions, add the import at the very top of your `_app.tsx` or root layout:
52
-
53
- **Pages Router (`pages/_app.tsx`):**
54
-
55
- ```typescript
56
- // pages/_app.tsx
57
- import "uidog-sdk-next/client"; // MUST be the first import!
58
-
59
- import type { AppProps } from "next/app";
60
-
61
- export default function App({ Component, pageProps }: AppProps) {
62
- return <Component {...pageProps} />;
63
- }
64
- ```
65
-
66
- **App Router (`app/layout.tsx`):**
67
-
68
- ```typescript
69
- // app/layout.tsx
70
- import "uidog-sdk-next/client"; // MUST be the first import!
71
-
72
- export default function RootLayout({
73
- children,
74
- }: {
75
- children: React.ReactNode;
76
- }) {
77
- return (
78
- <html lang="en">
79
- <body>{children}</body>
80
- </html>
81
- );
82
- }
83
- ```
84
-
85
- ### Step 2: Start your development server
86
-
87
- ```bash
88
- npm run dev
89
- ```
90
-
91
- ### Step 3: Use it!
92
-
93
- 1. Hold **Alt** (Option on Mac) and hover over elements - you'll see a blue highlight
94
- 2. **Alt+click** on any element to open the sidebar
95
- 3. The sidebar shows the element's source location (file, line, column)
96
- 4. Type a message describing changes you want to make
97
-
98
- ## Configuration
99
-
100
- ### Using UiDogProvider (Optional)
101
-
102
- For more control over configuration, wrap your app with `UiDogProvider`:
103
-
104
- ```tsx
105
- // app/layout.tsx (App Router)
106
- import "uidog-sdk-next/client"; // Still need this first!
107
- import { UiDogProvider } from "uidog-sdk-next/init";
108
-
109
- export default function RootLayout({
110
- children,
111
- }: {
112
- children: React.ReactNode;
113
- }) {
114
- return (
115
- <html lang="en">
116
- <body>
117
- <UiDogProvider
118
- editor="cursor" // Editor to open: 'vscode' | 'cursor' | 'webstorm' | 'atom' | 'sublime'
119
- modifier="alt" // Key modifier: 'alt' | 'ctrl' | 'meta' | 'shift'
120
- enableSidebar={true} // Show sidebar UI (set to false for console-only mode)
121
- apiEndpoint="https://api.ui.dog" // API endpoint for edit requests
122
- >
123
- {children}
124
- </UiDogProvider>
125
- </body>
126
- </html>
127
- );
128
- }
129
- ```
130
-
131
- ### Configuration Options
132
-
133
- | Option | Type | Default | Description |
134
- | --------------- | --------- | ---------------------- | --------------------------------------------------------------------------------------------------------- |
135
- | `editor` | `string` | `'cursor'` | Editor to open. Options: `'vscode'`, `'vscode-insiders'`, `'cursor'`, `'webstorm'`, `'atom'`, `'sublime'` |
136
- | `modifier` | `string` | `'alt'` | Key to hold for element selection. Options: `'alt'`, `'ctrl'`, `'meta'`, `'shift'` |
137
- | `enableSidebar` | `boolean` | `true` | Show the sidebar UI. If `false`, logs to console instead |
138
- | `apiEndpoint` | `string` | `'https://api.ui.dog'` | API endpoint for edit session requests |
139
- | `projectPath` | `string` | `''` | Project root path for resolving relative file paths |
140
-
141
- ### Programmatic Configuration
142
-
143
- You can also configure before auto-initialization:
144
-
145
- ```typescript
146
- // instrumentation-client.ts
147
- import { configureUiDogNext } from "uidog-sdk-next/client";
20
+ - **Next.js / Vite / CRA**: `npm install fixdog-sdk` (or `yarn add`, `pnpm add`)
21
+ - Works in React 16.8+ through React 19. No runtime deps.
148
22
 
149
- configureUiDogNext({
150
- editor: "vscode",
151
- modifier: "alt",
152
- enableSidebar: true,
153
- });
154
- ```
155
-
156
- ### Manual Initialization
23
+ ## Usage
157
24
 
158
- If you need full control, disable auto-init and initialize manually:
159
-
160
- ```typescript
161
- // instrumentation-client.ts
162
- import { disableAutoInit } from "uidog-sdk-next/client";
163
- disableAutoInit();
25
+ ```ts
26
+ import { init, Inspector } from "fixdog-sdk";
164
27
 
165
- // Later, in your app code:
166
- import { initializeUiDogNext } from "uidog-sdk-next";
28
+ // simple
29
+ init();
167
30
 
168
- initializeUiDogNext({
169
- editor: "cursor",
170
- enableSidebar: true,
31
+ // with options
32
+ init({
33
+ borderColor: "#ff6b6b",
34
+ onClick: (info) => console.log("clicked", info),
171
35
  });
172
- ```
173
-
174
- ## Complete Example: Next.js 15 App Router
175
-
176
- ### Project Structure
177
-
178
- ```
179
- my-next-app/
180
- ├── instrumentation-client.ts # UiDog initialization
181
- ├── app/
182
- │ ├── layout.tsx # Root layout with UiDogProvider
183
- │ ├── page.tsx # Home page
184
- │ └── components/
185
- │ └── Button.tsx # Example component
186
- ├── package.json
187
- └── next.config.js
188
- ```
189
-
190
- ### Step-by-Step Setup
191
-
192
- **1. Install the package:**
193
-
194
- ```bash
195
- npm install uidog-sdk-next
196
- ```
197
-
198
- **2. Create `instrumentation-client.ts` in project root:**
199
-
200
- ```typescript
201
- // instrumentation-client.ts
202
- import "uidog-sdk-next/client";
203
- ```
204
-
205
- **3. Update `app/layout.tsx`:**
206
-
207
- ```tsx
208
- // app/layout.tsx
209
- import { UiDogProvider } from "uidog-sdk-next/init";
210
- import "./globals.css";
211
-
212
- export const metadata = {
213
- title: "My App",
214
- };
215
-
216
- export default function RootLayout({
217
- children,
218
- }: {
219
- children: React.ReactNode;
220
- }) {
221
- return (
222
- <html lang="en">
223
- <body>
224
- <UiDogProvider editor="cursor">{children}</UiDogProvider>
225
- </body>
226
- </html>
227
- );
228
- }
229
- ```
230
-
231
- **4. Create a component to test (`app/components/Button.tsx`):**
232
-
233
- ```tsx
234
- // app/components/Button.tsx
235
- "use client";
236
-
237
- interface ButtonProps {
238
- children: React.ReactNode;
239
- onClick?: () => void;
240
- }
241
-
242
- export function Button({ children, onClick }: ButtonProps) {
243
- return (
244
- <button
245
- onClick={onClick}
246
- className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
247
- >
248
- {children}
249
- </button>
250
- );
251
- }
252
- ```
253
-
254
- **5. Use the component (`app/page.tsx`):**
255
-
256
- ```tsx
257
- // app/page.tsx
258
- import { Button } from "./components/Button";
259
-
260
- export default function Home() {
261
- return (
262
- <main className="p-8">
263
- <h1 className="text-2xl font-bold mb-4">My App</h1>
264
- <Button>Click me</Button>
265
- </main>
266
- );
267
- }
268
- ```
269
-
270
- **6. Start the dev server:**
271
-
272
- ```bash
273
- npm run dev
274
- ```
275
-
276
- **7. Test it:**
277
-
278
- - Open http://localhost:3000
279
- - Hold **Alt** and hover over the button - you'll see a blue highlight
280
- - **Alt+click** on the button
281
- - The sidebar opens showing `Button.tsx` with line and column numbers
282
-
283
- ## Complete Example: Next.js 14 Pages Router
284
-
285
- ### Project Structure
286
-
287
- ```
288
- my-next-app/
289
- ├── pages/
290
- │ ├── _app.tsx # App wrapper with UiDog
291
- │ ├── index.tsx # Home page
292
- │ └── components/
293
- │ └── Card.tsx # Example component
294
- ├── package.json
295
- └── next.config.js
296
- ```
297
-
298
- ### Step-by-Step Setup
299
36
 
300
- **1. Install the package:**
301
-
302
- ```bash
303
- npm install uidog-sdk-next
304
- ```
305
-
306
- **2. Update `pages/_app.tsx`:**
307
-
308
- ```tsx
309
- // pages/_app.tsx
310
- import "uidog-sdk-next/client"; // MUST be first!
311
-
312
- import type { AppProps } from "next/app";
313
- import { UiDogProvider } from "uidog-sdk-next/init";
314
- import "../styles/globals.css";
315
-
316
- export default function App({ Component, pageProps }: AppProps) {
317
- return (
318
- <UiDogProvider editor="vscode">
319
- <Component {...pageProps} />
320
- </UiDogProvider>
321
- );
322
- }
37
+ // manual control
38
+ const inspector = new Inspector({ enabled: true });
39
+ inspector.activate();
40
+ inspector.deactivate();
41
+ inspector.destroy();
323
42
  ```
324
43
 
325
- **3. Create a component (`pages/components/Card.tsx`):**
44
+ ### React provider (optional)
326
45
 
327
46
  ```tsx
328
- // pages/components/Card.tsx
329
- interface CardProps {
330
- title: string;
331
- description: string;
332
- }
47
+ import { InspectorProvider } from "fixdog-sdk/react";
333
48
 
334
- export function Card({ title, description }: CardProps) {
49
+ export function App() {
335
50
  return (
336
- <div className="border rounded-lg p-4 shadow-sm">
337
- <h2 className="text-xl font-semibold">{title}</h2>
338
- <p className="text-gray-600 mt-2">{description}</p>
339
- </div>
51
+ <InspectorProvider options={{}}>
52
+ <YourApp />
53
+ </InspectorProvider>
340
54
  );
341
55
  }
342
56
  ```
343
57
 
344
- **4. Use the component (`pages/index.tsx`):**
345
-
346
- ```tsx
347
- // pages/index.tsx
348
- import { Card } from "./components/Card";
349
-
350
- export default function Home() {
351
- return (
352
- <div className="p-8">
353
- <h1 className="text-2xl font-bold mb-4">My App</h1>
354
- <Card
355
- title="Welcome"
356
- description="Alt+click on this card to see its source location!"
357
- />
358
- </div>
359
- );
360
- }
361
- ```
58
+ ## Options
362
59
 
363
- **5. Start and test:**
60
+ | option | type | default | description |
61
+ | ----------------- | ----------------------------- | -------------- | ---------------------------------------- |
62
+ | `onClick` | `(info) => void` | `undefined` | Called on click with source info |
63
+ | `onHover` | `(info \| null) => void` | `undefined` | Called when hover target changes |
64
+ | `shortcut` | `string` | `ctrl+shift+x` | Toggle persistent inspect mode |
65
+ | `useOptionClick` | `boolean` | `true` | Enable Option/Alt + click activation |
66
+ | `enabled` | `boolean` | `!production` | Auto-disabled in prod unless forced true |
67
+ | `zIndex` | `number` | `999999` | Overlay/tooltip stacking |
68
+ | `borderColor` | `string` | `#61dafb` | Highlight + tooltip border color |
69
+ | `tooltipPosition` | `'auto' \| 'top' \| 'bottom'` | `auto` | Tooltip placement preference |
364
70
 
365
- ```bash
366
- npm run dev
367
- ```
71
+ ## API
368
72
 
369
- ## Vite (React) quick start
73
+ - `init(options?)` `Inspector` singleton (auto-activates)
74
+ - `new Inspector(options?)` → manual instance
75
+ - `.activate()` enable listeners and overlay
76
+ - `.deactivate()` remove listeners and hide overlay
77
+ - `.destroy()` cleanup overlay
78
+ - `InspectorProvider` React wrapper (optional)
370
79
 
371
- - Development only. Import before React mounts so Bippy can hook DevTools.
372
- - Add at the very top of your entry (e.g., `src/main.tsx`):
80
+ ### SourceInfo
373
81
 
374
82
  ```ts
375
- if (import.meta.env.DEV) {
376
- import("uidog-sdk-next/client");
83
+ interface SourceInfo {
84
+ componentName: string;
85
+ fileName: string;
86
+ lineNumber: number;
87
+ columnNumber: number;
88
+ fiber?: any; // raw React fiber
89
+ element?: Element; // DOM element
377
90
  }
378
91
  ```
379
92
 
380
- - Start Vite with `npm run dev` and use Alt+click. For library DOM (or anything without `_debugSource`), you'll see the DOM snapshot fallback instead of source mapping.
381
-
382
- ## API Reference
383
-
384
- ### Main Exports (`uidog-sdk-next`)
385
-
386
- ```typescript
387
- import {
388
- initializeUiDogNext, // Initialize UiDog manually
389
- cleanupUiDogNext, // Cleanup all listeners and UI
390
- isUiDogNextInitialized, // Check if initialized
391
- openSidebar, // Programmatically open sidebar
392
- closeSidebar, // Programmatically close sidebar
393
- buildEditorUrl, // Build editor URL from source location
394
- } from "uidog-sdk-next";
395
- ```
396
-
397
- ### Client Exports (`uidog-sdk-next/client`)
398
-
399
- ```typescript
400
- import {
401
- configureUiDogNext, // Configure options before auto-init
402
- disableAutoInit, // Disable auto-initialization
403
- initializeUiDogNext, // Manual initialization
404
- } from "uidog-sdk-next/client";
405
- ```
406
-
407
- ### Provider Export (`uidog-sdk-next/init`)
93
+ ## How it works
408
94
 
409
- ```typescript
410
- import { UiDogProvider } from "uidog-sdk-next/init";
411
- ```
95
+ - Grabs the nearest React fiber on Option/Alt click (or persistent mode).
96
+ - Walks up the fiber tree to `_debugSource` for `fileName:line:column`.
97
+ - Shows an overlay + tooltip; logs formatted message and passes full info to callbacks.
412
98
 
413
99
  ## Troubleshooting
414
100
 
415
- ### "Could not find source for element"
416
-
417
- This can happen when:
418
-
419
- 1. **Production mode**: Source info (`_debugSource`) is stripped in production builds. Make sure you're running in development mode (`npm run dev`).
420
-
421
- 2. **Server Components**: React Server Components render on the server and don't have fibers on the client. Only client components can be inspected.
422
-
423
- 3. **Library components**: Components from `node_modules` are filtered out. You can only inspect your own source code.
424
-
425
- When source isn't available (e.g., server-rendered DOM), the sidebar will show a **DOM snapshot** instead: trimmed `outerHTML`, text content, attributes, and bounding box. This gives you “something to grab,” but still no file/line info without a client boundary.
426
-
427
- ### Sidebar doesn't appear
428
-
429
- 1. Make sure you imported `'uidog-sdk-next/client'` **before** any React imports
430
- 2. Check the browser console for `[UiDog Next] Initialized` message
431
- 3. Verify you're holding the correct modifier key (Alt by default)
432
-
433
- ### Element highlighting doesn't work
101
+ - **Source not available**: Ensure dev/build has `_debugSource` (development or React Refresh). Production builds often strip it.
102
+ - **Next.js / RSC**: Server Components don’t have client-side fibers; ensure the inspected component is a client component.
103
+ - **Plain HTML element**: No React fiber → nothing to log.
104
+ - **Iframes / shadow DOM**: Inspector stays within the current document; shadow hosts are walked, but cross-iframe is skipped.
434
105
 
435
- 1. Check that `enableSidebar` is `true` (default)
436
- 2. Try a different modifier key: `modifier="ctrl"` or `modifier="meta"`
437
- 3. Some browser extensions may intercept Alt+click - try disabling them
106
+ ## Testing locally
438
107
 
439
- ### Import order issues
108
+ 1. `npm install`
109
+ 2. `npm link`
110
+ 3. Create a test app (e.g., `npm create vite@latest test-app -- --template react-ts`)
111
+ 4. In that app: `npm link fixdog-sdk`
112
+ 5. Import and run `init()` in `main.tsx`, then Option/Alt+click in the browser.
440
113
 
441
- The import **must** be first:
114
+ ## Build
442
115
 
443
- ```typescript
444
- // CORRECT
445
- import "uidog-sdk-next/client";
446
- import { useState } from "react";
116
+ - `npm run build` (Rollup → ESM + CJS + types)
117
+ - `npm run dev` (watch)
447
118
 
448
- // WRONG - React loads before bippy can hook in
449
- import { useState } from "react";
450
- import "uidog-sdk-next/client";
451
- ```
452
-
453
- ## How It Works
454
-
455
- 1. **Bippy hooks into React**: When you import `'uidog-sdk-next/client'`, Bippy installs a hook at `window.__REACT_DEVTOOLS_GLOBAL_HOOK__` before React loads.
456
-
457
- 2. **React reports fiber info**: As React renders, it reports fiber tree data to the hook, including `_debugSource` metadata.
458
-
459
- 3. **Alt+click detection**: When you Alt+click an element, we find its React fiber and extract the source location.
119
+ ## Contributing
460
120
 
461
- 4. **Sidebar UI**: The sidebar displays the source info and allows you to describe changes you want to make.
462
-
463
- ## Limitations
464
-
465
- - **Development only**: `_debugSource` is stripped in production React builds
466
- - **Client components only**: Server Components don't have client-side fibers
467
- - **React 17-19**: Bippy supports these React versions
468
- - **Next.js 14+**: Older versions may work but are not tested
121
+ PRs welcome. Please keep the bundle lean and TypeScript strict.
469
122
 
470
123
  ## License
471
124
 
472
- MIT
473
-
474
- ## Related
475
-
476
- - [uidog-sdk](https://github.com/your-org/uidog-sdk) - Original SDK for Vite/Webpack apps
477
- - [Bippy](https://github.com/aidenybai/bippy) - React fiber inspection toolkit
478
- - [LocatorJS](https://github.com/nicepkg/locatorjs) - Alternative approach using Babel transforms
125
+ MIT © fixdog
@@ -0,0 +1,74 @@
1
+ export interface EditRequest {
2
+ editorUrl: string;
3
+ userInput: string;
4
+ }
5
+ export interface EditResponse {
6
+ sessionId: string;
7
+ message: string;
8
+ status: "success" | "error";
9
+ error?: string;
10
+ }
11
+ export interface ChatRequest {
12
+ prompt: string;
13
+ projectId: string;
14
+ secret: string;
15
+ modelId: string;
16
+ sessionId?: string;
17
+ }
18
+ export interface ChatResponse {
19
+ ok: boolean;
20
+ message: string;
21
+ sessionId?: string;
22
+ error?: string;
23
+ code?: string;
24
+ }
25
+ export interface SendToDevRequest {
26
+ projectId: string;
27
+ secret: string;
28
+ sessionId: string;
29
+ }
30
+ export interface SendToDevResponse {
31
+ ok: boolean;
32
+ prUrl?: string;
33
+ prNumber?: number;
34
+ branchName?: string;
35
+ error?: string;
36
+ }
37
+ export interface SessionRequest {
38
+ projectId: string;
39
+ secret: string;
40
+ }
41
+ export interface SessionInfo {
42
+ id: string;
43
+ createdAt: string;
44
+ lastActivity?: string;
45
+ }
46
+ export interface GetSessionResponse {
47
+ ok: boolean;
48
+ session: SessionInfo | null;
49
+ error?: string;
50
+ }
51
+ export interface CreateSessionResponse {
52
+ ok: boolean;
53
+ session?: SessionInfo;
54
+ error?: string;
55
+ }
56
+ export interface DeleteSessionResponse {
57
+ ok: boolean;
58
+ error?: string;
59
+ }
60
+ export declare function createEditSession(request: EditRequest, apiEndpoint?: string): Promise<EditResponse>;
61
+ export declare function sendChatPrompt(request: ChatRequest, apiEndpoint?: string): Promise<ChatResponse>;
62
+ export declare function sendToDeveloper(request: SendToDevRequest, apiEndpoint?: string): Promise<SendToDevResponse>;
63
+ /**
64
+ * Get current active session for a project
65
+ */
66
+ export declare function getSession(request: SessionRequest, apiEndpoint?: string): Promise<GetSessionResponse>;
67
+ /**
68
+ * Create a new session (disposes existing sessions and resets repo)
69
+ */
70
+ export declare function createSession(request: SessionRequest, apiEndpoint?: string): Promise<CreateSessionResponse>;
71
+ /**
72
+ * Delete/dispose current session and reset repo
73
+ */
74
+ export declare function deleteSession(request: SessionRequest, apiEndpoint?: string): Promise<DeleteSessionResponse>;
@@ -0,0 +1,26 @@
1
+ import { SelectedComponent } from "../types/sidebar";
2
+ interface ConversationalInputProps {
3
+ selectedComponents: SelectedComponent[];
4
+ apiEndpoint: string;
5
+ projectId: string;
6
+ modelId: string;
7
+ sessionId?: string;
8
+ onSessionUpdated?: (sessionId: string | undefined) => void;
9
+ onPrRecorded?: (pr: {
10
+ prUrl: string;
11
+ branchName?: string;
12
+ savedAt: number;
13
+ } | null) => void;
14
+ onSendToDevConfirm?: () => Promise<boolean> | boolean;
15
+ onStartNewSession?: () => void;
16
+ lastPr?: {
17
+ prUrl: string;
18
+ branchName?: string;
19
+ savedAt: number;
20
+ } | null;
21
+ insertChipId: number | null;
22
+ onChipInserted: () => void;
23
+ onChipDeleted?: (componentId: number) => void;
24
+ }
25
+ export declare function ConversationalInputReact(props: ConversationalInputProps): import("react/jsx-runtime").JSX.Element;
26
+ export {};
@@ -0,0 +1,9 @@
1
+ import { SelectedComponent } from "../types/sidebar";
2
+ interface ElementInfoDisplayProps {
3
+ selectedComponents: SelectedComponent[];
4
+ onClose: () => void;
5
+ onRemoveComponent: (componentId: number) => void;
6
+ onInsertChip: (componentId: number) => void;
7
+ }
8
+ export declare function ElementInfoDisplayReact(props: ElementInfoDisplayProps): import("react/jsx-runtime").JSX.Element;
9
+ export {};