@nowline/preview-shell 0.4.2 → 0.5.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 (16) hide show
  1. package/dist/markup.d.ts +34 -6
  2. package/dist/markup.d.ts.map +1 -1
  3. package/dist/markup.js +73 -41
  4. package/dist/markup.js.map +1 -1
  5. package/dist/mount.d.ts +59 -15
  6. package/dist/mount.d.ts.map +1 -1
  7. package/dist/mount.js +598 -101
  8. package/dist/mount.js.map +1 -1
  9. package/dist/styles.d.ts +9 -8
  10. package/dist/styles.d.ts.map +1 -1
  11. package/dist/styles.js +286 -57
  12. package/dist/styles.js.map +1 -1
  13. package/package.json +2 -2
  14. package/src/markup.ts +110 -47
  15. package/src/mount.ts +740 -106
  16. package/src/styles.ts +286 -57
package/src/markup.ts CHANGED
@@ -9,17 +9,45 @@ export interface ViewportElements {
9
9
  canvas: HTMLElement;
10
10
  empty: HTMLElement;
11
11
  chrome: HTMLElement;
12
+ /** Drag grip at the leading edge of the toolbar — initiates chrome repositioning. */
13
+ toolbarHandle: HTMLElement;
14
+ /** » restore button — shown only when the toolbar is collapsed. */
15
+ restoreBtn: HTMLButtonElement;
12
16
  zoomReset: HTMLButtonElement;
13
17
  zoomIn: HTMLButtonElement;
14
18
  zoomOut: HTMLButtonElement;
19
+ /** Fit-width button (↔) — triggers fitWidth. Sits left of fitPage. */
15
20
  fitWidth: HTMLButtonElement;
21
+ /** Fit-page button (⤢) — triggers fitPage. */
16
22
  fitPage: HTMLButtonElement;
17
- viewToggle: HTMLButtonElement;
18
- viewMenu: HTMLUListElement;
19
- saveToggle: HTMLButtonElement;
20
- saveMenu: HTMLUListElement;
21
- copyToggle: HTMLButtonElement;
22
- copyMenu: HTMLUListElement;
23
+ /** ▾ more toggle — opens the more-menu panel. */
24
+ moreToggle: HTMLButtonElement;
25
+ /** More-menu panel containing format, copy, export, theme, now, links rows. */
26
+ moreMenu: HTMLElement;
27
+ /** Format sub-dropdown toggle (SVG ▾ / PNG ▾). */
28
+ formatToggle: HTMLButtonElement;
29
+ /** Format sub-dropdown list. */
30
+ formatMenu: HTMLUListElement;
31
+ /** Copy action button — uses the selected format. */
32
+ copyAction: HTMLButtonElement;
33
+ /** Export / download action button — uses the selected format. */
34
+ exportAction: HTMLButtonElement;
35
+ /** Theme sub-dropdown toggle. */
36
+ themeToggle: HTMLButtonElement;
37
+ /** Theme sub-dropdown list; items built programmatically from availableThemes. */
38
+ themeMenu: HTMLUListElement;
39
+ /** Now sub-dropdown toggle. */
40
+ nowToggle: HTMLButtonElement;
41
+ /** Label span inside nowToggle — shows Today / formatted date / None. */
42
+ nowLabel: HTMLElement;
43
+ /** Calendar picker panel — populated by mount.ts on open. */
44
+ nowPicker: HTMLElement;
45
+ /** Show-links sub-dropdown toggle. */
46
+ linksToggle: HTMLButtonElement;
47
+ /** Show-links sub-dropdown list. */
48
+ linksMenu: HTMLUListElement;
49
+ /** « collapse button — shrinks the toolbar to a translucent puck. */
50
+ collapseBtn: HTMLButtonElement;
23
51
  minimap: HTMLElement;
24
52
  minimapCanvas: HTMLElement;
25
53
  minimapRect: HTMLElement;
@@ -30,52 +58,77 @@ export interface ViewportElements {
30
58
  openProblems: HTMLAnchorElement;
31
59
  }
32
60
 
61
+ // Inline SVG glyphs for the copy / download actions — crisp at any
62
+ // zoom and tinted by `currentColor`. Embedded via innerHTML (no script),
63
+ // so they are unaffected by the webview's nonce-only script/style CSP.
64
+ const COPY_ICON =
65
+ '<svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><rect x="5.5" y="5.5" width="8" height="8" rx="1.5"></rect><path d="M10.5 5.5V4A1.5 1.5 0 0 0 9 2.5H4A1.5 1.5 0 0 0 2.5 4v5A1.5 1.5 0 0 0 4 10.5h1.5"></path></svg>';
66
+ const DOWNLOAD_ICON =
67
+ '<svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2.5v7.5"></path><path d="M4.75 7 8 10.25 11.25 7"></path><path d="M3 13.25h10"></path></svg>';
68
+
33
69
  const TEMPLATE = `
34
70
  <div class="viewport"><div class="canvas"></div></div>
35
- <div class="empty">Rendering preview…</div>
71
+ <div class="empty">Rendering preview\u2026</div>
36
72
  <div class="chrome">
37
- <div class="toolbar zoom-toolbar">
38
- <button class="btn zoom-out" title="Zoom out">−</button>
73
+ <div class="toolbar">
74
+ <span class="toolbar-handle" aria-hidden="true" title="Drag to reposition toolbar">\u2838</span>
75
+ <button class="btn glyph restore-btn" title="Expand toolbar" aria-label="Expand toolbar">\u00bb</button>
76
+ <button class="btn zoom-out" title="Zoom out" aria-label="Zoom out">\u2212</button>
39
77
  <button class="btn zoom-label zoom-reset" title="Reset to 100%">100%</button>
40
- <button class="btn zoom-in" title="Zoom in">+</button>
41
- <span class="sep"></span>
42
- <button class="btn glyph fit-width" title="Fit width (3)" aria-label="Fit width">↔</button>
43
- <button class="btn glyph fit-page" title="Fit page (1)" aria-label="Fit page">⛶</button>
78
+ <button class="btn zoom-in" title="Zoom in" aria-label="Zoom in">+</button>
44
79
  <span class="sep"></span>
45
- <div class="dropdown">
46
- <button class="btn view-toggle" title="View options for this preview (theme, now-line, links)">View ▾</button>
47
- <ul class="menu view-menu" hidden>
48
- <li class="menu-section">Theme</li>
49
- <li><button class="btn view-opt" data-opt="theme" data-value="auto">Auto</button></li>
50
- <li><button class="btn view-opt" data-opt="theme" data-value="light">Light</button></li>
51
- <li><button class="btn view-opt" data-opt="theme" data-value="dark">Dark</button></li>
52
- <li class="menu-divider"></li>
53
- <li class="menu-section">Now-line</li>
54
- <li><button class="btn view-opt" data-opt="now" data-value="today">Today</button></li>
55
- <li><button class="btn view-opt" data-opt="now" data-value="hide">Hide</button></li>
56
- <li class="menu-divider"></li>
57
- <li><button class="btn view-opt" data-opt="showLinks" data-value="toggle">Show links</button></li>
58
- </ul>
59
- </div>
80
+ <button class="btn glyph fit-width" title="Fit width (3)" aria-label="Fit width">\u2194</button>
81
+ <button class="btn glyph fit-page" title="Fit page (1)" aria-label="Fit page">\u2922</button>
60
82
  <span class="sep"></span>
61
83
  <div class="dropdown">
62
- <button class="btn save-toggle" title="Save the rendered diagram">Save ▾</button>
63
- <ul class="menu save-menu" hidden>
64
- <li><button class="btn" data-action="save-svg">Save SVG…</button></li>
65
- <li><button class="btn" data-action="save-png">Save PNG…</button></li>
66
- </ul>
67
- </div>
68
- <div class="dropdown">
69
- <button class="btn copy-toggle" title="Copy the rendered diagram to the clipboard">Copy ▾</button>
70
- <ul class="menu copy-menu" hidden>
71
- <li><button class="btn" data-action="copy-svg">Copy SVG</button></li>
72
- <li><button class="btn" data-action="copy-png">Copy PNG</button></li>
73
- </ul>
84
+ <button class="btn more-toggle" title="More options">\u25be more</button>
85
+ <div class="more-menu" hidden>
86
+ <div class="more-row">
87
+ <span class="more-label">Format:</span>
88
+ <div class="dropdown">
89
+ <button class="btn more-sub-toggle format-toggle">SVG \u25be</button>
90
+ <ul class="more-sub-menu format-menu" hidden>
91
+ <li><button class="btn format-opt" data-value="svg"><code class="code-chip">svg</code></button></li>
92
+ <li><button class="btn format-opt" data-value="png"><code class="code-chip">png</code></button></li>
93
+ </ul>
94
+ </div>
95
+ </div>
96
+ <div class="more-row action-row">
97
+ <button class="btn copy-action" title="Copy to clipboard"><span>Copy</span><span class="action-ico" aria-hidden="true">${COPY_ICON}</span></button>
98
+ <button class="btn export-action" title="Export file"><span>Export</span><span class="action-ico" aria-hidden="true">${DOWNLOAD_ICON}</span></button>
99
+ </div>
100
+ <div class="more-divider"></div>
101
+ <div class="more-row theme-control-row">
102
+ <span class="more-label">Theme:</span>
103
+ <div class="dropdown">
104
+ <button class="btn more-sub-toggle theme-toggle">Auto \u25be</button>
105
+ <ul class="more-sub-menu theme-menu" hidden></ul>
106
+ </div>
107
+ </div>
108
+ <div class="more-row">
109
+ <span class="more-label">Now:</span>
110
+ <div class="dropdown">
111
+ <button class="btn more-sub-toggle now-toggle"><span class="now-label">Today</span> \u25be</button>
112
+ <div class="now-picker" hidden></div>
113
+ </div>
114
+ </div>
115
+ <div class="more-row">
116
+ <span class="more-label">Show links:</span>
117
+ <div class="dropdown">
118
+ <button class="btn more-sub-toggle links-toggle">Yes \u25be</button>
119
+ <ul class="more-sub-menu links-menu" hidden>
120
+ <li><button class="btn links-opt" data-value="true">Yes</button></li>
121
+ <li><button class="btn links-opt" data-value="false">No</button></li>
122
+ </ul>
123
+ </div>
124
+ </div>
125
+ </div>
74
126
  </div>
127
+ <button class="btn glyph collapse-btn" title="Collapse toolbar" aria-label="Collapse toolbar">\u00ab</button>
75
128
  </div>
76
129
  </div>
77
130
  <div class="minimap hidden">
78
- <button class="btn minimap-close" title="Hide minimap">×</button>
131
+ <button class="btn minimap-close" title="Hide minimap">\u00d7</button>
79
132
  <div class="minimap-canvas"></div>
80
133
  <div class="minimap-rect"></div>
81
134
  </div>
@@ -106,17 +159,27 @@ export function buildViewport(rootEl: HTMLElement): ViewportElements {
106
159
  canvas: q<HTMLElement>(rootEl, '.canvas'),
107
160
  empty: q<HTMLElement>(rootEl, '.empty'),
108
161
  chrome: q<HTMLElement>(rootEl, '.chrome'),
162
+ toolbarHandle: q<HTMLElement>(rootEl, '.toolbar-handle'),
163
+ restoreBtn: q<HTMLButtonElement>(rootEl, '.restore-btn'),
109
164
  zoomReset: q<HTMLButtonElement>(rootEl, '.zoom-reset'),
110
165
  zoomIn: q<HTMLButtonElement>(rootEl, '.zoom-in'),
111
166
  zoomOut: q<HTMLButtonElement>(rootEl, '.zoom-out'),
112
167
  fitWidth: q<HTMLButtonElement>(rootEl, '.fit-width'),
113
168
  fitPage: q<HTMLButtonElement>(rootEl, '.fit-page'),
114
- viewToggle: q<HTMLButtonElement>(rootEl, '.view-toggle'),
115
- viewMenu: q<HTMLUListElement>(rootEl, '.view-menu'),
116
- saveToggle: q<HTMLButtonElement>(rootEl, '.save-toggle'),
117
- saveMenu: q<HTMLUListElement>(rootEl, '.save-menu'),
118
- copyToggle: q<HTMLButtonElement>(rootEl, '.copy-toggle'),
119
- copyMenu: q<HTMLUListElement>(rootEl, '.copy-menu'),
169
+ moreToggle: q<HTMLButtonElement>(rootEl, '.more-toggle'),
170
+ moreMenu: q<HTMLElement>(rootEl, '.more-menu'),
171
+ formatToggle: q<HTMLButtonElement>(rootEl, '.format-toggle'),
172
+ formatMenu: q<HTMLUListElement>(rootEl, '.format-menu'),
173
+ copyAction: q<HTMLButtonElement>(rootEl, '.copy-action'),
174
+ exportAction: q<HTMLButtonElement>(rootEl, '.export-action'),
175
+ themeToggle: q<HTMLButtonElement>(rootEl, '.theme-toggle'),
176
+ themeMenu: q<HTMLUListElement>(rootEl, '.theme-menu'),
177
+ nowToggle: q<HTMLButtonElement>(rootEl, '.now-toggle'),
178
+ nowLabel: q<HTMLElement>(rootEl, '.now-label'),
179
+ nowPicker: q<HTMLElement>(rootEl, '.now-picker'),
180
+ linksToggle: q<HTMLButtonElement>(rootEl, '.links-toggle'),
181
+ linksMenu: q<HTMLUListElement>(rootEl, '.links-menu'),
182
+ collapseBtn: q<HTMLButtonElement>(rootEl, '.collapse-btn'),
120
183
  minimap: q<HTMLElement>(rootEl, '.minimap'),
121
184
  minimapCanvas: q<HTMLElement>(rootEl, '.minimap-canvas'),
122
185
  minimapRect: q<HTMLElement>(rootEl, '.minimap-rect'),