@aiderdesk/aiderdesk 0.66.0 → 0.68.0

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 (57) hide show
  1. package/out/renderer/assets/{arc-BXuUWHai.js → arc-Cju-fnUJ.js} +1 -1
  2. package/out/renderer/assets/{architectureDiagram-3BPJPVTR-Bm9oFTP_.js → architectureDiagram-3BPJPVTR-hVK8LPcC.js} +3 -3
  3. package/out/renderer/assets/{blockDiagram-GPEHLZMM-DQ2DevZl.js → blockDiagram-GPEHLZMM-B04Ulwbh.js} +4 -4
  4. package/out/renderer/assets/{c4Diagram-AAUBKEIU-BdR46VbA.js → c4Diagram-AAUBKEIU-DSP8EUB6.js} +2 -2
  5. package/out/renderer/assets/{channel-DUdp1NJ7.js → channel-CM1Bn7Zy.js} +1 -1
  6. package/out/renderer/assets/{chunk-2J33WTMH-Dzi-idRV.js → chunk-2J33WTMH-Bd_3pGvb.js} +1 -1
  7. package/out/renderer/assets/{chunk-4BX2VUAB-DEyFpixF.js → chunk-4BX2VUAB-Csrpxz3N.js} +1 -1
  8. package/out/renderer/assets/{chunk-55IACEB6-DyyQMIZa.js → chunk-55IACEB6-BB7RTMZZ.js} +1 -1
  9. package/out/renderer/assets/{chunk-727SXJPM-vXEiesCP.js → chunk-727SXJPM-D6Y9H3aA.js} +5 -5
  10. package/out/renderer/assets/{chunk-AQP2D5EJ-B0SWmbrS.js → chunk-AQP2D5EJ-D5f9Zgag.js} +3 -3
  11. package/out/renderer/assets/{chunk-FMBD7UC4-CoPwvBCa.js → chunk-FMBD7UC4-Bstyl64g.js} +1 -1
  12. package/out/renderer/assets/{chunk-ND2GUHAM-ku5t5SwP.js → chunk-ND2GUHAM-CVaUW2HV.js} +1 -1
  13. package/out/renderer/assets/{chunk-QZHKN3VN-DBGBAqit.js → chunk-QZHKN3VN-AMfy7Nbn.js} +1 -1
  14. package/out/renderer/assets/{classDiagram-4FO5ZUOK-DTyjsHX9.js → classDiagram-4FO5ZUOK-CPmL8t3E.js} +6 -6
  15. package/out/renderer/assets/{classDiagram-v2-Q7XG4LA2-DTyjsHX9.js → classDiagram-v2-Q7XG4LA2-CPmL8t3E.js} +6 -6
  16. package/out/renderer/assets/{cose-bilkent-S5V4N54A-wGfE9wIx.js → cose-bilkent-S5V4N54A-px_eCLil.js} +1 -1
  17. package/out/renderer/assets/{dagre-BM42HDAG-cwyj1-l0.js → dagre-BM42HDAG-c63xhfuM.js} +3 -3
  18. package/out/renderer/assets/{diagram-2AECGRRQ-BYvCxkOs.js → diagram-2AECGRRQ-DISIyKng.js} +3 -3
  19. package/out/renderer/assets/{diagram-5GNKFQAL--ZlqvgmY.js → diagram-5GNKFQAL-BSkGLBgD.js} +4 -4
  20. package/out/renderer/assets/{diagram-KO2AKTUF-CoPNrPhx.js → diagram-KO2AKTUF-xiSl-Lui.js} +3 -3
  21. package/out/renderer/assets/{diagram-LMA3HP47-wjhxYTWf.js → diagram-LMA3HP47-lJ69G8gJ.js} +3 -3
  22. package/out/renderer/assets/{diagram-OG6HWLK6-DhYpewbd.js → diagram-OG6HWLK6-AoDpX3QT.js} +4 -4
  23. package/out/renderer/assets/{erDiagram-TEJ5UH35-DolRLBng.js → erDiagram-TEJ5UH35-O7UNRkDw.js} +4 -4
  24. package/out/renderer/assets/{flowDiagram-I6XJVG4X-DjAbl_XC.js → flowDiagram-I6XJVG4X-Dd9XTtIY.js} +6 -6
  25. package/out/renderer/assets/{ganttDiagram-6RSMTGT7-AF7-XgtX.js → ganttDiagram-6RSMTGT7-Bc7FUk0Y.js} +1 -1
  26. package/out/renderer/assets/{gitGraphDiagram-PVQCEYII-BMZLakzH.js → gitGraphDiagram-PVQCEYII-DwEksAhs.js} +4 -4
  27. package/out/renderer/assets/{graph-B_ifajWk.js → graph-BPvbzKl1.js} +1 -1
  28. package/out/renderer/assets/{index-3bI-dJm8.js → index-BmQl7j8n.js} +3399 -2428
  29. package/out/renderer/assets/{index-B62bIfbt.css → index-z-BItG-u.css} +36 -16
  30. package/out/renderer/assets/{infoDiagram-5YYISTIA-0f7Qxxvp.js → infoDiagram-5YYISTIA-DvophXOV.js} +2 -2
  31. package/out/renderer/assets/{ishikawaDiagram-YF4QCWOH-BX_EIAMn.js → ishikawaDiagram-YF4QCWOH-CDT4EDOF.js} +1 -1
  32. package/out/renderer/assets/{journeyDiagram-JHISSGLW-Dmitv8wD.js → journeyDiagram-JHISSGLW-B5FCPOti.js} +4 -4
  33. package/out/renderer/assets/jsx-dev-runtime-DuBp-Rhq.js +49 -0
  34. package/out/renderer/assets/{kanban-definition-UN3LZRKU-By2GFUNB.js → kanban-definition-UN3LZRKU-CM_TQl4S.js} +2 -2
  35. package/out/renderer/assets/{layout-DAkKffy1.js → layout-DdBKGefG.js} +2 -2
  36. package/out/renderer/assets/{mindmap-definition-RKZ34NQL-yIrV1m0y.js → mindmap-definition-RKZ34NQL-BeGrpK-H.js} +3 -3
  37. package/out/renderer/assets/{pieDiagram-4H26LBE5-PV9y5rw_.js → pieDiagram-4H26LBE5-CnMhRK3I.js} +4 -4
  38. package/out/renderer/assets/{quadrantDiagram-W4KKPZXB-DeX0zTCp.js → quadrantDiagram-W4KKPZXB-O_Q_JI2s.js} +1 -1
  39. package/out/renderer/assets/{requirementDiagram-4Y6WPE33-Bzfk_KE-.js → requirementDiagram-4Y6WPE33-vf9wLf04.js} +3 -3
  40. package/out/renderer/assets/{sankeyDiagram-5OEKKPKP-BuCv8QIY.js → sankeyDiagram-5OEKKPKP-CE4n-uB4.js} +1 -1
  41. package/out/renderer/assets/{sequenceDiagram-3UESZ5HK-Zg7Ukud8.js → sequenceDiagram-3UESZ5HK-DebEZhql.js} +3 -3
  42. package/out/renderer/assets/{stateDiagram-AJRCARHV-CLaqfYR8.js → stateDiagram-AJRCARHV-DCsVosBt.js} +6 -6
  43. package/out/renderer/assets/{stateDiagram-v2-BHNVJYJU-Cmm1ljQ4.js → stateDiagram-v2-BHNVJYJU-8oguEvt8.js} +4 -4
  44. package/out/renderer/assets/{timeline-definition-PNZ67QCA-DQBaAVcC.js → timeline-definition-PNZ67QCA-CSfXVnNf.js} +2 -2
  45. package/out/renderer/assets/{vennDiagram-CIIHVFJN-CuplbU_R.js → vennDiagram-CIIHVFJN-DxOEVeC4.js} +1 -1
  46. package/out/renderer/assets/{wardley-L42UT6IY-BiqfHMim.js → wardley-L42UT6IY-Cz6T4MDn.js} +1 -1
  47. package/out/renderer/assets/{wardleyDiagram-YWT4CUSO-BaV0FnUu.js → wardleyDiagram-YWT4CUSO-B4sA3LOJ.js} +3 -3
  48. package/out/renderer/assets/{xychartDiagram-2RQKCTM6-DA_Miw-n.js → xychartDiagram-2RQKCTM6-DbJjruqS.js} +1 -1
  49. package/out/renderer/index.html +2 -2
  50. package/out/resources/prompts/workflow.hbs +2 -2
  51. package/out/resources/skills/extension-creator/SKILL.md +24 -0
  52. package/out/resources/skills/extension-creator/references/examples-gallery.md +11 -0
  53. package/out/resources/skills/extension-creator/references/extension-interface.md +4 -0
  54. package/out/resources/skills/extension-creator/references/external-libraries.md +159 -0
  55. package/out/resources/skills/extension-creator/references/ui-components.md +24 -0
  56. package/out/runner.js +860 -205
  57. package/package.json +16 -3
