next-ai-editor 0.2.2 → 0.2.3

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.
@@ -1134,26 +1134,40 @@ async function resolveSourceLocation(source) {
1134
1134
  const EditorContext = react.createContext(null);
1135
1135
  function AIEditorProvider({
1136
1136
  children,
1137
- theme = "dark"
1137
+ theme = "dark",
1138
+ enabled
1138
1139
  }) {
1140
+ const [serverEnabled, setServerEnabled] = react.useState(null);
1141
+ react.useEffect(() => {
1142
+ if (enabled !== void 0) return;
1143
+ fetch("/api/ai-editor/config").then((res) => res.json()).then((data) => {
1144
+ setServerEnabled(data.enabled === true);
1145
+ }).catch(() => {
1146
+ setServerEnabled(false);
1147
+ });
1148
+ }, [enabled]);
1149
+ const isEditorEnabled = enabled ?? serverEnabled;
1139
1150
  const [isEnabled, setEnabled] = react.useState(false);
1140
1151
  const [isHistoryOpen, setHistoryOpen] = react.useState(false);
1141
1152
  const [taskHistory, setTaskHistory] = react.useState([]);
1142
1153
  const [isChatExpanded, setChatExpanded] = react.useState(false);
1143
1154
  const [activeTool, setActiveTool] = react.useState(null);
1144
1155
  const [attachedContext, setAttachedContext] = react.useState(null);
1145
- react.useCallback((taskUpdate) => {
1146
- setTaskHistory((prev) => {
1147
- const existing = prev.find((t) => t.id === taskUpdate.id);
1148
- if (existing) {
1149
- return prev.map(
1150
- (t) => t.id === taskUpdate.id ? { ...t, ...taskUpdate } : t
1151
- );
1152
- } else {
1153
- return [...prev, taskUpdate];
1154
- }
1155
- });
1156
- }, []);
1156
+ react.useCallback(
1157
+ (taskUpdate) => {
1158
+ setTaskHistory((prev) => {
1159
+ const existing = prev.find((t) => t.id === taskUpdate.id);
1160
+ if (existing) {
1161
+ return prev.map(
1162
+ (t) => t.id === taskUpdate.id ? { ...t, ...taskUpdate } : t
1163
+ );
1164
+ } else {
1165
+ return [...prev, taskUpdate];
1166
+ }
1167
+ });
1168
+ },
1169
+ []
1170
+ );
1157
1171
  const handleChatToggle = react.useCallback(() => {
1158
1172
  setChatExpanded((prev) => !prev);
1159
1173
  }, []);
@@ -1185,7 +1199,7 @@ function AIEditorProvider({
1185
1199
  window.addEventListener("keydown", handleKey);
1186
1200
  return () => window.removeEventListener("keydown", handleKey);
1187
1201
  }, [isHistoryOpen]);
1188
- if (process.env.NODE_ENV !== "development") {
1202
+ if (!isEditorEnabled) {
1189
1203
  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
1190
1204
  }
1191
1205
  return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1215,28 +1229,34 @@ function AIEditorProvider({
1215
1229
  }
1216
1230
  }
1217
1231
  ),
1218
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `editor-container ai-editor-ui ${isChatExpanded ? "expanded" : "collapsed"} ${theme}`, children: [
1219
- /* @__PURE__ */ jsxRuntime.jsx(
1220
- ChatPanel,
1221
- {
1222
- isExpanded: isChatExpanded,
1223
- onToggle: handleChatToggle,
1224
- activeTool,
1225
- onToolChange: handleToolChange,
1226
- attachedContext,
1227
- onClearContext: handleClearContext,
1228
- theme
1229
- }
1230
- ),
1231
- /* @__PURE__ */ jsxRuntime.jsx(
1232
- ControlPill,
1233
- {
1234
- isExpanded: isChatExpanded,
1235
- onToggle: handleChatToggle,
1236
- activeTool
1237
- }
1238
- )
1239
- ] }),
1232
+ /* @__PURE__ */ jsxRuntime.jsxs(
1233
+ "div",
1234
+ {
1235
+ className: `editor-container ai-editor-ui ${isChatExpanded ? "expanded" : "collapsed"} ${theme}`,
1236
+ children: [
1237
+ /* @__PURE__ */ jsxRuntime.jsx(
1238
+ ChatPanel,
1239
+ {
1240
+ isExpanded: isChatExpanded,
1241
+ onToggle: handleChatToggle,
1242
+ activeTool,
1243
+ onToolChange: handleToolChange,
1244
+ attachedContext,
1245
+ onClearContext: handleClearContext,
1246
+ theme
1247
+ }
1248
+ ),
1249
+ /* @__PURE__ */ jsxRuntime.jsx(
1250
+ ControlPill,
1251
+ {
1252
+ isExpanded: isChatExpanded,
1253
+ onToggle: handleChatToggle,
1254
+ activeTool
1255
+ }
1256
+ )
1257
+ ]
1258
+ }
1259
+ ),
1240
1260
  /* @__PURE__ */ jsxRuntime.jsx(
1241
1261
  TaskHistoryPanel,
1242
1262
  {
@@ -1251,7 +1271,9 @@ function AIEditorProvider({
1251
1271
  }
1252
1272
  function EditorOverlay({ theme, onComponentSelect }) {
1253
1273
  var _a;
1254
- const [hoveredSource, setHoveredSource] = react.useState(null);
1274
+ const [hoveredSource, setHoveredSource] = react.useState(
1275
+ null
1276
+ );
1255
1277
  const [hoveredElement, setHoveredElement] = react.useState(null);
1256
1278
  const [hoveredRect, setHoveredRect] = react.useState(null);
1257
1279
  const [mousePos, setMousePos] = react.useState({ x: 0, y: 0 });
@@ -1259,7 +1281,10 @@ function EditorOverlay({ theme, onComponentSelect }) {
1259
1281
  const lastHoverStateRef = react.useRef(null);
1260
1282
  react.useEffect(() => {
1261
1283
  if (hoveredSource && hoveredElement) {
1262
- lastHoverStateRef.current = { source: hoveredSource, element: hoveredElement };
1284
+ lastHoverStateRef.current = {
1285
+ source: hoveredSource,
1286
+ element: hoveredElement
1287
+ };
1263
1288
  }
1264
1289
  }, [hoveredSource, hoveredElement]);
1265
1290
  const isDark = theme === "dark";
@@ -1334,123 +1359,130 @@ function EditorOverlay({ theme, onComponentSelect }) {
1334
1359
  cancelAnimationFrame(raf);
1335
1360
  };
1336
1361
  }, [onComponentSelect]);
1337
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ai-editor-ui", style: { fontFamily: "system-ui, sans-serif" }, children: [
1338
- hoveredRect && /* @__PURE__ */ jsxRuntime.jsx(
1339
- "div",
1340
- {
1341
- style: {
1342
- position: "fixed",
1343
- left: hoveredRect.left - 2,
1344
- top: hoveredRect.top - 2,
1345
- width: hoveredRect.width + 4,
1346
- height: hoveredRect.height + 4,
1347
- border: `2px solid ${c.accent}`,
1348
- borderRadius: 6,
1349
- background: `${c.accent}15`,
1350
- pointerEvents: "none",
1351
- zIndex: 99998
1352
- }
1353
- }
1354
- ),
1355
- hoveredSource && !isResolvingSource && /* @__PURE__ */ jsxRuntime.jsxs(
1356
- "div",
1357
- {
1358
- style: {
1359
- position: "fixed",
1360
- left: Math.min(mousePos.x + 14, window.innerWidth - 340),
1361
- top: mousePos.y + 14,
1362
- background: c.bg,
1363
- color: c.text,
1364
- border: `1px solid ${c.border}`,
1365
- borderRadius: 10,
1366
- padding: "12px 16px",
1367
- fontSize: 12,
1368
- fontFamily: "ui-monospace, monospace",
1369
- zIndex: 99999,
1370
- boxShadow: `0 8px 30px rgba(0,0,0,${isDark ? 0.5 : 0.15})`,
1371
- maxWidth: 320,
1372
- pointerEvents: "none"
1373
- },
1374
- children: [
1375
- /* @__PURE__ */ jsxRuntime.jsxs(
1376
- "div",
1377
- {
1378
- style: {
1379
- fontWeight: 700,
1380
- color: c.accent,
1381
- marginBottom: 4,
1382
- fontSize: 14
1383
- },
1384
- children: [
1385
- "<",
1386
- hoveredSource.componentName,
1387
- " />"
1388
- ]
1389
- }
1390
- ),
1391
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { color: c.muted, fontSize: 11 }, children: [
1392
- hoveredSource.filePath,
1393
- ":",
1394
- hoveredSource.lineNumber
1395
- ] }),
1396
- ((_a = hoveredSource.elementContext) == null ? void 0 : _a.textContent) && /* @__PURE__ */ jsxRuntime.jsxs(
1397
- "div",
1398
- {
1399
- style: {
1400
- color: c.muted,
1401
- fontSize: 10,
1402
- marginTop: 4,
1403
- fontStyle: "italic"
1404
- },
1405
- children: [
1406
- '"',
1407
- hoveredSource.elementContext.textContent,
1408
- '"'
1409
- ]
1410
- }
1411
- )
1412
- ]
1413
- }
1414
- ),
1415
- /* @__PURE__ */ jsxRuntime.jsxs(
1416
- "div",
1417
- {
1418
- style: {
1419
- position: "fixed",
1420
- bottom: 20,
1421
- right: 20,
1422
- background: c.bg,
1423
- color: c.success,
1424
- padding: "10px 16px",
1425
- borderRadius: 20,
1426
- fontSize: 13,
1427
- fontWeight: 600,
1428
- zIndex: 99997,
1429
- display: "flex",
1430
- alignItems: "center",
1431
- gap: 8,
1432
- border: `1px solid ${c.border}`,
1433
- boxShadow: `0 4px 20px rgba(0,0,0,${isDark ? 0.4 : 0.1})`
1434
- },
1435
- children: [
1436
- /* @__PURE__ */ jsxRuntime.jsx(
1437
- "span",
1438
- {
1439
- style: {
1440
- width: 8,
1441
- height: 8,
1442
- borderRadius: "50%",
1443
- background: c.success
1444
- }
1362
+ return /* @__PURE__ */ jsxRuntime.jsxs(
1363
+ "div",
1364
+ {
1365
+ className: "ai-editor-ui",
1366
+ style: { fontFamily: "system-ui, sans-serif" },
1367
+ children: [
1368
+ hoveredRect && /* @__PURE__ */ jsxRuntime.jsx(
1369
+ "div",
1370
+ {
1371
+ style: {
1372
+ position: "fixed",
1373
+ left: hoveredRect.left - 2,
1374
+ top: hoveredRect.top - 2,
1375
+ width: hoveredRect.width + 4,
1376
+ height: hoveredRect.height + 4,
1377
+ border: `2px solid ${c.accent}`,
1378
+ borderRadius: 6,
1379
+ background: `${c.accent}15`,
1380
+ pointerEvents: "none",
1381
+ zIndex: 99998
1445
1382
  }
1446
- ),
1447
- "Select Component"
1448
- ]
1449
- }
1450
- )
1451
- ] });
1383
+ }
1384
+ ),
1385
+ hoveredSource && !isResolvingSource && /* @__PURE__ */ jsxRuntime.jsxs(
1386
+ "div",
1387
+ {
1388
+ style: {
1389
+ position: "fixed",
1390
+ left: Math.min(mousePos.x + 14, window.innerWidth - 340),
1391
+ top: mousePos.y + 14,
1392
+ background: c.bg,
1393
+ color: c.text,
1394
+ border: `1px solid ${c.border}`,
1395
+ borderRadius: 10,
1396
+ padding: "12px 16px",
1397
+ fontSize: 12,
1398
+ fontFamily: "ui-monospace, monospace",
1399
+ zIndex: 99999,
1400
+ boxShadow: `0 8px 30px rgba(0,0,0,${isDark ? 0.5 : 0.15})`,
1401
+ maxWidth: 320,
1402
+ pointerEvents: "none"
1403
+ },
1404
+ children: [
1405
+ /* @__PURE__ */ jsxRuntime.jsxs(
1406
+ "div",
1407
+ {
1408
+ style: {
1409
+ fontWeight: 700,
1410
+ color: c.accent,
1411
+ marginBottom: 4,
1412
+ fontSize: 14
1413
+ },
1414
+ children: [
1415
+ "<",
1416
+ hoveredSource.componentName,
1417
+ " />"
1418
+ ]
1419
+ }
1420
+ ),
1421
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { color: c.muted, fontSize: 11 }, children: [
1422
+ hoveredSource.filePath,
1423
+ ":",
1424
+ hoveredSource.lineNumber
1425
+ ] }),
1426
+ ((_a = hoveredSource.elementContext) == null ? void 0 : _a.textContent) && /* @__PURE__ */ jsxRuntime.jsxs(
1427
+ "div",
1428
+ {
1429
+ style: {
1430
+ color: c.muted,
1431
+ fontSize: 10,
1432
+ marginTop: 4,
1433
+ fontStyle: "italic"
1434
+ },
1435
+ children: [
1436
+ '"',
1437
+ hoveredSource.elementContext.textContent,
1438
+ '"'
1439
+ ]
1440
+ }
1441
+ )
1442
+ ]
1443
+ }
1444
+ ),
1445
+ /* @__PURE__ */ jsxRuntime.jsxs(
1446
+ "div",
1447
+ {
1448
+ style: {
1449
+ position: "fixed",
1450
+ bottom: 20,
1451
+ right: 20,
1452
+ background: c.bg,
1453
+ color: c.success,
1454
+ padding: "10px 16px",
1455
+ borderRadius: 20,
1456
+ fontSize: 13,
1457
+ fontWeight: 600,
1458
+ zIndex: 99997,
1459
+ display: "flex",
1460
+ alignItems: "center",
1461
+ gap: 8,
1462
+ border: `1px solid ${c.border}`,
1463
+ boxShadow: `0 4px 20px rgba(0,0,0,${isDark ? 0.4 : 0.1})`
1464
+ },
1465
+ children: [
1466
+ /* @__PURE__ */ jsxRuntime.jsx(
1467
+ "span",
1468
+ {
1469
+ style: {
1470
+ width: 8,
1471
+ height: 8,
1472
+ borderRadius: "50%",
1473
+ background: c.success
1474
+ }
1475
+ }
1476
+ ),
1477
+ "Select Component"
1478
+ ]
1479
+ }
1480
+ )
1481
+ ]
1482
+ }
1483
+ );
1452
1484
  }
1453
1485
  exports.AIEditorProvider = AIEditorProvider;
1454
1486
  exports.ChatPanel = ChatPanel;
1455
1487
  exports.ControlPill = ControlPill;
1456
- //# sourceMappingURL=AIEditorProvider-IjMydA1Y.cjs.map
1488
+ //# sourceMappingURL=AIEditorProvider-CLgf1Vwa.cjs.map