@jumoo/usync 17.6.1-prerelease.20 → 17.6.1

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 (9) hide show
  1. package/dist/components/preview-side.d.ts +16 -0
  2. package/dist/components/preview-side.js +38 -0
  3. package/dist/components/usync-content-preview.d.ts +1 -1
  4. package/dist/components/usync-content-preview.js +158 -175
  5. package/dist/components/usync-content-type-preview.d.ts +1 -1
  6. package/dist/components/usync-content-type-preview.js +214 -223
  7. package/dist/components/usync-data-type-preview.d.ts +1 -1
  8. package/dist/components/usync-data-type-preview.js +118 -127
  9. package/package.json +1 -1
package/dist/components/preview-side.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ import type { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
2
+ import type { uSyncPreviewLabels } from '../preview/types.js';
3
+ export type PreviewSide = 'current' | 'incoming';
4
+ /** the headline over one side of a preview. */
5
+ export declare function renderPreviewHeadline(host: UmbLitElement, side: PreviewSide, labels?: uSyncPreviewLabels): import("lit-html").TemplateResult<1>;
6
+ /**
7
+ * styles shared by the sides of a preview (each side is `.side.current` or `.side.incoming`).
8
+ *
9
+ * the incoming side (the source) is always on the left, and the current side (the
10
+ * target, which the import changes) on the right.
11
+ *
12
+ * what differs is red on the current side (what goes) and green on the incoming
13
+ * side (what comes in), so you can see which way the change runs whichever way
14
+ * round the sites are. elements colour their changes with `--usync-preview-change`.
15
+ */
16
+ export declare const previewSideStyles: import("lit").CSSResult;
package/dist/components/preview-side.js ADDED
@@ -0,0 +1,38 @@
1
+ import { css, html } from '@umbraco-cms/backoffice/external/lit';
2
+ /** the headline over one side of a preview. */
3
+ export function renderPreviewHeadline(host, side, labels) {
4
+ const headline = side === 'current'
5
+ ? (labels?.current ??
6
+ host.localize.termOrDefault('uSync_previewCurrent', 'Current (this site)'))
7
+ : (labels?.incoming ??
8
+ host.localize.termOrDefault('uSync_previewIncoming', 'Incoming (uSync files)'));
9
+ return html `<h4 class="side-headline">${headline}</h4>`;
10
+ }
11
+ /**
12
+ * styles shared by the sides of a preview (each side is `.side.current` or `.side.incoming`).
13
+ *
14
+ * the incoming side (the source) is always on the left, and the current side (the
15
+ * target, which the import changes) on the right.
16
+ *
17
+ * what differs is red on the current side (what goes) and green on the incoming
18
+ * side (what comes in), so you can see which way the change runs whichever way
19
+ * round the sites are. elements colour their changes with `--usync-preview-change`.
20
+ */
21
+ export const previewSideStyles = css `
22
+ .side.current {
23
+ --usync-preview-change: var(--uui-color-danger);
24
+ }
25
+
26
+ .side.incoming {
27
+ --usync-preview-change: var(--uui-color-positive);
28
+ }
29
+
30
+ .side-headline {
31
+ align-self: center;
32
+ margin: 0;
33
+ font-size: var(--uui-type-small-size);
34
+ text-transform: uppercase;
35
+ letter-spacing: 0.04em;
36
+ color: var(--uui-color-text-alt);
37
+ }
38
+ `;
package/dist/components/usync-content-preview.d.ts CHANGED
@@ -19,7 +19,7 @@ export declare class uSyncContentPreviewElement extends UmbLitElement {
19
19
  private _onlyChanges;
20
20
  protected willUpdate(changed: PropertyValues<this>): void;
21
21
  render(): typeof nothing | import("lit-html").TemplateResult<1>;
22
- static styles: import("lit").CSSResult;
22
+ static styles: import("lit").CSSResult[];
23
23
  }
24
24
  export default uSyncContentPreviewElement;
25
25
  declare global {
package/dist/components/usync-content-preview.js CHANGED
@@ -19,6 +19,7 @@ var _uSyncContentPreviewElement_instances, _uSyncContentPreviewElement_current,
19
19
  import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
20
20
  import { classMap, css, customElement, html, nothing, property, repeat, state, } from '@umbraco-cms/backoffice/external/lit';
21
21
  import '@umbraco-cms/backoffice/components';
22
+ import { previewSideStyles, renderPreviewHeadline, } from './preview-side.js';
22
23
  import { getPreviewModel, } from '../preview/types.js';
23
24
  import { buildContentTypeLayout, } from '../utils/preview/content-type-layout.js';
24
25
  import { deepEqual } from '../utils/diff/deep-equal.js';
@@ -71,8 +72,8 @@ let uSyncContentPreviewElement = class uSyncContentPreviewElement extends UmbLit
71
72
  return html `
72
73
  <div class="sides">
73
74
  ${__classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_renderToolbar).call(this)}
74
- ${__classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_renderSide).call(this, 'current', __classPrivateFieldGet(this, _uSyncContentPreviewElement_current, "f"), tabs, active)}
75
75
  ${__classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_renderSide).call(this, 'incoming', __classPrivateFieldGet(this, _uSyncContentPreviewElement_incoming, "f"), tabs, active)}
76
+ ${__classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_renderSide).call(this, 'current', __classPrivateFieldGet(this, _uSyncContentPreviewElement_current, "f"), tabs, active)}
76
77
  </div>
77
78
  `;
78
79
  }
@@ -109,20 +110,15 @@ _uSyncContentPreviewElement_renderToolbar = function _uSyncContentPreviewElement
109
110
  </div>`;
110
111
  };
111
112
  _uSyncContentPreviewElement_renderSide = function _uSyncContentPreviewElement_renderSide(side, data, tabs, active) {
112
- const headline = side === 'current'
113
- ? (this.labels?.current ??
114
- this.localize.termOrDefault('uSync_previewCurrent', 'Current (this site)'))
115
- : (this.labels?.incoming ??
116
- this.localize.termOrDefault('uSync_previewIncoming', 'Incoming (uSync files)'));
117
113
  if (!data.item) {
118
114
  return html `<div class="side ${side}">
119
- <h4 class="side-headline">${headline}</h4>
115
+ ${renderPreviewHeadline(this, side, this.labels)}
120
116
  <uui-box class="info"><p class="empty">${__classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_missingMessage).call(this, side)}</p></uui-box>
