@crownpeak/dqm-react-component 1.0.1 → 1.2.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 (178) hide show
  1. package/CHANGELOG.md +41 -0
  2. package/README.md +125 -23
  3. package/dist/DQMSidebar.d.ts.map +1 -1
  4. package/dist/ErrorBoundary.d.ts.map +1 -1
  5. package/dist/__tests__/setup.d.ts +1 -0
  6. package/dist/__tests__/setup.d.ts.map +1 -0
  7. package/dist/__tests__/utils.d.ts +145 -0
  8. package/dist/__tests__/utils.d.ts.map +1 -0
  9. package/dist/auth-ui/assets/index-YKFZYENy.js +158 -0
  10. package/dist/auth-ui/index.html +1 -1
  11. package/dist/components/auth/DQMLogin.d.ts.map +1 -1
  12. package/dist/components/auth/index.d.ts +0 -1
  13. package/dist/components/auth/index.d.ts.map +1 -1
  14. package/dist/components/cards/AISummaryCard.d.ts +2 -0
  15. package/dist/components/cards/AISummaryCard.d.ts.map +1 -0
  16. package/dist/components/cards/index.d.ts +1 -0
  17. package/dist/components/cards/index.d.ts.map +1 -1
  18. package/dist/components/common/LanguageSwitch.d.ts +5 -0
  19. package/dist/components/common/LanguageSwitch.d.ts.map +1 -0
  20. package/dist/components/common/LanguageSwitchBase.d.ts +16 -0
  21. package/dist/components/common/LanguageSwitchBase.d.ts.map +1 -0
  22. package/dist/components/common/index.d.ts +1 -0
  23. package/dist/components/common/index.d.ts.map +1 -1
  24. package/dist/components/modals/AISettingsDialog.d.ts +61 -0
  25. package/dist/components/modals/AISettingsDialog.d.ts.map +1 -0
  26. package/dist/components/modals/HighlightModal.d.ts +45 -0
  27. package/dist/components/modals/HighlightModal.d.ts.map +1 -0
  28. package/dist/components/modals/LoginOverlay.d.ts +22 -0
  29. package/dist/components/modals/LoginOverlay.d.ts.map +1 -0
  30. package/dist/components/modals/index.d.ts +9 -0
  31. package/dist/components/modals/index.d.ts.map +1 -0
  32. package/dist/components/renderers/BrowserViewRenderer.d.ts.map +1 -1
  33. package/dist/components/renderers/ShadowDOMRenderer.d.ts.map +1 -1
  34. package/dist/components/sidebar/CloseButton.d.ts +6 -0
  35. package/dist/components/sidebar/CloseButton.d.ts.map +1 -0
  36. package/dist/components/sidebar/SidebarContent.d.ts.map +1 -1
  37. package/dist/components/sidebar/SidebarFooter.d.ts.map +1 -1
  38. package/dist/components/sidebar/SidebarHeader.d.ts.map +1 -1
  39. package/dist/components/sidebar/SidebarSkeleton.d.ts.map +1 -1
  40. package/dist/components/sidebar/StyledDrawer.d.ts +6 -1
  41. package/dist/components/sidebar/StyledDrawer.d.ts.map +1 -1
  42. package/dist/components/sidebar/StyledFab.d.ts +4 -1
  43. package/dist/components/sidebar/StyledFab.d.ts.map +1 -1
  44. package/dist/components/sidebar/index.d.ts +1 -0
  45. package/dist/components/sidebar/index.d.ts.map +1 -1
  46. package/dist/context/ai/AIContext.d.ts +13 -0
  47. package/dist/context/ai/AIContext.d.ts.map +1 -0
  48. package/dist/context/ai/index.d.ts +12 -0
  49. package/dist/context/ai/index.d.ts.map +1 -0
  50. package/dist/context/ai/types.d.ts +161 -0
  51. package/dist/context/ai/types.d.ts.map +1 -0
  52. package/dist/context/ai/useAIEngine.d.ts +10 -0
  53. package/dist/context/ai/useAIEngine.d.ts.map +1 -0
  54. package/dist/context/ai/useAISummary.d.ts +10 -0
  55. package/dist/context/ai/useAISummary.d.ts.map +1 -0
  56. package/dist/context/ai/useAITranslation.d.ts +10 -0
  57. package/dist/context/ai/useAITranslation.d.ts.map +1 -0
  58. package/dist/context/ai/useTranslationCache.d.ts +9 -0
  59. package/dist/context/ai/useTranslationCache.d.ts.map +1 -0
  60. package/dist/dqm-widget.d.ts +107 -0
  61. package/dist/dqm-widget.esm.js +516 -0
  62. package/dist/dqm-widget.iife.js +183 -0
  63. package/dist/hooks/index.d.ts +10 -0
  64. package/dist/hooks/index.d.ts.map +1 -0
  65. package/dist/hooks/useAnalysis.d.ts +43 -0
  66. package/dist/hooks/useAnalysis.d.ts.map +1 -0
  67. package/dist/hooks/useAuthentication.d.ts +49 -0
  68. package/dist/hooks/useAuthentication.d.ts.map +1 -0
  69. package/dist/hooks/useHighlightActions.d.ts +37 -0
  70. package/dist/hooks/useHighlightActions.d.ts.map +1 -0
  71. package/dist/hooks/useHighlights.d.ts +72 -0
  72. package/dist/hooks/useHighlights.d.ts.map +1 -0
  73. package/dist/html-pages/DQMWidget.d.ts +36 -0
  74. package/dist/html-pages/DQMWidget.d.ts.map +1 -0
  75. package/dist/html-pages/index.d.ts +32 -0
  76. package/dist/html-pages/index.d.ts.map +1 -0
  77. package/dist/i18n/auth/de.d.ts +25 -0
  78. package/dist/i18n/auth/de.d.ts.map +1 -0
  79. package/dist/i18n/auth/en.d.ts +26 -0
  80. package/dist/i18n/auth/en.d.ts.map +1 -0
  81. package/dist/i18n/auth/es.d.ts +25 -0
  82. package/dist/i18n/auth/es.d.ts.map +1 -0
  83. package/dist/i18n/auth/index.d.ts +8 -0
  84. package/dist/i18n/auth/index.d.ts.map +1 -0
  85. package/dist/i18n/common/de.d.ts +18 -0
  86. package/dist/i18n/common/de.d.ts.map +1 -0
  87. package/dist/i18n/common/en.d.ts +19 -0
  88. package/dist/i18n/common/en.d.ts.map +1 -0
  89. package/dist/i18n/common/es.d.ts +18 -0
  90. package/dist/i18n/common/es.d.ts.map +1 -0
  91. package/dist/i18n/common/index.d.ts +8 -0
  92. package/dist/i18n/common/index.d.ts.map +1 -0
  93. package/dist/i18n/demo/de.d.ts +104 -0
  94. package/dist/i18n/demo/de.d.ts.map +1 -0
  95. package/dist/i18n/demo/en.d.ts +105 -0
  96. package/dist/i18n/demo/en.d.ts.map +1 -0
  97. package/dist/i18n/demo/es.d.ts +104 -0
  98. package/dist/i18n/demo/es.d.ts.map +1 -0
  99. package/dist/i18n/demo/index.d.ts +8 -0
  100. package/dist/i18n/demo/index.d.ts.map +1 -0
  101. package/dist/i18n/index.d.ts +673 -0
  102. package/dist/i18n/index.d.ts.map +1 -0
  103. package/dist/i18n/sidebar/de.d.ts +89 -0
  104. package/dist/i18n/sidebar/de.d.ts.map +1 -0
  105. package/dist/i18n/sidebar/en.d.ts +90 -0
  106. package/dist/i18n/sidebar/en.d.ts.map +1 -0
  107. package/dist/i18n/sidebar/es.d.ts +89 -0
  108. package/dist/i18n/sidebar/es.d.ts.map +1 -0
  109. package/dist/i18n/sidebar/index.d.ts +8 -0
  110. package/dist/i18n/sidebar/index.d.ts.map +1 -0
  111. package/dist/i18n.d.ts +8 -0
  112. package/dist/i18n.d.ts.map +1 -0
  113. package/dist/index.cjs +61 -31
  114. package/dist/index.cjs.map +1 -1
  115. package/dist/index.d.ts +9 -1
  116. package/dist/index.d.ts.map +1 -1
  117. package/dist/index.html +498 -0
  118. package/dist/index.js +18006 -7241
  119. package/dist/index.js.map +1 -1
  120. package/dist/locale.d.ts +25 -0
  121. package/dist/locale.d.ts.map +1 -0
  122. package/dist/mocks/browser.d.ts +23 -0
  123. package/dist/mocks/browser.d.ts.map +1 -0
  124. package/dist/mocks/handlers.d.ts +32 -0
  125. package/dist/mocks/handlers.d.ts.map +1 -0
  126. package/dist/mocks/index.d.ts +7 -0
  127. package/dist/mocks/index.d.ts.map +1 -0
  128. package/dist/mocks/server.d.ts +24 -0
  129. package/dist/mocks/server.d.ts.map +1 -0
  130. package/dist/server/routes/auth.js +0 -10
  131. package/dist/server/routes/auth.js.map +1 -1
  132. package/dist/store/api/dqmApi.d.ts +1793 -0
  133. package/dist/store/api/dqmApi.d.ts.map +1 -0
  134. package/dist/store/api/index.d.ts +6 -0
  135. package/dist/store/api/index.d.ts.map +1 -0
  136. package/dist/store/index.d.ts +57 -0
  137. package/dist/store/index.d.ts.map +1 -0
  138. package/dist/store/localeSlice.d.ts +6 -0
  139. package/dist/store/localeSlice.d.ts.map +1 -0
  140. package/dist/store/slices/aiSlice.d.ts +134 -0
  141. package/dist/store/slices/aiSlice.d.ts.map +1 -0
  142. package/dist/store/slices/analysisSlice.d.ts +54 -0
  143. package/dist/store/slices/analysisSlice.d.ts.map +1 -0
  144. package/dist/store/slices/authSlice.d.ts +170 -0
  145. package/dist/store/slices/authSlice.d.ts.map +1 -0
  146. package/dist/store/slices/highlightSlice.d.ts +188 -0
  147. package/dist/store/slices/highlightSlice.d.ts.map +1 -0
  148. package/dist/store/slices/index.d.ts +12 -0
  149. package/dist/store/slices/index.d.ts.map +1 -0
  150. package/dist/types.d.ts +109 -7
  151. package/dist/types.d.ts.map +1 -1
  152. package/dist/utils/aiJsonClient.d.ts +23 -0
  153. package/dist/utils/aiJsonClient.d.ts.map +1 -0
  154. package/dist/utils/colors/GenerateCategoryColors.d.ts.map +1 -1
  155. package/dist/utils/logger.d.ts +107 -0
  156. package/dist/utils/logger.d.ts.map +1 -0
  157. package/dist/utils/openaiJsonClient.d.ts +8 -0
  158. package/dist/utils/openaiJsonClient.d.ts.map +1 -0
  159. package/dist/utils/sanitizeHtmlDocument.d.ts +4 -0
  160. package/dist/utils/sanitizeHtmlDocument.d.ts.map +1 -0
  161. package/dist/utils/secureStorage.d.ts +95 -0
  162. package/dist/utils/secureStorage.d.ts.map +1 -0
  163. package/dist/utils/storage.d.ts.map +1 -1
  164. package/dist/utils/translationCache.d.ts +45 -0
  165. package/dist/utils/translationCache.d.ts.map +1 -0
  166. package/dist/utils/translationUtils.d.ts +52 -0
  167. package/dist/utils/translationUtils.d.ts.map +1 -0
  168. package/dist/utils/useDomPresence.d.ts +210 -0
  169. package/dist/utils/useDomPresence.d.ts.map +1 -0
  170. package/package.json +59 -12
  171. package/AUTHENTICATION.md +0 -281
  172. package/BACKEND-API.md +0 -1829
  173. package/DEVELOPMENT.md +0 -339
  174. package/EXAMPLES.md +0 -194
  175. package/QUICKSTART.md +0 -200
  176. package/dist/auth-ui/assets/index-CczTRrba.js +0 -158
  177. package/dist/components/auth/OAuth2CallbackHandler.d.ts +0 -15
  178. package/dist/components/auth/OAuth2CallbackHandler.d.ts.map +0 -1