@@ -2689,6 +2689,10 @@ html {
2689
2689
  height: 20px;
2690
2690
  }
2691
2691
 
2692
+ .h-\[26px\] {
2693
+ height: 26px;
2694
+ }
2695
+
2692
2696
  .h-\[28px\] {
2693
2697
  height: 28px;
2694
2698
  }
@@ -2817,10 +2821,6 @@ html {
2817
2821
  min-height: 240px;
2818
2822
  }
2819
2823
 
2820
- .min-h-\[26px\] {
2821
- min-height: 26px;
2822
- }
2823
-
2824
2824
  .min-h-\[40px\] {
2825
2825
  min-height: 40px;
2826
2826
  }
@@ -3224,6 +3224,10 @@ html {
3224
3224
  cursor: grab;
3225
3225
  }
3226
3226
 
3227
+ .cursor-help {
3228
+ cursor: help;
3229
+ }
3230
+
3227
3231
  .cursor-not-allowed {
3228
3232
  cursor: not-allowed;
3229
3233
  }
@@ -3655,6 +3659,16 @@ html {
3655
3659
  border-bottom-left-radius: 0px;
3656
3660
  }
3657
3661
 
3662
+ .rounded-l-md {
3663
+ border-top-left-radius: 0.375rem;
3664
+ border-bottom-left-radius: 0.375rem;
3665
+ }
3666
+
3667
+ .rounded-r-md {
3668
+ border-top-right-radius: 0.375rem;
3669
+ border-bottom-right-radius: 0.375rem;
3670
+ }
3671
+
3658
3672
  .rounded-t-lg {
3659
3673
  border-top-left-radius: 0.5rem;
3660
3674
  border-top-right-radius: 0.5rem;
@@ -5270,10 +5284,6 @@ html {
5270
5284
  color: var(--color-text-secondary);
5271
5285
  }
5272
5286
 
5273
- .group:hover .group-hover\:text-text-tertiary {
5274
- color: var(--color-text-tertiary);
5275
- }
5276
-
5277
5287
  .group:hover .group-hover\:opacity-100 {
5278
5288
  opacity: 1;
5279
5289
  }
@@ -8960,6 +8970,10 @@ body.theme-light .context-dimmed {
8960
8970
  height: 20px;
8961
8971
  }
8962
8972
 
8973
+ .h-\[26px\] {
8974
+ height: 26px;
8975
+ }
8976
+
8963
8977
  .h-\[28px\] {
8964
8978
  height: 28px;
8965
8979
  }
@@ -9088,10 +9102,6 @@ body.theme-light .context-dimmed {
9088
9102
  min-height: 240px;
9089
9103
  }
9090
9104
 
9091
- .min-h-\[26px\] {
9092
- min-height: 26px;
9093
- }
9094
-
9095
9105
  .min-h-\[40px\] {
9096
9106
  min-height: 40px;
9097
9107
  }
@@ -9495,6 +9505,10 @@ body.theme-light .context-dimmed {
9495
9505
  cursor: grab;
9496
9506
  }
9497
9507
 
9508
+ .cursor-help {
9509
+ cursor: help;
9510
+ }
9511
+
9498
9512
  .cursor-not-allowed {
9499
9513
  cursor: not-allowed;
9500
9514
  }
@@ -9926,6 +9940,16 @@ body.theme-light .context-dimmed {
9926
9940
  border-bottom-left-radius: 0px;
9927
9941
  }
9928
9942
 
9943
+ .rounded-l-md {
9944
+ border-top-left-radius: 0.375rem;
9945
+ border-bottom-left-radius: 0.375rem;
9946
+ }
9947
+
9948
+ .rounded-r-md {
9949
+ border-top-right-radius: 0.375rem;
9950
+ border-bottom-right-radius: 0.375rem;
9951
+ }
9952
+
9929
9953
  .rounded-t-lg {
9930
9954
  border-top-left-radius: 0.5rem;
9931
9955
  border-top-right-radius: 0.5rem;
@@ -11450,10 +11474,6 @@ body.theme-light .context-dimmed {
11450
11474
  color: var(--color-text-secondary);
11451
11475
  }
11452
11476
 
11453
- .group:hover .group-hover\:text-text-tertiary {
11454
- color: var(--color-text-tertiary);
11455
- }
11456
-
11457
11477
  .group:hover .group-hover\:opacity-100 {
11458
11478
  opacity: 1;
11459
11479
  }
@@ -1,5 +1,5 @@
1
- import { _ as __name, l as log, I as selectSvgElement, e as configureSvgSize } from "./index-3bI-dJm8.js";
2
- import { p as parse } from "./wardley-L42UT6IY-BiqfHMim.js";
1
+ import { _ as __name, l as log, I as selectSvgElement, e as configureSvgSize } from "./index-BmQl7j8n.js";
2
+ import { p as parse } from "./wardley-L42UT6IY-Cz6T4MDn.js";
3
3
  var parser = {
4
4
  parse: /* @__PURE__ */ __name(async (input) => {
5
5
  const ast = await parse("info", input);
@@ -1,4 +1,4 @@
1
- import { _ as __name, c as getConfig2, R as parseFontSize, I as selectSvgElement, aq as at, z as clear, k as common_default, p as setDiagramTitle, a as getAccTitle, b as setAccTitle, g as getAccDescription, s as setAccDescription, q as getDiagramTitle, e as configureSvgSize } from "./index-3bI-dJm8.js";
1
+ import { _ as __name, c as getConfig2, R as parseFontSize, I as selectSvgElement, aq as at, z as clear, k as common_default, p as setDiagramTitle, a as getAccTitle, b as setAccTitle, g as getAccDescription, s as setAccDescription, q as getDiagramTitle, e as configureSvgSize } from "./index-BmQl7j8n.js";
2
2
  var parser = (function() {
3
3
  var o = /* @__PURE__ */ __name(function(k, v, o2, l) {
4
4
  for (o2 = o2 || {}, l = k.length; l--; o2[k[l]] = v) ;
@@ -1,7 +1,7 @@
1
- import { g as getIconStyles } from "./chunk-FMBD7UC4-CoPwvBCa.js";
2
- import { a as drawBackgroundRect, g as getNoteRect, h as drawText, d as drawRect } from "./chunk-ND2GUHAM-ku5t5SwP.js";
3
- import { g as getAccDescription, s as setAccDescription, a as getAccTitle, b as setAccTitle, q as getDiagramTitle, p as setDiagramTitle, _ as __name, c as getConfig2, d as select, e as configureSvgSize, z as clear } from "./index-3bI-dJm8.js";
4
- import { d as d3arc } from "./arc-BXuUWHai.js";
1
+ import { g as getIconStyles } from "./chunk-FMBD7UC4-Bstyl64g.js";
2
+ import { a as drawBackgroundRect, g as getNoteRect, h as drawText, d as drawRect } from "./chunk-ND2GUHAM-CVaUW2HV.js";
3
+ import { g as getAccDescription, s as setAccDescription, a as getAccTitle, b as setAccTitle, q as getDiagramTitle, p as setDiagramTitle, _ as __name, c as getConfig2, d as select, e as configureSvgSize, z as clear } from "./index-BmQl7j8n.js";
4
+ import { d as d3arc } from "./arc-Cju-fnUJ.js";
5
5
  var parser = (function() {
6
6
  var o = /* @__PURE__ */ __name(function(k, v, o2, l) {
7
7
  for (o2 = o2 || {}, l = k.length; l--; o2[k[l]] = v) ;
@@ -0,0 +1,49 @@
1
+ import { b8 as getDefaultExportFromCjs } from "./index-BmQl7j8n.js";
2
+ function _mergeNamespaces(n, m) {
3
+ for (var i = 0; i < m.length; i++) {
4
+ const e = m[i];
5
+ if (typeof e !== "string" && !Array.isArray(e)) {
6
+ for (const k in e) {
7
+ if (k !== "default" && !(k in n)) {
8
+ const d = Object.getOwnPropertyDescriptor(e, k);
9
+ if (d) {
10
+ Object.defineProperty(n, k, d.get ? d : {
11
+ enumerable: true,
12
+ get: () => e[k]
13
+ });
14
+ }
15
+ }
16
+ }
17
+ }
18
+ }
19
+ return Object.freeze(Object.defineProperty(n, Symbol.toStringTag, { value: "Module" }));
20
+ }
21
+ var jsxDevRuntime$2 = { exports: {} };
22
+ var reactJsxDevRuntime_production = {};
23
+ var hasRequiredReactJsxDevRuntime_production;
24
+ function requireReactJsxDevRuntime_production() {
25
+ if (hasRequiredReactJsxDevRuntime_production) return reactJsxDevRuntime_production;
26
+ hasRequiredReactJsxDevRuntime_production = 1;
27
+ var REACT_FRAGMENT_TYPE = /* @__PURE__ */ Symbol.for("react.fragment");
28
+ reactJsxDevRuntime_production.Fragment = REACT_FRAGMENT_TYPE;
29
+ reactJsxDevRuntime_production.jsxDEV = void 0;
30
+ return reactJsxDevRuntime_production;
31
+ }
32
+ var hasRequiredJsxDevRuntime;
33
+ function requireJsxDevRuntime() {
34
+ if (hasRequiredJsxDevRuntime) return jsxDevRuntime$2.exports;
35
+ hasRequiredJsxDevRuntime = 1;
36
+ {
37
+ jsxDevRuntime$2.exports = requireReactJsxDevRuntime_production();
38
+ }
39
+ return jsxDevRuntime$2.exports;
40
+ }
41
+ var jsxDevRuntimeExports = requireJsxDevRuntime();
42
+ const jsxDevRuntime = /* @__PURE__ */ getDefaultExportFromCjs(jsxDevRuntimeExports);
43
+ const jsxDevRuntime$1 = /* @__PURE__ */ _mergeNamespaces({
44
+ __proto__: null,
45
+ default: jsxDevRuntime
46
+ }, [jsxDevRuntimeExports]);
47
+ export {
48
+ jsxDevRuntime$1 as j
49
+ };
@@ -1,5 +1,5 @@
1
- import { _ as __name, l as log, c as getConfig2, I as selectSvgElement, ak as insertCluster, al as insertNode, am as positionNode, a1 as setupGraphViewbox, G as defaultConfig_default, i as sanitizeText, t as load, J as JSON_SCHEMA, Y as isDark, $ as lighten, a0 as darken } from "./index-3bI-dJm8.js";
2
- import { g as getIconStyles } from "./chunk-FMBD7UC4-CoPwvBCa.js";
1
+ import { _ as __name, l as log, c as getConfig2, I as selectSvgElement, ak as insertCluster, al as insertNode, am as positionNode, a1 as setupGraphViewbox, G as defaultConfig_default, i as sanitizeText, t as load, J as JSON_SCHEMA, Y as isDark, $ as lighten, a0 as darken } from "./index-BmQl7j8n.js";
2
+ import { g as getIconStyles } from "./chunk-FMBD7UC4-Bstyl64g.js";
3
3
  var parser = (function() {
4
4
  var o = /* @__PURE__ */ __name(function(k, v, o2, l) {
5
5
  for (o2 = o2 || {}, l = k.length; l--; o2[k[l]] = v) ;
@@ -1,5 +1,5 @@
1
- import { d as defineProperty, b as baseRest, a as baseFlatten, s as setToString, o as overRest, c as arrayEach, e as isArrayLikeObject, f as baseFor, g as baseIteratee, h as baseFindIndex, j as baseEach, k as arrayMap, l as castFunction, m as baseForOwn, n as hasPath, p as identity, q as castPath, t as toKey, r as baseGet, u as hasIn, v as toString, G as Graph, w as forEach, x as constant, i as isUndefined, y as filter, z as values, A as reduce } from "./graph-B_ifajWk.js";
2
- import { c2 as toNumber, bN as isObject, c3 as eq, bR as isArrayLike, bQ as isIndex, bX as isPrototype, c4 as arrayLikeKeys, c5 as overArg, bS as isObjectLike, c6 as baseGetTag, bO as keys, c7 as root, c8 as getSymbols, c9 as stubArray, bK as arrayPush, ca as baseGetAllKeys, cb as Uint8Array, bG as Symbol$1, bW as getTag, cc as baseUnary, cd as nodeUtil, bU as isBuffer, bL as Stack, bE as isArray, ce as getAllKeys, bV as isTypedArray, bJ as isArguments, c1 as isFunction, bF as isSymbol } from "./index-3bI-dJm8.js";
1
+ import { d as defineProperty, b as baseRest, a as baseFlatten, s as setToString, o as overRest, c as arrayEach, e as isArrayLikeObject, f as baseFor, g as baseIteratee, h as baseFindIndex, j as baseEach, k as arrayMap, l as castFunction, m as baseForOwn, n as hasPath, p as identity, q as castPath, t as toKey, r as baseGet, u as hasIn, v as toString, G as Graph, w as forEach, x as constant, i as isUndefined, y as filter, z as values, A as reduce } from "./graph-BPvbzKl1.js";
2
+ import { c2 as toNumber, bN as isObject, c3 as eq, bR as isArrayLike, bQ as isIndex, bX as isPrototype, c4 as arrayLikeKeys, c5 as overArg, bS as isObjectLike, c6 as baseGetTag, bO as keys, c7 as root, c8 as getSymbols, c9 as stubArray, bK as arrayPush, ca as baseGetAllKeys, cb as Uint8Array, bG as Symbol$1, bW as getTag, cc as baseUnary, cd as nodeUtil, bU as isBuffer, bL as Stack, bE as isArray, ce as getAllKeys, bV as isTypedArray, bJ as isArguments, c1 as isFunction, bF as isSymbol } from "./index-BmQl7j8n.js";
3
3
  var INFINITY = 1 / 0, MAX_INTEGER = 17976931348623157e292;
4
4
  function toFinite(value) {
5
5
  if (!value) {
@@ -1,6 +1,6 @@
1
- import { g as getDiagramElement } from "./chunk-55IACEB6-DyyQMIZa.js";
2
- import { s as setupViewPortForSVG } from "./chunk-2J33WTMH-Dzi-idRV.js";
3
- import { _ as __name, l as log, o as getRegisteredLayoutAlgorithm, r as render, D as getConfig, G as defaultConfig_default, c as getConfig2, i as sanitizeText, ai as getUserDefinedConfig, aj as v4, Y as isDark, $ as lighten, a0 as darken } from "./index-3bI-dJm8.js";
1
+ import { g as getDiagramElement } from "./chunk-55IACEB6-BB7RTMZZ.js";
2
+ import { s as setupViewPortForSVG } from "./chunk-2J33WTMH-Bd_3pGvb.js";
3
+ import { _ as __name, l as log, o as getRegisteredLayoutAlgorithm, r as render, D as getConfig, G as defaultConfig_default, c as getConfig2, i as sanitizeText, ai as getUserDefinedConfig, aj as v4, Y as isDark, $ as lighten, a0 as darken } from "./index-BmQl7j8n.js";
4
4
  var parser = (function() {
5
5
  var o = /* @__PURE__ */ __name(function(k, v, o2, l) {
6
6
  for (o2 = o2 || {}, l = k.length; l--; o2[k[l]] = v) ;
@@ -1,7 +1,7 @@
1
- import { ae as constant, a6 as tau, b6 as array, g as getAccDescription, s as setAccDescription, a as getAccTitle, b as setAccTitle, q as getDiagramTitle, p as setDiagramTitle, _ as __name, l as log, c as getConfig2$1, F as cleanAndMerge, I as selectSvgElement, R as parseFontSize, b7 as ordinal, e as configureSvgSize, z as clear, G as defaultConfig_default } from "./index-3bI-dJm8.js";
2
- import { p as populateCommonDb } from "./chunk-4BX2VUAB-DEyFpixF.js";
3
- import { p as parse } from "./wardley-L42UT6IY-BiqfHMim.js";
4
- import { d as d3arc } from "./arc-BXuUWHai.js";
1
+ import { ae as constant, a6 as tau, b6 as array, g as getAccDescription, s as setAccDescription, a as getAccTitle, b as setAccTitle, q as getDiagramTitle, p as setDiagramTitle, _ as __name, l as log, c as getConfig2$1, F as cleanAndMerge, I as selectSvgElement, R as parseFontSize, b7 as ordinal, e as configureSvgSize, z as clear, G as defaultConfig_default } from "./index-BmQl7j8n.js";
2
+ import { p as populateCommonDb } from "./chunk-4BX2VUAB-Csrpxz3N.js";
3
+ import { p as parse } from "./wardley-L42UT6IY-Cz6T4MDn.js";
4
+ import { d as d3arc } from "./arc-Cju-fnUJ.js";
5
5
  function descending(a, b) {
6
6
  return b < a ? -1 : b > a ? 1 : b >= a ? 0 : NaN;
7
7
  }
@@ -1,4 +1,4 @@
1
- import { s as setAccDescription, g as getAccDescription, q as getDiagramTitle, p as setDiagramTitle, a as getAccTitle, b as setAccTitle, _ as __name, c as getConfig2, l as log, d as select, e as configureSvgSize, z as clear, G as defaultConfig_default, K as linear, i as sanitizeText, L as getThemeVariables3 } from "./index-3bI-dJm8.js";
1
+ import { s as setAccDescription, g as getAccDescription, q as getDiagramTitle, p as setDiagramTitle, a as getAccTitle, b as setAccTitle, _ as __name, c as getConfig2, l as log, d as select, e as configureSvgSize, z as clear, G as defaultConfig_default, K as linear, i as sanitizeText, L as getThemeVariables3 } from "./index-BmQl7j8n.js";
2
2
  var parser = (function() {
3
3
  var o = /* @__PURE__ */ __name(function(k, v, o2, l) {
4
4
  for (o2 = o2 || {}, l = k.length; l--; o2[k[l]] = v) ;
@@ -1,6 +1,6 @@
1
- import { g as getDiagramElement } from "./chunk-55IACEB6-DyyQMIZa.js";
2
- import { s as setupViewPortForSVG } from "./chunk-2J33WTMH-Dzi-idRV.js";
3
- import { _ as __name, D as getConfig, b as setAccTitle, a as getAccTitle, s as setAccDescription, g as getAccDescription, p as setDiagramTitle, q as getDiagramTitle, c as getConfig2, l as log, z as clear, C as __export, o as getRegisteredLayoutAlgorithm, r as render, u as utils_default } from "./index-3bI-dJm8.js";
1
+ import { g as getDiagramElement } from "./chunk-55IACEB6-BB7RTMZZ.js";
2
+ import { s as setupViewPortForSVG } from "./chunk-2J33WTMH-Bd_3pGvb.js";
3
+ import { _ as __name, D as getConfig, b as setAccTitle, a as getAccTitle, s as setAccDescription, g as getAccDescription, p as setDiagramTitle, q as getDiagramTitle, c as getConfig2, l as log, z as clear, C as __export, o as getRegisteredLayoutAlgorithm, r as render, u as utils_default } from "./index-BmQl7j8n.js";
4
4
  var parser = (function() {
5
5
  var o = /* @__PURE__ */ __name(function(k, v, o2, l) {
6
6
  for (o2 = o2 || {}, l = k.length; l--; o2[k[l]] = v) ;
@@ -1,4 +1,4 @@
1
- import { p as setDiagramTitle, q as getDiagramTitle, s as setAccDescription, g as getAccDescription, b as setAccTitle, a as getAccTitle, _ as __name, c as getConfig2, A as defaultConfig2, d as select, b7 as ordinal, a1 as setupGraphViewbox, z as clear, k as common_default } from "./index-3bI-dJm8.js";
1
+ import { p as setDiagramTitle, q as getDiagramTitle, s as setAccDescription, g as getAccDescription, b as setAccTitle, a as getAccTitle, _ as __name, c as getConfig2, A as defaultConfig2, d as select, b7 as ordinal, a1 as setupGraphViewbox, z as clear, k as common_default } from "./index-BmQl7j8n.js";
2
2
  function colors(specifier) {
3
3
  var n = specifier.length / 6 | 0, colors2 = new Array(n), i = 0;
4
4
  while (i < n) colors2[i] = "#" + specifier.slice(i * 6, ++i * 6);
@@ -1,6 +1,6 @@
1
- import { _ as __name, n as setConfig2, c as getConfig2, d as select, l as log, j as distExports, e as configureSvgSize, f as assignWithDepth_default, k as common_default, b as setAccTitle, s as setAccDescription, p as setDiagramTitle, a as getAccTitle, g as getAccDescription, q as getDiagramTitle, t as load, J as JSON_SCHEMA, z as clear, i as sanitizeText, u as utils_default, P as hasKatex, Q as calculateMathMLDimensions, R as parseFontSize, Z as ZERO_WIDTH_SPACE, D as getConfig, S as getUrl, T as renderKatexSanitized } from "./index-3bI-dJm8.js";
2
- import { a as drawBackgroundRect, b as getTextObj, g as getNoteRect, d as drawRect, e as drawEmbeddedImage, f as drawImage } from "./chunk-ND2GUHAM-ku5t5SwP.js";
3
- import { I as ImperativeState } from "./chunk-QZHKN3VN-DBGBAqit.js";
1
+ import { _ as __name, n as setConfig2, c as getConfig2, d as select, l as log, j as distExports, e as configureSvgSize, f as assignWithDepth_default, k as common_default, b as setAccTitle, s as setAccDescription, p as setDiagramTitle, a as getAccTitle, g as getAccDescription, q as getDiagramTitle, t as load, J as JSON_SCHEMA, z as clear, i as sanitizeText, u as utils_default, P as hasKatex, Q as calculateMathMLDimensions, R as parseFontSize, Z as ZERO_WIDTH_SPACE, D as getConfig, S as getUrl, T as renderKatexSanitized } from "./index-BmQl7j8n.js";
2
+ import { a as drawBackgroundRect, b as getTextObj, g as getNoteRect, d as drawRect, e as drawEmbeddedImage, f as drawImage } from "./chunk-ND2GUHAM-CVaUW2HV.js";
3
+ import { I as ImperativeState } from "./chunk-QZHKN3VN-AMfy7Nbn.js";
4
4
  var parser = (function() {
5
5
  var o = /* @__PURE__ */ __name(function(k, v, o2, l) {
6
6
  for (o2 = o2 || {}, l = k.length; l--; o2[k[l]] = v) ;
@@ -1,9 +1,9 @@
1
- import { s as styles_default, a as stateDiagram_default, S as StateDB } from "./chunk-AQP2D5EJ-B0SWmbrS.js";
2
- import { _ as __name, c as getConfig2, d as select, l as log, e as configureSvgSize, k as common_default, O as line, V as curveBasis, S as getUrl, u as utils_default } from "./index-3bI-dJm8.js";
3
- import { G as Graph } from "./graph-B_ifajWk.js";
4
- import { l as layout } from "./layout-DAkKffy1.js";
5
- import "./chunk-55IACEB6-DyyQMIZa.js";
6
- import "./chunk-2J33WTMH-Dzi-idRV.js";
1
+ import { s as styles_default, a as stateDiagram_default, S as StateDB } from "./chunk-AQP2D5EJ-D5f9Zgag.js";
2
+ import { _ as __name, c as getConfig2, d as select, l as log, e as configureSvgSize, k as common_default, O as line, V as curveBasis, S as getUrl, u as utils_default } from "./index-BmQl7j8n.js";
3
+ import { G as Graph } from "./graph-BPvbzKl1.js";
4
+ import { l as layout } from "./layout-DdBKGefG.js";
5
+ import "./chunk-55IACEB6-BB7RTMZZ.js";
6
+ import "./chunk-2J33WTMH-Bd_3pGvb.js";
7
7
  var drawStartState = /* @__PURE__ */ __name((g) => g.append("circle").attr("class", "start-state").attr("r", getConfig2().state.sizeUnit).attr("cx", getConfig2().state.padding + getConfig2().state.sizeUnit).attr("cy", getConfig2().state.padding + getConfig2().state.sizeUnit), "drawStartState");
8
8
  var drawDivider = /* @__PURE__ */ __name((g) => g.append("line").style("stroke", "grey").style("stroke-dasharray", "3").attr("x1", getConfig2().state.textHeight).attr("class", "divider").attr("x2", getConfig2().state.textHeight * 2).attr("y1", 0).attr("y2", 0), "drawDivider");
9
9
  var drawSimpleState = /* @__PURE__ */ __name((g, stateDef) => {
@@ -1,7 +1,7 @@
1
- import { s as styles_default, b as stateRenderer_v3_unified_default, a as stateDiagram_default, S as StateDB } from "./chunk-AQP2D5EJ-B0SWmbrS.js";
2
- import { _ as __name } from "./index-3bI-dJm8.js";
3
- import "./chunk-55IACEB6-DyyQMIZa.js";
4
- import "./chunk-2J33WTMH-Dzi-idRV.js";
1
+ import { s as styles_default, b as stateRenderer_v3_unified_default, a as stateDiagram_default, S as StateDB } from "./chunk-AQP2D5EJ-D5f9Zgag.js";
2
+ import { _ as __name } from "./index-BmQl7j8n.js";
3
+ import "./chunk-55IACEB6-BB7RTMZZ.js";
4
+ import "./chunk-2J33WTMH-Bd_3pGvb.js";
5
5
  var diagram = {
6
6
  parser: stateDiagram_default,
7
7
  get db() {
@@ -1,5 +1,5 @@
1
- import { _ as __name, D as getConfig, Y as isDark, $ as lighten, a0 as darken, c as getConfig2, l as log, I as selectSvgElement, R as parseFontSize, a1 as setupGraphViewbox, d as select, C as __export, a2 as commonDb_exports, z as clear } from "./index-3bI-dJm8.js";
2
- import { d as d3arc } from "./arc-BXuUWHai.js";
1
+ import { _ as __name, D as getConfig, Y as isDark, $ as lighten, a0 as darken, c as getConfig2, l as log, I as selectSvgElement, R as parseFontSize, a1 as setupGraphViewbox, d as select, C as __export, a2 as commonDb_exports, z as clear } from "./index-BmQl7j8n.js";
2
+ import { d as d3arc } from "./arc-Cju-fnUJ.js";
3
3
  var parser = (function() {
4
4
  var o = /* @__PURE__ */ __name(function(k, v, o2, l) {
5
5
  for (o2 = o2 || {}, l = k.length; l--; o2[k[l]] = v) ;
@@ -1,4 +1,4 @@
1
- import { aY as adjustChannel, s as setAccDescription, g as getAccDescription, q as getDiagramTitle, p as setDiagramTitle, a as getAccTitle, b as setAccTitle, _ as __name, D as getConfig, I as selectSvgElement, d as select, aq as at, Y as isDark, $ as lighten, a0 as darken, e as configureSvgSize, z as clear, F as cleanAndMerge, G as defaultConfig_default } from "./index-3bI-dJm8.js";
1
+ import { aY as adjustChannel, s as setAccDescription, g as getAccDescription, q as getDiagramTitle, p as setDiagramTitle, a as getAccTitle, b as setAccTitle, _ as __name, D as getConfig, I as selectSvgElement, d as select, aq as at, Y as isDark, $ as lighten, a0 as darken, e as configureSvgSize, z as clear, F as cleanAndMerge, G as defaultConfig_default } from "./index-BmQl7j8n.js";
2
2
  const transparentize = (color, amount) => {
3
3
  return adjustChannel(color, "a", -amount);
4
4
  };
@@ -1,4 +1,4 @@
1
- import { cf as __vitePreload } from "./index-3bI-dJm8.js";
1
+ import { cf as __vitePreload } from "./index-BmQl7j8n.js";
2
2
  var __create = Object.create;
3
3
  var __defProp = Object.defineProperty;
4
4
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -1,6 +1,6 @@
1
- import { s as setAccDescription, g as getAccDescription, q as getDiagramTitle, p as setDiagramTitle, a as getAccTitle, b as setAccTitle, _ as __name, L as getThemeVariables3, D as getConfig, F as cleanAndMerge, l as log, I as selectSvgElement, e as configureSvgSize, z as clear, c as getConfig2 } from "./index-3bI-dJm8.js";
2
- import { p as populateCommonDb } from "./chunk-4BX2VUAB-DEyFpixF.js";
3
- import { p as parse } from "./wardley-L42UT6IY-BiqfHMim.js";
1
+ import { s as setAccDescription, g as getAccDescription, q as getDiagramTitle, p as setDiagramTitle, a as getAccTitle, b as setAccTitle, _ as __name, L as getThemeVariables3, D as getConfig, F as cleanAndMerge, l as log, I as selectSvgElement, e as configureSvgSize, z as clear, c as getConfig2 } from "./index-BmQl7j8n.js";
2
+ import { p as populateCommonDb } from "./chunk-4BX2VUAB-Csrpxz3N.js";
3
+ import { p as parse } from "./wardley-L42UT6IY-Cz6T4MDn.js";
4
4
  var toPercent = /* @__PURE__ */ __name((value, context) => {
5
5
  const normalized = value <= 1 ? value * 100 : value;
6
6
  if (normalized < 0 || normalized > 100) {
@@ -1,4 +1,4 @@
1
- import { s as setAccDescription, g as getAccDescription, q as getDiagramTitle, p as setDiagramTitle, a as getAccTitle, b as setAccTitle, _ as __name, l as log, I as selectSvgElement, e as configureSvgSize, z as clear, D as getConfig, i as sanitizeText, F as cleanAndMerge, G as defaultConfig_default, L as getThemeVariables3, M as band, N as computeDimensionOfText, K as linear, O as line } from "./index-3bI-dJm8.js";
1
+ import { s as setAccDescription, g as getAccDescription, q as getDiagramTitle, p as setDiagramTitle, a as getAccTitle, b as setAccTitle, _ as __name, l as log, I as selectSvgElement, e as configureSvgSize, z as clear, D as getConfig, i as sanitizeText, F as cleanAndMerge, G as defaultConfig_default, L as getThemeVariables3, M as band, N as computeDimensionOfText, K as linear, O as line } from "./index-BmQl7j8n.js";
2
2
  var parser = (function() {
3
3
  var o = /* @__PURE__ */ __name(function(k, v, o2, l) {
4
4
  for (o2 = o2 || {}, l = k.length; l--; o2[k[l]] = v) ;
@@ -20,8 +20,8 @@
20
20
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
21
21
  <meta name="apple-mobile-web-app-title" content="AiderDesk">
22
22
  <link rel="apple-touch-icon" href="/icon-192.png">
23
- <script type="module" crossorigin src="./assets/index-3bI-dJm8.js"></script>
24
- <link rel="stylesheet" crossorigin href="./assets/index-B62bIfbt.css">
23
+ <script type="module" crossorigin src="./assets/index-BmQl7j8n.js"></script>
24
+ <link rel="stylesheet" crossorigin href="./assets/index-z-BItG-u.css">
25
25
  </head>
26
26
 
27
27
  <body>
@@ -34,11 +34,11 @@
34
34
  <Substep letter="a">Explicitly reason about all potentially affected/related files: dependencies, importers, imports, related modules, types, configs, tests, and usage examples.</Substep>
35
35
  <Substep letter="b">Use tools (search, grep, dependency analysis where available) to locate related files throughout <WorkingDirectory>.</Substep>
36
36
  <Substep letter="c">List all identified relevant files explicitly before proceeding.</Substep>
37
- <Substep letter="d" autoApprove="{{toolPermissions.autoApprove}}">{{#if toolPermissions.autoApprove}}IMPORTANT: User confirmation is not required as auto-approve is enabled. You can proceed.{{else}}Await explicit user confirmation before proceeding.{{/if}}</Substep>
37
+ <Substep letter="d" autonomyMode="{{toolPermissions.autonomyMode}}">{{#if (equals toolPermissions.autonomyMode "manual")}}Await explicit user confirmation before proceeding.{{else}}IMPORTANT: User confirmation is not required. You can proceed.{{/if}}</Substep>
38
38
  </Step>{{#increment "stepNumber"}}{{/increment}}
39
39
  <Step number="{{stepNumber}}" title="Develop Implementation Plan">
40
40
  <Instruction>Using the confirmed file list, create a comprehensive multi-file change plan.</Instruction>
41
- <Instruction autoApprove="{{toolPermissions.autoApprove}}">{{#if toolPermissions.autoApprove}}After presenting the plan, execute it automatically.{{else}}Present the plan and await explicit user approval before changes. For example: "May I proceed? (y/n)"{{/if}}</Instruction>
41
+ <Instruction autonomyMode="{{toolPermissions.autonomyMode}}">{{#if (equals toolPermissions.autonomyMode "autonomous")}}After presenting the plan, execute it automatically.{{else}}Present the plan and await explicit user approval before changes. For example: "May I proceed? (y/n)"{{/if}}</Instruction>
42
42
  </Step>{{#increment "stepNumber"}}{{/increment}}
43
43
  <Step number="{{stepNumber}}" title="Execute Implementation">
44
44
  <Instruction>Apply planned changes using appropriate tools. Ensure all relevant files from Step 5 are in context before modifications.</Instruction>
@@ -112,6 +112,20 @@ Do not use when:
112
112
 
113
113
  **If:** Component triggers actions, implement `executeUIExtensionAction()`
114
114
 
115
+ ### Rule: Use external libraries when UI components need npm packages
116
+
117
+ **When:** Extension UI components need third-party npm packages (charts, calendars, kanban boards, etc.)
118
+
119
+ **Then:** Implement `getUIComponentsLibraries()` returning a Record<string, string> mapping camelCase keys to npm package specs
120
+
121
+ **Must:** Access loaded libraries in JSX via `props.libraries.<key>`
122
+
123
+ **Must:** Handle the loading state — libraries are async and `props.libraries.<key>` will be `undefined` on first render
124
+
125
+ **Never:** Bundle or import React in library specs — AiderDesk's React instance is externalized automatically
126
+
127
+ **Reference:** [external-libraries.md](references/external-libraries.md) for full details, loading patterns, and examples
128
+
115
129
  ### Rule: Add config component for extension settings
116
130
 
117
131
  **When:** Extension needs user-configurable settings (shown in gear icon dialog)
@@ -295,6 +309,15 @@ After completing this skill, verify:
295
309
  }
296
310
  ```
297
311
 
312
+ **Situation:** Extension UI components need third-party npm packages
313
+
314
+ **Pattern:**
315
+ - When: Extension needs a library like a chart, calendar, kanban board, etc. that isn't in the built-in `ui` prop
316
+ - Then: Implement `getUIComponentsLibraries()` returning `{ key: 'package@^version' }`
317
+ - Access: Use `props.libraries.<key>` in JSX — check for `undefined` (async loading)
318
+ - Example: `getUIComponentsLibraries() { return { chart: 'recharts@^2.12.0' } }`
319
+ - Reference: [external-libraries.md](references/external-libraries.md)
320
+
298
321
  **Situation:** Extension needs config storage
299
322
 
300
323
  **Pattern:**
@@ -331,6 +354,7 @@ After completing this skill, verify:
331
354
  - [event-types.md](references/event-types.md) - All event types and payloads
332
355
  - [command-definition.md](references/command-definition.md) - Command structure
333
356
  - [ui-components.md](references/ui-components.md) - UI component system, placements, and available components
357
+ - [external-libraries.md](references/external-libraries.md) - Loading third-party npm libraries in UI components (getUIComponentsLibraries)
334
358
  - [config-components.md](references/config-components.md) - Config component API (settings UI), methods, JSX format, and patterns
335
359
  - [examples-gallery.md](references/examples-gallery.md) - Real extension examples
336
360
 
@@ -581,3 +581,14 @@ export default class ExternalRulesExtension implements Extension {
581
581
  | Tools | chunkhound-search | Custom AI tools |
582
582
  | UI Display | tps-counter | Show information in UI |
583
583
  | UI Interactive | multi-model-run | User input in UI |
584
+ | **External Libraries** | **kanban-demo.ts** | **Third-party npm packages in UI components** |
585
+
586
+ ### External Libraries (kanban-demo.ts)
587
+
588
+ Uses `getUIComponentsLibraries()` to load a npm package and render it in a UI component. See [external-libraries.md](external-libraries.md) for full documentation and a minimal example.
589
+
590
+ Key patterns:
591
+ - `getUIComponentsLibraries()` returns `{ kanban: 'react-kanban-kit@^0.0.2-beta.7' }`
592
+ - JSX accesses library via `props.libraries.kanban`
593
+ - Loading state handled with `undefined` check + timeout-based error fallback
594
+ - Uses `ui.Button` and `ui.ModalOverlayLayout` alongside the external library
@@ -16,6 +16,7 @@ interface Extension {
16
16
  getAgents?(context: ExtensionContext): AgentProfile[];
17
17
  getModes?(context: ExtensionContext): ModeDefinition[];
18
18
  getUIComponents?(context: ExtensionContext): UIComponentDefinition[];
19
+ getUIComponentsLibraries?(): Record<string, string>;
19
20
 
20
21
  // UI Component support
21
22
  getUIExtensionData?(componentId: string, context: ExtensionContext): Promise<unknown>;
@@ -250,6 +251,9 @@ interface UIComponentProps {
250
251
  // Extension actions
251
252
  executeExtensionAction: (action: string, ...args: unknown[]) => Promise<unknown>;
252
253
 
254
+ // External libraries (loaded via getUIComponentsLibraries)
255
+ libraries: Record<string, Record<string, unknown>>;
256
+
253
257
  // Data from getUIExtensionData() (if loadData: true)
254
258
  data?: unknown;
255
259
 
@@ -0,0 +1,159 @@
1
+ # External Libraries in UI Components
2
+
3
+ Extensions can load third-party npm packages and use them in their UI component JSX. This is useful when you need a rich component library (e.g., charts, kanban boards, calendars) that isn't available through the built-in `ui` prop.
4
+
5
+ ## How It Works
6
+
7
+ 1. **Declare** — Implement `getUIComponentsLibraries()` returning a map of arbitrary keys to npm package specs.
8
+ 2. **Resolve** — AiderDesk resolves each package via [esm.sh](https://esm.sh) (React and React-DOM are externalized to avoid duplicate instances). Resolved sources are cached to `~/.aider-desk/cache/extension-libraries/` for offline reuse.
9
+ 3. **Access** — Resolved libraries are passed to your JSX as `props.libraries.<key>`.
10
+
11
+ ## Declaring Libraries
12
+
13
+ ```typescript
14
+ getUIComponentsLibraries(): Record<string, string> {
15
+ return {
16
+ chart: 'recharts@^2.12.0',
17
+ lodash: 'lodash@^4.17.0',
18
+ };
19
+ }
20
+ ```
21
+
22
+ - **Key** — camelCase identifier you'll use to access the library in JSX (e.g., `props.libraries.chart`).
23
+ - **Value** — npm package name with a semver range, exactly as you'd list it in `package.json` (e.g., `'recharts@^2.12.0'`).
24
+
25
+ ## Accessing in JSX
26
+
27
+ Libraries arrive as `props.libraries.<key>`. Each value is the module's resolved exports — you can destructure named exports or use the default:
28
+
29
+ ```jsx
30
+ (props) => {
31
+ var chartLib = props.libraries.chart;
32
+ if (!chartLib) return <span>Loading chart library…</span>;
33
+
34
+ var LineChart = chartLib.LineChart;
35
+ var Line = chartLib.Line;
36
+ // ... use them
37
+ }
38
+ ```
39
+
40
+ ## Loading State
41
+
42
+ Libraries are loaded asynchronously. On first render `props.libraries.<key>` will be `undefined`. Always check for availability before using a library:
43
+
44
+ ```jsx
45
+ (props) => {
46
+ var chartLib = props.libraries.chart;
47
+
48
+ if (!chartLib) {
49
+ return <span className="text-text-secondary text-sm">Loading…</span>;
50
+ }
51
+
52
+ var LineChart = chartLib.LineChart;
53
+ return <LineChart data={props.data} />;
54
+ }
55
+ ```
56
+
57
+ If you want to show an error after a timeout, use `useEffect` with a flag:
58
+
59
+ ```jsx
60
+ (props) => {
61
+ var useState = React.useState;
62
+ var useEffect = React.useEffect;
63
+ var chartLib = props.libraries.chart;
64
+
65
+ var _e = useState(false);
66
+ var loadError = _e[0];
67
+ var setLoadError = _e[1];
68
+
69
+ useEffect(function () {
70
+ if (!chartLib && !loadError) {
71
+ var t = setTimeout(function () { setLoadError(true); }, 15000);
72
+ return function () { clearTimeout(t); };
73
+ }
74
+ setLoadError(false);
75
+ }, [chartLib, loadError]);
76
+
77
+ if (loadError && !chartLib) {
78
+ return <span className="text-red-400 text-sm">Failed to load library.</span>;
79
+ }
80
+ if (!chartLib) {
81
+ return <span className="text-text-secondary text-sm">Loading…</span>;
82
+ }
83
+
84
+ var LineChart = chartLib.LineChart;
85
+ return <LineChart data={props.data} />;
86
+ }
87
+ ```
88
+
89
+ ## Important Notes
90
+
91
+ - **React is externalized** — AiderDesk's React instance is used automatically. Never bundle or import React inside the library spec; it is already available globally. The esm.sh resolution uses `?external=react,react-dom,react/jsx-runtime,react/jsx-dev-runtime` to prevent duplicate React instances.
92
+ - **Internet required on first load** — Libraries are fetched from esm.sh on first use, then cached to disk. Subsequent loads work offline.
93
+ - **Single-file extensions** — `getUIComponentsLibraries()` works in both single-file and folder extensions.
94
+ - **Key naming** — Use camelCase keys. A key like `chart` becomes `props.libraries.chart`. Avoid dots or special characters in keys.
95
+ - **Multiple libraries** — You can declare as many libraries as needed. Each is loaded independently.
96
+
97
+ ## Minimal Example
98
+
99
+ ```typescript
100
+ // chart-demo.ts
101
+ import type { Extension, ExtensionContext, UIComponentDefinition } from '@aiderdesk/extensions';
102
+
103
+ const chartJsx = `
104
+ (props) => {
105
+ var chartLib = props.libraries.chart;
106
+ var Button = props.ui.Button;
107
+
108
+ if (!chartLib) {
109
+ return <span className="text-text-secondary text-xs">Loading chart…</span>;
110
+ }
111
+
112
+ var PieChart = chartLib.PieChart;
113
+ var Pie = chartLib.Pie;
114
+
115
+ var data = [
116
+ { name: 'A', value: 40 },
117
+ { name: 'B', value: 60 },
118
+ ];
119
+
120
+ return (
121
+ <div className="p-2">
122
+ <PieChart width={200} height={200}>
123
+ <Pie data={data} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={80} />
124
+ </PieChart>
125
+ </div>
126
+ );
127
+ }
128
+ `;
129
+
130
+ export default class ChartDemoExtension implements Extension {
131
+ static metadata = {
132
+ name: 'Chart Demo',
133
+ version: '1.0.0',
134
+ description: 'Demonstrates loading a third-party npm library (recharts) in an extension',
135
+ author: 'my_git_name',
136
+ capabilities: ['ui', 'example'],
137
+ };
138
+
139
+ async onLoad(context: ExtensionContext): Promise<void> {
140
+ context.log('Chart Demo loaded', 'info');
141
+ }
142
+
143
+ getUIComponents(_context: ExtensionContext): UIComponentDefinition[] {
144
+ return [
145
+ {
146
+ id: 'chart-demo',
147
+ placement: 'task-status-bar-left',
148
+ jsx: chartJsx,
149
+ },
150
+ ];
151
+ }
152
+
153
+ getUIComponentsLibraries(): Record<string, string> {
154
+ return {
155
+ chart: 'recharts@^2.12.0',
156
+ };
157
+ }
158
+ }
159
+ ```