@keak/sdk 1.0.9 → 2.0.1

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 (17) hide show
  1. package/README.md +102 -7
  2. package/dist/Conversion.d.ts.map +1 -1
  3. package/dist/index.cjs.js +199 -187
  4. package/dist/index.cjs.js.map +1 -1
  5. package/dist/index.d.ts +55 -22
  6. package/dist/index.d.ts.map +1 -1
  7. package/dist/index.js +201 -187
  8. package/dist/index.js.map +1 -1
  9. package/dist/toolbar/KeakToolbar.d.ts.map +1 -1
  10. package/dist/toolbar.js +41 -0
  11. package/dist/toolbar.js.map +1 -1
  12. package/package.json +2 -1
  13. package/src/cli/ai-helper.js +117 -39
  14. package/src/cli/install.js +251 -152
  15. package/src/plugins/babel-source-inject.cjs +55 -131
  16. package/src/plugins/next.cjs +48 -221
  17. package/src/plugins/webpack-loader-babel/index.js +43 -117
package/README.md CHANGED
@@ -23,7 +23,7 @@ npx keak-setup
23
23
  The installer will:
24
24
  - Detect your React framework (Next.js, CRA, Vite, etc.)
25
25
  - Find your main entry file (`src/index.tsx`, `app/layout.tsx`, etc.)
26
- - Add the `KeakProvider` wrapper automatically
26
+ - Add the `useKeak()` hook automatically
27
27
  - Create a backup of your original file
28
28
  - Automatically configure source mapping (enables precise element-to-code mapping)
29
29
 
@@ -31,20 +31,115 @@ The installer will:
31
31
 
32
32
  If you're using Next.js 15, you'll need additional configuration to enable source mapping. See the [Next.js 15 Setup Guide](./NEXTJS_15_SETUP.md) for detailed instructions.
33
33
 
34
+ ## Framework-Specific Setup
35
+
36
+ ### Next.js App Router
37
+
38
+ Add the `useKeak()` hook to your root layout:
39
+
40
+ ```tsx
41
+ // app/layout.tsx
42
+ 'use client';
43
+
44
+ import { useKeak, KeakToolbar } from '@keak/sdk';
45
+
46
+ export default function RootLayout({ children }) {
47
+ useKeak({ debug: true });
48
+
49
+ return (
50
+ <html lang="en">
51
+ <body>
52
+ {children}
53
+ <KeakToolbar position="bottom-right" />
54
+ </body>
55
+ </html>
56
+ );
57
+ }
58
+ ```
59
+
60
+ ### Next.js Pages Router
61
+
62
+ Add the `useKeak()` hook to your `_app.tsx`:
63
+
64
+ ```tsx
65
+ // pages/_app.tsx
66
+ import { useKeak, KeakToolbar } from '@keak/sdk';
67
+ import type { AppProps } from 'next/app';
68
+
69
+ export default function App({ Component, pageProps }: AppProps) {
70
+ useKeak({ debug: true });
71
+
72
+ return (
73
+ <>
74
+ <Component {...pageProps} />
75
+ <KeakToolbar position="bottom-right" />
76
+ </>
77
+ );
78
+ }
79
+ ```
80
+
81
+ ### Create React App (CRA)
82
+
83
+ Add the `useKeak()` hook to your main App component:
84
+
85
+ ```tsx
86
+ // src/App.tsx
87
+ import { useKeak, KeakToolbar } from '@keak/sdk';
88
+
89
+ function App() {
90
+ useKeak({ debug: true });
91
+
92
+ return (
93
+ <div className="App">
94
+ {/* Your app content */}
95
+ <KeakToolbar position="bottom-right" />
96
+ </div>
97
+ );
98
+ }
99
+
100
+ export default App;
101
+ ```
102
+
103
+ ### Vite
104
+
105
+ Add the `useKeak()` hook to your main App component:
106
+
107
+ ```tsx
108
+ // src/App.tsx
109
+ import { useKeak, KeakToolbar } from '@keak/sdk';
110
+
111
+ function App() {
112
+ useKeak({ debug: true });
113
+
114
+ return (
115
+ <>
116
+ <div className="app">
117
+ {/* Your app content */}
118
+ </div>
119
+ <KeakToolbar position="bottom-right" />
120
+ </>
121
+ );
122
+ }
123
+
124
+ export default App;
125
+ ```
126
+
34
127
  ## Basic Usage
35
128
 
36
- ### Setup KeakProvider
129
+ ### Simple Setup
37
130
 
38
- The auto-setup will add `KeakProvider` to your app. If you need to configure it manually:
131
+ The `useKeak()` hook initializes the SDK with minimal configuration. No API key required!
39
132
 
40
133
  ```tsx
41
- import { KeakProvider } from '@keak/sdk';
134
+ import { useKeak } from '@keak/sdk';
42
135
 
43
136
  function App() {
137
+ useKeak({ debug: true });
138
+
44
139
  return (
45
- <KeakProvider config={{ apiKey: 'your-api-key' }}>
140
+ <div>
46
141
  {/* Your app components */}
47
- </KeakProvider>
142
+ </div>
48
143
  );
49
144
  }
50
145
  ```
@@ -120,7 +215,7 @@ keak-sdk/
120
215
 
121
216
  1. **Module not found errors**: Ensure the SDK is properly installed and the auto-setup has completed
122
217
  2. **TypeScript errors**: Ensure your project has compatible TypeScript and React versions (React >=16.8.0)
123
- 3. **KeakProvider not found**: Run `npx keak-setup` to ensure the provider is properly added to your entry file
218
+ 3. **useKeak hook not working**: Run `npx keak-setup` to ensure the hook is properly added to your entry file
124
219
 
125
220
  ### Next.js 15 Issues
126
221
 
package/dist/Conversion.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Conversion.d.ts","sourceRoot":"","sources":["../src/Conversion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAGjD,UAAU,eAAe;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;IAC/G,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA0JhD,CAAC"}
1
+ {"version":3,"file":"Conversion.d.ts","sourceRoot":"","sources":["../src/Conversion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAGjD,UAAU,eAAe;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;IAC/G,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA6JhD,CAAC"}