package/dist/index.d.ts CHANGED
@@ -1,4 +1,12 @@
1
1
  export { default as DQMSidebar } from './DQMSidebar';
2
2
  export { ErrorBoundary, withErrorBoundary } from './ErrorBoundary';
3
- export type { DQMSidebarProps, ErrorBoundaryProps, AnalysisData, AnalysisState, Checkpoint, DQMConfig, OAuth2Config, AuthMode } from './types';
3
+ export { default as i18n, resolveLanguage } from './i18n';
4
+ export type { AvailableLanguage, TranslationResources } from './i18n';
5
+ export { SUPPORTED_LOCALES, DEFAULT_LOCALE, normalizeLocale } from './locale';
6
+ export type { SupportedLocale } from './locale';
7
+ export type { DQMSidebarProps, ErrorBoundaryProps, AnalysisData, AnalysisState, Checkpoint, DQMConfig, AuthMode, OverlayConfig, OverlayOffsetPosition, TranslationConfig, } from './types';
8
+ export { useOverlayResistant } from './utils/useDomPresence';
9
+ export type { OverlayInfo, OverlayPosition, UseOverlayResistantConfig } from './utils/useDomPresence';
10
+ export { AIProvider, useAI, useTranslationCache, useAIEngine, useAITranslation, useAISummary, } from './context/ai';
11
+ export type { AIContextValue, AIProviderProps, TranslationMode, TranslationState, SummaryState, UseTranslationCacheReturn, UseAIEngineOptions, UseAIEngineReturn, UseAITranslationOptions, UseAITranslationReturn, UseAISummaryOptions, UseAISummaryReturn, SummaryStats, } from './context/ai';
4
12
  //# sourceMappingURL=index.d.ts.map
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGnE,YAAY,EACV,eAAe,EACf,kBAAkB,EAClB,YAAY,EACZ,aAAa,EACb,UAAU,EACV,SAAS,EACT,YAAY,EACZ,QAAQ,EACT,MAAM,SAAS,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGnE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAC1D,YAAY,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAAC;AAGtE,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAC9E,YAAY,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAGhD,YAAY,EACV,eAAe,EACf,kBAAkB,EAClB,YAAY,EACZ,aAAa,EACb,UAAU,EACV,SAAS,EACT,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,iBAAiB,GAClB,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,YAAY,EACV,WAAW,EACX,eAAe,EACf,yBAAyB,EAC1B,MAAM,wBAAwB,CAAC;AAGhC,OAAO,EACL,UAAU,EACV,KAAK,EACL,mBAAmB,EACnB,WAAW,EACX,gBAAgB,EAChB,YAAY,GACb,MAAM,cAAc,CAAC;AACtB,YAAY,EACV,cAAc,EACd,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,YAAY,EACZ,yBAAyB,EACzB,kBAAkB,EAClB,iBAAiB,EACjB,uBAAuB,EACvB,sBAAsB,EACtB,mBAAmB,EACnB,kBAAkB,EAClB,YAAY,GACb,MAAM,cAAc,CAAC"}
package/dist/index.html ADDED
@@ -0,0 +1,498 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Crownpeak DQM React Component - Development</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown-dark.min.css">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
9
+ <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
11
+ <style>
12
+ * {
13
+ box-sizing: border-box;
14
+ margin: 0;
15
+ padding: 0;
16
+ }
17
+
18
+ body {
19
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
20
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
21
+ min-height: 100vh;
22
+ color: #e4e4e7;
23
+ padding: 40px 20px;
24
+ }
25
+
26
+ .container {
27
+ max-width: 900px;
28
+ margin: 0 auto;
29
+ }
30
+
31
+ header {
32
+ text-align: center;
33
+ margin-bottom: 48px;
34
+ }
35
+
36
+ h1 {
37
+ font-size: 2.5rem;
38
+ font-weight: 700;
39
+ margin-bottom: 12px;
40
+ background: linear-gradient(90deg, #60a5fa, #a78bfa);
41
+ -webkit-background-clip: text;
42
+ -webkit-text-fill-color: transparent;
43
+ background-clip: text;
44
+ }
45
+
46
+ .subtitle {
47
+ color: #a1a1aa;
48
+ font-size: 1.1rem;
49
+ }
50
+
51
+ .grid {
52
+ display: grid;
53
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
54
+ gap: 24px;
55
+ margin-bottom: 48px;
56
+ }
57
+
58
+ .card {
59
+ background: rgba(255, 255, 255, 0.05);
60
+ border: 1px solid rgba(255, 255, 255, 0.1);
61
+ border-radius: 16px;
62
+ padding: 24px;
63
+ transition: all 0.3s ease;
64
+ text-decoration: none;
65
+ color: inherit;
66
+ display: block;
67
+ }
68
+
69
+ .card:hover {
70
+ background: rgba(255, 255, 255, 0.1);
71
+ border-color: rgba(96, 165, 250, 0.5);
72
+ transform: translateY(-4px);
73
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
74
+ }
75
+
76
+ .card-icon {
77
+ font-size: 2.5rem;
78
+ margin-bottom: 16px;
79
+ }
80
+
81
+ .card h2 {
82
+ font-size: 1.25rem;
83
+ font-weight: 600;
84
+ margin-bottom: 8px;
85
+ color: #f4f4f5;
86
+ }
87
+
88
+ .card p {
89
+ color: #a1a1aa;
90
+ font-size: 0.95rem;
91
+ line-height: 1.5;
92
+ }
93
+
94
+ .card .tag {
95
+ display: inline-block;
96
+ background: rgba(96, 165, 250, 0.2);
97
+ color: #60a5fa;
98
+ padding: 4px 10px;
99
+ border-radius: 6px;
100
+ font-size: 0.75rem;
101
+ font-weight: 500;
102
+ margin-top: 12px;
103
+ }
104
+
105
+ .card .tag.warning {
106
+ background: rgba(251, 191, 36, 0.2);
107
+ color: #fbbf24;
108
+ }
109
+
110
+ .card .tag.success {
111
+ background: rgba(34, 197, 94, 0.2);
112
+ color: #22c55e;
113
+ }
114
+
115
+ section {
116
+ margin-bottom: 48px;
117
+ }
118
+
119
+ section h3 {
120
+ font-size: 1rem;
121
+ font-weight: 600;
122
+ color: #a1a1aa;
123
+ text-transform: uppercase;
124
+ letter-spacing: 0.1em;
125
+ margin-bottom: 16px;
126
+ padding-bottom: 8px;
127
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
128
+ }
129
+
130
+ .file-list {
131
+ display: flex;
132
+ flex-wrap: wrap;
133
+ gap: 12px;
134
+ }
135
+
136
+ .file-link {
137
+ background: rgba(255, 255, 255, 0.05);
138
+ border: 1px solid rgba(255, 255, 255, 0.1);
139
+ border-radius: 8px;
140
+ padding: 10px 16px;
141
+ color: #60a5fa;
142
+ text-decoration: none;
143
+ font-size: 0.9rem;
144
+ font-family: 'SF Mono', Monaco, 'Courier New', monospace;
145
+ transition: all 0.2s ease;
146
+ }
147
+
148
+ .file-link:hover {
149
+ background: rgba(96, 165, 250, 0.15);
150
+ border-color: rgba(96, 165, 250, 0.5);
151
+ }
152
+
153
+ .impl-card {
154
+ cursor: default;
155
+ }
156
+
157
+ .impl-card:hover {
158
+ transform: none;
159
+ box-shadow: none;
160
+ }
161
+
162
+ .code-block {
163
+ background: rgba(0, 0, 0, 0.4);
164
+ padding: 12px;
165
+ border-radius: 8px;
166
+ font-family: 'SF Mono', Monaco, 'Courier New', monospace;
167
+ font-size: 0.75rem;
168
+ line-height: 1.5;
169
+ overflow-x: auto;
170
+ margin: 12px 0 8px 0;
171
+ white-space: pre;
172
+ color: #e4e4e7;
173
+ }
174
+
175
+ footer {
176
+ text-align: center;
177
+ color: #71717a;
178
+ font-size: 0.85rem;
179
+ padding-top: 24px;
180
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
181
+ }
182
+
183
+ footer a {
184
+ color: #60a5fa;
185
+ text-decoration: none;
186
+ }
187
+
188
+ footer a:hover {
189
+ text-decoration: underline;
190
+ }
191
+
192
+ /* Modal Styles */
193
+ .modal {
194
+ display: none;
195
+ position: fixed;
196
+ z-index: 1000;
197
+ left: 0;
198
+ top: 0;
199
+ width: 100%;
200
+ height: 100%;
201
+ overflow: auto;
202
+ background-color: rgba(0,0,0,0.8);
203
+ backdrop-filter: blur(5px);
204
+ }
205
+
206
+ .modal-content {
207
+ background-color: #0d1117;
208
+ margin: 5% auto;
209
+ padding: 40px;
210
+ border: 1px solid #30363d;
211
+ width: 90%;
212
+ max-width: 1000px;
213
+ border-radius: 12px;
214
+ position: relative;
215
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
216
+ }
217
+
218
+ .close-modal {
219
+ color: #aaa;
220
+ position: absolute;
221
+ top: 15px;
222
+ right: 25px;
223
+ font-size: 28px;
224
+ font-weight: bold;
225
+ cursor: pointer;
226
+ z-index: 10;
227
+ transition: color 0.2s;
228
+ }
229
+
230
+ .close-modal:hover,
231
+ .close-modal:focus {
232
+ color: #fff;
233
+ text-decoration: none;
234
+ cursor: pointer;
235
+ }
236
+
237
+ .markdown-body {
238
+ box-sizing: border-box;
239
+ min-width: 200px;
240
+ max-width: 100%;
241
+ margin: 0 auto;
242
+ padding: 15px;
243
+ background-color: transparent;
244
+ }
245
+
246
+ /* Code View Styles */
247
+ .hljs-ln td {
248
+ padding-left: 10px;
249
+ line-height: 1.5;
250
+ }
251
+ .hljs-ln-numbers {
252
+ text-align: right;
253
+ border-right: 1px solid #30363d;
254
+ padding-right: 10px !important;
255
+ color: #6e7681;
256
+ min-width: 40px;
257
+ user-select: none;
258
+ }
259
+ .hljs-ln-code {
260
+ padding-left: 15px !important;
261
+ }
262
+ </style>
263
+ </head>
264
+ <body>
265
+ <div class="container">
266
+ <header>
267
+ <h1>🔍 Crownpeak DQM</h1>
268
+ <p class="subtitle">React Component for Digital Quality Management</p>
269
+ </header>
270
+
271
+ <section>
272
+ <h3>Integration Demos</h3>
273
+ <div class="grid">
274
+ <a href="/test/demo-iife.html" class="card">
275
+ <div class="card-icon">📜</div>
276
+ <h2>IIFE Script-Tag</h2>
277
+ <p>Fastest way for any site. Loads everything in one file and auto-initializes.</p>
278
+ <span class="tag success">Recommended</span>
279
+ </a>
280
+
281
+ <a href="/test/demo-esm.html" class="card">
282
+ <div class="card-icon">📦</div>
283
+ <h2>ES Module Import</h2>
284
+ <p>For modern browsers or build systems. Manual initialization supported.</p>
285
+ <span class="tag">Modern</span>
286
+ </a>
287
+
288
+ <a href="http://localhost:5173" class="card">
289
+ <div class="card-icon">⚛️</div>
290
+ <h2>React Component</h2>
291
+ <p>For React projects. Full control over state and props.</p>
292
+ <span class="tag warning">Port 5173</span>
293
+ </a>
294
+
295
+ <a href="/test/demo-dynamic.html" class="card">
296
+ <div class="card-icon">🔄</div>
297
+ <h2>Dynamic Loading</h2>
298
+ <p>Load the widget on demand from a URL. Ideal for lazy loading.</p>
299
+ <span class="tag">Lazy Load</span>
300
+ </a>
301
+ </div>
302
+ </section>
303
+
304
+ <section>
305
+ <h3>Demo & Test Pages</h3>
306
+ <div class="grid">
307
+ <a href="http://localhost:5173" class="card">
308
+ <div class="card-icon">⚛️</div>
309
+ <h2>React Dev App</h2>
310
+ <p>Full development harness with login, HTML editor, and live analysis.</p>
311
+ <span class="tag warning">Port 5173</span>
312
+ </a>
313
+
314
+ <a href="http://localhost:3001/auth" class="card">
315
+ <div class="card-icon">🔐</div>
316
+ <h2>Backend Login UI</h2>
317
+ <p>Backend authentication UI for session-based integration.</p>
318
+ <span class="tag">Auth UI</span>
319
+ </a>
320
+ </div>
321
+ </section>
322
+
323
+ <section>
324
+ <h3>Widget Bundles (dist/)</h3>
325
+ <div class="file-list">
326
+ <a href="/dist/dqm-widget.iife.js" class="file-link">dqm-widget.iife.js</a>
327
+ <a href="/dist/dqm-widget.esm.js" class="file-link">dqm-widget.esm.js</a>
328
+ </div>
329
+ </section>
330
+
331
+ <section>
332
+ <h3>Library Bundles (dist/)</h3>
333
+ <div class="file-list">
334
+ <a href="/dist/index.js" class="file-link">index.js (ESM)</a>
335
+ <a href="/dist/index.cjs" class="file-link">index.cjs (CJS)</a>
336
+ </div>
337
+ </section>
338
+
339
+ <section>
340
+ <h3>Documentation</h3>
341
+ <div class="grid">
342
+ <a href="/README.md" class="card">
343
+ <div class="card-icon">📖</div>
344
+ <h2>README</h2>
345
+ <p>Overview and quick-start guide for the project.</p>
346
+ </a>
347
+
348
+ <a href="/QUICKSTART.md" class="card">
349
+ <div class="card-icon">🚀</div>
350
+ <h2>Quickstart</h2>
351
+ <p>Step-by-step instructions for fast integration.</p>
352
+ </a>
353
+
354
+ <a href="/EXAMPLES.md" class="card">
355
+ <div class="card-icon">💡</div>
356
+ <h2>Examples</h2>
357
+ <p>Code samples for common integration scenarios.</p>
358
+ </a>
359
+
360
+ <a href="/AUTHENTICATION.md" class="card">
361
+ <div class="card-icon">🔑</div>
362
+ <h2>Authentication</h2>
363
+ <p>Authentication options: API key, backend session.</p>
364
+ </a>
365
+ </div>
366
+ </section>
367
+
368
+ <footer>
369
+ <p>
370
+ <a href="https://github.com/Crownpeak/dqm-react-component" target="_blank">GitHub Repository</a>
371
+ &nbsp;•&nbsp;
372
+ <a href="https://www.npmjs.com/package/@crownpeak/dqm-react-component" target="_blank">npm Package</a>
373
+ &nbsp;•&nbsp;
374
+ © 2025 Crownpeak Technology GmbH
375
+ </p>
376
+ </footer>
377
+ </div>
378
+
379
+ <!-- Modal Structure -->
380
+ <div id="md-modal" class="modal">
381
+ <div class="modal-content">
382
+ <span class="close-modal">&times;</span>
383
+ <div id="md-content" class="markdown-body"></div>
384
+ </div>
385
+ </div>
386
+
387
+ <script>
388
+ document.addEventListener('DOMContentLoaded', () => {
389
+ const modal = document.getElementById('md-modal');
390
+ const content = document.getElementById('md-content');
391
+ const close = document.querySelector('.close-modal');
392
+
393
+ function closeModal() {
394
+ modal.style.display = "none";
395
+ document.body.style.overflow = 'auto';
396
+ }
397
+
398
+ function openModal() {
399
+ modal.style.display = "block";
400
+ document.body.style.overflow = 'hidden';
401
+ }
402
+
403
+ close.onclick = closeModal;
404
+
405
+ window.onclick = (event) => {
406
+ if (event.target == modal) {
407
+ closeModal();
408
+ }
409
+ }
410
+
411
+ document.addEventListener('keydown', (e) => {
412
+ if (e.key === 'Escape' && modal.style.display === 'block') {
413
+ closeModal();
414
+ }
415
+ });
416
+
417
+ function escapeHtml(text) {
418
+ return text
419
+ .replace(/&/g, "&amp;")
420
+ .replace(/</g, "&lt;")
421
+ .replace(/>/g, "&gt;")
422
+ .replace(/"/g, "&quot;")
423
+ .replace(/'/g, "&#039;");
424
+ }
425
+
426
+ // Handle Markdown files
427
+ document.querySelectorAll('a[href$=".md"]').forEach(link => {
428
+ link.addEventListener('click', async (e) => {
429
+ e.preventDefault();
430
+ const url = link.getAttribute('href');
431
+
432
+ content.innerHTML = '<div style="text-align:center; padding: 40px; color: #8b949e;">Loading markdown...</div>';
433
+ openModal();
434
+
435
+ try {
436
+ const response = await fetch(url);
437
+ if (!response.ok) throw new Error('Network response was not ok');
438
+ const text = await response.text();
439
+ content.innerHTML = marked.parse(text);
440
+ // Highlight code blocks in markdown
441
+ content.querySelectorAll('pre code').forEach((block) => {
442
+ hljs.highlightElement(block);
443
+ });
444
+ } catch (err) {
445
+ console.error('Failed to load markdown', err);
446
+ content.innerHTML = `<div style="color: #ff6b6b; text-align: center; padding: 20px;">
447
+ <h3>Error loading document</h3>
448
+ <p>${err.message}</p>
449
+ </div>`;
450
+ }
451
+ });
452
+ });
453
+
454
+ // Handle JS/Code files
455
+ const codeExtensions = ['.js', '.cjs', '.mjs', '.ts', '.tsx', '.json', '.css'];
456
+ document.querySelectorAll('a').forEach(link => {
457
+ const href = link.getAttribute('href');
458
+ if (!href) return;
459
+
460
+ const ext = href.substring(href.lastIndexOf('.'));
461
+ if (codeExtensions.includes(ext)) {
462
+ link.addEventListener('click', async (e) => {
463
+ e.preventDefault();
464
+ const url = link.getAttribute('href');
465
+
466
+ content.innerHTML = '<div style="text-align:center; padding: 40px; color: #8b949e;">Loading code...</div>';
467
+ openModal();
468
+
469
+ try {
470
+ const response = await fetch(url);
471
+ if (!response.ok) throw new Error('Network response was not ok');
472
+ const text = await response.text();
473
+
474
+ let lang = 'plaintext';
475
+ if (['.js', '.cjs', '.mjs'].includes(ext)) lang = 'javascript';
476
+ if (['.ts', '.tsx'].includes(ext)) lang = 'typescript';
477
+ if (ext === '.json') lang = 'json';
478
+ if (ext === '.css') lang = 'css';
479
+
480
+ content.innerHTML = `<pre><code class="language-${lang}" style="background:transparent;">${escapeHtml(text)}</code></pre>`;
481
+
482
+ const block = content.querySelector('pre code');
483
+ hljs.highlightElement(block);
484
+
485
+ } catch (err) {
486
+ console.error('Failed to load code', err);
487
+ content.innerHTML = `<div style="color: #ff6b6b; text-align: center; padding: 20px;">
488
+ <h3>Error loading file</h3>
489
+ <p>${err.message}</p>
490
+ </div>`;
491
+ }
492
+ });
493
+ }
494
+ });
495
+ });
496
+ </script>
497
+ </body>
498
+ </html>