121
117
  </div>`;
122
118
  }
123
119
  return html `
124
120
  <div class="side ${side}">
125
- <h4 class="side-headline">${headline}</h4>
121
+ ${renderPreviewHeadline(this, side, this.labels)}
126
122
  ${__classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_renderInfo).call(this, data)}
127
123
  ${tabs.length > 1 || (tabs.length === 1 && tabs[0].name)
128
124
  ? html `<uui-tab-group>
@@ -306,205 +302,192 @@ _uSyncContentPreviewElement_valueStatus = function _uSyncContentPreviewElement_v
306
302
  return 'removed';
307
303
  return 'changed';
308
304
  };
309
- uSyncContentPreviewElement.styles = css `
310
- :host {
311
- display: block;
312
- container-type: inline-size;
313
- }
314
-
315
- /* the toolbar shares the headline row with the incoming side, on the right. */
316
- .toolbar {
317
- grid-column: 2;
318
- grid-row: 1;
319
- justify-self: end;
320
- align-self: center;
321
- z-index: 1;
322
- display: flex;
323
- flex-wrap: wrap;
324
- align-items: center;
325
- gap: var(--uui-size-space-4);
326
- }
327
-
328
- /* the two sides share rows (headline, info, tabs, content), so the
329
- tab bars and properties line up even when the info boxes differ. */
330
- .sides {
331
- display: grid;
332
- grid-template-columns: 1fr 1fr;
333
- grid-template-rows: auto auto auto 1fr;
334
- gap: var(--uui-size-space-4) var(--uui-size-space-5);
335
- }
336
-
337
- .side {
338
- display: grid;
339
- grid-row: span 4;
340
- grid-template-rows: subgrid;
341
- align-items: start;
342
- min-width: 0;
343
- }
305
+ uSyncContentPreviewElement.styles = [
306
+ previewSideStyles,
307
+ css `
308
+ :host {
309
+ display: block;
310
+ container-type: inline-size;
311
+ }
344
312
 
345
- .side.current {
346
- grid-column: 1;
347
- grid-row: 1 / span 4;
348
- }
313
+ /* the toolbar shares the headline row with the current side, on the right. */
314
+ .toolbar {
315
+ grid-column: 2;
316
+ grid-row: 1;
317
+ justify-self: end;
318
+ align-self: center;
319
+ z-index: 1;
320
+ display: flex;
321
+ flex-wrap: wrap;
322
+ align-items: center;
323
+ gap: var(--uui-size-space-4);
324
+ }
349
325
 
350
- .side.incoming {
351
- grid-column: 2;
352
- grid-row: 1 / span 4;
353
- }
326
+ /* the two sides share rows (headline, info, tabs, content), so the
327
+ tab bars and properties line up even when the info boxes differ. */
328
+ .sides {
329
+ display: grid;
330
+ grid-template-columns: 1fr 1fr;
331
+ grid-template-rows: auto auto auto 1fr;
332
+ gap: var(--uui-size-space-4) var(--uui-size-space-5);
333
+ }
354
334
 
355
- .side > .info:not(:last-child) {
356
- align-self: stretch;
357
- }
335
+ .side {
336
+ display: grid;
337
+ grid-row: span 4;
338
+ grid-template-rows: subgrid;
339
+ align-items: start;
340
+ min-width: 0;
341
+ }
358
342
 
359
- @container (max-width: 760px) {
360
- .sides {
361
- grid-template-columns: 1fr;
362
- grid-template-rows: none;
363
- row-gap: var(--uui-size-layout-1);
343
+ .side.current {
344
+ grid-column: 2;
345
+ grid-row: 1 / span 4;
364
346
  }
365
347
 
366
- .side,
367
- .side.current,
368
- .side.incoming,
369
- .toolbar {
348
+ .side.incoming {
370
349
  grid-column: 1;
371
- grid-row: auto;
350
+ grid-row: 1 / span 4;
372
351
  }
373
352
 
374
- .side {
375
- display: flex;
376
- flex-direction: column;
377
- align-items: stretch;
378
- gap: var(--uui-size-space-4);
353
+ .side > .info:not(:last-child) {
354
+ align-self: stretch;
379
355
  }
380
356
 
381
- .side > .side-headline {
382
- align-self: auto;
383
- }
384
- }
357
+ @container (max-width: 760px) {
358
+ .sides {
359
+ grid-template-columns: 1fr;
360
+ grid-template-rows: none;
361
+ row-gap: var(--uui-size-layout-1);
362
+ }
385
363
 
386
- umb-property-dataset {
387
- display: flex;
388
- flex-direction: column;
389
- gap: var(--uui-size-space-4);
390
- min-width: 0;
391
- }
364
+ .side,
365
+ .side.current,
366
+ .side.incoming,
367
+ .toolbar {
368
+ grid-column: 1;
369
+ grid-row: auto;
370
+ }
392
371
 
393
- .side-headline {
394
- align-self: center;
395
- margin: 0;
396
- font-size: var(--uui-type-small-size);
397
- text-transform: uppercase;
398
- letter-spacing: 0.04em;
399
- color: var(--uui-color-text-alt);
400
- }
372
+ .side {
373
+ display: flex;
374
+ flex-direction: column;
375
+ align-items: stretch;
376
+ gap: var(--uui-size-space-4);
377
+ }
401
378
 
402
- .headline {
403
- display: flex;
404
- align-items: center;
405
- gap: var(--uui-size-space-3);
406
- }
379
+ .side > .side-headline {
380
+ align-self: auto;
381
+ }
382
+ }
407
383
 
408
- .meta {
409
- display: grid;
410
- grid-template-columns: max-content 1fr;
411
- align-items: center;
412
- gap: var(--uui-size-space-2) var(--uui-size-space-5);
413
- margin: 0 0 var(--uui-size-space-2);
414
- }
384
+ umb-property-dataset {
385
+ display: flex;
386
+ flex-direction: column;
387
+ gap: var(--uui-size-space-4);
388
+ min-width: 0;
389
+ }
415
390
 
416
- .meta dt {
417
- font-weight: 700;
418
- }
391
+ .headline {
392
+ display: flex;
393
+ align-items: center;
394
+ gap: var(--uui-size-space-3);
395
+ }
419
396
 
420
- .tags {
421
- display: inline-flex;
422
- flex-wrap: wrap;
423
- gap: var(--uui-size-space-2);
424
- }
397
+ .meta {
398
+ display: grid;
399
+ grid-template-columns: max-content 1fr;
400
+ align-items: center;
401
+ gap: var(--uui-size-space-2) var(--uui-size-space-5);
402
+ margin: 0 0 var(--uui-size-space-2);
403
+ }
425
404
 
426
- .meta dd {
427
- display: flex;
428
- flex-wrap: wrap;
429
- gap: var(--uui-size-space-2);
430
- margin: 0;
431
- }
405
+ .meta dt {
406
+ font-weight: 700;
407
+ }
432
408
 
433
- /* a changed field gets a soft highlight, spread with a shadow so the text doesn't move. */
434
- .changed:not(.property):not(.dot) {
435
- background: color-mix(in srgb, var(--uui-color-warning) 35%, transparent);
436
- border-radius: var(--uui-border-radius);
437
- box-shadow: 0 0 0 var(--uui-size-space-1)
438
- color-mix(in srgb, var(--uui-color-warning) 35%, transparent);
439
- }
409
+ .tags {
410
+ display: inline-flex;
411
+ flex-wrap: wrap;
412
+ gap: var(--uui-size-space-2);
413
+ }
440
414
 
441
- uui-tab-group {
442
- --uui-tab-divider: var(--uui-color-border);
443
- border-bottom: 1px solid var(--uui-color-border);
444
- }
415
+ .meta dd {
416
+ display: flex;
417
+ flex-wrap: wrap;
418
+ gap: var(--uui-size-space-2);
419
+ margin: 0;
420
+ }
445
421
 
446
- .tab-label {
447
- display: inline-flex;
448
- align-items: center;
449
- gap: var(--uui-size-space-2);
450
- white-space: nowrap;
451
- }
422
+ /* a changed field gets a soft highlight, spread with a shadow so the text doesn't move. */
423
+ .changed:not(.property):not(.dot) {
424
+ background: color-mix(in srgb, var(--usync-preview-change) 35%, transparent);
425
+ border-radius: var(--uui-border-radius);
426
+ box-shadow: 0 0 0 var(--uui-size-space-1)
427
+ color-mix(in srgb, var(--usync-preview-change) 35%, transparent);
428
+ }
452
429
 
453
- .dot {
454
- display: inline-block;
455
- width: 8px;
456
- height: 8px;
457
- border-radius: 50%;
458
- }
430
+ uui-tab-group {
431
+ --uui-tab-divider: var(--uui-color-border);
432
+ border-bottom: 1px solid var(--uui-color-border);
433
+ }
459
434
 
460
- .dot.changed {
461
- background: var(--uui-color-warning);
462
- }
435
+ .tab-label {
436
+ display: inline-flex;
437
+ align-items: center;
438
+ gap: var(--uui-size-space-2);
439
+ white-space: nowrap;
440
+ }
463
441
 
464
- /* marked with an inset bar rather than a border, so the content doesn't shift. */
465
- .property.added {
466
- box-shadow: inset 3px 0 0 var(--uui-color-positive);
467
- background: color-mix(in srgb, var(--uui-color-positive) 6%, transparent);
468
- }
442
+ .dot {
443
+ display: inline-block;
444
+ width: 8px;
445
+ height: 8px;
446
+ border-radius: 50%;
447
+ }
469
448
 
470
- .property.removed {
471
- box-shadow: inset 3px 0 0 var(--uui-color-danger);
472
- background: color-mix(in srgb, var(--uui-color-danger) 6%, transparent);
473
- }
449
+ .dot.changed {
450
+ background: var(--uui-color-warning);
451
+ }
474
452
 
475
- .property.changed {
476
- box-shadow: inset 3px 0 0 var(--uui-color-warning);
477
- background: color-mix(in srgb, var(--uui-color-warning) 10%, transparent);
478
- }
453
+ /* marked with an inset bar rather than a border, so the content doesn't shift.
454
+ the colour is the side's (red going, green coming in), whatever the change. */
455
+ .property.added,
456
+ .property.removed,
457
+ .property.changed {
458
+ box-shadow: inset 3px 0 0 var(--usync-preview-change);
459
+ background: color-mix(in srgb, var(--usync-preview-change) 10%, transparent);
460
+ }
479
461
 
480
- /* properties run edge to edge in their box, like the backoffice editor. */
481
- .property {
482
- padding: 0 var(--uui-size-space-5);
483
- margin: 0 calc(-1 * var(--uui-size-space-5));
484
- }
462
+ /* properties run edge to edge in their box, like the backoffice editor. */
463
+ .property {
464
+ padding: 0 var(--uui-size-space-5);
465
+ margin: 0 calc(-1 * var(--uui-size-space-5));
466
+ }
485
467
 
486
- .property:first-child {
487
- margin-top: calc(-1 * var(--uui-size-space-5));
488
- }
468
+ .property:first-child {
469
+ margin-top: calc(-1 * var(--uui-size-space-5));
470
+ }
489
471
 
490
- .property:last-child {
491
- margin-bottom: calc(-1 * var(--uui-size-space-5));
492
- }
472
+ .property:last-child {
473
+ margin-bottom: calc(-1 * var(--uui-size-space-5));
474
+ }
493
475
 
494
- .property + .property {
495
- border-top: 1px solid var(--uui-color-divider);
496
- }
476
+ .property + .property {
477
+ border-top: 1px solid var(--uui-color-divider);
478
+ }
497
479
 
498
- /* umb-property pads itself for a full workspace, tighten it up here. */
499
- umb-property {
500
- --uui-size-layout-1: var(--uui-size-space-4);
501
- }
480
+ /* umb-property pads itself for a full workspace, tighten it up here. */
481
+ umb-property {
482
+ --uui-size-layout-1: var(--uui-size-space-4);
483
+ }
502
484
 
503
- .empty {
504
- margin: 0;
505
- color: var(--uui-color-text-alt);
506
- }
507
- `;
485
+ .empty {
486
+ margin: 0;
487
+ color: var(--uui-color-text-alt);
488
+ }
489
+ `,
490
+ ];
508
491
  __decorate([
509
492
  property({ type: Object })
510
493
  ], uSyncContentPreviewElement.prototype, "preview", void 0);
package/dist/components/usync-content-type-preview.d.ts CHANGED
@@ -17,7 +17,7 @@ export declare class uSyncContentTypePreviewElement extends UmbLitElement {
17
17
  private _activeTab?;
18
18
  protected willUpdate(changed: PropertyValues<this>): void;
19
19
  render(): typeof nothing | import("lit-html").TemplateResult<1>;
20
- static styles: import("lit").CSSResult;
20
+ static styles: import("lit").CSSResult[];
21
21
  }
22
22
  export default uSyncContentTypePreviewElement;
23
23
  declare global {
package/dist/components/usync-content-type-preview.js CHANGED
@@ -19,6 +19,7 @@ var _uSyncContentTypePreviewElement_instances, _uSyncContentTypePreviewElement_s
19
19
  import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
20
20
  import { classMap, css, customElement, html, nothing, property, repeat, state, } from '@umbraco-cms/backoffice/external/lit';
21
21
  import '@umbraco-cms/backoffice/components';
22
+ import { previewSideStyles, renderPreviewHeadline, } from './preview-side.js';
22
23
  import { getPreviewModel, } from '../preview/types.js';
23
24
  import { buildContentTypeLayout, compositionIds, } from '../utils/preview/content-type-layout.js';
24
25
  import { diffContentTypes, } from '../utils/preview/content-type-diff.js';
@@ -65,8 +66,8 @@ let uSyncContentTypePreviewElement = class uSyncContentTypePreviewElement extend
65
66
  return nothing;
66
67
  return html `
67
68
  <div class="sides">
68
- ${__classPrivateFieldGet(this, _uSyncContentTypePreviewElement_instances, "m", _uSyncContentTypePreviewElement_renderSide).call(this, 'current', __classPrivateFieldGet(this, _uSyncContentTypePreviewElement_sides, "f").current)}
69
69
  ${__classPrivateFieldGet(this, _uSyncContentTypePreviewElement_instances, "m", _uSyncContentTypePreviewElement_renderSide).call(this, 'incoming', __classPrivateFieldGet(this, _uSyncContentTypePreviewElement_sides, "f").incoming)}
70
+ ${__classPrivateFieldGet(this, _uSyncContentTypePreviewElement_instances, "m", _uSyncContentTypePreviewElement_renderSide).call(this, 'current', __classPrivateFieldGet(this, _uSyncContentTypePreviewElement_sides, "f").current)}
70
71
  </div>
71
72
  `;
72
73
  }
@@ -79,22 +80,17 @@ _uSyncContentTypePreviewElement_newCompositions = new WeakMap();
79
80
  _uSyncContentTypePreviewElement_diff = new WeakMap();
80
81
  _uSyncContentTypePreviewElement_instances = new WeakSet();
81
82
  _uSyncContentTypePreviewElement_renderSide = function _uSyncContentTypePreviewElement_renderSide(side, type) {
82
- const headline = side === 'current'
83
- ? (this.labels?.current ??
84
- this.localize.termOrDefault('uSync_previewCurrent', 'Current (this site)'))
85
- : (this.labels?.incoming ??
86
- this.localize.termOrDefault('uSync_previewIncoming', 'Incoming (uSync files)'));
87
83
  if (!type) {
88
- return html `<div class="side">
89
- <h4 class="side-headline">${headline}</h4>
84
+ return html `<div class="side ${side}">
85
+ ${renderPreviewHeadline(this, side, this.labels)}
90
86
  <uui-box class="info"><p class="empty">${__classPrivateFieldGet(this, _uSyncContentTypePreviewElement_instances, "m", _uSyncContentTypePreviewElement_missingMessage).call(this, side)}</p></uui-box>
91
87
  </div>`;
92
88
  }
93
89
  const tabs = buildContentTypeLayout(type, __classPrivateFieldGet(this, _uSyncContentTypePreviewElement_compositions, "f"));
94
90
  const active = tabs.find((t) => t.name === this._activeTab) ?? tabs[0];
95
91
  return html `
96
- <div class="side">
97
- <h4 class="side-headline">${headline}</h4>
92
+ <div class="side ${side}">
93
+ ${renderPreviewHeadline(this, side, this.labels)}
98
94
  ${__classPrivateFieldGet(this, _uSyncContentTypePreviewElement_instances, "m", _uSyncContentTypePreviewElement_renderInfo).call(this, type)}
99
95
  ${tabs.length > 1 || (tabs.length === 1 && tabs[0].name)
100
96
  ? html `<uui-tab-group>
@@ -299,226 +295,221 @@ _uSyncContentTypePreviewElement_renderBadge = function _uSyncContentTypePreviewE
299
295
  >${change.status}</uui-tag
300
296
  >`;
301
297
  };
302
- uSyncContentTypePreviewElement.styles = css `
303
- :host {
304
- display: block;
305
- container-type: inline-size;
306
- }
307
-
308
- /* the two sides share rows (headline, info, tabs, content), so the
309
- tab bars and groups line up even when the info boxes differ. */
310
- .sides {
311
- display: grid;
312
- grid-template-columns: 1fr 1fr;
313
- grid-template-rows: auto auto auto 1fr;
314
- gap: var(--uui-size-space-4) var(--uui-size-space-5);
315
- }
316
-
317
- .side {
318
- display: grid;
319
- grid-row: span 4;
320
- grid-template-rows: subgrid;
321
- align-items: start;
322
- min-width: 0;
323
- }
324
-
325
- /* info boxes match heights across the sides (but a lone "not here" box doesn't stretch). */
326
- .side > .info:not(:last-child) {
327
- align-self: stretch;
328
- }
329
-
330
- @container (max-width: 760px) {
298
+ uSyncContentTypePreviewElement.styles = [
299
+ previewSideStyles,
300
+ css `
301
+ :host {
302
+ display: block;
303
+ container-type: inline-size;
304
+ }
305
+
306
+ /* the two sides share rows (headline, info, tabs, content), so the
307
+ tab bars and groups line up even when the info boxes differ. */
331
308
  .sides {
332
- grid-template-columns: 1fr;
333
- grid-template-rows: none;
334
- row-gap: var(--uui-size-layout-1);
309
+ display: grid;
310
+ grid-template-columns: 1fr 1fr;
311
+ grid-template-rows: auto auto auto 1fr;
312
+ gap: var(--uui-size-space-4) var(--uui-size-space-5);
335
313
  }
336
314
 
337
315
  .side {
316
+ display: grid;
317
+ grid-row: span 4;
318
+ grid-template-rows: subgrid;
319
+ align-items: start;
320
+ min-width: 0;
321
+ }
322
+
323
+ /* info boxes match heights across the sides (but a lone "not here" box doesn't stretch). */
324
+ .side > .info:not(:last-child) {
325
+ align-self: stretch;
326
+ }
327
+
328
+ @container (max-width: 760px) {
329
+ .sides {
330
+ grid-template-columns: 1fr;
331
+ grid-template-rows: none;
332
+ row-gap: var(--uui-size-layout-1);
333
+ }
334
+
335
+ .side {
336
+ display: flex;
337
+ flex-direction: column;
338
+ align-items: stretch;
339
+ gap: var(--uui-size-space-4);
340
+ grid-row: auto;
341
+ }
342
+ }
343
+
344
+ umb-property-dataset {
345
+ display: flex;
346
+ flex-direction: column;
347
+ gap: var(--uui-size-space-4);
348
+ min-width: 0;
349
+ }
350
+
351
+ .headline {
352
+ display: flex;
353
+ align-items: center;
354
+ flex-wrap: wrap;
355
+ gap: var(--uui-size-space-2) var(--uui-size-space-3);
356
+ }
357
+
358
+ .headline code {
359
+ font-size: var(--uui-type-small-size);
360
+ color: var(--uui-color-text-alt);
361
+ }
362
+
363
+ .info-body {
338
364
  display: flex;
339
365
  flex-direction: column;
340
- align-items: stretch;
341
366
  gap: var(--uui-size-space-4);
342
- grid-row: auto;
343
- }
344
- }
345
-
346
- umb-property-dataset {
347
- display: flex;
348
- flex-direction: column;
349
- gap: var(--uui-size-space-4);
350
- min-width: 0;
351
- }
352
-
353
- .side-headline {
354
- margin: 0;
355
- font-size: var(--uui-type-small-size);
356
- text-transform: uppercase;
357
- letter-spacing: 0.04em;
358
- color: var(--uui-color-text-alt);
359
- }
360
-
361
- .headline {
362
- display: flex;
363
- align-items: center;
364
- flex-wrap: wrap;
365
- gap: var(--uui-size-space-2) var(--uui-size-space-3);
366
- }
367
-
368
- .headline code {
369
- font-size: var(--uui-type-small-size);
370
- color: var(--uui-color-text-alt);
371
- }
372
-
373
- .info-body {
374
- display: flex;
375
- flex-direction: column;
376
- gap: var(--uui-size-space-4);
377
- }
378
-
379
- .tags {
380
- display: flex;
381
- flex-wrap: wrap;
382
- gap: var(--uui-size-space-2);
383
- }
384
-
385
- .description {
386
- margin: 0;
387
- }
388
-
389
- .meta {
390
- display: grid;
391
- grid-template-columns: max-content 1fr;
392
- align-items: center;
393
- gap: var(--uui-size-space-2) var(--uui-size-space-5);
394
- margin: 0;
395
- }
396
-
397
- .meta dt {
398
- font-weight: 700;
399
- }
400
-
401
- .meta dd {
402
- display: flex;
403
- flex-wrap: wrap;
404
- gap: var(--uui-size-space-2);
405
- margin: 0;
406
- }
407
-
408
- /* a changed field gets a soft highlight, spread with a shadow so the text doesn't move. */
409
- .changed:not(.property):not(uui-box) {
410
- background: color-mix(in srgb, var(--uui-color-warning) 35%, transparent);
411
- border-radius: var(--uui-border-radius);
412
- box-shadow: 0 0 0 var(--uui-size-space-1)
413
- color-mix(in srgb, var(--uui-color-warning) 35%, transparent);
414
- }
415
-
416
- uui-tab-group {
417
- --uui-tab-divider: var(--uui-color-border);
418
- border-bottom: 1px solid var(--uui-color-border);
419
- }
420
-
421
- .tab-label {
422
- display: inline-flex;
423
- align-items: center;
424
- gap: var(--uui-size-space-2);
425
- white-space: nowrap;
426
- }
427
-
428
- .dot {
429
- display: inline-block;
430
- width: 8px;
431
- height: 8px;
432
- border-radius: 50%;
433
- }
434
-
435
- .dot.added {
436
- background: var(--uui-color-positive);
437
- }
438
-
439
- .dot.removed {
440
- background: var(--uui-color-danger);
441
- }
442
-
443
- .dot.changed {
444
- background: var(--uui-color-warning);
445
- }
446
-
447
- uui-box.added {
448
- border-left: 3px solid var(--uui-color-positive);
449
- }
450
-
451
- uui-box.removed {
452
- border-left: 3px solid var(--uui-color-danger);
453
- }
454
-
455
- uui-box.changed {
456
- border-left: 3px solid var(--uui-color-warning);
457
- }
458
-
459
- /* marked with an inset bar rather than a border, so the content doesn't shift. */
460
- .property.added {
461
- box-shadow: inset 3px 0 0 var(--uui-color-positive);
462
- background: color-mix(in srgb, var(--uui-color-positive) 6%, transparent);
463
- }
464
-
465
- .property.removed {
466
- box-shadow: inset 3px 0 0 var(--uui-color-danger);
467
- background: color-mix(in srgb, var(--uui-color-danger) 6%, transparent);
468
- }
469
-
470
- .property.changed {
471
- box-shadow: inset 3px 0 0 var(--uui-color-warning);
472
- background: color-mix(in srgb, var(--uui-color-warning) 10%, transparent);
473
- }
474
-
475
- /* properties run edge to edge in their box, like the backoffice editor. */
476
- .property {
477
- padding: var(--uui-size-space-4) var(--uui-size-space-5) 0;
478
- margin: 0 calc(-1 * var(--uui-size-space-5));
479
- }
480
-
481
- .property:first-child,
482
- .headline + .property {
483
- margin-top: calc(-1 * var(--uui-size-space-5));
484
- }
485
-
486
- .property:last-child {
487
- margin-bottom: calc(-1 * var(--uui-size-space-5));
488
- }
489
-
490
- .property + .property {
491
- border-top: 1px solid var(--uui-color-divider);
492
- }
493
-
494
- /* umb-property pads itself for a full workspace, tighten it up here. */
495
- umb-property {
496
- --uui-size-layout-1: var(--uui-size-space-4);
497
- }
498
-
499
- .property-meta {
500
- display: flex;
501
- flex-wrap: wrap;
502
- align-items: center;
503
- gap: var(--uui-size-space-2) var(--uui-size-space-3);
504
- font-size: var(--uui-type-small-size);
505
- color: var(--uui-color-text-alt);
506
- }
507
-
508
- .property-meta code {
509
- color: var(--uui-color-text);
510
- }
511
-
512
- .inherited {
513
- font-style: italic;
514
- color: var(--uui-color-text-alt);
515
- }
516
-
517
- .empty {
518
- margin: 0;
519
- color: var(--uui-color-text-alt);
520
- }
521
- `;
367
+ }
368
+
369
+ .tags {
370
+ display: flex;
371
+ flex-wrap: wrap;
372
+ gap: var(--uui-size-space-2);
373
+ }
374
+
375
+ .description {
376
+ margin: 0;
377
+ }
378
+
379
+ .meta {
380
+ display: grid;
381
+ grid-template-columns: max-content 1fr;
382
+ align-items: center;
383
+ gap: var(--uui-size-space-2) var(--uui-size-space-5);
384
+ margin: 0;
385
+ }
386
+
387
+ .meta dt {
388
+ font-weight: 700;
389
+ }
390
+
391
+ .meta dd {
392
+ display: flex;
393
+ flex-wrap: wrap;
394
+ gap: var(--uui-size-space-2);
395
+ margin: 0;
396
+ }
397
+
398
+ /* a changed field gets a soft highlight, spread with a shadow so the text doesn't move. */
399
+ .changed:not(.property):not(uui-box) {
400
+ background: color-mix(in srgb, var(--usync-preview-change) 35%, transparent);
401
+ border-radius: var(--uui-border-radius);
402
+ box-shadow: 0 0 0 var(--uui-size-space-1)
403
+ color-mix(in srgb, var(--usync-preview-change) 35%, transparent);
404
+ }
405
+
406
+ uui-tab-group {
407
+ --uui-tab-divider: var(--uui-color-border);
408
+ border-bottom: 1px solid var(--uui-color-border);
409
+ }
410
+
411
+ .tab-label {
412
+ display: inline-flex;
413
+ align-items: center;
414
+ gap: var(--uui-size-space-2);
415
+ white-space: nowrap;
416
+ }
417
+
418
+ .dot {
419
+ display: inline-block;
420
+ width: 8px;
421
+ height: 8px;
422
+ border-radius: 50%;
423
+ }
424
+
425
+ .dot.added {
426
+ background: var(--uui-color-positive);
427
+ }
428
+
429
+ .dot.removed {
430
+ background: var(--uui-color-danger);
431
+ }
432
+
433
+ .dot.changed {
434
+ background: var(--uui-color-warning);
435
+ }
436
+
437
+ uui-box.added {
438
+ border-left: 3px solid var(--uui-color-positive);
439
+ }
440
+
441
+ uui-box.removed {
442
+ border-left: 3px solid var(--uui-color-danger);
443
+ }
444
+
445
+ uui-box.changed {
446
+ border-left: 3px solid var(--usync-preview-change);
447
+ }
448
+
449
+ /* marked with an inset bar rather than a border, so the content doesn't shift. */
450
+ .property.added {
451
+ box-shadow: inset 3px 0 0 var(--uui-color-positive);
452
+ background: color-mix(in srgb, var(--uui-color-positive) 6%, transparent);
453
+ }
454
+
455
+ .property.removed {
456
+ box-shadow: inset 3px 0 0 var(--uui-color-danger);
457
+ background: color-mix(in srgb, var(--uui-color-danger) 6%, transparent);
458
+ }
459
+
460
+ .property.changed {
461
+ box-shadow: inset 3px 0 0 var(--usync-preview-change);
462
+ background: color-mix(in srgb, var(--usync-preview-change) 10%, transparent);
463
+ }
464
+
465
+ /* properties run edge to edge in their box, like the backoffice editor. */
466
+ .property {
467
+ padding: var(--uui-size-space-4) var(--uui-size-space-5) 0;
468
+ margin: 0 calc(-1 * var(--uui-size-space-5));
469
+ }
470
+
471
+ .property:first-child,
472
+ .headline + .property {
473
+ margin-top: calc(-1 * var(--uui-size-space-5));
474
+ }
475
+
476
+ .property:last-child {
477
+ margin-bottom: calc(-1 * var(--uui-size-space-5));
478
+ }
479
+
480
+ .property + .property {
481
+ border-top: 1px solid var(--uui-color-divider);
482
+ }
483
+
484
+ /* umb-property pads itself for a full workspace, tighten it up here. */
485
+ umb-property {
486
+ --uui-size-layout-1: var(--uui-size-space-4);
487
+ }
488
+
489
+ .property-meta {
490
+ display: flex;
491
+ flex-wrap: wrap;
492
+ align-items: center;
493
+ gap: var(--uui-size-space-2) var(--uui-size-space-3);
494
+ font-size: var(--uui-type-small-size);
495
+ color: var(--uui-color-text-alt);
496
+ }
497
+
498
+ .property-meta code {
499
+ color: var(--uui-color-text);
500
+ }
501
+
502
+ .inherited {
503
+ font-style: italic;
504
+ color: var(--uui-color-text-alt);
505
+ }
506
+
507
+ .empty {
508
+ margin: 0;
509
+ color: var(--uui-color-text-alt);
510
+ }
511
+ `,
512
+ ];
522
513
  __decorate([
523
514
  property({ type: Object })
524
515
  ], uSyncContentTypePreviewElement.prototype, "preview", void 0);
package/dist/components/usync-data-type-preview.d.ts CHANGED
@@ -13,7 +13,7 @@ export declare class uSyncDataTypePreviewElement extends UmbLitElement {
13
13
  preview?: SyncItemPreviewResponse;
14
14
  labels?: uSyncPreviewLabels;
15
15
  render(): typeof nothing | import("lit-html").TemplateResult<1>;
16
- static styles: import("lit").CSSResult;
16
+ static styles: import("lit").CSSResult[];
17
17
  }
18
18
  export default uSyncDataTypePreviewElement;
19
19
  declare global {
package/dist/components/usync-data-type-preview.js CHANGED
@@ -13,6 +13,7 @@ var _uSyncDataTypePreviewElement_instances, _uSyncDataTypePreviewElement_renderS
13
13
  import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
14
14
  import { classMap, css, customElement, html, nothing, property, } from '@umbraco-cms/backoffice/external/lit';
15
15
  import '@umbraco-cms/backoffice/components';
16
+ import { previewSideStyles, renderPreviewHeadline, } from './preview-side.js';
16
17
  import { getPreviewModel, } from '../preview/types.js';
17
18
  import { deepEqual, prettyJson } from '../utils/diff/index.js';
18
19
  /**
@@ -33,22 +34,17 @@ let uSyncDataTypePreviewElement = class uSyncDataTypePreviewElement extends UmbL
33
34
  const incoming = model?.incoming ?? undefined;
34
35
  return html `
35
36
  <div class="sides">
36
- ${__classPrivateFieldGet(this, _uSyncDataTypePreviewElement_instances, "m", _uSyncDataTypePreviewElement_renderSide).call(this, 'current', current, incoming)}
37
37
  ${__classPrivateFieldGet(this, _uSyncDataTypePreviewElement_instances, "m", _uSyncDataTypePreviewElement_renderSide).call(this, 'incoming', incoming, current)}
38
+ ${__classPrivateFieldGet(this, _uSyncDataTypePreviewElement_instances, "m", _uSyncDataTypePreviewElement_renderSide).call(this, 'current', current, incoming)}
38
39
  </div>
39
40
  `;
40
41
  }
41
42
  };
42
43
  _uSyncDataTypePreviewElement_instances = new WeakSet();
43
44
  _uSyncDataTypePreviewElement_renderSide = function _uSyncDataTypePreviewElement_renderSide(side, dataType, other) {
44
- const headline = side === 'current'
45
- ? (this.labels?.current ??
46
- this.localize.termOrDefault('uSync_previewCurrent', 'Current (this site)'))
47
- : (this.labels?.incoming ??
48
- this.localize.termOrDefault('uSync_previewIncoming', 'Incoming (uSync files)'));
49
45
  return html `
50
- <div class="side">
51
- <h4 class="side-headline">${headline}</h4>
46
+ <div class="side ${side}">
47
+ ${renderPreviewHeadline(this, side, this.labels)}
52
48
  ${dataType
53
49
  ? html `
54
50
  ${__classPrivateFieldGet(this, _uSyncDataTypePreviewElement_instances, "m", _uSyncDataTypePreviewElement_renderInfo).call(this, dataType, other)} ${__classPrivateFieldGet(this, _uSyncDataTypePreviewElement_instances, "m", _uSyncDataTypePreviewElement_renderEditor).call(this, dataType)}
@@ -129,148 +125,143 @@ _uSyncDataTypePreviewElement_renderConfig = function _uSyncDataTypePreviewElemen
129
125
  </uui-box>
130
126
  `;
131
127
  };
132
- uSyncDataTypePreviewElement.styles = css `
133
- :host {
134
- display: block;
135
- container-type: inline-size;
136
- }
137
-
138
- /* the two sides share rows (headline, info, editor, config), so the
139
- boxes line up across the sides. */
140
- .sides {
141
- display: grid;
142
- grid-template-columns: 1fr 1fr;
143
- grid-template-rows: auto auto auto 1fr;
144
- gap: var(--uui-size-space-4) var(--uui-size-space-5);
145
- }
146
-
147
- .side {
148
- display: grid;
149
- grid-row: span 4;
150
- grid-template-rows: subgrid;
151
- min-width: 0;
152
- }
153
-
154
- .side > :last-child {
155
- align-self: start;
156
- }
128
+ uSyncDataTypePreviewElement.styles = [
129
+ previewSideStyles,
130
+ css `
131
+ :host {
132
+ display: block;
133
+ container-type: inline-size;
134
+ }
157
135
 
158
- @container (max-width: 760px) {
136
+ /* the two sides share rows (headline, info, editor, config), so the
137
+ boxes line up across the sides. */
159
138
  .sides {
160
- grid-template-columns: 1fr;
161
- grid-template-rows: none;
162
- row-gap: var(--uui-size-layout-1);
139
+ display: grid;
140
+ grid-template-columns: 1fr 1fr;
141
+ grid-template-rows: auto auto auto 1fr;
142
+ gap: var(--uui-size-space-4) var(--uui-size-space-5);
163
143
  }
164
144
 
165
145
  .side {
166
- display: flex;
167
- flex-direction: column;
168
- gap: var(--uui-size-space-4);
169
- grid-row: auto;
146
+ display: grid;
147
+ grid-row: span 4;
148
+ grid-template-rows: subgrid;
149
+ min-width: 0;
170
150
  }
171
- }
172
151
 
173
- .side-headline {
174
- margin: 0;
175
- font-size: var(--uui-type-small-size);
176
- text-transform: uppercase;
177
- letter-spacing: 0.04em;
178
- color: var(--uui-color-text-alt);
179
- }
152
+ .side > :last-child {
153
+ align-self: start;
154
+ }
155
+
156
+ @container (max-width: 760px) {
157
+ .sides {
158
+ grid-template-columns: 1fr;
159
+ grid-template-rows: none;
160
+ row-gap: var(--uui-size-layout-1);
161
+ }
180
162
 
181
- .headline {
182
- display: flex;
183
- align-items: center;
184
- gap: var(--uui-size-space-3);
185
- }
163
+ .side {
164
+ display: flex;
165
+ flex-direction: column;
166
+ gap: var(--uui-size-space-4);
167
+ grid-row: auto;
168
+ }
169
+ }
186
170
 
187
- .meta {
188
- display: grid;
189
- grid-template-columns: max-content 1fr;
190
- align-items: baseline;
191
- gap: var(--uui-size-space-3) var(--uui-size-space-5);
192
- margin: 0;
193
- }
171
+ .headline {
172
+ display: flex;
173
+ align-items: center;
174
+ gap: var(--uui-size-space-3);
175
+ }
176
+
177
+ .meta {
178
+ display: grid;
179
+ grid-template-columns: max-content 1fr;
180
+ align-items: baseline;
181
+ gap: var(--uui-size-space-3) var(--uui-size-space-5);
182
+ margin: 0;
183
+ }
194
184
 
195
- .meta dt {
196
- font-weight: 700;
197
- }
185
+ .meta dt {
186
+ font-weight: 700;
187
+ }
198
188
 
199
- .meta dd {
200
- margin: 0;
201
- overflow-wrap: anywhere;
202
- }
189
+ .meta dd {
190
+ margin: 0;
191
+ overflow-wrap: anywhere;
192
+ }
203
193
 
204
- /* a changed field gets a soft highlight, spread with a shadow so the text doesn't move. */
205
- .changed {
206
- background: color-mix(in srgb, var(--uui-color-warning) 35%, transparent);
207
- border-radius: var(--uui-border-radius);
208
- box-shadow: 0 0 0 var(--uui-size-space-1)
209
- color-mix(in srgb, var(--uui-color-warning) 35%, transparent);
210
- }
194
+ /* a changed field gets a soft highlight, spread with a shadow so the text doesn't move. */
195
+ .changed {
196
+ background: color-mix(in srgb, var(--usync-preview-change) 35%, transparent);
197
+ border-radius: var(--uui-border-radius);
198
+ box-shadow: 0 0 0 var(--uui-size-space-1)
199
+ color-mix(in srgb, var(--usync-preview-change) 35%, transparent);
200
+ }
211
201
 
212
- /* umb-property pads itself for a full workspace, tighten it up here. */
213
- umb-property {
214
- --uui-size-layout-1: var(--uui-size-space-2);
215
- }
202
+ /* umb-property pads itself for a full workspace, tighten it up here. */
203
+ umb-property {
204
+ --uui-size-layout-1: var(--uui-size-space-2);
205
+ }
216
206
 
217
- table {
218
- width: 100%;
219
- border-collapse: collapse;
220
- margin: calc(-1 * var(--uui-size-space-2)) 0;
221
- }
207
+ table {
208
+ width: 100%;
209
+ border-collapse: collapse;
210
+ margin: calc(-1 * var(--uui-size-space-2)) 0;
211
+ }
222
212
 
223
- tr + tr {
224
- border-top: 1px solid var(--uui-color-divider);
225
- }
213
+ tr + tr {
214
+ border-top: 1px solid var(--uui-color-divider);
215
+ }
226
216
 
227
- th,
228
- td {
229
- text-align: left;
230
- vertical-align: baseline;
231
- padding: var(--uui-size-space-3) var(--uui-size-space-3);
232
- }
217
+ th,
218
+ td {
219
+ text-align: left;
220
+ vertical-align: baseline;
221
+ padding: var(--uui-size-space-3) var(--uui-size-space-3);
222
+ }
233
223
 
234
- /* the alias column is as wide as the longest alias (up to 40%), so values sit beside their names. */
235
- th {
236
- width: 1%;
237
- max-width: 40%;
238
- white-space: nowrap;
239
- font-weight: 700;
240
- }
224
+ /* the alias column is as wide as the longest alias (up to 40%), so values sit beside their names. */
225
+ th {
226
+ width: 1%;
227
+ max-width: 40%;
228
+ white-space: nowrap;
229
+ font-weight: 700;
230
+ }
241
231
 
242
- th code,
243
- td pre {
244
- font-size: var(--uui-type-small-size);
245
- }
232
+ th code,
233
+ td pre {
234
+ font-size: var(--uui-type-small-size);
235
+ }
246
236
 
247
- td pre {
248
- margin: 0;
249
- white-space: pre-wrap;
250
- word-break: break-word;
251
- }
237
+ td pre {
238
+ margin: 0;
239
+ white-space: pre-wrap;
240
+ word-break: break-word;
241
+ }
252
242
 
253
- /* marked with an inset bar rather than a border, so the content doesn't shift. */
254
- tr.row-changed {
255
- box-shadow: inset 3px 0 0 var(--uui-color-warning);
256
- background: color-mix(in srgb, var(--uui-color-warning) 10%, transparent);
257
- }
243
+ /* marked with an inset bar rather than a border, so the content doesn't shift. */
244
+ tr.row-changed {
245
+ box-shadow: inset 3px 0 0 var(--usync-preview-change);
246
+ background: color-mix(in srgb, var(--usync-preview-change) 10%, transparent);
247
+ }
258
248
 
259
- tr.row-added {
260
- box-shadow: inset 3px 0 0 var(--uui-color-positive);
261
- background: color-mix(in srgb, var(--uui-color-positive) 6%, transparent);
262
- }
249
+ tr.row-added {
250
+ box-shadow: inset 3px 0 0 var(--uui-color-positive);
251
+ background: color-mix(in srgb, var(--uui-color-positive) 6%, transparent);
252
+ }
263
253
 
264
- tr.row-removed {
265
- box-shadow: inset 3px 0 0 var(--uui-color-danger);
266
- background: color-mix(in srgb, var(--uui-color-danger) 6%, transparent);
267
- }
254
+ tr.row-removed {
255
+ box-shadow: inset 3px 0 0 var(--uui-color-danger);
256
+ background: color-mix(in srgb, var(--uui-color-danger) 6%, transparent);
257
+ }
268
258
 
269
- .empty {
270
- margin: 0;
271
- color: var(--uui-color-text-alt);
272
- }
273
- `;
259
+ .empty {
260
+ margin: 0;
261
+ color: var(--uui-color-text-alt);
262
+ }
263
+ `,
264
+ ];
274
265
  __decorate([
275
266
  property({ type: Object })
276
267
  ], uSyncDataTypePreviewElement.prototype, "preview", void 0);
package/package.json CHANGED
@@ -8,7 +8,7 @@
8
8
  "homepage": "https://jumoo.co.uk/uSync",
9
9
  "license": "MPL-2.0",
10
10
  "type": "module",
11
- "version": "17.6.1-prerelease.20",
11
+ "version": "17.6.1",
12
12
  "main": "./dist/usync.js",
13
13
  "types": "./dist/index.d.ts",
14
14
  "module": "./dist/usync.js",