pict-section-inlinedocumentation 0.0.4 → 0.0.7

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 (10) hide show
  1. package/example_applications/basic/index.html +5 -5
  2. package/example_applications/bookshop/html/index.html +5 -5
  3. package/example_applications/bookshop/views/PictView-Bookshop-BookList.js +6 -6
  4. package/example_applications/bookshop/views/PictView-Bookshop-Store.js +3 -3
  5. package/package.json +9 -8
  6. package/source/providers/Pict-Provider-InlineDocumentation.js +293 -9
  7. package/source/views/Pict-View-InlineDocumentation-Content.js +114 -45
  8. package/source/views/Pict-View-InlineDocumentation-Layout.js +7 -54
  9. package/source/views/Pict-View-InlineDocumentation-Nav.js +678 -130
  10. package/source/views/Pict-View-InlineDocumentation-TopicManager.js +64 -64
package/source/views/Pict-View-InlineDocumentation-Content.js CHANGED
@@ -21,39 +21,39 @@ const _ViewConfiguration =
21
21
  align-items: center;
22
22
  justify-content: center;
23
23
  min-height: 150px;
24
- color: #8A7F72;
24
+ color: var(--theme-color-text-muted, #8A7F72);
25
25
  font-size: 0.95em;
26
26
  }
27
27
  .pict-inline-doc-content h1 {
28
28
  font-size: 1.75em;
29
- color: #3D3229;
30
- border-bottom: 1px solid #DDD6CA;
29
+ color: var(--theme-color-text-primary, #3D3229);
30
+ border-bottom: 1px solid var(--theme-color-border-default, #DDD6CA);
31
31
  padding-bottom: 0.3em;
32
32
  margin-top: 0;
33
33
  }
34
34
  .pict-inline-doc-content h2 {
35
35
  font-size: 1.35em;
36
- color: #3D3229;
37
- border-bottom: 1px solid #EAE3D8;
36
+ color: var(--theme-color-text-primary, #3D3229);
37
+ border-bottom: 1px solid var(--theme-color-border-light, #EAE3D8);
38
38
  padding-bottom: 0.2em;
39
39
  margin-top: 1.25em;
40
40
  }
41
41
  .pict-inline-doc-content h3 {
42
42
  font-size: 1.15em;
43
- color: #3D3229;
43
+ color: var(--theme-color-text-primary, #3D3229);
44
44
  margin-top: 1em;
45
45
  }
46
46
  .pict-inline-doc-content h4, .pict-inline-doc-content h5, .pict-inline-doc-content h6 {
47
- color: #5E5549;
47
+ color: var(--theme-color-text-secondary, #5E5549);
48
48
  margin-top: 0.8em;
49
49
  }
50
50
  .pict-inline-doc-content p {
51
51
  line-height: 1.65;
52
- color: #423D37;
52
+ color: var(--theme-color-text-primary, #423D37);
53
53
  margin: 0.6em 0;
54
54
  }
55
55
  .pict-inline-doc-content a {
56
- color: #2E7D74;
56
+ color: var(--theme-color-brand-primary, #2E7D74);
57
57
  text-decoration: none;
58
58
  cursor: pointer;
59
59
  }
@@ -61,8 +61,8 @@ const _ViewConfiguration =
61
61
  text-decoration: underline;
62
62
  }
63
63
  .pict-inline-doc-content pre {
64
- background: #3D3229;
65
- color: #E8E0D4;
64
+ background: var(--theme-color-text-primary, #3D3229);
65
+ color: var(--theme-color-text-on-brand, #E8E0D4);
66
66
  padding: 1em;
67
67
  border-radius: 5px;
68
68
  overflow-x: auto;
@@ -71,11 +71,11 @@ const _ViewConfiguration =
71
71
  max-width: 100%;
72
72
  }
73
73
  .pict-inline-doc-content code {
74
- background: #F0ECE4;
74
+ background: var(--theme-color-background-tertiary, #F0ECE4);
75
75
  padding: 0.15em 0.35em;
76
76
  border-radius: 3px;
77
77
  font-size: 0.85em;
78
- color: #9E6B47;
78
+ color: var(--theme-color-brand-accent, #9E6B47);
79
79
  }
80
80
  .pict-inline-doc-content pre code {
81
81
  background: none;
@@ -87,8 +87,8 @@ const _ViewConfiguration =
87
87
  border-left: 3px solid #2E7D74;
88
88
  margin: 0.8em 0;
89
89
  padding: 0.4em 0.8em;
90
- background: #F7F5F0;
91
- color: #5E5549;
90
+ background: var(--theme-color-background-secondary, #F7F5F0);
91
+ color: var(--theme-color-text-secondary, #5E5549);
92
92
  }
93
93
  .pict-inline-doc-content blockquote p {
94
94
  margin: 0.2em 0;
@@ -99,11 +99,11 @@ const _ViewConfiguration =
99
99
  }
100
100
  .pict-inline-doc-content li {
101
101
  margin: 0.2em 0;
102
- color: #423D37;
102
+ color: var(--theme-color-text-primary, #423D37);
103
103
  }
104
104
  .pict-inline-doc-content hr {
105
105
  border: none;
106
- border-top: 1px solid #DDD6CA;
106
+ border-top: 1px solid var(--theme-color-border-default, #DDD6CA);
107
107
  margin: 1.5em 0;
108
108
  }
109
109
  .pict-inline-doc-content table {
@@ -114,20 +114,20 @@ const _ViewConfiguration =
114
114
  overflow-x: auto;
115
115
  }
116
116
  .pict-inline-doc-content table th {
117
- background: #F5F0E8;
118
- border: 1px solid #DDD6CA;
117
+ background: var(--theme-color-background-secondary, #F5F0E8);
118
+ border: 1px solid var(--theme-color-border-default, #DDD6CA);
119
119
  padding: 0.5em 0.7em;
120
120
  text-align: left;
121
121
  font-weight: 600;
122
- color: #3D3229;
122
+ color: var(--theme-color-text-primary, #3D3229);
123
123
  }
124
124
  .pict-inline-doc-content table td {
125
- border: 1px solid #DDD6CA;
125
+ border: 1px solid var(--theme-color-border-default, #DDD6CA);
126
126
  padding: 0.4em 0.7em;
127
- color: #423D37;
127
+ color: var(--theme-color-text-primary, #423D37);
128
128
  }
129
129
  .pict-inline-doc-content table tr:nth-child(even) {
130
- background: #F7F5F0;
130
+ background: var(--theme-color-background-secondary, #F7F5F0);
131
131
  }
132
132
  .pict-inline-doc-content img {
133
133
  max-width: 100%;
@@ -136,19 +136,75 @@ const _ViewConfiguration =
136
136
  .pict-inline-doc-not-found {
137
137
  text-align: center;
138
138
  padding: 2em 1em;
139
- color: #5E5549;
139
+ color: var(--theme-color-text-secondary, #5E5549);
140
140
  }
141
141
  .pict-inline-doc-not-found h2 {
142
- color: #8A7F72;
142
+ color: var(--theme-color-text-muted, #8A7F72);
143
143
  font-size: 1.3em;
144
144
  border-bottom: none;
145
145
  }
146
146
  .pict-inline-doc-not-found code {
147
- background: #F0ECE4;
147
+ background: var(--theme-color-background-tertiary, #F0ECE4);
148
148
  padding: 0.15em 0.35em;
149
149
  border-radius: 3px;
150
150
  font-size: 0.85em;
151
- color: #9E6B47;
151
+ color: var(--theme-color-brand-accent, #9E6B47);
152
+ }
153
+ /* Code block action buttons (copy, fullscreen) from pict-section-content */
154
+ .pict-content-code-actions {
155
+ position: sticky;
156
+ top: 64px;
157
+ align-self: flex-start;
158
+ display: flex;
159
+ flex-direction: column;
160
+ gap: 6px;
161
+ flex: 0 0 auto;
162
+ padding-top: 6px;
163
+ opacity: 0;
164
+ transform: translateX(-4px);
165
+ transition: opacity 0.15s ease, transform 0.15s ease;
166
+ pointer-events: none;
167
+ }
168
+ .pict-content-code-container:hover .pict-content-code-actions,
169
+ .pict-content-code-container:focus-within .pict-content-code-actions {
170
+ opacity: 1;
171
+ transform: translateX(0);
172
+ pointer-events: auto;
173
+ }
174
+ .pict-content-code-action-btn {
175
+ display: inline-flex;
176
+ align-items: center;
177
+ justify-content: center;
178
+ width: 28px;
179
+ height: 28px;
180
+ padding: 0;
181
+ background: var(--theme-color-background-panel, #FFFFFF);
182
+ color: var(--theme-color-text-secondary, #5E5549);
183
+ border: 1px solid var(--theme-color-border-default, #DDD6CA);
184
+ border-radius: 6px;
185
+ cursor: pointer;
186
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
187
+ transition: background-color 0.15s ease, color 0.15s ease;
188
+ }
189
+ .pict-content-code-action-btn svg {
190
+ display: block;
191
+ width: 14px;
192
+ height: 14px;
193
+ stroke: currentColor;
194
+ fill: none;
195
+ stroke-width: 1.6;
196
+ stroke-linecap: round;
197
+ stroke-linejoin: round;
198
+ }
199
+ .pict-content-code-action-btn:hover {
200
+ background: #2E7D74;
201
+ color: var(--theme-color-background-panel, #FFFFFF);
202
+ border-color: var(--theme-color-brand-primary, #2E7D74);
203
+ }
204
+ .pict-content-code-action-btn.is-copied {
205
+ background: #2E7D74;
206
+ color: var(--theme-color-background-panel, #FFFFFF);
207
+ border-color: var(--theme-color-brand-primary, #2E7D74);
152
208
  }
153
209
  .pict-inline-doc-edit-toolbar {
154
210
  display: none;
@@ -156,8 +212,8 @@ const _ViewConfiguration =
156
212
  gap: 0.4em;
157
213
  padding: 0.4em 0.6em;
158
214
  margin-bottom: 0.5em;
159
- background: #F5F0E8;
160
- border: 1px solid #E5DED4;
215
+ background: var(--theme-color-background-secondary, #F5F0E8);
216
+ border: 1px solid var(--theme-color-border-default, #E5DED4);
161
217
  border-radius: 4px;
162
218
  font-size: 0.8em;
163
219
  }
@@ -165,7 +221,7 @@ const _ViewConfiguration =
165
221
  display: flex;
166
222
  }
167
223
  .pict-inline-doc-edit-toolbar .edit-label {
168
- color: #8A7F72;
224
+ color: var(--theme-color-text-muted, #8A7F72);
169
225
  margin-right: auto;
170
226
  }
171
227
  .pict-inline-doc-edit-btn {
@@ -175,19 +231,19 @@ const _ViewConfiguration =
175
231
  padding: 0.25em 0.6em;
176
232
  border: 1px solid #D4A373;
177
233
  border-radius: 3px;
178
- background: #fff;
179
- color: #5E5549;
234
+ background: var(--theme-color-background-panel, #fff);
235
+ color: var(--theme-color-text-secondary, #5E5549);
180
236
  font-size: 0.9em;
181
237
  cursor: pointer;
182
238
  transition: background 0.1s;
183
239
  }
184
240
  .pict-inline-doc-edit-btn:hover {
185
- background: #F0ECE4;
241
+ background: var(--theme-color-background-tertiary, #F0ECE4);
186
242
  }
187
243
  .pict-inline-doc-edit-btn.primary {
188
244
  background: #2E7D74;
189
- color: #fff;
190
- border-color: #2E7D74;
245
+ color: var(--theme-color-background-panel, #fff);
246
+ border-color: var(--theme-color-brand-primary, #2E7D74);
191
247
  }
192
248
  .pict-inline-doc-edit-btn.primary:hover {
193
249
  background: #266D65;
@@ -213,7 +269,7 @@ const _ViewConfiguration =
213
269
  width: 14px;
214
270
  height: 14px;
215
271
  background: #2E7D74;
216
- color: #fff;
272
+ color: var(--theme-color-background-panel, #fff);
217
273
  border-radius: 50%;
218
274
  font-size: 9px;
219
275
  line-height: 14px;
@@ -229,7 +285,7 @@ const _ViewConfiguration =
229
285
  width: 16px;
230
286
  height: 16px;
231
287
  font-size: 12px;
232
- color: #2E7D74;
288
+ color: var(--theme-color-brand-primary, #2E7D74);
233
289
  cursor: pointer;
234
290
  vertical-align: middle;
235
291
  }
@@ -248,31 +304,31 @@ const _ViewConfiguration =
248
304
  font-family: 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', monospace;
249
305
  font-size: 0.85em;
250
306
  line-height: 1.5;
251
- color: #3D3229;
252
- background: #FDFCFA;
253
- border: 1px solid #DDD6CA;
307
+ color: var(--theme-color-text-primary, #3D3229);
308
+ background: var(--theme-color-background-panel, #FDFCFA);
309
+ border: 1px solid var(--theme-color-border-default, #DDD6CA);
254
310
  border-radius: 4px;
255
311
  resize: vertical;
256
312
  box-sizing: border-box;
257
313
  }
258
314
  .pict-inline-doc-tooltip-editor-textarea:focus {
259
315
  outline: none;
260
- border-color: #2E7D74;
316
+ border-color: var(--theme-color-brand-primary, #2E7D74);
261
317
  box-shadow: 0 0 0 2px rgba(46, 125, 116, 0.15);
262
318
  }
263
319
  .pict-inline-doc-tooltip-preview {
264
320
  margin-top: 0.5em;
265
321
  padding: 0.5em 0.7em;
266
- background: #F5F0E8;
267
- border: 1px solid #E5DED4;
322
+ background: var(--theme-color-background-secondary, #F5F0E8);
323
+ border: 1px solid var(--theme-color-border-default, #E5DED4);
268
324
  border-radius: 4px;
269
325
  font-size: 0.9em;
270
326
  min-height: 2em;
271
- color: #3D3229;
327
+ color: var(--theme-color-text-primary, #3D3229);
272
328
  }
273
329
  .pict-inline-doc-tooltip-preview-label {
274
330
  font-size: 0.75em;
275
- color: #8A7F72;
331
+ color: var(--theme-color-text-muted, #8A7F72);
276
332
  text-transform: uppercase;
277
333
  letter-spacing: 0.03em;
278
334
  margin-bottom: 0.3em;
@@ -525,6 +581,19 @@ class InlineDocumentationContentView extends libPictContentView
525
581
  let tmpRel = tmpLink.getAttribute('rel');
526
582
  let tmpPath = tmpRel.replace('pict-inline-doc-link:', '');
527
583
 
584
+ // Check if this is a cross-module link that should open externally
585
+ if (tmpProvider && typeof tmpProvider.isExternalPath === 'function' && tmpProvider.isExternalPath(tmpPath))
586
+ {
587
+ let tmpExternalURL = tmpProvider.resolveExternalURL(tmpPath);
588
+ if (tmpExternalURL)
589
+ {
590
+ tmpLink.setAttribute('href', tmpExternalURL);
591
+ tmpLink.setAttribute('target', '_blank');
592
+ tmpLink.setAttribute('rel', 'noopener');
593
+ continue;
594
+ }
595
+ }
596
+
528
597
  tmpLink.addEventListener('click', (pEvent) =>
529
598
  {
530
599
  pEvent.preventDefault();
package/source/views/Pict-View-InlineDocumentation-Layout.js CHANGED
@@ -18,9 +18,9 @@ const _ViewConfiguration =
18
18
  min-height: 300px;
19
19
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
20
20
  font-size: 15px;
21
- color: #423D37;
22
- background: #FDFCFA;
23
- border: 1px solid #E5DED4;
21
+ color: var(--theme-color-text-primary, #423D37);
22
+ background: var(--theme-color-background-panel, #FDFCFA);
23
+ border: 1px solid var(--theme-color-border-default, #E5DED4);
24
24
  border-radius: 6px;
25
25
  overflow: hidden;
26
26
  }
@@ -28,8 +28,8 @@ const _ViewConfiguration =
28
28
  width: 240px;
29
29
  min-width: 200px;
30
30
  max-width: 300px;
31
- border-right: 1px solid #E5DED4;
32
- background: #F7F5F0;
31
+ border-right: 1px solid var(--theme-color-border-default, #E5DED4);
32
+ background: var(--theme-color-background-secondary, #F7F5F0);
33
33
  overflow-y: auto;
34
34
  flex-shrink: 0;
35
35
  }
@@ -42,7 +42,7 @@ const _ViewConfiguration =
42
42
  .pict-inline-doc-nav-container.pict-inline-doc-nav-hidden {
43
43
  display: none;
44
44
  }
45
- /* Compact mode: nav moves to a horizontal top bar when container is narrow */
45
+ /* Compact mode: stack nav above content when container is narrow */
46
46
  .pict-inline-doc.pict-inline-doc-compact {
47
47
  flex-direction: column;
48
48
  }
@@ -51,56 +51,9 @@ const _ViewConfiguration =
51
51
  min-width: 0;
52
52
  max-width: none;
53
53
  border-right: none;
54
- border-bottom: 1px solid #E5DED4;
54
+ border-bottom: 1px solid var(--theme-color-border-default, #E5DED4);
55
55
  overflow-y: visible;
56
- overflow-x: auto;
57
56
  flex-shrink: 0;
58
- max-height: none;
59
- }
60
- /* Compact mode: nav items flow horizontally */
61
- .pict-inline-doc.pict-inline-doc-compact .pict-inline-doc-nav {
62
- padding: 0.4em 0.5em;
63
- display: flex;
64
- flex-wrap: wrap;
65
- align-items: center;
66
- gap: 0.15em 0.3em;
67
- }
68
- .pict-inline-doc.pict-inline-doc-compact .pict-inline-doc-nav-group {
69
- display: flex;
70
- flex-wrap: wrap;
71
- align-items: center;
72
- margin-bottom: 0;
73
- gap: 0.1em 0.2em;
74
- }
75
- .pict-inline-doc.pict-inline-doc-compact .pict-inline-doc-nav-group-header {
76
- padding: 0.2em 0.5em;
77
- font-size: 0.75em;
78
- white-space: nowrap;
79
- }
80
- .pict-inline-doc.pict-inline-doc-compact .pict-inline-doc-nav-group-toggle {
81
- display: none;
82
- }
83
- .pict-inline-doc.pict-inline-doc-compact .pict-inline-doc-nav-group-items {
84
- display: flex !important;
85
- flex-wrap: wrap;
86
- gap: 0.1em;
87
- }
88
- .pict-inline-doc.pict-inline-doc-compact .pict-inline-doc-nav-item {
89
- padding: 0.2em 0.5em;
90
- font-size: 0.8em;
91
- border-left: none;
92
- border-radius: 3px;
93
- white-space: nowrap;
94
- }
95
- .pict-inline-doc.pict-inline-doc-compact .pict-inline-doc-nav-item.active {
96
- border-left: none;
97
- background: #2E7D74;
98
- color: #fff;
99
- }
100
- .pict-inline-doc.pict-inline-doc-compact .pict-inline-doc-nav-topic-badge {
101
- margin: 0 0.3em;
102
- padding: 0.15em 0.5em;
103
- font-size: 0.75em;
104
57
  }
105
58
  `,
106
59