@lit-pigeon/editor 0.1.2 → 0.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.
package/dist/index.d.ts CHANGED
@@ -1,18 +1,24 @@
1
1
  import { AssetManagerConfig } from '@lit-pigeon/core';
2
2
  import { AssetStorage } from '@lit-pigeon/core';
3
+ import { BrandColor } from '@lit-pigeon/core';
4
+ import { BrandKit } from '@lit-pigeon/core';
3
5
  import { ButtonBlock } from '@lit-pigeon/core';
4
6
  import { ColumnNode } from '@lit-pigeon/core';
5
7
  import { CSSResult } from 'lit';
6
8
  import { DividerBlock } from '@lit-pigeon/core';
7
9
  import { EditorConfig } from '@lit-pigeon/core';
10
+ import { FontDefinition } from '@lit-pigeon/core';
8
11
  import { HeroBlock } from '@lit-pigeon/core';
9
12
  import { HtmlBlock } from '@lit-pigeon/core';
10
13
  import { ImageBlock } from '@lit-pigeon/core';
14
+ import { LinkType } from '@lit-pigeon/core';
11
15
  import { LitElement } from 'lit';
12
16
  import { MergeTag } from '@lit-pigeon/core';
13
17
  import { NavBarBlock } from '@lit-pigeon/core';
14
18
  import { PigeonDocument } from '@lit-pigeon/core';
19
+ import { PropertyValues } from 'lit';
15
20
  import { Renderer } from '@lit-pigeon/core';
21
+ import { RowLibraryStorage } from '@lit-pigeon/core';
16
22
  import { RowNode } from '@lit-pigeon/core';
17
23
  import { Selection as Selection_2 } from '@lit-pigeon/core';
18
24
  import { SocialBlock } from '@lit-pigeon/core';
@@ -46,13 +52,11 @@ export declare interface DragData {
46
52
  blockId?: string;
47
53
  rowId?: string;
48
54
  columnId?: string;
55
+ /** Saved row node for library-row drags. */
56
+ node?: RowNode;
49
57
  }
50
58
 
51
- /**
52
- * Drag-and-drop manager using native HTML5 drag/drop API.
53
- * Stores drag state globally so any component can query it.
54
- */
55
- export declare type DragItemType = 'palette-block' | 'palette-row' | 'existing-block' | 'existing-row';
59
+ export declare type DragItemType = 'palette-block' | 'palette-row' | 'existing-block' | 'existing-row' | 'library-row';
56
60
 
57
61
  /**
58
62
  * Drop-zone calculation utilities.
@@ -146,13 +150,14 @@ export declare class PigeonAssetManager extends LitElement {
146
150
  export declare class PigeonBodyPanel extends LitElement {
147
151
  doc: PigeonDocument;
148
152
  mergeTags: MergeTag[];
153
+ swatches: BrandColor[];
154
+ brandFonts: FontDefinition[];
149
155
  private _pickerOpen;
150
156
  private _pickerX;
151
157
  private _pickerY;
152
158
  private _previewInputRef;
153
159
  private _triggerRef;
154
160
  static styles: CSSResult[];
155
- private _fontFamilies;
156
161
  render(): TemplateResult<1>;
157
162
  private _togglePicker;
158
163
  private _onMergeTagInsert;
@@ -188,12 +193,15 @@ export declare class PigeonButtonPanel extends LitElement {
188
193
  block: ButtonBlock;
189
194
  rowId: string;
190
195
  columnId: string;
191
- static styles: CSSResult[];
196
+ swatches: BrandColor[];
197
+ linkTypes: LinkType[];
198
+ static styles: CSSResult;
192
199
  render(): TemplateResult<1>;
193
200
  private _emit;
194
201
  private _onTextChange;
195
202
  private _contentToText;
196
203
  private _onHrefChange;
204
+ private _onLinkTypeSelect;
197
205
  private _onBgColorChange;
198
206
  private _onTextColorChange;
199
207
  private _onBorderRadiusChange;
@@ -217,6 +225,9 @@ export declare class PigeonCanvas extends LitElement {
217
225
  device: 'desktop' | 'tablet' | 'mobile';
218
226
  private _rowDropIndex;
219
227
  private _isDragOver;
228
+ /** Row currently under the pointer, or null. Drives which single row shows
229
+ * its action bar so adjacent rows' bars never overlap. */
230
+ private _hoveredRowId;
220
231
  static styles: CSSResult;
221
232
  render(): TemplateResult<1>;
222
233
  /**
@@ -226,6 +237,14 @@ export declare class PigeonCanvas extends LitElement {
226
237
  * the frame stays neutral).
227
238
  */
228
239
  private _renderCanvasArea;
240
+ /**
241
+ * Tracks the row under the pointer by walking the composed path for the
242
+ * nearest `<pigeon-row>`. Because the action bar is a DOM child of the row
243
+ * (even though it sits in the outer margin), hovering the bar still resolves
244
+ * to that row, so it stays visible. Over empty canvas it resolves to null,
245
+ * falling back to the selected row.
246
+ */
247
+ private _onPointerOverRow;
229
248
  private _onCanvasClick;
