@principal-ai/principal-view-react 0.16.55 → 0.16.56
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.
- package/dist/index.d.ts +2 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/pierre/index.d.ts +2 -0
- package/dist/pierre/index.d.ts.map +1 -1
- package/dist/pierre/index.js +1 -0
- package/dist/pierre/index.js.map +1 -1
- package/dist/pierre/pierreSyntaxTheme.d.ts +11 -0
- package/dist/pierre/pierreSyntaxTheme.d.ts.map +1 -0
- package/dist/pierre/pierreSyntaxTheme.js +20 -0
- package/dist/pierre/pierreSyntaxTheme.js.map +1 -0
- package/dist/pierre/syntaxTokens.d.ts +11 -0
- package/dist/pierre/syntaxTokens.d.ts.map +1 -0
- package/dist/pierre/syntaxTokens.js +51 -0
- package/dist/pierre/syntaxTokens.js.map +1 -0
- package/dist/subsystem/ComponentDeclaration.d.ts.map +1 -1
- package/dist/subsystem/ComponentDeclaration.js +35 -13
- package/dist/subsystem/ComponentDeclaration.js.map +1 -1
- package/dist/subsystem/SubsystemComponentGraph.js +1 -1
- package/dist/subsystem/SubsystemComponentGraph.js.map +1 -1
- package/dist/subsystem/model.d.ts +2 -0
- package/dist/subsystem/model.d.ts.map +1 -1
- package/dist/subsystem/model.js.map +1 -1
- package/dist/subsystem/tokenizeComponent.d.ts +4 -3
- package/dist/subsystem/tokenizeComponent.d.ts.map +1 -1
- package/dist/subsystem/tokenizeComponent.js +6 -11
- package/dist/subsystem/tokenizeComponent.js.map +1 -1
- package/dist/subsystem/tokenizeFormatted.d.ts +3 -6
- package/dist/subsystem/tokenizeFormatted.d.ts.map +1 -1
- package/dist/subsystem/tokenizeFormatted.js +4 -75
- package/dist/subsystem/tokenizeFormatted.js.map +1 -1
- package/package.json +3 -1
- package/src/index.ts +2 -1
- package/src/pierre/index.ts +5 -0
- package/src/pierre/pierreSyntaxTheme.ts +23 -0
- package/src/pierre/syntaxTokens.test.ts +35 -0
- package/src/pierre/syntaxTokens.ts +60 -0
- package/src/subsystem/ComponentDeclaration.tsx +51 -13
- package/src/subsystem/SubsystemComponentGraph.tsx +1 -1
- package/src/subsystem/model.ts +2 -0
- package/src/subsystem/tokenizeComponent.ts +11 -11
- package/src/subsystem/tokenizeFormatted.ts +9 -82
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"model.js","sourceRoot":"","sources":["../../src/subsystem/model.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EACL,UAAU,GAGX,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"model.js","sourceRoot":"","sources":["../../src/subsystem/model.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EACL,UAAU,GAGX,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAmHtD;;;;;;;;;;GAUG;AACH,MAAM,UAAU,oBAAoB,CAClC,MAA0B,EAC1B,IAA4B,EAC5B,YAAqB,EACrB,IAAa;IAEb,IAAI,MAAM,IAAI,MAAM,CAAC,IAAI,EAAE,EAAE;QAC3B,OAAO,MAAM,CAAC;KACf;IACD,yEAAyE;IACzE,IAAI,IAAI,KAAK,QAAQ,IAAI,IAAI,EAAE;QAC7B,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC;QACzC,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB;QAC9D,IAAI,KAAK;YAAE,OAAO,KAAK,CAAC;KACzB;IACD,OAAO,YAAY,IAAI,UAAU,CAAC;AACpC,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,UAAU,CAAC,IAAY;IACrC,MAAM,KAAK,GAAG,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/C,IAAI,CAAC,KAAK;QAAE,OAAO,IAAI,CAAC;IACxB,IAAI,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IACzC,MAAM,EAAE,GAAG,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IACjC,IAAI,EAAE,GAAG,CAAC;QAAE,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,oBAAoB;IAClE,IAAI,QAAQ,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE;QAClC,OAAO,GAAG,QAAQ,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC;KACtD;IACD,OAAO,QAAQ,CAAC;AAClB,CAAC;AAsCD,MAAM,CAAC,MAAM,eAAe,GAA2C;IACrE,OAAO,EAAE,SAAS;IAClB,YAAY,EAAE,SAAS;IACvB,UAAU,EAAE,SAAS;IACrB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,SAAS;IAChB,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,SAAS;IACnB,UAAU,EAAE,SAAS;IACrB,QAAQ,EAAE,SAAS;IACnB,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;IACjB,UAAU,EAAE,SAAS;IACrB,QAAQ,EAAE,SAAS;IACnB,KAAK,EAAE,SAAS;IAChB,QAAQ,EAAE,SAAS;IACnB,gBAAgB,EAAE,SAAS,EAAE,SAAS;CACvC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAkE;IAC5F,OAAO,EAAE,OAAO;IAChB,YAAY,EAAE,OAAO;IACrB,UAAU,EAAE,OAAO;IACnB,OAAO,EAAE,OAAO;IAChB,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,QAAQ;IACjB,QAAQ,EAAE,QAAQ;IAClB,UAAU,EAAE,QAAQ;IACpB,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,OAAO;IACb,MAAM,EAAE,OAAO;IACf,UAAU,EAAE,QAAQ;IACpB,QAAQ,EAAE,OAAO;IACjB,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE,OAAO;IACjB,gBAAgB,EAAE,QAAQ;CAC3B,CAAC;AAEF,+EAA+E;AAC/E,MAAM,UAAU,YAAY,CAAC,IAAY;IACvC,MAAM,OAAO,GAAG;QACd,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;KACV,CAAC;IACF,IAAI,CAAC,GAAG,CAAC,CAAC;IACV,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE;QAAE,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAC9E,OAAO,OAAO,CAAC,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;AACrC,CAAC;AAED,+EAA+E;AAC/E,MAAM,CAAC,MAAM,UAAU,GAA2C;IAChE,KAAK,EAAE,SAAS;IAChB,QAAQ,EAAE,SAAS;IACnB,MAAM,EAAE,SAAS;IACjB,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,SAAS,EAAE,SAAS;CAC/B,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,UAAU,uBAAuB,CACrC,GAA2B,EAC3B,OAAkC,EAAE;IAEpC,MAAM,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;IAC9B,+BAA+B;IAC/B,MAAM,KAAK,GAAG,IAAI,GAAG,EAAgC,CAAC;IACtD,KAAK,MAAM,CAAC,IAAI,GAAG,CAAC,UAAU,EAAE;QAC9B,MAAM,IAAI,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QACrC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QACb,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;KACzB;IAED,MAAM,KAAK,GAAyB,EAAE,CAAC;IACvC,MAAM,IAAI,GAAG,CAAC,CAAC;IACf,MAAM,KAAK,GAAG,GAAG,CAAC;IAClB,MAAM,KAAK,GAAG,GAAG,CAAC;IAClB,MAAM,GAAG,GAAG,EAAE,CAAC;IACf,MAAM,SAAS,GAAG,EAAE,CAAC;IAErB,IAAI,OAAO,GAAG,GAAG,CAAC;IAClB,KAAK,MAAM,KAAK,IAAI,KAAK,CAAC,MAAM,EAAE,EAAE;QAClC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;QAC5C,MAAM,QAAQ,GAAG,KAAK,GAAG,IAAI,CAAC;QAE9B,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACrB,MAAM,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC;YACrB,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;YACjC,0EAA0E;YAC1E,uEAAuE;YACvE,MAAM,IAAI,GAAG,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC;iBAC3D,MAAM,CAAC,CAAC,CAAC,EAAe,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;iBAC/B,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;YAC1C,MAAM,GAAG,GAAG,YAAY,IAAI,GAAG,CAAC;YAChC,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,MAAM,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;YACxE,4EAA4E;YAC5E,uCAAuC;YACvC,MAAM,WAAW,GAAG,GAAG,CAAC;YACxB,MAAM,UAAU,GAAG,EAAE,CAAC,CAAC,oCAAoC;YAC3D,MAAM,SAAS,GAAG,CAAC,CAAC,CAAC,uBAAuB;YAC5C,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC;YAC3E,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC;YACjE,KAAK,CAAC,IAAI,CAAC;gBACT,EAAE,EAAE,CAAC,CAAC,EAAE;gBACR,IAAI,EAAE,qBAAqB;gBAC3B,QAAQ,EAAE,EAAE,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,KAAK,EAAE,CAAC,EAAE,OAAO,GAAG,GAAG,GAAG,KAAK,EAAE;gBAC5D,KAAK,EAAE,SAAS;gBAChB,MAAM,EAAE,EAAE;gBACV,IAAI,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE;aACvB,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QACH,OAAO,IAAI,QAAQ,GAAG,GAAG,GAAG,CAAC,GAAG,SAAS,CAAC;KAC3C;IACD,OAAO,KAAK,CAAC;AACf,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,uBAAuB,CAAC,GAA2B;IACjE,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACzD,MAAM,KAAK,GAAyB,EAAE,CAAC;IAEvC,KAAK,MAAM,CAAC,IAAI,GAAG,CAAC,KAAK,EAAE;QACzB,MAAM,KAAK,GAAG,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;QAC3C,MAAM,KAAK,GAAG,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;QAC3C,iFAAiF;QACjF,MAAM,UAAU,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QACtC,MAAM,QAAQ,GAAG,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAExD,KAAK,CAAC,IAAI,CAAC;YACT,EAAE,EAAE,CAAC,CAAC,EAAE;YACR,MAAM,EAAE,CAAC,CAAC,IAAI;YACd,MAAM,EAAE,QAAQ;YAChB,IAAI,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE;YAC9C,IAAI,EAAE,gBAAgB;YACtB,SAAS,EAAE,EAAE,IAAI,EAAE,UAAU,CAAC,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;YACzE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EAAE;YACxF,yEAAyE;YACzE,2DAA2D;YAC3D,KAAK,EAAE,CAAC,CAAC,SAAS;YAClB,yEAAyE;YACzE,uEAAuE;SACxE,CAAC,CAAC;KACJ;IACD,OAAO,KAAK,CAAC;AACf,CAAC;AAED,mFAAmF;AACnF,MAAM,UAAU,uBAAuB,CACrC,GAAyD;IAEzD,MAAM,UAAU,GAAG,GAAG,CAAC,UAAU;SAC9B,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,CACvD,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACtE,IAAI,EAAE;SACN,IAAI,CAAC,IAAI,CAAC,CAAC;IACd,MAAM,OAAO,GAAG,GAAG,CAAC,KAAK;SACtB,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,SAAS,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SAC1E,IAAI,EAAE;SACN,IAAI,CAAC,IAAI,CAAC,CAAC;IACd,OAAO,GAAG,UAAU,IAAI,OAAO,EAAE,CAAC;AACpC,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,KAAK,UAAU,mBAAmB,CACvC,GAA2B,EAC3B,OAAyI,EAAE;IAK3I,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;IAC/E,MAAM,KAAK,GAAG,uBAAuB,CAAC,GAAG,EAAE,EAAE,YAAY,EAAE,CAAC,CAAC;IAC7D,MAAM,KAAK,GAAG,uBAAuB,CAAC,GAAG,CAAC,CAAC;IAE3C,2EAA2E;IAC3E,iDAAiD;IACjD,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACzD,MAAM,WAAW,GAAa,EAAE,CAAC;IACjC,KAAK,MAAM,CAAC,IAAI,GAAG,CAAC,KAAK,EAAE;QACzB,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE;YACtB,MAAM,KAAK,GAAG,YAAY,CAAC,CAAC,EAAE,EAAE,CAAC;YACjC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC;gBAAE,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAC3D;KACF;IACD,KAAK,MAAM,KAAK,IAAI,WAAW,EAAE;QAC7B,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;QAC9C,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;QACpE,KAAK,CAAC,IAAI,CAAC;YACT,EAAE,EAAE,KAAK;YACT,IAAI,EAAE,qBAAqB;YAC3B,QAAQ,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;YACxB,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,YAAY,GAAG,EAAE,CAAC;YACzC,MAAM,EAAE,EAAE;YACV,IAAI,EAAE;gBACJ,SAAS,EAAE;oBACT,EAAE,EAAE,KAAK;oBACT,IAAI,EAAE,KAAK;oBACX,IAAI,EAAE,UAAU;oBAChB,IAAI,EAAE,UAAU;oBAChB,IAAI,EAAE,EAAE;oBACR,OAAO,EAAE,sDAAsD;iBAChE;aACF;YACD,SAAS,EAAE,KAAK;SACjB,CAAC,CAAC;KACJ;IAED,2EAA2E;IAC3E,IAAI,cAAc,IAAI,cAAc,CAAC,IAAI,GAAG,CAAC,EAAE;QAC7C,KAAK,MAAM,CAAC,IAAI,KAAK,EAAE;YACrB,MAAM,EAAE,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;YACpC,IAAI,EAAE;gBAAE,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC;SACtB;KACF;IACD,IAAI,eAAe,IAAI,eAAe,CAAC,IAAI,GAAG,CAAC,EAAE;QAC/C,KAAK,MAAM,CAAC,IAAI,KAAK,EAAE;YACrB,MAAM,EAAE,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;YACrC,IAAI,EAAE;gBAAE,CAAC,CAAC,MAAM,GAAG,EAAE,CAAC;SACvB;KACF;IAED,kEAAkE;IAClE,IAAI,WAAW,GAAG,KAAK,CAAC;IACxB,IAAI,cAAc,GAAG,IAAI,GAAG,EAAoC,CAAC;IACjE,IAAI,cAAc,GAAG,IAAI,GAAG,EAAkB,CAAC;IAC/C,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;QACpB,IAAI;YACF,MAAM,MAAM,GAAG,MAAM,gBAAgB,CAAC,KAAK,EAAE,KAAK,EAAE;gBAClD,YAAY,EAAE,YAAY;gBAC1B,SAAS,EAAE,OAAO;gBAClB,WAAW,EAAE,EAAE;gBACf,WAAW,EAAE,EAAE;gBACf,eAAe,EAAE,EAAE;gBACnB,iBAAiB,EAAE,GAAG;gBACtB,qBAAqB,EAAE,KAAK;gBAC5B,UAAU,EAAE,cAAc,KAAK,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE;aACnG,CAAC,CAAC;YACH,WAAW,GAAG,MAAM,CAAC,KAA6B,CAAC;YACnD,cAAc,GAAG,MAAM,CAAC,kBAAkB,CAAC;YAC3C,cAAc,GAAG,MAAM,CAAC,SAAS,CAAC;SACnC;QAAC,OAAO,GAAG,EAAE;YACZ,8DAA8D;YAC9D,OAAO,CAAC,IAAI,CAAC,8DAA8D,EAAE,GAAG,CAAC,CAAC;SACnF;KACF;IAED,uEAAuE;IACvE,8EAA8E;IAC9E,KAAK,MAAM,CAAC,IAAI,KAAK,EAAE;QACrB,MAAM,GAAG,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QACrC,IAAI,GAAG,EAAE;YACP,MAAM,CAAC,GAAI,CAAwB,CAAC,IAA8B,CAAC;YACnE,CAAC,CAAC,MAAM,GAAG,GAAG,CAAC,CAAC,CAAC;YACjB,CAAC,CAAC,MAAM,GAAG,GAAG,CAAC,CAAC,CAAC;SAClB;QACD,MAAM,IAAI,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QACtC,IAAI,IAAI,EAAE;YACR,MAAM,CAAC,GAAI,CAAwB,CAAC,IAA8B,CAAC;YACnE,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC;SAClB;KACF;IAED,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC;AACvC,CAAC"}
|
|
@@ -2,11 +2,12 @@
|
|
|
2
2
|
* Tokenize a SubsystemComponent into a flat token stream for the detail panel.
|
|
3
3
|
*
|
|
4
4
|
* Pipeline: generate declaration string → format with Prettier → tokenize
|
|
5
|
-
* with
|
|
6
|
-
* the entire pipeline (for pre-tokenized data from graphify).
|
|
5
|
+
* with Shiki + Pierre themes. The `component.tokens` field, when present,
|
|
6
|
+
* overrides the entire pipeline (for pre-tokenized data from graphify).
|
|
7
7
|
*
|
|
8
8
|
* This function is async because Prettier's format() is async.
|
|
9
9
|
*/
|
|
10
|
+
import type { PierreSyntaxThemeName } from '../pierre/pierreSyntaxTheme';
|
|
10
11
|
import type { SubsystemComponent, SubsystemDeclToken } from './model';
|
|
11
12
|
/**
|
|
12
13
|
* Tokenize a SubsystemComponent into SubsystemDeclToken[].
|
|
@@ -15,5 +16,5 @@ import type { SubsystemComponent, SubsystemDeclToken } from './model';
|
|
|
15
16
|
* it's returned as-is. Otherwise the pipeline generates a TypeScript
|
|
16
17
|
* declaration string, formats it with Prettier, and tokenizes the output.
|
|
17
18
|
*/
|
|
18
|
-
export declare function tokenizeComponent(component: SubsystemComponent, printWidth?: number): Promise<SubsystemDeclToken[]>;
|
|
19
|
+
export declare function tokenizeComponent(component: SubsystemComponent, printWidth?: number, themeName?: PierreSyntaxThemeName): Promise<SubsystemDeclToken[]>;
|
|
19
20
|
//# sourceMappingURL=tokenizeComponent.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tokenizeComponent.d.ts","sourceRoot":"","sources":["../../src/subsystem/tokenizeComponent.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAyBtE;;;;;;GAMG;AACH,wBAAsB,iBAAiB,
|
|
1
|
+
{"version":3,"file":"tokenizeComponent.d.ts","sourceRoot":"","sources":["../../src/subsystem/tokenizeComponent.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AACzE,OAAO,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAyBtE;;;;;;GAMG;AACH,wBAAsB,iBAAiB,CACrC,SAAS,EAAE,kBAAkB,EAC7B,UAAU,SAAK,EACf,SAAS,GAAE,qBAAqC,GAC/C,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAsB/B"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
* Tokenize a SubsystemComponent into a flat token stream for the detail panel.
|
|
3
3
|
*
|
|
4
4
|
* Pipeline: generate declaration string → format with Prettier → tokenize
|
|
5
|
-
* with
|
|
6
|
-
* the entire pipeline (for pre-tokenized data from graphify).
|
|
5
|
+
* with Shiki + Pierre themes. The `component.tokens` field, when present,
|
|
6
|
+
* overrides the entire pipeline (for pre-tokenized data from graphify).
|
|
7
7
|
*
|
|
8
8
|
* This function is async because Prettier's format() is async.
|
|
9
9
|
*/
|
|
@@ -32,7 +32,7 @@ async function getPrettier() {
|
|
|
32
32
|
* it's returned as-is. Otherwise the pipeline generates a TypeScript
|
|
33
33
|
* declaration string, formats it with Prettier, and tokenizes the output.
|
|
34
34
|
*/
|
|
35
|
-
export async function tokenizeComponent(component, printWidth = 80) {
|
|
35
|
+
export async function tokenizeComponent(component, printWidth = 80, themeName = 'pierre-dark') {
|
|
36
36
|
// Pre-tokenized tokens from the wire take precedence.
|
|
37
37
|
if (component.tokens)
|
|
38
38
|
return component.tokens;
|
|
@@ -40,13 +40,8 @@ export async function tokenizeComponent(component, printWidth = 80) {
|
|
|
40
40
|
const kind = component.detail?.kind ?? component.kind;
|
|
41
41
|
if (kind === 'external') {
|
|
42
42
|
const label = component.detail?.kind === 'external' ? component.detail.label : component.name;
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
{ text: ' ', kind: 'punctuation' },
|
|
46
|
-
{ text: "'", kind: 'punctuation' },
|
|
47
|
-
{ text: label, kind: 'string' },
|
|
48
|
-
{ text: "'", kind: 'punctuation' },
|
|
49
|
-
];
|
|
43
|
+
const escaped = label.replace(/\\/g, '\\\\').replace(/'/g, "\\'");
|
|
44
|
+
return tokenizeFormatted(`external '${escaped}'`, themeName);
|
|
50
45
|
}
|
|
51
46
|
// Generate → format → tokenize
|
|
52
47
|
const raw = generateDeclarationString(component);
|
|
@@ -56,6 +51,6 @@ export async function tokenizeComponent(component, printWidth = 80) {
|
|
|
56
51
|
plugins: [plugins.typescript, plugins.estree],
|
|
57
52
|
printWidth,
|
|
58
53
|
});
|
|
59
|
-
return tokenizeFormatted(formatted);
|
|
54
|
+
return tokenizeFormatted(formatted, themeName);
|
|
60
55
|
}
|
|
61
56
|
//# sourceMappingURL=tokenizeComponent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tokenizeComponent.js","sourceRoot":"","sources":["../../src/subsystem/tokenizeComponent.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;
|
|
1
|
+
{"version":3,"file":"tokenizeComponent.js","sourceRoot":"","sources":["../../src/subsystem/tokenizeComponent.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,OAAO,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,8CAA8C;AAC9C,IAAI,eAAe,GAAyD,IAAI,CAAC;AACjF,IAAI,sBAAsB,GAGd,IAAI,CAAC;AAEjB,KAAK,UAAU,WAAW;IACxB,IAAI,CAAC,eAAe,EAAE;QACpB,eAAe,GAAG,MAAM,CAAC,qBAAqB,CAAC,CAAC;KACjD;IACD,IAAI,CAAC,sBAAsB,EAAE;QAC3B,sBAAsB,GAAG,OAAO,CAAC,GAAG,CAAC;YACnC,MAAM,CAAC,6BAA6B,CAAC;YACrC,MAAM,CAAC,yBAAyB,CAAC;SAClC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;KAC7D;IACD,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC,eAAe,EAAE,sBAAsB,CAAC,CAAC,CAAC;IACzF,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC;AAC/B,CAAC;AAED;;;;;;GAMG;AACH,MAAM,CAAC,KAAK,UAAU,iBAAiB,CACrC,SAA6B,EAC7B,UAAU,GAAG,EAAE,EACf,YAAmC,aAAa;IAEhD,sDAAsD;IACtD,IAAI,SAAS,CAAC,MAAM;QAAE,OAAO,SAAS,CAAC,MAAM,CAAC;IAE9C,yDAAyD;IACzD,MAAM,IAAI,GAAG,SAAS,CAAC,MAAM,EAAE,IAAI,IAAI,SAAS,CAAC,IAAI,CAAC;IACtD,IAAI,IAAI,KAAK,UAAU,EAAE;QACvB,MAAM,KAAK,GAAG,SAAS,CAAC,MAAM,EAAE,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC;QAC9F,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QAClE,OAAO,iBAAiB,CAAC,aAAa,OAAO,GAAG,EAAE,SAAS,CAAC,CAAC;KAC9D;IAED,+BAA+B;IAC/B,MAAM,GAAG,GAAG,yBAAyB,CAAC,SAAS,CAAC,CAAC;IACjD,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,MAAM,WAAW,EAAE,CAAC;IAClD,MAAM,SAAS,GAAG,MAAM,QAAQ,CAAC,MAAM,CAAC,GAAG,EAAE;QAC3C,MAAM,EAAE,YAAY;QACpB,OAAO,EAAE,CAAC,OAAO,CAAC,UAAU,EAAE,OAAO,CAAC,MAAM,CAAC;QAC7C,UAAU;KACX,CAAC,CAAC;IAEH,OAAO,iBAAiB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;AACjD,CAAC"}
|
|
@@ -1,15 +1,12 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Tokenize a formatted TypeScript declaration string into SubsystemDeclToken[]
|
|
3
|
-
* using
|
|
4
|
-
*
|
|
5
|
-
* highlight.js produces HTML with `<span class="hljs-...">` wrappers. This
|
|
6
|
-
* module parses that output into our token format so the renderer stays
|
|
7
|
-
* language-agnostic.
|
|
3
|
+
* using Shiki + Pierre themes (same highlighter stack as @pierre/diffs).
|
|
8
4
|
*/
|
|
5
|
+
import type { PierreSyntaxThemeName } from '../pierre/pierreSyntaxTheme';
|
|
9
6
|
import type { SubsystemDeclToken } from './model';
|
|
10
7
|
/**
|
|
11
8
|
* Tokenize a formatted TypeScript string into SubsystemDeclToken[].
|
|
12
9
|
* The input should already be formatted by Prettier (or be valid TS).
|
|
13
10
|
*/
|
|
14
|
-
export declare function tokenizeFormatted(code: string): SubsystemDeclToken[]
|
|
11
|
+
export declare function tokenizeFormatted(code: string, themeName?: PierreSyntaxThemeName): Promise<SubsystemDeclToken[]>;
|
|
15
12
|
//# sourceMappingURL=tokenizeFormatted.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tokenizeFormatted.d.ts","sourceRoot":"","sources":["../../src/subsystem/tokenizeFormatted.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"tokenizeFormatted.d.ts","sourceRoot":"","sources":["../../src/subsystem/tokenizeFormatted.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AACzE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,MAAM,EACZ,SAAS,GAAE,qBAAqC,GAC/C,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAE/B"}
|
|
@@ -1,84 +1,13 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Tokenize a formatted TypeScript declaration string into SubsystemDeclToken[]
|
|
3
|
-
* using
|
|
4
|
-
*
|
|
5
|
-
* highlight.js produces HTML with `<span class="hljs-...">` wrappers. This
|
|
6
|
-
* module parses that output into our token format so the renderer stays
|
|
7
|
-
* language-agnostic.
|
|
3
|
+
* using Shiki + Pierre themes (same highlighter stack as @pierre/diffs).
|
|
8
4
|
*/
|
|
9
|
-
import
|
|
10
|
-
import typescript from 'highlight.js/lib/languages/typescript';
|
|
11
|
-
// Register once — safe to call multiple times.
|
|
12
|
-
try {
|
|
13
|
-
hljs.registerLanguage('typescript', typescript);
|
|
14
|
-
}
|
|
15
|
-
catch {
|
|
16
|
-
// Already registered.
|
|
17
|
-
}
|
|
18
|
-
// hljs class → our token kind
|
|
19
|
-
const CLASS_MAP = {
|
|
20
|
-
'hljs-keyword': 'keyword',
|
|
21
|
-
'hljs-title': 'name',
|
|
22
|
-
'hljs-title.function_': 'name',
|
|
23
|
-
'hljs-params': 'member',
|
|
24
|
-
'hljs-type': 'type',
|
|
25
|
-
'hljs-built_in': 'type',
|
|
26
|
-
'hljs-string': 'string',
|
|
27
|
-
'hljs-number': 'string',
|
|
28
|
-
'hljs-comment': 'punctuation',
|
|
29
|
-
};
|
|
5
|
+
import { tokenizeWithPierreSyntax } from '../pierre/syntaxTokens';
|
|
30
6
|
/**
|
|
31
7
|
* Tokenize a formatted TypeScript string into SubsystemDeclToken[].
|
|
32
8
|
* The input should already be formatted by Prettier (or be valid TS).
|
|
33
9
|
*/
|
|
34
|
-
export function tokenizeFormatted(code) {
|
|
35
|
-
|
|
36
|
-
return parseHighlightedHtml(result.value);
|
|
37
|
-
}
|
|
38
|
-
// ---------------------------------------------------------------------------
|
|
39
|
-
// HTML parser — walks the hljs output and extracts tokens
|
|
40
|
-
// ---------------------------------------------------------------------------
|
|
41
|
-
function unescapeHtml(text) {
|
|
42
|
-
return text
|
|
43
|
-
.replace(/"/g, '"')
|
|
44
|
-
.replace(/</g, '<')
|
|
45
|
-
.replace(/>/g, '>')
|
|
46
|
-
.replace(/&/g, '&')
|
|
47
|
-
.replace(/'/g, "'");
|
|
48
|
-
}
|
|
49
|
-
function parseHighlightedHtml(html) {
|
|
50
|
-
const tokens = [];
|
|
51
|
-
// Regex matches either `<span class="hljs-...">`, `</span>`, or text content.
|
|
52
|
-
const re = /<span class="([^"]+)">|<\/span>|[^<]+/g;
|
|
53
|
-
const classStack = [];
|
|
54
|
-
let match;
|
|
55
|
-
while ((match = re.exec(html)) !== null) {
|
|
56
|
-
const chunk = match[0];
|
|
57
|
-
if (chunk.startsWith('<span')) {
|
|
58
|
-
// Opening tag — push class onto stack.
|
|
59
|
-
classStack.push(match[1]);
|
|
60
|
-
}
|
|
61
|
-
else if (chunk === '</span>') {
|
|
62
|
-
// Closing tag — pop class.
|
|
63
|
-
classStack.pop();
|
|
64
|
-
}
|
|
65
|
-
else {
|
|
66
|
-
// Text content — emit tokens for each line segment.
|
|
67
|
-
const currentClass = classStack[classStack.length - 1] ?? '';
|
|
68
|
-
const kind = CLASS_MAP[currentClass] ?? 'punctuation';
|
|
69
|
-
const text = chunk;
|
|
70
|
-
// Split on newlines so each line becomes its own token set.
|
|
71
|
-
const lines = text.split('\n');
|
|
72
|
-
for (let i = 0; i < lines.length; i++) {
|
|
73
|
-
if (i > 0) {
|
|
74
|
-
tokens.push({ text: '', kind: 'newline' });
|
|
75
|
-
}
|
|
76
|
-
if (lines[i]) {
|
|
77
|
-
tokens.push({ text: unescapeHtml(lines[i]), kind });
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
return tokens;
|
|
10
|
+
export function tokenizeFormatted(code, themeName = 'pierre-dark') {
|
|
11
|
+
return tokenizeWithPierreSyntax(code, themeName);
|
|
83
12
|
}
|
|
84
13
|
//# sourceMappingURL=tokenizeFormatted.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tokenizeFormatted.js","sourceRoot":"","sources":["../../src/subsystem/tokenizeFormatted.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"tokenizeFormatted.js","sourceRoot":"","sources":["../../src/subsystem/tokenizeFormatted.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAIlE;;;GAGG;AACH,MAAM,UAAU,iBAAiB,CAC/B,IAAY,EACZ,YAAmC,aAAa;IAEhD,OAAO,wBAAwB,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;AACnD,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@principal-ai/principal-view-react",
|
|
3
|
-
"version": "0.16.
|
|
3
|
+
"version": "0.16.56",
|
|
4
4
|
"description": "React components for graph-based principal view framework",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
"build-storybook": "storybook build"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
+
"@pierre/theme": "^2.0.0",
|
|
17
18
|
"@pierre/trees": "1.0.0-beta.6",
|
|
18
19
|
"@xyflow/react": "^12.11.3",
|
|
19
20
|
"elkjs": "^0.12.0",
|
|
@@ -29,6 +30,7 @@
|
|
|
29
30
|
"rehype-sanitize": "^6.0.0",
|
|
30
31
|
"rehype-slug": "^6.0.0",
|
|
31
32
|
"remark-gfm": "^4.0.1",
|
|
33
|
+
"shiki": "^4.0.0",
|
|
32
34
|
"themed-markdown": "^0.1.82",
|
|
33
35
|
"zustand": "4.5.0"
|
|
34
36
|
},
|
package/src/index.ts
CHANGED
|
@@ -318,9 +318,10 @@ export {
|
|
|
318
318
|
} from './subsystem/declarationRef';
|
|
319
319
|
|
|
320
320
|
// Pierre code views (@pierre/diffs wrappers)
|
|
321
|
-
export { PierreFileView, PierreSnippetView, sliceSnippetWindow } from './pierre';
|
|
321
|
+
export { PierreFileView, PierreSnippetView, sliceSnippetWindow, resolvePierreSyntaxThemeName } from './pierre';
|
|
322
322
|
export type {
|
|
323
323
|
PierreFileViewProps,
|
|
324
324
|
PierreSnippetViewProps,
|
|
325
325
|
SnippetSlice,
|
|
326
|
+
PierreSyntaxThemeName,
|
|
326
327
|
} from './pierre';
|
package/src/pierre/index.ts
CHANGED
|
@@ -4,3 +4,8 @@ export { PierreSnippetView } from './PierreSnippetView';
|
|
|
4
4
|
export type { PierreSnippetViewProps } from './PierreSnippetView';
|
|
5
5
|
export { sliceSnippetWindow } from './sliceSnippet';
|
|
6
6
|
export type { SnippetSlice } from './sliceSnippet';
|
|
7
|
+
export {
|
|
8
|
+
PIERRE_DEFAULT_SYNTAX_THEMES,
|
|
9
|
+
resolvePierreSyntaxThemeName,
|
|
10
|
+
} from './pierreSyntaxTheme';
|
|
11
|
+
export type { PierreSyntaxThemeName } from './pierreSyntaxTheme';
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Pierre syntax theme names — aligned with @pierre/diffs DEFAULT_THEMES.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
export type PierreSyntaxThemeName = 'pierre-dark' | 'pierre-light';
|
|
6
|
+
|
|
7
|
+
export const PIERRE_DEFAULT_SYNTAX_THEMES = {
|
|
8
|
+
dark: 'pierre-dark',
|
|
9
|
+
light: 'pierre-light',
|
|
10
|
+
} as const satisfies Record<'dark' | 'light', PierreSyntaxThemeName>;
|
|
11
|
+
|
|
12
|
+
/** Pick pierre-dark / pierre-light to match Pierre file views and industry-theme mode. */
|
|
13
|
+
export function resolvePierreSyntaxThemeName(mode?: string): PierreSyntaxThemeName {
|
|
14
|
+
if (mode === 'light') return PIERRE_DEFAULT_SYNTAX_THEMES.light;
|
|
15
|
+
if (mode === 'dark') return PIERRE_DEFAULT_SYNTAX_THEMES.dark;
|
|
16
|
+
if (
|
|
17
|
+
typeof window !== 'undefined' &&
|
|
18
|
+
window.matchMedia('(prefers-color-scheme: light)').matches
|
|
19
|
+
) {
|
|
20
|
+
return PIERRE_DEFAULT_SYNTAX_THEMES.light;
|
|
21
|
+
}
|
|
22
|
+
return PIERRE_DEFAULT_SYNTAX_THEMES.dark;
|
|
23
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { describe, expect, test } from 'bun:test';
|
|
2
|
+
import { tokenizeWithPierreSyntax } from './syntaxTokens';
|
|
3
|
+
|
|
4
|
+
describe('tokenizeWithPierreSyntax', () => {
|
|
5
|
+
test('assigns Pierre dark keyword and type colors', async () => {
|
|
6
|
+
const tokens = await tokenizeWithPierreSyntax(
|
|
7
|
+
'export class Foo extends Bar {}',
|
|
8
|
+
'pierre-dark',
|
|
9
|
+
);
|
|
10
|
+
const joined = tokens.filter((t) => t.kind !== 'newline').map((t) => t.text).join('');
|
|
11
|
+
expect(joined).toBe('export class Foo extends Bar {}');
|
|
12
|
+
|
|
13
|
+
const exportTok = tokens.find((t) => t.text === 'export');
|
|
14
|
+
const classTok = tokens.find((t) => t.text === 'class');
|
|
15
|
+
const fooTok = tokens.find((t) => t.text === 'Foo');
|
|
16
|
+
const barTok = tokens.find((t) => t.text === 'Bar');
|
|
17
|
+
|
|
18
|
+
expect(exportTok?.color).toBe('#ff678d');
|
|
19
|
+
expect(classTok?.color).toBe('#d568ea');
|
|
20
|
+
expect(fooTok?.color).toBe('#d568ea');
|
|
21
|
+
expect(barTok?.color).toBe('#d568ea');
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
test('light theme resolves different palette than dark', async () => {
|
|
25
|
+
const [dark, light] = await Promise.all([
|
|
26
|
+
tokenizeWithPierreSyntax('const x = 1', 'pierre-dark'),
|
|
27
|
+
tokenizeWithPierreSyntax('const x = 1', 'pierre-light'),
|
|
28
|
+
]);
|
|
29
|
+
const darkConst = dark.find((t) => t.text === 'const');
|
|
30
|
+
const lightConst = light.find((t) => t.text === 'const');
|
|
31
|
+
expect(darkConst?.color).toBeTruthy();
|
|
32
|
+
expect(lightConst?.color).toBeTruthy();
|
|
33
|
+
expect(darkConst?.color).not.toBe(lightConst?.color);
|
|
34
|
+
});
|
|
35
|
+
});
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Tokenize TypeScript with Shiki + Pierre themes — same stack as @pierre/diffs.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
import { createHighlighter, type Highlighter, type ThemeInput } from 'shiki';
|
|
6
|
+
import pierreDark from '@pierre/theme/pierre-dark';
|
|
7
|
+
import pierreLight from '@pierre/theme/pierre-light';
|
|
8
|
+
import type { SubsystemDeclToken } from '../subsystem/model';
|
|
9
|
+
import type { PierreSyntaxThemeName } from './pierreSyntaxTheme';
|
|
10
|
+
|
|
11
|
+
let highlighterPromise: Promise<Highlighter> | null = null;
|
|
12
|
+
|
|
13
|
+
async function getPierreHighlighter(): Promise<Highlighter> {
|
|
14
|
+
if (!highlighterPromise) {
|
|
15
|
+
highlighterPromise = createHighlighter({
|
|
16
|
+
themes: [
|
|
17
|
+
pierreDark as unknown as ThemeInput,
|
|
18
|
+
pierreLight as unknown as ThemeInput,
|
|
19
|
+
],
|
|
20
|
+
langs: ['typescript'],
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
return highlighterPromise;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
function normalizeColor(color?: string): string | undefined {
|
|
27
|
+
return color?.toLowerCase();
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/**
|
|
31
|
+
* Tokenize formatted TypeScript using Pierre's Shiki themes.
|
|
32
|
+
* Each token carries the resolved foreground color Pierre would render.
|
|
33
|
+
*/
|
|
34
|
+
export async function tokenizeWithPierreSyntax(
|
|
35
|
+
code: string,
|
|
36
|
+
themeName: PierreSyntaxThemeName,
|
|
37
|
+
): Promise<SubsystemDeclToken[]> {
|
|
38
|
+
const highlighter = await getPierreHighlighter();
|
|
39
|
+
const { tokens } = highlighter.codeToTokens(code, {
|
|
40
|
+
lang: 'typescript',
|
|
41
|
+
theme: themeName,
|
|
42
|
+
});
|
|
43
|
+
|
|
44
|
+
const result: SubsystemDeclToken[] = [];
|
|
45
|
+
for (let lineIndex = 0; lineIndex < tokens.length; lineIndex++) {
|
|
46
|
+
const line = tokens[lineIndex];
|
|
47
|
+
for (const token of line) {
|
|
48
|
+
if (!token.content) continue;
|
|
49
|
+
result.push({
|
|
50
|
+
text: token.content,
|
|
51
|
+
kind: 'punctuation',
|
|
52
|
+
color: normalizeColor(token.color),
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
if (lineIndex < tokens.length - 1) {
|
|
56
|
+
result.push({ text: '', kind: 'newline' });
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
return result;
|
|
60
|
+
}
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
import { useEffect, useRef, useState, type ReactNode } from 'react';
|
|
10
10
|
import { AlignLeft, FileText, ShieldCheck } from 'lucide-react';
|
|
11
11
|
import { useTheme } from '@principal-ade/industry-theme';
|
|
12
|
+
import { resolvePierreSyntaxThemeName } from '../pierre/pierreSyntaxTheme';
|
|
12
13
|
import {
|
|
13
14
|
KIND_COLOR,
|
|
14
15
|
formatPurl,
|
|
@@ -256,7 +257,8 @@ export function ComponentDeclaration({
|
|
|
256
257
|
onVerify,
|
|
257
258
|
verification,
|
|
258
259
|
}: ComponentDeclarationProps) {
|
|
259
|
-
const { theme } = useTheme();
|
|
260
|
+
const { theme, mode } = useTheme();
|
|
261
|
+
const pierreSyntaxTheme = resolvePierreSyntaxThemeName(mode);
|
|
260
262
|
const [fileHovered, setFileHovered] = useState(false);
|
|
261
263
|
const [showFile, setShowFile] = useState(false);
|
|
262
264
|
const [showPurpose, setShowPurpose] = useState(false);
|
|
@@ -274,6 +276,8 @@ export function ComponentDeclaration({
|
|
|
274
276
|
string: theme.colors.success,
|
|
275
277
|
newline: '',
|
|
276
278
|
};
|
|
279
|
+
/** Fallback when wire tokens omit Shiki colors. */
|
|
280
|
+
const declarationTextColor = muted;
|
|
277
281
|
|
|
278
282
|
const declarationStartLine =
|
|
279
283
|
component.declarationRef?.startLine ??
|
|
@@ -305,10 +309,26 @@ export function ComponentDeclaration({
|
|
|
305
309
|
</DetailLink>
|
|
306
310
|
) : null;
|
|
307
311
|
|
|
308
|
-
const line = (
|
|
312
|
+
const line = (
|
|
313
|
+
children: ReactNode,
|
|
314
|
+
key?: string,
|
|
315
|
+
indent?: boolean | number,
|
|
316
|
+
wrap: 'pre' | 'pre-wrap' | 'normal' = 'pre-wrap',
|
|
317
|
+
) => {
|
|
309
318
|
const paddingLeft = typeof indent === 'number' ? indent : indent ? 16 : 0;
|
|
310
319
|
return (
|
|
311
|
-
<div
|
|
320
|
+
<div
|
|
321
|
+
key={key}
|
|
322
|
+
style={{
|
|
323
|
+
display: 'flex',
|
|
324
|
+
alignItems: wrap === 'normal' ? 'flex-start' : 'center',
|
|
325
|
+
whiteSpace: wrap,
|
|
326
|
+
overflowWrap: 'anywhere',
|
|
327
|
+
minWidth: 0,
|
|
328
|
+
minHeight: 18,
|
|
329
|
+
...(paddingLeft ? { paddingLeft } : {}),
|
|
330
|
+
}}
|
|
331
|
+
>
|
|
312
332
|
{children}
|
|
313
333
|
</div>
|
|
314
334
|
);
|
|
@@ -327,7 +347,8 @@ export function ComponentDeclaration({
|
|
|
327
347
|
fontFamily: theme.fonts.body,
|
|
328
348
|
fontSize: theme.fontSizes[1],
|
|
329
349
|
lineHeight: 1.5,
|
|
330
|
-
|
|
350
|
+
minWidth: 0,
|
|
351
|
+
flex: 1,
|
|
331
352
|
} as const;
|
|
332
353
|
|
|
333
354
|
const lines: ReactNode[] = [];
|
|
@@ -540,13 +561,13 @@ export function ComponentDeclaration({
|
|
|
540
561
|
return;
|
|
541
562
|
}
|
|
542
563
|
let cancelled = false;
|
|
543
|
-
tokenizeComponent(component, printWidth).then((t) => {
|
|
564
|
+
tokenizeComponent(component, printWidth, pierreSyntaxTheme).then((t) => {
|
|
544
565
|
if (!cancelled) setTokens(t);
|
|
545
566
|
});
|
|
546
567
|
return () => {
|
|
547
568
|
cancelled = true;
|
|
548
569
|
};
|
|
549
|
-
}, [component, printWidth]);
|
|
570
|
+
}, [component, printWidth, pierreSyntaxTheme]);
|
|
550
571
|
const declLines: ReactNode[][] = [[]];
|
|
551
572
|
let di = 0;
|
|
552
573
|
for (const tok of tokens) {
|
|
@@ -556,7 +577,10 @@ export function ComponentDeclaration({
|
|
|
556
577
|
continue;
|
|
557
578
|
}
|
|
558
579
|
declLines[di].push(
|
|
559
|
-
<span
|
|
580
|
+
<span
|
|
581
|
+
key={`${di}-${declLines[di].length}`}
|
|
582
|
+
style={{ color: tok.color ?? tokenColor[tok.kind] ?? declarationTextColor }}
|
|
583
|
+
>
|
|
560
584
|
{tok.text}
|
|
561
585
|
</span>,
|
|
562
586
|
);
|
|
@@ -564,21 +588,33 @@ export function ComponentDeclaration({
|
|
|
564
588
|
for (let li = 0; li < declLines.length; li++) {
|
|
565
589
|
if (declLines[li].length === 0) continue;
|
|
566
590
|
lines.push(
|
|
567
|
-
<div
|
|
591
|
+
<div
|
|
592
|
+
key={`decl-${li}`}
|
|
593
|
+
style={{
|
|
594
|
+
display: 'flex',
|
|
595
|
+
alignItems: 'center',
|
|
596
|
+
whiteSpace: 'pre-wrap',
|
|
597
|
+
overflowWrap: 'anywhere',
|
|
598
|
+
minWidth: 0,
|
|
599
|
+
minHeight: 18,
|
|
600
|
+
}}
|
|
601
|
+
>
|
|
568
602
|
{declLines[li]}
|
|
569
603
|
</div>,
|
|
570
604
|
);
|
|
571
605
|
}
|
|
572
606
|
|
|
573
607
|
if (showPurpose && component.purpose) {
|
|
574
|
-
lines.push(line(<div style={{ height: 6 }} />, 'purpose-gap'));
|
|
608
|
+
lines.push(line(<div style={{ height: 6 }} />, 'purpose-gap', false, 'normal'));
|
|
575
609
|
component.purpose.split('\n').forEach((purposeLine, i) =>
|
|
576
610
|
lines.push(
|
|
577
611
|
line(
|
|
578
|
-
<span style={
|
|
612
|
+
<span style={purposeStyle} key={`purpose${i}`}>
|
|
579
613
|
{purposeLine.trim()}
|
|
580
614
|
</span>,
|
|
581
615
|
`purpose${i}`,
|
|
616
|
+
false,
|
|
617
|
+
'normal',
|
|
582
618
|
),
|
|
583
619
|
),
|
|
584
620
|
);
|
|
@@ -588,14 +624,16 @@ export function ComponentDeclaration({
|
|
|
588
624
|
<div
|
|
589
625
|
ref={containerRef}
|
|
590
626
|
style={{
|
|
627
|
+
width: '100%',
|
|
628
|
+
minWidth: 0,
|
|
629
|
+
boxSizing: 'border-box',
|
|
591
630
|
background: theme.colors.backgroundSecondary,
|
|
592
631
|
padding: '10px 12px',
|
|
593
632
|
fontFamily: theme.fonts.monospace,
|
|
594
633
|
fontSize: theme.fontSizes[1],
|
|
595
634
|
lineHeight: 1.7,
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
: { overflowX: 'auto' }),
|
|
635
|
+
overflowWrap: 'anywhere',
|
|
636
|
+
...(maxWidth != null ? { maxWidth } : {}),
|
|
599
637
|
}}
|
|
600
638
|
>
|
|
601
639
|
{lines}
|
|
@@ -734,7 +734,7 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
|
|
|
734
734
|
top: 10,
|
|
735
735
|
right: 10,
|
|
736
736
|
zIndex: 8,
|
|
737
|
-
|
|
737
|
+
width: 'min(560px, 70%)',
|
|
738
738
|
maxHeight: '46%',
|
|
739
739
|
overflowY: 'auto',
|
|
740
740
|
background: theme.colors.background,
|
package/src/subsystem/model.ts
CHANGED
|
@@ -45,6 +45,8 @@ export type SubsystemDeclTokenKind =
|
|
|
45
45
|
export interface SubsystemDeclToken {
|
|
46
46
|
text: string;
|
|
47
47
|
kind: SubsystemDeclTokenKind;
|
|
48
|
+
/** Shiki/Pierre foreground when tokenized client-side; omitted on legacy wire tokens. */
|
|
49
|
+
color?: string;
|
|
48
50
|
}
|
|
49
51
|
|
|
50
52
|
export type SubsystemEdgeMechanism =
|
|
@@ -2,12 +2,13 @@
|
|
|
2
2
|
* Tokenize a SubsystemComponent into a flat token stream for the detail panel.
|
|
3
3
|
*
|
|
4
4
|
* Pipeline: generate declaration string → format with Prettier → tokenize
|
|
5
|
-
* with
|
|
6
|
-
* the entire pipeline (for pre-tokenized data from graphify).
|
|
5
|
+
* with Shiki + Pierre themes. The `component.tokens` field, when present,
|
|
6
|
+
* overrides the entire pipeline (for pre-tokenized data from graphify).
|
|
7
7
|
*
|
|
8
8
|
* This function is async because Prettier's format() is async.
|
|
9
9
|
*/
|
|
10
10
|
|
|
11
|
+
import type { PierreSyntaxThemeName } from '../pierre/pierreSyntaxTheme';
|
|
11
12
|
import type { SubsystemComponent, SubsystemDeclToken } from './model';
|
|
12
13
|
import { generateDeclarationString } from './formatDeclaration';
|
|
13
14
|
import { tokenizeFormatted } from './tokenizeFormatted';
|
|
@@ -40,7 +41,11 @@ async function getPrettier() {
|
|
|
40
41
|
* it's returned as-is. Otherwise the pipeline generates a TypeScript
|
|
41
42
|
* declaration string, formats it with Prettier, and tokenizes the output.
|
|
42
43
|
*/
|
|
43
|
-
export async function tokenizeComponent(
|
|
44
|
+
export async function tokenizeComponent(
|
|
45
|
+
component: SubsystemComponent,
|
|
46
|
+
printWidth = 80,
|
|
47
|
+
themeName: PierreSyntaxThemeName = 'pierre-dark',
|
|
48
|
+
): Promise<SubsystemDeclToken[]> {
|
|
44
49
|
// Pre-tokenized tokens from the wire take precedence.
|
|
45
50
|
if (component.tokens) return component.tokens;
|
|
46
51
|
|
|
@@ -48,13 +53,8 @@ export async function tokenizeComponent(component: SubsystemComponent, printWidt
|
|
|
48
53
|
const kind = component.detail?.kind ?? component.kind;
|
|
49
54
|
if (kind === 'external') {
|
|
50
55
|
const label = component.detail?.kind === 'external' ? component.detail.label : component.name;
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
{ text: ' ', kind: 'punctuation' },
|
|
54
|
-
{ text: "'", kind: 'punctuation' },
|
|
55
|
-
{ text: label, kind: 'string' },
|
|
56
|
-
{ text: "'", kind: 'punctuation' },
|
|
57
|
-
];
|
|
56
|
+
const escaped = label.replace(/\\/g, '\\\\').replace(/'/g, "\\'");
|
|
57
|
+
return tokenizeFormatted(`external '${escaped}'`, themeName);
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
// Generate → format → tokenize
|
|
@@ -66,5 +66,5 @@ export async function tokenizeComponent(component: SubsystemComponent, printWidt
|
|
|
66
66
|
printWidth,
|
|
67
67
|
});
|
|
68
68
|
|
|
69
|
-
return tokenizeFormatted(formatted);
|
|
69
|
+
return tokenizeFormatted(formatted, themeName);
|
|
70
70
|
}
|