@emabuild/core 0.0.3 → 0.0.5

package/dist/video-tool-CwWMKobZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"video-tool-CwWMKobZ.js","sources":["../src/tools/built-in/video-tool.ts"],"sourcesContent":["/**\n * @module video-tool\n *\n * Video embed block with thumbnail and play button overlay.\n * Supports YouTube and Vimeo URLs with auto-thumbnail detection.\n *\n * Email compatibility: Video cannot play in email — renders as\n * a linked thumbnail image with a play button overlay.\n */\n\nimport { html, TemplateResult } from 'lit';\nimport type { ContentValues, ExportRenderContext } from '@emabuild/types';\nimport type { LitToolDefinition } from '../tool-registry.js';\nimport { str } from '../helpers/value-extractor.js';\nimport { emailTableCell } from '../helpers/email-html.js';\n\n/** Extract YouTube video ID and return thumbnail URL */\nfunction getYouTubeThumbnail(url: string): string | null {\n  const match = url.match(/(?:youtube\\.com\\/watch\\?v=|youtu\\.be\\/|youtube\\.com\\/embed\\/)([a-zA-Z0-9_-]{11})/);\n  return match ? `https://img.youtube.com/vi/${match[1]}/maxresdefault.jpg` : null;\n}\n\nexport const videoTool: LitToolDefinition = {\n  name: 'video',\n  label: 'Video',\n  icon: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"5 3 19 12 5 21 5 3\"/></svg>`,\n  supportedDisplayModes: ['email', 'web'],\n  position: 10,\n  options: {\n    video: {\n      title: 'Video',\n      options: {\n        url: { label: 'Video URL', defaultValue: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ', widget: 'text' },\n        thumbnailUrl: { label: 'Thumbnail URL (auto)', defaultValue: '', widget: 'text' },\n        alt: { label: 'Alt Text', defaultValue: 'Video', widget: 'text' },\n      },\n    },\n    style: {\n      title: 'Style',\n      options: { textAlign: { label: 'Align', defaultValue: 'center', widget: 'alignment' } },\n    },\n    spacing: {\n      title: 'Spacing',\n      options: { containerPadding: { label: 'Padding', defaultValue: '10px', widget: 'padding' } },\n    },\n  },\n  defaultValues: {\n    url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',\n    thumbnailUrl: '', alt: 'Video', textAlign: 'center', containerPadding: '10px',\n  },\n  renderer: {\n    renderEditor(values: ContentValues): TemplateResult {\n      const padding = str(values, 'containerPadding', '10px');\n      const url = str(values, 'url');\n      const thumbnail = str(values, 'thumbnailUrl') || getYouTubeThumbnail(url) || '';\n      const align = str(values, 'textAlign', 'center');\n\n      if (!thumbnail) {\n        return html`<div style=\"padding:${padding};text-align:${align};\"><div style=\"background:#0f172a;border-radius:8px;padding:40px;text-align:center;color:white;font-family:sans-serif;\"><div style=\"font-size:48px;opacity:0.8;\">▶</div><div style=\"font-size:12px;margin-top:8px;opacity:0.6;\">${url || 'Enter video URL'}</div></div></div>`;\n      }\n      return html`<div style=\"padding:${padding};text-align:${align};\"><div style=\"position:relative;display:inline-block;max-width:100%;cursor:pointer;\"><img src=${thumbnail} alt=\"Video thumbnail\" style=\"display:block;max-width:100%;border-radius:4px;\" /><div style=\"position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\"><div style=\"width:60px;height:60px;background:rgba(0,0,0,0.7);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:24px;\">▶</div></div></div></div>`;\n    },\n    renderHtml(values: ContentValues, ctx: ExportRenderContext): string {\n      const padding = str(values, 'containerPadding', '10px');\n      const url = str(values, 'url', '#');\n      const thumbnail = str(values, 'thumbnailUrl') || getYouTubeThumbnail(url) || '';\n      const alt = str(values, 'alt', 'Video');\n      const align = str(values, 'textAlign', 'center');\n\n      const imgTag = thumbnail\n        ? `<img src=\"${thumbnail}\" alt=\"${alt}\" width=\"${ctx.columnWidth}\" style=\"display:block;max-width:100%;width:${ctx.columnWidth}px;border:0;\" />`\n        : `<div style=\"background:#0f172a;padding:40px;text-align:center;color:white;font-family:arial,sans-serif;font-size:16px;\">▶ Watch Video</div>`;\n      return emailTableCell(`<a href=\"${url}\" target=\"_blank\" style=\"text-decoration:none;\">${imgTag}</a>`, { padding, align });\n    },\n  },\n};\n"],"names":["getYouTubeThumbnail","url","match","videoTool","values","padding","str","thumbnail","align","html","ctx","alt","imgTag","emailTableCell"],"mappings":";;AAiBA,SAASA,EAAoBC,GAA4B;AACvD,QAAMC,IAAQD,EAAI,MAAM,kFAAkF;AAC1G,SAAOC,IAAQ,8BAA8BA,EAAM,CAAC,CAAC,uBAAuB;AAC9E;AAEO,MAAMC,IAA+B;AAAA,EAC1C,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,uBAAuB,CAAC,SAAS,KAAK;AAAA,EACtC,UAAU;AAAA,EACV,SAAS;AAAA,IACP,OAAO;AAAA,MACL,OAAO;AAAA,MACP,SAAS;AAAA,QACP,KAAK,EAAE,OAAO,aAAa,cAAc,+CAA+C,QAAQ,OAAA;AAAA,QAChG,cAAc,EAAE,OAAO,wBAAwB,cAAc,IAAI,QAAQ,OAAA;AAAA,QACzE,KAAK,EAAE,OAAO,YAAY,cAAc,SAAS,QAAQ,OAAA;AAAA,MAAO;AAAA,IAClE;AAAA,IAEF,OAAO;AAAA,MACL,OAAO;AAAA,MACP,SAAS,EAAE,WAAW,EAAE,OAAO,SAAS,cAAc,UAAU,QAAQ,YAAA,EAAY;AAAA,IAAE;AAAA,IAExF,SAAS;AAAA,MACP,OAAO;AAAA,MACP,SAAS,EAAE,kBAAkB,EAAE,OAAO,WAAW,cAAc,QAAQ,QAAQ,UAAA,EAAU;AAAA,IAAE;AAAA,EAC7F;AAAA,EAEF,eAAe;AAAA,IACb,KAAK;AAAA,IACL,cAAc;AAAA,IAAI,KAAK;AAAA,IAAS,WAAW;AAAA,IAAU,kBAAkB;AAAA,EAAA;AAAA,EAEzE,UAAU;AAAA,IACR,aAAaC,GAAuC;AAClD,YAAMC,IAAUC,EAAIF,GAAQ,oBAAoB,MAAM,GAChDH,IAAMK,EAAIF,GAAQ,KAAK,GACvBG,IAAYD,EAAIF,GAAQ,cAAc,KAAKJ,EAAoBC,CAAG,KAAK,IACvEO,IAAQF,EAAIF,GAAQ,aAAa,QAAQ;AAE/C,aAAKG,IAGEE,wBAA2BJ,CAAO,eAAeG,CAAK,kGAAkGD,CAAS,kXAF/JE,wBAA2BJ,CAAO,eAAeG,CAAK,mOAAmOP,KAAO,iBAAiB;AAAA,IAG5T;AAAA,IACA,WAAWG,GAAuBM,GAAkC;AAClE,YAAML,IAAUC,EAAIF,GAAQ,oBAAoB,MAAM,GAChDH,IAAMK,EAAIF,GAAQ,OAAO,GAAG,GAC5BG,IAAYD,EAAIF,GAAQ,cAAc,KAAKJ,EAAoBC,CAAG,KAAK,IACvEU,IAAML,EAAIF,GAAQ,OAAO,OAAO,GAChCI,IAAQF,EAAIF,GAAQ,aAAa,QAAQ,GAEzCQ,IAASL,IACX,aAAaA,CAAS,UAAUI,CAAG,YAAYD,EAAI,WAAW,+CAA+CA,EAAI,WAAW,qBAC5H;AACJ,aAAOG,EAAe,YAAYZ,CAAG,mDAAmDW,CAAM,QAAQ,EAAE,SAAAP,GAAS,OAAAG,GAAO;AAAA,IAC1H;AAAA,EAAA;AAEJ;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@emabuild/core",
-  "version": "0.0.3",
-  "description": "Drag & drop email editor Web Component — Unlayer-compatible",
+  "version": "0.0.5",
+  "description": "Drag & drop email editor Web Component — embeddable anywhere",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -26,8 +26,8 @@
   "customElements": "custom-elements.json",
   "dependencies": {
     "lit": "^3.2.0",
-    "@emabuild/types": "0.0.3",
-    "@emabuild/email-renderer": "0.0.3"
+    "@emabuild/types": "0.0.5",
+    "@emabuild/email-renderer": "0.0.5"
   },
   "devDependencies": {
     "vite": "^6.2.0",
@@ -36,6 +36,18 @@
   "publishConfig": {
     "access": "public"
   },
+  "keywords": [
+    "email",
+    "editor",
+    "drag-and-drop",
+    "email-builder",
+    "web-component",
+    "lit",
+    "newsletter",
+    "html-email",
+    "wysiwyg",
+    "email-template"
+  ],
   "license": "MIT",
   "sideEffects": false,
   "scripts": {