230
249
  private _onDragOver;
231
250
  private _onDragLeave;
@@ -236,8 +255,11 @@ export declare class PigeonCanvas extends LitElement {
236
255
  export declare class PigeonColorPicker extends LitElement {
237
256
  label: string;
238
257
  value: string;
258
+ /** Optional brand-kit swatches rendered as quick-pick buttons. */
259
+ swatches: BrandColor[];
239
260
  static styles: CSSResult;
240
261
  render(): TemplateResult<1>;
262
+ private _applySwatch;
241
263
  private _onColorInput;
242
264
  private _onTextChange;
243
265
  private _emitChange;
@@ -250,6 +272,9 @@ export declare class PigeonColumn extends LitElement {
250
272
  editingBlockId: string | null;
251
273
  private _dropIndex;
252
274
  private _isDragOver;
275
+ /** Id of the block currently being dragged from this column, or null. Dims
276
+ * the source block while a reorder drag is in flight. */
277
+ private _draggingBlockId;
253
278
  static styles: CSSResult;
254
279
  render(): TemplateResult<1>;
255
280
  private _renderBlock;
@@ -264,6 +289,9 @@ export declare class PigeonColumn extends LitElement {
264
289
  private _onDragOver;
265
290
  private _onDragLeave;
266
291
  private _onDrop;
292
+ private _resetDragState;
293
+ private _onBlockDragStart;
294
+ private _onBlockDragEnd;
267
295
  }
268
296
 
269
297
  export declare class PigeonDividerBlock extends LitElement {
@@ -339,7 +367,9 @@ export declare class PigeonEditor extends LitElement {
339
367
  /** Optional renderer for preview mode. */
340
368
  renderer?: Renderer;
341
369
  /** Optional function to convert document to MJML. */
342
- documentToMjml?: (doc: PigeonDocument) => string;
370
+ documentToMjml?: (doc: PigeonDocument, options?: {
371
+ fonts?: FontDefinition[];
372
+ }) => string;
343
373
  /**
344
374
  * Optional template storage backend. When unset, the editor falls back to
345
375
  * an in-memory storage seeded with the starter templates so the picker is
@@ -366,12 +396,23 @@ export declare class PigeonEditor extends LitElement {
366
396
  private _editingBlockId;
367
397
  /** Lazily-initialised default template storage. */
368
398
  private _defaultTemplateStorage?;
399
+ /** Lazily-initialised default row library storage. */
400
+ private _defaultRowLibrary?;
369
401
  /** In-memory clipboard for Cmd/Ctrl+C / Cmd/Ctrl+V on blocks. */
370
402
  private _clipboard;
403
+ private _activeBrandKit;
404
+ private _brandKitStorage;
371
405
  static styles: CSSResult[];
372
406
  connectedCallback(): void;
373
407
  disconnectedCallback(): void;
374
408
  updated(changed: Map<string, unknown>): void;
409
+ /**
410
+ * Set the host `dir` attribute based on `config.locale` and `config.dir`.
411
+ * The host `dir` attribute drives the layout direction automatically for RTL locales.
412
+ * The `.editor-body` flex layout will flip under `dir="rtl"` via the browser's built-in
413
+ * bidirectional layout support.
414
+ */
415
+ private _applyDir;
375
416
  /**
376
417
  * Sync the active `theme` to the host classes the token sheet keys off, and
377
418
  * apply any `themeOverrides` as inline custom properties.
@@ -396,6 +437,23 @@ export declare class PigeonEditor extends LitElement {
396
437
  setMergeTags(tags: MergeTag[]): void;
397
438
  render(): TemplateResult<1>;
398
439
  private _resolveTemplateStorage;
440
+ private _resolveRowLibrary;
441
+ private _linkTypes;
442
+ /**
443
+ * Resolve `config.brandKit` into a single active kit. A plain `BrandKit` is
444
+ * used directly; a `BrandKitStorage` (duck-typed by a `list` method) is
445
+ * async-loaded and the first kit becomes active.
446
+ */
447
+ private _resolveBrandKit;
448
+ /** Fonts to load in preview/export: host fontConfig + brand fonts that carry a URL, deduped by family. */
449
+ private _renderFonts;
450
+ private _emitBrandKitError;
451
+ private _handleBrandKitEdit;
452
+ /** Apply a single body attribute through an undoable transaction. */
453
+ private _applyBodyAttribute;
454
+ private _handleBrandColorApply;
455
+ private _handleBrandFontApply;
456
+ private _handleBrandLogoInsert;
399
457
  private _handleTemplatesOpen;
400
458
  private _handleTemplateLoad;
401
459
  private _handleTemplateSave;
@@ -417,10 +475,17 @@ export declare class PigeonEditor extends LitElement {
417
475
  private _handleBlockExitEdit;
418
476
  private _handleBlockSelect;
419
477
  private _handleRowSelect;
478
+ private _handleColumnSelect;
420
479
  private _handleBodySelect;
421
480
  private _handleRowMove;
422
481
  private _handleRowDuplicate;
423
482
  private _handleRowDelete;
483
+ private _handleRowSave;
484
+ private _handleRowInsertSaved;
485
+ private _handleLibraryInsert;
486
+ private _handleLibraryDelete;
487
+ private _refreshSavedTab;
488
+ private _emitRowLibraryError;
424
489
  /**
425
490
  * Returns true if the event originates from a text-editing context
426
491
  * (input, textarea, select, or contentEditable element), in which
@@ -473,6 +538,7 @@ export declare class PigeonHeroPanel extends LitElement {
473
538
  columnId: string;
474
539
  assetManagerConfig?: AssetManagerConfig;
475
540
  assetStorage?: AssetStorage;
541
+ swatches: BrandColor[];
476
542
  private _assetManagerOpen;
477
543
  static styles: CSSResult[];
478
544
  render(): TemplateResult<1>;
@@ -565,6 +631,7 @@ export declare class PigeonNavBarPanel extends LitElement {
565
631
  block: NavBarBlock;
566
632
  rowId: string;
567
633
  columnId: string;
634
+ swatches: BrandColor[];
568
635
  static styles: CSSResult[];
569
636
  render(): TemplateResult<1>;
570
637
  private _emit;
@@ -583,13 +650,22 @@ export declare class PigeonNavBarPanel extends LitElement {
583
650
  export declare class PigeonPalette extends LitElement {
584
651
  doc?: PigeonDocument;
585
652
  selection: Selection_2 | null;
653
+ brandKit: BrandKit | null;
654
+ rowLibrary: RowLibraryStorage | null;
586
655
  private _blockDefs;
587
656
  private _activeTab;
657
+ private _brandTabLoaded;
658
+ private _savedTabLoaded;
588
659
  static styles: CSSResult;
589
660
  connectedCallback(): void;
661
+ updated(changed: PropertyValues): void;
590
662
  render(): TemplateResult<1>;
591
663
  private _renderContentTab;
592
664
  private _renderLayersTab;
665
+ private _handleBrandTabClick;
666
+ private _renderBrandTab;
667
+ private _handleSavedTabClick;
668
+ private _renderSavedTab;
593
669
  }
594
670
 
595
671
  export declare class PigeonPaletteItem extends LitElement {
@@ -611,7 +687,10 @@ export declare class PigeonPaletteItem extends LitElement {
611
687
  export declare class PigeonPreview extends LitElement {
612
688
  renderer?: Renderer;
613
689
  doc?: PigeonDocument;
614
- documentToMjml?: (doc: PigeonDocument) => string;
690
+ documentToMjml?: (doc: PigeonDocument, options?: {
691
+ fonts?: FontDefinition[];
692
+ }) => string;
693
+ fonts: FontDefinition[];
615
694
  open: boolean;
616
695
  private _viewMode;
617
696
  private _device;
@@ -644,8 +723,22 @@ export declare class PigeonProperties extends LitElement {
644
723
  mergeTags: MergeTag[];
645
724
  assetManagerConfig?: AssetManagerConfig;
646
725
  assetStorage?: AssetStorage;
726
+ brandKit: BrandKit | null;
727
+ fontConfig: FontDefinition[];
728
+ linkTypes: LinkType[];
729
+ private get _swatches();
730
+ private get _brandFonts();
647
731
  static styles: CSSResult;
648
732
  render(): TemplateResult<1>;
733
+ /**
734
+ * Renders the parent-selection trail. `Row` is always a clickable jump to
735
+ * the parent row. When a block is selected (`current` set), `Column` is also
736
+ * clickable and the block label is the trailing, non-interactive crumb. For
737
+ * a column selection (`current` omitted) `Column` is the trailing crumb.
738
+ */
739
+ private _renderBreadcrumb;
740
+ private _select;
741
+ private _blockLabel;
649
742
  private _renderBlockPanel;
650
743
  private _findRow;
651
744
  private _findBlock;
@@ -657,6 +750,9 @@ export declare class PigeonRow extends LitElement {
657
750
  totalRows: number;
658
751
  selection: Selection_2 | null;
659
752
  editingBlockId: string | null;
753
+ /** Whether to show this row's action bar / label. The canvas drives this so
754
+ * that only one row shows its bar at a time (see pigeon-canvas). */
755
+ showActions: boolean;
660
756
  private _dragging;
661
757
  static styles: CSSResult;
662
758
  render(): TemplateResult<1>;
@@ -664,6 +760,7 @@ export declare class PigeonRow extends LitElement {
664
760
  private _onMoveUp;
665
761
  private _onMoveDown;
666
762
  private _onDuplicate;
763
+ private _onSave;
667
764
  private _onDelete;
668
765
  private _onDragStart;
669
766
  private _onDragEnd;
@@ -672,7 +769,7 @@ export declare class PigeonRow extends LitElement {
672
769
  export declare class PigeonRowPanel extends LitElement {
673
770
  row: RowNode;
674
771
  static styles: CSSResult[];
675
- private _layouts;
772
+ private get _layouts();
676
773
  render(): TemplateResult<1>;
677
774
  private _emitRowUpdate;
678
775
  private _onLayoutSelect;