@lit-pigeon/editor 0.1.3 → 0.2.0

package/dist/templates.js

@@ -1,11 +1,260 @@
-import { LitElement as m, html as o, css as f } from "lit";
-import { property as c, state as s, customElement as g } from "lit/decorators.js";
-var h = Object.defineProperty, b = Object.getOwnPropertyDescriptor, r = (e, i, p, n) => {
-  for (var a = n > 1 ? void 0 : n ? b(i, p) : i, l = e.length - 1, d; l >= 0; l--)
-    (d = e[l]) && (a = (n ? d(i, p, a) : d(a)) || a);
-  return n && a && h(i, p, a), a;
+import { LitElement as u, html as l, css as v } from "lit";
+import { property as g, state as p, customElement as f } from "lit/decorators.js";
+const m = {
+  // toolbar
+  "toolbar.undo": "Undo",
+  "toolbar.redo": "Redo",
+  "toolbar.preview-device": "Preview device",
+  "toolbar.desktop-view": "Desktop view",
+  "toolbar.tablet-view-title": "Tablet view (768px)",
+  "toolbar.tablet-view": "Tablet view",
+  "toolbar.mobile-view-title": "Mobile view (375px)",
+  "toolbar.mobile-view": "Mobile view",
+  "toolbar.fullscreen": "Fullscreen",
+  "toolbar.exit-fullscreen": "Exit fullscreen",
+  "toolbar.enter-fullscreen": "Enter fullscreen",
+  "toolbar.templates": "Templates",
+  "toolbar.preview": "Preview",
+  "toolbar.export": "Export",
+  "toolbar.export-format": "Export format",
+  "toolbar.export-html": "Export HTML",
+  "toolbar.export-mjml": "Export MJML",
+  "toolbar.export-json": "Export JSON",
+  // palette
+  "palette.label": "Palette",
+  "palette.tab.content": "Content",
+  "palette.tab.layers": "Layers",
+  "palette.tab.brand": "Brand",
+  "palette.tab.saved": "Saved",
+  // palette — layout section
+  "palette.layout.section-content": "Content",
+  "palette.layout.section-layout": "Layout",
+  "palette.layout.1-col": "1 Column",
+  "palette.layout.2-col": "2 Columns",
+  "palette.layout.3-col": "3 Columns",
+  "palette.layout.4-col": "4 Columns",
+  // palette — brand tab
+  "palette.brand.colors": "Colors",
+  "palette.brand.fonts": "Fonts",
+  "palette.brand.logos": "Logos",
+  "palette.brand.add": "+ Add",
+  "palette.brand.no-colors": "No colors yet",
+  "palette.brand.no-fonts": "No fonts yet",
+  "palette.brand.no-logos": "No logos yet",
+  "palette.brand.color-name-label": "Color name",
+  "palette.brand.color-value-label": "Color value",
+  "palette.brand.delete-title": "Delete",
+  "palette.brand.insert-logo-title": "Insert logo",
+  // palette — saved tab
+  "palette.saved.empty": "No saved rows yet. Use the bookmark action on a row to save it here.",
+  "palette.saved.delete-title": "Delete",
+  // preview
+  "preview.heading": "Preview",
+  "preview.tab-group-label": "Preview format",
+  "preview.tab.preview": "Preview",
+  "preview.tab.html": "HTML",
+  "preview.tab.mjml": "MJML",
+  "preview.tab.json": "JSON",
+  "preview.device.desktop": "Desktop preview",
+  "preview.device.mobile": "Mobile preview",
+  "preview.close": "Close preview",
+  "preview.loading": "Rendering...",
+  // template picker
+  "template.heading": "Templates",
+  "template.close": "Close",
+  "template.section.choose": "Choose a template",
+  "template.empty": "No templates available yet.",
+  "template.section.save": "Save current as template",
+  "template.field.name": "Name",
+  "template.field.name-placeholder": "My template",
+  "template.field.category": "Category",
+  "template.field.description": "Description (optional)",
+  "template.field.description-placeholder": "What is this template for?",
+  "template.cancel": "Cancel",
+  "template.save": "Save template",
+  "template.error.name-required": "Name is required",
+  // asset manager
+  "asset.title": "Select asset",
+  "asset.title-upload": "Select image",
+  "asset.close": "Close",
+  "asset.tab.library": "Library",
+  "asset.tab.upload": "Upload",
+  "asset.folder.all": "All folders",
+  "asset.search": "Search assets",
+  "asset.tag-filter-label": "Filter by tag",
+  "asset.loading": "Loading…",
+  "asset.empty.filtered": "No assets match your filters.",
+  "asset.empty.no-assets": "No saved assets yet. Upload one to get started.",
+  "asset.drop-zone.label": "Drag & drop an image here",
+  "asset.drop-zone.hint": "or click to browse",
+  "asset.url.separator": "or enter URL",
+  "asset.url.placeholder": "https://example.com/image.jpg",
+  "asset.url.use": "Use URL",
+  // property panels — shared (common) labels
+  "panel.common.backgroundColor": "Background Color",
+  "panel.common.padding": "Padding",
+  "panel.common.outerPadding": "Outer Padding",
+  "panel.common.innerPadding": "Inner Padding",
+  "panel.common.alignment": "Alignment",
+  "panel.common.fontSize": "Font Size",
+  "panel.common.borderRadius": "Border Radius",
+  "panel.common.linkUrl": "Link URL",
+  "panel.common.urlPlaceholder": "https://example.com",
+  "panel.common.contentHtml": "Content (HTML)",
+  "panel.common.insertMergeTag": "Insert merge tag",
+  "panel.common.tagBtn": "{ } Tag",
+  "panel.common.uploadImage": "Upload Image",
+  "panel.common.left": "Left",
+  "panel.common.center": "Center",
+  // property panels — body
+  "panel.body.title": "Email Body",
+  "panel.body.contentWidth": "Content Width",
+  "panel.body.fontFamily": "Font Family",
+  "panel.body.contentAlignment": "Content Alignment",
+  "panel.body.emailName": "Email Name",
+  "panel.body.previewText": "Preview Text",
+  "panel.body.previewTextPlaceholder": "Email preview text...",
+  // property panels — text
+  "panel.text.title": "Text Properties",
+  "panel.text.textAlign": "Text Align",
+  "panel.text.lineHeight": "Line Height",
+  // property panels — button
+  "panel.button.title": "Button Properties",
+  "panel.button.buttonText": "Button Text",
+  "panel.button.textColor": "Text Color",
+  "panel.button.fontWeight": "Font Weight",
+  "panel.button.fontWeight.normal": "Normal (400)",
+  "panel.button.fontWeight.medium": "Medium (500)",
+  "panel.button.fontWeight.semibold": "Semibold (600)",
+  "panel.button.fontWeight.bold": "Bold (700)",
+  "panel.button.fullWidth": "Full Width",
+  // property panels — image
+  "panel.image.title": "Image Properties",
+  "panel.image.imageUrl": "Image URL",
+  "panel.image.urlPlaceholder": "https://example.com/image.jpg",
+  "panel.image.altText": "Alt Text",
+  "panel.image.altPlaceholder": "Image description",
+  "panel.image.width": "Width (0 = auto)",
+  // property panels — hero
+  "panel.hero.title": "Hero Properties",
+  "panel.hero.backgroundUrl": "Background URL",
+  "panel.hero.backgroundUrlPlaceholder": "https://example.com/hero.jpg",
+  "panel.hero.backgroundPosition": "Background Position",
+  "panel.hero.mode": "Mode",
+  "panel.hero.modeFluidHeight": "Fluid Height",
+  "panel.hero.modeFixedHeight": "Fixed Height",
+  "panel.hero.height": "Height",
+  "panel.hero.width": "Width",
+  "panel.hero.verticalAlign": "Vertical Align",
+  "panel.hero.verticalAlignTop": "Top",
+  "panel.hero.verticalAlignMiddle": "Middle",
+  "panel.hero.verticalAlignBottom": "Bottom",
+  // property panels — navbar
+  "panel.navbar.title": "Navbar Properties",
+  "panel.navbar.links": "Links",
+  "panel.navbar.linkLabel": "Link",
+  "panel.navbar.removeLink": "Remove",
+  "panel.navbar.linkText": "Text",
+  "panel.navbar.url": "URL",
+  "panel.navbar.addLink": "+ Add Link",
+  "panel.navbar.hamburger": "Hamburger (mobile)",
+  "panel.navbar.hamburgerShow": "Show",
+  "panel.navbar.hamburgerHide": "Hide",
+  "panel.navbar.linkColor": "Link Color",
+  "panel.navbar.linkFontSize": "Link Font Size",
+  "panel.navbar.linkPadding": "Link Padding",
+  // property panels — divider
+  "panel.divider.title": "Divider Properties",
+  "panel.divider.style": "Style",
+  "panel.divider.styleSolid": "Solid",
+  "panel.divider.styleDashed": "Dashed",
+  "panel.divider.styleDotted": "Dotted",
+  "panel.divider.color": "Color",
+  "panel.divider.width": "Width",
+  "panel.divider.lineWidth": "Line Width",
+  // property panels — spacer
+  "panel.spacer.title": "Spacer Properties",
+  "panel.spacer.height": "Height",
+  // property panels — social
+  "panel.social.title": "Social Properties",
+  "panel.social.icons": "Icons",
+  "panel.social.iconLabel": "Icon",
+  "panel.social.removeIcon": "Remove",
+  "panel.social.network": "Network",
+  "panel.social.url": "URL",
+  "panel.social.iconUrl": "Icon URL",
+  "panel.social.altText": "Label (alt text)",
+  "panel.social.addIcon": "+ Add Icon",
+  "panel.social.iconSize": "Icon Size",
+  "panel.social.spacing": "Spacing",
+  // property panels — html
+  "panel.html.title": "HTML Properties",
+  "panel.html.rawHtml": "Raw HTML",
+  // property panels — row
+  "panel.row.title": "Row Properties",
+  "panel.row.columnLayout": "Column Layout",
+  "panel.row.layout1col": "1 Column",
+  "panel.row.layout2col": "2 Equal",
+  "panel.row.layout3col": "3 Equal",
+  "panel.row.layout4col": "4 Equal",
+  "panel.row.backgroundImageUrl": "Background Image URL",
+  "panel.row.fullWidth": "Full Width",
+  "panel.row.displayCondition": "Display condition",
+  // controls — color picker
+  "control.color.label": "Color",
+  // controls — font picker
+  "control.fontPicker.label": "Font Family",
+  // controls — link type picker
+  "control.linkType.ariaLabel": "Insert a special link",
+  "control.linkType.placeholder": "+ Special link",
+  "control.linkType.emailPrompt": "Email address",
+  "control.linkType.telPrompt": "Phone number",
+  // controls — spacing input
+  "control.spacing.top": "Top",
+  "control.spacing.right": "Right",
+  "control.spacing.bottom": "Bottom",
+  "control.spacing.left": "Left",
+  "control.spacing.topTitle": "Top (px)",
+  "control.spacing.rightTitle": "Right (px)",
+  "control.spacing.bottomTitle": "Bottom (px)",
+  "control.spacing.leftTitle": "Left (px)",
+  // controls — alignment picker
+  "control.alignment.left": "Align left",
+  "control.alignment.center": "Align center",
+  "control.alignment.right": "Align right",
+  // controls — merge tag picker
+  "control.mergeTag.searchPlaceholder": "Search tags...",
+  "control.mergeTag.noMatches": "No matching tags",
+  // rich text bubble toolbar
+  "richtext.bold": "Bold (Cmd+B)",
+  "richtext.italic": "Italic (Cmd+I)",
+  "richtext.underline": "Underline (Cmd+U)",
+  "richtext.strike": "Strike",
+  "richtext.code": "Code",
+  "richtext.link": "Link",
+  "richtext.apply": "Apply",
+  "richtext.removeLink": "Remove link",
+  "richtext.urlPlaceholder": "https://…"
+}, x = /* @__PURE__ */ new Set(["ar", "he", "fa", "ur", "ps", "sd", "dv", "yi"]);
+let b = "en", h = { en: m };
+function L(e, t) {
+  b = e || "en", h = { en: m, ...t ?? {} };
+}
+function o(e) {
+  var t;
+  return ((t = h[b]) == null ? void 0 : t[e]) ?? m[e] ?? e;
+}
+function T(e, t) {
+  if (t) return t;
+  const n = (e || "en").toLowerCase().split(/[-_]/)[0];
+  return x.has(n) ? "rtl" : "ltr";
+}
+var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, r = (e, t, n, s) => {
+  for (var i = s > 1 ? void 0 : s ? w(t, n) : t, d = e.length - 1, c; d >= 0; d--)
+    (c = e[d]) && (i = (s ? c(t, n, i) : c(i)) || i);
+  return s && i && y(t, n, i), i;
 };
-const v = [
+const k = [
   { v: "welcome", l: "Welcome" },
   { v: "newsletter", l: "Newsletter" },
   { v: "transactional", l: "Transactional" },
@@ -13,21 +262,21 @@ const v = [
   { v: "announcement", l: "Announcement" },
   { v: "other", l: "Other" }
 ];
-let t = class extends m {
+let a = class extends u {
   constructor() {
     super(...arguments), this.open = !1, this._templates = [], this._name = "", this._description = "", this._category = "other", this._formError = "", this._close = () => {
       this.open = !1, this._formError = "";
     }, this._onSubmit = (e) => {
       e.preventDefault();
-      const i = this._name.trim();
-      if (!i) {
-        this._formError = "Name is required";
+      const t = this._name.trim();
+      if (!t) {
+        this._formError = o("template.error.name-required");
         return;
       }
       this._formError = "", this.dispatchEvent(
         new CustomEvent("template-save", {
           detail: {
-            name: i,
+            name: t,
             description: this._description.trim() || void 0,
             category: this._category
           },
@@ -53,61 +302,61 @@ let t = class extends m {
     }
   }
   render() {
-    return o`
+    return l`
       <div class="overlay" @click=${this._close}></div>
       <div class="modal">
         <div class="header">
-          <h3>Templates</h3>
-          <button class="close-btn" title="Close" @click=${this._close}>&times;</button>
+          <h3>${o("template.heading")}</h3>
+          <button class="close-btn" title=${o("template.close")} @click=${this._close}>&times;</button>
         </div>
         <div class="body">
           <div>
-            <h4 class="section-title">Choose a template</h4>
-            ${this._templates.length === 0 ? o`<div class="empty">No templates available yet.</div>` : o`<div class="grid">${this._templates.map((e) => this._renderCard(e))}</div>`}
+            <h4 class="section-title">${o("template.section.choose")}</h4>
+            ${this._templates.length === 0 ? l`<div class="empty">${o("template.empty")}</div>` : l`<div class="grid">${this._templates.map((e) => this._renderCard(e))}</div>`}
           </div>
 
           <form class="save-form" @submit=${this._onSubmit}>
-            <h4 class="section-title">Save current as template</h4>
+            <h4 class="section-title">${o("template.section.save")}</h4>
             <div class="save-row">
               <div class="field">
-                <label for="template-name">Name</label>
+                <label for="template-name">${o("template.field.name")}</label>
                 <input
                   id="template-name"
                   name="template-name"
                   type="text"
-                  placeholder="My template"
+                  placeholder=${o("template.field.name-placeholder")}
                   .value=${this._name}
                   @input=${(e) => this._name = e.target.value}
                 />
               </div>
               <div class="field">
-                <label for="template-category">Category</label>
+                <label for="template-category">${o("template.field.category")}</label>
                 <select
                   id="template-category"
                   name="template-category"
                   .value=${this._category}
                   @change=${(e) => this._category = e.target.value}
                 >
-                  ${v.map(
-      (e) => o`<option value=${e.v} ?selected=${this._category === e.v}>${e.l}</option>`
+                  ${k.map(
+      (e) => l`<option value=${e.v} ?selected=${this._category === e.v}>${e.l}</option>`
     )}
                 </select>
               </div>
             </div>
             <div class="field">
-              <label for="template-description">Description (optional)</label>
+              <label for="template-description">${o("template.field.description")}</label>
               <textarea
                 id="template-description"
                 name="template-description"
-                placeholder="What is this template for?"
+                placeholder=${o("template.field.description-placeholder")}
                 .value=${this._description}
                 @input=${(e) => this._description = e.target.value}
               ></textarea>
             </div>
-            ${this._formError ? o`<div class="error">${this._formError}</div>` : ""}
+            ${this._formError ? l`<div class="error">${this._formError}</div>` : ""}
             <div class="form-actions">
-              <button type="button" class="secondary" @click=${this._close}>Cancel</button>
-              <button type="submit">Save template</button>
+              <button type="button" class="secondary" @click=${this._close}>${o("template.cancel")}</button>
+              <button type="submit">${o("template.save")}</button>
             </div>
           </form>
         </div>
@@ -115,11 +364,11 @@ let t = class extends m {
     `;
   }
   _renderCard(e) {
-    return o`
+    return l`
       <button class="template-card" @click=${() => this._onPick(e)} title="Load ${e.name}">
-        ${e.thumbnail ? o`<img class="thumb" src=${e.thumbnail} alt="" />` : o`<div class="thumb-placeholder">${e.category ?? "template"}</div>`}
+        ${e.thumbnail ? l`<img class="thumb" src=${e.thumbnail} alt="" />` : l`<div class="thumb-placeholder">${e.category ?? "template"}</div>`}
         <span class="name">${e.name}</span>
-        ${e.description ? o`<span class="description">${e.description}</span>` : ""}
+        ${e.description ? l`<span class="description">${e.description}</span>` : ""}
       </button>
     `;
   }
@@ -133,7 +382,7 @@ let t = class extends m {
     );
   }
 };
-t.styles = f`
+a.styles = v`
     :host { display: none; }
     :host([open]) { display: block; position: fixed; inset: 0; z-index: 10000; }
     .overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
@@ -246,29 +495,39 @@ t.styles = f`
     .error { color: var(--pigeon-danger, #ef4444); font-size: 12px; }
   `;
 r([
-  c({ attribute: !1 })
-], t.prototype, "storage", 2);
+  g({ attribute: !1 })
+], a.prototype, "storage", 2);
 r([
-  c({ type: Boolean, reflect: !0 })
-], t.prototype, "open", 2);
+  g({ type: Boolean, reflect: !0 })
+], a.prototype, "open", 2);
 r([
-  s()
-], t.prototype, "_templates", 2);
+  p()
+], a.prototype, "_templates", 2);
 r([
-  s()
-], t.prototype, "_name", 2);
+  p()
+], a.prototype, "_name", 2);
 r([
-  s()
-], t.prototype, "_description", 2);
+  p()
+], a.prototype, "_description", 2);
 r([
-  s()
-], t.prototype, "_category", 2);
+  p()
+], a.prototype, "_category", 2);
 r([
-  s()
-], t.prototype, "_formError", 2);
-t = r([
-  g("pigeon-template-picker")
-], t);
+  p()
+], a.prototype, "_formError", 2);
+a = r([
+  f("pigeon-template-picker")
+], a);
+const C = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  get PigeonTemplatePicker() {
+    return a;
+  }
+}, Symbol.toStringTag, { value: "Module" }));
 export {
-  t as PigeonTemplatePicker
+  a as P,
+  L as c,
+  C as p,
+  T as r,
+  o as t
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lit-pigeon/editor",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Lit Web Components UI for the Pigeon email editor",
   "type": "module",
   "main": "./dist/index.js",
@@ -26,7 +26,7 @@
     "@tiptap/pm": "^2.10.0",
     "@tiptap/starter-kit": "^2.10.0",
     "lit": "^3.1.0",
-    "@lit-pigeon/core": "^0.1.2"
+    "@lit-pigeon/core": "^0.2.0"
   },
   "devDependencies": {
     "happy-dom": "^20.9.0",